/* ---------------------------------------------------------------------
   Marina — theme variables
   Dark: deep navy "night water". Light: crisp white "daylight dock".
   Accent is a consistent sea-glass green in both themes.
--------------------------------------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d1520;
    --panel: #131d2b;
    --panel-2: #1a2637;
    --border: #24334a;
    --text: #e7ecf2;
    --muted: #8494ab;
    --accent: #2fd08a;
    --accent-contrast: #063620;
    --link: #58b4ff;
    --danger: #ef6577;
    --warn: #e8b84f;
    --shadow: 0 4px 16px rgba(0,0,0,0.35);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f7f6;
    --panel: #ffffff;
    --panel-2: #eef3f1;
    --border: #dbe3e0;
    --text: #16211d;
    --muted: #62716b;
    --accent: #1f9d6b;
    --accent-contrast: #04140c;
    --link: #1a6fbf;
    --danger: #c7364b;
    --warn: #a9750a;
    --shadow: 0 2px 10px rgba(20,40,35,0.08);
}

:root { --radius: 9px; }

* { box-sizing: border-box; }

/* Global form control theming - every input/select/textarea gets themed by default,
   so new forms can't accidentally slip in with unstyled (browser-default) controls.
   More specific rules elsewhere are just refinements on top of this baseline. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    transition: background 0.15s ease, color 0.15s ease;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Native checkboxes/radios default to the browser's own blue, which clashes
   against this app's green accent everywhere it shows up (Settings toggles,
   the memory/wake-word toggles, etc) - match the theme instead. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

.container { max-width: 1400px; margin: 0 auto; padding: 20px; }

/* ---------------------------------------------------------------------
   Nav
--------------------------------------------------------------------- */
.topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 500;
}
.nav-left { display: flex; gap: 16px; align-items: center; position: relative; }
.nav-right { display: flex; gap: 10px; align-items: center; }
.brand {
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-icon { width: 20px; height: 20px; color: var(--accent); }
.brand-icon-lg { width: 34px; height: 34px; color: var(--accent); }
.nav-link { color: var(--muted); font-size: 13px; white-space: nowrap; }
.nav-link:hover { color: var(--text); text-decoration: none; }
.nav-links { display: flex; gap: 16px; align-items: center; }
.whoami { color: var(--muted); font-size: 13px; }

.icon-btn {
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Hamburger toggle - hidden on desktop, shown on mobile via media query below */
.hamburger-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    padding: 4px;
    cursor: pointer;
    align-items: center;
}

/* Search: icon + popout form, same behavior on every screen size */
.search-wrap { position: relative; }
.nav-search-popout {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    z-index: 50;
}
.nav-search-popout.open { display: block; }
.nav-search-popout input {
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 14px;
    padding: 7px 14px;
    font-size: 13px;
    width: 220px;
    box-shadow: var(--shadow);
}

/* User menu: always a dropdown, on every screen size */
.user-menu-wrap { position: relative; }
.user-menu-toggle {
    background: none;
    border: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 2px;
    font-family: inherit;
}
.user-menu-toggle svg { color: var(--muted); transition: transform 0.15s ease; }
.user-menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 140px;
    z-index: 50;
    overflow: hidden;
}
.user-menu-dropdown.open { display: flex; }
.user-menu-dropdown a {
    padding: 10px 14px;
    color: var(--text);
    font-size: 13px;
}
.user-menu-dropdown a:hover { background: var(--panel-2); text-decoration: none; }
.user-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
.user-menu-logout { color: var(--danger); font-weight: 600; }

/* Wiki page: a bit more breathing room than the app's normal dense/compact style,
   since this content is meant to be read start-to-finish rather than scanned. */
.wiki-panel p { line-height: 1.7; max-width: 68ch; }
.wiki-panel ul { line-height: 1.7; }
.wiki-panel li { margin-bottom: 8px; }
.wiki-panel h3 { margin-top: 18px; }

