/* Panache Expense Book — mobile-first, brand-aligned, labour-friendly */
/* ✨ Real Panache logo palette only — teal/cyan/green/dark. There is no blue in
   the logo; --panache-sky-blue (a genuine bright blue) and this same-named var
   getting redefined to a real blue in reports.html/contractors.html/my_leads.html
   were removed 27 Aug after being flagged as visibly off-brand (a mustard KPI
   tile and a blue KPI tile on live). --panache-blue is kept, still oddly named,
   but its value has always correctly been the logo green — never remove/rename
   without re-checking every template's own local :root override first. */
:root{
  --panache-teal: #14766E;      /* Primary Teal */
  --panache-cyan: #17A29E;      /* Cyan (Sea Green) */
  --panache-light-cyan: #4BCCBE; /* Light Cyan */
  --panache-green: #2D9973;     /* Company Green */
  --panache-blue: #2D9973;      /* NOT actually blue — Bright Green (Logo Leaf Color) */
  --panache-cream: #F5F9F8;     /* Cream Background */
  --panache-dark: #1a3c3a;      /* Dark Text/Headers */

  /* Legacy aliases for compatibility */
  --pg-primary:#17A29E;         /* Panache Cyan */
  --pg-dark:#1a3c3a;            /* Panache Dark */
  --pg-mid:#14766E;             /* Panache Teal */
  --pg-accent:#2D9973;          /* Panache Green */
  --pg-cyan:#4BCCBE;            /* Light Cyan */
  --pg-pale:#F5F9F8;            /* Panache Cream */
  --pg-pale-dark:#E8F5F2;       /* Pale variant */
  --pg-text:#1a3c3a;            /* Dark Text */

  --ok:#2D9973; --warn:#0088FF; --bad:#FF6B6B;
  --card:#ffffff; --line:#E8F5F2; --muted:#6d8189;
  --radius:18px;
  /* Enhanced shadows with depth */
  --shadow:0 2px 6px rgba(20, 118, 110, .08), 0 8px 24px rgba(20, 118, 110, .12);
  --shadow-lg:0 4px 12px rgba(20, 118, 110, .12), 0 20px 48px rgba(20, 118, 110, .18);
  --shadow-xl:0 8px 24px rgba(20, 118, 110, .16), 0 32px 64px rgba(20, 118, 110, .22);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",
    "Noto Sans Tamil","Noto Sans Telugu","Noto Sans Devanagari",sans-serif;
  color:var(--pg-text);
  /* Enhanced ambient vignettes: dark green & cyan blue gradient orbs */
  background:
    radial-gradient(1400px 580px at 8% -12%, rgba(20, 118, 110, .28), transparent 65%),
    radial-gradient(1200px 600px at 112% 2%, rgba(75, 204, 190, .24), transparent 62%),
    radial-gradient(1100px 750px at 50% 125%, rgba(20, 118, 110, .26), transparent 68%),
    linear-gradient(180deg, #f5f9f8 0%, #e8f5f2 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:520px;margin:0 auto;min-height:100vh;position:relative;
  display:flex;flex-direction:column}
/* Enhanced inner vignette on the phone-width column — dark green & cyan edges */
.wrap::before{content:"";position:fixed;inset:0;max-width:520px;margin:0 auto;pointer-events:none;
  box-shadow:inset 0 0 100px rgba(20, 118, 110, .12),
             inset 0 -70px 90px rgba(20, 118, 110, .08),
             inset 4px 0 20px rgba(75, 204, 190, .06),
             inset -4px 0 20px rgba(20, 118, 110, .08);z-index:1}
.topbar,.subbar,.content,.savebar{position:relative;z-index:2}

/* ---- top bar — enhanced depth & shadow ---- */
.topbar{background:linear-gradient(135deg, var(--panache-teal) 0%, var(--panache-cyan) 100%);color:#fff;
  padding:15px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;
  box-shadow:0 6px 24px rgba(20, 118, 110, .26), inset 0 1px 0 rgba(255,255,255,.15)}
.topbar .brand{font-weight:800;font-size:18px;letter-spacing:.2px;flex:1;
  display:flex;align-items:center;gap:10px}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.topbar .brand-txt{font-size:15px;font-weight:700}
.topbar .brand small{display:block;font-weight:600;font-size:10px;opacity:.75;letter-spacing:1.5px;margin-top:2px}
.pgmark{display:block;flex:0 0 auto}
.topbar .pgmark{filter:drop-shadow(0 3px 7px rgba(0,0,0,.18))}
/* real Panache Green logo (dark artwork) — pill keeps it legible on the dark bar */
.logo-pill{display:inline-flex;align-items:center;background:#fff;border-radius:9px;
  padding:4px 8px;box-shadow:0 3px 9px rgba(0,0,0,.18);flex:0 0 auto}
.brand-logo{height:18px;width:auto;display:block}
.brand-logo-lg{height:30px}
.hero-logo-card{position:relative;display:inline-block;margin:0 auto 18px;padding:18px 28px;
  border-radius:22px;background:linear-gradient(160deg,#ffffff,#f2fbfa);
  box-shadow:0 18px 42px rgba(20,110,105,.22),inset 0 0 0 1px rgba(255,255,255,.75)}
.hero-logo-card::before{content:"";position:absolute;inset:-14px;border-radius:32px;z-index:-1;
  background:radial-gradient(circle,rgba(89,199,214,.5),transparent 70%);filter:blur(10px)}
.hero-logo-img{height:56px;width:auto;display:block}
.topbar .iconbtn{color:#fff;background:rgba(255,255,255,.14);border:none;border-radius:10px;
  padding:8px 11px;font-size:14px;font-weight:600;cursor:pointer}
.topbar .iconbtn:active{transform:scale(.96)}
.langpick{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.14);border-radius:10px;
  padding:6px 8px 6px 10px;font-size:13px}
.langpick select{background:transparent;border:none;color:#fff;font-size:13px;font-weight:700;
  font-family:inherit;padding-right:2px;cursor:pointer;max-width:96px}
.langpick select option{color:#1a2e35}

.subbar{background:rgba(255,255,255,.7);color:var(--pg-dark);padding:9px 16px;font-size:13px;
  display:flex;align-items:center;gap:8px;font-weight:700;border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px)}
.subbar .dot{opacity:.45}
.subbar .who{font-weight:800;color:var(--pg-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topnav{margin-left:auto;display:flex;gap:3px;align-items:flex-end;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{flex:0 0 auto;min-width:50px;padding:3px 6px 4px;display:flex;flex-direction:column;
  align-items:center;gap:1px;border-radius:9px;text-decoration:none;color:var(--pg-dark);transition:.12s}
.topnav a b{font-size:18px;line-height:1;font-weight:400}
.topnav a span{font-size:9.5px;font-weight:700;white-space:nowrap;opacity:.82;letter-spacing:.1px}
.topnav a:active{transform:scale(.94)}
.topnav a:hover{background:rgba(20,110,105,.10)}
.subbar .who{max-width:34vw}

.content{flex:1;padding:18px 16px 175px}   /* clear the fixed savebar (2-button draft bar is tall) */

/* Admin: department multi-select + role picker (compact, elegant — enhanced) */
.deptpick{display:flex;flex-direction:column;gap:6px}
.deptopt{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#fff;
  border:1.5px solid var(--line);border-radius:11px;font-size:13px;font-weight:600;transition:.12s;
  box-shadow:0 2px 6px rgba(20, 118, 110, .05)}
.deptopt.on{border-color:var(--pg-primary);background:rgba(20,110,105,.05);box-shadow:0 4px 12px rgba(20, 118, 110, .15)}
.deptopt input[type=checkbox]{width:17px;height:17px;accent-color:var(--pg-primary);flex:0 0 auto}
.deptopt .dp-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deptopt .dp-home{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  color:var(--muted);white-space:nowrap}
.deptopt .dp-home input{width:15px;height:15px;accent-color:#e0a800}
/* ===== Elegant Add-Expense: grouped cards + amount hero ===== */
.fcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px;
  margin-bottom:11px;box-shadow:var(--shadow-lg);position:relative}
.fcard::after{content:"";position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 60%);pointer-events:none}
.fcard-h{font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--pg-mid);margin:0 0 11px}
.fcard .fld:first-of-type{margin-top:0}
/* Amount + Date share one line: amount on the left, date boxed on the right. */
.amount-card{padding:11px 16px;display:flex;align-items:center;gap:14px}
.amount-hero{flex:1;min-width:0;text-align:left}
.amount-hero .ah-lbl{display:block;font-size:9.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);margin-bottom:1px}
.amount-hero .ah-in{display:flex;align-items:baseline;justify-content:flex-start;gap:4px}
.amount-hero .ah-cur{font-size:19px;font-weight:800;color:var(--pg-mid)}
.amount-hero input{border:none;outline:none;background:transparent;font-family:inherit;
  font-size:29px;font-weight:800;color:var(--pg-dark);flex:1;min-width:0;width:100%;text-align:left;padding:0;line-height:1.1}
.amount-hero input::placeholder{color:#cfe6e3}
/* hide the browser number spinners — sleek, no up/down arrows */
.amount-hero input::-webkit-outer-spin-button,
.amount-hero input::-webkit-inner-spin-button{-webkit-appearance:none;-webkit-margin-collapse:0;margin:0}
.amount-hero input[type=number]{-moz-appearance:textfield;appearance:textfield}
.ah-date{display:flex;flex-direction:column;gap:2px;align-items:flex-start;flex-shrink:0;
  border-left:1px dashed var(--line);padding-left:14px}
.ah-datelbl{font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.ah-date input{max-width:150px;padding:5px 9px;font-size:13px;font-weight:700}
.loc-btn{margin-top:8px;font-size:13px;padding:10px 12px;width:100%}
.loc-msg{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--muted)}

/* ═════ PHOTO CARD AT TOP — Large, Clickable Bill Capture ═════ */
.photo-card-top{
  background:linear-gradient(135deg,var(--pg-pale) 0%,#e8f7f6 100%);
  border:2px dashed var(--pg-primary);
  padding:12px;
  margin-bottom:12px
}
.photo-btn-large{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border:2px dashed var(--pg-mid);
  border-radius:13px;
  background:#fff;
  cursor:pointer;
  transition:.12s;
  font-size:13px;
  font-weight:600;
  color:var(--pg-dark);
  width:100%;
  line-height:1.3
}
.photo-btn-large:active{
  background:var(--pg-pale);
  border-color:var(--pg-primary);
  transform:scale(.98)
}
.photo-btn-large svg{
  width:20px;
  height:20px;
  color:var(--pg-mid);
  flex-shrink:0;
  opacity:.85
}
.photo-btn-large input[type=file]{
  display:none
}
.er-photos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px
}
.er-photos a{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(42,83,101,.12)
}
.er-photos img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

/* Travel trigger row on the main form (single clean line) */
.travel-open{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  border:1.5px dashed var(--pg-primary);background:var(--pg-pale);border-radius:13px;padding:11px 13px}
.travel-open.filled{border-style:solid;border-color:var(--line);background:#fff}
.travel-open .to-ic{font-size:20px;line-height:1}
.travel-open .to-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.travel-open .to-txt b{font-size:14px;font-weight:800;color:var(--pg-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.travel-open .to-txt small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.travel-open .to-arrow{font-size:22px;color:var(--pg-mid);line-height:1}

/* ── Bottom sheet (travel claim, and future overlays) ── */
.sheet-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(26,46,53,.40);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .24s ease}
.sheet-ov.open{opacity:1}
.sheet-ov[hidden]{display:none}
.sheet{width:100%;max-width:480px;background:var(--card);border-radius:22px 22px 0 0;
  padding:8px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);
  max-height:93vh;overflow-y:auto;transform:translateY(100%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.sheet-ov.open .sheet{transform:translateY(0)}
.sheet-grip{width:38px;height:4px;border-radius:3px;background:var(--line);margin:6px auto 12px}
.sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sheet-h span{font-size:16px;font-weight:800;color:var(--pg-dark)}
.sheet-x{border:none;background:var(--pg-pale);color:var(--pg-dark);width:30px;height:30px;
  border-radius:50%;font-size:20px;line-height:1;cursor:pointer;padding:0}
.fld2{display:block;font-size:12px;font-weight:800;color:var(--pg-dark);margin:13px 0 5px}
.fld2 em{font-style:normal;font-weight:600;color:var(--muted);font-size:11px;margin-left:4px}
.loc-row{display:flex;gap:8px}
.loc-row .input{flex:1}
.loc-pin{flex-shrink:0;width:46px;border:1.5px solid var(--line);border-radius:11px;
  background:var(--pg-pale);font-size:17px;cursor:pointer}
.chk{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--pg-dark);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--pg-primary)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2px;align-items:end}
.km-row{display:flex;align-items:center;gap:6px}
.km-row .input{text-align:center}
.km-row span{font-size:13px;font-weight:700;color:var(--muted)}
.veh2{display:flex;flex-direction:column;gap:6px}
.veh2-o{border:1.5px solid var(--line);border-radius:11px;background:#fff;padding:8px 10px;
  font-size:13px;font-weight:700;color:var(--pg-dark);cursor:pointer;text-align:left}
.veh2-o.sel{border-color:var(--pg-primary);background:var(--pg-pale)}
.veh2-o small{color:var(--muted);font-weight:600}
.sheet-total{display:flex;align-items:center;justify-content:space-between;margin-top:18px;
  padding:12px 15px;background:var(--pg-pale);border-radius:13px}
.sheet-total span{font-size:13px;font-weight:800;color:var(--pg-dark)}
.sheet-total b{font-size:23px;font-weight:800;color:var(--pg-mid)}
.sheet-note{font-size:11.5px;color:var(--warn);font-weight:600;margin:9px 2px 0;line-height:1.4}
.sheet-save{width:100%;margin-top:14px}
.sheet-save:disabled{opacity:.45}

/* "This expense is for" segmented picker: Project / Sales visit / Task */
.refpick{display:flex;gap:6px;margin-bottom:14px}
.refopt{flex:1;padding:11px 6px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  font-size:12.5px;font-weight:700;color:var(--pg-dark);cursor:pointer;line-height:1.25;transition:.12s}
.refopt.on{border-color:var(--pg-primary);background:rgba(20,110,105,.08);
  box-shadow:0 4px 12px rgba(20,110,105,.14)}
.refopt:active{transform:scale(.97)}

/* draft: quiet grey text actions (FSE-style) instead of a big red button */
.draft-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 8px}
.savebar .draft-actions{margin:2px 0 0}
.addnew-link{display:inline-block;margin-top:9px;font-weight:700;font-size:13px;color:var(--pg-mid)}
.txtlink{color:var(--muted);font-size:14px;font-weight:600;text-decoration:none}
.txtlink:active{opacity:.6}
.txtlink-sep{color:var(--line);font-weight:700}
.txtlink-del{color:#b0656a}
.dept-rename{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.dept-rename .dr-ic{width:48px;text-align:center;padding:8px 4px;font-size:16px}
.dept-rename .dr-nm{flex:1;padding:8px 10px;font-size:13.5px;font-weight:700}
.dept-rename .dr-save{padding:8px 12px;font-size:12.5px;flex:0 0 auto}
.rolepick{display:flex;flex-direction:column;gap:6px}
.roleopt{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff;
  border:1.5px solid var(--line);border-radius:11px;font-size:12.5px;font-weight:600}
.roleopt input{width:17px;height:17px;accent-color:var(--pg-primary);flex:0 0 auto}

/* ---- headings ---- */
h1.screen{font-size:16px;margin:6px 0 16px;font-weight:700;color:var(--pg-dark)}
.hint{color:var(--muted);font-size:14px;margin:-8px 0 16px}
/* Project form: title + small auto-code chip in the top-right corner */
.pform-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 16px}
.code-chip{display:inline-flex;align-items:center;gap:6px;background:var(--pg-soft,#eef4f0);border:1px solid var(--line);border-radius:10px;padding:5px 9px}
.code-chip span{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.code-chip input{width:88px;border:0;background:transparent;font-size:13px;font-weight:700;color:var(--pg-dark);padding:0;text-align:right}
.code-chip input:focus{outline:none}

/* ---- big choice buttons (language / department / people) — enhanced shadows ---- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;
  box-shadow:var(--shadow-lg);cursor:pointer;transition:.16s;min-height:112px;justify-content:center;
  text-align:center;position:relative}
.tile::after{content:"";position:absolute;inset:0;border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 60%);pointer-events:none}
.tile:active{transform:scale(.97);border-color:var(--pg-primary);box-shadow:var(--shadow-xl)}
.tile .emoji{font-size:34px;line-height:1}
.tile .label{font-weight:700;font-size:16px;color:var(--pg-dark)}
.tile.lang .label{font-size:18px}

.list{display:flex;flex-direction:column;gap:10px}
.row-btn{background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-lg);
  cursor:pointer;transition:.16s;font-size:17px;font-weight:600;color:var(--pg-dark);position:relative}
.row-btn::after{content:"";position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 60%);pointer-events:none}
.row-btn:active{transform:scale(.98);border-color:var(--pg-primary);box-shadow:var(--shadow-xl)}
.row-btn .emoji{font-size:26px}
.row-btn .chev{margin-left:auto;color:var(--pg-primary);font-size:20px}
.row-btn .badge{margin-left:auto;background:var(--pg-accent);color:#1a2e35;font-size:12px;
  font-weight:800;padding:3px 10px;border-radius:20px}
/* person-picker avatars — enhanced elegant initials in gradient circles with depth */
.avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:17px;letter-spacing:.3px;
  background:linear-gradient(135deg, #14766E 0%, #0F5550 100%);color:#fff;
  border:2px solid rgba(255,255,255,.4);
  box-shadow:0 6px 16px rgba(20, 118, 110, .28), inset 0 1px 2px rgba(255,255,255,.2);
  position:relative}
.avatar::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);pointer-events:none}
.avatar.appr{background:linear-gradient(135deg, #B45309 0%, #8B3A0B 100%);
  border-color:rgba(255,255,255,.35);box-shadow:0 6px 16px rgba(180, 83, 9, .28)}

/* ---- home action cards — elevated with enhanced shadows ---- */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.action{border-radius:var(--radius);padding:22px 14px;color:#fff;display:flex;flex-direction:column;
  align-items:center;gap:11px;box-shadow:var(--shadow-xl);cursor:pointer;min-height:128px;
  justify-content:center;text-align:center;font-weight:700;font-size:16px;transition:transform .16s,box-shadow .16s;
  position:relative;overflow:hidden}
.action::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 60%)}
.action:active{transform:scale(.96);box-shadow:var(--shadow-lg)}
.action .emoji{font-size:26px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.26);border-radius:16px;backdrop-filter:blur(4px);box-shadow:inset 0 2px 8px rgba(0,0,0,.1)}
.action.add{background:linear-gradient(135deg, var(--panache-cyan) 0%, var(--panache-teal) 100%)}
.action.mine{background:linear-gradient(135deg, var(--panache-dark) 0%, var(--panache-teal) 100%)}
.action.approve{background:linear-gradient(135deg, var(--panache-green) 0%, #45b391 100%);color:#1a2e35;grid-column:1/-1}
.action .badge{background:#fff;color:var(--bad);border-radius:20px;padding:1px 10px;font-size:13px;font-weight:800}

/* ---- forms ---- */
form label.fld{display:block;font-weight:700;color:var(--pg-dark);margin:15px 0 6px;font-size:13.5px}
.input,select.input,textarea.input{width:100%;border:1.5px solid var(--line);border-radius:12px;
  padding:11px 13px;font-size:15px;line-height:1.4;background:#fff;color:var(--pg-text);
  font-family:inherit;box-sizing:border-box}
/* Normalise selects to the exact same box as text inputs (native selects render
   a few px taller) + a slim custom chevron, so every field is one sleek height. */
select.input{-webkit-appearance:none;appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7c72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}
.input:focus,select.input:focus,textarea.input:focus{outline:none;border-color:var(--pg-primary);
  box-shadow:0 0 0 3px var(--pg-pale-dark)}
textarea.input{min-height:64px;resize:vertical;line-height:1.4}
.amount-input{font-size:26px;font-weight:800;text-align:center;letter-spacing:.5px;padding:16px}

/* category / cost-centre chips — small icons in an even, balanced grid */
/* flex, not fixed-column grid: a dangling last row (e.g. just "Other" alone)
   stretches to fill the row instead of leaving empty space on the right */
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cat{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:8px 5px;
  display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:.1s;
  min-height:40px;text-align:center;line-height:1.15;flex:1 1 30%;min-width:90px;box-sizing:border-box}
.cat .emoji{font-size:16px;flex-shrink:0}
.cat .cl{font-size:11px;font-weight:700;color:var(--pg-dark)}
.cat input{display:none}
.cat.sel{border-color:var(--pg-primary);background:var(--pg-pale);
  box-shadow:0 0 0 1.5px var(--pg-primary) inset}
.cat.sel .cl{color:var(--pg-mid)}
.cat:active{transform:scale(.96)}
/* Category narrowing: smooth fade when hidden */
.cat{transition:opacity .2s ease, display .2s ease}
/* the "Add bill photo" tile lives in the same row/grid as categories (fills
   the space beside a lone last tile like "Other") but reads as an action,
   not a selectable category */
.cat-photo{border-style:dashed;border-color:var(--pg-primary);background:var(--pg-pale-dark)}
.cat-photo .cl{color:var(--pg-mid)}
.cat-photo .emoji{color:var(--pg-mid)}

/* Cost Centre Display Card */
#cc_display{
  background:var(--pg-pale);
  border-left:3px solid var(--pg-mid);
  padding:10px 12px;
  border-radius:8px;
  margin-top:12px !important
}
#cc_display_value{
  font-size:14px;
  font-weight:600;
  color:var(--pg-dark);
  margin-bottom:8px
}
#change-cc-btn{
  font-size:12px;
  font-weight:600;
  color:var(--pg-mid);
  text-decoration:underline;
  cursor:pointer
}
#change-cc-btn:hover{
  color:var(--pg-dark)
}

/* two-field row (Date + Amount) */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .amount-input{font-size:22px;padding:12px}

/* photos: Camera / Gallery split + removable thumbnail grid */
.ph-count{margin-left:8px;background:var(--pg-primary);color:#fff;border-radius:12px;
  padding:1px 9px;font-size:11px;font-weight:800}
.photo-actions{display:flex;gap:8px;margin-top:4px}
.photo-btn2{flex:0 0 auto;border:1.5px solid var(--pg-primary);color:var(--pg-mid);background:var(--pg-pale);
  border-radius:11px;padding:11px 16px;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;cursor:pointer}
.photo-btn2:active{transform:scale(.98)}
.photo-btn2 input{display:none}
.thumbgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.thumb-cell{position:relative;border-radius:10px;overflow:hidden;border:2px solid var(--pg-primary);aspect-ratio:1}
.thumb-cell img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;
  font-size:10px;font-weight:700;text-align:center;padding:2px 0}
