/* Make the container behave like a compact inline switch */
.custom-control.custom-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
}

/* Hide the native checkbox but keep it accessible */
.custom-control.custom-switch .custom-control-input {
  position: absolute;
  inset: 0 0 auto auto;  /* keep in flow for accessibility */
  width: 2.25rem;
  height: 1.25rem;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

/* Label reserves space for the switch track on the left */
.custom-control.custom-switch .custom-control-label {
  position: relative;
  padding-left: 2.6rem;          /* space for the switch */
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
}

/* Track (OFF state) */
.custom-control.custom-switch .custom-control-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;                /* ≈ 36px */
  height: 1.25rem;               /* ≈ 20px */
  border-radius: 9999px;
  border: 1px solid rgba(var(--bs-primary-rgb), .45);
  background-color: rgba(var(--bs-primary-rgb), .10);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Knob (OFF state) */
.custom-control.custom-switch .custom-control-label::after {
  content: "";
  position: absolute;
  left: .15rem;                  /* knob inset */
  top: 50%;
  transform: translateY(-50%) translateX(0);
  width: .9rem;                  /* ≈ 14px */
  height: .9rem;
  border-radius: 50%;
  background-color: var(--bs-secondary-color);
  box-shadow: 0 1px 1px rgba(0,0,0,.15);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

/* ON state */
.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: rgba(var(--bs-primary-rgb), .9);
  border-color: rgba(var(--bs-primary-rgb), 1);
}

.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  transform: translateY(-50%) translateX(1rem); /* slide right */
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Focus ring */
.custom-control.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* Disabled */
.custom-control.custom-switch .custom-control-input:disabled ~ .custom-control-label {
  opacity: .6;
  cursor: not-allowed;
}

/* Tweak spacing for the small label text */
.custom-control.custom-switch .custom-control-label small {
  line-height: 1.1;
}



/* ---- Compact form preset ---- */
.form-compact {
  /* Use smaller gutters between columns/rows */
  --bs-gutter-x: .75rem;
  --bs-gutter-y: .5rem;
}

/* Reduce vertical spacing between controls */
.form-compact .mb-3 { margin-bottom: .5rem !important; }

/* Labels: smaller, tighter, subtle color */
.form-compact .form-label {
  font-size: .8rem;
  margin-bottom: .25rem;
  color: var(--bs-secondary-color);
}

/* Inputs/selects/textarea: consistent small height */
.form-compact .form-control,
.form-compact .form-select {
  font-size: .875rem;                 /* ~14px */
  padding: .375rem .5rem;             /* tighter */
  line-height: 1.25;
  border-radius: .5rem;               /* softer corners */
  min-height: 2.125rem;               /* ~34px */
}

/* Textareas: compact default height but still resizable */
.form-compact textarea.form-control {
  min-height: 2.125rem;               /* same as inputs */
  resize: vertical;
}

/* Input groups & custom controls align nicely */
.form-compact .input-group > .form-control,
.form-compact .input-group > .form-select {
  padding-top: .35rem; padding-bottom: .35rem;
}

/* Headings inside cards */
.form-compact .card-title,
.form-compact h6 {
  margin-bottom: .5rem;
}

/* Switch from your earlier snippet—scaled to the compact height */
.form-compact .custom-control.custom-switch .custom-control-label {
  padding-left: 2.4rem;
}
.form-compact .custom-control.custom-switch .custom-control-input {
  width: 2rem; height: 1.1rem;
}
.form-compact .custom-control.custom-switch .custom-control-label::before {
  width: 2rem; height: 1.1rem;
}
.form-compact .custom-control.custom-switch .custom-control-label::after {
  width: .85rem; height: .85rem;
  transform: translateY(-50%) translateX(0);
}
.form-compact .custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateY(-50%) translateX(.95rem);
}





/* Make the container behave like a compact inline switch */
.custom-control.custom-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
}

