/* ==========================================================================
   Unity Webinar admin panel — "Midnight" look (2026-10-21).
   One stylesheet for every screen: tokens, base, app shell, cards, tables
   (DataTables), forms, buttons, pills, modals and the dark skins of the
   libraries that stay (DataTables, Select2, toastr, SweetAlert2, jquery-confirm,
   bootstrap-select, CKEditor, amCharts). Source of truth:
   design-system/unity-webinar-admin/MASTER.md. Dark only.
   Bootstrap's CSS is NOT loaded: the few structural classes its JS plugins
   need (modal, dropdown, collapse) and a small grid/utility subset are here.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --uw-bg: #050B14;
  --uw-card: #08111F;
  --uw-panel: #0B1220;
  --uw-raised: #0F172A;
  --uw-border: #243044;
  --uw-border-soft: #1A2436;
  --uw-text: #D1D5DB;
  --uw-text-strong: #FFFFFF;
  --uw-muted: #9CA3AF;
  --uw-blue: #2F8CFF;
  --uw-blue-hover: #1F6FE0;
  --uw-blue-soft: rgba(47, 140, 255, .16);
  --uw-blue-text: #7CC0FF;
  --uw-gradient: linear-gradient(90deg, #1F6FE0, #2F8CFF, #7CC0FF, #2F8CFF);
  --uw-green: #22C55E;
  --uw-green-soft: rgba(34, 197, 94, .16);
  --uw-green-text: #4ADE80;
  --uw-amber: #F59E0B;
  --uw-amber-soft: rgba(245, 158, 11, .16);
  --uw-amber-text: #FBBF24;
  --uw-red: #EF4444;
  --uw-red-hover: #DC2626;
  --uw-red-soft: rgba(239, 68, 68, .16);
  --uw-red-text: #F87171;
  --uw-cyan: #38BDF8;
  --uw-radius-lg: 18px;
  --uw-radius-md: 16px;
  --uw-radius: 10px;
  --uw-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --uw-shadow-pop: 0 18px 48px rgba(0, 0, 0, .5);
  --uw-ring: 0 0 0 3px rgba(47, 140, 255, .35);
  --uw-font: 'Nunito', 'Segoe UI', Helvetica, Arial, sans-serif;
  --uw-sidebar-w: 248px;
  --uw-sidebar-rail: 72px;
  --uw-topbar-h: 64px;
  --uw-gutter: 24px;
  --uw-motion: 150ms;
  --uw-motion-slow: 220ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--uw-bg);
  color: var(--uw-text);
  font-family: var(--uw-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 8px; color: var(--uw-text-strong); line-height: 1.25; font-weight: 700; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 14px; }
p { margin: 0 0 12px; }
a { color: var(--uw-blue-text); text-decoration: none; transition: color var(--uw-motion) ease-out; }
a:hover { color: #A8D4FF; text-decoration: underline; text-underline-offset: 3px; }
img, svg { vertical-align: middle; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--uw-border); margin: 16px 0; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--uw-ring); border-radius: var(--uw-radius); }
::selection { background: rgba(47, 140, 255, .4); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2A3850; border-radius: 999px; border: 2px solid var(--uw-card); }
::-webkit-scrollbar-thumb:hover { background: #3A4A66; }
* { scrollbar-width: thin; scrollbar-color: #2A3850 transparent; }

.uw-i { width: 20px; height: 20px; flex: 0 0 auto; }
.uw-i--sm { width: 16px; height: 16px; }
.uw-i--lg { width: 24px; height: 24px; }

.uw-skip {
  position: absolute; left: 16px; top: -48px; z-index: 2000;
  padding: 10px 14px; background: var(--uw-blue); color: #fff; border-radius: var(--uw-radius); font-weight: 700;
}
.uw-skip:focus { top: 12px; }

/* ---------- grid + utilities (Bootstrap-compatible names, used by the views and by HTML the JS injects) ---------- */
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.row > * { padding: 0 8px; min-width: 0; }
[class*="col-"], .col { flex: 0 0 100%; max-width: 100%; }
.col { flex: 1 1 0; max-width: 100%; }
.col-1 { flex-basis: 8.3333%; max-width: 8.3333%; } .col-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
.col-3 { flex-basis: 25%; max-width: 25%; } .col-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
.col-5 { flex-basis: 41.6667%; max-width: 41.6667%; } .col-6 { flex-basis: 50%; max-width: 50%; }
.col-7 { flex-basis: 58.3333%; max-width: 58.3333%; } .col-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
.col-9 { flex-basis: 75%; max-width: 75%; } .col-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.col-11 { flex-basis: 91.6667%; max-width: 91.6667%; } .col-12 { flex-basis: 100%; max-width: 100%; }
@media (min-width: 768px) {
  .col-md-1 { flex-basis: 8.3333%; max-width: 8.3333%; } .col-md-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
  .col-md-3 { flex-basis: 25%; max-width: 25%; } .col-md-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .col-md-5 { flex-basis: 41.6667%; max-width: 41.6667%; } .col-md-6 { flex-basis: 50%; max-width: 50%; }
  .col-md-7 { flex-basis: 58.3333%; max-width: 58.3333%; } .col-md-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
  .col-md-9 { flex-basis: 75%; max-width: 75%; } .col-md-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
  .col-md-11 { flex-basis: 91.6667%; max-width: 91.6667%; } .col-md-12 { flex-basis: 100%; max-width: 100%; }
}
@media (min-width: 1024px) {
  .col-lg-3 { flex-basis: 25%; max-width: 25%; } .col-lg-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .col-lg-6 { flex-basis: 50%; max-width: 50%; } .col-lg-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
  .col-lg-12 { flex-basis: 100%; max-width: 100%; }
}
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.h-100 { height: 100%; } .w-100 { width: 100%; }
.text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; }
.text-muted { color: var(--uw-muted) !important; }
.text-danger { color: var(--uw-red-text) !important; }
.text-success { color: var(--uw-green-text) !important; }
.text-strong { color: var(--uw-text-strong); }
.fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 16px !important; } .mt-4 { margin-top: 24px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 16px !important; } .mb-4 { margin-bottom: 24px !important; }
.my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
.p-0 { padding: 0 !important; }
.pull-right, .float-right { float: right; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.clearfix::after { content: ""; display: table; clear: both; }
.hide-div { display: none; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- app shell ---------- */
.uw-shell { min-height: 100vh; }
.uw-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030;
  width: var(--uw-sidebar-w);
  display: flex; flex-direction: column;
  background: var(--uw-panel);
  border-right: 1px solid var(--uw-border);
  transition: width var(--uw-motion-slow) ease-out, transform var(--uw-motion-slow) ease-out, box-shadow var(--uw-motion-slow) ease-out;
  overflow: hidden;
}
.uw-sidebar__brand {
  height: var(--uw-topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; border-bottom: 1px solid var(--uw-border);
}
.uw-sidebar__brand a { display: inline-flex; align-items: center; min-width: 0; }
.uw-sidebar__logo { height: 26px; width: auto; }
.uw-sidebar__mark { height: 30px; width: auto; display: none; }
.uw-sidebar .uw-sidebar__close { display: none; }
.uw-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 16px 12px; }
.uw-nav__link {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 10px 12px; margin-bottom: 4px;
  border-radius: var(--uw-radius);
  color: var(--uw-text); font-weight: 600; white-space: nowrap;
  transition: background var(--uw-motion) ease-out, color var(--uw-motion) ease-out;
}
.uw-nav__link:hover { background: var(--uw-raised); color: var(--uw-text-strong); text-decoration: none; }
.uw-nav__link.is-active { background: var(--uw-blue-soft); color: var(--uw-text-strong); box-shadow: inset 3px 0 0 var(--uw-blue); }
.uw-nav__link .uw-i { color: var(--uw-muted); }
.uw-nav__link.is-active .uw-i, .uw-nav__link:hover .uw-i { color: var(--uw-blue-text); }
.uw-nav__text { overflow: hidden; text-overflow: ellipsis; }
.uw-sidebar__foot { flex: 0 0 auto; padding: 12px; border-top: 1px solid var(--uw-border); }
.uw-sidebar__foot .uw-nav__link { margin: 0; width: 100%; background: transparent; border: 0; text-align: left; }
.uw-sidebar__backdrop {
  position: fixed; inset: 0; z-index: 1025; display: none;
  background: rgba(5, 11, 20, .7); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

.uw-main { margin-left: var(--uw-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left var(--uw-motion-slow) ease-out; }
.uw-topbar {
  position: sticky; top: 0; z-index: 1020;
  height: var(--uw-topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--uw-gutter);
  background: rgba(11, 18, 32, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--uw-border);
}
.uw-topbar .uw-topbar__menu { display: none; }
.uw-topbar__brand { display: none; align-items: center; }
.uw-topbar__brand img { height: 22px; width: auto; }
.uw-topbar__title { margin: 0; font-size: 22px; font-weight: 800; color: var(--uw-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-topbar__spacer { flex: 1 1 auto; }
.uw-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--uw-radius);
  background: transparent; border: 1px solid transparent; color: var(--uw-text);
  transition: background var(--uw-motion) ease-out, border-color var(--uw-motion) ease-out;
}
.uw-iconbtn:hover { background: var(--uw-raised); border-color: var(--uw-border); color: var(--uw-text-strong); }

.uw-usermenu { position: relative; }
.uw-usermenu__btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 10px 0 4px; border-radius: 999px;
  background: transparent; border: 1px solid transparent; color: var(--uw-text);
  transition: background var(--uw-motion) ease-out, border-color var(--uw-motion) ease-out;
}
.uw-usermenu__btn:hover, .uw-usermenu.is-open .uw-usermenu__btn { background: var(--uw-raised); border-color: var(--uw-border); }
.uw-usermenu__name { font-weight: 700; color: var(--uw-text-strong); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uw-usermenu__btn .uw-i { color: var(--uw-muted); transition: transform var(--uw-motion) ease-out; }
.uw-usermenu.is-open .uw-usermenu__btn .uw-i { transform: rotate(180deg); }
.uw-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: var(--uw-blue-soft); color: var(--uw-blue-text); font-weight: 800; font-size: 14px; letter-spacing: .02em;
  border: 1px solid rgba(47, 140, 255, .35);
}
.uw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.uw-usermenu__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 1040;
  min-width: 240px; padding: 8px;
  background: var(--uw-card); border: 1px solid var(--uw-border); border-radius: var(--uw-radius-md);
  box-shadow: var(--uw-shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98);
  transition: opacity var(--uw-motion) ease-out, transform var(--uw-motion) ease-out, visibility var(--uw-motion);
}
.uw-usermenu.is-open .uw-usermenu__menu { opacity: 1; visibility: visible; transform: none; }
.uw-usermenu__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--uw-border); margin-bottom: 6px; }
.uw-usermenu__head strong { display: block; color: var(--uw-text-strong); }
.uw-usermenu__head span { font-size: 12.5px; color: var(--uw-muted); }
.uw-usermenu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--uw-radius);
  color: var(--uw-text); font-weight: 600;
}
.uw-usermenu__item:hover { background: var(--uw-raised); color: var(--uw-text-strong); text-decoration: none; }
.uw-usermenu__item .uw-i { color: var(--uw-muted); }
.uw-usermenu__item--danger { color: var(--uw-red-text); }
.uw-usermenu__item--danger .uw-i { color: var(--uw-red-text); }

