/* ── Theme variables ──────────────────────────────────── */
/* Dark (night): black and gray */
:root {
    --bg-primary: #1a1a2e;
    --bg-nav: #0e0e20;
    --bg-sidebar: #12122a;
    --bg-header: #16213e;
    --bg-hover: #1a1a2e;
    --border: #0f3460;
    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --text-muted: #666;
    --text-dim: #555;
    --accent: #3a7bd5;
    --accent-bg: #0f3460;
    --msg-user-bg: #0f3460;
    --msg-user-text: #e0e0e0;
    --msg-assistant-bg: #222244;
    --msg-assistant-text: #d0d0d0;
    --toggle-off: #333;
    --toggle-knob: #888;
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --danger: #8b2020;
    --danger-hover: #b33;
}

/* Light (day): black and white */
body.light {
    --bg-primary: #ffffff;
    --bg-nav: #f0f0f0;
    --bg-sidebar: #f5f5f5;
    --bg-header: #e8e8e8;
    --bg-hover: #eaeaea;
    --border: #d0d0d0;
    --text-primary: #1a1a1a;
    --text-secondary: #666;
    --text-muted: #999;
    --text-dim: #aaa;
    --accent: #2563eb;
    --accent-bg: #2563eb;
    --msg-user-bg: #2563eb;
    --msg-user-text: #ffffff;
    --msg-assistant-bg: #f0f0f0;
    --msg-assistant-text: #333;
    --toggle-off: #ccc;
    --toggle-knob: #999;
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --danger: #dc2626;
    --danger-hover: #ef4444;
}

/* ── Reset & base ──────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    height: 100dvh; /* iOS Safari: accounts for address bar */
    overflow: hidden;
}

/* ── Modals (shared) ───────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: var(--modal-overlay);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
}
.modal-overlay.hidden { display: none; }
.modal-box {
    background: var(--bg-header);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    max-width: 340px;
    width: 90%;
}
.modal-box h2 { margin-bottom: 8px; font-size: 18px; }
.modal-box p { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; }
.modal-box input {
    width: 100%; padding: 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px; margin-bottom: 12px;
}
.modal-box input:focus { outline: none; border-color: var(--accent); }
.modal-box button {
    padding: 10px 24px; border: none; border-radius: 6px;
    background: var(--accent-bg); color: #fff; cursor: pointer; font-size: 14px;
}
.modal-box button:hover { background: var(--accent); }
.modal-box .btn-row { display: flex; gap: 8px; justify-content: center; }
.modal-box .btn-cancel {
    padding: 10px 24px; border: 1px solid var(--border); border-radius: 6px;
    background: none; color: var(--text-secondary); cursor: pointer; font-size: 14px;
}
.modal-box .btn-cancel:hover { color: var(--text-primary); border-color: var(--accent); }
.modal-box .btn-danger {
    padding: 10px 24px; border: none; border-radius: 6px;
    background: var(--danger); color: #fff; cursor: pointer; font-size: 14px;
}
.modal-box .btn-danger:hover { background: var(--danger-hover); }

/* ── Auth screens (login + setup) ──────────────────────── */
/* Full-page centered card, reuses the modal-box look */
#auth-screen {
    display: none;
    position: fixed; inset: 0;
    background: var(--bg-primary);
    align-items: center; justify-content: center;
    z-index: 200;
}
#auth-screen.active { display: flex; }
.auth-card {
    background: var(--bg-header);
    padding: 36px 30px;
    border-radius: 12px;
    max-width: 380px;
    width: 90%;
}
.auth-card h1 {
    font-size: 22px; margin-bottom: 4px;
}
.auth-card .auth-subtitle {
    color: var(--text-secondary); font-size: 13px; margin-bottom: 20px;
}
.auth-card label {
    display: block; font-size: 13px; color: var(--text-secondary);
    margin-bottom: 4px; text-align: left;
}
.auth-card input {
    width: 100%; padding: 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px; margin-bottom: 14px;
}
.auth-card input:focus { outline: none; border-color: var(--accent); }
.auth-card button {
    width: 100%; padding: 12px; border: none; border-radius: 6px;
    background: var(--accent-bg); color: #fff; cursor: pointer;
    font-size: 15px; font-weight: 600; margin-top: 4px;
}
.auth-card button:hover { background: var(--accent); }
.auth-card button:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-error {
    color: var(--danger-hover); font-size: 13px; margin-bottom: 12px;
    min-height: 18px;
}

/* ── App layout ────────────────────────────────────────── */
#app-layout {
    display: flex;
    height: 100vh;
    height: 100dvh;
}

/* ── Nav rail (hamburger menu) ────────────────────────── */
#nav-rail {
    width: 48px;
    background: var(--bg-nav);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    flex-shrink: 0;
    z-index: 10;
}
#hamburger-btn {
    background: none; border: none; color: var(--text-secondary);
    font-size: 22px; cursor: pointer; padding: 8px;
    line-height: 1; border-radius: 6px;
}
#hamburger-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-icon {
    width: 36px; height: 36px; margin-top: 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; cursor: pointer; color: var(--text-muted);
    font-size: 18px; transition: background 0.15s, color 0.15s;
}
.nav-icon:hover { background: var(--bg-hover); color: var(--text-secondary); }
.nav-icon.active { background: var(--bg-hover); color: var(--accent); }

/* ── Slide-out nav menu ────────────────────────────────── */
#nav-menu {
    position: fixed; top: 0; left: 48px; bottom: 0;
    width: 200px; background: var(--bg-nav);
    border-right: 1px solid var(--border);
    transform: translateX(-248px);
    transition: transform 0.2s ease;
    z-index: 9;
    padding-top: 12px;
}
#nav-menu.open { transform: translateX(0); }
#nav-menu h3 {
    padding: 10px 16px 6px; font-size: 11px; font-weight: 600;
    color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px;
}
#nav-menu ul { list-style: none; }
#nav-menu li {
    padding: 10px 16px; cursor: pointer;
    font-size: 14px; color: var(--text-secondary);
    display: flex; align-items: center; gap: 10px;
}
#nav-menu li:hover { background: var(--bg-hover); color: var(--text-primary); }
#nav-menu li.active { color: var(--accent); }
#nav-menu li .nav-label-icon { font-size: 16px; }
#nav-menu li .coming-soon {
    font-size: 10px; color: var(--text-dim); margin-left: auto;
}
/* Overlay to close menu when clicking outside */
#nav-overlay {
    position: fixed; inset: 0; z-index: 8; display: none;
}
#nav-overlay.active { display: block; }

/* ── Sticky (pinned) sidebar — desktop only ─────────── */
/* When pinned, the nav menu becomes a normal flex child
   that sits between the rail and the content panels,
   so the rail stays flush-left and content shifts naturally. */
body.nav-pinned #nav-menu {
    position: static;
    transform: none;
    flex-shrink: 0;
}
body.nav-pinned #nav-overlay { display: none !important; }
/* Hamburger temporarily hides the pinned sidebar without changing the sticky pref */
body.nav-pinned.nav-pinned-hidden #nav-menu { display: none; }

/* ── Settings panel ───────────────────────────────────── */
#settings-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
#settings-panel.active { display: flex; }
#settings-panel header {
    background: var(--bg-header);
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}
#settings-panel header h1 {
    font-size: 18px; font-weight: 600;
    color: var(--text-primary); letter-spacing: 0.5px;
}
.settings-body {
    flex: 1; overflow-y: auto; padding: 24px;
}
.settings-section {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}
.settings-section:last-child { border-bottom: none; }
.settings-section h3 {
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 1px;
    margin: 0; padding: 12px 0;
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    user-select: none;
}
/* Caret indicator — rotates when section is open */
.settings-section h3::before {
    content: "\25B6"; /* right-pointing triangle */
    font-size: 10px; transition: transform 0.2s;
    display: inline-block;
}
.settings-section.open h3::before {
    transform: rotate(90deg);
}
/* Section body hidden by default, shown when .open */
.settings-section-body {
    display: none;
    padding-bottom: 12px;
}
.settings-section.open .settings-section-body {
    display: block;
}
.setting-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-label {
    font-size: 14px; color: var(--text-primary);
}
/* ── Name color picker rows (Chat Name Colors settings) ── */
.name-color-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.name-color-row:last-child { border-bottom: none; }
.name-color-label { font-size: 13px; font-weight: 500; }
.name-color-controls { display: flex; align-items: center; gap: 8px; }
.name-color-input {
    width: 32px; height: 32px; border: none; padding: 0;
    background: none; cursor: pointer; border-radius: 4px;
}
.name-color-reset {
    font-size: 11px; color: var(--text-muted); cursor: pointer;
    background: none; border: none; padding: 2px 6px;
}
.name-color-reset:hover { color: var(--text-secondary); }

.setting-desc {
    font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}

/* ── Admin: Team Management table ──────────────────────── */
.admin-user-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.admin-user-table th {
    text-align: left; padding: 8px 10px;
    font-size: 12px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.admin-user-table td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.admin-user-table .role-badge {
    font-size: 11px; padding: 2px 8px; border-radius: 4px;
    background: var(--bg-hover); color: var(--text-secondary);
}
.admin-user-table .role-badge.admin {
    background: var(--accent-bg); color: #fff;
}
.admin-user-table .actions { display: flex; gap: 6px; }
.admin-user-table .actions button {
    padding: 4px 10px; border-radius: 4px; font-size: 12px;
    cursor: pointer; border: 1px solid var(--border);
    background: none; color: var(--text-secondary);
}
.admin-user-table .actions button:hover {
    color: var(--text-primary); border-color: var(--accent);
}
.admin-user-table .actions button.del-btn:hover {
    color: var(--danger-hover); border-color: var(--danger-hover);
}
#add-user-btn {
    margin-top: 12px; padding: 8px 16px; border: 1px solid var(--border);
    border-radius: 6px; background: none; color: var(--text-secondary);
    cursor: pointer; font-size: 13px;
}
#add-user-btn:hover { color: var(--text-primary); border-color: var(--accent); }

/* ── Admin: Categories management list ──────────────────── */
.category-list-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    font-size: 14px; color: var(--text-primary);
}
.category-list-item:last-child { border-bottom: none; }
.category-list-item .cat-delete-btn {
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px;
}
.category-list-item .cat-delete-btn:hover { color: var(--danger-hover); }
.category-list-item .cat-error {
    font-size: 12px; color: var(--danger-hover); margin-left: 8px;
}
#add-category-btn {
    padding: 8px 16px; border: 1px solid var(--border);
    border-radius: 6px; background: none; color: var(--text-secondary);
    cursor: pointer; font-size: 13px;
}
#add-category-btn:hover { color: var(--text-primary); border-color: var(--accent); }
#new-category-input {
    flex: 1; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px;
}

/* Temp password display box */
.temp-password-box {
    background: var(--bg-primary); border: 1px solid var(--accent);
    border-radius: 6px; padding: 12px; margin: 12px 0;
    font-family: monospace; font-size: 16px; text-align: center;
    letter-spacing: 1px; word-break: break-all;
}

/* ── Sidebar (channels) ───────────────────────────────── */
#sidebar {
    width: 220px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
#sidebar-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
#sidebar-header h2 {
    font-size: 14px; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px;
}
#channel-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
#channel-list li {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    border-left: 3px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#channel-list li:hover { background: var(--bg-hover); color: var(--text-primary); }
.delete-channel {
    background: none; border: none; cursor: pointer;
    font-size: 13px; opacity: 0; transition: opacity 0.15s;
    padding: 2px 4px; line-height: 1;
    color: var(--danger-hover);
}
#channel-list li:hover .delete-channel { opacity: 1; }
#channel-list li.active {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-left-color: var(--accent);
}
#channel-list li.pinned-divider {
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    padding-bottom: 12px;
}
/* Unread indicator — small accent dot on the right side of the channel name.
   Hidden when the channel is active (you're looking at it) or hovered
   (where the delete button appears instead). */
#channel-list li.unread::after {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-left: auto;
}
#channel-list li.unread.active::after,
#channel-list li.unread:hover::after { display: none; }

/* ── Drag-to-reorder channels ─────────────────────────── */
.channel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.drag-handle {
    cursor: grab;
    color: var(--text-dim);
    font-size: 14px;
    padding-right: 4px;
    flex-shrink: 0;
    user-select: none;
    opacity: 0;
    transition: opacity 0.15s;
}
#channel-list li:hover .drag-handle { opacity: 1; }
#channel-list li.dragging { opacity: 0.4; }
#channel-list li.drag-over { border-top: 2px solid var(--accent); margin-top: -2px; }

/* ── Search ───────────────────────────────────────────── */
#search-bar {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}
#search-input {
    width: 100%; padding: 7px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 13px; font-family: inherit;
}
#search-input::placeholder { color: var(--text-muted); }
#search-input:focus { outline: none; border-color: var(--accent); }
#chat-date-filter {
    width: 100%; margin-top: 6px; padding: 7px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 13px; font-family: inherit;
}
#chat-date-filter:focus { outline: none; border-color: var(--accent); }
/* Webkit date inputs inherit the page color scheme for the calendar popup */
:root { color-scheme: dark; }
body.light { color-scheme: light; }
#search-results {
    display: none;
    flex: 1; overflow-y: auto; padding: 12px;
    flex-direction: column; gap: 8px;
}
#search-results.active { display: flex; }
.search-result {
    padding: 10px 12px; border-radius: 8px;
    background: var(--bg-header); cursor: pointer;
    font-size: 13px; line-height: 1.4;
}
.search-result:hover { outline: 1px solid var(--accent); }
.search-result-meta {
    font-size: 11px; color: var(--text-secondary); margin-bottom: 4px;
}
.search-result-meta strong { color: var(--accent); }
.search-result-snippet { color: var(--text-primary); }
.search-result-snippet strong { color: var(--accent); }
#search-empty {
    color: var(--text-secondary); font-size: 13px;
    text-align: center; padding: 20px;
}

#sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}
#new-channel-btn {
    background: none; border: 1px solid var(--border); color: var(--text-secondary);
    width: 100%; padding: 6px; border-radius: 4px;
    cursor: pointer; font-size: 13px;
}
#new-channel-btn:hover { color: var(--text-primary); border-color: var(--accent); }

/* ── Chat area ────────────────────────────────────────── */
#chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative; /* anchor for the "jump to latest" button */
}

/* ── Header ─────────────────────────────────────────────── */
#chat-area header {
    background: var(--bg-header);
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#chat-area header h1 {
    font-size: 18px; font-weight: 600;
    color: var(--text-primary); letter-spacing: 0.5px;
}

/* ── Toggle switch (reused for AI toggle and theme toggle) */
.toggle-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.toggle-label input { display: none; }
.toggle-slider {
    width: 36px; height: 20px;
    background: var(--toggle-off); border-radius: 10px;
    position: relative; transition: background 0.2s;
}
.toggle-slider::after {
    content: ''; position: absolute;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--toggle-knob); top: 2px; left: 2px;
    transition: transform 0.2s, background 0.2s;
}
.toggle-label input:checked + .toggle-slider { background: var(--accent-bg); }
.toggle-label input:checked + .toggle-slider::after {
    transform: translateX(16px); background: var(--accent);
}
#ai-toggle-wrapper.hidden { display: none; }

/* ── Message area ─────────────────────────────────────── */
#messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msg {
    max-width: 75%;
    padding: 6px 10px;
    border-radius: 10px;
    line-height: 1.4;
    font-size: 14px;
    word-wrap: break-word;
}
/* "me" = my messages (right), "other" = everyone else (left) */
.msg.me {
    align-self: flex-end;
    background: var(--msg-user-bg);
    color: var(--msg-user-text);
    border-bottom-right-radius: 2px;
}
.msg.other {
    align-self: flex-start;
    background: var(--msg-assistant-bg);
    color: var(--msg-assistant-text);
    border-bottom-left-radius: 2px;
}

/* Date dividers — iMessage style */
.date-divider {
    align-self: center;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 12px;
    background: var(--bg-header);
    border-radius: 10px;
    margin: 8px 0;
}

.msg-username {
    font-size: 11px; font-weight: 600;
    margin-bottom: 1px;
    color: var(--accent);
}
/* "Me" label on own messages needs to be readable on the blue bg */
.msg.me .msg-username { color: var(--msg-user-text); opacity: 0.7; }
.msg.other .msg-username { color: var(--text-secondary); }

.msg-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}
.msg.me .msg-time { text-align: right; color: var(--msg-user-text); opacity: 0.5; }

/* ── Staged attachments (above input bar, iMessage-style) ── */
.staged-attachments {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 8px 12px;
    background: var(--bg-header);
    border-top: 1px solid var(--border);
}
.staged-attachments.hidden { display: none; }
.staged-chip {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    max-width: 240px;
}
.staged-chip-thumb {
    width: 40px; height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.staged-chip-icon {
    font-size: 22px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.staged-chip-meta {
    min-width: 0; flex: 1;
}
.staged-chip-name {
    font-size: 12px; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.staged-chip-size {
    font-size: 10px; color: var(--text-muted);
    margin-top: 1px;
}
.staged-chip-x {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none; border-radius: 50%;
    width: 18px; height: 18px;
    font-size: 14px; line-height: 1;
    cursor: pointer;
    position: absolute; top: -6px; right: -6px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.staged-chip-x:hover { background: var(--danger, #b33); }

/* ── Drag-and-drop file upload overlay ────────────────── */
/* When a file is being dragged over the chat area, we add .drag-target to
   the wrapper. The ::after pseudo-element draws a dashed accent border
   filling the chat area with a "Drop file to upload" hint. */
#chat-area.drag-target { position: relative; }
#chat-area.drag-target::after {
    content: "Drop file to upload";
    position: absolute; inset: 16px;
    border: 2px dashed var(--accent);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.45);
    color: var(--accent);
    font-size: 18px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;  /* let the drop event reach the underlying chat-area */
    z-index: 50;
}
body.light #chat-area.drag-target::after { background: rgba(255, 255, 255, 0.75); }

/* ── Chat attachments — images + PDFs ────────────────── */
.msg-attachment { margin-top: 4px; }
.msg-attachment-img {
    display: block;
    max-width: 320px;
    max-height: 240px;
    width: auto; height: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: zoom-in;
}
.msg-attachment-caption {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    word-break: break-all;
}
.msg-attachment-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 13px;
    max-width: 320px;
}
.msg-attachment-link:hover { border-color: var(--accent); }
.msg-attachment-icon { font-size: 18px; flex-shrink: 0; }
.msg-attachment-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-attachment-size {
    font-size: 11px; color: var(--text-muted);
    flex-shrink: 0;
}

.msg.other strong { color: var(--text-primary); }
.msg.other ul, .msg.other ol { margin: 6px 0 6px 20px; }
.msg.other li { margin-bottom: 2px; }

/* Flash highlight when jumping to a search result */
@keyframes highlight-flash {
    0%   { outline: 2px solid var(--accent); outline-offset: 2px; }
    100% { outline: 2px solid transparent; outline-offset: 2px; }
}
.msg.highlight { animation: highlight-flash 2s ease-out; }

/* "Jump to latest" floating circle button — centered above input bar */
#jump-to-latest {
    display: none; /* toggled via .visible class */
    position: absolute; bottom: 70px;
    left: 50%; transform: translateX(-50%);
    width: 36px; height: 36px;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--bg-header); color: var(--text-secondary);
    font-size: 16px; cursor: pointer; z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    padding: 0;
    /* flex props activate when .visible sets display:flex */
    align-items: center; justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}
#jump-to-latest.visible { display: flex; }
#jump-to-latest:hover { color: var(--text-primary); border-color: var(--accent); }

.thinking {
    align-self: flex-start;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Input bar ────────────────────────────────────────── */
#input-bar {
    display: flex; gap: 8px;
    padding: 12px 20px;
    background: var(--bg-header);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
#user-input {
    flex: 1; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 14px; font-family: inherit;
    resize: none; min-height: 40px; max-height: 120px;
    overflow-y: auto;
}
#user-input::placeholder { color: var(--text-muted); }
#user-input:focus { outline: none; border-color: var(--accent); }
#send-btn {
    padding: 10px 20px; border: none; border-radius: 8px;
    background: var(--accent-bg); color: #fff;
    font-size: 14px; cursor: pointer; align-self: flex-end;
}
#send-btn:hover { background: var(--accent); }
#send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* File upload button — paperclip icon next to send */
#upload-btn {
    padding: 8px 10px; border: none; border-radius: 8px;
    background: none; color: var(--text-secondary);
    font-size: 18px; cursor: pointer; align-self: flex-end;
    line-height: 1; transition: color 0.15s;
}
#upload-btn:hover { color: var(--accent); }
#upload-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Pull sheet download button on event cards */
.event-pullsheet-btn {
    background: none; border: none; cursor: pointer;
    font-size: 14px; line-height: 1; padding: 2px 6px;
    color: var(--text-muted); opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    border-radius: 4px; text-decoration: none;
    display: inline-flex; align-items: center;
}
.event-card:hover .event-pullsheet-btn,
.event-pullsheet-btn:focus { opacity: 1; }
.event-pullsheet-btn:hover {
    color: var(--accent);
    background: rgba(99, 102, 241, 0.1);
}

/* Links in chat messages */
.msg a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(99, 102, 241, 0.4);
}
.msg a:hover {
    text-decoration-color: var(--accent);
}

/* Mobile-only buttons — hidden on desktop */
.mobile-only {
    display: none !important;
}

/* ── Inventory panel ──────────────────────────────────── */
#inventory-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
#inventory-panel.active { display: flex; }
#inventory-panel header {
    background: var(--bg-header);
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
}
#inventory-panel header h1 {
    font-size: 18px; font-weight: 600;
    color: var(--text-primary); letter-spacing: 0.5px;
}
#inventory-count {
    font-size: 13px; color: var(--text-secondary); font-weight: 400;
}

/* Filter bar */
.inv-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-header);
}
.inv-filters input,
.inv-filters select {
    padding: 7px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px; font-family: inherit;
}
.inv-search-wrap {
    flex: 1; min-width: 140px; position: relative; display: flex;
}
.inv-search-wrap input { flex: 1; min-width: 0; padding-right: 28px; }
.inv-search-clear {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted);
    font-size: 18px; cursor: pointer; padding: 2px 6px; line-height: 1;
    display: none;
}
.inv-search-clear:hover { color: var(--text-primary); }
.inv-search-wrap input:not(:placeholder-shown) ~ .inv-search-clear { display: block; }
/* Date filter — same shape as the search wrap, with a clear-x affordance.
   We render two stacked inputs: a visible text input that displays
   MM-DD-YYYY (site-wide format) and a hidden native date input that
   holds the canonical ISO value AND opens the picker via showPicker().
   The hidden input is positioned underneath the text input so clicks
   on the wrap area can reach it if showPicker() isn't supported, but
   normally it's offscreen-but-focusable. */
.inv-date-wrap {
    position: relative; display: flex;
}
.inv-date-wrap input[type="text"] { flex: 1; min-width: 0; padding-right: 28px; }
.inv-date-wrap .inv-date-hidden {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 0; pointer-events: none;
}
.inv-date-wrap .inv-search-clear { display: none; }
.inv-date-wrap input[type="text"]:not(:placeholder-shown) ~ .inv-search-clear { display: block; }
.inv-filters input::placeholder { color: var(--text-muted); }
.inv-filters input:focus,
.inv-filters select:focus { outline: none; border-color: var(--accent); }

/* Column toggle button + dropdown */
.col-toggle-wrap { position: relative; }
.col-toggle-btn {
    padding: 7px 12px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px; font-family: inherit;
    cursor: pointer; white-space: nowrap;
}
.col-toggle-btn:hover { border-color: var(--accent); }
.col-toggle-dropdown {
    display: none;
    position: absolute; top: 100%; right: 0; margin-top: 4px;
    background: var(--bg-header); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 0;
    z-index: 20; min-width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    max-height: 360px; overflow-y: auto;
}
.col-toggle-dropdown.open { display: block; }

/* Collapse toggle — sits inline with the other toolbar controls */
.inv-collapse-toggle { white-space: nowrap; }

/* Table container — scrolls independently */
.inv-table-wrap {
    flex: 1; overflow: auto; padding: 0;
}