/* Hide the native checkbox but keep it accessible */
.custom-control.custom-switch .custom-control-input {
  position: absolute;
  inset: 0 0 auto auto;  /* keep in flow for accessibility */
  width: 2.25rem;
  height: 1.25rem;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

/* Label reserves space for the switch track on the left */
.custom-control.custom-switch .custom-control-label {
  position: relative;
  padding-left: 2.6rem;          /* space for the switch */
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
}

/* Track (OFF state) */
.custom-control.custom-switch .custom-control-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;                /* ≈ 36px */
  height: 1.25rem;               /* ≈ 20px */
  border-radius: 9999px;
  border: 1px solid rgba(var(--bs-primary-rgb), .45);
  background-color: rgba(var(--bs-primary-rgb), .10);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Knob (OFF state) */
.custom-control.custom-switch .custom-control-label::after {
  content: "";
  position: absolute;
  left: .15rem;                  /* knob inset */
  top: 50%;
  transform: translateY(-50%) translateX(0);
  width: .9rem;                  /* ≈ 14px */
  height: .9rem;
  border-radius: 50%;
  background-color: var(--bs-secondary-color);
  box-shadow: 0 1px 1px rgba(0,0,0,.15);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

/* ON state */
.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: rgba(var(--bs-primary-rgb), .9);
  border-color: rgba(var(--bs-primary-rgb), 1);
}

.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  transform: translateY(-50%) translateX(1rem); /* slide right */
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Focus ring */
.custom-control.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* Disabled */
.custom-control.custom-switch .custom-control-input:disabled ~ .custom-control-label {
  opacity: .6;
  cursor: not-allowed;
}

/* Tweak spacing for the small label text */
.custom-control.custom-switch .custom-control-label small {
  line-height: 1.1;
}



.img-logo {
  width: 200px;
  height: 200px;
}



/* ====== Base chip ====== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.15rem .75rem;
  font-size:12px;
  line-height:1;
  font-weight:400;              /* stronger */
  border-radius:999px;          /* pill */
  border:0;                    /* let the color carry it */
  margin-bottom:.25rem;
  white-space:nowrap;
}

/* ====== Semantic token defaults (light) ====== */
:root{
  --badge-success:#16a34a;  /* green-600 */
  --badge-warn:#f59e0b;     /* amber-500 */
  --badge-danger:#dc2626;   /* red-600 */
  --badge-info:#2563eb;     /* blue-600 */
  --badge-neutral:#6b7280;  /* gray-500 */
  --badge-invert-bg:#ffffff;
  --badge-invert-fg:#111827;
}

/* Dark theme tuning */
@media (prefers-color-scheme: dark){
  :root{
    --badge-success:#22c55e;  /* green-500 a bit brighter */
    --badge-warn:#f59e0b;     /* amber-500 */
    --badge-danger:#ef4444;   /* red-500 */
    --badge-info:#3b82f6;     /* blue-500 */
    --badge-neutral:#9ca3af;  /* gray-400 */
    --badge-invert-bg:#0b0b0b;
    --badge-invert-fg:#e5e7eb;
  }
}

/* ====== Mappings (case-insensitive token match) ======
   Use !important so these win over any bg-* utilities
*/

/* Success / Ready */
.badge[class~="badge-ready" i],
.badge[class~="badge-success" i],
.badge[class~="badge-valid" i],
.badge[class~="badge-active" i],
.badge[class~="badge-debit" i],
.badge[class~="badge-stock_adjustment" i]{
  background-color:var(--badge-success)!important;
  color:#fff!important;
}

/* Pending / Warning */
.badge[class~="badge-pending" i],
.badge[class~="badge-warning" i],
.badge[class~="badge-owner" i]{
  background-color:var(--badge-warn)!important;
  color:#fff!important;
}

/* Error / Negative */
.badge[class~="badge-error" i],
.badge[class~="badge-admin" i],
.badge[class~="badge-credit" i],
.badge[class~="badge-invoice" i],
.badge[class~="badge-cancelled" i],
.badge[class~="badge-canceled" i],
.badge[class~="badge-rejected" i],
.badge[class~="badge-Cancelled" i],
.badge[class~="badge-Canceled" i],
.badge[class~="badge-Rejected" i]{
  background-color:var(--badge-danger)!important;
  color:#fff!important;
}

/* Info / Primary-ish */
.badge[class~="badge-user" i],
.badge[class~="badge-item" i],
.badge[class~="badge-info" i],
.badge[class~="badge-primary" i]{
  background-color:var(--badge-info)!important;
  color:#fff!important;
}

/* Neutral / Inactive */
.badge[class~="badge-inactive" i],
.badge[class~="badge-draft" i],
.badge[class~="badge-stock_transfer" i],
.badge[class~="badge-secondary" i]{
  background-color:var(--badge-neutral)!important;
  color:#fff!important;
}

