/* Remote Management - tema navy (gelap default) + light lewat [data-bs-theme="light"] */
:root,
[data-bs-theme="dark"] {
  --rm-navy: #0d1b3e;
  --rm-navy-2: #122454;
  --rm-bg: #0a1430;
  --rm-card: #101f47;
  --rm-border: #1e3266;
  --rm-accent: #2f6bff;
  --rm-title: #ffffff;
  --rm-text: #dbe4ff;
  --rm-muted: #7e90c4;
  --rm-muted-2: #8b9cd0;
  --rm-nav-text: #b9c6ee;
  --rm-nav-group: #6c80b8;
  --rm-input-bg: #0c1a3d;
  --rm-input-text: #e8edff;
  --rm-readonly-bg: #0a1531;
  --rm-script-bg: #060d22;
  --rm-script-text: #9fe8a0;
  --rm-danger: #ff8f8f;
  --rm-online: #35d07f;
  --rm-offline: #ff5c5c;
  --rm-soft: rgba(47, 107, 255, .12);
  --rm-login-1: #16295e;
  --rm-shadow: none;
}

[data-bs-theme="light"] {
  --rm-navy: #ffffff;
  --rm-navy-2: #eef2fa;
  --rm-bg: #f2f5fb;
  --rm-card: #ffffff;
  --rm-border: #d6dfef;
  --rm-accent: #2f6bff;
  --rm-title: #14224a;
  --rm-text: #26324c;
  --rm-muted: #5c6b8a;
  --rm-muted-2: #67748f;
  --rm-nav-text: #33415c;
  --rm-nav-group: #93a0b8;
  --rm-input-bg: #ffffff;
  --rm-input-text: #26324c;
  --rm-readonly-bg: #f4f7fc;
  --rm-script-bg: #f6f9ff;
  --rm-script-text: #14663a;
  --rm-danger: #c62828;
  --rm-online: #17a95c;
  --rm-offline: #e03b3b;
  --rm-soft: rgba(47, 107, 255, .10);
  --rm-login-1: #dbe6ff;
  --rm-shadow: 0 1px 2px rgba(20, 34, 74, .08);
}