.uw-content { flex: 1 1 auto; width: 100%; max-width: none; padding: var(--uw-gutter); }
.uw-footer { padding: 16px var(--uw-gutter); font-size: 12.5px; color: var(--uw-muted); border-top: 1px solid var(--uw-border-soft); }

/* collapsed (desktop) */
@media (min-width: 1024px) {
  .uw-shell.is-collapsed .uw-sidebar { width: var(--uw-sidebar-rail); }
  .uw-shell.is-collapsed .uw-main { margin-left: var(--uw-sidebar-rail); }
  .uw-shell.is-collapsed .uw-sidebar__brand { padding: 0; justify-content: center; }
  .uw-shell.is-collapsed .uw-sidebar__logo { display: none; }
  .uw-shell.is-collapsed .uw-sidebar__mark { display: inline-block; }
  .uw-shell.is-collapsed .uw-nav { padding: 16px 12px; }
  .uw-shell.is-collapsed .uw-nav__link { justify-content: center; padding: 10px 0; }
  .uw-shell.is-collapsed .uw-nav__text { display: none; }
  .uw-shell.is-collapsed .uw-sidebar__foot .uw-i { transform: rotate(180deg); }
}
/* tablet: icon rail, hamburger opens the full drawer over the page */
@media (max-width: 1023.98px) {
  .uw-sidebar { width: var(--uw-sidebar-rail); }
  .uw-sidebar__brand { padding: 0; justify-content: center; }
  .uw-sidebar__logo { display: none; }
  .uw-sidebar__mark { display: inline-block; }
  .uw-nav__link { justify-content: center; padding: 10px 0; }
  .uw-nav__text { display: none; }
  .uw-sidebar__foot { display: none; }
  .uw-main { margin-left: var(--uw-sidebar-rail); }
  .uw-topbar .uw-topbar__menu { display: inline-flex; }
  .uw-sidebar.is-open { width: var(--uw-sidebar-w); box-shadow: var(--uw-shadow-pop); }
  .uw-sidebar.is-open .uw-sidebar__brand { padding: 0 20px; justify-content: space-between; }
  .uw-sidebar.is-open .uw-sidebar__logo { display: inline-block; }
  .uw-sidebar.is-open .uw-sidebar__mark { display: none; }
  .uw-sidebar.is-open .uw-sidebar__close { display: inline-flex; }
  .uw-sidebar.is-open .uw-nav__link { justify-content: flex-start; padding: 10px 12px; }
  .uw-sidebar.is-open .uw-nav__text { display: inline; }
  .uw-sidebar.is-open + .uw-sidebar__backdrop, .uw-sidebar__backdrop.is-open { display: block; }
}
/* phone: off-canvas drawer */
@media (max-width: 767.98px) {
  :root { --uw-gutter: 16px; }
  .uw-sidebar { width: var(--uw-sidebar-w); transform: translateX(-100%); }
  .uw-sidebar.is-open { transform: none; }
  .uw-sidebar__brand { padding: 0 20px; justify-content: space-between; }
  .uw-sidebar__logo { display: inline-block; }
  .uw-sidebar__mark { display: none; }
  .uw-sidebar .uw-sidebar__close { display: inline-flex; }
  .uw-nav__link { justify-content: flex-start; padding: 10px 12px; }
  .uw-nav__text { display: inline; }
  .uw-main { margin-left: 0; }
  .uw-topbar { gap: 8px; }
  .uw-topbar__title { font-size: 18px; }
  .uw-usermenu__name { display: none; }
  .uw-usermenu__btn { padding: 0 6px 0 4px; }
}
body.uw-nav-open { overflow: hidden; }

