/* ============================================================================
   ZABDESK UNIVERSAL GLOBAL STYLESHEET  (zn_global.css)
   ============================================================================
   THE ONE FILE TO CHANGE THE ENTIRE PROJECT.
   Included automatically by inc_menu/zn_topbar.inc on EVERY page.
   Contains: design tokens, base element styles, common components, utilities.
   
   Cascade order on each page:
     1. zn_global.css     (this file — tokens + base + components)
     2. style.css         (page-specific legacy layout — if present)
     3. responsive.css    (responsive/accessibility layer — if present)
     4. zn_topbar.css     (shared header bar)
     5. zn_home.css etc.  (page-specific extras)
   
   Design tokens use CSS Custom Properties (--zn-*). To re-skin the
   entire site, change the :root values below. Old browsers (IE11/8)
   fall back to the hardcoded values in each rule.
   ============================================================================ */

/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   Change these to re-skin the entire site — every page, every component.
   ========================================================================== */
:root {
    /* Brand colors */
    --zn-color-primary:        #0A2F5A;
    --zn-color-primary-light:   #1E4D8C;
    --zn-color-primary-dark:    #072244;
    --zn-color-accent:          #F5A623;
    --zn-color-accent-dark:     #D48A0A;

    /* Semantic colors */
    --zn-color-text:            #1E293B;
    --zn-color-text-light:      #64748B;
    --zn-color-text-inverse:    #ffffff;
    --zn-color-bg:              #ffffff;
    --zn-color-bg-alt:          #F8FAFC;
    --zn-color-bg-dark:         #0A2F5A;
    --zn-color-border:          #E2E8F0;
    --zn-color-border-strong:   #CBD5E1;

    /* Status colors */
    --zn-color-success:         #16A34A;
    --zn-color-success-bg:      #DCFCE7;
    --zn-color-error:           #DC2626;
    --zn-color-error-bg:        #FEE2E2;
    --zn-color-warning:         #F59E0B;
    --zn-color-warning-bg:      #FEF3C7;
    --zn-color-info:            #3B82F6;
    --zn-color-info-bg:         #DBEAFE;

    /* Focus */
    --zn-color-focus:           #F5A623;

    /* Typography */
    --zn-font-family:           'Segoe UI', Tahoma, Geneva, Verdana, Arial, sans-serif;
    --zn-font-family-headings:  'Segoe UI', Tahoma, Geneva, Verdana, Arial, sans-serif;
    --zn-font-size-xs:          0.75rem;   /* 12px */
    --zn-font-size-sm:          0.875rem;  /* 14px */
    --zn-font-size-base:        1rem;      /* 16px */
    --zn-font-size-lg:          1.125rem;  /* 18px */
    --zn-font-size-xl:          1.25rem;   /* 20px */
    --zn-font-size-2xl:         1.5rem;    /* 24px */
    --zn-font-size-3xl:         2rem;      /* 32px */
    --zn-line-height-tight:     1.2;
    --zn-line-height-normal:    1.5;
    --zn-line-height-relaxed:   1.75;

    /* Spacing scale */
    --zn-spacing-xs:            0.25rem;    /* 4px */
    --zn-spacing-sm:            0.5rem;     /* 8px */
    --zn-spacing-md:            1rem;       /* 16px */
    --zn-spacing-lg:            1.5rem;     /* 24px */
    --zn-spacing-xl:            2rem;       /* 32px */
    --zn-spacing-2xl:           3rem;      /* 48px */

    /* Border radius */
    --zn-radius-sm:             0.25rem;    /* 4px */
    --zn-radius-md:             0.5rem;     /* 8px */
    --zn-radius-lg:             0.75rem;   /* 12px */
    --zn-radius-xl:             1rem;      /* 16px */
    --zn-radius-full:           9999px;

    /* Shadows */
    --zn-shadow-sm:             0 1px 2px rgba(10, 47, 90, 0.05);
    --zn-shadow-md:             0 4px 6px -1px rgba(10, 47, 90, 0.1), 0 2px 4px -2px rgba(10, 47, 90, 0.1);
    --zn-shadow-lg:             0 10px 15px -3px rgba(10, 47, 90, 0.1), 0 4px 6px -4px rgba(10, 47, 90, 0.1);

    /* Transitions */
    --zn-transition-fast:       150ms ease;
    --zn-transition-normal:     250ms ease;
    --zn-transition-slow:       350ms ease;

    /* Z-index scale */
    --zn-zindex-dropdown:      100;
    --zn-zindex-sticky:        100;
    --zn-zindex-modal:         1000;
    --zn-zindex-toast:        1100;
    --zn-zindex-tooltip:      1200;

    /* Layout */
    --zn-max-width-page:        1400px;
    --zn-header-height:        56px;
}

