/* ============================================================
   MindIns BI Dashboard — Premium Dark Theme
   Brand: mindins.mindsetaisys.com
   Fonts: Heebo (עברית) + Sora (לטיני)
   Colors: #896EC0 (burgundy) + #8B82A8 (gray) + deep dark
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
    /* Brand Colors */
    --green-primary: #896EC0;
    --green-light: #B4A8E4;
    --green-dark: #4A3B7A;
    --green-glow: rgba(137, 110, 192, 0.45);
    --green-subtle: rgba(180, 168, 228, 0.07);
    --green-border: rgba(180, 168, 228, 0.25);
    --green-gradient: linear-gradient(135deg, #4A3B7A, #896EC0, #B4A8E4);

    --gold: #B4A8E4;
    --gold-light: #C9BFF0;
    --gold-glow: rgba(180, 168, 228, 0.28);

    --red: #E66B6B;
    --red-subtle: rgba(230,107,107, 0.12);
    --orange: #E0A93B;
    --orange-subtle: rgba(224,169,59, 0.12);

    /* Backgrounds — layered depth */
    --bg-primary: #25232B;
    --bg-secondary: #2A2833;
    --bg-card: rgba(52, 48, 67, 0.34); /* זכוכית קלילה יותר (בקשת נתי 21/07, סעיף 5) */
    --bg-card-solid: #343043;
    --bg-card-hover: rgba(52, 48, 67, 0.62);
    --bg-input: rgba(52, 48, 67, 0.5);
    --bg-sidebar: #201E27;
    --bg-glass: rgba(37, 35, 43, 0.78);

    /* Text */
    --text-primary: #e8eaf0;
    --text-secondary: #8b8fa3;
    --text-muted: #555770;
    --text-white: #ffffff;

    /* Borders */
    --border-color: rgba(180, 168, 228, 0.18);
    --border-light: rgba(180, 168, 228, 0.24);
    --border-glow: rgba(137, 110, 192, 0.3);

    /* Sizing */
    --sidebar-width: 260px;
    --topbar-height: 90px;
    /* רדיוסי הטמפלט (variant-11: r=8) - חדות של מוצר, לא גלולות */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows — multi-layer depth */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25);
    --shadow-xl: 0 16px 60px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3);
    --shadow-glow: 0 0 30px var(--green-glow), 0 4px 20px rgba(0,0,0,0.3);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.25), 0 1px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.07);
    --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.35), 0 0 20px var(--green-glow), inset 0 1px 0 rgba(255,255,255,0.06);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Sora', 'Heebo', sans-serif;
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 15% 15%, rgba(137, 110, 192, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 80%, rgba(201,191,240, 0.04) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(20, 20, 40, 0.5) 0%, transparent 70%);
    background-attachment: fixed;
    color: var(--text-primary);
    direction: rtl;
    overflow-x: hidden;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', 'Heebo', Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
}

a { color: var(--green-light); text-decoration: none; }
a:hover { color: var(--gold); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ---------- Utility ---------- */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 30% 40%, rgba(137, 110, 192, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 20%, rgba(201,191,240, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(10, 10, 30, 0.8) 0%, transparent 60%);
    padding: 20px;
}

.login-container {
    background: var(--bg-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 52px 44px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    box-shadow: var(--shadow-xl);
    animation: fadeInUp 0.6s var(--transition-slow);
}

.login-logo-wrap {
    margin-bottom: 28px;
}

.login-logo {
    width: 160px;
    height: auto;
    filter: drop-shadow(0 4px 16px rgba(137, 110, 192,0.35));
}

.login-title {
    font-family: 'Sora', 'Heebo', Arial, sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.login-subtitle {
    font-size: 14px;
    color: var(--green-light);
    font-weight: 600;
    margin-bottom: 40px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-group { text-align: right; }

.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.input-group input {
    width: 100%;
    padding: 14px 18px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Sora', 'Heebo', sans-serif;
    font-size: 16px;
    transition: all var(--transition-normal);
    direction: rtl;
}

.input-group input:focus {
    outline: 2px solid var(--green-primary);
    outline-offset: 2px;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(137, 110, 192,0.15), 0 0 20px rgba(137, 110, 192,0.1);
    background: rgba(30, 30, 45, 0.8);
}

.input-group input::placeholder { color: var(--text-muted); }

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-left: 44px;
}

.toggle-password-btn {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-normal);
}

.toggle-password-btn:hover {
    color: #896EC0;
}

.login-btn {
    width: 100%;
    padding: 15px;
    background: var(--green-gradient);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Sora', 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

.login-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.login-btn:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.login-btn:hover::after {
    transform: translateX(100%);
}

.login-btn:active { transform: translateY(0); }

.login-error {
    color: var(--red);
    font-size: 14px;
    min-height: 20px;
}

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
.dashboard {
    display: flex;
    min-height: 100vh;
    direction: rtl;
}

/* ---------- Sidebar ---------- */
@keyframes sidebarEdgeGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* סיידבר - קו חוט לפי הטמפלט הנבחר (variant-11): שקוף, בלי הילה */
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid rgba(180, 168, 228, 0.13);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform var(--transition-slow);
}

.sidebar-header {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(180, 168, 228, 0.10);
    position: relative;
    box-sizing: border-box;
}

.sidebar-logo {
    width: 200px;
    height: auto;
    object-fit: contain;
    transition: all var(--transition-normal);
    filter: drop-shadow(0 2px 8px rgba(137, 110, 192,0.2));
}

.sidebar-header:hover .sidebar-logo {
    transform: scale(1.04);
    filter: drop-shadow(0 4px 16px rgba(137, 110, 192,0.4));
}

/* ---------- Sidebar Nav ---------- */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative; /* עוגן לאינדיקטור הנע */
}

/* אינדיקטור נע בסיידבר - אותה שפה של לשוניות התקופה: גולש בחלקלקות לפריט הפעיל */
.nav-indicator {
    position: absolute;
    inset-inline: 10px;
    top: 0;
    height: 0;
    opacity: 0;
    z-index: 0;
    border-inline-start: 2px solid var(--green-primary);
    background: linear-gradient(270deg, transparent, rgba(137, 110, 192, 0.09));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: top 0.42s cubic-bezier(.34,1.2,.4,1), height 0.42s cubic-bezier(.34,1.2,.4,1), opacity 0.25s ease;
    pointer-events: none;
}

/* פריטי ניווט - קו חוט לפי variant-11: בלי עיגול, פס צד סגול לפריט פעיל */
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    padding-inline-start: 14px;
    min-height: 42px;
    box-sizing: border-box;
    border-radius: 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    border-inline-start: 2px solid transparent;
    background: none;
    width: 100%;
    text-align: right;
    font-family: 'Sora', 'Heebo', sans-serif;
    position: relative;
}

.nav-item:hover {
    color: var(--text-white);
}

.nav-item.active {
    color: var(--text-white);
    font-weight: 600;
    /* ההדגשה עצמה עברה לאינדיקטור הנע (.nav-indicator) - הפריט רק מתחזק בצבע */
}

.nav-item.active svg {
    color: var(--green-primary);
}

.nav-item svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.nav-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-light), transparent);
    margin: 10px 16px;
}

.nav-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}
/* כותרות סקשן בסיידבר - קריאות וברורות (נתי 22/07: "לא רואים אותן") */
.nav-section-label {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--green-light);
    letter-spacing: 0.8px;
    padding: 12px 14px 5px;
    margin-top: 4px;
    border-top: 1px solid rgba(180, 168, 228, 0.10);
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: right;
    width: 100%;
    direction: rtl;
    transition: color 0.15s;
}
.nav-section-label:hover { color: var(--text-primary, #e8eaf0); }
.nav-section-chev {
    display: inline-block;
    font-size: 10px;
    opacity: 0.7;
    width: 12px;
    text-align: center;
    transition: transform 0.18s ease;
}
.nav-section-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 4px;
    overflow: visible;
    max-height: 800px;
    transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.18s;
    opacity: 1;
}
.nav-section.collapsed .nav-section-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ========= Inviting animated emojis in sidebar (mirrors base-template) ========= */

/* ✨ Sparkle on AI Insights — gentle shimmer */
@keyframes sparkleShimmer {
    0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 3px rgba(201,191,240,0.55)); opacity: 0.92; }
    50%      { transform: scale(1.1) rotate(180deg); filter: drop-shadow(0 0 5px rgba(201,191,240,0.85)); opacity: 1; }
}
.nav-sparkle-emoji {
    animation: sparkleShimmer 5s ease-in-out infinite;
    transform-origin: center;
    display: inline-block;
}

/* 🕵️ Spy on Oracle — gentle zoom */
@keyframes spyZoom {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(137, 110, 192,0.45)); }
    50%      { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(137, 110, 192,0.75)); }
}
.nav-spy-emoji {
    animation: spyZoom 4s ease-in-out infinite;
    transform-origin: center;
    display: inline-block;
}

