/*
 * MARGA.NET day/night appearance layer.
 * Visual overrides only: no RouterOS, API, form, or navigation behavior.
 */

body.marga-router-os .marga-os-theme-toggle {
  position: relative;
  display: inline-grid !important;
  flex: 0 0 34px;
  width: 34px !important;
  min-width: 34px;
  height: 34px !important;
  min-height: 34px;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(83, 132, 188, 0.34) !important;
  border-radius: 10px !important;
  color: #a9c7ed !important;
  background: rgba(9, 25, 46, 0.82) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 5px 16px rgba(0, 4, 14, 0.2) !important;
  cursor: pointer;
  font-size: 15px !important;
  line-height: 1;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

body.marga-router-os .marga-os-theme-toggle:hover,
body.marga-router-os .marga-os-theme-toggle:focus-visible {
  border-color: rgba(70, 166, 255, 0.7) !important;
  color: #fff !important;
  background: #102b4c !important;
  outline: none;
  transform: translateY(-1px);
}

body.marga-router-os .marga-os-theme-toggle .marga-theme-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 160ms ease, transform 180ms ease;
}

body.marga-router-os .marga-theme-icon--sun {
  opacity: 0;
  transform: rotate(-35deg) scale(0.65);
}

body.marga-router-os .marga-theme-icon--moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html[data-marga-theme="light"] body.marga-router-os .marga-theme-icon--sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html[data-marga-theme="light"] body.marga-router-os .marga-theme-icon--moon {
  opacity: 0;
  transform: rotate(35deg) scale(0.65);
}

/* Light palette ---------------------------------------------------------- */

html[data-marga-theme="light"] body.marga-router-os {
  --os-bg: #edf3fa;
  --os-bg-deep: #e6eef7;
  --os-panel: #ffffff;
  --os-panel-soft: #f5f8fc;
  --os-panel-raised: #ffffff;
  --os-border: rgba(54, 91, 132, 0.22);
  --os-border-soft: rgba(62, 99, 142, 0.16);
  --os-text: #0f172a;
  --os-muted: #334155;
  --marga-bg: #edf3fa;
  --marga-bg-soft: #e7eff8;
  --marga-surface: #ffffff;
  --marga-surface-strong: #ffffff;
  --marga-surface-soft: #f2f6fb;
  --marga-border: rgba(54, 91, 132, 0.2);
  --marga-border-strong: rgba(55, 118, 206, 0.42);
  --marga-text: #0f172a;
  --marga-muted: #334155;
  --console-bg: #edf3fa;
  --console-sidebar: #ffffff;
  --console-topbar: #ffffff;
  --console-surface: #ffffff;
  --console-surface-alt: #f3f7fb;
  --console-surface-hover: #eaf3fc;
  --console-border-soft: rgba(51, 65, 85, 0.09);
  --console-border: rgba(51, 65, 85, 0.15);
  --console-border-active: rgba(37, 99, 235, 0.48);
  --console-text: #0f172a;
  --console-text-secondary: #263548;
  --console-text-muted: #334155;
  --dashboard-card-bg: #ffffff;
  --dashboard-card-bg-subtle: #f5f8fc;
  --dashboard-card-border: rgba(51, 65, 85, 0.17);
  --dashboard-card-border-hover: rgba(51, 65, 85, 0.28);
  --dashboard-card-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
  --dashboard-card-shadow-hover: 0 5px 14px rgba(15, 23, 42, 0.1);
  --dashboard-card-shadow-mobile: 0 3px 9px rgba(15, 23, 42, 0.07);
  color: var(--os-text) !important;
  background:
    radial-gradient(circle at 52% -14%, rgba(91, 152, 226, 0.14), transparent 34%),
    linear-gradient(180deg, var(--os-bg) 0%, var(--os-bg-deep) 100%) !important;
  color-scheme: light;
}

html[data-marga-theme="light"] body.marga-router-os #main {
  color: var(--os-text) !important;
  background: transparent !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-dashboard {
  --dashboard-card-bg: #ffffff;
  --dashboard-card-bg-subtle: #f5f8fc;
  --dashboard-card-border: rgba(51, 65, 85, 0.17);
  --dashboard-card-border-hover: rgba(51, 65, 85, 0.28);
  --dashboard-card-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
  --dashboard-card-shadow-hover: 0 5px 14px rgba(15, 23, 42, 0.1);
  --dashboard-card-shadow-mobile: 0 3px 9px rgba(15, 23, 42, 0.07);
}

/* Header ----------------------------------------------------------------- */

