:root {
  --avd-navy-950: #04131d;
  --avd-navy-900: #071b28;
  --avd-navy-850: #0a2231;
  --avd-navy-800: #0c2a3c;
  --avd-navy-700: #063f61;
  --avd-blue: #07577f;
  --avd-rpc-blue: #003b6f;
  --avd-orange: #ec5a1f;
  --avd-rpc-orange: #f58220;
  --avd-orange-dark: #c94310;
  --avd-success: #25b67a;
  --avd-warning: #f5b942;
  --avd-danger: #ec5e69;
  --avd-text: #f5f9fb;
  --avd-text-soft: #d7e3ea;
  --avd-muted: #97adba;
  --avd-border: rgba(202, 222, 233, 0.14);
  --avd-border-strong: rgba(202, 222, 233, 0.24);
  --avd-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  --avd-radius-xl: 24px;
  --avd-radius-lg: 18px;

  --bg-main:
    radial-gradient(circle at 15% 0%, rgba(7, 87, 127, 0.22), transparent 34%),
    linear-gradient(145deg, var(--avd-navy-950), var(--avd-navy-900));
  --bg-card: var(--avd-navy-850);
  --bg-card-soft: rgba(10, 34, 49, 0.96);
  --border-soft: var(--avd-border);
  --text-main: var(--avd-text);
  --text-muted: var(--avd-muted);
  --accent-blue: var(--avd-blue);
  --accent-blue-deep: var(--avd-navy-700);
  --accent-indigo: var(--avd-rpc-blue);
  --accent-green: var(--avd-success);
  --accent-yellow: var(--avd-warning);
  --danger: var(--avd-danger);
}

/* Shared application shell for standalone administrative pages. */
body.mapping-admin-page {
  min-height: 100vh;
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.mapping-admin-page .app-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.mapping-admin-page .sidebar {
  align-self: flex-start;
  display: flex;
  flex: 0 0 250px;
  flex-direction: column;
  width: 250px;
  height: 100vh;
  padding: 1.5rem 1rem;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.mapping-admin-page .sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.mapping-admin-page .sidebar-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
}

.mapping-admin-page .sidebar-logo-text {
  font-size: 1.05rem;
  font-weight: 600;
}

.mapping-admin-page .sidebar-subtext,
.mapping-admin-page .sidebar-footer {
  font-size: 0.8rem;
}

.mapping-admin-page .nav-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.25rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mapping-admin-page .nav-sidebar .nav-link i {
  font-size: 1.05rem;
}

.mapping-admin-page .sidebar-footer {
  margin-top: auto !important;
}

.mapping-admin-page .main-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem 1.5rem 2rem;
  overflow-x: hidden;
}

.mapping-admin-page .header-row {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--avd-border-strong);
}

.mapping-admin-page .header-title {
  font-size: 1.8rem;
  font-weight: 700;
}

.mapping-admin-page .header-subtitle,
.mapping-admin-page .subtext {
  font-size: 0.85rem;
}

.mapping-admin-page .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--avd-border-strong);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8rem;
}

.mapping-admin-page .card-telecom {
  padding: 1.2rem;
}

.mapping-admin-page footer {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--avd-border);
  color: var(--avd-muted);
  font-size: 0.8rem;
  text-align: center;
}

body,
body.theme-dark {
  background: var(--bg-main);
  color: var(--avd-text);
}

.sidebar {
  background: linear-gradient(180deg, var(--avd-navy-900), var(--avd-navy-950)) !important;
  border-right: 3px solid var(--avd-orange) !important;
  box-shadow: 12px 0 36px rgba(0, 0, 0, 0.22) !important;
}

