@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#14181c; --surface:#1c2229; --surface-2:#232a32; --surface-3:#2a323b; --border:#2c343d;
  --text:#edeff2; --text-muted:#8b95a1; --accent:#f0a202; --accent-dim:#3a2f14;
  --blue:#4c8bf5; --blue-dim:#152238; --green:#4caf7d; --green-dim:#132821;
  --red:#e5484d; --red-dim:#2c1416; --gray-dim:#252b32; --radius:6px;
  --font-display:'Barlow Condensed',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;display:flex;font-size:14px;}
::selection{background:var(--accent);color:#14181c;}

#sidebar{width:220px;min-width:220px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:20px 0;}
.brand{padding:0 20px 20px 20px;border-bottom:1px solid var(--border);margin-bottom:14px;}
.brand-logo-wrap{height:36px;display:flex;align-items:center;margin-bottom:8px;}
.brand-logo-wrap img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;}
.logo-preview-box{height:56px;display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;margin-bottom:8px;max-width:260px;}
.logo-preview-box img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;}
.brand-mark{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:0.5px;line-height:1;}
.brand-mark span{color:var(--accent);}
.brand-sub{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:4px;}
nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);color:var(--text-muted);cursor:pointer;font-weight:500;font-size:13.5px;transition:background .12s,color .12s;border:none;background:none;text-align:left;width:100%;font-family:var(--font-body);}
.nav-item:hover{background:var(--surface-2);color:var(--text);}
.nav-item.active{background:var(--accent-dim);color:var(--accent);}
.nav-item .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;background:var(--gray-dim);color:var(--text-muted);padding:1px 6px;border-radius:10px;}
.nav-item.active .count{background:var(--accent);color:#14181c;}
.sidebar-foot{margin-top:auto;padding:14px 20px 0 20px;border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);line-height:1.5;}
.user-badge{display:flex;align-items:center;gap:8px;}
.user-badge .ub-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:700;flex-shrink:0;}
.user-badge .ub-info{flex:1;min-width:0;}
.user-badge .ub-name{color:var(--text);font-weight:600;font-size:12.5px;}
.user-badge .ub-role{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.5px;}
.user-badge .ub-switch{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:11px;text-decoration:underline;padding:0;}
.color-swatch-row{display:flex;align-items:center;gap:10px;}
.color-swatch-row input[type=color]{width:44px;height:38px;padding:2px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);cursor:pointer;}

#main{flex:1;min-width:0;padding:28px 34px;overflow-y:auto;height:100vh;}
.page-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.page-title{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:0.3px;}
.page-sub{color:var(--text-muted);font-size:13px;margin-top:2px;}
.btn{font-family:var(--font-body);font-weight:600;font-size:13px;padding:9px 16px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;transition:filter .1s,background .1s;}
.btn:hover{filter:brightness(1.15);}
.btn:disabled{opacity:0.6;cursor:not-allowed;}
.btn-primary{background:var(--accent);color:#14181c;border-color:var(--accent);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-danger{background:var(--red-dim);color:var(--red);border-color:#3d1c1e;}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted);}
.btn-ghost:hover{background:var(--surface-2);color:var(--text);}
.btn-sm{padding:6px 11px;font-size:12px;}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.stat-num{font-family:var(--font-display);font-size:32px;font-weight:600;line-height:1;}
.stat-label{color:var(--text-muted);font-size:11.5px;text-transform:uppercase;letter-spacing:1px;margin-top:6px;}
.stat-card.amber .stat-num{color:var(--accent);}
.stat-card.red .stat-num{color:var(--red);}
.stat-card.green .stat-num{color:var(--green);}

.section-title{font-family:var(--font-display);font-size:17px;font-weight:600;margin:26px 0 10px 0;letter-spacing:0.2px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.toolbar select,.toolbar input[type=text]{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:var(--radius);font-family:var(--font-body);font-size:12.5px;}
.toolbar .spacer{flex:1;}
.search-input{width:100%;max-width:340px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:var(--radius);font-family:var(--font-body);font-size:13px;}

.docket-list{display:flex;flex-direction:column;gap:10px;}
.docket{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:border-color .12s;}
.docket:hover{border-color:var(--accent);}
.docket-id{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--gray-dim);padding:3px 7px;border-radius:4px;white-space:nowrap;}
.docket-main{flex:1;min-width:0;}
.docket-title{font-weight:600;font-size:14px;}
.docket-meta{color:var(--text-muted);font-size:12px;margin-top:2px;}
.pill{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.5px;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-block;}
.po-badge{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);background:var(--gray-dim);padding:3px 8px;border-radius:4px;white-space:nowrap;}
.empty-state{border:1px dashed var(--border);border-radius:var(--radius);padding:38px 20px;text-align:center;color:var(--text-muted);}
.empty-state .btn{margin-top:14px;}

