:root{
  --bg:#f0f4f8;
  --card:#ffffff;
  --text:#1e293b;
  --text-muted:#64748b;
  --accent:#0f766e;
  --accent-hover:#115e59;
  --accent-2:#16a34a;
  --accent-light:#dbeafe;
  --muted:#64748b;
  --danger:#dc2626;
  --success:#059669;
  --warning:#fbbf24;
  --info:#0ea5e9;
  --purple:#8b5cf6;
  --pink:#ec4899;
  --chart-grid: rgba(100, 116, 139, 0.22);
  --chart-axis: #475569;
  --chart-surface: rgba(148,163,184,0.06);
  --chart-surface-border: rgba(148,163,184,0.18);
  --chart-tooltip-bg: rgba(15,23,42,0.92);
  --chart-tooltip-text: #ffffff;
  --chart-tooltip-border: rgba(226,232,240,0.9);
  --sidebar-gradient-1:#064e3b;
  --sidebar-gradient-2:#0f766e;
  --border:#e2e8f0;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Ensure mobile controls are hidden by default; shown only in mobile media queries below */
#mobile-menu-btn{ display:none; }

/* Mobile dropdown & bottom-nav accessibility focus states */
.mobile-dropdown li:focus-visible,
.mobile-dropdown .mobile-dropdown-close:focus-visible,
.mobile-bottom-nav .mbn-btn:focus-visible,
.mobile-bottom-nav .mbn-fab:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
}

/* Improve overlay stacking and pointer behavior */
.mobile-dropdown-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1390; display:none; }
.mobile-dropdown-overlay.open{ display:block; }


:root.dark-mode{
  --bg:#0f172a;
  --card:#1e293b;
  --text:#e2e8f0;
  --text-muted:#94a3b8;
  --accent:#34d399;
  --accent-hover:#10b981;
  --accent-2:#22c55e;
  --accent-light:#1e3a5f;
  --muted:#64748b;
  --danger:#ef4444;
  --success:#10b981;
  --warning:#f59e0b;
  --info:#38bdf8;
  --purple:#a78bfa;
  --pink:#f472b6;
  --chart-grid: rgba(148, 163, 184, 0.22);
  --chart-axis: #cbd5e1;
  --chart-surface: rgba(148,163,184,0.08);
  --chart-surface-border: rgba(148,163,184,0.16);
  --chart-tooltip-bg: rgba(2,6,23,0.92);
  --chart-tooltip-text: #ffffff;
  --chart-tooltip-border: rgba(148,163,184,0.26);
  --sidebar-gradient-1:#022c22;
  --sidebar-gradient-2:#064e3b;
  --border:#334155;
}

/* Direction handled by JS (html[dir] is updated in app.js) */
body{ margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.65; transition:background 0.3s ease, color 0.3s ease; }

::selection{ background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }

/* RTL/LTR: keep layout consistent across fa/ku/en */
html[dir="rtl"] body{ direction:rtl; text-align:right; }
html[dir="ltr"] body{ direction:ltr; text-align:left; }

input, textarea, select{ direction:inherit; text-align:start; }
.form-container label{ text-align:start; }

::placeholder{ color: color-mix(in srgb, var(--text-muted) 78%, transparent); }

/* Global form defaults (low specificity; component classes still win) */
:where(button, input, select, textarea){
  font: inherit;
}

:where(input[type="text"], input[type="number"], input[type="date"], input[type="search"], input[type="password"], textarea, select){
  box-sizing: border-box;
  max-width: 100%;
}

:where(input[type="text"], input[type="number"], input[type="date"], input[type="search"], input[type="password"], textarea, select){
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(textarea){
  min-height: 110px;
  resize: vertical;
}

:where(select){
  cursor: pointer;
}

:where(input[type="text"], input[type="number"], input[type="date"], input[type="search"], input[type="password"], textarea, select):focus{
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 75%, var(--border));
}

