/* custom.css - Consolidated Bootstrap Customizations */

/* Locked feature preview (upcoming Workspace/Calendar/Matter List entries) */
.feature-locked {
    opacity: 0.65;
}
.feature-locked:hover:not(.disabled) {
    opacity: 1;
}

/* =========================
   CUSTOM COLOR THEME OVERRIDES
   ========================= */
:root {
    --bs-primary: #006994;
    --bs-primary-rgb: 0, 105, 148;
    --bs-secondary: #ff966b;
    --bs-secondary-rgb: 255, 150, 107;
    --bs-primary-bg-subtle: #d9eaf1;
    --bs-primary-border-subtle: #a6cbdb;
    --bs-primary-text-emphasis: #00425c;
    --bs-secondary-bg-subtle: #ffeee6;
    --bs-secondary-border-subtle: #ffd3c0;
    --bs-secondary-text-emphasis: #7a3f22;
}

/* Links follow the brand blue, not Bootstrap's. Dark mode uses a lighter tint of it because
   #006994 on the dark background is too low contrast to read. */
:root, [data-bs-theme="light"] {
    --bs-link-color: #006994;
    --bs-link-color-rgb: 0, 105, 148;
    --bs-link-hover-color: #00425c;
    --bs-link-hover-color-rgb: 0, 66, 92;
}
[data-bs-theme="dark"] {
    --bs-link-color: #4db8e8;
    --bs-link-color-rgb: 77, 184, 232;
    --bs-link-hover-color: #8fd3f2;
    --bs-link-hover-color-rgb: 143, 211, 242;
}

/* The subtle/emphasis tints are dark-mode values; light mode above gets pale ones
   (they were dark in both themes, which made e.g. unassigned merge rows near-black). */
[data-bs-theme="dark"] {
    --bs-primary-bg-subtle: #001a24;
    --bs-primary-border-subtle: #003d54;
    --bs-primary-text-emphasis: #4db8e8;
    --bs-secondary-bg-subtle: #2d1a10;
    --bs-secondary-border-subtle: #5c3421;
    --bs-secondary-text-emphasis: #ffb898;
}

/* Dark Theme Variables */
[data-bs-theme="dark"] {
    --sidebar-bg: #212529;
    --sidebar-border: #495057;
    --sidebar-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    --sidebar-nav-link-color: #adb5bd;
    --sidebar-nav-link-hover-bg: #343a40;
    --sidebar-nav-link-active-bg: #0b2f3f;
    --sidebar-nav-link-active-color: #4db8e8;
    --sidebar-text-color: #f8f9fa;
    --sidebar-secondary-text: #adb5bd;
    --sidebar-user-card-bg: linear-gradient(135deg, #343a40 0%, #495057 100%);
}

/* Light theme: pure white is harsh, so the page is a cool grey and every raised surface
   (cards, bordered rows, sidebar, menus, inputs) is one softened off-white with a firmer
   border and a hint of shadow. The lift between page and surface is what keeps containers
   from camouflaging into the background. */
[data-bs-theme="light"] {
    --surface-soft: #f8fafc;
    --bs-body-bg: #e6ebf1;
    --bs-body-bg-rgb: 230, 235, 241;
    --bs-tertiary-bg: #dde3ea;
    --bs-tertiary-bg-rgb: 221, 227, 234;
    --bs-secondary-bg: #dde3ea;
    --bs-card-bg: var(--surface-soft);
    --bs-border-color: #c9d1db;
}
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .dropdown-menu,
[data-bs-theme="light"] .list-group-item,
[data-bs-theme="light"] .offcanvas,
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] .accordion-item,
[data-bs-theme="light"] .accordion-button:not(.collapsed),
[data-bs-theme="light"] .bg-white,
[data-bs-theme="light"] .bg-body,
[data-bs-theme="light"] .bg-body-tertiary { background-color: var(--surface-soft) !important; }
[data-bs-theme="light"] :is(.rounded, .rounded-2, .rounded-3, .rounded-4).border:not([class*="bg-"]) { background-color: var(--surface-soft); }
[data-bs-theme="light"] .card,
[data-bs-theme="light"] :is(.rounded, .rounded-2, .rounded-3, .rounded-4).border { box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
[data-bs-theme="light"] .nav-tabs .nav-link.active { background-color: var(--surface-soft); }

/* Light Theme Variables */
[data-bs-theme="light"] {
    --sidebar-bg: #f8fafc;
    --sidebar-border: #c9d1db;
    --sidebar-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --sidebar-nav-link-color: #6c757d;
    --sidebar-nav-link-hover-bg: #e6ebf1;
    --sidebar-nav-link-active-bg: #d9eaf1;
    --sidebar-nav-link-active-color: #006994;
    --sidebar-text-color: #212529;
    --sidebar-secondary-text: #6c757d;
    --sidebar-user-card-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* =========================
   NAVBAR STYLING
   ========================= */
.navbar.bg-primary {
    background-color: var(--bs-primary) !important;
}

.navbar-authenticated {
    min-height: 60px;
    padding: 0.5rem 1rem;
}

.navbar-authenticated .container-fluid {
    padding: 0;
}

@media (min-width: 992px) {
    .navbar-authenticated {
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s ease-in-out;
    }
    
    .navbar-authenticated.sidebar-collapsed {
        margin-left: var(--sidebar-collapsed-width);
    }
}

@media (max-width: 575.98px) {
    .navbar-brand {
        font-size: 1.125rem;
    }
}

/* =========================
   BUTTON OVERRIDES
   ========================= */
.btn-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black) !important;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb) !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black) !important;
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, black) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--bs-primary) !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
}

.btn-secondary {
    --bs-btn-color: #000 !important;
    --bs-btn-bg: var(--bs-secondary) !important;
    --bs-btn-border-color: var(--bs-secondary) !important;
    --bs-btn-hover-color: #000 !important;
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 80%, black) !important;
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb) !important;
    --bs-btn-active-color: #000 !important;
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 80%, black) !important;
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 75%, black) !important;
    --bs-btn-disabled-color: #000 !important;
    --bs-btn-disabled-bg: var(--bs-secondary) !important;
    --bs-btn-disabled-border-color: var(--bs-secondary) !important;
}

.btn-info {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--bs-info) !important;
    --bs-btn-border-color: var(--bs-info) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 85%, black) !important;
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 80%, black) !important;
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb) !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 80%, black) !important;
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 75%, black) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--bs-info) !important;
    --bs-btn-disabled-border-color: var(--bs-info) !important;
}

