/* =====================================================================
   LucoLinx Brand Stylesheet
   Palette + typography from the official LucoLinx brand guidelines.
   Loaded globally (admin shell, public layout, auth pages) so brand
   accents apply without editing every inline colour.
   ===================================================================== */

:root {
    /* Core brand palette */
    --lx-blue:      #185fa5;  /* primary */
    --lx-blue-dark: #124b82;  /* primary hover/active */
    --lx-navy:      #14213a;  /* headings / dark surfaces */
    --lx-crimson:   #d31148;  /* accent / danger-brand */
    --lx-gray:      #a39693;  /* warm gray / muted */
    --lx-light:     #f5f5fb;  /* light background */

    /* Bootstrap-compatible aliases */
    --primary: var(--lx-blue);
}

/* ---- Typography ---------------------------------------------------- */
/* Real brand fonts (Merel Black / Proxima Nova) load if the .woff2 files
   are dropped into assets/lucolinx/fonts/. Otherwise close web fallbacks
   (Montserrat) are used automatically via the family lists below. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/ProximaNova-Regular.woff2') format('woff2');
    font-weight: 400 600;
    font-display: swap;
}
@font-face {
    font-family: 'Merel';
    src: url('fonts/Merel-Black.woff2') format('woff2');
    font-weight: 700 900;
    font-display: swap;
}

:root {
    --lx-font-heading: 'Merel', 'Montserrat', 'Segoe UI', Arial, sans-serif;
    --lx-font-body:    'Proxima Nova', 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}

/* ---- Brand colour utilities --------------------------------------- */
.lx-text-blue    { color: var(--lx-blue) !important; }
.lx-text-navy    { color: var(--lx-navy) !important; }
.lx-text-crimson { color: var(--lx-crimson) !important; }
.lx-bg-blue      { background-color: var(--lx-blue) !important; }
.lx-bg-navy      { background-color: var(--lx-navy) !important; }
.lx-bg-crimson   { background-color: var(--lx-crimson) !important; }

/* ---- Bootstrap 4 primary override --------------------------------- */
.btn-primary {
    background-color: var(--lx-blue) !important;
    border-color: var(--lx-blue) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--lx-blue-dark) !important;
    border-color: var(--lx-blue-dark) !important;
}
.btn-outline-primary {
    color: var(--lx-blue) !important;
    border-color: var(--lx-blue) !important;
}
.btn-outline-primary:hover {
    background-color: var(--lx-blue) !important;
    color: #fff !important;
}
.text-primary        { color: var(--lx-blue) !important; }
.bg-primary,
.badge-primary       { background-color: var(--lx-blue) !important; }
a                    { color: var(--lx-blue); }
a:hover              { color: var(--lx-blue-dark); }

/* Brand danger = crimson (keeps semantic red, on-brand) */
.btn-danger  { background-color: var(--lx-crimson) !important; border-color: var(--lx-crimson) !important; }
.text-danger { color: var(--lx-crimson) !important; }

/* Dark bars (public navbar uses .bg-dark) -> brand navy */
.navbar.bg-dark,
.bg-dark { background-color: var(--lx-navy) !important; }
.navbar-brand { font-family: var(--lx-font-heading); font-weight: 800; letter-spacing: .5px; }