/* Horizontal table scroll containers */
.u-overflow-x-auto{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Generic helpers */
.hidden{ display:none; }

/* Skip link (keyboard users) */
.skip-link{
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 5000;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}

.skip-link:focus{
  transform: translateY(0);
}

/* Utility classes (CSP-friendly: replace inline style="...") */
.u-flex{ display:flex; }
.u-grid{ display:grid; }
.u-flex-col{ flex-direction:column; }
.u-flex-wrap{ flex-wrap:wrap; }
.u-flex-1{ flex:1; }

.empty-state{ text-align:center; color:#9ca3af; padding:20px; }
.table-empty-cell{ text-align:center; }
.td-strong{ font-weight:700; }

.text-success{ color:var(--success); }
.text-danger{ color:var(--danger); }

.receipt-number{ font-weight:700; color:#2563eb; }
:root.dark-mode .receipt-number{ color:#60a5fa; }

.receipt-type{ font-weight:700; }
.receipt-type-income{ color:var(--success); }
.receipt-type-expense{ color:var(--danger); }

.search-no-results{ padding:16px; text-align:center; color:#9ca3af; }
.search-no-results:focus-visible{ background:var(--accent-light); border-radius:10px; }

.recent-activity-item{ padding:12px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.recent-activity-left{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.recent-activity-icon{ font-size:18px; margin-inline-start:0; }
.recent-activity-desc{ font-weight:600; color:#374151; }
:root.dark-mode .recent-activity-desc{ color:var(--text); }
.recent-activity-date{ font-size:13px; color:#6b7280; }
:root.dark-mode .recent-activity-date{ color:var(--text-muted); }
.recent-activity-amount{ font-weight:700; }

.u-align-center{ align-items:center; }
.u-align-end{ align-items:flex-end; }
.u-items-end{ align-items:end; }
.u-justify-between{ justify-content:space-between; }

.u-gap-6{ gap:6px; }
.u-gap-8{ gap:8px; }
.u-gap-10{ gap:10px; }
.u-gap-12{ gap:12px; }
.u-gap-16{ gap:16px; }

.u-mt-0{ margin-top:0; }
.u-mt-8{ margin-top:8px; }
.u-mt-10{ margin-top:10px; }
.u-mt-12{ margin-top:12px; }
.u-mt-14{ margin-top:14px; }
.u-mt-20{ margin-top:20px; }
.u-mb-6{ margin-bottom:6px; }
.u-mb-10{ margin-bottom:10px; }
.u-mb-12{ margin-bottom:12px; }
.u-mb-15{ margin-bottom:15px; }
.u-mb-16{ margin-bottom:16px; }
.u-mb-20{ margin-bottom:20px; }

.u-p-8{ padding:8px; }
.u-p-12{ padding:12px; }
.u-py-12{ padding-top:12px; padding-bottom:12px; }
.u-p-20{ padding:20px; }

.u-w-100{ width:100%; }
.u-minw-180{ min-width:180px; }
.u-text-center{ text-align:center; }
.u-minw-200{ min-width:200px; }
.u-maxw-520{ max-width:520px; }
.u-h-180{ height:180px; }
.modal-error{ min-height:18px; margin-top:10px; color:var(--danger); font-weight:700; font-size:13px; }
.u-minh-40{ min-height:40px; }

.print-options-grid{ display:grid; grid-template-columns:1fr; gap:10px; padding:12px 0; }
.option-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--card); cursor:pointer; }
.option-row__checkbox{ width:18px; height:18px; }
.option-row__label{ font-weight:700; color:var(--text); }
.u-overflow-x-auto{ overflow-x:auto; }

.auth-user-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:2px solid var(--border); border-radius:10px; background:var(--card); }
.auth-user-name{ font-weight:800; color:var(--text); }
.auth-user-actions{ display:flex; gap:8px; }
/* Table helpers */
.table-zebra tbody tr:nth-child(even){ background:#f8fafc; }
:root.dark-mode .table-zebra tbody tr:nth-child(even){ background:rgba(148,163,184,0.06); }

/* Sortable table headers */
.sortable-th{ cursor:pointer; user-select:none; position:relative; }
.sort-indicator{ position:absolute; inset-inline-end:8px; opacity:0.4; font-size:10px; }

.u-fw-600{ font-weight:600; }
.u-fw-800{ font-weight:800; }

.u-fs-13{ font-size:13px; }
.u-fs-14{ font-size:14px; }
.u-fs-18{ font-size:18px; }

.u-text{ color:var(--text); }
.u-text-muted{ color:var(--text-muted); }
.u-text-slate-600{ color:#475569; }
.u-color-blue-900{ color:#1e40af; }

.u-border-top{ border-top:1px solid var(--border); }
.u-border{ border:1px solid var(--border); }
.u-pt-14{ padding-top:14px; }
.u-radius-8{ border-radius:8px; }
.u-radius-10{ border-radius:10px; }
.u-bg-card{ background:var(--card); }
.u-bg-slate-50{ background:#f1f5f9; }

.u-lh-17{ line-height:1.7; }
.u-pre-line{ white-space:pre-line; }

.u-mis-6{ margin-inline-start:6px; }
.u-ml-6{ margin-left:6px; }

.u-grid-cols-2{ grid-template-columns:1fr 1fr; }
.u-grid-cols-2-auto{ grid-template-columns:1fr 1fr auto; }
.u-col-span-2{ grid-column:span 2; }
.u-block{ display:block; }

/* Persian Font Support */
html[lang="fa"], html[lang="fa"] *,
[lang="fa"], [lang="fa"] * {
  font-family: "Vazirmatn", "Vazir", Tahoma, "Segoe UI", Arial, sans-serif !important;
}

/* Kurdish Font Support */
html[lang="ku"], html[lang="ku"] *,
[lang="ku"], [lang="ku"] * {
  font-family: "Rudaw", Tahoma, "Segoe UI", Arial, sans-serif !important;
}

.app{ display:flex; min-height:100vh; }

/* Offline page helpers (no inline styles) */
.offline-container{ max-width:720px; margin:40px auto; padding:20px; }
.offline-card{ padding:18px; }
.offline-title{ margin:0 0 8px 0; }
.offline-body{ margin:0; line-height:1.9; }
.offline-actions{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.offline-note{ margin-top:14px; color:var(--text-muted); font-size:13px; }

/* Sidebar */
.sidebar{ width:280px; background:linear-gradient(180deg,var(--sidebar-gradient-1),var(--sidebar-gradient-2)); color:#fff; padding:16px; box-sizing:border-box; box-shadow:4px 0 20px rgba(0,0,0,0.1); position:relative; overflow-y:auto; }
.sidebar-top{ display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:16px;padding:12px;background:rgba(255,255,255,0.1);border-radius:12px;backdrop-filter:blur(10px); }

/* Language Selector */
.language-selector{ margin-bottom:16px; padding:8px; background:rgba(255,255,255,0.08); border-radius:10px; }
.language-buttons{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.btn-lang{ flex:1; min-width:60px; padding:8px 12px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); border-radius:8px; color:#fff; font-weight:600; font-size:12px; cursor:pointer; transition:all 0.2s ease; }
.btn-lang:hover{ background:rgba(255,255,255,0.25); transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.2); }
.btn-lang:active{ transform:translateY(0); }
.btn-lang.active{ background:rgba(255,255,255,0.35); border-color:rgba(255,255,255,0.5); box-shadow:0 0 0 2px rgba(255,255,255,0.3); }
.company-logo{ max-width:120px; max-height:70px; object-fit:contain; border-radius:10px; background:#fff;padding:8px; box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:transform 0.3s ease; }
.company-logo:hover{ transform:scale(1.05); }
.logo{ margin:0; font-size:19px; text-align:center; color:#fff; font-weight:700; text-shadow:0 2px 4px rgba(0,0,0,0.2); letter-spacing:0.5px; }
.sidebar nav ul{ list-style:none; padding:0; margin:0; }
.sidebar nav li{ padding:11px 14px; margin-bottom:6px; border-radius:10px; cursor:pointer; font-size:14px; transition:all 0.25s ease; font-weight:500; border:1px solid transparent; position:relative; display:flex; align-items:center; gap:10px; }
.nav-icon{ font-size:18px; display:inline-block; min-width:24px; text-align:center; }
.nav-text{ flex:1; }
.sidebar nav li.active{ background:rgba(255,255,255,0.25); transform:translateX(-4px); box-shadow:0 3px 10px rgba(0,0,0,0.15); border-color:rgba(255,255,255,0.3); }

/* Mobile drawer behavior */
@media (max-width: 900px) {
  /* Stack app vertically on small screens */
  .app{ flex-direction:column; }
  .main-content{ padding-bottom:100px; }

  /* narrower mobile drawer to avoid covering main content */
  .sidebar{ position:fixed; top:0; left:-240px; height:100%; width:200px; z-index:1200; box-shadow:8px 0 30px rgba(0,0,0,0.4); transition:left 0.28s ease; }
  body.sidebar-open .sidebar{ left:0; }
  /* dark overlay when sidebar open */
  .sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1100; }
  body.sidebar-open .sidebar-overlay{ display:block; }
  /* show mobile menu button */
  .btn-icon.hidden{ display:none; }
  #mobile-menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:8px; background:transparent; color:var(--text); border:1px solid rgba(0,0,0,0.06); font-size:18px; margin-inline-end:8px; position:relative; z-index:1300; }
  /* When sidebar opens, push the main app content to the right so text isn't obscured */
  .app{ margin-left:0; }
  .main-content{ transition: margin-left 0.28s ease; }
  /* force margin to override other layout rules */
  body.sidebar-open .main-content{ margin-left: 200px !important; }
}

/* Mobile bottom navigation styles */
@media (max-width: 900px) {
  .mobile-bottom-nav{ display:flex; position:fixed; inset-inline-start:0; inset-inline-end:0; bottom:env(safe-area-inset-bottom,0); height:64px; padding:8px calc(8px + env(safe-area-inset-left,0)); gap:8px; align-items:center; justify-content:space-between; background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98)); border-top:1px solid var(--border); z-index:1600; box-shadow:0 -6px 20px rgba(0,0,0,0.08); }
  .mobile-bottom-nav.hidden{ display:flex; }
  .mbn-btn{ flex:1; height:48px; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:10px; background:transparent; border:0; font-weight:700; color:var(--text); font-size:12px; padding:6px; cursor:pointer; }
  .mbn-btn .mbn-label{ font-size:11px; display:block; line-height:1; }
  .mbn-btn:active, .mbn-btn:focus{ transform:translateY(-1px); }
  .mbn-fab{ position:relative; width:56px; height:56px; border-radius:16px; background:var(--accent); color:#fff; border:0; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 6px 18px rgba(15,118,110,0.2); margin-inline:8px; cursor:pointer; }
  .mbn-fab:active{ transform:scale(0.98); }
  /* FAB animation when menu open */
  body.mobile-menu-open .mbn-fab{ transform:scale(1.02); box-shadow:0 10px 26px rgba(15,118,110,0.24); }
  body.mobile-menu-open .mbn-fab::after{ content:''; position:absolute; inset:-6px; border-radius:18px; box-shadow:0 10px 30px rgba(16,185,129,0.08); }
  /* subtle label fade for bottom nav */
  .mbn-label{ opacity:0.95; transition:opacity 180ms ease, transform 180ms ease; }
  .mbn-btn:active .mbn-label{ transform:translateY(-2px); }
  /* hide desktop-only elements in mobile bottom nav context */
  .sidebar{ display:none !important; }
}

/* small visual indicator near status bar when mobile menu is open (mobile-only) */
@media (max-width:900px){
  .mobile-open-indicator{ position:fixed; top:10px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; z-index:1800; display:none; box-shadow:0 6px 18px rgba(15,118,110,0.18); }
  body.mobile-menu-open .mobile-open-indicator{ display:block; }
}

/* Keep desktop layout unchanged: hide bottom nav on wide screens */
@media (min-width: 901px){
  .mobile-bottom-nav{ display:none !important; }
}

/* Show mobile menu button by default (make visible on all viewports for testing) */
/* NOTE: moved to mobile-only rules to avoid affecting desktop layout */

/* Mobile dropdown menu (for narrow screens) */
@media (max-width: 900px) {
  /* hide the full sidebar on small screens; use dropdown instead */
  .sidebar{ display:none !important; }
  .app-statusbar__left{ position:relative; }
  /* center modal dropdown in viewport */
  .mobile-dropdown-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1390; }
  .mobile-dropdown-overlay.open{ display:block; }
  /* Bottom sheet style for mobile */
  .mobile-dropdown{ display:block; position:fixed; left:0; right:0; bottom:0; transform:translateY(100%); width:100%; height:min(80vh,520px); max-height:80vh; overflow:auto; background:var(--card); border-top-left-radius:16px; border-top-right-radius:16px; border:1px solid var(--border); box-shadow:0 -12px 40px rgba(0,0,0,0.18); z-index:1400; padding:6px 8px; transition:transform 260ms cubic-bezier(.2,.8,.2,1); }
  .mobile-dropdown.open{ transform:translateY(0); }
  .mobile-dropdown ul{ list-style:none; margin:0; padding:8px; }
  .mobile-dropdown-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
  .mobile-dropdown-header h3{ margin:0; font-size:16px; font-weight:900; }
  .mobile-dropdown-close{ background:transparent; border:0; font-size:20px; line-height:1; padding:6px 8px; border-radius:10px; cursor:pointer; }
  .mobile-lang-wrap{ padding:8px 12px 4px 12px; display:flex; gap:8px; justify-content:flex-end; }
  .mobile-dropdown li{ padding:10px 12px; margin-bottom:6px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:10px; background:transparent; border:1px solid transparent; font-weight:600; }
  .mobile-dropdown li:hover{ background: color-mix(in srgb, var(--accent-light) 80%, var(--card)); transform:translateX(-2px); }
  .mobile-dropdown .nav-icon{ min-width:20px; }
}

/* When the mobile dropdown is open, prevent background scrolling and ensure overlay accepts pointer events */
.mobile-dropdown-overlay{ pointer-events:none; }
.mobile-dropdown-overlay.open{ pointer-events:auto; }
html.mobile-dropdown-open, body.mobile-dropdown-open{ overflow:hidden; touch-action:none; }

/* Desktop: ensure overlay hidden */
.sidebar-overlay{ display:none; }
.sidebar nav li.active::before{ content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:4px; height:60%; background:#fff; border-radius:2px; }
.sidebar nav li:hover{ background:rgba(255,255,255,0.15); transform:translateX(-2px); border-color:rgba(255,255,255,0.2); }

/* Keyboard accessibility */
.sidebar nav li:focus-visible{
  outline:3px solid rgba(255,255,255,0.75);
  outline-offset:3px;
}

/* Safe & Debt Cards */
.safe-card, .debt-card{
  position:relative;
  border:2px solid rgba(255,255,255,0.28);
  margin-top:16px;
  border-radius:14px;
  padding:16px;
  backdrop-filter:blur(16px);
  transition:all 0.3s ease;
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
  text-align:start;
}
.safe-card{ background:linear-gradient(135deg,rgba(16,185,129,0.28),rgba(5,150,105,0.18)); }
.debt-card{ background:linear-gradient(135deg,rgba(220,38,38,0.26),rgba(185,28,28,0.16)); }
.safe-card:hover, .debt-card:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,0.22); }
.safe-card:hover{ background:linear-gradient(135deg,rgba(16,185,129,0.36),rgba(5,150,105,0.26)); }
.debt-card:hover{ background:linear-gradient(135deg,rgba(220,38,38,0.34),rgba(185,28,28,0.24)); }

.safe-card .card-icon, .debt-card .card-icon{ font-size:30px; opacity:0.95; margin-bottom:6px; }

.safe-card h4, .debt-card h4{
  margin:0 0 10px 0;
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:0.2px;
  opacity:0.92;
}

.safe-balance{
  margin-top:2px;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,0.22);
}

/* Project items editor: CSP-safe focus/hover (replaces inline handlers) */
.item-row .item-type:focus,
.item-row .item-value:focus{
  outline:none;
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,0.18);
}

.item-row .item-price:focus{
  outline:none;
  border-color:#10b981 !important;
  box-shadow:0 0 0 3px rgba(16,185,129,0.18);
}

.item-row .remove-item{
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.item-row .remove-item:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(220,38,38,0.3);
}

.safe-balance > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  font-size:14px;
  font-weight:800;
}

.safe-balance > div + div{ margin-top:8px; }

/* Main Content */
.main-content{ flex-grow:1; padding:28px; background:var(--bg); overflow-y:auto; position:relative; }
.main-content::before{ content:''; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:50%; height:50%; background-image:var(--company-logo); background-repeat:no-repeat; background-position:center; background-size:contain; opacity:0.03; pointer-events:none; z-index:0; transition:opacity 0.3s ease; }
.main-content section{ padding-bottom:32px; position:relative; z-index:1; }
.main-content section.hidden{ display:none; }

/* App status bar (network + PWA updates) */
.app-statusbar{
  position: sticky;
  top: 0;
  z-index: 5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  margin: -8px 0 12px 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(8px);
}

.app-statusbar__right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--card);
}

.badge--online{ border-color: rgba(5,150,105,0.35); }
.badge--online::before{ content:'●'; color: var(--success); font-size: 12px; }
.badge--offline{ border-color: rgba(220,38,38,0.35); }
.badge--offline::before{ content:'●'; color: var(--danger); font-size: 12px; }

.app-version{ color: var(--text-muted); font-weight: 800; font-size: 12px; }

/* Top summary (moved from sidebar) */
.top-summary{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin:6px auto 14px auto;
  max-width:1100px;
}

.summary-card{
  flex:1;
  min-width:260px;
  max-width:360px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
}

.summary-card__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.summary-card__icon{ font-size:24px; }

.summary-card__title{
  margin:0;
  font-size:14px;
  font-weight:800;
  color:var(--text);
}

.summary-card--safe{ border-top:4px solid var(--success); }
.summary-card--proj{ border-top:4px solid var(--accent); }
.summary-card--debt{ border-top:4px solid var(--danger); }

.top-balance > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(148,163,184,0.12);
  border:1px solid rgba(148,163,184,0.22);
  font-size:14px;
  font-weight:800;
  color:var(--text);
}

:root.dark-mode .top-balance > div{
  background:rgba(148,163,184,0.10);
  border-color:rgba(148,163,184,0.20);
}

.top-balance > div + div{ margin-top:10px; }

@media (max-width: 900px){
  .top-summary{ gap:12px; margin-bottom:12px; }
  .summary-card{ min-width:240px; padding:12px; }
}

@media (max-width: 600px){
  .main-content{ padding:18px; }
  .top-summary{ gap:10px; margin:4px auto 12px auto; }
  .summary-card{ min-width:100%; max-width:100%; padding:12px; border-radius:12px; }
  .summary-card__head{ gap:8px; margin-bottom:8px; }
  .summary-card__icon{ font-size:22px; }
  .summary-card__title{ font-size:13px; }
  .top-balance > div{ padding:9px 10px; font-size:13px; border-radius:10px; }
  .top-balance > div + div{ margin-top:8px; }
}

/* Header & Search */
.header-actions{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding:16px 20px; background:linear-gradient(135deg,#ecfdf5,#ccfbf1); border-radius:12px; border:2px solid #99f6e4; box-shadow:0 2px 10px rgba(15,118,110,0.12); transition:all 0.3s ease; }
:root.dark-mode .header-actions{ background:linear-gradient(135deg,rgba(15,118,110,0.18),rgba(5,150,105,0.10)); border-color:rgba(45,212,191,0.25); }
.header-actions h2{ margin:0; font-size:26px; color:var(--accent); font-weight:800; letter-spacing:-0.5px; display:flex; align-items:center; gap:10px; }
.section-icon{ font-size:28px; }
.global-search-wrapper{ position:relative; max-width:350px; flex-shrink:0; }
.search-input{ width:100%; padding:10px 40px 10px 14px; border:2px solid var(--border); border-radius:10px; font-size:14px; transition:all 0.3s ease; background:var(--card); color:var(--text); }
.search-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,118,110,0.18); }
.search-results{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--card); border:2px solid var(--border); border-radius:10px; margin-top:4px; max-height:400px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.15); z-index:100; }
.search-result-item{ padding:12px; cursor:pointer; border-bottom:1px solid var(--border); transition:background 0.2s; }
.search-result-item:hover{ background:var(--accent-light); }
.search-result-item:focus-visible{ background:var(--accent-light); }
.search-result-item[aria-selected="true"]{ background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.search-result-item:last-child{ border-bottom:none; }

/* Dashboard Stats */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-bottom:24px; }
.stat-card{ color:#fff; padding:24px; border-radius:14px; transition:all 0.3s ease; cursor:default; position:relative; overflow:hidden; }
.stat-card::before{ content:''; position:absolute; top:-50%; right:-50%; width:200%; height:200%; background:radial-gradient(circle,rgba(255,255,255,0.1),transparent); opacity:0; transition:opacity 0.3s ease; }
.stat-card:hover::before{ opacity:1; }
.stat-card:hover{ transform:translateY(-4px); }
.stat-card-blue{ background:linear-gradient(135deg,var(--accent-hover),var(--accent)); box-shadow:0 4px 12px rgba(37,99,235,0.3); }
.stat-card-green{ background:linear-gradient(135deg,#10b981,#059669); box-shadow:0 4px 12px rgba(16,185,129,0.3); }
.stat-card-orange{ background:linear-gradient(135deg,#f59e0b,#d97706); box-shadow:0 4px 12px rgba(245,158,11,0.3); }
.stat-card-purple{ background:linear-gradient(135deg,#8b5cf6,#7c3aed); box-shadow:0 4px 12px rgba(139,92,246,0.3); }
.stat-card:hover.stat-card-blue{ box-shadow:0 8px 24px rgba(37,99,235,0.4); }
.stat-card:hover.stat-card-green{ box-shadow:0 8px 24px rgba(16,185,129,0.4); }
.stat-card:hover.stat-card-orange{ box-shadow:0 8px 24px rgba(245,158,11,0.4); }
.stat-card:hover.stat-card-purple{ box-shadow:0 8px 24px rgba(139,92,246,0.4); }
.stat-label{ font-size:14px; opacity:0.9; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.stat-icon{ font-size:20px; }
.stat-value{ font-size:32px; font-weight:800; }

/* Alerts */
.alerts-container{ margin-bottom:24px; }

/* Make multiple alerts stack cleanly */
.alerts-container{ display:grid; gap:12px; }

.alert{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  min-width:0;
}

.alert__icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:18px;
  line-height:1;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(148,163,184,0.25);
}

:root.dark-mode .alert__icon{
  background:rgba(30,41,59,0.6);
  border-color:rgba(148,163,184,0.22);
}

.alert__text{
  font-weight:800;
  color:var(--text);
  line-height:1.7;
  overflow-wrap:anywhere;
}

.alert--warning{ background:linear-gradient(135deg,rgba(245,158,11,0.20),rgba(245,158,11,0.08)); border-color:rgba(245,158,11,0.35); }
.alert--warning .alert__icon{ background:rgba(245,158,11,0.20); border-color:rgba(245,158,11,0.25); }

.alert--info{ background:linear-gradient(135deg,rgba(59,130,246,0.18),rgba(59,130,246,0.08)); border-color:rgba(59,130,246,0.30); }
.alert--info .alert__icon{ background:rgba(59,130,246,0.18); border-color:rgba(59,130,246,0.22); }

.alert--success{ background:linear-gradient(135deg,rgba(16,185,129,0.18),rgba(16,185,129,0.08)); border-color:rgba(16,185,129,0.30); }
.alert--success .alert__icon{ background:rgba(16,185,129,0.18); border-color:rgba(16,185,129,0.22); }

/* Dashboard pro polish */
#dashboard-section{ max-width:1100px; margin:0 auto; position:relative; }

#dashboard-section::before{
  content:'';
  position:absolute;
  inset:-24px 0 auto 0;
  height:240px;
  background:
    radial-gradient(900px 240px at 15% 15%, rgba(15,118,110,0.16), transparent 60%),
    radial-gradient(700px 220px at 90% 0%, rgba(59,130,246,0.14), transparent 55%);
  pointer-events:none;
  z-index:-1;
}

:root.dark-mode #dashboard-section::before{
  background:
    radial-gradient(900px 240px at 15% 15%, rgba(52,211,153,0.12), transparent 60%),
    radial-gradient(700px 220px at 90% 0%, rgba(56,189,248,0.10), transparent 55%);
}

/* Executive summary */
.executive-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-bottom:24px;
}

@media (min-width: 980px){
  .executive-grid{ grid-template-columns: 1.2fr 0.9fr 0.9fr; align-items: stretch; }
}

.executive-card{ padding:18px; }

.executive-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px 0;
  font-size:16px;
  font-weight:900;
  color:color-mix(in srgb, var(--text) 78%, var(--accent));
  border-bottom:none;
  padding-bottom:0;
}

.executive-icon{ font-size:20px; }

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

@media (min-width: 740px){
  .kpi-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

.kpi{
  border-radius:14px;
  padding:12px 12px;
  border:1px solid rgba(148,163,184,0.22);
  background:
    radial-gradient(560px 180px at 18% 20%, rgba(15,118,110,0.10), transparent 60%),
    rgba(148,163,184,0.08);
  min-height:72px;
}

:root.dark-mode .kpi{
  background:
    radial-gradient(560px 180px at 18% 20%, rgba(52,211,153,0.10), transparent 60%),
    rgba(148,163,184,0.08);
}

.kpi__label{
  color: var(--text-muted);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.kpi__value{
  margin-top:6px;
  font-weight: 1000;
  font-size: 14px;
  color: var(--text);
  overflow-wrap:anywhere;
}

.kpi__hint{
  margin-top:4px;
  font-weight: 800;
  font-size: 12px;
  color: var(--text-muted);
}

.executive-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 10px;
}

.executive-insights{
  list-style:none;
  padding:0;
  margin:0 0 12px;
  display:grid;
  gap:8px;
}

.executive-insight{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.22);
  background:rgba(148,163,184,0.06);
}

:root.dark-mode .executive-insight{
  background:rgba(148,163,184,0.08);
  border-color:rgba(148,163,184,0.18);
}

.executive-insight--ok{ border-color: rgba(16,185,129,0.28); }
.executive-insight--warn{ border-color: rgba(245,158,11,0.28); }
.executive-insight--bad{ border-color: rgba(239,68,68,0.28); }

.executive-insight__title{ font-weight:1000; color: var(--text); font-size:13px; }
.executive-insight__meta{ margin-top:4px; font-weight:800; color: var(--text-muted); font-size:12px; }
.executive-insight__right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.executive-link{
  background:transparent;
  border:1px solid rgba(148,163,184,0.28);
  color: var(--text);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:1000;
  font-size:12px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.executive-link:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,0.10);
  border-color:rgba(15,118,110,0.38);
  background:rgba(15,118,110,0.06);
}

.executive-link--inline{ padding:4px 8px; border-radius:999px; }

.executive-list{
  margin: 0;
  padding: 0 18px 0 0;
  display:grid;
  gap:8px;
}

html[dir="ltr"] .executive-list{ padding: 0 0 0 18px; }

.executive-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.22);
  background:rgba(148,163,184,0.06);
}

:root.dark-mode .executive-list li{
  background:rgba(148,163,184,0.08);
  border-color:rgba(148,163,184,0.18);
}

.executive-item__name{ font-weight:900; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.executive-item__meta{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.executive-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(148,163,184,0.24);
  background:rgba(148,163,184,0.10);
  color: var(--text);
}

.executive-chip--danger{ border-color: rgba(239,68,68,0.28); color: color-mix(in srgb, var(--danger) 85%, var(--text)); }
.executive-chip--ok{ border-color: rgba(16,185,129,0.28); color: color-mix(in srgb, var(--success) 85%, var(--text)); }

/* Charts */
.charts-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; margin-bottom:24px; }
.chart-card{ position:relative; }
.chart-title{ display:flex; align-items:center; gap:10px; }
.chart-icon{ font-size:22px; }
.chart-container{
  height:320px;
  max-height:none;
  position:relative;
  border-radius:12px;
  background:
    radial-gradient(600px 200px at 20% 10%, rgba(15,118,110,0.10), transparent 60%),
    radial-gradient(520px 200px at 90% 0%, rgba(59,130,246,0.08), transparent 55%),
    var(--chart-surface);
  border:1px solid var(--chart-surface-border);
  padding:10px;
}
:root.dark-mode .chart-container{
  background:
    radial-gradient(600px 200px at 20% 10%, rgba(52,211,153,0.10), transparent 60%),
    radial-gradient(520px 200px at 90% 0%, rgba(56,189,248,0.08), transparent 55%),
    var(--chart-surface);
  border-color:var(--chart-surface-border);
}

.chart-container--sm{
  height:240px;
  border-radius:14px;
}

.dashboard-row{ display:grid; gap:20px; margin-bottom:24px; }
.dashboard-row--2{ grid-template-columns:1fr; }
.dashboard-row--3{ grid-template-columns:1fr; }
@media (min-width: 980px){
  .dashboard-row--2{ grid-template-columns:1fr 1.25fr; align-items:start; }
}

/* Keep dashboard-row--3 stacked vertically on all screen sizes */
.dashboard-row--3{ grid-template-columns:1fr; align-items:stretch; }

.report-card .report-toolbar{ margin-bottom:10px; }
.report-card select{ min-width: 160px; }
.report-actions{ flex-wrap:wrap; justify-content:flex-end; }
.chart-container canvas{ width:100% !important; height:100% !important; }

/* Income/Expense report polish */
.report-summary{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.report-summary__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}

.report-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.24);
  background:rgba(148,163,184,0.10);
  color:var(--text);
  font-weight:800;
  font-size:13px;
}