body {
  background: var(--rm-bg);
  color: var(--rm-text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

.app-wrapper { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 250px;
  min-width: 250px;
  background: var(--rm-navy);
  border-right: 1px solid var(--rm-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1040;
}

.sidebar-brand {
  padding: 18px 16px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--rm-border);
  color: var(--rm-title);
}
.sidebar-brand i { color: var(--rm-accent); margin-right: 8px; }
.sidebar-close {
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  padding: 5px 8px;
  background: transparent;
  color: var(--rm-nav-text);
  line-height: 1;
}
.sidebar-close:hover { background: var(--rm-navy-2); color: var(--rm-title); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 9px; scrollbar-width: thin; }
.sidebar-nav .nav-section { margin-top: 5px; }
.sidebar-nav .nav-group {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--rm-nav-group);
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar-nav .nav-group::-webkit-details-marker { display: none; }
.sidebar-nav .nav-group::marker { content: ''; }
.sidebar-nav .nav-group::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.sidebar-nav .nav-section[open] > .nav-group::after {
  transform: rotate(225deg) translate(-1px, -1px);
}
.sidebar-nav .nav-group i {
  width: 18px;
  color: var(--rm-accent);
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
}
.sidebar-nav .nav-group:hover,
.sidebar-nav .nav-section[open] > .nav-group {
  background: var(--rm-navy-2);
  color: var(--rm-title);
}
.sidebar-nav .nav-section-items {
  padding: 3px 0 4px 8px;
  margin-left: 19px;
  border-left: 1px solid var(--rm-border);
}

.sidebar-nav .nav-item {
  display: flex;
  min-height: 36px;
  align-items: center;
  padding: 8px 10px;
  margin: 2px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--rm-nav-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 550;
  transition: background .15s, color .15s, border-color .15s;
}
.sidebar-nav .nav-item i { width: 22px; flex: 0 0 22px; color: var(--rm-muted-2); }
.sidebar-nav .nav-item:hover { background: var(--rm-navy-2); color: var(--rm-title); }
.sidebar-nav .nav-item:hover i { color: var(--rm-title); }
.sidebar-nav .nav-item.active {
  border-color: rgba(91, 139, 255, .22);
  background: var(--rm-soft);
  color: var(--rm-title);
  box-shadow: inset 3px 0 0 var(--rm-accent);
}
.sidebar-nav .nav-item.active i { color: var(--rm-accent); }
.sidebar-nav .nav-dashboard { margin-bottom: 8px; }
.sidebar-nav .nav-logout { color: var(--rm-danger); }
.sidebar-nav .nav-logout i { color: var(--rm-danger); }
.sidebar-nav .nav-logout:hover { background: rgba(255, 92, 92, .1); color: var(--rm-danger); }

/* ---------- PPP workspace ---------- */
.ppp-page-heading,
.ppp-page-title,
.ppp-page-summary,
.ppp-page-actions,
.ppp-navigation,
.ppp-list-toolbar,
.ppp-list-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ppp-page-heading { justify-content: space-between; flex-wrap: wrap; }
.ppp-page-title { gap: 11px; min-width: 0; }
.ppp-page-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 17px;
}
.ppp-page-summary { flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.ppp-page-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-card);
  color: var(--rm-muted);
  font-size: 10px;
  white-space: nowrap;
}
.ppp-page-summary b { color: var(--rm-title); }
.ppp-summary-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--rm-muted-2); }
.ppp-summary-dot.online { background: var(--rm-online); }
.ppp-summary-dot.offline { background: var(--rm-offline); }
.ppp-summary-dot.disabled { background: var(--rm-muted-2); }
.ppp-summary-dot.missing { background: #e8ae42; }
.ppp-summary-warning { color: #e8ae42 !important; }
.ppp-page-actions { justify-content: flex-end; flex-wrap: wrap; }
.ppp-page-actions > form { justify-content: flex-end; }
.ppp-page-actions > .btn { border-radius: 9px; font-weight: 650; }
.ppp-navigation {
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 8px 10px 0;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-card);
}
.ppp-router-selector,
.ppp-sort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ppp-router-selector { flex: 1 1 210px; max-width: 320px; }
.ppp-router-selector > i:first-child,
.ppp-sort > i { flex: 0 0 auto; color: var(--rm-accent); }
.ppp-router-selector .form-select,
.ppp-sort .form-select {
  min-width: 0;
  padding-right: 2rem;
}
.ppp-router-selector .ppp-router-chevron {
  position: absolute;
  right: 11px;
  color: var(--rm-muted);
  font-size: 11px;
  pointer-events: none;
}
.ppp-tabs {
  flex: 0 1 auto;
  gap: 4px;
  margin-bottom: 0 !important;
  border-bottom: 0;
  padding: 4px;
  border: 1px solid var(--rm-border);
  border-radius: 11px;
  background: var(--rm-bg);
}
.ppp-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  color: var(--rm-muted-2);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
  transition: color .15s, background .15s, box-shadow .15s;
}
.ppp-tabs .nav-link:hover { color: var(--rm-title); background: var(--rm-navy-2); }
.ppp-tabs .nav-link.active {
  color: var(--rm-title);
  background: var(--rm-card);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .14);
}
.ppp-tabs .nav-link.active > i { color: var(--rm-accent); }
.ppp-tabs .badge { margin-left: 1px !important; border: 1px solid var(--rm-border); font-size: 9px; }
.ppp-list-toolbar { justify-content: space-between; flex-wrap: wrap; }
.ppp-list-title { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ppp-list-title > i { color: var(--rm-accent); }
.ppp-list-filters { flex-wrap: wrap; justify-content: flex-end; }
.ppp-list-filters > .form-select { width: auto; min-width: 140px; }
.ppp-search,
.ppp-sort { width: 220px; }
.ppp-search { position: relative; }
.ppp-search > i {
  position: absolute;
  left: 10px;
  color: var(--rm-muted);
  pointer-events: none;
}
.ppp-search .form-control { padding-left: 32px; }
.ppp-sort { width: 160px; }
.ppp-content-list-header,
.ppp-content-list-title {
  display: flex;
  align-items: center;
}
.ppp-content-list-header { justify-content: space-between; gap: 10px; }
.ppp-content-list-title { gap: 9px; min-width: 0; }
.ppp-content-list-title > span:last-child { display: grid; gap: 2px; min-width: 0; }
.ppp-content-list-title strong { color: var(--rm-title); font-size: 12px; }
.ppp-content-list-title small { color: var(--rm-muted-2); font-size: 10px; font-weight: 400; }
.ppp-content-list-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rm-border);
  border-radius: 9px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 14px;
}
.ppp-content-list-count {
  min-width: 25px;
  padding: 3px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-soft);
  color: var(--rm-title);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
}
.ppp-active-list,
.ppp-profile-list { overflow: hidden; }
.ppp-active-list .table,
.ppp-profile-list .table { min-width: 780px; }
.ppp-active-unknown { border-radius: 11px; }
.ppp-active-unknown > span:first-child { flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
.ppp-active-unknown code { white-space: normal; overflow-wrap: anywhere; }
.ppp-active-cards,
.ppp-profile-cards { display: grid; gap: 8px; padding: 9px; }
.ppp-active-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--rm-border);
  border-radius: 11px;
  background: var(--rm-bg);
  box-shadow: var(--rm-shadow);
}
.ppp-active-card-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ppp-active-card-main { flex: 1 1 auto; min-width: 0; }
.ppp-active-card-name { display: flex; align-items: center; gap: 6px; color: var(--rm-title); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.ppp-active-card-name i { flex: 0 0 auto; color: var(--rm-accent); }
.ppp-active-card-ip { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--rm-muted-2); font-size: 10px; }
.ppp-active-card-ip i { color: var(--rm-accent); }
.ppp-active-card-ip code { color: var(--rm-text); font-size: 10px; overflow-wrap: anywhere; }
.ppp-active-card-state { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 4px; padding: 4px 7px; border: 1px solid var(--rm-border); border-radius: 999px; font-size: 9px; font-weight: 700; }
.ppp-active-card-state.registered { color: var(--rm-online); }
.ppp-active-card-state.unknown { color: #e8ae42; }
.ppp-active-card-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.ppp-active-card-details > div { display: grid; gap: 2px; min-width: 0; padding: 6px 7px; border: 1px solid var(--rm-border); border-radius: 7px; background: var(--rm-card); }
.ppp-active-card-details > div > span { color: var(--rm-muted-2); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.ppp-active-card-details strong { color: var(--rm-text); font-size: 9px; overflow-wrap: anywhere; }
.ppp-active-card-details .ppp-active-account { grid-column: 1 / -1; }
.ppp-active-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.ppp-active-card-actions .btn { width: 100%; border-radius: 8px; font-size: 9px; }
.ppp-active-card-actions form { min-width: 0; }
.ppp-active-card-actions .badge { display: inline-flex; align-items: center; justify-content: center; min-height: 31px; width: 100%; font-size: 9px; }
.ppp-profile-card { min-width: 0; padding: 10px; border: 1px solid var(--rm-border); border-radius: 11px; background: var(--rm-bg); }
.ppp-profile-card-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ppp-profile-card-icon { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border: 1px solid var(--rm-border); border-radius: 9px; background: var(--rm-soft); color: var(--rm-accent); }
.ppp-profile-card-name { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.ppp-profile-card-name strong { color: var(--rm-title); font-size: 11px; overflow-wrap: anywhere; }
.ppp-profile-card-name small { color: var(--rm-muted-2); font-size: 9px; overflow-wrap: anywhere; }
.ppp-profile-default,
.ppp-profile-usage { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--rm-border); border-radius: 999px; color: var(--rm-muted-2); font-size: 8px; font-weight: 700; }
.ppp-profile-usage.used { border-color: color-mix(in srgb, var(--rm-accent) 35%, var(--rm-border)); color: var(--rm-accent); }
.ppp-profile-usage b { color: var(--rm-title); }
.ppp-profile-card-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.ppp-profile-card-details > div { display: grid; gap: 2px; min-width: 0; padding: 6px 7px; border: 1px solid var(--rm-border); border-radius: 7px; background: var(--rm-card); }
.ppp-profile-card-details span { color: var(--rm-muted-2); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.ppp-profile-card-details strong { color: var(--rm-text); font-size: 9px; overflow-wrap: anywhere; }
.ppp-profile-card-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rm-border); }
.ppp-profile-card-actions .btn { border-radius: 8px; font-size: 9px; }
.ppp-profile-card-actions form { margin-left: auto; }
.ppp-profile-edit { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--rm-border); }
.ppp-profile-edit .form-control,
.ppp-profile-edit .form-select { min-width: 0; }
.ppp-profile-form { overflow: hidden; }
.ppp-profile-form .card-body { padding: 12px; }
.ppp-profile-list .card-body { max-width: 100%; overflow-x: auto; }
.ppp-form-card,
.ppp-create-guide,
.ppp-result-card,
.ppp-import-list { overflow: hidden; }
.ppp-form-section-header,
.ppp-import-list-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ppp-form-section-header > span:last-child { display: grid; gap: 2px; }
.ppp-form-section-header strong { color: var(--rm-title); font-size: 13px; }
.ppp-form-section-header small { color: var(--rm-muted-2); font-size: 10px; font-weight: 400; }
.ppp-form-section-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rm-border);
  border-radius: 10px;
  background: var(--rm-soft);
  color: var(--rm-accent);
}
.ppp-form-section-header.success .ppp-form-section-icon { color: var(--rm-online); background: rgba(53, 208, 127, .1); }
.ppp-form-section { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--rm-border); }
.ppp-form-section-label { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; color: var(--rm-title); font-size: 11px; font-weight: 750; }
.ppp-form-section-label i { color: var(--rm-accent); }
.ppp-form-card .form-label { margin-bottom: 5px; color: var(--rm-muted); font-size: 11px; font-weight: 650; }
.ppp-form-card .form-control,
.ppp-form-card .form-select { min-height: 38px; border-radius: 9px; }
.ppp-form-card .form-text { font-size: 10px; line-height: 1.5; }
.ppp-form-submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ppp-form-submit > span { color: var(--rm-muted-2); font-size: 10px; }
.ppp-form-submit > span i { margin-right: 4px; color: var(--rm-online); }
.ppp-form-submit .btn { min-width: 180px; border-radius: 9px; font-weight: 700; }
.ppp-create-guide .card-body { padding: 13px; }
.ppp-guide-step { display: flex; align-items: flex-start; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--rm-border); }
.ppp-guide-step:last-of-type { border-bottom: 0; }
.ppp-guide-step > span { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px; background: var(--rm-soft); color: var(--rm-accent); font-size: 10px; font-weight: 750; }
.ppp-guide-step > div { display: grid; gap: 2px; min-width: 0; }
.ppp-guide-step strong { color: var(--rm-title); font-size: 11px; }
.ppp-guide-step small { color: var(--rm-muted-2); font-size: 10px; line-height: 1.45; }
.ppp-result-card .result-box { overflow-wrap: anywhere; }
.ppp-import-form { display: grid; gap: 10px; }
.ppp-import-toolbar { padding: 12px; }
.ppp-import-toolbar-top,
.ppp-import-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ppp-import-toolbar-top { justify-content: space-between; }
.ppp-import-only-new { display: flex; align-items: center; gap: 8px; margin: 0; }
.ppp-import-only-new .form-check-input { margin: 0; }
.ppp-import-only-new > span { display: grid; gap: 1px; }
.ppp-import-only-new strong { color: var(--rm-title); font-size: 11px; }
.ppp-import-only-new small { color: var(--rm-muted-2); font-size: 9px; }
.ppp-import-search { position: relative; flex: 0 1 300px; min-width: 190px; }
.ppp-import-search > i { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: var(--rm-muted-2); pointer-events: none; }
.ppp-import-search .form-control { padding-left: 31px; border-radius: 9px; }
.ppp-import-toolbar-actions { justify-content: flex-end; }
.ppp-import-toolbar-actions .btn { border-radius: 8px; font-size: 10px; }
.ppp-import-selected { margin-right: auto; color: var(--rm-muted-2); font-size: 10px; }
.ppp-import-selected b { color: var(--rm-title); }
.ppp-import-list-header { padding: 10px 13px; }
.ppp-import-router-label { margin-left: auto; color: var(--rm-muted-2); font-size: 10px; }
.ppp-import-list .table { min-width: 850px; }
.ppp-import-list .table thead th { white-space: nowrap; }
.ppp-import-cards { display: grid; gap: 8px; padding: 9px; }
.ppp-import-card { min-width: 0; padding: 10px; border: 1px solid var(--rm-border); border-radius: 11px; background: var(--rm-bg); }
.ppp-import-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ppp-import-card-top .form-check-input { flex: 0 0 auto; margin: 0; }
.ppp-import-card-check { display: grid; place-items: center; flex: 0 0 18px; height: 18px; border: 1px solid var(--rm-border); border-radius: 5px; color: var(--rm-online); font-size: 11px; }
.ppp-import-card-name { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.ppp-import-card-name strong { color: var(--rm-title); font-size: 11px; overflow-wrap: anywhere; }
.ppp-import-card-name span { color: var(--rm-muted-2); font-size: 9px; overflow-wrap: anywhere; }
.ppp-import-card-top .badge { flex: 0 0 auto; font-size: 9px; }
.ppp-import-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ppp-import-card-meta > span:not(.ppp-import-db-state) { display: grid; gap: 2px; min-width: 70px; padding: 5px 7px; border: 1px solid var(--rm-border); border-radius: 7px; }
.ppp-import-card-meta small { color: var(--rm-muted-2); font-size: 8px; text-transform: uppercase; }
.ppp-import-card-meta b { color: var(--rm-text); font-size: 9px; overflow-wrap: anywhere; }
.ppp-import-db-state { display: inline-flex; align-items: center; gap: 4px; color: #e8ae42; font-size: 9px; font-weight: 700; }
.ppp-import-db-state.known { color: var(--rm-online); }
.ppp-import-card-comment { margin-top: 7px; color: var(--rm-muted-2); font-size: 9px; overflow-wrap: anywhere; }
.ppp-import-empty,
.ppp-import-empty-state { padding: 18px 12px; color: var(--rm-muted-2); text-align: center; font-size: 11px; }
.ppp-import-empty-state { display: grid; justify-items: center; gap: 6px; }
.ppp-import-empty-state > span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rm-border); border-radius: 12px; background: var(--rm-soft); color: var(--rm-accent); font-size: 18px; }
.ppp-import-empty-state strong { color: var(--rm-title); font-size: 12px; }
.ppp-back-btn { border-radius: 9px; }

.sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--rm-border);
  font-size: 13px;
  color: var(--rm-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sidebar-footer .who { flex: 1 1 auto; min-width: 0; }
.theme-toggle {
  border: 1px solid var(--rm-border);
  background: transparent;
  color: var(--rm-muted);
  border-radius: 8px;
  padding: 3px 8px;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--rm-title); background: var(--rm-navy-2); }

/* ---------- Main ---------- */
.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--rm-navy);
  padding: 10px 14px;
  border-bottom: 1px solid var(--rm-border);
  position: sticky; top: 0; z-index: 1030;
  color: var(--rm-title);
}

.page-title { font-weight: 700; color: var(--rm-title); margin-bottom: 4px; }
.page-sub { color: var(--rm-muted); font-size: 13px; }

/* ---------- Cards ---------- */
.card {
  background: var(--rm-card);
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  box-shadow: var(--rm-shadow);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--rm-border);
  font-weight: 600;
  color: var(--rm-title);
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.stat-card {
  min-width: 0;
  padding: 14px 16px;
  text-align: left;
  overflow: hidden;
}
.stat-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.stat-icon {
  display: inline-flex;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--rm-accent);
  background: var(--rm-soft);
  font-size: 16px;
}
.stat-card .stat-value {
  margin: 10px 0 0 43px;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  color: var(--rm-title);
  line-height: 1;
}
.stat-card .stat-label {
  min-width: 0;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--rm-muted-2);
  text-transform: uppercase;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.dashboard-panel { min-width: 0; overflow: hidden; }
