/**
 * Circuit Law Design System
 *
 * Upstream dependencies:
 * - reset.css   (normalization)
 * - tokens.css  (design tokens + theme variables)
 * - utilities.css (utility-first helpers)
 *
 * This file focuses on component and page styles.
 */

/* Low-specificity bootstrap mappings for dark mode */
[data-theme='dark'] .bg-body { background-color: var(--bg-secondary); }
[data-theme='dark'] .text-body { color: var(--text-main); }
[data-theme='dark'] .list-group-item {
    background-color: var(--bg-secondary);
    color: var(--text-main);
    border-color: var(--border);
}
[data-theme='dark'] .card {
    background-color: var(--bg-secondary);
    border-color: var(--border);
}


/* ==========================================================================
   2) BASE ELEMENTS
   ========================================================================== */

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    line-height: 1.5;
    background-color: var(--bg-primary);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--brand-viridian); }
[data-theme='dark'] a:hover { color: #7ee8df; }


/* ==========================================================================
   3) TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6, .card-title {
    color: var(--text-main);
}

/* Tab subtitle (e.g., March 2026 on Calendar) */
.tab-subtitle {
    font-size: 1rem;
    color: var(--brand-viridian);
}

/* Page Header */
.page-header-title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin-bottom: 1.5rem;
    user-select: none;
}

.text-muted, .text-secondary, .timestamp, .subtitle {
    color: var(--text-muted);
}

/* ============================================================
   SECTION 5 – ANIMATIONS
   ============================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card,
.activity-feed .activity-item,
.activity-feed .list-group-item {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* Staggered cascade for Recent Activity items */
.activity-feed .activity-item:nth-child(1),
.activity-feed .list-group-item:nth-child(1) { animation-delay: 0.05s; }
.activity-feed .activity-item:nth-child(2),
.activity-feed .list-group-item:nth-child(2) { animation-delay: 0.1s; }
.activity-feed .activity-item:nth-child(3),
.activity-feed .list-group-item:nth-child(3) { animation-delay: 0.15s; }
.activity-feed .activity-item:nth-child(4),
.activity-feed .list-group-item:nth-child(4) { animation-delay: 0.2s; }
.activity-feed .activity-item:nth-child(5),
.activity-feed .list-group-item:nth-child(5) { animation-delay: 0.25s; }
.activity-feed .activity-item:nth-child(6),
.activity-feed .list-group-item:nth-child(6) { animation-delay: 0.3s; }


/* ============================================================
   SECTION 6 – CARDS
   ============================================================ */

/* Tier 1: base surface — default card for all pages */
.cl-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cl-card--raised {
    /* Tier 2: interactive card — hovers lift */
    box-shadow: var(--shadow-md);
}
.cl-card--raised:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}

/* Legacy aliases */
.card,
.stat-card,
.workflow-card,
.payment-card,
.settings-card,
.login-card,
.cl-section-card,
.cl-form-card,
.client-form-section,
.workflow-form-card,
.workflow-editor-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
[data-theme='dark'] .card-header {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Accent header */
.cl-section-header,
.card-header-viridian,
.modal-header-viridian {
    background: var(--brand-viridian-header-bg);
    color: #ffffff;
    padding: 12px 20px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cl-section-header h2,
.cl-section-header h3,
.cl-section-header h4,
.cl-section-header h5,
.cl-section-header h6,
.card-header-viridian h2,
.card-header-viridian h3,
.card-header-viridian h4,
.card-header-viridian h5,
.card-header-viridian h6 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}
.card-header.card-header-viridian h2,
.card-header.card-header-viridian h3,
.card-header.card-header-viridian h4,
.card-header.card-header-viridian h5,
.card-header.card-header-viridian h6 {
    color: #ffffff;
}
.table-header-viridian th,
.th-viridian {
    background-color: var(--brand-viridian-header-bg);
    color: #ffffff;
}
.progress-bar-viridian {
    background-color: var(--brand-viridian);
}

/* --- Section Cards (top form cards) --- */
.cl-section-card {
    overflow: visible;
    margin-bottom: 24px;
    transition: none;
}
.cl-section-card,
.cl-section-card:hover {
    background-color: var(--card-bg);
    transform: none;
    box-shadow: var(--shadow-sm);
    cursor: default;
}

.cl-form-body {
    padding: 24px;
}

/* --- Stat Cards --- */
.stat-card .stat-value {
    color: var(--text-main);
}

/* Protect card headers from hover text-color changes */
.cascade-list .card:hover .cl-section-header h5,
.cascade-list .card:hover .card-header h5,
.cascade-list .card:hover .card-header {
    color: #ffffff;
}


/* ============================================================
   SECTION 8 – INPUTS & LABELS

   ⚠️  GUARD: The border-radius rule below uses :not() to exclude
   component-scoped input classes (wf-step-*, cascade-search-*, etc.).

   WHEN ADDING A NEW SCOPED INPUT CLASS ANYWHERE IN THIS FILE:
   1. Add it to the :not() list in the border-radius rule below
   2. Do NOT add an important flag to your new component's border-radius
   3. Test both the new component AND the workflow editor page

   Failure to do this causes the cascade chain:
   Section 8 important flag → your component needs important flag →
   downstream components need important flag → unmaintainable
   ============================================================ */

.cl-label {
    display: inline-block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted, #6c757d);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cl-input {
    padding: 10px 14px;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border, #ced4da);
    border-radius: var(--radius-sm);
    color: var(--text-main, #212529);
    font-size: 0.95rem;
    min-height: 42px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cl-input:focus {
    border-color: var(--brand-viridian);
    box-shadow: 0 0 0 3px var(--brand-viridian-glow);
    outline: none;
    background: var(--card-bg, #ffffff);
}

/* GUARD: This !important is justified — it overrides Bootstrap's compiled form-control radius.
   When adding a new scoped input class that must escape this rule:
   1. Add it to the :not() list below
   2. Do NOT add !important to the new component's border-radius
   3. Test workflow editor and calendar inputs after any change here
   Current exclusions: .wf-step-title, .wf-step-days, .contact-status-editable,
   .contact-status-matter-editable, .cascade-search-input, .activity-feed-filter */
.cl-input,
.form-control:not(.wf-step-title):not(.wf-step-days):not(.cascade-search-input):not(.search-pill):not(.activity-feed-filter),
.form-select:not(.wf-step-title):not(.wf-step-days):not(.wf-detail-select) {
    border-radius: var(--card-radius) !important;
}


/* ============================================================
   SECTION 9 – BUTTONS
   ============================================================ */

/* --- Canonical button system --- */

/* Base shared resets */
.btn-cl-solid,
.btn-cl-outline,
.btn-cl-ghost,
.btn-cl-danger,
.btn-cancel,
.btn-cancel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.1s ease;
}
.btn-cl-solid:active,
.btn-cl-outline:active,
.btn-cl-ghost:active,
.btn-cl-danger:active,
.btn-cancel:active,
.btn-cancel-link:active {
    transform: scale(0.98);
}

/* Variant 1: Solid — primary CTA */
.btn-cl-solid {
    background: var(--brand-viridian);
    border-color: var(--brand-viridian);
    color: #ffffff;
}
.btn-cl-solid:hover {
    background: var(--brand-viridian-hover);
    border-color: var(--brand-viridian-hover);
    color: #ffffff;
    box-shadow: 0 0 0 3px var(--brand-viridian-glow);
}
.btn-cl-solid i, .btn-cl-solid .bi { color: #ffffff; }

/* Variant 2: Outline — secondary action (includes Cancel / Back on forms) */
.btn-cl-outline,
.btn-cancel,
.btn-cancel-link {
    background: transparent;
    border-color: var(--brand-viridian);
    color: var(--brand-viridian);
}
.btn-cl-outline:hover,
.btn-cancel:hover,
.btn-cancel-link:hover {
    background: var(--brand-viridian);
    border-color: var(--brand-viridian);
    color: #ffffff;
    box-shadow: 0 0 0 3px var(--brand-viridian-glow);
}
.btn-cl-outline:hover i,
.btn-cl-outline:hover .bi,
.btn-cancel:hover i,
.btn-cancel:hover .bi,
.btn-cancel-link:hover i,
.btn-cancel-link:hover .bi { color: #ffffff; }

/* Variant 3: Ghost — tertiary / quick actions */
.btn-cl-ghost {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-main);
}
.btn-cl-ghost:hover {
    background: var(--brand-viridian);
    border-color: var(--brand-viridian);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px var(--brand-viridian-glow);
}
.btn-cl-ghost:hover i,
.btn-cl-ghost:hover .bi { color: #ffffff; }

/* Variant 4: Danger — destructive actions only */
.btn-cl-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #ffffff;
}
.btn-cl-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* Size modifiers */
.btn-cl--sm {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
}
.btn-cl--lg {
    font-size: 1rem;
    padding: 0.65rem 1.25rem;
}
.btn-cl--pill {
    border-radius: var(--radius-pill);
}
.btn-cl--full {
    width: 100%;
}

/* --- Legacy aliases (no HTML changes needed) --- */
/* All map to .btn-cl-solid behavior */
.btn-primary,
.btn-secondary,
.btn-viridian,
.btn-circuit-primary,
.btn-circuit,
/* GUARD: Do NOT add .btn-link or .btn-light here — they have distinct Bootstrap semantics */
.btn-save,
.btn-save-client,
.btn-save-matter,
.btn-create-workflow,
.btn-cl-primary,
.btn-login,
.btn-add-step {
    background: var(--brand-viridian) !important;
    border-color: var(--brand-viridian) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md) !important;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-viridian:hover,
.btn-circuit-primary:hover,
.btn-circuit:hover,
.btn-save:hover,
.btn-save-client:hover,
.btn-save-matter:hover,
.btn-create-workflow:hover,
.btn-cl-primary:hover,
.btn-login:hover,
.btn-add-step:hover {
    background: var(--brand-viridian-hover) !important;
    border-color: var(--brand-viridian-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px var(--brand-viridian-glow);
}

/* Dark mode: muted solid primary vs soft-outline secondary (legacy aliases + btn-cl-*) */
[data-theme='dark'] .btn-primary,
[data-theme='dark'] .btn-secondary,
[data-theme='dark'] .btn-viridian,
[data-theme='dark'] .btn-circuit-primary,
[data-theme='dark'] .btn-save,
[data-theme='dark'] .btn-save-client,
[data-theme='dark'] .btn-save-matter,
[data-theme='dark'] .btn-create-workflow,
[data-theme='dark'] .btn-cl-primary,
[data-theme='dark'] .btn-login,
[data-theme='dark'] .btn-add-step,
[data-theme='dark'] .btn-cl-solid {
    background: #005a52 !important;
    border-color: #005a52 !important;
    color: #e8f4f3 !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .btn-secondary:hover,
[data-theme='dark'] .btn-viridian:hover,
[data-theme='dark'] .btn-circuit-primary:hover,
[data-theme='dark'] .btn-save:hover,
[data-theme='dark'] .btn-save-client:hover,
[data-theme='dark'] .btn-save-matter:hover,
[data-theme='dark'] .btn-create-workflow:hover,
[data-theme='dark'] .btn-cl-primary:hover,
[data-theme='dark'] .btn-login:hover,
[data-theme='dark'] .btn-add-step:hover,
[data-theme='dark'] .btn-cl-solid:hover {
    background: #00867a !important;
    border-color: #00867a !important;
    color: #e8f4f3 !important;
    box-shadow: 0 0 0 3px rgba(0, 134, 122, 0.22) !important;
}
[data-theme='dark'] .btn-circuit {
    background: transparent !important;
    border: 1px solid rgba(77, 212, 200, 0.4) !important;
    color: #a7d7c5 !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-circuit:hover {
    background: rgba(77, 212, 200, 0.1) !important;
    border-color: rgba(77, 212, 200, 0.45) !important;
    color: #e8f4f3 !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-circuit-outline {
    background: transparent !important;
    border: 1px solid rgba(77, 212, 200, 0.4) !important;
    color: #a7d7c5 !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-circuit-outline:hover,
[data-theme='dark'] .btn-circuit-outline:focus-visible {
    background: rgba(77, 212, 200, 0.1) !important;
    border-color: rgba(77, 212, 200, 0.45) !important;
    color: #e8f4f3 !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-cl-outline,
[data-theme='dark'] .btn-cancel,
[data-theme='dark'] .btn-cancel-link {
    background: transparent !important;
    border: 1px solid rgba(77, 212, 200, 0.4) !important;
    color: #a7d7c5 !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-cl-outline:hover,
[data-theme='dark'] .btn-cancel:hover,
[data-theme='dark'] .btn-cancel-link:hover {
    background: rgba(77, 212, 200, 0.1) !important;
    border-color: rgba(77, 212, 200, 0.45) !important;
    color: #e8f4f3 !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-cl-outline:hover i,
[data-theme='dark'] .btn-cl-outline:hover .bi,
[data-theme='dark'] .btn-cancel:hover i,
[data-theme='dark'] .btn-cancel:hover .bi,
[data-theme='dark'] .btn-cancel-link:hover i,
[data-theme='dark'] .btn-cancel-link:hover .bi {
    color: #e8f4f3 !important;
}
[data-theme='dark'] .btn-cl-ghost:hover {
    background: rgba(77, 212, 200, 0.1) !important;
    border-color: rgba(77, 212, 200, 0.3) !important;
    color: #e8f4f3 !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-cl-ghost:hover i,
[data-theme='dark'] .btn-cl-ghost:hover .bi {
    color: #e8f4f3 !important;
}
[data-theme='dark'] .btn-cl-danger {
    background: rgba(207, 102, 121, 0.12) !important;
    border-color: rgba(207, 102, 121, 0.5) !important;
    color: #cf6679 !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-cl-danger:hover {
    background: rgba(207, 102, 121, 0.24) !important;
    border-color: rgba(207, 102, 121, 0.65) !important;
    color: #fde8ec !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-quick-action:hover,
[data-theme='dark'] .quick-action-btn:hover {
    background: rgba(77, 212, 200, 0.1) !important;
    border-color: rgba(77, 212, 200, 0.35) !important;
    color: #e8f4f3 !important;
    box-shadow: none !important;
}
[data-theme='dark'] .btn-quick-action:hover i,
[data-theme='dark'] .btn-quick-action:hover .bi,
[data-theme='dark'] .quick-action-btn:hover i,
[data-theme='dark'] .quick-action-btn:hover .bi {
    color: #e8f4f3 !important;
}

/* Quick action buttons → ghost behavior */
.btn-quick-action,
.quick-action-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-main);
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.btn-quick-action:hover,
.quick-action-btn:hover {
    background: var(--brand-viridian);
    border-color: var(--brand-viridian);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px var(--brand-viridian-glow);
}
.btn-quick-action:hover i,
.btn-quick-action:hover .bi,
.quick-action-btn:hover i,
.quick-action-btn:hover .bi { color: #ffffff; }

/* New pill (navbar) */
.btn-new-pill {
    border-radius: var(--radius-pill);
    padding: 0.35rem 1rem;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    font-weight: 500;
    transition: background 0.2s ease;
}
.btn-new-pill:hover { background: rgba(255,255,255,0.3); color: white; }


/* ============================================================
   SECTION 10 – QUICK ACTIONS GRID
   ============================================================ */

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.quick-action-btn {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    display: block;
}


/* ============================================================
   SECTION 11 – NAVBARS
   ============================================================ */

.navbar-viridian {
    background-color: var(--nav-bg);
    transition: background-color 0.3s ease;
}

/* Phase 10C: mid-width toolbar — keep logo, search, and actions on one row (~940px).
   Scoped to ≥769px so BLOCK 48 mobile navbar (wrap, firm switcher row) is unchanged. */
@media (min-width: 769px) {
    .navbar-viridian > .container-fluid {
        flex-wrap: nowrap;
        align-items: center;
    }
    .navbar-viridian .navbar-brand {
        flex-shrink: 0;
    }
    .navbar-viridian .cl-navbar-search-col {
        flex: 1 1 auto;
        min-width: 120px;
    }
    .navbar-viridian > .container-fluid > .ms-auto {
        flex-shrink: 0;
    }
}

.navbar-sub {
    background-color: var(--nav-sub-bg);
    transition: background-color 0.3s ease;
}
.navbar-sub .nav-link {
    color: rgba(255,255,255,0.9);
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.navbar-sub .nav-link:hover {
    color: white;
}
.navbar-sub .nav-link.active {
    color: #ffffff;
    font-weight: 600;
    border-bottom-color: var(--brand-viridian);
}
.navbar-sub .nav-link.active:hover {
    color: #ffffff;
}

/* Main sub-nav (Workflows — Invoices): center the link row horizontally */
/* Bootstrap .navbar is flex + justify-content: flex-start; .cl-sub-nav-scroll had width:100% only
   inside BLOCK 48 (mobile), so on desktop it shrank to content — full width here fixes centering. */
nav.navbar-sub.cl-sub-nav.navbar,
.cl-sub-nav.navbar {
    width: 100%;
    justify-content: center;
}
.navbar-viridian ~ nav.cl-sub-nav .cl-sub-nav-scroll,
.cl-sub-nav .cl-sub-nav-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cl-sub-nav .cl-sub-nav-scroll::-webkit-scrollbar {
    display: none;
}
.navbar-viridian ~ nav.cl-sub-nav .container-fluid,
.cl-sub-nav .container-fluid {
    display: flex;
    justify-content: center;
    width: 100%;
}
.navbar-viridian ~ nav.cl-sub-nav .navbar-nav,
.navbar-sub .navbar-nav,
.navbar-sub .nav,
.cl-sub-nav .navbar-nav {
    justify-content: center;
}
@media (max-width: 768px) {
    .cl-sub-nav .navbar-nav {
        justify-content: flex-start;
        width: max-content;
    }
    .cl-sub-nav .container-fluid {
        justify-content: flex-start;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cl-sub-nav-scroll {
        display: block;
        overflow-x: auto;
        width: 100%;
    }
}

/* GUARD: .search-pill is defined here only. Do not redefine in other sections. */
.search-pill {
    width: 100%;
    border-radius: 9999px;
    padding: 0.35rem 1rem 0.35rem 2.5rem;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15);
    color: white;
}
.search-pill::placeholder {
    color: rgba(255,255,255,0.7);
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    color: var(--nav-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}
img.avatar-circle {
    display: block;
    object-fit: cover;
}


/* ============================================================
   SECTION 12 – THEME TOGGLE
   ============================================================ */

.theme-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}
.theme-toggle:hover  { background: rgba(255,255,255,0.3); }
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle svg    { width: 20px; height: 20px; }

/* Hide inactive icon */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme='dark'] .theme-toggle .icon-sun  { display: block; }
[data-theme='dark'] .theme-toggle .icon-moon { display: none; }


/* ============================================================
   SECTION 13 – DROPDOWNS
   ============================================================ */

[data-theme='dark'] .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border);
}
[data-theme='dark'] .dropdown-item {
    color: #f8f9fa !important;
}
.dropdown-item:hover {
    background-color: var(--brand-viridian) !important;
    color: #ffffff !important;
}
[data-theme='dark'] .dropdown-item:hover {
    background-color: #1a3330 !important;
    color: #f8f9fa !important;
}
.dropdown-item-icon {
    font-size: 1.1rem;
    color: var(--viridian);
}
[data-theme='dark'] .dropdown-item-icon { color: #4dd4c8; }
[data-theme='dark'] .dropdown-item:hover .dropdown-item-icon {
    color: rgba(167, 215, 197, 0.95);
}
[data-theme='dark'] .dropdown-divider   { border-color: var(--border); }

/* Sub-nav: soft hover wash (dark) */
[data-theme='dark'] .navbar-sub .nav-link:hover,
[data-theme='dark'] .cl-sub-nav .nav-link:hover {
    background-color: rgba(0, 112, 102, 0.3);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.95);
}

/* Viridian accent borders → muted teal (dark) */
[data-theme='dark'] .workers-comp-fields,
[data-theme='dark'] .matter-assignee-pill,
[data-theme='dark'] .workflow-item:not(.completed),
[data-theme='dark'] .workflow-step-row,
[data-theme='dark'] .calendar-event,
[data-theme='dark'] .calendar-event--high-priority,
[data-theme='dark'] .notification-item--unread {
    border-left-color: rgba(77, 212, 200, 0.6);
}
[data-theme='dark'] .workflow-timeline::before {
    background: rgba(77, 212, 200, 0.35);
}
[data-theme='dark'] .workflow-item::before {
    background: rgba(77, 212, 200, 0.55);
}
[data-theme='dark'] .cl-card--raised:hover {
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .workflow-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .workflow-empty-card:hover {
    border-color: rgba(77, 212, 200, 0.35);
    background: rgba(255, 255, 255, 0.02);
    color: #a7d7c5;
}
[data-theme='dark'] .calendar-event {
    background: rgba(77, 212, 200, 0.08);
}
[data-theme='dark'] .calendar-event:hover {
    background: rgba(255, 255, 255, 0.05);
}
[data-theme='dark'] .anchor-milestone-option:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #a7d7c5;
}
[data-theme='dark'] .notification-item--unread {
    background: rgba(77, 212, 200, 0.06);
}
[data-theme='dark'] .pagination-btn:hover {
    background: rgba(77, 212, 200, 0.1);
    border-color: rgba(77, 212, 200, 0.3);
    color: #e8f4f3;
}
[data-theme='dark'] .pagination-btn--active {
    background: #005a52;
    border-color: #005a52;
    color: #e8f4f3;
}
[data-theme='dark'] .workflow-card__link {
    color: #4dd4c8;
}
[data-theme='dark'] .workflow-card__link:hover {
    color: #7ee8df;
}
[data-theme='dark'] .calendar-add a {
    background: #005a52;
    color: #e8f4f3;
}
[data-theme='dark'] .calendar-add a:hover {
    background: #00867a;
    color: #e8f4f3;
}
[data-theme='dark'] .event-modal__header {
    background: #0f433c;
}
[data-theme='dark'] .event-modal__link:hover {
    color: #7ee8df;
}
[data-theme='dark'] .event-modal__close {
    background: #005a52;
    color: #e8f4f3;
}
[data-theme='dark'] .event-modal__close:hover {
    background: #00867a;
    color: #e8f4f3;
}

/* ============================================================
   SECTION 14 – DARK MODE BOOTSTRAP OVERRIDES
   ============================================================ */

[data-theme='dark'] .form-control,
[data-theme='dark'] .form-select {
    background-color: var(--bg-tertiary);
    border-color: rgba(255,255,255,0.12);
    color: var(--text-main);
}
[data-theme='dark'] .cl-input {
    border-color: rgba(255,255,255,0.12);
}
[data-theme='dark'] .list-group-item {
    background-color: var(--bg-secondary);
    color: var(--text-main);
    border-color: rgba(255,255,255,0.06);
}
[data-theme='dark'] .table {
    color: var(--text-main);
}
[data-theme='dark'] .table td,
[data-theme='dark'] .table th {
    border-color: rgba(255,255,255,0.06);
}
[data-theme='dark'] .modal-content {
    background-color: var(--bg-secondary);
    color: var(--text-main);
}
[data-theme='dark'] .modal-header { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme='dark'] .modal-footer { border-top-color:    rgba(255,255,255,0.06); }
[data-theme='dark'] .form-control::placeholder { color: var(--text-muted); }

/* Form labels + help: Bootstrap uses --bs-form-label-color / --bs-secondary-color; on some
   pages optional fields and .form-text rendered nearly black. Pin to DS tokens. */
[data-theme='dark'] label.form-label,
[data-theme='dark'] .form-label,
[data-theme='dark'] .col-form-label {
    color: var(--text-main) !important;
}
[data-theme='dark'] .form-check-label {
    color: var(--text-main) !important;
}
[data-theme='dark'] .form-text,
[data-theme='dark'] .form-text.small {
    color: var(--text-muted) !important;
}

/* Bootstrap 5 .text-muted / .text-secondary use color: … !important with --bs-* vars.
   With only data-theme=dark, --bs-secondary-color stays light-theme gray → invisible on
   dark surfaces. data-bs-theme=dark fixes variables; these rules enforce DS tokens. */
[data-theme='dark'] .text-muted,
[data-theme='dark'] .text-secondary,
[data-theme='dark'] .text-body-secondary,
[data-theme='dark'] .text-body-tertiary {
    color: var(--text-muted) !important;
}
[data-theme='dark'] .link-secondary {
    color: var(--text-muted) !important;
}
[data-theme='dark'] .link-secondary:hover,
[data-theme='dark'] .link-secondary:focus {
    color: var(--text-main) !important;
}

/* Bootstrap outline buttons: match viridian + readable borders on dark surfaces */
[data-theme='dark'] .btn.btn-outline-secondary {
    color: var(--text-main) !important;
    border-color: var(--border-strong) !important;
    background-color: transparent !important;
}
[data-theme='dark'] .btn.btn-outline-secondary:hover,
[data-theme='dark'] .btn.btn-outline-secondary:focus-visible {
    color: #e8f4f3 !important;
    background-color: rgba(0, 112, 102, 0.3) !important;
    border-color: rgba(77, 212, 200, 0.35) !important;
}
[data-theme='dark'] .btn.btn-outline-danger {
    color: #cf6679 !important;
    border-color: rgba(207, 102, 121, 0.45) !important;
    background-color: transparent !important;
}
[data-theme='dark'] .btn.btn-outline-danger:hover,
[data-theme='dark'] .btn.btn-outline-danger:focus-visible {
    color: #fde8ec !important;
    background-color: rgba(207, 102, 121, 0.22) !important;
    border-color: rgba(207, 102, 121, 0.65) !important;
}
[data-theme='dark'] .btn.btn-outline-success {
    color: #4ade80 !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
    background-color: transparent !important;
}
[data-theme='dark'] .btn.btn-outline-success:hover,
[data-theme='dark'] .btn.btn-outline-success:focus-visible {
    color: #ffffff !important;
    background-color: #15803d !important;
    border-color: #15803d !important;
}

/* Light-surface Bootstrap buttons → same secondary treatment as outline */
[data-theme='dark'] .btn.btn-light {
    color: var(--text-main) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-strong) !important;
}
[data-theme='dark'] .btn.btn-light:hover,
[data-theme='dark'] .btn.btn-light:focus-visible {
    color: #e8f4f3 !important;
    background-color: rgba(0, 112, 102, 0.28) !important;
    border-color: rgba(77, 212, 200, 0.35) !important;
}

/* Dark mode text colour helpers */
[data-theme='dark'] .text-primary { color: #4dd4c8 !important; }
[data-theme='dark'] .text-success { color: #4dd599 !important; }
[data-theme='dark'] .text-danger  { color: #ff6b6b !important; }
[data-theme='dark'] .text-warning { color: #ffd166 !important; }


/* ============================================================
   SECTION 15 – TABLES
   ============================================================ */

/* Row hover */
.table tbody tr {
    transition: background-color 0.15s ease;
}
.table tbody tr:hover {
    background-color: var(--table-row-hover);
}
.table tbody tr:hover td {
    color: var(--text-main);
}
[data-theme='dark'] .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Zebra striping */
.table tbody tr:nth-child(odd)  { background-color: var(--bg-secondary); }
.table tbody tr:nth-child(even) { background-color: var(--bg-tertiary); }
[data-theme='dark'] .table tbody tr:nth-child(odd)  { background-color: var(--bg-secondary); }
[data-theme='dark'] .table tbody tr:nth-child(even) { background-color: var(--bg-tertiary); }


/* ============================================================
   SECTION 16 – CASCADE LIST (row hover + zebra)
   ============================================================ */

/* Row hover */
.cascade-list .card:hover,
.cascade-list .list-group-item:hover,
.cascade-list .cascade-row:hover {
    background-color: var(--cascade-card-hover);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
[data-theme='dark'] .cascade-list .card:hover,
[data-theme='dark'] .cascade-list .list-group-item:hover,
[data-theme='dark'] .cascade-list .cascade-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Zebra striping – light */
.cascade-list .list-group-item:nth-child(odd),
.cascade-list .cascade-row:nth-child(odd) {
    background-color: var(--card-bg);
    color: var(--text-main);
}
.cascade-list .list-group-item:nth-child(even),
.cascade-list .cascade-row:nth-child(even) {
    background-color: var(--bg-tertiary);
    color: var(--text-main);
}

/* Zebra striping – dark */
[data-theme='dark'] .cascade-list .list-group-item:nth-child(odd),
[data-theme='dark'] .cascade-list .cascade-row:nth-child(odd) {
    background-color: var(--bg-secondary);
    color: var(--text-main);
    border-color: var(--border);
}
[data-theme='dark'] .cascade-list .list-group-item:nth-child(even),
[data-theme='dark'] .cascade-list .cascade-row:nth-child(even) {
    background-color: var(--bg-tertiary);
    color: var(--text-main);
    border-color: var(--border);
}


/* ============================================================
   SECTION 17 – DASHBOARD RECENT ACTIVITY FEED

   ⚠️  GUARD: Zebra striping rules here must NOT use !important.
   Light mode rules have no specificity prefix.
   Dark mode rules use [data-theme="dark"] prefix for specificity.

   DO NOT:
   - Add !important to background-color rules
   - Use hardcoded hex colors (use token variables from tokens.css)
   - Add border-left accent lines (removed in March 2026 cleanup)
   - Add ::before pseudo-elements (removed — do not restore)
   ============================================================ */

/* Layout */
.activity-feed {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.activity-feed-header {
    min-height: 60px;
}
.activity-feed-scroll {
    max-height: 620px;
    overflow-y: auto;
}
.activity-feed-list {
    margin: 0;
}
.activity-feed-input {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--bg-primary);
}
.activity-feed-filter {
    max-width: 280px;
    border-radius: var(--radius-pill);
}
.activity-feed-input::placeholder { color: var(--text-muted); }
.activity-feed-list { padding: 12px; }
.activity-feed-link {
    color: var(--brand-viridian);
}
.activity-feed-link:hover {
    color: var(--brand-viridian-hover);
}

/* Activity items */
.activity-item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 8px;
    background: var(--activity-item-bg);
    border-radius: var(--radius-md);
}
.activity-item:last-child { margin-bottom: 0; }

.activity-item-avatar,
.activity-item__avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--activity-item-avatar-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}
.activity-item-body,
.activity-item__body { flex: 1; }
.activity-item-meta,
.activity-item__meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 2px; }
.activity-item-matter,
.activity-item__matter { font-size: 0.85rem; color: var(--activity-item-matter-fg); font-weight: 500; }
.activity-item-desc,
.activity-item__desc { font-size: 0.9rem; color: var(--text); }
.activity-item-link,
.activity-item__link { color: var(--brand-viridian); font-weight: 500; text-decoration: none; }
.activity-item-link:hover,
.activity-item__link:hover { text-decoration: underline; }

/* Zebra + hover — light
   New BEM-first classes are primary; legacy selectors are kept for compatibility. */
.activity-feed-item:nth-child(odd),
.activity-feed .list-group-item:nth-child(odd) {
    background-color: var(--activity-row-odd);
    color: var(--text-main);
}
.activity-feed-item:nth-child(even),
.activity-feed .list-group-item:nth-child(even) {
    background-color: var(--activity-row-even);
    color: var(--text-main);
}
[data-theme="dark"] .activity-feed-item:nth-child(odd),
[data-theme="dark"] .activity-feed .list-group-item:nth-child(odd) {
    background-color: var(--bg-secondary);
}
[data-theme="dark"] .activity-feed-item:nth-child(even),
[data-theme="dark"] .activity-feed .list-group-item:nth-child(even) {
    background-color: var(--bg-tertiary);
}
.activity-feed-item:hover,
.activity-feed .list-group-item:hover {
    background-color: var(--activity-row-hover);
    cursor: pointer;
}
[data-theme='dark'] .activity-feed-item:hover,
[data-theme='dark'] .activity-feed .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Zebra + hover — dark */
.dashboard .activity-feed.bg-body,
.dashboard .activity-feed .card.bg-body {
    background-color: var(--bg-secondary);
}
[data-theme='dark'] .activity-feed,
[data-theme='dark'] .activity-feed .card-header {
    background-color: var(--bg-secondary);
    color: var(--text-main);
}
[data-theme='dark'] .activity-feed-item a,
[data-theme='dark'] .activity-feed .list-group-item a {
    color: var(--activity-item-matter-fg);
}
[data-theme='dark'] .activity-feed-item a:hover,
[data-theme='dark'] .activity-feed .list-group-item a:hover {
    color: #7ee8df;
}


/* ============================================================
   SECTION 18 – ALERTS & TOASTS
   ============================================================ */

.alert-toast-wrapper {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    width: 100%;
    max-width: 480px;
    padding: 0 16px;
}
.alert-toast-wrapper .alert {
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: opacity 0.5s ease;
}
.alert-toast-wrapper .alert-success {
    background-color: var(--alert-success-bg);
    color: var(--alert-success-text);
    border: 1px solid var(--alert-success-border);
}
/* Bootstrap-native — do not alias into cl-button system */
.alert-toast-wrapper .alert-success .btn-close {
    filter: none;
    opacity: 0.9;
    background-size: 1em;
}
.alert-toast-wrapper .alert-success .btn-close:hover { opacity: 1; }
[data-theme='dark'] .alert-toast-wrapper .alert-success .btn-close { filter: invert(1); }
[data-theme='dark'] .alert:not(.alert-success) {
    background-color: var(--card-bg);
    border-color: var(--border);
    color: var(--text);
}


/* ============================================================
   SECTION 19 – LOGOUT
   ============================================================ */

.logout-form {
    margin: 0;
    padding: 0;
}
.logout-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.375rem 1rem;
    font-size: inherit;
    cursor: pointer;
}
.logout-btn:hover {
    background-color: rgba(0,112,102,0.15);
    color: var(--brand-viridian);
}
[data-theme='dark'] .logout-btn:hover {
    background-color: rgba(0, 112, 102, 0.3);
    color: #a7d7c5;
}


/* ============================================================
   SECTION 20 – LOGIN PAGE
   ============================================================ */

body.logged-out .navbar-viridian .cl-sub-nav-scroll,
body.logged-out .cl-sub-nav,
body.logged-out #global-search,
body.logged-out .cl-firm-switcher-mobile,
body.logged-out #mobileFirmSwitchForm {
  display: none;
}

.login-page {
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--login-gradient);
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 40px;
    background: var(--login-card-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--login-card-border);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);
    transition: background 0.3s ease, border-color 0.3s ease;
}
.login-card .brand-center {
    text-align: center;
    margin-bottom: 8px;
}
.login-card .brand-center a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-viridian);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.login-card .brand-center a:hover { color: var(--brand-viridian-hover); }
.login-card .login-subheader {
    font-size: 0.95rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 28px;
    line-height: 1.5;
}
.login-subheader--nowrap {
    white-space: nowrap;
}
.login-card .login-subheader--nowrap {
    margin-bottom: 0;
    margin-top: 1rem;
}
.login-card .login-subheader--nowrap a {
    font-weight: 400;
    color: inherit;
    text-decoration: underline;
}
.login-card .login-subheader--nowrap a:hover {
    color: var(--brand-viridian);
}
.login-card .form-group { margin-bottom: 20px; }
.login-card label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}
.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-card input:focus {
    outline: none;
    border-width: 2px;
    border-color: var(--brand-viridian);
    box-shadow: 0 0 0 3px var(--brand-viridian-glow);
}
.login-card .btn-login {
    width: 100%;
    padding: 14px;
    background: var(--brand-viridian);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.login-card .btn-login:hover {
    background: var(--brand-viridian-hover);
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px var(--brand-viridian-glow);
}
.login-card .btn-login:active { transform: translateY(0) scale(0.98); }
.login-card .errorlist {
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 4px;
    list-style: none;
    padding: 0;
}
.login-card .login-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.login-card .login-checkbox-row input[type="checkbox"] {
    width: auto;
    margin: 0;
}
.login-card .login-checkbox-row label {
    display: inline;
    margin-bottom: 0;
    font-weight: 500;
}
.login-card .login-forgot-link {
    display: block;
    margin-top: 8px;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: none;
}
.login-card .login-forgot-link:hover {
    color: var(--brand-viridian);
    text-decoration: underline;
}

/* Legacy login container */
.login-container {
    max-width: 400px;
    margin: 60px auto;
    padding: 32px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


/* ============================================================
   SECTION 21 – PAGE LAYOUT
   ============================================================ */

.cl-page {
    background: var(--bg-primary);
    min-height: calc(100vh - 104px);
    padding: 24px;
    transition: background-color 0.3s ease;
}
.cl-page .container-fluid { max-width: 100%; }

.cl-container {
    max-width: 1400px;
    margin: 0 auto;
}


/* ============================================================
   SECTION 22 – GLOBAL SEARCH DROPDOWN (base.html)
   ============================================================ */

.global-search-wrap {
    width: 100%;
    max-width: 360px;
}

/* Narrower cap between md and xl so the viridian bar does not wrap before wide desktops */
@media (min-width: 769px) and (max-width: 1199.98px) {
    .navbar-viridian .global-search-wrap {
        max-width: 280px;
    }
}

.global-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1100;
    background: #002924; /* intentional: fixed dark brand tone regardless of theme */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    box-shadow: var(--shadow-xl);
    max-height: 380px;
    overflow-y: auto;
    display: none;
}
.global-search-dropdown.visible { display: block; }

.global-search-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    padding: 10px 12px 6px 12px;
}

.global-search-result {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 8px 12px;
}
.global-search-result:hover {
    background: rgba(0, 112, 102, 0.35);
    color: #ffffff;
}

.global-search-result-name {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
}
.global-search-result-subtitle {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.72);
    margin-top: 2px;
    line-height: 1.2;
}
.global-search-empty {
    color: rgba(255,255,255,0.72);
    font-size: 0.85rem;
    padding: 10px 12px;
}


/* ============================================================
   SECTION 24 – CONTACT & MATTER TABS
   ============================================================ */

/* Shared tab strip pattern used by contact_detail and matter_detail */
.contact-tabs,
.matter-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}

.contact-tab,
.matter-tab {
    padding: 10px 18px;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.contact-tab:hover,
.matter-tab:hover { color: var(--brand-viridian); }

.contact-tab.active,
.matter-tab.active {
    color: var(--brand-viridian);
    border-bottom-color: var(--brand-viridian);
}

.contact-tab-panel,
.matter-tab-panel { display: none; }

.contact-tab-panel.active,
.matter-tab-panel.active { display: block; }


/* ============================================================
   SECTION 25 – CONTACT DETAIL
   ============================================================ */

.detail-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.detail-row:last-child { border-bottom: none; }

.detail-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    width: 160px;
    flex-shrink: 0;
}

.detail-value {
    color: var(--text-main);
    flex-grow: 1;
}

/* Avatar used in contact activity feed */
.activity-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--brand-viridian);
    color: var(--text-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Case status updates — light blue circle (tasks/regular activities stay viridian above) */
.contact-activity-status-row .activity-avatar {
    background: #60a5fa;
    color: #ffffff;
}

/* Avatar used in contact list */
.client-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--brand-viridian);
    color: var(--text-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}


/* ============================================================
   SECTION 26 – INVOICE TABLE (contact_detail, invoice_list)
   ============================================================ */

.invoice-table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-border-color: var(--color-border-tertiary, var(--border));
}

.invoice-table thead th {
    background-color: var(--color-background-secondary, var(--bg-secondary));
    color: var(--color-text-secondary, var(--text-secondary));
    font-size: 12px;
    font-weight: 500;
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-tertiary, var(--border));
}
.invoice-table td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
.invoice-table tbody tr:nth-child(odd)  { background-color: var(--bg-secondary); }
.invoice-table tbody tr:nth-child(even) { background-color: var(--bg-tertiary); }
.invoice-table tbody tr:hover           { background-color: var(--activity-row-hover); }
[data-theme='dark'] .invoice-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.04); }

.invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    gap: 16px;
    transition: background-color 0.15s ease;
}
.invoice-row:hover {
    background-color: var(--table-row-hover);
    cursor: default;
}
[data-theme='dark'] .invoice-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
}
.invoice-row a,
.invoice-row button,
.invoice-row .btn-cl-solid,
.invoice-row .btn-cl-outline {
    cursor: pointer;
}
.invoice-row:last-child {
    border-bottom: none;
}

.invoice-row__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.invoice-row__primary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.invoice-row__number {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-main);
}
.invoice-row__client {
    font-size: var(--font-size-sm);
    color: var(--text-main);
}
.invoice-row__matter {
    font-size: var(--font-size-sm);
    color: var(--brand-viridian);
    font-weight: 500;
}
.invoice-row__sep {
    color: var(--border-strong);
    font-size: var(--font-size-sm);
}

.invoice-row__secondary {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.invoice-row__empty {
    color: var(--border-strong);
    font-style: italic;
}

.invoice-row__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.invoice-row__amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    min-width: 80px;
    text-align: right;
}

/* Status badges */
.invoice-status {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    text-transform: capitalize;
    white-space: nowrap;
}
.invoice-status--paid {
    background: #d1fae5;
    color: #065f46;
}
.invoice-status--draft {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}
.invoice-status--unpaid {
    background: #fee2e2;
    color: #991b1b;
}
.invoice-status--overdue {
    background: #fee2e2;
    color: #991b1b;
}
.invoice-status--sent {
    background: #dbeafe;
    color: #1e40af;
}

/* Dark mode badge overrides */
[data-theme='dark'] .invoice-status--paid {
    background: #0a2e28;
    color: #5ec4b5;
}
[data-theme='dark'] .invoice-status--draft {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}
[data-theme='dark'] .invoice-status--unpaid,
[data-theme='dark'] .invoice-status--overdue {
    background: #2d1518;
    color: #d4a0a8;
}
[data-theme='dark'] .invoice-status--sent {
    background: #1a2838;
    color: #7eb8e8;
}


/* ============================================================
   SECTION 27 – TRASH TABLE (activity_trash)
   ============================================================ */

/* cl-section-header override: danger red for trash pages */
.cl-section-header--danger {
    background: #dc3545; /* intentional: semantic danger, not brand */
}
.trash-table th {
    background-color: #dc3545; /* intentional: semantic danger */
    color: #ffffff;
    font-weight: 600;
    padding: 12px 16px;
}
.trash-table td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
.trash-table tbody tr:nth-child(odd)  { background-color: var(--bg-secondary); }
.trash-table tbody tr:nth-child(even) { background-color: #fff5f5; } /* intentional: danger tint */
[data-theme='dark'] .trash-table tbody tr:nth-child(even) { background-color: #2a1a1a; } /* intentional: dark danger tint */


/* ============================================================
   SECTION 28 – CONTACT / MATTER FORM CARDS
   ============================================================ */

/* Shared narrow form page wrappers */
.client-form-page  { max-width: 640px; margin: 0 auto; }
.cl-page-wrapper   { max-width: 1400px; margin: 0 auto; }

/* Generic form section card (client_form, etc.) */
.client-form-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.client-form-section__title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--brand-viridian);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.client-form-row { margin-bottom: 16px; }
.client-form-row:last-child { margin-bottom: 0; }
.client-form-label {
    display: block;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
    font-size: 0.9rem;
}
.client-form-label .required { color: #dc2626; } /* intentional: semantic danger */
.client-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 576px) {
    .client-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.client-form-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.client-form .form-control {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
}
.client-form .form-control:focus {
    border-color: var(--brand-viridian);
    box-shadow: 0 0 0 3px var(--viridian-glow);
    outline: none;
}

/* cl-form-card (contact_edit, matter_form) */
.cl-form-card {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.cl-form-card .cl-form-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.cl-form-card .cl-form-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}
.cl-form-card .card-body { padding: 20px 24px; }
.cl-form-label {
    font-weight: 600;
    margin: 0;
    color: var(--text-main);
}
.cl-form-label .text-danger { color: #dc2626; } /* intentional: semantic danger */

/* cl-input size modifiers (contact_edit) */
.cl-input-middle  { max-width: 80px; }
.cl-input-dob     { max-width: 160px; }
.cl-input-email,
.cl-input-name,
.cl-input-phone,
.cl-input-company { max-width: 350px; }
.cl-input-full    { width: 100%; }


/* ============================================================
   SECTION 29 – FORM ACTION BUTTONS (save / cancel variants)
   ============================================================ */

/* ============================================================
   SECTION 30 – SETTINGS PAGE
   ============================================================ */

.settings-container { max-width: 520px; }
.settings-container-wide { max-width: 980px; }

.settings-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 24px;
}
.settings-card h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 20px;
}

.settings-avatar-section {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}
.settings-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-tertiary);
}
.settings-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--brand-viridian-light);
    color: var(--brand-viridian);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
}
.settings-avatar-actions { flex: 1; }
.settings-avatar-actions input[type="file"] { margin-top: 8px; font-size: 0.9rem; }
.settings-avatar-actions p { font-size: 0.85rem; color: var(--text-muted); margin-top: 6px; }

