/* ==========================================================================
   Estimating Space — Clearspace Design System implementation
   Source: clearspace-design-system bundle (colors_and_type.css + kit.css)
   Adapted for Flask + Tailwind CDN. Tokens and kit live here directly so
   there's one stylesheet to load.
   ========================================================================== */

@font-face {
    font-family: 'Suisse Intl';
    src: url('/static/fonts/SuisseIntl-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* PRIMARY */
    --cs-light-blue:   #3BABFF;
    --cs-dark-blue:    #323D4C;
    --cs-spatial-white:#FFFFFF;
    --cs-charcoal:     #16191A;

    /* SECONDARY */
    --cs-light-red:    #F05A5A;
    --cs-dark-red:     #692729;
    --cs-light-green:  #B3C100;
    --cs-dark-green:   #3F4D32;

    /* NEUTRAL */
    --cs-n-0:   #FFFFFF;
    --cs-n-50:  #F9FAFB;
    --cs-n-100: #F3F4F6;
    --cs-n-200: #E5E7EB;
    --cs-n-300: #D1D5DB;
    --cs-n-400: #9CA3AF;
    --cs-n-500: #6B7280;
    --cs-n-600: #4B5563;
    --cs-n-700: #374151;
    --cs-n-800: #1F2937;
    --cs-n-900: #16191A;

    /* SEMANTIC */
    --fg-1: var(--cs-charcoal);
    --fg-2: var(--cs-n-500);
    --fg-muted: var(--cs-n-400);
    --fg-link: var(--cs-light-blue);
    --bg-app: var(--cs-n-50);

    --font-primary: 'Suisse Intl', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-pill: 9999px;

    --shadow-card:  0 1px 4px rgba(22, 25, 26, 0.06);
    --shadow-hover: 0 1px 6px rgba(22, 25, 26, 0.07);
    --focus-ring:   0 0 0 3px rgba(59, 171, 255, 0.10);

    --dur-fast: 0.15s;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ── */
html, body {
    background: var(--bg-app);
    color: var(--fg-1);
    margin: 0;
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
*, *:before, *:after { box-sizing: border-box; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

.app { display: flex; min-height: 100vh; }

/* ── Sidebar — prescribed, non-negotiable ── */
.sidebar {
    width: 260px;
    background: var(--cs-dark-blue);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    position: relative;
}
.sidebar.collapsed { width: 72px; }

.sidebar-brand { padding: 24px 20px 18px; min-height: 76px; position: relative; }
.sidebar.collapsed .sidebar-brand { padding: 24px 10px 18px; display: flex; justify-content: center; }
.sidebar-brand .brand-link { display: block; }
.sidebar-brand .brand-wordmark { height: 22px; display: block; margin-bottom: 8px; }
.sidebar-brand .brand-system { font-size: 12px; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.sidebar-brand .brand-mark { width: 22px; height: 22px; display: block; }
.sidebar.collapsed .brand-wordmark,
.sidebar.collapsed .brand-system { display: none; }
.sidebar:not(.collapsed) .brand-mark { display: none; }

.sidebar-collapse-btn {
    position: absolute; top: 32px; right: -14px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    color: var(--cs-n-500);
    background: #fff;
    border: 1px solid var(--cs-n-200);
    cursor: pointer; z-index: 10;
    box-shadow: 0 1px 4px rgba(22, 25, 26, 0.06);
    padding: 0;
    transition: all 0.15s ease;
}
.sidebar-collapse-btn:hover { color: var(--cs-charcoal); border-color: var(--cs-n-300); }
.sidebar-collapse-btn svg { width: 14px; height: 14px; stroke-width: 2; transition: transform 0.2s ease; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-nav { flex: 1; padding: 0 10px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.nav-link {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 14px; border-radius: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 16px; letter-spacing: -0.01em;
    transition: all 0.15s ease; cursor: pointer;
    white-space: nowrap; overflow: hidden;
}
.sidebar.collapsed .nav-link { justify-content: center; gap: 0; padding: 11px 0; }
.sidebar.collapsed .nav-divider { margin: 12px 14px; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-link.active { color: var(--cs-light-blue); background: rgba(59,171,255,0.12); font-weight: 500; }
.nav-link svg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.5; }

.nav-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 12px 12px; }

.sidebar-foot { padding: 0 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.sidebar.collapsed .sidebar-foot .user-row { justify-content: center; gap: 0; padding: 12px 0; }
.sidebar-foot .user-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-top: 4px; color: rgba(255,255,255,0.9); }
.sidebar-foot .user-icon { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.5; }
.sidebar-foot .name { color: #fff; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .sign-out { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; display: block; }
.sidebar-foot .sign-out:hover { color: #fff; }
.sidebar.collapsed .sidebar-foot .name,
.sidebar.collapsed .sidebar-foot .sign-out { display: none; }

/* ── Main ── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 36px 40px; }
.stack { display: flex; flex-direction: column; gap: 32px; }
.stack-sm { display: flex; flex-direction: column; gap: 24px; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-header h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--cs-charcoal); margin: 0; }
.page-header p { font-size: 15px; color: var(--cs-n-500); margin: 4px 0 0; }

/* ── Cards ── */
.card { background: #fff; border: 1px solid var(--cs-n-200); border-radius: 14px; padding: 28px; }
.card.p-0 { padding: 0; overflow: hidden; }
.card-title { font-size: 12px; font-weight: 600; color: var(--cs-n-400); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 16px; }

/* ── Buttons ── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; font-size: 14px; font-weight: 500;
    color: #fff; background: var(--cs-light-blue);
    border-radius: 8px; transition: background 0.15s ease; letter-spacing: -0.01em;
}
.btn-primary:hover { background: var(--cs-dark-blue); }
.btn-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; font-size: 14px; font-weight: 500;
    color: var(--cs-dark-blue); background: var(--cs-n-100);
    border: 1px solid var(--cs-n-200); border-radius: 8px;
    transition: background 0.15s ease; letter-spacing: -0.01em;
}
.btn-secondary:hover { background: #E9EAEC; }
.btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; font-size: 14px; font-weight: 400;
    color: var(--cs-n-500); border-radius: 8px; transition: all 0.15s ease;
}
.btn-ghost:hover { color: var(--cs-charcoal); background: var(--cs-n-100); }

/* ── Form labels ── */
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--cs-n-700);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

/* ── Inputs ── */
.input-field {
    display: block; width: 100%;
    padding: 9px 14px; font-size: 15px; line-height: 1.5;
    border: 1px solid var(--cs-n-300); border-radius: 8px;
    background: #fff; color: var(--cs-charcoal);
    transition: all 0.15s ease; font-family: inherit;
}
.input-field:focus { outline: none; border-color: var(--cs-light-blue); box-shadow: var(--focus-ring); }
.input-field::placeholder { color: var(--cs-n-400); }
select.input-field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer;
}

/* ── Tables ── */
.table-main { border-collapse: collapse; width: 100%; }
.table-main thead { background: var(--cs-n-50); border-bottom: 1px solid var(--cs-n-200); }
.table-main th {
    padding: 14px 20px; font-size: 11px; font-weight: 600;
    color: var(--cs-n-400); text-transform: uppercase; letter-spacing: 0.07em;
    text-align: left;
}
.table-main th.right { text-align: right; }
.table-main td { padding: 16px 20px; font-size: 15px; border-bottom: 1px solid var(--cs-n-100); color: var(--cs-charcoal); }
.table-main tbody tr:last-child td { border-bottom: none; }
.table-main tbody tr.clickable { cursor: pointer; transition: background 0.15s ease; }
.table-main tbody tr.clickable:hover td { background: #FAFAFA; }
.table-main td.muted { color: var(--cs-n-500); font-size: 14px; }
.table-main td.dim { color: var(--cs-n-400); font-size: 12px; }
.table-main td.right { text-align: right; font-variant-numeric: tabular-nums; }

.table-main tr.group-row td {
    background: var(--cs-n-50);
    font-size: 11px; font-weight: 600;
    color: var(--cs-n-500);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 8px 20px;
}
.table-main tr.group-row .count {
    font-weight: 400; color: var(--cs-n-400);
    margin-left: 8px; text-transform: none; letter-spacing: 0;
}

.link-blue { color: var(--cs-light-blue); }
.link-blue:hover { text-decoration: underline; }

/* ── Stage badges ── */
.stage-badge {
    display: inline-block;
    padding: 3px 10px; font-size: 12px; font-weight: 500;
    border-radius: 9999px; white-space: nowrap; letter-spacing: -0.005em;
}
/* Revision statuses */
.stage-awaiting-test-fit  { background: var(--cs-n-100);              color: var(--cs-n-500); }
.stage-reviewing-test-fit { background: #FFF4E0;                       color: #B45309; }
.stage-awaiting-quote     { background: rgba(59,171,255,0.08);         color: #3a7fc1; }
.stage-quote-in-progress  { background: rgba(59,171,255,0.14);         color: #1e6ca7; }
.stage-reviewing-quote    { background: rgba(139,92,246,0.12);         color: #6D28D9; }
.stage-quote-completed    { background: rgba(16,185,129,0.12);         color: #047857; }
.stage-active             { background: rgba(179,193,0,0.18);          color: var(--cs-dark-green); }
.stage-archived           { background: var(--cs-n-100);               color: var(--cs-n-400); }
/* Opportunity stages */
.stage-identified            { background: rgba(59,171,255,0.12);  color: #2a7abf; }
.stage-qualified             { background: rgba(59,171,255,0.18);  color: #1E6CA7; }
.stage-feasibility           { background: rgba(179,193,0,0.18);   color: #3F4D32; }
.stage-on-hold               { background: var(--cs-n-100);         color: var(--cs-n-500); }
.stage-closed-won            { background: rgba(179,193,0,0.15);    color: var(--cs-dark-green); }
.stage-closed-lost           { background: rgba(240,90,90,0.10);    color: #C0392B; }
.stage-default               { background: var(--cs-n-100);         color: var(--cs-n-400); }
/* Legacy sales_space status (kept for any shared templates) */
.stage-estimate-completed    { background: rgba(179,193,0,0.18);    color: var(--cs-dark-green); }

/* Avatar initials pill */
.avatar-initials {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-right: 6px;
    border-radius: 9999px; background: var(--cs-light-blue); color: #fff;
    font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
    vertical-align: middle;
}

/* Icon-only link inside a row */
.icon-link {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--cs-n-500); margin-left: 6px;
    transition: color 0.15s ease;
}
.icon-link:hover { color: var(--cs-light-blue); }
.icon-link.disabled { color: var(--cs-n-300); cursor: default; }
.icon-link svg { width: 16px; height: 16px; }

/* ── Flash ── */
.flash {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-radius: 10px; font-size: 15px;
    animation: flashIn 0.25s var(--ease-out);
}
.flash.success { background: #F0FDF4; color: var(--cs-dark-green); border: 1px solid #BBF7D0; }
.flash.error   { background: #FEF2F2; color: var(--cs-dark-red);   border: 1px solid #FECACA; }
.flash.info    { background: #EFF6FF; color: #1E40AF;               border: 1px solid #BFDBFE; }
.flash .close { opacity: 0.6; font-size: 18px; line-height: 1; background: none; border: none; cursor: pointer; }
.flash .close:hover { opacity: 1; }
@keyframes flashIn { from { opacity: 0; transform: translateY(-0.25rem); } to { opacity: 1; transform: translateY(0); } }

/* ── Required-field asterisk (SKILL rule 13) ── */
.cs-required::after, label.cs-required::after {
    content: "*";
    color: var(--cs-light-red);
    margin-left: 4px;
    font-weight: 500;
    line-height: 1;
}

/* ── Filter bar ── */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filter-bar .grow { flex: 1; max-width: 320px; min-width: 220px; }
.filter-bar select.input-field,
.filter-bar input.input-field { min-width: 160px; }

/* ── Pagination ── */
.pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-top: 1px solid var(--cs-n-100);
    font-size: 13px; color: var(--cs-n-500);
}
.pagination .left { display: flex; align-items: center; gap: 8px; }
.pagination .pages { display: flex; align-items: center; gap: 4px; }
.pagination a, .pagination span.cur, .pagination span.sz {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 10px; font-size: 12px; font-weight: 500;
    border-radius: 6px; background: var(--cs-n-100); color: var(--cs-n-600);
    transition: background 0.15s ease;
}
.pagination a:hover { background: var(--cs-n-200); color: var(--cs-charcoal); }
.pagination .cur, .pagination .sz.active { background: var(--cs-light-blue); color: #fff; }
.pagination .ellipsis { color: var(--cs-n-400); padding: 0 4px; }
.pagination .total { margin-left: 8px; color: var(--cs-n-400); }

/* ── Detail page ── */
.breadcrumb { font-size: 13px; color: var(--cs-n-400); margin-bottom: 4px; }
.breadcrumb a:hover { color: var(--cs-light-blue); }
.detail-label {
    font-size: 11px; font-weight: 600; color: var(--cs-n-400);
    text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 6px;
}
.detail-value { font-size: 15px; color: var(--cs-charcoal); line-height: 1.5; }
.detail-value.muted { color: var(--cs-n-400); }

.detail-card-row { display: flex; background: #fff; border: 1px solid var(--cs-n-200); border-radius: 14px; overflow: hidden; }
.detail-card-row > div { flex: 1; padding: 18px 24px; }
.detail-card-row > div + div { border-left: 1px solid var(--cs-n-100); }

.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; }
.field-grid.two { grid-template-columns: repeat(2, 1fr); }
.field-grid.single { grid-template-columns: 1fr; }

/* ── Two-column detail layout (used on revision + opportunity detail) ── */
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.detail-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (max-width: 1100px) { .detail-grid { grid-template-columns: 1fr; } }

/* 4-tile link row */
.tile-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 14px 8px;
    background: #fff; border: 1px solid var(--cs-n-200); border-radius: 12px;
    color: var(--cs-charcoal); text-align: center; text-decoration: none;
    transition: all 0.15s ease; min-height: 88px;
}
.tile-link:hover { border-color: var(--cs-light-blue); box-shadow: var(--shadow-hover); }
.tile-link.tile-disabled { border-style: dashed; color: var(--cs-n-400); pointer-events: none; }
.tile-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
}
.tile-icon svg { width: 18px; height: 18px; }
.tile-icon-files     { background: rgba(139,92,246,0.12); color: #6D28D9; }
.tile-icon-timeline  { background: var(--cs-n-100);       color: var(--cs-n-400); }
.tile-icon-estimating{ background: rgba(179,193,0,0.18);  color: #3F4D32; }
.tile-icon-dc        { background: #FFF4E0;               color: #B45309; }
.tile-label { font-size: 12px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.2; }

/* Revision detail top row — info card + tiles bottom-aligned */
.rev-top-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
}
.rev-tiles {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.rev-tiles .tile-link {
    flex: 1;
    min-height: 0;
}
@media (max-width: 1100px) { .rev-top-row { grid-template-columns: 1fr; } }

/* Side card header row */
.side-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-action { font-size: 13px; color: var(--cs-light-blue); }
.side-action:hover { text-decoration: underline; }


/* Bullet list (for requirements) */
.bullet-list { margin: 0; padding-left: 20px; }
.bullet-list li { padding: 4px 0; font-size: 15px; color: var(--cs-charcoal); }

/* Edit page form controls */
.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    font-size: 15px;
    font-family: inherit;
    color: var(--cs-charcoal);
    background: #fff;
    border: 1px solid var(--cs-n-200);
    border-radius: 8px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    box-sizing: border-box;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--cs-light-blue);
    box-shadow: 0 0 0 3px rgba(59,171,255,0.12);
}
.form-textarea { resize: vertical; line-height: 1.6; }

/* Numbered requirements list */
.requirements-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.req-item { display: flex; align-items: flex-start; gap: 12px; }
.req-num {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--cs-n-100); color: var(--cs-n-500);
    font-size: 11px; font-weight: 700; letter-spacing: -0.01em;
    margin-top: 1px;
}
.req-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.req-name { font-size: 15px; color: var(--cs-charcoal); font-weight: 500; line-height: 1.4; }
.req-desc { font-size: 13px; color: var(--cs-n-400); line-height: 1.5; }

/* Attachment row (icon + text link in a card) */
.attachment-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: 10px;
    border: 1px solid var(--cs-n-200); background: #fff;
    margin-bottom: 8px; color: var(--cs-charcoal);
    transition: all 0.15s ease; text-decoration: none;
}
.attachment-row:hover { border-color: var(--cs-light-blue); box-shadow: var(--shadow-hover); }
.attachment-row svg { color: var(--cs-n-500); flex-shrink: 0; }
.attachment-row:hover svg { color: var(--cs-light-blue); }

/* ── Comments ── */
.avatar-initials-sm {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 9999px; background: var(--cs-light-blue); color: #fff;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}

.comment-thread { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.comment-day {
    align-self: center;
    font-size: 12px; color: var(--cs-n-400);
    padding: 6px 0;
}
.comment { display: flex; align-items: flex-start; gap: 12px; }
.comment-main { flex: 1; min-width: 0; }
.comment-header {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 14px; color: var(--cs-charcoal);
    line-height: 1.3;
}
.comment-author { font-weight: 600; }
.comment-date   { font-size: 12px; color: var(--cs-n-400); }
.comment-actions {
    margin-left: auto; display: none; gap: 10px;
    font-size: 12px;
}
.comment-actions a { color: var(--cs-n-500); }
.comment-actions a:hover { color: var(--cs-light-blue); text-decoration: underline; }
.comment:hover .comment-actions { display: inline-flex; }
.comment-body {
    margin-top: 2px;
    font-size: 14px; color: var(--cs-charcoal);
    line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.comment-edit-input {
    width: 100%; margin-top: 6px;
    padding: 8px 10px; font-family: inherit; font-size: 14px;
    border: 1px solid var(--cs-light-blue); border-radius: 8px;
    background: #fff; outline: none; resize: vertical;
    box-shadow: var(--focus-ring);
}
.comment-edit-controls { display: flex; gap: 8px; margin-top: 6px; }
.comment-edit-controls .btn-primary,
.comment-edit-controls .btn-ghost { padding: 5px 12px; font-size: 13px; }
.comment-empty { text-align: center; color: var(--cs-n-400); font-size: 14px; padding: 24px 0; }

/* Composer — gray rounded pill with textarea, ghost icons, send button */
.comment-composer {
    display: flex; align-items: flex-start; gap: 12px;
    margin-top: 20px;
    padding: 10px 14px 10px 12px;
    border-radius: 12px;
    background: #F3F4F6;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.comment-composer:focus-within { border-color: var(--cs-n-300); background: #fff; }
.comment-composer.disabled { opacity: 0.55; pointer-events: none; }
.composer-main { flex: 1; min-width: 0; }
.comment-composer textarea {
    width: 100%;
    min-height: 26px; padding: 4px 0;
    font-family: inherit; font-size: 14px; line-height: 1.4;
    color: var(--cs-charcoal);
    background: transparent; border: none; outline: none; resize: none;
}
.comment-composer textarea::placeholder { color: var(--cs-n-400); }
.composer-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 6px;
}
.ghost-icons {
    display: inline-flex; align-items: center; gap: 12px;
    opacity: 0.45; pointer-events: none;
}
.ghost-icons svg { width: 18px; height: 18px; color: var(--cs-n-500); }
.btn-send {
    padding: 6px 16px; font-size: 13px; font-weight: 500;
    border-radius: 8px; border: none; cursor: pointer;
    background: var(--cs-light-blue); color: #fff;
    transition: background 0.15s ease, opacity 0.15s ease;
    font-family: inherit;
}
.btn-send:hover:not(:disabled) { background: var(--cs-dark-blue); }
.btn-send:disabled { background: var(--cs-n-200); color: var(--cs-n-400); cursor: not-allowed; }

/* Coming-soon placeholder */
.coming-soon {
    text-align: center; padding: 64px 24px;
    color: var(--cs-n-500);
}
.coming-soon h2 { font-size: 22px; font-weight: 500; margin: 0 0 8px; color: var(--cs-charcoal); }
.coming-soon p { font-size: 14px; margin: 0; }

/* ── Misc utilities ── */
.flex-row { display: flex; align-items: center; gap: 8px; }
.space-between { justify-content: space-between; }
.muted { color: var(--cs-n-500); }
.dim { color: var(--cs-n-400); }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cs-n-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cs-n-400); }

/* ── Demo-data pill ── */
.demo-pill {
    display: inline-block; margin-left: 8px;
    padding: 2px 8px; border-radius: 9999px;
    background: #FFF4E0; color: #B45309;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
}

/* ── View toggle (table / board) ── */
.view-toggle {
    display: flex;
    align-items: center;
    background: var(--cs-n-100);
    border: 1px solid var(--cs-n-200);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}
.view-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; font-size: 13px; font-weight: 500;
    color: var(--cs-n-400); border-radius: 6px;
    background: none; border: none; cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.view-toggle-btn svg { flex-shrink: 0; }
.view-toggle-btn:hover { color: var(--cs-n-600); }
.view-toggle-btn.active {
    background: #fff;
    color: var(--cs-charcoal);
    box-shadow: 0 1px 3px rgba(22, 25, 26, 0.10);
}

/* ── Kanban board ── */
.kanban-board {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    align-items: flex-start;
    padding-bottom: 12px;
}
.kanban-board::-webkit-scrollbar { height: 6px; }

.kanban-col {
    flex: 0 0 256px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kanban-col-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    background: var(--cs-n-50);
    border: 1px solid var(--cs-n-200);
    border-radius: 9px;
}
/* Subtle status-colour accent on each column header */
.kanban-col[data-bucket="Awaiting Test Fit"]  .kanban-col-head { border-color: rgba(156,163,175,0.5); }
.kanban-col[data-bucket="Reviewing Test Fit"] .kanban-col-head { border-color: rgba(180,83,9,0.3); }
.kanban-col[data-bucket="Awaiting Quote"]     .kanban-col-head { border-color: rgba(59,171,255,0.25); }
.kanban-col[data-bucket="Quote in Progress"]  .kanban-col-head { border-color: rgba(59,171,255,0.45); }
.kanban-col[data-bucket="Reviewing Quote"]    .kanban-col-head { border-color: rgba(109,40,217,0.25); }
.kanban-col[data-bucket="Quote Completed"]    .kanban-col-head { border-color: rgba(16,185,129,0.35); }
.kanban-col[data-bucket="Active"]             .kanban-col-head { border-color: rgba(63,77,50,0.3); }
.kanban-col[data-bucket="Archived"]           .kanban-col-head { border-color: rgba(156,163,175,0.3); }

.kanban-col-title {
    font-size: 11px; font-weight: 600;
    color: var(--cs-n-600);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.kanban-col-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--cs-n-200); color: var(--cs-n-500);
    border-radius: 9999px; font-size: 11px; font-weight: 600;
}

.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 56px; /* drop-zone target when empty */
}

.kanban-card {
    background: #fff;
    border: 1px solid var(--cs-n-200);
    border-radius: 10px;
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.kanban-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--cs-n-300);
}

.kanban-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.kanban-card-tfr {
    font-size: 14px; font-weight: 600; line-height: 1.3;
    flex: 1; min-width: 0;
}
.kanban-drag {
    flex-shrink: 0; margin-top: 1px;
    color: var(--cs-n-300);
    transition: color 0.15s ease;
}
.kanban-card:hover .kanban-drag { color: var(--cs-n-400); }

.kanban-card-address {
    font-size: 13px; font-weight: 500; color: var(--cs-charcoal); line-height: 1.3;
}
.kanban-opp-num { color: var(--cs-n-400); font-weight: 400; }
.kanban-card-account {
    font-size: 12px; color: var(--cs-n-500); margin-top: 1px;
}

.kanban-card-meta {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.kanban-meta-tag {
    display: inline-block;
    font-size: 11px; color: var(--cs-n-500);
    background: var(--cs-n-100);
    border-radius: 4px; padding: 2px 7px;
    white-space: nowrap;
}

.kanban-card-notes {
    font-size: 12px; color: var(--cs-n-500); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.kanban-card-links {
    display: flex; gap: 10px;
    padding-top: 5px;
    border-top: 1px solid var(--cs-n-100);
}

.kanban-empty {
    text-align: center;
    padding: 20px 12px;
    font-size: 12px; color: var(--cs-n-400);
    border: 1px dashed var(--cs-n-200);
    border-radius: 10px;
}

/* Ghost/chosen states for kanban cards */
.sortable-ghost.kanban-card  { opacity: 0.3; background: #EFF6FF; border-color: var(--cs-light-blue); }
.sortable-chosen.kanban-card { box-shadow: 0 4px 16px rgba(59,171,255,0.15); border-color: var(--cs-n-300); }

/* ── Pipeline-specific: drag handle + inline edit ── */
.drag-handle {
    cursor: grab; color: var(--cs-n-300);
    padding: 0 0.25rem; transition: color 0.15s ease;
    user-select: none;
}
.table-main tr:hover .drag-handle { color: var(--cs-n-400); }
.drag-handle:active { cursor: grabbing; color: var(--cs-light-blue); }
.sortable-ghost { opacity: 0.3; background: #EFF6FF !important; }
.sortable-chosen td { background: var(--cs-n-50); }

td.cell-editable { cursor: pointer; transition: background 0.15s ease; }
td.cell-editable:hover { background: rgba(59,171,255,0.04) !important; }
td.cell-editable.is-editing { background: rgba(59,171,255,0.06) !important; padding: 0.5rem; }
.cell-editor {
    width: 100%;
    border: 1px solid var(--cs-light-blue);
    border-radius: 6px; padding: 6px 10px;
    font-size: 14px; font-family: inherit;
    background: #fff;
    box-shadow: var(--focus-ring);
    outline: none;
}
.cell-saving { opacity: 0.6; }
.cell-saved-flash { animation: cellSaved 0.8s ease; }
@keyframes cellSaved {
    0%   { background: rgba(179,193,0,0.18); }
    100% { background: transparent; }
}

/* ── Login ── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #F8FAFC; margin: 0; font-family: var(--font-primary); }
.login-container { width: 100%; max-width: 400px; padding: 24px; }
.login-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 36px; }
.login-card .login-logo { height: 22px; margin-bottom: 20px; display: block; }
.login-brand { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; color: var(--cs-charcoal); }
.login-subtitle { font-size: 14px; color: #64748B; margin-bottom: 28px; }
.login-field { margin-bottom: 16px; }
.login-field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: #334155; }
.login-field input { width: 100%; padding: 10px 14px; font-size: 15px; border: 1px solid #E2E8F0; border-radius: 8px; outline: none; font-family: inherit; color: #0F172A; background: #fff; transition: border-color 0.15s; box-sizing: border-box; }
.login-field input:focus { border-color: var(--cs-light-blue); box-shadow: var(--focus-ring); }
.login-btn { width: 100%; padding: 10px 16px; font-size: 15px; font-weight: 500; background: var(--cs-dark-blue); color: #fff; border-radius: 8px; margin-top: 8px; transition: background 0.15s; }
.login-btn:hover { background: var(--cs-charcoal); }
.login-btn-ms {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 10px 16px; font-size: 15px; font-weight: 500;
    background: #fff; color: #1E293B; border: 1px solid #E2E8F0; border-radius: 8px;
    transition: all 0.15s; text-decoration: none; box-sizing: border-box;
}
.login-btn-ms:hover { background: #F8FAFC; border-color: #CBD5E1; }
.login-divider { display: flex; align-items: center; margin: 20px 0; gap: 12px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: #E2E8F0; }
.login-divider span { font-size: 12px; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.07em; }
.alert { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.alert-warning { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.alert-success { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; }
.alert-error   { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }