/* --- Wrapper & Controls --- */
.fm-directory-wrapper { max-width: 1200px; margin: 0 auto; font-family: sans-serif; }
.fm-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; background: #f5f5f5; padding: 15px; border-radius: 8px; }
.fm-filters { flex: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.fm-filters input, .fm-filters select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.fm-view-toggle button { padding: 8px 15px; cursor: pointer; border: 1px solid #333; background: #fff; color: #333; border-radius: 4px; }
.fm-view-toggle button.active { background: #333; color: #fff; }

/* --- Grid View --- */
.view-grid { 
    display: grid; 
    grid-template-columns: 1fr; /* Mobile: 1 Column */
    gap: 20px; 
}

/* Tablet (Portrait): 2 Columns */
@media (min-width: 600px) {
    .view-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 4 Columns */
@media (min-width: 1024px) {
    .view-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ... Keep .fm-card styles below ... */
.fm-card { 
    border: 1px solid #e0e0e0; 
    padding: 30px 20px; 
    border-radius: 12px; 
    text-align: center; 
    background: #fff; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    transition: transform 0.2s; 
}
.fm-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }


/* --- IMAGE UPDATE: Force Override of Theme Defaults --- */
.fm-card img { 
    width: 130px !important; 
    height: 130px !important; 
    border-radius: 50% !important; 
    
    /* Force the border to show */
    border: 7px solid #27447c8a !important; 
    
    /* Ensure the image stays a circle and doesn't stretch */
    object-fit: cover; 
    aspect-ratio: 1 / 1; 
    
    margin-bottom: 15px; 
    
    /* Reset theme padding/margin interference on images */
    padding: 0 !important; 
    display: inline-block !important;
    box-shadow: none !important;
}

/* --- Content Typography --- */
.fm-card h3 { margin: 5px 0 5px; font-size: 1.4em; text-transform: uppercase; color: #333; font-weight: 800; }

/* New Order Styles */
.fm-job { color: #005a87; font-weight: bold; margin-bottom: 5px; font-size: 1.1em; }
.fm-meta { font-size: 0.9em; color: #555; margin-bottom: 5px; font-weight: 600; }
.fm-dept { font-size: 0.85em; color: #888; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; }

.fm-details-btn { 
    background: #3e6487; 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    cursor: pointer; 
    border-radius: 5px; 
    font-size: 0.9em;
}
.fm-details-btn:hover { background: #2c4a66; }

/* --- List View --- */
.fm-list-table { width: 100%; border-collapse: collapse; }
.fm-list-table th, .fm-list-table td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; }
.fm-details-link { color: #333; text-decoration: none; font-weight: bold; }

/* --- Tree View --- */
.fm-tree-wrapper ul { padding-left: 20px; list-style: none; border-left: 2px solid #ccc; }
.fm-tree-wrapper li { margin: 10px 0; position: relative; }
.fm-tree-wrapper li::before { content: ''; position: absolute; top: 15px; left: -20px; width: 20px; height: 2px; background: #ccc; }
.tree-node { display: inline-block; background: #fff; border: 1px solid #ccc; padding: 5px 10px; border-radius: 4px; }
.tree-link { text-decoration: none; color: inherit; display: block; }
.tree-name { font-weight: bold; }
.tree-job { font-size: 0.8em; color: #666; }

/* --- MODAL UPDATE: Perfectly Centered --- */
.fm-modal { 
    display: none; 
    position: fixed; 
    z-index: 99999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.7); 
}

.fm-modal-content { 
    background-color: #fff; 
    /* Absolute Centering Logic */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 90%; 
    max-width: 500px; 
    /* Prevent cutoff on small screens/tall content */
    max-height: 90vh; 
    overflow-y: auto;
    
    padding: 40px; 
    border-radius: 12px; 
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.close-modal { position: absolute; right: 15px; top: 10px; font-size: 28px; font-weight: bold; cursor: pointer; color: #aaa; }
.close-modal:hover { color: #000; }

.modal-img { 
    max-width: 180px; 
    height: auto; 
    display: block; 
    margin: 0 auto 15px auto; 
    border-radius: 8px; 
    object-fit: contain; 
}

.modal-name { font-size: 2em; margin: 0 0 5px 0; color: #333; font-weight: 800; text-transform: uppercase; }
.modal-job { font-size: 1.4em; color: #005a87; margin-bottom: 5px; font-weight: bold; }
.modal-meta { font-size: 1em; color: #555; font-weight: 600; margin-bottom: 2px; }
.modal-dept { font-size: 0.9em; color: #888; text-transform: uppercase; margin-bottom: 20px; }
.modal-bio { text-align: left; color: #666; line-height: 1.6; border-top: 1px solid #eee; padding-top: 20px; margin-top: 15px; }

/* Add this to the bottom of your CSS file */

#fm-load-more-wrapper {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

#fm-load-more-btn {
    background: #27447c;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
    font-weight: bold;
}

#fm-load-more-btn:hover {
    background: #1a3360;
}