/* ==========================================================================
   E-Jewelry - modern UI theme layer
   --------------------------------------------------------------------------
   Loaded AFTER adminlte.min.css and custom.css. It restyles the existing
   AdminLTE / Bootstrap 4 class names only - no markup, ids or JS hooks are
   changed, so every existing script keeps working.

   Contents
     1. Design tokens
     2. Base & typography
     3. Layout (header / sidebar / content / footer)
     4. Sidebar navigation
     5. Cards
     6. Forms
     7. Buttons
     8. Tables
     9. Pagination
    10. Alerts & messages
    11. Dropdowns, modals, misc
    12. Animation utilities
    13. Responsive
    14. Accessibility & print
    15. Table column picker
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* Brand - teal/cyan, taken from the existing .custom-file-upload (#0e9cb8)
     and AdminLTE's "info" which the app already uses as its primary action.
     These four are overwritten inline on <html> by the navbar colour picker;
     everything else in the file derives from them, so one swap retints the app. */
  --c-brand: #0e9cb8;
  --c-brand-600: #0b869e;
  --c-brand-700: #096f84;
  --c-brand-rgb: 14, 156, 184;
  /* derived, so the tint follows the accent automatically in both modes */
  --c-brand-100: rgba(var(--c-brand-rgb), .12);
  /* accent used as TEXT on a surface. The 700 shade only reads on a light
     background, so dark mode swaps it for the base accent. */
  --c-brand-ink: var(--c-brand-700);

  /* Sidebar - refined from AdminLTE's #343a40 into a deeper, cooler navy */
  --c-sidebar: #172033;
  --c-sidebar-2: #1e2941;
  --c-sidebar-text: #b7c2d4;
  --c-sidebar-muted: #7c8aa3;
  --c-sidebar-active: var(--c-brand);

  /* Semantic */
  --c-success: #12a150;
  --c-danger: #e5484d;
  --c-warning: #f5a524;
  --c-info: var(--c-brand);

  /* Neutrals */
  --c-bg: #f4f6fa;
  --c-surface: #ffffff;
  --c-surface-2: #fbfcfe;      /* card footers, subtle fills */
  --c-border: #e4e8f0;
  --c-border-strong: #d3dae6;
  --c-text: #1d2433;
  --c-text-muted: #667085;
  /* Component fills. Tokenised rather than hardcoded so dark mode is a token
     swap - otherwise the dark rules end up fighting the light ones on
     specificity, which is exactly the bug this replaced. */
  --c-input-bg: #ffffff;       /* literal, not var(--c-surface): chaining custom
                                  properties inside a shorthand proved unreliable */
  --c-input-disabled: #f2f4f7;
  --c-thead-bg: #f7f9fc;
  --c-stripe: #fafbfd;
  --c-hover-row: var(--c-brand-100);

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Elevation - soft, layered, never harsh */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --sh-md: 0 4px 10px -2px rgba(16, 24, 40, .08), 0 2px 6px -2px rgba(16, 24, 40, .05);
  --sh-lg: 0 12px 24px -6px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --sh-focus: 0 0 0 3px rgba(var(--c-brand-rgb), .28);

  /* Spacing scale */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .15s;
  --t-mid: .25s;
  --t-slow: .35s;
}

/* --------------------------------------------------------------------------
   1b. Dark mode
   Only the neutral tokens change - the accent stays whatever the user picked.
   Set via data-theme on <html> by the navbar picker (and by an inline snippet
   in base.html so there is no flash of the light theme on load).
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;                  /* native date pickers, scrollbars, selects */

  --c-brand-ink: var(--c-brand);

  --c-input-bg: #1e2736;
  --c-input-disabled: #141b27;
  --c-thead-bg: #1e2736;
  --c-stripe: rgba(255, 255, 255, .022);

  --c-bg: #0f151f;
  --c-surface: #18202e;
  --c-surface-2: #1e2736;
  --c-border: #2a3546;
  --c-border-strong: #38455a;
  --c-text: #e6ebf3;
  --c-text-muted: #97a3b6;

  --c-sidebar: #131a26;
  --c-sidebar-2: #1a2331;
  --c-sidebar-text: #aab6c8;
  --c-sidebar-muted: #6e7d93;

  --c-brand-100: rgba(var(--c-brand-rgb), .20);

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30);
  --sh-md: 0 4px 12px -2px rgba(0, 0, 0, .50), 0 2px 6px -2px rgba(0, 0, 0, .35);
  --sh-lg: 0 14px 28px -8px rgba(0, 0, 0, .60), 0 4px 10px -4px rgba(0, 0, 0, .40);
}

/* Components that hardcode a light colour in AdminLTE/Bootstrap and therefore
   cannot follow the tokens on their own. */
html[data-theme="dark"] body,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .wrapper { background-color: var(--c-bg); color: var(--c-text); }

html[data-theme="dark"] .main-header.navbar {
  background: rgba(24, 32, 46, .88) !important;
  border-bottom-color: var(--c-border);
}
html[data-theme="dark"] .main-footer { background-color: var(--c-surface); border-top-color: var(--c-border); }

html[data-theme="dark"] .card { background-color: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card.card-info:not(.card-outline) > .card-header,
html[data-theme="dark"] .card.card-primary:not(.card-outline) > .card-header,
html[data-theme="dark"] .card.card-secondary:not(.card-outline) > .card-header,
html[data-theme="dark"] .card.card-success:not(.card-outline) > .card-header,
html[data-theme="dark"] .card.card-danger:not(.card-outline) > .card-header,
html[data-theme="dark"] .card.card-warning:not(.card-outline) > .card-header {
  background-color: var(--c-surface);
  color: var(--c-text);
  border-bottom-color: var(--c-border);
}
/* Form controls need !important here. Bootstrap RTL is loaded from a CDN we
   cannot inspect (CORS), and something in that chain keeps repainting inputs
   white in dark mode even though theme.css is the last stylesheet. Every other
   surface follows the tokens normally - this is the one place that needs force. */
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select {
  background-color: var(--c-input-bg) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border-strong) !important;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
  background-color: var(--c-input-disabled) !important;
  color: var(--c-text-muted) !important;
}
html[data-theme="dark"] .form-control::placeholder { color: #7a889d; }
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] { color: var(--c-text-muted); }
html[data-theme="dark"] .input-group-text { background-color: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text-muted); }

html[data-theme="dark"] .table { color: var(--c-text); }
html[data-theme="dark"] #SuuTable th {   /* custom.css hardcodes gray/beige */
  background-color: var(--c-thead-bg) !important;
  color: var(--c-text-muted) !important;
}
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th { border-color: var(--c-border); }
html[data-theme="dark"] .table-scroll { background-color: var(--c-surface); border-color: var(--c-border); }
/* Report rows flagged paid / not paid - solid colours so the state reads from
   across the room. Bootstrap's .table-success / .table-danger tints are far too
   pale for this, so these rows carry their own classes. */