/* ---------- page head + cards ---------- */
.uw-page__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.uw-page__title { margin: 0; font-size: 26px; font-weight: 800; }
.uw-page__sub { margin: 2px 0 0; color: var(--uw-muted); font-size: 13px; }
.uw-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.uw-card {
  position: relative;
  background: var(--uw-card);
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  box-shadow: var(--uw-shadow);
  margin-bottom: 24px;
}
.uw-card--bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--uw-gradient); border-radius: var(--uw-radius-lg) var(--uw-radius-lg) 0 0; }
.uw-card__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px; border-bottom: 1px solid var(--uw-border);
}
.uw-card__title { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.uw-card__title .uw-i { color: var(--uw-blue-text); }
.uw-card__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.uw-card__body { position: relative; padding: 24px; }
.uw-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--uw-border);
  background: var(--uw-card); border-radius: 0 0 var(--uw-radius-lg) var(--uw-radius-lg);
}
.uw-card__foot--sticky { position: sticky; bottom: 0; z-index: 5; }
@media (max-width: 767.98px) {
  .uw-card__head, .uw-card__body, .uw-card__foot { padding-left: 16px; padding-right: 16px; }
  .uw-card__body { padding-top: 16px; padding-bottom: 16px; }
}
.uw-section-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--uw-muted); margin: 0 0 12px; }

/* ---------- metric cards ---------- */
.uw-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.uw-metric {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 24px; background: var(--uw-card); border: 1px solid var(--uw-border); border-radius: var(--uw-radius-lg); box-shadow: var(--uw-shadow);
}
.uw-metric__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--uw-blue-soft); color: var(--uw-blue-text); flex: 0 0 auto; }
.uw-metric__body { flex: 1 1 auto; min-width: 0; }
.uw-metric__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--uw-muted); margin-bottom: 4px; }
.uw-metric__value { font-size: 28px; font-weight: 800; color: var(--uw-text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.uw-metric__value a { color: inherit; }
.uw-metric__hint { font-size: 12.5px; color: var(--uw-muted); margin-top: 6px; }
.uw-metric__tools { flex: 0 0 auto; }

/* ---------- buttons (one system; the controllers emit .btn classes too) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--uw-radius); border: 1px solid transparent;
  font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none;
  background: var(--uw-raised); color: var(--uw-text);
  cursor: pointer; user-select: none;
  transition: background var(--uw-motion) ease-out, border-color var(--uw-motion) ease-out, color var(--uw-motion) ease-out, transform 80ms ease-out, box-shadow var(--uw-motion) ease-out;
}
.btn:hover { text-decoration: none; color: var(--uw-text-strong); background: #16213A; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { box-shadow: var(--uw-ring); }
.btn:disabled, .btn.disabled { opacity: .5; pointer-events: none; }
.btn .uw-i { width: 18px; height: 18px; }
.btn-primary, .btn-brand { background: var(--uw-blue); border-color: var(--uw-blue); color: #fff; }
.btn-primary:hover, .btn-brand:hover { background: var(--uw-blue-hover); border-color: var(--uw-blue-hover); color: #fff; }
.btn-secondary, .btn-default, .btn-light, .btn-outline { background: transparent; border-color: var(--uw-border); color: var(--uw-text); }
.btn-secondary:hover, .btn-default:hover, .btn-light:hover, .btn-outline:hover { background: var(--uw-raised); border-color: #33425C; color: var(--uw-text-strong); }
.btn-danger { background: var(--uw-red); border-color: var(--uw-red); color: #fff; }
.btn-danger:hover { background: var(--uw-red-hover); border-color: var(--uw-red-hover); color: #fff; }
.btn-success { background: var(--uw-green); border-color: var(--uw-green); color: #052E16; }
.btn-success:hover { background: #16A34A; border-color: #16A34A; color: #fff; }
.btn-ghost, .btn-link, .btn-clean { background: transparent; border-color: transparent; color: var(--uw-blue-text); padding: 0 10px; }
.btn-ghost:hover, .btn-link:hover, .btn-clean:hover { background: var(--uw-blue-soft); color: var(--uw-text-strong); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 36px; min-height: 36px; padding: 0; border-radius: var(--uw-radius); color: var(--uw-muted); }
.btn-icon:hover { color: var(--uw-text-strong); background: var(--uw-raised); }
.btn-icon-sm { }
.btn-wide { min-width: 160px; }
.uw-link-btn { background: none; border: 0; padding: 0; color: var(--uw-blue-text); font-weight: 700; font-size: 13px; cursor: pointer; }
.uw-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* busy state the page scripts already toggle (Metronic's kt-spinner class names kept as hooks) */
.kt-spinner { position: relative; pointer-events: none; }
.btn.kt-spinner { padding-right: 40px !important; }
.btn.kt-spinner.kt-spinner--right::after, .kt-spinner--input::before {
  content: ""; position: absolute; top: 50%; right: 14px; width: 16px; height: 16px; margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: currentColor; border-radius: 50%;
  animation: uw-spin .7s linear infinite;
}
.kt-spinner--input { display: inline-block; width: 16px; height: 16px; position: relative; vertical-align: middle; margin-right: 6px; }
.kt-spinner--input::before { right: auto; left: 0; margin-top: -8px; }
@keyframes uw-spin { to { transform: rotate(360deg); } }
.spinner-border {
  display: inline-block; width: 28px; height: 28px; vertical-align: middle;
  border: 3px solid rgba(47, 140, 255, .25); border-top-color: var(--uw-blue); border-radius: 50%;
  animation: uw-spin .7s linear infinite;
}
.tr-spinner { width: 24px; height: 24px; }
#spinner_div { position: fixed; top: calc(var(--uw-topbar-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 1060; }

/* loader pill used by the page scripts (KTDialog shim in uw-admin.js) */
.uw-loader {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%) translateY(-8px); z-index: 1080;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--uw-panel); border: 1px solid var(--uw-border); color: var(--uw-text); font-weight: 600; font-size: 13px;
  box-shadow: var(--uw-shadow-pop); opacity: 0; visibility: hidden;
  transition: opacity var(--uw-motion) ease-out, transform var(--uw-motion) ease-out, visibility var(--uw-motion);
}
.uw-loader.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.uw-loader .spinner-border { width: 16px; height: 16px; border-width: 2px; }

/* ---------- pills / badges / status ---------- */
.uw-pill, .badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  background: var(--uw-raised); color: var(--uw-text); border: 1px solid var(--uw-border);
}
.uw-pill--green, .badge-success { background: var(--uw-green-soft); color: var(--uw-green-text); border-color: rgba(34, 197, 94, .3); }
.uw-pill--red, .badge-danger { background: var(--uw-red-soft); color: var(--uw-red-text); border-color: rgba(239, 68, 68, .3); }
.uw-pill--amber, .badge-warning { background: var(--uw-amber-soft); color: var(--uw-amber-text); border-color: rgba(245, 158, 11, .3); }
.uw-pill--blue, .badge-primary { background: var(--uw-blue-soft); color: var(--uw-blue-text); border-color: rgba(47, 140, 255, .3); }
.uw-pill--muted { color: var(--uw-muted); }
.owner { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--uw-green-soft); color: var(--uw-green-text); border: 1px solid rgba(34, 197, 94, .3); }
.permanent-delete-badge, .permanent-delete-no { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.permanent-delete-badge { background: var(--uw-red-soft); color: var(--uw-red-text); border: 1px solid rgba(239, 68, 68, .3); }
.permanent-delete-no { background: var(--uw-raised); color: var(--uw-muted); border: 1px solid var(--uw-border); }

/* Enable / Disable status group the customers and users tables render: shown as one segmented pill */
#add_settings { display: inline-block; }
#add_settings .btn-group { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--uw-border); border-radius: 999px; background: var(--uw-raised); }
#add_settings .btn { min-height: 24px; height: 24px; padding: 0 7px; border-radius: 999px; border: 0; font-size: 10.5px; font-weight: 700; background: transparent; color: var(--uw-muted); margin: 0; transform: none; }
#add_settings .btn:hover { color: var(--uw-text-strong); background: #16213A; }
#add_settings .btn-primary { background: var(--uw-green-soft); color: var(--uw-green-text); }
#add_settings .btn-danger { background: var(--uw-red-soft); color: var(--uw-red-text); }

/* ---------- forms ---------- */
.form-group, .uw-field { margin-bottom: 18px; min-width: 0; }
.form-group:last-child { margin-bottom: 0; }
label, .form-control-label, .col-form-label, .form-label, .field-label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--uw-muted);
}
label .uw-link-btn, label .btn-allocate-storage, label .btn-copy-user-id { text-transform: none; letter-spacing: 0; margin-left: 8px; }
.form-control, .uw-input, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"] {
  display: block; width: 100%; min-height: 44px; padding: 10px 14px;
  background: var(--uw-raised); color: var(--uw-text-strong);
  border: 1px solid var(--uw-border); border-radius: var(--uw-radius);
  font-size: 14px; line-height: 1.4;
  transition: border-color var(--uw-motion) ease-out, box-shadow var(--uw-motion) ease-out, background var(--uw-motion) ease-out;
  -webkit-appearance: none; appearance: none;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #6B7280; opacity: 1; }