.chat-panel {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 60px;
    right: 16px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: min(560px, calc(100vh - 90px));
    height: min(560px, calc(100dvh - 90px));
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 60;
    overflow: hidden;
}
.chat-panel.open { display: flex; }
.chat-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.chat-panel-head div { display: flex; align-items: center; gap: 8px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 85%; padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; }
.chat-msg-user { align-self: flex-end; background: var(--accent); color: var(--accent-contrast); border-bottom-right-radius: 3px; }
.chat-msg-assistant { align-self: flex-start; background: var(--panel-2); border-bottom-left-radius: 3px; }
.chat-msg-error { align-self: flex-start; background: var(--panel-2); color: var(--danger); border-bottom-left-radius: 3px; }
.chat-thinking { display: flex; align-items: center; gap: 4px; padding: 11px; }
.chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chat-dot-bounce 1.2s infinite ease-in-out; }
.chat-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot-bounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-pending-action { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; max-width: 85%; }
.chat-pending-action .modal-actions { margin: 0; }
.chat-download-card { align-self: flex-start; max-width: 85%; }
.chat-inline-image {
    max-width: 320px; max-height: 320px; border-radius: 8px; margin: 6px 0;
    display: block; cursor: zoom-in; border: 1px solid var(--border);
}
.chat-product-cards {
    display: flex; flex-wrap: wrap; gap: 10px; align-self: flex-start; max-width: 100%; margin-top: 4px;
}
.chat-product-card {
    display: flex; flex-direction: column; width: 160px; border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; background: var(--panel-2); text-decoration: none;
    color: inherit; transition: border-color 0.15s ease, transform 0.15s ease;
}
.chat-product-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.chat-product-card-img { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--panel); }
.chat-product-card-img-placeholder {
    display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px;
}
.chat-product-card-body { padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.chat-product-card-title {
    font-size: 12px; font-weight: 600; line-height: 1.3; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-product-card-price { font-size: 13px; font-weight: 700; color: var(--accent); }
.chat-product-card-snippet {
    line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-download-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
}
.chat-download-link:hover { text-decoration: none; filter: brightness(1.08); }
.chat-input-row { display: flex; gap: 6px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); flex-shrink: 0; }
.chat-input-row input { flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 16px; padding: 7px 14px; font-size: 13px; }
.chat-input-row button:not(.icon-btn) { border-radius: 50%; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#chatMicBtn.listening { color: var(--danger); }
#chatSpeakerBtn.active, #chatWakeBtn.active { color: var(--accent); background: var(--panel-2); }
.chat-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.chat-play-btn:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.chat-msg { display: flex; align-items: flex-start; }

.chat-msg-time { font-size: 10px; color: var(--muted); opacity: 0.75; margin-top: 3px; padding: 0 3px; }
.chat-msg-actions { display: flex; align-items: center; gap: 2px; margin-top: 2px; padding: 0 3px; }
.chat-msg-action-btn {
    background: none; border: none; padding: 4px; cursor: pointer; color: var(--muted);
    border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
    width: auto; min-width: 0;
}
.chat-msg-action-btn:hover { color: var(--text); background: var(--panel-2); }
.chat-msg-action-active { color: var(--accent) !important; }
.status-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--muted); opacity: 0.5; margin-left: 4px; vertical-align: middle;
}
.status-dot-ok { background: var(--accent); opacity: 1; }
.status-dot-fail { background: var(--danger); opacity: 1; }
.status-dot-label { font-size: 11px; color: var(--muted); margin-left: 10px; }

.sensitive-value { font-family: monospace; letter-spacing: 1px; }
.eye-toggle {
    background: none; border: none; cursor: pointer; padding: 0 2px; margin-left: 3px;
    color: var(--muted); font-size: 12px; vertical-align: middle;
}
.eye-toggle:hover { color: var(--text); }

.slide-out-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 900;
}
.slide-out-overlay.open { display: block; }
.slide-out-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 90vw;
    background: var(--panel); border-left: 1px solid var(--border); z-index: 901;
    transform: translateX(100%); transition: transform 0.2s ease; padding: 20px;
    overflow-y: auto; box-shadow: -4px 0 16px rgba(0,0,0,0.25);
}
.slide-out-panel.open { transform: translateX(0); }
.slide-out-panel h3 { margin-top: 0; }
.slide-out-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; }
.slide-out-close:hover { color: var(--text); }
.chat-msg-action-copy-label { min-width: 0; }
.chat-msg-edit-wrap { margin-top: 4px; }
.chat-msg-edit-textarea {
    width: 100%; min-height: 60px; background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-family: inherit; font-size: inherit;
    resize: vertical;
}
/* The timestamp sits outside the colored bubble now - as its own row underneath,
   aligned to whichever side the bubble itself is on - rather than inside it, where
   its muted color was nearly unreadable against a bright bubble background. */
