/**
 * Filing Notes - Soft Pastel Legal Color Palette
 *
 * A softer, pastel-toned color scheme with Bootstrap 5 CSS variable overrides.
 * Designed for a gentle, approachable feel while maintaining professionalism.
 */

:root {
    /* Primary Colors */
    --bs-primary: #4A5E80;
    --bs-primary-rgb: 74, 94, 128;

    --bs-secondary: #7B95B8;
    --bs-secondary-rgb: 123, 149, 184;

    /* Accent Gold */
    --accent: #D4AD6A;
    --accent-rgb: 212, 173, 106;
    --accent-hover: #C9A05E;
    --accent-active: #BE9555;

    /* Semantic Colors */
    --bs-success: #6BAF8D;
    --bs-success-rgb: 107, 175, 141;

    --bs-warning: #DEB36A;
    --bs-warning-rgb: 222, 179, 106;

    --bs-danger: #C87272;
    --bs-danger-rgb: 200, 114, 114;

    --bs-info: #7AAFC4;
    --bs-info-rgb: 122, 175, 196;

    /* Light/Background */
    --bs-light: #F0F1F4;
    --bs-light-rgb: 240, 241, 244;

    /* Body & Text */
    --bs-body-color: #4A5060;
    --bs-body-color-rgb: 74, 80, 96;
    --bs-body-bg: #F0F1F4;

    /* Muted Text */
    --muted-text: #8A90A0;

    /* Borders */
    --bs-border-color: #DDDFE5;

    /* Cards */
    --card-bg: #F7F8FA;

    /* Hover Highlight */
    --hover-highlight: #E8EAF0;

    /* Links */
    --bs-link-color: #4A5E80;
    --bs-link-hover-color: #7B95B8;

    /* Typography Scale */
    --fs-2xs:     0.65rem;   /* micro icons, tiny badges, chevrons */
    --fs-xs:      0.72rem;   /* case number pill, date stamps */
    --fs-sm:      0.75rem;   /* panel headers, list items, nav tabs, metadata */
    --fs-md:      0.80rem;   /* todo items, form controls, calendar entries, save-status */
    --fs-sm-body: 0.85rem;   /* secondary body: modal details, info bars, annotations */
    --fs-base:    0.875rem;  /* primary body: note editor, markdown prose */
    --fs-ui:      0.90rem;   /* add-buttons, toolbar actions */
    --fs-nav:     0.95rem;   /* case name links, markdown h4 */
    --fs-input:   1rem;      /* editor title input, standard form fields */
    --fs-md-h3:   1.05rem;   /* markdown h3 */
    --fs-md-h2:   1.20rem;   /* markdown h2 */
    --fs-md-h1:   1.40rem;   /* markdown h1 */
}

/* ============================================
   Body & Background
   ============================================ */

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: var(--fs-base);
}

/* ============================================
   Heading Scale
   ============================================ */

h1, .h1 { font-size: var(--fs-md-h1); }
h2, .h2 { font-size: var(--fs-md-h2); }
h3, .h3 { font-size: var(--fs-md-h3); }
h4, .h4 { font-size: var(--fs-nav); }
h5, .h5 { font-size: var(--fs-base); }
h6, .h6 { font-size: var(--fs-md); }

/* ============================================
   Navbar Styling
   ============================================ */

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

.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: #FFFFFF;
}

.navbar-dark .nav-link.active {
    color: #FFFFFF;
}

/* ============================================
   Primary Button
   ============================================ */

.btn-primary {
    --bs-btn-bg: #4A5E80;
    --bs-btn-border-color: #4A5E80;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #435670;
    --bs-btn-hover-border-color: #435670;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #3E4F66;
    --bs-btn-active-border-color: #3E4F66;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-disabled-bg: #4A5E80;
    --bs-btn-disabled-border-color: #4A5E80;
    --bs-btn-disabled-color: #FFFFFF;
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(74, 94, 128, 0.4);
}

.btn-outline-primary {
    --bs-btn-color: #4A5E80;
    --bs-btn-border-color: #4A5E80;
    --bs-btn-hover-bg: #4A5E80;
    --bs-btn-hover-border-color: #4A5E80;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #435670;
    --bs-btn-active-border-color: #435670;
    --bs-btn-active-color: #FFFFFF;
}

.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(74, 94, 128, 0.4);
}

/* ============================================
   Secondary Button
   ============================================ */

.btn-secondary {
    --bs-btn-bg: #7B95B8;
    --bs-btn-border-color: #7B95B8;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #6E87A8;
    --bs-btn-hover-border-color: #6E87A8;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #637A9A;
    --bs-btn-active-border-color: #637A9A;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-disabled-bg: #7B95B8;
    --bs-btn-disabled-border-color: #7B95B8;
    --bs-btn-disabled-color: #FFFFFF;
}

.btn-secondary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(123, 149, 184, 0.4);
}

.btn-outline-secondary {
    --bs-btn-color: #7B95B8;
    --bs-btn-border-color: #7B95B8;
    --bs-btn-hover-bg: #7B95B8;
    --bs-btn-hover-border-color: #7B95B8;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #6E87A8;
    --bs-btn-active-border-color: #6E87A8;
    --bs-btn-active-color: #FFFFFF;
}

.btn-outline-secondary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(123, 149, 184, 0.4);
}

/* ============================================
   Accent (Soft Gold) Button & Utilities
   ============================================ */

.btn-accent {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
}

.btn-accent:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #FFFFFF;
}

.btn-accent:active,
.btn-accent.active {
    background-color: var(--accent-active);
    border-color: var(--accent-active);
    color: #FFFFFF;
}

.btn-accent:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(212, 173, 106, 0.4);
}

.btn-accent:disabled,
.btn-accent.disabled {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
    opacity: 0.65;
}

.btn-outline-accent {
    color: var(--accent);
    border-color: var(--accent);
    background-color: transparent;
}

.btn-outline-accent:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
}

.btn-outline-accent:active,
.btn-outline-accent.active {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #FFFFFF;
}

.btn-outline-accent:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(212, 173, 106, 0.4);
}

/* Text Accent */
.text-accent {
    color: var(--accent) !important;
}

/* Background Accent */
.bg-accent {
    background-color: var(--accent) !important;
}

/* Border Accent */
.border-accent {
    border-color: var(--accent) !important;
}

/* Badge Accent */
.badge-accent,
.badge.bg-accent {
    background-color: var(--accent) !important;
    color: #FFFFFF;
}

/* ============================================
   Success Button
   ============================================ */

.btn-success {
    --bs-btn-bg: #6BAF8D;
    --bs-btn-border-color: #6BAF8D;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #5FA07F;
    --bs-btn-hover-border-color: #5FA07F;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #559272;
    --bs-btn-active-border-color: #559272;
    --bs-btn-active-color: #FFFFFF;
}

.btn-success:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(107, 175, 141, 0.4);
}