.settings-form .messages { margin-bottom: 16px; }
.settings-form .alert-success {
    padding: 12px;
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-radius: var(--radius-sm);
}
.settings-form .alert-error {
    padding: 12px;
    background: #fee2e2; /* intentional: semantic danger tint */
    color: #991b1b;
    border-radius: var(--radius-sm);
}


/* ============================================================
   SECTION 31 – PAYMENT CARD (record_payment)
   ============================================================ */

.payment-card {
    max-width: 480px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.payment-card__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.payment-card__body { padding: 24px; }


/* ============================================================
   SECTION 32 – DASHBOARD STAT CARDS (core/dashboard)
   ============================================================ */

/* Trust balance threshold alert */
.trust-balance-alert {
    --color-border-warning: rgba(217, 119, 6, 0.45);
    --color-background-warning: var(--color-warning-soft);
    --color-text-warning: var(--color-warning-dark);
    --border-radius-lg: var(--radius-lg);
    --color-background-primary: var(--bg-primary);
    border: 0.5px solid var(--color-border-warning);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: 1rem;
}
[data-theme='dark'] .trust-balance-alert {
    --color-border-warning: rgba(251, 191, 36, 0.42);
    --color-background-warning: rgba(120, 53, 15, 0.42);
    --color-text-warning: #fcd34d;
    --color-background-primary: var(--bg-secondary);
}
.trust-balance-alert__header {
    background: var(--color-background-warning);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.trust-balance-alert__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-warning);
}
.trust-balance-alert__title svg {
    width: 15px;
    height: 15px;
    stroke: var(--color-text-warning);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.trust-balance-alert__btn {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 0.5px solid var(--color-border-warning);
    background: none;
    color: var(--color-text-warning);
    text-decoration: none;
    white-space: nowrap;
}
.trust-balance-alert__btn:hover {
    background: var(--color-background-primary);
    color: var(--color-text-warning);
}
.trust-balance-alert__body {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--color-text-secondary, var(--text-secondary));
}

.dashboard-stat-card {
    color: #ffffff;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.dashboard-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.dashboard-stat-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
    text-align: center;
}
[data-theme='dark'] .dashboard-stat-card {
    border: 1px solid rgba(255,255,255,0.15);
}
[data-theme='dark'] .dashboard-stat-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.stat-icon-wrap {
    width: 48px;
    height: 48px;
    min-width: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    color: white;
    font-size: 2rem;
}
.stat-icon-wrap .bi {
    font-size: 1.35rem;
    -webkit-font-smoothing: antialiased;
    color: #ffffff;
    fill: #ffffff;
}
.dashboard-stat-card .stat-icon-wrap { color: #ffffff; fill: #ffffff; }

.stat-value-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}
.stat-value-wrap .stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    margin-bottom: 0.15rem;
    flex-shrink: 0;
    text-align: center;
}
.stat-value {
    font-size: clamp(1rem, 5vi, 2.5rem);
    font-weight: 700;
    margin-bottom: 0;
    min-width: 0;
    line-height: 1.1;
    overflow-wrap: break-word;
    text-align: center;
    padding: 0 10px;
}

.stat-value-wrap {
    margin: 0 10px;
}

@media (max-width: 768px) {
    .stat-card .card-body {
        flex-direction: row;
        align-items: center;
    }

    .stat-icon-wrap {
        margin-right: 10px;
        margin-bottom: 0;
    }

    .stat-value-wrap {
        text-align: left;
    }
}

.activity-row-hidden { display: none; }

/* Mobile-first stat cards */
.dashboard-stat-card .card-body { padding-inline: 0.5rem; }
.stat-icon-wrap { width: 40px; height: 40px; min-width: 40px; }
.stat-icon-wrap .bi { font-size: 1.1rem; color: #ffffff; fill: #ffffff; }

@media (min-width: 481px) {
    .dashboard-stat-card .card-body { padding-inline: 0.75rem; }
}
@media (min-width: 769px) {
    .dashboard-stat-card .card-body { padding-inline: 1rem; }
    .stat-icon-wrap { width: 48px; height: 48px; min-width: 48px; }
    .stat-icon-wrap .bi { font-size: 1.35rem; }
}

/* Responsive stat-value font sizing */
@media (min-width: 1200px) {
    .stat-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .stat-value {
        font-size: 1.2rem;
    }
}

@media (max-width: 991px) {
    .stat-value {
        font-size: 1rem;
    }
}

/* Activity feed scrollbar (dashboard + matter_list) */
.activity-feed .card-body::-webkit-scrollbar,
.recent-matters-feed .card-body::-webkit-scrollbar { width: 6px; }
.activity-feed .card-body::-webkit-scrollbar-track,
.recent-matters-feed .card-body::-webkit-scrollbar-track { background: transparent; }
.activity-feed .card-body::-webkit-scrollbar-thumb,
.recent-matters-feed .card-body::-webkit-scrollbar-thumb {
    background-color: var(--brand-viridian);
    border-radius: 9999px;
}

/* Avatar circle inside activity feeds */
.activity-feed .avatar-circle,
.recent-matters-feed .avatar-circle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background-color: var(--brand-viridian);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}


/* ============================================================
   SECTION 33 – SYSTEM ADMIN DASHBOARD
   ============================================================ */

.system-admin-stat-card {
    background: linear-gradient(135deg, var(--brand-viridian) 0%, var(--brand-viridian-hover) 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 14px var(--brand-viridian-glow);
}
[data-theme='dark'] .system-admin-stat-card {
    background: linear-gradient(135deg, #0d3d36 0%, #0a302b 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.system-admin-stat-card .stat-value { font-size: 1.75rem; font-weight: 700; }
.system-admin-stat-card .stat-label {
    font-size: 0.8rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.system-admin-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.system-admin-stat-compact {
    flex: 1 1 140px;
    min-width: 0;
    max-width: 100%;
}
.system-admin-stat-compact .card-body {
    padding: 0.75rem 1rem;
}
.system-admin-stat-compact .stat-value {
    font-size: 1.35rem;
    line-height: 1.2;
}
.system-admin-stat-compact .stat-label {
    font-size: 0.72rem;
    margin-bottom: 0.25rem;
}

#firm-overview-table .sortable-th {
    cursor: pointer;
    user-select: none;
}
#firm-overview-table .sortable-th:hover {
    background-color: rgba(0, 0, 0, 0.04);
}
[data-theme='dark'] #firm-overview-table .sortable-th:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.firm-inactive {
    opacity: 0.65;
    background-color: var(--bg-primary);
}


/* ============================================================
   SECTION 34 – RECENT MATTERS FEED (matter_list)
   ============================================================ */

/* GUARD: Matters list uses .cascade-list — zebra comes from Section 16.
   Do NOT recreate a .recent-matters-feed section. */


/* ============================================================
   SECTION 35 – MATTER DETAIL
   ============================================================ */

/* Workflow timeline */
.workflow-timeline {
    position: relative;
    padding-left: 24px;
}
.workflow-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--brand-viridian);
    opacity: 0.3;
    border-radius: 1px;
}
.workflow-item {
    position: relative;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-viridian);
    border-radius: var(--radius-md);
}
.workflow-item::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 20px;
    width: 12px;
    height: 12px;
    background: var(--brand-viridian);
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
}
.workflow-item.completed {
    border-left-color: #6b7280; /* intentional: neutral grey for "done" */
    opacity: 0.85;
}
.workflow-item.completed::before {
    background: #059669; /* intentional: semantic success green */
}
.workflow-item__subject { font-weight: 600; color: var(--text-main); }
.workflow-item__meta    { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }

/* Activity cards (inline on matter detail) */
.activity-card { transition: background-color 0.15s ease; }
.activity-card:hover { background-color: rgba(0,112,102,0.04); }
[data-theme='dark'] .activity-card:hover { background-color: rgba(255, 255, 255, 0.03); }

.activity-card .activity-hover-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.activity-card:hover .activity-hover-actions {
    opacity: 1;
    pointer-events: all;
}

.anchor-milestone-option:hover {
    background: rgba(0,112,102,0.08);
    color: var(--brand-viridian);
}

.activity-edit-mode input,
.activity-edit-mode textarea {
    background: var(--card-bg);
    color: var(--text-main);
    border-color: var(--border);
}


/* ============================================================
   SECTION 36 – MATTER FORM (assigned-to search + workers comp)
   ============================================================ */

.workers-comp-fields {
    display: none;
    margin-top: 12px;
    padding: 16px;
    background: rgba(0,112,102,0.06);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--brand-viridian);
}
.workers-comp-fields.visible { display: block; }

.assigned-to-search-wrap { position: relative; }

.assigned-to-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    display: none;
}
.assigned-to-results.visible { display: block; }

.assigned-to-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 8px 12px;
    cursor: pointer;
}
.assigned-to-option:hover,
.assigned-to-option.active {
    background: rgba(0,112,102,0.12);
}
[data-theme='dark'] .assigned-to-option:hover,
[data-theme='dark'] .assigned-to-option.active {
    background: rgba(255, 255, 255, 0.06);
}


/* ============================================================
   SECTION 37 – WORKFLOW PAGES
   ============================================================ */

/* workflow_list: card grid */
.workflow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.workflow-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px 24px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.workflow-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.workflow-card__title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.workflow-card__meta  { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 12px; }
.workflow-card__link  {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-viridian);
    font-weight: 500;
    text-decoration: none;
}
.workflow-card__link:hover { color: var(--brand-viridian-hover); }

/* Empty state card */
.workflow-empty-card {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 48px;
    background: var(--card-bg);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--brand-viridian);
    transition: all 0.2s ease;
}
.workflow-empty-card:hover {
    border-color: var(--brand-viridian);
    background: rgba(0,112,102,0.05);
    color: var(--brand-viridian);
}
.workflow-empty-card__icon {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 16px;
    opacity: 0.9;
}
.workflow-empty-card__text { font-size: 1.1rem; font-weight: 600; }
.workflow-empty-card__sub  { font-size: 0.9rem; color: var(--text-muted); margin-top: 4px; }

/* workflow_detail: editor card + step rows */
.workflow-editor-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}
.workflow-editor-card__header {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-viridian);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.workflow-step-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-viridian);
    border-radius: var(--radius-sm);
}
.workflow-step-row form { flex: 1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.workflow-step-row input[type="text"] { flex: 1; min-width: 200px; }

.btn-delete-step {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-delete-step:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.add-step-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 16px;
    background: rgba(0,112,102,0.06);
    border: 1px dashed var(--brand-viridian);
    border-radius: var(--radius-sm);
    margin-top: 16px;
}
.add-step-form .form-group { flex: 1; min-width: 180px; }
.add-step-form label { font-size: 0.85rem; font-weight: 500; color: var(--text); }

/* workflow_form */
.workflow-form-page { max-width: 560px; margin: 0 auto; }

.workflow-form-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.workflow-form-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--brand-viridian);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.workflow-form-row { margin-bottom: 20px; }
.workflow-form-row:last-of-type { margin-bottom: 0; }

.workflow-form-label {
    display: block;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
    font-size: 0.9rem;
}
.workflow-form-label .required { color: #dc2626; } /* intentional: semantic danger */

.workflow-form-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.95rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.workflow-form-input:focus {
    border-color: var(--brand-viridian);
    box-shadow: 0 0 0 3px var(--viridian-glow);
    outline: none;
}
.workflow-form-input::placeholder { color: var(--text-muted); }
select.workflow-form-input { cursor: pointer; appearance: auto; }

.workflow-form-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.workflow-form-helptext { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }


/* ============================================================
   SECTION 38 – CALENDAR (calendar_app/index)
   ============================================================ */

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.calendar-title { font-size: 1.25rem; font-weight: 600; }

.calendar-header .page-header-title.calendar-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--brand-viridian);
}

.calendar-nav { display: flex; align-items: center; gap: 12px; }
.calendar-nav a {
    padding: 8px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}
.calendar-nav a:hover {
    background: var(--bg);
    border-color: var(--brand-viridian);
    color: var(--brand-viridian);
}

.calendar-grid {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.calendar-weekdays div { padding: 10px; text-align: center; }

.calendar-weeks { display: flex; flex-direction: column; }

.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 100px;
    border-bottom: 1px solid var(--border);
}
.calendar-week:last-child { border-bottom: none; }

.calendar-day {
    padding: 8px;
    border-right: 1px solid var(--border);
    min-height: 100px;
}
.calendar-day:last-child { border-right: none; }

.calendar-day--other-month {
    background: var(--bg);
    color: var(--text-muted);
}
.calendar-day--today {
    background: var(--card-bg);
    outline: 2px solid var(--brand-viridian);
    outline-offset: -2px;
    z-index: 1;
}

.calendar-day-num {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.calendar-day--other-month .calendar-day-num { color: var(--text-muted); }
.calendar-day--today .calendar-day-num {
    color: #ffffff;
    background: var(--brand-viridian);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.calendar-event {
    font-size: 0.75rem;
    padding: 4px 8px;
    margin-bottom: 4px;
    background: rgba(0,112,102,0.1);
    border-left: 3px solid var(--brand-viridian);
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    display: block;
}
.calendar-event:hover { background: rgba(0,112,102,0.18); }

.calendar-event--high-priority {
    border-left: 3px solid var(--brand-viridian);
    box-shadow: 0 0 8px rgba(0,112,102,0.35);
}
[data-theme='dark'] .calendar-event--high-priority {
    box-shadow: 0 0 8px rgba(77, 212, 200, 0.18);
}

.calendar-event__subject {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar-event__meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.calendar-add { margin-top: 16px; }
.calendar-add a {
    display: inline-block;
    padding: 10px 20px;
    background: var(--brand-viridian);
    color: #ffffff;
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-decoration: none;
}
.calendar-add a:hover { color: #ffffff; background: var(--brand-viridian-hover); }

/* Event detail modal */
.event-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.event-modal-backdrop.show { display: flex; }

.event-modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 420px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    overflow: hidden;
}
.event-modal__header {
    background: var(--brand-viridian);
    color: #ffffff;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 1.1rem;
}
.event-modal__body { padding: 20px; }
.event-modal__row  { margin-bottom: 12px; }
.event-modal__row:last-child { margin-bottom: 0; }
.event-modal__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.event-modal__value { font-size: 0.95rem; color: var(--text); }
.event-modal__link  {
    color: var(--brand-viridian);
    font-weight: 600;
    text-decoration: none;
}
.event-modal__link:hover { color: var(--brand-viridian-hover); }
.event-modal__close {
    margin-top: 16px;
    padding: 10px 20px;
    background: var(--brand-viridian);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
}
.event-modal__close:hover { background: var(--brand-viridian-hover); color: #ffffff; }

/* ============================================================
   SECTION 39 – ACTIVITY LIST PAGE
   ============================================================ */

.activity-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 20px;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
    width: 100%;
}
.activity-row:hover {
    background-color: var(--table-row-hover);
}
[data-theme='dark'] .activity-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.activity-row__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.activity-row__primary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.activity-row__desc {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-main);
}

.activity-row__secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.activity-row__client {
    color: var(--text-muted);
}
.activity-row__matter {
    color: var(--brand-viridian);
    font-weight: 500;
}
.activity-row__sep {
    color: var(--border-strong);
}

.activity-row__right {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Activity type badges */
.activity-type-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    text-transform: capitalize;
    white-space: nowrap;
    flex-shrink: 0;
}
.activity-type--task {
    background: var(--brand-viridian-light);
    color: var(--brand-viridian);
}
.activity-type--call {
    background: #dbeafe;
    color: #1e40af;
}
.activity-type--note {
    background: #fef9c3;
    color: #854d0e;
}
.activity-type--email {
    background: #f3e8ff;
    color: #6b21a8;
}
.activity-type--other {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}
.activity-type--phone-call,
.activity-type--call {
    background: #dbeafe;
    color: #1e40af;
}
.activity-type--calendar-event,
.activity-type--meeting {
    background: #d1fae5;
    color: #065f46;
}
.activity-type--document,
.activity-type--research {
    background: #fef3c7;
    color: #92400e;
}

/* Dark mode badge overrides */
[data-theme='dark'] .activity-type--task {
    background: #152925;
    color: #5dbfb0;
}
[data-theme='dark'] .activity-type--note {
    background: #2e2408;
    color: #d4b87a;
}
[data-theme='dark'] .activity-type--email {
    background: #231a32;
    color: #b8a0d4;
}
[data-theme='dark'] .activity-type--other {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}
[data-theme='dark'] .activity-type--phone-call,
[data-theme='dark'] .activity-type--call {
    background: #1a2838;
    color: #7eb8e8;
}
[data-theme='dark'] .activity-type--calendar-event,
[data-theme='dark'] .activity-type--meeting {
    background: #0f2a24;
    color: #5ec4b5;
}
[data-theme='dark'] .activity-type--document,
[data-theme='dark'] .activity-type--research {
    background: #2e2408;
    color: #d4b87a;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
}
.pagination-bar__info {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.pagination-bar__controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pagination-btn:hover {
    background: var(--brand-viridian);
    border-color: var(--brand-viridian);
    color: #ffffff;
}
.pagination-btn--active {
    background: var(--brand-viridian);
    border-color: var(--brand-viridian);
    color: #ffffff;
    cursor: default;
}

.cascade-filter-pill {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.85);
    background: transparent;
    text-decoration: none;
    transition: background-color 0.15s ease,
                border-color 0.15s ease;
    white-space: nowrap;
}
.cascade-filter-pill:hover {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    border-color: rgba(255,255,255,0.6);
}
.cascade-filter-pill.active {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    border-color: rgba(255,255,255,0.7);
}

.cascade-search-input {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    outline: none;
    width: 180px;
}
.cascade-search-input::placeholder {
    color: rgba(255,255,255,0.6);
}
.cascade-search-input:focus {
    border-color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.2);
}

.matter-status--active,
.matter-status--pending,
.matter-status--closed,
.matter-area--immigration,
.matter-area--pi,
.matter-area--family,
.matter-area--workers-comp,
.matter-area--unknown,
.matter-milestone--lead,
.matter-milestone--discovery,
.matter-milestone--filing,
.matter-milestone--settlement,
.matter-milestone--closed {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.matter-status--active   { background: #E1F5EE; color: #085041; }
.matter-status--pending  { background: #FAEEDA; color: #633806; }
.matter-status--closed   { background: #F1EFE8; color: #444441; }

.matter-area--immigration { background: #E6F1FB; color: #0C447C; }
.matter-area--pi          { background: #FAECE7; color: #712B13; }
.matter-area--family      { background: #FBEAF0; color: #72243E; }
.matter-area--workers-comp{ background: #EAF3DE; color: #27500A; }
.matter-area--unknown     { background: #F1EFE8; color: #444441; }

.matter-milestone--lead       { background: #F1EFE8; color: #444441; }
.matter-milestone--discovery  { background: #E6F1FB; color: #0C447C; }
.matter-milestone--filing     { background: #FAEEDA; color: #633806; }
.matter-milestone--settlement { background: #EAF3DE; color: #27500A; }
.matter-milestone--closed     { background: #F1EFE8; color: #444441; }

.matter-assignee-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text);
  background: var(--card-bg-alt, var(--card-bg));
  border: 0.5px solid var(--border);
  border-left: 2px solid var(--brand-viridian);
  border-radius: 4px;
  padding: 2px 8px 2px 6px;
  vertical-align: middle;
}
.matter-assignee-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-viridian);
  color: #E1F5EE;
  font-size: 9px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.matter-assignee-role {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 400;
}

.matter-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E1F5EE;
  color: #085041;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.matter-avatar--unassigned {
  background: #F1EFE8;
  color: #444441;
}

.matter-progress-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.matter-progress-outer {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  width: 80px;
  flex-shrink: 0;
}
.matter-progress-inner {
  height: 4px;
  border-radius: 2px;
  background: var(--brand-viridian);
}
.matter-progress-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.matter-sol-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E24B4A;
  margin-right: 3px;
  vertical-align: middle;
}

[data-theme="dark"] .matter-row a,
[data-theme="dark"] .matter-row .matter-client-name {
  color: #4dd4c8;
}

[data-theme="dark"] .matter-unassigned-label {
  color: rgba(255, 255, 255, 0.4);
}

/* Filter pills when rendered outside cl-section-header (on card body bg) */
.cascade-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
}

/* Scoped override: pills inside .cascade-filter-row use dark-on-light colors */
.cascade-filter-row .cascade-filter-pill {
    border-color: var(--border-strong);
    color: var(--text-muted);
    background: transparent;
}
.cascade-filter-row .cascade-filter-pill:hover {
    background: var(--brand-viridian);
    border-color: var(--brand-viridian);
    color: #ffffff;
}
.cascade-filter-row .cascade-filter-pill.active {
    background: var(--brand-viridian);
    border-color: var(--brand-viridian);
    color: #ffffff;
}

/* Divider between pill groups */
.cascade-filter-row .pill-group-divider {
    width: 1px;
    height: 18px;
    background: var(--border-strong);
    flex-shrink: 0;
    margin: 0 4px;
}

/* Dark mode — pills in filter row stay readable */
[data-theme="dark"] .cascade-filter-row .cascade-filter-pill {
    border-color: var(--border);
    color: var(--text-muted);
}
[data-theme="dark"] .cascade-filter-row .cascade-filter-pill:hover,
[data-theme="dark"] .cascade-filter-row .cascade-filter-pill.active {
    background: rgba(77, 212, 200, 0.12);
    border-color: rgba(77, 212, 200, 0.35);
    color: #e8f4f3;
}

/* Client list row — meta text dark mode fix */
[data-theme="dark"] .client-row .text-muted {
    color: var(--text-muted);
}
[data-theme="dark"] .client-row .fw-semibold a {
    color: #4dd4c8;
}

/* Standardise scrollbar across all cascade list cards */
.cl-section-card .card-body::-webkit-scrollbar,
.cascade-list .card-body::-webkit-scrollbar {
    width: 6px;
}
.cl-section-card .card-body::-webkit-scrollbar-track,
.cascade-list .card-body::-webkit-scrollbar-track {
    background: transparent;
}
.cl-section-card .card-body::-webkit-scrollbar-thumb,
.cascade-list .card-body::-webkit-scrollbar-thumb {
    background-color: var(--brand-viridian);
    border-radius: 9999px;
}

/* Activity feed dark mode text fixes */
[data-theme="dark"] .activity-feed .activity-feed-item .small,
[data-theme="dark"] .activity-feed .list-group-item .small {
    color: var(--text-muted);
}
[data-theme="dark"] .activity-feed .activity-feed-item .text-secondary,
[data-theme="dark"] .activity-feed .list-group-item .text-secondary {
    color: var(--text-muted);
}
[data-theme="dark"] .activity-feed .activity-feed-item .text-break,
[data-theme="dark"] .activity-feed .list-group-item .text-break {
    color: var(--text-main);
}
[data-theme="dark"] .activity-feed .activity-feed-item,
[data-theme="dark"] .activity-feed .list-group-item {
    color: var(--text-main);
}

/* Sticky navbar — user preference via html class */

/* Default and explicit both-sticky */
html.nav-sticky-both .navbar-viridian {
    position: sticky;
    top: 0;
    z-index: 1030;
}
html.nav-sticky-both .navbar-sub {
    position: sticky;
    top: 56px;
    z-index: 1029;
}

/* Top navbar only */
html.nav-sticky-top .navbar-viridian {
    position: sticky;
    top: 0;
    z-index: 1030;
}
html.nav-sticky-top .navbar-sub {
    position: static;
}

/* No sticky */
html.nav-sticky-none .navbar-viridian,
html.nav-sticky-none .navbar-sub {
    position: static;
}

/* ============================================================
   SECTION 40 – WORKFLOW EDITOR

   ⚠️  GUARD: Inputs here use .wf-step-title and .wf-step-days classes.
   These are excluded from Section 8's border-radius rule via :not().

   DO NOT:
   - Use .form-control or .form-select on workflow editor inputs
   - Add !important to sizing or border-radius rules here
   - Change class names without updating Section 8 :not() list
   ============================================================ */

.wf-step-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.wf-step-row {
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
    transition: background-color 0.15s ease;
}
.wf-step-row:last-child { border-bottom: none; }
.wf-step-row:hover { background-color: var(--table-row-hover); }
.wf-step-row--ghost { opacity: 0.4; background: var(--brand-viridian-light); }

.wf-step-table td {
    padding: 10px 6px;
    vertical-align: middle;
}
.wf-step-table td:first-child { padding-left: 20px; }
.wf-step-table td:last-child  { padding-right: 20px; }

.wf-td-handle { width: 24px; }
.wf-td-num    { width: 32px; }
.wf-td-title  { width: auto; }
.wf-td-due    { width: 140px; white-space: nowrap; overflow: hidden; }
.wf-td-status { width: 60px; text-align: right; }
.wf-td-remove { width: 80px; text-align: right; }

.wf-drag-handle {
    color: var(--text-muted);
    cursor: grab;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease;
}
.wf-drag-handle:hover { color: var(--brand-viridian); }
.wf-drag-handle:active { cursor: grabbing; }

.wf-step-number {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-viridian-light);
    color: var(--brand-viridian);
    font-size: 0.7rem;
    font-weight: 600;
    align-items: center;
    justify-content: center;
}

.wf-step-title {
    width: 100%;
    max-width: 340px;
    font-size: 0.875rem;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-main);
    transition: border-color 0.15s ease;
}
.wf-step-title:focus {
    outline: none;
    border-color: var(--brand-viridian);
    box-shadow: 0 0 0 3px var(--brand-viridian-glow);
}
.wf-step-title:disabled { opacity: 0.7; cursor: default; }

.wf-step-due {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.wf-step-days {
    width: 56px;
    max-width: 56px;
    min-width: 56px;
    font-size: 0.875rem;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-main);
    text-align: center;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.wf-step-days:focus {
    outline: none;
    border-color: var(--brand-viridian);
    box-shadow: 0 0 0 3px var(--brand-viridian-glow);
}

.wf-due-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.wf-step-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    min-width: 24px;
}

.wf-step-status {
    font-size: 0.72rem;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}
.wf-step-status--saving { color: var(--text-muted); }
.wf-step-status--saved  { color: var(--color-success); }
.wf-step-status--error  { color: var(--color-danger); }

.wf-remove-btn {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-danger);
    background: transparent;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.wf-remove-btn:hover {
    background: var(--color-danger);
    color: #ffffff;
}
[data-theme='dark'] .wf-remove-btn {
    color: #cf6679;
    border-color: rgba(207, 102, 121, 0.45);
    background: transparent;
}
[data-theme='dark'] .wf-remove-btn:hover {
    background: rgba(207, 102, 121, 0.18);
    color: #fde8ec;
    border-color: #cf6679;
}

.wf-delete-form { margin: 0; }

.wf-step-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.wf-add-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    padding: 12px 20px;
}

.wf-add-form .wf-step-title {
    flex: 1 1 auto;
    max-width: 340px;
    min-width: 120px;
}

.wf-add-form .wf-step-days {
    flex: 0 0 56px;
}

[data-theme="dark"] .wf-step-number {
    background: #1a3330;
    color: #a7d7c5;
}
[data-theme="dark"] .wf-step-title,
[data-theme="dark"] .wf-step-days {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-main);
}
.wf-add-form .btn-cl-solid {
    flex-shrink: 0;
    white-space: nowrap;
}
.wf-add-row {
    border-top: 1px solid var(--border);
}

/* ── Expandable detail panels ── */
.wf-td-expand {
    width: 32px;
    text-align: center;
}
.wf-expand-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.wf-expand-btn:hover {
    color: var(--brand-viridian);
    background: var(--bg-secondary);
}
.wf-expand-chevron {
    transition: transform 0.2s;
}
.wf-expand-chevron--open {
    transform: rotate(90deg);
}

/* Detail panel row */
.wf-step-detail-cell {
    padding: 0 !important;
}
.wf-step-detail-panel {
    padding: 12px 16px 14px 46px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}
.wf-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 480px;
}
.wf-detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wf-detail-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}
.wf-detail-select {
    font-size: 0.82rem;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-main);
    cursor: pointer;
}
.wf-detail-check-row {
    margin-top: 10px;
}
.wf-detail-check-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--text-main);
    cursor: pointer;
}
.wf-detail-check-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #E24B4A;
}
.wf-critical-icon {
    color: #E24B4A;
}
.wf-detail-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Critical row indicator */
.wf-step-row--critical {
    border-left: 3px solid #E24B4A;
}

