/* ============================================================
   VisionApps — Design System
   Inspired by VisionPM intranet aesthetic
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
    /* Surfaces */
    --va-bg:          #f7f7f8;
    --va-bg-2:        #f1f2f4;
    --va-bg-active:   #e6e7eb;
    --va-surface:     #ffffff;

    /* Borders */
    --va-border:      #e3e5ea;
    --va-border-dark: #cbcdd4;

    /* Text */
    --va-text-primary:   #181a20;
    --va-text-secondary: #3b3f48;
    --va-text-muted:     #62666f;
    --va-text-hint:      #8a8e97;

    /* Accent — near-black (matches VisionPM primary action color) */
    --va-accent:         #181a20;
    --va-accent-hover:   #2d3139;
    --va-accent-dim:     #e6e7eb;

    /* Brand palette */
    --va-teal:    #3f8a78;
    --va-blue:    #3d7bbd;
    --va-rose:    #c14b4b;
    --va-gold:    #a07d1c;
    --va-violet:  #6f57a8;
    --va-lime:    #4f9e4f;

    /* Typography */
    --va-font-body:    'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --va-font-display: 'Fraunces', Georgia, serif;
    --va-font-size:    13px;
    --va-line-height:  1.55;

    /* Radius */
    --va-radius-sm: 6px;
    --va-radius:    10px;
    --va-radius-lg: 14px;

    /* Shadows */
    --va-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --va-shadow:    0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);

    /* Bootstrap overrides via CSS variables */
    --bs-body-font-family:    var(--va-font-body);
    --bs-body-font-size:      var(--va-font-size);
    --bs-body-line-height:    var(--va-line-height);
    --bs-body-color:          var(--va-text-primary);
    --bs-body-bg:             var(--va-bg);
    --bs-border-color:        var(--va-border);
    --bs-border-radius:       var(--va-radius-sm);
    --bs-border-radius-sm:    4px;
    --bs-border-radius-lg:    var(--va-radius);
    --bs-card-border-radius:  var(--va-radius);
    --bs-primary-rgb:         24, 26, 32;        /* #181a20 */
    --bs-link-color:          var(--va-blue);
    --bs-link-hover-color:    #2c5f96;
}

/* ── Base ───────────────────────────────────────────────────── */
html, body {
    font-family:  var(--va-font-body);
    font-size:    var(--va-font-size);
    line-height:  var(--va-line-height);
    color:        var(--va-text-primary);
    background:   var(--va-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--va-font-body);
    font-weight: 600;
    color: var(--va-text-primary);
}

/* ── Links ──────────────────────────────────────────────────── */
a, .btn-link {
    color: var(--va-blue);
    text-decoration: none;
}
a:hover, .btn-link:hover {
    color: #2c5f96;
    text-decoration: underline;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    font-family: var(--va-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--va-radius-sm);
    padding: 0.38rem 0.85rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
    background-color: var(--va-accent);
    border-color:     var(--va-accent);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--va-accent-hover);
    border-color:     var(--va-accent-hover);
    color: #fff;
}

.btn-outline-primary {
    color: var(--va-accent);
    border-color: var(--va-border-dark);
}
.btn-outline-primary:hover {
    background-color: var(--va-bg-2);
    border-color: var(--va-border-dark);
    color: var(--va-accent);
}

.btn-secondary {
    background-color: var(--va-bg-2);
    border-color: var(--va-border);
    color: var(--va-text-secondary);
}
.btn-secondary:hover {
    background-color: var(--va-bg-active);
    border-color: var(--va-border-dark);
    color: var(--va-text-primary);
}

.btn-outline-secondary {
    color: var(--va-text-secondary);
    border-color: var(--va-border-dark);
    background: transparent;
}
.btn-outline-secondary:hover {
    background-color: var(--va-bg-2);
    border-color: var(--va-border-dark);
    color: var(--va-text-primary);
}

.btn-outline-danger {
    color: var(--va-rose);
    border-color: #e8b4b4;
}
.btn-outline-danger:hover {
    background-color: #fdf0f0;
    border-color: var(--va-rose);
    color: var(--va-rose);
}

.btn-sm {
    font-size: 11px;
    padding: 0.28rem 0.65rem;
}

/* ── Focus ring ─────────────────────────────────────────────── */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(61, 123, 189, 0.2);
    outline: none;
    border-color: var(--va-blue);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--va-border);
    border-radius: var(--va-radius);
    background: var(--va-surface);
    box-shadow: var(--va-shadow-sm);
}
.card-header {
    background: var(--va-bg-2);
    border-bottom: 1px solid var(--va-border);
    font-weight: 600;
    font-size: 12px;
    padding: 0.65rem 1rem;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table {
    font-size: 13px;
    color: var(--va-text-primary);
}
.table thead th {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--va-text-muted);
    background: var(--va-bg-2);
    border-bottom: 1px solid var(--va-border);
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
}
.table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--va-border);
    vertical-align: middle;
}
.table-hover tbody tr:hover td {
    background-color: var(--va-bg-2);
}
.table-light {
    --bs-table-bg: var(--va-bg-2);
    --bs-table-border-color: var(--va-border);
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--va-text-muted);
    margin-bottom: 0.3rem;
}
.form-control, .form-select {
    font-size: 13px;
    border: 1px solid var(--va-border-dark);
    border-radius: var(--va-radius-sm);
    background: var(--va-surface);
    color: var(--va-text-primary);
    padding: 0.42rem 0.7rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:hover, .form-select:hover {
    border-color: var(--va-text-hint);
}
.form-control::placeholder {
    color: var(--va-text-hint);
}
.form-text {
    font-size: 11px;
    color: var(--va-text-muted);
}
.form-check-input:checked {
    background-color: var(--va-accent);
    border-color: var(--va-accent);
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 4px;
    padding: 0.28em 0.6em;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
    border-radius: var(--va-radius-sm);
    font-size: 13px;
    border: 1px solid transparent;
}

/* ── Modals ─────────────────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--va-border);
    border-radius: var(--va-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.modal-header {
    border-bottom: 1px solid var(--va-border);
    padding: 1rem 1.25rem 0.85rem;
    background: var(--va-surface);
    border-radius: var(--va-radius) var(--va-radius) 0 0;
}
.modal-title {
    font-size: 14px;
    font-weight: 600;
}
.modal-footer {
    border-top: 1px solid var(--va-border);
    background: var(--va-bg-2);
    border-radius: 0 0 var(--va-radius) var(--va-radius);
    padding: 0.75rem 1.25rem;
}
.modal-body {
    padding: 1.25rem;
}

/* ── Nav section labels ─────────────────────────────────────── */
.nav-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--va-text-hint);
}

/* ── Page header pattern ────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.page-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* ── Summary stat cards ─────────────────────────────────────── */
.stat-card {
    background: var(--va-surface);
    border: 1px solid var(--va-border);
    border-radius: var(--va-radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--va-shadow-sm);
}
.stat-card .stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--va-text-muted);
}
.stat-card .stat-value {
    font-family: var(--va-font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--va-text-primary);
    line-height: 1.2;
}

/* ── Content area ───────────────────────────────────────────── */
.content {
    padding-top: 1.25rem;
}

/* ── List pages: the list scrolls inside itself; the page does not ──────────── */
/* Desktop only. The .list-fill wrapper fills the area below the top bar; the header and
   filters sit at natural height, and the list card grows to fill the rest and scrolls
   internally, ending 20px above the window bottom. On mobile the page scrolls normally. */
@media (min-width: 641px) {
    .list-fill {
        /* 100vh − top-row (3.5rem) − .content padding-top (1.25rem) */
        height: calc(100vh - 4.75rem);
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;           /* the list ends 20px above the window bottom */
        overflow: hidden;               /* the page region itself never scrolls */
    }

    /* The list card is the direct .card child — it grows and scrolls. Modals (.modal) are
       direct children too but are position:fixed, so they're unaffected. */
    .list-fill > .card {
        flex: 1 1 auto;
        min-height: 0;                  /* allow shrinking so the inner area can scroll */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .list-fill > .card > .table-responsive {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;               /* the actual vertical scroll happens here */
    }

    /* Keep column headers visible while the body scrolls. */
    .list-fill .table-responsive thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #f8f9fa;       /* matches table-light so rows don't show through */
    }
}

