/*
--------------------------------------------------------------------------
Student Portal Styles
--------------------------------------------------------------------------
Covers the login page, account picker, and the portal itself
(dashboard, waivers, attendance, promotions, profile).
*/


/* Border around the page's own <h1> title, scoped specifically to
   pages containing the portal (rather than every page site-wide,
   which would happen with an unscoped .entry-title rule). */

article:has(.adms-student-portal) > .entry-title,
article:has(.adms-student-login) > .entry-title,
article:has(.adms-student-account-picker) > .entry-title {
    border: 1px solid #ddd;
    padding: 10px 15px;
    display: inline-block;
}


/* Hide the site's own header and main navigation on pages
   containing the portal, for a more focused, app-like experience.
   Based on this theme's current markup (<header class="site-header">
   and <nav class="site-nav">) - if the theme changes, these
   selectors will need updating to match. The login form
   intentionally keeps the site header visible. */

body:has(.adms-student-portal) .site-header,
body:has(.adms-student-portal) .site-nav,
body:has(.adms-student-account-picker) .site-header,
body:has(.adms-student-account-picker) .site-nav {
    display: none;
}


/* Shared container - keeps a comfortable reading width on desktop,
   but critically adds side padding on mobile so content never
   touches the screen edge. */

.adms-student-login,
.adms-student-account-picker {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.adms-student-portal {
    max-width: 100%;
    box-sizing: border-box;
}

.adms-student-portal.adms-portal-bordered {
    border: 1px solid #ccc;
    border-radius: 4px;
}

.adms-portal-bordered .adms-portal-menu {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.adms-portal-content {
    padding: 0 15px 20px 15px;
}


/* Menu bar */

.adms-portal-menu {
    background: #2b2b2b;
    padding: 8px;
    margin: 0 0 24px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.adms-portal-menu-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.adms-portal-menu a,
.adms-portal-dropdown-btn {
    color: #f2f2f2;
}


/* Mobile menu toggle - hidden on desktop, shown only under the
   mobile breakpoint below */

.adms-portal-menu-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #f2f2f2;
    border: none;
    padding: 12px 14px;
    font-size: 1em;
    font-family: inherit;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
}

.adms-portal-menu-toggle:hover {
    background: rgba(255,255,255,0.1);
}

.adms-portal-menu-toggle-icon {
    font-size: 1.2em;
    line-height: 1;
}

.adms-portal-menu-items > a {
    white-space: nowrap;
    text-decoration: none;
    padding: 10px 14px;
    transition: background-color 0.15s ease;
}

.adms-portal-menu-items > a:hover {
    background: rgba(255,255,255,0.12);
}

.adms-portal-menu a.adms-active {
    background: crimson;
    color: #fff;
    font-weight: 600;
}

.adms-portal-logout {
    margin-left: auto;
}

.adms-portal-logout a {
    white-space: nowrap;
    text-decoration: none;
    padding: 10px 16px;
    background: rgba(255,255,255,0.18);
    color: #f2f2f2;
    border: 1px solid rgba(255,255,255,0.3);
    transition: background-color 0.15s ease;
}

.adms-portal-logout a:hover {
    background: rgba(220,20,60,0.85);
    border-color: crimson;
}


/* Dropdowns - open on hover for desktop mouse users. On mobile,
   hover doesn't apply, so a small JS handler toggles the
   adms-dropdown-open class on click instead (see the script below
   the menu markup). */

.adms-portal-dropdown {
    position: relative;
}

.adms-portal-dropdown-btn {
    cursor: pointer;
    white-space: nowrap;
    padding: 10px 14px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1em;
    font-family: inherit;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.adms-portal-dropdown-btn:hover {
    background: rgba(255,255,255,0.12);
}

.adms-portal-dropdown-btn.adms-active {
    background: crimson;
    color: #fff;
    font-weight: 600;
}

.adms-portal-dropdown-btn::after {
    content: "\25BE";
    margin-left: 6px;
    font-size: 0.8em;
    opacity: 0.8;
}

.adms-portal-dropdown-content {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    padding-top: 8px;
    background: #fff;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    min-width: 210px;
    z-index: 20;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.adms-portal-dropdown:hover .adms-portal-dropdown-content,
.adms-portal-dropdown.adms-dropdown-open .adms-portal-dropdown-content {
    display: flex;
}

.adms-portal-dropdown-content a {
    padding: 10px 14px;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.adms-portal-dropdown-content a:hover {
    background: #f4f4f4;
}

.adms-portal-dropdown-content a.adms-active {
    background: crimson;
    color: #fff;
    font-weight: 600;
}

@media (max-width: 600px) {

    .adms-portal-menu {
        padding: 6px;
    }

    .adms-portal-menu-toggle {
        display: flex;
    }

    .adms-portal-menu-items {
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 6px 6px 6px;
        margin-top: 4px;
        border-top: 1px solid rgba(255,255,255,0.15);
    }

    .adms-portal-menu-items.adms-menu-open {
        display: flex;
    }

    .adms-portal-menu-items > a,
    .adms-portal-dropdown-btn {
        display: block;
        width: 100%;
        text-align: left;
        padding: 13px 14px;
    }

    .adms-portal-logout {
        margin-left: 0;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.15);
    }

    .adms-portal-logout a {
        display: block;
        text-align: center;
    }

    .adms-portal-dropdown-content {
        position: static;
        box-shadow: none;
        margin-top: 4px;
        padding: 0 0 0 15px;
    }

}


/* Form fields - full width up to a sensible max, so inputs never
   overflow a narrow screen */

.adms-portal-field {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.adms-student-login form,
.adms-student-portal form {
    max-width: 500px;
}

.adms-student-portal .form-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 500px;
}

.adms-student-portal .form-table th,
.adms-student-portal .form-table td {
    border: 1px solid #ddd;
    padding: 8px 10px;
}

.adms-student-portal .form-table th {
    width: auto;
    min-width: 140px;
    text-align: left;
    background: #f5f5f5;
}

@media (max-width: 600px) {

    .adms-student-portal .form-table th,
    .adms-student-portal .form-table td {
        display: block;
        width: 100%;
        padding: 8px 10px;
    }

    .adms-student-portal .form-table th {
        padding-top: 12px;
        border-bottom: none;
    }

    .adms-student-portal .form-table td {
        border-top: none;
    }

}


/* Status messages */

.adms-portal-error {
    color: #b32d2e;
}

.adms-portal-success {
    color: #2a7a2a;
}


/* Tables - scroll horizontally on narrow screens rather than
   squeezing columns unreadably small */

.adms-portal-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.adms-portal-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
}

.adms-portal-table-wrap th,
.adms-portal-table-wrap td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    text-align: left;
}

.adms-portal-table-wrap th {
    background: #f5f5f5;
}

.adms-portal-table-wrap tbody tr:nth-child(even) {
    background: #fafafa;
}


/* Account picker */

.adms-account-list {
    list-style: none;
    padding: 0;
}

.adms-account-list li {
    margin-bottom: 10px;
}


/* Waiver content */

.adms-waiver-content {
    border: 1px solid #ddd;
    padding: 20px;
    max-height: 400px;
    overflow: auto;
    margin-bottom: 20px;
    box-sizing: border-box;
}

@media (max-width: 600px) {

    .adms-waiver-content {
        padding: 12px;
        max-height: 300px;
    }

}


/* Waiver list table */

.adms-waiver-table th,
.adms-waiver-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.adms-waiver-table th {
    border-bottom: 1px solid #ddd;
}


/* Take Attendance - Save button, 2px larger than the default
   button font size */

.adms-save-attendance-btn {
    font-size: calc(1em + 2px);
}


/* Assignment detail - Request Reassignment button, 2px larger than
   the default button font size */

.adms-request-reassignment-btn {
    font-size: calc(1em + 2px);
}


/* Your Status table on the dashboard */

.adms-status-table {
    border-collapse: collapse;
}

.adms-status-table th,
.adms-status-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
}

.adms-status-table th {
    text-align: left;
}


/* Bordered table (e.g. My Tasks) */

.adms-bordered-table {
    border-collapse: collapse;
    width: 100%;
}

.adms-bordered-table th,
.adms-bordered-table td {
    border: 1px solid #ddd;
    padding: 8px 10px;
}

.adms-bordered-table th {
    background: #f5f5f5;
    text-align: left;
}