:root.dark-mode .report-chip{
  border-color:rgba(148,163,184,0.20);
  background:rgba(148,163,184,0.08);
}

.report-metrics{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

@media (min-width: 780px){
  .report-metrics{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

.report-metric{
  border-radius:14px;
  padding:12px 12px;
  border:1px solid rgba(148,163,184,0.22);
  background:
    radial-gradient(520px 160px at 20% 20%, rgba(15,118,110,0.10), transparent 60%),
    rgba(148,163,184,0.08);
}

:root.dark-mode .report-metric{
  background:
    radial-gradient(520px 160px at 20% 20%, rgba(52,211,153,0.10), transparent 60%),
    rgba(148,163,184,0.08);
}

.report-metric__label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-muted);
  font-weight:900;
  font-size:12px;
  letter-spacing:0.2px;
}

.report-metric__value{
  margin-top:6px;
  font-weight:900;
  font-size:14px;
  color:var(--text);
  overflow-wrap:anywhere;
}

.report-metric--income{ border-color: rgba(16,185,129,0.28); }
.report-metric--income .report-metric__label{ color: var(--success); }

.report-metric--project{ border-color: rgba(6,182,212,0.28); }
.report-metric--project .report-metric__label{ color: var(--info); }

.report-metric--expense{ border-color: rgba(239,68,68,0.28); }
.report-metric--expense .report-metric__label{ color: var(--danger); }

.report-metric--net{ border-color: rgba(139,92,246,0.28); }
.report-metric--net .report-metric__label{ color: var(--purple); }

.report-divider{
  height:1px;
  background:rgba(148,163,184,0.22);
  border-radius:999px;
}

:root.dark-mode .report-divider{ background:rgba(148,163,184,0.18); }

.report-series-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.report-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.24);
  background:rgba(148,163,184,0.10);
  color:var(--text);
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  user-select:none;
}

