:root {
  --rk-ink: #172033;
  --rk-muted: #667085;
  --rk-canvas: #eaf0f7;
  --rk-surface: #ffffff;
  --rk-surface-alt: #f3f7fb;
  --rk-field: #fbfdff;
  --rk-border: #bdcbdd;
  --rk-brand: #0a4b9e;
  --rk-brand-strong: #063b82;
  --rk-brand-soft: #e7f0fd;
  --rk-accent: #ff7417;
  --rk-accent-soft: #fff0e3;
  --rk-sidebar-bg: #092c67;
  --rk-sidebar-active: #104f9e;
  --rk-sidebar-text: #dce9fb;
  --rk-sidebar-muted: #a9c4ec;
  --rk-signal-good: #16864d;
  --rk-danger: #c53b4d;
  --rk-danger-soft: #fdecef;
  --rk-warning: #a76008;
  --rk-warning-soft: #fff4df;
  --rk-shadow: 0 12px 30px rgba(18, 35, 54, .08);
  --rk-sidebar: 252px;
  --rk-radius: 8px;
  --rk-font: "Trebuchet MS", "Segoe UI", sans-serif;
}

html[data-theme="noc-dark"] {
  color-scheme: dark;
  --rk-ink: #edf3f7;
  --rk-muted: #a9b6c5;
  --rk-canvas: #0a1428;
  --rk-surface: #111f38;
  --rk-surface-alt: #162844;
  --rk-field: #111f38;
  --rk-border: #29415f;
  --rk-brand: #58b8ff;
  --rk-brand-strong: #8bceff;
  --rk-brand-soft: #102e57;
  --rk-accent: #ff9a3d;
  --rk-accent-soft: #402b1c;
  --rk-sidebar-bg: #061b43;
  --rk-sidebar-active: #0d4e9c;
  --rk-sidebar-text: #dce9fb;
  --rk-sidebar-muted: #a9c4ec;
  --rk-signal-good: #70d6a0;
  --rk-danger: #ff8d9a;
  --rk-danger-soft: #452530;
  --rk-warning: #ffcb74;
  --rk-warning-soft: #453719;
  --rk-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}