.team-dropdown .btn-info {
    color: #fff !important;
}

[data-bs-theme="dark"] .team-dropdown .btn-info {
    color: #fff !important;
    --bs-btn-bg: color-mix(in srgb, var(--bs-info) 90%, black) !important;
    --bs-btn-border-color: color-mix(in srgb, var(--bs-info) 85%, black) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb) !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--bs-primary) !important;
    --bs-btn-active-border-color: var(--bs-primary) !important;
    --bs-btn-disabled-color: var(--bs-primary) !important;
    --bs-btn-disabled-bg: transparent !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
}

/* Outline buttons: the brand blue is unreadable as text on the dark background. */
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #4db8e8 !important;
    --bs-btn-border-color: #2a8fb8 !important;
    --bs-btn-disabled-color: #4db8e8 !important;
    --bs-btn-disabled-border-color: #2a8fb8 !important;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary) !important;
    --bs-btn-border-color: var(--bs-secondary) !important;
    --bs-btn-hover-color: #000 !important;
    --bs-btn-hover-bg: var(--bs-secondary) !important;
    --bs-btn-hover-border-color: var(--bs-secondary) !important;
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb) !important;
    --bs-btn-active-color: #000 !important;
    --bs-btn-active-bg: var(--bs-secondary) !important;
    --bs-btn-active-border-color: var(--bs-secondary) !important;
    --bs-btn-disabled-color: var(--bs-secondary) !important;
    --bs-btn-disabled-bg: transparent !important;
    --bs-btn-disabled-border-color: var(--bs-secondary) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary) !important;
    --bs-btn-border-color: var(--bs-secondary) !important;
    --bs-btn-hover-color: #000 !important;
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 90%, black) !important;
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
    --bs-btn-active-color: #000 !important;
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 90%, black) !important;
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
    --bs-btn-disabled-color: var(--bs-secondary) !important;
    --bs-btn-disabled-bg: transparent !important;
    --bs-btn-disabled-border-color: var(--bs-secondary) !important;
}

.btn:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.btn-group .btn-check:checked + .btn {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.btn .spinner-border-sm {
    width: 0.875rem;
    height: 0.875rem;
}

.btn:disabled {
    opacity: 0.65;
}

a.btn-link {
    color: var(--bs-link-color);
    text-decoration: none;
}

a.btn-link:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

/* =========================
   PROGRESS BAR OVERRIDES
   ========================= */
.progress-bar {
    background-color: var(--bs-primary) !important;
}

.progress-bar.bg-success {
    background-color: var(--bs-success) !important;
}

.progress-bar.bg-info {
    background-color: var(--bs-primary) !important;
}

.progress-bar.bg-primary {
    background-color: var(--bs-primary) !important;
}

.progress-bar.bg-danger {
    background-color: var(--bs-danger) !important;
}

.progress-section .progress {
    height: 8px;
    background-color: var(--bs-secondary-bg);
}

/* =========================
   DROPDOWN OVERRIDES
   ========================= */
[data-bs-theme="light"] .dropdown-menu {
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-dark);
    --bs-dropdown-link-hover-bg: var(--bs-light);
    --bs-dropdown-link-active-color: var(--bs-white);
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-divider-bg: var(--bs-border-color);
    --bs-dropdown-header-color: var(--bs-gray-600);
}

[data-bs-theme="light"] .dropdown-menu .dropdown-item:hover,
[data-bs-theme="light"] .dropdown-menu .dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--bs-gray-800);
    --bs-dropdown-border-color: var(--bs-gray-600);
    --bs-dropdown-color: var(--bs-gray-100);
    --bs-dropdown-link-color: var(--bs-gray-200);
    --bs-dropdown-link-hover-color: var(--bs-white);
    --bs-dropdown-link-hover-bg: var(--bs-gray-700);
    --bs-dropdown-link-active-color: var(--bs-white);
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-divider-bg: var(--bs-gray-600);
    --bs-dropdown-header-color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--bs-gray-200);
    transition: all 0.15s ease-in-out;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus {
    color: var(--bs-white) !important;
    background-color: var(--bs-gray-700) !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item:active {
    color: var(--bs-white) !important;
    background-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-header {
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-divider {
    border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item.disabled,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:disabled {
    color: var(--bs-gray-500) !important;
    background-color: transparent !important;
}

.dropdown-menu-dark {
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-dark);
    --bs-dropdown-link-hover-bg: var(--bs-light);
    --bs-dropdown-link-active-color: var(--bs-white);
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-divider-bg: var(--bs-border-color);
    --bs-dropdown-header-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .dropdown-menu-dark {
    --bs-dropdown-bg: var(--bs-gray-800);
    --bs-dropdown-border-color: var(--bs-gray-600);
    --bs-dropdown-color: var(--bs-gray-200);
    --bs-dropdown-link-color: var(--bs-gray-200);
    --bs-dropdown-link-hover-color: var(--bs-white);
    --bs-dropdown-link-hover-bg: var(--bs-gray-700);
    --bs-dropdown-link-active-color: var(--bs-white);
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-divider-bg: var(--bs-gray-600);
    --bs-dropdown-header-color: var(--bs-gray-400);
}

.dropdown-menu-dark .dropdown-item {
    color: var(--bs-dropdown-link-color);
}

.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color) !important;
    background-color: var(--bs-dropdown-link-hover-bg) !important;
}

.dropdown-menu-dark .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color) !important;
    background-color: var(--bs-dropdown-link-active-bg) !important;
}