/* Mobile */
@media (max-width: 640px) {
    .wf-step-detail-panel {
        padding: 10px 12px 12px 12px;
    }
    .wf-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SECTION 41 – SHARED COMPONENT CLASSES
   GUARD: These extract repeated inline patterns into reusable classes.
   Check templates listed in comments before modifying.
   ============================================================ */

/* Settings page grid — used in: accounts/settings.html */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
.settings-grid .settings-card {
    margin-bottom: 0;
}
.settings-grid--full {
    grid-column: 1 / -1;
}

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

/* Scroll panels — used in: contact_detail, matter_list, matter_detail,
   invoice_list, activity_list */
.cl-scroll-panel {
    max-height: 620px;
    overflow-y: auto;
}
#contact-matters-scroll-area.cl-scroll-panel {
    max-height: min(70vh, 720px);
}
.cl-scroll-panel--tall {
    max-height: 700px;
}

/* Search result dropdowns — generalised from .assigned-to-results.
   Used in: matter_list (client + assignee), invoice_list (client) */
.cl-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    display: none;
}
.cl-search-dropdown.visible { display: block; }

/* Search input wrappers */
.cl-search-wrap {
    position: relative;
}

/* Shared option row styling for in-page search dropdowns */
.search-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-main);
    text-align: left;
    padding: 8px 12px;
    cursor: pointer;
}
.search-option:hover,
.search-option.active {
    background: var(--bg-secondary);
}
.search-option-name {
    font-weight: 600;
}
.search-option-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 6px;
}

/* Dashboard stat cards — light: solid viridian + vivid icons; dark: pastel gradients — used in: dashboard.html */
.stat-card--trust {
    background: #005a52;
}
.stat-card--paid {
    background: #005a52;
}
.stat-card--due {
    background: #005a52;
}
.stat-card--matters {
    background: #005a52;
}

.stat-card--trust .stat-card-icon {
    color: #378add;
    fill: #378add;
}
.stat-card--paid .stat-card-icon {
    color: #639922;
    fill: #639922;
}
.stat-card--due .stat-card-icon {
    color: #e24b4a;
    fill: #e24b4a;
}
.stat-card--matters .stat-card-icon {
    color: #ba7517;
    fill: #ba7517;
}

[data-theme='dark'] .stat-card--trust {
    background: linear-gradient(135deg, #b3d4f5 0%, #007066 100%);
}
[data-theme='dark'] .stat-card--paid {
    background: linear-gradient(135deg, #b3e6c8 0%, #007066 100%);
}
[data-theme='dark'] .stat-card--due {
    background: linear-gradient(135deg, #f5b3b3 0%, #007066 100%);
}
[data-theme='dark'] .stat-card--matters {
    background: linear-gradient(135deg, #fde8b3 0%, #007066 100%);
}

[data-theme='dark'] .stat-card--trust .stat-card-icon {
    color: #b3d4f5;
    fill: #b3d4f5;
}
[data-theme='dark'] .stat-card--paid .stat-card-icon {
    color: #b3e6c8;
    fill: #b3e6c8;
}
[data-theme='dark'] .stat-card--due .stat-card-icon {
    color: #f5b3b3;
    fill: #f5b3b3;
}
[data-theme='dark'] .stat-card--matters .stat-card-icon {
    color: #fde8b3;
    fill: #fde8b3;
}

.stat-card--trust .stat-label,
.stat-card--trust .stat-value,
.stat-card--trust .stat-card-icon,
.stat-card--paid .stat-label,
.stat-card--paid .stat-value,
.stat-card--paid .stat-card-icon,
.stat-card--due .stat-label,
.stat-card--due .stat-value,
.stat-card--due .stat-card-icon,
.stat-card--matters .stat-label,
.stat-card--matters .stat-value,
.stat-card--matters .stat-card-icon {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Stat icon wrap shared background */
.stat-icon-wrap--translucent {
    background: rgba(255,255,255,0.12);
}

/* Undo toast — used in: matter_detail.html */
.cl-undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--bg-secondary);
    color: var(--text-main);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    display: none;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    min-width: 280px;
}
.cl-undo-toast.visible { display: flex; }

/* Warning badge — used in: matter_detail.html (Set Fee) */
.badge-circuit-warning {
    background-color: #f59e0b;
    color: white;
}

/* Settings radio options — used in: settings.html */
.settings-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settings-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.settings-radio-option input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--brand-viridian);
}
.settings-radio-title {
    font-weight: 500;
    color: var(--text-main);
}
.settings-radio-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.settings-radio-badge {
    font-size: 0.75rem;
    background: var(--brand-viridian-light);
    color: var(--brand-viridian);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    margin-left: 6px;
    font-weight: 500;
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.report-summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
}
.report-summary-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-main);
}

/* Common back-link pattern in form headers */
.cl-back-link {
    color: var(--brand-viridian);
    font-weight: 500;
    text-decoration: none;
}
.cl-back-link:hover {
    color: var(--brand-viridian-hover);
    text-decoration: underline;
}

/* Wider auth card for firm registration flow */
.login-card--wide {
    max-width: 520px;
}

/* Invitation status badges */
.invite-status {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}
.invite-status--pending {
    background: #dbeafe;
    color: #1e40af;
}
.invite-status--accepted {
    background: #d1fae5;
    color: #065f46;
}
.invite-status--expired {
    background: #fee2e2;
    color: #991b1b;
}
[data-theme='dark'] .invite-status--pending {
    background: #1e3a5f;
    color: #93c5fd;
}
[data-theme='dark'] .invite-status--accepted {
    background: #064e3b;
    color: #6ee7b7;
}
[data-theme='dark'] .invite-status--expired {
    background: #450a0a;
    color: #fca5a5;
}
.two-factor-token-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.two-factor-token-list li {
    font-family: var(--font-mono);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}

/* Calendar cards */
.calendar-event-card {
    max-width: 480px;
}
.calendar-event-form-card {
    max-width: 560px;
}
.details-edit-hidden {
    display: none;
}

/* Logged out page — used in: logged_out.html */
.logged-out-container {
    max-width: 420px;
    margin: 80px auto;
    padding: 40px;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-align: center;
}
.logged-out-container h1.page-header-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 12px;
}
.logged-out-container p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 24px;
}
.logged-out-container a {
    display: inline-block;
    padding: 12px 24px;
    background: var(--brand-viridian);
    color: var(--text-on-dark);
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}
.logged-out-container a:hover {
    background: var(--brand-viridian-hover);
    color: var(--text-on-dark);
}
.logged-out-container .brand {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-viridian);
    text-decoration: none;
    margin-bottom: 24px;
    display: inline-block;
}

/* ============================================================
   SECTION 42 – CONTACT PROFILE (legacy template)
   ⚠️ WARNING: This section contains .invoice-row, .matter-tab, and .activity-row
   which also appear in Sections 24, 26, and 39 with different layout rules.
   Section 42 rules apply to contact_profile.html only.
   Do NOT use these class names on new pages — use the canonical Section 24/26/39 versions.
   Long-term: migrate contact_profile.html to canonical classes and delete this section.

   GUARD: This section exists because contact_profile.html had all styles
   inline. If this template is deprecated in favor of contact_detail.html,
   delete this entire section.
   ============================================================ */

.profile-header {
    margin-bottom: 24px;
}
.profile-header h1.page-header-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}
.profile-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}
.profile-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
}
.profile-tab {
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.profile-tab:hover {
    color: var(--brand-viridian);
}
.profile-tab.active {
    color: var(--brand-viridian);
    border-bottom-color: var(--brand-viridian);
}
.tab-panel {
    display: none;
}
.tab-panel.active {
    display: block;
}
.profile-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow-sm);
    overflow: hidden;
}
.profile-card__section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}
.profile-card__section:last-child {
    border-bottom: none;
}
.profile-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.profile-card__value {
    font-size: 0.95rem;
    color: var(--text-main);
}
.profile-card__value a {
    color: var(--brand-viridian);
    font-weight: 500;
    text-decoration: none;
}
.profile-card__value a:hover {
    text-decoration: underline;
}
.matter-block {
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 16px;
    background: var(--bg-primary);
}
.matter-block:last-child {
    margin-bottom: 0;
}
.matter-block__title {
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 12px;
    font-size: 1rem;
}
.matter-block__title a {
    color: var(--brand-viridian);
    text-decoration: none;
}
.matter-block__title a:hover {
    text-decoration: underline;
}
/* Card-style rows: contact profile only. Do not apply to .cascade-list (activities index)
   or the list link inherits blue-gray activity-item-bg and hides zebra striping. */
.profile-card .activity-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: var(--activity-item-bg);
    border-radius: 6px;
    margin-bottom: 8px;
}
.profile-card .activity-row:last-child {
    margin-bottom: 0;
}
.activity-row__status-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
.activity-row__status-btn:hover {
    border-color: var(--text-muted);
}
.activity-row__status-btn--pending {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
}
.activity-row__status-btn--in-progress {
    background: #fef08a;
    border-color: #eab308;
}
.activity-row__status-btn--completed {
    background: #86efac;
    border-color: #22c55e;
}
.activity-row__type {
    font-size: 0.75rem;
    font-weight: 600;
    color: #3b82f6;
    min-width: 90px;
}
.activity-row__subject {
    font-weight: 500;
    color: var(--text-main);
}
.activity-row__meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.matter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
}
.matter-tab {
    padding: 10px 16px;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 6px;
}
.matter-tab:hover {
    color: var(--brand-viridian);
    background: var(--brand-viridian-light);
}
.matter-tab.active {
    color: var(--brand-viridian);
    background: var(--brand-viridian-light);
}
.matter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.matter-row:last-child {
    border-bottom: none;
}
.invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.invoice-row:last-child {
    border-bottom: none;
}
.payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.payment-row:last-child {
    border-bottom: none;
}
.empty-state {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
}
.empty-state--compact {
    padding: 16px;
    margin: 0;
}
.empty-state--medium {
    padding: 24px;
}
.tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.tab-header__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}
.matter-detail-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}
.matter-detail-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
}
.btn-tab-action {
    display: inline-block;
    padding: 8px 16px;
    background: var(--brand-viridian);
    color: white;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}
.btn-tab-action:hover {
    background: var(--brand-viridian-hover);
    color: white;
}
.btn-edit {
    padding: 8px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}
.btn-edit:hover {
    background: var(--bg-primary);
    border-color: var(--text-muted);
    color: var(--text-main);
}

/* ============================================================
   SECTION 43 – CONTEXTUAL ACTION STRIP
   GUARD: Keep strip + pill styles in this section only.
   Do not add inline styles in templates for strip behavior.
   ============================================================ */

.cl-action-strip {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cl-action-strip__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    white-space: nowrap;
}

.cl-action-strip__pills {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.cl-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-pill);
    border: 1px solid var(--brand-viridian);
    background: transparent;
    color: var(--brand-viridian);
    padding: 5px 12px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cl-action-pill:hover {
    background: var(--brand-viridian);
    border-color: var(--brand-viridian);
    color: #ffffff;
}

button.cl-action-pill {
    font-family: inherit;
    cursor: pointer;
    appearance: none;
}

.cl-action-pill__icon {
    font-size: 14px;
    line-height: 1;
    color: currentColor;
}

/* ============================================================
   SECTION 44 – MATTER ACCORDION (CLIENT HUB)
   GUARD: Matter accordion + sticky matter nav live here only.
   Dark mode: use [data-theme='dark'] where overrides are needed.
   ============================================================ */

.matter-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 9px 12px;
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Matter nav pills — align with contextual strip pill polish (outline idle / viridian active) */
.matter-nav-pill {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.matter-nav-pill:hover:not(.active) {
    background: var(--bg-tertiary);
}

/* Compound selectors beat generic <button> / reboot rules */
.matter-nav button.matter-nav-pill.active,
.matter-nav .matter-nav-pill.active,
button.matter-nav-pill.active {
    background: var(--brand-viridian);
    color: #fff;
    border-color: var(--brand-viridian);
}

.matter-nav button.matter-nav-pill.active:hover,
.matter-nav .matter-nav-pill.active:hover,
button.matter-nav-pill.active:hover {
    background: var(--brand-viridian);
    color: #fff;
    border-color: var(--brand-viridian);
}

[data-theme='dark'] .matter-nav-pill:not(.active) {
    background: var(--card-bg);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme='dark'] .matter-nav-pill:not(.active):hover {
    background: var(--bg-tertiary);
}

[data-theme='dark'] .matter-nav button.matter-nav-pill.active,
[data-theme='dark'] .matter-nav .matter-nav-pill.active,
[data-theme='dark'] button.matter-nav-pill.active {
    background: var(--brand-viridian);
    color: #fff;
    border-color: var(--brand-viridian);
}

[data-theme='dark'] .matter-nav button.matter-nav-pill.active:hover,
[data-theme='dark'] .matter-nav .matter-nav-pill.active:hover,
[data-theme='dark'] button.matter-nav-pill.active:hover {
    background: var(--brand-viridian);
    color: #fff;
    border-color: var(--brand-viridian);
}

.matter-accordion-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
    padding: 0.9rem 1rem;
    gap: 0.65rem;
}

.matter-accordion-row:hover {
    background: rgba(0, 112, 102, 0.06);
}

[data-theme='dark'] .matter-accordion-row:hover {
    background: rgba(0, 112, 102, 0.12);
}

.matter-accordion-body {
    display: none;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.02);
    padding: 0.85rem 1rem 1rem;
}

[data-theme='dark'] .matter-accordion-body {
    background: rgba(255, 255, 255, 0.02);
}

.matter-accordion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.65rem;
}

.matter-chevron {
    transition: transform 0.2s ease;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.matter-chevron.open {
    transform: rotate(90deg);
}

progress.matter-progress-bar {
    display: block;
    width: 100%;
    height: 4px;
    border: none;
    border-radius: 2px;
    overflow: hidden;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
}

progress.matter-progress-bar::-webkit-progress-bar {
    background: var(--border);
    border-radius: 2px;
}

progress.matter-progress-bar::-webkit-progress-value {
    background: var(--brand-viridian);
    border-radius: 2px;
    transition: width 0.2s ease;
}

progress.matter-progress-bar::-moz-progress-bar {
    background: var(--brand-viridian);
    border-radius: 2px;
}

.matter-inline-pill {
    font-size: 0.75rem;
}

.matter-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.matter-activity-dot--done {
    background: #198754;
}

.matter-activity-dot--progress {
    background: #ffc107;
}

.matter-activity-dot--pending {
    background: #adb5bd;
}

[data-theme='dark'] .matter-activity-dot--pending {
    background: #6c757d;
}

.matter-activity-preview {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.matter-activity-row {
    padding: 0.7rem 0 0.85rem;
    border-top: none;
    border-bottom: 1px solid var(--border);
}

.matter-activity-preview .matter-activity-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.matter-activity-meta {
    font-size: 0.8rem;
    line-height: 1.4;
    margin-top: 0.35rem;
    color: var(--text-muted);
}

.matter-accordion-body .trix-content {
    margin-top: 0.4rem;
}

.matter-task-count {
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

.matter-activity-empty {
    font-size: 0.875rem;
    padding-top: 0.25rem;
}

/* ============================================================
   SECTION 44A – MATTER CARDS (list + client hub matters tab)
   All card rules scoped under .matter-card. Filter row lives inside
   #tab-matters .cl-section-card between .cl-section-header and .card-body.
   ============================================================ */

#tab-matters .cl-section-card > .contact-matter-filter-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 10px 16px 12px;
    margin: 0;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
    -webkit-overflow-scrolling: touch;
}

#tab-matters .cl-section-card > .contact-matter-filter-row::-webkit-scrollbar {
    display: none;
}

#tab-matters .contact-matter-filter-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--color-border-tertiary, var(--border));
    background: var(--color-background-secondary, var(--bg-secondary));
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#tab-matters .contact-matter-filter-pill.active {
    background: #007066;
    border-color: #007066;
    color: #fff;
}