/* Prism crystal-ball — orbits, nebulae, twinkles */
@keyframes prism-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes prism-spin-rev { from { transform:rotate(35deg); } to { transform:rotate(395deg); } }
@keyframes prism-pulse { 0%,100% { opacity:0.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes prism-drift-a { 0%,100% { transform:rotate(-25deg) translate(0,0); } 50% { transform:rotate(-15deg) translate(2px,1px); } }
@keyframes prism-drift-b { 0%,100% { transform:rotate(45deg) translate(0,0); } 50% { transform:rotate(60deg) translate(-1px,2px); } }
@keyframes prism-twinkle { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.25; transform:scale(1.6); } }
.nav-prism-emoji {
    display: inline-flex;
    align-items: center;
    width: 34px;
    height: 34px;
    margin-right: 2px;
    filter: drop-shadow(0 0 6px rgba(137, 110, 192,0.55));
}
.nav-prism-emoji svg { width: 34px; height: 34px; overflow: visible; }
.nav-prism-emoji .prism-halo { animation: prism-pulse 3s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.nav-prism-emoji .prism-orbit-1 { animation: prism-spin 14s linear infinite; transform-origin:50px 50px; transform-box:view-box; }
.nav-prism-emoji .prism-orbit-2 { animation: prism-spin-rev 20s linear infinite; transform-origin:50px 50px; transform-box:view-box; }
.nav-prism-emoji .prism-sparkles { animation: prism-spin 26s linear infinite; transform-origin:50px 50px; transform-box:view-box; }
.nav-prism-emoji .prism-nebula-a { animation: prism-drift-a 8s ease-in-out infinite; transform-origin:50% 50%; transform-box:fill-box; }
.nav-prism-emoji .prism-nebula-b { animation: prism-drift-b 11s ease-in-out infinite; transform-origin:50% 50%; transform-box:fill-box; }
.nav-prism-emoji .prism-twinkle-a { animation: prism-twinkle 2.5s ease-in-out infinite; }
.nav-prism-emoji .prism-twinkle-b { animation: prism-twinkle 3.2s ease-in-out infinite 0.8s; }

/* Siren on Alert SOS — rays pulse */
@keyframes sirenRayPulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50%      { opacity: 0.4; transform: scaleY(0.6); }
}
.nav-siren-large .siren-ray { transform-origin: center; }
.nav-siren-large .siren-ray-1 { animation: sirenRayPulse 1.6s ease-in-out infinite; }
.nav-siren-large .siren-ray-2 { animation: sirenRayPulse 1.6s ease-in-out infinite 0.2s; }
.nav-siren-large .siren-ray-3 { animation: sirenRayPulse 1.6s ease-in-out infinite 0.4s; }

/* ============================================================
   DRAG & DROP — KPI / chart cards swap by dragging (from base-template)
   ============================================================ */
.kpi-card[draggable="true"],
.chart-card[draggable="true"],
.mini-kpi-card,
.mini-chart-card {
    touch-action: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.mini-kpi-card[draggable="true"],
.mini-chart-card[draggable="true"],
.kpi-card[draggable="true"],
.chart-card[draggable="true"] {
    cursor: grab;
}
.kpi-card[draggable="true"]:active,
.chart-card[draggable="true"]:active,
.mini-kpi-card[draggable="true"]:active,
.mini-chart-card[draggable="true"]:active {
    cursor: grabbing;
}
.dnd-dragging {
    opacity: 0.4 !important;
    transform: scale(0.96) !important;
    transition: all 0.15s ease !important;
}
.dnd-drop-target {
    outline: 2.5px dashed #B4A8E4 !important;
    outline-offset: -2px;
    box-shadow: 0 0 24px rgba(180, 168, 228, 0.35) !important;
    transform: scale(1.02) !important;
    transition: all 0.15s ease !important;
}
.chart-card.dnd-drop-target,
.mini-chart-card.dnd-drop-target {
    outline-color: #B4A8E4 !important;
    box-shadow: 0 0 24px rgba(180,168,228, 0.35) !important;
}

/* ============================================================
   MINI STRIPS — unselected KPIs / charts (horizontal scroll)
   Bordo theme (from base-template, swapped green→burgundy)
   ============================================================ */
.mini-strip-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #8B82A8;
    margin: 18px 4px 6px;
    font-weight: 600;
    font-family: 'Sora', 'Heebo', sans-serif;
}
.mini-strip-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(180, 168, 228, 0.25), transparent);
}
.mini-strip-label-cyan::after {
    background: linear-gradient(90deg, rgba(180,168,228, 0.25), transparent);
}
.mini-strip-label-with-btn {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(180, 168, 228, 0.2);
    margin: 18px 4px 10px;
}
.mini-strip-label-with-btn::after { display: none; }
.mini-strip-label-with-btn.mini-strip-label-cyan {
    border-bottom-color: rgba(180,168,228, 0.25);
}
.mini-strip-label-with-btn .cust-btn {
    margin-inline-start: auto;
    padding: 6px 14px !important;
    font-size: 12px !important;
}
.mini-strip-label-with-btn .mini-strip-label-text {
    flex: 0 0 auto;
}

.mini-kpi-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 4px 14px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(180, 168, 228, 0.5) rgba(255, 255, 255, 0.04);
    margin-bottom: 8px;
}
.mini-kpi-strip::-webkit-scrollbar { height: 8px; }
.mini-kpi-strip::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.mini-kpi-strip::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #896EC0, #B4A8E4);
    border-radius: 4px;
}
.mini-kpi-card {
    flex: 0 0 auto;
    min-width: 180px;
    padding: 14px 16px;
    /* Stronger background so each card reads as its own block */
    background: linear-gradient(180deg, rgba(137, 110, 192, 0.08), rgba(180, 168, 228, 0.03));
    /* Visible border in burgundy tone so the cards don't look like one bar */
    border: 1px solid rgba(180, 168, 228, 0.28);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.mini-kpi-card:hover {
    background: linear-gradient(180deg, rgba(180, 168, 228, 0.18), rgba(137, 110, 192, 0.08));
    border-color: rgba(180, 168, 228, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(180, 168, 228, 0.25);
}
.mini-kpi-card .mini-kpi-label {
    font-size: 11px;
    color: #8B82A8;
    margin-bottom: 6px;
    font-weight: 500;
    font-family: 'Sora', 'Heebo', sans-serif;
    white-space: nowrap;
}
.mini-kpi-card .mini-kpi-value {
    font-size: 16px;
    background: linear-gradient(135deg, #FFFFFF 30%, #B4A8E4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-family: 'Sora', 'Heebo', sans-serif;
    white-space: nowrap;
}

.mini-charts-strip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 4px 14px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(180,168,228, 0.5) rgba(255, 255, 255, 0.04);
    margin-bottom: 16px;
}
.mini-charts-strip::-webkit-scrollbar { height: 8px; }
.mini-charts-strip::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.mini-charts-strip::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #6B57A8, #B4A8E4);
    border-radius: 4px;
}
.mini-chart-card {
    flex: 0 0 auto;
    width: 280px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.mini-chart-card:hover {
    background: rgba(180,168,228, 0.06);
    border-color: rgba(180,168,228, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(180,168,228, 0.12);
}
.mini-chart-card .mini-chart-title {
    font-size: 12px;
    color: #8B82A8;
    margin-bottom: 8px;
    font-weight: 600;
    font-family: 'Sora', 'Heebo', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-chart-card .mini-chart-canvas {
    width: 100% !important;
    height: 120px !important;
}

/* ---------- AI Nav Item — Subtle Animated Glow (Burgundy) ---------- */
@keyframes aiSoftGlow {
    0%, 100% { border-color: rgba(137, 110, 192,0.15); box-shadow: 0 0 6px rgba(137, 110, 192,0.1); }
    50% { border-color: rgba(137, 110, 192,0.4); box-shadow: 0 0 14px rgba(137, 110, 192,0.2); }
}
@keyframes aiSoftShimmer {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.nav-item-ai {
    color: #B4A8E4 !important;
    border: 1px solid rgba(137, 110, 192,0.15) !important;
    animation: aiSoftGlow 4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.nav-item-ai::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(137, 110, 192,0.08), transparent);
    animation: aiSoftShimmer 5s ease-in-out infinite;
    pointer-events: none;
}
.nav-item-ai svg {
    filter: drop-shadow(0 0 6px rgba(137, 110, 192,0.5));
}
.nav-item-ai:hover {
    animation: none;
    box-shadow: 0 0 18px rgba(137, 110, 192,0.3) !important;
}
.nav-item-ai.active {
    background: linear-gradient(135deg, rgba(137, 110, 192,0.18), rgba(137, 110, 192,0.08)) !important;
    border-color: rgba(137, 110, 192,0.4) !important;
}

/* ---------- Nav Item — My AI Agent (Burgundy glow + robot) ---------- */
.nav-item-agent {
    color: #B4A8E4 !important;
    border: 1px solid rgba(137, 110, 192,0.15) !important;
    animation: aiSoftGlow 4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.nav-item-agent::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(137, 110, 192,0.08), transparent);
    animation: aiSoftShimmer 5s ease-in-out infinite;
    pointer-events: none;
}
.nav-item-agent svg {
    filter: drop-shadow(0 0 6px rgba(137, 110, 192,0.5));
}
.nav-item-agent:hover {
    animation: none;
    box-shadow: 0 0 18px rgba(137, 110, 192,0.3) !important;
}
.nav-item-agent.active {
    background: linear-gradient(135deg, rgba(137, 110, 192,0.18), rgba(137, 110, 192,0.08)) !important;
    border-color: rgba(137, 110, 192,0.4) !important;
}

@keyframes botSway { 0%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} 100%{transform:rotate(-8deg)} }
.agent-bot { display:inline-block; transform-origin:center 95%; animation:botSway 3s ease-in-out infinite; }

/* ---------- My AI Agent Module ---------- */
.agent-chip { padding:7px 16px; border-radius:20px; border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-secondary); font-size:13px; cursor:pointer; transition:0.2s; white-space:nowrap; font-family:inherit; }
.agent-chip.active { border-color:rgba(137, 110, 192,0.4); background:rgba(137, 110, 192,0.12); color:#B4A8E4; font-weight:700; }
.agent-chip:hover:not(.active) { border-color:rgba(255,255,255,0.2); }
.agent-section { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; padding:14px 16px; margin-bottom:12px; }
.agent-toggle { width:40px; height:22px; border-radius:11px; cursor:pointer; position:relative; transition:background 0.3s; flex-shrink:0; }
.agent-toggle .dot { width:18px; height:18px; border-radius:50%; background:white; position:absolute; top:2px; transition:left 0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.agent-cat-row { display:flex; align-items:center; gap:10px; padding:14px; background:var(--bg-input); border-radius:12px; min-height:70px; }
.agent-cat-row .aicon { font-size:24px; flex-shrink:0; }
.agent-cat-row .alabel { font-size:17px; font-weight:700; color:var(--text-primary); }
.agent-cat-row .adesc { font-size:12px; color:var(--text-muted); text-align:center; margin-top:4px; }
.agent-cat-row .athresh { width:50px; padding:5px 6px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:6px; color:var(--text-primary); font-size:14px; text-align:center; font-weight:600; font-family:inherit; }
.agent-cat-row .aunit { font-size:12px; color:var(--text-muted); }
.agent-cat-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.agent-cat-center .atop { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.agent-info { position:relative; display:inline-flex; }
.agent-info-btn { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--border-color); background:transparent; color:var(--text-muted); font-size:11px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:0.2s; font-style:italic; font-family:inherit; flex-shrink:0; }
.agent-info-btn:hover { border-color:#B4A8E4; color:#B4A8E4; }
.agent-info-bubble { display:none; position:absolute; bottom:calc(100% + 8px); right:50%; transform:translateX(50%); background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:10px 14px; font-size:12px; color:var(--text-primary); line-height:1.6; min-width:200px; max-width:280px; box-shadow:0 8px 24px rgba(0,0,0,0.5); z-index:20; }
.agent-info-bubble::after { content:''; position:absolute; top:100%; right:50%; transform:translateX(50%); border-width:6px; border-style:solid; border-color:var(--border-color) transparent transparent transparent; }
.agent-info-title { font-size:11px; color:#B4A8E4; font-weight:700; margin-bottom:6px; }
@media (max-width:769px) { .agent-cat-grid-wrap{grid-template-columns:1fr 1fr !important} .agent-email-col{flex:1 1 100% !important;max-width:100% !important} .agent-hero-wrap{flex-direction:column;gap:10px !important;padding:12px !important} .agent-hero-wrap h2{font-size:18px !important} .agent-settings-grid{flex-direction:column} .agent-bottom-bar{justify-content:center} }
@media (max-width:480px) { .agent-cat-grid-wrap{grid-template-columns:1fr !important} .agent-chip{font-size:12px !important;padding:6px 12px !important} .agent-cat-row .alabel{font-size:14px !important} }

/* ---------- Sidebar Credit ---------- */
.sidebar-credit {
    padding: 10px 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 10px;
    line-height: 1.5;
    color: rgba(255,255,255,0.35);
    text-align: center;
    letter-spacing: 0.2px;
    background: rgba(0,0,0,0.15);
}

/* ---------- Sidebar Footer ---------- */
.sidebar-footer {
    padding: 16px 18px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.2);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--green-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-white);
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(137, 110, 192,0.3);
}

.user-info { display: flex; flex-direction: column; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.user-role { font-size: 11px; color: var(--text-muted); }

.logout-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.logout-btn:hover {
    color: var(--red);
    background: var(--red-subtle);
}

/* ---------- Sidebar Overlay (mobile) ---------- */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 99;
}

/* ---------- Main Content ---------- */
.main-content {
    flex: 1;
    margin-right: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    max-width: calc(100vw - var(--sidebar-width));
}

/* ---------- Top Bar ---------- */
@keyframes subtleShimmer {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* בר עליון - קו חוט לפי variant-11: רקע המותג, קו תחתון עדין, בלי הילה */
.topbar {
    position: sticky;
    top: 0;
    min-height: var(--topbar-height);
    background: rgba(37, 35, 43, 0.86);
    border-bottom: 1px solid rgba(180, 168, 228, 0.13);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 28px;
    gap: 10px 16px;
    z-index: 50;
}

.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition-normal);
}

/* כותרת עמוד - בלי בולד (הוראת נתי 22/07) */
.topbar-title h2 {
    font-size: 32px;
    font-weight: 400;
    color: var(--text-white);
    white-space: nowrap;
}

.topbar-filters {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.topbar-ai-shortcuts {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: auto;
}

/* Topbar nav buttons — matching sidebar .nav-item style */
.topbar-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Sora', 'Heebo', sans-serif;
    color: var(--text-secondary);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.topbar-ai-btn:hover {
    background: rgba(137, 110, 192, 0.08);
    color: var(--text-primary);
    border-color: rgba(137, 110, 192, 0.1);
}
.topbar-ai-btn svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.topbar-bot-icon {
    display: inline-flex;
    align-items: center;
    width: 20px;
    height: 25px;
    margin-right: 4px;
    vertical-align: middle;
    transform-origin: center 95%;
    animation: botSway 3s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(137, 110, 192,0.4));
}
/* Glow variant — matches sidebar .nav-item-ai */
.topbar-ai-btn--glow {
    color: #B4A8E4;
    border-color: rgba(137, 110, 192,0.15);
    animation: aiSoftGlow 4s ease-in-out infinite;
}
.topbar-ai-btn--glow svg {
    filter: drop-shadow(0 0 6px rgba(137, 110, 192,0.5));
}
.topbar-ai-btn--glow:hover {
    animation: none;
    background: rgba(137, 110, 192, 0.12);
    border-color: rgba(180, 168, 228, 0.4);
    box-shadow: 0 0 18px rgba(137, 110, 192,0.3);
}

/* כפתורי שירותים חיצוניים - מסלקה פנסיונית והר הביטוח */
.topbar-ext-btn {
    color: var(--text-secondary);
    border-color: rgba(137, 110, 192, 0.15);
}
.ext-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 5px;
    padding: 2px 4px;
    height: 20px;
    box-sizing: border-box;
}
.ext-logo-chip img {
    height: 14px;
    width: auto;
    display: block;
}

.icon-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 11px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    border-color: var(--border-glow);
    color: var(--green-light);
    background: rgba(137, 110, 192, 0.1);
    box-shadow: 0 0 16px rgba(137, 110, 192, 0.1);
}