.report-toggle input{
  width:16px;
  height:16px;
}

.report-toggle:hover{ background:rgba(148,163,184,0.14); }

:root.dark-mode .report-toggle{
  border-color:rgba(148,163,184,0.20);
  background:rgba(148,163,184,0.08);
}

.report-toggle--income{ border-color: rgba(16,185,129,0.32); }
.report-toggle--expense{ border-color: rgba(239,68,68,0.32); }
.report-toggle--project{ border-color: rgba(6,182,212,0.32); }
.report-toggle--net{ border-color: rgba(139,92,246,0.32); }

/* Activities */
.activities-card{ padding:28px; }
.activities-title{ display:flex; align-items:center; gap:10px; }
.activities-icon{ font-size:22px; }
.activities-list{ max-height:320px; overflow-y:auto; border-radius:12px; border:1px solid rgba(148,163,184,0.22); background:rgba(148,163,184,0.06); }
:root.dark-mode .activities-list{ background:rgba(148,163,184,0.08); border-color:rgba(148,163,184,0.18); }

.activities-list .recent-activity-item{ padding:10px; }
.activities-list .recent-activity-icon{ font-size:16px; }
.activities-list .recent-activity-date{ font-size:12px; }

/* Dashboard card headings: less "heavy" than default .card h4 */
.card h4.chart-title,
.card h4.activities-title,
.card.report-card > h4,
.card.filter-card > h4{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:12px;
  font-size:16px;
  letter-spacing:-0.2px;
}