.sidebar-logo-icon {
  border-radius: 12px !important;
  background: linear-gradient(145deg, #ff7a3f, var(--avd-orange)) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(236, 90, 31, 0.28) !important;
}

.sidebar-logo-text,
.header-title {
  background: linear-gradient(90deg, #fff, #ffb18d 60%, var(--avd-orange)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.sidebar-subtext,
.sidebar-footer,
.header-subtitle,
.subtext,
.text-muted {
  color: var(--avd-muted) !important;
}

.nav-sidebar .nav-link {
  color: var(--avd-text-soft) !important;
}

.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link:hover {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(236, 90, 31, 0.95), rgba(201, 67, 16, 0.88)) !important;
  box-shadow: 0 12px 28px rgba(236, 90, 31, 0.18) !important;
}

.nav-sidebar .nav-link.active i,
.nav-sidebar .nav-link:hover i {
  color: #fff !important;
}

.nav-sidebar .nav-link.coming-soon:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.theme-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--avd-border-strong) !important;
  color: var(--avd-text-soft) !important;
}

.theme-toggle:hover {
  border-color: var(--avd-orange) !important;
  color: #fff !important;
}

.header-row {
  border-bottom-color: var(--avd-border-strong) !important;
}

.card-telecom,
.login-card,
body.container > .card {
  background: linear-gradient(145deg, var(--avd-navy-850), var(--avd-navy-800)) !important;
  border: 1px solid var(--avd-border) !important;
  border-top: 3px solid var(--avd-orange) !important;
  border-radius: var(--avd-radius-lg) !important;
  box-shadow: var(--avd-shadow) !important;
  color: var(--avd-text) !important;
}

.card-telecom:hover {
  border-color: rgba(236, 90, 31, 0.38) !important;
  border-top-color: var(--avd-orange) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.3) !important;
}

.stat .icon {
  background: linear-gradient(145deg, var(--avd-blue), var(--avd-rpc-blue)) !important;
  box-shadow: 0 12px 26px rgba(7, 87, 127, 0.28) !important;
}

.badge-soft,
.badge-modern,
.mapping-type {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: var(--avd-border-strong) !important;
  color: var(--avd-text-soft) !important;
}

.badge-green {
  border-color: rgba(37, 182, 122, 0.58) !important;
  color: #74e5b2 !important;
  background: rgba(37, 182, 122, 0.1) !important;
}

.badge-muted {
  color: var(--avd-muted) !important;
  background: rgba(151, 173, 186, 0.08) !important;
}

.btn-primary,
.btn-play-primary {
  background: linear-gradient(145deg, #ff7a3f, var(--avd-orange)) !important;
  border-color: var(--avd-orange) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(236, 90, 31, 0.2) !important;
}

.btn-primary:hover,
.btn-play-primary:hover {
  background: linear-gradient(145deg, var(--avd-orange), var(--avd-orange-dark)) !important;
  border-color: var(--avd-orange-dark) !important;
}

.btn-outline-info {
  border-color: var(--avd-orange) !important;
  color: #ff9a6c !important;
  background: rgba(236, 90, 31, 0.05) !important;
}

.btn-outline-info:hover {
  background: var(--avd-orange) !important;
  border-color: var(--avd-orange) !important;
  color: #fff !important;
}

.btn-outline-light {
  border-color: var(--avd-border-strong) !important;
  color: var(--avd-text-soft) !important;
}

.btn-outline-light:hover {
  border-color: var(--avd-orange) !important;
  background: rgba(236, 90, 31, 0.12) !important;
  color: #fff !important;
}

.bg-primary {
  background-color: var(--avd-blue) !important;
}

.text-primary,
.text-info {
  color: #75cdef !important;
}

.form-control,
.form-select,
.search-box {
  background-color: #071c2a !important;
  border-color: var(--avd-border-strong) !important;
  color: var(--avd-text) !important;
}

.form-control::placeholder,
.search-box::placeholder {
  color: var(--avd-muted) !important;
}

.form-control:focus,
.form-select:focus,
.search-box:focus {
  background-color: #071c2a !important;
  border-color: var(--avd-orange) !important;
  color: var(--avd-text) !important;
  box-shadow: 0 0 0 0.22rem rgba(236, 90, 31, 0.14) !important;
}

.form-check-input:checked {
  background-color: var(--avd-orange) !important;
  border-color: var(--avd-orange) !important;
}

.waveform {
  background:
    radial-gradient(circle at 10% 0%, rgba(7, 87, 127, 0.32), transparent 44%),
    var(--avd-navy-900) !important;
  border: 1px solid var(--avd-border) !important;
}

.table-modern {
  border-color: var(--avd-border) !important;
}

.table-modern thead th,
.mapping-table thead th {
  background: var(--avd-navy-900) !important;
  border-color: var(--avd-border) !important;
  color: #75cdef !important;
}

.table-modern tbody td,
.mapping-table tbody td {
  background: rgba(10, 34, 49, 0.72) !important;
  border-color: var(--avd-border) !important;
  color: var(--avd-text-soft) !important;
}

.table-modern tbody tr:hover td,
.mapping-table tbody tr:hover td {
  background: rgba(7, 87, 127, 0.16) !important;
}

.page-link {
  background: var(--avd-navy-850) !important;
  border-color: var(--avd-border) !important;
  color: var(--avd-text-soft) !important;
}

.page-item.active .page-link,
.page-link:hover {
  background: var(--avd-orange) !important;
  border-color: var(--avd-orange) !important;
  color: #fff !important;
}

.modal-content {
  background: var(--avd-navy-850) !important;
  border-color: var(--avd-border-strong) !important;
  color: var(--avd-text) !important;
}

.advantage-alert {
  border-radius: 13px;
  border-width: 1px;
}

.mapping-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
}