/* Special: black-on-white chip */
.badge[class~="badge-item-black" i]{
  background:var(--badge-invert-bg)!important;
  color:var(--badge-invert-fg)!important;
  border:0.5px solid currentColor!important;
}

/* ====== Nice extras (optional) ====== */
/* subtle focus ring for a11y, if badges are clickable */
.badge:focus{
  outline:2px solid color-mix(in srgb, currentColor 60%, transparent);
  outline-offset:2px;
}


/* Centered, responsive logo; trims stray whitespace */
.logo-icon{
  display: flex;
  align-items: center;
  justify-content: center;

  /* compact, consistent block */
  padding: 12px 12px;
  min-height: 64px;

  /* kill inline-image baseline gap */
  line-height: 0;

  /* don't repaint glass */
  background: transparent !important;
  margin: 0;
}

.logo-icon img{
  display: block;              /* no extra space */
  width: min(70%, 180px);      /* scales with sidebar, capped for balance */
  max-width: 100%;
  height: auto;
  object-fit: contain;

  /* optional subtle pop on glass (remove if you prefer flat) */
  filter: drop-shadow(0 1px 8px rgba(0,0,0,.18));
}

/* If your menu sits right after the logo, tighten that gap */
.logo-icon + .sidebar-nav { margin-top: 6px; }

/* Short screens: make it a bit tighter */
@media (max-height: 700px){
  .logo-icon{ padding: 8px 10px; min-height: 56px; }
  .logo-icon img{ width: min(64%, 160px); }
}

/* Collapsed sidebar state (if your layout uses one) */
.sidebar-collapsed .logo-icon{ padding: 10px 0; min-height: 48px; }
.sidebar-collapsed .logo-icon img{ width: 36px; }


#billing_address,
textarea.form-control[name="billing_address"] {
  height: 40px !important;
  min-height: 40px !important; /* keeps it from stretching back up */
}

#shipping_address,
textarea.form-control[name="shipping_address"] {
  height: 40px !important;
  min-height: 40px !important;
}


/* After bootstrap.css */
textarea.form-control[name="remarks"] {
  /* target height ≈ 2 rows */
  --rows: 2;
  --lh: 1.5;       /* Bootstrap line-height */
  --py: .375rem;   /* Bootstrap padding-top/bottom for .form-control */
  --bw: 1px;       /* border width */

  height: calc(var(--rows) * 1em * var(--lh) + (var(--py) * 2) + (var(--bw) * 2));
  min-height: calc(var(--rows) * 1em * var(--lh) + (var(--py) * 2) + (var(--bw) * 2));
  resize: vertical; /* optional: allow user to grow it */
}



.select2-container .select2-selection {
  background-color: transparent !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-dropdown {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb;
}
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
  border: 1px solid #374151 !important;
}


/* ---------- shared tokens ---------- */
:root {
  --field-h: 40px;
  --radius: .625rem;
}

/* =============== LIGHT ================= */
[data-bs-theme="light"]{
  --field-bg: #fff;
  --field-fg: #111827;
  --field-border: #d1d5db;
  --field-ph: #9ca3af;

  --focus: #2563eb;
  --focus-ring: rgba(37,99,235,.20);

  --dropdown-bg: #fff;
  --dropdown-border: #e5e7eb;

  --chip-bg: #eff6ff;
  --chip-fg: #1e3a8a;

  --disabled-bg: #f1f5f9;
  --disabled-fg: #6b7280;
}