/* ── Validation ─────────────────────────────────────────────── */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--va-lime);
}
.invalid {
    outline: 1px solid var(--va-rose);
}
.validation-message {
    color: var(--va-rose);
    font-size: 11px;
}

/* ── Blazor error UI ────────────────────────────────────────── */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: var(--va-border-dark);
}

/* ── Floating label quirk fix ───────────────────────────────── */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Dropdown menus ─────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--va-border);
    border-radius: var(--va-radius-sm);
    box-shadow: var(--va-shadow);
    font-size: 13px;
    padding: 0.3rem;
}
.dropdown-item {
    border-radius: 4px;
    padding: 0.38rem 0.65rem;
    color: var(--va-text-secondary);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--va-bg-2);
    color: var(--va-text-primary);
}

/* ── Pagination ─────────────────────────────────────────────── */
.page-link {
    color: var(--va-text-secondary);
    border-color: var(--va-border);
    font-size: 12px;
}
.page-link:hover {
    background: var(--va-bg-2);
    color: var(--va-text-primary);
    border-color: var(--va-border-dark);
}
.page-item.active .page-link {
    background: var(--va-accent);
    border-color: var(--va-accent);
}

/* ===== RESPONSIVE / MOBILE =============================================== */

@media (max-width: 640.98px) {

    /* ── Messages: full-height panel layout ── */
    .messages-container {
        /* account for fixed brand bar (3.5rem) + account bar (3.5rem) */
        height: calc(100vh - 7rem) !important;
        overflow: hidden;
    }

    .messages-left-panel {
        width: 100% !important;
        min-width: 0 !important;
    }

    .messages-right-panel {
        width: 100%;
    }

    /* ── Tables: show only name + any .mobile-show column ── */

    /* Legacy: first-column only */
    .table-mobile-name-only > thead > tr > th:not(:first-child),
    .table-mobile-name-only > tbody > tr > td:not(:first-child) {
        display: none;
    }
    .table-mobile-name-only > tbody > tr > td:first-child {
        width: 100%;
        max-width: 100%;
    }
    .table-mobile-name-only > tbody > tr { cursor: pointer; }

    /* Compact: first column + any <th class="mobile-show"> / <td class="mobile-show"> */
    .table-responsive-list > thead > tr > th:not(:first-child):not(.mobile-show),
    .table-responsive-list > tbody > tr > td:not(:first-child):not(.mobile-show) {
        display: none;
    }
    .table-responsive-list > tbody > tr > td:first-child { font-weight: 500; }
    .table-responsive-list > tbody > tr { cursor: pointer; }

    /* ── Kanban: one column fills the viewport width ── */
    .kanban-column {
        width: calc(100vw - 1.5rem);
        min-width: calc(100vw - 1.5rem);
    }

    /* Recalculate viewport height on mobile:
       fixed brand bar (3.5) + account bar (3.5) + article pad (0.75) +
       page title (2.5) + template-picker row (3) + a small gap (1) = 14.25rem */
    .kanban-viewport {
        height: calc(100vh - 14.25rem);
    }

    /* ── Modals: use most of the screen on small devices ── */
    .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100vw - 1rem);
    }

    /* Tall modals should scroll rather than overflow the screen */
    .modal-dialog .modal-body {
        max-height: calc(100vh - 12rem);
        overflow-y: auto;
    }

    /* ── Card/article horizontal padding reduction ── */
    article {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* ── Page header: stack on very small screens ── */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* ── Forms: full-width selects and inputs ── */
    .form-control, .form-select {
        max-width: 100% !important;
    }

    /* ── Import preview table: ensure horizontal scroll ── */
    .import-preview-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Quill rich-text editor ─────────────────────────────────────────────────
   Wraps the Quill Snow editor inside a Bootstrap-compatible container so it
   fits naturally inside modals, cards, and form groups.
   ─────────────────────────────────────────────────────────────────────────── */

/* Outer wrapper provides the visible border & radius */
.quill-wrapper {
    border: 1px solid var(--va-border-dark) !important;
    border-radius: var(--va-radius-sm) !important;
    overflow: hidden;
    background: #fff;
}

/* Remove Quill's own outer border — we supply one via .quill-wrapper */
.quill-wrapper .ql-toolbar.ql-snow,
.quill-wrapper .ql-container.ql-snow {
    border: none !important;
}

/* Toolbar: light background, a bottom divider */
.quill-wrapper .ql-toolbar.ql-snow {
    background: var(--va-bg-2);
    border-bottom: 1px solid var(--va-border) !important;
    padding: 6px 8px;
    flex-wrap: wrap;
}

/* Toolbar buttons: match the app's muted-text colour */
.quill-wrapper .ql-toolbar .ql-stroke {
    stroke: var(--va-text-muted);
}
.quill-wrapper .ql-toolbar .ql-fill {
    fill: var(--va-text-muted);
}
.quill-wrapper .ql-toolbar button:hover .ql-stroke,
.quill-wrapper .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--va-accent) !important;
}
.quill-wrapper .ql-toolbar button:hover .ql-fill,
.quill-wrapper .ql-toolbar button.ql-active .ql-fill {
    fill: var(--va-accent) !important;
}