.matter-list-card-item {
    background: transparent;
}

.matter-card {
    position: relative;
    font-family: 'DM Sans', system-ui, sans-serif;
    border: 1px solid var(--border);
    box-sizing: border-box;
}

/* Client hub Matters tab: rows stack flush under filter, like invoice table body */
#tab-matters .cl-section-card > .card-body > .matter-card {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
}

#tab-matters .cl-section-card > .card-body > .matter-card:last-child {
    border-bottom: none;
}

/* Same stacking as direct .card-body children — cards now live in #contact-matters-cards-wrap */
#tab-matters .cl-section-card > .card-body > #contact-matters-cards-wrap > .matter-card {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
}

#tab-matters .cl-section-card > .card-body > #contact-matters-cards-wrap > .matter-card:last-child {
    border-bottom: none;
}

.matter-card__inner {
    position: relative;
    padding: 14px 16px 12px;
}

.matter-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.matter-card__title-link {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: #007066;
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.matter-card__title-link:hover {
    text-decoration: underline;
    color: #007066;
}

.matter-title-edit-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.matter-title-input {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: #007066;
    background: transparent;
    border: none;
    border-bottom: 1px solid #007066;
    outline: none;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.matter-title-error {
    font-size: 11px;
    color: var(--color-text-danger, var(--color-danger));
    margin-top: 2px;
    display: block;
}

.matter-card__menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.matter-card__kebab {
    width: 32px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
}

.matter-card__kebab::before {
    content: '\22EE';
    display: block;
    line-height: 28px;
}

.matter-card__kebab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.matter-card__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 140px;
    padding: 4px 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 30;
}

.matter-card__dropdown[hidden] {
    display: none;
}

.matter-card__dropdown-item {
    display: block;
    padding: 8px 14px;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-decoration: none;
}

.matter-card__dropdown-item:hover {
    background: var(--bg-tertiary);
}

button.matter-card__dropdown-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

/* Matter delete confirm — reuses .cl-calendar-modal; backdrop is fixed (project pattern), dialog is not */
.cl-matter-delete-modal-backdrop {
    z-index: 1070;
}

.cl-matter-delete-modal .cl-matter-delete-modal__footer {
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.cl-matter-delete-modal__message {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.45;
}

.cl-matter-delete-modal__message strong {
    font-weight: 600;
}

.cl-matter-delete-modal__error {
    font-size: 0.82rem;
    color: var(--text-danger, #dc3545);
    margin: 10px 0 0;
}

/* Soft-deleted matters trash panel (contact detail) */
.matter-trash-panel {
    border-top: 1px solid var(--border);
    padding: 12px 16px 14px;
    background: var(--color-background-secondary, var(--bg-secondary));
}

.matter-trash-panel__loading {
    margin-bottom: 0.5rem;
}

.matter-trash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.matter-trash-row:last-child {
    border-bottom: none;
}

.matter-trash-title {
    font-size: 14px;
    color: var(--color-text-secondary, var(--text-secondary));
    text-decoration: line-through;
    min-width: 0;
    word-break: break-word;
}

.matter-trash-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.matter-trash-date {
    font-size: 12px;
    color: var(--color-text-tertiary, var(--text-muted));
    white-space: nowrap;
}

.matter-trash-restore {
    font-size: 13px;
}

.matter-card__dropdown-item--danger {
    color: #b42318;
}

[data-theme='dark'] .matter-card__dropdown-item--danger {
    color: #f87171;
}

.matter-card__progress {
    margin-bottom: 12px;
}

.matter-card__progress-labels {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.3;
}

.matter-card__progress-left {
    color: var(--text-muted);
}

.matter-card__progress-left--muted {
    color: var(--color-text-tertiary, var(--text-muted));
}

.matter-card__progress-right {
    font-weight: 500;
    color: var(--text-muted);
}

.matter-card__progress-right--muted {
    color: var(--color-text-tertiary, var(--text-muted));
}

.matter-card__track {
    height: 5px;
    border-radius: 4px;
    background: var(--border);
    overflow: hidden;
}

.matter-card__track--empty {
    background: var(--color-background-secondary, var(--bg-secondary));
}

.matter-card__fill {
    height: 100%;
    border-radius: 4px;
    background: #007066;
    transition: width 0.2s ease;
}

.matter-card__fill--empty {
    width: 0;
    background: transparent;
}

.matter-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}

.matter-card__assignee {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.matter-card__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #007066;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.matter-card__assignee-name {
    color: var(--color-text-secondary, var(--text-muted));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matter-card__unassigned {
    color: var(--color-text-tertiary, var(--text-muted));
}

.matter-card__activity {
    flex-shrink: 0;
    text-align: right;
    color: var(--text-muted);
    font-size: 12px;
}

.matter-card__activity--empty {
    color: var(--color-text-tertiary, var(--text-muted));
}

.cl-action-pill--muted {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--border);
    color: var(--text-muted);
}

/* Matter activity drill-in (contact hub Matters tab) — Section 44A */
.cl-section-header .cl-section-header__breadcrumb {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 2px;
    margin: 0;
    min-width: 0;
    font-size: 1.05rem;
}

.cl-section-header__breadcrumb-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #ffffff;
    opacity: 0.65;
    cursor: pointer;
    text-decoration: none;
}

.cl-section-header__breadcrumb-link:hover {
    opacity: 1;
}

.cl-section-header__breadcrumb-sep {
    color: rgba(255, 255, 255, 0.45);
    margin: 0 2px;
    font-weight: 400;
}

.cl-section-header__breadcrumb-current {
    color: #ffffff;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(100%, 42vw);
}

.matter-activity-feed {
    padding: 0;
}

.matter-activity-card {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--color-border-tertiary, var(--border));
}

.matter-activity-feed .matter-activity-card:last-child {
    border-bottom: none;
}

.matter-activity-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--color-background-secondary, var(--bg-secondary));
    border: 0.5px solid var(--color-border-secondary, var(--border));
    display: flex;
    align-items: center;
    justify-content: center;
}

.matter-activity-card__icon svg {
    display: block;
}

.matter-activity-card__main {
    flex: 1;
    min-width: 0;
}

.matter-activity-card__top {
    position: relative;
    padding-right: 56px;
}

.matter-activity-card__title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-primary);
    display: block;
}

.matter-activity-card__description {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-secondary, var(--text-muted));
    margin: 4px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matter-activity-card__actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 2px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.matter-activity-card:hover .matter-activity-card__actions,
.matter-activity-card:focus-within .matter-activity-card__actions {
    opacity: 1;
}

.matter-activity-card__action {
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary, var(--text-muted));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85rem;
}

.matter-activity-card__action:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

[data-theme='dark'] .matter-activity-card__action:hover {
    background: rgba(255, 255, 255, 0.08);
}

.matter-activity-card__action--delete {
    color: var(--color-text-danger, var(--color-danger, #c0392b));
}

.matter-activity-card__action--delete:hover {
    color: var(--color-text-danger, var(--color-danger, #c0392b));
}

.matter-activity-card__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.matter-activity-card__assignee {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.matter-activity-card__avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-viridian, #007066);
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.matter-activity-card__assignee-name {
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matter-activity-card__assignee-name--empty {
    color: var(--color-text-tertiary, var(--text-muted));
}

.matter-activity-card__date {
    font-size: 11px;
    color: var(--color-text-tertiary, var(--text-muted));
    flex-shrink: 0;
}

/* ============================================================
   SECTION 45 – TRIX EDITOR
   GUARD: Keep all Trix and notification bell styles here.
   ============================================================ */

.cl-trix-editor {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
}

.cl-trix-editor.trix-content {
    background: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-height: 140px;
    padding: 12px 14px;
}

.trix-content {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
}

.trix-content p {
    margin-bottom: 0.55rem;
}

trix-toolbar .trix-button-group--file-tools {
    display: none;
}

trix-toolbar .trix-button--icon-heading-1,
trix-toolbar .trix-button--icon-code,
trix-toolbar .trix-button--icon-quote {
    display: none;
}

[data-theme='dark'] .trix-content,
[data-theme='dark'] trix-editor {
    background: var(--card-bg);
    color: var(--text-main);
    border-color: var(--border);
}

[data-theme='dark'] trix-toolbar {
    background: var(--bg-secondary);
    border-color: var(--border);
}

.notification-badge {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 0.65rem;
    line-height: 16px;
    font-weight: 700;
    padding: 0 4px;
}

.notification-menu {
    width: 340px;
    max-width: 92vw;
}

.notification-item {
    white-space: normal;
}

.notification-item--unread {
    border-left: 3px solid var(--brand-viridian);
    background: rgba(0, 112, 102, 0.08);
}

.notification-list-item .btn {
    color: inherit;
}

.activity-outcome-badge {
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
}

/* ============================================================
   SECTION 46 – Invoice Status Badges
   Separate color system from activity status badges.
   ============================================================ */
.invoice-details-card td a {
    color: #007066;
    text-decoration: underline;
}

[data-theme='dark'] .invoice-details-card td a {
    color: #4dd4c8;
    text-decoration: underline;
}

.badge-invoice {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
}

.badge-invoice-created {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.badge-invoice-sent {
    background: #E6F1FB;
    color: #0C447C;
}

.badge-invoice-unpaid {
    background: #FAEEDA;
    color: #633806;
}

.badge-invoice-overdue {
    background: #FCEBEB;
    color: #791F1F;
}

.badge-invoice-paid {
    background: #E1F5EE;
    color: #085041;
}

[data-theme='dark'] .badge-invoice-created {
    background: #444441;
    color: #D3D1C7;
}

[data-theme='dark'] .badge-invoice-sent {
    background: #0C447C;
    color: #B5D4F4;
}

[data-theme='dark'] .badge-invoice-unpaid {
    background: #633806;
    color: #FAC775;
}

[data-theme='dark'] .badge-invoice-overdue {
    background: #791F1F;
    color: #F7C1C1;
}

[data-theme='dark'] .badge-invoice-paid {
    background: #085041;
    color: #9FE1CB;
}

/* BLOCK 47 – FULLCALENDAR */

/* ── Page layout ── */
.cl-calendar-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ── Header ── */
.cl-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.cl-calendar-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cl-calendar-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cl-calendar-title {
  font-size: 1.5rem;
  margin: 0;
  white-space: nowrap;
  min-width: 220px;
}

/* ── Navigation buttons ── */
.cl-calendar-nav {
  display: flex;
  gap: 4px;
}
.cl-calendar-nav__btn {
  padding: 5px 10px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.cl-calendar-nav__btn:hover {
  background: var(--bg-secondary);
  color: var(--text-main);
}
.cl-calendar-nav__btn--today {
  font-weight: 500;
  color: var(--text-main);
  background: var(--bg-secondary);
}

/* ── View switcher ── */
.cl-calendar-view-switcher {
  display: flex;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
}
.cl-calendar-view-btn {
  padding: 5px 14px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.cl-calendar-view-btn.active {
  background: var(--brand-viridian);
  color: #fff;
}
.cl-calendar-view-btn:hover:not(.active) {
  background: var(--bg-primary);
  color: var(--text-main);
}

/* ── Add button ── */
.cl-calendar-add-btn {
  white-space: nowrap;
}

/* ── Filters bar ── */
.cl-calendar-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.cl-calendar-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cl-calendar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.cl-calendar-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.cl-calendar-assignee-select {
  max-width: 220px;
  font-size: 0.85rem;
}

/* ── FullCalendar overrides (theme alignment) ── */
#fullCalendar {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.fc {
  --fc-border-color: var(--border);
  --fc-today-bg-color: rgba(0, 112, 102, 0.06);
  --fc-event-border-color: transparent;
  --fc-page-bg-color: var(--bg-primary);
  --fc-neutral-bg-color: var(--bg-secondary);
  --fc-list-event-hover-bg-color: var(--bg-secondary);
}
.fc .fc-daygrid-day-number {
  font-size: 0.85rem;
  color: var(--text-main);
  padding: 6px 8px;
}
.fc .fc-col-header-cell-cushion {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 0;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  background: var(--brand-viridian);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.fc .fc-event {
  border-radius: 4px;
  font-size: 0.78rem;
  padding: 1px 5px;
  cursor: pointer;
  border: none;
}
.fc .fc-daygrid-event-dot {
  display: none;
}
.fc .fc-event-title {
  font-weight: 400;
}
.fc .fc-daygrid-more-link {
  color: var(--brand-viridian);
  font-size: 0.78rem;
  font-weight: 500;
}
.fc .fc-timegrid-slot-label-cushion {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.fc .fc-list-day-cushion {
  background: var(--bg-secondary);
}
.fc .fc-list-event-title a {
  color: var(--text-main);
}
.fc .fc-scrollgrid {
  border: none;
}

/* FullCalendar built-in toolbar (disabled on our page; defensive if enabled later) */
.fc .fc-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}
.fc .fc-toolbar-chunk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* ── Event detail popover ── */
.cl-calendar-popover-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1050;
  align-items: center;
  justify-content: center;
}
.cl-calendar-popover-backdrop.show {
  display: flex;
}
.cl-calendar-popover {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.cl-calendar-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cl-calendar-popover__type-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-block;
}
.cl-calendar-popover__close {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.cl-calendar-popover__close:hover {
  color: var(--text-main);
}
.cl-calendar-popover__title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-main);
  margin: 0 0 4px;
}
.cl-calendar-popover__meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.cl-calendar-popover__row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.cl-calendar-popover__label {
  color: var(--text-muted);
  min-width: 90px;
  flex-shrink: 0;
}
.cl-calendar-popover__value {
  color: var(--text-main);
}
.cl-calendar-popover__link {
  color: var(--brand-viridian);
  text-decoration: none;
}
.cl-calendar-popover__link:hover {
  text-decoration: underline;
}

/* ── Dark mode overrides ── */
[data-theme='dark'] #fullCalendar {
  background: var(--bg-secondary);
}
[data-theme='dark'] .cl-calendar-popover {
  background: var(--bg-secondary);
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ── Mobile: ≤ 768px (tablet portrait + phones) ── */
@media (max-width: 768px) {
  .cl-calendar-page {
    padding: 0 0.5rem;
  }

  /* Header stacks vertically */
  .cl-calendar-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cl-calendar-header__left {
    justify-content: space-between;
  }
  /* Row 2: view switcher wraps; + Event full width so it is never clipped */
  .cl-calendar-header__right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cl-calendar-title {
    font-size: 1.2rem;
    min-width: unset;
  }

  /* View switcher: wrap chips; do not force one row (was flex:1 on each btn → overflow) */
  .cl-calendar-view-switcher {
    flex: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    box-sizing: border-box;
  }
  .cl-calendar-view-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
  }

  .cl-calendar-add-btn {
    padding: 6px 12px;
    font-size: 0.82rem;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    align-self: stretch;
  }

  /* If FullCalendar header toolbar is ever shown inside #fullCalendar */
  #fullCalendar .fc .fc-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 6px;
  }
  #fullCalendar .fc .fc-toolbar-chunk {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Filters stack */
  .cl-calendar-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cl-calendar-legend {
    justify-content: flex-start;
    gap: 10px;
  }
  .cl-calendar-legend__item {
    font-size: 0.72rem;
  }
  .cl-calendar-assignee-search {
    max-width: 100%;
  }

  /* Calendar grid: tighter cells */
  .fc .fc-daygrid-day-number {
    font-size: 0.75rem;
    padding: 4px 6px;
  }
  .fc .fc-col-header-cell-cushion {
    font-size: 0.7rem;
    padding: 6px 0;
  }
  .fc .fc-event {
    font-size: 0.68rem;
    padding: 1px 3px;
  }
  .fc .fc-daygrid-more-link {
    font-size: 0.68rem;
  }
  .fc .fc-daygrid-day {
    min-height: 60px;
  }

  /* Week/day view: tighter time slots */
  .fc .fc-timegrid-slot {
    height: 2.5em;
  }
  .fc .fc-timegrid-slot-label-cushion {
    font-size: 0.68rem;
  }

  /* Agenda/list view: readable rows */
  .fc .fc-list-event-title {
    font-size: 0.82rem;
  }
  .fc .fc-list-day-cushion {
    font-size: 0.78rem;
  }

  /* Popover: full width on mobile */
  .cl-calendar-popover {
    width: 95%;
    max-width: none;
    margin: 0 auto;
  }

  /* Modal: full width on mobile */
  .cl-calendar-modal {
    width: 95%;
    max-width: none;
    max-height: 90vh;
  }
  .cl-calendar-modal__row-2col {
    grid-template-columns: 1fr;
  }

  /* Today view: tighter spacing */
  .cl-today-view {
    max-width: 100%;
  }
  .cl-today-item {
    gap: 8px;
    padding: 12px 0;
  }
  .cl-today-item__time {
    min-width: 50px;
    font-size: 0.72rem;
  }
  .cl-today-item__title {
    font-size: 0.82rem;
  }
  .cl-today-item__matter {
    font-size: 0.72rem;
  }
}

/* ── Small phones: ≤ 480px ── */
@media (max-width: 480px) {
  /* Switch to day/agenda view by default hint */
  .cl-calendar-header__left {
    flex-wrap: wrap;
  }
  .cl-calendar-nav__btn {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  .cl-calendar-nav__btn--today {
    font-size: 0.75rem;
  }

  /* Calendar day cells: minimal */
  .fc .fc-daygrid-day {
    min-height: 48px;
  }
  .fc .fc-daygrid-day-number {
    font-size: 0.7rem;
    padding: 2px 4px;
  }
  .fc .fc-event {
    font-size: 0.62rem;
    padding: 0 2px;
  }
  .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
  }

  /* Day names: abbreviate */
  .fc .fc-col-header-cell-cushion {
    font-size: 0.62rem;
    letter-spacing: 0;
  }

  /* Popover + modal: edge to edge */
  .cl-calendar-popover,
  .cl-calendar-modal {
    width: 98%;
    border-radius: 8px;
  }

  /* Today view header */
  .cl-today-view__date {
    font-size: 1.1rem;
  }
  .cl-today-view__summary {
    font-size: 0.78rem;
  }
}

/* ── Today view ── */
#fullCalendar.cl-calendar-main--hidden {
  display: none !important;
}
#todayView {
  display: none;
}
#todayView.cl-today-view--active {
  display: block;
}
.cl-today-view {
  max-width: 640px;
}
.cl-today-view__header {
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.cl-today-view__day {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.cl-today-view__date {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text-main);
}
.cl-today-view__summary {
  font-size: 0.85rem;
  color: var(--brand-viridian);
  margin-top: 4px;
}
.cl-today-view__toggle {
  margin-bottom: 12px;
}
.cl-today-view__mine-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.cl-today-view__list {
  display: flex;
  flex-direction: column;
}
.cl-today-view__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
  font-size: 0.9rem;
  display: none;
}
.cl-today-view__empty.is-visible {
  display: block;
}

/* ── Today item row ── */
.cl-today-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.1s;
}
.cl-today-item:hover {
  background: var(--bg-secondary);
}
.cl-today-item__time {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 60px;
  padding-top: 2px;
  flex-shrink: 0;
}
.cl-today-item__body {
  flex: 1;
  min-width: 0;
}
.cl-today-item__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cl-today-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--cl-dot-color, var(--brand-viridian));
}
.cl-today-item__title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-today-item__matter {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
  margin-left: 16px;
}
.cl-today-item__badge {
  flex-shrink: 0;
}
.cl-today-item__status {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  white-space: nowrap;
}

