/* Google Drive code removed - 2026-06-25 */
/* 211SD Brand Identity & Dashboard Premium Stylesheet */

/* --- CSS Variables & Design Tokens --- */
:root {
    --primary: #326786;
    --primary-hover: #264e66;
    --primary-dark: #1b384a;
    --primary-light: #eef4f7;
    --accent: #fcc028;
    --accent-light: #fff8e5;
    --bg-body: #f4f7f9;
    --bg-card: #ffffff;
    --text-main: #2d3748;
    --text-muted: #5a6a85;
    --text-light: #64748b;
    --border-color: #e2e8f0;
    
    --success: #2e7d32;
    --success-light: #e8f5e9;
    --warning: #f57c00;
    --warning-light: #fff3e0;
    --danger: #d32f2f;
    --danger-light: #ffebee;
    
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 16px rgba(50, 103, 134, 0.06);
    --shadow-lg: 0 16px 32px rgba(50, 103, 134, 0.12);
    
    --radius-sm: 6px;
    --radius-md: 12px;
    
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Global Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* --- App Header & Navigation --- */
.app-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

/* 2026-07-29: the 1400px cap was centring the header and leaving dead space at
   both edges on a wide monitor, which pushed the wordmark toward the middle of
   the screen. Removed so the brand sits near the left edge where it belongs.
   The 76px height is unchanged and must stay unchanged — several panels are
   laid out with calc(100vh - 76px). */
.header-container {
    max-width: none;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 76px;
    gap: 24px;
}

/* 2026-07-29 (rev 2): the portal tabs now sit at the TRUE centre of the
   header, not wherever space-between happened to leave them.
   The trick is `flex: 1 1 0` on both outer blocks: equal basis, equal growth,
   so the two side columns are always the same width whatever they contain,
   which puts .app-nav dead centre. The 24px gap on .header-container is the
   floor — it guarantees the wordmark and the Library Portal tab can never
   touch, even when the window is narrow enough that the side columns are
   squeezed.

   `min-width: max-content` is the safety catch. The wordmark is nowrap, so
   without it a narrow window would shrink the left column below the width of
   the text and the tabs would ride over the top of "Document Hub". With it,
   the column never goes under its own content: on a wide screen the tabs are
   exactly centred, and on a narrow one they drift slightly right instead of
   colliding. Tested at 1680 / 1440 / 1280 / 1100. */
.brand-identity {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1 1 0;
    min-width: max-content;
}

/* --- Brand lockup: "The [211 logo] Hub" (2026-07-26) --------------------
   Replaces the old .logo-wrapper / .brand-logo / .brand-text h1 + p. The app
   is "The 211 San Diego Hub"; the logo IS the middle word, so the org name is
   never printed twice.

   The logo has to sit on the same baseline as the type. In 211-Logo.png
   (1024x536) the "2-1-1" digits run from y=123 to y=385, so the digit
   baseline is at 71.8% of the image height and the gold "SAN DIEGO" fills the
   rest. Pushing the image down by 28.2% of its own height puts the digit
   baseline exactly on the text baseline; "SAN DIEGO" then hangs below the
   line on purpose. --logoH is ~1.6x the font-size so the digits match the cap
   height of "The" and "Hub". The negative right margin compensates for the
   extra transparent padding baked into the right edge of the PNG.

   Sized to fit the 76px .header-container -- do not enlarge without checking:
   several panels are laid out with calc(100vh - 76px). */
.brand-lockup {
    --logoH: 44px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--primary);
    white-space: nowrap;
    padding-bottom: calc(var(--logoH) * 0.28);
}

.brand-lockup-logo {
    height: var(--logoH);
    width: auto;
    vertical-align: baseline;
    position: relative;
    top: calc(var(--logoH) * 0.282);
    margin: 0 -0.07em 0 0.07em;
}

.app-nav {
    display: flex;
    gap: 8px;
    height: 100%;
    align-items: center;
    flex: 0 0 auto;   /* never grows or shrinks — it is the fixed centre block */
}

/* --- Portal tabs (2026-07-26) -------------------------------------------
   All four tabs now share one rule. Previously .nav-tab-library carried a pile
   of !important overrides (height 52px, padding 8px 18px, left-aligned, its own
   border-radius) purely to fit a two-line title + subtitle. The subtitle is
   gone, so those overrides went with it and the four tabs are finally the same
   size. The tab icons were removed too -- with four tabs and plain-language
   labels an icon just repeats the word.

   Unselected = transparent (reads as white against the header). Selected =
   solid var(--primary) with white text. That behaviour is unchanged; the
   active box-shadow that used to be Library-only now applies to all four so
   they stay consistent. The red count badges on Director/Operations are
   untouched -- app.js writes live numbers into them. */
.nav-tab {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    transition: var(--transition);
    position: relative;
}

.nav-tab:hover {
    background-color: var(--primary-light);
    color: var(--primary);
}

.nav-tab.active {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(50, 103, 134, 0.15);
}

/* --- Header hover card (2026-07-26) --------------------------------------
   Explains what each portal is, and who it's for, on hover or keyboard focus.
   One shared #hub-hint element is moved under whichever target is active; the
   positioning and the 350ms delay live in the small script at the bottom of
   index.html.

   Copy is deliberately ~85 characters per tab so every card renders as the
   same two-line shape; the Hub card on the logo is longer on purpose, because
   hovering a logo is a deliberate "what is this?" question rather than a
   glance taken mid-navigation. If you edit the text, re-check that the four
   tab cards still match in height.

   z-index 900: above the sticky header (100), below the modals (2500). */
#hub-hint {
    position: fixed;
    z-index: 900;
    top: 0;
    left: 0;
    max-width: 320px;
    background: var(--primary-dark);
    color: #ffffff;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 0.8125rem;
    line-height: 1.5;
    font-weight: 600;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

#hub-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Little arrow. Its horizontal position is set by the script via --hint-arrow
   so the point always lands under the middle of whatever you're hovering. */
#hub-hint::before {
    content: "";
    position: absolute;
    top: -5px;
    left: var(--hint-arrow, 20px);
    width: 10px;
    height: 10px;
    background: var(--primary-dark);
    transform: rotate(45deg);
    border-radius: 2px;
}

#hub-hint .hub-hint-title {
    display: block;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ec6dd;
    margin-bottom: 4px;
}

/* The logo is focusable so keyboard users get the Hub description too; it is
   not a control, so it should not show a permanent outline on mouse click. */
.brand-lockup:focus { outline: none; }
.brand-lockup:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: 4px;
}

/* No pointer, no hover: don't reserve or animate anything on touch devices. */
@media (hover: none) {
    #hub-hint { display: none; }
}

.badge {
    background: var(--danger);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 99px;
    min-width: 18px;
    text-align: center;
}

.badge-accent {
    background: var(--accent);
    color: var(--primary-dark);
}

.cloud-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 1.8s infinite;
}

/* --- Layout Grid Systems --- */
.app-main-content {
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 76px);
}

#inform-portal,
#director-portal,
#admin-console {
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 20px;
}

.tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-panel.active {
    display: block;
}

/* --- Common UI Cards --- */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* --- TAB 1: EMPLOYEE HUB LAYOUT --- */
/* ===== Library Portal welcome banner (2026-07-30, Robert) =====
   #employee-hub is a full-height flex layout - both columns are calc(100vh - 76px)
   and scroll internally, unlike the other portals. The welcome banner is fitted INTO
   that viewport budget: --lib-banner-h is its total vertical footprint (100px card +
   20px top + 8px bottom margins), and the two columns below each SUBTRACT it, so the
   page itself never scrolls and the banner stays fixed at the top like the other
   portals. Side margins (20px) match the content width - "same length across"; the
   20px top sets the gap under the sticky 76px header. */
#employee-hub { --lib-banner-h: 120px; }
#library-welcome-banner { margin: 20px 20px 0 20px; }

.hub-container {
    display: flex;
    min-height: calc(100vh - 76px - var(--lib-banner-h, 0px));
    width: 100%;
    align-items: stretch;
    background: #f3f4f6; /* page background */
}

/* 2026-07-27: the outer slate box that used to wrap both panel cards is gone
   (no background, no border, no padding) -- the two white cards now float
   directly on the page background. Top margin is 60px (was an effective 40px:
   20px margin + 20px padding) to drop both columns a little further below the
   header; .document-explorer's padding-top is the matching value on the right
   and the two MUST move together or the search row and the first card stop
   lining up. */
.sidebar-filters {
    width: 32%;
    min-width: 350px;
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 20px 0 20px 20px;
    padding: 0;
    gap: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 96px; /* moot once the layout fits the viewport; keeps sidebar under header if it ever scrolls */ /* 76px header + 60px margin + welcome banner */
    /* 160px, not 156: 76 header + 60 top margin + 24 to land the sidebar's bottom
       edge exactly on the results panel's card bottom (.document-explorer has 24px
       of bottom padding). That alignment is what the "Report Incorrect Information"
       card at the bottom of this column is lining up with (2026-07-27). */
    height: calc(100vh - 116px - var(--lib-banner-h, 0px));
    overflow-y: visible;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-icon-left {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    fill: #9ca3af;
    pointer-events: none;
}

.search-input-wrapper input {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px 12px 38px;
    color: #1f2937;
    font-family: inherit;
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: var(--transition);
    outline: none;
}

.search-input-wrapper input::placeholder {
    color: #6b7280;
}

.search-input-wrapper input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.sidebar-filters .select-wrapper {
    position: relative;
    width: 100%;
}

.sidebar-filters .department-select {
    width: 100%;
    background: #ffffff;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 30px 12px 14px;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23326786\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: var(--transition);
}

.sidebar-filters .department-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(50, 103, 134, 0.15);
}