.form-control:hover, select:hover, textarea:hover { border-color: #33425C; }
.form-control:focus, select:focus, textarea:focus, input:focus { border-color: var(--uw-blue); box-shadow: var(--uw-ring); outline: none; }
.form-control:disabled, .form-control[readonly], select:disabled, input:disabled { opacity: .7; background: #0B1220; cursor: default; }
.form-control-sm { min-height: 40px; padding: 8px 12px; }
.form-control.is-invalid, .form-control.error, input.error, select.error, textarea.error { border-color: var(--uw-red); }
.form-control.is-invalid:focus, input.error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .3); }
textarea.form-control, textarea { min-height: 110px; resize: vertical; }
select.form-control, select:not([multiple]) {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
select option { background: var(--uw-panel); color: var(--uw-text); }
select option:disabled { color: var(--uw-muted); }
input[type="file"] { min-height: 44px; padding: 8px 12px; color: var(--uw-muted); }
input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--uw-border);
  background: var(--uw-card); color: var(--uw-text); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--uw-text-strong); -webkit-box-shadow: 0 0 0 1000px var(--uw-raised) inset; transition: background-color 9999s ease-out;
}
.form-text, .uw-help { display: block; margin-top: 6px; font-size: 12.5px; color: var(--uw-muted); }
.form-text.text-danger { color: var(--uw-red-text) !important; }
label.error, .error-text { display: block; margin: 6px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--uw-red-text); }
.error { color: var(--uw-red-text); }
.uw-required { color: var(--uw-blue-text); font-weight: 800; }

.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-append { display: flex; }
.input-group-text, .uw-input-addon {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 12px;
  background: var(--uw-panel); border: 1px solid var(--uw-border); border-left: 0; border-radius: 0 var(--uw-radius) var(--uw-radius) 0;
  color: var(--uw-muted); cursor: pointer; transition: background var(--uw-motion) ease-out, color var(--uw-motion) ease-out;
}
.input-group-text:hover { background: var(--uw-raised); color: var(--uw-text-strong); }
.input-group-text svg path[stroke], .input-group-text svg path[fill] { stroke: currentColor; }
.input-group-text svg path[fill] { fill: currentColor; stroke: none; }

/* password field with the eye toggle */
.uw-password { position: relative; }
.uw-password .form-control { padding-right: 48px; }
.uw-password__toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: var(--uw-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.uw-password__toggle:hover { color: var(--uw-text-strong); background: var(--uw-blue-soft); }
.uw-password__toggle .uw-i--off { display: none; }
.uw-password__toggle.is-visible .uw-i--on { display: none; }
.uw-password__toggle.is-visible .uw-i--off { display: block; }

/* two-column form grid (one column on phones); .uw-form-grid > children are the fields */
.uw-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.uw-form-grid > * { min-width: 0; }
.uw-form-grid .uw-field--full, .uw-form-grid .uw-form-row { grid-column: 1 / -1; }
.uw-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (max-width: 767.98px) { .uw-form-grid { grid-template-columns: minmax(0, 1fr); } }
.uw-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }

/* checkbox / radio */
.uw-check, .uw-radio, .kt-checkbox, .kt-radio {
  display: inline-flex; align-items: flex-start; gap: 10px;
  margin: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--uw-text); line-height: 1.4;
}
.uw-check input, .uw-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.uw-check__box, .uw-radio__box {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  background: var(--uw-raised); border: 1px solid var(--uw-border); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--uw-motion) ease-out, border-color var(--uw-motion) ease-out;
}
.uw-radio__box { border-radius: 50%; }
.uw-check__box::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.uw-radio__box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0; }
.uw-check input:checked + .uw-check__box, .uw-radio input:checked + .uw-radio__box { background: var(--uw-blue); border-color: var(--uw-blue); }
.uw-check input:checked + .uw-check__box::after, .uw-radio input:checked + .uw-radio__box::after { opacity: 1; }
.uw-check input:focus-visible + .uw-check__box, .uw-radio input:focus-visible + .uw-radio__box { box-shadow: var(--uw-ring); }
.uw-check:hover .uw-check__box, .uw-radio:hover .uw-radio__box { border-color: #33425C; }
.uw-radio-group { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 8px 0 4px; }

/* switch: .switch > input + .slider (the template list, template editor and profile use it) */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0; vertical-align: middle; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.slider { position: absolute; inset: 0; background: #2A3850; border-radius: 999px; cursor: pointer; transition: background var(--uw-motion) ease-out; }
.slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--uw-motion) ease-out; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
input:checked + .slider { background: var(--uw-blue); }
input:checked + .slider::before { transform: translateX(20px); }
input:focus-visible + .slider { box-shadow: var(--uw-ring); }
.uw-switch-row { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--uw-text); cursor: pointer; }
.uw-switch-row:has(input:not(:checked)) .uw-switch-text::after { content: attr(data-off); color: var(--uw-muted); }
.uw-switch-row:has(input:checked) .uw-switch-text::after { content: attr(data-on); color: var(--uw-green-text); }

/* ---------- tables + DataTables ---------- */
.uw-table-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 0 24px; }
@media (max-width: 767.98px) { .uw-table-scroll { margin: 0 -16px; padding: 0 16px; } }
.uw-table-hint { display: none; margin-top: 10px; font-size: 12.5px; color: var(--uw-muted); align-items: center; gap: 6px; }
.uw-table-scroll.is-scrollable + .uw-table-hint, .uw-dt-bottom .uw-table-hint.is-visible { display: flex; }
table.table, table.dataTable { width: 100% !important; border-collapse: collapse; border-spacing: 0; margin: 0; font-size: 13.5px; }
table.table th, table.dataTable th {
  padding: 8px 8px; text-align: left; white-space: normal; vertical-align: middle; line-height: 1.25;
  background: var(--uw-panel); color: var(--uw-muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--uw-border);
}
table.table th:first-child { border-radius: var(--uw-radius) 0 0 var(--uw-radius); }
table.table th:last-child { border-radius: 0 var(--uw-radius) var(--uw-radius) 0; }
table.table td, table.dataTable td {
  padding: 8px 8px; vertical-align: middle; color: var(--uw-text); font-size: 13px;
  border-bottom: 1px solid var(--uw-border-soft); font-variant-numeric: tabular-nums;
}
/* column helpers (set through DataTables columnDefs in the page scripts): text columns may wrap so every column
   fits the card at >= 1600px; the scroll wrapper + hint only kick in when the table is truly wider than the card */
