/* ============================================
   AYUDA.LA - Brand Kit Colors & Theme
   ============================================ */

:root {
  /* ===== BRAND KIT - Colores Base ===== */
  --ayuda-charcoal: #373435;
  --ayuda-tangerine: #fb8c23;
  --ayuda-burgundy: #9b0220;
  --ayuda-plum: #5f1040;
  --ayuda-teal: #114c5c;
  --ayuda-cyan: #0891b2;
  
  /* Colores derivados */
  --ayuda-tangerine-dark: #e07000;
  --ayuda-slate: #64748b;
  
  /* Variantes light (para fondos suaves) - Modo Claro */
  --ayuda-charcoal-lt: rgba(55, 52, 53, 0.1);
  --ayuda-tangerine-lt: rgba(251, 140, 35, 0.15);
  --ayuda-burgundy-lt: rgba(155, 2, 32, 0.12);
  --ayuda-plum-lt: rgba(95, 16, 64, 0.12);
  --ayuda-teal-lt: rgba(17, 76, 92, 0.12);
  --ayuda-slate-lt: rgba(100, 116, 139, 0.15);
  --ayuda-cyan-lt: rgba(8, 145, 178, 0.12);
  
  /* RGB values para variantes con opacity */
  --ayuda-charcoal-rgb: 55, 52, 53;
  --ayuda-tangerine-rgb: 251, 140, 35;
  --ayuda-burgundy-rgb: 155, 2, 32;
  --ayuda-plum-rgb: 95, 16, 64;
  --ayuda-teal-rgb: 17, 76, 92;
  --ayuda-cyan-rgb: 8, 145, 178;
}

/* ===== BACKGROUND CLASSES ===== */
.bg-ayuda-charcoal { background-color: var(--ayuda-charcoal) !important; }
.bg-ayuda-tangerine { background-color: var(--ayuda-tangerine) !important; }
.bg-ayuda-tangerine-dark { background-color: var(--ayuda-tangerine-dark) !important; }
.bg-ayuda-burgundy { background-color: var(--ayuda-burgundy) !important; }
.bg-ayuda-plum { background-color: var(--ayuda-plum) !important; }
.bg-ayuda-teal { background-color: var(--ayuda-teal) !important; }
.bg-ayuda-slate { background-color: var(--ayuda-slate) !important; }
.bg-ayuda-cyan { background-color: var(--ayuda-cyan) !important; }

/* Light variants - Modo Claro */
.bg-ayuda-charcoal-lt { background-color: var(--ayuda-charcoal-lt) !important; }
.bg-ayuda-tangerine-lt { background-color: var(--ayuda-tangerine-lt) !important; }
.bg-ayuda-burgundy-lt { background-color: var(--ayuda-burgundy-lt) !important; }
.bg-ayuda-plum-lt { background-color: var(--ayuda-plum-lt) !important; }
.bg-ayuda-teal-lt { background-color: var(--ayuda-teal-lt) !important; }
.bg-ayuda-slate-lt { background-color: var(--ayuda-slate-lt) !important; }
.bg-ayuda-cyan-lt { background-color: var(--ayuda-cyan-lt) !important; }