.category-buttons-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.category-buttons-stack .filter-btn {
    width: 100%;
    height: 32px;
    border-radius: 8px;
    border: none;
    text-align: left;
    padding: 0 16px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.category-buttons-stack .filter-btn.active {
    background: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(50, 103, 134, 0.15) !important;
}

.category-buttons-stack .filter-btn:not(.active) {
    background: transparent !important;
    color: var(--text-main) !important;
}

.category-buttons-stack .filter-btn:not(.active):hover {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
}

/* ==================== INFORM USA TOOLS & CERTIFICATION GROUP ====================
   Second sidebar group beneath "Browse by Type". Its header reuses
   .sidebar-section-header so it reads as an equal-rank sibling. The only
   separation from the group above is the extra top margin below — whitespace,
   no divider. The tool links are plain navy text (not pills) matching the
   mockup, aligned with the filter-button text above. */
.informusa-tools-section {
    margin-top: 8px; /* group break, tightened 2026-07-30 */
}

/* 2026-07-27: gap raised 2px -> 4px to match .category-buttons-stack in the
   panel above. Both sidebar panels hold five items, so the two panels only come
   out the same height if the row height AND the row gap match. Change one, change
   the other. */
.informusa-tools-stack,
.notice-tools-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* 2026-07-27: min-height 42px + flex centring instead of 10px vertical padding,
   so these rows are exactly as tall as the .filter-btn rows in the panel above
   (which are a fixed 42px). min-height rather than height on purpose -- "Am I
   eligible for certification or recertification?" wraps to two lines on a narrow
   window and a fixed height would clip it. */
.informusa-tool-link,
.notice-tool-link {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 32px;
    text-align: left;
    padding: 0 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.informusa-tool-link:hover,
.notice-tool-link:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.informusa-tool-link:focus-visible,
.notice-tool-link:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* Selected state for the "Training Manuals and Study Material" content filter —
   same navy pill treatment as the active Browse by Type filter so the two
   sidebar groups read consistently. */
.informusa-tool-link.active {
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(50, 103, 134, 0.15);
}

.informusa-tool-link.active:hover {
    color: #ffffff;
    background: var(--primary);
}

/* ==================== "AM I ABLE TO TEST" ELIGIBILITY CHECKER ====================
   Scoped to #eligibility-modal. Layout ported from the standalone checker tool;
   palette mapped to hub variables (primary navy/teal, hub borders and text).
   Result state colors (green/red/amber) stay semantic. */
#eligibility-modal .elig-card,
#exam-signup-modal .elig-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(20, 40, 70, 0.04);
}

#eligibility-modal .hidden { display: none !important; }

#eligibility-modal .elig-step-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
}

#eligibility-modal .elig-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    #eligibility-modal .elig-mode-grid { grid-template-columns: 1fr; }
}

#eligibility-modal .elig-mode-option {
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    background: var(--bg-body);
    transition: border-color 0.15s, background 0.15s;
}

#eligibility-modal .elig-mode-option:hover { border-color: #b9c3d0; }

#eligibility-modal .elig-mode-option.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

#eligibility-modal .elig-mode-option input { display: none; }

#eligibility-modal .elig-mode-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 4px;
}

#eligibility-modal .elig-mode-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.35;
}

#eligibility-modal .elig-label,
#exam-signup-modal .elig-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 16px 0 6px;
}

#eligibility-modal .elig-input,
#exam-signup-modal .elig-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    background: #ffffff;
    color: var(--text-dark);
    font-family: inherit;
    box-sizing: border-box;
}

#eligibility-modal .elig-input:focus,
#exam-signup-modal .elig-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Short fixed-width numeric fields (plain text inputs — no spinner arrows).
   Sized to their digit limits: 2 digits for years, 4 digits for hours. */
#eligibility-modal .elig-input-2digit {
    width: 72px;
    text-align: center;
    letter-spacing: 1px;
}

#eligibility-modal .elig-input-4digit {
    width: 104px;
    text-align: center;
    letter-spacing: 1px;
}

#eligibility-modal .elig-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

#eligibility-modal .elig-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

#eligibility-modal .elig-toggle-row input { margin-top: 3px; }

#eligibility-modal .elig-toggle-text {
    font-size: 0.85rem;
    color: var(--text-dark);
}

#eligibility-modal .elig-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #8a6100;
    background: #fff6e0;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: 1px;
}

#eligibility-modal .elig-submit,
#exam-signup-modal .elig-submit {
    margin-top: 22px;
    width: 100%;
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 13px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

#eligibility-modal .elig-submit:hover,
#exam-signup-modal .elig-submit:hover { background: var(--primary-dark, #27536c); }

#eligibility-modal .elig-result {
    border-radius: 10px;
    padding: 22px;
    margin: 4px 0 16px;
    border: 1.5px solid;
}

#eligibility-modal .elig-result.eligible { background: #e9f6ee; border-color: #2e7d4f; }
#eligibility-modal .elig-result.not-eligible { background: #fdeceb; border-color: #b3261e; }

#eligibility-modal .elig-result-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

#eligibility-modal .elig-result-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #ffffff;
    font-size: 0.9rem;
    flex: none;
}

#eligibility-modal .eligible .elig-result-badge { background: #2e7d4f; }
#eligibility-modal .not-eligible .elig-result-badge { background: #b3261e; }

#eligibility-modal .elig-result-title { font-weight: 700; font-size: 1.05rem; }
#eligibility-modal .eligible .elig-result-title { color: #2e7d4f; }
#eligibility-modal .not-eligible .elig-result-title { color: #b3261e; }

#eligibility-modal .elig-criteria-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#eligibility-modal .elig-criteria-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.87rem;
    padding: 7px 0;
    border-bottom: 1px solid rgba(20, 40, 70, 0.07);
}

#eligibility-modal .elig-criteria-list li:last-child { border-bottom: none; }

#eligibility-modal .elig-mark {
    flex: none;
    font-weight: 800;
    width: 16px;
    text-align: center;
}

#eligibility-modal .elig-mark.pass { color: #2e7d4f; }
#eligibility-modal .elig-mark.fail { color: #b3261e; }

#eligibility-modal .elig-why-box {
    margin-top: 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    padding: 10px 12px;
}

/* ---- Recertification Step 2 (training checklist pulldown) + Step 4 (doc gen).
   Added 2026-07-14. Ported from the standalone recertification tool; palette
   mapped to hub variables so it matches the rest of the checker. ---- */
#eligibility-modal .elig-substep-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    /* Back to a normal margin: this line now sits INSIDE .elig-pulldown-sticky
       with the button, so it needs its own gap above the pulldown again. */
    margin-bottom: 12px;
}

#eligibility-modal .elig-chev {
    color: var(--text-muted);
    transition: transform 0.15s;
}

#eligibility-modal .elig-chev.open { transform: rotate(180deg); }

#eligibility-modal .elig-pulldown-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

/* "Select completed training" sticks to the top of the modal's scroll area
   (2026-07-26). Staff were scrolling down the five training categories and then
   struggling to get back up to the control; now it never leaves the screen.
   The scroll container is the modal body - the inline
   <div style="overflow-y: auto; padding: 26px 30px"> inside #eligibility-modal.
   The white background is what stops the list showing through once it pins. */
#eligibility-modal .elig-pulldown-sticky {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #ffffff;
    /* The WHOLE header block pins, not just the pulldown: "Step 2 - Training
       completed", "Select all training you completed this cycle" and the
       "Select completed training" control all live inside this wrapper, so the
       three lines that tell you what to do never scroll away. Only the training
       list below moves.

       padding-top gives the pinned block an opaque white band so category rows
       disappear cleanly underneath it; the matching negative margin cancels that
       padding in the resting layout. The negative margin IS safe here, unlike an
       earlier attempt: this wrapper is now the FIRST child of .elig-card, so it
       eats the card's own top padding instead of overlapping any text. */
    padding-top: 20px;
    margin-top: -20px;
    padding-bottom: 10px;
}

/* REMOVED 2026-07-27. This used to be a 40px white rectangle painted above the
   pinned header (absolutely positioned, left:0/right:0 of the sticky wrapper)
   to hide training rows scrolling through the modal body's 26px top padding.

   Two problems: (1) it painted ALL the time, not only while pinned, so it sat
   on top of the step progress bar and covered everything except the two end
   caps -- which is exactly the stray "dashes on either side" Robert flagged;
   (2) because it was inset by the card's 28px side padding and had no radius,
   what showed was a hard-edged white band narrower than the card.

   It is also dead weight: the training list now scrolls inside its own capped
   360px box (.elig-pulldown-panel.open), so #elig-modal-body does not scroll
   and this wrapper never actually pins. Verified in Chromium with the list open
   at window heights 1080, 900, 800, 700 and 620px -- scrollHeight === clientHeight
   at every one. If a future change ever lets the modal body scroll again, mask
   that strip with something that spans the CARD's full width and matches its
   10px top radius; do not bring this pseudo-element back as it was. */

