/* Site-wide login bar and modal.
   Loaded automatically by /JavaScript/siteAuth.js on every static page. */

.sa-bar {
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

.sa-bar button,
.sa-bar .sa-pill {
    appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    border-radius: 999px;
    padding: 5px 12px;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    line-height: 1.3;
}

.sa-bar button:hover,
.sa-bar .sa-pill:hover {
    background: #f3f4f6;
}

.sa-bar .sa-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.sa-bar .sa-pill .sa-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    flex: none;
}

.sa-menu {
    position: absolute;
    top: 36px;
    right: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    padding: 6px;
    display: none;
}

.sa-menu.open { display: block; }

.sa-menu .sa-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    color: #1f2937;
    font: inherit;
    cursor: pointer;
}
.sa-menu .sa-menu-item:hover { background: #f3f4f6; }
.sa-menu .sa-menu-section {
    padding: 10px 10px 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #9ca3af;
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
}
.sa-menu .sa-menu-section:first-of-type { border-top: none; margin-top: 0; }
.sa-menu .sa-menu-meta {
    padding: 6px 10px 8px;
    color: #6b7280;
    font-size: 12px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
}

/* Modal */
.sa-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sa-modal {
    background: #ffffff;
    color: #111827;
    width: 100%;
    max-width: 360px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: 22px 22px 18px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sa-modal h2 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
}
.sa-modal p.sa-sub {
    margin: 0 0 14px;
    color: #6b7280;
    font-size: 13px;
}
.sa-modal label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin: 10px 0 4px;
}
.sa-modal input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
}
.sa-modal input:focus { outline: 2px solid #3b82f6; outline-offset: 0; border-color: #3b82f6; }

/* Password show/hide wrapper */
.sa-pw-wrap {
    position: relative;
}
.sa-pw-wrap input {
    padding-right: 38px;
}
.sa-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
    color: #6b7280;
    border-radius: 4px;
}
.sa-modal .sa-error {
    margin-top: 10px;
    color: #b91c1c;
    font-size: 13px;
    min-height: 1em;
}
.sa-modal .sa-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}
.sa-modal .sa-actions button {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1f2937;
    border-radius: 6px;
    padding: 8px 14px;
    font: inherit;
    cursor: pointer;
    font-weight: 600;
}
.sa-modal .sa-actions button.sa-primary {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}
.sa-modal .sa-actions button.sa-primary:hover { background: #1e40af; }
.sa-modal .sa-actions button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Dark mode (matches the .dark theme used by the rest of the site) */
html.dark .sa-bar button,
html.dark .sa-bar .sa-pill {
    background: #1f2937;
    color: #f3f4f6;
    border-color: rgba(255, 255, 255, 0.18);
}
html.dark .sa-bar button:hover,
html.dark .sa-bar .sa-pill:hover { background: #374151; }

/* Login button and signed-in pill are always white regardless of colour scheme */
#saLoginBtn,
#saUserBtn,
html.dark #saLoginBtn,
html.dark #saUserBtn {
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    border-color: rgba(0, 0, 0, 0.15);
}
#saLoginBtn:hover,
#saUserBtn:hover,
html.dark #saLoginBtn:hover,
html.dark #saUserBtn:hover {
    background: #f3f4f6;
}
html.dark .sa-menu {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.18);
}
html.dark .sa-menu .sa-menu-section {
    color: #6b7280;
    border-top-color: #374151;
}
html.dark .sa-menu .sa-menu-item { color: #f3f4f6; }
html.dark .sa-menu .sa-menu-item:hover { background: #1f2937; }
html.dark .sa-menu .sa-menu-meta { color: #9ca3af; border-color: #374151; }
html.dark .sa-modal { background: #111827; color: #f3f4f6; }
html.dark .sa-modal p.sa-sub { color: #9ca3af; }
html.dark .sa-modal label { color: #d1d5db; }
html.dark .sa-modal input {
    background: #1f2937;
    color: #f3f4f6;
    border-color: #374151;
}
html.dark .sa-modal .sa-actions button {
    background: #1f2937;
    color: #f3f4f6;
    border-color: #374151;
}
html.dark .sa-modal .sa-actions button.sa-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* Hide on print */
@media print {
    .sa-bar, .sa-menu, .sa-overlay { display: none !important; }
}

/* Mobile: hide quick-link pills (still reachable from the dropdown),
   compact the bar, and stop long usernames from spilling off the screen.
   The sidebar hamburger sits on the left on mobile, so the user bar can
   stay anchored top-right without clashing with it. */
@media (max-width: 768px) {
    .sa-bar {
        top: 6px;
        right: 8px;
        gap: 6px;
        max-width: calc(100vw - 70px); /* leave room for the left hamburger */
    }

    .sa-bar .sa-classwork-link,
    .sa-bar #saPlannerBtn {
        display: none !important;
    }

    .sa-bar .sa-pill,
    .sa-bar button {
        padding: 5px 10px;
        font-size: 12px;
        max-width: 100%;
    }

    /* Truncate long usernames on the user pill */
    .sa-bar #saUserBtn {
        max-width: 180px;
        overflow: hidden;
    }
    .sa-bar #saUserBtn > span:last-child {
        display: inline-block;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .sa-menu {
        right: 0;
        min-width: 200px;
        max-width: calc(100vw - 24px);
    }
}