.modal-overlay{position:fixed;inset:0;background:rgba(10,12,14,0.68);display:none;align-items:flex-start;justify-content:center;z-index:300;padding:40px 20px;overflow-y:auto;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:8px;width:100%;max-width:640px;padding:26px 28px 24px 28px;}
.modal h3{font-family:var(--font-display);font-size:22px;font-weight:600;margin-bottom:16px;}
.field{margin-bottom:13px;}
.field label{display:block;font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:5px;}
.field input,.field select,.field textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:9px 11px;border-radius:var(--radius);font-family:var(--font-body);font-size:13.5px;}
.field textarea{resize:vertical;min-height:60px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:0;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field-row.three{grid-template-columns:1fr 1fr 1fr;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap;}
.hint{font-size:11px;color:var(--text-muted);margin-top:4px;}
.form-error{font-size:12px;color:var(--red);background:var(--red-dim);border:1px solid #3d1c1e;border-radius:var(--radius);padding:8px 11px;margin-bottom:12px;}

.card-detail{position:relative;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:22px 24px;margin-bottom:16px;}
.card-stub-line{border-top:2px dashed var(--border);margin-top:20px;padding-top:14px;}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:12px;}
.card-stamp{font-family:var(--font-mono);font-size:13px;background:var(--accent);color:#14181c;padding:4px 10px;border-radius:4px;font-weight:700;letter-spacing:0.5px;white-space:nowrap;height:fit-content;}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-top:6px;}
.card-field-label{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px;}
.card-field-value{font-size:14px;margin-top:2px;}
.card-field-value.link{color:var(--accent);cursor:pointer;}
.card-desc{margin-top:16px;}
.card-desc-body{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--text);white-space:pre-wrap;}
.status-select-inline{background:var(--surface-3);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:0.5px;padding:5px 8px;border-radius:20px;cursor:pointer;}
.status-select-inline:disabled{cursor:default;opacity:0.75;}

/* Custom status/stage dropdown — replaces native <select> for the pill
   changer, since Chrome/Windows ignores inline option styling in an open
   native dropdown (every option rendered the same muted color no matter
   what pillStyle() set). This version is fully our own markup. */
.status-dropdown{position:relative;display:inline-block;}
.status-dropdown-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:4px;z-index:80;min-width:170px;box-shadow:0 8px 24px rgba(0,0,0,0.45);}
.status-dropdown-menu.open{display:block;}
.status-dropdown-option{padding:7px 10px;border-radius:4px;margin-bottom:2px;cursor:pointer;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;}
.status-dropdown-option:last-child{margin-bottom:0;}
.status-dropdown-option:hover{filter:brightness(1.35);}

.checklist{margin-top:6px;display:flex;flex-direction:column;gap:6px;}
.checklist-item{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;}
.checklist-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0;}
.checklist-item .txt{flex:1;font-size:13px;}
.checklist-item.done .txt{color:var(--text-muted);text-decoration:line-through;}
.checklist-item .del{cursor:pointer;color:var(--text-muted);font-size:12px;background:none;border:none;}
.checklist-item .del:hover{color:var(--red);}
.add-item-row{display:flex;gap:8px;margin-top:8px;}
.add-item-row input{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:var(--radius);font-size:13px;}

.notes-thread{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;margin-top:8px;padding-right:2px;}
.note-bubble{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;}
.note-bubble .note-text{font-size:13px;line-height:1.5;white-space:pre-wrap;}
.note-bubble .note-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:4px;}
.add-note-row{display:flex;gap:8px;margin-top:10px;}
.add-note-row textarea{flex:1;min-height:40px;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:9px 11px;border-radius:var(--radius);font-size:13px;font-family:var(--font-body);resize:vertical;}

.tech-list{display:flex;flex-direction:column;gap:8px;max-width:460px;}
.tech-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;}
.tech-row .name{flex:1;font-weight:600;}
.tech-row .email{color:var(--text-muted);font-size:12px;}
.tech-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:700;flex-shrink:0;}

.settings-block{margin-bottom:30px;}
.settings-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px;flex-wrap:wrap;}
.settings-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);padding:10px 16px;font-family:var(--font-body);font-weight:600;font-size:13px;cursor:pointer;margin-bottom:-1px;}
.settings-tab:hover{color:var(--text);}
.settings-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.avatar-img{border-radius:50%;object-fit:cover;flex-shrink:0;display:block;}

