:root{
  --bg:#0b1020; --muted:#12182a; --text:#e6e9f2; --dim:#a9b3c7; --acc:#5eead4; --warn:#f59e0b; --err:#ef4444; --ok:#22c55e;
  --card:#11162a; --line:#293048;
  --app-width: 420px; /* Phone width */
}

/* ---------- Reset-ish ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.38 system-ui,Segoe UI,Roboto,Inter,Arial}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;                  /* header stays below drawer */
  background:linear-gradient(180deg,#0f172a,rgba(15,23,42,.9));
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width: var(--app-width);
  margin: 0 auto;
  padding:.65rem .9rem;
  display:flex; gap:.5rem; align-items:center;
}
.topbar h1{font-size:1rem;margin:0}
.topbar #btnMenu{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:.35rem .6rem}

/* ---------- App frame ---------- */
.app{
  width:100%;
  max-width: var(--app-width);
  margin: 0 auto;
  padding: .9rem .9rem 2rem;
}

/* ---------- Cards / grids ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem;margin:0 0 1rem}
.grid{display:grid;gap:.6rem}
.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}

/* ---------- Drawer (FIXED: z-index above header) ---------- */
.drawer{position:fixed; inset:0; display:none; z-index:1500;} /* <-- added z-index */
.drawer[aria-hidden="false"]{display:block}
.drawer__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:0; /* explicit */
}
.drawer__panel{
  position:absolute; top:0; bottom:0;
  width: min(var(--app-width), 100vw);
  left: max(0px, calc((100vw - var(--app-width)) / 2));
  background:#0e1529; border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  z-index:1; /* sits above backdrop, both inside drawer stacking context */
}
@media (max-width: 460px){ .drawer__panel{ left:0; width:100vw; } }
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.drawer__list{list-style:none;margin:0;padding:.5rem}
.drawer__list a,
.drawer__list a:visited { color: var(--text); text-decoration: none; display:block; padding:.6rem .75rem; border-radius:10px }
.drawer__list a:hover   { background:#0c1224; color: var(--text); }

/* ---------- Forms & buttons ---------- */
input,select,button,textarea{background:#0c1326;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:.7rem .8rem;font-size:1rem}
label{font-size:.85rem;color:var(--dim)}
button.primary{background:var(--acc);color:#032;border:none}
button.warn{background:var(--warn); color:#241a00;border:none}
button.block{display:block;width:100%}
.card .grid > label { margin-top:.25rem; }
.card .grid > input,
.card .grid > select,
.card .grid > button { margin-bottom:.35rem; }

/* ---------- Tables / pager ---------- */
table{width:100%;border-collapse:collapse}
th,td{padding:.65rem;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:600;text-align:left}
td.num{text-align:right}
.actions{display:flex;gap:.4rem;align-items:center}
.actions.nowrap{flex-wrap:nowrap; white-space:nowrap}
.btn-ghost{background:transparent;border:1px solid var(--line)}
.sm{padding:.35rem .55rem; font-size:.9rem; border-radius:10px}
.pager{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.5rem 0;margin-top:.5rem}
.pager__label{opacity:.9}

/* ---------- Horizontal scroll ---------- */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.scroll-x > table{ min-width: 720px; } /* one authoritative value */

/* ---------- Generic modal ---------- */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
}
.modal-backdrop[hidden]{ display:none !important; }  /* definitive */
.modal-panel{
  width:min(480px,92vw);
  background:#0e1529; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.45); padding:1rem;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.75rem}
.modal-panel h3{margin:.25rem 0 0}
.modal-panel p{margin:.5rem 0}

/* ---------- Filters (stacked & stretchy) ---------- */
.filters{ display:grid; grid-template-columns:1fr; gap:.65rem; }
.filters .cell > input,
.filters .cell > select,
.filters .cell > button{ width:100%; }
.filters .cell--actions{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
@media (max-width: 380px){ .filters .cell--actions{ grid-template-columns:1fr; } }
.card .filters input,
.card .filters select,
.card .filters button{ margin:0; }

/* ---------- Inline input (PIN etc.) ---------- */
.input-inline{display:flex;gap:.5rem;align-items:center}
.input-inline input{flex:1}

/* ---------- Calendar strip ---------- */
.calendar-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);gap:.6rem;overflow-x:auto;padding:.25rem 0}
.day-tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.6rem;min-height:84px;display:flex;flex-direction:column;gap:.35rem}
.day-tile__date{font-weight:600;color:var(--dim)}
.day-tile__amt{margin-top:auto;font-weight:700}

/* ---------- Dashboard key-values ---------- */
.kv{ display:grid; grid-template-columns: 1fr auto; row-gap:.4rem; column-gap:1rem; }
.kv div:nth-child(odd){ color:var(--dim); } /* labels */
.kv div:nth-child(even){ font-weight:700; } /* values */
.kv .big{ font-size:1rem; line-height:1.1; }
.kv .ok{ color: var(--ok); }
.kv .warn{ color: var(--warn); }
.kv .err{ color: var(--err); }
/* --- Buttons: make <a> look like buttons too --- */
button.btn,
a.btn,
button.btn-ghost,
a.btn-ghost,
button.primary,
a.primary,
button.warn,
a.warn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.45rem .75rem; border-radius:12px; text-decoration:none;
  border:1px solid var(--line); font-weight:500; line-height:1;
}

/* Keep existing colors */
a.primary    { background:var(--acc); color:#032; border:none; }
a.warn       { background:var(--warn); color:#241a00; border:none; }
a.btn-ghost  { background:transparent; color:var(--text); }
a.btn-ghost:hover { background:#0c1224; }

/* --- Actions row: keep on one line --- */
.actions{ display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; }
.actions.nowrap{ flex-wrap:nowrap; white-space:nowrap; }
.actions .sm{ padding:.35rem .55rem; font-size:.9rem; border-radius:10px; }

/* --- Topbar logout link --- */
.topbar a.logout {
  display:inline-flex; align-items:center; padding:.35rem .6rem;
  border:1px solid var(--line); border-radius:10px; text-decoration:none;
}
.topbar a.logout:hover { background:#0c1224; }

/* --- Scrollbar (WebKit) + Firefox color hint --- */
* { scrollbar-color: #4b5563 #0c1224; }
::-webkit-scrollbar{ height:10px; width:10px; }
::-webkit-scrollbar-track{ background:#0c1224; border-radius:10px; }
::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:10px; border:2px solid #0c1224; }
::-webkit-scrollbar-thumb:hover{ background:#6b7280; }

/* --- Date input: make picker icon visible --- */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) opacity(.9);
}
input[type="date"] {
  background-color:#0c1326;
  color:var(--text);
}

/* --- Clickable day rows (dashboard month table) --- */
.table-days tr[data-day] { cursor:pointer; }
.table-days tr[data-day]:hover { background:#0c1224; }
/* PIN modal must sit above other modals/backdrops */
#pinModal { z-index: 4000 !important; }