/* الألوان والمسافات كلها في tokens.css — الملف ده بيستخدم var(--x) بس */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;font-variant-numeric:tabular-nums;line-height:var(--lh-base)}

/* ── شاشة الدخول · القائمة · الهيكل · الموبايل → shell.css ── */

/* ── ALERT BANNER ── */
.alert-banners{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.alert-banner{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:11px;font-size:13px;font-weight:600}
.alert-banner.exceeded{background:var(--red-light);color:var(--red);border:1px solid var(--bad-line)}
.alert-banner.warning{background:var(--yellow-light);color:var(--yellow);border:1px solid var(--warn-line)}
.alert-banner i{font-size:16px;flex-shrink:0}

/* ── STAT CARDS ── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;margin-bottom:22px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:8px}
.si-blue{background:var(--accent-light);color:var(--accent)}
.si-green{background:var(--green-light);color:var(--green)}
.si-red{background:var(--red-light);color:var(--red)}
.si-purple{background:var(--color-accent-2-soft);color:var(--accent2)}
.stat-label{font-size:11px;color:var(--text2);font-weight:700;margin-bottom:3px}
.stat-value{font-size:24px;font-weight:900}
.sv-red{color:var(--red)} .sv-green{color:var(--green)}
.stat-sub{font-size:11px;color:var(--text3);margin-top:2px}

/* ── CHARTS ── */
.charts-row{display:grid;grid-template-columns:3fr 2fr;gap:13px;margin-bottom:22px}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.chart-title{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:12px}

/* ── BUDGET BARS ── */
.budget-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:22px}
.budget-section h4{font-size:13px;font-weight:700;margin-bottom:14px;color:var(--text2)}
.budget-item{margin-bottom:13px}
.budget-item:last-child{margin-bottom:0}
.budget-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.budget-cat{font-size:13px;font-weight:700}
.budget-nums{font-size:11px;color:var(--text2)}
.progress-bar{height:8px;background:var(--bg2);border-radius:20px;overflow:hidden}
.progress-fill{height:100%;border-radius:20px;transition:width .5s ease}
.pf-ok{background:var(--green)}
.pf-warning{background:var(--yellow)}
.pf-exceeded{background:var(--red)}

/* ── TABLE ── */
.table-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.table-header{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface2)}
.table-title{font-size:13px;font-weight:700}
/* table/th/td/badge → components.css */
.amount{font-weight:700;font-size:13px}
.by-user{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:3px}

/* ── BUTTONS · MODAL · FORM → components.css ── */

/* ── MONTH NAV ── */
.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.month-nav{display:flex;align-items:center;gap:3px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:4px 7px;box-shadow:var(--shadow)}
.month-nav button{background:none;border:none;color:var(--text2);cursor:pointer;font-size:14px;padding:3px 7px;border-radius:7px;transition:all .12s}
.month-nav button:hover{color:var(--accent);background:var(--accent-light)}
.month-display{font-weight:700;font-size:13px;min-width:110px;text-align:center;color:var(--text)}

/* ── SECTION CARD ── */
.section-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.section-card h3{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-card h3 i{color:var(--accent)}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--bg2);font-size:13px}
.summary-row:last-child{border-bottom:none}
.summary-row .lbl{color:var(--text2);font-weight:600}
.summary-row .val{font-weight:700}
.profit-pos{color:var(--green);font-size:17px;font-weight:900}
.profit-neg{color:var(--red);font-size:17px;font-weight:900}
.closed-badge{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ok-line);padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700}
.open-badge{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--warn-line);padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700}

/* ── REPORTS ── */
.reports-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:18px}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);text-align:center}
.kpi-label{font-size:12px;color:var(--text2);font-weight:700;margin-bottom:6px}
.kpi-value{font-size:28px;font-weight:900}
.kpi-sub{font-size:12px;color:var(--text3);margin-top:3px}
.year-select{background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:7px 14px;font-family:inherit;font-size:13px;font-weight:700;color:var(--text);cursor:pointer}
.trend-arrow{font-size:13px;font-weight:700;margin-right:4px}
.trend-up{color:var(--red)}   /* زيادة في المصروفات = سيئ */
.trend-down{color:var(--green)}

/* ── TOAST → components.css ── */

/* ── MISC ── */
.cat-pill{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;background:var(--surface);border:1.5px solid var(--border);cursor:pointer;transition:all .12s;color:var(--text2)}
.cat-pill:hover,.cat-pill.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}

.divider{height:1px;background:var(--border);margin:8px 0}
/* ── الموبايل: قواعد الصفحات القديمة بس (الهيكل في shell.css) ── */
@media (max-width: 768px) {
  .charts-row, .reports-grid, .form-row { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .section-card { padding: 14px 12px; margin-bottom: 14px; }
  table { min-width: 480px; }
  th, td { padding: 8px 10px; }
  #employees-salary-table { min-width: 600px; font-size: 11px; }
  #employees-salary-table input { width: 70px !important; }
  #live-day-detail { padding: 0; }
}