.thumb-x{position:absolute;top:4px;right:4px;width:20px;height:20px;border:none;border-radius:50%;
  background:rgba(220,38,38,.9);color:#fff;font-size:13px;font-weight:900;line-height:1;cursor:pointer;padding:0}

/* sticky save bar */
.savebar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;
  display:flex;gap:10px;z-index:30}
.btn{flex:1;border:none;border-radius:11px;padding:13px;font-size:15.5px;font-weight:800;cursor:pointer}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg, var(--panache-teal) 0%, var(--panache-cyan) 100%);color:#fff}
.btn-ghost{background:var(--pg-pale);color:var(--pg-dark);flex:0 0 auto;padding:16px 20px}
.btn-accent{background:linear-gradient(135deg, var(--panache-cyan) 0%, var(--panache-green) 100%);color:#fff}
.btn-danger{background:linear-gradient(135deg, #FF8A80 0%, var(--bad) 100%);color:#fff}

/* ---- expense cards / list — enhanced depth ---- */
.exp{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  box-shadow:var(--shadow-lg);margin-bottom:11px;display:flex;gap:13px;align-items:flex-start;transition:.12s}
.exp:active{box-shadow:var(--shadow-xl)}
.exp .ci{font-size:22px;line-height:1;margin-top:2px}
.exp .body{flex:1;min-width:0}
.exp .amt{font-weight:700;font-size:15px;color:var(--pg-dark)}
.exp .meta{color:var(--muted);font-size:12px;margin-top:2px}
.exp .proj{color:var(--pg-mid);font-weight:700;font-size:12.5px;margin-top:2px}
.pill{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;margin-top:6px}
.pill.pending{background:#FFF3E0;color:var(--warn)}
.pill.approved{background:#E7F5E9;color:var(--ok)}
.pill.rejected{background:#FDECEC;color:var(--bad)}

.totalbar{background:var(--pg-dark);color:#fff;border-radius:14px;padding:15px 18px;display:flex;
  justify-content:space-between;align-items:center;margin-bottom:16px;font-weight:700}
.totalbar .big{font-size:22px;font-weight:700;letter-spacing:-.3px}

.empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:16px}
.empty .emoji{font-size:46px;display:block;margin-bottom:12px}

/* approval action row */
.appr-actions{display:flex;gap:8px;margin-top:12px}
.appr-actions form{flex:1;display:flex}
/* Sleeker than the default .btn (which is sized for a single full-width primary
   CTA like Save Expense) — Approve/Reject sit side by side, so a lighter touch
   reads cleaner than two equally-huge, equally-bold blocks. */
.appr-actions .btn{padding:9px 10px;font-size:13px;font-weight:700;border-radius:9px;
  box-shadow:0 2px 6px rgba(0,0,0,.08)}

/* flash */
.flash{padding:13px 16px;border-radius:12px;margin-bottom:14px;font-weight:600;font-size:15px}
.flash.success{background:#E7F5E9;color:var(--ok);border:1px solid #b6ddbd}
.flash.error{background:#FDECEC;color:var(--bad);border:1px solid #f0c1c1}

/* pin pad */
.pin-display{font-size:34px;letter-spacing:12px;text-align:center;margin:20px 0;height:44px;color:var(--pg-dark)}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:300px;margin:0 auto}
.pinpad button{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:20px;
  font-size:24px;font-weight:700;color:var(--pg-dark);cursor:pointer}
.pinpad button:active{background:var(--pg-pale)}
.linkback{display:inline-block;margin-top:18px;color:var(--pg-mid);font-weight:700}

/* accounts: pay form + paid line */
.pay-form{display:flex;gap:6px;margin-top:8px;align-items:center}
.pay-form select.input{max-width:120px;padding:9px}
.pay-form input.input{flex:1;padding:9px}
.pay-form .btn{padding:9px 12px;font-size:13px}
.paid-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.pmode{font-size:12.5px;font-weight:700;color:var(--pg-mid)}
.emp-name{font-weight:700;font-size:14.5px;color:var(--pg-dark)}
.emp-name em{font-style:normal;color:var(--muted);font-weight:600;font-size:12px}
.emp-sub{font-size:12.5px;color:var(--muted);margin-top:1px}

/* admin: foldable department accordion — enhanced depth */
.deptblock{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:11px;
  box-shadow:var(--shadow-lg);overflow:hidden;transition:.12s}
.deptblock:active{box-shadow:var(--shadow-xl)}
.deptblock>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
  padding:14px 15px;font-weight:700;color:var(--pg-dark);user-select:none}
.deptblock>summary::-webkit-details-marker{display:none}
.deptblock .d-ic{font-size:22px}
.deptblock .d-name{font-size:15px}
.deptblock .d-count{margin-left:auto;background:var(--pg-pale);color:var(--pg-mid);font-weight:800;
  font-size:12px;padding:2px 10px;border-radius:20px}
.deptblock .d-chev{transition:.2s;color:var(--pg-mid);font-size:14px}
.deptblock[open] .d-chev{transform:rotate(180deg)}
.deptbody{padding:4px 12px 14px;border-top:1px solid var(--pg-pale-dark)}
.emp-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--pg-pale)}
.emp-row:last-of-type{border-bottom:none}
.emp-row.off{opacity:.5}
.emp-main{flex:1;min-width:0}
.emp-act{width:34px;height:32px;display:flex;align-items:center;justify-content:center;font-size:15px;
  background:var(--pg-pale);border:none;border-radius:9px;cursor:pointer;color:var(--pg-dark)}
.emp-empty{color:var(--muted);font-size:13px;padding:8px 4px}
.add-emp{display:inline-flex;margin-top:12px;color:var(--pg-primary);font-weight:800;font-size:14px}
.add-dept{display:flex;gap:8px;align-items:center;margin-top:6px}
.add-dept input[name=icon]{max-width:56px;text-align:center}
.add-dept .btn{white-space:nowrap;padding:13px 15px}

.greet{font-size:18px;font-weight:700;color:var(--pg-dark);margin:2px 0 16px;letter-spacing:-.2px}
.greet span{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:1px}

/* ---- clean login-first landing ---- */
.landing-bar{background:transparent;box-shadow:none;color:var(--pg-dark)}
.landing-bar .brand{color:var(--pg-dark)}
.landing-bar .brand small{color:var(--pg-mid);opacity:.9}
.landing-bar .langpick{background:rgba(20,110,105,.10)}
.landing-bar .langpick select{color:var(--pg-dark)}
/* ===== Premium landing ===== */
/* centre the whole stack vertically so empty space splits evenly top & bottom;
   a modest gap sits between the Fast/9-lang/Private chips and the Welcome box */
.landing{position:relative;padding:20px 2px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 88px)}
.landing>.login-card{margin-top:28px}
.landing .orb{position:absolute;border-radius:50%;filter:blur(44px);z-index:0;pointer-events:none;
  opacity:.6;animation:float 12s ease-in-out infinite}
.orb1{width:250px;height:250px;top:-40px;left:-60px;
  background:radial-gradient(circle,rgba(89,199,214,.9),transparent 70%)}
.orb2{width:230px;height:230px;top:60px;right:-70px;animation-delay:-4s;
  background:radial-gradient(circle,rgba(20,174,161,.75),transparent 70%)}
.orb3{width:280px;height:280px;bottom:-60px;left:20%;animation-delay:-8s;
  background:radial-gradient(circle,rgba(162,189,56,.5),transparent 70%)}
@keyframes float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-18px) translateX(10px)}}
.landing>.hero,.landing>.login-card,.landing>.landing-foot{position:relative;z-index:1}
.hero-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.hero-chips .chip{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--pg-dark);
  box-shadow:0 4px 14px rgba(20,83,101,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.login-accent{position:absolute;top:0;left:26px;right:26px;height:4px;border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,var(--pg-cyan),var(--pg-primary),var(--pg-accent))}
