/**
 * IdeaDunes Dark Mode Theme
 * CSS variables-based dark theme supporting system preference + manual toggle
 * Supports: [data-theme="dark"], html.dark-mode, @media prefers-color-scheme
 * IMPORTANT: Does NOT override colors inside #sidebar or .navbar to preserve white-on-dark branding
 */

:root {
  /* Light mode (default) */
  --color-bg-primary: #fff;
  --color-bg-secondary: #f8f9fa;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666;
  --color-text-muted: #999;
  --color-border: #e0e0e0;
  --color-shadow: rgb(0 0 0 / 10%);
  --color-highlight: #6c587b;
  --color-success: #28a745;
  --color-danger: #c0392b;
  --color-warning: #e98a5f;
  --color-info: #17a2b8;
  --color-link: #026277;
  --color-link-hover: #014f5e;
  --color-modal-backdrop: rgb(0 0 0 / 50%);
}

/* Dark mode vars — system preference (only when no explicit theme is set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary: #1e1e1e;
    --color-bg-secondary: #2a2a2a;
    --color-text-primary: #e8e8e8;
    --color-text-secondary: #b0b0b0;
    --color-text-muted: #808080;
    --color-border: #3a3a3a;
    --color-shadow: rgb(0 0 0 / 30%);
    --color-highlight: #a78fbf;
    --color-success: #4caf50;
    --color-danger: #ef5350;
    --color-warning: #ffb74d;
    --color-info: #29b6f6;
    --color-link: #64b5f6;
    --color-link-hover: #90caf9;
    --color-modal-backdrop: rgb(0 0 0 / 80%);
  }
}

/* Dark mode — explicit data-theme attribute (set by settings or JS) */
html[data-theme="dark"],
html.dark-mode {
  --color-bg-primary: #1e1e1e;
  --color-bg-secondary: #2a2a2a;
  --color-text-primary: #e8e8e8;
  --color-text-secondary: #b0b0b0;
  --color-text-muted: #808080;
  --color-border: #3a3a3a;
  --color-shadow: rgb(0 0 0 / 30%);
  --color-highlight: #a78fbf;
  --color-success: #4caf50;
  --color-danger: #ef5350;
  --color-warning: #ffb74d;
  --color-info: #29b6f6;
  --color-link: #64b5f6;
  --color-link-hover: #90caf9;
  --color-modal-backdrop: rgb(0 0 0 / 80%);
}

/* Light mode — explicit data-theme attribute overrides system preference */
html[data-theme="light"] {
  --color-bg-primary: #fff;
  --color-bg-secondary: #f8f9fa;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666;
  --color-text-muted: #999;
  --color-border: #e0e0e0;
  --color-shadow: rgb(0 0 0 / 10%);
  --color-highlight: #6c587b;
  --color-success: #28a745;
  --color-danger: #c0392b;
  --color-warning: #e98a5f;
  --color-info: #17a2b8;
  --color-link: #026277;
  --color-link-hover: #014f5e;
  --color-modal-backdrop: rgb(0 0 0 / 50%);
}

/* ========================================================
   Dark Mode Application — SCOPED to content areas only
   NOT applied to #sidebar, .navbar, .pub-navbar, header
   to preserve intentional white-on-dark branding
   ======================================================== */

body {
  transition: background-color 0.3s, color 0.3s;
}

/* Apply dark background to body and content areas */
html[data-theme="dark"] body,
html.dark-mode body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Content‐only text overrides — scoped away from sidebar/header */
html[data-theme="dark"] #content h1,
html[data-theme="dark"] #content h2,
html[data-theme="dark"] #content h3,
html[data-theme="dark"] #content h4,
html[data-theme="dark"] #content h5,
html[data-theme="dark"] #content h6,
html[data-theme="dark"] #page-body h1,
html[data-theme="dark"] #page-body h2,
html[data-theme="dark"] #page-body h3,
html[data-theme="dark"] #page-body h4,
html[data-theme="dark"] #page-body h5,
html[data-theme="dark"] #page-body h6,
html.dark-mode #content h1,
html.dark-mode #content h2,
html.dark-mode #content h3,
html.dark-mode #content h4,
html.dark-mode #content h5,
html.dark-mode #content h6,
html.dark-mode #page-body h1,
html.dark-mode #page-body h2,
html.dark-mode #page-body h3,
html.dark-mode #page-body h4,
html.dark-mode #page-body h5,
html.dark-mode #page-body h6 {
  color: var(--color-text-primary);
}

