/* ══════════════════════════════════════════════════════════════════════════
   קפה שטמפפר — מערכת עיצוב (Shtampfer Sign)
   נטענת אחרי app.css ולכן גוברת עליו. הפלטה מהמותג של המועדון: זהב · דיו · קלף.
   זהב #b0884a · זהב עמוק #8a6a36 · זהב בהיר #dcbd80 · דיו #2a2017 · קלף #fffdf6
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. טוקנים ─────────────────────────── */
:root {
    --sh-gold: #b0884a;
    --sh-gold-deep: #8a6a36;
    --sh-gold-light: #dcbd80;
    --sh-gold-bright: #e9cd92;
    --sh-gold-50: #f7f1e4;
    --sh-ink: #2a2017;
    --sh-ink-soft: #6e6047;
    --sh-red: #b5533a;
    --sh-green: #7a9a5a;

    --primary: #8a6a36;
    --primary-hover: #6f5429;
    --primary-glow: rgba(176, 136, 74, .22);

    --brand-grad: linear-gradient(115deg, #8a6a36 0%, #b0884a 45%, #dcbd80 100%);
    --brand-grad-soft: linear-gradient(115deg, rgba(138,106,54,.12), rgba(176,136,74,.08) 55%, rgba(220,189,128,.14));

    --bg-body: #f3ecdc;
    --bg-sidebar: #fffdf6;
    --bg-card: #fffdf6;
    --bg-hover: #f8f2e6;
    --border: #e8dcc3;
    --border-light: #f1e8d5;
    --text-main: #2a2017;
    --text-sec: #4a3d28;
    --text-muted: #82745a;
    --hairline: rgba(138, 106, 54, .16);
    --radius-xl: 22px;
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 10px;

    --shadow: 0 1px 2px rgba(60, 40, 16, .06), 0 12px 28px -20px rgba(60, 40, 16, .45);
    --shadow-lg: 0 2px 6px rgba(60, 40, 16, .07), 0 28px 50px -26px rgba(60, 40, 16, .55);
    --shadow-brand: 0 12px 28px -14px rgba(138, 106, 54, .65);

    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --trans: all .22s cubic-bezier(.16, 1, .3, 1);
}

body.dark-mode {
    --primary: #d4a85f;
    --primary-hover: #e9cd92;
    --primary-glow: rgba(212, 168, 95, .25);
    --sh-gold-deep: #d4a85f;
    --sh-gold-light: #e9cd92;
    --sh-gold-50: #2b2118;
    --bg-body: #16110c;
    --bg-card: #221a12;
    --bg-sidebar: #1c150d;
    --bg-hover: #2e2419;
    --border: #3a2e21;
    --border-light: #2b2118;
    --text-main: #f5ecd9;
    --text-sec: #cdbfa3;
    --text-muted: #9a8a6c;
    --hairline: rgba(233, 205, 146, .12);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -18px rgba(0,0,0,.8);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 26px 50px -26px rgba(0,0,0,.9);
    --shadow-brand: 0 12px 28px -14px rgba(0, 0, 0, .8);
    --brand-grad: linear-gradient(115deg, #b0884a 0%, #d4a85f 45%, #e9cd92 100%);
    --brand-grad-soft: linear-gradient(115deg, rgba(212,168,95,.18), rgba(176,136,74,.10) 55%, rgba(233,205,146,.16));
}

/* ─────────────────── 2. רקע — קלף חם עם זוהר זהב עדין ─────────────────── */
body { background-color: var(--bg-body); position: relative; }
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(55% 45% at 92% -5%,  rgba(176, 136, 74, .16), transparent 70%),
        radial-gradient(40% 35% at 4% 10%,   rgba(233, 205, 146, .22), transparent 70%),
        radial-gradient(45% 40% at 60% 105%, rgba(138, 106, 54, .10), transparent 70%);
}
body.dark-mode::before {
    background:
        radial-gradient(55% 45% at 92% -5%,  rgba(212, 168, 95, .14), transparent 70%),
        radial-gradient(45% 40% at 60% 105%, rgba(176, 136, 74, .10), transparent 70%);
}

/* ─────────────────────────── 3. הלוגו (מונוגרם ש + אדים) ─────────────────────────── */
.sh-logo { display: block; overflow: visible; }
.sh-logo .sh-steam { stroke-dasharray: 60; stroke-dashoffset: 60; animation: shSteam 1.1s var(--ease-out) forwards; animation-delay: var(--d); }
.sh-logo .sh-mono { opacity: 0; transform-origin: center; animation: shMonoIn .6s var(--ease-spring) forwards; animation-delay: .25s; }
.sh-logo .sh-tile { transform-origin: center; animation: shTileIn .5s var(--ease-out) both; }
@keyframes shSteam { to { stroke-dashoffset: 0; } }
@keyframes shMonoIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes shTileIn { from { opacity: 0; transform: scale(.9) rotate(-4deg); } to { opacity: 1; transform: none; } }
.sh-logo:hover .sh-steam { animation: shSteamLoop 1.6s ease-in-out infinite; }
@keyframes shSteamLoop { 0%,100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-3px); opacity: .6; } }
.brand-word { font-family: 'Frank Ruhl Libre', 'Heebo', Georgia, serif; }