.btn-outline-success {
    --bs-btn-color: #6BAF8D;
    --bs-btn-border-color: #6BAF8D;
    --bs-btn-hover-bg: #6BAF8D;
    --bs-btn-hover-border-color: #6BAF8D;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #5FA07F;
    --bs-btn-active-border-color: #5FA07F;
    --bs-btn-active-color: #FFFFFF;
}

/* ============================================
   Warning Button
   ============================================ */

.btn-warning {
    --bs-btn-bg: #DEB36A;
    --bs-btn-border-color: #DEB36A;
    --bs-btn-color: #4A5060;
    --bs-btn-hover-bg: #D1A65E;
    --bs-btn-hover-border-color: #D1A65E;
    --bs-btn-hover-color: #4A5060;
    --bs-btn-active-bg: #C59A55;
    --bs-btn-active-border-color: #C59A55;
    --bs-btn-active-color: #4A5060;
}

.btn-warning:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(222, 179, 106, 0.4);
}

.btn-outline-warning {
    --bs-btn-color: #DEB36A;
    --bs-btn-border-color: #DEB36A;
    --bs-btn-hover-bg: #DEB36A;
    --bs-btn-hover-border-color: #DEB36A;
    --bs-btn-hover-color: #4A5060;
    --bs-btn-active-bg: #D1A65E;
    --bs-btn-active-border-color: #D1A65E;
    --bs-btn-active-color: #4A5060;
}

/* ============================================
   Danger Button
   ============================================ */

.btn-danger {
    --bs-btn-bg: #C87272;
    --bs-btn-border-color: #C87272;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #BA6666;
    --bs-btn-hover-border-color: #BA6666;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #AD5C5C;
    --bs-btn-active-border-color: #AD5C5C;
    --bs-btn-active-color: #FFFFFF;
}

.btn-danger:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(200, 114, 114, 0.4);
}

.btn-outline-danger {
    --bs-btn-color: #C87272;
    --bs-btn-border-color: #C87272;
    --bs-btn-hover-bg: #C87272;
    --bs-btn-hover-border-color: #C87272;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #BA6666;
    --bs-btn-active-border-color: #BA6666;
    --bs-btn-active-color: #FFFFFF;
}

/* ============================================
   Info Button
   ============================================ */

.btn-info {
    --bs-btn-bg: #7AAFC4;
    --bs-btn-border-color: #7AAFC4;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #6DA1B6;
    --bs-btn-hover-border-color: #6DA1B6;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #6294A9;
    --bs-btn-active-border-color: #6294A9;
    --bs-btn-active-color: #FFFFFF;
}

.btn-info:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(122, 175, 196, 0.4);
}

.btn-outline-info {
    --bs-btn-color: #7AAFC4;
    --bs-btn-border-color: #7AAFC4;
    --bs-btn-hover-bg: #7AAFC4;
    --bs-btn-hover-border-color: #7AAFC4;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #6DA1B6;
    --bs-btn-active-border-color: #6DA1B6;
    --bs-btn-active-color: #FFFFFF;
}

/* ============================================
   Light Button
   ============================================ */

.btn-light {
    --bs-btn-bg: #F0F1F4;
    --bs-btn-border-color: #DDDFE5;
    --bs-btn-color: #4A5060;
    --bs-btn-hover-bg: #E8EAF0;
    --bs-btn-hover-border-color: #D0D3DB;
    --bs-btn-hover-color: #4A5060;
    --bs-btn-active-bg: #E0E2E8;
    --bs-btn-active-border-color: #C5C8D0;
    --bs-btn-active-color: #4A5060;
}

.btn-light:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(221, 223, 229, 0.5);
}

/* ============================================
   Cards
   ============================================ */

.card {
    background-color: var(--card-bg);
    border-color: var(--bs-border-color);
}

.card-header {
    background-color: #EDEEF2;
    border-bottom-color: var(--bs-border-color);
}

/* ============================================
   Alerts
   ============================================ */

.alert-primary {
    --bs-alert-color: #3A4A60;
    --bs-alert-bg: #E2E6ED;
    --bs-alert-border-color: #D5DBE5;
}

.alert-secondary {
    --bs-alert-color: #4A5A70;
    --bs-alert-bg: #E8EDF4;
    --bs-alert-border-color: #DBE2ED;
}

.alert-success {
    --bs-alert-color: #3A5A48;
    --bs-alert-bg: #E4F0E9;
    --bs-alert-border-color: #D6E8DE;
}

.alert-warning {
    --bs-alert-color: #5A4A30;
    --bs-alert-bg: #F8F0E2;
    --bs-alert-border-color: #F2E8D5;
}

.alert-danger {
    --bs-alert-color: #5A3A3A;
    --bs-alert-bg: #F4E6E6;
    --bs-alert-border-color: #EEDAD8;
}

.alert-info {
    --bs-alert-color: #3A5560;
    --bs-alert-bg: #E6F0F4;
    --bs-alert-border-color: #D8E8EE;
}

/* ============================================
   Badges
   ============================================ */

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

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

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

.badge.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #4A5060;
}

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

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

/* ============================================
   Forms
   ============================================ */

.form-control,
.form-select {
    color: var(--bs-body-color);
    background-color: #FFFFFF;
    border-color: var(--bs-border-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(123, 149, 184, 0.25);
}

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

.form-check-input:focus {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(74, 94, 128, 0.25);
}

.form-label {
    color: var(--bs-body-color);
}

/* ============================================
   Links
   ============================================ */

a {
    color: var(--bs-link-color);
}

a:hover {
    color: var(--bs-link-hover-color);
}

/* ============================================
   Tables
   ============================================ */

.table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(74, 94, 128, 0.03);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(74, 94, 128, 0.06);
}

.table thead th {
    color: var(--bs-body-color);
}

/* ============================================
   Pagination
   ============================================ */

.page-link {
    color: var(--bs-primary);
    background-color: var(--card-bg);
    border-color: var(--bs-border-color);
}

.page-link:hover {
    color: var(--bs-primary);
    background-color: var(--hover-highlight);
    border-color: var(--bs-border-color);
}

.page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(74, 94, 128, 0.25);
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ============================================
   Dropdown
   ============================================ */

.dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--bs-border-color);
}

.dropdown-item {
    color: var(--bs-body-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--hover-highlight);
    color: var(--bs-body-color);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bs-primary);
    color: #FFFFFF;
}

/* Navbar dropdown fix - ensure dark text on light dropdown background */
.navbar .dropdown-menu {
    background-color: var(--card-bg);
}

.navbar .dropdown-menu .dropdown-item {
    color: var(--bs-body-color) !important;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: var(--hover-highlight);
    color: var(--bs-body-color) !important;
}

.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
    background-color: var(--bs-primary);
    color: #FFFFFF !important;
}

.navbar .dropdown-menu .dropdown-item i {
    color: var(--muted-text);
}

/* ============================================
   Text Utilities
   ============================================ */

