/* Smart Billing v21.25.35 — Project Digital Background
   Visual layer only. No business logic / SNMP / OID / API / DB changes.
*/
:root{
  --sb-dbg-grid: rgba(53,207,231,.055);
  --sb-dbg-grid2: rgba(53,217,154,.028);
  --sb-dbg-glow1: rgba(20,184,220,.12);
  --sb-dbg-glow2: rgba(61,94,180,.09);
  --sb-dbg-glow3: rgba(53,217,154,.055);
  --sb-dbg-line: rgba(78,215,238,.07);
}

/* Global digital canvas: soft, non-contrasty, fixed and responsive */
html, body{
  background-image:
    radial-gradient(circle at 78% 12%, var(--sb-dbg-glow1) 0, transparent 26%),
    radial-gradient(circle at 20% 78%, var(--sb-dbg-glow2) 0, transparent 30%),
    radial-gradient(circle at 92% 82%, var(--sb-dbg-glow3) 0, transparent 24%),
    linear-gradient(var(--sb-dbg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sb-dbg-grid) 1px, transparent 1px),
    linear-gradient(var(--sb-dbg-grid2) 1px, transparent 1px),
    linear-gradient(90deg, var(--sb-dbg-grid2) 1px, transparent 1px) !important;
  background-size:
    auto,
    auto,
    auto,
    32px 32px,
    32px 32px,
    128px 128px,
    128px 128px !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}

/* Main page wrappers get the same digital texture without changing their base color */
:is(.content,.main-content,.page-content,.app-main,.app-content,.dashboard-content,.workspace,.workspace-main){
  background-image:
    radial-gradient(circle at 84% 8%, rgba(53,207,231,.055), transparent 24%),
    linear-gradient(rgba(53,207,231,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,207,231,.028) 1px, transparent 1px) !important;
  background-size:auto,40px 40px,40px 40px !important;
  background-position:center top !important;
}

/* Sidebar / topbar remain clean, with only a faint digital sheen */
:is(.sidebar,.app-sidebar,.left-sidebar,.side-nav){
  background-image:
    linear-gradient(180deg, rgba(53,207,231,.035), transparent 28%),
    radial-gradient(circle at 20% 12%, rgba(53,207,231,.055), transparent 26%) !important;
}
:is(.topbar,.app-topbar,.header-bar,.main-header){
  background-image:linear-gradient(90deg, rgba(53,207,231,.025), rgba(53,217,154,.018), transparent 70%) !important;
}

/* Cards keep their own theme surface; only a subtle internal digital highlight */
:is(.card,.panel,.widget,.dashboard-card,.metric-card,.stat-card,.olt21-panel,.olt25-topology-card,.olt2512-node,.olt2512-pon,.olt2512-health){
  background-image:linear-gradient(135deg, rgba(53,207,231,.018), transparent 42%) !important;
}

/* Auth / login / register pages */
:is(.auth-page,.login-page,.register-page,.auth-shell,.login-shell,.auth-container){
  background-image:
    radial-gradient(circle at 72% 18%, rgba(53,207,231,.12), transparent 28%),
    radial-gradient(circle at 16% 82%, rgba(61,94,180,.10), transparent 32%),
    linear-gradient(rgba(53,207,231,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,207,231,.04) 1px, transparent 1px) !important;
  background-size:auto,auto,34px 34px,34px 34px !important;
  background-attachment:fixed!important;
}

/* Light theme: same concept, much softer so text/cards do not lose contrast */
body.theme-light,
body[data-theme="light"],
html[data-theme="light"] body,
.light-theme{
  --sb-dbg-grid: rgba(31,113,145,.045);
  --sb-dbg-grid2: rgba(28,145,118,.022);
  --sb-dbg-glow1: rgba(39,166,210,.07);
  --sb-dbg-glow2: rgba(85,110,177,.05);
  --sb-dbg-glow3: rgba(45,171,132,.04);
}
body.theme-light :is(.content,.main-content,.page-content,.app-main,.app-content,.dashboard-content,.workspace,.workspace-main),
body[data-theme="light"] :is(.content,.main-content,.page-content,.app-main,.app-content,.dashboard-content,.workspace,.workspace-main){
  background-image:
    radial-gradient(circle at 84% 8%, rgba(39,166,210,.04), transparent 24%),
    linear-gradient(rgba(31,113,145,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,113,145,.022) 1px, transparent 1px) !important;
}

/* Keep effects economical on small screens */
@media(max-width:768px){
  html,body{background-size:auto,auto,auto,28px 28px,28px 28px,112px 112px,112px 112px!important}
  :is(.content,.main-content,.page-content,.app-main,.app-content,.dashboard-content,.workspace,.workspace-main){background-size:auto,32px 32px,32px 32px!important}
}

/* Accessibility / performance */
@media (prefers-reduced-motion: reduce){
  html,body{background-attachment:scroll!important}
}