/* ==========================================================================
   BridgeWorks CM — Procore-inspired construction PM design
   ========================================================================== */
:root {
    --primary:        #f97316;          /* Procore-orange accent */
    --primary-dark:   #c2410c;
    --primary-soft:   #fff7ed;
    --bg:             #f5f6f8;
    --panel:          #ffffff;
    --sidebar-bg:     #1f2937;
    --sidebar-text:   #cbd5e1;
    --sidebar-active: #f97316;
    --sidebar-hover:  #374151;
    --border:         #e5e7eb;
    --text:           #111827;
    --text-muted:     #6b7280;
    --text-light:     #9ca3af;
    --success:        #16a34a;
    --warn:           #f59e0b;
    --danger:         #dc2626;
    --info:           #2563eb;
    --radius:         6px;
    --shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
    --shadow:         0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg:      0 8px 24px rgba(0,0,0,0.12);
    --sidebar-width:  240px;
    --topbar-height:  56px;
}

* { box-sizing: border-box; margin:0; padding:0; }

/* ========================================================================== */
/*  Boot gate — hide the app shell until Auth.checkSession() resolves so the  */
/*  static markup (default brand, hardcoded user card, full nav) cannot leak  */
/*  to a different tenant on refresh. The class is removed by app.js once     */
/*  the session is confirmed (or the login screen is shown).                  */
/* ========================================================================== */
body.bw-booting #sidebar,
body.bw-booting #topbar,
body.bw-booting #page-content,
body.bw-booting #site-footer { visibility: hidden !important; }
/* Login screen lives inside #page-content; opt it back in so a logged-out
   user still sees the login form during the brief boot window. */
body.bw-booting .login-shell,
body.bw-booting .login-shell * { visibility: visible !important; }
html, body {
    height:100%; font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg); color: var(--text); font-size:14px; line-height:1.5;
}
a { color: inherit; text-decoration: none; cursor:pointer; }

/* ============================ Sidebar ============================ */
#sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    height: 100vh; position: fixed; top:0; left:0;
    display:flex; flex-direction:column;
    overflow-y:auto; z-index:100;
}
#sidebar.collapsed { width: 60px; }
#sidebar.collapsed .brand-text,
#sidebar.collapsed .nav-section,
#sidebar.collapsed .nav-link span:not(.nav-icon),
#sidebar.collapsed .user-card > div:last-child { display:none; }