.text-muted {
    color: var(--muted-text) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.text-secondary {
    color: var(--bs-secondary) !important;
}

.text-success {
    color: var(--bs-success) !important;
}

.text-warning {
    color: var(--bs-warning) !important;
}

.text-danger {
    color: var(--bs-danger) !important;
}

.text-info {
    color: var(--bs-info) !important;
}

/* Ensure no harsh black text */
.text-dark {
    color: #4A5060 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bs-body-color);
}

/* Headings inside colored backgrounds should be white */
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary h4, .bg-secondary h5, .bg-secondary h6,
.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6,
.bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5, .bg-danger h6,
.bg-info h1, .bg-info h2, .bg-info h3, .bg-info h4, .bg-info h5, .bg-info h6,
.bg-accent h1, .bg-accent h2, .bg-accent h3, .bg-accent h4, .bg-accent h5, .bg-accent h6 {
    color: #FFFFFF !important;
}

/* Headings inside warning background should be dark */
.bg-warning h1, .bg-warning h2, .bg-warning h3, .bg-warning h4, .bg-warning h5, .bg-warning h6 {
    color: #4A5060 !important;
}

/* ============================================
   Background Utilities
   ============================================ */

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

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

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

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

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

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

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

/* ============================================
   Border Utilities
   ============================================ */

.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-secondary {
    border-color: var(--bs-secondary) !important;
}

.border-success {
    border-color: var(--bs-success) !important;
}

.border-warning {
    border-color: var(--bs-warning) !important;
}

.border-danger {
    border-color: var(--bs-danger) !important;
}

.border-info {
    border-color: var(--bs-info) !important;
}

/* ============================================
   List Groups
   ============================================ */

.list-group-item {
    background-color: var(--card-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #FFFFFF;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--hover-highlight);
    color: var(--bs-body-color);
}

/* ============================================
   Progress Bars
   ============================================ */

.progress {
    background-color: #E8EAF0;
}

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

/* ============================================
   Spinners
   ============================================ */

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--bs-primary) !important;
}

/* ============================================
   Accordion
   ============================================ */

.accordion-button {
    color: var(--bs-body-color);
    background-color: var(--card-bg);
}

.accordion-button:not(.collapsed) {
    color: var(--bs-primary);
    background-color: rgba(74, 94, 128, 0.08);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(74, 94, 128, 0.25);
    border-color: var(--bs-border-color);
}

.accordion-item {
    border-color: var(--bs-border-color);
    background-color: var(--card-bg);
}

.accordion-body {
    background-color: var(--card-bg);
    color: var(--bs-body-color);
}

/* Accordion with primary background tint */
.accordion-button.bg-primary.bg-opacity-10,
.accordion-button.bg-primary[class*="bg-opacity"] {
    color: var(--bs-body-color);
}

.accordion-button.bg-primary.bg-opacity-10 small,
.accordion-button.bg-primary[class*="bg-opacity"] small,
.accordion-button.bg-primary.bg-opacity-10 .text-muted,
.accordion-button.bg-primary[class*="bg-opacity"] .text-muted {
    color: var(--muted-text) !important;
}

/* ============================================
   Dark Background Text Contrast
   Ensures white/light text on colored backgrounds
   ============================================ */

/* Primary background - white text */
.bg-primary,
.bg-primary.card-header,
.card-header.bg-primary,
.card .card-header.bg-primary {
    color: #FFFFFF !important;
}

.bg-primary small,
.bg-primary .small,
.bg-primary .text-muted,
.card-header.bg-primary small,
.card-header.bg-primary .small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-primary a:not(.btn),
.card-header.bg-primary a:not(.btn) {
    color: rgba(255, 255, 255, 0.9) !important;
}

.bg-primary a:not(.btn):hover,
.card-header.bg-primary a:not(.btn):hover {
    color: #FFFFFF !important;
}

/* Secondary background - white text */
.bg-secondary,
.bg-secondary.card-header,
.card-header.bg-secondary,
.card .card-header.bg-secondary {
    color: #FFFFFF !important;
}

.bg-secondary small,
.bg-secondary .small,
.bg-secondary .text-muted,
.card-header.bg-secondary small,
.card-header.bg-secondary .small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-secondary a:not(.btn),
.card-header.bg-secondary a:not(.btn) {
    color: rgba(255, 255, 255, 0.9) !important;
}

.bg-secondary a:not(.btn):hover,
.card-header.bg-secondary a:not(.btn):hover {
    color: #FFFFFF !important;
}

/* Success background - white text */
.bg-success,
.bg-success.card-header,
.card-header.bg-success,
.card .card-header.bg-success {
    color: #FFFFFF !important;
}

.bg-success small,
.bg-success .small,
.bg-success .text-muted,
.card-header.bg-success small,
.card-header.bg-success .small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-success a:not(.btn),
.card-header.bg-success a:not(.btn) {
    color: rgba(255, 255, 255, 0.9) !important;
}

.bg-success a:not(.btn):hover,
.card-header.bg-success a:not(.btn):hover {
    color: #FFFFFF !important;
}

/* Danger background - white text */
.bg-danger,
.bg-danger.card-header,
.card-header.bg-danger,
.card .card-header.bg-danger {
    color: #FFFFFF !important;
}

.bg-danger small,
.bg-danger .small,
.bg-danger .text-muted,
.card-header.bg-danger small,
.card-header.bg-danger .small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-danger a:not(.btn),
.card-header.bg-danger a:not(.btn) {
    color: rgba(255, 255, 255, 0.9) !important;
}

.bg-danger a:not(.btn):hover,
.card-header.bg-danger a:not(.btn):hover {
    color: #FFFFFF !important;
}

/* Info background - white text */
.bg-info,
.bg-info.card-header,
.card-header.bg-info,
.card .card-header.bg-info {
    color: #FFFFFF !important;
}

.bg-info small,
.bg-info .small,
.bg-info .text-muted,
.card-header.bg-info small,
.card-header.bg-info .small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-info a:not(.btn),
.card-header.bg-info a:not(.btn) {
    color: rgba(255, 255, 255, 0.9) !important;
}

.bg-info a:not(.btn):hover,
.card-header.bg-info a:not(.btn):hover {
    color: #FFFFFF !important;
}

/* Warning background - dark text for contrast */
.bg-warning,
.bg-warning.card-header,
.card-header.bg-warning,
.card .card-header.bg-warning {
    color: #4A5060 !important;
}

.bg-warning small,
.bg-warning .small,
.bg-warning .text-muted,
.card-header.bg-warning small,
.card-header.bg-warning .small {
    color: rgba(74, 80, 96, 0.75) !important;
}

/* Accent background - white text */
.bg-accent,
.card-header.bg-accent,
.card .card-header.bg-accent {
    color: #FFFFFF !important;
}