.cl-calendar-popover__header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cl-calendar-popover__edit {
  background: none;
  border: none;
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.cl-calendar-popover__edit:hover {
  color: var(--brand-viridian);
  background: var(--bg-secondary);
}

/* ── Assignee search ── */
.cl-calendar-assignee-search {
  position: relative;
  max-width: 240px;
}
.cl-calendar-assignee-input {
  font-size: 0.85rem;
  padding-right: 28px;
}
.cl-calendar-assignee-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: none;
}
.cl-calendar-assignee-clear.is-visible {
  display: block;
}
.cl-calendar-assignee-clear:hover {
  color: var(--text-main);
}
.cl-calendar-assignee-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cl-calendar-assignee-dropdown.show {
  display: block;
}
.cl-calendar-assignee-option {
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.1s;
}
.cl-calendar-assignee-option:hover {
  background: var(--bg-secondary);
}
[data-theme='dark'] .cl-calendar-assignee-dropdown {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Create/Edit modal ── */
.cl-calendar-modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1060;
  align-items: center;
  justify-content: center;
}
.cl-calendar-modal-backdrop.show {
  display: flex;
}
.cl-calendar-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.cl-calendar-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}
.cl-calendar-modal__title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-main);
  margin: 0;
}
.cl-calendar-modal__body {
  padding: 16px 20px;
}
.cl-calendar-modal__field {
  margin-bottom: 14px;
}
.cl-calendar-modal__label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}
.cl-calendar-modal__check-label {
  font-size: 0.85rem;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.cl-calendar-modal__value {
  font-size: 0.9rem;
  color: var(--text-main);
  padding: 4px 0;
}
.cl-calendar-modal__row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cl-calendar-modal__activity-fields.is-hidden {
  display: none;
}
.cl-calendar-modal__error {
  font-size: 0.82rem;
  color: var(--text-danger, #dc3545);
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(220, 53, 69, 0.06);
  border-radius: 4px;
  display: none;
}
.cl-calendar-modal__error.is-visible {
  display: block;
}
.cl-calendar-modal__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}
.cl-calendar-modal__delete {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-danger, #dc3545);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.15s;
  display: none;
}
.cl-calendar-modal__delete.is-visible {
  display: inline-block;
}
.cl-calendar-modal__delete:hover {
  background: rgba(220, 53, 69, 0.06);
}
[data-theme='dark'] .cl-calendar-modal {
  background: var(--bg-secondary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ── Deadline button ── */
.cl-calendar-add-deadline-btn {
  white-space: nowrap;
}

/* ── Today view: deadline alert rows ── */
.cl-today-item[data-urgency="overdue"] .cl-today-item__time,
.cl-today-item[data-urgency="critical"] .cl-today-item__time {
  color: #A32D2D;
  font-weight: 500;
}
.cl-today-item[data-urgency="overdue"] {
  background: rgba(226, 75, 74, 0.04);
}
[data-theme='dark'] .cl-today-item[data-urgency="overdue"] {
  background: rgba(226, 75, 74, 0.12);
}

/* ── Matter search (deadline modal) ── */
.cl-matter-search {
  position: relative;
}
.cl-matter-search .cl-input {
  padding-right: 2rem;
}
.cl-matter-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  z-index: 2;
}
.cl-matter-search__clear:hover {
  color: var(--text-main);
}
.cl-matter-search__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cl-matter-search__dropdown.show {
  display: block;
}
.cl-matter-search__contact-header {
  padding: 6px 12px 2px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cl-matter-search__option {
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.1s;
}
.cl-matter-search__option:hover {
  background: var(--bg-secondary);
}
.cl-matter-search__option--indented {
  padding-left: 24px;
}
.cl-matter-search__empty {
  padding: 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}
.cl-matter-search__selected {
  font-size: 0.82rem;
  color: var(--brand-viridian);
  margin-top: 4px;
}
[data-theme='dark'] .cl-matter-search__dropdown {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Touch-friendly targets ── */
.fc .fc-event {
  min-height: 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cl-calendar-nav__btn {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cl-calendar-view-btn {
  min-height: 36px;
}
.cl-today-item {
  -webkit-tap-highlight-color: transparent;
}
.cl-calendar-popover__edit,
.cl-calendar-popover__close {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.is-hidden {
  display: none !important;
}

/* --- Template cleanup: former inline styles --- */
.navbar-viridian .firm-switcher-dropdown > .dropdown-toggle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
}
.navbar-viridian .firm-name-text {
  color: rgba(255, 255, 255, 0.7);
}

.progress.cl-progress-sm {
  height: 10px;
}

.badge.badge-milestone-brand {
  background-color: var(--brand-viridian);
  color: #fff;
}

.cl-btn-trash-inline {
  font-size: 0.75rem;
  padding: 2px 8px;
}

#add-activity-form.cl-add-activity-inline {
  display: none;
  background: rgba(0, 112, 102, 0.04);
}
#add-activity-form.cl-add-activity-inline.is-open {
  display: block;
}

.activity-type-icon {
  font-size: 1.3rem;
}

.badge-activity-type-meta {
  font-size: 0.7rem;
}

.anchor-btn--outline {
  background: transparent !important;
  border: 1px solid #dee2e6;
}
.anchor-btn--anchored {
  background: var(--brand-viridian) !important;
  border-color: transparent !important;
}

.anchor-milestone-cue {
  font-size: 0.75rem;
}

.anchor-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 180px;
  padding: 8px 0;
}
.anchor-dropdown.is-open {
  display: block;
}

.anchor-dropdown-heading {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

button.anchor-milestone-option {
  color: var(--text-main);
}

.activity-edit-mode {
  display: none;
}
.activity-card.activity-card--editing .activity-view-mode {
  display: none !important;
}
.activity-card.activity-card--editing .activity-edit-mode {
  display: block !important;
}

.modal-header.modal-header-danger {
  background: #dc3545;
  color: #fff;
}
.modal-header.modal-header-danger .modal-title {
  color: #fff;
}

.anchor-label-inline {
  font-size: 0.75rem;
  margin-left: 4px;
}

.cl-calendar-legend__dot--task {
  background: #007066;
}
.cl-calendar-legend__dot--court {
  background: #d85a30;
}
.cl-calendar-legend__dot--comm {
  background: #378add;
}
.cl-calendar-legend__dot--event {
  background: #639922;
}
.cl-calendar-legend__dot--critical {
  background: #e24b4a;
}

.cl-calendar-event-star {
  font-size: 0.65rem;
}

.cl-system-admin-h2 {
  font-size: 1rem;
  font-weight: 500;
}

.job-status-cell-clip {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* System admin — background jobs (/system-admin/jobs/) */
.cl-q-scheduled-func,
.cl-q-history-func {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #007066;
}

.cl-q-cluster-hint {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.wf-step-detail-row {
  display: none;
}
.wf-step-detail-row.is-open {
  display: table-row;
}

.wf-inline-days {
  max-width: 80px;
}

/* BLOCK 48 – MOBILE NAVBAR */

/* ── Sub-nav horizontal scroll, compact top bar, QUICK strip scroll ── */
@media (max-width: 768px) {

  /* Fixed app chrome on small screens (offsets: JS sets --cl-viridian-height / --cl-sub-nav-height on <html>) */
  html.nav-sticky-both .navbar-viridian,
  html.nav-sticky-top .navbar-viridian,
  html.nav-sticky-none .navbar-viridian {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1031;
  }
  html.nav-sticky-both .navbar-sub.cl-sub-nav,
  html.nav-sticky-top .navbar-sub.cl-sub-nav,
  html.nav-sticky-none .navbar-sub.cl-sub-nav {
    position: fixed;
    top: var(--cl-viridian-height, 112px);
    left: 0;
    right: 0;
    z-index: 1030;
  }
  body {
    padding-top: calc(var(--cl-viridian-height, 112px) + var(--cl-sub-nav-height, 38px));
  }

  .navbar-viridian > .container,
  .navbar-viridian > .container-fluid {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  /* Sub-nav is fixed (above); horizontal scroll on inner .cl-sub-nav-scroll only
     (overflow on the nav would break sticky/fixed stacking for descendants). */
  .navbar-sub,
  .navbar-expand.navbar-sub,
  .cl-sub-nav {
    flex-wrap: nowrap !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    max-width: 100%;
    min-width: 0;
  }

  .cl-sub-nav-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE / legacy Edge */
    max-width: 100%;
    min-width: 0;
  }
  .cl-sub-nav-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Chromium Edge */
  }

  .navbar-sub .container-fluid,
  .cl-sub-nav .container-fluid {
    max-width: 100%;
    min-width: 0;
  }

  /* Main app nav links row: width must not be forced to 100% or items shrink and clip */
  .navbar-viridian ~ nav.cl-sub-nav .navbar-nav,
  .navbar-sub .navbar-nav,
  .navbar-sub .nav,
  .cl-sub-nav .navbar-nav {
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none;
    min-width: min-content;
    justify-content: center !important;
    gap: 2px;
  }
  .navbar-sub .nav-link,
  .cl-sub-nav .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 0.82rem;
    scroll-snap-align: start;
  }

  .navbar-sub .navbar-nav .nav-link:first-child,
  .cl-sub-nav .navbar-nav .nav-link:first-child {
    margin-left: 0;
    padding-left: 12px;
  }

  /* QUICK strip: horizontal scroll on small screens (show all pills) */
  .cl-action-strip,
  #action-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 12px;
    padding-right: 12px;
  }
  .cl-action-strip::-webkit-scrollbar,
  #action-strip::-webkit-scrollbar {
    display: none;
  }
  .cl-action-strip__label {
    flex-shrink: 0;
  }
  .cl-action-strip__pills {
    flex-wrap: nowrap;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .cl-action-strip__pills::-webkit-scrollbar {
    display: none;
  }

  /* Navbar: compact layout */
  .navbar-viridian {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Brand: smaller on mobile */
  .navbar-viridian .navbar-brand {
    font-size: 0.95rem;
    padding: 0;
  }

  /* Search bar: full width below brand row */
  .navbar-viridian > .container-fluid > .flex-grow-1 {
    order: 10;
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0;
  }
  .navbar-viridian .global-search-wrap {
    width: 100%;
    max-width: 100%;
    margin: 6px 0 2px;
  }
  .navbar-viridian #global-search-input.search-pill,
  .navbar-viridian .search-pill {
    width: 100%;
    font-size: 0.85rem;
    padding: 6px 12px 6px 2.5rem;
  }

  /* Dark mode toggle: compact */
  .navbar-viridian #theme-toggle.theme-toggle {
    padding: 0.35rem;
  }
  .navbar-viridian #theme-toggle.theme-toggle svg {
    width: 1rem;
    height: 1rem;
  }

  /* Notification bell: compact (second .theme-toggle in bar) */
  .navbar-viridian .dropdown .theme-toggle .bi-bell {
    font-size: 1rem;
  }

  /* User avatar: smaller */
  .navbar-viridian .avatar-circle {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }

  /* Firm name: hide on mobile for non-superusers (text span) */
  .navbar-viridian .firm-name-text {
    display: none !important;
  }

  /* Superuser firm switcher: full-width row inside viridian (template: .d-none.d-md-block on dropdown) */
  .navbar-viridian > .container-fluid > .cl-firm-switcher-mobile {
    flex-basis: 100%;
    max-width: 100%;
  }
  .navbar-viridian .cl-firm-switcher-mobile {
    margin-top: 2px;
    padding: 6px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(0, 90, 82, 0.15) 100%
    );
  }
  .navbar-viridian .cl-firm-switcher-mobile__select {
    width: 100%;
    font-size: 0.82rem;
    padding: 6px 28px 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='0.85'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  .navbar-viridian .cl-firm-switcher-mobile__select option {
    color: #1a1a1a;
    background: #fff;
  }
  [data-theme='dark'] .navbar-viridian .cl-firm-switcher-mobile {
    border-top-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(0, 0, 0, 0.12) 100%
    );
  }
  [data-theme='dark'] .navbar-viridian .cl-firm-switcher-mobile__select {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
  }

  /* ── Clients list (/contacts/) — header search + cascade rows ── */
  .cl-section-card.cascade-list > .cl-section-header {
    min-width: 0;
    flex-wrap: nowrap;
    align-items: center;
  }

  .cl-section-card.cascade-list > .cl-section-header > .d-flex:first-child {
    flex: 0 1 auto;
    min-width: 0;
  }

  .cl-section-card.cascade-list > .cl-section-header > .client-list-header-search {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cl-section-card.cascade-list > .cl-section-header #client-search.cascade-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .cl-section-card.cascade-list .client-row {
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.65rem;
    min-width: 0;
  }

  .cl-section-card.cascade-list .client-row .client-avatar {
    flex-shrink: 0;
  }

  .cl-section-card.cascade-list .client-row .client-row__info {
    flex: 1 1 0;
    min-width: 0;
  }

  .client-row__meta {
    word-break: break-all;
  }

  .cl-section-card.cascade-list .client-row .client-row__date {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.95;
  }

  .cl-section-card.cascade-list .client-row .client-row__actions {
    flex-shrink: 0;
    align-self: center;
    min-width: min-content;
  }

  .cl-section-card.cascade-list .client-row .client-row__matter-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ── Contact detail (/contacts/<pk>/) — details tab, tabs strip, activities feed ── */
  #tab-details .detail-value {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Tab strip: <nav class="contact-tabs"> — override Section 24 flex-wrap:wrap for horizontal scroll */
  .contact-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 0.5px solid var(--color-border-tertiary, var(--border));
  }
  .contact-tabs::-webkit-scrollbar {
    display: none;
  }
  .contact-tabs .contact-tab,
  .contact-tabs a {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Activity rows: title + type on first block; status badge on its own row (pairs with title visually) */
  #contact-activity-list
    .list-group-item:not(.contact-activity-status-row)
    .flex-grow-1
    > .d-flex.justify-content-between.align-items-start {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  #contact-activity-list
    .list-group-item:not(.contact-activity-status-row)
    .flex-grow-1
    > .d-flex.justify-content-between.align-items-start
    > div:first-of-type {
    min-width: 0;
  }
  #contact-activity-list
    .list-group-item:not(.contact-activity-status-row)
    .flex-grow-1
    > .d-flex.justify-content-between.align-items-start
    > .badge {
    align-self: flex-start;
    flex-shrink: 0;
  }

  /* Status timeline: inset scroll panel so first-row avatars are not clipped at the left edge */
  .contact-activities-section .contact-activities-scroll {
    padding-left: 6px;
    padding-right: 4px;
    box-sizing: border-box;
  }
  #contact-activity-list.list-group {
    overflow: visible;
  }

  /* Contact detail — Invoices tab: card rows (template: #tab-invoices .invoice-table) */
  #tab-invoices .table-responsive {
    overflow-x: visible;
  }
  #tab-invoices .invoice-table {
    display: block;
    width: 100%;
  }
  #tab-invoices .invoice-table thead {
    display: none;
  }
  #tab-invoices .invoice-table tbody {
    display: block;
    padding-top: 8px;
  }
  #tab-invoices .invoice-table tbody tr:nth-child(odd),
  #tab-invoices .invoice-table tbody tr:nth-child(even) {
    background-color: var(--color-background-primary);
  }
  #tab-invoices .invoice-table tbody tr:hover {
    background-color: var(--color-background-secondary);
  }
  #tab-invoices .invoice-table tbody tr td {
    border: none;
  }
  #tab-invoices .invoice-table tbody tr:has(td[colspan]) {
    display: block;
  }
  #tab-invoices .invoice-table tbody tr:has(td[colspan]) td {
    display: block;
    width: 100%;
    border-bottom: none;
  }
  #tab-invoices .invoice-table tbody tr:not(:has(td[colspan])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "inv amt stat"
      "matter matter matter"
      "date date view";
    gap: 4px;
    row-gap: 6px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 0.5px solid var(--color-border-tertiary, var(--border));
  }
  #tab-invoices .invoice-table tbody tr:not(:has(td[colspan])) td {
    padding: 0;
    vertical-align: middle;
  }
  #tab-invoices .invoice-table tbody tr:not(:has(td[colspan])) td:nth-child(1) {
    grid-area: inv;
    font-weight: 600;
    min-width: 0;
  }
  #tab-invoices .invoice-table tbody tr:not(:has(td[colspan])) td:nth-child(2) {
    grid-area: matter;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.35;
    min-width: 0;
  }
  #tab-invoices .invoice-table tbody tr:not(:has(td[colspan])) td:nth-child(3) {
    grid-area: date;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
  }
  #tab-invoices .invoice-table tbody tr:not(:has(td[colspan])) td:nth-child(4) {
    grid-area: amt;
    font-weight: 600;
    text-align: right;
    justify-self: end;
    white-space: nowrap;
  }
  #tab-invoices .invoice-table tbody tr:not(:has(td[colspan])) td:nth-child(5) {
    grid-area: stat;
    justify-self: end;
  }
  #tab-invoices .invoice-table tbody tr:not(:has(td[colspan])) td:nth-child(6) {
    grid-area: view;
    justify-self: end;
  }

  /* ── Activities: All Activities pills + dashboard Recent Activity filter (templates/activities/activity_list.html, core/dashboard.html) ── */
  .cl-section-card .cl-section-header:has(.activity-feed-filter),
  .cl-section-card.cascade-list > .cl-section-header:has(> .d-flex.flex-wrap .cascade-filter-pill) {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cl-section-card .cl-section-header:has(.activity-feed-filter) .d-flex.flex-wrap,
  .cl-section-card.cascade-list > .cl-section-header:has(> .d-flex.flex-wrap .cascade-filter-pill) > .d-flex.flex-wrap {
    width: 100%;
  }

  /* ── Matters list (/matters/) — section header, filters, rows (templates/matters/matter_list.html) ── */
  /* :has(#matter-search) scopes so .cl-section-card.cascade-list > .cl-section-header { flex-wrap: nowrap } for clients is unchanged */
  .cl-section-card.cascade-list > .cl-section-header:has(#matter-search) {
    flex-wrap: wrap;
    gap: 6px;
  }
  .cl-section-card.cascade-list > .cl-section-header:has(#matter-search) > .d-flex:last-of-type {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cascade-list .cl-section-header .cascade-search-input,
  #matter-search {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .cascade-filter-row {
    gap: 6px;
    row-gap: 6px;
    column-gap: 6px;
  }
  .cascade-filter-row > .d-flex.flex-wrap {
    gap: 6px !important;
    row-gap: 6px;
    column-gap: 6px;
  }

  .cascade-list .matter-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .cascade-list .matter-row .matter-avatar {
    flex-shrink: 0;
  }
  .cascade-list .matter-row > .flex-grow-1 {
    min-width: 0;
    flex: 1;
  }
  .cascade-list .matter-row > .flex-shrink-0.text-end {
    width: 100%;
    text-align: left;
    margin-top: 4px;
  }

  /* ── Workflow editor (templates/workflows/workflow_detail.html; Section 40) ── */
  .wf-step-table .wf-td-title {
    min-width: 0;
    max-width: 100%;
  }
  .wf-step-table .wf-step-title {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
  }

  .wf-add-form {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
  }
  .wf-add-form .wf-step-title {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .wf-add-form .btn-cl-solid,
  .wf-add-form button[type="submit"] {
    flex-shrink: 0;
  }

  /* ── Workflows list (templates/workflows/workflow_list.html) ── */
  .workflow-list-header,
  .workflows-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .workflow-list-header .btn,
  .workflow-list-header .btn-circuit-primary,
  .workflows-page-header .btn,
  .workflows-page-header .btn-circuit-primary {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ============================================================
   SECTION 49 – REPORTS
   ============================================================ */

/* Reports hub (templates/reports/index.html): spacing between sections and under each header */
.report-section {
  margin-bottom: 1.5rem;
}
.report-section .cl-section-header,
.report-section h5,
.report-page .card-header {
  margin-bottom: 8px;
}

.report-page .report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.report-page .report-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-main);
  font-size: 0.9rem;
}

.report-page .report-tab:hover {
  border-color: rgba(29, 158, 117, 0.5);
  color: var(--brand-viridian);
}

.report-page .report-tab.is-active {
  background: rgba(29, 158, 117, 0.12);
  border-color: rgba(29, 158, 117, 0.55);
  color: var(--text-main);
}

.report-summary-bar {
  border: 1px solid var(--border);
}

.report-summary-bar__item {
  min-width: 140px;
}

.report-filter-row {
  border: 1px solid var(--border);
}

.report-export-btn {
  white-space: nowrap;
}

.report-table thead th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.report-table tbody td {
  border-bottom: 1px solid var(--border);
}

.report-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.report-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.report-legend__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--border);
}
.report-legend__row:last-child {
  border-bottom: none;
}

.report-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #1D9E75;
  border: 1px solid rgba(0,0,0,0);
}

.report-legend__swatch--outline {
  background: transparent;
  border: 2px dashed rgba(29, 158, 117, 0.55);
}

.report-tabs__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.report-tabs__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.report-tabs__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.report-tabs__divider {
  height: 1px;
  width: 100%;
  background: var(--border);
  opacity: 0.6;
  margin: 0.25rem 0;
}

.report-metric-critical {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.06);
}

.report-metric-warning {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.06);
}

.report-metric-safe {
  border-color: rgba(29, 158, 117, 0.35);
  background: rgba(29, 158, 117, 0.06);
}

.sol-days-badge {
  font-weight: 600;
}

.report-trend-line {
  min-height: 320px;
}

.report-callout-muted {
  border: 1px dashed var(--border);
  background: var(--bg-tertiary);
}

/* --- Phase 9: Client status tracker --- */
:root {
  --color-background-primary: var(--bg-surface);
  --color-background-secondary: var(--bg-secondary);
  --color-text-primary: var(--text-main);
  --color-text-tertiary: var(--text-muted);
  --color-text-secondary: var(--text-secondary);
  --color-text-success: var(--color-success);
  --border-radius-lg: var(--radius-lg);
}

/* Timeline + pinned composer — scoped so generic badge/tag rules cannot mute these colors */
span.tag-status-update,
.tag-status-update {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  max-width: 100%;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 0;
  box-shadow: none;
}

.tag-status-update__medal {
  font-size: 0.95em;
  line-height: 1;
  color: #60a5fa;
  flex-shrink: 0;
}

/* Flex column default is align-items: stretch — keep the pill hugging its label */
.contact-status-pinned-inner > .tag-status-update {
  align-self: flex-start;
}

.contact-activities-section {
  position: relative;
}

.contact-activities-section .contact-activities-pinned-wrap {
  position: relative;
  z-index: 2;
  padding: 0 1rem 1rem;
  background: var(--color-background-primary);
  overflow: visible;
}

.contact-activities-scroll {
  position: relative;
  z-index: 0;
  max-height: min(70vh, 720px);
}

.contact-status-pinned-inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.contact-status-pinned-card {
  border: none;
  background: var(--color-background-primary);
  border-radius: var(--border-radius-lg);
  padding: 0.65rem 0.85rem;
  overflow: visible;
  box-sizing: border-box;
}

.contact-status-pinned-card--collapsed .contact-status-pinned-reveal {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  gap: 0;
}

.contact-status-pinned-reveal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

/* Seamless text areas — message + matter combobox (card has no border) */
.contact-status-pinned-card .contact-status-editable,
.contact-status-pinned-card .contact-status-editable--matter,
.contact-status-pinned-card .contact-status-matter-editable,
.contact-status-pinned-card .contact-status-editable:hover,
.contact-status-pinned-card .contact-status-editable--matter:hover,
.contact-status-pinned-card .contact-status-matter-editable:hover,
.contact-status-pinned-card .contact-status-editable:focus,
.contact-status-pinned-card .contact-status-editable--matter:focus,
.contact-status-pinned-card .contact-status-matter-editable:focus,
.contact-status-pinned-card .contact-status-editable:focus-visible,
.contact-status-pinned-card .contact-status-editable--matter:focus-visible,
.contact-status-pinned-card .contact-status-matter-editable:focus-visible {
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.contact-status-editable {
  min-height: 2.75rem;
  margin: 0;
  padding: 0.2rem 0;
  width: 100%;
  max-width: 100%;
  line-height: 1.45;
  box-sizing: border-box;
}

.contact-status-editable--matter {
  min-height: 1.75rem;
  margin: 0;
  padding: 0.15rem 0;
}

.contact-status-editable:empty:before {
  content: attr(data-placeholder);
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.contact-status-matter-row {
  position: relative;
  margin: 0;
  padding: 0;
}

.contact-status-matter-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 2px;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem 0;
  background: var(--card-bg, var(--color-background-primary));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.contact-status-dd-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--card-bg, var(--color-background-primary));
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
}