.chat-msg-row { display: flex; flex-direction: column; max-width: 85%; }
.chat-msg-row-user { align-self: flex-end; align-items: flex-end; }
.chat-msg-row-assistant { align-self: flex-start; align-items: flex-start; }
.chat-msg-row .chat-msg { max-width: 100%; display: block; }
.assistant-messages .chat-msg pre { background: rgba(0,0,0,0.15); padding: 8px; border-radius: 6px; overflow-x: auto; margin: 0; }
.code-block-wrap { position: relative; margin: 6px 0; }
.code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 11px;
    padding: 3px 8px;
    background: rgba(255,255,255,0.1);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.7;
}
.code-copy-btn:hover { opacity: 1; }
.assistant-messages .chat-msg code { font-family: ui-monospace, monospace; font-size: 12px; }
.assistant-messages .chat-msg ul, .assistant-messages .chat-msg ol { margin: 4px 0; padding-left: 20px; }

/* Calendar: make day cells closer to square instead of short, wide strips, so more
   of each day's content is visible at a glance. aspect-ratio scales with whatever
   width FullCalendar computes, so it stays roughly square at any window size. */
.fc .fc-daygrid-day-frame { aspect-ratio: 1 / 1; min-height: 120px; }
/* FullCalendar's own default grid-line color is a light grey meant for a white
   background - left unset it falls back to that default, which reads as a
   harsh near-white line against the dark theme. A mid grey instead. */
/* FullCalendar's own defaults are built for a light theme - unset, most of its
   surface colors fall back to white/near-white, which reads as a harsh bright
   patch against the rest of the dark UI. Override the whole set, not just the
   grid-line color caught earlier. */
:root[data-theme="dark"] .fc {
    --fc-border-color: #4a5568;
    --fc-page-bg-color: var(--panel);
    --fc-neutral-bg-color: var(--panel-2);
    --fc-list-event-hover-bg-color: var(--panel-2);
    --fc-today-bg-color: rgba(47, 208, 138, 0.08);
    --fc-non-business-color: rgba(0, 0, 0, 0.15);
    --fc-button-text-color: var(--text);
    --fc-button-bg-color: var(--panel-2);
    --fc-button-border-color: var(--border);
    --fc-button-hover-bg-color: var(--border);
    --fc-button-hover-border-color: var(--border);
    --fc-button-active-bg-color: var(--accent);
    --fc-button-active-border-color: var(--accent);
}
:root[data-theme="dark"] .fc,
:root[data-theme="dark"] .fc .fc-scrollgrid,
:root[data-theme="dark"] .fc .fc-daygrid-day-frame {
    background: var(--panel);
}
:root[data-theme="dark"] .fc .fc-col-header-cell,
:root[data-theme="dark"] .fc .fc-list-day-cushion {
    background: var(--panel-2);
}
:root[data-theme="dark"] .fc-button-primary:disabled { opacity: 0.5; }
@media (max-width: 720px) {
    .chat-panel { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-width: 100%; height: 70vh; border-radius: var(--radius) var(--radius) 0 0; }
}

h1, h2, h3 { margin: 0 0 12px 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 18px; }

/* ---------------------------------------------------------------------
   Panels / stat cards
--------------------------------------------------------------------- */
.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
}
.panel-head { display: flex; justify-content: space-between; align-items: center; }

.stat-row { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 20px;
    min-width: 140px;
    box-shadow: var(--shadow);
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.stat-card-corner { position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--muted); }
a.stat-card:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.stat-value { font-size: 26px; font-weight: 700; color: var(--accent); }
.stat-card.stat-warn .stat-value { color: var(--danger); }
.stat-card.stat-profit .stat-value { color: var(--accent); }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dashboard-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }

.board-list, .mini-card-list, .activity-feed { list-style: none; padding: 0; margin: 0 0 12px 0; }
.board-list li, .mini-card-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.board-list li:last-child, .mini-card-list li:last-child { border-bottom: none; }

.muted { color: var(--muted); }
.small { font-size: 12px; }

.tag {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2px 9px;
    font-size: 12px;
    color: var(--muted);
    text-transform: capitalize;
}
.status-open, .status-needed { color: var(--warn); border-color: var(--warn); }
.status-in_progress, .status-ordered { color: var(--link); border-color: var(--link); }
.status-complete, .status-arrived, .status-installed { color: var(--accent); border-color: var(--accent); }
.status-waiting_on_parts, .status-backordered { color: var(--danger); border-color: var(--danger); }

.due { font-size: 12px; color: var(--muted); }
.due-overdue { color: var(--danger); font-weight: 600; }

/* ---------------------------------------------------------------------
   Forms / buttons
--------------------------------------------------------------------- */
.inline-form, .job-new-form, .part-new-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input, .job-new-form input, .part-new-form input {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 10px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
}
button, .danger {
    background: var(--accent);
    border: none;
    color: var(--accent-contrast);
    padding: 8px 15px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
}
button:hover { filter: brightness(1.08); }
button.danger, .danger { background: var(--danger); color: #fff; }
button.small { padding: 4px 10px; }

/* ---------------------------------------------------------------------
   Board / kanban
--------------------------------------------------------------------- */
.board-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }

.filter-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-chip {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 5px 13px;
    font-size: 12px;
    color: var(--muted);
    text-transform: capitalize;
    cursor: pointer;
    font-family: inherit;
}
.filter-chip.active { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.active-filter { font-weight: 700; color: var(--accent) !important; }
.editable-cell { cursor: pointer; }
.editable-cell:hover { background: var(--panel-2); }
.filter-chip.static-chip { display: inline-block; }
.filter-clear { color: var(--danger); }

.board-columns {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 12px;
    align-items: flex-start;
}
.column {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 270px;
    max-width: 270px;
    padding: 10px;
    flex-shrink: 0;
    box-shadow: var(--shadow);
}
.column-add { background: transparent; border-style: dashed; box-shadow: none; }
.column-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 0 4px; }
.column-head h3 { margin: 0; font-size: 13px; color: var(--text); text-transform: none; letter-spacing: normal; }
.count { color: var(--muted); font-size: 12px; }

.card-list { min-height: 30px; display: flex; flex-direction: column; gap: 8px; }
.kcard {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--muted);
    border-radius: 6px;
    padding: 9px 10px;
    cursor: grab;
    display: block;
}
.kcard.priority-high { border-left-color: var(--warn); }
.kcard.priority-urgent { border-left-color: var(--danger); }
.kcard.priority-low { border-left-color: var(--accent); }
.kcard-link { color: inherit; display: block; }
.kcard-link:hover { text-decoration: none; }
.kcard-title { font-size: 13px; margin-bottom: 6px; color: var(--text); }
.kcard-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.chip { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; font-size: 11px; color: var(--muted); }
.chip-job { color: var(--accent); }
.chip-due { color: var(--warn); }
.chip-overdue { color: var(--danger); font-weight: 600; }

.kcard-move {
    display: none;
    margin-top: 7px;
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 5px 6px;
    font-size: 12px;
    font-family: inherit;
}