html[data-marga-theme="light"] body.marga-router-os .marga-os-header {
  border-bottom-color: rgba(58, 92, 131, 0.2) !important;
  color: var(--os-text) !important;
  background:
    radial-gradient(circle at 70% -80%, rgba(59, 130, 246, 0.13), transparent 38%),
    rgba(250, 253, 255, 0.96) !important;
  box-shadow: 0 10px 28px rgba(41, 67, 99, 0.12) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-brand-copy strong {
  color: #0f172a !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-brand-copy small {
  color: #263548 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-theme-toggle {
  border-color: rgba(213, 151, 24, 0.32) !important;
  color: #b86c00 !important;
  background: #fff7dc !important;
  box-shadow: inset 0 1px #fff, 0 5px 16px rgba(89, 67, 20, 0.1) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-theme-toggle:hover,
html[data-marga-theme="light"] body.marga-router-os .marga-os-theme-toggle:focus-visible {
  border-color: rgba(218, 143, 0, 0.58) !important;
  color: #915600 !important;
  background: #ffefb4 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-online {
  color: #263548 !important;
  background: rgba(231, 241, 250, 0.9) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-router-switcher select,
html[data-marga-theme="light"] body.marga-router-os .marga-os-router-switcher select:hover,
html[data-marga-theme="light"] body.marga-router-os .marga-os-router-switcher select:focus-visible {
  border-color: rgba(65, 105, 149, 0.24) !important;
  color: #233d5b !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px #fff, 0 4px 14px rgba(38, 65, 96, 0.07) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-icon-button {
  border-color: rgba(65, 105, 149, 0.24) !important;
  color: #55708d !important;
  background: #f8fbfe !important;
  box-shadow: inset 0 1px #fff, 0 4px 14px rgba(38, 65, 96, 0.07) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-icon-button:hover,
html[data-marga-theme="light"] body.marga-router-os .marga-os-icon-button:focus-visible {
  border-color: rgba(45, 132, 224, 0.48) !important;
  color: #1e6fc0 !important;
  background: #edf6ff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-more {
  border-left-color: rgba(72, 104, 143, 0.2);
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-header-menu {
  border-color: rgba(65, 105, 149, 0.24) !important;
  color: var(--os-text) !important;
  background: #ffffff !important;
  box-shadow: 0 22px 54px rgba(42, 69, 101, 0.2), inset 0 1px #fff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-title {
  border-bottom-color: rgba(65, 105, 149, 0.16);
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-title strong,
html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-runtime strong {
  color: #18304e !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-field,
html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-title small,
html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-runtime {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-field select,
html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-runtime,
html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-action {
  border-color: rgba(65, 105, 149, 0.2) !important;
  color: #284461 !important;
  background: #f4f8fc !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-action:hover {
  border-color: rgba(45, 132, 224, 0.42) !important;
  color: #145fa9 !important;
  background: #eaf4ff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-menu-action--danger {
  color: #c13d52 !important;
}

/* Sidebar and mobile drawer ---------------------------------------------- */

html[data-marga-theme="light"] body.marga-router-os #sidenav.sidenav {
  border-right-color: rgba(58, 92, 131, 0.2) !important;
  color: #29445f !important;
  background: #f8fbfe !important;
  box-shadow: 24px 0 54px rgba(42, 69, 101, 0.18) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-sidebar-branding,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-sidebar-header,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-router-card,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-sidebar-profile {
  border-color: rgba(65, 105, 149, 0.18) !important;
  background: #ffffff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-mobile-sidebar-logo,
html[data-marga-theme="light"] body.marga-router-os .marga-os-drawer-close {
  border-color: rgba(65, 105, 149, 0.22) !important;
  color: #365675 !important;
  background: #edf4fb !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-mobile-sidebar-logo img.marga-mikrotik-symbol {
  opacity: 1;
  filter: none;
}

html[data-marga-theme="light"] body.marga-router-os .marga-mobile-sidebar-copy strong,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-router-card strong,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-sidebar-profile strong {
  color: #0f172a !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-mobile-sidebar-copy small,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-router-card small,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-sidebar-profile small {
  color: #263548 !important;
}

html[data-marga-theme="light"] body.marga-router-os #sidenav a,
html[data-marga-theme="light"] body.marga-router-os #sidenav .dropdown-btn {
  color: #1f2937 !important;
  background-color: transparent !important;
}

html[data-marga-theme="light"] body.marga-router-os #sidenav a:hover,
html[data-marga-theme="light"] body.marga-router-os #sidenav .dropdown-btn:hover {
  color: #1269bc !important;
  background: #eaf4ff !important;
}

html[data-marga-theme="light"] body.marga-router-os #sidenav a.active,
html[data-marga-theme="light"] body.marga-router-os #sidenav .dropdown-btn.active {
  border-color: rgba(48, 126, 228, 0.45) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #327ce5, #2865ce) !important;
}

html[data-marga-theme="light"] body.marga-router-os #sidenav .dropdown-container {
  border-color: rgba(65, 105, 149, 0.14) !important;
  background: rgba(229, 240, 251, 0.72) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-drawer-overlay {
  background: rgba(35, 57, 82, 0.35);
}

/* Cards, forms, and reusable page surfaces ------------------------------- */

html[data-marga-theme="light"] body.marga-router-os .card,
html[data-marga-theme="light"] body.marga-router-os .box,
html[data-marga-theme="light"] body.marga-router-os .marga-page-intro,
html[data-marga-theme="light"] body.marga-router-os .marga-summary-group,
html[data-marga-theme="light"] body.marga-router-os .marga-dashboard-section {
  border-color: var(--marga-border) !important;
  color: var(--marga-text) !important;
  background: #ffffff !important;
  box-shadow: 0 7px 22px rgba(45, 72, 105, 0.08) !important;
}

html[data-marga-theme="light"] body.marga-router-os .card-header,
html[data-marga-theme="light"] body.marga-router-os .card-footer,
html[data-marga-theme="light"] body.marga-router-os .marga-panel-heading {
  border-color: rgba(54, 91, 132, 0.16) !important;
  color: var(--marga-text) !important;
  background: #f7fafd !important;
}

html[data-marga-theme="light"] body.marga-router-os h1,
html[data-marga-theme="light"] body.marga-router-os h2,
html[data-marga-theme="light"] body.marga-router-os h3,
html[data-marga-theme="light"] body.marga-router-os h4,
html[data-marga-theme="light"] body.marga-router-os h5,
html[data-marga-theme="light"] body.marga-router-os h6,
html[data-marga-theme="light"] body.marga-router-os .card-title {
  color: #13243d !important;
}

html[data-marga-theme="light"] body.marga-router-os p,
html[data-marga-theme="light"] body.marga-router-os small,
html[data-marga-theme="light"] body.marga-router-os label {
  color: #334155;
}

html[data-marga-theme="light"] body.marga-router-os .form-control,
html[data-marga-theme="light"] body.marga-router-os .group-item,
html[data-marga-theme="light"] body.marga-router-os select,
html[data-marga-theme="light"] body.marga-router-os textarea,
html[data-marga-theme="light"] body.marga-router-os input[type="text"],
html[data-marga-theme="light"] body.marga-router-os input[type="password"],
html[data-marga-theme="light"] body.marga-router-os input[type="number"],
html[data-marga-theme="light"] body.marga-router-os input[type="date"],
html[data-marga-theme="light"] body.marga-router-os input[type="time"],
html[data-marga-theme="light"] body.marga-router-os input[type="month"],
html[data-marga-theme="light"] body.marga-router-os input[type="datetime-local"],
html[data-marga-theme="light"] body.marga-router-os input[type="email"],
html[data-marga-theme="light"] body.marga-router-os input[type="tel"],
html[data-marga-theme="light"] body.marga-router-os input[type="search"] {
  border-color: rgba(54, 91, 132, 0.24) !important;
  color: #17304e !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html[data-marga-theme="light"] body.marga-router-os input::placeholder,
html[data-marga-theme="light"] body.marga-router-os textarea::placeholder {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-data-toolbar,
html[data-marga-theme="light"] body.marga-router-os .marga-form-grid tr,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-table-toolbar,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-period-nav {
  border-color: rgba(54, 91, 132, 0.16) !important;
  color: var(--marga-text) !important;
  background: #f3f7fb !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-user-search-submit {
  border-left-color: rgba(54, 91, 132, 0.2);
  color: #1775c6;
  background: #e8f3ff;
}

/* Dense tables stay dense; only their palette changes. */
html[data-marga-theme="light"] body.marga-router-os .overflow,
html[data-marga-theme="light"] body.marga-router-os .box-bordered {
  border-color: rgba(54, 91, 132, 0.2) !important;
  background: #ffffff !important;
}

html[data-marga-theme="light"] body.marga-router-os .table,
html[data-marga-theme="light"] body.marga-router-os .marga-data-table {
  color: #213955 !important;
  background: #ffffff !important;
}

html[data-marga-theme="light"] body.marga-router-os .table th,
html[data-marga-theme="light"] body.marga-router-os .marga-data-table thead th {
  border-color: rgba(54, 91, 132, 0.2) !important;
  color: #326b9f !important;
  background: #eaf2fa !important;
}

html[data-marga-theme="light"] body.marga-router-os .table td,
html[data-marga-theme="light"] body.marga-router-os .marga-data-table tbody td {
  border-color: rgba(54, 91, 132, 0.15) !important;
  color: #213955 !important;
  background: #ffffff !important;
}

html[data-marga-theme="light"] body.marga-router-os .table tbody tr:nth-child(even) td,
html[data-marga-theme="light"] body.marga-router-os .marga-data-table tbody tr:nth-child(even) td {
  background: #f7faff !important;
}

html[data-marga-theme="light"] body.marga-router-os .table tbody tr:hover td,
html[data-marga-theme="light"] body.marga-router-os .marga-data-table tbody tr:hover td {
  background: #edf6ff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-table-pager,
html[data-marga-theme="light"] body.marga-router-os .marga-user-pager {
  border-color: rgba(54, 91, 132, 0.2) !important;
  color: #334155 !important;
  background: #f4f8fc !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-table-page-number,
html[data-marga-theme="light"] body.marga-router-os .marga-user-page-number {
  color: #203b5b !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-table-pager button {
  border-color: rgba(54, 91, 132, 0.2);
  color: #2d5f8d;
  background: #e8f2fc;
}

/* Large data pages use a higher-specificity compact-table layer. */
html[data-marga-theme="light"] body.marga-router-os
.main-container:not(:has(> .marga-dashboard))
.card,
html[data-marga-theme="light"] body.marga-router-os
.main-container:not(:has(> .marga-dashboard))
.marga-data-card:not(.marga-last-generate-card) {
  border-color: rgba(54, 91, 132, 0.2) !important;
  color: #17304e !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(45, 72, 105, 0.07) !important;
}

html[data-marga-theme="light"] body.marga-router-os
.main-container:not(:has(> .marga-dashboard))
.card > .card-header,
html[data-marga-theme="light"] body.marga-router-os
.main-container:not(:has(> .marga-dashboard))
.marga-data-card:not(.marga-last-generate-card) > .card-header {
  border-bottom-color: rgba(54, 91, 132, 0.16) !important;
  color: #17304e !important;
  background: #f3f7fb !important;
}

html[data-marga-theme="light"] body.marga-router-os
.main-container:not(:has(> .marga-dashboard))
.card > .card-body,
html[data-marga-theme="light"] body.marga-router-os
.main-container:not(:has(> .marga-dashboard))
.marga-data-card:not(.marga-last-generate-card) > .card-body {
  color: #17304e !important;
  background: #ffffff !important;
}

html[data-marga-theme="light"] body.marga-router-os
.main-container:not(:has(> .marga-dashboard))
.marga-data-card:not(.marga-last-generate-card) .marga-data-toolbar {
  border-color: rgba(54, 91, 132, 0.16) !important;
  color: #17304e !important;
  background: #f3f7fb !important;
}

html[data-marga-theme="light"] body.marga-router-os
.main-container:not(:has(> .marga-dashboard))
.marga-data-card:not(.marga-last-generate-card) .overflow {
  border-color: rgba(54, 91, 132, 0.2) !important;
  background: #ffffff !important;
}

html[data-marga-theme="light"] body.marga-router-os:not(.marga-pppoe-finance-page)
.main-container:not(:has(> .marga-dashboard))
.marga-data-card:not(.marga-last-generate-card)
.marga-data-table:not(.marga-last-generate-table) thead th {
  border-color: rgba(54, 91, 132, 0.2) !important;
  color: #326b9f !important;
  background: #eaf2fa !important;
}

html[data-marga-theme="light"] body.marga-router-os:not(.marga-pppoe-finance-page)
.main-container:not(:has(> .marga-dashboard))
.marga-data-card:not(.marga-last-generate-card)
.marga-data-table:not(.marga-last-generate-table) tbody td {
  border-color: rgba(54, 91, 132, 0.15) !important;
  color: #213955 !important;
  background: #ffffff !important;
}

html[data-marga-theme="light"] body.marga-router-os:not(.marga-pppoe-finance-page)
.main-container:not(:has(> .marga-dashboard))
.marga-data-card:not(.marga-last-generate-card)
.marga-data-table:not(.marga-last-generate-table) tbody tr:nth-child(even) td {
  background: #f7faff !important;
}

/* Dashboard and finance specialty cards --------------------------------- */

html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-card,
html[data-marga-theme="light"] body.marga-router-os .marga-action-tile,
html[data-marga-theme="light"] body.marga-router-os .marga-log-card,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary > *,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-entry-card,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-info-card,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-status-card,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-history-card {
  border-color: rgba(54, 91, 132, 0.2) !important;
  color: #17304e !important;
  background: #ffffff !important;
  box-shadow: 0 7px 22px rgba(45, 72, 105, 0.08) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-panel,
html[data-marga-theme="light"] body.marga-router-os .marga-os-service-panel,
html[data-marga-theme="light"] body.marga-router-os .marga-os-shortcuts {
  border-color: rgba(54, 91, 132, 0.2) !important;
  color: #17304e !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(73, 139, 217, 0.09), transparent 34%),
    linear-gradient(145deg, #ffffff, #f7faff) !important;
  box-shadow: 0 7px 22px rgba(45, 72, 105, 0.08), inset 0 1px #fff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-panel--overview {
  border-color: rgba(40, 128, 220, 0.38) !important;
  background:
    radial-gradient(circle at 92% 4%, rgba(57, 143, 243, 0.12), transparent 36%),
    linear-gradient(145deg, #ffffff, #f2f8ff 72%) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-panel--resources {
  border-color: rgba(19, 166, 127, 0.32) !important;
  background:
    radial-gradient(circle at 98% 0%, rgba(14, 180, 133, 0.1), transparent 36%),
    linear-gradient(145deg, #ffffff, #f1fbf8 72%) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-section-heading h2,
html[data-marga-theme="light"] body.marga-router-os .marga-os-service-heading h2,
html[data-marga-theme="light"] body.marga-router-os .marga-os-shortcuts-heading h2 {
  color: #17304e !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-heading-icon,
html[data-marga-theme="light"] body.marga-router-os .marga-os-service-icon,
html[data-marga-theme="light"] body.marga-router-os .marga-os-shortcuts-icon {
  border-color: rgba(42, 139, 226, 0.22);
  color: #1680d5;
  background: #e8f4ff;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-panel--resources .marga-os-heading-icon {
  border-color: rgba(20, 173, 135, 0.22);
  color: #119c76;
  background: #e6f8f2;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-clock-card {
  border-color: rgba(41, 128, 219, 0.25);
  background: linear-gradient(145deg, #f7fbff, #eaf4ff);
  box-shadow: inset 0 1px #fff;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-clock-card::after {
  border-color: rgba(42, 139, 226, 0.15);
  color: rgba(29, 122, 207, 0.32);
  background: rgba(220, 238, 255, 0.74);
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-clock-card > strong,
html[data-marga-theme="light"] body.marga-router-os .marga-os-gauge strong,
html[data-marga-theme="light"] body.marga-router-os .marga-os-uptime-row strong,
html[data-marga-theme="light"] body.marga-router-os .marga-os-system-meta strong {
  color: #17304e !important;
  text-shadow: none;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-clock-card > small,
html[data-marga-theme="light"] body.marga-router-os .marga-os-resource > span,
html[data-marga-theme="light"] body.marga-router-os .marga-os-resource > small,
html[data-marga-theme="light"] body.marga-router-os .marga-os-uptime-row small,
html[data-marga-theme="light"] body.marga-router-os .marga-os-system-meta small {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-info-card {
  border-color: rgba(131, 83, 219, 0.3);
  border-left-color: #8c5be6;
  background: linear-gradient(145deg, #f7f2ff, #ffffff);
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-info-card--uptime {
  border-color: rgba(215, 143, 9, 0.3);
  border-left-color: #e39a0d;
  background: linear-gradient(145deg, #fff8e8, #ffffff);
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-info-card small {
  color: #334155;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-info-card--uptime strong {
  color: #895c00 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-resources-grid,
html[data-marga-theme="light"] body.marga-router-os .marga-os-uptime-row,
html[data-marga-theme="light"] body.marga-router-os .marga-os-system-meta article {
  border-color: rgba(54, 91, 132, 0.17);
  background: rgba(255, 255, 255, 0.74);
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-gauge-track {
  stroke: rgba(71, 105, 145, 0.2);
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-service-heading > a,
html[data-marga-theme="light"] body.marga-router-os .marga-os-shortcuts-grid a {
  border-color: rgba(54, 91, 132, 0.18);
  color: #263548 !important;
  background: #f3f8fc;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-service-heading > a:hover,
html[data-marga-theme="light"] body.marga-router-os .marga-os-shortcuts-grid a:hover {
  border-color: rgba(45, 132, 224, 0.42);
  color: #1567b5 !important;
  background: #eaf4ff;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-metric {
  border-color: rgba(var(--os-metric-color), 0.34);
  color: #17304e !important;
  background:
    radial-gradient(circle at 94% 12%, rgba(var(--os-metric-color), 0.1), transparent 34%),
    linear-gradient(145deg, #ffffff, #f5f9fd) !important;
  box-shadow: inset 0 1px #fff;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-metric:hover,
html[data-marga-theme="light"] body.marga-router-os .marga-os-metric:focus-visible {
  border-color: rgba(var(--os-metric-color), 0.58);
  background:
    radial-gradient(circle at 94% 12%, rgba(var(--os-metric-color), 0.15), transparent 38%),
    linear-gradient(145deg, #ffffff, #eef6fd) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-metric-copy small,
html[data-marga-theme="light"] body.marga-router-os .marga-os-metric-copy > span,
html[data-marga-theme="light"] body.marga-router-os .marga-os-shortcuts-heading > span {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-metric-copy strong {
  color: #17304e !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-operations .card,
html[data-marga-theme="light"] body.marga-router-os .marga-os-operations .marga-income-card {
  border-color: rgba(54, 91, 132, 0.2) !important;
  background: #ffffff !important;
  box-shadow: 0 7px 22px rgba(45, 72, 105, 0.08), inset 0 1px #fff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-operations .card-header {
  border-bottom-color: rgba(54, 91, 132, 0.16) !important;
  background: #f3f7fb !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-operations .card-header h3,
html[data-marga-theme="light"] body.marga-router-os .marga-os-operations .card-header h3 a,
html[data-marga-theme="light"] body.marga-router-os .marga-income-heading strong {
  color: #17304e !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-report,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric > span,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric > small {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric {
  border-color: rgba(54, 91, 132, 0.17);
  background: #f5f9fd;
  box-shadow: inset 0 1px #fff;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-voucher-today,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-paid {
  background: #ecfaf6;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-voucher-month,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-customers {
  background: #ecf9fc;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-income-today,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-unpaid {
  background: #fff8e9;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-income-month,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-income {
  background: #f6f1ff;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric > strong {
  text-shadow: none;
}

@media screen and (max-width: 640px) {
  html[data-marga-theme="light"] body.marga-router-os.marga-pppoe-finance-page
  #financeInvoiceTable tr[data-finance-status] {
    border-color: rgba(54, 91, 132, 0.22) !important;
    background: #ffffff !important;
    box-shadow: 0 3px 9px rgba(45, 72, 105, 0.06), inset 0 1px #fff !important;
  }

  html[data-marga-theme="light"] body.marga-router-os.marga-pppoe-finance-page
  #financeInvoiceTable tr[data-finance-status] > td {
    color: #326b9f !important;
    background: transparent !important;
  }

  html[data-marga-theme="light"] body.marga-router-os.marga-pppoe-finance-page
  #financeInvoiceTable tr[data-finance-status] > td::before {
    color: #334155 !important;
  }

  html[data-marga-theme="light"] body.marga-router-os.marga-pppoe-finance-page
  #financeInvoiceTable .marga-finance-invoice-number,
  html[data-marga-theme="light"] body.marga-router-os.marga-pppoe-finance-page
  #financeInvoiceTable .marga-finance-mobile-amount,
  html[data-marga-theme="light"] body.marga-router-os.marga-pppoe-finance-page
  #financeInvoiceTable .marga-finance-mobile-customer {
    color: #17304e !important;
  }
}

html[data-marga-theme="light"] body.marga-router-os .marga-dashboard #r_3 > .marga-log-card table th {
  border-color: rgba(54, 91, 132, 0.2) !important;
  color: #326b9f !important;
  background: #eaf2fa !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-dashboard #r_3 > .marga-log-card table td {
  border-color: rgba(54, 91, 132, 0.15) !important;
  color: #213955 !important;
  background: #ffffff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-dashboard #r_3 > .marga-log-card table tbody tr:nth-child(even) td {
  background: #f7faff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-dashboard #r_3 > .marga-log-card .overflow {
  border-color: rgba(54, 91, 132, 0.2) !important;
  background: #ffffff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-primary-value,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-mini-value,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-list div,
html[data-marga-theme="light"] body.marga-router-os .marga-resource-summary,
html[data-marga-theme="light"] body.marga-router-os .marga-log-empty {
  border-color: rgba(54, 91, 132, 0.16) !important;
  color: #203b5b !important;
  background: #f4f8fc !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-primary-value strong,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-mini-value strong,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-list strong,
html[data-marga-theme="light"] body.marga-router-os .marga-resource-summary strong,
html[data-marga-theme="light"] body.marga-router-os .marga-action-tile h1,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-title h1 {
  color: #13243d !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-kicker,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-primary-value span,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-mini-value span,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-list span,
html[data-marga-theme="light"] body.marga-router-os .marga-resource-summary span {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-router-os .highcharts-background,
html[data-marga-theme="light"] body.marga-router-os .highcharts-plot-background {
  fill: transparent !important;
}

html[data-marga-theme="light"] body.marga-router-os .highcharts-title,
html[data-marga-theme="light"] body.marga-router-os .highcharts-subtitle,
html[data-marga-theme="light"] body.marga-router-os .highcharts-axis-labels text,
html[data-marga-theme="light"] body.marga-router-os .highcharts-legend-item text {
  fill: #263548 !important;
  color: #263548 !important;
}

html[data-marga-theme="light"] body.marga-router-os .highcharts-grid-line,
html[data-marga-theme="light"] body.marga-router-os .highcharts-axis-line {
  stroke: rgba(54, 91, 132, 0.18) !important;
}

/* Bottom navigation ------------------------------------------------------ */

html[data-marga-theme="light"] body.marga-router-os .marga-os-dock {
  border-color: rgba(54, 91, 132, 0.24) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 252, 0.98)) !important;
  box-shadow: 0 18px 48px rgba(42, 69, 101, 0.18), inset 0 1px #fff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-dock a {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-dock a:hover {
  color: #176abb !important;
  background: #eaf4ff !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-dock a.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #4c6ff3, #268fe8) !important;
}

@media screen and (max-width: 480px) {
  body.marga-router-os .marga-os-theme-toggle {
    flex-basis: 30px;
    width: 30px !important;
    min-width: 30px;
    height: 30px !important;
    min-height: 30px;
    border-radius: 9px !important;
    font-size: 13px !important;
  }
}

@media screen and (max-width: 360px) {
  body.marga-router-os .marga-os-theme-toggle {
    flex-basis: 27px;
    width: 27px !important;
    min-width: 27px;
    height: 27px !important;
    min-height: 27px;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
}

/* Universal day-mode controls ------------------------------------------ */

body.marga-ui .marga-theme-toggle {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 36px;
  width: 36px !important;
  min-width: 36px;
  height: 36px !important;
  min-height: 36px;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(95, 126, 166, 0.28) !important;
  border-radius: 11px !important;
  color: #b9c9dd !important;
  background: rgba(8, 24, 43, 0.82) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
  cursor: pointer;
  isolation: isolate;
}

body.marga-ui .marga-theme-toggle:hover,
body.marga-ui .marga-theme-toggle:focus-visible {
  color: #ffd76b !important;
  border-color: rgba(255, 200, 72, 0.55) !important;
  outline: none;
}

body.marga-ui .marga-theme-toggle .marga-theme-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 160ms ease, transform 180ms ease;
}

body.marga-ui .marga-theme-icon--moon {
  opacity: 1;
  transform: scale(1);
}

body.marga-ui .marga-theme-icon--sun {
  opacity: 0;
  transform: scale(0.65) rotate(-40deg);
}

html[data-marga-theme="light"] body.marga-ui .marga-theme-icon--moon {
  opacity: 0;
  transform: scale(0.65) rotate(35deg);
}

html[data-marga-theme="light"] body.marga-ui .marga-theme-icon--sun {
  opacity: 1;
  transform: scale(1) rotate(0);
}

html[data-marga-theme="light"] body.marga-ui .marga-theme-toggle {
  color: #8f6400 !important;
  border-color: rgba(182, 126, 0, 0.24) !important;
  background: #fff3cb !important;
  box-shadow: 0 3px 10px rgba(74, 91, 112, 0.1), inset 0 1px rgba(255, 255, 255, 0.7);
}

html[data-marga-theme="light"] body.marga-ui,
html[data-marga-theme="light"] body.marga-ui * {
  scrollbar-color: #96a9bc #e2eaf1;
}

html[data-marga-theme="light"] body.marga-ui ::-webkit-scrollbar-track {
  background: #e2eaf1;
}

html[data-marga-theme="light"] body.marga-ui ::-webkit-scrollbar-thumb {
  border: 2px solid #e2eaf1;
  border-radius: 999px;
  background: #96a9bc;
}

body.marga-ui .marga-login-theme-toggle,
body.marga-ui .marga-status-theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1000;
}

/* Shared soft-light palette outside the router workspace ---------------- */

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) {
  --marga-day-bg: #e7edf3;
  --marga-day-bg-alt: #edf2f6;
  --marga-day-surface: #f5f7f9;
  --marga-day-surface-raised: #f8fafb;
  --marga-day-surface-soft: #edf2f6;
  --marga-day-border: rgba(55, 78, 105, 0.18);
  --marga-day-border-strong: rgba(55, 78, 105, 0.28);
  --marga-day-text: #0f172a;
  --marga-day-text-soft: #263548;
  --marga-day-muted: #334155;
  color: var(--marga-day-text) !important;
  background: linear-gradient(145deg, #e8eef4 0%, #dfe7ef 100%) fixed !important;
  color-scheme: light;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) h1,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) h2,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) h3,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) h4,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) h5,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) h6,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) strong,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) b,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) label,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) legend {
  color: var(--marga-day-text);
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) p,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) small,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .text-muted {
  color: var(--marga-day-text-soft) !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .card,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .box:not([class*="bg-"]),
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .panel {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: var(--marga-day-surface) !important;
  box-shadow: 0 10px 26px rgba(51, 71, 94, 0.08);
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .card-header,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .card-footer,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .box-header,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .panel-heading {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: var(--marga-day-surface-soft) !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .form-control,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .group-item,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) select,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) textarea {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border-strong) !important;
  background: var(--marga-day-surface-soft) !important;
  box-shadow: none !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) input::placeholder,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) textarea::placeholder {
  color: #334155 !important;
  opacity: 1;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) table {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: var(--marga-day-surface) !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) table th {
  color: #315b84 !important;
  border-color: var(--marga-day-border) !important;
  background: #e5edf4 !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) table td {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: var(--marga-day-surface) !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) table tbody tr:nth-child(even) td {
  background: #eef3f7 !important;
}

/* Login --------------------------------------------------------------- */

html[data-marga-theme="light"] body.marga-login-page {
  background:
    radial-gradient(circle at 14% 16%, rgba(45, 142, 229, 0.12), transparent 34%),
    radial-gradient(circle at 85% 88%, rgba(119, 85, 232, 0.09), transparent 34%),
    linear-gradient(145deg, #e7edf3, #dfe7ef) !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-card {
  border-color: rgba(59, 82, 110, 0.2) !important;
  background: #f5f7f9 !important;
  box-shadow: 0 24px 65px rgba(45, 65, 89, 0.17);
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-brand {
  border-color: rgba(59, 82, 110, 0.15) !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(45, 142, 229, 0.14), transparent 38%),
    linear-gradient(145deg, #eaf0f6, #e1e9f1) !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-form-panel {
  color: var(--marga-day-text) !important;
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-brand-copy strong,
html[data-marga-theme="light"] body.marga-login-page .marga-login-intro h1,
html[data-marga-theme="light"] body.marga-login-page .marga-login-heading h2,
html[data-marga-theme="light"] body.marga-login-page .marga-login-form label {
  color: #1b2d44 !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-brand-copy small,
html[data-marga-theme="light"] body.marga-login-page .marga-login-intro p,
html[data-marga-theme="light"] body.marga-login-page .marga-login-heading p,
html[data-marga-theme="light"] body.marga-login-page .marga-login-note {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-features span,
html[data-marga-theme="light"] body.marga-login-page .marga-login-assurance {
  color: #38516c !important;
  border-color: rgba(55, 78, 105, 0.16) !important;
  background: #eaf0f5 !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-assurance strong {
  color: #24405e !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-assurance span {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-input-wrap {
  border-color: rgba(55, 78, 105, 0.24) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-input-wrap i {
  color: #64788e !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-button,
html[data-marga-theme="light"] body.marga-login-page .marga-eyebrow {
  color: #fff !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-intro .marga-eyebrow,
html[data-marga-theme="light"] body.marga-login-page .marga-login-heading .marga-eyebrow {
  color: #4f5ed0 !important;
}

/* Legacy admin and router settings shell ------------------------------- */

html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .navbar {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: rgba(245, 247, 249, 0.97) !important;
  box-shadow: 0 8px 22px rgba(50, 70, 94, 0.08);
}

html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .navbar #cpage,
html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .navbar .marga-brand-copy strong,
html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .navbar .marga-brand-copy small {
  color: var(--marga-day-text) !important;
}

html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .sidenav,
html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .marga-mobile-nav {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) #main,
html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .wrapper,
html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .content-wrapper {
  color: var(--marga-day-text) !important;
  background: #e7edf3 !important;
}

html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .sidenav a,
html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .sidenav button {
  color: #395067 !important;
}

html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .sidenav a:hover {
  color: #176bb3 !important;
  background: #e2ebf3 !important;
}

html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .sidenav a.active,
html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .marga-mobile-nav a.active {
  color: #fff !important;
  background: linear-gradient(135deg, #4c6ff3, #268fe8) !important;
}

/* Admin Settings and About --------------------------------------------- */

html[data-marga-theme="light"] body.marga-admin-settings-page {
  --admin-bg: #e7edf3;
  --admin-bg-alt: #edf2f6;
  --admin-panel: rgba(245, 247, 249, 0.97);
  --admin-panel-raised: #f7f9fa;
  --admin-panel-soft: #edf2f6;
  --admin-border: rgba(55, 78, 105, 0.17);
  --admin-border-strong: rgba(55, 78, 105, 0.27);
  --admin-text: #1c2d42;
  --admin-text-soft: #4e6278;
  --admin-text-muted: #718196;
  color: var(--admin-text) !important;
  background: #e7edf3 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .navbar,
html[data-marga-theme="light"] body.marga-admin-settings-page .sidenav,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-account-menu {
  color: var(--admin-text) !important;
  border-color: var(--admin-border) !important;
  background: rgba(245, 247, 249, 0.98) !important;
  box-shadow: 0 10px 28px rgba(49, 68, 91, 0.08);
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-sidebar-head,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-sidebar-brand {
  background: #edf2f6 !important;
}

@media screen and (min-width: 801px) {
  html[data-marga-theme="light"] body.marga-admin-settings-page .sidenav::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 56px;
    background: #edf2f6;
    pointer-events: none;
  }

  html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-sidebar-head {
    position: relative;
    z-index: 1;
  }
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-global-search,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-account-button,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-search,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-filter,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-field > div,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-preference {
  color: var(--admin-text) !important;
  border-color: var(--admin-border) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-global-search input,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-search input,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-field input {
  color: var(--admin-text) !important;
  background: transparent !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-account-copy strong,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-title h2,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-identity strong,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-details strong,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-field > span,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-preference strong {
  color: var(--admin-text) !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-account-copy small,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-title p,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-details span,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-field small,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-preference small {
  color: var(--admin-text-soft) !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-stat,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-management,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile {
  color: var(--admin-text) !important;
  border-color: var(--admin-border) !important;
  background: #f5f7f9 !important;
  box-shadow: 0 12px 30px rgba(45, 65, 89, 0.08);
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-toolbar,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table-wrap,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-body,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-actions {
  color: var(--admin-text) !important;
  border-color: var(--admin-border) !important;
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table td {
  color: var(--admin-text) !important;
  border-color: var(--admin-border) !important;
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table th {
  color: #365e84 !important;
  border-color: var(--admin-border) !important;
  background: #e5edf4 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table thead {
  color: #365e84 !important;
  background: #e5edf4 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table tbody tr:nth-child(even) td,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table tbody tr[data-router-row]:hover td {
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-hero {
  color: var(--admin-text) !important;
  border-color: var(--admin-border) !important;
  background:
    radial-gradient(circle at 90% 20%, rgba(74, 111, 243, 0.13), transparent 38%),
    linear-gradient(145deg, #e7eef8, #e2e9f2) !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-hero h2,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-person strong {
  color: #1c2d42 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-hero p,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-person small {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-limit-notice {
  color: #735411 !important;
  border-color: rgba(176, 123, 0, 0.28) !important;
  background: #fbf1d9 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-kicker {
  color: #4f5fc3 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-add-router.is-locked {
  color: #855c00 !important;
  border-color: rgba(164, 112, 0, 0.27) !important;
  background: #f8edd4 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .sidenav a:not(.active),
html[data-marga-theme="light"] body.marga-admin-settings-page .sidenav .marga-admin-sidebar-scroll > a:not(.active) {
  color: #3d536a !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-page-footer {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-page-footer a {
  color: #3d536a !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-header-status {
  color: #263548 !important;
  border-color: var(--admin-border) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .marga-sidebar-branding {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(76, 111, 243, 0.1), transparent 42%),
    #e8eef4 !important;
}

html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .marga-sidebar-branding strong,
html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .marga-sidebar-branding span {
  color: var(--marga-day-text) !important;
}

html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .marga-topbar-context,
html[data-marga-theme="light"] body.marga-app-page:not(.marga-router-os) .navbar #logout {
  color: #3f566d !important;
}

/* About is shared by the admin and router shells. */
html[data-marga-theme="light"] body.marga-ui .marga-about-hero {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.18) !important;
  background:
    radial-gradient(circle at 90% 18%, rgba(38, 143, 232, 0.12), transparent 40%),
    linear-gradient(145deg, #e6edf5, #dfe8f0) !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-kicker,
html[data-marga-theme="light"] body.marga-ui .marga-about-hero h3 {
  color: #1e3855 !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-hero p {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-services span {
  color: #39536e !important;
  border-color: rgba(55, 78, 105, 0.18) !important;
  background: #e8eef4 !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-panel {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.18) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-panel h4 {
  color: #243c57 !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-details > div {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.14) !important;
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-details dt {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-details dd,
html[data-marga-theme="light"] body.marga-ui .marga-about-panel--message p {
  color: #334d68 !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-details a {
  color: #176fae !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-footer,
html[data-marga-theme="light"] body.marga-ui .marga-about-footer strong {
  color: #334155 !important;
}

/* Public voucher status ------------------------------------------------ */

html[data-marga-theme="light"] body.marga-status-page {
  min-height: 100vh;
  color: var(--marga-day-text) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(45, 142, 229, 0.12), transparent 34%),
    linear-gradient(145deg, #e7edf3, #dfe7ef) !important;
}

html[data-marga-theme="light"] body.marga-status-page .marga-status-shell {
  color: var(--marga-day-text) !important;
  border: 1px solid var(--marga-day-border) !important;
  background: #f5f7f9 !important;
  box-shadow: 0 22px 55px rgba(45, 65, 89, 0.15);
}

html[data-marga-theme="light"] body.marga-status-page .marga-status-brand,
html[data-marga-theme="light"] body.marga-status-page section,
html[data-marga-theme="light"] body.marga-status-page .card {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-status-page h3,
html[data-marga-theme="light"] body.marga-status-page .marga-brand-copy strong {
  color: #1c2d42 !important;
}

html[data-marga-theme="light"] body.marga-status-page #date1,
html[data-marga-theme="light"] body.marga-status-page .marga-brand-copy small {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-ui.marga-status-page button[type="submit"] {
  color: #fff !important;
  border-color: #287ccc !important;
  background: linear-gradient(135deg, #4c6ff3, #268fe8) !important;
}

/* Router workspace: replace glare-white surfaces with softer tones ------ */

html[data-marga-theme="light"] body.marga-router-os {
  --os-panel: #f5f7f9;
  --os-panel-soft: #edf2f6;
  --os-panel-raised: #f7f9fa;
  --marga-surface: #f5f7f9;
  --marga-surface-2: #edf2f6;
  --marga-surface-raised: #f7f9fa;
  --console-surface: #f5f7f9;
  --console-surface-soft: #edf2f6;
  --dashboard-card-bg: #f5f7f9;
  --dashboard-card-soft: #edf2f6;
  background: #e7edf3 !important;
}

html[data-marga-theme="light"] body.marga-router-os .navbar,
html[data-marga-theme="light"] body.marga-router-os .marga-os-header {
  background: rgba(245, 247, 249, 0.97) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-header-actions {
  border-color: rgba(55, 78, 105, 0.19) !important;
  background: #edf2f6 !important;
  box-shadow: 0 4px 12px rgba(49, 68, 91, 0.08) !important;
}

html[data-marga-theme="light"] body.marga-router-os .sidenav,
html[data-marga-theme="light"] body.marga-router-os .marga-os-menu {
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-desktop-sidebar-header {
  border-color: rgba(55, 78, 105, 0.16) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os #sidenav .marga-mobile-sidebar-branding {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.17) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .card,
html[data-marga-theme="light"] body.marga-router-os .marga-data-card,
html[data-marga-theme="light"] body.marga-router-os .marga-log-card,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-card,
html[data-marga-theme="light"] body.marga-router-os .marga-dashboard-card,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-panel {
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container .card,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .card > .card-body,
html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .card,
html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-dashboard-section,
html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-income-card,
html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-log-stack {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.18) !important;
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-os-resources-grid {
  border-color: rgba(55, 78, 105, 0.15) !important;
  background: rgba(237, 242, 246, 0.88) !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-os-uptime-row,
html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-os-system-meta > article {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.15) !important;
  background: rgba(237, 242, 246, 0.9) !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-income-heading span,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-kicker,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-title > span {
  color: #176fae !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-income-metric.is-pppoe-customers strong {
  color: #176fae !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-income-metric.is-pppoe-paid strong {
  color: #087d5b !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-income-metric.is-pppoe-unpaid strong {
  color: #8b6100 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-income-metric.is-pppoe-income strong {
  color: #7550aa !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container .card.marga-data-card,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .card.marga-form-card,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .card.marga-full-workspace-card,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .card.marga-voucher-center-card,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .card.marga-template-variable-card,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-data-card > .card-body,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-form-card > .card-body,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-full-workspace-card > .card-body,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-voucher-center-card > .card-body,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-template-variable-card > .card-body,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-data-card .overflow,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-full-workspace-card .overflow,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-voucher-center-card .overflow,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-data-card .box-bordered,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table.marga-data-table,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table.marga-form-table,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table.marga-form-table td {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.18) !important;
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-form-card .card-body > form > div:first-child,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-generate-actions {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.16) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-data-header-actions a,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .card-header a:not(.btn),
html[data-marga-theme="light"] body.marga-router-os #main .main-container a.pointer:not(.btn) {
  color: #554ba6 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container a.text-info {
  color: #176fae !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container a.text-success {
  color: #087d5b !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container a.text-primary {
  color: #315fc5 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-voucher-profile-grid .marga-legacy-box {
  color: #233b56 !important;
  border-color: rgba(55, 78, 105, 0.2) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-voucher-profile-grid .marga-legacy-box h3,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-voucher-profile-grid .marga-legacy-box p,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-voucher-profile-grid .marga-legacy-box a {
  color: #29445f !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container table.marga-data-table td,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table.marga-form-table tr:nth-child(odd) td {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.16) !important;
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container table.marga-data-table tbody tr:nth-child(even) td,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table.marga-form-table tr:nth-child(even) td {
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container table,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table td,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-last-generate-table tr,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-last-generate-table td,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-finance-history-card table tr,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-finance-history-card table td,
html[data-marga-theme="light"] body.marga-router-os #main .main-container #financeInvoiceTable tr[data-finance-status],
html[data-marga-theme="light"] body.marga-router-os #main .main-container #financeInvoiceTable tr[data-finance-status] > td {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.16) !important;
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container table th {
  color: #315b84 !important;
  border-color: rgba(55, 78, 105, 0.18) !important;
  background: #e5edf4 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container table tbody tr:nth-child(even) td,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-last-generate-table tr:nth-child(even),
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-last-generate-table tr:nth-child(even) td {
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .main-container table td strong,
html[data-marga-theme="light"] body.marga-router-os #main .main-container .marga-log-empty strong {
  color: #314a64 !important;
}

html[data-marga-theme="light"] body.marga-router-os #trafficMonitor {
  border-color: rgba(55, 78, 105, 0.16) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article {
  color: #1c2d42 !important;
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article > span,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article > small {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary .is-customers > strong {
  color: #176fae !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary .is-unpaid > strong {
  color: #8b6100 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary .is-paid > strong {
  color: #087d5b !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary .is-disabled > strong,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary .is-unpriced > strong {
  color: #263548 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-logo-upload-guide {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.18) !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-logo-upload-guide strong {
  color: #243e5a !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-logo-upload-guide p,
html[data-marga-theme="light"] body.marga-router-os .marga-logo-upload-guide code {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-router-os .CodeMirror.cm-s-material,
html[data-marga-theme="light"] body.marga-router-os .cm-s-material .CodeMirror-scroll {
  color: #20364f !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .cm-s-material .CodeMirror-gutters {
  color: #334155 !important;
  border-color: rgba(55, 78, 105, 0.17) !important;
  background: #e3ebf2 !important;
}

html[data-marga-theme="light"] body.marga-router-os .cm-s-material .CodeMirror-linenumber {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-router-os .cm-s-material .CodeMirror-cursor {
  border-left-color: #1d6fb8 !important;
}

html[data-marga-theme="light"] body.marga-router-os .cm-s-material .CodeMirror-selected,
html[data-marga-theme="light"] body.marga-router-os .cm-s-material.CodeMirror-focused .CodeMirror-selected {
  background: #cfdef0 !important;
}

html[data-marga-theme="light"] body.marga-router-os .cm-s-material .cm-tag,
html[data-marga-theme="light"] body.marga-router-os .cm-s-material .cm-keyword {
  color: #7254c6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .cm-s-material .cm-attribute,
html[data-marga-theme="light"] body.marga-router-os .cm-s-material .cm-property {
  color: #176fae !important;
}

html[data-marga-theme="light"] body.marga-router-os .cm-s-material .cm-string,
html[data-marga-theme="light"] body.marga-router-os .cm-s-material .cm-number {
  color: #168362 !important;
}

html[data-marga-theme="light"] body.marga-router-os .cm-s-material .cm-comment {
  color: #6e7e91 !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .CodeMirror.cm-s-material,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .CodeMirror-scroll {
  color: #20364f !important;
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .CodeMirror-gutters {
  color: #334155 !important;
  border-color: rgba(55, 78, 105, 0.17) !important;
  background: #e3ebf2 !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .CodeMirror-linenumber {
  color: #334155 !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .CodeMirror-cursor {
  border-left-color: #1d6fb8 !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .CodeMirror-selected,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material.CodeMirror-focused .CodeMirror-selected {
  background: #cfdef0 !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .cm-tag,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .cm-keyword {
  color: #7254c6 !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .cm-attribute,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .cm-property {
  color: #176fae !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .cm-string,
html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .cm-number {
  color: #168362 !important;
}

html[data-marga-theme="light"] body.marga-ui:not(.marga-router-os) .cm-s-material .cm-comment {
  color: #6e7e91 !important;
}

html[data-marga-theme="light"] body.marga-router-os .modal-window {
  color: #1c2d42 !important;
  background: rgba(61, 78, 99, 0.32) !important;
}

html[data-marga-theme="light"] body.marga-router-os .modal-window > div {
  color: #1c2d42 !important;
  border-color: rgba(55, 78, 105, 0.2) !important;
  background: #f5f7f9 !important;
  box-shadow: 0 18px 44px rgba(45, 65, 89, 0.17) !important;
}

html[data-marga-theme="light"] body.marga-router-os .modal-window h1,
html[data-marga-theme="light"] body.marga-router-os .modal-window h2,
html[data-marga-theme="light"] body.marga-router-os .modal-window h3,
html[data-marga-theme="light"] body.marga-router-os .modal-window h4,
html[data-marga-theme="light"] body.marga-router-os .modal-window p {
  color: #263d58 !important;
}

html[data-marga-theme="light"] body.marga-router-os .card-header,
html[data-marga-theme="light"] body.marga-router-os .card-footer,
html[data-marga-theme="light"] body.marga-router-os .marga-data-toolbar,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-toolbar {
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os table,
html[data-marga-theme="light"] body.marga-router-os table td,
html[data-marga-theme="light"] body.marga-router-os .marga-dashboard #r_3 > .marga-log-card table td,
html[data-marga-theme="light"] body.marga-router-os .marga-dashboard #r_3 > .marga-log-card .overflow {
  background: #f5f7f9 !important;
}

html[data-marga-theme="light"] body.marga-router-os table th,
html[data-marga-theme="light"] body.marga-router-os .marga-dashboard #r_3 > .marga-log-card table th {
  background: #e5edf4 !important;
}

html[data-marga-theme="light"] body.marga-router-os table tbody tr:nth-child(even) td,
html[data-marga-theme="light"] body.marga-router-os .marga-dashboard #r_3 > .marga-log-card table tbody tr:nth-child(even) td {
  background: #eef3f7 !important;
}

html[data-marga-theme="light"] body.marga-router-os .form-control,
html[data-marga-theme="light"] body.marga-router-os .group-item,
html[data-marga-theme="light"] body.marga-router-os input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html[data-marga-theme="light"] body.marga-router-os select,
html[data-marga-theme="light"] body.marga-router-os textarea {
  background: #edf2f6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-dock {
  background: linear-gradient(180deg, rgba(247, 249, 250, 0.98), rgba(237, 242, 246, 0.98)) !important;
}

@media screen and (max-width: 480px) {
  body.marga-ui .marga-admin-theme-toggle,
  body.marga-ui .marga-login-theme-toggle,
  body.marga-ui .marga-status-theme-toggle {
    flex-basis: 30px;
    width: 30px !important;
    min-width: 30px;
    height: 30px !important;
    min-height: 30px;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  body.marga-ui .marga-login-theme-toggle,
  body.marga-ui .marga-status-theme-toggle {
    top: 10px;
    right: 10px;
  }
}

/* Day-theme clarity pass -------------------------------------------------
 * Keeps the page soft, while restoring the visual hierarchy that was lost
 * when every dark surface was flattened into the same pale gray.
 */

html[data-marga-theme="light"] body.marga-ui {
  --marga-day-page: #e6edf4;
  --marga-day-surface: #f8fafc;
  --marga-day-surface-soft: #edf3f8;
  --marga-day-surface-strong: #ffffff;
  --marga-day-border: rgba(45, 69, 96, 0.26);
  --marga-day-border-soft: rgba(45, 69, 96, 0.18);
  --marga-day-text: #0f172a;
  --marga-day-text-soft: #263548;
  --marga-day-muted: #334155;
  --marga-day-blue: #1769aa;
  --marga-day-cyan: #087d9d;
  --marga-day-green: #08775a;
  --marga-day-amber: #875900;
  --marga-day-purple: #6445a4;
  --marga-day-pink: #9b376d;
  --marga-day-red: #ad394c;
}

html[data-marga-theme="light"] body.marga-router-os {
  --os-bg: var(--marga-day-page);
  --os-bg-deep: #dfe8f1;
  --os-panel: var(--marga-day-surface);
  --os-panel-soft: var(--marga-day-surface-soft);
  --os-panel-raised: var(--marga-day-surface-strong);
  --os-border: var(--marga-day-border);
  --os-border-soft: var(--marga-day-border-soft);
  --os-text: var(--marga-day-text);
  --os-muted: var(--marga-day-muted);
  --marga-surface: var(--marga-day-surface);
  --marga-surface-2: var(--marga-day-surface-soft);
  --marga-surface-raised: var(--marga-day-surface-strong);
  --console-bg: var(--marga-day-page);
  --console-sidebar: #eef4f9;
  --console-topbar: var(--marga-day-surface);
  --console-surface: var(--marga-day-surface);
  --console-surface-alt: var(--marga-day-surface-soft);
  --console-surface-hover: #e1ecf6;
  --console-border-soft: var(--marga-day-border-soft);
  --console-border: var(--marga-day-border);
  --console-text: var(--marga-day-text);
  --console-text-secondary: var(--marga-day-text-soft);
  --console-text-muted: var(--marga-day-muted);
  --dashboard-card-bg: var(--marga-day-surface);
  --dashboard-card-bg-subtle: var(--marga-day-surface-soft);
  --dashboard-card-border: var(--marga-day-border);
  --dashboard-card-border-hover: rgba(35, 98, 157, 0.42);
  --dashboard-card-shadow: 0 5px 14px rgba(28, 49, 73, 0.08);
  --dashboard-card-shadow-hover: 0 8px 20px rgba(28, 49, 73, 0.12);
  background:
    radial-gradient(circle at 50% -12%, rgba(57, 125, 194, 0.13), transparent 34%),
    linear-gradient(180deg, #eaf0f6, #e2eaf2) !important;
}

/* Shared card, panel, modal, and form surfaces. */
html[data-marga-theme="light"] body.marga-ui .card,
html[data-marga-theme="light"] body.marga-ui .panel,
html[data-marga-theme="light"] body.marga-ui .modal-window > div,
html[data-marga-theme="light"] body.marga-router-os .marga-data-card,
html[data-marga-theme="light"] body.marga-router-os .marga-form-card,
html[data-marga-theme="light"] body.marga-router-os .marga-full-workspace-card,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-card,
html[data-marga-theme="light"] body.marga-router-os .marga-log-card,
html[data-marga-theme="light"] body.marga-router-os .marga-dashboard-section,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-panel,
html[data-marga-theme="light"] body.marga-router-os .marga-legacy-box:not([class*="bg-"]) {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: var(--marga-day-surface) !important;
  box-shadow:
    0 7px 20px rgba(28, 49, 73, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.72) !important;
}

html[data-marga-theme="light"] body.marga-ui .card-header,
html[data-marga-theme="light"] body.marga-ui .card-footer,
html[data-marga-theme="light"] body.marga-ui .box-header,
html[data-marga-theme="light"] body.marga-ui .panel-heading,
html[data-marga-theme="light"] body.marga-router-os .marga-data-toolbar,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-toolbar,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-table-toolbar,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-period-nav,
html[data-marga-theme="light"] body.marga-router-os .marga-generate-actions {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border-soft) !important;
  background: linear-gradient(180deg, #f0f5f9, #e9f0f6) !important;
}

html[data-marga-theme="light"] body.marga-ui .card-body,
html[data-marga-theme="light"] body.marga-ui .panel-body,
html[data-marga-theme="light"] body.marga-router-os .overflow,
html[data-marga-theme="light"] body.marga-router-os .box-bordered {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border-soft) !important;
  background: var(--marga-day-surface) !important;
}

html[data-marga-theme="light"] body.marga-ui .card-header > i,
html[data-marga-theme="light"] body.marga-ui .card-header > div:first-child > i,
html[data-marga-theme="light"] body.marga-ui .box-header > i,
html[data-marga-theme="light"] body.marga-ui .panel-heading > i {
  color: var(--marga-day-blue) !important;
}

html[data-marga-theme="light"] body.marga-ui h1,
html[data-marga-theme="light"] body.marga-ui h2,
html[data-marga-theme="light"] body.marga-ui h3,
html[data-marga-theme="light"] body.marga-ui h4,
html[data-marga-theme="light"] body.marga-ui h5,
html[data-marga-theme="light"] body.marga-ui h6,
html[data-marga-theme="light"] body.marga-ui strong,
html[data-marga-theme="light"] body.marga-ui b,
html[data-marga-theme="light"] body.marga-ui label,
html[data-marga-theme="light"] body.marga-ui legend {
  color: var(--marga-day-text) !important;
}

html[data-marga-theme="light"] body.marga-ui p,
html[data-marga-theme="light"] body.marga-ui small,
html[data-marga-theme="light"] body.marga-ui .text-muted {
  color: var(--marga-day-text-soft) !important;
}

html[data-marga-theme="light"] body.marga-ui a:not(.btn):not(.active) {
  color: var(--marga-day-blue);
}

/* Inputs stay distinct from their parent cards and preserve focus feedback. */
html[data-marga-theme="light"] body.marga-ui .form-control,
html[data-marga-theme="light"] body.marga-ui .group-item,
html[data-marga-theme="light"] body.marga-ui input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html[data-marga-theme="light"] body.marga-ui select,
html[data-marga-theme="light"] body.marga-ui textarea {
  color: var(--marga-day-text) !important;
  border-color: rgba(43, 70, 101, 0.34) !important;
  background: #edf3f8 !important;
  box-shadow: inset 0 1px 2px rgba(35, 55, 77, 0.04) !important;
}

html[data-marga-theme="light"] body.marga-ui .form-control:hover,
html[data-marga-theme="light"] body.marga-ui .group-item:hover,
html[data-marga-theme="light"] body.marga-ui input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):hover,
html[data-marga-theme="light"] body.marga-ui select:hover,
html[data-marga-theme="light"] body.marga-ui textarea:hover {
  border-color: rgba(29, 101, 164, 0.48) !important;
  background: #f3f7fa !important;
}

html[data-marga-theme="light"] body.marga-ui .form-control:focus,
html[data-marga-theme="light"] body.marga-ui .group-item:focus,
html[data-marga-theme="light"] body.marga-ui input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
html[data-marga-theme="light"] body.marga-ui select:focus,
html[data-marga-theme="light"] body.marga-ui textarea:focus {
  border-color: #2779bd !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(39, 121, 189, 0.12) !important;
  outline: none;
}

html[data-marga-theme="light"] body.marga-ui input::placeholder,
html[data-marga-theme="light"] body.marga-ui textarea::placeholder {
  color: #334155 !important;
  opacity: 1;
}

/* Dense tables: strong header, readable zebra rows, visible grid. */
html[data-marga-theme="light"] body.marga-ui table,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: var(--marga-day-surface) !important;
}

html[data-marga-theme="light"] body.marga-ui table th,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table th {
  color: #264d72 !important;
  border-color: rgba(43, 70, 101, 0.29) !important;
  background: #dce8f2 !important;
}

html[data-marga-theme="light"] body.marga-ui table td,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table td,
html[data-marga-theme="light"] body.marga-router-os #main .main-container #financeInvoiceTable tr[data-finance-status] > td {
  color: var(--marga-day-text) !important;
  border-color: rgba(43, 70, 101, 0.2) !important;
  background: #f8fafc !important;
}

html[data-marga-theme="light"] body.marga-ui table tbody tr:nth-child(even) td,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table tbody tr:nth-child(even) td {
  background: #edf3f8 !important;
}

html[data-marga-theme="light"] body.marga-ui table tbody tr:hover td,
html[data-marga-theme="light"] body.marga-router-os #main .main-container table tbody tr:hover td {
  background: #e1ecf6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-empty-state-row td {
  color: var(--marga-day-text-soft) !important;
  border-color: rgba(23, 105, 170, 0.36) !important;
  background: #eaf3fa !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-empty-state-icon {
  color: var(--marga-day-blue) !important;
  border-color: rgba(23, 105, 170, 0.32) !important;
  background: #dceefb !important;
}

/* Utility colors keep actions and statuses immediately recognizable. */
html[data-marga-theme="light"] body.marga-ui .text-primary,
html[data-marga-theme="light"] body.marga-ui .text-blue,
html[data-marga-theme="light"] body.marga-ui .text-indigo,
html[data-marga-theme="light"] body.marga-ui .text-purple {
  color: var(--marga-day-purple) !important;
}

html[data-marga-theme="light"] body.marga-ui .text-success,
html[data-marga-theme="light"] body.marga-ui .text-green,
html[data-marga-theme="light"] body.marga-ui .text-teal {
  color: var(--marga-day-green) !important;
}

html[data-marga-theme="light"] body.marga-ui .text-info,
html[data-marga-theme="light"] body.marga-ui .text-cyan,
html[data-marga-theme="light"] body.marga-ui .text-light-blue {
  color: var(--marga-day-cyan) !important;
}

html[data-marga-theme="light"] body.marga-ui .text-warning,
html[data-marga-theme="light"] body.marga-ui .text-yellow,
html[data-marga-theme="light"] body.marga-ui .text-orange {
  color: var(--marga-day-amber) !important;
}

html[data-marga-theme="light"] body.marga-ui .text-danger,
html[data-marga-theme="light"] body.marga-ui .text-red,
html[data-marga-theme="light"] body.marga-ui .text-pink {
  color: var(--marga-day-red) !important;
}

html[data-marga-theme="light"] body.marga-ui .btn.bg-primary,
html[data-marga-theme="light"] body.marga-ui .btn-login.bg-primary,
html[data-marga-theme="light"] body.marga-ui input.bg-primary {
  color: #ffffff !important;
  border-color: #3763cf !important;
  background: linear-gradient(100deg, #6946dc, #3f64d8 55%, #087d9d) !important;
}

html[data-marga-theme="light"] body.marga-ui .btn.bg-secondary {
  color: #ffffff !important;
  border-color: #4e5d72 !important;
  background: #596a80 !important;
}

html[data-marga-theme="light"] body.marga-ui .btn.bg-success,
html[data-marga-theme="light"] body.marga-ui .btn.bg-green {
  color: #ffffff !important;
  border-color: #065f49 !important;
  background: #08745a !important;
}

html[data-marga-theme="light"] body.marga-ui .btn.bg-info,
html[data-marga-theme="light"] body.marga-ui .btn.bg-cyan,
html[data-marga-theme="light"] body.marga-ui .btn.bg-light-blue {
  color: #ffffff !important;
  border-color: #07657f !important;
  background: #087d9d !important;
}

html[data-marga-theme="light"] body.marga-ui .btn.bg-warning,
html[data-marga-theme="light"] body.marga-ui .btn.bg-yellow,
html[data-marga-theme="light"] body.marga-ui .btn.bg-orange {
  color: #ffffff !important;
  border-color: #704800 !important;
  background: #8a5900 !important;
}

html[data-marga-theme="light"] body.marga-ui .btn.bg-danger,
html[data-marga-theme="light"] body.marga-ui .btn.bg-red {
  color: #ffffff !important;
  border-color: #a9344b !important;
  background: #c9445d !important;
}

html[data-marga-theme="light"] body.marga-ui .btn.bg-pink,
html[data-marga-theme="light"] body.marga-ui .btn.bg-purple,
html[data-marga-theme="light"] body.marga-ui .btn.bg-indigo {
  color: #ffffff !important;
  border-color: #6b3ca5 !important;
  background: #8051ba !important;
}

html[data-marga-theme="light"] body.marga-ui .btn[class*="bg-"] i,
html[data-marga-theme="light"] body.marga-ui .btn[class*="bg-"] span {
  color: inherit !important;
}

html[data-marga-theme="light"] body.marga-ui .alert.bg-danger,
html[data-marga-theme="light"] body.marga-ui .alert.bg-red,
html[data-marga-theme="light"] body.marga-ui .box.bg-danger {
  color: #762638 !important;
  border-color: rgba(173, 57, 76, 0.42) !important;
  background: #f8dfe4 !important;
}

html[data-marga-theme="light"] body.marga-ui .alert.bg-success,
html[data-marga-theme="light"] body.marga-ui .alert.bg-green,
html[data-marga-theme="light"] body.marga-ui .box.bg-success {
  color: #075a45 !important;
  border-color: rgba(8, 119, 90, 0.4) !important;
  background: #daf2e9 !important;
}

/* Voucher/profile cards keep color without becoming dark blocks. */
html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: #eef3f8 !important;
  box-shadow: 0 5px 14px rgba(28, 49, 73, 0.08) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-blue,
html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-primary {
  border-color: rgba(23, 105, 170, 0.4) !important;
  background: linear-gradient(135deg, #deedf9, #eef5fb) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-green,
html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-success {
  border-color: rgba(8, 119, 90, 0.4) !important;
  background: linear-gradient(135deg, #daf2e9, #edf8f4) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-yellow,
html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-warning {
  border-color: rgba(135, 89, 0, 0.42) !important;
  background: linear-gradient(135deg, #f7e9c8, #fbf4e4) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-red,
html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-danger,
html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-pink {
  border-color: rgba(155, 55, 109, 0.4) !important;
  background: linear-gradient(135deg, #f5dfe9, #faedf3) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-purple,
html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box.bg-indigo {
  border-color: rgba(100, 69, 164, 0.4) !important;
  background: linear-gradient(135deg, #e8e0f6, #f3eefb) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box h3,
html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box p,
html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box a {
  color: var(--marga-day-text) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-voucher-profile-grid .box-group-icon {
  color: #ffffff !important;
  border-color: rgba(23, 105, 170, 0.36) !important;
  background: var(--marga-day-blue) !important;
  box-shadow: 0 5px 12px rgba(23, 105, 170, 0.18) !important;
}

/* Dashboard color coding and icon visibility. */
html[data-marga-theme="light"] body.marga-router-os .marga-os-panel {
  color: var(--marga-day-text) !important;
  border-color: rgba(23, 105, 170, 0.34) !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(23, 105, 170, 0.12), transparent 34%),
    linear-gradient(145deg, #f8fafc, #edf4fa) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-panel--resources {
  border-color: rgba(8, 119, 90, 0.34) !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(8, 119, 90, 0.12), transparent 34%),
    linear-gradient(145deg, #f8fafc, #edf7f3) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-heading-icon,
html[data-marga-theme="light"] body.marga-router-os .marga-os-service-icon,
html[data-marga-theme="light"] body.marga-router-os .marga-os-shortcuts-icon {
  color: #ffffff !important;
  border-color: #1769aa !important;
  background: #237db8 !important;
  box-shadow: 0 5px 13px rgba(23, 105, 170, 0.2) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-panel--resources .marga-os-heading-icon {
  color: #ffffff !important;
  border-color: #08775a !important;
  background: #15906f !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-service-card .marga-action-tile[class] {
  border-color: rgba(var(--tile-accent-rgb), 0.42) !important;
  background:
    linear-gradient(135deg, rgba(var(--tile-accent-rgb), 0.14), rgba(var(--tile-accent-rgb), 0.045)),
    #f8fafc !important;
  box-shadow: 0 5px 14px rgba(28, 49, 73, 0.08) !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-service-card .marga-action-tile[class] h1,
html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-service-card .marga-action-tile[class] h1 span {
  color: var(--marga-day-text) !important;
}

html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-service-card .marga-action-tile[class] h1 > i,
html[data-marga-theme="light"] body.marga-router-os #main .marga-dashboard .marga-service-card .marga-action-tile[class] > a > div:last-child > i {
  color: #ffffff !important;
  border-color: rgba(var(--tile-accent-rgb), 0.72) !important;
  background: var(--tile-accent) !important;
  box-shadow: 0 5px 12px rgba(var(--tile-accent-rgb), 0.2) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: #edf3f8 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-voucher-today,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-paid {
  border-color: rgba(8, 119, 90, 0.46) !important;
  background: linear-gradient(145deg, #dff3eb, #eff8f5) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-voucher-month,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-customers {
  border-color: rgba(8, 125, 157, 0.46) !important;
  background: linear-gradient(145deg, #dceff4, #edf7f9) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-income-today,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-unpaid {
  border-color: rgba(135, 89, 0, 0.46) !important;
  background: linear-gradient(145deg, #f7eacb, #fbf5e6) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-income-month,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-income {
  border-color: rgba(100, 69, 164, 0.46) !important;
  background: linear-gradient(145deg, #e8e1f6, #f4f0fa) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric > span,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric > small {
  color: var(--marga-day-text-soft) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-voucher-today > strong,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-paid > strong {
  color: var(--marga-day-green) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-voucher-month > strong,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-customers > strong {
  color: var(--marga-day-cyan) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-income-today > strong,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-unpaid > strong {
  color: var(--marga-day-amber) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-income-month > strong,
html[data-marga-theme="light"] body.marga-router-os .marga-income-metric.is-pppoe-income > strong {
  color: var(--marga-day-purple) !important;
}

/* Finance cards retain six clearly differentiated states. */
html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: #edf3f8 !important;
  box-shadow: 0 5px 14px rgba(28, 49, 73, 0.08) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article.is-customers {
  border-color: rgba(23, 105, 170, 0.45) !important;
  background: linear-gradient(145deg, #deedf9, #eef5fb) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article.is-unpaid {
  border-color: rgba(173, 57, 76, 0.45) !important;
  background: linear-gradient(145deg, #f7dfe4, #fbedf0) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article.is-paid {
  border-color: rgba(8, 119, 90, 0.45) !important;
  background: linear-gradient(145deg, #daf2e9, #edf8f4) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article.is-income {
  border-color: rgba(100, 69, 164, 0.45) !important;
  background: linear-gradient(145deg, #e8e0f6, #f3eefb) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article.is-disabled,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article.is-unpriced {
  border-color: rgba(135, 89, 0, 0.45) !important;
  background: linear-gradient(145deg, #f7e9c8, #fbf4e4) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article > span,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article > small {
  color: var(--marga-day-text-soft) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary article > i {
  color: #ffffff !important;
  border: 1px solid rgba(23, 105, 170, 0.35);
  background: var(--marga-day-blue) !important;
  box-shadow: 0 5px 12px rgba(23, 105, 170, 0.18);
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary .is-unpaid > i {
  border-color: rgba(173, 57, 76, 0.38);
  background: #c9445d !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary .is-paid > i {
  border-color: rgba(8, 119, 90, 0.38);
  background: #10936d !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary .is-income > i {
  border-color: rgba(100, 69, 164, 0.38);
  background: #8051ba !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary .is-disabled > i,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-summary .is-unpriced > i {
  border-color: rgba(135, 89, 0, 0.38);
  background: #b87909 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-badge {
  border-width: 1px !important;
  font-weight: 750;
}

/* Settings/editor/help cards that previously retained dark backgrounds. */
html[data-marga-theme="light"] body.marga-router-os .marga-logo-upload-form,
html[data-marga-theme="light"] body.marga-router-os .marga-logo-upload-guide,
html[data-marga-theme="light"] body.marga-router-os .marga-last-generate-card,
html[data-marga-theme="light"] body.marga-router-os .marga-template-variable-card,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-info-card,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-status-card,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-history-card {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: var(--marga-day-surface) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-logo-upload-icon {
  color: #ffffff !important;
  border-color: #6445a4 !important;
  background: #8051ba !important;
  box-shadow: 0 5px 12px rgba(100, 69, 164, 0.18) !important;
}

html[data-marga-theme="light"] body.marga-ui .bg-dark:not(textarea),
html[data-marga-theme="light"] body.marga-ui .bg-black:not(textarea) {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: #e7eef5 !important;
}

html[data-marga-theme="light"] body.marga-ui .CodeMirror.cm-s-material,
html[data-marga-theme="light"] body.marga-ui .cm-s-material .CodeMirror-scroll {
  color: #19334d !important;
  border-color: var(--marga-day-border) !important;
  background: #e8eff6 !important;
}

/* Admin workspace: colored summary cards and visible controls. */
html[data-marga-theme="light"] body.marga-admin-settings-page {
  --admin-bg: var(--marga-day-page);
  --admin-bg-alt: #dfe8f1;
  --admin-panel: rgba(248, 250, 252, 0.98);
  --admin-panel-raised: #ffffff;
  --admin-panel-soft: #edf3f8;
  --admin-border: var(--marga-day-border);
  --admin-border-strong: rgba(45, 69, 96, 0.38);
  --admin-text: var(--marga-day-text);
  --admin-text-soft: var(--marga-day-text-soft);
  --admin-text-muted: var(--marga-day-muted);
  background: linear-gradient(180deg, #eaf0f6, #e2eaf2) !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-stat {
  border-color: rgba(var(--stat-color-rgb), 0.42) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--stat-color-rgb), 0.15), transparent 42%),
    linear-gradient(145deg, #f8fafc, #edf3f8) !important;
  box-shadow: 0 7px 20px rgba(28, 49, 73, 0.08) !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-stat-icon {
  color: #ffffff !important;
  border-color: rgba(var(--stat-color-rgb), 0.9) !important;
  background: rgb(var(--stat-color-rgb)) !important;
  box-shadow: 0 6px 16px rgba(var(--stat-color-rgb), 0.22) !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-stat-icon::after {
  border-color: rgba(var(--stat-color-rgb), 0.32) !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-management,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table-wrap,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-body {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: var(--marga-day-surface) !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table th {
  color: #264d72 !important;
  background: #dce8f2 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table td {
  color: var(--marga-day-text) !important;
  background: #f8fafc !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table tr:nth-child(even) td,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-table tr:hover td {
  background: #e9f1f7 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-account-button,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-global-search,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-search,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-filter,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-preference {
  color: var(--marga-day-text) !important;
  border-color: rgba(43, 70, 101, 0.32) !important;
  background: #eaf1f7 !important;
}

/* Login, public status, and About use the same calm, readable palette. */
html[data-marga-theme="light"] body.marga-login-page {
  background:
    radial-gradient(circle at 14% 16%, rgba(23, 105, 170, 0.16), transparent 34%),
    radial-gradient(circle at 85% 88%, rgba(100, 69, 164, 0.12), transparent 34%),
    linear-gradient(145deg, #e7eef5, #dce6ef) !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-card {
  border-color: rgba(43, 70, 101, 0.32) !important;
  background: #f8fafc !important;
  box-shadow: 0 24px 60px rgba(28, 49, 73, 0.18) !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-brand {
  border-color: rgba(23, 105, 170, 0.24) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(23, 105, 170, 0.18), transparent 40%),
    linear-gradient(145deg, #e6f1fa, #dfeaf4) !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-form-panel {
  color: var(--marga-day-text) !important;
  background: #f8fafc !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-features span {
  color: #29465f !important;
  border-color: rgba(23, 105, 170, 0.3) !important;
  background: #dcecf8 !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-features span:nth-child(2) {
  border-color: rgba(100, 69, 164, 0.3) !important;
  background: #e9e2f6 !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-features span:nth-child(3) {
  border-color: rgba(8, 119, 90, 0.3) !important;
  background: #dff2eb !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-features span:nth-child(1) i {
  color: var(--marga-day-blue) !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-features span:nth-child(2) i {
  color: var(--marga-day-purple) !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-login-features span:nth-child(3) i {
  color: var(--marga-day-green) !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-input-wrap,
html[data-marga-theme="light"] body.marga-login-page .marga-login-assurance {
  color: var(--marga-day-text) !important;
  border-color: rgba(43, 70, 101, 0.32) !important;
  background: #eaf1f7 !important;
}

html[data-marga-theme="light"] body.marga-login-page .marga-input-wrap i {
  color: var(--marga-day-blue) !important;
}

html[data-marga-theme="light"] body.marga-status-page {
  color: var(--marga-day-text) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(23, 105, 170, 0.15), transparent 34%),
    linear-gradient(145deg, #e7eef5, #dce6ef) !important;
}

html[data-marga-theme="light"] body.marga-status-page .marga-status-shell {
  color: var(--marga-day-text) !important;
  border-color: rgba(43, 70, 101, 0.32) !important;
  background: #f8fafc !important;
  box-shadow: 0 22px 52px rgba(28, 49, 73, 0.16) !important;
}

html[data-marga-theme="light"] body.marga-status-page .marga-status-brand,
html[data-marga-theme="light"] body.marga-status-page section,
html[data-marga-theme="light"] body.marga-status-page .card {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: #eef4f9 !important;
}

html[data-marga-theme="light"] body.marga-status-page button[type="submit"] {
  color: #ffffff !important;
  border-color: #1769aa !important;
  background: linear-gradient(100deg, #1769aa, #087d9d) !important;
  box-shadow: 0 5px 12px rgba(23, 105, 170, 0.16) !important;
}

html[data-marga-theme="light"] body.marga-ui.marga-status-page button[type="submit"] i {
  color: inherit !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-hero {
  color: var(--marga-day-text) !important;
  border-color: rgba(23, 105, 170, 0.32) !important;
  background:
    radial-gradient(circle at 90% 18%, rgba(23, 105, 170, 0.16), transparent 40%),
    linear-gradient(145deg, #e4f0f9, #e9eff5) !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-services span {
  color: #29465f !important;
  border-color: rgba(23, 105, 170, 0.28) !important;
  background: #dcecf8 !important;
}

html[data-marga-theme="light"] body.marga-ui .marga-about-panel,
html[data-marga-theme="light"] body.marga-ui .marga-about-details > div {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: #f4f7fa !important;
}

/* Mobile finance rows act as cards, so keep their complete surface visible. */
@media screen and (max-width: 640px) {
  html[data-marga-theme="light"] body.marga-router-os #financeInvoiceTable tr[data-finance-status] {
    color: var(--marga-day-text) !important;
    border-color: var(--marga-day-border) !important;
    background: #f8fafc !important;
    box-shadow: 0 5px 14px rgba(28, 49, 73, 0.08) !important;
  }

  html[data-marga-theme="light"] body.marga-router-os #financeInvoiceTable tr[data-finance-status] > td {
    color: var(--marga-day-text) !important;
    background: transparent !important;
  }

  html[data-marga-theme="light"] body.marga-router-os #financeInvoiceTable tr[data-finance-status] > td::before {
    color: var(--marga-day-muted) !important;
  }
}

/* Custom components that do not use the shared card/control classes. */
html[data-marga-theme="light"] body.marga-router-os .marga-finance-button:not(.is-primary) {
  color: var(--marga-day-blue) !important;
  border-color: rgba(23, 105, 170, 0.36) !important;
  background: #e4eef7 !important;
  box-shadow: none !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-heading {
  color: var(--marga-day-text) !important;
  border-color: rgba(8, 125, 157, 0.34) !important;
  background:
    radial-gradient(circle at 94% 10%, rgba(8, 125, 157, 0.13), transparent 34%),
    linear-gradient(145deg, #f8fafc, #e8f3f6) !important;
  box-shadow: 0 7px 20px rgba(28, 49, 73, 0.08) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-heading h2 {
  color: var(--marga-day-text) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-heading > div > span {
  color: var(--marga-day-cyan) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-heading p,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-period-filter label,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-field label,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-form-actions small {
  color: var(--marga-day-text-soft) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-button:not(.is-primary):hover {
  color: #0d568f !important;
  border-color: rgba(23, 105, 170, 0.55) !important;
  background: #d8e8f5 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-button.is-primary {
  color: #ffffff !important;
  border-color: #315dcb !important;
  background: linear-gradient(100deg, #6946dc, #3f64d8 55%, #087d9d) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-tabs button {
  color: var(--marga-day-text-soft) !important;
  background: transparent !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-tabs button:hover {
  color: var(--marga-day-blue) !important;
  background: #dceaf6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-tabs button.is-active {
  color: #ffffff !important;
  border-color: #4163d4 !important;
  background: linear-gradient(135deg, #6946dc, #3f64d8) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-period-nav,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-search {
  color: var(--marga-day-text) !important;
  border-color: rgba(43, 70, 101, 0.32) !important;
  background: #e5eef6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-period-nav a,
html[data-marga-theme="light"] body.marga-router-os .marga-finance-search i {
  color: var(--marga-day-blue) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-period-nav strong {
  color: var(--marga-day-text) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-search input {
  color: var(--marga-day-text) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-row-action {
  color: var(--marga-day-blue) !important;
  border-color: rgba(23, 105, 170, 0.32) !important;
  background: #e3edf6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-row-action.is-pay {
  color: #ffffff !important;
  border-color: #065f49 !important;
  background: #08745a !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-finance-row-action.is-void {
  color: #ffffff !important;
  border-color: #9f2f45 !important;
  background: #b73a54 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-logo-file-input {
  color: var(--marga-day-text-soft) !important;
  border-color: rgba(43, 70, 101, 0.34) !important;
  background: #e8eff6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-logo-file-input::file-selector-button {
  color: #ffffff !important;
  background: #6445a4 !important;
}

/* Router header/sidebar controls and profile popovers. */
html[data-marga-theme="light"] body.marga-router-os .marga-os-brand-mark,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-sidebar-logo,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-router-icon,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-profile-avatar {
  color: var(--marga-day-blue) !important;
  border-color: rgba(23, 105, 170, 0.3) !important;
  background: #dcecf8 !important;
  box-shadow: 0 5px 12px rgba(23, 105, 170, 0.12) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-notification-button,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-sidebar-collapse,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-profile-toggle {
  color: var(--marga-day-text-soft) !important;
  border-color: rgba(43, 70, 101, 0.3) !important;
  background: #e5eef6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-notification-button:hover,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-sidebar-collapse:hover,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-profile-toggle:hover,
html[data-marga-theme="light"] body.marga-router-os .marga-desktop-profile-toggle[aria-expanded="true"] {
  color: var(--marga-day-blue) !important;
  border-color: rgba(23, 105, 170, 0.44) !important;
  background: #dceaf6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-desktop-profile-menu {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: #f8fafc !important;
  box-shadow: 0 12px 28px rgba(28, 49, 73, 0.16) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-desktop-profile-menu a {
  color: var(--marga-day-text-soft) !important;
  background: transparent !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-desktop-profile-menu a:hover {
  color: var(--marga-day-blue) !important;
  background: #e1ecf6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-desktop-router-status,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-online {
  color: var(--marga-day-green) !important;
  background: #dcf1e9 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-meta-icon {
  color: #ffffff !important;
  border-color: var(--marga-day-purple) !important;
  background: #8051ba !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-os-system-meta article:last-child .marga-os-meta-icon {
  border-color: var(--marga-day-amber) !important;
  background: #8a5900 !important;
}

/* Legacy dashboard, charts, and resource widgets. */
html[data-marga-theme="light"] body.marga-router-os .marga-dashboard-hero,
html[data-marga-theme="light"] body.marga-router-os .marga-overview-card,
html[data-marga-theme="light"] body.marga-router-os .marga-chart-card,
html[data-marga-theme="light"] body.marga-router-os .marga-router-card,
html[data-marga-theme="light"] body.marga-router-os .marga-pppoe-income-card,
html[data-marga-theme="light"] body.marga-router-os .marga-settings-footer {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border) !important;
  background: var(--marga-day-surface) !important;
  box-shadow: 0 7px 20px rgba(28, 49, 73, 0.08) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-dashboard-actions a:not(:first-child),
html[data-marga-theme="light"] body.marga-router-os .marga-hero-stat,
html[data-marga-theme="light"] body.marga-router-os .marga-workspace-pill {
  color: var(--marga-day-text-soft) !important;
  border-color: rgba(43, 70, 101, 0.28) !important;
  background: #e7eff6 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-summary-heading i {
  color: #ffffff !important;
  border-color: #1769aa !important;
  background: #237db8 !important;
  box-shadow: 0 5px 12px rgba(23, 105, 170, 0.18) !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-summary-group.is-pppoe .marga-summary-heading i {
  border-color: #6445a4 !important;
  background: #8051ba !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-icon {
  color: var(--marga-day-blue) !important;
  border-color: rgba(23, 105, 170, 0.32) !important;
  background: #dcecf8 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-resource .marga-enterprise-icon {
  color: var(--marga-day-green) !important;
  border-color: rgba(8, 119, 90, 0.32) !important;
  background: #dcf1e9 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-badge,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-primary-value,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-mini-value,
html[data-marga-theme="light"] body.marga-router-os .marga-resource-summary div {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border-soft) !important;
  background: #eaf1f7 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-primary-value strong,
html[data-marga-theme="light"] body.marga-router-os .marga-enterprise-mini-value strong,
html[data-marga-theme="light"] body.marga-router-os .marga-resource-summary strong {
  color: var(--marga-day-text) !important;
  text-shadow: none !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-circular-progress {
  color: var(--marga-day-text) !important;
  border-color: rgba(43, 70, 101, 0.24) !important;
  background: #e6eef5 !important;
}

html[data-marga-theme="light"] body.marga-router-os .marga-chart-card #trafficMonitor {
  color: var(--marga-day-text) !important;
  border-color: var(--marga-day-border-soft) !important;
  background: #edf3f8 !important;
}

/* Admin-only icons and action controls. */
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-avatar,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-brand-symbol,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-profile-avatar {
  color: #ffffff !important;
  border-color: #1769aa !important;
  background: #237db8 !important;
  box-shadow: 0 6px 15px rgba(23, 105, 170, 0.2) !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-sidebar-toggle,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-table-actions button,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-table-actions a {
  color: var(--marga-day-text-soft) !important;
  border-color: rgba(43, 70, 101, 0.3) !important;
  background: #e5eef6 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-sidebar-toggle:hover,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-table-actions button:hover,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-table-actions a:hover {
  color: var(--marga-day-blue) !important;
  border-color: rgba(23, 105, 170, 0.44) !important;
  background: #dceaf6 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-table-actions .is-danger,
html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-table-actions .is-danger:hover {
  color: var(--marga-day-red) !important;
  border-color: rgba(173, 57, 76, 0.32) !important;
  background: #f5e2e6 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-symbol {
  color: var(--marga-day-purple) !important;
  border-color: rgba(100, 69, 164, 0.36) !important;
  background: #e8e1f6 !important;
  box-shadow: none !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-symbol.is-accent-2 {
  color: var(--marga-day-cyan) !important;
  border-color: rgba(8, 125, 157, 0.36) !important;
  background: #dceff4 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-symbol.is-accent-3 {
  color: var(--marga-day-pink) !important;
  border-color: rgba(155, 55, 109, 0.36) !important;
  background: #f1dfE9 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-status {
  color: var(--marga-day-green) !important;
  background: #dcf1e9 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-router-status.incomplete {
  color: var(--marga-day-amber) !important;
  background: #f6e9ca !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-preference-icon {
  color: var(--marga-day-purple) !important;
  border-color: rgba(100, 69, 164, 0.28) !important;
  background: #e8e1f6 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-preference-icon.is-cyan {
  color: var(--marga-day-cyan) !important;
  border-color: rgba(8, 125, 157, 0.28) !important;
  background: #dceff4 !important;
}

html[data-marga-theme="light"] body.marga-admin-settings-page .marga-admin-save {
  color: #ffffff !important;
  border-color: #315dcb !important;
  background: linear-gradient(100deg, #6946dc, #3f64d8 55%, #087d9d) !important;
}

/* The Hotspot Active table keeps its horizontal desktop-like layout on
 * phones, but its cells must still adopt the day palette.
 */
@media screen and (max-width: 800px) {
  html[data-marga-theme="light"] body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table th,
  html[data-marga-theme="light"] body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table td,
  html[data-marga-theme="light"] body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table tbody td {
    color: var(--marga-day-text) !important;
    border-color: rgba(43, 70, 101, 0.24) !important;
    background: #f8fafc !important;
  }

  html[data-marga-theme="light"] body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table th,
  html[data-marga-theme="light"] body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table th:first-child {
    color: #264d72 !important;
    background: #dce8f2 !important;
  }

  html[data-marga-theme="light"] body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table td:first-child {
    background: #edf3f8 !important;
  }

  html[data-marga-theme="light"] body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table tbody tr:hover td,
  html[data-marga-theme="light"] body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table tbody tr:hover td:first-child {
    background: #e1ecf6 !important;
  }
}