.dashboard-panel-header,
.dashboard-panel-title,
.dashboard-router-top,
.dashboard-router-name,
.dashboard-router-status,
.dashboard-router-meta,
.dashboard-activity-top {
  display: flex;
  align-items: center;
}
.dashboard-panel-header { justify-content: space-between; gap: 10px; padding: 12px 14px; }
.dashboard-panel-title { gap: 10px; min-width: 0; }
.dashboard-panel-icon,
.dashboard-router-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rm-border);
  border-radius: 10px;
  background: var(--rm-soft);
  color: var(--rm-accent);
}
.dashboard-panel-icon.activity { color: #20b26b; background: rgba(32, 178, 107, .1); }
.dashboard-panel-heading { color: var(--rm-title); font-size: 13px; font-weight: 700; }
.dashboard-panel-subtitle { color: var(--rm-muted-2); font-size: 10px; }
.dashboard-router-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.dashboard-router-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--rm-border);
  border-radius: 11px;
  background: var(--rm-bg);
}
.dashboard-router-top { gap: 8px; min-width: 0; }
.dashboard-router-icon { flex-basis: 30px; width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.dashboard-router-name { flex: 1 1 auto; gap: 5px; min-width: 0; flex-wrap: wrap; }
.dashboard-router-name strong { min-width: 0; color: var(--rm-title); font-size: 12px; overflow-wrap: anywhere; }
.dashboard-router-name .badge { font-size: 9px; }
.dashboard-router-status {
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  color: var(--rm-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.dashboard-router-status.online { color: var(--rm-online); }
.dashboard-router-status.offline { color: var(--rm-offline); }
.dashboard-router-status .chr-dot { width: 6px; height: 6px; }
.dashboard-router-host {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 9px 0 7px;
  color: var(--rm-muted-2);
  font-size: 11px;
}
.dashboard-router-host code { min-width: 0; overflow-wrap: anywhere; }
.dashboard-router-meta { flex-wrap: wrap; gap: 6px 12px; color: var(--rm-muted-2); font-size: 10px; }
.dashboard-router-meta span { display: inline-flex; align-items: center; gap: 4px; }
.dashboard-activity-count {
  padding: 3px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  color: var(--rm-muted);
  font-size: 10px;
  white-space: nowrap;
}
.dashboard-activity-list { padding: 4px 14px 10px; }
.dashboard-activity-item { display: flex; gap: 9px; padding: 9px 0; }
.dashboard-activity-item + .dashboard-activity-item { border-top: 1px solid var(--rm-border); }
.dashboard-activity-marker {
  display: grid;
  place-items: center;
  flex: 0 0 23px;
  height: 23px;
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 11px;
}
.dashboard-activity-content { min-width: 0; flex: 1 1 auto; }
.dashboard-activity-top { justify-content: space-between; gap: 8px; }
.dashboard-activity-action {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 3px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 7px;
  background: var(--rm-soft);
  color: var(--rm-title);
  font-size: 9px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.dashboard-activity-top time { flex: 0 0 auto; color: var(--rm-muted-2); font-size: 9px; }
.dashboard-activity-target { margin-top: 2px; color: var(--rm-muted); font-size: 11px; overflow-wrap: anywhere; }
.dashboard-activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  color: var(--rm-muted-2);
  font-size: 12px;
}
.dashboard-activity-empty i { color: var(--rm-accent); font-size: 18px; }
.stat-card.online .stat-value { color: var(--rm-online); }
.stat-card.offline .stat-value { color: var(--rm-offline); }
.stat-card.online .stat-icon { color: var(--rm-online); background: rgba(53, 208, 127, .12); }
.stat-card.offline .stat-icon { color: var(--rm-offline); background: rgba(255, 92, 92, .12); }

/* ---------- Customer list ---------- */
.billing-page-heading,
.billing-heading,
.billing-heading-actions,
.billing-summary,
.billing-filter-panel,
.billing-filter-actions,
.billing-date-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}
.billing-page-heading { justify-content: space-between; flex-wrap: wrap; }
.billing-heading { min-width: 0; }
.billing-heading-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 18px;
}
.billing-summary { flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.billing-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-card);
  color: var(--rm-muted);
  font-size: 10px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.billing-summary-chip:hover,
.billing-summary-chip.active { border-color: var(--rm-accent); color: var(--rm-title); }
.billing-chip-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--rm-muted); }
.billing-chip-dot.pppoe { background: #4388f5; }
.billing-chip-dot.hotspot { background: #18a9b5; }
.billing-chip-dot.both { background: #8793a7; }
.billing-chip-dot.online { background: #20b26b; }
.billing-chip-dot.offline { background: #ec5360; }
.billing-chip-dot.warning { background: #f0ad32; }
.billing-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
.billing-heading-actions form { margin: 0; }
.billing-add-btn { white-space: nowrap; border-radius: 9px; }
.billing-filter-panel {
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-card);
}
.billing-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  min-width: 170px;
}
.billing-search > i {
  position: absolute;
  left: 10px;
  color: var(--rm-muted);
  pointer-events: none;
}
.billing-search > input { min-width: 0; padding-left: 32px; }
.billing-search > button { position: absolute; right: 3px; }
.billing-search-inline > input { padding-right: 36px; }
.billing-select {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 130px;
  color: var(--rm-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.billing-select > span { white-space: nowrap; }
.billing-select .form-select,
.billing-select .form-control { min-width: 0; }
.billing-filter-actions { flex: 0 0 auto; }
.billing-date-filter { flex: 1 1 300px; min-width: 0; }
.billing-date-filter .billing-select { flex: 1 1 0; min-width: 0; }
.billing-list-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.billing-list-header > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.billing-list-header > span:first-child > i { color: var(--rm-accent); }
.billing-list-count {
  padding: 3px 9px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-soft);
  color: var(--rm-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.package-list-table { min-width: 700px; }
.package-list-table th,
.package-list-table td { vertical-align: middle; }
.package-list-table td:last-child { white-space: nowrap; }
.package-list-table td:last-child .btn { margin: 0 2px; }
.wa-tabs { gap: 4px; }
.wa-tabs .nav-link { border-radius: 9px 9px 0 0; }
.billing-wa-account { overflow-wrap: anywhere; }
.billing-wa-account .chr-dot { margin-right: 3px; }
.wa-connection-card .card-body { padding: 14px 18px; }
.wa-account-facts { display: grid; gap: 5px; }
.wa-account-facts > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.wa-account-facts span { color: var(--rm-muted); }
.wa-account-facts strong { overflow-wrap: anywhere; font-weight: 600; }
.wa-message-card .card-header { padding: 10px 12px; }
.wa-message-search { width: min(100%, 290px); }
.wa-message-filters { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--rm-border); }
.wa-message-table { min-width: 860px; }
.wa-message-table th { white-space: nowrap; color: var(--rm-muted); font-size: 12px; }
.wa-message-table td { font-size: 13px; }
.wa-select-col { width: 36px; }
.wa-message-preview { max-width: 360px; }
.wa-message-open {
  display: block;
  max-width: 360px;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rm-text);
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-message-open:hover,
.wa-message-open:focus-visible { color: var(--bs-info); text-decoration: underline; }
.wa-message-modal { background: var(--rm-card); color: var(--rm-text); border: 1px solid var(--rm-border); }
.wa-message-meta { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 10px; margin: 0; font-size: 13px; }
.wa-message-meta dt { color: var(--rm-muted); }
.wa-message-meta dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.wa-message-full {
  grid-column: 1 / -1;
  max-height: min(52vh, 480px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  background: var(--rm-bg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.wa-qr-modal { background: var(--rm-card); color: var(--rm-text); border: 1px solid var(--rm-border); }
.wa-qr-frame { width: 270px; height: 270px; max-width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 12px; background: #fff; border-radius: 12px; color: #475569; }
.wa-qr-frame img { max-width: 100%; height: auto; }
@media (max-width: 767.98px) {
  .wa-message-search { width: 100%; }
  .wa-connection-card .card-body { padding: 12px; }
}

.customer-page-heading,
.customer-search,
.customer-filters,
.customer-filter-group,
.customer-filter-options,
.customer-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.customer-page-heading {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.customer-page-title { display: flex; align-items: center; gap: 11px; }
.customer-page-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 18px;
}
.customer-search {
  position: relative;
  width: 100%;
  min-width: 0;
}
.customer-search > i { position: absolute; left: 12px; color: var(--rm-muted); }
.customer-search .form-control { padding-left: 34px; padding-right: 36px; }
.customer-search-clear {
  position: absolute;
  right: 12px;
  color: var(--rm-muted);
  text-decoration: none;
}
.customer-search-clear:hover { color: var(--rm-title); }
.customer-add-btn { white-space: nowrap; border-radius: 9px; }
.customer-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.customer-stat-card {
  position: relative;
  min-width: 0;
  min-height: 62px;
  padding: 8px 10px 7px 45px;
  overflow: hidden;
}
.customer-stat-icon {
  position: absolute;
  top: 10px;
  left: 9px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 14px;
}
.customer-stat-value {
  color: var(--rm-title);
  font-size: clamp(18px, 1.65vw, 22px);
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.customer-stat-label {
  margin-top: 2px;
  color: var(--rm-muted-2);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}
.customer-stat-revenue .customer-stat-value { font-size: clamp(17px, 1.6vw, 22px); }
.customer-stat-danger .customer-stat-icon { color: var(--rm-offline); background: rgba(255, 92, 92, .12); }
.customer-stat-danger .customer-stat-value { color: var(--rm-offline); }
.customer-filters {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(310px, 1.5fr) minmax(190px, .8fr);
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-card);
}
.customer-filter-group { min-width: 0; align-items: center; gap: 8px; }
.customer-filter-label {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  color: var(--rm-muted-2);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.customer-filter-options { min-width: 0; flex-wrap: wrap; gap: 6px; }
.customer-unlinked-toggle {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-navy-2);
  color: var(--rm-nav-text);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.customer-unlinked-toggle:hover {
  border-color: var(--rm-accent);
  color: var(--rm-title);
}
.customer-unlinked-toggle.active {
  border-color: rgba(255, 184, 77, .55);
  background: rgba(255, 184, 77, .12);
  color: var(--rm-title);
}
.customer-unlinked-icon {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--rm-soft);
  color: var(--rm-accent);
}
.customer-unlinked-toggle.active .customer-unlinked-icon {
  background: rgba(255, 184, 77, .2);
  color: #ffb84d;
}
.customer-unlinked-count {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(126, 144, 196, .16);
  color: var(--rm-muted-2);
  text-align: center;
  font-size: 10px;
  font-weight: 800;
}
.customer-unlinked-toggle.active .customer-unlinked-count {
  background: rgba(255, 184, 77, .2);
  color: #ffb84d;
}
.customer-server-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.customer-server-filter > i { display: none; flex: 0 0 auto; color: var(--rm-accent); }
.customer-server-filter .form-select { min-width: 0; }
.customer-compact-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.customer-compact-filter > i { display: none; flex: 0 0 auto; color: var(--rm-accent); }
.customer-compact-filter .form-select { min-width: 0; }
.customer-sort {
  justify-content: flex-end;
}
.customer-sort .customer-filter-label { flex-basis: auto; }
.customer-sort-filter { max-width: 150px; }
.customer-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
}
.customer-list-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.customer-list-title > i { color: var(--rm-accent); }
.customer-list-count {
  padding: 3px 9px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-soft);
  color: var(--rm-muted);
  font-size: 11px;
  font-weight: 700;
}
.invoice-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.invoice-stat-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 84px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 14px;
  overflow: hidden;
}
.invoice-stat-card::after {
  position: absolute;
  top: -26px;
  right: -17px;
  width: 75px;
  height: 130px;
  border-radius: 50%;
  background: currentColor;
  content: '';
  opacity: .08;
  transform: rotate(35deg);
}
.invoice-stat-card > span { color: var(--rm-muted-2); font-size: 12px; }
.invoice-stat-card > strong { color: var(--rm-title); font-size: 21px; line-height: 1.15; }
.invoice-stat-card > small { color: var(--rm-text); font-size: 12px; }
.invoice-stat-unpaid { color: #e8ae42; }
.invoice-stat-overdue { color: var(--rm-offline); }
.invoice-stat-paid { color: var(--rm-online); }
.invoice-stat-month { color: var(--rm-accent); }
.invoice-table { min-width: 1050px; font-size: 12px; }
.invoice-table thead th {
  padding: 9px 8px;
  font-size: 10px;
  white-space: nowrap;
}
.invoice-table > :not(caption) > * > * { padding: 7px 8px; }
.invoice-main-row > td:first-child { width: 76px; }
.invoice-expand-button {
  padding: 3px 6px;
  color: var(--rm-text);
  text-decoration: none;
}
.invoice-expand-button[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.invoice-expand-button .bi-chevron-down { display: inline-block; transition: transform .15s ease; }
.invoice-pay-icon { padding: 3px 6px; line-height: 1; }
.invoice-address { max-width: 185px; }
.invoice-detail-panel { padding: 10px 14px 12px; background: var(--rm-soft); }
.invoice-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.invoice-line-table { min-width: 780px; font-size: 11px; }
.invoice-line-table thead th { color: var(--rm-muted-2); font-size: 10px; white-space: nowrap; }
.invoice-pay-form { max-width: 760px; }
.invoice-reminder-icon {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 28px;
}
.customer-mobile-card { height: 100%; }
.customer-mobile-card .card-body { padding: 12px; }
.customer-mobile-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 14px;
  font-size: 12px;
}
.customer-mobile-details > div { min-width: 0; overflow-wrap: anywhere; }
.customer-mobile-details .page-sub { display: block; margin-bottom: 3px; font-size: 10px; }
.customer-mobile-payment {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rm-border);
  border-radius: 10px;
  background: var(--rm-soft);
}
.customer-mobile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
}
.customer-table { font-size: 12px; }
.table.customer-table thead th {
  padding: 8px 9px;
  font-size: 10px;
  letter-spacing: .3px;
  white-space: nowrap;
}
.table.customer-table > :not(caption) > * > * {
  padding: 7px 9px;
  line-height: 1.25;
}
.customer-table .badge { padding: .3em .5em; font-size: 9px; }
.customer-table .small { font-size: 10px !important; }
.customer-payment-cell,
.customer-bill-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
}
.customer-bill-hint { white-space: nowrap; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--rm-text); color: var(--rm-text); }
.table > :not(caption) > * > * {
  background: transparent;
  border-bottom-color: var(--rm-border);
  color: var(--rm-text);
}
.table thead th {
  font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--rm-muted-2); border-bottom: 1px solid var(--rm-border);
}
.table thead th[data-sort-type] { cursor: pointer; user-select: none; white-space: nowrap; }
.table thead th[data-sort-type]:hover { color: var(--rm-title); background: var(--rm-soft); }
.table thead th .sort-ind { color: var(--rm-accent); font-weight: 800; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: var(--rm-input-bg);
  border: 1px solid var(--rm-border);
  color: var(--rm-input-text);
}
.form-control:focus, .form-select:focus {
  background: var(--rm-input-bg);
  border-color: var(--rm-accent);
  color: var(--rm-input-text);
  box-shadow: 0 0 0 .2rem var(--rm-soft);
}
.form-control[readonly] { background: var(--rm-readonly-bg); color: var(--rm-muted-2); }
.form-control::placeholder, .form-select::placeholder { color: var(--rm-muted); opacity: .8; }

/* Judul kelompok field di dalam satu form */
.form-section {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rm-nav-group);
  padding-bottom: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rm-border);
}

.btn-primary { background: var(--rm-accent); border-color: var(--rm-accent); }
.btn-primary:hover { background: #1f56d6; border-color: #1f56d6; }

/* Tombol "outline light" dipakai di seluruh UI; di tema light harus tetap terbaca */
[data-bs-theme="light"] .btn-outline-light {
  color: var(--rm-title);
  border-color: var(--rm-border);
  background: var(--rm-card);
}
[data-bs-theme="light"] .btn-outline-light:hover,
[data-bs-theme="light"] .btn-outline-light:focus {
  background: var(--rm-navy-2);
  border-color: var(--rm-accent);
  color: var(--rm-accent);
}
[data-bs-theme="light"] .text-white { color: var(--rm-title) !important; }

/* ---------- Misc ---------- */
.chr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.chr-dot.online { background: var(--rm-online); box-shadow: 0 0 8px var(--rm-online); }
.chr-dot.offline { background: var(--rm-offline); box-shadow: 0 0 8px var(--rm-offline); }
.chr-dot.idle { background: var(--rm-muted-2); }

/* Pemilih router: satu baris yang bisa digeser, jadi 100 server pun tidak menumpuk ke bawah */
.router-pills {
  display: flex; flex-wrap: nowrap; gap: 6px; align-items: center;
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin;
}
.router-pills > .btn { flex: 0 0 auto; }

.script-box {
  background: var(--rm-script-bg);
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  padding: 14px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  color: var(--rm-script-text);
  white-space: pre-wrap;
  word-break: break-all;
}

.modal-content { background: var(--rm-card); border: 1px solid var(--rm-border); color: var(--rm-text); }

.app-confirm-modal .modal-content {
  border: 1px solid color-mix(in srgb, var(--rm-accent) 32%, var(--rm-border));
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -15%, color-mix(in srgb, var(--rm-accent) 22%, transparent), transparent 58%),
    var(--rm-card);
}
.app-confirm-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid color-mix(in srgb, var(--rm-accent) 38%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--rm-accent) 15%, transparent);
  color: var(--rm-accent);
  font-size: 28px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--rm-accent) 14%, transparent);
}
.app-confirm-icon.tone-info {
  border-color: color-mix(in srgb, #26c6da 38%, transparent);
  background: color-mix(in srgb, #26c6da 14%, transparent);
  color: #26c6da;
  box-shadow: 0 10px 28px color-mix(in srgb, #26c6da 14%, transparent);
}
.app-confirm-subject {
  display: inline-block;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-input-bg);
  color: var(--rm-text);
  font-family: Consolas, "Courier New", monospace;
  font-size: .9rem;
  overflow-wrap: anywhere;
}
.app-confirm-modal .modal-dialog { max-width: 440px; }
.app-confirm-modal .btn { border-radius: 10px; }

.result-box {
  border: 1px solid var(--rm-border);
  background: var(--rm-input-bg);
  border-radius: 10px;
  padding: 20px;
  font-family: Consolas, monospace;
  color: var(--rm-text);
}

.ppp-active-cards { display: grid; gap: .65rem; }
.ppp-active-card {
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--rm-navy-2), var(--rm-card));
  box-shadow: var(--rm-shadow);
}
.ppp-active-card-main { min-width: 0; }
.ppp-active-card-name {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: var(--rm-title);
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ppp-active-card-name i { flex: 0 0 auto; color: var(--rm-accent); }
.ppp-active-card-ip {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .45rem;
  color: var(--rm-muted-2);
  font-size: .78rem;
}
.ppp-active-card-ip code { overflow-wrap: anywhere; }
.ppp-active-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .8rem;
}
.ppp-active-card-actions .btn { width: 100%; }
.ppp-active-card-actions form { min-width: 0; }
.ppp-active-card-actions .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  width: 100%;
}