.quick-add { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.quick-add input {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
}
/* A <select>'s native dropdown popup doesn't reliably pick up a transparent
   background the way a text input does - it needs an actual themed color or the
   open option list renders with the browser's own light-mode default. */
.quick-add-assignee {
    width: 100%;
    background: var(--panel-2);
    border: 1px dashed var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
}
.column-add form { display: flex; flex-direction: column; gap: 8px; }
.column-add input { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 8px; font-family: inherit; }

/* ---------------------------------------------------------------------
   Card detail page
--------------------------------------------------------------------- */
.card-edit-form { display: flex; flex-direction: column; gap: 10px; }
.card-edit-form label, .job-detail-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.card-edit-form input, .card-edit-form select, .card-edit-form textarea,
.job-detail-form select, .job-detail-form textarea {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 7px 9px; font-size: 13px; font-family: inherit;
}
.modal-actions { margin-top: 4px; }

.comment-form { display: flex; gap: 8px; margin-bottom: 14px; align-items: flex-start; }
.comment-form textarea {
    flex: 1;
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 13px; resize: vertical;
}

.activity-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-line { font-size: 13px; }
.activity-comment .activity-body { margin-top: 4px; font-size: 13px; background: var(--panel-2); padding: 7px 10px; border-radius: 6px; }
.activity-time { margin-top: 2px; }

/* ---------------------------------------------------------------------
   Jobs table
--------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
.jobs-table, .parts-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.jobs-table th, .jobs-table td, .parts-table th, .parts-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px; white-space: nowrap;
}
.jobs-table tr:hover { background: var(--panel-2); cursor: pointer; }
.parts-summary { display: flex; gap: 4px; flex-wrap: wrap; white-space: normal; }

.job-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; align-items: start; }
.job-grid-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Pages with a narrow sidebar + wide main content (Catalog, Calendar): the sidebar is
   capped - it doesn't need to grow on a wide monitor - while the main content takes
   all remaining space and keeps growing as the window widens. The container itself
   is also widened on these pages specifically (see .container:has() below), since the
   table/calendar benefits from the extra room far more than the default 1400px page
   width allows on an ultrawide screen. */
.catalog-grid { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 18px; align-items: start; }
.container:has(.catalog-grid) { max-width: 2200px; }

/* Settings page: a sticky left nav (jump-links to each section) + a single wide
   column of stacked panels on the right, rather than a 2-column grid - collapses
   to a slide-in popout on mobile, matching the Assistant page's sidebar pattern. */
.settings-layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.settings-sidenav {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
}
.settings-sidenav a {
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
}
.settings-sidenav a:hover { background: var(--panel-2); text-decoration: none; }
.settings-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.settings-main section[id] { scroll-margin-top: 16px; }
body.hints-hidden .settings-hint { display: none; }
.autosave-feedback {
    display: inline-block;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.autosave-feedback-visible { opacity: 1; }
.settings-nav-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
}
/* display:none removes this from grid layout entirely on desktop, where it's
   irrelevant (the sidebar isn't a popout there) - without this, the backdrop
   became a third item in .settings-layout's 2-column grid and threw off both
   the sidebar's and the main content's column placement. */
.settings-nav-backdrop { display: none; }
.settings-header-controls { display: flex; align-items: center; gap: 14px; }
.job-detail-form { display: flex; flex-direction: column; gap: 10px; }
.inline-select-form select { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 6px; font-size: 12px; font-family: inherit; }

.user-admin-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.reset-pw summary { cursor: pointer; }
.reset-pw summary.small-link, .small-link { font-size: 12px; color: var(--link); cursor: pointer; list-style: none; }
/* .small-link is also used on a couple of actual <button> elements (Clear,
   Manage memory) which - unlike a <summary>, which has no background of its own -
   pick up the green button background by default, making the blue link color
   nearly unreadable against it. Match the other buttons' text color instead. */
button.small-link { color: var(--accent-contrast); }
.reset-pw[open] { position: relative; }
.reset-pw form { margin-top: 6px; }
.reset-pw input { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 8px; font-size: 12px; font-family: inherit; }

/* Parts catalog */
.category-manage-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.category-tree-list { list-style: none; padding: 0; margin: 0 0 4px 0; }
.category-tree-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.category-tree-list li:last-child { border-bottom: none; }
.cat-edit summary { cursor: pointer; font-size: 13px; }
.cat-edit[open] { padding-bottom: 6px; }

.task-list { list-style: none; padding: 0; margin: 0; }
.task-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.task-item:last-child { border-bottom: none; }
.task-toggle-form { display: inline-flex; }
.task-checkbox { background: none; border: none; padding: 0; margin: 0; color: var(--muted); cursor: pointer; display: flex; align-items: center; }
.task-item.task-done .task-checkbox { color: var(--accent); }
.task-title { flex: 1; font-size: 13px; }
.task-item.task-done .task-title { color: var(--muted); text-decoration: line-through; }
.task-delete-form { display: inline-flex; }

.location-card { border-bottom: 1px solid var(--border); padding: 10px 0; }
.location-card:last-child { border-bottom: none; }
.location-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.location-fields { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.task-row-done { opacity: 0.6; }
.task-title-done { text-decoration: line-through; color: var(--muted); }
.task-title-done .task-inline-input { text-decoration: line-through; color: var(--muted); }
.priority-tag.priority-low { border-color: var(--accent); color: var(--accent); }
.priority-tag.priority-normal { color: var(--muted); }
.priority-tag.priority-high { border-color: var(--warn); color: var(--warn); }
.priority-tag.priority-urgent { border-color: var(--danger); color: var(--danger); }

.task-inline-form { display: block; }
.task-inline-input, .task-inline-select {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    min-width: 90px;
    cursor: pointer;
}
.task-inline-input:hover, .task-inline-select:hover { border-color: var(--border); background: var(--panel-2); cursor: text; }
.task-inline-select:hover { cursor: pointer; }
.task-inline-input:focus, .task-inline-select:focus { border-color: var(--accent); background: var(--panel-2); outline: none; cursor: text; }
.category-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; }
.inline-tiny-form { display: inline; }
.tag-x { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.tag-x:hover { color: var(--danger); }

.catalog-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.catalog-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.catalog-form-grid input, .catalog-form-grid select {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 7px 9px; font-size: 13px; font-family: inherit; width: 100%;
}
.link-lookup-row { display: flex; gap: 8px; }
.link-lookup-row input { flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 7px 9px; font-size: 13px; font-family: inherit; }

.profit-positive { color: var(--accent); font-weight: 600; }
.totals-row td { font-weight: 600; border-top: 2px solid var(--border); }

.part-edit-form { min-width: 260px; grid-template-columns: 1fr 1fr; }
.part-edit-form button { grid-column: 1 / -1; }
.link-icon { display: inline-flex; align-items: center; gap: 4px; }
.favicon-icon { width: 13px; height: 13px; border-radius: 2px; vertical-align: middle; }

/* Resizable table columns: table-layout fixed makes each <th>'s width independent,
   so dragging one handle doesn't fight the others. Cells truncate with an ellipsis
   by default (long part names no longer push the rest of the row off-screen) -
   drag a column's right edge to widen it back when you need to read the full text. */
.resizable-table { table-layout: fixed; width: 100%; }
.resizable-table th { position: relative; user-select: none; padding-right: 12px; }
.resizable-table th .th-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resizable-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resizable-table td.small, .resizable-table td .muted { white-space: normal; }
.col-resize-handle {
    position: absolute;
    top: 0;
    right: -11px;
    width: 22px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
    touch-action: none;
}
.col-resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: var(--border);
    transform: translateX(-50%);
}
.col-resize-handle:hover::after, .col-resize-handle.resizing::after { background: var(--accent); width: 3px; }
.part-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); display: block; }
.product-image { max-width: 220px; max-height: 220px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); background: #fff; padding: 8px; }