.bg-accent small,
.bg-accent .small,
.bg-accent .text-muted,
.card-header.bg-accent small,
.card-header.bg-accent .small {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* text-white class - ensure it works on card headers */
.card-header.text-white,
.card .card-header.text-white,
.text-white {
    color: #FFFFFF !important;
}

/* ============================================
   Modal
   ============================================ */

.modal-content {
    background-color: var(--card-bg);
    border-color: var(--bs-border-color);
}

.modal-header {
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.modal-footer {
    border-top-color: var(--bs-border-color);
}

.modal-title {
    color: var(--bs-body-color);
}

/* ============================================
   Breadcrumb
   ============================================ */

.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item a {
    color: var(--bs-link-color);
}

.breadcrumb-item.active {
    color: var(--muted-text);
}

/* ============================================
   Nav Tabs & Pills
   ============================================ */

.nav-link {
    color: var(--bs-body-color);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--bs-primary);
}

.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    background-color: var(--card-bg);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--card-bg);
}

.nav-pills .nav-link.active {
    background-color: var(--bs-primary);
    color: #FFFFFF;
}

/* ============================================
   Toast
   ============================================ */

.toast {
    background-color: var(--card-bg);
    border-color: var(--bs-border-color);
}

.toast-header {
    background-color: #EDEEF2;
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.toast-body {
    color: var(--bs-body-color);
}

/* ============================================
   Tooltip & Popover
   ============================================ */

.tooltip-inner {
    background-color: var(--bs-primary);
}

.popover {
    background-color: var(--card-bg);
    border-color: var(--bs-border-color);
}

.popover-header {
    background-color: #EDEEF2;
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.popover-body {
    color: var(--bs-body-color);
}

/* ============================================
   Close Button
   ============================================ */

.btn-close {
    opacity: 0.5;
}

.btn-close:hover {
    opacity: 0.75;
}

/* ============================================
   Text utilities on dark backgrounds
   Helper classes for manual control
   ============================================ */

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   Ensure soft text everywhere
   Override any remaining black text
   ============================================ */

.text-body {
    color: var(--bs-body-color) !important;
}

small, .small {
    color: var(--muted-text);
}

/* Form text and help text */
.form-text {
    color: var(--muted-text);
}

/* Blockquote */
blockquote {
    color: var(--bs-body-color);
}

.blockquote-footer {
    color: var(--muted-text);
}

/* Code */
code {
    color: var(--bs-danger);
}

pre {
    color: var(--bs-body-color);
}

/* ============================================
   Calendar
   ============================================ */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: var(--bs-border-color);
    border: 1px solid var(--bs-border-color);
}

.calendar-header {
    background-color: var(--bs-primary);
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.calendar-day {
    background-color: white;
    min-height: 120px;
    padding: 8px;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.calendar-day.other-month {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.calendar-day.today {
    background-color: var(--bs-warning-bg-subtle);
}

.calendar-day-number {
    font-weight: bold;
    margin-bottom: 5px;
}

.calendar-appointment {
    font-size: var(--fs-md);
    padding: 2px 5px;
    margin-bottom: 2px;
    border-radius: 3px;
    color: white;
    text-decoration: none;
    display: block;
    line-height: 1.3;
    overflow: hidden;
    min-width: 0;
}

.calendar-appointment:hover {
    color: white;
    opacity: 0.8;
}

.calendar-appointment-title {
    overflow-wrap: break-word;
    word-break: break-word;
}

.calendar-appointment-location {
    font-size: var(--fs-sm);
    opacity: 0.9;
    overflow-wrap: break-word;
    word-break: break-word;
    margin-top: 1px;
}

.calendar-appointment-location i {
    font-size: var(--fs-2xs);
    margin-right: 2px;
}

.agenda-view .agenda-date {
    background-color: var(--bs-tertiary-bg);
    padding: 10px;
    font-weight: bold;
    margin-top: 15px;
    border-left: 4px solid var(--bs-primary);
}

.agenda-view .agenda-item {
    padding: 10px;
    border-bottom: 1px solid var(--bs-border-color);
}

.view-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.view-toggle input[type="radio"] {
    display: none;
}

.view-toggle label {
    padding: 8px 20px;
    border: 1px solid var(--bs-primary);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.view-toggle input[type="radio"]:checked + label {
    background-color: var(--bs-primary);
    color: white;
}

.calendar-grid {
    background-color: var(--bs-border-color) !important;
    border-color: var(--bs-border-color) !important;
}

.calendar-header {
    background-color: var(--bs-primary) !important;
    color: #FFFFFF !important;
}

.calendar-day {
    background-color: var(--card-bg) !important;
    color: var(--bs-body-color) !important;
}

.calendar-day.other-month {
    background-color: var(--bs-light) !important;
    color: var(--muted-text) !important;
}

.calendar-day.today {
    background-color: #F5EED8 !important;
    border: 2px solid var(--accent) !important;
}

.calendar-day-number {
    color: var(--bs-body-color);
}

.calendar-day.other-month .calendar-day-number {
    color: var(--muted-text);
}

.calendar-day.today .calendar-day-number {
    color: var(--bs-primary);
    font-weight: bold;
}

/* Agenda view */
.agenda-view .agenda-date {
    background-color: var(--hover-highlight) !important;
    border-left-color: var(--bs-primary) !important;
    color: var(--bs-body-color) !important;
}

.agenda-view .agenda-item {
    border-bottom-color: var(--bs-border-color) !important;
    color: var(--bs-body-color);
}

.agenda-view .agenda-item h6 {
    color: var(--bs-body-color);
}

.agenda-view .agenda-item a {
    color: var(--bs-link-color);
}

.agenda-view .agenda-item a:hover {
    color: var(--bs-link-hover-color);
}

/* View toggle */
.view-toggle label {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary);
    background-color: var(--card-bg);
}

.view-toggle label:hover {
    background-color: var(--hover-highlight);
}

.view-toggle input[type="radio"]:checked + label {
    background-color: var(--bs-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--bs-primary) !important;
}

/* Calendar appointments */
.calendar-appointment {
    font-size: var(--fs-md);
    padding: 3px 6px;
    margin-bottom: 3px;
    border-radius: 4px;
    background-color: var(--appointment-color, var(--bs-primary));
    color: #FFFFFF !important;
    text-decoration: none;
    display: block;
    line-height: 1.3;
    transition: opacity 0.2s ease;
    overflow: hidden;
    min-width: 0;
}

.calendar-appointment:hover {
    color: #FFFFFF !important;
    opacity: 0.85;
    text-decoration: none;
}

/* Appointment type badge in agenda view */
.appointment-type-badge {
    background-color: var(--appointment-color, var(--bs-primary)) !important;
    color: #FFFFFF !important;
}

.calendar-appointment-title {
    overflow-wrap: break-word;
    word-break: break-word;
    font-weight: 500;
}

.calendar-appointment-location {
    font-size: var(--fs-sm);
    opacity: 0.9;
    overflow-wrap: break-word;
    word-break: break-word;
    margin-top: 2px;
}

.calendar-appointment-location i {
    font-size: var(--fs-2xs);
    margin-right: 2px;
}

/* ============================================
   Navbar Search Input - compact with focus expand
   ============================================ */

@media (min-width: 992px) {
    .navbar-search-input {
        width: 120px;
        transition: width 0.3s ease;
    }

    .navbar-search-input:focus {
        width: 220px;
    }
}

/* ============================================
   Navbar Dropdown z-index fix
   ============================================ */

.navbar .dropdown-menu {
    z-index: 1060;
}

/* ============================================
   Summernote WYSIWYG Editor
   ============================================ */

.note-editor.note-frame {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

.note-editor.note-frame .note-editing-area .note-editable {
    background-color: #FFFFFF;
    color: var(--bs-body-color);
    min-height: 200px;
    padding: 0.75rem;
}

.note-editor.note-frame .note-toolbar {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.25rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.note-editor .note-btn {
    background: transparent;
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.note-editor .note-btn:hover {
    background-color: var(--hover-highlight);
    color: var(--bs-body-color);
}

.note-editor .note-btn.active,
.note-editor .note-btn:active {
    background-color: var(--bs-primary);
    color: #FFFFFF;
    border-color: var(--bs-primary);
}

.note-editor.note-frame .note-editing-area .note-editable:focus {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(123, 149, 184, 0.25);
    outline: none;
}

.note-editor .note-statusbar {
    background-color: var(--card-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* WYSIWYG content display styling */
.wysiwyg-content {
    line-height: 1.6;
}

.wysiwyg-content p {
    margin-bottom: 0.5rem;
}

.wysiwyg-content ul,
.wysiwyg-content ol {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.wysiwyg-content blockquote {
    border-left: 3px solid var(--bs-border-color);
    padding-left: 1rem;
    margin-left: 0;
    color: var(--muted-text);
}

.wysiwyg-content pre {
    background-color: var(--hover-highlight);
    padding: 0.75rem;
    border-radius: 0.25rem;
    overflow-x: auto;
}

.wysiwyg-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
}

.wysiwyg-content figure {
    margin: 0.5rem 0;
}

/* Summernote image styling */
.note-editable img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   Statute of Limitations
   ============================================ */

/* Case list row with expiring statute */
.table tr.statute-expiring > td {
    background-color: #F4E6E6 !important;
}

.table-hover > tbody > tr.statute-expiring:hover > td {
    background-color: #EEDAD8 !important;
}

/* Notebook badge for expiring statute */
.case-badge.case-badge-expiring {
    color: #C87272;
    background-color: #F4E6E6;
    border-radius: 0.25rem;
    padding: 0.1rem 0.3rem;
}

/* Calendar statute marker */
.calendar-statute {
    font-size: var(--fs-sm);
    padding: 2px 5px;
    margin-bottom: 2px;
    border-radius: 3px;
    background-color: #F4E6E6;
    color: #C87272 !important;
    display: block;
    border: 1px solid #EEDAD8;
    font-weight: 500;
    text-decoration: none;
}

.calendar-statute:hover {
    background-color: #EEDAD8;
}

/* Mobile: full-width navbar sections with proper spacing */
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }

    .navbar .quick-actions {
        padding: 0.5rem 0;
    }

    .navbar .navbar-search {
        width: 100%;
        padding: 0.5rem 0;
    }

    .navbar .navbar-search-input {
        width: 100%;
    }

    .navbar .navbar-utility {
        padding: 0.5rem 0;
    }
}

/* ============================================
   DARK MODE
   Bootstrap 5.3 data-bs-theme overrides
   ============================================ */

[data-bs-theme="dark"] {
    /* Body & Background */
    --bs-body-bg: #1A1D22;
    --bs-body-color: #D0D4DC;
    --bs-body-color-rgb: 208, 212, 220;

    /* Cards */
    --card-bg: #22262C;

    /* Borders */
    --bs-border-color: #3A3F48;

    /* Hover Highlight */
    --hover-highlight: #2E333A;

    /* Muted Text */
    --muted-text: #808894;

    /* Light */
    --bs-light: #2A2D32;
    --bs-light-rgb: 42, 45, 50;

    /* Links */
    --bs-link-color: #8AAAC8;
    --bs-link-hover-color: #A0BCD8;
}

/* Form controls in dark mode */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #2A2E34;
    color: #D0D4DC;
    border-color: #3A3F48;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #2A2E34;
    color: #D0D4DC;
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(123, 149, 184, 0.2);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #808894;
}

[data-bs-theme="dark"] .form-floating > label {
    color: #808894;
}

/* Card headers */
[data-bs-theme="dark"] .card-header {
    background-color: #2A2E34;
    border-bottom-color: #3A3F48;
}

/* Tables */
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(255, 255, 255, 0.05);
}

/* Calendar */
[data-bs-theme="dark"] .calendar-day {
    background-color: #22262C !important;
}

[data-bs-theme="dark"] .calendar-day.other-month {
    background-color: #1A1D22 !important;
    color: #606870 !important;
}

[data-bs-theme="dark"] .calendar-day.today {
    background-color: #2E2A1E !important;
    border-color: var(--accent) !important;
}

/* Statute of limitations rows */
[data-bs-theme="dark"] .table tr.statute-expiring > td {
    background-color: #2E2020 !important;
}

[data-bs-theme="dark"] .table-hover > tbody > tr.statute-expiring:hover > td {
    background-color: #382424 !important;
}

[data-bs-theme="dark"] .case-badge.case-badge-expiring {
    color: #D88888;
    background-color: #2E2020;
}

[data-bs-theme="dark"] .calendar-statute {
    background-color: #2E2020;
    color: #D88888 !important;
    border-color: #3A2828;
}

[data-bs-theme="dark"] .calendar-statute:hover {
    background-color: #382424;
}

/* Summernote editor */
[data-bs-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable {
    background-color: #2A2E34;
    color: #D0D4DC;
}

[data-bs-theme="dark"] .note-editor.note-frame .note-toolbar {
    background-color: #22262C;
    border-bottom-color: #3A3F48;
}

[data-bs-theme="dark"] .note-editor .note-btn {
    color: #D0D4DC;
    border-color: #3A3F48;
}

[data-bs-theme="dark"] .note-editor .note-btn:hover {
    background-color: #2E333A;
}

[data-bs-theme="dark"] .note-editor.note-frame .note-statusbar {
    background-color: #22262C;
    border-top-color: #3A3F48;
}

/* Alerts */
[data-bs-theme="dark"] .alert-primary {
    --bs-alert-color: #A0B0C8;
    --bs-alert-bg: #1E2430;
    --bs-alert-border-color: #2A3340;
}

[data-bs-theme="dark"] .alert-secondary {
    --bs-alert-color: #A0B0C8;
    --bs-alert-bg: #1E2430;
    --bs-alert-border-color: #2A3340;
}

[data-bs-theme="dark"] .alert-success {
    --bs-alert-color: #88C8A0;
    --bs-alert-bg: #1A2820;
    --bs-alert-border-color: #243828;
}

[data-bs-theme="dark"] .alert-warning {
    --bs-alert-color: #D8C888;
    --bs-alert-bg: #282418;
    --bs-alert-border-color: #383020;
}

[data-bs-theme="dark"] .alert-danger {
    --bs-alert-color: #D89898;
    --bs-alert-bg: #281A1A;
    --bs-alert-border-color: #382424;
}

[data-bs-theme="dark"] .alert-info {
    --bs-alert-color: #88B8D0;
    --bs-alert-bg: #1A2428;
    --bs-alert-border-color: #243038;
}

/* btn-light inversion for dark mode */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: #2A2D32;
    --bs-btn-border-color: #3A3F48;
    --bs-btn-color: #D0D4DC;
    --bs-btn-hover-bg: #343840;
    --bs-btn-hover-border-color: #444950;
    --bs-btn-hover-color: #D0D4DC;
    --bs-btn-active-bg: #3E4248;
    --bs-btn-active-border-color: #4E5258;
    --bs-btn-active-color: #D0D4DC;
}

/* Agenda view */
[data-bs-theme="dark"] .agenda-view .agenda-date {
    background-color: #2A2E34 !important;
    border-left-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .agenda-view .agenda-item {
    border-bottom-color: #3A3F48 !important;
}

/* View toggle */
[data-bs-theme="dark"] .view-toggle label {
    background-color: #22262C;
    color: #8AAAC8;
    border-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .view-toggle label:hover {
    background-color: #2E333A;
}

/* Toast header */
[data-bs-theme="dark"] .toast-header {
    background-color: #2A2E34;
    border-bottom-color: #3A3F48;
    color: #D0D4DC;
}

/* Progress bar background */
[data-bs-theme="dark"] .progress {
    background-color: #2A2E34;
}

/* Popover */
[data-bs-theme="dark"] .popover-header {
    background-color: #2A2E34;
    border-bottom-color: #3A3F48;
    color: #D0D4DC;
}

/* Modal */
[data-bs-theme="dark"] .modal-content {
    background-color: #22262C;
    border-color: #3A3F48;
}

/* Dropdown fix - dark mode dropdowns from navbar */
[data-bs-theme="dark"] .navbar .dropdown-menu {
    background-color: #22262C;
}

[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item {
    color: #D0D4DC !important;
}

[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:focus {
    background-color: #2E333A;
    color: #D0D4DC !important;
}

/* Accordion */
[data-bs-theme="dark"] .accordion-button {
    background-color: #22262C;
    color: #D0D4DC;
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(74, 94, 128, 0.15);
    color: #8AAAC8;
}

[data-bs-theme="dark"] .accordion-item {
    border-color: #3A3F48;
    background-color: #22262C;
}

/* Text dark override */
[data-bs-theme="dark"] .text-dark {
    color: #D0D4DC !important;
}

/* Wysiwyg content pre blocks */
[data-bs-theme="dark"] .wysiwyg-content pre {
    background-color: #2A2E34;
}

/* Close button */
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================
   Notebook panels (three-panel layout)
   ============================================ */

/* Notebook dropdown trigger */
[data-bs-theme="dark"] .notebook-dropdown-trigger {
    background: #1a1d22 !important;
    border-bottom-color: #3A3F48 !important;
    color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .notebook-dropdown-trigger:hover {
    background: #22262C !important;
}

[data-bs-theme="dark"] #notebook-chevron {
    color: var(--bs-secondary-color) !important;
}

/* Sidebar (notebook list) - now a dropdown overlay */
[data-bs-theme="dark"] .notebook-sidebar {
    background: #1E2228 !important;
    border-color: #3A3F48 !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.45) !important;
}

/* Pages panel */
[data-bs-theme="dark"] .notebook-pages {
    border-right-color: #3A3F48 !important;
    background: #22262C !important;
}

/* Panel headers */
[data-bs-theme="dark"] .panel-header {
    border-bottom-color: #3A3F48 !important;
}

/* Panel search */
[data-bs-theme="dark"] .panel-search {
    border-bottom-color: #3A3F48 !important;
}

/* Notebook items */
[data-bs-theme="dark"] .notebook-item {
    border-bottom-color: #2E333A !important;
}

[data-bs-theme="dark"] .notebook-item:hover {
    background: #2E333A !important;
}

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

/* Page items */
[data-bs-theme="dark"] .page-item {
    border-bottom-color: #2E333A !important;
    background: #2A3040 !important;
}

[data-bs-theme="dark"] .page-item:hover {
    background: #303848 !important;
}

[data-bs-theme="dark"] .page-item.active {
    background: #1E2A3A !important;
    border-left-color: var(--bs-primary) !important;
}

/* Folder headers */
[data-bs-theme="dark"] .folder-header {
    border-bottom-color: #2E333A !important;
}

[data-bs-theme="dark"] .folder-header:hover {
    background: #2A2E34 !important;
}

/* Editor title input */
[data-bs-theme="dark"] .editor-title-input {
    background: #22262C !important;
    color: #D0D4DC !important;
    border-bottom-color: #3A3F48 !important;
}

[data-bs-theme="dark"] .editor-title-input:focus {
    border-bottom-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .editor-title-input:read-only {
    background: #1E2228 !important;
    color: #808894 !important;
}

/* Editor body and Summernote within notebook */
[data-bs-theme="dark"] .editor-body .note-editor .note-toolbar {
    border-bottom-color: #3A3F48 !important;
}

/* Context menu */
[data-bs-theme="dark"] .context-menu {
    background: #22262C !important;
    border-color: #3A3F48 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .context-menu .context-menu-item {
    color: #D0D4DC !important;
}

[data-bs-theme="dark"] .context-menu .context-menu-item:hover {
    background: #2E333A !important;
}

[data-bs-theme="dark"] .context-menu .context-menu-item.text-danger:hover {
    background: #2E2020 !important;
}

/* Drag handles */
[data-bs-theme="dark"] .page-drag-handle,
[data-bs-theme="dark"] .folder-drag-handle,
[data-bs-theme="dark"] .notebook-drag-handle {
    color: #606870 !important;
}

/* Sortable ghost */
[data-bs-theme="dark"] .sortable-ghost {
    background: #1E2A3A !important;
}

/* Empty state */
[data-bs-theme="dark"] .empty-state {
    color: #808894 !important;
}

/* AI info bar */
[data-bs-theme="dark"] .ai-info-bar {
    background: #1A2830 !important;
    border-bottom-color: #2A3840 !important;
    color: #88B8D0 !important;
}

/* Case badge */
[data-bs-theme="dark"] .case-badge {
    color: #808894 !important;
}

/* Case modal items */
[data-bs-theme="dark"] .case-modal-item {
    border-bottom-color: #2E333A !important;
}

[data-bs-theme="dark"] .case-modal-item:hover {
    background: #2E333A !important;
}

[data-bs-theme="dark"] .case-modal-item .case-details {
    color: #808894 !important;
}

/* Markdown content in notebook editor */
[data-bs-theme="dark"] .markdown-content blockquote {
    background: #2A2E34 !important;
    border-color: #3A3F48 !important;
    color: #808894 !important;
}

[data-bs-theme="dark"] .markdown-content table th {
    background: #2A2E34 !important;
    border-color: #3A3F48 !important;
}

[data-bs-theme="dark"] .markdown-content table td {
    border-color: #3A3F48 !important;
}

[data-bs-theme="dark"] .markdown-content pre {
    background: #2A2E34 !important;
    border-color: #3A3F48 !important;
}

[data-bs-theme="dark"] .markdown-content code {
    background: #2A2E34 !important;
}

[data-bs-theme="dark"] .markdown-content hr {
    border-color: #3A3F48 !important;
}

/* Btn panel add */
[data-bs-theme="dark"] .btn-panel-add {
    color: #808894 !important;
}

[data-bs-theme="dark"] .btn-panel-add:hover {
    color: var(--bs-primary) !important;
}

/* ============================================================
   Case Cards (Dossier Style — 50/50 split layout)
   ============================================================ */

.case-card {
    border-left: 4px solid var(--bs-border-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transition: box-shadow 0.15s ease;
}

.case-card:hover {
    box-shadow: 0 2px 10px rgba(74, 94, 128, 0.13);
}

/* Status-colored left border */
.case-card.case-status-active        { border-left-color: var(--bs-success); }
.case-card.case-status-pending       { border-left-color: var(--bs-warning); }
.case-card.case-status-charges_filed { border-left-color: var(--bs-info); }
.case-card.case-status-closed        { border-left-color: var(--bs-secondary); }
.case-card.case-status-archived      { border-left-color: #adb5bd; }

/* Statute expiring — very subtle red tint */
.case-card.statute-expiring {
    background-color: rgba(200, 114, 114, 0.04);
}

/* Inner flex container — the 50/50 split */
.case-card-inner {
    display: flex;
    min-height: 140px;
}

/* Left pane: overview info */
.case-pane-left {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--bs-border-color);
}

/* Right pane: columns */
.case-pane-right {
    flex: 1 1 0;
    max-width: 75%;
    display: flex;
    flex-direction: row;
    min-width: 0;
}

.case-pane-columns {
    border-left: 1px solid var(--bs-border-color);
}

.case-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--bs-border-color);
}

.case-column:last-child {
    border-right: none;
}

.case-column-header {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--muted-text);
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--hover-highlight);
    white-space: nowrap;
    flex-shrink: 0;
}

.case-column-body {
    padding: 0.5rem 0.75rem;
    flex: 1;
    overflow-y: auto;
}

/* Monospace case number pill */
.case-number {
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--bs-primary);
    background-color: rgba(74, 94, 128, 0.08);
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
}

/* Case name link */
.case-name a {
    color: var(--bs-body-color);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-nav);
}

.case-name a:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* Sub-case indent */
.case-subcard .case-card {
    margin-left: 1.5rem;
    opacity: 0.92;
    border-left-color: var(--bs-border-color) !important;
}

/* Per-parent sub-case toggle bar */
.case-children-toggle {
    margin-top: 0;
}

.case-children-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 3px 8px;
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    cursor: pointer;
    line-height: 1.6;
    transition: color 0.15s, background-color 0.15s;
}

.case-children-toggle-btn:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

.case-children-toggle-btn .toggle-icon {
    font-size: 0.65rem;
    transition: transform 0.2s;
    display: inline-flex;
}

.case-children-toggle-btn.expanded .toggle-icon {
    transform: rotate(45deg);
}

.case-children-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}


/* Todo list inside right pane */
.case-todo-list {
    margin: 0;
    padding: 0;
}

.case-todo-item {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.25rem 0;
    font-size: var(--fs-md);
    list-style: none;
}

.case-todo-item:last-child {
    border-bottom: none;
}

/* Quick-add todo form */
.case-todo-add {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--bs-border-color);
}

.case-todo-add input {
    font-size: var(--fs-md);
    padding: 0.2rem 0.5rem;
    height: auto;
}

.case-todo-add button {
    font-size: var(--fs-md);
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

/* Dark mode overrides */
[data-bs-theme="dark"] .case-number {
    background-color: rgba(120, 150, 190, 0.15);
    color: #a0b8d8;
}

[data-bs-theme="dark"] .case-card {
    border-left-color: rgba(255,255,255,0.15);
}

[data-bs-theme="dark"] .case-card.case-status-active        { border-left-color: var(--bs-success); }
[data-bs-theme="dark"] .case-card.case-status-pending       { border-left-color: var(--bs-warning); }
[data-bs-theme="dark"] .case-card.case-status-charges_filed { border-left-color: var(--bs-info); }
[data-bs-theme="dark"] .case-card.case-status-closed        { border-left-color: var(--bs-secondary); }

[data-bs-theme="dark"] .case-pane-left {
    border-right-color: rgba(255,255,255,0.1);
}

/* ============================================
   Base Layout (from base.html.twig)
   ============================================ */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
}

/* ============================================
   Login Page (from security/login.html.twig)
   ============================================ */

body.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: var(--bs-body-bg);
    flex-direction: row;
}

.form-signin {
    max-width: 330px;
    padding: 15px;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ============================================
   Search Highlight (from law_book/show + combined)
   ============================================ */

.search-highlight {
    background-color: var(--bs-warning-bg-subtle);
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
}

/* ============================================
   AI Chat (from ai_chat/show.html.twig)
   ============================================ */

.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 400px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.chat-input {
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem;
    background: var(--bs-body-bg);
}

.message-bubble {
    max-width: 80%;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    word-wrap: break-word;
}

.message-user {
    background-color: var(--bs-primary);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 0.25rem;
}

.message-assistant {
    background-color: var(--bs-tertiary-bg);
    border-bottom-left-radius: 0.25rem;
}

.message-assistant .message-content p:last-child {
    margin-bottom: 0;
}

.message-pending {
    opacity: 0.7;
}

.message-failed {
    border: 1px solid var(--bs-danger);
}

/* ============================================
   Notebook (from notebook/index.html.twig)
   ============================================ */

.notebook-container {
    display: flex;
    height: calc(100vh - 62px);
    margin: -1.5rem;
    overflow: hidden;
}

.notebook-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 400px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.18);
    display: none;
    flex-direction: column;
    z-index: 1040;
    overflow: hidden;
}