.dropdown-menu-dark .dropdown-item.disabled,
.dropdown-menu-dark .dropdown-item:disabled {
    color: var(--bs-gray-500) !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:focus {
    color: var(--bs-white) !important;
    background-color: var(--bs-gray-700) !important;
}

.navbar-brand .dropdown-menu {
    margin-top: 0.5rem;
}

[data-bs-theme="dark"] .navbar-brand .dropdown-menu .dropdown-item:hover {
    background-color: var(--bs-gray-700) !important;
    color: var(--bs-white) !important;
}

[data-bs-theme="dark"] .team-dropdown .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .team-dropdown .dropdown-item:hover {
    background-color: var(--bs-gray-700) !important;
    color: var(--bs-white) !important;
}

[data-bs-theme="dark"] .user-menu .dropdown-menu .dropdown-item:hover {
    background-color: var(--bs-gray-700) !important;
    color: var(--bs-white) !important;
}

.dropdown-menu .dropdown-item {
    transition: all 0.15s ease-in-out;
    border-radius: 0.25rem;
    margin: 0.125rem 0.25rem;
    padding: 0.375rem 0.75rem;
}

.dropdown-menu .dropdown-item:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item .bi,
.dropdown-menu .dropdown-item .fa {
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
}

.team-dropdown .dropdown-menu {
    min-width: 200px;
    width: 150%;
}

.team-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.team-dropdown .dropdown-item .badge {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.team-dropdown .dropdown-item .text-truncate {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 576px) {
    .team-dropdown .dropdown-menu {
        min-width: 200px;
        width: 180%;
    }
    .team-dropdown .dropdown-item {
        padding: 0.5rem 0.75rem;
    }
    .team-dropdown .dropdown-item .badge {
        padding: 0.15rem 0.3rem;
        font-size: 0.6rem;
    }
    .team-dropdown .dropdown-item .text-truncate {
        max-width: 100px;
    }
}

@media (max-width: 767.98px) {
    .dropdown-menu {
        border-radius: 0.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    
    [data-bs-theme="dark"] .dropdown-menu {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    }
    
    .dropdown-menu .dropdown-item {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* =========================
   FORM STYLING
   ========================= */
.input-group-text {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    transition: all 0.15s ease-in-out;
}

.form-control:focus + .input-group-text,
.input-group-text + .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.input-group-text i,
.input-group-text .bi,
.input-group-text .fa {
    color: inherit;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.8-.77-.8-.77V4.2l.8-.77-.8-.77.8-.77h1V.93l-.8-.77V0l.8.77h1l.8-.77v.93l-.8.77h1v1l-.8.77.8.77v1l-.8.77.8.77v1l-.8.77.8.77v.93l-.8.77h-1l-.8.77v-.93z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-text {
    font-size: 0.825rem;
    color: #6c757d;
}

/* =========================
   ALERT STYLING
   ========================= */
.alert {
    border: none;
    border-radius: 0.5rem;
}

.alert.py-0 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
}

/* =========================
   BADGE STYLING
   ========================= */
.badge.bg-danger {
    background-color: var(--bs-danger) !important;
}

.badge.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
    font-weight: 600;
}

[data-bs-theme="dark"] .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge.bg-info {
    background-color: #0dcaf0 !important;
    color: #000 !important;
    font-weight: 600;
}

[data-bs-theme="dark"] .badge.bg-info {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}

.badge.bg-success {
    background-color: var(--bs-success) !important;
}

.badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

.team-dropdown .dropdown-menu .badge.bg-danger,
.team-dropdown .dropdown-menu .badge.bg-warning,
.team-dropdown .dropdown-menu .badge.bg-success {
    background-color: var(--bs-danger) !important;
}

.team-dropdown .dropdown-menu .badge.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

.team-dropdown .dropdown-menu .badge.bg-success {
    background-color: var(--bs-success) !important;
}

[data-bs-theme="dark"] .team-dropdown .dropdown-menu .badge.bg-danger {
    background-color: var(--bs-danger) !important;
}

[data-bs-theme="dark"] .team-dropdown .dropdown-menu .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

[data-bs-theme="dark"] .team-dropdown .dropdown-menu .badge.bg-success {
    background-color: var(--bs-success) !important;
}

@media (max-width: 768px) {
    .badge.py-2 {
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
        font-size: 0.75rem;
    }
}

/* =========================
   FOOTER STYLING
   ========================= */
footer {
    background-color: var(--bs-dark) !important;
    border-top: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] footer {
    background-color: var(--bs-dark) !important;
}

[data-bs-theme="dark"] footer .border-top,
[data-bs-theme="dark"] footer hr {
    border-color: rgba(255, 255, 255, 0.125) !important;
}

[data-bs-theme="light"] footer {
    background-color: var(--bs-light) !important;
    color: var(--bs-dark);
}

[data-bs-theme="light"] footer .text-white {
    color: var(--bs-dark) !important;
}

[data-bs-theme="light"] footer a.text-secondary {
    color: var(--bs-dark) !important;
    text-decoration: underline !important;
}

[data-bs-theme="light"] footer .text-body-secondary {
    color: var(--bs-dark) !important;
}

[data-bs-theme="light"] footer .border-top,
[data-bs-theme="light"] footer hr {
    border-color: var(--bs-border-color) !important;
}

/* =========================
   MISCELLANEOUS
   ========================= */
@media (max-width: 767.98px) {
    .container-fluid .row {
        margin: 0;
    }
    
    /* public pages only: signed-in pages use Bootstrap gutters (see base.css) */
    body:not(.authenticated-user) .col-lg-6 {
        padding: 1rem;
    }
    
    .display-4 {
        font-size: 2rem;
    }
    
    .lead {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .container-fluid {
        padding: 0;
    }
    
    .p-4 {
        padding: 1.5rem !important;
    }
    
    .p-5 {
        padding: 2rem !important;
    }
    
    .display-4 {
        font-size: 1.75rem;
    }
    
    .btn-group .btn {
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .form-control, .alert {
        transition: none !important;
    }
}

input#calc-input::-webkit-outer-spin-button,
input#calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input#calc-input[type=number]               { -moz-appearance: textfield; }

@media (max-width: 767.98px) {
    .ws-settings-strip {
        row-gap: 0.5rem;
    }
    .ws-settings-strip > :nth-child(2) {
        flex: 1 1 100%;
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }
    .ws-settings-strip > :nth-child(3) {
        display: none;
    }
    .ws-settings-strip .btn-group .btn span {
        display: none;
    }
    .ws-settings-strip select[data-setting="document_font"] {
        max-width: 110px;
    }
}

/* Workspace v3: iLovePDF-faithful - a full-width action grid on the hub, each
   action on its own page with an open canvas and a narrow settings sidebar. */
.ws-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.ws-tool-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    background: var(--bs-body-bg);
}

.ws-tool-card:hover {
    border-color: var(--bs-primary);
    color: inherit;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.ws-tool-card--featured {
    border-color: var(--bs-primary);
    border-width: 2px;
    background: rgba(0, 105, 148, 0.06);
}

[data-bs-theme="dark"] .ws-tool-card--featured {
    background: rgba(0, 105, 148, 0.18);
}

.ws-tool-card--cms {
    position: relative;
    overflow: hidden;
    border-style: dashed;
    border-color: var(--bs-primary);
}

.ws-tool-card--cms .ws-tool-card-heading > i {
    color: var(--bs-secondary-color);
}

.ws-tool-card--cms .ws-tool-card-title {
    color: var(--bs-link-color);
}

.ws-tool-card-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: #dc3545;
    padding: 0.2rem 0.75rem;
    border-bottom-left-radius: 0.5rem;
}

.ws-tool-card-title-group {
    display: flex;
    flex-direction: column;
}

.ws-tool-card-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.ws-tool-card-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ws-tool-card-heading > i.ws-tool-card-star {
    font-size: 0.8rem;
}

[data-bs-theme="dark"] .ws-tool-card--featured .ws-tool-card-heading > i {
    color: #7fd0f0;
}

.ws-tool-card > i,
.ws-tool-card-heading > i {
    font-size: 1.75rem;
    color: var(--bs-primary);
}

.ws-tool-card-title {
    font-weight: 600;
}

.ws-tool-card-desc {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

/* Below ~576px, two cards per row instead of one full-width card at a time -
   the grid's own minmax(220px, 1fr) only ever fits one column at phone width. */
@media (max-width: 575.98px) {
    .ws-tool-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .ws-tool-card {
        padding: 0.75rem;
        gap: 0.35rem;
    }

    .ws-tool-card > i,
    .ws-tool-card-heading > i {
        font-size: 1.25rem;
    }

    .ws-tool-card-desc {
        font-size: 0.75rem;
    }
}

/* At-rest document rows (hub, and a tool page's "pick from your workspace" list):
   no thumbnail image - an eye icon is enough outside an active tool's canvas. */
.ws-doc-row {
    background: var(--bs-body-bg);
}

.ws-doc-row + .ws-doc-row {
    margin-top: 0;
}

.ws-doc-row-index {
    min-width: 1.25rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Tenthline's sidebar settings, reusing _settings_strip.html's shared markup/JS but
   restyled for a ~300px column instead of the wide horizontal strip it was built for -
   stack the field groups, and turn each internal row into a wrapping column of its own. */
.ws-settings-strip--sidebar {
    flex-direction: column;
    align-items: stretch;
}

.ws-settings-strip--sidebar > div {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.ws-settings-strip--sidebar > .vr {
    width: 100%;
    height: 1px;
    min-height: 1px;
    background-color: var(--bs-border-color);
    opacity: 1;
}

.ws-settings-strip--sidebar .btn-group .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* A label and the toggle it names must wrap as one unit - never split across
   lines, which is what made "Pagination" and its switch land on separate rows
   in the narrow sidebar. */
.ws-strip-pair {
    flex-shrink: 0;
}

.ws-strip-pair > span {
    white-space: nowrap;
}

.ws-settings-strip--sidebar select[data-setting="document_font"] {
    width: 100%;
    max-width: none;
}

/* Tenthline sidebar's quick-presets bar (ported from the upload page's court-preset-bar) -
   sized to wrap into a 2x2 grid instead of the wide single-row btn-group it started as. */
.ws-preset-bar .btn {
    flex: 1 1 calc(50% - 0.125rem);
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.75rem;
    white-space: normal;
    line-height: 1.2;
}

/* Preset buttons: unselected state is a neutral chip. Its sidebar container
   (.ws-tool-sidebar) is itself painted with --bs-tertiary-bg, so giving the chip
   that same flat token made it disappear into the panel - using a translucent
   tint of the body text color instead guarantees a visible difference from
   whatever the container's actual color is, in either theme, without hardcoding
   a light or dark specific value. */
.ws-preset-bar .btn-check:not(:disabled):not(:checked) + .btn {
    background-color: rgba(var(--bs-body-color-rgb), 0.07);
    border-color: rgba(var(--bs-body-color-rgb), 0.18);
    color: var(--bs-body-color);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Selected state fills with --bs-secondary (an amber/orange in this theme), and
   .btn-outline-secondary's own active-color variable is white - low contrast
   against amber. Black reads better here, same call already made for the
   amber credits badge elsewhere. */
.ws-preset-bar .btn-check:checked + .btn {
    color: #000 !important;
}

.ws-preset-bar .btn-check:not(:disabled):not(:checked) + .btn:hover {
    background-color: rgba(var(--bs-body-color-rgb), 0.14);
    border-color: rgba(var(--bs-body-color-rgb), 0.3);
}

/* Dark theme only: bump unselected chip text to pure white for more pop.
   Left alone in light theme, where white text would be invisible against the
   light chip background. */
[data-bs-theme="dark"] .ws-preset-bar .btn-check:not(:disabled):not(:checked) + .btn {
    color: #fff;
}

/* Settings strip's position/color pickers (btn-outline-primary) have the same
   low-contrast problem: unselected text is blue-on-transparent. Same
   text-only fix. */
.ws-settings-strip-group .btn-check:not(:disabled) + .btn-outline-primary {
    color: #fff !important;
}

/* Light theme: white text on the light strip is invisible, so unselected
   labels take the body colour and the selected (blue-filled) one stays white. */
[data-bs-theme="light"] .ws-settings-strip-group .btn-check:not(:disabled):not(:checked) + .btn-outline-primary {
    color: var(--bs-body-color) !important;
}

/* Light theme: amber text on white is low contrast. Outline stays amber,
   the label is black (hover/active already fill amber with black text). */
[data-bs-theme="light"] .btn-outline-secondary {
    --bs-btn-color: #000 !important;
    --bs-btn-disabled-color: rgba(0, 0, 0, 0.45) !important;
}

/* The sidebar has room for the labels on phones, unlike the old inline strip. */
@media (max-width: 767.98px) {
    .ws-settings-strip--sidebar .btn-group .btn span {
        display: inline;
    }
}

/* Merge's preset bar has six buttons with uneven label lengths ("Custom" vs.
   "Affidavit/Exhibit") - a forced 2-column grid wraps the long ones awkwardly,
   so let each button size to its own content and wrap freely instead. Same
   specificity as the rule above; wins on source order. */
.ws-preset-bar--wide .btn {
    flex: 0 1 auto;
}

.ws-tool-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .ws-tool-layout {
        grid-template-columns: 1fr;
    }
}

/* Named so Tenthline's desktop-only rule below can reshuffle these three into a
   second column (presets over the sidebar) instead of a plain stack, without
   touching DOM order. Below 992px they stay in one column, in the same order
   as the named areas here - presets, then canvas, then sidebar - so presets
   stay visible near the top on mobile instead of sinking below the canvas.
   Naming all three explicitly at every width (rather than leaving mobile to
   fall back on un-matched grid-area names) avoids Chromium stacking them into
   the same implicit cell, which is what an unresolved name actually does. */
.ws-tool-layout.ws-tool-layout--tenthline {
    grid-template-areas:
        "presets"
        "main"
        "sidebar";
}

.ws-tool-layout.ws-tool-layout--tenthline > .ws-preset-bar-row {
    grid-area: presets;
}

.ws-tool-layout.ws-tool-layout--tenthline > .ws-tool-main {
    grid-area: main;
}

.ws-tool-layout.ws-tool-layout--tenthline > .ws-tool-sidebar {
    grid-area: sidebar;
}

/* Replaces the Bootstrap d-flex utility class (removed from this element in the
   template) with a plain, non-!important declaration, so the desktop-only
   display:grid override below can actually win the cascade instead of losing to
   d-flex's !important the way it would if the class were still there. */
.ws-settings-strip--grid {
    display: flex;
}

/* Three named sections - Tenthlining, Page Numbers, Formatting - instead of one
   flat list of six identically-weighted fields. A heading div sits before each
   group and spans the full row (see the grid rule below); order places every
   field under its heading (Line Numbers alongside Font under Tenthlining, Start
   At under Page Numbers, Pagination alongside the Skip Pages group under
   Formatting - skip governs which of tenthlining/page numbers/pagination gets
   withheld from the leading pages, so it reads as a formatting choice rather
   than belonging to any one of the three it can exempt). Applies at every
   width: it's a flex order (this container is flex-direction: row+wrap on
   phone, column on tablet, grid at/above desktop - see the sidebar's base
   rule and the overrides further down/up), so it reflows phone/desktop into
   shared rows where width allows and stacks one-per-row on tablet either way.
   Targets the fixed child positions _settings_strip.html renders in
   non-run_scoped mode, offset by the three heading divs the template places
   before the include (4: csrf input, 5: Page Numbers, 6: vr, 7: Pagination,
   8: vr, 9: Font, 10: vr, 11: Line Numbers, 12: script); Skip/Start At/headings
   are matched by id instead since they're this template's own markup, not the
   shared partial's. */
#tenthlineSectionTenthlining { order: 1; }
.ws-settings-strip--grid > :nth-child(11) { order: 2; }
.ws-settings-strip--grid > :nth-child(9) { order: 3; }
#tenthlineSectionPageNumbers { order: 4; }
.ws-settings-strip--grid > :nth-child(5) { order: 5; }
#tenthlineStartAtGroup { order: 6; }
#tenthlineSectionFormatting { order: 7; }
.ws-settings-strip--grid > :nth-child(7) { order: 8; }
#tenthlineSkipToggleRow { order: 9; }
#tenthlineSkipRow { order: 10; }
#tenthlineSkipWhatRow { order: 11; }

.ws-settings-strip--grid > .vr {
    display: none;
}

/* Selector needs two classes, not one, to out-specificity a legacy phone-only
   rule further up this file (`.ws-settings-strip > :nth-child(3) { display:
   none; }`, written for the old wide strip back when its 3rd child was always
   a plain divider) - one of these headers can now legitimately land in that
   slot and must not be hidden by it. Also keep this below that rule: with
   matching specificity, source order is the actual tie-breaker.
   The second selector covers e-filing's headers, which sit directly in the
   plain sidebar rather than inside the settings strip (its groups - Court,
   Page Numbers, Numbering - already fall in the right order as separate
   top-level blocks, so there's no need to pull them into the strip's
   flex/order machinery just to get the same heading style).
   The rule line runs from the label itself (a fence growing out of a gate)
   rather than underlining the full row, via a flex-filled ::after instead of
   a border-bottom. */
.ws-settings-strip--grid > .ws-section-header,
.ws-tool-sidebar > .ws-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
    margin-top: 0.5rem;
}

.ws-settings-strip--grid > .ws-section-header::after,
.ws-tool-sidebar > .ws-section-header::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--bs-border-color);
}

.ws-section-header--first {
    margin-top: 0;
}

/* Replaces the Bootstrap gap-2 utility class on the Page Numbers row (see
   _settings_strip.html) with a plain, non-!important declaration, so the
   grid-scoped override below can actually win the cascade instead of losing
   to gap-2's !important the way it would if the class were still there. */
.ws-pagenum-row {
    gap: 0.5rem;
}

/* The On/Off toggle and the Top/Bottom position group read as one cramped
   cluster at the default gap - push them to the row's two ends in Tenthline's
   sidebar instead, without touching e-filing's flat strip (which reuses the
   same partial but stays at the default gap). space-between rather than a
   fixed gap: the sidebar column is only ~200px wide, barely wider than the
   two items combined, so any gap past ~11px overflows the column and wraps
   the button group onto its own line - space-between always uses exactly
   the slack that's actually left, however much or little that is. */
.ws-settings-strip--grid .ws-pagenum-row {
    justify-content: space-between;
}

/* Now redundant next to their section heading in Tenthline's sidebar - the
   shared partial still renders them (e-filing's box has no headings of its
   own and still needs them for orientation). Dropping the Line Numbers label
   also collapses that field to a single "Color  Red Black" line instead of
   wrapping the label onto its own line above it. Pagination's own label stays
   visible: it now shares the generic "Formatting" heading with Font, which
   doesn't name it the way the old dedicated "Pagination" heading did. */
.ws-settings-strip--grid .ws-pn-label,
.ws-settings-strip--grid .ws-linenum-label {
    display: none;
}

/* Tenthline's sidebar has more to show now (skip/start-at joined the existing
   page-number/pagination/font/line-number fields) and, with every tool's canvas
   now thumbnail-free, there's no longer a competing need to keep the main column
   wide - so give this one tool's sidebar more room and lay its fields out two per
   row instead of one long stack. E-filing's sidebar gets the same treatment
   below for the same reason - it's grown to five concerns (Court, Page Numbers,
   Font, Roman numerals, Continue/Start-at) in what was one flat stack. */
@media (min-width: 992px) {
    .ws-tool-layout.ws-tool-layout--tenthline {
        grid-template-columns: 1fr 460px;
        grid-template-areas:
            "main presets"
            "main sidebar";
    }

    .ws-tool-layout.ws-tool-layout--efiling {
        grid-template-columns: 1fr 460px;
    }

    .ws-settings-strip--grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
        row-gap: 0.5rem;
        align-items: center;
    }

    .ws-settings-strip--grid > * {
        min-width: 0;
    }

    .ws-settings-strip--grid > .ws-section-header {
        grid-column: 1 / -1;
    }

    /* min-width:0 on the grid item above doesn't reach this nested select - it
       still defaults to min-content sizing inside its own flex row, and
       whatever field lands in the other 1fr column on the same line can be
       wide enough that this one overflows its column by a few px. The
       !important is the only way to beat the inline width:auto
       _settings_strip.html sets on it for the flat, non-grid layouts this
       same select renders in elsewhere.
       .ws-strip-pair also needs its own override here - it's flex-shrink:0
       by design (see that rule's comment), which otherwise holds the Font
       label+select pair at its natural width regardless of what the select
       itself is told to do. Both attribute selectors are needed: Tenthline's
       own strip renders the field as data-setting=, e-filing's run_scoped
       include as name$= instead (see _settings_strip.html). */
    .ws-settings-strip--grid select[data-setting="document_font"],
    .ws-settings-strip--grid select[name$="document_font"] {
        width: 100% !important;
        min-width: 0;
    }

    .ws-settings-strip--grid .ws-strip-pair:has(select[data-setting="document_font"]),
    .ws-settings-strip--grid .ws-strip-pair:has(select[name$="document_font"]) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.ws-tool-sidebar {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
}

@media (min-width: 992px) {
    .ws-tool-sidebar {
        position: sticky;
        top: 1rem;
    }
}

.ws-upload-zone {
    border: 2px dashed var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.ws-upload-zone.ws-upload-zone-dragover {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle, var(--bs-tertiary-bg));
}

/* A gentle heartbeat once the run button is actually clickable, so the one action
   that matters on the page draws the eye without a full-page tour. Pauses on
   hover/focus so it doesn't feel like it's fighting the click, and turns off for
   prefers-reduced-motion. */
@keyframes ws-submit-heartbeat {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.35); }
    50% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0); }
}

#submitBtn:not(:disabled) {
    animation: ws-submit-heartbeat 1.8s ease-in-out infinite;
}

