/* ===== app shell / layout ===== */
.skip-link { position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:.5rem .8rem; border-radius:var(--radius-sm); z-index:100; }
.skip-link:focus { left:var(--space-3); top:var(--space-3); }

.layout { min-height:100vh; }

nav.side {
  position:fixed; inset:0 auto 0 0; width:248px; z-index:40;
  background:var(--surface); border-right:1px solid var(--line);
  padding:var(--space-5) var(--space-4); display:flex; flex-direction:column; gap:var(--space-5);
  overflow-y:auto;
}
.side-brand { display:flex; align-items:center; gap:var(--space-3); }
.side-id { display:flex; flex-direction:column; line-height:1.2; }
.side-id .muted { font-size:var(--text-sm); text-transform:capitalize; }
.nav-group { display:flex; flex-direction:column; gap:2px; }
.nav-label { font-size:var(--text-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-300); margin:0 0 var(--space-2); padding:0 var(--space-2); }
.navlink { display:flex; align-items:center; gap:var(--space-3); padding:.5rem var(--space-3); border-radius:var(--radius-sm); color:var(--ink-700); font-size:var(--text-sm); font-weight:500; }
.navlink:hover { background:var(--surface-2); text-decoration:none; }
.navlink.is-active { background:var(--accent-tint); color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.navicon { display:inline-flex; }
.navicon svg { width:1.15rem; height:1.15rem; }
.side-logout { margin-top:auto; }
.side-logout .btn { width:100%; justify-content:center; }

.content { margin-left:248px; min-height:100vh; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:var(--space-3); height:56px; padding:0 var(--space-6); border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:30; }
.topbar-title { font-family:var(--font-head); font-weight:600; }
.hamburger { display:none; cursor:pointer; padding:.3rem; border-radius:var(--radius-sm); color:var(--ink-700); }
.hamburger svg { width:1.4rem; height:1.4rem; }
main#main { flex:1; padding:var(--space-6); max-width:1100px; width:100%; }
main#main.main-wide { max-width:none; }  /* board pages need the full viewport */

/* drawer plumbing (mobile only) */
.navtoggle-input, .drawer-backdrop { display:none; }

/* ===== guest shell ===== */
.guest-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-6); background:
  radial-gradient(1200px 500px at 50% -10%, var(--accent-tint), transparent), var(--bg); }
.guest-card { width:100%; max-width:26rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-8); }
.guest-card h1 { font-size:var(--text-2xl); }

/* ===== responsive ===== */
@media (max-width: 860px) {
  nav.side { transform:translateX(-100%); transition:transform .18s ease; box-shadow:var(--shadow-lg); }
  .navtoggle-input:checked ~ nav.side { transform:translateX(0); }
  .drawer-backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:35; }
  .navtoggle-input:checked ~ .drawer-backdrop { display:block; }
  .content { margin-left:0; }
  .hamburger { display:inline-flex; }
}

/* ===== home dashboard ===== */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:var(--space-4); }
.stat-card { display:flex; flex-direction:column; gap:var(--space-2); }
.stat-label { font-size:var(--text-sm); color:var(--ink-500); font-weight:500; }
.stat-value { font-family:var(--font-head); font-size:var(--text-3xl); font-weight:600; color:var(--ink-900); line-height:1; }
.home-recent { margin-top:var(--space-6); padding:var(--space-5); }
.home-recent .section-header { margin-bottom:var(--space-4); }
.home-recent .table-wrap { border:0; }

/* ===== contacts ===== */
.filter-input { max-width:20rem; }

/* ===== contact detail ===== */
.contact-profile { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-6); }
.contact-profile .avatar { width:3rem; height:3rem; font-size:var(--text-lg); }
.detail-stack > * + * { margin-top:var(--space-5); }
.note { padding:var(--space-3) 0; border-bottom:1px solid var(--line); }
.note:last-child { border-bottom:0; }

/* ===== inbox: conversation list ===== */
.conv-list { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.conv-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line); color:var(--ink-900); }
.conv-item:last-child { border-bottom:0; }
.conv-item:hover { background:var(--surface-2); text-decoration:none; }
.conv-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.conv-name { font-weight:600; }
.conv-meta { font-size:var(--text-sm); color:var(--ink-500); }

/* ===== inbox: thread ===== */
.thread-head { margin-bottom:var(--space-4); }
.thread { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-4); margin-bottom:var(--space-4); max-height:60vh; overflow-y:auto; }
.msg { display:flex; margin-bottom:var(--space-3); }
.msg:last-child { margin-bottom:0; }
.msg-user { justify-content:flex-start; }
.msg-assistant { justify-content:flex-end; }
.bubble { max-width:72%; padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg); }
.msg-user .bubble { background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:var(--radius-sm); }
.msg-assistant .bubble { background:var(--accent-tint); border:1px solid #cdeee9; border-bottom-right-radius:var(--radius-sm); }
.bubble .who { display:block; font-size:var(--text-xs); font-weight:600; color:var(--ink-500); margin-bottom:2px; }
.bubble .body { white-space:pre-wrap; word-break:break-word; }
.composer { display:flex; gap:var(--space-3); align-items:flex-end; }
.composer textarea { flex:1; min-height:3rem; }

/* ===== jobs: kanban board ===== */
.board { display:flex; gap:var(--space-4); align-items:flex-start; overflow-x:auto; padding-bottom:var(--space-3); }
.column { flex:1 1 18rem; min-width:13rem; max-width:24rem; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-3); }
.column-head { display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:var(--text-sm); padding:0 var(--space-1) var(--space-3); }
.column-head .count { color:var(--ink-500); font-weight:500; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-full); padding:0 var(--space-2); }
.kanban-card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--space-3); margin-bottom:var(--space-2); color:var(--ink-900); box-shadow:var(--shadow-sm); }
.kanban-card:hover { border-color:var(--line-strong); text-decoration:none; }
.kanban-card .job-title { font-weight:600; display:block; }
.kanban-card .job-meta { display:block; font-size:var(--text-sm); color:var(--ink-500); margin-top:2px; }
.kanban-card .job-loc { display:block; font-size:var(--text-xs); color:var(--ink-500); margin-top:2px; }
.empty-col { font-size:var(--text-sm); color:var(--ink-300); padding:var(--space-2) var(--space-1); }