.notebook-sidebar.dropdown-open {
    display: flex;
}

.notebook-dropdown-trigger {
    padding: 0.35rem 0.75rem;
    border-bottom: 2px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    cursor: pointer;
    background: var(--bs-tertiary-bg);
    flex-shrink: 0;
    gap: 0.4rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    user-select: none;
    color: var(--bs-body-color);
    min-height: 2rem;
}

.notebook-dropdown-trigger:hover {
    background: var(--bs-secondary-bg);
}

.notebook-dropdown-trigger .current-notebook-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#notebook-chevron {
    font-size: var(--fs-2xs);
    transition: transform 0.15s ease;
    flex-shrink: 0;
    color: var(--bs-secondary-color);
}

.notebook-pages {
    position: relative;
    width: 260px;
    min-width: 260px;
    border-right: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notebook-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.panel-header {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.panel-header h6 {
    margin: 0;
    font-weight: 600;
    font-size: var(--fs-sm);
}

.panel-search {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}

.notebook-item {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-sm);
}

.notebook-item:hover {
    background: var(--bs-secondary-bg);
}

.notebook-item.active {
    background: var(--bs-primary);
    color: white;
}

.notebook-item .notebook-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.page-item {
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: flex-start;
    background: #faf8f5;
    font-size: var(--fs-sm);
}

.page-item:hover {
    background: #f5f0e8;
}

.page-item.active {
    background: #e7f1ff;
    border-left: 3px solid var(--bs-primary);
}

.page-item .page-title {
    font-weight: 500;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: var(--fs-sm);
}

.editor-title-input {
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.5rem 1rem;
    font-size: var(--fs-input);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    outline: none;
}

.editor-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: 0.5rem;
}

