/* ═══════════════════════════════════════════════════════════════════════════
   OBSIDIAN COURT - Premium Dark Theme for TLO Client Management System
   A sophisticated law firm aesthetic: private club meets modern courtroom

   Design System:
   - Deep obsidian blacks (#0a0c0f to #141820)
   - Warm gold accents (#c9a961, #d4b876)
   - Subtle glass morphism with 8-12px blur
   - Refined Playfair Display / Manrope typography
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   VARIABLE OVERRIDES - Must win specificity over inline :root
   ───────────────────────────────────────────────────────────────────────────── */

html {
    /* Core palette */
    --page-bg: #0a0c0f !important;
    --charcoal: #f5f3f0 !important;
    --charcoal-light: rgba(245, 243, 240, 0.7) !important;
    --charcoal-lighter: rgba(245, 243, 240, 0.5) !important;
    --charcoal-bg: #0a0c0f !important;
    --cream: #141820 !important;
    --cream-dark: #1a1f2a !important;
    --white: #1a1f2a !important;
    --gray: rgba(245, 243, 240, 0.5) !important;
    --gray-light: rgba(255, 255, 255, 0.08) !important;
    --gray-lighter: #141820 !important;

    /* Gold palette preserved */
    --gold: #c9a961 !important;
    --gold-light: #d4b876 !important;
    --gold-dark: #b89851 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOUNDATIONAL DARK BACKGROUND
   ───────────────────────────────────────────────────────────────────────────── */

html,
html body {
    background: #0a0c0f !important;
    background-color: #0a0c0f !important;
    color: #f5f3f0 !important;
}

html body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
    z-index: 0;
}

/* App container */
html body .app-container {
    background: #0a0c0f !important;
    background-color: #0a0c0f !important;
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER - Refined Glass Bar
   ───────────────────────────────────────────────────────────────────────────── */

html body .header {
    background: rgba(20, 24, 32, 0.92) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

html body .header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.03) 0%, transparent 50%) !important;
    pointer-events: none;
}

html body .header-brand h1,
html body .header h1 {
    color: #f5f3f0 !important;
}

html body .header-brand .tagline {
    color: #c9a961 !important;
}