/* ==========================================================================
   2. BASE ELEMENT STYLES (reset + normalize)
   Applied to every page — establishes consistent defaults.
   ========================================================================== */

/* Universal box-sizing (border-box = width includes padding+border) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent text size adjustment on orientation change (iOS) */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Body defaults */
body {
    margin: 0;
    font-family: var(--zn-font-family, 'Segoe UI', Tahoma, Geneva, Verdana, Arial, sans-serif);
    font-size: 14px; /* fallback for old browsers */
    font-size: var(--zn-font-size-base, 16px);
    line-height: var(--zn-line-height-normal, 1.5);
    color: var(--zn-color-text, #1E293B);
    background: var(--zn-color-bg, #ffffff);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--zn-font-family-headings, var(--zn-font-family));
    font-weight: 700;
    line-height: var(--zn-line-height-tight, 1.2);
    margin: 0 0 var(--zn-spacing-sm, 0.5rem);
    color: var(--zn-color-primary, #0A2F5A);
}
h1 { font-size: var(--zn-font-size-3xl, 2rem); }
h2 { font-size: var(--zn-font-size-2xl, 1.5rem); }
h3 { font-size: var(--zn-font-size-xl, 1.25rem); }
h4 { font-size: var(--zn-font-size-lg, 1.125rem); }
h5 { font-size: var(--zn-font-size-base, 1rem); }
h6 { font-size: var(--zn-font-size-sm, 0.875rem); }

/* Links */
a {
    color: var(--zn-color-primary-light, #1E4D8C);
    text-decoration: underline;
    transition: color var(--zn-transition-fast, 150ms ease);
}
a:hover {
    /* v20260917 (S80): was `var(--zn-color-accent, #F5A623)`.
       Gold #F5A623 on a WHITE page is 2.06:1 - measured live on /TES/Login.aspx,
       where the "Forgot your Password?" link sits on the login card: rest colour
       #1E4D8C on white = 7.47:1 (fine), hover colour #F5A623 on white = 2.06:1
       (fails the 4.5:1 floor badly).  The accent is only legible over the dark
       navy chrome, and every dark chrome container ALREADY declares its own gold
       link hover - responsive.css `.zn-hdr-c a.username-top:hover`,
       `#footer .znf-col-contact a:hover`, zn_topbar.css `.zn-signout:hover`,
       notices.css sidebar rules - so this generic rule was redundant there and
       wrong everywhere else.  A generic rule must be safe on the surface it
       actually lands on: plain content links live on white, so they DARKEN. */
    color: var(--zn-color-primary, #0A2F5A);
}
a:active {
    color: var(--zn-color-primary-dark, #072244);
}
/* v20260918 (S87): `a:hover` above sets navy, which is right for a plain content
   link on white - but its specificity (0,1,1) OUTRANKS a plain class rule
   (0,1,0). A link styled as a BUTTON therefore lost its light half: the
   page-local `.btn { background:#0C54A3; color:#fff }` kept its dark surface
   while `a:hover` repainted the label navy -> navy on blue, measured 1.79:1 on
   /WeeklySchedule.asp, /WeeklyScheduleadvance.asp and /daily_schedule_student.asp
   (the "Try again" / "Back to portal" buttons). A link-button owns a DARK
   surface, so its hover must keep the LIGHT half. (0,2,1) beats `a:hover`. */
a.btn:hover, a.btn:focus,
a.button:hover, a.button:focus,
a.link-button:hover, a.link-button:focus {
    color: var(--zn-color-text-inverse, #fff);
}
/* The dark footer keeps the gold link hover - the half of the generic rule that
   the navy surfaces relied on.  NOTE: do NOT add `.zn-topbar a:hover` here.
   It was tried and it BROKE `.zn-signout`: that element declares its own
   `.zn-signout:hover{background:gold; color:navy}` in zn_topbar.css at
   specificity (0,2,0), and `.zn-topbar a:hover` at (0,2,1) outranked it, so the
   text went gold on a gold surface - measured 1.06:1 on /Index.asp.  The topbar
   is already self-sufficient (`.zn-hdr-c a.username-top:hover`,
   `.zn-signout:hover`); only the footer needed the explicit half. */
#footer a:hover,
.zn-footer a:hover {
    color: var(--zn-color-accent, #F5A623);
}

/* Paragraphs */
p {
    margin: 0 0 var(--zn-spacing-sm, 0.5rem);
}

/* Lists */
ul, ol {
    margin: 0 0 var(--zn-spacing-sm, 0.5rem);
    padding-left: var(--zn-spacing-lg, 1.5rem);
}

/* Images — responsive by default */
img {
    max-width: 100%;
    height: auto;
}
img[width] { height: auto; }
img[height] { max-height: auto; }

/* Fluid media */
iframe, video, embed, object {
    max-width: 100%;
}

/* ==========================================================================
   3. FORM ELEMENTS (shared across all pages)
   ========================================================================== */
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"], input[type="search"],
select, textarea {
    font-family: var(--zn-font-family, inherit);
    font-size: var(--zn-font-size-sm, 0.875rem);
    padding: 6px 10px;
    border: 1px solid var(--zn-color-border-strong, #CBD5E1);
    border-radius: var(--zn-radius-sm, 4px);
    background: var(--zn-color-bg, #fff);
    color: var(--zn-color-text, #1E293B);
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color var(--zn-transition-fast, 150ms ease);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus,
input[type="search"]:focus, select:focus, textarea:focus {
    border-color: var(--zn-color-primary-light, #1E4D8C);
    outline: 2px solid var(--zn-color-focus, #F5A623);
    outline-offset: 1px;
}

/* Buttons */
button,
input[type="submit"], input[type="button"], input[type="reset"] {
    font-family: var(--zn-font-family, inherit);
    font-size: var(--zn-font-size-sm, 0.875rem);
    font-weight: 600;
    padding: 8px 18px;
    border: none;
    border-radius: var(--zn-radius-sm, 4px);
    background: var(--zn-color-primary, #0A2F5A);
    color: var(--zn-color-text-inverse, #fff);
    cursor: pointer;
    transition: background var(--zn-transition-fast, 150ms ease);
    min-height: 40px;
    box-sizing: border-box;
}
button:hover,
input[type="submit"]:hover, input[type="button"]:hover {
    /* v20260917 (S79): this hover darkens the surface to #1E4D8C but used to
       leave `color` untouched. Any button whose REST state is a light tint -
       the notice cards' .zn-title-btn / .zn-more-btn, which opt out of the
       button surface with `background:none` - therefore went dark-on-dark on
       hover: measured 1.46:1 (.zn-more-btn) and 1.74:1 (.zn-title-btn), i.e.
       the label disappeared under the cursor. The generic button surface is
       dark, so its hover text must be light. */
    background: var(--zn-color-primary-light, #1E4D8C);
    color: var(--zn-color-text-inverse, #fff);
}
button:active,
input[type="submit"]:active, input[type="button"]:active {
    background: var(--zn-color-primary-dark, #072244);
    color: var(--zn-color-text-inverse, #fff);
}

/* iOS Safari: prevent zoom on focus (inputs < 16px trigger zoom) */
@media (max-width: 767px) {
    input[type="text"], input[type="password"], input[type="email"],
    input[type="tel"], input[type="number"], input[type="date"], input[type="search"],
    select, textarea {
        font-size: 16px;
    }
}

/* ==========================================================================
   4. TABLES (shared across all pages)
   ========================================================================== */
table {
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
    font-size: var(--zn-font-size-sm, 0.875rem);
}
th {
    text-align: left;
    font-weight: 700;
    background: var(--zn-color-bg-alt, #F8FAFC);
    color: var(--zn-color-primary, #0A2F5A);
    padding: 8px 12px;
    border-bottom: 2px solid var(--zn-color-border-strong, #CBD5E1);
}
td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--zn-color-border, #E2E8F0);
}
/* Row hover highlight.
 *
 * v20260918c (S87c): MOVED from `tr:hover td` to `tr:hover`, and BOTH
 * `!important` flags REMOVED. That move IS the fix - and the reasoning is worth
 * keeping, because this one rule has now produced three separate defects.
 *
 * The old form painted the <td> itself:
 *     tr:hover td { background: var(--zn-color-bg-alt, #F8FAFC); }
 * A <td> is a CHILD of the <tr>, so painting it paints OVER whatever the page
 * painted the row with. That is exactly how the owner's original report happened
 * (/Student/QryCourseOutline.asp line 150):
 *     <tr style="background:#0c54a3 !important;color:#fff;">
 *         <td class="tableHeading">S.#</td>
 * The <td> is transparent at rest over the blue row = 7.47:1; on hover this rule
 * painted the <td> near-white while the white text stayed white: 1.05:1.
 *
 * Adding a `color` to the same rule did not settle it. A declaration on the CHILD
 * is not atomic with the page's declaration on the PARENT, and the two properties
 * are not atomic with each other either. Both variants failed, in opposite ways:
 *
 *   plain `color`      -> /QryOfferedCourses.asp pins `background:#0c54a3
 *                         !important` but leaves `color:#fff` plain, so the
 *                         background could not change while the colour did:
 *                         1.96:1 across 52 cells.
 *   `color !important` -> /style_multirole_home_page.css paints
 *                         `table.tile:hover td { background:#083d7a !important }`
 *                         and sets its white text at (0,1,1). This rule at
 *                         (0,1,2) then outranked that white: dark on dark, 1.36:1.
 *
 * The rule is therefore not made safe by choosing a colour - it is made safe by
 * not painting the <td> at all. Setting both halves on the ROW makes them
 * INHERITABLE, and an inherited value is beaten by ANY declaration on the cell,
 * at any specificity, including a plain one. It also drops this rule to (0,1,1),
 * below every page rule observed here. Pages that paint their own row or cell keep
 * their own colours - the behaviour they were written for; pages that do not get
 * the highlight. Verified by an uncapped computed-style hover sweep (1629
 * candidates) on both the student and the admin shell. */
tr:hover {
    background: var(--zn-color-bg-alt, #F8FAFC);
    color: var(--zn-color-text, #1E293B);
}

/* Wide table scroll wrapper (added by js/responsive.js) */
.table-responsive-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.table-responsive-wrap table { min-width: 640px; }
.table-responsive-wrap img { max-width: none; }

/* ==========================================================================
   5. COMMON COMPONENTS (reusable across all pages)
   ========================================================================== */

/* --- Alert / message boxes --- */
.zn-alert {
    padding: var(--zn-spacing-md, 16px);
    border-radius: var(--zn-radius-md, 8px);
    border-left: 4px solid;
    margin-bottom: var(--zn-spacing-md, 16px);
}
.zn-alert-success {
    background: var(--zn-color-success-bg, #DCFCE7);
    border-left-color: var(--zn-color-success, #16A34A);
    color: #166534;
}
.zn-alert-error {
    background: var(--zn-color-error-bg, #FEE2E2);
    border-left-color: var(--zn-color-error, #DC2626);
    color: #991B1B;
}
.zn-alert-warning {
    background: var(--zn-color-warning-bg, #FEF3C7);
    border-left-color: var(--zn-color-warning, #F59E0B);
    color: #92400E;
}
.zn-alert-info {
    background: var(--zn-color-info-bg, #DBEAFE);
    border-left-color: var(--zn-color-info, #3B82F6);
    color: #1E40AF;
}

/* --- Cards --- */
.zn-card {
    background: var(--zn-color-bg, #fff);
    border: 1px solid var(--zn-color-border, #E2E8F0);
    border-radius: var(--zn-radius-md, 8px);
    padding: var(--zn-spacing-md, 16px);
    box-shadow: var(--zn-shadow-sm, 0 1px 2px rgba(10,47,90,0.05));
}
.zn-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 var(--zn-spacing-sm, 8px);
    color: var(--zn-color-primary, #0A2F5A);
}

/* --- Badges --- */
.zn-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--zn-font-size-xs, 0.75rem);
    font-weight: 700;
    border-radius: var(--zn-radius-full, 9999px);
    background: var(--zn-color-bg-alt, #F8FAFC);
    color: var(--zn-color-text, #1E293B);
}
.zn-badge-success { background: var(--zn-color-success, #16A34A); color: #fff; }
.zn-badge-error   { background: var(--zn-color-error, #DC2626);   color: #fff; }
.zn-badge-warning { background: var(--zn-color-warning, #F59E0B);  color: #fff; }
.zn-badge-info    { background: var(--zn-color-info, #3B82F6);     color: #fff; }

/* --- Form labels --- */
.zn-form-label {
    display: block;
    font-size: var(--zn-font-size-sm, 0.875rem);
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--zn-color-text, #1E293B);
}

/* --- Spacing utilities --- */
.zn-mt-0 { margin-top: 0; }
.zn-mt-sm { margin-top: var(--zn-spacing-sm, 8px); }
.zn-mt-md { margin-top: var(--zn-spacing-md, 16px); }
.zn-mt-lg { margin-top: var(--zn-spacing-lg, 24px); }
.zn-mb-0 { margin-bottom: 0; }
.zn-mb-sm { margin-bottom: var(--zn-spacing-sm, 8px); }
.zn-mb-md { margin-bottom: var(--zn-spacing-md, 16px); }
.zn-mb-lg { margin-bottom: var(--zn-spacing-lg, 24px); }
.zn-p-sm { padding: var(--zn-spacing-sm, 8px); }
.zn-p-md { padding: var(--zn-spacing-md, 16px); }
.zn-p-lg { padding: var(--zn-spacing-lg, 24px); }

/* --- Text utilities --- */
.zn-text-center { text-align: center; }
.zn-text-left { text-align: left; }
.zn-text-right { text-align: right; }
.zn-text-sm { font-size: var(--zn-font-size-sm, 0.875rem); }
.zn-text-bold { font-weight: 700; }
.zn-text-muted { color: var(--zn-color-text-light, #64748B); }
.zn-text-primary { color: var(--zn-color-primary, #0A2F5A); }
.zn-text-accent { color: var(--zn-color-accent, #F5A623); }

/* --- Layout utilities --- */
.zn-container {
    max-width: var(--zn-max-width-page, 1400px);
    margin: 0 auto;
    padding: 0 var(--zn-spacing-md, 16px);
}
.zn-flex { display: flex; flex-wrap: wrap; }
.zn-flex-center { display: flex; align-items: center; justify-content: center; }
.zn-hidden { display: none !important; }
.zn-w-full { width: 100%; }
.zn-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   6. ACCESSIBILITY (shared across all pages)
   ========================================================================== */

/* Keyboard focus visible */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--zn-color-focus, #F5A623);
    outline-offset: 2px;
}
/* Fallback for browsers without :focus-visible */
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
    outline: 2px solid var(--zn-color-focus, #F5A623);
    outline-offset: 1px;
}

/* Skip link */
.zn-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.zn-skip-link:focus,
.zn-skip-link:active {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    overflow: visible;
    padding: 10px 20px;
    background: var(--zn-color-primary, #0A2F5A);
    color: var(--zn-color-text-inverse, #fff);
    font-size: var(--zn-font-size-base, 16px);
    z-index: var(--zn-zindex-tooltip, 1200);
    border-radius: var(--zn-radius-md, 8px);
    outline: 3px solid var(--zn-color-accent, #F5A623);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast */
@media (prefers-contrast: high) {
    a { text-decoration: underline; }
}

/* ==========================================================================
   7. RESPONSIVE LAYOUT & MODERN GRID SYSTEM (shared across all pages)
   ========================================================================== */

/* Universal Fluid Page Wrapper
   Specificity (#wrapper #page...) deliberately beats legacy style.css
   single-ID rules such as #page { max-width: 968px } so the page box is
   always fluid and centered inside the wrapper. */
#wrapper {
    width: 100%;
    max-width: var(--zn-max-width-page, 1400px);
    margin: 0 auto;
    box-sizing: border-box;
}
#wrapper #page,
#wrapper #page-bgtop,
#wrapper #page-bgbtm,
#wrapper #header {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Modern CSS Grid Layout for Desktop (>= 1025px) */
@media (min-width: 1025px) {
    #page-bgbtm {
        display: grid;
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
        gap: var(--zn-spacing-lg, 24px);
        align-items: start; /* legacy pages keep their natural sidebar height */
        padding: 0 var(--zn-spacing-md, 16px);
    }

    /* Higher specificity to beat legacy #page-bgbtm > #sidebar in notices.css */
    #page-bgbtm > #sidebar {
        grid-column: 1;
        width: 100% !important;
        max-width: none !important;
        float: none !important;
        margin: 0 !important;
    }

    #page-bgbtm > #main-content,
    #page-bgbtm > #content {
        grid-column: 2;
        width: 100% !important;
        max-width: none !important;
        float: none !important;
        margin: 0 !important;
        min-width: 0; /* Prevents overflow in CSS grid */
    }

    /* Home page only: equal-height columns so the sticky login form can travel
       down the viewport as the visitor scrolls the notice board. */
    body.zn-show-topbar #page-bgbtm {
        align-items: stretch;
    }
    body.zn-show-topbar #page-bgbtm > #sidebar {
        align-self: stretch;
    }
}

/* Large LED displays (>= 1600px) */
@media (min-width: 1600px) {
    #page-bgbtm {
        grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
        gap: calc(var(--zn-spacing-lg, 24px) + 4px);
    }
}

/* Full HD / 2K & 4K displays (progressive sidebar scaling) */
@media (min-width: 1920px) {
    #page-bgbtm {
        grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
        gap: var(--zn-spacing-xl, 32px);
    }
}
@media (min-width: 2560px) {
    #page-bgbtm {
        grid-template-columns: minmax(340px, 440px) minmax(0, 1fr);
        gap: var(--zn-spacing-xl, 32px);
    }
}
@media (min-width: 3840px) {
    #page-bgbtm {
        grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
        gap: calc(var(--zn-spacing-xl, 32px) + 8px);
    }
}

/* Tablet & Mobile Layout: Stacked (< 1025px) */
@media (max-width: 1024px) {
    #page-bgbtm {
        display: flex;
        flex-direction: column;
        gap: var(--zn-spacing-md, 16px);
        padding: 0 var(--zn-spacing-sm, 8px);
    }

    #sidebar {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 auto !important;
        /* v20260913v: Override zn_home.css @supports flex shorthand
           (flex: 0 1 340px), which in column flex would force a 340px
           HEIGHT, clipping the 533px login form so the Login button is
           hidden behind the notice board on iPhone. Allow the sidebar
           to grow to fit its content; min-height: 100% keeps the box
           tall enough on short login pages. */
        flex: 0 1 auto !important;
        min-height: 100%;
    }

    #main-content, #content {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
}

/* Touch-friendly minimum sizes */
button, a, input[type="button"], input[type="submit"], input[type="reset"],
input[type="checkbox"], input[type="radio"], select, [role="button"],
[tabindex]:not([tabindex="-1"]) {
    min-height: 44px;
    min-width: 44px;
}

/* Coarse pointer (touch screens) — larger touch targets */
@media (pointer: coarse) {
    button, a, input[type="button"], input[type="submit"], input[type="reset"],
    [role="button"] {
        min-height: 48px;
        min-width: 48px;
    }
}

/* Tablet breakpoint legacy reset */
@media (max-width: 1024px) {
    #wrapper, #header, #page, #page-bgtop, #page-bgbtm {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Phone breakpoint */
@media (max-width: 767px) {
    html.zn-js body { overflow-x: hidden; }
    h1, h2, h3, h4 { word-wrap: break-word; overflow-wrap: break-word; }
    table, td, th { word-wrap: break-word; }
}

/* Small phone breakpoint */
@media (max-width: 480px) {
    .header-top-bar .Logo img { max-width: 200px; }
}

/* Print styles */
@media print {
    .no-print, .zn-topbar, nav, .zn-menu-btn, .zn-sysstatus,
    .responsive-menu, .zab-menu-res, #sidebar, .ui-dialog-buttonpane,
    .header-top-bar a.signout-icon { display: none !important; }
    .table-responsive-wrap { overflow: visible !important; }
    .table-responsive-wrap table { min-width: 0 !important; }
    body { background: white !important; color: black !important; }
    a { text-decoration: underline; }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ==========================================================================
   8. ZABDESK WORDMARK (shared brand text logo)
   ========================================================================== */
.zn-wordmark {
    display: inline-block;
    font-family: var(--zn-font-family-headings, 'Segoe UI', Tahoma, sans-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    color: var(--zn-color-primary, #0A2F5A);
    white-space: nowrap;
}
.zn-wm-accent { color: var(--zn-color-accent, #F5A623); }
.zn-wordmark-sm { font-size: 18px; letter-spacing: 1.5px; }
.zn-wordmark-footer { color: var(--zn-color-text-inverse, #ffffff); font-size: 26px; }

/* ==========================================================================
   9. LEGACY BROWSER FALLBACKS (IE8/IE11/old iOS)
   ========================================================================== */

/* IE8: no CSS custom properties — uses hardcoded fallback values in each rule */
/* IE8: no :focus-visible — uses plain :focus (defined above) */
/* IE8: no flexbox — float fallbacks defined in responsive.css */

/* Old iOS/Android: -webkit prefixes */
.table-responsive-wrap { -webkit-overflow-scrolling: touch; }
.ui-dialog {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* IE8 star hack guards (modern browsers never parse these) */
.zab-menu-res { *display: none; }
.zn-wordmark { *font-size: 22px; }

/* Footer contact SVGs (viewBox 24x24, no width). Without this they fill the pane. */
#footer .znf-ico,
.znf-ico {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    flex: none;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
}

/* Report opened inside the site frameset already has header / Sign out / footer. */
html.ar-inframe .zn-topbar,
html.ar-inframe .zn-skip-link,
html.ar-inframe .header-top-bar,
html.ar-inframe #footer,
html.ar-inframe #menu {
    display: none !important;
}