table.dataTable td.uw-cell-nowrap, table.dataTable td:last-child { white-space: nowrap; }
table.dataTable td.uw-cell-num { white-space: nowrap; }
table.dataTable td.uw-cell-num, table.dataTable th.uw-cell-num { text-align: right; }
table.dataTable td.uw-cell-truncate { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.dataTable td.uw-cell-truncate a { display: inline; }
@media (min-width: 1900px) { table.dataTable td.uw-cell-truncate { max-width: 280px; } }
table.dataTable thead th { white-space: normal; }
table.table tbody tr { transition: background var(--uw-motion) ease-out; }
table.table tbody tr:hover { background: var(--uw-raised); }
table.table tbody tr:last-child td { border-bottom: 0; }
table.table td a { font-weight: 600; }
table.table td.text-center { text-align: center; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { cursor: pointer; padding-right: 22px; position: relative; background-image: none; }
table.dataTable thead th.uw-cell-num.sorting, table.dataTable thead th.uw-cell-num.sorting_asc, table.dataTable thead th.uw-cell-num.sorting_desc { padding-left: 22px; padding-right: 8px; }
table.dataTable thead th.uw-cell-num.sorting::after, table.dataTable thead th.uw-cell-num.sorting_asc::after, table.dataTable thead th.uw-cell-num.sorting_desc::after { right: auto; left: 6px; }
table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; opacity: .35;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7 15 5 5 5-5'/><path d='m7 9 5-5 5 5'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7 15 5 5 5-5'/><path d='m7 9 5-5 5 5'/></svg>") center/contain no-repeat;
}
table.dataTable thead .sorting_asc::after { opacity: 1; color: var(--uw-blue-text);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7 15 5-5 5 5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7 15 5-5 5 5'/></svg>"); }
table.dataTable thead .sorting_desc::after { opacity: 1; color: var(--uw-blue-text);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7 9 5 5 5-5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7 9 5 5 5-5'/></svg>"); }
table.dataTable tbody td.dataTables_empty { text-align: center; padding: 40px 16px; color: var(--uw-muted); }

.dataTables_wrapper { position: relative; }
.uw-dt-top, .uw-dt-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.uw-dt-top { margin-bottom: 16px; }
.uw-dt-bottom { margin-top: 16px; }
.dataTables_length label, .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--uw-muted); }
.dataTables_length select { width: auto; min-height: 40px; padding: 6px 36px 6px 12px; display: inline-block; }
.dataTables_filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.dataTables_filter label { position: relative; }
.dataTables_filter label::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; background: var(--uw-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
}
.dataTables_filter input { width: 240px; max-width: 100%; min-height: 40px; padding-left: 38px; display: inline-block; }
.dataTables_filter .plan-filter-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.dataTables_filter .plan-filter-label::before { display: none; }
.dataTables_filter .plan-filter-label select { width: auto; min-height: 40px; padding: 6px 36px 6px 12px; display: inline-block; }
@media (max-width: 767.98px) {
  .uw-dt-top { flex-direction: column; align-items: stretch; }
  .dataTables_filter { justify-content: flex-start; }
  .dataTables_filter label { flex: 1 1 auto; }
  .dataTables_filter input { width: 100%; }
  .dataTables_filter .plan-filter-label select { flex: 1 1 auto; }
  .uw-dt-bottom { justify-content: center; }
}
.dataTables_info { font-size: 13px; color: var(--uw-muted); padding: 0; font-variant-numeric: tabular-nums; }
.dataTables_paginate { display: flex; align-items: center; }
.pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.page-item .page-link, .paginate_button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px;
  color: var(--uw-text); font-size: 13px; font-weight: 700; border: 1px solid transparent; background: transparent;
  transition: background var(--uw-motion) ease-out, color var(--uw-motion) ease-out;
}
.page-item .page-link:hover { background: var(--uw-raised); color: var(--uw-text-strong); text-decoration: none; }
.page-item.active .page-link { background: var(--uw-blue); color: #fff; }
.page-item.disabled .page-link { opacity: .4; pointer-events: none; }
.dataTables_processing, div.dataTables_processing {
  position: absolute; top: 72px; left: 50%; transform: translateX(-50%); z-index: 10;
  width: auto; height: auto; margin: 0; padding: 8px 16px;
  background: var(--uw-panel); border: 1px solid var(--uw-border); border-radius: 999px; box-shadow: var(--uw-shadow);
  color: var(--uw-text); font-size: 13px; font-weight: 600; text-align: center;
}
.dataTables_processing.card { background: var(--uw-panel); }
table.dataTable.no-footer { border-bottom: 0; }
/* the row-action menu (rendered by the controllers): "..." button + dark menu; while open, uw-admin.js pins the menu
   to the viewport (position: fixed) so the scroll wrapper cannot clip it */
.uw-table-scroll .btn-clean.btn-icon { width: 32px; min-height: 32px; border-radius: 999px; }
td .dropdown { display: inline-block; }
td .btn-clean.btn-icon .la-ellipsis-h { width: 20px; height: 20px; }

/* legacy icon classes the controllers still emit (line-awesome / flaticon) drawn as Lucide masks */
.la, [class^="flaticon2-"], [class*=" flaticon2-"] { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.la-ellipsis-h { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='1'/><circle cx='19' cy='12' r='1'/><circle cx='5' cy='12' r='1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='1'/><circle cx='19' cy='12' r='1'/><circle cx='5' cy='12' r='1'/></svg>"); }
.la-edit { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/><path d='m15 5 4 4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/><path d='m15 5 4 4'/></svg>"); }
.la-file { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><line x1='22' x2='2' y1='12' y2='12'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/><line x1='6' x2='6.01' y1='16' y2='16'/><line x1='10' x2='10.01' y1='16' y2='16'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><line x1='22' x2='2' y1='12' y2='12'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/><line x1='6' x2='6.01' y1='16' y2='16'/><line x1='10' x2='10.01' y1='16' y2='16'/></svg>"); }
.la-sign-out { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' x2='9' y1='12' y2='12'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' x2='9' y1='12' y2='12'/></svg>"); }
.la-trash { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/><path d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/><line x1='10' x2='10' y1='11' y2='17'/><line x1='14' x2='14' y1='11' y2='17'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/><path d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/><line x1='10' x2='10' y1='11' y2='17'/><line x1='14' x2='14' y1='11' y2='17'/></svg>"); }
.la-plus, .flaticon2-plus { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5v14'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5v14'/></svg>"); }
.flaticon2-line { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>"); }

/* ---------- dropdown menus (Bootstrap JS) ---------- */
.dropdown, .dropup { position: relative; }
.dropdown-toggle::after { display: none; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; z-index: 1035; display: none;
  min-width: 190px; padding: 6px; margin: 4px 0 0;
  background: var(--uw-card); border: 1px solid var(--uw-border); border-radius: 12px; box-shadow: var(--uw-shadow-pop);
  font-size: 14px; text-align: left; list-style: none;
}
.dropdown-menu.show { display: block; }
.dropdown-menu-right { right: 0; left: auto; }
.dropdown-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--uw-text); font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer;
  transition: background var(--uw-motion) ease-out, color var(--uw-motion) ease-out;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--uw-raised); color: var(--uw-text-strong); text-decoration: none; }
.dropdown-item.active { background: var(--uw-blue-soft); color: var(--uw-text-strong); }
.dropdown-item .la { color: var(--uw-muted); }
.dropdown-item.delete-user, .dropdown-item.btn-delete-email-template { color: var(--uw-red-text); }
.dropdown-item.delete-user .la { color: var(--uw-red-text); }
.dropdown-divider { height: 1px; margin: 6px 0; background: var(--uw-border); }
.uw-menu-list { margin: 0; padding: 0; list-style: none; }

/* ---------- modals (Bootstrap JS) ---------- */
.fade { transition: opacity var(--uw-motion) linear; }
.fade:not(.show) { opacity: 0; }
.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 1050; display: none; overflow-x: hidden; overflow-y: auto; outline: 0; padding: 16px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1045; background: rgba(5, 11, 20, .75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 1; }
.modal-dialog { position: relative; width: auto; max-width: 440px; margin: 24px auto; pointer-events: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 48px); }
.modal-dialog-centered::before { content: ""; display: block; height: calc(100vh - 48px); height: min-content; }
.modal-lg { max-width: 640px; }
.modal.fade .modal-dialog { transition: transform var(--uw-motion-slow) ease-out, opacity var(--uw-motion-slow) ease-out; transform: translateY(-8px) scale(.98); }
.modal.show .modal-dialog { transform: none; }
.modal-content {
  position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto;
  background: var(--uw-card); border: 1px solid var(--uw-border); border-radius: var(--uw-radius-md); box-shadow: var(--uw-shadow-pop); outline: 0;
  overflow: hidden;
}
.modal-content::before { content: ""; height: 4px; background: var(--uw-gradient); flex: 0 0 auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--uw-border); }
.modal-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--uw-text-strong); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.modal-title a, .modal-title .uw-link-btn { font-size: 13px; font-weight: 700; }
.modal-header .close {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--uw-muted); font-size: 22px; line-height: 1; opacity: 1;
  transition: background var(--uw-motion) ease-out, color var(--uw-motion) ease-out;
}
.modal-header .close:hover { background: var(--uw-raised); color: var(--uw-text-strong); }
.modal-header .close svg path { stroke: currentColor; }
.modal-body { position: relative; flex: 1 1 auto; padding: 24px; max-height: calc(100vh - 220px); overflow-y: auto; }
.modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--uw-border); background: var(--uw-card); }
@media (max-width: 767.98px) {
  .modal { padding: 8px; }
  .modal-dialog { margin: 8px auto; max-width: none; }
  .modal-dialog-centered { min-height: calc(100% - 16px); }
  .modal-header, .modal-footer { padding: 14px 16px; }
  .modal-body { padding: 16px; max-height: calc(100vh - 170px); }
  .modal-footer .btn { flex: 1 1 auto; }
}

