.olt-monitoring-action { color: #075985; background: #e0f2fe; border-color: #bae6fd; }
.olt-monitoring-action:hover, .olt-monitoring-action:focus-visible { color: #0369a1; background: #d7efff; border-color: #7dd3fc; }

[data-olt-refresh-status] { display: none; align-items: center; gap: 8px; margin: 0 0 12px; color: #075985; font-size: 13px; }
[data-olt-refresh-status]:not(:empty) { display: flex; }
[data-olt-refresh-status] .olt-refresh-spinner { display: inline-block !important; box-sizing: border-box; width: 15px; height: 15px; flex: 0 0 15px; border: 2px solid #bae6fd; border-top-color: #0284c7; border-radius: 50% !important; animation: olt-refresh-spin .8s linear infinite; }
.is-olt-refreshing { cursor: wait; opacity: .72; }
@keyframes olt-refresh-spin { to { transform: rotate(360deg); } }

.olt-operation-terminal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .32); pointer-events: none; }
.olt-operation-terminal.is-open { display: flex; }
.olt-operation-terminal-window { width: min(680px, 100%); overflow: hidden; border: 1px solid #1f334d; border-radius: 8px; box-shadow: 0 24px 64px rgba(15, 23, 42, .28); background: #102033; color: #dbeafe; font-family: var(--font-mono); }
.olt-operation-terminal-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #29415f; background: #172b44; font-size: 12px; }
.olt-operation-terminal-head > span:first-child { color: #67e8f9; font-weight: 700; }
.olt-operation-terminal-head strong { color: #f8fafc; font-size: 12px; }
[data-olt-operation-terminal-state] { overflow: hidden; color: #93c5fd; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.olt-operation-terminal-body { max-height: min(42vh, 330px); min-height: 116px; overflow: auto; padding: 14px; color: #bbf7d0; font: 13px/1.65 var(--font-mono); }
.olt-operation-terminal-body > div { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .olt-operation-terminal { align-items: flex-end; padding: 12px; }
  .olt-operation-terminal-window { width: 100%; }
  .olt-operation-terminal-head { grid-template-columns: auto minmax(0, 1fr); }
  [data-olt-operation-terminal-state] { grid-column: 1 / -1; text-align: left; }
  .olt-operation-terminal-body { max-height: 38vh; }
}

@media (max-width: 760px) {
  .olt-row-actions { flex-wrap: wrap; }
}
/*
 * RadiusKu Unified UI CSS
 * ui-v1.6.415
 * Single source of truth for all visual styling.
 */

:root {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 78px;
  --topbar-h: 72px;
  --container-gap: 16px;
  --field-h: 40px;
  --btn-h: 40px;
  --z-sidebar: 40;
  --z-topbar: 30;
  --z-dropdown: 100;
  --z-modal: 1200;

  --bg: #f8fafc;
  --bg-soft: #f1f5f9;
  --bg-elev: #ffffff;
  --bg-elev-2: #ffffff;
  --bg-card: rgba(255,255,255,0.85);
  --surface: rgba(255,255,255,0.9);
  --surface-soft: rgba(241,245,249,0.7);
  --surface-strong: #ffffff;
  --border: rgba(15,23,42,0.08);
  --border-strong: rgba(15,23,42,0.14);
  --text: #0f172a;
  --text-soft: #475569;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --primary: #3b82f6;
  --primary-strong: #2563eb;
  --primary-soft: rgba(59,130,246,0.1);
  --primary-faint: rgba(59,130,246,0.05);
  --success: #10b981;
  --success-soft: rgba(16,185,129,0.1);

  --warn: #f59e0b;
  --warn-soft: rgba(245,158,11,0.1);
  --danger: #ef4444;
  --danger-soft: rgba(239,68,68,0.1);
  --info: #0ea5e9;
  --info-soft: rgba(14,165,233,0.1);
  --purple: #8b5cf6;
  --purple-soft: rgba(139,92,246,0.1);
  --chip-bg: rgba(15,23,42,0.05);
  --chip-text: #334155;
  --input-bg: #ffffff;
  --input-border: rgba(15,23,42,0.12);
  --input-focus: rgba(59,130,246,0.25);
  --table-head-bg: #f8fafc;
  --table-row-hover: rgba(59,130,246,0.04);
  --sidebar-bg: rgba(255,255,255,0.8);
  --topbar-bg: rgba(255,255,255,0.7);
  --dropdown-bg: rgba(255,255,255,0.95);
  --modal-bg: #ffffff;
  --modal-text: #0f172a;
  --modal-border: rgba(15,23,42,0.1);
  --shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.05);
  --shadow-soft: 0 10px 15px -3px rgba(0,0,0,0.04), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05);
  --ring: 0 0 0 3px var(--input-focus);

  --box-1: #e0f2fe;
  --box-2: #dcfce7;
  --box-3: #fef3c7;
  --box-4: #fee2e2;
  --box-5: #ede9fe;
  --box-6: #cffafe;
  --box-7: #fce7f3;
  --box-text: #0f172a;
}

html[data-theme="noc-dark"], body[data-theme="noc-dark"] {
  color-scheme: dark;
  --bg: #020617;
  --bg-soft: #0f172a;
  --bg-elev: #1e293b;
  --bg-elev-2: #1e293b;
  --bg-card: rgba(15,23,42,0.8);
  --surface: rgba(15,23,42,0.8);
  --surface-soft: rgba(30,41,59,0.5);
  --surface-strong: #1e293b;
  --border: rgba(148,163,184,0.1);
  --border-strong: rgba(148,163,184,0.2);
  --text: #f8fafc;
  --text-soft: #cbd5e1;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --primary: #38bdf8;
  --primary-strong: #0ea5e9;
  --primary-soft: rgba(56,189,248,0.15);
  --primary-faint: rgba(56,189,248,0.08);
  --success: #22c55e;
  --success-soft: rgba(34,197,94,0.15);
  --warn: #f59e0b;
  --warn-soft: rgba(245,158,11,0.15);
  --danger: #f43f5e;
  --danger-soft: rgba(244,63,94,0.15);
  --info: #38bdf8;
  --info-soft: rgba(56,189,248,0.15);
  --purple: #a78bfa;
  --purple-soft: rgba(167,139,250,0.15);
  --chip-bg: rgba(148,163,184,0.1);
  --chip-text: #f1f5f9;
  --input-bg: rgba(2,6,23,0.5);
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --input-focus: rgba(56,189,248,0.3);
  --table-head-bg: #0f172a;
  --table-row-hover: rgba(56,189,248,0.05);
  --sidebar-bg: rgba(2,6,23,0.8);
  --topbar-bg: rgba(2,6,23,0.6);
  --dropdown-bg: rgba(15,23,42,0.95);
  --modal-bg: #0f172a;
  --modal-text: #f8fafc;
  --modal-border: rgba(148,163,184,0.15);
  --shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  --shadow-soft: 0 20px 25px -5px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3);
  --box-1: rgba(14,165,233,.18);
  --box-2: rgba(34,197,94,.18);
  --box-3: rgba(245,158,11,.18);
  --box-4: rgba(251,113,133,.18);
  --box-5: rgba(167,139,250,.18);
  --box-6: rgba(45,212,191,.18);
  --box-7: rgba(244,114,182,.18);
  --box-text: #e5eefb;
}

html[data-theme="aurora-night"], body[data-theme="aurora-night"] {
  color-scheme: dark;
  --bg: #0d1024;
  --bg-soft: #101631;
  --bg-elev: #151c38;
  --bg-elev-2: #1a2444;
  --bg-card: rgba(21,28,56,.92);
  --surface: rgba(21,28,56,.88);
  --surface-soft: rgba(30,39,73,.72);
  --surface-strong: #1a2444;
  --border: rgba(196,181,253,.18);
  --border-strong: rgba(196,181,253,.32);
  --text: #f2f3ff;
  --text-soft: #d9ddff;
  --muted: #aab2d6;
  --muted-2: #7f8ab2;
  --primary: #a78bfa;
  --primary-strong: #8b5cf6;
  --primary-soft: rgba(167,139,250,.18);
  --primary-faint: rgba(167,139,250,.09);
  --success: #34d399;
  --success-soft: rgba(52,211,153,.16);
  --warn: #fbbf24;
  --warn-soft: rgba(251,191,36,.16);
  --danger: #fb7185;
  --danger-soft: rgba(251,113,133,.16);
  --info: #38bdf8;
  --info-soft: rgba(56,189,248,.16);
  --purple: #c084fc;
  --purple-soft: rgba(192,132,252,.16);
  --chip-bg: rgba(196,181,253,.14);
  --chip-text: #f2f3ff;
  --input-bg: rgba(10,15,34,.58);
  --input-border: rgba(196,181,253,.22);
  --input-focus: rgba(167,139,250,.38);
  --table-head-bg: rgba(30,39,73,.82);
  --table-row-hover: rgba(167,139,250,.08);
  --sidebar-bg: rgba(13,16,36,.96);
  --topbar-bg: rgba(13,16,36,.72);
  --dropdown-bg: rgba(21,28,56,.98);
  --modal-bg: #151c38;
  --modal-text: #f2f3ff;
  --modal-border: rgba(196,181,253,.20);
}

html[data-theme="ocean-contrast"], body[data-theme="ocean-contrast"] {
  color-scheme: dark;
  --bg: #06141d;
  --bg-soft: #09202c;
  --bg-elev: #0b2b3a;
  --bg-elev-2: #0d3548;
  --bg-card: rgba(11,43,58,.92);
  --surface: rgba(11,43,58,.88);
  --surface-soft: rgba(16,62,82,.70);
  --surface-strong: #0d3548;
    --rk-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --border-strong: rgba(125,211,252,.34);
  --text: #e8fbff;
  --text-soft: #c5edf7;
  --muted: #91bfd0;
  --muted-2: #6a98a9;
  --primary: #22d3ee;
  --primary-strong: #06b6d4;
  --primary-soft: rgba(34,211,238,.16);
  --primary-faint: rgba(34,211,238,.08);
  --success: #2dd4bf;
  --success-soft: rgba(45,212,191,.16);
  --warn: #facc15;
  --warn-soft: rgba(250,204,21,.16);
  --danger: #f87171;
  --danger-soft: rgba(248,113,113,.16);
  --info: #38bdf8;
  --info-soft: rgba(56,189,248,.16);
  --purple: #818cf8;
  --purple-soft: rgba(129,140,248,.16);
  --chip-bg: rgba(125,211,252,.14);
  --chip-text: #e8fbff;
  --input-bg: rgba(4,16,24,.54);
  --input-border: rgba(125,211,252,.25);
  --input-focus: rgba(34,211,238,.34);
  --table-head-bg: rgba(16,62,82,.82);
  --table-row-hover: rgba(34,211,238,.08);
  --sidebar-bg: rgba(6,20,29,.96);
  --topbar-bg: rgba(6,20,29,.72);
  --dropdown-bg: rgba(11,43,58,.98);
  --modal-bg: #0b2b3a;
  --modal-text: #e8fbff;
  --modal-border: rgba(125,211,252,.22);
}

html[data-theme="clean-light"], body[data-theme="clean-light"] {
  color-scheme: light;
  --bg: #eef3f9;
  --bg-soft: #f8fafc;
  --bg-elev: #ffffff;
  --bg-elev-2: #f1f5f9;
  --bg-card: rgba(255,255,255,.96);
  --surface: rgba(255,255,255,.94);
  --surface-soft: rgba(248,250,252,.92);
  --surface-strong: #ffffff;
  --border: rgba(15,23,42,.12);
  --border-strong: rgba(15,23,42,.22);
  --text: #0f172a;
  --text-soft: #334155;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: rgba(37,99,235,.12);
  --primary-faint: rgba(37,99,235,.07);
  --input-bg: #ffffff;
  --table-head-bg: #f1f5f9;
  --table-row-hover: rgba(37,99,235,.06);
  --sidebar-bg: rgba(255,255,255,.97);
  --topbar-bg: rgba(255,255,255,.88);
  --dropdown-bg: rgba(255,255,255,.98);
  --modal-bg: #ffffff;
  --modal-text: #0f172a;
}

html[data-theme="classic"], body[data-theme="classic"] {
  color-scheme: light;
  --bg: #f2efe8;
  --bg-soft: #faf8f3;
  --bg-elev: #fffdfa;
  --bg-elev-2: #f7f2e8;
  --bg-card: rgba(255,253,250,.96);
  --surface: rgba(255,253,250,.94);
  --surface-soft: rgba(247,242,232,.92);
  --surface-strong: #fffdfa;
  --border: rgba(92,64,41,.16);
  --border-strong: rgba(92,64,41,.28);
  --text: #211a14;
  --text-soft: #4b3b2f;
  --muted: #766555;
  --muted-2: #a39382;
  --primary: #0f766e;
  --primary-strong: #0f5f59;
  --primary-soft: rgba(15,118,110,.12);
  --primary-faint: rgba(15,118,110,.07);
  --success: #15803d;
  --success-soft: rgba(21,128,61,.12);
  --warn: #b45309;
  --warn-soft: rgba(180,83,9,.14);
  --danger: #b91c1c;
  --danger-soft: rgba(185,28,28,.12);
  --info: #0369a1;
  --info-soft: rgba(3,105,161,.12);
  --input-bg: #fffdfa;
  --input-border: rgba(92,64,41,.20);
  --table-head-bg: #f3eadc;
  --table-row-hover: rgba(15,118,110,.06);
  --sidebar-bg: rgba(255,253,250,.97);
  --topbar-bg: rgba(255,253,250,.88);
  --dropdown-bg: rgba(255,253,250,.98);
  --modal-bg: #fffdfa;
  --modal-text: #211a14;
  --modal-border: rgba(92,64,41,.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-shell="app"] { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, [disabled], .disabled, .is-disabled, .btn-disabled { cursor: not-allowed!important; opacity: .55!important; }
.customer-summary-link.is-account-disabled { cursor: pointer; }
.ppp-customer-form :is(input, select, textarea), #customer-onu-services-modal :is(input, select, textarea) { color: var(--text) !important; caret-color: var(--text) !important; }
.ppp-customer-form :is(input, textarea):not([readonly]), #customer-onu-services-modal :is(input, textarea):not([readonly]) { cursor: text; }
[hidden], .is-hidden, .rbac-hidden, .rbac-empty-section, .rbac-empty-actions { display: none!important; }
[data-shell="app"][data-rbac-state="pending"]:not([data-rbac-sidebar-ready]) .sidebar [data-rbac-module],
[data-shell="app"][data-rbac-state="pending"]:not([data-rbac-sidebar-ready]) .sidebar [data-rbac-action] {
  visibility: hidden;
}
strong { font-weight: 700; }
code, pre, .app-log-code { font-family: var(--font-mono); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 38%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 54%, transparent); border: 2px solid transparent; background-clip: padding-box; }

/* App shell */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  width: 100%;
  transition: grid-template-columns .18s ease;
}
html[data-sidebar="collapsed"] .app-shell,
.app-shell[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-collapsed-w) minmax(0,1fr); }
.sidebar {
  position: sticky;
  top: 0;
  z-index: var(--z-sidebar);
  height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.sidebar-head { padding: 14px 12px 10px; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark, .logo-mark, .profile-avatar, .user-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 14px;
  font-weight: 800;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}
.brand-mark { width: 38px; height: 38px; letter-spacing: -.03em; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-copy span { font-size: 11px; color: var(--muted); }
.sidebar-nav { padding: 10px; overflow: auto; flex: 1; }
.sidebar-section + .sidebar-section { margin-top: 14px; }
.sidebar-label { padding: 8px 10px 6px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nav-list { display: grid; gap: 4px; }
.nav-item, .nav-sub {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 8px 10px;
  color: var(--text-soft);
  background: transparent;
  text-align: left;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.nav-item:hover, .nav-sub:hover { background: var(--primary-faint); color: var(--text); border-color: var(--border); }
.nav-item.active, .nav-item[aria-expanded="true"], .nav-sub.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}
.nav-sub.active:hover, .nav-item.active:hover { color: #fff; }
.nav-icon { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 24px; height: 24px; overflow: visible; }
.nav-icon svg * { stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon .nav-icon-bg { fill: currentColor; opacity: .12; stroke: currentColor; }
.nav-item.active .nav-icon .nav-icon-bg, .nav-item[aria-expanded="true"] .nav-icon .nav-icon-bg { fill: rgba(255,255,255,.22); opacity: 1; }
.nav-text { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.nav-caret { margin-left: auto; color: currentColor; opacity: .75; transition: transform .15s ease; }
.nav-group.is-open > .nav-group-trigger .nav-caret { transform: rotate(180deg); }
.nav-submenu { display: none; padding: 4px 0 4px 38px; }
.nav-group.is-open > .nav-submenu { display: grid; gap: 3px; }
.nav-sub { min-height: 32px; padding: 7px 10px; font-size: 12px; border-radius: 11px; }
.nav-sub-danger { color: var(--danger); }
.sidebar-foot { padding: 10px; border-top: 1px solid var(--border); }
.version-stack, .version-button {
  width: 100%;
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 9px;
  background: var(--surface-soft);
  color: var(--text-soft);
}
.version-line { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.version-line span { color: var(--muted); }
html[data-sidebar="collapsed"] .brand-copy,
html[data-sidebar="collapsed"] .sidebar-label,
html[data-sidebar="collapsed"] .nav-text,
html[data-sidebar="collapsed"] .nav-caret,
html[data-sidebar="collapsed"] .nav-submenu,
html[data-sidebar="collapsed"] .version-line span,
html[data-sidebar="collapsed"] .version-line strong { display: none; }
html[data-sidebar="collapsed"] .sidebar-head,
html[data-sidebar="collapsed"] .sidebar-nav,
html[data-sidebar="collapsed"] .sidebar-foot { padding-left: 8px; padding-right: 8px; }
html[data-sidebar="collapsed"] .brand,
html[data-sidebar="collapsed"] .nav-item { justify-content: center; }
html[data-sidebar="collapsed"] .version-stack { min-height: 36px; }

.workspace { min-width: 0; height: 100vh; overflow: auto; }
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-left > div { min-width: 0; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-title { margin: 2px 0 0; font-size: 18px; line-height: 1.15; letter-spacing: -.02em; color: var(--text); }
.page-body { display: grid; gap: var(--container-gap); padding: var(--container-gap); }
.sidebar-overlay { display: none; }
.top-balance-chip, .profile-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 5px 10px;
  box-shadow: var(--shadow-sm);
}
.top-balance-chip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; border-radius: 14px; }
.top-balance-chip span, .profile-copy small { color: var(--muted); font-size: 11px; }
.top-balance-chip strong { font-size: 12px; }
.profile-avatar { width: 30px; height: 30px; font-size: 12px; overflow: hidden; border-radius: 50%; }
.profile-avatar img, .user-avatar-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.profile-copy { display: grid; line-height: 1.1; text-align: left; }
.profile-copy strong { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.profile-caret { color: var(--muted); }
.wa-unread-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 1px solid rgba(34, 197, 94, .42);
  border-radius: 14px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .18);
}
.wa-unread-chip:not(.has-unread) {
  border-color: var(--border);
  background: var(--surface);
  color: #16a34a;
  box-shadow: var(--shadow-sm);
}
.wa-unread-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(22, 163, 74, .22);
}
.wa-unread-icon,
.wa-unread-icon svg {
  display: block;
  width: 21px;
  height: 21px;
}
.wa-unread-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.wa-unread-icon svg path:last-child {
  fill: currentColor;
  stroke: none;
}
.wa-unread-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}
.wa-unread-chip.has-unread .wa-unread-badge { display: inline-flex; }
.topbar-warning-shell { position: relative; }
.topbar-warning-trigger { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--border)); border-radius: 14px; background: var(--warn-soft); color: var(--warn); box-shadow: var(--shadow-sm); cursor: pointer; animation: topbar-warning-pulse 2.8s ease-in-out infinite; }
.topbar-warning-trigger:hover { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); transform: translateY(-1px); }
.topbar-warning-trigger svg { width: 20px; height: 20px; }
.topbar-warning-badge { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid var(--surface); border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; animation: topbar-warning-badge-pulse 2.8s ease-in-out infinite; }
.topbar-warning-menu { width: min(330px, calc(100vw - 28px)); padding: 7px; }
.topbar-warning-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px; border: 1px solid transparent; border-radius: 6px; color: var(--text); text-decoration: none; }
.topbar-warning-item:hover { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); background: var(--warn-soft); }
.topbar-warning-item span { display: grid; gap: 2px; min-width: 0; }
.topbar-warning-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.topbar-warning-item small { color: var(--muted); font-size: 11px; }
.topbar-warning-item em { color: var(--warn); font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
@keyframes topbar-warning-pulse {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 18%, transparent), var(--shadow-sm); }
}
@keyframes topbar-warning-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-warning-trigger, .topbar-warning-badge { animation: none; }
}

/* Common surfaces */
.card, .rk-card, .table-card, .dashboard-panel, .settings-card, .settings-compact-card, .profile-compact-card, .package-profile-card, .tool-system-card, .system-section-card, .quick-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}
.card, .rk-card { padding: 14px; }
.card-glow { box-shadow: var(--shadow); }
.rk-card-head, .table-head, .card-header, .modal-head, .quick-panel-header, .finance-report-head, .tool-import-preview-head, .system-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.card-title, .panel-title, .settings-section-title, .finance-report-title, .quick-panel-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
}
.card-subtitle, .compact-sub, .data-sub, .finance-report-period, .help, .small, .muted, .helper-text {
  color: var(--muted);
  font-size: 12px;
}
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stack { display: grid; gap: 12px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }
.actions, .rk-actions, .toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.actions-nowrap { flex-wrap: nowrap; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.text-danger { color: var(--danger)!important; }
.strong-text { color: var(--text); font-weight: 800; }

/* Toolbars */
.toolbar, .rk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.toolbar-stack { align-items: stretch; }
.toolbar-stack > div { min-width: 0; width: 100%; }
.toolbar-actions-left { justify-content: flex-start; }
.toolbar-actions-compact { gap: 8px; }
.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search {
  display: flex;
  align-items: center;
  min-width: min(420px, 100%);
  flex: 1;
}
.toolbar-search input[type="search"], .rk-toolbar-search input[type="search"] { width: 100%; }
.table-meta, .customer-list-info, .billing-summary-text { color: var(--muted); font-size: 12px; }
.entries-control { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.entries-control select { width: auto; min-width: 72px; }

/* Buttons */
.btn, .icon-btn, .rk-action-btn, .mini-action, .table-action-icon-btn {
  --btn-bg: linear-gradient(135deg, var(--primary-strong), var(--primary));
  --btn-color: #fff;
  --btn-border: color-mix(in srgb, var(--primary) 52%, transparent);
  min-height: var(--btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--btn-border);
  border-radius: 12px;
  padding: 8px 12px;
  color: var(--btn-color);
  background: var(--btn-bg);
  font-weight: 750;
  line-height: 1.1;
  box-shadow: 0 9px 18px color-mix(in srgb, var(--primary) 18%, transparent);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
  white-space: nowrap;
}
.btn:hover, .icon-btn:hover, .rk-action-btn:hover, .mini-action:hover, .table-action-icon-btn:hover { transform: translateY(-1px); color: var(--btn-color); box-shadow: 0 12px 22px color-mix(in srgb, var(--primary) 24%, transparent); }
.btn:active, .icon-btn:active, .rk-action-btn:active { transform: translateY(0); }
.btn-small { min-height: 32px; padding: 7px 10px; font-size: 12px; border-radius: 11px; }
.btn-mini, .btn-xs, .mini-action { min-height: 28px; padding: 5px 8px; font-size: 11px; border-radius: 10px; }
.btn-ghost, .btn-soft, .icon-btn, .rk-action-btn {
  --btn-bg: var(--surface-soft);
  --btn-color: var(--text-soft);
  --btn-border: var(--border);
  box-shadow: none;
}
.btn-ghost:hover, .btn-soft:hover, .icon-btn:hover, .rk-action-btn:hover { --btn-color: var(--text); background: var(--primary-faint); border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); box-shadow: var(--shadow-sm); }
.btn-danger, .btn-danger-soft, .is-delete, .dropdown-item-danger, .customer-bulk-delete-danger {
  --btn-bg: var(--danger-soft);
  --btn-color: var(--danger);
  --btn-border: color-mix(in srgb, var(--danger) 34%, transparent);
  box-shadow: none;
}
.btn-success { --btn-bg: var(--success-soft); --btn-color: var(--success); --btn-border: color-mix(in srgb, var(--success) 34%, transparent); box-shadow: none; }
.table-action-icon-btn { width: 32px; height: 32px; padding: 0; }
.table-action-icon-btn.is-edit { --btn-bg: var(--info-soft); --btn-color: var(--info); --btn-border: color-mix(in srgb, var(--info) 34%, transparent); box-shadow: none; }
.olt-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.olt-detail-section-head h2 { margin: 0; }
.olt-vlan-uplinks-link { color: var(--primary); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.olt-vlan-uplinks-link:hover, .olt-vlan-uplinks-link:focus-visible { color: var(--primary-strong); text-decoration-thickness: 2px; }
.olt-onu-types { overflow: hidden; }
.olt-onu-type-tabs { display: flex; justify-content: center; gap: 2px; border-bottom: 1px solid var(--border); background: var(--surface); }
.olt-onu-type-tabs button { min-height: 38px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-soft); font-weight: 750; }
.olt-onu-type-tabs button.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.olt-onu-type-description { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; }
.olt-onu-types [data-onu-type-row][hidden] { display: none; }
.olt-uplink-vlan-modal-card { width: min(820px, calc(100vw - 28px)); max-height: calc(100dvh - 24px); }
.olt-uplink-vlan-modal-card .modal-head { min-height: 54px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.olt-uplink-vlan-modal-port { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--success); font-size: 14px; font-weight: 700; }
.olt-uplink-vlan-modal-port i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.olt-uplink-vlan-form { min-width: 0; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.olt-uplink-vlan-form .modal-body { min-height: 0; flex: 1 1 auto; }
.olt-uplink-vlan-form .modal-foot { flex: 0 0 auto; }
.olt-uplink-vlan-mode { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.olt-uplink-vlan-mode > span { min-width: 132px; color: var(--text-soft); font-size: 12px; font-weight: 760; }
.olt-uplink-vlan-mode label { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 8px; border: 1px solid transparent; border-radius: 5px; color: var(--text-soft); }
.olt-uplink-vlan-mode label:has(input:checked) { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); background: var(--primary-faint); font-weight: 700; }
.olt-uplink-vlan-option { display: inline-flex; align-items: center; gap: 7px; }
.olt-uplink-vlan-access, .olt-uplink-vlan-pvid { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; }
.olt-uplink-vlan-access label, .olt-uplink-vlan-pvid label { color: var(--text-soft); font-weight: 760; }
.olt-uplink-vlan-membership { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; }
.olt-uplink-vlan-list { border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--surface); }
.olt-uplink-vlan-list-head { color: var(--text-soft); font-size: 12px; font-weight: 760; padding-top: 10px; }
.olt-uplink-vlan-summary { min-height: 42px; display: flex; align-items: center; padding: 9px 14px 9px 42px; border-bottom: 1px solid var(--border); color: var(--primary); background: var(--panel-soft); font-weight: 650; line-height: 1.35; position: relative; }
.olt-uplink-vlan-summary::before { content: "☷"; position: absolute; left: 16px; color: var(--primary); font-size: 18px; }
.olt-uplink-vlan-options { max-height: 180px; overflow: auto; padding: 11px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; font-size: 12px; }
.olt-uplink-vlan-option { min-width: 0; color: var(--text); }
.olt-uplink-vlan-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olt-uplink-vlan-option input:disabled + span { color: var(--muted); }
.olt-uplink-vlan-confirmation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 280px); align-items: center; gap: 12px; color: var(--text-soft); font-size: 12px; }
.olt-uplink-vlan-confirmation strong { color: var(--text); }
.olt-uplink-vlan-confirmation input { min-width: 0; height: 32px; }
.olt-uplink-vlan-footer { min-height: 52px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.olt-uplink-vlan-footer-btn { min-height: 30px; padding: 5px 10px; border-radius: 5px; font-size: 12px; }
@media (max-width: 640px) { .olt-uplink-vlan-access, .olt-uplink-vlan-pvid, .olt-uplink-vlan-membership, .olt-uplink-vlan-confirmation { grid-template-columns: 1fr; gap: 7px; } .olt-uplink-vlan-options { grid-template-columns: 1fr; } .olt-uplink-vlan-mode > span { min-width: 100%; } }
.table-action-icon-btn.is-view, .is-view { --btn-bg: var(--primary-soft); --btn-color: var(--primary); --btn-border: color-mix(in srgb, var(--primary) 34%, transparent); box-shadow: none; }
.table-action-icon-btn.is-print, .is-print, .is-download { --btn-bg: var(--purple-soft); --btn-color: var(--purple); --btn-border: color-mix(in srgb, var(--purple) 34%, transparent); box-shadow: none; }
.btn-copy-token.is-copied, .is-feedback { outline: 2px solid var(--success); }

/* Form controls */
.form-grid, .rk-form-grid, .settings-form-grid, .settings-bank-grid, .bank-account-grid, .customer-filter-grid, .customer-info-grid, .compact-grid, .grid-2, .two-col, .three-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field, .settings-form-section, .customer-filter-field { display: grid; gap: 5px; min-width: 0; }
.field-span-2 { grid-column: span 2; }

.router-vpn-fields {
  grid-column: span 2;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.router-vpn-fields[hidden] { display: none; }

.router-vpn-fields-head {
  display: grid;
  gap: 3px;
}

.router-vpn-fields-head span {
  color: var(--muted);
  font-size: 12px;
}

.router-vpn-fields-grid { gap: 10px; }
.field label, .label, .party-title, .settings-section-title {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 760;
}
.required-mark { color: var(--danger); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  min-height: var(--field-h);
  border: 1px solid var(--input-border);
  border-radius: 11px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--input-bg);
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
select { padding-right: 30px; }
textarea { min-height: 92px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: var(--ring); }
input[readonly], .is-readonly { background: var(--surface-soft); color: var(--muted); }
.field.is-muted { opacity: .68; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
.check-inline, .radio-row, .check-line, .field-radio-group label, .payment-radio-row, .channel, .traffic-lock-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--text-soft);
}
.field-checklist, .check-grid, .permission-list, .channels { display: grid; gap: 8px; }
.input-with-button, .api-credential-input-row { display: flex; gap: 8px; align-items: center; }
.input-with-button input, .api-credential-input-row input { flex: 1; min-width: 0; }
.inline-control { display: inline-flex; align-items: center; gap: 8px; }
.notice-stack { display: grid; gap: 6px; }
.notice-stack.compact { gap: 4px; }

/* Tables */
.table-card, .ppp-compact-card, .billing-compact-card, .topup-compact-card, .settings-compact-card, .package-profile-card { padding: 0; overflow: hidden; }
.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap {
  width: 100%;
  overflow: auto;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
table, .rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
}
th, td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: left;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--text-soft);
  background: var(--table-head-bg);
}
tbody td { color: var(--text-soft); }
tbody tr:hover td { background: var(--table-row-hover); color: var(--text); }
tbody tr:last-child td { border-bottom: 0; }
.data-main, .compact-main, .ppp-name-text { color: var(--text); font-weight: 800; line-height: 1.25; }
.data-sub, .compact-sub, .ppp-name-only { margin-top: 2px; }
.sort-mark, .table-sort-indicator { margin-left: 4px; color: var(--muted); font-size: 10px; }
th.is-sorted { color: var(--primary); }
.table-head .toolbar-actions, .table-head .rk-actions { margin-left: auto; }
.table-action-label { font-size: 0; }
.table-action-label::before { font-size: 13px; }
.table-action-label.is-edit::before { content: "✎"; }
.table-action-label.is-delete::before { content: "×"; }
.customer-list-footer, .billing-list-footer, .customer-list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.customer-list-pagination-top { border-top: 0; border-bottom: 1px solid var(--border); }
.empty-state, .compact-empty, .placeholder-state, .settings-placeholder-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 90px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
}

/* Badges and status */
.badge, .status-badge, .status-pill, .status-badge, .badge-mini, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: var(--chip-text);
  background: var(--chip-bg);
  white-space: nowrap;
}
.badge-mini { min-height: 20px; padding: 3px 6px; font-size: 10px; }
.badge-success, .paid, .status-paid, .is-recurring, .customer-due-active { color: var(--success)!important; background: var(--success-soft)!important; border-color: color-mix(in srgb, var(--success) 35%, transparent)!important; }
.badge-danger, .overdue, .unpaid, .status-overdue, .status-unpaid, .is-isolated, .is-inactive, .customer-due-isolated, .ppp-date-overdue { color: var(--danger)!important; background: var(--danger-soft)!important; border-color: color-mix(in srgb, var(--danger) 35%, transparent)!important; }
.badge-warn, .alert-warning, .is-pending, .customer-due-inactive { color: var(--warn)!important; background: var(--warn-soft)!important; border-color: color-mix(in srgb, var(--warn) 35%, transparent)!important; }
.onu-signal-custom-page{max-width:1120px;}
.onu-signal-custom-tabs{display:flex;margin:0;border-bottom:1px solid var(--border);}.onu-signal-custom-tabs a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid transparent;border-radius:7px 7px 0 0;color:var(--muted);background:transparent;font-size:13px;font-weight:700;text-decoration:none;}.onu-signal-custom-tabs a.is-active{position:relative;z-index:1;margin-bottom:-1px;border-color:var(--border);border-bottom-color:var(--surface);color:var(--text);background:var(--surface);}
.onu-signal-filter-panel{display:grid;gap:20px;padding:18px;border:1px solid var(--border);border-top:0;border-radius:0 0 8px 8px;background:var(--surface);}
.onu-signal-scale{display:grid;gap:12px;padding:18px 6px 2px;}
.onu-signal-scale-labels,.onu-signal-scale-values{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:750;}
.onu-signal-scale-labels .is-critical{color:var(--danger);}.onu-signal-scale-labels .is-warning{color:var(--warn);}.onu-signal-scale-labels .is-good{color:var(--success);}
.onu-signal-track{position:relative;height:18px;border-radius:999px;background:linear-gradient(90deg,var(--danger) 0%,var(--danger) var(--critical-position),var(--warn) var(--critical-position),var(--warn) var(--good-position),var(--success) var(--good-position),var(--success) 100%);}
.onu-signal-track-fill{position:absolute;inset:0;pointer-events:none;}
.onu-signal-ticks{position:relative;height:27px;margin-top:0;color:var(--text-soft);font-size:11px;line-height:1.3;}.onu-signal-ticks span{position:absolute;top:0;padding-top:13px;white-space:nowrap;transform:translateX(-50%);}.onu-signal-ticks span::before{position:absolute;top:0;left:50%;width:1px;height:7px;background:var(--border-strong);content:"";}.onu-signal-ticks span:nth-child(1){left:0;transform:none;}.onu-signal-ticks span:nth-child(1)::before{left:0;}.onu-signal-ticks span:nth-child(2){left:16.6667%;}.onu-signal-ticks span:nth-child(3){left:33.3333%;}.onu-signal-ticks span:nth-child(4){left:50%;}.onu-signal-ticks span:nth-child(5){left:66.6667%;}.onu-signal-ticks span:nth-child(6){left:83.3333%;}.onu-signal-ticks span:nth-child(7){right:0;transform:none;}.onu-signal-ticks span:nth-child(7)::before{right:0;left:auto;}
.onu-signal-slider{position:absolute!important;top:-8px!important;left:-12px!important;width:calc(100% + 24px)!important;height:34px!important;min-height:34px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;appearance:none!important;background:transparent!important;box-shadow:none!important;pointer-events:none;}.onu-signal-slider::-webkit-slider-runnable-track{height:18px;border:0;background:transparent;}.onu-signal-slider::-moz-range-track{height:18px;border:0;background:transparent;}.onu-signal-slider::-webkit-slider-thumb{width:18px;height:18px;border:3px solid var(--surface)!important;border-radius:50%;appearance:none;cursor:grab;pointer-events:auto;box-shadow:0 0 0 2px currentColor;background:currentColor;}.onu-signal-slider::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--surface)!important;border-radius:50%;cursor:grab;pointer-events:auto;box-shadow:0 0 0 2px currentColor;background:currentColor;}.onu-signal-slider.is-critical{z-index:2;color:var(--danger)!important;}.onu-signal-slider.is-good{z-index:3;color:var(--success)!important;}
.onu-signal-scale-values output{padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-soft);}.onu-signal-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}.onu-signal-rule{display:grid;gap:10px;padding:14px 16px;border-top:5px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 5px 16px rgba(15,23,42,.08);}.onu-signal-rule-title{display:flex;align-items:center;gap:10px;}.onu-signal-rule-title i{display:inline-flex;align-items:center;height:34px;padding:0 8px;border-radius:8px;font-style:normal;font-size:12px;letter-spacing:1px;line-height:1;color:currentColor;background:color-mix(in srgb,currentColor 12%,transparent);}.onu-signal-rule strong{font-size:15px;}.onu-signal-rule span{color:var(--text-soft);font-size:12px;line-height:1.5;}.onu-signal-rule.is-good{color:var(--success);border-top-color:var(--success);}.onu-signal-rule.is-warning{color:var(--warn);border-top-color:var(--warn);}.onu-signal-rule.is-critical{color:var(--danger);border-top-color:var(--danger);}
@media (max-width:640px){.onu-signal-filter-panel{padding:12px;}.onu-signal-scale-labels,.onu-signal-scale-values,.onu-signal-ticks{font-size:10px;}.onu-signal-rule-grid{grid-template-columns:1fr;}}
.badge-info, .status-info, .service-type-badge { color: var(--info)!important; background: var(--info-soft)!important; border-color: color-mix(in srgb, var(--info) 35%, transparent)!important; }
.status-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-soft); }
.status-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 750; color: var(--text-soft); }
.status-right { color: var(--text); }
.status-bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; }
.status-fill { display: block; height: 100%; width: 38%; border-radius: inherit; background: var(--primary); }
.status-fill-info { background: var(--info); }
.status-fill-warn { background: var(--warn); }
.status-fill-success { background: var(--success); } .status-w-20 { width: 20%; } .status-w-22 { width: 22%; } .status-w-42 { width: 42%; } .status-w-74 { width: 74%; } .status-w-88 { width: 88%; }
.customer-row-isolated td { background: color-mix(in srgb, var(--danger-soft) 55%, transparent); }
.customer-row-disabled td {
  background: color-mix(in srgb, var(--danger-soft) 28%, var(--surface) 72%);
  color: color-mix(in srgb, var(--danger) 72%, var(--text) 28%);
}
.customer-row-disabled :where(.data-main, .compact-main, .ppp-name-text, .customer-id-text, .service-type-label) {
  color: color-mix(in srgb, var(--danger) 68%, var(--text) 32%)!important;
}
.customer-row-disabled :where(.data-sub, .compact-sub, .muted) {
  color: color-mix(in srgb, var(--danger) 48%, var(--muted) 52%)!important;
}
/* .customer-row-overdue td { box-shadow: none;                      }*/
.service-type-cell, .ppp-service-col { white-space: nowrap; }

/* Dropdowns */
.dropdown-shell, .action-dropdown { position: relative; }
.dropdown-menu, .action-dropdown-menu, .rk-dropdown-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  max-width: min(92vw, 360px);
  max-height: min(70vh, 520px);
  overflow: auto;
  display: none;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--dropdown-bg);
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.dropdown-menu-right { left: auto; right: 0; }
.dropdown-menu.is-open, details.action-dropdown[open] > .action-dropdown-menu { display: grid; gap: 3px; }
.dropdown-label, .action-dropdown-section-title {
  padding: 8px 9px 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.dropdown-item, .action-dropdown-item, .rk-dropdown-item, .action-dropdown-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
  font-weight: 650;
}
.dropdown-item:hover, .action-dropdown-item:hover, .rk-dropdown-item:hover, .action-dropdown-button:hover { background: var(--primary-faint); color: var(--text); border-color: var(--border); }
.dropdown-form { margin: 0; }
.profile-balance-menu { display: grid; gap: 2px; padding: 9px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.profile-balance-menu span, .profile-balance-menu small { color: var(--muted); font-size: 11px; }
.action-dropdown-trigger::-webkit-details-marker { display: none; }
.action-dropdown-trigger { list-style: none; }
.caret { margin-left: 4px; color: var(--muted); }

/* Modals and toast */
.modal, .rk-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 18px; }
.modal.is-open, .rk-modal.is-open, .billing-filter-modal-inline { display: flex; }
.modal-backdrop, .rk-modal-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.58); backdrop-filter: blur(8px); }
.modal-card, .rk-modal-card {
  position: relative;
  z-index: 1;
  width: min(720px, 96vw);
  max-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-2xl);
  background: var(--modal-bg);
  color: var(--modal-text);
  box-shadow: var(--shadow);
}
.modal-body, .rk-modal-body { padding: 14px; overflow: auto; }
.modal-close-svg { width: 18px; height: 18px; }
body.modal-open { overflow: hidden; }
.ppp-info-actions { margin-top: 9px; justify-content: flex-end; }
.customer-wifi-modal { z-index: calc(var(--z-modal, 80) + 40); padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.customer-wifi-modal-card { width: min(620px, 96vw); max-height: calc(100dvh - 16px); min-height: 0; }
.customer-wifi-modal-card > .rk-modal-head { flex: 0 0 auto; }
.customer-wifi-modal-card > .rk-modal-body { min-height: 0; flex: 1 1 auto; padding: 10px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.customer-wifi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.customer-wifi-item { min-width: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-soft); overflow: hidden; }
.customer-wifi-summary { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 36px; padding: 7px 9px; cursor: pointer; list-style: none; }
.customer-wifi-summary::-webkit-details-marker { display: none; }
.customer-wifi-chevron { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--primary); transition: transform .16s ease; }
.customer-wifi-item[open] .customer-wifi-chevron { transform: rotate(90deg); }
.customer-wifi-state { min-width: 30px; font-size: 10px; font-weight: 750; text-align: right; }
.customer-wifi-state.is-on { color: var(--success); }
.customer-wifi-state.is-off { color: var(--muted); }
.customer-wifi-form { display: grid; gap: 6px; min-width: 0; padding: 9px 30px 10px; border-top: 1px solid var(--border); background: var(--surface); }
.customer-wifi-form-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.customer-wifi-field-label { color: var(--muted); font-size: 11px; }
.customer-wifi-identity { display: inline-flex; align-items: center; min-width: 0; gap: 5px; }
.customer-wifi-identity > strong { font-size: 12px; line-height: 1.2; }
.customer-wifi-band { padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 10px; line-height: 1; white-space: nowrap; }
.customer-wifi-toggles { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.customer-wifi-toggle { display: inline-flex; align-items: center; gap: 4px; min-width: 0; cursor: pointer; font-size: 11px; line-height: 1; }
.customer-wifi-toggle input[type="checkbox"] { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.customer-wifi-input { width: 100%; min-width: 0; height: 30px; padding: 5px 7px; font-size: 12px; }
.customer-wifi-form-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.customer-wifi-form-foot .btn { min-height: 30px; padding: 5px 10px; font-size: 11px; }
@media (max-width: 640px) {
  .customer-wifi-modal { align-items: flex-start; }
  .customer-wifi-modal-card { width: 100%; max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom))); }
  .customer-wifi-form { padding-right: 9px; padding-left: 30px; }
}
.billing-filter-modal-card, .customer-extra-service-modal-card { width: min(760px, 96vw); }
.version-modal-card { width: min(860px, 96vw); }
.version-summary-bar, .version-tabs { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.version-pill { flex: 1; display: grid; gap: 2px; border: 1px solid var(--border); border-radius: 13px; padding: 9px; background: var(--surface-soft); }
.version-pill span { color: var(--muted); font-size: 11px; }
.version-tab, .panel-tab, .customer-tabs button, .whatsapp-template-tab {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--surface-soft);
  color: var(--text-soft);
  font-weight: 760;
}
.version-tab.is-active, .panel-tab.is-active, .customer-tabs button.is-active, .whatsapp-template-tab.is-active, .is-current { background: var(--primary); color: #fff; border-color: var(--primary); }
.version-panel, .dashboard-tab-panel, .whatsapp-template-pane { display: none; }
.version-panel.is-active, .dashboard-tab-panel.is-active, .whatsapp-template-pane.is-active { display: block; }
.version-history-list { display: grid; gap: 9px; padding: 14px; overflow: auto; }
.version-entry { border: 1px solid var(--border); border-radius: 14px; padding: 10px; background: var(--surface-soft); }
.version-entry.current { border-color: var(--primary); }
.version-entry-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 500; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--dropdown-bg); box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); transition: .18s ease; pointer-events: auto; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
.toast-message { flex: 1; color: var(--text); }
.toast-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  font-size: 0;
}
.toast-icon::before, .toast-close::before {
  content: "";
  display: block;
  background: currentColor;
  -webkit-mask: var(--rk-toast-icon) center / contain no-repeat;
  mask: var(--rk-toast-icon) center / contain no-repeat;
}
.toast-success .toast-icon { color: var(--success); --rk-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.5 2.5L16 9'/%3E%3C/svg%3E"); }
.toast-error .toast-icon { color: var(--danger); --rk-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.toast-icon::before { width: 18px; height: 18px; }
html[data-theme] body .toast-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0 !important;
  line-height: 0 !important;
  --rk-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.toast-close::before { width: 14px; height: 14px; }
.alert, .notice, .error {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--surface-soft);
  color: var(--text-soft);
}
.alert-success, .notice { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 34%, transparent); }
.alert-error, .error { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 34%, transparent); }

/* Dashboard and summary */
.rk-summary-grid, .customer-summary-grid, .dash-overview-grid, .mini-strip-grid, .billing-summary-grid, .finance-report-kpis, .customer-report-kpis, .kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* OLT settings device header */
.olt-settings-hero {
  display: grid;
  grid-template-columns: 160px minmax(180px, 1fr) minmax(320px, 2.3fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.olt-device-mark {
  display: grid;
  place-items: center;
  width: 160px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--primary-strong);
  overflow: hidden;
}
.olt-device-c320 { cursor: zoom-in; }
.olt-device-c320 .c320-chassis-svg { display: block; width: 100%; height: 100%; }
.olt-device-generic { color: var(--primary-strong); font-size: 14px; font-weight: 800; }
.c320-frame { fill: #3b424a; stroke: #161b22; stroke-width: 2; }
.c320-brand { fill: #143e79; }
.c320-brand-name, .c320-brand-model { fill: #fff; font-family: sans-serif; font-weight: 700; }
.c320-brand-name { font-size: 16px; }
.c320-brand-model { font-size: 7px; }
.c320-slot-body { fill: #d4d8dc; stroke: #79818b; stroke-width: 1; }
.c320-slot-label { fill: #1f2937; font-family: sans-serif; font-size: 8px; font-weight: 700; }
.c320-slot-indicator, .c320-port-indicator { stroke: #111827; stroke-width: 1; }
.c320-slot-indicator.is-online, .c320-port-indicator.is-online { fill: #22c55e; }
.c320-slot-indicator.is-offline, .c320-port-indicator.is-offline { fill: #ef4444; }
.c320-port-indicator.is-unknown { fill: #94a3b8; }
.c320-data-flow { display: none; }
.olt-c320-chassis-modal-card { width: min(980px, 96vw); }
.olt-c320-chassis-modal-body { padding: 20px; background: #eef2f5; }
.c320-chassis-expanded { border: 1px solid #9aa5b1; border-radius: 6px; overflow: hidden; background: #d9dee4; }
.c320-chassis-expanded .c320-chassis-svg { display: block; width: 100%; height: auto; }
.c320-chassis-expanded .c320-data-flow { display: block; fill: none; stroke: #22c55e; stroke-width: 2; stroke-dasharray: 8 12; opacity: .72; animation: c320-data-flow 1.4s linear infinite; }
.c320-chassis-expanded .c320-port-indicator.is-online { animation: c320-port-pulse 1.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.c320-chassis-expanded .c320-port-indicator.is-online:nth-of-type(3n) { animation-delay: .25s; }
@keyframes c320-data-flow { to { stroke-dashoffset: -40; } }
@keyframes c320-port-pulse { 50% { opacity: .4; transform: scale(1.5); } }
.olt-device-identity { min-width: 0; }
.olt-device-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.olt-device-title-row h2 { margin: 0; color: var(--text); font-size: 17px; line-height: 1.2; }
.olt-device-status { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.olt-device-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.olt-device-status.is-online { color: var(--success); }
.olt-device-status.is-online i { background: var(--success); }
.olt-device-model, .olt-device-meta { color: var(--muted); font-size: 12px; }
.olt-device-model { margin-top: 5px; }
.olt-device-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 4px; }
.olt-device-stats { display: grid; grid-template-columns: repeat(8, minmax(52px, 1fr)); gap: 9px; }
.olt-device-stats div { display: grid; gap: 3px; min-width: 0; text-align: center; }
.olt-device-stats strong { color: var(--text); font-size: 16px; line-height: 1; }
.olt-device-stats strong.is-online { color: var(--success); }
.olt-device-stats strong.is-los { color: var(--danger); }
.olt-device-stats span { color: var(--muted); font-size: 11px; line-height: 1.1; }
.olt-device-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.olt-device-actions form { margin: 0; }
.olt-save-config.is-pending { color: #fff; background: var(--danger); border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.olt-save-config.is-pending:is(:hover, :focus-visible) { color: #fff; background: color-mix(in srgb, var(--danger) 88%, #000); border-color: color-mix(in srgb, var(--danger) 88%, #000); }
@media (min-width: 961px) and (max-width: 1180px) {
  .olt-settings-hero { grid-template-columns: 160px minmax(150px, .6fr) minmax(0, 1.4fr); }
  .olt-device-actions { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 960px) {
  .olt-settings-hero { grid-template-columns: 160px minmax(190px, 1fr) auto; }
  .olt-device-stats { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 720px) {
  .olt-settings-hero { grid-template-columns: 160px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .olt-device-mark { width: 160px; height: 46px; }
  .olt-device-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .olt-device-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .c320-chassis-expanded .c320-data-flow, .c320-chassis-expanded .c320-port-indicator.is-online { animation: none; }
}
.rk-summary-card, .customer-summary-card, .overview-tile, .mini-strip, .finance-report-kpi, .customer-report-kpi, .router-report-kpi, .system-metric, .mini-kpi {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.overview-tile { position: relative; overflow: hidden; min-height: 76px;  cursor: pointer;}
.overview-tile::after { content: ""; position: absolute; inset: auto -28px -44px auto; width: 120px; height: 120px; border-radius: 50%; background: var(--primary-soft); }
.overview-tile-copy { position: relative; z-index: 1; min-width: 0; flex: 1; }
.overview-kicker, .customer-summary-title, .finance-report-kpi-label, .mini-strip-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.overview-number, .customer-summary-value, .finance-report-kpi-value, .quick-panel-value, .amount { color: var(--text); font-size: 18px; font-weight: 850; letter-spacing: -.03em; }
.overview-glyph, .rk-icon-box, .dash-icon, .customer-summary-icon, .finance-report-kpi-icon, .online-payment-kpi-icon, .router-report-kpi-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--primary);
  background: var(--primary-soft);
}
.rk-icon-box svg, .dash-icon svg, .overview-glyph svg { width: 19px; height: 19px; }
.rk-icon-box svg *, .dash-icon svg *, .overview-glyph svg * { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini-strip { min-height: 46px; justify-content: space-between; }
.mini-strip-label { display: flex; align-items: center; gap: 8px; }
.mini-strip strong { color: var(--text); font-size: 13px; }
.dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr); gap: 8px; }
.dashboard-panel { padding: 0; overflow: hidden; }
.panel-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px; border-bottom: 1px solid var(--border); }
.panel-tab { display: inline-flex; align-items: center; gap: 8px; }
.dashboard-tab-panel { padding: 10px; } .status-list, .activity-feed, .traffic-iface-list { display: grid; gap: 7px; }
.dashboard-legacy-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.legacy-summary-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 72px; padding: 10px; color: var(--text); text-decoration: none; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, var(--surface), var(--surface-soft)); box-shadow: var(--shadow-soft); }
.legacy-summary-item:hover { border-color: color-mix(in srgb, var(--primary) 34%, var(--border)); transform: translateY(-1px); }
.legacy-summary-item:hover .legacy-summary-title { color: var(--primary); }
.legacy-summary-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 10px; color: var(--primary); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); box-shadow: none; }
.legacy-summary-icon svg { width: 20px; height: 20px; }
.legacy-summary-copy { min-width: 0; display: grid; gap: 3px; justify-items: start; }
.legacy-summary-title { color: var(--muted); font-size: 10.5px; font-weight: 800; line-height: 1.2; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.legacy-summary-value { color: var(--text); font-size: 22px; font-weight: 850; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.legacy-summary-note { display: inline-flex; align-items: center; min-height: 18px; max-width: 100%; padding: 2px 7px; border-radius: 999px; background: var(--chip-bg); color: var(--muted); font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legacy-summary-note.is-warn { background: rgba(239,68,68,.10); color: #dc2626; }
.legacy-summary-time { font-family: var(--rk-font-ui); letter-spacing: 0; }
.panel-header-simple { display: flex; justify-content: space-between; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); }
.activity-item { display: grid; gap: 4px; border: 1px solid var(--border); border-radius: 14px; padding: 10px; background: var(--surface-soft); }
.activity-time { color: var(--muted); font-size: 11px; }
.activity-action { color: var(--primary); font-weight: 800; text-transform: uppercase; font-size: 11px; }
.activity-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 11px; }
.activity-meta span { padding: 3px 6px; border-radius: 999px; background: var(--chip-bg); }
.traffic-compact-head, .traffic-focus-controls, .traffic-chart-head, .traffic-router-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.traffic-summary { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
.traffic-select-wrap { display: grid; gap: 5px; flex: 1; min-width: 220px; }
.traffic-focus-controls { margin-top: 10px; }
.traffic-chart-card { margin-top: 10px; min-height: 230px; padding: 12px; }
.traffic-chart-title, .traffic-router-title { color: var(--text); font-weight: 850; }
.traffic-chart-subtitle, .traffic-router-meta { color: var(--muted); font-size: 12px; }
.traffic-stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.traffic-stat-grid div { border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: var(--surface-soft); }
.traffic-stat-grid span { display: block; color: var(--muted); font-size: 11px; }
.traffic-line-chart { width: 100%; height: auto; }
.traffic-grid line { stroke: color-mix(in srgb, var(--muted) 24%, transparent); }
.traffic-y-label, .traffic-axis-labels text { fill: var(--muted); font-size: 10px; }
.traffic-line { fill: none; stroke-width: 3; stroke-linecap: round; }
.traffic-line-rx { stroke: var(--success); }
.traffic-line-tx { stroke: var(--primary); }
.traffic-area { opacity: .35; }
.traffic-area-rx { fill: var(--success-soft); }
.traffic-area-tx { fill: var(--primary-soft); }
.traffic-chart-legend { display: flex; gap: 12px; color: var(--muted); font-size: 12px; }
.traffic-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.traffic-chart-legend i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.traffic-chart-legend .rx { background: var(--success); }
.traffic-chart-legend .tx { background: var(--primary); }
.traffic-router-card, .traffic-iface-row { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.traffic-router-card { padding: 10px; }
.traffic-iface-row { width: 100%; display: grid; grid-template-columns: 1fr auto auto minmax(80px, 140px); gap: 10px; align-items: center; padding: 9px; text-align: left; color: var(--text-soft); }
.traffic-iface-row.is-selected { border-color: var(--primary); background: var(--primary-faint); }
.traffic-iface-main strong, .traffic-rate strong { display: block; color: var(--text); }
.traffic-iface-main span, .traffic-rate span { color: var(--muted); font-size: 11px; }
.traffic-meter { height: 8px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; }
.traffic-meter-fill { display: flex; width: 100%; height: 100%; }
.traffic-meter-fill i, .traffic-meter-fill b { display: block; height: 100%; width: 50%; }
.traffic-meter-fill i { background: var(--success); }
.traffic-meter-fill b { background: var(--primary); }

/* Customer / finance / settings helpers */
.customer-filter-panel, .rk-filter-panel, .finance-report-shell, .settings-compact-card, .tool-import-section-title { padding: 12px; }
.customer-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.extra-service-list, .customer-extra-services, .permission-groups, .settings-permission-groups, .tool-import-jobs { display: grid; gap: 9px; }
.extra-service-row, .permission-group-block, .settings-permission-group-block, .payment-info-box, .payment-important-section, .payment-sync-status, .api-credential-field, .logo-box, .box {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
  background: var(--surface-soft);
}
.extra-service-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.extra-service-note { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.extra-service-actions { display: flex; align-items: center; gap: 6px; }
.extra-service-amount { color: var(--text); font-weight: 850; }
.finance-report-overview, .finance-report-actions-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; background: var(--surface-soft); }
.finance-report-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.finance-report-action-btn { min-height: 38px; }
.finance-info-cell { color: var(--text-soft); }
.settings-compact-control-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.settings-compact-form, .settings-form-section { display: grid; gap: 12px; } [data-theme-option] { justify-content: flex-start; }
.placeholder-wrap, .settings-placeholder-wrap { min-height: 320px; display: grid; place-items: center; }
.placeholder-icon { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 24px; }
.placeholder-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.feature-ok { color: var(--success); }
.feature-no { color: var(--danger); }

/* Auth */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-grid { width: min(1040px, 100%); display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 18px; align-items: stretch; }
.auth-copy, .auth-card { padding: 22px; }
.auth-copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.auth-copy h1 { margin: 0; font-size: clamp(28px, 4vw, 46px); line-height: 1.03; letter-spacing: -.05em; }
.auth-copy p { margin: 0; max-width: 52ch; color: var(--muted); font-size: 15px; }
.auth-panel { display: flex; align-items: center; }
.auth-card { width: 100%; }
.auth-login-form { margin-top: 18px; }

/* Public payment and invoice */
.wrap { width: min(880px, 100%); margin: 0 auto; padding: 22px; }
.wrap > .brand { margin-bottom: 14px; }
.brand-title { color: var(--text); font-weight: 850; font-size: 18px; }
.brand-sub { color: var(--muted); font-size: 12px; }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.head h1 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.body { padding: 14px 0; display: grid; gap: 12px; }
.grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.value { color: var(--text); font-weight: 800; }
.line { height: 1px; background: var(--border); }
.foot { margin: 0 -14px -14px; padding: 12px 14px; border-top: 1px solid var(--border); color: var(--muted); background: var(--surface-soft); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.sheet {
  width: min(210mm, calc(100% - 24px));
  margin: 18px auto;
  padding: 16mm;
  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.invoice-head { display: grid; grid-template-columns: 170px 1fr 170px; gap: 16px; align-items: center; padding-bottom: 12px; border-bottom: 2px solid #111827; }
.invoice-head.no-right-logo { grid-template-columns: 170px 1fr; }
.logo-box { min-height: 86px; display: grid; place-items: center; border: 0; background: transparent; }
.logo-box img { max-width: 170px; max-height: 84px; object-fit: contain; }
.title-box { text-align: center; }
.invoice-title { margin: 0; font-size: 28px; letter-spacing: -.04em; }
.invoice-no { margin-top: 6px; color: #6b7280; font-weight: 700; }
.status-word.status-paid { color: #16a34a!important; background: transparent!important; border: 0!important; }
.status-word.status-overdue, .status-word.status-unpaid { color: #dc2626!important; background: transparent!important; border: 0!important; }
.party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.party-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 11px; background: #f9fafb; color: #374151; }
.party-title { color: #6b7280; }
.party-name { color: #111827; font-weight: 850; margin-top: 3px; }
.section-title { margin: 12px 0 8px; color: #111827; font-weight: 850; font-size: 14px; }
.invoice-table-wrap { overflow-x: auto; border: 1px solid #d1d5db; border-radius: 8px; }
.invoice-table { min-width: 640px; color: #111827; }
.invoice-table th { background: #e5e7eb; color: #111827; position: static; }
.invoice-table td { color: #374151; border-color: #e5e7eb; }
.service-name { color: #111827; font-weight: 800; }
.service-note { color: #6b7280; font-size: 11px; }
.summary-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; margin-top: 14px; }
.summary-grid.summary-paid { display: flex; justify-content: flex-end; }
.summary-grid.summary-paid .totals { width: min(330px, 100%); }
.totals { border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; }
.total-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border-bottom: 1px solid #e5e7eb; color: #374151; }
.total-row:last-child { border-bottom: 0; }
.total-row.grand { background: #111827; color: #fff; font-size: 15px; }
.tax-note { display: block; color: #6b7280; font-size: 10px; }
.pay-instructions { color: #374151; border: 1px solid #e5e7eb; border-radius: 8px; padding: 11px; background: #f9fafb; }
.footer { margin-top: 14px; color: #6b7280; font-size: 11px; text-align: center; }

/* Logs, system, import */
.app-log-subtitle, .dropdown-meta { color: var(--muted); font-size: 12px; }
.app-log-sep { color: var(--muted-2); }
.tool-import-preview-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-import-section-title { font-weight: 850; color: var(--text); }
.system-metric { justify-content: space-between; }
.metric-label { color: var(--muted); }

/* Responsive */
@media (max-width: 1180px) {
  .rk-summary-grid, .customer-summary-grid, .dash-overview-grid, .mini-strip-grid, .billing-summary-grid, .finance-report-kpis, .customer-report-kpis, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .traffic-stat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  body[data-shell="app"] { overflow: auto; }
  .app-shell { display: block; min-height: 100vh; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(288px, 88vw);
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  body.sidebar-mobile-open .sidebar { transform: translateX(0); }
  body.sidebar-mobile-open .sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(2,6,23,.55); backdrop-filter: blur(4px); }
  html[data-sidebar="collapsed"] .brand-copy,
  html[data-sidebar="collapsed"] .sidebar-label,
  html[data-sidebar="collapsed"] .nav-text,
  html[data-sidebar="collapsed"] .nav-caret,
  html[data-sidebar="collapsed"] .version-line span,
  html[data-sidebar="collapsed"] .version-line strong { display: initial; }
  html[data-sidebar="collapsed"] .nav-submenu { display: none; }
  html[data-sidebar="collapsed"] .nav-group.is-open > .nav-submenu { display: grid; }
  html[data-sidebar="collapsed"] .brand,
  html[data-sidebar="collapsed"] .nav-item { justify-content: flex-start; }
  .workspace { height: auto; min-height: 100vh; overflow: visible; }
  .topbar { min-height: 60px; padding: 8px 10px; }
  .page-title { font-size: 16px; }
  .breadcrumb { max-width: 44vw; }
  .profile-copy, .profile-caret, .top-balance-chip { display: none; }
  .page-body { padding: 8px; gap: 8px; }
  .toolbar, .rk-toolbar, .settings-compact-control-row, .traffic-focus-controls { flex-direction: column; align-items: stretch; }
  .toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search { min-width: 0; width: 100%; }
  .form-grid, .rk-form-grid, .settings-form-grid, .settings-bank-grid, .bank-account-grid, .customer-filter-grid, .customer-info-grid, .compact-grid, .grid-2, .two-col, .three-col { grid-template-columns: 1fr; }
  .field-span-2 { grid-column: span 1; }
  .rk-summary-grid, .customer-summary-grid, .dash-overview-grid, .mini-strip-grid, .billing-summary-grid, .finance-report-kpis, .customer-report-kpis, .kpi-grid { grid-template-columns: 1fr; }
  .auth-grid { grid-template-columns: 1fr; }
  .auth-copy { display: none; }
  .auth-shell { padding: 12px; }
  .modal, .rk-modal { padding: 8px; align-items: flex-start; }
  .modal-card, .rk-modal-card { width: 100%; max-height: calc(100dvh - 16px); border-radius: var(--radius-xl); }
  .modal-body { padding: 10px; }
  .dropdown-menu, .action-dropdown-menu, .rk-dropdown-menu { min-width: min(92vw, 320px); }
  .customer-list-footer, .billing-list-footer{ flex-direction: column; align-items: stretch; }
  .app-log-wa-resend-form .rk-table-bulk-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }
  .app-log-wa-resend-form .entries-control {
    width: 100%;
    justify-content: space-between;
  }
  .app-log-wa-resend-form .entries-control select,
  .app-log-wa-resend-form .entries-control input[type="date"] {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .app-log-wa-resend-form .btn,
  .app-log-wa-resend-help {
    width: 100%;
    grid-column: 1 / -1;
  }
  table, .rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table { min-width: 720px; }
  th, td { padding: 9px 10px; }
  .traffic-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .traffic-iface-row { grid-template-columns: 1fr; }
  .wrap { padding: 12px; }
  .grid { grid-template-columns: 1fr; }
  .sheet { width: calc(100% - 16px); margin: 8px auto; padding: 12px; border-radius: 8px; }
  .invoice-head, .invoice-head.no-right-logo, .party-grid, .summary-grid { grid-template-columns: 1fr; }
  .title-box { text-align: left; }
  .invoice-title { font-size: 22px; }
}
@media (max-width: 520px) {
  body { font-size: 12px; }
  .topbar-left { min-width: 0; }
  .topbar-right { gap: 6px; }
  .wa-unread-chip { width: 34px; min-width: 34px; height: 34px; border-radius: 12px; }
  .wa-unread-icon, .wa-unread-icon svg { width: 19px; height: 19px; }
  .overview-number, .customer-summary-value, .finance-report-kpi-value, .amount { font-size: 18px; }
  .card, .rk-card { padding: 10px; border-radius: var(--radius-lg); }
  .rk-card-head, .table-head, .modal-head { padding: 10px; }
  .btn { width: auto; }
  .actions-stack-mobile { flex-direction: column; align-items: stretch; }
  .actions-stack-mobile .btn, .actions-stack-mobile a, .actions-stack-mobile button { width: 100%; }
  .traffic-stat-grid { grid-template-columns: 1fr; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  :root { --text: #111827; --muted: #6b7280; --border: #d1d5db; }
  html, body { background: #fff!important; color: #111827!important; }
  .toolbar, .rk-toolbar, .topbar, .sidebar, .sidebar-overlay, .toast-stack { display: none!important; }
  .sheet { width: 100%!important; max-width: none!important; margin: 0!important; padding: 0!important; box-shadow: none!important; border-radius: 0!important; }
  .invoice-head { grid-template-columns: 170px 1fr 170px!important; }
  .invoice-head.no-right-logo { grid-template-columns: 170px 1fr!important; }
  .party-grid { grid-template-columns: 1fr 1fr!important; }
  .summary-grid { grid-template-columns: .9fr 1.1fr!important; }
  .invoice-table th { background: #e5e7eb!important; color: #111827!important; }
  .invoice-table td { color: #374151!important; }
}

/* --------------------------------------------------------------------------
 * ui-v1.6.386 Compact Harmony Polish
 * Refinement layer: tighter spacing, aligned controls, compact data tables,
 * and consistent page rhythm across customer, billing, finance, settings,
 * online payment, logs, routers, and dashboard pages.
 * -------------------------------------------------------------------------- */
:root {
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 13px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --sidebar-w: 224px;
  --topbar-h: 58px;
  --container-gap: 8px;
  --field-h: 32px;
  --btn-h: 32px;
  --shadow: 0 14px 34px rgba(15,23,42,.13);
  --shadow-soft: 0 8px 20px rgba(15,23,42,.08);
  --shadow-sm: 0 2px 10px rgba(15,23,42,.07);
}

html[data-theme="noc-dark"], body[data-theme="noc-dark"],
html[data-theme="aurora-night"], body[data-theme="aurora-night"],
html[data-theme="ocean-contrast"], body[data-theme="ocean-contrast"] {
  --shadow: 0 16px 36px rgba(0,0,0,.34);
  --shadow-soft: 0 9px 22px rgba(0,0,0,.26);
  --shadow-sm: 0 3px 11px rgba(0,0,0,.22);
}

body { font-size: 12.5px; line-height: 1.36; }
body[data-shell="app"] { background-attachment: fixed; }

.sidebar-head { padding: 10px 10px 8px; }
.brand { gap: 8px; }
.brand-mark { width: 34px; height: 34px; border-radius: 12px; }
.brand-copy strong { font-size: 13px; }
.brand-copy span { font-size: 10px; }
.sidebar-nav { padding: 8px; }
.sidebar-section + .sidebar-section { margin-top: 9px; }
.sidebar-label { padding: 6px 8px 4px; font-size: 9px; }
.nav-list { gap: 3px; }
.nav-item, .nav-sub { min-height: 34px; gap: 8px; padding: 6px 8px; border-radius: 11px; }
.nav-icon { width: 26px; height: 26px; flex-basis: 26px; }
.nav-icon svg { width: 22px; height: 22px; }
.nav-submenu { padding: 3px 0 3px 33px; }
.nav-sub { min-height: 28px; padding: 5px 8px; font-size: 11.5px; border-radius: 9px; }
.sidebar-foot { padding: 8px; }
.version-stack, .version-button { padding: 7px; border-radius: 12px; }
.version-line { font-size: 10.5px; }

.topbar { min-height: var(--topbar-h); padding: 7px 12px; gap: 8px; }
.topbar-left, .topbar-right { gap: 8px; }
.breadcrumb { font-size: 10.5px; }
.page-title { margin-top: 1px; font-size: 16px; }
.page-body { gap: var(--container-gap); padding: var(--container-gap); }
.top-balance-chip, .profile-trigger { min-height: 34px; gap: 7px; padding: 4px 8px; }
.profile-avatar { width: 28px; height: 28px; }
.profile-copy strong { max-width: 132px; font-size: 11.5px; }
.profile-copy small, .top-balance-chip span { font-size: 10.5px; }

.card, .rk-card, .table-card, .dashboard-panel, .settings-card, .settings-compact-card, .profile-compact-card, .package-profile-card, .tool-system-card, .system-section-card, .quick-panel { border-radius: var(--radius-xl); }
.card, .rk-card { padding: 10px; }
.rk-card-head, .table-head, .rk-table-head, .card-header, .modal-head, .rk-modal-head, .quick-panel-header, .finance-report-head, .tool-import-preview-head, .system-control-head {
  min-height: 48px;
  gap: 8px;
  padding: 9px 10px;
  align-items: center;
}
.card-title, .panel-title, .settings-section-title, .finance-report-title, .quick-panel-title { font-size: 13.5px; }
.card-subtitle, .compact-sub, .data-sub, .finance-report-period, .help, .small, .muted, .helper-text { font-size: 11.3px; }
.stack { gap: 8px; }
.gap-sm { gap: 5px; }
.gap-md { gap: 8px; }
.gap-lg { gap: 12px; }
.actions, .rk-actions, .toolbar-actions, .rk-toolbar-actions { gap: 6px; }
.inline-form { margin: 0; display: inline-flex; align-items: center; }
.data-stack { display: grid; gap: 2px; min-width: 0; }
.data-main, .compact-main, .ppp-name-text { line-height: 1.18; }

.toolbar, .rk-toolbar, .ppp-table-control-row, .rk-table-controls, .settings-compact-control-row {
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-xl);
}
.ppp-table-control-row, .rk-table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-width: 0;
} .toolbar-actions-left, .toolbar-actions-compact, .settings-compact-actions { gap: 6px; }
.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search { min-width: min(360px, 100%); }
.toolbar-search-form { display: flex; width: 100%; gap: 6px; align-items: center; }
.table-meta, .customer-list-info, .billing-summary-text { font-size: 11.4px; }
.entries-control { gap: 5px; font-size: 11.3px; }
.entries-control select { min-width: 64px; }

.btn, .icon-btn, .rk-action-btn, .mini-action, .table-action-icon-btn {
  gap: 6px;
  min-height: var(--btn-h);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  box-shadow: none;
}
.btn:hover, .icon-btn:hover, .rk-action-btn:hover, .mini-action:hover, .table-action-icon-btn:hover { transform: none; box-shadow: var(--shadow-sm); }
.btn-small { min-height: 30px; padding: 5px 8px; font-size: 11.5px; border-radius: 9px; }
.btn-mini, .btn-xs, .mini-action { min-height: 26px; padding: 4px 7px; font-size: 10.8px; border-radius: 8px; }
.icon-btn { width: 32px; min-width: 32px; padding-inline: 0; }
.table-action-icon-btn { width: 28px; height: 28px; min-height: 28px; border-radius: 8px; }
.table-rp-icon-btn { min-width: 28px; }

.form-grid, .rk-form-grid, .settings-form-grid, .settings-bank-grid, .bank-account-grid, .customer-filter-grid, .customer-info-grid, .compact-grid, .grid-2, .two-col, .three-col { gap: 8px; }
.field, .settings-form-section, .customer-filter-field { gap: 4px; }
.field label, .label, .party-title, .settings-section-title { font-size: 11.5px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: var(--field-h);
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 12px;
}
select { padding-right: 28px; }
textarea { min-height: 76px; }
input[type="checkbox"], input[type="radio"] { width: 14px; height: 14px; }
.check-inline, .radio-row, .check-line, .field-radio-group label, .payment-radio-row, .channel, .traffic-lock-control { min-height: 28px; gap: 6px; }
.field-checklist, .check-grid, .permission-list, .channels { gap: 6px; }
.input-with-button, .api-credential-input-row { gap: 6px; }

.table-card, .ppp-compact-card, .billing-compact-card, .topup-compact-card, .settings-compact-card, .package-profile-card { border-radius: var(--radius-xl); }
.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .topup-compact-wrap, .profile-compact-wrap, .app-log-table-wrap { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
table, .rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table { min-width: 720px; }
th, td { padding: 7px 9px; }
tbody td { line-height: 1.28; }
.table-head .toolbar-actions, .table-head .rk-actions, .rk-table-head .rk-actions { margin-left: auto; }
.customer-actions, .ppp-compact-actions { gap: 4px; justify-content: flex-start; }
.customer-list-footer, .billing-list-footer, .customer-list-pagination { padding: 8px 10px; gap: 6px; }
.empty-state, .compact-empty, .placeholder-state, .settings-placeholder-state { min-height: 72px; padding: 14px; border-radius: var(--radius-lg); }

.badge, .status-badge, .status-pill, .badge-mini, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge {
  min-height: 21px;
  padding: 3px 7px;
  font-size: 10.4px;
  gap: 4px;
}
.badge-mini { min-height: 18px; padding: 2px 5px; font-size: 9.6px; }
.status-row { padding: 7px; gap: 5px; border-radius: var(--radius-md); }
.status-bar, .traffic-meter { height: 6px; }
.ppp-info-cell { position: relative; }
.ppp-info-cell-inner { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; }
.ppp-info-btn, .finance-report-info-dot {
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--primary-faint);
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
}
.ppp-info-popover {
  position: absolute;
  z-index: var(--z-dropdown);
  width: min(320px, 86vw);
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--dropdown-bg);
  color: var(--text);
  box-shadow: var(--shadow);
}
.ppp-info-popover[hidden] { display: none!important; }

.dropdown-menu, .action-dropdown-menu, .rk-dropdown-menu {
  top: calc(100% + 5px);
  min-width: 210px;
  padding: 5px;
  border-radius: 13px;
}
.action-dropdown-menu-compact { min-width: 190px; }
.dropdown-menu.is-open, details.action-dropdown[open] > .action-dropdown-menu { gap: 2px; }
.dropdown-label, .action-dropdown-section-title { padding: 6px 7px 4px; font-size: 9.5px; }
.dropdown-item, .action-dropdown-item, .rk-dropdown-item, .action-dropdown-button {
  min-height: 28px;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 9px;
  font-size: 11.8px;
}
.action-dropdown-item-compact { min-height: 26px; padding-block: 4px; }
.profile-balance-menu { padding: 7px; border-radius: 10px; }

.modal, .rk-modal { padding: 12px; }
.modal-card, .rk-modal-card { width: min(680px, 96vw); border-radius: var(--radius-2xl); }
.modal-body, .rk-modal-body { padding: 10px; }
.billing-filter-modal-card, .customer-extra-service-modal-card { width: min(700px, 96vw); }
.version-modal-card { width: min(820px, 96vw); }
.version-summary-bar, .version-tabs { gap: 6px; padding: 8px 10px; }
.version-pill { padding: 7px; border-radius: 11px; }
.version-tab, .panel-tab, .customer-tabs button, .whatsapp-template-tab { min-height: 30px; padding: 5px 9px; font-size: 11.5px; }
.version-history-list { gap: 7px; padding: 10px; }
.version-entry { padding: 8px; border-radius: 12px; }
.toast-stack { right: 10px; bottom: 10px; gap: 6px; }
.toast { padding: 9px 10px; border-radius: 13px; }
.alert, .notice, .error { padding: 8px 10px; border-radius: 12px; }

.rk-summary-grid, .customer-summary-grid, .dash-overview-grid, .mini-strip-grid, .billing-summary-grid, .finance-report-kpis, .customer-report-kpis, .kpi-grid { gap: 6px; }
.rk-summary-card, .customer-summary-card, .overview-tile, .mini-strip, .finance-report-kpi, .customer-report-kpi, .router-report-kpi, .system-metric, .mini-kpi {
  gap: 7px;
  padding: 8px;
  border-radius: var(--radius-lg);
}
.overview-tile { min-height: 68px; }
.overview-tile::after { width: 78px; height: 78px; inset: auto -16px -30px auto; }
.overview-kicker, .customer-summary-title, .customer-summary-label, .finance-report-kpi-label, .mini-strip-label { font-size: 11px; }
.overview-number, .customer-summary-value, .finance-report-kpi-value, .quick-panel-value, .amount { font-size: 16px; }
.overview-glyph, .rk-icon-box, .dash-icon, .customer-summary-icon, .finance-report-kpi-icon, .online-payment-kpi-icon, .router-report-kpi-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 10px;
}
.rk-icon-box svg, .dash-icon svg, .overview-glyph svg { width: 17px; height: 17px; }
.mini-strip { min-height: 40px; }
.dashboard-main-grid { gap: 6px; }
.panel-tabs { gap: 5px; padding: 6px; }
.dashboard-tab-panel { padding: 7px; } .status-list, .activity-feed, .traffic-iface-list { gap: 6px; }
.panel-header-simple { gap: 6px; padding: 8px; }
.activity-item { gap: 3px; padding: 7px; border-radius: 10px; }
.activity-time, .activity-action, .activity-meta { font-size: 10.5px; }
.traffic-compact-head, .traffic-focus-controls, .traffic-chart-head, .traffic-router-head { gap: 6px; }
.traffic-focus-controls, .traffic-chart-card { margin-top: 6px; }
.traffic-chart-card { min-height: 170px; padding: 8px; }
.traffic-stat-grid { gap: 5px; margin: 6px 0; }
.traffic-stat-grid div { padding: 5px; border-radius: 10px; }
.traffic-router-card { padding: 7px; }
.traffic-iface-row { gap: 6px; padding: 6px; border-radius: 10px; }

.customer-filter-panel, .rk-filter-panel, .finance-report-shell, .settings-compact-card { padding: 9px; }
.customer-tabs { gap: 6px; margin-bottom: 8px; }
.extra-service-list, .customer-extra-services, .permission-groups, .settings-permission-groups, .tool-import-jobs { gap: 7px; }
.extra-service-row, .permission-group-block, .settings-permission-group-block, .payment-info-box, .payment-important-section, .payment-sync-status, .api-credential-field, .box {
  padding: 8px;
  border-radius: var(--radius-md);
}
.extra-service-row { gap: 8px; }
.extra-service-note { margin-top: 2px; font-size: 10.5px; }
.finance-report-overview, .finance-report-actions-panel { padding: 9px; border-radius: var(--radius-md); }
.finance-report-buttons { gap: 6px; }
.finance-report-action-btn { min-height: 32px; }
.settings-compact-control-row { margin-bottom: 8px; }
.settings-compact-form, .settings-form-section { gap: 8px; }
.placeholder-wrap, .settings-placeholder-wrap { min-height: 240px; }
.placeholder-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 20px; }

.auth-shell { padding: 14px; }
.auth-grid { grid-template-columns: minmax(0,1fr) 360px; gap: 12px; }
.auth-copy, .auth-card { padding: 16px; }
.auth-copy { gap: 10px; }
.auth-copy p { font-size: 13px; }
.auth-login-form { margin-top: 12px; }

.wrap { padding: 14px; }
.wrap > .brand { margin-bottom: 10px; }
.brand-title { font-size: 16px; }
.head { gap: 8px; padding-bottom: 10px; }
.head h1 { font-size: 20px; }
.body { padding: 10px 0; gap: 9px; }
.grid { gap: 8px; }
.foot { padding: 10px; margin: 0 -10px -10px; }
.sheet { margin: 12px auto; padding: 12mm; }
.invoice-head { gap: 10px; padding-bottom: 10px; }
.invoice-title { font-size: 25px; }
.party-grid { gap: 10px; margin: 12px 0; }
.party-card, .pay-instructions { padding: 9px; }
.section-title { margin: 10px 0 6px; font-size: 13px; }
.summary-grid { gap: 10px; margin-top: 10px; }
.total-row { padding: 8px; }
.footer { margin-top: 10px; }

.app-log-subtitle, .dropdown-meta { font-size: 11.3px; }
.tool-import-preview-badges { gap: 5px; }
.system-metric { min-height: 46px; }

@media (max-width: 1180px) {
  .rk-summary-grid, .customer-summary-grid, .dash-overview-grid, .mini-strip-grid, .billing-summary-grid, .finance-report-kpis, .customer-report-kpis, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .topbar { min-height: 54px; padding: 6px 8px; }
  .page-title { font-size: 15px; }
  .page-body { padding: 6px; gap: 6px; }
  .toolbar, .rk-toolbar, .ppp-table-control-row, .rk-table-controls, .settings-compact-control-row, .traffic-focus-controls { gap: 6px; }
  .toolbar, .rk-toolbar, .ppp-table-control-row, .rk-table-controls { padding: 6px; }
  .actions, .rk-actions, .toolbar-actions, .rk-toolbar-actions { gap: 5px; }
  th, td { padding: 7px 8px; }
  table, .rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table { min-width: 680px; }
  .modal, .rk-modal { padding: 6px; }
  .modal-body, .rk-modal-body { padding: 8px; }
  .overview-tile { min-height: 60px; }
  .traffic-iface-row { grid-template-columns: 1fr; }
  .customer-list-footer, .billing-list-footer, .customer-list-pagination { padding: 7px 8px; }
}

@media (max-width: 520px) {
  body { font-size: 12px; }
  .brand-mark { width: 32px; height: 32px; }
  .card, .rk-card { padding: 8px; }
  .rk-card-head, .table-head, .rk-table-head, .modal-head, .rk-modal-head { min-height: 42px; padding: 8px; }
  .card-title, .panel-title, .settings-section-title, .finance-report-title, .quick-panel-title { font-size: 13px; }
  .overview-number, .customer-summary-value, .finance-report-kpi-value, .amount { font-size: 16px; }
  .rk-summary-card, .customer-summary-card, .overview-tile, .mini-strip, .finance-report-kpi, .customer-report-kpi, .router-report-kpi, .system-metric, .mini-kpi { padding: 7px; }
  .overview-glyph, .rk-icon-box, .dash-icon, .customer-summary-icon, .finance-report-kpi-icon, .online-payment-kpi-icon, .router-report-kpi-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .btn, .icon-btn, .rk-action-btn, .mini-action { min-height: 30px; padding: 5px 8px; }
  .table-action-icon-btn { width: 27px; height: 27px; min-height: 27px; }
  .sheet { width: calc(100% - 10px); margin: 5px auto; padding: 10px; }
}

/* --------------------------------------------------------------------------
 * ui-v1.6.386 Table Experience Polish
 * Premium, compact, and consistent data-table layer for all app pages.
 * -------------------------------------------------------------------------- */
:root {
  --table-radius: 15px;
  --table-pad-y: 7px;
  --table-pad-x: 9px;
  --table-font-size: 11.7px;
  --table-head-font-size: 10.25px;
  --table-head-height: 34px;
  --table-row-stripe: color-mix(in srgb, var(--surface-soft) 62%, transparent);
  --table-row-active: color-mix(in srgb, var(--primary) 7%, transparent);
  --table-row-border: color-mix(in srgb, var(--border) 78%, transparent);
  --table-head-border: color-mix(in srgb, var(--primary) 22%, var(--border));
  --table-scrollbar: color-mix(in srgb, var(--muted) 34%, transparent);
  --table-scrollbar-track: color-mix(in srgb, var(--surface-soft) 80%, transparent);
}

:where(.table-card, .user-table-card, .billing-compact-card, .topup-compact-card, .settings-compact-card, .package-profile-card, .profile-compact-card) {
  border-color: color-mix(in srgb, var(--border) 84%, var(--primary) 8%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 64%, transparent), transparent 42px),
    var(--bg-card);
  box-shadow: var(--shadow-soft);
}

:where(.table-head, .rk-table-head, .billing-table-head, .finance-table-head, .customer-table-head, .invoice-table-head, .logs-table-head, .package-table-head, .profile-table-head, .session-table-head) {
  min-height: 44px;
  padding: 8px 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 62%, transparent), color-mix(in srgb, var(--surface-soft) 50%, transparent));
  border-bottom-color: var(--table-head-border);
}

:where(.table-head, .rk-table-head) :where(.card-title, .panel-title, h1, h2, h3, strong) {
  letter-spacing: -.015em;
}

:where(.table-head, .rk-table-head) :where(.toolbar-actions, .rk-actions, .actions) {
  min-width: 0;
}

:where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap) {
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-soft) 78%, transparent));
  scrollbar-width: thin;
  scrollbar-color: var(--table-scrollbar) var(--table-scrollbar-track);
}

:where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap)::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

:where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap)::-webkit-scrollbar-track {
  background: var(--table-scrollbar-track);
  border-radius: 999px;
}

:where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap)::-webkit-scrollbar-thumb {
  background: var(--table-scrollbar);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

:where(table, .rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) {
  overflow: hidden;
  color: var(--text-soft);
  font-size: var(--table-font-size);
}

:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) th,
:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) td,
.table-wrap > table th,
.table-wrap > table td {
  padding: var(--table-pad-y) var(--table-pad-x);
  border-bottom-color: var(--table-row-border);
}

:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) thead th,
.table-wrap > table thead th {
  height: var(--table-head-height);
  color: var(--muted);
  white-space: nowrap;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--table-head-bg) 90%, var(--surface-strong)), color-mix(in srgb, var(--table-head-bg) 72%, transparent));
  border-bottom: 1px solid var(--table-head-border);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border-strong) 45%, transparent);
}

:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) thead th:first-child,
.table-wrap > table thead th:first-child { padding-left: 11px; }

:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) tbody tr,
.table-wrap > table tbody tr {
  transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}

:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) tbody tr:nth-child(even) td,
.table-wrap > table tbody tr:nth-child(even) td {
  background: var(--table-row-stripe);
}

:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) tbody tr:hover td,
.table-wrap > table tbody tr:hover td {
  background: var(--table-row-active);
  color: var(--text);
}

:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) tbody tr:hover td:first-child,
.table-wrap > table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--primary);
}

:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) tbody td,
.table-wrap > table tbody td {
  color: var(--text-soft);
}

:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) tbody td:first-child,
.table-wrap > table tbody td:first-child { padding-left: 11px; }

:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) tbody td:last-child,
.table-wrap > table tbody td:last-child { padding-right: 11px; }

:where(.data-main, .compact-main, .ppp-name-text, .router-name, .profile-name, .package-name, .invoice-number, .finance-row-title) {
  color: var(--text);
  font-weight: 820;
  letter-spacing: -.01em;
}

:where(.data-sub, .compact-sub, .ppp-name-only, .router-sub, .profile-sub, .package-sub, .finance-row-sub) {
  color: var(--muted);
  font-size: 10.9px;
  line-height: 1.22;
}

:where(.row-actions, .customer-actions, .ppp-compact-actions, .router-row-actions, .settings-user-actions, .settings-role-actions, .ppp-prof-actions, .hotspot-prof-col-action, .ppp-prof-col-action, .extra-service-actions, .user-balance-actions, .tool-db-backup-row-actions) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  min-width: max-content;
}

:where(.rk-table, .user-table, .package-table, .finance-table, .billing-report-table, .customer-report-table, .topup-compact-table, .app-log-table, .router-table, .online-payment-table) td:has(:where(.row-actions, .customer-actions, .ppp-compact-actions, .router-row-actions, .settings-user-actions, .settings-role-actions, .extra-service-actions, .user-balance-actions, .action-dropdown)) {
  width: 1%;
  white-space: nowrap;
}

:where(.table-action-icon-btn, .mini-action, .rk-action-btn, .action-dropdown-trigger) {
  border-color: color-mix(in srgb, currentColor 18%, var(--border));
}

:where(.table-action-icon-btn:hover, .mini-action:hover, .rk-action-btn:hover, .action-dropdown-trigger:hover) {
  filter: saturate(1.04);
}

:where(.badge, .status-badge, .status-pill, .badge-mini, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge, .app-log-status-badge, .online-payment-status) {
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  white-space: nowrap;
}

:where(.customer-list-footer, .billing-list-footer, .finance-report-pagination, .online-payment-pagination, .customer-list-pagination, .app-log-pagination, .table-foot, .user-table-foot) {
  min-height: 42px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 92%, transparent), color-mix(in srgb, var(--surface) 84%, transparent));
  border-top-color: var(--table-head-border);
}

:where(.customer-list-pagination-summary, .online-payment-pagination-summary, .finance-report-table-meta, .customer-list-info, .billing-summary-text, .table-meta) {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

:where(.entries-control, .user-entries) {
  min-height: 30px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}

:where(.entries-control select, .user-entries select) {
  min-height: 26px;
  border-radius: 8px;
  padding-block: 4px;
  font-size: 11px;
}

:where(.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search, .user-table-search) input[type="search"] {
  min-height: 31px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--input-bg) 92%, var(--surface-soft));
}

:where(.sort-mark, .table-sort-indicator) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 9px;
}

/* BEGIN ui-v1.6.467 stable sortable table headers */
:where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table) thead th {
  min-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

:where(.rk-th-content) {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  gap: 4px;
  white-space: nowrap;
  vertical-align: middle;
}

:where(.customer-sort-link) {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  gap: 4px;
  white-space: nowrap;
  vertical-align: middle;
}

:where(.customer-sort-link .rk-th-content) {
  width: 100%;
}

:where(.rk-th-label) {
  display: inline-block;
  min-width: 0;
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

:where(.rk-th-content .sort-mark, .rk-th-content .table-sort-indicator) {
  flex: 0 0 13px;
  margin-left: 0;
  vertical-align: middle;
}
/* END ui-v1.6.467 stable sortable table headers */

:where(th.is-sorted, th[aria-sort="ascending"], th[aria-sort="descending"]) {
  color: var(--primary);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 13%, var(--table-head-bg)), color-mix(in srgb, var(--table-head-bg) 74%, transparent));
}

:where(.table-rp-icon-btn) {
  font-variant-numeric: tabular-nums;
}

:where(.finance-table, .billing-report-table, .customer-report-table, .online-payment-table, .invoice-report-table) :where(td, th):is(:nth-last-child(2), :last-child) {
  white-space: nowrap;
}

:where(.app-log-wa-table, .app-log-table) td {
  vertical-align: top;
}

.rk-table-bulk-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  min-width: 0;
}

.rk-table-bulk-toolbar .btn {
  min-height: 34px;
}

.app-log-wa-resend-form,
.app-log-wa-resend-form .rk-table-bulk-toolbar {
  max-width: 100%;
}

.app-log-wa-resend-form .entries-control {
  flex: 0 1 auto;
  min-width: 0;
}

.app-log-wa-resend-form .entries-control select,
.app-log-wa-resend-form .entries-control input[type="date"] {
  width: auto;
  min-width: 118px;
  max-width: 150px;
}

.app-log-wa-resend-help {
  flex: 1 1 240px;
  min-width: 0;
  line-height: 1.35;
}

:where(.online-payment-table) :where(.reference-cell, .merchant-order-cell, .payment-ref-cell) {
  max-width: 280px;
  white-space: normal;
  word-break: break-word;
}

:where(.invoice-table) {
  font-size: 12px;
}

:where(.invoice-table) th { height: 34px; }

@media (max-width: 900px) {
  :root {
    --table-pad-y: 6px;
    --table-pad-x: 8px;
    --table-font-size: 11.4px;
    --table-head-font-size: 9.9px;
  }
  :where(.table-head, .rk-table-head, .billing-table-head, .finance-table-head, .customer-table-head, .invoice-table-head, .logs-table-head, .package-table-head, .profile-table-head, .session-table-head) {
    min-height: 40px;
    align-items: flex-start;
  }
  :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap) {
    border-radius: 0 0 13px 13px;
  }
  :where(.customer-list-footer, .billing-list-footer, .finance-report-pagination, .online-payment-pagination, .customer-list-pagination, .app-log-pagination, .table-foot, .user-table-foot) {
    min-height: 38px;
  }
}
@media (max-width: 640px) {
  :root {
    --table-pad-y: 5.5px;
    --table-pad-x: 7px;
    --table-head-height: 31px;
  }
  :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) {
    min-width: 660px;
  }
  :where(.table-action-icon-btn) {
    width: 26px;
    height: 26px;
    min-height: 26px;
    border-radius: 8px;
  }
  :where(.row-actions, .customer-actions, .ppp-compact-actions, .router-row-actions, .settings-user-actions, .settings-role-actions, .extra-service-actions, .user-balance-actions) { gap: 3px; }
}

/*
 * ui-v1.6.388 Sidebar collapsed submenu guard
 * Desktop collapsed sidebar stays icon-only while idle. Hover expansion is allowed
 * by JS, and submenu groups appear only during expanded/hover state.
 */
@media (min-width: 861px) {
  html[data-sidebar="collapsed"] .sidebar,
  .app-shell[data-sidebar="collapsed"] .sidebar {
    width: var(--sidebar-collapsed-w);
    overflow: hidden;
  }
  html[data-sidebar="collapsed"] .nav-group.is-open > .nav-submenu,
  .app-shell[data-sidebar="collapsed"] .nav-group.is-open > .nav-submenu,
  html[data-sidebar="collapsed"] .nav-submenu,
  .app-shell[data-sidebar="collapsed"] .nav-submenu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html[data-sidebar="collapsed"] .nav-group.is-open > .nav-group-trigger .nav-caret,
  .app-shell[data-sidebar="collapsed"] .nav-group.is-open > .nav-group-trigger .nav-caret {
    transform: none !important;
  }
  html[data-sidebar="collapsed"] .nav-group-trigger[aria-expanded="true"],
  .app-shell[data-sidebar="collapsed"] .nav-group-trigger[aria-expanded="true"] {
    justify-content: center;
  }
}

/* ui-v1.6.394: dashboard clickable cards use pointer cursor */
[data-card-href],
.overview-tile[data-card-href],
.rk-summary-card[data-card-href] {
  cursor: pointer;
}
[data-card-href] * {
  cursor: inherit;
}

/* ui-v1.6.395: icon + focus contrast hardening */
:where(.btn,.icon-btn,.rk-action-btn,.mini-action,.table-action-icon-btn,.action-dropdown-trigger,.nav-item,.nav-sub,.modal-close,.billing-filter-close,.close-btn) :where(svg,.table-action-icon-glyph,.rk-icon-box,.nav-icon,.dash-icon,.overview-glyph) {
  color: currentColor !important;
}
:where(.btn,.icon-btn,.rk-action-btn,.mini-action,.table-action-icon-btn,.action-dropdown-trigger) svg * {
  stroke: currentColor !important;
}
:where(.btn,.icon-btn,.rk-action-btn,.mini-action,.table-action-icon-btn,.action-dropdown-trigger,.nav-item,.nav-sub):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, #fff 30%);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--primary-faint), var(--shadow-sm);
}
:where(input,select,textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, #fff 30%);
  outline-offset: 1px;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-faint);
}
.nav-item.active .nav-icon,
.nav-item[aria-expanded="true"] .nav-icon,
.nav-item.active .nav-caret,
.nav-item[aria-expanded="true"] .nav-caret,
.nav-sub.active {
  color: #fff !important;
}
.nav-item:hover .nav-icon,
.nav-sub:hover,
.nav-item:focus-visible .nav-icon,
.nav-sub:focus-visible {
  color: var(--text) !important;
}
.nav-item.active:hover .nav-icon,
.nav-item[aria-expanded="true"]:hover .nav-icon,
.nav-sub.active:hover {
  color: #fff !important;
}
:where(.table-action-icon-btn.is-edit,.table-action-icon-btn.is-view,.table-action-icon-btn.is-print,.table-action-icon-btn.is-delete,.is-download,.is-view,.is-print,.is-delete):hover {
  background: color-mix(in srgb, currentColor 13%, var(--surface));
}
:where(.btn,.icon-btn,.rk-action-btn,.mini-action,.table-action-icon-btn).btn-danger:hover,
:where(.btn-danger,.btn-danger-soft,.is-delete,.dropdown-item-danger,.customer-bulk-delete-danger):hover {
  color: var(--danger) !important;
}
:where(.overview-tile,.rk-summary-card,.customer-summary-card,.finance-report-kpi,.router-report-kpi):hover :where(.overview-glyph,.rk-icon-box,.dash-icon,.customer-summary-icon,.finance-report-kpi-icon,.router-report-kpi-icon),
:where(.overview-tile,.rk-summary-card,.customer-summary-card,.finance-report-kpi,.router-report-kpi):focus-within :where(.overview-glyph,.rk-icon-box,.dash-icon,.customer-summary-icon,.finance-report-kpi-icon,.router-report-kpi-icon) {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
}
html[data-theme="noc-dark"] :where(.btn,.icon-btn,.rk-action-btn,.mini-action,.table-action-icon-btn,.action-dropdown-trigger,.nav-item,.nav-sub):focus-visible,
html[data-theme="aurora-night"] :where(.btn,.icon-btn,.rk-action-btn,.mini-action,.table-action-icon-btn,.action-dropdown-trigger,.nav-item,.nav-sub):focus-visible {
  outline-color: color-mix(in srgb, var(--primary) 82%, #fff 18%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 24%, transparent), var(--shadow-sm);
}

/* ui-v1.6.396: dashboard tab icon focus contrast */
.panel-tab { cursor: pointer; }
.panel-tab .dash-icon {
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
}
.panel-tab:hover .dash-icon,
.panel-tab:focus-visible .dash-icon {
  color: var(--primary-strong) !important;
  background: var(--surface) !important;
}
.panel-tab.is-active .dash-icon,
.panel-tab[aria-selected="true"] .dash-icon,
.panel-tab.is-active:focus-visible .dash-icon,
.panel-tab[aria-selected="true"]:focus-visible .dash-icon {
  color: #fff !important;
  background: rgba(255,255,255,.24) !important;
}
.panel-tab .dash-icon svg * {
  stroke: currentColor !important;
}

/* BEGIN ui-v1.6.397 compact filter modal polish */
.billing-filter-modal:is(.is-open,.billing-filter-modal-inline){padding:12px!important;align-items:center!important;justify-content:center!important}
.billing-filter-modal .billing-filter-modal-card{width:min(560px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px)!important;border:1px solid var(--border)!important;border-radius:18px!important;background:var(--modal-bg)!important;color:var(--text)!important;overflow:hidden!important;box-shadow:0 18px 48px #0f172a38!important}
.finance-topup-filter-modal .billing-filter-modal-card{width:min(590px,calc(100vw - 24px))!important}
.finance-report-filter-modal .billing-filter-modal-card{width:min(640px,calc(100vw - 24px))!important}
.billing-filter-modal .billing-filter-head{min-height:44px!important;padding:9px 11px!important;gap:8px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid var(--border)!important;background:var(--surface)!important;color:var(--text)!important}
.billing-filter-modal .card-title{font-size:14px!important;line-height:1.2!important;font-weight:850!important;color:var(--text)!important}
.billing-filter-modal .card-subtitle{margin-top:2px!important;font-size:11px!important;line-height:1.25!important;color:var(--muted)!important}
.billing-filter-modal .billing-filter-head .icon-btn{width:30px!important;height:30px!important;min-height:30px!important;flex:0 0 30px!important;padding:0!important;border-radius:10px!important;color:var(--text-soft)!important;background:var(--surface-soft)!important;border-color:var(--border)!important}
.billing-filter-modal .billing-filter-head .icon-btn:is(:hover,:focus-visible){color:var(--primary-strong)!important;background:var(--primary-soft)!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-faint)!important}
.billing-filter-modal .modal-close-svg,.billing-filter-modal .modal-close-svg *{stroke:currentColor!important}
.billing-filter-modal .billing-filter-form{display:grid!important;gap:8px!important;padding:11px!important;overflow:auto!important}
.billing-filter-modal :is(.billing-period-date-grid,.finance-report-filter-grid,.finance-topup-date-grid){gap:8px!important}
.billing-filter-modal .field{gap:4px!important}
.billing-filter-modal .field label{font-size:11px!important;font-weight:800!important;line-height:1.2!important;color:var(--muted)!important}
.billing-filter-modal :is(input,select){min-height:34px!important;height:34px!important;padding:6px 10px!important;border-radius:10px!important;border-color:var(--border)!important;background:var(--input-bg,var(--surface))!important;color:var(--text)!important;font-size:12px!important}
.billing-filter-modal :is(input,select):focus{outline:0!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-faint)!important}
.billing-filter-modal :is(.billing-filter-note,.billing-filter-subnote){margin:0!important;padding:8px 9px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--surface-soft)!important;color:var(--muted)!important;font-size:11px!important;line-height:1.35!important}
.billing-filter-modal .billing-filter-subnote{background:var(--primary-faint)!important;color:var(--primary-strong)!important;font-weight:850!important;letter-spacing:.04em!important;text-align:center!important}
.billing-filter-modal :is(.billing-filter-actions,.modal-actions){margin-top:2px!important;padding-top:9px!important;border-top:1px solid var(--border)!important;display:flex!important;justify-content:flex-end!important;gap:8px!important}
.billing-filter-modal :is(.billing-filter-actions,.modal-actions) .btn{min-height:34px!important;padding:7px 12px!important;border-radius:10px!important;font-size:12px!important}
@media(max-width:640px){.billing-filter-modal:is(.is-open,.billing-filter-modal-inline){padding:8px!important;align-items:flex-start!important}.billing-filter-modal .billing-filter-modal-card{width:100%!important;max-height:calc(100dvh - 16px)!important;border-radius:16px!important}.billing-filter-modal .billing-filter-head{padding:8px 10px!important}.billing-filter-modal .billing-filter-form{padding:10px!important;gap:7px!important}.billing-filter-modal :is(.billing-period-date-grid,.finance-report-filter-grid,.finance-topup-date-grid){grid-template-columns:1fr!important}.billing-filter-modal :is(.billing-filter-actions,.modal-actions){display:grid!important;grid-template-columns:1fr!important}.billing-filter-modal :is(.billing-filter-actions,.modal-actions) .btn{width:100%!important}}
/* END ui-v1.6.397 compact filter modal polish */

/* BEGIN ui-v1.6.398 package and renew modal compact polish */
.modal-card.package-modal-card.package-modal-workspace.rk-modal-card,.modal-card.package-modal-card.rk-modal-card:not(.billing-filter-modal-card){width:min(620px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px)!important;border:1px solid var(--border)!important;border-radius:18px!important;background:var(--modal-bg)!important;color:var(--text)!important;box-shadow:0 18px 48px #0f172a38!important;overflow:hidden!important}
.modal-card.package-modal-card.package-modal-workspace.customer-renew-modal-card.rk-modal-card{width:min(600px,calc(100vw - 24px))!important}
.package-modal-card .modal-head,.package-modal-card .rk-modal-head{min-height:44px!important;padding:9px 11px!important;gap:8px!important;border-bottom:1px solid var(--border)!important;background:var(--surface)!important;color:var(--text)!important}
.package-modal-card .modal-head>div,.package-modal-card .rk-modal-head>div{min-width:0!important}
.package-modal-card .card-title{font-size:14px!important;line-height:1.2!important;font-weight:850!important;color:var(--text)!important}
.package-modal-card .card-subtitle{margin-top:2px!important;font-size:11px!important;line-height:1.25!important;color:var(--muted)!important}
.package-modal-card .modal-head .icon-btn,.package-modal-card .rk-modal-head .icon-btn{width:30px!important;height:30px!important;min-height:30px!important;flex:0 0 30px!important;padding:0!important;border-radius:10px!important;color:var(--text-soft)!important;background:var(--surface-soft)!important;border-color:var(--border)!important}
.package-modal-card .modal-head .icon-btn:is(:hover,:focus-visible),.package-modal-card .rk-modal-head .icon-btn:is(:hover,:focus-visible){color:var(--primary-strong)!important;background:var(--primary-soft)!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-faint)!important}
.package-modal-card .modal-close-svg,.package-modal-card .modal-close-svg *{stroke:currentColor!important}
.package-modal-card>.modal-body,.package-modal-card>.rk-modal-body,.package-modal-card>form,.package-modal-card .package-form-stack{min-height:0!important;overflow:auto!important;padding:11px!important;gap:8px!important}
.package-modal-card .form-grid,.package-modal-card .rk-form-grid,.customer-renew-modal-card .grid-2{gap:8px!important}
.package-modal-card .field{gap:4px!important}
.package-modal-card .field label{font-size:11px!important;font-weight:800!important;line-height:1.2!important;color:var(--muted)!important}
.package-modal-card :is(input,select,textarea){border-color:var(--border)!important;background:var(--input-bg,var(--surface))!important;color:var(--text)!important;font-size:12px!important;border-radius:10px!important}
.package-modal-card :is(input,select){min-height:34px!important;height:34px!important;padding:6px 10px!important}
.package-modal-card textarea{min-height:70px!important;padding:8px 10px!important;line-height:1.35!important}
.package-modal-card :is(input,select,textarea):focus{outline:0!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-faint)!important}
.package-modal-card .help,.package-modal-card .muted,.package-modal-card small{font-size:11px!important;line-height:1.3!important;color:var(--muted)!important}
.customer-renew-modal-card .renew-summary-card{margin:0!important;padding:9px!important;gap:8px!important;border:1px solid var(--border)!important;border-radius:14px!important;background:var(--surface-soft)!important;color:var(--text)!important;box-shadow:none!important}
.customer-renew-modal-card .renew-summary-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:wrap!important}
.customer-renew-modal-card .renew-summary-price{font-size:14px!important;line-height:1.25!important;color:var(--text)!important}
.customer-renew-modal-card .renew-detail-grid{display:grid!important;grid-template-columns:120px minmax(0,1fr)!important;gap:5px 8px!important;font-size:11.5px!important;line-height:1.25!important}
.customer-renew-modal-card .renew-detail-grid span{color:var(--muted)!important}
.customer-renew-modal-card .renew-detail-grid strong{min-width:0!important;color:var(--text)!important;overflow-wrap:anywhere!important}
.customer-renew-modal-card .renew-note{margin:0!important;padding:8px 9px!important;border-radius:12px!important;font-size:11.3px!important;line-height:1.35!important;background:var(--surface-soft)!important;color:var(--text)!important}
.customer-renew-modal-card .renew-note ul{margin:5px 0 0 16px!important;padding:0!important}
.customer-renew-modal-card .renew-note li{margin:2px 0!important}
.package-modal-card .actions-stack-mobile,.customer-renew-modal-card .actions-stack-mobile{position:static!important;margin-top:0!important;padding-top:9px!important;border-top:1px solid var(--border)!important;display:flex!important;justify-content:flex-end!important;gap:8px!important;background:transparent!important}
.package-modal-card .actions-stack-mobile .btn,.customer-renew-modal-card .actions-stack-mobile .btn{min-height:34px!important;padding:7px 12px!important;border-radius:10px!important;font-size:12px!important}
@media(max-width:640px){.modal-card.package-modal-card.package-modal-workspace.rk-modal-card,.modal-card.package-modal-card.rk-modal-card:not(.billing-filter-modal-card){width:100%!important;max-height:calc(100dvh - 16px)!important;border-radius:16px!important}.package-modal-card .modal-head,.package-modal-card .rk-modal-head{padding:8px 10px!important}.package-modal-card>.modal-body,.package-modal-card>.rk-modal-body,.package-modal-card>form,.package-modal-card .package-form-stack{padding:10px!important;gap:7px!important}.package-modal-card .form-grid,.package-modal-card .rk-form-grid,.customer-renew-modal-card .grid-2{grid-template-columns:1fr!important}.customer-renew-modal-card .renew-detail-grid{grid-template-columns:1fr!important;gap:3px!important}.package-modal-card .actions-stack-mobile,.customer-renew-modal-card .actions-stack-mobile{display:grid!important;grid-template-columns:1fr!important}.package-modal-card .actions-stack-mobile .btn,.customer-renew-modal-card .actions-stack-mobile .btn{width:100%!important}}
/* END ui-v1.6.398 package and renew modal compact polish */

/* Partner administration uses the same compact modal rhythm as package forms. */
.central-partner-modal { padding: 12px; align-items: center; justify-content: center; }
.central-partner-modal-card { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border-radius: 18px; }
.central-partner-modal-card > .rk-modal-head { min-height: 44px; padding: 9px 11px; gap: 8px; border-bottom: 1px solid var(--border); background: var(--surface); }
.central-partner-modal-card .card-title { font-size: 14px; line-height: 1.2; font-weight: 850; }
.central-partner-modal-card .card-subtitle { margin-top: 2px; font-size: 11px; line-height: 1.3; }
.central-partner-modal-card .rk-modal-head .icon-btn { width: 30px; height: 30px; min-height: 30px; flex: 0 0 30px; padding: 0; border-radius: 10px; }
.central-partner-form { display: grid; gap: 10px; min-height: 0; overflow: auto; padding: 11px; }
.central-partner-form-section { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.central-partner-section-head { min-width: 0; }
.central-partner-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.central-partner-field-grid .field { gap: 4px; min-width: 0; }
.central-partner-field-grid .field label { font-size: 11px; font-weight: 800; line-height: 1.2; color: var(--muted); }
.central-partner-field-grid :is(input, select) { min-width: 0; min-height: 34px; height: 34px; padding: 6px 10px; border-radius: 10px; font-size: 12px; }
.central-partner-field-grid .field-span-2 { grid-column: span 2; }
.central-partner-domain-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; }
.central-partner-domain-input span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.central-partner-form .central-modal-actions { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--border); justify-content: flex-end; }
.central-partner-form .central-modal-actions .btn { min-height: 34px; padding: 7px 12px; border-radius: 10px; font-size: 12px; }
.central-admin-card:has(.central-partners-table) .rk-table-head .muted { display: none; }
.central-admin-card:has(.central-pops-table) .rk-table-head .muted,
.central-admin-card:has(.central-nodes-table) .rk-table-head .muted { display: none; }
.central-organization-modal { padding: 12px; align-items: center; justify-content: center; }
.central-organization-modal-card { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border-radius: 18px; }
.central-organization-modal-card > .rk-modal-head { min-height: 44px; padding: 9px 11px; gap: 8px; border-bottom: 1px solid var(--border); background: var(--surface); }
.central-organization-modal-card .card-title { font-size: 14px; line-height: 1.2; font-weight: 850; }
.central-organization-modal-card .card-subtitle { margin-top: 2px; font-size: 11px; line-height: 1.3; }
.central-organization-modal-card .rk-modal-head .icon-btn { width: 30px; height: 30px; min-height: 30px; flex: 0 0 30px; padding: 0; border-radius: 10px; }
.central-organization-form { display: grid; gap: 10px; min-height: 0; overflow: auto; padding: 11px; }
.central-organization-form-section { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
.central-organization-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.central-organization-field-grid .field { gap: 4px; min-width: 0; }
.central-organization-field-grid .field label { font-size: 11px; font-weight: 800; line-height: 1.2; color: var(--muted); }
.central-organization-field-grid :is(input, select) { min-width: 0; min-height: 34px; height: 34px; padding: 6px 10px; border-radius: 10px; font-size: 12px; }
.central-organization-field-grid .field-span-2 { grid-column: span 2; }
.central-organization-form .central-modal-actions { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--border); justify-content: flex-end; }
.central-organization-form .central-modal-actions .btn { min-height: 34px; padding: 7px 12px; border-radius: 10px; font-size: 12px; }
@media (max-width: 640px) {
  .central-partner-modal { padding: 8px; align-items: flex-start; }
  .central-partner-modal-card { width: 100%; max-height: calc(100dvh - 16px); border-radius: 16px; }
  .central-partner-form { padding: 10px; gap: 8px; }
  .central-partner-field-grid { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .central-partner-field-grid .field-span-2 { grid-column: auto; }
  .central-partner-domain-input { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .central-partner-form .central-modal-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .central-partner-form .central-modal-actions .btn { width: 100%; }
  .central-organization-modal { padding: 8px; align-items: flex-start; }
  .central-organization-modal-card { width: 100%; max-height: calc(100dvh - 16px); border-radius: 16px; }
  .central-organization-form { padding: 10px; gap: 8px; }
  .central-organization-field-grid { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .central-organization-field-grid .field-span-2 { grid-column: auto; }
  .central-organization-form .central-modal-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .central-organization-form .central-modal-actions .btn { width: 100%; }
}



/* BEGIN ui-v1.6.402 centralized visual normalization */
:root {
  --ui-version: "ui-v1.6.402";
  --warn: #f59e0b;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent);
  --focus-ring-strong: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
  --control-radius: 10px;
  --control-gap: 7px;
  --surface-line: color-mix(in srgb, var(--border) 86%, transparent);
  --surface-hover: color-mix(in srgb, var(--primary) 7%, var(--surface-soft));
  --table-cell-y: 7px;
  --table-cell-x: 9px;
  --table-text: var(--text-soft);
  --table-head-text: var(--muted);
}

html,
body {
  min-height: 100%;
}

body {
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(a[href], button, summary, select, label[for], .btn, .icon-btn, .rk-action-btn, .mini-action, .table-action-icon-btn, .nav-item, .nav-sub, .panel-tab, .customer-tabs button, .dropdown-item, .action-dropdown-item, .action-dropdown-button, .rk-dropdown-item, .traffic-iface-row, [role="button"], [data-dashboard-tab], [data-theme-option], [data-open-modal], [data-close-modal]) {
  cursor: pointer;
}

:where(button, .btn, .icon-btn, .rk-action-btn, .mini-action, .table-action-icon-btn, .panel-tab, .customer-tabs button, .nav-item, .nav-sub, .dropdown-item, .action-dropdown-item, .action-dropdown-button, .rk-dropdown-item, input, select, textarea, summary, a[href]):focus-visible {
  outline: 0 !important;
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border)) !important;
  box-shadow: var(--focus-ring) !important;
}

:where(svg) {
  flex: 0 0 auto;
}

:where(.nav-icon, .rk-icon-box, .dash-icon, .overview-glyph, .customer-summary-icon, .finance-report-kpi-icon, .metric-icon, .online-payment-kpi-icon, .router-report-kpi-icon, .table-action-icon-glyph) {
  color: currentColor;
}

:where(.nav-icon, .rk-icon-box, .dash-icon, .overview-glyph, .customer-summary-icon, .finance-report-kpi-icon, .metric-icon, .online-payment-kpi-icon, .router-report-kpi-icon, .table-action-icon-glyph) svg,
:where(.nav-icon, .rk-icon-box, .dash-icon, .overview-glyph, .customer-summary-icon, .finance-report-kpi-icon, .metric-icon, .online-payment-kpi-icon, .router-report-kpi-icon, .table-action-icon-glyph) svg * {
  stroke: currentColor !important;
}

:where(.card, .rk-card, .table-card, .dashboard-panel, .settings-card, .settings-compact-card, .profile-compact-card, .package-profile-card, .tool-system-card, .system-section-card, .quick-panel, .finance-report-shell, .customer-filter-panel, .rk-filter-panel) {
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--surface-line);
  box-shadow: var(--shadow-soft);
}

:where(.rk-card-head, .table-head, .rk-table-head, .card-header, .modal-head, .rk-modal-head, .quick-panel-header, .finance-report-head, .tool-import-preview-head, .system-control-head) {
  color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 70%, transparent), color-mix(in srgb, var(--surface-soft) 72%, transparent));
  border-bottom: 1px solid var(--surface-line);
}

:where(.card-title, .panel-title, .settings-section-title, .finance-report-title, .quick-panel-title, .table-title) {
  color: var(--text);
  font-weight: 850;
  letter-spacing: -.01em;
}

:where(.card-subtitle, .compact-sub, .data-sub, .panel-subtitle, .finance-report-period, .help, .small, .muted, .helper-text) {
  color: var(--muted) !important;
}

.workspace {
  background: transparent;
}

/* Application update: keep release metadata and privileged actions easy to scan. */
.update-status-list { padding: 2px 14px; }
.update-status-row { gap: 16px; }
.update-status-row > div { min-width: 0; }
.update-status-row strong { display: block; }
.update-status-row span:not(.status-badge),
.update-status-row small { display: block; margin-top: 3px; }
.update-manifest-url,
.update-checksum { overflow-wrap: anywhere; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; }
.update-check-panel,
.update-apply-panel { padding: 14px; border-top: 1px solid var(--surface-line); background: color-mix(in srgb, var(--surface-soft) 58%, transparent); }
.update-check-form,
.update-apply-form { display: grid; grid-template-columns: minmax(230px, 1fr) auto; align-items: end; gap: 10px; }
.update-token-field,
.update-confirm-field { max-width: 420px; }
.update-check-button,
.update-apply-button { min-width: 168px; justify-content: center; }
.update-available-card { border-color: color-mix(in srgb, var(--primary) 28%, var(--surface-line)); }
.update-apply-panel { background: color-mix(in srgb, var(--danger) 7%, var(--surface-soft)); }
.update-progress-card { border-color: color-mix(in srgb, var(--primary) 30%, var(--surface-line)); }
.update-progress-body { display: grid; gap: 12px; padding: 14px; }
.update-progress-track { height: 7px; overflow: hidden; background: var(--surface-soft); border: 1px solid var(--surface-line); border-radius: 4px; }
.update-progress-track span { display: block; width: 0; height: 100%; background: var(--primary); transition: width .35s ease; }
.update-progress-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.update-progress-meta strong { color: var(--text); }
.update-progress-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0; list-style: none; }
.update-progress-steps li { min-width: 0; padding: 7px 8px; border: 1px solid var(--surface-line); border-radius: 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; }
.update-progress-steps li.is-done { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--surface-line)); background: var(--success-soft); }
.update-progress-steps li.is-active { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--surface-line)); background: var(--primary-soft); }
.update-progress-card[data-state="failed"] { border-color: color-mix(in srgb, var(--danger) 34%, var(--surface-line)); }
.update-progress-card[data-state="failed"] .update-progress-track span { background: var(--danger); }
.update-progress-overlay[hidden] { display: none; }
.update-progress-overlay { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--surface) 84%, rgba(10, 20, 34, .72)); backdrop-filter: blur(5px); }
.update-progress-overlay-dialog { width: min(520px, 100%); display: grid; gap: 13px; padding: 24px; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--surface-line)); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; }
.update-progress-overlay-dialog h2 { margin: 0; font-size: 20px; }
.update-progress-overlay-dialog p { margin: 0; }
.update-progress-spinner { width: 34px; height: 34px; margin: 0 auto; border: 3px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: update-progress-spin .8s linear infinite; }
.update-progress-overlay-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; text-align: left; }
.update-progress-overlay-meta strong { color: var(--text); text-transform: capitalize; }
.update-progress-overlay-note { color: var(--muted); font-size: 12px; line-height: 1.45; }
body.update-in-progress { overflow: hidden; }
@keyframes update-progress-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .update-status-list { padding: 2px 10px; }
  .update-status-row { align-items: flex-start; gap: 8px; }
  .update-check-panel,
  .update-apply-panel { padding: 10px; }
  .update-check-form,
  .update-apply-form { grid-template-columns: 1fr; }
  .update-token-field,
  .update-confirm-field,
  .update-check-button,
  .update-apply-button { max-width: none; width: 100%; }
  .update-progress-body { padding: 10px; }
  .update-progress-meta { display: grid; gap: 3px; }
  .update-progress-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .update-progress-overlay { padding: 14px; }
  .update-progress-overlay-dialog { padding: 20px 16px; }
  .update-progress-overlay-meta { display: grid; gap: 4px; }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: color-mix(in srgb, var(--topbar-bg) 92%, var(--bg) 8%);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.page-body {
  align-content: start;
}

.sidebar,
.sidebar-nav,
.sidebar-foot,
.sidebar-head {
  color: var(--text);
}

.nav-item,
.nav-sub {
  user-select: none;
}

.nav-item:hover,
.nav-sub:hover,
.nav-item:focus-visible,
.nav-sub:focus-visible {
  color: var(--text);
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.nav-item.active,
.nav-item[aria-expanded="true"],
.nav-sub.active {
  color: #ffffff !important;
}

.nav-item.active .nav-icon,
.nav-item[aria-expanded="true"] .nav-icon,
.nav-sub.active .nav-icon {
  color: #ffffff !important;
}

html[data-sidebar="collapsed"] .nav-submenu,
.app-shell[data-sidebar="collapsed"] .nav-submenu {
  display: none !important;
}

:where(.toolbar, .rk-toolbar, .ppp-table-control-row, .rk-table-controls, .settings-compact-control-row, .toolbar-actions-with-search, .traffic-focus-controls) {
  min-width: 0;
}

:where(.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search, .toolbar-search-form) {
  min-width: min(340px, 100%);
  max-width: 100%;
}

:where(.toolbar-search-form, .billing-search-form, .finance-report-search) :where(input, select) {
  width: 100%;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  width: 100%;
  min-height: var(--field-h);
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--control-radius);
  box-shadow: none;
}

:where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--muted) 68%, transparent);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
  outline: 0;
  color: var(--text);
  background: var(--input-bg);
  border-color: color-mix(in srgb, var(--primary) 58%, var(--input-border));
  box-shadow: var(--focus-ring);
}

:where(input, select, textarea):disabled,
:where(input, select, textarea)[readonly] {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  border-color: var(--border);
}

:where(.btn, .icon-btn, .rk-action-btn, .mini-action, .table-action-icon-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-color, var(--text));
  background: var(--btn-bg, var(--surface));
  border: 1px solid var(--btn-border, var(--border));
  white-space: nowrap;
}

:where(.btn, .icon-btn, .rk-action-btn, .mini-action, .table-action-icon-btn):is(:hover, :focus-visible) {
  color: var(--btn-color, var(--primary-strong));
  background: color-mix(in srgb, var(--btn-bg, var(--surface)) 72%, var(--primary-soft) 28%);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--btn-border, var(--border)));
}

:where(.btn-primary, .btn-success, .btn-danger, .btn-warning) {
  color: #ffffff !important;
}

:where(.btn-primary, .btn-success, .btn-danger, .btn-warning) :where(svg, svg *) {
  stroke: currentColor !important;
}

:where(.table-action-icon-btn) {
  line-height: 1;
}

:where(.table-action-icon-btn .rk-icon-box, .table-action-icon-glyph.rk-icon-box) {
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
}

:where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) {
  background: var(--surface);
  border-color: var(--surface-line);
}

:where(table, .rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) {
  color: var(--table-text);
  border-collapse: separate;
  border-spacing: 0;
}

:where(th, td) {
  padding: var(--table-cell-y) var(--table-cell-x);
  border-bottom-color: var(--table-row-border, var(--border));
}

:where(thead th) {
  color: var(--table-head-text);
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--table-head-border, var(--border));
  vertical-align: middle;
}

:where(tbody td) {
  color: var(--text-soft);
  background: transparent;
  vertical-align: middle;
}

:where(tbody tr:hover td) {
  color: var(--text);
  background: var(--table-row-hover);
}

:where(.actions, .rk-actions, .toolbar-actions, .rk-toolbar-actions, .customer-actions, .ppp-compact-actions) {
  align-items: center;
  min-width: 0;
}

:where(.badge, .status-badge, .status-pill, .badge-mini, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  line-height: 1.1;
  white-space: nowrap;
}

:where(.panel-tabs, .customer-tabs, .version-tabs) {
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}

:where(.panel-tab, .customer-tabs button, .version-tab, .whatsapp-template-tab) {
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
}

:where(.panel-tab, .customer-tabs button, .version-tab, .whatsapp-template-tab):is(:hover, :focus-visible),
:where(.panel-tab.is-active, .panel-tab[aria-selected="true"], .customer-tabs button.is-active, .customer-tabs button[aria-selected="true"], .version-tab.is-active, .whatsapp-template-tab.is-active) {
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
}

:where(.panel-tab.is-active, .panel-tab[aria-selected="true"], .customer-tabs button.is-active, .customer-tabs button[aria-selected="true"]) :where(.rk-icon-box, .dash-icon),
:where(.panel-tab, .customer-tabs button):is(:hover, :focus-visible) :where(.rk-icon-box, .dash-icon) {
  color: #ffffff !important;
  background: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 52%, transparent) !important;
}

:where(.overview-tile, .rk-summary-card, .customer-summary-card, .finance-report-kpi, .customer-report-kpi, .router-report-kpi, .system-metric, .mini-kpi) {
  color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 70%, transparent), color-mix(in srgb, var(--surface-soft) 78%, transparent));
  border: 1px solid var(--surface-line);
}

:where(.overview-tile, .rk-summary-card, .customer-summary-card, .finance-report-kpi, .customer-report-kpi, .router-report-kpi, .system-metric, .mini-kpi):is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: color-mix(in srgb, var(--surface-hover) 72%, var(--surface) 28%);
}

:where(.overview-tile, .rk-summary-card, .customer-summary-card, .finance-report-kpi, .customer-report-kpi, .router-report-kpi, .system-metric, .mini-kpi):is(:hover, :focus-within) :where(.rk-icon-box, .dash-icon, .overview-glyph, .customer-summary-icon, .finance-report-kpi-icon, .metric-icon, .online-payment-kpi-icon, .router-report-kpi-icon) {
  color: #ffffff !important;
  background: var(--primary) !important;
}

.dashboard-main-grid,
.dash-overview-grid,
.mini-strip-grid,
.rk-summary-grid,
.customer-summary-grid,
.billing-summary-grid,
.finance-report-kpis,
.customer-report-kpis,
.kpi-grid {
  min-width: 0;
}

.modal,
.rk-modal {
  background: transparent;
}

.modal-card,
.rk-modal-card,
.billing-filter-modal-card,
.package-modal-card,
.customer-renew-modal-card,
.customer-extra-service-modal-card {
  color: var(--modal-text, var(--text)) !important;
  background: var(--modal-bg, var(--bg-card)) !important;
  border: 1px solid var(--modal-border, var(--border)) !important;
  box-shadow: var(--shadow) !important;
}

.modal-card :where(.card-title, .panel-title, h1, h2, h3),
.rk-modal-card :where(.card-title, .panel-title, h1, h2, h3) {
  color: var(--modal-text, var(--text)) !important;
}

.modal-card :where(.card-subtitle, .help, .muted, small),
.rk-modal-card :where(.card-subtitle, .help, .muted, small) {
  color: var(--muted) !important;
}

.billing-filter-modal-card,
.modal-card.billing-filter-modal-card {
  width: min(700px, calc(100vw - 24px)) !important;
}

.package-modal-card,
.modal-card.package-modal-card.package-modal-workspace.rk-modal-card {
  width: min(640px, calc(100vw - 24px)) !important;
}

.customer-renew-modal-card,
.modal-card.package-modal-card.package-modal-workspace.customer-renew-modal-card.rk-modal-card {
  width: min(620px, calc(100vw - 24px)) !important;
}

#customer-renew-modal .renew-summary-card.rk-summary-card {
  display: grid !important;
  grid-template-columns: minmax(118px, 140px) minmax(0, 1fr) !important;
  gap: 10px 12px !important;
  align-items: stretch !important;
  padding: 10px !important;
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
}

#customer-renew-modal .renew-summary-top {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  padding: 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
}

#customer-renew-modal .renew-summary-price {
  max-width: none !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  color: var(--primary-strong) !important;
}

#customer-renew-modal .renew-detail-grid {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  gap: 5px 10px !important;
  align-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 11.6px !important;
  line-height: 1.3 !important;
}

#customer-renew-modal .renew-detail-grid > span {
  color: var(--muted) !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

#customer-renew-modal .renew-detail-grid > strong {
  color: var(--text) !important;
  font-weight: 820 !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#customer-renew-modal [data-renew-summary-username] {
  display: none !important;
}

.dropdown-menu,
.action-dropdown-menu,
.rk-dropdown-menu,
.profile-balance-menu,
.ppp-info-popover {
  color: var(--text);
  background: var(--dropdown-bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.dropdown-item,
.action-dropdown-item,
.rk-dropdown-item,
.action-dropdown-button {
  color: var(--text-soft);
}

.dropdown-item:is(:hover, :focus-visible),
.action-dropdown-item:is(:hover, :focus-visible),
.rk-dropdown-item:is(:hover, :focus-visible),
.action-dropdown-button:is(:hover, :focus-visible) {
  color: var(--text);
  background: var(--primary-faint);
}

html[data-theme="clean-light"] :where(.btn-primary, .btn-success, .btn-danger, .btn-warning),
body[data-theme="clean-light"] :where(.btn-primary, .btn-success, .btn-danger, .btn-warning),
html[data-theme="classic"] :where(.btn-primary, .btn-success, .btn-danger, .btn-warning),
body[data-theme="classic"] :where(.btn-primary, .btn-success, .btn-danger, .btn-warning) {
  color: #ffffff !important;
}

@media (max-width: 1180px) {
  .dashboard-main-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 860px) {
  :root {
    --topbar-h: 54px;
    --container-gap: 6px;
    --field-h: 32px;
    --btn-h: 31px;
    --table-cell-y: 7px;
    --table-cell-x: 8px;
  }

  .app-shell {
    display: block;
  }

  .workspace {
    height: 100dvh;
    overflow: auto;
  }

  .topbar {
    min-height: var(--topbar-h);
  }

  .page-body {
    padding: 6px;
    gap: 6px;
  }

  :where(.toolbar, .rk-toolbar, .ppp-table-control-row, .rk-table-controls, .settings-compact-control-row, .traffic-focus-controls) {
    align-items: stretch;
  }

  :where(.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search, .toolbar-search-form) {
    min-width: 100%;
    flex: 1 1 100%;
  }

  :where(.toolbar-actions, .rk-actions, .actions, .toolbar-actions-with-search) {
    flex-wrap: wrap;
  }

  .modal,
  .rk-modal {
    padding: 6px !important;
    align-items: flex-start !important;
  }

  .modal-card,
  .rk-modal-card,
  .billing-filter-modal-card,
  .package-modal-card,
  .customer-renew-modal-card {
    width: 100% !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 520px) {
  :root {
    --table-cell-y: 7px;
    --table-cell-x: 7px;
  }

  .page-title {
    font-size: 14.5px;
  }

  .profile-copy,
  .top-balance-chip span {
    display: none;
  }

  .dash-overview-grid,
  .mini-strip-grid,
  .rk-summary-grid,
  .customer-summary-grid,
  .billing-summary-grid,
  .finance-report-kpis,
  .customer-report-kpis,
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  #customer-renew-modal .renew-summary-card.rk-summary-card {
    grid-template-columns: 1fr !important;
  }

  #customer-renew-modal .renew-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  #customer-renew-modal .renew-detail-grid > span::after {
    content: "" !important;
  }

  #customer-renew-modal .renew-detail-grid > strong {
    margin-bottom: 5px !important;
  }
}
/* END ui-v1.6.402 centralized visual normalization */



/* BEGIN ui-v1.6.415 clean renewal summary list */
#customer-renew-modal .renew-summary-card.rk-summary-card{
  display:grid!important;
  grid-template-columns:minmax(150px,190px) minmax(0,1fr)!important;
  gap:12px!important;
  align-items:start!important;
  padding:10px 12px!important;
  overflow:hidden!important;
}
#customer-renew-modal .renew-summary-top{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:6px!important;
  min-width:0!important;
}
#customer-renew-modal .renew-summary-price{
  display:block!important;
  max-width:170px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  line-height:1.35!important;
}
#customer-renew-modal .renew-detail-grid.renew-detail-list{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  white-space:normal!important;
}
#customer-renew-modal .renew-detail-row{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  gap:6px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#customer-renew-modal .renew-detail-label,
#customer-renew-modal .renew-detail-value{
  display:inline!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
  max-width:100%!important;
  font-size:12.5px!important;
  line-height:1.35!important;
  color:var(--text)!important;
  white-space:normal!important;
}
#customer-renew-modal .renew-detail-label{
  font-weight:750!important;
}
#customer-renew-modal .renew-detail-label::after{
  content:' :'!important;
  color:var(--text)!important;
  opacity:.92!important;
}
#customer-renew-modal .renew-detail-value{
  font-weight:850!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
#customer-renew-modal [data-renew-summary-username]{display:none!important;}
@media(max-width:780px){
  #customer-renew-modal .renew-summary-card.rk-summary-card{grid-template-columns:1fr!important;gap:10px!important;}
  #customer-renew-modal .renew-summary-price{max-width:none!important;}
}
/* END ui-v1.6.415 clean renewal summary list */


/* BEGIN ui-v1.6.416 global font scale up */
:root{
  --rk-font-body-up: 13.8px;
  --rk-font-small-up: 12.4px;
  --rk-font-tiny-up: 11.4px;
  --rk-font-label-up: 12.6px;
  --rk-font-control-up: 13px;
  --rk-font-title-up: 15px;
  --rk-font-page-title-up: 18px;
  --table-font-size: 12.7px;
  --table-head-font-size: 11.3px;
}
body{font-size:var(--rk-font-body-up)!important;line-height:1.45!important;}
:where(.brand-copy strong){font-size:14px!important;}
:where(.brand-copy span,.version-line,.breadcrumb,.profile-copy small,.top-balance-chip span,.profile-balance-menu span,.profile-balance-menu small,.version-pill span){font-size:var(--rk-font-tiny-up)!important;}
:where(.sidebar-label){font-size:10.2px!important;}
:where(.nav-item,.nav-sub){font-size:12.8px!important;}
:where(.page-title){font-size:var(--rk-font-page-title-up)!important;line-height:1.18!important;}
:where(.card-title,.panel-title,.settings-section-title,.finance-report-title,.quick-panel-title,.table-head .card-title,.rk-card-head .card-title){font-size:var(--rk-font-title-up)!important;line-height:1.25!important;}
:where(.card-subtitle,.compact-sub,.data-sub,.panel-subtitle,.finance-report-period,.help,.small,.muted,.helper-text,.table-meta,.customer-list-info,.billing-summary-text,.entries-control,.app-log-subtitle,.dropdown-meta,.traffic-summary,.traffic-chart-subtitle,.traffic-router-meta){font-size:var(--rk-font-small-up)!important;line-height:1.38!important;}
:where(.btn,.icon-btn,.rk-action-btn,.mini-action,.table-action-icon-btn,.action-dropdown-trigger,.dropdown-item,.action-dropdown-item){font-size:var(--rk-font-control-up)!important;line-height:1.25!important;}
:where(.btn-small){font-size:12.5px!important;}
:where(.btn-mini,.btn-xs,.mini-action){font-size:11.8px!important;}
:where(.field label,.label,.party-title,.settings-section-title,.filter-label,.form-label){font-size:var(--rk-font-label-up)!important;line-height:1.3!important;}
:where(table,.rk-table,.compact-table,.user-table,.package-table,.finance-table,.billing-compact-table,.billing-report-table,.customer-report-table,.topup-compact-table,.profile-compact-table,.app-log-table,.router-table,.session-table,.system-table,.online-payment-table,.voucher-compact-table,.voucher-report-table,.invoice-report-table,.tool-db-backup-table,.tool-db-jobs-table,.tool-import-preview-table,.tool-import-jobs-table){font-size:var(--table-font-size)!important;}
:where(tbody td,.rk-table tbody td,.compact-table tbody td,.user-table tbody td,.package-table tbody td,.finance-table tbody td,.billing-compact-table tbody td,.billing-report-table tbody td,.customer-report-table tbody td,.topup-compact-table tbody td,.profile-compact-table tbody td,.app-log-table tbody td,.router-table tbody td,.session-table tbody td,.system-table tbody td,.online-payment-table tbody td,.voucher-compact-table tbody td,.voucher-report-table tbody td,.invoice-report-table tbody td,.tool-import-preview-table tbody td){line-height:1.36!important;}
:where(.data-main,.compact-main,.ppp-name-text,.mini-strip strong,.activity-text,.activity-title,.dropdown-item strong,.profile-copy strong,.top-balance-chip strong){font-size:13.4px!important;line-height:1.28!important;}
:where(.overview-number,.customer-summary-value,.finance-report-kpi-value,.metric-chip,.quick-panel-value,.amount){font-size:19px!important;line-height:1.15!important;}
:where(.overview-kicker,.customer-summary-title,.finance-report-kpi-label,.metric-title,.mini-strip-label,.activity-time,.activity-action,.activity-meta,.traffic-stat-grid span,.traffic-iface-main span,.traffic-rate span,.extra-service-note){font-size:var(--rk-font-small-up)!important;line-height:1.34!important;}
:where(.badge,.status-badge,.status-pill,.badge-mini,.finance-status-badge,.customer-status-badge,.service-type-badge,.extra-service-bill-badge){font-size:11.4px!important;line-height:1.15!important;}
:where(.badge-mini){font-size:10.6px!important;}
:where(.ppp-info-btn,.finance-report-info-dot,.sort-mark,.table-sort-indicator){font-size:11px!important;}
:where(.modal-card,.rk-modal-card,.dropdown-menu,.action-dropdown-menu,.rk-dropdown-menu,.popover,.ppp-info-popover){font-size:var(--rk-font-body-up)!important;}
#customer-renew-modal .renew-detail-label,#customer-renew-modal .renew-detail-value{font-size:13.4px!important;line-height:1.42!important;}
#customer-renew-modal .renew-summary-price{font-size:14px!important;line-height:1.38!important;}
:where(.invoice-table){font-size:13px!important;}
:where(.invoice-title){font-size:29px!important;}
@media(max-width:900px){
  :root{--rk-font-body-up:13.4px;--rk-font-control-up:12.7px;--table-font-size:12.3px;--table-head-font-size:11px;}
  :where(.page-title){font-size:17px!important;}
}
@media(max-width:640px){
  :root{--rk-font-body-up:13.2px;--rk-font-small-up:12px;--rk-font-control-up:12.5px;--table-font-size:12px;--table-head-font-size:10.7px;}
  :where(.page-title){font-size:16.3px!important;}
  :where(.card-title,.panel-title,.settings-section-title,.finance-report-title,.quick-panel-title){font-size:14.2px!important;}
}
/* END ui-v1.6.416 global font scale up */


/* BEGIN ui-v1.6.418 login mobile polish with embedded binary */
body[data-shell="auth"]{
  min-height:100dvh!important;
  overflow-x:hidden!important;
}
body[data-shell="auth"] .auth-shell{
  min-height:100dvh!important;
  padding:clamp(18px,4vw,34px)!important;
  display:grid!important;
  place-items:center!important;
}
body[data-shell="auth"] .auth-grid{
  width:min(1040px,100%)!important;
}
body[data-shell="auth"] .auth-card{
  width:100%!important;
  max-width:440px!important;
  margin-inline:auto!important;
}
body[data-shell="auth"] .auth-card .card-title{
  font-size:clamp(23px,3vw,30px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}
body[data-shell="auth"] .auth-card .card-subtitle{
  font-size:13.4px!important;
  line-height:1.45!important;
  max-width:42ch!important;
}
body[data-shell="auth"] .auth-login-form .field{
  gap:6px!important;
}
body[data-shell="auth"] .auth-login-form label{
  font-size:12.8px!important;
  font-weight:750!important;
}
body[data-shell="auth"] .auth-login-form input{
  min-height:46px!important;
  font-size:14.5px!important;
  border-radius:14px!important;
  padding:10px 13px!important;
}
body[data-shell="auth"] .auth-login-form .btn,
body[data-shell="auth"] .auth-login-form button[type="submit"]{
  min-height:46px!important;
  font-size:14.5px!important;
  border-radius:14px!important;
  justify-content:center!important;
}
@media(max-width:860px){
  body[data-shell="auth"] .auth-shell{
    padding:16px!important;
    align-items:center!important;
  }
  body[data-shell="auth"] .auth-grid{
    grid-template-columns:1fr!important;
    width:min(460px,100%)!important;
    gap:12px!important;
  }
  body[data-shell="auth"] .auth-copy{
    display:none!important;
  }
  body[data-shell="auth"] .auth-card{
    max-width:460px!important;
    padding:20px!important;
    border-radius:22px!important;
  }
  body[data-shell="auth"] .eyebrow{
    font-size:11.8px!important;
    letter-spacing:.08em!important;
  }
}
@media(max-width:420px){
  body[data-shell="auth"] .auth-shell{
    padding:12px!important;
  }
  body[data-shell="auth"] .auth-card{
    padding:17px!important;
    border-radius:20px!important;
  }
  body[data-shell="auth"] .auth-card .stack.gap-md{
    gap:10px!important;
  }
  body[data-shell="auth"] .auth-card .card-title{
    font-size:22px!important;
  }
  body[data-shell="auth"] .auth-card .card-subtitle{
    font-size:12.8px!important;
  }
  body[data-shell="auth"] .auth-login-form{
    margin-top:12px!important;
    gap:11px!important;
  }
  body[data-shell="auth"] .auth-login-form input,
  body[data-shell="auth"] .auth-login-form .btn,
  body[data-shell="auth"] .auth-login-form button[type="submit"]{
    min-height:45px!important;
    font-size:14px!important;
  }
}
@media(max-height:620px) and (max-width:860px){
  body[data-shell="auth"] .auth-shell{
    place-items:start center!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
  body[data-shell="auth"] .auth-card{
    padding:14px!important;
  }
  body[data-shell="auth"] .auth-card .stack.gap-md{
    gap:7px!important;
  }
  body[data-shell="auth"] .auth-card .card-subtitle{
    display:none!important;
  }
  body[data-shell="auth"] .auth-login-form{
    margin-top:9px!important;
    gap:8px!important;
  }
}
/* END ui-v1.6.418 login mobile polish with embedded binary */


/* BEGIN ui-v1.6.419 unified table pagination position */
.ppp-table-control-row,
.settings-user-table-control-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  width:100%!important;
}
.ppp-table-control-row .entries-control,
.customer-table-controls .entries-control,
.settings-user-table-control-row .entries-control,
.router-table-control-row .entries-control{
  flex:0 0 auto!important;
}
.ppp-table-control-row .table-meta,
.customer-table-controls .table-meta,
.settings-user-table-control-row .table-meta,
.router-table-control-row .table-meta{
  flex:1 1 220px!important;
  min-width:180px!important;
}
.table-pagination,
.rk-table-pagination{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
.table-pagination a,
.table-pagination span,
.rk-table-pagination a,
.rk-table-pagination span{
  min-height:30px!important;
  padding:6px 10px!important;
  border-radius:10px!important;
  border:1px solid var(--border)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1.1!important;
  text-decoration:none!important;
}
.table-pagination a,
.rk-table-pagination a{
  color:var(--text)!important;
  background:var(--surface-soft)!important;
  cursor:pointer!important;
}
.table-pagination a:hover,
.rk-table-pagination a:hover{
  background:var(--surface-strong)!important;
}
.table-pagination .active,
.rk-table-pagination .active{
  font-weight:800!important;
  color:var(--text)!important;
  background:var(--surface)!important;
}
.table-pagination .disabled,
.rk-table-pagination .disabled{
  color:var(--muted)!important;
  background:transparent!important;
  opacity:.62!important;
  cursor:not-allowed!important;
}
.table-foot.customer-list-footer,
.table-foot.billing-list-footer,
.finance-report-footer,
.online-payment-footer,
.rk-table-footer,
.rk-list-pagination-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  padding:9px 10px!important;
  border-top:1px solid var(--border)!important;
  background:transparent!important;
}
.table-foot .customer-list-info,
.rk-list-pagination-footer .customer-list-info{
  flex:1 1 220px!important;
  color:var(--muted)!important;
}
.table-foot .table-pagination,
.table-foot .rk-table-pagination,
.rk-list-pagination-footer .table-pagination,
.rk-list-pagination-footer .rk-table-pagination{
  margin-left:auto!important;
}
@media(max-width:720px){
  .ppp-table-control-row,
  .settings-user-table-control-row,
  .table-foot.customer-list-footer,
  .table-foot.billing-list-footer,
  .finance-report-footer,
  .online-payment-footer,
  .rk-table-footer,
  .rk-list-pagination-footer{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
  }
  .table-pagination,
  .rk-table-pagination{
    width:100%!important;
    margin-left:0!important;
    justify-content:space-between!important;
  }
  .table-pagination a,
  .table-pagination span,
  .rk-table-pagination a,
  .rk-table-pagination span{
    flex:1 1 auto!important;
  }
}
/* END ui-v1.6.419 unified table pagination position */

/* BEGIN ui-v1.6.464 compact table view controls */
:where(.rk-table-head, .table-head) :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show),
:where(.rk-table-footer, .table-foot, .customer-list-footer, .billing-list-footer, .finance-report-pagination, .online-payment-pagination, .customer-list-pagination, .app-log-pagination) :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show, .rk-auto-table-entries) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

:where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show, .rk-auto-table-entries) select,
:where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show, .rk-auto-table-entries) input {
  min-height: 30px !important;
  height: 30px !important;
  width: auto !important;
  max-width: 92px !important;
  padding: 4px 26px 4px 9px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
}

:where(.customer-list-footer, .billing-list-footer, .finance-report-pagination, .online-payment-pagination, .customer-list-pagination, .app-log-pagination, .table-foot, .user-table-foot, .rk-table-footer, .rk-list-pagination-footer, .rk-auto-table-footer) {
  min-height: 38px !important;
  padding: 6px 10px !important;
  gap: 8px !important;
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent) !important;
}

:where(.customer-list-pagination-top) {
  min-height: 36px !important;
  padding: 5px 10px !important;
}

:where(.table-pagination, .rk-table-pagination, .customer-list-pagination, .app-log-pagination) {
  gap: 4px !important;
}

:where(.table-pagination, .rk-table-pagination, .customer-list-pagination, .app-log-pagination) :where(a, span, button) {
  min-width: 0 !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 4px 9px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text-soft) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

:where(.table-pagination, .rk-table-pagination, .customer-list-pagination, .app-log-pagination) :where(a:hover, button:hover:not(:disabled)) {
  color: var(--primary-strong) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border)) !important;
  background: var(--primary-soft) !important;
}

:where(.table-pagination, .rk-table-pagination, .customer-list-pagination, .app-log-pagination) :where(.active) {
  color: #fff !important;
  border-color: var(--primary) !important;
  background: var(--primary) !important;
}

:where(.table-pagination, .rk-table-pagination, .customer-list-pagination, .app-log-pagination) :where(.disabled, button:disabled) {
  color: var(--muted) !important;
  background: transparent !important;
  opacity: .58 !important;
  cursor: not-allowed !important;
}

.rk-auto-table-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rk-auto-table-info {
  white-space: nowrap;
}

@media(max-width:720px){
  .rk-auto-table-left {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
  :where(.table-pagination, .rk-table-pagination, .customer-list-pagination, .app-log-pagination) :where(a, span, button) {
    padding-inline: 7px !important;
  }
}
/* END ui-v1.6.464 compact table view controls */

/* BEGIN ui-v1.6.420 profile photo compact preview */
.user-profile-editor{
  display:grid!important;
  grid-template-columns:minmax(104px,128px) minmax(0,1fr)!important;
  gap:16px!important;
  align-items:start!important;
  padding:12px!important;
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  background:var(--surface-soft)!important;
  max-width:760px!important;
}
.user-profile-preview{
  width:112px!important;
  height:112px!important;
  max-width:112px!important;
  max-height:112px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,var(--panel-bg-soft),var(--surface))!important;
  border:1px solid var(--border)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
  flex:0 0 auto!important;
}
.user-profile-photo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:112px!important;
  max-height:112px!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}
.user-profile-placeholder{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  font-size:34px!important;
  font-weight:900!important;
  color:var(--text)!important;
  background:linear-gradient(135deg,var(--accent-soft),rgba(255,255,255,.04))!important;
}
.user-profile-editor .field{margin:0!important;}
.user-profile-editor input[type="file"]{
  width:100%!important;
  max-width:420px!important;
  min-height:38px!important;
}
.user-profile-editor .check-inline{
  align-items:center!important;
  gap:8px!important;
  font-size:var(--rk-font-sm-up,13px)!important;
  line-height:1.35!important;
}
@media(max-width:640px){
  .user-profile-editor{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    text-align:left!important;
    gap:12px!important;
    padding:12px!important;
  }
  .user-profile-editor>.stack{width:100%!important;}
  .user-profile-preview{
    width:96px!important;
    height:96px!important;
    max-width:96px!important;
    max-height:96px!important;
    border-radius:22px!important;
  }
  .user-profile-photo{
    max-width:96px!important;
    max-height:96px!important;
  }
  .user-profile-placeholder{font-size:30px!important;}
}
/* END ui-v1.6.420 profile photo compact preview */

/* BEGIN ui-v1.6.421 user management avatar compact */
.settings-user-table .settings-user-name-col,
.settings-user-compact-card .settings-user-name-col{
  width:220px!important;
  max-width:260px!important;
}
.settings-user-table .settings-user-name-col .user-cell,
.settings-user-compact-card .settings-user-name-col .user-cell{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-width:0!important;
  max-width:100%!important;
}
.settings-user-table .settings-user-name-col .user-avatar-thumb,
.settings-user-table .settings-user-name-col .user-avatar-fallback,
.settings-user-compact-card .settings-user-name-col .user-avatar-thumb,
.settings-user-compact-card .settings-user-name-col .user-avatar-fallback,
.user-table .user-cell>.user-avatar-thumb,
.user-table .user-cell>.user-avatar-fallback{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  flex:0 0 34px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  overflow:hidden!important;
  display:inline-grid!important;
  place-items:center!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:none!important;
}
.settings-user-table .settings-user-name-text,
.settings-user-compact-card .settings-user-name-text{
  min-width:0!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
}
.settings-user-table .settings-user-name-text .compact-main,
.settings-user-compact-card .settings-user-name-text .compact-main,
.settings-user-table .settings-user-name-text .data-sub,
.settings-user-compact-card .settings-user-name-text .data-sub{
  max-width:190px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
@media(max-width:900px){
  .settings-user-table .settings-user-name-col,
  .settings-user-compact-card .settings-user-name-col{width:auto!important;max-width:none!important;}
  .settings-user-table .settings-user-name-col .user-avatar-thumb,
  .settings-user-table .settings-user-name-col .user-avatar-fallback,
  .settings-user-compact-card .settings-user-name-col .user-avatar-thumb,
  .settings-user-compact-card .settings-user-name-col .user-avatar-fallback,
  .user-table .user-cell>.user-avatar-thumb,
  .user-table .user-cell>.user-avatar-fallback{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    flex-basis:30px!important;
    font-size:12px!important;
  }
  .settings-user-table .settings-user-name-text .compact-main,
  .settings-user-compact-card .settings-user-name-text .compact-main,
  .settings-user-table .settings-user-name-text .data-sub,
  .settings-user-compact-card .settings-user-name-text .data-sub{max-width:220px!important;}
}
/* END ui-v1.6.421 user management avatar compact */


/* BEGIN ui-v1.6.422 hide package profile compact sub rows */
.package-profile-card .package-table .data-sub.compact-sub,
.profile-compact-card .package-table .data-sub.compact-sub{
  display:none!important;
}
.package-profile-card .package-table .data-main.compact-main,
.profile-compact-card .package-table .data-main.compact-main{
  display:inline-block!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

.network-map-icon{background:transparent!important;border:0!important;}
.network-pin{position:relative;display:grid;width:30px;height:30px;place-items:center;color:#fff;font:800 13px/1 sans-serif;box-shadow:0 3px 9px rgba(15,23,42,.34);}
.network-pin--customer{width:28px;height:28px;border-radius:50% 50% 50% 0;background:#e5483c;transform:rotate(-45deg);}
.network-pin--customer::after{width:10px;height:10px;border-radius:50%;background:#fff;content:"";transform:rotate(45deg);}
.network-pin--odc{border-radius:5px;background:#235a9f;border:2px solid #fff;}
.network-pin--odc::after{position:absolute;bottom:-7px;border-width:7px 7px 0;border-style:solid;border-color:#235a9f transparent transparent;content:"";}
.network-pin--odp{border-radius:5px;background:#11877d;border:2px solid #fff;transform:rotate(45deg);}
.network-pin--odp b{transform:rotate(-45deg);}
.network-map-legend{display:flex;flex-wrap:wrap;gap:10px 16px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:12px;}
.network-map-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.legend-pin{display:inline-grid;width:18px;height:18px;place-items:center;color:#fff;font:800 10px/1 sans-serif;}
.legend-pin-odc{border-radius:3px;background:#235a9f;}
.legend-pin-odp{border-radius:3px;background:#11877d;transform:rotate(45deg);}
.legend-pin-odp::first-letter{transform:rotate(-45deg);}
.legend-pin-customer{width:16px;height:16px;border-radius:50% 50% 50% 0;background:#e5483c;transform:rotate(-45deg);}
.legend-line{width:26px;height:0;border-top:3px dashed;}
.legend-line-odc-odp{border-color:#2878b8;}
.legend-line-odp-customer{border-color:#d7493e;}
/* END ui-v1.6.422 hide package profile compact sub rows */

/* BEGIN ui-v1.6.423 customer info popover polish */
.ppp-info-cell{position:relative!important;overflow:visible!important;}
.ppp-info-cell-inner{display:inline-flex!important;align-items:center!important;gap:7px!important;max-width:100%!important;min-width:0!important;vertical-align:middle!important;}
.ppp-info-btn{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  max-width:22px!important;
  border-radius:999px!important;
  display:inline-grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid color-mix(in srgb,var(--primary) 38%,var(--border))!important;
  background:linear-gradient(180deg,var(--primary-faint),color-mix(in srgb,var(--primary-faint) 70%,var(--surface)))!important;
  color:var(--primary)!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:0 6px 14px rgba(15,23,42,.14)!important;
  flex:0 0 22px!important;
}
.ppp-info-btn:is(:hover,:focus-visible),
.ppp-info-btn[aria-expanded="true"]{
  background:var(--primary)!important;
  border-color:var(--primary)!important;
  color:#fff!important;
  outline:none!important;
  transform:translateY(-1px)!important;
}
.ppp-info-popover{
  position:fixed!important;
  z-index:calc(var(--z-modal, 80) + 20)!important;
  width:min(380px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100dvh - 24px)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--border) 82%,var(--primary) 18%)!important;
  border-radius:16px!important;
  background:var(--dropdown-bg)!important;
  color:var(--text)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.28)!important;
  backdrop-filter:blur(14px)!important;
}
.ppp-info-popover[hidden]{display:none!important;}
.ppp-info-popover.is-open{display:block!important;}
.ppp-info-card{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--text)!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  max-height:calc(100dvh - 28px)!important;
  overflow:auto!important;
}
.ppp-info-title{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:12px 14px!important;
  border-bottom:1px solid var(--border)!important;
  background:linear-gradient(180deg,var(--surface-soft),var(--surface))!important;
  color:var(--text)!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.25!important;
  overflow-wrap:anywhere!important;
}
.ppp-info-title span{
  color:var(--muted)!important;
  font-size:11.5px!important;
  font-weight:750!important;
  white-space:nowrap!important;
}
.ppp-info-title .ppp-info-optic-readings{
  display:inline-flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  gap:4px!important;
}
html[data-theme] body[data-shell="app"] .ppp-info-title .ppp-info-optic.badge-success{color:var(--success)!important;}
html[data-theme] body[data-shell="app"] .ppp-info-title .ppp-info-optic.badge-warn{color:var(--warn)!important;}
html[data-theme] body[data-shell="app"] .ppp-info-title .ppp-info-optic.badge-danger{color:var(--danger)!important;}
.ppp-info-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  margin:0!important;
  padding:8px 12px!important;
}
.ppp-info-list>div{
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  align-items:start!important;
  gap:8px!important;
  margin:0!important;
  padding:6px 0!important;
  border-bottom:1px dashed color-mix(in srgb,var(--border) 72%,transparent)!important;
}
.ppp-info-list>div:last-child{border-bottom:0!important;}
.ppp-info-list dt,
.ppp-info-list dd{
  margin:0!important;
  padding:0!important;
  min-width:0!important;
  line-height:1.32!important;
}
.ppp-info-list dt{
  color:var(--muted)!important;
  font-size:11.5px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.ppp-info-list dd{
  color:var(--text)!important;
  font-size:12.5px!important;
  font-weight:700!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.ppp-info-services{
  margin:0!important;
  padding:10px 12px 12px!important;
  border-top:1px solid var(--border)!important;
  background:color-mix(in srgb,var(--surface-soft) 55%,transparent)!important;
}
.ppp-info-services-title{
  margin:0 0 7px!important;
  color:var(--text)!important;
  font-size:12px!important;
  font-weight:850!important;
}
.ppp-info-service-list{display:flex!important;flex-direction:column!important;gap:7px!important;}
.ppp-info-service-item{
  display:flex!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:8px!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  background:var(--surface)!important;
}
.ppp-info-service-main{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:5px!important;min-width:0!important;}
.ppp-info-service-name{color:var(--text)!important;font-size:12px!important;font-weight:820!important;overflow-wrap:anywhere!important;}
.ppp-info-service-mode,
.ppp-info-service-bill-badge{
  display:inline-flex!important;
  align-items:center!important;
  min-height:18px!important;
  padding:2px 6px!important;
  border-radius:999px!important;
  border:1px solid var(--border)!important;
  background:var(--surface-soft)!important;
  color:var(--muted)!important;
  font-size:10.3px!important;
  font-weight:760!important;
  line-height:1.1!important;
}
.ppp-info-service-bill-badge.is-recurring{color:var(--success)!important;background:var(--success-soft)!important;border-color:color-mix(in srgb,var(--success) 34%,transparent)!important;}
.ppp-info-service-bill-badge.is-pending{color:var(--warn)!important;background:var(--warn-soft)!important;border-color:color-mix(in srgb,var(--warn) 34%,transparent)!important;}
.ppp-info-service-bill-badge.is-billed{color:var(--info)!important;background:var(--info-soft)!important;border-color:color-mix(in srgb,var(--info) 34%,transparent)!important;}
.ppp-info-service-bill-badge.is-inactive{color:var(--muted)!important;background:var(--surface-soft)!important;}
.ppp-info-service-amount{white-space:nowrap!important;color:var(--text)!important;font-size:12px!important;font-weight:850!important;}
.ppp-info-service-empty,
.ppp-info-loading,
.ppp-info-error{
  padding:10px!important;
  border-radius:12px!important;
  background:var(--surface)!important;
  border:1px dashed var(--border)!important;
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:700!important;
}
.ppp-info-error{color:var(--danger)!important;background:var(--danger-soft)!important;border-color:color-mix(in srgb,var(--danger) 36%,transparent)!important;}
@media(max-width:640px){
  .ppp-info-btn{width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;font-size:12px!important;}
  .ppp-info-popover{width:calc(100vw - 18px)!important;max-width:calc(100vw - 18px)!important;border-radius:15px!important;}
  .ppp-info-title{padding:11px 12px!important;font-size:13.5px!important;}
  .ppp-info-list{padding:7px 11px!important;}
  .ppp-info-list>div{grid-template-columns:86px minmax(0,1fr)!important;gap:7px!important;padding:5px 0!important;}
  .ppp-info-list dt{font-size:11px!important;}
  .ppp-info-list dd{font-size:12px!important;}
  .ppp-info-service-item{flex-direction:column!important;align-items:flex-start!important;}
}
/* END ui-v1.6.423 customer info popover polish */


/* BEGIN ui-v1.6.424 online payment customer name id column */
.online-payment-table .table-head-sub{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:.84em;
  font-weight:700;
  line-height:1.15;
}
.online-payment-table .online-customer-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0;
}
.online-payment-table .online-customer-name{
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.online-payment-table .online-customer-id{
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  color:var(--muted);
}
@media(max-width:720px){
  .online-payment-table .online-customer-name,
  .online-payment-table .online-customer-id{max-width:100%;}
}
/* END ui-v1.6.424 online payment customer name id column */

/* BEGIN ui-v1.6.425 online payment status colors */
.online-payment-table .online-payment-status,
.online-payment-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-height:24px!important;
  padding:3px 9px!important;
  border-radius:999px!important;
  font-size:11.5px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  border:1px solid color-mix(in srgb,currentColor 24%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(15,23,42,.06)!important;
}
.online-payment-status-dot{
  width:7px!important;
  height:7px!important;
  border-radius:999px!important;
  background:currentColor!important;
  flex:0 0 auto!important;
  box-shadow:0 0 0 2px color-mix(in srgb,currentColor 16%,transparent)!important;
}
.online-payment-status-success{
  color:var(--success)!important;
  background:var(--success-soft)!important;
  border-color:color-mix(in srgb,var(--success) 38%,transparent)!important;
}
.online-payment-status-warn{
  color:var(--warn)!important;
  background:var(--warn-soft)!important;
  border-color:color-mix(in srgb,var(--warn) 38%,transparent)!important;
}
.online-payment-status-danger{
  color:var(--danger)!important;
  background:var(--danger-soft)!important;
  border-color:color-mix(in srgb,var(--danger) 38%,transparent)!important;
}
.online-payment-status-muted{
  color:var(--muted)!important;
  background:var(--surface-soft)!important;
  border-color:var(--border)!important;
}
.online-payment-error{
  display:block!important;
  margin-top:4px!important;
  max-width:180px!important;
  color:#dc2626!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:720px){
  .online-payment-status{min-height:22px!important;padding:3px 8px!important;font-size:11px!important;}
}
/* END ui-v1.6.425 online payment status colors */

/* BEGIN ui-v1.6.426 customer package column stack */
.customer-report-table :where(th.ppp-package-col,td.ppp-package-col),
.ppp-compact-table :where(th.ppp-package-col,td.ppp-package-col){
  min-width:150px!important;
  max-width:210px!important;
  white-space:normal!important;
}
.customer-report-table td.ppp-package-col .customer-package-stack,
.ppp-compact-table td.ppp-package-col .customer-package-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:3px!important;
  min-width:0!important;
  max-width:100%!important;
  line-height:1.24!important;
}
.customer-report-table td.ppp-package-col .customer-package-stack>.data-main.compact-main,
.ppp-compact-table td.ppp-package-col .customer-package-stack>.data-main.compact-main{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  color:var(--text)!important;
  font-weight:850!important;
  line-height:1.24!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.customer-report-table td.ppp-package-col .customer-package-stack>.data-sub.compact-sub,
.ppp-compact-table td.ppp-package-col .customer-package-stack>.data-sub.compact-sub{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.18!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:720px){
  .customer-report-table td.ppp-package-col .customer-package-stack,
  .ppp-compact-table td.ppp-package-col .customer-package-stack{gap:2px!important;}
  .customer-report-table td.ppp-package-col .customer-package-stack>.data-sub.compact-sub,
  .ppp-compact-table td.ppp-package-col .customer-package-stack>.data-sub.compact-sub{font-size:11.5px!important;}
}
/* END ui-v1.6.426 customer package column stack */


/* BEGIN ui-v1.6.427 session user view polish */
.session-page-head.rk-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 10px!important;
  padding:12px 14px!important;
  border:1px solid var(--border)!important;
  border-radius:16px!important;
  background:var(--surface)!important;
  box-shadow:var(--shadow-soft)!important;
}
.session-page-head .session-head-copy{min-width:0!important;display:grid!important;gap:3px!important;}
.session-page-head .card-title{margin:0!important;line-height:1.2!important;color:var(--text)!important;}
.session-page-head .session-head-note{margin:0!important;color:var(--muted)!important;font-size:12.5px!important;line-height:1.35!important;max-width:760px!important;}
.session-page-head .session-head-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;min-width:0!important;}
.session-page-head .session-head-actions .btn{min-height:34px!important;padding:7px 12px!important;border-radius:11px!important;}
.session-table-head.rk-card-head{padding:11px 12px!important;gap:10px!important;}
.session-table-head .card-subtitle{display:none!important;}
.session-table-wrap{margin-top:0!important;}
.session-table td .data-main{display:block!important;font-weight:750!important;color:var(--text)!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere!important;}
.session-table td .data-sub,
.session-table td .compact-sub{display:none!important;}
.session-table th,
.session-table td{vertical-align:middle!important;}
@media(max-width:860px){
  .session-page-head.rk-card{grid-template-columns:1fr!important;align-items:stretch!important;padding:11px!important;}
  .session-page-head .session-head-actions{justify-content:flex-start!important;}
}
@media(max-width:520px){
  .session-page-head .session-head-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;}
  .session-page-head .session-head-actions .btn{width:100%!important;justify-content:center!important;}
}
/* END ui-v1.6.427 session user view polish */


/* BEGIN ui-v1.6.428 router view polish */
.router-page-head.rk-card{
  padding:9px 10px!important;
  margin:0 0 8px!important;
  border-radius:16px!important;
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow-sm)!important;
}
.router-page-head .toolbar-actions,
.router-page-head .rk-toolbar-actions{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.router-page-head .action-dropdown-trigger{
  min-height:34px!important;
  padding:7px 11px!important;
  border-radius:12px!important;
  font-weight:800!important;
}
.router-page-head .toolbar-search,
.router-page-head .rk-toolbar-search{
  flex:1 1 280px!important;
  max-width:480px!important;
  min-width:220px!important;
  margin-left:auto!important;
}
.router-page-head .toolbar-search input[type="search"]{
  min-height:34px!important;
  border-radius:12px!important;
  padding:7px 12px!important;
}
.router-summary-grid.router-report-kpis.rk-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr))!important;
  gap:8px!important;
  margin:0 0 8px!important;
}
.router-report-kpi.rk-summary-card{
  min-height:58px!important;
  padding:9px 10px!important;
  border-radius:15px!important;
  align-items:center!important;
  gap:9px!important;
  overflow:hidden!important;
}
.router-report-kpi .router-report-kpi-icon{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  border-radius:12px!important;
}
.router-report-kpi .router-summary-title{
  display:block!important;
  margin-bottom:2px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.router-report-kpi strong{
  font-size:18px!important;
  line-height:1.05!important;
  letter-spacing:-.02em!important;
}
.router-time-card.rk-card{
  margin:0 0 9px!important;
  border-radius:16px!important;
  overflow:hidden!important;
}
.router-time-card .router-time-head.rk-card-head{
  padding:9px 10px!important;
  gap:8px!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface-soft)!important;
}
.router-time-card .card-title{
  font-size:var(--rk-font-md-up)!important;
  line-height:1.18!important;
  font-weight:900!important;
}
.router-time-card .card-subtitle{
  margin-top:2px!important;
  max-width:720px!important;
  line-height:1.32!important;
}
.router-time-grid.rk-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
  gap:8px!important;
  padding:9px 10px!important;
}
.router-time-grid .rk-summary-card{
  padding:8px 9px!important;
  border-radius:13px!important;
  min-height:54px!important;
}
.router-time-grid .rk-summary-card strong{
  margin-top:2px!important;
  font-size:var(--rk-font-md-up)!important;
  line-height:1.18!important;
  overflow-wrap:anywhere!important;
}
.router-time-grid .data-sub{
  margin-top:2px!important;
  line-height:1.28!important;
}
.router-clock-wrap{
  margin:0 10px 10px!important;
}
.router-time-help,
.router-time-alert{
  margin:0 10px 10px!important;
}
.router-compact-card.rk-card{
  border-radius:16px!important;
  overflow:hidden!important;
}
.router-table-control-row .table-meta{
  text-align:center!important;
}
.router-table-wrap.rk-table-wrap{
  border-radius:0!important;
}
.router-table.rk-table th,
.router-table.rk-table td{
  vertical-align:middle!important;
}
.router-table.rk-table th:nth-child(1){min-width:150px!important;}
.router-table.rk-table th:nth-child(2){min-width:160px!important;}
.router-table.rk-table th:nth-child(3){min-width:110px!important;}
.router-table.rk-table th:nth-child(4){min-width:130px!important;}
.router-table.rk-table th:nth-child(5){min-width:170px!important;}
.router-table .data-stack{
  gap:3px!important;
  min-width:0!important;
}
.router-table .data-main{
  display:block!important;
  max-width:240px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-weight:850!important;
}
.router-table .data-sub{
  display:block!important;
  max-width:260px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  line-height:1.24!important;
}
.router-table .badge{
  width:max-content!important;
  max-width:100%!important;
}
.router-row-actions.rk-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  flex-wrap:nowrap!important;
}
.router-row-actions .inline-form{
  margin:0!important;
}
.router-row-actions .table-action-icon-btn{
  min-width:34px!important;
  min-height:32px!important;
  padding:5px 7px!important;
  border-radius:10px!important;
}
.router-list-footer.rk-list-pagination-footer{
  padding:8px 10px!important;
}
.router-page-head.rk-card{
  position:relative!important;
  overflow:visible!important;
  z-index:70!important;
  justify-content:flex-start!important;
}
.router-page-head .router-page-toolbar,
.router-page-head .toolbar-actions,
.router-page-head .rk-toolbar-actions{
  position:relative!important;
  overflow:visible!important;
  z-index:10010!important;
}
.router-page-head .action-dropdown{position:relative!important;z-index:10020!important}
.router-page-head .action-dropdown[open]{z-index:10050!important}
.router-page-head .action-dropdown-menu,
.router-page-head .rk-dropdown-menu{
  z-index:10060!important;
  position:absolute!important;
  top:calc(100% + 8px)!important;
  left:0!important;
  right:auto!important;
  min-width:240px!important;
}
@media(max-width:920px){
  .router-summary-grid.router-report-kpis.rk-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .router-page-head .toolbar-search,.router-page-head .rk-toolbar-search{max-width:none!important;}
}
@media(max-width:720px){
  .router-page-head.rk-card{padding:8px!important;border-radius:14px!important;}.router-page-head .toolbar-actions,.router-page-head .rk-toolbar-actions{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;}
  .router-page-head .toolbar-search,.router-page-head .rk-toolbar-search{min-width:0!important;width:100%!important;margin-left:0!important;}
  .router-summary-grid.router-report-kpis.rk-summary-grid{grid-template-columns:1fr 1fr!important;gap:6px!important;}
  .router-report-kpi.rk-summary-card{padding:8px!important;min-height:52px!important;}
  .router-report-kpi .router-report-kpi-icon{width:28px!important;height:28px!important;flex-basis:28px!important;}
  .router-report-kpi strong{font-size:16px!important;}
  .router-time-card .router-time-head.rk-card-head{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;}
  .router-time-grid.rk-summary-grid{grid-template-columns:1fr!important;padding:8px!important;}
  .router-clock-wrap,.router-time-help,.router-time-alert{margin-left:8px!important;margin-right:8px!important;}
  .router-table-control-row .table-meta{text-align:left!important;}
  .router-row-actions.rk-actions{justify-content:flex-start!important;flex-wrap:wrap!important;}
}
@media(max-width:420px){
  .router-summary-grid.router-report-kpis.rk-summary-grid{grid-template-columns:1fr!important;}
  .router-row-actions .table-action-label{display:none!important;}
}
/* END ui-v1.6.428 router view polish */


/* BEGIN ui-v1.6.429 required field indicators */
:root{--required-mark-bg:color-mix(in srgb,var(--danger) 13%,transparent);--required-mark-border:color-mix(in srgb,var(--danger) 42%,transparent);}
.field label,.customer-filter-field label,.settings-form-section label{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;}
.required-mark,
.field:has(:is(input,select,textarea)[required])>label:not(:has(.required-mark))::before,
.customer-filter-field:has(:is(input,select,textarea)[required])>label:not(:has(.required-mark))::before,
.settings-form-section:has(:is(input,select,textarea)[required])>label:not(:has(.required-mark))::before{
  content:"!";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  min-width:18px;
  border-radius:999px;
  border:1px solid var(--required-mark-border);
  background:var(--required-mark-bg);
  color:var(--danger);
  font-size:12px;
  font-weight:900;
  line-height:1;
  vertical-align:middle;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--danger) 5%,transparent);
}
.field:has(:is(input,select,textarea)[required])>label:not(:has(.required-mark))::after,
.customer-filter-field:has(:is(input,select,textarea)[required])>label:not(:has(.required-mark))::after,
.settings-form-section:has(:is(input,select,textarea)[required])>label:not(:has(.required-mark))::after{
  content:"Wajib diisi";
  color:var(--danger);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.01em;
  padding:2px 7px;
  border-radius:999px;
  background:var(--required-mark-bg);
  border:1px solid var(--required-mark-border);
}
.field>label:has(.required-mark)::after,
.customer-filter-field>label:has(.required-mark)::after,
.settings-form-section>label:has(.required-mark)::after{
  content:"Wajib diisi";
  color:var(--danger);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.01em;
  padding:2px 7px;
  border-radius:999px;
  background:var(--required-mark-bg);
  border:1px solid var(--required-mark-border);
}
.field .check-inline,.field .radio-row label{display:inline-flex;align-items:center;gap:6px;}
.field.field-radio-group>label::after{display:none!important;}
@media(max-width:640px){.required-mark,.field:has(:is(input,select,textarea)[required])>label:not(:has(.required-mark))::before{width:17px;height:17px;min-width:17px;font-size:11px}.field:has(:is(input,select,textarea)[required])>label:not(:has(.required-mark))::after,.field>label:has(.required-mark)::after{font-size:10px;padding:2px 6px}}
/* END ui-v1.6.429 required field indicators */

/* BEGIN ui-v1.6.430 owner data email required */
.settings-user-table .settings-user-email-col{
  max-width:180px!important;
  min-width:130px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  color:var(--text)!important;
}
@media(max-width:720px){
  .settings-user-table .settings-user-email-col{max-width:150px!important;min-width:120px!important;}
}
/* END ui-v1.6.430 owner data email required */


/* BEGIN ui-v1.6.431 hotspot voucher manual generate */
.voucher-page-head.rk-card{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:12px 14px!important;
  margin-bottom:10px!important;
}
.voucher-page-head .voucher-page-title{min-width:0!important}
.voucher-page-head .toolbar-actions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.voucher-page-head .toolbar-search input{min-width:260px!important}
.voucher-hotspot-modal-card{width:min(680px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px)!important}
.voucher-hotspot-form{padding:14px!important;gap:12px!important;overflow:auto!important}
.voucher-hotspot-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.voucher-hotspot-form .field label{font-weight:850!important}
.voucher-hotspot-form .help{font-size:.82rem!important;line-height:1.35!important;text-transform:none!important}
.voucher-compact-table th,.voucher-compact-table td{white-space:nowrap!important;vertical-align:middle!important}
.voucher-compact-table .data-main{display:block!important;max-width:180px!important;overflow:hidden!important;text-overflow:ellipsis!important}
.voucher-status-pill{display:inline-flex!important;align-items:center!important;gap:5px!important;border-radius:999px!important;padding:4px 8px!important;font-weight:850!important;font-size:.82rem!important;border:1px solid var(--border)!important;background:var(--surface-soft)!important;color:var(--muted)!important}
.voucher-status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.voucher-status-pill.is-active{background:rgba(34,197,94,.14)!important;border-color:rgba(34,197,94,.34)!important;color:#22c55e!important}
.voucher-status-pill.is-used{background:rgba(245,158,11,.14)!important;border-color:rgba(245,158,11,.34)!important;color:#f59e0b!important}
.voucher-status-pill.is-disabled{background:rgba(239,68,68,.14)!important;border-color:rgba(239,68,68,.34)!important;color:#ef4444!important}
@media(max-width:860px){
  .voucher-page-head.rk-card{align-items:stretch!important;flex-direction:column!important}
  .voucher-page-head .toolbar-actions{width:100%!important}
  .voucher-page-head .toolbar-search{width:100%!important}
  .voucher-page-head .toolbar-search input{min-width:0!important;width:100%!important}
  .voucher-hotspot-form .form-grid{grid-template-columns:1fr!important}
  .voucher-hotspot-modal-card{width:100%!important;max-height:calc(100dvh - 12px)!important;border-radius:16px!important}
  .voucher-compact-table .data-main{max-width:220px!important}
}
/* END ui-v1.6.431 hotspot voucher manual generate */


/* BEGIN ui-v1.6.432 hotspot voucher dropdown and first-login expiry */
.voucher-page-head.rk-card{
  position:relative!important;
  overflow:visible!important;
  z-index:60!important;
  justify-content:flex-start!important;
}
.voucher-page-head .action-dropdown{position:relative!important;z-index:10020!important}
.voucher-page-head .action-dropdown[open]{z-index:10050!important}
.voucher-page-head .action-dropdown-menu,
.voucher-page-head .rk-dropdown-menu{
  z-index:10060!important;
  position:absolute!important;
  top:calc(100% + 8px)!important;
  left:0!important;
  right:auto!important;
  min-width:240px!important;
  max-height:min(70dvh,520px)!important;
  overflow:auto!important;
  box-shadow:0 18px 46px rgba(0,0,0,.28)!important;
}
.voucher-list-card,
.voucher-compact-card,
.voucher-report-table-wrap,
.rk-table-wrap{
  position:relative!important;
  z-index:1!important;
}
.voucher-due-pill{
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  padding:4px 8px!important;
  font-weight:850!important;
  font-size:.82rem!important;
  border:1px solid var(--border)!important;
  background:var(--surface-soft)!important;
  color:var(--muted)!important;
  white-space:nowrap!important;
}
.voucher-due-pill.is-waiting{background:rgba(148,163,184,.12)!important;border-color:rgba(148,163,184,.28)!important;color:var(--muted)!important}
.voucher-due-pill.is-active{background:rgba(59,130,246,.14)!important;border-color:rgba(59,130,246,.38)!important;color:#3b82f6!important}
.voucher-due-pill.is-expired{background:rgba(239,68,68,.14)!important;border-color:rgba(239,68,68,.38)!important;color:#ef4444!important}
.voucher-due-pill.is-disabled{background:rgba(148,163,184,.10)!important;border-color:rgba(148,163,184,.24)!important;color:var(--muted)!important}
.voucher-status-pill.is-waiting{background:rgba(148,163,184,.12)!important;border-color:rgba(148,163,184,.28)!important;color:var(--muted)!important}
.voucher-status-pill.is-expired{background:rgba(239,68,68,.14)!important;border-color:rgba(239,68,68,.34)!important;color:#ef4444!important}
@media(max-width:860px){
  .voucher-page-head .action-dropdown-menu,
  .voucher-page-head .rk-dropdown-menu{
    position:fixed!important;
    top:72px!important;
    left:12px!important;
    right:12px!important;
    min-width:0!important;
    width:auto!important;
  }
}
/* END ui-v1.6.432 hotspot voucher dropdown and first-login expiry */


/* BEGIN ui-v1.6.434 hotspot voucher edit bulk actions */
.voucher-edit-card{
  max-width:920px!important;
  margin:0 auto!important;
}
.voucher-edit-form{
  padding:14px!important;
}
.voucher-edit-form .form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.voucher-row-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
}
.voucher-row-actions form{margin:0!important}
.voucher-status-pill.is-waiting{
  color:#64748b!important;
}
@media(max-width:720px){
  .voucher-edit-card{max-width:none!important;margin:0!important}
  .voucher-edit-form .form-grid{grid-template-columns:1fr!important}
  .voucher-row-actions{flex-direction:column!important;align-items:stretch!important}
  .voucher-row-actions .btn{width:100%!important}
}
/* END ui-v1.6.434 hotspot voucher edit bulk actions */


/* BEGIN ui-v1.6.435 voucher delete active and normal table text */
.voucher-compact-table td,
.voucher-compact-table td *,
.voucher-compact-table .data-main,
.voucher-compact-table .compact-main,
.voucher-compact-table .voucher-id-text{
  font-weight:500!important;
}
.voucher-compact-table th{
  font-weight:700!important;
}
.voucher-compact-table .status-pill,
.voucher-compact-table .voucher-status-pill,
.voucher-compact-table .voucher-due-pill{
  font-weight:700!important;
}
.voucher-row-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
}
.voucher-row-actions form{
  margin:0!important;
}
[data-voucher-bulk-delete-trigger]:disabled,
[data-voucher-bulk-delete-trigger].is-disabled{
  opacity:.46!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
}
.voucher-compact-table .btn-danger{
  cursor:pointer!important;
}
/* END ui-v1.6.435 voucher delete active and normal table text */


/* BEGIN ui-v1.6.436 hotspot voucher batch created status */
.voucher-status-pill.is-waiting{font-weight:700!important;}
/* END ui-v1.6.436 hotspot voucher batch created status */


/* BEGIN ui-v1.6.437 hotspot voucher async generate and button hover */
.voucher-hotspot-form .btn:not(.btn-ghost):hover,
.voucher-hotspot-form .btn:not(.btn-ghost):focus-visible,
.voucher-hotspot-form button[type="submit"].btn:hover,
.voucher-hotspot-form button[type="submit"].btn:focus-visible{
  color:#fff!important;
  text-shadow:none!important;
  filter:brightness(1.03)!important;
}
.voucher-hotspot-form button[type="submit"].btn{
  color:#fff!important;
}
/* END ui-v1.6.437 hotspot voucher async generate and button hover */


/* BEGIN ui-v1.6.438 large table scroll performance */
.rk-large-table-wrap{
  contain:layout paint style!important;
  isolation:isolate!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-behavior:auto!important;
  overscroll-behavior:contain!important;
}
.rk-large-table-card{
  contain:layout style!important;
}
.rk-large-table,
.rk-large-table *{
  scroll-behavior:auto!important;
}
.rk-large-table tbody tr,
.rk-large-table tbody td,
.rk-large-table tbody th,
.rk-large-table .data-main,
.rk-large-table .compact-main,
.rk-large-table .data-sub,
.rk-large-table .compact-sub,
.rk-large-table .status-pill,
.rk-large-table .voucher-status-pill,
.rk-large-table .voucher-due-pill,
.rk-large-table .btn,
.rk-large-table button,
.rk-large-table input,
.rk-large-table select{
  transition:none!important;
  animation:none!important;
}
.rk-large-table tbody tr{
  transform:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.rk-large-table tbody tr:hover{
  transform:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.rk-large-table .btn:hover,
.rk-large-table button:hover,
.rk-large-table .status-pill:hover{
  transform:none!important;
  box-shadow:none!important;
  filter:none!important;
}
@supports (content-visibility:auto){
  .rk-large-table tbody tr{
    content-visibility:auto!important;
    contain-intrinsic-size:42px!important;
  }
}
@media (max-width:860px){
  .rk-large-table-wrap{
    max-height:none!important;
  }
}
/* END ui-v1.6.438 large table scroll performance */


/* BEGIN ui-v1.6.439 voucher async hardening and virtual scroll */
.rk-virtual-table tbody tr{
  content-visibility:visible!important;
}
.rk-virtual-spacer td{
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  pointer-events:none!important;
}
.rk-virtual-table.rk-large-table tbody tr:hover,
.rk-virtual-table tbody tr:hover{
  transform:none!important;
}
.voucher-hotspot-form .btn:hover,
.voucher-hotspot-form .btn:focus,
.voucher-hotspot-form button[type="submit"]:hover,
.voucher-hotspot-form button[type="submit"]:focus{
  color:#fff!important;
  text-shadow:none!important;
}
/* END ui-v1.6.439 voucher async hardening and virtual scroll */


/* BEGIN ui-v1.6.440 global virtual table engine for all table views */
.rk-virtual-scroll-host{
  max-height:min(72dvh,760px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  contain:layout paint style!important;
  will-change:scroll-position!important;
  isolation:isolate!important;
  border-radius:inherit!important;
}
.rk-virtual-scroll-host table{
  margin:0!important;
}
.rk-virtual-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  background:var(--surface, var(--bg-card))!important;
  box-shadow:0 1px 0 var(--border)!important;
}
.rk-virtual-table tbody tr,
.rk-virtual-table tbody td,
.rk-virtual-table tbody td *{
  transition:none!important;
  animation:none!important;
}
.rk-virtual-table tbody tr:hover{
  transform:none!important;
  box-shadow:none!important;
}
.rk-virtual-spacer,
.rk-virtual-spacer td{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
.rk-virtual-table[data-virtual-rows]::after{
  content:"";
  display:none;
}
.rk-large-table-wrap,
.rk-large-table-card,
.rk-large-table{
  contain:layout paint style!important;
}
@media(max-width:860px){
  .rk-virtual-scroll-host{
    max-height:68dvh!important;
  }
}
/* END ui-v1.6.440 global virtual table engine for all table views */


/* BEGIN ui-v1.6.441 RadiusKu Clean single theme */
html[data-theme="radiusku-clean"],
body[data-theme="radiusku-clean"] {
  color-scheme: light;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --bg: #f4f7fb;
  --bg-soft: #eef3f8;
  --bg-elev: #ffffff;
  --bg-elev-2: #f8fafc;
  --bg-card: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-strong: #ffffff;
  --border: rgba(15,23,42,.12);
  --border-strong: rgba(15,23,42,.22);
  --text: #111827;
  --text-soft: #374151;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: rgba(37,99,235,.11);
  --primary-faint: rgba(37,99,235,.055);
  --success: #15803d;
  --success-soft: rgba(21,128,61,.12);
  --warn: #b45309;
  --warn-soft: rgba(180,83,9,.13);
  --danger: #dc2626;
  --danger-soft: rgba(220,38,38,.11);
  --info: #0369a1;
  --info-soft: rgba(3,105,161,.11);
  --purple: #7c3aed;
  --purple-soft: rgba(124,58,237,.11);
  --chip-bg: rgba(15,23,42,.06);
  --chip-text: #1f2937;
  --input-bg: #ffffff;
  --input-border: rgba(15,23,42,.18);
  --input-focus: rgba(37,99,235,.24);
  --table-head-bg: #f1f5f9;
  --table-row-hover: rgba(37,99,235,.055);
  --sidebar-bg: #ffffff;
  --topbar-bg: rgba(255,255,255,.96);
  --dropdown-bg: #ffffff;
  --modal-bg: #ffffff;
  --modal-text: #111827;
  --modal-border: rgba(15,23,42,.14);
  --shadow: 0 14px 28px rgba(15,23,42,.10);
  --shadow-soft: 0 6px 16px rgba(15,23,42,.07);
  --shadow-sm: 0 1px 4px rgba(15,23,42,.06);
  --ring: 0 0 0 3px var(--input-focus);
  --box-1: #dbeafe;
  --box-2: #dcfce7;
  --box-3: #fef3c7;
  --box-4: #fee2e2;
  --box-5: #ede9fe;
  --box-6: #cffafe;
  --box-7: #fce7f3;
  --box-text: #111827;
}

body[data-theme="radiusku-clean"] {
  background: var(--bg) !important;
  background-attachment: scroll !important;
}

html[data-theme="radiusku-clean"] .sidebar,
body[data-theme="radiusku-clean"] .sidebar,
html[data-theme="radiusku-clean"] .topbar,
body[data-theme="radiusku-clean"] .topbar,
html[data-theme="radiusku-clean"] .dropdown-menu,
html[data-theme="radiusku-clean"] .action-dropdown-menu,
html[data-theme="radiusku-clean"] .rk-dropdown-menu,
html[data-theme="radiusku-clean"] .card,
html[data-theme="radiusku-clean"] .rk-card,
html[data-theme="radiusku-clean"] .table-card,
html[data-theme="radiusku-clean"] .dashboard-panel,
html[data-theme="radiusku-clean"] .settings-card,
html[data-theme="radiusku-clean"] .settings-compact-card,
html[data-theme="radiusku-clean"] .profile-compact-card,
html[data-theme="radiusku-clean"] .package-profile-card,
html[data-theme="radiusku-clean"] .tool-system-card,
html[data-theme="radiusku-clean"] .system-section-card,
html[data-theme="radiusku-clean"] .quick-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="radiusku-clean"] .sidebar,
body[data-theme="radiusku-clean"] .sidebar,
html[data-theme="radiusku-clean"] .topbar,
body[data-theme="radiusku-clean"] .topbar {
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] .brand-mark,
html[data-theme="radiusku-clean"] .logo-mark,
html[data-theme="radiusku-clean"] .profile-avatar,
html[data-theme="radiusku-clean"] .user-avatar-fallback {
  border-radius: 8px !important;
  background: var(--primary) !important;
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] .profile-avatar {
  border-radius: 50% !important;
}

html[data-theme="radiusku-clean"] .nav-item,
html[data-theme="radiusku-clean"] .nav-sub,
html[data-theme="radiusku-clean"] .version-stack,
html[data-theme="radiusku-clean"] .version-button,
html[data-theme="radiusku-clean"] .top-balance-chip,
html[data-theme="radiusku-clean"] .profile-trigger,
html[data-theme="radiusku-clean"] .toolbar,
html[data-theme="radiusku-clean"] .rk-toolbar,
html[data-theme="radiusku-clean"] .ppp-table-control-row,
html[data-theme="radiusku-clean"] .rk-table-controls,
html[data-theme="radiusku-clean"] .settings-compact-control-row,
html[data-theme="radiusku-clean"] .dropdown-menu,
html[data-theme="radiusku-clean"] .action-dropdown-menu,
html[data-theme="radiusku-clean"] .rk-dropdown-menu,
html[data-theme="radiusku-clean"] .dropdown-item,
html[data-theme="radiusku-clean"] .action-dropdown-item,
html[data-theme="radiusku-clean"] .rk-dropdown-item,
html[data-theme="radiusku-clean"] .action-dropdown-button,
html[data-theme="radiusku-clean"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="radiusku-clean"] select,
html[data-theme="radiusku-clean"] textarea,
html[data-theme="radiusku-clean"] .status-row,
html[data-theme="radiusku-clean"] .activity-item,
html[data-theme="radiusku-clean"] .traffic-stat-grid div,
html[data-theme="radiusku-clean"] .traffic-router-card,
html[data-theme="radiusku-clean"] .traffic-iface-row,
html[data-theme="radiusku-clean"] .extra-service-row,
html[data-theme="radiusku-clean"] .permission-group-block,
html[data-theme="radiusku-clean"] .settings-permission-group-block,
html[data-theme="radiusku-clean"] .payment-info-box,
html[data-theme="radiusku-clean"] .payment-important-section,
html[data-theme="radiusku-clean"] .payment-sync-status,
html[data-theme="radiusku-clean"] .api-credential-field,
html[data-theme="radiusku-clean"] .logo-box,
html[data-theme="radiusku-clean"] .box,
html[data-theme="radiusku-clean"] .finance-report-overview,
html[data-theme="radiusku-clean"] .finance-report-actions-panel,
html[data-theme="radiusku-clean"] .overview-glyph,
html[data-theme="radiusku-clean"] .rk-icon-box,
html[data-theme="radiusku-clean"] .dash-icon,
html[data-theme="radiusku-clean"] .customer-summary-icon,
html[data-theme="radiusku-clean"] .finance-report-kpi-icon,
html[data-theme="radiusku-clean"] .online-payment-kpi-icon,
html[data-theme="radiusku-clean"] .router-report-kpi-icon {
  border-radius: 8px !important;
}

html[data-theme="radiusku-clean"] .btn,
html[data-theme="radiusku-clean"] .icon-btn,
html[data-theme="radiusku-clean"] .rk-action-btn,
html[data-theme="radiusku-clean"] .mini-action,
html[data-theme="radiusku-clean"] .table-action-icon-btn {
  --btn-bg: var(--primary);
  --btn-border: var(--primary);
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="radiusku-clean"] .btn:hover,
html[data-theme="radiusku-clean"] .icon-btn:hover,
html[data-theme="radiusku-clean"] .rk-action-btn:hover,
html[data-theme="radiusku-clean"] .mini-action:hover,
html[data-theme="radiusku-clean"] .table-action-icon-btn:hover {
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="radiusku-clean"] .btn-ghost,
html[data-theme="radiusku-clean"] .btn-soft,
html[data-theme="radiusku-clean"] .icon-btn,
html[data-theme="radiusku-clean"] .rk-action-btn {
  --btn-bg: var(--surface-soft);
  --btn-color: var(--text-soft);
  --btn-border: var(--border);
}

html[data-theme="radiusku-clean"] .btn-danger,
html[data-theme="radiusku-clean"] .btn-danger-soft,
html[data-theme="radiusku-clean"] .is-delete,
html[data-theme="radiusku-clean"] .dropdown-item-danger,
html[data-theme="radiusku-clean"] .customer-bulk-delete-danger {
  --btn-bg: var(--danger-soft);
  --btn-color: var(--danger);
  --btn-border: color-mix(in srgb, var(--danger) 34%, transparent);
}

html[data-theme="radiusku-clean"] .btn-success {
  --btn-bg: var(--success-soft);
  --btn-color: var(--success);
  --btn-border: color-mix(in srgb, var(--success) 34%, transparent);
}
html[data-theme="radiusku-clean"] .is-warning {
  --btn-bg: var(--warn-soft);
  --btn-color: var(--warn);
  --btn-border: color-mix(in srgb, var(--warn) 34%, transparent);
}

html[data-theme="radiusku-clean"] .table-action-icon-btn.is-edit {
  --btn-bg: var(--info-soft);
  --btn-color: var(--info);
  --btn-border: color-mix(in srgb, var(--info) 34%, transparent);
}

html[data-theme="radiusku-clean"] .table-action-icon-btn.is-view,
html[data-theme="radiusku-clean"] .is-view {
  --btn-bg: var(--primary-soft);
  --btn-color: var(--primary);
  --btn-border: color-mix(in srgb, var(--primary) 34%, transparent);
}

html[data-theme="radiusku-clean"] .table-action-icon-btn.is-print,
html[data-theme="radiusku-clean"] .is-print,
html[data-theme="radiusku-clean"] .is-download {
  --btn-bg: var(--purple-soft);
  --btn-color: var(--purple);
  --btn-border: color-mix(in srgb, var(--purple) 34%, transparent);
}

html[data-theme="radiusku-clean"] .nav-item.active,
html[data-theme="radiusku-clean"] .nav-item[aria-expanded="true"],
html[data-theme="radiusku-clean"] .nav-sub.active,
html[data-theme="radiusku-clean"] .version-tab.is-active,
html[data-theme="radiusku-clean"] .panel-tab.is-active,
html[data-theme="radiusku-clean"] .customer-tabs button.is-active,
html[data-theme="radiusku-clean"] .whatsapp-template-tab.is-active,
html[data-theme="radiusku-clean"] .is-current {
  color: #ffffff !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] .card,
html[data-theme="radiusku-clean"] .rk-card,
html[data-theme="radiusku-clean"] .table-card,
html[data-theme="radiusku-clean"] .dashboard-panel,
html[data-theme="radiusku-clean"] .settings-card,
html[data-theme="radiusku-clean"] .settings-compact-card,
html[data-theme="radiusku-clean"] .profile-compact-card,
html[data-theme="radiusku-clean"] .package-profile-card,
html[data-theme="radiusku-clean"] .tool-system-card,
html[data-theme="radiusku-clean"] .system-section-card,
html[data-theme="radiusku-clean"] .quick-panel,
html[data-theme="radiusku-clean"] .rk-summary-card,
html[data-theme="radiusku-clean"] .customer-summary-card,
html[data-theme="radiusku-clean"] .overview-tile,
html[data-theme="radiusku-clean"] .mini-strip,
html[data-theme="radiusku-clean"] .finance-report-kpi,
html[data-theme="radiusku-clean"] .customer-report-kpi,
html[data-theme="radiusku-clean"] .router-report-kpi,
html[data-theme="radiusku-clean"] .system-metric,
html[data-theme="radiusku-clean"] .mini-kpi,
html[data-theme="radiusku-clean"] .toolbar,
html[data-theme="radiusku-clean"] .rk-toolbar,
html[data-theme="radiusku-clean"] .modal-card,
html[data-theme="radiusku-clean"] .rk-modal-card {
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="radiusku-clean"] .topbar,
body[data-theme="radiusku-clean"] .topbar {
  background: var(--topbar-bg) !important;
  border-bottom-color: var(--border) !important;
}

html[data-theme="radiusku-clean"] .sidebar,
body[data-theme="radiusku-clean"] .sidebar {
  background: var(--sidebar-bg) !important;
  border-right-color: var(--border) !important;
}

html[data-theme="radiusku-clean"] .card-glow,
html[data-theme="radiusku-clean"] .sheet,
html[data-theme="radiusku-clean"] .dropdown-menu,
html[data-theme="radiusku-clean"] .action-dropdown-menu,
html[data-theme="radiusku-clean"] .rk-dropdown-menu,
html[data-theme="radiusku-clean"] .toast {
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="radiusku-clean"] .table-wrap,
html[data-theme="radiusku-clean"] .rk-table-wrap,
html[data-theme="radiusku-clean"] .compact-table-wrap,
html[data-theme="radiusku-clean"] .ppp-compact-wrap,
html[data-theme="radiusku-clean"] .billing-compact-wrap,
html[data-theme="radiusku-clean"] .billing-report-table-wrap,
html[data-theme="radiusku-clean"] .finance-table-wrap,
html[data-theme="radiusku-clean"] .finance-report-table-wrap,
html[data-theme="radiusku-clean"] .customer-report-table-wrap,
html[data-theme="radiusku-clean"] .topup-compact-wrap,
html[data-theme="radiusku-clean"] .profile-compact-wrap,
html[data-theme="radiusku-clean"] .hotspot-profile-fit-wrap,
html[data-theme="radiusku-clean"] .tool-import-preview-wrap,
html[data-theme="radiusku-clean"] .app-log-table-wrap {
  border-radius: 0 0 8px 8px !important;
}

html[data-theme="radiusku-clean"] .rk-card-head,
html[data-theme="radiusku-clean"] .table-head,
html[data-theme="radiusku-clean"] .rk-table-head,
html[data-theme="radiusku-clean"] .card-header,
html[data-theme="radiusku-clean"] .modal-head,
html[data-theme="radiusku-clean"] .rk-modal-head,
html[data-theme="radiusku-clean"] .quick-panel-header,
html[data-theme="radiusku-clean"] .finance-report-head,
html[data-theme="radiusku-clean"] .tool-import-preview-head,
html[data-theme="radiusku-clean"] .system-control-head {
  border-radius: 8px 8px 0 0 !important;
}

html[data-theme="radiusku-clean"] thead th,
html[data-theme="radiusku-clean"] .rk-virtual-table thead th {
  background: var(--table-head-bg) !important;
  color: var(--text-soft) !important;
}

html[data-theme="radiusku-clean"] .overview-tile::after {
  display: none !important;
}

html[data-theme="radiusku-clean"] .modal-backdrop,
html[data-theme="radiusku-clean"] .rk-modal-backdrop,
body[data-theme="radiusku-clean"].sidebar-mobile-open .sidebar-overlay {
  background: rgba(15,23,42,.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* END ui-v1.6.441 RadiusKu Clean single theme */


/* BEGIN ui-v1.6.442 RadiusKu Clean professional typography */
html[data-theme="radiusku-clean"],
body[data-theme="radiusku-clean"] {
  --rk-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rk-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --rk-type-xs: 11px;
  --rk-type-sm: 12px;
  --rk-type-base: 13px;
  --rk-type-control: 12.5px;
  --rk-type-table: 12.5px;
  --rk-type-table-head: 11.5px;
  --rk-type-title-sm: 14px;
  --rk-type-title: 15px;
  --rk-type-page: 18px;
  --rk-type-kpi: 18px;
  --rk-type-auth-title: 38px;
  --rk-leading-tight: 1.18;
  --rk-leading-ui: 1.35;
  --rk-leading-body: 1.45;
  --rk-weight-regular: 400;
  --rk-weight-medium: 500;
  --rk-weight-semibold: 600;
  --rk-weight-bold: 700;
}

html[data-theme="radiusku-clean"] *,
html[data-theme="radiusku-clean"] *::before,
html[data-theme="radiusku-clean"] *::after {
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"],
html[data-theme="radiusku-clean"] body,
body[data-theme="radiusku-clean"] {
  font-family: var(--rk-font-ui) !important;
  font-size: var(--rk-type-base) !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: var(--rk-leading-body) !important;
  text-rendering: optimizeLegibility;
}

html[data-theme="radiusku-clean"] :where(code, pre, .app-log-code, .app-log-message-modal-pre) {
  font-family: var(--rk-font-mono) !important;
}

html[data-theme="radiusku-clean"] :where(strong, b, .strong-text) {
  font-weight: var(--rk-weight-semibold) !important;
}

html[data-theme="radiusku-clean"] :where(.brand-copy strong, .profile-copy strong, .top-balance-chip strong, .version-line strong) {
  font-size: var(--rk-type-base) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: var(--rk-leading-tight) !important;
}

html[data-theme="radiusku-clean"] :where(.brand-copy span, .version-line, .breadcrumb, .profile-copy small, .top-balance-chip span, .profile-balance-menu span, .profile-balance-menu small, .version-pill span, .dropdown-meta, .app-log-subtitle) {
  font-size: var(--rk-type-xs) !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: var(--rk-leading-ui) !important;
}

html[data-theme="radiusku-clean"] :where(h1, .page-title) {
  font-size: var(--rk-type-page) !important;
  font-weight: var(--rk-weight-bold) !important;
  line-height: var(--rk-leading-tight) !important;
}

html[data-theme="radiusku-clean"] :where(h2, h3, .card-title, .panel-title, .settings-section-title, .finance-report-title, .quick-panel-title, .traffic-chart-title, .traffic-router-title, .tool-import-section-title, .section-title, .modal-title, .rk-modal-title) {
  font-size: var(--rk-type-title) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.25 !important;
}

html[data-theme="radiusku-clean"] :where(.rk-card-head h3, .table-head h3, .system-control-head h3) {
  margin: 0 !important;
  font-size: var(--rk-type-title) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.25 !important;
}

html[data-theme="radiusku-clean"] :where(.card-subtitle, .compact-sub, .data-sub, .panel-subtitle, .finance-report-period, .help, .small, .muted, .helper-text, .table-meta, .customer-list-info, .billing-summary-text, .entries-control, .traffic-summary, .traffic-chart-subtitle, .traffic-router-meta, .extra-service-note, .auth-copy p, .service-desc, .quick-panel-note, .session-head-note) {
  font-size: var(--rk-type-sm) !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: var(--rk-leading-ui) !important;
}

html[data-theme="radiusku-clean"] :where(.sidebar-label, .dropdown-label, .action-dropdown-section-title, .eyebrow) {
  font-size: var(--rk-type-xs) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.25 !important;
  text-transform: uppercase;
}

html[data-theme="radiusku-clean"] :where(.nav-item, .nav-sub) {
  font-size: var(--rk-type-base) !important;
  font-weight: var(--rk-weight-medium) !important;
  line-height: var(--rk-leading-ui) !important;
}

html[data-theme="radiusku-clean"] :where(.nav-item.active, .nav-item[aria-expanded="true"], .nav-sub.active, .nav-text) {
  font-weight: var(--rk-weight-semibold) !important;
}

html[data-theme="radiusku-clean"] :where(.btn, .icon-btn, .rk-action-btn, .mini-action, .table-action-icon-btn, .action-dropdown-trigger, .dropdown-item, .action-dropdown-item, .rk-dropdown-item, .action-dropdown-button, .version-tab, .panel-tab, .customer-tabs button, .whatsapp-template-tab) {
  font-size: var(--rk-type-control) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.2 !important;
}

html[data-theme="radiusku-clean"] :where(.btn-small) {
  font-size: var(--rk-type-sm) !important;
}

html[data-theme="radiusku-clean"] :where(.btn-mini, .btn-xs, .mini-action, .table-action-icon-btn) {
  font-size: var(--rk-type-xs) !important;
}

html[data-theme="radiusku-clean"] :where(.field label, .label, .party-title, .filter-label, .form-label, .metric-label, .user-balance-current-label, .customer-summary-label, .overview-kicker, .customer-summary-title, .finance-report-kpi-label, .metric-title, .mini-strip-label) {
  font-size: var(--rk-type-sm) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.3 !important;
}

html[data-theme="radiusku-clean"] :where(table, .rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table, .user-summary-table) {
  font-size: var(--rk-type-table) !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: var(--rk-leading-ui) !important;
}

html[data-theme="radiusku-clean"] :where(td, tbody td, .rk-table tbody td, .compact-table tbody td, .user-table tbody td, .package-table tbody td, .finance-table tbody td, .billing-compact-table tbody td, .billing-report-table tbody td, .customer-report-table tbody td, .topup-compact-table tbody td, .profile-compact-table tbody td, .app-log-table tbody td, .router-table tbody td, .session-table tbody td, .system-table tbody td, .online-payment-table tbody td, .voucher-compact-table tbody td, .voucher-report-table tbody td, .invoice-report-table tbody td, .tool-import-preview-table tbody td) {
  font-size: var(--rk-type-table) !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: var(--rk-leading-ui) !important;
}

html[data-theme="radiusku-clean"] :where(.data-main, .compact-main, .ppp-name-text, .service-name, .activity-title, .activity-text, .traffic-iface-main strong, .traffic-rate strong, .dropdown-item strong, .app-log-type-main) {
  font-size: var(--rk-type-base) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.3 !important;
}

html[data-theme="radiusku-clean"] :where(.overview-number, .customer-summary-value, .finance-report-kpi-value, .metric-chip, .amount, .system-metric strong, .user-balance-current-value, .customer-summary-card strong, .router-report-kpi strong) {
  font-size: var(--rk-type-kpi) !important;
  font-weight: var(--rk-weight-bold) !important;
  line-height: var(--rk-leading-tight) !important;
}

html[data-theme="radiusku-clean"] :where(.mini-strip strong, .top-balance-chip strong) {
  font-size: var(--rk-type-title) !important;
  font-weight: var(--rk-weight-bold) !important;
  line-height: 1.2 !important;
}

html[data-theme="radiusku-clean"] :where(.badge, .status-badge, .status-pill, .badge-mini, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge, .voucher-status-pill, .online-payment-status) {
  font-size: var(--rk-type-xs) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.15 !important;
}

html[data-theme="radiusku-clean"] :where(.toast, .alert, .notice, .error, .modal-card, .rk-modal-card, .dropdown-menu, .action-dropdown-menu, .rk-dropdown-menu, .popover, .ppp-info-popover, .billing-filter-modal, .package-modal-card, .customer-renew-modal-card, .user-balance-modal-card, .user-summary-modal-card, .app-log-message-modal-card) {
  font-size: var(--rk-type-base) !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: var(--rk-leading-body) !important;
}

html[data-theme="radiusku-clean"] :where(.billing-filter-modal .card-title, .package-modal-card .card-title, .customer-renew-modal-card .card-title, .app-log-message-modal-card .card-title) {
  font-size: var(--rk-type-title) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.25 !important;
}

html[data-theme="radiusku-clean"] :where(.billing-filter-modal .card-subtitle, .package-modal-card .card-subtitle, .customer-renew-modal-card .card-subtitle, .app-log-message-modal-card .muted, .billing-filter-modal :is(.billing-filter-note,.billing-filter-subnote), .package-modal-card .help, .package-modal-card .muted, .package-modal-card small, .customer-renew-modal-card .renew-note) {
  font-size: var(--rk-type-sm) !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: var(--rk-leading-ui) !important;
}

html[data-theme="radiusku-clean"] :where(.billing-filter-modal .field label, .package-modal-card .field label, .customer-renew-modal-card .field label, .customer-renew-modal-card .renew-detail-label, .customer-renew-modal-card .renew-detail-value) {
  font-size: var(--rk-type-sm) !important;
  font-weight: var(--rk-weight-medium) !important;
  line-height: var(--rk-leading-ui) !important;
}

html[data-theme="radiusku-clean"] :where(.auth-copy h1) {
  font-size: var(--rk-type-auth-title) !important;
  font-weight: var(--rk-weight-bold) !important;
  line-height: 1.08 !important;
}

html[data-theme="radiusku-clean"] :where(.invoice-title) {
  font-size: 28px !important;
  font-weight: var(--rk-weight-bold) !important;
  line-height: 1.12 !important;
}

html[data-theme="radiusku-clean"] .settings-theme-preview-card {
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) !important;
  gap: 2px 8px !important;
  align-items: center !important;
}

html[data-theme="radiusku-clean"] .settings-theme-preview-card > span {
  grid-row: 1 / 3;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--primary);
}

html[data-theme="radiusku-clean"] .settings-theme-preview-card > strong,
html[data-theme="radiusku-clean"] .settings-theme-preview-card > small {
  display: block !important;
  min-width: 0;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"],
  body[data-theme="radiusku-clean"] {
    --rk-type-page: 17px;
    --rk-type-title: 14px;
    --rk-type-kpi: 17px;
    --rk-type-auth-title: 28px;
  }
}

@media (max-width: 520px) {
  html[data-theme="radiusku-clean"],
  body[data-theme="radiusku-clean"] {
    --rk-type-base: 13px;
    --rk-type-control: 12.5px;
    --rk-type-table: 12px;
    --rk-type-table-head: 11px;
    --rk-type-page: 16px;
    --rk-type-title: 13.5px;
    --rk-type-kpi: 16px;
    --rk-type-auth-title: 25px;
  }
}
/* END ui-v1.6.442 RadiusKu Clean professional typography */

/* BEGIN ui-v1.6.444 settings form and tab alignment */
html[data-theme="radiusku-clean"] {
  --rk-settings-control-h: 38px;
  --rk-settings-control-radius: 11px;
}

html[data-theme="radiusku-clean"] :where(.settings-compact-card, .settings-user-form-card, .settings-card) :where(.settings-form-grid, .rk-form-grid, .form-grid) {
  align-items: start !important;
  gap: 12px !important;
}

html[data-theme="radiusku-clean"] :where(.settings-compact-card, .settings-user-form-card, .settings-card) .field {
  align-content: start !important;
  gap: 6px !important;
}

html[data-theme="radiusku-clean"] :where(.settings-compact-card, .settings-user-form-card, .settings-card) .field > label {
  min-height: 17px !important;
  align-items: center !important;
  line-height: 1.25 !important;
}

html[data-theme="radiusku-clean"] :where(.settings-compact-card, .settings-user-form-card, .settings-card) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
  box-sizing: border-box !important;
  height: var(--rk-settings-control-h) !important;
  min-height: var(--rk-settings-control-h) !important;
  padding-block: 0 !important;
  padding-inline: 11px !important;
  border-radius: var(--rk-settings-control-radius) !important;
  line-height: 1.3 !important;
}

html[data-theme="radiusku-clean"] :where(.settings-compact-card, .settings-user-form-card, .settings-card) textarea {
  min-height: 88px !important;
  padding: 9px 11px !important;
  border-radius: var(--rk-settings-control-radius) !important;
  line-height: 1.38 !important;
}

html[data-theme="radiusku-clean"] :where(.settings-compact-card, .settings-user-form-card, .settings-card) input[type="file"] {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: var(--rk-settings-control-h) !important;
  padding: 6px 8px !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--rk-settings-control-radius) !important;
  background: var(--input-bg) !important;
  color: var(--text-soft) !important;
  line-height: 1.25 !important;
}

html[data-theme="radiusku-clean"] :where(.settings-compact-card, .settings-user-form-card, .settings-card) input[type="file"]::file-selector-button {
  min-height: 24px !important;
  margin-right: 9px !important;
  padding: 4px 9px !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
  color: var(--text) !important;
  background: var(--surface-soft) !important;
  font: inherit !important;
  font-weight: 650 !important;
}

html[data-theme="radiusku-clean"] :where(.api-credential-input-row, .input-with-button) {
  align-items: stretch !important;
}

html[data-theme="radiusku-clean"] :where(.api-credential-input-row, .input-with-button) > .btn {
  min-height: var(--rk-settings-control-h) !important;
  height: var(--rk-settings-control-h) !important;
  align-self: stretch !important;
}

html[data-theme="radiusku-clean"] :where(.whatsapp-tabs, .whatsapp-template-tabs, .settings-tabs) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 6px !important;
  margin: 0 0 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 15px !important;
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] :where(.whatsapp-tab, .whatsapp-template-tab, .settings-tab) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  color: var(--text-soft) !important;
  background: var(--surface) !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

html[data-theme="radiusku-clean"] :where(.whatsapp-tab, .whatsapp-template-tab, .settings-tab):is(:hover, :focus-visible),
html[data-theme="radiusku-clean"] :where(.whatsapp-tab.is-active, .whatsapp-template-tab.is-active, .settings-tab.is-active) {
  color: var(--primary-strong) !important;
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border)) !important;
}

.olt-uplink-workspace {
  display: grid;
  gap: 12px;
}

.olt-uplink-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 85%, #94a3b8);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.olt-uplink-head, .olt-uplink-heading, .olt-uplink-state, .olt-uplink-metrics, .olt-uplink-ports-head {
  display: flex;
  align-items: center;
}

.olt-uplink-head {
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, var(--bg-soft));
}

.olt-uplink-heading { gap: 10px; min-width: 0; }
.olt-card-mark { display: grid; grid-template-columns: repeat(3, 3px); align-content: center; gap: 2px; width: 22px; height: 22px; padding: 4px; color: var(--primary-strong); border: 1px solid currentColor; border-radius: 4px; }
.olt-card-mark i { height: 11px; background: currentColor; border-radius: 1px; }
.olt-uplink-title { font-size: 16px; font-weight: 800; color: var(--text); }
.olt-uplink-title span { color: var(--muted-2); font-weight: 500; }
.olt-uplink-card-health { display: grid; grid-template-columns: repeat(3, minmax(90px, auto)); gap: 16px; text-align: right; }
.olt-uplink-card-health div { display: grid; gap: 3px; }
.olt-uplink-card-health span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.olt-uplink-card-health strong { color: var(--text); font-size: 14px; line-height: 1.1; white-space: nowrap; }
.olt-uplink-subtitle, .olt-uplink-metric > span, .olt-uplink-ports-head small { color: var(--muted); font-size: 12px; }
.olt-uplink-state { gap: 6px; padding: 6px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.olt-uplink-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.olt-uplink-state.is-enabled { color: #16803f; background: #e7f7ec; }
.olt-uplink-state.is-shutdown { color: #b42318; background: #fff0ef; }
.olt-uplink-state.is-unknown { color: var(--text-soft); background: var(--surface-soft); }
.olt-uplink-body { display: grid; grid-template-columns: minmax(232px, 28%) 1fr; min-height: 172px; }
.olt-uplink-metrics { align-content: start; flex-wrap: wrap; gap: 0; padding: 14px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface-soft) 75%, var(--surface)); }
.olt-uplink-metric { display: grid; gap: 4px; width: 50%; min-height: 64px; padding: 3px 10px 10px 0; }
.olt-uplink-metric > strong { color: var(--text); font-size: 20px; line-height: 1; }
.olt-uplink-metric > strong.state-up { color: #138a45; }
.olt-uplink-metric > strong.state-down { color: #c46b08; }
.olt-uplink-metric > strong.state-shutdown { color: #c32722; }
.olt-uplink-ports { min-width: 0; padding: 16px 18px; }
.olt-uplink-ports-head { justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--text-soft); font-size: 12px; font-weight: 800; }
.olt-uplink-port-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; }
.olt-uplink-port { display: grid; justify-items: center; gap: 4px; width: 82px; padding: 6px 0; border-radius: 5px; color: var(--text-soft); text-align: center; text-decoration: none; transition: background .16s ease, transform .16s ease; }
.olt-uplink-port:hover, .olt-uplink-port:focus-visible { background: color-mix(in srgb, currentColor 8%, transparent); outline: none; transform: translateY(-2px); }
.olt-port-icon { position: relative; display: grid; place-items: center; width: 62px; height: 46px; color: currentColor; }
.olt-port-icon svg { width: 62px; height: 42px; }
.olt-port-icon b { position: absolute; right: -3px; bottom: -2px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 4px; border: 2px solid var(--surface); border-radius: 50%; color: #fff; background: currentColor; font-size: 11px; line-height: 1; }
.olt-uplink-port-copy { display: grid; gap: 1px; }
.olt-uplink-port-copy strong { color: var(--text-soft); font-size: 13px; }
.olt-uplink-port-copy small, .olt-uplink-port em { max-width: 82px; overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.olt-uplink-admin-state { padding: 2px 4px; border-radius: 3px; font-size: 9px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.olt-uplink-admin-state.is-no-shutdown { color: #075985; background: #e0f2fe; }
.olt-uplink-admin-state.is-shutdown { color: #b42318; background: #fff0ef; }
.olt-uplink-admin-state.is-unknown { color: var(--text-soft); background: var(--surface); }
.olt-uplink-port.is-up { color: #16a34a; }
.olt-uplink-port.is-down { color: #7b8796; }
.olt-uplink-port.is-shutdown { color: #e3374b; }
.olt-uplink-port.is-unknown { color: #7b8796; }
.olt-uplink-port.is-down .olt-port-icon svg { filter: sepia(.9) saturate(2.2) hue-rotate(345deg) brightness(.9); }
.olt-uplink-port.is-shutdown .olt-port-icon svg { filter: grayscale(.28) sepia(1) saturate(4) hue-rotate(302deg) brightness(.76); }
.olt-uplink-port.is-unknown .olt-port-icon svg { filter: grayscale(.85) brightness(.9); }
.olt-pon-card .olt-uplink-body { grid-template-columns: minmax(168px, 18%) 1fr; }
.olt-pon-card .olt-uplink-metrics { padding: 10px; }
.olt-pon-card .olt-uplink-metric { min-height: 54px; padding: 3px 6px 8px 0; }
.olt-pon-card .olt-uplink-port-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.olt-pon-card .olt-uplink-port { width: 100%; min-width: 0; }
.olt-pon-card .olt-uplink-port.is-down .olt-port-icon svg { filter: grayscale(.85) brightness(.9); }
.olt-pon-card .olt-uplink-port.is-up .olt-uplink-admin-state { color: #075985; background: #e0f2fe; }
.olt-pon-card .olt-uplink-port.is-down .olt-uplink-admin-state,
.olt-pon-card .olt-uplink-port.is-shutdown .olt-uplink-admin-state { color: #b42318; background: #fff0ef; }
.olt-pon-admin-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.olt-pon-admin-toggle input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #c32722; }
.olt-pon-admin-toggle span { display: grid; gap: 3px; }
.olt-pon-admin-toggle small { color: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
  .olt-uplink-head { align-items: flex-start; flex-direction: column; padding: 13px 14px; }
  .olt-uplink-card-health { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: left; }
  .olt-uplink-card-health span { font-size: 10px; }
  .olt-uplink-card-health strong { font-size: 13px; }
  .olt-uplink-state { font-size: 10px; }
  .olt-uplink-body { grid-template-columns: 1fr; }
  .olt-uplink-metrics { padding: 14px; border-right: 0; border-bottom: 1px solid var(--border); }
  .olt-uplink-ports { padding: 14px; }
  .olt-uplink-port-grid { gap: 14px 16px; }
  .olt-pon-card .olt-uplink-port-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
}

.olt-detail-page { display: grid; gap: 12px; }
.olt-detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.olt-detail-snapshot { color: var(--muted); font-size: 12px; }
.olt-detail-card { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 24px rgba(15, 23, 42, .04); }
.olt-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, var(--bg-soft)); }
.olt-detail-breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-soft); font-size: 16px; font-weight: 800; }
.olt-detail-breadcrumb b { color: var(--muted-2); }
.olt-detail-breadcrumb strong { overflow: hidden; padding: 5px 9px; border-radius: 999px; color: var(--text-soft); background: var(--surface-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.olt-detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 0; }
.olt-detail-column { padding: 20px; }
.olt-detail-column + .olt-detail-column { border-left: 1px solid var(--border); background: color-mix(in srgb, var(--surface-soft) 48%, var(--surface)); }
.olt-detail-section + .olt-detail-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.olt-detail-section h2 { margin: 0 0 14px; color: var(--text); font-size: 14px; }
.olt-detail-note { margin: -4px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.olt-detail-list { display: grid; gap: 0; margin: 0; }
.olt-detail-list div { display: grid; grid-template-columns: minmax(130px, 42%) 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 68%, transparent); }
.olt-detail-list div:last-child { border-bottom: 0; }
.olt-detail-list dt { color: var(--muted); font-size: 13px; }
.olt-detail-list dd { min-width: 0; margin: 0; color: var(--text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.olt-detail-list-muted dd { color: var(--muted); font-weight: 600; }
.olt-detail-dom-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: var(--surface-soft); font-size: 12px; }
.olt-detail-dom-summary strong { color: var(--text-soft); font-size: 12px; font-weight: 700; text-align: right; }
.olt-detail-link { margin-left: 6px; font-size: 11px; font-weight: 800; }
.olt-detail-link.is-up { color: #16803f; }
.olt-detail-link.is-down { color: #c46b08; }
.olt-vlan-chip { display: inline-block; max-width: 100%; padding: 3px 7px; border-radius: 4px; color: #075985; background: #e0f2fe; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.olt-vlan-database .rk-table :is(th, td):nth-child(1) { width: 5%; }
.olt-vlan-database .rk-table :is(th, td):nth-child(2) { width: 12%; }
.olt-vlan-database .rk-table :is(th, td):nth-child(3) { width: 20%; }
.olt-vlan-port { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 7px; border-radius: 5px; font-size: 12px; font-weight: 700; line-height: 1.35; }
.olt-vlan-port.is-up { color: #15803d; background: #e8f7ec; }
.olt-vlan-port.is-down { color: #c2410c; background: #fff1e8; }
.olt-vlan-port.is-disabled { color: #be123c; background: #fde8ed; }
.olt-vlan-port.is-unknown { color: #64748b; background: #eef2f7; }

@media (max-width: 760px) {
  .olt-detail-topbar, .olt-detail-head { align-items: flex-start; flex-direction: column; }
  .olt-detail-grid { grid-template-columns: 1fr; }
  .olt-detail-column + .olt-detail-column { border-top: 1px solid var(--border); border-left: 0; }
  .olt-detail-column { padding: 16px; }
  .olt-detail-list div { grid-template-columns: minmax(105px, 42%) 1fr; }
  .olt-detail-dom-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
  .olt-detail-dom-summary strong { text-align: left; }
}

html[data-theme="radiusku-clean"] :where(.payment-radio-row, .payment-fee-row, .whatsapp-check-grid) {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] :where(.payment-radio-row, .payment-fee-row, .whatsapp-check-grid) > label,
html[data-theme="radiusku-clean"] :where(.payment-select-all, .payment-channel-column label) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  color: var(--text-soft) !important;
  background: var(--surface) !important;
  line-height: 1.25 !important;
}

html[data-theme="radiusku-clean"] .payment-channel-grid {
  align-items: start !important;
  gap: 10px !important;
}

html[data-theme="radiusku-clean"] .payment-channel-column {
  display: grid !important;
  gap: 7px !important;
  align-content: start !important;
}

html[data-theme="radiusku-clean"] .payment-channel-column .payment-channel-heading {
  background: var(--surface-soft) !important;
  color: var(--text) !important;
  font-weight: 800 !important;
}

html[data-theme="radiusku-clean"] :where(.settings-inline-note, .payment-sync-status, .payment-important-list, .payment-info-box, .whatsapp-info-box, .whatsapp-delay-info) {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html[data-theme="radiusku-clean"] .payment-sync-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] .whatsapp-variable-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)) !important;
  gap: 7px !important;
}

html[data-theme="radiusku-clean"] .whatsapp-variable-list > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  background: var(--surface) !important;
}

html[data-theme="radiusku-clean"] .whatsapp-variable-list > div > span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  line-height: 1.3 !important;
}

html[data-theme="radiusku-clean"] .btn-copy-token {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 26px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
  color: var(--text-soft) !important;
  background: var(--surface-soft) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  cursor: pointer !important;
}

html[data-theme="radiusku-clean"] .btn-copy-token:is(:hover, :focus-visible) {
  color: var(--primary-strong) !important;
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border)) !important;
}

@media (max-width: 720px) {
  html[data-theme="radiusku-clean"] :where(.api-credential-input-row, .input-with-button) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  html[data-theme="radiusku-clean"] :where(.api-credential-input-row, .input-with-button) > input {
    grid-column: 1 / -1 !important;
  }
}
/* END ui-v1.6.444 settings form and tab alignment */

/* BEGIN ui-v1.6.445 sidebar-wide page polish */
html[data-theme="radiusku-clean"] {
  --rk-sidebar-control-h: 38px;
  --rk-sidebar-control-radius: 11px;
  --rk-sidebar-surface-head: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-soft) 72%, var(--surface)));
  --rk-sidebar-border-soft: color-mix(in srgb, var(--border) 78%, transparent);
}

html[data-theme="radiusku-clean"] .page-body {
  gap: 12px !important;
  padding: 12px !important;
  align-content: start !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar, .rk-toolbar, .router-page-head, .voucher-page-head, .session-page-head, .system-hero, .finance-report-shell, .table-card, .rk-filter-panel, .customer-filter-panel, .system-section-card, .tool-system-card, .app-log-card) {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar, .rk-toolbar, .router-page-head, .voucher-page-head, .session-page-head, .system-hero) {
  padding: 12px !important;
  gap: 10px !important;
}

html[data-theme="radiusku-clean"] :where(.table-head, .rk-table-head, .customer-table-head, .billing-table-head, .finance-table-head, .logs-table-head, .package-table-head, .profile-table-head, .session-table-head, .online-payment-head, .tool-system-head, .system-control-head, .finance-report-head, .modal-head, .rk-modal-head) {
  min-height: 46px !important;
  padding: 11px 12px !important;
  gap: 10px !important;
  background: var(--rk-sidebar-surface-head) !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme="radiusku-clean"] :where(.table-head, .rk-table-head, .finance-report-head, .system-control-head) :where(h2, h3, .card-title, .finance-report-title, strong) {
  margin: 0 !important;
  color: var(--text) !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar-actions, .rk-toolbar-actions, .toolbar-actions-with-search, .toolbar-actions-left, .toolbar-actions-right, .system-hero-actions, .finance-report-buttons, .system-action-row) {
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

html[data-theme="radiusku-clean"] :where(.panel-tabs, .customer-tabs, .version-tabs) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 6px !important;
  border: 1px solid var(--border) !important;
  border-radius: 15px !important;
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] :where(.panel-tab, .customer-tabs button, .version-tab) {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 11px !important;
  color: var(--text-soft) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

html[data-theme="radiusku-clean"] :where(.panel-tab, .customer-tabs button, .version-tab):is(:hover, :focus-visible),
html[data-theme="radiusku-clean"] :where(.panel-tab.is-active, .panel-tab[aria-selected="true"], .customer-tabs button.is-active, .customer-tabs button[aria-selected="true"], .version-tab.is-active) {
  color: var(--primary-strong) !important;
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border)) !important;
}

html[data-theme="radiusku-clean"] .page-body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select) {
  box-sizing: border-box !important;
  height: var(--rk-sidebar-control-h) !important;
  min-height: var(--rk-sidebar-control-h) !important;
  padding-block: 0 !important;
  padding-inline: 11px !important;
  border-radius: var(--rk-sidebar-control-radius) !important;
  border-color: var(--input-border) !important;
  background-color: var(--input-bg) !important;
  line-height: 1.3 !important;
}

html[data-theme="radiusku-clean"] .page-body textarea {
  min-height: 92px !important;
  padding: 9px 11px !important;
  border-radius: var(--rk-sidebar-control-radius) !important;
  line-height: 1.38 !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search, .user-table-search, .session-search) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: var(--rk-sidebar-control-h) !important;
  height: var(--rk-sidebar-control-h) !important;
  padding: 0 10px !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--rk-sidebar-control-radius) !important;
  background: var(--input-bg) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search, .user-table-search, .session-search) :where(input[type="search"], input[type="text"]) {
  flex: 1 1 auto !important;
  min-width: 90px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search, .user-table-search, .session-search) svg {
  width: 16px !important;
  height: 16px !important;
}

html[data-theme="radiusku-clean"] :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: var(--rk-sidebar-control-h) !important;
  padding: 3px 6px 3px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rk-sidebar-control-radius) !important;
  background: var(--surface-soft) !important;
  color: var(--text-soft) !important;
}

html[data-theme="radiusku-clean"] :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show) select {
  width: auto !important;
  min-width: 68px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding-inline: 9px 28px !important;
  border-radius: 9px !important;
}

html[data-theme="radiusku-clean"] :where(.action-dropdown-trigger, .toolbar .btn, .rk-toolbar .btn, .router-page-head .btn, .voucher-page-head .btn, .session-page-head .btn, .system-hero .btn) {
  min-height: 36px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
}

html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .online-payment-wrap, .voucher-report-table-wrap) {
  border-top: 0 !important;
  background: var(--surface) !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) thead th {
  height: 36px !important;
  padding: 8px 10px !important;
  color: var(--text-soft) !important;
  background: color-mix(in srgb, var(--table-head-bg) 82%, var(--surface)) !important;
  border-bottom: 1px solid var(--rk-sidebar-border-soft) !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) tbody td {
  padding: 8px 10px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 58%, transparent) !important;
  vertical-align: middle !important;
}

html[data-theme="radiusku-clean"] :where(.app-log-table, .app-log-wa-table) tbody td {
  vertical-align: top !important;
  line-height: 1.42 !important;
}

html[data-theme="radiusku-clean"] :where(.app-log-table, .app-log-wa-table) :where(td:last-child, .app-log-message-preview, .app-log-code) {
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html[data-theme="radiusku-clean"] .app-log-code {
  display: block !important;
  max-width: min(620px, 62vw) !important;
  padding: 6px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface-soft) !important;
  color: var(--text-soft) !important;
}

html[data-theme="radiusku-clean"] .app-log-message-preview-btn {
  appearance: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--primary-strong) !important;
  font: inherit !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
}

html[data-theme="radiusku-clean"] .app-log-subtitle {
  margin: 0 !important;
  padding: 10px 12px 6px !important;
  color: var(--text-soft) !important;
  font-weight: 700 !important;
}

html[data-theme="radiusku-clean"] :where(.customer-list-footer, .billing-list-footer, .finance-report-pagination, .online-payment-pagination, .customer-list-pagination, .app-log-pagination, .table-foot, .user-table-foot, .app-log-dt-footer) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-height: 44px !important;
  padding: 9px 12px !important;
  background: var(--surface-soft) !important;
  border-top: 1px solid var(--border) !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table-pagination a, .rk-table-pagination span, .customer-list-pagination a, .customer-list-pagination span, .app-log-pagination a, .app-log-pagination span) {
  min-height: 30px !important;
  border-radius: 9px !important;
}

html[data-theme="radiusku-clean"] :where(.empty-state, .compact-empty, .placeholder-state, .settings-placeholder-state) {
  border: 1px dashed color-mix(in srgb, var(--primary) 24%, var(--border)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 40%, var(--surface)), var(--surface)) !important;
  color: var(--text-soft) !important;
}

html[data-theme="radiusku-clean"] :where(.placeholder-wrap, .settings-placeholder-wrap, .tool-system-placeholder-wrap) {
  min-height: 260px !important;
  padding: 16px !important;
  background: var(--surface) !important;
}

html[data-theme="radiusku-clean"] :where(.placeholder-state, .settings-placeholder-state, .tool-system-placeholder-state) {
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
  width: min(560px, 100%) !important;
  min-height: 190px !important;
  padding: 24px !important;
  text-align: center !important;
}

html[data-theme="radiusku-clean"] :where(.placeholder-state, .settings-placeholder-state, .tool-system-placeholder-state) :where(h3, p) {
  margin: 0 !important;
}

html[data-theme="radiusku-clean"] .tool-system-placeholder-state.is-danger {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger-soft) 62%, var(--surface)), var(--surface)) !important;
}

html[data-theme="radiusku-clean"] :where(.finance-report-overview, .finance-report-actions-panel, .finance-report-kpi, .system-metric, .system-list-row, .customer-summary-card, .rk-summary-card, .quick-panel) {
  border-color: var(--border) !important;
  background: var(--surface) !important;
}

html[data-theme="radiusku-clean"] :where(.finance-report-table-controls, .app-log-dt-controls) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

html[data-theme="radiusku-clean"] :where(.system-list-row, .service-name, .finance-report-showing) {
  min-width: 0 !important;
}

html[data-theme="radiusku-clean"] :where(.data-main, .compact-main, .ppp-name-text, .service-name strong, .finance-report-customer-name) {
  color: var(--text) !important;
}

@media (max-width: 720px) {
  html[data-theme="radiusku-clean"] .page-body {
    gap: 8px !important;
    padding: 8px !important;
  }

  html[data-theme="radiusku-clean"] :where(.toolbar, .rk-toolbar, .router-page-head, .voucher-page-head, .session-page-head, .system-hero) {
    padding: 10px !important;
  }

  html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search, .user-table-search, .session-search) {
    width: 100% !important;
  }

  html[data-theme="radiusku-clean"] :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show) {
    width: 100% !important;
    justify-content: space-between !important;
  }

  html[data-theme="radiusku-clean"] :where(.customer-list-footer, .billing-list-footer, .finance-report-pagination, .online-payment-pagination, .customer-list-pagination, .app-log-pagination, .table-foot, .user-table-foot, .app-log-dt-footer) {
    align-items: stretch !important;
  }
}
/* END ui-v1.6.445 sidebar-wide page polish */

/* BEGIN ui-v1.6.446 finance report and expense form alignment */
html[data-theme="radiusku-clean"] .finance-report-overview {
  display: grid !important;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
  padding: 10px !important;
}

html[data-theme="radiusku-clean"] .finance-report-actions-panel {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 10px !important;
}

html[data-theme="radiusku-clean"] .finance-report-actions-title {
  color: var(--text-soft) !important;
  font-size: var(--rk-type-xs) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html[data-theme="radiusku-clean"] .finance-report-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] .finance-expense-form .field {
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html[data-theme="radiusku-clean"] .finance-expense-form .field label {
  min-height: 17px !important;
}

html[data-theme="radiusku-clean"] .finance-expense-actions .btn {
  min-height: var(--rk-sidebar-control-h) !important;
}

@media (max-width: 980px) {
  html[data-theme="radiusku-clean"] .finance-report-overview{
    grid-template-columns: 1fr !important;
  }

  html[data-theme="radiusku-clean"] .finance-report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  html[data-theme="radiusku-clean"] .finance-report-kpis {
    grid-template-columns: 1fr !important;
  }
  html[data-theme="radiusku-clean"] .finance-expense-actions .btn {
    width: 100% !important;
  }
}
/* END ui-v1.6.446 finance report and expense form alignment */

/* BEGIN ui-v1.6.447 search border and finance action labels */
html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search, .user-table-search, .session-search) {
  position: relative !important;
  overflow: hidden !important;
  border-color: color-mix(in srgb, var(--input-border) 92%, var(--border)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--input-border) 78%, var(--border)),
    0 1px 0 rgba(15, 23, 42, .03) !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .billing-search-form, .finance-report-search, .user-table-search, .session-search):focus-within {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--input-border)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 34%, var(--input-border)),
    0 0 0 3px var(--input-focus) !important;
}

html[data-theme="radiusku-clean"] .finance-report-actions-title {
  text-transform: none !important;
}

html[data-theme="radiusku-clean"] .finance-report-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
}

html[data-theme="radiusku-clean"] .finance-report-action-btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 88px !important;
  min-height: 34px !important;
  padding: 7px 11px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text-soft) !important;
  background: var(--surface-soft) !important;
  font: inherit !important;
  font-size: var(--rk-type-control) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html[data-theme="radiusku-clean"] .finance-report-action-btn:is(:hover, :focus-visible) {
  color: var(--primary-strong) !important;
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border)) !important;
}

html[data-theme="radiusku-clean"] .finance-report-action-btn[disabled] {
  opacity: .58 !important;
  cursor: not-allowed !important;
}

html[data-theme="radiusku-clean"] .finance-report-action-svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  stroke: currentColor !important;
}

html[data-theme="radiusku-clean"] .finance-report-action-btn.is-export {
  color: var(--primary-strong) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border)) !important;
}

html[data-theme="radiusku-clean"] .finance-report-action-btn.is-print {
  color: var(--info) !important;
  border-color: color-mix(in srgb, var(--info) 30%, var(--border)) !important;
}

@media (max-width: 620px) {
  html[data-theme="radiusku-clean"] .finance-report-action-btn {
    flex: 1 1 120px !important;
  }
}
/* END ui-v1.6.447 search border and finance action labels */

/* BEGIN ui-v1.6.448 finance action title wording */
html[data-theme="radiusku-clean"] .finance-report-actions-title::after {
  content: none !important;
}
/* END ui-v1.6.448 finance action title wording */

/* BEGIN ui-v1.6.449 customer id plain text */
html[data-theme="radiusku-clean"] .customer-report-table .customer-id-text {
  display: inline-block !important;
  color: var(--text-soft) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: default !important;
}
/* END ui-v1.6.449 customer id plain text */

/* BEGIN ui-v1.6.450 pop license status */
html[data-theme="radiusku-clean"] .settings-license-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 12px 14px 4px !important;
}

html[data-theme="radiusku-clean"] .settings-license-tile {
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] .settings-license-tile strong {
  display: block !important;
  margin-top: 4px !important;
  color: var(--text) !important;
  font-size: var(--rk-type-title-sm) !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

html[data-theme="radiusku-clean"] .settings-license-sections {
  display: grid !important;
  gap: 12px !important;
  padding: 10px 14px 0 !important;
}

html[data-theme="radiusku-clean"] .settings-license-card input[readonly] {
  color: var(--text) !important;
  background: var(--surface) !important;
  cursor: default !important;
}

html[data-theme="radiusku-clean"] .settings-license-alert,
html[data-theme="radiusku-clean"] .settings-license-note {
  margin: 12px 14px 0 !important;
}

@media (max-width: 980px) {
  html[data-theme="radiusku-clean"] .settings-license-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  html[data-theme="radiusku-clean"] .settings-license-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* END ui-v1.6.450 pop license status */

html[data-theme="radiusku-clean"] .settings-readonly-fieldset {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

html[data-theme="radiusku-clean"] .settings-readonly-fieldset:disabled {
  opacity: 1 !important;
}

html[data-theme="radiusku-clean"] .settings-readonly-fieldset:disabled :where(input, select, textarea) {
  background: var(--surface-subtle) !important;
  color: var(--text) !important;
  cursor: default !important;
}

/* BEGIN ui-v1.6.464 final compact table pagination override */
html[data-theme="radiusku-clean"] :where(.customer-list-footer, .billing-list-footer, .finance-report-pagination, .online-payment-pagination, .customer-list-pagination, .app-log-pagination, .table-foot, .user-table-foot, .rk-table-footer, .rk-list-pagination-footer, .rk-auto-table-footer) {
  min-height: 38px !important;
  padding: 6px 10px !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table-pagination a, .rk-table-pagination span, .rk-table-pagination button, .customer-list-pagination a, .customer-list-pagination span, .customer-list-pagination button, .app-log-pagination a, .app-log-pagination span, .app-log-pagination button) {
  min-height: 28px !important;
  height: 28px !important;
  padding: 4px 9px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
}

html[data-theme="radiusku-clean"] :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show, .rk-auto-table-entries) :where(select, input) {
  min-height: 30px !important;
  height: 30px !important;
  max-width: 92px !important;
  font-size: 12px !important;
}
/* END ui-v1.6.464 final compact table pagination override */

/* BEGIN ui-v1.6.465 ultra compact table controls */
html[data-theme="radiusku-clean"] :where(.customer-list-card, .package-profile-card, .topup-compact-card, .voucher-compact-card, .online-payment-card, .finance-report-card, .settings-user-compact-card, .router-compact-card, .table-card) :where(.table-head, .rk-table-head) {
  min-height: 34px !important;
  padding: 4px 8px !important;
  gap: 6px !important;
}

html[data-theme="radiusku-clean"] :where(.ppp-table-control-row, .customer-table-controls, .settings-user-table-control-row, .router-table-control-row) {
  gap: 6px !important;
  min-height: 28px !important;
}

html[data-theme="radiusku-clean"] :where(.table-head, .rk-table-head) :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show),
html[data-theme="radiusku-clean"] :where(.rk-table-footer, .table-foot, .customer-list-footer, .billing-list-footer, .finance-report-pagination, .online-payment-pagination, .customer-list-pagination, .app-log-pagination) :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show, .rk-auto-table-entries) {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 5px !important;
  color: var(--text-soft) !important;
  font-size: 12px !important;
}

html[data-theme="radiusku-clean"] :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show, .rk-auto-table-entries) label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
}

html[data-theme="radiusku-clean"] :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show, .rk-auto-table-entries) :where(select, input),
html[data-theme="radiusku-clean"] :where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show, .rk-auto-table-entries) label :where(select, input) {
  min-height: 26px !important;
  height: 26px !important;
  min-width: 54px !important;
  max-width: 72px !important;
  padding: 2px 22px 2px 8px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

html[data-theme="radiusku-clean"] :where(.customer-list-pagination-top) {
  min-height: 28px !important;
  padding: 3px 8px !important;
  border-radius: 0 !important;
}

html[data-theme="radiusku-clean"] :where(.customer-list-footer, .billing-list-footer, .finance-report-pagination, .online-payment-pagination, .customer-list-pagination, .app-log-pagination, .table-foot, .user-table-foot, .rk-table-footer, .rk-list-pagination-footer, .rk-auto-table-footer) {
  min-height: 32px !important;
  padding: 4px 8px !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table-pagination a, .rk-table-pagination span, .rk-table-pagination button, .customer-list-pagination a, .customer-list-pagination span, .customer-list-pagination button, .app-log-pagination a, .app-log-pagination span, .app-log-pagination button) {
  min-height: 24px !important;
  height: 24px !important;
  padding: 3px 7px !important;
  font-size: 11.5px !important;
}
/* END ui-v1.6.465 ultra compact table controls */

/* BEGIN ui-v1.6.466 unified search controls */
html[data-theme="radiusku-clean"] :where(.toolbar-actions-with-search, .ppp-table-control-row, .customer-table-controls, .settings-user-table-control-row, .router-table-control-row, .online-payment-filter-form, .finance-report-table-controls, .app-log-dt-controls) {
  align-items: center !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .user-table-search, .session-search, .online-payment-search, .app-log-dt-search) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 1 340px !important;
  width: min(340px, 100%) !important;
  min-width: 220px !important;
  max-width: 340px !important;
  min-height: 30px !important;
  height: 30px !important;
  margin-left: auto !important;
  padding: 0 8px !important;
  gap: 6px !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  color: var(--text-soft) !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar-stack, .rk-toolbar, .toolbar) :where(.toolbar-search, .rk-toolbar-search, .toolbar-search-form) {
  align-self: flex-end !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .user-table-search, .session-search, .online-payment-search, .app-log-dt-search) :where(span, label) {
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .user-table-search, .session-search, .online-payment-search, .app-log-dt-search) :where(input[type="search"], input[type="text"]) {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 12px !important;
}

html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .user-table-search, .session-search, .online-payment-search, .app-log-dt-search):focus-within {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] :where(.toolbar-search, .rk-toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .user-table-search, .session-search, .online-payment-search, .app-log-dt-search) {
    flex-basis: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    align-self: stretch !important;
  }
}
/* END ui-v1.6.466 unified search controls */

/* BEGIN ui-v1.6.469 laptop-fit table view */
@media (min-width: 1024px) {
  html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) {
    overflow-x: auto !important;
  }

  html[data-theme="radiusku-clean"] :where(table, .rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
  }

  html[data-theme="radiusku-clean"] :where(th, td, thead th, tbody td, .rk-table th, .rk-table td, .compact-table th, .compact-table td, .user-table th, .user-table td, .package-table th, .package-table td, .finance-table th, .finance-table td, .billing-compact-table th, .billing-compact-table td, .billing-report-table th, .billing-report-table td, .customer-report-table th, .customer-report-table td, .topup-compact-table th, .topup-compact-table td, .profile-compact-table th, .profile-compact-table td, .app-log-table th, .app-log-table td, .router-table th, .router-table td, .session-table th, .session-table td, .system-table th, .system-table td, .online-payment-table th, .online-payment-table td, .voucher-compact-table th, .voucher-compact-table td, .voucher-report-table th, .voucher-report-table td, .invoice-report-table th, .invoice-report-table td) {
    min-width: 0 !important;
    max-width: 220px !important;
    padding: 5px 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-theme="radiusku-clean"] :where(tbody td, .rk-table tbody td, .compact-table tbody td, .user-table tbody td, .package-table tbody td, .finance-table tbody td, .billing-compact-table tbody td, .billing-report-table tbody td, .customer-report-table tbody td, .topup-compact-table tbody td, .profile-compact-table tbody td, .app-log-table tbody td, .router-table tbody td, .session-table tbody td, .system-table tbody td, .online-payment-table tbody td, .voucher-compact-table tbody td, .voucher-report-table tbody td, .invoice-report-table tbody td) {
    font-size: 11px !important;
  }

  html[data-theme="radiusku-clean"] :where(td > :not(form):not(.inline-form):not(.dropdown):not(details), td strong, td .muted, td .data-main, td .compact-main, td .data-sub, td .compact-sub, td .rk-th-content, td .rk-th-label) {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-theme="radiusku-clean"] :where(.row-actions, .customer-actions, .ppp-compact-actions, .router-row-actions, .settings-user-actions, .settings-role-actions, .ppp-prof-actions, .hotspot-prof-col-action, .ppp-prof-col-action, .extra-service-actions, .user-balance-actions, .tool-db-backup-row-actions) {
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html[data-theme="radiusku-clean"] :where(.badge, .status-badge, .status-pill, .badge-mini, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge) {
    max-width: 100% !important;
    padding-inline: 5px !important;
    font-size: 10px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1366px) {
  html[data-theme="radiusku-clean"] :where(.page-body) {
    padding: 10px !important;
  }

  html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) {
    padding: 4px !important;
  }

  html[data-theme="radiusku-clean"] :where(th, td, thead th, tbody td, .rk-table th, .rk-table td, .compact-table th, .compact-table td, .user-table th, .user-table td, .package-table th, .package-table td, .finance-table th, .finance-table td, .billing-compact-table th, .billing-compact-table td, .billing-report-table th, .billing-report-table td, .customer-report-table th, .customer-report-table td, .topup-compact-table th, .topup-compact-table td, .profile-compact-table th, .profile-compact-table td, .app-log-table th, .app-log-table td, .router-table th, .router-table td, .session-table th, .session-table td, .system-table th, .system-table td, .online-payment-table th, .online-payment-table td, .voucher-compact-table th, .voucher-compact-table td, .voucher-report-table th, .voucher-report-table td, .invoice-report-table th, .invoice-report-table td) {
    padding: 4px 5px !important;
  }
}
/* END ui-v1.6.469 laptop-fit table view */

/* BEGIN ui-v1.6.473 customer table pagination parity and readable columns */
html[data-theme="radiusku-clean"] .customer-list-card .ppp-table-control-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .table-meta {
  flex: 1 1 220px !important;
  min-width: 180px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card :where(.table-pagination, .rk-table-pagination, .customer-list-pagination) {
  margin-left: auto !important;
}

html[data-theme="radiusku-clean"] .customer-list-card :where(.customer-report-table) {
  table-layout: fixed !important;
  width: max(100%, 1384px) !important;
  min-width: max(100%, 1384px) !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(th, td) {
  max-width: none !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-check) { width: 34px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-id) { width: 150px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-name) { width: 170px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-service) { width: 105px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-package) { width: 170px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-ip) { width: 96px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-renewed) { width: 135px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-due) { width: 130px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-status) { width: 122px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-owner) { width: 112px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-renew-print) { width: 84px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-action) { width: 76px !important; }

html[data-theme="radiusku-clean"] .customer-report-table :where(.ppp-id-col, .ppp-name-col, .ppp-service-col, .ppp-package-col, .ppp-ip-col, .ppp-renewed-col, .ppp-due-col, .ppp-status-col, .ppp-owner-col) {
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.ppp-package-col .customer-package-stack, .ppp-status-col .customer-status-stack, .ppp-info-cell-inner, .service-type-cell) {
  max-width: none !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.data-main, .compact-main, .data-sub, .compact-sub, .customer-id-text, .ppp-name-text, .service-type-label) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme="radiusku-clean"] .customer-list-pagination-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

@media (max-width: 720px) {
  html[data-theme="radiusku-clean"] .customer-list-card .ppp-table-control-row,
  html[data-theme="radiusku-clean"] .customer-list-pagination-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
}
/* END ui-v1.6.473 customer table pagination parity and readable columns */

/* BEGIN ui-v1.6.479 compact fixed customer columns */
html[data-theme="radiusku-clean"] .customer-list-card :where(.customer-report-table) {
  table-layout: fixed !important;
  width: max(100%, 1120px) !important;
  min-width: max(100%, 1120px) !important;
  font-size: 11.2px !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(th, td) {
  padding: 4px 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-check) { width: 28px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-id) { width: 118px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-name) { width: 138px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-service) { width: 78px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-package) { width: 128px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-ip) { width: 72px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-renewed) { width: 104px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-due) { width: 104px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-status) { width: 104px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-owner) { width: 82px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-renew-print) { width: 66px !important; }
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-action) { width: 58px !important; }

html[data-theme="radiusku-clean"] .customer-report-table :where(th.ppp-package-col, td.ppp-package-col) {
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.ppp-id-col, .ppp-name-col, .ppp-service-col, .ppp-package-col, .ppp-ip-col, .ppp-renewed-col, .ppp-due-col, .ppp-status-col, .ppp-owner-col) {
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.ppp-package-col .customer-package-stack, .ppp-status-col .customer-status-stack, .ppp-info-cell-inner, .service-type-cell) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.data-main, .compact-main, .data-sub, .compact-sub, .customer-id-text, .ppp-name-text, .service-type-label, .service-type-cell, .customer-package-stack, .rk-date-stack) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.data-main, .compact-main, .ppp-name-text, .customer-id-text) {
  font-size: 12px !important;
  line-height: 1.18 !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.data-sub, .compact-sub, .rk-time-line) {
  font-size: 10.2px !important;
  line-height: 1.12 !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.badge, .badge-mini, .customer-status-badge, .service-type-badge) {
  min-height: 17px !important;
  padding: 1px 5px !important;
  font-size: 9.6px !important;
  line-height: 1.1 !important;
}

html[data-theme="radiusku-clean"] .customer-report-table :where(.ppp-info-btn, .btn-mini, .table-rp-icon-btn, .table-action-icon-btn) {
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 3px 5px !important;
  font-size: 10px !important;
}
/* END ui-v1.6.479 compact fixed customer columns */

/* BEGIN ui-v1.6.474 stacked date-time cells */
:where(td.rk-date-cell, .rk-table td.rk-date-cell, .customer-report-table td.rk-date-cell) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

html[data-theme="radiusku-clean"] :where(td.rk-date-cell, .rk-table td.rk-date-cell, .user-table td.rk-date-cell, .package-table td.rk-date-cell, .finance-table td.rk-date-cell, .billing-compact-table td.rk-date-cell, .billing-report-table td.rk-date-cell, .customer-report-table td.rk-date-cell, .topup-compact-table td.rk-date-cell, .profile-compact-table td.rk-date-cell, .app-log-table td.rk-date-cell) {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* END ui-v1.6.474 stacked date-time cells */

/* BEGIN ui-v1.6.480 customer table final width lock */
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table-wrap {
  overflow: auto !important;
  max-height: min(68vh, 640px) !important;
  overscroll-behavior: auto !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table {
  table-layout: fixed !important;
  width: 1442px !important;
  min-width: 1442px !important;
  max-width: 1442px !important;
  font-size: 11.2px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-check) { width: 34px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-id) { width: 150px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-name) { width: 170px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-service) { width: 105px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-package) { width: 170px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-ip) { width: 96px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-renewed) { width: 135px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-due) { width: 130px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-status) { width: 180px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-owner) { width: 112px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-renew-print) { width: 84px !important; }
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-action) { width: 76px !important; }

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(th, td, td.rk-date-cell) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.ppp-info-cell-inner, .service-type-cell, .customer-package-stack, .customer-status-stack) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.ppp-info-btn) {
  flex: 0 0 24px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.ppp-name-text) {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.data-main, .compact-main, .data-sub, .compact-sub, .customer-id-text, .ppp-name-text, .service-type-label, .customer-package-stack, .customer-status-stack, .rk-date-stack, .rk-date-line, .rk-time-line) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .ppp-status-col .customer-status-stack {
  display: inline-grid !important;
  justify-items: start !important;
  gap: 2px !important;
  overflow: visible !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .ppp-status-col :where(.badge, .badge-mini, .customer-status-badge) {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .customer-status-head {
  display: inline-grid !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 1px !important;
  line-height: 1.05 !important;
  vertical-align: middle !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .customer-status-head .rk-th-content {
  display: inline-grid !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 1px !important;
  line-height: 1.05 !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .customer-status-head .rk-th-label {
  display: block !important;
  line-height: 1.05 !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .customer-status-head .sort-mark {
  display: block !important;
  margin-left: 0 !important;
  line-height: 1 !important;
}
/* END ui-v1.6.480 customer table final width lock */

/* BEGIN ui-v1.6.484 unified table view behavior */
html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap):not(.customer-report-table-wrap) {
  overflow: auto !important;
  max-height: min(68vh, 640px) !important;
  overscroll-behavior: auto !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table):not(.customer-report-table) {
  table-layout: fixed !important;
  width: max(100%, var(--rk-table-min-width, 1120px)) !important;
  min-width: max(100%, var(--rk-table-min-width, 1120px)) !important;
  font-size: 11.2px !important;
}

html[data-theme="radiusku-clean"] :where(.router-table, .session-table, .system-table, .app-log-table, .invoice-report-table, .voucher-report-table, .tool-import-preview-table, .tool-import-jobs-table) {
  --rk-table-min-width: 1240px;
}

html[data-theme="radiusku-clean"] :where(.billing-report-table, .finance-table, .finance-report-table, .online-payment-table, .voucher-compact-table) {
  --rk-table-min-width: 1320px;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table):not(.customer-report-table) :where(th, td) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table):not(.customer-report-table) thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .topup-compact-table, .profile-compact-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table):not(.customer-report-table) :where(td:not(.rk-date-cell), th, .data-main, .compact-main, .data-sub, .compact-sub, .badge, .status-badge, .status-pill, .table-action-label) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] :where(.app-log-table):not(.customer-report-table) td {
  white-space: normal !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table):not(.customer-report-table) td.rk-date-cell {
  overflow: hidden !important;
}
/* END ui-v1.6.484 unified table view behavior */

/* BEGIN ui-v1.6.486 stable session table */
html[data-theme="radiusku-clean"] .session-table {
  --rk-table-min-width: 1155px;
  table-layout: fixed !important;
}

html[data-theme="radiusku-clean"] .session-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

html[data-theme="radiusku-clean"] .session-summary-card {
  min-height: 82px;
  cursor: default;
}

html[data-theme="radiusku-clean"] .session-summary-card::after {
  display: none;
}

html[data-theme="radiusku-clean"] .session-summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

html[data-theme="radiusku-clean"] .session-summary-card.is-sessions .session-summary-icon { background: #e1f8ec; color: #16a56a; }
html[data-theme="radiusku-clean"] .session-summary-card.is-upload .session-summary-icon { background: #e9e6ff; color: #5f4fd7; }
html[data-theme="radiusku-clean"] .session-summary-card.is-download .session-summary-icon { background: #e0f2fe; color: #168bd3; }
html[data-theme="radiusku-clean"] .session-summary-card.is-nas .session-summary-icon { background: #fff3d7; color: #d68a00; }

html[data-theme="radiusku-clean"] .session-filter-toolbar {
  display: flex;
  justify-content: flex-start;
  padding: 12px 12px 0;
}

html[data-theme="radiusku-clean"] .session-filter-panel {
  margin: 12px;
}

html[data-theme="radiusku-clean"] .session-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

html[data-theme="radiusku-clean"] .session-filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .session-summary-grid,
  html[data-theme="radiusku-clean"] .session-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  html[data-theme="radiusku-clean"] .session-summary-grid,
  html[data-theme="radiusku-clean"] .session-filter-grid {
    grid-template-columns: 1fr;
  }
}

html[data-theme="radiusku-clean"] .session-table :where(th, td) {
  height: 42px !important;
}

html[data-theme="radiusku-clean"] .session-table :where(.session-col-username) { width: 170px !important; }
html[data-theme="radiusku-clean"] .session-table :where(.session-col-name) { width: 170px !important; }
html[data-theme="radiusku-clean"] .session-table :where(.session-col-router) { width: 140px !important; }
html[data-theme="radiusku-clean"] .session-table :where(.session-col-calling) { width: 150px !important; }
html[data-theme="radiusku-clean"] .session-table :where(.session-col-ip) { width: 110px !important; }
html[data-theme="radiusku-clean"] .session-table :where(.session-col-start) { width: 135px !important; }
html[data-theme="radiusku-clean"] .session-table :where(.session-col-duration) { width: 100px !important; }
html[data-theme="radiusku-clean"] .session-table :where(.session-col-bytes) { width: 90px !important; text-align: right !important; }

html[data-theme="radiusku-clean"] .session-table :where(thead th) {
  cursor: pointer !important;
  user-select: none !important;
}

html[data-theme="radiusku-clean"] .session-table .session-sort-mark {
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

html[data-theme="radiusku-clean"] .session-table thead th.is-sorted .session-sort-mark {
  color: var(--primary) !important;
}
/* END ui-v1.6.486 stable session table */

/* BEGIN ui-v1.6.475 system tools and logs page unification */
html[data-theme="radiusku-clean"] :where(.system-control-toolbar, .tool-system-toolbar) {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html[data-theme="radiusku-clean"] :where(.system-control-toolbar h2, .tool-system-toolbar .card-title) {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: var(--rk-font-title-up) !important;
  line-height: 1.25 !important;
}

html[data-theme="radiusku-clean"] .section-eyebrow {
  margin-bottom: 2px !important;
  color: var(--primary) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html[data-theme="radiusku-clean"] .system-metric-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html[data-theme="radiusku-clean"] .system-metric {
  min-height: 70px !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 11px !important;
}

html[data-theme="radiusku-clean"] .system-two-col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html[data-theme="radiusku-clean"] :where(.system-list, .tool-import-wrap, .tool-import-jobs, .tool-db-restore-guard, .tool-import-preview, .tool-import-downloads) {
  display: grid !important;
  gap: 10px !important;
}

html[data-theme="radiusku-clean"] :where(.tool-import-wrap) {
  padding: 12px !important;
}

html[data-theme="radiusku-clean"] :where(.tool-import-panel-title, .tool-import-section-title) {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

html[data-theme="radiusku-clean"] :where(.tool-import-required-note, .tool-import-note) {
  padding: 9px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] :where(.tool-import-preview, .tool-import-jobs, .tool-db-restore-guard, .tool-import-downloads, .tool-db-backup-list, .tool-db-jobs-list) {
  padding: 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface)) !important;
}

html[data-theme="radiusku-clean"] :where(.tool-import-preview-head) {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme="radiusku-clean"] :where(.tool-import-form, .tool-db-restore-form) {
  display: grid !important;
  gap: 10px !important;
}

html[data-theme="radiusku-clean"] :where(.tool-import-grid) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html[data-theme="radiusku-clean"] .tool-system-card :where(.field-span-2) {
  grid-column: span 2 !important;
}

html[data-theme="radiusku-clean"] :where(.tool-import-template-actions, .tool-db-backup-actions, .billing-filter-actions.tool-import-actions) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] .app-log-card > .app-log-subtitle {
  border-top: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] .app-log-wa-head {
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
}

html[data-theme="radiusku-clean"] .app-log-dt-controls {
  width: 100% !important;
}

html[data-theme="radiusku-clean"] .app-log-dt-search {
  margin-left: auto !important;
}

html[data-theme="radiusku-clean"] .app-log-dt-info {
  color: var(--muted) !important;
  font-size: 12px !important;
}

html[data-theme="radiusku-clean"] :where(.system-log-output, .app-log-message-modal-pre) {
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: #0f172a !important;
  color: #e5e7eb !important;
  overflow: auto !important;
}

@media (max-width: 1180px) {
  html[data-theme="radiusku-clean"] .system-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .system-two-col,
  html[data-theme="radiusku-clean"] .tool-import-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-theme="radiusku-clean"] .tool-system-card :where(.field-span-2) {
    grid-column: span 1 !important;
  }

  html[data-theme="radiusku-clean"] .system-metric-grid {
    grid-template-columns: 1fr !important;
  }
}
/* END ui-v1.6.475 system tools and logs page unification */

/* BEGIN ui-v1.6.478 compact PPP profile owner column */
html[data-theme="radiusku-clean"] .ppp-profile-fit-table .ppp-prof-owner-text {
  display: inline-block !important;
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: bottom !important;
  white-space: nowrap !important;
}
/* END ui-v1.6.478 compact PPP profile owner column */

/* BEGIN ui-v1.6.488 PPP static IP form */
html[data-theme="radiusku-clean"] .inline-check-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
}

html[data-theme="radiusku-clean"] .inline-check-button:hover {
  text-decoration: underline;
}

html[data-theme="radiusku-clean"] .help.is-success {
  color: var(--success) !important;
  font-weight: 700;
}

html[data-theme="radiusku-clean"] .help.is-error {
  color: var(--danger) !important;
  font-weight: 700;
}

html[data-theme="radiusku-clean"] .help.is-warning {
  color: #b45309 !important;
  font-weight: 700;
}
/* END ui-v1.6.488 PPP static IP form */

/* BEGIN ui-v1.6.490 manual customer whatsapp */
html[data-theme="radiusku-clean"] .customer-wa-old-card {
  max-width: 620px !important;
}

html[data-theme="radiusku-clean"] .customer-wa-warning ul {
  margin: 0 !important;
  padding-left: 20px !important;
  color: var(--text) !important;
}

html[data-theme="radiusku-clean"] .customer-wa-type-row {
  gap: 24px !important;
}

html[data-theme="radiusku-clean"] .customer-wa-picker {
  display: grid !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] .customer-wa-search-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] .customer-wa-selected,
html[data-theme="radiusku-clean"] .customer-wa-results {
  min-height: 42px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  padding: 8px !important;
}

html[data-theme="radiusku-clean"] .customer-wa-results {
  max-height: 190px !important;
  overflow: auto !important;
}

html[data-theme="radiusku-clean"] .customer-wa-chip {
  margin: 2px !important;
  cursor: pointer !important;
}

html[data-theme="radiusku-clean"] .customer-wa-result {
  width: 100% !important;
  display: block !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text) !important;
  cursor: pointer !important;
  padding: 8px !important;
  text-align: left !important;
}

html[data-theme="radiusku-clean"] .customer-wa-result:hover {
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] .customer-wa-variable-grid {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 4px 8px !important;
  font-size: 13px !important;
  align-items: center !important;
}

html[data-theme="radiusku-clean"] .customer-wa-variable-grid button {
  min-height: 28px !important;
  border: 1px solid var(--border-strong, var(--border)) !important;
  border-radius: 4px !important;
  background: var(--surface-soft) !important;
  color: var(--text) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  padding: 3px 8px !important;
}

html[data-theme="radiusku-clean"] .customer-wa-variable-grid button:hover {
  background: var(--primary-soft) !important;
  border-color: var(--primary) !important;
}

html[data-theme="radiusku-clean"] .customer-wa-variable-grid span {
  color: var(--text) !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

html[data-theme="radiusku-clean"] .customer-wa-variable-grid strong {
  font-weight: 850 !important;
  color: var(--text) !important;
}
/* END ui-v1.6.490 manual customer whatsapp */

.invoice-head .logo-box,
html[data-theme="radiusku-clean"] .invoice-head .logo-box {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.invoice-action-toolbar {
  width: min(210mm, calc(100% - 24px));
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.invoice-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #0f75bc;
  color: #fff !important;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.15;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
}

.invoice-action-btn:hover {
  background: #0b65a6;
  border-color: #0b65a6;
  color: #fff !important;
}

.invoice-action-btn-soft {
  background: #fff;
  color: #0f172a !important;
}

.invoice-action-btn-soft:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a !important;
}

@media (max-width: 860px) {
  .invoice-action-toolbar {
    width: calc(100% - 16px) !important;
    margin: 8px auto 0 !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .invoice-action-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 145px;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .sheet {
    width: calc(100% - 16px) !important;
    margin: 8px auto !important;
    padding: 12px !important;
  }

  .invoice-head,
  .invoice-head.no-right-logo {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    text-align: center !important;
  }

  .invoice-head .logo-box {
    min-height: auto !important;
    justify-content: center !important;
    place-items: center !important;
  }

  .invoice-head .logo-box img {
    width: auto !important;
    max-width: min(240px, 86vw) !important;
    max-height: 92px !important;
  }

  .invoice-head .title-box {
    text-align: center !important;
    min-width: 0 !important;
  }

  .invoice-title {
    font-size: 23px !important;
    line-height: 1.12 !important;
  }

  .invoice-no {
    font-size: 11.5px !important;
    overflow-wrap: anywhere !important;
  }

  .party-grid,
  .summary-grid {
    grid-template-columns: 1fr !important;
  }

  .party-card,
  .pay-instructions,
  .totals {
    width: 100% !important;
  }

  .invoice-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .invoice-table {
    min-width: 560px !important;
    font-size: 11.5px !important;
  }

  .invoice-table th,
  .invoice-table td {
    padding: 7px 8px !important;
  }
}

@media (max-width: 420px) {
  .invoice-title {
    font-size: 21px !important;
  }

  .invoice-head .logo-box img {
    max-width: min(220px, 88vw) !important;
    max-height: 86px !important;
  }

  .invoice-table {
    min-width: 520px !important;
  }
}

@media print {
  .invoice-action-toolbar {
    display: none !important;
  }
}

/* BEGIN ui-v1.6.493 customer status column fit */
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-status),
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-status) {
  width: 100px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(th.ppp-status-col, td.ppp-status-col),
html[data-theme="radiusku-clean"] .customer-report-table :where(th.ppp-status-col, td.ppp-status-col) {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  overflow: visible !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .customer-status-head,
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .customer-status-head .rk-th-content,
html[data-theme="radiusku-clean"] .customer-report-table .customer-status-head,
html[data-theme="radiusku-clean"] .customer-report-table .customer-status-head .rk-th-content {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-items: start !important;
  gap: 4px !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .customer-status-head .sort-mark,
html[data-theme="radiusku-clean"] .customer-report-table .customer-status-head .sort-mark {
  display: inline-flex !important;
  flex: 0 0 13px !important;
  margin-left: 2px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .ppp-status-col .customer-status-stack,
html[data-theme="radiusku-clean"] .customer-report-table .ppp-status-col .customer-status-stack {
  display: inline-grid !important;
  grid-auto-rows: min-content !important;
  justify-items: start !important;
  gap: 2px !important;
  width: max-content !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table .ppp-status-col :where(.badge, .badge-mini, .customer-status-badge),
html[data-theme="radiusku-clean"] .customer-report-table .ppp-status-col :where(.badge, .badge-mini, .customer-status-badge) {
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
/* END ui-v1.6.493 customer status column fit */

/* BEGIN ui-v1.6.494 customer ip and date column fit */
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-ip),
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-ip),
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(th.ppp-ip-col, td.ppp-ip-col),
html[data-theme="radiusku-clean"] .customer-report-table :where(th.ppp-ip-col, td.ppp-ip-col) {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-renewed, .customer-col-due),
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-renewed, .customer-col-due) {
  width: 90px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(th.ppp-renewed-col, td.ppp-renewed-col, th.ppp-due-col, td.ppp-due-col),
html[data-theme="radiusku-clean"] .customer-report-table :where(th.ppp-renewed-col, td.ppp-renewed-col, th.ppp-due-col, td.ppp-due-col) {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.ppp-renewed-col .customer-sort-link, .ppp-due-col .customer-sort-link),
html[data-theme="radiusku-clean"] .customer-report-table :where(.ppp-renewed-col .customer-sort-link, .ppp-due-col .customer-sort-link) {
  max-width: 100% !important;
  gap: 2px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.ppp-renewed-col .rk-date-stack, .ppp-due-col .rk-date-stack),
html[data-theme="radiusku-clean"] .customer-report-table :where(.ppp-renewed-col .rk-date-stack, .ppp-due-col .rk-date-stack) {
  display: inline-grid !important;
  grid-auto-rows: min-content !important;
  gap: 1px !important;
  width: max-content !important;
  max-width: 100% !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.ppp-renewed-col .rk-date-line, .ppp-due-col .rk-date-line),
html[data-theme="radiusku-clean"] .customer-report-table :where(.ppp-renewed-col .rk-date-line, .ppp-due-col .rk-date-line) {
  font-size: 10.8px !important;
  line-height: 1.05 !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.ppp-renewed-col .rk-time-line, .ppp-due-col .rk-time-line),
html[data-theme="radiusku-clean"] .customer-report-table :where(.ppp-renewed-col .rk-time-line, .ppp-due-col .rk-time-line) {
  font-size: 9.8px !important;
  line-height: 1.05 !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-ip-stack),
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-ip-stack) {
  display: inline-grid !important;
  grid-auto-rows: min-content !important;
  justify-items: start !important;
  gap: 1px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  line-height: 1.05 !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-ip-stack .data-main, .customer-ip-stack .compact-main, .customer-ip-stack .data-sub, .customer-ip-stack .compact-sub),
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-ip-stack .data-main, .customer-ip-stack .compact-main, .customer-ip-stack .data-sub, .customer-ip-stack .compact-sub) {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.08 !important;
}
/* END ui-v1.6.494 customer ip and date column fit */

/* BEGIN ui-v1.6.495 compact customer identity columns */
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-id),
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-id),
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(th.ppp-id-col, td.ppp-id-col),
html[data-theme="radiusku-clean"] .customer-report-table :where(th.ppp-id-col, td.ppp-id-col) {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-service),
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-service),
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(th.ppp-service-col, td.ppp-service-col),
html[data-theme="radiusku-clean"] .customer-report-table :where(th.ppp-service-col, td.ppp-service-col) {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-package),
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-package),
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(th.ppp-package-col, td.ppp-package-col),
html[data-theme="radiusku-clean"] .customer-report-table :where(th.ppp-package-col, td.ppp-package-col) {
  width: 128px !important;
  min-width: 128px !important;
  max-width: 128px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(.customer-col-owner),
html[data-theme="radiusku-clean"] .customer-report-table :where(.customer-col-owner),
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(th.ppp-owner-col, td.ppp-owner-col),
html[data-theme="radiusku-clean"] .customer-report-table :where(th.ppp-owner-col, td.ppp-owner-col) {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
}
/* END ui-v1.6.495 compact customer identity columns */

/* BEGIN ui-v1.6.498 compact customer table total width */
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table {
  width: max(100%, 1112px) !important;
  min-width: max(100%, 1112px) !important;
  max-width: none !important;
}
/* END ui-v1.6.498 compact customer table total width */

/* BEGIN ui-v1.6.499 unified compact table view standard */
html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) {
  overflow: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) {
  table-layout: fixed !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) :where(th, td) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) :where(td:not(.rk-date-cell), th, .data-main, .compact-main, .data-sub, .compact-sub, .badge, .status-badge, .status-pill, .table-action-label) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) td.rk-date-cell {
  overflow: hidden !important;
  white-space: normal !important;
}

html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap):not(.customer-report-table-wrap) {
  max-height: min(68vh, 640px) !important;
}
/* END ui-v1.6.499 unified compact table view standard */

/* BEGIN ui-v1.6.500 billing table readable name columns */
/* ui-v1.6.671 rapikan ukuran kolom: widened id/service/amount/due/owner columns so the
   sort-arrow header labels and full invoice-id / due-datetime body values no longer get
   hard-clipped (was silently truncated with no ellipsis, looked broken/messy). */
html[data-theme="radiusku-clean"] :where(.billing-report-table) {
  --rk-table-min-width: 1360px !important;
  width: max(100%, 1360px) !important;
  min-width: max(100%, 1360px) !important;
}

html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-check) { width: 30px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-id) { width: 140px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-invoice) { width: 138px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-customer-code) { width: 98px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-name) { width: 220px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-service) { width: 96px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-package) { width: 126px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-amount) { width: 120px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-due) { width: 132px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-owner) { width: 96px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-renew-print) { width: 88px !important; }
html[data-theme="radiusku-clean"] .billing-report-table :where(.billing-col-action) { width: 76px !important; }

html[data-theme="radiusku-clean"] .billing-report-table :where(th, td) {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

html[data-theme="radiusku-clean"] .billing-report-table .ppp-info-cell-inner {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html[data-theme="radiusku-clean"] .billing-report-table .ppp-name-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-theme="radiusku-clean"] .billing-report-table .billing-owner-col {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* END ui-v1.6.500 billing table readable name columns */

/* BEGIN ui-v1.6.501 all POP table view final standard */
html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table {
  table-layout: fixed !important;
  width: max(100%, var(--rk-table-min-width, 1080px)) !important;
  min-width: max(100%, var(--rk-table-min-width, 1080px)) !important;
  font-size: 11.2px !important;
}

html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table :where(th, td) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table :where(td:not(.rk-date-cell), th, .data-main, .compact-main, .data-sub, .compact-sub, .badge, .status-badge, .status-pill, .muted, .compact-link) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table td.rk-date-cell {
  white-space: normal !important;
}

html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table :where(.actions, .rk-actions, .customer-actions, .ppp-compact-actions) {
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) {
  max-height: min(68vh, 640px) !important;
}

html[data-theme="radiusku-clean"] :where(.app-log-table-wrap) {
  max-height: min(72vh, 720px) !important;
}
/* END ui-v1.6.501 all POP table view final standard */

/* BEGIN ui-v1.6.606 smooth activity and app log scroll */
html[data-theme="radiusku-clean"] .dashboard-tab-panel[data-dashboard-tab-panel="activity"],
html[data-theme="radiusku-clean"] .activity-feed {
  overflow: visible !important;
  max-height: none !important;
  overscroll-behavior: auto !important;
}

html[data-theme="radiusku-clean"] .activity-item {
  contain: layout style !important;
  border-radius: 10px !important;
}

html[data-theme="radiusku-clean"] .activity-desc {
  overflow-wrap: anywhere !important;
}

html[data-theme="radiusku-clean"] .app-log-card .app-log-table thead th {
  position: sticky !important;
  top: 0 !important;
}

html[data-theme="radiusku-clean"] .app-log-card .app-log-table {
  --rk-table-min-width: 1120px;
}

html[data-theme="radiusku-clean"] .app-log-card .app-log-table td {
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .app-log-card .app-log-table td:last-child {
  max-width: 420px !important;
}
/* END ui-v1.6.606 smooth activity and app log scroll */

/* BEGIN ui-v1.6.607 dashboard activity pagination and app log table parity */
html[data-theme="radiusku-clean"] .activity-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 0 0;
}

html[data-theme="radiusku-clean"] .activity-page-indicator {
  min-width: 54px;
  text-align: center;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 800;
}

html[data-theme="radiusku-clean"] .activity-pagination[hidden] {
  display: none !important;
}

html[data-theme="radiusku-clean"] .app-log-card .app-log-table-wrap {
  max-height: min(68vh, 640px) !important;
  overflow: auto !important;
  overscroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
/* END ui-v1.6.607 dashboard activity pagination and app log table parity */

/* BEGIN ui-v1.6.502 mobile customer dropdown left align */
@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .customer-list-toolbar,
  html[data-theme="radiusku-clean"] .customer-list-toolbar > div,
  html[data-theme="radiusku-clean"] .customer-list-toolbar .toolbar-actions-with-search {
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html[data-theme="radiusku-clean"] .customer-list-toolbar .action-dropdown {
    align-self: flex-start !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  html[data-theme="radiusku-clean"] .customer-list-toolbar .action-dropdown-trigger {
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
  }

  html[data-theme="radiusku-clean"] .customer-list-toolbar .action-dropdown-menu,
  html[data-theme="radiusku-clean"] .customer-list-toolbar .rk-dropdown-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: min(92vw, 320px) !important;
    max-width: min(92vw, 320px) !important;
    text-align: left !important;
  }
}
/* END ui-v1.6.502 mobile customer dropdown left align */

/* BEGIN ui-v1.6.503 compact clickable customer summary cards */
html[data-theme="radiusku-clean"] .customer-report-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

html[data-theme="radiusku-clean"] .customer-report-kpi.customer-summary-link {
  color: inherit !important;
  text-decoration: none !important;
}

html[data-theme="radiusku-clean"] .customer-report-kpi {
  min-height: 62px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] .customer-report-kpi .customer-summary-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  font-size: 14px !important;
}

html[data-theme="radiusku-clean"] .customer-report-kpi .customer-summary-title {
  font-size: 10.6px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

html[data-theme="radiusku-clean"] .customer-report-kpi .customer-summary-value {
  font-size: 18px !important;
  line-height: 1.05 !important;
}

html[data-theme="radiusku-clean"] .customer-report-kpi.customer-summary-link:hover,
html[data-theme="radiusku-clean"] .customer-report-kpi.customer-summary-link:focus-visible {
  border-color: rgba(37, 99, 235, .45) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="radiusku-clean"] .customer-report-kpi.customer-summary-link.is-active {
  border-color: rgba(37, 99, 235, .65) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .35), 0 8px 18px rgba(37, 99, 235, .08) !important;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .customer-report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-theme="radiusku-clean"] .customer-report-kpi {
    min-height: 56px !important;
    padding: 8px !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html[data-theme="radiusku-clean"] .customer-report-kpi .customer-summary-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 12px !important;
  }

  html[data-theme="radiusku-clean"] .customer-report-kpi .customer-summary-title {
    font-size: 9.8px !important;
  }

  html[data-theme="radiusku-clean"] .customer-report-kpi .customer-summary-value {
    font-size: 16px !important;
  }
}
/* END ui-v1.6.503 compact clickable customer summary cards */

/* BEGIN ui-v1.6.504 dashboard mobile 2x2 summary grids */
@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .dash-overview-grid,
  html[data-theme="radiusku-clean"] .mini-strip-grid.mini-strip-grid-host,
  html[data-theme="radiusku-clean"] .dashboard-legacy-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html[data-theme="radiusku-clean"] .dash-overview-grid .overview-tile {
    min-height: 58px !important;
    padding: 7px !important;
  }

  html[data-theme="radiusku-clean"] .dash-overview-grid .overview-kicker,
  html[data-theme="radiusku-clean"] .mini-strip-grid-host .mini-strip-label {
    font-size: 9.8px !important;
    line-height: 1.15 !important;
  }

  html[data-theme="radiusku-clean"] .dash-overview-grid .overview-number {
    font-size: 14.5px !important;
    line-height: 1.1 !important;
  }

  html[data-theme="radiusku-clean"] .mini-strip-grid-host .mini-strip {
    min-height: 42px !important;
    padding: 7px !important;
    gap: 6px !important;
  }

  html[data-theme="radiusku-clean"] .mini-strip-grid-host .mini-strip strong {
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-theme="radiusku-clean"] .dash-overview-grid .overview-glyph,
  html[data-theme="radiusku-clean"] .mini-strip-grid-host .dash-icon,
  html[data-theme="radiusku-clean"] .legacy-summary-icon {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }

  html[data-theme="radiusku-clean"] .legacy-summary-item {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 58px !important;
    padding: 7px !important;
  }

  html[data-theme="radiusku-clean"] .legacy-summary-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  html[data-theme="radiusku-clean"] .legacy-summary-title {
    font-size: 9.2px !important;
  }

  html[data-theme="radiusku-clean"] .legacy-summary-value {
    font-size: 15px !important;
  }

  html[data-theme="radiusku-clean"] .legacy-summary-note {
    min-height: 16px !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
  }
}
/* END ui-v1.6.504 dashboard mobile 2x2 summary grids */

/* BEGIN ui-v1.6.505 package profile mobile dropdown left align */
@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .package-profile-toolbar,
  html[data-theme="radiusku-clean"] .package-profile-toolbar > div,
  html[data-theme="radiusku-clean"] .package-profile-toolbar .toolbar-actions-with-search {
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html[data-theme="radiusku-clean"] .package-profile-toolbar .action-dropdown {
    align-self: flex-start !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  html[data-theme="radiusku-clean"] .package-profile-toolbar .action-dropdown-trigger {
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
  }

  html[data-theme="radiusku-clean"] .package-profile-toolbar .action-dropdown-menu,
  html[data-theme="radiusku-clean"] .package-profile-toolbar .rk-dropdown-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: min(92vw, 320px) !important;
    max-width: min(92vw, 320px) !important;
    text-align: left !important;
  }
}
/* END ui-v1.6.505 package profile mobile dropdown left align */

/* BEGIN ui-v1.6.506 topup mobile 2x2 summary cards */
@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .topup-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  html[data-theme="radiusku-clean"] .topup-summary-grid .customer-summary-card {
    min-height: 58px !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
  }

  html[data-theme="radiusku-clean"] .topup-summary-grid .customer-summary-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 12px !important;
  }

  html[data-theme="radiusku-clean"] .topup-summary-grid .customer-summary-label {
    font-size: 9.8px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  html[data-theme="radiusku-clean"] .topup-summary-grid .customer-summary-value {
    font-size: 13.5px !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}
/* END ui-v1.6.506 topup mobile 2x2 summary cards */

/* BEGIN ui-v1.6.507 unified mobile summary windows */
@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] :where(
    .billing-summary-grid,
    .finance-summary-grid,
    .finance-report-kpis,
    .online-payment-summary-grid,
    .router-summary-grid,
    .router-time-grid,
    .system-metric-grid,
    .session-kpi-grid,
    .kpi-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  html[data-theme="radiusku-clean"] :where(
    .billing-summary-grid,
    .finance-summary-grid,
    .online-payment-summary-grid
  ) .customer-summary-card,
  html[data-theme="radiusku-clean"] .finance-report-kpis .finance-report-kpi,
  html[data-theme="radiusku-clean"] .router-time-grid .rk-summary-card,
  html[data-theme="radiusku-clean"] .kpi-grid .mini-kpi,
  html[data-theme="radiusku-clean"] .system-metric-grid .system-metric {
    min-height: 58px !important;
    padding: 8px !important;
    gap: 7px !important;
  }

  html[data-theme="radiusku-clean"] :where(
    .billing-summary-grid,
    .finance-summary-grid,
    .online-payment-summary-grid
  ) .customer-summary-card {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    align-items: center !important;
  }

  html[data-theme="radiusku-clean"] :where(
    .billing-summary-grid,
    .finance-summary-grid,
    .online-payment-summary-grid
  ) .customer-summary-card:not(:has(.customer-summary-icon)) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme="radiusku-clean"] :where(
    .billing-summary-grid,
    .finance-summary-grid,
    .online-payment-summary-grid
  ) .customer-summary-icon,
  html[data-theme="radiusku-clean"] .finance-report-kpi-icon,
  html[data-theme="radiusku-clean"] .router-report-kpi-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex-basis: 26px !important;
    font-size: 12px !important;
  }

  html[data-theme="radiusku-clean"] :where(
    .billing-summary-grid,
    .finance-summary-grid,
    .online-payment-summary-grid
  ) :where(.customer-summary-title, .customer-summary-label),
  html[data-theme="radiusku-clean"] .finance-report-kpi-label,
  html[data-theme="radiusku-clean"] .router-summary-title,
  html[data-theme="radiusku-clean"] .system-metric .metric-label,
  html[data-theme="radiusku-clean"] .mini-kpi .muted.small {
    font-size: 9.8px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  html[data-theme="radiusku-clean"] :where(
    .billing-summary-grid,
    .finance-summary-grid,
    .online-payment-summary-grid
  ) .customer-summary-value,
  html[data-theme="radiusku-clean"] .finance-report-kpi-value,
  html[data-theme="radiusku-clean"] .router-report-kpi strong,
  html[data-theme="radiusku-clean"] .router-time-grid .rk-summary-card strong,
  html[data-theme="radiusku-clean"] .system-metric strong,
  html[data-theme="radiusku-clean"] .mini-kpi strong {
    font-size: 13.5px !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-theme="radiusku-clean"] #customer-renew-modal .renew-summary-card.rk-summary-card {
    grid-template-columns: 1fr !important;
  }
}
/* END ui-v1.6.507 unified mobile summary windows */

/* BEGIN ui-v1.6.508 billing menu unified table UI */
html[data-theme="radiusku-clean"] .billing-toolbar {
  margin-bottom: 8px !important;
}

html[data-theme="radiusku-clean"] .billing-toolbar-actions {
  justify-content: flex-start !important;
}

html[data-theme="radiusku-clean"] .billing-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html[data-theme="radiusku-clean"] .billing-toolbar-actions {
  flex: 0 1 auto !important;
  width: auto !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .billing-toolbar > .billing-report-actions-panel {
	width: fit-content !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

html[data-theme="radiusku-clean"] .billing-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

html[data-theme="radiusku-clean"] .billing-summary-grid .customer-summary-card {
  min-height: 62px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] .billing-summary-grid .customer-summary-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  font-size: 14px !important;
}

html[data-theme="radiusku-clean"] .billing-summary-grid :where(.customer-summary-title, .customer-summary-label) {
  font-size: 10.6px !important;
  line-height: 1.15 !important;
}

html[data-theme="radiusku-clean"] .billing-summary-grid .customer-summary-value {
  font-size: 16px !important;
  line-height: 1.1 !important;
}

html[data-theme="radiusku-clean"] .billing-table-head.rk-card-head {
  display: block !important;
  padding: 8px 10px !important;
}

html[data-theme="radiusku-clean"] .billing-table-control-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

html[data-theme="radiusku-clean"] .billing-table-control-row .entries-control {
  flex: 0 0 auto !important;
}

html[data-theme="radiusku-clean"] .billing-table-meta {
  flex: 1 1 220px !important;
  min-width: 180px !important;
}

html[data-theme="radiusku-clean"] .billing-search-form {
  flex: 0 1 320px !important;
  width: min(320px, 100%) !important;
  min-width: min(240px, 100%) !important;
  margin-left: auto !important;
}

html[data-theme="radiusku-clean"] .billing-list-pagination-top {
  margin-left: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

html[data-theme="radiusku-clean"] .billing-list-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] .billing-report-table {
  --rk-table-min-width: 1180px !important;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .billing-toolbar,
  html[data-theme="radiusku-clean"] .billing-toolbar > div,
  html[data-theme="radiusku-clean"] .billing-toolbar-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html[data-theme="radiusku-clean"] .billing-report-actions-panel {
    width: 100% !important;
    margin-left: 0 !important;
  }

  html[data-theme="radiusku-clean"] .billing-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html[data-theme="radiusku-clean"] .billing-summary-grid .customer-summary-card {
    min-height: 56px !important;
    padding: 8px !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html[data-theme="radiusku-clean"] .billing-summary-grid .customer-summary-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 12px !important;
  }

  html[data-theme="radiusku-clean"] .billing-table-control-row {
    align-items: stretch !important;
    gap: 6px !important;
  }

  html[data-theme="radiusku-clean"] .billing-table-control-row .entries-control,
  html[data-theme="radiusku-clean"] .billing-table-meta,
  html[data-theme="radiusku-clean"] .billing-search-form,
  html[data-theme="radiusku-clean"] .billing-list-pagination-top {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  html[data-theme="radiusku-clean"] .billing-list-pagination-top {
    justify-content: flex-start !important;
  }
}
/* END ui-v1.6.508 billing menu unified table UI */

/* BEGIN ui-v1.6.509 finance menu unified UI */
html[data-theme="radiusku-clean"] .finance-report-shell {
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-theme="radiusku-clean"] .finance-report-head {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

html[data-theme="radiusku-clean"] .finance-report-rule {
  display: none !important;
}

html[data-theme="radiusku-clean"] .finance-report-overview {
  display: grid !important;
  grid-template-columns: minmax(190px, .45fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] .finance-report-actions-panel {
  min-height: 0 !important;
  padding: 9px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] .finance-report-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

html[data-theme="radiusku-clean"] .finance-report-action-btn {
  min-height: 30px !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
}

html[data-theme="radiusku-clean"] .finance-report-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] .finance-report-kpis-topup {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-theme="radiusku-clean"] .finance-report-kpi {
  min-height: 62px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] .finance-report-card-head {
  display: block !important;
  padding: 8px 10px !important;
}

html[data-theme="radiusku-clean"] .finance-report-table-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

html[data-theme="radiusku-clean"] .finance-report-length {
  flex: 0 0 auto !important;
}

html[data-theme="radiusku-clean"] .finance-report-table-meta {
  flex: 1 1 220px !important;
  min-width: 180px !important;
}

html[data-theme="radiusku-clean"] .finance-report-search {
  flex: 0 1 320px !important;
  width: min(320px, 100%) !important;
  min-width: min(240px, 100%) !important;
  margin-left: auto !important;
}

html[data-theme="radiusku-clean"] .finance-report-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] .finance-inline-form {
  padding: 12px !important;
}

html[data-theme="radiusku-clean"] .finance-standalone-card {
  overflow: hidden !important;
}

html[data-theme="radiusku-clean"] .finance-standalone-card .table-head h3 {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

html[data-theme="radiusku-clean"] .finance-ledger-tabs {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  padding: 0 12px 10px !important;
}

html[data-theme="radiusku-clean"] .ledger-tab {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-soft) !important;
  background: var(--surface) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

html[data-theme="radiusku-clean"] .ledger-tab.is-active {
  border-color: rgba(37, 99, 235, .45) !important;
  background: var(--primary-faint) !important;
  color: var(--primary) !important;
}

html[data-theme="radiusku-clean"] .proof-actions {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

html[data-theme="radiusku-clean"] .proof-modal[hidden] {
  display: none !important;
}

html[data-theme="radiusku-clean"] .proof-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
}

html[data-theme="radiusku-clean"] .proof-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, .72) !important;
}

html[data-theme="radiusku-clean"] .proof-modal-dialog {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(980px, 96vw) !important;
  height: min(760px, 92vh) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .35) !important;
}

html[data-theme="radiusku-clean"] .proof-modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme="radiusku-clean"] .proof-modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

html[data-theme="radiusku-clean"] .proof-modal-body {
  flex: 1 !important;
  display: grid !important;
  place-items: center !important;
  overflow: auto !important;
  background: #0f172a !important;
}

html[data-theme="radiusku-clean"] .proof-modal-body img {
  max-width: none !important;
  max-height: none !important;
  transform-origin: center center !important;
  transition: transform .12s ease !important;
}

@media (max-width: 980px) {
  html[data-theme="radiusku-clean"] .finance-report-overview {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .finance-report-overview {
    padding: 8px !important;
    gap: 6px !important;
  }

  html[data-theme="radiusku-clean"] .finance-report-kpis,
  html[data-theme="radiusku-clean"] .finance-report-kpis-topup {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html[data-theme="radiusku-clean"] .finance-report-kpi {
    min-height: 56px !important;
    padding: 8px !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html[data-theme="radiusku-clean"] .finance-report-table-controls {
    align-items: stretch !important;
    gap: 6px !important;
  }

  html[data-theme="radiusku-clean"] .finance-report-length,
  html[data-theme="radiusku-clean"] .finance-report-table-meta,
  html[data-theme="radiusku-clean"] .finance-report-search{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  html[data-theme="radiusku-clean"] .proof-modal {
    padding: 8px !important;
  }

  html[data-theme="radiusku-clean"] .proof-modal-dialog {
    width: 100% !important;
    height: calc(100dvh - 16px) !important;
  }
}
/* END ui-v1.6.509 finance menu unified UI */

/* BEGIN ui-v1.6.510 finance search pagination parity */
html[data-theme="radiusku-clean"] .finance-report-card-head.rk-card-head {
  display: block !important;
  padding: 8px 10px !important;
}

html[data-theme="radiusku-clean"] .finance-report-table-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-theme="radiusku-clean"] .finance-page-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

html[data-theme="radiusku-clean"] .finance-report-search {
  flex: 0 1 320px !important;
  width: min(320px, 100%) !important;
  min-width: min(240px, 100%) !important;
  max-width: 320px !important;
  margin-left: auto !important;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .finance-report-table-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  html[data-theme="radiusku-clean"] .finance-report-length,
  html[data-theme="radiusku-clean"] .finance-report-table-meta,
  html[data-theme="radiusku-clean"] .finance-report-search{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  html[data-theme="radiusku-clean"] .finance-page-pagination {
    justify-content: flex-start !important;
  }
}
/* END ui-v1.6.510 finance search pagination parity */

/* BEGIN ui-v1.6.511 online payment table control parity */
html[data-theme="radiusku-clean"] .online-payment-head.rk-card-head {
  display: block !important;
  padding: 8px 10px !important;
}

html[data-theme="radiusku-clean"] .online-payment-table-control-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

html[data-theme="radiusku-clean"] .online-payment-length,
html[data-theme="radiusku-clean"] .online-payment-status-form {
  flex: 0 0 auto !important;
}

html[data-theme="radiusku-clean"] .online-payment-table-meta {
  flex: 1 1 220px !important;
  min-width: 180px !important;
}

html[data-theme="radiusku-clean"] .online-payment-search {
  flex: 0 1 320px !important;
  width: min(320px, 100%) !important;
  min-width: min(240px, 100%) !important;
  max-width: 320px !important;
  margin-left: auto !important;
}

html[data-theme="radiusku-clean"] .online-payment-page-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

html[data-theme="radiusku-clean"] .online-payment-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] .online-payment-status-form .entries-control {
  margin: 0 !important;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .online-payment-table-control-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  html[data-theme="radiusku-clean"] .online-payment-length,
  html[data-theme="radiusku-clean"] .online-payment-table-meta,
  html[data-theme="radiusku-clean"] .online-payment-search,
  html[data-theme="radiusku-clean"] .online-payment-status-form{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  html[data-theme="radiusku-clean"] .online-payment-page-pagination {
    justify-content: flex-start !important;
  }
}
/* END ui-v1.6.511 online payment table control parity */

/* BEGIN ui-v1.6.512 unified table search placement */
html[data-theme="radiusku-clean"] :where(.ppp-table-control-row, .rk-table-controls, .settings-user-table-control-row, .router-table-control-row, .topup-table-control-row) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

html[data-theme="radiusku-clean"] :where(.ppp-table-control-row, .rk-table-controls, .settings-user-table-control-row, .router-table-control-row, .topup-table-control-row) > .table-meta {
  flex: 1 1 220px !important;
  min-width: 180px !important;
}

html[data-theme="radiusku-clean"] :where(.ppp-table-control-row, .rk-table-controls, .settings-user-table-control-row, .router-table-control-row, .topup-table-control-row) > :where(.toolbar-search, .rk-toolbar-search, .toolbar-search-form, .customer-table-search, .package-table-search, .router-table-search, .voucher-table-search, .topup-table-search, .user-table-search) {
  flex: 0 1 320px !important;
  width: min(320px, 100%) !important;
  min-width: min(220px, 100%) !important;
  max-width: 320px !important;
  margin-left: 0 !important;
}

html[data-theme="radiusku-clean"] :where(.ppp-table-control-row, .rk-table-controls, .settings-user-table-control-row, .router-table-control-row, .topup-table-control-row) > :where(.table-pagination, .rk-table-pagination, .customer-list-pagination, .package-list-pagination, .router-list-pagination, .voucher-list-pagination, .user-list-pagination) {
  margin-left: 0 !important;
}

html[data-theme="radiusku-clean"] :where(.customer-list-toolbar, .package-profile-toolbar, .settings-user-toolbar) :where(.toolbar-actions, .rk-toolbar-actions),
html[data-theme="radiusku-clean"] .router-page-head :where(.toolbar-actions, .rk-toolbar-actions),
html[data-theme="radiusku-clean"] .voucher-page-head :where(.toolbar-actions, .rk-toolbar-actions) {
  justify-content: flex-start !important;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] :where(.ppp-table-control-row, .rk-table-controls, .settings-user-table-control-row, .router-table-control-row, .topup-table-control-row) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  html[data-theme="radiusku-clean"] :where(.ppp-table-control-row, .rk-table-controls, .settings-user-table-control-row, .router-table-control-row, .topup-table-control-row) > :where(.entries-control, .table-meta, .toolbar-search, .rk-toolbar-search, .toolbar-search-form, .table-pagination, .rk-table-pagination) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  html[data-theme="radiusku-clean"] :where(.ppp-table-control-row, .rk-table-controls, .settings-user-table-control-row, .router-table-control-row, .topup-table-control-row) > :where(.table-pagination, .rk-table-pagination) {
    justify-content: flex-start !important;
  }
}
/* END ui-v1.6.512 unified table search placement */

/* BEGIN ui-v1.6.514 searchable customer package dropdown */
html[data-theme="radiusku-clean"] .customer-package-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-theme="radiusku-clean"] .customer-package-search {
  position: relative !important;
  width: 100% !important;
  margin-top: 0 !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 12.8px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  cursor: pointer !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-trigger:focus {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent) !important;
  outline: 0 !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-trigger:disabled {
  cursor: not-allowed !important;
  color: var(--muted) !important;
  background: var(--surface-soft) !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-trigger-text {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-caret {
  flex: 0 0 auto !important;
  color: var(--muted) !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-panel {
  position: absolute !important;
  z-index: 80 !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 4px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .16) !important;
  padding: 5px !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-panel[hidden] {
  display: none !important;
}

html[data-theme="radiusku-clean"] .customer-package-search.is-up .customer-package-search-panel {
  top: auto !important;
  bottom: calc(100% + 4px) !important;
  flex-direction: column-reverse !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-input {
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 9px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-input:focus {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent) !important;
  outline: 0 !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-list {
  max-height: 172px !important;
  overflow-y: auto !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-option {
  display: block !important;
  width: 100% !important;
  min-height: 34px !important;
  padding: 8px 9px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 12.3px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-option:hover,
html[data-theme="radiusku-clean"] .customer-package-search-option.is-selected {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-soft)) !important;
  color: var(--primary-strong) !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-empty,
html[data-theme="radiusku-clean"] .customer-package-search-more {
  padding: 7px 9px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
/* END ui-v1.6.514 searchable customer package dropdown */

/* BEGIN ui-v1.6.516 form dropdown typography and field alignment */
html[data-theme="radiusku-clean"] :where(.customer-package-search-trigger, .customer-package-search-option, .customer-package-search-input) {
  font-weight: 400 !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-trigger {
  min-height: var(--field-h) !important;
  height: var(--field-h) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

html[data-theme="radiusku-clean"] .customer-package-search-input {
  min-height: var(--field-h) !important;
  height: var(--field-h) !important;
}

html[data-theme="radiusku-clean"] :where(.form-grid, .rk-form-grid, .settings-form-grid, .settings-bank-grid, .bank-account-grid, .customer-info-grid, .customer-filter-grid) {
  align-items: start !important;
}

html[data-theme="radiusku-clean"] :where(.form-grid, .rk-form-grid, .settings-form-grid, .settings-bank-grid, .bank-account-grid, .customer-info-grid, .customer-filter-grid) > :where(.field, .customer-filter-field, .settings-form-section) {
  align-self: start !important;
  grid-auto-rows: max-content !important;
}

html[data-theme="radiusku-clean"] :where(.form-grid, .rk-form-grid, .settings-form-grid, .settings-bank-grid, .bank-account-grid, .customer-info-grid, .customer-filter-grid) > :where(.field, .customer-filter-field, .settings-form-section) > label:first-child {
  min-height: 28px !important;
  align-content: end !important;
  line-height: 1.25 !important;
}

html[data-theme="radiusku-clean"] :where(.field, .customer-filter-field, .settings-form-section) > :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, .customer-package-search, .input-control, .form-control):not([hidden]) {
  align-self: stretch !important;
}

html[data-theme="radiusku-clean"] :where(.field, .customer-filter-field, .settings-form-section) > :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, .input-control, .form-control):not([hidden]) {
  min-height: var(--field-h) !important;
  height: var(--field-h) !important;
}

html[data-theme="radiusku-clean"] :where(.field, .customer-filter-field, .settings-form-section) > textarea:not([hidden]) {
  min-height: 76px !important;
}
/* END ui-v1.6.516 form dropdown typography and field alignment */

/* BEGIN ui-v1.6.517 force normal searchable dropdown text */
html[data-theme="radiusku-clean"] .customer-package-search,
html[data-theme="radiusku-clean"] .customer-package-search *,
html[data-theme="radiusku-clean"] .customer-package-search :where(button, input, span, div) {
  font-weight: normal !important;
}

html[data-theme="radiusku-clean"] .customer-package-search :where(.customer-package-search-trigger, .customer-package-search-trigger-text, .customer-package-search-option, .customer-package-search-option.is-selected, .customer-package-search-input, .customer-package-search-empty, .customer-package-search-more) {
  font-weight: normal !important;
}
/* END ui-v1.6.517 force normal searchable dropdown text */

/* BEGIN ui-v1.6.519 unified page vertical rhythm */
html[data-theme="radiusku-clean"] {
  --rk-page-window-gap: 10px;
}

html[data-theme="radiusku-clean"] .page-body {
  gap: var(--rk-page-window-gap) !important;
  row-gap: var(--rk-page-window-gap) !important;
}

html[data-theme="radiusku-clean"] .page-body > :where(
  section,
  article,
  div,
  form,
  .toolbar,
  .rk-toolbar,
  .card,
  .rk-card,
  .table-card,
  .rk-summary-grid,
  .customer-summary-grid,
  .customer-report-kpis,
  .billing-summary-grid,
  .topup-summary-grid,
  .finance-summary-grid,
  .finance-report-kpis,
  .online-payment-summary-grid,
  .router-summary-grid,
  .dash-overview-grid,
  .dashboard-main-grid,
  .mini-strip-grid,
  .kpi-grid,
  .customer-filter-panel,
  .rk-filter-panel
) {
  margin-block: 0 !important;
}

html[data-theme="radiusku-clean"] .page-body > :where(.toolbar, .rk-toolbar) + :where(.rk-summary-grid, .customer-summary-grid, .customer-report-kpis, .billing-summary-grid, .topup-summary-grid, .finance-summary-grid, .finance-report-kpis, .online-payment-summary-grid, .router-summary-grid, .dash-overview-grid, .mini-strip-grid, .kpi-grid),
html[data-theme="radiusku-clean"] .page-body > :where(.rk-summary-grid, .customer-summary-grid, .customer-report-kpis, .billing-summary-grid, .topup-summary-grid, .finance-summary-grid, .finance-report-kpis, .online-payment-summary-grid, .router-summary-grid, .dash-overview-grid, .dashboard-main-grid, .mini-strip-grid, .kpi-grid) + :where(.card, .rk-card, .table-card),
html[data-theme="radiusku-clean"] .page-body > :where(.card, .rk-card, .table-card) + :where(.card, .rk-card, .table-card, .toolbar, .rk-toolbar, .rk-summary-grid, .customer-summary-grid, .customer-report-kpis, .billing-summary-grid, .topup-summary-grid, .finance-summary-grid, .finance-report-kpis, .online-payment-summary-grid, .router-summary-grid, .kpi-grid) {
  margin-top: 0 !important;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] {
    --rk-page-window-gap: 8px;
  }

  html[data-theme="radiusku-clean"] .page-body {
    gap: var(--rk-page-window-gap) !important;
    row-gap: var(--rk-page-window-gap) !important;
  }
}
/* END ui-v1.6.519 unified page vertical rhythm */

/* BEGIN ui-v1.6.520 typography convergence for legacy-special surfaces */
html[data-theme="radiusku-clean"] :where(
  .billing-filter-modal,
  .package-modal-card,
  .customer-renew-modal-card,
  .user-balance-modal-card,
  .user-summary-modal-card,
  .app-log-message-modal-card,
  .ppp-info-popover,
  .voucher-hotspot-form,
  .voucher-status-pill,
  .session-page-head,
  .session-kpi-grid,
  .router-report-kpi,
  .online-payment-status,
  .customer-package-search
) {
  font-family: var(--rk-font-ui) !important;
  font-size: var(--rk-type-base) !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: var(--rk-leading-body) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(
  .billing-filter-modal .card-title,
  .package-modal-card .card-title,
  .customer-renew-modal-card .card-title,
  .user-balance-modal-card .card-title,
  .user-summary-modal-card .card-title,
  .app-log-message-modal-card .card-title,
  .ppp-info-title,
  .session-page-head .card-title,
  .router-report-kpi strong
) {
  font-size: var(--rk-type-title) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(
  .billing-filter-modal .card-subtitle,
  .billing-filter-modal :is(.billing-filter-note, .billing-filter-subnote),
  .package-modal-card .card-subtitle,
  .package-modal-card :is(.help, .muted, small),
  .customer-renew-modal-card .renew-note,
  .app-log-message-modal-card .muted,
  .session-head-note,
  .ppp-info-list dt,
  .ppp-info-service-meta,
  .ppp-info-service-note
) {
  font-size: var(--rk-type-sm) !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: var(--rk-leading-ui) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(
  .billing-filter-modal .field label,
  .package-modal-card .field label,
  .customer-renew-modal-card .field label,
  .customer-renew-modal-card .renew-detail-label,
  .customer-renew-modal-card .renew-detail-value,
  .ppp-info-list dd,
  .ppp-info-service-name,
  .ppp-info-service-amount,
  .session-table td .data-main,
  .voucher-hotspot-form .field label
) {
  font-size: var(--rk-type-base) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: var(--rk-leading-ui) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(
  .billing-filter-modal :is(input, select, textarea),
  .package-modal-card :is(input, select, textarea),
  .customer-renew-modal-card :is(input, select, textarea),
  .user-balance-modal-card :is(input, select, textarea),
  .user-summary-modal-card :is(input, select, textarea),
  .customer-package-search-trigger,
  .customer-package-search-input,
  .customer-package-search-option
) {
  font-size: var(--rk-type-control) !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: var(--rk-leading-ui) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(
  .voucher-status-pill,
  .online-payment-status,
  .required-mark,
  .field > label:has(.required-mark)::after,
  .field:has(:is(input, select, textarea)[required]) > label:not(:has(.required-mark))::after
) {
  font-size: var(--rk-type-xs) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}
/* END ui-v1.6.520 typography convergence for legacy-special surfaces */

/* BEGIN ui-v1.6.521 centered table action icons */
html[data-theme="radiusku-clean"] :where(.table-action-icon-btn, .table-rp-icon-btn) {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn .table-action-icon-glyph, .table-rp-icon-btn > span[aria-hidden="true"]) {
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  display: inline-grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: currentColor !important;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn .table-action-icon-glyph, .table-rp-icon-btn > span[aria-hidden="true"])::before {
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  background: currentColor !important;
  -webkit-mask: var(--rk-action-icon) center / contain no-repeat !important;
  mask: var(--rk-action-icon) center / contain no-repeat !important;
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn.is-edit, .table-rp-icon-btn.is-edit) {
  --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn.is-delete, .table-rp-icon-btn.is-delete) {
  --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E");
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn.is-view, .table-rp-icon-btn.is-view) {
  --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7Z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9.5 13h5'/%3E%3Cpath d='M9.5 17h4'/%3E%3C/svg%3E");
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn.is-print, .table-rp-icon-btn.is-print) {
  --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v7H6Z'/%3E%3C/svg%3E");
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn.is-download, .table-rp-icon-btn.is-download, .is-download.table-action-icon-btn) {
  --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn.is-renew, .table-rp-icon-btn.is-renew) {
  --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.2 6.5'/%3E%3Cpath d='M3 12A9 9 0 0 1 18.2 5.5'/%3E%3Cpath d='M18 2v4h4'/%3E%3Cpath d='M6 22v-4H2'/%3E%3C/svg%3E");
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn.is-test, .table-rp-icon-btn.is-test) {
  --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-13.5-5.8'/%3E%3Cpath d='M4 5v5h5'/%3E%3Cpath d='M4 13a8 8 0 0 0 13.5 5.8'/%3E%3Cpath d='M20 19v-5h-5'/%3E%3C/svg%3E");
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn.is-lock, .table-rp-icon-btn.is-lock) {
  --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn:not(.is-edit):not(.is-delete):not(.is-view):not(.is-print):not(.is-download):not(.is-renew):not(.is-test):not(.is-lock), .table-rp-icon-btn:not(.is-edit):not(.is-delete):not(.is-view):not(.is-print):not(.is-download):not(.is-renew):not(.is-test):not(.is-lock)) {
  --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

html[data-theme="radiusku-clean"] :where(.table-action-icon-btn, .table-rp-icon-btn) :where(.table-action-label) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
/* END ui-v1.6.521 centered table action icons */

/* BEGIN ui-v1.6.524 strict unified table typography */
html[data-theme="radiusku-clean"] {
  --rk-table-view-font: var(--rk-font-ui);
  --rk-table-view-head-size: 10.5px;
  --rk-table-view-body-size: 11.4px;
  --rk-table-view-name-size: 11.6px;
  --rk-table-view-sub-size: 10.4px;
  --rk-table-view-badge-size: 9.8px;
  --rk-table-view-head-weight: var(--rk-weight-semibold);
  --rk-table-view-body-weight: var(--rk-weight-regular);
  --rk-table-view-name-weight: var(--rk-weight-semibold);
  --rk-table-view-sub-weight: var(--rk-weight-regular);
  --rk-table-view-badge-weight: var(--rk-weight-semibold);
  --rk-table-view-leading: 1.28;
  --rk-table-view-tight-leading: 1.16;
}

html[data-theme="radiusku-clean"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .hotspot-profile-fit-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap
) :where(table, .rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) {
  font-family: var(--rk-table-view-font) !important;
  font-size: var(--rk-table-view-body-size) !important;
  font-weight: var(--rk-table-view-body-weight) !important;
  line-height: var(--rk-table-view-leading) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .hotspot-profile-fit-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap
) :where(th, thead th, .rk-th-content, .rk-th-label, .customer-sort-link) {
  font-family: var(--rk-table-view-font) !important;
  font-size: var(--rk-table-view-head-size) !important;
  font-weight: var(--rk-table-view-head-weight) !important;
  line-height: var(--rk-table-view-tight-leading) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html[data-theme="radiusku-clean"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .hotspot-profile-fit-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap
) :where(td, tbody td, td:not(.rk-date-cell), .compact-link, .service-type-label, .billing-owner-col, .ppp-owner-col, .customer-id-text) {
  font-family: var(--rk-table-view-font) !important;
  font-size: var(--rk-table-view-body-size) !important;
  font-weight: var(--rk-table-view-body-weight) !important;
  line-height: var(--rk-table-view-leading) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .hotspot-profile-fit-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap
) :where(.data-main, .compact-main, .invoice-number, .router-name, .profile-name, .package-name, .finance-row-title) {
  font-family: var(--rk-table-view-font) !important;
  font-size: var(--rk-table-view-body-size) !important;
  font-weight: var(--rk-table-view-body-weight) !important;
  line-height: var(--rk-table-view-leading) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(
  td.ppp-name-col,
  td.session-col-name,
  td.settings-user-name-col,
  td.ppp-prof-name-cell,
  .ppp-info-cell,
  .finance-info-cell,
  .user-cell,
  .online-customer-name,
  .finance-report-customer-name,
  .ppp-name-text,
  .ppp-name-only,
  .settings-user-name-text
) :where(.data-main, .compact-main, .ppp-name-text, .ppp-name-only),
html[data-theme="radiusku-clean"] :where(
  td.ppp-name-col .data-main,
  td.session-col-name .data-main,
  td.settings-user-name-col .data-main,
  td.ppp-prof-name-cell .data-main,
  .finance-report-customer-name,
  .online-customer-name,
  .user-cell .data-main,
  .ppp-name-text
) {
  font-family: var(--rk-table-view-font) !important;
  font-size: var(--rk-table-view-name-size) !important;
  font-weight: var(--rk-table-view-name-weight) !important;
  line-height: var(--rk-table-view-leading) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .hotspot-profile-fit-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap
) :where(.data-sub, .compact-sub, .muted, .small, .service-note, .dropdown-meta, .settings-balance-status) {
  font-family: var(--rk-table-view-font) !important;
  font-size: var(--rk-table-view-sub-size) !important;
  font-weight: var(--rk-table-view-sub-weight) !important;
  line-height: var(--rk-table-view-leading) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(
  td.rk-date-cell,
  .rk-date-cell,
  .rk-date-stack,
  .rk-date-line,
  .rk-time-line
) {
  font-family: var(--rk-table-view-font) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(.rk-date-cell, td.rk-date-cell) {
  font-size: var(--rk-table-view-body-size) !important;
  font-weight: var(--rk-table-view-body-weight) !important;
  line-height: var(--rk-table-view-tight-leading) !important;
}

html[data-theme="radiusku-clean"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .hotspot-profile-fit-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap
) :where(.badge, .badge-mini, .status-badge, .status-pill, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge, .voucher-status-pill, .online-payment-status) {
  font-family: var(--rk-table-view-font) !important;
  font-size: var(--rk-table-view-badge-size) !important;
  font-weight: var(--rk-table-view-badge-weight) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html[data-theme="radiusku-clean"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .hotspot-profile-fit-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap
) :where(.table-action-label, .table-action-icon-btn, .table-rp-icon-btn, .btn-mini, .btn-xs, .mini-action) {
  font-family: var(--rk-table-view-font) !important;
  font-size: var(--rk-table-view-sub-size) !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] {
    --rk-table-view-head-size: 10.2px;
    --rk-table-view-body-size: 11.2px;
    --rk-table-view-name-size: 11.4px;
    --rk-table-view-sub-size: 10.2px;
    --rk-table-view-badge-size: 9.6px;
  }
}
/* END ui-v1.6.524 strict unified table typography */

/* BEGIN ui-v1.6.525 customer package column normal weight */
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table td.ppp-package-col :where(.customer-package-stack, .data-main, .compact-main, .data-sub, .compact-sub),
html[data-theme="radiusku-clean"] .customer-report-table td.ppp-package-col :where(.customer-package-stack, .data-main, .compact-main, .data-sub, .compact-sub) {
  font-family: var(--rk-table-view-font) !important;
  font-weight: var(--rk-table-view-body-weight) !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table td.ppp-package-col :where(.data-main, .compact-main),
html[data-theme="radiusku-clean"] .customer-report-table td.ppp-package-col :where(.data-main, .compact-main) {
  font-size: var(--rk-table-view-body-size) !important;
  line-height: var(--rk-table-view-leading) !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table td.ppp-package-col :where(.data-sub, .compact-sub),
html[data-theme="radiusku-clean"] .customer-report-table td.ppp-package-col :where(.data-sub, .compact-sub) {
  font-size: var(--rk-table-view-sub-size) !important;
  line-height: var(--rk-table-view-leading) !important;
}
/* END ui-v1.6.525 customer package column normal weight */

/* BEGIN ui-v1.6.526 force customer package text normal */
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table td.ppp-package-col .customer-package-stack > .data-main.compact-main,
html[data-theme="radiusku-clean"] .customer-report-table td.ppp-package-col .customer-package-stack > .data-main.compact-main,
html[data-theme="radiusku-clean"] .ppp-compact-table td.ppp-package-col .customer-package-stack > .data-main.compact-main {
  font-weight: var(--rk-table-view-body-weight) !important;
  font-size: var(--rk-table-view-body-size) !important;
  line-height: var(--rk-table-view-leading) !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table td.ppp-package-col .customer-package-stack > .data-sub.compact-sub,
html[data-theme="radiusku-clean"] .customer-report-table td.ppp-package-col .customer-package-stack > .data-sub.compact-sub,
html[data-theme="radiusku-clean"] .ppp-compact-table td.ppp-package-col .customer-package-stack > .data-sub.compact-sub {
  font-weight: var(--rk-table-view-sub-weight) !important;
  font-size: var(--rk-table-view-sub-size) !important;
  line-height: var(--rk-table-view-leading) !important;
}
/* END ui-v1.6.526 force customer package text normal */

/* BEGIN ui-v1.6.527 customer pagination border parity */
html[data-theme="radiusku-clean"] nav.customer-list-pagination,
html[data-theme="radiusku-clean"] nav.rk-table-pagination.customer-list-pagination,
html[data-theme="radiusku-clean"] .customer-list-card nav.customer-list-pagination,
html[data-theme="radiusku-clean"] .customer-list-card nav.customer-list-pagination.customer-list-pagination-top {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] nav.customer-list-pagination.customer-list-pagination-top {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
/* END ui-v1.6.527 customer pagination border parity */

/* BEGIN ui-v1.6.528 compact customer info popover */
html[data-theme="radiusku-clean"] .ppp-info-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  font-size: 11px !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1 !important;
}

html[data-theme="radiusku-clean"] .ppp-info-popover {
  width: min(330px, calc(100vw - 18px)) !important;
  max-width: min(330px, calc(100vw - 18px)) !important;
  border-radius: 10px !important;
  font-family: var(--rk-font-ui) !important;
  font-size: 11.5px !important;
  line-height: 1.28 !important;
}

html[data-theme="radiusku-clean"] .ppp-info-card {
  border-radius: 10px !important;
  overflow: hidden !important;
}

html[data-theme="radiusku-clean"] .ppp-info-title {
  padding: 8px 10px !important;
  font-size: 12.4px !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] .ppp-info-list {
  padding: 5px 10px !important;
  gap: 0 !important;
}

html[data-theme="radiusku-clean"] .ppp-info-list > div {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 4px 0 !important;
}

html[data-theme="radiusku-clean"] .ppp-info-list :where(dt, dd) {
  font-family: var(--rk-font-ui) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] .ppp-info-list dt {
  font-size: 10.5px !important;
  font-weight: var(--rk-weight-medium) !important;
  color: var(--muted) !important;
}

html[data-theme="radiusku-clean"] .ppp-info-list dd {
  font-size: 11.4px !important;
  font-weight: var(--rk-weight-regular) !important;
  color: var(--text) !important;
}

html[data-theme="radiusku-clean"] .ppp-info-services {
  padding: 7px 10px 9px !important;
}

html[data-theme="radiusku-clean"] .ppp-info-services-title {
  margin: 0 0 5px !important;
  font-size: 11.3px !important;
  font-weight: var(--rk-weight-semibold) !important;
  line-height: 1.2 !important;
}

html[data-theme="radiusku-clean"] .ppp-info-service-list {
  gap: 5px !important;
}

html[data-theme="radiusku-clean"] .ppp-info-service-item {
  gap: 6px !important;
  padding: 6px 7px !important;
  border-radius: 8px !important;
}

html[data-theme="radiusku-clean"] .ppp-info-service-main {
  gap: 4px !important;
}

html[data-theme="radiusku-clean"] .ppp-info-service-name,
html[data-theme="radiusku-clean"] .ppp-info-service-amount {
  font-size: 11.3px !important;
  font-weight: var(--rk-weight-medium) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] .ppp-info-service-mode,
html[data-theme="radiusku-clean"] .ppp-info-service-bill-badge {
  min-height: 16px !important;
  padding: 2px 5px !important;
  font-size: 9.6px !important;
  font-weight: var(--rk-weight-medium) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

html[data-theme="radiusku-clean"] :where(.ppp-info-service-empty, .ppp-info-loading, .ppp-info-error) {
  padding: 7px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: var(--rk-weight-regular) !important;
  line-height: 1.28 !important;
}

@media (max-width: 640px) {
  html[data-theme="radiusku-clean"] .ppp-info-popover {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    border-radius: 10px !important;
  }

  html[data-theme="radiusku-clean"] .ppp-info-title {
    padding: 8px 10px !important;
    font-size: 12.2px !important;
  }

  html[data-theme="radiusku-clean"] .ppp-info-list {
    padding: 5px 10px !important;
  }

  html[data-theme="radiusku-clean"] .ppp-info-list > div {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 4px 0 !important;
  }
}
/* END ui-v1.6.528 compact customer info popover */

/* BEGIN ui-v1.6.529 mobile scroll chain fix */
@media (max-width: 860px) {
  html[data-theme="radiusku-clean"],
  body[data-theme="radiusku-clean"],
  body[data-shell="app"][data-theme="radiusku-clean"] {
    min-height: 100%;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-theme="radiusku-clean"] .app-shell,
  html[data-theme="radiusku-clean"] .workspace,
  body[data-theme="radiusku-clean"] .workspace {
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
  }

  html[data-theme="radiusku-clean"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .hotspot-profile-fit-wrap,
    .tool-import-preview-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap
  ) {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }
}
/* END ui-v1.6.529 mobile scroll chain fix */

/* BEGIN ui-v1.6.530 sidebar dropdown isolation */
body.sidebar-mobile-open :where(
  .dropdown-menu.is-open,
  .action-dropdown-menu.is-open,
  .rk-dropdown-menu.is-open,
  details.action-dropdown[open] > .action-dropdown-menu,
  details.action-dropdown[open] > .rk-dropdown-menu
) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 860px) {
  body.sidebar-mobile-open :where(.dropdown-menu, .action-dropdown-menu, .rk-dropdown-menu) {
    z-index: 1 !important;
  }
}
/* END ui-v1.6.530 sidebar dropdown isolation */

/* BEGIN ui-v1.6.531 mobile sidebar layer priority */
@media (max-width: 860px) {
  body.sidebar-mobile-open .sidebar-overlay {
    z-index: 11990 !important;
  }

  body.sidebar-mobile-open .sidebar {
    z-index: 12000 !important;
  }

  body.sidebar-mobile-open :where(
    .toolbar,
    .rk-toolbar,
    .router-page-head,
    .voucher-page-head,
    .session-page-head,
    .system-hero,
    .table-card,
    .rk-card,
    .card
  ) {
    z-index: 1 !important;
  }
}
/* END ui-v1.6.531 mobile sidebar layer priority */

/* BEGIN ui-v1.6.532 compact voucher mobile row actions */
html[data-theme="radiusku-clean"] .voucher-compact-table td:has(.voucher-row-actions),
html[data-theme="radiusku-clean"] .voucher-report-table td:has(.voucher-row-actions) {
  width: 1% !important;
  min-width: 66px !important;
  max-width: 72px !important;
  white-space: nowrap !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

html[data-theme="radiusku-clean"] .voucher-row-actions {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  min-width: max-content !important;
  max-width: max-content !important;
}

html[data-theme="radiusku-clean"] .voucher-row-actions form {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html[data-theme="radiusku-clean"] .voucher-row-actions .table-action-icon-btn {
  flex: 0 0 27px !important;
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
  padding: 0 !important;
}

@media (max-width: 720px) {
  html[data-theme="radiusku-clean"] .voucher-row-actions {
    flex-direction: row !important;
    align-items: center !important;
  }

  html[data-theme="radiusku-clean"] .voucher-row-actions :where(.btn, .table-action-icon-btn) {
    width: 27px !important;
    min-width: 27px !important;
  }
}
/* END ui-v1.6.532 compact voucher mobile row actions */

/* BEGIN ui-v1.6.533 mobile sidebar scroll lock */
@media (max-width: 860px) {
  html.sidebar-scroll-locked,
  html.sidebar-scroll-locked body,
  body.sidebar-mobile-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.sidebar-mobile-open .sidebar {
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  body.sidebar-mobile-open .sidebar-nav {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
}
/* END ui-v1.6.533 mobile sidebar scroll lock */

/* BEGIN ui-v1.6.542 mobile native due datetime fit */
html[data-theme="radiusku-clean"] input[data-due-datetime][type="datetime-local"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  html[data-theme="radiusku-clean"] .field:has(input[data-due-datetime][type="datetime-local"]) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html[data-theme="radiusku-clean"] input[data-due-datetime][type="datetime-local"] {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-size: 13px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center !important;
  }
}
/* END ui-v1.6.542 mobile native due datetime fit */

/* BEGIN ui-v1.6.544 settings voucher template create modal */
html[data-theme="radiusku-clean"] .settings-template-voucher-create-card {
  width: min(1120px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-create-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 18px !important;
  overflow: auto !important;
}

html[data-theme="radiusku-clean"] .voucher-template-note {
  border-top: 1px solid var(--border) !important;
  padding-top: 14px !important;
  color: var(--text) !important;
}

html[data-theme="radiusku-clean"] .voucher-template-note-main {
  color: #008000 !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

html[data-theme="radiusku-clean"] .voucher-template-note-warn {
  color: #ef0000 !important;
  font-style: italic !important;
  line-height: 1.35 !important;
}

html[data-theme="radiusku-clean"] .voucher-template-note ul {
  margin: 14px 0 0 28px !important;
  padding: 0 !important;
}

html[data-theme="radiusku-clean"] .voucher-template-note a {
  color: #1d76bd !important;
  text-decoration: none !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-code-field {
  gap: 8px !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-code-field > label a,
html[data-theme="radiusku-clean"] .settings-template-voucher-code-field > label button {
  color: #1d76bd !important;
  font-weight: inherit !important;
  text-decoration: none !important;
}

html[data-theme="radiusku-clean"] .voucher-template-code-editor {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  min-height: 430px !important;
  border: 1px solid #1f251d !important;
  background: #20251d !important;
  overflow: hidden !important;
}

html[data-theme="radiusku-clean"] .voucher-template-code-editor pre,
html[data-theme="radiusku-clean"] .voucher-template-code-editor textarea {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #20251d !important;
  color: #f8f8f2 !important;
  font-family: var(--rk-font-ui) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

html[data-theme="radiusku-clean"] .voucher-template-code-editor pre {
  padding: 8px 8px 8px 0 !important;
  text-align: right !important;
  color: #d6e8f2 !important;
  user-select: none !important;
}

html[data-theme="radiusku-clean"] .voucher-template-code-editor textarea {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 430px !important;
  padding: 8px 12px !important;
  resize: vertical !important;
  outline: none !important;
  box-shadow: none !important;
  white-space: pre !important;
  overflow: auto !important;
}

html[data-theme="radiusku-clean"] .voucher-template-code-help {
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}

html[data-theme="radiusku-clean"] .voucher-template-code-help div:last-child {
  color: #ef4444 !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  html[data-theme="radiusku-clean"] .settings-template-voucher-create-card {
    width: 100% !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 14px !important;
  }

  html[data-theme="radiusku-clean"] .settings-template-voucher-create-form {
    padding: 12px !important;
    gap: 12px !important;
  }

  html[data-theme="radiusku-clean"] .voucher-template-code-editor {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    min-height: 360px !important;
  }

  html[data-theme="radiusku-clean"] .voucher-template-code-editor pre,
  html[data-theme="radiusku-clean"] .voucher-template-code-editor textarea {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  html[data-theme="radiusku-clean"] .voucher-template-code-editor textarea {
    min-height: 360px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* END ui-v1.6.544 settings voucher template create modal */

/* BEGIN ui-v1.6.545 settings voucher template variable modal */
html[data-theme="radiusku-clean"] .settings-template-voucher-variable-link {
  display: inline !important;
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #1d76bd !important;
  font: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  cursor: pointer !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-link:hover {
  text-decoration: underline !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-modal {
  z-index: 13000 !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-modal .rk-modal-backdrop {
  background: rgba(15, 23, 42, .62) !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-card {
  width: min(460px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-card .rk-modal-head {
  min-height: 58px !important;
  padding: 14px 18px !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-card .card-title {
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-body {
  padding: 16px 18px 22px !important;
  overflow: auto !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-table tr {
  border-top: 1px solid #d8d8d8 !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-table tr:nth-child(even) {
  background: #ececec !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-table td {
  padding: 10px 8px !important;
  color: #444 !important;
  vertical-align: middle !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-table td:first-child {
  width: 48% !important;
}

html[data-theme="radiusku-clean"] .settings-template-voucher-variable-table code {
  color: #333 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  html[data-theme="radiusku-clean"] .settings-template-voucher-variable-card {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  html[data-theme="radiusku-clean"] .settings-template-voucher-variable-card .rk-modal-head {
    padding: 12px 14px !important;
  }

  html[data-theme="radiusku-clean"] .settings-template-voucher-variable-card .card-title {
    font-size: 18px !important;
  }

  html[data-theme="radiusku-clean"] .settings-template-voucher-variable-body {
    padding: 12px 14px 16px !important;
  }

  html[data-theme="radiusku-clean"] .settings-template-voucher-variable-table {
    font-size: 12.5px !important;
  }

  html[data-theme="radiusku-clean"] .settings-template-voucher-variable-table td {
    padding: 9px 6px !important;
  }
}
/* END ui-v1.6.545 settings voucher template variable modal */

/* BEGIN ui-v1.6.554 voucher print primary action */
.voucher-print-submit-btn,
html[data-theme="radiusku-clean"] .voucher-print-submit-btn,
body[data-theme="radiusku-clean"] .voucher-print-submit-btn{
  --btn-bg:#059669!important;
  --btn-color:#fff!important;
  --btn-border:#047857!important;
  min-width:190px!important;
  font-weight:850!important;
  color:#fff!important;
  background:#059669!important;
  border-color:#047857!important;
  box-shadow:0 10px 22px color-mix(in srgb,#059669 26%,transparent)!important;
}
.voucher-print-submit-btn:is(:hover,:focus-visible),
html[data-theme="radiusku-clean"] .voucher-print-submit-btn:is(:hover,:focus-visible),
body[data-theme="radiusku-clean"] .voucher-print-submit-btn:is(:hover,:focus-visible){
  --btn-bg:#047857!important;
  --btn-color:#fff!important;
  color:#fff!important;
  background:#047857!important;
  border-color:#065f46!important;
  box-shadow:0 14px 28px color-mix(in srgb,#059669 34%,transparent)!important;
}
@media(max-width:640px){
  .voucher-print-submit-btn{min-width:0!important;width:100%!important;}
}
/* END ui-v1.6.554 voucher print primary action */

/* BEGIN ui-v1.6.563 voucher toolbar below topbar */
.voucher-page-head.rk-card,
html[data-theme="radiusku-clean"] .voucher-page-head.rk-card {
  z-index: 10 !important;
}

.voucher-page-head .action-dropdown,
html[data-theme="radiusku-clean"] .voucher-page-head .action-dropdown {
  z-index: 12 !important;
}

.voucher-page-head .action-dropdown[open],
html[data-theme="radiusku-clean"] .voucher-page-head .action-dropdown[open] {
  z-index: 20 !important;
}

.voucher-page-head .action-dropdown-menu,
.voucher-page-head .rk-dropdown-menu,
html[data-theme="radiusku-clean"] .voucher-page-head .action-dropdown-menu,
html[data-theme="radiusku-clean"] .voucher-page-head .rk-dropdown-menu {
  z-index: 25 !important;
}

.topbar,
html[data-theme="radiusku-clean"] .topbar,
body[data-theme="radiusku-clean"] .topbar {
  z-index: var(--z-topbar, 30) !important;
}
/* END ui-v1.6.563 voucher toolbar below topbar */

/* BEGIN ui-v1.6.564 large table performance mode */
html.rk-has-large-table {
  scroll-behavior: auto !important;
}

html[data-theme="radiusku-clean"] :where(.rk-large-table-wrap, .rk-virtual-scroll-host) {
  contain: layout paint style !important;
  content-visibility: auto !important;
  scrollbar-gutter: stable both-edges !important;
  transform: translateZ(0) !important;
  will-change: scroll-position !important;
}

html[data-theme="radiusku-clean"] :where(.rk-large-table, .rk-virtual-table),
html[data-theme="radiusku-clean"] :where(.rk-large-table, .rk-virtual-table) *,
html[data-theme="radiusku-clean"] :where(.rk-large-table, .rk-virtual-table) *::before,
html[data-theme="radiusku-clean"] :where(.rk-large-table, .rk-virtual-table) *::after {
  transition: none !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] :where(.rk-large-table, .rk-virtual-table) tbody tr:hover,
html[data-theme="radiusku-clean"] :where(.rk-large-table, .rk-virtual-table) :where(td, th):hover {
  transform: none !important;
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] :where(.rk-large-table, .rk-virtual-table) :where(.btn, .icon-btn, .rk-action-btn, .mini-action, .table-action-icon-btn):hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] :where(.rk-large-table, .rk-virtual-table) thead th {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="radiusku-clean"] :where(.rk-large-table, .rk-virtual-table) :where(.badge, .badge-mini, .status-badge, .status-pill, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge, .voucher-status-pill, .online-payment-status) {
  box-shadow: none !important;
  filter: none !important;
}
/* END ui-v1.6.564 large table performance mode */

/* BEGIN ui-v1.6.565 global loading overlay */
.rk-loading-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 14000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(15, 23, 42, .34) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .14s ease, visibility .14s ease !important;
}

.rk-loading-overlay.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.rk-loading-card {
  width: min(300px, calc(100vw - 36px)) !important;
  min-height: 154px !important;
  display: grid !important;
  place-items: center !important;
  gap: 10px !important;
  padding: 22px 20px !important;
  border: 1px solid rgba(148, 163, 184, .32) !important;
  border-radius: 18px !important;
  background: var(--surface, #fff) !important;
  color: var(--text, #111827) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .32) !important;
  text-align: center !important;
}

.rk-loading-spinner {
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  border: 4px solid rgba(37, 99, 235, .16) !important;
  border-top-color: var(--primary, #2563eb) !important;
  border-right-color: color-mix(in srgb, var(--primary, #2563eb) 72%, transparent) !important;
  animation: rk-loading-spin .78s linear infinite !important;
}

.rk-loading-title {
  font-family: var(--rk-font-ui, system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.rk-loading-message {
  max-width: 240px !important;
  font-family: var(--rk-font-ui, system-ui, sans-serif) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: var(--muted, #64748b) !important;
}

html.rk-loading-active {
  cursor: progress !important;
}

button.is-loading {
  cursor: progress !important;
}

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

@media (prefers-reduced-motion: reduce) {
  .rk-loading-spinner {
    animation-duration: 1.4s !important;
  }
}
/* END ui-v1.6.565 global loading overlay */

/* BEGIN ui-v1.6.579 expense page table parity */
html[data-theme="radiusku-clean"] .finance-expense-actions-panel {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
}

html[data-theme="radiusku-clean"] .finance-expense-management-dropdown {
  width: max-content !important;
  max-width: 100% !important;
}

html[data-theme="radiusku-clean"] .finance-expense-management-dropdown .action-dropdown-trigger {
  min-height: 30px !important;
  height: 30px !important;
  padding: 5px 9px !important;
  border-radius: 8px !important;
  font-size: var(--rk-type-control) !important;
  font-weight: var(--rk-weight-semibold) !important;
}

html[data-theme="radiusku-clean"] .finance-expense-management-dropdown .action-dropdown-menu {
  min-width: 210px !important;
}

html[data-theme="radiusku-clean"] .finance-expense-table {
  table-layout: fixed !important;
  min-width: 760px !important;
}

html[data-theme="radiusku-clean"] .finance-expense-table :where(th, td) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme="radiusku-clean"] .finance-expense-table :where(.data-main, .compact-main, .data-sub, .compact-sub) {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

html[data-theme="radiusku-clean"] .finance-expense-table .finance-expense-col-id {
  width: 56px !important;
}

html[data-theme="radiusku-clean"] .finance-expense-table .finance-expense-col-date {
  width: 92px !important;
}

html[data-theme="radiusku-clean"] .finance-expense-table .finance-expense-col-category {
  width: 150px !important;
}

html[data-theme="radiusku-clean"] .finance-expense-table .finance-expense-col-desc {
  width: 240px !important;
}

html[data-theme="radiusku-clean"] .finance-expense-table .finance-expense-col-amount,
html[data-theme="radiusku-clean"] .finance-expense-table :where(th, td):nth-child(5) {
  width: 112px !important;
  text-align: right !important;
}

html[data-theme="radiusku-clean"] .finance-expense-table .finance-expense-col-method,
html[data-theme="radiusku-clean"] .finance-expense-table .finance-expense-col-owner {
  width: 96px !important;
}

html[data-theme="radiusku-clean"] .finance-expense-table .finance-expense-col-action {
  width: 56px !important;
  text-align: center !important;
}

html[data-theme="radiusku-clean"] .finance-expense-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html[data-theme="radiusku-clean"] .finance-expense-delete-form {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

html[data-theme="radiusku-clean"] .finance-expense-action {
  margin: 0 auto !important;
}

html[data-theme="radiusku-clean"] .finance-report-data-section .finance-page-pagination,
html[data-theme="radiusku-clean"] .finance-report-data-section nav.finance-page-pagination {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .finance-expense-actions-panel {
    width: 100% !important;
  }

  html[data-theme="radiusku-clean"] .finance-expense-management-dropdown,
  html[data-theme="radiusku-clean"] .finance-expense-management-dropdown .action-dropdown-trigger {
    width: 100% !important;
  }

  html[data-theme="radiusku-clean"] .finance-expense-management-dropdown .action-dropdown-menu {
    width: min(100%, 280px) !important;
  }
}
/* END ui-v1.6.579 expense page table parity */

/* BEGIN ui-v1.6.580 expense create modal layout */
html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-create-card {
  width: min(720px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow: hidden !important;
}

html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-create-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 12px !important;
  overflow: auto !important;
}

html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-create-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-create-grid > .field {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
}

html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-create-grid > .field > label {
  min-height: 15px !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: var(--rk-weight-semibold) !important;
  color: var(--muted) !important;
}

html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-create-grid :where(input, select, textarea) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-wide-field {
  grid-column: span 3 !important;
}

html[data-theme="radiusku-clean"] #finance-expense-create-modal .modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border) !important;
}

html[data-theme="radiusku-clean"] #finance-expense-create-modal .modal-actions .btn {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

@media (max-width: 760px) {
  html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-create-card {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 16px !important;
  }

  html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-create-form {
    padding: 10px !important;
    gap: 8px !important;
  }

  html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-create-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html[data-theme="radiusku-clean"] #finance-expense-create-modal .finance-expense-wide-field {
    grid-column: auto !important;
  }

  html[data-theme="radiusku-clean"] #finance-expense-create-modal .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  html[data-theme="radiusku-clean"] #finance-expense-create-modal .modal-actions .btn {
    width: 100% !important;
  }
}
/* END ui-v1.6.580 expense create modal layout */

/* BEGIN ui-v1.6.581 expense modal cache-safe layout */
#finance-expense-create-modal .finance-expense-create-card {
  width: min(720px, calc(100vw - 24px)) !important;
}

#finance-expense-create-modal .finance-expense-create-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#finance-expense-create-modal .finance-expense-create-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#finance-expense-create-modal .finance-expense-create-grid > .field,
#finance-expense-create-modal .finance-expense-create-grid :where(input, select, textarea) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#finance-expense-create-modal .finance-expense-wide-field {
  grid-column: 1 / -1 !important;
}

#finance-expense-create-modal .modal-actions {
  width: 100% !important;
  grid-column: 1 / -1 !important;
  justify-content: flex-end !important;
}

@media (max-width: 760px) {
  #finance-expense-create-modal .finance-expense-create-grid {
    grid-template-columns: 1fr !important;
  }
}
/* END ui-v1.6.581 expense modal cache-safe layout */

/* BEGIN ui-v1.6.603 profile owner picker modal */
html[data-theme="radiusku-clean"] .profile-owner-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

html[data-theme="radiusku-clean"] .profile-owner-summary {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
}

.profile-owner-modal[hidden] {
  display: none !important;
}

.profile-owner-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal, 80) + 24);
  display: grid;
  place-items: center;
  padding: 16px;
}

.profile-owner-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .48);
}

html[data-theme="radiusku-clean"] .profile-owner-card {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 24px));
  max-height: min(640px, calc(100dvh - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 16px;
}

html[data-theme="radiusku-clean"] .profile-owner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px !important;
}

html[data-theme="radiusku-clean"] .profile-owner-body {
  padding: 12px;
  display: grid;
  gap: 10px;
  min-height: 0;
}

html[data-theme="radiusku-clean"] .profile-owner-search {
  width: 100%;
}

html[data-theme="radiusku-clean"] .profile-owner-list {
  display: grid;
  gap: 6px;
  overflow: auto;
  max-height: 390px;
  padding-right: 3px;
}

html[data-theme="radiusku-clean"] .profile-owner-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

html[data-theme="radiusku-clean"] .profile-owner-option:hover {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

html[data-theme="radiusku-clean"] .profile-owner-option input {
  flex: 0 0 auto;
}

html[data-theme="radiusku-clean"] .profile-owner-actions {
  justify-content: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}

/* Keep every Profile Paket workspace on the same compact application type scale. */
body[data-shell="app"] :where(.package-profile-toolbar, .package-profile-card, .package-modal-card, .package-form-stack, .profile-owner-modal, .card-glow[data-rbac-module="packages"], .card-glow[data-rbac-module="package_services"]) {
  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);
}

body[data-shell="app"] :where(.package-profile-toolbar, .package-profile-card, .package-modal-card, .package-form-stack, .profile-owner-modal, .card-glow[data-rbac-module="packages"], .card-glow[data-rbac-module="package_services"]) :where(button, input, select, textarea, label, th, td, .help, .muted, .card-title, .card-subtitle) {
  font-family: inherit;
  letter-spacing: 0;
}

/* The global checkbox rule needs a wider dedicated column in Profile Paket tables. */
body[data-shell="app"] .package-profile-card .check-col {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding-inline: 10px !important;
  overflow: visible !important;
}

body[data-shell="app"] .package-profile-card .check-col::before,
body[data-shell="app"] .package-profile-card .check-col::after,
body[data-shell="app"] .package-profile-card .check-col input[type="checkbox"]::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 640px) {
  html[data-theme="radiusku-clean"] .profile-owner-card {
    width: calc(100vw - 14px);
    max-height: calc(100dvh - 14px);
    border-radius: 14px;
  }
  html[data-theme="radiusku-clean"] .profile-owner-list {
    max-height: calc(100dvh - 230px);
  }
  html[data-theme="radiusku-clean"] .profile-owner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
/* END ui-v1.6.603 profile owner picker modal */

/* BEGIN ui-v1.6.595 lighter table date rendering */
html[data-theme="radiusku-clean"] :where(
  td.rk-date-cell,
  .rk-date-cell,
  .rk-date-stack,
  .rk-date-line,
  .rk-time-line,
  .online-trx-time-stack,
  .online-trx-date,
  .online-trx-clock
) {
  display: inline !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] :where(td.rk-date-cell, .rk-date-cell) {
  min-height: 0 !important;
}
/* END ui-v1.6.595 lighter table date rendering */

/* BEGIN ui-v1.6.596 customer date column no-overlap */
html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(th.ppp-renewed-col, td.ppp-renewed-col) {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(th.ppp-due-col, td.ppp-due-col) {
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table :where(td.ppp-renewed-col, td.ppp-due-col, td.rk-date-cell),
html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table td.rk-date-cell {
  display: table-cell !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 1.22 !important;
}

html[data-theme="radiusku-clean"] .customer-list-card .customer-report-table {
  width: max(100%, 1140px) !important;
  min-width: max(100%, 1140px) !important;
}
/* END ui-v1.6.596 customer date column no-overlap */

/* BEGIN ui-v1.6.618 finance profit-loss report */
html[data-theme="radiusku-clean"] .finance-profit-actions .finance-report-action-btn {
  min-width: 34px;
  min-height: 28px !important;
  padding: 5px 7px !important;
  justify-content: center;
}

html[data-theme="radiusku-clean"] .finance-report-overview:has(.finance-profit-actions) {
  grid-template-columns: 116px minmax(0, 1fr) !important;
}

html[data-theme="radiusku-clean"] .finance-report-actions-panel:has(.finance-profit-actions) {
  padding: 7px !important;
}

html[data-theme="radiusku-clean"] .finance-report-actions-panel:has(.finance-profit-actions) .finance-report-actions-title {
  font-size: 11px !important;
  margin-bottom: 5px !important;
  white-space: nowrap !important;
}

html[data-theme="radiusku-clean"] .finance-profit-actions {
  gap: 5px !important;
}

html[data-theme="radiusku-clean"] .finance-profit-actions .finance-report-action-btn span {
  display: none !important;
}

html[data-theme="radiusku-clean"] .finance-profit-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html[data-theme="radiusku-clean"] .finance-profit-kpi .finance-report-kpi-icon.is-period {
  background: color-mix(in srgb, #e74c3c 16%, var(--surface));
  color: #c0392b;
}

html[data-theme="radiusku-clean"] .finance-profit-kpi .finance-report-kpi-icon.is-fee {
  background: color-mix(in srgb, #f97316 16%, var(--surface));
  color: #ea580c;
}

html[data-theme="radiusku-clean"] .finance-report-kpi-value.is-danger {
  color: #dc2626;
}

html[data-theme="radiusku-clean"] .finance-profit-section {
  display: grid;
  gap: 14px;
  padding: 8px 0 14px;
}

html[data-theme="radiusku-clean"] .finance-profit-chart-card {
  border-top: 1px solid var(--border);
  padding: 14px 10px 10px;
}

html[data-theme="radiusku-clean"] .finance-profit-chart-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

html[data-theme="radiusku-clean"] .finance-profit-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 8px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

html[data-theme="radiusku-clean"] .finance-profit-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html[data-theme="radiusku-clean"] .finance-profit-legend i {
  width: 18px;
  height: 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
  display: inline-block;
}

html[data-theme="radiusku-clean"] .finance-profit-legend .trx { background: #fff8db; }
html[data-theme="radiusku-clean"] .finance-profit-legend .income { background: #eaf6ff; }
html[data-theme="radiusku-clean"] .finance-profit-legend .profit { background: #fff0f0; }
html[data-theme="radiusku-clean"] .finance-profit-legend .fee { background: #d7ebff; }
html[data-theme="radiusku-clean"] .finance-profit-legend .tax { background: #c9eeee; }
html[data-theme="radiusku-clean"] .finance-profit-legend .expense { background: #fff8cf; }

html[data-theme="radiusku-clean"] .finance-profit-chart {
  min-height: 150px;
  display: grid;
  grid-template-columns: repeat(12, minmax(44px, 1fr));
  gap: 6px;
  align-items: end;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    repeating-linear-gradient(to top, transparent 0, transparent 35px, color-mix(in srgb, var(--border) 55%, transparent) 36px),
    linear-gradient(to bottom, color-mix(in srgb, var(--surface-soft) 50%, transparent), transparent);
  padding: 10px 8px 0;
  overflow-x: auto;
}

html[data-theme="radiusku-clean"] .finance-profit-month {
  min-width: 44px;
  display: grid;
  grid-template-rows: 112px auto;
  align-items: end;
  gap: 6px;
}

html[data-theme="radiusku-clean"] .finance-profit-bars {
  height: 112px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
}

html[data-theme="radiusku-clean"] .finance-profit-bar {
  width: 12px;
  min-height: 2px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 3px 3px 0 0;
  display: block;
  height: var(--bar-height, 0%);
}

html[data-theme="radiusku-clean"] .finance-profit-bar.is-income { background: rgba(14, 165, 233, .14); }
html[data-theme="radiusku-clean"] .finance-profit-bar.is-profit { background: rgba(239, 68, 68, .13); }
html[data-theme="radiusku-clean"] .finance-profit-bar.is-fee { background: rgba(96, 165, 250, .45); }
html[data-theme="radiusku-clean"] .finance-profit-bar.is-tax { background: rgba(45, 212, 191, .35); }
html[data-theme="radiusku-clean"] .finance-profit-bar.is-expense { background: rgba(250, 204, 21, .25); }

html[data-theme="radiusku-clean"] .finance-profit-month-label {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

html[data-theme="radiusku-clean"] .finance-profit-table {
  width: max(100%, 980px) !important;
  min-width: max(100%, 980px) !important;
}

.preview-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #aaa;
  background: #f7f7f7;
  position: sticky;
  top: 0;
  z-index: 10;
}

.preview-toolbar button {
  border: 1px solid #777;
  background: #eee;
  color: #000;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
}

.preview-sheet {
  padding: 10px;
}

.preview-sheet .voucher-empty-state {
  padding: 16px;
  font-family: var(--rk-font-ui);
  color: #222;
}

/* Voucher templates may contain nested tables with their own inline sizing. */
.preview-sheet table {
  width: auto;
  min-width: 0 !important;
  max-width: none;
  border-collapse: collapse;
  border-spacing: 0;
}

.preview-sheet th,
.preview-sheet td {
  padding: 0;
  border: 0;
  vertical-align: top;
  text-align: inherit;
}

.preview-sheet img[width="75"][height="20"] {
  display: block;
  margin: 0 !important;
  max-width: 75px;
  height: 20px;
}

.preview-sheet td:has(> img[width="75"][height="20"]) {
  height: 32px !important;
  min-height: 32px !important;
  padding-top: 3px !important;
  padding-bottom: 9px !important;
  vertical-align: top !important;
}

.preview-sheet .voucher-card > tbody > tr > td {
  line-height: 1.15;
}

.preview-sheet .voucher-card table td {
  min-width: 0;
  overflow-wrap: anywhere;
}

.preview-sheet .voucher-card {
  display: inline-block;
  border-collapse: collapse;
  border: 1px solid #444;
  margin: 0 5px 5px 0;
  width: 170px;
	min-width: 170px !important;
	max-width: 170px !important;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-sizing: border-box;
	break-inside: avoid;
	page-break-inside: avoid;
}

.preview-sheet .voucher-card tbody {
  display: table;
  width: 100%;
}

.preview-sheet .voucher-card-header {
  background: var(--voucher-accent, #008000);
  color: #fff;
  padding: 2px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
}

.preview-sheet .voucher-logo-cell {
  width: 75px;
  padding: 2px;
}

.preview-sheet .voucher-logo {
  width: 75px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.preview-sheet .voucher-card-amount {
  width: 95px;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  color: var(--voucher-accent, #008000);
  padding: 2px;
}

.preview-sheet .voucher-card-amount small {
  display: block;
  font-size: 10px;
}

.preview-sheet .voucher-card-body {
  width: 95px;
  padding: 2px;
  vertical-align: top;
}

.preview-sheet .voucher-card-label {
  border-bottom: 1px solid #444;
  font-weight: 700;
  font-size: 10px;
  color: #444;
}

.preview-sheet .voucher-card-value {
  border-bottom: 1px solid #444;
  font-weight: 700;
  font-size: 17px;
  color: #444;
}

.preview-sheet .voucher-card-value.is-small {
  font-size: 10px;
}

.preview-sheet .voucher-card-side {
  width: 75px;
  text-align: right;
  padding: 2px;
  font-size: 12px;
}

.preview-sheet .voucher-card-footer {
  background: var(--voucher-accent, #008000);
  color: #fff;
  padding: 2px;
  font-size: 8px;
  font-weight: 700;
}

.preview-sheet .voucher-card-meta {
  float: right;
}

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  .preview-sheet,
  .preview-sheet *,
  .preview-sheet .voucher-card,
  .preview-sheet .voucher-card td,
  .preview-sheet .voucher-card div {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .preview-toolbar {
    display: none !important;
  }
  .preview-sheet {
    padding: 0 !important;
  }
  .preview-sheet .voucher-card {
    width: 45mm !important;
    min-width: 45mm !important;
    max-width: 45mm !important;
    margin: 0 2mm 2mm 0;
  }
}

@media (max-width: 820px) {
  html[data-theme="radiusku-clean"] .finance-profit-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  html[data-theme="radiusku-clean"] .finance-profit-kpis {
    grid-template-columns: 1fr !important;
  }
}
/* END ui-v1.6.618 finance profit-loss report */

/* BEGIN ui-v1.6.626 professional visual polish */
html[data-theme="radiusku-clean"],
body[data-theme="radiusku-clean"] {
  --bg: #eef3f8;
  --bg-soft: #f6f8fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --border: rgba(15,23,42,.105);
  --border-strong: rgba(15,23,42,.18);
  --text: #0f172a;
  --text-soft: #334155;
  --muted: #64748b;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: rgba(37,99,235,.105);
  --shadow: 0 16px 36px rgba(15,23,42,.095);
  --shadow-soft: 0 8px 22px rgba(15,23,42,.07);
  --shadow-sm: 0 1px 4px rgba(15,23,42,.075);
}

body[data-shell="app"][data-theme="radiusku-clean"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,0) 210px),
    linear-gradient(135deg, rgba(37,99,235,.045), rgba(14,165,233,.025) 38%, rgba(16,185,129,.025)),
    var(--bg) !important;
}

html[data-theme="radiusku-clean"] .workspace {
  background: transparent !important;
}

html[data-theme="radiusku-clean"] .topbar {
  min-height: 72px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.045);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

html[data-theme="radiusku-clean"] .sidebar {
  background: rgba(255,255,255,.92) !important;
  border-right-color: color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 10px 0 30px rgba(15,23,42,.055);
}

html[data-theme="radiusku-clean"] .sidebar-head {
  border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent);
}

html[data-theme="radiusku-clean"] .brand-mark,
html[data-theme="radiusku-clean"] .logo-mark,
html[data-theme="radiusku-clean"] .profile-avatar,
html[data-theme="radiusku-clean"] .user-avatar-fallback {
  box-shadow: 0 10px 24px rgba(37,99,235,.22);
}

html[data-theme="radiusku-clean"] :where(.nav-item, .nav-sub) {
  border-radius: 10px;
  font-weight: 680;
}

html[data-theme="radiusku-clean"] :where(.nav-item:hover, .nav-sub:hover) {
  transform: translateX(1px);
}

html[data-theme="radiusku-clean"] :where(.nav-item.active, .nav-item[aria-expanded="true"], .nav-sub.active) {
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  border-color: rgba(37,99,235,.28) !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.18) !important;
}

html[data-theme="radiusku-clean"] :where(.card, .rk-card, .panel, .dashboard-section, .finance-report-card, .customer-list-card, .table-card, .settings-card, .quick-panel, .metric, .mini-kpi, .summary-card) {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.065) !important;
}

html[data-theme="radiusku-clean"] :where(.card, .rk-card, .panel, .dashboard-section, .finance-report-card, .customer-list-card, .table-card, .settings-card, .quick-panel) {
  border-radius: 12px !important;
  overflow: clip;
}

html[data-theme="radiusku-clean"] :where(.card-header, .card-head, .rk-card-head, .panel-head, .table-head, .dashboard-section-head) {
  background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.90)) !important;
  border-bottom-color: color-mix(in srgb, var(--border) 82%, transparent) !important;
}

html[data-theme="radiusku-clean"] :where(.metric, .mini-kpi, .summary-card, .dashboard-section-metrics .metric) {
  min-height: 68px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

html[data-theme="radiusku-clean"] :where(.metric:hover, .mini-kpi:hover, .summary-card:hover) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border)) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.09) !important;
}

html[data-theme="radiusku-clean"] :where(.btn, button[type="submit"], .action-dropdown-trigger, .rk-dropdown-trigger, .finance-report-action-btn) {
  border-radius: 10px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

html[data-theme="radiusku-clean"] :where(.btn:hover, button[type="submit"]:hover, .action-dropdown-trigger:hover, .rk-dropdown-trigger:hover, .finance-report-action-btn:hover) {
  transform: translateY(-1px);
}

html[data-theme="radiusku-clean"] :where(.btn-primary, button[type="submit"], .btn-accent, .voucher-print-submit-btn) {
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  border-color: rgba(37,99,235,.22) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.18) !important;
}

html[data-theme="radiusku-clean"] :where(input, select, textarea, .search input, .toolbar-search input) {
  border-radius: 10px !important;
  border-color: color-mix(in srgb, var(--border) 115%, transparent) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: inset 0 1px 0 rgba(15,23,42,.025);
}

html[data-theme="radiusku-clean"] :where(input, select, textarea):focus {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border)) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
  outline: none !important;
}

html[data-theme="radiusku-clean"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) {
  background: rgba(255,255,255,.72) !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

html[data-theme="radiusku-clean"] :where(.rk-table, .user-table, .package-table, .compact-table, table) thead th {
  background: #eef3f8 !important;
  color: #334155 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 95%, transparent) !important;
  font-weight: 800 !important;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .user-table, .package-table, .compact-table, table) tbody tr {
  transition: background .12s ease;
}

html[data-theme="radiusku-clean"] :where(.rk-table, .user-table, .package-table, .compact-table, table) tbody tr:hover {
  background: rgba(37,99,235,.045) !important;
}

html[data-theme="radiusku-clean"] :where(.badge, .badge-mini, .status-badge, .status-pill, .customer-status-badge, .voucher-status-pill, .online-payment-status) {
  border-radius: 999px !important;
  font-weight: 760 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

html[data-theme="radiusku-clean"] :where(.modal-card, .rk-modal-card, .modal-panel, .profile-owner-card) {
  border-radius: 14px !important;
  border-color: color-mix(in srgb, var(--border) 95%, transparent) !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.20) !important;
}

html[data-theme="radiusku-clean"] :where(.modal-head, .rk-modal-head, .profile-owner-head) {
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border-bottom-color: color-mix(in srgb, var(--border) 84%, transparent) !important;
}

html[data-theme="radiusku-clean"] :where(.dropdown-menu, .action-dropdown-menu, .rk-dropdown-menu) {
  border-radius: 12px !important;
  border-color: color-mix(in srgb, var(--border) 92%, transparent) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.15) !important;
}

@media (max-width: 860px) {
  html[data-theme="radiusku-clean"] .topbar {
    min-height: 62px;
  }
  html[data-theme="radiusku-clean"] :where(.card, .rk-card, .panel, .dashboard-section, .customer-list-card, .finance-report-card) {
    border-radius: 10px !important;
  }
  html[data-theme="radiusku-clean"] :where(.metric, .mini-kpi, .summary-card) {
    min-height: 58px;
  }
}
/* END ui-v1.6.626 professional visual polish */


/* BEGIN ui-v1.6.628 mobile table horizontal scroll contract */
body[data-shell="app"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .table-scroll,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-table-wrap,
  .customer-report-table-wrap,
  .hotspot-customer-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .profile-compact-wide,
  .hotspot-profile-fit-wrap,
  .settings-user-compact-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .router-clock-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-compact-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap,
  .rk-large-table-wrap,
  .rk-virtual-scroll-host
) {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
  touch-action: pan-x pan-y !important;
}

body[data-shell="app"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .table-scroll,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .finance-table-wrap,
  .customer-report-table-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap
) :where(table, .rk-table, .user-table, .package-table, .compact-table) {
  width: max(100%, var(--rk-table-min-width, 760px)) !important;
  min-width: max(100%, var(--rk-table-min-width, 760px)) !important;
}

@media (max-width: 860px) {
  body[data-shell="app"] :where(.table-card, .ppp-compact-card, .billing-compact-card, .topup-compact-card, .settings-compact-card, .package-profile-card, .customer-list-card, .finance-report-card, .rk-card:has(.rk-table-wrap), .card:has(.rk-table-wrap)) {
    overflow: visible !important;
    overflow-x: visible !important;
  }

  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .profile-compact-wide,
    .hotspot-profile-fit-wrap,
    .settings-user-compact-wrap,
    .tool-import-preview-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .router-clock-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host,
    div:has(> table.rk-table),
    div:has(> table.user-table),
    div:has(> table.package-table)
  ) {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .finance-table-wrap,
    .customer-report-table-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .session-table-wrap,
    .system-table-wrap,
    div:has(> table.rk-table),
    div:has(> table.user-table),
    div:has(> table.package-table)
  ) :where(table, .rk-table, .user-table, .package-table, .compact-table) {
    width: max(100%, var(--rk-table-min-width, 760px)) !important;
    min-width: max(100%, var(--rk-table-min-width, 760px)) !important;
    max-width: none !important;
  }
}
/* END ui-v1.6.628 mobile table horizontal scroll contract */

/* BEGIN ui-v1.6.796 user management full-width table scroll */
body[data-shell="app"] .settings-user-compact-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
}

body[data-shell="app"] .settings-user-compact-wrap .settings-user-table {
  width: max(100%, 1400px) !important;
  min-width: 1400px !important;
  max-width: none !important;
}
/* END ui-v1.6.796 user management full-width table scroll */

/* BEGIN ui-v1.6.629 bottom-only table pagination */
body[data-shell="app"] :where(
  .customer-list-pagination-top,
  .billing-list-pagination-top,
  .finance-page-pagination-top,
  .online-payment-page-pagination-top,
  .ppp-table-control-row > .rk-table-pagination,
  .rk-table-controls > .rk-table-pagination,
  .table-head .rk-table-pagination,
  .rk-card-head .rk-table-pagination
) {
  display: none !important;
}
/* END ui-v1.6.629 bottom-only table pagination */

/* BEGIN ui-v1.6.630 compact hotspot voucher id/login columns */
body[data-shell="app"] .voucher-compact-table :where(th:nth-child(2), td:nth-child(2)) {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

body[data-shell="app"] .voucher-compact-table :where(th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4)) {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

body[data-shell="app"] .voucher-compact-table :where(th:nth-child(5), td:nth-child(5)) {
  width: 102px !important;
  min-width: 102px !important;
  max-width: 102px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

body[data-shell="app"] .voucher-compact-table :where(th:nth-child(6), td:nth-child(6)) {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

body[data-shell="app"] .voucher-compact-table :where(td:nth-child(2), td:nth-child(3), td:nth-child(4)) :where(.data-main, .compact-main) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .voucher-compact-table :where(td:nth-child(5), td:nth-child(6)) :where(.data-main, .compact-main) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .voucher-compact-table :where(th:nth-child(2), th:nth-child(3), th:nth-child(4), th:nth-child(5), th:nth-child(6)) .customer-sort-link {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
/* END ui-v1.6.630 compact hotspot voucher id/login columns */

/* BEGIN ui-v1.6.632 fit hotspot voucher table on laptop */
body[data-shell="app"] :where(.voucher-compact-wrap, .voucher-report-table-wrap) > .voucher-compact-table {
  --rk-table-min-width: 940px !important;
  width: max(100%, 940px) !important;
  min-width: max(100%, 940px) !important;
  table-layout: fixed !important;
  font-size: 10.45px !important;
}

body[data-shell="app"] .voucher-compact-table :where(th, td) {
  padding-left: 4px !important;
  padding-right: 4px !important;
  height: 34px !important;
}

body[data-shell="app"] .voucher-compact-table :where(th:nth-child(7), td:nth-child(7)) {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
}

body[data-shell="app"] .voucher-compact-table :where(th:nth-child(8), td:nth-child(8)) {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
}

body[data-shell="app"] .voucher-compact-table :where(th:nth-child(9), td:nth-child(9)) {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
}

body[data-shell="app"] .voucher-compact-table :where(th:nth-child(10), td:nth-child(10)) {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
}

body[data-shell="app"] .voucher-compact-table :where(th:nth-child(11), td:nth-child(11)) {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
}

body[data-shell="app"] .voucher-compact-table :where(th:nth-child(12), td:nth-child(12)) {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}

body[data-shell="app"] .voucher-compact-table :where(td:nth-child(7), td:nth-child(8), td:nth-child(9), td:nth-child(10), td:nth-child(11)) :where(.data-main, .compact-main, .voucher-due-pill, .voucher-status-pill) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-status-pill, .voucher-due-pill) {
  min-height: 18px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  gap: 3px !important;
}

body[data-shell="app"] .voucher-compact-table .voucher-status-pill::before {
  width: 5px !important;
  height: 5px !important;
}

body[data-shell="app"] .voucher-compact-table .voucher-row-actions {
  gap: 3px !important;
}

body[data-shell="app"] .voucher-compact-table .voucher-row-actions .table-action-icon-btn {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

@media (max-width: 860px) {
  body[data-shell="app"] :where(.voucher-compact-wrap, .voucher-report-table-wrap) > .voucher-compact-table {
    width: max(100%, 940px) !important;
    min-width: max(100%, 940px) !important;
  }
}
/* END ui-v1.6.632 fit hotspot voucher table on laptop */

/* BEGIN ui-v1.6.633 fit customer tables on laptop */
body[data-shell="app"] :where(.customer-report-table-wrap, .ppp-compact-wrap) > :where(.customer-report-table, .ppp-compact-table, .hotspot-customer-table) {
  --rk-table-min-width: 1020px !important;
  width: max(100%, 1020px) !important;
  min-width: max(100%, 1020px) !important;
  table-layout: fixed !important;
  font-size: 10.45px !important;
}

body[data-shell="app"] .customer-report-table :where(th, td) {
  padding-left: 4px !important;
  padding-right: 4px !important;
  height: 36px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-id, th.ppp-id-col, td.ppp-id-col) {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-name, th.ppp-name-col, td.ppp-name-col) {
  width: 178px !important;
  min-width: 178px !important;
  max-width: 178px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-service, th.ppp-service-col, td.ppp-service-col) {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-package, th.ppp-package-col, td.ppp-package-col) {
  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-ip, th.ppp-ip-col, td.ppp-ip-col) {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-renewed, th.ppp-renewed-col, td.ppp-renewed-col) {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-due, th.ppp-due-col, td.ppp-due-col) {
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-status, th.ppp-status-col, td.ppp-status-col) {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-owner, th.ppp-owner-col, td.ppp-owner-col) {
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-renew-print, th.ppp-renew-print-col, td.ppp-renew-print-col) {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-col-action, th.ppp-action-col, td.ppp-action-col) {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-sort-link, .rk-th-content) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body[data-shell="app"] .customer-report-table :where(td.ppp-id-col, td.ppp-name-col, td.ppp-service-col, td.ppp-package-col, td.ppp-ip-col, td.ppp-renewed-col, td.ppp-due-col, td.ppp-status-col, td.ppp-owner-col) :where(.data-main, .compact-main, .data-sub, .compact-sub, .customer-id-text, .customer-name-text, .customer-package-stack, .customer-ip-stack, .rk-date-stack, .rk-date-line, .rk-time-line) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .customer-report-table .ppp-info-cell-inner {
  gap: 5px !important;
  min-width: 0 !important;
}

body[data-shell="app"] .customer-report-table .ppp-info-btn {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  font-size: 11px !important;
}

body[data-shell="app"] .customer-report-table :where(.customer-name-text, .ppp-name-text, .ppp-name-only) {
  min-width: 0 !important;
  max-width: 142px !important;
}

body[data-shell="app"] .customer-report-table .service-type-cell {
  gap: 2px !important;
  min-width: 0 !important;
}

body[data-shell="app"] .customer-report-table .service-type-badge {
  padding: 1px 5px !important;
  min-width: 0 !important;
  font-size: 9.4px !important;
}

body[data-shell="app"] .customer-report-table .service-type-label {
  min-width: 0 !important;
  max-width: 34px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .customer-report-table .customer-package-stack {
  gap: 1px !important;
}

body[data-shell="app"] .customer-report-table .customer-package-stack > .data-main.compact-main {
  font-weight: 500 !important;
  font-size: 10.45px !important;
}

body[data-shell="app"] .customer-report-table .customer-package-stack > .data-sub.compact-sub {
  font-size: 9.7px !important;
}

body[data-shell="app"] .customer-report-table .customer-status-stack {
  gap: 2px !important;
  align-items: flex-start !important;
}

body[data-shell="app"] .customer-report-table .ppp-status-col :where(.badge, .badge-mini, .customer-status-badge) {
  max-width: 78px !important;
  min-height: 16px !important;
  padding: 1px 4px !important;
  font-size: 9.4px !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .customer-report-table :where(.ppp-compact-actions, .customer-actions) {
  gap: 3px !important;
  flex-wrap: nowrap !important;
}

body[data-shell="app"] .customer-report-table :where(.table-rp-icon-btn, .table-action-icon-btn, .customer-action-btn) {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

body[data-shell="app"] .customer-report-table :where(.table-rp-icon-btn svg, .table-action-icon-btn svg, .customer-action-btn svg) {
  width: 14px !important;
  height: 14px !important;
}

@media (max-width: 860px) {
  body[data-shell="app"] :where(.customer-report-table-wrap, .ppp-compact-wrap) > :where(.customer-report-table, .ppp-compact-table, .hotspot-customer-table) {
    width: max(100%, 1020px) !important;
    min-width: max(100%, 1020px) !important;
  }
}
/* END ui-v1.6.633 fit customer tables on laptop */

/* BEGIN ui-v1.6.634 unified compact data table contract */
body[data-shell="app"] :where(
  .rk-table-wrap,
  .table-wrap,
  .compact-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .billing-report-table-wrap,
  .customer-report-table-wrap,
  .voucher-compact-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .app-log-table-wrap
) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
}

body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .profile-compact-table,
  .topup-compact-table,
  .router-table,
  .session-table,
  .system-table,
  .app-log-table
) {
  width: max(100%, var(--rk-table-min-width, 980px)) !important;
  min-width: max(100%, var(--rk-table-min-width, 980px)) !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: var(--rk-table-body-size, 10.6px) !important;
}

body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .profile-compact-table,
  .topup-compact-table,
  .router-table,
  .session-table,
  .system-table,
  .app-log-table
) :where(th, td) {
  padding: 5px 6px !important;
  height: 36px !important;
  min-width: 0 !important;
  vertical-align: middle !important;
}

body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .profile-compact-table,
  .topup-compact-table,
  .router-table,
  .session-table,
  .system-table,
  .app-log-table
) thead th {
  font-size: var(--rk-table-head-size, 10.25px) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .profile-compact-table,
  .topup-compact-table,
  .router-table,
  .session-table,
  .system-table,
  .app-log-table
) :where(td, th, .data-main, .compact-main, .data-sub, .compact-sub, .muted, .compact-link, .badge, .status-badge, .status-pill) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .profile-compact-table,
  .topup-compact-table,
  .router-table,
  .session-table,
  .system-table,
  .app-log-table
) :where(.data-main, .compact-main, .data-sub, .compact-sub, .muted, .compact-link) {
  display: block !important;
  white-space: nowrap !important;
}

body[data-shell="app"] :where(.rk-table-pagination, .customer-list-pagination, .finance-page-pagination, .package-list-pagination, .router-list-pagination) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-shell="app"] :where(.rk-table-pagination, .customer-list-pagination, .finance-page-pagination, .package-list-pagination, .router-list-pagination) :where(a, span) {
  min-height: 28px !important;
  padding: 5px 9px !important;
  border-radius: 8px !important;
  line-height: 1.1 !important;
  font-size: 11px !important;
}

body[data-shell="app"] :where(.rk-table-footer, .customer-list-footer, .finance-report-footer, .package-list-footer, .router-list-footer) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-top: 1px solid var(--border) !important;
}

body[data-shell="app"] :where(.rk-toolbar-search, .toolbar-search, .toolbar-search-form, .finance-report-search, .online-payment-search, .topup-table-search) {
  width: min(400px, 100%) !important;
  max-width: 400px !important;
  min-width: min(240px, 100%) !important;
}

body[data-shell="app"] :where(.entries-control) {
  flex: 0 0 auto !important;
}

body[data-shell="app"] :where(.finance-table-wrap, .finance-report-table-wrap) > .finance-table {
  --rk-table-min-width: 1040px !important;
  --rk-table-body-size: 10.45px !important;
  --rk-table-head-size: 10.15px !important;
}

body[data-shell="app"] .finance-income-report-table :where(th:nth-child(1), td:nth-child(1)) {
  width: 58px !important;
}

body[data-shell="app"] .finance-income-report-table :where(th:nth-child(2), td:nth-child(2)) {
  width: 118px !important;
}

body[data-shell="app"] .finance-income-report-table :where(th:nth-child(3), td:nth-child(3)) {
  width: 100px !important;
}

body[data-shell="app"] .finance-income-report-table :where(th:nth-child(4), td:nth-child(4)) {
  width: 150px !important;
}

body[data-shell="app"] .finance-income-report-table :where(th:nth-child(5), td:nth-child(5)) {
  width: 76px !important;
}

body[data-shell="app"] .finance-income-report-table :where(th:nth-child(6), td:nth-child(6)) {
  width: 118px !important;
}

body[data-shell="app"] .finance-income-report-table :where(th:nth-child(7), td:nth-child(7)),
body[data-shell="app"] .finance-income-report-table :where(th:nth-child(8), td:nth-child(8)) {
  width: 92px !important;
}

body[data-shell="app"] .finance-income-report-table :where(th:nth-child(9), td:nth-child(9)) {
  width: 114px !important;
}

body[data-shell="app"] .finance-income-report-table :where(th:nth-child(10), td:nth-child(10)) {
  width: 76px !important;
}

body[data-shell="app"] .finance-income-report-table :where(th:nth-child(11), td:nth-child(11)) {
  width: 70px !important;
}

body[data-shell="app"] .finance-topup-report-table {
  --rk-table-min-width: 1080px !important;
}

body[data-shell="app"] .finance-expense-table {
  --rk-table-min-width: 900px !important;
}

body[data-shell="app"] .finance-expense-table :where(th:nth-child(1), td:nth-child(1)) {
  width: 58px !important;
}

body[data-shell="app"] .finance-expense-table :where(th:nth-child(2), td:nth-child(2)) {
  width: 90px !important;
}

body[data-shell="app"] .finance-expense-table :where(th:nth-child(3), td:nth-child(3)) {
  width: 130px !important;
}

body[data-shell="app"] .finance-expense-table :where(th:nth-child(4), td:nth-child(4)) {
  width: 220px !important;
}

body[data-shell="app"] .finance-expense-table :where(th:nth-child(5), td:nth-child(5)) {
  width: 100px !important;
}

body[data-shell="app"] .finance-expense-table :where(th:nth-child(6), td:nth-child(6)) {
  width: 92px !important;
}

body[data-shell="app"] .finance-expense-table :where(th:nth-child(7), td:nth-child(7)) {
  width: 90px !important;
}

body[data-shell="app"] .finance-expense-table :where(th:nth-child(8), td:nth-child(8)) {
  width: 70px !important;
}

/* ui-v1.6.808 rapikan ukuran kolom: widened columns that gained sort-arrow (↕/▲/▼) header
   marks so header labels no longer clip. */
body[data-shell="app"] .finance-income-report-table {
  --rk-table-min-width: 1250px !important;
}
body[data-shell="app"] .finance-income-report-table :where(th:nth-child(1), td:nth-child(1)) { width: 74px !important; }
body[data-shell="app"] .finance-income-report-table :where(th:nth-child(2), td:nth-child(2)) { width: 132px !important; }
body[data-shell="app"] .finance-income-report-table :where(th:nth-child(3), td:nth-child(3)) { width: 114px !important; }
body[data-shell="app"] .finance-income-report-table :where(th:nth-child(5), td:nth-child(5)) { width: 92px !important; }
body[data-shell="app"] .finance-income-report-table :where(th:nth-child(6), td:nth-child(6)) { width: 150px !important; }
body[data-shell="app"] .finance-income-report-table :where(th:nth-child(7), td:nth-child(7)),
body[data-shell="app"] .finance-income-report-table :where(th:nth-child(8), td:nth-child(8)) { width: 106px !important; }
body[data-shell="app"] .finance-income-report-table :where(th:nth-child(9), td:nth-child(9)) { width: 140px !important; }
body[data-shell="app"] .finance-income-report-table :where(th:nth-child(10), td:nth-child(10)) { width: 92px !important; }

/* ui-v1.6.809 generic finance ledger table (bhp-uso and other unmatched Data Keuangan sections)
   previously had a <colgroup> with finance-ledger-col-* classes but no matching CSS widths at
   all, so columns fell back to equal auto-width and clipped header/body text. */
body[data-shell="app"] .finance-table:not(.finance-expense-table):not(.finance-topup-report-table):not(.finance-income-report-table):not(.finance-profit-table) {
  --rk-table-min-width: 1205px !important;
  width: max(100%, 1205px) !important;
  min-width: max(100%, 1205px) !important;
}
body[data-shell="app"] .finance-table :where(.finance-ledger-col-id) { width: 60px !important; }
body[data-shell="app"] .finance-table :where(.finance-ledger-col-date) { width: 140px !important; }
body[data-shell="app"] .finance-table :where(.finance-ledger-col-reference) { width: 130px !important; }
body[data-shell="app"] .finance-table :where(.finance-ledger-col-customer) { width: 210px !important; }
body[data-shell="app"] .finance-table :where(.finance-ledger-col-package) { width: 120px !important; }
body[data-shell="app"] .finance-table :where(.finance-ledger-col-method) { width: 115px !important; }
body[data-shell="app"] .finance-table :where(.finance-ledger-col-status) { width: 90px !important; }
body[data-shell="app"] .finance-table :where(.finance-ledger-col-amount) { width: 110px !important; }
body[data-shell="app"] .finance-table :where(.finance-ledger-col-owner) { width: 140px !important; }
body[data-shell="app"] .finance-table :where(.finance-ledger-col-invoice) { width: 90px !important; }

body[data-shell="app"] .finance-expense-table {
  --rk-table-min-width: 960px !important;
}
body[data-shell="app"] .finance-expense-table :where(th:nth-child(1), td:nth-child(1)) { width: 72px !important; }
body[data-shell="app"] .finance-expense-table :where(th:nth-child(2), td:nth-child(2)) { width: 104px !important; }
body[data-shell="app"] .finance-expense-table :where(th:nth-child(3), td:nth-child(3)) { width: 148px !important; }
body[data-shell="app"] .finance-expense-table :where(th:nth-child(5), td:nth-child(5)) { width: 118px !important; }
body[data-shell="app"] .finance-expense-table :where(th:nth-child(6), td:nth-child(6)) { width: 104px !important; }
body[data-shell="app"] .finance-expense-table :where(th:nth-child(7), td:nth-child(7)) { width: 104px !important; }

body[data-shell="app"] .finance-topup-report-table {
  --rk-table-min-width: 1280px !important;
}
body[data-shell="app"] .finance-topup-report-table :where(th:nth-child(2), td:nth-child(2)) { width: 132px !important; }
body[data-shell="app"] .finance-topup-report-table :where(th:nth-child(4), td:nth-child(4)) { width: 110px !important; }
body[data-shell="app"] .finance-topup-report-table :where(th:nth-child(5), td:nth-child(5)) { width: 116px !important; }
body[data-shell="app"] .finance-topup-report-table :where(th:nth-child(6), td:nth-child(6)),
body[data-shell="app"] .finance-topup-report-table :where(th:nth-child(7), td:nth-child(7)) { width: 108px !important; }
body[data-shell="app"] .finance-topup-report-table :where(th:nth-child(8), td:nth-child(8)) { width: 140px !important; }
body[data-shell="app"] .finance-topup-report-table :where(th:nth-child(9), td:nth-child(9)) { width: 140px !important; }
body[data-shell="app"] .finance-topup-report-table :where(th:nth-child(11), td:nth-child(11)) { width: 96px !important; }

body[data-shell="app"] .finance-income-report-table .ppp-info-cell-inner,
body[data-shell="app"] .finance-table .finance-income-actions,
body[data-shell="app"] .finance-table .finance-expense-row-actions {
  gap: 3px !important;
  flex-wrap: nowrap !important;
}

body[data-shell="app"] .finance-table :where(.table-action-icon-btn, .finance-income-action, .finance-expense-action) {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

@media (max-width: 860px) {
  body[data-shell="app"] :where(.rk-table-footer, .customer-list-footer, .finance-report-footer, .package-list-footer, .router-list-footer) {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body[data-shell="app"] :where(.rk-table-pagination, .customer-list-pagination, .finance-page-pagination, .package-list-pagination, .router-list-pagination) {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  body[data-shell="app"] :where(.rk-toolbar-search, .toolbar-search, .toolbar-search-form, .finance-report-search, .online-payment-search, .topup-table-search) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}
/* END ui-v1.6.634 unified compact data table contract */

/* BEGIN ui-v1.6.635 bottom-only pagination everywhere */
body[data-shell="app"] :where(
  .customer-list-pagination-top,
  .billing-list-pagination-top,
  .finance-page-pagination-top,
  .online-payment-page-pagination-top,
  .table-head nav.rk-table-pagination,
  .table-head nav.table-pagination,
  .rk-table-head nav.rk-table-pagination,
  .rk-table-head nav.table-pagination,
  .rk-card-head nav.rk-table-pagination,
  .rk-card-head nav.table-pagination,
  .ppp-table-control-row > nav.rk-table-pagination,
  .ppp-table-control-row > nav.table-pagination,
  .rk-table-controls > nav.rk-table-pagination,
  .rk-table-controls > nav.table-pagination,
  .billing-table-control-row > nav.rk-table-pagination,
  .billing-table-control-row > nav.table-pagination,
  .finance-report-table-controls > nav.rk-table-pagination,
  .finance-report-table-controls > nav.table-pagination,
  .online-payment-table-control-row > nav.rk-table-pagination,
  .online-payment-table-control-row > nav.table-pagination,
  .settings-user-table-control-row > nav.rk-table-pagination,
  .settings-user-table-control-row > nav.table-pagination,
  .router-table-control-row > nav.rk-table-pagination,
  .router-table-control-row > nav.table-pagination,
  .topup-table-control-row > nav.rk-table-pagination,
  .topup-table-control-row > nav.table-pagination,
  .voucher-table-control-row > nav.rk-table-pagination,
  .voucher-table-control-row > nav.table-pagination,
  .package-table-head nav.rk-table-pagination,
  .profile-table-head nav.rk-table-pagination,
  .router-compact-head nav.rk-table-pagination
) {
  display: none !important;
}

body[data-shell="app"] :where(
  .rk-table-footer nav.rk-table-pagination,
  .rk-table-footer nav.table-pagination,
  .customer-list-footer nav.rk-table-pagination,
  .customer-list-footer nav.table-pagination,
  .rk-list-pagination-footer nav.rk-table-pagination,
  .rk-list-pagination-footer nav.table-pagination,
  .finance-report-footer nav.rk-table-pagination,
  .finance-report-footer nav.table-pagination,
  .package-list-footer nav.rk-table-pagination,
  .package-list-footer nav.table-pagination,
  .router-list-footer nav.rk-table-pagination,
  .router-list-footer nav.table-pagination
) {
  display: inline-flex !important;
}
/* END ui-v1.6.635 bottom-only pagination everywhere */

/* BEGIN ui-v1.6.636 finance bottom pagination hardening */
body[data-shell="app"] .finance-report-card-head :where(nav.rk-table-pagination, nav.table-pagination, .finance-page-pagination),
body[data-shell="app"] .finance-report-table-controls :where(nav.rk-table-pagination, nav.table-pagination, .finance-page-pagination),
body[data-shell="app"] .finance-report-data-section > .rk-card-head :where(nav.rk-table-pagination, nav.table-pagination, .finance-page-pagination) {
  display: none !important;
}

body[data-shell="app"] .finance-report-footer :where(nav.rk-table-pagination, nav.table-pagination, .finance-page-pagination) {
  display: inline-flex !important;
}

body[data-shell="app"] .finance-report-table-controls {
  align-items: center !important;
  gap: 8px !important;
}

body[data-shell="app"] .finance-report-table-meta {
  flex: 1 1 auto !important;
  min-width: 160px !important;
}

body[data-shell="app"] .finance-report-search {
  flex: 0 1 400px !important;
  margin-left: auto !important;
}
/* END ui-v1.6.636 finance bottom pagination hardening */

/* BEGIN ui-v1.6.638 modern dashboard and summary cards */
body[data-shell="app"] :where(
  .dash-overview-grid,
  .mini-strip-grid,
  .rk-summary-grid,
  .customer-summary-grid,
  .billing-summary-grid,
  .finance-report-kpis,
  .customer-report-kpis,
  .topup-summary-grid,
  .finance-summary-grid,
  .router-summary-grid,
  .system-metric-grid,
  .dashboard-legacy-summary-grid,
  .kpi-grid
) {
  gap: 10px !important;
}

body[data-shell="app"] :where(
  .overview-tile,
  .mini-strip,
  .rk-summary-card,
  .customer-summary-card,
  .finance-report-kpi,
  .customer-report-kpi,
  .router-report-kpi,
  .system-metric,
  .mini-kpi,
  .metric,
  .legacy-summary-item
) {
  --card-accent: #2563eb;
  --card-accent-soft: rgba(37, 99, 235, .12);
  position: relative !important;
  overflow: hidden !important;
  min-height: 64px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(203, 213, 225, .82) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--card-accent) 14%, transparent) 0, transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), color-mix(in srgb, var(--card-accent) 5%, #f8fafc)) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .075) !important;
}

body[data-shell="app"] :where(
  .overview-tile,
  .mini-strip,
  .rk-summary-card,
  .customer-summary-card,
  .finance-report-kpi,
  .customer-report-kpi,
  .router-report-kpi,
  .system-metric,
  .mini-kpi,
  .metric,
  .legacy-summary-item
)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 52%, #ffffff)) !important;
  opacity: .95 !important;
}

body[data-shell="app"] :where(.overview-tile, .rk-summary-card, .customer-summary-card, .finance-report-kpi, .metric, .mini-strip, .legacy-summary-item):hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--card-accent) 42%, rgba(203,213,225,.9)) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .11) !important;
}

body[data-shell="app"] :where(
  .overview-tile:nth-child(4n+2),
  .mini-strip:nth-child(4n+2),
  .rk-summary-card:nth-child(4n+2),
  .customer-summary-card:nth-child(4n+2),
  .finance-report-kpi:nth-child(4n+2),
  .customer-report-kpi:nth-child(4n+2),
  .router-report-kpi:nth-child(4n+2),
  .system-metric:nth-child(4n+2),
  .mini-kpi:nth-child(4n+2),
  .metric:nth-child(4n+2),
  .legacy-summary-item:nth-child(4n+2)
) { --card-accent: #7c3aed; --card-accent-soft: rgba(124, 58, 237, .12); }

body[data-shell="app"] :where(
  .overview-tile:nth-child(4n+3),
  .mini-strip:nth-child(4n+3),
  .rk-summary-card:nth-child(4n+3),
  .customer-summary-card:nth-child(4n+3),
  .finance-report-kpi:nth-child(4n+3),
  .customer-report-kpi:nth-child(4n+3),
  .router-report-kpi:nth-child(4n+3),
  .system-metric:nth-child(4n+3),
  .mini-kpi:nth-child(4n+3),
  .metric:nth-child(4n+3),
  .legacy-summary-item:nth-child(4n+3)
) { --card-accent: #0891b2; --card-accent-soft: rgba(8, 145, 178, .12); }

body[data-shell="app"] :where(
  .overview-tile:nth-child(4n),
  .mini-strip:nth-child(4n),
  .rk-summary-card:nth-child(4n),
  .customer-summary-card:nth-child(4n),
  .finance-report-kpi:nth-child(4n),
  .customer-report-kpi:nth-child(4n),
  .router-report-kpi:nth-child(4n),
  .system-metric:nth-child(4n),
  .mini-kpi:nth-child(4n),
  .metric:nth-child(4n),
  .legacy-summary-item:nth-child(4n)
) { --card-accent: #059669; --card-accent-soft: rgba(5, 150, 105, .12); }

body[data-shell="app"] :where(
  .overview-glyph,
  .rk-icon-box,
  .dash-icon,
  .customer-summary-icon,
  .finance-report-kpi-icon,
  .metric-icon,
  .online-payment-kpi-icon,
  .router-report-kpi-icon,
  .legacy-summary-icon
) {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border: 1px solid color-mix(in srgb, var(--card-accent, #2563eb) 18%, rgba(203,213,225,.8)) !important;
  border-radius: 11px !important;
  color: var(--card-accent, #2563eb) !important;
  background: var(--card-accent-soft, rgba(37,99,235,.12)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 8px 18px rgba(15,23,42,.07) !important;
}

body[data-shell="app"] :where(.overview-kicker, .customer-summary-title, .customer-summary-label, .finance-report-kpi-label, .metric-title, .metric-label, .mini-strip-label, .legacy-summary-title) {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body[data-shell="app"] :where(.overview-number, .customer-summary-value, .finance-report-kpi-value, .metric-chip, .quick-panel-value, .amount, .system-metric strong, .mini-strip strong, .legacy-summary-value) {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 860 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

body[data-shell="app"] .mini-strip {
  min-height: 54px !important;
  align-items: center !important;
}

body[data-shell="app"] .overview-tile {
  min-height: 72px !important;
}

body[data-shell="app"] .overview-tile::after {
  content: "" !important;
  position: absolute !important;
  right: -28px !important;
  bottom: -42px !important;
  width: 132px !important;
  height: 132px !important;
  display: block !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--card-accent) 18%, transparent) 0 48%, color-mix(in srgb, var(--card-accent) 9%, transparent) 49% 64%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body[data-shell="app"] :where(.overview-tile-copy, .overview-glyph, .overview-link) {
  position: relative !important;
  z-index: 1 !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
}

@media (max-width: 720px) {
  body[data-shell="app"] :where(
    .dash-overview-grid,
    .mini-strip-grid,
    .rk-summary-grid,
    .customer-summary-grid,
    .billing-summary-grid,
    .finance-report-kpis,
    .customer-report-kpis,
    .topup-summary-grid,
    .finance-summary-grid,
    .router-summary-grid,
    .system-metric-grid,
    .dashboard-legacy-summary-grid,
    .kpi-grid
  ) {
    gap: 8px !important;
  }

  body[data-shell="app"] :where(.overview-tile, .mini-strip, .rk-summary-card, .customer-summary-card, .finance-report-kpi, .customer-report-kpi, .router-report-kpi, .system-metric, .mini-kpi, .metric, .legacy-summary-item) {
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 12px !important;
  }
}
/* END ui-v1.6.638 modern dashboard and summary cards */

/* BEGIN ui-v1.6.640 dashboard card action alignment cleanup */
body[data-shell="app"] .dash-overview-grid .overview-tile {
  grid-template-columns: minmax(0, 1fr) 50px !important;
  align-items: center !important;
  column-gap: 10px !important;
  padding-right: 16px !important;
  padding-bottom: 12px !important;
}

body[data-shell="app"] .dash-overview-grid .overview-glyph {
  justify-self: end !important;
  align-self: center !important;
  margin: 0 0 14px 0 !important;
}

body[data-shell="app"] .dash-overview-grid .overview-link {
  position: absolute !important;
  right: 16px !important;
  bottom: 10px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  display: block !important;
  text-align: center !important;
  color: var(--primary-strong, #2563eb) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .dash-overview-grid .overview-tile::after {
  right: -30px !important;
  bottom: -44px !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  font-size: 18px !important;
}

@media (max-width: 720px) {
  body[data-shell="app"] .dash-overview-grid .overview-tile {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    padding-right: 12px !important;
  }

  body[data-shell="app"] .dash-overview-grid .overview-link {
    right: 12px !important;
  }
}
/* END ui-v1.6.640 dashboard card action alignment cleanup */

/* BEGIN ui-v1.6.641 modern finance report actions */
body[data-shell="app"] .finance-report-overview {
  grid-template-columns: minmax(142px, 168px) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
}

body[data-shell="app"] .finance-report-actions-panel {
  min-height: 64px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 9px !important;
  border: 1px solid rgba(203, 213, 225, .82) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.10), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.88)) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.06) !important;
}

body[data-shell="app"] .finance-report-actions-title {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .finance-report-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

body[data-shell="app"] .finance-report-action-btn {
  min-width: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(147, 197, 253, .86) !important;
  border-radius: 10px !important;
  color: #1d4ed8 !important;
  background: linear-gradient(180deg, rgba(239,246,255,.98), rgba(219,234,254,.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 6px 14px rgba(37,99,235,.08) !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .finance-report-action-btn:is(:hover, :focus-visible) {
  transform: translateY(-1px) !important;
  border-color: rgba(37, 99, 235, .72) !important;
  background: linear-gradient(180deg, rgba(219,234,254,.98), rgba(191,219,254,.82)) !important;
  box-shadow: 0 10px 20px rgba(37,99,235,.14) !important;
}

body[data-shell="app"] .finance-report-action-btn.is-print {
  border-color: rgba(125, 211, 252, .86) !important;
  color: #0369a1 !important;
  background: linear-gradient(180deg, rgba(240,249,255,.98), rgba(224,242,254,.74)) !important;
}

body[data-shell="app"] .finance-report-action-btn.is-reset {
  width: 32px !important;
  padding-inline: 0 !important;
  border-color: rgba(203,213,225,.92) !important;
  color: #64748b !important;
  background: rgba(248,250,252,.92) !important;
}

body[data-shell="app"] .finance-report-action-svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}

body[data-shell="app"] .finance-expense-actions-panel {
  min-width: 190px !important;
}

body[data-shell="app"] .finance-expense-actions-panel .finance-expense-management-dropdown {
  width: 100% !important;
}

body[data-shell="app"] .finance-expense-actions-panel .action-dropdown-trigger {
  width: 100% !important;
  min-height: 34px !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

body[data-shell="app"] .finance-report-actions-panel:has(.finance-profit-actions) {
  min-width: 132px !important;
  padding: 8px !important;
}

body[data-shell="app"] .finance-profit-actions .finance-report-action-btn {
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
}

body[data-shell="app"] .finance-profit-actions .finance-report-action-btn span,
body[data-shell="app"] .finance-report-action-btn.is-reset span {
  display: none !important;
}

@media (max-width: 900px) {
  body[data-shell="app"] .finance-report-overview {
    grid-template-columns: 1fr !important;
  }

  body[data-shell="app"] .finance-report-actions-panel {
    min-height: 50px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body[data-shell="app"] .finance-report-actions-title {
    flex: 0 0 auto !important;
  }

  body[data-shell="app"] .finance-expense-actions-panel {
    min-width: 0 !important;
  }
}
/* END ui-v1.6.641 modern finance report actions */

/* BEGIN ui-v1.6.642 finance actions in report header */
body[data-shell="app"] .finance-report-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-shell="app"] .finance-report-head > div:first-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body[data-shell="app"] .finance-report-head-actions.finance-report-actions-panel {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-shell="app"] .finance-report-head-actions .finance-report-actions-title {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

body[data-shell="app"] .finance-report-head-actions .finance-report-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

body[data-shell="app"] .finance-report-head-actions .finance-report-action-btn {
  min-height: 30px !important;
  height: 30px !important;
  padding: 5px 9px !important;
  border-radius: 10px !important;
}

body[data-shell="app"] .finance-report-head-actions .finance-report-action-svg {
  width: 14px !important;
  height: 14px !important;
}

body[data-shell="app"] .finance-report-head-actions.finance-expense-actions-panel .action-dropdown-trigger {
  min-height: 32px !important;
  height: 32px !important;
  padding: 5px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .finance-report-overview {
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
}

body[data-shell="app"] .finance-report-overview > .finance-report-actions-panel:not(.finance-report-head-actions) {
  display: none !important;
}

body[data-shell="app"] .finance-report-kpis,
body[data-shell="app"] .finance-report-kpis-topup,
body[data-shell="app"] .finance-profit-kpis {
  width: 100% !important;
}

body[data-shell="app"] .finance-table :where(.finance-income-action, .finance-expense-action, .finance-invoice-link) > span:first-child:not(.table-action-label) {
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  body[data-shell="app"] .finance-report-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body[data-shell="app"] .finance-report-head-actions.finance-report-actions-panel {
    width: 100% !important;
    align-items: stretch !important;
  }

  body[data-shell="app"] .finance-report-head-actions .finance-report-buttons {
    justify-content: flex-start !important;
  }
}
/* END ui-v1.6.642 finance actions in report header */

/* BEGIN ui-v1.6.644 single-row summary cards */
body[data-shell="app"] :where(
  .rk-summary-grid,
  .customer-summary-grid,
  .customer-report-kpis,
  .billing-summary-grid,
  .topup-summary-grid,
  .finance-summary-grid,
  .finance-report-kpis,
  .finance-report-kpis-topup,
  .online-payment-summary-grid,
  .router-summary-grid,
  .system-metric-grid,
  .kpi-grid,
  .dashboard-money,
  .settlement-metrics
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
}

body[data-shell="app"] :where(
  .finance-report-kpis,
  .finance-report-kpis-topup,
  .billing-summary-grid,
  .topup-summary-grid,
  .finance-summary-grid,
  .online-payment-summary-grid
) {
  grid-template-columns: repeat(auto-fit, minmax(min(176px, 100%), 1fr)) !important;
}

body[data-shell="app"] :where(
  .rk-summary-card,
  .customer-summary-card,
  .finance-report-kpi,
  .customer-report-kpi,
  .router-report-kpi,
  .system-metric,
  .mini-kpi,
  .metric
) {
  min-width: 0 !important;
}

body[data-shell="app"] :where(.finance-report-kpi-label, .customer-summary-label, .customer-summary-title, .metric-label, .metric-title) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-shell="app"] :where(.finance-report-kpi-value, .customer-summary-value, .metric strong, .metric-chip, .amount) {
  overflow-wrap: anywhere !important;
}

@media (min-width: 1180px) {
  body[data-shell="app"] :where(
    .rk-summary-grid,
    .customer-summary-grid,
    .customer-report-kpis,
    .billing-summary-grid,
    .topup-summary-grid,
    .finance-summary-grid,
    .finance-report-kpis,
    .finance-report-kpis-topup,
    .online-payment-summary-grid,
    .router-summary-grid,
    .system-metric-grid,
    .kpi-grid,
    .dashboard-money,
    .settlement-metrics
  ) {
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-template-columns: none !important;
  }
}

@media (max-width: 720px) {
  body[data-shell="app"] :where(
    .rk-summary-grid,
    .customer-summary-grid,
    .customer-report-kpis,
    .billing-summary-grid,
    .topup-summary-grid,
    .finance-summary-grid,
    .finance-report-kpis,
    .finance-report-kpis-topup,
    .online-payment-summary-grid,
    .router-summary-grid,
    .system-metric-grid,
    .kpi-grid,
    .dashboard-money,
    .settlement-metrics
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
  }
}
/* END ui-v1.6.644 single-row summary cards */

/* BEGIN ui-v1.6.645 sidebar toggle panel icon */
body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  font-size: 0 !important;
  color: #334155 !important;
  background: #fff !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-svg {
  width: 30px !important;
  height: 22px !important;
  display: block !important;
  overflow: visible !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle :where(.sidebar-toggle-frame, .sidebar-toggle-divider, .sidebar-toggle-chevron) {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-frame {
  stroke-width: 3.2 !important;
}

html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  color: #fff !important;
  background: #273244 !important;
  border-color: #273244 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .18) !important;
}

html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-frame {
  fill: #273244 !important;
  stroke: #273244 !important;
}

html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-divider,
html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-chevron {
  stroke: #fff !important;
}
/* END ui-v1.6.645 sidebar toggle panel icon */

/* BEGIN ui-v1.6.646 compact topbar and directional sidebar icon */
body[data-shell="app"] .topbar {
  min-height: 52px !important;
  padding: 6px 12px !important;
  gap: 8px !important;
}

body[data-shell="app"] .topbar-left,
body[data-shell="app"] .topbar-right {
  gap: 8px !important;
}

body[data-shell="app"] .breadcrumb {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

body[data-shell="app"] .page-title {
  margin-top: 1px !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  background: #fff !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-svg {
  width: 27px !important;
  height: 20px !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle :where(.sidebar-toggle-frame, .sidebar-toggle-divider, .sidebar-toggle-chevron) {
  stroke-width: 4.2 !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-frame {
  stroke-width: 4.4 !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-chevron-show {
  display: none !important;
}

html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-chevron-hide {
  display: none !important;
}

html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-chevron-show {
  display: block !important;
}

html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  color: #fff !important;
  background: #0f172a !important;
  border-color: #0f172a !important;
}

html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-frame {
  fill: #0f172a !important;
  stroke: #0f172a !important;
}

@media (max-width: 720px) {
  body[data-shell="app"] .topbar {
    min-height: 48px !important;
    padding: 5px 9px !important;
  }
  body[data-shell="app"] .page-title {
    font-size: 16px !important;
  }
}
/* END ui-v1.6.646 compact topbar and directional sidebar icon */

/* BEGIN ui-v1.6.647 full sidebar toggle icon */
body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  width: 36px !important;
  min-width: 36px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0f172a !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle:is(:hover, :focus-visible) {
  background: rgba(37, 99, 235, .08) !important;
  box-shadow: none !important;
}

body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-svg {
  width: 34px !important;
  height: 24px !important;
}

html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-frame {
  fill: none !important;
  stroke: currentColor !important;
}

html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-divider,
html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-chevron {
  stroke: currentColor !important;
}
/* END ui-v1.6.647 full sidebar toggle icon */

/* BEGIN ui-v1.6.648 sidebar icon visibility and compact balance */
html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle,
html[data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle:is(:hover, :focus-visible) {
  color: #0f172a !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-shell="app"] .top-balance-chip {
  min-height: 28px !important;
  padding: 2px 7px !important;
  gap: 0 !important;
  border-radius: 10px !important;
  line-height: 1.1 !important;
}

body[data-shell="app"] .top-balance-chip span {
  font-size: 9.5px !important;
  line-height: 1.05 !important;
}

body[data-shell="app"] .top-balance-chip strong {
  font-size: 11px !important;
  line-height: 1.08 !important;
}
/* END ui-v1.6.648 sidebar icon visibility and compact balance */

/* BEGIN ui-v1.6.649 profile-like balance chip */
body[data-shell="app"] .top-balance-chip {
  min-height: 38px !important;
  height: 38px !important;
  padding: 4px 11px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 1px !important;
  line-height: 1.05 !important;
}

body[data-shell="app"] .top-balance-chip span {
  font-size: 10px !important;
  line-height: 1.05 !important;
  color: var(--muted) !important;
}

body[data-shell="app"] .top-balance-chip strong {
  font-size: 12px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

@media (max-width: 720px) {
  body[data-shell="app"] .top-balance-chip {
    display: none !important;
  }
}
/* END ui-v1.6.649 profile-like balance chip */

/* BEGIN ui-v1.6.650 mobile data table horizontal swipe */
@media (max-width: 860px) {
  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .profile-compact-wide,
    .hotspot-profile-fit-wrap,
    .settings-user-compact-wrap,
    .tool-import-preview-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .router-clock-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    div:has(> table.rk-table),
    div:has(> table.user-table),
    div:has(> table.package-table),
    div:has(> table.finance-table),
    div:has(> table.voucher-compact-table),
    div:has(> table.customer-report-table)
  ) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: scroll !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: thin !important;
  }

  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .settings-user-compact-wrap,
    .tool-import-preview-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    div:has(> table.rk-table),
    div:has(> table.user-table),
    div:has(> table.package-table)
  ) > :where(table, .rk-table, .user-table, .package-table, .compact-table, .finance-table, .billing-report-table, .customer-report-table, .voucher-compact-table, .online-payment-table) {
    width: max-content !important;
    min-width: var(--rk-mobile-table-min-width, var(--rk-table-min-width, 920px)) !important;
    max-width: none !important;
  }

  body[data-shell="app"] :where(.ppp-compact-table, .customer-report-ppp-table) {
    --rk-mobile-table-min-width: 1020px;
  }

  body[data-shell="app"] :where(.hotspot-customer-table, .customer-report-hotspot-table) {
    --rk-mobile-table-min-width: 980px;
  }

  body[data-shell="app"] :where(.voucher-compact-table, .voucher-report-table) {
    --rk-mobile-table-min-width: 940px;
  }

  body[data-shell="app"] :where(.finance-table, .billing-report-table, .online-payment-table) {
    --rk-mobile-table-min-width: 1040px;
  }
}
/* END ui-v1.6.650 mobile data table horizontal swipe */

/* BEGIN ui-v1.6.651 strict mobile table swipe surface */
@media (max-width: 860px) {
  body[data-shell="app"] :where(.table-card, .ppp-compact-card, .billing-compact-card, .topup-compact-card, .settings-compact-card, .package-profile-card, .customer-list-card, .finance-report-card, .dashboard-panel, .rk-card:has(table), .card:has(table)) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .hotspot-profile-fit-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host
  ) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    cursor: grab;
  }

  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .hotspot-profile-fit-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host
  ) :where(table, thead, tbody, tr, th, td, td *, th *) {
    touch-action: pan-x !important;
  }
}
/* END ui-v1.6.651 strict mobile table swipe surface */

/* BEGIN ui-v1.6.652 smooth native mobile table swipe */
@media (max-width: 860px) {
  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .hotspot-profile-fit-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host
  ) {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y !important;
    scroll-behavior: auto !important;
    will-change: scroll-position;
    cursor: auto !important;
  }

  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .hotspot-profile-fit-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host
  ) :where(table, thead, tbody, tr, th, td, td *, th *) {
    touch-action: auto !important;
  }
}
/* END ui-v1.6.652 smooth native mobile table swipe */

/* BEGIN ui-v1.6.653 mobile table axis lock */
@media (max-width: 860px) {
  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .hotspot-profile-fit-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host
  ) {
    touch-action: pan-y !important;
  }
}
/* END ui-v1.6.653 mobile table axis lock */

/* BEGIN ui-v1.6.654 stricter mobile table axis lock */
@media (max-width: 860px) {
  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .hotspot-profile-fit-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host
  ) {
    touch-action: pan-y !important;
    overscroll-behavior-x: none !important;
  }
}
/* END ui-v1.6.654 stricter mobile table axis lock */

/* BEGIN ui-v1.6.655 conservative mobile table axis lock */
@media (max-width: 860px) {
  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .hotspot-profile-fit-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host
  ) {
    touch-action: pan-y !important;
  }
}
/* END ui-v1.6.655 conservative mobile table axis lock */

/* BEGIN ui-v1.6.656 unified native table-responsive contract */
body[data-shell="app"] :where(
  .table-card,
  .ppp-compact-card,
  .billing-compact-card,
  .topup-compact-card,
  .settings-compact-card,
  .package-profile-card,
  .customer-list-card,
  .finance-report-card,
  .dashboard-panel,
  .rk-card:has(table),
  .card:has(table)
) {
  min-width: 0 !important;
}

body[data-shell="app"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .table-scroll,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .hotspot-customer-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .profile-compact-wide,
  .hotspot-profile-fit-wrap,
  .settings-user-compact-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .router-clock-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-compact-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap,
  .rk-large-table-wrap,
  .rk-virtual-scroll-host
) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
  touch-action: auto !important;
  scroll-behavior: auto !important;
  scrollbar-width: thin !important;
}

body[data-shell="app"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .table-scroll,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .hotspot-customer-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .profile-compact-wide,
  .hotspot-profile-fit-wrap,
  .settings-user-compact-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .router-clock-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-compact-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap,
  .rk-large-table-wrap,
  .rk-virtual-scroll-host
) > :where(table, .rk-table, .user-table, .package-table, .compact-table, .finance-table, .billing-report-table, .customer-report-table, .voucher-compact-table, .online-payment-table) {
  width: max(100%, var(--rk-table-min-width, 920px)) !important;
  min-width: max(100%, var(--rk-table-min-width, 920px)) !important;
  max-width: none !important;
  table-layout: fixed !important;
}

body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table,
  table
) :where(th, td) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

body[data-shell="app"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .table-scroll,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .hotspot-customer-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .hotspot-profile-fit-wrap,
  .settings-user-compact-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-compact-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap
) :where(table, thead, tbody, tr, th, td, td *, th *) {
  touch-action: auto !important;
}

body[data-shell="app"] :where(.customer-list-pagination-top, .table-head nav.rk-table-pagination, .table-head nav.table-pagination, .rk-table-head nav.rk-table-pagination, .rk-table-head nav.table-pagination, .rk-card-head nav.rk-table-pagination, .rk-card-head nav.table-pagination) {
  display: none !important;
}

@media (max-width: 860px) {
  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .profile-compact-wide,
    .hotspot-profile-fit-wrap,
    .settings-user-compact-wrap,
    .tool-import-preview-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .router-clock-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host
  ) {
    overflow-x: auto !important;
    overflow-y: visible !important;
    touch-action: auto !important;
  }

  body[data-shell="app"] :where(.ppp-compact-table, .customer-report-ppp-table) {
    --rk-table-min-width: 1020px !important;
  }

  body[data-shell="app"] :where(.hotspot-customer-table, .customer-report-hotspot-table) {
    --rk-table-min-width: 980px !important;
  }

  body[data-shell="app"] :where(.voucher-compact-table, .voucher-report-table) {
    --rk-table-min-width: 940px !important;
  }

  body[data-shell="app"] :where(.finance-table, .billing-report-table, .online-payment-table) {
    --rk-table-min-width: 1040px !important;
  }
}
/* END ui-v1.6.656 unified native table-responsive contract */

/* BEGIN ui-v1.6.657 lightweight global table mode */
body[data-shell="app"] {
  scroll-behavior: auto !important;
}

body[data-shell="app"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .table-scroll,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .hotspot-customer-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .profile-compact-wide,
  .hotspot-profile-fit-wrap,
  .settings-user-compact-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .router-clock-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-compact-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap,
  .rk-large-table-wrap,
  .rk-virtual-scroll-host
),
body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table,
  table
) {
  scroll-behavior: auto !important;
  will-change: auto !important;
}

body[data-shell="app"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .table-scroll,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .hotspot-customer-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .profile-compact-wide,
  .hotspot-profile-fit-wrap,
  .settings-user-compact-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .router-clock-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-compact-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap,
  .rk-large-table-wrap,
  .rk-virtual-scroll-host
) *,
body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table
) *,
body[data-shell="app"] :where(
  .rk-table-pagination,
  .customer-list-pagination,
  .finance-page-pagination,
  .package-list-pagination,
  .router-list-pagination,
  .voucher-list-pagination,
  .app-log-pagination,
  .table-pagination
) * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}

body[data-shell="app"] :where(
  .table-card,
  .ppp-compact-card,
  .billing-compact-card,
  .topup-compact-card,
  .settings-compact-card,
  .package-profile-card,
  .customer-list-card,
  .finance-report-card,
  .rk-card:has(table),
  .card:has(table)
) {
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06) !important;
}

body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table,
  table
) :where(thead, tbody, tr, th, td) {
  box-shadow: none !important;
  transform: none !important;
}

body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table,
  table
) tbody tr:hover td {
  box-shadow: none !important;
  transform: none !important;
}

body[data-shell="app"] :where(
  .table-action-icon-btn,
  .table-rp-icon-btn,
  .mini-action,
  .btn-mini,
  .rk-action-btn
):hover {
  transform: none !important;
  box-shadow: none !important;
}

body[data-shell="app"] :where(.table-action-icon-glyph, .table-action-icon-glyph.rk-icon-box, .rk-icon-box.table-action-icon-glyph) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.rk-has-large-table body[data-shell="app"] :where(
  .status-pill,
  .badge,
  .table-action-icon-btn,
  .table-rp-icon-btn,
  .mini-action,
  .btn-mini
) {
  box-shadow: none !important;
}

@media (max-width: 860px) {
  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .profile-compact-wide,
    .hotspot-profile-fit-wrap,
    .settings-user-compact-wrap,
    .tool-import-preview-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .router-clock-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host
  ) {
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch !important;
    will-change: auto !important;
  }

  body[data-shell="app"] :where(
    .rk-table,
    .user-table,
    .package-table,
    .compact-table,
    .finance-table,
    .billing-report-table,
    .customer-report-table,
    .topup-compact-table,
    .profile-compact-table,
    .app-log-table,
    .router-table,
    .session-table,
    .system-table,
    .online-payment-table,
    .voucher-compact-table,
    .voucher-report-table,
    .invoice-report-table,
    table
  ) :where(th, td) {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}
/* END ui-v1.6.657 lightweight global table mode */

/* BEGIN ui-v1.6.658 mixradius-style page vertical scroll */
body[data-shell="app"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .table-scroll,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .hotspot-customer-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .profile-compact-wide,
  .hotspot-profile-fit-wrap,
  .settings-user-compact-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .router-clock-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-compact-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap,
  .rk-large-table-wrap,
  .rk-virtual-scroll-host
) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
  contain: none !important;
  content-visibility: visible !important;
  isolation: auto !important;
  transform: none !important;
  will-change: auto !important;
}

body[data-shell="app"] :where(
  .rk-large-table-card,
  .rk-large-table,
  .rk-virtual-table,
  .rk-large-table-wrap,
  .rk-virtual-scroll-host
) {
  contain: none !important;
  content-visibility: visible !important;
  transform: none !important;
  will-change: auto !important;
}

body[data-shell="app"] :where(.rk-virtual-table) thead th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

body[data-shell="app"] :where(
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table,
  table
) :where(tbody tr, tbody td, tbody th) {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

@media (max-width: 860px) {
  body[data-shell="app"] :where(
    .table-wrap,
    .rk-table-wrap,
    .compact-table-wrap,
    .table-scroll,
    .ppp-compact-wrap,
    .billing-compact-wrap,
    .billing-report-table-wrap,
    .finance-table-wrap,
    .finance-report-table-wrap,
    .customer-report-table-wrap,
    .hotspot-customer-wrap,
    .topup-compact-wrap,
    .profile-compact-wrap,
    .profile-compact-wide,
    .hotspot-profile-fit-wrap,
    .settings-user-compact-wrap,
    .tool-import-preview-wrap,
    .app-log-table-wrap,
    .router-table-wrap,
    .router-clock-wrap,
    .session-table-wrap,
    .system-table-wrap,
    .invoice-report-table-wrap,
    .voucher-compact-wrap,
    .voucher-report-table-wrap,
    .online-payment-wrap,
    .rk-large-table-wrap,
    .rk-virtual-scroll-host
  ) {
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    touch-action: pan-x pan-y !important;
  }
}
/* END ui-v1.6.658 mixradius-style page vertical scroll */

/* BEGIN ui-v1.6.659 global data-table checkbox contract */
body[data-shell="app"] :where(.check-col, .bulk-check-cell) {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding-inline: 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

body[data-shell="app"] :where(
  .check-col,
  .bulk-check-cell,
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table
) input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--muted, #64748b) 48%, var(--border, #cbd5e1)) !important;
  border-radius: 3px !important;
  background: var(--surface, #fff) !important;
  color: #fff !important;
  accent-color: var(--primary, #2563eb) !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  position: relative !important;
}

body[data-shell="app"] :where(
  .check-col,
  .bulk-check-cell
) input[type="checkbox"]:disabled {
  cursor: not-allowed !important;
  opacity: .45 !important;
}

body[data-shell="app"] :where(
  .check-col,
  .bulk-check-cell,
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table
) input[type="checkbox"]::after {
  content: "" !important;
  width: 8px !important;
  height: 5px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(-45deg) scale(0) !important;
  transform-origin: center !important;
}

body[data-shell="app"] :where(
  .check-col,
  .bulk-check-cell,
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table
) input[type="checkbox"]:checked {
  border-color: var(--primary, #2563eb) !important;
  background: var(--primary, #2563eb) !important;
}

body[data-shell="app"] :where(
  .check-col,
  .bulk-check-cell,
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table
) input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1) !important;
}

body[data-shell="app"] :where(
  .check-col,
  .bulk-check-cell,
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table
) input[type="checkbox"]:indeterminate {
  border-color: var(--primary, #2563eb) !important;
  background: var(--primary, #2563eb) !important;
}

body[data-shell="app"] :where(
  .check-col,
  .bulk-check-cell,
  .rk-table,
  .user-table,
  .package-table,
  .compact-table,
  .finance-table,
  .billing-report-table,
  .customer-report-table,
  .topup-compact-table,
  .profile-compact-table,
  .app-log-table,
  .router-table,
  .session-table,
  .system-table,
  .online-payment-table,
  .voucher-compact-table,
  .voucher-report-table,
  .invoice-report-table
) input[type="checkbox"]:indeterminate::after {
  width: 7px !important;
  height: 0 !important;
  border-left: 0 !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(0) scale(1) !important;
}

body[data-shell="app"] :where(
  [data-rk-bulk-master],
  [data-rk-bulk-row],
  [data-user-check-all],
  [data-user-check],
  [data-package-check-all],
  [data-package-check],
  [data-template-voucher-check-all],
  [data-template-voucher-check],
  [data-domain-hotspot-check-all],
  [data-domain-hotspot-check],
  [data-customer-check-all],
  [data-customer-check],
  [data-group-profile-check-all],
  [data-group-profile-check],
  [data-ppp-profile-check-all],
  [data-ppp-profile-check],
  [data-hotspot-profile-check-all],
  [data-hotspot-profile-check],
  [data-voucher-select-all],
  [data-voucher-select-one]
) {
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 860px) {
  body[data-shell="app"] :where(.check-col, .bulk-check-cell) {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding-inline: 6px !important;
  }
}
/* END ui-v1.6.659 global data-table checkbox contract */

/* BEGIN ui-v1.6.662 lightweight action-icon fallback */
body[data-shell="app"] :where(
  .table-action-icon-btn .table-action-icon-glyph,
  .table-action-icon-btn > span[aria-hidden="true"],
  .table-rp-icon-btn > span[aria-hidden="true"]
) {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: visible !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: currentColor !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-shell="app"] :where(
  .table-action-icon-btn .table-action-icon-glyph,
  .table-action-icon-btn > span[aria-hidden="true"],
  .table-rp-icon-btn > span[aria-hidden="true"]
)::before {
  content: none !important;
  display: none !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-shell="app"] :where(.table-action-icon-btn, .table-rp-icon-btn) {
  display: inline-grid !important;
  place-items: center !important;
  grid-auto-flow: column !important;
}
/* END ui-v1.6.662 lightweight action-icon fallback */

/* BEGIN ui-v1.6.663 deterministic action icons */
html[data-theme="radiusku-clean"] body[data-shell="app"] :where(.table-action-icon-btn, .table-rp-icon-btn) {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] :where(.customer-report-table) :where(.table-action-icon-btn, .table-rp-icon-btn) {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] :where(.table-action-icon-btn, .table-rp-icon-btn)::before {
  content: "" !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  background: currentColor !important;
  -webkit-mask: var(--rk-action-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E")) center / contain no-repeat !important;
  mask: var(--rk-action-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E")) center / contain no-repeat !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] :where(.table-action-icon-btn.is-edit, .table-rp-icon-btn.is-edit) { --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E"); }
html[data-theme="radiusku-clean"] body[data-shell="app"] :where(.table-action-icon-btn.is-delete, .table-rp-icon-btn.is-delete) { --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E"); }
html[data-theme="radiusku-clean"] body[data-shell="app"] :where(.table-action-icon-btn.is-renew, .table-rp-icon-btn.is-renew, .table-action-icon-btn.is-test, .table-rp-icon-btn.is-test) { --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7v5h-5'/%3E%3Cpath d='M4 17v-5h5'/%3E%3Cpath d='M6.1 9a7 7 0 0 1 11.7-2.6L20 12'/%3E%3Cpath d='M4 12l2.2 5.6A7 7 0 0 0 18 15'/%3E%3C/svg%3E"); }
html[data-theme="radiusku-clean"] body[data-shell="app"] :where(.table-action-icon-btn.is-print, .table-rp-icon-btn.is-print) { --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E"); }
html[data-theme="radiusku-clean"] body[data-shell="app"] :where(.table-action-icon-btn.is-download, .table-rp-icon-btn.is-download, .is-download.table-action-icon-btn) { --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); }
html[data-theme="radiusku-clean"] body[data-shell="app"] :where(.table-action-icon-btn.is-view, .table-rp-icon-btn.is-view) { --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
html[data-theme="radiusku-clean"] body[data-shell="app"] :where(.table-action-icon-btn.is-lock, .table-rp-icon-btn.is-lock) { --rk-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

html[data-theme="radiusku-clean"] body[data-shell="app"] :where(
  .table-action-icon-btn .table-action-icon-glyph,
  .table-action-icon-btn > span[aria-hidden="true"],
  .table-action-icon-btn > svg,
  .table-rp-icon-btn > span[aria-hidden="true"],
  .table-rp-icon-btn > svg,
  .table-action-icon-btn .table-action-label,
  .table-rp-icon-btn .table-action-label
) {
  display: none !important;
}

html[data-theme] body :is(button, a).icon-btn[aria-label="Tutup"]:is([data-modal-close], [data-close-version-history]) {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 0 !important;
}

html[data-theme] body :is(button, a).icon-btn[aria-label="Tutup"]:is([data-modal-close], [data-close-version-history]) > :where(svg, span) {
  display: none !important;
}

html[data-theme] body :is(button, a).icon-btn[aria-label="Tutup"]:is([data-modal-close], [data-close-version-history])::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
/* END ui-v1.6.663 deterministic action icons */

/* BEGIN ui-v1.6.667 large table light mode */
html.rk-large-table-page body[data-shell="app"] :where(.rk-table, table.user-table, table.package-table) :where(
  tr,
  th,
  td,
  a,
  button,
  .btn,
  .badge,
  .status-pill,
  .customer-service-badge,
  .customer-status-badge,
  .voucher-status-pill,
  .voucher-due-pill,
  .table-action-icon-btn,
  .table-rp-icon-btn,
  .ppp-info-btn
) {
  animation: none !important;
  transition: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html.rk-large-table-page body[data-shell="app"] :where(.rk-table, table.user-table, table.package-table) :where(
  .btn,
  .badge,
  .status-pill,
  .customer-service-badge,
  .customer-status-badge,
  .voucher-status-pill,
  .voucher-due-pill,
  .table-action-icon-btn,
  .table-rp-icon-btn,
  .ppp-info-btn
) {
  box-shadow: none !important;
}

html.rk-large-table-page body[data-shell="app"] :where(.rk-table, table.user-table, table.package-table) tbody tr:hover :where(td, th) {
  filter: none !important;
}
/* END ui-v1.6.667 large table light mode */

/* BEGIN ui-v1.6.680 center POP inline filter */
.rk-inline-filter {
  display: inline-flex;
  align-items: center;
  min-width: 190px;
  max-width: 260px;
}

.rk-inline-filter select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(37, 99, 235, .22);
  border-radius: 10px;
  background-color: #fff;
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 700;
  padding: 0 34px 0 12px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.8);
  cursor: pointer;
}

.rk-inline-filter select:hover,
.rk-inline-filter select:focus {
  border-color: rgba(37, 99, 235, .42);
  outline: none;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .12), 0 0 0 3px rgba(37, 99, 235, .10);
}

.center-pop-inline-filter {
  margin-left: 8px;
}

.customer-col-pop,
.ppp-pop-col,
.voucher-pop-col {
  width: 96px;
  max-width: 110px;
}

.rk-table th.customer-col-pop,
.rk-table th.ppp-pop-col,
.rk-table th.voucher-pop-col {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.rk-table th .customer-sort-link.is-static {
  cursor: default;
  pointer-events: none;
}

.voucher-pop-col .compact-main,
.ppp-pop-col .compact-main,
.customer-col-pop .compact-main {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .rk-inline-filter {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}
/* END ui-v1.6.680 center POP inline filter */

/* BEGIN ui-v1.6.683 unified customer voucher table contract */
body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) > div,
body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) > .rk-toolbar-actions {
  width: 100% !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.toolbar-actions, .rk-toolbar-actions) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.action-dropdown) {
  flex: 0 0 auto !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter, .rk-inline-filter) {
  flex: 0 1 220px !important;
  min-width: 190px !important;
  max-width: 260px !important;
  margin-left: 8px !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-inline-filter select) {
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.ppp-table-control-row, .rk-table-controls) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.entries-control) {
  flex: 0 0 auto !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.table-meta) {
  flex: 1 1 220px !important;
  min-width: 180px !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.toolbar-search, .rk-toolbar-search, .toolbar-search-form) {
  flex: 0 1 400px !important;
  width: min(400px, 100%) !important;
  min-width: min(240px, 100%) !important;
  max-width: 400px !important;
  margin-left: auto !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.toolbar-search input, .rk-toolbar-search input, .toolbar-search-form input) {
  width: 100% !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.rk-table-pagination, .table-pagination) {
  margin-left: 0 !important;
}

body[data-shell="app"] :where(.voucher-compact-wrap, .voucher-report-table-wrap) > .voucher-compact-table {
  --rk-table-min-width: 980px !important;
  width: max(100%, var(--rk-table-min-width, 980px)) !important;
  min-width: max(100%, var(--rk-table-min-width, 980px)) !important;
  table-layout: fixed !important;
}

body[data-shell="app"] .voucher-compact-table :where(th, td) {
  padding-left: 6px !important;
  padding-right: 6px !important;
  height: 36px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-check, .check-col) {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-pop, .voucher-pop-col) {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-id, .voucher-id-col) {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-username, .voucher-username-col, .voucher-col-password, .voucher-password-col) {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-profile, .voucher-profile-col) {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-price, .voucher-price-col) {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-router, .voucher-router-col) {
  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-created, .voucher-created-col, .voucher-col-due, .voucher-due-col) {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-owner, .voucher-owner-col) {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-status, .voucher-status-col) {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-col-action, .voucher-action-col) {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
}

body[data-shell="app"] .voucher-compact-table :where(.data-main, .compact-main, .voucher-due-pill, .voucher-status-pill, .customer-sort-link) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-status-pill, .voucher-due-pill) {
  min-height: 18px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  gap: 3px !important;
}

body[data-shell="app"] .voucher-compact-table .voucher-status-pill::before {
  width: 5px !important;
  height: 5px !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.customer-list-pagination-top, .table-head .rk-table-pagination, .table-head .table-pagination, .rk-table-head .rk-table-pagination, .rk-table-head .table-pagination) {
  display: none !important;
}

@media (max-width: 720px) {
  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter, .rk-inline-filter),
  body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.toolbar-search, .rk-toolbar-search, .toolbar-search-form) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}
/* END ui-v1.6.683 unified customer voucher table contract */

/* BEGIN ui-v1.6.684 unified filter and sortable headers */
body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter, .rk-inline-filter) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter label, .rk-inline-filter label) {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter select, .rk-inline-filter select) {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.rk-table, .customer-report-table, .voucher-compact-table) thead th {
  overflow: hidden !important;
  text-overflow: clip !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.customer-sort-link) {
  display: inline-grid !important;
  grid-template-columns: minmax(0, 1fr) 14px !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 3px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.customer-sort-link .sort-mark, .customer-sort-link .table-sort-indicator) {
  grid-column: 2 !important;
  flex: 0 0 13px !important;
  width: 13px !important;
  min-width: 13px !important;
  max-width: 13px !important;
  margin-left: 0 !important;
  justify-self: end !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.customer-status-head) {
  grid-template-columns: minmax(0, 1fr) 14px !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.customer-status-head > span:first-child) {
  grid-column: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-shell="app"] .voucher-compact-table :where(.voucher-status-pill, .voucher-due-pill),
body[data-shell="app"] .customer-report-table :where(.badge, .badge-mini, .customer-status-badge) {
  max-width: 100% !important;
}
/* END ui-v1.6.684 unified filter and sortable headers */

/* BEGIN ui-v1.6.685 strict toolbar and sort arrow lock */
body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.action-dropdown-trigger, .rk-dropdown-trigger) {
  width: 228px !important;
  min-width: 228px !important;
  max-width: 228px !important;
  justify-content: space-between !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter, .rk-inline-filter) {
  flex: 0 0 274px !important;
  width: 274px !important;
  min-width: 274px !important;
  max-width: 274px !important;
  margin-left: 12px !important;
  gap: 12px !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter label, .rk-inline-filter label) {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  text-align: left !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter select, .rk-inline-filter select) {
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.customer-sort-link) {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-right: 17px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.customer-sort-link > span:not(.sort-mark)) {
  display: inline !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(.customer-sort-link .sort-mark, .customer-sort-link .table-sort-indicator) {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 13px !important;
  min-width: 13px !important;
  max-width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(th.ppp-status-col .customer-sort-link) {
  padding-right: 17px !important;
  text-align: left !important;
}

body[data-shell="app"] :where(.customer-list-card, .voucher-list-card) :where(th.ppp-status-col .customer-sort-link > span:first-child) {
  display: inline !important;
}

@media (max-width: 720px) {
  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.action-dropdown-trigger, .rk-dropdown-trigger) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-basis: auto !important;
  }

  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter, .rk-inline-filter) {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    gap: 10px !important;
  }

  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter label, .rk-inline-filter label) {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter select, .rk-inline-filter select) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
}
/* END ui-v1.6.685 strict toolbar and sort arrow lock */

/* BEGIN ui-v1.6.687 filter POP caret matches management */
body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-select-shell) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-select-shell select) {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
  padding-right: 34px !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-select-caret) {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

@media (max-width: 720px) {
  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-select-shell) {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
/* END ui-v1.6.687 filter POP caret matches management */

/* BEGIN ui-v1.6.688 filter POP button parity */
body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter, .rk-inline-filter) {
  align-items: center !important;
  gap: 8px !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-select-shell) {
  flex: 0 0 228px !important;
  width: 228px !important;
  min-width: 228px !important;
  max-width: 228px !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-select-shell select) {
  min-height: 36px !important;
  height: 36px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  padding: 7px 34px 7px 12px !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-select-shell select:hover, .rk-select-shell select:focus) {
  background: var(--primary-faint) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border)) !important;
  box-shadow: var(--shadow-sm) !important;
  outline: none !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-select-caret) {
  color: var(--muted) !important;
}

@media (max-width: 720px) {
  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.toolbar-actions, .rk-toolbar-actions) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.action-dropdown) {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.action-dropdown-trigger, .rk-dropdown-trigger) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
  }

  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter, .rk-inline-filter) {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    gap: 8px !important;
  }

  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-select-shell) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 420px) {
  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.toolbar-actions, .rk-toolbar-actions) {
    grid-template-columns: 1fr !important;
  }
}
/* END ui-v1.6.688 filter POP button parity */

/* BEGIN ui-v1.6.689 filter POP uses management button */
body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter, .rk-inline-filter) {
  display: inline-flex !important;
  flex: 0 0 228px !important;
  width: 228px !important;
  min-width: 228px !important;
  max-width: 228px !important;
  margin-left: 12px !important;
  gap: 0 !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-pop-filter-dropdown) {
  width: 100% !important;
  min-width: 0 !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-pop-filter-dropdown .action-dropdown-trigger) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-filter-current) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: inherit !important;
}

body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.rk-pop-filter-dropdown .rk-dropdown-menu) {
  min-width: 228px !important;
}

@media (max-width: 720px) {
  body[data-shell="app"] :where(.customer-list-toolbar, .voucher-page-head) :where(.center-pop-inline-filter, .rk-inline-filter) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
  }
}
/* END ui-v1.6.689 filter POP uses management button */

/* ui-v1.6.691 - WA conversation modal and unread incoming messages */
.app-log-wa-table tbody tr.is-unread td {
  background: rgba(37, 99, 235, 0.06);
  font-weight: 650;
}

.wa-conversation-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.wa-conversation-meta > div {
  border: 1px solid var(--border-color, #d9e2ef);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card-soft, #f8fbff);
}

.wa-conversation-meta span,
.wa-conversation-meta strong {
  display: block;
}

.wa-conversation-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border-color, #d9e2ef);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.08);
}

.wa-conversation-message {
  display: flex;
}

.wa-conversation-message.is-outbound {
  justify-content: flex-end;
}

.wa-conversation-bubble {
  width: min(78%, 560px);
  border: 1px solid var(--border-color, #d9e2ef);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.wa-conversation-message.is-outbound .wa-conversation-bubble {
  background: #eaf2ff;
  border-color: #bfdbfe;
}

.wa-conversation-bubble p {
  margin: 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.wa-conversation-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
}

.wa-conversation-foot {
  border-top: 1px solid rgba(148, 163, 184, 0.24);
  padding-top: 6px;
}

.wa-conversation-reply-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.wa-conversation-reply-form textarea {
  width: 100%;
  resize: vertical;
}

.wa-conversation-notice,
.wa-conversation-inline-error {
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13px;
}

.wa-conversation-notice {
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

.wa-conversation-inline-error {
  border: 1px solid rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}

@media (max-width: 640px) {
  .wa-conversation-meta {
    grid-template-columns: 1fr;
  }

  .wa-conversation-bubble {
    width: 92%;
  }
}

.portal-ticket-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.portal-ticket-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 86px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--surface-line, var(--border));
  border-radius: 16px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface-soft) 78%, transparent));
  box-shadow: var(--shadow-sm);
}

.portal-ticket-stat::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -50px;
  z-index: -1;
  width: 124px;
  height: 124px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ticket-accent, var(--primary)) 15%, transparent);
}

.portal-ticket-stat:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ticket-accent, var(--primary)) 28%, var(--border));
  box-shadow: var(--shadow-soft);
}

.portal-ticket-stat .summary-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--ticket-accent, var(--primary));
  background: color-mix(in srgb, var(--ticket-accent, var(--primary)) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ticket-accent, var(--primary)) 24%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.portal-ticket-stat .summary-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-ticket-stat p,
.portal-ticket-stat strong {
  margin: 0;
}

.portal-ticket-stat p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.portal-ticket-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
}

.portal-ticket-stat.is-open { --ticket-accent: #f97316; }
.portal-ticket-stat.is-progress { --ticket-accent: #2563eb; }
.portal-ticket-stat.is-waiting { --ticket-accent: #a855f7; }
.portal-ticket-stat.is-closed { --ticket-accent: #16a34a; }
.portal-ticket-stat.is-total { --ticket-accent: #0f766e; }

.portal-ticket-inbox-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow: visible;
}

.portal-ticket-inbox-card.has-live-ticket-update {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent), var(--shadow-soft);
}

.portal-ticket-inbox-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 380px);
  align-items: center;
  gap: 12px;
  padding: 0;
  border-bottom: 0;
}

.portal-ticket-tabs {
  margin: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
}

.portal-ticket-tabs .panel-tab {
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.portal-ticket-search-form {
  min-width: 0;
}

.portal-ticket-search-form input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
}

.portal-ticket-inbox-layout {
  display: grid;
  grid-template-columns: minmax(430px, 1fr) minmax(280px, .42fr);
  min-height: 430px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.portal-ticket-list {
  display: block;
  align-content: start;
  max-height: calc(100vh - 355px);
  min-height: 430px;
  overflow: auto;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-soft) 38%, transparent));
}

.portal-ticket-thread {
  appearance: none;
  -webkit-appearance: none;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 13px 14px;
  font: inherit;
  cursor: pointer;
  box-shadow: none !important;
}

.portal-ticket-thread:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.portal-ticket-thread.is-unread {
  box-shadow: inset 3px 0 0 var(--primary) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 55%);
}

.portal-ticket-new-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #ef4444 13%, var(--surface));
  border: 1px solid color-mix(in srgb, #ef4444 30%, var(--border));
  color: #b91c1c;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.portal-ticket-new-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.portal-ticket-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(14, 165, 233, 0.12));
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: var(--primary);
  font-weight: 800;
  text-transform: uppercase;
}

.portal-ticket-avatar.large {
  width: 54px;
  height: 54px;
  border-radius: 18px;
}

.portal-ticket-thread-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.portal-ticket-thread-top,
.portal-ticket-thread-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-ticket-thread-top strong,
.portal-ticket-thread-sub,
.portal-ticket-thread-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-ticket-thread-top strong {
  font-size: 14px;
  font-weight: 800;
}

.portal-ticket-thread-top time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.portal-ticket-thread-sub {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.portal-ticket-thread-sub b {
  color: var(--primary);
}

.portal-ticket-thread-msg {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.portal-ticket-thread-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.portal-ticket-preview {
  padding: 18px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.9), rgba(239, 246, 255, 0.45));
}

.portal-ticket-preview-card {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.portal-ticket-preview-card.is-empty {
  min-height: 190px;
  align-content: center;
}
.portal-ticket-preview-card p {
  margin: 0;
}

.portal-ticket-footer {
  border-top: 1px solid var(--border);
}

.portal-ticket-length {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portal-ticket-modal-card {
  width: min(1060px, calc(100vw - 28px));
}

.portal-ticket-modal-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.32fr) minmax(0, 0.68fr);
  gap: 8px;
}

.portal-ticket-customer-box {
  display: grid;
  gap: 5px;
}

.portal-ticket-detail-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.36fr) minmax(0, 0.64fr);
  align-items: start;
  gap: 8px;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 4px;
  font-size: 11px;
  line-height: 1.25;
}

.portal-ticket-detail-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.portal-ticket-detail-row span {
  color: var(--muted);
}

.portal-ticket-detail-row strong {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.portal-ticket-chat-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  padding: 0 2px;
}

.portal-ticket-chat-head strong {
  font-size: 13px;
  font-weight: 850;
  color: var(--text);
}

.portal-ticket-chat-head span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  text-align: right;
}

.portal-ticket-chat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: min(360px, 46vh);
  max-height: min(640px, 66vh);
  margin: 0 0 12px;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 84%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)),
    var(--surface);
}

.portal-ticket-chat-item {
  width: fit-content;
  min-width: min(260px, 100%);
  max-width: min(86%, 680px);
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.portal-ticket-chat-item.is-operator {
  align-self: flex-end;
  margin-left: auto;
  border-color: rgba(37, 99, 235, 0.24);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.portal-ticket-chat-item.is-customer {
  align-self: flex-start;
  margin-right: auto;
  background: var(--surface);
}

.portal-ticket-chat-item > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
}

.portal-ticket-chat-item strong {
  min-width: 0;
  color: var(--text);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-ticket-chat-item span {
  white-space: nowrap;
}

.portal-ticket-chat-item p {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.portal-ticket-empty {
  margin: 16px;
}

.portal-ticket-card .panel-tabs {
  margin: 0 0 12px;
}

.ticket-message-box {
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 8px 10px;
  background: var(--surface-soft);
  margin-bottom: 6px;
  font-size: 11.5px;
  line-height: 1.35;
}

.ticket-message-box p {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: pre-wrap;
}

.ticket-history-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  margin-bottom: 12px;
  padding-right: 4px;
}

.ticket-history-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--surface);
}

.ticket-history-item > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.ticket-history-item strong {
  color: var(--text);
}

.ticket-history-item p {
  margin: 6px 0 0;
  white-space: pre-wrap;
}

.ticket-history-list.portal-ticket-chat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: min(360px, 46vh);
  max-height: min(640px, 66vh);
  margin: 0 0 12px;
  padding: 14px;
  overflow: auto;
}

.ticket-history-item.portal-ticket-chat-item {
  width: fit-content;
  min-width: min(260px, 100%);
  max-width: min(86%, 680px);
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 12px 14px;
}

.ticket-history-item.portal-ticket-chat-item.is-operator {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
}

.ticket-history-item.portal-ticket-chat-item.is-customer {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}

.ticket-history-item.portal-ticket-chat-item > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  font-size: 11.5px;
  line-height: 1.3;
}

.ticket-history-item.portal-ticket-chat-item p {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 760px) {
  .portal-ticket-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-ticket-inbox-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .portal-ticket-search-form {
    flex-basis: auto;
  }

  .portal-ticket-inbox-layout {
    grid-template-columns: 1fr;
  }

  .portal-ticket-list {
    max-height: none;
    min-height: 0;
    border-right: 0;
  }

  .portal-ticket-thread {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .portal-ticket-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .portal-ticket-preview {
    display: none;
  }

  .portal-ticket-modal-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .portal-ticket-chat-item {
    max-width: 96%;
    min-width: min(220px, 100%);
  }

  .ticket-history-item.portal-ticket-chat-item {
    max-width: 96%;
    min-width: min(220px, 100%);
  }

  .portal-ticket-chat-head {
    display: grid;
    gap: 3px;
  }

  .portal-ticket-chat-head span {
    text-align: left;
  }

  .portal-ticket-detail-row {
    grid-template-columns: minmax(84px, 0.36fr) minmax(0, 0.64fr);
  }
}

.import-validation-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 12px;
  background: rgba(254, 242, 242, 0.75);
  padding: 12px;
}

.import-validation-title {
  color: #b91c1c;
  font-weight: 700;
}

.import-validation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.import-validation-summary span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
}

.import-validation-table-wrap {
  max-height: 260px;
  overflow: auto;
}

.import-validation-table th,
.import-validation-table td {
  font-size: 12px;
  white-space: nowrap;
}

/* Router management dropdown must float above the summary/table cards. */
body[data-shell="app"] .router-page-head.rk-card {
  position: relative !important;
  overflow: visible !important;
  z-index: 20 !important;
}

body[data-shell="app"] .router-page-head :where(.router-page-toolbar, .toolbar-actions, .rk-toolbar-actions, .action-dropdown) {
  position: relative !important;
  overflow: visible !important;
  z-index: 21 !important;
}

body[data-shell="app"] .router-page-head details.action-dropdown[open] > :where(.action-dropdown-menu, .rk-dropdown-menu) {
  display: grid !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 260px !important;
  max-width: min(92vw, 360px) !important;
  max-height: min(70vh, 520px) !important;
  overflow: auto !important;
  z-index: 22 !important;
}

body[data-shell="app"] .router-summary-grid,
body[data-shell="app"] .router-time-card,
body[data-shell="app"] .router-compact-card {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 860px) {
  body[data-shell="app"].sidebar-mobile-open .router-page-head.rk-card,
  body[data-shell="app"].sidebar-mobile-open .router-page-head :where(.router-page-toolbar, .toolbar-actions, .rk-toolbar-actions, .action-dropdown),
  body[data-shell="app"].sidebar-mobile-open .router-page-head details.action-dropdown[open] > :where(.action-dropdown-menu, .rk-dropdown-menu),
  body[data-shell="app"].sidebar-mobile-open :where(.router-summary-grid, .router-time-card, .router-compact-card) {
    z-index: 0 !important;
  }

  body[data-shell="app"].sidebar-mobile-open .workspace,
  body[data-shell="app"].sidebar-mobile-open .page-body,
  body[data-shell="app"].sidebar-mobile-open .topbar {
    position: relative !important;
    z-index: 0 !important;
  }

  body[data-shell="app"].sidebar-mobile-open .sidebar {
    z-index: 12000 !important;
    background: var(--surface) !important;
  }

  body[data-shell="app"].sidebar-mobile-open .sidebar-overlay {
    z-index: 11990 !important;
  }
}

/* BEGIN ui-v1.6.417 operational refresh */
body[data-shell="app"] {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent 34%),
    var(--bg);
}

body[data-shell="app"] .sidebar {
  border-right: 1px solid var(--border);
  box-shadow: 10px 0 28px -24px rgba(15, 23, 42, 0.34);
}

body[data-shell="app"] .topbar {
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px -24px rgba(15, 23, 42, 0.42);
}

body[data-shell="app"] :where(.nav-item, .nav-sub) {
  border-radius: 7px;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body[data-shell="app"] :where(.nav-item, .nav-sub):is(:hover, :focus-visible) {
  background: var(--primary-faint);
  color: var(--text);
}

body[data-shell="app"] :where(.nav-item, .nav-sub).active {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}

body[data-shell="app"] :where(.card, .rk-card, .dashboard-panel, .toolbar, .rk-toolbar, .system-hero) {
  border-color: var(--border);
  box-shadow: 0 14px 30px -28px rgba(15, 23, 42, 0.5);
}

body[data-shell="app"] :where(.card, .rk-card, .dashboard-panel) {
  border-radius: 8px;
}

body[data-shell="app"] :where(.toolbar, .rk-toolbar) {
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

body[data-shell="app"] :where(.rk-summary-card, .overview-tile, .customer-summary-card, .finance-report-kpi, .mini-strip) {
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 24px -26px rgba(15, 23, 42, 0.56);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-shell="app"] :where(a.rk-summary-card, a.overview-tile, a.customer-summary-card, a.finance-report-kpi):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  box-shadow: 0 18px 30px -26px color-mix(in srgb, var(--primary) 38%, transparent);
  transform: translateY(-1px);
}

body[data-shell="app"] :where(.btn, .rk-action-btn, .icon-btn, .action-dropdown-trigger) {
  border-radius: 7px;
  font-weight: 700;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-shell="app"] :where(.btn, .rk-action-btn, .icon-btn, .action-dropdown-trigger):is(:hover, :focus-visible) {
  transform: translateY(-1px);
}

body[data-shell="app"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

body[data-shell="app"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) thead th {
  background: var(--table-head-bg);
  border-bottom-color: var(--border-strong);
}

body[data-shell="app"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) tbody tr {
  transition: background-color 140ms ease;
}

body[data-shell="app"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) tbody tr:hover {
  background: var(--table-row-hover);
}

body[data-shell="app"] :where(.modal-card, .rk-modal-card) {
  border: 1px solid var(--modal-border);
  border-radius: 8px;
  box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.56);
}

body[data-shell="app"] :where(.dropdown-menu, .action-dropdown-menu, .rk-dropdown-menu, .profile-balance-menu, .ppp-info-popover) {
  border-radius: 8px;
  box-shadow: 0 18px 38px -24px rgba(15, 23, 42, 0.48);
}

@media (max-width: 860px) {
  body[data-shell="app"] .page-body {
    padding: 10px;
  }

  body[data-shell="app"] :where(.card, .rk-card, .dashboard-panel, .toolbar, .rk-toolbar, .modal-card, .rk-modal-card) {
    border-radius: 8px;
  }

  body[data-shell="app"] :where(.btn, .rk-action-btn, .icon-btn, .action-dropdown-trigger):is(:hover, :focus-visible) {
    transform: none;
  }
}
/* END ui-v1.6.417 operational refresh */

/* BEGIN ui-v1.6.744 concise interface copy */
body[data-shell="auth"] .auth-grid {
  width: min(440px, 100%);
  grid-template-columns: minmax(0, 1fr);
}

body[data-shell="auth"] .auth-panel {
  width: 100%;
}

/* The required attribute keeps browser validation without repeating it in every label. */
.required-mark,
.field:has(:is(input, select, textarea)[required]) > label:not(:has(.required-mark))::before,
.customer-filter-field:has(:is(input, select, textarea)[required]) > label:not(:has(.required-mark))::before,
.settings-form-section:has(:is(input, select, textarea)[required]) > label:not(:has(.required-mark))::before,
.field:has(:is(input, select, textarea)[required]) > label:not(:has(.required-mark))::after,
.customer-filter-field:has(:is(input, select, textarea)[required]) > label:not(:has(.required-mark))::after,
.settings-form-section:has(:is(input, select, textarea)[required]) > label:not(:has(.required-mark))::after,
.field > label:has(.required-mark)::after,
.customer-filter-field > label:has(.required-mark)::after,
.settings-form-section > label:has(.required-mark)::after {
  content: none !important;
  display: none !important;
}
/* END ui-v1.6.744 concise interface copy */

/* BEGIN ui-v1.6.745 branded POP sign-in */
body[data-shell="auth"] {
  background-color: #e8f1f3;
  background-image:
    linear-gradient(rgba(13, 82, 91, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 82, 91, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

body[data-shell="auth"] .auth-shell {
  position: relative;
  isolation: isolate;
}

body[data-shell="auth"] .auth-grid {
  width: min(920px, 100%) !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr) !important;
  gap: 0 !important;
  min-height: 510px;
  overflow: hidden;
  border: 1px solid rgba(13, 82, 91, 0.16);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 28px 60px -34px rgba(8, 55, 62, 0.42);
}

body[data-shell="auth"] .auth-copy {
  position: relative;
  display: flex !important;
  min-height: 510px;
  padding: 34px !important;
  overflow: hidden;
  color: #effcfb;
  background: #0d525b;
}

body[data-shell="auth"] .auth-copy::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(120deg, transparent 0 48%, rgba(94, 234, 212, 0.12) 48% 48.4%, transparent 48.4%),
    linear-gradient(25deg, transparent 0 62%, rgba(94, 234, 212, 0.1) 62% 62.4%, transparent 62.4%);
  pointer-events: none;
}

body[data-shell="auth"] .auth-wordmark,
body[data-shell="auth"] .auth-copy-main,
body[data-shell="auth"] .auth-network-map {
  position: relative;
  z-index: 1;
}

body[data-shell="auth"] .auth-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  letter-spacing: 0;
}

body[data-shell="auth"] .auth-wordmark-mark,
body[data-shell="auth"] .auth-login-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

body[data-shell="auth"] .auth-copy-main {
  margin: auto 0;
}

body[data-shell="auth"] .auth-kicker {
  display: block;
  margin-bottom: 12px;
  color: #94f2e0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

body[data-shell="auth"] .auth-copy h1 {
  max-width: 9ch;
  color: #f4fffe;
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.98;
}

body[data-shell="auth"] .auth-copy p {
  max-width: 28ch;
  color: rgba(239, 252, 251, 0.72);
  font-size: 14px;
  line-height: 1.5;
}

body[data-shell="auth"] .auth-network-map {
  width: 180px;
  height: 96px;
  margin-top: auto;
}

body[data-shell="auth"] .auth-network-line,
body[data-shell="auth"] .auth-network-node {
  position: absolute;
  display: block;
}

body[data-shell="auth"] .auth-network-line {
  height: 1px;
  transform-origin: left center;
  background: rgba(148, 242, 224, 0.5);
}

body[data-shell="auth"] .auth-network-line-a { width: 126px; top: 30px; left: 18px; transform: rotate(24deg); }
body[data-shell="auth"] .auth-network-line-b { width: 110px; top: 65px; left: 66px; transform: rotate(-31deg); }
body[data-shell="auth"] .auth-network-node { width: 10px; height: 10px; border: 2px solid #94f2e0; border-radius: 50%; background: #0d525b; box-shadow: 0 0 0 5px rgba(148, 242, 224, 0.08); }
body[data-shell="auth"] .auth-network-node-a { top: 20px; left: 12px; }
body[data-shell="auth"] .auth-network-node-b { top: 72px; left: 58px; }
body[data-shell="auth"] .auth-network-node-c { top: 68px; right: 8px; }
body[data-shell="auth"] .auth-network-node-d { top: 8px; right: 30px; }

body[data-shell="auth"] .auth-panel {
  width: auto;
  padding: 34px;
  background: rgba(255, 255, 255, 0.9);
}

body[data-shell="auth"] .auth-card {
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-shell="auth"] .auth-login-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-shell="auth"] .auth-login-mark {
  color: #0d525b;
  border-color: rgba(13, 82, 91, 0.2);
  background: #dff6f1;
}

body[data-shell="auth"] .auth-card .eyebrow {
  margin: 0 0 2px;
  color: #477177;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

body[data-shell="auth"] .auth-card .card-title {
  font-size: 27px !important;
  letter-spacing: 0 !important;
}

body[data-shell="auth"] .auth-login-form {
  gap: 15px;
  margin-top: 34px !important;
}

body[data-shell="auth"] .auth-login-form input {
  min-height: 44px !important;
  border-radius: 7px !important;
  border-color: rgba(13, 82, 91, 0.28) !important;
}

body[data-shell="auth"] .auth-login-form .btn {
  min-height: 44px !important;
  margin-top: 6px;
  border-radius: 7px !important;
  background: #0d525b;
  box-shadow: 0 12px 18px -14px rgba(8, 55, 62, 0.72);
}

body[data-shell="auth"] .auth-login-form .btn:is(:hover, :focus-visible) {
  background: #09616a;
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  body[data-shell="auth"] .auth-shell { padding: 18px !important; }
  body[data-shell="auth"] .auth-grid { width: min(440px, 100%) !important; min-height: 0; grid-template-columns: 1fr !important; }
  body[data-shell="auth"] .auth-copy { display: none !important; }
  body[data-shell="auth"] .auth-panel { padding: 28px 24px; }
}

@media (max-width: 420px) {
  body[data-shell="auth"] .auth-shell { padding: 12px !important; }
  body[data-shell="auth"] .auth-panel { padding: 24px 18px; }
}
/* END ui-v1.6.745 branded POP sign-in */

/* BEGIN ui-v1.6.747 login form panel depth */
body[data-shell="auth"] .auth-panel {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #fbfefd;
  background-image:
    linear-gradient(rgba(13, 82, 91, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 82, 91, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
}

body[data-shell="auth"] .auth-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 7px;
  content: "";
  background: #0d525b;
}

body[data-shell="auth"] .auth-card {
  position: relative;
  z-index: 1;
}

body[data-shell="auth"] .auth-login-head {
  padding: 14px;
  border: 1px solid rgba(13, 82, 91, 0.13);
  border-radius: 8px;
  background: rgba(240, 250, 248, 0.92);
  box-shadow: 0 12px 24px -24px rgba(8, 55, 62, 0.7);
}

body[data-shell="auth"] .auth-login-mark {
  width: 42px;
  height: 42px;
  box-shadow: inset 0 0 0 4px rgba(13, 82, 91, 0.035);
}

body[data-shell="auth"] .auth-login-form {
  padding: 20px 0 4px;
  border-bottom: 1px solid rgba(13, 82, 91, 0.13);
}

body[data-shell="auth"] .auth-login-form .field {
  gap: 7px !important;
}

body[data-shell="auth"] .auth-login-form label {
  color: #315b60;
  font-size: 12px !important;
  letter-spacing: 0.02em;
}

body[data-shell="auth"] .auth-login-form input {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(13, 82, 91, 0.04);
}

body[data-shell="auth"] .auth-login-form input:focus {
  border-color: #0d737d !important;
  box-shadow: 0 0 0 3px rgba(13, 115, 125, 0.16) !important;
}

body[data-shell="auth"] .auth-login-form .btn {
  background: #0d525b !important;
}

body[data-shell="auth"] .auth-login-form .btn:is(:hover, :focus-visible) {
  background: #09616a !important;
}

@media (max-width: 720px) {
  body[data-shell="auth"] .auth-grid {
    min-height: min(620px, calc(100dvh - 36px));
  }

  body[data-shell="auth"] .auth-panel {
    min-height: min(620px, calc(100dvh - 36px));
    align-items: flex-start;
    padding-top: 86px;
  }

  body[data-shell="auth"] .auth-panel::before {
    top: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 56px;
  }

  body[data-shell="auth"] .auth-login-form {
    padding-top: 24px;
  }
}
/* END ui-v1.6.747 login form panel depth */

/* BEGIN ui-v1.6.748 operational dashboard hierarchy */
body[data-shell="app"] .dash-overview-grid {
  gap: 10px;
}

body[data-shell="app"] .dash-overview-grid .overview-tile {
  min-height: 96px;
  padding: 15px;
  border-radius: 8px;
  background: var(--surface);
}

body[data-shell="app"] .dash-overview-grid .overview-tile::after {
  width: 86px;
  height: 86px;
  inset: auto -16px -38px auto;
  opacity: 0.72;
}

body[data-shell="app"] .dash-overview-grid .overview-number {
  margin-top: 6px;
  font-size: 22px !important;
}

body[data-shell="app"] .dash-overview-grid .overview-glyph {
  top: 14px;
  right: 14px;
}

body[data-shell="app"] .dash-overview-grid .overview-link {
  right: 13px;
  bottom: 12px;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: 7px;
  background: var(--surface);
  color: var(--primary);
}

body[data-shell="app"] .dash-overview-grid .overview-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

body[data-shell="app"] .mini-strip-grid-host {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body[data-shell="app"] .mini-strip-grid-host .mini-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 68px;
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--surface);
}

body[data-shell="app"] .mini-strip-grid-host .mini-strip-label {
  display: contents;
}

body[data-shell="app"] .mini-strip-grid-host .dash-icon {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  margin-right: 9px;
}

body[data-shell="app"] .mini-strip-grid-host .mini-strip-label > span:last-child {
  align-self: end;
  font-size: 10px !important;
  letter-spacing: 0.05em;
}

body[data-shell="app"] .mini-strip-grid-host .mini-strip strong {
  align-self: start;
  overflow: hidden;
  font-size: 14px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-shell="app"] .dashboard-legacy-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}

body[data-shell="app"] .legacy-summary-item {
  min-height: 84px;
  padding: 11px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

body[data-shell="app"] .legacy-summary-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 7px;
}

body[data-shell="app"] .legacy-summary-value {
  font-size: 20px !important;
}

body[data-shell="app"] .dashboard-panel-right {
  align-self: start;
}

body[data-shell="app"] .dashboard-panel-right .panel-header-simple {
  padding: 14px 14px 8px;
}

body[data-shell="app"] .dashboard-panel-right .status-list {
  padding: 0 10px 10px;
}

body[data-shell="app"] .dashboard-panel-right .status-row {
  min-height: 54px;
  border-radius: 8px;
  background: var(--surface-soft);
}

@media (min-width: 1181px) {
  body[data-shell="app"] .dashboard-main-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.7fr) !important;
  }
}

@media (max-width: 980px) {
  body[data-shell="app"] .mini-strip-grid-host,
  body[data-shell="app"] .dashboard-legacy-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body[data-shell="app"] .dash-overview-grid {
    gap: 8px;
  }

  body[data-shell="app"] .dash-overview-grid .overview-tile {
    min-height: 82px;
    padding: 11px;
  }

  body[data-shell="app"] .mini-strip-grid-host,
  body[data-shell="app"] .dashboard-legacy-summary-grid {
    grid-template-columns: 1fr;
  }
}
/* END ui-v1.6.748 operational dashboard hierarchy */

/* BEGIN ui-v1.6.749 dashboard connected tabs and type */
body[data-shell="app"] .dashboard-main-grid {
  font-family: var(--rk-font-ui);
}

body[data-shell="app"] .dashboard-panel-left {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-shell="app"] .dashboard-panel-left .panel-tabs {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

body[data-shell="app"] .dashboard-panel-left .panel-tab {
  position: relative;
  min-height: 43px;
  margin: 0 0 -1px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600 !important;
}

body[data-shell="app"] .dashboard-panel-left .panel-tab:is(:hover, :focus-visible) {
  color: var(--text);
  background: var(--primary-faint);
}

body[data-shell="app"] .dashboard-panel-left .panel-tab.is-active,
body[data-shell="app"] .dashboard-panel-left .panel-tab[aria-selected="true"] {
  z-index: 1;
  border-color: var(--border);
  border-bottom-color: var(--surface);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 -8px 18px -20px rgba(15, 23, 42, 0.55);
}

body[data-shell="app"] .dashboard-panel-left .dashboard-tab-panel {
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--surface);
  box-shadow: 0 16px 28px -30px rgba(15, 23, 42, 0.62);
}

body[data-shell="app"] .dashboard-panel-left :where(.overview-kicker, .mini-strip-label, .legacy-summary-title, .legacy-summary-note, .panel-tab) {
  font-weight: 600 !important;
}

body[data-shell="app"] .dashboard-panel-left :where(.overview-number, .mini-strip strong, .legacy-summary-value) {
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

body[data-shell="app"] .dashboard-panel-right :where(.panel-title, .status-label, .status-right strong) {
  font-weight: 600 !important;
}

body[data-shell="app"] .dash-overview-grid .overview-link {
  display: none !important;
}

@media (max-width: 560px) {
  body[data-shell="app"] .dashboard-panel-left .panel-tabs {
    padding: 0 6px;
  }

  body[data-shell="app"] .dashboard-panel-left .panel-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 7px;
    justify-content: center;
    font-size: 12px !important;
  }

  body[data-shell="app"] .dashboard-panel-left .panel-tab .dash-icon {
    display: none;
  }
}
/* END ui-v1.6.749 dashboard connected tabs and type */

/* BEGIN ui-v1.6.750 dashboard tab connection correction */
html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tabs {
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tab {
  min-height: 43px !important;
  margin: 0 0 -1px !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-bottom-color: var(--border) !important;
  border-radius: 8px 8px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
}

html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tab:is(:hover, :focus-visible) {
  background: var(--primary-faint) !important;
  color: var(--text) !important;
}

html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tab.is-active,
html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tab[aria-selected="true"] {
  z-index: 1;
  border-color: var(--border) !important;
  border-bottom-color: var(--surface) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html[data-theme] body[data-shell="app"] .dashboard-panel-left .dashboard-tab-panel {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  background: var(--surface) !important;
  box-shadow: 0 16px 28px -30px rgba(15, 23, 42, 0.62) !important;
}

html[data-theme] body[data-shell="app"] .dashboard-panel-left :where(.overview-number, .mini-strip strong, .legacy-summary-value) {
  font-weight: 600 !important;
}

@media (max-width: 560px) {
  html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tabs {
    padding: 0 6px !important;
  }

  html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 7px !important;
    justify-content: center;
    font-size: 12px !important;
  }
}
/* END ui-v1.6.750 dashboard tab connection correction */

/* BEGIN ui-v1.6.751 dashboard tab icon correction */
html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tab .dash-icon {
  width: 26px;
  height: 26px;
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border)) !important;
  background: var(--primary-faint) !important;
  color: var(--primary) !important;
}

html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tab .dash-icon svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tab.is-active .dash-icon,
html[data-theme] body[data-shell="app"] .dashboard-panel-left .panel-tab[aria-selected="true"] .dash-icon {
  background: var(--primary-soft) !important;
  color: var(--primary-strong) !important;
}
/* END ui-v1.6.751 dashboard tab icon correction */

/* BEGIN ui-v1.6.752 dashboard activity and traffic controls */
body[data-shell="app"] .activity-feed {
  padding: 12px;
  gap: 9px;
}

body[data-shell="app"] .activity-item {
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 20px -24px rgba(15, 23, 42, 0.55);
}

body[data-shell="app"] .activity-time {
  color: var(--muted);
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

body[data-shell="app"] .activity-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--text);
}

body[data-shell="app"] .activity-action {
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

body[data-shell="app"] .activity-actor {
  font-weight: 600 !important;
}

body[data-shell="app"] .activity-desc {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.45;
}

body[data-shell="app"] .activity-meta {
  gap: 5px;
  font-size: 10.5px !important;
}

body[data-shell="app"] .activity-meta span {
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--surface-soft);
}

body[data-shell="app"] .traffic-focus-panel {
  padding: 12px;
}

body[data-shell="app"] .traffic-compact-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

body[data-shell="app"] .traffic-focus-controls {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(260px, 1.45fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 12px;
}

body[data-shell="app"] .traffic-select-wrap {
  min-width: 0;
}

body[data-shell="app"] .traffic-select-wrap > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

body[data-shell="app"] .traffic-select-wrap select {
  min-height: 38px;
  border-radius: 7px;
}

body[data-shell="app"] .traffic-lock-control {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
  font-size: 12px;
}

body[data-shell="app"] .traffic-chart-card {
  margin-top: 12px;
  border-radius: 8px;
  box-shadow: none;
}

@media (max-width: 760px) {
  body[data-shell="app"] .traffic-focus-controls {
    grid-template-columns: 1fr;
  }

  body[data-shell="app"] .traffic-lock-control {
    justify-self: start;
  }
}
/* END ui-v1.6.752 dashboard activity and traffic controls */

/* BEGIN ui-v1.6.753 dashboard service surface and regular type */
html[data-theme] body[data-shell="app"] .dashboard-panel-right {
  align-self: start;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] body[data-shell="app"] .dashboard-panel-right .panel-header-simple {
  display: flex;
  align-items: center;
  min-height: 43px;
  margin: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: transparent !important;
}

html[data-theme] body[data-shell="app"] .dashboard-panel-right .status-list {
  padding: 10px 0 0;
}

html[data-theme] body[data-shell="app"] .dashboard-panel-right .status-row {
  border: 1px solid var(--border);
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] body[data-shell="app"] .dash-overview-grid :where(*),
html[data-theme] body[data-shell="app"] .mini-strip-grid-host :where(*),
html[data-theme] body[data-shell="app"] .dashboard-main-grid .dashboard-panel-left :where(*),
html[data-theme] body[data-shell="app"] .dashboard-main-grid .dashboard-panel-right :where(*) {
  font-weight: 400 !important;
}
/* END ui-v1.6.753 dashboard service surface and regular type */

/* BEGIN ui-v1.6.755 cohesive application shell */
html[data-theme] body[data-shell="app"] :is(.topbar, .sidebar) {
  font-family: var(--rk-font-ui);
}

html[data-theme] body[data-shell="app"] .topbar {
  background: color-mix(in srgb, var(--topbar-bg) 88%, var(--bg) 12%);
}

html[data-theme] body[data-shell="app"] .topbar .breadcrumb,
html[data-theme] body[data-shell="app"] .topbar .page-title,
html[data-theme] body[data-shell="app"] .topbar .profile-copy strong,
html[data-theme] body[data-shell="app"] .topbar .profile-copy small {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .topbar .page-title {
  font-size: 17px !important;
}

html[data-theme] body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
  border-radius: 8px !important;
  color: var(--primary-strong) !important;
  background: var(--primary-faint) !important;
  box-shadow: none !important;
}

html[data-theme] body[data-shell="app"] .topbar-toggle#sidebar-toggle:is(:hover, :focus-visible) {
  color: var(--primary-strong) !important;
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border)) !important;
}

html[data-theme] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-svg {
  width: 20px !important;
  height: 20px !important;
}

html[data-theme] body[data-shell="app"] .topbar-toggle#sidebar-toggle :where(.sidebar-toggle-frame, .sidebar-toggle-divider, .sidebar-toggle-chevron) {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html[data-theme][data-sidebar="collapsed"] body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  color: var(--primary-strong) !important;
  background: var(--primary-faint) !important;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
}

html[data-theme] body[data-shell="app"] .sidebar,
html[data-theme] body[data-shell="app"].sidebar-mobile-open .sidebar {
  color: #d7e1ef !important;
  border-right: 0 !important;
  background: linear-gradient(180deg, #172235 0%, #111a29 56%, #0d1522 100%) !important;
  box-shadow: 12px 0 28px -22px rgba(15, 23, 42, 0.72) !important;
}

html[data-theme] body[data-shell="app"] .sidebar-head,
html[data-theme] body[data-shell="app"] .sidebar-foot {
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme] body[data-shell="app"] .sidebar .brand-mark {
  border-radius: 8px;
  background: #2563eb;
  box-shadow: none;
  font-weight: 500;
}

html[data-theme] body[data-shell="app"] .sidebar .brand-copy strong {
  color: #f8fafc;
  font-weight: 500;
  letter-spacing: 0;
}

html[data-theme] body[data-shell="app"] .sidebar .brand-copy span,
html[data-theme] body[data-shell="app"] .sidebar .sidebar-label {
  color: #8293aa;
  font-weight: 400;
  letter-spacing: 0.06em;
}

html[data-theme] body[data-shell="app"] .sidebar :is(.nav-item, .nav-sub) {
  color: #c5d0df;
  font-weight: 400 !important;
}

html[data-theme] body[data-shell="app"] .sidebar :is(.nav-item, .nav-sub):is(:hover, :focus-visible) {
  color: #f8fafc;
  border-color: rgba(125, 211, 252, 0.18);
  background: rgba(148, 163, 184, 0.11);
}

html[data-theme] body[data-shell="app"] .sidebar .nav-sub:is(:hover, :focus-visible),
html[data-theme] body[data-shell="app"] .sidebar .nav-sub.active {
  color: #f8fafc !important;
  background: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme] body[data-shell="app"] .sidebar .nav-sub:is(:hover, :focus-visible) .nav-text,
html[data-theme] body[data-shell="app"] .sidebar .nav-sub.active .nav-text {
  color: inherit !important;
}

html[data-theme] body[data-shell="app"] .sidebar :is(.nav-item, .nav-sub).active,
html[data-theme] body[data-shell="app"] .sidebar .nav-item[aria-expanded="true"] {
  color: #ffffff !important;
  border-color: rgba(56, 189, 248, 0.26) !important;
  background: rgba(37, 99, 235, 0.34) !important;
  box-shadow: inset 3px 0 0 #38bdf8 !important;
}

html[data-theme] body[data-shell="app"] .sidebar .nav-icon {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  color: #9eb9dc;
  background: rgba(148, 163, 184, 0.10);
}

html[data-theme] body[data-shell="app"] .sidebar .nav-icon svg {
  width: 17px;
  height: 17px;
}

html[data-theme] body[data-shell="app"] .sidebar .nav-icon svg * {
  stroke-width: 1.7 !important;
}

html[data-theme] body[data-shell="app"] .sidebar .nav-item.active .nav-icon,
html[data-theme] body[data-shell="app"] .sidebar .nav-item[aria-expanded="true"] .nav-icon,
html[data-theme] body[data-shell="app"] .sidebar .nav-sub.active .nav-icon {
  color: #e0f2fe !important;
  border-color: rgba(125, 211, 252, 0.26);
  background: rgba(14, 165, 233, 0.18);
}

html[data-theme] body[data-shell="app"] .sidebar :is(.nav-item, .nav-sub):is(:hover, :focus-visible) .nav-icon {
  color: #e0f2fe !important;
  border-color: rgba(125, 211, 252, 0.26);
  background: rgba(14, 165, 233, 0.18);
}

html[data-theme] body[data-shell="app"] .sidebar .nav-sub-danger {
  color: #fda4af !important;
  border-color: transparent !important;
  background: rgba(244, 63, 94, 0.08) !important;
}

html[data-theme] body[data-shell="app"] .sidebar .nav-sub-danger::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-right: 1px;
  border: 1px solid rgba(251, 113, 133, 0.54);
  border-radius: 50%;
  color: #fecdd3;
  background: rgba(244, 63, 94, 0.16);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

html[data-theme] body[data-shell="app"] .sidebar .nav-sub-danger:is(:hover, :focus-visible),
html[data-theme] body[data-shell="app"] .sidebar .nav-sub-danger.active {
  color: #fff1f2 !important;
  border-color: rgba(251, 113, 133, 0.30) !important;
  background: rgba(244, 63, 94, 0.20) !important;
}

html[data-theme] body[data-shell="app"] .sidebar .nav-caret {
  color: #8ea0b8;
}

html[data-theme] body[data-shell="app"] .sidebar .version-stack {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(148, 163, 184, 0.08);
  color: #c5d0df;
}

html[data-theme] body[data-shell="app"] .sidebar .version-line span {
  color: #8293aa;
}
/* END ui-v1.6.755 cohesive application shell */

/* BEGIN ui-v1.6.758 service control layout */
body[data-shell="app"] .system-service-list {
  display: grid;
  padding: 8px 12px 12px;
}

body[data-shell="app"] .system-service-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(210px, 0.8fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

body[data-shell="app"] .system-service-row:last-child {
  border-bottom: 0;
}

body[data-shell="app"] .system-service-identity {
  min-width: 0;
}

body[data-shell="app"] .system-service-identity strong,
body[data-shell="app"] .system-service-detail b {
  display: block;
  color: var(--text);
  font-weight: 500;
}

body[data-shell="app"] .system-service-identity > span,
body[data-shell="app"] .system-service-identity p,
body[data-shell="app"] .system-service-detail small {
  color: var(--muted);
  font-size: 12px;
}

body[data-shell="app"] .system-service-identity p {
  margin: 4px 0 0;
  line-height: 1.45;
}

body[data-shell="app"] .system-service-identity p b {
  display: inline;
  color: var(--danger);
  font-weight: 500;
}

body[data-shell="app"] .system-service-meta,
body[data-shell="app"] .system-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-shell="app"] .system-service-detail {
  min-width: 64px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

body[data-shell="app"] .system-action-row {
  justify-content: flex-end;
}

body[data-shell="app"] .system-action-row form {
  margin: 0;
}

body[data-shell="app"] .system-action-row .btn {
  min-width: 58px;
}

@media (max-width: 980px) {
  body[data-shell="app"] .system-service-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-shell="app"] .system-action-row {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  body[data-shell="app"] .system-service-list {
    padding: 6px 10px 10px;
  }

  body[data-shell="app"] .system-service-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 0;
  }

  body[data-shell="app"] .system-service-meta,
  body[data-shell="app"] .system-action-row {
    justify-content: flex-start;
  }

  body[data-shell="app"] .system-action-row .btn {
    min-width: 0;
  }
}
/* END ui-v1.6.758 service control layout */

/* BEGIN ui-v1.6.759 PPP customer form clarity */
body[data-shell="app"] .ppp-customer-form {
  gap: 16px;
}

body[data-shell="app"] .ppp-customer-form .field:has(:required) > label::after {
  color: var(--danger);
  font-style: normal;
}

body[data-shell="app"] .ppp-customer-form .field:has(:required) > label::after {
  content: "*" !important;
  display: inline-flex !important;
  align-items: center;
  margin-left: 4px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

body[data-shell="app"] .customer-form-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

body[data-shell="app"] .customer-form-section-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

body[data-shell="app"] .customer-form-section-head p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

body[data-shell="app"] .customer-form-section-head-compact {
  margin-top: 2px;
}

html[data-theme] body[data-shell="app"] .ppp-customer-form .customer-tabs {
  display: flex !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-theme] body[data-shell="app"] .ppp-customer-form .customer-tabs button {
  position: relative;
  min-height: 43px !important;
  margin: 0 0 -1px !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-bottom-color: var(--border) !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--muted) !important;
  background: transparent !important;
  font-weight: 400 !important;
}

html[data-theme] body[data-shell="app"] .ppp-customer-form .customer-tabs button:is(:hover, :focus-visible) {
  color: var(--text) !important;
  background: var(--primary-faint) !important;
}

html[data-theme] body[data-shell="app"] .ppp-customer-form .customer-tabs button.is-active,
html[data-theme] body[data-shell="app"] .ppp-customer-form .customer-tabs button[aria-selected="true"] {
  z-index: 1;
  border-color: var(--border) !important;
  border-bottom-color: var(--surface) !important;
  color: var(--text) !important;
  background: var(--surface) !important;
}

html[data-theme] body[data-shell="app"] .ppp-customer-form [data-customer-tab-panel] {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--surface);
}

body[data-shell="app"] .ppp-customer-form .customer-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-shell="app"] .ppp-customer-form .customer-field-address textarea {
  min-height: 78px;
  resize: vertical;
}

body[data-shell="app"] .ppp-customer-form .customer-location-group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

body[data-shell="app"] .ppp-customer-form .customer-location-details {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body[data-shell="app"] .ppp-customer-form .customer-coordinate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-shell="app"] .ppp-customer-form .customer-map-button {
  justify-self: start;
}

body[data-shell="app"] .customer-map-picker-card {
  width: min(880px, calc(100vw - 28px));
}

body[data-shell="app"] .customer-map-picker-body {
  display: grid;
  gap: 10px;
}

body[data-shell="app"] .customer-map-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-shell="app"] .customer-map-search input {
  flex: 1 1 auto;
  min-width: 0;
}

body[data-shell="app"] .customer-map-search .btn {
  width: 76px !important;
  min-width: 76px;
  padding-inline: 8px;
  justify-content: center;
}

body[data-shell="app"] .customer-map-search-status,
body[data-shell="app"] .customer-map-picked {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

body[data-shell="app"] .customer-map-search-results {
  display: grid;
  align-content: start;
  gap: 4px;
  max-height: 176px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-soft);
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body[data-shell="app"] .customer-map-search-results:empty {
  display: none;
}

body[data-shell="app"] .customer-map-search-results:not(:empty) {
  min-height: 94px;
}

body[data-shell="app"] .customer-map-result {
  display: grid !important;
  gap: 3px;
  width: 100% !important;
  padding: 7px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--text) !important;
  background: var(--surface-strong) !important;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

body[data-shell="app"] .customer-map-result strong {
  color: var(--text) !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

body[data-shell="app"] .customer-map-result span {
  color: var(--muted) !important;
  font-family: var(--font-mono);
  font-size: 11px;
}

body[data-shell="app"] .customer-map-result:hover,
body[data-shell="app"] .customer-map-result:focus-visible {
  border-color: var(--primary);
  background: var(--primary-faint);
}

body[data-shell="app"] .customer-location-map {
  height: min(38vh, 340px);
  min-height: 240px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: #dce9df;
}

@media (max-width: 640px) {
  body[data-shell="app"] .customer-map-picker-card {
    width: min(100vw - 16px, 880px);
  }

  body[data-shell="app"] .customer-location-map {
    height: 300px;
    min-height: 0;
  }
}

body[data-shell="app"] .ppp-customer-form .field > label {
  color: var(--text-soft);
  font-weight: 400;
}

body[data-shell="app"] .ppp-customer-form .help,
body[data-shell="app"] .ppp-customer-form .notice-stack .help {
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 680px) {
  body[data-shell="app"] .customer-form-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  body[data-shell="app"] .customer-form-section-head p {
    text-align: left;
  }

  html[data-theme] body[data-shell="app"] .ppp-customer-form .customer-tabs {
    padding: 0;
  }

  html[data-theme] body[data-shell="app"] .ppp-customer-form .customer-tabs button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 7px;
  }
  body[data-shell="app"] .ppp-customer-form .customer-info-grid {
    grid-template-columns: 1fr;
  }

  body[data-shell="app"] .ppp-customer-form .customer-location-group {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}
/* END ui-v1.6.759 PPP customer form clarity */

/* BEGIN ui-v1.6.871 PPP customer invoice history */
body[data-shell="app"] .ppp-customer-edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(410px, 0.62fr);
  align-items: start;
  gap: 16px;
}

body[data-shell="app"] .ppp-customer-edit-main {
  min-width: 0;
}

body[data-shell="app"] .ppp-customer-invoice-history {
  position: sticky;
  top: 16px;
  min-width: 0;
}

body[data-shell="app"] .ppp-customer-invoice-history-table {
  max-height: calc(100vh - 170px);
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-shell="app"] .ppp-customer-invoice-history .rk-table {
  --rk-table-min-width: 0px;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed;
}

body[data-shell="app"] .ppp-invoice-history-col-invoice { width: 34%; }
body[data-shell="app"] .ppp-invoice-history-col-package { width: 24%; }
body[data-shell="app"] .ppp-invoice-history-col-total { width: 19%; }
body[data-shell="app"] .ppp-invoice-history-col-status { width: 13%; }
body[data-shell="app"] .ppp-invoice-history-col-actions { width: 10%; }

body[data-shell="app"] .ppp-customer-invoice-history .rk-table th,
body[data-shell="app"] .ppp-customer-invoice-history .rk-table td {
  padding: 6px 5px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-shell="app"] .ppp-customer-invoice-history .data-main,
body[data-shell="app"] .ppp-customer-invoice-history .data-sub {
  font-size: 10px;
}

body[data-shell="app"] .ppp-customer-invoice-history .badge-mini {
  padding: 2px 4px;
  font-size: 9px;
}

body[data-shell="app"] .ppp-invoice-history-actions {
  align-items: center;
  flex-direction: column;
  gap: 3px;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .ppp-invoice-history-actions :where(.table-rp-icon-btn, .table-action-icon-btn) {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
}

body[data-shell="app"] .ppp-customer-invoice-history .data-stack {
  min-width: 0;
}

body[data-shell="app"] .ppp-customer-invoice-history .data-stack .data-sub {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1120px) {
  body[data-shell="app"] .ppp-customer-edit-layout {
    grid-template-columns: 1fr;
  }

  body[data-shell="app"] .ppp-customer-invoice-history {
    position: static;
  }

  body[data-shell="app"] .ppp-customer-invoice-history-table {
    max-height: none;
  }
}
/* END ui-v1.6.871 PPP customer invoice history */

/* BEGIN ui-v1.6.769 compact session tables */
html[data-theme] body[data-shell="app"] :where(.session-page-head, .session-kpi-grid, .session-table-head, .session-table, .session-table-foot) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .session-kpi-grid {
  gap: 8px !important;
}

html[data-theme] body[data-shell="app"] .session-kpi-grid :where(.badge) {
  font-weight: var(--rk-weight-regular) !important;
}

html[data-theme] body[data-shell="app"] .session-table-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px 12px !important;
}

html[data-theme] body[data-shell="app"] .session-table-head > :first-child {
  grid-column: 1 !important;
}

html[data-theme] body[data-shell="app"] .session-entries-control {
  grid-column: 1 !important;
  justify-self: start !important;
  min-height: 28px !important;
  font-size: 11px !important;
  font-weight: var(--rk-weight-regular) !important;
}

html[data-theme] body[data-shell="app"] .session-search {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
}

html[data-theme] body[data-shell="app"] .session-table :where(td, .data-main) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

@media (max-width: 680px) {
  html[data-theme] body[data-shell="app"] .session-table-head {
    grid-template-columns: 1fr !important;
  }

  html[data-theme] body[data-shell="app"] :where(.session-entries-control, .session-search) {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
  }
}
/* END ui-v1.6.769 compact session tables */

/* BEGIN ui-v1.6.770 Router NAS table harmony */
html[data-theme] body[data-shell="app"] :where(.router-page-head, .router-summary-grid, .router-time-card, .router-compact-card) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] :where(.router-summary-grid, .router-time-card, .router-compact-card) :where(strong, .card-title, .card-subtitle, .router-summary-title, .data-main, .data-sub, td, .badge, .btn, .muted, .small) {
  font-weight: var(--rk-weight-regular) !important;
}

html[data-theme] body[data-shell="app"] .router-table-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px 12px !important;
}

html[data-theme] body[data-shell="app"] .router-table-head-copy {
  grid-column: 1 !important;
}

html[data-theme] body[data-shell="app"] .router-entries-control {
  grid-column: 1 !important;
  justify-self: start !important;
  min-height: 28px !important;
  font-size: 11px !important;
  font-weight: var(--rk-weight-regular) !important;
}

html[data-theme] body[data-shell="app"] .router-table-search {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
}

@media (min-width: 861px) {
  html[data-theme] body[data-shell="app"] .router-table {
    --rk-table-min-width: 0px !important;
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
  }

  html[data-theme] body[data-shell="app"] .router-table :is(th, td):nth-child(1) { width: 16% !important; }
  html[data-theme] body[data-shell="app"] .router-table :is(th, td):nth-child(2) { width: 15% !important; }
  html[data-theme] body[data-shell="app"] .router-table :is(th, td):nth-child(3) { width: 12% !important; }
  html[data-theme] body[data-shell="app"] .router-table :is(th, td):nth-child(4) { width: 10% !important; }
  html[data-theme] body[data-shell="app"] .router-table :is(th, td):nth-child(5) { width: 15% !important; }
  html[data-theme] body[data-shell="app"] .router-table :is(th, td):nth-child(6) { width: 18% !important; }
  html[data-theme] body[data-shell="app"] .router-table :is(th, td):nth-child(7) { width: 14% !important; }
}

html[data-theme] body[data-shell="app"] .router-table :where(td, .data-main, .data-sub, .badge, .table-action-label) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

@media (max-width: 860px) {
  html[data-theme] body[data-shell="app"] .router-table-head {
    grid-template-columns: 1fr !important;
  }

  html[data-theme] body[data-shell="app"] :where(.router-entries-control, .router-table-search) {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
  }
}
/* END ui-v1.6.770 Router NAS table harmony */

/* BEGIN ui-v1.6.771 report filter modal harmony */
html[data-theme] body[data-shell="app"] .report-filter-modal .report-filter-card {
  width: min(620px, calc(100vw - 24px)) !important;
  border-radius: 14px !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal :where(.card-title, .card-subtitle, .field label, .billing-filter-note, .billing-filter-subnote, .btn) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal .report-filter-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal .report-filter-form > :is(.billing-period-date-grid, .finance-report-filter-grid, .billing-filter-note, .billing-filter-subnote, .billing-filter-actions, .modal-actions) {
  grid-column: 1 / -1 !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal .field {
  gap: 5px !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal .field label {
  font-size: 11px !important;
  color: var(--muted) !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal .billing-filter-subnote {
  font-weight: 500 !important;
  text-align: left !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal :is(.billing-filter-actions, .modal-actions) {
  margin-top: 2px !important;
  padding-top: 10px !important;
}

@media (max-width: 640px) {
  html[data-theme] body[data-shell="app"] .report-filter-modal .report-filter-form {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }
}
/* END ui-v1.6.771 report filter modal harmony */

/* BEGIN ui-v1.6.772 WhatsApp API workspace harmony */
html[data-theme] body[data-shell="app"] .whatsapp-workspace {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-workspace :where(.table-meta strong, .settings-section-title, .field label, .helper-text, .settings-inline-note, .whatsapp-template-note, .btn, .whatsapp-tab, .whatsapp-template-tab, .whatsapp-variable-list, .whatsapp-check-grid label) {
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-setup-note {
  margin: 0 0 14px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface-soft) !important;
  color: var(--text-soft) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-setup-note ul {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding-left: 18px !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-main-tabs {
  display: flex !important;
  align-items: end !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 0 0 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-main-tabs .whatsapp-tab {
  min-height: 36px !important;
  margin: 0 0 -1px !important;
  padding: 8px 14px !important;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--text-soft) !important;
  background: transparent !important;
  font-size: 12px !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-main-tabs .whatsapp-tab:is(:hover, :focus-visible) {
  color: var(--primary-strong) !important;
  background: var(--surface-soft) !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-main-tabs .whatsapp-tab.is-active {
  position: relative !important;
  z-index: 1 !important;
  border-color: var(--border) !important;
  color: var(--primary-strong) !important;
  background: var(--surface) !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-tab-content {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--border) !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  background: var(--surface) !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-tab-content .settings-compact-form {
  display: grid !important;
  gap: 14px !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-tab-content .settings-form-section {
  margin: 0 !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-tab-content .settings-form-section:last-of-type {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-tab-content .settings-section-title {
  margin: 0 0 9px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-config-form :where(.settings-form-grid, .whatsapp-api-key-grid) {
  gap: 10px 12px !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-check-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-top: 10px !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-check-grid > label {
  min-height: 32px !important;
  padding: 6px 9px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-delay-info {
  margin-top: 10px !important;
  padding: 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface-soft) !important;
  color: var(--text-soft) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 16px !important;
  margin: 8px 0 !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-feature-grid > div {
  display: grid !important;
  gap: 4px !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-variable-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-variable-list > div {
  min-height: 32px !important;
  padding: 5px 7px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-variable-list strong {
  color: var(--primary-strong) !important;
  font-weight: var(--rk-weight-regular) !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-template-tabs {
  display: flex !important;
  align-items: end !important;
  gap: 3px !important;
  margin: 0 0 12px !important;
  padding: 0 0 0 6px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-template-tab {
  min-height: 32px !important;
  margin: 0 0 -1px !important;
  padding: 6px 10px !important;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 7px 7px 0 0 !important;
  color: var(--text-soft) !important;
  background: transparent !important;
  font-size: 11px !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-template-tab.is-active {
  border-color: var(--border) !important;
  color: var(--primary-strong) !important;
  background: var(--surface) !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-template-field textarea {
  min-height: 280px !important;
  border-radius: 8px !important;
  font-family: var(--rk-font-ui) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

html[data-theme] body[data-shell="app"] .whatsapp-actions {
  margin: 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border) !important;
}

@media (max-width: 720px) {
  html[data-theme] body[data-shell="app"] .whatsapp-tab-content {
    padding: 10px !important;
  }

  html[data-theme] body[data-shell="app"] :where(.whatsapp-check-grid, .whatsapp-feature-grid, .whatsapp-variable-list) {
    grid-template-columns: 1fr !important;
  }

  html[data-theme] body[data-shell="app"] .whatsapp-main-tabs {
    padding-left: 2px !important;
  }

  html[data-theme] body[data-shell="app"] .whatsapp-main-tabs .whatsapp-tab {
    flex: 1 1 0 !important;
    padding-inline: 8px !important;
  }
}
/* END ui-v1.6.772 WhatsApp API workspace harmony */

/* BEGIN ui-v1.6.773 voucher hotspot harmony */
html[data-theme] body[data-shell="app"] :where(.voucher-page-head, .voucher-list-card, .voucher-hotspot-modal-card) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-modal-card {
  width: min(660px, calc(100vw - 24px)) !important;
  border-radius: 14px !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-modal-card :where(.card-title, .card-subtitle, .field label, .help, .btn, .check-inline) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-modal-card .modal-head {
  min-height: 52px !important;
  padding: 10px 14px !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-modal-card .card-title {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-modal-card .card-subtitle {
  margin-top: 3px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-form {
  gap: 10px !important;
  padding: 14px !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-form .form-grid {
  gap: 10px 12px !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-form .field {
  gap: 5px !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-form .field label {
  color: var(--muted) !important;
  font-size: 11px !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-form .field-radio-group {
  padding: 8px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface-soft) !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-form .radio-row {
  margin-top: 4px !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-form .check-inline {
  font-size: 12px !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-form .actions-stack-mobile {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 2px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border) !important;
}

html[data-theme] body[data-shell="app"] .voucher-hotspot-form .actions-stack-mobile .btn {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

html[data-theme] body[data-shell="app"] .voucher-list-card :where(.card-title, .card-subtitle, .entries-control, .table-meta, .toolbar-search, .voucher-compact-table td, .voucher-compact-table .data-main, .voucher-compact-table .status-pill, .voucher-compact-table .voucher-due-pill, .voucher-compact-table .table-action-label) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .voucher-table-head {
  padding: 12px 14px !important;
}

html[data-theme] body[data-shell="app"] .voucher-table-control-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px 12px !important;
}

html[data-theme] body[data-shell="app"] .voucher-table-head-copy .card-title {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

html[data-theme] body[data-shell="app"] .voucher-table-head-copy .card-subtitle {
  margin-top: 3px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

html[data-theme] body[data-shell="app"] .voucher-table-control-group {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html[data-theme] body[data-shell="app"] .voucher-table-control-group .entries-control {
  min-height: 28px !important;
  font-size: 11px !important;
}

html[data-theme] body[data-shell="app"] .voucher-table-control-group .table-meta {
  overflow: hidden !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-shell="app"] .voucher-table-search {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html[data-theme] body[data-shell="app"] .voucher-compact-table {
  font-size: 11.5px !important;
}

html[data-theme] body[data-shell="app"] .voucher-compact-table :where(.voucher-status-pill, .voucher-due-pill) {
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: var(--rk-weight-regular) !important;
}

html[data-theme] body[data-shell="app"] .voucher-compact-table .voucher-status-pill::before {
  width: 6px !important;
  height: 6px !important;
}

@media (max-width: 720px) {
  html[data-theme] body[data-shell="app"] .voucher-hotspot-modal-card {
    width: 100% !important;
    border-radius: 12px !important;
  }

  html[data-theme] body[data-shell="app"] .voucher-hotspot-form .actions-stack-mobile {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  html[data-theme] body[data-shell="app"] .voucher-hotspot-form .actions-stack-mobile .btn {
    width: 100% !important;
  }

  html[data-theme] body[data-shell="app"] .voucher-list-card .voucher-table-control-row {
    grid-template-columns: 1fr !important;
  }

  html[data-theme] body[data-shell="app"] .voucher-list-card :where(.voucher-table-head-copy, .voucher-table-control-group, .voucher-table-search) {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }

  html[data-theme] body[data-shell="app"] .voucher-list-card .voucher-table-control-group {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  html[data-theme] body[data-shell="app"] .voucher-list-card .voucher-table-control-group .table-meta {
    flex: 0 0 auto !important;
    width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}
/* END ui-v1.6.773 voucher hotspot harmony */

/* BEGIN ui-v1.6.778 online ePayment table harmony */
html[data-theme] body[data-shell="app"] :where(.online-payment-summary-grid, .online-payment-card) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] :where(.online-payment-summary-grid, .online-payment-card) :where(.customer-summary-label, .customer-summary-value, .entries-control, .table-meta, .toolbar-search, .online-payment-status-form, .online-payment-table td, .online-payment-table strong, .online-payment-status, .online-payment-status *, .online-id-chip, .online-invoice-no, .online-check-trx-btn, .customer-list-info, .online-payment-footer) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .online-payment-table-control-row {
  gap: 8px 10px !important;
}

html[data-theme] body[data-shell="app"] .online-payment-table-meta {
  font-size: 11px !important;
}

html[data-theme] body[data-shell="app"] .online-payment-status {
  min-height: 22px !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
}

html[data-theme] body[data-shell="app"] .online-payment-status-dot {
  width: 6px !important;
  height: 6px !important;
}

html[data-theme] body[data-shell="app"] .online-payment-table .table-head-sub {
  font-weight: var(--rk-weight-regular) !important;
}

@media (min-width: 861px) {
  html[data-theme] body[data-shell="app"] .online-payment-table {
    --rk-table-min-width: 0px !important;
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
  }

  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td) {
    min-width: 0 !important;
  }

  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td):nth-child(1) { width: 6% !important; }
  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td):nth-child(2) { width: 15% !important; }
  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td):nth-child(3) { width: 12% !important; }
  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td):nth-child(4) { width: 14% !important; }
  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td):nth-child(5) { width: 9% !important; }
  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td):nth-child(6) { width: 10% !important; }
  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td):nth-child(7) { width: 11% !important; }
  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td):nth-child(8) { width: 7% !important; }
  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td):nth-child(9) { width: 10% !important; }
  html[data-theme] body[data-shell="app"] .online-payment-table :is(th, td):nth-child(10) { width: 6% !important; }

  html[data-theme] body[data-shell="app"] .online-payment-table :is(td:nth-child(2), td:nth-child(3), td:nth-child(4), td:nth-child(5), td:nth-child(7), td:nth-child(8), td:nth-child(9), td:nth-child(10)) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

html[data-theme] body[data-shell="app"] .online-payment-table :where(.online-ref-main, .online-ref-sub, .online-invoice-no, .online-customer-name, .online-customer-id) {
  max-width: 100% !important;
}

@media (max-width: 720px) {
  html[data-theme] body[data-shell="app"] .online-payment-table-control-row {
    align-items: stretch !important;
  }

  html[data-theme] body[data-shell="app"] :where(.online-payment-length, .online-payment-table-meta, .online-payment-search, .online-payment-status-form) {
    min-width: 100% !important;
    width: 100% !important;
  }
}
/* END ui-v1.6.778 online ePayment table harmony */

/* BEGIN ui-v1.6.779 WA Blast log harmony */
html[data-theme] body[data-shell="app"] :where(.app-log-wa-tabs, .app-log-wa-head, .app-log-wa-resend-form, .app-log-wa-table, .app-log-dt-footer) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-tabs {
  display: flex !important;
  align-items: end !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 0 0 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-tabs .panel-tab {
  min-height: 36px !important;
  margin: 0 0 -1px !important;
  padding: 8px 14px !important;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--text-soft) !important;
  background: transparent !important;
  font-family: var(--rk-font-ui) !important;
  font-size: 12px !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-tabs .panel-tab:is(:hover, :focus-visible) {
  color: var(--primary-strong) !important;
  background: var(--surface-soft) !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-tabs .panel-tab.is-active {
  position: relative !important;
  z-index: 1 !important;
  border-color: var(--border) !important;
  color: var(--primary-strong) !important;
  background: var(--surface) !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-summary-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 24px !important;
  padding: 3px 7px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-summary-item strong {
  min-width: 1.5em !important;
  font-size: 11px !important;
  font-weight: var(--rk-weight-semibold) !important;
  text-align: right !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-summary-item.is-queued {
  color: var(--warn) !important;
  background: var(--warn-soft) !important;
  border-color: color-mix(in srgb, var(--warn) 38%, transparent) !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-summary-item.is-sent {
  color: var(--success) !important;
  background: var(--success-soft) !important;
  border-color: color-mix(in srgb, var(--success) 38%, transparent) !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-summary-item.is-unsent {
  color: var(--danger) !important;
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 38%, transparent) !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-head {
  padding: 10px 14px !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
}

html[data-theme] body[data-shell="app"] .app-log-dt-controls {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(220px, 320px) !important;
  align-items: center !important;
  gap: 8px 10px !important;
}

html[data-theme] body[data-shell="app"] .app-log-dt-show {
  grid-column: 1 !important;
  min-height: 28px !important;
  font-size: 11px !important;
}

html[data-theme] body[data-shell="app"] .app-log-dt-controls > .table-meta {
  grid-column: 2 !important;
  overflow: hidden !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-read-filter {
  grid-column: 3 !important;
  min-height: 28px !important;
  font-size: 11px !important;
}

html[data-theme] body[data-shell="app"] .app-log-dt-search {
  grid-column: 4 !important;
  margin-left: 0 !important;
  font-size: 0 !important;
}

html[data-theme] body[data-shell="app"] .app-log-dt-search input {
  width: 100% !important;
  min-height: 30px !important;
  font-size: 12px !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-resend-form .rk-table-bulk-toolbar {
  gap: 8px !important;
  padding: 9px 12px !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-resend-form :where(.entries-control, .btn, .app-log-wa-resend-help) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-table :where(td, .data-main, .data-sub, .app-log-type-main, .app-log-status-badge, .btn, .app-log-message-preview-btn) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-table .app-log-message-preview-btn {
  font-style: normal !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-table tbody tr.is-unread td {
  font-weight: var(--rk-weight-regular) !important;
}

html[data-theme] body[data-shell="app"] .app-log-wa-table .app-log-status-badge {
  border-radius: 6px !important;
  font-size: 10.5px !important;
}

@media (min-width: 861px) {
  html[data-theme] body[data-shell="app"] .app-log-wa-table {
    --rk-table-min-width: 0px !important;
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
  }

  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td) {
    min-width: 0 !important;
  }

  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td):nth-child(1) { width: 6% !important; }
  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td):nth-child(2) { width: 10% !important; }
  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td):nth-child(3) { width: 15% !important; }
  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td):nth-child(4) { width: 11% !important; }
  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td):nth-child(5) { width: 9% !important; }
  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td):nth-child(6) { width: 12% !important; }
  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td):nth-child(7) { width: 8% !important; }
  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td):nth-child(8) { width: 8% !important; }
  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td):nth-child(9) { width: 7% !important; }
  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(th, td):nth-child(10) { width: 14% !important; }

  html[data-theme] body[data-shell="app"] .app-log-wa-table :is(td:nth-child(1), td:nth-child(2), td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(7), td:nth-child(8), td:nth-child(9)) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 720px) {
  html[data-theme] body[data-shell="app"] .app-log-wa-tabs {
    padding-left: 2px !important;
  }

  html[data-theme] body[data-shell="app"] .app-log-wa-tabs .panel-tab {
    flex: 1 1 0 !important;
    padding-inline: 8px !important;
  }

  html[data-theme] body[data-shell="app"] .app-log-wa-head .app-log-dt-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-theme] body[data-shell="app"] .app-log-wa-head .app-log-dt-show {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html[data-theme] body[data-shell="app"] .app-log-wa-head .app-log-wa-read-filter {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html[data-theme] body[data-shell="app"] .app-log-wa-head .app-log-dt-controls > .table-meta {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html[data-theme] body[data-shell="app"] .app-log-wa-head .app-log-dt-search {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}
/* END ui-v1.6.779 WA Blast log harmony */

/* BEGIN ui-v1.6.784 Billing and Finance report modal harmony */
html[data-theme] body[data-shell="app"] .report-filter-modal .report-filter-card {
  width: min(620px, calc(100vw - 24px)) !important;
  border-radius: 8px !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal .billing-filter-head {
  min-height: 46px !important;
  padding: 10px 14px !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal .report-filter-form {
  gap: 10px !important;
  padding: 12px 14px 14px !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal :where(.billing-period-date-grid, .finance-report-filter-grid) {
  gap: 10px !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal :where(input, select) {
  border-radius: 6px !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal :where(.billing-filter-note, .billing-filter-subnote) {
  border-radius: 6px !important;
}

html[data-theme] body[data-shell="app"] .report-filter-modal :where(.billing-filter-actions, .modal-actions) .btn {
  border-radius: 6px !important;
}

@media (max-width: 640px) {
  html[data-theme] body[data-shell="app"] .report-filter-modal .report-filter-card {
    width: 100% !important;
    border-radius: 8px !important;
  }

  html[data-theme] body[data-shell="app"] .report-filter-modal .billing-filter-head {
    padding: 10px 12px !important;
  }

  html[data-theme] body[data-shell="app"] .report-filter-modal .report-filter-form {
    gap: 8px !important;
    padding: 10px 12px 12px !important;
  }
}
/* END ui-v1.6.784 Billing and Finance report modal harmony */

/* BEGIN ui-v1.6.785 Billing and Finance report detail harmony */
html[data-theme] body[data-shell="app"] :where(.billing-compact-card, .finance-report-data-section) {
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

html[data-theme] body[data-shell="app"] :where(.billing-table-head, .finance-report-card-head) {
  display: block !important;
  min-height: 48px !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
}

html[data-theme] body[data-shell="app"] .billing-table-head,
html[data-theme] body[data-shell="app"] .finance-report-card-head {
  padding: 9px 14px !important;
}

html[data-theme] body[data-shell="app"] :where(.billing-table-control-row, .finance-report-table-controls) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(240px, 320px) auto !important;
  align-items: center !important;
  gap: 8px 10px !important;
  width: 100% !important;
}

html[data-theme] body[data-shell="app"] .billing-table-control-row .entries-control label,
html[data-theme] body[data-shell="app"] .billing-table-control-row .entries-control select {
  min-height: 30px !important;
  height: 30px !important;
}

@media (min-width: 861px) {
  html[data-theme] body[data-shell="app"] .billing-table-control-row {
    min-height: 30px !important;
    height: 30px !important;
  }
}

html[data-theme] body[data-shell="app"] :where(.billing-table-meta, .finance-report-table-meta) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-shell="app"] :where(.billing-search-form, .finance-report-search) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
}

html[data-theme] body[data-shell="app"] :where(.billing-list-pagination-top, .finance-report-pagination-top, .finance-page-pagination-top) {
  margin-left: 0 !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-shell="app"] :where(.billing-list-footer, .finance-report-footer) {
  min-height: 44px !important;
  padding: 8px 14px !important;
  border-top: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
}

@media (max-width: 860px) {
  html[data-theme] body[data-shell="app"] .billing-table-head,
  html[data-theme] body[data-shell="app"] .finance-report-card-head {
    padding: 8px 10px !important;
  }

  html[data-theme] body[data-shell="app"] :where(.billing-table-control-row, .finance-report-table-controls) {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 7px !important;
  }

  html[data-theme] body[data-shell="app"] :where(.billing-table-meta, .finance-report-table-meta, .billing-search-form, .finance-report-search, .billing-list-pagination-top, .finance-report-pagination-top, .finance-page-pagination-top) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme] body[data-shell="app"] :where(.billing-table-meta, .finance-report-table-meta) {
    white-space: normal !important;
  }
}
/* END ui-v1.6.785 Billing and Finance report detail harmony */

/* BEGIN ui-v1.6.788 Top Up table and summary harmony */
html[data-theme] body[data-shell="app"] .topup-compact-card {
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

html[data-theme] body[data-shell="app"] .topup-compact-head {
  display: block !important;
  min-height: 48px !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
}

html[data-theme] body[data-shell="app"] .topup-table-control-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(240px, 320px) !important;
  align-items: center !important;
  gap: 8px 10px !important;
  width: 100% !important;
}

html[data-theme] body[data-shell="app"] .topup-table-length label,
html[data-theme] body[data-shell="app"] .topup-table-length select {
  min-height: 30px !important;
  height: 30px !important;
}

@media (min-width: 861px) {
  html[data-theme] body[data-shell="app"] .topup-table-control-row {
    min-height: 30px !important;
    height: 30px !important;
  }
}

html[data-theme] body[data-shell="app"] .topup-table-meta {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-shell="app"] .topup-table-search {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
}

@media (min-width: 861px) {
  html[data-theme] body[data-shell="app"] .topup-compact-table {
    --rk-table-min-width: 0px !important;
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
  }

  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td) {
    min-width: 0 !important;
  }

  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td):nth-child(1) { width: 4% !important; }
  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td):nth-child(2) { width: 15% !important; }
  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td):nth-child(3) { width: 9% !important; }
  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td):nth-child(4) { width: 10% !important; }
  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td):nth-child(5) { width: 11% !important; }
  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td):nth-child(6) { width: 12% !important; }
  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td):nth-child(7) { width: 9% !important; }
  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td):nth-child(8) { width: 9% !important; }
  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td):nth-child(9) { width: 12% !important; }
  html[data-theme] body[data-shell="app"] .topup-compact-table :is(th, td):nth-child(10) { width: 9% !important; }
}

html[data-theme] body[data-shell="app"] .topup-compact-table :where(td, .data-main, .badge, .table-action-label) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .topup-list-footer {
  min-height: 44px !important;
  padding: 8px 14px !important;
  border-top: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
}

html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-modal-card {
  width: min(620px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-head {
  min-height: 46px !important;
  padding: 10px 14px !important;
}

html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-body {
  padding: 12px 14px !important;
  overflow: auto !important;
}

html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-table td {
  padding: 8px 10px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-weight: var(--rk-weight-regular) !important;
}

html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-table td:first-child {
  width: 66% !important;
}

html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-table td:last-child {
  width: 34% !important;
  text-align: right !important;
}

html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-note {
  margin: 10px 0 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--surface-soft) !important;
}

@media (max-width: 860px) {
  html[data-theme] body[data-shell="app"] .topup-compact-head {
    padding: 8px 10px !important;
  }

  html[data-theme] body[data-shell="app"] .topup-table-control-row {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 7px !important;
  }

  html[data-theme] body[data-shell="app"] :where(.topup-table-meta, .topup-table-search) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme] body[data-shell="app"] .topup-table-meta {
    white-space: normal !important;
  }

  html[data-theme] body[data-shell="app"] .topup-list-footer {
    padding: 8px 10px !important;
  }

  html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-modal-card {
    width: 100% !important;
    border-radius: 8px !important;
  }

  html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-head {
    padding: 10px 12px !important;
  }

  html[data-theme] body[data-shell="app"] .user-summary-modal .user-summary-body {
    padding: 10px 12px !important;
  }
}
/* END ui-v1.6.788 Top Up table and summary harmony */

/* BEGIN ui-v1.6.790 Top Up balance modal harmony */
html[data-theme] body[data-shell="app"] .user-balance-modal .user-balance-modal-card {
  width: min(620px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

html[data-theme] body[data-shell="app"] .user-balance-modal .user-balance-head {
  min-height: 46px !important;
  padding: 10px 14px !important;
}

html[data-theme] body[data-shell="app"] .user-balance-modal .user-balance-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 12px 14px 14px !important;
  overflow: auto !important;
}

html[data-theme] body[data-shell="app"] .user-balance-modal .user-balance-current {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 50px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--surface-soft) !important;
}

html[data-theme] body[data-shell="app"] .user-balance-modal .user-balance-current :where(.user-balance-current-label, .user-balance-current-value) {
  font-family: var(--rk-font-ui) !important;
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .user-balance-modal .field {
  gap: 5px !important;
}

html[data-theme] body[data-shell="app"] .user-balance-modal .field label,
html[data-theme] body[data-shell="app"] .user-balance-modal .field small {
  font-weight: var(--rk-weight-regular) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .user-balance-modal :is(input, select) {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
}

html[data-theme] body[data-shell="app"] .user-balance-modal .field:has(select[name="manage_type"]) {
  grid-column: 1 / -1 !important;
}

html[data-theme] body[data-shell="app"] .user-balance-modal .user-balance-actions {
  grid-column: 1 / -1 !important;
  margin-top: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border) !important;
}

html[data-theme] body[data-shell="app"] .user-balance-modal .user-balance-actions .btn {
  min-height: 34px !important;
  border-radius: 6px !important;
}

@media (max-width: 640px) {
  html[data-theme] body[data-shell="app"] .user-balance-modal .user-balance-modal-card {
    width: 100% !important;
    border-radius: 8px !important;
  }

  html[data-theme] body[data-shell="app"] .user-balance-modal .user-balance-head {
    padding: 10px 12px !important;
  }

  html[data-theme] body[data-shell="app"] .user-balance-modal .user-balance-form {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px 12px !important;
  }
}
/* END ui-v1.6.790 Top Up balance modal harmony */

/* BEGIN ui-v1.7.013 Unified Inter typography */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/Inter-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/static/fonts/Montserrat-Light.woff") format("woff");
}

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --rk-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rk-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --rk-table-view-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme] body,
html[data-theme] body :where(*, *::before, *::after) {
  font-family: var(--rk-font-ui) !important;
}
/* END ui-v1.7.013 Unified Inter typography */

/* BEGIN ui-v1.6.792 Sidebar toggle visibility */
html[data-theme] body[data-shell="app"] .topbar-toggle#sidebar-toggle {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 8px !important;
}

html[data-theme] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-svg {
  width: 32px !important;
  height: 24px !important;
}

html[data-theme] body[data-shell="app"] .topbar-toggle#sidebar-toggle :where(.sidebar-toggle-frame, .sidebar-toggle-divider, .sidebar-toggle-chevron) {
  stroke-width: 2px !important;
}

@media (max-width: 720px) {
  html[data-theme] body[data-shell="app"] .topbar-toggle#sidebar-toggle {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  html[data-theme] body[data-shell="app"] .topbar-toggle#sidebar-toggle .sidebar-toggle-svg {
    width: 28px !important;
    height: 22px !important;
  }
}
/* END ui-v1.6.792 Sidebar toggle visibility */

/* BEGIN ui-v1.6.797 user management table width lock */
html[data-theme] body[data-shell="app"] .settings-user-compact-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
}

html[data-theme] body[data-shell="app"] .settings-user-compact-wrap .settings-user-table {
  --rk-table-min-width: 1400px !important;
  width: 1400px !important;
  min-width: 1400px !important;
  max-width: none !important;
  table-layout: fixed !important;
}
/* END ui-v1.6.797 user management table width lock */

/* BEGIN ui-v1.6.798 user management action column visibility */
html[data-theme] body[data-shell="app"] .settings-user-compact-wrap .settings-user-table {
  --rk-table-min-width: 1500px !important;
  width: 1500px !important;
  min-width: 1500px !important;
}

html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(1) { width: 38px !important; min-width: 38px !important; max-width: 38px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(2) { width: 190px !important; min-width: 190px !important; max-width: 190px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(3) { width: 82px !important; min-width: 82px !important; max-width: 82px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(4) { width: 105px !important; min-width: 105px !important; max-width: 105px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(5) { width: 105px !important; min-width: 105px !important; max-width: 105px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(6) { width: 200px !important; min-width: 200px !important; max-width: 200px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(7) { width: 128px !important; min-width: 128px !important; max-width: 128px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(8) { width: 86px !important; min-width: 86px !important; max-width: 86px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(9) { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(10) { width: 136px !important; min-width: 136px !important; max-width: 136px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(11) { width: 154px !important; min-width: 154px !important; max-width: 154px !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(12) { width: 80px !important; min-width: 80px !important; max-width: 80px !important; overflow: visible !important; }

html[data-theme] body[data-shell="app"] .settings-user-table .settings-user-actions {
  min-width: max-content !important;
  overflow: visible !important;
}
/* END ui-v1.6.798 user management action column visibility */

/* BEGIN ui-v1.6.799 user management desktop full-width table */
html[data-theme] body[data-shell="app"] .settings-user-compact-wrap .settings-user-table {
  --rk-table-min-width: 0px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(1) { width: 4% !important; min-width: 0 !important; max-width: none !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(2) { width: 13% !important; min-width: 0 !important; max-width: none !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(3) { width: 7% !important; min-width: 0 !important; max-width: none !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(4) { width: 8% !important; min-width: 0 !important; max-width: none !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(5) { width: 8% !important; min-width: 0 !important; max-width: none !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(6) { width: 18% !important; min-width: 0 !important; max-width: none !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(7) { width: 9% !important; min-width: 0 !important; max-width: none !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(8) { width: 7% !important; min-width: 0 !important; max-width: none !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(9) { width: 8% !important; min-width: 0 !important; max-width: none !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(10) { width: 10% !important; min-width: 0 !important; max-width: none !important; }
html[data-theme] body[data-shell="app"] .settings-user-table :is(th, td):nth-child(11) { width: 8% !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; }

@media (max-width: 860px) {
  html[data-theme] body[data-shell="app"] .settings-user-compact-wrap .settings-user-table {
    --rk-table-min-width: 980px !important;
    width: 980px !important;
    min-width: 980px !important;
    max-width: none !important;
  }
}
/* END ui-v1.6.799 user management desktop full-width table */

/* BEGIN ui-v1.6.801 role management table */
html[data-theme] body[data-shell="app"] .settings-role-table-wrap .settings-role-table {
  --rk-table-min-width: 0px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

html[data-theme] body[data-shell="app"] .settings-role-table :is(th, td):nth-child(1) { width: 62% !important; }
html[data-theme] body[data-shell="app"] .settings-role-table :is(th, td):nth-child(2) { width: 20% !important; }
html[data-theme] body[data-shell="app"] .settings-role-table :is(th, td):nth-child(3) { width: 18% !important; overflow: visible !important; }
/* END ui-v1.6.801 role management table */

/* BEGIN ui-v1.6.807 unified fixed-width search box + icon (one rule, app-wide) */
@media (min-width: 861px) {
  html[data-theme] body[data-shell="app"] .rk-toolbar-search,
  html[data-theme] body[data-shell="app"] .toolbar-search,
  html[data-theme] body[data-shell="app"] .toolbar-search-form,
  html[data-theme] body[data-shell="app"] .billing-search-form,
  html[data-theme] body[data-shell="app"] .finance-report-search,
  html[data-theme] body[data-shell="app"] .online-payment-search,
  html[data-theme] body[data-shell="app"] .topup-table-search,
  html[data-theme] body[data-shell="app"] .user-table-search,
  html[data-theme] body[data-shell="app"] .session-search,
  html[data-theme] body[data-shell="app"] .app-log-dt-search,
  html[data-theme] body[data-shell="app"] .portal-ticket-search-form {
    flex: 0 0 340px !important;
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
  }
}

html[data-theme] body[data-shell="app"] :where(.rk-toolbar-search, .toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .online-payment-search, .topup-table-search, .user-table-search, .session-search, .app-log-dt-search, .portal-ticket-search-form) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
}

html[data-theme] body[data-shell="app"] :where(.rk-toolbar-search, .toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .online-payment-search, .topup-table-search, .user-table-search, .session-search, .app-log-dt-search, .portal-ticket-search-form) > span[aria-hidden="true"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

html[data-theme] body[data-shell="app"] .toolbar-search-submit {
  flex: 0 0 auto !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: var(--muted) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}
html[data-theme] body[data-shell="app"] .toolbar-search-submit:is(:hover, :focus-visible) { color: var(--primary) !important; background: var(--primary-soft) !important; }

html[data-theme] body[data-shell="app"] :where(.rk-toolbar-search, .toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .online-payment-search, .topup-table-search, .user-table-search, .session-search, .app-log-dt-search, .portal-ticket-search-form) input[type="search"],
html[data-theme] body[data-shell="app"] :where(.rk-toolbar-search, .toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .online-payment-search, .topup-table-search, .user-table-search, .session-search, .app-log-dt-search, .portal-ticket-search-form) input[type="text"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

@media (max-width: 860px) {
  html[data-theme] body[data-shell="app"] :where(.rk-toolbar-search, .toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .online-payment-search, .topup-table-search, .user-table-search, .session-search, .app-log-dt-search, .portal-ticket-search-form) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }
}
/* END ui-v1.6.807 unified fixed-width search box + icon (one rule, app-wide) */

/* Prevent iOS Safari from zooming the page when an editable control receives focus. */
@media (max-width: 860px) and (pointer: coarse) {
  :where(input:not([type="button"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]), select, textarea) {
    font-size: 16px !important;
  }

  html[data-theme] body :is(.rk-toolbar-search, .toolbar-search, .toolbar-search-form, .billing-search-form, .finance-report-search, .online-payment-search, .topup-table-search, .user-table-search, .session-search, .app-log-dt-search, .portal-ticket-search-form) :is(input[type="search"], input[type="text"]) {
    font-size: 16px !important;
  }
}

/* Give each service status window the Dashboard overview-card treatment. */
body[data-shell="app"] .dashboard-service-panel .status-row {
  --card-accent: #2563eb;
  --card-accent-soft: rgba(37, 99, 235, .12);
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  min-height: 64px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(203, 213, 225, .82) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--service-card-accent) 14%, transparent) 0, transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), color-mix(in srgb, var(--service-card-accent) 5%, #f8fafc)) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .075) !important;
}

body[data-shell="app"] .dashboard-service-panel .status-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 52%, #ffffff));
  opacity: .95;
}

body[data-shell="app"] .dashboard-service-panel .status-row > * {
  position: relative;
  z-index: 1;
}

/* BEGIN ui-v1.6.882 finance income all-results print */
@media print {
  @page {
    size: A4 landscape;
    margin: 9mm;
  }

  html,
  body,
  body[data-shell="app"] {
    width: auto !important;
    min-width: 0 !important;
    background: #fff !important;
    color: #172033 !important;
  }

  body[data-shell="app"] :is(.sidebar, .sidebar-overlay, .topbar, .finance-report-actions-panel, .finance-report-table-controls, .finance-report-footer, .rk-auto-table-footer, .toast-stack, .rk-loading-overlay) {
    display: none !important;
  }

  body[data-shell="app"] .app-shell,
  body[data-shell="app"] .workspace,
  body[data-shell="app"] .main,
  body[data-shell="app"] .page-body,
  body[data-shell="app"] .finance-report-shell,
  body[data-shell="app"] .finance-report-data-section {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  body[data-shell="app"] .finance-report-head {
    display: block !important;
    margin: 0 0 5mm !important;
    padding: 0 0 3mm !important;
    border-bottom: 2px solid #1e3a5f !important;
  }

  body[data-shell="app"] .finance-report-title {
    color: #123b6d !important;
    font-size: 17pt !important;
    font-weight: 800 !important;
  }

  body[data-shell="app"] .finance-report-overview {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3mm !important;
    margin: 0 0 5mm !important;
  }

  body[data-shell="app"] .finance-report-kpi {
    min-height: 0 !important;
    padding: 2.5mm !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f8fafc !important;
  }

  body[data-shell="app"] .finance-report-kpi-icon {
    display: none !important;
  }

  body[data-shell="app"] .finance-report-kpi-label {
    font-size: 7pt !important;
  }

  body[data-shell="app"] .finance-report-kpi-value {
    font-size: 10pt !important;
  }

  body[data-shell="app"] .finance-report-table-wrap,
  body[data-shell="app"] .finance-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-shell="app"] .finance-income-report-table {
    --rk-table-min-width: 0px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    font-size: 6.5pt !important;
    border-collapse: collapse !important;
  }

  body[data-shell="app"] .finance-income-report-table thead {
    display: table-header-group !important;
  }

  body[data-shell="app"] .finance-income-report-table th,
  body[data-shell="app"] .finance-income-report-table td {
    padding: 1.4mm 1.1mm !important;
    color: #172033 !important;
    border: 1px solid #cbd5e1 !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-shell="app"] .finance-income-report-table th {
    background: #e2e8f0 !important;
    color: #123b6d !important;
    font-size: 6.2pt !important;
    font-weight: 800 !important;
  }

  body[data-shell="app"] .finance-income-report-table :is(.sort-mark, .ppp-info-btn, .finance-report-info-dot, .ppp-info-popover) {
    display: none !important;
  }

  body[data-shell="app"] .finance-income-report-table tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body[data-shell="app"] .billing-summary-grid,
  body[data-shell="app"] .billing-compact-card,
  body[data-shell="app"] .billing-report-table-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 4mm !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body[data-shell="app"] .billing-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3mm !important;
  }

  body[data-shell="app"] .billing-summary-card {
    min-height: 0 !important;
    padding: 2.5mm !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f8fafc !important;
  }

  body[data-shell="app"] .billing-summary-icon,
  body[data-shell="app"] .billing-report-table :is(.sort-mark, .ppp-info-btn, .ppp-info-popover) {
    display: none !important;
  }

  body[data-shell="app"] .billing-report-table-wrap {
    overflow: visible !important;
  }

  body[data-shell="app"] .billing-report-table {
    --rk-table-min-width: 0px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    font-size: 6.3pt !important;
    border-collapse: collapse !important;
  }

  body[data-shell="app"] .billing-report-table thead {
    display: table-header-group !important;
  }

  body[data-shell="app"] .billing-report-table th,
  body[data-shell="app"] .billing-report-table td {
    padding: 1.3mm 1mm !important;
    color: #172033 !important;
    border: 1px solid #cbd5e1 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-shell="app"] .billing-report-table th {
    background: #e2e8f0 !important;
    color: #123b6d !important;
    font-size: 6pt !important;
    font-weight: 800 !important;
  }

  body[data-shell="app"] .billing-report-table tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}
/* END ui-v1.6.882 finance income all-results print */

/* Every visible single-choice dropdown renders through this searchable control contract. */
:root {
  --rk-dropdown-chevron-size: 7px;
  --rk-dropdown-chevron-stroke: 1.5px;
  --rk-dropdown-chevron-color: var(--muted, #64748b);
  --rk-dropdown-control-height: var(--field-h, 38px);
  --rk-dropdown-control-radius: 8px;
  --rk-dropdown-control-padding: 6px 36px 6px 10px;
}

select:not([multiple]):not(.customer-package-native-select):not(.customer-package-search-native-select),
.page-body select:not([multiple]):not(.customer-package-native-select):not(.customer-package-search-native-select),
.customer-package-search-trigger {
  min-height: var(--rk-dropdown-control-height) !important;
  height: var(--rk-dropdown-control-height) !important;
  padding: var(--rk-dropdown-control-padding) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rk-dropdown-control-radius) !important;
  background-color: var(--surface) !important;
  color: var(--text) !important;
  font-size: 12.8px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

select:not([multiple]):not(.customer-package-native-select):not(.customer-package-search-native-select),
.page-body select:not([multiple]):not(.customer-package-native-select):not(.customer-package-search-native-select) {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 44%, var(--rk-dropdown-chevron-color) 45% 55%, transparent 56%),
    linear-gradient(135deg, transparent 44%, var(--rk-dropdown-chevron-color) 45% 55%, transparent 56%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50% !important;
  background-size: var(--rk-dropdown-chevron-size) var(--rk-dropdown-chevron-size), var(--rk-dropdown-chevron-size) var(--rk-dropdown-chevron-size) !important;
  background-repeat: no-repeat !important;
}

/* Global Show entries contract: values up to 1000 remain fully readable. */
:where(.entries-control, .user-entries, .finance-report-length, .app-log-dt-show, .rk-auto-table-entries, .online-payment-length, .portal-ticket-length, .session-entries-control, .router-entries-control, .topup-table-length) select:not([multiple]),
select[name="limit"]:not([multiple]),
select[data-session-limit]:not([multiple]) {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  padding-left: 10px !important;
  padding-right: 36px !important;
}

/* Toolbar select shells use the same native chevron rather than their old overlay. */
.rk-select-shell .rk-select-caret {
  display: none !important;
}

/* Every enhanced dropdown, including Owner Data, renders this real caret element. */
.customer-package-search-caret {
  width: var(--rk-dropdown-chevron-size) !important;
  height: var(--rk-dropdown-chevron-size) !important;
  margin-right: 2px !important;
  border-right: var(--rk-dropdown-chevron-stroke) solid currentColor !important;
  border-bottom: var(--rk-dropdown-chevron-stroke) solid currentColor !important;
  color: var(--rk-dropdown-chevron-color) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: rotate(45deg) translateY(-2px) !important;
}

/* The enhanced Theme selector must extend beyond its compact settings card. */
.settings-theme-card,
.settings-theme-card :where(.settings-form-section, .field, .customer-package-search) {
  overflow: visible !important;
}

.settings-theme-card { position: relative; z-index: 2; }
.settings-theme-card .customer-package-search.is-open { z-index: 100; }

/* BEGIN ui-v1.6.954 RadiusKu Clean performance layer */
html[data-theme="radiusku-clean"] body[data-shell="app"] {
  background: var(--bg) !important;
}

html[data-theme="radiusku-clean"] :where(.sidebar, .topbar, .dropdown-menu, .action-dropdown-menu, .rk-dropdown-menu, .customer-package-search-panel) {
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="radiusku-clean"] :where(.card, .rk-card, .table-card, .dashboard-panel, .settings-card, .settings-compact-card, .profile-compact-card, .package-profile-card, .tool-system-card, .system-section-card, .quick-panel) {
  box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
}
/* END ui-v1.6.954 RadiusKu Clean performance layer */

/* Theme layers use an html attribute selector, so this final layer matches it. */
html[data-theme] {
  --rk-type-body: 14px;
  --rk-type-control: 13px;
  --rk-type-label: 12px;
  --rk-type-small: 12px;
  --rk-type-table: 13px;
  --rk-type-table-head: 12px;
}

html[data-theme] body {
  font-family: var(--rk-font-ui) !important;
  font-size: var(--rk-type-body) !important;
  line-height: 1.45 !important;
}

html[data-theme] :where(button, input, select, textarea, .btn, .icon-btn, .rk-action-btn, .mini-action, .table-action-icon-btn, .dropdown-item, .action-dropdown-item, .rk-dropdown-item) {
  font-family: var(--rk-font-ui) !important;
  font-size: var(--rk-type-control) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none;
}

html[data-theme] :where(.field label, .label, .party-title, .settings-section-title, .table-meta, .customer-list-info, .billing-summary-text, .entries-control, .card-subtitle, .compact-sub, .data-sub, .help, .small, .muted, .helper-text) {
  font-size: var(--rk-type-small) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html[data-theme] :where(.field label, .label, .party-title, .settings-section-title) {
  font-size: var(--rk-type-label) !important;
  font-weight: 700 !important;
}

html[data-theme] :where(.page-title) {
  font-size: 18px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

html[data-theme] :where(.card-title, .panel-title, .finance-report-title, .quick-panel-title, .table-title) {
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

html[data-theme] :where(table, .rk-table, .compact-table, .user-table, .package-table, .finance-table, .billing-compact-table, .billing-report-table, .customer-report-table, .topup-compact-table, .profile-compact-table, .app-log-table, .router-table, .session-table, .system-table, .online-payment-table, .voucher-compact-table, .voucher-report-table, .invoice-report-table, .tool-db-backup-table, .tool-db-jobs-table, .tool-import-preview-table, .tool-import-jobs-table) {
  font-family: var(--rk-font-ui) !important;
  font-size: var(--rk-type-table) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

html[data-theme] :where(tbody td) {
  font-family: var(--rk-font-ui) !important;
  font-size: var(--rk-type-table) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

html[data-theme] :where(.data-main, .compact-main, .ppp-name-text, .router-name, .profile-name, .package-name, .invoice-number, .finance-row-title) {
  font-size: var(--rk-type-table) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html[data-theme] :where(.data-sub, .compact-sub, .ppp-name-only, .router-sub, .profile-sub, .package-sub, .finance-row-sub) {
  font-size: var(--rk-type-small) !important;
  line-height: 1.35 !important;
}

html[data-theme] :where(.badge, .status-badge, .status-pill, .badge-mini, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge) {
  font-family: var(--rk-font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (max-width: 640px) {
  html[data-theme] {
    --rk-type-body: 13px;
    --rk-type-control: 12.5px;
    --rk-type-table: 12px;
    --rk-type-table-head: 11px;
  }
}

html[data-theme] body[data-shell="app"] :where(.page-title) {
  font-size: 18px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] :where(.card-title, .panel-title, .finance-report-title, .quick-panel-title, .table-title) {
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] :where(.btn, .icon-btn, .rk-action-btn, .mini-action, .table-action-icon-btn, .dropdown-item, .action-dropdown-item, .rk-dropdown-item, input, select, textarea) {
  font-size: var(--rk-type-control) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none;
}

html[data-theme] body[data-shell="app"] :where(.field label, .label, .party-title, .settings-section-title, .table-meta, .customer-list-info, .billing-summary-text, .entries-control, .card-subtitle, .compact-sub, .data-sub, .help, .small, .muted, .helper-text) {
  font-size: var(--rk-type-small) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] :where(.field label, .label, .party-title, .settings-section-title) {
  font-size: var(--rk-type-label) !important;
  font-weight: 700 !important;
}

html[data-theme] body[data-shell="app"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table {
  font-family: var(--rk-font-ui) !important;
  font-size: var(--rk-type-table) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table :where(tbody td) {
  font-family: var(--rk-font-ui) !important;
  font-size: var(--rk-type-table) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table :where(.data-main, .compact-main, .ppp-name-text, .router-name, .profile-name, .package-name, .invoice-number, .finance-row-title) {
  font-size: var(--rk-type-table) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table :where(.data-sub, .compact-sub, .ppp-name-only, .router-sub, .profile-sub, .package-sub, .finance-row-sub) {
  font-size: var(--rk-type-small) !important;
  line-height: 1.35 !important;
}

/* Keep every data value visually equal; table controls retain their own weight. */
html[data-theme] body[data-shell="app"] :where(.table-wrap, .rk-table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) > table :where(td, td *, .data-main, .compact-main, .ppp-name-text, .ppp-name-only, .router-name, .router-sub, .profile-name, .profile-sub, .package-name, .package-sub, .invoice-number, .finance-row-title, .finance-row-sub, .badge, .status-badge, .status-pill, .badge-mini, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge) {
  font-weight: 400 !important;
}

/* Keep the Bandwidth list readable without allowing short columns to steal rate-limit space. */
html[data-theme] body[data-shell="app"] .package-table {
  --rk-table-min-width: 1070px !important;
  width: max(100%, 1070px) !important;
  min-width: max(100%, 1070px) !important;
  table-layout: fixed;
}

html[data-theme] body[data-shell="app"] .package-table :where(th:nth-child(1), td:nth-child(1)) { width: 44px !important; }
html[data-theme] body[data-shell="app"] .package-table :where(th:nth-child(2), td:nth-child(2)) { width: 150px !important; }
html[data-theme] body[data-shell="app"] .package-table :where(th:nth-child(3), td:nth-child(3)) { width: 145px !important; }
html[data-theme] body[data-shell="app"] .package-table :where(th:nth-child(4), td:nth-child(4)),
html[data-theme] body[data-shell="app"] .package-table :where(th:nth-child(5), td:nth-child(5)) { width: 190px !important; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .package-table :where(th:nth-child(6), td:nth-child(6)) { width: 100px !important; text-align: center; }
html[data-theme] body[data-shell="app"] .package-table :where(th:nth-child(7), td:nth-child(7)) { width: 150px !important; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .package-table :where(th:nth-child(8), td:nth-child(8)) { width: 101px !important; white-space: nowrap; }

.network-map {
  height: min(54vh, 480px);
  min-height: 280px;
  margin: 0;
  border: 1px solid var(--rk-border, #d7dee3);
  border-radius: 6px;
  background: #dce9df;
}

.network-map > i {
  display: none;
}

.mapping-create-form summary {
  list-style: none;
  cursor: pointer;
}

.mapping-create-form summary::-webkit-details-marker {
  display: none;
}

.mapping-create-form {
  margin-top: 14px;
}

.mapping-create-card {
  margin-top: 12px;
}

.mapping-edit-row > td {
  padding: 0 !important;
  background: var(--surface-muted, #f7f9fa);
}

.mapping-edit-form {
  padding: 10px 14px 14px;
}

.mapping-edit-form summary {
  cursor: pointer;
  color: var(--primary-strong);
  font-size: 13px;
}

.mapping-edit-form[open] form {
  margin-top: 12px;
}

.mapping-row-actions {
  position: relative;
}

.mapping-create-inner {
  padding-top: 14px;
}

.mapping-form-hint {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}

/* Final cascade authority for every app, public, and document surface. */
:root {
  --radius-xs: 0px !important;
  --radius-sm: 0px !important;
  --radius-md: 0px !important;
  --radius-lg: 0px !important;
  --radius-xl: 0px !important;
  --radius-2xl: 0px !important;
}

html:not(#rk-square-corner-exempt),
html:not(#rk-square-corner-exempt) body,
html:not(#rk-square-corner-exempt) body *:not(#rk-square-corner-exempt):not(.olt-refresh-spinner):not(.rk-loading-spinner):not(.update-progress-spinner):not(.profile-avatar):not(.profile-avatar *):not(.user-avatar-thumb):not(.user-avatar-fallback):not(.portal-ticket-avatar):not(.wa-unread-badge):not(.topbar-warning-badge):not(.online-payment-status-dot):not([type="radio"]),
html:not(#rk-square-corner-exempt) body *:not(#rk-square-corner-exempt)::before,
html:not(#rk-square-corner-exempt) body *:not(#rk-square-corner-exempt)::after {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

:is(.olt-refresh-spinner, .rk-loading-spinner, .update-progress-spinner, .profile-avatar, .profile-avatar img, .user-avatar-thumb, .user-avatar-fallback, .portal-ticket-avatar, .wa-unread-badge, .topbar-warning-badge, .online-payment-status-dot, input[type="radio"]) {
  border-radius: 50% !important;
}

@media (max-width: 640px) {
  .network-map {
    height: 360px;
    min-height: 0;
  }
}

/* Canonical operational table system: legacy family classes keep semantics, not visuals. */
:root {
  --rk-table-min-width: 760px;
  --rk-table-font-size: 12px;
  --rk-table-head-font-size: 11px;
  --rk-table-cell-pad-y: 10px;
  --rk-table-cell-pad-x: 12px;
}

:where(.rk-table-wrap, .table-wrap, .compact-table-wrap, .ppp-compact-wrap, .billing-compact-wrap, .billing-report-table-wrap, .finance-table-wrap, .finance-report-table-wrap, .customer-report-table-wrap, .topup-compact-wrap, .profile-compact-wrap, .hotspot-profile-fit-wrap, .tool-import-preview-wrap, .app-log-table-wrap, .router-table-wrap, .session-table-wrap, .system-table-wrap, .invoice-report-table-wrap, .voucher-report-table-wrap, .online-payment-wrap) {
  width: 100% !important;
  overflow: auto !important;
  position: relative !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--table-scrollbar) var(--table-scrollbar-track);
}

table.rk-table:not(.rk-table--document) {
  width: 100% !important;
  min-width: var(--rk-table-min-width) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  color: var(--text) !important;
  font-size: var(--rk-table-font-size) !important;
}

table.rk-table:not(.rk-table--document) th,
table.rk-table:not(.rk-table--document) td {
  padding: var(--rk-table-cell-pad-y) var(--rk-table-cell-pad-x) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--table-row-border, var(--border)) !important;
  vertical-align: middle !important;
  text-align: left !important;
  line-height: 1.35 !important;
}

table.rk-table:not(.rk-table--document) thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  color: var(--text-soft) !important;
  background: var(--table-head-bg) !important;
  border-bottom-color: var(--table-head-border, var(--border)) !important;
}

table.rk-table:not(.rk-table--document) tbody td {
  color: var(--text-soft) !important;
  background: transparent !important;
}

table.rk-table:not(.rk-table--document) tbody tr:hover td {
  color: var(--text) !important;
  background: var(--table-row-hover) !important;
}

table.rk-table:not(.rk-table--document) tbody tr:last-child td {
  border-bottom: 0 !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="select"] {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding-inline: 8px !important;
  text-align: center !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Fixed-width sequence columns prevent row numbers from consuming table space. */
:root {
  --rk-sequence-column-width: 52px;
}

table.rk-table:not(.rk-table--document) [data-rk-col="sequence"] {
  width: var(--rk-sequence-column-width) !important;
  min-width: var(--rk-sequence-column-width) !important;
  max-width: var(--rk-sequence-column-width) !important;
  padding-inline: 8px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

table.rk-table:not(.rk-table--document) .check-col {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding-inline: 8px !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="id"],
table.rk-table:not(.rk-table--document) [data-rk-col="customer-id"] {
  width: 100px !important;
  min-width: 100px !important;
  white-space: nowrap !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="pop"] {
  min-width: 82px !important;
  white-space: nowrap !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="name"],
table.rk-table:not(.rk-table--document) [data-rk-col="user"] {
  min-width: 178px !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="email"],
table.rk-table:not(.rk-table--document) [data-rk-col="description"],
table.rk-table:not(.rk-table--document) [data-rk-col="summary-value"],
table.rk-table:not(.rk-table--document) [data-rk-col="service-detail"] {
  min-width: 210px;
}

table.rk-table:not(.rk-table--document) [data-rk-col="service"],
table.rk-table:not(.rk-table--document) [data-rk-col="package"],
table.rk-table:not(.rk-table--document) [data-rk-col="profile"] {
  min-width: 128px !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="service"] {
  min-width: 78px !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="phone"],
table.rk-table:not(.rk-table--document) [data-rk-col="password"],
table.rk-table:not(.rk-table--document) [data-rk-col="role"],
table.rk-table:not(.rk-table--document) [data-rk-col="access"],
table.rk-table:not(.rk-table--document) [data-rk-col="category"],
table.rk-table:not(.rk-table--document) [data-rk-col="setting"],
table.rk-table:not(.rk-table--document) [data-rk-col="network-location"] {
  min-width: 136px;
}

table.rk-table:not(.rk-table--document) [data-rk-col="ip"],
table.rk-table:not(.rk-table--document) [data-rk-col="date"],
table.rk-table:not(.rk-table--document) [data-rk-col="datetime"],
table.rk-table:not(.rk-table--document) [data-rk-col="due-date"],
table.rk-table:not(.rk-table--document) [data-rk-col="period"] {
  min-width: 96px !important;
  white-space: nowrap !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="ip"] {
  min-width: 80px !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="due-date"] {
  min-width: 108px !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="status"],
table.rk-table:not(.rk-table--document) [data-rk-col="owner"] {
  min-width: 100px !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="owner"] {
  min-width: 82px !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="amount"],
table.rk-table:not(.rk-table--document) [data-rk-col="balance"],
table.rk-table:not(.rk-table--document) [data-rk-col="fee"],
table.rk-table:not(.rk-table--document) [data-rk-col="profit"],
table.rk-table:not(.rk-table--document) [data-rk-col="count"],
table.rk-table:not(.rk-table--document) [data-rk-col="file-size"] {
  min-width: 118px;
  text-align: right !important;
  white-space: nowrap;
}

table.rk-table:not(.rk-table--document) [data-rk-col="invoice"],
table.rk-table:not(.rk-table--document) [data-rk-col="reference"],
table.rk-table:not(.rk-table--document) [data-rk-col="serial"],
table.rk-table:not(.rk-table--document) [data-rk-col="network-port"],
table.rk-table:not(.rk-table--document) [data-rk-col="network-device"],
table.rk-table:not(.rk-table--document) [data-rk-col="voucher-server"] {
  min-width: 150px;
  white-space: nowrap;
}

table.rk-table:not(.rk-table--document) [data-rk-col="bandwidth"],
table.rk-table:not(.rk-table--document) [data-rk-col="signal"],
table.rk-table:not(.rk-table--document) [data-rk-col="payment-method"],
table.rk-table:not(.rk-table--document) [data-rk-col="duration"],
table.rk-table:not(.rk-table--document) [data-rk-col="duration-quantity"],
table.rk-table:not(.rk-table--document) [data-rk-col="quantity"] {
  min-width: 112px;
  white-space: nowrap;
}

table.rk-table:not(.rk-table--document) [data-rk-col="document"],
table.rk-table:not(.rk-table--document) [data-rk-col="log-action"],
table.rk-table:not(.rk-table--document) [data-rk-col="transaction"],
table.rk-table:not(.rk-table--document) [data-rk-col="router-info"],
table.rk-table:not(.rk-table--document) [data-rk-col="notification-recipient"],
table.rk-table:not(.rk-table--document) [data-rk-col="customer-notification"] {
  min-width: 156px;
}

table.rk-table:not(.rk-table--document) [data-rk-col="variable-label"],
table.rk-table:not(.rk-table--document) [data-rk-col="summary-label"] {
  width: 42%;
  min-width: 150px;
  font-weight: 700;
}

table.rk-table:not(.rk-table--document) [data-rk-col="renew-print"],
table.rk-table:not(.rk-table--document) [data-rk-col="actions"] {
  min-width: 70px !important;
  white-space: nowrap !important;
}

table.rk-table:not(.rk-table--document) [data-rk-col="actions"] {
  min-width: 58px !important;
}

@media (max-width: 900px) {
  :root {
    --rk-table-cell-pad-y: 6px;
    --rk-table-cell-pad-x: 8px;
    --rk-table-font-size: 11.4px;
    --rk-table-head-font-size: 9.9px;
  }
}

/* Final authority: every column title uses one global font contract. */
:root {
  --rk-global-table-head-font: var(--rk-font-ui);
  --rk-global-table-head-size: 11px;
  --rk-global-table-head-weight: var(--rk-weight-semibold);
  --rk-global-table-head-leading: 1.16;
}

html body[data-shell] table.rk-table thead th,
html body[data-shell] table.rk-table thead th :where(a, span, strong, b, em, .rk-th-content, .rk-th-label, .customer-sort-link, .sort-mark, .table-sort-indicator) {
  font-family: var(--rk-global-table-head-font) !important;
  font-size: var(--rk-global-table-head-size) !important;
  font-weight: var(--rk-global-table-head-weight) !important;
  font-style: normal !important;
  line-height: var(--rk-global-table-head-leading) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html body[data-shell] table.rk-table thead th :where(.sort-mark, .table-sort-indicator) {
  color: currentColor !important;
}

/* OLT uses router action sizing; Monitoring needs its own settings glyph. */
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-row-actions .table-action-icon-btn.is-monitoring::before {
  content: "" !important;
  width: 15px !important;
  height: 15px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M475.584 192h-61.497l44.81-44.898c13.871-13.925 13.855-36.435-.065-50.301l-42.335-42.357c-14.652-14.603-38.316-14.603-52.915-.004L320 97.902V36.416C320 16.314 303.686 0 283.584 0h-55.168C208.314 0 192 16.314 192 36.416v61.486L148.397 54.42c-14.578-14.578-38.242-14.578-52.865-.005L53.135 96.833c-13.887 13.834-13.904 36.344-.046 50.254L97.913 192H36.416C16.314 192 0 208.314 0 228.416v55.168C0 303.686 16.314 320 36.416 320h61.498l-43.51 43.597c-14.566 14.665-14.551 38.288.036 52.875l41.063 41.084c14.652 14.603 38.316 14.603 52.915.004L192 414.098v61.486C192 495.686 208.314 512 228.416 512h55.168C303.686 512 320 495.686 320 475.584v-61.486l43.603 43.483c14.578 14.578 38.242 14.578 52.865.005l41.096-41.117c14.59-14.59 14.621-38.233.043-52.86L414.086 320h61.498C495.686 320 512 303.686 512 283.584v-55.168C512 208.314 495.686 192 475.584 192zM469.333 277.333h-69.12c-32.86 0-49.34 39.723-26.131 62.983l49.598 49.697-33.649 33.666-50.573-50.433c-22.915-22.915-62.125-6.648-62.125 25.772v70.315h-42.667v-70.315c0-32.421-39.211-48.687-62.146-25.752l-50.552 50.413-33.648-33.666 49.596-49.695c23.211-23.261 6.731-62.985-26.129-62.985h-69.12v-42.667h69.12c32.86 0 49.34-39.723 26.131-62.983l-49.599-49.696 33.65-33.667 50.572 50.433c22.915 22.915 62.125 6.648 62.125-25.772V42.667h42.667v70.315c0 32.421 39.211 48.687 62.146 25.752l50.552-50.413 33.65 33.667-49.597 49.694c-23.211 23.262-6.731 62.985 26.129 62.985h69.12v42.666z'/%3E%3Cpath d='M256 170.667c-47.131 0-85.333 38.202-85.333 85.333s38.202 85.333 85.333 85.333 85.333-38.202 85.333-85.333-38.202-85.333-85.333-85.333zm0 128c-23.567 0-42.667-19.099-42.667-42.667s19.099-42.667 42.667-42.667 42.667 19.099 42.667 42.667-19.1 42.667-42.667 42.667z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M475.584 192h-61.497l44.81-44.898c13.871-13.925 13.855-36.435-.065-50.301l-42.335-42.357c-14.652-14.603-38.316-14.603-52.915-.004L320 97.902V36.416C320 16.314 303.686 0 283.584 0h-55.168C208.314 0 192 16.314 192 36.416v61.486L148.397 54.42c-14.578-14.578-38.242-14.578-52.865-.005L53.135 96.833c-13.887 13.834-13.904 36.344-.046 50.254L97.913 192H36.416C16.314 192 0 208.314 0 228.416v55.168C0 303.686 16.314 320 36.416 320h61.498l-43.51 43.597c-14.566 14.665-14.551 38.288.036 52.875l41.063 41.084c14.652 14.603 38.316 14.603 52.915.004L192 414.098v61.486C192 495.686 208.314 512 228.416 512h55.168C303.686 512 320 495.686 320 475.584v-61.486l43.603 43.483c14.578 14.578 38.242 14.578 52.865.005l41.096-41.117c14.59-14.59 14.621-38.233.043-52.86L414.086 320h61.498C495.686 320 512 303.686 512 283.584v-55.168C512 208.314 495.686 192 475.584 192zM469.333 277.333h-69.12c-32.86 0-49.34 39.723-26.131 62.983l49.598 49.697-33.649 33.666-50.573-50.433c-22.915-22.915-62.125-6.648-62.125 25.772v70.315h-42.667v-70.315c0-32.421-39.211-48.687-62.146-25.752l-50.552 50.413-33.648-33.666 49.596-49.695c23.211-23.261 6.731-62.985-26.129-62.985h-69.12v-42.667h69.12c32.86 0 49.34-39.723 26.131-62.983l-49.599-49.696 33.65-33.667 50.572 50.433c22.915 22.915 62.125 6.648 62.125-25.772V42.667h42.667v70.315c0 32.421 39.211 48.687 62.146 25.752l50.552-50.413 33.65 33.667-49.597 49.694c-23.211 23.262-6.731 62.985 26.129 62.985h69.12v42.666z'/%3E%3Cpath d='M256 170.667c-47.131 0-85.333 38.202-85.333 85.333s38.202 85.333 85.333 85.333 85.333-38.202 85.333-85.333-38.202-85.333-85.333-85.333zm0 128c-23.567 0-42.667-19.099-42.667-42.667s19.099-42.667 42.667-42.667 42.667 19.099 42.667 42.667-19.1 42.667-42.667 42.667z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* OLT Configuration uses the dashboard's connected-tab language. */
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-settings-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px 8px 0 0 !important;
  border-bottom: 0 !important;
  background: var(--surface-soft) !important;
  box-shadow: 0 12px 24px -28px rgba(15, 23, 42, .7) !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-settings-tabs .settings-tab {
  min-height: 42px !important;
  margin: 8px 0 -1px !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-bottom-color: var(--border) !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--muted) !important;
  background: transparent !important;
  font-weight: 700 !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-settings-tabs .settings-tab:is(:hover, :focus-visible) {
  color: var(--text) !important;
  background: var(--primary-faint) !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-settings-tabs .settings-tab.is-active,
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-settings-tabs .settings-tab[aria-selected="true"] {
  z-index: 1;
  border-color: var(--border) !important;
  border-bottom-color: var(--surface) !important;
  color: var(--text) !important;
  background: var(--surface) !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-workspace {
  margin: 0 !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-settings-tabs + .olt-uplink-workspace {
  margin-top: -10px !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-settings-tabs + .card {
  margin-top: -10px !important;
  border-radius: 0 0 8px 8px !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-workspace .olt-uplink-card:first-child {
  border-radius: 0 0 8px 8px;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-card-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--primary-strong);
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-card-mark svg {
  display: block !important;
  position: relative !important;
  left: 17.5px !important;
  width: 38px !important;
  height: 32px !important;
  margin: 0 !important;
  max-width: none !important;
  transform: none !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-card-mark i {
  display: none;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-port {
  width: 96px;
  gap: 5px;
  padding: 8px 4px;
  border: 1px solid transparent;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-port:hover,
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-port:focus-visible {
  border-color: color-mix(in srgb, currentColor 28%, var(--border));
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-port-icon {
  width: 78px;
  height: 59px;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-port-icon svg {
  width: 76px;
  height: 57px;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-port-icon b {
  z-index: 1;
  color: #fff !important;
  background: currentColor !important;
  border-color: var(--surface) !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-port.is-up .olt-port-icon b { background: #15803d !important; }
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-port.is-down .olt-port-icon b { background: #b45309 !important; }
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-port.is-shutdown .olt-port-icon b { background: #b91c1c !important; }
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-port.is-unknown .olt-port-icon b { background: #64748b !important; }

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-port-copy small,
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-admin-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-link-state.is-up { color: #15803d; background: #dcfce7; }
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-link-state.is-down { color: #b45309; background: #fef3c7; }
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-link-state.is-unknown { color: #64748b; background: #f1f5f9; }
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-admin-state.is-no-shutdown { color: #0369a1; background: #e0f2fe; }
html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-uplink-admin-state.is-shutdown { color: #b91c1c; background: #fee2e2; }

@media (max-width: 640px) {
  html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-settings-tabs { padding: 0 6px !important; }
  html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-settings-tabs .settings-tab { min-height: 38px !important; margin-top: 6px !important; padding: 0 10px !important; font-size: 11px; }
}

html[data-theme] body[data-shell="app"] .olt-device-actions button.olt-save-config.is-pending {
  color: #fff !important;
  background: #dc2626 !important;
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .18) !important;
}

html[data-theme] body[data-shell="app"] .olt-device-actions button.olt-save-config.is-pending:is(:hover, :focus-visible) {
  color: #fff !important;
  background: #b91c1c !important;
  border-color: #991b1b !important;
}

/* Final OLT typography and connected-tab spacing. */
html[data-theme] body[data-shell="app"] :where([class*="olt-"], [class*="olt-"] *) {
  font-family: var(--rk-font-ui) !important;
  letter-spacing: 0 !important;
}

html[data-theme] body[data-shell="app"] .olt-settings-tabs .settings-tab {
  font-size: var(--rk-type-control) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

html[data-theme] body[data-shell="app"] .olt-settings-tabs + .olt-uplink-workspace {
  margin-top: -10px !important;
}

html[data-theme] body[data-shell="app"] .olt-uplink-workspace > .table-head {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px 12px !important;
}

/* ui-v1.7.125: keep every Hotspot voucher value visible; scroll only when needed. */
html[data-theme] body[data-shell="app"] .voucher-report-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-theme] body[data-shell="app"] .voucher-report-table-wrap > .voucher-compact-table {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: auto !important;
}

html[data-theme] body[data-shell="app"] .voucher-compact-table :where(th, td) {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-shell="app"] .voucher-compact-table :where(.data-main, .compact-main, .voucher-due-pill, .voucher-status-pill, .customer-sort-link) {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* ui-v1.7.126: data tables use full content width and scroll only when necessary. */
html[data-theme] body[data-shell="app"] :where(
  .table-wrap,
  .rk-table-wrap,
  .compact-table-wrap,
  .table-scroll,
  .ppp-compact-wrap,
  .billing-compact-wrap,
  .billing-report-table-wrap,
  .finance-table-wrap,
  .finance-report-table-wrap,
  .customer-report-table-wrap,
  .hotspot-customer-wrap,
  .topup-compact-wrap,
  .profile-compact-wrap,
  .hotspot-profile-fit-wrap,
  .settings-user-compact-wrap,
  .tool-import-preview-wrap,
  .app-log-table-wrap,
  .router-table-wrap,
  .session-table-wrap,
  .system-table-wrap,
  .invoice-report-table-wrap,
  .voucher-compact-wrap,
  .voucher-report-table-wrap,
  .online-payment-wrap,
  .rk-large-table-wrap,
  .rk-virtual-scroll-host,
  div:has(> table:not(.rk-table--document))
) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html[data-theme] body[data-shell="app"] table:not(.rk-table--document) {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: auto !important;
}

html[data-theme] body[data-shell="app"] table:not(.rk-table--document) :where(th, td) {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-shell="app"] table:not(.rk-table--document) :where(.data-main, .compact-main, .data-sub, .compact-sub, .muted, .compact-link, .badge, .status-badge, .status-pill, .customer-sort-link) {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* ui-v1.7.130: keep PPP customer names readable without expanding the table. */
html[data-theme="radiusku-clean"] body[data-shell="app"] table.customer-report-ppp-table col.customer-col-name {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] table.customer-report-ppp-table :where(th.ppp-name-col, td.ppp-name-col) {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}

html[data-theme] body[data-shell="app"] .customer-report-ppp-table .ppp-name-text,
html[data-theme] body[data-shell="app"] .customer-report-ppp-table .ppp-name-text .data-main {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ui-v1.7.131: data table columns keep a stable size as virtual rows load. */
html[data-theme] body[data-shell="app"] table:not(.rk-table--document) {
  width: max(100%, var(--rk-table-min-width, 920px)) !important;
  min-width: max(100%, var(--rk-table-min-width, 920px)) !important;
  max-width: none !important;
  table-layout: fixed !important;
}

html[data-theme] body[data-shell="app"] table:not(.rk-table--document) :where(th, td) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-shell="app"] table.rk-table:not(.rk-table--document) [data-rk-col="sequence"] {
  width: var(--rk-sequence-column-width) !important;
  min-width: var(--rk-sequence-column-width) !important;
  max-width: var(--rk-sequence-column-width) !important;
}

html[data-theme] body[data-shell="app"] table:not(.rk-table--document) :where(.data-main, .compact-main, .data-sub, .compact-sub, .muted, .compact-link, .badge, .status-badge, .status-pill, .customer-sort-link) {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-pon-card .olt-uplink-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-pon-card .olt-uplink-port-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
  }

  html[data-theme="radiusku-clean"] body[data-shell="app"] .olt-pon-card .olt-uplink-port {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* BEGIN ui-v1.7.156 ONU service editor layout */
#customer-onu-services-modal .rk-modal-card {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}

#customer-onu-services-modal .rk-modal-body {
  overflow: auto;
  padding: 14px;
}

#customer-onu-services-modal .extra-service-list {
  display: grid;
  gap: 10px;
}

#customer-onu-services-modal .extra-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

#customer-onu-services-modal .extra-service-actions {
  display: contents;
}

#customer-onu-services-modal .extra-service-row > .help {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

#customer-onu-services-modal .extra-service-row > .rk-form-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
  width: 100%;
  margin-top: 2px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

#customer-onu-services-modal .extra-service-row > .rk-form-grid .field {
  min-width: 0;
  gap: 4px;
}

#customer-onu-services-modal .extra-service-row > .rk-form-grid label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

#customer-onu-services-modal .extra-service-row > .rk-form-grid input {
  min-width: 0;
  height: 34px;
  padding: 6px 9px;
  font-size: 12px;
}

#customer-onu-services-modal .extra-service-row > .rk-form-grid .field-span-2 {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  #customer-onu-services-modal .rk-modal-card {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  #customer-onu-services-modal .extra-service-row > .rk-form-grid {
    grid-template-columns: 1fr;
  }
}
/* END ui-v1.7.156 ONU service editor layout */

/* BEGIN ui-v1.7.161 ONU service port picker */
#customer-onu-services-modal .onu-service-port-field {
  gap: 6px;
}

#customer-onu-services-modal .onu-service-port-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#customer-onu-services-modal .onu-service-port {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4px;
  min-width: 48px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}

#customer-onu-services-modal .onu-service-port-icon {
  display: block;
  width: 34px;
  height: 30px;
}

#customer-onu-services-modal .onu-service-port-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

#customer-onu-services-modal .onu-service-port--wifi .onu-service-port-icon svg {
  stroke-width: 2;
}

#customer-onu-services-modal .onu-service-port--wifi .onu-service-port-icon circle {
  fill: currentColor;
  stroke: none;
}

#customer-onu-services-modal .onu-service-port:hover,
#customer-onu-services-modal .onu-service-port:focus-visible {
  color: var(--primary);
}

#customer-onu-services-modal .onu-service-port.is-selected {
  color: var(--success);
}

#customer-onu-services-modal .onu-service-port.is-selected .onu-service-port-icon {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--success) 38%, transparent));
}
/* END ui-v1.7.161 ONU service port picker */

/* BEGIN ui-v1.7.168 application-wide visual refresh */
html[data-theme="radiusku-clean"],
body[data-theme="radiusku-clean"] {
  --bg: #edf3f9;
  --bg-soft: #dfebf7;
  --bg-elev: #ffffff;
  --bg-elev-2: #e8f0f8;
  --bg-card: rgba(255, 255, 255, .92);
  --surface: rgba(255, 255, 255, .9);
  --surface-soft: #edf4fa;
  --surface-strong: #ffffff;
  --border: rgba(37, 78, 113, .14);
  --border-strong: rgba(37, 78, 113, .25);
  --text: #1f364d;
  --text-soft: #3c5872;
  --muted: #6d849b;
  --muted-2: #9aabba;
  --primary: #356b94;
  --primary-strong: #285777;
  --primary-soft: rgba(53, 107, 148, .12);
  --primary-faint: rgba(53, 107, 148, .055);
  --success: #15803d;
  --success-soft: rgba(21, 128, 61, .12);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, .13);
  --danger: #c2413b;
  --danger-soft: rgba(194, 65, 59, .11);
  --info: #087ea4;
  --info-soft: rgba(8, 126, 164, .11);
  --purple: #7c3f9f;
  --purple-soft: rgba(124, 63, 159, .1);
  --chip-bg: rgba(37, 78, 113, .065);
  --chip-text: #304b64;
  --input-bg: rgba(255, 255, 255, .95);
  --input-border: rgba(37, 78, 113, .2);
  --input-focus: rgba(53, 107, 148, .2);
  --table-head-bg: #dfebf7;
  --table-row-hover: rgba(8, 126, 164, .07);
  --sidebar-bg: rgba(250, 252, 255, .94);
  --topbar-bg: rgba(255, 255, 255, .82);
  --dropdown-bg: #ffffff;
  --modal-bg: #ffffff;
  --modal-text: #1f364d;
  --modal-border: rgba(37, 78, 113, .18);
  --shadow: 0 18px 38px rgba(34, 70, 102, .13);
  --shadow-soft: 0 8px 20px rgba(34, 70, 102, .09);
  --shadow-sm: 0 2px 7px rgba(34, 70, 102, .08);
}

body[data-theme="radiusku-clean"] {
  background:
    linear-gradient(118deg, rgba(53, 107, 148, .075), transparent 34%),
    linear-gradient(242deg, rgba(98, 143, 183, .055), transparent 42%),
    var(--bg) !important;
}

html[data-theme="radiusku-clean"] .sidebar,
html[data-theme="radiusku-clean"] .topbar {
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html[data-theme="radiusku-clean"] .sidebar {
  border-right-color: rgba(53, 107, 148, .18);
}

html[data-theme="radiusku-clean"] .topbar {
  border-bottom-color: rgba(53, 107, 148, .14);
}

html[data-theme="radiusku-clean"] .brand-mark,
html[data-theme="radiusku-clean"] .logo-mark,
html[data-theme="radiusku-clean"] .profile-avatar,
html[data-theme="radiusku-clean"] .user-avatar-fallback {
  background: #356b94 !important;
  box-shadow: 0 8px 18px rgba(53, 107, 148, .22) !important;
}

html[data-theme="radiusku-clean"] .nav-item.active,
html[data-theme="radiusku-clean"] .nav-item[aria-expanded="true"],
html[data-theme="radiusku-clean"] .nav-sub.active {
  background: #356b94;
  box-shadow: 0 9px 18px rgba(53, 107, 148, .2);
}

html[data-theme="radiusku-clean"] :where(.card, .rk-card, .table-card, .dashboard-panel, .settings-card, .settings-compact-card, .profile-compact-card, .package-profile-card, .tool-system-card, .system-section-card, .quick-panel) {
  border-color: rgba(37, 78, 113, .13);
  box-shadow: var(--shadow-soft);
}

html[data-theme="radiusku-clean"] :where(.rk-card-head, .table-head, .rk-table-head, .card-header, .modal-head, .rk-modal-head, .quick-panel-header, .finance-report-head, .tool-import-preview-head, .system-control-head) {
  background: linear-gradient(90deg, rgba(53, 107, 148, .075), rgba(98, 143, 183, .04), transparent 72%);
}

html[data-theme="radiusku-clean"] .toolbar,
html[data-theme="radiusku-clean"] .rk-toolbar {
  border-color: rgba(53, 107, 148, .16);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-sm);
}

html[data-theme="radiusku-clean"] .btn:not(.btn-ghost):not(.btn-soft):not(.btn-danger):not(.btn-danger-soft):not(.btn-success),
html[data-theme="radiusku-clean"] .mini-action:not(.is-delete):not(.is-view):not(.is-edit):not(.is-print):not(.is-download):not(.is-renew):not(.is-test):not(.is-lock),
html[data-theme="radiusku-clean"] .table-action-icon-btn:not(.is-delete):not(.is-view):not(.is-edit):not(.is-print):not(.is-download):not(.is-renew):not(.is-test):not(.is-lock) {
  --btn-bg: #356b94;
  --btn-border: #285777;
  box-shadow: 0 7px 15px rgba(53, 107, 148, .18) !important;
}

html[data-theme="radiusku-clean"] .btn:hover,
html[data-theme="radiusku-clean"] .icon-btn:hover,
html[data-theme="radiusku-clean"] .rk-action-btn:hover,
html[data-theme="radiusku-clean"] .mini-action:hover,
html[data-theme="radiusku-clean"] .table-action-icon-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(53, 107, 148, .18) !important;
}

html[data-theme="radiusku-clean"] thead th {
  color: #42647f;
  box-shadow: inset 0 -1px rgba(53, 107, 148, .11);
}

html[data-theme="radiusku-clean"] tbody tr:nth-child(even) td {
  background: rgba(53, 107, 148, .018);
}

html[data-theme="radiusku-clean"] tbody tr:hover td {
  background: var(--table-row-hover);
}

html[data-theme="radiusku-clean"] :where(.badge, .status-badge, .status-pill, .badge-mini, .finance-status-badge, .customer-status-badge, .service-type-badge, .extra-service-bill-badge) {
  box-shadow: inset 0 1px rgba(255, 255, 255, .45);
}

@media (prefers-reduced-motion: no-preference) {
  body[data-shell="app"] .page-body > * {
    animation: rk-page-surface-in .28s ease both;
  }
}

@keyframes rk-page-surface-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* END ui-v1.7.168 application-wide visual refresh */

/* BEGIN ui-v1.7.169 visual refresh shell alignment */
html[data-theme="radiusku-clean"] body[data-shell="app"][data-theme="radiusku-clean"] {
  background:
    linear-gradient(118deg, rgba(53, 107, 148, .075), transparent 34%),
    linear-gradient(242deg, rgba(98, 143, 183, .055), transparent 42%),
    var(--bg) !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .workspace {
  background:
    linear-gradient(118deg, rgba(53, 107, 148, .055), transparent 36%),
    linear-gradient(242deg, rgba(98, 143, 183, .045), transparent 46%),
    var(--bg);
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .sidebar {
  border-right-color: rgba(174, 207, 235, .2) !important;
  background: linear-gradient(180deg, #294f6f 0%, #213f5a 57%, #1a324a 100%) !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .sidebar :where(.brand-copy strong, .nav-item, .nav-sub, .version-stack, .version-button) {
  color: #e7f1fa;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .sidebar :where(.brand-copy span, .sidebar-label, .version-line span) {
  color: #a9c0d4;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .sidebar .nav-item:hover,
html[data-theme="radiusku-clean"] body[data-shell="app"] .sidebar .nav-sub:hover {
  background: rgba(174, 207, 235, .12);
  border-color: rgba(174, 207, 235, .2);
  color: #ffffff;
}
/* END ui-v1.7.169 visual refresh shell alignment */

/* BEGIN ui-v1.7.171 restore original RadiusKu Clean */
html[data-theme="radiusku-clean"],
body[data-theme="radiusku-clean"] {
  --bg: #f4f7fb;
  --bg-soft: #eef3f8;
  --bg-elev: #ffffff;
  --bg-elev-2: #f8fafc;
  --bg-card: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-strong: #ffffff;
  --border: rgba(15,23,42,.12);
  --border-strong: rgba(15,23,42,.22);
  --text: #111827;
  --text-soft: #374151;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: rgba(37,99,235,.11);
  --primary-faint: rgba(37,99,235,.055);
  --success: #15803d;
  --success-soft: rgba(21,128,61,.12);
  --warn: #b45309;
  --warn-soft: rgba(180,83,9,.13);
  --danger: #dc2626;
  --danger-soft: rgba(220,38,38,.11);
  --info: #0369a1;
  --info-soft: rgba(3,105,161,.11);
  --purple: #7c3aed;
  --purple-soft: rgba(124,58,237,.11);
  --chip-bg: rgba(15,23,42,.06);
  --chip-text: #1f2937;
  --input-bg: #ffffff;
  --input-border: rgba(15,23,42,.18);
  --input-focus: rgba(37,99,235,.24);
  --table-head-bg: #f1f5f9;
  --table-row-hover: rgba(37,99,235,.055);
  --sidebar-bg: #ffffff;
  --topbar-bg: rgba(255,255,255,.96);
  --dropdown-bg: #ffffff;
  --modal-bg: #ffffff;
  --modal-text: #111827;
  --modal-border: rgba(15,23,42,.14);
  --shadow: 0 14px 28px rgba(15,23,42,.10);
  --shadow-soft: 0 6px 16px rgba(15,23,42,.07);
  --shadow-sm: 0 1px 4px rgba(15,23,42,.06);
}

html[data-theme="radiusku-clean"] body[data-shell="app"][data-theme="radiusku-clean"],
html[data-theme="radiusku-clean"] body[data-shell="app"] .workspace {
  background: var(--bg) !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .sidebar {
  border-right-color: var(--border) !important;
  background: linear-gradient(180deg, #172235 0%, #111a29 56%, #0d1522 100%) !important;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .sidebar :where(.brand-copy strong, .nav-item, .nav-sub, .version-stack, .version-button) {
  color: #dbe4ee;
}

html[data-theme="radiusku-clean"] body[data-shell="app"] .sidebar :where(.brand-copy span, .sidebar-label, .version-line span) {
  color: #94a3b8;
}

html[data-theme="radiusku-clean"] .sidebar,
html[data-theme="radiusku-clean"] .topbar {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="radiusku-clean"] :where(.card, .rk-card, .table-card, .dashboard-panel, .settings-card, .settings-compact-card, .profile-compact-card, .package-profile-card, .tool-system-card, .system-section-card, .quick-panel) {
  border-color: var(--border);
  box-shadow: none;
}

html[data-theme="radiusku-clean"] :where(.rk-card-head, .table-head, .rk-table-head, .card-header, .modal-head, .rk-modal-head, .quick-panel-header, .finance-report-head, .tool-import-preview-head, .system-control-head) {
  background: transparent;
}

html[data-theme="radiusku-clean"] .toolbar,
html[data-theme="radiusku-clean"] .rk-toolbar {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

html[data-theme="radiusku-clean"] .btn:not(.btn-ghost):not(.btn-soft):not(.btn-danger):not(.btn-danger-soft):not(.btn-success),
html[data-theme="radiusku-clean"] .mini-action:not(.is-delete):not(.is-view):not(.is-edit):not(.is-print):not(.is-download):not(.is-renew):not(.is-test):not(.is-lock),
html[data-theme="radiusku-clean"] .table-action-icon-btn:not(.is-delete):not(.is-view):not(.is-edit):not(.is-print):not(.is-download):not(.is-renew):not(.is-test):not(.is-lock) {
  --btn-bg: var(--primary);
  --btn-border: var(--primary);
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] .btn:hover,
html[data-theme="radiusku-clean"] .icon-btn:hover,
html[data-theme="radiusku-clean"] .rk-action-btn:hover,
html[data-theme="radiusku-clean"] .mini-action:hover,
html[data-theme="radiusku-clean"] .table-action-icon-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

html[data-theme="radiusku-clean"] thead th {
  color: var(--text-soft);
  box-shadow: none;
}

html[data-theme="radiusku-clean"] tbody tr:nth-child(even) td,
html[data-theme="radiusku-clean"] tbody tr:hover td {
  background: transparent;
}

body[data-shell="app"] .page-body > * {
  animation: none !important;
}
/* END ui-v1.7.171 restore original RadiusKu Clean */

/* Customer summary icons use deterministic geometry instead of font glyphs. */
html[data-theme] body[data-shell="app"] .customer-report-kpi .customer-summary-icon {
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html[data-theme] body[data-shell="app"] .customer-report-kpi .customer-summary-icon::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--rk-customer-summary-icon) center / contain no-repeat;
  mask: var(--rk-customer-summary-icon) center / contain no-repeat;
}

html[data-theme] body[data-shell="app"] .customer-report-kpi.is-registration .customer-summary-icon {
  --rk-customer-summary-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.5 2.5L16 9'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] .customer-report-kpi.is-renewal .customer-summary-icon {
  --rk-customer-summary-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M20 11a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v6h-6'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] .customer-report-kpi.is-isolated .customer-summary-icon {
  --rk-customer-summary-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='m12 3 9 16H3Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] .customer-report-kpi.is-account-disabled .customer-summary-icon {
  --rk-customer-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m5.6 5.6 12.8 12.8'/%3E%3C/svg%3E");
}

/* Status summaries use semantic accents instead of their grid position. */
html[data-theme] body[data-shell="app"] :is(
  .router-report-kpi.is-total,
  .customer-report-kpi.is-registration
) {
  --card-accent: var(--primary) !important;
  --card-accent-soft: var(--primary-soft) !important;
}

html[data-theme] body[data-shell="app"] :is(
  .router-report-kpi.is-active,
  .customer-report-kpi.is-renewal
) {
  --card-accent: var(--success) !important;
  --card-accent-soft: var(--success-soft) !important;
}

html[data-theme] body[data-shell="app"] .router-report-kpi.is-online {
  --card-accent: var(--info) !important;
  --card-accent-soft: var(--info-soft) !important;
}

html[data-theme] body[data-shell="app"] :is(
  .router-report-kpi.is-never,
  .customer-report-kpi.is-isolated
) {
  --card-accent: var(--warn) !important;
  --card-accent-soft: var(--warn-soft) !important;
}

html[data-theme] body[data-shell="app"] :is(
  .router-report-kpi.is-offline,
  .customer-report-kpi.is-account-disabled
) {
  --card-accent: var(--danger) !important;
  --card-accent-soft: var(--danger-soft) !important;
}

html[data-theme] body[data-shell="app"] .finance-report-kpi:has(.finance-report-kpi-icon.is-income) {
  --card-accent: var(--success) !important;
  --card-accent-soft: var(--success-soft) !important;
}

html[data-theme] body[data-shell="app"] .finance-report-kpi:has(.finance-report-kpi-icon.is-fee) {
  --card-accent: var(--warn) !important;
  --card-accent-soft: var(--warn-soft) !important;
}

html[data-theme] body[data-shell="app"] .finance-profit-kpi:has(.finance-report-kpi-icon.is-fee) {
  --card-accent: var(--danger) !important;
  --card-accent-soft: var(--danger-soft) !important;
}

html[data-theme] body[data-shell="app"] .finance-report-kpi:has(.finance-report-kpi-icon.is-tax) {
  --card-accent: var(--info) !important;
  --card-accent-soft: var(--info-soft) !important;
}

html[data-theme] body[data-shell="app"] .finance-report-kpi:has(.finance-report-kpi-icon.is-total) {
  --card-accent: var(--primary) !important;
  --card-accent-soft: var(--primary-soft) !important;
}

html[data-theme] body[data-shell="app"] .finance-report-kpi:has(.finance-report-kpi-icon.is-period) {
  --card-accent: var(--purple) !important;
  --card-accent-soft: var(--purple-soft) !important;
}

html[data-theme] body[data-shell="app"] .finance-report-kpi-icon {
  display: grid;
  place-items: center;
  font-size: 0 !important;
  line-height: 0 !important;
}

html[data-theme] body[data-shell="app"] .finance-report-kpi-icon::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--rk-finance-kpi-icon) center / contain no-repeat;
  mask: var(--rk-finance-kpi-icon) center / contain no-repeat;
}

html[data-theme] body[data-shell="app"] .finance-report-kpi-icon.is-income {
  --rk-finance-kpi-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M4 19V5M4 19h16'/%3E%3Cpath d='m7 15 4-4 3 3 5-6'/%3E%3Cpath d='M15 8h4v4'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] .finance-report-kpi-icon.is-fee {
  --rk-finance-kpi-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Cellipse cx='9' cy='8' rx='5' ry='3'/%3E%3Cpath d='M4 8v4c0 1.7 2.2 3 5 3M14 8v3'/%3E%3Cellipse cx='16' cy='15' rx='4' ry='2.5'/%3E%3Cpath d='M12 15v3c0 1.4 1.8 2.5 4 2.5s4-1.1 4-2.5v-3'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] .finance-profit-kpi .finance-report-kpi-icon.is-fee {
  --rk-finance-kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] .finance-report-kpi-icon.is-tax {
  --rk-finance-kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 17 10-10'/%3E%3Ccircle cx='7.5' cy='7.5' r='2'/%3E%3Ccircle cx='16.5' cy='16.5' r='2'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] .finance-report-kpi-icon.is-total {
  --rk-finance-kpi-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h2M14 11h2M8 15h2M14 15h2M8 19h8'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] .finance-report-kpi-icon.is-period {
  --rk-finance-kpi-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] :is(
  .customer-filter-close,
  .customer-filter-submit,
  .toolbar-search-submit
)::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--rk-customer-control-icon) center / contain no-repeat;
  mask: var(--rk-customer-control-icon) center / contain no-repeat;
}

html[data-theme] body[data-shell="app"] .customer-filter-close {
  --rk-customer-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] :is(.customer-filter-submit, .toolbar-search-submit) {
  --rk-customer-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E");
}

html[data-theme] body[data-shell="app"] .toolbar-search-submit {
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html[data-theme] body[data-shell="app"] .toolbar-search-submit::before {
  width: 14px;
  height: 14px;
}

/* Download actions keep one high-contrast semantic style across every table. */
html[data-theme] body[data-shell="app"] :is(
  .table-action-icon-btn.is-download,
  .table-rp-icon-btn.is-download,
  .mini-action.is-download
) {
  --btn-bg: var(--purple-soft) !important;
  --btn-color: var(--purple) !important;
  --btn-border: color-mix(in srgb, var(--purple) 34%, transparent) !important;
  color: var(--purple) !important;
  background: var(--purple-soft) !important;
  border-color: color-mix(in srgb, var(--purple) 34%, transparent) !important;
}

html[data-theme] body[data-shell="app"] :is(
  .table-action-icon-btn.is-download,
  .table-rp-icon-btn.is-download,
  .mini-action.is-download
):is(:hover, :focus-visible) {
  color: var(--purple) !important;
  background: color-mix(in srgb, var(--purple) 18%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--purple) 52%, transparent) !important;
}

/* Delete actions are red when available and neutral gray when unavailable. */
html[data-theme] body[data-shell="app"] :is(
  .table-action-icon-btn.is-delete,
  .table-rp-icon-btn.is-delete,
  .mini-action.is-delete
) {
  --btn-bg: var(--danger-soft) !important;
  --btn-color: var(--danger) !important;
  --btn-border: color-mix(in srgb, var(--danger) 34%, transparent) !important;
  color: var(--danger) !important;
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 34%, transparent) !important;
}

html[data-theme] body[data-shell="app"] :is(
  .table-action-icon-btn.is-delete,
  .table-rp-icon-btn.is-delete,
  .mini-action.is-delete
):not(:disabled):not([disabled]):not(.is-disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 18%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--danger) 52%, transparent) !important;
}

html[data-theme] body[data-shell="app"] :is(
  .table-action-icon-btn.is-delete,
  .table-rp-icon-btn.is-delete,
  .mini-action.is-delete
):is(:disabled, [disabled], .is-disabled, [aria-disabled="true"]) {
  --btn-bg: var(--surface-soft) !important;
  --btn-color: var(--muted) !important;
  --btn-border: var(--border) !important;
  color: var(--muted) !important;
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Checkbox columns stay compact, and custom check marks never render as ellipsis. */
html[data-theme] body[data-shell="app"] table.rk-table:not(.rk-table--document) :is(th.check-col, td.check-col),
html[data-theme] body[data-shell="app"] table.rk-table:not(.rk-table--document) col.billing-col-check,
html[data-theme] body[data-shell="app"] table.rk-table:not(.rk-table--document) col.package-col-check {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
}

html[data-theme] body[data-shell="app"] table.rk-table:not(.rk-table--document) :is(th.check-col, td.check-col) {
  padding-inline: 8px !important;
  text-align: center !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-shell="app"] table.rk-table:not(.rk-table--document) :is(th.check-col, td.check-col) input[type="checkbox"] {
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html[data-theme] body[data-shell="app"] .package-table col.package-col-name { width: 150px !important; }
html[data-theme] body[data-shell="app"] .package-table col.package-col-owner { width: 145px !important; }
html[data-theme] body[data-shell="app"] .package-table :is(col.package-col-upload, col.package-col-download) { width: 190px !important; }
html[data-theme] body[data-shell="app"] .package-table col.package-col-ppp { width: 100px !important; }
html[data-theme] body[data-shell="app"] .package-table col.package-col-created { width: 150px !important; }
html[data-theme] body[data-shell="app"] .package-table col.package-col-action { width: 105px !important; }

/* Mapping workspaces keep the data list visible beside the geographic context. */
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) {
  display: grid !important;
  grid-template-columns: minmax(380px, 5fr) minmax(480px, 7fr) !important;
  grid-template-areas:
    "mapping-list mapping-map"
    "mapping-list mapping-legend" !important;
  grid-template-rows: clamp(420px, 60vh, 620px) auto !important;
  gap: 0 !important;
  align-items: stretch !important;
}

html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > #network-map {
  grid-area: mapping-map;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-width: 0 0 0 1px !important;
}

html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .rk-table-wrap {
  grid-area: mapping-list;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: calc(clamp(420px, 60vh, 620px) + 48px) !important;
  align-self: start !important;
  overflow: auto !important;
}

html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .network-map-legend {
  grid-area: mapping-legend;
  min-width: 0;
  border-left: 1px solid var(--border);
}

html[data-theme] body[data-shell="app"] .mapping-create-card:not(:has(> .mapping-create-form[open])) {
  display: none !important;
}

html[data-theme] body[data-shell="app"] .mapping-create-form > summary {
  display: none !important;
}

html[data-theme] body[data-shell="app"] .mapping-create-form [data-coordinate-form] .actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

html[data-theme] body[data-shell="app"] .mapping-row-actions[open] {
  z-index: calc(var(--z-dropdown, 60) + 1) !important;
}

html[data-theme] body[data-shell="app"] .mapping-row-actions > .action-dropdown-menu {
  right: 0 !important;
  left: auto !important;
  z-index: calc(var(--z-dropdown, 60) + 2) !important;
}

html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .rk-table-wrap > table.rk-table {
  width: 100% !important;
  min-width: 600px !important;
  table-layout: fixed !important;
}

html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odc"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(1) { width: 130px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odc"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(2) { width: 72px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odc"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(3) { width: 78px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odc"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(4) { width: 56px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odc"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(5) { width: 78px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odc"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(6) { width: 116px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odc"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(7) { width: 70px !important; }

html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odp"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(1) { width: 130px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odp"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(2) { width: 130px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odp"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(3) { width: 62px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odp"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(4) { width: 78px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odp"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(5) { width: 130px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="odp"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(6) { width: 70px !important; }

html[data-theme] body[data-shell="app"] #network-map[data-map-kind="customer"] ~ .rk-table-wrap > table.rk-table {
  min-width: 560px !important;
}

html[data-theme] body[data-shell="app"] #network-map[data-map-kind="customer"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(1) { width: 150px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="customer"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(2) { width: 130px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="customer"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(3) { width: 120px !important; }
html[data-theme] body[data-shell="app"] #network-map[data-map-kind="customer"] ~ .rk-table-wrap > table.rk-table :is(th, td):nth-child(4) { width: 160px !important; }

.network-map-fullscreen-control {
  overflow: hidden;
  background: #fff;
}

.network-map-fullscreen {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  background: #fff;
  color: #172033;
  cursor: pointer;
}

.network-map-fullscreen::before {
  width: 16px;
  height: 16px;
  background: currentColor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.network-map-fullscreen:hover,
.network-map-fullscreen:focus-visible {
  background: #f1f5f9;
  color: #2563eb;
}

.network-map-fullscreen.is-active::before {
  mask-image: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3M16 3v3a2 2 0 0 0 2 2h3M8 21v-3a2 2 0 0 0-2-2H3M16 21v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
}

#network-map:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border: 0 !important;
  background: #dce9df;
}

@media (max-width: 1100px) {
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "mapping-list"
      "mapping-map"
      "mapping-legend" !important;
    grid-template-rows: auto clamp(340px, 52vh, 460px) auto !important;
  }

  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .rk-table-wrap {
    height: auto !important;
    max-height: none !important;
  }

  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > #network-map {
    border-width: 1px 0 0 !important;
  }

  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .network-map-legend {
    border-left: 0;
  }
}

/* Central organization tables keep inline edits compact and actions stable. */
.central-admin-card .rk-card-head {
  align-items: flex-start;
}

.central-admin-card .rk-card-head h3,
.central-admin-card .rk-card-head p {
  margin: 0;
}

.central-admin-card .rk-card-head p {
  margin-top: 4px;
}

.central-create-form {
  align-items: end;
}

.central-create-actions {
  min-height: 38px;
  align-items: end;
}

.central-create-actions-grid {
  grid-column: 3;
}

.central-admin-table {
  min-width: 720px;
}

.central-admin-table th,
.central-admin-table td {
  vertical-align: middle;
}

.central-admin-table :is(input, select) {
  width: 100%;
  min-width: 0;
  height: 34px;
  margin: 0;
}

.central-admin-table .data-main {
  display: block;
  margin-bottom: 5px;
}

.central-row-form {
  display: none;
}

.central-row-actions {
  display: flex;
  min-width: max-content;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.central-row-actions .btn {
  min-height: 34px;
  white-space: nowrap;
}

.central-col-code { width: 140px; }
.central-col-status { width: 132px; }
.central-col-partner { width: 170px; }
.central-col-timezone { width: 148px; }
.central-col-seen { width: 160px; }
.central-col-actions { width: 160px; }
.central-col-actions-wide { width: 252px; }

@media (max-width: 760px) {
  .central-create-actions {
    width: 100%;
    align-items: stretch;
  }

  .central-create-actions-grid {
    grid-column: auto;
  }

  .central-create-actions .btn {
    width: 100% !important;
  }

  .central-admin-table {
    min-width: 680px;
  }

  .central-row-actions {
    gap: 4px;
  }
}