.device-page-heading,
.device-page-title,
.device-page-summary,
.device-realtime-copy,
.device-list-header,
.device-list-title {
  display: flex;
  align-items: center;
}
.device-page-heading { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.device-page-title { gap: 11px; min-width: 0; }
.device-page-icon,
.device-realtime-icon,
.device-list-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 17px;
}
.device-page-summary { flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.device-page-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-card);
  color: var(--rm-muted);
  font-size: 10px;
  white-space: nowrap;
}
.device-page-summary b { color: var(--rm-title); }
.device-summary-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--rm-muted-2); }
.device-summary-dot.online { background: var(--rm-online); }
.device-summary-dot.realtime { background: var(--rm-accent); }
.device-realtime-summary.on { color: var(--rm-online); }
.device-realtime-summary.partial { color: #e8ae42; }
.device-offline-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 620px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--rm-offline) 35%, var(--rm-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--rm-offline) 8%, var(--rm-card));
  color: var(--rm-danger);
  font-size: 11px;
}
.device-offline-alert i { flex: 0 0 auto; margin-top: 1px; }
.device-realtime-card .card-body { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; }
.device-realtime-copy { gap: 10px; min-width: 0; }
.device-realtime-icon { flex-basis: 34px; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
.device-realtime-title { color: var(--rm-title); font-size: 12px; font-weight: 700; }
.device-realtime-description { margin-top: 2px; color: var(--rm-muted-2); font-size: 10px; }
.device-realtime-state {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 9px;
  color: var(--rm-muted-2);
  font-size: 10px;
  font-weight: 700;
}
.device-realtime-state.on { border-color: color-mix(in srgb, var(--rm-online) 35%, var(--rm-border)); color: var(--rm-online); }
.device-realtime-state.partial { border-color: color-mix(in srgb, #e8ae42 35%, var(--rm-border)); color: #e8ae42; }
.device-realtime-state small { padding-left: 5px; border-left: 1px solid var(--rm-border); color: var(--rm-muted-2); font-size: 9px; font-weight: 500; }
.device-realtime-card .realtime-control-actions { flex: 0 0 auto; }
.device-realtime-card .realtime-control-actions .btn { border-radius: 8px; font-size: 10px; font-weight: 700; }
.device-list-header { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.device-list-title { gap: 9px; min-width: 0; }
.device-list-title > div { display: grid; gap: 2px; min-width: 0; }
.device-list-title strong { color: var(--rm-title); font-size: 12px; }
.device-list-title small { color: var(--rm-muted-2); font-size: 10px; font-weight: 400; }
.device-list-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.device-list-total {
  min-width: 25px;
  padding: 2px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-soft);
  color: var(--rm-muted);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
}
.device-list-header .btn { border-radius: 8px; }
.device-list-header .btn i { margin-right: 4px; }
.device-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem;
  border-bottom: 1px solid var(--rm-border);
}
.device-search-wrap > i {
  position: absolute;
  left: 1.45rem;
  color: var(--rm-muted-2);
  pointer-events: none;
}
.device-search-wrap .form-control {
  min-width: 0;
  padding-left: 2.15rem;
  border-radius: 10px;
}
.device-search-count {
  flex: 0 0 auto;
  color: var(--rm-muted-2);
  font-size: .78rem;
  white-space: nowrap;
}
.device-search-empty {
  padding: 1rem;
  color: var(--rm-muted-2);
  text-align: center;
}
.realtime-control-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.realtime-control-actions form { margin: 0; }
.device-cards { display: grid; gap: .65rem; }
.device-card {
  min-width: 0;
  padding: .7rem .75rem;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-bg);
  box-shadow: var(--rm-shadow);
}
.device-card-heading {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.device-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: .9rem;
}
.device-card-name-wrap { min-width: 0; }
.device-card-name {
  color: var(--rm-title);
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.device-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.device-card-server { color: var(--rm-muted-2); font-size: .7rem; }
.device-card-presence { display: inline-flex; align-items: center; gap: 4px; color: var(--rm-online); font-size: .65rem; font-weight: 700; }
.device-card-presence i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
.device-card-heading .device-remote { flex: 0 0 auto; margin-left: auto; border-radius: 8px; padding: 5px 8px; font-size: .68rem; }
.device-card-heading .device-remote i { margin-right: 4px; }
.device-server-cell { color: var(--rm-muted); font-size: 11px; }
.device-server-cell i { margin-right: 4px; color: var(--rm-accent); }

/* ---------- System pages ---------- */
.system-page-heading,
.system-page-title,
.system-page-summary,
.system-page-controls,
.system-list-header,
.system-list-title,
.system-section-header {
  display: flex;
  align-items: center;
}
.system-page-heading { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.system-page-title { gap: 11px; min-width: 0; }
.system-page-icon,
.system-section-icon,
.system-mobile-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 17px;
}
.system-page-summary { flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.system-page-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-card);
  color: var(--rm-muted);
  font-size: 10px;
  white-space: nowrap;
}
.system-page-summary b { color: var(--rm-title); }
.system-page-summary .system-summary-warning { color: #e8ae42; }
.system-page-action { border-radius: 9px; font-weight: 650; }
.system-page-controls { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.system-page-controls form { min-width: min(250px, 100%); }
.system-page-controls .form-control,
.system-page-controls .form-select { min-height: 34px; border-radius: 9px; }
.system-page-controls .system-status-filter { width: auto; }
.system-list-card { overflow: hidden; }
.system-list-header { justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 11px 14px; }
.system-list-title { gap: 8px; min-width: 0; color: var(--rm-title); font-size: 12px; font-weight: 700; }
.system-list-title > i { color: var(--rm-accent); }
.system-list-count {
  min-width: 24px;
  padding: 2px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-soft);
  color: var(--rm-muted);
  text-align: center;
  font-size: 10px;
}
.system-list-hint { color: var(--rm-muted-2); font-size: 10px; font-weight: 400; }
.system-list-card > .card-body { max-width: 100%; overflow-x: auto; }
.system-list-card .table { min-width: 620px; }
.system-list-card .table thead th { white-space: nowrap; }
.system-page-controls + .system-list-card { margin-top: 4px; }
.system-mobile-list { display: grid; gap: 8px; padding: 9px; }
.system-mobile-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--rm-border);
  border-radius: 11px;
  background: var(--rm-bg);
}
.system-mobile-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.system-mobile-card-icon { flex-basis: 34px; width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.system-mobile-card-main { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.system-mobile-card-main strong { color: var(--rm-title); font-size: 12px; overflow-wrap: anywhere; }
.system-mobile-card-main > span { color: var(--rm-muted-2); font-size: 10px; overflow-wrap: anywhere; }
.system-mobile-card-top > .badge { flex: 0 0 auto; font-size: 9px; }
.system-mobile-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.system-mobile-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 7px;
  color: var(--rm-muted);
  font-size: 9px;
}
.system-mobile-card-meta i { color: var(--rm-accent); }
.system-mobile-card-email { margin-top: 8px; color: var(--rm-muted-2); font-size: 10px; overflow-wrap: anywhere; }
.system-mobile-card-email i { margin-right: 4px; }
.system-mobile-card-actions { display: flex; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--rm-border); }
.system-mobile-card-actions .btn { flex: 1 1 auto; border-radius: 8px; font-size: 10px; }
.system-empty { padding: 18px 10px; color: var(--rm-muted-2); text-align: center; font-size: 12px; }
.system-section-header { gap: 9px; }
.system-section-header > span:last-child { display: grid; gap: 2px; }
.system-section-header strong { color: var(--rm-title); font-size: 12px; }
.system-section-header small { color: var(--rm-muted-2); font-size: 10px; font-weight: 400; }
.system-section-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.system-settings-card,
.system-subscription-card { overflow: hidden; }
.system-settings-card .card-body,
.system-subscription-card .card-body { padding: 14px; }
.system-subscription-card .card-body { max-width: 100%; overflow-x: auto; }
.system-setting-row { padding-bottom: 12px; border-bottom: 1px solid var(--rm-border); }
.system-setting-row:last-of-type { border-bottom: 0; }
.system-settings-grid .table { min-width: 520px; }
.system-subscription-grid .table-responsive .table { min-width: 620px; }
.system-settings-grid .table-responsive,
.system-subscription-grid .table-responsive { max-width: 100%; }
.system-subscription-table { width: 100%; min-width: 0 !important; border: 1px solid var(--rm-border); border-radius: 10px; overflow: hidden; }
.system-license-grid > [class*="col-"] > .card { overflow: hidden; }
.system-license-grid .card-body { max-width: 100%; overflow-x: auto; }
.system-license-grid .table { min-width: 620px; }