.mapping-stat strong {
  color: #ff9a6c;
  font-size: 1.9rem;
}

.mapping-stat-label,
.mapping-type {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mapping-type {
  display: inline-flex;
  border: 1px solid var(--avd-border-strong);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
}

.mapping-table-wrap {
  max-height: min(60vh, 720px);
  overflow: auto;
}

.mapping-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

.mapping-table code {
  color: #75cdef;
  font-size: 0.92rem;
}

.mapping-disabled {
  opacity: 0.62;
}

footer {
  border-top-color: var(--avd-border) !important;
}

body.d-flex.vh-100 {
  background:
    linear-gradient(145deg, rgba(6, 68, 103, 0.98), rgba(4, 30, 45, 0.98)),
    var(--avd-navy-950) !important;
}

.login-card {
  max-width: 390px !important;
  padding: 2.2rem !important;
}

.login-card .bi-shield-lock-fill {
  color: var(--avd-orange) !important;
}

body.theme-light {
  --bg-main: linear-gradient(145deg, #eef3f6, #f8fafb);
  --bg-card: #fff;
  --bg-card-soft: #fff;
  --border-soft: rgba(20, 59, 78, 0.13);
  --text-main: #102936;
  --text-muted: #647c89;
  color: #102936;
}

body.theme-light .card-telecom {
  background: linear-gradient(145deg, #fff, #f8fafb) !important;
  border-color: rgba(20, 59, 78, 0.13) !important;
  border-top-color: var(--avd-rpc-orange) !important;
  color: #102936 !important;
  box-shadow: 0 16px 42px rgba(18, 49, 66, 0.1) !important;
}

body.theme-light .header-title {
  background: linear-gradient(90deg, var(--avd-rpc-blue), var(--avd-blue), var(--avd-rpc-orange)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

body.theme-light .table-modern tbody td,
body.theme-light .mapping-table tbody td {
  background: #fff !important;
  color: #314d5c !important;
}

body.theme-light .table-modern tbody tr:hover td,
body.theme-light .mapping-table tbody tr:hover td {
  background: rgba(6, 63, 97, 0.045) !important;
}

body.theme-light .table-modern thead th,
body.theme-light .mapping-table thead th {
  background: #eef5fb !important;
  color: var(--avd-rpc-blue) !important;
}

body.theme-light .form-control,
body.theme-light .form-select,
body.theme-light .search-box {
  background: #fff !important;
  border-color: rgba(20, 59, 78, 0.22) !important;
  color: #102936 !important;
}

body.theme-light .waveform {
  background: linear-gradient(90deg, #eef5fb, #fff4ed) !important;
}

@media (max-width: 991.98px) {
  .mapping-admin-page .app-wrapper {
    display: block;
  }

  .mapping-admin-page .sidebar {
    display: none !important;
  }

  .main-content {
    padding: 1rem !important;
  }

  .mapping-table-card {
    padding: 1rem !important;
  }
}