.card.report-card > h4,
.card.filter-card > h4{
  display:flex;
  align-items:center;
  gap:10px;
  color:color-mix(in srgb, var(--text) 75%, var(--accent));
  font-weight:900;
}

.card.report-card > h4::before{
  content:'📈';
  font-size:20px;
}

.card.filter-card > h4::before{
  content:'🔎';
  font-size:20px;
}

.activities-list .recent-activity-item:last-child{ border-bottom:none; }

/* Theme Toggle */
.theme-card{ }
.theme-toggle-container{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; background:rgba(248,250,252,0.5); border-radius:10px; transition:all 0.3s ease; }
:root.dark-mode .theme-toggle-container{ background:rgba(30,41,59,0.5); }
.theme-label{ display:flex; align-items:center; gap:12px; font-weight:600; color:var(--text); flex:1; cursor:pointer; }
.theme-label-icon{ font-size:20px; }
.theme-label-text{ flex:1; }
.theme-toggle-switch{ position:relative; display:inline-block; width:60px; height:30px; }
.theme-toggle-switch input{ opacity:0; width:0; height:0; }
.toggle-slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#cbd5e1; transition:0.4s; border-radius:30px; }
.toggle-thumb{ position:absolute; height:22px; width:22px; left:4px; bottom:4px; background-color:white; transition:0.4s; border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,0.2); }
.theme-toggle-switch input:checked + .toggle-slider{ background-color:#10b981; }
.theme-toggle-switch input:checked + .toggle-slider + .toggle-thumb{ transform:translateX(30px); }
.settings-icon{ font-size:22px; margin-left:4px; }

/* Card */
.card{ background:var(--card); padding:28px; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,0.08); margin-bottom:24px; border:1px solid var(--border); transition:all 0.3s ease; position:relative; overflow:hidden; }
.card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.card:hover{ box-shadow:0 6px 24px rgba(0,0,0,0.12); transform:translateY(-3px); }
.card h4{ margin-top:0; font-size:19px; border-bottom:3px solid var(--accent-light); padding-bottom:14px; margin-bottom:20px; color:var(--accent); font-weight:700; letter-spacing:-0.3px; }

