:root{
  --bg:#f4f5f7; --panel:#ffffff; --border:#e3e5ea; --text:#1c1f26; --muted:#6b7280;
  --accent:#2f5ee0; --accent-ink:#ffffff; --green:#1f9d55; --amber:#c97a12; --purple:#7c4fe0;
  --blue:#2f6fe0; --slate:#8891a3; --danger:#d0342c; --teal:#0e9488; --radius:12px;
  --focus: 0 0 0 3px rgba(47,94,224,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}

/* ---------- Login ---------- */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:32px;width:100%;max-width:360px;box-shadow:0 10px 30px rgba(20,20,40,.06)}
.login-card h1{font-size:20px;margin:0 0 4px}
.login-card p{color:var(--muted);margin:0 0 20px;font-size:14px}
.login-card label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.login-card input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:14px}
.login-card button{width:100%;padding:11px;border:none;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-weight:600}
.login-card button:disabled{opacity:.6;cursor:default}
.login-error{color:var(--danger);font-size:13px;margin:-6px 0 14px;min-height:1em}

/* ---------- App shell ---------- */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:230px;flex:none;background:#14171f;color:#e7e9ee;display:flex;flex-direction:column;padding:18px 14px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 6px 18px}
.brand-mark{width:32px;height:32px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700}
.brand strong{display:block;font-size:14px;letter-spacing:.04em}
.brand small{display:block;color:#9aa1b1;font-size:10px;letter-spacing:.08em}
.sidebar nav{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:none;background:transparent;color:#c7ccd9;border-radius:8px;text-align:left;font-size:13px}
.nav-item:hover{background:#1e222d}
.nav-item.active{background:var(--accent);color:#fff}
.nav-item .count{margin-left:auto;background:#2a2f3d;color:#fff;border-radius:20px;padding:1px 8px;font-size:11px}
.nav-item.active .count{background:rgba(255,255,255,.25)}
.nav-divider{height:1px;background:#262b38;margin:10px 0}
.nav-label{font-size:10px;letter-spacing:.1em;color:#6b7280;margin:2px 0 6px 10px}
.sidebar-spacer{flex:1}
.profile{display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid #262b38;margin-top:8px}
.profile span{width:30px;height:30px;border-radius:50%;background:#2a2f3d;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.profile strong{display:block;font-size:12px}
.profile small{display:block;color:#8890a0;font-size:11px}
.logout-btn{margin-left:auto;background:none;border:1px solid #33394a;color:#c7ccd9;border-radius:6px;padding:4px 8px;font-size:11px}
.logout-btn:hover{background:#1e222d}

.workspace{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 24px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.mobile-brand{display:none;align-items:center;gap:8px;font-weight:700;font-size:13px}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;max-width:420px}
.search input{border:none;background:transparent;flex:1;outline:none}
.top-actions{display:flex;gap:10px;margin-left:auto}
.new-deal{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 14px;font-weight:600;font-size:13px}
.mobile-nav{display:none}

.content,.module-page{padding:24px;max-width:1180px}
.toast{display:block;margin:16px 24px 0;background:#eef2ff;border:1px solid #c7d3f8;color:#1e3a8a;border-radius:8px;padding:10px 14px;text-align:left;font-size:13px}
.toast.error{background:#fef2f2;border-color:#f3c6c4;color:#7f1d1d}
.loading-state,.empty-state{padding:40px;text-align:center;color:var(--muted)}

.welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.eyebrow{display:block;font-size:11px;letter-spacing:.1em;color:var(--muted);margin-bottom:4px}
.welcome h1{margin:0;font-size:24px}
.welcome p{margin:4px 0 0;color:var(--muted)}
.assistant-pill{background:#fff;border:1px solid var(--border);border-radius:24px;padding:9px 16px;font-size:13px;font-weight:600}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.metrics article{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;gap:12px;align-items:flex-start}
.metric-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.metric-icon.blue{background:#e8f0fe;color:var(--blue)}
.metric-icon.amber{background:#fdf1de;color:var(--amber)}
.metric-icon.green{background:#e6f6ec;color:var(--green)}
.metric-icon.purple{background:#f1ebfc;color:var(--purple)}
.metrics small{display:block;color:var(--muted);font-size:10px;letter-spacing:.06em}
.metrics strong{display:block;font-size:20px;margin:2px 0}
.metrics p{margin:0;color:var(--muted);font-size:12px}
.metrics em{color:var(--danger);font-style:normal}

.main-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-bottom:14px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.panel-head h2{margin:0;font-size:15px}
.panel-head p{margin:2px 0 0;color:var(--muted);font-size:12px}

.task-list{display:flex;flex-direction:column;gap:2px}
.task{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--bg)}
.task:last-child{border-bottom:none}
.task button{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);background:#fff;flex:none;padding:0}
.task.completed button{background:var(--green);border-color:var(--green)}
.task.completed strong{text-decoration:line-through;color:var(--muted)}
.task time{font-size:12px;color:var(--muted);width:42px;flex:none}
.task strong{display:block;font-size:13px}
.task small{display:block;color:var(--muted);font-size:11px}
.task-overdue{margin-left:auto;background:#fef2f2;color:var(--danger);font-size:10px;padding:2px 6px;border-radius:6px}
.task-actions{margin-left:auto;display:flex;gap:6px}
.icon-btn{background:none;border:none;color:var(--muted);font-size:13px;padding:4px}
.icon-btn:hover{color:var(--text)}

.funnel-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px}
.funnel-row>span{width:120px;flex:none;display:flex;flex-direction:column}
.funnel-row>span small{color:var(--muted)}
.funnel-row>div{flex:1;height:8px;background:var(--bg);border-radius:6px;overflow:hidden}
.funnel-row i{display:block;height:100%;border-radius:6px}
.funnel-row strong{width:80px;text-align:right;flex:none}
i.slate,.stage.slate{background:var(--slate)}
i.purple,.stage.purple{background:var(--purple)}
i.blue,.stage.blue{background:var(--blue)}
i.teal,.stage.teal{background:var(--teal)}
i.amber,.stage.amber{background:var(--amber)}
i.green,.stage.green{background:var(--green)}
i.danger,.stage.danger{background:var(--danger)}
.stage{display:inline-block;color:#fff;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;white-space:nowrap;line-height:1.3}

.deal-table{display:flex;flex-direction:column}
.deal-row{display:grid;grid-template-columns:1.8fr 1.3fr 0.9fr 1.2fr auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--bg);font-size:13px}
.deal-head{color:var(--muted);font-size:11px;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.deal-company{display:flex;align-items:center;gap:8px}
.deal-company i{width:28px;height:28px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:700;flex:none}
.deal-company small{display:block;color:var(--muted);font-size:11px}
.next{color:var(--muted);font-size:12px}
.row-actions{display:flex;gap:4px;justify-content:flex-end}

.module-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.module-head h1{margin:2px 0 0;font-size:22px}
.primary-button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-weight:600;font-size:13px}
.secondary-button{background:#fff;border:1px solid var(--border);border-radius:8px;padding:9px 16px;font-size:13px}
.danger-button{background:#fff;border:1px solid #f3c6c4;color:var(--danger);border-radius:8px;padding:8px 12px;font-size:12px}

.month-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:14px}
.month-nav strong{font-size:14px;min-width:160px;text-align:center}
.month-nav .icon-btn{font-size:16px;border:1px solid var(--border);border-radius:8px;padding:4px 10px}
.month-nav .icon-btn:disabled{opacity:.3;cursor:default}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.kanban section{background:#eef0f4;border-radius:var(--radius);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.kanban section>header{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:2px 4px}
.kanban section>header div{display:flex;align-items:center;gap:6px}
.kanban section>header i{width:8px;height:8px;border-radius:50%}
.kanban section>header span{background:#fff;border-radius:10px;padding:0 6px;font-size:11px}
.kanban-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:4px;width:100%}
.kanban-card:hover{border-color:var(--accent)}
.kanban-card small{color:var(--muted);font-size:11px}
.kanban-card strong{font-size:13px}
.kanban-card p{margin:0;font-weight:600;font-size:13px}
.kanban-card footer{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
.kanban-card footer span{background:var(--bg);border-radius:6px;padding:2px 6px;font-weight:700}
.kanban-card.stale{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.kanban-card .stale-badge{align-self:flex-start;background:#fdf1de;color:var(--amber);font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px}
.deal-row .stale-badge{font-size:11px}

.directory,.site-grid,.crane-list,.task-page-list{display:flex;flex-direction:column;gap:8px}
.directory article,.crane-list article{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.directory i,.crane-symbol{width:34px;height:34px;border-radius:9px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:12px;flex:none}
.directory h3,.crane-list h3{margin:0;font-size:13px}
.directory p,.crane-list p{margin:2px 0 0;color:var(--muted);font-size:12px}
.directory .stage{margin-left:auto}
.free{color:var(--green);font-weight:700;font-size:12px}
.busy{color:var(--amber);font-weight:700;font-size:12px}

.site-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.site-grid article{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.site-visual{background:var(--bg);padding:20px 14px;display:flex;justify-content:space-between;align-items:center}
.site-visual b{font-size:10px;letter-spacing:.05em;background:#fff;padding:3px 8px;border-radius:6px}
.site-grid > article > div:last-child{padding:12px 14px}
.site-grid small{color:var(--muted);font-size:10px;letter-spacing:.05em}
.site-grid h3{margin:2px 0}
.site-grid p{margin:0;color:var(--muted);font-size:12px}
.card-actions{display:flex;gap:6px;padding:0 14px 12px}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,17,26,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.record-modal{background:#fff;border-radius:var(--radius);width:100%;max-width:460px;max-height:90vh;overflow:auto}
.record-modal header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.record-modal header strong{display:block;font-size:14px}
.record-modal header small{color:var(--muted);font-size:12px}
.record-modal header button{background:none;border:none;font-size:18px;color:var(--muted)}
.record-modal form{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.record-modal label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#374151}
.record-modal input,.record-modal select,.record-modal textarea{border:1px solid var(--border);border-radius:8px;padding:9px 10px;font-weight:400}
.record-modal textarea{min-height:64px;resize:vertical}
.time-select-row{display:flex;align-items:center;gap:6px}
.time-select-row select{flex:1;min-width:0}
.time-select-row .time-sep{font-weight:600;color:var(--muted)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.offer-file-current{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px;background:var(--bg);border-radius:8px;padding:6px 10px}
.offer-file-current a{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.checklist{border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.checklist-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400;color:var(--text)}
.checklist-item input{width:auto}
.form-error{color:var(--danger);font-size:13px;margin:0}
.record-modal footer{display:flex;justify-content:space-between;gap:10px;padding-top:6px}

@media(max-width:1050px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .main-grid{grid-template-columns:1fr}
  .site-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .sidebar{display:none}
  .mobile-brand{display:flex}
  .mobile-nav{display:flex;gap:4px;overflow-x:auto;padding:8px 16px;background:#fff;border-bottom:1px solid var(--border)}
  .mobile-nav button{border:none;background:var(--bg);border-radius:20px;padding:7px 12px;font-size:12px;display:flex;gap:6px;white-space:nowrap}
  .mobile-nav button.active{background:var(--accent);color:#fff}
}
@media(max-width:760px){
  .deal-row{grid-template-columns:1fr;gap:4px}
  .deal-head{display:none}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:420px){
  .metrics{grid-template-columns:1fr}
  .site-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  /* Topbar overflows and hides the primary action button on phones: wrap
     it into two rows instead of one unbroken flex line. */
  .topbar{flex-wrap:wrap;row-gap:10px;padding:12px 16px}
  .mobile-brand{order:1}
  .top-actions{order:2;margin-left:auto}
  .search{order:3;flex-basis:100%;max-width:none}
  .new-deal{padding:9px 12px;font-size:12px}

  /* Bigger touch targets: default sizes are mouse-tuned and too small to
     reliably tap on a phone. */
  .task button{width:24px;height:24px}
  .icon-btn{padding:8px;font-size:15px}
  .row-actions,.card-actions{gap:8px}
  .kanban-card{padding:12px}
}