/* collapse (Bootstrap JS, used by the storage accordion) */
.collapse:not(.show) { display: none; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height var(--uw-motion-slow) ease; }

/* ---------- alerts ---------- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--uw-radius); border: 1px solid var(--uw-border); background: var(--uw-raised); color: var(--uw-text); font-weight: 600; font-size: 13.5px; }
.alert-danger { background: var(--uw-red-soft); border-color: rgba(239, 68, 68, .35); color: #FCA5A5; }
.alert-success { background: var(--uw-green-soft); border-color: rgba(34, 197, 94, .35); color: #86EFAC; }
.alert-info { background: var(--uw-blue-soft); border-color: rgba(47, 140, 255, .35); color: var(--uw-blue-text); }
.alert p:last-child { margin-bottom: 0; }
.uw-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--uw-radius); background: var(--uw-blue-soft); border: 1px solid rgba(47, 140, 255, .3); color: var(--uw-text); font-size: 13.5px; }
.uw-note .uw-i { color: var(--uw-blue-text); margin-top: 1px; }

/* ---------- progress / storage breakdown (modal + accordion, HTML partly injected by JS) ---------- */
.progress { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: var(--uw-raised); border: 1px solid var(--uw-border-soft); margin: 10px 0 4px; }
.progress-lg { height: 16px; }
.progress-bar { display: flex; align-items: center; justify-content: center; background: var(--uw-blue); background-image: var(--uw-gradient); transition: width .3s ease; color: #fff; font-size: 11px; font-weight: 700; }
.progress-bar.bg-warning { background: var(--uw-amber); }
.storage-title { font-size: 15px; font-weight: 700; color: var(--uw-text-strong); }
.storage-detail { font-size: 15px; font-weight: 700; color: var(--uw-text-strong); font-variant-numeric: tabular-nums; }
.storage-sub-title { font-size: 14px; font-weight: 600; color: var(--uw-text); display: inline-flex; align-items: center; gap: 8px; }
.storage-sub-detail { font-size: 13.5px; font-weight: 600; color: var(--uw-text); font-variant-numeric: tabular-nums; }
.storage-sub-title .circle { width: 8px; height: 8px; border-radius: 50%; background: var(--uw-blue); display: inline-block; }
#user_list { max-height: 60vh; overflow-y: auto; }
#user_list ul { margin: 0; padding: 0; list-style: none; }
#user_list li.user-storage-detail { padding: 12px 4px; color: var(--uw-muted); }
.accordion .card { background: var(--uw-raised); border: 1px solid var(--uw-border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.accordion .card-header { padding: 12px 14px; cursor: pointer; background: transparent; transition: background var(--uw-motion) ease-out; }
.accordion .card-header:hover { background: #16213A; }
.accordion .card-header .user-name { font-weight: 700; color: var(--uw-text-strong); }
.accordion .card-header .storage-count { font-weight: 600; color: var(--uw-text); font-variant-numeric: tabular-nums; }
.accordion .card-body { padding: 4px 14px 14px; border-top: 1px solid var(--uw-border); }
.btn-show-complete-detail { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--uw-border); background: var(--uw-card); color: var(--uw-blue-text); padding: 0; }
.btn-show-complete-detail .minus { display: none; }
.btn-show-complete-detail .add, .btn-show-complete-detail .minus { display: inline-flex; }
.btn-show-complete-detail .minus { display: none; }
.btn-show-complete-detail [class^="flaticon2-"] { width: 14px; height: 14px; vertical-align: 0; }

/* ---------- empty + skeleton ---------- */
.uw-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 16px; text-align: center; color: var(--uw-muted); }
.uw-empty .uw-i { width: 36px; height: 36px; color: var(--uw-blue-text); }
.uw-empty strong { color: var(--uw-text-strong); font-size: 15px; }
.uw-skeleton { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--uw-raised) 25%, #16213A 50%, var(--uw-raised) 75%); background-size: 200% 100%; animation: uw-shimmer 1.4s ease-in-out infinite; }
@keyframes uw-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- login ---------- */
.uw-login-body { min-height: 100vh; background: var(--uw-bg) radial-gradient(1200px 600px at 50% -10%, rgba(47, 140, 255, .14), transparent 60%); }
.uw-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.uw-login__card { width: 100%; max-width: 420px; position: relative; overflow: hidden; background: var(--uw-card); border: 1px solid var(--uw-border); border-radius: var(--uw-radius-lg); box-shadow: var(--uw-shadow-pop); padding: 36px 32px 32px; }
.uw-login__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--uw-gradient); }
.uw-login__logo { display: block; margin: 0 auto 22px; height: 30px; width: auto; }
.uw-login__title { margin: 0 0 4px; font-size: 22px; font-weight: 800; text-align: center; }
.uw-login__sub { margin: 0 0 24px; text-align: center; color: var(--uw-muted); font-size: 13.5px; }
.uw-login__card .form-group { margin-bottom: 16px; }
.uw-login__extra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.uw-login__card .btn-block { width: 100%; }
.uw-login__foot { margin-top: 20px; font-size: 12.5px; color: var(--uw-muted); text-align: center; }
.uw-login__otp { margin: 0 0 16px; padding: 14px; border: 1px dashed var(--uw-border); border-radius: var(--uw-radius); background: var(--uw-raised); }
.uw-login__otp .uw-section-title { margin-bottom: 10px; }
.uw-login__otp .btn { width: 100%; margin-bottom: 12px; }
.uw-login__otp .form-group:last-child { margin-bottom: 0; }
#otp { letter-spacing: .2em; font-weight: 700; font-size: 16px; }
#otp::placeholder { letter-spacing: 0; font-weight: 400; font-size: 14px; }
@media (max-width: 767.98px) { .uw-login__card { padding: 28px 20px 24px; } }

