/* ============================================================
   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;
}

/* ── 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 {
        height: calc(100vh - 3.5rem) !important;
        overflow: hidden;
    }

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

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

    /* ── Tables: show only the first (name) column on mobile ── */
    .table-mobile-name-only > thead > tr > th:not(:first-child),
    .table-mobile-name-only > tbody > tr > td:not(:first-child) {
        display: none;
    }

    /* Make name cell fill width and appear tappable */
    .table-mobile-name-only > tbody > tr > td:first-child {
        width: 100%;
        max-width: 100%;
    }

    .table-mobile-name-only > tbody > tr {
        cursor: pointer;
    }

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

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

/* ── 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; }