#submitBtn:not(:disabled):hover,
#submitBtn:not(:disabled):focus-visible {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    #submitBtn {
        animation: none;
    }
}

.ws-canvas-tile[draggable="true"] {
    cursor: grab;
}

.ws-canvas-tile.ws-tile-drag-over {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* Merge canvas grouped by bundle-preset slot (labels only, not enforced - see
   MERGE_PRESETS). Falls back to a flat compact-row list for the default Custom
   preset (see .ws-canvas-list below). */
.ws-slot-group + .ws-slot-group {
    margin-top: 1rem;
}

.ws-slot-label {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ws-slot-select {
    font-size: 0.7rem;
}

/* A whole slot group is a valid drop target, not just its individual rows -
   dropping a tile here reassigns its slot, matching the dropdown. */
.ws-slot-group {
    border-radius: 0.375rem;
    transition: outline-color 0.1s ease;
}

.ws-slot-group.ws-slot-group-drag-over {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 4px;
}

.ws-slot-group-list:empty {
    min-height: 2.25rem;
}

/* Merge's compact, thumbnail-free canvas: a long bundle (a dozen+ files across
   slots) stays scannable as rows instead of a wall of thumbnail tiles. */
.ws-canvas-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ws-canvas-list .ws-doc-row {
    cursor: grab;
}

/* "Unassigned" is the one slot group whose cards genuinely need to move - everything
   lands here first and is meant to be dragged into a named slot below. A dashed
   border (echoing .ws-add-row's "drop things here" language) makes that expectation
   obvious at a glance, not just inferable from the grip icon and cursor:grab that
   every row already has - a clearer cue for anyone who moves through the UI slowly. */
.ws-slot-group--unassigned .ws-doc-row {
    border-style: dashed;
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle, var(--bs-tertiary-bg));
}

/* Nudges the grip handle on still-unassigned rows so the "drag me" affordance
   reads at a glance, not just on hover. Self-limiting by construction: it only
   targets rows inside .ws-slot-group--unassigned, so a document stops animating
   the instant it's dropped into a named slot and leaves that DOM subtree - no
   JS state needed to turn it off. Respects prefers-reduced-motion by only
   defining the animation inside the no-preference query, rather than assigning
   then overriding it to "none". */
@media (prefers-reduced-motion: no-preference) {
    .ws-slot-group--unassigned .ws-doc-row .bi-grip-vertical {
        animation: ws-grip-nudge 1.6s ease-in-out infinite;
    }
}

@keyframes ws-grip-nudge {
    0%, 100% { transform: translateY(0); color: var(--bs-secondary-color); }
    50% { transform: translateY(-3px); color: var(--bs-primary); }
}

.ws-add-row {
    border: 2px dashed var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    text-decoration: none;
}

.ws-add-row:hover {
    border-color: var(--bs-primary);
}

/* The Add more drop zone shares .ws-doc-row with real rows, so inside the
   Unassigned group it picked up their deep-blue tint. Keep it neutral; only the
   button is blue. */
.ws-slot-group--unassigned .ws-add-row {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}
.ws-slot-group--unassigned .ws-add-row:hover {
    border-color: var(--bs-primary);
}

#canvas.ws-upload-zone-dragover .ws-add-row {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle, var(--bs-tertiary-bg));
}