/* ---------- Period Pills (now inside filter-row) ---------- */
.period-pills {
    display: flex;
    gap: 3px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 3px;
    border: 1px solid var(--border-color);
}

/* Thin-glass group with a sliding active indicator */
.period-group {
    position: relative;
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(180, 168, 228, 0.05);
    border: 1px solid rgba(180, 168, 228, 0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.period-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 4px;
    width: 0;
    border-radius: 9px;
    z-index: 0;
    background: linear-gradient(120deg, rgba(180,168,228,0.22), rgba(137,110,192,0.12));
    border: 1px solid rgba(180,168,228,0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 18px rgba(180,168,228,0.25);
    transition: right 0.42s cubic-bezier(.34,1.2,.4,1), width 0.42s cubic-bezier(.34,1.2,.4,1);
    pointer-events: none;
}

.period-pill {
    position: relative;
    z-index: 1;
    padding: 7px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: 'Sora', 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: color var(--transition-normal);
    white-space: nowrap;
}

.period-pill:hover { color: var(--text-primary); }

.period-pill.active {
    color: var(--text-white);
    font-weight: 600;
}

/* ---------- Navigation Tabs ---------- */
.nav-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 28px;
    background: rgba(15, 15, 20, 0.6);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-tab {
    padding: 8px 20px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: 'Sora', 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-normal);
}

.nav-tab:hover {
    color: var(--text-primary);
    background: rgba(137, 110, 192, 0.06);
}

.nav-tab.active {
    background: rgba(137, 110, 192, 0.12);
    color: var(--green-light);
    border-color: rgba(137, 110, 192, 0.3);
    font-weight: 600;
    box-shadow: 0 0 12px rgba(137, 110, 192, 0.08);
}

/* ---------- Filter Panel (unified row below period pills) ---------- */
/* פס הסינון - שקוף ואוורירי כמו הטמפלט (variant-11): בלי פס כהה, רק קו הפרדה דק */
.filter-panel {
    background: transparent;
    border-bottom: 1px solid rgba(180, 168, 228, 0.13);
    padding: 6px 28px 8px;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* פילטרים - קו חוט לפי variant-11: שקופים, קו תחתון עדין */
.filter-pill-select {
    padding: 7px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(180, 168, 228, 0.25);
    border-radius: 0;
    color: var(--text-secondary);
    font-family: 'Sora', 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    min-width: 110px;
    cursor: pointer;
    transition: all var(--transition-normal);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Dark mode dropdown options */
select.filter-pill-select option {
    background: var(--bg-card-solid, #343043);
    color: var(--text-primary, #e8eaf0);
    padding: 8px;
}

select.filter-pill-select {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8fa3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding-left: 28px;
    color-scheme: dark;
}

.filter-pill-select:focus {
    outline: none;
    border-bottom-color: var(--green-primary);
    color: var(--text-primary);
}

.filter-pill-select:hover {
    color: var(--text-white);
    border-bottom-color: rgba(180, 168, 228, 0.5);
}

/* כפתורי סינון - קו חוט לפי variant-11: שטוחים, קו תחתון בריחוף */
.filter-pill-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    color: var(--text-secondary);
    font-family: 'Sora', 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.filter-pill-btn:hover {
    color: var(--text-white);
    border-bottom-color: rgba(180, 168, 228, 0.5);
    background: none;
}

.filter-pill-btn svg {
    flex-shrink: 0;
}

.filter-pill-clear:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-subtle);
}

/* ---------- Page Content ---------- */
.page-content {
    flex: 1;
    padding: 28px;
    animation: fadeIn 0.4s ease;
}

/* ============================================================
   KPI CARDS — Glass + 3D
   ============================================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    perspective: 1000px;
}

/* Drilldown inside KPI grid spans full width */
.kpi-grid > .drilldown-area,
.kpi-grid > .kpi-drilldown-area {
    grid-column: 1 / -1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kpi-card {
    /* זכוכית עשירה ומהירה (בקשת נתי 22/07): גרדיאנט שכבתי + ברק עליון,
       בלי טשטוש-רקע יקר. ההילה של הטמפלט נשמרת. */
    background: linear-gradient(155deg, rgba(180, 168, 228, 0.13) 0%, rgba(137, 110, 192, 0.09) 22%, rgba(52, 48, 67, 0.55) 55%, rgba(37, 35, 43, 0.78) 100%);
    border: 1px solid rgba(180, 168, 228, 0.30);
    border-radius: var(--radius-sm);
    padding: 18px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.30), 0 0 18px rgba(137, 110, 192, 0.14), 0 10px 30px rgba(0, 0, 0, 0.40);
    transform-style: preserve-3d;
}

.kpi-card:hover {
    border-color: rgba(180, 168, 228, 0.6);
    box-shadow: 0 0 24px rgba(137, 110, 192, 0.25), 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* ספארקליין בתחתית כרטיס KPI - קו זוהר עם מילוי (חתימת הטמפלט) */
.kpi-spark { width: 100%; height: 34px; display: block; margin-top: 10px; }
.kpi-spark polyline { fill: none; stroke: var(--green-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(180, 168, 228, 0.6)); }
.kpi-spark .sp-fill { fill: rgba(137, 110, 192, 0.14); stroke: none; }

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: var(--green-gradient);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    transition: all var(--transition-normal);
}

.kpi-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(137, 110, 192,0.06), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.kpi-card:hover {
    border-color: rgba(180, 168, 228, 0.6);
    box-shadow: 0 0 24px rgba(137, 110, 192, 0.25), 0 4px 20px rgba(0, 0, 0, 0.35);
    transform: translateY(-4px) scale(1.01);
}

.kpi-card:hover::before { width: 5px; }
.kpi-card:hover::after { opacity: 1; }

.kpi-card:active {
    transform: translateY(-1px) scale(1.005);
}

.kpi-card.gold::before { background: linear-gradient(180deg, #4A3B7A, #896EC0, #B4A8E4); }
.kpi-card.red::before { background: linear-gradient(180deg, #4A3B7A, #896EC0, #B4A8E4); }
.kpi-card.orange::before { background: linear-gradient(180deg, #4A3B7A, #6B57A8, #896EC0); }

/* 4-color KPI glow system — dynamic cursor-following glow (always visible, intensifies on hover) */
.kpi-card.kpi-glow-green::before { background: linear-gradient(180deg, #4A3B7A, #896EC0, #B4A8E4); }
.kpi-card.kpi-glow-green::after { background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(137, 110, 192,0.12), transparent 60%); opacity: 0.5; }
.kpi-card.kpi-glow-green:hover { border-color: rgba(137, 110, 192, 0.4); box-shadow: 0 0 30px rgba(137, 110, 192, 0.25), 0 4px 20px rgba(0,0,0,0.3); }
.kpi-card.kpi-glow-green:hover::after { opacity: 1; }

.kpi-card.kpi-glow-cyan::before { background: linear-gradient(180deg, #4A3B7A, #896EC0, #B4A8E4); }
.kpi-card.kpi-glow-cyan::after { background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(137, 110, 192,0.12), transparent 60%); opacity: 0.5; }
.kpi-card.kpi-glow-cyan:hover { border-color: rgba(137, 110, 192, 0.4); box-shadow: 0 0 30px rgba(137, 110, 192, 0.25), 0 4px 20px rgba(0,0,0,0.3); }
.kpi-card.kpi-glow-cyan:hover::after { opacity: 1; }

.kpi-card.kpi-glow-lime::before { background: linear-gradient(180deg, #4A3B7A, #896EC0, #B4A8E4); }
.kpi-card.kpi-glow-lime::after { background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(180, 168, 228,0.12), transparent 60%); opacity: 0.5; }
.kpi-card.kpi-glow-lime:hover { border-color: rgba(180, 168, 228, 0.4); box-shadow: 0 0 30px rgba(180, 168, 228, 0.25), 0 4px 20px rgba(0,0,0,0.3); }
.kpi-card.kpi-glow-lime:hover::after { opacity: 1; }

.kpi-card.kpi-glow-teal::before { background: linear-gradient(180deg, #4A3B7A, #6B57A8, #896EC0); }
.kpi-card.kpi-glow-teal::after { background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(180, 168, 228,0.12), transparent 60%); opacity: 0.5; }
.kpi-card.kpi-glow-teal:hover { border-color: rgba(180, 168, 228, 0.4); box-shadow: 0 0 30px rgba(180, 168, 228, 0.25), 0 4px 20px rgba(0,0,0,0.3); }
.kpi-card.kpi-glow-teal:hover::after { opacity: 1; }

/* Smaller font for text-based KPI values (names, not numbers) */
.kpi-value-sm { font-size: 20px !important; }

.kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.kpi-value {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
    /* חתימת הטמפלט: מספר בגרדיאנט לבן→לבנדר (נראות AI) */
    background: linear-gradient(135deg, #FFFFFF 30%, #B4A8E4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.kpi-delta.positive {
    color: var(--green-light);
    background: rgba(180, 168, 228,0.1);
    border: 1px solid rgba(180, 168, 228,0.15);
}

.kpi-delta.negative {
    color: var(--red);
    background: var(--red-subtle);
    border: 1px solid rgba(230,107,107,0.15);
}

.kpi-icon {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: rgba(137, 110, 192, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-light);
}

/* ============================================================
   CHARTS — Premium cards
   ============================================================ */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.chart-card {
    /* זכוכית עשירה ומהירה - כמו כרטיסי ה-KPI */
    background: linear-gradient(155deg, rgba(180, 168, 228, 0.11) 0%, rgba(137, 110, 192, 0.07) 22%, rgba(52, 48, 67, 0.52) 55%, rgba(37, 35, 43, 0.76) 100%);
    border: 1px solid rgba(180, 168, 228, 0.28);
    border-radius: var(--radius-sm);
    padding: 20px;
    transition: all var(--transition-normal);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 0 18px rgba(137, 110, 192, 0.12), 0 10px 30px rgba(0, 0, 0, 0.38);
    position: relative;
    overflow: hidden;
}

.chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(137, 110, 192,0.2), transparent);
}

.chart-card:hover {
    border-color: rgba(180, 168, 228, 0.6);
    box-shadow: 0 0 24px rgba(137, 110, 192, 0.25), 0 4px 20px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.chart-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.chart-actions {
    display: flex;
    gap: 8px;
}

.chart-container {
    position: relative;
    width: 100%;
    height: 280px;
}

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Chart export button group (Excel + WhatsApp + PDF) */
.chart-export-btns {
    display: flex;
    gap: 4px;
    margin-right: auto;
}

.chart-export-btns .chart-export-btn {
    padding: 5px;
    border-radius: 6px;
}

.chart-export-btns .chart-export-btn:hover {
    background: rgba(137, 110, 192, 0.15);
}

/* ============================================================
   DATA TABLES — Clean + Professional
   ============================================================ */
.data-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-normal);
}

.data-table-wrap:hover {
    box-shadow: 0 4px 30px rgba(0,0,0,0.3), 0 0 12px rgba(137, 110, 192, 0.06);
}

.data-table-header {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.data-table-title {
    font-size: 15px;
    font-weight: 600;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table thead {
    background: rgba(15, 15, 22, 0.6);
}

.data-table th {
    padding: 13px 18px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
    white-space: nowrap;
    border-bottom: 1px solid var(--border-light);
}

.data-table th:hover { color: var(--green-light); }

.data-table th.sorted-asc::after { content: ' \2191'; color: var(--green-light); }
.data-table th.sorted-desc::after { content: ' \2193'; color: var(--green-light); }

.data-table td {
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-primary);
}

.data-table tbody tr {
    transition: all var(--transition-fast);
}

.data-table tbody tr:hover {
    background: rgba(137, 110, 192, 0.05);
}

.data-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.01);
}

.data-table tbody tr:nth-child(even):hover {
    background: rgba(137, 110, 192, 0.05);
}

/* Summary footer */
.data-table tfoot tr {
    background: rgba(137, 110, 192, 0.08) !important;
    border-top: 2px solid rgba(137, 110, 192, 0.3);
}

.data-table tfoot td {
    font-weight: 700;
    color: var(--text-white);
    padding: 14px 18px;
    border-bottom: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: 'Sora', 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    width: fit-content;
    background: var(--bg-card);
    color: var(--text-primary);
}

.btn:hover {
    border-color: var(--border-glow);
    box-shadow: 0 4px 16px rgba(137, 110, 192, 0.15);
    transform: translateY(-1px);
}

/* כפתור ראשי - זכוכית אקצנט עדינה במקום גלולה צבעונית (בקשת נתי 21/07, סעיף 3) */
.btn-primary {
    background: linear-gradient(135deg, rgba(74, 59, 122, 0.55), rgba(137, 110, 192, 0.32));
    border: 1px solid rgba(137, 110, 192, 0.5);
    color: var(--text-white);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    border-color: rgba(180, 168, 228, 0.65);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 18px rgba(137, 110, 192, 0.25);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 0 24px var(--green-glow);
}

.btn-gold {
    background: linear-gradient(135deg, #4A3B7A, var(--gold));
    border-color: transparent;
    color: var(--text-white);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */
@keyframes dividerPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(137, 110, 192,0.25), rgba(139,130,168,0.15), rgba(137, 110, 192,0.25), transparent);
    margin: 28px 0;
    animation: dividerPulse 6s ease-in-out infinite;
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

.skeleton-card {
    background: linear-gradient(90deg, var(--bg-card-solid) 25%, rgba(30,30,45,0.9) 50%, var(--bg-card-solid) 75%);
    background-size: 200% 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    height: 120px;
    animation: skeleton-shimmer 2s ease-in-out infinite;
}

.skeleton-chart {
    background: linear-gradient(90deg, var(--bg-card-solid) 25%, rgba(30,30,45,0.9) 50%, var(--bg-card-solid) 75%);
    background-size: 200% 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    height: 300px;
    animation: skeleton-shimmer 2s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in { animation: fadeIn 0.4s ease; }
.animate-fade-in-up { animation: fadeInUp 0.5s ease; }
.animate-slide-in { animation: slideInRight 0.4s ease; }

/* Stagger children animation */
.stagger-children > * {
    opacity: 0;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.45s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.5s; }

/* Nav active subtle glow */
.nav-item.active {
    animation: none;
}

/* KPI value entrance */
@keyframes kpi-pop {
    0% { opacity: 0; transform: scale(0.85) translateY(8px); }
    60% { opacity: 1; transform: scale(1.02) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.kpi-value {
    animation: kpi-pop 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Chart card entrance */
.chart-card {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================================
   GAUGE (for agents page)
   ============================================================ */
.gauge-container {
    position: relative;
    width: 140px;
    height: 70px;
    margin: 0 auto;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.alert-card:hover {
    border-color: var(--border-glow);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 12px rgba(137, 110, 192, 0.08);
    transform: translateX(3px);
}

.alert-card.severity-high { border-right: 4px solid #E66B6B; }
.alert-card.severity-medium { border-right: 4px solid #E0A93B; }
.alert-card.severity-low { border-right: 4px solid #8B82A8; }

.alert-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-card.severity-high .alert-icon { background: rgba(230,107,107,0.15); color: #E66B6B; }
.alert-card.severity-medium .alert-icon { background: rgba(224,169,59,0.15); color: #E0A93B; }
.alert-card.severity-low .alert-icon { background: rgba(137, 110, 192,0.12); color: #8B82A8; }

.alert-content { flex: 1; }
.alert-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.alert-desc { font-size: 13px; color: var(--text-secondary); }
.alert-meta { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state svg { width: 64px; height: 64px; margin-bottom: 16px; opacity: 0.3; }
.empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--text-secondary); }
.empty-state p { font-size: 14px; }

/* ============================================================
   TOOLTIP
   ============================================================ */
.tooltip { position: relative; }

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translateX(50%);
    padding: 6px 14px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 200;
    box-shadow: var(--shadow-md);
}

.tooltip:hover::after { opacity: 1; }

/* ============================================================
   RESPONSIVE — TABLET (768px)
   ============================================================ */
@media (max-width: 769px) {
    .sidebar { transform: translateX(100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.active { display: block; }
    .main-content { margin-right: 0; overflow-x: hidden; max-width: 100vw; }
    .hamburger-btn { display: flex; }
    .topbar-filters { display: none; }
    .topbar { padding: 0 12px; height: 56px; gap: 10px; overflow: hidden; }
    .page-content { padding: 12px; overflow-x: hidden; }

    /* Prevent any element from overflowing the viewport */
    .data-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
    .chart-card { max-width: 100%; overflow: hidden; }
    .kpi-grid { max-width: 100%; }
    .charts-grid { max-width: 100%; }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .charts-grid { grid-template-columns: 1fr; gap: 12px; }
    .chart-container { height: 220px; }

    /* פילטרים במובייל - שורת גלילה אופקית אחת במקום ערימה (22/07) */
    .filter-panel { padding: 8px 10px; }
    .filter-row {
        flex-wrap: nowrap; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding-bottom: 2px;
    }
    .filter-row::-webkit-scrollbar { display: none; }
    .period-group { flex: 0 0 auto; }
    .filter-pill-select { min-width: unset; flex: 0 0 auto; font-size: 12px; padding: 8px 12px; white-space: nowrap; }
    .filter-pill-btn { font-size: 12px; padding: 8px 14px; flex: 0 0 auto; white-space: nowrap; }
    .filter-pill-clear { flex: 0 0 auto; }

    .kpi-value { font-size: 22px; }
    .kpi-card { padding: 14px; min-height: unset; }
    .kpi-label { font-size: 12px; margin-bottom: 6px; }
    .kpi-delta { font-size: 11px; padding: 2px 8px; }

    .login-container { padding: 36px 24px; }
    .login-title { font-size: 26px; }

    /* Tables — horizontal scroll wrapper with scroll indicator */
    .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 550px; }
    .data-table th,
    .data-table td { padding: 10px 12px; font-size: 12px; white-space: nowrap; }

    /* Scroll indicator — gradient shadow on left edge */
    .data-table-wrap::after {
        content: 'גלול →';
        position: sticky;
        left: 0;
        display: block;
        text-align: center;
        font-size: 11px;
        color: var(--text-muted);
        padding: 6px 0;
        background: linear-gradient(180deg, rgba(137, 110, 192,0.08), transparent);
        pointer-events: none;
        opacity: 0.8;
    }

    .topbar-title h2 { font-size: 22px; }

    /* Drilldown mobile */
    .drilldown-area { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .drilldown-area .data-table { min-width: 600px; }
    .kpi-drilldown-area .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .kpi-drilldown-area .data-table { min-width: 550px; }

    /* Chart card mobile */
    .chart-card { padding: 14px; margin-bottom: 0; }
    .chart-header { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .chart-title { font-size: 13px; }
    .chart-export-btn { padding: 6px !important; }

    /* Section spacing */
    .section-divider { margin: 18px 0; }
    .section-title { font-size: 16px; margin-bottom: 12px; }

    /* Export dropdown — position right on mobile */
    .export-dropdown { left: auto; right: 0; }

    /* AI page mobile */
    #ai-response { font-size: 13px; padding: 12px !important; line-height: 1.7; }
    .share-actions { gap: 6px; flex-wrap: wrap; }
    .share-actions .btn { padding: 8px 12px; font-size: 12px; }

    /* Touch-friendly targets — minimum 44px tap height */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; padding: 8px 14px; }
    .filter-pill-select, .filter-pill-btn { min-height: 44px; }
    .nav-item { min-height: 44px; }
    .icon-btn { min-height: 44px; min-width: 44px; }

    /* Export buttons in chart headers — larger touch targets */
    .chart-export-btns button,
    .export-wrap button { min-height: 36px; padding: 6px 12px !important; }

    /* Topbar — compact layout, icons only on action buttons */
    /* האדר במובייל - שורת פעולות אחת בגלילה אופקית במקום 3 שורות (22/07) */
    .topbar { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 12px; }
    .topbar-actions {
        gap: 6px; flex-wrap: nowrap; width: 100%; justify-content: flex-start;
        margin-top: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding-bottom: 2px;
    }
    .topbar-actions::-webkit-scrollbar { display: none; }
    .topbar-actions .btn,
    .topbar-actions .btn-sm { font-size: 11px; padding: 6px 10px; min-height: 36px; flex: 0 0 auto; }
    .topbar-ai-btn { padding: 8px 12px; font-size: 12px; flex: 0 0 auto; justify-content: center; text-align: center; white-space: nowrap; }
    .topbar-actions > .export-wrap { display: none !important; }

    /* Admin form — responsive grid override */
    .chart-card div[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }

    /* Alert cards — no hover shift on mobile (touch) */
    .alert-card:hover { transform: none; }
}

/* ============================================================
   RESPONSIVE — MOBILE (480px)
   ============================================================ */
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .kpi-value { font-size: 18px; }
    .kpi-card { padding: 12px; }
    .topbar-title h2 { font-size: 16px; }
    .topbar { height: auto; min-height: 50px; flex-wrap: wrap; padding: 6px 10px; gap: 6px; }
    .chart-container { height: 180px; }

    .data-table { font-size: 11px; min-width: 480px; }
    .data-table th,
    .data-table td { padding: 7px 8px; }

    .btn { padding: 8px 14px; font-size: 13px; }
    .btn-sm { padding: 5px 10px; font-size: 11px; }
    .login-logo { width: 100px; }
    .login-title { font-size: 22px; }
    .login-subtitle { font-size: 12px; letter-spacing: 2px; }
    .login-container { padding: 32px 20px; }

    .icon-btn { padding: 8px; }
    .icon-btn svg { width: 16px; height: 16px; }
    .filter-panel { padding: 8px 10px; }
    .filter-pill-select { font-size: 11px; padding: 6px 10px; flex: 0 0 auto; }
    .filter-pill-btn { font-size: 11px; padding: 6px 10px; flex: 0 0 auto; }

    /* Period pills scroll on mobile */
    .period-pills { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .period-pill { flex-shrink: 0; font-size: 12px; padding: 6px 14px; }

    /* Sidebar mobile adjustments */
    .sidebar { width: 280px; }
    .sidebar-header { height: auto; padding: 8px 12px 6px; }
    .sidebar-logo { width: 140px; max-height: 60px; }
    .sidebar-nav { padding: 4px 8px; }
    .nav-item { padding: 10px 14px; font-size: 14px; min-height: 40px; }
    .nav-section-label { font-size: 12px; }

    /* KPI labels - smaller on mobile for long text */
    .kpi-label { font-size: 11px; }
    .kpi-value-sm { font-size: 16px !important; }

    /* Agent module mobile */
    .agent-hero-wrap { flex-direction: column; gap: 10px !important; padding: 12px !important; }
    .agent-hero-wrap h2 { font-size: 16px !important; }
    .agent-settings-grid { flex-direction: column; }
    .agent-email-col { flex: 1 1 100% !important; max-width: 100% !important; }
    .agent-cat-grid-wrap { grid-template-columns: 1fr 1fr !important; }
    .agent-bottom-bar { justify-content: center; }
    .agent-cat-row .alabel { font-size: 14px; }
    .agent-chip { font-size: 12px; padding: 6px 12px; }

    /* Monthly grid mobile */
    .chart-card div[style*="grid-template-columns"] { grid-template-columns: repeat(4, 1fr) !important; }

    /* Renewals/productions/claims tables scroll */
    .data-table-wrap { -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 600px; }

    /* Touch-friendly drilldown */
    .drilldown-area .data-table { min-width: 500px; }
    .drilldown-area .data-table td { padding: 10px 8px; }

    /* Page content tight */
    .page-content { padding: 10px 8px; }
    .charts-grid { gap: 10px; }
    .chart-card { padding: 12px; }
    .chart-title { font-size: 12px; }

    /* Login mobile */
    .login-screen { padding: 12px; }

    /* Touch targets mobile */
    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; padding: 7px 12px; }
    .filter-pill-select, .filter-pill-btn { min-height: 40px; }

    /* Topbar — שורת גלילה אופקית אחת גם ב-480 (22/07) */
    .topbar-actions { gap: 4px; width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .topbar-actions .btn,
    .topbar-actions .btn-sm { font-size: 10px; padding: 5px 8px; min-height: 32px; flex: 0 0 auto; }

    /* Sidebar credit mobile */
    .sidebar-credit { font-size: 9px; padding: 8px 12px; line-height: 1.4; }

    /* AI buttons - compact on small mobile */
    .topbar-ai-btn { padding: 6px 10px !important; font-size: 11px !important; min-height: 36px; flex: 0 0 auto; justify-content: center; white-space: nowrap; }
    .topbar-actions > .export-wrap { display: none !important; }
    .topbar-bot-icon { width: 14px; height: 18px; }
    .ai-button-row { flex-direction: column; }
    .ai-button-row > * { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; }

    /* Custom report checkbox grid - 2 columns */
    .report-checkbox-grid { grid-template-columns: 1fr 1fr !important; }
    .report-config-panel { padding: 14px !important; }

    /* Drilldown table — override inline min-width */
    .drilldown-area .data-table[style] { min-width: 500px !important; }

    /* Agent module small mobile */
    .agent-cat-grid-wrap { grid-template-columns: 1fr !important; }
    .agent-hero-wrap h2 { font-size: 14px !important; }
    .agent-bot { width: 40px !important; height: 50px !important; }

    /* Monthly grid small mobile */
    .chart-card div[style*="grid-template-columns"] { grid-template-columns: repeat(3, 1fr) !important; }

    /* KPI 2 columns always on small mobile */
    .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Admin form — single column on small mobile */
    .chart-card div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Share actions — stack vertically */
    .share-actions { flex-direction: column; }
    .share-actions .btn { width: 100%; justify-content: center; }

    /* Section title smaller */
    .section-title { font-size: 14px; }

    /* Scroll indicator text */
    .data-table-wrap::after { font-size: 10px; }
}

/* ============================================================
   RESPONSIVE — LANDSCAPE PHONES
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .topbar { height: 44px; }
    .topbar-title h2 { font-size: 16px; }
    .filter-panel { padding: 6px 10px; }
    .filter-row { gap: 4px; }
    .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .kpi-card { padding: 10px; }
    .kpi-value { font-size: 16px; }
    .kpi-label { font-size: 11px; }
    .chart-container { height: 160px; }
    .page-content { padding: 8px; }
}

/* ============================================================
   EXPORT DROPDOWN
   ============================================================ */
.export-wrap { position: relative; }

.export-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    min-width: 170px;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-normal);
}

.export-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.export-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 18px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: 'Sora', 'Heebo', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: right;
    white-space: nowrap;
}

.export-item:hover {
    background: rgba(137, 110, 192, 0.08);
    color: var(--green-light);
}

.export-item:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.export-item:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

/* ---------- Print Header & Footer (screen hidden) ---------- */
.print-header, .print-footer { display: none; }

/* ============================================================
   PRINT - Professional PDF (White Background, Dashboard Font)
   ============================================================ */
@media print {
    /* --- Hide UI chrome --- */
    .sidebar, .topbar, .hamburger-btn, .topbar-actions,
    .sidebar-overlay, .nav-tabs, .filter-panel, .export-wrap,
    .login-screen, #bg-canvas, .shimmer-line, .share-actions,
    .btn-primary, .btn, .chart-export-btn, .chart-export-btns, .drilldown-area,
    .kpi-drilldown-area, .export-dropdown,
    .charts-grid, .chart-container { display: none !important; }
    /* AI section: keep chart-card visible for #ai-response, hide chart headers */
    .chart-card { border: none !important; box-shadow: none !important; padding: 0 !important; background: white !important; }
    .chart-card .chart-header { display: none !important; }

    *, *::before, *::after { animation: none !important; transition: none !important; }

    @page { margin: 10mm 8mm 12mm; size: A4; }

    body {
        background: white !important;
        background-image: none !important;
        color: #222 !important;
        font-size: 10pt;
        font-family: 'Sora', 'Heebo', Arial, sans-serif !important;
        direction: rtl;
    }
    .dashboard, .main-content, .page-content {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ===== PRINT HEADER - Clean white design ===== */
    .print-header { display: block !important; margin: 0 0 12px; }

    .print-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        direction: rtl;
        padding-bottom: 10px;
    }
    .print-logo { width: 160px; height: auto; }
    .print-header-info { flex: 1; text-align: center; }
    .print-main-title {
        font-size: 20pt;
        font-weight: 800;
        color: #896EC0 !important;
        margin: 0;
        text-align: center;
        font-family: 'Sora', 'Heebo', Arial, sans-serif !important;
    }
    .print-date {
        font-size: 9pt;
        color: #888;
        margin: 4px 0 0;
        text-align: center;
    }

    /* Period block - prominent */
    .print-period-block {
        text-align: center;
        padding: 10px 0;
        margin: 6px 0;
        border-top: 1px solid #EDEAF9;
        border-bottom: 1px solid #EDEAF9;
    }
    .print-period-name {
        display: block;
        font-size: 14pt;
        font-weight: 800;
        color: #896EC0 !important;
        margin-bottom: 2px;
    }
    .print-period-range {
        display: block;
        font-size: 10pt;
        color: #555;
        font-weight: 500;
    }

    .print-separator {
        height: 2px;
        background: #896EC0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        margin: 10px 0;
    }

    /* ===== KPI Section ===== */
    .print-kpi-section { margin-bottom: 10px; }
    .print-section-heading {
        font-size: 12pt;
        font-weight: 700;
        color: #896EC0 !important;
        text-align: center;
        margin: 0 0 8px;
        font-family: 'Sora', 'Heebo', Arial, sans-serif !important;
    }
    .print-kpi-row {
        display: flex !important;
        gap: 8px;
        direction: rtl;
        justify-content: center;
    }
    .print-kpi-card {
        flex: 1;
        text-align: center;
        padding: 8px 6px;
        border: 1px solid #EDEAF9;
        border-radius: 6px;
    }
    .print-kpi-number {
        font-size: 14pt;
        font-weight: 800;
        color: #896EC0 !important;
        margin-bottom: 1px;
        font-family: 'Sora', 'Heebo', Arial, sans-serif !important;
    }
    .print-kpi-label {
        font-size: 7.5pt;
        color: #666;
        font-weight: 500;
    }

    /* ===== Page content ===== */
    .page-content { max-width: 100% !important; padding: 0 10px !important; }

    /* Dashboard KPI cards */
    .kpi-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; margin-bottom: 10px !important; }
    .kpi-card {
        break-inside: avoid; page-break-inside: avoid;
        border: 1px solid #EDEAF9 !important; box-shadow: none !important;
        background: white !important; backdrop-filter: none !important;
        padding: 10px !important;
    }
    .kpi-card::before { background: #896EC0 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .kpi-card::after { display: none !important; }
    .kpi-card.gold::before { background: #8B82A8 !important; }
    .kpi-value { color: #896EC0 !important; animation: none !important; text-shadow: none !important; font-size: 16pt !important; }
    .kpi-label { color: #555 !important; font-size: 8pt !important; }
    .kpi-delta { border: 1px solid #ccc !important; background: white !important; color: #896EC0 !important; }

    /* Charts */
    .charts-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .chart-card {
        break-inside: avoid; page-break-inside: avoid;
        border: 1px solid #EDEAF9 !important; box-shadow: none !important;
        background: white !important; backdrop-filter: none !important;
        animation: none !important; padding: 10px !important;
    }
    .chart-card::before, .chart-card::after { display: none !important; }
    .chart-title { color: #222 !important; font-weight: 700; font-size: 10pt !important; }
    .chart-container { height: 180px !important; }
    .chart-container, .chart-card, .kpi-card { transform: none !important; perspective: none !important; }
    .chart-3d-pie .chart-container, .chart-3d-bar .chart-container,
    .chart-3d-hbar .chart-container, .chart-3d-line .chart-container { transform: none !important; }
    .print-chart-img { display: block !important; width: 100% !important; height: auto !important; max-height: 220px !important; }
    .chart-container canvas { display: none !important; }

    /* Tables - fit page, no cut, tfoot once at end */
    .data-table-wrap {
        border: none !important; box-shadow: none !important;
        backdrop-filter: none !important; overflow: visible !important;
    }
    .data-table {
        min-width: unset !important; width: 100% !important;
        font-size: 8pt !important; border-collapse: collapse !important;
        font-family: 'Sora', 'Heebo', Arial, sans-serif !important;
    }
    .data-table th {
        background: #f5f5f5 !important; color: #222 !important;
        border-bottom: 2px solid #896EC0 !important;
        -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
        padding: 5px 6px !important; font-size: 7.5pt !important;
        white-space: nowrap !important;
    }
    .data-table td {
        color: #222 !important; border-bottom: 1px solid #eee !important;
        padding: 4px 6px !important; font-size: 7.5pt !important;
    }
    .data-table tbody tr:hover { background: none !important; box-shadow: none !important; }
    /* tfoot only at bottom, not repeated per page */
    .data-table tfoot { display: table-footer-group; }
    .data-table tfoot tr {
        background: #f9f0f1 !important;
        -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
    }
    .data-table tfoot td { color: #111 !important; font-weight: 700; }

    /* Section titles */
    .section-title {
        color: #896EC0 !important;
        border-bottom: 2px solid #896EC0 !important;
        -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
        padding-bottom: 4px !important;
        margin-bottom: 8px !important;
        font-size: 13pt !important;
        font-family: 'Sora', 'Heebo', Arial, sans-serif !important;
    }
    .section-divider { margin: 6px 0 !important; height: 1px !important; background: #ddd !important; }

    /* AI Response */
    #ai-response {
        background: white !important;
        color: #222 !important;
        border: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        font-size: 10pt !important;
        line-height: 1.8 !important;
        white-space: pre-wrap !important;
        font-family: 'Sora', 'Heebo', Arial, sans-serif !important;
    }
    .chart-card .btn, .chart-card button:not(.print-keep) { display: none !important; }

    /* ===== PRINT FOOTER ===== */
    .print-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 10px;
    }
    .print-footer-line {
        height: 2px;
        background: #896EC0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        margin-bottom: 4px;
    }
    .print-footer-text {
        text-align: center;
        font-size: 7pt;
        color: #888;
        margin: 0;
        direction: rtl;
        font-family: 'Sora', 'Heebo', Arial, sans-serif !important;
    }
}

/* ============================================================
   COMMISSIONS MODULE - מודול עמלות
   ============================================================ */
.comm-page { display: flex; flex-direction: column; gap: 16px; }
.comm-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.comm-tab-btn {
    padding: 9px 18px; font-size: 14px; font-weight: 600; font-family: 'Sora', 'Heebo', sans-serif;
    color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease;
}
.comm-tab-btn:hover { color: var(--text-primary); border-color: rgba(137, 110, 192, 0.4); }
.comm-tab-btn.active {
    color: #fff; background: rgba(137, 110, 192, 0.22); border-color: #896EC0;
    box-shadow: 0 0 14px rgba(137, 110, 192, 0.25);
}
.comm-card { display: flex; flex-direction: column; gap: 14px; }
.comm-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comm-form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comm-label { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.comm-label-wide { min-width: 180px; }
.comm-select {
    background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; font-family: 'Sora', 'Heebo', sans-serif;
    max-width: 100%;
}
.comm-num { width: 90px; }
.comm-file { color: var(--text-secondary); font-size: 13px; }
.comm-note { font-size: 12.5px; color: var(--text-secondary); }
.comm-warn { color: #E0A93B; }
.comm-step-title { font-size: 16px; font-weight: 700; color: #B4A8E4; }
.comm-step-sub { font-size: 14px; margin-top: 8px; }
.comm-kpis-sm .kpi-card { padding: 12px; }
.comm-table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
.comm-table-wrap .data-table { min-width: 640px; width: 100%; }
.comm-actions-cell { display: flex; gap: 6px; }
.comm-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.comm-badge-ok { background: rgba(79,193,139, 0.12); color: #4FC18B; }
.comm-badge-minor { background: rgba(224,169,59, 0.14); color: #E0A93B; }
.comm-badge-major { background: rgba(230,107,107, 0.15); color: #E66B6B; }
.comm-badge-unmatched { background: rgba(137, 110, 192, 0.15); color: #B4A8E4; }
.comm-badge-clawback { background: rgba(74, 59, 122, 0.28); color: #B4A8E4; }
.comm-finding-card {
    border: 1px dashed rgba(180, 168, 228, 0.5); border-radius: var(--radius-sm);
    padding: 14px 16px; margin: 6px 0; display: flex; flex-direction: column; gap: 8px;
    background: rgba(137, 110, 192, 0.06);
}
.comm-finding-title { font-weight: 700; color: #B4A8E4; }
.comm-finding-text { font-size: 14px; color: var(--text-primary); }
.comm-finding-meta { font-size: 12px; color: var(--text-secondary); }
.comm-finding-card .btn { align-self: flex-start; }
.comm-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 18px; }
.comm-map-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.comm-map-row .comm-select { flex: 1; min-width: 140px; }
.comm-letter-area {
    width: 100%; min-height: 220px; background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px;
    font-family: 'Sora', 'Heebo', sans-serif; font-size: 13.5px; line-height: 1.6; resize: vertical;
}
.comm-quote { font-size: 11.5px; color: var(--text-secondary); max-width: 260px; }
.comm-editor { display: flex; flex-direction: column; gap: 12px; }
/* א-03: תור התאמה. כל פריט הוא הכרעה אחת, ולכן הוא כרטיס ולא שורת טבלה -
   בטבלה המועמדות והחיפוש לא נכנסים לתא בלי לשבור את הפריסה במובייל. */
.comm-queue-item {
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.comm-queue-head { display: flex; flex-direction: column; gap: 3px; }
.comm-queue-cands, .comm-queue-search, .comm-queue-results {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.comm-queue-search .comm-input { flex: 1 1 220px; min-width: 0; }
@media (max-width: 768px) {
    .comm-queue-search { flex-direction: column; align-items: stretch; }
    .comm-queue-search .comm-input { flex: 1 1 auto; }
    .comm-queue-cands .btn, .comm-queue-results .btn { width: 100%; text-align: right; }
}
.comm-modal-overlay {
    position: fixed; inset: 0; background: rgba(10, 10, 15, 0.72); z-index: 300;
    display: flex; align-items: center; justify-content: center; padding: 18px;
}
.comm-modal {
    background: #1b1a22; border: 1px solid rgba(137, 110, 192, 0.35); border-radius: 14px;
    width: min(760px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}
.comm-modal-title { padding: 16px 20px 8px; font-size: 17px; font-weight: 700; color: #B4A8E4; }
.comm-modal-body { padding: 8px 20px; overflow-y: auto; }
.comm-modal-foot { padding: 12px 20px 16px; display: flex; gap: 10px; justify-content: flex-start; }
.comm-toast {
    position: fixed; bottom: 26px; right: 50%; transform: translate(50%, 20px); opacity: 0;
    background: #2E2B38; color: var(--text-primary); border: 1px solid rgba(137, 110, 192, 0.5);
    padding: 12px 22px; border-radius: 10px; font-size: 14px; z-index: 400;
    transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.comm-toast.show { opacity: 1; transform: translate(50%, 0); }
.comm-toast-err { border-color: rgba(230,107,107, 0.6); color: #E66B6B; }
.comm-summary { min-height: 20px; }

/* תווית עיגון חוק בהסכם (מ-11) */
.comm-ground-badge {
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    background: rgba(137, 110, 192, 0.18); color: #B4A8E4;
}
.comm-ground-grounded { background: rgba(106, 176, 118, 0.18); color: #6AB076; border-color: rgba(106, 176, 118, 0.4); }
.comm-ground-partial { background: rgba(224, 169, 59, 0.18); color: #E0A93B; border-color: rgba(224, 169, 59, 0.4); }
.comm-ground-ungrounded { background: rgba(230, 107, 107, 0.2); color: #E66B6B; border-color: rgba(230, 107, 107, 0.5); }
.comm-quote-evidence {
    background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 10px 12px; font-size: 12.5px; line-height: 1.8; color: var(--text-secondary);
    max-height: 180px; overflow-y: auto;
}

/* חיווי בקרת המספרים על פלט מודל (מ-05) */
.comm-guard-ok { color: #6AB076; }
.comm-guard-list {
    margin: 4px 0 10px; padding-inline-start: 20px;
    font-size: 12.5px; line-height: 1.75; color: var(--text-secondary);
}
.comm-guard-list li { margin-bottom: 4px; }

/* מסך שליחת השגה - עריכה, נמען ותצוגה מקדימה (ב-02) */
.comm-send-wrap { display: flex; flex-direction: column; gap: 8px; }
.comm-send-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-top: 4px; }
.comm-send-input {
    width: 100%; background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 9px 12px; font-size: 13.5px; box-sizing: border-box;
}
.comm-send-row { display: flex; gap: 8px; align-items: flex-end; }
.comm-send-row > div { flex: 1; min-width: 0; }
.comm-send-preview {
    background: #ffffff; color: #25232B; border-radius: var(--radius-sm);
    padding: 16px 18px; margin-top: 8px; max-height: 320px; overflow-y: auto;
}
.comm-send-preview-head { font-size: 16px; font-weight: 700; color: #202239; }
.comm-send-preview-sub { font-size: 12.5px; font-weight: 600; color: #4A3B7A; margin-top: 3px; }
.comm-send-preview-p {
    font-size: 13px; line-height: 1.85; color: #25232B; margin: 12px 0 0;
    white-space: pre-wrap;
}

/* חוק ברירת מחדל (א-04) - נבדל מחוק רגיל בעין, כי הוא המוצא האחרון בהכרעה */
.comm-badge-default { background: rgba(74, 59, 122, 0.42); color: var(--green-light); border: 1px dashed rgba(180, 168, 228, 0.55); }
.comm-rule-default > td { background: rgba(74, 59, 122, 0.14); }
.comm-default-row {
    padding: 8px 10px; border: 1px dashed rgba(180, 168, 228, 0.45);
    border-radius: var(--radius-sm); background: rgba(137, 110, 192, 0.07);
}
.comm-default-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green-primary); cursor: pointer; }
.comm-default-row label { cursor: pointer; }
.comm-disabled { opacity: 0.42; pointer-events: none; }

/* דוח כסף אבוד תקופתי (ב-03): תיבת "מה לא נכלל" בולטת בכוונה */
.comm-caveats {
    border: 1px solid rgba(224, 169, 59, 0.32);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 16px 0;
    background: rgba(224, 169, 59, 0.06);
}
.comm-caveats .comm-guard-list li { margin-bottom: 8px; line-height: 1.75; }

/* מסך ענפים ותתי-ענפים (ד-01) */
.comm-tax-branch {
    border: 1px solid rgba(180, 168, 228, 0.16);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: rgba(52, 48, 67, 0.35);
}
.comm-tax-branch .comm-form-row { align-items: center; flex-wrap: wrap; gap: 8px; }
.comm-row-muted { opacity: 0.55; }
.comm-input-wide { width: 100%; min-width: 220px; }
.btn-danger { border-color: rgba(230, 107, 107, 0.55); color: #E66B6B; }
.btn-danger:hover { background: rgba(230, 107, 107, 0.12); border-color: rgba(230, 107, 107, 0.8); }

/* מטריצת כיסוי: תת-ענף מול חברה (א-07) */
.comm-matrix { min-width: 720px; }
.comm-matrix th { white-space: nowrap; }
.comm-matrix-head { min-width: 130px; }
.comm-matrix-td { padding: 4px !important; }
.comm-matrix-cell {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 100%; min-width: 104px; min-height: 56px; padding: 7px 8px;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--bg-input); color: var(--text-secondary);
    font-family: 'Sora', 'Heebo', sans-serif; font-size: 11.5px; line-height: 1.35;
    cursor: pointer; text-align: center; transition: all 0.18s ease;
}
.comm-matrix-cell:hover { border-color: var(--green-primary); transform: translateY(-1px); }
.comm-matrix-mark { font-size: 15px; font-weight: 700; line-height: 1; }
.comm-matrix-sub { font-size: 10.5px; }
.comm-matrix-demand { font-size: 10px; color: var(--text-muted); }
.comm-matrix-covered { background: rgba(79, 193, 139, 0.10); border-color: rgba(79, 193, 139, 0.35); color: #4FC18B; }
.comm-matrix-default { background: rgba(224, 169, 59, 0.10); border-color: rgba(224, 169, 59, 0.35); color: var(--orange); }
.comm-matrix-hole { background: rgba(180, 168, 228, 0.06); border-color: rgba(180, 168, 228, 0.22); color: var(--text-muted); }
/* חור בכיסוי שכבר יש בו שורות בפועל - זה החור שעולה כסף עכשיו */
.comm-matrix-hot {
    background: rgba(230, 107, 107, 0.16); border-color: rgba(230, 107, 107, 0.6); color: var(--red);
    box-shadow: 0 0 12px rgba(230, 107, 107, 0.22);
}
.comm-matrix-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.comm-matrix-key {
    font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border-color);
}

/* שורת טבלה שנפתחת בלחיצה: בקרת פערים (מ-04) ודף ההתחשבנות (ג-01) */
.comm-row-click { cursor: pointer; transition: background 0.15s ease; }
.comm-row-click:hover > td { background: rgba(137, 110, 192, 0.10); }
.comm-row-click:focus-visible { outline: 2px solid #896EC0; outline-offset: -2px; }

/* חלון "למה יצא המספר הזה" (מ-04) */
.comm-why { display: flex; flex-direction: column; gap: 10px; }
.comm-why-rule {
    font-size: 13.5px; font-weight: 600; color: var(--text-primary);
    background: rgba(137, 110, 192, 0.10); border: 1px solid rgba(180, 168, 228, 0.28);
    border-radius: var(--radius-sm); padding: 9px 12px;
}
.comm-why-win > td { background: rgba(79, 193, 139, 0.10); font-weight: 700; }
.comm-why-missing > td { background: rgba(224, 169, 59, 0.10); color: #E0A93B; }

/* דף ההתחשבנות - פירוט שורה-שורה (ג-01) */
.comm-ledger { display: flex; flex-direction: column; gap: 10px; }
.comm-ledger-open > td { background: rgba(180, 168, 228, 0.08); }
.comm-ledger-total > td { background: rgba(137, 110, 192, 0.16); font-weight: 700; color: var(--text-primary); }
.comm-ledger-total-cell { font-weight: 700; color: #B4A8E4; }
.comm-adj-list { display: flex; flex-direction: column; gap: 8px; }
.comm-adj-row { gap: 8px; }
.comm-adj-label { flex: 1 1 150px; min-width: 120px; }
.comm-adj-note { flex: 2 1 240px; min-width: 150px; }
.comm-settle-none { background: rgba(180, 168, 228, 0.12); color: var(--text-secondary); }
.comm-settle-draft { background: rgba(180, 168, 228, 0.16); color: #B4A8E4; }
.comm-settle-approved { background: rgba(224, 169, 59, 0.14); color: #E0A93B; }
.comm-settle-paid { background: rgba(79, 193, 139, 0.12); color: #4FC18B; }
.comm-settle-disputed { background: rgba(230, 107, 107, 0.15); color: #E66B6B; }

@media (max-width: 768px) {
    .comm-tab-btn { flex: 1 1 auto; text-align: center; padding: 8px 10px; font-size: 12.5px; }
    .comm-map-grid { grid-template-columns: 1fr; }
    .comm-table-wrap .data-table { min-width: 560px; }
    .comm-form-row .comm-select { flex: 1 1 140px; }
    .comm-matrix { min-width: 620px; }
    .comm-matrix-cell { min-width: 92px; min-height: 52px; padding: 6px; }
    .comm-default-row { flex-wrap: nowrap; }
    .comm-adj-row { flex-wrap: wrap; }
    .comm-adj-label, .comm-adj-note { flex: 1 1 100%; }
}
@media (max-width: 480px) {
    .comm-kpis .kpi-card, .comm-kpis-sm .kpi-card { padding: 10px; }
    .comm-modal { width: 100vw; max-height: 94vh; }
    .comm-letter-area { min-height: 160px; }
    .comm-send-row { flex-direction: column; align-items: stretch; }
    .comm-send-preview { padding: 12px 14px; }
    .comm-matrix { min-width: 540px; }
    .comm-matrix-head { min-width: 100px; }
    .comm-matrix-cell { min-width: 84px; min-height: 48px; font-size: 10.5px; }
    .comm-matrix-sub { font-size: 9.5px; }
    .comm-label-wide { min-width: 130px; }
    .comm-why-rule { font-size: 12.5px; padding: 8px 10px; }
    .comm-adj-row .comm-num { width: 100%; }
    /* מסכי ד-01 ו-ב-03 במסך צר: שוליים מצומצמים, כפתורי פעולה בשורה שנשברת */
    .comm-tax-branch, .comm-caveats { padding: 10px 12px; }
    .comm-tax-branch .comm-form-row { gap: 6px; }
    .comm-input-wide { min-width: 0; }
}

/* ============================================================
   תלת-מימד לכפתורים + תפריט דינמי (הוראת נתי 22/07/2026)
   כפתור ממולא/ממוסגר = הבלטה אמיתית: פס אור עליון, צל תחתון,
   ריחוף מרים, לחיצה שוקעת. כפתורי קו-חוט = הרמה עדינה בלבד.
   ============================================================ */
.btn, .btn-primary, .btn-sm, .icon-btn, .login-btn,
.topbar-ai-btn, .chart-export-btn, .agent-chip, .mini-btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
}
.btn:hover, .btn-primary:hover, .btn-sm:hover, .icon-btn:hover,
.topbar-ai-btn:hover, .chart-export-btn:hover, .agent-chip:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 5px 14px rgba(0, 0, 0, 0.4), 0 0 12px rgba(137, 110, 192, 0.18);
}
.btn:active, .btn-primary:active, .btn-sm:active, .icon-btn:active,
.topbar-ai-btn:active, .chart-export-btn:active, .agent-chip:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* כפתורי קו-חוט - הרמה עדינה בריחוף, בלי קופסה */
.filter-pill-btn:hover, .filter-pill-select:hover, .period-pill:hover {
    transform: translateY(-1px);
}

/* תפריט צד דינמי: פריט נמשך קלות פנימה, אייקון גדל וזוהר */
.nav-item svg, .nav-item span {
    transition: transform 0.18s ease, filter 0.18s ease;
}
.nav-item:hover {
    transform: translateX(-3px);
}
.nav-item:hover svg {
    transform: scale(1.12);
    filter: drop-shadow(0 0 6px rgba(137, 110, 192, 0.5));
    color: var(--green-light);
}
.nav-item.active svg {
    filter: drop-shadow(0 0 5px rgba(137, 110, 192, 0.45));
}
.nav-section-label {
    transition: color 0.18s ease, transform 0.18s ease;
}
.nav-section-label:hover {
    color: var(--text-white);
    transform: translateX(-2px);
}

/* חציצה עדינה בין לשוניות התפריט (הוראת נתי 22/07): קו שיער בין פריט לפריט */
.sidebar-nav .nav-item,
.sidebar-nav .nav-section-label {
    border-bottom: 1px solid rgba(180, 168, 228, 0.09);
}
.sidebar-nav .nav-section-body .nav-item:last-child {
    border-bottom: none;
}

/* ברק אלכסוני עדין על כרטיסי גרפים - עומק זכוכית בלי עלות ביצועים */
.chart-card { position: relative; }
.chart-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.055), transparent 42%);
    pointer-events: none;
    border-radius: inherit;
}
.data-table-wrap {
    background: linear-gradient(155deg, rgba(180, 168, 228, 0.08) 0%, rgba(52, 48, 67, 0.48) 50%, rgba(37, 35, 43, 0.72) 100%);
    border: 1px solid rgba(180, 168, 228, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* חלקיקי רקע בשיטת הטמפלט (variant-11): CSS בלבד, רץ על ה-compositor - אפס עומס JS */
.bg-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.bg-particles span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: var(--green-light);
    animation: ms-drift linear infinite;
    will-change: transform;
}
.bg-particles span:nth-child(3n) { background: var(--green-primary); }
@keyframes ms-drift {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(var(--dx, 14px), var(--dy, -28px), 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* ============================================================
   SplitMind - מעטפת המוצר העצמאי (05/09/2026)
   ⛔ המחלקות האלה נכתבו ב-index.html ולא היו בגיליון שהועתק, ולכן הלוגו
   בפס העליון הוצג בגודלו המקורי ותפס את כל המסך. נתפס בייצור.
   ============================================================ */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    background: #25232B;
    border-bottom: 1px solid rgba(180, 168, 228, 0.14);
}
.topbar-right,
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-logo { height: 30px; width: auto; display: block; }
.topbar-title {
    font-size: 15px; font-weight: 600; color: #F4F1FC;
    padding-right: 12px; border-right: 1px solid rgba(180, 168, 228, 0.22);
}
.topbar-user { font-size: 13px; color: #B4A8E4; }
.topbar-btn {
    background: transparent; color: #B4A8E4; cursor: pointer;
    border: 1px solid rgba(180, 168, 228, 0.3); border-radius: 8px;
    padding: 6px 14px; font-size: 13px; font-family: inherit;
}
.topbar-btn:hover { background: rgba(137, 110, 192, 0.14); color: #F4F1FC; }

.page-root { padding: 20px; }

/* מסך הפתיחה - מוצג רק כשאין ספר פוליסות */
.empty-state {
    max-width: 520px; margin: 80px auto; padding: 32px;
    text-align: center; background: #2A2833; border-radius: 14px;
    border: 1px solid rgba(180, 168, 228, 0.14);
}
.empty-state h2 { color: #896EC0; font-size: 20px; margin: 0 0 12px; }
.empty-state p { color: #B4A8E4; font-size: 14px; line-height: 1.7; margin: 0 0 22px; }

@media (max-width: 768px) {
    .topbar { padding: 8px 12px; gap: 8px; }
    .topbar-logo { height: 24px; }
    .topbar-title { font-size: 13px; padding-right: 8px; }
    .page-root { padding: 12px; }
    .empty-state { margin: 32px 12px; padding: 22px; }
}
@media (max-width: 375px) {
    .topbar-title { display: none; }
    .topbar-user { font-size: 12px; }
}


/* ============================================================
   ⛔ תיקון פריסה, 05/09/2026 - נתפס בייצור על ידי הבעלים.
   .dashboard בגיליון שהועתק מוגדר display:flex כדי להעמיד סרגל צד לצד
   התוכן. במוצר הזה אין סרגל צד והמעטפת אנכית (פס עליון מעל תוכן), ולכן
   שני הילדים נדחסו זה לצד זה, התוכן גלש מחוץ למסך ונחתך.
   הכלל הזה חייב לבוא אחרי ההגדרה המקורית כדי לגבור עליה.
   ============================================================ */
.dashboard {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.dashboard > .topbar { width: 100%; }
.page-root { width: 100%; max-width: 100%; overflow-x: auto; }

/* ניווט בסרגל העליון (05/09/2026) - שלושת מסכי המוצר */
.topbar-nav { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.topbar-nav .topbar-btn { border-color: transparent; }
.topbar-nav .topbar-nav-on {
    background: rgba(137, 110, 192, 0.22);
    border-color: #896EC0;
    color: #fff;
}
@media (max-width: 768px) {
    /* ⛔ בלי flex-wrap על הסרגל עצמו הכפתורים נדחקו מעל הלוגו ומתחתיו,
       ולא לשורה אחת מתחת - נצפה בצילום 375. */
    .topbar { flex-wrap: wrap; }
    /* ⛔ flex-basis ולא width: הכלל הבסיסי מגדיר flex: 1, כלומר בסיס 0%,
       והוא גובר על width בפריסת flex. נמדד בדפדפן: 128 פיקסלים במקום 375. */
    .topbar-nav { order: 3; flex: 1 0 100%; justify-content: flex-start; margin-top: 8px; }
    .topbar-nav .topbar-btn { font-size: 12px; padding: 6px 10px; }
}