/* Inventory table */
.inv-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.inv-table thead { position: sticky; top: 0; z-index: 2; }
.inv-table th {
    /* relative so the optional Model column resize handle can sit absolutely
       against the right edge */
    position: relative;
    text-align: left; padding: 10px 12px;
    font-size: 12px; color: var(--text-secondary);
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Drag handle for the Model column — a thin strip on the right edge that
   appears on hover. We only attach it to the Model header (not all columns)
   to keep the table layout simple and avoid breaking other columns' widths. */
.col-resize-handle {
    position: absolute;
    top: 0; right: -3px; bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 3;
    user-select: none;
}
.col-resize-handle:hover,
.col-resize-handle.dragging { background: var(--accent); opacity: 0.55; }
body.col-resizing { cursor: col-resize !important; user-select: none !important; }
body.col-resizing * { user-select: none !important; }
.inv-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-table tr:hover { background: var(--bg-hover); }

/* Editable cells get a dashed outline on hover */
.inv-table td.editable {
    cursor: pointer; position: relative;
}
.inv-table td.editable:hover {
    outline: 1px dashed var(--text-muted);
    outline-offset: -2px;
    border-radius: 3px;
}

/* Status badges — color-coded pills */
.status-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.status-badge.available { background: #1a3a2a; color: #4ade80; }
.status-badge.unavailable { background: #3a3a1a; color: #facc15; }
.status-badge.in_maintenance { background: #3a1a1a; color: #f87171; }
.status-badge.missing { background: #2a1a3a; color: #c084fc; }
.status-badge.cancelled { background: #3a2a2a; color: #f87171; }
.status-badge.deployed { background: #2a2a1a; color: #fb923c; }
.status-badge.partially_deployed { background: #2a2a1a; color: #fb923c; }
.status-badge.unavailable-on-date { background: #3a1a1a; color: #fb7185; cursor: help; }

/* Light theme badge overrides */
body.light .status-badge.available { background: #dcfce7; color: #166534; }
body.light .status-badge.unavailable { background: #fef9c3; color: #854d0e; }
body.light .status-badge.in_maintenance { background: #fecaca; color: #991b1b; }
body.light .status-badge.missing { background: #f3e8ff; color: #6b21a8; }
body.light .status-badge.cancelled { background: #fecaca; color: #991b1b; }
body.light .status-badge.deployed { background: #ffedd5; color: #9a3412; }
body.light .status-badge.partially_deployed { background: #ffedd5; color: #9a3412; }
body.light .status-badge.unavailable-on-date { background: #fecdd3; color: #9f1239; }

/* Event type badges — color-coded by sub-calendar */
.event-type-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
/* Multi-toggle event-type filter row in the events toolbar.
   Each pill shows a colored dot matching the calendar color + label.
   Active means "include this type"; click to toggle off. */
.events-type-toggles {
    display: inline-flex; gap: 6px; flex-wrap: wrap;
    align-items: center;
}
.events-type-toggles .evt-toggle {
    background: none; border: 1px solid var(--border); border-radius: 14px;
    padding: 4px 10px; font-size: 12px;
    color: var(--text-secondary); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    line-height: 1; white-space: nowrap;
    opacity: 0.55;
    transition: opacity 0.1s, border-color 0.1s, color 0.1s;
}
.events-type-toggles .evt-toggle.active {
    opacity: 1;
    color: var(--text-primary);
    border-color: var(--border);
    background: var(--bg-hover, rgba(127,127,127,0.06));
}
.events-type-toggles .evt-toggle:hover { color: var(--text-primary); opacity: 0.85; }
.events-type-toggles .evt-toggle.active:hover { opacity: 1; }
.evt-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.evt-dot.gig { background: #60a5fa; }
.evt-dot.sight_effects { background: #c084fc; }
.evt-dot.theater_rental { background: #fb923c; }
.evt-dot.tour_rental { background: #4ade80; }
.evt-dot.dry_rental { background: #facc15; }

.event-type-badge.gig { background: #1a2a3a; color: #60a5fa; }
.event-type-badge.sight_effects { background: #2a1a3a; color: #c084fc; }
.event-type-badge.theater_rental { background: #3a2a1a; color: #fb923c; }
.event-type-badge.tour_rental { background: #1a3a2a; color: #4ade80; }
.event-type-badge.dry_rental { background: #3a3a1a; color: #facc15; }

body.light .event-type-badge.gig { background: #dbeafe; color: #1d4ed8; }
body.light .event-type-badge.sight_effects { background: #f3e8ff; color: #7c3aed; }
body.light .event-type-badge.theater_rental { background: #ffedd5; color: #c2410c; }
body.light .event-type-badge.tour_rental { background: #dcfce7; color: #166534; }
body.light .event-type-badge.dry_rental { background: #fef9c3; color: #854d0e; }

/* ── Add Item / Batch Edit modals ─────────────────────── */
.add-item-modal .modal-box,
.batch-edit-modal .modal-box {
    max-width: 520px; width: 94%;
    text-align: left;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.add-item-modal .modal-box h2,
.batch-edit-modal .modal-box h2 { text-align: center; }

.add-item-form label,
.batch-edit-form label {
    display: block; font-size: 13px; color: var(--text-secondary);
    margin-bottom: 4px; margin-top: 12px;
}
.add-item-form input,
.add-item-form select,
.add-item-form textarea,
.batch-edit-form input,
.batch-edit-form select {
    width: 100%; padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px;
}
.add-item-form input:focus,
.add-item-form select:focus,
.add-item-form textarea:focus,
.batch-edit-form input:focus,
.batch-edit-form select:focus {
    outline: none; border-color: var(--accent);
}
.add-item-form textarea { min-height: 60px; resize: vertical; font-family: inherit; }

/* Serialized / Bulk toggle in Add Item modal */
/* Segmented control: the selected option lights up blue (the same blue
   used for inventory tag pills) so it's clear which mode is active.
   Inactive option is visibly muted — dimmer bg + grey text + reduced
   opacity — so it reads as "off" at a glance. */
.tracking-toggle { display: flex; gap: 0; margin-top: 4px; }
/* Selectors prefixed with .tracking-toggle to outrank the broader
   .modal-box button rule above (which would otherwise force every
   button in any modal to the blue accent_bg — the original bug behind
   "both buttons look blue regardless of state"). */
.tracking-toggle .tracking-opt {
    padding: 8px 18px;
    border: 1px solid var(--border);
    background: var(--bg-primary);  /* white in light, dark panel in dark */
    color: var(--text-muted);       /* grey text — reads as "off" */
    cursor: pointer;
    font-size: 14px; min-height: 44px;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}
/* Segmented control shape — flat edges where buttons meet */
.tracking-toggle .tracking-opt:first-child { border-radius: 6px 0 0 6px; }
.tracking-toggle .tracking-opt:last-child { border-radius: 0 6px 6px 0; border-left: none; }
/* Light mode inactive gets a blue outline so the segmented control
   reads as a paired set even when one side is off; dark mode keeps
   the default faint --border for the same intent at lower contrast. */
body.light .tracking-toggle .tracking-opt:not(.active) {
    border-color: var(--accent);
}
.tracking-toggle .tracking-opt:hover:not(.active) {
    background: var(--bg-hover);
}
.tracking-toggle .tracking-opt.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}
.tracking-note { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
/* Consumable checkbox + reorder threshold sit directly under the
   Serialized/Bulk toggle. Small top margin separates them from the
   tracking-note text above without adding a full form-row gap. */
.tracking-consumable-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

/* Bulk badge shown next to quantity in the inventory table */
.bulk-badge {
    font-size: 10px; padding: 1px 5px; border-radius: 3px;
    background: var(--bg-hover); color: var(--text-secondary);
    margin-left: 4px; vertical-align: middle;
}
/* Case badge — shows parent case name for nested items (clickable) */
.case-badge {
    font-size: 11px; padding: 1px 6px; border-radius: 3px;
    white-space: nowrap; cursor: pointer;
    background: #1a2a3a; color: #60a5fa;
}
.case-badge:hover { text-decoration: underline; }
body.light .case-badge { background: #dbeafe; color: #1d4ed8; }

/* Green badge on case rows — shows how many items are packed inside */
.case-badge-self {
    font-size: 11px; padding: 1px 6px; border-radius: 3px;
    white-space: nowrap; cursor: pointer;
    background: #1a2a1a; color: #4ade80;
}
.case-badge-self:hover { text-decoration: underline; }
body.light .case-badge-self { background: #dcfce7; color: #166534; }

/* Pack into Case button in batch bar — blue tint to distinguish from edit/delete */
#batch-pack-btn {
    background: var(--accent-bg) !important; color: #fff !important;
    border-color: var(--accent) !important;
}
#batch-pack-btn:hover { opacity: 0.9; }

/* ── Pack Into Case modal ──────────────────────────────── */
.pack-case-modal .modal-box {
    max-width: 440px; width: 94%;
    text-align: left;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.pack-case-modal .modal-box h2 { text-align: center; margin-bottom: 12px; }

.pack-case-search {
    width: 100%; padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px; margin-bottom: 8px;
}
.pack-case-search:focus { outline: none; border-color: var(--accent); }

.pack-case-list {
    max-height: 200px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 6px;
    margin-bottom: 12px;
}
.pack-case-option {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; cursor: pointer;
    font-size: 14px; color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}
.pack-case-option:last-child { border-bottom: none; }
.pack-case-option:hover { background: var(--bg-hover); }
.pack-case-option .pack-case-count {
    font-size: 12px; color: var(--text-secondary);
}

/* Confirmation chip after selecting a case */
.pack-case-selected {
    display: none; padding: 10px 12px; margin-bottom: 12px;
    background: var(--bg-hover); border-radius: 6px;
    font-size: 14px; color: var(--text-primary);
    align-items: center; gap: 8px;
}
.pack-case-selected.active { display: flex; }
.pack-case-selected strong { flex: 1; }
.pack-case-change {
    font-size: 12px; color: var(--accent); cursor: pointer;
    background: none; border: none; padding: 0;
}
.pack-case-change:hover { text-decoration: underline; }

/* Permanent checkbox row */
.pack-perm-toggle {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--text-primary);
    margin-bottom: 12px;
}
.pack-perm-toggle input { width: auto; }

.pack-case-error {
    color: var(--danger-hover); font-size: 13px;
    min-height: 18px; margin-bottom: 8px;
}
.pack-case-actions {
    display: flex; gap: 8px; justify-content: center;
}

/* ── Case Contents modal ──────────────────────────────── */
.case-contents-modal .modal-box {
    max-width: 560px; width: 94%;
    text-align: left;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.case-contents-modal .modal-box h2 { text-align: center; margin-bottom: 4px; }
.case-contents-subtitle {
    text-align: center; font-size: 13px;
    color: var(--text-secondary); margin-bottom: 16px;
}

.case-contents-section h3 {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 6px; margin-top: 12px;
}
.case-contents-section h3:first-child { margin-top: 0; }

.case-content-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--text-primary);
}
.case-content-item:last-child { border-bottom: none; }
.case-content-info { flex: 1; }
.case-content-info .cc-model { font-weight: 600; }
.case-content-info .cc-detail {
    font-size: 12px; color: var(--text-secondary);
}
.case-content-remove {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 18px;
    padding: 4px 8px; border-radius: 4px; line-height: 1;
}
.case-content-remove:hover { color: var(--danger-hover); background: var(--bg-hover); }

.case-contents-empty {
    color: var(--text-secondary); font-size: 13px;
    text-align: center; padding: 16px 0;
}

/* Add items section inside case contents modal */
.case-add-section { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.case-add-section h3 {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 8px;
}
.case-add-search {
    width: 100%; padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px; margin-bottom: 8px;
}
.case-add-search:focus { outline: none; border-color: var(--accent); }

.case-add-perm-toggle {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-secondary);
    margin-bottom: 8px;
}
.case-add-perm-toggle input { width: auto; }

.case-add-results {
    max-height: 180px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 6px;
}
.case-add-result-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--text-primary);
}
.case-add-result-item:last-child { border-bottom: none; }
.case-add-result-item .cc-info { flex: 1; }
.case-add-result-item .cc-info .cc-model { font-weight: 600; }
.case-add-result-item .cc-info .cc-detail {
    font-size: 12px; color: var(--text-secondary);
}
.case-add-result-item .add-to-case-btn {
    padding: 4px 12px; border: 1px solid var(--accent); border-radius: 4px;
    background: none; color: var(--accent); cursor: pointer;
    font-size: 12px; white-space: nowrap;
}
.case-add-result-item .add-to-case-btn:hover {
    background: var(--accent-bg); color: #fff;
}
/* Already packed items — greyed out with no Add button */
.case-add-result-item.already-packed {
    opacity: 0.5;
}
.case-add-result-item.already-packed .add-to-case-btn { display: none; }
.case-add-result-item .packed-in-label {
    font-size: 11px; color: var(--text-muted); white-space: nowrap;
}

.case-contents-close-wrap {
    display: flex; justify-content: center; margin-top: 16px;
}
.add-item-form .form-row {
    display: flex; gap: 12px;
}
.add-item-form .form-row > div { flex: 1; }
.add-item-error, .batch-edit-error {
    color: var(--danger-hover); font-size: 13px;
    min-height: 18px; margin-top: 8px;
}
.add-item-actions, .batch-edit-actions {
    display: flex; gap: 8px; justify-content: center; margin-top: 16px;
}
/* Actions column — edit + 🔗 suggestions + duplicate + delete icons per row.
   Widened from 60px to 110px so all four icons fit without wrap. */
.inv-table td.actions-cell {
    white-space: nowrap; overflow: visible;
    padding: 4px 6px; width: 110px;
}
.inv-table td.actions-cell button {
    background: none; border: none; cursor: pointer;
    font-size: 16px; padding: 4px 6px; border-radius: 4px;
    color: var(--text-muted); line-height: 1;
}
.inv-table td.actions-cell button:hover {
    color: var(--text-primary); background: var(--bg-hover);
}
.inv-table td.actions-cell .delete-item-btn:hover {
    color: var(--danger-hover);
}
/* Hide actions by default, show on row hover */
.inv-table td.actions-cell button { opacity: 0; transition: opacity 0.1s; }
.inv-table tr:hover td.actions-cell button { opacity: 1; }

/* Checkbox column */
.inv-table th.chk-col,
.inv-table td.chk-col {
    width: 36px; text-align: center; padding: 6px;
}
.inv-table .chk-col input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer;
    accent-color: var(--accent);
}

/* Floating batch action bar */
#batch-bar {
    display: none;
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--bg-header); border: 1px solid var(--accent);
    border-radius: 10px; padding: 10px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    z-index: 50; gap: 12px; align-items: center;
    font-size: 14px;
}
#batch-bar.active { display: flex; }
#batch-bar .batch-count {
    font-weight: 600; color: var(--accent); margin-right: 4px;
}
#batch-bar button {
    padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg-primary); color: var(--text-primary);
    cursor: pointer; font-size: 13px; white-space: nowrap;
}
#batch-bar button:hover { border-color: var(--accent); }
#batch-bar .batch-delete-btn {
    border-color: var(--danger); color: var(--danger-hover);
}
#batch-bar .batch-delete-btn:hover {
    background: var(--danger); color: #fff;
}
#batch-bar .batch-clear-btn {
    background: none; border: none; color: var(--text-muted);
    font-size: 12px; padding: 6px 8px;
}
#batch-bar .batch-clear-btn:hover { color: var(--text-primary); }

/* Inline edit inputs inside the table */
.inv-table .inline-edit {
    width: 100%; padding: 4px 6px; border-radius: 4px;
    border: 1px solid var(--accent); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px; font-family: inherit;
}
.inv-table .inline-edit:focus { outline: none; }
.inv-table select.inline-edit { cursor: pointer; }

/* ── Draft confirmation cards (inline in chat) ─────────── */
.draft-card {
    max-width: 360px;
    margin: 8px 0;
    padding: 14px 16px;
    background: var(--bg-header);
    border: 1px solid var(--border);
    border-radius: 10px;
    align-self: flex-start;
    font-size: 13px;
}
/* Pull sheet draft cards need more room for the table */
.draft-card.pullsheet-draft { max-width: 460px; }
.draft-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.draft-card-summary {
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 12px;
}
.draft-card-actions {
    display: flex;
    gap: 8px;
}

/* Send-quote / send-invoice preview cards */
.draft-card .draft-meta-row {
    font-size: 13px; color: var(--text-secondary);
    margin-bottom: 3px;
}
.draft-card .draft-meta-row span { color: var(--text-muted); margin-right: 4px; }
.draft-card .draft-meta-row strong { color: var(--text-primary); font-weight: 500; }
.draft-card .draft-warning {
    margin: 8px 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(230, 200, 100, 0.12);
    border: 1px solid rgba(230, 200, 100, 0.3);
    color: var(--text-primary);
    font-size: 12px;
}
.draft-card .draft-line-table {
    width: 100%; border-collapse: collapse;
    margin-top: 10px; margin-bottom: 12px;
    font-size: 13px;
}
.draft-card .draft-line-table th {
    text-align: left; padding: 4px 6px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.draft-card .draft-line-table th.amt,
.draft-card .draft-line-table td.amt {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.draft-card .draft-line-table td {
    padding: 4px 6px;
    border-bottom: 1px dashed var(--border);
    color: var(--text-primary);
}
.draft-card .draft-line-table tr.draft-meta td {
    color: var(--text-secondary);
    font-size: 12px;
}
.draft-card .draft-line-table tr.draft-total td {
    border-top: 1px solid var(--border);
    border-bottom: none;
    padding-top: 6px;
}

/* Pull sheet table inside draft cards */
.pullsheet-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 12px;
}
.pullsheet-table th {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 2px solid var(--border);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pullsheet-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.pullsheet-table tr:last-child td { border-bottom: none; }
.pullsheet-table .qty-col { text-align: center; width: 36px; }
.pullsheet-table .cat-col { color: var(--text-secondary); }
.pullsheet-total {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}
.pullsheet-event-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Red title for deletion cards so they stand out from creation */
.draft-card.delete-draft .draft-card-title {
    color: #ef4444;
}
.btn-confirm {
    padding: 7px 18px;
    border: none;
    border-radius: 6px;
    background: #166534;
    color: #4ade80;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.btn-confirm:hover { background: #15803d; }
.btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-discard {
    padding: 7px 18px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
}
.btn-discard:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.btn-discard:disabled { opacity: 0.5; cursor: not-allowed; }

/* Result state after confirming/cancelling */
.draft-result {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 8px;
}
.draft-result.success {
    background: #1a3a2a;
    color: #4ade80;
}
.draft-result.cancelled {
    color: var(--text-secondary);
}
.draft-result.error {
    background: #3a1a1a;
    color: #f87171;
}
body.light .btn-confirm { background: #dcfce7; color: #166534; }
body.light .btn-confirm:hover { background: #bbf7d0; }
body.light .draft-result.success { background: #dcfce7; color: #166534; }
body.light .draft-result.error { background: #fecaca; color: #991b1b; }

/* ── Events panel ─────────────────────────────────────── */
#events-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
#events-panel.active { display: flex; }
#events-panel header {
    background: var(--bg-header);
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
}
#events-panel header h1 {
    font-size: 18px; font-weight: 600;
    color: var(--text-primary); letter-spacing: 0.5px;
}
#events-count {
    font-size: 13px; color: var(--text-secondary); font-weight: 400;
}
.events-list {
    flex: 1; overflow-y: auto; padding: 16px 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.events-empty {
    color: var(--text-secondary); font-size: 14px;
    text-align: center; padding: 40px 20px;
}

/* Individual event card */
.event-card {
    padding: 14px 16px;
    background: var(--bg-header);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
}
.event-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.event-card-name {
    font-weight: 600;
    color: var(--text-primary);
}
.event-card-detail {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.event-card-detail span { margin-right: 12px; }
.google-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #1a3a2a;
    color: #4ade80;
    margin-left: 6px;
}
body.light .google-badge { background: #dcfce7; color: #166534; }

/* Cancelled events are dimmed so they fade into the background */
.event-card.cancelled { opacity: 0.55; }

/* Delete button — hidden until card hover (or always visible on mobile) */
.event-delete-btn {
    background: none; border: none; cursor: pointer;
    font-size: 16px; line-height: 1; padding: 2px 6px;
    color: var(--text-muted); opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    border-radius: 4px;
}
.event-card:hover .event-delete-btn,
.event-delete-btn:focus { opacity: 1; }
.event-delete-btn:hover {
    color: var(--danger);
    background: rgba(248, 113, 113, 0.1);
}

/* Clickable event cards */
.event-card { cursor: pointer; transition: border-color 0.15s; }
.event-card:hover { border-color: var(--accent); }

/* Quick-action buttons in the lower-right of each event card */
.event-card-actions {
    display: flex; gap: 6px; justify-content: flex-end;
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid var(--border);
}
.event-card-actions button {
    padding: 4px 10px; font-size: 12px; border-radius: 4px;
    background: var(--bg-input); color: var(--text-secondary);
    border: 1px solid var(--border); cursor: pointer;
    line-height: 1;
}
.event-card-actions button:hover {
    border-color: var(--accent); color: var(--accent);
}
.event-card-actions button:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.event-card-actions button:disabled:hover {
    color: var(--text-secondary); border-color: var(--border);
}

@media (max-width: 768px) {
    .event-card-actions { flex-wrap: wrap; }
}

/* Logistics indicator on event card */
.event-logistics-badge {
    font-size: 11px; color: var(--text-muted); margin-top: 4px;
}

/* ── Edit event modal ─────────────────────────────────── */
/* Wide on desktop so the inline quote editor + pull-sheet viewer have
   real estate to breathe. The form section is capped separately below
   so its inputs don't stretch to absurd widths on a 1200px-wide box. */
.edit-event-modal .modal-box {
    max-width: 1200px; width: 95vw;
    text-align: left;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.edit-event-modal .modal-box h2 { text-align: center; }

/* Cap the form so labels + inputs stay readable while the surrounding
   modal stays wide for the quote/pull-sheet viewers above it. */
.edit-event-form {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.edit-event-form label {
    display: block; font-size: 13px; color: var(--text-secondary);
    margin-bottom: 4px; margin-top: 12px;
}
.edit-event-form input,
.edit-event-form select,
.edit-event-form textarea {
    width: 100%; padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px;
}
.edit-event-form input:focus,
.edit-event-form select:focus,
.edit-event-form textarea:focus {
    outline: none; border-color: var(--accent);
}
.edit-event-form textarea { min-height: 60px; resize: vertical; font-family: inherit; }

/* Side-by-side date and time pickers */
.edit-event-dates,
.edit-event-times {
    display: flex; gap: 12px;
}
.edit-event-dates > div,
.edit-event-times > div { flex: 1; }

/* All-day checkbox row */
.edit-event-allday {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; font-size: 14px; color: var(--text-primary);
}
.edit-event-allday input { width: auto; }

/* Collapsible logistics section */
.edit-logistics-toggle {
    display: inline-block; margin-top: 16px; margin-bottom: 4px;
    font-size: 13px; color: var(--accent); cursor: pointer;
    background: none; border: none; padding: 0;
}
.edit-logistics-toggle:hover { text-decoration: underline; }
.edit-logistics-section { display: none; }
.edit-logistics-section.open { display: block; }
/* Datetime-local overlay pattern — visible text input shows
   MM-DD-YYYY HH:MM AM/PM; native datetime-local underneath provides
   the picker UI via showPicker(). Hidden via opacity (not display)
   so showPicker() still works (some browsers require the element to
   be in the layout tree). */
.dt-wrap {
    position: relative;
    /* Mirror the same margin/sizing the form gives its inputs so the
       overlay looks identical to other fields in the modal. */
    display: block;
}
.dt-wrap .dt-display {
    /* Inherit the form-input sizing — let the modal's existing
       .edit-event-form input styling drive width / padding / border. */
    width: 100%; box-sizing: border-box;
}
.dt-wrap .dt-hidden {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 0; pointer-events: none;
}

/* Error text */
.edit-event-error {
    color: var(--danger-hover); font-size: 13px;
    min-height: 18px; margin-top: 8px;
}

/* Quick-action buttons bar at top of edit modal */
.event-action-bar {
    display: flex; gap: 8px; margin-bottom: 14px;
}
.event-action-bar button {
    flex: 1; padding: 9px 12px; border-radius: 6px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.btn-view-pullsheet {
    background: none; border: 1px solid var(--border);
    color: var(--text-primary);
}
.btn-view-pullsheet:hover { border-color: var(--accent); color: var(--accent); }
.btn-start-packing {
    background: var(--accent-bg); border: 1px solid transparent;
    color: #fff;
}
.btn-start-packing:hover { background: var(--accent); }
.btn-view-quote {
    background: none; border: 1px solid var(--border);
    color: var(--text-primary);
}
.btn-view-quote:hover { border-color: var(--accent); color: var(--accent); }
.btn-mark-shipped {
    background: none; border: 1px solid var(--border);
    color: var(--text-primary);
}
.btn-mark-shipped:hover { border-color: #6ec06e; color: #6ec06e; }
.btn-mark-shipped.is-shipped {
    background: #2d4a2d; color: #b8e0b8; border-color: #3d5a3d;
}
body.light .btn-mark-shipped.is-shipped {
    background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7;
}
.shipped-badge {
    font-size: 11px; padding: 4px 10px; border-radius: 12px;
    background: #2d4a2d; color: #b8e0b8;
    align-self: center;
}
body.light .shipped-badge { background: #e8f5e9; color: #2e7d32; }

/* Duplicate result modal — wider than default to fit multi-section summary */
.dup-result-box {
    max-width: 480px !important;
    text-align: left !important;
}
.dup-result-box h2 { text-align: center; }
.dup-result-box p { text-align: center; }
.dup-result-section {
    margin-top: 14px; padding: 10px 12px;
    border-radius: 6px; font-size: 13px;
    border-left: 3px solid var(--border);
    background: var(--bg-secondary);
}
.dup-result-section h4 {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 6px;
    color: var(--text-secondary); font-weight: 600;
}
.dup-result-section ul {
    list-style: none; padding: 0; margin: 0;
}
.dup-result-section li {
    padding: 3px 0; color: var(--text-primary);
    line-height: 1.4;
}
.dup-result-section .more {
    color: var(--text-dim); font-style: italic;
    padding-top: 4px;
}
.dup-result-section.subbed {
    border-left-color: #4a8fd6;
    background: #1d2d40;
}
body.light .dup-result-section.subbed {
    border-left-color: #1976d2;
    background: #e3f2fd;
}
.dup-result-section.skipped {
    border-left-color: #d6a04a;
    background: #3a2e1d;
}
body.light .dup-result-section.skipped {
    border-left-color: #f57c00;
    background: #fff3e0;
}
.dup-result-section.shortage {
    border-left-color: #d65656;
    background: #3a1f1f;
}
body.light .dup-result-section.shortage {
    border-left-color: #c62828;
    background: #ffebee;
}

/* Duplicate / Archive buttons — same neutral look as the other event actions */
.btn-duplicate-event,
.btn-archive-event {
    background: none; border: 1px solid var(--border);
    color: var(--text-primary);
}
.btn-duplicate-event:hover,
.btn-archive-event:hover { border-color: var(--accent); color: var(--accent); }

/* Header strip at the top of the pull sheet viewer — item count + Add Items toggle */
.ps-add-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.ps-add-header-count {
    color: var(--text-secondary); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.ps-add-header .ps-add-items-btn {
    padding: 6px 14px; font-size: 13px;
    background: var(--accent-bg); color: #fff;
    border-color: transparent;
}
.ps-add-header .ps-add-items-btn:hover {
    background: var(--accent); color: #fff;
}
.btn-archive-event.is-archived {
    background: var(--bg-hover); color: var(--text-secondary);
}
.btn-archive-event:disabled { opacity: 0.4; cursor: not-allowed; }

.archived-badge {
    font-size: 11px; padding: 4px 10px; border-radius: 12px;
    background: var(--bg-hover); color: var(--text-secondary);
    align-self: center;
}

/* Inventory / pack-sheet / quote shortage flag — shows ⚠️ next to a model
   when the item is double-booked or oversold and no substitute is available.
   Hover-tooltip shows the conflicting events. */
.shortage-flag {
    display: inline-block;
    font-size: 13px;
    cursor: help;
    margin-right: 2px;
    filter: drop-shadow(0 0 1px rgba(255, 200, 0, 0.4));
}

/* Quick-action buttons in each pack sheet sidebar card.
   Anchored to the lower-right so they don't crowd the event name. */
.ps-quick-actions {
    display: flex; gap: 4px; justify-content: flex-end;
    margin-top: 6px;
}
.ps-quick-actions button {
    padding: 3px 8px; font-size: 11px; border-radius: 4px;
    background: var(--bg-input); color: var(--text-secondary);
    border: 1px solid var(--border); cursor: pointer;
    line-height: 1;
}
.ps-quick-actions button:hover {
    border-color: var(--accent); color: var(--accent);
}
.ps-quick-actions button:disabled {
    opacity: 0.35; cursor: not-allowed; border-color: var(--border);
}
.ps-quick-actions button:disabled:hover {
    color: var(--text-secondary); border-color: var(--border);
}

/* "+ New Pull Sheet" button at the top of the sidebar — primary call-to-action */
.ps-new-pullsheet-btn {
    width: 100%; margin-top: 8px;
    padding: 7px 10px; border-radius: 4px;
    background: var(--accent-bg); color: #fff;
    border: 1px solid transparent; cursor: pointer;
    font-size: 12px; font-weight: 600;
}
.ps-new-pullsheet-btn:hover { background: var(--accent); }

/* New Pull Sheet picker modal — wider than default to fit the event list */
.new-pullsheet-box {
    max-width: 480px !important;
    text-align: left !important;
}
.new-pullsheet-box h2 { text-align: center; }
.new-pullsheet-list {
    max-height: 360px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-secondary);
    margin-bottom: 14px;
}
.new-pullsheet-loading,
.new-pullsheet-empty {
    text-align: center; padding: 24px; color: var(--text-muted); font-size: 13px;
}
.new-pullsheet-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.1s;
}
.new-pullsheet-row:hover { background: var(--bg-hover); }
.new-pullsheet-row:last-child { border-bottom: none; }
.new-pullsheet-row-info { flex: 1; min-width: 0; }
.new-pullsheet-row-title {
    color: var(--text-primary); font-weight: 500; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.new-pullsheet-row-sub {
    color: var(--text-secondary); font-size: 12px; margin-top: 2px;
}
.new-pullsheet-row-status {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 2px 8px; border-radius: 3px; flex-shrink: 0;
    background: var(--bg-hover); color: var(--text-secondary);
}
.new-pullsheet-row-status.confirmed { background: #1a3a2a; color: #4ade80; }
.new-pullsheet-row-status.in_progress { background: #3a2e1a; color: #fbbf24; }
.new-pullsheet-row-status.quoting { background: #1a2a3a; color: #60a5fa; }
body.light .new-pullsheet-row-status.confirmed { background: #dcfce7; color: #166534; }
body.light .new-pullsheet-row-status.in_progress { background: #fef3c7; color: #92400e; }
body.light .new-pullsheet-row-status.quoting { background: #dbeafe; color: #1d4ed8; }

/* Pack sheets sidebar Active / Archived toggle */
.ps-archive-toggle {
    display: flex; gap: 0; margin-top: 8px;
    border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden;
}
.ps-archive-toggle button {
    flex: 1; background: none; border: none; cursor: pointer;
    padding: 5px 10px; font-size: 12px; color: var(--text-secondary);
}
.ps-archive-toggle button:hover { color: var(--text-primary); }
.ps-archive-toggle button.active {
    background: var(--accent-bg); color: #fff;
}
.btn-start-packing:disabled,
.btn-view-pullsheet:disabled,
.btn-view-quote:disabled,
.btn-mark-shipped:disabled {
    opacity: 0.4; cursor: not-allowed;
}

/* Pull sheet viewer panel inside the edit modal */
.pullsheet-viewer {
    display: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 14px;
    background: var(--bg-primary);
    max-height: 240px;
    overflow-y: auto;
}
.pullsheet-viewer.open { display: block; }
.pullsheet-viewer-empty {
    color: var(--text-muted); font-size: 13px;
    text-align: center; padding: 16px 0;
}
.pullsheet-viewer table {
    width: 100%;
    /* border-collapse: collapse breaks position: sticky on table headers. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}
/* Belt-and-suspenders sticky: every layer (thead, tr, th) is sticky
   with a solid background, so rows can't leak through any seam. */
.pullsheet-viewer thead {
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-primary);
}
.pullsheet-viewer thead tr { background: var(--bg-primary); }
.pullsheet-viewer th {
    text-align: left; padding: 5px 8px;
    color: var(--text-secondary); font-weight: 600;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-primary);
    border-bottom: 2px solid var(--border);
    /* Big upward shadow covers the scroll container's top padding plus any
       slack so no scrolling row can peek through above the header. */
    box-shadow: 0 -100px 0 var(--bg-primary);
}
.pullsheet-viewer td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.pullsheet-viewer tr:last-child td { border-bottom: none; }
.pullsheet-viewer .qty-col { text-align: center; width: 36px; }
.pullsheet-viewer .cat-col { color: var(--text-secondary); }

/* ── Quote viewer (inside edit-event modal) ──────────── */
.quote-viewer {
    display: none;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 14px; margin-bottom: 14px;
    background: var(--bg-primary);
    font-size: 13px;
}
.quote-viewer.open { display: block; }
.quote-loading, .quote-empty {
    color: var(--text-muted); font-size: 13px;
    text-align: center; padding: 20px 0;
}
.quote-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.quote-title strong { font-size: 15px; margin-right: 8px; }
.quote-duration { color: var(--text-secondary); font-size: 12px; }
.quote-status { display: flex; gap: 6px; flex-wrap: wrap; }
.quote-status-pill {
    font-size: 11px; padding: 3px 8px; border-radius: 12px;
    background: var(--bg-hover); color: var(--text-secondary);
}
.quote-status-pill.sent { background: #2d3a4a; color: #b8d4e0; }
.quote-status-pill.accepted { background: #2d4a2d; color: #b8e0b8; }
body.light .quote-status-pill.sent { background: #e3f2fd; color: #1565c0; }
body.light .quote-status-pill.accepted { background: #e8f5e9; color: #2e7d32; }

.quote-lines {
    width: 100%; border-collapse: collapse;
    margin-bottom: 14px;
    border: 1px solid var(--border);
}
.quote-lines th, .quote-lines td {
    padding: 6px 8px; border-bottom: 1px solid var(--border);
    text-align: left;
}
.quote-lines th {
    background: var(--bg-secondary);
    color: var(--text-secondary); font-weight: 600;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
}
.quote-lines th.qty, .quote-lines th.days, .quote-lines th.rate, .quote-lines th.amt,
.quote-lines td.qty, .quote-lines td.days, .quote-lines td.rate, .quote-lines td.amt {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.quote-lines td.qty, .quote-lines td.days { text-align: center; }
.quote-empty-row {
    text-align: center !important; color: var(--text-muted);
    font-style: italic; padding: 14px !important;
}
/* Toolbar above the line items table — group-by + subtotals toggles */
.quote-lines-toolbar {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 16px;
    margin: 6px 0 4px;
    flex-wrap: wrap;
}
.q-group-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
    cursor: pointer; user-select: none;
}
.q-group-toggle input { margin: 0; cursor: pointer; }
.q-group-toggle.disabled {
    opacity: 0.5; cursor: not-allowed;
}
.q-group-toggle.disabled input { cursor: not-allowed; }
/* Category subheader row when group-by-category is on */
.quote-category-row td {
    background: var(--bg-secondary, rgba(180, 200, 220, 0.15));
    color: var(--text-primary);
    font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 6px 8px !important;
    border-top: 2px solid var(--border, #ccc) !important;
}
/* 3-way grouping mode picker (None / By Category / By Package) */
.q-group-mode-picker {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px;
}
.q-group-mode-picker .q-mode-label {
    color: var(--text-secondary); margin-right: 4px;
}
.q-mode-btn {
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border, #ccc);
    padding: 3px 10px; border-radius: 4px;
    font-size: 12px; cursor: pointer;
}
.q-mode-btn:hover { background: var(--bg-secondary, rgba(180, 200, 220, 0.1)); }
.q-mode-btn.active {
    background: var(--accent, #4a90c0); color: white;
    border-color: var(--accent, #4a90c0);
}
/* Custom-packages editor (Audio Package / Video Package / etc.) */
.q-packages-editor {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin: 6px 0;
    background: var(--bg-secondary, rgba(180, 200, 220, 0.08));
    border: 1px dashed var(--border, #ccc); border-radius: 4px;
}
.q-packages-label {
    font-weight: 600; font-size: 12px;
    color: var(--text-secondary);
}
.q-packages-chips {
    display: flex; flex-wrap: wrap; gap: 6px; flex: 1;
}
.q-pkg-chip {
    display: inline-flex; align-items: center;
    background: var(--bg-input); border: 1px solid var(--border, #ccc);
    border-radius: 12px; padding: 2px 4px 2px 10px;
}
.q-pkg-name {
    border: none; background: transparent;
    color: var(--text-primary);
    font-size: 12px; padding: 2px 4px;
    width: auto; min-width: 80px;
}
.q-pkg-name:focus { outline: 1px solid var(--accent); border-radius: 2px; }
.q-pkg-remove {
    background: transparent; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 14px; padding: 0 6px;
    line-height: 1;
}
.q-pkg-remove:hover { color: var(--danger, #e44); }
.q-pkg-add {
    background: transparent; color: var(--text-secondary);
    border: 1px dashed var(--border, #ccc); border-radius: 12px;
    padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.q-pkg-add:hover { background: var(--bg-input); color: var(--text-primary); }
/* Per-line package picker */
.q-line-pkg {
    margin-left: 6px;
    font-size: 11px; padding: 1px 4px;
    background: var(--bg-input); color: var(--text-secondary);
    border: 1px solid var(--border, #ccc); border-radius: 3px;
}
/* Version chip in the quote header — "v3 draft · accepted: v1" */
.q-version-chip {
    display: inline-block;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--bg-secondary, rgba(180, 200, 220, 0.15));
    color: var(--text-secondary);
    border: 1px solid var(--border, #ccc);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}
/* Highlight when the live state is sitting on a restored snapshot, until
   the user edits something and the marker clears server-side. */
.q-version-chip.q-version-chip-restored {
    background: rgba(74, 144, 192, 0.15);
    color: var(--accent, #4a90c0);
    border-color: var(--accent, #4a90c0);
}
/* Versions panel — snapshot history of past quotes */
.quote-versions-panel {
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--bg-secondary, rgba(180, 200, 220, 0.06));
    border: 1px solid var(--border, #ccc);
    border-radius: 6px;
}
.q-versions-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.q-versions-header strong {
    font-size: 13px; color: var(--text-primary);
}
.q-version-save {
    background: transparent; color: var(--text-secondary);
    border: 1px dashed var(--border, #ccc); border-radius: 4px;
    padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.q-version-save:hover {
    background: var(--bg-input); color: var(--text-primary);
}
.q-versions-list {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px;
}
.q-versions-empty {
    color: var(--text-muted); font-style: italic; padding: 6px 0;
}
.q-version-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-input); border: 1px solid var(--border, #ccc);
    border-radius: 4px;
}
.q-version-row.is-accepted {
    border-color: var(--accent, #4a90c0);
    background: rgba(74, 144, 192, 0.08);
}
.q-version-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    color: var(--text-secondary);
}
.q-version-num {
    font-weight: 700; color: var(--text-primary); min-width: 28px;
}
.q-version-total {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.q-version-trigger {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted);
}
.q-version-date { font-size: 11px; color: var(--text-muted); }
.q-version-userlabel {
    background: var(--bg-secondary); color: var(--text-primary);
    padding: 1px 6px; border-radius: 3px; font-size: 11px;
}
.q-version-accepted-chip {
    background: var(--accent, #4a90c0); color: white;
    padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600;
}
.q-version-actions {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.q-version-actions a, .q-version-actions button {
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border, #ccc); border-radius: 3px;
    padding: 3px 8px; font-size: 11px; cursor: pointer;
    text-decoration: none;
}
.q-version-actions a:hover, .q-version-actions button:hover {
    background: var(--bg-secondary); color: var(--text-primary);
}
.q-version-actions button:disabled {
    opacity: 0.5; cursor: not-allowed;
}
@media (max-width: 600px) {
    .q-version-row { flex-direction: column; align-items: flex-start; }
    .q-version-meta { width: 100%; }
    .q-version-actions { width: 100%; }
}
/* Drag handles + drop indicators */
.q-drag-handle, .q-pkg-grip {
    display: inline-block;
    color: var(--text-muted, #888); cursor: grab;
    font-weight: 700; letter-spacing: -1px;
    user-select: none; padding: 0 4px;
}
.q-drag-handle:active, .q-pkg-grip:active { cursor: grabbing; }
.q-line-draggable { cursor: default; }
.q-line-draggable.dragging { opacity: 0.4; }
.q-line-draggable.drop-above td {
    box-shadow: inset 0 2px 0 var(--accent, #4a90c0);
}
.q-line-draggable.drop-below td {
    box-shadow: inset 0 -2px 0 var(--accent, #4a90c0);
}
.q-pkg-chip { cursor: grab; }
.q-pkg-chip.dragging { opacity: 0.4; }
.q-pkg-chip.drop-before { box-shadow: -2px 0 0 var(--accent, #4a90c0); }
.q-pkg-chip.drop-after  { box-shadow:  2px 0 0 var(--accent, #4a90c0); }
/* Subtotal row at the end of each category group */
.quote-subtotal-row td {
    background: var(--bg-tertiary, rgba(220, 230, 240, 0.25));
    font-weight: 600; font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 8px !important;
    border-top: 1px solid var(--border, #ddd) !important;
    border-bottom: 1px solid var(--border, #ddd) !important;
}
.quote-subtotal-row td:first-child { text-align: right; }
.quote-subtotal-row td.amt {
    text-align: right; font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* ── Quote: extras section buttons + rows ─────────────── */
/* "+ Add line" button — outlined ghost button matching the page aesthetic */
.q-add-extra {
    margin-top: 6px;
    padding: 6px 12px;
    background: none;
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.q-add-extra:hover {
    color: var(--accent);
    border-color: var(--accent);
    border-style: solid;
}
/* Per-line extras: description input + amount input + remove (×) button.
   The X button needed real styling — was running on browser defaults too. */
.quote-extra-row {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 6px;
}
.quote-extra-row .extra-desc {
    flex: 1; min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input, var(--bg-primary));
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}
.quote-extra-row .extra-amt {
    width: 100px; flex-shrink: 0;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input, var(--bg-primary));
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.quote-extra-row .extra-desc:focus,
.quote-extra-row .extra-amt:focus {
    outline: none; border-color: var(--accent);
}
.quote-extra-row .extra-remove {
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 24px; height: 24px;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.quote-extra-row .extra-remove:hover {
    color: var(--danger-hover, #b33);
    border-color: var(--danger, #b33);
}

/* Auto-labor section — sits between items and extras on the quote view.
   Rows are grid-laid so the day/rate inputs + total align across people. */
.quote-labor { margin-bottom: 14px; }
.quote-labor .quote-section-label {
    display: flex; align-items: baseline; gap: 8px;
}
.q-labor-markup-note {
    font-size: 11px; font-weight: 400;
    color: var(--text-muted);
    text-transform: none; letter-spacing: 0;
}
.q-labor-list { display: flex; flex-direction: column; gap: 6px; }
.quote-labor-row {
    display: grid;
    grid-template-columns: 1fr 80px 110px 90px auto;
    gap: 8px; align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg);
}
.quote-labor-row.excluded {
    opacity: 0.5;
    background: var(--bg-secondary, var(--bg));
}
.quote-labor-row.excluded .q-labor-total,
.quote-labor-row.excluded .q-labor-name { text-decoration: line-through; }
.q-labor-person { min-width: 0; }
.q-labor-name {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-labor-meta {
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-labor-field {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
}
.q-labor-field input {
    box-sizing: border-box; height: 26px;
    padding: 2px 6px; font-size: 12px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.q-labor-field input:focus { outline: none; border-color: var(--accent); }
.q-labor-total {
    font-size: 14px; font-weight: 500; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 80px;
}
.q-labor-toggle {
    background: none; border: 1px solid var(--border); border-radius: 4px;
    width: 28px; height: 28px; padding: 0;
    color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.q-labor-toggle:hover { color: var(--accent); border-color: var(--accent); }
.q-labor-empty {
    font-size: 12px; color: var(--text-muted);
    text-align: center; padding: 10px;
    border: 1px dashed var(--border); border-radius: 6px;
}

/* + Add Item to Quote — inline above the items table. Button stays compact
   so it doesn't compete with the table; popover floats below it with the
   search input and results list. */
.q-add-row {
    margin: 8px 0 6px;
    position: relative;
}
.q-add-item-btn {
    background: none;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}
.q-add-item-btn:hover { border-color: var(--accent); color: var(--accent); }
.q-add-popover {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    padding: 10px;
    max-width: 560px;
}
.q-add-popover[hidden] { display: none; }
/* Bill-on-quote toggle inside the add popover. Defaults checked unless
   the quote has been accepted; an italicized helper note explains why
   it's unchecked in that case. */
.q-add-bill-toggle {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px;
    font-size: 12px; color: var(--text-secondary);
    cursor: pointer; user-select: none;
}
.q-add-bill-toggle em {
    font-style: italic; color: var(--text-muted); font-size: 11px;
}
.q-add-bill-toggle input { margin: 0; }
.q-add-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px;  /* iOS no-zoom */
    box-sizing: border-box;
}
.q-add-search:focus { outline: none; border-color: var(--accent); }
.q-add-results { margin-top: 8px; max-height: 280px; overflow-y: auto; }

/* Per-line action column on quote lines — wide enough for two inline
   icon buttons (👁 visibility + ✕ remove). Replaces the older single-⋯
   kebab approach so both actions are visible at-a-glance. */
.quote-lines th.q-row-actions, .quote-lines td.q-row-actions {
    width: 64px; padding: 4px 6px; text-align: center; white-space: nowrap;
}
.q-line-actions {
    display: inline-flex; align-items: center; gap: 4px;
}

/* Eye toggle — inline SVG (line-art, currentColor stroke) so it inherits
   the surrounding text color and looks consistent across platforms (no
   Apple-style glyph). When hidden, ::after draws a diagonal red strike
   across the eye so "hidden from client" reads instantly without
   swapping icons. */
.quote-lines .q-line-eye {
    background: none; border: 1px solid transparent;
    width: 24px; height: 24px; border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
}
.quote-lines .q-line-eye:hover {
    border-color: var(--border);
    color: var(--text-primary);
}
.quote-lines .q-eye-svg {
    width: 16px; height: 16px;
    display: block;
}
.quote-lines .q-line-eye.is-hidden::after {
    content: ""; position: absolute;
    top: 50%; left: 2px; right: 2px;
    height: 1.6px;
    background: #d04545;
    transform: rotate(-22deg);
    transform-origin: center;
    border-radius: 1px;
    pointer-events: none;
}
.quote-lines .q-line-eye.is-hidden .q-eye-svg { opacity: 0.55; }

/* Remove ✕ — circle outline, danger-tinted on hover so destructive intent
   is obvious. Confirmation modal still gates the actual delete. */
.quote-lines .q-line-remove {
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 22px; height: 22px;
    color: var(--text-muted);
    font-size: 14px; line-height: 1;
    padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.quote-lines .q-line-remove:hover {
    color: var(--danger-hover, #b33);
    border-color: var(--danger, #b33);
}

/* Hidden-from-client lines stay visible to the warehouse but render muted
   with an "internal" pill so it's obvious at a glance. The amount column
   shows a dash because hidden lines don't contribute to client totals. */
.quote-lines tr.q-line-hidden td {
    color: var(--text-muted);
    background: var(--bg-muted, rgba(127,127,127,0.05));
}
.q-hidden-badge {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--bg-muted, rgba(127,127,127,0.15));
    color: var(--text-secondary);
    margin-left: 6px;
    vertical-align: middle;
}
.q-hidden-amt { color: var(--text-muted); }
/* Inline qty editor — keep it compact so the row height doesn't change. */
.quote-lines .q-line-qty {
    width: 56px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    text-align: center;
}
.quote-lines .q-line-qty:focus {
    outline: none; border-color: var(--accent);
}
.quote-lines .q-line-rate {
    width: 78px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    text-align: right;
}
.quote-lines .q-line-rate:focus {
    outline: none; border-color: var(--accent);
}
.q-rate-unit {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 2px;
}
.q-rate-revert {
    background: rgba(250, 175, 75, 0.15);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    vertical-align: middle;
}
.q-rate-revert:hover { background: rgba(250, 175, 75, 0.28); }

/* ── Quote status pills (Sent / Accepted) ────────────── */
/* Two states: hollow (not stamped) and filled (stamped + checked).
   Used both as clickable buttons in the editor header AND as display-only
   indicators in the Quotes sidebar list. */
.q-pill-state {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.3px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-secondary);
    cursor: default;
    white-space: nowrap;
    line-height: 1.2;
    /* Tabular for the timestamp suffix in the editor */
    font-variant-numeric: tabular-nums;
}
button.q-pill-state { cursor: pointer; }
button.q-pill-state:hover { border-color: var(--accent); color: var(--accent); }
.q-pill-state.filled {
    background: #2d4a2d;
    color: #b8e0b8;
    border-color: #2d4a2d;
}
button.q-pill-state.filled:hover {
    background: #355c35;
    border-color: #4a7a4a;
}
body.light .q-pill-state.filled {
    background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9;
}
body.light button.q-pill-state.filled:hover {
    background: #c8e6c9;
}
.q-card-pills {
    display: inline-flex; gap: 4px; flex-wrap: wrap;
}
.q-card-pills .q-pill-state { font-size: 9px; padding: 2px 7px; }

/* ── Quote: Bill To / client info section ─────────────── */
.quote-billto {
    border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--bg-primary);
}
.quote-billto .quote-section-label { margin-bottom: 8px; }
.quote-billto-row {
    display: flex; gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.quote-billto-row label {
    flex: 1; min-width: 180px;
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--text-secondary);
}
.quote-billto-row-block {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--text-secondary);
    margin-bottom: 8px;
}
.quote-billto input,
.quote-billto textarea {
    width: 100%; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg-input, var(--bg-primary));
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}
.quote-billto input:focus,
.quote-billto textarea:focus { outline: none; border-color: var(--accent); }
.q-ov-badge {
    display: inline-block;
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--accent-bg, var(--accent));
    color: #fff;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
}
.quote-billto-help {
    font-size: 11px; color: var(--text-muted);
    margin-top: 4px;
    font-style: italic;
}

.quote-extras { margin-bottom: 14px; }
.quote-section-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-secondary); margin-bottom: 6px;
}
.quote-extra-row {
    display: flex; gap: 6px; margin-bottom: 6px;
}
.quote-extra-row .extra-desc { flex: 1; }
.quote-extra-row .extra-amt { width: 110px; }
.quote-extra-row .extra-cost {
    width: 130px;
    background: rgba(192, 132, 252, 0.05);  /* internal-only purple tint */
    border-color: rgba(192, 132, 252, 0.35);
}

/* ── CBA / Margin Analysis panel (inside quote viewer) ─────── */
/* Internal-only profit-margin breakdown. Collapsible so it doesn't
   crowd the editor when admins are focused on client-facing fields.
   Same purple accent as sub-rentals to mark it as "internal". */
.quote-cba-panel {
    margin: 16px 0;
    border: 1px solid var(--border);
    border-left: 3px solid #c084fc;
    border-radius: 4px;
    background: var(--bg-hover);
}
.quote-cba-panel > summary {
    cursor: pointer;
    padding: 10px 12px;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    user-select: none;
}
.quote-cba-panel > summary::-webkit-details-marker { display: none; }
.quote-cba-panel > summary::before {
    content: "▸";
    color: var(--text-muted);
    margin-right: 8px;
    font-size: 11px;
}
.quote-cba-panel[open] > summary::before { content: "▾"; }
.cba-summary-label { font-weight: 600; font-size: 13px; }
.cba-summary-quick { font-size: 13px; }
.cba-body { padding: 0 12px 12px; }
.cba-note { font-size: 11px; color: var(--text-muted); font-style: italic; margin-bottom: 8px; }
.cba-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.cba-table th, .cba-table td {
    padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.cba-table th { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); text-align: left; }
.cba-table td.num, .cba-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cba-table .muted { color: var(--text-muted); }
.cba-table .margin-good { color: #5cd6a8; font-weight: 600; }
.cba-table .margin-bad  { color: #ff8a80; font-weight: 600; }
.cba-table .margin-neutral { color: var(--text-secondary); }
.cba-table tfoot tr { border-top: 1px solid var(--border); }
.cba-table tfoot td { font-weight: 600; }
.cba-table tr.cba-net td { background: rgba(192, 132, 252, 0.08); }

/* ── Reports tab (admin-only) ───────────────────────────────── */
#reports-panel {
    display: none;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: auto;
    padding: 20px 32px;
}
#reports-panel.active { display: flex; }
.reports-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.reports-title { font-size: 22px; margin: 0; }
/* Chrome-style sub-tabs. Tabs sit on a shared baseline that visually
   merges with the panel below — the active tab loses its bottom border
   so it appears to "open" into the section it controls. Trapezoid corner
   radius (top-only) reinforces the metaphor. Inactive tabs stay muted. */
.reports-tab-picker {
    display: flex; gap: 2px;
    border-bottom: 2px solid var(--border);
    margin-top: 4px;
}
.reports-tab-btn {
    padding: 9px 22px;
    border: 1px solid var(--border);
    border-bottom: none;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    bottom: -2px;            /* overlap the baseline border by 2px */
    transition: background 120ms, color 120ms;
}
.reports-tab-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}
.reports-tab-btn.active {
    background: var(--bg-primary);
    color: var(--accent);
    font-weight: 600;
    border-color: var(--border);
    /* Hide the baseline border directly under the active tab. */
    box-shadow: 0 2px 0 0 var(--bg-primary);
}
.reports-section { display: none; }
.reports-section.active { display: block; }
.reports-cba-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 16px;
}
.reports-event-picker { display: flex; flex-direction: column; gap: 4px; }
.reports-event-picker span { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.reports-event-picker select {
    min-width: 360px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
}
.reports-cba-export { display: flex; gap: 8px; }
.btn-export {
    padding: 6px 14px;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: transparent;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
}
.btn-export:hover { background: rgba(250, 175, 75, 0.12); }
.reports-empty, .reports-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-hover);
    border: 1px dashed var(--border);
    border-radius: 4px;
}
.reports-cba-eventmeta {
    font-size: 15px; margin-bottom: 12px;
}
.reports-cba-eventmeta .muted { color: var(--text-muted); }
.reports-cba-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.reports-cba-table th, .reports-cba-table td {
    padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.reports-cba-table th { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); text-align: left; }
.reports-cba-table td.num, .reports-cba-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.reports-cba-table .muted { color: var(--text-muted); }
.reports-cba-table .margin-good { color: #5cd6a8; font-weight: 600; }
.reports-cba-table .margin-bad  { color: #ff8a80; font-weight: 600; }
.reports-cba-table .margin-neutral { color: var(--text-secondary); }
.reports-cba-cathead td {
    background: rgba(192, 132, 252, 0.10);
    font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.reports-cba-subtotal td {
    background: rgba(255, 255, 255, 0.02);
    font-weight: 500; font-style: italic;
}
.reports-cba-table tfoot tr { border-top: 2px solid var(--border); }
.reports-cba-table tfoot td { font-weight: 600; }
.reports-cba-net td { background: rgba(192, 132, 252, 0.12); font-size: 14px; }

/* ── "Show N older events" footers ─────────────────────────── */
/* Events tab list footer */
.events-older-footer {
    margin-top: 16px;
    padding: 16px;
    text-align: center;
    border-top: 1px dashed var(--border);
}
.events-older-footer .events-show-older-btn {
    padding: 8px 18px;
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
.events-older-footer .events-show-older-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.events-older-hint {
    font-size: 11px; color: var(--text-muted); margin-top: 6px; font-style: italic;
}
/* Reports event-pill picker footer button — slots in at the end of
   the pill grid so it lives inline rather than as a separate footer. */
.reports-show-older-btn {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 10px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}
.reports-show-older-btn:hover {
    border-style: solid;
    border-color: var(--accent);
    color: var(--accent);
}

/* ── ATA Carnet export popup ────────────────────────────────── */
/* Anchored inside the edit-event modal next to the action bar.
   Mirrors the visual language of the sub-rentals section (purple
   accent = internal/customs concern). Click outside / Escape / × closes. */
.carnet-popup {
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid #c084fc;
    border-radius: 4px;
    background: var(--bg-hover);
}
.carnet-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.carnet-popup-title { font-weight: 600; font-size: 14px; }
.carnet-popup-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 18px; line-height: 1;
}
.carnet-popup-close:hover { color: var(--text-primary); }
.carnet-summary {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
    font-size: 13px; margin: 8px 0 10px;
}
.carnet-label { color: var(--text-muted); margin-right: 6px; }
.carnet-downloads {
    display: flex; gap: 8px; margin-bottom: 8px;
}
.carnet-hint {
    font-size: 11px; color: var(--text-muted); font-style: italic;
    margin-top: 4px;
}
.carnet-warning {
    background: rgba(255, 200, 0, 0.08);
    border-left: 2px solid #f0a000;
    padding: 6px 10px;
    margin-bottom: 10px;
    font-size: 12px;
    border-radius: 3px;
}
.carnet-warning strong { color: #f0a000; }
.carnet-warning ul { margin: 4px 0 4px 18px; padding: 0; }
.carnet-warning li { margin-bottom: 2px; }
.carnet-warning-foot { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.carnet-ok {
    background: rgba(80, 200, 120, 0.08);
    border-left: 2px solid #5cd6a8;
    padding: 6px 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #5cd6a8;
    border-radius: 3px;
}
.carnet-loading, .carnet-empty {
    padding: 16px; text-align: center; color: var(--text-muted);
    font-size: 13px;
}
/* ── Manifest General List preview table ───────────────────── */
/* Mirrors the PDF/CSV layout so what you see in the Reports tab is
   what you get in the export. Missing fields render with a subdued
   "—" so admins can scan for gaps to fill in. */
.manifest-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    margin-top: 12px;
}
.manifest-table th, .manifest-table td {
    padding: 5px 8px; border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.manifest-table th {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-secondary); text-align: left;
    background: var(--bg-hover);
    border-bottom: 2px solid var(--border);
    position: sticky; top: 0;
}
.manifest-table td.num, .manifest-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.manifest-missing { color: var(--text-muted); font-style: italic; }
.manifest-table .serials-cell {
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: ui-monospace, monospace; font-size: 12px;
}
.manifest-table tfoot tr { border-top: 2px solid var(--border); }
.manifest-total-row td { font-weight: 600; background: rgba(192, 132, 252, 0.10); }
/* ── Reports event pill picker (shared by CBA + Carnet sections) ── */
/* Scrollable grid of clickable event cards. Replaces the old <select>
   so a year of events stays browsable. Search input at the top filters
   by name / client / venue. Selected pill highlights with the orange
   accent + thicker border so it's obvious which event the report is
   currently rendering. */
.reports-event-pillpicker {
    margin: 16px 0;
}
.reports-pillpicker-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.reports-event-search {
    flex: 1;
    max-width: 420px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
}
.reports-event-search:focus { outline: none; border-color: var(--accent); }
/* Sort dropdown sits to the right of the search input. Matches the
   search input's neutral styling so the toolbar reads as one cohesive
   row rather than two competing controls. */
.reports-event-sort {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    min-width: 170px;
}
.reports-event-sort:focus { outline: none; border-color: var(--accent); }
.reports-pill-count {
    font-size: 11px; color: var(--text-muted);
}
.reports-event-pill-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-hover);
}
.reports-event-pill {
    text-align: left;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--text-primary);
    transition: border-color 120ms, background 120ms;
    display: flex; flex-direction: column; gap: 3px;
}
.reports-event-pill:hover {
    border-color: var(--accent);
    background: var(--bg-input);
}
.reports-event-pill.selected {
    border: 2px solid var(--accent);
    background: rgba(250, 175, 75, 0.08);
    padding: 7px 9px;        /* compensate for the extra 1px border */
}
.reports-pill-name {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reports-pill-meta, .reports-pill-date {
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reports-pill-tour-chip {
    display: inline-block;
    font-size: 10px; font-weight: 500;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 10px;
    background: var(--bg-hover);
    border: 1px solid #c084fc;
    color: var(--text-secondary);
    vertical-align: middle;
}
/* Post-selection bar — event meta on the left, download buttons on the
   right. Hidden until an event is picked. Spans the body width so it
   acts as a visual divider between picker and report content. */
.reports-postselect {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
}
.reports-selected-eventmeta { font-size: 14px; }
.reports-selected-eventmeta .muted { color: var(--text-muted); }
.quote-extra-row input {
    padding: 6px 8px; border: 1px solid var(--border);
    border-radius: 4px; background: var(--bg-input);
    color: var(--text-primary); font-size: 13px;
}
.quote-extra-row .extra-remove {
    background: transparent; color: var(--text-dim);
    border: 1px solid var(--border); border-radius: 4px;
    width: 32px; cursor: pointer; font-size: 16px; line-height: 1;
}
.quote-extra-row .extra-remove:hover { color: #e57373; border-color: #e57373; }
#quote-add-extra {
    background: none; color: var(--text-secondary);
    border: 1px dashed var(--border); border-radius: 4px;
    padding: 6px 12px; cursor: pointer; font-size: 12px;
}
#quote-add-extra:hover { color: var(--accent); border-color: var(--accent); }

.quote-controls {
    display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.quote-controls label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-secondary);
}
.quote-controls input {
    width: 110px; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg-input); color: var(--text-primary);
    font-size: 13px; text-transform: none; letter-spacing: normal;
}

.quote-notes-label {
    display: block; margin-bottom: 12px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.quote-notes-label textarea {
    display: block; width: 100%; margin-top: 4px;
    padding: 8px; border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg-input); color: var(--text-primary);
    font-size: 13px; font-family: inherit; resize: vertical;
    text-transform: none; letter-spacing: normal;
}

.quote-totals {
    background: var(--bg-secondary); border-radius: 6px;
    padding: 10px 14px; margin-bottom: 12px;
}
.quote-totals > div {
    display: flex; justify-content: space-between;
    padding: 3px 0; font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}
.quote-totals .quote-total {
    font-weight: 600; font-size: 15px;
    color: var(--text-primary);
    border-top: 1px solid var(--border);
    margin-top: 6px; padding-top: 8px;
}

.quote-actions {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.quote-actions button, .quote-actions .quote-download {
    padding: 7px 14px; border-radius: 4px; cursor: pointer;
    font-size: 13px; border: 1px solid var(--border);
    background: var(--bg-input); color: var(--text-primary);
    text-decoration: none;
}
.quote-actions button:hover, .quote-actions .quote-download:hover {
    background: var(--bg-hover);
}
#quote-save {
    background: var(--accent-bg); color: #fff; border-color: transparent;
}
#quote-save:hover { background: var(--accent); }
.quote-feedback {
    margin-top: 8px; font-size: 12px; min-height: 16px;
}
.quote-feedback.success { color: #6ec06e; }
.quote-feedback.error { color: #e57373; }

/* Mobile: stack the controls and totals so nothing overflows */
@media (max-width: 768px) {
    .quote-controls { flex-direction: column; }
    .quote-controls input { width: 100%; }
    .quote-extra-row { flex-direction: column; }
    .quote-extra-row .extra-amt { width: 100%; }
    .quote-actions { flex-direction: column; align-items: stretch; }
    .quote-actions button, .quote-actions .quote-download { text-align: center; }
}

.pullsheet-viewer-footer {
    font-size: 12px; color: var(--text-secondary);
    padding-top: 8px; border-top: 1px solid var(--border);
    margin-top: 4px;
    display: flex; justify-content: space-between; align-items: center;
}
.pullsheet-viewer-footer a {
    color: var(--accent); text-decoration: none; font-weight: 600;
}
.pullsheet-viewer-footer a:hover { text-decoration: underline; }

/* Packing mode — checked-off items get a strikethrough */
.pullsheet-viewer tr.packed td { opacity: 0.45; text-decoration: line-through; }
.pack-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }

/* Footer right side — holds add button + PDF link side by side */
.pullsheet-viewer-footer-right {
    display: flex; align-items: center; gap: 12px;
}
/* Case View toggle — sits in the footer next to the PDF link. Only
   rendered when at least one case-containing row is on the pull sheet
   (otherwise it'd be a dead control). */
.ps-case-view-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
    cursor: pointer; user-select: none;
}
.ps-case-view-toggle input { margin: 0; accent-color: var(--accent); }
/* Case View row styling. Parent case rows are bold w/ a small chip;
   child rows get a soft background tint + left indent on the model
   column so the hierarchy reads at a glance. */
.ps-case-tag {
    display: inline-block; margin-left: 6px;
    padding: 1px 6px; border-radius: 8px;
    background: var(--bg-hover); color: var(--text-muted);
    font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
    vertical-align: middle;
}
.ps-case-child td { background: var(--bg-secondary, rgba(255,255,255,0.02)); }
.ps-case-indent {
    display: inline-block; width: 18px;
    color: var(--text-muted); margin-right: 4px;
}
body.light .ps-case-child td { background: rgba(0,0,0,0.025); }
/* Pack Sheets — Case View applied to the main checklist table. Parent
   case rows get a left-border accent + small CASE chip; child rows
   (single-unit or grouped) get a slight indent on the model column and
   a soft background tint so the hierarchy reads at a glance. */
#ps-checklist tr.ps-case-parent td:nth-child(3) {
    position: relative; padding-left: 14px;
}
#ps-checklist tr.ps-case-parent td:nth-child(3)::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--accent);
}
#ps-checklist tr.ps-case-child td:nth-child(3),
#ps-checklist tr.ps-case-child-group td:nth-child(3) {
    padding-left: 28px;
    position: relative;
}
#ps-checklist tr.ps-case-child td:nth-child(3)::before,
#ps-checklist tr.ps-case-child-group td:nth-child(3)::before {
    content: "↳"; position: absolute; left: 10px;
    color: var(--text-muted); font-size: 12px;
}
#ps-checklist tr.ps-case-child td,
#ps-checklist tr.ps-case-child-group td {
    background: var(--bg-secondary, rgba(255,255,255,0.02));
}
body.light #ps-checklist tr.ps-case-child td,
body.light #ps-checklist tr.ps-case-child-group td {
    background: rgba(0,0,0,0.025);
}
/* Last child of a case group — visual break so the next group doesn't
   read as more case contents. Heavier bottom border + bottom padding
   creates a clear "end of case" signal even when the next group is
   another case (which would otherwise butt right against it). */
#ps-checklist tr.ps-case-last-child td {
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
}
#ps-checklist tr.ps-case-last-child + tr {
    /* Spacer above the next group so the boundary breathes */
}
#ps-checklist tr.ps-case-last-child + tr td {
    padding-top: 12px;
}

/* Remove button on pull sheet rows */
.ps-remove-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 16px; line-height: 1;
    padding: 2px 6px; border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.ps-remove-btn:hover { color: var(--danger-hover); background: rgba(220, 38, 38, 0.1); }

/* "Add Items" toggle button in the pull sheet footer */
.ps-add-items-btn {
    background: none; border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-secondary); cursor: pointer;
    font-size: 12px; padding: 3px 10px;
    transition: color 0.15s, border-color 0.15s;
}
.ps-add-items-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Add items search section (below pull sheet table) */
.ps-add-section {
    margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px;
}
.ps-add-search {
    width: 100%; padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px; margin-bottom: 8px;
}
.ps-add-search:focus { outline: none; border-color: var(--accent); }
.ps-add-results {
    max-height: 160px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 6px;
}
.ps-add-results:empty { display: none; }
.ps-add-result-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--text-primary);
}
.ps-add-result-item:last-child { border-bottom: none; }
.ps-add-info { flex: 1; }
.ps-add-model { font-weight: 600; }
.ps-add-detail { font-size: 12px; color: var(--text-secondary); margin-left: 6px; }
.ps-add-btn {
    padding: 4px 12px; border: 1px solid var(--accent); border-radius: 4px;
    background: none; color: var(--accent); cursor: pointer;
    font-size: 12px; white-space: nowrap;
}
.ps-add-btn:hover { background: var(--accent-bg); color: #fff; }
.ps-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ps-add-empty {
    color: var(--text-muted); font-size: 12px; padding: 10px;
    text-align: center;
}

/* Save/cancel row */
.edit-event-actions {
    display: flex; gap: 8px; justify-content: center; margin-top: 16px;
}

/* ── Events toolbar ──────────────────────────────────── */
.events-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 20px; border-bottom: 1px solid var(--border);
}
.events-status-tabs {
    display: flex; gap: 4px; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.events-status-tabs button {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 20px;
    background: none; color: var(--text-secondary); cursor: pointer;
    font-size: 13px; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.events-status-tabs button:hover { color: var(--text-primary); }
.events-status-tabs button.active {
    background: var(--accent-bg); color: #fff; border-color: var(--accent-bg);
}
.events-type-filter {
    padding: 5px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 13px; cursor: pointer;
}
.events-type-filter:focus { outline: none; border-color: var(--accent); }
.events-view-toggle {
    display: flex; border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden; margin-left: auto;
}
.events-view-toggle button {
    padding: 5px 12px; border: none; background: none;
    color: var(--text-secondary); cursor: pointer; font-size: 13px;
    border-right: 1px solid var(--border); transition: background 0.15s, color 0.15s;
}
.events-view-toggle button:last-child { border-right: none; }
.events-view-toggle button:hover { color: var(--text-primary); }
/* Sort dropdown in the events toolbar. Matches the view-toggle height
   so the toolbar reads as one cohesive row. Hidden in Month/Week views
   by JS since those use calendar position rather than a configurable sort. */
.events-sort {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    min-width: 150px;
}
.events-sort:focus { outline: none; border-color: var(--accent); }

/* Continuous-tour toggle, mounted in the events toolbar next to the
   List/Month/Week buttons. Visible only in Month/Week views (JS toggles
   display: none in list mode). Compact label + slider so the toolbar
   doesn't get crowded. */
.cal-tour-mode-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}
.cal-tour-mode-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
.cal-tour-mode-toggle input { display: none; }
/* Slider + knob: use ::after for the knob to match the project-wide
   toggle convention (see global .toggle-slider rule). Overriding the
   global sizes here for a more compact toolbar fit. */
.cal-tour-mode-toggle .toggle-slider {
    width: 28px; height: 14px; min-width: 28px;
    border-radius: 999px;
    background: var(--toggle-off, #555);
    position: relative; transition: background 0.15s;
}
.cal-tour-mode-toggle .toggle-slider::after {
    content: "";
    position: absolute;
    width: 10px; height: 10px;
    left: 2px; top: 2px;
    border-radius: 50%;
    background: var(--toggle-knob, #ddd);
    transition: left 0.15s, background 0.15s;
}
.cal-tour-mode-toggle input:checked + .toggle-slider {
    background: var(--accent);
}
.cal-tour-mode-toggle input:checked + .toggle-slider::after {
    left: 16px; background: #fff;
}
.cal-tour-mode-label { white-space: nowrap; }

/* ── @-mention support ─────────────────────────────────────── */
/* Inline mention chip inside chat messages — colored pill so the
   @user reads as a clickable token even in dense conversation. */
.chat-mention {
    display: inline-block;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(58, 123, 213, 0.18);
    color: #6ab4f0;
    font-weight: 600;
}
body.light .chat-mention {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

/* Mention toast — warmer accent + slightly larger so it pops over the
   neutral chat-message toast. */
.toast.toast-mention {
    border-left: 3px solid var(--accent);
    background: linear-gradient(0deg, var(--bg-input), var(--bg-input)),
                linear-gradient(0deg, rgba(58, 123, 213, 0.08), rgba(58, 123, 213, 0.08));
}
.toast.toast-mention .toast-icon { color: var(--accent); }
.toast.toast-mention .toast-title { font-weight: 600; }

/* Autocomplete popup that floats above the composer when typing @. */
.mention-popup {
    position: fixed;
    z-index: 9999;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    min-width: 220px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}
.mention-popup-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.mention-popup-row:hover,
.mention-popup-row.selected {
    background: var(--accent);
    color: #fff;
}
.mention-popup-handle {
    font-weight: 600;
    color: var(--text-primary);
}
.mention-popup-row.selected .mention-popup-handle,
.mention-popup-row:hover .mention-popup-handle { color: #fff; }
.mention-popup-name { color: var(--text-muted); font-size: 12px; }
.mention-popup-row.selected .mention-popup-name,
.mention-popup-row:hover .mention-popup-name { color: rgba(255, 255, 255, 0.85); }

/* ── Per-show additions (tour master pull sheet) ───────────── */
.per-show-additions {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid #c084fc;
    border-radius: 4px;
    background: var(--bg-hover);
}
.per-show-additions-header {
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.per-show-additions-hint {
    font-size: 11px; color: var(--text-muted);
    font-style: italic; margin: 2px 0 10px;
}
.per-show-stop-block {
    padding: 8px 0;
    border-top: 1px solid var(--border);
}
.per-show-stop-block:first-of-type { border-top: none; padding-top: 4px; }
.per-show-stop-header {
    display: flex; gap: 8px; align-items: baseline;
    font-size: 12px; margin-bottom: 4px;
}
.per-show-stop-date {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}
.per-show-stop-venue {
    flex: 1; font-weight: 500; color: var(--text-primary);
}
.per-show-stop-count {
    font-size: 10px; color: var(--text-muted);
    background: var(--bg-input);
    padding: 1px 8px; border-radius: 8px;
}
.per-show-stop-items {
    list-style: none; padding: 0; margin: 0;
    font-size: 12px; color: var(--text-primary);
}
.per-show-stop-items li {
    padding: 2px 0 2px 16px;
    position: relative;
}
.per-show-stop-items li::before {
    content: "•";
    position: absolute; left: 4px;
    color: var(--text-muted);
}

/* Renamed child-stop pull-sheet button: "Per-show additions". The
   purple accent matches the tour color language used elsewhere. */
.btn-stop-additions {
    background: rgba(192, 132, 252, 0.10);
    border-color: #c084fc;
}
.btn-stop-additions:hover {
    background: rgba(192, 132, 252, 0.20);
}

/* ── Tour-child quote banner ──────────────────────────────── */
/* Sits at the top of the inline quote viewer when the event is a tour
   stop. Explains that this quote rolls up into the master and shouldn't
   be sent / marked independently. */
.quote-tour-child-banner {
    padding: 10px 14px;
    margin-bottom: 12px;
    border-left: 3px solid #c084fc;
    background: rgba(192, 132, 252, 0.08);
    color: var(--text-secondary);
    font-size: 12px;
    border-radius: 4px;
}
.quote-tour-child-banner strong { color: var(--text-primary); }

/* ── Per-show additions section on master's quote viewer ─── */
.quote-per-show {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid #c084fc;
    border-radius: 4px;
    background: var(--bg-hover);
}
.quote-per-show-hint {
    font-size: 11px; color: var(--text-muted);
    font-style: italic; margin: 4px 0 10px;
}
.quote-per-show .per-show-stop {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.quote-per-show .per-show-stop:first-of-type {
    border-top: none; padding-top: 0;
}
.quote-per-show .per-show-stop-header {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; font-weight: 600;
    margin-bottom: 6px;
}
.quote-per-show .per-show-stop-subtotal {
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
.per-show-stop-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.per-show-stop-table th, .per-show-stop-table td {
    padding: 3px 6px; border-bottom: 1px solid var(--border);
}
.per-show-stop-table th {
    text-align: left; font-weight: 500;
    color: var(--text-secondary); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.per-show-stop-table td.qty,
.per-show-stop-table td.days,
.per-show-stop-table th.qty,
.per-show-stop-table th.days { text-align: center; width: 50px; }
.per-show-stop-table td.rate,
.per-show-stop-table th.rate { text-align: right; width: 110px; }
.per-show-stop-table td.amt,
.per-show-stop-table th.amt {
    text-align: right; width: 90px;
    font-variant-numeric: tabular-nums;
}
.per-show-stop-empty-row td {
    color: var(--text-muted, #888);
    font-style: italic;
    padding: 8px 6px !important;
}
/* "+ Add to this stop" row sits flush under each stop's table.
   Popover mirrors the main quote add-item popover (.q-add-popover)
   but inset under the table so the user sees the table they're
   adding to. */
.per-show-add-row {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 4px; margin-bottom: 4px;
}
.per-show-add-btn {
    align-self: flex-start;
    padding: 4px 10px; font-size: 12px; border-radius: 6px;
    border: 1px dashed var(--border); background: transparent;
    color: var(--accent); cursor: pointer;
}
.per-show-add-btn:hover {
    background: var(--bg-hover); border-style: solid;
}
.per-show-add-popover {
    padding: 8px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-secondary, #fafafa);
}
.per-show-add-popover[hidden] { display: none; }
.per-show-add-search {
    width: 100%; padding: 6px 8px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg-primary, #fff); color: var(--text-primary);
}
.per-show-add-results {
    margin-top: 6px; max-height: 220px; overflow-y: auto;
}
.events-view-toggle button.active {
    background: var(--accent-bg); color: #fff;
}
.events-new-btn {
    padding: 5px 14px; border: none; border-radius: 6px;
    background: var(--accent-bg); color: #fff; cursor: pointer;
    font-size: 13px; white-space: nowrap;
}
.events-new-btn:hover { background: var(--accent); }

/* ── Calendar navigation ─────────────────────────────── */
.cal-nav {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px; border-bottom: 1px solid var(--border);
}
.cal-nav button {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: none; color: var(--text-primary); cursor: pointer;
    font-size: 14px;
}
.cal-nav button:hover { background: var(--bg-hover); }
.cal-nav span {
    font-size: 16px; font-weight: 600; min-width: 160px; text-align: center;
}
/* Calendar-icon jump button — keep it square & compact next to the title. */
#cal-jump-btn {
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
}

/* ── Calendar month view ─────────────────────────────── */
#cal-month-view {
    flex: 1; overflow-y: auto; padding: 0 20px 20px;
}
.cal-grid {
    display: grid;
    /* minmax(0, 1fr) lets cells shrink below their content's min-content
       width — otherwise a long nowrap event-pill name forces its column
       wider than 1/7th and pushes Fri/Sat past the viewport. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px; background: var(--border); border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden;
}
.cal-header-cell {
    background: var(--bg-header); padding: 6px;
    text-align: center; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase;
}
.cal-day {
    background: var(--bg-primary); min-height: 80px; padding: 4px 6px;
    cursor: pointer; transition: background 0.1s;
}
.cal-day:hover { background: var(--bg-hover); }
.cal-day.other-month { opacity: 0.35; }
.cal-day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-day-number {
    font-size: 12px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 2px;
}
.cal-event-pill {
    display: block; padding: 1px 4px; margin-bottom: 2px;
    border-radius: 3px; font-size: 10px; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer;
}
/* Event pill colors by type — reuse existing event-type-badge palette */
.cal-event-pill.gig { background: #1a2a3a; color: #60a5fa; }
.cal-event-pill.sight_effects { background: #2a1a3a; color: #c084fc; }
.cal-event-pill.theater_rental { background: #3a2a1a; color: #fb923c; }
.cal-event-pill.tour_rental { background: #1a3a2a; color: #4ade80; }
.cal-event-pill.dry_rental { background: #3a3a1a; color: #facc15; }
body.light .cal-event-pill.gig { background: #dbeafe; color: #1d4ed8; }
body.light .cal-event-pill.sight_effects { background: #f3e8ff; color: #7c3aed; }
body.light .cal-event-pill.theater_rental { background: #ffedd5; color: #c2410c; }
body.light .cal-event-pill.tour_rental { background: #dcfce7; color: #166534; }
body.light .cal-event-pill.dry_rental { background: #fef9c3; color: #854d0e; }
.cal-event-pill.cancelled { opacity: 0.4; text-decoration: line-through; }
/* Tour-child pills get a small purple "Tour" chip prefix + a left accent
   bar so multi-tour calendars stay readable. The tour-master event
   itself is hidden from the calendar (see renderCalendarMonth), so the
   chip serves as the only visual signal that this is part of a tour. */
.cal-event-pill.tour-child {
    border-left: 2px solid #c084fc;
    padding-left: 3px;
}
.cal-tour-chip {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 0 4px;
    margin-right: 3px;
    border-radius: 6px;
    background: rgba(192, 132, 252, 0.18);
    color: #c084fc;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
body.light .cal-tour-chip { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
/* Same treatment on the week view's larger event cards. */
.cal-week-event.tour-child {
    border-left: 3px solid #c084fc;
    padding-left: 5px;
}
/* Continuous-mode tour bar. Each day in the master's window renders a
   `.cal-event-pill.tour-span` segment INSIDE its day cell, but with
   negative horizontal margins that pull the pill past the cell's
   padding AND into the 1px grid gap so adjacent segments visually
   TOUCH — Google Calendar style. position: relative + z-index lifts
   the pill above the neighbor cell's background so the crossing-pixel
   doesn't get clipped. Border-radius is only applied at actual span
   endpoints OR at calendar-row boundaries (Sunday / Saturday) so a
   multi-week tour wraps as separate row segments with clean rounded
   ends per row. */
.cal-event-pill.tour-span {
    position: relative;
    z-index: 2;
    margin: 0 -7px;        /* eats 6px cell padding + 1px grid gap */
    padding: 1px 8px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    font-weight: 500;
}
.cal-event-pill.tour-span.cal-span-round-left {
    margin-left: 0;
    padding-left: 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-left: 2px solid #c084fc;
}
.cal-event-pill.tour-span.cal-span-round-right {
    margin-right: 0;
    padding-right: 6px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-right: 2px solid #c084fc;
}
.cal-event-pill.tour-span:hover { filter: brightness(1.15); }

/* Week-view version — wider cells, taller pill, slightly bolder caps. */
.cal-week-event.tour-span {
    position: relative;
    z-index: 2;
    margin: 0 -10px;       /* week cells have more horizontal padding */
    padding: 4px 10px;
    border-radius: 0;
    border-left: none; border-right: none;
}
.cal-week-event.tour-span.cal-span-round-left {
    margin-left: 0; padding-left: 8px;
    border-top-left-radius: 6px; border-bottom-left-radius: 6px;
    border-left: 3px solid #c084fc;
}
.cal-week-event.tour-span.cal-span-round-right {
    margin-right: 0; padding-right: 8px;
    border-top-right-radius: 6px; border-bottom-right-radius: 6px;
    border-right: 3px solid #c084fc;
}

/* Off-day pills: visually part of the tour (same purple accent + Tour
   chip) but softer so they don't compete with actual shows. Italic +
   reduced opacity + dashed left border tells you "gear's still on the
   road, no show today". Clickable — opens the master modal. */
.cal-event-pill.tour-offday,
.cal-week-event.tour-offday {
    opacity: 0.55;
    font-style: italic;
    border-left-style: dashed;
}
.cal-event-pill.tour-offday:hover,
.cal-week-event.tour-offday:hover {
    opacity: 0.85;
}
.tour-offday-label {
    font-style: italic;
    color: var(--text-muted) !important;
    font-size: 10px !important;
}
.cal-more-link {
    font-size: 10px; color: var(--accent); cursor: pointer;
    padding: 0 4px;
}

/* ── Calendar week view ──────────────────────────────── */
#cal-week-view {
    flex: 1; overflow-y: auto; padding: 0 20px 20px;
}
.cal-week-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 1px; background: var(--border); border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden;
}
.cal-week-day {
    background: var(--bg-primary); min-height: 200px; padding: 6px;
}
.cal-week-day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-week-day-header {
    text-align: center; margin-bottom: 6px;
}
.cal-week-day-header .day-name {
    font-size: 11px; text-transform: uppercase; color: var(--text-secondary);
}
.cal-week-day-header .day-num {
    font-size: 20px; font-weight: 700; color: var(--text-primary);
}
.cal-week-event {
    padding: 6px 8px; margin-bottom: 4px;
    border-radius: 6px; background: var(--bg-header);
    border-left: 3px solid var(--accent);
    cursor: pointer; font-size: 12px;
    transition: border-color 0.15s;
}
.cal-week-event:hover { border-color: var(--accent); }
/* Week event left border colors by type */
.cal-week-event.gig { border-left-color: #60a5fa; }
.cal-week-event.sight_effects { border-left-color: #c084fc; }
.cal-week-event.theater_rental { border-left-color: #fb923c; }
.cal-week-event.tour_rental { border-left-color: #4ade80; }
.cal-week-event.dry_rental { border-left-color: #facc15; }
.cal-week-event.cancelled { opacity: 0.4; text-decoration: line-through; }
.cal-week-event-name {
    font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-week-event-time {
    font-size: 11px; color: var(--text-secondary); margin-top: 2px;
}

/* ── Quick status select on event cards ──────────────── */
.event-status-select {
    padding: 2px 6px; border-radius: 10px; font-size: 11px;
    font-weight: 600; border: none; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 6px center;
    padding-right: 18px;
}
/* Status select colors — mirrors status-badge */
.event-status-select.quoting { background: #1a2a3a; color: #60a5fa; }
.event-status-select.confirmed { background: #1a3a2a; color: #4ade80; }
.event-status-select.in_progress { background: #3a2e1a; color: #fbbf24; }
/* 'returning' sits between in_progress and completed — items are physically
   coming back but not all unpacked yet. Teal so it reads as "in transit,
   nearly home" and is visually distinct from the amber in_progress chip. */
.event-status-select.returning { background: #133a3a; color: #5eead4; }
.event-status-select.completed { background: #2a2a3a; color: #a78bfa; }
.event-status-select.cancelled { background: #3a2a2a; color: #f87171; }
body.light .event-status-select.quoting { background: #dbeafe; color: #1d4ed8; }
body.light .event-status-select.confirmed { background: #dcfce7; color: #166534; }
body.light .event-status-select.in_progress { background: #fef3c7; color: #92400e; }
body.light .event-status-select.returning { background: #ccfbf1; color: #115e59; }
body.light .event-status-select.completed { background: #ede9fe; color: #5b21b6; }
body.light .event-status-select.cancelled { background: #fecaca; color: #991b1b; }

/* ── Clients panel ─────────────────────────────────────── */
#clients-panel {
    display: none; flex-direction: column;
    height: 100vh; height: 100dvh;
    overflow: hidden;
}
#clients-panel.active { display: flex; }
#clients-panel header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
}
#clients-panel header h1 { font-size: 20px; }
#clients-count {
    font-size: 13px; color: var(--text-secondary); font-weight: 400;
}

.clients-toolbar {
    display: flex; gap: 10px; padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}
.clients-toolbar input {
    flex: 1; padding: 8px 12px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px;
}
.clients-toolbar input:focus { outline: none; border-color: var(--accent); }
.clients-toolbar button {
    padding: 8px 16px; border: none; border-radius: 6px;
    background: var(--accent-bg); color: #fff; cursor: pointer;
    font-size: 13px; white-space: nowrap;
}
.clients-toolbar button:hover { background: var(--accent); }

.clients-list {
    flex: 1; overflow-y: auto; padding: 16px 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.clients-empty {
    color: var(--text-secondary); font-size: 14px;
    text-align: center; padding: 40px 20px;
}

.client-card {
    padding: 14px 16px;
    background: var(--bg-header);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.client-card:hover { border-color: var(--accent); }
.client-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4px;
}
.client-card-name { font-weight: 600; color: var(--text-primary); }
.client-card-company {
    font-size: 12px; color: var(--text-secondary);
    margin-top: 2px; font-style: italic;
}
.client-card-detail {
    font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.client-card-detail span { margin-right: 12px; }

.client-delete-btn {
    background: none; border: none; cursor: pointer;
    font-size: 16px; line-height: 1; padding: 2px 6px;
    color: var(--text-muted); opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    border-radius: 4px;
}
.client-card:hover .client-delete-btn,
.client-delete-btn:focus { opacity: 1; }
.client-delete-btn:hover {
    color: var(--danger);
    background: rgba(248, 113, 113, 0.1);
}

/* Edit/Add client modal */
.edit-client-modal .modal-box {
    max-width: 480px; width: 94%;
    text-align: left;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.edit-client-modal .modal-box h2 { text-align: center; }

.edit-client-form label {
    display: block; font-size: 13px; color: var(--text-secondary);
    margin-bottom: 4px; margin-top: 12px;
}
.edit-client-form input,
.edit-client-form textarea {
    width: 100%; padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px;
}
.edit-client-form input:focus,
.edit-client-form textarea:focus {
    outline: none; border-color: var(--accent);
}
.edit-client-form textarea { min-height: 60px; resize: vertical; font-family: inherit; }
.edit-client-error {
    color: var(--danger-hover); font-size: 13px;
    min-height: 18px; margin-top: 8px;
}

/* ── Pack Sheets panel ─────────────────────────────────── */
#packsheets-panel {
    display: none; flex-direction: row;
    height: 100vh; height: 100dvh;
    overflow: hidden;
}
#packsheets-panel.active { display: flex; }

/* Sidebar listing events with gear to pack */
#ps-sidebar {
    width: 220px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    flex-shrink: 0;
}
#ps-sidebar-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
#ps-sidebar-header h2 {
    font-size: 14px; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px;
}
#ps-event-list {
    list-style: none; flex: 1; overflow-y: auto; padding: 8px 0;
}
#ps-event-list li {
    padding: 10px 16px; cursor: pointer; font-size: 13px;
    color: var(--text-secondary);
    border-left: 3px solid transparent;
}
#ps-event-list li:hover { background: var(--bg-hover); color: var(--text-primary); }
#ps-event-list li.active {
    background: var(--bg-hover); color: var(--text-primary);
    border-left-color: var(--accent);
}
.ps-event-name {
    font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-event-meta {
    font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.ps-event-progress {
    font-size: 11px; color: var(--accent); margin-top: 2px;
}
#ps-sidebar-empty {
    padding: 24px 16px; text-align: center;
    color: var(--text-muted); font-size: 13px;
}
/* Overlay behind pack sheets sidebar on mobile */
#ps-sidebar-overlay {
    display: none;
}
#ps-sidebar-overlay.active {
    display: block;
    position: fixed; inset: 0; z-index: 19;
    background: rgba(0,0,0,0.4);
}

/* Main area: header, progress, checklist, chat */
#ps-main {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0;   /* prevents flex overflow */
}
#ps-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
}
#ps-header h1 { font-size: 18px; flex: 1; }
#ps-event-link {
    font-size: 13px; color: var(--accent); text-decoration: none;
    cursor: pointer; white-space: nowrap;
}
#ps-event-link:hover { text-decoration: underline; }
#ps-pdf-btn {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: none; color: var(--text-primary); cursor: pointer;
    font-size: 12px; white-space: nowrap;
}
#ps-pdf-btn:hover { border-color: var(--accent); color: var(--accent); }

/* QuickBooks linkage badge on client cards */
.qbo-badge {
    display: inline-block; margin-left: 8px;
    padding: 1px 7px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.4px; border-radius: 10px;
    line-height: 1.5;
    cursor: default;
    white-space: nowrap;
}
.qbo-badge.linked {
    background: rgba(60, 180, 90, 0.18);
    color: #6ec06e;
    border: 1px solid rgba(60, 180, 90, 0.4);
}
.qbo-badge.unlinked {
    background: none;
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    cursor: pointer;
}
.qbo-badge.unlinked:hover {
    border-color: var(--accent); color: var(--accent);
}

/* Import-from-QuickBooks button in the clients toolbar */
#qbo-import-btn {
    background: none; color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 12px; font-size: 13px; cursor: pointer;
    white-space: nowrap;
}
#qbo-import-btn:hover { border-color: var(--accent); color: var(--accent); }
#qbo-import-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Crew tab — sidebar + main pane layout */
#crew-panel {
    display: none; /* shown by tab switch */
    height: 100%;
}
#crew-panel.active { display: flex; }
#crew-sidebar {
    width: 260px; flex: 0 0 260px;
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden;
}
#crew-sidebar header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
#crew-sidebar header h2 { font-size: 18px; }
.crew-sidebar-toolbar {
    display: flex; gap: 6px; padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.crew-sidebar-toolbar input {
    /* min-width: 0 so the input can shrink past its content-implied
       width — without this, the search field refuses to give up space
       and the "+ Add Person" button gets clipped at the right edge. */
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 10px; font-size: 13px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
}
.crew-sidebar-toolbar button {
    flex: 0 0 auto;     /* never shrink — guarantees full text fits */
    background: none; border: 1px solid var(--border); border-radius: 4px;
    padding: 4px 10px; font-size: 12px;
    color: var(--text-primary); cursor: pointer;
    white-space: nowrap;
}
.crew-sidebar-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.crew-people-list {
    list-style: none; margin: 0; padding: 0;
    overflow-y: auto; flex: 1;
}
.crew-people-list li {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
}
.crew-people-list li:hover { background: var(--bg-hover, rgba(127,127,127,0.06)); }
.crew-people-list li.active { background: var(--bg-hover, rgba(127,127,127,0.12)); }
.crew-people-list .crew-li-name {
    font-size: 14px; font-weight: 500; color: var(--text-primary);
    display: flex; align-items: center; gap: 6px;
}
.crew-people-list .crew-li-email {
    font-size: 11px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crew-li-kind {
    font-size: 9px; font-weight: 600; padding: 1px 5px;
    border-radius: 8px; text-transform: uppercase; letter-spacing: 0.4px;
}
.crew-li-kind.user { background: rgba(60,180,90,0.18); color: #6ec06e; }
.crew-li-kind.crew_member { background: rgba(230,200,100,0.15); color: #cb9; }

#crew-main {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}
.crew-tab-empty {
    color: var(--text-secondary);
    font-style: italic;
    padding: 24px;
}
#crew-profile {
    max-width: 720px;
}
.crew-profile-header {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 4px;
}
.crew-profile-header h2 { font-size: 22px; margin: 0; }
.crew-profile-meta {
    color: var(--text-secondary); font-size: 13px;
    margin-bottom: 18px;
}
.crew-profile-form {
    display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px;
    margin-bottom: 24px;
    padding: 14px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-secondary, rgba(127,127,127,0.04));
}
.crew-profile-form label {
    font-size: 12px; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.4px;
    display: flex; align-items: center;
}
.crew-profile-form input,
.crew-profile-form textarea {
    padding: 6px 10px; font-size: 13px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: inherit; resize: vertical;
}
.crew-profile-form input:read-only,
.crew-profile-form textarea:read-only {
    opacity: 0.7; background: var(--bg-secondary, rgba(127,127,127,0.04));
}
.crew-profile-actions {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 6px;
}
.crew-profile-actions button {
    padding: 5px 14px; font-size: 13px; border-radius: 6px;
    border: 1px solid var(--border); background: none;
    color: var(--text-primary); cursor: pointer;
}
.crew-profile-actions .crew-save-btn {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.crew-profile-actions .crew-delete-btn { color: #d88; border-color: #d88; }

/* Account actions disclosure on the user profile */
.crew-account-actions {
    margin: 24px 0;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 0;
    max-width: 720px;
}
.crew-account-actions summary {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    list-style: none;
}
.crew-account-actions summary::-webkit-details-marker { display: none; }
.crew-account-actions[open] summary { border-bottom: 1px solid var(--border); }
.crew-account-actions summary:hover { color: var(--text-primary); }
.crew-account-grid {
    display: grid; grid-template-columns: 110px 1fr;
    gap: 10px 14px;
    padding: 14px 16px;
    align-items: center;
}
.crew-account-grid label {
    font-size: 12px; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.crew-account-grid select,
.crew-account-grid button {
    padding: 5px 12px; font-size: 13px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
    cursor: pointer; font-family: inherit;
}
.crew-account-grid select:disabled,
.crew-account-grid button:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.crew-account-pw-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.crew-pw-result {
    font-family: monospace; font-size: 12px;
    color: var(--accent);
    padding: 3px 8px;
    background: rgba(127,127,127,0.08);
    border-radius: 4px;
    display: none;
}
.crew-pw-result.show { display: inline; }
.crew-delete-user-btn {
    color: #d88; border-color: #d88 !important;
}
.crew-delete-user-btn:hover { background: rgba(229,115,115,0.08); }

.crew-assignments-section h3 {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-secondary);
    margin-bottom: 8px;
}
.crew-assignment-row {
    display: grid;
    grid-template-columns: 90px 1fr 110px 80px auto;
    gap: 12px; align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg);
    margin-bottom: 4px;
    font-size: 13px;
}
.crew-assignment-row .a-date { color: var(--text-secondary); font-size: 12px; }
.crew-assignment-row .a-name { color: var(--text-primary); font-weight: 500; }
.crew-assignment-row .a-venue { color: var(--text-secondary); font-size: 11px; }
.crew-assignment-row .a-role {
    font-weight: 500;
    background: var(--bg-hover, rgba(127,127,127,0.1));
    padding: 2px 8px; border-radius: 10px;
    font-size: 12px;
    text-align: center;
}
.crew-assignment-row .a-rate {
    text-align: right; font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* Crew View calendar */
#crewcal-panel {
    display: none;
    flex-direction: column;
    height: 100%;
}
#crewcal-panel.active { display: flex; }
#crewcal-header {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
}
#crewcal-header h1 { font-size: 18px; flex: 0 0 auto; }
#crewcal-role-filter {
    padding: 5px 10px; font-size: 13px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
    cursor: pointer;
}
.crewcal-spacer { flex: 1; }
.crewcal-range-label {
    font-size: 12px; color: var(--text-secondary);
}
.crewcal-body {
    overflow-y: auto;
    padding: 16px 24px;
    flex: 1;
}
.crewcal-day-group {
    margin-bottom: 18px;
}
.crewcal-day-header {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-secondary); margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.crewcal-event {
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg);
    padding: 10px 14px;
    margin-bottom: 6px;
    cursor: pointer;
}
.crewcal-event:hover { border-color: var(--accent); }
.crewcal-event-line1 {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.crewcal-event-name { font-weight: 600; color: var(--text-primary); }
.crewcal-event-venue { font-size: 12px; color: var(--text-secondary); }
.crewcal-crew-pills {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 4px;
}
.crewcal-crew-pill {
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    background: var(--bg-hover, rgba(127,127,127,0.08));
    color: var(--text-primary);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.crewcal-crew-pill.conflict {
    background: rgba(229,115,115,0.15);
    border-color: rgba(229,115,115,0.4);
    color: #d88;
}
.crewcal-crew-pill .role-tag {
    color: var(--text-secondary); font-size: 10px; margin-left: 4px;
}
.crewcal-empty {
    color: var(--text-secondary); font-style: italic;
    padding: 24px; text-align: center;
}

/* Add Person modal */
.add-person-box { max-width: 460px !important; text-align: left; }
.add-person-help {
    font-size: 12px; color: var(--text-secondary);
    margin-bottom: 12px;
}
.add-person-field {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 10px;
}
.add-person-field > span {
    font-size: 11px; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.add-person-field input,
.add-person-field select {
    padding: 6px 10px; font-size: 13px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: inherit;
}
.add-person-radio-row {
    display: flex; gap: 14px;
    padding: 4px 0;
}
.add-person-radio-row label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-primary);
    text-transform: none; letter-spacing: 0;
    cursor: pointer;
}
.add-person-divider {
    border: 0; border-top: 1px solid var(--border);
    margin: 14px 0;
}
.add-person-checkbox {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
}
.add-person-access-fields {
    background: var(--bg-secondary, rgba(127,127,127,0.04));
    border: 1px solid var(--border); border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
}
.add-person-error {
    color: #e57373; font-size: 12px; margin-bottom: 8px; min-height: 16px;
}
.add-person-req { color: #e57373; font-style: normal; }
.add-person-req-hint {
    color: var(--text-muted); font-style: normal;
    font-size: 10px; text-transform: none; letter-spacing: 0;
}

/* Multi-role pill picker — clickable role chips, toggled state */
.role-pill-picker {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 4px 0;
}
.role-pill-picker .role-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg);
    border: 1px solid var(--border); border-radius: 14px;
    padding: 4px 12px; font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: opacity 0.1s, border-color 0.1s, background 0.1s;
}
.role-pill-picker .role-pill:hover {
    border-color: var(--accent); color: var(--text-primary);
}
.role-pill-picker .role-pill.selected {
    background: var(--accent); color: #fff;
    border-color: var(--accent);
}
.role-pill-picker .role-pill .role-pill-primary {
    font-size: 9px; font-weight: 700;
    background: rgba(255,255,255,0.25);
    padding: 0 4px; border-radius: 6px;
    margin-left: 2px;
}

/* Crew Roles management in Settings */
.crew-roles-list {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 10px;
}
.crew-role-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg);
    font-size: 13px;
}
.crew-role-row .crew-role-name {
    flex: 1;
    background: none; border: 1px solid transparent; border-radius: 4px;
    padding: 4px 6px; font-size: 13px;
    color: var(--text-primary);
}
.crew-role-row .crew-role-name:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-secondary, rgba(127,127,127,0.04));
}
.crew-role-row .crew-role-delete {
    background: none; border: 1px solid var(--border); border-radius: 50%;
    width: 22px; height: 22px; padding: 0;
    color: var(--text-muted); cursor: pointer;
    font-size: 14px; line-height: 1;
}
.crew-role-row .crew-role-delete:hover {
    color: #d88; border-color: #d88;
}
.crew-role-add-row {
    display: flex; gap: 8px; align-items: center;
}
.crew-role-add-row input {
    flex: 1;
    padding: 6px 10px; font-size: 13px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
}
.crew-role-add-row button {
    background: none; border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 14px; font-size: 13px;
    color: var(--text-primary); cursor: pointer;
}
.crew-role-add-row button:hover { border-color: var(--accent); color: var(--accent); }

/* Crew section in the event edit modal */
.crew-section {
    margin: 16px 0; padding: 12px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-secondary, rgba(127,127,127,0.04));
}
.crew-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.crew-section-title {
    font-weight: 600; font-size: 14px; color: var(--text-primary);
}
.crew-add-btn {
    background: none; border: 1px solid var(--border); border-radius: 6px;
    padding: 4px 12px; font-size: 12px;
    color: var(--text-primary); cursor: pointer;
}
.crew-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.crew-list {
    display: flex; flex-direction: column; gap: 6px;
}
.crew-row {
    display: grid;
    grid-template-columns: 1fr 130px 90px auto auto;
    gap: 8px; align-items: center;
    padding: 6px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg);
    font-size: 13px;
}
.crew-row .crew-person { min-width: 0; }
.crew-row .crew-name {
    font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crew-row .crew-email {
    font-size: 11px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crew-row select, .crew-row input {
    /* Explicit height + box-sizing so the select and the
       input[type="number"] render at exactly the same vertical
       size — without this, native rendering differences (especially
       the number-input spinner widgets) push the rate field a
       couple pixels taller than the role select. */
    box-sizing: border-box;
    height: 28px;
    padding: 4px 8px; font-size: 12px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: inherit;
    line-height: 1;
    margin: 0;
    vertical-align: middle;
}
.crew-row .crew-rate-input {
    width: 80px;
    text-align: right;
    -moz-appearance: textfield;  /* hide Firefox spinner that throws off width */
}
.crew-row .crew-rate-input::-webkit-outer-spin-button,
.crew-row .crew-rate-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.crew-row .crew-rsvp {
    font-size: 10px; font-weight: 600; padding: 2px 6px;
    border-radius: 10px; text-transform: uppercase; letter-spacing: 0.4px;
}
.crew-row .crew-rsvp.pending { background: rgba(127,127,127,0.15); color: var(--text-secondary); }
.crew-row .crew-rsvp.accepted { background: rgba(60,180,90,0.18); color: #6ec06e; }
.crew-row .crew-rsvp.declined { background: rgba(229,115,115,0.15); color: #d88; }
.crew-row .crew-rsvp.tentative { background: rgba(230,200,100,0.15); color: #cb9; }
.crew-row .crew-remove {
    background: none; border: 1px solid var(--border); border-radius: 50%;
    width: 22px; height: 22px; padding: 0;
    color: var(--text-muted); cursor: pointer;
    font-size: 14px; line-height: 1;
}
.crew-row .crew-remove:hover { color: #d88; border-color: #d88; }
/* Read-only crew row (warehouse view): name | role text | rsvp.
   No role-select / rate / remove columns, so collapse the grid. */
.crew-row.readonly {
    grid-template-columns: 1fr 160px auto;
}
.crew-row .crew-role-text {
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crew-empty {
    font-size: 12px; color: var(--text-secondary);
    text-align: center; padding: 12px;
    font-style: italic;
}

/* Crew picker — appears when + Add crew is clicked */
.crew-picker {
    display: grid;
    grid-template-columns: 1fr 130px 90px auto auto;
    gap: 8px; align-items: center;
    padding: 6px;
    border: 1px dashed var(--accent); border-radius: 6px;
    background: var(--bg);
    margin-bottom: 6px;
    font-size: 13px;
}
.crew-picker select, .crew-picker input {
    box-sizing: border-box;
    height: 28px;
    padding: 4px 8px; font-size: 12px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: inherit;
    line-height: 1;
    margin: 0;
    vertical-align: middle;
}
.crew-picker input[type="number"] {
    -moz-appearance: textfield;
}
.crew-picker input[type="number"]::-webkit-outer-spin-button,
.crew-picker input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.crew-picker .crew-picker-confirm {
    background: var(--accent); color: #fff; border: none;
    padding: 4px 12px; border-radius: 4px; cursor: pointer;
    font-size: 12px;
}
.crew-picker .crew-picker-cancel {
    background: none; border: 1px solid var(--border);
    padding: 4px 10px; border-radius: 4px; cursor: pointer;
    font-size: 12px; color: var(--text-secondary);
}

/* Team Members — admin-only user list inside Settings → Account */
.team-members-list {
    border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden;
}
.team-member-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.team-member-row:last-child { border-bottom: 0; }
.team-member-info { flex: 1; min-width: 0; }
.team-member-name { font-weight: 500; color: var(--text-primary); }
.team-member-email { font-size: 12px; color: var(--text-secondary); }
.team-member-row select {
    padding: 4px 10px; font-size: 13px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
    cursor: pointer;
}
.team-member-row.is-self select { opacity: 0.6; cursor: not-allowed; }
.team-member-row .you-pill {
    font-size: 10px; font-weight: 600;
    background: rgba(60, 180, 90, 0.18);
    color: #6ec06e;
    border: 1px solid rgba(60, 180, 90, 0.4);
    padding: 1px 6px; border-radius: 10px;
    margin-left: 6px;
}

/* QuickBooks settings section */
.qbo-action-buttons { display: flex; gap: 8px; }
.qbo-banner {
    margin-top: 10px; padding: 8px 12px;
    border-radius: 6px; font-size: 12px;
}
.qbo-banner.success {
    background: rgba(60, 180, 90, 0.12);
    border: 1px solid rgba(60, 180, 90, 0.4);
    color: var(--text-primary);
}
.qbo-banner.error {
    background: rgba(229, 115, 115, 0.12);
    border: 1px solid rgba(229, 115, 115, 0.4);
    color: var(--text-primary);
}
#qbo-settings-section .setting-label.connected { color: #6ec06e; }
#qbo-settings-section .setting-label.connected::before {
    content: "● "; color: #6ec06e;
}

/* QuickBooks integration in the Quotes header */
#quotes-qbo-send-btn,
#quotes-qbo-update-btn,
#quotes-qbo-email-btn {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: none; color: var(--text-primary); cursor: pointer;
    font-size: 12px; white-space: nowrap;
}
#quotes-qbo-send-btn:hover,
#quotes-qbo-update-btn:hover,
#quotes-qbo-email-btn:hover {
    border-color: var(--accent); color: var(--accent);
}
#quotes-qbo-send-btn:disabled,
#quotes-qbo-update-btn:disabled,
#quotes-qbo-email-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.quotes-qbo-status {
    padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    background: rgba(60, 180, 90, 0.18);
    color: #6ec06e;
    border: 1px solid rgba(60, 180, 90, 0.4);
    white-space: nowrap;
}
.quotes-qbo-status.paid {
    background: rgba(80, 140, 220, 0.18);
    color: #6aa6e0;
    border-color: rgba(80, 140, 220, 0.4);
}

/* Email Quote button — sits next to the PDF link in the Quotes header. */
#quotes-email-btn {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: none; color: var(--text-primary); cursor: pointer;
    font-size: 12px; white-space: nowrap;
}
#quotes-email-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Top-bar Save — mirrors the in-editor .q-save button. Accent-filled
   to read as the headline action on long quotes where scrolling to
   the bottom Save would be a hassle. */
#quotes-save-btn {
    padding: 5px 14px; border: 1px solid var(--accent); border-radius: 6px;
    background: var(--accent); color: #fff; cursor: pointer;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
#quotes-save-btn:hover { filter: brightness(1.08); }
#quotes-save-btn:disabled { opacity: 0.55; cursor: wait; }

/* Email Quote modal — wider so the form + PDF preview fit side by side. */
.quote-email-box {
    max-width: 920px !important; width: 90vw;
    max-height: 90vh; overflow-y: auto;
    text-align: left;
}
.quote-email-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-bottom: 12px;
}
.quote-email-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.quote-email-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.quote-email-field input,
.quote-email-field textarea {
    padding: 6px 10px; font-size: 13px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: inherit; resize: vertical;
}
.quote-email-body-field textarea { min-height: 180px; }
.quote-email-bcc-note { font-size: 11px; color: var(--text-secondary); font-style: italic; margin-top: 2px; }
.quote-email-preview-wrap {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.quote-email-preview-label { font-size: 12px; color: var(--text-secondary); }
.quote-email-preview {
    width: 100%; height: 380px;
    border: 1px solid var(--border); border-radius: 6px;
    background: #fff;
}
.quote-email-resend-warning {
    background: rgba(230, 200, 100, 0.15);
    border: 1px solid rgba(230, 200, 100, 0.4);
    color: var(--text-primary);
    padding: 8px 12px; border-radius: 6px;
    font-size: 13px; margin-bottom: 12px;
}
.quote-email-error { color: #e57373; font-size: 12px; margin-bottom: 8px; min-height: 16px; }
@media (max-width: 800px) {
    .quote-email-grid { grid-template-columns: 1fr; }
    .quote-email-preview { height: 280px; }
}

/* Print Labels button — same compact footprint as PDF / Return All. */
#ps-print-labels-btn {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: none; color: var(--text-primary); cursor: pointer;
    font-size: 12px; white-space: nowrap;
}
#ps-print-labels-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Print Labels modal — wider than default to accommodate the live PDF
   preview (62mm @ scale-up looks tiny otherwise). */
.print-labels-box { max-width: 460px !important; text-align: left; }
.print-labels-form {
    display: flex; align-items: end;
    margin-bottom: 12px;
}
.print-labels-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.print-labels-field input {
    padding: 6px 10px; font-size: 13px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
}
.print-labels-preview-wrap {
    width: 100%; height: 280px;
    border: 1px solid var(--border); border-radius: 6px;
    background: #fff; /* the PDF expects to render on white tape */
    margin-bottom: 12px; overflow: hidden;
}
.print-labels-preview { width: 100%; height: 100%; border: 0; background: #fff; }
.print-labels-error { color: #e57373; font-size: 12px; margin-bottom: 8px; min-height: 16px; }

/* Mark Shipped — match PDF / Return All sizing in this header context.
   Keeps the green "is-shipped" state for clear success feedback after a
   successful ship action (overrides global .btn-mark-shipped colors here). */
#ps-mark-shipped-btn {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: none; color: var(--text-primary); cursor: pointer;
    font-size: 12px; white-space: nowrap;
}
#ps-mark-shipped-btn:hover { border-color: var(--accent); color: var(--accent); }
#ps-mark-shipped-btn.is-shipped {
    background: #2d4a2d; color: #b8e0b8; border-color: #3d5a3d;
}
body.light #ps-mark-shipped-btn.is-shipped {
    background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7;
}
#ps-mark-shipped-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Progress bar */
#ps-progress {
    padding: 8px 20px; font-size: 12px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
}
#ps-progress-bar {
    flex: 1; height: 6px; background: var(--border); border-radius: 3px;
    overflow: hidden;
}
#ps-progress-fill {
    height: 100%; background: var(--accent); border-radius: 3px;
    transition: width 0.3s ease;
}
#ps-progress-label { white-space: nowrap; }

/* Checklist table */
#ps-checklist-wrap {
    flex: 1; overflow-y: auto; padding: 0;
}
#ps-checklist {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
#ps-checklist thead th {
    text-align: left; padding: 8px 12px;
    border-bottom: 2px solid var(--border);
    color: var(--text-secondary); font-weight: 600;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
    position: sticky; top: 0; background: var(--bg-primary);
    z-index: 1;
}
#ps-checklist td {
    padding: 6px 12px; border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
#ps-checklist tr:last-child td { border-bottom: none; }
/* Packing Status column — shared by group rows and unit rows. The bar +
   counter live here uniformly so singletons get the same celebration look
   as multi-unit groups. */
#ps-checklist .ps-pack-status-col { min-width: 160px; }
#ps-checklist td.ps-pack-status {
    min-width: 160px;
    white-space: nowrap;
}
#ps-checklist td.ps-pack-status .ps-group-bar {
    display: block;
    margin-top: 3px;
    width: 100%;
}
#ps-checklist td.ps-pack-status .ps-group-counter {
    font-size: 11px;
    display: inline-block;
}
#ps-checklist tr.packed td.ps-pack-status,
#ps-checklist tr.returned td.ps-pack-status {
    /* Status column itself carries the visual cue (green bar / muted bar) —
       we keep the row body clean so the dropdown / Return button stay legible. */
}
#ps-checklist .ps-check {
    width: 18px; height: 18px; cursor: pointer;
    accent-color: var(--accent);
}
#ps-checklist .qty-col { text-align: center; width: 40px; }
#ps-checklist .cat-col { color: var(--text-secondary); }

/* Returned rows — muted with no strikethrough */
#ps-checklist tr.returned td { opacity: 0.35; }
.pullsheet-viewer tr.returned td { opacity: 0.35; }

/* Return button — compact, inline */
.ps-return-item-btn {
    padding: 2px 10px; font-size: 12px; border-radius: 4px;
    background: none; color: var(--text-secondary);
    border: 1px solid var(--border); cursor: pointer;
}
.ps-return-item-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Pack buttons — match the Return button look so the row stays compact */
/* Quick Add — sits below the pack sheet checklist for grabbing an
   accessory mid-pack without leaving the tab. Layout mirrors the Quotes
   tab "+ Add Item" pattern (dashed button + drop-down popover). */
#ps-quick-add {
    /* 20px horizontal pad matches #ps-progress so the Quick Add button
       lines up with the rest of the pack-sheet UI instead of pinning
       flush against the left edge. */
    margin: 12px 0;
    padding: 0 20px;
}
#ps-quick-add-btn {
    background: none;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
}
#ps-quick-add-btn:hover { border-color: var(--accent); color: var(--accent); }
#ps-quick-add-popover {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    padding: 12px;
    max-width: 640px;
}
#ps-quick-add-popover[hidden] { display: none; }
#ps-quick-add-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px;  /* iOS no-zoom on focus */
    box-sizing: border-box;
}
#ps-quick-add-search:focus { outline: none; border-color: var(--accent); }
#ps-quick-add-results { margin-top: 10px; max-height: 320px; overflow-y: auto; }

.ps-pack-btn, .ps-pack-row-btn, .ps-pack-group-btn, .ps-pack-all-btn {
    padding: 2px 10px; font-size: 12px; border-radius: 4px;
    background: none; color: var(--text-secondary);
    border: 1px solid var(--border); cursor: pointer;
}
.ps-pack-btn:hover, .ps-pack-row-btn:hover, .ps-pack-group-btn:hover, .ps-pack-all-btn:hover {
    border-color: var(--accent); color: var(--accent);
}
/* Group-level Pack QTY is the headline action — give it a touch more weight */
.ps-pack-group-btn { font-weight: 600; }
/* Pack All sits inline with the model name (next to the caret column).
   Smaller + accent-tinted so it reads as a row-scope shortcut rather
   than competing with the per-row checkboxes. */
.ps-pack-all-btn {
    margin-left: 10px;
    font-size: 11px; font-weight: 600;
    color: var(--accent); border-color: var(--accent);
    padding: 1px 8px;
}
.ps-pack-all-btn:hover { background: var(--accent); color: #fff; }
.ps-pack-all-btn[disabled] { opacity: 0.5; cursor: wait; }
/* Per-case Open Case pill on the group row. Sits next to Pack All as
   a sibling shortcut — same visual weight as the rest of the row's
   inline actions, but neutral (not accent-colored) so Pack All stays
   the headline action. The icon gives it a passing-glance read. */
.ps-open-case-pill {
    margin-left: 8px;
    padding: 1px 8px; font-size: 11px; font-weight: 600;
    border-radius: 4px; cursor: pointer;
    background: none; color: var(--text-secondary);
    border: 1px solid var(--border);
    display: inline-flex; align-items: center; gap: 4px;
}
.ps-open-case-pill svg { width: 12px; height: 12px; }
.ps-open-case-pill:hover {
    border-color: var(--accent); color: var(--accent);
}

/* Pack confirmation toast — center-screen, green check + message.
   Fires after a successful barcode scan-pack so the user can keep
   their eyes on the scanner and gear rather than the screen. The
   short auto-dismiss (1.4s) keeps repeated scans from stacking. */
#pack-confirm-toast {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    z-index: 9999;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
#pack-confirm-toast.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.pack-confirm-card {
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    padding: 28px 40px 24px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    min-width: 220px;
}
.pack-confirm-check {
    font-size: 68px;
    line-height: 1;
    color: #22c55e;
    margin-bottom: 8px;
    font-weight: 700;
}
.pack-confirm-msg {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
}
body.light .pack-confirm-card {
    background: rgba(20, 20, 20, 0.92);
}

/* Pack error toast — same shape as the success toast, red X instead.
   Doesn't auto-dismiss when an "Add to inventory" CTA is rendered so
   the user has time to read + act. Click outside the card to dismiss. */
#pack-error-toast {
    position: fixed; inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.35);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
}
#pack-error-toast.visible {
    opacity: 1;
    pointer-events: auto;
}
.pack-error-card {
    background: rgba(20, 20, 20, 0.96);
    color: #fff;
    padding: 28px 36px 22px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    min-width: 280px; max-width: 460px;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
.pack-error-x {
    font-size: 60px;
    line-height: 1;
    color: #ef4444;
    margin-bottom: 10px;
    font-weight: 700;
}
.pack-error-msg {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.35;
}
.pack-error-actions {
    display: flex; gap: 10px; justify-content: center;
    margin-top: 8px;
}
.pack-error-actions:empty { display: none; }
.pack-error-add-btn,
.pack-error-dismiss-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
}
.pack-error-add-btn {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.pack-error-add-btn:hover { filter: brightness(1.1); }
.pack-error-dismiss-btn {
    background: transparent; color: #ddd;
}
.pack-error-dismiss-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Return All button */
#ps-return-all-btn {
    padding: 4px 12px; font-size: 13px; border-radius: 6px;
    background: none; color: var(--text-secondary);
    border: 1px solid var(--border); cursor: pointer;
}
#ps-return-all-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Condition badges (shown on returned rows) */
.return-condition { font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 4px; }
.return-condition.damaged { background: #3a1a1a; color: #f87171; }
.return-condition.missing { background: #2a1a3a; color: #c084fc; }
body.light .return-condition.damaged { background: #fecaca; color: #991b1b; }
body.light .return-condition.missing { background: #f3e8ff; color: #6b21a8; }

/* Pack ↔ Return mode segmented toggle in the pack sheet header */
.ps-mode-toggle {
    display: inline-flex; border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden;
}
.ps-mode-toggle button {
    background: none; border: none; cursor: pointer;
    padding: 5px 14px; font-size: 12px; color: var(--text-secondary);
}
.ps-mode-toggle button:hover { color: var(--text-primary); }
.ps-mode-toggle button.active {
    background: var(--accent-bg); color: #fff;
}
body.light .ps-mode-toggle button.active { color: #fff; }

/* Per-row return cell: condition dropdown + button side-by-side */
.ps-return-cell {
    display: inline-flex; gap: 4px; align-items: center;
}
.ps-condition-select {
    padding: 2px 4px; font-size: 11px; border-radius: 3px;
    background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--border);
}
/* In Pack mode hide the condition dropdown — return is a less-common action */
#ps-checklist:not(.return-mode) .ps-condition-select { display: none; }
/* In Return mode, emphasize Return rows so the user knows where to scan */
#ps-checklist.return-mode tr.packed td { opacity: 1; text-decoration: none; }

/* Condition picker (inline menu on long-press) */
.ps-condition-picker {
    display: inline-flex; gap: 4px; margin-left: 6px;
}
.ps-condition-picker button {
    padding: 2px 8px; font-size: 11px; border-radius: 3px;
    background: var(--bg-header); color: var(--text-secondary);
    border: 1px solid var(--border); cursor: pointer;
}
.ps-condition-picker button:hover {
    border-color: var(--accent); color: var(--accent);
}

/* Empty state */
#ps-empty {
    display: flex; align-items: center; justify-content: center;
    flex: 1; color: var(--text-muted); font-size: 14px; padding: 40px;
    text-align: center;
}

/* Chat section (collapsible at bottom) */
#ps-chat-section {
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column;
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
}
#ps-chat-section.open {
    max-height: 40vh;
}
#ps-chat-toggle {
    padding: 8px 20px; cursor: pointer;
    font-size: 13px; color: var(--text-secondary);
    background: var(--bg-header); border: none;
    text-align: left; width: 100%;
    border-top: 1px solid var(--border);
}
#ps-chat-toggle:hover { color: var(--text-primary); }
#ps-chat-body {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
}
#ps-messages {
    flex: 1; overflow-y: auto; padding: 12px 20px;
    display: flex; flex-direction: column; gap: 8px;
    max-height: 25vh;
}
.ps-msg {
    font-size: 13px; line-height: 1.5;
    padding: 6px 10px; border-radius: 8px;
    max-width: 85%;
}
.ps-msg.user {
    align-self: flex-end;
    background: var(--accent-bg); color: #fff;
}
.ps-msg.assistant {
    align-self: flex-start;
    background: var(--bg-header); color: var(--text-primary);
}
#ps-input-bar {
    display: flex; gap: 8px; padding: 8px 20px 12px;
    border-top: 1px solid var(--border);
}
#ps-input {
    flex: 1; padding: 8px 12px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px;
    resize: none; font-family: inherit;
    min-height: 36px; max-height: 80px;
}
#ps-input:focus { outline: none; border-color: var(--accent); }
#ps-send-btn {
    padding: 8px 14px; border: none; border-radius: 6px;
    background: var(--accent-bg); color: #fff; cursor: pointer;
    font-size: 13px; white-space: nowrap;
}
#ps-send-btn:hover { background: var(--accent); }

/* ── Quotes panel ──────────────────────────────────────── */
/* Mirrors Pack Sheets layout: sidebar list + main editor pane.
   Sidebar is wider (280px) to fit the search + status chips + 2 dropdowns. */
#quotes-panel {
    display: none; flex-direction: row;
    height: 100vh; height: 100dvh;
    overflow: hidden;
    /* The panel sits inside #app-layout (a flex row). Without flex:1 + min-width
       it shrinks to its content width, leaving a wide grey gap on the right.
       min-width:0 prevents an overflowing child (e.g. the items table) from
       inflating the panel past the viewport. */
    flex: 1;
    min-width: 0;
}
#quotes-panel.active { display: flex; }

#quotes-sidebar {
    /* 340px gives the "All types" + "Any date" filter pair enough room
       so the date dropdown's chevron isn't clipped by the editor pane. */
    width: 340px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    flex-shrink: 0;
}
#quotes-sidebar-header {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 8px;
}
#quotes-sidebar-header h2 {
    font-size: 14px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 1px;
    margin: 0;
}
#quotes-search {
    padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 16px;  /* iOS no-zoom on focus */
}
#quotes-search:focus { outline: none; border-color: var(--accent); }

.quotes-status-tabs {
    display: flex; gap: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.quotes-status-tabs button {
    padding: 5px 12px;
    border: 1px solid var(--border); border-radius: 20px;
    background: none; color: var(--text-secondary);
    cursor: pointer; font-size: 13px; white-space: nowrap;
    min-height: 32px;
}
.quotes-status-tabs button:hover { color: var(--text-primary); }
.quotes-status-tabs button.active {
    background: var(--accent-bg); color: #fff;
    border-color: var(--accent-bg);
}

.quotes-secondary-filters { display: flex; gap: 6px; }
.quotes-secondary-filters select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 16px;  /* iOS no-zoom */
}

#quotes-list {
    list-style: none; flex: 1;
    overflow-y: auto; padding: 8px 0;
    margin: 0;
}
#quotes-list li {
    padding: 10px 16px;
    cursor: pointer;
    border-left: 3px solid transparent;
    min-height: 44px;  /* touch target */
}
#quotes-list li:hover { background: var(--bg-hover); }
#quotes-list li.active {
    background: var(--bg-hover);
    border-left-color: var(--accent);
}
.q-card-name {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-tour-chip {
    display: inline-block;
    font-size: 10px; font-weight: 500;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 10px;
    background: var(--bg-hover);
    border: 1px solid #c084fc;
    color: var(--text-secondary);
    vertical-align: middle;
}
.q-card-meta {
    font-size: 11px; color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-card-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 4px;
}
.q-card-pill {
    font-size: 10px; padding: 2px 8px; border-radius: 10px;
    background: var(--bg-hover); color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.q-card-pill.sent { background: #2d3a4a; color: #b8d4e0; }
.q-card-pill.accepted { background: #2d4a2d; color: #b8e0b8; }
body.light .q-card-pill.sent { background: #e3f2fd; color: #1565c0; }
body.light .q-card-pill.accepted { background: #e8f5e9; color: #2e7d32; }
.q-card-total {
    font-size: 12px; font-variant-numeric: tabular-nums;
    color: var(--accent); font-weight: 600;
}

#quotes-list-empty {
    color: var(--text-muted); font-size: 13px;
    text-align: center; padding: 24px 16px;
}

#quotes-sidebar-overlay { display: none; }
#quotes-sidebar-overlay.active {
    display: block; position: fixed; inset: 0;
    z-index: 19; background: rgba(0,0,0,0.4);
}

#quotes-main {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0;
}
#quotes-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-header);
    display: flex; align-items: center; gap: 12px;
}
#quotes-header h1 {
    font-size: 18px; font-weight: 600;
    flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#quotes-open-event-link, #quotes-pdf-link {
    font-size: 13px; color: var(--accent);
    text-decoration: none; cursor: pointer;
    padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
}
#quotes-open-event-link:hover, #quotes-pdf-link:hover {
    border-color: var(--accent);
}
#quotes-editor {
    flex: 1; overflow-y: auto;
    /* Top/bottom margin keeps the card visually separate from the header,
       but kill the side margins so the editor reaches the viewport's right
       edge — the wide column was feeling cramped with double gutters
       (margin + .quote-viewer padding). The .quote-viewer padding (14px)
       still provides interior breathing room for content. */
    margin: 14px 0;
}

/* Add-items panel — sits under the editor in the main pane */
#quotes-add-section {
    margin: 0 14px 14px;
    padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-primary);
    flex-shrink: 0;
}
.qa-header {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.qa-header strong { font-size: 13px; color: var(--text-primary); }
.qa-hint { font-size: 11px; color: var(--text-muted); }
#quotes-add-search {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 16px;  /* iOS no-zoom */
}
#quotes-add-search:focus { outline: none; border-color: var(--accent); }
#quotes-add-results {
    max-height: 220px; overflow-y: auto;
    margin-top: 8px;
}
.qa-result-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.qa-result-item:last-child { border-bottom: none; }
.qa-result-info { flex: 1; min-width: 0; }
.qa-result-model {
    font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}
.qa-result-detail {
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}
.qa-add-btn {
    padding: 6px 14px; border: 1px solid var(--accent); border-radius: 6px;
    background: var(--accent-bg); color: #fff; cursor: pointer;
    font-size: 12px; flex-shrink: 0; min-height: 32px;
}
.qa-add-btn:hover { background: var(--accent); }
.qa-add-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.qa-empty {
    color: var(--text-muted); font-size: 12px;
    text-align: center; padding: 12px 0;
}

/* ── Suggested-rate badge inside quote lines ────────────── */
.q-suggested-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px dashed var(--accent);
    border-radius: 10px;
    background: none;
    color: var(--accent);
    font-size: 11px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.q-suggested-badge:hover {
    background: var(--accent-bg); color: #fff; border-style: solid;
}
.q-suggested-badge:disabled { opacity: 0.5; cursor: wait; }

/* ── Suggested rental price cell + popover ────────────── */
.suggested-rate-empty {
    color: var(--text-muted);
    font-style: italic;
}
.suggested-rate-btn {
    background: none; border: 1px dashed var(--border); border-radius: 4px;
    color: var(--accent); padding: 2px 6px; cursor: pointer;
    font-size: 12px; font-variant-numeric: tabular-nums;
    text-align: left; white-space: nowrap;
}
.suggested-rate-btn:hover {
    border-style: solid; background: var(--bg-hover);
}
.suggested-rate-range {
    color: var(--text-muted); font-size: 11px;
}
.suggested-rate-diff {
    color: var(--text-secondary); font-weight: 600; margin-left: 2px;
}

.suggested-rate-popover {
    position: fixed;
    z-index: 200;
    width: 340px; max-width: calc(100vw - 20px);
    background: var(--bg-header);
    border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    color: var(--text-primary); font-size: 13px;
    overflow: hidden;
}
.suggested-rate-popover.hidden { display: none; }
.srp-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}
.srp-close {
    background: none; border: none; color: var(--text-secondary);
    font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.srp-close:hover { color: var(--text-primary); }
.srp-body { padding: 10px 14px; max-height: 50vh; overflow-y: auto; }
.srp-row {
    display: flex; justify-content: space-between;
    padding: 4px 0; font-size: 13px;
}
.srp-row span:first-child { color: var(--text-secondary); }
.srp-row-suggested { color: var(--accent); }
.srp-row-suggested em {
    color: var(--text-muted); font-size: 11px; font-style: normal;
}
.srp-notes {
    margin-top: 8px; padding: 8px 10px;
    background: var(--bg-primary); border-radius: 4px;
    font-size: 12px; color: var(--text-secondary);
    line-height: 1.4;
}
.srp-group-note {
    margin-top: 8px; font-size: 11px;
    color: var(--text-muted); font-style: italic;
}
.srp-meta {
    margin-top: 8px; font-size: 11px; color: var(--text-muted);
}
.srp-sources-label {
    margin-top: 10px; font-size: 11px; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;
}
.srp-sources {
    list-style: none; padding: 4px 0 0; margin: 0;
}
.srp-sources li {
    padding: 4px 0; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; gap: 8px;
    font-size: 12px;
}
.srp-sources li:last-child { border-bottom: none; }
.srp-sources a {
    color: var(--accent); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.srp-sources a:hover { text-decoration: underline; }
.srp-source-price {
    color: var(--text-secondary); font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.srp-sources-empty { color: var(--text-muted); font-size: 12px; padding: 8px 0; }
.srp-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 10px 14px; border-top: 1px solid var(--border);
    background: var(--bg-primary);
}
.srp-actions button {
    flex: 1; min-width: 80px;
    padding: 6px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: none;
    color: var(--text-primary); cursor: pointer;
    font-size: 12px;
}
.srp-actions .srp-apply-daily,
.srp-actions .srp-apply-weekly,
.srp-actions .srp-apply-both {
    border-color: var(--accent); color: var(--accent);
}
.srp-actions .srp-apply-daily:hover,
.srp-actions .srp-apply-weekly:hover,
.srp-actions .srp-apply-both:hover {
    background: var(--accent-bg); color: #fff;
}
.srp-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.srp-actions .srp-dismiss { color: var(--text-muted); }
.srp-actions .srp-dismiss:hover { color: var(--danger-hover); border-color: var(--danger); }

@media (max-width: 768px) {
    .suggested-rate-popover {
        width: calc(100vw - 20px);
    }
}

/* ── Cortaditos coffee meme overlay ───────────────────── */
#cortaditos-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 200;
    background: #000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
#cortaditos-overlay.active {
    display: flex;
}
#cortaditos-gif {
    max-width: 90vw;
    max-height: 60vh;
    border-radius: 12px;
    opacity: 0;
    animation: cortFadeIn 1.5s ease forwards;
}
#cortaditos-text {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    opacity: 0;
    /* Text fades in after the gif finishes its fade */
    animation: cortFadeIn 1.5s ease 2s forwards;
}
@keyframes cortFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
#cortaditos-close {
    position: absolute; top: 16px; right: 20px;
    background: none; border: none;
    color: #555; font-size: 32px; cursor: pointer;
    z-index: 201; line-height: 1;
}
#cortaditos-close:hover { color: #999; }

/* ── Barcode scanner bar + detail popup ──────────────── */
.scan-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
}
.scan-btn {
    padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-primary); color: var(--text-primary);
    cursor: pointer; font-size: 13px; white-space: nowrap;
}
.scan-btn:hover { border-color: var(--accent); }
.scan-btn.active {
    background: var(--accent-bg); color: #fff; border-color: var(--accent);
}
.scan-input {
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 14px; width: 220px;
}
.scan-input:focus { outline: none; border-color: var(--accent); }
.scan-status {
    font-size: 12px; color: var(--text-secondary);
    white-space: nowrap; min-width: 0;
}
.scan-status.found { color: #22c55e; }
.scan-status.not-found { color: var(--danger-hover); }

/* Pack-sheet model groups — one collapsible header row per model with
   2+ units. Singletons render flat (no group wrapper). */
.ps-group-row {
    background: var(--bg-secondary, rgba(180, 200, 220, 0.08));
    cursor: pointer;
    user-select: none;
    border-top: 1px solid var(--border, #ccc);
}
.ps-group-row:hover {
    background: var(--bg-secondary, rgba(180, 200, 220, 0.15));
}
.ps-group-row.done {
    background: rgba(34, 197, 94, 0.08);
}
.ps-group-arrow {
    width: 24px; text-align: center;
    color: var(--text-muted);
    font-size: 11px;
}
.ps-group-multi {
    color: var(--text-secondary);
    font-weight: 400; font-size: 12px;
    margin-left: 6px;
}
.ps-group-counter {
    font-size: 12px; color: var(--text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ps-group-counter.done { color: #22c55e; font-weight: 600; }
.ps-group-bar {
    flex: 1; height: 6px;
    background: rgba(180, 200, 220, 0.2);
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
}
.ps-group-bar-fill {
    display: block; height: 100%;
    background: var(--accent, #4a90c0);
    transition: width 0.3s ease;
}
.ps-group-row.done .ps-group-bar-fill { background: #22c55e; }
/* Child rows under a group — slight indent so the hierarchy reads. */
.ps-group-child td:first-child {
    padding-left: 28px;
}
/* "In: NNNNN" chip on packed item rows in the checklist */
.ps-incase-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 11px; font-weight: 600;
    color: var(--accent, #4a90c0);
    background: rgba(74, 144, 192, 0.12);
    border: 1px solid var(--accent, #4a90c0);
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
}
.ps-incase-chip:hover {
    background: rgba(74, 144, 192, 0.25);
}

/* Case-packing session — docked right-side drawer so the pack list stays
   visible behind it. No dim overlay; the user wants to watch items get
   their "In: NNNNN" chip in real time as they scan. */
.ps-case-session {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 360px;
    z-index: 250;
    display: flex;
    pointer-events: none; /* container is non-blocking; box catches events */
}
.ps-case-session.hidden { display: none; }
.ps-case-session-box {
    background: var(--bg-primary);
    border-left: 1px solid var(--border, #ccc);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    display: flex; flex-direction: column;
    pointer-events: auto;
}
@media (max-width: 768px) {
    /* On narrow screens, full-width drawer (the pack list is already cramped). */
    .ps-case-session { width: 100%; }
    .ps-case-session-box { border-left: none; }
}
/* When drawer is open, shift the pack list left so it doesn't hide
   behind the drawer. Body class is toggled by JS. */
body.case-session-open #ps-main { padding-right: 360px; }
@media (max-width: 768px) {
    /* Mobile drawer covers the whole screen — no shift needed. */
    body.case-session-open #ps-main { padding-right: 0; }
}
.ps-case-session-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #ccc);
    gap: 12px;
}
.ps-case-session-header h2 {
    margin: 0; font-size: 17px; color: var(--text-primary);
}
.ps-case-session-sub {
    font-size: 12px; color: var(--text-secondary);
    margin-top: 4px;
}
.ps-case-session-close {
    background: transparent; color: var(--text-secondary);
    border: none; cursor: pointer;
    font-size: 24px; line-height: 1;
    padding: 0 4px;
}
.ps-case-session-close:hover { color: var(--text-primary); }
.ps-case-session-body {
    padding: 14px 18px;
    overflow-y: auto;
    flex: 1; min-height: 0;
}
.ps-case-session-input {
    width: 100%; box-sizing: border-box;
    font-size: 16px; /* iOS no-zoom */
    padding: 10px 12px;
    margin-bottom: 6px;
}
.ps-case-session-contents {
    list-style: none; padding: 0; margin: 12px 0 0;
    display: flex; flex-direction: column; gap: 4px;
}
.ps-case-session-contents li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px;
    background: var(--bg-secondary, rgba(180, 200, 220, 0.08));
    border: 1px solid var(--border, #ccc);
    border-radius: 4px;
    font-size: 13px;
}
.ps-case-session-contents li.ps-case-empty {
    justify-content: center;
    color: var(--text-muted);
    font-style: italic;
}
.ps-case-row-serial {
    font-family: monospace; font-weight: 600;
    color: var(--text-primary);
    min-width: 70px;
}
.ps-case-row-model { flex: 1; color: var(--text-secondary); }
.ps-case-row-remove {
    background: transparent; color: var(--text-muted);
    border: none; cursor: pointer; font-size: 18px;
    line-height: 1; padding: 0 6px;
}
.ps-case-row-remove:hover { color: var(--danger-hover, #e44); }

/* Pin-as-permanent toggle. Filled emoji 📌 = permanent (always lives in
   this case); outline circle = flex (temporary). Permanent rows also get
   a subtle highlight to make the at-a-glance distinction clearer. */
.ps-case-row-pin {
    background: transparent; border: none; cursor: pointer;
    padding: 0 6px; font-size: 14px; line-height: 1;
    color: var(--text-muted);
}
.ps-case-row-pin:hover { color: var(--accent); }
.ps-case-session-contents li.ps-case-row-permanent {
    background: var(--bg-hover, rgba(127,127,127,0.08));
}
.ps-case-session-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border, #ccc);
    display: flex; justify-content: flex-end; gap: 8px;
}
.ps-case-session-done {
    background: var(--accent, #4a90c0); color: white;
    border: none; border-radius: 6px;
    padding: 8px 18px; font-size: 14px;
    cursor: pointer;
}
.ps-case-session-done:hover { opacity: 0.9; }
.ps-case-session-print-label {
    background: none; color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 14px; font-size: 14px;
    cursor: pointer;
}
.ps-case-session-print-label:hover { border-color: var(--accent); color: var(--accent); }
.ps-case-session-print-label:disabled { opacity: 0.5; cursor: not-allowed; }

/* Event-scoped bulk pack panel inside case session */
/* Case quick-pick — listed under the scan input in pick_case mode so
   the user can click a case instead of scanning. Matches the bulk-pack
   panel's visual language so the sidebar reads consistently. */
.ps-case-session-quick-pick {
    margin-top: 10px;
    border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 10px;
    background: var(--bg-secondary, rgba(127,127,127,0.05));
}
.ps-case-session-quick-pick-header {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.ps-case-session-quick-pick-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 240px; overflow-y: auto;
}
.ps-case-session-quick-pick-list li.ps-case-qp-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center; gap: 8px;
    padding: 8px 6px; font-size: 13px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s;
}
.ps-case-session-quick-pick-list li.ps-case-qp-row:last-child { border-bottom: 0; }
.ps-case-session-quick-pick-list li.ps-case-qp-row:hover {
    background: var(--bg-hover);
}
.ps-case-qp-model {
    font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-case-qp-serial {
    font-family: monospace; font-size: 12px; color: var(--text-secondary);
}
.ps-case-qp-state {
    font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 8px;
    letter-spacing: 0.4px; text-transform: uppercase;
}
.ps-case-qp-state.has-kids {
    background: rgba(34, 197, 94, 0.18); color: #22c55e;
}
.ps-case-qp-state.empty {
    background: var(--bg-hover); color: var(--text-muted);
}
.ps-case-session-quick-pick-empty {
    font-size: 12px; color: var(--text-muted); font-style: italic;
    padding: 4px 0;
}

.ps-case-bulk-panel {
    margin-top: 10px;
    border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 10px;
    background: var(--bg-secondary, rgba(127,127,127,0.05));
}
.ps-case-bulk-panel-header {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.ps-case-bulk-pack-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 220px; overflow-y: auto;
}
.ps-case-bulk-pack-list li {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center; gap: 8px;
    padding: 6px 4px; font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.ps-case-bulk-pack-list li:last-child { border-bottom: 0; }
.ps-case-bulk-pack-list li.fully-packed { opacity: 0.55; }
.ps-case-bulk-pack-list .ps-case-bulk-model {
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-case-bulk-pack-list .ps-case-bulk-counts {
    font-size: 11px; color: var(--text-secondary); white-space: nowrap;
}
.ps-case-bulk-pack-list input[type="number"] {
    width: 50px; padding: 3px 6px; font-size: 12px;
    background: var(--bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
}
.ps-case-bulk-pack-list .ps-case-bulk-pack-btn {
    padding: 4px 10px; font-size: 12px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 4px; cursor: pointer;
}
.ps-case-bulk-pack-list .ps-case-bulk-pack-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.ps-case-bulk-empty {
    font-size: 12px; color: var(--text-secondary);
    font-style: italic; padding: 8px 4px;
}

/* Row flash when scanner finds a match */
@keyframes scan-highlight {
    0%   { background: rgba(58, 123, 213, 0.4); }
    100% { background: transparent; }
}
.scan-flash {
    animation: scan-highlight 1.5s ease-out;
}

/* Floating detail card shown after an inventory scan */
.scan-detail-popup {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--bg-header); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px 24px;
    min-width: 280px; max-width: 380px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    z-index: 150;
    transition: opacity 0.2s, transform 0.2s;
}
.scan-detail-popup.hidden {
    display: none;
}
.scan-detail-close {
    position: absolute; top: 8px; right: 12px;
    background: none; border: none; font-size: 20px;
    color: var(--text-muted); cursor: pointer; line-height: 1;
}
.scan-detail-close:hover { color: var(--text-primary); }
.scan-detail-popup h3 {
    font-size: 16px; margin-bottom: 10px; color: var(--text-primary);
}
.scan-detail-popup .scan-detail-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 4px 0; font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.scan-detail-popup .scan-detail-row:last-child { border-bottom: none; }
.scan-detail-popup .scan-detail-label {
    color: var(--text-secondary); white-space: nowrap;
}
.scan-detail-popup .scan-detail-value {
    color: var(--text-primary); text-align: right;
}

/* Pack sheets header scan controls — inline with other header buttons */
#ps-header .scan-btn { margin-left: auto; }

/* ── Admin: History (audit log) ───────────────────────── */
.history-filters {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.history-filters select {
    padding: 6px 10px; border-radius: 6px;
    background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--border);
}
.history-filters button {
    padding: 6px 14px; border-radius: 6px;
    background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--border); cursor: pointer;
}
.history-filters button:hover { background: var(--bg-hover); }

.history-list {
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-secondary);
    max-height: 480px; overflow-y: auto;
}
.history-row {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.history-row:last-child { border-bottom: none; }
.history-summary {
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.history-ts {
    color: var(--text-secondary); font-size: 12px; min-width: 130px;
}
.history-who {
    color: var(--accent); font-weight: 600;
}
.history-what { color: var(--text-secondary); }
.history-which { color: var(--text-primary); }
.history-badge.agent {
    font-size: 10px; padding: 1px 6px; border-radius: 3px;
    background: var(--bg-hover); color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.history-expand-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: 11px; padding: 4px 0; margin-top: 4px;
}
.history-expand-btn:hover { color: var(--text-primary); }
.history-detail {
    margin-top: 6px; padding: 8px 10px;
    background: var(--bg-input); border-radius: 4px;
    font-family: ui-monospace, monospace; font-size: 12px;
}
.history-detail.hidden { display: none; }
.history-diff-row {
    display: flex; gap: 6px; align-items: baseline; padding: 2px 0;
    flex-wrap: wrap;
}
.history-field { color: var(--text-secondary); min-width: 100px; }
.history-from { color: var(--text-dim); text-decoration: line-through; }
.history-arrow { color: var(--text-dim); }
.history-to { color: var(--text-primary); }
.history-empty, .history-loading {
    padding: 20px; text-align: center; color: var(--text-dim); font-size: 13px;
}
.history-pager {
    display: flex; gap: 10px; align-items: center; justify-content: center;
    margin-top: 12px; font-size: 12px; color: var(--text-secondary);
}
.history-pager button {
    padding: 4px 12px; border-radius: 4px;
    background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--border); cursor: pointer;
}
.history-pager button:disabled {
    opacity: 0.4; cursor: not-allowed;
}

/* ── Admin: Trash ─────────────────────────────────────── */
.trash-tabs {
    display: flex; gap: 4px; margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.trash-tabs button {
    background: none; border: none; cursor: pointer;
    padding: 8px 12px; color: var(--text-secondary);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    font-size: 13px;
}
.trash-tabs button:hover { color: var(--text-primary); }
.trash-tabs button.active {
    color: var(--accent); border-bottom-color: var(--accent);
}
.trash-count {
    display: inline-block; min-width: 20px; padding: 0 6px;
    background: var(--bg-hover); border-radius: 10px;
    font-size: 11px; color: var(--text-dim); margin-left: 4px;
}
.trash-list {
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-secondary);
    max-height: 480px; overflow-y: auto;
}
.trash-row {
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    display: flex; gap: 12px; align-items: center;
}
.trash-row:last-child { border-bottom: none; }
.trash-info { flex: 1; min-width: 0; }
.trash-label { color: var(--text-primary); font-weight: 500; font-size: 14px; }
.trash-subtitle { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.trash-meta { color: var(--text-dim); font-size: 11px; margin-top: 4px; }
.trash-actions { display: flex; gap: 6px; flex-shrink: 0; }
.trash-restore, .trash-purge {
    padding: 6px 12px; border-radius: 4px; font-size: 12px;
    cursor: pointer; border: 1px solid var(--border);
}
.trash-restore { background: var(--bg-input); color: var(--text-primary); }
.trash-restore:hover { background: var(--bg-hover); }
.trash-purge { background: transparent; color: #e57373; border-color: #e5737366; }
.trash-purge:hover { background: #e5737322; }
.trash-empty, .trash-loading {
    padding: 20px; text-align: center; color: var(--text-dim); font-size: 13px;
}

/* Inline status toast above the trash list — fades in for ~4s after an action */
.trash-toast {
    padding: 10px 14px; border-radius: 6px; font-size: 13px;
    margin-bottom: 10px; opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    border: 1px solid var(--border);
}
.trash-toast.visible { opacity: 1; }
.trash-toast.success {
    background: #2d4a2d; color: #b8e0b8; border-color: #3d5a3d;
}
.trash-toast.error {
    background: #4a2d2d; color: #e0b8b8; border-color: #5a3d3d;
}
body.light .trash-toast.success {
    background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7;
}
body.light .trash-toast.error {
    background: #fdecea; color: #c62828; border-color: #ef9a9a;
}

/* Mobile: stack trash row actions below info to keep buttons tappable */
@media (max-width: 768px) {
    .trash-row { flex-direction: column; align-items: stretch; }
    .trash-actions { justify-content: flex-end; }
    .history-summary { flex-direction: column; gap: 2px; }
    .history-ts { min-width: 0; }
}

/* ── Mobile responsive (< 768px) ─────────────────────── */
@media (max-width: 768px) {
    /* Show mobile-only elements */
    .mobile-only { display: block !important; }

    /* Hide nav rail on phone — controls move into chat header */
    #nav-rail { display: none; }

    /* Slide-out nav menu anchors to left edge on mobile */
    #nav-menu { left: 0; transform: translateX(-200px); }
    #nav-menu.open { transform: translateX(0); }

    /* Sticky sidebar has no effect on phones — keep slide-over behavior */
    body.nav-pinned #nav-menu {
        position: fixed;
        left: 0;
        transform: translateX(-200px);
    }

    /* Sidebar becomes a slide-over panel instead of always-visible */
    #sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        z-index: 20; width: 260px;
        transform: translateX(-260px);
        transition: transform 0.2s ease;
    }
    #sidebar.mobile-open { transform: translateX(0); }

    /* Overlay behind mobile sidebar */
    #sidebar-overlay {
        position: fixed; inset: 0; z-index: 19;
        background: rgba(0,0,0,0.4);
    }
    #sidebar-overlay:not(.active) { display: none; }

    /* Chat header: add room for sidebar toggle + hamburger */
    #chat-area header { padding: 10px 12px; gap: 8px; }
    #chat-area header h1 { font-size: 16px; }

    /* Messages take more width on small screens */
    .msg { max-width: 88%; }
    #messages { padding: 12px 10px; gap: 10px; }

    /* Tighter input bar — font-size >= 16px prevents iOS zoom on focus */
    #input-bar { padding: 8px 10px; }
    #user-input { padding: 8px 10px; font-size: 16px; min-height: 36px; }
    #send-btn { padding: 8px 14px; font-size: 14px; }
    .modal-box input { font-size: 16px; }
    #search-input, #chat-date-filter { font-size: 16px; }

    /* Auth card inputs — prevent iOS zoom */
    .auth-card input { font-size: 16px; }

    /* Settings panel padding */
    .settings-body { padding: 16px; }

    /* Larger color picker touch target on mobile */
    .name-color-input { width: 40px; height: 40px; }

    /* Modals fill more of the screen */
    .modal-box { max-width: 92%; padding: 24px 20px; }

    /* Search results fill available space */
    .search-result { font-size: 13px; }

    /* Larger unread dot on mobile for easier visibility */
    #channel-list li.unread::after { width: 10px; height: 10px; }

    /* Hide drag handles on mobile — touch DnD needs a separate
       implementation and the slide-over sidebar has limited space */
    .drag-handle { display: none; }

    /* "Jump to latest" — slightly bigger touch target on mobile */
    #jump-to-latest { bottom: 56px; width: 40px; height: 40px; font-size: 18px; }

    /* Inventory: filter inputs need 16px to prevent iOS zoom */
    .inv-filters input,
    .inv-filters select { font-size: 16px; }
    .inv-filters { padding: 10px 12px; }
    .inv-search-wrap { min-width: 100%; }

    /* Collapse toggle: readable on mobile */
    .inv-collapse-toggle span { font-size: 16px; }

    /* Column toggle: larger touch targets on mobile */
    .col-toggle-btn { font-size: 16px; }
    .col-toggle-dropdown {
        right: auto; left: 0; min-width: 220px;
    }
    .col-toggle-dropdown label {
        padding: 10px 14px;
        min-height: 44px;
    }
    .col-toggle-dropdown input[type="checkbox"] {
        width: 20px; height: 20px;
    }

    /* Inventory panel header */
    #inventory-panel header { padding: 10px 12px; }

    /* Inventory table: stack as cards on mobile */
    .inv-table thead { display: none; }
    .inv-table, .inv-table tbody, .inv-table tr, .inv-table td {
        display: block; width: 100%;
    }
    .inv-table tr {
        padding: 12px;
        border-bottom: 1px solid var(--border);
    }
    .inv-table td {
        padding: 3px 0; border: none;
        font-size: 13px;
        max-width: none; white-space: normal;
        overflow: visible;
    }
    .inv-table td::before {
        content: attr(data-label);
        font-size: 11px; color: var(--text-secondary);
        display: block; margin-bottom: 1px;
    }
    .inv-table td.editable:hover {
        outline: none;
    }
    /* Inline edit inputs at 16px on mobile to prevent iOS zoom */
    .inv-table .inline-edit { font-size: 16px; }

    /* Actions always visible on touch (no hover) */
    .inv-table td.actions-cell button { opacity: 0.7; }

    /* Larger checkbox touch targets on mobile */
    .inv-table .chk-col input[type="checkbox"] { width: 20px; height: 20px; }

    /* Batch bar: full width on mobile */
    #batch-bar {
        left: 10px; right: 10px; transform: none;
        flex-wrap: wrap; justify-content: center;
        padding: 10px 14px;
    }

    /* Add item / batch edit modals: fill screen */
    .add-item-modal .modal-box,
    .batch-edit-modal .modal-box { max-width: 95%; max-height: 85vh; }
    .add-item-form input,
    .add-item-form select,
    .add-item-form textarea,
    .batch-edit-form input,
    .batch-edit-form select { font-size: 16px; }
    .add-item-form .form-row { flex-direction: column; gap: 0; }

    /* Admin table: stack as cards on mobile */
    .admin-user-table thead { display: none; }
    .admin-user-table, .admin-user-table tbody, .admin-user-table tr, .admin-user-table td {
        display: block; width: 100%;
    }
    .admin-user-table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }
    .admin-user-table td {
        padding: 3px 0; border: none;
        font-size: 13px;
    }
    .admin-user-table td::before {
        content: attr(data-label);
        font-size: 11px; color: var(--text-secondary);
        display: block; margin-bottom: 1px;
    }
    .admin-user-table .actions { margin-top: 6px; }

    /* Draft cards: full width on mobile */
    .draft-card { max-width: 100%; }

    /* Events panel */
    #events-panel header { padding: 10px 12px; }
    .events-list { padding: 12px; }

    /* Events toolbar mobile */
    .events-toolbar { padding: 8px 12px; gap: 6px; }
    .events-status-tabs { overflow-x: auto; flex-shrink: 0; }
    .events-type-filter { font-size: 16px; /* prevent iOS zoom */ }
    .events-view-toggle { margin-left: 0; }
    .events-new-btn { width: 100%; text-align: center; padding: 10px; font-size: 15px; }
    .cal-nav { padding: 8px 12px; }

    /* Week grid stacks vertically on mobile */
    .cal-week-grid { grid-template-columns: 1fr; }
    .cal-week-day { min-height: auto; }
    .cal-week-day-header { text-align: left; display: flex; gap: 8px; align-items: baseline; }

    /* Month cells smaller on mobile */
    .cal-day { min-height: 50px; }
    .cal-event-pill { font-size: 9px; }

    /* No hover on touch — keep delete/download buttons visible */
    .event-delete-btn { opacity: 0.7; }
    .event-pullsheet-btn { opacity: 0.7; }

    /* Upload button needs good touch target on mobile */
    #upload-btn { padding: 10px 12px; font-size: 20px; }

    /* Edit event modal: fill screen on mobile */
    .edit-event-modal .modal-box {
        max-width: 95%; max-height: 85vh;
    }
    /* 16px font on all inputs to prevent iOS zoom */
    .edit-event-form input,
    .edit-event-form select,
    .edit-event-form textarea { font-size: 16px; }
    /* Date/time rows stack vertically on narrow screens */
    .edit-event-dates,
    .edit-event-times { flex-direction: column; gap: 0; }
    /* Larger checkbox touch target */
    .edit-event-allday input { width: 20px; height: 20px; }

    /* Clients panel */
    #clients-panel header { padding: 10px 12px; }
    .clients-toolbar { padding: 8px 12px; }
    .clients-list { padding: 12px; }
    /* 16px prevents iOS zoom on focus */
    .clients-toolbar input { font-size: 16px; }
    .edit-client-form input,
    .edit-client-form textarea { font-size: 16px; }
    /* No hover on touch — keep delete button visible */
    .client-delete-btn { opacity: 0.7; }
    .edit-client-modal .modal-box { max-width: 95%; max-height: 85vh; }

    /* Case packing modals: fill screen on mobile */
    .pack-case-modal .modal-box { max-width: 95%; }
    .case-contents-modal .modal-box { max-width: 95%; }
    /* 16px inputs prevent iOS zoom */
    .pack-case-search,
    .case-add-search { font-size: 16px; }
    /* Larger touch targets on remove/add buttons */
    .case-content-remove { font-size: 22px; padding: 6px 10px; }
    .case-add-result-item .add-to-case-btn { padding: 8px 16px; font-size: 14px; }

    /* Pull sheet viewer: larger touch targets + iOS-safe inputs */
    .ps-remove-btn { font-size: 20px; padding: 6px 10px; }
    .ps-add-search { font-size: 16px; }
    .ps-add-btn { padding: 8px 16px; font-size: 14px; }
    .ps-add-items-btn { padding: 6px 14px; font-size: 13px; }
    /* Return buttons: larger touch targets on mobile */
    .ps-return-item-btn { padding: 6px 14px; font-size: 14px; }
    #ps-return-all-btn { padding: 8px 16px; font-size: 14px; }

    /* Scanner: stack vertically and full-width on mobile */
    .scan-bar { padding: 6px 10px; flex-wrap: wrap; }
    .scan-input { width: 100%; flex: 1; min-width: 0; font-size: 16px; }
    .scan-detail-popup {
        bottom: 12px; right: 12px; left: 12px;
        min-width: unset; max-width: unset;
    }

    /* Pack Sheets: sidebar slides over on mobile */
    #packsheets-panel.active { flex-direction: column; }
    #ps-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        z-index: 20; width: 260px;
        transform: translateX(-260px);
        transition: transform 0.2s ease;
    }
    #ps-sidebar.mobile-open { transform: translateX(0); }
    #ps-header { padding: 10px 12px; }
    #ps-header h1 { font-size: 16px; }
    #ps-checklist { font-size: 12px; }
    #ps-checklist td { padding: 5px 8px; }
    #ps-checklist thead th { padding: 6px 8px; }
    #ps-chat-section.open { max-height: 50vh; }
    #ps-input { font-size: 16px; }

    /* Quotes: sidebar slides over on mobile (mirrors Pack Sheets) */
    #quotes-panel.active { flex-direction: column; }
    #quotes-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        z-index: 20; width: 280px;
        transform: translateX(-280px);
        transition: transform 0.2s ease;
    }
    #quotes-sidebar.mobile-open { transform: translateX(0); }
    #quotes-header { padding: 10px 12px; }
    #quotes-header h1 { font-size: 16px; }
    #quotes-editor { margin: 8px; }
}

/* ── Small phones (< 400px) ──────────────────────────── */
@media (max-width: 400px) {
    .msg { max-width: 92%; font-size: 13px; }
    #chat-area header h1 { font-size: 15px; }
    .msg-username { font-size: 10px; }
    .msg-time { font-size: 9px; }
}

/* ── Per-item Peripheral Suggestions modal ───────────────── */
/* Inventory row "🔗" button — visually quieter than dup/delete  */
.assoc-item-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 14px;
    padding: 2px 6px; border-radius: 4px;
}
.assoc-item-btn:hover { color: var(--accent); background: var(--bg-hover); }

.item-assoc-modal .modal-box {
    max-width: 760px; width: 96%;
    text-align: left;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.item-assoc-modal .modal-box h2 {
    text-align: left; margin-bottom: 6px; font-size: 18px;
}
.item-assoc-subtitle {
    font-size: 13px; color: var(--text-secondary);
    margin-bottom: 16px; line-height: 1.4;
}

.item-assoc-list {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden;
}
.item-assoc-empty {
    color: var(--text-secondary); font-size: 13px;
    text-align: center; padding: 24px 0;
    border: 1px dashed var(--border); border-radius: 8px;
}

.ia-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}
.ia-row:last-child { border-bottom: none; }
.ia-row:hover { background: var(--bg-hover); }

.ia-row-main { flex: 1; min-width: 0; }
.ia-peripheral {
    font-weight: 600; font-size: 14px; color: var(--text-primary);
    margin-bottom: 4px; cursor: text;
    word-break: break-word;
}
.ia-peripheral:hover { color: var(--accent); }

.ia-meta {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
    font-size: 11px;
}

/* Inline-editable pills — small chips that look clickable */
.ia-pill {
    padding: 2px 8px; border-radius: 999px;
    background: var(--bg-muted, #2a2a2a);
    color: var(--text-secondary);
    cursor: pointer; user-select: none;
    border: 1px solid transparent;
}
.ia-pill:hover {
    border-color: var(--accent); color: var(--text-primary);
}
.ia-pill-rel.rel-required  { background: rgba(231, 76, 60, 0.15); color: #ff8a7a; }
.ia-pill-rel.rel-typical   { background: rgba(52, 152, 219, 0.15); color: #6ab4f0; }
.ia-pill-rel.rel-optional  { background: rgba(149, 165, 166, 0.15); color: #b0b0b0; }

/* Source provenance badges (read-only) */
.ia-badge {
    padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.ia-badge-seed       { background: rgba(155, 89, 182, 0.18); color: #c49bdb; }
.ia-badge-user       { background: rgba(46, 204, 113, 0.18); color: #6dd497; }
.ia-badge-validated  { background: rgba(241, 196, 15, 0.20); color: #f0c75c; }
.ia-badge-research   { background: rgba(52, 152, 219, 0.15); color: #6ab4f0; }
.ia-badge-unknown    { background: var(--bg-muted, #2a2a2a); color: var(--text-muted); }

.ia-stats {
    color: var(--text-muted); font-size: 11px;
    padding-left: 4px;
}
.ia-stats-empty { color: var(--text-muted); opacity: 0.5; }

.ia-notes {
    margin-top: 6px; font-size: 12px; color: var(--text-secondary);
    cursor: text; line-height: 1.4;
    word-break: break-word;
}
.ia-notes:hover { color: var(--text-primary); }
.ia-notes-empty { font-style: italic; opacity: 0.6; }

.ia-delete-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 18px; line-height: 1;
    padding: 4px 8px; border-radius: 4px;
    align-self: flex-start;
}
.ia-delete-btn:hover { color: var(--danger-hover, #e74c3c); background: var(--bg-hover); }

/* Inline-edit input replaces a pill/cell — match the surrounding line height */
.ia-inline-edit {
    padding: 2px 6px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
}
.ia-inline-edit:focus { outline: none; }

/* Add-section at the bottom of the modal */
.item-assoc-add-section {
    margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px;
}
.item-assoc-add-section h3 {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 10px;
}
.item-assoc-add-row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    margin-bottom: 8px;
}
.item-assoc-field { display: flex; flex-direction: column; gap: 4px; }
.item-assoc-field label {
    font-size: 10px; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;
}
.item-assoc-field input,
.item-assoc-field select {
    padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 5px;
    background: var(--bg-input); color: var(--text-primary);
    font-size: 13px; font-family: inherit;
}
.item-assoc-field input:focus,
.item-assoc-field select:focus { outline: none; border-color: var(--accent); }
.item-assoc-add-btn {
    padding: 7px 14px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 5px; cursor: pointer;
    font-size: 13px; font-weight: 600;
    align-self: flex-end;
}
.item-assoc-add-btn:hover { background: var(--accent-hover, var(--accent)); }
.item-assoc-error {
    color: var(--danger, #e74c3c); font-size: 12px; margin-top: 6px;
    min-height: 14px;
}

.item-assoc-close-wrap {
    display: flex; justify-content: flex-end; margin-top: 14px;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .item-assoc-modal .modal-box { max-width: 96%; padding: 16px; }
    .ia-meta { gap: 4px; }
    .ia-pill, .ia-badge { font-size: 10px; }
    .item-assoc-add-row { flex-direction: column; align-items: stretch; }
    .item-assoc-field { width: 100% !important; }
}

/* ── Low-stock consumable indicator ──────────────────────── */
.low-stock-flag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(231, 76, 60, 0.15);
    color: #ff6b5e;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Always-on "consumable" badge — sits after the model name. Quieter than the
   red LOW badge so it reads as a neutral status, not a warning. */
.consumable-flag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(155, 89, 182, 0.15);
    color: #c49bdb;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Inventory Recount modal ─────────────────────────────── */
.recount-trigger-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 14px;
    background: var(--accent);
    color: #fff;
    border: none; border-radius: 6px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.recount-trigger-btn:hover { background: var(--accent-hover, var(--accent)); filter: brightness(1.1); }

.recount-modal .modal-box {
    max-width: 760px; width: 96%;
    text-align: left;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column;
}
.recount-modal .modal-box h2 {
    text-align: left; margin-bottom: 6px; font-size: 18px;
}
.recount-subtitle {
    font-size: 13px; color: var(--text-secondary);
    margin-bottom: 14px; line-height: 1.4;
}
.recount-toolbar {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 10px; flex-wrap: wrap;
}
.recount-search {
    flex: 1; min-width: 200px;
    padding: 7px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-input); color: var(--text-primary);
    font-size: 13px;
}
.recount-search:focus { outline: none; border-color: var(--accent); }
.recount-consumables-only {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
    cursor: pointer;
}
.recount-consumables-only input { width: auto; }

.recount-list-wrap {
    flex: 1; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 12px;
}
.recount-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.recount-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--bg-secondary, var(--bg-primary));
    text-align: left; padding: 8px 10px;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.recount-table th.num, .recount-table td.num { text-align: right; }
.recount-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.recount-table tbody tr:last-child td { border-bottom: none; }
.recount-table tbody tr:hover { background: var(--bg-hover); }
.recount-table td.cat {
    color: var(--text-secondary); font-size: 12px;
    white-space: nowrap;
}
.recount-table td.current-col {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    width: 80px;
}
.recount-table td.counted-col { width: 90px; }
.recount-qty-input {
    width: 70px; padding: 4px 6px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg-input); color: var(--text-primary);
    font-size: 13px; text-align: right;
    font-variant-numeric: tabular-nums;
}
.recount-qty-input:focus { outline: none; border-color: var(--accent); }

.recount-consumable-tag {
    display: inline-block;
    padding: 1px 6px; border-radius: 3px;
    background: rgba(155, 89, 182, 0.15);
    color: #c49bdb;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-left: 6px; vertical-align: middle;
}
.recount-low-tag {
    display: inline-block;
    padding: 1px 6px; border-radius: 3px;
    background: rgba(231, 76, 60, 0.15);
    color: #ff6b5e;
    font-size: 9px; font-weight: 700;
    margin-right: 6px; vertical-align: middle;
}

.recount-empty {
    color: var(--text-secondary); font-size: 13px;
    padding: 24px; text-align: center;
}
.recount-note-row {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 12px;
}
.recount-note-row label {
    font-size: 11px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.recount-note-row input {
    padding: 7px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-input); color: var(--text-primary);
    font-size: 13px;
}
.recount-note-row input:focus { outline: none; border-color: var(--accent); }

.recount-error {
    color: var(--danger, #e74c3c); font-size: 12px;
    margin-bottom: 8px;
}
.recount-actions {
    display: flex; gap: 8px; justify-content: flex-end;
}
.recount-save-btn {
    padding: 8px 16px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 6px; cursor: pointer;
    font-size: 13px; font-weight: 600;
}
.recount-save-btn:hover { filter: brightness(1.1); }

/* ── Tag pills (inventory list) ──────────────────────────── */
.tag-pill {
    display: inline-block;
    margin: 1px 3px 1px 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(52, 152, 219, 0.15);
    color: #6ab4f0;
    font-size: 10px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.5;
    white-space: nowrap;
    font-family: inherit;
}
.tag-pill:hover {
    background: rgba(52, 152, 219, 0.30);
    border-color: var(--accent);
    color: var(--text-primary);
}
.tag-empty { color: var(--text-muted); font-size: 12px; }
/* Small "⋯" button at the end of each tag list — opens the Manage Tags
   modal. Visible at low contrast so it doesn't compete with actual tag
   pills; brightens on hover. */
.tag-manage-btn {
    display: inline-block;
    margin: 1px 0 1px 2px;
    padding: 0 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    font-family: inherit;
    vertical-align: middle;
}
.tag-manage-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #1a1a1a;
}
/* Override the parent td's nowrap+ellipsis specifically for the tags
   column. Without this, long tag lists clip past the cell edge and
   the "⋯" manage button is unreachable by clicks. Wrap onto multiple
   lines and let the cell grow vertically so every pill (and the
   manage button) is visible and clickable. */
.inv-table td.tag-cell {
    max-width: 280px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.7;
}
/* ── Manage Tags modal ─────────────────────────────────────── */
.tag-manage-modal { min-width: 380px; max-width: 520px; }
.tag-manage-subtitle {
    font-size: 12px; color: var(--text-muted); margin-bottom: 12px;
}
.tag-manage-chips {
    min-height: 48px;
    margin-bottom: 12px;
    padding: 6px;
    display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start;
}
.tag-manage-chips .chip {
    background: rgba(52, 152, 219, 0.18);
    color: #6ab4f0;
    border-radius: 999px;
    padding: 2px 4px 2px 10px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 500;
}
.tag-manage-chips .chip-x {
    background: none; border: none; cursor: pointer;
    color: inherit; opacity: 0.6;
    font-size: 14px; line-height: 1; padding: 2px 6px;
    border-radius: 999px;
}
.tag-manage-chips .chip-x:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.tag-manage-empty {
    color: var(--text-muted); font-style: italic; font-size: 12px;
    padding: 8px 4px;
}
.tag-manage-add { display: flex; flex-direction: column; gap: 4px; }
.tag-manage-add span {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.tag-manage-input {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
}
.tag-manage-input:focus { outline: none; border-color: var(--accent); }
.tag-manage-hint {
    font-size: 11px; color: var(--text-muted); margin-top: 4px; font-style: italic;
}
.tag-manage-save {
    padding: 7px 16px;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #1a1a1a;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.tag-manage-save:hover { filter: brightness(1.1); }

/* ── Tag chip input (Add/Edit Item modal) ────────────────── */
/* Looks like a single text input from the outside but holds chips inline. */
.chip-input {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-input);
    cursor: text;
    min-height: 36px;
    align-items: center;
}
.chip-input:focus-within { border-color: var(--accent); }
.chip-input .chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 4px 2px 8px;
    border-radius: 999px;
    background: rgba(52, 152, 219, 0.15);
    color: #6ab4f0;
    font-size: 12px; font-weight: 600;
    line-height: 1.4;
    user-select: none;
}
.chip-input .chip-label { line-height: 1; }
.chip-input .chip-x {
    background: none; border: none; cursor: pointer;
    color: rgba(106, 180, 240, 0.7);
    font-size: 14px; line-height: 1;
    padding: 0 4px; border-radius: 50%;
    transition: color 0.1s, background 0.1s;
}
.chip-input .chip-x:hover {
    background: rgba(231, 76, 60, 0.20);
    color: #ff6b5e;
}
.chip-input-field {
    flex: 1; min-width: 100px;
    border: none !important; outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px; font-family: inherit;
    padding: 4px 2px !important;
}

/* ── Inventory list tag pills (refined for hover-× remove) ─ */
/* Override the older single-button .tag-pill rule. Pill is now a span that
   wraps a label button + a × button. The × hides until row-hover so it
   doesn't compete with content; on touch devices it's always visible. */
.tag-pill {
    display: inline-flex; align-items: center;
    margin: 1px 3px 1px 0;
    border-radius: 999px;
    background: rgba(52, 152, 219, 0.15);
    color: #6ab4f0;
    font-size: 10px; font-weight: 600;
    border: 1px solid transparent;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    /* Reset button-y defaults the inner buttons inherit */
    padding: 0;
    cursor: default;
}
.tag-pill:hover {
    background: rgba(52, 152, 219, 0.30);
    border-color: var(--accent);
    color: var(--text-primary);
}
.tag-pill-label {
    background: none; border: none; cursor: pointer;
    color: inherit; font: inherit;
    padding: 1px 4px 1px 7px;
    line-height: inherit;
}
.tag-pill-x {
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 12px; line-height: 1;
    padding: 0 6px 0 2px;
    margin-left: -2px;
    opacity: 0;
    transition: opacity 0.1s, color 0.1s;
}
.tag-pill:hover .tag-pill-x { opacity: 0.7; }
.tag-pill-x:hover { opacity: 1; color: #ff6b5e; }
/* Touch devices have no hover — keep the × visible always */
@media (hover: none) {
    .tag-pill-x { opacity: 0.6; }
}

/* ── Message wrap (bubble + retry button) ────────────────── */
/* Wraps the bubble and the actions row so the retry sits outside the
   blue bubble. Mirrors the bubble's alignment (right for "me", left for
   everyone else) by inheriting align-self from the message column. */
.msg-wrap {
    display: flex; flex-direction: column;
    max-width: 75%;
}
.msg-wrap.me    { align-self: flex-end;   align-items: flex-end; }
.msg-wrap.other { align-self: flex-start; align-items: flex-start; }
/* Bubbles inside a wrap shouldn't double-up the max-width */
.msg-wrap .msg { max-width: 100%; }

.msg-actions {
    display: flex; gap: 4px;
    margin-top: 3px;
    padding: 0 2px;
    opacity: 0;
    transition: opacity 0.1s;
}
/* Hover anywhere on the wrap (bubble OR actions area) reveals the buttons */
.msg-wrap:hover .msg-actions { opacity: 1; }
.msg-retry-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 13px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}
.msg-retry-btn:hover {
    color: var(--accent); border-color: var(--accent);
    background: var(--bg-hover);
}
/* On touch devices keep them visible since there's no hover */
@media (hover: none) {
    .msg-actions { opacity: 0.5; }
}

/* ── Peripheral suggestions card (chat) ──────────────────── */
.suggestions-card {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary, var(--bg-primary));
    overflow: hidden;
}
.suggestions-title {
    padding: 8px 12px;
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-header, transparent);
}
.suggestions-list {
    display: flex; flex-direction: column;
}
.suggestion-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    line-height: 1.3;
}
.suggestion-row:last-child { border-bottom: none; }
.suggestion-row:hover { background: var(--bg-hover); }
.suggestion-row .sug-check {
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.suggestion-row .sug-qty {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    color: var(--text-secondary);
}
.suggestion-row .sug-model {
    flex: 1;
    word-break: break-word;
}
.suggestion-row .sug-rel {
    padding: 1px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    flex-shrink: 0;
}
.suggestion-row .sug-rel-required {
    background: rgba(231, 76, 60, 0.15); color: #ff8a7a;
}
.suggestion-row .sug-rel-typical {
    background: rgba(52, 152, 219, 0.15); color: #6ab4f0;
}
.suggestion-row .sug-rel-optional {
    background: rgba(149, 165, 166, 0.18); color: #b0b0b0;
}

.suggestions-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-header, transparent);
}
.sug-add-btn, .sug-skip-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
}
.sug-skip-btn {
    background: transparent; color: var(--text-secondary);
}
.sug-skip-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sug-add-btn {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.sug-add-btn:hover { filter: brightness(1.1); }
.sug-add-btn:disabled, .sug-skip-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}

.suggestions-card-locked {
    opacity: 0.7;
}
.suggestions-locked-note {
    padding: 6px 12px;
    font-size: 11px; color: var(--accent);
    border-top: 1px solid var(--border);
    text-align: center;
    font-style: italic;
}

/* ── Suggestions card sections (primary vs secondary) ───── */
.suggestions-section-header {
    padding: 6px 12px;
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    background: var(--bg-secondary, transparent);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
/* First section header sits flush against the title — no double border */
.suggestions-card .suggestions-title + .suggestions-section-header { border-top: none; }
/* Primary list (what the user actually asked for) — slightly stronger background */
.suggestions-list-primary .suggestion-row {
    background: var(--bg-primary);
}
.suggestions-list-primary .suggestion-row .sug-rel {
    /* Originals don't need the relationship pill yelling at the user — mute it */
    opacity: 0.45;
}
/* Secondary list (agent suggestions) — subtle indentation cue */
.suggestions-list-secondary .suggestion-row {
    background: var(--bg-secondary, var(--bg-primary));
}

/* ── Group-header drag (sort-by-category / group-by-package on quote) ─ */
/* draggable + listeners are on the <td>, not the <tr>, because drag-drop
   on <tr> elements is unreliable in some browsers (drop events don't
   always fire). Cells work everywhere. */
.quote-category-cell { cursor: grab; }
.quote-category-cell.dragging { opacity: 0.5; cursor: grabbing; }
.q-group-drag {
    display: inline-block;
    margin-right: 6px;
    color: var(--text-muted);
    user-select: none;
    font-size: 12px;
    letter-spacing: -1px;
    /* pointer-events:none so drag/drop events fire on the parent cell
       directly. Without this, the span was capturing some events. */
    pointer-events: none;
}
.quote-category-cell:hover .q-group-drag { color: var(--text-primary); }
.quote-category-cell.drop-above {
    box-shadow: inset 0 2px 0 0 var(--accent);
}
.quote-category-cell.drop-below {
    box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* ── Inline SVG icons (Lucide-style) ───────────────────────────
   All icons inherit text color via stroke="currentColor". Sized
   1em so they scale with the surrounding font-size. The inline-
   block + middle alignment keeps them on the text baseline rather
   than dropping below it (default SVG baseline behavior). */
.icon {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
    color: inherit;
}
/* Icon-only buttons (no adjacent text) use this to claim a square
   target. Pair with aria-label on the button so screen readers
   still know what it does. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 32px; height: 32px;
    padding: 0;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.btn-icon:hover { color: var(--accent); border-color: var(--accent); }

/* ── Notifications: bell, dropdown, toast ─────────────────────
   Bell sits in the nav rail next to the active-tab badge. The
   dropdown is absolutely positioned next to the nav rail; the
   toast container is fixed top-right and stacks vertically. */
.nav-bell {
    position: relative;
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 6px;
    cursor: pointer;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    transition: color 0.15s, background-color 0.15s;
    /* Push to the bottom of the nav rail (the rail is flex-direction:
       column). margin-bottom keeps the bell from clinging to the very
       last pixel of the viewport. */
    margin-top: auto;
    margin-bottom: 10px;
}
.nav-bell:hover { color: var(--accent); background: var(--bg-hover); }
.nav-bell-badge {
    position: absolute;
    top: 0; right: 0;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--danger, #d44);
    color: white;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    box-sizing: border-box;
}
/* `display: flex` below would normally override the [hidden] HTML
   attribute (UA stylesheet's `[hidden] { display: none }` has lower
   specificity than a class selector). These force [hidden] to actually
   hide. Same fix for .notif-strip below. */
.notif-dropdown[hidden],
.notif-strip[hidden] { display: none !important; }

.notif-dropdown {
    position: fixed;
    /* Top-right anchor avoids clashing with the slide-out nav-menu
       (which sits at left:48px and is 200px wide). The bell is in the
       nav-rail at ~top:80px; the dropdown peels off from there toward
       the right edge so it sits over content, not over the sidebar. */
    top: 60px;
    right: 16px;
    width: 340px;
    max-height: 70vh;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    overflow: hidden;
    /* Above nav-rail (z:10), nav-menu (z:9), overlay (z:8). Below
       modal overlays which run in the 10000+ band. */
    z-index: 500;
    display: flex; flex-direction: column;
}
.notif-dropdown-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: grab;
    user-select: none;
    /* Allow horizontal drag on touch devices without the browser
       hijacking it for scroll. The body of the dropdown can still
       scroll vertically; only the header is locked down. */
    touch-action: none;
}
.notif-dropdown-header.dragging { cursor: grabbing; }
.notif-drag-grip {
    /* Six-dot drag affordance — pure CSS, no extra SVG. */
    display: inline-block;
    width: 10px; height: 16px;
    background-image: radial-gradient(circle, var(--text-muted) 1px, transparent 1.5px);
    background-size: 4px 4px;
    background-position: 0 2px;
    opacity: 0.7;
    flex-shrink: 0;
}
.notif-dropdown-header h4 {
    flex: 1;  /* push buttons to the right */
}
.notif-dropdown-header h4 {
    margin: 0; font-size: 14px; color: var(--text-primary);
    flex: 1;
}
.notif-minimize {
    background: none; border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    display: inline-flex; align-items: center;
    border-radius: 4px;
    /* The icon is chevron-down; rotate so it points to the right edge
       (the direction the panel collapses to). */
    transform: rotate(-90deg);
}
.notif-minimize:hover { color: var(--accent); background: var(--bg-hover); }

/* Minimized vertical strip — clings to the right edge. Bell icon
   stacked over the unread count. Click anywhere on the strip to
   restore the full panel at its last saved position. */
.notif-strip {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    min-height: 60px;
    padding: 8px 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 500;
    box-shadow: -2px 4px 12px rgba(0,0,0,0.25);
    transition: color 0.15s, background-color 0.15s, transform 0.2s;
}
.notif-strip:hover {
    color: var(--accent);
    background: var(--bg-hover);
    transform: translateY(-50%) translateX(-2px);
}
.notif-strip-badge {
    min-width: 18px;
    padding: 1px 4px;
    background: var(--danger, #d44);
    color: white;
    font-size: 10px; font-weight: 600;
    line-height: 14px;
    text-align: center;
    border-radius: 8px;
    box-sizing: border-box;
}
.notif-mark-all {
    background: none; border: none;
    color: var(--text-secondary); font-size: 12px;
    cursor: pointer; padding: 2px 4px;
}
.notif-mark-all:hover { color: var(--accent); }
.notif-list {
    overflow-y: auto;
    flex: 1;
}
.notif-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.notif-row {
    display: flex; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.15s;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--bg-hover); }
.notif-row.unread { background: rgba(80,140,220,0.06); }
.notif-row.unread .notif-row-title { font-weight: 600; }
.notif-row-icon {
    flex-shrink: 0;
    color: var(--text-secondary);
    padding-top: 1px;
}
.notif-row-body { min-width: 0; flex: 1; }
.notif-row-title {
    font-size: 13px; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis;
}
.notif-row-time {
    font-size: 11px; color: var(--text-muted);
    margin-top: 2px;
}

/* Toast container — fixed top-right, stack downward */
.toast-container {
    position: fixed;
    top: 16px; right: 16px;
    display: flex; flex-direction: column;
    gap: 8px;
    z-index: 10000;
    pointer-events: none;  /* container is just a layout shell */
}
.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    min-width: 280px; max-width: 380px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    color: var(--text-primary);
    cursor: pointer;
    animation: toast-slide-in 0.25s ease-out;
    transition: opacity 0.3s, transform 0.3s;
}
.toast.fading { opacity: 0; transform: translateX(20px); }
.toast-icon {
    flex-shrink: 0;
    color: var(--accent);
    padding-top: 1px;
}
.toast-body { flex: 1; min-width: 0; }
.toast-title {
    font-size: 13px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis;
}
.toast-sub {
    font-size: 11px; color: var(--text-muted);
    margin-top: 2px;
}
.toast-close {
    flex-shrink: 0;
    background: none; border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 2px;
}
.toast-close:hover { color: var(--text-primary); }
@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Style the [rsvp] chat messages distinctly from regular AI replies.
   Detection happens in app-chat.js (or the message renderer); this
   class is added there. Kept here so the visual treatment lives with
   the rest of the notification surface. */
.msg-body.rsvp-msg {
    background: rgba(80,140,220,0.06);
    border-left: 3px solid var(--accent);
    padding-left: 8px;
}

/* ── Password reset dialog ───────────────────────────────────
   Slightly wider box than the default modal-box (to fit the
   long suggested password + Regenerate button without wrapping). */
.modal-overlay .pw-reset-box {
    max-width: 460px;
    text-align: left;
}
.pw-reset-box h2 { margin-top: 0; margin-bottom: 10px; font-size: 18px; }
.pw-reset-help {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 14px;
    line-height: 1.45;
}
.pw-reset-field {
    display: block;
    margin-bottom: 14px;
}
.pw-reset-field > span {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.pw-reset-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.pw-reset-input,
.pw-reset-confirm-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: 0.5px;
    box-sizing: border-box;
}
.pw-reset-input:focus,
.pw-reset-confirm-input:focus {
    outline: none;
    border-color: var(--accent);
}
.pw-reset-regen {
    flex-shrink: 0;
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: color 0.15s, border-color 0.15s;
}
.pw-reset-regen:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.pw-reset-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--danger, #e57373);
}

/* ── DM channel styling ──────────────────────────────────────
   The user's private "Agent" channel — pinned at the top of the
   channel list, with a bot icon instead of the # prefix. Read-only-
   ish in the sense that it can't be deleted or reordered. */
#channel-list li.channel-dm {
    border-bottom: 1px solid var(--border);
}
.channel-name-dm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 500;
}

/* ── Activity cards in #warehouse ────────────────────────────
   Styled differently from regular AI replies so the team can
   scan the channel and immediately see "this is an action log,
   not a chat reply." Subtle accent border + monospace-ish feel. */
.activity-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-hover);
    border-left: 2px solid var(--accent);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 100%;
}
.activity-card.clickable {
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.activity-card.clickable:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}
.activity-card-icon {
    flex-shrink: 0;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
}
.activity-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Disposed items: row styling + dispose modal ─────────────
   Disposed rows render with strikethrough + reduced opacity so
   the user sees at a glance these are audit records, not active
   inventory. They appear only when "Show disposed" is toggled. */
#inv-tbody tr[data-disposed="1"] {
    opacity: 0.55;
    background: var(--bg-hover);
}
#inv-tbody tr[data-disposed="1"] td {
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
}
/* Don't strike the action cell (the Restore button needs to read normally). */
#inv-tbody tr[data-disposed="1"] td.actions-cell {
    text-decoration: none;
}
.undispose-item-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}
.undispose-item-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.dispose-item-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dispose-item-btn:hover {
    color: var(--danger, #e57373);
    border-color: var(--danger, #e57373);
}

/* Dispose modal — uses standard modal-box pattern. */
.dispose-modal-box {
    max-width: 480px;
    text-align: left;
}
.dispose-modal-box h2 { margin-top: 0; }
.dispose-help {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 12px;
}
.dispose-item-line {
    font-size: 13px;
    padding: 8px 10px;
    margin-bottom: 12px;
    background: var(--bg-hover);
    border-left: 2px solid var(--accent);
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.dispose-field {
    display: block;
    margin-bottom: 12px;
}
.dispose-field > span {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.dispose-field textarea,
.dispose-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.dispose-field textarea:focus,
.dispose-field select:focus {
    outline: none;
    border-color: var(--accent);
}
.dispose-error {
    font-size: 12px;
    color: var(--danger, #e57373);
    margin-bottom: 12px;
}

/* ── Tour parent/child grouping in Events list ──────────────
   Master row reads as a header; children indent below to show
   the parent/child relationship without nesting DOM. */
.event-card.tour-master-card {
    background: var(--bg-hover);
    border-left: 3px solid var(--accent);
}
.event-card.tour-master-card .event-card-name {
    font-weight: 600;
}
.tour-toggle {
    display: inline-block;
    width: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    margin-right: 4px;
}
.tour-toggle:hover { color: var(--accent); }
.tour-stop-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.event-card.tour-child {
    margin-left: 24px;
    border-left: 2px solid var(--border);
    /* visual cue that this is nested */
    background: var(--bg-primary);
}

/* ── Tour context inside event modal ─────────────────────────
   Banner appears on child stops; stops list appears on the master.
   Both sit at the top of the modal so they read before the form
   fields. */
.tour-context {
    margin: 12px 0;
    padding: 0;
}
.tour-context-banner {
    padding: 10px 14px;
    background: var(--bg-hover);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.tour-context-banner span { flex: 1; }
.tour-context-back,
.tour-stops-open {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    transition: background-color 0.15s;
}
.tour-context-back:hover,
.tour-stops-open:hover {
    background: var(--bg-hover);
}

.tour-context-stops {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg-hover);
    border-radius: 4px;
}
.tour-stops-header {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex; align-items: center; justify-content: space-between;
}
.tour-stops-add-btn {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 3px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.tour-stops-add-btn:hover { background: rgba(192, 132, 252, 0.10); }
.tour-stops-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tour-stops-list-item {
    display: grid;
    grid-template-columns: 130px 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.tour-stops-date-input,
.tour-stops-venue-input {
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    width: 100%;
}
.tour-stops-date-input:hover,
.tour-stops-venue-input:hover {
    border-color: var(--border);
    background: var(--bg-hover);
}
.tour-stops-date-input:focus,
.tour-stops-venue-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-input);
}
.tour-stops-remove {
    background: none; border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px; line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
}
.tour-stops-remove:hover {
    background: var(--danger);
    color: #fff;
}
.tour-stops-add-form {
    display: grid;
    grid-template-columns: 130px 1fr auto auto;
    gap: 8px; align-items: center;
    padding: 10px 8px;
    margin-top: 8px;
    background: var(--bg-hover);
    border: 1px dashed var(--accent);
    border-radius: 6px;
}
.tour-stops-add-form input {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
}
.tour-stops-add-form input:focus { outline: none; border-color: var(--accent); }
.tour-stops-add-form .tour-add-save {
    padding: 6px 12px; border: 1px solid var(--accent);
    background: var(--accent); color: #fff;
    border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 500;
}
.tour-stops-add-form .tour-add-cancel {
    padding: 6px 10px; border: 1px solid var(--border);
    background: transparent; color: var(--text-secondary);
    border-radius: 4px; cursor: pointer; font-size: 12px;
}
.tour-stops-list-item:last-child { border-bottom: none; }
.tour-stops-date {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.tour-stops-venue {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tour-stops-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 8px;
    text-align: center;
}

/* ── Sub-rentals (event modal) ───────────────────────────────
   Distinct visual from the owned-inventory pull sheet — accent border
   on the left so the warehouse crew sees at a glance that the kit on
   this event is partially sub-rented. */
.sub-rentals-section {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid #c084fc;
    border-radius: 4px;
    background: var(--bg-hover);
}
.sub-rentals-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.sub-rentals-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.sub-rentals-add-btn {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.sub-rentals-add-btn:hover { background: var(--bg-primary); }
.sub-rentals-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 6px 0;
}
.sub-rentals-list { display: flex; flex-direction: column; gap: 6px; }
.sub-rental-qty { display: inline-flex; align-items: center; gap: 2px; }
.sr-inline-qty, .sr-inline-charge, .sr-inline-weekly-charge,
.sr-inline-cost, .sr-inline-weekly-cost {
    width: 64px;
    padding: 1px 4px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    text-align: right;
}
.sr-inline-qty { width: 48px; text-align: center; }
.sr-inline-qty:focus, .sr-inline-charge:focus, .sr-inline-weekly-charge:focus,
.sr-inline-cost:focus, .sr-inline-weekly-cost:focus {
    outline: none; border-color: var(--accent);
}
.sr-inline-readonly { color: var(--text-primary); font-weight: 500; }
.sr-rate-unit { color: var(--text-muted); font-size: 11px; margin-left: 1px; margin-right: 6px; }
.sr-inline-charge-wrap, .sr-inline-cost-wrap {
    display: inline-flex; align-items: center; gap: 3px;
    margin-right: 8px;
}
.sub-rental-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
}
.sub-rental-line1 {
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.sub-rental-model { font-weight: 500; color: var(--text-primary); }
.sub-rental-vendor { font-size: 11px; color: var(--text-muted); }
.sub-rental-line2 {
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.sub-rental-notes {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}
.sub-rental-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sub-rental-status-select {
    height: 26px;
    padding: 0 6px;
    font-size: 11px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.sub-rental-status {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.sub-rental-status.status-needed    { background: rgba(127,127,127,0.15); color: var(--text-secondary); }
.sub-rental-status.status-confirmed { background: rgba(80,140,220,0.15); color: var(--accent); }
.sub-rental-status.status-picked_up { background: rgba(230,200,100,0.15); color: #cb9; }
.sub-rental-status.status-returned  { background: rgba(60,180,90,0.18); color: #6ec06e; }
.sub-rental-edit, .sub-rental-remove {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 4px;
    width: 24px; height: 24px;
    padding: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.sub-rental-edit:hover { color: var(--accent); border-color: var(--accent); }
.sub-rental-remove:hover { color: #d88; border-color: #d88; }

/* Add/edit modal form */
.sub-rental-modal { max-width: 540px; text-align: left; }
.sub-rental-form,
.vendor-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sub-rental-form label,
.vendor-form label { display: flex; flex-direction: column; gap: 3px; }
.sub-rental-form label span,
.vendor-form label span {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sub-rental-form input,
.sub-rental-form select,
.sub-rental-form textarea,
.vendor-form input,
.vendor-form textarea {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
}
.sub-rental-form .sr-notes-field,
.vendor-form .vendor-notes-field { grid-column: 1 / -1; }
.sub-rental-error,
.vendor-error {
    margin: 8px 0;
    font-size: 12px;
    color: var(--danger, #e57373);
}

/* Vendors admin (Settings) */
.vendors-list { display: flex; flex-direction: column; gap: 8px; }
.vendor-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
}
.vendor-name { font-weight: 500; font-size: 14px; }
.vendor-meta {
    display: flex; gap: 14px;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.vendor-notes {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-style: italic;
}
.vendor-actions { display: flex; gap: 6px; align-items: center; }
.vendor-edit-btn, .vendor-delete-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.vendor-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.vendor-delete-btn:hover { color: #d88; border-color: #d88; }
.vendor-add-row { margin-top: 10px; }
.vendor-add-row button {
    background: var(--bg-primary);
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.vendor-add-row button:hover { color: var(--accent); border-color: var(--accent); }
.vendors-empty {
    padding: 10px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Sub-rentals on pack sheet ───────────────────────────────
   Sits above the items checklist so warehouse crew sees
   vendor-sourced gear first (it usually arrives separately
   from the warehouse pull). Accent border matches the event
   modal sub-rentals section for visual consistency. */
.ps-sub-rentals {
    margin: 12px 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid #c084fc;
    border-radius: 4px;
    background: var(--bg-hover);
}
.ps-sub-rentals-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.ps-sub-rentals-list {
    display: flex; flex-direction: column; gap: 6px;
}
.ps-sr-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
}
.ps-sr-row.ps-sr-status-returned { opacity: 0.55; }
.ps-sr-line1 {
    display: flex; gap: 8px; align-items: baseline;
}
.ps-sr-qty { font-weight: 600; color: var(--text-primary); }
.ps-sr-model { color: var(--text-primary); }
.ps-sr-from {
    font-size: 11px;
    color: var(--text-muted);
}
.ps-sr-dates,
.ps-sr-notes {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.ps-sr-actions {
    display: flex; align-items: center; gap: 8px;
}
.ps-sr-status-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(127,127,127,0.15);
    color: var(--text-secondary);
}
.ps-sr-status-confirmed .ps-sr-status-pill { background: rgba(80,140,220,0.15); color: var(--accent); }
.ps-sr-status-picked_up  .ps-sr-status-pill { background: rgba(230,200,100,0.15); color: #cb9; }
.ps-sr-status-returned   .ps-sr-status-pill { background: rgba(60,180,90,0.18); color: #6ec06e; }
.ps-sr-advance {
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    white-space: nowrap;
    transition: background-color 0.15s;
}
.ps-sr-advance:hover { background: var(--bg-hover); }
.ps-sr-advance:disabled { opacity: 0.5; cursor: wait; }

/* ── Sub-rental history (Settings) ───────────────────────────
   Compact table — frequency-sorted so 'frequently sub-rented'
   gear floats to the top. */
.sub-rental-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.sub-rental-history-table th {
    text-align: left;
    padding: 6px 8px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}
.sub-rental-history-table th.num,
.sub-rental-history-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sub-rental-history-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.sub-rental-history-table tr:last-child td { border-bottom: none; }
.sub-rental-history-table .muted {
    color: var(--text-muted);
    font-size: 11px;
}
.sub-rental-history-empty {
    padding: 12px;
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    font-size: 13px;
}