.login-tabs{display:flex;gap:5px;margin:12px 0 2px;background:var(--pg-pale);padding:3px;border-radius:10px}
.ltab{flex:1;padding:7px 6px;border:none;border-radius:8px;background:transparent;font-size:12.5px;
  font-weight:700;color:var(--pg-mid);cursor:pointer;transition:.12s}
.ltab.on{background:#fff;color:var(--pg-dark);box-shadow:0 3px 9px rgba(20,83,101,.12)}
.landing-foot{text-align:center;margin:22px 0 4px;font-size:12px;font-weight:700;
  letter-spacing:.4px;color:var(--pg-mid);opacity:.75}

.hero{text-align:center;padding:30px 20px 22px;position:relative;overflow:visible}
/* soft brand-colour vignettes framing the hero — sea-green, cyan, sky */
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;
  filter:blur(46px);opacity:.55;z-index:0;pointer-events:none}
.hero::before{width:230px;height:230px;top:-30px;left:-40px;
  background:radial-gradient(circle,rgba(89,199,214,.85),transparent 68%)}
.hero::after{width:210px;height:210px;top:10px;right:-46px;
  background:radial-gradient(circle,rgba(20,174,161,.6),transparent 68%)}
.hero>*{position:relative;z-index:1}
.hero-logo{position:relative;width:112px;height:112px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;border-radius:30px;
  background:linear-gradient(160deg,#ffffff,#f0fbfa);
  box-shadow:0 18px 40px rgba(20,110,105,.28),inset 0 0 0 1px rgba(255,255,255,.7)}
.hero-logo::before{content:"";position:absolute;inset:-14px;border-radius:40px;z-index:-1;
  background:radial-gradient(circle,rgba(89,199,214,.45),transparent 70%);filter:blur(10px)}
.hero-logo .pgmark{filter:drop-shadow(0 6px 12px rgba(20,110,105,.28))}
.hero-title{font-size:34px;font-weight:800;color:var(--pg-dark);letter-spacing:-.5px;margin-top:8px}
.hero-accent{width:48px;height:4px;border-radius:3px;margin:12px auto 0;
  background:linear-gradient(90deg,var(--pg-cyan),var(--pg-primary),var(--pg-accent))}
.hero-sub{font-size:12.5px;color:var(--muted);margin-top:12px;font-weight:600}
.login-card{background:rgba(255,255,255,.9);border-radius:18px;padding:15px 16px 14px;
  margin:6px auto 0;max-width:350px;
  box-shadow:0 16px 40px rgba(20,83,101,.14);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative}
.login-head{font-size:17px;font-weight:800;color:var(--pg-dark)}
.login-note{color:var(--muted);font-size:12.5px;margin:14px 0 4px;text-align:center}
.phone-wrap{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;
  overflow:hidden;background:#fff;transition:.15s}
.phone-wrap:focus-within{border-color:var(--pg-primary);box-shadow:0 0 0 3px var(--pg-pale-dark)}
.phone-wrap .cc{padding:0 11px;font-weight:800;color:var(--pg-mid);font-size:14.5px;
  border-right:1.5px solid var(--line);align-self:stretch;display:flex;align-items:center;background:var(--pg-pale)}
.phone-in{flex:1;border:none;outline:none;padding:12px 12px;font-size:18px;font-weight:700;
  letter-spacing:1px;color:var(--pg-text);width:100%;font-family:inherit}
.login-go{width:100%;margin-top:14px;font-size:15.5px;padding:13px;border:none;border-radius:12px;
  color:#fff;font-weight:800;letter-spacing:.3px;cursor:pointer;
  background:linear-gradient(135deg,var(--pg-primary),var(--pg-mid) 60%,var(--pg-dark));
  box-shadow:0 12px 26px rgba(20,132,137,.38);transition:transform .12s,box-shadow .12s}
.login-go:hover{box-shadow:0 16px 32px rgba(20,132,137,.46)}
.login-go:active{transform:translateY(2px);box-shadow:0 8px 18px rgba(20,132,137,.34)}

/* PIN field (appears inline when needed) */
#pin-section{
  display:none;
  margin-top:16px;
  padding:14px 12px;
  background:var(--pg-pale);
  border-radius:12px;
  animation:slideDown .24s ease-out
}
#pin-field{
  display:none;
  padding:12px 0;
  border-top:1px solid var(--line);
  margin-top:12px;
  animation:slideDown .24s ease-out
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
#pin-section label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--pg-dark);
  margin-bottom:10px;
  letter-spacing:.3px
}
#pin-section .input{
  width:100%;
  text-align:center;
  font-size:22px;
  letter-spacing:10px;
  font-weight:700;
  font-family:monospace;
  padding:14px 12px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:12px;
  color:var(--pg-text);
  transition:.15s
}
#pin-section .input:focus{
  outline:none;
  border-color:var(--pg-primary);
  box-shadow:0 0 0 3px var(--pg-pale-dark)
}
#pin-section .login-note{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  text-align:center
}
#pin-field label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:var(--pg-dark);
  margin-bottom:8px;
  letter-spacing:.4px
}
#pin-field .input{
  text-align:center;
  font-size:20px;
  letter-spacing:8px;
  font-weight:700;
  font-family:'Courier New',monospace;
  padding:14px 12px;
  background:var(--pg-pale)
}
#pin-field .input:focus{
  background:#fff;
  border-color:var(--pg-primary);
  box-shadow:0 0 0 3px var(--pg-pale-dark)
}
#pin-field .login-note{
  margin-top:8px;
  font-size:11.5px;
  color:var(--muted)
}