/* ===== settings ===== */
input[type=checkbox], input[type=radio] { width:auto; }
.check-row { display:flex; align-items:center; gap:var(--space-2); }
.preview { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--space-4); font-size:var(--text-sm); white-space:pre-wrap; }

/* ===== calendar grid ===== */
.cal-grid { width:100%; border-collapse:collapse; table-layout:fixed; }
.cal-grid th, .cal-grid td { border:1px solid var(--line); padding:.25rem .4rem; vertical-align:top; }
.cal-grid th { background:var(--surface-2); font-size:var(--text-sm); font-weight:600; text-align:center; }
.cal-time { width:4.5rem; color:var(--ink-500); font-size:var(--text-xs); white-space:nowrap; }
.cal-cell { min-height:2.5rem; }
.cal-today { background:var(--accent-tint); }
.cal-event { border-radius:var(--radius-sm); padding:.2rem .4rem; margin-bottom:.2rem;
             border-left:3px solid var(--accent); background:var(--surface); font-size:var(--text-sm); }
.cal-event.source-manual { border-left-color:var(--ink-300); }
.cal-dur { color:var(--ink-500); font-size:var(--text-xs); display:block; }

/* ===== calendar page extras ===== */
.unscheduled-tray, .new-event-form { margin-top:var(--space-5); }
.unscheduled-tray summary, .new-event-form summary { cursor:pointer; font-weight:600; padding:.4rem 0; }
.new-event-form > form { padding:var(--space-4) 0 var(--space-2); }
.cal-conflict { background: var(--amber-tint, #fff3cd); }


/* jobs view */
.tabs { display:flex; gap:var(--space-1); border-bottom:1px solid var(--line); margin-bottom:var(--space-4); }
.tab { padding:var(--space-2) var(--space-3); color:var(--ink-500); font-weight:600; font-size:var(--text-sm); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover { color:var(--ink-700); text-decoration:none; }
.tab.is-active { color:var(--ink-900); border-bottom-color:var(--accent, var(--ink-900)); }
.job-badges { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }
.kanban-card .job-title { font-weight:600; display:block; color:inherit; }
.jobs-toolbar { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin-bottom:var(--space-4); }
.jobs-toolbar input[type="search"] { flex:1; min-width:12rem; }
.jobs-toolbar > select { width:auto; min-width:11rem; }  /* selects share the row instead of stacking full-width */
.filters-more { display:flex; align-items:center; gap:var(--space-2); }
.filters-more > summary { list-style:none; cursor:pointer; }
.filters-more > summary::-webkit-details-marker { display:none; }
.filters-fields { display:inline-flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.chip-toggle { display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--text-sm); border:1px solid var(--line); border-radius:var(--radius-full); padding:var(--space-1) var(--space-3); cursor:pointer; }
.chip-toggle:has(input:checked) { background:var(--warning-tint, var(--surface-2)); border-color:var(--warning, var(--line-strong)); }
.chip-toggle input { margin:0; }

/* ===== move menu ===== */
.move-menu { position:relative; margin-top:var(--space-1); }
.move-menu > summary { list-style:none; cursor:pointer; }
.move-menu > summary::-webkit-details-marker { display:none; }
.move-menu[open] .move-menu-list { position:absolute; z-index:20; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); padding:var(--space-1); display:flex; flex-direction:column; min-width:10rem; }
.move-menu-list form { margin:0; }
.move-menu-list button { width:100%; text-align:left; }

/* ===== drag-and-drop and toast ===== */
.kanban-card.is-dragging { opacity:.5; }
.column.drop-target { outline:2px dashed var(--line-strong); outline-offset:-2px; }
.jobs-toast { position:fixed; bottom:var(--space-4); left:50%; transform:translateX(-50%); z-index:100; box-shadow:var(--shadow-sm); }
table[data-sortable] th[data-sort] { cursor:pointer; user-select:none; }
table[data-sortable] th[data-dir="asc"]::after { content:" ↑"; }
table[data-sortable] th[data-dir="desc"]::after { content:" ↓"; }

@media (min-width: 701px) {
  .filters-more > summary { display:none; }
}
@media (max-width: 700px) {
  .jobs-toolbar { gap:var(--space-1); }
  .filters-more[open] .filters-fields { display:flex; flex-direction:column; align-items:stretch; width:100%; margin-top:var(--space-2); }
  .filters-more { flex-wrap:wrap; width:100%; }
  .column { flex:0 0 85vw; max-width:none; }   /* board still usable by horizontal swipe */
  #jobs-table td:nth-child(2) { display:none; }  /* hide customer col on tiny screens */
  #jobs-table th:nth-child(2) { display:none; }
}