#eligibility-modal .elig-pulldown-panel.open {
    /* The list scrolls INSIDE its own box (2026-07-26, final).
       History, so nobody re-litigates this: it was 460px+auto, then briefly
       un-capped at 4000px so the modal body was the only scrollbar. Robert
       rejected that on sight - letting the list flow meant category rows slid
       up BEHIND the pinned "Step 2" header and were visible above it, which
       looked broken. Bounding the list again is what keeps every row strictly
       below "Select completed training": the box scrolls, the card does not
       grow, and the header never moves.
       Keep BOTH the max-height and overflow-y if you touch this. */
    max-height: 360px;
    overflow-y: auto;
    /* 12px here + the 10px on the sticky wrapper above = a 22px gap between the
       control and the first category. It was 10px, which put the button's
       bottom edge and the first row's top edge close enough to mis-tap. */
    margin-top: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-body);
}

#eligibility-modal .elig-cat-block { border-bottom: 1px solid var(--border-color); }
#eligibility-modal .elig-cat-block:last-child { border-bottom: none; }

/* STICKY CATEGORY HEADER (2026-07-27, Robert's request).
   When a category is expanded and the staff member scrolls its course list, the
   category name ("Self-Paced Online Courses & Learning Portals", etc.) pins to
   the top of the scrolling box so they can always see which category they are
   picking from. It sticks to #recert-pulldown-panel -- that box is the scroller
   (.elig-pulldown-panel.open sets max-height + overflow-y:auto) -- and it
   releases when its own .elig-cat-block scrolls past, so the next category's
   header takes over. Standard grouped-list behaviour.

   TWO THINGS THIS RULE DEPENDS ON:
     - an explicit opaque `background` (it was inheriting the panel's before;
       a transparent sticky header lets course rows show through it), and
     - `overflow-y: auto` staying on .elig-pulldown-panel.open. If that box ever
       goes back to growing instead of scrolling, sticky has no scroller to pin
       against and this silently stops working. */
#eligibility-modal .elig-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-body);
}

#eligibility-modal .elig-cat-header:hover { background: var(--primary-light); }

/* Hairline under the pinned header, but only while that category is open --
   a collapsed row already has .elig-cat-block's own divider under it and two
   lines together read as a double rule. */
#eligibility-modal .elig-cat-block:has(.elig-cat-body.open) .elig-cat-header {
    box-shadow: 0 1px 0 var(--border-color);
}

#eligibility-modal .elig-cat-header-inner {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
}

#eligibility-modal .elig-cat-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

#eligibility-modal .elig-cat-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--border-color);
    color: var(--text-dark);
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#eligibility-modal .elig-cat-badge.has-selection {
    background: var(--primary);
    color: #ffffff;
}

#eligibility-modal .elig-cat-body {
    display: none;
    padding: 4px 14px 12px;
    background: #ffffff;
}

#eligibility-modal .elig-cat-body.open { display: block; }

#eligibility-modal .elig-sub-block { margin-top: 10px; }

#eligibility-modal .elig-sub-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

#eligibility-modal .elig-select-all {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--primary);
    cursor: pointer;
    flex: none;
}

#eligibility-modal .elig-select-all:hover { text-decoration: underline; }

#eligibility-modal .elig-item-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
}

#eligibility-modal .elig-item-row input { margin-top: 3px; flex: none; }

#eligibility-modal .elig-item-row label {
    font-size: 0.84rem;
    color: var(--text-dark);
    line-height: 1.35;
    cursor: pointer;
}

#eligibility-modal .elig-doc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

@media (max-width: 520px) {
    #eligibility-modal .elig-doc-fields { grid-template-columns: 1fr; }
}

#eligibility-modal .elig-doc-field .elig-label { margin-top: 12px; }

#eligibility-modal .elig-gen-status {
    display: none;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.83rem;
    line-height: 1.4;
    border: 1px solid;
}

#eligibility-modal .elig-gen-status.show { display: block; }
#eligibility-modal .elig-gen-status.ok { background: #e9f6ee; border-color: #bfe3d0; color: #1a6b53; }
#eligibility-modal .elig-gen-status.no { background: #fdeceb; border-color: #f0c9c5; color: #9c3c34; }

/* Inform test-date inline-calendar CSS removed 2026-07-22 (dead code — see app.js). */

.filter-btn {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn:hover {
    background-color: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.filter-btn.active {
    background-color: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: inset 3px 0 0 var(--primary);
}

.inline-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --- Document Grid Explorer --- */
/* padding-top is 60px, not 24px (2026-07-27): it matches .sidebar-filters'
   60px top margin, so the search row and the first sidebar card share one grid
   line now that both column headings above them are gone. Change the two
   together or the flush alignment drifts. */
.document-explorer {
    flex-grow: 1;
    background: #f3f4f6;
    padding: 20px 24px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100vh - 76px - var(--lib-banner-h, 0px));
    overflow: hidden;
}

.explorer-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    gap: 20px;
}

.explorer-header-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

/* DEAD as of 2026-07-27: the "SEARCH THE LIBRARY" heading was removed. Rule
   kept in case a heading returns to this slot; no markup uses it today. */
.explorer-header-left h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Search + department filter on one row (2026-07-27). The search box flexes,
   the dropdown is fixed width on the right. */
.explorer-search-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 740px;
}

.explorer-header-left .search-input-wrapper {
    max-width: 480px;
    width: 100%;
    flex: 1 1 auto;
}

.explorer-dept-wrapper {
    position: relative;
    flex: 0 0 220px;
    width: 220px;
}

/* Matches the search input's height and border treatment, and carries the same
   teal chevron the sidebar version used (that rule was scoped to
   .sidebar-filters, so it no longer applies here). */
.explorer-dept-wrapper .department-select {
    width: 100%;
    height: 45px;
    background-color: #ffffff;
    color: var(--text-main);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 34px 0 14px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23326786\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: var(--transition);
}

.explorer-dept-wrapper .department-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(50, 103, 134, 0.15);
}

@media (max-width: 900px) {
    .explorer-search-row {
        flex-direction: column;
        align-items: stretch;
    }
    .explorer-dept-wrapper {
        flex: 1 1 auto;
        width: 100%;
    }
}

.explorer-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#informusa-header-logo, #two11-header-logo, #legal-header-logo, #qa-header-logo {
    max-height: 48px;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

@media (max-width: 768px) {
    .explorer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .explorer-header-right {
        width: 100%;
        justify-content: flex-start;
    }
}

.cards-grid {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

/* Custom premium scrollbar for cards grid */
.cards-grid::-webkit-scrollbar {
    width: 8px;
}

.cards-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 99px;
}

.cards-grid::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 99px;
    transition: var(--transition);
}

.cards-grid::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* --- Document Cards ---
   2026-07-30 (Robert): the Library Portal's old bespoke row -- coloured
   file-type tile, left accent bar, .row-title / .row-action -- was replaced by
   the card shared with the Director and Operations portals (see
   ".pending-item-card" / ".doc-card-*" below). Those ~130 lines of rules had no
   markup left to style and were deleted with it. The only survivor is the
   "Matched in Body" tag, which the Library still shows when your search matched
   the body text rather than the title; it lives in the card's right-hand slot
   now, so it is scoped to that instead of to the retired .doc-card. */
.doc-card-right .tag-pill-match {
    font-size: 0.65rem;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid rgba(50, 103, 134, 0.15);
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 99px;
    display: inline-block;
    white-space: nowrap;
}

.tag-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #e0f7f7;
    color: #0e7490;
    border: 1px solid rgba(14, 116, 144, 0.15);
    display: inline-block;
}

.status-pill {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.status-pill.status-active {
    background-color: var(--success-light);
    color: var(--success);
}
.status-pill.status-active::before { background-color: var(--success); }

/* --- Common Button Styles --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}
.btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(50, 103, 134, 0.2);
}

.btn-success {
    background-color: var(--success);
    color: white;
}
.btn-success:hover {
    background-color: #246227;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2);
}

.btn-danger {
    background-color: var(--danger);
    color: white;
}
.btn-danger:hover {
    background-color: #b71c1c;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2);
}

.btn-secondary {
    background-color: var(--border-color);
    color: var(--text-main);
}
.btn-secondary:hover {
    background-color: var(--text-light);
    color: white;
}

.btn-outline {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
}
.btn-outline:hover {
    background-color: var(--bg-body);
    color: var(--primary);
    border-color: var(--primary);
}

.btn-block {
    width: 100%;
}

/* --- Empty States --- */
.empty-state {
    text-align: center;
    padding: 60px 40px;
    background: white;
    border-radius: var(--radius-md);
    border: 1px dashed var(--text-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-dark);
}

.empty-state p {
    color: var(--text-muted);
    max-width: 420px;
    margin-bottom: 10px;
}

/* ==================== TAB 2: DIRECTOR PORTAL ==================== */

/* The shared portal sign-in card (.portal-signin-*) was removed 2026-07-31
   along with the three retired PIN lock screens it styled. */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-group label {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group select, .form-group input, .form-group textarea {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    outline: none;
    transition: var(--transition);
    width: 100%;
}

.form-group select:focus, .form-group input:focus, .form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(50, 103, 134, 0.15);
}

.form-row {
    display: flex;
    gap: 15px;
}

.flex-1 {
    flex: 1;
}

.error-message {
    background-color: var(--danger-light);
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    border: 1px solid rgba(211, 47, 47, 0.15);
}

/* --- Director Logged In Panel --- */
.director-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
}