/* ===== TABLER BADGE TEXT CLASSES (foreground colors) ===== */
/* Solid badge text colors (white for dark backgrounds) */
.text-ayuda-charcoal-fg { color: #fff !important; }
.text-ayuda-tangerine-fg { color: #fff !important; }
.text-ayuda-tangerine-dark-fg { color: #fff !important; }
.text-ayuda-burgundy-fg { color: #fff !important; }
.text-ayuda-plum-fg { color: #fff !important; }
.text-ayuda-teal-fg { color: #fff !important; }
.text-ayuda-slate-fg { color: #fff !important; }
.text-ayuda-cyan-fg { color: #fff !important; }

/* Light badge text colors (much darker shade for WCAG AA contrast 4.5:1) */
.text-ayuda-charcoal-lt-fg { color: #1a1919 !important; }
.text-ayuda-tangerine-lt-fg { color: #7c4000 !important; }
.text-ayuda-burgundy-lt-fg { color: #6b0116 !important; }
.text-ayuda-plum-lt-fg { color: #3d0a29 !important; }
.text-ayuda-teal-lt-fg { color: #0a2e38 !important; }
.text-ayuda-slate-lt-fg { color: #3d4654 !important; }
.text-ayuda-cyan-lt-fg { color: #065666 !important; }

/* Dark mode adjustments for light badge text - LIGHT colors for dark bg */
[data-bs-theme="dark"] .text-ayuda-charcoal-lt-fg { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .text-ayuda-tangerine-lt-fg { color: #fff !important; }
[data-bs-theme="dark"] .text-ayuda-burgundy-lt-fg { color: #fca5a5 !important; }
[data-bs-theme="dark"] .text-ayuda-plum-lt-fg { color: #d8b4fe !important; }
[data-bs-theme="dark"] .text-ayuda-teal-lt-fg { color: #5eead4 !important; }
[data-bs-theme="dark"] .text-ayuda-slate-lt-fg { color: #fff !important; }
[data-bs-theme="dark"] .text-ayuda-cyan-lt-fg { color: #67e8f9 !important; }

/* ===== TABLER/BOOTSTRAP BADGE FOREGROUND CLASSES ===== */
/* Standard Tabler/Bootstrap color foreground classes for templates using Bootstrap colors */
.text-primary-fg, .text-blue-fg { color: #fff !important; }
.text-secondary-fg { color: #fff !important; }
.text-success-fg, .text-green-fg { color: #fff !important; }
.text-danger-fg, .text-red-fg { color: #fff !important; }
.text-warning-fg, .text-yellow-fg { color: #1e293b !important; }
.text-info-fg, .text-azure-fg, .text-cyan-fg { color: #fff !important; }
.text-purple-fg { color: #fff !important; }
.text-orange-fg { color: #fff !important; }

/* Light variant foreground classes - DARK colors for WCAG AA contrast */
.text-primary-lt-fg, .text-blue-lt-fg { color: #1a4971 !important; }
.text-secondary-lt-fg { color: #3d4654 !important; }
.text-success-lt-fg, .text-green-lt-fg { color: #1a6928 !important; }
.text-danger-lt-fg, .text-red-lt-fg { color: #8a2020 !important; }
.text-warning-lt-fg, .text-yellow-lt-fg { color: #664400 !important; }
.text-info-lt-fg, .text-azure-lt-fg, .text-cyan-lt-fg { color: #1a5276 !important; }
.text-purple-lt-fg { color: #6b2480 !important; }
.text-orange-lt-fg { color: #8a3d00 !important; }

/* Dark mode adjustments for Bootstrap light badge text - LIGHT colors for dark bg */
[data-bs-theme="dark"] .text-primary-lt-fg, [data-bs-theme="dark"] .text-blue-lt-fg { color: #93c5fd !important; }
[data-bs-theme="dark"] .text-secondary-lt-fg { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .text-success-lt-fg, [data-bs-theme="dark"] .text-green-lt-fg { color: #86efac !important; }
[data-bs-theme="dark"] .text-danger-lt-fg, [data-bs-theme="dark"] .text-red-lt-fg { color: #fca5a5 !important; }
[data-bs-theme="dark"] .text-warning-lt-fg, [data-bs-theme="dark"] .text-yellow-lt-fg { color: #fcd34d !important; }
[data-bs-theme="dark"] .text-info-lt-fg, [data-bs-theme="dark"] .text-azure-lt-fg, [data-bs-theme="dark"] .text-cyan-lt-fg { color: #7dd3fc !important; }
[data-bs-theme="dark"] .text-purple-lt-fg { color: #d8b4fe !important; }
[data-bs-theme="dark"] .text-orange-lt-fg { color: #fdba74 !important; }

/* ===== DARK MODE ADJUSTMENTS ===== */
[data-bs-theme="dark"] {
  /* Variantes light con mas opacidad para dark mode */
  --ayuda-charcoal-lt: rgba(255, 255, 255, 0.08);
  --ayuda-tangerine-lt: rgba(251, 140, 35, 0.2);
  --ayuda-burgundy-lt: rgba(155, 2, 32, 0.2);
  --ayuda-plum-lt: rgba(95, 16, 64, 0.2);
  --ayuda-teal-lt: rgba(17, 76, 92, 0.2);
  --ayuda-slate-lt: rgba(100, 116, 139, 0.2);
  --ayuda-cyan-lt: rgba(8, 145, 178, 0.2);
}

/* Note: Dark mode text colors for light variants are now handled via .text-*-lt-fg classes (Tabler badge pattern) */

/* ===== TEXT CLASSES ===== */
.text-ayuda-charcoal { color: var(--ayuda-charcoal) !important; }
.text-ayuda-tangerine { color: var(--ayuda-tangerine) !important; }
.text-ayuda-burgundy { color: var(--ayuda-burgundy) !important; }
.text-ayuda-plum { color: var(--ayuda-plum) !important; }
.text-ayuda-teal { color: var(--ayuda-teal) !important; }

[data-bs-theme="dark"] .text-ayuda-tangerine { color: #fbbf6a !important; }
[data-bs-theme="dark"] .text-ayuda-teal { color: #5eead4 !important; }

/* ===== BORDER CLASSES ===== */
.border-ayuda-tangerine { border-color: var(--ayuda-tangerine) !important; }
.border-ayuda-teal { border-color: var(--ayuda-teal) !important; }
.border-ayuda-plum { border-color: var(--ayuda-plum) !important; }

/* ===== NAVBAR & SIDEBAR ===== */
.navbar-vertical[data-bs-theme="dark"] {
  background-color: var(--ayuda-charcoal);
}

/* ── Sidebar section labels ── */
.nav-item-separator {
  pointer-events: none;
  padding-top: 0.75rem;
}

.nav-item-separator.first-separator {
  padding-top: 0;
}

.sidebar-section-label {
  display: block;
  padding: 0.25rem 0.75rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
}

/* ── Sidebar collapsible (desktop only) ── */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg {
    transition: width 0.25s ease;
  }

  .page-wrapper,
  .navbar-expand-lg.navbar-vertical ~ .navbar {
    transition: margin-left 0.25s ease;
  }

  /* Collapsed state */
  .page.sidebar-collapsed .navbar-vertical.navbar-expand-lg {
    width: 3.75rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page.sidebar-collapsed .navbar-expand-lg.navbar-vertical ~ .page-wrapper,
  .page.sidebar-collapsed .navbar-expand-lg.navbar-vertical ~ .navbar {
    margin-left: 3.75rem;
  }

  .page.sidebar-collapsed .navbar-vertical .nav-link-title,
  .page.sidebar-collapsed .navbar-vertical .navbar-brand span {
    display: none;
  }

  .page.sidebar-collapsed .navbar-vertical .nav-link-icon {
    margin: 0;
    width: 100%;
    text-align: center;
  }

  .page.sidebar-collapsed .navbar-vertical .nav-link {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }

  .page.sidebar-collapsed .navbar-vertical .nav-link.dropdown-toggle::after {
    display: none;
  }

  /* Section labels become thin dividers when collapsed */
  .page.sidebar-collapsed .sidebar-section-label {
    font-size: 0;
    padding: 0;
    margin: 0.5rem 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    height: 0;
    overflow: hidden;
  }

  .page.sidebar-collapsed .nav-item-separator.first-separator .sidebar-section-label {
    border-top: none;
    margin-top: 0;
  }

  /* Dropdown menus pop out to the right when collapsed */
  .page.sidebar-collapsed .navbar-vertical .nav-item.dropdown .dropdown-menu {
    position: fixed !important;
    left: 3.75rem;
    top: auto;
    min-width: 14rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    border-radius: 0.25rem;
  }

  /* Toggle button */
  .sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.15s ease;
  }

  .sidebar-toggle-btn:hover {
    color: rgba(255, 255, 255, 0.9);
  }

  .sidebar-toggle-btn .ti {
    font-size: 1.25rem;
  }

  .page.sidebar-collapsed .sidebar-toggle-btn {
    width: 3.75rem;
    min-width: 3.75rem;
    max-width: 3.75rem;
    padding: 0.5rem 0;
  }

  /* Toggle icon direction */
  .page.sidebar-collapsed .sidebar-toggle-btn .ti-layout-sidebar-left-collapse {
    display: none;
  }

  .page:not(.sidebar-collapsed) .sidebar-toggle-btn .ti-layout-sidebar-left-expand {
    display: none;
  }
}

/* Hide toggle button on mobile */
@media (max-width: 991.98px) {
  .sidebar-toggle-btn {
    display: none;
  }

  .nav-item-separator {
    padding-top: 0.5rem;
  }
}

/* ===== CARD STATUS INDICATORS ===== */
.card-status-top.bg-ayuda-tangerine,
.card-status-start.bg-ayuda-tangerine { background-color: var(--ayuda-tangerine) !important; }
.card-status-top.bg-ayuda-teal,
.card-status-start.bg-ayuda-teal { background-color: var(--ayuda-teal) !important; }
.card-status-top.bg-ayuda-burgundy,
.card-status-start.bg-ayuda-burgundy { background-color: var(--ayuda-burgundy) !important; }
.card-status-top.bg-ayuda-plum,
.card-status-start.bg-ayuda-plum { background-color: var(--ayuda-plum) !important; }

/* ===== PROGRESS BARS ===== */
.progress-bar.bg-ayuda-teal { background-color: var(--ayuda-teal) !important; }
.progress-bar.bg-ayuda-tangerine { background-color: var(--ayuda-tangerine) !important; }
.progress-bar.bg-ayuda-burgundy { background-color: var(--ayuda-burgundy) !important; }

[data-bs-theme="dark"] .progress {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ===== BUTTONS ===== */
.btn-ayuda-tangerine {
  background-color: var(--ayuda-tangerine);
  border-color: var(--ayuda-tangerine);
  color: #fff;
}
.btn-ayuda-tangerine:hover {
  background-color: var(--ayuda-tangerine-dark);
  border-color: var(--ayuda-tangerine-dark);
  color: #fff;
}

.btn-ayuda-teal {
  background-color: var(--ayuda-teal);
  border-color: var(--ayuda-teal);
  color: #fff;
}
.btn-ayuda-teal:hover {
  background-color: #0d3d4a;
  border-color: #0d3d4a;
  color: #fff;
}

.btn-ayuda-plum {
  background-color: var(--ayuda-plum);
  border-color: var(--ayuda-plum);
  color: #fff;
}
.btn-ayuda-plum:hover {
  background-color: #4a0c30;
  border-color: #4a0c30;
  color: #fff;
}

.btn-ayuda-burgundy {
  background-color: var(--ayuda-burgundy);
  border-color: var(--ayuda-burgundy);
  color: #fff;
}
.btn-ayuda-burgundy:hover {
  background-color: #7a011a;
  border-color: #7a011a;
  color: #fff;
}

/* Outline variants */
.btn-outline-ayuda-tangerine {
  color: var(--ayuda-tangerine);
  border-color: var(--ayuda-tangerine);
}
.btn-outline-ayuda-tangerine:hover {
  background-color: var(--ayuda-tangerine);
  color: #fff;
}

.btn-outline-ayuda-teal {
  color: var(--ayuda-teal);
  border-color: var(--ayuda-teal);
}
.btn-outline-ayuda-teal:hover {
  background-color: var(--ayuda-teal);
  color: #fff;
}

/* ===== AVATARS ===== */
.avatar.bg-ayuda-tangerine { background-color: var(--ayuda-tangerine) !important; }
.avatar.bg-ayuda-teal { background-color: var(--ayuda-teal) !important; }
.avatar.bg-ayuda-plum { background-color: var(--ayuda-plum) !important; }
.avatar.bg-ayuda-burgundy { background-color: var(--ayuda-burgundy) !important; }

/* ===== GENERAL DARK MODE FIXES ===== */
[data-bs-theme="dark"] .card {
  background-color: var(--tblr-bg-surface);
}

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

[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .list-group-item {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .list-group-item.bg-light,
[data-bs-theme="dark"] .list-group-item-action.bg-light {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Notification matrix category rows */
#notification-matrix .notification-category-row {
  background-color: var(--tblr-bg-surface-secondary, rgba(var(--tblr-body-color-rgb), 0.04));
}
[data-bs-theme="dark"] #notification-matrix .notification-category-row {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Table header bg-light dark mode fix */
[data-bs-theme="dark"] #notification-matrix thead th.bg-light {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Table row bg-light dark mode fix */
[data-bs-theme="dark"] tr.bg-light {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* ===== FOCUS STATES ===== */
.btn-ayuda-tangerine:focus,
.btn-ayuda-teal:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--ayuda-tangerine-rgb), 0.25);
}

/* ===== TOAST UI Editor - Light Mode ===== */
.toastui-editor-defaultUI {
  border-color: var(--tblr-border-color);
  border-radius: 4px;
}

.toastui-editor-defaultUI .toastui-editor-toolbar {
  background-color: #f8fafc;
  border-bottom-color: var(--tblr-border-color);
}

.toastui-editor-defaultUI .toastui-editor-toolbar-icons {
  background-color: transparent;
  color: #475569;
}

.toastui-editor-defaultUI .toastui-editor-toolbar-icons:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.toastui-editor-defaultUI .toastui-editor-toolbar-divider {
  background-color: var(--tblr-border-color);
}

.toastui-editor-defaultUI .toastui-editor-mode-switch {
  border-top-color: var(--tblr-border-color);
  background-color: #f8fafc;
}

.toastui-editor-defaultUI .toastui-editor-mode-switch .tab-item {
  border-color: var(--tblr-border-color);
  background-color: #fff;
}

.toastui-editor-defaultUI .toastui-editor-mode-switch .tab-item.active {
  background-color: #fff;
  border-bottom: 2px solid var(--ayuda-tangerine);
  color: var(--ayuda-tangerine);
  font-weight: 600;
}

/* Editor content area - Light Mode */
.toastui-editor-contents {
  font-family: inherit;
  font-size: 0.9375rem;
  color: #1e293b !important;
}

.toastui-editor-contents p,
.toastui-editor-contents li,
.toastui-editor-contents td,
.toastui-editor-contents th {
  color: #1e293b !important;
}

.toastui-editor-contents code {
  background: #f1f5f9;
  color: #dc2626;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 85%;
}

.toastui-editor-contents pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 6px;
}

.toastui-editor-contents pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.toastui-editor-contents blockquote {
  border-left: 4px solid var(--ayuda-teal);
  padding-left: 1rem;
  margin-left: 0;
  color: #64748b;
}

.toastui-editor-contents table th {
  background: #f1f5f9;
}

/* Markdown editor area - Light Mode */
.toastui-editor-md-container,
.toastui-editor-ww-container {
  background-color: #fff !important;
}

.toastui-editor-md-container .toastui-editor-md-preview {
  background: #fff;
}

/* ProseMirror (WYSIWYG) - Light Mode */
.ProseMirror {
  color: #1e293b !important;
  background-color: #fff !important;
}

.ProseMirror p,
.ProseMirror li,
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  color: #1e293b !important;
}

.ProseMirror .placeholder {
  color: #94a3b8 !important;
}

.toastui-editor-md-code-block-line-background {
  color: rgba(14, 23, 42, 1) !important;
}

/* CodeMirror (Markdown mode) - Light Mode */
.toastui-editor .CodeMirror {
  background-color: #fff !important;
  color: #1e293b !important;
}

.toastui-editor .CodeMirror-line,
.toastui-editor .CodeMirror-line span {
  color: #1e293b !important;
}

.toastui-editor .CodeMirror-cursor {
  border-left-color: #1e293b !important;
}

.toastui-editor .cm-header {
  color: #1e40af !important;
}

.toastui-editor .cm-link {
  color: #2563eb !important;
}

.toastui-editor .cm-url {
  color: #7c3aed !important;
}

.toastui-editor .cm-string {
  color: #16a34a !important;
}

.toastui-editor .cm-comment {
  color: #64748b !important;
}

/* ===== TOAST UI Editor - Dark Mode ===== */
[data-bs-theme="dark"] .toastui-editor-defaultUI {
  border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .toastui-editor-defaultUI .toastui-editor-toolbar {
  background-color: var(--tblr-bg-surface);
  border-bottom-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .toastui-editor-defaultUI .toastui-editor-toolbar-icons {
  color: #94a3b8;
  background-color: transparent;
}

[data-bs-theme="dark"] .toastui-editor-defaultUI .toastui-editor-toolbar-icons:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

[data-bs-theme="dark"] .toastui-editor-defaultUI .toastui-editor-toolbar-divider {
  background-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .toastui-editor-defaultUI .toastui-editor-mode-switch {
  border-top-color: var(--tblr-border-color);
  background-color: var(--tblr-bg-surface);
}

[data-bs-theme="dark"] .toastui-editor-defaultUI .toastui-editor-mode-switch .tab-item {
  border-color: var(--tblr-border-color);
  background-color: var(--tblr-bg-surface);
  color: #94a3b8;
}

[data-bs-theme="dark"] .toastui-editor-defaultUI .toastui-editor-mode-switch .tab-item.active {
  background-color: var(--tblr-bg-surface);
  border-bottom: 2px solid var(--ayuda-tangerine);
  color: var(--ayuda-tangerine);
  font-weight: 600;
}

/* Editor content area - Dark Mode */
[data-bs-theme="dark"] .toastui-editor-contents {
  color: #e2e8f0 !important;
  background-color: #1e293b !important;
}

[data-bs-theme="dark"] .toastui-editor-contents p,
[data-bs-theme="dark"] .toastui-editor-contents li,
[data-bs-theme="dark"] .toastui-editor-contents td,
[data-bs-theme="dark"] .toastui-editor-contents th {
  color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .toastui-editor-contents code {
  background: rgba(255, 255, 255, 0.1);
  color: #f87171;
}

[data-bs-theme="dark"] .toastui-editor-contents pre {
  background: #0f172a;
  color: #e2e8f0;
}

[data-bs-theme="dark"] .toastui-editor-contents blockquote {
  border-left-color: var(--ayuda-teal);
  color: #94a3b8;
}

[data-bs-theme="dark"] .toastui-editor-contents table th,
[data-bs-theme="dark"] .toastui-editor-contents table td {
  border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .toastui-editor-contents table th {
  background: rgba(255, 255, 255, 0.05);
}

/* ProseMirror (WYSIWYG) - Dark Mode */
[data-bs-theme="dark"] .ProseMirror {
  color: #e2e8f0 !important;
  background-color: #1e293b !important;
}

[data-bs-theme="dark"] .ProseMirror p,
[data-bs-theme="dark"] .ProseMirror li,
[data-bs-theme="dark"] .ProseMirror h1,
[data-bs-theme="dark"] .ProseMirror h2,
[data-bs-theme="dark"] .ProseMirror h3,
[data-bs-theme="dark"] .ProseMirror h4,
[data-bs-theme="dark"] .ProseMirror h5,
[data-bs-theme="dark"] .ProseMirror h6 {
  color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .ProseMirror .placeholder {
  color: #64748b !important;
}

/* Markdown editor area - Dark Mode */
[data-bs-theme="dark"] .toastui-editor-md-container,
[data-bs-theme="dark"] .toastui-editor-ww-container {
  background-color: #1e293b !important;
}

[data-bs-theme="dark"] .toastui-editor-md-container .toastui-editor-md-preview {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .toastui-editor-md-splitter {
  background-color: var(--tblr-border-color);
}

/* CodeMirror in TOAST UI - Dark Mode */
[data-bs-theme="dark"] .toastui-editor .CodeMirror {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .toastui-editor .CodeMirror-line,
[data-bs-theme="dark"] .toastui-editor .CodeMirror-line span {
  color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .toastui-editor .CodeMirror-cursor {
  border-left-color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .toastui-editor .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .toastui-editor .cm-header {
  color: #60a5fa !important;
}

[data-bs-theme="dark"] .toastui-editor .cm-link {
  color: #38bdf8 !important;
}

[data-bs-theme="dark"] .toastui-editor .cm-url {
  color: #a78bfa !important;
}

[data-bs-theme="dark"] .toastui-editor .cm-string {
  color: #4ade80 !important;
}

[data-bs-theme="dark"] .toastui-editor .cm-comment {
  color: #94a3b8 !important;
}

[data-bs-theme="dark"] .toastui-editor .cm-string {
  color: #4ade80;
}

[data-bs-theme="dark"] .toastui-editor .cm-comment {
  color: #94a3b8;
}

/* Popup menus - Dark Mode */
[data-bs-theme="dark"] .toastui-editor-popup {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .toastui-editor-popup-body {
  color: #e2e8f0;
}

[data-bs-theme="dark"] .toastui-editor-popup button {
  color: #e2e8f0;
}

[data-bs-theme="dark"] .toastui-editor-popup input,
[data-bs-theme="dark"] .toastui-editor-popup textarea {
  background-color: #1e293b;
  border-color: var(--tblr-border-color);
  color: #e2e8f0;
}

/* Context menu - Dark Mode */
[data-bs-theme="dark"] .toastui-editor-context-menu {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .toastui-editor-context-menu li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown menus - Dark Mode */
[data-bs-theme="dark"] .toastui-editor-dropdown-toolbar {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

/* Editor wrapper for height control */
.markdown-editor-wrapper {
  min-height: 200px;
}

.markdown-editor-wrapper.editor-large {
  min-height: 400px;
}

.editor-upload-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 6px 16px;
  font-size: 0.8125rem;
  color: var(--tblr-body-color);
  box-shadow: var(--tblr-box-shadow-sm);
  pointer-events: none;
}

/* Hide original textarea when editor is active */
textarea.markdown-editor {
  display: none;
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle {
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  color: var(--ayuda-tangerine) !important;
}

/* ===== ALERTS WITH BRAND COLORS ===== */
.alert-ayuda-tangerine {
  background-color: var(--ayuda-tangerine-lt);
  border-color: var(--ayuda-tangerine);
  color: #a85a00;
}

.alert-ayuda-teal {
  background-color: var(--ayuda-teal-lt);
  border-color: var(--ayuda-teal);
  color: var(--ayuda-teal);
}

.alert-ayuda-burgundy {
  background-color: var(--ayuda-burgundy-lt);
  border-color: var(--ayuda-burgundy);
  color: var(--ayuda-burgundy);
}

[data-bs-theme="dark"] .alert-ayuda-tangerine {
  color: #fbbf6a;
}

[data-bs-theme="dark"] .alert-ayuda-teal {
  color: #5eead4;
}

[data-bs-theme="dark"] .alert-ayuda-burgundy {
  color: #f87171;
}

/* ===== LINKS ===== */
a.text-ayuda-tangerine:hover {
  color: var(--ayuda-tangerine-dark) !important;
}

a.text-ayuda-teal:hover {
  color: #0d3d4a !important;
}

/* ===== NAVBAR USER MENU ===== */
/* Fix for badge overlapping username in header dropdown */
.navbar .nav-item.dropdown .nav-link > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.navbar .nav-item.dropdown .nav-link > div > div:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  line-height: 1.3;
}

.navbar .nav-item.dropdown .nav-link > div > div:last-child {
  margin-top: 0.15rem;
}

.navbar .nav-item.dropdown .nav-link > div .badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  padding: 0.2em 0.5em;
  line-height: 1;
}

/* ===== TABLES ===== */
.table-ayuda-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--ayuda-teal-lt);
}

[data-bs-theme="dark"] .table-ayuda-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(17, 76, 92, 0.1);
}

/* ===== TABLER BADGE STYLES ===== */
/* Base badge fixes - prevent overlapping */
.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  padding: 0.35em 0.65em;
  line-height: 1;
  box-sizing: border-box;
}

/* ===== LIGHT BADGE TEXT CONTRAST FIX ===== */
/* Ensure all light (-lt) background badges have proper dark text for WCAG AA readability (4.5:1 contrast) */
/* These rules provide automatic contrast - colors are much darker for proper visibility */

/* Bootstrap/Tabler standard light badges - DARK text for contrast */
.badge.bg-primary-lt, .badge.bg-blue-lt { color: #1a4971 !important; }
.badge.bg-secondary-lt { color: #3d4654 !important; }
.badge.bg-success-lt, .badge.bg-green-lt { color: #1a6928 !important; }
.badge.bg-danger-lt, .badge.bg-red-lt { color: #8a2020 !important; }
.badge.bg-warning-lt, .badge.bg-yellow-lt { color: #664400 !important; }
.badge.bg-info-lt, .badge.bg-azure-lt, .badge.bg-cyan-lt { color: #1a5276 !important; }
.badge.bg-purple-lt { color: #6b2480 !important; }
.badge.bg-orange-lt { color: #8a3d00 !important; }
.badge.bg-pink-lt { color: #8a1a45 !important; }
.badge.bg-indigo-lt { color: #2d3a8c !important; }
.badge.bg-teal-lt { color: #066049 !important; }
.badge.bg-lime-lt { color: #4a7510 !important; }

/* Ayuda.LA brand light badges - DARK text for contrast */
.badge.bg-ayuda-charcoal-lt { color: #1a1919 !important; }
.badge.bg-ayuda-tangerine-lt { color: #7c4000 !important; }
.badge.bg-ayuda-burgundy-lt { color: #6b0116 !important; }
.badge.bg-ayuda-plum-lt { color: #3d0a29 !important; }
.badge.bg-ayuda-teal-lt { color: #0a2e38 !important; }
.badge.bg-ayuda-slate-lt { color: #3d4654 !important; }
.badge.bg-ayuda-cyan-lt { color: #065666 !important; }

/* Force higher specificity for badges with explicit text class */
span.badge.bg-ayuda-tangerine-lt.text-ayuda-tangerine-lt-fg,
.badge.bg-ayuda-tangerine-lt.text-ayuda-tangerine-lt-fg { color: #7c4000 !important; }
span.badge.bg-ayuda-teal-lt.text-ayuda-teal-lt-fg,
.badge.bg-ayuda-teal-lt.text-ayuda-teal-lt-fg { color: #0a2e38 !important; }
span.badge.bg-ayuda-plum-lt.text-ayuda-plum-lt-fg,
.badge.bg-ayuda-plum-lt.text-ayuda-plum-lt-fg { color: #3d0a29 !important; }
span.badge.bg-ayuda-burgundy-lt.text-ayuda-burgundy-lt-fg,
.badge.bg-ayuda-burgundy-lt.text-ayuda-burgundy-lt-fg { color: #6b0116 !important; }
span.badge.bg-ayuda-slate-lt.text-ayuda-slate-lt-fg,
.badge.bg-ayuda-slate-lt.text-ayuda-slate-lt-fg { color: #3d4654 !important; }
span.badge.bg-ayuda-cyan-lt.text-ayuda-cyan-lt-fg,
.badge.bg-ayuda-cyan-lt.text-ayuda-cyan-lt-fg { color: #065666 !important; }
span.badge.bg-ayuda-charcoal-lt.text-ayuda-charcoal-lt-fg,
.badge.bg-ayuda-charcoal-lt.text-ayuda-charcoal-lt-fg { color: #1a1919 !important; }

/* Dark mode adjustments for light badges - lighter text on dark backgrounds */
[data-bs-theme="dark"] .badge.bg-primary-lt, [data-bs-theme="dark"] .badge.bg-blue-lt { color: #93c5fd !important; }
[data-bs-theme="dark"] .badge.bg-secondary-lt { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .badge.bg-success-lt, [data-bs-theme="dark"] .badge.bg-green-lt { color: #86efac !important; }
[data-bs-theme="dark"] .badge.bg-danger-lt, [data-bs-theme="dark"] .badge.bg-red-lt { color: #fca5a5 !important; }
[data-bs-theme="dark"] .badge.bg-warning-lt, [data-bs-theme="dark"] .badge.bg-yellow-lt { color: #fcd34d !important; }
[data-bs-theme="dark"] .badge.bg-info-lt, [data-bs-theme="dark"] .badge.bg-azure-lt, [data-bs-theme="dark"] .badge.bg-cyan-lt { color: #7dd3fc !important; }
[data-bs-theme="dark"] .badge.bg-purple-lt { color: #d8b4fe !important; }
[data-bs-theme="dark"] .badge.bg-orange-lt { color: #fdba74 !important; }
[data-bs-theme="dark"] .badge.bg-pink-lt { color: #f9a8d4 !important; }
[data-bs-theme="dark"] .badge.bg-indigo-lt { color: #a5b4fc !important; }
[data-bs-theme="dark"] .badge.bg-teal-lt { color: #5eead4 !important; }
[data-bs-theme="dark"] .badge.bg-lime-lt { color: #bef264 !important; }

[data-bs-theme="dark"] .badge.bg-ayuda-charcoal-lt { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .badge.bg-ayuda-tangerine-lt { color: #fdba74 !important; }
[data-bs-theme="dark"] .badge.bg-ayuda-burgundy-lt { color: #fca5a5 !important; }
[data-bs-theme="dark"] .badge.bg-ayuda-plum-lt { color: #d8b4fe !important; }
[data-bs-theme="dark"] .badge.bg-ayuda-teal-lt { color: #5eead4 !important; }
[data-bs-theme="dark"] .badge.bg-ayuda-slate-lt { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .badge.bg-ayuda-cyan-lt { color: #67e8f9 !important; }

/* Dark mode with explicit text class - higher specificity */
[data-bs-theme="dark"] span.badge.bg-ayuda-tangerine-lt.text-ayuda-tangerine-lt-fg,
[data-bs-theme="dark"] .badge.bg-ayuda-tangerine-lt.text-ayuda-tangerine-lt-fg { color: #fff !important; }
[data-bs-theme="dark"] span.badge.bg-ayuda-teal-lt.text-ayuda-teal-lt-fg,
[data-bs-theme="dark"] .badge.bg-ayuda-teal-lt.text-ayuda-teal-lt-fg { color: #5eead4 !important; }
[data-bs-theme="dark"] span.badge.bg-ayuda-plum-lt.text-ayuda-plum-lt-fg,
[data-bs-theme="dark"] .badge.bg-ayuda-plum-lt.text-ayuda-plum-lt-fg { color: #d8b4fe !important; }
[data-bs-theme="dark"] span.badge.bg-ayuda-burgundy-lt.text-ayuda-burgundy-lt-fg,
[data-bs-theme="dark"] .badge.bg-ayuda-burgundy-lt.text-ayuda-burgundy-lt-fg { color: #fca5a5 !important; }
[data-bs-theme="dark"] span.badge.bg-ayuda-slate-lt.text-ayuda-slate-lt-fg,
[data-bs-theme="dark"] .badge.bg-ayuda-slate-lt.text-ayuda-slate-lt-fg { color: #fff !important; }
[data-bs-theme="dark"] span.badge.bg-ayuda-cyan-lt.text-ayuda-cyan-lt-fg,
[data-bs-theme="dark"] .badge.bg-ayuda-cyan-lt.text-ayuda-cyan-lt-fg { color: #67e8f9 !important; }
[data-bs-theme="dark"] span.badge.bg-ayuda-charcoal-lt.text-ayuda-charcoal-lt-fg,
[data-bs-theme="dark"] .badge.bg-ayuda-charcoal-lt.text-ayuda-charcoal-lt-fg { color: #e2e8f0 !important; }

/* Also apply to anchor badges (links styled as badges) */
a.badge.bg-primary-lt, a.badge.bg-blue-lt { color: #1a4971 !important; }
a.badge.bg-secondary-lt { color: #3d4654 !important; }
a.badge.bg-success-lt, a.badge.bg-green-lt { color: #1a6928 !important; }
a.badge.bg-danger-lt, a.badge.bg-red-lt { color: #8a2020 !important; }
a.badge.bg-warning-lt, a.badge.bg-yellow-lt { color: #664400 !important; }
a.badge.bg-info-lt, a.badge.bg-azure-lt, a.badge.bg-cyan-lt { color: #1a5276 !important; }
a.badge.bg-purple-lt { color: #6b2480 !important; }
a.badge.bg-orange-lt { color: #8a3d00 !important; }

[data-bs-theme="dark"] a.badge.bg-primary-lt, [data-bs-theme="dark"] a.badge.bg-blue-lt { color: #93c5fd !important; }
[data-bs-theme="dark"] a.badge.bg-secondary-lt { color: #cbd5e1 !important; }
[data-bs-theme="dark"] a.badge.bg-success-lt, [data-bs-theme="dark"] a.badge.bg-green-lt { color: #86efac !important; }
[data-bs-theme="dark"] a.badge.bg-danger-lt, [data-bs-theme="dark"] a.badge.bg-red-lt { color: #fca5a5 !important; }
[data-bs-theme="dark"] a.badge.bg-warning-lt, [data-bs-theme="dark"] a.badge.bg-yellow-lt { color: #fcd34d !important; }
[data-bs-theme="dark"] a.badge.bg-info-lt, [data-bs-theme="dark"] a.badge.bg-azure-lt, [data-bs-theme="dark"] a.badge.bg-cyan-lt { color: #7dd3fc !important; }
[data-bs-theme="dark"] a.badge.bg-purple-lt { color: #d8b4fe !important; }
[data-bs-theme="dark"] a.badge.bg-orange-lt { color: #fdba74 !important; }

/* Ensure badges don't escape their containers */
.badge:not(.badge-notification) {
  position: relative !important;
  transform: none !important;
}

/* Badge in table cells */
.table td .badge,
.table th .badge {
  vertical-align: middle;
  margin: 0;
}

/* Badge in flex containers */
.d-flex .badge,
.flex-fill .badge {
  flex-shrink: 0;
}

/* Badge in card headers and list items */
.card-header .badge,
.list-group-item .badge {
  margin-left: auto;
}

/* Multiple badges in a row */
.badge + .badge {
  margin-left: 0.25rem;
}

/* Pill badges - rounded corners */
.badge-pill {
  border-radius: 10rem;
  padding-left: 0.65em;
  padding-right: 0.65em;
}

/* Notification badge - positioned in corner */
.badge-notification {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(25%, -25%);
  min-width: 1rem;
  min-height: 1rem;
}

/* Empty notification badge (dot) */
.badge-notification:empty {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  min-width: 0;
  min-height: 0;
}

/* Blinking animation for badges */
.badge-blink {
  animation: badge-blink 1s ease-in-out infinite;
}

@keyframes badge-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Badge sizes */
.badge-sm {
  font-size: 0.65rem;
  padding: 0.2em 0.45em;
}

.badge-lg {
  font-size: 0.9rem;
  padding: 0.45em 0.75em;
}

/* Badge text contrast - ensure dark backgrounds have light text */
.badge.bg-success,
.badge.bg-danger,
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-dark,
.badge.bg-info,
.badge.bg-teal,
.badge.bg-indigo,
.badge.bg-purple,
.badge.bg-pink,
.badge.bg-red,
.badge.bg-orange,
.badge.bg-green,
.badge.bg-cyan,
.badge.bg-blue,
.badge.bg-azure {
  color: #ffffff !important;
}

/* Warning badge typically needs dark text for readability */
.badge.bg-warning,
.badge.bg-yellow,
.badge.bg-lime {
  color: #1d273b !important;
}

/* ===== RIBBON/STATUS INDICATORS ===== */
.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-indicator-active { background-color: var(--ayuda-teal); }
.status-indicator-warning { background-color: var(--ayuda-tangerine); }
.status-indicator-danger { background-color: var(--ayuda-burgundy); }
.status-indicator-inactive { background-color: var(--ayuda-slate); }

/* ===== MARKDOWN CONTENT RENDERING ===== */
.markdown-content,
.markdown {
  line-height: 1.6;
}

.markdown-content h1, .markdown h1,
.markdown-content h2, .markdown h2,
.markdown-content h3, .markdown h3,
.markdown-content h4, .markdown h4,
.markdown-content h5, .markdown h5,
.markdown-content h6, .markdown h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.markdown-content h1:first-child, .markdown h1:first-child,
.markdown-content h2:first-child, .markdown h2:first-child,
.markdown-content h3:first-child, .markdown h3:first-child {
  margin-top: 0;
}

.markdown-content p, .markdown p {
  margin-bottom: 1em;
}

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

.markdown-content li, .markdown li {
  margin-bottom: 0.25em;
}

.markdown-content hr, .markdown hr {
  margin: 1.5em 0;
  border: 0;
  border-top: 1px solid #dee2e6;
}

.markdown-content pre,
.markdown pre {
  background: #f1f5f9;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
}

.markdown-content code,
.markdown code {
  background: #f1f5f9;
  color: #1e293b;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 85%;
}

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

.markdown-content blockquote,
.markdown blockquote {
  border-left: 4px solid #dee2e6;
  padding-left: 1rem;
  margin-left: 0;
  color: #6c757d;
}

.markdown-content img,
.markdown img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.broken-image-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--tblr-border-color, #dee2e6);
  border-radius: 4px;
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
  color: var(--tblr-secondary, #6c757d);
  font-size: 0.8125rem;
  min-height: 2.5rem;
}

.broken-image-placeholder i {
  font-size: 1.25rem;
  opacity: 0.6;
}

[data-bs-theme="dark"] .broken-image-placeholder {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--tblr-border-color, #475569);
}

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

.markdown-content table th,
.markdown-content table td,
.markdown table th,
.markdown table td {
  padding: 0.5rem;
  border: 1px solid #dee2e6;
}

.markdown-content table th,
.markdown table th {
  background: #f1f5f9;
  color: #1e293b;
}

/* Markdown Content - Dark Mode */
[data-bs-theme="dark"] .markdown-content pre,
[data-bs-theme="dark"] .markdown pre {
  background: #1e293b;
}

[data-bs-theme="dark"] .markdown-content code,
[data-bs-theme="dark"] .markdown code {
  background: #1e293b;
  color: #e2e8f0;
}

[data-bs-theme="dark"] .markdown-content blockquote,
[data-bs-theme="dark"] .markdown blockquote {
  border-left-color: #475569;
  color: #94a3b8;
}

[data-bs-theme="dark"] .markdown-content table th,
[data-bs-theme="dark"] .markdown-content table td,
[data-bs-theme="dark"] .markdown table th,
[data-bs-theme="dark"] .markdown table td {
  border-color: #475569;
}

[data-bs-theme="dark"] .markdown-content table th,
[data-bs-theme="dark"] .markdown table th {
  background: #1e293b;
  color: #e2e8f0;
}

/* ===== LOADING SPINNER ===== */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loader-overlay.active {
  opacity: 1;
  visibility: visible;
}

.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #FFF #FFF transparent transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.loader::after,
.loader::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent var(--ayuda-tangerine) var(--ayuda-tangerine);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}

.loader::before {
  width: 32px;
  height: 32px;
  border-color: #FFF #FFF transparent transparent;
  animation: rotation 1.5s linear infinite;
}

.loader-text {
  color: #fff;
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 500;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* ===== INFINITE SCROLL TABLES ===== */

/* Sortable header styling */
.sortable-header {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.sortable-header:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

[data-bs-theme="dark"] .sortable-header:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Sort indicator */
.sort-indicator {
  font-size: 0.85em;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.sortable-header:hover .sort-indicator {
  opacity: 1;
}

/* Infinite table container */
.infinite-table-container {
  position: relative;
}

/* Infinite table loader */
.infinite-table-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: var(--tblr-secondary-color);
}

/* Infinite table error message */
.infinite-table-error {
  margin: 0.5rem 1rem;
}

/* End of results message */
.infinite-table-end {
  font-size: 0.875rem;
  padding: 1rem;
  text-align: center;
  color: var(--tblr-secondary-color);
  border-top: 1px solid var(--tblr-border-color);
}

/* Sentinel for intersection observer */
.infinite-scroll-sentinel {
  height: 1px;
  visibility: hidden;
}

/* Table info text */
.infinite-table-info {
  font-size: 0.875rem;
}

/* Hover state for sortable headers - better visual feedback */
th[data-sort] {
  position: relative;
}

th[data-sort]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background-color 0.15s ease;
}

th[data-sort]:hover::after {
  background: var(--ayuda-tangerine);
}

/* Active sort column styling */
th[data-sort].active-sort {
  background-color: rgba(var(--ayuda-tangerine-rgb), 0.05);
}

[data-bs-theme="dark"] th[data-sort].active-sort {
  background-color: rgba(var(--ayuda-tangerine-rgb), 0.1);
}

/* Smooth row appearance animation for infinite scroll */
@keyframes fadeInRow {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.infinite-table-container tbody tr:not(.empty-state-row) {
  animation: fadeInRow 0.2s ease;
}

/* Empty state row - no animation */
.empty-state-row {
  animation: none !important;
}

/* ========================================
   Mentions - Pills & Autocomplete Dropdown
   ======================================== */

/* Base mention pill */
.mention {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.45rem;
  border-radius: 0.75rem;
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  cursor: default;
  white-space: nowrap;
  vertical-align: baseline;
}

.mention .ti {
  font-size: 0.8em;
}

/* Per-type color variants (light theme) */
.mention-user      { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.mention-ticket    { background: rgba(34, 197, 94, 0.12);  color: #16a34a; }
.mention-contract  { background: rgba(168, 85, 247, 0.12); color: #9333ea; }
.mention-company   { background: rgba(249, 115, 22, 0.12); color: #ea580c; }
.mention-invoice   { background: rgba(234, 179, 8, 0.12);  color: #ca8a04; }
.mention-article   { background: rgba(6, 182, 212, 0.12);  color: #0891b2; }
.mention-objective { background: rgba(20, 184, 166, 0.12); color: #0d9488; }
.mention-resource  { background: rgba(107, 114, 128, 0.12); color: #4b5563; }

/* Dark theme variants */
[data-bs-theme="dark"] .mention-user      { background: rgba(96, 165, 250, 0.18); color: #93bbfd; }
[data-bs-theme="dark"] .mention-ticket    { background: rgba(74, 222, 128, 0.18); color: #86efac; }
[data-bs-theme="dark"] .mention-contract  { background: rgba(192, 132, 252, 0.18); color: #d8b4fe; }
[data-bs-theme="dark"] .mention-company   { background: rgba(251, 146, 60, 0.18);  color: #fdba74; }
[data-bs-theme="dark"] .mention-invoice   { background: rgba(250, 204, 21, 0.18);  color: #fde047; }
[data-bs-theme="dark"] .mention-article   { background: rgba(34, 211, 238, 0.18);  color: #67e8f9; }
[data-bs-theme="dark"] .mention-objective { background: rgba(45, 212, 191, 0.18);  color: #5eead4; }
[data-bs-theme="dark"] .mention-resource  { background: rgba(156, 163, 175, 0.18); color: #d1d5db; }

/* Mention autocomplete dropdown */
.mention-dropdown {
  position: fixed;
  z-index: 10050;
  min-width: 300px;
  max-width: 420px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  font-size: 0.875rem;
}

[data-bs-theme="dark"] .mention-dropdown {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.mention-category-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tblr-secondary-color);
  background: var(--tblr-bg-surface-secondary, rgba(0,0,0,0.02));
  border-bottom: 1px solid var(--tblr-border-color);
}

[data-bs-theme="dark"] .mention-category-header {
  background: rgba(255, 255, 255, 0.03);
}

.mention-category:not(:first-child) .mention-category-header {
  border-top: 1px solid var(--tblr-border-color);
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.1s;
}

.mention-item:hover,
.mention-item.active {
  background: var(--tblr-active-bg, rgba(var(--ayuda-tangerine-rgb), 0.08));
}

.mention-item .ti {
  color: var(--tblr-secondary-color);
  font-size: 1rem;
  flex-shrink: 0;
}

.mention-item-primary {
  font-weight: 500;
  color: var(--tblr-body-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-item-secondary {
  color: var(--tblr-secondary-color);
  font-size: 0.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  max-width: 40%;
}

.mention-empty {
  padding: 1rem;
  text-align: center;
  color: var(--tblr-secondary-color);
  font-style: italic;
}

/* ---------------------------------------------------------------
   Omnisearch Modal
   --------------------------------------------------------------- */
#omnisearch-modal .modal-dialog {
  margin-top: 10vh;
}

#omnisearch-modal .omnisearch-item.active,
#omnisearch-modal .omnisearch-item:focus {
  background-color: var(--tblr-primary);
  color: #fff;
}

#omnisearch-modal .omnisearch-item.active .text-muted,
#omnisearch-modal .omnisearch-item.active .text-primary,
#omnisearch-modal .omnisearch-item.active .text-secondary {
  color: rgba(255, 255, 255, 0.85) !important;
}

#omnisearch-modal .omnisearch-item.active .badge {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* ===== PWA / iOS Safe Area Support ===== */
/* When running as standalone PWA on iPhones with notch or Dynamic Island,
   the status bar overlaps content. Use env(safe-area-inset-*) to push
   UI elements below the system chrome so they remain clickable. */

@supports (padding-top: env(safe-area-inset-top)) {
  /* Mobile: sidebar collapses into a top navbar; pad it so the
     hamburger button and brand sit below the iOS status bar */
  @media (max-width: 991.98px) {
    .navbar-vertical {
      padding-top: env(safe-area-inset-top);
    }
  }

  /* Desktop: sidebar is on the left; still respect top inset
     so the first nav items aren't hidden behind the status bar
     on iPads or landscape iPhones */
  @media (min-width: 992px) {
    .navbar-vertical {
      padding-top: env(safe-area-inset-top);
    }
  }

  /* Page wrapper respects left/right/bottom safe areas (e.g. home
     indicator bar on iPhones without a physical home button) */
  .page-wrapper {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .page {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Fixed-bottom elements (modals, loaders) must also clear the
     bottom safe area */
  .loader-overlay {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .cookie-consent-banner {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1055;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-consent-banner.cookie-consent-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-consent-banner.cookie-consent-hiding {
  opacity: 0;
  transform: translateY(100%);
}

.cookie-consent-inner {
  background: var(--tblr-bg-surface);
  border-top: 3px solid var(--ayuda-tangerine);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  padding: 1.25rem 1.5rem;
  max-width: 100%;
}

.cookie-consent-text {
  margin-bottom: 0.75rem;
}

.cookie-consent-text strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  color: var(--tblr-body-color);
}

.cookie-consent-text p {
  font-size: 0.85rem;
  color: var(--tblr-secondary-color);
  margin-bottom: 0;
  line-height: 1.5;
}

.cookie-consent-link {
  color: var(--ayuda-tangerine);
  text-decoration: underline;
}

.cookie-consent-link:hover {
  color: var(--ayuda-tangerine-dark);
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.cookie-consent-btn-accept {
  background: var(--ayuda-tangerine) !important;
  color: var(--ayuda-charcoal) !important;
  font-weight: 600;
  border: none;
}

.cookie-consent-btn-accept:hover {
  background: var(--ayuda-tangerine-dark) !important;
  color: var(--ayuda-charcoal) !important;
}

.cookie-consent-btn-manage {
  color: var(--tblr-secondary-color);
  border: 1px solid var(--tblr-border-color);
  background: transparent;
}

.cookie-consent-btn-manage:hover {
  color: var(--tblr-body-color);
  border-color: var(--tblr-body-color);
}

.cookie-consent-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tblr-border-color);
}

.cookie-consent-category {
  padding: 0.75rem 0;
}

.cookie-consent-category + .cookie-consent-category {
  border-top: 1px solid var(--tblr-border-color);
}

.cookie-consent-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.cookie-consent-category-header strong {
  font-size: 0.875rem;
  color: var(--tblr-body-color);
}

.cookie-consent-category-desc {
  font-size: 0.8rem;
  color: var(--tblr-secondary-color);
  margin-top: 0.125rem;
  line-height: 1.4;
}

.cookie-consent-details-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

/* Collapsible sidebar cards */
.collapse-chevron {
  transition: transform 0.2s ease;
  display: inline-flex;
}

[data-collapsible-card] .card-header.cursor-pointer:hover {
  background-color: rgba(var(--tblr-muted-rgb), 0.04);
}

[data-collapsible-card] .card-header .card-actions {
  gap: 0.25rem;
}

@media (min-width: 768px) {
  .cookie-consent-inner {
    display: block;
    padding: 1rem 2rem;
  }

  .cookie-consent-text {
    margin-bottom: 0.5rem;
  }

  .cookie-consent-text p {
    max-width: 80ch;
  }
}