/* portal_theme.css — shared modern design system for the portal pages.
 * Used by: portal.php, admin_portal_users.php, admin_portal_files.php,
 *          admin_portal_activity.php, admin_portal_security.php.
 * 2026-05-17 — Claude Opus 4.7
 */

:root {
    /* Brand — v3 (30/08/2026): חום-שמנת לפי בקשת אורן — "צבע שמנת בהיר
     * עם קוים עדינים וכתב כהה... שכל האתר יהיה בגוונים חום שמנת".
     * המבטא: חום-קפה; ה-CTA הראשי: טרקוטה. כל הזוגות טקסט/רקע נבדקו
     * ל-WCAG AA (לבן על --brand: ‏7.5:1, על --warm: ‏5.7:1). */
    --brand: #6B4F2F;            /* walnut / coffee */
    --brand-dark: #574025;
    --brand-darker: #46331E;
    --brand-deepest: #2A1F12;
    --brand-light: #E5D9C3;      /* cream-brown tint line */
    --brand-tint: #F3EBDD;       /* light cream tint */
    --brand-il: #0038B8;         /* Israeli flag blue — for the SVG flag */
    --accent: #8A6D4B;           /* tan — quiet secondary accent */
    --accent-light: #EFE6D4;
    --accent-dark: #6F5638;
    --highlight: #D9A441;        /* warm amber — "suspicious" attention */
    --warm: #A64B2A;             /* terracotta — primary CTA */
    --warm-dark: #8A3D21;
    --warm-light: #E8C9B4;
    --warm-tint: #F8EFE7;
    --warm-fg: #6E3014;          /* readable text on warm-tint */

    /* Surface / background — שמנת בהירה */
    --bg: #FAF6EF;
    --bg-gradient: linear-gradient(180deg, #FBF8F2 0%, #F3EBDD 100%);
    --surface: #FFFCF5;
    --surface-2: #F7F1E6;
    --surface-3: #EFE7D8;

    /* Text — חום כהה עמוק (14.2:1 על הרקע) */
    --text: #2E2318;
    --text-2: #4A3B2A;
    --text-mut: #6F604B;
    --text-faint: #9A8C76;

    /* Lines — "קוים עדינים" בגוון חום-אפרפר בהיר */
    --border: #E6DCC8;
    --border-2: #D3C5AB;

    /* Semantic */
    --success: #059669;          /* Emerald 600 */
    --success-bg: #D1FAE5;       /* Emerald 100 */
    --success-fg: #065F46;       /* Emerald 800 */
    --danger: #DC2626;           /* Red 600 */
    --danger-bg: #FEE2E2;        /* Red 100 */
    --danger-fg: #991B1B;        /* Red 800 */
    --warn: #D97706;             /* Amber 600 */
    --warn-bg: #FEF3C7;          /* Amber 100 */
    --warn-fg: #92400E;          /* Amber 800 */
    --info-bg: #EFE6D4;      /* 30/08: היה כחול — אין כחול בפלטה */
    --info-fg: #5C4630;

    /* Spacing — 30/08/2026: הוקטן בעקבות משוב "פינות מעוגלות מדי";
       סולם מאופק יותר, בלי לשבור את המדרג בין הרכיבים */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 12px;
    --r-pill: 9999px;

    /* Shadows — קלים, בגוון חום חמים כדי לא "להכחיל" את השמנת */
    --shadow-1: 0 1px 2px 0 rgba(46,35,24,0.05), 0 1px 3px 0 rgba(46,35,24,0.07);
    --shadow-2: 0 2px 6px -1px rgba(46,35,24,0.08), 0 1px 3px -1px rgba(46,35,24,0.05);
    --shadow-3: 0 8px 20px -8px rgba(46,35,24,0.12), 0 4px 8px -4px rgba(46,35,24,0.05);
    --shadow-brand: 0 2px 8px -2px rgba(107,79,47,0.25);
    --ring-brand: 0 0 0 4px rgba(107,79,47,0.25);
    --ring-accent: 0 0 0 4px rgba(138,109,75,0.25);
    --ring-danger: 0 0 0 4px rgba(220,38,38,0.20);

    /* Bridge tokens for the legacy "blue 2010s" pages (tools/contact/privacy/
     * terms/accessibility). They still reference the old blue/off-white/silver
     * names in inline styles; mapping them here re-skins those pages to the
     * indigo brand AND lets them inherit dark-mode automatically. 2026-06-15
     *
     * 30/08/2026: אסור לכתוב כאן שמות טוקנים עם כוכבית — הצירוף "כוכבית
     * לוכסן" בתוך הטקסט סגר את ההערה מוקדם והפרסר בלע את השורה הבאה.
     * התוצאה בייצור: הכותרת והסרגל בכל הדפים הוותיקים איבדו את הרקע
     * (טקסט לבן על לבן), כי ההכרזה שאחרי ההערה נזרקה. אומת ב-headless. */
    --blue-dark:   var(--brand-darker);   /* was #003399 */
    --blue-mid:    var(--brand-dark);     /* was #0047CC */
    --blue-accent: var(--brand);          /* was #2979FF */
    --white:       var(--surface);        /* was #FFFFFF */
    --off-white:   var(--bg);             /* was #F0F4FF */
    --silver:      var(--border);         /* was #C8D4F0 */
    --text-dark:   var(--text);           /* was #001A66 */
    --green:       var(--success);
    --red:         var(--danger);
    --amber:       var(--warn);
}

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

html { font-size: 17px; }     /* Slightly larger base for accessibility */
body {
    font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text);
    direction: rtl;
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ───────── Top header — bold gradient + brand glow ───────── */
/* 30/08/2026: הוסר זוהר הציאן הרדיאלי והוצר טווח הגרדיאנט — משוב
   "גרדיאנטים צעקניים"; שני צעדי אינדיגו סמוכים נקראים כמשטח אחד עמוק */
.app-header {
    background: linear-gradient(135deg, var(--brand-deepest) 0%, var(--brand-darker) 100%);
    color: #fff;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-1);
    position: sticky; top: 0; z-index: 50;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.app-header h1 {
    font-size: 1.35rem;
    font-weight: 700;
    flex: 1;
    letter-spacing: -0.01em;
}
.app-header h1 .sub {
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255,255,255,0.78);
    margin-right: 10px;
}
.app-header .greeting {
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
}

/* Nav inside header */
.app-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.app-nav a, .app-nav button.navbtn {
    background: rgba(255,255,255,0.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 7px 14px;
    border-radius: var(--r-sm);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, transform 0.15s;
}
.app-nav a:hover, .app-nav button.navbtn:hover { background: rgba(255,255,255,0.22); }
.app-nav a.active, .app-nav button.navbtn.active {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.45);
    font-weight: 600;
}

/* 30/08/2026: קישורי תוכן בלי class קיבלו עד עכשיו את כחול ברירת-המחדל
   של הדפדפן (rgb(0,0,238) ביום, ‎#9E9EFF בלילה) — הסריקה תפסה אותם
   ב-support/remote. הסלקטור מוגבל ל-main כדי לא לגעת בקישורי סרגל/פוטר. */
main a:not([class]) { color: var(--brand-dark); }
main a:not([class]):hover { color: var(--brand); }

/* ───────── מתג מצב כהה (theme_boot.js מזריק את הכפתור) ─────────
   דו-מצבי לפי בקשת אורן: לחיצה → כהה, לחיצה נוספת → חזרה לבהיר. */
.home-nav .theme-toggle {
    margin-inline-start: auto;
    align-self: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff;
    border-radius: var(--r-sm);
    min-width: 44px; min-height: 38px;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px 12px;
}
.home-nav .theme-toggle:hover { background: rgba(255,255,255,0.22); }
.home-nav .theme-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* דפים בלי הסרגל המשותף: כפתור צף למטה בקצה ההתחלה (ימין ב-RTL) —
   לחצן הנגישות הכחול מחזיק את שמאל-למטה, אין התנגשות. */
.theme-toggle--float {
    position: fixed;
    inset-block-end: 20px;
    inset-inline-start: 20px;
    z-index: 99997;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 2px solid var(--border-2, #D3C5AB);
    background: var(--surface, #FFFCF5);
    color: var(--text, #2E2318);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-2, 0 2px 8px rgba(0,0,0,0.2));
}
.theme-toggle--float:hover { background: var(--surface-2, #F7F1E6); }
.theme-toggle--float:focus-visible { outline: 3px solid var(--brand, #6B4F2F); outline-offset: 2px; }

/* ───────── Layout ───────── */
main {
    max-width: 1180px;
    margin: 28px auto;
    padding: 0 22px 80px;
}
main.wide { max-width: 1380px; }
main.narrow { max-width: 760px; }

/* ───────── Cards — softer shadow + hover lift on linked cards ───────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-1);
    margin-bottom: 22px;
    transition: box-shadow 0.2s, transform 0.2s;
}
/* 30/08/2026: וריאנטים בגוון אחיד שקט במקום גרדיאנטים — מראה בוגר */
.card-soft   { background: var(--brand-tint); border-color: var(--brand-light); }
.card-warn   { background: #FFFBEB; border-color: #FCD34D; }
.card-danger { background: #FEF2F2; border-color: #FCA5A5; }
.card-accent { background: var(--accent-light); border-color: var(--accent); }
.card-tip    { background: var(--warm-tint); border-color: var(--warm-light); border-right: 3px solid var(--warm); }
.card-tip h2 {
    border-bottom-color: var(--warm-light);
    border-right-color: var(--warm);
}

/* Badges in warm tone */
.b-orange { background: var(--warm-light); color: var(--warm-fg); }
.text-warm { color: var(--warm-dark); font-weight: 600; }

/* ───────── Top stripe — 30/08/2026: פס "זריחה" כתום-צהוב הוחלף בקו
   מותג דק ושקט; קשת צבעים מעל כל דף היא בדיוק ה"צבעוניות העודפת"
   שהמשוב הצביע עליה ───────── */
.app-top-stripe {
    height: 3px;
    background: var(--brand);
}

/* Warm action chip (used for icon backgrounds on the homepage) */
/* 30/08/2026: השבבים בשישה גרדיאנטים צבעוניים עם סיבוב בהובר היו
   מוקד ה"ילדותיות". האייקונים נשארים (אורן מנווט לפיהם!) — רק הרקע
   נרגע: גוון תשתית אחיד ועדין לכולם, בלי זוהר ובלי אנימציית סיבוב. */
.icon-chip {
    width: 60px;
    height: 60px;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    margin-bottom: 14px;
    background: var(--brand-tint);
    border: 1px solid var(--brand-light);
    transition: transform 0.2s;
}
.icon-chip.warm, .icon-chip.brand, .icon-chip.cyan,
.icon-chip.amber, .icon-chip.green, .icon-chip.rose {
    background: var(--brand-tint);
    border-color: var(--brand-light);
    color: inherit;
    box-shadow: none;
}
.action-card:hover .icon-chip { transform: scale(1.04); }

/* Warm button variant — 30/08/2026: הכפתור הכתום נשאר כתום (זו קריאת
   הפעולה הראשית בדף הבית, ואורן מזהה אותה בצבע) אבל שטוח ורגוע:
   מילוי אחיד, בלי מדף תלת-ממד, בלי צל-טקסט */
.btn-warm {
    background: var(--warm);
    color: #fff;
    box-shadow: var(--shadow-1);
}
.btn-warm:hover {
    background: var(--warm-dark);
    box-shadow: var(--shadow-2);
}
.btn-warm:active {
    transform: translateY(1px);
    background: var(--warm-dark);
    box-shadow: none;
}

/* 30/08/2026: כותרת כרטיס נקייה — בלי פס גרדיאנט ובלי קו תחתון צבעוני
   כפול. נשאר סימן זיהוי אחד: פס מבטא דק בצד ימין + קו הפרדה עדין */
.card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: -28px -28px 18px;     /* extend to card edges, framed */
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--border);
    border-right: 3px solid var(--brand);
    border-top-right-radius: var(--r-lg);
    border-top-left-radius: var(--r-lg);
    position: relative;
}
.card-warn h2 {
    border-bottom-color: #FDE68A;
    border-right-color: var(--warn);
}
.card-danger h2 {
    border-bottom-color: #FECACA;
    border-right-color: var(--danger);
}
.card .card-desc {
    color: var(--text-mut);
    font-size: 0.95rem;
    margin-bottom: 18px;
    line-height: 1.6;
}
.card-divider { height: 1px; background: var(--border); margin: 20px 0; }

/* Inline section heading */
.section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 18px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ───────── Forms ───────── */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }

label {
    font-size: 0.9rem;
    color: var(--text-2);
    font-weight: 600;
}
.label-sub {
    font-size: 0.8rem;
    color: var(--text-mut);
    font-weight: 400;
    margin-right: 4px;
}

input[type=text], input[type=password], input[type=number],
input[type=email], input[type=datetime-local], select, textarea {
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--text);
    padding: 11px 14px;
    background: var(--surface);
    border: 1.5px solid var(--border-2);
    border-radius: var(--r-sm);
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring-brand);
}
input[type=file] {
    font-family: inherit;
    width: 100%;
    padding: 9px 12px;
    background: var(--surface);
    border: 1.5px dashed var(--border-2);
    border-radius: var(--r-sm);
    cursor: pointer;
}
input[type=file]::file-selector-button {
    border: none;
    background: var(--brand);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--r-xs);
    font-weight: 600;
    cursor: pointer;
    margin-inline-end: 8px;
}

/* ───────── Buttons — 30/08/2026: שפה שטוחה ומקצועית ─────────
   הכפתורים ה"תלת-ממדיים הנלחצים" (מדף צל קשיח, גרדיאנט, צל-טקסט,
   קפיצת 3px) היו מוקד מרכזי במשוב "נראה ילדותי". גדלי המגע והריווח
   נשמרו במלואם — נגישות לא זזה; רק שפת הצורה התבגרה: מילוי אחיד,
   מעבר עדין בהובר, לחיצה של פיקסל אחד. */
.btn, button.btn, a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.1;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    user-select: none;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s, transform 0.08s ease;
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-brand);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-1);
}
.btn-primary:hover  { background: var(--brand-dark); box-shadow: var(--shadow-2); }
.btn-primary:active { background: var(--brand-darker); box-shadow: none; }
.btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background: var(--surface);
    color: var(--brand);
    border-color: var(--border-2);
    box-shadow: var(--shadow-1);
}
.btn-secondary:hover  { background: var(--brand-tint); border-color: var(--brand); }
.btn-secondary:active { background: var(--brand-tint); box-shadow: none; }