.director-welcome {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Admin area switcher (2026-07-30): sits at the right of the director header bar,
   which is already display:flex / justify-content:space-between. Shown only to the
   Policy & Procedure Manager / ops_admin via renderDirectorAreaSwitcher(). */
.director-area-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}
.director-area-switcher label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
.director-area-switcher select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: #ffffff;
    color: var(--primary-dark, #1a2f5a);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.avatar {
    width: 52px;
    height: 52px;
    background-color: var(--accent);
    color: var(--primary-dark);
    font-weight: 900;
    font-size: 1.3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
}

.director-welcome h2 {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
}

.role-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.15);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

.director-panels-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 30px;
    align-items: start;
}
/* Overview list opens documents in the shared library viewer, so it runs full-width. */
.director-panels-layout.single-col {
    grid-template-columns: 1fr;
}

.pending-queue-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.pending-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 4px;
}

.pending-item-card {
    background-color: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px;
    cursor: pointer;
    transition: var(--transition);
}

.pending-item-card:hover {
    border-color: var(--primary);
    background-color: white;
}

/* ===== THE SHARED DOCUMENT CARD (2026-07-30, Robert) =====
   The Library, Director and Operations portals render one identical card:
   document title on the left, open-arrow on the right, nothing else. The
   markup comes from docCardInnerHtml() in app.js; the look lives here. So
   there is one definition of this card between the three lists, and the old
   per-portal decoration -- the "P&P Policy" type line, the CS/BIS/EC
   department code and the Library's coloured file-type tile -- is gone. */
.pending-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.doc-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

.doc-card-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right-hand slot: the arrow, plus anything a portal needs beside it --
   Operations' Hidden / Deleted / Missing file pills, the Library's
   "Matched in Body" tag. Empty in the Director Portal. */
.doc-card-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
}

.pending-item-card:hover .doc-card-right {
    color: var(--primary);
}

.doc-card-right .row-arrow-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

/* The Library grid used to hold flush divider rows; it holds the same spaced
   cards as the other two portals now, so it needs the .pending-list spacing. */
#document-grid {
    gap: 10px;
    padding: 12px;
}

.pending-item-card.active {
    background-color: var(--primary-light);
    border-color: var(--primary);
    box-shadow: inset 4px 0 0 var(--primary);
}

.pending-item-card h4 {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
}


.review-pane-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 40px;
    text-align: center;
}

.massive-icon {
    width: 64px;
    height: 64px;
    fill: var(--text-light);
    margin-bottom: 16px;
}

.review-pane-empty h3 {
    font-size: 1.15rem;
    color: var(--primary-dark);
    font-weight: 800;
    margin-bottom: 6px;
}

.review-pane-empty p {
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 320px;
}

.review-doc-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.review-doc-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-top: 6px;
    line-height: 1.25;
}

.review-metadata {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 6px;
    display: flex;
    gap: 8px;
}

.review-doc-body {
    max-height: 650px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    background-color: var(--bg-body);
    border-radius: var(--radius-sm);
    padding: 20px;
    font-size: 0.92rem;
    color: var(--text-main);
    margin-bottom: 15px;
}

.review-doc-body h3 {
    font-size: 1.05rem;
    margin-top: 18px;
    margin-bottom: 8px;
    color: var(--primary);
}

.review-doc-body p {
    margin-bottom: 14px;
}

.review-doc-body ul {
    margin-left: 20px;
    margin-bottom: 14px;
}

/* --- Digital Signature Submission Panel --- */
.signature-submission-box {
    border-top: 2px solid var(--border-color);
    padding-top: 24px;
}

.signature-submission-box h3 {
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 8px;
}

.signature-submission-box p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* --- Signature Stamps Preview --- */
.signature-preview-area {
    display: flex;
    align-items: center;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 20px;
    min-height: 96px;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.sig-seal {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.sig-seal svg {
    width: 100%;
    height: 100%;
}

.sig-written {
    font-family: "Great Vibes", cursive;
    font-size: 2.2rem;
    color: var(--primary-dark);
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    transform: rotate(-3deg);
    padding-left: 10px;
}

/* The signature typography selector was removed — "Elegant Script" (Great Vibes)
   is the only style the app can produce, so .font-cursive is the only class kept.
   (Audit 2026-07-26: .font-formal/-modern/-calligraphy/-pinyon/-artistic/
   -handwritten were unreachable and their Google Fonts request was dropped.) */
.font-cursive { font-family: "Great Vibes", cursive; font-size: 2.4rem; }

/* ==================== TAB 3: ADMIN OPERATIONS ==================== */

/* Admin action button grid */
.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.btn-outline-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.2s ease;
    background-color: white;
    color: #4a5568;
    border: 1.5px solid #4a5568;
    width: 100%;
    flex-shrink: 0;
    padding: 0 4px;
}

.btn-outline-admin:hover {
    background-color: #f7fafc;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline-admin svg.inline-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    margin-right: 4px;
    flex-shrink: 0;
}

#status-report-sync-time {
    font-size: 0.7rem;
    color: var(--success);
    font-weight: 800;
    display: block;
    margin-top: 4px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.card-header h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-dark);
}

.helper-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.activation-queue-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 280px;
    overflow-y: auto;
}

.activation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.activation-details h4 {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
}

.activation-meta {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--success);
    margin-top: 4px;
    display: flex;
    gap: 8px;
}

/* --- Audit Log Feed --- */
.audit-log-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 4px;
}

.audit-item {
    font-size: 0.8rem;
    padding: 8px 12px;
    background-color: var(--bg-body);
    border-radius: 4px;
    border-left: 3px solid var(--text-light);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.audit-item.audit-success { border-left-color: var(--success); }
.audit-item.audit-warning { border-left-color: var(--warning); }
.audit-item.audit-info { border-left-color: var(--primary); }

.audit-msg {
    font-weight: 700;
    color: var(--text-main);
}

.audit-timestamp {
    font-size: 0.7rem;
    color: var(--text-light);
    white-space: nowrap;
    margin-left: 10px;
    font-weight: 800;
}

/* ==================== DETAIL OVERLAY DRAWER ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(27, 56, 74, 0.55);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
}

.modal-overlay.active {
    display: flex;
}

/* --- Shared modal card (used by the sync-details and doc-state modals) --- */
.pin-modal-card {
    background: var(--bg-card);
    width: 90%;
    max-width: 420px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    animation: zoomIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.drawer-modal {
    width: 92%;
    max-width: 1200px;
    height: 90vh;
    background: white;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: zoomIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.drawer-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10005;
}

.drawer-close-btn:hover {
    background-color: var(--danger-light);
    color: var(--danger);
    border-color: var(--danger);
}

.drawer-close-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.drawer-header {
    padding: 30px 40px 20px 40px;
    border-bottom: 1px solid var(--border-color);
}

.drawer-title-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.drawer-header h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.25;
}

.drawer-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 10px;
}

.drawer-body {
    padding: 30px 40px 160px 40px;
    overflow-y: auto;
    flex-grow: 1;
    position: relative;
}

.modal-summary-box {
    background-color: var(--primary-light);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 24px;
    font-size: 0.9rem;
    color: var(--text-main);
    border: 1px solid rgba(50, 103, 134, 0.1);
}

.modal-summary-box strong {
    color: var(--primary-dark);
    display: block;
    margin-bottom: 4px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-document-body {
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.7;
    margin-bottom: 30px;
}

.modal-document-body h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    margin-top: 24px;
    margin-bottom: 8px;
}

.modal-document-body p {
    margin-bottom: 16px;
}

.modal-document-body ul {
    margin-left: 24px;
    margin-bottom: 16px;
}

.modal-document-body li {
    margin-bottom: 6px;
}