.ws-op-grid-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ws-op-grid-horizontal .ws-tool-card {
    flex: 1 1 200px;
    padding: 0.75rem;
}
/* Matter tag chips: every pair has at least 4.5:1 contrast (WCAG AA). */
.tag-chip { font-weight: 500; border: 0; }
.tag-c0 { background: #1d4ed8; color: #ffffff; }
.tag-c1 { background: #0f766e; color: #ffffff; }
.tag-c2 { background: #b45309; color: #ffffff; }
.tag-c3 { background: #be123c; color: #ffffff; }
.tag-c4 { background: #7e22ce; color: #ffffff; }
.tag-c5 { background: #fde68a; color: #422006; }
.tag-c6 { background: #a7f3d0; color: #064e3b; }
.tag-c7 { background: #bae6fd; color: #0c4a6e; }
.tag-c8 { background: #fbcfe8; color: #831843; }
.tag-c9 { background: #ddd6fe; color: #3b0764; }
a.tag-chip:hover { filter: brightness(0.93); }

/* Matter file numbers: brand blue in light mode, a lighter blue in dark mode where the brand blue is too dim. */
.matter-file-no { color: var(--bs-primary); }
[data-bs-theme="dark"] .matter-file-no { color: #4db8e8; }


/* Thin moving line along the bottom of a row whose item is still being worked on
   (scanning, converting, running). It carries no percentage: the server reports
   stages, not progress, and a made-up number would erode trust. */
.row-progress { position: absolute; left: .25rem; right: .25rem; bottom: 0; height: 3px; overflow: hidden; border-radius: 2px; background: var(--bs-primary-bg-subtle); pointer-events: none; }
.row-progress::after { content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; border-radius: 2px; background: var(--bs-primary); animation: row-progress 1.3s ease-in-out infinite; }
@keyframes row-progress { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .row-progress::after { animation: none; left: 0; width: 100%; opacity: .45; } }

/* Floating upload progress, shown by static/js/xhr-upload.js */
.upload-pill { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1080; width: min(20rem, calc(100vw - 2rem)); }

/* Landing tool tour: light and dark screenshot variants follow the theme */
.tour-shot { height: auto; }
.tour-indicators { position: static; margin: 0; padding: 0 0 .75rem; }
.tour-indicators [data-bs-target] { background-color: var(--bs-secondary); }
.tour-control { width: 3rem; top: 0; bottom: auto; height: 60%; }
.tour-control .carousel-control-prev-icon, .tour-control .carousel-control-next-icon { background-color: rgba(0,0,0,.55); border-radius: 50%; background-size: 55%; width: 2.25rem; height: 2.25rem; }

/* Tour section sits on the opposite tone to the theme so the screenshots pop:
   dark section in light mode, white section in dark mode. */
.tour-section { background: #212529; color: #f8f9fa; --tour-title: #4db8e8; --tour-muted: #adb5bd; }
[data-bs-theme="dark"] .tour-section { background: #fff; color: #212529; --tour-title: #006994; --tour-muted: #6c757d; }
.tour-section .tour-title { color: var(--tour-title); }
.tour-section .tour-muted { color: var(--tour-muted); }
.tour-section .tour-carousel { color: var(--bs-body-color); }

/* Tool pages: a grid item defaults to min-width:auto, so the merge slot rows
   (name, meta, slot select, buttons) pushed the page 130px wider than a phone.
   Let the column shrink and let the row's pieces wrap instead. */
.ws-tool-layout > * { min-width: 0; }
@media (max-width: 575.98px) {
    .ws-canvas-list .ws-doc-row { flex-wrap: wrap; }
    .ws-canvas-list .ws-doc-row .text-truncate { flex-basis: 40%; }
}

/* Phones: keep the pick buttons on one row, and fold the long merge hint into
   one truncated line with a Show more toggle. */
.ws-pick-buttons .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
    .ws-pick-buttons .btn { flex: 1 1 0; }
}
@media (max-width: 767.98px) {
    .ws-merge-help.is-collapsed #mergeHint {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ws-merge-help.is-collapsed #mergeSlotPreview { display: none; }
}

/* Phones: the Add more drop zone is a slim bar, never taller than a thumbnail,
   and the sidebar gives its controls a little more width. */
@media (max-width: 575.98px) {
    .ws-add-tile { aspect-ratio: auto; padding: 0.4rem 0; }
}
@media (max-width: 767.98px) {
    .ws-tool-sidebar { padding: 0.75rem; }
}

/* Phones, tool pages. The Upload button in the pick row replaces the Add more
   tile and row, thumbnails scroll sideways in one row, and the settings strip
   packs its groups (Pagination + Font, etc.) side by side to save height. */
@media (max-width: 575.98px) {
    .ws-pick-buttons .btn:not(.ws-pick-add) { flex: 1 1 0; }
    .ws-pick-buttons .ws-pick-add { flex: 0 0 auto; }
    .ws-canvas-add-tile, .ws-add-row { display: none !important; }
    .ws-canvas-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-top: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
    .ws-canvas-scroll > .ws-canvas-tile {
        flex: 0 0 34%;
        width: 34%;
        scroll-snap-align: start;
    }
}
@media (max-width: 767.98px) {
    .ws-settings-strip--sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }
    .ws-settings-strip--sidebar > .vr { display: none; }
    .ws-settings-strip--sidebar .ws-font-label { display: none; }
    .ws-settings-strip--sidebar select[data-setting="document_font"],
    .ws-settings-strip--sidebar select[name$="document_font"] { width: auto; max-width: 8.5rem; }
}

/* Phone hero: the page illustration becomes faint background art instead of a
   stacked block, so the tour starts higher up the screen. */
@media (max-width: 991.98px) {
    .hero-section { position: relative; overflow: hidden; }
    .hero-copy { position: relative; z-index: 1; }
    .hero-art {
        position: absolute;
        right: -3.5rem;
        bottom: -2rem;
        width: 15rem;
        opacity: 0.16;
        pointer-events: none;
        z-index: 0;
    }
}
@media (max-width: 767.98px) {
    .hero-section .btn-lg { font-size: 1rem; padding: 0.55rem 0.75rem; white-space: nowrap; }
}

/* Phones hide the Add more row, so an empty Unassigned group would be a lone heading. */
@media (max-width: 575.98px) {
    .ws-slot-group--unassigned:not(:has(.ws-canvas-tile)) { display: none; }
}

/* E-filing prep description: two-line teaser with a Read more toggle. */
.ws-efiling-desc.is-collapsed .ws-efiling-more { display: none; }

.ws-settings-strip--sidebar select[name$="document_font"] {
    width: 100%;
    max-width: none;
}
.ws-settings-strip--sidebar .ws-strip-pair:has(select[name$="document_font"]) {
    flex: 1 1 auto;
}
@media (max-width: 767.98px) {
    .ws-efiling-desc.is-collapsed > p:first-child {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* "Tenthline another" and friends: same card shape as the next-step cards but dashed
   and subdued, so it reads as repeating the current step rather than moving on. */
.ws-tool-card--again {
    border-style: dashed;
    background: var(--bs-tertiary-bg);
}

.ws-tool-card--again:hover {
    border-color: var(--bs-primary);
}

/* Result rows: on phones the actions drop under the filename instead of squeezing it. */
.ws-output-row .ws-output-actions {
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .ws-output-row {
        flex-wrap: wrap;
    }

    .ws-output-row .ws-output-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        align-items: center;
    }
}

/* Instruction-style section headings ("Pick a tool", "Continue with"): body colour, not muted. */
.ws-pick-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

/* Sidebar "New" pill */
.nav-new-badge {
    margin-left: auto;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .15rem .4rem;
    border-radius: 999px;
    background: var(--bs-secondary);
    color: #000;
}

/* Red "New" variant of the pill above, for the CMS cross-sell nav item */
.nav-new-badge--red {
    background: #dc3545;
    color: #fff;
}

/* Landing-page CMS cross-sell strip, same indigo accent as the other promo spots */
.cms-promo-section {
    background: rgba(99, 102, 241, 0.06);
    border-top: 1px solid rgba(99, 102, 241, 0.15);
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
}

[data-bs-theme="dark"] .cms-promo-section {
    background: rgba(99, 102, 241, 0.1);
}

.btn-cms-promo {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

.btn-cms-promo:hover,
.btn-cms-promo:focus {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}

/* CMS landing hero: pulsing dot on the illustrated deadline marker */
.cms-hero-pulse {
    animation: cms-hero-pulse 1.8s ease-in-out infinite;
}

@keyframes cms-hero-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .cms-hero-pulse { animation: none; }
}

/* Dashboard */
.dash-grid .list-group-item { min-height: 2.75rem; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (max-width: 991.98px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-grid.fb-grid { grid-template-columns: 3fr 2fr; }
@media (max-width: 991.98px) { .dash-grid.fb-grid { grid-template-columns: 1fr; } }
.dash-balance--low { border-color: var(--bs-warning) !important; background: var(--bs-warning-bg-subtle); }
.dash-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (max-width: 767.98px) { .dash-tools { grid-template-columns: repeat(2, 1fr); } }


/* Matters: category cards and status tabs. Hues are mid-tones with tinted (not solid)
   fills via color-mix, so they sit well on both the light and dark themes. */
.mh-st-open { --mh-st: #16a34a; } .mh-st-pending { --mh-st: #d97706; }
.mh-st-closed { --mh-st: #64748b; } .mh-st-all { --mh-st: #2563eb; }
[data-bs-theme="dark"] .mh-st-open { --mh-st: #4ade80; } [data-bs-theme="dark"] .mh-st-pending { --mh-st: #fbbf24; }
[data-bs-theme="dark"] .mh-st-closed { --mh-st: #94a3b8; } [data-bs-theme="dark"] .mh-st-all { --mh-st: #60a5fa; }

.mh-card { transition: border-color .15s, box-shadow .15s; }
.mh-card:hover { border-color: var(--bs-primary) !important; box-shadow: 0 .25rem .75rem rgba(var(--bs-primary-rgb), .15); }
.mh-icon { flex-shrink: 0; font-size: 1.25rem; line-height: 1; color: var(--bs-secondary-color); }
.mh-prefix {
    font-size: .7rem; font-weight: 600; letter-spacing: .05em; padding: .15rem .45rem; border-radius: .35rem;
    background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
}
.mh-total, .mh-name, .mh-name:hover { color: var(--bs-link-color); }
.cat-badge { display: inline-block; background: var(--bs-primary); color: #fff; font-weight: 600; font-size: 1.05rem; padding: .3rem .8rem; border-radius: .5rem; }
.mh-stat { padding: .35rem .25rem; }
.mh-stat .n { font-size: 1.15rem; font-weight: 600; line-height: 1.1; color: var(--mh-st); }
.mh-stat .l { font-size: .75rem; color: var(--bs-secondary-color); }

.mh-count {
    font-weight: 600; color: var(--mh-st);
    background: color-mix(in srgb, var(--mh-st) 16%, transparent);
}
.nav-tabs .nav-link.active .mh-count { background: var(--mh-st); color: var(--bs-body-bg); }
.nav-tabs .nav-link.active { border-bottom-color: var(--mh-st); box-shadow: inset 0 -2px 0 var(--mh-st); }

/* Sidebar: one deep navy in both themes, a step darker than the dark-mode page, so it frames
   the content instead of blending into it. Placed last so it wins over the per-theme values. */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --sidebar-bg: #0c2a3b;
    --sidebar-border: #163d54;
    --sidebar-shadow: none;
    --sidebar-nav-link-color: #b8c7d1;
    --sidebar-nav-link-hover-bg: #133a51;
    --sidebar-nav-link-active-bg: #1a4a66;
    --sidebar-nav-link-active-color: #ffffff;
    --sidebar-text-color: #eaf1f5;
    --sidebar-secondary-text: #8fa6b4;
    --sidebar-user-card-bg: #0f3247;
}
.offcanvas-desktop .sidebar-nav .nav-link.active,
.mobile-nav .nav-link.active { border-color: var(--bs-secondary); }
.offcanvas-desktop hr, .mobile-nav hr { border-color: var(--sidebar-border); opacity: 1; }
.offcanvas-desktop .text-body, .mobile-nav .text-body { color: var(--sidebar-text-color) !important; }
.offcanvas-desktop .border-bottom, .mobile-nav .border-bottom,
.offcanvas-desktop .border-top, .mobile-nav .border-top { border-color: var(--sidebar-border) !important; }
.mobile-nav .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-bs-theme] .offcanvas-desktop .bg-body, [data-bs-theme] #mobileOffcanvas, [data-bs-theme] #mobileOffcanvas .bg-body,
[data-bs-theme] #mobileOffcanvas .offcanvas-header { background-color: var(--sidebar-bg) !important; }
.offcanvas-desktop .text-muted, #mobileOffcanvas .text-muted, .offcanvas-desktop .sidebar-email, #mobileOffcanvas .sidebar-email { color: var(--sidebar-secondary-text) !important; }
#mobileOffcanvas .navbar-brand, #mobileOffcanvas .offcanvas-title { color: var(--sidebar-text-color); }
#mobileOffcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .8; }
#mobileOffcanvas .user-card { border-bottom-color: var(--sidebar-border) !important; }