/* Daily Cash System — design system v2 "sharp" (0.4.12).
   Same selector + variable inventory as v1 (church-portal adoption), restyled:
   tighter radii, crisper borders, higher contrast, micro-transitions. */

:root{
  /* ── The Relief palette (v1.1.0) ────────────────────────────────────────────────
     Elie: "match the relief theme to the railway — or make the railway a relief
     theme." Both apps are his and sat side by side in the same browser looking like
     two unrelated products. Values taken from services/index.html:17-25.

     WHY THE VARIABLE NAMES STILL SAY "TEAL". --teal is the ACCENT, used 263 times
     across app/ and this file. Renaming it to --amber would have meant touching every
     one of those, in a change whose whole point is that nothing but colour moves. The
     name is now historical; the value is the accent, whatever colour that is. Change
     it here and the entire app follows — which is exactly what happened in this
     release: cool teal-on-grey became warm amber-on-sand by editing this block.

     Cool → warm, in one table:
        page      #f2f4f8 grey-blue  → #f3ece1 sand
        cards     #ffffff white      → #fbf8f2 paper
        sidebar   #0a2124 dark teal  → #1c3c40 slate
        accent    #0fa79f teal       → #c2701c amber
        corners   10px               → 14px
     The status colours (green/red/blue/yellow) are Relief's warmer versions of the
     same meanings, so nothing changes about WHAT a colour says — only its temperature.
     0.79.0's lesson is kept: --muted and --side-text stay dark/light enough to read. */
  --bg:#f3ece1; --card:#fbf8f2; --ink:#23211c; --muted:#7a7264; --line:#ddd2bf;
  --sidebar:#1c3c40; --sidebar2:#274e53; --side-text:#cfe0de;
  --teal:#c2701c; --teal2:#a85f14; --teal-soft-bg:#f8edd2; --teal-soft-ink:#8a4f12;
  --navy:#102528;
  --green:#2f7d54; --green-bg:#e3f0e7; --red:#a8392f; --red-bg:#f6e3e0;
  --yellow:#946a10; --yellow-bg:#f8edd2; --blue:#2d6480; --blue-bg:#e3eef3;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,37,40,.05),0 8px 24px rgba(16,37,40,.06);
  --shadow-lg:0 2px 8px rgba(16,37,40,.08),0 24px 48px rgba(16,37,40,.10);
}
*{box-sizing:border-box}
body{margin:0;font:14.5px/1.5 Inter,"Segoe UI",Tahoma,"Noto Naskh Arabic",Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}