/* --- Document Detail Approved Stamp --- */
.modal-signatures-box {
    position: absolute;
    bottom: 24px;
    left: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.modal-seals-grid {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}

.seal-card {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 6px 18px;
    background-color: #FFF8E5; /* gold cream background */
    border: 1px solid #E2D5BE; /* solid single-pixel tan border */
    border-radius: 4px;
    width: fit-content;
    box-sizing: border-box;
}

.seal-icon-wrapper {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.seal-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.seal-details {
    display: flex;
    align-items: center;
    gap: 15px;
}

.seal-details-left {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.seal-details-left h4 {
    font-size: 1.6rem;
    color: var(--primary-dark);
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
}

.seal-details-left p {
    font-size: 0.65rem;
    color: var(--text-light);
    margin: 2px 0 0 0;
    white-space: nowrap;
}

.seal-details-right {
    border-left: 1px solid #E2D5BE;
    padding-left: 16px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
}

.seal-details-right p {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
}

.drawer-footer {
    padding: 20px 40px;
    background-color: var(--bg-body);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-actions-left {
    display: flex;
    gap: 10px;
}

.footer-actions-right {
    display: flex;
    gap: 10px;
}



/* ==================== TRANSITIONS AND ANIMATIONS ==================== */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(252, 192, 40, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(252, 192, 40, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(252, 192, 40, 0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.93);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Responsive Adaptations --- */
@media (max-width: 900px) {
    .hub-container {
        flex-direction: column;
    }
    .sidebar-filters {
        position: static;
        width: calc(100% - 40px);
        min-width: unset;
        margin: 20px 20px 0 20px;
        height: auto;
    }
}

@media (max-width: 1080px) {
    /* Scale the lockup as one piece so the logo is never crushed. */
    .brand-lockup {
        --logoH: 36px;
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        height: auto;
        padding: 15px 20px;
        gap: 15px;
    }
    /* Stacked on a phone: the equal-columns trick is a horizontal idea and
       does nothing useful once the header is a vertical stack. */
    .brand-identity {
        flex: 0 0 auto;
    }
    .hub-identity {
        flex: 0 0 auto;
        align-items: center;
        padding-left: 0;
    }
    .brand-lockup {
        --logoH: 40px;
        font-size: 25px;
    }
    .app-nav {
        width: 100%;
        justify-content: space-between;
    }
    
    .director-panels-layout {
        grid-template-columns: 1fr;
    }
}

/* --- Embedded PDF Iframe Viewer --- */
/* NOTE (audit 2026-07-26): the base .modal-pdf-iframe rule that used to sit here
   was fully overridden — property for property, all with !important — by the
   later .modal-pdf-iframe rule further down this file. It was removed as dead. */

/* --- Centered PDF Focus Mode --- */
.drawer-modal.pdf-only-mode .drawer-header,
.drawer-modal.pdf-only-mode .modal-summary-box,
.drawer-modal.pdf-only-mode .modal-signatures-box,
.drawer-modal.pdf-only-mode .drawer-footer {
    display: none !important;
}

.drawer-modal.pdf-only-mode .drawer-body {
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.drawer-modal.pdf-only-mode .modal-document-body {
    margin: 0;
    height: 100%;
}

.drawer-modal.pdf-only-mode .modal-pdf-iframe {
    height: 90vh;
    border: none;
    border-radius: var(--radius-md);
}

/* --- Floating PDF Utility Bar in Focus Mode --- */
.pdf-focus-utility-bar {
    display: none;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 40px rgba(50, 103, 134, 0.18);
    border-radius: 50px;
    padding: 10px 24px;
    z-index: 9999;
    align-items: center;
    gap: 12px;
    animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-modal.pdf-only-mode .pdf-focus-utility-bar {
    display: flex !important;
}

.utility-bar-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-right: 8px;
}

/* Button Sizing & Custom Stylings inside Bar */
.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: 30px;
    font-weight: 700;
}

.pdf-focus-utility-bar .btn-outline {
    background-color: rgba(255, 255, 255, 0.6);
}

.pdf-focus-utility-bar .btn-outline:hover {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* Animations */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translate(-50%, 25px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Responsive Handling for Floating Utility Bar */
@media (max-width: 768px) {
    .pdf-focus-utility-bar {
        bottom: 20px;
        padding: 8px 16px;
        width: 95%;
        max-width: 450px;
        justify-content: center;
    }
    .utility-bar-text {
        display: none; /* Hide explanatory text on mobile to save space */
    }
}

/* --- Accredited Approval Seal Styles --- */
.approved-seal-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.inline-report-controls {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.inline-report-controls .control-item {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inline-report-controls .control-item label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inline-report-controls .control-item input[type="date"],
.inline-reports-container .control-item input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-main);
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 38px;
}

.inline-report-controls .control-item input[type="date"]:focus,
.inline-reports-container .control-item input[type="date"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(50, 103, 134, 0.15);
}

/* --- Department Filter Dropdown Styles --- */
.department-select {
    width: 100%;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: white;
    color: var(--text-main);
    outline: none;
    transition: var(--transition);
    cursor: pointer;
}

.department-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(50, 103, 134, 0.15);
}

.misc-empty-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 1.1rem;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* --- P&P Library Maintenance Overlay (Site Access Control Lock) --- */
/* ==================== P&P LIBRARY MAINTENANCE (STARFIELD HISTORY SHOW) ==================== */
.maintenance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:
        radial-gradient(1100px 700px at 72% 18%, rgba(38, 66, 100, 0.55), transparent 60%),
        radial-gradient(900px 650px at 22% 82%, rgba(58, 52, 26, 0.35), transparent 60%),
        linear-gradient(165deg, #0b1a2c 0%, #091423 55%, #060e1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99; /* Sits below header (z-index 100) but covers everything else */
    overflow: hidden;
    color: #ffffff;
    padding: 40px;
}

.maintenance-starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.maintenance-kicker {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    color: rgba(255, 255, 255, 0.76);
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.maint-stage {
    position: relative;
    z-index: 5;
    width: min(760px, 88vw);
    min-height: 300px;
}

.maint-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transition: opacity 420ms ease, transform 540ms cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

.maint-state.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.maint-state.leave {
    opacity: 0;
    transform: translateY(-10px) scale(1.015);
}

.maint-year {
    font-family: "Poppins", "Open Sans", Arial, sans-serif;
    font-size: clamp(42px, 6vw, 84px);
    line-height: 0.9;
    font-weight: 700;
    color: #f3d488;
    letter-spacing: -0.045em;
    filter: drop-shadow(0 0 16px rgba(241, 195, 25, 0.22));
}

.maint-title {
    margin-top: 9px;
    font-family: "Poppins", "Open Sans", Arial, sans-serif;
    font-size: clamp(18px, 2vw, 27px);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.maint-detail {
    margin-top: 7px;
    color: #dce8ee;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: clamp(13px, 1.25vw, 16px);
    line-height: 1.48;
    font-weight: 500;
}

.maint-rule {
    width: 64px;
    height: 3px;
    border-radius: 999px;
    background: #f3d488;
    margin-top: 14px;
}

@media (max-width: 760px) {
    .maint-stage { width: 88vw; }
}

@media (prefers-reduced-motion: reduce) {
    .maint-state { transition: opacity 200ms ease; transform: none; }
    .maint-state.show, .maint-state.leave { transform: none; }
}

/* ==================== MODAL VIEWER TABS AND BANNER ==================== */
.modal-viewer-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
    padding-bottom: 2px;
}

.modal-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-light);
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.modal-tab:hover {
    color: var(--primary);
    background-color: var(--bg-body);
}

.modal-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background-color: var(--primary-light);
}

.modal-tab svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.modal-tab-content {
    display: none;
}

.modal-tab-content.active {
    display: block;
}

/* --- Rendered Docx Styling & Loader Animation --- */
.docx-rendered-content {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    color: #2b2b2b !important;
    background: #ffffff !important;
    max-width: 800px !important;
    margin: 10px auto !important;
    padding: 50px 60px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 4px !important;
    text-align: left !important;
    box-sizing: border-box !important;
    min-height: 297mm;
    position: relative !important;
}

.docx-rendered-content h1 {
    font-size: 1.6rem !important;
    color: var(--primary-dark) !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid var(--primary) !important;
    padding-bottom: 6px !important;
    font-weight: 800 !important;
}

.docx-rendered-content h2 {
    font-size: 1.3rem !important;
    color: var(--primary-dark) !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
}

.docx-rendered-content h3 {
    font-size: 1.1rem !important;
    color: var(--text-main) !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

.docx-rendered-content p {
    font-size: 0.95rem !important;
    margin-bottom: 14px !important;
    line-height: 1.6 !important;
    color: #333333 !important;
}

.docx-rendered-content ul, .docx-rendered-content ol {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    padding-left: 24px !important;
}

.docx-rendered-content li {
    margin-bottom: 6px !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

.docx-rendered-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 24px 0 !important;
    table-layout: auto !important;
}

.docx-rendered-content th, .docx-rendered-content td {
    border: 1.5px solid #b0c4de !important; /* Steel blue style border for cleaner document feel */
    padding: 12px 14px !important;
    vertical-align: middle !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    text-align: left;
}

.docx-rendered-content th {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    font-weight: 700 !important;
}

.docx-rendered-content img {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block;
}

/* Specific styling to prevent header logo column squishing */
.docx-rendered-content td img {
    max-width: 160px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

/* --- Rendered Excel Sheet Styling --- */
.xlsx-rendered-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    background: #ffffff !important;
    max-width: 800px !important;
    margin: 10px auto !important;
    padding: 30px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
}

.xlsx-rendered-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.85rem !important;
    color: #333333 !important;
}

.xlsx-rendered-content th, .xlsx-rendered-content td {
    border: 1px solid #d3d3d3 !important;
    padding: 6px 10px !important;
    text-align: left;
}

.xlsx-rendered-content th {
    background-color: #f1f3f4 !important;
    font-weight: bold;
    color: #5f6368 !important;
    text-align: center;
}

/* --- Interactive Text View centered and 18pt font rule compliance --- */
#modal-doc-body-text {
    font-size: 18pt !important;
    text-align: center !important;
    font-family: Arial, "Segoe UI", sans-serif !important;
    line-height: 1.6 !important;
    color: var(--text-main) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 240px;
    padding: 40px !important;
}

#modal-doc-body-text * {
    font-size: 18pt !important;
    text-align: center !important;
    line-height: 1.6 !important;
}

#modal-doc-body-text ul, #modal-doc-body-text ol {
    list-style: none !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#modal-doc-body-text li {
    margin-bottom: 8px !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Premium Search Query Highlighting Styles */
mark.search-highlight {
    background-color: rgba(252, 192, 40, 0.25); /* Subtle yellow background, matches var(--accent) with opacity */
    color: inherit;
    font-weight: 800;
    padding: 0 3px;
    border-radius: var(--radius-sm);
    border-bottom: 2px solid var(--accent);
}

/* --- Site-Wide Access Gate Overlay --- */
.site-gate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-body);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}

.nav-tab-inform {
    border-left: 1px solid var(--border-color);
    padding-left: 15px;
}

/* Inform Upload Zone */
.inform-upload-zone:hover {
    border-color: var(--primary) !important;
    background-color: var(--primary-light) !important;
}

.inform-upload-zone:hover svg {
    fill: var(--primary) !important;
    transform: translateY(-4px);
}

.inform-upload-zone.dragover {
    border-color: var(--success) !important;
    background-color: rgba(46, 204, 113, 0.05) !important;
}

/* Existing Guidelines Management List */

/* Audit table styling */
#inform-audit-report-container table th,
#inform-audit-report-container table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

#inform-audit-report-container table tbody tr:hover {
    background-color: var(--primary-light);
}

#inform-audit-report-container table tbody tr:last-child td {
    border-bottom: none;
}