.editor-title-input:focus {
    border-bottom-color: var(--bs-primary);
}

.editor-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.editor-body .note-editor {
    flex: 1;
    border: none;
    display: flex;
    flex-direction: column;
}

.editor-body .note-editor .note-editing-area {
    flex: 1;
    overflow-y: auto;
}

.editor-body .note-editor .note-editing-area .note-editable {
    padding: 0.75rem;
    min-height: 100%;
    font-size: var(--fs-base);
}

.editor-body .note-editor .note-toolbar {
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.editor-body .note-editor .note-statusbar {
    display: none !important;
}

.save-status {
    font-size: var(--fs-md);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.save-status.saving { color: var(--bs-warning); }
.save-status.saved { color: var(--bs-success); }
.save-status.unsaved { color: var(--bs-danger); }
.save-status.error { color: var(--bs-danger); font-weight: 600; }

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--bs-secondary-color);
    text-align: center;
    padding: 2rem;
}

.empty-state i {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.context-menu {
    position: fixed;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    z-index: 1050;
    min-width: 150px;
    display: none;
}

.context-menu .context-menu-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: block;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
}

.context-menu .context-menu-item:hover {
    background: var(--bs-tertiary-bg);
}

.context-menu .context-menu-item.text-danger:hover {
    background: var(--bs-danger-bg-subtle);
}