.btn-ghost {
    background: transparent;
    color: var(--brand);
    border-color: transparent;
    box-shadow: none;
}
.btn-ghost:hover { background: var(--brand-tint); }

.btn-danger {
    background: var(--danger);
    color: #fff;
    box-shadow: var(--shadow-1);
}
.btn-danger:hover  { background: #B91C1C; box-shadow: var(--shadow-2); }
.btn-danger:active { background: #991B1B; box-shadow: none; }

.btn-danger-soft {
    background: var(--danger-bg);
    color: var(--danger-fg);
    border-color: #FCA5A5;
    box-shadow: none;
}
.btn-danger-soft:hover  { background: #FECACA; border-color: #F87171; }
.btn-danger-soft:active { background: #FECACA; }

.btn-success {
    background: var(--success);
    color: #fff;
    box-shadow: var(--shadow-1);
}
.btn-success:hover  { background: #047857; box-shadow: var(--shadow-2); }
.btn-success:active { background: #065F46; box-shadow: none; }

.btn-sm {
    padding: 8px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--r-sm);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.1rem;
    border-radius: var(--r-md);
}
.btn-block { width: 100%; }

/* ───────── Badges & chips ───────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.b-green   { background: var(--success-bg); color: var(--success-fg); }
.b-red     { background: var(--danger-bg);  color: var(--danger-fg); }
.b-yellow  { background: var(--warn-bg);    color: var(--warn-fg); }
.b-blue    { background: var(--info-bg);    color: var(--info-fg); }
.b-gray    { background: #EFE7D8;           color: #5A4A38; }
.b-purple  { background: #EFE6D4;           color: #5C4630; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-2);
    margin: 2px;
}
.chip-brand { background: var(--brand-tint); border-color: var(--brand-light); color: var(--brand-darker); }

/* ───────── Tables ───────── */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
thead th {
    background: var(--surface-2);
    color: var(--text-2);
    text-align: right;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--text);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }

.col-pick { width: 38px; text-align: center; }
.col-actions { white-space: nowrap; }

/* ───────── Alerts ───────── */
.alert {
    border-radius: var(--r-md);
    padding: 14px 18px;
    margin-bottom: 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.96rem;
    line-height: 1.55;
}
.alert-ok    { background: var(--success-bg); color: var(--success-fg); border: 1px solid #6EE7B7; }
.alert-err   { background: var(--danger-bg);  color: var(--danger-fg);  border: 1px solid #FCA5A5; }
.alert-warn  { background: var(--warn-bg);    color: var(--warn-fg);    border: 1px solid #FCD34D; }
.alert-info  { background: var(--info-bg);    color: var(--info-fg);    border: 1px solid #D9BE94; }
.alert-tip   { background: linear-gradient(135deg, var(--warm-tint), #FFFFFF); color: var(--warm-fg); border: 1px solid var(--warm-light); }
.alert-tip .icon { color: var(--warm); }
.alert .icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }

/* ───────── Empty state ───────── */
.empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-mut);
}
.empty .icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }
.empty .title { font-size: 1.05rem; color: var(--text-2); font-weight: 600; margin-bottom: 6px; }
.empty .desc { font-size: 0.92rem; }

/* ───────── Stat tiles — punchier, with optional gradient text ───────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 20px 22px;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}
/* 30/08/2026: טקסט-גרדיאנט וגרדיאנטים ברקע הוחלפו בצבע אחיד — האריחים
   שומרים על ההבחנה הצבעונית (מותג/סכנה/חם) בפס העליון ובמספר בלבד */
.stat-tile::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--brand);
    opacity: 0;
    transition: opacity 0.2s;
}
.stat-tile:hover {
    box-shadow: var(--shadow-2);
    border-color: var(--brand-light);
}
.stat-tile:hover::before { opacity: 1; }
.stat-tile .val { font-size: 1.85rem; font-weight: 700; color: var(--text); line-height: 1.05; letter-spacing: -0.02em; }
.stat-tile .lbl { font-size: 0.88rem; color: var(--text-mut); margin-top: 6px; }
.stat-tile.brand {
    background: var(--brand-tint);
    border-color: var(--brand-light);
}
.stat-tile.brand .val { color: var(--brand-darker); }
.stat-tile.brand::before { opacity: 1; }
.stat-tile.danger { background: var(--danger-bg); border-color: #FCA5A5; }
.stat-tile.danger .val { color: var(--danger); }
.stat-tile.danger::before { background: var(--danger); opacity: 1; }
.stat-tile.warm   { background: var(--warm-tint); border-color: var(--warm-light); }
.stat-tile.warm .val { color: var(--warm-dark); }
.stat-tile.warm::before { background: var(--warm); opacity: 1; }

/* ───────── User cards (admin) ───────── */
.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.user-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--text);
    transition: all 0.15s;
    cursor: pointer;
    text-align: right;
}
.user-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-2);
}
.user-card.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand-darker);
    box-shadow: var(--shadow-1);
}
.user-card.active .uname { color: #fff; }
.user-card.active .ustats { color: rgba(255,255,255,0.85); }
.user-card .uname {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.user-card .ustats {
    font-size: 0.82rem;
    color: var(--text-mut);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ───────── Dropzone ───────── */
.dropzone {
    border: 2px dashed var(--border-2);
    border-radius: var(--r-lg);
    padding: 36px 24px;
    text-align: center;
    background: var(--surface-2);
    transition: all 0.18s;
    cursor: pointer;
}
.dropzone:hover, .dropzone.dragover {
    border-color: var(--brand);
    background: var(--brand-tint);
}
.dropzone .icon { font-size: 2.6rem; margin-bottom: 10px; opacity: 0.8; }
.dropzone .title { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.dropzone .desc { font-size: 0.88rem; color: var(--text-mut); margin-top: 6px; }
.dropzone .desc strong { color: var(--brand); }
.dropzone input[type=file] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
}
.dropzone-wrap { position: relative; }

.file-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.file-pill {
    background: var(--brand-tint);
    color: var(--brand-darker);
    border: 1px solid var(--brand-light);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ───────── Helper text ───────── */
.muted { color: var(--text-mut); }
.small { font-size: 0.82rem; color: var(--text-mut); }
.tiny  { font-size: 0.72rem; color: var(--text-faint); }
.mono  { font-family: ui-monospace, "SF Mono", "Menlo", monospace; font-size: 0.88rem; }
.kbd   { font-family: ui-monospace, monospace; background: var(--surface-3); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; font-size: 0.8rem; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.spacer-md { height: 14px; }
.spacer-lg { height: 28px; }
.text-success { color: var(--success); font-weight: 600; }
.text-danger  { color: var(--danger);  font-weight: 600; }
.text-warn    { color: var(--warn);    font-weight: 600; }

/* ───────── Checkbox lists ───────── */
.check-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    background: var(--surface-2);
}
.check-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    cursor: pointer;
    border-radius: var(--r-xs);
    font-weight: 500;
    color: var(--text-2);
    transition: background 0.1s;
}
.check-list label:hover { background: var(--brand-tint); }
input[type=checkbox] { transform: scale(1.25); accent-color: var(--brand); cursor: pointer; }
input[type=radio]    { transform: scale(1.25); accent-color: var(--brand); cursor: pointer; }

/* ───────── Page footer ───────── */
.app-footer {
    background: #241C15;
    color: #D8CDBD;
    padding: 26px 20px;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 60px;
}
.app-footer strong { color: #fff; }
.app-footer a { color: #D9BE94; text-decoration: none; margin: 0 8px; }
.app-footer a:hover { color: #fff; text-decoration: underline; }

/* ───────── Bulk-download progress UI (portal page) ───────── */
.bulk-bar {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin: 14px 0 18px;
    padding: 14px 16px;
    background: var(--brand-tint);
    border: 1.5px solid var(--brand-light);
    border-radius: var(--r-md);
}
.bulk-progress-bar {
    width: 100%;
    height: 12px;
    background: var(--surface-3);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin: 10px 0 16px;
}
.bulk-progress-fill {
    height: 100%; width: 0;
    background: var(--brand);
    transition: width 0.3s;
    border-radius: var(--r-pill);
}
.bulk-file-status {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    margin-bottom: 6px;
    font-size: 0.92rem;
    border: 1px solid transparent;
    background: var(--surface-2);
}
.bulk-file-status.pending { background: var(--surface-3); color: var(--text-mut); }
.bulk-file-status.running { background: var(--info-bg);   color: var(--info-fg); border-color: #D9BE94; }
.bulk-file-status.ok      { background: var(--success-bg); color: var(--success-fg); border-color: #6EE7B7; }
.bulk-file-status.err     { background: var(--danger-bg);  color: var(--danger-fg);  border-color: #FCA5A5; }
.bulk-file-icon { width: 24px; text-align: center; font-size: 1.1rem; }
.bulk-file-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-file-err { font-size: 0.82rem; opacity: 0.85; }
.bulk-summary {
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: var(--r-md);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bulk-summary.all-ok  { background: var(--success-bg); color: var(--success-fg); border: 1.5px solid #6EE7B7; }
.bulk-summary.partial { background: var(--danger-bg);  color: var(--danger-fg);  border: 1.5px solid #FCA5A5; }
.retry-btn {
    padding: 12px 22px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    transition: background 0.15s;
}
.retry-btn:hover { background: #B91C1C; }

/* ───────── Toolbar ───────── */
.toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

/* ───────── Step indicators ───────── */
.steps {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
}
.step {
    flex: 1;
    background: var(--surface-2);
    color: var(--text-mut);
    padding: 14px 18px;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    border-right: 1px solid var(--border);
    position: relative;
}
.step:last-child { border-right: none; }
.step.current { background: var(--brand); color: #fff; }
.step.done    { background: var(--success-bg); color: var(--success-fg); }
.step .step-num {
    display: inline-flex;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    margin-inline-end: 6px;
}
.step.current .step-num { background: rgba(255,255,255,0.3); }

/* ───────── Renovation notice (top strip on every portal page) ───────── */
.renov-notice {
    background: var(--brand-tint);
    border-bottom: 1px solid var(--brand-light);
    color: var(--text-2);
    padding: 8px 18px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
.renov-notice .pill {
    background: var(--brand);
    color: #fff;
    padding: 3px 11px;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 700;
}
.renov-notice a {
    color: var(--brand-darker);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}
.renov-notice a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* ───────── Tiny utility ───────── */
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-sm { gap: 8px; }
.gap-md { gap: 14px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 28px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 28px; }
.hide  { display: none; }

/* ───────── Responsive ───────── */
@media (max-width: 768px) {
    html { font-size: 16px; }
    .app-header { padding: 14px 16px; flex-direction: column; align-items: stretch; }
    .app-header h1 { font-size: 1.15rem; text-align: center; }
    .app-header h1 .sub { display: block; margin: 4px 0 0; }
    .app-nav { justify-content: center; gap: 5px; }
    .app-nav a, .app-nav button.navbtn { padding: 7px 11px; font-size: 0.85rem; flex: 1 1 auto; text-align: center; min-width: 0; }
    main { padding: 0 14px 60px; margin: 18px auto; }
    .card { padding: 18px; }
    .card h2 { margin: -18px -18px 14px; padding: 12px 16px; font-size: 1.1rem; }
    .steps { flex-direction: column; }
    .step { border-right: none; border-bottom: 1px solid var(--border); }
    .user-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-tile { padding: 14px; }
    .stat-tile .val { font-size: 1.45rem; }
    .form-row { grid-template-columns: 1fr; }
    .btn, button.btn, a.btn { padding: 12px 20px; font-size: 1rem; width: 100%; }
    .btn-sm { padding: 8px 14px; font-size: 0.88rem; width: auto; }
    .btn-block { width: 100%; }
    table { font-size: 0.85rem; }
    thead th { padding: 8px 6px; font-size: 0.78rem; }
    tbody td { padding: 9px 6px; }
    .renov-notice { font-size: 0.8rem; padding: 7px 12px; gap: 6px; }
    .renov-notice .pill { font-size: 0.72rem; padding: 2px 9px; }
    /* Disable hover-lift on touch devices to avoid sticky hover */
    .btn:hover, .stat-tile:hover, .card:hover, .user-card:hover { transform: none; }
}
@media (max-width: 420px) {
    .stat-grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════
   DARK MODE — opt-in via the OS/browser preference (2026-06-15).
   Almost everything flows through the CSS tokens below, so re-pointing
   them to dark, WCAG-AA values re-skins the whole site (portal pages
   AND the legacy blue pages via the bridge tokens) automatically.
   A few hard-coded light gradients/whites are patched manually after.
   ════════════════════════════════════════════════════════════════ */
:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Brand — 30/08/2026: לילה חם — טאן בהיר כמבטא על חום-כהה עמוק,
     * ברוח השמנת של מצב היום (במקום האפור-כחול הקודם) */
    --brand:        #C9A87C;   /* light tan — accents & links on dark */
    --brand-dark:   #B08F63;
    --brand-darker: #85613B;   /* dual-duty like the old indigo: רקע לטקסט לבן
                                  (5.6:1) וגם צבע כותרות legacy על כהה (3.0:1,
                                  AA לטקסט גדול) — אסור להכהות בלי לבדוק את שניהם */
    --brand-deepest:#241B12;
    --brand-light:  #3E3122;   /* deep brown — used as a tint bg in dark */
    --brand-tint:   #2A2115;   /* subtle brand background */
    --accent:       #CBA97E;
    --accent-light: #3A2F1F;   /* tint bg */
    --accent-dark:  #B08F63;

    /* Surfaces / background — חום-כהה עמוק, ניגודיות חזקה נשמרת */
    --bg:           #171210;
    --bg-gradient:  linear-gradient(180deg, #171210 0%, #1E1813 100%);
    --surface:      #241C15;   /* card surface */
    --surface-2:    #2D231A;
    --surface-3:    #372C20;

    /* Text — bright warm on dark (AA+) */
    --text:        #F3EDE3;
    --text-2:      #D8CDBD;
    --text-mut:    #A79A87;
    --text-faint:  #7C7060;

    /* Lines */
    --border:      #45382A;
    --border-2:    #5A4A38;

    /* Semantic — lighter fills + light text so badges/alerts stay legible */
    --success:     #34D399;
    --success-bg:  #064E3B;    /* deep emerald */
    --success-fg:  #A7F3D0;    /* light emerald text */
    --danger:      #F87171;
    --danger-bg:   #7F1D1D;
    --danger-fg:   #FECACA;
    --warn:        #FBBF24;
    --warn-bg:     #78350F;
    --warn-fg:     #FDE68A;
    --info-bg:     #3E3122;
    --info-fg:     #E8DCC2;
    --warm-tint:   #2A1A0E;
    --warm-fg:     #E8C9B4;
    --warm-light:  #6E3014;

    /* Shadows — deeper, since light shadows vanish on dark */
    --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.40), 0 1px 3px 0 rgba(0,0,0,0.50);
    --shadow-2: 0 4px 8px -2px rgba(0,0,0,0.50), 0 2px 4px -1px rgba(0,0,0,0.40);
    --shadow-3: 0 14px 30px -8px rgba(0,0,0,0.60), 0 10px 14px -6px rgba(0,0,0,0.40);

    /* Bridge tokens re-resolve through the vars above; --white must become a
     * dark surface (a few legacy rules hard-set background:#fff via --white). */
    --white:     var(--surface);
    --off-white: var(--surface-2);
    --silver:    var(--border);
    --text-dark: var(--text);
  }

  /* ---- Patch hard-coded light fills that don't go through tokens ---- */

  /* 30/08/2026: הווריאנטים הבהירים הפכו שטוחים; המקבילות הכהות בהתאם */
  :root:not([data-theme="light"]) .card-soft { background: var(--brand-tint); }
  :root:not([data-theme="light"]) .card-warn { background: #3B2F0B; border-color: #92400E; }
  :root:not([data-theme="light"]) .card-danger { background: #3B1212; border-color: #7F1D1D; }
  :root:not([data-theme="light"]) .card-accent { background: var(--accent-light); }
  :root:not([data-theme="light"]) .card-tip { background: var(--warm-tint); }
  :root:not([data-theme="light"]) .card h2 .x, :root:not([data-theme="light"]) .card h2 { color: var(--text); }
  :root:not([data-theme="light"]) .card-warn h2 { border-bottom-color:#92400E; }
  :root:not([data-theme="light"]) .card-danger h2 { border-bottom-color:#7F1D1D; }

  /* Secondary button on dark surfaces */
  :root:not([data-theme="light"]) .btn-secondary { background: var(--surface-2); color: var(--brand); }
  :root:not([data-theme="light"]) .btn-secondary:hover { background: var(--brand-tint); }

  /* Stat tiles — flat dark fills */
  :root:not([data-theme="light"]) .stat-tile.brand { background: var(--brand-tint); }
  :root:not([data-theme="light"]) .stat-tile.brand .val { color: var(--brand); }
  :root:not([data-theme="light"]) .stat-tile.danger { background: var(--danger-bg); }
  :root:not([data-theme="light"]) .stat-tile.warm { background: var(--warm-tint); }
  :root:not([data-theme="light"]) .stat-tile.warm .val { color: var(--warn); }

  /* Footer already dark — keep, but lift link contrast a touch */
  :root:not([data-theme="light"]) .app-footer a, :root:not([data-theme="light"]) .home-footer a { color: #D9BE94; }
  :root:not([data-theme="light"]) .app-footer a:hover, :root:not([data-theme="light"]) .home-footer a:hover { color: #fff; }

  /* Inputs: ensure dark field bg (some legacy rules set background:#fff) */
  :root:not([data-theme="light"]) input[type=text], :root:not([data-theme="light"]) input[type=password], :root:not([data-theme="light"]) input[type=number], :root:not([data-theme="light"]) input[type=email], :root:not([data-theme="light"]) input[type=url], :root:not([data-theme="light"]) input[type=search], :root:not([data-theme="light"]) input[type=datetime-local], :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea {
    background: var(--surface-2);
    color: var(--text);
  }
  :root:not([data-theme="light"]) input::placeholder, :root:not([data-theme="light"]) textarea::placeholder { color: var(--text-mut); }

  /* The accessibility floating panel hard-codes white — darken it */
  :root:not([data-theme="light"]) #a11y-panel { background: var(--surface); color: var(--text); border-color: var(--border); }
  :root:not([data-theme="light"]) #a11y-panel button.a11y-opt { background: var(--surface-2); color: var(--text); border-color: var(--border); }
  :root:not([data-theme="light"]) #a11y-panel .a11y-fontrow button { background: var(--surface-2); color: var(--text); border-color: var(--border); }

  /* 30/08/2026: בלילה --brand הוא טאן בהיר (מבטא/קישורים), אבל רכיבים
   * שמניחים "רקע מותג + טקסט לבן" צריכים חום מלא — אחרת לבן-על-טאן
   * נופל מ-AA. הקבוצה כאן מקבלת את החום הבינוני (לבן עליו 5.6:1). */
  :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .call-btn--primary, :root:not([data-theme="light"]) .user-card.active, :root:not([data-theme="light"]) .step.current, :root:not([data-theme="light"]) .renov-notice .pill { background: var(--brand-darker); }
  :root:not([data-theme="light"]) .btn-primary:hover, :root:not([data-theme="light"]) .call-btn--primary:hover { background: #6E5030; }
  :root:not([data-theme="light"]) .btn-primary:active, :root:not([data-theme="light"]) .call-btn--primary:active { background: #5C4630; }
  :root:not([data-theme="light"]) .filters a.active { background: var(--brand-darker) !important; }
  :root:not([data-theme="light"]) .stat-tile.brand .val { color: var(--brand); }
}
/* עותק הבחירה-המפורשת — נוצר אוטומטית מהבלוק שמעל (dark_transform).
   עריכה: לערוך את בלוק ה-media ולהריץ שוב את הטרנספורם, או לערוך את שניהם. */

  :root[data-theme="dark"] {
    color-scheme: dark;

    /* Brand — 30/08/2026: לילה חם — טאן בהיר כמבטא על חום-כהה עמוק,
     * ברוח השמנת של מצב היום (במקום האפור-כחול הקודם) */
    --brand:        #C9A87C;   /* light tan — accents & links on dark */
    --brand-dark:   #B08F63;
    --brand-darker: #85613B;   /* dual-duty like the old indigo: רקע לטקסט לבן
                                  (5.6:1) וגם צבע כותרות legacy על כהה (3.0:1,
                                  AA לטקסט גדול) — אסור להכהות בלי לבדוק את שניהם */
    --brand-deepest:#241B12;
    --brand-light:  #3E3122;   /* deep brown — used as a tint bg in dark */
    --brand-tint:   #2A2115;   /* subtle brand background */
    --accent:       #CBA97E;
    --accent-light: #3A2F1F;   /* tint bg */
    --accent-dark:  #B08F63;

    /* Surfaces / background — חום-כהה עמוק, ניגודיות חזקה נשמרת */
    --bg:           #171210;
    --bg-gradient:  linear-gradient(180deg, #171210 0%, #1E1813 100%);
    --surface:      #241C15;   /* card surface */
    --surface-2:    #2D231A;
    --surface-3:    #372C20;

    /* Text — bright warm on dark (AA+) */
    --text:        #F3EDE3;
    --text-2:      #D8CDBD;
    --text-mut:    #A79A87;
    --text-faint:  #7C7060;

    /* Lines */
    --border:      #45382A;
    --border-2:    #5A4A38;

    /* Semantic — lighter fills + light text so badges/alerts stay legible */
    --success:     #34D399;
    --success-bg:  #064E3B;    /* deep emerald */
    --success-fg:  #A7F3D0;    /* light emerald text */
    --danger:      #F87171;
    --danger-bg:   #7F1D1D;
    --danger-fg:   #FECACA;
    --warn:        #FBBF24;
    --warn-bg:     #78350F;
    --warn-fg:     #FDE68A;
    --info-bg:     #3E3122;
    --info-fg:     #E8DCC2;
    --warm-tint:   #2A1A0E;
    --warm-fg:     #E8C9B4;
    --warm-light:  #6E3014;

    /* Shadows — deeper, since light shadows vanish on dark */
    --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.40), 0 1px 3px 0 rgba(0,0,0,0.50);
    --shadow-2: 0 4px 8px -2px rgba(0,0,0,0.50), 0 2px 4px -1px rgba(0,0,0,0.40);
    --shadow-3: 0 14px 30px -8px rgba(0,0,0,0.60), 0 10px 14px -6px rgba(0,0,0,0.40);

    /* Bridge tokens re-resolve through the vars above; --white must become a
     * dark surface (a few legacy rules hard-set background:#fff via --white). */
    --white:     var(--surface);
    --off-white: var(--surface-2);
    --silver:    var(--border);
    --text-dark: var(--text);
  }

  /* ---- Patch hard-coded light fills that don't go through tokens ---- */

  /* 30/08/2026: הווריאנטים הבהירים הפכו שטוחים; המקבילות הכהות בהתאם */
  :root[data-theme="dark"] .card-soft { background: var(--brand-tint); }
  :root[data-theme="dark"] .card-warn { background: #3B2F0B; border-color: #92400E; }
  :root[data-theme="dark"] .card-danger { background: #3B1212; border-color: #7F1D1D; }
  :root[data-theme="dark"] .card-accent { background: var(--accent-light); }
  :root[data-theme="dark"] .card-tip { background: var(--warm-tint); }
  :root[data-theme="dark"] .card h2 .x, :root[data-theme="dark"] .card h2 { color: var(--text); }
  :root[data-theme="dark"] .card-warn h2 { border-bottom-color:#92400E; }
  :root[data-theme="dark"] .card-danger h2 { border-bottom-color:#7F1D1D; }

  /* Secondary button on dark surfaces */
  :root[data-theme="dark"] .btn-secondary { background: var(--surface-2); color: var(--brand); }
  :root[data-theme="dark"] .btn-secondary:hover { background: var(--brand-tint); }

  /* Stat tiles — flat dark fills */
  :root[data-theme="dark"] .stat-tile.brand { background: var(--brand-tint); }
  :root[data-theme="dark"] .stat-tile.brand .val { color: var(--brand); }
  :root[data-theme="dark"] .stat-tile.danger { background: var(--danger-bg); }
  :root[data-theme="dark"] .stat-tile.warm { background: var(--warm-tint); }
  :root[data-theme="dark"] .stat-tile.warm .val { color: var(--warn); }

  /* Footer already dark — keep, but lift link contrast a touch */
  :root[data-theme="dark"] .app-footer a, :root[data-theme="dark"] .home-footer a { color: #D9BE94; }
  :root[data-theme="dark"] .app-footer a:hover, :root[data-theme="dark"] .home-footer a:hover { color: #fff; }

  /* Inputs: ensure dark field bg (some legacy rules set background:#fff) */
  :root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=password], :root[data-theme="dark"] input[type=number], :root[data-theme="dark"] input[type=email], :root[data-theme="dark"] input[type=url], :root[data-theme="dark"] input[type=search], :root[data-theme="dark"] input[type=datetime-local], :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
    background: var(--surface-2);
    color: var(--text);
  }
  :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--text-mut); }

  /* The accessibility floating panel hard-codes white — darken it */
  :root[data-theme="dark"] #a11y-panel { background: var(--surface); color: var(--text); border-color: var(--border); }
  :root[data-theme="dark"] #a11y-panel button.a11y-opt { background: var(--surface-2); color: var(--text); border-color: var(--border); }
  :root[data-theme="dark"] #a11y-panel .a11y-fontrow button { background: var(--surface-2); color: var(--text); border-color: var(--border); }

  /* 30/08/2026: בלילה --brand הוא טאן בהיר (מבטא/קישורים), אבל רכיבים
   * שמניחים "רקע מותג + טקסט לבן" צריכים חום מלא — אחרת לבן-על-טאן
   * נופל מ-AA. הקבוצה כאן מקבלת את החום הבינוני (לבן עליו 5.6:1). */
  :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .call-btn--primary, :root[data-theme="dark"] .user-card.active, :root[data-theme="dark"] .step.current, :root[data-theme="dark"] .renov-notice .pill { background: var(--brand-darker); }
  :root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .call-btn--primary:hover { background: #6E5030; }
  :root[data-theme="dark"] .btn-primary:active, :root[data-theme="dark"] .call-btn--primary:active { background: #5C4630; }
  :root[data-theme="dark"] .filters a.active { background: var(--brand-darker) !important; }
  :root[data-theme="dark"] .stat-tile.brand .val { color: var(--brand); }

/* ═════════════════════════════════════════════════════════════════
   HIGH-CONTRAST VIBRANT NAVIGATION & TABS (WCAG AAA Compliance)
   ════════════════════════════════════════════════════════════════ */

.app-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* 30/08/2026: הובר בגרדיאנט ציאן, קפיצות translateY וצללי זוהר הוחלפו
   במעברים שקטים — הניגודיות (WCAG) נשמרת, ה"וויברנטיות" ירדה.
   ה-!important נשאר כי הבלוק ההיסטורי למטה (תפריט "עוד") מסתמך על
   ניצחון הקסקדה הזה — ראה ההערה שם. */
.app-nav a, .app-nav button.navbtn {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.app-nav a:hover, .app-nav button.navbtn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.app-nav a.active, .app-nav button.navbtn.active {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    font-weight: 700 !important;
}

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 22px;
    background: var(--surface-2);
    padding: 12px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
}

.filters a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border: 1px solid var(--border-2) !important;
    padding: 10px 18px !important;
    border-radius: var(--r-sm) !important;
    text-decoration: none !important;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    box-shadow: none !important;
}

.filters a:hover {
    background: var(--brand-tint) !important;
    color: var(--brand-darker) !important;
    border-color: var(--brand) !important;
}

/* 30/08/2026: אקטיב במסנן = צבע המותג, לא ירוק — "פלטה מאופקת עם צבע
   מבטא אחד"; ירוק שמור לסמנטיקה של הצלחה בלבד */
.filters a.active {
    background: var(--brand) !important;
    color: #ffffff !important;
    border-color: var(--brand-darker) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   הזמנה לשיחה (call_ui.php)
   ─────────────────────────────────────────────────────────────────────
   למה נוסף: הרכיב הישן (public_meet.php) קידד קשיח פלטת ירוק #0F9D58 עם
   סגנון inline בתוך דפים בהירים בטון אינדיגו, ולכן "צעק" ולא נראה חלק
   מהאתר. כאן הכול טוקנים, כדי שהכרטיס יירש גם את מצב הלילה שמוגדר למעלה
   בלי שורה אחת נוספת.

   למה מחלקות ייעודיות (call-btn) ולא .btn/.btn-primary הקיימות: שלושה
   מהדפים המארחים — support.php, support_status.php ו-contact.php —
   מגדירים .btn מחדש ב-<style> מקומי שנטען אחרי הקובץ הזה, ולכן היו
   גוברים עליו וצובעים את אותו כפתור אחרת בכל דף. שם מחלקה נפרד מנטרל
   את ההתנגשות בלי לגעת בסגנון הקיים של אף דף.

   אין כאן style= inline ואין JS: ה-CSP הגלובלי הוא default-src 'self'
   עם script-src 'self'.
   ═══════════════════════════════════════════════════════════════════ */
.call-cta {
    max-width: 640px;
    margin: 30px auto;
    padding: 22px 20px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.call-cta__title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}
.call-cta__note {
    margin: 0 0 16px;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--text-mut);
}

/* הכפתור עצמו. inline-flex כדי שהאייקון והטקסט יישבו על אותו קו בסיס
   ולא "יקפצו" — ב-RTL האייקון יוצא לימין הטקסט מעצמו בזכות direction. */
.call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transform: translateY(0);
    transition: transform .08s ease, box-shadow .08s ease, background .15s;
}
/* האייקון יורש את צבע הטקסט, ולכן אינו זקוק לכלל צבע נפרד למצב לילה. */
.call-btn__icon { flex: 0 0 auto; }
.call-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-brand), 0 4px 0 rgba(0,0,0,0.12);
}

/* 30/08/2026: הושטח יחד עם .btn-primary — אותה שפה בדיוק */
.call-btn--primary {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-1);
}
.call-btn--primary:hover {
    background: var(--brand-dark);
    box-shadow: var(--shadow-2);
}
.call-btn--primary:active {
    transform: translateY(1px);
    background: var(--brand-darker);
    box-shadow: none;
}

/* פס הבעלים: משני ושקט בכוונה. הוא מופיע בתחתית כל דף ניהול, ואסור שיתחרה
   על תשומת הלב עם התוכן של הדף עצמו. */
.call-owner {
    margin: 18px 0;
    text-align: center;
}
.call-btn--owner {
    padding: 8px 14px;
    font-size: .88rem;
    font-weight: 600;
    border-radius: var(--r-sm);
    gap: 8px;
    background: var(--surface);
    color: var(--brand);
    border-color: var(--border-2);
    box-shadow: var(--shadow-1);
}
.call-btn--owner:hover {
    background: var(--brand-tint);
    border-color: var(--brand);
}
.call-btn--owner:active { transform: translateY(1px); }

/* מצב לילה: הטוקנים למעלה כבר מטפלים בכרטיס עצמו, אבל הגרדיאנט הלבן של פס
   הבעלים מקודד קשיח (כמו .btn-secondary המקורי) ולכן דורש תיקון ידני —
   בדיוק כמו שאר הגרדיאנטים הבהירים בקובץ הזה. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .call-btn--owner { background: var(--surface-2); }
    :root:not([data-theme="light"]) .call-btn--owner:hover { background: var(--surface-3); }
}
/* עותק הבחירה-המפורשת — נוצר אוטומטית מהבלוק שמעל (dark_transform).
   עריכה: לערוך את בלוק ה-media ולהריץ שוב את הטרנספורם, או לערוך את שניהם. */

    :root[data-theme="dark"] .call-btn--owner { background: var(--surface-2); }
    :root[data-theme="dark"] .call-btn--owner:hover { background: var(--surface-3); }

/* ═════════════════════════════════════════════════════════════════
   19/08/2026 — "מה שממתין לטיפול, מול העיניים"
   נוסף אחרי התקרית שבה 9 בקשות מנוי ממתינות ישבו מאחורי הקישור השביעי
   בסרגל הניהול ואורן לא מצא אותן. שלושה חלקים:
     1. תג מונה אדום על "🛠️ תמיכה" בסרגל (admin_nav.php)
     2. אריחי כרטיס התור כקישורים שלמים
     3. סרגל מובייל: תפריט "עוד" מקופל + כותרת לא-דביקה
   הבלוק יושב בסוף הקובץ בכוונה — כללי .app-nav a שלמעלה משתמשים
   ב-!important, ולכן רק מיקום מאוחר יותר בקסקדה גובר עליהם.
   ════════════════════════════════════════════════════════════════ */

/* ───────── 1. תג המונה בסרגל ───────── */
.app-nav a.nav-alert {
    background: #dc2626 !important;
    border-color: #fca5a5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.app-nav a.nav-alert:hover {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    border-color: #fecaca !important;
}
.app-nav .nav-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    margin-inline-start: 7px;
    border-radius: 999px;
    background: #ffffff;
    color: #b91c1c;
    font-weight: 800;
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: center;
    text-shadow: none;
}
/* פועם שלושה מחזורים ואז נעצר. אלמנט שפועם לנצח הופך לרעש שהעין
   מסננת — וזה בדיוק הכישלון שאנחנו מתקנים. */
@media (prefers-reduced-motion: no-preference) {
    .app-nav a.nav-alert { animation: oaNavPulse 1.15s ease-in-out 3; }
    @keyframes oaNavPulse {
        0%, 100% { box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
        50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0.38); }
    }
}

/* ───────── 2. אריחי כרטיס התור ───────── */
a.stat-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.stat-tile:hover, a.stat-tile:focus-visible { text-decoration: none; }
a.stat-tile:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.queue-card .stat-grid { margin-bottom: 0; }
.queue-clear {
    margin-top: 14px;
    padding: 9px 14px;
    border-radius: var(--r-sm);
    background: var(--success-bg);
    color: var(--success-fg);
    border: 1px solid #6EE7B7;
    font-weight: 600;
    font-size: 0.92rem;
}

/* ───────── 3. תפריט "עוד" בסרגל הניהול ───────── */
/* ה-checkbox עצמו לעולם אינו נראה, אבל נשאר במיקוד המקלדת כדי שאפשר
   יהיה לפתוח את הקבוצה גם בלי עכבר. */
.app-nav .nav-more-toggle {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* דסקטופ הוא ברירת המחדל, בלי media query, כדי שלא יישאר סדק בין
   768px ל-769px ברוחבי מסך שבריריים. הקבוצה שטוחה (display:contents על
   <span> — נתמך היטב בכל הדפדפנים), ולכן הסרגל נראה בדיוק כמו שנראה
   תמיד: שורה אחת של קישורים, בלי שבב "עוד" ובלי שום שינוי חזותי. */
.app-nav .nav-more-items { display: contents; }
.app-nav .nav-more-btn   { display: none; }

/* מובייל: ארבעת המשניים וההתנתקות מקופלים מאחורי שבב אחד.
   נמדד ב-375px: 11 קישורים בארבע שורות בתוך כותרת דביקה (~210px נעולים
   לצמיתות) הפכו לשמונה שבבים בשלוש שורות (~105px) בכותרת שנגללת החוצה.
   התוצאה הנמדדת: כרטיס "🔔 ממתין לטיפול" נראה במלואו במסך הראשון. */
@media (max-width: 768px) {
    /* כותרת דביקה בגובה ~210px נעלה שליש ממסך של 375×812 לצמיתות,
       ודחפה את התוכן האמיתי מתחת לקיפול. */
    .app-header { position: static; }

    /* השבבים היו רחבים מדי במובייל ונכנסו שניים לשורה. הסיבה: הכלל
       ב-.app-nav a שלמעלה מכריז padding:8px 16px !important וגובר על כלל
       המובייל הקיים (שאין בו !important). בלי הכפייה כאן הסרגל נשאר
       בארבע שורות והתוכן האמיתי נדחף מתחת לקיפול. */
    .app-nav { gap: 4px !important; }
    .app-nav a,
    .app-nav .nav-more-btn {
        padding: 6px 9px !important;
        font-size: 0.8rem !important;
    }

    .app-nav .nav-more-btn {
        display: inline-block;
        flex: 1 1 auto;
        cursor: pointer;
        text-align: center;
        background: rgba(255,255,255,0.12);
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 8px;
        padding: 7px 11px;
        font-size: 0.85rem;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        user-select: none;
    }
    .app-nav .nav-more-toggle:focus-visible + .nav-more-btn {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }
    .app-nav .nav-more-toggle:checked + .nav-more-btn {
        background: rgba(255,255,255,0.28);
    }

    .app-nav .nav-more-items { display: none; }
    .app-nav .nav-more-toggle:checked ~ .nav-more-items {
        display: flex;
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 5px;
    }
    .app-nav .nav-more-items a { flex: 1 1 auto; text-align: center; }
}


/* ── התנתקות ב-POST ─────────────────────────────────────────────────────
 * 01/09/2026 — הכרעת אורן: "כמה שיותר דפים בנויים על POST".
 * קישורי ההתנתקות היו <a href="?logout=1">, כלומר ניתנים להפעלה מדף זר
 * בתגית <img> או <a> (Logout-CSRF). הם הפכו לטפסי POST עם טוקן.
 * שני כללי העזר כאן מאפשרים לכפתור להיראות בדיוק כמו קישור הניווט:
 *   .navbtn-form  — display:contents מוציא את ה-<form> מהפריסה לגמרי,
 *                   כך שהכפתור נשאר ילד ישיר של ה-flex ולא נוצר רווח.
 *   button.navbtn — מאפס את ברירות המחדל של הדפדפן (גופן, רקע, גבול).
 * בורר .app-nav a הורחב למעלה ל-button.navbtn, ולכן המראה זהה. */
.navbtn-form { display: contents; }
button.navbtn {
    font: inherit;
    cursor: pointer;
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* ── שולה בולטת ונגישה (06/09/2026) ──────────────────────────────────────
   hero — הכרטיס בראש הפורטל ובמסך "הפנייה נקלטה". float — כפתור צף בכל דף
   של הפורטל. שניהם מקבלים את צבעי המותג הקיימים; אין כאן צבע חדש. */
.call-cta--hero {
    max-width: 760px;
    margin: 18px auto 24px;
    padding: 26px 22px;
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-2, var(--shadow-1));
}
.call-cta--hero .call-cta__title { font-size: 1.5rem; }
.call-cta--hero .call-cta__note  { font-size: 1rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.call-btn--hero { font-size: 1.15rem; padding: 14px 26px; min-height: 52px; }
.call-cta__off {
    max-width: 640px; margin: 14px auto; text-align: center;
    font-size: .92rem; color: var(--text-mut);
}
.call-float {
    /* 07/09 — אורן: "כפתור גדול ובולט... בכל דף של משתמש שעבר אימות".
       גדול, בפינה, לא נעלם בגלילה; במובייל — פס בתחתית המסך. */
    /* ‼️ 17/09/2026 — היה bottom:22 left:22, **בדיוק מתחת לכפתור הנגישות**
       (a11y.css: fixed, bottom 20, left 20, 66px, z-index 99998). כלומר
       הכפתור החשוב ביותר למנוי היה מוסתר תחת עיגול הנגישות, ונראה חתוך.
       מוזז ימינה כדי לפנות את העיגול; במובייל — מעל, לא לידו. */
    position: fixed; bottom: 22px; left: 104px; z-index: 1100;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 26px; border-radius: 999px;
    background: var(--brand); color: #fff; text-decoration: none;
    font-weight: 800; font-size: 1.2rem; line-height: 1.2;
    border: 3px solid rgba(255,255,255,.55);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.call-float:hover { background: var(--brand-darker, var(--brand)); color: #fff; transform: translateY(-1px); }
.call-float:focus-visible { outline: 3px solid var(--brand-darker, var(--brand)); outline-offset: 3px; }
@media (max-width: 640px) {
    .call-float { bottom: 98px; left: 12px; right: 12px; justify-content: center; padding: 16px 18px; font-size: 1.15rem; }
    body { padding-bottom: 84px; }   /* שלא יכסה את הכפתור האחרון בדף */
}
@media print { .call-float { display: none; } }
.call-cta__login a { color: var(--brand); font-weight: 800; text-decoration: underline; }

/* "📞 שיחת בירור עם אורן" (07/09/2026) — רק למי שאורן סימן. משני לשולה. */
.call-btn--owner-call {
    margin-top: 12px; background: transparent; color: var(--brand);
    border: 2px solid var(--brand); font-size: 1rem; padding: 10px 18px;
}
.call-btn--owner-call:hover { background: rgba(107, 79, 47, .08); color: var(--brand-darker, var(--brand)); }
.call-cta__owner-note { font-size: .85rem; color: var(--text-mut); margin: 8px auto 0; max-width: 520px; }