/* Document Preview Page Centering & Uniformity */
#modal-doc-body-pdf {
    background-color: #e9ecef;
    padding: 16px;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    min-height: 480px;
    text-align: center;
}

.modal-pdf-iframe {
    width: 100% !important;
    max-width: 850px !important;
    height: calc(90vh - 220px) !important;
    min-height: 480px !important;
    margin: 0 auto !important;
    display: block !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.admin-active-policies-grid {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 10px;
    height: 440px; /* displays exactly 5 items (80px tall + 10px gap) */
    padding: 4px;
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.admin-active-policies-grid::-webkit-scrollbar {
    width: 6px;
}

.admin-active-policies-grid::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 4px;
}

.admin-active-policies-grid::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px;
}

.admin-active-policies-grid::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.admin-active-policies-grid .activation-item {
    flex: 0 0 80px;
    box-sizing: border-box;
    width: 100%;
}

/* --- Admin Stats Counter Bar --- */

/* Responsive stats bar layout */

/* Collapsible details styling to hide native triangle indicators */
details.admin-sync-details summary,
details.admin-local-utils-details summary,
details.admin-credentials-details summary,
details.admin-docs-state-details summary {
    list-style: none;
}
details.admin-sync-details summary::-webkit-details-marker,
details.admin-local-utils-details summary::-webkit-details-marker,
details.admin-credentials-details summary::-webkit-details-marker,
details.admin-docs-state-details summary::-webkit-details-marker {
    display: none;
}

/* Accredited Digital Endorsement Signature Strip */
.signature-strip {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 6px 18px;
    background-color: #FFF8E5;
    border: 1px solid #E2D5BE;
    border-radius: 4px;
    width: fit-content;
    margin: 10px 0 0 0;
    box-sizing: border-box;
}

/* General disabled buttons styling */
button:disabled, .btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Pinned Director Validation Endorsement stamp */

/* --- Accessibility: visible keyboard focus ring (WCAG 2.4.7) --- */
/* Restores a focus indicator for keyboard users (":focus-visible" only, so
   mouse clicks don't show the ring) even where "outline: none" is set. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-tab:focus-visible,
.filter-btn:focus-visible,
.btn:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==================== UNIFIED PORTAL LOG OUT BUTTON ====================
   Shared, identically-sized green "Log Out" control for the Inform USA,
   Director, and Operations portals. Carries a session-active dot (green)
   that flips to a red "Logged Out" indicator when the session ends. */
.portal-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    min-width: 132px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background-color: #16a34a;   /* green = session active */
    border: 1px solid #15803d;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.portal-logout-btn:hover { background-color: #15803d; }
.portal-logout-btn .logout-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #bbf7d0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}
/* Logged-out state: button turns red with a red indicator dot */
.portal-logout-btn.logged-out {
    background-color: #dc2626;
    border-color: #b91c1c;
    pointer-events: none;
}
.portal-logout-btn.logged-out .logout-dot {
    background-color: #fecaca;
}

/* ===== Inform USA "Document library" grouped accordion (2026-07-14) ===== */
#inform-remove-docs-list {
    gap: 10px;
}
.inform-group {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}
.inform-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background-color 0.15s ease;
}
.inform-group-header:hover {
    background: #f8fafc;
}
.inform-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.inform-group-icon svg {
    width: 22px;
    height: 22px;
    fill: var(--primary-dark);
}
.inform-group-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inform-group-count {
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-left: 8px;
}
.inform-group-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: var(--text-muted);
    transition: transform 0.2s ease;
}
.inform-group-header.expanded .inform-group-chevron {
    transform: rotate(180deg);
}
.inform-group-body {
    border-top: 1px solid var(--border-color);
}
.inform-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
}
.inform-group-item:last-child {
    border-bottom: none;
}
.inform-group-item:hover {
    background: #f8fafc;
}
.inform-group-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inform-group-item-title:hover {
    color: var(--primary);
    text-decoration: underline;
}
.inform-doc-delete-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: #dc2626;
    transition: background-color 0.15s ease;
}
.inform-doc-delete-btn:hover {
    background: rgba(220, 38, 38, 0.1);
}
.inform-doc-delete-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.inform-group-empty {
    padding: 14px 16px;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
}

/* ===== CRS sign-up modal — two-column redesign (2026-07-14) ===== */
.crs-modal-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.crs-col-left {
    padding: 24px 28px;
    background: var(--bg-body);
    border-right: 1px solid var(--border-color);
}
.crs-col-right {
    padding: 24px 28px;
}
.crs-col-title {
    margin: 0 0 14px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}
@media (max-width: 720px) {
    .crs-modal-columns {
        grid-template-columns: 1fr;
    }
    .crs-col-left {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}

/* ============================================================
   CRS Certification Exam Sign-Up modal — scoped styling.
   The generic .elig-* rules are only bound to #eligibility-modal
   and #exam-signup-modal, so the CRS modal renders unstyled without
   these. Two-tone panels (bluish left / white right), site-blue
   eligibility statement (no green box), and an enlarged submit.
   ============================================================ */

/* Two-tone panels + distinct delineation */
#crs-signup-modal .crs-modal-columns {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    margin: 4px 0 0;
}
#crs-signup-modal .crs-col-left {
    background: var(--primary-light);          /* bluish */
    border-right: 1px solid var(--border-color);
}
#crs-signup-modal .crs-col-right {
    background: #ffffff;                        /* white */
}

/* Field labels */
#crs-signup-modal .elig-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 16px 0 6px;
}

/* Field inputs + selects */
#crs-signup-modal .elig-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    background: #ffffff;
    color: var(--text-dark);
    font-family: inherit;
    box-sizing: border-box;
}
#crs-signup-modal .elig-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Submit button — enlarged, prominent, site colors */
#crs-signup-modal .elig-submit {
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 17px 28px;
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    font-family: inherit;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s;
}
#crs-signup-modal .elig-submit:hover {
    background: var(--primary-dark, #27536c);
}

/* Eligibility result — recolored from green to site blue */
#crs-signup-modal .elig-result {
    border-radius: 10px;
    padding: 20px;
    margin: 0;
    border: 1.5px solid;
}
#crs-signup-modal .elig-result.eligible {
    background: #ffffff;
    border-color: var(--primary);
}
#crs-signup-modal .elig-result.not-eligible {
    background: #fdeceb;
    border-color: #b3261e;
}
#crs-signup-modal .elig-result-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
#crs-signup-modal .elig-result-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #ffffff;
    font-size: 0.9rem;
    flex: none;
}
#crs-signup-modal .eligible .elig-result-badge { background: var(--primary); }
#crs-signup-modal .not-eligible .elig-result-badge { background: #b3261e; }
#crs-signup-modal .elig-result-title { font-weight: 700; font-size: 1.05rem; }
#crs-signup-modal .eligible .elig-result-title { color: var(--primary-dark, #1b384a); }
#crs-signup-modal .not-eligible .elig-result-title { color: #b3261e; }

/* Criteria list */
#crs-signup-modal .elig-criteria-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
#crs-signup-modal .elig-criteria-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.87rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(20, 40, 70, 0.08);
}
#crs-signup-modal .elig-criteria-list li:last-child { border-bottom: none; }
#crs-signup-modal .elig-mark {
    flex: none;
    font-weight: 800;
    width: 16px;
    text-align: center;
}
#crs-signup-modal .elig-mark.pass { color: #2e7d4f; }
#crs-signup-modal .elig-mark.fail { color: #b3261e; }