/* Data tables (company Tickets/Jobs/Configurations tabs) */
.data-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px;}
.data-table th{text-align:left;font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.data-table td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.data-table tbody tr{cursor:pointer;transition:background .12s;}
.data-table tbody tr:hover{background:var(--surface);}
.data-table .mono{font-family:var(--font-mono);color:var(--text-muted);font-size:11.5px;}
.priority-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;}

/* Projects board */
.project-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:start;}
.project-column{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;}
.project-column-head{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.project-column-head .count{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--gray-dim);padding:1px 7px;border-radius:10px;}
.project-column-body{display:flex;flex-direction:column;gap:10px;}
.project-card .docket-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;}
.project-progress-bar{background:var(--gray-dim);border-radius:20px;height:6px;margin-top:8px;overflow:hidden;}
.project-progress-fill{background:var(--accent);height:100%;border-radius:20px;transition:width .2s;}
.phase-block{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:10px;}
.phase-head{display:flex;align-items:center;gap:4px;margin-bottom:8px;}
.phase-name{font-family:var(--font-display);font-size:15px;font-weight:600;}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;max-width:560px;}
.tag{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 6px 5px 12px;font-size:12.5px;}
.tag button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;width:18px;height:18px;border-radius:50%;}
.tag button:hover{color:var(--red);background:var(--red-dim);}
.add-tag-row{display:flex;gap:8px;margin-top:10px;max-width:420px;}
.add-tag-row input{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:var(--radius);font-size:12.5px;}

.notice{font-size:11.5px;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:18px;}
.role-notice{font-size:11.5px;color:var(--accent);background:var(--accent-dim);border:1px solid #4a3a17;border-radius:var(--radius);padding:10px 12px;margin-bottom:18px;line-height:1.5;}

.company-list{display:flex;flex-direction:column;gap:10px;}
.company-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:border-color .12s;}
.company-card:hover{border-color:var(--accent);}
.company-avatar{width:38px;height:38px;border-radius:8px;background:var(--surface-3);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:16px;font-weight:700;flex-shrink:0;}
.company-main{flex:1;min-width:0;}
.company-name{font-weight:600;font-size:14.5px;}
.company-meta{color:var(--text-muted);font-size:12px;margin-top:2px;}
.job-count-badge{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--gray-dim);padding:3px 9px;border-radius:20px;white-space:nowrap;}

.contact-edit-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center;}
.contact-edit-row input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:7px 9px;border-radius:var(--radius);font-size:12.5px;}
.contact-edit-row .del{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;}
.contact-edit-row .del:hover{color:var(--red);}
.contacts-view-list{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.contact-view-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;font-size:12.5px;display:flex;gap:10px;flex-wrap:wrap;}
.contact-view-row .cname{font-weight:600;min-width:120px;}

/* Scheduler */
.cal-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.cal-week-label{font-family:var(--font-display);font-size:19px;font-weight:600;}
.cal-view-toggle{display:flex;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:3px;}
.cal-view-toggle button{background:none;border:none;color:var(--text-muted);padding:6px 13px;border-radius:4px;font-size:12.5px;cursor:pointer;font-weight:600;}
.cal-view-toggle button.active{background:var(--accent);color:#14181c;}
.tech-legend{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px 0;}
.legend-chip{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;border:1px solid var(--border);background:var(--surface);font-size:12px;cursor:pointer;color:var(--text-muted);}
.legend-chip.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);}
.legend-chip .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cal-layout{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start;}
.cal-week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
.week-day-col{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px;min-height:260px;}
.week-day-col.today{border-color:var(--accent);}
.week-day-col.drag-over{background:var(--accent-dim);}
.week-day-head{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:8px;}
.week-day-head .num{font-family:var(--font-display);font-size:17px;color:var(--text);font-weight:600;display:block;}
.cal-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.month-head-cell{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-transform:uppercase;text-align:center;padding:4px 0 8px 0;}
.month-cell{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:6px;min-height:96px;max-height:132px;overflow-y:auto;}
.month-cell.outside{opacity:0.32;}
.month-cell.today{border-color:var(--accent);}
.month-cell.drag-over{background:var(--accent-dim);}
.month-cell .mnum{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-bottom:4px;}
.cal-block{background:var(--surface-3);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:4px;padding:5px 7px;font-size:11px;margin-bottom:4px;cursor:grab;line-height:1.4;}
.cal-block:active{cursor:grabbing;}
.cal-block .cb-time{font-family:var(--font-mono);color:var(--text-muted);font-size:10px;display:flex;align-items:center;gap:4px;}
.cal-block .cb-title{font-weight:600;font-size:11.5px;}
.cal-block .cb-company{color:var(--text-muted);font-size:10.5px;}
.cal-pill{font-size:10.5px;padding:3px 7px;border-radius:4px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;display:flex;align-items:center;gap:4px;}
.cal-pill-text{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.unsched-panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px;}
.unsched-panel h4{font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:4px;}
.unsched-panel .hint{margin-bottom:10px;}
.unsched-card{background:var(--surface-3);border:1px solid var(--border);border-left:3px solid var(--text-muted);border-radius:4px;padding:8px 10px;margin-bottom:8px;cursor:grab;font-size:12px;}
.unsched-card .cb-title{font-weight:600;font-size:12.5px;}
.unsched-card .cb-company{color:var(--text-muted);font-size:11px;margin-top:1px;}