.editable-cell { cursor: pointer; border-radius: 4px; }
.editable-cell:hover:not(.editable-disabled) { background: var(--panel); outline: 1px dashed var(--border); }
.editable-cell.editable-disabled { cursor: not-allowed; opacity: 0.6; }
.inline-edit-input { width: 100%; min-width: 70px; padding: 3px 5px !important; font-size: 13px !important; }

/* ---------------------------------------------------------------------
   Auth
--------------------------------------------------------------------- */
.auth-box { max-width: 360px; margin: 60px auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; }
.auth-box form { display: flex; flex-direction: column; gap: 12px; }
.auth-box label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.auth-box input {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 9px 10px; font-size: 14px; font-family: inherit;
}

.flash-wrap { margin-bottom: 14px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; font-size: 13px; }
.flash-error { background: rgba(239,101,119,0.12); border: 1px solid var(--danger); color: var(--danger); }
.flash-success { background: rgba(47,208,138,0.12); border: 1px solid var(--accent); color: var(--accent); }
.flash a { color: inherit; font-weight: 600; text-decoration: underline; }
.undo-form { display: inline; }
.linklike {
    background: none; border: none; padding: 0; margin: 0;
    color: inherit; font-weight: 600; text-decoration: underline;
    cursor: pointer; font-size: inherit; font-family: inherit;
}