/* "Eligible to test" explanation — site-blue callout, not green */
#crs-signup-modal .elig-why-box {
    margin-top: 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-dark);
    background: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 12px 14px;
}

.inform-group--removed .inform-group-header {
    background: #fafafa;
}
.inform-group--removed .inform-group-icon svg {
    fill: #94a3b8;
}
.inform-group-item--removed .inform-group-item-title {
    color: var(--text-muted);
}
.inform-doc-restore-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1.5px solid #385723;
    border-radius: 6px;
    cursor: pointer;
    color: #385723;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background-color 0.15s ease;
}
.inform-doc-restore-btn:hover {
    background: #e2f0d9;
}
.inform-doc-restore-btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* ===== Inform USA Certification Test Date — compact 3-state card ===== */
.itd-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.itd-state--edit {
    gap: 10px;
}
.itd-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.itd-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    fill: var(--primary);
}
.itd-date {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.2;
}
.itd-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 2px;
}
.itd-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.itd-confirm-text {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-dark);
}
.itd-date-field {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 8px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-dark);
    background: white;
    box-sizing: border-box;
}
.itd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: white;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.itd-btn:hover {
    background: var(--bg-light, #f8fafc);
}
.itd-btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.itd-btn--primary:hover {
    filter: brightness(0.95);
    background: var(--primary);
}
.itd-btn--danger {
    border-color: #c5221f;
    color: #c5221f;
}
.itd-btn--danger:hover {
    background: rgba(197, 34, 31, 0.08);
}

/* ===== Director Portal redesign (2026-07-14): tabs, reports ===== */
/* The .director-kpi-grid / -card / -label / -value rules and #director-kpi-onhold
   were DELETED 2026-07-27 (Robert) together with the three count cards they styled
   and renderDirectorKpis() in app.js. Nothing in the app carries those classes now. */
.director-tab-bar {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 18px;
}
.director-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.director-tab:hover:not(.active) {
    color: var(--primary-dark);
}
.director-tab.active {
    color: var(--primary);
    border-bottom-color: var(--accent);
    font-weight: 800;
}
.director-tab-panel {
    display: none;
}
.director-tab-panel.active {
    display: block;
}

.director-scope-toggle {
    display: inline-flex;
    flex-wrap: nowrap;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.director-scope-btn {
    background: #ffffff;
    border: none;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.director-scope-btn + .director-scope-btn {
    border-left: 1px solid var(--border-color);
}
.director-scope-btn.active {
    background: var(--primary);
    color: #ffffff;
}

.director-report-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-dark);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.director-report-btn:hover {
    border-color: var(--primary);
    box-shadow: 0 1px 4px rgba(27, 56, 74, 0.08);
}
.director-report-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: var(--primary);
}

/* DEAD as of 2026-07-27: the full-width .director-global-search card was removed.
   The search box moved inside the Overview panel next to the scope buttons and is
   styled by #director-portal .director-inline-search in index.html's
   <style id="director-redesign-css">. These rules match nothing now. */
.director-global-search {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
}
.director-global-search label {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.director-global-search input {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    background: #ffffff;
    color: var(--text-main);
    box-sizing: border-box;
}
.director-global-search input:focus { border-color: var(--primary); }
.director-global-search .search-icon-light {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    fill: var(--text-muted);
    pointer-events: none;
}

/* Report buttons stacked as a master list in the left box. */
.director-report-list { display: flex; flex-direction: column; gap: 10px; }
.director-report-list .director-report-btn { width: 100%; justify-content: flex-start; }
.director-report-list .director-report-btn.active {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: inset 4px 0 0 var(--primary);
}
@media (max-width: 720px) {
}

@media (max-width: 820px) {
    /* .director-global-search rule removed with the card it styled (2026-07-27). */
}

/* ===== Library sidebar: two separated "worlds" (2026-07-14) ===== */
/* 2026-07-27: padding is even on all four sides (was 14px 14px 4px). The 4px
   bottom left the last row almost touching the card edge while there was 14px
   of breathing room under the gold rule at the top -- the two panels read as
   lopsided. Now the space below the last row matches the space below the gold
   rule, and both panels are the same height (five equal rows in each). */
.library-world {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #ffffff;
    /* 2026-07-27: added with the third panel, and still load-bearing after the
       report card was folded into it. .sidebar-filters is a flex column, so once
       the panels are taller than the column they start SHRINKING instead of
       scrolling, and rows get clipped. flex-shrink:0 makes the column scroll,
       which is what overflow-y:auto on .sidebar-filters was always there to do.
       Do not remove: three panels overflow any window under about 1155px tall. */
    flex-shrink: 0;
}
/* BOTH sidebar panel headings share ONE treatment (2026-07-26): same size,
   same weight, same gold rule underneath, so "Policies, Procedures &
   Reference" and "Inform USA Publications and Certifications" read as a
   matched pair. Panel 1 briefly used a small chip instead; Robert asked for
   uniformity and he was right - two treatments in one column looked accidental.
   Colour is var(--primary) #326786 on both, which also retired the last navy
   #1B2A57 left in the app. */
.library-world-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--primary);
    line-height: 1.15;
    padding: 0 0 5px 0;
    margin-bottom: 6px;
    border-bottom: 2px solid #F2C413;   /* gold rule, matches the logo's gold */
}

/* .library-world-title--lg is now redundant - both headings are identical.
   Kept as an empty alias so the existing markup does not have to change; if
   the two panels ever need to differ again, this is where to do it. */
/* Panel 2 used to be a solid navy block. It is now a white card like panel 1,
   so the two read as one system instead of one shouting over the other
   (2026-07-26). */
.library-world--inform {
    border-color: var(--border-color);
    background: #ffffff;
}
/* Plain text items, no bullets - matches the "Browse by type" list in panel 1
   so the two panels stay uniform (bullets removed 2026-07-26). */
.library-world--inform .informusa-tool-link {
    color: var(--text-main);
}
.library-world--inform .informusa-tools-section {
    margin-top: 0;
}

/* ===== Panel 3: Agency Notices & Terms of Use (2026-07-27) =====
   Deliberately carries NO styling of its own beyond the two rules below. It is a
   plain .library-world card with the shared .library-world-title heading, and its
   rows are .notice-tool-link, which is grouped into the SAME rules as
   .informusa-tool-link above (row height, padding, hover, focus). Panels 2 and 3
   are therefore identical by construction — change one of those shared rules and
   both panels move together, which is the point. */
.library-world--notices .notice-tools-section {
    margin-top: 0;
}

/* Separates the two Hub-level rows (Hub Terms of Use, Report Incorrect
   Information) from the four published agency documents below them. Same 1px
   border colour as every other divider in the sidebar. */
.notice-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 4px 2px;
}

/* ===== REMOVED 2026-07-27 (revised): the standalone "Report Incorrect
   Information" card =====
   `.library-report-issue` and its centred `.report-issue-btn` treatment are
   gone. Robert moved that control INTO the Agency Notices panel as an ordinary
   `.notice-tool-link` row, so the whole apparatus that existed only to support a
   fourth free-standing card went with it:
     - margin-top:auto (parked the card on the sidebar's bottom edge)
     - position:sticky / bottom:0 / z-index / the upward box-shadow (kept it on
       screen once a third panel pushed the column past the fold)
     - .library-world--notices { margin-bottom: 72px } (the scroll room that let
       the notices panel clear the pinned card)
   `.library-world { flex-shrink: 0 }` was NOT removed — it is what makes the
   column scroll instead of squashing the panels, and that is still needed.
   The button id #btn-open-report-issue is unchanged, so app.js needs no edit. */

#department-filter:disabled {
    background-color: #f1f5f9;
}

/* ---- Inform USA modals: 211 SAN DIEGO palette (changed 2026-07-26).
   These used to carry Inform USA's own brand colours (navy #1B2A57, bright
   blue #2E8FD9, lime #C4D92C) to signal "this is Inform USA's data, not
   ours". Robert asked for one consistent 211 look across the whole Hub, so:
     header bands / accents / CTA  -> #326786  (var --primary, the logo blue)
     dark ink and hover states     -> #1b384a  (var --primary-dark)
     lime highlight                -> #F2C413  (the logo gold)
     tinted panels                 -> #eef4f7  (var --primary-light)
   DELIBERATELY LEFT ALONE, because these encode meaning rather than brand:
     - certification status pills (green Active / amber Expiring soon /
       yellow Expiring this year)
     - the red urgency treatment on the test-date countdown
     - the "211 SD requirement" badge pair #F2F8DC/#4B5A0F, which only works
       as a contrast against the blue "Inform USA requirement" badge
   Scoped so #exam-signup-modal and #crs-signup-modal are unaffected. ---- */

/* One consistent navy ink + bright-blue accent, scoped to this modal only.
   Remaps every in-modal var(--text-dark)/var(--primary) reference (headings,
   labels, input text, focus outline, count pills, CTA) without touching the
   rest of the app. */