.contact-status-dd-item:hover,
.contact-status-dd-item:focus,
.contact-status-dd-item:focus-visible {
  background: var(--color-background-secondary);
  outline: none;
}

.contact-status-matter-pills {
  margin: 0.25rem 0 0;
  padding: 0;
}

.contact-status-matter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: #DBEAFE;
  color: #1D4ED8;
  font-weight: 600;
}

.contact-status-matter-pill-remove {
  border: 0;
  background: transparent;
  padding: 0 0.15rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.contact-status-pinned-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.contact-status-action-cancel {
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.contact-status-action-publish {
  color: #007066;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 500;
}

.contact-activity-status-updated {
  color: var(--color-text-success);
}

.contact-status-notify {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.contact-status-notify--empty {
  display: none;
}

.contact-status-notify-email {
  background: #007066;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
  cursor: pointer;
}

.contact-status-notify-copy {
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  padding: 0.125rem;
  cursor: pointer;
}

.contact-status-publish-form-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.client-status-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-page);
  font-family: "DM Sans", system-ui, sans-serif;
}

.client-status-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #007066;
  color: #fff;
  padding: 0.65rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.client-status-header-bar span:last-child {
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.client-status-hero {
  background: #007066;
  color: #fff;
  padding: 1rem 1.25rem 1.25rem;
}

.client-status-matter-label {
  font-size: 0.85rem;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  text-transform: none;
  opacity: 0.95;
}

.client-status-client-name {
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 0.35rem;
}

.client-status-updated-line {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: 0.35rem;
}

.client-status-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem;
}

.client-status-card {
  background: var(--color-background-primary);
  border-left: 3px solid #007066;
  border-radius: 4px;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.client-status-card-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.client-status-card-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.client-status-invoice {
  margin-top: 1.25rem;
  background: var(--color-background-primary);
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid var(--border);
}

.client-status-invoice-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 0.25rem 0;
}

.client-status-invoice-row--balance .client-status-invoice-val {
  color: #007066;
  font-weight: 600;
}

.client-status-pay-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: #007066;
  color: #fff;
  text-decoration: none;
  padding: 0.65rem;
  border-radius: 6px;
  margin-top: 0.85rem;
  font-weight: 600;
}

.client-status-pay-btn:hover {
  color: #fff;
  filter: brightness(1.05);
}

.client-status-footer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 1.5rem 1rem 2rem;
}

.client-status-error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--bg-page);
}

.client-status-error-inner {
  max-width: 420px;
  text-align: center;
  color: var(--text-muted);
}


/* ==========================================================================
   SECTION 50 — SYSTEM ADMIN THEMES (/system-admin/ only; set via data-admin-theme on <html>)
   ========================================================================== */

/* Theme picker swatches (rendered only in templates/system_admin/base.html) */
.cl-admin-theme-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    border: 2px solid transparent;
    box-sizing: border-box;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
}
.cl-admin-theme-swatch.is-active {
    border-color: #fff;
}
.cl-admin-theme-swatch--crt {
    background: #00ff41;
}
.cl-admin-theme-swatch--cyberpunk {
    background: linear-gradient(135deg, #1a0510, #00ffff, #ffe600);
}
.cl-admin-theme-swatch--deus {
    background: linear-gradient(135deg, #1a1400, #c8960a, #ffd700);
}

/* --- CRT green terminal --- */
[data-admin-theme='crt'] body,
[data-admin-theme='crt'] body * {
    font-family: 'Courier New', monospace;
}

[data-admin-theme='crt'] body {
    background: #030d03;
    color: #00ff41;
}

[data-admin-theme='crt'] body a,
[data-admin-theme='crt'] body a:hover {
    color: #00ff41;
}

[data-admin-theme='crt'] body .text-muted,
[data-admin-theme='crt'] body .text-secondary,
[data-admin-theme='crt'] body .timestamp,
[data-admin-theme='crt'] body .subtitle {
    color: #00ff41;
    opacity: 0.6;
}

[data-admin-theme='crt'] body h1,
[data-admin-theme='crt'] body h2,
[data-admin-theme='crt'] body h3,
[data-admin-theme='crt'] body h4,
[data-admin-theme='crt'] body h5,
[data-admin-theme='crt'] body h6,
[data-admin-theme='crt'] body .card-title,
[data-admin-theme='crt'] body .page-header-title {
    color: #00ff41;
}

[data-admin-theme='crt'] body .navbar-viridian {
    background: #000 !important;
    border-bottom: 1px solid #00ff41;
}

[data-admin-theme='crt'] body .navbar-sub {
    background: #000 !important;
}

[data-admin-theme='crt'] body .navbar-viridian .navbar-brand,
[data-admin-theme='crt'] body .navbar-viridian a,
[data-admin-theme='crt'] body .navbar-viridian .text-white {
    color: #00ff41 !important;
}

[data-admin-theme='crt'] body .navbar-sub .nav-link {
    color: #00ff41 !important;
    opacity: 0.6;
    background: none !important;
    text-decoration: none;
}

[data-admin-theme='crt'] body .navbar-sub .nav-link:hover {
    opacity: 0.85;
}

[data-admin-theme='crt'] body .navbar-sub .nav-link.active {
    opacity: 1;
    text-decoration: underline;
    background: none !important;
}

[data-admin-theme='crt'] body .navbar-sub .nav-link.active:hover {
    opacity: 1;
}

[data-admin-theme='crt'] body .theme-toggle,
[data-admin-theme='crt'] body .theme-toggle svg {
    color: #00ff41;
    fill: #00ff41;
}

[data-admin-theme='crt'] body .system-admin-stat-card {
    background: #000 !important;
    border: 1px solid #00ff41 !important;
    box-shadow: none !important;
    color: #00ff41 !important;
}

[data-admin-theme='crt'] body .system-admin-stat-card .stat-label {
    color: #00ff41;
    opacity: 0.6;
}

[data-admin-theme='crt'] body .system-admin-stat-card .stat-value {
    color: #00ff41;
    font-weight: bold;
}

[data-admin-theme='crt'] body .card-header-viridian,
[data-admin-theme='crt'] body .card-header.card-header-viridian {
    background: #000 !important;
    border: 1px solid #00ff41 !important;
    color: #00ff41 !important;
    letter-spacing: 0.1em;
}

[data-admin-theme='crt'] body .card-header-viridian h2,
[data-admin-theme='crt'] body .card-header-viridian h3,
[data-admin-theme='crt'] body .card-header-viridian h4,
[data-admin-theme='crt'] body .card-header-viridian h5,
[data-admin-theme='crt'] body .card-header-viridian h6,
[data-admin-theme='crt'] body .cl-system-admin-h2 {
    color: #00ff41 !important;
}

[data-admin-theme='crt'] body .table,
[data-admin-theme='crt'] body .table thead,
[data-admin-theme='crt'] body .table tbody {
    color: #00ff41;
    --bs-table-bg: transparent;
    --bs-table-color: #00ff41;
}

[data-admin-theme='crt'] body .table thead.table-light th {
    background: #000 !important;
    color: #00ff41 !important;
    border-color: #0f3d0f !important;
}

[data-admin-theme='crt'] body .table td,
[data-admin-theme='crt'] body .table th {
    border-color: #0f3d0f !important;
}

[data-admin-theme='crt'] body .table tbody tr:hover {
    background: #001a00 !important;
}

[data-admin-theme='crt'] body #firm-overview-table .firm-table-row td.fw-medium {
    color: #00ff41;
    font-weight: 600;
}

[data-admin-theme='crt'] body #firm-overview-table .sortable-th:hover {
    background: #001a00 !important;
}

[data-admin-theme='crt'] body .firm-inactive {
    opacity: 1;
    background: transparent;
}

[data-admin-theme='crt'] body .badge.bg-success,
[data-admin-theme='crt'] body .badge.bg-secondary {
    border: 1px solid #00ff41;
    color: #00ff41;
    background: none !important;
}

[data-admin-theme='crt'] body .badge.bg-success {
    background: #00ff41 !important;
    color: #000 !important;
}

[data-admin-theme='crt'] body .badge.bg-danger {
    border: 1px solid #8b0000;
    color: #00ff41 !important;
    background: none !important;
}

[data-admin-theme='crt'] body .btn:not(.btn-close),
[data-admin-theme='crt'] body .btn-circuit {
    border: 1px solid #00ff41 !important;
    color: #00ff41 !important;
    background: none !important;
}

[data-admin-theme='crt'] body .btn:not(.btn-close):hover,
[data-admin-theme='crt'] body .btn-circuit:hover {
    background: #00ff41 !important;
    color: #000 !important;
}

[data-admin-theme='crt'] body .btn-outline-danger,
[data-admin-theme='crt'] body .btn-danger {
    border-color: #8b0000 !important;
    color: #00ff41 !important;
    background: none !important;
}

[data-admin-theme='crt'] body .btn-outline-danger:hover {
    background: #00ff41 !important;
    color: #000 !important;
    border-color: #00ff41 !important;
}

[data-admin-theme='crt'] body .btn-danger:hover {
    background: #8b0000 !important;
    color: #00ff41 !important;
}

[data-admin-theme='crt'] body .btn-viridian {
    border-color: #00ff41 !important;
    color: #00ff41 !important;
    background: none !important;
}

[data-admin-theme='crt'] body .btn-viridian:hover {
    background: #00ff41 !important;
    color: #000 !important;
}

[data-admin-theme='crt'] body .btn-outline-success {
    border-color: #00ff41 !important;
    color: #00ff41 !important;
    background: none !important;
}

[data-admin-theme='crt'] body .btn-outline-success:hover {
    background: #00ff41 !important;
    color: #000 !important;
}

[data-admin-theme='crt'] body .btn-outline-secondary {
    border-color: #00ff41 !important;
    color: #00ff41 !important;
    background: none !important;
}

[data-admin-theme='crt'] body .btn-outline-secondary:hover {
    background: #00ff41 !important;
    color: #000 !important;
}

[data-admin-theme='crt'] body #firm-overview-table .sort-indicator {
    color: #00ff41 !important;
    opacity: 0.6;
}

[data-admin-theme='crt'] body .form-control,
[data-admin-theme='crt'] body .form-select {
    background: #000;
    color: #00ff41;
    border-color: #0f3d0f;
}

[data-admin-theme='crt'] body .form-control:focus,
[data-admin-theme='crt'] body .form-select:focus {
    border-color: #00ff41;
    box-shadow: 0 0 0 0.2rem rgba(0, 255, 65, 0.15);
    color: #00ff41;
}

[data-admin-theme='crt'] body code {
    color: #00ff41;
}

[data-admin-theme='crt'] body .card.border-0.shadow-sm {
    box-shadow: none !important;
    border: 1px solid #0f3d0f !important;
    background: #000 !important;
}

[data-admin-theme='crt'] body .modal-content {
    background: #030d03;
    color: #00ff41;
    border: 1px solid #00ff41;
}

[data-admin-theme='crt'] body .modal-header,
[data-admin-theme='crt'] body .modal-footer {
    border-color: #0f3d0f !important;
}

[data-admin-theme='crt'] body .dropdown-menu {
    background: #000;
    border: 1px solid #00ff41;
}

[data-admin-theme='crt'] body .dropdown-item {
    color: #00ff41;
}

[data-admin-theme='crt'] body .dropdown-item:hover,
[data-admin-theme='crt'] body .dropdown-item:focus {
    background: #001a00;
    color: #00ff41;
}

[data-admin-theme='crt'] body .container.py-4 {
    position: relative;
    z-index: 0;
}

[data-admin-theme='crt'] body .container.py-4::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(0, 255, 65, 0.03) 3px,
        rgba(0, 255, 65, 0.03) 4px
    );
}

[data-admin-theme='crt'] body .cl-system-admin-footer {
    background: #030d03;
    border-top: 1px solid #00ff41;
    color: #00ff41;
    opacity: 0.5;
}

/* --- Cyberpunk 2077 --- */
[data-admin-theme='cyberpunk'] body,
[data-admin-theme='cyberpunk'] body * {
    font-family: 'Arial Narrow', Arial, sans-serif;
}

[data-admin-theme='cyberpunk'] body {
    background: #1a0510;
    color: #fff;
}

[data-admin-theme='cyberpunk'] body a,
[data-admin-theme='cyberpunk'] body a:hover {
    color: #00ffff;
}

[data-admin-theme='cyberpunk'] body .text-muted,
[data-admin-theme='cyberpunk'] body .text-secondary,
[data-admin-theme='cyberpunk'] body .timestamp,
[data-admin-theme='cyberpunk'] body .subtitle {
    color: #00ffff;
    opacity: 0.7;
}

[data-admin-theme='cyberpunk'] body h1,
[data-admin-theme='cyberpunk'] body h2,
[data-admin-theme='cyberpunk'] body h3,
[data-admin-theme='cyberpunk'] body h4,
[data-admin-theme='cyberpunk'] body h5,
[data-admin-theme='cyberpunk'] body h6,
[data-admin-theme='cyberpunk'] body .page-header-title {
    color: #fff;
}

[data-admin-theme='cyberpunk'] body .card-title {
    color: #ffe600;
}

[data-admin-theme='cyberpunk'] body .navbar-viridian {
    background: #0d0008 !important;
    border-bottom: 2px solid #00ffff;
}