/* ---------- Login ---------- */
.server-page-heading,
.server-page-title,
.server-page-summary,
.server-list-header,
.server-list-title,
.server-mobile-top,
.server-mobile-name,
.server-mobile-status,
.server-mobile-footer,
.server-monitor-state {
  display: flex;
  align-items: center;
}
.server-page-heading { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.server-page-title { gap: 11px; min-width: 0; }
.server-page-icon,
.server-mobile-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 18px;
}
.server-page-summary { flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.server-page-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-card);
  color: var(--rm-muted);
  font-size: 10px;
  white-space: nowrap;
}
.server-page-summary b { color: var(--rm-title); }
.server-summary-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--rm-muted-2); }
.server-summary-dot.online { background: #20b26b; }
.server-summary-dot.realtime { background: #4388f5; }
.server-summary-dot.disabled { background: #ec5360; }
.server-add-btn { white-space: nowrap; border-radius: 9px; }
.server-list-card { overflow: hidden; }
.server-list-header { justify-content: space-between; flex-wrap: wrap; gap: 9px; }
.server-list-title { gap: 8px; font-size: 13px; font-weight: 650; }
.server-list-title > i { color: var(--rm-accent); }
.server-list-count {
  min-width: 24px;
  padding: 2px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-soft);
  color: var(--rm-muted);
  text-align: center;
  font-size: 10px;
}
.server-search { position: relative; width: min(320px, 100%); }
.server-search > i { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: var(--rm-muted); pointer-events: none; }
.server-search .form-control { padding-left: 31px; }
.server-mobile-list { display: grid; gap: 9px; padding: 10px; }
.server-mobile-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-bg);
}
.server-mobile-top { gap: 8px; min-width: 0; }
.server-mobile-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.server-mobile-name { flex: 1 1 auto; flex-wrap: wrap; gap: 5px; min-width: 0; }
.server-mobile-name strong { color: var(--rm-title); font-size: 13px; overflow-wrap: anywhere; }
.server-mobile-name .badge { font-size: 9px; }
.server-mobile-status {
  flex: 0 0 auto;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  color: var(--rm-muted);
  font-size: 9px;
  font-weight: 700;
}
.server-mobile-status.active { color: var(--rm-online); }
.server-mobile-status.disabled { color: var(--rm-muted-2); }
.server-mobile-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
  margin: 11px 0;
}
.server-mobile-details > div { display: grid; gap: 2px; min-width: 0; }
.server-mobile-details > div > span { color: var(--rm-muted-2); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.server-mobile-details code,
.server-mobile-details strong { min-width: 0; color: var(--rm-text); font-size: 11px; overflow-wrap: anywhere; }
.server-mobile-footer { justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 9px; border-top: 1px solid var(--rm-border); }
.server-monitor-state { gap: 5px; min-width: 0; color: var(--rm-muted); font-size: 10px; }
.server-monitor-state.realtime { color: var(--rm-online); }
.server-monitor-state.saving { color: var(--rm-muted-2); }
.server-mobile-actions { display: flex; gap: 5px; }
.server-mobile-actions form { margin: 0; }
.server-mobile-actions .btn { min-width: 32px; }
.server-empty { padding: 18px 10px; color: var(--rm-muted-2); text-align: center; font-size: 12px; }
.vpn-page-heading { margin-bottom: 14px; }
.vpn-page-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.vpn-page-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-card);
  color: var(--rm-muted);
  font-size: 10px;
  white-space: nowrap;
}
.vpn-page-summary b { color: var(--rm-title); }
.vpn-limit-summary { color: var(--rm-muted-2) !important; }
.vpn-list-card { overflow: hidden; }
.vpn-list-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; }
.vpn-search { width: min(320px, 100%); }
.vpn-service-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 7px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .3px;
}
.vpn-mobile-list { display: grid; gap: 9px; padding: 9px; }
.vpn-mobile-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-bg);
}
.vpn-mobile-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vpn-mobile-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rm-border);
  border-radius: 9px;
  background: var(--rm-soft);
  color: var(--rm-accent);
}
.vpn-mobile-account { display: flex; align-items: center; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; min-width: 0; }
.vpn-mobile-account strong { color: var(--rm-title); font-size: 12px; overflow-wrap: anywhere; }
.vpn-mobile-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.vpn-mobile-status.online { color: var(--rm-online); }
.vpn-mobile-status.offline { color: var(--rm-muted-2); }
.vpn-mobile-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
  margin: 11px 0;
}
.vpn-mobile-info > div { display: grid; gap: 2px; min-width: 0; }
.vpn-mobile-info > div > span { color: var(--rm-muted-2); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.vpn-mobile-info code,
.vpn-mobile-info strong { min-width: 0; color: var(--rm-text); font-size: 11px; overflow-wrap: anywhere; }
.vpn-mobile-info .vpn-ip-warning code { color: var(--rm-offline); }
.vpn-mobile-actions { display: flex; gap: 6px; padding-top: 9px; border-top: 1px solid var(--rm-border); }
.vpn-mobile-actions form { margin: 0; }
.vpn-mobile-actions .btn:first-child { flex: 1 1 auto; }
.vpn-mobile-config { margin-top: 9px; }
.vpn-empty { padding: 18px 10px; color: var(--rm-muted-2); text-align: center; font-size: 12px; }
.vpn-create-card { overflow: hidden; }
.vpn-create-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, .7fr) auto; align-items: end; gap: 10px; }
.vpn-create-form > div { min-width: 0; }
.vpn-create-form .form-label { margin-bottom: 4px; color: var(--rm-muted); }
.vpn-create-submit .btn { white-space: nowrap; }
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background:
    radial-gradient(ellipse at 12% 12%, var(--rm-login-1) 0, transparent 38%),
    radial-gradient(ellipse at 88% 90%, var(--rm-soft) 0, transparent 34%),
    var(--rm-bg);
}
.auth-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  width: min(100%, 900px);
  overflow: hidden;
  border: 1px solid var(--rm-border);
  border-radius: 22px;
  background: var(--rm-card);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}