/* Public pages text — apply broadly since no dark sidebar there */
html[data-theme="dark"] .site-wrapper h1,
html[data-theme="dark"] .site-wrapper h2,
html[data-theme="dark"] .site-wrapper h3,
html[data-theme="dark"] .site-wrapper p,
html[data-theme="dark"] .site-wrapper li,
html.dark-mode .site-wrapper h1,
html.dark-mode .site-wrapper h2,
html.dark-mode .site-wrapper h3,
html.dark-mode .site-wrapper p,
html.dark-mode .site-wrapper li {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .text-muted,
html.dark-mode .text-muted {
  color: var(--color-text-muted) !important;
}

/* Links in content areas */
html[data-theme="dark"] #content a:not(.btn),
html[data-theme="dark"] #page-body a:not(.btn),
html.dark-mode #content a:not(.btn),
html.dark-mode #page-body a:not(.btn) {
  color: var(--color-link);
}

html[data-theme="dark"] #content a:not(.btn):hover,
html[data-theme="dark"] #page-body a:not(.btn):hover,
html.dark-mode #content a:not(.btn):hover,
html.dark-mode #page-body a:not(.btn):hover {
  color: var(--color-link-hover);
}

/* ========================================================
   Forms — scoped to dark mode only
   ======================================================== */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .form-control,
