/* Shared shell for the secondary pipeline pages (expenses, users, account).
   Brand: navy + gold, Cormorant Garamond + DM Sans. Phone first: 16px inputs
   (no zoom on focus), one column, the header nav folds into a menu. */
:root { --navy:#0C2340; --navy-mid:#163356; --gold:#C49A3C; --deep-gold:#8C6A22; --ink:#101820; --slate:#5A6B80; --fog:#DCE1E8; --border:#DCE1E8; --bg:#F4F5F7; --red:#B42318; --green:#1E7B4E; --amber:#B7791F; --shadow:0 2px 10px rgba(12,35,64,.10); --header-h:54px; --radius:8px; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--bg); }
body { font-family:'DM Sans',system-ui,sans-serif; color:var(--ink); font-size:14px; min-height:100vh; }
h1,h2,h3 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; color:var(--navy); }
a { color:var(--navy); }
button, input, select, textarea { font-family:inherit; }
#header { position:sticky; top:0; z-index:100; height:var(--header-h); background:var(--navy); display:flex; align-items:center; gap:12px; padding:0 16px; border-bottom:2px solid rgba(196,154,60,.35); }
.logo { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:700; color:#fff; text-decoration:none; white-space:nowrap; } .logo .amp { color:var(--gold); }
.ptitle { color:rgba(255,255,255,.75); font-size:.82rem; font-weight:600; white-space:nowrap; }
.hspacer { flex:1; }
.header-user { color:rgba(255,255,255,.7); font-size:.78rem; }
#hnav { display:contents; }
.nl { background:transparent; border:none; color:rgba(255,255,255,.75); text-decoration:none; font-size:.8rem; font-weight:600; padding:6px 10px; border-radius:6px; cursor:pointer; }
.nl:hover { background:rgba(255,255,255,.1); } .nl.on { background:#fff; color:var(--navy); }
.menu-btn { display:none; background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:6px; font-size:1.1rem; padding:2px 10px; cursor:pointer; }
.page { max-width:960px; margin:0 auto; padding:18px 16px 96px; }
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; margin-bottom:14px; }
.card h2 { font-size:1.3rem; margin-bottom:8px; }
.card h3 { font-size:1.05rem; margin-bottom:6px; }
.muted { color:var(--slate); font-size:.8rem; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fg { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px 12px; }
.fg .full { grid-column:1 / -1; }
.l { display:block; font-size:.72rem; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.in { width:100%; border:1px solid var(--border); border-radius:6px; padding:9px 10px; font-size:16px; background:#fff; color:var(--ink); }
.in:focus { outline:none; border-color:var(--navy); }
textarea.in { min-height:70px; resize:vertical; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 14px; border-radius:6px; border:none; font-size:.85rem; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn-primary { background:var(--navy); color:#fff; } .btn-gold { background:var(--gold); color:#fff; }
.btn-outline { background:#fff; color:var(--navy); border:1.5px solid var(--navy); } .btn-ghost { background:transparent; color:var(--slate); }
.btn-danger { background:#fff; color:var(--red); border:1.5px solid var(--red); } .btn-green { background:var(--green); color:#fff; }
.btn-sm { padding:5px 10px; font-size:.76rem; } .btn:disabled { opacity:.5; cursor:not-allowed; }
.chip { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.chip-submitted { background:#FFF4D6; color:var(--amber); } .chip-approved { background:#E2F3EA; color:var(--green); }
.chip-rejected { background:#FDE4E1; color:var(--red); } .chip-paid { background:#E3EAF5; color:var(--navy); }
.chip-admin { background:var(--navy); color:#fff; } .chip-finance { background:#E3EAF5; color:var(--navy); } .chip-off { background:#eee; color:var(--slate); }
.seg { display:inline-flex; background:#fff; border:1px solid var(--border); border-radius:6px; padding:3px; }
.seg button { border:none; background:transparent; padding:6px 12px; border-radius:4px; font-size:.8rem; font-weight:600; color:var(--slate); cursor:pointer; }
.seg button.on { background:var(--navy); color:#fff; }
.list .item { display:flex; justify-content:space-between; gap:12px; padding:12px 4px; border-top:1px solid var(--fog); cursor:pointer; text-decoration:none; color:inherit; }
.list .item:first-child { border-top:none; } .list .item:hover { background:#fafbfc; }
.item .sub { color:var(--slate); font-size:.78rem; margin-top:2px; }
.item .amt { font-weight:700; white-space:nowrap; text-align:right; }
.empty { text-align:center; color:var(--slate); padding:28px 0; font-size:.85rem; }
.sheet-bg { position:fixed; inset:0; background:rgba(12,35,64,.45); display:none; align-items:flex-start; justify-content:center; z-index:200; overflow:auto; padding:24px 12px; }
.sheet-bg.open { display:flex; }
.sheet { background:#fff; border-radius:10px; width:640px; max-width:100%; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.sheet .top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:8px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(120px); background:var(--navy); color:#fff; padding:10px 18px; border-radius:8px; font-size:.85rem; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .25s; z-index:1000; max-width:92vw; }
.toast.show { transform:translateX(-50%) translateY(0); } .toast.err { background:var(--red); }
table.t { width:100%; border-collapse:collapse; font-size:.85rem; }
table.t th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); padding:6px 6px; border-bottom:1px solid var(--border); }
table.t td { padding:8px 6px; border-bottom:1px solid var(--fog); vertical-align:middle; }
.thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
.thumb { position:relative; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:#f7f8fa; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.72rem; color:var(--slate); text-align:center; padding:4px; cursor:pointer; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb .x { position:absolute; top:4px; right:4px; background:rgba(12,35,64,.8); color:#fff; border:none; border-radius:11px; width:22px; height:22px; cursor:pointer; font-size:.8rem; line-height:1; }
.sticky-add { display:none; position:fixed; right:16px; bottom:20px; z-index:50; box-shadow:0 8px 20px rgba(0,0,0,.25); border-radius:999px; padding:12px 18px; font-size:.95rem; }
@media (max-width:768px) {
  .menu-btn { display:inline-block; margin-left:auto; }
  #hnav { display:none; position:absolute; top:var(--header-h); left:0; right:0; background:var(--navy); flex-direction:column; align-items:stretch; gap:6px; padding:12px 14px 16px; border-bottom:2px solid rgba(196,154,60,.35); box-shadow:0 12px 24px rgba(0,0,0,.25); }
  #hnav.open { display:flex; } #hnav .hspacer { display:none; } #hnav .header-user { display:block; text-align:center; padding:6px; }
  .nl { display:block; text-align:center; padding:11px; font-size:.95rem; }
  .sheet-bg { padding:0; } .sheet { min-height:100vh; border-radius:0; padding:16px; }
  table.t thead { display:none; } table.t tr { display:block; border-bottom:1px solid var(--border); padding:8px 0; } table.t td { display:block; border:none; padding:3px 0; }
  .sticky-add { display:inline-flex; }
}

/* open-task count on the My tasks link (2026-10-07) */
.nbadge { display:inline-block; min-width:18px; padding:0 6px; border-radius:9px; background:#c9a24a; color:#0b1a33; font-size:.72rem; font-weight:700; text-align:center; margin-left:4px; vertical-align:middle; line-height:18px; }
.nbadge.over { background:#c0392b; color:#fff; }
#hnav .nl { white-space:nowrap; }