.auth-register-shell { width: min(100%, 1080px); grid-template-columns: minmax(270px, .75fr) minmax(0, 1.25fr); }
.auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 34px;
  background: linear-gradient(150deg, #163779 0%, #102653 54%, #0c1a39 100%);
  color: #fff;
}
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 750; letter-spacing: .03em; }
.auth-brand-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 18px;
}
.auth-aside-copy { position: relative; z-index: 1; margin: auto 0; padding: 52px 0 38px; }
.auth-eyebrow { color: var(--rm-accent); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.auth-aside .auth-eyebrow { color: #9ebcff; }
.auth-aside-copy h1 { max-width: 320px; margin: 11px 0; color: #fff; font-size: clamp(26px, 3vw, 36px); font-weight: 750; letter-spacing: -.035em; line-height: 1.12; }
.auth-aside-copy p { max-width: 330px; margin: 0; color: rgba(235,242,255,.72); font-size: 12px; line-height: 1.75; }
.auth-aside-note { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 9px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.15); color: rgba(235,242,255,.72); font-size: 10px; line-height: 1.6; }
.auth-aside-note i { color: #8eb3ff; font-size: 14px; }
.auth-decoration { position: absolute; width: 230px; height: 230px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.auth-decoration-one { top: 22%; right: -155px; box-shadow: 0 0 0 24px rgba(255,255,255,.025), 0 0 0 49px rgba(255,255,255,.02); }
.auth-decoration-two { bottom: -180px; left: -135px; width: 290px; height: 290px; background: rgba(60,114,221,.09); }
.auth-panel { min-width: 0; padding: 42px clamp(24px, 5vw, 54px); background: var(--rm-card); }
.auth-panel-heading { margin-bottom: 25px; }
.auth-panel-heading h2 { margin: 7px 0 5px; color: var(--rm-title); font-size: 24px; font-weight: 750; letter-spacing: -.03em; }
.auth-panel-heading p { margin: 0; color: var(--rm-muted-2); font-size: 11px; }
.auth-mobile-brand { display: none; }
.auth-form { display: grid; gap: 16px; }
.auth-field { display: grid; gap: 6px; min-width: 0; }
.auth-field .form-label { margin: 0; color: var(--rm-text); font-size: 10px; font-weight: 650; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > i { position: absolute; top: 50%; left: 12px; z-index: 2; color: var(--rm-muted); font-size: 13px; transform: translateY(-50%); pointer-events: none; }
.auth-input-wrap .form-control { padding-left: 36px; }
.auth-form .form-control { min-height: 42px; border-color: var(--rm-border); border-radius: 9px; background-color: var(--rm-input-bg); color: var(--rm-input-text); font-size: 11px; }
.auth-form .form-control:focus { border-color: var(--rm-accent); box-shadow: 0 0 0 3px var(--rm-soft); }
.auth-form textarea.form-control { min-height: 62px; resize: vertical; }
.auth-submit { min-height: 42px; border-radius: 9px; font-size: 11px; font-weight: 700; }
.auth-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; font-size: 10px; }
.auth-alert > i { flex: 0 0 auto; margin-top: 1px; }
.auth-panel-footer { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rm-border); color: var(--rm-muted-2); text-align: center; font-size: 10px; }
.auth-panel-footer a { margin-left: 3px; color: var(--rm-accent); font-weight: 700; text-decoration: none; }
.auth-panel-footer a:hover { text-decoration: underline; }
.auth-register-panel { padding-top: 30px; padding-bottom: 28px; }
.auth-register-panel .auth-panel-heading { margin-bottom: 16px; }
.auth-register-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 13px; }
.auth-field-full { grid-column: 1 / -1; }
.auth-register-form .form-control { min-height: 38px; }
.auth-register-form .form-label { font-size: 9px; }
.auth-register-form .auth-field small { color: var(--rm-muted-2); font-size: 9px; line-height: 1.4; }
.auth-optional { margin-left: 4px; color: var(--rm-muted-2); font-size: 9px; font-weight: 400; }
.auth-section-heading { display: flex; align-items: center; gap: 7px; grid-column: 1 / -1; padding-bottom: 7px; border-bottom: 1px solid var(--rm-border); color: var(--rm-title); font-size: 10px; font-weight: 750; }
.auth-section-heading i { color: var(--rm-accent); font-size: 12px; }
.auth-section-break { margin-top: 5px; }
.auth-steps { position: relative; z-index: 1; display: grid; gap: 16px; margin-bottom: 26px; }
.auth-steps > div { display: flex; align-items: flex-start; gap: 10px; }
.auth-steps > div > span { display: grid; place-items: center; flex: 0 0 23px; width: 23px; height: 23px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #b6ccff; font-size: 9px; font-weight: 700; }
.auth-steps p { display: grid; gap: 2px; margin: 0; }
.auth-steps strong { color: #fff; font-size: 10px; }
.auth-steps small { color: rgba(235,242,255,.65); font-size: 9px; line-height: 1.5; }

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .login-page { align-items: flex-start; padding: 16px 12px; }
  .auth-shell,
  .auth-register-shell { grid-template-columns: minmax(0, 1fr); width: min(100%, 520px); border-radius: 17px; }
  .auth-aside { display: none; }
  .auth-panel { padding: 25px 22px; }
  .auth-mobile-brand { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px; color: var(--rm-title); font-size: 11px; font-weight: 750; }
  .auth-mobile-brand i { color: var(--rm-accent); font-size: 15px; }
  .auth-panel-heading { margin-bottom: 20px; }
  .auth-panel-heading h2 { font-size: 22px; }
  .auth-register-panel { padding-top: 22px; }
  .auth-register-panel .auth-panel-heading { margin-bottom: 15px; }
  .auth-register-form { gap: 10px; }
}
@media (max-width: 420px) {
  .login-page { padding: 10px; }
  .auth-panel { padding: 22px 17px; }
  .auth-register-form { grid-template-columns: minmax(0, 1fr); }
  .auth-field-full,
  .auth-section-heading { grid-column: auto; }
  .auth-panel-footer { line-height: 1.7; }
}
@media (min-width: 768px) {
  .auth-login-shell { min-height: 530px; }
  .auth-register-shell { min-height: 700px; }
}
@media (max-width: 767.98px) {
  .dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 12px; }
  .stat-card .stat-value { margin-left: 43px; font-size: 26px; }
  .device-page-heading { align-items: flex-start; }
  .device-page-icon { flex-basis: 36px; width: 36px; height: 36px; }
  .device-realtime-card .card-body { flex-wrap: wrap; }
  .device-realtime-copy { flex: 1 1 100%; }
  .device-realtime-card .realtime-control-actions { width: 100%; }
  .device-list-header { align-items: flex-start; }
  .device-list-header > .btn { flex: 0 0 auto; }
  .device-search-wrap { flex-wrap: wrap; }
  .device-search-wrap .form-control { flex: 1 1 100%; width: 100%; }
  .device-search-count { margin-left: auto; }
  .system-page-heading { align-items: flex-start; }
  .system-page-icon { flex-basis: 36px; width: 36px; height: 36px; }
  .system-page-controls { width: 100%; justify-content: flex-start; }
  .system-page-controls form { flex: 1 1 100%; }
  .system-page-controls .system-status-filter { flex: 1 1 100%; width: 100%; }
  .system-list-header { align-items: flex-start; padding: 10px 12px; }
  .system-list-hint { flex: 1 1 100%; }
  .system-settings-card .card-body,
  .system-subscription-card .card-body { padding: 11px; }
  .system-setting-row { gap: 3px; }
  .stat-card .stat-label { font-size: 10px; }
  .billing-page-heading { align-items: flex-start; }
  .billing-heading { align-items: flex-start; }
  .billing-heading-icon { flex-basis: 36px; height: 36px; }
  .billing-heading-actions { width: 100%; justify-content: flex-start; }
  .billing-heading-actions > * { flex: 1 1 auto; }
  .billing-heading-actions form .btn { width: 100%; }
  .billing-summary { max-width: calc(100vw - 76px); }
  .billing-filter-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 9px; }
  .billing-search { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .billing-select { display: grid; grid-template-columns: 1fr; align-content: start; gap: 4px; min-width: 0; }
  .billing-filter-panel > .billing-select { width: 100%; }
  .billing-date-filter { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .billing-date-filter .billing-select { display: grid; }
  .billing-filter-actions { grid-column: 1 / -1; }
  .billing-filter-actions > .btn { flex: 1 1 auto; }
  .billing-list-header { padding: 10px 12px; }
  .wa-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wa-tabs .nav-item { min-width: 0; }
  .wa-tabs .nav-link { display: flex; justify-content: center; gap: 4px; padding: 8px 5px; font-size: 12px; white-space: nowrap; }
  .customer-page-heading { grid-template-columns: minmax(0, 1fr) auto; }
  .customer-page-icon { flex-basis: 36px; height: 36px; }
  .customer-add-btn { padding: 7px 9px; font-size: 11px; }
  .customer-search { grid-column: 1 / -1; grid-row: 2; }
  .customer-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .customer-stat-card { min-height: 74px; padding: 10px 10px 8px 48px; }
  .customer-stat-icon { top: 11px; left: 9px; width: 30px; height: 30px; }
  .customer-stat-value { font-size: 20px; }
  .customer-stat-label { font-size: 10px; }
  .customer-stat-revenue { grid-column: 1 / -1; min-height: 58px; }
  .customer-stat-revenue .customer-stat-icon { top: 10px; }
  .customer-stat-revenue .customer-stat-value { font-size: 19px; }
  .customer-stat-revenue .customer-stat-label { margin-top: 2px; }
  .invoice-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .invoice-stat-card { min-height: 74px; padding: 8px 10px; }
  .invoice-stat-card > span { font-size: 10px; }
  .invoice-stat-card > strong { font-size: 18px; }
  .invoice-stat-card > small { font-size: 11px; }
  .invoice-detail-panel { padding: 9px; }
  .customer-filters { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 9px 10px; }
  .customer-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
  .customer-filter-group > .customer-filter-label { flex: 0 0 48px; }
  .customer-filter-options { gap: 6px; }
  .customer-server-filter { flex: 1 1 100%; width: 100%; }
  .customer-filter-group:first-child .customer-server-filter { flex: 1 1 150px; }
  .customer-filter-group:nth-child(2) .customer-compact-filter { flex: 1 1 120px; width: auto; }
  .customer-unlinked-toggle { flex: 0 1 auto; gap: 5px; padding-right: 7px; font-size: 11px; }
  .customer-sort { justify-content: flex-start; padding-top: 8px; border-top: 1px solid var(--rm-border); }
  .customer-sort-filter { flex: 0 1 180px; max-width: 180px; }
  .customer-mobile-details { gap: 8px 10px; }
  .customer-mobile-payment { margin-top: 10px; padding: 8px 10px; }
  .customer-mobile-actions { margin-top: 10px; }
  .server-page-heading { align-items: flex-start; }
  .server-page-icon { flex-basis: 36px; height: 36px; }
  .server-add-btn { align-self: flex-end; }
  .server-list-header { align-items: stretch; }
  .server-search { flex: 1 1 100%; width: 100%; }
  .server-mobile-list { padding: 8px; }
  .server-mobile-card { padding: 10px; }
  .vpn-page-heading { align-items: flex-start; }
  .vpn-page-summary { max-width: calc(100vw - 76px); }
  .vpn-list-header { align-items: stretch; }
  .vpn-search { flex: 1 1 100%; width: 100%; }
  .vpn-mobile-list { padding: 8px; }
  .vpn-mobile-card { padding: 10px; }
  .vpn-create-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .vpn-create-submit { grid-column: 1 / -1; }
  .vpn-create-submit .btn { width: 100%; }

  .ppp-page-heading { align-items: flex-start; }
  .ppp-page-title { align-items: flex-start; }
  .ppp-page-icon { flex-basis: 36px; width: 36px; height: 36px; }
  .ppp-page-summary { max-width: calc(100vw - 76px); }
  .ppp-page-actions { width: 100%; justify-content: flex-start; }
  .ppp-page-actions > form { justify-content: flex-start; }
  .ppp-page-actions > .btn { flex: 1 1 auto; }
  .ppp-navigation { align-items: stretch; gap: 4px; padding: 8px 8px 0; }
  .ppp-router-selector { flex-basis: 100%; max-width: none; }
  .ppp-tabs { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .ppp-tabs .nav-item { min-width: 0; }
  .ppp-tabs .nav-link { justify-content: center; gap: 4px; padding: 7px 4px; white-space: nowrap; font-size: 10px; }
  .ppp-tabs .badge { padding: 2px 5px; }
  .ppp-content-list-header { align-items: flex-start; padding: 10px 12px; }
  .ppp-content-list-title { flex: 1 1 auto; }
  .ppp-profile-form .card-body { padding: 10px; }
  .ppp-list-toolbar { align-items: stretch; }
  .ppp-list-title { width: 100%; }
  .ppp-list-filters { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ppp-list-filters > .form-select,
  .ppp-search,
  .ppp-sort { width: 100%; min-width: 0; }
  .ppp-search { grid-column: 1 / -1; }
  .ppp-form-submit { align-items: stretch; }
  .ppp-form-submit > span { flex: 1 1 100%; }
  .ppp-form-submit .btn { width: 100%; }
  .ppp-import-toolbar-top,
  .ppp-import-toolbar-actions { align-items: stretch; }
  .ppp-import-toolbar-top { display: grid; }
  .ppp-import-search { width: 100%; min-width: 0; }
  .ppp-import-toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppp-import-selected { grid-column: 1 / -1; margin: 0; }
  .ppp-import-toolbar-actions > .d-flex { display: contents !important; }
  .ppp-import-toolbar-actions .btn { min-height: 36px; }
  .ppp-import-toolbar-actions #pickAll { grid-column: 1; }
  .ppp-import-toolbar-actions #pickNone { grid-column: 2; }
  .ppp-import-toolbar-actions > #importBtn { grid-column: 1 / -1; }
  .ppp-import-list-header { flex-wrap: wrap; }
  .ppp-import-router-label { margin-left: auto; }
  .ppp-create-guide .card-body { padding: 10px; }
  .sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .35);
  }
  .sidebar.show { transform: translateX(0); }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1035;
    border: 0;
    padding: 0;
    background: rgba(3, 10, 28, .58);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
  }
  body.sidebar-open { overflow: hidden; }
}
@media (min-width: 768px) {
  .sidebar-backdrop { display: none; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .dashboard-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-filters { grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.5fr); }
  .customer-sort { grid-column: 2; justify-content: flex-end; }
}
@media (max-width: 359.98px) {
  .dashboard-stat-grid { grid-template-columns: 1fr; }
  .stat-card .stat-value { margin-left: 43px; }
  .customer-stat-grid { grid-template-columns: 1fr; }
  .customer-mobile-details { grid-template-columns: 1fr; }
  .ppp-active-card { padding: .7rem; }
  .ppp-active-card-actions { grid-template-columns: 1fr; }
  .device-card { padding: .65rem; }
  .device-search-wrap { flex-wrap: wrap; }
  .device-search-count { margin-left: auto; }
}
@media (max-width: 575.98px) {
  .realtime-control-actions { width: 100%; }
  .realtime-control-actions form { flex: 1 1 140px; }
  .realtime-control-actions .btn { width: 100%; }
  .dashboard-router-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-panel-header { padding: 10px 12px; }
  .dashboard-panel .card-body { padding: 10px; }
  .dashboard-activity-list { padding: 2px 12px 8px !important; }
  .dashboard-activity-top { align-items: flex-start; }
  .dashboard-activity-top time { font-size: 8px; }
  .server-mobile-footer { align-items: flex-start; }
  .server-monitor-state { flex: 1 1 100%; }
  .server-mobile-actions { width: 100%; }
  .server-mobile-actions > * { flex: 1 1 0; }
  .server-mobile-actions .btn { width: 100%; }
  .vpn-mobile-actions > * { flex: 0 0 auto; }
  .vpn-mobile-actions .btn:first-child { flex: 1 1 auto; }
}

/* ---------- Port Forwarding: menu Remote ---------- */
.pf-page-heading,
.pf-page-title,
.pf-page-actions,
.pf-page-summary,
.pf-router-navigation,
.pf-list-header,
.pf-list-title {
  display: flex;
  align-items: center;
}
.pf-page-heading { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pf-page-title { gap: 11px; min-width: 0; }
.pf-page-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 18px;
}
.pf-page-summary { flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.pf-page-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-card);
  color: var(--rm-muted);
  font-size: 10px;
  white-space: nowrap;
}
.pf-page-summary b { color: var(--rm-title); }
.pf-summary-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--rm-muted-2); }
.pf-summary-dot.active { background: #20b26b; }
.pf-summary-dot.disabled { background: #8793a7; }
.pf-summary-dot.missing { background: #ec5360; }
.pf-summary-warning { color: var(--rm-offline) !important; }
.pf-page-actions { justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.pf-page-actions > .btn { white-space: nowrap; }
.pf-search { position: relative; width: min(260px, 100%); }
.pf-search > i { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: var(--rm-muted); pointer-events: none; }
.pf-search .form-control { padding-left: 31px; }
.pf-live-note {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--rm-border);
  border-radius: 9px;
  background: var(--rm-card);
  color: var(--rm-muted);
  font-size: 11px;
}
.pf-live-note > i { color: var(--rm-accent); }
.pf-router-navigation {
  flex-wrap: wrap;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-card);
}
.pf-router-navigation > span { display: inline-flex; align-items: center; gap: 6px; color: var(--rm-muted); font-size: 11px; font-weight: 700; }
.pf-router-navigation > span > i { color: var(--rm-accent); }
.pf-router-navigation .ppp-router-selector { flex: 1 1 220px; max-width: 360px; }
.pf-list-card { overflow: hidden; }
.pf-list-header { justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.pf-list-title { gap: 8px; font-size: 13px; font-weight: 650; }
.pf-list-title > i { color: var(--rm-accent); }
.pf-list-count {
  min-width: 24px;
  padding: 2px 7px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-soft);
  color: var(--rm-muted);
  text-align: center;
  font-size: 10px;
}
.pf-list-hint { color: var(--rm-muted-2); font-size: 10px; }
.pf-remote-menu {
  min-width: 250px;
  font-size: .85rem;
  z-index: 1080;
}
.pf-remote-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}
.pf-remote-menu .dropdown-item .page-sub {
  margin-left: auto;
  padding-left: .6rem;
}

/* ---------- Port Forwarding: description tersembunyi + cards responsif ---------- */
.pf-desc-slot { margin-top: 2px; }
.pf-desc-toggle { font-size: .75rem; color: var(--rm-muted-2) !important; text-decoration: none; }
.pf-desc-toggle:hover { color: var(--rm-title) !important; }
.pf-desc-text {
  display: block; margin-top: 4px; padding: 4px 8px;
  background: var(--rm-soft);
  border: 1px solid var(--rm-border); border-radius: 6px;
  color: var(--rm-text); word-break: break-all; white-space: pre-wrap;
}
.pf-cards { margin: 0; }
.pf-card { background: var(--rm-navy-2); border: 1px solid var(--rm-border); }
.pf-cards .pf-card .card-body { padding: 12px; }
.pf-card-heading,
.pf-card-name-wrap,
.pf-card-name,
.pf-card-meta,
.pf-card-actions {
  display: flex;
  align-items: center;
}
.pf-card-heading { justify-content: space-between; gap: 8px; }
.pf-card-name-wrap { min-width: 0; gap: 8px; }
.pf-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  height: 31px;
  border: 1px solid var(--rm-border);
  border-radius: 9px;
  background: var(--rm-soft);
  color: var(--rm-accent);
}
.pf-card-name { align-items: flex-start; flex-direction: column; min-width: 0; }
.pf-card-name strong { color: var(--rm-title); font-size: 12px; overflow-wrap: anywhere; }
.pf-card-name > span { color: var(--rm-muted-2); font-size: 10px; }
.pf-card-status { flex: 0 0 auto; text-align: right; }
.pf-card-status .badge { font-size: 9px; }
.pf-card-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 9px;
  border: 1px solid var(--rm-border);
  border-radius: 10px;
  background: var(--rm-bg);
}
.pf-card-route > div { display: grid; gap: 3px; min-width: 0; }
.pf-card-route > div > span { color: var(--rm-muted-2); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.pf-card-route code { min-width: 0; color: var(--rm-text); font-size: 10px; overflow-wrap: anywhere; }
.pf-card-route > i { color: var(--rm-accent); text-align: center; }
.pf-card-meta { flex-wrap: wrap; gap: 7px 10px; margin-top: 9px; color: var(--rm-muted-2); font-size: 10px; }
.pf-card-meta > span:not(.pf-protocol-badge) { display: inline-flex; align-items: center; gap: 4px; }
.pf-protocol-badge { padding: 3px 7px; border: 1px solid var(--rm-border); border-radius: 7px; background: var(--rm-soft); color: var(--rm-accent); font-size: 9px; font-weight: 750; }
.pf-card-enabled { color: var(--rm-online); }
.pf-card-disabled { color: var(--rm-muted-2); }
.pf-card-actions { justify-content: space-between; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rm-border); }
.pf-card-actions .dropdown { flex: 1 1 auto; }
.pf-card-actions .dropdown > .btn { width: 100%; }
.pf-card-edit-actions { display: flex; flex: 0 1 auto; gap: 3px; }
.pf-card-edit-actions .btn { margin: 0 !important; }
@media (max-width: 767.98px) {
  .pf-page-heading { align-items: flex-start; }
  .pf-page-icon { flex-basis: 36px; height: 36px; }
  .pf-page-actions { width: 100%; justify-content: flex-start; }
  .pf-search { flex: 1 1 100%; width: 100%; }
  .pf-page-actions > .btn { flex: 1 1 120px; }
  .pf-router-navigation { align-items: flex-start; }
  .pf-router-navigation > span { flex: 1 1 100%; }
  .pf-router-navigation .ppp-router-selector { flex: 1 1 100%; max-width: none; }
  .pf-list-header { align-items: flex-start; }
  .pf-list-hint { flex: 1 1 100%; }
}
@media (max-width: 575.98px) {
  .pf-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: .5rem !important; }
  .pf-cell { padding: 0; }
  .pf-cards .pf-card .card-body { padding: 10px; }
  .pf-card-route { gap: 5px; padding: 8px; }
}