/* ---------- Select2 (4.0.8) ---------- */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single { height: 44px; background: var(--uw-raised); border: 1px solid var(--uw-border); border-radius: var(--uw-radius); transition: border-color var(--uw-motion) ease-out, box-shadow var(--uw-motion) ease-out; }
.select2-container--default .select2-selection--single:hover { border-color: #33425C; }
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--uw-blue); box-shadow: var(--uw-ring); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 14px; padding-right: 40px; color: var(--uw-text-strong); font-size: 14px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #6B7280; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; width: 36px; right: 2px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--uw-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat; }
.select2-container--default.select2-container--disabled .select2-selection--single { background: #0B1220; opacity: .7; }
.select2-dropdown { background: var(--uw-panel); border: 1px solid var(--uw-border); border-radius: 12px; box-shadow: var(--uw-shadow-pop); overflow: hidden; z-index: 1060; }
.select2-container--open .select2-dropdown--below { margin-top: 4px; }
.select2-container--open .select2-dropdown--above { margin-top: -4px; }
.select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field { min-height: 40px; padding: 8px 12px; background: var(--uw-raised); border: 1px solid var(--uw-border); border-radius: 8px; color: var(--uw-text-strong); }
.select2-results { padding: 4px; }
.select2-results__option { padding: 9px 12px; border-radius: 8px; color: var(--uw-text); font-size: 14px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--uw-blue-soft); color: var(--uw-text-strong); }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--uw-raised); }
.select2-container--default .select2-results__option[aria-disabled="true"] { color: var(--uw-muted); }
.select2-results__message { color: var(--uw-muted); }