:root.dark-mode .card{ box-shadow:0 10px 26px rgba(0,0,0,0.26); border-color:rgba(148,163,184,0.18); }
:root.dark-mode .card:hover{ box-shadow:0 14px 32px rgba(0,0,0,0.34); }
.filter-card{ background:linear-gradient(135deg,rgba(248,250,252,0.8),rgba(241,245,249,0.8)); border:2px solid var(--border); }
:root.dark-mode .filter-card{ background:linear-gradient(135deg,rgba(30,41,59,0.5),rgba(15,23,42,0.5)); }
.filter-card input, .filter-card select{ padding:10px 12px; border:2px solid var(--border); border-radius:8px; transition:all 0.2s; background:var(--card); color:var(--text); font-size:13px; }
.filter-card input:focus, .filter-card select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,118,110,0.18); }
.filter-card input:hover, .filter-card select:hover{ border-color:var(--accent-hover); }

.report-card select,
.report-card button{
  white-space:nowrap;
}

@media (max-width: 768px){
  .report-card .u-flex-1{ display:none; }
  .report-actions{ width:100%; justify-content:flex-start; }
}

/* Form */
.form-container{ display:grid; grid-template-columns:1fr; gap:18px; }
.form-container label{ font-size:14px; font-weight:600; color:var(--muted); margin-top:6px; display:block; margin-bottom:6px; }
.form-container input[type="text"], 
.form-container input[type="number"], 
.form-container input[type="date"], 
.form-container select,
.form-container textarea{
  width:100%;
  padding:12px 14px;
  border:2px solid #cbd5e1;
  border-radius:10px;
  box-sizing:border-box;
  font-size:14px;
  transition:all 0.3s ease;
  background:var(--card);
  color:var(--text);
}
.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(15,118,110,0.18);
  transform:translateY(-1px);
}
.form-container input:hover,
.form-container select:hover,
.form-container textarea:hover{
  border-color:var(--accent-hover);
}
.modal-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }

/* Buttons Enhanced */
.btn-icon{ font-size:16px; margin-left:6px; display:inline-block; }