/* User profile */
html body .user-profile {
    background: rgba(26, 31, 42, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
}

html body .user-name {
    color: #f5f3f0 !important;
}

html body .user-email {
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .sign-out-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .sign-out-btn:hover {
    background: rgba(224, 122, 95, 0.1) !important;
    border-color: rgba(224, 122, 95, 0.3) !important;
    color: #e07a5f !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION TABS - Sleek Gold Underline
   ───────────────────────────────────────────────────────────────────────────── */

html body .nav-tabs-wrapper,
html body nav.nav-tabs-wrapper {
    background: #0f1218 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html body .nav-tab,
html body button.nav-tab {
    color: rgba(245, 243, 240, 0.5) !important;
    background: transparent !important;
    border: none !important;
    position: relative;
    transition: color 0.3s ease, background 0.3s ease !important;
}

html body .nav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #b89851, #c9a961, #b89851);
    transition: width 0.3s ease;
    border-radius: 2px;
}

html body .nav-tab:hover {
    color: #f5f3f0 !important;
    background: rgba(201, 169, 97, 0.05) !important;
}

html body .nav-tab:hover::after {
    width: 30%;
}

html body .nav-tab.active {
    color: #c9a961 !important;
    background: rgba(201, 169, 97, 0.08) !important;
}

html body .nav-tab.active::after {
    width: 60%;
}

html body .nav-tab i,
html body .nav-tab .tab-icon {
    color: inherit !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN CONTENT AREAS - Deep Obsidian Background
   ───────────────────────────────────────────────────────────────────────────── */

html body .main-content,
html body main,
html body .tab-content,
html body .tab-content.active,
html body #clientsTab,
html body #tasksTab,
html body #ticklerTab,
html body #calendarTab,
html body #reportsTab,
html body .clients-section,
html body .clients-list,
html body .client-tasks-grid,
html body .calendar-content,
html body .tickler-list,
html body [class*="content"] {
    background: #0a0c0f !important;
    background-color: #0a0c0f !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTROLS BAR - Search & Filters
   ───────────────────────────────────────────────────────────────────────────── */

html body .controls,
html body .controls.streamlined {
    background: #0a0c0f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Search input */
html body .search-container input,
html body .search-input,
html body input.search-input {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f3f0 !important;
    border-radius: 12px !important;
}

html body .search-container input::placeholder,
html body .search-input::placeholder {
    color: rgba(245, 243, 240, 0.35) !important;
}

html body .search-container input:focus,
html body .search-input:focus {
    border-color: #c9a961 !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15) !important;
    background: #1a1f2a !important;
}

html body .search-icon,
html body .search-container i {
    color: rgba(245, 243, 240, 0.4) !important;
}

/* Filter dropdown */
html body .filter-dropdown-trigger,
html body .filter-dropdown-container button {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f3f0 !important;
}

html body .filter-dropdown-menu {
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

html body .filter-dropdown-item {
    color: #f5f3f0 !important;
}

html body .filter-dropdown-item:hover {
    background: rgba(201, 169, 97, 0.1) !important;
}

html body .filter-dropdown-item.selected {
    background: rgba(201, 169, 97, 0.15) !important;
    color: #c9a961 !important;
}

html body .filter-dropdown-label {
    color: rgba(245, 243, 240, 0.4) !important;
}

/* Result count bar */
html body .result-count-bar {
    background: #0a0c0f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .result-count-bar strong {
    color: #f5f3f0 !important;
}

html body .sort-control-inline {
    color: rgba(245, 243, 240, 0.5) !important;
}

html body .sort-value {
    color: #c9a961 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CLIENT CARDS - The Star of the Show
   Glass morphism with warm gold accents
   ───────────────────────────────────────────────────────────────────────────── */

html body .client-card,
html body .clients-list .client-card,
html body .clients-section .client-card,
html body #clientsList .client-card,
html body .tab-content .client-card,
html body .compact-view .client-card,
html body .is-mobile .client-card,
html body .viewport-small .client-card,
html body div.client-card {
    background: rgba(20, 24, 32, 0.85) !important;
    background-color: rgba(20, 24, 32, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Card hover - subtle gold glow */
html body .client-card:hover,
html body .is-mobile .client-card:hover,
html body .compact-view .client-card:hover,
html body div.client-card:hover {
    background: rgba(26, 31, 42, 0.95) !important;
    background-color: rgba(26, 31, 42, 0.95) !important;
    border-color: rgba(201, 169, 97, 0.2) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(201, 169, 97, 0.08) !important;
    transform: translateY(-4px) !important;
}

/* Card active state */
html body .client-card:active,
html body .is-mobile .client-card:active {
    background: rgba(201, 169, 97, 0.12) !important;
    background-color: rgba(201, 169, 97, 0.12) !important;
}

/* Card text */
html body .client-card h3,
html body .client-card .client-name,
html body .client-name {
    color: #f5f3f0 !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
}

html body .client-card .client-email,
html body .client-card .client-phone,
html body .client-card .client-info,
html body .client-card .client-info span {
    color: rgba(245, 243, 240, 0.6) !important;
}

/* Card icons - gold accent */
html body .client-card i,
html body .client-card .fa,
html body .client-card .fas,
html body .client-card .far,
html body .client-info i {
    color: #c9a961 !important;
}

/* Urgency borders */
html body .client-card.urgency-border-critical {
    border-left: 3px solid #e07a5f !important;
}

html body .client-card.urgency-border-urgent {
    border-left: 3px solid #f2cc8f !important;
}

html body .client-card.urgency-border-normal {
    border-left: 3px solid #4a7c59 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATUS BADGES - Refined Pills
   ───────────────────────────────────────────────────────────────────────────── */

html body .status-badge,
html body .matter-badge,
html body span.status-badge {
    font-weight: 600 !important;
    border-radius: 20px !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

html body .status-badge.open,
html body .status-label.status-open,
html body [class*="status-open"] {
    background: rgba(74, 124, 89, 0.2) !important;
    color: #6dba82 !important;
    border: 1px solid rgba(74, 124, 89, 0.3) !important;
}

html body .status-badge.hold,
html body .status-label.status-hold,
html body [class*="status-hold"],
html body [class*="on-hold"] {
    background: rgba(242, 204, 143, 0.15) !important;
    color: #f2cc8f !important;
    border: 1px solid rgba(242, 204, 143, 0.3) !important;
}

html body .status-badge.closed,
html body .status-label.status-closed,
html body [class*="status-closed"] {
    background: rgba(129, 113, 122, 0.2) !important;
    color: #a89ba3 !important;
    border: 1px solid rgba(129, 113, 122, 0.3) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS - Premium Gold Actions
   ───────────────────────────────────────────────────────────────────────────── */

html body .btn-primary,
html body .add-client-btn,
html body button.btn-primary,
html body .fab {
    background: linear-gradient(145deg, #c9a961 0%, #b89851 100%) !important;
    color: #0a0c0f !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(201, 169, 97, 0.25) !important;
    transition: all 0.3s ease !important;
}

html body .btn-primary:hover,
html body .add-client-btn:hover,
html body button.btn-primary:hover,
html body .fab:hover {
    background: linear-gradient(145deg, #d4b876 0%, #c9a961 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(201, 169, 97, 0.35) !important;
}

/* Secondary buttons */
html body .btn-secondary,
html body button.secondary {
    background: #141820 !important;
    color: #f5f3f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html body .btn-secondary:hover,
html body button.secondary:hover {
    background: #1a1f2a !important;
    border-color: #c9a961 !important;
    color: #c9a961 !important;
}

/* Action buttons */
html body .action-btn,
html body .matter-action-btn,
html body button.action-btn {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .action-btn:hover,
html body .matter-action-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    border-color: rgba(201, 169, 97, 0.3) !important;
    color: #c9a961 !important;
}

/* Icon buttons */
html body .icon-btn,
html body .notification-btn {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .icon-btn:hover,
html body .notification-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    color: #c9a961 !important;
}

/* Filter buttons */
html body .filter-btn {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .filter-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    border-color: rgba(201, 169, 97, 0.3) !important;
    color: #c9a961 !important;
}

html body .filter-btn.selected {
    background: rgba(201, 169, 97, 0.15) !important;
    border-color: #c9a961 !important;
    color: #c9a961 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MODALS - Elegant Overlays
   ───────────────────────────────────────────────────────────────────────────── */

html body .modal {
    background: rgba(10, 12, 15, 0.85) !important;
    backdrop-filter: blur(8px) !important;
}

html body .modal-content {
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
}

html body .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body .modal-header h2,
html body .modal-header h3,
html body .modal-title {
    color: #f5f3f0 !important;
    font-family: 'Playfair Display', serif !important;
}

html body .modal-close,
html body .close-modal {
    color: rgba(245, 243, 240, 0.5) !important;
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body .modal-close:hover,
html body .close-modal:hover {
    background: rgba(224, 122, 95, 0.1) !important;
    border-color: rgba(224, 122, 95, 0.3) !important;
    color: #e07a5f !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORM INPUTS - Refined Dark Fields
   ───────────────────────────────────────────────────────────────────────────── */

html body input:not([type="checkbox"]):not([type="radio"]):not(.auth-form-container input),
html body select,
html body textarea {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f3f0 !important;
    border-radius: 12px !important;
}

html body input:not([type="checkbox"]):not([type="radio"]):not(.auth-form-container input)::placeholder,
html body textarea::placeholder {
    color: rgba(245, 243, 240, 0.35) !important;
}

html body input:not([type="checkbox"]):not([type="radio"]):not(.auth-form-container input):focus,
html body select:focus,
html body textarea:focus {
    border-color: #c9a961 !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15) !important;
    background: #1a1f2a !important;
    outline: none !important;
}

html body select {
    appearance: none !important;
    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 fill='%23c9a961' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    padding-right: 2.5rem !important;
}

html body label {
    color: rgba(245, 243, 240, 0.6) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MATTERS SECTION
   ───────────────────────────────────────────────────────────────────────────── */

html body .matters-section {
    background: #0f1218 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html body .matter-item {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
}

html body .matter-item:hover {
    border-color: rgba(201, 169, 97, 0.2) !important;
    background: rgba(201, 169, 97, 0.05) !important;
}

html body .matter-title {
    color: #f5f3f0 !important;
}

html body .matter-meta {
    color: rgba(245, 243, 240, 0.5) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TASKS TAB
   ───────────────────────────────────────────────────────────────────────────── */

html body .tasks-header {
    background: #0a0c0f !important;
    color: #f5f3f0 !important;
}

html body .section-title {
    color: #f5f3f0 !important;
    font-family: 'Playfair Display', serif !important;
}

html body .task-card,
html body .tickler-card,
html body .tickler-item {
    background: rgba(20, 24, 32, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

html body .task-card:hover,
html body .tickler-card:hover,
html body .tickler-item:hover {
    border-color: rgba(201, 169, 97, 0.2) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CALENDAR TAB
   ───────────────────────────────────────────────────────────────────────────── */

html body .calendar-header {
    background: #0a0c0f !important;
    color: #f5f3f0 !important;
}

html body .calendar-grid {
    background: #0f1218 !important;
}

html body .calendar-day {
    color: rgba(245, 243, 240, 0.6) !important;
    border-radius: 8px !important;
}

html body .calendar-day:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    color: #c9a961 !important;
}

html body .calendar-day.today {
    background: #c9a961 !important;
    color: #0a0c0f !important;
    font-weight: 600 !important;
}

html body .calendar-nav-btn {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .calendar-nav-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    color: #c9a961 !important;
}

html body .calendar-month-year {
    color: #f5f3f0 !important;
}

html body .upcoming-deadlines {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   QUICKVIEW PANEL
   ───────────────────────────────────────────────────────────────────────────── */

html body .quickview-panel,
html body .sidebar-panel {
    background: #141820 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4) !important;
}

html body .quickview-header {
    background: #0f1218 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body .quickview-title {
    color: #f5f3f0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DROPDOWNS & NOTIFICATIONS
   ───────────────────────────────────────────────────────────────────────────── */

html body .dropdown,
html body .dropdown-menu,
html body .notification-dropdown {
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

html body .dropdown-item,
html body .notification-item {
    color: #f5f3f0 !important;
}

html body .dropdown-item:hover,
html body .notification-item:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    color: #c9a961 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS
   ───────────────────────────────────────────────────────────────────────────── */

html body .toast {
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    color: #f5f3f0 !important;
}

html body .toast.success {
    border-left: 4px solid #6dba82 !important;
}

html body .toast.error {
    border-left: 4px solid #e07a5f !important;
}

html body .toast.warning {
    border-left: 4px solid #f2cc8f !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATES
   ───────────────────────────────────────────────────────────────────────────── */

html body .empty-state {
    color: rgba(245, 243, 240, 0.5) !important;
}

html body .empty-state i,
html body .empty-icon {
    color: rgba(245, 243, 240, 0.3) !important;
}

html body .empty-title {
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .empty-message {
    color: rgba(245, 243, 240, 0.4) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING OVERLAY
   ───────────────────────────────────────────────────────────────────────────── */

html body .loading-overlay {
    background: #0a0c0f !important;
}

html body .loading-content {
    color: #f5f3f0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCROLLBARS - Sleek Dark
   ───────────────────────────────────────────────────────────────────────────── */

html body *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html body *::-webkit-scrollbar-track {
    background: #0f1218;
}

html body *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

html body *::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 169, 97, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    html body .client-card,
    html body .card {
        border-radius: 12px !important;
    }

    html body .modal-content {
        border-radius: 16px 16px 0 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT - Readable
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
    html body,
    html body .app-container,
    html body .client-card,
    html body .card {
        background: white !important;
        color: black !important;
    }

    html body .header,
    html body .nav-tabs-wrapper,
    html body .fab,
    html body .action-btn {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SPLASH BANNER
   ───────────────────────────────────────────────────────────────────────────── */

html body .splash-banner,
html body .daily-banner,
html body .banner {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.7) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STAT CARDS
   ───────────────────────────────────────────────────────────────────────────── */

html body .stat-card,
html body .stats-card,
html body .metric-card {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body .stat-card .stat-value,
html body .stat-number,
html body .metric-value {
    color: #f5f3f0 !important;
}

html body .stat-card .stat-label,
html body .stat-label,
html body .metric-label {
    color: rgba(245, 243, 240, 0.5) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHAT SECTION
   ───────────────────────────────────────────────────────────────────────────── */

html body .chat-container {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
}

html body .chat-messages {
    background: #0a0c0f !important;
}

html body .chat-message {
    background: #1a1f2a !important;
    border-radius: 12px !important;
    color: #f5f3f0 !important;
}

html body .chat-message.own {
    background: rgba(201, 169, 97, 0.15) !important;
    border: 1px solid rgba(201, 169, 97, 0.2) !important;
}

html body .chat-input-container {
    background: #141820 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLES
   ───────────────────────────────────────────────────────────────────────────── */

html body table {
    background: #141820 !important;
    border-radius: 12px !important;
}

html body th {
    background: #1a1f2a !important;
    color: #f5f3f0 !important;
}

html body td {
    color: rgba(245, 243, 240, 0.7) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html body tr:hover td {
    background: rgba(201, 169, 97, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TICKLER CONTROLS
   ───────────────────────────────────────────────────────────────────────────── */

html body .tickler-controls {
    background: #0a0c0f !important;
}

html body .tickler-actions-bar {
    background: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REPORTS TAB
   ───────────────────────────────────────────────────────────────────────────── */

html body #reportsTab {
    background: #0a0c0f !important;
}

html body .report-card,
html body .report-section {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION HEADERS
   ───────────────────────────────────────────────────────────────────────────── */

html body .section-header {
    background: transparent !important;
}

html body .section-header h2,
html body h2.section-title {
    color: #f5f3f0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADDITIONAL OVERRIDES FOR STUBBORN ELEMENTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Any remaining light backgrounds */
html body [style*="background: var(--white)"],
html body [style*="background: var(--cream)"],
html body [style*="background-color: var(--white)"],
html body [style*="background-color: var(--cream)"] {
    background: #141820 !important;
    background-color: #141820 !important;
}

/* Force dark on all panels */
html body .panel,
html body .panel-content {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Cards that might be generated dynamically */
html body [class*="card"]:not(.auth-wrapper):not(.auth-brand-panel):not(.auth-form-panel) {
    background: rgba(20, 24, 32, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TARGETED FIXES FOR CLASHING ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header Stat Boxes */
html body .header-stat,
html body .header-stats .header-stat {
    background: rgba(20, 24, 32, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
}

html body .header-stat:hover {
    background: rgba(26, 31, 42, 0.8) !important;
    border-color: rgba(201, 169, 97, 0.3) !important;
}

html body .header-stat .stat-value,
html body .stat-value {
    color: #f5f3f0 !important;
}

html body .header-stat .stat-label,
html body .stat-label {
    color: rgba(245, 243, 240, 0.5) !important;
}

html body .stat-divider {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Connection Status / Database Info Pills */
html body .connection-status,
html body .connection-status .status-pill,
html body .status-pill {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f5f3f0 !important;
}

html body .connection-status .status-meta,
html body .connection-status .status-meta.subtle,
html body .status-meta {
    background: rgba(20, 24, 32, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .connected-dot {
    background: #6dba82 !important;
    box-shadow: 0 0 0 3px rgba(109, 186, 130, 0.2) !important;
}

/* Daily Splash Banner */
html body .daily-splash,
html body #dailySplash {
    background: #0f1218 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(245, 243, 240, 0.7) !important;
}

html body .daily-splash .splash-icon,
html body .splash-icon {
    color: #c9a961 !important;
}

html body .daily-splash .splash-text,
html body .splash-text,
html body #splashText {
    color: rgba(245, 243, 240, 0.6) !important;
    font-style: italic !important;
}

/* Nav Tabs Wrapper - Force Darker */
html body .nav-tabs-wrapper,
html body nav.nav-tabs-wrapper,
html body nav {
    background: #0a0c0f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Search Input - Remove White Glow */
html body .search-container,
html body .search-container input,
html body input.search-input,
html body .search-input {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f5f3f0 !important;
    box-shadow: none !important;
}

html body .search-container input:focus,
html body .search-input:focus {
    border-color: rgba(201, 169, 97, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.1) !important;
    outline: none !important;
}

/* User Profile Dropdown Info */
html body .user-dropdown,
html body .user-profile-dropdown {
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Make absolutely sure client cards are dark */
html body .client-card,
html body div.client-card,
html body .clients-list > .client-card,
html body #clientsList > .client-card,
html body .clients-list > div,
html body #clientsList > div {
    background: rgba(20, 24, 32, 0.9) !important;
    background-color: rgba(20, 24, 32, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Controls area */
html body .controls,
html body .controls.streamlined,
html body #clientsTab .controls {
    background: #0a0c0f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Result count bar */
html body .result-count-bar,
html body [style*="border-bottom"] {
    background: #0a0c0f !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Filter dropdown trigger */
html body .filter-dropdown-trigger,
html body #filterDropdownTrigger,
html body .filter-dropdown-container button {
    background: #141820 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f5f3f0 !important;
}

/* Controls right section */
html body .controls-right {
    background: transparent !important;
}

/* Header actions buttons */
html body .header-actions button,
html body .notification-btn,
html body .print-urgent-btn,
html body .keyboard-shortcuts-btn {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(245, 243, 240, 0.7) !important;
}

html body .header-actions button:hover,
html body .notification-btn:hover,
html body .print-urgent-btn:hover,
html body .keyboard-shortcuts-btn:hover {
    background: rgba(201, 169, 97, 0.15) !important;
    border-color: rgba(201, 169, 97, 0.3) !important;
    color: #c9a961 !important;
}

/* Theme toggle */
html body .theme-toggle,
html body .theme-switch {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUICKVIEW PANEL & MATTERS SECTION - Dark Theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Quickview Panel */
html body .quick-view-panel,
html body .quickview-panel {
    background: #141820 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5) !important;
}

html body .quick-view-header,
html body .quickview-header {
    background: #0f1218 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body .quick-view-title,
html body .quickview-title {
    color: #f5f3f0 !important;
}

html body .quick-view-close,
html body .quickview-close {
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .quick-view-close:hover,
html body .quickview-close:hover {
    color: #e07a5f !important;
}

html body .quick-view-content,
html body .quickview-content {
    background: #141820 !important;
}

/* Matters Section inside cards/quickview */
html body .matters-container,
html body .matters-section,
html body .matters-header,
html body .matters-list,
html body .active-matters {
    background: #0f1218 !important;
    background-color: #0f1218 !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

/* Matters container wrapper */
html body .matters-container {
    background: #0f1218 !important;
    background-color: #0f1218 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    overflow: hidden !important;
}

html body div.matters-container {
    background: #0f1218 !important;
    background-color: #0f1218 !important;
}

html body .matters-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #0f1218 !important;
}

html body .matters-header h3,
html body .matters-header h4,
html body .matters-title,
html body .matters-section h3,
html body .matters-section h4 {
    color: rgba(245, 243, 240, 0.5) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
}

/* Matter count badge - muted */
html body .matter-count,
html body .matters-count,
html body .matters-header .count,
html body .matters-section .count,
html body .matters-header span:last-child {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 243, 240, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 0.7rem !important;
}

/* Individual Matter Items */
html body .matter-item,
html body .matters-list .matter-item,
html body div.matter-item {
    background: rgba(20, 24, 32, 0.8) !important;
    background-color: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

html body .matter-item:hover {
    background: rgba(26, 31, 42, 0.9) !important;
    border-color: rgba(201, 169, 97, 0.2) !important;
}

/* Matter item text */
html body .matter-item .matter-title,
html body .matter-title {
    color: #f5f3f0 !important;
}

html body .matter-item .matter-type,
html body .matter-type,
html body .matter-item .matter-meta,
html body .matter-meta {
    color: rgba(245, 243, 240, 0.5) !important;
}

/* Matter header and details */
html body .matter-header {
    background: transparent !important;
}

html body .matter-details,
html body .matter-detail {
    background: transparent !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .matter-detail span {
    color: rgba(245, 243, 240, 0.6) !important;
}

/* Matter item icons */
html body .matter-item i,
html body .matter-item .fa,
html body .matter-item .fas,
html body .matter-detail i,
html body .matter-detail .fa,
html body .matter-detail .fas {
    color: #c9a961 !important;
}

/* Matter urgency badges */
html body .matter-urgency,
html body .matter-item .matter-urgency {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(245, 243, 240, 0.8) !important;
    border-radius: 6px !important;
}

html body .matter-urgency.urgency-normal {
    background: rgba(76, 175, 80, 0.2) !important;
    color: #81c784 !important;
}

html body .matter-urgency.urgency-high {
    background: rgba(255, 152, 0, 0.2) !important;
    color: #ffb74d !important;
}

html body .matter-urgency.urgency-critical {
    background: rgba(244, 67, 54, 0.2) !important;
    color: #e57373 !important;
}

/* Add Matter button */
html body .add-matter-btn,
html body button[class*="add-matter"] {
    background: transparent !important;
    border: 1px solid rgba(201, 169, 97, 0.3) !important;
    color: #c9a961 !important;
}

html body .add-matter-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    border-color: #c9a961 !important;
}

/* Urgency badges inside matters */
html body .matter-item .urgency-badge,
html body .urgency-badge {
    font-weight: 600 !important;
    border-radius: 6px !important;
}

html body .urgency-badge.normal,
html body [class*="urgency-normal"] {
    background: rgba(74, 124, 89, 0.2) !important;
    color: #6dba82 !important;
    border: 1px solid rgba(74, 124, 89, 0.3) !important;
}

html body .urgency-badge.urgent,
html body [class*="urgency-urgent"] {
    background: rgba(242, 204, 143, 0.2) !important;
    color: #f2cc8f !important;
    border: 1px solid rgba(242, 204, 143, 0.3) !important;
}

html body .urgency-badge.critical,
html body [class*="urgency-critical"] {
    background: rgba(224, 122, 95, 0.2) !important;
    color: #e07a5f !important;
    border: 1px solid rgba(224, 122, 95, 0.3) !important;
}

/* Client card expanded state / matters visible */
html body .client-card.expanded .matters-section,
html body .client-card .matters-section {
    background: #0f1218 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Three dot menu button */
html body .more-btn,
html body .menu-btn,
html body .options-btn,
html body button[class*="more"],
html body button[class*="menu"] {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(245, 243, 240, 0.6) !important;
}

html body .more-btn:hover,
html body .menu-btn:hover {
    background: rgba(201, 169, 97, 0.1) !important;
    color: #c9a961 !important;
}

/* Quickview overlay */
html body .quick-view-overlay {
    background: rgba(10, 12, 15, 0.7) !important;
}

/* Contact Pills (email/phone) */
html body .client-meta-item,
html body .client-meta .client-meta-item {
    background: rgba(20, 24, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

html body .client-meta-item i {
    color: #c9a961 !important;
    opacity: 0.7 !important;
}

html body .client-meta-item span {
    color: rgba(245, 243, 240, 0.8) !important;
}

html body .client-meta {
    color: rgba(245, 243, 240, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BORDER FIXES - Remove all light/gray borders
   ═══════════════════════════════════════════════════════════════════════════ */

/* Client card internal borders/dividers */
html body .client-card hr,
html body .client-card .divider,
html body .client-header-top,
html body .client-header {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Matters section top border */
html body .matters-section,
html body .client-card .matters-section,
html body .active-matters {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Matters header area */
html body .matters-header,
html body .matters-section .matters-header {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Individual matter item borders */
html body .matter-item,
html body .matters-list .matter-item,
html body .matters-section .matter-item {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html body .matter-item:hover {
    border-color: rgba(201, 169, 97, 0.2) !important;
}

/* Any remaining light borders in cards */
html body .client-card *,
html body .matter-item * {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Reset specific elements that shouldn't have border changes */
html body .status-badge,
html body .urgency-badge {
    border-color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NUCLEAR VARIABLE OVERRIDE - Must be at end to win cascade
   ═══════════════════════════════════════════════════════════════════════════ */

html {
    --gray-light: rgba(255, 255, 255, 0.06) !important;
    --gray-lighter: #141820 !important;
}

/* Force ALL borders dark throughout the app */
html body .client-card,
html body .client-card *:not(.status-badge):not(.urgency-badge):not([class*="urgency-"]):not([class*="status-"]) {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html body .matter-item,
html body .matter-item * {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html body .matters-section {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html body .matters-header {
    border: none !important;
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATION DROPDOWN FIX - z-index stacking context
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header must sit ABOVE splash banner and nav */
html body .header {
    z-index: 1000 !important;
    position: relative !important;
    overflow: visible !important;
}

/* Header actions wrapper - high z-index within header */
html body .header-actions {
    overflow: visible !important;
    z-index: 1001 !important;
    position: relative !important;
}

/* The inline div wrapper around notification btn */
html body .header-actions > div,
html body .header-actions [style*="position: relative"] {
    overflow: visible !important;
    z-index: 1002 !important;
}

/* The dropdown itself - highest priority */
html body .notification-dropdown,
html body #notificationDropdown {
    z-index: 10000 !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    background: #1a1f2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    overflow: visible !important;
    min-width: 320px !important;
}

html body .notification-dropdown .notification-header,
html body .notification-header {
    background: #141820 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f3f0 !important;
    border-radius: 16px 16px 0 0 !important;
}

html body .notification-item {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #f5f3f0 !important;
}

html body .notification-item:hover {
    background: rgba(201, 169, 97, 0.1) !important;
}

html body .notification-list {
    background: #1a1f2a !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

html body .notification-title,
html body .mark-all-read {
    color: #f5f3f0 !important;
}

html body .mark-all-read:hover {
    color: #c9a961 !important;
}

/* Daily splash - BELOW header */
html body .daily-splash,
html body #dailySplash {
    z-index: 100 !important;
    position: relative !important;
}

/* Nav wrapper - BELOW header */
html body .nav-tabs-wrapper,
html body .nav-tabs {
    overflow: visible !important;
    z-index: 50 !important;
    position: relative !important;
}