.qr-wrap { background: #fff; padding: 16px; border-radius: 8px; display: inline-block; margin: 10px 0; max-width: 220px; }
.qr-wrap svg { display: block; width: 100%; height: auto; }
.totp-secret { background: var(--panel-2); padding: 2px 6px; border-radius: 4px; font-size: 12px; word-break: break-all; }
.backup-codes-list { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.backup-codes-list li { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; text-align: center; }
.backup-codes-list code { font-size: 13px; letter-spacing: 0.03em; }

.link-small { font-size: 13px; }

/* ---------------------------------------------------------------------
   Mobile
--------------------------------------------------------------------- */
@media (max-width: 900px) {
    .dash-grid, .job-grid, .dashboard-layout, .catalog-grid { grid-template-columns: 1fr; }
    .settings-layout { grid-template-columns: 1fr; position: relative; }
    .settings-nav-toggle { display: flex; }
    /* On mobile, the "Sections" toggle takes the title's usual spot in the header
       instead of sitting off to the side - the page title itself is redundant
       there (the nav bar's own page context makes it clear), and this keeps the
       button somewhere thumb-reachable and obvious rather than competing for a
       cramped top-right corner. */
    .settings-title { display: none; }
    .settings-header-controls { width: 100%; justify-content: space-between; }
    /* A compact dropdown anchored under the toggle button - sized to fit its
       content (longest section name / however many sections there are) rather
       than a full-height slide-in drawer, since there's no need for either extra
       width or extra height beyond what the list actually needs. */
    .settings-sidenav {
        position: fixed;
        top: 100px;
        left: 12px;
        bottom: auto;
        width: fit-content;
        max-width: 80vw;
        height: fit-content;
        max-height: 70vh;
        overflow-y: auto;
        transform: translateY(-8px) scale(0.98);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.12s ease, opacity 0.12s ease;
        z-index: 60;
        box-shadow: var(--shadow);
    }
    .settings-sidenav.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
    .settings-sidenav a { white-space: nowrap; }
    .settings-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: transparent;
    }
    .settings-nav-backdrop.open { display: block; }
}

@media (max-width: 720px) {
    .container { padding: 12px; }
    .topnav { padding: 10px 14px; }

    .hamburger-toggle { display: flex; }
    .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--panel);
        border: 1px solid var(--border);
        border-top: none;
        box-shadow: var(--shadow);
        z-index: 50;
    }
    .nav-links.open { display: flex; }
    .nav-links .nav-link { padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .nav-links .nav-link:last-child { border-bottom: none; }
    .nav-search-popout { right: auto; left: 0; }
    .nav-search-popout input { width: 70vw; max-width: 260px; }
    .whoami { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .board-columns {
        scroll-snap-type: x mandatory;
        gap: 10px;
    }
    .column {
        min-width: 86vw;
        max-width: 86vw;
        scroll-snap-align: start;
    }
    .kcard { cursor: default; }
    .kcard-move { display: block; }
    .stat-row { gap: 8px; }
    .stat-card { min-width: 100px; padding: 10px 14px; flex: 1; }
    .stat-value { font-size: 20px; }
}

/* Assistant full page: sidebar of conversations + main chat area, filling the
   available height rather than the compact, short panels used elsewhere.
   100vh on mobile is sized as if the browser's own address/nav bar were hidden,
   even while it's actually showing - which is how the input box at the bottom
   was ending up rendered underneath the browser's (and phone's) own UI, out of
   reach. 100dvh tracks the real visible area as that chrome shows and hides;
   kept as a second declaration so browsers too old to understand dvh just keep
   using the vh value above it. */
.assistant-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
    min-height: 480px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--panel);
}
.assistant-layout:has(.assistant-artifacts-panel.open) { grid-template-columns: 240px 1fr 360px; }
.assistant-artifacts-panel {
    display: none;
    flex-direction: column;
    border-left: 1px solid var(--border);
    background: var(--panel-2);
    min-width: 0;
}
.assistant-artifacts-panel.open { display: flex; }
.assistant-artifacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 13px;
}
.assistant-artifacts-close { background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.assistant-artifacts-close:hover { color: var(--danger); }
.assistant-artifacts-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.assistant-artifact-tab {
    font-size: 11px;
    padding: 4px 8px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 5px;
    cursor: pointer;
    font-family: ui-monospace, monospace;
}
.assistant-artifact-tab.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.assistant-artifacts-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 0;
    padding: 12px 14px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}