/* ---------- Tab (PPP / WhatsApp / dll) ---------- */
.nav-tabs {
  border-bottom: 1px solid var(--rm-border);
  gap: .35rem;
}
.nav-tabs .nav-link {
  color: var(--rm-muted-2);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: .9rem;
  padding: .45rem .9rem;
}
.nav-tabs .nav-link:hover { color: var(--rm-title); border-color: var(--rm-border); }
.nav-tabs .nav-link.active {
  color: var(--rm-title);
  background: var(--rm-navy-2);
  border-color: var(--rm-border);
  box-shadow: inset 0 2px 0 var(--rm-accent);
}

/* ---------- Menu Map ---------- */
/* Halaman peta memakai tinggi penuh: kanvas memanjang sampai dasar layar,
   tanpa angka magic yang harus diukur ulang tiap ganti tema/toolbar. */
.content:has(> .map-page) { display: flex; flex: 1; flex-direction: column; }
.map-page { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 14px; }
.map-page .map-canvas-frame { display: flex; flex: 1; min-height: 300px; }
.map-page #mapCanvas { flex: 1; height: auto; min-height: 0; }
.map-page .map-page-heading { margin-bottom: 0; }
.map-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.map-page-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.map-page-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border: 1px solid var(--rm-border);
  border-radius: 13px;
  background: var(--rm-soft);
  color: var(--rm-accent);
  font-size: 19px;
}
.map-summary { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.map-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  background: var(--rm-card);
  color: var(--rm-muted);
  font-size: 11px;
  white-space: nowrap;
}
.map-summary-item b { color: var(--rm-title); font-size: 12px; }
.map-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rm-muted); }
.map-status-dot.online { background: #20b26b; }
.map-status-dot.offline { background: #ec5360; }
.map-status-dot.idle { background: #8793a7; }
.map-status-dot.pin { background: #4388f5; }
.map-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  background: var(--rm-card);
}
.map-filter-server { display: flex; align-items: center; gap: 8px; min-width: 200px; }
.map-filter-server label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--rm-muted);
  font-size: 12px;
  white-space: nowrap;
}
.map-filter-server label i { color: var(--rm-accent); }
.map-filter-server .form-select { min-width: 150px; }
.map-filter-status { display: flex; flex-wrap: wrap; gap: 5px; }
.map-filter-status .btn {
  padding: 5px 9px;
  border-radius: 8px !important;
  font-size: 10px;
  font-weight: 650;
}
.map-toolbar-actions { margin-left: auto; }
.map-toolbar-actions form { margin: 0; }
#mapCanvas {
  height: clamp(380px, calc(100vh - 285px), 900px);
  border: 1px solid var(--rm-border);
  border-radius: 14px;
  background: var(--rm-card);
  box-shadow: var(--rm-shadow);
  overflow: hidden;
  z-index: 0;
}
.map-marker { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--rm-card);
  color: var(--rm-text);
}
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; }
.map-pin-box { position: relative; }
.map-pin-box #pinMap { height: 260px; border: 1px solid var(--rm-border); border-radius: 10px; z-index: 0; }
@media (max-width: 767.98px) {
  .map-page-heading { align-items: flex-start; flex-direction: column; }
  .map-summary { width: 100%; justify-content: flex-start; }
  .map-summary-item { flex: 1 1 calc(50% - 7px); justify-content: center; }
  .map-toolbar { align-items: stretch; }
  .map-filter-server { flex: 1 1 100%; min-width: 0; }
  .map-filter-server .form-select { flex: 1; min-width: 0; }
  .map-filter-status { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-filter-status .btn { width: 100%; }
  .map-toolbar-actions { width: 100%; margin-left: 0; }
  .map-toolbar-actions form,
  .map-toolbar-actions .btn { width: 100%; }
  .content:has(> .map-page) { display: block; }
  .map-page { display: block; }
  .map-page .map-canvas-frame { display: block; flex: none; min-height: 0; }
  .map-page #mapCanvas { flex: none; height: max(380px, calc(100dvh - 410px)); }
  #mapCanvas { height: max(380px, calc(100dvh - 410px)); }
}

/* ---------- WhatsApp gaya chat ---------- */
.wa-chat { display: flex; gap: 0; border: 1px solid var(--rm-border); border-radius: 12px; overflow: hidden; min-height: 420px; }
.wa-chat-list { width: 300px; min-width: 240px; border-right: 1px solid var(--rm-border); background: var(--rm-navy); overflow-y: auto; }
.wa-chat-main { flex: 1; display: flex; flex-direction: column; background: var(--rm-bg); min-width: 0; }
.wa-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.wa-chat-pane { border-bottom: 1px solid var(--rm-border); background: var(--rm-navy); position: sticky; top: 0; z-index: 2; }
.wa-chat-foot { border-top: 1px solid var(--rm-border); background: var(--rm-navy); }
.wa-bubble {
  max-width: 78%;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--rm-card);
  border: 1px solid var(--rm-border);
  word-break: break-word;
  font-size: 14px;
}
.wa-bubble .wa-text { white-space: pre-wrap; }
.wa-bubble.out { align-self: flex-end; border-color: var(--rm-accent); }
.wa-bubble.in { align-self: flex-start; }
.wa-bubble .meta { display: block; font-size: 11px; color: var(--rm-muted); margin-top: 4px; }
.wa-peer { display: block; padding: 10px 12px; border-bottom: 1px solid var(--rm-border); color: var(--rm-text); text-decoration: none; }
.wa-peer:hover, .wa-peer.active { background: var(--rm-navy-2); }
@media (max-width: 767.98px) {
  .wa-chat { flex-direction: column; min-height: 0; }
  .wa-chat-list { width: 100%; border-right: none; border-bottom: 1px solid var(--rm-border); max-height: 240px; }
  .wa-thread { max-height: 55vh; }
  .wa-bubble { max-width: 92%; }
}
@media (min-width: 768px) {
  .wa-chat { height: calc(100vh - 250px); max-height: 760px; }
}