/* ============================================
   Mind-Well | accessibility.css  v3.0
   ─────────────────────────────────────────
   Handles:
     • 6-level font scaling (small → xxlarge)
     • High contrast mode (light + dark)
     • Reduced motion
     • Screen reader utilities
     • Layout safety at large font sizes
   ============================================ */

/* ── Screen reader only ──────────────────── */
.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;
}

/* ── 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;
    }
}

/* ── Focus visible ───────────────────────── */
*:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════
   HIGH CONTRAST OVERRIDES
   ══════════════════════════════════════════ */
body[data-contrast="high"] .btn-primary         { outline: 2px solid #000 !important; }
body[data-contrast="high"] .nav-item.active      { outline: 2px solid #000; }
body[data-contrast="high"] .badge               { border: 1px solid currentColor; }
body[data-contrast="high"] .form-control        { border-width: 2.5px; }
body[data-contrast="high"] .card                { border-width: 2px !important; }
body[data-theme="dark"][data-contrast="high"] .btn-primary       { outline: 2px solid #FFF !important; }
body[data-theme="dark"][data-contrast="high"] .card,
body[data-theme="dark"][data-contrast="high"] .stat-card         { border: 2px solid #FFF !important; }

/* ══════════════════════════════════════════
   FONT SCALE — SIDEBAR & LAYOUT ADJUSTMENTS
   ══════════════════════════════════════════ */

/* medium: 1.125rem / ~18px */
html[data-fontsize="medium"]  .sidebar       { width: 256px; }
html[data-fontsize="medium"]  .main-content  { margin-left: 256px; }

/* large: 1.25rem / ~20px */
html[data-fontsize="large"]   .sidebar       { width: 268px; }
html[data-fontsize="large"]   .main-content  { margin-left: 268px; }

/* xlarge: 1.4375rem / ~23px */
html[data-fontsize="xlarge"]  .sidebar       { width: 284px; }
html[data-fontsize="xlarge"]  .main-content  { margin-left: 284px; }

/* xxlarge: 1.6875rem / ~27px */
html[data-fontsize="xxlarge"] .sidebar       { width: 310px; }
html[data-fontsize="xxlarge"] .main-content  { margin-left: 310px; }
html[data-fontsize="xxlarge"] .brand-tagline { display: none; }
html[data-fontsize="xxlarge"] .nav-section-label { font-size: 0.6rem; }
html[data-fontsize="xxlarge"] .nav-item { padding: 11px 12px; line-height: 1.3; }

/* ── Grid collapse at large fonts ─────────── */
html[data-fontsize="large"]   .grid-4 { grid-template-columns: repeat(2, 1fr); }
html[data-fontsize="xlarge"]  .grid-4 { grid-template-columns: repeat(2, 1fr); }
html[data-fontsize="xxlarge"] .grid-4 { grid-template-columns: 1fr; }

html[data-fontsize="xlarge"]  .grid-3 { grid-template-columns: repeat(2, 1fr); }
html[data-fontsize="xxlarge"] .grid-3 { grid-template-columns: 1fr; }

html[data-fontsize="xxlarge"] .grid-2 { grid-template-columns: 1fr; }

/* Mood grid */
html[data-fontsize="large"]   .mood-grid { grid-template-columns: repeat(3, 1fr); }
html[data-fontsize="xlarge"]  .mood-grid { grid-template-columns: repeat(3, 1fr); }
html[data-fontsize="xxlarge"] .mood-grid { grid-template-columns: repeat(2, 1fr); }

/* Admin stat row */
html[data-fontsize="xlarge"]  .admin-stat-row { grid-template-columns: repeat(2, 1fr); }
html[data-fontsize="xxlarge"] .admin-stat-row { grid-template-columns: 1fr; }

/* Topbar height */
html[data-fontsize="xlarge"]  .topbar { height: 72px; }
html[data-fontsize="xxlarge"] .topbar { height: 80px; }
html[data-fontsize="xxlarge"] .divider-v { display: none; }

/* Auth pages — hide left panel at very large sizes (unusable) */
html[data-fontsize="xlarge"]  .auth-panel       { display: none; }
html[data-fontsize="xxlarge"] .auth-panel       { display: none; }
html[data-fontsize="xlarge"]  .auth-page        { grid-template-columns: 1fr; }
html[data-fontsize="xxlarge"] .auth-page        { grid-template-columns: 1fr; }
html[data-fontsize="xlarge"]  .auth-logo-mobile { display: block; }
html[data-fontsize="xxlarge"] .auth-logo-mobile { display: block; }

/* Overflow safety — prevent text breaking cards */
html[data-fontsize="xlarge"]  .card,
html[data-fontsize="xxlarge"] .card {
    word-break: break-word;
    overflow-wrap: break-word;
}
html[data-fontsize="xlarge"]  .welcome-banner p,
html[data-fontsize="xxlarge"] .welcome-banner p  { max-width: 100%; }
html[data-fontsize="xxlarge"] .welcome-banner h2 { font-size: 1.5rem; }
html[data-fontsize="xxlarge"] .section-title     { font-size: 1.3rem; }
html[data-fontsize="xxlarge"] .stat-value        { font-size: 1.5rem; }
html[data-fontsize="xxlarge"] .btn               { white-space: normal; text-align: center; line-height: 1.3; }
html[data-fontsize="xlarge"]  .table-wrapper,
html[data-fontsize="xxlarge"] .table-wrapper     { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ══════════════════════════════════════════
   MOBILE — sidebar always off-canvas
   Overrides any desktop font-size width rules
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    html[data-fontsize="medium"]  .sidebar,
    html[data-fontsize="large"]   .sidebar,
    html[data-fontsize="xlarge"]  .sidebar,
    html[data-fontsize="xxlarge"] .sidebar {
        width: 248px;
        transform: translateX(-100%);
    }
    html[data-fontsize="medium"]  .sidebar.open,
    html[data-fontsize="large"]   .sidebar.open,
    html[data-fontsize="xlarge"]  .sidebar.open,
    html[data-fontsize="xxlarge"] .sidebar.open {
        transform: translateX(0);
    }
    html[data-fontsize="medium"]  .main-content,
    html[data-fontsize="large"]   .main-content,
    html[data-fontsize="xlarge"]  .main-content,
    html[data-fontsize="xxlarge"] .main-content {
        margin-left: 0;
    }
}