.assistant-artifacts-download {
    display: block;
    text-align: center;
    padding: 10px;
    border-top: 1px solid var(--border);
    color: var(--link);
    font-size: 12px;
}
.assistant-sidebar {
    border-right: 1px solid var(--border);
    background: var(--panel-2);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.assistant-new-btn-row { display: flex; gap: 8px; margin: 10px 12px; }
.assistant-new-btn {
    flex: 1;
    margin: 0;
    padding: 8px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-contrast);
    border: none;
    font-weight: 600;
    cursor: pointer;
}
.assistant-conv-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.assistant-conv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
    border-left: 3px solid transparent;
}
.assistant-conv-item:hover { background: var(--panel); }
.assistant-conv-item.active { background: var(--panel); border-left-color: var(--accent); font-weight: 600; }
.assistant-conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-conv-delete {
    background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1;
    flex-shrink: 0; padding: 2px 4px;
}
.assistant-conv-delete:hover { color: var(--danger); }
.assistant-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.assistant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.assistant-title-input {
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 120px;
}
.assistant-title-input:focus { outline: 1px solid var(--border); border-radius: 4px; }
.assistant-header-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.assistant-header-controls select { font-size: 12px; padding: 4px 6px; }
.assistant-memory-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.assistant-memory-toggle input { width: auto; }
.assistant-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.assistant-input-row {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    /* Extra breathing room below the input on devices with their own gesture bar
       or home indicator overlaying the page - 0 on devices without one. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
}
.assistant-input-row input { flex: 1; }
.assistant-max-tokens-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 10px;
    font-size: 12px;
    color: var(--muted);
}
.assistant-max-tokens-row input { width: 90px; flex: none; }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.modal-overlay .modal {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 20px;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow);
}

.assistant-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .assistant-layout { grid-template-columns: 1fr; height: calc(100vh - 120px); height: calc(100dvh - 120px); position: relative; }
    .assistant-sidebar {
        display: flex;
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: 240px;
        max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 0.15s ease;
        z-index: 20;
        box-shadow: var(--shadow);
    }
    .assistant-sidebar.open { transform: translateX(0); }
    .assistant-sidebar-toggle { display: flex; }
}

/* Customers page: a sticky left sidebar (client list + search/filter + A-Z index),
   matching the Catalog page's grid pattern, plus a wide right side with the add-
   customer form on top and the selected customer's full detail panel below it. */
.customers-layout { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 18px; align-items: start; }
.container:has(.customers-layout) { max-width: 2200px; }
.customers-sidebar {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    max-height: calc(100vh - 32px);
}
.customers-search-box { display: flex; flex-direction: column; gap: 6px; }
.customers-list-outer { display: flex; gap: 4px; min-height: 0; flex: 1; }
.customers-list-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.customers-list { list-style: none; margin: 0; padding: 0; }
.customer-list-item { border-radius: 6px; }
.customer-list-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
.customer-list-row:hover { background: var(--panel-2); }
.customer-list-item.active > .customer-list-row { background: var(--panel-2); font-weight: 600; border-left: 3px solid var(--accent); padding-left: 3px; }
.customer-list-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-expand-toggle {
    background: none;
    border: none;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.customer-expand-toggle.expanded { transform: rotate(90deg); }
.customer-expand-spacer { width: 16px; flex-shrink: 0; }
.customer-location-sublist {
    list-style: none;
    margin: 0 0 2px 34px;
    padding: 0;
    display: none;
    font-size: 12px;
    color: var(--muted);
}
.customer-location-sublist.open { display: block; }
.customer-location-sublist li { padding: 3px 0; }
.az-index {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 16px;
    flex-shrink: 0;
    overflow-y: auto;
}
.az-letter { font-size: 9px; color: var(--border); line-height: 1.5; }
.az-letter-active { color: var(--muted); cursor: pointer; font-weight: 600; }
.az-letter-active:hover { color: var(--accent); }
.customer-detail-panel { display: flex; flex-direction: column; gap: 18px; }
.customer-panel-header { margin-bottom: 4px; }
.customer-panel-header h1 { margin: 0; display: flex; align-items: center; gap: 8px; }
.customer-favicon { width: 20px; height: 20px; border-radius: 4px; }
#ollamaInstanceList li { flex-wrap: wrap; }
.model-panel {
    display: block;
    width: 100%;
    flex-basis: 100%;
    order: 999;
    margin: 8px 0 4px 0;
    padding: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.model-panel .category-tree-list { margin-bottom: 8px; }
.model-panel li { display: flex; align-items: center; gap: 8px; }
.prompt-preview {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
    margin: 8px 0 16px;
}
.tool-detail {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
}
.tool-detail summary { cursor: pointer; font-size: 13px; }
.tool-detail p { margin: 8px 0 4px; }
/* Kept out of grid layout by default (not just hidden visually) - a backdrop div
   that's still a real grid item became an unintended 3rd item in the sidebar's
   2-column grid before, stretching the sidebar into the wide column on desktop. */
.customers-nav-backdrop { display: none; }

@media (max-width: 900px) {
    .customers-layout { grid-template-columns: 1fr; position: relative; }
    .customers-sidebar {
        position: fixed;
        top: 100px;
        left: 12px;
        width: fit-content;
        max-width: 80vw;
        height: fit-content;
        max-height: 70vh;
        transform: translateY(-8px) scale(0.98);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.12s ease, opacity 0.12s ease;
        z-index: 60;
        box-shadow: var(--shadow);
    }
    .customers-sidebar.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
    .customers-sidebar .customers-list-scroll { max-height: 40vh; }
    .customers-title { display: none; }
    .customers-nav-backdrop { display: none; position: fixed; inset: 0; z-index: 55; background: transparent; }
    .customers-nav-backdrop.open { display: block; }
}