/* ---- App shell: fixed sidebar + content ---- */
.shell{display:flex;min-height:100vh}
.sidebar{width:230px;flex:none;background:linear-gradient(180deg,var(--sidebar),var(--sidebar2));color:var(--side-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:16px 16px 13px;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar .brand img{width:38px;height:38px;border-radius:8px;background:#fff;object-fit:cover}
.sidebar .brand .t{font-weight:700;color:#fff;line-height:1.15;font-size:14px;letter-spacing:.01em}
.sidebar .brand .v{font-size:11.5px;color:#a8bfbd;letter-spacing:.02em;font-weight:500}
.sidebar nav{padding:10px 0;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto}
.sidebar nav a{display:flex;align-items:center;gap:10px;color:var(--side-text);text-decoration:none;padding:9px 16px;border-left:3px solid transparent;font-size:13.5px;letter-spacing:.01em;transition:background .14s,color .14s,border-color .14s}
.sidebar nav a:hover{background:rgba(255,255,255,.10);color:#fff}
.sidebar nav a.active{background:rgba(194,112,28,.22);border-left-color:var(--teal);color:#fff;font-weight:600}
.sidebar .userbox{padding:12px 16px;border-top:1px solid rgba(255,255,255,.07);font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sidebar .userbox a{color:#fff;opacity:.8;text-decoration:none;font-size:12px;border:1px solid rgba(255,255,255,.28);padding:4px 10px;border-radius:var(--radius-sm);transition:opacity .14s,background .14s}
.sidebar .userbox a:hover{opacity:1;background:rgba(255,255,255,.08)}
main.content{flex:1;min-width:0;padding:24px 28px;max-width:1180px}

/* ---- Top bar + account chip (v1.1.0) ------------------------------------------
   Elie: "can we move the username somewhere at the top — be inspired by the Relief
   theme." It sat in the sidebar footer, which is where Relief's used to be too; Relief
   moved it to a 60px sticky header (services/index.html:140) with the screen name on
   one side and the account on the other, and that is what this copies.
   The bar is INSIDE main.content, so the sidebar keeps its own full-height column. */
.topbar{height:60px;flex:none;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;z-index:30;
  margin:-24px -28px 20px}
.topbar .crumb{font-size:14px;font-weight:600;color:var(--navy);letter-spacing:.01em}
.topbar .spacer{margin-inline-start:auto}
.userchip{display:inline-flex;align-items:center;gap:9px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px 10px 5px 6px;
  font:inherit;font-size:13px;color:var(--ink);cursor:pointer;transition:border-color .14s,background .14s}
.userchip:hover{border-color:var(--teal);background:var(--card)}
.userchip .av{width:28px;height:28px;border-radius:7px;background:var(--sidebar);color:#cfe0de;
  display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none;text-transform:uppercase}
.userchip .nm{font-weight:600;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userchip .caret{color:var(--muted);font-size:10px}
.usermenu{position:relative}
.usermenu-pop{display:none;position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:190px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:6px;z-index:40}
.usermenu.open .usermenu-pop{display:block}
.usermenu-pop a,.usermenu-pop button{display:block;width:100%;text-align:left;background:none;border:0;
  font:inherit;font-size:13.5px;color:var(--ink);text-decoration:none;padding:8px 10px;
  border-radius:var(--radius-sm);cursor:pointer}
.usermenu-pop a:hover,.usermenu-pop button:hover{background:var(--bg)}
.usermenu-pop .who{padding:8px 10px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.usermenu-pop .who .n{font-weight:600;font-size:13px}
.usermenu-pop .who .r{font-size:11.5px;color:var(--muted)}
@media(max-width:760px){
  .topbar{padding:0 14px;margin:-14px -14px 14px}
  .userchip .nm{max-width:110px}
}
@media (max-width:860px){
  .shell{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static}
  .sidebar nav{flex-direction:row;overflow-x:auto;padding:6px 8px}
  .sidebar nav a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}
  .sidebar nav a.active{border-bottom-color:var(--teal)}
  .sidebar .userbox{display:none}
  main.content{padding:14px}
}

/* ---- Cards & typography ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.card h1,.card h2{margin-top:0}
h1{font-size:21px;font-weight:700;letter-spacing:-.011em}
h2{font-size:15.5px;font-weight:700;letter-spacing:-.006em}
.muted{color:var(--muted)} .right{text-align:right} .mt{margin-top:14px}
.help{font-size:12.5px;color:var(--muted);margin-top:3px}
code{background:#f0e7d7;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:12.5px}

/* ---- Subtabs (the church-portal convention) ---- */
.subtabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px}
.subtab{padding:8px 14px;border:0;background:none;cursor:pointer;font:inherit;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;display:inline-block;font-weight:500;transition:color .14s,border-color .14s}
.subtab.active{color:var(--ink);border-bottom-color:var(--teal);font-weight:600}
.subtab:hover{color:var(--ink)}

/* ---- Filter chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chipbtn{border:1px solid var(--line);background:var(--card);border-radius:var(--radius-sm);padding:5px 12px;font:inherit;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;text-decoration:none;transition:border-color .14s,color .14s,background .14s}
.chipbtn:hover{border-color:#c9b899;color:var(--ink)}
.chipbtn.active{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:600}

/* ---- Tables ---- */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.table-wrap:has(>table){overflow-x:auto}   /* the v9.89 lesson, inherited */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13.5px}
/* 1.1.0: these three were the only cool greys hardcoded outside :root, so on the warm
   palette the tables read as blue-grey panels floating on sand. Now they follow the
   theme like everything else. */
th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--card);border-bottom:2px solid var(--line);font-weight:600}
tr:hover td{background:#f3ece1}
td b{font-weight:600}

/* ---- Forms ---- */
label{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin:10px 0 4px;letter-spacing:.01em}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;max-width:460px;padding:8px 11px;border:1px solid #d3c6ac;border-radius:var(--radius-sm);font:inherit;background:#fffdf8;color:var(--ink);transition:border-color .14s,box-shadow .14s}
input:hover,select:hover,textarea:hover{border-color:#bfae8e}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(194,112,28,.20)}
input:disabled,select:disabled{background:#efe8dc;color:var(--muted)}
details summary{outline:0}
details summary:hover{color:var(--ink)}

/* ---- Buttons ---- */
.btn{display:inline-block;background:var(--teal);color:#fff;border:1px solid var(--teal);padding:8px 16px;border-radius:var(--radius-sm);font:inherit;font-size:14px;cursor:pointer;text-decoration:none;font-weight:600;letter-spacing:.01em;transition:background .14s,border-color .14s,box-shadow .14s,transform .06s}
.btn:hover{background:var(--teal2);border-color:var(--teal2);box-shadow:0 2px 8px rgba(11,139,132,.28)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#fffdf8;color:var(--ink);border:1px solid #d3c6ac;font-weight:500}
.btn.secondary:hover{background:#f0e7d7;border-color:#bfae8e;box-shadow:none}
.btn.danger{background:var(--red);border-color:var(--red)}
.btn.danger:hover{background:#8f2f27;border-color:#8f2f27;box-shadow:0 2px 8px rgba(168,57,47,.28)}
.btn.small{padding:4px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* ---- Flash & badges ---- */
.flash{padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:12px;border:1px solid;border-left-width:4px;font-size:13.5px}
.flash.ok{background:var(--green-bg);color:var(--green);border-color:#a9cdb8;border-left-color:var(--green)}
.flash.error{background:var(--red-bg);color:var(--red);border-color:#dfb0a9;border-left-color:var(--red)}
.flash.info{background:var(--blue-bg);color:var(--blue);border-color:#aac4d1;border-left-color:var(--blue)}
.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.03em;padding:2px 8px;border-radius:5px;border:1px solid var(--line);background:#efe8dc;color:var(--muted)}
.badge.on{background:var(--green-bg);color:var(--green);border-color:#a9cdb8}
.badge.off{background:#efe8dc;color:var(--muted)}
.badge.warn{background:var(--yellow-bg);color:var(--yellow);border-color:#e0c98f}
.badge.red{background:var(--red-bg);color:var(--red);border-color:#dfb0a9}

/* ---- Stat tiles (dashboard alerts, clickable) ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px;margin:6px 0 14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;text-decoration:none;color:inherit;display:block;transition:border-color .14s,box-shadow .14s,transform .14s}
.tile:hover{border-color:var(--teal);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.tile .n{font-size:23px;font-weight:700;letter-spacing:-.01em}
.tile .l{font-size:12px;color:var(--muted);margin-top:2px}
.tile.alert .n{color:var(--red)}

/* ---- Login ---- */
.login-wrap{max-width:400px;margin:7vh auto;padding:0 14px}
.login-wrap .logo{display:block;margin:0 auto 14px;max-width:170px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}

/* ---- Excel-userform style amount boxes (tx_new) ---- */
.amtgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.amtbox{background:#fffdf8;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;transition:border-color .14s}
.amtbox:focus-within{border-color:var(--teal)}
.amtbox .t{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.amtbox input{max-width:none;width:100%;font-size:19px;font-weight:600;text-align:right;padding:9px}
.totline{font-size:16px;margin-top:10px;font-weight:500}
.totline b{color:var(--teal-soft-ink);font-weight:700}
.formrow{display:grid;grid-template-columns:150px 1fr 1fr;gap:12px}
@media (max-width:720px){.formrow{grid-template-columns:1fr}}

/* ---- In/Out segment buttons (tx_new) ---- */
.segbar{display:flex;gap:8px;margin:4px 0 14px}
.segbtn{flex:1;text-align:center;padding:11px 8px;border:1.5px solid #d3c6ac;border-radius:var(--radius-sm);background:#fffdf8;font:inherit;font-weight:700;font-size:14.5px;letter-spacing:.01em;cursor:pointer;color:var(--muted);transition:border-color .14s,color .14s,background .14s,box-shadow .14s}
.segbtn:hover{border-color:#bfae8e;color:var(--ink)}
.segbtn.in.active{border-color:var(--green);color:var(--green);background:var(--green-bg);box-shadow:inset 0 0 0 1px var(--green)}
.segbtn.out.active{border-color:var(--red);color:var(--red);background:var(--red-bg);box-shadow:inset 0 0 0 1px var(--red)}
.segbtn.mv.active{border-color:var(--teal);color:var(--teal-soft-ink);background:var(--teal-soft-bg);box-shadow:inset 0 0 0 1px var(--teal)}
.moverow{display:grid;grid-template-columns:96px 1fr 110px 1fr;gap:10px;align-items:center;margin:8px 0}
/* An extra transfer line (0.79.0) carries its own direction picker AND a clear button,
   so it is five controls where the fixed two lines are four. */
.moverow.mv-extra{grid-template-columns:96px 1fr 110px 1fr 34px}
/* The extra line's direction picker is colour-coded like the fixed lines' labels. */
.mv-dir{font-weight:700}
.mv-dir.is-out{color:var(--red)} .mv-dir.is-in{color:var(--green)}
.moverow .lbl{font-weight:700}
.moverow .lbl.out{color:var(--red)} .moverow .lbl.in{color:var(--green)}
.moverow select,.moverow input{max-width:none}
@media (max-width:640px){.moverow{grid-template-columns:96px 1fr;grid-auto-rows:auto}}
/* 1.7.2: the New-transaction grids lived in inline styles, which beat every media query, so a
   phone got the desktop columns squeezed. Here instead, with a phone layout of their own:
   the head row stacks, and an account row becomes account+currency / In+Out / total+x. */
.formrow.txhead{grid-template-columns:225px 1fr 1fr;gap:10px}
.moverow.srow,.moverow.srow-head{grid-template-columns:1fr 78px 1fr 1fr 96px 30px;gap:8px}
@media (max-width:640px){
  .formrow.txhead{grid-template-columns:1fr}
  .moverow.srow-head{display:none}
  .moverow.srow{grid-template-columns:1fr 1fr;padding-bottom:10px;border-bottom:1px solid #e8dfcc}
  #txform .moverow.srow .note-wrap{display:flex}
  .moverow.srow .note-wrap input{flex:1;min-width:0}
  .moverow.srow .srow-del{justify-self:end}
  .moverow.srow .srow-tot{text-align:left}
  .moverow.mv-extra{grid-template-columns:96px 1fr}
}
.balline{font-size:15px;margin-top:8px;font-weight:500}

/* ---- Shared floating dialog (accounts/rates/people, tx_new) ---- */
.dlgwrap{display:none;position:fixed;inset:0;background:rgba(10,18,30,.5);z-index:70;overflow:auto;backdrop-filter:blur(2px)}
.dlgcard{max-width:640px;margin:6vh auto;background:#fff;border-radius:var(--radius);box-shadow:0 24px 70px rgba(0,0,0,.38);overflow:hidden;border:1px solid var(--line)}
.dlghead{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;border-bottom:1px solid var(--line);background:#fffdf8}
.dlghead b{font-size:16px;letter-spacing:-.006em}
.dlgbody{padding:14px 20px 18px}

/* ---- Scrollbars (subtle, webkit) ---- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c9b899;border-radius:5px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#a89876;background-clip:content-box;border:2px solid transparent}
::-webkit-scrollbar-track{background:transparent}

/* ===== Compact dashboard (v0.16.0) ===== */
.dash-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.dash-head h1{margin:0}
.drawer-mini{font-size:13px;color:var(--muted)}
.drawer-mini b{color:var(--ink)}
.drawer-mini a{margin-left:6px}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin-bottom:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.stat-k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.stat-v{font-size:21px;font-weight:700;color:var(--ink)}
.dash-caps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cap{display:inline-block;background:var(--teal);color:#fff;border:0;border-radius:20px;padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.cap:hover{background:var(--teal2)}
.cap.ghost{background:transparent;color:var(--teal);border:1px solid var(--teal)}
.dash-grid3{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

/* ---- Dashboard: two big cards (v1.1.3) ----------------------------------------
   Elie: "bigger cards — one card to show the pool in dollar and LBP and Whish, with a
   total of how much all the money; second card, the IN2 income today."
   Five equal tiles gave the exchange rate the same visual weight as the total, so
   nothing on the page was the headline. */
.dash-two{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-bottom:14px;align-items:start}
.bigcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.bigcard.bad{border-color:var(--red)}
.bigcard-t{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.bigcard-v{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.moneyrow{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:10px}
.moneybit{display:flex;flex-direction:column;min-width:120px}
.moneybit .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.moneybit .v{font-size:19px;font-weight:700;letter-spacing:-.012em}
.moneybit .s{font-size:11.5px;color:var(--muted)}
.moneytotal{margin-top:14px;padding-top:12px;border-top:2px solid var(--line);display:flex;
  flex-direction:column}
.moneytotal .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.moneytotal .v{font-size:32px;font-weight:800;letter-spacing:-.022em;line-height:1.1;color:var(--teal)}
.moneytotal .s{font-size:11.5px;color:var(--muted)}
.ratenote{margin-top:12px;font-size:12.5px;color:var(--ink);text-decoration:none;
  border-top:1px solid var(--line);padding-top:9px}
.ratenote:hover{color:var(--teal)}
.mgr-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}

/* ---- Shift hand-over prompt (v1.1.9) -------------------------------------------
   Covers the screen on purpose. It is a question that has to be answered, and the
   only answers are "I handed over" and "ask me again in a minute". */
.shiftbg{position:fixed;inset:0;background:rgba(16,37,40,.55);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px}
/* 1.2.1: display:flex above beats the [hidden] attribute, so the prompt showed on every page
   from sign-in and "Still me" could not close it. */
.shiftbg[hidden]{display:none}
.shiftcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:22px 24px;max-width:460px;width:100%}
.shiftcard h2{margin:0 0 8px;font-size:18px}
.shiftcard p{margin:0 0 12px;font-size:14px;line-height:1.55}
.shiftacts{display:flex;gap:10px;flex-wrap:wrap;margin:0}
@media(max-width:900px){
  .dash-two{grid-template-columns:1fr}
}
.mini{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)}
.mini:hover{border-color:var(--teal)}
.mini-t{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.mini-v{font-size:16px;font-weight:700}
.mini-v.warn{color:var(--yellow)}
.mini .muted{font-size:12px}
/* The Manager tile carries a "Check now" button (0.83.0); the others are still plain
   links, so the row only appears where there is something in it. */
/* ===== Monthly target hint under the type picker (v0.84.0) ===== */
.tgt{margin:6px 0 0;padding:8px 12px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600}
.tgt.due{background:var(--yellow-bg);color:var(--yellow)}
.tgt.done{background:#e3f0e7;color:#2f7d54}
.tgt.over{background:#f6e3e0;color:var(--red)}

/* ===== Progress bar (v0.84.0) — how much of a monthly target is paid ===== */
.prog{height:10px;border-radius:6px;background:#e7dcc6;overflow:hidden;margin-top:12px}
.prog-fill{height:100%;border-radius:6px;transition:width .25s ease}

.mini-act{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.mini-act a{text-decoration:none}
.mini-act a:hover{color:var(--teal);text-decoration:underline}
a.mini:hover,.mini:hover{border-color:var(--teal)}
@media (max-width:900px){.dash-grid,.dash-grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dash-grid,.dash-grid3{grid-template-columns:1fr}}

/* ===== Compact Transactions filter bar (v0.16.0) ===== */
.tx-filterbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px}
.tx-filterbar .chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.chip-sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.tx-search{display:flex;gap:6px;align-items:center;margin:0}
.tx-search select,.tx-search input{padding:6px 8px;font-size:13px}
.tx-search select{max-width:170px}
.tx-search input[type=text]{max-width:160px}
/* Make the New-transaction floating form compact, and never hide fields behind hover */
#txform .srow{align-items:center}
#txform input,#txform select{padding:7px 9px}
#txform .note-wrap{display:inline-flex;gap:3px;align-items:center}
.reveal-on-hover,.row-actions-hover{opacity:1 !important;visibility:visible !important}

/* ===== Global action strip (v0.17.0) ===== */
.topstrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 14px;margin-bottom:14px}
.ts-money{display:flex;align-items:baseline;gap:7px;font-size:16px}
.ts-money .ts-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.ts-money b{color:var(--ink)}
.ts-money .ts-plus{color:var(--muted)}
.ts-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ts-btn{display:inline-block;background:var(--teal);color:#fff;border:0;border-radius:18px;
  padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.ts-btn:hover{background:var(--teal2)}
@media (max-width:560px){.topstrip{flex-direction:column;align-items:stretch}.ts-actions{justify-content:flex-start}}

/* (v0.31.0) The grouped admin chips were replaced by real Setup sub-tabs —
   see app/views/settings_nav.php. */

/* ===== Employees login cell (v0.25.4) ===== */
.login-cell{white-space:nowrap}
.wa-icon{display:inline-flex;vertical-align:middle;margin-left:8px;line-height:0}
.wa-icon svg{display:block}
.wa-icon:hover{opacity:.85}

/* ===== Settings WhatsApp sub-tabs (v0.25.5) ===== */
.subtabs.sub2{margin:4px 0 10px;border-bottom:1px solid var(--line);padding-bottom:0}
.subtabs.sub2 .subtab{font-size:13px;padding:6px 12px}

/* ===== Dashboard total tile (v0.26.0) ===== */
.stat-total{border-color:var(--teal);background:var(--teal-soft-bg)}
.stat-total .stat-v{color:var(--teal)}

/* ===== Inventory counts (v0.29.0) ===== */
.inv-start{max-width:420px}
.inv-tbl input[type=text]{width:100%;max-width:120px;text-align:right;margin:0;padding:5px 7px}
.inv-tbl td:last-child input[type=text]{max-width:100%;text-align:left}
.inv-tbl td{vertical-align:middle}
.inv-sec td{background:var(--teal-soft-bg);font-weight:700;color:var(--teal-soft-ink)}
.inv-note.needs{border-color:var(--red);background:#fbefec}

/* ===== Standard list: row menu (⋯) and clickable rows (v0.37.0 UX cleanup) ===== */
.rowmenu{position:relative;display:inline-block}
.rowmenu-btn:not(.btn){background:none;border:1px solid var(--line);border-radius:8px;padding:4px 10px;
  font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.rowmenu-btn:not(.btn):hover{background:var(--bg);color:var(--ink)}
/* 1.61.0: every row menu reads "Actions ▾" like services and assets/actmenu.js (one look app-wide). */
.rowmenu-btn.btn{white-space:nowrap}
.rowmenu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:40;min-width:180px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.16);padding:6px;display:none}
[dir=rtl] .rowmenu-pop{right:auto;left:0}
.rowmenu-pop.open{display:block}
.rowmenu-pop a,.rowmenu-pop button{display:block;width:100%;text-align:left;background:none;
  border:0;border-radius:7px;padding:9px 12px;font-size:14px;color:var(--ink);
  cursor:pointer;text-decoration:none}
[dir=rtl] .rowmenu-pop a,[dir=rtl] .rowmenu-pop button{text-align:right}
.rowmenu-pop a:hover,.rowmenu-pop button:hover{background:var(--bg)}
.rowmenu-pop .danger{color:var(--red)}
.rowmenu-pop .sep{height:1px;background:var(--line);margin:5px 2px}
tr.rowlink{cursor:pointer}
tr.rowlink:hover{background:var(--teal-soft-bg)}
tr.rowlink td.stopclick{cursor:default}
/* Uniform status badges */
.badge.st-active{background:var(--green-bg);color:var(--green)}
.badge.st-inactive{background:var(--bg);color:var(--muted)}
.badge.st-cancelled{background:var(--red-bg);color:var(--red)}

/* ===== Shared Add/Edit modal (v0.39.0 UX cleanup step 3) ===== */
.appmodal-bg{position:fixed;inset:0;background:rgba(20,30,40,.45);z-index:80;
  display:none;overflow:auto}
.appmodal-bg.open{display:block}
.appmodal-card{max-width:880px;margin:3vh auto;background:#fff;border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden;min-height:120px}
.appmodal-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--line)}
.appmodal-head b{font-size:18px}
.appmodal-body{padding:6px 18px 18px;max-height:82vh;overflow:auto}
[dir=rtl] .appmodal-head{flex-direction:row-reverse}
.appmodal-loading{padding:40px;text-align:center;color:var(--muted)}

/* ===== "Viewing as" banner (v0.72.0) =====
   Deliberately loud: it must be impossible to forget you are looking at someone
   else's app, because everything on the page is read-only while it shows. */
.impbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  background:var(--yellow-bg);border:1px solid #e3cf95;border-left:4px solid var(--yellow);
  color:var(--yellow);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;font-size:13.5px}
.impbar b{color:var(--ink)}
.impbar-txt{min-width:0}
.impbar form{margin:0}
.impbar-btn{background:var(--yellow);color:#fff;border:0;border-radius:var(--radius-sm);
  padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.impbar-btn:hover{background:#7a5709}

/* ===== Standard list header (v0.76.0) =====
   Title and the ONE primary button share a line, instead of stacking a heading, a button
   and a help line down the page (rule 10). The Setup landing list this replaces is gone —
   Setup is a tab now, not a menu of tabs. */
.listhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:14px 0 6px}
.listhead h2{margin:0}
[dir=rtl] .listhead{flex-direction:row-reverse}

/* ===== Background sync bars (v0.98.0) =====
   On every page, because a sync is now a job in the database rather than something that
   only exists while you stay on one screen. */
.syncbar{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:var(--radius);padding:9px 14px;margin-bottom:10px}
.syncbar-head{display:flex;align-items:center;gap:10px;justify-content:space-between;
  flex-wrap:wrap;font-size:13px;margin-bottom:6px}
.syncbar-head .muted{font-size:12px}
.syncbar-head a{text-decoration:none}
.syncbar-head a:hover{color:var(--red);text-decoration:underline}
.syncbar .prog{margin-top:0;height:8px}

/* 1.14.0 — open-ticket count beside "Tickets" in the sidebar */
.nav-count{display:inline-block;min-width:20px;padding:1px 6px;margin-inline-start:6px;border-radius:10px;background:#c0392b;color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center;vertical-align:1px}

/* 1.17.0 — GigaNet card on the dashboard */
.gn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.gn-acc{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px}
.gn-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.gn-gb .v{font-size:22px;font-weight:700;letter-spacing:-.01em}
.gn-bar{height:6px;border-radius:3px;background:var(--line);margin:6px 0;overflow:hidden}
.gn-bar span{display:block;height:100%;background:var(--green)}
.gn-bar span.mid{background:var(--yellow)} .gn-bar span.low{background:var(--red)}
.gn-err{color:var(--red);font-size:12.5px;margin-top:4px}
/* 1.34.0: dashboard right column = IN2 income + the small GigaNet tile; tap the tile for details */
.dash-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.gn-card{padding:12px 16px}
.gn-card>summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:4px}
.gn-card>summary::-webkit-details-marker{display:none}
.gn-card .bigcard-t svg{width:14px;height:14px;vertical-align:-2px}
.gn-caret{float:right;text-transform:none;letter-spacing:0;font-weight:500}
.gn-card[open] .gn-caret{visibility:hidden}
.gn-line{font-size:14px}
.gn-card>summary .gn-bar{margin:2px 0 0}
.gn-more{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

/* ===== ✨ What's new (1.21.0) ===== */
.wn-top{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-inline-end:10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);font-size:17px;text-decoration:none}
.wn-top:hover{border-color:var(--teal);background:var(--card)}
.wn-top .nav-count{position:absolute;top:-7px;right:-9px;margin:0}
.wn-modal{max-width:620px}
.wn-week{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:22px 0 8px;border-bottom:1px solid var(--line);padding-bottom:4px}
.wn-card{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.wn-card:last-child{border-bottom:0}
.wn-icon{font-size:26px;line-height:1;flex:none;width:34px;text-align:center}
.wn-body{flex:1;min-width:0}
.wn-body p{margin:6px 0}
.wn-title{font-weight:700;font-size:15px}
.wn-date{font-size:12px}
.wn-how{font-size:13.5px}
.wn-new{display:inline-block;margin-inline-start:8px;padding:1px 7px;border-radius:9px;background:var(--teal);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.04em;vertical-align:2px}
.wn-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.wn-ring{outline:3px solid var(--teal);outline-offset:4px;border-radius:6px;animation:wnpulse 1.2s ease-in-out 4}
@keyframes wnpulse{50%{outline-color:transparent}}
.wn-tip{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:95;max-width:min(560px,calc(100vw - 32px));background:#123;color:#fff;padding:12px 44px 12px 16px;border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.35);font-size:14px}
.wn-tip button{position:absolute;top:8px;right:8px;background:transparent;border:0;color:#fff;font-size:15px;cursor:pointer}
/* 1.21.1: pop-up only, a Seen per card */
.nav-count[hidden]{display:none}
.wn-lead{margin-top:4px}
.wn-auto .wn-card.is-seen{display:none}
.wn-card.is-seen{opacity:.75}
.wn-done{display:none;text-align:center;padding:10px 0}
.all-seen .wn-done{display:block}
.all-seen .wn-lead{display:none}
/* ===== 1.22.0: line SVG icons in place of emoji (app/icons.php) ===== */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-.14em;flex:none}
.btn .ico,.ts-btn .ico,.chipbtn .ico{width:1.05em;height:1.05em}
.wn-top .ico{width:19px;height:19px;color:var(--teal)}
.wn-icon{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:20px}
.wn-icon .ico{width:20px;height:20px}
.appmodal-head .ico{color:var(--teal)}
/* 1.22.1: document viewer for the iPhone Home Screen app (layout.php, standalone mode only) */
.docview{position:fixed;inset:0;z-index:120;background:#fff;display:flex;flex-direction:column}
.docview[hidden]{display:none}
.docview-bar{display:flex;gap:10px;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;border-bottom:1px solid var(--line);background:var(--card)}
.docview-bar .btn{font-size:17px;padding:10px 18px}
.docview iframe{flex:1;width:100%;border:0;background:#fff}
/* 1.24.0: People / Money / Stock tab row (layout.php) and the fast-tab swap */
.grouptabs{margin:-4px 0 16px}
#fastbody{transition:opacity .12s}
/* 1.24.1: Manager receipts self-check line (close page, dashboard) */
.mrc{font-size:13px;margin:6px 0 12px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.mrc-ok{color:#11734b;border-color:#bfe5d2;background:#eefaf3}
.mrc-bad{color:#a12a2a;border-color:#f0c4c4;background:#fdf0f0}

/* =====================================================================================
   1.27.0 — the Relief look, build 1 of 3 (Elie: "make it just like the services — the font,
   the corner edges, the layout, the colours, how it loads, smoother"). LOOK ONLY: no page
   logic moved. Values copied from services/index.html (:root 22-30, radii 46-58, chips,
   tags, toast 277, drawer 308-319). Kept as one block at the end so it wins over the older
   rules above without rewriting them, and so it can be read — or reverted — in one place.
   ===================================================================================== */
:root{
  --radius:16px; --radius-sm:12px; --r-btn:12px; --r-input:12px; --r-modal:20px;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sand2:#e8ddc9;
}
body{font:14px/1.55 'Inter',system-ui,-apple-system,'Segoe UI',Tahoma,'Noto Naskh Arabic',Arial,sans-serif}
h1{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
h2{font-size:15.5px;font-weight:600}
.card{border-radius:var(--radius);padding:20px 22px}
.card > h1:first-child,.card > h1{margin-bottom:12px}

/* Sidebar — Relief: 248px, amber pill for the open screen */
.sidebar{width:248px}
.sidebar nav{padding:10px 10px;gap:2px}
.sidebar nav a{border-left:0;border-radius:10px;padding:9px 12px;font-size:13.5px;transition:background .13s,color .13s}
.sidebar nav a.active{background:var(--teal);color:#fff;font-weight:600}
.sidebar nav a.active .nav-count{background:#fff;color:var(--teal)}

/* Top bar */
.topbar .crumb{font-family:var(--serif);font-size:18px;font-weight:600}
.navbtn{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r-btn);
  background:var(--bg);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;flex:none}
.navbtn:hover{border-color:var(--teal)}
.userchip{border-radius:999px;padding:4px 12px 4px 4px}
.userchip .av{border-radius:999px}
.wn-top{border-radius:999px;width:36px;height:36px}

/* Tabs → chips. Every tab row in the app is .subtabs/.subtab, so this one rule turns
   Settings, Setup, WhatsApp and the People / Money / Stock rows into Relief's chips. */
.subtabs{gap:6px;border-bottom:0;margin-bottom:16px}
.subtab{border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);
  padding:6px 13px;font-size:12.5px;font-weight:600;margin:0;transition:background .14s,color .14s,border-color .14s}
.subtab:hover{color:var(--ink);border-color:#c9b899}
.subtab.active{background:var(--sidebar);border-color:var(--sidebar);color:#fff}
.subtab.active .nav-count{background:#fff;color:var(--red)}
.subtabs.sub2{border-bottom:0;margin:-6px 0 16px;padding:10px 0 0;border-top:1px dashed var(--line)}
.subtabs.sub2 .subtab{font-size:12px;padding:5px 11px}
.subtabs.sub2 .subtab.active{background:var(--teal-soft-bg);border-color:var(--teal);color:var(--teal-soft-ink)}
.chipbtn{border-radius:999px;padding:6px 13px;font-weight:600}
.chipbtn.active{background:var(--sidebar);border-color:var(--sidebar)}

/* Buttons */
.btn{border-radius:var(--r-btn);padding:9px 16px;font-size:13.5px;box-shadow:0 2px 6px rgba(194,112,28,.22)}
.btn:hover{background:#a85e15;border-color:#a85e15;box-shadow:0 4px 12px rgba(194,112,28,.30)}
.btn.secondary{background:var(--card);border-color:var(--line);box-shadow:none}
.btn.secondary:hover{background:var(--bg);border-color:#c9b899}
.btn.danger{box-shadow:0 2px 6px rgba(168,57,47,.22)}
.btn.small{padding:6px 12px;font-size:12.5px;border-radius:10px}
.ts-btn,.cap{border-radius:999px}
.rowmenu-btn{border-radius:10px}
.rowmenu-pop,.usermenu-pop{background:var(--card);border-radius:14px;box-shadow:var(--shadow-lg)}

/* Inputs */
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],input[type=time],input[type=search],input[type=tel],select,textarea{
  border-radius:var(--r-input);border-color:var(--line);background:var(--card);padding:9px 12px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(194,112,28,.12)}

/* Tables — sand header, clipped corners */
.table-wrap{border-radius:14px}
th{background:var(--bg);border-bottom:1px solid var(--line);padding:10px 14px}
td{padding:10px 14px}
tr:hover td{background:var(--bg)}

/* Tags */
.badge{border-radius:999px;padding:2px 9px;font-size:11.5px;letter-spacing:.01em}
.nav-count{background:var(--red)}

/* Messages: errors and notes stay on the page (you need to read them); "done" messages
   become a toast at the bottom, like Relief (layout.php turns .flash.ok[data-toast] into it). */
.flash{border-radius:var(--radius-sm);border-left-width:1px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;z-index:200;
  max-width:min(560px,calc(100vw - 32px));background:var(--navy);color:#fff;padding:12px 18px;
  border-radius:14px;box-shadow:0 10px 34px rgba(16,37,40,.35);font-size:13.5px;font-weight:500;
  transition:opacity .3s,transform .3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.wn-tip{background:var(--navy);border-radius:14px}

/* Pop-ups: Relief's 20px card, fade + lift in, full width on a phone */
.appmodal-bg{background:rgba(16,37,40,.45);backdrop-filter:blur(2px)}
.appmodal-card{background:var(--card);border-radius:var(--r-modal);box-shadow:var(--shadow-lg);
  border:1px solid var(--line)}
.appmodal-bg.open .appmodal-card{animation:modalin .2s ease-out}
.appmodal-head b{font-family:var(--serif);font-weight:600}
.dlgcard{background:var(--card);border-radius:var(--r-modal)}
.dlghead{background:var(--card)}
.dlghead b{font-family:var(--serif);font-weight:600}
@keyframes modalin{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* Tiles and cards */
.tile,.stat,.mini,.bigcard,.topstrip,.syncbar,.impbar{border-radius:var(--radius)}
.bigcard-v,.moneytotal .v{font-family:var(--serif);font-weight:600}

/* Phone: the sidebar slides in from the side behind a ☰ button (Relief ≤900px), instead of
   becoming a sideways-scrolling strip above every page. */
.navshade{display:none}
@media (max-width:900px){
  .shell{flex-direction:row}
  .sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;width:264px;z-index:150;
    transform:translateX(-105%);transition:transform .22s ease;box-shadow:var(--shadow-lg)}
  .sidebar nav{flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:10px}
  .sidebar nav a{white-space:normal;border-bottom:0}
  .sidebar nav a.active{border-bottom:0}
  body.nav-open .sidebar{transform:none}
  body.nav-open .navshade{display:block;position:fixed;inset:0;background:rgba(16,37,40,.45);z-index:140}
  .navbtn{display:inline-grid;place-items:center}
  .topbar{gap:10px}
  main.content{padding:14px}
  .appmodal-card{margin:10px;max-width:none}
  .dlgcard{margin:10px auto;max-width:calc(100vw - 20px)}
}
@media (max-width:640px){
  .topbar .crumb{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .userchip .nm{display:none}
  .userchip{padding:4px}
  h1{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .toast,.sidebar,.appmodal-bg.open .appmodal-card{transition:none;animation:none}
}
/* 1.28.0: the search box layout.php puts over a table[data-search] */
input.listsearch{max-width:320px;margin:4px 0 10px;border-radius:999px;padding:8px 14px}
@media (max-width:640px){input.listsearch{max-width:none;font-size:16px}}
/* 1.29.0: top-bar Refresh */
.refreshbtn{cursor:pointer;font:inherit;color:var(--teal)}
.refreshbtn .ico{width:17px;height:17px}
.refreshbtn.spin .ico{animation:rspin .6s linear}
@keyframes rspin{to{transform:rotate(360deg)}}
/* 1.30.0: global search in the top bar (Relief's) */
.gsearch{position:relative;flex:1;max-width:460px;min-width:0}
.gsearch input{max-width:none;width:100%;border-radius:999px;padding:8px 16px;background:var(--bg)}
.gsearch input:focus{background:var(--card)}
.gsearch-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;max-height:70vh;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px}
.gsearch-pop[hidden]{display:none}
.gs-group{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:8px 10px 4px}
.gs-item{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.gs-item b{font-weight:600;font-size:13.5px}
.gs-item span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-item:hover,.gs-item.on{background:var(--bg)}
.gs-empty{padding:12px;color:var(--muted);font-size:13px}
@media (max-width:640px){
  .topbar{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px}
  .gsearch{order:10;flex-basis:100%;max-width:none}
  .gsearch input{font-size:16px}
}

/* 1.63.0 (like services): a field that must be filled shows * after its label — app-wide, from the
   input's own `required`, so no page lists it twice. .cbx sits between a label and its select. */
label:has(+ input[required]:not([type=checkbox]):not([type=radio]):not([type=hidden]))::after,
label:has(+ textarea[required])::after,
label:has(+ select[required])::after,
label:has(+ .cbx + select[required])::after{content:" *";color:var(--red);font-weight:600}

/* 1.64.0: in-page tabs — a hidden part stays hidden even when it is a flex card. */
[data-ptab-pane][hidden]{display:none!important}

/* 1.69.0 (Elie): a to-do on a booking row says what it is; the button that clears it carries data-todo. */
.todo-pill{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:10px;background:#c0392b;color:#fff;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
a.todo-pill:hover{background:#a93226;color:#fff}
.btn[data-todo]:not(.am-todo){box-shadow:0 0 0 2px #c0392b!important}