.table tbody tr.row-paid > td,
.table tbody tr.row-unpaid > td {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .25) !important;
  font-weight: 600;
}
.table tbody tr.row-paid > td { background-color: #1a9c4a !important; }
.table tbody tr.row-unpaid > td { background-color: #d92d36 !important; }
.table-hover tbody tr.row-paid:hover > td { background-color: #15803c !important; }
.table-hover tbody tr.row-unpaid:hover > td { background-color: #b3242c !important; }
html[data-theme="dark"] .table tbody tr.row-paid > td { background-color: #16833f !important; }
html[data-theme="dark"] .table tbody tr.row-unpaid > td { background-color: #b8272f !important; }
html[data-theme="dark"] .table-hover tbody tr.row-paid:hover > td { background-color: #126b34 !important; }
html[data-theme="dark"] .table-hover tbody tr.row-unpaid:hover > td { background-color: #9c2028 !important; }

html[data-theme="dark"] .dropdown-menu { background-color: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
html[data-theme="dark"] .dropdown-item { color: var(--c-text); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--c-border); }
html[data-theme="dark"] .modal-content { background-color: var(--c-surface); color: var(--c-text); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--c-border); }
html[data-theme="dark"] .close { color: var(--c-text); text-shadow: none; opacity: .7; }

html[data-theme="dark"] .page-item .page-link { background-color: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); }
html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--c-surface-2); color: #6b788c; }
html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-default {
  background-color: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text);
}
html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-default:hover { background: #26303f; color: var(--c-text); }

html[data-theme="dark"] .alert-success { background: #10301f; border-color: #1d6b3f; color: #7ee2a8; }
html[data-theme="dark"] .alert-danger, html[data-theme="dark"] .alert-error { background: #3a1416; border-color: #8c2f33; color: #f6a2a4; }
html[data-theme="dark"] .alert-warning { background: #382a10; border-color: #8a6417; color: #f3c775; }
html[data-theme="dark"] .alert-info { background: rgba(var(--c-brand-rgb), .16); border-color: rgba(var(--c-brand-rgb), .45); color: #9fe3f2; }

html[data-theme="dark"] .chosen-container .chosen-single,
html[data-theme="dark"] .chosen-container .chosen-choices,
html[data-theme="dark"] .chosen-container .chosen-drop {
  background-color: var(--c-surface-2) !important;
  border-color: var(--c-border-strong) !important;
  color: var(--c-text) !important;
}
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,
html[data-theme="dark"] label, html[data-theme="dark"] .control-label { color: var(--c-text); }
html[data-theme="dark"] body.login-page { background: linear-gradient(160deg, #0f151f 0%, #141d2b 60%, #10192a 100%); }
html[data-theme="dark"] .login-logo, html[data-theme="dark"] .login-logo a { color: var(--c-text); }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #38455a; background-clip: content-box; }
/* The EUR mirror boxes carry an inline light background from the currency
   work, so they need !important to follow the dark theme. */
html[data-theme="dark"] input.eur-mirror {
  /* background-color longhand, not the `background` shorthand: the element
     carries an inline `background:#f7f7f7`, and the shorthand + var() form
     did not beat it reliably. */
  background-color: var(--c-surface-2) !important;
  background-image: none !important;
  border-color: var(--c-border-strong) !important;
  color: var(--c-text) !important;
}
html[data-theme="dark"] .sidebar-search-input { background: rgba(255, 255, 255, .05); }

/* --------------------------------------------------------------------------
   1c. Preloader
   Injected by theme-boot.js and removed once the page is ready. Built only from
   tokens and CSS animation, so it follows the chosen accent and dark mode and
   needs no icon font (Font Awesome may not have loaded this early).
   -------------------------------------------------------------------------- */
.ejw-preloader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  background-color: var(--c-bg);
  background-image:
    radial-gradient(760px 420px at 50% 34%, rgba(var(--c-brand-rgb), .10), transparent 70%),
    radial-gradient(520px 320px at 88% 96%, rgba(var(--c-brand-rgb), .07), transparent 70%);
  opacity: 1;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.ejw-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.ejw-pre-card {
  text-align: center;
  animation: ejw-pre-in .5s var(--ease) both;
}
@keyframes ejw-pre-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Logo with an orbiting arc */
.ejw-pre-mark {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto var(--sp-5);
  display: grid;
  place-items: center;
}
.ejw-pre-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(var(--c-brand-rgb), .16);
  border-top-color: var(--c-brand);
  border-right-color: var(--c-brand);
  animation: ejw-spin 1.05s linear infinite;
}
/* soft halo behind the mark */
.ejw-pre-mark::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background-color: rgba(var(--c-brand-rgb), .10);
  filter: blur(10px);
}
.ejw-pre-logo {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: var(--r-lg);
  object-fit: cover;
  box-shadow: var(--sh-md);
  animation: ejw-pre-breathe 2.6s var(--ease) infinite;
}
@keyframes ejw-spin { to { transform: rotate(360deg); } }
@keyframes ejw-pre-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

.ejw-pre-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--c-text);
}
.ejw-pre-tag {
  margin: .25rem 0 0;
  font-size: .82rem;
  color: var(--c-text-muted);
}

/* Indeterminate progress bar */
.ejw-pre-bar {
  position: relative;
  width: 210px;
  height: 3px;
  margin: var(--sp-5) auto var(--sp-3);
  border-radius: var(--r-pill);
  background-color: rgba(var(--c-brand-rgb), .16);
  overflow: hidden;
}
.ejw-pre-bar > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  border-radius: var(--r-pill);
  background-image: linear-gradient(90deg,
    rgba(var(--c-brand-rgb), .25), var(--c-brand), rgba(var(--c-brand-rgb), .25));
  animation: ejw-pre-slide 1.25s var(--ease) infinite;
}
@keyframes ejw-pre-slide {
  0%   { transform: translateX(-115%); }
  100% { transform: translateX(275%); }
}

.ejw-pre-sub {
  margin: 0;
  font-size: .8rem;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: .01em;
}
.ejw-pre-foot {
  position: absolute;
  bottom: var(--sp-5);
  margin: 0;
  font-size: .72rem;
  color: var(--c-text-muted);
  opacity: .8;
}

/* Never let the overlay reach paper */
@media print { .ejw-preloader { display: none !important; } }

/* Motion-sensitive users still get feedback, just calmer */
@media (prefers-reduced-motion: reduce) {
  .ejw-pre-card { animation: none; }
  .ejw-pre-logo { animation: none; }
  .ejw-pre-ring { animation-duration: 2.4s; }
  .ejw-pre-bar > span { animation-duration: 2.4s; }
}

@media (max-width: 480px) {
  .ejw-pre-mark { width: 78px; height: 78px; }
  .ejw-pre-logo { width: 48px; height: 48px; }
  .ejw-pre-title { font-size: 1.18rem; }
  .ejw-pre-bar { width: 170px; }
}

/* ==========================================================================
   2. Base & typography
   ========================================================================== */
body.hold-transition,
body.sidebar-mini,
body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: "Segoe UI", "Source Sans Pro", Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { color: var(--c-text); font-weight: 600; letter-spacing: -.01em; }

a { color: var(--c-brand-600); transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--c-brand-700); text-decoration: none; }

hr { border-color: var(--c-border); }
code, kbd, pre { border-radius: var(--r-sm); }

/* Tidier scrollbars, without hiding them */
* { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--c-border-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #b6c0d0; background-clip: content-box; }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.content-wrapper { background-color: var(--c-bg); padding-bottom: var(--sp-6); }

/* Sticky, frosted top bar */
.main-header.navbar {
  position: sticky;
  top: 0;
  z-index: 1035;
  min-height: 58px;
  padding-inline: var(--sp-3);
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border: 0;
  border-bottom: 1px solid var(--c-border);
  box-shadow: none;
  transition: box-shadow var(--t-mid) var(--ease);
}
/* theme.js adds .is-scrolled once the page moves */
.main-header.navbar.is-scrolled { box-shadow: var(--sh-md); }

.main-header .nav-link {
  color: var(--c-text-muted) !important;
  border-radius: var(--r-sm);
  padding: .45rem .7rem !important;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.main-header .nav-link:hover { background-color: var(--c-brand-100); color: var(--c-brand-700) !important; }
.main-header .nav-link:active { transform: translateY(1px); }

/* ---- Theme picker (navbar) ---------------------------------------------- */
.theme-menu {
  min-width: 232px;
  padding: var(--sp-3) !important;
}
.theme-menu-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 .5rem;
}
.theme-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem;
  margin-bottom: var(--sp-3);
}
.theme-swatch {
  position: relative;
  height: 34px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  background-color: var(--sw);
  cursor: pointer;
  padding: 0;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.theme-swatch:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.theme-swatch[aria-pressed="true"] {
  border-color: var(--c-text);
  box-shadow: 0 0 0 2px var(--c-surface) inset;
}
.theme-swatch[aria-pressed="true"]::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .72rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.theme-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.theme-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .45rem .5rem;
  font-size: .78rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border-strong);
  background-color: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.theme-mode:hover { border-color: var(--c-brand); color: var(--c-brand-700); }
.theme-mode[aria-pressed="true"] {
  background-color: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}
html[data-theme="dark"] .theme-mode { background-color: var(--c-surface-2); }
html[data-theme="dark"] .theme-mode:hover { color: var(--c-text); }

.main-footer {
  background-color: var(--c-surface);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: .8rem;
  padding: var(--sp-4) var(--sp-5);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  max-width: 1600px;
  margin-inline: auto;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--c-text);
}
.footer-brand i { color: var(--c-brand); font-size: .95rem; }
.footer-app { letter-spacing: .01em; }
.footer-tag {
  color: var(--c-text-muted);
  font-weight: 500;
  padding-inline-start: .55rem;
  border-inline-start: 1px solid var(--c-border);
}
.footer-legal,
.footer-legal * {
  /* custom.css applies `* { direction: rtl }` to every element, which reversed
     "© 1988-2026" into "2026-1988 ©". The children need the override too, not
     just the container. */
  direction: ltr;
}
.footer-legal {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.main-footer a {
  color: var(--c-brand-600);
  font-weight: 600;
  transition: color var(--t-fast) var(--ease);
}
.main-footer a:hover { color: var(--c-brand-700); text-decoration: underline; }
.footer-sep { opacity: .45; }
.footer-copy { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4. Sidebar navigation
   ========================================================================== */
/* Fixed, full-height, and internally scrollable.
   AdminLTE only makes the sidebar `position: fixed` under .layout-fixed, which
   this app does not use (body is "hold-transition sidebar-mini"), so it used to
   scroll away with the page. Pinning it here also lets the menu scroll on its
   own between a fixed header block and the logout button.
   inset-inline-start keeps it on the right under RTL and the left under LTR. */
.main-sidebar,
.main-sidebar.sidebar-dark-primary {
  background-color: var(--c-sidebar) !important;
  box-shadow: var(--sh-lg);
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width var(--t-slow) var(--ease), margin var(--t-slow) var(--ease);
}
.main-sidebar > .brand-link { flex: 0 0 auto; }

/* .sidebar becomes the flex column that holds the scrollable menu.
   AdminLTE hardcodes height: calc(100% - 4rem), assuming nothing but the brand
   bar sits above it - which the search box and logout button both break. */
.main-sidebar > .sidebar {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;            /* lets the nav actually shrink and scroll */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sidebar > .user-panel,
.sidebar > .sidebar-search,
.sidebar > .sidebar-footer { flex: 0 0 auto; }

/* only the menu scrolls */
.sidebar > nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;   /* don't chain scroll to the page */
  scrollbar-width: thin;
}
.sidebar > nav::-webkit-scrollbar { width: 6px; }
.sidebar > nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
  border-radius: var(--r-pill);
  border: 0;
}
.sidebar > nav:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); }

/* ---- Logout, pinned to the bottom --------------------------------------- */
.sidebar-footer {
  margin: 0;
  padding: .6rem .15rem .75rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.sidebar-logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .58rem .8rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
  color: var(--c-sidebar-text);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.sidebar-logout i { width: 1.25rem; text-align: center; font-size: .95rem; }
.sidebar-logout:hover {
  background: rgba(229, 72, 77, .16);
  border-color: rgba(229, 72, 77, .5);
  color: #ff9ea0;
}
.sidebar-logout:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* collapsed rail: icon only */
.sidebar-collapse .sidebar-logout span { display: none; }
.sidebar-collapse .sidebar-logout { justify-content: center; padding-inline: .4rem; }

.brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  padding: .9rem 1rem !important;
  display: flex;
  align-items: center;
  gap: .65rem;
  transition: background var(--t-fast) var(--ease);
}
.brand-link:hover { background: rgba(255, 255, 255, .04); }
.brand-link .brand-image {
  margin: 0 !important;
  float: none !important;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;          /* never let a slow/missing image reflow the header */
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(var(--c-brand-rgb), .5);
  opacity: 1 !important;
}
.brand-link .brand-text {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: .98rem;
  letter-spacing: .01em;
  min-width: 0;            /* allow the ellipsis below to actually engage */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar { padding-inline: .6rem; }

.user-panel {
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  align-items: center;
  gap: .6rem;
}
.user-panel .image img { width: 34px; height: 34px; box-shadow: var(--sh-sm); }
.user-panel .info a {
  color: #fff !important;
  font-weight: 600;
  font-size: .88rem;
  padding: 0 !important;
}

/* ---- Sidebar search ------------------------------------------------------ */
.sidebar-search { padding: .75rem .15rem .25rem; }
.sidebar-search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.sidebar-search-icon {
  position: absolute;
  inset-inline-start: .7rem;
  font-size: .8rem;
  color: var(--c-sidebar-muted);
  pointer-events: none;
  transition: color var(--t-fast) var(--ease);
}
.sidebar-search-input {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-md);
  color: #fff;
  font-size: .83rem;
  padding: .48rem .75rem;
  padding-inline-start: 2.05rem;
  padding-inline-end: 2.05rem;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.sidebar-search-input::placeholder { color: var(--c-sidebar-muted); }
.sidebar-search-input:hover { background: rgba(255, 255, 255, .09); }
.sidebar-search-input:focus {
  outline: 0;
  background: rgba(255, 255, 255, .12);
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb), .25);
}
.sidebar-search-box:focus-within .sidebar-search-icon { color: var(--c-brand); }

.sidebar-search-clear {
  position: absolute;
  inset-inline-end: .45rem;
  background: transparent;
  border: 0;
  color: var(--c-sidebar-muted);
  font-size: .78rem;
  line-height: 1;
  padding: .3rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.sidebar-search-clear:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.sidebar-search-status {
  margin: .45rem .25rem 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-sidebar-muted);
}
.sidebar-search-status.is-empty { color: #f2a3a5; }

/* Filtering state - driven by theme.js */
.nav-sidebar .nav-search-hidden { display: none !important; }
/* Force a group open only while a search is active; AdminLTE's own
   .menu-open state is left untouched so clearing the box restores it. */
.nav-sidebar .nav-search-open > .nav-treeview { display: block !important; }

/* The search box is meaningless once the sidebar is collapsed to icons */
.sidebar-collapse .sidebar-search { display: none; }

/* Section captions */
.nav-sidebar .nav-header {
  color: var(--c-sidebar-muted) !important;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 1rem .85rem .35rem;
  margin: 0;
}

/* Items */
.nav-sidebar .nav-item { margin-bottom: 2px; }
.nav-sidebar .nav-link {
  color: var(--c-sidebar-text) !important;
  border-radius: var(--r-md);
  padding: .58rem .8rem;
  font-size: .875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  /* gap, not margin: AdminLTE's .nav-icon uses margin-right, which does not
     flip under RTL and left the icons flush against the Arabic labels */
  gap: .6rem;
  position: relative;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.nav-sidebar .nav-link .nav-icon {
  width: 1.25rem;
  flex: 0 0 1.25rem;
  margin: 0 !important;          /* drop AdminLTE's non-flipping margin-right */
  font-size: .95rem;
  text-align: center;
  opacity: .85;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-sidebar .nav-link p { margin: 0; flex: 1; }

/* A long label wraps onto a second line instead of running off the rail.
   AdminLTE sets `white-space: nowrap` on every sidebar link under .sidebar-mini
   (0-3-0), which theme.css cannot beat from `.nav-sidebar .nav-link` alone - the
   mini selectors have to be repeated here or the text stays clipped. */
.sidebar-mini .nav-sidebar .nav-link,
.sidebar-mini-md .nav-sidebar .nav-link,
.nav-sidebar .nav-link { white-space: normal; }
.nav-sidebar .nav-link p {
  min-width: 0;             /* a flex child will not shrink past its text without this */
  white-space: normal;
  overflow-wrap: anywhere;  /* one very long unbroken word breaks rather than overflows */
  line-height: 1.35;
}
/* The icon sits on the first line of a wrapped label, not centred between both.
   It shares the label's line-height so the two line boxes start level. */
.nav-sidebar .nav-link .nav-icon { align-self: flex-start; line-height: 1.35; }
/* Collapsing to icons animates the width; wrapping mid-animation makes the
   labels jump, so hold them on one line while the rail is collapsed. */
.sidebar-collapse .nav-sidebar .nav-link,
.sidebar-collapse .nav-sidebar .nav-link p { white-space: nowrap; }

.nav-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
}
.nav-sidebar .nav-link:hover .nav-icon { opacity: 1; }

/* Active state - solid brand fill plus an edge marker */
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link.active:hover {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-600) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(var(--c-brand-rgb), .65);
}
.nav-sidebar .nav-link.active .nav-icon { opacity: 1; color: #fff !important; }
.nav-sidebar > .nav-item > .nav-link.active::before {
  content: "";
  position: absolute;
  inset-inline-start: -.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: var(--r-pill);
  background: #fff;
}

/* Parent of an open group */
.nav-sidebar .menu-open > .nav-link {
  background: rgba(255, 255, 255, .05) !important;
  color: #fff !important;
}

/* Sub-menus */
.nav-sidebar .nav-treeview {
  padding-inline-start: .5rem;
  margin-block: 2px;
  position: relative;
}
.nav-sidebar .nav-treeview::before {
  content: "";
  position: absolute;
  inset-inline-start: .55rem;
  top: .25rem;
  bottom: .25rem;
  width: 1px;
  background: rgba(255, 255, 255, .09);
}
.nav-sidebar .nav-treeview .nav-link {
  padding-block: .45rem;
  padding-inline-start: 1.2rem;
  font-size: .83rem;
  font-weight: 400;
  color: var(--c-sidebar-text) !important;
}
.nav-sidebar .nav-treeview .nav-link .nav-icon { font-size: .42rem; opacity: .55; }
.nav-sidebar .nav-treeview .nav-link.active .nav-icon { opacity: 1; }
.nav-sidebar .nav-treeview .nav-link.active {
  background: rgba(var(--c-brand-rgb), .9) !important;
  box-shadow: none;
}

/* Caret rotates as the group opens */
.nav-sidebar .nav-link > p > .right,
.nav-sidebar .nav-link > .right {
  transition: transform var(--t-mid) var(--ease);
}
.nav-sidebar .menu-open > .nav-link > p > .right,
.nav-sidebar .menu-open > .nav-link > .right { transform: rotate(-90deg); }
[dir="rtl"] .nav-sidebar .menu-open > .nav-link > p > .right,
[dir="rtl"] .nav-sidebar .menu-open > .nav-link > .right { transform: rotate(90deg); }

/* Collapsed (mini) sidebar */
.sidebar-collapse .brand-link .brand-text,
.sidebar-collapse .user-panel .info { opacity: 0; }
.sidebar-collapse .nav-sidebar .nav-header { opacity: 0; height: 0; padding: 0; overflow: hidden; }

/* ==========================================================================
   5. Cards
   ========================================================================== */
.card {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  margin-bottom: var(--sp-5);
  /* Deliberately NOT overflow:hidden - that clips date pickers, chosen menus and
     any absolutely-positioned dropdown rendered inside a card. Corners are
     rounded on the header/footer instead. */
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.card:hover { box-shadow: var(--sh-md); }
/* Only lift genuinely interactive cards, so forms don't wobble under the cursor */
.card.card-hover:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }

.card-header {
  background-color: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-4) var(--sp-5);
  min-height: auto;
  border-top-left-radius: calc(var(--r-lg) - 1px);
  border-top-right-radius: calc(var(--r-lg) - 1px);
}
.card-title {
  font-size: 1rem;
  font-weight: 650;
  color: var(--c-text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.card-body { padding: var(--sp-5); }
.card-footer {
  background-color: var(--c-surface-2);
  border-top: 1px solid var(--c-border);
  border-bottom-left-radius: calc(var(--r-lg) - 1px);
  border-bottom-right-radius: calc(var(--r-lg) - 1px);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

/* AdminLTE fills the whole header with a saturated colour
   (.card-info:not(.card-outline) > .card-header, specificity 0-3-1).
   Neutralise it at higher specificity: the colour cue moves to the top border
   below, which reads as modern without losing the at-a-glance card identity. */
.card.card-info:not(.card-outline) > .card-header,
.card.card-primary:not(.card-outline) > .card-header,
.card.card-secondary:not(.card-outline) > .card-header,
.card.card-success:not(.card-outline) > .card-header,
.card.card-danger:not(.card-outline) > .card-header,
.card.card-warning:not(.card-outline) > .card-header {
  background-color: var(--c-surface);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.card.card-info:not(.card-outline) > .card-header a,
.card.card-primary:not(.card-outline) > .card-header a,
.card.card-secondary:not(.card-outline) > .card-header a,
.card.card-success:not(.card-outline) > .card-header a,
.card.card-danger:not(.card-outline) > .card-header a,
.card.card-warning:not(.card-outline) > .card-header a { color: var(--c-brand-600); }

/* Keep the accent on a top border - the cue, softened */
.card.card-info, .card.card-primary, .card.card-secondary,
.card.card-success, .card.card-danger, .card.card-warning {
  border-top: 3px solid var(--c-border-strong);
}
.card.card-info { border-top-color: var(--c-info); }
.card.card-primary { border-top-color: var(--c-brand); }
.card.card-success { border-top-color: var(--c-success); }
.card.card-danger { border-top-color: var(--c-danger); }
.card.card-warning { border-top-color: var(--c-warning); }
.card.card-secondary { border-top-color: #8b98ad; }
/* Nested cards read as sections, not floating panels */
.card .card { box-shadow: none; border-radius: var(--r-md); }

/* ==========================================================================
   6. Forms
   ========================================================================== */
label, .control-label {
  font-weight: 600;
  font-size: .82rem;
  color: var(--c-text);
  margin-bottom: .3rem;
  display: inline-block;
}

.form-control, .custom-select, select.form-control, textarea.form-control {
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background-color: var(--c-input-bg);
  color: var(--c-text);
  font-size: .875rem;
  padding: .5rem .75rem;
  height: auto;
  min-height: 38px;
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.form-control:hover:not(:disabled):not([readonly]) { border-color: #b9c3d3; }
.form-control:focus, .custom-select:focus {
  border-color: var(--c-brand);
  box-shadow: var(--sh-focus);
  background-color: var(--c-input-bg);
  outline: 0;
}
.form-control::placeholder { color: #98a2b3; opacity: 1; }
.form-control:disabled, .form-control[readonly] {
  background-color: var(--c-input-disabled);
  color: var(--c-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* Form tables are used everywhere as a label/field grid - give them air */
.card-body > table > tbody > tr > td,
.card-body > table > tr > td { padding: .3rem .5rem; vertical-align: middle; }

.form-group { margin-bottom: var(--sp-4); }

/* Validation */
.is-invalid, .form-control.is-invalid { border-color: var(--c-danger); }
.is-invalid:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, .22); }
.invalid-feedback, .text-danger { color: var(--c-danger); font-size: .8rem; }
.is-valid, .form-control.is-valid { border-color: var(--c-success); }

/* File upload control already in the app */
.custom-file-upload {
  border-radius: var(--r-md);
  background-color: var(--c-brand);
  padding: .55rem 1.75rem;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: var(--sh-sm);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.custom-file-upload:hover { background-color: var(--c-brand-600); transform: translateY(-1px); }

/* Third-party select widget used on some screens */
.chosen-container .chosen-single,
.chosen-container .chosen-choices {
  border-radius: var(--r-md) !important;
  border-color: var(--c-border-strong) !important;
  box-shadow: var(--sh-xs) !important;
  height: auto !important;
  padding: .35rem .6rem !important;
  background-color: var(--c-surface) !important;
}

/* Select2 (searchable dropdowns) - made to read exactly like a native
   select.form-control on these RTL screens, arrow on the left included.
   The bootstrap4 theme pins the arrow to the right and knows nothing about
   RTL, hence the !important overrides. */
.select2-container--bootstrap4 .select2-selection {
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--r-md) !important;
  background-color: var(--c-input-bg) !important;
  color: var(--c-text) !important;
  box-shadow: var(--sh-xs) !important;
  height: 38px !important;
  min-height: 38px !important;
  font-size: .875rem;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  color: var(--c-text);
  line-height: 36px !important;
  padding-right: .75rem !important;
  padding-left: 30px !important;   /* room for the arrow sitting on the left */
  text-align: right;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
  color: #98a2b3;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  left: 8px !important;
  right: auto !important;
  height: 100% !important;
  width: 16px;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
  top: 50% !important;
  left: 0 !important;
  margin: -2px 0 0 0 !important;
  border-color: var(--c-text-muted) transparent transparent transparent !important;
}
.select2-container--bootstrap4 .select2-selection__clear {
  float: left;
  margin: 0 0 0 22px;
  color: var(--c-text-muted);
}
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
  border-color: var(--c-brand) !important;
  box-shadow: var(--sh-focus) !important;
}
.select2-container--bootstrap4 .select2-dropdown {
  border-color: var(--c-border-strong);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--sh-md);
}
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background-color: var(--c-input-bg);
  color: var(--c-text);
  padding: .35rem .5rem;
}
.select2-container--bootstrap4 .select2-results__option {
  color: var(--c-text);
  font-size: .875rem;
  padding: .4rem .75rem;
}
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
  background-color: var(--c-brand) !important;
  color: #fff !important;
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */
.btn {
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .855rem;
  padding: .5rem 1.1rem;
  border: 1px solid transparent;
  box-shadow: var(--sh-xs);
  position: relative;
  overflow: hidden;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-xs); }
.btn:focus, .btn.focus { box-shadow: var(--sh-focus); }

.btn-info, .btn-primary {
  background-color: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}
.btn-info:hover, .btn-primary:hover,
.btn-info:focus, .btn-primary:focus {
  background-color: var(--c-brand-600);
  border-color: var(--c-brand-600);
  color: #fff;
}
.btn-success { background-color: var(--c-success); border-color: var(--c-success); color: #fff; }
.btn-success:hover { background: #0e8944; border-color: #0e8944; color: #fff; }
.btn-danger { background-color: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #cf3b40; border-color: #cf3b40; color: #fff; }
.btn-warning { background-color: var(--c-warning); border-color: var(--c-warning); color: #40320c; }
.btn-warning:hover { background: #e0940f; border-color: #e0940f; color: #40320c; }
.btn-secondary { background: #667085; border-color: #667085; color: #fff; }
.btn-secondary:hover { background: #55607a; border-color: #55607a; color: #fff; }
.btn-light, .btn-default {
  background-color: var(--c-surface);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
.btn-light:hover, .btn-default:hover { background: #f6f8fb; border-color: #b9c3d3; color: var(--c-text); }
.btn-sm { padding: .3rem .7rem; font-size: .78rem; border-radius: var(--r-sm); }
.btn-lg { padding: .7rem 1.5rem; font-size: .95rem; }
.btn i { margin-inline-end: .35rem; }
.btn i:only-child { margin: 0; }

/* Ripple - painted by theme.js, purely decorative */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .45);
  pointer-events: none;
  animation: ripple .55s var(--ease);
}
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

/* ==========================================================================
   8. Tables
   ========================================================================== */
.table {
  color: var(--c-text);
  font-size: .84rem;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  background-color: var(--c-thead-bg);
  color: var(--c-text-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-border) !important;
  border-top: 0 !important;
  padding: .7rem .75rem;
  white-space: nowrap;
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table tbody td {
  padding: .6rem .75rem;
  border-top: 1px solid var(--c-border);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background-color: var(--c-brand-100); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--c-stripe); }
.table-striped tbody tr:hover { background-color: var(--c-brand-100); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--c-border); }

/* Horizontal scroll without breaking the page - added by theme.js */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background-color: var(--c-surface);
}
.table-scroll > .table { margin: 0; }
.table-scroll > .table thead th:first-child { border-top-left-radius: var(--r-md); }
.table-scroll > .table thead th:last-child { border-top-right-radius: var(--r-md); }

/* The app's own wide grid keeps its sticky header, restyled */
#SuuTable th {
  background-color: var(--c-thead-bg) !important;
  color: var(--c-text-muted) !important;
}

/* Compact action buttons inside rows */
.table .btn { padding: .28rem .55rem; font-size: .75rem; box-shadow: none; }
.table .btn:hover { transform: none; box-shadow: var(--sh-sm); }
.table .form-control { min-height: 32px; padding: .25rem .5rem; font-size: .8rem; }

/* EUR values.
   .eur-col is a real column of its own (split out of the USD cell).
   .eur-mirror is the older stacked form, still used in the label/value and
   rowspan tables where there is no column to add. */
.eur-col { white-space: nowrap; }
.eur-mirror { font-size: .78em; opacity: .75; }

/* ==========================================================================
   9. Pagination
   ========================================================================== */
.pagination { gap: 4px; flex-wrap: wrap; }
.page-item .page-link {
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm) !important;
  color: var(--c-text);
  font-size: .82rem;
  font-weight: 600;
  min-width: 34px;
  text-align: center;
  padding: .35rem .6rem;
  transition: all var(--t-fast) var(--ease);
}
.page-item .page-link:hover {
  background-color: var(--c-brand-100);
  border-color: var(--c-brand);
  color: var(--c-brand-700);
}
.page-item.active .page-link {
  background-color: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(var(--c-brand-rgb), .6);
}
.page-item.disabled .page-link { background-color: var(--c-input-disabled); color: #98a2b3; border-color: var(--c-border); }

/* ==========================================================================
   10. Alerts & messages
   ========================================================================== */
.alert {
  border: 1px solid transparent;
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: .8rem 1.1rem;
  font-size: .875rem;
  font-weight: 500;
  animation: slide-down var(--t-slow) var(--ease);
}
.alert-success { background: #e7f7ee; border-color: #a6e3c0; color: #0a6b36; }
.alert-danger, .alert-error { background: #fdecec; border-color: #f6b8ba; color: #a32226; }
.alert-warning { background: #fef5e5; border-color: #f8d79a; color: #8a5a06; }
.alert-info { background-color: var(--c-brand-100); border-color: #9dd9e6; color: var(--c-brand-700); }
#message { margin-top: var(--sp-4); }

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   11. Dropdowns, modals, misc
   ========================================================================== */
.dropdown-menu {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--sp-2);
  font-size: .865rem;
  animation: dropdown-in var(--t-fast) var(--ease);
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-item {
  border-radius: var(--r-sm);
  padding: .45rem .7rem;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--c-brand-100); color: var(--c-brand-700); }
.dropdown-divider { border-color: var(--c-border); }

.modal-content {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.modal-header, .modal-footer { border-color: var(--c-border); padding: var(--sp-4) var(--sp-5); }
.modal-body { padding: var(--sp-5); }
.modal.fade .modal-dialog { transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease); }

.badge { border-radius: var(--r-pill); font-weight: 600; padding: .3em .65em; font-size: .72rem; }
.small-box { border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; }
.small-box:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.small-box, .small-box > .small-box-footer { transition: all var(--t-mid) var(--ease); }
.info-box { border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.breadcrumb { background: transparent; padding: 0; font-size: .82rem; }
.content-header h1 { font-size: 1.35rem; font-weight: 650; }

/* ---- Login page --------------------------------------------------------- */
body.login-page {
  display: block;
  min-height: 100vh;
  background-color: var(--c-bg);
  padding: 0;
}
.btn-flat { border-radius: var(--r-md) !important; }

.auth-shell {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 100vh;
}

/* Brand side */
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-6) clamp(1.5rem, 4vw, 3.5rem);
  color: #fff;
  background:
    radial-gradient(1100px 520px at 12% 8%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(155deg, var(--c-brand) 0%, var(--c-brand-700) 55%, var(--c-sidebar) 100%);
  overflow: hidden;
}
/* subtle depth, no image assets required */
.auth-brand::after {
  content: "";
  position: absolute;
  inset-inline-end: -18%;
  bottom: -28%;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .07);
}
.auth-brand-inner { position: relative; z-index: 1; margin-block: auto; max-width: 30rem; }
.auth-logo {
  width: 60px;
  height: 60px;
  border-radius: var(--r-lg);
  object-fit: cover;
  box-shadow: var(--sh-lg);
  margin-bottom: var(--sp-5);
}
.auth-title {
  color: #fff;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .35rem;
}
.auth-sub { font-size: 1rem; opacity: .9; margin: 0 0 var(--sp-6); }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.auth-points li { display: flex; align-items: center; gap: .7rem; font-size: .92rem; opacity: .95; }
.auth-points i {
  flex: 0 0 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background-color: rgba(255, 255, 255, .16);
  font-size: .85rem;
}
.auth-brand-foot { position: relative; z-index: 1; margin: 0; font-size: .76rem; opacity: .75; }

/* Form side */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) clamp(1.25rem, 4vw, 3rem);
  background-color: var(--c-surface);
}
.auth-form { width: 100%; max-width: 25rem; animation: fade-up var(--t-slow) var(--ease); }
.auth-head { margin-bottom: var(--sp-5); }
.auth-head h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .3rem; letter-spacing: -.02em; }
.auth-head p { color: var(--c-text-muted); margin: 0; font-size: .9rem; }

.auth-field { margin-bottom: var(--sp-4); }
.auth-field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .35rem;
  color: var(--c-text);
}
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > i {
  position: absolute;
  inset-inline-start: .85rem;
  font-size: .85rem;
  color: var(--c-text-muted);
  pointer-events: none;
  transition: color var(--t-fast) var(--ease);
}
.auth-input .form-control {
  height: 46px;
  padding-inline-start: 2.5rem;
  padding-inline-end: 2.6rem;
  font-size: .92rem;
  border-radius: var(--r-md);
}
.auth-input:focus-within > i { color: var(--c-brand); }
html[data-theme="dark"] .auth-input .form-control {
  background-color: var(--c-input-bg) !important;
  border-color: var(--c-border-strong) !important;
  color: var(--c-text) !important;
}

.auth-eye {
  position: absolute;
  inset-inline-end: .5rem;
  background: transparent;
  border: 0;
  color: var(--c-text-muted);
  padding: .4rem .5rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.auth-eye:hover { color: var(--c-brand-700); background-color: var(--c-brand-100); }

.auth-submit {
  height: 46px;
  margin-top: var(--sp-2);
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.auth-submit-icon { transition: transform var(--t-fast) var(--ease); }
.auth-submit:hover .auth-submit-icon { transform: translateX(3px); }
/* busy state while credentials are checked - set by theme.js */
.auth-submit.is-busy { pointer-events: none; opacity: .9; }
.auth-submit.is-busy .auth-submit-icon { animation: spin .7s linear infinite; transform: none; }

@keyframes spin { to { transform: rotate(360deg); } }

.auth-foot { margin: var(--sp-5) 0 0; text-align: center; font-size: .75rem; color: var(--c-text-muted); }
.login-page .alert { margin-bottom: var(--sp-4); }
.login-page #message { margin: 0; padding: 0; }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; }
  /* keep the brand as a compact header rather than dropping it entirely */
  .auth-brand { padding: var(--sp-5) var(--sp-4); }
  .auth-brand-inner { margin: 0; }
  .auth-logo { width: 46px; height: 46px; margin-bottom: var(--sp-3); }
  .auth-points, .auth-brand-foot { display: none; }
  .auth-sub { margin-bottom: 0; }
  .auth-panel { padding: var(--sp-5) var(--sp-4); }
}

/* ==========================================================================
   11b. Tabs + permission grid (Cod/AddUsers)
   A form with ~300 toggles needs structure, not a wall of dropdowns: tabs split
   account / permissions / shortcuts, and each permission area is a card whose
   pages are chips that can be ticked in bulk.
   ========================================================================== */
.utabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.utab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: .5rem 1.05rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.utab:hover { background: var(--c-brand-100); color: var(--c-brand-ink); }
.utab.is-active {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-600) 100%);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(var(--c-brand-rgb), .6);
}
.utab-badge {
  min-width: 1.5rem;
  padding: 0 .4rem;
  border-radius: var(--r-pill);
  background: var(--c-brand-100);
  color: var(--c-brand-ink);
  font-size: .72rem;
  line-height: 1.45;
  text-align: center;
}
.utab.is-active .utab-badge { background: rgba(255, 255, 255, .22); color: #fff; }
.utab-badge.is-zero { opacity: .55; }

.utab-pane { display: none; }
.utab-pane.is-active { display: block; animation: fade-in var(--t-mid) var(--ease); }

/* ---- toolbar ------------------------------------------------------------- */
.perm-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.perm-search { position: relative; flex: 1 1 240px; min-width: 0; }
.perm-search i {
  position: absolute;
  inset-inline-start: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  font-size: .85rem;
  pointer-events: none;
}
.perm-search input {
  width: 100%;
  padding: .5rem .8rem;
  padding-inline-start: 2.1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-input-bg);
  color: var(--c-text);
  font-size: .875rem;
}
.perm-search input:focus { outline: none; border-color: var(--c-brand); box-shadow: var(--sh-focus); }
.perm-toolbar-actions { display: flex; gap: var(--sp-2); }
.perm-total { color: var(--c-text-muted); font-size: .82rem; margin-inline-start: auto; }
.perm-total b { color: var(--c-text); font-size: .95rem; }
.perm-empty { color: var(--c-text-muted); text-align: center; padding: var(--sp-5) 0; }

/* ---- one card per permission area ---------------------------------------- */
/* Multi-column rather than grid: a grid row is as tall as its tallest card, so
   expanding one area left a column of dead space beside it. Columns let the
   cards pack. */
.perm-groups {
  column-width: 330px;
  column-gap: var(--sp-4);
}
.perm-group { break-inside: avoid; margin-bottom: var(--sp-4); }
.perm-panel,
.perm-group {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.perm-group.has-selection { border-color: rgba(var(--c-brand-rgb), .45); box-shadow: var(--sh-sm); }
.perm-group-head { display: flex; align-items: center; gap: var(--sp-3); }
.perm-group-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--c-text);
}
.perm-group-count {
  font-size: .74rem;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: .1rem .5rem;
  white-space: nowrap;
}
/* an area with no page list (Administration) has nothing to count */
.perm-group-count:empty { display: none; }

/* The body stays collapsed until the area is switched on - that is what the old
   page did with inline display:none, kept so the form does not open as a wall. */
.perm-group-actions,
.perm-group-body { display: none; }
.perm-group.is-open .perm-group-actions,
.perm-group.is-forced-open .perm-group-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.perm-group.is-open .perm-group-body,
.perm-group.is-forced-open .perm-group-body { display: grid; }

.perm-mini {
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  color: var(--c-text-muted);
  font-size: .74rem;
  padding: .2rem .65rem;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.perm-mini:hover { border-color: var(--c-brand); color: var(--c-brand); background: var(--c-brand-100); }

.perm-group-body {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.perm-panel > .perm-group-body { display: grid; }

/* ---- a single page toggle ------------------------------------------------ */
.perm-item {
  position: relative;   /* keeps the visually-hidden input inside the chip, so
                           focusing it does not scroll the page somewhere else */
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .45rem .6rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  cursor: pointer;
  font-weight: 400;
  transition: all var(--t-fast) var(--ease);
}
.perm-item:hover { border-color: var(--c-brand); background: var(--c-brand-100); }
.perm-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.perm-item-box {
  flex: 0 0 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-input-bg);
  display: grid;
  place-items: center;
  transition: all var(--t-fast) var(--ease);
}
.perm-item-box i { font-size: .6rem; color: #fff; opacity: 0; transform: scale(.6); transition: all var(--t-fast) var(--ease); }
.perm-item input:checked + .perm-item-box { background: var(--c-brand); border-color: var(--c-brand); }
.perm-item input:checked + .perm-item-box i { opacity: 1; transform: scale(1); }
.perm-item input:focus-visible + .perm-item-box { box-shadow: var(--sh-focus); }
.perm-item-text {
  font-size: .82rem;
  color: var(--c-text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.perm-item input:checked ~ .perm-item-text { color: var(--c-brand-ink); font-weight: 500; }

/* ---- switch -------------------------------------------------------------- */
.perm-switch { position: relative; display: inline-flex; margin: 0; flex: 0 0 auto; cursor: pointer; }
.perm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.perm-switch-track {
  width: 2.35rem;
  height: 1.3rem;
  border-radius: var(--r-pill);
  background: var(--c-border-strong);
  transition: background var(--t-fast) var(--ease);
}
.perm-switch-track::after {
  content: "";
  position: absolute;
  top: .19rem;
  inset-inline-start: .19rem;
  width: .92rem;
  height: .92rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-fast) var(--ease);
}
.perm-switch input:checked + .perm-switch-track { background: var(--c-brand); }
.perm-switch input:checked + .perm-switch-track::after { transform: translateX(-1.05rem); }
[dir="ltr"] .perm-switch input:checked + .perm-switch-track::after { transform: translateX(1.05rem); }
.perm-switch input:focus-visible + .perm-switch-track { box-shadow: var(--sh-focus); }

.perm-switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.perm-switch-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: .6rem .8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  cursor: pointer;
  font-weight: 400;
}
.perm-switch-label { display: flex; flex-direction: column; font-size: .86rem; color: var(--c-text); }
.perm-switch-label small { color: var(--c-text-muted); font-size: .72rem; }

/* Below tablet the toolbar cannot keep search + buttons + counter on one line
   without crushing the search box, so stack them. */
@media (max-width: 767.98px) {
  .perm-toolbar { flex-direction: column; align-items: stretch; }
  /* `flex: 1 1 240px` grows along the main axis - once that axis is vertical it
     stretches the search box into a tall empty panel */
  .perm-search { flex: 0 0 auto; }
  .perm-toolbar-actions .btn { flex: 1 1 auto; }
  .perm-total { margin-inline-start: 0; text-align: start; }
  .utab { padding: .45rem .8rem; font-size: .82rem; }
}

@media (max-width: 575.98px) {
  .perm-groups { column-width: auto; }
  .perm-group-body { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12. Animation utilities
   ========================================================================== */
.content-wrapper > .content,
.content-wrapper > .card,
.content-wrapper > section { animation: fade-up var(--t-slow) var(--ease); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* AdminLTE's treeview slide, smoothed */
.nav-treeview { transition: max-height var(--t-mid) var(--ease); }

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  .card-body { padding: var(--sp-4); }
  .card-header, .card-footer { padding: var(--sp-3) var(--sp-4); }
  .main-header.navbar { min-height: 54px; }
}

@media (max-width: 767.98px) {
  /* Pre-existing RTL issue: custom.css parks the off-canvas sidebar at
     right:0 with margin-right:-250px, so the fixed element sits 250px past the
     viewport and drags the whole page sideways. Contain it - the sidebar still
     slides in via .sidebar-open, it just no longer widens the document. */
  html, body { overflow-x: hidden; max-width: 100%; }
  .content-wrapper, .main-header, .main-footer {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body { font-size: 13.5px; }
  .content-wrapper { padding-bottom: var(--sp-5); }
  .card { border-radius: var(--r-md); margin-bottom: var(--sp-4); }
  .card-body { padding: var(--sp-3); }

  /* Stack the label/field grid instead of squeezing two columns */
  .card-body > table,
  .card-body > table > tbody,
  .card-body > table > tbody > tr,
  .card-body > table > tbody > tr > td { display: block; width: 100%; }
  .card-body > table > tbody > tr > td { padding: .2rem 0; }

  /* Data tables stay tabular but scroll */
  .table-scroll > .table { min-width: 640px; }
  .table thead th { position: static; }

  .card-footer .btn { flex: 1 1 auto; }
  .main-footer { text-align: center; font-size: .75rem; }
}

/* Sidebar overlay on small screens */
@media (max-width: 991.98px) {
  body.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    z-index: 1036;
    animation: fade-in var(--t-fast) var(--ease);
  }
  .main-sidebar { z-index: 1038; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   14. Accessibility & print
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.nav-sidebar .nav-link:focus-visible { outline-color: #fff; outline-offset: -2px; }

/* Respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card.card-hover:hover, .small-box:hover { transform: none; }
}

@media print {
  .main-sidebar, .main-header, .main-footer, .card-footer, .no-print { display: none !important; }
  .content-wrapper { margin: 0 !important; background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .table thead th { position: static; background: #eee !important; color: #000 !important; }
}

/* ==========================================================================
   15. Table column picker
   --------------------------------------------------------------------------
   Markup is injected by theme.js -> columnPicker(); nothing in a template
   references these classes. Colours come from tokens only, so dark mode is
   handled by the token swap with no overrides of its own. Logical properties
   (inset-inline-*) keep the menu on the correct edge under RTL and LTR.
   ========================================================================== */
.ejw-cols {
  position: relative;
  display: inline-flex;
  margin-bottom: var(--sp-2);
  vertical-align: middle;
}

.ejw-cols-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .65rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-text-muted);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.ejw-cols-btn:hover { color: var(--c-brand-ink); border-color: var(--c-brand); }
.ejw-cols-btn:focus { outline: none; box-shadow: var(--sh-focus); }
.ejw-cols.is-open > .ejw-cols-btn {
  color: var(--c-brand-ink);
  background-color: var(--c-brand-100);
  border-color: var(--c-brand);
}
.ejw-cols.has-hidden > .ejw-cols-btn { color: var(--c-brand-ink); border-color: var(--c-brand); }

.ejw-cols-caret { font-size: .625rem; opacity: .65; transition: transform .15s ease; }
.ejw-cols.is-open .ejw-cols-caret { transform: rotate(180deg); }

.ejw-cols-badge {
  min-width: 1.15rem;
  padding: 0 .3rem;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  color: #fff;
  background-color: var(--c-brand);
  border-radius: var(--r-pill);
}

.ejw-cols-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 1035;                     /* above the sticky thead, below modals */
  width: 17rem;
  max-width: 90vw;
  text-align: start;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  animation: ejwColsIn .14s ease-out;
}
.ejw-cols.drop-end > .ejw-cols-menu { inset-inline-start: auto; inset-inline-end: 0; }

@keyframes ejwColsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.ejw-cols-search { padding: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.ejw-cols-search .form-control { height: auto; padding: .3rem .55rem; font-size: .8125rem; }

.ejw-cols-list {
  max-height: 15rem;
  padding: var(--sp-1) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ejw-cols-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .3rem var(--sp-3);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--c-text);
  cursor: pointer;
}
.ejw-cols-item:hover { background-color: var(--c-brand-100); }
.ejw-cols-item > input { flex: none; margin: 0; cursor: pointer; accent-color: var(--c-brand); }
.ejw-cols-item > input:disabled { cursor: not-allowed; opacity: .45; }
.ejw-cols-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ejw-cols-item.is-off > span { color: var(--c-text-muted); text-decoration: line-through; }

.ejw-cols-empty {
  padding: var(--sp-3);
  font-size: .8125rem;
  color: var(--c-text-muted);
  text-align: center;
}

.ejw-cols-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--c-surface-2);
  border-top: 1px solid var(--c-border);
}
.ejw-cols-count { font-size: .75rem; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.ejw-cols-action {
  padding: .15rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-brand-ink);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.ejw-cols-action:hover:not(:disabled) { background-color: var(--c-brand-100); }
.ejw-cols-action:disabled { color: var(--c-text-muted); cursor: default; opacity: .6; }

/* The picker is a screen control - printouts show whatever is visible. */
@media print { .ejw-cols { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .ejw-cols-menu { animation: none; }
  .ejw-cols-caret { transition: none; }
}