/* ===== Invitty CRM Pro — Apple Store inspired design system =====
   Neutral #f5f5f7 canvas · white cards with soft diffused shadows ·
   large radii · SF Pro / Inter typography · #0071e3 accent          */
:root{
  /* accent + status */
  --blue:#0071e3; --blue-hover:#0077ed; --blue-deep:#0066cc;
  --red:#ff3b30; --yellow:#ffcc00; --green:#34c759;
  --purple:#af52de; --orange:#ff9500; --teal:#30b0c7;
  /* readable (darker) status text */
  --green-text:#1d7a3e; --red-text:#d70015; --amber:#b25000; --red2:#d70015;
  /* neutrals */
  --ink:#1d1d1f; --muted:#6e6e73; --line:#e8e8ed; --bg:#f5f5f7; --card:#ffffff;
  --hover:#f5f5f7; --soft:#f9f9fb; --thead:#fbfbfd; --track:#e8e8ed;
  /* tints */
  --chip:#eaf2fd; --tint-green:#e8f7ee; --tint-yellow:#fff6d9;
  --tint-red:#feecec; --tint-red2:#fdeaea;
  /* elevation */
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 4px 12px rgba(0,0,0,.08),0 12px 32px rgba(0,0,0,.12);
  --radius:18px;
  --font-head:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Segoe UI',Roboto,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',Roboto,sans-serif;
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:14px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);margin:0;font-weight:600;letter-spacing:-.01em}
.app{display:flex;min-height:100vh}

/* ---- Sidebar ---- */
.sidebar{width:250px;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:4px;padding:22px 20px 18px}
.brand-dot{width:10px;height:10px;border-radius:50%}
.brand-dot.b1{background:var(--blue)} .brand-dot.b2{background:var(--red)} .brand-dot.b3{background:var(--yellow)}
.brand-logo{max-height:40px;max-width:180px;object-fit:contain}
.brand-name{font-family:var(--font-head);font-size:18px;margin-left:8px;font-weight:600;letter-spacing:-.02em}
.brand-name b{color:var(--blue);font-weight:700}
.sidebar nav{display:flex;flex-direction:column;gap:3px;padding:8px 12px;flex:1}
.sidebar nav a{display:flex;align-items:center;gap:13px;padding:10px 14px;border-radius:12px;
  color:var(--muted);font-weight:500;font-size:13.5px;transition:background .18s,color .18s}
.sidebar nav a i{width:18px;text-align:center;font-size:15px}
.sidebar nav a:hover{background:var(--hover);color:var(--ink)}
.sidebar nav a.active{background:var(--chip);color:var(--blue);font-weight:600}
.side-foot{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--line)}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#0071e3,#5ac8fa);
  color:#fff;display:grid;place-items:center;font-weight:600}
.side-foot .who{flex:1;display:flex;flex-direction:column;line-height:1.25}
.side-foot .who span{font-weight:600;font-size:13px}
.side-foot .who small{color:var(--muted);font-size:11px}
.side-foot .logout{color:var(--muted);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;transition:.18s}
.side-foot .logout:hover{background:var(--tint-red);color:var(--red-text)}