/* Receipt Print View - A5 Optimized */
.receipt-container{
  width:148mm;
  min-height:210mm;
  margin:0 auto;
  padding:15mm;
  box-sizing:border-box;
  background:#fff;
  font-size:11pt;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  border-radius:8px;
}
.receipt-header{ display:flex; align-items:center; justify-content:flex-start; margin-bottom:20px; gap:15px; }
.receipt-logo{ max-width:80px; max-height:50px; object-fit:contain; }
.receipt-company-name{ font-size:18px; margin:0; color:#222; }
.receipt-company-info{ font-size:12px; margin:2px 0; color:var(--muted); }
.receipt-title{ text-align:center; font-size:20px; border-bottom:2px solid #222; padding-bottom:10px; margin-bottom:20px; }
.receipt-details div, .receipt-project-info div{ font-size:14px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.receipt-details span, .receipt-project-info span{ font-weight:600; color:var(--muted); }
.receipt-project-info{ border-top:1px solid #eee; margin-top:15px; padding-top:15px; }
.receipt-project-info h4{ font-size:16px; margin-bottom:10px; }
.receipt-footer{ margin-top:30px; border-top:1px dashed #ccc; padding-top:15px; text-align:center; }
.receipt-footer p{ margin:0; font-size:12px; }

/* A5 Print Media Query */
@media print {
  /* Enforce direction/alignment in print mode based on html[dir] */
  html[dir="rtl"],
  html[dir="rtl"] body{ direction: rtl !important; }
  html[dir="rtl"] body{ text-align: right !important; }

  html[dir="ltr"],
  html[dir="ltr"] body{ direction: ltr !important; }
  html[dir="ltr"] body{ text-align: left !important; }

  @page {
    /* Default print size for full documents (reports/projects). */
    size: A4;
    margin: 12mm;
  }
  
  html, body{ background:#fff !important; }
  body{ margin:0; padding:0; color:#000; font-size:11pt; line-height:1.45; }

  /* Watermark (company logo) behind printed pages */
  .main-content{ background:#fff !important; }
  .main-content::before{
    opacity:0.10 !important;
    width:70% !important;
    height:70% !important;
    z-index:0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Let watermark show through content blocks a bit */
  .card,
  .receipt-container{
    background:rgba(255,255,255,0.88) !important;
  }

  /* Hide interactive UI chrome when printing the main app screen. */
  .sidebar,
  .header-actions,
  .modal,
  .auth-overlay,
  .toast-container,
  .theme-toggle-switch,
  .modal-actions,
  button,
  [role="button"],
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-danger{
    display:none !important;
  }

  /* Print-friendly containers */
  .card{ box-shadow:none !important; transform:none !important; border-radius:10px; break-inside:avoid; }
  .card::before{ display:none !important; }
  
  .receipt-container {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 10mm;
    border: none;
    break-after: avoid;
    box-shadow: none;
    border-radius: 0;
  }

  /* Tables: keep headers, avoid breaking rows */
  table{ width:100% !important; border-collapse:collapse !important; }
  thead{ display:table-header-group; }
  tfoot{ display:table-footer-group; }
  tr, th, td{ break-inside:avoid; page-break-inside:avoid; }
  .projects-table{ min-width:0 !important; }
  .projects-table th, .projects-table td{ padding:8px 10px !important; font-size:11pt !important; }

  img, svg, canvas{ max-width:100% !important; height:auto !important; }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .sidebar { width: 240px; padding: 14px; }
  .main-content { padding: 20px; }
  .projects-table th, .projects-table td { padding: 10px 12px; font-size: 13px; }
  .stats-grid{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
  .charts-grid{ grid-template-columns:1fr; }
}

@media (max-width: 768px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; }
  .main-content { padding: 16px; }
  .header-actions { flex-direction: column; gap: 12px; align-items: stretch; }
  .modal-content { width: 100%; padding: 20px; }
  .stats-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .stat-card{ padding:16px; }
  .stat-value{ font-size:24px; }
  .global-search-wrapper{ max-width:100%; }
}

/* Buttons */
.btn-sm{ padding:7px 12px; font-size:12px; font-weight:600; }
.btn-lg{ padding:14px 24px; font-size:16px; font-weight:600; }

:where(.btn-primary, .btn-secondary, .btn-blue, .btn-success, .btn-danger){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:where(.btn-primary, .btn-secondary, .btn-blue, .btn-success, .btn-danger):disabled,
:where(.btn-primary, .btn-secondary, .btn-blue, .btn-success, .btn-danger).is-disabled{
  opacity:0.62;
  cursor:not-allowed;
  box-shadow:none !important;
  transform:none !important;
}
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-hover)); color:#fff; border:none; padding:11px 24px; border-radius:10px; cursor:pointer; font-weight:600; transition:all 0.3s ease; box-shadow:0 3px 10px rgba(15,118,110,0.28); font-size:14px; position:relative; overflow:hidden; }
.btn-primary::before{ content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,255,255,0.3); transition:width 0.6s, height 0.6s, top 0.6s, left 0.6s; }
.btn-primary:hover::before{ width:300px; height:300px; top:calc(50% - 150px); left:calc(50% - 150px); }
.btn-primary:hover{ background:linear-gradient(135deg,var(--accent-hover),var(--accent)); transform:translateY(-2px); box-shadow:0 8px 18px rgba(15,118,110,0.35); }
.btn-primary:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(15,118,110,0.24); }
.btn-blue{ background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; border:none; padding:11px 24px; border-radius:10px; cursor:pointer; font-weight:600; transition:all 0.3s ease; box-shadow:0 3px 10px rgba(37,99,235,0.28); font-size:14px; position:relative; overflow:hidden; }
.btn-blue:hover{ background:linear-gradient(135deg,#1d4ed8,#2563eb); transform:translateY(-2px); box-shadow:0 8px 18px rgba(37,99,235,0.35); }
.btn-blue:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(37,99,235,0.24); }
.btn-secondary{ background:linear-gradient(135deg,var(--accent-2),#059669); color:#fff; border:none; padding:11px 22px; border-radius:10px; cursor:pointer; font-weight:600; transition:all 0.3s ease; box-shadow:0 3px 8px rgba(16,185,129,0.3); font-size:14px; }
.btn-secondary:hover{ background:linear-gradient(135deg,#059669,var(--accent-2)); transform:translateY(-2px); box-shadow:0 6px 16px rgba(16,185,129,0.4); }
.btn-secondary:active{ transform:translateY(0); box-shadow:0 2px 6px rgba(16,185,129,0.3); }
.btn-success{ background:linear-gradient(135deg,#10b981,#059669); color:#fff; border:none; padding:11px 22px; border-radius:10px; cursor:pointer; font-weight:600; transition:all 0.3s ease; box-shadow:0 3px 8px rgba(16,185,129,0.3); font-size:14px; }
.btn-success:hover{ background:linear-gradient(135deg,#059669,#047857); transform:translateY(-2px); box-shadow:0 6px 16px rgba(16,185,129,0.4); }
.btn-success:active{ transform:translateY(0); box-shadow:0 2px 6px rgba(16,185,129,0.3); }
.btn-danger{ background:linear-gradient(135deg,var(--danger),#b91c1c); color:#fff; border:none; padding:11px 22px; border-radius:10px; cursor:pointer; font-weight:600; transition:all 0.3s ease; box-shadow:0 3px 8px rgba(220,38,38,0.3); }
.btn-danger:hover{ background:linear-gradient(135deg,#b91c1c,var(--danger)); transform:translateY(-2px); box-shadow:0 6px 16px rgba(220,38,38,0.4); }
.btn-danger:active{ transform:translateY(0); }

/* File selector modal (startup storage picker) */
.file-modal-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:10000; background:rgba(0,0,0,0.8); }
.file-modal-card{ width:min(520px, 92vw); background:var(--card); padding:40px; border-radius:16px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3); border:1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.file-modal-icon{ font-size:64px; margin-bottom:20px; }
.file-modal-title{ color:#1e40af; margin:0 0 15px 0; }
:root.dark-mode .file-modal-title{ color:color-mix(in srgb, var(--accent) 75%, #93c5fd); }
.file-modal-body{ color:var(--text-muted); font-size:16px; line-height:1.8; margin:0 0 25px 0; }
.file-modal-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Table Enhanced */
.projects-table{ width:100%; border-collapse:collapse; min-width:760px; background:var(--card); border-radius:10px; overflow:hidden; }
.projects-table th, .projects-table td{ padding:14px 16px; border-bottom:1px solid var(--border); text-align:start; font-size:14px; color:var(--text); vertical-align:middle; }
.projects-table{ font-variant-numeric: tabular-nums; }
.projects-table thead th{ background:linear-gradient(135deg,rgba(219,234,254,0.8),rgba(191,219,254,0.8)); position:sticky; top:0; color:var(--accent); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:0.3px; border-bottom:3px solid var(--accent); z-index:10; }
:root.dark-mode .projects-table thead th{ background:linear-gradient(135deg,rgba(59,130,246,0.2),rgba(37,99,235,0.15)); }
.projects-table tbody tr{ transition:all 0.25s ease; border-left:3px solid transparent; }
.projects-table tbody tr:hover{ background:linear-gradient(90deg,rgba(248,250,252,0.8),rgba(241,245,249,0.8)); transform:translateX(-2px); box-shadow:0 2px 8px rgba(0,0,0,0.06); border-left-color:var(--accent-2); }
:root.dark-mode .projects-table tbody tr:hover{ background:linear-gradient(90deg,rgba(30,41,59,0.5),rgba(15,23,42,0.5)); }
.projects-table tbody tr:focus-within{ background: color-mix(in srgb, var(--accent) 8%, var(--card)); border-left-color: var(--accent); }

/* Zebra readability (keeps warning rows as-is) */
.projects-table tbody tr:nth-child(even):not(.project-warning){ background: rgba(148,163,184,0.05); }
:root.dark-mode .projects-table tbody tr:nth-child(even):not(.project-warning){ background: rgba(148,163,184,0.06); }

/* RTL tables: don't force uppercase Latin style */
html[dir="rtl"] .projects-table thead th{ text-transform:none; letter-spacing:0; }

/* Action buttons inside tables */
.projects-table td:last-child{ white-space:normal; }
.projects-table td:last-child > button,
.projects-table td:last-child > a{ margin:2px 2px; }
.projects-table td:last-child{ line-height:1.2; }

@media (max-width: 768px){
  .projects-table{ min-width:680px; }
  .projects-table th, .projects-table td{ padding:12px 12px; font-size:13px; }
}

/* Touch devices: avoid jittery hover transforms */
@media (hover: none){
  .projects-table tbody tr:hover{ transform:none; box-shadow:none; }
}

/* warning row */
.projects-table tbody tr.project-warning{ background:linear-gradient(90deg,#fef3c7,#fde68a); }
:root.dark-mode .projects-table tbody tr.project-warning{ background:linear-gradient(90deg,rgba(254,243,199,0.2),rgba(253,230,138,0.2)); }

/* modal */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:1000; backdrop-filter:blur(6px); animation:fadeIn 0.3s ease; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modal.hidden{ display:none; }
.modal-content{ width:860px; max-width:96%; position:relative; max-height:92vh; overflow:auto; background:var(--card); padding:32px; border-radius:18px; box-shadow:0 24px 48px rgba(0,0,0,0.3); animation:slideUp 0.3s ease; }
@keyframes slideUp{ from{ transform:translateY(30px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.modal-title{ color:var(--accent); font-size:24px; font-weight:800; margin-bottom:24px; border-bottom:3px solid var(--accent-light); padding-bottom:14px; letter-spacing:-0.5px; }
.modal-close{ position:absolute; left:18px; top:14px; background:transparent; border:none; font-size:36px; cursor:pointer; color:var(--muted); transition:all 0.2s; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.modal-close:hover{ color:var(--danger); background:rgba(220,38,38,0.1); transform:rotate(90deg); }
.modal-actions{ margin-top:28px; display:flex; justify-content:flex-end; gap:12px; }

/* Auth overlay (local username/password gate) */
.auth-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:2000; backdrop-filter:blur(6px); animation:fadeIn 0.3s ease; }
.auth-overlay.hidden{ display:none; }
.auth-card{ width:420px; max-width:92vw; background:var(--card); padding:28px; border-radius:18px; box-shadow:0 24px 48px rgba(0,0,0,0.3); }
.auth-title{ margin:0 0 8px 0; color:var(--accent); font-size:22px; font-weight:800; }
.auth-subtitle{ margin:0 0 18px 0; color:var(--text-muted); font-size:13px; line-height:1.7; }
.auth-label{ display:block; margin:12px 0 6px; font-weight:700; color:var(--text); font-size:13px; }
.auth-input{ width:100%; padding:10px 12px; border:2px solid var(--border); border-radius:10px; transition:all 0.2s; background:var(--card); color:var(--text); font-size:14px; box-sizing:border-box; }
.auth-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,118,110,0.18); }
.auth-error{ min-height:18px; margin-top:12px; color:var(--danger); font-weight:700; font-size:13px; }
.auth-actions{ margin-top:16px; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.auth-confirm-wrap.hidden{ display:none; }

/* Focus ring (keyboard users) */
:where(button, [role="button"], [role="option"], input, select, textarea, a):focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Toast notifications */
.toast-container{
  position: fixed;
  inset-inline-end: 16px;
  inset-block-end: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3000;
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  transform: translateY(6px);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.toast--show{ opacity: 1; transform: translateY(0); }

.toast__row{ display:flex; align-items:flex-start; gap:10px; }
.toast__icon{ font-size:18px; line-height:1.2; margin-top:1px; }
.toast__body{ flex:1; }
.toast__title{ font-weight:900; font-size:13px; margin:0 0 2px 0; }
.toast__message{ font-weight:600; font-size:13px; margin:0; color:var(--text); line-height:1.7; }
.toast__close{ background:transparent; border:none; cursor:pointer; color:var(--muted); font-size:18px; line-height:1; padding:4px; border-radius:8px; }
.toast__close:hover{ background:rgba(148,163,184,0.18); color:var(--text); }

.toast--success{ border-color: rgba(5,150,105,0.35); }
.toast--success .toast__icon{ color: var(--success); }
.toast--danger{ border-color: rgba(220,38,38,0.35); }
.toast--danger .toast__icon{ color: var(--danger); }
.toast--warning{ border-color: rgba(245,158,11,0.45); }
.toast--warning .toast__icon{ color: #d97706; }
.toast--info{ border-color: rgba(15,118,110,0.35); }
.toast--info .toast__icon{ color: var(--accent); }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .card:hover, .stat-card:hover, .sidebar nav li:hover, .sidebar nav li.active{ transform:none !important; }
  .toast{ transition:none; }
  .modal, .auth-overlay{ animation:none; }
  .modal-content{ animation:none; }
}