/* ─────────────────────────── 4. סרגל צד ─────────────────────────── */
.sidebar { background: var(--bg-sidebar); border-left: 1px solid var(--hairline) !important; box-shadow: -18px 0 40px -34px rgba(60, 40, 16, .55); }
.brand { height: auto !important; flex-direction: column; gap: 8px; padding: 20px 20px 16px !important; border-bottom: 1px solid var(--hairline) !important; position: relative; overflow: hidden; text-align: center; }
.brand > * { justify-content: center; }
.brand .sh-logo { margin-inline: auto; }
.brand::after { content: ''; position: absolute; inset-inline: 22%; bottom: 0; height: 2px; border-radius: 2px; background: var(--brand-grad); transform: scaleX(0); transform-origin: center; animation: shLineIn .9s var(--ease-out) .3s forwards; }
@keyframes shLineIn { to { transform: scaleX(1); } }
.brand-logo {
    display: inline-block !important;
    background-image: var(--brand-grad) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent;
    letter-spacing: -.3px; line-height: 1.25;
    font-family: 'Frank Ruhl Libre', 'Heebo', Georgia, serif;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .brand-logo { background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--sh-gold-deep); }
}
.brand-sub { font-size: 10px; font-weight: 800; letter-spacing: 3px; color: var(--text-muted); text-transform: uppercase; }