/* ---- AdminLTE sidebar / accents ----------------------------------- */
.sidebar-dark-primary { background-color: var(--lx-navy) !important; }
.nav-sidebar .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--lx-blue) !important;
    color: #fff !important;
}
.brand-link { border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-link .brand-text { font-family: var(--lx-font-heading); font-weight: 800; }
.main-header.navbar-white .nav-link { color: var(--lx-navy); }

/* LucoLinx logo helper */
.lx-logo { height: 40px; width: auto; display: inline-block; }

/* Strict brand palette - remap Bootstrap semantic utilities (LucoLinx) */
.text-success,.badge-success{color:var(--lx-blue)!important}
.bg-success,.btn-success{background-color:var(--lx-blue)!important;border-color:var(--lx-blue)!important}
.text-info,.badge-info{color:var(--lx-blue)!important}
.bg-info,.btn-info{background-color:var(--lx-blue)!important;border-color:var(--lx-blue)!important}
.text-purple,.badge-purple{color:var(--lx-navy)!important}
.bg-purple{background-color:var(--lx-navy)!important}

/* ================= Brand buttons (project-wide, LucoLinx) ================= */
/* Filled brand-blue buttons -> blue bg + WHITE text in every state
   (defeats a:-webkit-any-link and :visited link coloring on <a> buttons) */
.btn-custom-blue, .btn-primary, .btn-info, .btn-success,
a.btn-custom-blue, a.btn-primary, a.btn-info, a.btn-success,
a.btn-custom-blue:link, a.btn-custom-blue:visited, a.btn-custom-blue:hover, a.btn-custom-blue:focus, a.btn-custom-blue:active,
a.btn-primary:link, a.btn-primary:visited {
  background-color: var(--lx-blue) !important;
  border-color: var(--lx-blue) !important;
  color: #fff !important;
}
.btn-custom-blue *, .btn-primary *, .btn-info *, .btn-success * { color: #fff !important; }
.btn-custom-blue:hover, .btn-custom-blue:focus, .btn-custom-blue:active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-success:hover {
  background-color: var(--lx-blue-dark) !important;
  border-color: var(--lx-blue-dark) !important;
  color: #fff !important;
}
/* Danger = brand crimson, white text */
.btn-danger, a.btn-danger, a.btn-danger:link, a.btn-danger:visited {
  background-color: var(--lx-crimson) !important;
  border-color: var(--lx-crimson) !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus { background-color: #a50e39 !important; border-color: #a50e39 !important; color: #fff !important; }
.btn-danger * { color: #fff !important; }
/* Outline primary = brand blue */
.btn-outline-primary, a.btn-outline-primary { color: var(--lx-blue) !important; border-color: var(--lx-blue) !important; background-color: transparent !important; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--lx-blue) !important; color: #fff !important; }
/* Secondary/light buttons keep readable text */
.btn-secondary { background-color: var(--lx-gray) !important; border-color: var(--lx-gray) !important; color: #fff !important; }

/* ============ Accessibility, theming & polish (LucoLinx — Rules 15/16/18/20) ============ */
:root { --lx-muted: #6b625e; }   /* WCAG-AA warm gray for muted text on light backgrounds */

/* --- Keyboard focus outlines (Rule 16) --- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .lx-nav-link:focus-visible {
  outline: 2px solid var(--lx-blue) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* --- Skeleton loaders (Rule 18) --- */
.lx-skeleton { position: relative; overflow: hidden; background: #e9edf3; border-radius: 8px; min-height: 12px; }
.lx-skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: lxShimmer 1.3s infinite; }
@keyframes lxShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .lx-skeleton::after{ animation:none; } }

/* --- Mobile: wide tables scroll instead of breaking; opt-in card layout via table.lx-cards + data-label (Rule 15) --- */
@media (max-width: 767px){
  .table-responsive, .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.table, table.dataTable { min-width: 600px; }
  table.lx-cards, table.lx-cards thead, table.lx-cards tbody, table.lx-cards tr, table.lx-cards td { display:block; width:100%; min-width:0; }
  table.lx-cards thead { display:none; }
  table.lx-cards tr { margin-bottom:12px; border:1px solid #e2e8f0; border-radius:10px; padding:6px 10px; background:#fff; }
  table.lx-cards td { display:flex; justify-content:space-between; gap:12px; border:none !important; text-align:right; padding:6px 4px; }
  table.lx-cards td::before { content: attr(data-label); font-weight:700; color:#14213a; text-align:left; }
}
.lx-theme-toggle { cursor:pointer; }

/* --- Dark mode (Rule 20): shell + dashboard surfaces --- */
html[data-theme="dark"] { color-scheme: dark; --lx-muted: #9a9da4; }
html[data-theme="dark"] body,
html[data-theme="dark"] .content-wrapper { background-color: #16181c !important; color: #e2e8f0; }
html[data-theme="dark"] #header,
html[data-theme="dark"] .top-bar-container,
html[data-theme="dark"] .main-header { background-color: #14213a !important; }
html[data-theme="dark"] #header, html[data-theme="dark"] #header *:not(.btn):not(img) { color:#e2e8f0; }
/* ===== Dark-mode auth header (login / register / forgot / reset) =====
   The wordmark is two-tone (navy "Luco" + blue "Linx"); the navy half vanishes into the navy
   header in dark mode. Keep the full-color logo on a light chip, tidy the layout, soften the seams. */
html[data-theme="dark"] #header {
  border-bottom: 1px solid rgba(255,255,255,.10) !important;   /* was a hard #e5e5e5 seam on navy */
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* slim top strip: language switcher + fullscreen, vertically centred */
html[data-theme="dark"] #header .top-bar-container.header_desktop {
  height: 40px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
html[data-theme="dark"] #header .top-bar-container.header_desktop .row { display: flex !important; align-items: stretch; height: 40px; margin-left: 0 !important; margin-right: 0 !important; }
html[data-theme="dark"] #header .top-bar-container.header_desktop .col-5 { display: flex !important; align-items: center; }
html[data-theme="dark"] #header .top-bar-menu.part2 { display: flex !important; align-items: center; justify-content: flex-end; width: 100%; height: 40px; margin: 0 !important; padding-right: 8px !important; }
html[data-theme="dark"] #header .top-bar-menu.part2 li { position: static !important; top: 0 !important; left: 0 !important; margin: 0 2px !important; padding: 0 7px !important; }
html[data-theme="dark"] #header .top-bar-menu.part2 li a { color: #c7cfdb !important; font-size: 13px; letter-spacing: .3px; }
html[data-theme="dark"] #header .top-bar-menu.part2 li a:hover { color: #fff !important; }
/* main bar: dark-optimised logo (white wordmark + colour mark) straight on the navy — no chip */
html[data-theme="dark"] #header .head.row { display: flex !important; align-items: center; min-height: 72px; margin: 0 !important; }
html[data-theme="dark"] #header .head.row .logo-container { display: flex !important; align-items: center; height: auto !important; }
html[data-theme="dark"] #header .head.row .logo-container a.logo { display: inline-flex; align-items: center; margin: 0 0 0 32px; line-height: 0; }
/* Logo variants: full-colour logo on light surfaces, white-wordmark logo on dark surfaces.
   Generic (not header-scoped) so it also covers the post-login app header; each <img> keeps its own height. */
.lx-logo-dark { display: none; }
html[data-theme="dark"] .lx-logo-light { display: none !important; }
html[data-theme="dark"] .lx-logo-dark { display: inline-block !important; }
html[data-theme="dark"] .custom-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-box { background:#1f2226 !important; color:#e2e8f0 !important; box-shadow:0 4px 15px rgba(0,0,0,.35) !important; }
html[data-theme="dark"] .section-title, html[data-theme="dark"] .value-lg, html[data-theme="dark"] .manual-title,
html[data-theme="dark"] .content-header h1,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color:#f1f5f9 !important; }
html[data-theme="dark"] table, html[data-theme="dark"] .table { color:#e2e8f0 !important; }
html[data-theme="dark"] .table thead th { color:#ced1d6 !important; border-color:#3a3c42 !important; }
html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color:#2d2f34 !important; }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select { background:#1f2226 !important; color:#e2e8f0 !important; border-color:#3a3c42 !important; }
html[data-theme="dark"] .form-control::placeholder { color:#9a9da4 !important; }
html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .breadcrumb-item, html[data-theme="dark"] .breadcrumb-item.active { color:#9a9da4 !important; }
html[data-theme="dark"] .lx-skeleton { background:#272a2f; }
html[data-theme="dark"] .lx-skeleton::after { background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
html[data-theme="dark"] table.lx-cards tr { background:#1f2226 !important; border-color:#2d2f34 !important; }

/* ===== Dark-mode fixes for EPS license / free-trial dashboards =====
   These views carry hard-coded light-theme colours (filter labels #444, tabs #667/#778,
   dark brand-blue/crimson counts & pills, #eee seams) that are unreadable on the dark surfaces. */
html[data-theme="dark"] .breadcrumb a { color:#7fb2e6 !important; }
html[data-theme="dark"] .eps-container .filter-group label { color:#c7cfdb !important; }
html[data-theme="dark"] .eps-container .filter-input { border-color:#3a3c42 !important; }
html[data-theme="dark"] .eps-container .tab-btn { color:#9aa7b8; }
html[data-theme="dark"] .eps-container .tab-btn.active { color:#6ea8dc; }
html[data-theme="dark"] .eps-container .tab-btn.active::after { background:#6ea8dc; }
html[data-theme="dark"] .eps-container .count-badge { color:#9aa7b8; }
html[data-theme="dark"] .eps-container .tab-btn.active .count-badge { color:#cfe4fb; }
html[data-theme="dark"] .eps-container .stat-card.active .count,
html[data-theme="dark"] .eps-container .stat-card.active .pill { color:#6ea8dc !important; }
html[data-theme="dark"] .eps-container .stat-card.inactive .count,
html[data-theme="dark"] .eps-container .stat-card.inactive .pill { color:#ff6f91 !important; }
html[data-theme="dark"] .eps-container .table-toolbar { border-bottom-color:#2d2f34 !important; }
html[data-theme="dark"] .eps-container [style*="color:#667"] { color:#9aa7b8 !important; }
html[data-theme="dark"] .eps-container .page-btn:hover:not(:disabled):not(.active) { color:#6ea8dc !important; border-color:#3a3c42 !important; }

/* ===== Dark-mode: EPS export / reports / notifications pages ===== */
html[data-theme="dark"] .field-label,
html[data-theme="dark"] .stat-label { color:#c7cfdb !important; }
html[data-theme="dark"] .ptab-btn { color:#9aa7b8 !important; }
html[data-theme="dark"] .ptab-btn.active { color:#6ea8dc !important; }
html[data-theme="dark"] .stat-val { color:var(--lx-text) !important; }
html[data-theme="dark"] .badge-required,
html[data-theme="dark"] .badge-gdpr-art { color:#ff6f91 !important; }
html[data-theme="dark"] .disclaimer { background:var(--lx-surface-2) !important; border-color:#3a3c42 !important; color:#c7cfdb !important; }

/* ===== Dark-mode: shared muted text, light card headers, and Select2 dropdowns ===== */
html[data-theme="dark"] .content-wrapper .text-muted,
html[data-theme="dark"] main .text-muted { color:#9aa7b8 !important; }
html[data-theme="dark"] .head-text { background:transparent !important; color:var(--lx-text) !important; }
html[data-theme="dark"] .select2-container--default .select2-selection { background:var(--lx-surface) !important; border-color:#3a3c42 !important; }
html[data-theme="dark"] .select2-container--default .select2-selection__rendered { color:var(--lx-text) !important; }
html[data-theme="dark"] .select2-container--default .select2-selection__placeholder { color:#9aa7b8 !important; }
html[data-theme="dark"] .select2-dropdown { background:var(--lx-surface) !important; border-color:#3a3c42 !important; }
html[data-theme="dark"] .select2-results__option { color:var(--lx-text) !important; background:var(--lx-surface) !important; }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background:var(--lx-blue) !important; color:#fff !important; }
html[data-theme="dark"] .select2-search__field { background:var(--lx-surface-2) !important; color:var(--lx-text) !important; border-color:#3a3c42 !important; }

/* ===== Dark-mode mop-up: form links, reset buttons, reports trend table, chips, status badges ===== */
html[data-theme="dark"] .policy-link { color:#7fb2e6 !important; }
html[data-theme="dark"] .btn-reset-form { color:#c7cfdb !important; border-color:#3a3c42 !important; }
html[data-theme="dark"] .trend-table th { color:#c7cfdb !important; }
html[data-theme="dark"] .trend-table td { color:#e2e8f0 !important; }
html[data-theme="dark"] .field-chip,
html[data-theme="dark"] .field-chip span { color:#c7cfdb !important; }
html[data-theme="dark"] .status-badge { background:#3a3c42 !important; color:#e7e9ee !important; }
html[data-theme="dark"] textarea::placeholder { color:#9aa7b8 !important; }
/* Summernote rich-text editor (notification compose) */
html[data-theme="dark"] .note-placeholder { color:#9aa7b8 !important; }
html[data-theme="dark"] .note-editable { background:var(--lx-surface) !important; color:var(--lx-text) !important; }
html[data-theme="dark"] .note-editor.note-frame,
html[data-theme="dark"] .note-editor.note-airframe { border-color:#3a3c42 !important; }
html[data-theme="dark"] .note-toolbar { background:var(--lx-surface-2) !important; border-color:#3a3c42 !important; }
html[data-theme="dark"] .note-btn { background:var(--lx-surface) !important; color:var(--lx-text) !important; border-color:#3a3c42 !important; }
/* Auth forgot/reset/register: neutralise the hard-coded white `.text-color` chips + theme body copy */
html[data-theme="dark"] .text-color { background-color:transparent !important; color:var(--lx-text) !important; }
html[data-theme="dark"] .card-body > p { color:#c7cfdb !important; }

/* ===== Dark-mode: docs-admin authoring forms (book/page create & edit) ===== */
html[data-theme="dark"] .docs-admin-container label { color:var(--lx-text) !important; }
html[data-theme="dark"] .docs-admin-container input[type="text"],
html[data-theme="dark"] .docs-admin-container input[type="url"],
html[data-theme="dark"] .docs-admin-container input[type="number"],
html[data-theme="dark"] .docs-admin-container textarea,
html[data-theme="dark"] .docs-admin-container select { background-color:var(--lx-surface) !important; color:var(--lx-text) !important; border-color:#3a3c42 !important; }
html[data-theme="dark"] .docs-admin-container input::placeholder,
html[data-theme="dark"] .docs-admin-container textarea::placeholder { color:#9aa7b8 !important; }
html[data-theme="dark"] .docs-admin-container .btn-secondary { background:var(--lx-surface-2) !important; color:var(--lx-text) !important; border-color:#3a3c42 !important; }
html[data-theme="dark"] .docs-admin-container .book-slug { color:#9aa7b8 !important; }
html[data-theme="dark"] .docs-admin-container .version-badge,
html[data-theme="dark"] .docs-admin-container .btn-action { background-color:var(--lx-surface-2) !important; color:#c7cfdb !important; border-color:#3a3c42 !important; }

/* ===== Dark-mode: Manage Help Videos + Manage Manuals =====
   These views hard-code their light palette with !important, so every rule here
   needs the .docs-admin-container prefix to out-specify them.
   Retargeting the container's own tokens first covers every var() use in one go
   (borders on .preview, .tox-tinymce, hints and so on). */
html[data-theme="dark"] .docs-admin-container { --border-color:#3a3c42; --text-primary:#e7e9ee; --text-secondary:#9aa7b8; }

html[data-theme="dark"] .docs-admin-container .card { background:var(--lx-surface) !important; border-color:#3a3c42 !important; box-shadow:0 4px 15px rgba(0,0,0,.35) !important; }
html[data-theme="dark"] .docs-admin-container td { color:var(--lx-text) !important; border-bottom-color:#2d2f34 !important; }
/* Header row blends into the card. A filled band only works on the views whose th
   carries side padding (videos/pages); books_list uses a bare `padding:0 0 1rem`
   header, where a band reads as a misplaced strip — so none of them get one. */
html[data-theme="dark"] .docs-admin-container th { background:transparent !important; color:#9aa7b8 !important; border-bottom:1px solid var(--lx-border) !important; }
html[data-theme="dark"] .docs-admin-container .video-name { color:var(--lx-text) !important; }
html[data-theme="dark"] .docs-admin-container .video-key,
html[data-theme="dark"] .docs-admin-container .keybox { background:var(--lx-surface-2) !important; color:#9aa7b8 !important; border-color:#3a3c42 !important; }
html[data-theme="dark"] .docs-admin-container .desc-cell { color:#c7cfdb !important; }
html[data-theme="dark"] .docs-admin-container .desc-empty { color:#9a9da4 !important; }
html[data-theme="dark"] .docs-admin-container .no-preview { background:var(--lx-surface-2) !important; border-color:#3a3c42 !important; color:#9aa7b8 !important; }

/* Status pills and the version chip: light tints become translucent washes. */
html[data-theme="dark"] .docs-admin-container .ver-badge { background:rgba(22,163,74,.16) !important; border-color:rgba(22,163,74,.35) !important; color:#6ee7a8 !important; }
html[data-theme="dark"] .docs-admin-container .pill-on { background:rgba(22,163,74,.18) !important; color:#6ee7a8 !important; }
html[data-theme="dark"] .docs-admin-container .pill-off { background:var(--lx-surface-2) !important; color:#9aa7b8 !important; }
html[data-theme="dark"] .docs-admin-container .pill-missing { background:rgba(220,38,38,.18) !important; border-color:rgba(220,38,38,.38) !important; color:#ff8a8a !important; }

/* Outline buttons sit on white in light mode — give them the card surface instead. */
html[data-theme="dark"] .docs-admin-container .btn-add,
html[data-theme="dark"] .docs-admin-container .btn-edit,
html[data-theme="dark"] .docs-admin-container .btn-delete { background:var(--lx-surface-2) !important; }
/* Restated because the rule above out-specifies the views' own :hover fills. */
html[data-theme="dark"] .docs-admin-container .btn-add:hover { background:#16a34a !important; color:#fff !important; }
html[data-theme="dark"] .docs-admin-container .btn-edit:hover { background:#3b82f6 !important; color:#fff !important; }
html[data-theme="dark"] .docs-admin-container .btn-delete:hover { background:#ef4444 !important; color:#fff !important; }
html[data-theme="dark"] .docs-admin-container .btn-pages { background:var(--lx-surface-2) !important; border-color:#3a3c42 !important; color:#c7cfdb !important; }
html[data-theme="dark"] .docs-admin-container .btn-pages:hover { background:#3a3c42 !important; border-color:#4a4e56 !important; color:#fff !important; }
html[data-theme="dark"] .docs-admin-container .btn-version { background:var(--lx-surface-2) !important; border:1px solid #3a3c42 !important; }
html[data-theme="dark"] .docs-admin-container .btn-version:hover { background:#3a3c42 !important; }

/* Version dropdown */
html[data-theme="dark"] .docs-admin-container .ver-dd-btn,
html[data-theme="dark"] .docs-admin-container .ver-dd-menu { background:var(--lx-surface) !important; border-color:#3a3c42 !important; color:var(--lx-text) !important; }
html[data-theme="dark"] .docs-admin-container .ver-dd-btn:hover { border-color:#4a4e56 !important; }
html[data-theme="dark"] .docs-admin-container .ver-dd-menu { box-shadow:0 14px 34px rgba(0,0,0,.55) !important; }
html[data-theme="dark"] .docs-admin-container .ver-dd-item { color:#c7cfdb !important; }
html[data-theme="dark"] .docs-admin-container .ver-dd-item:hover { background:var(--lx-surface-2) !important; color:#fff !important; }
html[data-theme="dark"] .docs-admin-container .ver-dd-item.active { background:rgba(220,38,38,.16) !important; color:#ff8a8a !important; }

/* Tabs, empty state, hints */
html[data-theme="dark"] .docs-admin-container .docs-tabs { border-bottom-color:#3a3c42 !important; }
html[data-theme="dark"] .docs-admin-container .docs-tabs a,
html[data-theme="dark"] .docs-admin-container .docs-tabs span { color:#9aa7b8 !important; }
html[data-theme="dark"] .docs-admin-container .docs-tabs span.active { color:#ff8a8a !important; border-bottom-color:#ff8a8a !important; }
html[data-theme="dark"] .docs-admin-container .empty-state { color:#9aa7b8 !important; }
html[data-theme="dark"] .docs-admin-container .empty-state i { color:#4a4e56 !important; }
html[data-theme="dark"] .docs-admin-container .empty-state h3 { color:var(--lx-text) !important; }
html[data-theme="dark"] .docs-admin-container .hint { color:#9aa7b8 !important; }
html[data-theme="dark"] .docs-admin-container .hint code { background:var(--lx-surface-2) !important; color:#ff8a8a !important; }
html[data-theme="dark"] .docs-admin-container .back-link { color:#c7cfdb !important; }
/* The "Managing version …" summary line carries its grey inline. */
html[data-theme="dark"] .docs-admin-container [style*="color:#64748b"] { color:#9aa7b8 !important; }

/* Alerts */
html[data-theme="dark"] .docs-admin-container .alert-success { background:rgba(22,163,74,.14) !important; border-color:rgba(22,163,74,.32) !important; color:#6ee7a8 !important; }
html[data-theme="dark"] .docs-admin-container .alert-error,
html[data-theme="dark"] .docs-admin-container .error-list { background:rgba(220,38,38,.14) !important; border-color:rgba(220,38,38,.32) !important; color:#ff8a8a !important; }
html[data-theme="dark"] .docs-admin-container .alert-warn { background:rgba(217,119,6,.14) !important; border-color:rgba(217,119,6,.32) !important; color:#f0b45e !important; }

/* "New Version" modal */
html[data-theme="dark"] .vm-box { background:var(--lx-surface) !important; color:var(--lx-text) !important; box-shadow:0 25px 60px rgba(0,0,0,.65) !important; }
html[data-theme="dark"] .vm-head { border-bottom-color:#3a3c42 !important; }
html[data-theme="dark"] .vm-head h3 { color:var(--lx-text) !important; }
html[data-theme="dark"] .vm-close { color:#9aa7b8 !important; }
html[data-theme="dark"] .vm-body label { color:var(--lx-text) !important; }
html[data-theme="dark"] .vm-body input[type=text],
html[data-theme="dark"] .vm-body select { background:var(--lx-surface-2) !important; color:var(--lx-text) !important; border-color:#3a3c42 !important; }
html[data-theme="dark"] .vm-body .hint { color:#9aa7b8 !important; }
html[data-theme="dark"] .vm-foot { background:var(--lx-surface-2) !important; border-top-color:#3a3c42 !important; }
html[data-theme="dark"] .add-row { border-bottom-color:#2d2f34 !important; }
html[data-theme="dark"] .add-row .k { color:#c7cfdb !important; }

/* ===== Dark-mode: Manage Manuals (books list, pages list, book/page forms) =====
   Same story as the video screens — the views pin light values with !important. */
html[data-theme="dark"] .docs-admin-container .page-name { color:var(--lx-text) !important; }
html[data-theme="dark"] .docs-admin-container .page-slug { background-color:var(--lx-surface-2) !important; color:#9aa7b8 !important; }
html[data-theme="dark"] .docs-admin-container .priority-badge { background-color:rgba(37,99,235,.18) !important; color:#7fb2e6 !important; }
html[data-theme="dark"] .docs-admin-container .slug-hint { color:#9aa7b8 !important; }
html[data-theme="dark"] .docs-admin-container .slug-hint code { background-color:var(--lx-surface-2) !important; color:#ff8a8a !important; }
html[data-theme="dark"] .docs-admin-container .empty-state p { color:#9aa7b8 !important; }
/* books_list carries the description cell's warm grey inline; realign it with the
   cool muted grey used everywhere else in dark mode. */
html[data-theme="dark"] .docs-admin-container [style*="#a39693"] { color:#9aa7b8 !important; }

/* "Show Public View" is a white outline button in light mode. */
html[data-theme="dark"] .docs-admin-container .btn-public { background-color:var(--lx-surface-2) !important; }
html[data-theme="dark"] .docs-admin-container .btn-public:hover { background-color:#3a3c42 !important; }

/* Hover fills, restated because the base dark rules out-specify the views' own. */
html[data-theme="dark"] .docs-admin-container .btn-action:hover { background-color:#3a3c42 !important; color:#fff !important; }
html[data-theme="dark"] .docs-admin-container .btn-action.delete:hover { background-color:rgba(220,38,38,.22) !important; color:#ff8a8a !important; }
html[data-theme="dark"] .docs-admin-container .btn-secondary:hover { background-color:#3a3c42 !important; border-color:#4a4e56 !important; color:#fff !important; }

/* ===== Dark-mode: SweetAlert2 dialogs (send confirm, "Sending…" loader, result) =====
   SweetAlert2 v11 drives its own palette from custom properties declared on :root,
   so redeclaring them here is enough — no need to fight its internal selectors, and
   no `data-swal2-theme` attribute to keep in sync with `data-theme`. Values are the
   app's own surfaces rather than the library's #19191a, so dialogs match the page.
   Without this the popup stays white while the h1-h6 rule above paints
   `h2.swal2-title` near-white, leaving the dialog heading invisible. */
html[data-theme="dark"] {
  --swal2-background: #1f2226;
  --swal2-color: #e7e9ee;
  --swal2-border: 1px solid #2d2f34;
  --swal2-backdrop: rgba(0, 0, 0, 0.6);
  --swal2-footer-border-color: #3a3c42;
  --swal2-input-background: #16181c;
  --swal2-validation-message-background: rgba(220, 38, 38, .16);
  --swal2-validation-message-color: #ff8a8a;
  --swal2-timer-progress-bar-background: rgba(255, 255, 255, .7);
}

/* ===== Dark-mode: Bootstrap dropdown menus (header language + user-profile menus) ===== */
html[data-theme="dark"] .dropdown-menu { background-color:var(--lx-surface) !important; border-color:#3a3c42 !important; box-shadow:0 12px 30px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .dropdown-item { color:var(--lx-text) !important; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-item.active { background-color:var(--lx-surface-2) !important; color:#7fb2e6 !important; }
html[data-theme="dark"] .dropdown-divider { border-color:#3a3c42 !important; }

/* ============ Theme surface tokens (light values == originals, so light mode is unchanged) ============ */
:root {
  --lx-surface:   #ffffff;   /* cards / white panels */
  --lx-surface-2: #f5f5fb;   /* subtle light backgrounds */
  --lx-border:    #e2e8f0;   /* hairline borders */
  --lx-text:      #14213a;   /* primary dark text (= brand navy) */
}
html[data-theme="dark"] {
  --lx-surface:   #1f2226;
  --lx-surface-2: #1a1c20;
  --lx-border:    #2d2f34;
  --lx-text:      #e7e9ee;
  --lx-muted:     #9a9da4;
}
html[data-theme="dark"] body { background-color:#16181c; }

/* ---- Consistent button corners across every page (Rule 22: one style per button kind) ---- */
.btn, button.btn, input[type="submit"].btn, input[type="button"].btn,
.btn-custom-blue, .btn-brand, .btn-action, .btn-view, .btn-ban, .btn-unblock,
.btn-export-data, .btn-submit, .btn-public, .btn-send-notif, .btn-reset-form,
.btn-color, .btn-delete, .btn-cancel-hover, .btn-ellipsis {
  border-radius: 8px !important;
}
/* keep Bootstrap button-group inner corners square (only for genuinely joined toolbars) */
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0 !important; }
.btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
/* Docs-admin form actions repurpose .btn-group as a spaced flex row (gap:1rem), so its
   buttons are visually separate — keep them fully rounded, not half-square. */
.docs-admin-container .btn-group > .btn:first-child:not(:only-child),
.docs-admin-container .btn-group > .btn:last-child:not(:only-child) {
  border-radius: 8px !important;
}

/* Mobile: EPS dashboard stat cards wrap to 2 columns instead of 5 cramped ones */
@media (max-width: 767px){
  .eps-container .cards-row{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .eps-container .stat-card{ border-right: none !important; border: 1px solid var(--lx-border) !important; border-radius: 10px; padding: 12px 10px; }
  /* Once the cards are separate bordered boxes, the row's own panel background
     showed through the gaps and through the empty 6th grid cell. */
  .eps-container .cards-row{ background: transparent !important; border-bottom: none !important; margin-bottom: 10px; }
  /* 5 cards in a 2-column grid leaves an orphan — let the last one fill the row */
  .eps-container .cards-row .stat-card:last-child{ grid-column: 1 / -1; }
  .eps-container{ padding-left: 4px !important; padding-right: 4px !important; }

  /* The tab strip is a non-wrapping flex row: at phone widths it spilled past the
     card and dragged the whole document into horizontal scroll (491px at a 375px
     viewport), so "Never Used" was unreachable. Let it wrap. */
  .eps-container .table-header-alt{ padding: 12px 12px 0; }
  .eps-container .table-tabs{ flex-wrap: wrap; gap: 0 4px; width: 100%; }
  .eps-container .tab-btn{ padding: 9px 10px; font-size: 12px; }

  /* .filter-input is a hard 320px — wider than the card itself on a phone. */
  .eps-container .table-filters{ padding: 16px 12px 0; gap: 14px; }
  .eps-container .filter-group{ width: 100%; }
  .eps-container .filter-group label{ font-size: 13px; }
  .eps-container .filter-input-wrap{ width: 100%; }
  .eps-container .filter-input{ width: 100%; max-width: 100%; }
  /* month filter: two fixed-width selects (130+150+8) exceed the available width */
  .eps-container .filter-input-wrap select.filter-input{ flex: 1 1 0; width: auto !important; min-width: 0; }
  /* spacer label that aligns "Clear All Filters" with the inputs on desktop */
  .eps-container .filter-spacer{ display: none !important; }

  .eps-container .table-toolbar{ padding: 10px 12px; }
  .eps-container .table-scroll-wrapper{ padding: 12px !important; }

  /* page info and the page buttons overlapped each other on one line */
  .eps-container .pagination-bar{ flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 12px; }
  .eps-container .page-info{ text-align: center; font-size: 13px; }
  .eps-container .page-btns{ justify-content: center; flex-wrap: wrap; }
}

/* ===== Dark mode: License View / Block / Unblock modals =====
   Used by the paid dashboard (eps/license_dashboard) and the free-trial dashboard
   (eps/freetrial_license_dashboard); the Block modal doubles as Unblock.
   Bootstrap's .modal-content keeps its own #fff in dark mode, but the labels inherit the
   dark body colour — so the text was washing out on a white panel. Theme both together. */
html[data-theme="dark"] #viewLicenseModal .modal-content,
html[data-theme="dark"] #blockLicenseModal .modal-content { background-color:var(--lx-surface) !important; color:var(--lx-text) !important; box-shadow:0 25px 60px rgba(0,0,0,.65) !important; }
html[data-theme="dark"] #viewLicenseModal .modal-body label,
html[data-theme="dark"] #blockLicenseModal .modal-body label { color:var(--lx-text) !important; }
html[data-theme="dark"] #viewLicenseModal .modal-footer,
html[data-theme="dark"] #blockLicenseModal .modal-footer { border-top-color:#3a3c42 !important; }

/* Status pill is built inline by JS (showViewModal), so match on the inline brand colour.
   Both hues are too dark to read on the dark surface — lift them to the dark-mode variants. */
html[data-theme="dark"] #modal-view-status span[style*="#185fa5"] { background:rgba(127,178,230,.16) !important; color:#7fb2e6 !important; }
html[data-theme="dark"] #modal-view-status span[style*="#d31148"] { background:rgba(255,138,138,.16) !important; color:#ff8a8a !important; }

/* ===== Mobile: EPS licence tables become labelled cards =====
   Both EPS dashboards (eps/license_dashboard, eps/freetrial_license_dashboard) list
   7 columns, which means side-scrolling every row on a phone. Their tables carry
   .lx-cards to opt into the card layout above; the .eps-container table rules in
   those views out-specify the generic helper, so it is restated here at a matching
   specificity. */
@media (max-width: 767px) {
  .eps-container table.lx-cards,
  .eps-container table.lx-cards tbody,
  .eps-container table.lx-cards tbody tr,
  .eps-container table.lx-cards tbody td { display: block; width: 100%; min-width: 0; }

  .eps-container table.lx-cards thead { display: none; }

  .eps-container table.lx-cards tbody tr {
    border: 1px solid var(--lx-border);
    border-radius: 10px;
    padding: 4px 10px;
    margin-bottom: 12px;
    background: var(--lx-surface);
  }
  .eps-container table.lx-cards tbody tr:last-child { margin-bottom: 0; }
  .eps-container table.lx-cards tbody tr:hover { background: var(--lx-surface); }

  .eps-container table.lx-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 2px;
    text-align: right;
    font-size: 13px;
    word-break: break-word;
  }

  /* the generic helper hard-codes the label colour, which vanishes on the dark surface */
  .eps-container table.lx-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-weight: 700;
    color: var(--lx-text) !important;
  }

  /* keep the action buttons grouped at the right, not spread across the row */
  .eps-container table.lx-cards tbody td[data-label="Actions"]::before { margin-right: auto; }

  /* the empty-state row is one message, not a labelled field */
  .eps-container table.lx-cards tbody td.no-records { display: block; text-align: center; }
  .eps-container table.lx-cards tbody td.no-records::before { content: none; }

  /* nothing left to scroll sideways once the rows are cards */
  .eps-container .table-scroll-wrapper { overflow-x: visible !important; }
}

/* The licence modals lay out label : value as a 4 / 1 / 7 grid, which is unreadable
   at phone widths — stack it and drop the colon column. */
@media (max-width: 575.98px) {
  #viewLicenseModal .modal-dialog,
  #blockLicenseModal .modal-dialog { margin: 8px; }

  #viewLicenseModal .modal-body .form-group > .row > [class*="col-"],
  #blockLicenseModal .modal-body .form-group > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

  #viewLicenseModal .modal-body .form-group > .row > .col-1,
  #blockLicenseModal .modal-body .form-group > .row > .col-1 { display: none; }

  #viewLicenseModal .modal-body .form-group,
  #blockLicenseModal .modal-body .form-group { border-bottom: 1px solid var(--lx-border); padding-bottom: 8px; }

  #viewLicenseModal .modal-body .form-group label,
  #blockLicenseModal .modal-body .form-group label { margin-bottom: 2px; }
}

/* ===== Mobile: docs-admin list & form pages =====
   Shared by Manage Manuals (books/pages lists + forms) and Help Videos
   (docs/admin/*). The list tables sit inside .card, which sets overflow:hidden —
   so on a phone the right-hand columns (including Actions) were silently clipped
   rather than scrollable, leaving Edit/Delete unreachable. The tables carry
   .lx-cards to become one labelled card per row instead. */
@media (max-width: 767px) {
  .docs-admin-container .header { flex-direction: column; align-items: stretch; gap: 12px; }
  .docs-admin-container .header > div { flex-wrap: wrap; justify-content: stretch; }
  .docs-admin-container .header > div > .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
  .docs-admin-container h1 { font-size: 19px; }
  .docs-admin-container .card { padding: 14px 12px; }

  .docs-admin-container table.lx-cards,
  .docs-admin-container table.lx-cards tbody,
  .docs-admin-container table.lx-cards tbody tr,
  .docs-admin-container table.lx-cards tbody td { display: block; width: 100%; min-width: 0; }

  .docs-admin-container table.lx-cards thead { display: none; }

  .docs-admin-container table.lx-cards tbody tr {
    border: 1px solid var(--lx-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--lx-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  }
  .docs-admin-container table.lx-cards tbody tr:last-child { margin-bottom: 0; }

  .docs-admin-container table.lx-cards tbody td,
  .docs-admin-container table.lx-cards tbody tr:last-child td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 2px;
    text-align: right;
    border-bottom: none;
    word-break: break-word;
  }

  .docs-admin-container table.lx-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-weight: 700;
    color: var(--lx-muted);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* the first cell carries the row's identity (book / page / video), so give it
     the full width and no label rather than squeezing it against one */
  .docs-admin-container table.lx-cards tbody td.cell-primary {
    display: block;
    text-align: left;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--lx-border);
  }
  .docs-admin-container table.lx-cards tbody td.cell-primary::before { content: none; }

  /* A description is a paragraph, not a value: pinning it in the right-hand
     column turned it into a tall wall of right-aligned text. Give it the full
     card width under a caption, and cap it at three lines. */
  .docs-admin-container table.lx-cards tbody td.desc-cell {
    display: block;
    text-align: left;
    max-width: none !important;
    padding: 10px 2px;
  }
  .docs-admin-container table.lx-cards tbody td.desc-cell::before {
    display: block;
    margin-bottom: 5px;
  }
  .docs-admin-container table.lx-cards tbody td.desc-cell .desc-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    max-width: none !important;
    font-size: 13px;
    line-height: 1.5;
    color: var(--lx-muted);
  }

  /* the action buttons need the whole row: sharing it with a label wrapped them
     onto two lines, so drop the label and let them sit as a footer row */
  .docs-admin-container table.lx-cards tbody td[data-label="Actions"] {
    justify-content: flex-end;
    border-top: 1px solid var(--lx-border);
    margin-top: 4px;
    padding-top: 12px;
  }
  .docs-admin-container table.lx-cards tbody td[data-label="Actions"]::before { content: none; }
  .docs-admin-container table.lx-cards .actions { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .docs-admin-container table.lx-cards .book-info { gap: 12px; }

  /* form footers: the book / page / video forms use .btn-group as a spaced flex
     row, which does not wrap — Save + Cancel overflowed the card on a phone */
  .docs-admin-container .btn-group,
  .docs-admin-container .form-actions,
  .docs-admin-container .form-footer { flex-direction: column; align-items: stretch; gap: 10px; }
  .docs-admin-container .btn-group > .btn,
  .docs-admin-container .form-actions .btn,
  .docs-admin-container .form-footer .btn { width: 100%; justify-content: center; }
}