html[data-theme="noc-dark"] input[type="date"],
html[data-theme="noc-dark"] input[type="time"],
html[data-theme="noc-dark"] input[type="datetime-local"] {
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--rk-canvas); color: var(--rk-ink); font: 14px/1.45 var(--rk-font); }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--rk-sidebar) minmax(0, 1fr); transition: grid-template-columns .2s ease; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-color: color-mix(in srgb, var(--rk-sidebar-muted) 55%, transparent) transparent; scrollbar-width: thin; background: var(--rk-sidebar-bg); color: var(--rk-sidebar-text); padding: 14px 10px; display: flex; flex-direction: column; transition: transform .2s ease; }
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { border: 2px solid var(--rk-sidebar-bg); border-radius: 999px; background: color-mix(in srgb, var(--rk-sidebar-muted) 55%, transparent); }
.sidebar-head { padding: 3px 8px 15px; border-bottom: 1px solid color-mix(in srgb, var(--rk-sidebar-text) 13%, transparent); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 16px; letter-spacing: .2px; }
.brand-copy span { color: var(--rk-sidebar-muted); font-size: 11px; }
.sidebar-nav { display: grid; gap: 11px; padding: 14px 3px; }
.sidebar-section { display: grid; gap: 5px; }
.sidebar-label { padding: 0 9px; color: var(--rk-sidebar-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nav-list { display: grid; gap: 2px; }
.nav-item, .nav-sub, .nav-group-trigger { width: 100%; border: 0; border-radius: 6px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: transparent; color: var(--rk-sidebar-text); text-align: left; text-decoration: none; cursor: pointer; }
.nav-item:hover, .nav-sub:hover, .nav-group-trigger:hover { background: rgba(255,255,255,.08); }
.nav-item.active, .nav-sub.active, .nav-group-trigger.active { background: var(--rk-sidebar-active); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px var(--rk-accent); }
.nav-group.is-open > .nav-group-trigger { background: color-mix(in srgb, var(--rk-brand) 22%, transparent); color: #fff; }
.nav-group.is-open > .nav-group-trigger.active { background: var(--rk-sidebar-active); }
.nav-icon { width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center; }
.nav-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav-caret { margin-left: auto; color: var(--rk-sidebar-muted); font-size: 12px; transition: transform .16s ease; }
.nav-group.is-open > .nav-group-trigger .nav-caret { transform: rotate(180deg); color: var(--rk-accent); }
.nav-submenu { display: none; gap: 2px; margin: 2px 0 4px 29px; border-left: 1px solid rgba(141, 202, 194, .24); padding: 2px 0 2px 6px; }
.nav-group.is-open > .nav-submenu { display: grid; }
.nav-sub { position: relative; padding: 6px 9px; color: var(--rk-sidebar-text); font-size: 12px; }
.nav-sub.active { background: color-mix(in srgb, var(--rk-brand) 35%, transparent); box-shadow: inset 1px 0 0 var(--rk-accent); color: #fff; }
.nav-sub.active::before { content: ""; position: absolute; left: -8px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--rk-accent); transform: translateY(-50%); }
html[data-sidebar="collapsed"] .app-shell { grid-template-columns: 64px minmax(0, 1fr); }
html[data-sidebar="collapsed"] .sidebar { padding: 14px 7px; overflow-x: hidden; }
html[data-sidebar="collapsed"] .sidebar-head { padding: 3px 6px 15px; }
html[data-sidebar="collapsed"] .brand { justify-content: center; }
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"] .sidebar-foot,
html[data-sidebar="collapsed"] .nav-submenu { display: none !important; }
html[data-sidebar="collapsed"] .sidebar-nav { gap: 8px; padding: 14px 0; }
html[data-sidebar="collapsed"] .sidebar-section { gap: 2px; }
html[data-sidebar="collapsed"] .nav-item,
html[data-sidebar="collapsed"] .nav-group-trigger { justify-content: center; gap: 0; min-height: 38px; padding: 8px; }
.sidebar-toggle-arrow-show { display: none; }
html[data-sidebar="collapsed"] .sidebar-toggle-arrow-hide { display: none; }
html[data-sidebar="collapsed"] .sidebar-toggle-arrow-show { display: block; }
.sidebar-foot { margin-top: auto; padding: 12px 5px 0; }
.version-button { width: 100%; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; background: rgba(255,255,255,.05); color: #d9e8e8; padding: 8px; text-align: left; cursor: pointer; }
.version-line { display: flex; justify-content: space-between; font-size: 10px; }

.workspace { min-width: 0; }
.topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 22px; background: var(--rk-surface); border-bottom: 1px solid var(--rk-border); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 11px; min-width: 0; }
.topbar-right { margin-left: auto; }
.icon-btn, .topbar-theme-toggle { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--rk-border); border-radius: 6px; color: var(--rk-ink); background: var(--rk-surface); cursor: pointer; }
.icon-btn svg, .topbar-theme-toggle svg { width: 18px; height: 18px; }
.rk-ui-svg-icon { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; }
.caret .rk-ui-svg-icon, .nav-caret .rk-ui-svg-icon, .profile-caret .rk-ui-svg-icon { width: 14px; height: 14px; vertical-align: middle; }
.sort-mark .rk-ui-svg-icon { width: 13px; height: 13px; }
.table-pagination .rk-ui-svg-icon, [data-dashboard-activity-prev] .rk-ui-svg-icon, [data-dashboard-activity-next] .rk-ui-svg-icon { width: 14px; height: 14px; vertical-align: -.18em; }
.toolbar-search .rk-ui-svg-icon, .toolbar-search-submit .rk-ui-svg-icon { width: 16px; height: 16px; }
.ppp-info-btn .rk-ui-svg-icon { width: 16px; height: 16px; vertical-align: middle; }
.finance-report-info-dot .rk-ui-svg-icon { width: 14px; height: 14px; vertical-align: middle; }
.toast-icon .rk-ui-svg-icon, .toast-close .rk-ui-svg-icon { width: 16px; height: 16px; }
.ppp-info-btn { width: 22px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--rk-brand-strong); font-size: 12px; font-weight: 900; line-height: 1; cursor: pointer; }
.ppp-info-btn:hover, .ppp-info-btn[aria-expanded="true"] { background: transparent; color: var(--rk-brand); }
.ppp-info-btn:focus-visible { outline: 2px solid var(--rk-brand); outline-offset: 2px; }
.ppp-info-popover { position: fixed !important; z-index: 120 !important; width: min(360px, calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; max-height: calc(100dvh - 20px) !important; margin: 0 !important; overflow: hidden !important; border: 1px solid var(--rk-border) !important; border-radius: 7px !important; background: var(--rk-surface) !important; color: var(--rk-ink) !important; box-shadow: 0 16px 32px rgba(18, 35, 54, .2) !important; }
.ppp-info-popover[hidden] { display: none !important; }
.ppp-info-popover.is-open { display: block !important; }
.ppp-info-card { max-height: calc(100dvh - 20px); margin: 0 !important; padding: 0 !important; overflow: auto; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--rk-ink) !important; box-shadow: none !important; }
.ppp-info-loading, .ppp-info-error { padding: 12px !important; font-size: 12px; }
.ppp-info-error { color: var(--rk-danger) !important; }
.ppp-info-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); font-size: 12px; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.ppp-info-optic-readings { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.ppp-info-optic-readings .badge { min-height: 18px; padding: 2px 5px; font-size: 9px; white-space: nowrap; }
.ppp-info-list { display: grid; gap: 0; margin: 0; padding: 5px 10px; }
.ppp-info-list > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px dashed #e1e7ee; }
.ppp-info-list > div:last-child { border-bottom: 0; }
.ppp-info-list dt, .ppp-info-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.ppp-info-list dt { color: var(--rk-muted); font-size: 10px; font-weight: 800; }
.ppp-info-list dd { color: var(--rk-ink); font-size: 11px; line-height: 1.35; }
.customer-house-photo-field { display: grid; gap: 7px; }.customer-house-photo-preview { display: block; width: min(260px, 100%); overflow: hidden; border: 1px solid var(--rk-border); border-radius: 6px; }.customer-house-photo-preview img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.customer-house-photo-modal-card { width: min(840px, 96vw); }.customer-house-photo-modal-body { display: grid; place-items: center; padding: 12px; }.customer-house-photo-modal-body img { display: block; max-width: 100%; max-height: min(72dvh, 680px); object-fit: contain; }
.ppp-info-actions { display: flex; justify-content: flex-end; gap: 5px; padding: 0 10px 8px; }
.ppp-info-services { margin: 0 10px 10px; border-top: 1px solid var(--rk-border); padding-top: 8px; }
.ppp-info-services-title { color: var(--rk-muted); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.ppp-info-service-list { display: grid; gap: 4px; margin-top: 5px; }
.ppp-info-service-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 7px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface-alt); }
.ppp-info-service-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ppp-info-service-name { font-size: 11px; font-weight: 800; }
.ppp-info-service-mode, .ppp-info-service-bill-badge { color: var(--rk-muted); font-size: 9px; }
.ppp-info-service-amount { flex: 0 0 auto; font-size: 11px; font-weight: 900; white-space: nowrap; }
@media (max-width: 560px) { .ppp-info-popover { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; } .ppp-info-list > div { grid-template-columns: 72px minmax(0, 1fr); } }
#sidebar-toggle { color: var(--rk-brand-strong); }
#sidebar-toggle:hover, #sidebar-toggle:focus-visible { border-color: var(--rk-brand); background: var(--rk-brand-soft); outline: none; }
.sidebar-toggle-svg { width: 21px !important; height: 21px !important; }
.sidebar-toggle-panel, .sidebar-toggle-divider, .sidebar-toggle-arrow { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-toggle-panel { stroke-width: 1.8; opacity: .82; }
.sidebar-toggle-divider { stroke-width: 1.6; opacity: .58; }
.sidebar-toggle-arrow { stroke-width: 2.2; }
.wa-unread-chip { position: relative; width: 34px; min-width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid #b9e6cb; border-radius: 6px; background: #edf9f1; color: #16864d; text-decoration: none; }
.wa-unread-chip:hover, .wa-unread-chip:focus-visible { border-color: #16864d; background: #dff4e7; outline: none; }
.wa-unread-chip.has-unread { border-color: #16864d; background: #16864d; color: #fff; }
.wa-unread-icon, .wa-unread-icon svg { width: 19px; height: 19px; display: block; }
.wa-unread-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wa-unread-icon svg path:last-child { fill: currentColor; stroke: none; }
.wa-unread-badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; display: none; place-items: center; padding: 0 4px; border: 2px solid var(--rk-surface); border-radius: 50%; background: #d94b3d; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.wa-unread-chip.has-unread .wa-unread-badge { display: grid; }
html[data-theme="noc-dark"] .wa-unread-chip:not(.has-unread) { border-color: #2d6a4f; background: #153d32; color: #75d6a0; }
.topbar-theme-toggle { color: #52646a; }
.topbar-theme-toggle:hover, .topbar-theme-toggle:focus-visible { border-color: #71868d; background: #eef4f4; outline: none; }
.topbar-theme-icon { width: 20px !important; height: 20px !important; }
html[data-theme="noc-dark"] .topbar-theme-toggle { border-color: #75642a; background: #302d1d; color: #edc652; }
.topbar-theme-icon-sun { display: none; }
html[data-theme="noc-dark"] .topbar-theme-icon-moon { display: none; }
html[data-theme="noc-dark"] .topbar-theme-icon-sun { display: block; }
.breadcrumb { color: var(--rk-muted); font-size: 12px; }
.breadcrumb span { margin: 0 5px; }
.page-title { margin: 1px 0 0; font-size: 20px; line-height: 1.2; letter-spacing: 0; }
.profile-trigger { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--rk-ink); cursor: pointer; text-align: left; }
.profile-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--rk-brand-soft); color: var(--rk-brand-strong); font-weight: 800; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-copy { display: grid; font-size: 12px; }
.profile-copy small { color: var(--rk-muted); }
.dropdown-shell { position: relative; }
.dropdown-menu { display: none; position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; min-width: 210px; padding: 7px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface); box-shadow: var(--rk-shadow); }
.dropdown-menu.is-open { display: grid; }
.dropdown-label { padding: 6px 8px; color: var(--rk-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.dropdown-item { display: block; width: 100%; border: 0; border-radius: 5px; padding: 8px; background: transparent; color: var(--rk-ink); text-align: left; text-decoration: none; cursor: pointer; }
.dropdown-item:hover { background: var(--rk-surface-alt); }
.dropdown-item-danger { color: var(--rk-danger); }
.profile-balance-menu { display: grid; gap: 3px; min-width: 0; margin: 2px 0 4px; padding: 9px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
.profile-balance-label, .profile-balance-context { color: var(--rk-muted); font-size: 11px; line-height: 1.35; }
.profile-balance-amount { overflow: hidden; color: var(--rk-ink); font-size: 17px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.profile-balance-context { overflow-wrap: anywhere; }
.action-dropdown { position: relative; }
.action-dropdown > summary { list-style: none; }
.action-dropdown > summary::-webkit-details-marker { display: none; }
.action-dropdown-menu { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: max-content; min-width: 208px; max-width: min(320px, calc(100vw - 32px)); max-height: min(440px, calc(100vh - 28px)); overflow-y: auto; padding: 5px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface); box-shadow: var(--rk-shadow); }
.action-dropdown[open] > .action-dropdown-menu { display: grid; gap: 1px; }
.action-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 29px; width: 100%; border: 0; border-radius: 5px; padding: 5px 7px; background: transparent; color: var(--rk-ink); font: inherit; font-size: 11.5px; text-align: left; text-decoration: none; cursor: pointer; }
.action-dropdown-item:hover:not(:disabled) { background: var(--rk-surface-alt); }
.action-dropdown-item:disabled { color: var(--rk-muted); }
.action-dropdown-section-title { padding: 6px 7px 2px; color: var(--rk-muted); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.action-dropdown-form { margin: 0; }
.olt-operation-terminal { position: fixed; z-index: 90; inset: 0; display: none; place-items: start center; padding: 18px; pointer-events: none; }
.olt-operation-terminal[aria-hidden="false"], .olt-operation-terminal.is-open { display: grid; }
.olt-operation-terminal-window { width: min(650px, 100%); overflow: hidden; border: 1px solid var(--rk-border); border-radius: 8px; background: var(--rk-surface); box-shadow: 0 24px 70px rgba(0,0,0,.32); pointer-events: auto; }
.olt-operation-terminal-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px 12px; background: var(--rk-sidebar-bg); color: var(--rk-sidebar-text); font-size: 12px; }
.olt-operation-terminal-head > :first-child { color: var(--rk-accent); font-weight: 900; }
.olt-operation-terminal-head [data-olt-operation-terminal-state] { color: #b4d4d1; font-size: 11px; }
.olt-operation-terminal-body { max-height: 250px; overflow: auto; padding: 12px; background: #091922; color: #d7eee9; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }

.page-body { max-width: 1680px; margin: 0 auto; padding: 14px 14px 24px; }
.card, .panel, .table-card, .rk-card { overflow: hidden; border: 1px solid var(--rk-border); border-radius: var(--rk-radius); background: var(--rk-surface); box-shadow: var(--rk-shadow); }
.card-header, .table-head, .rk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.card-title { font-size: 16px; font-weight: 800; }
.card-subtitle, .help, .muted { color: var(--rk-muted); font-size: 12px; }
.toolbar, .rk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 11px 14px; border: 1px solid var(--rk-border); border-radius: var(--rk-radius); background: var(--rk-surface); }
body[data-rbac-state="pending"] .sidebar-nav [data-rbac-module] { visibility: hidden; }
body[data-rbac-state="ready"] .sidebar-nav .rbac-hidden, .sidebar-nav .rbac-empty-section { display: none; }
.toolbar:has(.action-dropdown[open]), .rk-toolbar:has(.action-dropdown[open]) { position: relative; z-index: 35; overflow: visible; }
.toolbar-stack { align-items: flex-start; }
.toolbar-actions, .rk-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.stack { display: grid; gap: 12px; }
.gap-lg { gap: 16px; }
.actions, .rk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
html[data-theme] body[data-shell="app"] :is(.card, .rk-card):not(.modal-card) > form.stack:not(.modal-body):not(.rk-modal-body):not(.ppp-customer-form):not(.settings-compact-form) {
  padding: 0 14px 14px;
}
.rk-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.technician-work-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rk-summary-card { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px; border: 1px solid var(--rk-border); border-radius: var(--rk-radius); background: var(--rk-surface); box-shadow: var(--rk-shadow); color: var(--rk-ink); text-decoration: none; }
.rk-summary-card:hover, .rk-summary-card.is-active { border-color: var(--rk-brand); background: var(--rk-brand-soft); }
.rk-icon-box { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 7px; background: var(--rk-brand-soft); color: var(--rk-brand-strong); font-weight: 900; }
.is-isolated .rk-icon-box, .is-account-disabled .rk-icon-box { background: var(--rk-danger-soft); color: var(--rk-danger); }
.customer-summary-title { overflow: hidden; color: var(--rk-muted); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.customer-summary-value { margin-top: 2px; font-size: 22px; font-weight: 900; line-height: 1; }
.ppp-table-control-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entries-control { display: inline-flex; align-items: center; gap: 7px; color: var(--rk-muted); font-size: 12px; }
.entries-control select { width: auto; min-width: 70px; min-height: 32px; padding: 5px 25px 5px 8px; }
.technician-work-table-card .table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rk-border); }
.technician-work-table-card .rk-summary-card .rk-icon-box svg, .technician-work-summary .rk-icon-box svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toolbar-search, .rk-toolbar-search { display: flex; align-items: center; gap: 7px; width: min(340px, 100%); min-height: 34px; padding: 0 9px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); }
.toolbar-search-icon, .toolbar-search-submit { width: 16px; min-width: 16px; height: 16px; display: inline-grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--rk-muted); }
.toolbar-search-submit { cursor: pointer; }
.toolbar-search-icon .rk-ui-svg-icon, .toolbar-search-submit .rk-ui-svg-icon { width: 16px; height: 16px; }
.toolbar-search-submit:hover, .toolbar-search-submit:focus-visible { color: var(--rk-brand-strong); outline: none; }
.toolbar-search input:not([type="hidden"]), .rk-toolbar-search input:not([type="hidden"]) { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 32px; padding: 4px 0; border: 0; background: transparent; box-shadow: none; }
.toolbar-search:focus-within, .rk-toolbar-search:focus-within { border-color: var(--rk-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rk-brand) 18%, transparent); }
.technician-work-table-card .table-toolbar .toolbar-search { width: 340px; flex: 0 1 340px; margin-left: auto; }
@media (max-width: 640px) { .technician-work-table-card .table-toolbar { flex-wrap: wrap; } .technician-work-table-card .table-toolbar .toolbar-search { width: 100%; flex-basis: 100%; } }
.customer-table-head { align-items: center; }
.dash-overview-grid { margin-bottom: 12px; }
.overview-tile { min-height: 110px; justify-content: space-between; cursor: pointer; }
.overview-tile-copy { min-width: 0; }
.overview-kicker, .legacy-summary-title, .mini-strip-label { color: var(--rk-muted); font-size: 11px; font-weight: 800; }
.overview-number { margin-top: 7px; font-size: 20px; font-weight: 900; line-height: 1.1; }
.overview-glyph { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 7px; background: var(--rk-brand-soft); color: var(--rk-brand-strong); }
.overview-glyph svg, .dash-icon svg, .legacy-summary-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.overview-tile-invoice .overview-glyph { color: #2777b7; background: #e5f0fb; }
.overview-tile-router .overview-glyph { color: #7a4fb0; background: #f0eafb; }
.overview-tile-customer .overview-glyph { color: var(--rk-warning); background: var(--rk-warning-soft); }
.dash-overview-grid .overview-tile { border-left: 3px solid var(--dashboard-accent, var(--rk-brand)); background: color-mix(in srgb, var(--dashboard-accent, var(--rk-brand)) 4%, var(--rk-surface)); }
.overview-tile-income { --dashboard-accent: var(--rk-signal-good); }
.overview-tile-income .overview-glyph { color: var(--rk-signal-good); background: color-mix(in srgb, var(--rk-signal-good) 14%, var(--rk-surface)); }
.overview-tile-invoice { --dashboard-accent: #2777b7; }
.overview-tile-router { --dashboard-accent: #7a4fb0; }
.overview-tile-customer { --dashboard-accent: var(--rk-warning); }
.dashboard-legacy-summary-grid .legacy-summary-item { border-left: 3px solid var(--dashboard-summary-accent, var(--rk-brand)); }
.dashboard-legacy-summary-grid .legacy-summary-item .rk-icon-box { color: var(--dashboard-summary-accent, var(--rk-brand-strong)); background: color-mix(in srgb, var(--dashboard-summary-accent, var(--rk-brand)) 13%, var(--rk-surface)); }
.dashboard-legacy-summary-grid .legacy-summary-item:nth-child(2n) { --dashboard-summary-accent: #2777b7; }
.dashboard-legacy-summary-grid .legacy-summary-item:nth-child(3n) { --dashboard-summary-accent: var(--rk-signal-good); }
.dashboard-legacy-summary-grid .legacy-summary-item:nth-child(4n) { --dashboard-summary-accent: var(--rk-warning); }
.dashboard-legacy-summary-grid .legacy-summary-item:nth-child(5n) { --dashboard-summary-accent: var(--rk-danger); }
.mini-strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mini-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface); }
.mini-strip-label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.mini-strip .rk-icon-box { width: 25px; height: 25px; flex-basis: 25px; border-radius: 5px; }
.mini-strip .rk-icon-box svg { width: 15px; height: 15px; }
.mini-strip strong { overflow: hidden; min-width: 0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); gap: 16px; align-items: start; }
.dashboard-panel { overflow: hidden; border: 1px solid var(--rk-border); border-radius: var(--rk-radius); background: var(--rk-surface); box-shadow: var(--rk-shadow); }
.dashboard-service-panel .status-list { display: none; }
.server-metric-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rk-border); }
.server-metric-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px; background: var(--rk-surface); }
.server-metric-item .rk-icon-box { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 6px; }
.server-metric-copy { display: grid; min-width: 0; gap: 3px; }
.server-metric-copy > span { color: var(--rk-muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.server-metric-copy strong { overflow: hidden; color: var(--rk-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.server-gauge-card { min-height: 86px; align-items: center; }
.server-gauge-card .server-metric-copy { flex: 1 1 auto; }
.server-metric-free { display: grid; flex: 0 0 58px; gap: 3px; min-width: 0; text-align: right; }
.server-metric-free > span { color: var(--rk-muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.server-metric-free strong { overflow: hidden; color: var(--rk-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.server-gauge { position: relative; display: block; width: 82px; height: 42px; flex: 0 0 82px; overflow: hidden; }
.server-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.server-gauge path { fill: none; stroke-linecap: round; stroke-width: 7; }
.server-gauge-track { stroke: var(--rk-border); }
.server-gauge-value { position: absolute; right: 0; bottom: 1px; left: 0; color: var(--rk-ink); font-size: 16px; font-weight: 900; line-height: 1; text-align: center; }
.settings-branding-card .settings-logo-preview-block { display: grid; width: min(180px, 100%); height: 132px; place-items: center; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
.settings-branding-card .invoice-logo-preview-img { display: block; max-width: 148px; max-height: 108px; object-fit: contain; }
.settings-branding-card .settings-branding-fields { align-items: start; }
.settings-branding-card .settings-branding-fields > .field { grid-template-rows: auto 36px auto; align-content: start; }
.settings-branding-card .settings-branding-fields :is(input[type="text"], input[type="file"]) { box-sizing: border-box; width: 100%; height: 36px; min-height: 36px; }
.panel-tabs { display: flex; gap: 2px; padding: 9px 10px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.panel-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--rk-muted); font-weight: 800; cursor: pointer; }
.panel-tab .rk-icon-box { width: 22px; height: 22px; flex-basis: 22px; border-radius: 4px; }
.panel-tab .rk-icon-box svg { width: 14px; height: 14px; }
.panel-tab.is-active { background: var(--rk-surface); color: var(--rk-brand-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rk-accent) 28%, transparent), 0 1px 2px rgba(18,35,54,.08); }
.dashboard-tab-panel { display: none; padding: 16px; }
.dashboard-tab-panel.is-active { display: block; }
.dashboard-legacy-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.legacy-summary-item { display: flex; align-items: center; gap: 10px; min-height: 74px; padding: 11px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); color: var(--rk-ink); text-decoration: none; }
.legacy-summary-item:hover { border-color: var(--rk-brand); background: var(--rk-brand-soft); }
.legacy-summary-copy { display: grid; min-width: 0; }
.legacy-summary-value { margin: 2px 0; font-size: 19px; line-height: 1.1; }
.legacy-summary-note { color: var(--rk-muted); font-size: 11px; }
.panel-header-simple { padding: 15px 16px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.panel-title { font-weight: 900; }
.status-list { padding: 5px 16px 14px; }
.status-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; padding: 12px 0; border-bottom: 1px solid var(--rk-border); }
.status-row:last-child { border-bottom: 0; }
.status-label { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.status-label .rk-icon-box { width: 26px; height: 26px; flex-basis: 26px; border-radius: 5px; }
.status-label .rk-icon-box svg { width: 16px; height: 16px; }
.status-right { align-self: center; font-size: 12px; }
.status-bar { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: var(--rk-border); }
.status-fill { display: block; height: 100%; border-radius: inherit; background: var(--rk-brand); }
.status-fill-warn { background: var(--rk-warning); }
.status-fill-info { background: #3d7eb7; }
.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%; }
.billing-toolbar { align-items: center; min-height: 54px; margin-bottom: 9px; padding: 8px 10px; }
.billing-toolbar .toolbar-actions { gap: 6px; }
.billing-toolbar .btn { min-height: 30px; padding: 5px 8px; font-size: 11.5px; }
.billing-report-actions-panel { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.billing-report-actions-panel .finance-report-actions-title { color: var(--rk-muted); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.billing-report-actions-panel .finance-report-buttons { display: flex; gap: 5px; }
.billing-report-actions-panel .finance-report-action-btn { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface-alt); color: var(--rk-ink); font-size: 11px; font-weight: 800; text-decoration: none; }
.billing-report-actions-panel .finance-report-action-btn:hover { border-color: var(--rk-brand); color: var(--rk-brand-strong); }
.billing-report-actions-panel .finance-report-action-svg { width: 15px; height: 15px; }
.billing-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.billing-summary-grid .customer-summary-card { min-height: 68px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; box-shadow: 0 4px 12px rgba(18, 35, 54, .045); }
.billing-summary-grid .customer-summary-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 6px; }
.billing-summary-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.billing-summary-grid .customer-summary-value { margin-top: 2px; font-size: 18px; }
.billing-summary-grid .billing-summary-text { font-size: 13px; line-height: 1.25; }
.billing-compact-card { box-shadow: 0 6px 16px rgba(18, 35, 54, .055); }
.billing-table-head { padding: 9px 11px; }
.billing-table-control-row { gap: 8px; }
.billing-table-meta { font-size: 11px; }
.billing-search-form { width: min(310px, 100%); min-height: 30px; }
.billing-report-table th { padding: 8px 7px; font-size: 10px; letter-spacing: .025em; white-space: nowrap; }
.billing-report-table td { padding: 8px 7px; font-size: 11.5px; }
.billing-report-table .compact-main { font-size: 12px; }
.billing-report-table .compact-sub { margin-top: 2px; font-size: 10px; }
.billing-report-table .rk-action-btn { width: 30px; min-width: 30px; height: 30px; min-height: 30px; display: inline-grid; place-items: center; padding: 0; }
.billing-report-table .table-action-label { display: none; }
.billing-report-table .rk-ui-svg-icon { width: 15px; height: 15px; }
.billing-report-table .customer-actions { gap: 4px; }
.billing-list-footer { padding: 9px 11px; font-size: 11px; }
.dash-overview-grid { gap: 8px; margin-bottom: 9px; }
.dash-overview-grid .overview-tile { min-height: 88px; padding: 10px 11px; border-top: 3px solid transparent; box-shadow: 0 5px 14px rgba(18, 35, 54, .05); }
.dash-overview-grid .overview-tile-income { border-top-color: var(--rk-brand); }
.dash-overview-grid .overview-tile-invoice { border-top-color: #3d7eb7; }
.dash-overview-grid .overview-tile-router { border-top-color: #8056ad; }
.dash-overview-grid .overview-tile-customer { border-top-color: var(--rk-warning); }
.dash-overview-grid .overview-kicker { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.dash-overview-grid .overview-number { margin-top: 5px; font-size: 19px; }
.dash-overview-grid .overview-glyph { width: 36px; height: 36px; flex-basis: 36px; border-radius: 6px; }
.dash-overview-grid .overview-glyph svg { width: 19px; height: 19px; }
.mini-strip-grid-host { gap: 8px; margin-bottom: 12px; }
.mini-strip-grid-host .mini-strip { min-height: 42px; padding: 8px 10px; box-shadow: 0 3px 10px rgba(18, 35, 54, .035); }
.dashboard-main-grid { gap: 12px; }
.dashboard-panel { box-shadow: 0 6px 16px rgba(18, 35, 54, .055); }
.panel-tabs { gap: 4px; padding: 7px 8px; }
.panel-tab { min-height: 30px; padding: 5px 8px; font-size: 12px; }
.dashboard-tab-panel { padding: 12px; }
.dashboard-legacy-summary-grid { gap: 7px; }
.legacy-summary-item { min-height: 64px; gap: 8px; padding: 9px; }
.legacy-summary-item .rk-icon-box { width: 30px; height: 30px; flex-basis: 30px; border-radius: 6px; }
.legacy-summary-item .rk-icon-box svg { width: 17px; height: 17px; }
.legacy-summary-title { font-size: 10px; }
.legacy-summary-value { margin: 1px 0; font-size: 18px; }
.legacy-summary-note { font-size: 10px; }
.panel-header-simple { padding: 11px 13px; }
.panel-title { font-size: 13px; }
.status-list { padding: 3px 13px 9px; }
.status-row { gap: 5px 8px; padding: 9px 0; }
.status-label { gap: 7px; font-size: 12px; }
.status-label .rk-icon-box { width: 24px; height: 24px; flex-basis: 24px; }
.status-label .rk-icon-box svg { width: 15px; height: 15px; }
.status-bar { height: 4px; }
.traffic-compact-head, .traffic-focus-controls { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.traffic-focus-controls { margin-top: 14px; }
.traffic-select-wrap { flex: 1 1 180px; display: grid; gap: 5px; color: var(--rk-muted); font-size: 11px; font-weight: 800; }
.traffic-lock-control { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--rk-muted); font-size: 12px; }
.traffic-chart-card { min-height: 260px; margin-top: 14px; padding: 16px; }
.traffic-chart-empty { display: grid; min-height: 220px; place-items: center; color: var(--rk-muted); text-align: center; }
.ppp-customer-form { padding: 18px; }
.ppp-customer-form > [data-customer-tab-panel] { min-width: 0; }
.customer-tabs:has(.customer-wizard-step) { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 4px; }
.customer-tabs .customer-wizard-step { position: relative; z-index: 1; min-height: 82px; display: grid; grid-template-rows: 40px auto; place-items: center; gap: 5px; padding: 5px; border: 0; border-radius: 0; background: transparent; color: var(--rk-muted); font-size: 12px; }
.customer-tabs .customer-wizard-step:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: 25px; left: calc(50% + 20px); width: calc(100% - 40px); height: 2px; background: var(--rk-border); }
.customer-wizard-number { width: 40px; height: 40px; overflow: visible; }
.customer-wizard-number circle { fill: var(--rk-surface); stroke: var(--rk-border); stroke-width: 2; }
.customer-wizard-number text { fill: var(--rk-muted); font: 800 15px var(--rk-font); text-anchor: middle; dominant-baseline: central; }
.customer-tabs .customer-wizard-step.is-active, .customer-tabs .customer-wizard-step.is-complete { color: var(--rk-brand-strong); }
.customer-tabs .customer-wizard-step.is-active .customer-wizard-number circle, .customer-tabs .customer-wizard-step.is-complete .customer-wizard-number circle { fill: var(--rk-brand); stroke: var(--rk-brand); }
.customer-tabs .customer-wizard-step.is-active .customer-wizard-number text, .customer-tabs .customer-wizard-step.is-complete .customer-wizard-number text { fill: #fff; }
.customer-tabs .customer-wizard-step.is-complete::after { background: var(--rk-brand); }
.customer-form-section-head { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--rk-border); }
.customer-form-section-head h3 { margin: 0; font-size: 16px; }
.customer-form-section-head p { margin: 0; color: var(--rk-muted); font-size: 12px; }
.customer-form-section-head-compact { margin-top: 4px; }
.customer-form-section-head-compact span { color: var(--rk-brand-strong); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.field-checklist { padding: 11px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); }
.field-optional { color: var(--rk-muted); font-size: 11px; font-weight: 500; }
.customer-location-group { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 14px; padding: 14px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); }
.customer-location-details { display: grid; align-content: start; gap: 12px; }
.customer-coordinate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.customer-map-button { width: 100%; }
.customer-map-picker-card { width: min(880px, calc(100vw - 28px)); }
.customer-map-picker-body { display: grid; gap: 10px; }
.customer-map-search { display: flex; align-items: center; gap: 8px; }
.customer-map-search input { flex: 1 1 auto; min-width: 0; }
.customer-map-search .btn { width: 76px; min-width: 76px; justify-content: center; padding-inline: 8px; }
.customer-map-search-status, .customer-map-picked { min-height: 18px; color: var(--rk-muted); font-size: 11px; }
.customer-map-search-results { display: grid; align-content: start; gap: 4px; max-height: 176px; overflow-x: hidden; overflow-y: auto; padding: 4px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
.customer-map-search-results:empty { display: none; }
.customer-map-search-results:not(:empty) { min-height: 94px; }
.customer-map-result { display: grid; gap: 3px; width: 100%; padding: 7px 8px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface); color: var(--rk-ink); font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.customer-map-result strong { font-size: 11px; line-height: 1.35; }
.customer-map-result span { color: var(--rk-muted); font-family: monospace; font-size: 10px; }
.customer-map-result:hover, .customer-map-result:focus-visible { border-color: var(--rk-brand); background: var(--rk-brand-soft); outline: 0; }
.customer-location-map { height: min(38vh, 340px); min-height: 240px; border: 1px solid var(--rk-border); border-radius: 6px; background: #dce9df; }
.customer-map-live-control { position: absolute; z-index: 1000; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border: 1px solid #0f766e; border-radius: 5px; background: #fff; color: #0f766e; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 4px rgba(15, 118, 110, .24); }
.customer-map-live-control:hover { background: #ecfdf5; }
.customer-map-live-control:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
.mapping-toolbar { margin-bottom: 10px; }
.mapping-create-card { display: none; }
.mapping-create-form { padding: 12px; }
.mapping-create-form > summary { cursor: pointer; }
.mapping-create-form > summary::-webkit-details-marker { display: none; }
.mapping-create-inner { padding-top: 12px; }
.mapping-form-hint { margin: 0 0 12px; color: var(--rk-muted); font-size: 11px; }
.mapping-create-page { display: grid; gap: 12px; }
.mapping-create-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mapping-create-page-head .card-title { margin: 0; font-size: 15px; }
.mapping-create-page-head p { margin: 4px 0 0; color: var(--rk-muted); font-size: 12px; }
.mapping-create-workspace { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(380px, 1.1fr); gap: 12px; align-items: stretch; }
.mapping-create-form-card { padding: 14px; }
.mapping-create-map-card { display: grid; grid-template-rows: auto minmax(360px, 1fr); overflow: hidden; }
.mapping-create-map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.mapping-create-map-head strong { font-size: 13px; }
.mapping-create-map-head span { color: var(--rk-muted); font-size: 11px; }
.mapping-create-map { min-height: 360px; height: 100%; }
.network-map { min-height: 340px; background: #dce9df; }
.network-map > i { display: none; }
.network-map-legend { display: flex; flex-wrap: wrap; gap: 7px 12px; padding: 9px 10px; border-top: 1px solid var(--rk-border); background: var(--rk-surface-alt); color: var(--rk-muted); font-size: 10px; }
.network-map-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(440px, 7fr); grid-template-areas: "mapping-list mapping-map" "mapping-list mapping-legend"; grid-template-rows: clamp(400px, 58vh, 600px) auto; gap: 0; align-items: stretch; overflow: hidden; }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > #network-map { grid-area: mapping-map; width: 100%; height: 100%; min-width: 0; min-height: 0; border-left: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .rk-table-wrap { grid-area: mapping-list; min-width: 0; min-height: 0; height: 100%; margin: 0; border: 0; border-radius: 0; }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .network-map-legend { grid-area: mapping-legend; border-left: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .technician-progress-card { max-width: 860px; padding: 0; overflow: hidden; }
html[data-theme] body[data-shell="app"] .technician-progress-head { align-items: center; margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .technician-progress-eyebrow { display: block; margin-bottom: 3px; color: var(--rk-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme] body[data-shell="app"] .technician-progress-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
html[data-theme] body[data-shell="app"] .technician-progress-status { display: inline-flex; align-items: center; min-height: 29px; padding: 5px 9px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); color: var(--rk-muted); font-size: 11px; font-weight: 800; }
html[data-theme] body[data-shell="app"] .technician-progress-status.is-assigned { border-color: color-mix(in srgb, var(--rk-brand) 35%, var(--rk-border)); background: var(--rk-brand-soft); color: var(--rk-brand-strong); }
html[data-theme] body[data-shell="app"] .technician-progress-status.is-active { border-color: color-mix(in srgb, var(--rk-accent) 42%, var(--rk-border)); background: var(--rk-accent-soft); color: var(--rk-warning); }
html[data-theme] body[data-shell="app"] .technician-progress-status.is-completed { border-color: color-mix(in srgb, var(--rk-signal-good) 40%, var(--rk-border)); background: color-mix(in srgb, var(--rk-signal-good) 12%, var(--rk-surface)); color: var(--rk-signal-good); }
html[data-theme] body[data-shell="app"] .technician-progress-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--rk-border);
}
html[data-theme] body[data-shell="app"] .technician-progress-summary > div { display: grid; gap: 4px; min-width: 0; }
html[data-theme] body[data-shell="app"] .technician-progress-summary > div:not(:last-child) { padding-right: 12px; border-right: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .technician-progress-summary .data-sub { color: var(--rk-muted); font-size: 11px; }
html[data-theme] body[data-shell="app"] .technician-progress-summary .data-main { overflow-wrap: anywhere; font-size: 13px; }
html[data-theme] body[data-shell="app"] .technician-dashboard-hero { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 18px 20px; border: 1px solid var(--rk-border); border-left: 3px solid var(--rk-brand); border-radius: 7px; background: var(--rk-surface); box-shadow: 0 5px 14px rgba(18, 35, 54, .05); }
html[data-theme] body[data-shell="app"] .technician-dashboard-hero-copy { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
html[data-theme] body[data-shell="app"] .technician-dashboard-hero-copy p { max-width: 500px; }
html[data-theme] body[data-shell="app"] .technician-dashboard-window { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 6px; color: var(--rk-brand-strong); background: var(--rk-brand-soft); }
html[data-theme] body[data-shell="app"] .technician-dashboard-window svg { width: 21px; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
html[data-theme] body[data-shell="app"] .technician-dashboard-hero h2 { margin: 0; color: var(--rk-ink); font-size: 22px; }
html[data-theme] body[data-shell="app"] .technician-dashboard-hero p { max-width: 620px; margin: 5px 0 0; color: var(--rk-muted); font-size: 13px; line-height: 1.5; }
html[data-theme] body[data-shell="app"] .technician-dashboard-hero-actions { display: flex; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
html[data-theme] body[data-shell="app"] .technician-dashboard-queue-action { display: inline-flex; align-items: center; gap: 7px; }
html[data-theme] body[data-shell="app"] .technician-dashboard-queue-badge { display: inline-grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border-radius: 9px; color: #fff; background: var(--rk-signal-good); font-size: 10px; font-weight: 900; line-height: 1; }
html[data-theme] body[data-shell="app"] .technician-dashboard-queue-badge.is-incident { background: var(--rk-danger); }
html[data-theme] body[data-shell="app"] .technician-dashboard-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
html[data-theme] body[data-shell="app"] .technician-dashboard-summary .technician-dashboard-kpi { min-height: 88px; text-decoration: none; }
html[data-theme] body[data-shell="app"] .technician-dashboard-kpi .overview-number { display: block; }
html[data-theme] body[data-shell="app"] .technician-dashboard-kpi .overview-number small { margin-left: 3px; color: var(--rk-muted); font-size: 11px; font-weight: 800; }
html[data-theme] body[data-shell="app"] .technician-onu-signal-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
html[data-theme] body[data-shell="app"] .technician-onu-signal-card { min-height: 92px; align-items: stretch; padding: 13px 14px; }
html[data-theme] body[data-shell="app"] .technician-onu-signal-card .overview-tile-copy { display: flex; flex-direction: column; justify-content: center; }
html[data-theme] body[data-shell="app"] .technician-onu-signal-card .overview-kicker { display: block; line-height: 1.3; }
html[data-theme] body[data-shell="app"] .technician-onu-signal-card .overview-number { display: block; margin-top: 6px; font-size: 24px; }
html[data-theme] body[data-shell="app"] .technician-onu-signal-card .overview-number small { margin-left: 4px; color: var(--rk-muted); font-size: 11px; font-weight: 800; }
html[data-theme] body[data-shell="app"] .technician-onu-signal-card.is-good { --dashboard-accent: var(--rk-signal-good); }
html[data-theme] body[data-shell="app"] .technician-onu-signal-card.is-warning { --dashboard-accent: var(--rk-warning); }
html[data-theme] body[data-shell="app"] .technician-onu-signal-card.is-critical, html[data-theme] body[data-shell="app"] .technician-onu-signal-card.is-los { --dashboard-accent: var(--rk-danger); }
html[data-theme] body[data-shell="app"] .technician-onu-signal-card.is-flapping { --dashboard-accent: #b45309; }
html[data-theme] body[data-shell="app"] .technician-dashboard-kpi-psb { --dashboard-accent: var(--rk-signal-good); }
html[data-theme] body[data-shell="app"] .technician-dashboard-kpi-psb .overview-glyph { color: var(--rk-signal-good); background: color-mix(in srgb, var(--rk-signal-good) 14%, var(--rk-surface)); }
html[data-theme] body[data-shell="app"] .technician-dashboard-kpi-incident { --dashboard-accent: var(--rk-danger); }
html[data-theme] body[data-shell="app"] .technician-dashboard-kpi-incident .overview-glyph { color: var(--rk-danger); background: color-mix(in srgb, var(--rk-danger) 13%, var(--rk-surface)); }
html[data-theme] body[data-shell="app"] .technician-dashboard-kpi-active { --dashboard-accent: #2777b7; }
html[data-theme] body[data-shell="app"] .technician-dashboard-kpi-active .overview-glyph { color: #2777b7; background: #e5f0fb; }
html[data-theme] body[data-shell="app"] .technician-dashboard-kpi-queue { --dashboard-accent: var(--rk-warning); }
html[data-theme] body[data-shell="app"] .technician-dashboard-kpi-queue .overview-glyph { color: var(--rk-warning); background: var(--rk-warning-soft); }
html[data-theme] body[data-shell="app"] .technician-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
html[data-theme] body[data-shell="app"] .technician-dashboard-panel { overflow: hidden; }
html[data-theme] body[data-shell="app"] .technician-dashboard-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html[data-theme] body[data-shell="app"] .technician-dashboard-panel-count { flex: 0 0 auto; padding: 4px 7px; border-radius: 4px; color: var(--rk-muted); background: var(--rk-surface); font-size: 10px; font-weight: 800; }
html[data-theme] body[data-shell="app"] .technician-dashboard-list { display: grid; }
html[data-theme] body[data-shell="app"] .technician-dashboard-work { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .technician-dashboard-work:last-child { border-bottom: 0; }
html[data-theme] body[data-shell="app"] .technician-dashboard-work > div { display: grid; min-width: 0; gap: 3px; }
html[data-theme] body[data-shell="app"] .technician-dashboard-work strong { overflow: hidden; color: var(--rk-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .technician-dashboard-work span { overflow: hidden; color: var(--rk-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { html[data-theme] body[data-shell="app"] .technician-dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme] body[data-shell="app"] .technician-dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { html[data-theme] body[data-shell="app"] .technician-dashboard-hero { align-items: start; flex-direction: column; padding: 16px; } html[data-theme] body[data-shell="app"] .technician-dashboard-hero-actions { justify-content: flex-start; } html[data-theme] body[data-shell="app"] .technician-dashboard-summary { grid-template-columns: 1fr 1fr; } html[data-theme] body[data-shell="app"] .technician-dashboard-work { padding: 12px; grid-template-columns: auto minmax(0, 1fr); } html[data-theme] body[data-shell="app"] .technician-dashboard-work .btn { grid-column: 2; justify-self: start; } }
html[data-theme] body[data-shell="app"] .technician-vertical-stepper {
  display: grid;
  gap: 0;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
html[data-theme] body[data-shell="app"] .technician-progress-timeline { padding: 20px 24px 10px; }
html[data-theme] body[data-shell="app"] .technician-progress-timeline-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
html[data-theme] body[data-shell="app"] .technician-progress-timeline-head strong { display: block; color: var(--rk-ink); font-size: 16px; }
html[data-theme] body[data-shell="app"] .technician-vertical-stepper > li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(76px, 96px) 32px minmax(0, 1fr);
  gap: 11px;
  min-height: 68px;
  color: var(--rk-muted);
}
html[data-theme] body[data-shell="app"] .technician-vertical-stepper > li:not(:last-child)::before {
  position: absolute;
  top: 32px;
  bottom: 0;
  left: 122px;
  width: 2px;
  background: var(--rk-border);
  content: "";
}
html[data-theme] body[data-shell="app"] .technician-step-duration { padding-top: 7px; color: var(--rk-muted); font-size: 11px; font-weight: 700; line-height: 1.25; text-align: right; }
html[data-theme] body[data-shell="app"] .technician-vertical-stepper > li.is-current .technician-step-duration { color: var(--rk-warning); }
html[data-theme] body[data-shell="app"] .technician-step-dot {
  z-index: 1;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid var(--rk-border);
  border-radius: 50%;
  background: var(--rk-surface);
  color: var(--rk-muted);
  font-size: 12px;
  font-weight: 800;
}
html[data-theme] body[data-shell="app"] .technician-vertical-stepper > li.is-done { color: var(--rk-ink); }
html[data-theme] body[data-shell="app"] .technician-vertical-stepper > li.is-done .technician-step-dot { border-color: var(--rk-brand); background: var(--rk-brand); color: #fff; }
html[data-theme] body[data-shell="app"] .technician-vertical-stepper > li.is-done:not(:last-child)::before { background: var(--rk-brand); }
html[data-theme] body[data-shell="app"] .technician-vertical-stepper > li.is-current { color: var(--rk-ink); }
html[data-theme] body[data-shell="app"] .technician-vertical-stepper > li.is-current .technician-step-dot { border-color: var(--rk-accent); background: var(--rk-accent); color: #fff; box-shadow: 0 0 0 4px var(--rk-accent-soft); }
html[data-theme] body[data-shell="app"] .technician-vertical-stepper > li.is-current > div > strong::after { display: inline-block; margin-left: 7px; color: var(--rk-warning); content: "Tahap aktif"; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
html[data-theme] body[data-shell="app"] .technician-vertical-stepper strong { display: block; font-size: 14px; }
html[data-theme] body[data-shell="app"] .technician-vertical-stepper p { margin: 4px 0 0; font-size: 13px; }
html[data-theme] body[data-shell="app"] .technician-step-activity { margin: 4px 0 12px; padding: 8px 10px; border: 1px solid var(--rk-border); border-left: 3px solid var(--rk-brand); border-radius: 6px; background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .technician-step-activity > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--rk-ink); font-size: 12px; }
html[data-theme] body[data-shell="app"] .technician-step-activity time { color: var(--rk-muted); font-size: 11px; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .technician-step-activity p { margin-top: 3px; color: var(--rk-muted); font-size: 12px; }
html[data-theme] body[data-shell="app"] .technician-live-camera { gap: 7px; }
html[data-theme] body[data-shell="app"] .technician-camera-view { min-height: 190px; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 6px; background: #101a2d; }
html[data-theme] body[data-shell="app"] .technician-camera-view video,
html[data-theme] body[data-shell="app"] .technician-camera-view img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
html[data-theme] body[data-shell="app"] .technician-camera-status { margin: 0; color: var(--rk-muted); font-size: 12px; }
html[data-theme] body[data-shell="app"] .technician-proof-photo { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; padding: 4px 8px 4px 4px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface); color: var(--rk-text); cursor: pointer; font: inherit; font-size: 12px; }
html[data-theme] body[data-shell="app"] .technician-proof-photo img { width: 42px; height: 32px; border-radius: 3px; object-fit: cover; }
html[data-theme] body[data-shell="app"] .technician-proof-modal { width: min(720px, calc(100vw - 28px)); }
html[data-theme] body[data-shell="app"] .technician-proof-modal-body { padding: 12px; }
html[data-theme] body[data-shell="app"] .technician-proof-modal-body img { display: block; width: 100%; max-height: min(72vh, 680px); object-fit: contain; }
html[data-theme] body[data-shell="app"] .technician-progress-history { padding-top: 14px; border-top: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .technician-history-row { padding: 10px 0; border-bottom: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .technician-history-row > div { display: flex; justify-content: space-between; gap: 10px; }
html[data-theme] body[data-shell="app"] .technician-history-row span { color: var(--rk-muted); font-size: 12px; }
html[data-theme] body[data-shell="app"] .technician-history-row p { margin: 4px 0 0; color: var(--rk-muted); font-size: 13px; }
@media (max-width: 640px) {
  html[data-theme] body[data-shell="app"] .technician-progress-head,
  html[data-theme] body[data-shell="app"] .technician-progress-summary,
  html[data-theme] body[data-shell="app"] .technician-progress-timeline { padding-right: 16px; padding-left: 16px; }
  html[data-theme] body[data-shell="app"] .technician-step-activity > span { align-items: flex-start; flex-direction: column; gap: 2px; }
  html[data-theme] body[data-shell="app"] .technician-camera-view { min-height: 220px; }
}
@media (max-width: 620px) {
  .customer-map-picker-card { width: min(100vw - 16px, 880px); }
  .customer-location-map { height: 300px; min-height: 0; }
  html[data-theme] body[data-shell="app"] .technician-progress-summary { grid-template-columns: 1fr; gap: 9px; }
  .customer-map-search { align-items: stretch; flex-direction: column; }
  .customer-map-search .btn { width: 100%; }
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mapping-list" "mapping-map" "mapping-legend"; grid-template-rows: auto 360px auto; }
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > #network-map, html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .network-map-legend { border-left: 0; }
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > #network-map { border-top: 1px solid var(--rk-border); }
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .rk-table-wrap { height: auto; }
}
.ppp-network-access-panel { gap: 14px; }
.ppp-provisioning-choice-grid, .ppp-provisioning-details-grid { padding: 2px 0; }
.ppp-provisioning-choice-grid .field-span-2, .ppp-provisioning-details-grid .field-span-2 { grid-column: span 2; }
.ppp-provisioning-details-grid input[readonly] { background: var(--rk-surface); color: var(--rk-muted); }
.ppp-provisioning-services-card { border: 1px solid var(--rk-border); box-shadow: none; }
.ppp-provisioning-services-card .customer-extra-services-head { padding: 12px; }
.ppp-provisioning-services-card [data-olt-provisioning-warning] { margin: 10px 12px; }
.ppp-provisioning-services-card [data-olt-provisioning-confirm] { min-height: 38px; margin: 0; padding: 9px 12px; border-top: 1px solid var(--rk-border); background: var(--rk-surface-alt); color: var(--rk-ink); font-size: 11px; }
@media (min-width: 621px) {
  .ppp-customer-form .rk-form-grid { align-items: start; }
  .ppp-customer-form .field { align-content: start; }
  .ppp-customer-form .customer-location-group { align-items: stretch; }
  .ppp-customer-form .customer-field-address { min-height: 100%; }
  .ppp-customer-form .customer-field-address textarea { min-height: 142px; height: 100%; }
  .ppp-customer-form .customer-location-details { grid-template-rows: auto auto minmax(29px, 1fr); }
  .ppp-customer-form .customer-location-details .customer-map-button { align-self: end; }
}
.customer-extra-services { overflow: hidden; }
.customer-extra-services-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.extra-service-list { display: grid; }
.extra-service-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--rk-border); }
.extra-service-row:last-child { border-bottom: 0; }
.extra-service-row > div:first-of-type { display: grid; gap: 2px; min-width: 0; }
.extra-service-note, .extra-service-bill-badge { color: var(--rk-muted); font-size: 11px; }
.extra-service-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; text-align: right; }
.extra-service-amount { font-weight: 900; white-space: nowrap; }
.extra-service-empty { padding: 20px 14px; color: var(--rk-muted); text-align: center; }
.customer-wizard-actions { justify-content: flex-end; padding-top: 4px; }
.router-summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mini-kpi { min-width: 0; }
.router-report-kpi { min-height: 88px; text-decoration: none; cursor: pointer; }
.router-report-kpi-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 7px; background: var(--rk-brand-soft); color: var(--rk-brand-strong); }
.router-report-kpi-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.router-report-kpi > div { display: grid; min-width: 0; gap: 3px; }
.router-report-kpi strong { font-size: 21px; line-height: 1; }
.router-report-kpi.is-enabled { border-color: var(--rk-border); background: var(--rk-surface); }
.router-report-kpi.is-enabled .router-report-kpi-icon { background: #e7eef8; color: #3d6f9f; }
.router-report-kpi.is-selected { border-color: var(--rk-accent); background: var(--rk-brand-soft); box-shadow: inset 0 0 0 1px var(--rk-accent), var(--rk-shadow) !important; }
.router-report-kpi.is-selected .router-report-kpi-icon { background: var(--rk-surface); color: var(--rk-brand-strong); }
.router-report-kpi.is-selected .router-summary-title { color: var(--rk-brand-strong); }
.router-report-kpi.is-offline .router-report-kpi-icon { background: var(--rk-warning-soft); color: var(--rk-warning); }
.router-report-kpi.is-never .router-report-kpi-icon { background: var(--rk-danger-soft); color: var(--rk-danger); }
.router-time-card { margin-bottom: 16px; }
.router-time-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 14px; }
.router-time-grid .mini-kpi { display: grid; align-content: start; gap: 6px; min-height: 110px; padding: 12px; }
.router-time-grid strong { overflow-wrap: anywhere; font-size: 15px; line-height: 1.35; }
.data-sub { color: var(--rk-muted); font-size: 11px; line-height: 1.35; }
.router-time-help, .router-time-alert { margin: 0 14px 14px; }
.router-table-head { align-items: center; flex-wrap: wrap; }
.router-table-head-copy { margin-right: auto; }
.router-entries-control { white-space: nowrap; }
.rk-table td { min-width: 0; }
.rk-table .data-stack { min-width: 0; }
.rk-table .data-stack .data-main, .rk-table .data-stack .data-sub { overflow-wrap: anywhere; }
.olt-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 156px; }
.olt-row-actions .inline-form { display: contents; }
.olt-row-actions .rk-action-btn { width: 100%; min-height: 32px; justify-content: center; padding-inline: 8px; }
.olt-row-actions .olt-monitoring-action { grid-column: 1 / -1; }
.olt-row-actions .table-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-table:has(.olt-row-actions) th:nth-child(1), .rk-table:has(.olt-row-actions) td:nth-child(1) { width: 42px; }
.rk-table:has(.olt-row-actions) th:nth-child(6), .rk-table:has(.olt-row-actions) td:nth-child(6) { width: 174px; }
.rk-auto-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 9px 10px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); }
.rk-auto-table-left, .rk-auto-table-entries, .rk-auto-table-pagination { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.rk-auto-table-entries, .rk-auto-table-info { color: var(--rk-muted); font-size: 11px; font-weight: 700; }
.rk-auto-table-entries select { width: auto; min-width: 62px; min-height: 29px; padding: 4px 23px 4px 7px; }
.rk-auto-table-info { white-space: nowrap; }
.rk-auto-table-pagination { gap: 0; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); }
.rk-auto-table-pagination button, .rk-auto-table-pagination .active { min-height: 29px; padding: 5px 8px; border: 0; border-right: 1px solid var(--rk-border); background: transparent; color: var(--rk-brand-strong); font: 800 11px var(--rk-font); }
.rk-auto-table-pagination .active { color: var(--rk-muted); }
.rk-auto-table-pagination button:last-child { border-right: 0; }
.rk-auto-table-pagination button:not(:disabled):hover { background: var(--rk-brand-soft); }
.rk-auto-table-pagination button:disabled { background: var(--rk-surface-alt); color: var(--rk-muted); }
.rk-card:has(.rk-table-controls) > .rk-card-head > .inline-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.rk-card:has(.rk-table-controls) > .rk-card-head select { min-width: 0; }
.rk-table-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 12px; padding: 8px 10px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.rk-table-controls .toolbar-search { margin-left: auto; }
.rk-table-footer:not(.rk-auto-table-footer) { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-top: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.customer-list-pagination { display: inline-flex; align-items: center; gap: 0; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); }
.customer-list-pagination a, .customer-list-pagination span { min-height: 29px; padding: 5px 8px; border-right: 1px solid var(--rk-border); color: var(--rk-brand-strong); font-size: 11px; font-weight: 800; line-height: 17px; text-decoration: none; }
.customer-list-pagination > :last-child { border-right: 0; }
.customer-list-pagination .active, .customer-list-pagination .disabled { color: var(--rk-muted); background: var(--rk-surface-alt); }
.customer-list-pagination a:hover { background: var(--rk-brand-soft); }
.rk-table-footer .rk-table-pagination:not(.rk-auto-table-pagination) { display: inline-flex; align-items: center; gap: 0; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); }
.rk-table-footer .rk-table-pagination:not(.rk-auto-table-pagination) a, .rk-table-footer .rk-table-pagination:not(.rk-auto-table-pagination) span { min-height: 29px; padding: 5px 8px; border-right: 1px solid var(--rk-border); color: var(--rk-brand-strong); font-size: 11px; font-weight: 800; line-height: 17px; text-decoration: none; }
.rk-table-footer .rk-table-pagination:not(.rk-auto-table-pagination) > :last-child { border-right: 0; }
.rk-table-footer .rk-table-pagination:not(.rk-auto-table-pagination) .active, .rk-table-footer .rk-table-pagination:not(.rk-auto-table-pagination) .disabled { color: var(--rk-muted); background: var(--rk-surface-alt); }
.rk-table-footer .rk-table-pagination:not(.rk-auto-table-pagination) a:hover { background: var(--rk-brand-soft); }
.rk-pagination { display: inline-flex; align-items: center; gap: 0; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); }
.rk-pagination a, .rk-pagination span { min-height: 29px; padding: 5px 8px; border-right: 1px solid var(--rk-border); color: var(--rk-brand-strong); font-size: 11px; font-weight: 800; line-height: 17px; text-decoration: none; }
.rk-pagination > :last-child { border-right: 0; }
.rk-pagination .current, .rk-pagination .disabled { color: var(--rk-muted); background: var(--rk-surface-alt); }
.rk-pagination a:hover { background: var(--rk-brand-soft); }
/* Server-paginated tables use one shared control after the table. */
.rk-card-head :is(.table-pagination, .rk-table-pagination, .customer-list-pagination), .rk-table-controls > :is(.table-pagination, .rk-table-pagination, .customer-list-pagination) { display: none !important; }
.finance-report-shell { overflow: hidden; padding: 0; }
.finance-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.finance-report-title { margin: 0; color: var(--rk-ink); font-size: 17px; line-height: 1.2; }
.finance-report-rule { width: 38px; height: 3px; margin: 9px 0 7px; border-radius: 999px; background: var(--rk-brand); }
.finance-report-period, .finance-report-method { color: var(--rk-muted); font-size: 12px; line-height: 1.45; }
.finance-report-method { margin-top: 2px; }
.finance-report-actions-panel { display: grid; justify-items: end; gap: 6px; min-width: max-content; }
.finance-report-actions-title { color: var(--rk-muted); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.finance-report-buttons { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.finance-report-action-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 9px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); color: var(--rk-brand-strong); font-size: 11px; font-weight: 800; text-decoration: none; cursor: pointer; }
.finance-report-action-btn:hover { border-color: var(--rk-brand); background: var(--rk-brand-soft); }
.finance-report-action-svg { width: 15px; height: 15px; }
.finance-report-overview { padding: 12px 14px 0; }
.finance-report-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.finance-report-kpis-topup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finance-report-kpi { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface); }
.finance-report-kpi > div:last-child { min-width: 0; }
.finance-report-kpi-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 6px; background: var(--rk-brand-soft); color: var(--rk-brand-strong); font-size: 14px; font-weight: 900; }
.finance-report-kpi-icon.is-fee { background: var(--rk-warning-soft); color: var(--rk-warning); }
.finance-report-kpi-icon.is-total { background: #e5f0fb; color: #2777b7; }
.finance-report-kpi-label { overflow: hidden; color: var(--rk-muted); font-size: 10px; font-weight: 900; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.finance-report-kpi-value { margin-top: 3px; overflow: hidden; color: var(--rk-ink); font-size: 16px; font-weight: 900; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.finance-report-kpi-value.is-danger { color: var(--rk-danger); }
.finance-report-data-section { margin: 12px 14px 14px; }
.finance-report-card-head { padding: 9px 10px; }
.finance-profit-section { display: grid; gap: 12px; padding: 12px 14px 0; }
.finance-profit-chart-card { --finance-income: #2f83c4; --finance-profit: #d85d5d; --finance-fee: #e68732; --finance-tax: #7d6bd1; --finance-expense: #d85d5d; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface); }
.finance-profit-chart-title { padding: 11px 12px 0; color: var(--rk-ink); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.finance-profit-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px 10px; color: var(--rk-muted); font-size: 10px; font-weight: 800; }
.finance-profit-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.finance-profit-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--rk-border); }
.finance-profit-legend .income { background: var(--finance-income); }.finance-profit-legend .profit { background: var(--finance-profit); }
.finance-profit-legend .fee { background: var(--finance-fee); }.finance-profit-legend .tax { background: var(--finance-tax); }.finance-profit-legend .expense { background: var(--finance-expense); }
.finance-money-out-breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 12px 10px; }.finance-money-out-breakdown > div { min-width: 0; padding: 7px 8px; border-left: 3px solid var(--rk-border); background: var(--rk-surface-alt); }.finance-money-out-breakdown span { display: block; overflow: hidden; color: var(--rk-muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.finance-money-out-breakdown strong { display: block; overflow: hidden; margin-top: 2px; color: var(--rk-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.finance-money-out-breakdown .is-fee { border-left-color: var(--finance-fee); }.finance-money-out-breakdown .is-tax { border-left-color: var(--finance-tax); }.finance-money-out-breakdown .is-expense { border-left-color: var(--finance-expense); }
.finance-profit-chart { position: relative; min-height: 204px; overflow: hidden; border-top: 1px solid var(--rk-border); border-bottom: 1px solid var(--rk-border); background: var(--rk-surface); }
.finance-profit-chart::before { position: absolute; z-index: 0; inset: 10px 0 30px; content: ""; border-bottom: 1px solid rgba(94, 126, 151, .35); background: repeating-linear-gradient(to top, transparent 0, transparent 29px, rgba(94, 126, 151, .16) 30px); pointer-events: none; }
.finance-profit-area-chart { position: absolute; z-index: 1; top: 10px; left: 0; width: 100%; height: 164px; overflow: visible; pointer-events: none; }
.finance-chart-area { opacity: .10; }.finance-chart-area.is-income { fill: var(--finance-income); }.finance-chart-area.is-profit { fill: var(--finance-profit); }.finance-chart-area.is-fee { fill: var(--finance-fee); }.finance-chart-area.is-tax { fill: var(--finance-tax); }.finance-chart-area.is-expense { fill: var(--finance-expense); }
.finance-chart-line { fill: none; stroke-width: 1.7; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }.finance-chart-line.is-income { stroke: var(--finance-income); }.finance-chart-line.is-profit { stroke: var(--finance-profit); }.finance-chart-line.is-fee { stroke: var(--finance-fee); }.finance-chart-line.is-tax { stroke: var(--finance-tax); }.finance-chart-line.is-expense { stroke: var(--finance-expense); }
.finance-chart-dot { fill: none; stroke-width: 8px; vector-effect: non-scaling-stroke; stroke-linecap: round; }.finance-chart-dot.is-income { stroke: var(--finance-income); }.finance-chart-dot.is-profit { stroke: var(--finance-profit); }.finance-chart-dot.is-fee { stroke: var(--finance-fee); }.finance-chart-dot.is-tax { stroke: var(--finance-tax); }.finance-chart-dot.is-expense { stroke: var(--finance-expense); }
.finance-profit-hit-grid { position: absolute; z-index: 2; inset: 10px 0 30px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.finance-profit-hit { position: relative; min-width: 0; padding: 0; border: 0; border-right: 1px solid rgba(94, 126, 151, .12); background: transparent; cursor: crosshair; }.finance-profit-hit:last-child { border-right: 0; }.finance-profit-hit:hover, .finance-profit-hit:focus-visible { background: rgba(47, 131, 196, .05); outline: none; }.finance-profit-hit:focus-visible { box-shadow: inset 0 0 0 2px rgba(47, 131, 196, .48); }
.finance-profit-hit:is(:hover, :focus-visible)::after { position: absolute; z-index: 5; bottom: 7px; left: 50%; width: max-content; max-width: min(290px, 86vw); padding: 5px 7px; border-radius: 5px; background: rgba(20, 43, 63, .94); color: #fff; content: attr(data-chart-value); font-size: 10px; font-weight: 800; line-height: 1.25; text-align: center; transform: translateX(-50%); pointer-events: none; }
.finance-profit-month-axis { position: absolute; z-index: 3; right: 0; bottom: 7px; left: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); color: var(--rk-muted); font-size: 10px; font-weight: 800; text-align: center; }.finance-profit-month-axis span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-profit-table { min-width: 780px; }
.olt-settings-hero { display: grid; grid-template-columns: 82px minmax(170px, .8fr) minmax(300px, 1.25fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--rk-border); border-radius: var(--rk-radius); background: var(--rk-surface); box-shadow: var(--rk-shadow); }
.olt-device-mark { width: 82px; height: 82px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); color: var(--rk-brand-strong); }
button.olt-device-mark { padding: 0; cursor: pointer; }
.olt-device-mark svg { width: 76px; height: auto; }
.olt-device-generic { font-size: 17px; font-weight: 900; }
.olt-device-identity { min-width: 0; }
.olt-device-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.olt-device-title-row h2 { margin: 0; font-size: 18px; line-height: 1.2; }
.olt-device-status { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 3px 7px; border-radius: 999px; background: var(--rk-surface-alt); color: var(--rk-muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.olt-device-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.olt-device-status.is-online { background: var(--rk-brand-soft); color: var(--rk-brand-strong); }
.olt-device-model, .olt-device-meta { margin-top: 5px; color: var(--rk-muted); font-size: 11px; }
.olt-device-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.olt-device-stats > div { display: grid; gap: 2px; min-width: 0; padding: 7px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
.olt-device-stats strong { overflow: hidden; color: var(--rk-ink); font-size: 15px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.olt-device-stats span { overflow: hidden; color: var(--rk-muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.olt-device-stats .is-online { color: var(--rk-brand-strong); }
.olt-device-stats .is-los { color: var(--rk-danger); }
.olt-device-actions { display: grid; justify-items: stretch; gap: 6px; }
.olt-device-actions .btn { white-space: nowrap; }
.olt-uplink-workspace { display: grid; gap: 10px; }
.olt-uplink-workspace > .rk-card-head { border: 1px solid var(--rk-border); border-radius: var(--rk-radius); }
.olt-uplink-card { overflow: hidden; border: 1px solid var(--rk-border); border-radius: var(--rk-radius); background: var(--rk-surface); box-shadow: var(--rk-shadow); }
.olt-uplink-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.olt-uplink-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.olt-card-mark { width: 42px; height: 36px; flex: 0 0 42px; color: var(--rk-brand-strong); }
.olt-card-mark svg { width: 100%; height: 100%; }
.olt-uplink-title { color: var(--rk-ink); font-size: 14px; font-weight: 900; }
.olt-uplink-title span, .olt-uplink-subtitle { color: var(--rk-muted); }
.olt-uplink-subtitle { margin-top: 2px; font-size: 11px; }
.olt-uplink-card-health { display: flex; align-items: center; gap: 6px; }
.olt-uplink-card-health > div { display: grid; gap: 1px; min-width: 70px; padding-left: 8px; border-left: 1px solid var(--rk-border); }
.olt-uplink-card-health span { color: var(--rk-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.olt-uplink-card-health strong { font-size: 12px; }
.olt-uplink-body { display: grid; gap: 10px; padding: 12px; }
.olt-uplink-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.olt-uplink-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
.olt-uplink-metric span { color: var(--rk-muted); font-size: 11px; }
.olt-uplink-metric strong { font-size: 15px; }
.olt-uplink-metric .state-up { color: var(--rk-brand-strong); }
.olt-uplink-metric .state-down, .olt-uplink-metric .state-shutdown { color: var(--rk-danger); }
.olt-uplink-ports { display: grid; gap: 8px; }
.olt-uplink-ports-head { display: flex; align-items: center; justify-content: space-between; color: var(--rk-ink); font-size: 12px; font-weight: 900; }
.olt-uplink-ports-head small { color: var(--rk-muted); font-size: 10px; font-weight: 700; }
.olt-uplink-port-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 7px; }
.olt-uplink-port { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 3px 7px; align-items: center; padding: 7px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); color: var(--rk-ink); text-decoration: none; }
.olt-uplink-port:hover { border-color: var(--rk-brand); background: var(--rk-brand-soft); }
.olt-port-icon { grid-row: span 2; width: 30px; height: 30px; color: var(--rk-muted); }
.olt-port-icon svg { width: 100%; height: 100%; }
.olt-uplink-port-copy { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.olt-uplink-port-copy strong { font-size: 11px; }
.olt-uplink-link-state, .olt-uplink-admin-state { color: var(--rk-muted); font-size: 8px; font-weight: 900; white-space: nowrap; }
.olt-uplink-link-state.is-up { color: var(--rk-brand-strong); }
.olt-uplink-link-state.is-down, .olt-uplink-admin-state.is-shutdown { color: var(--rk-danger); }
.olt-uplink-port em { grid-column: 2; overflow: hidden; color: var(--rk-muted); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.app-log-card { overflow: hidden; }
.app-log-subtitle { padding: 11px 12px; border-bottom: 1px solid var(--rk-border); color: var(--rk-ink); font-size: 13px; font-weight: 900; }
.app-log-wa-tabs { margin: 0; border-radius: 0; }
.app-log-wa-summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.app-log-wa-summary-item { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; padding-right: 8px; border-right: 1px solid var(--rk-border); }
.app-log-wa-summary-item:last-child { padding-right: 0; border-right: 0; }
.app-log-wa-summary-item span { color: var(--rk-muted); font-size: 11px; font-weight: 700; }
.app-log-wa-summary-item strong { color: var(--rk-ink); font-size: 15px; line-height: 1; }
.app-log-wa-summary-item.is-sent strong { color: var(--rk-brand-strong); }
.app-log-wa-summary-item.is-unsent strong { color: var(--rk-danger); }
.app-log-dt-controls { flex-wrap: wrap; }
.app-log-dt-controls .table-meta { margin-right: auto; }
.app-log-dt-search { margin-left: auto; }
.app-log-table-wrap { border-inline: 0; border-radius: 0; }
.app-log-card .rk-table th { font-size: 10px; }
.app-log-card .rk-table td { font-size: 12px; }
.app-log-id { color: var(--rk-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.app-log-message-preview { max-width: 175px; }
.app-log-message-preview-btn { display: block; width: 100%; overflow: hidden; padding: 6px 7px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface-alt); color: var(--rk-ink); font: inherit; text-align: left; cursor: pointer; }
.app-log-message-preview-btn:hover { border-color: var(--rk-brand); background: var(--rk-brand-soft); }
.app-log-message-preview-btn em { display: block; overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.app-log-wa-inbound-image { display: block; width: auto; max-width: 100%; max-height: 420px; margin: 8px 0; border: 1px solid var(--rk-border); border-radius: 4px; object-fit: contain; }
.app-log-name-cell, .app-log-type-main { font-weight: 800; }
.app-log-customer-matches { margin-top: 3px; font-weight: 600; }
.app-log-customer-matches summary { width: max-content; color: var(--rk-brand-strong); font-size: 10px; font-weight: 800; cursor: pointer; }
.app-log-customer-matches span { display: block; max-width: 210px; margin-top: 3px; overflow-wrap: anywhere; font-size: 10px; line-height: 1.3; }
.app-log-sep { color: var(--rk-border); margin: 0 2px; }
.app-log-code { display: block; max-width: 260px; overflow: hidden; padding: 5px 7px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface-alt); color: var(--rk-muted); font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.user-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.user-cell > :last-child { min-width: 0; }
.user-avatar-thumb, .user-avatar-fallback { width: 30px; min-width: 30px; height: 30px; display: grid; flex: 0 0 30px; place-items: center; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 50%; background: var(--rk-brand-soft); color: var(--rk-brand-strong); font-size: 11px; font-weight: 900; line-height: 1; }
.user-avatar-thumb { object-fit: cover; }
.topup-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .topup-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .topup-summary-grid { grid-template-columns: 1fr; } }
.olt-detail-page { display: grid; gap: 10px; max-width: 1280px; }
.olt-detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.olt-detail-snapshot { color: var(--rk-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.olt-detail-card { overflow: hidden; border: 1px solid var(--rk-border); border-radius: var(--rk-radius); background: var(--rk-surface); box-shadow: var(--rk-shadow); }
.olt-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.olt-detail-breadcrumb { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--rk-muted); font-size: 12px; font-weight: 800; }
.olt-detail-breadcrumb b { color: var(--rk-border); }
.olt-detail-breadcrumb strong { max-width: min(360px, 42vw); overflow: hidden; padding: 4px 7px; border: 1px solid var(--rk-border); border-radius: 5px; color: var(--rk-ink); background: var(--rk-surface); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.olt-uplink-state { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 3px 7px; border: 1px solid #9ed7cf; border-radius: 999px; background: var(--rk-brand-soft); color: var(--rk-brand-strong); font-size: 10px; font-weight: 900; white-space: nowrap; }
.olt-uplink-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.olt-uplink-state.is-shutdown { border-color: #efb6bd; background: var(--rk-danger-soft); color: var(--rk-danger); }
.olt-detail-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
.olt-detail-column { min-width: 0; padding: 14px; }
.olt-detail-column + .olt-detail-column { border-left: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.olt-detail-section + .olt-detail-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rk-border); }
.olt-detail-section h2 { margin: 0 0 9px; color: var(--rk-ink); font-size: 13px; line-height: 1.25; }
.olt-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.olt-detail-list { display: grid; margin: 0; }
.olt-detail-list > div { display: grid; grid-template-columns: minmax(120px, 42%) minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--rk-border) 70%, transparent); }
.olt-detail-list > div:last-child { border-bottom: 0; }
.olt-detail-list dt { color: var(--rk-muted); font-size: 11px; font-weight: 700; }
.olt-detail-list dd { min-width: 0; margin: 0; color: var(--rk-ink); font-size: 12px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.olt-detail-list-muted dd { color: var(--rk-muted); font-weight: 700; }
.olt-detail-dom-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 7px 8px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface); color: var(--rk-muted); font-size: 10px; font-weight: 800; }
.olt-detail-dom-summary strong { color: var(--rk-ink); font-size: 11px; text-align: right; }
.olt-detail-link { font-size: 11px; font-weight: 900; }
.olt-detail-link.is-up { color: var(--rk-brand-strong); }
.olt-detail-link.is-down { color: var(--rk-danger); }
.olt-vlan-chip { display: inline-block; max-width: 100%; padding: 3px 6px; border: 1px solid #9bc9e8; border-radius: 5px; background: #e7f3fc; color: #2374aa; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
@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 { padding: 12px; }
  .olt-detail-column + .olt-detail-column { border-top: 1px solid var(--rk-border); border-left: 0; }
  .olt-detail-breadcrumb strong { max-width: calc(100vw - 64px); }
  .olt-detail-list > div { grid-template-columns: minmax(105px, 42%) minmax(0, 1fr); gap: 8px; }
  .olt-detail-dom-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .olt-detail-dom-summary strong { text-align: left; }
}
.olt-speed-profiles-card { overflow: hidden; }
.olt-speed-profiles-card .rk-card-head, .olt-speed-profiles-list-card .rk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.olt-speed-profiles-card .rk-card-head > :first-child, .olt-speed-profiles-list-card .rk-card-head > :first-child { min-width: 0; }
.olt-speed-profiles-card .rk-card-head .rk-actions { justify-content: flex-end; flex-wrap: wrap; }
.olt-speed-profiles-card .olt-onu-type-tabs { display: inline-flex; align-items: center; gap: 3px; margin: 0; padding: 7px 10px; border-top: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.olt-speed-profiles-card .olt-onu-type-tabs button { min-height: 28px; padding: 4px 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--rk-muted); font-size: 11px; font-weight: 900; cursor: pointer; }
.olt-speed-profiles-card .olt-onu-type-tabs button:hover { color: var(--rk-brand-strong); background: var(--rk-brand-soft); }
.olt-speed-profiles-card .olt-onu-type-tabs button.is-active { border-color: #9ed7cf; background: var(--rk-surface); color: var(--rk-brand-strong); }
.olt-speed-profiles-list-card { overflow: hidden; }
.olt-speed-profiles-list-card .rk-card-head { padding: 10px 12px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.olt-speed-profiles-list-card .rk-card-head .card-subtitle { margin-top: 3px; }
.olt-speed-profiles-list-card .rk-table :is(th, td):nth-child(1) { width: 42px; text-align: center; }
.olt-speed-profiles-list-card .rk-table :is(th, td):nth-child(2) { min-width: 150px; }
.olt-speed-profiles-list-card .rk-table :is(th, td):nth-child(3), .olt-speed-profiles-list-card .rk-table :is(th, td):nth-child(4) { width: 15%; }
.olt-speed-profiles-list-card .rk-table :is(th, td):nth-child(5) { width: 90px; text-align: center; }
.olt-speed-profiles-list-card .rk-table :is(th, td):nth-child(6) { width: 92px; }
.olt-speed-profiles-list-card .rk-table :is(th, td):nth-child(7) { width: 96px; }
.speed-profile-name { color: var(--rk-ink); font-size: 12px; }
.speed-profile-rate { color: var(--rk-brand-strong); font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.speed-profile-ref { display: inline-grid; min-width: 22px; min-height: 20px; place-items: center; padding: 2px 5px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface-alt); color: var(--rk-muted); font-size: 10px; font-weight: 900; font-variant-numeric: tabular-nums; }
.speed-profile-actions { min-width: max-content; }
.olt-onu-types-card { overflow: hidden; }
.olt-onu-types-card .olt-onu-type-tabs { display: inline-flex; align-items: center; gap: 3px; margin: 0; padding: 7px 10px; border-top: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.olt-onu-types-card .olt-onu-type-tabs button { min-height: 28px; padding: 4px 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--rk-muted); font-size: 11px; font-weight: 900; cursor: pointer; }
.olt-onu-types-card .olt-onu-type-tabs button:hover { color: var(--rk-brand-strong); background: var(--rk-brand-soft); }
.olt-onu-types-card .olt-onu-type-tabs button.is-active { border-color: #9ed7cf; background: var(--rk-surface); color: var(--rk-brand-strong); }
.olt-onu-types-card .rk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.olt-onu-types-card .rk-card-head > :first-child { min-width: 0; }
.olt-onu-types-card .rk-card-head .rk-actions { justify-content: flex-end; flex-wrap: wrap; }
.olt-onu-types-card .rk-card-head .card-subtitle { margin-top: 3px; }
.olt-onu-types-card .rk-table :is(th, td):nth-child(1) { width: 42px; text-align: center; }
.olt-onu-types-card .rk-table :is(th, td):nth-child(2) { min-width: 180px; }
.olt-onu-types-card .rk-table :is(th, td):nth-child(3), .olt-onu-types-card .rk-table :is(th, td):nth-child(4), .olt-onu-types-card .rk-table :is(th, td):nth-child(5) { width: 110px; text-align: center; }
.olt-onu-types-card .rk-table :is(th, td):nth-child(6) { width: 70px; text-align: center; }
.olt-onu-types-card .rk-table :is(th, td):nth-child(7) { width: 72px; }
.onu-type-name { color: var(--rk-ink); font-size: 12px; }
.onu-type-description { display: block; margin-top: 3px; color: var(--rk-muted); font-size: 10px; font-weight: 600; line-height: 1.3; }
.onu-type-capacity, .onu-type-used { display: inline-grid; min-width: 22px; min-height: 20px; place-items: center; padding: 2px 5px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface-alt); color: var(--rk-muted); font-size: 10px; font-weight: 900; font-variant-numeric: tabular-nums; }
.onu-type-used { color: var(--rk-brand-strong); }
.onu-type-actions { min-width: max-content; }
.olt-custom-page { max-width: 1120px; overflow: hidden; }
.olt-custom-page > .rk-card-head { padding: 12px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.olt-custom-tabs { display: flex; align-items: center; gap: 3px; overflow-x: auto; margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.olt-custom-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid transparent; border-radius: 5px; color: var(--rk-muted); font-size: 11px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.olt-custom-tabs a:hover { color: var(--rk-brand-strong); background: var(--rk-brand-soft); }
.olt-custom-tabs a.is-active { border-color: var(--rk-accent); background: var(--rk-surface); color: var(--rk-brand-strong); }
.olt-custom-panel { display: grid; gap: 12px; padding: 12px; background: var(--rk-surface); }
.olt-custom-panel .rk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
.olt-custom-panel .rk-card-head > :first-child { min-width: 0; }
.olt-custom-panel .rk-card-head .card-subtitle { margin-top: 3px; }
.olt-custom-panel .rk-table :is(th, td):nth-child(1) { width: 42px; text-align: center; }
.olt-custom-panel .rk-table :is(th, td):nth-child(4) { width: 96px; }
.olt-custom-panel .rk-table :is(th, td):nth-child(5) { width: 84px; }
.olt-custom-ssid-name { color: var(--rk-ink); font-size: 12px; }
.olt-custom-ssid-actions { min-width: max-content; }
.olt-custom-signal-head { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
.olt-custom-signal-head h3 { margin: 0; color: var(--rk-ink); font-size: 13px; }
.olt-custom-signal-head p { margin: 0; color: var(--rk-muted); font-size: 11px; line-height: 1.4; }
.olt-custom-panel .onu-signal-scale { display: grid; gap: 10px; padding: 10px 2px 2px; }
.olt-custom-panel .onu-signal-scale-labels, .olt-custom-panel .onu-signal-scale-values { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 900; }
.olt-custom-panel .onu-signal-scale-labels .is-critical { color: var(--rk-danger); }
.olt-custom-panel .onu-signal-scale-labels .is-warning { color: var(--rk-warning); }
.olt-custom-panel .onu-signal-scale-labels .is-good { color: var(--rk-signal-good); }
.olt-custom-panel .onu-signal-track { position: relative; height: 18px; border-radius: 999px; background: linear-gradient(90deg, var(--rk-danger) 0%, var(--rk-danger) var(--critical-position), var(--rk-warning) var(--critical-position), var(--rk-warning) var(--good-position), var(--rk-signal-good) var(--good-position), var(--rk-signal-good) 100%); }
.olt-custom-panel .onu-signal-track-fill { position: absolute; inset: 0; pointer-events: none; }
.olt-custom-panel .onu-signal-ticks { position: relative; height: 27px; color: var(--rk-muted); font-size: 10px; line-height: 1.3; }
.olt-custom-panel .onu-signal-ticks span { position: absolute; top: 0; padding-top: 13px; white-space: nowrap; transform: translateX(-50%); }
.olt-custom-panel .onu-signal-ticks span::before { position: absolute; top: 0; left: 50%; width: 1px; height: 7px; background: var(--rk-border); content: ""; }
.olt-custom-panel .onu-signal-ticks span:nth-child(1) { left: 0; transform: none; }
.olt-custom-panel .onu-signal-ticks span:nth-child(1)::before { left: 0; }
.olt-custom-panel .onu-signal-ticks span:nth-child(2) { left: 16.6667%; }
.olt-custom-panel .onu-signal-ticks span:nth-child(3) { left: 33.3333%; }
.olt-custom-panel .onu-signal-ticks span:nth-child(4) { left: 50%; }
.olt-custom-panel .onu-signal-ticks span:nth-child(5) { left: 66.6667%; }
.olt-custom-panel .onu-signal-ticks span:nth-child(6) { left: 83.3333%; }
.olt-custom-panel .onu-signal-ticks span:nth-child(7) { right: 0; transform: none; }
.olt-custom-panel .onu-signal-ticks span:nth-child(7)::before { right: 0; left: auto; }
.olt-custom-panel .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; }
.olt-custom-panel .onu-signal-slider::-webkit-slider-runnable-track { height: 18px; border: 0; background: transparent; }
.olt-custom-panel .onu-signal-slider::-moz-range-track { height: 18px; border: 0; background: transparent; }
.olt-custom-panel .onu-signal-slider::-webkit-slider-thumb { width: 18px; height: 18px; border: 3px solid var(--rk-surface) !important; border-radius: 50%; appearance: none; cursor: grab; pointer-events: auto; box-shadow: 0 0 0 2px currentColor; background: currentColor; }
.olt-custom-panel .onu-signal-slider::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--rk-surface) !important; border-radius: 50%; cursor: grab; pointer-events: auto; box-shadow: 0 0 0 2px currentColor; background: currentColor; }
.olt-custom-panel .onu-signal-slider.is-critical { z-index: 2; color: var(--rk-danger) !important; }
.olt-custom-panel .onu-signal-slider.is-good { z-index: 3; color: var(--rk-signal-good) !important; }
.olt-custom-panel .onu-signal-scale-values output { padding: 5px 7px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface-alt); }
.olt-custom-panel .onu-signal-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.olt-custom-panel .onu-signal-rule { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--rk-border); border-top: 4px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
.olt-custom-panel .onu-signal-rule-title { display: flex; align-items: center; gap: 7px; }
.olt-custom-panel .onu-signal-rule-title i { display: inline-flex; align-items: center; height: 24px; padding: 0 6px; border-radius: 5px; font-style: normal; font-size: 10px; letter-spacing: 1px; line-height: 1; color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
.olt-custom-panel .onu-signal-rule strong { color: currentColor; font-size: 12px; }
.olt-custom-panel .onu-signal-rule span { color: var(--rk-muted); font-size: 10px; line-height: 1.4; }
.olt-custom-panel .onu-signal-rule.is-good { color: var(--rk-signal-good); border-top-color: var(--rk-signal-good); }
.olt-custom-panel .onu-signal-rule.is-warning { color: var(--rk-warning); border-top-color: var(--rk-warning); }
.olt-custom-panel .onu-signal-rule.is-critical { color: var(--rk-danger); border-top-color: var(--rk-danger); }
@media (max-width: 680px) {
  .olt-speed-profiles-card .rk-card-head, .olt-speed-profiles-list-card .rk-card-head { align-items: stretch; flex-direction: column; }
  .olt-speed-profiles-card .rk-card-head .rk-actions { justify-content: flex-start; }
  .olt-onu-types-card .rk-card-head { align-items: stretch; flex-direction: column; }
  .olt-onu-types-card .rk-card-head .rk-actions { justify-content: flex-start; }
  .olt-custom-panel { padding: 10px; }
  .olt-custom-panel .rk-card-head { align-items: stretch; flex-direction: column; }
  .olt-custom-panel .onu-signal-scale-labels, .olt-custom-panel .onu-signal-scale-values, .olt-custom-panel .onu-signal-ticks { font-size: 9px; }
  .olt-custom-panel .onu-signal-rule-grid { grid-template-columns: 1fr; }
}
.rk-table-bulk-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
.app-log-message-modal-body { min-height: 180px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 11px; border: 1px solid var(--rk-brand); border-radius: 6px; background: var(--rk-brand); color: #fff; font-weight: 800; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--rk-brand-strong); border-color: var(--rk-brand-strong); }
.btn-soft, .btn-ghost { background: var(--rk-surface); color: var(--rk-brand-strong); border-color: var(--rk-border); }
.btn-soft:hover, .btn-ghost:hover { background: var(--rk-brand-soft); border-color: var(--rk-brand); }
.btn-danger, .btn-danger-soft { background: var(--rk-danger); border-color: var(--rk-danger); color: #fff; }
.btn-danger-soft { background: var(--rk-danger-soft); color: var(--rk-danger); }
.btn-small, .btn-mini { min-height: 29px; padding: 5px 9px; font-size: 12px; }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

.form-grid, .rk-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field-span-2 { grid-column: span 2; }
.field > label, label { color: var(--rk-ink); font-size: 12px; font-weight: 800; }
.settings-compact-form { padding: 14px; }
.settings-form-section { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); }
.settings-form-section + .settings-form-section { margin-top: 2px; }
.settings-section-title { color: var(--rk-brand-strong); font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.settings-readonly-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-bank-stack { gap: 9px; }
.settings-bank-grid { padding-top: 2px; }
.settings-compact-actions { justify-content: flex-end; padding-top: 2px; }
.settings-tabs { display: flex; align-items: center; gap: 3px; overflow-x: auto; margin: 12px 0; padding: 5px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); }
.settings-tab { flex: 0 0 auto; min-height: 30px; padding: 6px 9px; border-radius: 5px; color: var(--rk-muted); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.settings-tab:hover { background: var(--rk-brand-soft); color: var(--rk-brand-strong); }
.settings-tab.is-active { background: var(--rk-surface); color: var(--rk-brand-strong); box-shadow: 0 1px 2px rgba(18,35,54,.08); }
html[data-theme] body[data-shell="app"] :is(.panel-tab, .settings-tab, .version-tab, .olt-custom-tabs a, .olt-onu-type-tabs button, .whatsapp-tab, .whatsapp-template-tab, [role="tab"]):is(.is-active, [aria-selected="true"]):not(.customer-wizard-step) { border-color: var(--rk-accent) !important; box-shadow: 0 0 0 1px var(--rk-accent) !important; }
html[data-theme] body[data-shell="app"] :is(a, button):is(.rk-summary-card, .mini-kpi):is(.is-active, .is-selected, [aria-current="page"]) { border-color: var(--rk-accent) !important; box-shadow: inset 0 0 0 1px var(--rk-accent), var(--rk-shadow) !important; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-height: 34px; padding: 6px 9px; border: 1px solid var(--rk-border); border-radius: 6px; outline: none; background: var(--rk-field); color: var(--rk-ink); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--rk-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rk-brand) 18%, transparent); }
.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; }
.customer-package-search { position: relative; width: 100%; }
.customer-package-search-trigger { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); color: var(--rk-ink); font-size: 12px; font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer; }
.customer-package-search-trigger:focus-visible { border-color: var(--rk-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rk-brand) 18%, transparent); outline: 0; }
.customer-package-search-trigger:disabled { cursor: not-allowed; background: var(--rk-surface-alt); color: var(--rk-muted); }
.customer-package-search-trigger-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-package-search-caret { width: 7px; height: 7px; flex: 0 0 auto; margin-right: 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; color: var(--rk-muted); transform: rotate(45deg) translateY(-2px); }
.customer-package-search-panel { position: absolute; z-index: 80; top: calc(100% + 4px); right: 0; left: 0; display: flex; flex-direction: column; gap: 4px; padding: 5px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); box-shadow: 0 16px 36px rgba(15, 23, 42, .16); }
.customer-package-search-panel[hidden] { display: none; }
.customer-package-search.is-up .customer-package-search-panel { top: auto; bottom: calc(100% + 4px); flex-direction: column-reverse; }
.customer-package-search-input { width: 100%; min-height: 34px; height: 34px; padding: 6px 9px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface); color: var(--rk-ink); font-size: 12px; box-shadow: none; }
.customer-package-search-input:focus { border-color: var(--rk-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rk-brand) 18%, transparent); outline: 0; }
.customer-package-search-list { max-height: 172px; overflow-y: auto; border-radius: 5px; }
.customer-package-search-option { display: block; width: 100%; min-height: 34px; padding: 8px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--rk-ink); font-size: 12px; font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-package-search-option:hover, .customer-package-search-option.is-selected { background: var(--rk-brand-soft); color: var(--rk-brand-strong); }
.customer-package-search-empty, .customer-package-search-more { padding: 7px 9px; color: var(--rk-muted); font-size: 11px; line-height: 1.25; }
.check-inline, .radio-row { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.radio-row { flex-wrap: wrap; margin-top: 3px; }

.table-wrap, .rk-table-wrap { overflow: auto; border: 1px solid var(--rk-border); border-radius: var(--rk-radius); background: var(--rk-surface); }
table { width: 100%; border-collapse: collapse; }
th { padding: 8px 10px; background: var(--rk-surface-alt); color: var(--rk-muted); font-size: 11px; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 8px 10px; border-top: 1px solid var(--rk-border); vertical-align: middle; }
tbody tr:hover { background: color-mix(in srgb, var(--rk-brand-soft) 45%, transparent); }
.badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 999px; background: var(--rk-surface-alt); color: var(--rk-muted); font-size: 11px; font-weight: 800; }
.badge-success, .status-success { background: var(--rk-brand-soft); color: var(--rk-brand-strong); }
.badge-danger, .status-danger { background: var(--rk-danger-soft); color: var(--rk-danger); }
.badge-warn, .badge-warning, .status-warning { background: var(--rk-warning-soft); color: var(--rk-warning); }
.online-payment-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid var(--rk-border);
  border-radius: 999px;
  background: var(--rk-surface-alt);
  color: var(--rk-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.online-payment-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.online-payment-status-success { border-color: color-mix(in srgb, var(--rk-signal-good) 36%, var(--rk-border)); background: color-mix(in srgb, var(--rk-signal-good) 14%, var(--rk-surface)); color: var(--rk-signal-good); }
.online-payment-status-warn { border-color: color-mix(in srgb, var(--rk-warning) 36%, var(--rk-border)); background: var(--rk-warning-soft); color: var(--rk-warning); }
.online-payment-status-danger { border-color: color-mix(in srgb, var(--rk-danger) 36%, var(--rk-border)); background: var(--rk-danger-soft); color: var(--rk-danger); }
.online-payment-status-muted { border-color: var(--rk-border); background: var(--rk-surface-alt); color: var(--rk-muted); }
.online-payment-error { display: block; max-width: 180px; margin-top: 4px; color: var(--rk-danger); overflow-wrap: anywhere; }
.voucher-status-pill, .voucher-due-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid var(--rk-border);
  border-radius: 999px;
  background: var(--rk-surface-alt);
  color: var(--rk-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.voucher-status-pill::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.voucher-status-pill.is-active, .voucher-due-pill.is-active { border-color: color-mix(in srgb, var(--rk-signal-good) 36%, var(--rk-border)); background: color-mix(in srgb, var(--rk-signal-good) 14%, var(--rk-surface)); color: var(--rk-signal-good); }
.voucher-status-pill.is-waiting, .voucher-due-pill.is-waiting { border-color: color-mix(in srgb, var(--rk-warning) 36%, var(--rk-border)); background: var(--rk-warning-soft); color: var(--rk-warning); }
.voucher-status-pill.is-expired, .voucher-status-pill.is-disabled, .voucher-due-pill.is-expired, .voucher-due-pill.is-disabled { border-color: color-mix(in srgb, var(--rk-danger) 36%, var(--rk-border)); background: var(--rk-danger-soft); color: var(--rk-danger); }
.empty-state { display: grid; min-height: 160px; place-items: center; padding: 24px; color: var(--rk-muted); text-align: center; }
.alert { padding: 11px 12px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
.alert-danger, .alert.error { border-color: color-mix(in srgb, var(--rk-danger) 40%, var(--rk-border)); background: var(--rk-danger-soft); color: var(--rk-danger); }
.alert.notice { border-color: color-mix(in srgb, var(--rk-brand) 40%, var(--rk-border)); background: var(--rk-brand-soft); color: var(--rk-brand-strong); }

.modal { display: none; position: fixed; inset: 0; z-index: 50; padding: 22px; }
.modal.is-open { display: grid; place-items: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(9, 20, 29, .58); }
.modal-card, .rk-modal-card { position: relative; z-index: 1; width: min(680px, 100%); max-height: calc(100vh - 44px); overflow: auto; border: 1px solid var(--rk-border); border-radius: 8px; background: var(--rk-surface); box-shadow: 0 26px 65px rgba(0,0,0,.28); }
.modal-body, .rk-modal-body, .modal-foot, .rk-modal-foot { padding: 17px; }
.modal-foot, .rk-modal-foot { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--rk-border); }
.modal-card > form { padding: 17px; }
.modal-card > form > .modal-actions { margin-top: 17px; justify-content: flex-end; }
.router-workspace > #router-main-form { display: grid; gap: 14px; }
.router-form-section { padding: 13px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); }
.router-form-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rk-border); }
.router-form-section-head > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.router-form-section-head strong { font-size: 13px; }
.router-form-section-head > span { color: var(--rk-muted); font-size: 11px; text-align: right; }
.router-form-step { display: inline-grid; min-width: 28px; min-height: 20px; place-items: center; padding: 2px 5px; border-radius: 5px; background: var(--rk-brand-soft); color: var(--rk-brand-strong); font-size: 10px; font-weight: 900; }
.router-form-grid { gap: 12px; }
.router-form-section .field > label { font-weight: 800; }
.router-form-section .help { margin-top: 4px; line-height: 1.4; }
.router-form-section .router-vpn-fields { margin: 0; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); }
.router-vpn-fields-head { padding: 10px 11px; border-bottom: 1px solid var(--rk-border); }
.router-vpn-fields-head span { color: var(--rk-muted); font-size: 11px; }
.router-test-result { margin-top: 14px; padding: 13px; }
.router-test-result .router-form-section-head { margin-bottom: 0; }
@media (max-width: 700px) {
  .router-form-section { padding: 11px; }
  .router-form-section-head { display: grid; gap: 5px; }
  .router-form-section-head > span { text-align: left; }
  .router-test-result .rk-summary-grid { grid-template-columns: 1fr; }
}
.version-modal-card { width: min(860px, 96vw); display: flex; flex-direction: column; overflow: hidden; }
.version-summary-bar, .version-tabs { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rk-border); }
.version-pill { flex: 1; display: grid; gap: 2px; padding: 9px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); }
.version-pill span { color: var(--rk-muted); font-size: 11px; }
.version-tabs { padding-bottom: 0; }
.version-tab { min-height: 32px; padding: 6px 10px; border: 1px solid transparent; border-radius: 5px 5px 0 0; background: transparent; color: var(--rk-muted); font-weight: 800; cursor: pointer; }
.version-tab.is-active { border-color: var(--rk-accent); border-bottom-color: var(--rk-accent); background: var(--rk-surface); color: var(--rk-brand-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rk-accent) 28%, transparent); }
.version-panels { min-height: 0; overflow: hidden; }
.version-panel { display: none; }
.version-panel.is-active { display: block; }
.version-history-list { display: grid; gap: 9px; max-height: min(58vh, 620px); overflow: auto; padding: 14px; }
.version-entry { padding: 11px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); }
.version-entry.current { border-color: var(--rk-brand); background: var(--rk-brand-soft); }
.version-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.version-entry ul { margin: 8px 0 0; padding-left: 18px; color: var(--rk-muted); }
.version-entry li + li { margin-top: 4px; }
.toast-stack { position: fixed; z-index: 80; top: 16px; right: 16px; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.toast { padding: 12px; border-radius: 7px; background: var(--rk-surface); border: 1px solid var(--rk-border); box-shadow: var(--rk-shadow); }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--rk-canvas); }
.auth-grid { width: min(980px, 100%); display: grid; grid-template-columns: 1fr minmax(320px, 420px); overflow: hidden; border: 1px solid var(--rk-border); border-radius: 10px; background: var(--rk-surface); box-shadow: var(--rk-shadow); }
.auth-copy { padding: 44px; background: #10333e; color: #effaf8; }
.auth-copy h1 { font-size: 34px; margin: 40px 0 8px; }
.auth-panel, .login-card { padding: 36px; }

@media (max-width: 900px) {
  .app-shell { display: block; }
  html:has(body.sidebar-mobile-open),
  body.sidebar-mobile-open { overflow: hidden; overscroll-behavior: none; }
  .sidebar { position: fixed; z-index: 60; width: min(282px, 86vw); height: 100dvh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; transform: translateX(-105%); transition: transform .2s ease; }
  body.sidebar-mobile-open .sidebar { transform: translateX(0); pointer-events: auto; }
  body.sidebar-mobile-open .sidebar-toggle-arrow-hide { display: none; }
  body.sidebar-mobile-open .sidebar-toggle-arrow-show { display: block; }
  .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.45); }
  body.sidebar-mobile-open .sidebar-overlay { display: block; }
  .topbar { padding: 11px 16px; }
  .page-body { padding: 10px 8px 16px; }
  .profile-copy, .profile-caret { display: none; }
  .auth-grid { grid-template-columns: 1fr; }
  .auth-copy { display: none; }
  .rk-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .customer-location-group { grid-template-columns: 1fr; }
  .router-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .router-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .olt-settings-hero { grid-template-columns: 76px minmax(0, 1fr) minmax(280px, 1.2fr); }
  .olt-device-mark { width: 76px; height: 76px; }
  .olt-device-actions { grid-column: 2 / -1; grid-template-columns: repeat(2, max-content); justify-content: start; }
  .olt-uplink-head { align-items: flex-start; flex-direction: column; }
  .app-log-dt-search { margin-left: 0; }
}
@media (max-width: 620px) {
  .topbar { gap: 8px; }
  .topbar-right { gap: 7px; }
  html[data-theme] body[data-shell="app"] :is(.card, .rk-card):not(.modal-card) > form.stack:not(.modal-body):not(.rk-modal-body):not(.ppp-customer-form):not(.settings-compact-form) { padding: 0 12px 12px; }
  .breadcrumb { display: none; }
  .page-title { font-size: 17px; }
  .form-grid, .rk-form-grid { grid-template-columns: 1fr; }
  .field-span-2 { grid-column: auto; }
  .ppp-provisioning-choice-grid .field-span-2, .ppp-provisioning-details-grid .field-span-2 { grid-column: auto; }
  .settings-compact-form { padding: 10px; }
  .settings-form-section { padding: 10px; }
  .toolbar, .rk-toolbar, .card-header, .table-head, .rk-card-head { align-items: flex-start; flex-direction: column; }
  .toolbar-actions, .rk-toolbar-actions { width: 100%; }
  .toolbar-actions .btn, .rk-toolbar-actions .btn { flex: 1 1 auto; }
  .actions, .rk-actions { width: 100%; }
  .actions .btn, .rk-actions .btn { flex: 1 1 auto; }
  .rk-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-overview-grid .overview-tile { min-height: 80px; padding: 9px; gap: 6px; }
  .dash-overview-grid .overview-kicker { font-size: 9px; line-height: 1.25; }
  .dash-overview-grid .overview-number { font-size: 17px; }
  .dash-overview-grid .overview-glyph { width: 30px; height: 30px; flex-basis: 30px; }
  .dash-overview-grid .overview-glyph svg { width: 17px; height: 17px; }
  .mini-strip-grid, .dashboard-legacy-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-metric-grid { grid-template-columns: 1fr; }
  .panel-tabs { overflow-x: auto; }
  .panel-tab { white-space: nowrap; }
  .traffic-compact-head, .traffic-focus-controls { align-items: stretch; flex-direction: column; }
  .ppp-customer-form { padding: 14px; }
  .customer-tabs .customer-wizard-step { min-height: 72px; font-size: 11px; }
  .customer-location-group { grid-column: auto; padding: 11px; }
  .customer-coordinate-grid { grid-template-columns: 1fr; }
  .customer-extra-services-head, .extra-service-row { align-items: stretch; flex-direction: column; }
  .extra-service-actions { justify-content: flex-start; text-align: left; }
  .customer-wizard-actions { justify-content: stretch; }
  .router-summary-grid, .router-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .router-table-head-copy { width: 100%; }
  .finance-report-head { flex-direction: column; padding: 13px; }
  .finance-report-actions-panel { align-items: start; justify-items: start; min-width: 0; }
  .finance-report-buttons { justify-content: flex-start; }
  .finance-report-kpis, .finance-report-kpis-topup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-report-overview { padding: 10px 10px 0; }
  .finance-report-data-section { margin: 10px; }
  .olt-settings-hero { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .olt-device-mark { width: 64px; height: 64px; }
  .olt-device-stats, .olt-device-actions { grid-column: 1 / -1; }
  .olt-device-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .olt-device-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .olt-uplink-card-health { width: 100%; }
  .olt-uplink-card-health > div { flex: 1; min-width: 0; }
  .olt-uplink-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .olt-uplink-port-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-log-wa-summary { align-items: stretch; flex-direction: column; gap: 5px; }
  .app-log-wa-summary-item { justify-content: space-between; padding: 0 0 5px; border-right: 0; border-bottom: 1px solid var(--rk-border); }
  .app-log-wa-summary-item:last-child { padding-bottom: 0; border-bottom: 0; }
  .app-log-dt-controls .table-meta { margin-right: 0; }
  .app-log-message-preview { max-width: 150px; }
  .rk-auto-table-footer { align-items: flex-start; flex-direction: column; }
  .rk-auto-table-left { width: 100%; justify-content: space-between; }
  .rk-auto-table-pagination { width: 100%; }
  .rk-auto-table-pagination button, .rk-auto-table-pagination .active { flex: 1; text-align: center; }
  .rk-card:has(.rk-table-controls) > .rk-card-head > .inline-form { grid-template-columns: 1fr; }
  .rk-table-controls .toolbar-search { margin-left: 0; }
  .rk-table-footer:not(.rk-auto-table-footer) { align-items: flex-start; flex-direction: column; }
  .customer-list-pagination, .rk-table-footer .rk-table-pagination:not(.rk-auto-table-pagination), .rk-pagination { width: 100%; }
  .customer-list-pagination a, .customer-list-pagination span, .rk-table-footer .rk-table-pagination:not(.rk-auto-table-pagination) a, .rk-table-footer .rk-table-pagination:not(.rk-auto-table-pagination) span, .rk-pagination a, .rk-pagination span { flex: 1; text-align: center; }
  .ppp-table-control-row { align-items: flex-start; flex-direction: column; }
  .toolbar-search, .rk-toolbar-search { width: 100%; }
  th, td { padding: 9px; }
}

/* Shared compact contract for all operational data tables. */
html[data-theme] body[data-shell="app"] :is(table, .rk-table):not(.rk-table--document):not(.invoice-table) {
  font-size: 12px;
}
html[data-theme] body[data-shell="app"] :is(table, .rk-table):not(.rk-table--document):not(.invoice-table) :is(th, td) {
  padding: 6px 9px;
  vertical-align: middle;
}
html[data-theme] body[data-shell="app"] :is(table, .rk-table):not(.rk-table--document):not(.invoice-table) th {
  height: 34px;
  color: var(--rk-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.2;
}
html[data-theme] body[data-shell="app"] :is(th[data-sortable="true"], th:has(.customer-sort-link)) {
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
html[data-theme] body[data-shell="app"] .customer-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
html[data-theme] body[data-shell="app"] :is(th[data-sortable="true"]:hover, th:has(.customer-sort-link:hover)) {
  background: var(--rk-brand-soft);
  color: var(--rk-brand-strong) !important;
}
html[data-theme] body[data-shell="app"] :is(th[data-sortable="true"]:focus-visible, th:has(.customer-sort-link:focus-visible)) {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--rk-brand);
  color: var(--rk-brand-strong) !important;
}
html[data-theme] body[data-shell="app"] :is(th[data-sortable="true"], th:has(.customer-sort-link)) .sort-mark {
  color: currentColor;
}
html[data-theme] body[data-shell="app"] :is(table, .rk-table):not(.rk-table--document):not(.invoice-table) td {
  font-size: 12px;
  line-height: 1.3;
}
html[data-theme] body[data-shell="app"] :is(table, .rk-table):not(.rk-table--document):not(.invoice-table) td :is(.data-stack, .customer-package-stack, .customer-status-stack, .customer-ip-stack, .rk-date-stack) {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}
html[data-theme] body[data-shell="app"] :is(table, .rk-table):not(.rk-table--document):not(.invoice-table) td :is(.data-main, .compact-main) + :is(.data-sub, .compact-sub) {
  display: block;
  margin-top: 2px;
}
html[data-theme] body[data-shell="app"] .customer-report-table :is(th, td).ppp-service-col {
  min-width: 126px;
}
html[data-theme] body[data-shell="app"] .customer-report-table :is(th, td).ppp-package-col {
  min-width: 178px;
}
html[data-theme] body[data-shell="app"] .customer-report-ppp-table {
  width: 1186px !important;
  min-width: 1186px !important;
}
html[data-theme] body[data-shell="app"] .customer-report-ppp-table:has(col.customer-col-pop) {
  width: 1256px !important;
  min-width: 1256px !important;
}
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-check { width: 34px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-pop { width: 70px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-id { width: 92px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-name { width: 150px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-service { width: 88px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-package { width: 120px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-ip { width: 80px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-renewed,
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-due { width: 120px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-status { width: 150px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-owner { width: 92px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-renew-print { width: 76px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table col.customer-col-action { width: 64px !important; }
html[data-theme] body[data-shell="app"] .customer-report-ppp-table :is(th, td).ppp-id-col {
  min-width: 92px !important;
  max-width: 92px !important;
}
html[data-theme] body[data-shell="app"] .customer-report-ppp-table .ppp-id-col .customer-id-text {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
html[data-theme] body[data-shell="app"] .customer-report-ppp-table :is(th, td).ppp-package-col {
  min-width: 120px !important;
  max-width: 120px !important;
}
html[data-theme] body[data-shell="app"] .customer-report-table :is(th, td).ppp-status-col {
  min-width: 96px;
}
html[data-theme] body[data-shell="app"] .customer-report-table .customer-status-stack {
  justify-items: start;
}
html[data-theme] body[data-shell="app"] .customer-report-table .customer-status-stack > .badge {
  min-height: 20px;
  padding: 3px 7px;
  color: var(--rk-brand-strong);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
}
html[data-theme] body[data-shell="app"] .customer-report-table .customer-status-stack > .badge-success {
  border-color: #9ed7cf;
  background: var(--rk-brand-soft);
  color: var(--rk-brand-strong);
}
html[data-theme] body[data-shell="app"] .customer-report-table .customer-status-stack > .badge-danger {
  border-color: #efbbb5;
  background: #fff0ee;
  color: #b94238;
}
html[data-theme] body[data-shell="app"] .customer-report-table .service-type-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: max-content;
  white-space: nowrap;
}
html[data-theme] body[data-shell="app"] .customer-report-table .service-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  min-height: 20px;
  padding: 2px 5px;
  border: 1px solid #9bc9e8;
  border-radius: 999px;
  background: #e7f3fc;
  color: #2374aa;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
}
html[data-theme] body[data-shell="app"] .customer-report-table .service-type-badge.is-pre {
  border-color: #9ed7cf;
  background: var(--rk-brand-soft);
  color: var(--rk-brand-strong);
}
html[data-theme] body[data-shell="app"] .customer-report-table .service-type-label {
  color: var(--rk-ink);
  font-size: 11px;
  font-weight: 800;
}
html[data-theme] body[data-shell="app"] .customer-report-table .customer-package-stack > .data-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] body[data-shell="app"] .customer-report-table .customer-package-stack > .data-sub {
  color: var(--rk-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
html[data-theme] body[data-shell="app"] :is(table, .rk-table):not(.rk-table--document):not(.invoice-table) :is(.data-main, .compact-main) {
  font-size: 12px;
  line-height: 1.25;
}
html[data-theme] body[data-shell="app"] :is(table, .rk-table):not(.rk-table--document):not(.invoice-table) :is(.data-sub, .compact-sub, .muted) {
  font-size: 10px;
  line-height: 1.25;
}
html[data-theme] body[data-shell="app"] :is(table, .rk-table):not(.rk-table--document):not(.invoice-table) :is(.badge, .status-badge, .status-pill, .badge-mini) {
  min-height: 20px;
  padding: 3px 7px;
  font-size: 10px;
}
html[data-theme] body[data-shell="app"] :is(table, .rk-table):not(.rk-table--document):not(.invoice-table) :is(.table-action-icon-btn, .table-rp-icon-btn, .rk-action-btn, .mini-action) {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 11px;
}
html[data-theme] body[data-shell="app"] :is(.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) {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Shared edit/delete contract for tables, detail panels, and action menus. */
html[data-theme] body[data-shell="app"] :is(.table-action-icon-btn, .table-rp-icon-btn).is-edit {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border-radius: 5px;
  border: 1px solid #9bc9e8;
  background: #e7f3fc;
  color: #2374aa;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
html[data-theme] body[data-shell="app"] :is(.table-action-icon-btn, .table-rp-icon-btn).is-delete {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border-radius: 5px;
  border: 1px solid #efb6bd;
  background: var(--rk-danger-soft);
  color: var(--rk-danger);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
html[data-theme] body[data-shell="app"] :is(.table-action-icon-btn, .table-rp-icon-btn):is(.is-edit, .is-delete) .table-action-label {
  display: none;
}
html[data-theme] body[data-shell="app"] :is(.table-action-icon-btn, .table-rp-icon-btn):is(.is-edit, .is-delete):is(:hover, :focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
html[data-theme] body[data-shell="app"] :is(.table-action-icon-btn, .table-rp-icon-btn):is(.is-edit, .is-delete):hover {
  filter: brightness(.97);
}
html[data-theme] body[data-shell="app"] :is(.table-action-icon-btn, .table-rp-icon-btn):is(.is-edit, .is-delete):is(:disabled, .is-disabled) {
  border-color: var(--rk-border);
  background: var(--rk-surface-alt);
  color: var(--rk-muted);
  box-shadow: none;
}
html[data-theme] body[data-shell="app"] :is(.action-dropdown-item, .dropdown-item).dropdown-item-danger {
  color: var(--rk-danger);
}
html[data-theme] body[data-shell="app"] :is(.action-dropdown-item, .dropdown-item).dropdown-item-danger:is(:hover, :focus-visible) {
  background: var(--rk-danger-soft);
  color: var(--rk-danger);
}
html[data-theme] body[data-shell="app"] .voucher-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  min-width: max-content !important;
}
html[data-theme] body[data-shell="app"] .voucher-row-actions form {
  display: inline-flex !important;
  margin: 0 !important;
}

/* Account profile uses a fixed photo preview and a flat password section. */
html[data-theme] body[data-shell="app"] .self-profile-card {
  max-width: 880px;
}
html[data-theme] body[data-shell="app"] .self-profile-form {
  gap: 16px;
}
html[data-theme] body[data-shell="app"] .self-profile-form .user-profile-editor {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--rk-border);
  border-radius: 8px;
  background: var(--rk-surface-alt);
}
html[data-theme] body[data-shell="app"] .self-profile-form .user-profile-preview,
html[data-theme] body[data-shell="app"] .self-profile-form :is(.user-profile-photo, .user-profile-placeholder) {
  width: 96px;
  height: 96px;
}
html[data-theme] body[data-shell="app"] .self-profile-form .user-profile-photo {
  display: block;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--rk-border);
}
html[data-theme] body[data-shell="app"] .self-profile-form .user-profile-placeholder {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--rk-brand-soft);
  color: var(--rk-brand-strong);
  font-size: 28px;
  font-weight: 800;
}
html[data-theme] body[data-shell="app"] .self-profile-form .profile-password-section {
  padding-top: 16px;
  border-top: 1px solid var(--rk-border);
}
html[data-theme] body[data-shell="app"] .self-profile-form .profile-password-header {
  margin-bottom: 12px;
}
html[data-theme] body[data-shell="app"] .self-profile-form .profile-password-header .card-title {
  margin-bottom: 2px;
}
html[data-theme] body[data-shell="app"] .self-profile-form .profile-current-password {
  grid-column: 1 / -1;
}
html[data-theme] body[data-shell="app"] .self-profile-form .profile-phone-field {
  grid-column: 1 / -1;
}
@media (max-width: 560px) {
  html[data-theme] body[data-shell="app"] .self-profile-form .user-profile-editor {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  html[data-theme] body[data-shell="app"] .self-profile-form .user-profile-preview,
  html[data-theme] body[data-shell="app"] .self-profile-form :is(.user-profile-photo, .user-profile-placeholder) {
    width: 72px;
    height: 72px;
  }
  html[data-theme] body[data-shell="app"] .self-profile-form .user-profile-placeholder {
    font-size: 22px;
  }
  html[data-theme] body[data-shell="app"] .self-profile-form .profile-current-password {
    grid-column: auto;
  }
  html[data-theme] body[data-shell="app"] .self-profile-form .profile-phone-field {
    grid-column: auto;
  }
}

/* Customer location picker and Mapping workspace final layout contract. */
html[data-theme] body[data-shell="app"] .customer-map-picker-card { width: min(880px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); }
html[data-theme] body[data-shell="app"] .customer-map-picker-body { display: grid; min-width: 0; gap: 10px; overflow-x: hidden; overflow-y: auto; }
html[data-theme] body[data-shell="app"] .customer-map-search { display: flex; align-items: center; gap: 8px; }
html[data-theme] body[data-shell="app"] .customer-map-search input { flex: 1 1 auto; min-width: 0; }
html[data-theme] body[data-shell="app"] .customer-map-search .btn { width: 76px; min-width: 76px; justify-content: center; padding-inline: 8px; }
html[data-theme] body[data-shell="app"] .customer-map-search-status,
html[data-theme] body[data-shell="app"] .customer-map-picked { min-height: 18px; color: var(--rk-muted); font-size: 11px; }
html[data-theme] body[data-shell="app"] .customer-map-search-results { display: grid; align-content: start; gap: 4px; max-height: 176px; overflow-x: hidden; overflow-y: auto; padding: 4px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .customer-map-search-results:empty { display: none; }
html[data-theme] body[data-shell="app"] .customer-map-search-results:not(:empty) { min-height: 94px; }
html[data-theme] body[data-shell="app"] .customer-map-result { display: grid; gap: 3px; width: 100%; padding: 7px 8px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface); color: var(--rk-ink); font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
html[data-theme] body[data-shell="app"] .customer-map-result strong { font-size: 11px; line-height: 1.35; }
html[data-theme] body[data-shell="app"] .customer-map-result span { color: var(--rk-muted); font-family: monospace; font-size: 10px; }
html[data-theme] body[data-shell="app"] .customer-map-result:hover,
html[data-theme] body[data-shell="app"] .customer-map-result:focus-visible { border-color: var(--rk-brand); background: var(--rk-brand-soft); outline: 0; }
html[data-theme] body[data-shell="app"] .customer-location-map { width: 100%; max-width: 100%; min-width: 0; height: min(38vh, 340px); min-height: 240px; box-sizing: border-box; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 6px; background: #dce9df; }
html[data-theme] body[data-shell="app"] .customer-map-live-control { position: absolute; z-index: 1000; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border: 1px solid #0f766e; border-radius: 5px; background: #fff; color: #0f766e; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 4px rgba(15, 118, 110, .24); }
html[data-theme] body[data-shell="app"] .customer-map-live-control:hover { background: #ecfdf5; }
html[data-theme] body[data-shell="app"] .customer-map-live-control:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
html[data-theme] body[data-shell="app"] .mapping-toolbar { margin-bottom: 10px; }
html[data-theme] body[data-shell="app"] .mapping-create-card { margin-bottom: 10px; }
html[data-theme] body[data-shell="app"] .mapping-create-form { padding: 12px; }
html[data-theme] body[data-shell="app"] .mapping-create-form > summary { cursor: pointer; }
html[data-theme] body[data-shell="app"] .mapping-create-form > summary::-webkit-details-marker { display: none; }
html[data-theme] body[data-shell="app"] .mapping-create-inner { padding-top: 12px; }
html[data-theme] body[data-shell="app"] .mapping-form-hint { margin: 0 0 12px; color: var(--rk-muted); font-size: 11px; }
html[data-theme] body[data-shell="app"] .network-map { min-height: 340px; background: #dce9df; }
html[data-theme] body[data-shell="app"] .network-map > i { display: none; }
html[data-theme] body[data-shell="app"] .network-map-legend { display: flex; flex-wrap: wrap; gap: 7px 12px; padding: 9px 10px; border-top: 1px solid var(--rk-border); background: var(--rk-surface-alt); color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .network-map-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(440px, 7fr); grid-template-areas: "mapping-list mapping-map" "mapping-list mapping-legend"; grid-template-rows: clamp(400px, 58vh, 600px) auto; gap: 0; align-items: stretch; overflow: hidden; }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > #network-map { grid-area: mapping-map; width: 100%; height: 100%; min-width: 0; min-height: 0; border-left: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .rk-table-wrap { grid-area: mapping-list; min-width: 0; min-height: 0; height: 100%; margin: 0; border: 0; border-radius: 0; }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .network-map-legend { grid-area: mapping-legend; border-left: 1px solid var(--rk-border); }
@media (max-width: 620px) {
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) { grid-template-rows: auto 320px auto; }
  .mapping-create-page-head { align-items: stretch; flex-direction: column; }
  .mapping-create-page-head .btn { width: 100%; }
  .mapping-create-workspace { grid-template-columns: minmax(0, 1fr); }
  .mapping-create-map-card { grid-template-rows: auto 320px; }
  .mapping-create-map { min-height: 320px; }
  html[data-theme] body[data-shell="app"] .customer-map-picker-card { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  html[data-theme] body[data-shell="app"] .customer-map-picker-body { padding: 10px; }
  html[data-theme] body[data-shell="app"] .customer-location-map { height: 300px; min-height: 0; }
  html[data-theme] body[data-shell="app"] .customer-map-search { align-items: stretch; flex-direction: column; }
  html[data-theme] body[data-shell="app"] .customer-map-search .btn { width: 100%; min-height: 34px; }
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mapping-list" "mapping-map" "mapping-legend"; grid-template-rows: auto 360px auto; }
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > #network-map,
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .network-map-legend { border-left: 0; }
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > #network-map { border-top: 1px solid var(--rk-border); }
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .rk-table-wrap { height: auto; }
}

/* Ticket Laporan: compact inbox and conversation workspace. */
html[data-theme] body[data-shell="app"] .portal-ticket-summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
html[data-theme] body[data-shell="app"] .portal-ticket-stat { min-height: 72px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--rk-border); background: var(--rk-surface); color: var(--rk-ink); text-decoration: none; }
html[data-theme] body[data-shell="app"] .portal-ticket-stat:hover { border-color: var(--ticket-accent, var(--rk-brand)); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .portal-ticket-stat .summary-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ticket-accent, var(--rk-brand)) 35%, var(--rk-border)); background: color-mix(in srgb, var(--ticket-accent, var(--rk-brand)) 12%, var(--rk-surface)); color: var(--ticket-accent, var(--rk-brand)); }
html[data-theme] body[data-shell="app"] .portal-ticket-stat .summary-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
html[data-theme] body[data-shell="app"] .portal-ticket-stat p,
html[data-theme] body[data-shell="app"] .portal-ticket-stat strong { margin: 0; }
html[data-theme] body[data-shell="app"] .portal-ticket-stat p { color: var(--rk-muted); font-size: 10px; font-weight: 800; line-height: 1.2; }
html[data-theme] body[data-shell="app"] .portal-ticket-stat strong { display: block; margin-top: 3px; font-size: 20px; line-height: 1; }
html[data-theme] body[data-shell="app"] .portal-ticket-stat.is-open { --ticket-accent: var(--rk-warning); }
html[data-theme] body[data-shell="app"] .portal-ticket-stat.is-progress { --ticket-accent: #2675bd; }
html[data-theme] body[data-shell="app"] .portal-ticket-stat.is-waiting { --ticket-accent: #7b5ba7; }
html[data-theme] body[data-shell="app"] .portal-ticket-stat.is-closed { --ticket-accent: var(--rk-brand); }
html[data-theme] body[data-shell="app"] .portal-ticket-stat.is-total { --ticket-accent: #38526b; }
html[data-theme] body[data-shell="app"] .portal-ticket-inbox-card { display: grid; gap: 0; overflow: hidden; }
html[data-theme] body[data-shell="app"] .portal-ticket-inbox-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 320px); align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .portal-ticket-tabs { min-width: 0; margin: 0; overflow-x: auto; }
html[data-theme] body[data-shell="app"] .portal-ticket-tabs .panel-tab { min-height: 30px; padding: 6px 9px; font-size: 11px; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .portal-ticket-search-form { width: 100%; min-width: 0; }
html[data-theme] body[data-shell="app"] .portal-ticket-inbox-layout { display: grid; grid-template-columns: minmax(420px, 1.15fr) minmax(300px, .85fr); min-height: min(520px, calc(100vh - 290px)); background: var(--rk-surface); }
html[data-theme] body[data-shell="app"] .portal-ticket-list { min-width: 0; overflow: auto; border-right: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .portal-ticket-thread { display: grid !important; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; width: 100%; min-width: 0; margin: 0; padding: 10px; border: 0; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface); color: var(--rk-ink); text-align: left; font: inherit; cursor: pointer; }
html[data-theme] body[data-shell="app"] .portal-ticket-thread:hover { background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .portal-ticket-thread.is-unread { box-shadow: inset 3px 0 0 var(--rk-brand); background: var(--rk-brand-soft); }
html[data-theme] body[data-shell="app"] .portal-ticket-avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #a7d9d2; border-radius: 50%; background: var(--rk-brand-soft); color: var(--rk-brand-strong); font-size: 12px; font-weight: 900; text-transform: uppercase; }
html[data-theme] body[data-shell="app"] .portal-ticket-thread-main { display: grid; min-width: 0; gap: 3px; }
html[data-theme] body[data-shell="app"] .portal-ticket-thread-top,
html[data-theme] body[data-shell="app"] .portal-ticket-thread-meta { display: flex; align-items: center; gap: 7px; min-width: 0; }
html[data-theme] body[data-shell="app"] .portal-ticket-thread-top { justify-content: space-between; }
html[data-theme] body[data-shell="app"] .portal-ticket-thread-top strong,
html[data-theme] body[data-shell="app"] .portal-ticket-thread-sub,
html[data-theme] body[data-shell="app"] .portal-ticket-thread-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .portal-ticket-thread-top strong { font-size: 12px; }
html[data-theme] body[data-shell="app"] .portal-ticket-thread-top time { flex: 0 0 auto; color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .portal-ticket-thread-sub { color: var(--rk-ink); font-size: 11px; font-weight: 700; }
html[data-theme] body[data-shell="app"] .portal-ticket-thread-sub b { color: var(--rk-brand-strong); }
html[data-theme] body[data-shell="app"] .portal-ticket-thread-msg,
html[data-theme] body[data-shell="app"] .portal-ticket-thread-meta { color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .portal-ticket-thread-meta { flex-wrap: wrap; }
html[data-theme] body[data-shell="app"] .portal-ticket-new-badge { display: inline-flex; align-items: center; min-height: 18px; padding: 2px 6px; border: 1px solid #efb6ad; border-radius: 10px; background: #fff0ee; color: #b94238; font-size: 9px; font-weight: 800; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .portal-ticket-preview { display: grid; align-content: center; padding: 22px; background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .portal-ticket-preview-card { display: grid; gap: 8px; max-width: 360px; color: var(--rk-ink); }
html[data-theme] body[data-shell="app"] .portal-ticket-preview-card.is-empty { min-height: 0; }
html[data-theme] body[data-shell="app"] .portal-ticket-preview-card p { margin: 0; color: var(--rk-muted); font-size: 12px; }
html[data-theme] body[data-shell="app"] .portal-ticket-footer { margin: 0; padding: 9px 10px; border-top: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .portal-ticket-modal-card { width: min(940px, calc(100vw - 28px)); }
html[data-theme] body[data-shell="app"] .portal-ticket-modal-grid { display: grid; grid-template-columns: minmax(210px, .35fr) minmax(0, .65fr); gap: 8px; }
html[data-theme] body[data-shell="app"] .portal-ticket-modal-card .ticket-message-box { margin: 0; padding: 10px; border: 1px solid var(--rk-border); background: var(--rk-surface-alt); font-size: 11px; }
html[data-theme] body[data-shell="app"] .portal-ticket-detail-row { display: grid; grid-template-columns: minmax(80px, .4fr) minmax(0, .6fr); gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--rk-border); font-size: 10px; }
html[data-theme] body[data-shell="app"] .portal-ticket-detail-row:last-child { border-bottom: 0; }
html[data-theme] body[data-shell="app"] .portal-ticket-detail-row span { color: var(--rk-muted); }
html[data-theme] body[data-shell="app"] .portal-ticket-detail-row strong { overflow-wrap: anywhere; text-align: right; }
html[data-theme] body[data-shell="app"] .portal-ticket-chat-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 12px 0 6px; }
html[data-theme] body[data-shell="app"] .portal-ticket-chat-head span { color: var(--rk-muted); font-size: 10px; text-align: right; }
html[data-theme] body[data-shell="app"] .ticket-history-list.portal-ticket-chat-list { display: flex; flex-direction: column; gap: 8px; min-height: 260px; max-height: min(480px, 52vh); margin: 0 0 10px; padding: 10px; overflow: auto; border: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .ticket-history-item.portal-ticket-chat-item { width: fit-content; max-width: min(86%, 620px); display: grid; gap: 5px; margin: 0; padding: 9px 10px; border: 1px solid var(--rk-border); background: var(--rk-surface); font-size: 11px; }
html[data-theme] body[data-shell="app"] .ticket-history-item.portal-ticket-chat-item.is-operator { align-self: flex-end; margin-left: auto; border-color: #9ed7cf; background: var(--rk-brand-soft); }
html[data-theme] body[data-shell="app"] .ticket-history-item.portal-ticket-chat-item.is-customer { align-self: flex-start; }
html[data-theme] body[data-shell="app"] .ticket-history-item.portal-ticket-chat-item > div { display: flex; justify-content: space-between; gap: 8px; color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .ticket-history-item.portal-ticket-chat-item p { margin: 0; color: var(--rk-ink); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 760px) {
  html[data-theme] body[data-shell="app"] .portal-ticket-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] body[data-shell="app"] .portal-ticket-inbox-head { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .portal-ticket-inbox-layout { grid-template-columns: 1fr; min-height: 0; }
  html[data-theme] body[data-shell="app"] .portal-ticket-list { max-height: none; border-right: 0; }
  html[data-theme] body[data-shell="app"] .portal-ticket-preview { display: none; }
  html[data-theme] body[data-shell="app"] .portal-ticket-modal-grid { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .portal-ticket-chat-head { display: grid; align-items: start; gap: 3px; }
  html[data-theme] body[data-shell="app"] .portal-ticket-chat-head span { text-align: left; }
  html[data-theme] body[data-shell="app"] .ticket-history-item.portal-ticket-chat-item { max-width: 96%; }
}

/* Log WA Blast: keep conversation history scrollable and reply composer visible. */
html[data-theme] body[data-shell="app"] .app-log-message-modal.app-log-message-modal-global .app-log-message-modal-card { width: min(820px, calc(100vw - 28px)); max-height: calc(100vh - 28px); display: flex; flex-direction: column; overflow: hidden; }
html[data-theme] body[data-shell="app"] .app-log-wa-inbound-image { cursor: zoom-in; }
html[data-theme] body[data-shell="app"] .app-log-image-modal { z-index: calc(var(--z-modal, 80) + 1) !important; padding: 14px; }
html[data-theme] body[data-shell="app"] .app-log-image-modal-card { width: min(1080px, calc(100vw - 28px)); max-height: calc(100vh - 28px); display: flex; flex-direction: column; overflow: hidden; }
html[data-theme] body[data-shell="app"] .app-log-image-modal-body { display: grid; flex: 1 1 auto; min-height: 0; place-items: center; overflow: auto; padding: 12px; background: #10191d; }
html[data-theme] body[data-shell="app"] .app-log-image-modal-body img { display: block; max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; }
html[data-theme] body[data-shell="app"] .app-log-message-modal.app-log-message-modal-global .app-log-message-modal-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; padding: 12px; }
html[data-theme] body[data-shell="app"] .wa-conversation-notice,
html[data-theme] body[data-shell="app"] .wa-conversation-inline-error { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--rk-border); font-size: 11px; }
html[data-theme] body[data-shell="app"] .wa-conversation-notice { border-color: #9ed7cf; background: var(--rk-brand-soft); color: var(--rk-brand-strong); }
html[data-theme] body[data-shell="app"] .wa-conversation-inline-error { border-color: #efbbb5; background: #fff0ee; color: #b94238; }
html[data-theme] body[data-shell="app"] .wa-conversation-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; margin-bottom: 8px; }
html[data-theme] body[data-shell="app"] .wa-conversation-meta > div { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .wa-conversation-meta span,
html[data-theme] body[data-shell="app"] .wa-conversation-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .wa-conversation-meta strong { font-size: 12px; }
html[data-theme] body[data-shell="app"] .wa-conversation-list { display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px; min-height: 180px; margin: 0; padding: 9px; overflow: auto; border: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .wa-conversation-message { display: flex; flex: 0 0 auto; }
html[data-theme] body[data-shell="app"] .wa-conversation-message.is-outbound { justify-content: flex-end; }
html[data-theme] body[data-shell="app"] .wa-conversation-bubble { width: fit-content; max-width: min(82%, 600px); padding: 8px 10px; border: 1px solid var(--rk-border); background: var(--rk-surface); color: var(--rk-ink); font-size: 11px; }
html[data-theme] body[data-shell="app"] .wa-conversation-message.is-outbound .wa-conversation-bubble { border-color: #9ed7cf; background: var(--rk-brand-soft); }
html[data-theme] body[data-shell="app"] .wa-conversation-bubble p { margin: 6px 0; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
html[data-theme] body[data-shell="app"] .wa-conversation-line { display: flex; justify-content: space-between; gap: 8px; color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .wa-conversation-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .wa-conversation-foot { padding-top: 5px; border-top: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .wa-conversation-reply-form { display: grid; flex: 0 0 auto; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .wa-conversation-reply-form label { display: grid; gap: 4px; color: var(--rk-ink); font-size: 11px; font-weight: 800; }
html[data-theme] body[data-shell="app"] .wa-conversation-reply-form textarea { width: 100%; min-height: 70px; max-height: 130px; resize: vertical; }
html[data-theme] body[data-shell="app"] .wa-conversation-reply-form .modal-actions { margin: 0; justify-content: flex-end; }
@media (max-width: 620px) {
  html[data-theme] body[data-shell="app"] .app-log-message-modal.app-log-message-modal-global { padding: 8px; }
  html[data-theme] body[data-shell="app"] .app-log-message-modal.app-log-message-modal-global .app-log-message-modal-card { width: 100%; max-height: calc(100vh - 16px); }
  html[data-theme] body[data-shell="app"] .app-log-message-modal.app-log-message-modal-global .app-log-message-modal-body { padding: 10px; }
  html[data-theme] body[data-shell="app"] .wa-conversation-meta { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .wa-conversation-list { min-height: 220px; }
  html[data-theme] body[data-shell="app"] .wa-conversation-bubble { max-width: 92%; }
  html[data-theme] body[data-shell="app"] .wa-conversation-reply-form .modal-actions .btn { flex: 1 1 auto; }
}

/* Dashboard Activity and Traffic tabs: compact operational views. */
html[data-theme] body[data-shell="app"] [data-dashboard-tab-panel="activity"] { padding: 0; }
html[data-theme] body[data-shell="app"] .activity-feed { display: grid; gap: 0; }
html[data-theme] body[data-shell="app"] .activity-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "time main" "time desc" "time meta"; gap: 3px 10px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--rk-border); background: var(--rk-surface); }
html[data-theme] body[data-shell="app"] .activity-item:hover { background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .activity-time { grid-area: time; align-self: start; color: var(--rk-muted); font-family: monospace; font-size: 10px; line-height: 1.4; }
html[data-theme] body[data-shell="app"] .activity-main { grid-area: main; min-width: 0; line-height: 1.25; }
html[data-theme] body[data-shell="app"] .activity-action { display: inline-flex; align-items: center; min-height: 18px; margin-right: 6px; padding: 2px 6px; border: 1px solid #9ed7cf; border-radius: 10px; background: var(--rk-brand-soft); color: var(--rk-brand-strong); font-size: 9px; font-weight: 900; line-height: 1; text-transform: uppercase; }
html[data-theme] body[data-shell="app"] .activity-action-delete { border-color: #efbbb5; background: #fff0ee; color: #b94238; }
html[data-theme] body[data-shell="app"] .activity-action-create { border-color: #b8d2ec; background: #edf5fc; color: #2777b7; }
html[data-theme] body[data-shell="app"] .activity-actor { font-size: 12px; }
html[data-theme] body[data-shell="app"] .activity-muted { color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .activity-desc { grid-area: desc; overflow: hidden; color: var(--rk-ink); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .activity-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 3px 5px; color: var(--rk-muted); font-size: 9px; }
html[data-theme] body[data-shell="app"] .activity-meta span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .activity-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .activity-page-indicator { min-width: 48px; color: var(--rk-muted); font-size: 10px; font-weight: 800; text-align: center; }
html[data-theme] body[data-shell="app"] [data-dashboard-tab-panel="traffic"] { padding: 12px; }
html[data-theme] body[data-shell="app"] .dashboard-traffic-root,
html[data-theme] body[data-shell="app"] .traffic-focus-panel { min-width: 0; }
html[data-theme] body[data-shell="app"] .traffic-compact-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .traffic-summary { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .traffic-summary strong { color: var(--rk-ink); }
html[data-theme] body[data-shell="app"] .traffic-updated { font-family: monospace; font-size: 9px; }
html[data-theme] body[data-shell="app"] .traffic-focus-controls { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) auto; align-items: end; gap: 9px; margin-top: 10px; }
html[data-theme] body[data-shell="app"] .traffic-select-wrap { display: grid; gap: 4px; min-width: 0; color: var(--rk-muted); font-size: 10px; font-weight: 800; }
html[data-theme] body[data-shell="app"] .traffic-select-wrap select { min-width: 0; min-height: 32px; font-size: 11px; }
html[data-theme] body[data-shell="app"] .traffic-lock-control { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--rk-muted); font-size: 10px; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .traffic-chart-card { min-height: 0; margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html[data-theme] body[data-shell="app"] .traffic-chart-empty { display: grid; min-height: 220px; place-items: center; padding: 18px; border: 1px dashed var(--rk-border); color: var(--rk-muted); font-size: 12px; text-align: center; }
html[data-theme] body[data-shell="app"] .traffic-chart-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 10px 0; }
html[data-theme] body[data-shell="app"] .traffic-chart-title { display: flex; align-items: center; gap: 6px; color: var(--rk-ink); font-size: 12px; font-weight: 900; }
html[data-theme] body[data-shell="app"] .traffic-router-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--rk-brand); }
html[data-theme] body[data-shell="app"] .traffic-chart-subtitle { margin-top: 3px; color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .traffic-mini-badge { min-height: 20px; padding: 3px 6px; border: 1px solid var(--rk-border); background: var(--rk-surface-alt); color: var(--rk-muted); font-size: 9px; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .traffic-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--rk-border); background: var(--rk-border); }
html[data-theme] body[data-shell="app"] .traffic-stat-grid div { min-width: 0; padding: 8px 9px; border: 0; border-radius: 0; background: var(--rk-surface); }
html[data-theme] body[data-shell="app"] .traffic-stat-grid span { display: block; overflow: hidden; color: var(--rk-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .traffic-stat-grid strong { display: block; overflow: hidden; margin-top: 2px; color: var(--rk-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .traffic-chart-wrap { padding: 10px 0 0; }
html[data-theme] body[data-shell="app"] .traffic-line-chart { display: block; width: 100%; height: auto; min-height: 180px; border: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .traffic-grid line { stroke: #d9e1ea; stroke-dasharray: 3 3; }
html[data-theme] body[data-shell="app"] .traffic-y-label,
html[data-theme] body[data-shell="app"] .traffic-axis-labels text { fill: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .traffic-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] body[data-shell="app"] .traffic-line-rx { stroke: var(--rk-brand); }
html[data-theme] body[data-shell="app"] .traffic-line-tx { stroke: #3d7eb7; }
html[data-theme] body[data-shell="app"] .traffic-area { opacity: .15; }
html[data-theme] body[data-shell="app"] .traffic-area-rx { fill: var(--rk-brand); }
html[data-theme] body[data-shell="app"] .traffic-area-tx { fill: #3d7eb7; }
html[data-theme] body[data-shell="app"] .traffic-chart-legend { display: flex; gap: 12px; padding: 7px 0 0; color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .traffic-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
html[data-theme] body[data-shell="app"] .traffic-chart-legend i { width: 8px; height: 8px; border-radius: 50%; }
html[data-theme] body[data-shell="app"] .traffic-chart-legend .rx { background: var(--rk-brand); }
html[data-theme] body[data-shell="app"] .traffic-chart-legend .tx { background: #3d7eb7; }
@media (max-width: 620px) {
  html[data-theme] body[data-shell="app"] .activity-item { grid-template-columns: 1fr; grid-template-areas: "main" "desc" "meta" "time"; gap: 4px; padding: 10px; }
  html[data-theme] body[data-shell="app"] .activity-desc { white-space: normal; }
  html[data-theme] body[data-shell="app"] .traffic-compact-head { align-items: stretch; flex-direction: column; }
  html[data-theme] body[data-shell="app"] .traffic-focus-controls { grid-template-columns: 1fr; align-items: stretch; }
  html[data-theme] body[data-shell="app"] .traffic-lock-control { min-height: 28px; }
  html[data-theme] body[data-shell="app"] .traffic-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] body[data-shell="app"] .traffic-chart-head { align-items: start; flex-direction: column; }
  html[data-theme] body[data-shell="app"] .traffic-line-chart { min-height: 150px; }
}

/* Mobile browsers zoom focused controls below 16px; keep every editable control at that threshold. */
@media (max-width: 900px) {
  html[data-theme] :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px;
  }
}

/* System Control and Application Update: compact operational workspaces. */
html[data-theme] body[data-shell="app"] .system-hero { min-height: 0; margin-bottom: 10px; padding: 12px 14px; }
html[data-theme] body[data-shell="app"] .system-hero h2 { margin: 2px 0 4px; font-size: 18px; line-height: 1.2; }
html[data-theme] body[data-shell="app"] .system-hero p { max-width: 780px; margin: 0; font-size: 11px; line-height: 1.4; }
html[data-theme] body[data-shell="app"] .system-hero .section-eyebrow { font-size: 9px; }
html[data-theme] body[data-shell="app"] .system-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
html[data-theme] body[data-shell="app"] .system-metric { display: grid; align-content: center; gap: 3px; min-height: 62px; padding: 9px 10px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface); box-shadow: none; }
html[data-theme] body[data-shell="app"] .system-metric .metric-label { overflow: hidden; color: var(--rk-muted); font-size: 9px; font-weight: 900; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .system-metric strong { overflow: hidden; color: var(--rk-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .system-section-card { margin-bottom: 10px; box-shadow: 0 5px 14px rgba(18, 35, 54, .05); }
html[data-theme] body[data-shell="app"] .system-control-head { padding: 10px 12px; }
html[data-theme] body[data-shell="app"] .system-control-head h3 { margin: 0; font-size: 13px; }
html[data-theme] body[data-shell="app"] .system-control-head p { margin: 3px 0 0; font-size: 10px; }
html[data-theme] body[data-shell="app"] .system-service-list { display: grid; padding: 0 12px; }
html[data-theme] body[data-shell="app"] .system-service-row { display: grid; grid-template-columns: minmax(250px, 1.35fr) minmax(190px, .8fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .system-service-row:last-child { border-bottom: 0; }
html[data-theme] body[data-shell="app"] .system-service-identity { min-width: 0; }
html[data-theme] body[data-shell="app"] .system-service-identity strong { display: block; color: var(--rk-ink); font-size: 12px; }
html[data-theme] body[data-shell="app"] .system-service-identity > span { display: block; margin-top: 2px; color: var(--rk-brand-strong); font-family: monospace; font-size: 10px; }
html[data-theme] body[data-shell="app"] .system-service-identity p { margin: 3px 0 0; color: var(--rk-muted); font-size: 10px; line-height: 1.35; }
html[data-theme] body[data-shell="app"] .system-service-identity p b { color: var(--rk-danger); }
html[data-theme] body[data-shell="app"] .system-service-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
html[data-theme] body[data-shell="app"] .system-service-detail { display: grid; gap: 1px; min-width: 48px; padding-left: 7px; border-left: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .system-service-detail small { color: var(--rk-muted); font-size: 9px; }
html[data-theme] body[data-shell="app"] .system-service-detail b { overflow: hidden; color: var(--rk-ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .system-action-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
html[data-theme] body[data-shell="app"] .system-action-row form { margin: 0; }
html[data-theme] body[data-shell="app"] .system-action-row .btn { min-width: 52px; min-height: 28px; justify-content: center; padding: 4px 7px; font-size: 10px; }
html[data-theme] body[data-shell="app"] .system-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-theme] body[data-shell="app"] .system-list { display: grid; }
html[data-theme] body[data-shell="app"] .system-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 9px 12px; border-bottom: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .system-list-row:last-child { border-bottom: 0; }
html[data-theme] body[data-shell="app"] .system-list-row > div { display: grid; min-width: 0; gap: 2px; }
html[data-theme] body[data-shell="app"] .system-list-row strong { font-size: 11px; }
html[data-theme] body[data-shell="app"] .system-list-row span:not(.status-badge),
html[data-theme] body[data-shell="app"] .system-list-row small { overflow-wrap: anywhere; color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .system-log-output { max-height: 480px; margin: 0; padding: 12px; overflow: auto; background: #10202c; color: #dceeea; font: 11px/1.45 monospace; }
html[data-theme] body[data-shell="app"] .update-status-list { padding: 0; }
html[data-theme] body[data-shell="app"] .update-status-row { min-height: 56px; }
html[data-theme] body[data-shell="app"] .update-status-row strong { display: block; }
html[data-theme] body[data-shell="app"] .update-status-row span:not(.status-badge),
html[data-theme] body[data-shell="app"] .update-status-row small { display: block; margin-top: 2px; }
html[data-theme] body[data-shell="app"] .update-check-panel,
html[data-theme] body[data-shell="app"] .update-apply-panel { padding: 10px 12px; border-top: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .update-check-form,
html[data-theme] body[data-shell="app"] .update-apply-form { display: grid; grid-template-columns: minmax(230px, 420px) max-content; align-items: end; gap: 9px; }
html[data-theme] body[data-shell="app"] .update-token-field,
html[data-theme] body[data-shell="app"] .update-confirm-field { min-width: 0; margin: 0; }
html[data-theme] body[data-shell="app"] .update-check-button,
html[data-theme] body[data-shell="app"] .update-apply-button { width: 164px; min-width: 164px; min-height: 32px; justify-content: center; }
html[data-theme] body[data-shell="app"] .update-apply-panel { background: #fff5f3; }
html[data-theme] body[data-shell="app"] .update-checksum { overflow-wrap: anywhere; font-family: monospace; font-size: 10px; }
html[data-theme] body[data-shell="app"] .update-progress-card { border-color: #9ed7cf; }
html[data-theme] body[data-shell="app"] .update-progress-card[data-state="failed"] { border-color: #efbbb5; }
html[data-theme] body[data-shell="app"] .update-progress-body { display: grid; gap: 9px; padding: 12px; }
html[data-theme] body[data-shell="app"] .update-progress-track { height: 7px; overflow: hidden; border: 1px solid var(--rk-border); background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .update-progress-track span { display: block; width: 0; height: 100%; background: var(--rk-brand); transition: width .35s ease; }
html[data-theme] body[data-shell="app"] .update-progress-card[data-state="failed"] .update-progress-track span { background: var(--rk-danger); }
html[data-theme] body[data-shell="app"] .update-progress-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .update-progress-meta strong { color: var(--rk-ink); }
html[data-theme] body[data-shell="app"] .update-progress-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--rk-border); }
html[data-theme] body[data-shell="app"] .update-progress-steps li { min-width: 0; padding: 7px 5px; background: var(--rk-surface); color: var(--rk-muted); font-size: 9px; font-weight: 800; line-height: 1.2; text-align: center; }
html[data-theme] body[data-shell="app"] .update-progress-steps li.is-done { background: var(--rk-brand-soft); color: var(--rk-brand-strong); }
html[data-theme] body[data-shell="app"] .update-progress-steps li.is-active { background: #edf5fc; color: #2777b7; }
html[data-theme] body[data-shell="app"] .update-progress-overlay { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(12, 27, 39, .7); }
html[data-theme] body[data-shell="app"] .update-progress-overlay-dialog { width: min(500px, 100%); display: grid; gap: 10px; padding: 20px; border: 1px solid #9ed7cf; background: var(--rk-surface); box-shadow: var(--rk-shadow); text-align: center; }
html[data-theme] body[data-shell="app"] .update-progress-spinner { width: 30px; height: 30px; margin: 0 auto; border: 3px solid var(--rk-brand-soft); border-top-color: var(--rk-brand); border-radius: 50%; animation: update-progress-spin .8s linear infinite; }
html[data-theme] body[data-shell="app"] .update-progress-overlay-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--rk-muted); font-size: 10px; text-align: left; }
html[data-theme] body[data-shell="app"] .update-progress-overlay-note { margin: 0; color: var(--rk-muted); font-size: 10px; }
@keyframes update-progress-spin { to { transform: rotate(360deg); } }
@media (max-width: 980px) {
  html[data-theme] body[data-shell="app"] .system-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-theme] body[data-shell="app"] .system-service-row { grid-template-columns: minmax(0, 1fr) auto; }
  html[data-theme] body[data-shell="app"] .system-action-row { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 620px) {
  html[data-theme] body[data-shell="app"] .mini-strip-grid-host .mini-strip-host {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 5px;
    min-height: 66px;
  }
  html[data-theme] body[data-shell="app"] .mini-strip-grid-host .mini-strip-label {
    min-width: 0;
  }
  html[data-theme] body[data-shell="app"] .mini-strip-grid-host .mini-strip-host strong {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  html[data-theme] body[data-shell="app"] .system-hero { align-items: stretch; }
  html[data-theme] body[data-shell="app"] .system-hero-actions .btn { width: 100%; }
  html[data-theme] body[data-shell="app"] .system-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] body[data-shell="app"] .system-metric:last-child { grid-column: 1 / -1; }
  html[data-theme] body[data-shell="app"] .system-service-list { padding: 0 10px; }
  html[data-theme] body[data-shell="app"] .system-service-row { grid-template-columns: 1fr; gap: 8px; padding: 10px 0; }
  html[data-theme] body[data-shell="app"] .system-action-row { grid-column: auto; }
  html[data-theme] body[data-shell="app"] .system-action-row .btn { min-width: 0; }
  html[data-theme] body[data-shell="app"] .system-two-col { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .update-check-form,
  html[data-theme] body[data-shell="app"] .update-apply-form { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .update-check-button,
  html[data-theme] body[data-shell="app"] .update-apply-button { width: 100%; }
  html[data-theme] body[data-shell="app"] .update-progress-meta,
  html[data-theme] body[data-shell="app"] .update-progress-overlay-meta { display: grid; gap: 3px; }
  html[data-theme] body[data-shell="app"] .update-progress-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tool Sistem: shared compact workspaces for monitoring, import, backup, and placeholders. */
html[data-theme] body[data-shell="app"] .tool-system-toolbar { min-height: 0; margin-bottom: 10px; padding: 11px 14px; }
html[data-theme] body[data-shell="app"] .tool-system-toolbar .card-title { font-size: 16px; }
html[data-theme] body[data-shell="app"] .tool-system-toolbar .card-subtitle { max-width: 860px; margin-top: 3px; font-size: 11px; line-height: 1.4; }
html[data-theme] body[data-shell="app"] .tool-system-toolbar .toolbar-actions { margin-top: 7px; gap: 5px; }
html[data-theme] body[data-shell="app"] .tool-system-toolbar .badge { min-height: 19px; padding: 3px 6px; font-size: 9px; }
html[data-theme] body[data-shell="app"] .tool-system-card { margin-bottom: 10px; box-shadow: 0 5px 14px rgba(18, 35, 54, .05); }
html[data-theme] body[data-shell="app"] .tool-system-head { padding: 10px 12px; }
html[data-theme] body[data-shell="app"] .tool-system-head h2 { margin: 0; font-size: 13px; }
html[data-theme] body[data-shell="app"] .tool-system-head p { margin: 3px 0 0; font-size: 10px; }
html[data-theme] body[data-shell="app"] .tool-import-wrap { display: grid; gap: 10px; padding: 12px; }
html[data-theme] body[data-shell="app"] .tool-import-panel-title,
html[data-theme] body[data-shell="app"] .tool-import-section-title { color: var(--rk-ink); font-size: 12px; font-weight: 900; }
html[data-theme] body[data-shell="app"] .tool-import-required-note,
html[data-theme] body[data-shell="app"] .tool-import-note { padding: 8px 10px; border-left: 3px solid var(--rk-brand); background: var(--rk-surface-alt); color: var(--rk-muted); font-size: 10px; line-height: 1.4; }
html[data-theme] body[data-shell="app"] .tool-import-downloads,
html[data-theme] body[data-shell="app"] .tool-import-preview,
html[data-theme] body[data-shell="app"] .tool-import-jobs,
html[data-theme] body[data-shell="app"] .tool-db-backup-list,
html[data-theme] body[data-shell="app"] .tool-db-jobs-list,
html[data-theme] body[data-shell="app"] .tool-db-restore-guard { display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .tool-import-template-actions,
html[data-theme] body[data-shell="app"] .tool-db-backup-actions,
html[data-theme] body[data-shell="app"] .tool-import-actions,
html[data-theme] body[data-shell="app"] .tool-db-backup-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
html[data-theme] body[data-shell="app"] .tool-import-template-btn { min-height: 29px; padding: 5px 8px; font-size: 10px; text-decoration: none; }
html[data-theme] body[data-shell="app"] .tool-import-form { display: grid; gap: 10px; }
html[data-theme] body[data-shell="app"] .tool-import-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
html[data-theme] body[data-shell="app"] .tool-import-grid .field-span-2 { grid-column: 1 / -1; }
html[data-theme] body[data-shell="app"] .tool-import-grid .field { min-width: 0; }
html[data-theme] body[data-shell="app"] .tool-import-grid .help { margin-top: 3px; font-size: 10px; }
html[data-theme] body[data-shell="app"] .tool-import-grid .radio-row { gap: 6px 10px; }
html[data-theme] body[data-shell="app"] .tool-import-grid .radio-row label { font-size: 10px; }
html[data-theme] body[data-shell="app"] .tool-import-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
html[data-theme] body[data-shell="app"] .tool-import-preview-head > div:first-child { min-width: 0; }
html[data-theme] body[data-shell="app"] .tool-import-preview-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
html[data-theme] body[data-shell="app"] .tool-import-preview-badges .badge { min-height: 19px; padding: 3px 6px; font-size: 9px; }
html[data-theme] body[data-shell="app"] .tool-import-preview-wrap { margin: 0; border: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] .tool-import-confirm-form { display: grid; gap: 8px; }
html[data-theme] body[data-shell="app"] .tool-db-restore-guard { background: #fffaf2; }
html[data-theme] body[data-shell="app"] .tool-db-restore-guard > * { margin-inline: 0; }
html[data-theme] body[data-shell="app"] .tool-db-restore-guard p { margin: 0; color: var(--rk-muted); font-size: 10px; line-height: 1.45; }
html[data-theme] body[data-shell="app"] .tool-db-restore-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; gap: 8px; }
html[data-theme] body[data-shell="app"] .tool-db-restore-form label { display: grid; gap: 4px; min-width: 0; color: var(--rk-muted); font-size: 10px; font-weight: 800; }
html[data-theme] body[data-shell="app"] .tool-db-restore-form button { min-height: 32px; justify-content: center; }
html[data-theme] body[data-shell="app"] .tool-db-backup-row-actions .inline-form { margin: 0; }
html[data-theme] body[data-shell="app"] .tool-system-card .rk-table-wrap { margin: 0; }
html[data-theme] body[data-shell="app"] .tool-system-placeholder-wrap { display: grid; min-height: 250px; place-items: center; padding: 20px; }
html[data-theme] body[data-shell="app"] .tool-system-placeholder-state { display: grid; justify-items: center; gap: 8px; max-width: 480px; text-align: center; }
html[data-theme] body[data-shell="app"] .tool-system-placeholder-state .placeholder-icon { width: 38px; height: 38px; border-radius: 7px; font-size: 18px; }
html[data-theme] body[data-shell="app"] .tool-system-placeholder-state h3 { margin: 0; font-size: 15px; }
html[data-theme] body[data-shell="app"] .tool-system-placeholder-state p { max-width: 420px; margin: 0; color: var(--rk-muted); font-size: 11px; line-height: 1.45; }
html[data-theme] body[data-shell="app"] .tool-system-placeholder-state.is-danger .placeholder-icon { background: var(--rk-danger-soft); color: var(--rk-danger); }
html[data-theme] body[data-shell="app"] .placeholder-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
html[data-theme] body[data-shell="app"] .placeholder-pills .badge { min-height: 19px; padding: 3px 6px; font-size: 9px; }
@media (max-width: 620px) {
  html[data-theme] body[data-shell="app"] .tool-system-toolbar { padding: 10px 12px; }
  html[data-theme] body[data-shell="app"] .tool-import-wrap { padding: 10px; }
  html[data-theme] body[data-shell="app"] .tool-import-grid { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .tool-import-grid .field-span-2 { grid-column: auto; }
  html[data-theme] body[data-shell="app"] .tool-db-restore-form { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .tool-db-restore-form button { width: 100%; }
  html[data-theme] body[data-shell="app"] .tool-system-placeholder-wrap { min-height: 220px; padding: 16px; }
}

/* Tool Sistem: identify non-active destructive reset routes in the sidebar. */
html[data-theme] body[data-shell="app"] .sidebar .nav-sub-danger {
  color: #fda4af !important;
  background: rgba(244, 63, 94, .08) !important;
}
html[data-theme] body[data-shell="app"] .sidebar .nav-sub-danger::before {
  content: "!";
  position: static;
  left: auto;
  top: auto;
  display: inline-grid;
  width: 15px;
  height: 15px;
  place-items: center;
  margin-right: 1px;
  border: 1px solid rgba(251, 113, 133, .54);
  border-radius: 50%;
  color: #fecdd3;
  background: rgba(244, 63, 94, .16);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  transform: none;
}
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;
  background: rgba(244, 63, 94, .20) !important;
}
html[data-theme] body[data-shell="app"] .sidebar .nav-sub-danger.active::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fb7185;
  transform: translateY(-50%);
}

/* PPP renewal: a compact payment workspace with a readable customer summary. */
html[data-theme] body[data-shell="app"] #customer-renew-modal .customer-renew-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(640px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
html[data-theme] body[data-shell="app"] #customer-renew-modal .rk-modal-head { padding: 10px 12px; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .rk-modal-head .card-title { font-size: 15px; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .rk-modal-head .card-subtitle { margin-top: 3px; font-size: 10px; line-height: 1.4; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .rk-modal-body { display: grid; min-height: 0; overflow: auto; padding: 12px; gap: 10px; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-summary-card {
  display: grid;
  grid-template-columns: minmax(142px, 166px) minmax(0, 1fr);
  gap: 10px 12px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--rk-border);
  border-radius: 7px;
  background: var(--rk-surface-alt);
  box-shadow: none;
}
html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-summary-top { display: grid; align-content: start; gap: 7px; padding: 8px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); }
html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-summary-price { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-detail-grid { display: grid; gap: 4px; align-content: start; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-detail-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; font-size: 11px; line-height: 1.35; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-detail-label { color: var(--rk-muted); }
html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-detail-value { min-width: 0; overflow-wrap: anywhere; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .field { gap: 4px; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .field label { font-size: 11px; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .field small { font-size: 10px; line-height: 1.4; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-note { margin: 0; padding: 9px 10px; border-radius: 6px; font-size: 10px; line-height: 1.4; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-note ul { margin: 5px 0 0 16px; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-note li { margin: 2px 0; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .grid-2 { gap: 9px; }
html[data-theme] body[data-shell="app"] #customer-renew-modal .actions-stack-mobile { display: flex; justify-content: flex-end; gap: 7px; margin-top: 0; padding-top: 10px; border-top: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] #customer-renew-modal .actions-stack-mobile .btn { min-height: 33px; padding: 6px 11px; font-size: 11px; }
@media (max-width: 620px) {
  html[data-theme] body[data-shell="app"] #customer-renew-modal .customer-renew-modal-card { width: 100% !important; max-height: calc(100dvh - 16px); }
  html[data-theme] body[data-shell="app"] #customer-renew-modal .rk-modal-head,
  html[data-theme] body[data-shell="app"] #customer-renew-modal .rk-modal-body { padding: 10px; }
  html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-summary-card { grid-template-columns: 1fr; gap: 8px; }
  html[data-theme] body[data-shell="app"] #customer-renew-modal .renew-detail-row { grid-template-columns: 1fr; gap: 1px; }
  html[data-theme] body[data-shell="app"] #customer-renew-modal .grid-2,
  html[data-theme] body[data-shell="app"] #customer-renew-modal .actions-stack-mobile { display: grid; grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] #customer-renew-modal .actions-stack-mobile .btn { width: 100%; }
}

/* Login: RadiusKu operations entry point. */
body[data-shell="auth"] { min-height: 100dvh; overflow: hidden; background: #061b43; }
body[data-shell="auth"] .auth-shell {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(18px, 4vw, 48px);
  background-color: #061b43;
  background-image: linear-gradient(rgba(128, 190, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 190, 255, .08) 1px, transparent 1px), linear-gradient(145deg, #061b43 0%, #082c67 58%, #0a4b9e 100%);
  background-size: 34px 34px, 34px 34px, auto;
}
body[data-shell="auth"] .auth-grid {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  min-height: min(650px, calc(100dvh - 72px));
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  border: 1px solid rgba(151, 208, 255, .32);
  border-radius: 8px;
  background: rgba(6, 27, 67, .78);
  box-shadow: 0 28px 70px rgba(1, 17, 45, .48);
}
body[data-shell="auth"] .auth-copy {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  overflow: hidden;
  padding: clamp(30px, 5vw, 62px);
  background: rgba(6, 31, 76, .9);
}
body[data-shell="auth"] .auth-copy::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(135deg, transparent 49.8%, rgba(135, 199, 255, .12) 50%, transparent 50.2%);
  background-size: 220px 220px;
  opacity: .6;
}
body[data-shell="auth"] .auth-copy > * { position: relative; z-index: 1; }
body[data-shell="auth"] .auth-wordmark { display: flex; align-items: center; gap: 9px; color: #f4f8ff; font-size: 15px; letter-spacing: 0; }
body[data-shell="auth"] .auth-wordmark-mark,
body[data-shell="auth"] .auth-login-mark {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 166, 89, .62);
  border-radius: 7px;
  color: #fff7ed;
  background: rgba(255, 116, 23, .18);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}
body[data-shell="auth"] .auth-copy-main { align-self: center; max-width: 330px; }
body[data-shell="auth"] .auth-kicker { display: block; margin-bottom: 13px; color: #ffb878; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
body[data-shell="auth"] .auth-copy h1 { margin: 0; color: #f5f9ff; font-size: 44px; font-weight: 850; letter-spacing: 0; line-height: 1.02; }
body[data-shell="auth"] .auth-copy p { margin: 12px 0 0; color: rgba(220, 237, 255, .76); font-size: 13px; line-height: 1.55; }
body[data-shell="auth"] .auth-network-map { position: relative; width: min(100%, 380px); height: 156px; margin-top: 28px; }
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(134, 202, 255, .62); animation: auth-network-link 5.4s ease-in-out infinite; }
body[data-shell="auth"] .auth-network-line-a { width: 126px; top: 38px; left: 20px; transform: rotate(24deg); }
body[data-shell="auth"] .auth-network-line-b { width: 130px; top: 110px; left: 76px; transform: rotate(-30deg); animation-delay: -1.1s; }
body[data-shell="auth"] .auth-network-line-c { width: 104px; top: 24px; left: 142px; transform: rotate(51deg); animation-delay: -2.4s; }
body[data-shell="auth"] .auth-network-line-d { width: 118px; top: 86px; left: 170px; transform: rotate(-17deg); animation-delay: -3.2s; }
body[data-shell="auth"] .auth-network-line-e { width: 98px; top: 121px; left: 14px; transform: rotate(-57deg); animation-delay: -1.9s; }
body[data-shell="auth"] .auth-network-line-f { width: 92px; top: 118px; left: 210px; transform: rotate(42deg); animation-delay: -4.1s; }
body[data-shell="auth"] .auth-network-node { width: 10px; height: 10px; border: 2px solid #ff9a4c; border-radius: 50%; background: #0a4b9e; box-shadow: 0 0 0 5px rgba(255, 154, 76, .09); animation: auth-network-node 4.6s ease-in-out infinite; }
body[data-shell="auth"] .auth-network-node-a { top: 28px; left: 14px; }
body[data-shell="auth"] .auth-network-node-b { top: 116px; left: 70px; animation-delay: -1.4s; }
body[data-shell="auth"] .auth-network-node-c { top: 107px; left: 198px; animation-delay: -2.2s; }
body[data-shell="auth"] .auth-network-node-d { top: 12px; left: 240px; animation-delay: -3.1s; }
body[data-shell="auth"] .auth-network-node-e { top: 74px; left: 164px; animation-delay: -3.8s; }
body[data-shell="auth"] .auth-network-node-f { top: 142px; left: 276px; animation-delay: -2.8s; }
body[data-shell="auth"] .auth-panel { display: flex; align-items: center; padding: clamp(28px, 5vw, 56px); background: #f7faff; }
body[data-shell="auth"] .auth-card { width: 100%; max-width: 360px; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body[data-shell="auth"] .auth-login-head { display: flex; align-items: center; gap: 11px; }
body[data-shell="auth"] .auth-login-mark { color: #a94705; border-color: rgba(255, 116, 23, .24); background: #fff0e3; }
body[data-shell="auth"] .auth-card .eyebrow { margin: 0 0 2px; color: #53709a; font-size: 10px; font-weight: 900; letter-spacing: .11em; }
body[data-shell="auth"] .auth-card .card-title { color: #0a326e; font-size: 26px; font-weight: 850; letter-spacing: 0; }
body[data-shell="auth"] .auth-login-form { display: grid; gap: 15px; margin-top: 34px; }
body[data-shell="auth"] .auth-login-welcome { display: grid; gap: 3px; padding-left: 10px; border-left: 2px solid var(--rk-accent); }
body[data-shell="auth"] .auth-login-welcome strong { color: #0a326e; font-size: 14px; font-weight: 900; }
body[data-shell="auth"] .auth-login-welcome span { color: #5d7599; font-size: 11px; line-height: 1.45; }
body[data-shell="auth"] .auth-login-form .field { gap: 6px; }
body[data-shell="auth"] .auth-login-form label { color: #3e5f8d; font-size: 11px; font-weight: 850; }
body[data-shell="auth"] .auth-login-form input { min-height: 44px; padding: 8px 11px; border: 1px solid rgba(10, 75, 158, .2); border-radius: 6px; background: #fff; color: #0b326d; font-size: 13px; }
body[data-shell="auth"] .auth-login-form select { min-height: 44px; padding: 8px 11px; border: 1px solid rgba(10, 75, 158, .2); border-radius: 6px; background: #fff; color: #0b326d; font-size: 13px; }
body[data-shell="auth"] .auth-login-form input:focus { border-color: #ff7417; box-shadow: 0 0 0 3px rgba(255, 116, 23, .16); }
body[data-shell="auth"] .auth-login-form select:focus { border-color: #ff7417; box-shadow: 0 0 0 3px rgba(255, 116, 23, .16); }
body[data-shell="auth"] .auth-login-form .btn { min-height: 44px; margin-top: 6px; border-radius: 6px; background: #0a4b9e; box-shadow: 0 10px 18px -14px rgba(4, 42, 96, .78); }
body[data-shell="auth"] .auth-login-form .btn:is(:hover, :focus-visible) { background: #063b82; transform: translateY(-1px); }
body[data-shell="auth"] .auth-login-form .btn.btn-ghost { color: #fff; border-color: #0a4b9e; }
body[data-shell="auth"] .auth-login-options { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; margin-top: 2px; }
body[data-shell="auth"] .auth-remember { display: inline-flex; align-items: center; gap: 8px; justify-self: start; color: #274b7f; font-size: 13px; font-weight: 700; cursor: pointer; }
body[data-shell="auth"] .auth-remember input { box-sizing: border-box; flex: 0 0 16px; width: 16px; min-height: 16px; height: 16px; margin: 0; padding: 0; accent-color: #0a4b9e; }
body[data-shell="auth"] .auth-forgot-password { justify-self: end; color: #073f87; font-size: 13px; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body[data-shell="auth"] .auth-forgot-password:is(:hover, :focus-visible) { color: #062f66; }
body[data-shell="auth"] .password-reset-otp { padding: 14px; border: 1px solid rgba(10, 75, 158, .3); border-radius: 6px; color: #0a326e; background: #fff; font-size: 28px; font-weight: 850; letter-spacing: .18em; line-height: 1; text-align: center; }
@keyframes auth-network-link { 0%, 100% { opacity: .3; } 50% { opacity: .92; } }
@keyframes auth-network-node { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 5px rgba(255, 154, 76, .09); } 50% { transform: translateY(-5px); box-shadow: 0 0 0 8px rgba(255, 154, 76, .05); } }
@media (prefers-reduced-motion: reduce) { body[data-shell="auth"] .auth-network-line, body[data-shell="auth"] .auth-network-node { animation: none; } }
@media (max-width: 760px) {
  body[data-shell="auth"] { overflow: auto; }
  body[data-shell="auth"] .auth-shell { padding: 16px; }
  body[data-shell="auth"] .auth-grid { min-height: 0; grid-template-columns: 1fr; }
  body[data-shell="auth"] .auth-copy { display: none; }
  body[data-shell="auth"] .auth-panel { min-height: min(560px, calc(100dvh - 32px)); padding: 28px 22px; }
}
@media (max-width: 360px) {
  body[data-shell="auth"] .auth-login-options { grid-template-columns: 1fr; align-items: flex-start; }
  body[data-shell="auth"] .auth-forgot-password { justify-self: start; }
}

/* Global notifications: compact, legible success and error feedback. */
html[data-theme] body .toast-stack {
  z-index: 120;
  top: 14px;
  right: 14px;
  bottom: auto;
  gap: 7px;
  width: min(350px, calc(100vw - 28px));
  pointer-events: none;
}
html[data-theme] body[data-shell="app"] .toast-stack { top: 74px; }
html[data-theme] body .toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: start;
  gap: 9px;
  padding: 10px;
  border-radius: 7px;
  border: 1px solid var(--rk-border);
  background: var(--rk-surface);
  box-shadow: 0 12px 28px rgba(18, 35, 54, .16);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto;
}
html[data-theme] body .toast.is-visible { opacity: 1; transform: translateY(0); }
html[data-theme] body .toast.is-leaving { opacity: 0; transform: translateY(-8px); }
html[data-theme] body .toast-success { border-color: rgba(22, 163, 74, .28); background: #f4fcf7; }
html[data-theme] body .toast-warning { border-color: rgba(217, 119, 6, .32); background: #fff9ed; }
html[data-theme] body .toast-error { border-color: rgba(220, 38, 38, .28); background: #fff7f7; }
html[data-theme] body .toast-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 6px;
}
html[data-theme] body .toast-icon .rk-ui-svg-icon { width: 16px; height: 16px; }
html[data-theme] body .toast-success .toast-icon { color: #15803d; background: #dcfce7; }
html[data-theme] body .toast-warning .toast-icon { color: #b45309; background: #fef3c7; }
html[data-theme] body .toast-error .toast-icon { color: #dc2626; background: #fee2e2; }
html[data-theme] body .toast-copy { min-width: 0; padding-top: 1px; }
html[data-theme] body .toast-title { display: block; color: var(--rk-ink); font-size: 11px; font-weight: 900; line-height: 1.25; }
html[data-theme] body .toast-message { display: block; margin-top: 2px; color: var(--rk-muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
html[data-theme] body .toast-close {
  display: grid;
  width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--rk-muted);
  background: transparent;
}
html[data-theme] body .toast-close .rk-ui-svg-icon { width: 14px; height: 14px; }
html[data-theme] body .toast-close:is(:hover, :focus-visible) { color: var(--rk-ink); background: rgba(18, 35, 54, .07); }
html[data-theme="noc-dark"] body .toast { border-color: #3b4c5d; background: #162431; box-shadow: 0 12px 28px rgba(0, 0, 0, .38); }
html[data-theme="noc-dark"] body .toast-success { border-color: #2b8f70; background: #12372f; }
html[data-theme="noc-dark"] body .toast-warning { border-color: #b7771e; background: #442d0f; }
html[data-theme="noc-dark"] body .toast-error { border-color: #c65b67; background: #3d2029; }
html[data-theme="noc-dark"] body .toast-title { color: #f4fbff; }
html[data-theme="noc-dark"] body .toast-message { color: #d5e2eb; }
html[data-theme="noc-dark"] body .toast-success .toast-icon { color: #9af0c8; background: #1c604b; }
html[data-theme="noc-dark"] body .toast-warning .toast-icon { color: #fde68a; background: #724615; }
html[data-theme="noc-dark"] body .toast-error .toast-icon { color: #ffc4cd; background: #7b3542; }
html[data-theme="noc-dark"] body .toast-close { color: #d5e2eb; }
html[data-theme="noc-dark"] body .toast-close:is(:hover, :focus-visible) { color: #fff; background: rgba(255, 255, 255, .12); }
html[data-theme] body[data-shell="app"] .customer-wifi-modal { z-index: 130; padding: 12px; }
html[data-theme] body[data-shell="app"] .customer-wifi-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
html[data-theme] body[data-shell="app"] .customer-wifi-modal-card > .rk-modal-head {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rk-border);
}
html[data-theme] body[data-shell="app"] .customer-wifi-modal-card > .rk-modal-head > div { min-width: 0; }
html[data-theme] body[data-shell="app"] .customer-wifi-modal-card > .rk-modal-head > div:first-child { text-align: left !important; }
html[data-theme] body[data-shell="app"] .customer-wifi-modal-card .card-title { font-size: 15px; line-height: 1.2; }
html[data-theme] body[data-shell="app"] .customer-wifi-modal-card .card-subtitle { margin-top: 2px; font-size: 10px; }
html[data-theme] body[data-shell="app"] .customer-wifi-modal-card .rk-action-btn { flex: 0 0 auto; width: 30px; height: 30px; min-height: 30px; padding: 0; }
html[data-theme] body[data-shell="app"] .customer-wifi-modal-card > .rk-modal-body { min-height: 0; padding: 9px; overflow: auto; }
html[data-theme] body[data-shell="app"] .customer-wifi-grid { display: grid; gap: 6px; }
html[data-theme] body[data-shell="app"] .customer-wifi-item { min-width: 0; overflow: hidden; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .customer-wifi-summary { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 38px; padding: 7px 9px; cursor: pointer; list-style: none; }
html[data-theme] body[data-shell="app"] .customer-wifi-summary::-webkit-details-marker { display: none; }
html[data-theme] body[data-shell="app"] .customer-wifi-chevron { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--rk-brand-strong); transition: transform .16s ease; }
html[data-theme] body[data-shell="app"] .customer-wifi-item[open] .customer-wifi-chevron { transform: rotate(90deg); }
html[data-theme] body[data-shell="app"] .customer-wifi-identity { display: inline-flex; align-items: center; min-width: 0; gap: 5px; }
html[data-theme] body[data-shell="app"] .customer-wifi-identity > strong { font-size: 12px; line-height: 1.2; }
html[data-theme] body[data-shell="app"] .customer-wifi-band { padding: 2px 5px; border: 1px solid var(--rk-border); border-radius: 4px; color: var(--rk-muted); font-size: 9px; line-height: 1; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .customer-wifi-state { min-width: 32px; padding: 3px 5px; border-radius: 4px; font-size: 9px; font-weight: 900; line-height: 1; text-align: center; }
html[data-theme] body[data-shell="app"] .customer-wifi-state.is-on { color: #167a45; background: #e3f7eb; }
html[data-theme] body[data-shell="app"] .customer-wifi-state.is-off { color: #687783; background: #eef2f5; }
html[data-theme] body[data-shell="app"] .customer-wifi-form { display: grid; gap: 7px; padding: 9px; border-top: 1px solid var(--rk-border); background: var(--rk-surface); }
html[data-theme] body[data-shell="app"] .customer-wifi-form-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html[data-theme] body[data-shell="app"] .customer-wifi-field-label { color: var(--rk-muted); font-size: 10px; font-weight: 800; }
html[data-theme] body[data-shell="app"] .customer-wifi-toggles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
html[data-theme] body[data-shell="app"] .customer-wifi-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
html[data-theme] body[data-shell="app"] .customer-wifi-toggle input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--rk-brand); }
html[data-theme] body[data-shell="app"] .customer-wifi-input { width: 100%; min-width: 0; min-height: 32px; padding: 6px 8px; font-size: 12px; }
html[data-theme] body[data-shell="app"] .customer-wifi-form-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; }
html[data-theme] body[data-shell="app"] .customer-wifi-form-foot .btn { min-height: 32px; padding: 6px 10px; font-size: 11px; }
html[data-theme] body[data-shell="app"] .topbar-warning-shell { position: relative; flex: 0 0 auto; }
html[data-theme] body[data-shell="app"] .topbar-warning-trigger {
  position: relative;
  display: grid !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid #e8c36a;
  border-radius: 6px;
  background: #fff8df;
  color: #a36600;
  box-shadow: none;
  cursor: pointer;
}
html[data-theme] body[data-shell="app"] .topbar-warning-trigger:is(:hover, :focus-visible) { border-color: #bf820f; background: #fff0ba; color: #805700; outline: none; }
html[data-theme] body[data-shell="app"] .topbar-warning-trigger svg { width: 18px; height: 18px; }
html[data-theme] body[data-shell="app"] .topbar-warning-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--rk-surface);
  border-radius: 50%;
  background: #c2410c;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}
html[data-theme] body[data-shell="app"] .topbar-warning-menu {
  z-index: 130;
  top: calc(100% + 8px);
  width: min(330px, calc(100vw - 24px));
  min-width: min(300px, calc(100vw - 24px));
  padding: 6px;
  border-color: #ead9a7;
  box-shadow: 0 16px 36px rgba(88, 61, 9, .18);
}
html[data-theme] body[data-shell="app"] .topbar-warning-menu .dropdown-label { padding: 6px 7px 5px; color: #8a620b; font-size: 10px; }
html[data-theme] body[data-shell="app"] .topbar-warning-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px; border: 1px solid transparent; border-radius: 5px; }
html[data-theme] body[data-shell="app"] .topbar-warning-item:is(:hover, :focus-visible) { border-color: #e7c870; background: #fff9e8; outline: none; }
html[data-theme] body[data-shell="app"] .topbar-warning-item span { display: grid; min-width: 0; gap: 2px; }
html[data-theme] body[data-shell="app"] .topbar-warning-item strong { overflow: hidden; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .topbar-warning-item small { color: var(--rk-muted); font-size: 10px; line-height: 1.25; }
html[data-theme] body[data-shell="app"] .topbar-warning-item em { flex: 0 0 auto; padding: 3px 5px; border: 1px solid #e7c870; border-radius: 4px; color: #9a6405; background: #fff5cf; font-size: 9px; font-style: normal; font-weight: 900; line-height: 1.1; white-space: nowrap; }
html[data-theme] body[data-shell="app"] .olt-settings-hero:has(.olt-device-c320) { grid-template-columns: 156px minmax(170px, .8fr) minmax(300px, 1.25fr) auto; }
html[data-theme] body[data-shell="app"] .olt-device-c320 { width: 156px; height: 54px; border-color: #78909c; border-radius: 6px; background: #eaf0f3; color: #0c6674; cursor: zoom-in; }
html[data-theme] body[data-shell="app"] .olt-device-c320:hover { border-color: var(--rk-brand); background: var(--rk-brand-soft); }
html[data-theme] body[data-shell="app"] .olt-device-c320 .c320-chassis-svg { display: block; width: 100% !important; height: 100% !important; }
html[data-theme] body[data-shell="app"] .c320-frame { fill: #35434a; stroke: #162a31; stroke-width: 2; }
html[data-theme] body[data-shell="app"] .c320-brand { fill: #0c5c80; }
html[data-theme] body[data-shell="app"] .c320-brand-name, html[data-theme] body[data-shell="app"] .c320-brand-model { fill: #f4fbff; font-family: var(--rk-font); font-weight: 900; }
html[data-theme] body[data-shell="app"] .c320-brand-name { font-size: 16px; }
html[data-theme] body[data-shell="app"] .c320-brand-model { font-size: 7px; }
html[data-theme] body[data-shell="app"] .c320-slot-body { fill: #d9e2e7; stroke: #8395a0; stroke-width: 1; }
html[data-theme] body[data-shell="app"] .c320-slot-label { fill: #1d3038; font-family: var(--rk-font); font-size: 8px; font-weight: 900; }
html[data-theme] body[data-shell="app"] .c320-slot-indicator, html[data-theme] body[data-shell="app"] .c320-port-indicator { stroke: #13262c; stroke-width: 1; }
html[data-theme] body[data-shell="app"] .c320-slot-indicator.is-online, html[data-theme] body[data-shell="app"] .c320-port-indicator.is-online { fill: #20a161; }
html[data-theme] body[data-shell="app"] .c320-slot-indicator.is-offline, html[data-theme] body[data-shell="app"] .c320-port-indicator.is-offline { fill: #d6504f; }
html[data-theme] body[data-shell="app"] .c320-port-indicator.is-unknown { fill: #91a4b0; }
html[data-theme] body[data-shell="app"] .c320-data-flow { display: none; }
html[data-theme] body[data-shell="app"] .olt-c320-chassis-modal-card { width: min(940px, calc(100vw - 24px)); }
html[data-theme] body[data-shell="app"] .olt-c320-chassis-modal-body { padding: 14px; background: #edf3f5; }
html[data-theme] body[data-shell="app"] .c320-chassis-expanded { overflow: hidden; border: 1px solid #8da0aa; border-radius: 6px; background: #dce5e9; }
html[data-theme] body[data-shell="app"] .c320-chassis-expanded .c320-chassis-svg { display: block; width: 100%; height: auto; }
html[data-theme] body[data-shell="app"] .c320-chassis-expanded .c320-data-flow { display: block; fill: none; stroke: #13a88e; stroke-width: 2; stroke-dasharray: 8 12; opacity: .75; animation: c320-data-flow 1.4s linear infinite; }
html[data-theme] body[data-shell="app"] .c320-chassis-expanded .c320-port-indicator.is-online { animation: c320-port-pulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes c320-data-flow { to { stroke-dashoffset: -40; } }
@keyframes c320-port-pulse { 50% { opacity: .45; transform: scale(.8); } }
html[data-theme] body[data-shell="app"] .mapping-toolbar { display: flex; align-items: center; min-height: 42px; margin-bottom: 8px; padding: 6px 8px; }
html[data-theme] body[data-shell="app"] .mapping-toolbar > div, html[data-theme] body[data-shell="app"] .mapping-toolbar .toolbar-actions { display: flex; align-items: center; min-width: 0; }
html[data-theme] body[data-shell="app"] .mapping-create-card { margin-bottom: 8px; padding: 6px 8px; }
html[data-theme] body[data-shell="app"] .mapping-create-form { padding: 0; }
html[data-theme] body[data-shell="app"] .mapping-create-form > summary { display: inline-flex; align-items: center; min-height: 30px; }
html[data-theme] body[data-shell="app"] .mapping-create-form[open] > summary { margin-bottom: 8px; }
html[data-theme] body[data-shell="app"] .mapping-create-inner { padding-top: 2px; }
html[data-theme] body[data-shell="app"] .mapping-form-hint { margin-bottom: 10px; font-size: 10px; }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) { border-radius: 7px; box-shadow: 0 10px 22px rgba(18, 35, 54, .07); }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > #network-map { overflow: hidden !important; background: #dce9df; }
html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .network-map-legend { min-height: 34px; align-content: center; padding: 7px 10px; font-size: 9px; }
html[data-theme] body[data-shell="app"] .mapping-edit-row > td { padding: 0 !important; background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .mapping-edit-form { padding: 9px 10px 10px; }
html[data-theme] body[data-shell="app"] .mapping-edit-form > summary { color: var(--rk-brand-strong); font-size: 11px; font-weight: 800; cursor: pointer; }
html[data-theme] body[data-shell="app"] .mapping-edit-form[open] form { margin-top: 9px; }
html[data-theme] body[data-shell="app"] .network-map.leaflet-container { position: relative; z-index: 0; isolation: isolate; overflow: hidden; outline: 0; }
html[data-theme] body[data-shell="app"] .network-map :is(.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-layer) { position: absolute !important; top: 0; left: 0; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-pane { z-index: 400; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-tile-pane { z-index: 200; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-overlay-pane { z-index: 400; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-marker-pane { z-index: 600; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-tooltip-pane { z-index: 650; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-popup-pane { z-index: 700; }
html[data-theme] body[data-shell="app"] .network-map :is(.leaflet-tile, .leaflet-marker-icon) { display: block; max-width: none !important; max-height: none !important; user-select: none; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-tile { visibility: hidden; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-tile-loaded { visibility: inherit; }
html[data-theme] body[data-shell="app"] .network-map :is(.leaflet-top, .leaflet-bottom) { position: absolute; z-index: 1000; pointer-events: none; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-top { top: 0; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-bottom { bottom: 0; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-right { right: 0; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-left { left: 0; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-control { position: relative; z-index: 800; pointer-events: auto; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-top .leaflet-control { margin-top: 10px; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-bottom .leaflet-control { margin-bottom: 10px; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-left .leaflet-control { margin-left: 10px; }
html[data-theme] body[data-shell="app"] .network-map .leaflet-right .leaflet-control { margin-right: 10px; }
html[data-theme] body[data-shell="app"] .network-map .network-map-fullscreen-control { overflow: hidden; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface); box-shadow: 0 2px 6px rgba(15, 23, 42, .18); }
html[data-theme] body[data-shell="app"] .network-map .network-map-fullscreen { width: 34px; height: 34px; display: grid; padding: 0; place-items: center; appearance: none; border: 0; background: var(--rk-surface); color: var(--rk-ink); cursor: pointer; }
html[data-theme] body[data-shell="app"] .network-map .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; }
html[data-theme] body[data-shell="app"] .network-map .network-map-fullscreen:hover, html[data-theme] body[data-shell="app"] .network-map .network-map-fullscreen:focus-visible { background: var(--rk-brand-soft); color: var(--rk-brand-strong); outline: 0; }
html[data-theme] body[data-shell="app"] .network-map .network-map-fullscreen:focus-visible { box-shadow: inset 0 0 0 2px var(--rk-brand); }
html[data-theme] body[data-shell="app"] .network-map .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"); }
html[data-theme] body[data-shell="app"] .network-map .network-map-icon { border: 0 !important; background: transparent !important; }
html[data-theme] body[data-shell="app"] .network-map .network-pin { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 5px rgba(15, 23, 42, .35)); overflow: visible; }
html[data-theme] body[data-shell="app"] .network-map .network-pin-shape { stroke: #fff; stroke-width: 2; }
html[data-theme] body[data-shell="app"] .network-map .network-pin-label { fill: #fff; font: 800 12px/1 var(--rk-font); text-anchor: middle; dominant-baseline: middle; }
html[data-theme] body[data-shell="app"] .network-map .network-pin-dot { fill: #fff; }
html[data-theme] body[data-shell="app"] .network-map .network-pin--odc .network-pin-shape { fill: #2364a5; }
html[data-theme] body[data-shell="app"] .network-map .network-pin--odp .network-pin-shape { fill: var(--rk-brand); }
html[data-theme] body[data-shell="app"] .network-map .network-pin--customer .network-pin-shape { fill: #d94b3d; }
html[data-theme] body[data-shell="app"] .network-map-focus-row { cursor: pointer; }
html[data-theme] body[data-shell="app"] .network-map-focus-row:focus-visible { position: relative; outline: 2px solid var(--rk-brand); outline-offset: -2px; }
@media (max-width: 620px) {
  html[data-theme] body .toast-stack { top: 10px; right: 10px; width: calc(100vw - 20px); }
  html[data-theme] body[data-shell="app"] .toast-stack { top: 74px; }
  html[data-theme] body .toast { grid-template-columns: 27px minmax(0, 1fr) 27px; gap: 8px; padding: 9px; }
  html[data-theme] body .toast-icon,
  html[data-theme] body .toast-close { width: 27px; height: 27px; min-height: 27px; }
  html[data-theme] body[data-shell="app"] .customer-wifi-modal { padding: 8px; }
  html[data-theme] body[data-shell="app"] .customer-wifi-modal-card { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  html[data-theme] body[data-shell="app"] .customer-wifi-form-head { align-items: flex-start; flex-direction: column; }
  html[data-theme] body[data-shell="app"] .customer-wifi-toggles { justify-content: flex-start; }
  html[data-theme] body[data-shell="app"] .customer-wifi-form-foot { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .customer-wifi-form-foot .btn { width: 100%; }
  html[data-theme] body[data-shell="app"] .topbar-warning-menu { position: fixed; top: 64px; right: 8px; left: auto; min-width: min(300px, calc(100vw - 16px)); width: min(330px, calc(100vw - 16px)); }
  html[data-theme] body[data-shell="app"] .olt-settings-hero:has(.olt-device-c320) { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .olt-device-c320 { width: 100%; height: auto; aspect-ratio: 520 / 140; }
  html[data-theme] body[data-shell="app"] .mapping-toolbar { min-height: 40px; margin-bottom: 7px; padding: 5px 7px; }
  html[data-theme] body[data-shell="app"] .mapping-create-card { margin-bottom: 7px; padding: 5px 7px; }
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) { grid-template-rows: auto 330px auto; }
  html[data-theme] body[data-shell="app"] .table-card:has(> #network-map) > .network-map-legend { padding: 6px 8px; }
}

/* Billing and finance: compact filter and expense-entry workspaces. */
html[data-theme] body[data-shell="app"] :is(.billing-filter-modal-card, .finance-report-filter-card, .finance-expense-create-card) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(590px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
html[data-theme] body[data-shell="app"] :is(.billing-filter-modal, .finance-report-filter-modal) .rk-modal-head,
html[data-theme] body[data-shell="app"] .finance-expense-create-card .rk-modal-head { padding: 10px 12px; }
html[data-theme] body[data-shell="app"] :is(.billing-filter-modal, .finance-report-filter-modal) .rk-modal-head .card-title,
html[data-theme] body[data-shell="app"] .finance-expense-create-card .rk-modal-head .card-title { font-size: 14px; }
html[data-theme] body[data-shell="app"] :is(.billing-filter-modal, .finance-report-filter-modal) .rk-modal-head .card-subtitle,
html[data-theme] body[data-shell="app"] .finance-expense-create-card .rk-modal-head .card-subtitle { margin-top: 3px; font-size: 10px; line-height: 1.35; }
html[data-theme] body[data-shell="app"] :is(.billing-filter-form, .finance-report-filter-form, .finance-expense-create-form) {
  display: grid;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  gap: 10px;
}
html[data-theme] body[data-shell="app"] .technician-create-work-modal { display: flex; flex-direction: column; overflow: hidden; }
html[data-theme] body[data-shell="app"] .technician-create-work-form { min-height: 0; overflow: auto; padding: 12px; }
html[data-theme] body[data-shell="app"] :is(.billing-period-date-grid, .finance-report-filter-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
html[data-theme] body[data-shell="app"] .finance-report-filter-grid .field { min-width: 0; }
html[data-theme] body[data-shell="app"] :is(.billing-filter-form, .finance-report-filter-form, .finance-expense-create-form) .field { gap: 4px; }
html[data-theme] body[data-shell="app"] :is(.billing-filter-form, .finance-report-filter-form, .finance-expense-create-form) .field label { font-size: 10px; font-weight: 850; }
html[data-theme] body[data-shell="app"] .billing-filter-subnote,
html[data-theme] body[data-shell="app"] .billing-filter-note { margin: 0; padding: 8px 9px; border-left: 3px solid var(--rk-brand); background: var(--rk-surface-alt); font-size: 10px; line-height: 1.35; }
html[data-theme] body[data-shell="app"] :is(.billing-filter-actions, .modal-actions) { display: flex; justify-content: flex-end; gap: 7px; margin: 0; padding-top: 10px; border-top: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] :is(.billing-filter-actions, .modal-actions) .btn { min-height: 33px; padding: 6px 11px; font-size: 11px; }
html[data-theme] body[data-shell="app"] .finance-expense-create-card { width: min(680px, calc(100vw - 24px)) !important; }
html[data-theme] body[data-shell="app"] .finance-expense-create-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
html[data-theme] body[data-shell="app"] .finance-expense-create-grid .field { min-width: 0; }
html[data-theme] body[data-shell="app"] .finance-expense-create-grid .field-span-2 { grid-column: span 3; }

/* Shared non-Dashboard card contract. Modals retain their dedicated dimensions. */
html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) :is(.card, .panel, .table-card, .rk-card, .rk-summary-card, .olt-detail-card, .olt-uplink-card):not(.modal-card):not(.rk-modal-card) {
  min-width: 0;
  border-radius: 7px;
  box-shadow: 0 5px 14px rgba(18, 35, 54, .06);
}
html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) :is(.card-header, .table-head, .rk-card-head) {
  min-height: 42px;
  padding: 10px 12px;
}
html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .card-title { font-size: 14px; }
@media (max-width: 620px) {
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) :is(.card-header, .table-head, .rk-card-head) { min-height: 38px; padding: 8px 10px; }
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .rk-summary-card { min-height: 86px; gap: 7px; padding: 8px; }
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .overview-kicker { font-size: 10px; }
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .overview-number { margin-top: 4px; font-size: 18px; }
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .overview-glyph { width: 30px; height: 30px; flex-basis: 30px; }
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .overview-glyph svg { width: 17px; height: 17px; }
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .session-summary-card { min-height: 70px; gap: 6px; padding: 7px; }
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .session-summary-card .overview-kicker { font-size: 9px; }
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .session-summary-card .overview-number { margin-top: 3px; font-size: 16px; }
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .session-summary-card .overview-glyph { width: 26px; height: 26px; flex-basis: 26px; }
  html[data-theme] body[data-shell="app"] .page-body:not(:has([data-dashboard-live-summary])) .session-summary-card .overview-glyph svg { width: 15px; height: 15px; }
  html[data-theme] body[data-shell="app"] :is(.billing-filter-modal-card, .finance-report-filter-card, .finance-expense-create-card) { width: 100% !important; max-height: calc(100dvh - 16px); }
  html[data-theme] body[data-shell="app"] :is(.billing-filter-modal, .finance-report-filter-modal) .rk-modal-head,
  html[data-theme] body[data-shell="app"] .finance-expense-create-card .rk-modal-head,
  html[data-theme] body[data-shell="app"] :is(.billing-filter-form, .finance-report-filter-form, .finance-expense-create-form) { padding: 10px; }
  html[data-theme] body[data-shell="app"] :is(.billing-period-date-grid, .finance-report-filter-grid, .finance-expense-create-grid) { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .finance-expense-create-grid .field-span-2 { grid-column: auto; }
  html[data-theme] body[data-shell="app"] :is(.billing-filter-actions, .modal-actions) { display: grid; grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] :is(.billing-filter-actions, .modal-actions) .btn { width: 100%; }
}

/* Compact manual WhatsApp notification workflow. */
html[data-theme] body[data-shell="app"] .customer-wa-old-card { width: min(700px, 100%); }
html[data-theme] body[data-shell="app"] .customer-wa-old-form { gap: 14px; }
html[data-theme] body[data-shell="app"] .customer-wa-warning,
html[data-theme] body[data-shell="app"] .customer-wa-config-grid,
html[data-theme] body[data-shell="app"] .customer-wa-target-field,
html[data-theme] body[data-shell="app"] .customer-wa-message-field { border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .customer-wa-warning { border-color: color-mix(in srgb, var(--rk-danger) 32%, var(--rk-border)); background: color-mix(in srgb, var(--rk-danger-soft) 65%, var(--rk-surface)); padding: 9px 11px; }
html[data-theme] body[data-shell="app"] .customer-wa-warning ul { display: grid; gap: 3px; margin: 0; padding-left: 19px; font-size: 12px; line-height: 1.35; }
html[data-theme] body[data-shell="app"] .customer-wa-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface-alt); }
html[data-theme] body[data-shell="app"] .customer-wa-tabs .btn { justify-content: center; }
html[data-theme] body[data-shell="app"] .customer-wa-config-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr); gap: 12px; padding: 11px; }
html[data-theme] body[data-shell="app"] .customer-wa-type-row { gap: 6px; margin-top: 7px; }
html[data-theme] body[data-shell="app"] .customer-wa-type-row .check-inline { min-height: 32px; padding: 5px 8px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface); font-size: 12px; }
html[data-theme] body[data-shell="app"] .customer-wa-picker { display: grid; gap: 8px; }
html[data-theme] body[data-shell="app"] .customer-wa-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
html[data-theme] body[data-shell="app"] .customer-wa-selected,
html[data-theme] body[data-shell="app"] .customer-wa-results { min-height: 38px; padding: 6px 8px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-surface); }
html[data-theme] body[data-shell="app"] .customer-wa-results { max-height: min(190px, 24vh); overflow: auto; }
html[data-theme] body[data-shell="app"] .customer-wa-result { width: 100%; display: block; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--rk-border); background: transparent; color: var(--rk-ink); cursor: pointer; font-size: 12px; text-align: left; }
html[data-theme] body[data-shell="app"] .customer-wa-result:hover { background: var(--rk-brand-soft); }
html[data-theme] body[data-shell="app"] .customer-wa-target-field,
html[data-theme] body[data-shell="app"] .customer-wa-message-field { padding: 11px; }
html[data-theme] body[data-shell="app"] .customer-wa-message-field textarea { min-height: 116px; resize: vertical; }
html[data-theme] body[data-shell="app"] .customer-wa-actions { justify-content: flex-end; padding-top: 2px; }
html[data-theme] body[data-shell="app"] .customer-wa-actions .btn { min-width: 176px; }
html[data-theme] body[data-shell="app"] .customer-wa-variable-grid { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 5px 8px; font-size: 12px; }
html[data-theme] body[data-shell="app"] .customer-wa-variable-grid button { min-height: 28px; padding: 3px 7px; border: 1px solid var(--rk-border); border-radius: 5px; background: var(--rk-surface-alt); color: var(--rk-ink); cursor: pointer; font-size: 11px; }
html[data-theme] body[data-shell="app"] .customer-wa-variable-grid button:hover { border-color: var(--rk-brand); background: var(--rk-brand-soft); }
html[data-theme] body[data-shell="app"] .customer-wa-variable-grid span { min-width: 0; overflow-wrap: anywhere; color: var(--rk-ink); line-height: 1.3; }
html[data-theme] body[data-shell="app"] .customer-wa-variable-grid strong { color: var(--rk-brand-strong); }
@media (max-width: 640px) {
  html[data-theme] body[data-shell="app"] .customer-wa-old-modal { padding: 12px; }
  html[data-theme] body[data-shell="app"] .customer-wa-old-card { max-height: calc(100dvh - 24px); }
  html[data-theme] body[data-shell="app"] .customer-wa-old-form { padding: 13px; }
  html[data-theme] body[data-shell="app"] .customer-wa-config-grid { grid-template-columns: 1fr; gap: 10px; }
  html[data-theme] body[data-shell="app"] .customer-wa-results { max-height: 150px; }
  html[data-theme] body[data-shell="app"] .customer-wa-actions .btn { width: 100%; }
}

/* Shared list filters: dense fields without sacrificing scan order. */
html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) {
  padding: 10px;
  border: 1px solid var(--rk-border);
  background: var(--rk-surface);
}
html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-form { display: grid; gap: 10px; }
html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px 10px;
}
html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-field { min-width: 0; gap: 4px; }
html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-field label { min-height: 0; color: var(--rk-muted); font-size: 10px; font-weight: 850; line-height: 1.25; }
html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-field :is(input, select) { min-width: 0; min-height: 33px; padding: 6px 8px; font-size: 11px; }
html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-actions { display: flex; justify-content: flex-end; gap: 7px; margin: 0; padding-top: 10px; border-top: 1px solid var(--rk-border); }
html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-actions .btn { min-width: 112px; min-height: 32px; justify-content: center; font-size: 11px; }
@media (max-width: 980px) {
  html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 360px) {
  html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-grid { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-actions { display: grid; grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] :is(.customer-filter-panel, .rk-filter-panel) .customer-filter-actions .btn { width: 100%; }
}

/* Invoice logo settings: keep both upload slots and previews equally legible. */
html[data-theme] body[data-shell="app"] .invoice-logo-card .settings-form-section {
  padding: 14px;
  border: 1px solid var(--rk-border);
  border-radius: 7px;
  background: var(--rk-surface);
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .settings-section-title {
  margin-bottom: 11px;
  color: var(--rk-text);
  font-size: 12px;
  font-weight: 850;
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .invoice-logo-upload-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--rk-border);
  border-radius: 6px;
  background: var(--rk-surface-soft);
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .invoice-logo-upload-field > label:first-child {
  color: var(--rk-text);
  font-size: 11px;
  font-weight: 850;
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .invoice-logo-upload-field input[type="file"] {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 4px;
  border: 1px solid var(--rk-border);
  border-radius: 6px;
  background: var(--rk-surface);
  color: var(--rk-text);
  cursor: pointer;
  font-size: 11px;
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .invoice-logo-upload-field input[type="file"]::file-selector-button {
  margin-right: 8px;
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: var(--rk-primary-soft);
  color: var(--rk-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .invoice-logo-upload-field input[type="file"]:is(:hover, :focus-visible) {
  border-color: var(--rk-primary);
  outline: 0;
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .invoice-logo-upload-field input[type="file"]:is(:hover, :focus-visible)::file-selector-button {
  background: var(--rk-primary);
  color: #fff;
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .invoice-logo-note {
  margin: 10px 0 0;
  color: var(--rk-muted);
  font-size: 11px;
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .settings-logo-preview-section { margin-top: 14px; }
html[data-theme] body[data-shell="app"] .invoice-logo-card .settings-logo-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .settings-logo-preview-block {
  display: grid;
  grid-template-rows: auto minmax(176px, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 224px;
  padding: 12px;
  border: 1px solid var(--rk-border);
  border-radius: 6px;
  background: var(--rk-surface-soft);
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .settings-logo-preview-block .card-subtitle {
  color: var(--rk-muted);
  font-size: 10px;
  font-weight: 850;
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .invoice-logo-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 176px;
  object-fit: contain;
}
html[data-theme] body[data-shell="app"] .invoice-logo-card .settings-logo-preview-block .compact-empty {
  display: grid;
  place-items: center;
  min-height: 176px;
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--rk-border);
  border-radius: 5px;
  background: var(--rk-surface);
  color: var(--rk-muted);
  font-size: 11px;
  text-align: center;
}
@media (max-width: 640px) {
  html[data-theme] body[data-shell="app"] .invoice-logo-card .settings-logo-preview-grid { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .invoice-logo-card .settings-logo-preview-block { min-height: 198px; }
}

/* WhatsApp API settings: dense controls and templates remain easy to scan. */
html[data-theme] body[data-shell="app"] .whatsapp-workspace { overflow: visible; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-settings-head { padding-bottom: 10px; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-setup-note {
  margin: 0 14px 12px;
  padding: 10px 12px;
  border: 1px solid var(--rk-border);
  border-left: 3px solid var(--rk-brand);
  border-radius: 6px;
  background: var(--rk-surface-soft);
  color: var(--rk-muted);
  font-size: 11px;
  line-height: 1.45;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-setup-note ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
  margin: 0;
  padding-left: 17px;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-main-tabs,
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-template-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 14px 12px;
  padding: 4px;
  border: 1px solid var(--rk-border);
  border-radius: 6px;
  background: var(--rk-surface-soft);
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace :is(.whatsapp-tab, .whatsapp-template-tab) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--rk-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace :is(.whatsapp-tab, .whatsapp-template-tab):is(:hover, :focus-visible),
html[data-theme] body[data-shell="app"] .whatsapp-workspace :is(.whatsapp-tab, .whatsapp-template-tab).is-active {
  border-color: var(--rk-border);
  background: var(--rk-surface);
  color: var(--rk-brand-strong);
  outline: 0;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-tab-content { padding: 0 14px 14px; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .settings-form-section {
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid var(--rk-border);
  border-radius: 6px;
  background: var(--rk-surface);
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .settings-section-title {
  margin-bottom: 10px;
  color: var(--rk-text);
  font-size: 11px;
  font-weight: 900;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
  margin-top: 10px;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-check-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--rk-text);
  font-size: 11px;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-delay-info {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rk-border);
  color: var(--rk-muted);
  font-size: 11px;
  line-height: 1.4;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px 16px;
  margin: 6px 0;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-feature-grid > div { display: grid; gap: 4px; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace :is(.feature-ok, .feature-no) { display: block; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-variable-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-variable-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 36px;
  padding: 5px 7px;
  border: 1px solid var(--rk-border);
  border-radius: 5px;
  background: var(--rk-surface-soft);
  color: var(--rk-muted);
  font-size: 10px;
  line-height: 1.25;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-variable-list .btn-copy-token {
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid var(--rk-border);
  border-radius: 4px;
  background: var(--rk-surface);
  color: var(--rk-brand-strong);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-variable-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-variable-list strong { color: var(--rk-text); }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-format-section { padding: 9px 12px; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-format-section .settings-inline-note { margin: 0; font-size: 11px; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-template-editor-section { padding: 12px; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-template-editor-section .whatsapp-template-tabs { margin: 0 0 10px; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-template-field label { font-size: 11px; font-weight: 850; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-template-field textarea {
  min-height: 300px;
  resize: vertical;
  font-family: var(--rk-font-mono, ui-monospace, monospace);
  font-size: 11px;
  line-height: 1.45;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-template-note {
  margin-top: 9px;
  color: var(--rk-muted);
  font-size: 10px;
  line-height: 1.4;
}
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-test-template-btn { margin-top: 9px; }
html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin: 0;
}
@media (max-width: 980px) {
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-variable-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-setup-note { margin: 0 10px 10px; }
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-setup-note ul,
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-check-grid,
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-feature-grid,
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-variable-list { grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-main-tabs { margin: 0 10px 10px; }
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-tab-content { padding: 0 10px 10px; }
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-main-tabs .whatsapp-tab { flex: 1 1 0; }
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-template-tabs .whatsapp-template-tab { flex: 1 1 calc(50% - 4px); }
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-actions { display: grid; grid-template-columns: 1fr; }
  html[data-theme] body[data-shell="app"] .whatsapp-workspace .whatsapp-actions .btn { width: 100%; }
}

/* User management: organize account editing without changing account controls. */
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-profile-editor {
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: none !important;
  padding: 11px 12px !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: 6px !important;
  background: var(--rk-surface-soft) !important;
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-profile-preview {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: 50% !important;
  background: var(--rk-primary-soft) !important;
  box-shadow: none !important;
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-profile-placeholder {
  color: var(--rk-brand-strong) !important;
  background: transparent !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-profile-photo {
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-profile-editor input[type="file"] {
  max-width: none !important;
  cursor: pointer;
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-form-section {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rk-border);
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-form-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-form-section-head .settings-section-title {
  color: var(--rk-text);
  font-size: 11px;
  font-weight: 900;
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-form-section-head p {
  margin: 0;
  color: var(--rk-muted);
  font-size: 10px;
  text-align: right;
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) :is(.user-account-grid, .user-contact-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-topup-balance-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 5px 10px;
  padding: 9px 10px;
  border: 1px solid var(--rk-border);
  border-radius: 6px;
  background: var(--rk-surface-soft);
}
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-topup-balance-field label,
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-topup-balance-field input { grid-column: 1 / -1; }
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-topup-balance-field small { color: var(--rk-muted); font-size: 10px; }
html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-notes-section textarea { min-height: 96px; }
@media (max-width: 640px) {
  html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-profile-editor { grid-template-columns: 52px minmax(0, 1fr) !important; }
  html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-profile-preview,
  html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-profile-photo { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; max-width: 52px !important; max-height: 52px !important; }
  html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-form-section-head { display: grid; gap: 3px; }
  html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) .user-form-section-head p { text-align: left; }
  html[data-theme] body[data-shell="app"] .settings-user-form-card:not(.self-profile-card) :is(.user-account-grid, .user-contact-grid) { grid-template-columns: 1fr; }
}

/* BEGIN ui-v1.7.725 dark-mode native datetime picker icon */
html[data-theme="noc-dark"] input[type="date"],
html[data-theme="noc-dark"] input[type="time"],
html[data-theme="noc-dark"] input[type="datetime-local"] {
  color-scheme: light !important;
}

html[data-theme="noc-dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="noc-dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="noc-dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  filter: invert(1) !important;
  -webkit-filter: invert(1) !important;
}
/* END ui-v1.7.725 dark-mode native datetime picker icon */