/* ---------- bootstrap-select 1.12 (template editor field picker) ---------- */
.bootstrap-select { width: 100% !important; }
.bootstrap-select > .dropdown-toggle { width: 100%; justify-content: space-between; background: var(--uw-raised); border-color: var(--uw-border); color: var(--uw-text-strong); font-weight: 600; padding: 0 14px; }
.bootstrap-select > .dropdown-toggle.bs-placeholder { color: #6B7280; }
.bootstrap-select > .dropdown-toggle:hover { border-color: #33425C; background: var(--uw-raised); }
.bootstrap-select > .dropdown-toggle::after { display: inline-block; content: ""; width: 18px; height: 18px; background: var(--uw-muted); border: 0; margin: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat; }
.bootstrap-select .filter-option { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.bootstrap-select .bs-caret { display: none; }
.bootstrap-select .dropdown-menu { width: 100%; max-height: 320px; overflow: auto; }
.bootstrap-select .dropdown-menu.inner { position: static; display: block; border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.bootstrap-select .dropdown-menu li { list-style: none; }
.bootstrap-select .dropdown-menu li a { display: flex; align-items: center; padding: 9px 12px; border-radius: 8px; color: var(--uw-text); font-weight: 600; white-space: nowrap; }
.bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li.active a, .bootstrap-select .dropdown-menu li.selected a { background: var(--uw-raised); color: var(--uw-text-strong); text-decoration: none; }
.bootstrap-select .dropdown-menu li a .check-mark { display: none; }
.bootstrap-select .dropdown-menu li.no-results { padding: 9px 12px; color: var(--uw-muted); background: transparent; }
.bootstrap-select .bs-searchbox { padding: 4px 4px 8px; }
.bootstrap-select .bs-searchbox .form-control { min-height: 40px; }
.bootstrap-select.open > .dropdown-toggle, .bootstrap-select.show > .dropdown-toggle { border-color: var(--uw-blue); box-shadow: var(--uw-ring); }

/* ---------- toastr 2.1 ---------- */
#toast-container { top: 16px; right: 16px; }
#toast-container > div {
  width: 340px; max-width: calc(100vw - 32px); padding: 14px 16px 14px 48px; margin: 0 0 10px;
  background-color: var(--uw-card); color: var(--uw-text); border: 1px solid var(--uw-border); border-radius: 12px;
  box-shadow: var(--uw-shadow-pop); opacity: 1; font-family: var(--uw-font); font-weight: 600; font-size: 13.5px;
  background-position: 16px center; background-size: 20px;
}
#toast-container > div:hover { box-shadow: var(--uw-shadow-pop); opacity: 1; }
#toast-container > .toast-success { border-left: 3px solid var(--uw-green); background-color: var(--uw-card); }
#toast-container > .toast-error { border-left: 3px solid var(--uw-red); background-color: var(--uw-card); }
#toast-container > .toast-info { border-left: 3px solid var(--uw-blue); background-color: var(--uw-card); }
#toast-container > .toast-warning { border-left: 3px solid var(--uw-amber); background-color: var(--uw-card); }
#toast-container .toast-title { color: var(--uw-text-strong); font-weight: 800; }
#toast-container .toast-close-button { color: var(--uw-muted); opacity: 1; text-shadow: none; font-weight: 400; top: -2px; right: -4px; }
#toast-container .toast-close-button:hover { color: var(--uw-text-strong); }
#toast-container .toast-progress { background: var(--uw-blue); opacity: .5; }
@media (max-width: 480px) { #toast-container { top: 8px; right: 8px; left: 8px; } #toast-container > div { width: 100%; } }

/* ---------- SweetAlert2 8 ---------- */
.swal2-container { font-family: var(--uw-font); z-index: 1070; }
.swal2-container.swal2-shown { background: rgba(5, 11, 20, .75) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.swal2-popup { width: 400px !important; max-width: calc(100vw - 32px); padding: 28px 24px 24px !important; background: var(--uw-card) !important; color: var(--uw-text); border: 1px solid var(--uw-border); border-radius: var(--uw-radius-md) !important; box-shadow: var(--uw-shadow-pop); font-family: var(--uw-font); }
.swal2-popup .swal2-title { color: var(--uw-text-strong); font-size: 20px; font-weight: 800; }
.swal2-popup .swal2-content { color: var(--uw-text); font-size: 14px; }
.swal2-popup .swal2-actions { margin-top: 20px; gap: 10px; }
.swal2-popup .swal2-actions .btn { margin: 0; }
.swal2-icon.swal2-error { border-color: var(--uw-red); }
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background: var(--uw-red); }
.swal2-icon.swal2-warning { border-color: var(--uw-amber); color: var(--uw-amber); }
.swal2-icon.swal2-success { border-color: var(--uw-green); }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background: var(--uw-green); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(34, 197, 94, .4); }
.swal2-icon.swal2-success .swal2-success-fix, .swal2-icon.swal2-success [class^="swal2-success-circular-line"] { background: var(--uw-card) !important; }

/* ---------- jquery-confirm 3.3 (deleted-customer history) ---------- */
.jconfirm { font-family: var(--uw-font); }
.jconfirm .jconfirm-bg { background: rgba(5, 11, 20, .75) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.jconfirm .jconfirm-box-container { width: 100% !important; max-width: 440px; margin: 0 auto !important; float: none !important; padding: 0 16px; }
.jconfirm .jconfirm-box { background: var(--uw-card) !important; color: var(--uw-text); border: 1px solid var(--uw-border); border-radius: var(--uw-radius-md) !important; box-shadow: var(--uw-shadow-pop) !important; padding: 24px !important; }
.jconfirm .jconfirm-box div.jconfirm-title-c { color: var(--uw-text-strong); font-weight: 800; font-size: 18px; padding-bottom: 8px; }
.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title { font-weight: 800; }
.jconfirm .jconfirm-box div.jconfirm-content-pane { margin-bottom: 20px; }
.jconfirm .jconfirm-box div.jconfirm-content { color: var(--uw-text); font-size: 14px; }
.jconfirm .jconfirm-box .jconfirm-buttons { float: none; display: flex; justify-content: flex-end; gap: 10px; padding: 0; }
.jconfirm .jconfirm-box .jconfirm-buttons button { margin: 0; text-transform: none; }
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default { background: transparent; border-color: var(--uw-border); color: var(--uw-text); }
.jconfirm .jconfirm-box .jconfirm-closeIcon { color: var(--uw-muted); top: 16px; right: 16px; }
.jconfirm .jconfirm-box .jconfirm-closeIcon:hover { color: var(--uw-text-strong); }

/* ---------- CKEditor 4 chrome (template editor) ---------- */
.cke_chrome { border: 1px solid var(--uw-border) !important; border-radius: 12px !important; box-shadow: none !important; overflow: hidden; background: var(--uw-card) !important; }
.cke_inner { background: var(--uw-card) !important; }
.cke_top { background: var(--uw-panel) !important; border-bottom: 1px solid var(--uw-border) !important; padding: 8px 10px 4px !important; box-shadow: none !important; }
.cke_bottom { background: var(--uw-panel) !important; border-top: 1px solid var(--uw-border) !important; box-shadow: none !important; }
.cke_toolgroup { background: var(--uw-raised) !important; border: 1px solid var(--uw-border) !important; border-radius: 8px !important; box-shadow: none !important; margin: 0 6px 6px 0 !important; }
.cke_toolgroup .cke_button { border-radius: 6px; }
.cke_button_icon { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
a.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active { background: #1E2A42 !important; border-color: transparent !important; box-shadow: none !important; }
a.cke_button_on { background: var(--uw-blue-soft) !important; border-color: transparent !important; box-shadow: none !important; }
.cke_button_label, .cke_combo_text { color: var(--uw-text) !important; text-shadow: none !important; }
a.cke_combo_button { background: var(--uw-raised) !important; border: 1px solid var(--uw-border) !important; border-radius: 8px !important; box-shadow: none !important; }
.cke_combo_open, .cke_combo_arrow { border-top-color: var(--uw-muted) !important; }
.cke_combo_arrow { border-top-color: var(--uw-muted) !important; }
.cke_toolbar_separator { background: var(--uw-border) !important; }
.cke_path, .cke_path_item, .cke_path_empty { color: var(--uw-muted) !important; text-shadow: none !important; }
a.cke_path_item:hover { background: var(--uw-raised) !important; color: var(--uw-text-strong) !important; box-shadow: none !important; }
.cke_resizer { border-color: transparent var(--uw-muted) transparent transparent !important; }
textarea.cke_source { background: var(--uw-bg) !important; color: var(--uw-text) !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.cke_wysiwyg_frame, .cke_wysiwyg_div { background: var(--uw-bg) !important; }
.cke_panel { background: var(--uw-panel) !important; border: 1px solid var(--uw-border) !important; border-radius: 10px !important; box-shadow: var(--uw-shadow-pop) !important; }
.cke_panel_grouptitle { background: var(--uw-raised) !important; color: var(--uw-muted) !important; border-bottom: 1px solid var(--uw-border) !important; }
.cke_panel_block { background: var(--uw-panel) !important; }
.cke_panel_listItem a { color: var(--uw-text) !important; }
.cke_panel_listItem a:hover, .cke_panel_listItem.cke_selected a { background: var(--uw-blue-soft) !important; }
.cke_dialog_background_cover { background: rgba(5, 11, 20, .75) !important; opacity: 1 !important; }
.cke_dialog .cke_dialog_body { background: var(--uw-card) !important; border: 1px solid var(--uw-border) !important; border-radius: var(--uw-radius-md) !important; box-shadow: var(--uw-shadow-pop) !important; color: var(--uw-text); }
.cke_dialog .cke_dialog_title { background: var(--uw-panel) !important; color: var(--uw-text-strong) !important; border-bottom: 1px solid var(--uw-border) !important; border-radius: var(--uw-radius-md) var(--uw-radius-md) 0 0; box-shadow: none !important; text-shadow: none !important; font-family: var(--uw-font) !important; font-weight: 700; }
.cke_dialog .cke_dialog_contents, .cke_dialog .cke_dialog_contents_body { background: var(--uw-card) !important; border-top: 0 !important; }
.cke_dialog .cke_dialog_footer { background: var(--uw-panel) !important; border-top: 1px solid var(--uw-border) !important; outline: none !important; border-radius: 0 0 var(--uw-radius-md) var(--uw-radius-md); }
.cke_dialog .cke_dialog_tabs { margin-left: 0 !important; }
.cke_dialog a.cke_dialog_tab { background: var(--uw-panel) !important; color: var(--uw-muted) !important; border: 1px solid var(--uw-border) !important; text-shadow: none !important; }
.cke_dialog a.cke_dialog_tab_selected { background: var(--uw-card) !important; color: var(--uw-text-strong) !important; }
.cke_dialog label, .cke_dialog .cke_dialog_ui_labeled_label, .cke_dialog .cke_dialog_ui_checkbox_input + label { color: var(--uw-text) !important; text-transform: none; letter-spacing: 0; font-size: 13px; }
.cke_dialog input.cke_dialog_ui_input_text, .cke_dialog input.cke_dialog_ui_input_password, .cke_dialog textarea.cke_dialog_ui_input_textarea, .cke_dialog select.cke_dialog_ui_input_select, .cke_dialog .cke_dialog_ui_input_select { background: var(--uw-raised) !important; color: var(--uw-text-strong) !important; border: 1px solid var(--uw-border) !important; border-radius: 8px !important; }
.cke_dialog a.cke_dialog_ui_button { background: transparent !important; border: 1px solid var(--uw-border) !important; border-radius: 8px !important; color: var(--uw-text) !important; text-shadow: none !important; box-shadow: none !important; }
.cke_dialog a.cke_dialog_ui_button_ok { background: var(--uw-blue) !important; border-color: var(--uw-blue) !important; color: #fff !important; }
.cke_dialog a.cke_dialog_ui_button span { color: inherit !important; }
.cke_dialog a.cke_dialog_close_button { opacity: .8; filter: invert(1); }
.cke_notifications_area .cke_notification { background: var(--uw-panel) !important; color: var(--uw-text) !important; border: 1px solid var(--uw-border) !important; border-radius: 10px !important; }

/* ---------- amCharts 3 (dashboard) ---------- */
.amcharts-chart-div { font-family: var(--uw-font) !important; }
.amcharts-chart-div a { display: none !important; }
#customers_chart { width: 100%; height: 420px; }
@media (max-width: 767.98px) { #customers_chart { height: 300px; } }

/* ---------- profile ---------- */
.uw-profile-pic { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.uw-profile-pic__preview { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 1px solid var(--uw-border); background: var(--uw-raised); flex: 0 0 auto; }
.uw-profile-pic__preview img { width: 100%; height: 100%; object-fit: cover; }
#blah_div { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 1px solid var(--uw-border); background: var(--uw-raised); flex: 0 0 auto; }
#blah { width: 100%; height: 100%; object-fit: cover; }
#qrCodeDiv img { background: #fff; padding: 10px; border-radius: 12px; }
#qrCodeDiv h5, #qrCodeDiv h6 { color: var(--uw-text); font-weight: 600; }
#qrCodeDiv h5 { font-size: 14px; word-break: break-all; }
#qrCodeDiv .field-label { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--uw-text); }

/* ---------- misc ---------- */
.uw-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--uw-border-soft); }
.uw-kv:last-child { border-bottom: 0; }
.uw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.uw-filters > * { min-width: 200px; flex: 0 1 auto; }
@media (max-width: 767.98px) { .uw-filters > * { flex: 1 1 100%; min-width: 0; } }
.uw-filters .select2-container { width: 220px !important; }
@media (max-width: 767.98px) { .uw-filters .select2-container { width: 100% !important; } }
.uw-filters select, .uw-filters .form-control { width: auto; min-width: 200px; display: inline-block; }
@media (max-width: 767.98px) { .uw-filters select, .uw-filters .form-control { width: 100%; } }
#link { color: var(--uw-muted); font-size: 13px; white-space: nowrap; }
.total_users { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--uw-text); margin: 0; }
.total_users span { color: var(--uw-text-strong); font-weight: 800; }
#email { text-transform: lowercase; }
.uw-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--uw-muted); font-size: 13px; }
.uw-back:hover { color: var(--uw-text-strong); text-decoration: none; }
.kt-selectpicker { }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}