/* ---- Content ---- */
.content{flex:1;padding:32px 36px;max-width:100%;overflow-x:hidden}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:14px}
.page-head h1{font-size:28px;font-weight:700;letter-spacing:-.022em}
.page-head .sub{color:var(--muted);font-size:13.5px;margin-top:4px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---- Buttons (Apple pill style) ---- */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:13.5px;padding:9px 18px;border-radius:980px;
  background:var(--card);color:var(--blue);box-shadow:0 0 0 1px var(--line),0 1px 3px rgba(0,0,0,.05);
  transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{box-shadow:0 0 0 1px var(--line),0 4px 12px rgba(0,0,0,.1)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 3px rgba(0,113,227,.3)}
.btn-primary:hover{background:var(--blue-hover);box-shadow:0 4px 14px rgba(0,113,227,.35)}
.btn-green{background:var(--green);color:#fff;box-shadow:none}
.btn-ghost{background:transparent;box-shadow:none;color:var(--muted)}
.btn-ghost:hover{background:rgba(0,0,0,.05);box-shadow:none;color:var(--ink)}
.btn-sm{padding:6px 14px;font-size:12.5px}

/* ---- Inputs ---- */
select,input,textarea{font-family:var(--font-body);font-size:14px;padding:10px 13px;border:1px solid #d2d2d7;
  border-radius:12px;background:var(--card);color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.15)}
label{font-size:12.5px;color:var(--muted);font-weight:500;display:block;margin-bottom:6px}
.fy-select{min-width:150px;width:auto;border-radius:980px;padding:9px 14px;font-size:13.5px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);border-color:var(--line);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e73' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:32px}

/* ---- Cards / grid ---- */
.grid{display:grid;gap:20px}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:1fr}}
@media(max-width:760px){
  .cols-4,.cols-2{grid-template-columns:1fr}
  .content{padding:20px 16px}
  .sidebar{position:fixed;left:0;top:0;z-index:60;height:100vh;height:100dvh;background:#fff;
    transform:translateX(-105%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .menu-btn{display:grid}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;
    opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.show{opacity:1;pointer-events:auto}
}
/* Floating hamburger (mobile only) */
.menu-btn{display:none;place-items:center;position:fixed;bottom:20px;left:18px;z-index:940;
  width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;border:none;
  box-shadow:var(--shadow-lg);font-size:19px;cursor:pointer}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;
  transition:box-shadow .25s ease,transform .25s ease}
.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.04),0 10px 28px rgba(0,0,0,.09)}
.card h3{font-size:15px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.card h3 i{color:var(--blue)}

/* Chart containers — fixed height so rows stay aligned */
.chart-box{position:relative;height:280px}
.chart-box.tall{height:320px}
.chart-box.short{height:220px}

/* KPI tiles */
.kpi{position:relative;overflow:hidden}
.kpi .label{color:var(--muted);font-size:12.5px;font-weight:500}
.kpi .value{font-family:var(--font-head);font-size:30px;font-weight:700;letter-spacing:-.025em;margin-top:6px}
.kpi .delta{font-size:12px;margin-top:7px;font-weight:500;color:var(--muted)}
.kpi .delta.up{color:var(--green-text)} .kpi .delta.down{color:var(--red-text)} .kpi .delta.mid{color:var(--amber)}
.delta.mid{color:var(--amber)}
.kpi .ic{position:absolute;top:20px;right:20px;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;font-size:17px;color:#fff}
.bg-blue{background:linear-gradient(135deg,#0071e3,#42a1ec)}
.bg-green{background:linear-gradient(135deg,#28a745,#34c759)}
.bg-yellow{background:linear-gradient(135deg,#f5a623,#ffcc00)}
.bg-purple{background:linear-gradient(135deg,#8944ab,#af52de)}
.bg-orange{background:linear-gradient(135deg,#f56300,#ff9500)}
.bg-red{background:linear-gradient(135deg,#e0281e,#ff3b30)}
.bg-teal{background:linear-gradient(135deg,#0090a8,#30b0c7)}

/* progress bar (target vs achieved) */
.progress{height:12px;background:var(--track);border-radius:980px;overflow:hidden;margin-top:6px}
.progress > span{display:block;height:100%;border-radius:980px;
  background:linear-gradient(90deg,#0071e3,#34c759);transition:width .6s cubic-bezier(.4,0,.2,1)}
.progress-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:10px}

/* lists */
.list{display:flex;flex-direction:column;gap:2px}
.list-item{display:flex;align-items:flex-start;gap:12px;padding:10px 8px;border-radius:12px;transition:background .15s}
.list-item:hover{background:var(--soft)}
.dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none}
.list-item .t{flex:1}
.list-item .t .main{font-weight:500;font-size:13.5px}
.list-item .t .sub{color:var(--muted);font-size:12px;margin-top:2px}
.list-item .time{color:var(--muted);font-size:11.5px;white-space:nowrap}
.rank{width:24px;height:24px;border-radius:8px;background:var(--chip);color:var(--blue);
  font-weight:600;display:grid;place-items:center;font-size:12px;flex:none}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:20px}

/* news */
.news a{display:block;padding:10px 8px;border-radius:12px}
.news a:hover{background:var(--soft)}
.news .nt{font-weight:500;font-size:13.5px;line-height:1.35}
.news .ns{color:var(--muted);font-size:11.5px;margin-top:3px}

/* ---- Kanban ---- */
.kanban{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 16px;align-items:flex-start}
.kcol{background:#e9e9ee;border-radius:var(--radius);min-width:280px;width:280px;flex:none;
  display:flex;flex-direction:column;max-height:calc(100vh - 160px)}
.kcol-head{display:flex;align-items:center;gap:9px;padding:14px 16px;font-family:var(--font-head);
  font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.kcol-head .badge{margin-left:auto;background:rgba(255,255,255,.9);border-radius:980px;padding:2px 10px;
  font-size:12px;color:var(--muted);font-weight:600}
.kcol-head .bardot{width:10px;height:10px;border-radius:50%}
.kcol-head .edit{color:var(--muted);cursor:pointer;opacity:0;transition:.15s}
.kcol:hover .kcol-head .edit{opacity:1}
.kcards{padding:2px 12px 12px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px;min-height:70px}
.kcard{background:var(--card);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 3px 10px rgba(0,0,0,.06);
  padding:14px;cursor:grab;border-left:3px solid var(--blue);
  transition:box-shadow .2s,transform .2s}
.kcard:hover{box-shadow:0 3px 6px rgba(0,0,0,.08),0 10px 24px rgba(0,0,0,.12);transform:translateY(-1px)}
.kcard:active{cursor:grabbing}
.kcard.dragging{opacity:.4;box-shadow:0 12px 32px rgba(0,0,0,.24)}
.kdate{color:var(--muted);font-size:11px;margin-top:9px;display:flex;align-items:center;gap:5px}
.kcard .name{font-weight:600;font-size:14px;letter-spacing:-.01em}
.kcard .meta{color:var(--muted);font-size:12px;margin-top:6px;display:flex;flex-direction:column;gap:3px}
.kcard .meta i{width:14px}
.kcard .foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.kcard .val{font-weight:600;color:var(--green-text);font-size:13px}
.kcard .chip{font-size:10.5px;padding:2px 9px;border-radius:980px;background:var(--chip);color:var(--blue);font-weight:500}
.kcards.dragover{outline:2px dashed var(--blue);outline-offset:-4px;border-radius:12px}
.kcol-add{margin:0 12px 14px}

/* ---- Lead activity timeline ---- */
.timeline{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:14px;padding:6px}
.tl-item{display:flex;gap:10px;padding:9px 8px;border-bottom:1px solid var(--line)}
.tl-item:last-child{border-bottom:none}
.tl-ic{width:26px;height:26px;border-radius:50%;background:var(--chip);color:var(--blue);
  display:grid;place-items:center;font-size:11px;flex:none}
.tl-body{flex:1}
.tl-text{font-size:13px;color:var(--ink);line-height:1.4}
.tl-meta{color:var(--muted);font-size:11px;margin-top:3px}

/* ---- Modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal-bg.show{display:flex}
.modal{background:var(--card);border-radius:20px;width:480px;max-width:100%;max-height:92vh;overflow:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.25);animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 6px}
.modal-head h3{font-size:19px;font-weight:700;letter-spacing:-.02em}
.modal-head .x{cursor:pointer;color:var(--muted);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:18px}
.modal-head .x:hover{background:var(--hover)}
.modal-body{padding:14px 24px}
.field{margin-bottom:14px}
.req{color:var(--red-text)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:8px 24px 24px}

/* ---- Tables ---- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.tbl th,.tbl td{text-align:left;padding:13px 18px;font-size:13.5px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--muted);font-weight:600;background:var(--thead);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.06em}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover td{background:var(--soft)}
.tag{font-size:11.5px;padding:4px 12px;border-radius:980px;font-weight:600}
.tag.active{background:var(--tint-green);color:var(--green-text)}
.tag.expiring{background:var(--tint-yellow);color:var(--amber)}
.tag.expired{background:var(--tint-red);color:var(--red-text)}
.tag.renewed{background:var(--chip);color:var(--blue)}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(60px);
  background:rgba(29,29,31,.92);backdrop-filter:blur(10px);color:#fff;padding:12px 22px;
  border-radius:980px;font-size:13.5px;box-shadow:var(--shadow-lg);opacity:0;transition:.25s;z-index:99;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;
  background:radial-gradient(1100px 520px at 15% -10%,#eaf2fd,transparent),
             radial-gradient(900px 480px at 110% 15%,#e8f7ee,transparent),var(--bg)}
.login-card{background:var(--card);width:390px;max-width:92vw;border-radius:24px;
  box-shadow:0 8px 24px rgba(0,0,0,.06),0 24px 64px rgba(0,0,0,.1);padding:40px 36px}
.login-card .brand{justify-content:center;padding:0 0 10px}
.login-card h2{text-align:center;font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.login-card p.tag-line{text-align:center;color:var(--muted);font-size:13.5px;margin:0 0 24px}
.login-card .field{margin-bottom:16px}
.login-card .btn{width:100%;justify-content:center;padding:12px;font-size:14.5px;font-weight:600}
.err{background:var(--tint-red);color:var(--red-text);padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:16px}
.hint{color:var(--muted);font-size:11.5px;text-align:center;margin-top:18px}
.section-gap{margin-top:24px}

/* ===== Reports ===== */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px;background:#e9e9ee;
  border-radius:980px;padding:4px;width:max-content;max-width:100%}
.tabs button{border:none;background:none;cursor:pointer;padding:9px 18px;font-size:13.5px;font-weight:500;
  font-family:var(--font-body);color:var(--muted);border-radius:980px;display:inline-flex;align-items:center;gap:8px;
  transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.tabs button i{font-size:13px}
.tabs button:hover{color:var(--ink)}
.tabs button.active{color:var(--ink);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);font-weight:600}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px;flex-wrap:wrap}
.pane-head h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
.pane-head .sub{color:var(--muted);font-size:12.5px;margin-top:3px}

.report-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:1100px){.report-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.report-kpis{grid-template-columns:1fr}}
.mini-kpi{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px}
.mini-kpi .label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.mini-kpi .value{font-size:21px;font-weight:700;font-family:var(--font-head);letter-spacing:-.02em;margin-top:6px}
.mini-kpi .value.g{color:var(--green-text)} .mini-kpi .value.r{color:var(--red-text)} .mini-kpi .value.b{color:var(--blue)}

.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tfoot td{font-weight:600;background:var(--thead);border-top:2px solid var(--line);border-bottom:none}
.tbl-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.tbl-wrap .tbl{box-shadow:none}

.tag.paid{background:var(--tint-green);color:var(--green-text)}
.tag.partial{background:var(--tint-yellow);color:var(--amber)}
.tag.unpaid{background:var(--tint-red);color:var(--red-text)}
.tag.age{background:var(--hover);color:var(--muted)}
.tag.age.b2{background:var(--tint-yellow);color:var(--amber)}
.tag.age.b3{background:var(--tint-red2);color:var(--red2)}
.tag.age.b4{background:var(--tint-red);color:var(--red-text)}

/* ===== Utilities ===== */
.big-value{font-family:var(--font-head);font-size:28px;font-weight:700;letter-spacing:-.025em}
.note{color:var(--muted);font-size:12px}
.note.mt{margin-top:18px}
.flat{box-shadow:none;padding:16px}
.flat:hover{box-shadow:none}
.tint-blue{background:var(--chip)}
.tint-green{background:var(--tint-green)}
.range-plain{padding:0;border:none;box-shadow:none;accent-color:var(--blue)}
.kanban-search{max-width:230px;border-radius:980px;background:#e9e9ee;border-color:transparent;padding:9px 16px}
.kanban-search:focus{background:#fff}

/* ===== Dark sidebar theme (light content on the right) ===== */
.sidebar{background:#14223d;border-right:1px solid rgba(255,255,255,.06)}
.sidebar .brand{border-bottom:1px solid rgba(255,255,255,.07)}
.brand-name{color:#ffffff}
.brand-name b{color:#8ab4ff}
.sidebar nav a{color:#ffffff;font-weight:500}
.sidebar nav a i{color:inherit}
.sidebar nav a:hover{background:rgba(255,255,255,.08);color:#ffffff}
.sidebar nav a.active{background:var(--blue);color:#ffffff;box-shadow:0 4px 12px rgba(66,133,244,.40)}
.sidebar nav a.active i{color:#ffffff}
.side-foot{border-top:1px solid rgba(255,255,255,.08)}
.side-foot .who span{color:#ffffff}
.side-foot .who small{color:#8b97ab}
.side-foot .logout{color:#8b97ab}
.side-foot .logout:hover{background:rgba(234,67,53,.22);color:#ff6b5e}

/* ===== Dark theme (Settings → Appearance) ===== */
body.theme-dark{
  --ink:#e6e8ec; --muted:#98a2b3; --line:#2a323f; --bg:#0f141b; --card:#171e29;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 1px 8px rgba(0,0,0,.5);
  --shadow-lg:0 4px 16px rgba(0,0,0,.6);
  background:#0f141b;color:#e6e8ec;
}
body.theme-dark .content{background:var(--bg)}
body.theme-dark .card,body.theme-dark .modal,body.theme-dark .tbl{background:var(--card)}
body.theme-dark input,body.theme-dark select,body.theme-dark textarea{background:#1e2632;color:var(--ink);border-color:var(--line)}
body.theme-dark .fy-select,body.theme-dark .kanban-search{background:#1e2632;color:var(--ink);border-color:var(--line)}
body.theme-dark .btn-ghost{color:var(--muted)}
body.theme-dark .btn-ghost:hover{background:#232c39;color:var(--ink)}
body.theme-dark .tbl th{background:#1b2330;color:var(--muted)}
body.theme-dark .tbl td,body.theme-dark .tbl th{border-color:var(--line)}
body.theme-dark .tbl tr:hover td{background:#1b2330}
body.theme-dark .tbl tfoot td{background:#1b2330}
body.theme-dark .kcol{background:#121822}
body.theme-dark .kcard{background:var(--card)}
body.theme-dark .kcol-add,body.theme-dark .kcol-head{color:var(--muted)}
body.theme-dark .modal-head,body.theme-dark .modal-foot{border-color:var(--line)}
body.theme-dark .rank,body.theme-dark .tag.age{background:#232c39}
body.theme-dark .tl-ic,body.theme-dark .avatar{filter:none}
body.theme-dark .hint,body.theme-dark .sub{color:var(--muted)}
body.theme-dark .list-item{border-color:var(--line)}
body.theme-dark .progress{background:#232c39}
body.theme-dark a{color:#8ab4ff}
body.theme-dark .brand-name b{color:#8ab4ff}

/* ===== Brand font (app-wide) ===== */
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
h1,h2,h3,h4{font-family:'Inter',system-ui,sans-serif;letter-spacing:-.012em}

/* ===== Brand dark theme (purple accent, near-black) ===== */
body.theme-dark{--ink:#e7e9f0;--muted:#8b93a7;--line:#20242f;--bg:#0a0d15;--card:#141824;--blue:#7c5cff;background:#0a0d15}
body.theme-dark .content{background:radial-gradient(1100px 560px at 18% -12%, rgba(124,92,255,.07), transparent 60%), var(--bg)}
body.theme-dark .card,body.theme-dark .modal,body.theme-dark .tbl{background:#141824;border:1px solid #1e2330}
body.theme-dark .tbl th{background:#171d2a;color:var(--muted)}
body.theme-dark .tbl td,body.theme-dark .tbl th{border-color:#1e2330}
body.theme-dark .tbl tr:hover td,body.theme-dark .tbl tfoot td{background:#171d2a}
body.theme-dark input,body.theme-dark select,body.theme-dark textarea,body.theme-dark .fy-select,body.theme-dark .kanban-search{background:#10141f;border-color:#242a38;color:var(--ink)}
body.theme-dark .sidebar{background:#0c0f1a;border-right-color:#181d2b}
body.theme-dark .sidebar nav a{color:#aab2c5}
body.theme-dark .sidebar nav a:hover{background:rgba(255,255,255,.05);color:#fff}
body.theme-dark .sidebar nav a.active{background:rgba(124,92,255,.16);color:#cbbdff;box-shadow:none;position:relative}
body.theme-dark .sidebar nav a.active::after{content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:#7c5cff;box-shadow:0 0 8px #7c5cff}
body.theme-dark .btn-primary{background:linear-gradient(135deg,#8b5cf6,#6d5cff);color:#fff}
body.theme-dark .btn-primary:hover{background:linear-gradient(135deg,#7c4dff,#5b4bff)}
body.theme-dark a,body.theme-dark .brand-name b{color:#a48bff}
body.theme-dark .kcol{background:#10141f}
body.theme-dark .kcard{background:#141824;border-color:#1e2330}
body.theme-dark .page-head h1,body.theme-dark .kpi .value{color:#f3f4f8}
body.theme-dark .tag.age,body.theme-dark .rank{background:#232c39}

/* ===== Mobile top app bar (always-visible menu + home) ===== */
.mobilebar{display:none}
@media(max-width:760px){
  .mobilebar{display:flex;align-items:center;justify-content:space-between;gap:8px;
    position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line);
    margin:-20px -16px 14px;padding:10px 12px;box-shadow:0 1px 6px rgba(0,0,0,.12)}
  .mobilebar .mb-ic{width:42px;height:42px;display:grid;place-items:center;border:none;background:transparent;
    color:var(--ink);font-size:18px;border-radius:10px;cursor:pointer;text-decoration:none}
  .mobilebar .mb-ic:active{background:rgba(127,127,127,.16)}
  .mobilebar .mb-title{font-family:'Inter',sans-serif;font-weight:700;font-size:17px;color:var(--ink);text-decoration:none}
  .mobilebar .mb-title b{color:var(--blue)}
  .menu-btn{display:none!important}   /* replaced by the top-bar menu button */
}


/* ===== App-like responsive polish (tablet & mobile) ===== */
.tbl-wrap{-webkit-overflow-scrolling:touch}

/* Tablet: show company/collection/expense rows two-up instead of stacking */
@media(max-width:1100px){
  .cols-3{grid-template-columns:repeat(2,1fr)}
}

/* Phone */
@media(max-width:760px){
  .grid{gap:14px}
  .cols-4{grid-template-columns:repeat(2,1fr)}   /* KPI tiles 2-up = app-like */
  .cols-3{grid-template-columns:1fr}
  .content{padding-bottom:48px}
  .page-head{margin-bottom:18px}
  .page-head h1{font-size:22px}
  .card{padding:18px}
  .kpi .value{font-size:24px}
  .kpi .ic{top:16px;right:16px;width:36px;height:36px}
  .row-head h3{font-size:14px}
  .toolbar{width:100%}
  .toolbar .fy-select{flex:1 1 auto;min-width:0}
  .toolbar form{flex-wrap:wrap}
  .row2{grid-template-columns:1fr}               /* stack paired form fields */
  /* Wide tables size to their content and scroll sideways inside .tbl-wrap,
     instead of being clipped (fixes numbers falling outside the border). */
  .tbl{width:auto;min-width:100%}
  .tbl th,.tbl td{white-space:nowrap;padding:11px 13px;font-size:12.5px}
  /* Modals slide up as bottom sheets */
  .modal-bg{align-items:flex-end;padding:0}
  .modal{width:100%;max-width:100%;border-radius:22px 22px 0 0;max-height:90vh}
}

/* Small phones */
@media(max-width:440px){
  .cols-4{grid-template-columns:1fr}
  .page-head h1{font-size:20px}
}