/*
Plugin: Interview Manager Dashboard
Description: Styles for the manager dashboard cards and student list.
Version: 1.0.11 // Updated version
*/

/* --- General Dashboard Layout --- */
.imd-dashboard {
    margin-top: 20px;
    padding: 20px; /* Add some padding around the main content */
    background-color: #f9f9f9; /* Light background */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

/* Style for disabled cards (e.g., if a required plugin is inactive) */
.imd-card.imd-card-disabled {
    opacity: 0.7;
    cursor: default; /* Change cursor */
    /* Remove hover effect for disabled cards */
    transform: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    pointer-events: none; /* Prevent clicks */
}
/* Style for the link wrapping student list items */
.imd-student-list li a.imd-student-link {
    display: flex; /* Use flexbox for the outer container */
    flex-direction: column; /* Stack header and contact details vertically */
    gap: 10px; /* Gap between header and contact details */
    align-items: flex-start; /* Align items to the left */
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color from the parent li */
    /* Removed padding and negative margin here */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.imd-card-question-banks .imd-card-icon {
    color: #ffb900; /* WordPress yellow/orange */
}

/* **UPDATED** Add padding directly to the li */
.imd-student-list li {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px 20px; /* Add padding here */
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Keep the hover effect on the li */
.imd-student-list li:hover {
    transform: translateY(-2px); /* Lift effect on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); /* Stronger shadow on hover */
}

.imd-dashboard h2 {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 20px;
    color: #333;
    border-bottom: 1px solid #eee; /* Subtle separator */
    padding-bottom: 10px;
}


/* --- Card Layout --- */
.imd-cards {
    display: flex;
    flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
    gap: 20px; /* Space between cards */
    margin-bottom: 30px; /* Space below the cards */
}

.imd-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    flex: 1 1 250px; /* Allow cards to grow and shrink, base width 250px */
    max-width: 300px; /* Max width for larger screens */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none; /* Remove underline for link card */
    color: inherit; /* Inherit text color for link card */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex; /* Use flexbox for internal layout */
    flex-direction: column; /* Stack icon and content */
    align-items: center; /* Center items horizontally */
    cursor: pointer; /* Indicate it's clickable */
}

.imd-card:hover {
    transform: translateY(-5px); /* Lift card slightly on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Specific icon colors */
.imd-card-students .imd-card-icon {
    color: #23282d; /* Darker grey for students */
}

.imd-card-interviews .imd-card-icon {
    color: #46b450; /* WordPress green for interviews */
}

.imd-card-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555; /* Slightly less prominent title */
}

.imd-card-count {
    font-size: 2em;
    font-weight: bold;
    color: #333;
}

/* Style for the Analysis card icon */
.imd-card-analysis .imd-card-icon {
    color: #00a0d2; /* WordPress blue - you can choose a different color if you prefer */
}

/* Style for the arrow container */
.imd-card-arrow {
    font-size: 1.5em; /* Size of the arrow icon */
    margin-top: 10px; /* Space above the arrow */
    color: #0073aa; /* Color of the arrow - WordPress blue */
    display: flex; /* Use flexbox to center the arrow */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 1.5em; /* Give it a defined height to ensure consistent spacing */
}

/* Ensure the arrow is still visible in disabled cards */
.imd-card.imd-card-disabled .imd-card-arrow {
    color: #a0a5aa; /* Lighter color for disabled arrow */
}


/* --- Student List View --- */

/* Back link */
.imd-back-link {
    display: inline-block;
    margin-bottom: 20px;
    text-decoration: none;
    color: #0073aa;
    font-size: 1.1em;
}

.imd-back-link:hover {
    text-decoration: underline;
}

/* --- Filter Form Styles --- */
.imd-filter-form {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.imd-filter-form form {
    display: flex;
    flex-direction: column; /* Stack fields and buttons vertically */
    gap: 15px; /* Space between field row and button row */
}

.imd-filter-fields {
    display: flex;
    flex-wrap: wrap; /* Allow fields to wrap */
    gap: 20px; /* Space between filter fields */
    align-items: center; /* Align items vertically in the row */
}

.imd-filter-field {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between label/icon and input */
}

.imd-filter-field label {
    font-weight: bold;
    color: #555;
    flex-shrink: 0; /* Prevent label from shrinking */
    display: flex; /* Align icon and text in label */
    align-items: center;
    gap: 4px; /* Space between icon and label text */
}

.imd-filter-field input[type="text"],
.imd-filter-field select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    flex-grow: 1; /* Allow input to grow */
    max-width: 250px; /* Optional: Limit individual input width */
    width: 100%; /* Make them fill container up to max-width */
}

.imd-filter-buttons {
    display: flex;
    gap: 10px; /* Space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap */
}

.imd-filter-buttons .button {
    /* Basic button styles from WordPress admin */
    padding: 8px 16px;
    line-height: 1.5;
    font-size: 1em;
    cursor: pointer;
    text-decoration: none; /* For the Clear link */
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
}

.imd-filter-buttons .button-primary {
    background-color: #0073aa;
    border-color: #006799;
    color: #fff;
}

.imd-filter-buttons .button-primary:hover {
     background-color: #006799;
     border-color: #00517d;
}

.imd-filter-buttons .button-secondary {
    background-color: #f3f3f3;
    border-color: #ccc;
    color: #32373c;
}

.imd-filter-buttons .button-secondary:hover {
    background-color: #ebebeb;
    border-color: #bbb;
    color: #222;
}


/* Search input wrap (adjust spacing now that filter form is above) */
.imd-student-search-wrap {
    margin-top: 20px; /* Space above the search input */
    margin-bottom: 20px; /* Space below the search input */
    display: flex; /* Align label and input */
    align-items: center; /* Vertically center label and input */
    gap: 10px; /* Space between label and input */
    flex-wrap: wrap; /* Allow wrap on small screens */
    padding: 10px 0; /* Add vertical padding */
    border-bottom: 1px solid #eee; /* Separator */
}

.imd-student-search-wrap label {
    font-weight: bold;
    flex-shrink: 0; /* Prevent label from shrinking */
    color: #555;
    display: flex; /* Align icon and text in label */
    align-items: center;
    gap: 4px; /* Space between icon and label text */
}

.imd-student-search-wrap input[type="text"] {
    flex-grow: 1; /* Allow input to take available space */
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-width: 300px; /* Limit search input width */
    font-size: 1em;
}


/* Student list container (used by JS) */
#imd-student-list-container {
    /* No specific styles needed here unless you want overflow scroll etc. */
}

/* Student list */
.imd-student-list {
    list-style: none;
    padding: 0;
    margin-top: 0; /* Remove top margin since search wrap adds space */
}


/* --- Student List Item Layout --- */

/* This is the top flex container inside the <a> tag */
.imd-student-header {
    display: flex;
    width: 100%; /* Take full width of the link */
    justify-content: space-between; /* Push left and right sides apart */
    align-items: center; /* Vertically center items */
    flex-wrap: wrap; /* Allow wrapping if horizontal space is limited */
    gap: 15px; /* Space between sections in the header */
     /* Removed padding-bottom from here */
}

/* Container for Name and Meta (Batch/Dept/Inst) */
.imd-header-left {
    display: flex; /* Make this container horizontal */
    align-items: center; /* Vertically center Name and Meta */
    flex-grow: 1; /* Allow this section to grow and take space */
    flex-basis: 0; /* Allow shrinking below content size if needed */
    min-width: 200px; /* Minimum width for the left section before wrapping */
    gap: 20px; /* Space between Name and Meta sections */
    flex-wrap: wrap; /* Allow Name and Meta to wrap if needed */
}

.imd-header-left h4 {
    margin: 0; /* Remove margins */
    font-size: 1.2em;
    color: #333;
    line-height: 1.2;
    flex-shrink: 0; /* Prevent name from shrinking too much */
}

/* Container for Batch Year, Department, and Institution - now horizontal, part of header-left */
.imd-student-meta {
    display: flex; /* Arrange Batch, Dept, Inst horizontally */
    gap: 15px; /* Space between Batch Year, Department, and Institution */
    align-items: center; /* Vertically align Year, Dept, Inst */
    flex-wrap: wrap; /* Allow year/dept/inst to wrap if very narrow */
}

.imd-student-meta span {
    font-size: 0.9em; /* Slightly smaller font */
    font-weight: bold;
}

.imd-batch-year {
     color: #0073aa; /* Example color for Batch Year (WordPress blue) */
}

.imd-department {
     color: #a46497; /* Example color for Department (WordPress purple) */
}

/* New style for Institution span */
.imd-institution {
    color: #00a0d2; /* Example color for Institution (Another WordPress blue/teal) */
}


/* Interview Stats Section (Right) */
.imd-interview-stats {
    display: flex; /* Arrange count and label vertically */
    flex-direction: column;
    align-items: flex-end; /* Align items (count and label) to the right */
    text-align: right; /* Ensure text within is right-aligned */
    flex-shrink: 0; /* Prevent shrinking */
    flex-basis: auto; /* Take only needed width */
    min-width: 80px; /* Ensure minimum space for stats */
}

.imd-interview-count {
    font-size: 1.8em; /* Make the count prominent */
    font-weight: bold;
    color: #46b450; /* WordPress green color */
    line-height: 1; /* Tighter line height for count */
}

.imd-interview-label {
    font-size: 0.75em; /* Smaller text for the label */
    color: #777; /* Lighter color for the label */
    margin-top: 2px; /* Space between count and label */
    line-height: 1; /* Tighter line height for label */
}

/* Container for Username and Email - Full width below header, now horizontal */
.imd-contact-details {
    width: 100%; /* Take full width */
    display: flex; /* Arrange items horizontally */
    gap: 30px; /* Space between username and email */
    flex-wrap: wrap; /* Allow username/email to wrap */
    align-items: center; /* Vertically align items */
    /* Removed padding-top from here */
}

.imd-contact-details p {
    margin: 0; /* Remove margins */
    font-size: 0.9em;
    color: #555;
    flex: 1; /* Allow paragraphs to share available space */
    min-width: 150px; /* Minimum width for each paragraph before wrapping */
}

.imd-contact-details p strong {
     color: #333; /* Keep labels bold */
     margin-right: 5px; /* Space after label */
}


/* Add spacing between the two main rows (header and contact details) */
.imd-student-header + .imd-contact-details {
     margin-top: 10px; /* Add space between header and contact details */
     padding-top: 10px; /* Add padding above the contact details */
     border-top: 1px solid #eee; /* Optional: Add a subtle separator line */
}


/* Responsive adjustments for student list items */
@media (max-width: 768px) {
    .imd-student-header {
        flex-direction: column; /* Stack header sections vertically */
        align-items: flex-start; /* Align stacked header sections to the left */
        gap: 10px; /* Adjust gap when stacking */
         /* Removed padding from here */
    }

    /* header-left containing name and meta */
    .imd-header-left {
         width: 100%; /* Take full width when stacked */
         min-width: auto; /* Remove min-width constraint */
         flex-basis: auto; /* Reset flex-basis */
         flex-direction: column; /* Stack name and meta vertically */
         align-items: flex-start; /* Align stacked name/meta to the left */
         gap: 5px; /* Smaller gap when stacked */
    }

    /* Student meta (year/dept/inst) when stacked */
     .imd-student-meta {
          gap: 10px; /* Adjust gap between Year, Dept, Inst when stacked */
          margin-top: 0; /* Remove top margin */
     }

    .imd-interview-stats {
        align-items: flex-start; /* Align stats to the left when stacked */
        margin-top: 5px; /* Add space above stats when stacked */
        /* border-top: 1px solid #eee; /* Moved border to the second row container */
        /* padding-top: 10px; /* Removed padding from here */
        width: 100%; /* Take full width when stacked */
        min-width: auto; /* Remove min-width */
        flex-basis: auto; /* Reset flex-basis */
    }

    .imd-interview-count {
        font-size: 1.5em; /* Adjust size on smaller screens */
    }

    /* Contact details when stacked */
    .imd-contact-details {
        flex-direction: column; /* Stack username and email vertically */
        gap: 5px; /* Smaller gap when stacked */
        align-items: flex-start; /* Align stacked items to the left */
         padding-top: 10px; /* Increase padding when stacked */
         border-top: 1px solid #eee; /* Add separator */
         margin-top: 10px; /* Ensure margin above it */
    }

     .imd-contact-details p {
          width: 100%; /* Take full width when stacked */
          min-width: auto; /* Remove min-width */
          flex-basis: auto; /* Reset flex-basis */
     }

     /* Remove the desktop-specific margin/padding/border when stacked */
     .imd-student-header + .imd-contact-details {
          margin-top: 10px; /* Use the margin from the contact details itself */
          padding-top: 10px; /* Use the padding from the contact details itself */
          border-top: 1px solid #eee; /* Use the border from the contact details itself */
     }
}


/* --- Utility/Error Styles --- */

.imd-error,
.imd-login-prompt,
.imd-warning {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #ffb900; /* WordPress warning color */
    padding: 15px;
    margin-top: 20px; /* Adjust margin if needed */
    margin-bottom: 20px;
    border-radius: 4px;
    color: #3c434a; /* WordPress default text color */
}

.imd-error a,
.imd-login-prompt a {
    color: #0073aa;
    text-decoration: underline;
}