html.dark-mode .form-select {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .form-control:focus,
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
html.dark-mode .form-control:focus {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-highlight);
  box-shadow: 0 0 0 0.2rem rgb(108 88 123 / 25%);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* ========================================================
   Tables — scoped to dark mode only
   ======================================================== */

html[data-theme="dark"] .table,
html.dark-mode .table {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .table thead,
html.dark-mode .table thead {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .table tbody tr:hover,
html.dark-mode .table tbody tr:hover {
  background-color: var(--color-bg-secondary);
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html.dark-mode .table td,
html.dark-mode .table th {
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* ========================================================
   Cards & Panels — scoped to dark mode only
   ======================================================== */

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .dash-panel,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .dash-stat-card,
html.dark-mode .card,
html.dark-mode .panel,
html.dark-mode .dash-panel,
html.dark-mode .tile,
html.dark-mode .dash-stat-card {
  background-color: var(--color-bg-primary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  box-shadow: 0 0.125rem 0.5rem var(--color-shadow);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .panel-heading,
html.dark-mode .card-header,
html.dark-mode .panel-heading {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* ========================================================
   Modals — scoped to dark mode only
   ======================================================== */

html[data-theme="dark"] .modal-content,
html.dark-mode .modal-content {
  background-color: var(--color-bg-primary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .modal-header,
html.dark-mode .modal-header {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

/* ========================================================
   Dropdowns — scoped to dark mode only
   ======================================================== */

html[data-theme="dark"] .dropdown-menu,
html.dark-mode .dropdown-menu {
  background-color: var(--color-bg-primary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dropdown-menu > li > a,
html.dark-mode .dropdown-item,
html.dark-mode .dropdown-menu > li > a {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus,
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-menu > li > a:hover,
html.dark-mode .dropdown-menu > li > a:focus {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

/* ========================================================
   Code blocks
   ======================================================== */

html[data-theme="dark"] code,
html[data-theme="dark"] pre,
html.dark-mode code,
html.dark-mode pre {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

/* ========================================================
   Misc
   ======================================================== */

html[data-theme="dark"] hr,
html.dark-mode hr {
  border-color: var(--color-border);
}

html[data-theme="dark"] .spinner-border,
html.dark-mode .spinner-border {
  border-color: rgb(108 88 123 / 25%);
  border-right-color: var(--color-highlight);
}

/* ========================================================
   Page-load Dark Mode — applied via early script in <head>
   Uses localStorage key 'ideadunes_theme'
   Values: 'dark' | 'light' | 'auto'
   ======================================================== */

/* This file works with the following inline <head> script:
   (function() {
     var t = localStorage.getItem('ideadunes_theme');
     if (t === 'dark') {
       document.documentElement.setAttribute('data-theme', 'dark');
       document.documentElement.classList.add('dark-mode');
     } else if (t === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
       document.documentElement.setAttribute('data-theme', 'dark');
       document.documentElement.classList.add('dark-mode');
     }
   })();
*/

/* ========================================================
   Dashboard-specific dark mode — stat cards, panels, chips
   ======================================================== */

html[data-theme="dark"] .dash-stat-card__value,
html.dark-mode .dash-stat-card__value {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .dash-stat-card__label,
html.dark-mode .dash-stat-card__label {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .dash-stat-card__icon,
html.dark-mode .dash-stat-card__icon {
  background: rgba(108, 88, 123, 0.2);
  color: var(--color-highlight);
}

html[data-theme="dark"] .dash-stat-card__footer,
html.dark-mode .dash-stat-card__footer {
  border-top-color: var(--color-border);
}

html[data-theme="dark"] .dash-stat-card__footer a,
html.dark-mode .dash-stat-card__footer a {
  color: var(--color-link);
}

html[data-theme="dark"] .dash-panel__header,
html.dark-mode .dash-panel__header {
  border-bottom-color: var(--color-border);
}

html[data-theme="dark"] .dash-panel__header h5,
html.dark-mode .dash-panel__header h5 {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .dash-list__item,
html.dark-mode .dash-list__item {
  border-bottom-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .dash-profile-chip,
html.dark-mode .dash-profile-chip {
  background: rgba(108, 88, 123, 0.2);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .dash-welcome-banner,
html.dark-mode .dash-welcome-banner {
  background: linear-gradient(135deg, #3d2a51 0%, #2d1e3b 100%);
}

html[data-theme="dark"] .dash-qa-btn,
html.dark-mode .dash-qa-btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .dash-stat-card--teal,
html.dark-mode .dash-stat-card--teal {
  border-left-color: var(--color-info);
}

html[data-theme="dark"] .dash-stat-card--green,
html.dark-mode .dash-stat-card--green {
  border-left-color: var(--color-success);
}

html[data-theme="dark"] .dash-stat-card--orange,
html.dark-mode .dash-stat-card--orange {
  border-left-color: var(--color-warning);
}

html[data-theme="dark"] .dash-stat-card--purple,
html.dark-mode .dash-stat-card--purple {
  border-left-color: var(--color-highlight);
}

/* Drawer dark mode */
html[data-theme="dark"] .drawer,
html.dark-mode .drawer {
  background: var(--color-bg-primary);
  box-shadow: -0.25rem 0 1.25rem rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .drawer-header,
html.dark-mode .drawer-header {
  border-bottom-color: var(--color-border);
  color: var(--color-text-primary);
}

/* Smart search dark mode */
html[data-theme="dark"] #smart-search-dropdown,
html.dark-mode #smart-search-dropdown {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Tile dark mode enhancements */
html[data-theme="dark"] .tile .tile-header,
html.dark-mode .tile .tile-header {
  border-bottom-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .tile .tile-footer,
html.dark-mode .tile .tile-footer {
  border-top-color: var(--color-border);
}

/* Loading states dark mode */
html[data-theme="dark"] .dash-loading-state,
html.dark-mode .dash-loading-state {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .dash-loading-spinner,
html.dark-mode .dash-loading-spinner {
  border-color: var(--color-border);
  border-top-color: var(--color-highlight);
}

html[data-theme="dark"] .stat-loading,
html.dark-mode .stat-loading {
  border-color: var(--color-border);
  border-top-color: var(--color-highlight);
}

/* Label/badge dark mode */
html[data-theme="dark"] .label-success,
html.dark-mode .label-success {
  background: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
}

html[data-theme="dark"] .label-warning,
html.dark-mode .label-warning {
  background: rgba(255, 183, 77, 0.2);
  color: var(--color-warning);
}

html[data-theme="dark"] .label-info,
html.dark-mode .label-info {
  background: rgba(41, 182, 246, 0.2);
  color: var(--color-info);
}

/* Breadcrumb dark mode */
html[data-theme="dark"] .breadcrumb,
html.dark-mode .breadcrumb {
  background: transparent;
  color: var(--color-text-muted);
}

html[data-theme="dark"] .breadcrumb > li > a,
html.dark-mode .breadcrumb > li > a {
  color: var(--color-link);
}

/* Alert dark mode */
html[data-theme="dark"] .alert,
html.dark-mode .alert {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .alert-success,
html.dark-mode .alert-success {
  background: rgba(76, 175, 80, 0.12);
  border-left-color: var(--color-success);
  color: #81c784;
}

html[data-theme="dark"] .alert-danger,
html.dark-mode .alert-danger {
  background: rgba(239, 83, 80, 0.12);
  border-left-color: var(--color-danger);
  color: #ef9a9a;
}

html[data-theme="dark"] .alert-warning,
html.dark-mode .alert-warning {
  background: rgba(255, 183, 77, 0.12);
  border-left-color: var(--color-warning);
  color: #ffcc80;
}

html[data-theme="dark"] .alert-info,
html.dark-mode .alert-info {
  background: rgba(41, 182, 246, 0.12);
  border-left-color: var(--color-info);
  color: #81d4fa;
}

/* Progress bar dark mode */
html[data-theme="dark"] .progress,
html.dark-mode .progress {
  background: var(--color-bg-secondary);
}

/* Pagination dark mode */
html[data-theme="dark"] .pagination > li > a,
html.dark-mode .pagination > li > a {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .pagination > li > a:hover,
html.dark-mode .pagination > li > a:hover {
  background: var(--color-bg-secondary);
  color: var(--color-highlight);
}

html[data-theme="dark"] .pagination > .active > a,
html.dark-mode .pagination > .active > a {
  background: var(--color-highlight);
  border-color: var(--color-highlight);
  color: #fff;
}

/* Chosen dropdown dark mode */
html[data-theme="dark"] .chosen-container .chosen-single,
html.dark-mode .chosen-container .chosen-single {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .chosen-container .chosen-drop,
html.dark-mode .chosen-container .chosen-drop {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .chosen-container .chosen-results li,
html.dark-mode .chosen-container .chosen-results li {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .chosen-container .chosen-results li.highlighted,
html.dark-mode .chosen-container .chosen-results li.highlighted {
  background: var(--color-highlight);
  color: #fff;
}

/* ========================================================
   v19.40.0 — Reusable Component Classes
   ======================================================== */

/* --- Modal Header Brand Gradient --- */
.modal-header--brand {
  background: linear-gradient(135deg, var(--color-highlight, #6c587b) 0%, #5a4868 100%);
  color: #fff;
  border: none;
  border-radius: 6px 6px 0 0;
}
.modal-header--brand .close,
.modal-header--brand .modal-title {
  color: #fff;
  text-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.15);
}

html[data-theme="dark"] .modal-header--brand,
html.dark-mode .modal-header--brand {
  background: linear-gradient(135deg, #4e3f5a 0%, var(--color-highlight, #a78fbf) 100%);
}

/* --- Hero Banner Brand Gradient --- */
.hero-banner--brand {
  background: linear-gradient(135deg, var(--color-highlight, #6c587b) 0%, #8b6fa0 100%);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 24px;
  color: #fff;
}

html[data-theme="dark"] .hero-banner--brand,
html.dark-mode .hero-banner--brand {
  background: linear-gradient(135deg, #4e3f5a 0%, #6c587b 100%);
}

/* --- Avatar Brand Gradient --- */
.avatar--brand {
  background: linear-gradient(135deg, var(--color-highlight, #6c587b), #4a3460);
}

html[data-theme="dark"] .avatar--brand,
html.dark-mode .avatar--brand {
  background: linear-gradient(135deg, #4e3f5a, #6c587b);
}

/* --- Storage / Progress Bar Brand --- */
.progress-bar--brand {
  background: linear-gradient(90deg, var(--color-highlight, #6c587b), #026277);
  transition: width .5s;
  border-radius: 0.25rem;
}

/* --- Dashboard Stat Card Border Colors — Dark Mode --- */
html[data-theme="dark"] .dash-stat-card--teal,
html.dark-mode .dash-stat-card--teal {
  border-left-color: #29b6f6;
}
html[data-theme="dark"] .dash-stat-card--green,
html.dark-mode .dash-stat-card--green {
  border-left-color: #4caf50;
}
html[data-theme="dark"] .dash-stat-card--orange,
html.dark-mode .dash-stat-card--orange {
  border-left-color: #ffb74d;
}
html[data-theme="dark"] .dash-stat-card--purple,
html.dark-mode .dash-stat-card--purple {
  border-left-color: #a78fbf;
}

/* --- Background Utility Dark Mode Variants --- */
html[data-theme="dark"] .bg-greensea,
html.dark-mode .bg-greensea { background-color: #1a7f6a; }
html[data-theme="dark"] .bg-lightred,
html.dark-mode .bg-lightred { background-color: #b03a2e; }
html[data-theme="dark"] .bg-blue,
html.dark-mode .bg-blue { background-color: #1a5490; }
html[data-theme="dark"] .bg-slategray,
html.dark-mode .bg-slategray { background-color: #4a5568; }
html[data-theme="dark"] .bg-orange,
html.dark-mode .bg-orange { background-color: #c0704f; }

/* ========================================================
   v19.40.0 — Table Mobile Card View
   ======================================================== */
@media (max-width: 767px) {
  .table-card-mobile { display: block; border: none; }
  .table-card-mobile thead { display: none; }
  .table-card-mobile tbody { display: block; }
  .table-card-mobile tr {
    display: block;
    background: var(--color-bg-primary, #fff);
    border: 0.0625rem solid var(--color-border, #e0e0e0);
    border-radius: 0.625rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,.06);
  }
  .table-card-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    border: none;
    border-bottom: 0.0625rem solid var(--color-border, #e5e7eb);
    font-size: .9rem;
  }
  .table-card-mobile td:last-child { border-bottom: none; }
  .table-card-mobile td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-secondary, #666);
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .table-card-mobile td .btn { min-height: 36px; font-size: .8rem; }
}

/* ========================================================
   v19.40.0 — Spacing Scale Tokens
   ======================================================== */
:root {
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
}

/* ========================================================
   v19.40.0 — Shadow Elevation System
   ======================================================== */
:root {
  --elevation-1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --elevation-2: 0 2px 8px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.06);
  --elevation-3: 0 8px 24px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);
  --elevation-4: 0 16px 48px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08);
}

html[data-theme="dark"],
html.dark-mode {
  --elevation-1: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
  --elevation-2: 0 2px 8px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.25);
  --elevation-3: 0 8px 24px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
  --elevation-4: 0 16px 48px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3);
}

/* ========================================================
   v19.40.0 — Skeleton Loader
   ======================================================== */
@keyframes skeleton-pulse {
  0%   { opacity: .6; }
  50%  { opacity: .3; }
  100% { opacity: .6; }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-bg-secondary, #f0f0f0) 25%, #e0e0e0 50%, var(--color-bg-secondary, #f0f0f0) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton * { visibility: hidden; }
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-text--title { height: 22px; width: 60%; }
.skeleton-text--short { width: 40%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card {
  height: 100px;
  border-radius: 10px;
  margin-bottom: 16px;
}

html[data-theme="dark"] .skeleton,
html.dark-mode .skeleton {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

/* ========================================================
   v19.40.0 — Empty State
   ======================================================== */
.empty-state {
  text-align: center;
  padding: var(--space-2xl, 48px) var(--space-lg, 24px);
  color: var(--color-text-muted, #999);
}
.empty-state__icon {
  font-size: 3rem;
  margin-bottom: var(--space-md, 16px);
  opacity: .4;
}
.empty-state__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-secondary, #666);
  margin-bottom: var(--space-sm, 8px);
}
.empty-state__desc {
  font-size: .92rem;
  max-width: 400px;
  margin: 0 auto var(--space-lg, 24px);
  line-height: 1.5;
}
.empty-state__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--color-highlight, #6c587b);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, transform .15s;
  min-height: 44px;
}
.empty-state__action:hover {
  background: #5a4868;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

html[data-theme="dark"] .empty-state__title,
html.dark-mode .empty-state__title {
  color: var(--color-text-primary);
}

/* ========================================================
   v19.40.0 — Quick Action Button Dark Mode & Enhancements
   ======================================================== */
html[data-theme="dark"] .dash-qa-btn--primary,
html.dark-mode .dash-qa-btn--primary { background: #2563eb; border-color: #2563eb; }
html[data-theme="dark"] .dash-qa-btn--success,
html.dark-mode .dash-qa-btn--success { background: #16a34a; border-color: #16a34a; }
html[data-theme="dark"] .dash-qa-btn--danger,
html.dark-mode .dash-qa-btn--danger { background: #dc2626; border-color: #dc2626; }
html[data-theme="dark"] .dash-qa-btn--warning,
html.dark-mode .dash-qa-btn--warning { background: #d97706; border-color: #d97706; }

@media (prefers-reduced-motion: reduce) {
  .dash-qa-btn,
  .empty-state__action,
  .skeleton { animation: none; transition: none; }
  .dash-qa-btn:hover,
  .empty-state__action:hover { transform: none; }
}