.nav { padding: 12px 14px !important; }
.nav-label { font-size: 10px !important; letter-spacing: 1.6px !important; color: var(--text-muted); opacity: .8; margin: 14px 10px 6px !important; }
.nav-link { position: relative; border-radius: var(--radius-md) !important; padding: 8px 12px !important; margin-bottom: 2px !important; font-weight: 600 !important; transition: var(--trans); }
.nav-link > i:first-child { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--sh-gold-50); color: var(--sh-gold-deep); font-size: 13px; transition: var(--trans); }
.nav-link:hover { background: var(--brand-grad-soft) !important; color: var(--text-main); transform: translateX(-2px); }
.nav-link:hover > i:first-child { transform: scale(1.06) rotate(-4deg); }
.nav-link.active { background: var(--sh-ink) !important; color: var(--sh-gold-bright) !important; box-shadow: 0 12px 28px -14px rgba(42, 32, 23, .8); transform: none; }
body.dark-mode .nav-link.active { background: var(--brand-grad) !important; color: #1c150d !important; }
.nav-link.active > i:first-child { background: rgba(233, 205, 146, .18); color: var(--sh-gold-bright); }
body.dark-mode .nav-link.active > i:first-child { background: rgba(28,21,13,.18); color: #1c150d; }
.nav-count { background: var(--sh-red); }
.nav-link.active .nav-count { background: var(--sh-gold); color: #1c150d; }

.sidebar-footer { border-top: 1px solid var(--hairline) !important; }
.user-profile { border-radius: var(--radius-md); background: var(--sh-gold-50); }
.avatar { background: var(--brand-grad) !important; color: #1c150d !important; box-shadow: var(--shadow-brand); }

/* ─────────────────────────── 5. כותרת נייד ─────────────────────────── */
.mobile-header { background: var(--bg-sidebar); border-bottom: 1px solid var(--hairline); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
    .mobile-header { background: color-mix(in srgb, var(--bg-sidebar) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
}

/* ─────────────────────────── 6. כותרת עמוד ─────────────────────────── */
.main { padding: 34px 38px 56px !important; }
.page-header { align-items: center; margin-bottom: 26px !important; }
.page-title h1 { font-size: 30px !important; font-weight: 900 !important; letter-spacing: -.6px !important; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 4px; font-family: 'Frank Ruhl Libre', 'Heebo', Georgia, serif; }
.page-title h1::after { content: ''; display: block; height: 3px; width: 34px; border-radius: 4px; background: var(--brand-grad); margin-inline-start: 2px; }
.page-subtitle { font-size: 13.5px !important; color: var(--text-muted); margin: 0; }
.page-header i { color: var(--sh-gold-deep); }

/* ─────────────────────────── 7. כרטיסים ─────────────────────────── */
.card { background: var(--bg-card); border: 1px solid var(--hairline) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow); position: relative; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.card::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--brand-grad); border-radius: var(--radius-xl) var(--radius-xl) 0 0; opacity: 0; transition: opacity .3s var(--ease-out); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card:hover::before { opacity: 1; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.card-title { font-weight: 800; font-size: 15px; letter-spacing: -.2px; }
.card-title i { color: var(--sh-gold-deep); }

/* ─────────────────────────── 8. כפתורים ─────────────────────────── */
.btn { border-radius: var(--radius-md) !important; font-weight: 700 !important; letter-spacing: -.1px; position: relative; overflow: hidden; transition: var(--trans); }
.btn::after { content: ''; position: absolute; top: 0; inset-inline-start: -60%; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent); transform: skewX(-18deg); transition: inset-inline-start .6s var(--ease-out); }
.btn:hover::after { inset-inline-start: 120%; }
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--sh-ink) !important; color: var(--sh-gold-bright) !important; border: none !important; box-shadow: 0 12px 28px -14px rgba(42, 32, 23, .8); }
.btn-primary:hover { transform: translateY(-2px); background: #3a2d20 !important; }
body.dark-mode .btn-primary { background: var(--brand-grad) !important; color: #1c150d !important; }
.btn-ghost { background: var(--sh-gold-50) !important; border: 1px solid var(--hairline) !important; color: var(--text-sec) !important; }
.btn-ghost:hover { background: var(--brand-grad-soft) !important; color: var(--text-main) !important; }
.btn-success { background: var(--sh-green) !important; }
.btn-sm { border-radius: var(--radius-sm) !important; }

/* ─────────────────────────── 9. טפסים ─────────────────────────── */
.form-input, .form-select, .form-textarea, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
    border-radius: var(--radius-md) !important; border-color: var(--hairline) !important; background: #fff; transition: var(--trans);
}
body.dark-mode .form-input, body.dark-mode .form-select, body.dark-mode .form-textarea, body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: var(--bg-body); }
.form-input:focus, .form-select:focus, .form-textarea:focus, input:focus, select:focus, textarea:focus { border-color: var(--sh-gold) !important; box-shadow: 0 0 0 4px var(--primary-glow) !important; transform: translateY(-1px); }
.form-label { font-weight: 700; letter-spacing: -.1px; }
.check-label input, .emp-pick input[type="checkbox"], .tpl-pick input { accent-color: var(--sh-gold-deep); }

/* ─────────────────────────── 10. טבלאות ─────────────────────────── */
.table-wrap { border-radius: var(--radius-lg); border: 1px solid var(--hairline); overflow: auto; background: var(--bg-card); }
.card .table-wrap { border: none; border-radius: var(--radius-md); }
.data-table th { background: var(--sh-gold-50) !important; font-size: 12px !important; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted) !important; font-weight: 800 !important; border-bottom: 1px solid var(--hairline) !important; position: sticky; top: 0; z-index: 2; }
.data-table td { border-bottom: 1px solid var(--hairline) !important; }
.data-table tbody tr { transition: background-color .18s var(--ease-out); }
.data-table tbody tr:hover td { background: var(--brand-grad-soft) !important; }

/* ─────────────────────────── 11. תגיות ─────────────────────────── */
.badge { border-radius: 999px !important; font-weight: 800 !important; letter-spacing: -.1px; padding: 3px 10px !important; }
.badge-primary { background: var(--sh-gold-50) !important; color: var(--sh-gold-deep) !important; }
.chip.active { background: var(--sh-ink); color: var(--sh-gold-bright); }
body.dark-mode .chip.active { background: var(--brand-grad); color: #1c150d; }
.chip:hover { border-color: var(--sh-gold); }

/* ─────────────────────────── 12. טוסט + מודאל ─────────────────────────── */
.toast { border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .45s var(--ease-spring), opacity .3s; }
.modal-card { border: 1px solid var(--hairline); border-top: 4px solid var(--sh-gold); }

/* ─────────────────────────── 13. בוחרי עובדים/טפסים ─────────────────────────── */
.emp-pick, .tpl-pick { border-color: var(--hairline); border-radius: var(--radius-md); }
.emp-pick:hover, .tpl-pick:hover { border-color: var(--sh-gold-light); }
.emp-pick:has(input:checked), .tpl-pick:has(input:checked) { border-color: var(--sh-gold); background: var(--sh-gold-50); }
.emp-avatar { color: var(--sh-gold-deep); }
.emp-pick:has(input:checked) .emp-avatar, .tpl-pick .tpl-icon { background: var(--brand-grad); color: #1c150d; }
.emp-group-head { background: var(--sh-gold-50); }
.emp-group-head i { color: var(--sh-gold-deep) !important; }
.summary-box { background: var(--sh-gold-50); }
.bar > span { background: var(--brand-grad); }

/* ─────────────────────────── 14. תנועה ─────────────────────────── */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.anim { animation: fadeInUp .55s var(--ease-out) forwards; opacity: 0; }
.d1 { animation-delay: .06s; } .d2 { animation-delay: .12s; } .d3 { animation-delay: .18s; }
.page-header { animation: fadeInUp .5s var(--ease-out) forwards; }
#bbbProgress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 9999; background: var(--brand-grad); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); pointer-events: none; }
#bbbProgress.go { transform: scaleX(.75); }
#bbbProgress.done { transform: scaleX(1); opacity: 0; transition: transform .2s, opacity .4s .2s; }

/* ─────────────────── 15. פס גלילה, בחירה, פוקוס ─────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--sh-gold-light); background-clip: padding-box; }
::selection { background: rgba(176, 136, 74, .25); }
:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; }

/* ─────────────────────────── 16. כרטיסי נתונים (card + border-top) ─────────────────────────── */
.card[style*="border-top"] { border-top-width: 5px !important; padding: 22px 20px !important; }
.card[style*="border-top"] > div:first-of-type { letter-spacing: .9px; }
.card[style*="border-top"] [data-countup][style*="var(--text-main)"] {
    font-size: 34px !important;
    background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
    font-family: 'Frank Ruhl Libre', 'Heebo', Georgia, serif;
}
.grid { gap: 22px !important; }

/* ─────────────────────────── 17. מובייל / נגישות / הדפסה ─────────────────────────── */
@media (max-width: 1024px) {
    .main { padding: 22px 16px 48px !important; }
    .page-title h1 { font-size: 24px !important; }
    .card { border-radius: var(--radius-lg) !important; }
}
@media (max-width: 640px) { .btn-sm, .data-table .btn { min-height: 40px; min-width: 40px; padding: 8px 12px !important; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .anim, .sh-logo .sh-mono { opacity: 1 !important; }
    .sh-logo .sh-steam { stroke-dashoffset: 0 !important; }
    .card:hover, .btn:hover, .nav-link:hover { transform: none !important; }
}
@media print {
    body::before, .card::before, .btn::after, #bbbProgress, .brand::after { display: none !important; }
    .anim { opacity: 1 !important; animation: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}