:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #6b7280;        /* gray-500 */
  --line: #e5e7eb;         /* gray-200 */
  --panel: #ffffff;
  --panel-alt: #f9fafb;
  --accent: #006aff;       /* blue-500-ish */
  --accent-600:#0284c7;    /* hover */
  --success:#16a34a;
  --danger:#dc2626;
  --warn:#d97706;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --spacing: 16px;
  --sidebar-w: 260px;

  /* ================================
     Button variables
     (scoped to buttons via --btn-*)
     ================================ */
  --btn-blue: #006aff;
  --btn-blue-hover: #0057d6;
  --btn-blue-active: #0047b1;
  --btn-blue-ghost: rgba(0, 106, 255, 0.12);

  --btn-text-on-blue: #ffffff;
  --btn-text-primary: #0b1220;
  --btn-border: rgba(11, 18, 32, 0.12);

  --btn-radius: 10px;
  --btn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --btn-weight: 600;

  --btn-focus: 0 0 0 3px rgba(0, 106, 255, 0.35);
  --btn-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --btn-shadow-press: inset 0 1px 2px rgba(0,0,0,0.2);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Layout */
.app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height:100vh;
}
.sidebar{ grid-area: sidebar; border-right:1px solid var(--line); background:#fff; position:sticky; top:0; height:100vh; padding:0 16px 16px; }
.topbar{ grid-area: topbar; border-bottom:1px solid var(--line); background:#fff; display:flex; align-items:center; gap:12px; padding:0 16px; position:sticky; top:0; z-index:10;}
.main{ grid-area: main; padding:24px; background:var(--panel-alt); }

/* Sidebar */
.brand{ display:flex; align-items:center; gap:10px; padding:0; margin-bottom:12px; }
.brand .logo{ width:28px; height:28px; border-radius:8px; background:#111;}
.brand .name{ font-weight:700; letter-spacing:.3px; font-size:18px; }

/* Company card link in sidebar */
.org-link{ display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%;
  text-decoration:none; color:var(--text); border:1px solid var(--line); border-radius:14px; padding:10px 14px; background:#fff; min-height:56px; box-shadow: var(--shadow); margin-top:8px; }
.org-link:hover{ background:#f8fafc; }
.org-left{ display:flex; align-items:center; gap:12px; }
.org-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; background:#f3f4f6; display:inline-flex; align-items:center; justify-content:center; }
.org-avatar--icon i{ color:#111; font-size:18px; }
.org-name{ font-weight:700; font-size:16px; }

.nav{
  display:flex; flex-direction:column; gap:4px; padding:8px;
}
.nav a{
  text-decoration:none; color:var(--text);
  padding:10px 12px; border-radius:10px; display:flex; align-items:center; gap:10px;
  font-size:15px;                      /* larger sidebar text */
}
.nav a i{ font-size:18px; }
.nav a:hover{ background:var(--panel-alt); }
.nav a.active{ background:#eef7ff; color:#0b70b8; }

/* Topbar */
.topbar .actions{ margin-left:auto; display:flex; align-items:center; gap:12px;}
.select{
  border:1px solid var(--line); border-radius:10px; padding:6px 10px; background:#fff; color:var(--text);
}

/* Cards & tables */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;}
.card h3{ margin:0 0 8px 0; font-size:16px; }
.grid{ display:grid; gap:16px; }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1024px){ .grid.cols-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid.cols-3{ grid-template-columns: 1fr; } }

/* Tabs (all gray; active darker with outline) */
.tabs .btn{
  background:#f3f4f6;
  color: var(--btn-text-primary);
  border-color:#e5e7eb;
  box-shadow:none;
}
.tabs .btn:hover{ background:#e5e7eb; }
.tabs .btn.primary,
.tabs .btn.btn--primary{
  background:#e5e7eb;               /* darker gray for active */
  color: var(--btn-text-primary);
  border-color:#6b7280;             /* even darker outline */
}
.tabs .btn.primary:hover,
.tabs .btn.btn--primary:hover{ background:#d1d5db; }
.tabs .btn.primary:active,
.tabs .btn.btn--primary:active{ background:#cbd5e1; }

.table{ width:100%; border-collapse: collapse; background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
.table thead th{ background:#f8fafc; font-weight:600; }
.table tr:hover td{ background:#f9fbff; }

/* Buttons & inputs () */
.btn{
  -webkit-font-smoothing: antialiased;
  font-family: var(--btn-font);
  font-weight: var(--btn-weight);
  line-height: 1;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;

  padding: 0.875rem 1.125rem;          /* comfy tap target */
  min-height: 44px;                     /* mobile a11y */
  min-width: 44px;

  border-radius: var(--btn-radius);
  border: 1px solid var(--btn-border);
  background:#fff;
  color: var(--btn-text-primary);
  box-shadow: var(--btn-shadow);
  cursor:pointer; user-select:none; text-decoration:none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .02s ease, box-shadow .15s ease;
}
.btn:hover{ /* subtle hover for neutral buttons */ background:#f8fafc; }

/* Primary (filled blue) */
.btn--primary, .btn.primary{
  background: var(--btn-blue);
  border-color: var(--btn-blue);
  color: var(--btn-text-on-blue);
}
.btn--primary:hover, .btn.primary:hover{ background: var(--btn-blue-hover); border-color: var(--btn-blue-hover); }
.btn--primary:active, .btn.primary:active{ background: var(--btn-blue-active); border-color: var(--btn-blue-active); box-shadow: var(--btn-shadow-press); }

/* Secondary (outline) */
.btn--secondary, .btn.secondary{
  background:#fff; color: var(--btn-blue); border-color: var(--btn-blue);
}
.btn--secondary:hover, .btn.secondary:hover{ background: var(--btn-blue-ghost); }
.btn--secondary:active, .btn.secondary:active{ background: rgba(0,106,255,0.18); box-shadow: var(--btn-shadow-press); }

/* Tertiary (text / ghost) */
.btn--tertiary, .btn.ghost{
  background: transparent; color: var(--btn-blue); border-color: transparent; box-shadow:none;
}
.btn--tertiary:hover, .btn.ghost:hover{ background: var(--btn-blue-ghost); }
.btn--tertiary:active, .btn.ghost:active{ background: rgba(0,106,255,0.18); box-shadow: var(--btn-shadow-press); }

/* Destructive variant */
.btn--destructive{
  --btn-blue: #e11900;
  --btn-blue-hover: #c31200;
  --btn-blue-active: #990f00;
  --btn-blue-ghost: rgba(225, 25, 0, 0.12);
}

/* Legacy black button kept for compatibility */
.btn.black{ background:#000; border-color:#000; color:#fff; }
.btn.black:hover{ background:#333; border-color:#333; }

/* Sizes */
.btn--sm{ padding: 0.625rem .875rem; min-height: 36px; font-size: 0.9375rem; }
.btn--lg{ padding: 1rem 1.25rem; min-height: 48px; font-size: 1.0625rem; }

/* Icons alignment */
.btn > .icon{ width: 1.1em; height: 1.1em; display:inline-block; flex:0 0 auto; }

/* Disabled state */
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* Focus */
.btn:focus-visible{ outline:none; box-shadow: var(--btn-focus); }

/* High-contrast / forced-colors */
@media (forced-colors: active){
  .btn{ border:1px solid ButtonText; }
  .btn--primary, .btn.primary{ background: ButtonFace; color: ButtonText; }
}

/* Company page */
.org-profile{ display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.org-profile .org-avatar{ width:54px; height:54px; }
.org-profile .org-name{ font-size:18px; font-weight:700; }
.subtle{ color: var(--muted); }
.form-actions{ display:flex; justify-content:flex-end; gap:12px; }

/* Dark mode adjustments */
@media (prefers-color-scheme: dark){
  :root{ --btn-text-primary: #e6e7ea; --btn-border: rgba(230, 231, 234, 0.14); }
  .btn--secondary, .btn.secondary{ background: transparent; color: var(--btn-blue); border-color: var(--btn-blue); }
}

.badge{ padding:2px 8px; border-radius:999px; border:1px solid var(--line); font-size:12px; color:var(--muted); }

/* Forms */
label{ display:block; margin:8px 0 4px; color:#111; font-weight:600; }
input, select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,165,233,.15); }

/* Flash messages */
.flash{ position: fixed; right:16px; bottom:16px; display:grid; gap:8px; z-index: 300; }
.alert{ padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; box-shadow: var(--shadow); }
.alert-success{ border-color:#bbf7d0; background:#f0fdf4; }
.alert-error{ border-color:#fecaca; background:#fef2f2; }

/* ---------- Utilities ---------- */
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap: var(--spacing); }
.flex-end{ display:flex; align-items:center; justify-content:flex-end; }
.push-right{ margin-left:auto; }

/* Horizontal filter helpers (NEW) */
.filters-inline{
  display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:8px;
}
.filters-inline .field{
  flex: 0 0 220px;            /* keeps each field at a tidy width */
}
.filters-inline .field--wide{
  flex-basis: 280px;          /* e.g., Search */
}
.filters-inline .actions{
  flex: 0 0 auto;
  align-self:end;
}

/* Toolbar for filters + actions (Transactions) */
.toolbar{ display:flex; align-items:end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.toolbar__right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.select--sm{ padding:6px 10px; min-height:36px; }

/* Chip-style filter buttons */
.chipbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.chip{ position:relative; }
.chip > summary{ list-style:none; }
.chip > summary::-webkit-details-marker{ display:none; }
.chip > summary{ cursor:pointer; }
.chip > summary.btn{ background:#f3f4f6; color:var(--btn-text-primary); border-color:#e5e7eb; box-shadow:none; }
.chip[open] > summary.btn{ border-color:#6b7280; }
.chip__panel{
  position:absolute; top: calc(100% + 6px); left:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:12px; min-width: 280px;
}
.chip__panel .presets{ display:flex; flex-direction:column; gap:6px; }
.chip__panel .row{ display:flex; gap:8px; }
.chip__panel .row .field{ flex:1; }
.chip__footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
@media (max-width: 640px){ .chip__panel{ position:fixed; left:12px; right:12px; top:auto; bottom:12px; min-width:auto; } }

/* Date dropdown layout */
.datepanel{ display:flex; gap:12px; align-items:flex-start; }
.datepanel__cal{ width: 280px; max-width: 100%; border-right:1px solid var(--line); padding-right:12px; }
.datecal__header{ display:flex; align-items:center; justify-content:space-between; padding:8px; background:#f3f4f6; border-radius:8px; font-weight:600; }
.datecal__nav{ display:flex; align-items:center; gap:8px; }
.datecal__btn{ border:0; background:transparent; cursor:pointer; padding:4px 8px; font-size:16px; color:var(--muted); border-radius:8px; }
.datecal__btn:hover{ background:#f3f4f6; }
.datecal__grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; padding:8px 0; }
.datecal__dow{ text-align:center; color:var(--muted); font-size:12px; }
.datecal__day{ text-align:center; padding:8px 0; border-radius:10px; cursor:pointer; }
.datecal__day:hover{ background:#f3f4f6; }
.datecal__day.out{ color:#cbd5e1; cursor:default; }
.datecal__day.sel{ outline:2px solid var(--btn-blue); outline-offset:-2px; }
.datecal__day.inrange{ background: var(--btn-blue-ghost); }
.datepanel__inputs{ display:flex; gap:8px; align-items:center; }
.datepanel__inputs .field{ flex:1; }
.datepanel__presets{ min-width: 160px; padding-left:12px; }
.datepanel__presets .btn{ width:100%; justify-content:flex-start; background:#f3f4f6; border-color:#e5e7eb; }
.datepanel__presets .btn:hover{ background:#e5e7eb; }

/* Disclosure (More filters) */
.disclosure{ display:block; }
.disclosure > summary{
  list-style:none;
}
.disclosure > summary::-webkit-details-marker{ display:none; }

/* KPIs */
.kpi .kpi__top{display:flex; align-items:center; justify-content:space-between}
.kpi-menu-btn{
  border:0; background:transparent; font-size:18px; line-height:1; cursor:pointer;
  color:var(--muted); padding:4px 6px; border-radius:8px;
}
.kpi-menu-btn:hover{ background:var(--panel-alt); }
.kpi-menu{
  position:absolute; margin-top:6px; right:12px; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); display:none; min-width:140px; z-index:40; /* was 30 */
}
.kpi-has-menu{ position:relative; }
.kpi-menu.open{ display:block; }
.kpi-menu a{ display:block; padding:8px 10px; text-decoration:none; color:var(--text); }
.kpi-menu a:hover{ background:var(--panel-alt); }

/* ---------- Modals (UPDATED) ---------- */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); padding:16px; z-index:100; /* above kpi-menu */
}
.modal.open{ display:flex; }
.modal-content{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px;
  width: min(94vw, 720px);         /* comfortable default width */
  max-height: 90vh;               /* prevent viewport overflow */
  overflow: auto;                 /* scroll inside modal if needed */
}
/* Larger variant for forms like “Add Transaction” */
.modal-lg{ width: min(95vw, 960px); } /* ~960px on desktop, fluid on small screens */

/* Mobile sidebar */
.sidebar-toggle{ display:none; }
@media (max-width: 1024px){
  .app{ grid-template-columns: 1fr; grid-template-areas:
    "topbar" "main"; }
  .sidebar{ position:fixed; left:-280px; top:0; width:var(--sidebar-w); transition:left .2s ease; z-index:20;}
  .sidebar.open{ left:0; }
  .sidebar-toggle{ display:inline-flex; }
}

/* Responsive helpers */
.hide-sm{ display:inline; }
@media (max-width: 640px){ .hide-sm{ display:none; } }

/* ---------- Auth pages (login/register) ---------- */
.auth{ display:flex; align-items:center; justify-content:center; min-height: 100vh; }
.auth-card{ width:100%; max-width:420px; padding:28px; }
.auth-header{ text-align:center; margin-bottom:16px; }
.auth-header .logo{ width:40px; height:40px; border-radius:10px; background:#000; display:inline-block; }
.auth-title{ margin:8px 0 0 0; font-size:22px; font-weight:700; }
.auth-sub{ margin:0; color:var(--muted); }
.auth-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.auth-footer{ margin-top:14px; text-align:center; color:var(--muted); }

/* Auth page body background and zero padding main to avoid scroll */
.auth-page{ background: var(--panel-alt); }
.auth-page .main{ padding:0; background: var(--panel-alt); }
.multi-list{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; padding:4px; margin-top:6px; }
.multi-list label{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; cursor:pointer; }
.multi-list label:hover{ background:#f8fafc; }
.multi-list input[type="checkbox"]{ width:16px; height:16px; }