/* Editable area */
.quill-wrapper .ql-container {
    font-family: var(--va-font-body);
    font-size: var(--va-font-size);
    line-height: var(--va-line-height);
    color: var(--va-text-primary);
}
.quill-wrapper .ql-editor {
    padding: 12px 16px;
    min-height: inherit;      /* respects the inline min-height set on the mount div */
}

/* Placeholder text */
.quill-wrapper .ql-editor.ql-blank::before {
    color: var(--va-text-hint);
    font-style: normal;
}

/* Tighter line spacing — override the browser's default 1em paragraph margin */
.quill-wrapper .ql-editor p {
    margin-top:    0;
    margin-bottom: 0.15em;
    line-height:   1.45;
}
.quill-wrapper .ql-editor p + p {
    margin-top: 0.25em;
}

/* Size picker: show the chosen px values as human-readable labels */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before  { content: '10 pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before  { content: '12 pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before  { content: '14 pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before   { content: 'Normal'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before  { content: '18 pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before  { content: '24 pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before  { content: '32 pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='48px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='48px']::before  { content: '48 pt'; }

/* ── Kanban board ────────────────────────────────────────────────────────────
   Used by KanbanBoard.razor on all list-view pages.
   The board fills the full available width and owns its own horizontal scroll
   so the page never scrolls horizontally.  Each column body scrolls its cards
   vertically independently.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Viewport-locked kanban wrapper ─────────────────────────────────────────
   Wrap the template-picker + <KanbanBoard> in <div class="kanban-viewport">.
   The viewport fills exactly the remaining screen height below the standard
   page chrome (top-bar 3.5rem + article-pad 1.25rem + title+gap 4rem +
   filter-bar+gap 3.25rem = 12rem).  Columns stretch to fill the board and
   their bodies scroll independently — the page never scrolls vertically while
   the board is visible.
   ─────────────────────────────────────────────────────────────────────────── */

.kanban-viewport {
    height: calc(100vh - 12rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kanban-viewport .kanban-board {
    flex: 1;
    min-height: 0;
    /* board owns horizontal scroll; viewport clips vertical */
    overflow-x: auto;
    overflow-y: hidden;
    /* prevent the flex child from reporting zero height to its columns */
    align-items: stretch;
    min-width: 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Inside a viewport, columns must stretch to fill the board height */
.kanban-viewport .kanban-column {
    align-self: stretch;
    height: 100%;
}

/* Inside a viewport, col-body fills the remaining column space */
.kanban-viewport .kanban-col-body {
    max-height: none;
    flex: 1;
    min-height: 0;
}

/* ── Swimlane mode ───────────────────────────────────────────────────────────
   .kanban-board-swimlanes replaces .kanban-board as the direct child of
   .kanban-viewport when a swimlane field is active.  It scrolls vertically;
   each .kanban-swimlane contains a .kanban-board that scrolls horizontally.
   ─────────────────────────────────────────────────────────────────────────── */

.kanban-board-swimlanes {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.kanban-viewport .kanban-board-swimlanes {
    flex: 1;
    min-height: 0;
}

.kanban-swimlane {
    margin-bottom: 1.25rem;
}

.kanban-swimlane-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.5rem;
    border-left: 4px solid var(--bs-primary, #0d6efd);
    border-radius: 0 4px 4px 0;
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-primary-text-emphasis, #052c65);
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inside swimlane mode the inner .kanban-board scrolls horizontally
   but should NOT stretch to fill the viewport — let the lanes stack */
.kanban-board-swimlanes .kanban-board {
    flex: none;
    overflow-y: visible;
    overflow-x: auto;
}

/* col-body gets a sensible max-height per swimlane row */
.kanban-board-swimlanes .kanban-col-body {
    max-height: 420px;
}

/* ─────────────────────────────────────────────────────────────────────────── */

.kanban-board {
    /* fill the content area width exactly */
    width: 100%;
    min-height: 200px;
    /* horizontal scroll lives here — columns never widen the page */
    overflow-x: auto;
    /* let the column bodies control vertical overflow themselves */
    overflow-y: visible;
    /* smooth scrolling on touch/trackpad */
    -webkit-overflow-scrolling: touch;
}

.kanban-column {
    width: 272px;
    min-width: 272px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--va-border, rgba(0,0,0,.125));
    background: var(--va-bg-2, #f8f9fa);
    display: flex;
    flex-direction: column;
    /* column stretches to fill visible height so short lists look tidy */
    align-self: flex-start;
}

.kanban-col-header {
    /* fallback when no Bootstrap class or hex colour is set */
    background: #6c757d;
    color: #fff;
    user-select: none;
    min-height: 40px;
}

/* Ensure white text on any bg- Bootstrap class */
.kanban-col-header.bg-secondary,
.kanban-col-header.bg-primary,
.kanban-col-header.bg-success,
.kanban-col-header.bg-danger,
.kanban-col-header.bg-info,
.kanban-col-header.bg-dark  { color: #fff; }
.kanban-col-header.bg-warning { color: #212529; }

.kanban-col-body {
    padding: 0.5rem;
    flex: 1;
    min-height: 80px;
    /* Fallback cap for boards not wrapped in .kanban-viewport.
       top-bar(3.5) + article-pad(1.25) + title+mb-4(4) + filter(3.25) +
       template-picker(3.25) + col-header(2.5) ≈ 17.75rem              */
    max-height: calc(100vh - 18rem);
    overflow-y: auto;
}

.kanban-card {
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.09);
    background: #fff;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.kanban-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.14) !important;
    border-color: rgba(0,0,0,.18);
}

.kanban-empty {
    opacity: 0.5;
}

/* ── Kanban drag-and-drop ────────────────────────────────────────────────── */

/* Card being dragged — dim it so it's clear what's "in flight" */
.kanban-dragging {
    opacity: 0.35;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Column highlighted when a draggable card hovers over it */
.kanban-col-drag-over {
    outline: 2px dashed var(--va-accent, #181a20);
    outline-offset: -3px;
}
.kanban-col-drag-over .kanban-col-body {
    background: var(--va-bg-active, #e6e7eb);
}

/* ── Dashboard KPI cards ────────────────────────────────── */
.kpi-card { border-left: 3px solid var(--bs-primary); }
.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.kpi-trend { min-height: 1.25rem; }

/* ── Sync-state flags (Customers, Leads, etc.) ──────────── */
/* Two-letter badge with an icon indicating whether a record
   has been synced to an external system (Pace = P, Zoho = Z). */
.sync-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 2px 6px;
    border-radius: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
}
.sync-flag--on {
    background: var(--bs-success-bg-subtle, #d1e7dd);
    border-color: var(--bs-success-border-subtle, #a3cfbb);
    color: var(--bs-success-text-emphasis, #0a3622);
}
.sync-flag--off {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    border-color: var(--bs-danger-border-subtle, #f1aeb5);
    color: var(--bs-danger-text-emphasis, #58151c);
}