/* keep the BS5 arrow visible on light */
[data-bs-theme="semi-dark"] .form-select{
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* =============== semi-dark ================= */
[data-bs-theme="semi-dark"]{
  --field-bg: #fff;
  --field-fg: #111827;
  --field-border: #d1d5db;
  --field-ph: #9ca3af;

  --focus: #2563eb;
  --focus-ring: rgba(37,99,235,.20);

  --dropdown-bg: #fff;
  --dropdown-border: #e5e7eb;

  --chip-bg: #eff6ff;
  --chip-fg: #1e3a8a;

  --disabled-bg: #f1f5f9;
  --disabled-fg: #6b7280;
}

/* keep the BS5 arrow visible on semi-dark */
[data-bs-theme="semi-dark"] .form-select{
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* =============== DARK ================= */
[data-bs-theme="dark"]{
  --field-bg: rgba(31,41,55,.66);
  --field-fg: #e5e7eb;
  --field-border: #374151;
  --field-ph: #9aa4af;

  --focus: #60a5fa;
  --focus-ring: rgba(96,165,250,.25);

  --dropdown-bg: #1f2937;
  --dropdown-border: #374151;

  --chip-bg: rgba(59,130,246,.22);
  --chip-fg: #ffffff;

  --disabled-bg: #374151;
  --disabled-fg: #9aa4af;
}
[data-bs-theme="dark"] .form-select{
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* =============== BLUE THEME (example) ================= */
[data-bs-theme="blue-theme"]{
  --field-bg: rgba(17, 34, 64, .55);
  --field-fg: #e6f0ff;
  --field-border: rgba(173, 197, 255, .35);
  --field-ph: #b7c7e8;

  --focus: #7aa2ff;
  --focus-ring: rgba(122,162,255,.28);

  --dropdown-bg: rgba(10, 24, 48, .98);
  --dropdown-border: rgba(173, 197, 255, .35);

  --chip-bg: rgba(122,162,255,.22);
  --chip-fg: #fff;

  --disabled-bg: rgba(17, 34, 64, .35);
  --disabled-fg: #9fb3d9;
}
[data-bs-theme="blue-theme"] .form-select{
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d6e4ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ===================================================== */
/* =============== NATIVE <select> (BS4/BS5) =========== */
[data-bs-theme] .form-select,
[data-bs-theme] select.form-control,
[data-bs-theme] select{
  background: var(--field-bg) !important;
  color: var(--field-fg) !important;
  border-radius: var(--radius);
  height: var(--field-h);
  -webkit-appearance: none; appearance: none;
}
[data-bs-theme] .form-select:focus,
[data-bs-theme] select.form-control:focus,
[data-bs-theme] select:focus{
  background: var(--field-bg) !important;
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 .2rem var(--focus-ring) !important;
  outline: 0;
}
[data-bs-theme] .form-select:disabled,
[data-bs-theme] select:disabled{
  background: var(--disabled-bg) !important;
  color: var(--disabled-fg) !important;
  border-color: var(--field-border) !important;
}
[data-bs-theme] .form-select[multiple],
[data-bs-theme] select[multiple]{ background-image: none !important; }
[data-bs-theme] .form-control::placeholder { color: var(--field-ph); }

/* Try to tint native dropdown list (browser-dependent) */
[data-bs-theme] select option,
[data-bs-theme] select optgroup{
  background: var(--dropdown-bg);
  color: var(--field-fg);
}
[data-bs-theme] select option:checked{
  background: var(--focus-ring);
  color: var(--field-fg);
}

/* ===================================================== */
/* =================== Select2 ========================= */
/* NOTE: put this AFTER your old rule
   `.select2-container .select2-selection { background-color: transparent !important; }`
   or simply remove that line. These are more specific but load order still matters. */

[data-bs-theme] .select2-container .select2-selection--single,
[data-bs-theme] .select2-container .select2-selection--multiple{
  color: var(--field-fg) !important;
  border-radius: var(--radius) !important;
  min-height: var(--field-h) !important;
}
[data-bs-theme] .select2-container--default
.select2-selection--single .select2-selection__rendered{
  color: var(--field-fg) !important;
  line-height: calc(var(--field-h) - 2px) !important;
  padding: 0 .75rem !important;
}
[data-bs-theme] .select2-container--default
.select2-selection--single .select2-selection__placeholder{
  color: var(--field-ph) !important;
}
[data-bs-theme] .select2-container--default
.select2-selection--single .select2-selection__arrow{
  height: var(--field-h) !important;
}

/* focus/open state */
[data-bs-theme] .select2-container--default.select2-container--open .select2-selection,
[data-bs-theme] .select2-container--default .select2-selection:focus{
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 .2rem var(--focus-ring) !important;
  background: var(--field-bg) !important;
}

/* disabled */
[data-bs-theme] .select2-container--default.select2-container--disabled .select2-selection{
  background: var(--disabled-bg) !important;
  color: var(--disabled-fg) !important;
  border-color: var(--field-border) !important;
}

/* chips for multiple */
[data-bs-theme] .select2-container--default .select2-selection--multiple .select2-selection__choice{
  background: var(--chip-bg) !important;
  color: var(--chip-fg) !important;
  border: 1px solid var(--dropdown-border) !important;
}

/* dropdown panel */
[data-bs-theme] .select2-container--default .select2-dropdown{
  color: var(--field-fg) !important;
  border: 1px solid var(--dropdown-border) !important;
}
[data-bs-theme] .select2-results__option{ color: var(--field-fg) !important; }
[data-bs-theme] .select2-results__option--highlighted[aria-selected]{
  background: var(--focus-ring) !important;
  color: var(--field-fg) !important;
}





/* =========================================
   THEMED FORM PACK (inputs, textarea, select, Select2)
   ========================================= */

/* shared sizing */
:root { --field-h: 40px; --radius: .625rem; --ring-w: .2rem; }

/* ---------- LIGHT ---------- */
[data-bs-theme="light"]{
  --field-bg: #fff;
  --field-fg: #111827;
  --field-border: #d1d5db;
  --field-ph: #9ca3af;
  --focus: #2563eb;
  --ring: rgba(37,99,235,.20);
  --drop-bg: #fff;
  --drop-border: #e5e7eb;
  --disabled-bg: #f1f5f9;
  --disabled-fg: #6b7280;
}
[data-bs-theme="light"] .form-select{
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111827' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ---------- DARK ---------- */
[data-bs-theme="dark"]{
  --field-bg: rgba(31,41,55,.66);
  --field-fg: #e5e7eb;
  --field-border: #374151;
  --field-ph: #9aa4af;
  --focus: #60a5fa;
  --ring: rgba(96,165,250,.25);
  --drop-bg: #1f2937;
  --drop-border: #374151;
  --disabled-bg: #374151;
  --disabled-fg: #9aa4af;
}
[data-bs-theme="dark"] .form-select{
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ---------- BLUE (glass example) ---------- */
[data-bs-theme="blue-theme"]{
  --field-bg: rgba(17,34,64,.55);
  --field-fg: #e6f0ff;
  --field-border: rgba(173,197,255,.35);
  --field-ph: #b7c7e8;
  --focus: #7aa2ff;
  --ring: rgba(122,162,255,.28);
  --drop-bg: rgba(10,24,48,.98);
  --drop-border: rgba(173,197,255,.35);
  --disabled-bg: rgba(17,34,64,.35);
  --disabled-fg: #9fb3d9;
}
[data-bs-theme="blue-theme"] .form-select{
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d6e4ff' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* =========================================
   BASE: inputs, textarea, native <select>
   ========================================= */
[data-bs-theme] .form-control,
[data-bs-theme] textarea.form-control,
[data-bs-theme] .form-select,

[data-bs-theme] .form-control::placeholder { color: var(--field-ph); }
[data-bs-theme] .form-control:focus,
[data-bs-theme] .form-select:focus {
  background: var(--field-bg) !important;
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 var(--ring-w) var(--ring) !important;
  outline: 0;
}
[data-bs-theme] .form-control:disabled,
[data-bs-theme] .form-select:disabled {
  background: var(--disabled-bg) !important;
  color: var(--disabled-fg) !important;
  border-color: var(--field-border) !important;
}
[data-bs-theme] .form-select[multiple],
[data-bs-theme] select[multiple] { background-image: none !important; }
[data-bs-theme] textarea.form-control { min-height: var(--field-h); }

/* Tint native dropdown (browser-dependent) */
[data-bs-theme] select option,
[data-bs-theme] select optgroup{
  background: var(--drop-bg);
  color: var(--field-fg);
}
[data-bs-theme] select option:checked{
  background: var(--ring);
  color: var(--field-fg);
}

/* =========================================
   SELECT2 (single + multiple)
   ========================================= */
[data-bs-theme] .select2-container .select2-selection--single,
[data-bs-theme] .select2-container .select2-selection--multiple{
  color: var(--field-fg) !important;
  border-radius: var(--radius) !important;
  min-height: var(--field-h) !important;
}
[data-bs-theme] .select2-container--default
.select2-selection--single .select2-selection__rendered{
  color: var(--field-fg) !important;
  line-height: calc(var(--field-h) - 2px) !important; /* account for borders */
  padding: 0 .75rem !important;
}
[data-bs-theme] .select2-container--default
.select2-selection--single .select2-selection__placeholder{
  color: var(--field-ph) !important;
}
[data-bs-theme] .select2-container--default
.select2-selection--single .select2-selection__arrow{
  height: var(--field-h) !important;
}

/* focus/open state */
[data-bs-theme] .select2-container--default.select2-container--open .select2-selection,
[data-bs-theme] .select2-container--default .select2-selection:focus{
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 var(--ring-w) var(--ring) !important;
}

/* disabled */
[data-bs-theme] .select2-container--default.select2-container--disabled .select2-selection{
  background: var(--disabled-bg) !important;
  color: var(--disabled-fg) !important;
  border-color: var(--field-border) !important;
}

/* chips for multiple */
[data-bs-theme] .select2-container--default .select2-selection--multiple .select2-selection__choice{
  background: color-mix(in oklab, var(--drop-bg) 70%, var(--focus) 30%) !important;
  color: var(--field-fg) !important;
  border: 1px solid var(--drop-border) !important;
}

/* dropdown panel */
[data-bs-theme] .select2-container--default .select2-dropdown{
  color: var(--field-fg) !important;
  border: 1px solid var(--drop-border) !important;
}
[data-bs-theme] .select2-results__option{ color: var(--field-fg) !important; }
[data-bs-theme] .select2-results__option--highlighted[aria-selected]{
  background: var(--ring) !important;
  color: var(--field-fg) !important;
}




/* ===========================
   Glass — sidebar + cards only
   (targets <html data-bs-theme="...">)
   =========================== */

:root{
  --glass-blur: 20px;     /* feel free to tweak: 16–24px */
  --glass-sat: 165%;
  --glass-shadow: 0 10px 28px rgba(0,0,0,.14);
}

/* Let the background image show through the main area */
html body #wrapper,
html body #content-wrapper,
html body #content,
html body .page-content { background: transparent !important; }

/* SimpleBar internals transparent so frost is visible */
.sidebar-wrapper [class*="simplebar-content"],
.sidebar-wrapper [class*="simplebar-content-wrapper"],
.sidebar-wrapper .sidebar-nav { background: transparent !important; }

/* Shared glass bits (no layout changes) */
.sidebar-wrapper,
.card{
  position: relative;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow);
}
.card-body{ background: transparent !important; }

/* =========================================
   Per-theme colors (keep your original hues)
   ========================================= */

/* LIGHT — keep white, but translucent */

/* DARK — frosted charcoal */
html[data-bs-theme="dark"] .sidebar-wrapper{
  background-color: rgba(31,35,44,.52) !important;         /* base #1f232c with alpha */
  border: 1px solid rgba(255,255,255,.10) !important;
}
html[data-bs-theme="dark"] .card{
  background-color: rgba(26,29,35,.56) !important;          /* base #1a1d23 with alpha */
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* BLUE THEME — navy frost */
html[data-bs-theme="blue-theme"] .sidebar-wrapper{
  background-color: rgba(19,34,77,.48) !important;          /* base #13224d with alpha */
  border: 1px solid rgba(173,197,255,.22) !important;
}
html[data-bs-theme="blue-theme"] .card{
  background-color: rgba(21,34,76,.52) !important;          /* base #15244c with alpha */
  border: 1px solid rgba(173,197,255,.18) !important;
}

/* SEMI-DARK — dark sidebar + light content */
html[data-bs-theme="semi-dark"] .sidebar-wrapper{
  background-color: rgba(23,27,38,.60) !important;          /* base #171b26 with alpha */
  border: 1px solid rgba(255,255,255,.12) !important;
}
html[data-bs-theme="semi-dark"] .card{
  background-color: rgba(255,255,255,.86) !important;       /* light cards */
  border: 1px solid rgba(0,0,0,.06) !important;
}

/* Fallback: browsers that lack backdrop-filter */
@supports not ((backdrop-filter: blur(2px))){
  html[data-bs-theme="light"] .sidebar-wrapper,
  html[data-bs-theme="light"] .card{ background-color:#fff !important; }

  html[data-bs-theme="dark"] .sidebar-wrapper{ background-color:#1f232c !important; }
  html[data-bs-theme="dark"] .card{ background-color:#1a1d23 !important; }

  html[data-bs-theme="blue-theme"] .sidebar-wrapper{ background-color:#13224d !important; }
  html[data-bs-theme="blue-theme"] .card{ background-color:#15244c !important; }

  html[data-bs-theme="semi-dark"] .sidebar-wrapper{ background-color:#171b26 !important; }
  html[data-bs-theme="semi-dark"] .card{ background-color:#ffffff !important; }
}



.card{
  position: relative;                 /* keep for sheen layers */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow);
}

.sidebar-wrapper{
  position: fixed; top: 0; left: 0;
  height: 100vh; /* or: calc(100dvh) */
  z-index: 1030;
}

.sidebar-wrapper::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 38%);
  mix-blend-mode: screen; opacity:.5;
}