/* Login / auth pages */
.auth-wrap{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:34px 32px;width:100%;max-width:380px;}
.auth-card .brand-mark{font-family:var(--font-display);font-weight:700;font-size:28px;text-align:center;margin-bottom:4px;}
.auth-card .brand-mark span{color:var(--accent);}
.auth-card .brand-sub{text-align:center;margin-bottom:26px;}
.auth-card .field{margin-bottom:14px;}
.auth-card .btn-primary{width:100%;padding:11px;margin-top:6px;}
.auth-links{display:flex;justify-content:space-between;margin-top:14px;font-size:12px;}
.auth-links a{color:var(--text-muted);text-decoration:none;}
.auth-links a:hover{color:var(--accent);}

/* Mobile topbar (hamburger + brand) — hidden on desktop, shown via the
   media query below. The sidebar becomes an off-canvas drawer on mobile;
   this bar is what's left to open it and orient the user once it's closed. */
#mobile-topbar{display:none;align-items:center;gap:14px;position:sticky;top:0;z-index:150;background:var(--surface);border-bottom:1px solid var(--border);padding:12px 16px;}
#hamburger-btn{background:none;border:1px solid var(--border);color:var(--text);font-size:20px;line-height:1;padding:6px 10px;border-radius:var(--radius);cursor:pointer;}
#mobile-topbar-title{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--text);}
#sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(10,12,14,0.6);z-index:190;}
#sidebar-backdrop.open{display:block;}

@media (max-width: 860px){
  body{display:block;}
  #mobile-topbar{display:flex;}
  #sidebar{position:fixed;top:0;left:0;height:100vh;z-index:200;transform:translateX(-100%);transition:transform .2s ease;box-shadow:2px 0 24px rgba(0,0,0,0.4);}
  #sidebar.open{transform:translateX(0);}
  #main{width:100%;height:auto;padding:18px 16px;}

  .stat-row{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
  .card-grid{grid-template-columns:1fr;}
  .field-row,.field-row.three{grid-template-columns:1fr;}
  .contact-edit-row{grid-template-columns:1fr 1fr;}
  .page-title{font-size:24px;}

  /* Docket/company/contact rows are a single flex row on desktop; long
     status pills (e.g. "Completed (Ready to Invoice)") can't shrink below
     their text width, which was forcing the whole card to overflow
     horizontally. Let them wrap onto their own line on narrow screens. */
  .docket,.company-card{flex-wrap:wrap;}
  .docket-main,.company-main{flex-basis:100%;}

  /* align-items stays flex-start (inherited from the base rule) — stretch
     would clamp .modal's height to exactly one viewport tall regardless of
     its content, and since .modal itself has no overflow/clip, the excess
     content still rendered — just outside the box's own background, letting
     the page behind it show through. flex-start lets the box size to its
     content (min-height:100% below still keeps short modals full-height). */
  .modal-overlay{padding:0;}
  .modal{max-width:none;min-height:100%;border-radius:0;padding:20px 16px 90px 16px;}

  .cal-layout{grid-template-columns:1fr;}
  .cal-week-grid{grid-auto-flow:column;grid-template-columns:repeat(7,148px);overflow-x:auto;padding-bottom:8px;}
  /* Headers (Mon..Sun) and day cells are flat siblings in one grid, row-major
     (header row, then each week row) — unlike the week view where each day's
     label lives inside its own column div. So this can't use auto-flow:column
     like the week grid does; that would scatter headers across the wrong
     cells. Instead keep normal row flow and just force each column wider
     than it would naturally get, so the grid overflows and scrolls. */
  .cal-month-grid{grid-template-columns:repeat(7,110px);overflow-x:auto;padding-bottom:8px;}

  .settings-tabs{overflow-x:auto;flex-wrap:nowrap;}
  .settings-tab{white-space:nowrap;}
}

@media (max-width: 480px){
  .stat-row{grid-template-columns:repeat(2,1fr);gap:10px;}
  .stat-card{padding:12px 14px;}
  .stat-num{font-size:26px;}
  .page-header{flex-direction:column;align-items:stretch;}
  .card-detail{padding:16px 14px;}
}