#eligibility-modal {
    --text-dark: #1b384a;
    --primary: #326786;
    --primary-dark: #1b384a;
    --primary-light: #eef4f7;
}

/* White "Inform USA" chip used in the modal headers (replaces the logo img) */
#eligibility-modal .inform-chip,
#test-dates-modal .inform-chip,
#cert-check-modal .inform-chip {
    display: inline-block;
    background: #ffffff;
    color: #326786;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 15px;
    border-radius: 9px;
    letter-spacing: 0.1px;
    white-space: nowrap;
    line-height: 1;
}

/* White step cards standing out against the gray modal body */
#eligibility-modal .elig-card {
    background: #ffffff;
    border-color: #E6E9F0;
}

/* Step-1 option tiles: white with gray border; selected = lime-green border */
#eligibility-modal .elig-mode-option {
    background: #ffffff;
    border-color: #DDE2EC;
}
#eligibility-modal .elig-mode-option.selected {
    border-color: #F2C413;
    background: #ffffff;
}
#eligibility-modal .elig-mode-title { color: #1b384a; }

/* Requirement checkbox rows → white (bordered) on the white step card */
#eligibility-modal .elig-toggle-row {
    background: #ffffff;
}

/* "211 SD requirement" badge → light-lime tint / dark-olive text
   (the "Inform USA requirement" badge uses an inline blue pair in the HTML) */
#eligibility-modal .elig-tag {
    background: #F2F8DC;
    color: #4B5A0F;
}

/* "Check eligibility" CTA → bright blue, the one clear call to action */
#eligibility-modal .elig-submit { background: #326786; }
#eligibility-modal .elig-submit:hover { background: #1b384a; }

/* ---- Locked (sticky) column headers for the Inform USA Portal report tables.
   The header cells stay pinned to the top of their scroll container while the
   data scrolls. Covers all Inform report types (#inform-preview-table-head:
   Document Access, Inventory, Miscellaneous, Update/Revision) and the three
   Certification Reports A/B/C (#cert-preview-table-head). The CRS exam sign-up
   listing (#crs-signup-collapse) is already sticky inline. Background + inset
   bottom-border live on the <th> so they don't scroll away under
   border-collapse. Added 2026-07-21. ---- */
#inform-preview-table-head th,
#cert-preview-table-head th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-body);
    box-shadow: inset 0 -2px 0 var(--border-color);
}


/* ===== Director Review & Approval redesign (2026-07-24): two-tab pane + one-at-a-time carousel ===== */
.rv2-tabs{display:flex;gap:8px;border-bottom:2px solid var(--border-color);margin-bottom:20px;padding-bottom:2px;}
.rv2-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:none;border:none;border-bottom:3px solid transparent;color:var(--text-light);font-weight:800;font-size:0.9rem;font-family:inherit;cursor:pointer;border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:var(--transition);}
.rv2-tab:hover{color:var(--primary);background:var(--bg-body);}
.rv2-tab.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--primary-light);}
.rv2-tab svg{width:18px;height:18px;fill:currentColor;}
.rv2-panel{display:none;}
.rv2-panel.active{display:block;}

.rv2-carousel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.rv2-carousel-head h3{margin:0;font-size:1.05rem;font-weight:800;color:var(--primary-dark);border:none;padding:0;}
.rv2-carousel-nav{display:flex;align-items:center;gap:10px;}
.rv2-carousel-count{font-size:0.78rem;font-weight:800;color:var(--text-muted);}
.rv2-carousel-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border-color);background:#fff;color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);}
.rv2-carousel-btn:hover:not(:disabled){border-color:var(--primary);background:var(--primary-light);}
.rv2-carousel-btn:disabled{opacity:0.35;cursor:default;}
.rv2-carousel-btn svg{width:16px;height:16px;fill:currentColor;}

.rv2-card{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.rv2-pill{font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;padding:4px 12px;border-radius:20px;background:var(--primary-light);color:var(--primary);flex-shrink:0;}
.rv2-card h4{margin:0;font-size:1.1rem;font-weight:800;color:var(--text-main);line-height:1.3;}

.rv2-comm{border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;margin-bottom:22px;}
.rv2-comm-sec{padding:14px 18px;}
.rv2-comm-sec + .rv2-comm-sec{border-top:1px solid var(--border-color);}
.rv2-comm-pm{background:rgba(50,103,134,0.05);}
.rv2-comm-label{font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;color:var(--primary);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.rv2-comm-label svg{width:14px;height:14px;fill:var(--primary);}
.rv2-comm-pm p{margin:0;font-size:0.88rem;color:var(--text-muted);font-weight:600;line-height:1.4;}
.rv2-comm-dir textarea{width:100%;resize:none;border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:9px 11px;font-family:inherit;font-size:0.88rem;min-height:60px;box-sizing:border-box;}
.rv2-comm-dir textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(50,103,134,.12);}
.rv2-counter{display:flex;justify-content:flex-end;font-size:0.72rem;font-weight:700;color:var(--text-light);margin-top:4px;}
.rv2-counter.limit{color:var(--danger);}

.rv2-divider{border:none;border-top:2px solid var(--border-color);margin:0 0 22px;}

.rv2-doc-actions{display:flex;gap:18px;margin-top:14px;font-size:0.85rem;font-weight:800;flex-wrap:wrap;}
.rv2-doc-actions a,.rv2-doc-actions button{display:inline-flex;align-items:center;gap:6px;color:var(--primary);background:none;border:none;text-decoration:none;cursor:pointer;font-family:inherit;font-size:0.85rem;font-weight:800;padding:0;}
.rv2-doc-actions svg{width:15px;height:15px;fill:var(--primary);}

/* ===== Director Review pane tweaks (Robert, 2026-07-30) =====
   Approve & Sign tab: drop the blue type pill, un-bold the document title.
   Review Document tab: drop the POLICY pill, match the title to the Approve &
   Sign tab (non-bold, 1.1rem), hide the Last Edited / Origin metadata line, and
   let the document render at the same size as the Library modal (the fixed
   650/520px caps are lifted in app.js; here we lift the .review-doc-body cap so
   the viewer fills the pane like the Library drawer). */
#rv2-card-type, #review-doc-type { display: none; }
.rv2-card h4 { font-weight: 500; }
.review-doc-header h2 { font-size: 1.1rem; font-weight: 500; }
.review-doc-header .review-metadata { display: none; }
#rv2-panel-doc .review-doc-body { max-height: none; font-size: 0.95rem; line-height: 1.7; }

/* ==================================================================
   RESPONSIVE SCALING LAYER (Robert, 2026-07-30) — pass 1
   Fills the tablet + small-laptop band between the existing phone rules
   (<=768/900) and the desktop layout, so the Hub scales cleanly from a 27"
   monitor down to an 11" iPad. The outer portal containers are already fluid
   (max-width:1400 + auto margins), so these rules (a) fluidly scale the side
   gutters at every width, (b) shrink the header nav on tablets so it KEEPS
   its fixed 76px height — which several panels depend on via calc(100vh - 76px)
   — instead of stacking, and (c) reflow the heaviest multi-column layouts.
   Rules are guarded with min-width:769px so they never collide with the
   existing phone stack below 768px.
   ================================================================== */

/* (a) Fluid side gutters on the three portal containers at every width. */
#inform-portal, #director-portal, #admin-console {
    padding-left: clamp(12px, 2.4vw, 24px);
    padding-right: clamp(12px, 2.4vw, 24px);
}

/* Tablet & narrow-laptop band: iPad landscape/portrait, split-screen laptops. */
@media (min-width: 769px) and (max-width: 1024px) {
    /* (b) Header stays one row (preserves the 76px height panels rely on);
       just tighten the tabs and gutters so four portals never crowd the brand. */
    .header-container { padding: 0 16px; gap: 14px; }
    .app-nav { gap: 4px; }
    .nav-tab { font-size: 0.84rem; padding: 10px 12px; }
    .brand-lockup { --logoH: 34px; font-size: 21px; }
    /* (c) Reflow the two heaviest multi-column layouts to a single column. */
    .director-panels-layout { grid-template-columns: 1fr; }
    .admin-action-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Small tablets / large phones just above the phone breakpoint. */
@media (min-width: 769px) and (max-width: 860px) {
    .nav-tab { font-size: 0.8rem; padding: 8px 10px; }
    .admin-action-grid { grid-template-columns: 1fr; }
}


/* ===== Panel 4: Quick Actions — distinct green call-to-action card (2026-07-30, Robert) =====
   The two "do something" links (Request a Policy/Procedure/Reference and Report Incorrect
   Information) were moved out of the browse/read lists into their own small card below Agency
   Notices — filled green like the welcome banner is filled navy, so it stands out against the
   white sidebar. Site palette only: var(--success) #2e7d32. */
.library-world--actions {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    box-shadow: 0 6px 16px rgba(50, 103, 134, 0.28);
    padding: 12px 12px 13px;
}
.library-world--actions .library-world-title {
    color: #ffffff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
}
.action-tools-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.library-action-link {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 38px;
    text-align: left;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.18s ease;
    box-sizing: border-box;
}
.library-action-link:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
}
.library-action-link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}