@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --paper:#f5f4ef; --paper-2:#ecebe4; --surface:#fff;
  --ink:#0b1c33; --ink-2:#3a4a5c; --ink-3:#6b7885;
  --line:#dad8d0; --line-2:#c9c6bb;
  --signal:#e9620c; --signal-2:#c7500a;
  --mist:#9fb0c1; --night:#071427; --night-2:#0d1e36; --night-line:#1e3553;
  --live:#2f9a3a; --warn:#d99a0b; --alert:#d23f3f;
  --blue:#3b6fe0; --purple:#8a5cf0;
  --radius-card:18px; --radius-sm:11px; --radius-lg:22px;
  --shadow-card:0 1px 2px rgba(11,28,51,.04), 0 14px 30px -18px rgba(11,28,51,.16);
  --shadow-card-hover:0 4px 10px rgba(11,28,51,.05), 0 22px 40px -18px rgba(11,28,51,.22);
  --font-display:'Space Grotesk',sans-serif; --font-body:'DM Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);min-height:100vh;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}

.shell{min-height:100dvh;}
@media (min-width:1024px){ .shell{display:grid;grid-template-columns:240px 1fr;} }

.sidebar{background:var(--night);color:var(--mist);padding:16px;display:none;flex-direction:column;}
@media (min-width:1024px){ .sidebar{display:flex;position:sticky;top:0;height:100dvh;overflow-y:auto;} }
.sidebar img{height:32px;width:auto;}
.org-card{margin-top:20px;background:var(--night-2);border:1px solid var(--night-line);border-radius:12px;padding:12px;}
.org-card .label{font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--mist);}
.org-card .name{margin-top:4px;font-size:14px;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav{margin-top:20px;flex:1;display:flex;flex-direction:column;gap:3px;}
.nav a{display:flex;align-items:center;gap:10px;border-radius:10px;padding:9px 12px;font-size:14.5px;color:var(--mist);transition:background .15s,color .15s;}
.nav a:hover{background:rgba(255,255,255,.06);color:var(--paper);}
.nav a.active{background:linear-gradient(90deg,rgba(233,98,12,.22),rgba(233,98,12,.06));color:#fff;box-shadow:inset 2px 0 0 var(--signal);}
.nav svg{width:18px;height:18px;flex-shrink:0;}
.side-foot{border-top:1px solid var(--night-line);padding-top:14px;margin-top:14px;}
.side-foot .name{font-size:13.5px;color:var(--paper);}
.side-foot .sub{font-size:12px;color:var(--mist);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.side-foot a{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;color:var(--mist);padding:6px 0;}
.side-foot a:hover{color:var(--paper);}

.main{min-width:0;}
.main-inner{max-width:1200px;margin:0 auto;padding:28px 20px 60px;}
@media (min-width:768px){ .main-inner{padding:32px 32px 70px;} }

.page-head{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-end;margin-bottom:24px;}
.page-head h1{font-size:26px;}
.page-head p{color:var(--ink-2);margin-top:4px;font-size:14px;}

/* ── Greeting header (used across dashboard-style pages) ─────────────── */
.greeting-bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-bottom:26px;}
.greeting-left{display:flex;align-items:center;gap:14px;}
.greeting-avatar{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--signal),var(--signal-2));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;flex-shrink:0;box-shadow:0 8px 18px -8px rgba(233,98,12,.55);}
.greeting-left h1{font-size:22px;}
.greeting-left p{color:var(--ink-3);margin-top:2px;font-size:13.5px;}
.greeting-widget{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 18px;box-shadow:var(--shadow-card);}
.greeting-widget .gw-date{font-size:12px;color:var(--ink-3);}
.greeting-widget .gw-time{font-family:var(--font-display);font-weight:600;font-size:16px;}
.greeting-actions{display:flex;gap:8px;flex-wrap:wrap;}
@media (max-width:640px){ .greeting-widget{display:none;} }

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--signal);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 16px;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;box-shadow:0 8px 16px -8px rgba(233,98,12,.5);transition:box-shadow .15s,transform .15s;}
.btn:hover{background:var(--signal-2);transform:translateY(-1px);}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);}
.btn.ghost:hover{background:var(--paper-2);}
.btn.sm{padding:6px 11px;font-size:12px;}
.btn.danger{background:#fdecec;color:var(--alert);}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .18s;}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:15px 20px;font-family:monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);}
.card-head .card-head-title{display:flex;align-items:center;gap:10px;}
.card-body{padding:20px;}

.icon-chip{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-chip svg{width:17px;height:17px;}
.icon-chip.c-orange{background:#fdece0;color:var(--signal-2);}
.icon-chip.c-blue{background:#e7edfc;color:var(--blue);}
.icon-chip.c-green{background:#e7f5e8;color:var(--live);}
.icon-chip.c-amber{background:#fdf3e0;color:var(--warn);}
.icon-chip.c-red{background:#fdecec;color:var(--alert);}
.icon-chip.c-purple{background:#f1ecfd;color:var(--purple);}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px;}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-card);transition:box-shadow .18s,transform .18s;}
.stat:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-1px);}
.stat .n{font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.1;}
.stat .l{font-size:11.5px;color:var(--ink-3);margin-top:2px;}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center;}
.pill-filter{background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;}
.pill-filter.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.filters select, .filters input[type=search]{background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;font-size:13px;color:var(--ink);font-family:var(--font-body);}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:9px 10px;border-bottom:1px solid var(--line);}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--paper);}

.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;}
.pill.pending{background:#fdf3e0;color:var(--warn);}
.pill.quoted{background:#fdece0;color:var(--signal-2);}
.pill.accepted,.pill.done{background:#e7f5e8;color:var(--live);}
.pill.rejected{background:#fdecec;color:var(--alert);}
.pill.dark{background:var(--paper-2);color:var(--ink-2);}

label{display:block;font-size:12.5px;color:var(--ink-2);margin:10px 0 5px;}
input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;color:var(--ink);font-family:var(--font-body);font-size:13.5px;}
/* The native option popup stays white/light on most platforms regardless of page theme,
   so option text must stay dark — otherwise dark-mode's light --ink color becomes invisible on it. */
select option{color:#0b1c33;background:#fff;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--signal);}
textarea{resize:vertical;min-height:60px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:640px){ .grid3,.grid2{grid-template-columns:1fr;} }
.check-row{display:flex;align-items:center;gap:8px;margin-top:14px;}
.check-row input{width:auto;}
.msg{font-size:12.5px;margin-top:8px;}
.msg.ok{color:var(--live);} .msg.err{color:var(--alert);}

.overlay{display:none;position:fixed;inset:0;background:rgba(11,28,51,.5);z-index:100;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 16px;}
.overlay.show{display:flex;}
.modal{background:var(--surface);border-radius:var(--radius-lg);padding:28px;max-width:640px;width:100%;box-shadow:0 30px 70px -20px rgba(11,28,51,.35);}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.modal-head h2{font-size:18px;}
.modal-close{background:var(--paper-2);border:none;color:var(--ink);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:16px;}
.section{border-top:1px solid var(--line);padding-top:16px;margin-top:16px;}
.section h3{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;font-family:monospace;}

.rate-item-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;margin-bottom:6px;align-items:center;}
.rate-item-row input{padding:7px 9px;font-size:12.5px;}
.rate-total{display:flex;justify-content:space-between;font-size:13px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2);}
.note-item{background:var(--paper);border-radius:8px;padding:10px 12px;margin-bottom:8px;font-size:12.5px;}
.note-item .meta{color:var(--ink-3);font-size:11px;margin-top:4px;}
.doc-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.doc-item a{color:var(--signal);font-weight:600;}

.mobilebar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface);}
@media (min-width:1024px){ .mobilebar{display:none;} }
.mobilebar img{height:26px;}