.btn-panel-add {
    border: none;
    background: none;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    color: var(--bs-secondary-color);
    font-size: var(--fs-ui);
}

.btn-panel-add:hover {
    color: var(--bs-primary);
}

.folder-item {
    user-select: none;
}

.folder-header {
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    font-size: var(--fs-sm);
}

.folder-header:hover {
    background: var(--bs-tertiary-bg);
}

.folder-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.folder-toggle.expanded {
    transform: rotate(90deg);
}

.folder-name {
    word-break: break-word;
    overflow-wrap: break-word;
    flex: 1;
    margin-left: 0.25rem;
    font-size: var(--fs-sm);
}

/* min-height ensures SortableJS has a drop target even when folder is empty */
.folder-children.expanded { min-height: 8px; }

.case-badge {
    font-size: var(--fs-sm);
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.1rem;
}

.case-badge i {
    font-size: var(--fs-2xs);
}

.case-modal-list {
    max-height: 300px;
    overflow-y: auto;
}

.case-modal-item {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.case-modal-item:hover {
    background: var(--bs-secondary-bg);
}

.case-modal-item .case-number {
    font-weight: 600;
}

.case-modal-item .case-details {
    font-size: var(--fs-sm-body);
    color: var(--bs-secondary-color);
}

.page-drag-handle,
.folder-drag-handle,
.notebook-drag-handle {
    cursor: grab;
    color: var(--bs-tertiary-color);
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
}

.page-drag-handle:active,
.folder-drag-handle:active,
.notebook-drag-handle:active {
    cursor: grabbing;
}

.notebook-item.active .notebook-drag-handle {
    color: rgba(255, 255, 255, 0.7);
}

.folder-children {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sortable-ghost {
    opacity: 0.4;
    background: #e7f1ff;
}

/* Nesting-based indentation for pages inside folders */
.folder-children .page-item { padding-left: 2rem; }
.folder-children .folder-children .page-item { padding-left: 3.25rem; }
.folder-children .folder-children .folder-children .page-item { padding-left: 4.5rem; }

/* Nesting-based indentation for folder headers */
.folder-children .folder-header { padding-left: 1.75rem; }
.folder-children .folder-children .folder-header { padding-left: 3rem; }
.folder-children .folder-children .folder-children .folder-header { padding-left: 4.25rem; }

.editor-title-input:read-only {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    cursor: default;
}

.editor-readonly {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.ai-info-bar {
    padding: 0.5rem 1rem;
    background: var(--bs-info-bg-subtle);
    border-bottom: 1px solid var(--bs-info-border-subtle);
    color: var(--bs-info-text-emphasis);
    font-size: var(--fs-sm-body);
    flex-shrink: 0;
}

.ai-info-bar i {
    margin-right: 0.25rem;
}

.markdown-content {
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
    line-height: 1.6;
    font-size: var(--fs-base);
}

.markdown-content h1 { font-size: var(--fs-md-h1); margin: 1.25rem 0 0.625rem; font-weight: 600; }
.markdown-content h2 { font-size: var(--fs-md-h2); margin: 1rem 0 0.5rem; font-weight: 600; }
.markdown-content h3 { font-size: var(--fs-md-h3); margin: 0.875rem 0 0.4rem; font-weight: 600; }
.markdown-content h4 { font-size: var(--fs-nav); margin: 0.75rem 0 0.375rem; font-weight: 600; }

.markdown-content p { margin: 0 0 1rem; }

.markdown-content ul,
.markdown-content ol {
    margin: 0 0 1rem;
    padding-left: 2rem;
}

.markdown-content blockquote {
    border-left: 4px solid var(--bs-border-color);
    margin: 0 0 1rem;
    padding: 0.5rem 1rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}

.markdown-content table {
    width: 100%;
    margin: 0 0 1rem;
    border-collapse: collapse;
}

.markdown-content table th,
.markdown-content table td {
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
}

.markdown-content table th {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

.markdown-content pre {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 0 0 1rem;
}

.markdown-content code {
    background: var(--bs-tertiary-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.markdown-content pre code {
    background: none;
    padding: 0;
}

.markdown-content hr {
    border: none;
    border-top: 1px solid var(--bs-border-color);
    margin: 1.5rem 0;
}

@media (max-width: 991.98px) {
    .notebook-container {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 62px);
    }

    .notebook-pages {
        width: 100%;
        min-width: 100%;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .notebook-sidebar {
        max-height: 50vh;
    }

    .notebook-editor {
        min-height: 400px;
    }
}