.brand {
    display:flex; align-items:center; justify-content:center;
    padding: 14px 16px; border-bottom: 1px solid #374151;
}
.brand-logo-full {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%;
}
.brand-logo-full img {
    width: 160px; height: auto; display: block;
    object-fit: contain;
}
.brand-mark {
    width:36px; height:36px; border-radius:8px;
    background: transparent;
    overflow: hidden;
    color: #fff; font-weight:700; font-size:14px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink: 0;
}
.brand-mark .brand-mark-fallback {
    width:36px; height:36px; border-radius:8px;
    background: var(--primary);
    display: grid; place-items: center;
}
#sidebar.collapsed .brand-logo-full { display: none; }
#sidebar.collapsed .brand-mark-collapsed { display: flex !important; }
.brand-company-name {
    display: none;
    color: #fff; font-weight: 700; font-size: 13px;
    text-align: center; margin-top: 6px; padding: 0 6px;
    line-height: 1.2; word-break: break-word;
}
.brand-name { color: #fff; font-weight: 700; font-size: 15px; }
.brand-sub  { color: #9ca3af; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

.nav-main { flex:1; padding: 12px 8px; }
.nav-section {
    color: #6b7280; font-size: 10px; letter-spacing: 0.1em;
    padding: 14px 12px 6px; text-transform: uppercase; font-weight: 700;
}
.nav-link {
    display:flex; align-items:center; gap:10px;
    padding: 8px 12px; border-radius: 6px; margin: 1px 0;
    color: var(--sidebar-text); font-size: 13px;
    transition: background 0.12s, color 0.12s;
}
.nav-link:hover { background: var(--sidebar-hover); color: #fff; }
.nav-link.active {
    background: var(--sidebar-active); color: #fff; font-weight: 600;
}
.nav-icon {
    width:24px; height:24px; border-radius: 4px;
    background: rgba(255,255,255,0.06); color: #cbd5e1;
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
    display:grid; place-items:center;
}
.nav-link.active .nav-icon { background: rgba(0,0,0,0.18); color:#fff; }

.sidebar-foot {
    padding: 12px; border-top: 1px solid #374151;
}
.user-card {
    display:flex; align-items:center; gap:10px;
    padding: 8px; border-radius: 6px;
}
.user-card:hover { background: var(--sidebar-hover); }
.user-avatar {
    width:32px; height:32px; border-radius: 50%;
    color:#fff; font-size:11px; font-weight:700;
    display:grid; place-items:center;
}
.user-name { color:#fff; font-size:13px; font-weight:500; }
.user-role { color:#9ca3af; font-size:11px; }

/* ============================ Main / Topbar ============================ */
#main { margin-left: var(--sidebar-width); min-height: 100vh; }
#sidebar.collapsed ~ #main { margin-left: 60px; }

#topbar {
    height: var(--topbar-height);
    background: var(--panel); border-bottom: 1px solid var(--border);
    display:flex; align-items:center; justify-content: space-between;
    padding: 0 24px; position: sticky; top:0; z-index: 50;
}
.topbar-left { display:flex; align-items:center; gap: 14px; }
#sidebar-toggle {
    background:none; border:none; font-size: 20px; cursor: pointer;
    color: var(--text-muted); line-height: 1; padding: 4px 8px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px;
}
/* Arrow shows direction the sidebar will move.
   ◀ = sidebar is open, click to collapse (arrow points toward sidebar).
   ▶ = sidebar is collapsed, click to expand (arrow points away from sidebar). */
#sidebar-toggle::before { content: '◀'; font-style: normal; }
#sidebar.collapsed ~ #main #sidebar-toggle::before { content: '▶'; }

/* Phone: sidebar slides in/out as overlay — use hamburger / close cross */
@media (max-width: 768px) {
    #sidebar-toggle::before { content: '☰'; }
    body.sidebar-open #sidebar-toggle::before { content: '✕'; font-size: 18px; }
}
/* Tablet: use a menu icon instead of the desktop collapse arrow glyph,
   which renders as a bare triangle on touch devices. */
@media (min-width: 769px) and (max-width: 1024px) {
    #sidebar-toggle::before,
    #sidebar.collapsed ~ #main #sidebar-toggle::before { content: '☰'; }
}

.icon-btn { background:none; border:none; cursor:pointer; padding: 4px 8px; border-radius:4px; }
.icon-btn:hover { background: var(--bg); }

#page-title { font-size: 18px; font-weight: 600; }

.topbar-right { display:flex; align-items:center; gap: 12px; }
#global-search {
    width: 320px; padding: 8px 12px;
    border:1px solid var(--border); border-radius: 6px;
    background: var(--bg); font-size: 13px;
}
#global-search:focus { outline:none; border-color: var(--primary); background:#fff; }

.bell { font-size: 16px; cursor: pointer; padding: 4px; }

/* ============================ Buttons ============================ */
.btn {
    display:inline-flex; align-items:center; gap:6px;
    padding: 8px 14px; border:1px solid var(--border); border-radius: 6px;
    background: #fff; color: var(--text); cursor: pointer;
    font-size: 13px; font-weight: 500; line-height: 1;
    transition: all 0.12s;
}
.btn:hover { background: var(--bg); }
.btn-primary { background: var(--primary); color:#fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-success { background: var(--success); color:#fff; border-color: var(--success); }
.btn-danger  { background: var(--danger);  color:#fff; border-color: var(--danger); }
.btn-ghost   { background: transparent; border-color: transparent; }
.btn-sm      { padding: 4px 10px; font-size: 12px; }
.btn-icon    { padding: 6px 8px; }

/* Vendor-quote file chip + subtle delete control */
.mq-file-chip { display:inline-flex; align-items:center; gap:2px; margin-right:6px; }
.mq-file-chip > a { display:inline-block; }
.mq-file-del {
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; min-height:0; padding:0; flex:0 0 auto;
    border:none; border-radius:50%; background:transparent;
    color:var(--text-light); font-size:14px; line-height:1; cursor:pointer;
    transition:background .12s ease, color .12s ease;
}
.mq-file-del:hover { background:#fee2e2; color:var(--danger); }

/* ============================ Page content ============================ */
#page-content { padding: 24px; max-width: 1600px; }

.page-header {
    display:flex; justify-content: space-between; align-items: flex-start;
    gap:16px; margin-bottom: 20px; flex-wrap: wrap;
}
.page-header h2 { font-size: 22px; font-weight: 700; }
.page-header p { color: var(--text-muted); margin-top: 4px; font-size: 13px; }
.page-actions { display:flex; gap:8px; }

/* ============================ Cards / Panels ============================ */
.card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: var(--shadow-sm);
    padding: 18px;
}
.card + .card { margin-top: 16px; }
.card-header {
    display:flex; justify-content:space-between; align-items:center;
    margin: -18px -18px 16px; padding: 14px 18px;
    border-bottom: 1px solid var(--border); background: #fafbfc;
    border-radius: 8px 8px 0 0;
}
.card-header h3 { font-size: 14px; font-weight: 600; color: var(--text); }

.kpi-grid {
    display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.kpi {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 18px; box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--primary);
}
.kpi-label { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.kpi-sub   { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
/* Equipment Tracker KPI cards — compact size scoped to #eq-kpis only */
#eq-kpis { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
#eq-kpis .kpi         { padding: 8px 12px; }
#eq-kpis .kpi-label   { font-size: 10px; }
#eq-kpis .kpi-value   { font-size: 17px; margin-top: 2px; }
#eq-kpis .kpi-sub     { font-size: 11px; margin-top: 1px; }

/* Compact variant — only the KPI tiles directly under the Project Detail header.
   Adjacent-sibling selector keeps every other page's KPI sizing untouched. */
.project-hub-header + .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.project-hub-header + .kpi-grid .kpi       { padding: 10px 12px; }
.project-hub-header + .kpi-grid .kpi-label { font-size: 10px; }
.project-hub-header + .kpi-grid .kpi-value { font-size: 18px; margin-top: 2px; line-height: 1.15; }
.project-hub-header + .kpi-grid .kpi-sub   { font-size: 11px; margin-top: 1px; }
.kpi.kpi-success { border-left-color: var(--success); }
.kpi.kpi-warn    { border-left-color: var(--warn); }
.kpi.kpi-danger  { border-left-color: var(--danger); }
.kpi.kpi-info    { border-left-color: var(--info); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) { .grid-2, .grid-3, .grid-4, .grid-2-1 { grid-template-columns: 1fr; } }

/* =============================================================
   Tab strip — wraps cleanly to multiple rows, never mid-label
   ============================================================= */
.tabs {
    display: flex;
    flex-wrap: wrap;             /* allow rows so all tabs are visible */
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    align-items: stretch;
}
.tab {
    padding: 10px 14px;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-size: 13px;
    line-height: 1.2;

    /* NEVER break inside a single tab label */
    white-space: nowrap !important;
    word-break: keep-all;
    overflow-wrap: normal;
    flex-shrink: 0;
    flex-grow: 0;

    transition: color 0.15s, background 0.15s;
}
.tab:hover  { color: var(--text); background: #f8fafc; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* On narrower screens, switch to horizontal scroll with visible indicator */
@media (max-width: 900px) {
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        padding-bottom: 4px;
    }
    .tabs::-webkit-scrollbar        { height: 6px; }
    .tabs::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 3px; }
    .tabs::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    /* Subtle right-edge fade so users know there's more content */
    .tabs {
        background:
            linear-gradient(to right, transparent calc(100% - 30px), rgba(255,255,255,0.95) 100%) right/30px 100% no-repeat,
            transparent;
    }
}

/* ============================ Tables ============================ */
.data-table { width: 100%; border-collapse: collapse; background: var(--panel); }
.data-table th {
    text-align: left; padding: 10px 12px; font-size: 11px;
    color: var(--text-muted); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; background: #fafbfc; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table td {
    padding: 12px; font-size: 13px;
    border-bottom: 1px solid var(--border); vertical-align: middle;
}
.data-table tr:hover td { background: #fafbfc; cursor: pointer; }
.data-table tr.muted td { color: var(--text-muted); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .actions { white-space: nowrap; text-align: right; }

.table-wrap {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    overflow-x: auto; overflow-y: visible; box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
}
.table-toolbar {
    display:flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    background: #fafbfc;
}
.table-toolbar input, .table-toolbar select {
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px;
    font-size: 13px; background: #fff;
}

/* ============================ Forms ============================ */
.form-row { display:flex; gap: 12px; margin-bottom: 12px; }
.form-row > * { flex: 1; }
.field { display:flex; flex-direction:column; gap: 4px; }
.field label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.field input, .field select, .field textarea {
    padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 13px; font-family: inherit;
    background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}
.field textarea { min-height: 70px; resize: vertical; }
.field-required label::after { content: ' *'; color: var(--danger); }

/* .form-group — label-above-input block layout used by the subcontractor
   agreement modal. Mirrors the .field look (muted label, consistent spacing)
   so these forms match the rest of the app. Grid children drop the bottom
   margin since the grid gap already spaces them. */
.form-group { margin-bottom: 14px; }
.form-group > label {
    display: block; font-size: 12px; font-weight: 500;
    color: var(--text-muted); margin-bottom: 4px;
}
.grid .form-group { margin-bottom: 0; }

/* Shared control class used by several modules' filter bars and forms.
   Mirrors .field select/input styling so form-control elements pick up the
   app look. Visual-only (no width/display) so existing inline layouts are
   untouched. */
.form-control {
    padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 13px; font-family: inherit;
    background: #fff; color: var(--text); line-height: 1.4;
}
.form-control:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}
select.form-control { background: #fff; }
textarea.form-control { min-height: 70px; resize: vertical; }

/* ============================ Badges ============================ */
.badge {
    display:inline-block; padding: 2px 8px; font-size: 11px;
    font-weight: 600; border-radius: 4px;
    background: #f3f4f6; color: #374151; text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-success { background: #dcfce7; color: #15803d; }
.badge-warn    { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #b91c1c; }
.badge-info    { background: #dbeafe; color: #1e40af; }
.badge-purple  { background: #ede9fe; color: #6b21a8; }
.badge-orange  { background: #ffedd5; color: #c2410c; }
.badge-gray    { background: #e5e7eb; color: #374151; }

/* status colors */
.s-active, .s-approved, .s-paid, .s-complete, .s-won, .s-answered { background: #dcfce7; color: #166534; }
.s-pending, .s-draft, .s-open, .s-new, .s-in_progress, .s-sent, .s-bidding, .s-pre_construction { background: #fef3c7; color: #92400e; }
.s-rejected, .s-overdue, .s-lost, .s-cancelled, .s-blocked { background: #fee2e2; color: #b91c1c; }
/* Submittal-specific status palette (Phase 1 status system upgrade) */
.s-pending_submission { background: #f3f4f6; color: #374151; }
.s-submitted          { background: #dbeafe; color: #1e40af; }
.s-under_review, .s-pending_review { background: #ffedd5; color: #9a3412; }
.s-approved_as_noted  { background: #fef9c3; color: #854d0e; }
.s-revise_resubmit    { background: #ede9fe; color: #5b21b6; }
.s-for_information_only { background: #e0f2fe; color: #075985; }
.s-closed             { background: #e5e7eb; color: #1f2937; }
/* Days-in-court chip beside Ball-in-Court reviewer */
.bic-days        { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:10px; font-size:10px; font-weight:600; background:#e5e7eb; color:#374151; vertical-align:middle; }
.bic-days.warn   { background:#fef3c7; color:#92400e; }
.bic-days.danger { background:#fee2e2; color:#b91c1c; }
/* Quick-filter chip row (Submittals) */
.qf-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px 0; }
.qf-chip  { padding:4px 10px; border-radius:14px; background:#f3f4f6; color:#374151; font-size:12px; cursor:pointer; border:1px solid transparent; user-select:none; }
.qf-chip:hover  { background:#e5e7eb; }
.qf-chip.active { background:#2563eb; color:#fff; border-color:#1d4ed8; }
.qf-chip .qf-count { margin-left:6px; padding:0 6px; background:rgba(0,0,0,.08); border-radius:8px; font-size:10px; font-weight:600; }
.qf-chip.active .qf-count { background:rgba(255,255,255,.25); color:#fff; }
/* Revision timeline */
.rev-timeline { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0; }
.rev-node     { display:flex; flex-direction:column; align-items:center; min-width:78px; padding:6px 8px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; font-size:11px; }
.rev-node.current { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.15); }
.rev-node .rev-label { font-weight:600; }
.rev-arrow    { color:#9ca3af; font-weight:700; }
/* Status history list */
.hist-list   { max-height: 260px; overflow:auto; }
.hist-row    { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid #f1f5f9; font-size:12px; }
.hist-row .hist-when { color:#6b7280; min-width:130px; font-size:11px; }
.hist-row .hist-who  { color:#374151; min-width:120px; font-weight:600; }
.hist-row .hist-what { flex:1; }
.s-not_started, .s-on_hold { background: #f3f4f6; color: #374151; }
.s-construction, .s-warranty { background: #dbeafe; color: #1e3a8a; }

/* ============================ Modal ============================ */
#modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 200; display: grid; place-items: center; padding: 20px;
}
#modal-overlay.hidden { display: none; }
#modal {
    background: #fff; border-radius: 10px; box-shadow: var(--shadow-lg);
    width: 100%; max-width: 720px;
    /* Use dynamic viewport height so tablets/phones with collapsible
       browser UI don't push the sticky footer below the visible area. */
    max-height: 90vh; max-height: 90dvh;
    display:flex; flex-direction:column;
}
#modal.large { max-width: 1100px; }
#modal-header {
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}
#modal-header h2 { font-size: 16px; font-weight: 600; }
#modal-close {
    background: none; border: none; font-size: 24px; cursor: pointer;
    color: var(--text-muted); line-height: 1;
}
#modal-body { padding: 20px; overflow-y: auto; flex: 1; }
#modal-footer {
    padding: 12px 20px; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 8px; background: #fafbfc;
    border-radius: 0 0 10px 10px;
}

/* ============================ Toast ============================ */
#toast-container {
    position: fixed; top: 80px; right: 20px; z-index: 300;
    display:flex; flex-direction: column; gap: 8px;
}
.toast {
    background: #1f2937; color: #fff; padding: 12px 16px;
    border-radius: 6px; box-shadow: var(--shadow-lg); font-size: 13px;
    min-width: 240px;
    animation: slideIn 0.3s ease;
}
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
@keyframes slideIn { from { transform: translateX(20px); opacity:0; } }

/* ============================ Pipeline (kanban) ============================ */
.pipeline {
    display:grid; grid-template-columns: repeat(6, minmax(190px, 1fr));
    gap: 12px; overflow-x: auto;
}
.pipe-col {
    background: #fafbfc; border: 1px solid var(--border);
    border-radius: 8px; padding: 12px; min-height: 360px;
}
.pipe-col h4 {
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.pipe-col .count {
    background: var(--primary); color: #fff; padding: 1px 7px;
    border-radius: 10px; font-size: 11px; margin-left: 6px;
}
.pipe-card {
    background: #fff; border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 12px; margin-top: 8px; box-shadow: var(--shadow-sm);
    cursor: pointer; transition: box-shadow 0.12s;
}
.pipe-card:hover { box-shadow: var(--shadow); }
.pipe-card .name { font-size: 13px; font-weight: 600; }
.pipe-card .meta { color: var(--text-muted); font-size: 11px; margin-top: 4px; }
.pipe-card .value { font-size: 12px; color: var(--success); margin-top: 6px; font-weight: 600; }

/* ============================ Gantt ============================ */
.gantt-wrap {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 8px; overflow: auto; max-height: 70vh;
}
.gantt-table { border-collapse: collapse; min-width: 100%; }
.gantt-table th, .gantt-table td {
    border-right: 1px solid #f1f3f5;
    border-bottom: 1px solid #f1f3f5;
    font-size: 12px; padding: 0;
    height: 36px; vertical-align: middle;
}
.gantt-table thead th {
    position: sticky; top: 0; background: #f9fafb;
    z-index: 5; padding: 6px 8px; font-weight: 600; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.gantt-table .col-task {
    position: sticky; left: 0; background: #fff; min-width: 260px;
    padding: 6px 12px; z-index: 4; box-shadow: 1px 0 0 var(--border);
}
.gantt-table thead .col-task { z-index: 6; background: #f9fafb; }
.gantt-table .col-day { width: 28px; text-align: center; }
.gantt-table .col-day.weekend { background: #f8fafc; }
.gantt-bar {
    height: 18px; background: var(--primary); border-radius: 3px;
    position: relative; box-shadow: var(--shadow-sm);
}
.gantt-bar.complete { background: var(--success); }
.gantt-bar.in_progress { background: var(--info); }
.gantt-bar.blocked { background: var(--danger); }
.gantt-bar.milestone { background: var(--warn); transform: rotate(45deg); width: 14px; height: 14px; border-radius: 0; }
.gantt-progress {
    height: 100%; background: rgba(0,0,0,0.25); border-radius: 3px;
}

/* ============================ Misc ============================ */
.empty {
    text-align: center; padding: 40px 20px; color: var(--text-muted);
    background: var(--panel); border: 1px dashed var(--border); border-radius: 8px;
}
.list { list-style: none; }
.list li {
    padding: 10px 0; border-bottom: 1px solid var(--border);
    display: flex; gap: 10px; align-items: flex-start;
}
.list li:last-child { border-bottom: none; }
.dot { width:8px; height:8px; border-radius:50%; background: var(--primary); display: inline-block; margin-right: 6px; }

.progress-bar {
    height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden;
}
.progress-bar .fill { height: 100%; background: var(--primary); }

.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-right { text-align: right; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.flex { display: flex; }
.flex-between { display:flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.upload-zone {
    border: 2px dashed var(--border); border-radius: 8px;
    padding: 40px; text-align: center; cursor: pointer;
    background: #fafbfc;
    transition: all 0.12s;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--primary); background: var(--primary-soft); }

/* Color helpers */
.tag-csi {
    display:inline-block; padding: 2px 6px; border-radius: 3px;
    background: #ede9fe; color: #6b21a8; font-size: 10px; font-weight: 600;
}
.tag-cat {
    display:inline-block; padding: 1px 6px; border-radius: 3px;
    background: #f3f4f6; color: #374151; font-size: 10px;
}

/* Project hub */
.project-hub-header {
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 16px; margin-bottom: 12px;
}
.project-hub-header h2 { font-size: 18px; margin-top: 4px !important; }
.project-hub-header > .flex-between > div > p.text-muted { font-size: 12px; margin-top: 2px; }
.project-hub-header .mt-2 { margin-top: 6px !important; }
.project-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px 16px; margin-top: 10px;
}
.meta-item label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.meta-item div { font-size: 13px; font-weight: 500; margin-top: 1px; line-height: 1.25; }
.meta-item div .text-muted { font-size: 11px; }

/* ============================ Login screen ============================ */
.login-shell {
    /* Pin to viewport so the dark backdrop covers the full screen even when
       #page-content is capped by max-width on wide displays (was leaving a
       light strip on the right). */
    position: fixed; inset: 0;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    overflow: auto; z-index: 200;
}
.login-card {
    background: #fff; padding: 40px; border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25); width: 100%; max-width: 420px;
    text-align: center;
}
.login-mark {
    width: 100%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.login-mark img { width: 200px; height: auto; display: block; object-fit: contain; }
.login-card h1 { font-size: 22px; margin-bottom: 4px; }
.login-sub { color: var(--text-muted); margin-bottom: 24px; font-size: 13px; }
.login-form { text-align: left; }
.login-form .field { margin-bottom: 14px; }
.login-form input { width: 100%; padding: 10px 12px; }
.login-error {
    color: var(--danger); font-size: 12px; min-height: 18px;
    text-align: center; margin-bottom: 8px;
}
.login-btn { width: 100%; padding: 12px; font-size: 14px; }
.login-demo {
    margin-top: 20px; padding: 14px; background: #f9fafb;
    border-radius: 6px; font-size: 12px; color: var(--text-muted);
    text-align: left;
}

/* ============================ Settings users ============================ */
.user-row {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px;
    border: 1px solid var(--border); border-radius: 8px;
    background: #fafbfc; margin-bottom: 10px;
}
.user-row:hover { background: #f3f4f6; }

/* ============================ Proposal Builder ============================ */
.pb-title-input {
    width: 100%; padding: 10px 14px; font-size: 16px;
    border: 1px solid var(--border); border-radius: 6px;
    background: #fff; font-weight: 600;
}
.trades-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.trade-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: #fff; cursor: pointer; font-size: 13px;
    transition: all 0.12s;
}
.trade-chip:hover { background: #fafbfc; border-color: var(--primary); }
.trade-chip.on {
    background: var(--primary-soft); border-color: var(--primary);
    color: var(--primary-dark); font-weight: 500;
}
.trade-chip input { margin: 0; }
.num-input { text-align: right; font-variant-numeric: tabular-nums; max-width: 100px; }
.pb-totals { background: #fafbfc; }

/* ============================ Bridge iframe ============================ */
.bridge-iframe-wrap {
    position: relative; width: 100%; height: 700px;
    background: #f3f4f6; border-top: 1px solid var(--border);
}
.bridge-iframe-wrap iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ============================ Bridge Takeoff cards ============================ */
.bt-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.bt-card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: var(--shadow-sm); overflow: hidden;
    cursor: pointer; transition: all 0.12s;
}
.bt-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.bt-thumb {
    height: 140px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.bt-thumb-placeholder { font-size: 48px; opacity: 0.4; }
.bt-status { position: absolute; top: 8px; right: 8px; }
.bt-body { padding: 14px; }
.bt-body h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.bt-meta { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.bt-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; font-size: 11px; color: var(--text-muted); }
.bt-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ============================ Demo cards ============================ */
.demo-card { transition: all 0.12s; cursor: pointer; }
.demo-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--primary); }

/* ============================ Enhanced Gantt ============================ */
.gantt-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px; background: #f9fafb; border: 1px solid var(--border);
    border-radius: 6px; margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.gantt-table .col-assignees { min-width: 120px; padding: 6px 10px; background: #fff; }
.gantt-table .col-status   { min-width: 100px; padding: 6px 10px; background: #fff; }
.gantt-table thead .col-assignees, .gantt-table thead .col-status {
    background: #f9fafb; position: sticky; top: 0; z-index: 5;
}
.gantt-bar {
    position: absolute; height: 18px; border-radius: 3px;
    box-shadow: var(--shadow-sm); background: var(--primary);
    color: #fff; font-size: 10px;
    display: flex; align-items: center; padding: 0 4px; overflow: hidden;
    white-space: nowrap;
}
.gantt-bar.complete    { background: var(--success); }
.gantt-bar.in_progress { background: var(--info); }
.gantt-bar.blocked     { background: var(--danger); }
.gantt-bar.milestone {
    background: var(--warn); width: 16px !important; height: 16px;
    transform: rotate(45deg); border-radius: 0; padding: 0;
}
.gantt-bar-label { position: relative; z-index: 2; font-weight: 600; }
.gantt-progress { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.25); border-radius: 3px; }
.gantt-bar-cell { position: relative; padding: 0; }
.gantt-today-marker {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: var(--danger); z-index: 3;
}
.col-day.today-col { background: rgba(220,38,38,0.05) !important; }
.gantt-month { background: #f3f4f6; font-weight: 600; }

.gantt-chip {
    width: 22px; height: 22px; border-radius: 50%;
    color: #fff; font-size: 9px; font-weight: 700;
    display: grid; place-items: center;
    border: 2px solid #fff; box-shadow: var(--shadow-sm);
}

.gantt-legend {
    display: flex; gap: 14px; padding: 8px 12px; flex-wrap: wrap;
    background: #fafbfc; border: 1px solid var(--border); border-radius: 6px;
    align-items: center;
}
.gantt-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.gantt-legend-bar  { width: 16px; height: 10px; border-radius: 2px; display: inline-block; }
.gantt-legend-bar.milestone { transform: rotate(45deg); width: 10px; height: 10px; }

/* ============================ Export grid buttons ============================ */
.export-btn { justify-content: flex-start; text-align: left; padding: 12px; }

/* ============================ Notifications ============================ */
.notif-badge {
    position: absolute; top: -2px; right: -4px;
    background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 10px; min-width: 18px; padding: 1px 5px;
    text-align: center; line-height: 14px;
    box-shadow: 0 0 0 2px var(--panel);
}
.notif-dropdown {
    width: 380px; max-height: 500px;
    background: #fff; border: 1px solid var(--border);
    border-radius: 8px; box-shadow: var(--shadow-lg);
    z-index: 250; overflow: hidden; display: flex; flex-direction: column;
}
.notif-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    background: #fafbfc;
}
.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
    display: flex; gap: 10px; padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6; cursor: pointer;
    transition: background 0.12s;
}
.notif-item:hover { background: #fafbfc; }
.notif-item.unread { background: #fff7ed; }
.notif-item.unread:hover { background: #ffedd5; }
.notif-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--info); flex-shrink: 0; margin-top: 6px;
}
.notif-dot.warning { background: var(--warn); }
.notif-dot.error   { background: var(--danger); }
.notif-dot.success { background: var(--success); }
.notif-body { flex: 1; }
.notif-title { font-weight: 600; font-size: 13px; }
.notif-msg   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-meta  { font-size: 10px; color: var(--text-light); margin-top: 4px; }

/* ============================ Online presence ============================ */
.online-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--success); display: inline-block;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(22,163,74,0.3);
    flex-shrink: 0; margin-top: 6px;
}
.offline-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #cbd5e1; display: inline-block; flex-shrink: 0; margin-top: 6px;
}
.online-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success); display: inline-block; vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(22,163,74,0.6);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.6); }
    70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ============================ AI button ============================ */
.ai-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important; border-color: transparent !important;
}
.ai-btn:hover { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; }
.ai-btn:disabled { opacity: 0.6; cursor: wait; }

/* AI Cost Estimation page only — suppress the browser-default blue focus
   rectangle that appears on the Web Search examples <details>/<summary> and
   on the Run QC Check button after a mouse click. Keyboard focus (Tab nav)
   still gets a visible ring via :focus-visible for accessibility. */
details.mt-2:focus,
details.mt-2 > summary:focus { outline: none; }
details.mt-2 > summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 3px;
}
#cost-run-qc:focus:not(:focus-visible),
#cost-run-mat:focus:not(:focus-visible),
#cost-run-lab:focus:not(:focus-visible) { outline: none; }

/* AI Cost page — view toggle (Estimate View / Material List) */
.cost-view-toggle {
    display: inline-flex;
    background: #f3f4f6;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.cost-view-btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.cost-view-btn:hover { color: var(--text); }
.cost-view-btn.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.cost-view-btn:focus:not(:focus-visible) { outline: none; }

/* ============================ Maps + Weather ============================ */
.map-iframe-wrap {
    position: relative; width: 100%; height: 400px; overflow: hidden;
    border-radius: 0 0 8px 8px;
}
.map-iframe-wrap iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.recommendation-strip {
    background: var(--primary-soft); padding: 10px 14px; border-radius: 6px;
    border-left: 3px solid var(--primary);
    color: var(--text);
}
.weather-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
@media (max-width: 900px) { .weather-grid { grid-template-columns: repeat(2, 1fr); } }
.weather-day {
    background: #fafbfc; border: 1px solid var(--border);
    border-radius: 6px; padding: 10px 8px; text-align: center;
    position: relative;
}
.weather-day.best {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: var(--primary); border-width: 2px;
}
.weather-date { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.weather-icon { font-size: 28px; margin: 4px 0; }
.weather-temp { font-size: 13px; font-weight: 600; }
.weather-rain { font-size: 11px; color: var(--info); }
.weather-best-tag {
    position: absolute; top: 4px; right: 4px;
    background: var(--primary); color: #fff;
    font-size: 9px; font-weight: 700; padding: 2px 6px;
    border-radius: 10px;
}

/* ============================ File Upload widget ============================ */
.file-upload-zone {
    border: 1px dashed var(--border); border-radius: 6px;
    padding: 12px; background: #fafbfc;
}
.file-upload-list { margin-bottom: 10px; }
.file-upload-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
}
.file-upload-item:last-child { border-bottom: none; }
.file-icon { font-size: 16px; }
.file-upload-trigger {
    display: inline-flex; gap: 6px; align-items: center;
    cursor: pointer; padding: 8px 14px;
    background: var(--primary); color: #fff;
    border-radius: 6px; font-size: 13px; font-weight: 500;
    transition: background 0.12s;
}
.file-upload-trigger:hover { background: var(--primary-dark); }

/* ============================ Fullscreen modal ============================ */
/* True edge-to-edge fullscreen: drop the overlay padding and let the modal
   fill the viewport so wide line-item tables (e.g. estimate division tabs)
   stop horizontal-scrolling. */
#modal-overlay:has(#modal.fullscreen) { padding: 0 !important; }
#modal.fullscreen {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}
#modal.fullscreen #modal-body  { overflow: auto; flex: 1 1 auto; max-height: none; }
#modal.fullscreen #modal-header { border-radius: 0; }

/* Horizontal scroll wrapper for wide division tables so the table can
   overflow without breaking the modal width. */
.est-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border:1px solid #f1f5f9; border-radius:6px; }
.est-table-scroll .data-table { margin: 0; min-width: 1100px; }
#modal.fullscreen .est-table-scroll .data-table { min-width: 100%; }

/* ============================ CRM kanban drag + cards grid ============================ */
.pipe-card { position: relative; transition: opacity 0.12s, transform 0.12s; }
.pipe-card.dragging { opacity: 0.5; transform: scale(0.97); }
.pipe-drop { min-height: 60px; padding: 4px 0; transition: background 0.12s; border-radius: 4px; }
.pipe-drop.drag-over { background: rgba(249,115,22,0.08); outline: 2px dashed var(--primary); outline-offset: -2px; }
.pipe-card .card-actions {
    position: absolute; top: 6px; right: 6px;
    display: none; gap: 2px;
}
.pipe-card:hover .card-actions { display: flex; }
.pipe-card .card-actions button { padding: 2px 6px; font-size: 11px; background: #fff; border: 1px solid var(--border); }

.cust-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.cust-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px; cursor: pointer; transition: all 0.12s;
    box-shadow: var(--shadow-sm);
}
.cust-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.cust-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.cust-name { font-weight: 600; font-size: 14px; }
.cust-company { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.cust-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.6; }
.cust-stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
    padding: 10px; background: #fafbfc; border-radius: 6px; margin-bottom: 12px;
    text-align: center; font-size: 11px;
}
.cust-stats strong { font-size: 13px; color: var(--text); }
.cust-card-actions { display: flex; gap: 6px; }
.cust-card-actions button { flex: 1; }

/* ============================ Bridge Takeoff detail + revision images ============================ */
.bt-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 14px 0; }
.bt-detail-meta p { margin: 6px 0; }
.rev-img-thumbs {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px; margin-top: 10px;
}
.rev-img-thumb {
    position: relative; aspect-ratio: 1/1;
    border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
    background: #fafbfc; cursor: zoom-in;
}
.rev-img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rev-img-thumb .rev-img-x {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,0.7); color: #fff; border: none;
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    font-size: 14px; line-height: 1;
}

/* ============================ AI Cost Estimation ============================ */
.cost-int-card {
    border: 1px solid var(--border); border-radius: 6px; padding: 14px;
}
.cost-table-wrap { overflow-x: auto; }
.cost-table { font-size: 11px; }
.cost-table th { white-space: nowrap; padding: 4px 6px; font-size: 10px; position: relative; }
.cost-table td { padding: 3px 6px; vertical-align: top; line-height: 1.3; }
/* Item col (5) — let description wrap; Description col (6) — same */
.cost-table td:nth-child(5) { max-width: 220px; white-space: normal; word-break: break-word; }
/* SKU col (4) — Estimate View only. Material List has SKU at col 7, so the
   nth-child rule must NOT match .cost-table generically. */
.cost-est-table th:nth-child(4),
.cost-est-table td:nth-child(4) {
    max-width: 90px; width: 90px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cost-est-table td:nth-child(4) > span {
    max-width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 10px !important;
    padding: 1px 4px !important;
}
/* Compact inline number inputs so rows stay tight */
.cost-table .cost-inline-input { padding: 2px 4px; font-size: 11px; }

/* Column resize — small grip on the right edge of each <th> (Estimate View only) */
.cost-est-table th .col-resizer {
    position: absolute;
    top: 0; right: 0;
    width: 6px; height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 3;
}
.cost-est-table th .col-resizer:hover,
.cost-est-table th .col-resizer.resizing { background: rgba(37,99,235,0.25); }
.cost-source { display: inline-block; padding: 3px 8px; border-radius: 4px; background:#dbeafe; color:#1e40af; font-size: 11px; font-weight:600; }

.qc-issue {
    display: flex; gap: 10px; padding: 12px;
    border-bottom: 1px solid var(--border);
}
.qc-issue.fixed   { background: #dcfce7; }
.qc-issue.review  { background: #fef3c7; }
.qc-issue.na      { background: #f3f4f6; opacity: 0.7; }
.qc-issue-actions { display: flex; gap: 4px; flex-shrink: 0; }

.ov-options { display: grid; gap: 10px; margin-top: 10px; }
.ov-option {
    display: flex; gap: 10px; padding: 10px;
    background: #fafbfc; border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; align-items: flex-start;
}
.ov-option:hover { background: #f3f4f6; }
.ov-option input[type="checkbox"] { margin-top: 2px; }

.vendor-stars { display: inline-flex; gap: 2px; cursor: pointer; }
.vendor-stars .star {
    cursor: pointer; color: #cbd5e1; font-size: 16px;
    transition: color 0.12s, transform 0.12s;
}
.vendor-stars .star:hover { transform: scale(1.2); }
.vendor-stars .star.filled { color: #f59e0b; }

.cdb-card { cursor: pointer; transition: all 0.12s; }
.cdb-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--primary); }

/* ============================ Print (PDF export) ============================ */
@media print {
    @page { margin: 0.5in; }
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Hide the entire app shell — only print modal contents if open, otherwise page content */
    #sidebar, #topbar, .page-actions, .icon-btn, button,
    #toast-container, .notif-dropdown, .nav-link { display: none !important; }
    #main { margin-left: 0 !important; }
    #page-content { padding: 0; }
    /* If a modal is open, hide the rest of the page and let only the modal print */
    body:has(#modal-overlay:not(.hidden)) #page-content { display: none !important; }
    body:has(#modal-overlay:not(.hidden)) #modal-overlay { position: static !important; background: #fff !important; padding: 0 !important; display: block !important; }
    body:has(#modal-overlay:not(.hidden)) #modal { box-shadow: none !important; max-width: none !important; max-height: none !important; border: none !important; }
    body:has(#modal-overlay:not(.hidden)) #modal-header,
    body:has(#modal-overlay:not(.hidden)) #modal-footer { display: none !important; }
    body:has(#modal-overlay:not(.hidden)) #modal-body { padding: 0 !important; overflow: visible !important; max-height: none !important; }
    .card { box-shadow: none; page-break-inside: avoid; border-color: #ccc; }
    .pb-totals { background: #fff; }
    .data-table { page-break-inside: auto; }
    .data-table tr { page-break-inside: avoid; page-break-after: auto; }
}

#site-footer {
    text-align: center;
    padding: 10px 16px 12px;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.6;
    border-top: 1px solid #e5e7eb;
    margin-left: var(--sidebar-width, 240px);
    background: var(--bg, #f8fafc);
}
#site-footer p { margin: 0; }
.footer-sub { font-size: 10px; letter-spacing: 0.02em; }
body.sidebar-collapsed #site-footer { margin-left: 60px; }

/* AI Cost table — sticky right action column + inline editable cells */
.cost-table-wrap {
    overflow-x: auto;
    position: relative;
}
.cost-table {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.cost-table th.sticky-actions,
.cost-table td.sticky-actions {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -4px 0 8px rgba(0,0,0,0.06);
    z-index: 2;
    padding: 2px 4px !important;
    width: 36px;
}
.cost-table .cost-row-menu-btn { padding: 2px 6px; font-size: 13px; }
.cost-table tbody tr:nth-child(even) td.sticky-actions { background: #fafbfc; }
.cost-table tbody tr:hover td { background: #f0f9ff; }
.cost-table tbody tr.bulk-selected td { background: #fef3c7 !important; }
.cost-inline-input {
    width: 62px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    text-align: right;
    font-size: 11px;
    font-family: inherit;
}
.cost-inline-input:hover { border-color: var(--border); background: #fff; }
.cost-inline-input:focus { border-color: var(--primary); background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
.cost-row-menu {
    position: relative;
    display: inline-block;
}
.cost-row-menu-btn {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
}
.cost-row-menu-btn:hover { background: #f3f4f6; }
.cost-row-menu-popup {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 180px;
    z-index: 1000;
    display: none;
}
.cost-row-menu-popup.open { display: block; }
.cost-row-menu-popup button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
}
.cost-row-menu-popup button:hover { background: #f3f4f6; }
.cost-row-menu-popup button.danger:hover { background: #fef2f2; color: #dc2626; }
.cost-bulk-bar {
    background: #1e3a8a;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cost-bulk-bar button { background: #fff; color: #1e3a8a; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; }
.cost-bulk-bar button:hover { background: #e0e7ff; }
.cost-bulk-bar button.danger { background: #fee2e2; color: #991b1b; }
.cost-checkbox-cell { width: 36px; text-align: center; padding: 4px !important; }

/* ── Global upload-progress panel ─────────────────────────────────────────
   Floating bottom-right card with a determinate progress bar for every
   in-flight upload. Driven by UploadProgress + API._xhrUpload so every doc
   or image upload section in the app gets a visible indicator automatically. */
.upload-progress-host {
    position: fixed; right: 16px; bottom: 16px; z-index: 9999;
    width: 320px; max-width: calc(100vw - 32px);
    background: #fff; color: #111827;
    border: 1px solid #e5e7eb; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}
.upload-progress-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: #f9fafb; border-bottom: 1px solid #e5e7eb;
}
.upload-progress-title { font-weight: 600; font-size: 12px; }
.upload-progress-toggle {
    background: transparent; border: 0; width: 22px; height: 22px;
    cursor: pointer; font-size: 16px; line-height: 1; color: #6b7280;
}
.upload-progress-toggle:hover { color: #111827; }
.upload-progress-list { padding: 6px 10px 10px; max-height: 280px; overflow-y: auto; }
.upload-progress-host.collapsed .upload-progress-list { display: none; }

.upload-progress-row { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.upload-progress-row:last-child { border-bottom: 0; }
.upload-progress-label {
    font-size: 12px; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.upload-progress-track {
    position: relative; height: 6px; background: #e5e7eb;
    border-radius: 999px; overflow: hidden;
}
.upload-progress-bar {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transition: width .15s linear;
}
.upload-progress-row.is-processing .upload-progress-bar {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}
.upload-progress-row.is-done .upload-progress-bar {
    background: linear-gradient(90deg, #10b981, #059669); width: 100% !important;
}
.upload-progress-row.is-error .upload-progress-bar {
    background: linear-gradient(90deg, #ef4444, #b91c1c);
}
.upload-progress-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 4px; font-size: 11px; color: #6b7280;
}
.upload-progress-row.is-error .upload-progress-meta { color: #b91c1c; font-weight: 600; }
.upload-progress-row.is-done  .upload-progress-meta { color: #059669; }
.upload-progress-foot { gap: 8px; }
.upload-progress-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-progress-pct  { flex: 0 0 auto; }
.upload-progress-cancel {
    flex: 0 0 auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px;
    color: #b91c1c; cursor: pointer; font-size: 11px; line-height: 1; font-weight: 600;
    padding: 3px 8px;
}
.upload-progress-cancel:hover    { background: #fef2f2; border-color: #fecaca; }
.upload-progress-cancel:disabled { opacity: .5; cursor: default; }
.upload-progress-row.is-done  .upload-progress-cancel,
.upload-progress-row.is-error .upload-progress-cancel { display: none; }


/* ===========================================================================
   MOBILE + TABLET RESPONSIVE (≤768px phone, ≤1024px tablet)
   =========================================================================== */
@media (max-width: 1024px) {
    html, body { font-size: 14px; -webkit-text-size-adjust: 100%; }
    button, .btn, input, select, textarea { min-height: 40px; font-size: 14px; }
    .btn-sm { min-height: 32px; padding: 6px 10px; }
    a, button, .clickable { -webkit-tap-highlight-color: rgba(0,0,0,0.05); }
    #main { padding: 12px !important; }
    .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .page-header h2 { font-size: 20px; }
    .page-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; max-width: 100%; min-width: 0; }
    .page-actions .btn, .page-actions select.btn { flex: 1 1 140px; min-width: 0; max-width: 100%; }
    .grid-2, .grid-3, .grid-4, .grid-2-1 { grid-template-columns: 1fr !important; gap: 10px; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .kpi { padding: 12px; }
    .kpi-value { font-size: 18px; }
    .card { padding: 14px; }
    .card-header { flex-wrap: wrap; gap: 8px; }
    .data-table, .table-wrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    table { min-width: 100%; }
    /* Prevent grid/flex children from blowing out their parent on mobile */
    .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-2-1 > * { min-width: 0; }
    .card, #page-content > * { min-width: 0; max-width: 100%; }
    .form-row { flex-direction: column !important; gap: 8px; }
    .form-row .field { width: 100%; }
    #topbar { padding: 8px 12px; flex-wrap: wrap; gap: 8px; height: auto; min-height: var(--topbar-height); }
    .topbar-right { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
    #global-search { flex: 1 1 100%; order: 3; min-width: 0; }
    #topbar h1 { font-size: 18px; }
}

/* ── PHONE: ≤768px ── slide-out sidebar, fullscreen modals ───────────────── */
@media (max-width: 768px) {
    #sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 80vw; max-width: 320px; height: 100vh;
        z-index: 999; transform: translateX(-100%);
        transition: transform 0.25s ease-out;
        box-shadow: 4px 0 20px rgba(0,0,0,0.25);
        overflow-y: auto;
    }
    body.sidebar-open #sidebar { transform: translateX(0); }
    body.sidebar-open::after {
        content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.45);
        z-index: 998;
    }
    #main { margin-left: 0 !important; padding: 8px !important; max-width: 100vw; overflow-x: hidden; }
    /* Kill horizontal page scroll on phones — inner wide content (wide tables,
       long buttons, image grids) should scroll inside their own wrappers,
       never push the whole page sideways. */
    html, body { overflow-x: hidden; max-width: 100vw; }
    #page-content { max-width: 100%; min-width: 0; overflow-x: hidden; }
    #sidebar-toggle { display: inline-flex !important; font-size: 22px; padding: 6px 12px; -webkit-tap-highlight-color: rgba(0,0,0,0.1); touch-action: manipulation; }

    /* Footer: span full width on phones (desktop pushes it right by sidebar width) */
    #site-footer { margin-left: 0 !important; padding: 12px 14px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }

    /* Notifications dropdown: fit the phone viewport instead of a fixed 380px panel
       that overflows the screen edge. JS sets inline `right` based on bell position,
       so we use !important to clamp it on phones only. */
    .notif-dropdown {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 70vh !important;
    }

    #modal-overlay {
        padding: 0 !important; align-items: stretch !important;
        /* Use dynamic viewport height so the overlay matches the actual visible
           area on mobile browsers (excluding the address bar). Falls back to vh
           on older browsers. */
        height: 100vh; height: 100dvh;
        overflow: hidden;
    }
    #modal {
        width: 100vw !important; max-width: 100vw !important;
        /* min-height/max-height tied to dvh so the modal can't grow taller than
           the visible viewport — otherwise the sticky footer gets pushed below
           the address bar and becomes unreachable. */
        min-height: 100vh; min-height: 100dvh;
        max-height: 100vh; max-height: 100dvh;
        border-radius: 0 !important; margin: 0; display: flex; flex-direction: column;
    }
    #modal-header { padding: 12px 16px; flex: 0 0 auto; background: #fff; }
    #modal-body   {
        flex: 1 1 auto; overflow-y: auto; padding: 14px;
        -webkit-overflow-scrolling: touch;
        min-height: 0; /* allow flex child to actually shrink so the footer stays visible */
    }
    #modal-footer {
        padding: 10px 14px; border-top: 1px solid var(--border);
        background: #fff;
        flex: 0 0 auto; /* fixed-height footer that always stays in flex layout */
        display: flex; gap: 6px; flex-wrap: wrap;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    #modal-footer .btn { flex: 1 1 auto; min-width: 120px; }

    .kpi-grid { grid-template-columns: 1fr 1fr !important; }
    .project-meta { grid-template-columns: 1fr 1fr !important; gap: 8px; font-size: 12px; }

    .tabs {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .tab { scroll-snap-align: start; font-size: 12px; padding: 10px 12px; }

    .gantt-wrap { max-height: 65vh; }
    .gantt-table thead th { font-size: 10px; padding: 4px; }
    .gantt-table td.col-task,
    .gantt-table th.col-task    { min-width: 160px; max-width: 160px; font-size: 11px; }
    .gantt-table td.col-assignees,
    .gantt-table th.col-assignees { left: 160px; min-width: 60px; }
    .gantt-table td.col-status,
    .gantt-table th.col-status    { left: 220px; min-width: 80px; }

    #sm-gallery .sm-tile-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }
    #sm-gallery [data-media] { aspect-ratio: 1 !important; width: auto !important; height: auto !important; border-radius: 4px; }
    .sm-actions { flex-direction: column; align-items: stretch !important; }
    .sm-actions > div { width: 100%; justify-content: stretch; }
    .sm-actions .btn { flex: 1; }
}

/* ── TABLET: 769px–1024px ── compact sidebar, 2-col grids ────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    #sidebar {
        width: 220px;
        display: flex; flex-direction: column;
        height: 100vh; height: 100dvh;
        position: sticky; top: 0;
    }
    #sidebar nav, #sidebar .nav-section { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
    .sidebar-foot {
        flex: 0 0 auto;
        padding: 12px;
        background: var(--sidebar-bg);
        border-top: 1px solid #374151;
        position: sticky; bottom: 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
    }
    .user-card {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
    }
    .user-avatar { width: 36px; height: 36px; font-size: 12px; }
    .user-name   { font-size: 14px; }
    .user-role   { font-size: 12px; }
    #main    { margin-left: 220px; padding: 16px; }
    /* When sidebar collapses on tablet, shrink main's margin to match the
       60px icon-only rail — without this, the tablet 220px rule wins over the
       global collapsed rule and leaves a 160px dead gap beside the sidebar. */
    #sidebar.collapsed ~ #main { margin-left: 60px; }

    /* Collapsed icon rail on tablet: center the emoji icons in 60px */
    #sidebar.collapsed .nav-link {
        padding: 10px 0;
        justify-content: center;
    }
    #sidebar.collapsed .nav-icon {
        width: 28px; height: 28px; flex-shrink: 0;
    }
    #sidebar.collapsed .user-card {
        justify-content: center; padding: 8px 4px;
    }
    #sidebar.collapsed .sidebar-foot { padding: 8px 4px; }

    .grid-2 { grid-template-columns: 1fr 1fr !important; }
    .kpi-grid { grid-template-columns: repeat(4, 1fr) !important; }
    #sm-gallery .sm-tile-grid { grid-template-columns: repeat(4, 1fr) !important; }
    #sm-gallery [data-media] { aspect-ratio: 1 !important; width: auto !important; height: auto !important; }
}

input[type="file"][capture] { font-size: 0; }
@supports (padding: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
}

/* Floating Action Button (phone only) */
.fab {
    position: fixed; bottom: max(20px, env(safe-area-inset-bottom));
    right: 20px; width: 60px; height: 60px; border-radius: 50%;
    background: #f97316; color: #fff; border: none; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    font-size: 28px; cursor: pointer; z-index: 100;
    display: none; align-items: center; justify-content: center;
}
@media (max-width: 768px) { .fab { display: flex; } }
.fab:active { transform: scale(0.95); }

.pinch-zoom-img { max-width: 100%; touch-action: pinch-zoom; }

.sm-lightbox {
    position: fixed; inset: 0; background: #000; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    touch-action: pan-y;
}
.sm-lightbox img, .sm-lightbox video { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.sm-lightbox-close {
    position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px;
    background: rgba(0,0,0,0.5); color: #fff; border: none;
    width: 44px; height: 44px; border-radius: 50%; font-size: 20px;
    cursor: pointer;
}
.sm-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.5); color: #fff; border: none;
    width: 48px; height: 48px; border-radius: 50%; font-size: 24px;
    cursor: pointer;
}
.sm-lightbox-nav.prev { left: 10px; }
.sm-lightbox-nav.next { right: 10px; }
.sm-lightbox-info {
    position: absolute; bottom: max(20px, env(safe-area-inset-bottom));
    left: 0; right: 0; padding: 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff; font-size: 13px;
}

/* ============================================================
   GANTT — Phase 1 (sticky cols, drag/resize, critical path,
                    dependency arrows, baseline, saved views)
   ============================================================ */
.gantt-bar { cursor: grab; transition: box-shadow .15s, transform .05s; }
.gantt-bar:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.gantt-bar.dragging { cursor: grabbing; opacity: 0.75; z-index: 100; }
.gantt-bar.critical {
    background: #dc2626 !important;
    border: 2px solid #7f1d1d !important;
    box-shadow: 0 0 0 2px rgba(220,38,38,0.25);
}
.gantt-bar .resize-handle {
    position: absolute; right: 0; top: 0; bottom: 0; width: 8px;
    cursor: ew-resize; background: rgba(255,255,255,0.3);
    border-radius: 0 4px 4px 0;
}
.gantt-bar .progress-handle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 10px; height: 10px; border-radius: 50%; background: #fff;
    border: 2px solid currentColor; cursor: ew-resize; display: none;
}
.gantt-bar:hover .progress-handle { display: block; }
.gantt-bar.milestone.inspection { background-color: #0891b2 !important; }
.gantt-bar.milestone.passed     { background-color: #16a34a !important; }
.gantt-bar.milestone.failed     { background-color: #dc2626 !important; }

/* Baseline (drawn behind colored actual bar) */
.gantt-baseline-bar {
    position: absolute; height: 6px; background: #9ca3af;
    border-radius: 2px; top: 30px; opacity: 0.6; pointer-events: none;
}

/* Dependency arrow overlay */
.gantt-arrows-svg {
    position: absolute; top: 0; left: 0;
    pointer-events: none; z-index: 3;
}
.gantt-arrow         { stroke: #6b7280; stroke-width: 1.5; fill: none; }
.gantt-arrow.critical { stroke: #dc2626; stroke-width: 2; }

/* Phase 1 filter bar additions */
.gantt-filter-bar {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 10px; background: #f8fafc; border-radius: 6px; margin-bottom: 10px;
}
.gantt-filter-bar select,
.gantt-filter-bar input {
    padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 4px; font-size: 12px;
}
.gantt-saved-view-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; background: #2563eb; color: #fff; border-radius: 12px;
    font-size: 11px; cursor: pointer;
}
.gantt-saved-view-pill .x { opacity: 0.7; margin-left: 2px; cursor: pointer; }
.gantt-saved-view-pill .x:hover { opacity: 1; }

.gantt-drag-tooltip {
    position: fixed; background: #1f2937; color: #fff; padding: 6px 10px;
    border-radius: 4px; font-size: 12px; pointer-events: none; z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ============================================================
   PDF Viewer (PDF.js powered)
   ============================================================ */
.pdfv-context {
    background: #f8fafc; padding: 8px 12px; border-radius: 6px;
    font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
}
.pdfv-toolbar {
    display: flex; gap: 6px; align-items: center; padding: 8px 10px;
    background: #1f2937; color: #fff; border-radius: 6px 6px 0 0;
    flex-wrap: wrap;
}
.pdfv-toolbar .btn { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); padding: 4px 10px; }
.pdfv-toolbar .btn:hover { background: rgba(255,255,255,0.2); }
.pdfv-page-info { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.pdfv-page-info input { padding: 4px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; }

.pdfv-body {
    display: flex; gap: 8px; height: 70vh;
    background: #374151; padding: 8px; border-radius: 0 0 6px 6px;
}
.pdfv-thumbs {
    flex: 0 0 150px; overflow-y: auto;
    background: #1f2937; border-radius: 4px; padding: 8px;
    display: flex; flex-direction: column; gap: 8px;
}
.pdfv-thumbs.hidden { display: none; }
.pdfv-thumb {
    background: #fff; border-radius: 3px; padding: 4px;
    cursor: pointer; text-align: center; border: 2px solid transparent;
    transition: border-color 0.15s;
}
.pdfv-thumb canvas { max-width: 100%; height: auto; display: block; }
.pdfv-thumb-label { color: #6b7280; font-size: 10px; margin-top: 2px; }
.pdfv-thumb.active { border-color: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.3); }
.pdfv-thumb:hover { border-color: #d1d5db; }

.pdfv-main {
    flex: 1; background: #4b5563; border-radius: 4px; overflow: hidden;
    position: relative;
}
.pdfv-canvas-wrap {
    width: 100%; height: 100%; overflow: auto;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 14px; cursor: grab;
}
.pdfv-canvas-wrap canvas {
    background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
    .pdfv-body { flex-direction: column; height: 60vh; }
    .pdfv-thumbs { flex: 0 0 80px; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
    .pdfv-thumb { flex: 0 0 60px; }
    .pdfv-toolbar { font-size: 11px; }
    .pdfv-toolbar .btn { padding: 3px 8px; }
}

/* Meeting calendar grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { padding: 8px; text-align: center; font-weight: 600; color: var(--text-muted); font-size: 12px; }
.cal-cell { min-height: 100px; background: #f8fafc; border-radius: 4px; padding: 6px; position: relative; }
.cal-cell.today { background: #fef3c7; box-shadow: inset 0 0 0 2px #f97316; }
.cal-day { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.cal-event { background: #2563eb; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 10px; margin-bottom: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event:hover { background: #1e40af; }

/* Public booking page */
.book-wrap { max-width: 860px; margin: 40px auto; padding: 0 20px; font-family: system-ui, -apple-system, sans-serif; color:#111827; }
.book-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.06); padding:28px; }
.book-grid { display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
@media (max-width: 720px){ .book-grid { grid-template-columns: 1fr; } }
.book-slot { display:inline-block; margin:4px; padding:8px 12px; background:#fff; border:1px solid #2563eb; color:#2563eb; border-radius:6px; cursor:pointer; font-size:13px; }
.book-slot:hover, .book-slot.active { background:#2563eb; color:#fff; }
.book-input { display:block; width:100%; padding:9px 11px; border:1px solid #cbd5e1; border-radius:6px; margin-bottom:10px; font-size:14px; box-sizing:border-box; }
.book-btn { background:#2563eb; color:#fff; border:0; padding:10px 18px; border-radius:6px; cursor:pointer; font-size:14px; font-weight:600; }
.book-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ============================================================
   CHAT
   ============================================================ */
.chat-page { display: grid; grid-template-columns: 280px 1fr; gap: 14px; height: calc(100vh - 110px); }
.chat-sidebar { background: #fff; border-radius: 6px; border: 1px solid var(--border); overflow-y: auto; padding: 10px; }
.chat-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; }
.chat-search-input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; margin-bottom: 8px; box-sizing: border-box; }
.chat-section-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); padding: 8px 6px 4px; letter-spacing: 0.05em; font-weight: 600; }
.chat-channel-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; margin-bottom: 2px; }
.chat-channel-item:hover { background: #f3f4f6; }
.chat-channel-item.active { background: #2563eb; color: #fff; }
.chat-channel-item.active .text-muted { color: #dbeafe; }
.chat-main { background: #fff; border-radius: 6px; border: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.chat-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; }
.chat-message { display: flex; gap: 10px; margin-bottom: 14px; }
.chat-message.mine { flex-direction: row-reverse; }
.chat-avatar { width: 36px; height: 36px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; }
.chat-bubble { background: #f3f4f6; padding: 8px 12px; border-radius: 8px; max-width: 70%; position: relative; }
.chat-message.mine .chat-bubble { background: #dbeafe; }
.chat-meta { font-size: 11px; margin-bottom: 4px; }
.chat-body { word-wrap: break-word; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.chat-mention { background: #fef3c7; padding: 1px 4px; border-radius: 3px; font-weight: 600; }
.chat-ref-chip { display: inline-block; background: #2563eb; color: #fff !important; padding: 2px 8px; border-radius: 3px; font-size: 11px; margin: 4px 4px 0 0; text-decoration: none; }
.chat-refs { margin-top: 4px; }
.chat-attachments { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-attach-img { max-width: 200px; max-height: 200px; border-radius: 4px; cursor: pointer; display: block; }
.chat-attach-file { display: inline-block; background: rgba(0,0,0,0.05); padding: 4px 8px; border-radius: 3px; font-size: 12px; text-decoration: none; color: inherit; }
.chat-reactions { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.chat-reaction { background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 10px; font-size: 11px; }
.chat-actions { position: absolute; top: -10px; right: 6px; opacity: 0; transition: opacity .15s; display: flex; gap: 2px; background: #fff; padding: 2px 4px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.chat-bubble:hover .chat-actions { opacity: 1; }
.chat-composer { border-top: 1px solid var(--border); padding: 10px; display: flex; gap: 6px; align-items: flex-end; position: relative; }
.chat-composer textarea { flex: 1; border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; resize: none; min-height: 36px; max-height: 120px; font-family: inherit; font-size: 14px; }
.chat-mention-popup { position: absolute; bottom: 56px; left: 80px; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); max-width: 250px; z-index: 100; }
.chat-mention-item { padding: 6px 10px; cursor: pointer; font-size: 13px; }
.chat-mention-item:hover { background: #f3f4f6; }
.chat-pending-attachments { padding: 6px 10px; background: #fef3c7; display: flex; gap: 6px; flex-wrap: wrap; }
.chat-search-list { background: #f8fafc; border-radius: 4px; padding: 4px; margin-bottom: 8px; }
.chat-search-item { padding: 6px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--border); border-radius: 3px; }
.chat-search-item:hover { background: #fff; }

/* Floating chat FAB */
.chat-fab {
    position: fixed; bottom: 20px; right: 20px;
    width: 58px; height: 58px; border-radius: 50%;
    background: #2563eb; color: #fff; border: none;
    font-size: 26px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 9000; display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.chat-fab:hover { transform: scale(1.08); }
.chat-fab-badge {
    position: absolute; top: -4px; right: -4px;
    background: #dc2626; color: #fff; border-radius: 12px;
    min-width: 22px; height: 22px; font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; padding: 0 6px;
    box-sizing: border-box;
}

/* Mobile-only hamburger / sidebar close — hidden on desktop */
.chat-mobile-toggle { display: none; background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 18px; line-height: 1; }
.chat-sidebar-close { display: none; background: transparent; border: none; font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1; }
.chat-sidebar-backdrop { display: none; }

/* Tablet — narrower sidebar so the message pane has room to breathe */
@media (min-width: 769px) and (max-width: 1024px) {
    .chat-page { grid-template-columns: 220px 1fr; gap: 10px; }
    .chat-bubble { max-width: 80%; }
}

/* Tablet — pull chat to fill the viewport and free the sidebar drawer */
@media (min-width: 769px) and (max-width: 1024px) {
    .chat-page { height: calc(100vh - 140px); }
    .chat-composer { padding: 8px 10px; }
    .chat-composer textarea { font-size: 15px; min-height: 40px; }
    /* Hide the floating chat bubble while already inside the Chat page */
    body:has(.chat-page) .chat-fab { display: none !important; }
}

/* Phone + small tablet — collapse sidebar into a slide-in drawer */
@media (max-width: 768px) {
    /* Reclaim full height + leave room for the OS safe-area at the bottom */
    .chat-page {
        grid-template-columns: 1fr;
        gap: 0;
        height: calc(100dvh - 96px);
        position: relative;
        margin: 0 -8px;
    }
    .chat-main { border-radius: 0; border-left: none; border-right: none; }
    /* Hide the global page footer & floating FAB while inside the Chat page
       — the footer was overlapping the FAB, and the FAB is redundant here. */
    body:has(.chat-page) #site-footer,
    body:has(.chat-page) .chat-fab { display: none !important; }

    .chat-sidebar {
        display: none;
        position: fixed; top: 0; left: 0; bottom: 0;
        width: min(86vw, 320px);
        z-index: 1001;
        box-shadow: 4px 0 20px rgba(0,0,0,0.25);
        border-radius: 0;
        padding-top: 56px;
        -webkit-overflow-scrolling: touch;
    }
    .chat-sidebar.show { display: block; }
    .chat-sidebar.show .chat-sidebar-close {
        display: flex !important; align-items: center; justify-content: center;
        position: absolute; top: 8px; right: 8px;
        min-width: 40px; min-height: 40px; font-size: 24px;
    }
    .chat-sidebar-backdrop.show {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,0.45); z-index: 1000;
    }

    /* Bigger touch targets */
    .chat-mobile-toggle {
        display: inline-flex !important; align-items: center; justify-content: center;
        min-width: 40px; min-height: 40px; padding: 8px 12px; font-size: 20px;
    }
    .chat-channel-item { padding: 12px 10px; font-size: 14px; }
    .chat-header { padding: 10px 12px; gap: 8px; }
    .chat-header strong { font-size: 14px; }
    .chat-messages { padding: 10px 10px 16px; }
    .chat-message { gap: 6px; margin-bottom: 10px; }
    .chat-avatar { width: 30px; height: 30px; font-size: 11px; }
    .chat-bubble { max-width: 85%; padding: 7px 10px; }
    .chat-attach-img { max-width: 60vw; max-height: 240px; }

    /* Composer — pin to bottom, kill textarea resize handle, 16px prevents iOS zoom */
    .chat-composer {
        padding: 8px; gap: 6px; align-items: center;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    .chat-composer textarea {
        font-size: 16px; padding: 10px 12px;
        resize: none !important;
        -webkit-appearance: none; appearance: none;
        overflow-y: auto;
    }
    .chat-composer textarea::-webkit-scrollbar { width: 0; }
    .chat-composer .btn { min-width: 40px; min-height: 40px; padding: 6px 10px; }

    .chat-mention-popup { left: 8px; right: 8px; max-width: none; bottom: 60px; }
    .chat-fab { bottom: max(20px, env(safe-area-inset-bottom)); width: 54px; height: 54px; }
    /* Inline project-chat tab: shorter feed so the composer stays visible */
    #proj-chat-messages { height: 60vh !important; }
}

/* ============================================================================
   Custom Links — bookmarks page
============================================================================ */
.cl-filterbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; padding:10px; background:var(--surface, #f8fafc); border-radius:6px; }
.cl-filterbar input[type=search], .cl-filterbar #cl-search { flex:0 0 240px; padding:6px 10px; border:1px solid var(--border); border-radius:4px; }
.cl-cat-chip { padding:5px 12px; border:1px solid var(--border); background:#fff; border-radius:14px; cursor:pointer; font-size:12px; }
.cl-cat-chip.active { background:#2563eb; color:#fff; border-color:#2563eb; }
.cl-cat-chip:hover:not(.active) { background:#eff6ff; }

.cl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.cl-card { background:#fff; border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:box-shadow .15s, transform .15s; display:flex; flex-direction:column; }
.cl-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); transform:translateY(-1px); }
.cl-card-main { display:flex; gap:12px; padding:14px; text-decoration:none; color:inherit; flex:1; }
.cl-card-main:hover { text-decoration:none; }
.cl-card-icon { flex:0 0 44px; height:44px; display:flex; align-items:center; justify-content:center; background:#f1f5f9; border-radius:6px; overflow:hidden; }
.cl-card-icon img { width:32px; height:32px; object-fit:contain; }
.cl-card-body { flex:1; min-width:0; }
.cl-card-name { font-weight:600; font-size:14px; margin-bottom:2px; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-card-url { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px; }
.cl-card-desc { font-size:12px; color:#475569; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cl-card-meta { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.cl-card-meta .badge { font-size:10px; padding:2px 6px; }
.cl-card-actions { display:flex; gap:2px; padding:6px 8px; border-top:1px solid var(--border); background:#fafbfc; }
.cl-card-actions .btn { padding:4px 8px; font-size:12px; }

/* ============================================================
   EXCEL VIEWER
   ============================================================ */
.xv-meta {
    background: #f0f9ff; padding: 8px 12px; border-radius: 6px;
    font-size: 12px; margin-bottom: 10px;
}
.xv-sheet-tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--border);
    margin-bottom: 10px; overflow-x: auto; padding-bottom: 4px;
}
.xv-sheet-tab {
    padding: 6px 14px; border: 1px solid var(--border); border-bottom: none;
    border-radius: 4px 4px 0 0; background: #f8fafc; cursor: pointer;
    font-size: 12px; white-space: nowrap;
}
.xv-sheet-tab.active { background: #16a34a; color: #fff; border-color: #16a34a; }
.xv-sheet-wrap {
    max-height: 65vh; overflow: auto; border: 1px solid var(--border);
    border-radius: 4px; background: #fff;
}
.xv-sheet {
    border-collapse: collapse; width: max-content; min-width: 100%;
    font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 12px;
}
.xv-sheet thead th {
    position: sticky; top: 0; background: #f1f5f9; color: #475569;
    padding: 6px 10px; border: 1px solid #cbd5e1; font-weight: 600;
    text-align: center; min-width: 80px; z-index: 2;
}
.xv-sheet thead th:first-child {
    left: 0; z-index: 3; min-width: 40px;
}
.xv-sheet td {
    border: 1px solid #e2e8f0; padding: 4px 8px; white-space: nowrap;
    max-width: 280px; overflow: hidden; text-overflow: ellipsis;
}
.xv-sheet td.xv-row-num {
    position: sticky; left: 0; background: #f1f5f9; color: #475569;
    font-weight: 600; text-align: center; min-width: 40px; z-index: 1;
}
.xv-sheet tbody tr:hover td { background: #f0f9ff; }
.xv-sheet tbody tr:hover td.xv-row-num { background: #e0f2fe; }

/* ---------- CRM Follow-Up System ---------- */
/* Kanban board */
.kanban-board { display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 10px; }
.kanban-col { background: #f1f5f9; border-radius: 6px; padding: 8px; min-height: 400px; }
.kanban-col.drop-target { background: #fef3c7; box-shadow: inset 0 0 0 2px #f97316; }
.kanban-col-header { padding: 6px 8px 10px; font-size: 11px; color: var(--text-muted); border-bottom: 2px solid #cbd5e1; margin-bottom: 8px; }
.kanban-card { background: #fff; padding: 10px; border-radius: 4px; margin-bottom: 6px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: transform .05s; }
.kanban-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.kanban-card:active { cursor: grabbing; }
.kanban-stale { background: #fef2f2; color: #991b1b; font-size: 10px; padding: 2px 6px; border-radius: 3px; margin-top: 4px; display: inline-block; }

/* Follow-up rows */
.follow-up-row { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--border); }
.follow-up-row:hover { background: #f8fafc; }

/* Activity timeline */
.cd-timeline { list-style: none; padding: 0; margin: 0; }
.cd-timeline li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.cd-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: #6b7280; flex-shrink: 0; margin-top: 6px; }
.cd-timeline-dot.call { background: #16a34a; }
.cd-timeline-dot.email { background: #2563eb; }
.cd-timeline-dot.meeting { background: #f97316; }
.cd-timeline-dot.stage_change { background: #7c3aed; }
.cd-timeline-dot.task_completed { background: #16a34a; }

@media (max-width: 768px) { .kanban-board { grid-template-columns: 1fr; } }

/* ============================================================
   Image Annotator (Site Media)
   ============================================================ */
.annotator {
    background: #1f2937;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    /* Fill the modal body (modal handles its own scroll); the canvas wrap
       grows to absorb leftover space so we get a big workspace. */
    height: calc(90vh - 170px);
    min-height: 420px;
}
.annotator-toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: #111827;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.ann-tool-group {
    display: flex;
    gap: 4px;
    align-items: center;
    padding-right: 12px;
    border-right: 1px solid #374151;
}
.ann-tool-group:last-child { border-right: none; padding-right: 0; }
.ann-tool {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 4px;
    background: #1f2937;
    color: #fff;
    border: 1px solid #374151;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}
.ann-tool:hover { background: #374151; }
.ann-tool:active { transform: translateY(1px); }
.ann-tool.active { background: #2563eb; border-color: #2563eb; }
.ann-zoom-label {
    min-width: 52px;
    text-align: center;
    color: #e5e7eb;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    padding: 0 6px;
    cursor: pointer;
    user-select: none;
}
.ann-zoom-label:hover { color: #fff; }
.ann-color-label {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
}
.ann-color-label input[type=color] {
    width: 28px; height: 24px;
    border: none; background: transparent; cursor: pointer; padding: 0;
}
.annotator-canvas-wrap {
    background: #0f172a;
    background-image:
        linear-gradient(45deg, #111827 25%, transparent 25%),
        linear-gradient(-45deg, #111827 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #111827 75%),
        linear-gradient(-45deg, transparent 75%, #111827 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, 10px 0;
    border-radius: 6px;
    padding: 10px;
    flex: 1 1 auto;
    min-height: 320px;
    overflow: hidden;
    position: relative;
}
#ann-canvas {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    border-radius: 2px;
    display: block;
}
.annotator .ann-hint {
    font-size: 11px;
    margin: 6px 0 0;
    flex-shrink: 0;
    line-height: 1.4;
}

/* Read-only overlay (detail modal preview) */
.sm-ann-overlay { pointer-events: none; }

/* Roof Measure */
.rm-facet-row { display: flex; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid #f1f5f9; }
.rm-facet-row input, .rm-facet-row select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
#rm-toolbar .btn-sm { display: block; width: 100%; margin-top: 4px; font-size: 11px; }

/* ============================================================================
   Assembly / Breakdown row hierarchy — used in Estimates, AI Cost, Proposals
   Visual grouping for parent assembly rows + their Material Breakdown - Level N
   children. Inline styles on each <tr>/<td> carry the colors/borders so the
   look survives PDF/print export; these rules add hover behavior and print
   color preservation.
   ============================================================================ */
.est-row-parent > td,
.cost-row-parent > td,
.prop-row-parent > td {
    font-weight: 700;
}

/* Hover state — chain the child rows visually with their parent */
.est-row-parent:hover,
.est-row-parent:hover + .est-row-child,
.est-row-parent:hover + .est-row-child + .est-row-child,
.est-row-parent:hover + .est-row-child + .est-row-child + .est-row-child,
.est-row-parent:hover + .est-row-child + .est-row-child + .est-row-child + .est-row-child,
.est-row-parent:hover + .est-row-child + .est-row-child + .est-row-child + .est-row-child + .est-row-child {
    background: #fffbeb !important;
}

/* Print: keep the hierarchy obvious on PDF export */
@media print {
    .est-row-child td,
    .cost-row-child td,
    .prop-row-child td {
        background: #eef2ff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .est-row-child td:nth-child(3),
    .cost-row-child td:nth-child(5),
    .prop-row-child td:nth-child(1) {
        padding-left: 32px !important;
    }
    .est-row-parent td,
    .cost-row-parent td,
    .prop-row-parent td {
        border-top: 3px solid #1f2937 !important;
        font-weight: 700 !important;
    }
}

/* ============================================================================
   Assumed line items — red wash + left bar so unverified scope is
   impossible to miss in Estimates, AI Cost, or Proposals.
   ============================================================================ */
.est-row-assumed:hover,
.cost-row-assumed:hover,
.prop-row-assumed:hover {
    background: #fecaca !important;
}
@media print {
    .est-row-assumed td,
    .cost-row-assumed td,
    .prop-row-assumed td {
        background: #fee2e2 !important;
        border-left: 4px solid #dc2626 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ── Dashboard Masonry ─────────────────────────────────────────────────────
   Replaces the static .grid.grid-2-1 / .grid.grid-2 row layout with a true
   masonry grid. Row-spans are computed in JS (lib/dash_masonry.js) to fit
   each card's actual height; grid-auto-flow:dense fills any leftover gap.
   ────────────────────────────────────────────────────────────────────────── */
.dash-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    grid-auto-rows: 8px;            /* matches ROW_HEIGHT in JS */
    grid-auto-flow: dense;          /* fill any leftover gap */
    gap: 16px;
    margin-top: 16px;
}

/* Lock column count at wider breakpoints so cards don't get awkwardly thin */
@media (min-width: 1100px) { .dash-masonry { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1600px) { .dash-masonry { grid-template-columns: repeat(3, 1fr); } }

/* Cards inside masonry keep their existing visual — we only neutralise
   utility margins (mb-3, mb-4) that would fight the grid gap. */
.dash-masonry > .card {
    margin: 0 !important;
    transition: box-shadow .15s ease;
}

/* Subtle hover lift so users discover the cards are interactive */
.dash-masonry > .card:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, .10);
}

/* Header doubles as the drag handle */
.dash-masonry > .card > .card-header {
    cursor: grab;
    user-select: none;
}
.dash-masonry > .card > .card-header::before {
    content: '⋮⋮';
    display: inline-block;
    color: #94a3b8;
    margin-right: 6px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -2px;
    opacity: 0;
    transition: opacity .15s ease;
    transform: translateY(-1px);
}
.dash-masonry > .card:hover > .card-header::before { opacity: .6; }

/* SortableJS state classes (set via dash_masonry.js init options) */
.dash-card-ghost {
    opacity: .25;
    background: rgba(59, 130, 246, .05);
    border-style: dashed !important;
}
.dash-card-chosen { cursor: grabbing !important; }
.dash-card-drag {
    transform: rotate(.4deg);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18) !important;
}

/* ============================================================================
   MOBILE / TABLET HARDENING — v26 audit follow-up (2026-05-30)
   Additive, appended last. Fixes on-site phone/tablet usability found in the
   redesigned pages. !important is used ONLY to beat inline styles or runtime-
   injected <style> blocks. Nothing here changes desktop ( >1024px ) layout.
   ============================================================================ */

/* 1 ── Kill iOS zoom-on-focus. Safari zooms the page whenever a focused form
        control is < 16px. Force 16px on all touch widths (covers iPhone +
        iPad portrait & landscape). Beats inline font-size on redesigned forms.
        Trade-off: very dense in-table inputs get slightly bigger on tablets —
        acceptable for field use; scope to ≤768px instead if you prefer. */
@media (max-width: 1024px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select, textarea { font-size: 16px !important; }
}

/* 2 ── Bigger tap targets for the core chrome on phones (44px = Apple HIG). */
@media (max-width: 768px) {
    #modal-close, #sidebar-toggle, .bell {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0;
    }
    .btn    { min-height: 44px; }
    .btn-sm { min-height: 36px; }
}

/* 3 ── Inertial (momentum) horizontal scrolling on every wide scroller. */
@media (max-width: 1024px) {
    .table-wrap, .tbl-wrap, .est-table-scroll, .cost-table-wrap, .xv-sheet-wrap,
    .gantt-wrap, .pipeline, .kanban-board, .tabs,
    [class$="-scroll"], [class*="-tabs"] { -webkit-overflow-scrolling: touch; }
}

/* 4 ── Global search dropdown: fixed 460px panel ran off a phone's left edge. */
#gs-panel { width: min(460px, 92vw) !important; }

/* 5 ── Split-pane redesigns with large FIXED side rails → stack on small
        tablets/phones so neither pane is crushed or pushed off-screen. */
@media (max-width: 900px) {
    /* Roof Measure — 340px form + 6px resizer + map */
    #rm-split { display: block !important; height: auto !important; }
    #rm-split > :nth-child(2) { display: none !important; }   /* drag resizer */
    #rm-left  { min-width: 0 !important; padding-right: 0 !important;
                overflow: visible !important; max-height: none !important; margin-bottom: 12px; }
    #rm-split > :last-child { min-height: 340px !important; } /* map keeps height */

    /* Counter Vision Pro 3D tab — 210px info + stage + 290px controls */
    .cvp-3d-tab   { grid-template-columns: 1fr !important; height: auto !important; min-height: 0 !important; }
    .cvp-3d-info, .cvp-3d-ctrl { border: 0 !important; }
    .cvp-3d-stage { min-height: 320px !important; }

    /* Kitchen Preview Studio — canvas + 280px control panel */
    [style*="grid-template-columns:1fr 280px"] { grid-template-columns: 1fr !important; height: auto !important; }
    #kp-canvas-wrap { min-height: 320px !important; }
}

/* 6 ── Fixed multi-column grids that never collapse → reflow on phones. */
@media (max-width: 768px) {
    .cvp-kpis      { grid-template-columns: repeat(2, 1fr) !important; } /* 4-up KPI strip */
    .cvp-cut-piece { grid-template-columns: 1fr !important; }            /* 240px thumb + info */
    [style*="minmax(360px"]                        { grid-template-columns: 1fr !important; }            /* Team Page-Access cards */
    [style*="repeat(3,minmax(0,1fr)"]              { grid-template-columns: 1fr !important; }            /* House AI overview 3-up */
    [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; } /* 10-day forecast 5-up */
}