.shared-link{display:block;text-align:center;margin-top:12px;color:var(--pg-mid);
  font-weight:700;font-size:12.5px}

/* ---- FSE-style gradient summary card (my expenses) ---- */
.sumcard{background:linear-gradient(135deg,var(--pg-dark),var(--pg-primary));border-radius:16px;
  padding:16px 18px;margin-bottom:16px;color:#fff;box-shadow:var(--shadow-lg)}
.sumcard-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.sc-label{font-size:11px;opacity:.82;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.sc-total{font-size:28px;font-weight:800;margin-top:2px}
.sc-side{text-align:right}
.sc-side-lbl{font-size:11px;opacity:.82}
.sc-side-val{font-size:16px;font-weight:800}
.sc-side-val.warn{color:#FDE68A}
.sc-breakdown{background:rgba(255,255,255,.13);border-radius:12px;padding:12px 14px}
.sc-bd-head{font-size:10px;font-weight:800;opacity:.82;letter-spacing:.6px;margin-bottom:10px}
.sc-cat{margin-bottom:11px}.sc-cat:last-child{margin-bottom:0}
.sc-cat-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.sc-cat-name{font-size:12.5px;font-weight:700}.sc-cat-name em{opacity:.62;font-style:normal;font-size:10.5px}
.sc-cat-amt{font-size:13.5px;font-weight:800}
.sc-bar{background:rgba(255,255,255,.22);border-radius:4px;height:5px;margin-bottom:6px;overflow:hidden}
.sc-bar-fill{background:#fff;height:5px;border-radius:4px;transition:width .4s}
.sc-chips{display:flex;gap:6px;flex-wrap:wrap}
.sc-chip{font-size:10px;font-weight:800;border-radius:5px;padding:2px 7px}
.sc-chip.ok{background:rgba(16,185,129,.30);color:#A7F3D0}
.sc-chip.pend{background:rgba(245,158,11,.30);color:#FDE68A}
.sc-chip.rej{background:rgba(239,68,68,.30);color:#FCA5A5}

/* ---- compact tap-to-expand expense rows ---- */
.exprow{background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:10px;
  box-shadow:var(--shadow);overflow:hidden}
.exprow>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:11px 13px;user-select:none}
.exprow>summary::-webkit-details-marker{display:none}
.er-ic{font-size:22px;flex-shrink:0}
.er-mid{flex:1;min-width:0}
.er-cat{font-weight:700;font-size:14px;color:var(--pg-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.er-amt{font-weight:700;font-size:15px;color:var(--pg-dark);flex-shrink:0}
.exprow .pill{margin-top:0;flex-shrink:0}
.er-chev{color:#c7d4d2;font-size:13px;flex-shrink:0;transition:.2s}
.exprow[open] .er-chev{transform:rotate(180deg)}

/* approval cards: brand-gradient top accent instead of a flat, always-the-same-
   color left border (it never varied, so it never actually said anything) —
   teal→cyan for a normal pending row, amber→red when the row is flagged. */
.exprow.apprcard{position:relative}
.exprow.apprcard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg, var(--panache-teal) 0%, var(--panache-cyan) 100%)}
.exprow.apprcard.flagged::before{background:linear-gradient(90deg, #F59E0B 0%, var(--bad) 100%)}
.er-body{padding:2px 14px 14px;border-top:1px solid var(--pg-pale)}
.er-line{font-size:12.5px;color:var(--pg-dark);margin-top:8px}
.er-line.bad{color:var(--bad)}
.er-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.er-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.er-photos a{border-radius:9px;overflow:hidden;border:1.5px solid var(--pg-primary);aspect-ratio:1;display:block}
.er-photos img{width:100%;height:100%;object-fit:cover;display:block}
.er-cat em{font-style:normal;color:var(--muted);font-weight:600;font-size:11.5px}
.appr-actions{margin-top:12px}

/* accounts / approvals static pay-card (same visual as .exprow, always open) */
.paycard{background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:10px;
  box-shadow:var(--shadow);overflow:hidden}
.paycard-head{display:flex;align-items:center;gap:10px;padding:9px 12px}
.paycard-body{padding:0 12px 11px;border-top:1px solid var(--pg-pale)}
.paycard-body .er-pills{margin-top:10px}
.paycard-head form{display:flex}
.btn-mini{flex:0 0 auto;padding:9px 12px;font-size:13px;border-radius:10px}
.paycard-head form+form{margin-left:6px}

/* ---- draft flow ---- */
.savebar-col{flex-direction:column;gap:6px}
.savebar-col .btn{padding:10px}
.savebar-col .btn{width:100%}
.btn-draft{background:#FFFBEB;border:1.5px solid #F59E0B;color:#92400E;font-size:15px}
.draft-flag{background:#FFFBEB;border:1px solid #FCD34D;color:#92400E;border-radius:12px;
  padding:11px 14px;font-size:13.5px;font-weight:700;margin-bottom:14px}
.draftrow{display:flex;align-items:center;gap:10px;padding:11px 13px;margin-bottom:10px;
  background:#FFFBEB;border:1px solid #FCD34D;border-left:3px solid #F59E0B;border-radius:13px;
  box-shadow:var(--shadow);color:var(--pg-text)}
.draftrow .er-cat{color:#92400E}
.draftrow .er-sub b{color:#B45309}
.draftrow:active{transform:scale(.99)}

/* ---- imprest / advance ---- */
.imprest-card{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:linear-gradient(135deg,#0e7a72,#14aea1);color:#fff;border-radius:14px;
  padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow-lg)}
.imprest-card.neg{background:linear-gradient(135deg,#8a1c1c,#c0392b)}
.imp-lbl{font-size:11px;opacity:.85;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.imp-bal{font-size:26px;font-weight:800;margin-top:1px}
.imp-note{font-size:11.5px;opacity:.9;margin-top:3px;max-width:190px}
.imp-right{text-align:right;font-size:12.5px;line-height:1.7;opacity:.95}
.give-adv{background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:14px;
  box-shadow:var(--shadow);overflow:hidden}
.give-adv>summary{list-style:none;cursor:pointer;padding:13px 15px;font-weight:800;color:var(--pg-mid)}
.give-adv>summary::-webkit-details-marker{display:none}
.adv-form{padding:0 14px 14px;display:flex;flex-direction:column;gap:9px}
.adv-actions{display:flex;gap:8px;margin-top:2px}
.adv-actions .btn{padding:12px;font-size:14px}

/* ---- dashboard (admin / accounts landing) ---- */
/* flex, not fixed-column grid: a partial last row (e.g. 2 of 3) stretches to
   fill the width evenly instead of leaving empty space on the right */
.stat-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 11px;
  display:block;flex:1 1 30%;min-width:92px;box-sizing:border-box}
.stat:active{transform:scale(.98)}
.stat-n{font-size:16px;font-weight:700;color:var(--pg-dark);line-height:1.1;letter-spacing:-.3px}
.stat-l{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:3px}
.stat-bad{border-color:#F0B4B4;background:#FEF2F2}.stat-bad .stat-n{color:var(--bad)}
.stat-draft{border-color:#FCD34D;background:#FFFBEB}.stat-draft .stat-n{color:#B45309}
/* flex, not fixed-column grid: a dangling last row (e.g. 2 of 3 tiles) stretches
   to fill the row instead of leaving empty space on the right */
.dash-grid{display:flex;flex-wrap:wrap;gap:9px}
.dash-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;
  font-weight:700;font-size:12px;line-height:1.2;color:var(--pg-dark);text-align:center;
  min-height:0;flex:1 1 30%;min-width:92px;box-sizing:border-box}
.dash-card:active{transform:scale(.97);border-color:var(--pg-primary)}
.dash-card .ico{width:18px;height:18px;padding:8px;border-radius:10px;box-sizing:content-box;
  background:var(--pg-pale); background:color-mix(in srgb, currentColor 14%, transparent)}
.dash-card.add{background:linear-gradient(135deg,var(--pg-primary),var(--pg-mid));color:#fff}
.dash-card.add .ico{color:#fff;background:rgba(255,255,255,.22)}

/* ---- mileage calculator ---- */
.mileage{background:var(--pg-pale);border:1.5px solid var(--pg-pale-dark);border-radius:12px;
  margin-top:12px;overflow:hidden}
.mileage>summary{list-style:none;cursor:pointer;padding:11px 14px;font-weight:800;
  font-size:13.5px;color:var(--pg-mid)}
.mileage>summary::-webkit-details-marker{display:none}
.mileage-body{padding:0 12px 12px}
/* "Your roles" chip line on the dashboard (helps see active powers at a glance) */
.rolechips{font-size:12.5px;font-weight:700;color:var(--pg-mid);background:var(--pg-pale-dark);
  display:inline-block;padding:5px 11px;border-radius:9px;margin:2px 0 14px}
/* Weekly physical-bill tracker matrix (Accounts → Bills) */
.billtrack-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
table.billtrack{border-collapse:collapse;width:100%;font-size:13px}
table.billtrack th,table.billtrack td{padding:8px 10px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line)}
table.billtrack thead th{background:var(--pg-soft,#eef4f0);font-weight:800;color:var(--pg-dark);position:sticky;top:0}
table.billtrack td.who,table.billtrack th.who{text-align:left;font-weight:700;color:var(--pg-dark);position:sticky;left:0;background:#fff;box-shadow:1px 0 0 var(--line)}
.bt-ok{color:var(--ok);font-weight:800}
.bt-pend{color:var(--bad);font-weight:800}
.bt-none{color:var(--line)}
/* Reports: KPI tiles + horizontal bar charts + drill-down */
.kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.kpi-n{font-size:19px;font-weight:700;color:var(--pg-dark);letter-spacing:-.3px}
.kpi-l{font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
.rep-sec{margin:18px 0 4px}
.rep-h{font-size:14px;font-weight:800;color:var(--pg-dark);margin:0 0 10px}
/* Dangerous, irreversible admin actions — visually set apart */
.danger-card{border:1.5px solid var(--bad);background:#FEF2F2;border-radius:14px;padding:14px 16px;margin-top:22px}
.danger-h{font-size:14px;font-weight:800;color:var(--bad)}
.rep-h small{font-weight:600;color:var(--muted);margin-left:6px}
.barrow{display:block;text-decoration:none;color:inherit;padding:10px 12px;margin-bottom:8px;background:#fff;border:1px solid var(--line);border-radius:12px}
.barrow.static{cursor:default}
.barrow-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:14px}
.barrow-name{flex:1;min-width:0;font-weight:700;color:var(--pg-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrow-top b{font-weight:700;color:var(--pg-dark)}
.barrow-go{color:var(--muted);font-weight:800;font-size:18px;margin-left:2px}
.bar{height:9px;background:var(--pg-soft,#eef4f0);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--pg-primary),var(--pg-mid));border-radius:6px;min-width:3px;transition:width .3s}
.bar-fill.cat{background:linear-gradient(90deg,#5b9bd5,#3f7cb8)}
.repcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:9px}
.repcard-h{font-weight:700;color:var(--pg-dark);font-size:13.5px}
.repcard-figs{display:flex;gap:14px;margin-top:6px;flex-wrap:wrap}
.repcard-figs .fig{font-weight:700;font-size:13px}
.fig.bad{color:var(--bad)} .fig.mid{color:var(--pg-mid)} .fig.ok{color:var(--ok)}
/* Labels ("Spent"/"Revenue"/"Margin", the project subline, the "no revenue
   linked" note) used a bare class="meta" with NO matching rule anywhere except
   the unrelated, scoped `.exp .meta` — so they silently fell back to unstyled
   browser-default text (16px, full black), which is what actually made this
   whole card read as oversized, not just the two rules above. */
.repcard .meta{color:var(--muted);font-size:10.5px;font-weight:600;margin-top:1px}
/* Month-close figure grid */
.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mc-cell{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.mc-cell.mc-warn{border-color:var(--warn);background:#fff8ef}
.mc-n{font-size:19px;font-weight:700;color:var(--pg-dark);letter-spacing:-.3px}
.mc-l{font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
/* Accounts screen tabs: To Pay · Paid · Imprest · Bills */
.acct-tabs{display:flex;gap:6px;margin:0 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.atab{flex:1 0 auto;white-space:nowrap;border:1.5px solid var(--line);background:#fff;color:var(--muted);
  border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer}
.atab b{display:inline-block;min-width:18px;padding:0 5px;margin-left:3px;border-radius:9px;
  background:var(--line);color:var(--pg-dark);font-size:12px}
.atab.on{border-color:var(--pg-primary);background:var(--pg-pale-dark);color:var(--pg-dark)}
.atab.on b{background:var(--pg-primary);color:#fff}
/* Multi cost-centre: extra lines on the Add Expense screen */
.cc-line{background:var(--pg-soft,#f2f7f4);border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:10px}
.cc-line .input{margin-bottom:8px}
.cc-line .input:last-child{margin-bottom:0}
.cc-line-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cc-badge{font-size:12px;font-weight:800;color:var(--pg-mid);text-transform:uppercase;letter-spacing:.3px}
.cc-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.cc-total{margin-top:8px;font-size:14px;color:var(--pg-dark);background:var(--pg-pale-dark);border-radius:9px;padding:8px 12px}
.cc-photo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-photo-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:700;color:var(--pg-mid);cursor:pointer}
.cc-photo-btn .ico{width:18px;height:18px}
/* Amount and Photo side by side */
.cc-amount-photo{display:flex;align-items:flex-end;gap:10px;margin-bottom:8px}
.cc-amount-input{flex:0 0 140px !important;margin-bottom:0 !important}
.cc-amount-photo .cc-photo-row{margin-bottom:0;flex:0 0 auto}
.cc-ai{font-size:12.5px;font-weight:700;color:var(--pg-mid)}
.cc-thumb{margin-top:8px}
.cc-thumb img{max-width:96px;max-height:96px;border-radius:8px;border:1px solid var(--line)}

/* Cost Centre Category Grid (for "More cost centres" lines) */
.cc-cat-grid-wrap{margin-bottom:12px}
.cc-cat-grid{display:flex;flex-wrap:wrap;gap:8px}
.cc-cat{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:8px 5px;flex:0 1 calc(50% - 4px);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:all .2s ease}
.cc-cat .cc-emoji{font-size:16px;flex-shrink:0;margin-bottom:4px}
.cc-cat .cc-label{font-size:11px;font-weight:700;color:var(--pg-dark);line-height:1.2}
.cc-cat input{display:none}
.cc-cat input:checked+.cc-emoji,.cc-cat input:checked+.cc-emoji+.cc-label{color:var(--pg-mid)}
.cc-cat input:checked{border-color:var(--pg-primary);background:var(--pg-pale)}
.cc-cat:has(input:checked){border-color:var(--pg-primary);background:var(--pg-pale)}
.cc-cat:has(input:checked) .cc-emoji,.cc-cat:has(input:checked) .cc-label{color:var(--pg-mid)}
.cc-cat:active{transform:scale(.96)}
.cc-cat-display{padding:10px;background:var(--pg-pale);border-radius:8px;border-left:3px solid var(--pg-mid);margin-bottom:12px}
.cc-cat-display-value{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-primary)}

.bill-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.bill-acts form{margin:0}
.bill-acts .btn-mini{padding:8px 12px}
.acct-sub{font-size:14px;font-weight:800;color:var(--pg-dark);margin:16px 0 8px}
.acct-sub:first-child{margin-top:2px}
.veh-pick{display:flex;gap:10px}
.veh{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 8px;
  font-size:12px;font-weight:700;color:var(--pg-dark);display:flex;align-items:center;gap:6px;
  cursor:pointer;justify-content:center}
.veh b{color:var(--pg-mid)}
.veh input{display:none}
.veh.sel{border-color:var(--pg-primary);background:var(--pg-pale-dark)}
.km-out{display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;
  color:var(--pg-dark);background:#fff;border:1.5px solid var(--line);border-radius:12px}

/* ---- payment launch buttons (accounts mark-paid) ----
   These just LAUNCH the payment app — Mark Paid below is the actual action
   that records it, so these read as lighter/secondary now instead of
   competing with Mark Paid as two equally-bold CTAs. */
.pay-launch{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.pay-launch a{flex:1;min-width:110px;text-align:center;padding:8px 9px;border-radius:9px;
  font-size:12px;font-weight:700;border:1.5px solid var(--line);color:var(--pg-mid);
  background:var(--pg-pale)}
.pay-launch a.upi{border-color:var(--pg-primary)}
.pay-proof{margin-top:6px}
.pay-proof label{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--muted);background:transparent;border:1px dashed var(--line);border-radius:9px;
  padding:6px 10px;cursor:pointer}
.pay-proof input{display:none}

/* ---- project budget bar (reports) ---- */
.bud-wrap{margin-top:10px}
.bud-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;
  color:var(--muted);margin-bottom:5px}
.bud-top .bud-over{color:var(--bad)}
.bud-bar{background:var(--pg-pale-dark);border-radius:5px;height:7px;overflow:hidden}
.bud-fill{height:7px;border-radius:5px;transition:width .4s}

/* ── Corporate line icons ── */
.ico{display:inline-block;vertical-align:middle;width:22px;height:22px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  color:var(--pg-mid)}
/* Per-icon colour palette — muted, corporate, each distinct so they don't merge */
.ic-material{color:#B5713C}   .ic-labour{color:#D69A2B}   .ic-contractor{color:#5568C4}
.ic-transport{color:#3E7CB1}  .ic-parking{color:#7C5CBF}  .ic-petrol{color:#D2544B}
.ic-food{color:#E07B39}       .ic-travel{color:#0E9AA0}   .ic-stay{color:#8A6FC0}
.ic-room_rent{color:#B08542}  .ic-vehicle_rent{color:#4A82C4} .ic-tools{color:#5E7280}
.ic-sample{color:#3FA46A}     .ic-misc{color:#7A8A93}     .ic-car{color:#D2544B}
.ic-factory{color:#5E7280}    .ic-receipt{color:#2FA36B}  .ic-building{color:#2A7C8C}
.ic-bike{color:#0E9AA0}       .ic-pin{color:#D2544B}      .ic-calendar{color:#3E7CB1}
.ic-camera{color:#7C5CBF}     .ic-note{color:#5E7280}     .ic-task{color:#5568C4}
.ic-book{color:#2A7C8C}       .ic-payment{color:#B08542}  .ic-approvals{color:#2FA36B}
.ic-reports{color:#5568C4}    .ic-gear{color:#5E7280}     .ic-add{color:#158489}
.ic-gallery{color:#7C5CBF}    .ic-wrench{color:#5E7280}   .ic-close{color:#C62828}
.ic-phone{color:#158489}      .ic-globe{color:#fff}
.ic-user{color:#2A7C8C}       .ic-users{color:#5568C4}
/* Tinted "badge" behind prominent icons → depth & feel (line still shows on top).
   Solid fallback first, then a colour-matched tint where color-mix is supported. */
.cat .ico{width:20px;height:20px;padding:6px;border-radius:9px;box-sizing:content-box;
  background:var(--pg-pale); background:color-mix(in srgb, currentColor 15%, transparent)}
.cat.sel .ico{color:var(--pg-primary)}
.row-btn .ico{width:24px;height:24px;padding:9px;border-radius:12px;box-sizing:content-box;
  background:var(--pg-pale); background:color-mix(in srgb, currentColor 16%, transparent)}
.tile .ico{width:34px;height:34px}
.action .ico{width:26px;height:26px}
/* top nav — one uniform dark brand colour (cleaner & more visible than multicolour) */
.topnav .ico{width:21px;height:21px;stroke-width:1.8;color:var(--pg-dark)}
.topnav a:active .ico{color:var(--pg-mid)}
/* inline label icons */
.fld .ico,.fld2 .ico,.fcard-h .ico,.ah-datelbl .ico{width:16px;height:16px;vertical-align:-3px;margin-right:2px}
.stat-l .ico{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.er-sub .ico{width:12px;height:12px;vertical-align:-2px;margin-right:2px;color:var(--muted)}
.langpick .ico{width:18px;height:18px;color:#fff}
.iconbtn .ico{width:17px;height:17px;vertical-align:-3px;margin-right:4px;color:currentColor}
/* segmented "expense is for" & travel trigger already have their own layout */
.travel-open .ico{width:22px;height:22px;color:var(--pg-primary)}
.empty .ico{width:46px;height:46px;color:var(--line)}
/* buttons: icon follows the button's text colour (white on primary) */
.btn .ico{width:18px;height:18px;color:currentColor;vertical-align:-3px;margin-right:3px}
.photo-btn2 .ico{width:18px;height:18px;color:var(--pg-mid);vertical-align:-3px;margin-right:3px}
/* travel sheet bits */
.sheet-h .ico{width:19px;height:19px;color:var(--pg-mid);vertical-align:-3px;margin-right:2px}
.loc-pin .ico{width:19px;height:19px;color:var(--pg-mid)}
.veh2-o .ico{width:16px;height:16px;color:var(--pg-mid);vertical-align:-3px;margin-right:2px}
.veh2-o.sel .ico{color:var(--pg-primary)}
.ah-datelbl .ico{width:12px;height:12px}
/* my-expenses list — icons keep their own palette colour */
.screen .ico{width:22px;height:22px;vertical-align:-4px;margin-right:5px}
.er-ic .ico{width:24px;height:24px;padding:7px;border-radius:10px;box-sizing:content-box;
  background:var(--pg-pale); background:color-mix(in srgb, currentColor 15%, transparent)}
.sc-cat-name .ico{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.er-cat .ico{width:15px;height:15px;vertical-align:-2px;margin-right:2px}
.er-line .ico{width:15px;height:15px;vertical-align:-2px;margin-right:4px;color:var(--muted)}
.er-line.bad .ico{color:var(--bad)}
.imp-lbl .ico{width:15px;height:15px;vertical-align:-2px;margin-right:4px;color:currentColor}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ELEGANT DASHBOARD — Professional, refined aesthetic (no bright colors)      */
/* ═══════════════════════════════════════════════════════════════════════════ */

.dashboard-header { margin-bottom: 20px; }
.role-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.5px; padding: 4px 0; }

.summary-section { margin-bottom: 28px; }
.section-title { font-size: 14px; font-weight: 700; color: var(--pg-dark); margin: 0 0 12px 0; letter-spacing: 0.3px; text-transform: uppercase; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.metric-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; transition: all 0.15s ease; cursor: pointer; }
.metric-card:hover { border-color: var(--pg-primary); box-shadow: 0 2px 8px rgba(20,110,105,0.08); }
.metric-card:active { transform: scale(0.98); }

.metric-icon { flex-shrink: 0; font-size: 24px; opacity: 0.8; }
.metric-content { flex: 1; }
.metric-value { font-size: 16px; font-weight: 700; color: var(--pg-dark); line-height: 1.2; }
.metric-label { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; letter-spacing: 0.2px; }
.metric-arrow { color: var(--muted); font-size: 18px; opacity: 0.5; flex-shrink: 0; }

.metric-card.alert-card { border-color: #E65100; background: rgba(230,81,0,0.02); }
.metric-card.alert-card .metric-icon { color: #E65100; }

.actions-section { margin-bottom: 28px; }
.action-button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--pg-dark); font-size: 12px; font-weight: 600; text-align: center; transition: all 0.15s ease; cursor: pointer; }
.action-btn:hover { border-color: var(--pg-primary); background: var(--pg-pale); }
.action-btn:active { transform: scale(0.96); }
.action-btn-primary { border-color: var(--pg-primary); background: linear-gradient(135deg, var(--pg-pale), var(--pg-pale-dark)); color: var(--pg-dark); font-weight: 700; }
.action-btn-primary:hover { box-shadow: 0 2px 8px rgba(20,110,105,0.12); }
.action-icon { font-size: 20px; line-height: 1; }

.activity-section { margin-top: 28px; }
.activity-list { display: flex; flex-direction: column; gap: 8px; }
.activity-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: all 0.15s ease; }
.activity-card:hover { border-color: var(--pg-primary); box-shadow: 0 2px 8px rgba(20,110,105,0.08); }

.activity-icon { flex-shrink: 0; font-size: 24px; line-height: 1; }
.activity-details { flex: 1; }
.activity-title { font-size: 13px; font-weight: 700; color: var(--pg-dark); margin-bottom: 4px; }
.activity-meta { display: flex; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.meta-item { display: flex; align-items: center; gap: 3px; }

.activity-amount { flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--pg-dark); min-width: 70px; text-align: right; }

.status-badge { flex-shrink: 0; padding: 3px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.status-pending { background: var(--pg-pale); color: var(--pg-mid); }
.status-approved { background: rgba(46,125,50,0.1); color: #2e7d32; }
.status-paid { background: rgba(46,125,50,0.1); color: #2e7d32; }
.status-rejected { background: rgba(198,40,40,0.1); color: #C62828; }
.status-draft { background: rgba(93,113,128,0.1); color: var(--muted); }

.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 13px; font-weight: 600; border: 1px solid; }
.alert-error { background: rgba(198,40,40,0.08); border-color: rgba(198,40,40,0.2); color: #C62828; }