[data-admin-theme='cyberpunk'] body .navbar-sub {
    background: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body .navbar-viridian .navbar-brand {
    color: #fff !important;
}

[data-admin-theme='cyberpunk'] body .navbar-viridian .text-white:not(.navbar-brand) {
    color: #00ffff !important;
}

[data-admin-theme='cyberpunk'] body .navbar-sub .nav-link {
    color: #00ffff !important;
    opacity: 0.6;
    background: none !important;
    text-decoration: none;
}

[data-admin-theme='cyberpunk'] body .navbar-sub .nav-link:hover {
    opacity: 0.85;
}

[data-admin-theme='cyberpunk'] body .navbar-sub .nav-link.active {
    opacity: 1;
    font-weight: 700;
    background: #00ffff !important;
    color: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body .navbar-sub .nav-link.active:hover {
    opacity: 1;
    background: #00ffff !important;
    color: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body .theme-toggle,
[data-admin-theme='cyberpunk'] body .theme-toggle svg {
    color: #00ffff;
    fill: #00ffff;
}

[data-admin-theme='cyberpunk'] body .system-admin-stat-card {
    background: #0d0008 !important;
    border: 1px solid #00ffff !important;
    border-top: 3px solid #ffe600 !important;
    box-shadow: none !important;
    color: #fff !important;
}

[data-admin-theme='cyberpunk'] body .system-admin-stat-card .stat-label {
    color: #00ffff;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

[data-admin-theme='cyberpunk'] body .system-admin-stat-card .stat-value {
    color: #ffe600;
    font-weight: 700;
}

[data-admin-theme='cyberpunk'] body .card-header-viridian,
[data-admin-theme='cyberpunk'] body .card-header.card-header-viridian {
    background: #0d0008 !important;
    border: 1px solid #00ffff !important;
    color: #ffe600 !important;
}

[data-admin-theme='cyberpunk'] body .card-header-viridian h2,
[data-admin-theme='cyberpunk'] body .card-header-viridian h3,
[data-admin-theme='cyberpunk'] body .card-header-viridian h4,
[data-admin-theme='cyberpunk'] body .card-header-viridian h5,
[data-admin-theme='cyberpunk'] body .card-header-viridian h6,
[data-admin-theme='cyberpunk'] body .cl-system-admin-h2 {
    color: #ffe600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

[data-admin-theme='cyberpunk'] body .card-header-viridian .text-muted,
[data-admin-theme='cyberpunk'] body .card-header-viridian small,
[data-admin-theme='cyberpunk'] body .card-header.card-header-viridian .text-muted {
    color: #00ffff !important;
    opacity: 0.7;
}

[data-admin-theme='cyberpunk'] body .table,
[data-admin-theme='cyberpunk'] body .table thead,
[data-admin-theme='cyberpunk'] body .table tbody {
    color: #fff;
    --bs-table-bg: transparent;
    --bs-table-color: #fff;
}

[data-admin-theme='cyberpunk'] body .table thead.table-light th {
    background: #0d0008 !important;
    color: #00ffff !important;
    border-color: #1a0015 !important;
}

[data-admin-theme='cyberpunk'] body .table td,
[data-admin-theme='cyberpunk'] body .table th {
    border-color: #1a0015 !important;
}

[data-admin-theme='cyberpunk'] body .table tbody tr:hover {
    background: #200015 !important;
}

[data-admin-theme='cyberpunk'] body .table tbody tr.table-active {
    background: #ffe600 !important;
    color: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body .table tbody tr.table-active td,
[data-admin-theme='cyberpunk'] body .table tbody tr.table-active th {
    color: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body #firm-overview-table .firm-table-row td.fw-medium {
    color: #fff;
    font-weight: 600;
}

[data-admin-theme='cyberpunk'] body #firm-overview-table .firm-table-row td:not(:first-child):not(:last-child) {
    color: #00ffff;
}

[data-admin-theme='cyberpunk'] body #firm-overview-table .firm-table-row td:last-child {
    color: #fff;
}

[data-admin-theme='cyberpunk'] body #firm-overview-table .sortable-th:hover {
    background: #200015 !important;
}

[data-admin-theme='cyberpunk'] body .firm-inactive {
    opacity: 1;
    background: transparent;
}

[data-admin-theme='cyberpunk'] body .badge.bg-secondary {
    border: 1px solid #00ffff;
    color: #00ffff !important;
    background: none !important;
}

[data-admin-theme='cyberpunk'] body .badge.bg-success {
    border: 1px solid #ffe600;
    background: #ffe600 !important;
    color: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body .badge.bg-danger {
    border: 1px solid #ff003c;
    color: #ff003c !important;
    background: none !important;
}

[data-admin-theme='cyberpunk'] body .btn:not(.btn-close),
[data-admin-theme='cyberpunk'] body .btn-circuit {
    border: 1px solid #00ffff !important;
    color: #00ffff !important;
    background: none !important;
}

[data-admin-theme='cyberpunk'] body .btn:not(.btn-close):hover,
[data-admin-theme='cyberpunk'] body .btn-circuit:hover {
    background: #00ffff !important;
    color: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body .btn-outline-danger,
[data-admin-theme='cyberpunk'] body .btn-danger {
    border-color: #ff003c !important;
    color: #ff003c !important;
    background: none !important;
}

[data-admin-theme='cyberpunk'] body .btn-outline-danger:hover,
[data-admin-theme='cyberpunk'] body .btn-danger:hover {
    background: #ff003c !important;
    color: #fff !important;
    border-color: #ff003c !important;
}

[data-admin-theme='cyberpunk'] body .btn-viridian {
    border-color: #00ffff !important;
    color: #00ffff !important;
    background: none !important;
}

[data-admin-theme='cyberpunk'] body .btn-viridian:hover {
    background: #00ffff !important;
    color: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body .btn-outline-success {
    border-color: #00ffff !important;
    color: #00ffff !important;
    background: none !important;
}

[data-admin-theme='cyberpunk'] body .btn-outline-success:hover {
    background: #00ffff !important;
    color: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body .btn-outline-secondary {
    border-color: #00ffff !important;
    color: #00ffff !important;
    background: none !important;
}

[data-admin-theme='cyberpunk'] body .btn-outline-secondary:hover {
    background: #00ffff !important;
    color: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body #firm-overview-table .sort-indicator {
    color: #00ffff !important;
    opacity: 0.7;
}

[data-admin-theme='cyberpunk'] body .form-control,
[data-admin-theme='cyberpunk'] body .form-select {
    background: #0d0008;
    color: #fff;
    border-color: #1a0015;
}

[data-admin-theme='cyberpunk'] body .form-control:focus,
[data-admin-theme='cyberpunk'] body .form-select:focus {
    border-color: #00ffff;
    box-shadow: 0 0 0 0.2rem rgba(0, 255, 255, 0.15);
    color: #fff;
}

[data-admin-theme='cyberpunk'] body code {
    color: #ffe600;
}

[data-admin-theme='cyberpunk'] body .card.border-0.shadow-sm {
    box-shadow: none !important;
    border: 1px solid #1a0015 !important;
    background: #0d0008 !important;
}

[data-admin-theme='cyberpunk'] body .modal-content {
    background: #1a0510;
    color: #fff;
    border: 1px solid #00ffff;
}

[data-admin-theme='cyberpunk'] body .modal-header,
[data-admin-theme='cyberpunk'] body .modal-footer {
    border-color: #1a0015 !important;
}

[data-admin-theme='cyberpunk'] body .dropdown-menu {
    background: #0d0008;
    border: 1px solid #00ffff;
}

[data-admin-theme='cyberpunk'] body .dropdown-item {
    color: #00ffff;
}

[data-admin-theme='cyberpunk'] body .dropdown-item:hover,
[data-admin-theme='cyberpunk'] body .dropdown-item:focus {
    background: #200015;
    color: #00ffff;
}

[data-admin-theme='cyberpunk'] body .cl-system-admin-footer {
    background: #0a0006;
    border-top: 2px solid #00ffff;
    color: rgba(0, 255, 255, 0.4);
}

[data-admin-theme='cyberpunk'] body .container.py-4 {
    position: relative;
    z-index: 0;
}

[data-admin-theme='cyberpunk'] body .container.py-4::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(0, 255, 255, 0.015) 3px,
        rgba(0, 255, 255, 0.015) 4px
    );
}

/* --- Deus Ex Human Revolution --- */
[data-admin-theme='deus'] body,
[data-admin-theme='deus'] body * {
    font-family: 'Arial Narrow', Arial, sans-serif;
}

[data-admin-theme='deus'] body {
    background: #1a1400;
    color: #fff;
}

[data-admin-theme='deus'] body a,
[data-admin-theme='deus'] body a:hover {
    color: #c8960a;
}

[data-admin-theme='deus'] body .text-muted,
[data-admin-theme='deus'] body .text-secondary,
[data-admin-theme='deus'] body .timestamp,
[data-admin-theme='deus'] body .subtitle {
    color: #c8960a;
}

[data-admin-theme='deus'] body h1,
[data-admin-theme='deus'] body h2,
[data-admin-theme='deus'] body h3,
[data-admin-theme='deus'] body h4,
[data-admin-theme='deus'] body h5,
[data-admin-theme='deus'] body h6,
[data-admin-theme='deus'] body .page-header-title {
    color: #fff;
}

[data-admin-theme='deus'] body .card-title {
    color: #ffd700;
}

[data-admin-theme='deus'] body .navbar-viridian {
    background: #0d0b00 !important;
    border-bottom: 2px solid #c8960a;
}

[data-admin-theme='deus'] body .navbar-sub {
    background: #0d0b00 !important;
}

[data-admin-theme='deus'] body .navbar-viridian .navbar-brand {
    color: #fff !important;
}

[data-admin-theme='deus'] body .navbar-viridian .text-white:not(.navbar-brand) {
    color: #c8960a !important;
}

[data-admin-theme='deus'] body .navbar-sub .nav-link {
    color: #c8960a !important;
    opacity: 0.6;
    background: none !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
}

[data-admin-theme='deus'] body .navbar-sub .nav-link:hover {
    opacity: 0.85;
}

[data-admin-theme='deus'] body .navbar-sub .nav-link.active {
    opacity: 1;
    color: #ffd700 !important;
    background: none !important;
    border-bottom: 1px solid #ffd700;
}

[data-admin-theme='deus'] body .navbar-sub .nav-link.active:hover {
    opacity: 1;
    color: #ffd700 !important;
    background: none !important;
    border-bottom: 1px solid #ffd700;
}

[data-admin-theme='deus'] body .theme-toggle,
[data-admin-theme='deus'] body .theme-toggle svg {
    color: #c8960a;
    fill: #c8960a;
}

[data-admin-theme='deus'] body .system-admin-stat-card {
    background: #0f0b00 !important;
    border: 1px solid #c8960a !important;
    border-left: 3px solid #ffd700 !important;
    box-shadow: none !important;
    color: #fff !important;
}

[data-admin-theme='deus'] body .system-admin-stat-card .stat-label {
    color: #c8960a;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

[data-admin-theme='deus'] body .system-admin-stat-card .stat-value {
    color: #ffd700;
    font-weight: 700;
}

[data-admin-theme='deus'] body .card-header-viridian,
[data-admin-theme='deus'] body .card-header.card-header-viridian {
    background: #0f0b00 !important;
    border: 1px solid #c8960a !important;
    border-left: 3px solid #ffd700 !important;
    color: #ffd700 !important;
}

[data-admin-theme='deus'] body .card-header-viridian h2,
[data-admin-theme='deus'] body .card-header-viridian h3,
[data-admin-theme='deus'] body .card-header-viridian h4,
[data-admin-theme='deus'] body .card-header-viridian h5,
[data-admin-theme='deus'] body .card-header-viridian h6,
[data-admin-theme='deus'] body .cl-system-admin-h2 {
    color: #ffd700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

[data-admin-theme='deus'] body .card-header-viridian .text-muted,
[data-admin-theme='deus'] body .card-header-viridian small,
[data-admin-theme='deus'] body .card-header.card-header-viridian .text-muted {
    color: #c8960a !important;
    opacity: 1;
}

[data-admin-theme='deus'] body .table,
[data-admin-theme='deus'] body .table thead,
[data-admin-theme='deus'] body .table tbody {
    color: #fff;
    --bs-table-bg: transparent;
    --bs-table-color: #fff;
}

[data-admin-theme='deus'] body .table thead.table-light th {
    background: #0f0b00 !important;
    color: #c8960a !important;
    border-color: #1a1400 !important;
}

[data-admin-theme='deus'] body .table td,
[data-admin-theme='deus'] body .table th {
    border-color: #1a1400 !important;
}

[data-admin-theme='deus'] body .table.table-hover tbody tr:hover {
    background: #1f1800 !important;
}

[data-admin-theme='deus'] body .table tbody tr:hover td:first-child {
    box-shadow: inset 2px 0 0 #ffd700;
}

[data-admin-theme='deus'] body .table tbody tr.table-active {
    background: #1f1800 !important;
}

[data-admin-theme='deus'] body #firm-overview-table .firm-table-row td:nth-child(1) {
    color: #d4af37;
    font-weight: 600;
}

[data-admin-theme='deus'] body #firm-overview-table .firm-table-row td:nth-child(3),
[data-admin-theme='deus'] body #firm-overview-table .firm-table-row td:nth-child(4) {
    color: #fff;
}

[data-admin-theme='deus'] body #firm-overview-table .firm-table-row td:nth-child(5),
[data-admin-theme='deus'] body #firm-overview-table .firm-table-row td:nth-child(6) {
    color: #c8960a;
}

[data-admin-theme='deus'] body #firm-overview-table .sortable-th:hover {
    background: #1f1800 !important;
}

[data-admin-theme='deus'] body .firm-inactive {
    opacity: 1;
    background: transparent;
}

[data-admin-theme='deus'] body .badge.bg-secondary {
    border: 1px solid #c8960a;
    color: #c8960a !important;
    background: none !important;
}

[data-admin-theme='deus'] body .badge.bg-success {
    border: 1px solid #ffd700;
    background: #ffd700 !important;
    color: #0d0b00 !important;
}

[data-admin-theme='deus'] body .badge.bg-danger {
    border: 1px solid #8b0000;
    color: #d4846a !important;
    background: none !important;
}

[data-admin-theme='deus'] body .btn:not(.btn-close),
[data-admin-theme='deus'] body .btn-circuit {
    border: 1px solid #c8960a !important;
    color: #c8960a !important;
    background: none !important;
}

[data-admin-theme='deus'] body .btn:not(.btn-close):hover,
[data-admin-theme='deus'] body .btn-circuit:hover {
    background: #c8960a !important;
    color: #0d0b00 !important;
}

[data-admin-theme='deus'] body .btn-outline-danger,
[data-admin-theme='deus'] body .btn-danger {
    border-color: #8b0000 !important;
    color: #d4846a !important;
    background: none !important;
}

[data-admin-theme='deus'] body .btn-outline-danger:hover,
[data-admin-theme='deus'] body .btn-danger:hover {
    background: #8b0000 !important;
    color: #fff !important;
    border-color: #8b0000 !important;
}

[data-admin-theme='deus'] body .btn-viridian {
    border-color: #c8960a !important;
    color: #c8960a !important;
    background: none !important;
}

[data-admin-theme='deus'] body .btn-viridian:hover {
    background: #c8960a !important;
    color: #0d0b00 !important;
}

[data-admin-theme='deus'] body .btn-outline-success {
    border-color: #c8960a !important;
    color: #c8960a !important;
    background: none !important;
}

[data-admin-theme='deus'] body .btn-outline-success:hover {
    background: #c8960a !important;
    color: #0d0b00 !important;
}

[data-admin-theme='deus'] body .btn-outline-secondary {
    border-color: #c8960a !important;
    color: #c8960a !important;
    background: none !important;
}

[data-admin-theme='deus'] body .btn-outline-secondary:hover {
    background: #c8960a !important;
    color: #0d0b00 !important;
}

[data-admin-theme='deus'] body #firm-overview-table .sort-indicator {
    color: #c8960a !important;
}

[data-admin-theme='deus'] body .form-control,
[data-admin-theme='deus'] body .form-select {
    background: #0f0b00;
    color: #fff;
    border-color: #1a1400;
}

[data-admin-theme='deus'] body .form-control:focus,
[data-admin-theme='deus'] body .form-select:focus {
    border-color: #c8960a;
    box-shadow: 0 0 0 0.2rem rgba(200, 150, 10, 0.2);
    color: #fff;
}

[data-admin-theme='deus'] body code {
    color: #ffd700;
}

[data-admin-theme='deus'] body .card.border-0.shadow-sm {
    box-shadow: none !important;
    border: 1px solid #1a1400 !important;
    background: #0f0b00 !important;
}

[data-admin-theme='deus'] body .modal-content {
    background: #1a1400;
    color: #fff;
    border: 1px solid #c8960a;
}

[data-admin-theme='deus'] body .modal-header,
[data-admin-theme='deus'] body .modal-footer {
    border-color: #1a1400 !important;
}

[data-admin-theme='deus'] body .dropdown-menu {
    background: #0f0b00;
    border: 1px solid #c8960a;
}

[data-admin-theme='deus'] body .dropdown-item {
    color: #c8960a;
}

[data-admin-theme='deus'] body .dropdown-item:hover,
[data-admin-theme='deus'] body .dropdown-item:focus {
    background: #1f1800;
    color: #ffd700;
}

[data-admin-theme='deus'] body .cl-system-admin-footer {
    background: #080600;
    border-top: 2px solid #c8960a;
    color: rgba(200, 150, 10, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 51 — Global Action Modal (Phase 7)
   Faux viewport: backdrop is fixed; inner viewport flex-centers the dialog.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Task status pills — active states (activity cards + modal), shared palette */
.cl-task-status-pill--incomplete.is-active,
.cl-task-status-pills--modal .cl-task-status-pill--incomplete.is-active {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}

.cl-task-status-pill--inprogress.is-active,
.cl-task-status-pills--modal .cl-task-status-pill--inprogress.is-active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}

.cl-task-status-pill--overdue.is-active,
.cl-task-status-pills--modal .cl-task-status-pill--overdue.is-active {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

.cl-task-status-pill--complete.is-active,
.cl-task-status-pills--modal .cl-task-status-pill--complete.is-active {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #166534;
}

/* Activity card type icon: task state matches status pills (complete / overdue) */
.matter-activity-card__icon.cl-activity-card-type-icon--complete,
.cl-activity-card-type-icon--complete {
  background: #f0fdf4;
  border-color: #22c55e;
}
.matter-activity-card__icon.cl-activity-card-type-icon--complete svg,
.cl-activity-card-type-icon--complete svg {
  stroke: #166534 !important;
}

.matter-activity-card__icon.cl-activity-card-type-icon--overdue,
.cl-activity-card-type-icon--overdue {
  background: #fef2f2;
  border-color: #ef4444;
}
.matter-activity-card__icon.cl-activity-card-type-icon--overdue svg,
.cl-activity-card-type-icon--overdue svg {
  stroke: #991b1b !important;
}

/* Case status update cards (contact Activities timeline) */
.cl-activity-card-type-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--color-border-secondary, var(--border));
  background: var(--color-background-secondary, var(--bg-secondary));
  box-sizing: border-box;
  color: var(--color-text-secondary, var(--text-muted));
}

.cl-status-update-card .cl-activity-card-type-icon {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #3b82f6;
}

.cl-status-update-card .cl-activity-card-type-icon svg {
  display: block;
}

.cl-pinned-status-type-icon {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #3b82f6;
}

.contact-status-pinned-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  align-self: flex-start;
}

.contact-status-pinned-label-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0369a1;
}

.cl-status-update-card__title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-primary);
  word-break: break-word;
}

.cl-status-update-card__footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
  justify-content: flex-end;
}

.cl-status-update-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cl-status-update-pill--updated {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 0.5px solid #22c55e;
  background: #f0fdf4;
  color: #166534;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.cl-status-update-pill--viewed {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 0.5px solid #3b82f6;
  background: #eff6ff;
  color: #1e40af;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.cl-activity-card:hover .cl-status-update-pill--updated,
.cl-activity-card:hover .cl-status-update-pill--viewed,
.cl-activity-card:focus-within .cl-status-update-pill--updated,
.cl-activity-card:focus-within .cl-status-update-pill--viewed {
  opacity: 1;
  pointer-events: auto;
}

.cl-blame-medal--status-sender {
  background: var(--brand-viridian, #007066);
  border-color: var(--brand-viridian, #007066);
  color: #fff;
}

.cl-blame-medal--status-sender .cl-blame-medal__in {
  color: #fff;
}

.cl-action-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.5);
  padding: 16px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.cl-action-modal-backdrop.is-open {
  display: block;
}

.cl-action-modal-viewport {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cl-action-modal-viewport .cl-action-modal {
  pointer-events: auto;
}

.cl-action-modal {
  width: 90vw;
  max-width: 520px;
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  min-width: 0;
  box-sizing: border-box;
}

.cl-action-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--brand-viridian-header-bg, #005a52);
  color: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.cl-action-modal__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-action-modal__close {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.cl-action-modal__type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary, #f1f3f5);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.cl-action-modal__type-tab {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.cl-action-modal__type-tab.is-active {
  color: var(--text-main);
  font-weight: 600;
  border-bottom-color: #007066;
}

.cl-action-modal__type-tab-icon {
  font-size: 1rem;
  opacity: 0.85;
}

.cl-action-modal__type-tab-icon .bi {
  color: var(--text-secondary);
}

.cl-action-modal__form {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.cl-action-modal__ctx-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.cl-action-modal__ctx-field {
  flex: 1 1 200px;
  min-width: 0;
  position: relative;
}

.cl-action-modal__ctx-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cl-action-modal__ctx-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  min-height: 32px;
}

.cl-action-modal__ctx-pill.is-set {
  border-style: solid;
  border-color: #007066;
}

.cl-action-modal__ctx-pill-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-action-modal__ctx-pill-clear {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 4px;
}

.cl-action-modal__ctx-panel {
  position: absolute;
  z-index: 3;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px;
  max-height: 220px;
  overflow: auto;
}

.cl-action-modal__ctx-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.cl-action-modal__ctx-option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 6px 8px;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.cl-action-modal__ctx-option:hover {
  background: var(--bg-secondary);
}

.cl-action-modal__body {
  padding: 16px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.cl-action-modal .cl-am-pane {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.cl-action-modal .row {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.cl-action-modal .row > [class*='col-'] {
  min-width: 0;
}

.cl-action-modal .form-control,
.cl-action-modal .form-select {
  min-width: 0;
  max-width: 100%;
}

.cl-action-modal .cl-am-assignee-field {
  min-width: 0;
  max-width: 100%;
}

.cl-action-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.cl-action-modal__footer-left {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.cl-action-modal__footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.cl-action-modal__footer-left .cl-blame-medals {
  margin-left: 0;
}

.cl-action-modal__footer-left .cl-am-record {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.cl-am-record-label {
  font-size: 10px;
  color: var(--color-text-tertiary, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 6px;
  flex-shrink: 0;
}

.cl-action-modal .cl-blame-medal--read-only {
  cursor: default;
}

.cl-action-modal .cl-blame-medal__tooltip {
  position: fixed;
  z-index: 1060;
  bottom: auto;
  right: auto;
  left: 0;
  top: 0;
  transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  display: block;
}

.cl-action-modal .cl-blame-medal:hover .cl-blame-medal__tooltip {
  opacity: 1;
}

.cl-action-modal .cl-blame-medal--empty .cl-blame-medal__tooltip {
  display: none;
  opacity: 0;
}

.cl-action-modal__blame-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cl-action-modal__blame-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cl-blame-medal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #007066;
  color: #fff;
  font-size: 9px;
  font-weight: 500;
}

.cl-blame-medal--slate {
  background: #007066;
}

.cl-blame-medal--completed {
  background: #3b6d11;
}

.cl-blame-medal--empty {
  background: transparent;
  border: 1.5px dashed var(--color-border-secondary, var(--border));
  color: var(--text-muted);
}

.cl-blame-medal__dash {
  font-size: 0.6rem;
}

.cl-blame-medal__in {
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
}

.cl-blame-medal__tooltip {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--bg-primary);
  color: var(--text-main);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 4;
}

.cl-blame-medal:hover .cl-blame-medal__tooltip {
  opacity: 1;
}

.cl-blame-medal--empty .cl-blame-medal__tooltip {
  display: none;
}

.cl-blame-medal--card .cl-blame-medal__tooltip {
  left: auto;
  right: 0;
  transform: none;
  display: none;
  opacity: 1;
  z-index: 10;
  pointer-events: none;
}

.cl-blame-medal--card:hover .cl-blame-medal__tooltip {
  display: block;
}

/* Description on activity cards: stay left of medals / action icons */
.cl-activity-card-desc-block {
  max-width: 100%;
  padding-right: 80px;
  box-sizing: border-box;
  min-width: 0;
}

.cl-activity-card-desc {
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  max-width: calc(100% - 80px);
  box-sizing: border-box;
}

.cl-activity-card-desc-block .cl-activity-card-desc {
  max-width: 100%;
}

.matter-activity-card__description.cl-activity-card-desc {
  white-space: normal;
}

[data-theme='dark'] .cl-activity-card-desc,
[data-theme="dark"] .cl-activity-card-desc,
[data-theme='dark'] .trix-content.cl-activity-card-desc,
[data-theme="dark"] .trix-content.cl-activity-card-desc {
  color: var(--color-text-secondary);
  background: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

.cl-activity-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}

.cl-activity-card-footer__left {
  flex: 1 1 auto;
  min-width: 0;
}

a.matter-activity-card__title {
  color: inherit;
  text-decoration: none;
}

a.matter-activity-card__title:hover {
  color: var(--brand-viridian, #007066);
  text-decoration: underline;
}

.activity-row-wrap.cl-activity-card .matter-activity-card {
  flex: 1;
  min-width: 0;
}

/* Task status pills on cards: active pill always visible; inactive hidden until card hover (modal: .cl-task-status-pills--modal) */
.cl-task-status-pills--modal .cl-task-status-pill {
  opacity: 1;
  pointer-events: auto;
}

.cl-task-status-pills:not(.cl-task-status-pills--modal) .cl-task-status-pill.is-active {
  opacity: 1;
  pointer-events: auto;
}

.cl-task-status-pills:not(.cl-task-status-pills--modal) .cl-task-status-pill:not(.is-active) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.cl-activity-card:hover
  .cl-task-status-pills:not(.cl-pills-locked):not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active),
.cl-activity-card:focus-within
  .cl-task-status-pills:not(.cl-pills-locked):not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active),
.matter-activity-card:hover
  .cl-task-status-pills:not(.cl-pills-locked):not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active),
.matter-activity-card:focus-within
  .cl-task-status-pills:not(.cl-pills-locked):not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active),
.activity-card:hover
  .cl-task-status-pills:not(.cl-pills-locked):not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active),
.activity-card:focus-within
  .cl-task-status-pills:not(.cl-pills-locked):not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active),
.activity-row-wrap:hover
  .cl-task-status-pills:not(.cl-pills-locked):not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active),
.activity-row-wrap:focus-within
  .cl-task-status-pills:not(.cl-pills-locked):not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active),
.activity-feed-item:hover
  .cl-task-status-pills:not(.cl-pills-locked):not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active),
.activity-feed-item:focus-within
  .cl-task-status-pills:not(.cl-pills-locked):not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active),
.cl-task-status-pills:not(.cl-pills-locked):focus-within:not(.cl-task-status-pills--modal)
  .cl-task-status-pill:not(.is-active) {
  opacity: 1;
  pointer-events: auto;
}

/* Complete: keep inactive pills hidden and inert on hover */
.cl-activity-card:has(.cl-task-status-pill--complete.is-active):hover .cl-task-status-pill:not(.is-active) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cl-task-status-pills.cl-pills-locked:not(.cl-task-status-pills--modal) .cl-task-status-pill:not(.is-active) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cl-task-status-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.cl-task-status-pill {
  box-sizing: border-box;
  border: 0.5px solid var(--color-border-secondary, var(--border));
  background: var(--bg-secondary, #fff);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-main);
  cursor: pointer;
  pointer-events: auto;
}

.cl-task-status-pill--complete.is-active,
.cl-task-status-pill--overdue.is-active {
  pointer-events: auto;
}

.cl-task-status-pill--overdue {
  cursor: pointer;
}

.cl-task-status-pill.is-active {
  font-weight: 600;
}

.cl-blame-medals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.cl-action-modal .cl-task-status-pills--modal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.cl-am-status-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cl-am-status-pill {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 0.8rem;
  cursor: pointer;
}

.cl-am-status-pill.is-active {
  border-color: #007066;
  background: rgba(0, 112, 102, 0.12);
  font-weight: 600;
}

button.cl-action-pill {
  font: inherit;
  color: inherit;
}

.cl-activity-blame-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 6px;
}

.cl-activity-blame-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cl-activity-blame-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.cl-blame-medal--card {
  width: 22px;
  height: 22px;
}

.activity-row-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.activity-row-wrap .activity-row {
  flex: 1;
}

.activity-row-edit {
  border: none;
  background: transparent;
  padding: 12px 10px;
  color: var(--text-muted);
  align-self: flex-start;
}

.activity-row-edit:hover {
  color: #007066;
}

.activity-feed-edit {
  border: none;
  background: transparent;
  padding: 4px 6px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.activity-feed-edit:hover {
  color: #007066;
}

/* Global action modal — assignee pills (max 2) */
.cl-am-assignee-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cl-am-assignee-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}

.cl-am-assignee-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 6px 2px 8px;
  border-radius: 999px;
  background: var(--bg-secondary, #f4f4f2);
  border: 1px solid var(--color-border-secondary, var(--border));
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-main);
}

.cl-am-assignee-pill__initials {
  font-weight: 600;
  color: var(--text-muted);
}

.cl-am-assignee-pill__rm {
  border: none;
  background: transparent;
  padding: 0 2px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
}

.cl-am-assignee-pill__rm:hover {
  color: var(--text-main);
}

.cl-am-assignee-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin: 2px 0 0;
  padding: 4px 0;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cl-am-assignee-dropdown .dropdown-item {
  font-size: 0.8rem;
  padding: 6px 10px;
}