:root{
  --brand:#8a1f9c;          /* netouch purple */
  --brand-dark:#5b1670;
  --brand-light:#f6e9fb;
  --brand-magenta:#d6006e;  /* netouch magenta */
  --brand-pink:#ec4899;
  --brand-gradient:linear-gradient(100deg,#5b1670 0%,#8a1f9c 38%,#d6006e 100%);
  --topbar-h:58px;
  --sidebar-w:230px;
  --ink:#1f2d3d;
  --muted:#6b7a90;
  --line:#e9e0f0;
  --bg:#f6f4fb;
  --card-shadow:0 1px 2px rgba(91,22,112,.06),0 2px 8px rgba(91,22,112,.06);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14px;
}
a{text-decoration:none}

/* ---- Top bar ---- */
.app-topbar{
  height:var(--topbar-h);background:var(--brand-gradient);
  position:fixed;top:0;left:0;right:0;z-index:1040;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.app-topbar .navbar-brand{color:#fff;font-weight:600;font-size:1.05rem}
.app-topbar .navbar-brand i{font-size:1.3rem}

/* ---- Shell layout ---- */
.app-shell{display:flex;padding-top:var(--topbar-h);min-height:100vh}
.app-sidebar{
  width:var(--sidebar-w);background:#fff;border-right:1px solid var(--line);
  position:fixed;top:var(--topbar-h);bottom:0;left:0;overflow-y:auto;z-index:1030;
  transition:transform .2s ease;
}
.app-main{flex:1;margin-left:var(--sidebar-w);min-width:0}

.app-sidebar .nav-link{
  color:var(--ink);padding:.6rem 1.1rem;display:flex;align-items:center;gap:.65rem;
  border-left:3px solid transparent;border-radius:0;font-weight:500;
}
.app-sidebar .nav-link i{font-size:1.05rem;color:var(--muted);width:18px;text-align:center}
.app-sidebar .nav-link:hover{background:var(--brand-light)}
.app-sidebar .nav-link.active{
  background:var(--brand-light);color:var(--brand-dark);
  border-left-color:var(--brand);font-weight:600;
}
.app-sidebar .nav-link.active i{color:var(--brand)}
.nav-heading{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  padding:1rem 1.1rem .35rem;font-weight:700;
}

/* ---- Cards ---- */
.card{border:1px solid var(--line);border-radius:10px;box-shadow:var(--card-shadow)}
.card-header{background:#fff;border-bottom:1px solid var(--line);font-weight:600}

.stat-card{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.25rem}
.stat-card .stat-icon{
  width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:#fff;flex-shrink:0;
}
.stat-card .stat-value{font-size:1.7rem;font-weight:700;line-height:1}
.stat-card .stat-label{color:var(--muted);font-size:.82rem;margin-top:.2rem}
.bg-grad-blue{background:linear-gradient(135deg,#1976d2,#0d47a1)}
.bg-grad-green{background:linear-gradient(135deg,#2e9e5b,#1b6e3c)}
.bg-grad-gray{background:linear-gradient(135deg,#78909c,#546e7a)}
.bg-grad-amber{background:linear-gradient(135deg,#f0a020,#c77800)}
.bg-grad-red{background:linear-gradient(135deg,#e53935,#b71c1c)}

/* ---- Tables ---- */
.table{font-size:13.5px}
.table thead th{
  background:#f7f9fc;color:var(--muted);text-transform:uppercase;font-size:.72rem;
  letter-spacing:.04em;border-bottom:2px solid var(--line);white-space:nowrap;
}
.table-hover tbody tr:hover{background:var(--brand-light)}
.table td{vertical-align:middle}

/* ---- Page header ---- */
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.page-head h1{font-size:1.35rem;font-weight:700;margin:0}
.page-head .sub{color:var(--muted);font-size:.85rem}

/* ---- Misc ---- */
.badge{font-weight:600}
.cli-output{
  background:#0d1117;color:#c9d1d9;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12.5px;padding:1rem;border-radius:8px;white-space:pre-wrap;max-height:520px;overflow:auto;
}
.filter-bar{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem}
.signal-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.auth-card{max-width:400px;margin:8vh auto;}

@media (max-width:991.98px){
  .app-sidebar{transform:translateX(-100%)}
  .app-sidebar.open{transform:translateX(0)}
  .app-main{margin-left:0}
}

/* ONU detail mini stat tiles */
.stat-mini{
  background:#f6f8fb;
  border:1px solid #e6ebf1;
  border-radius:.6rem;
  padding:.75rem .5rem;
}
.stat-mini .h4,.stat-mini .h5{color:var(--brand);font-weight:600;}

/* ============================================================
   THEME: smooth animations + dark mode  (added)
   ============================================================ */

/* Reusable surface vars (light defaults) */
:root{
  --card-bg:#fff;
  --panel-bg:#fff;
  --input-bg:#fff;
  --thead-bg:#f7f9fc;
  --tile-bg:#f6f8fb;
  --tile-line:#e6ebf1;
  --hover:rgba(21,101,192,.06);
}

/* ---- DARK MODE ---- */
html[data-theme="dark"]{
  --brand:#3b82f6; --brand-dark:#2563eb; --brand-light:#16263d;
  --ink:#e6edf3; --muted:#9aa7b6; --line:#243140; --bg:#0d1420;
  --card-bg:#141d2b; --panel-bg:#111927; --input-bg:#0f1826;
  --thead-bg:#172234; --tile-bg:#172234; --tile-line:#243140;
  --hover:rgba(59,130,246,.12);
  --card-shadow:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.35);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .app-sidebar,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu{background:var(--card-bg);color:var(--ink)}
html[data-theme="dark"] .app-sidebar{background:var(--panel-bg)}
html[data-theme="dark"] .card-header{background:var(--panel-bg)}
html[data-theme="dark"] .table{color:var(--ink)}
html[data-theme="dark"] .table thead th{background:var(--thead-bg);color:var(--muted);border-color:var(--line)}
html[data-theme="dark"] .table td,html[data-theme="dark"] .table th{border-color:var(--line)}
html[data-theme="dark"] .stat-mini{background:var(--tile-bg);border-color:var(--tile-line)}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{background:var(--input-bg);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .form-control::placeholder{color:#5c6b7a}
html[data-theme="dark"] .dropdown-item{color:var(--ink)}
html[data-theme="dark"] .dropdown-item:hover{background:var(--hover)}
html[data-theme="dark"] .btn-outline-secondary{color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .text-muted{color:var(--muted)!important}
html[data-theme="dark"] .modal-header,html[data-theme="dark"] .modal-footer{border-color:var(--line)}
html[data-theme="dark"] code{color:#7ee787}
html[data-theme="dark"] .btn-close{filter:invert(1) grayscale(1) brightness(1.6)}

/* ---- SMOOTH TRANSITIONS ---- */
.card,.stat-card,.btn,.nav-link,.form-control,.form-select,.badge,.stat-mini,.table-hover tbody tr{
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,
             box-shadow .2s ease,transform .15s ease;
}

/* ---- ENTRANCE ANIMATIONS ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.96);opacity:.4}100%{transform:scale(1);opacity:1}}
.app-main .card,.app-main .stat-card{animation:fadeUp .35s ease both}
.app-main .row > [class*="col-"]:nth-child(2) .card{animation-delay:.04s}
.app-main .row > [class*="col-"]:nth-child(3) .card{animation-delay:.08s}
.app-main .row > [class*="col-"]:nth-child(4) .card{animation-delay:.12s}
.app-main .row > [class*="col-"]:nth-child(5) .card{animation-delay:.16s}
.stat-card .stat-value{animation:pop .4s ease both}

/* ---- HOVER LIFT ---- */
.card:hover{box-shadow:0 6px 18px rgba(16,24,40,.12);transform:translateY(-2px)}
html[data-theme="dark"] .card:hover{box-shadow:0 8px 24px rgba(0,0,0,.5)}
.stat-mini:hover{transform:translateY(-2px)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* sidebar active slide indicator */
.app-sidebar .nav-link{position:relative}
.app-sidebar .nav-link::before{
  content:"";position:absolute;left:0;top:50%;height:0;width:3px;background:var(--brand);
  transform:translateY(-50%);transition:height .2s ease;border-radius:0 3px 3px 0;
}
.app-sidebar .nav-link.active::before,.app-sidebar .nav-link:hover::before{height:70%}
.app-sidebar .nav-link:hover{background:var(--hover);padding-left:1.25rem}

/* status badges shimmer for online */
.badge.bg-success{box-shadow:0 0 0 0 rgba(46,158,91,.5)}
tr:hover .badge.bg-success{animation:none}

/* theme toggle button */
.theme-toggle{border:0;background:transparent;color:#fff;font-size:1.2rem;cursor:pointer;
  line-height:1;padding:.25rem .4rem;border-radius:8px;transition:background .2s}
.theme-toggle:hover{background:rgba(255,255,255,.15)}

/* spinner + toast niceties */
.toast-msg{animation:fadeUp .25s ease both}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   netouch brand theme + richer animations  (added)
   ============================================================ */
.brand-logo{height:34px;width:auto;background:#fff;border-radius:8px;padding:3px 8px;
  box-shadow:0 2px 6px rgba(0,0,0,.18)}
.app-topbar{box-shadow:0 2px 14px rgba(91,22,112,.25)}

/* primary buttons use the brand gradient */
.btn-primary{background:var(--brand-gradient);border:0;background-size:160% 100%;transition:background-position .35s,transform .15s,box-shadow .2s}
.btn-primary:hover{background-position:100% 0;box-shadow:0 6px 16px rgba(214,0,110,.32)}
.btn-primary:focus,.btn-primary:active{background:var(--brand-dark)!important;box-shadow:none}
.btn-success{background:linear-gradient(100deg,#1f9c6b,#15a05b);border:0}
.btn-outline-primary{color:var(--brand);border-color:var(--brand)}
.btn-outline-primary:hover{background:var(--brand);border-color:var(--brand)}
a{color:var(--brand-magenta)}
a:hover{color:var(--brand)}
.text-primary{color:var(--brand)!important}
.page-link{color:var(--brand)}
.page-item.active .page-link{background:var(--brand);border-color:var(--brand)}
.form-control:focus,.form-select:focus{border-color:var(--brand-pink);box-shadow:0 0 0 .2rem rgba(214,0,110,.15)}

/* stat icons recoloured to brand spectrum */
.bg-grad-green{background:linear-gradient(135deg,#1f9c6b,#37c98a)!important}
.bg-grad-amber{background:linear-gradient(135deg,#b5179e,#d6006e)!important}
.bg-grad-gray{background:linear-gradient(135deg,#7a6b86,#9aa7b6)!important}
.bg-grad-red{background:linear-gradient(135deg,#c2185b,#ff4d6d)!important}

/* gradient brand accents on headers */
.card-header{font-weight:600}
.page-head h1,h4.mb-0{background:none}

/* dark mode brand tweaks */
html[data-theme="dark"]{--brand-light:#2a1633;--bg:#120a18;
  --card-bg:#1b1022;--panel-bg:#160d1d;--input-bg:#160d1d;--thead-bg:#231533;--tile-bg:#231533;--tile-line:#33203f;--line:#2c1c38}
html[data-theme="dark"] .app-topbar{box-shadow:0 2px 14px rgba(0,0,0,.5)}

/* ---- richer entrance + hover animations ---- */
@keyframes floatIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.app-main .card,.app-main .stat-card{animation:floatIn .4s cubic-bezier(.2,.7,.3,1) both}
.stat-card:hover .stat-icon{transform:scale(1.08) rotate(-3deg)}
.stat-icon{transition:transform .25s ease}
.badge{transition:transform .15s ease}
tr:hover .badge{transform:scale(1.05)}
.btn{transition:transform .15s ease,box-shadow .2s ease,background-position .35s ease}
.nav-link{transition:padding-left .2s ease,background .2s ease}

/* subtle gradient ring pulse on Online status globe */
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(31,156,107,.5)}70%{box-shadow:0 0 0 6px rgba(31,156,107,0)}100%{box-shadow:0 0 0 0 rgba(31,156,107,0)}}
.text-success.bi-globe2{border-radius:50%;animation:pulseDot 2.2s infinite}

/* spinner + toast brand colour */
.spinner-border{color:var(--brand)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ============================================================
   PREMIUM — Option B (Modern SaaS)  [visual layer only]
   ============================================================ */
:root{
  --bg:#f7f6fb;
  --line:#ece8f2;
  --radius-card:14px;
  --shadow-sm:0 1px 2px rgba(38,16,64,.04),0 1px 3px rgba(38,16,64,.06);
  --shadow-md:0 4px 14px rgba(38,16,64,.08),0 2px 6px rgba(38,16,64,.05);
  --shadow-lg:0 12px 34px rgba(38,16,64,.12);
}
body{font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-0.1px;background:var(--bg)}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{font-weight:600;letter-spacing:-0.4px}

/* ---- cards: soft, rounded, breathing ---- */
.card{border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);
  background:var(--card-bg,#fff);transition:box-shadow .25s ease,transform .15s ease}
.card:hover{box-shadow:var(--shadow-md);transform:none}
.app-main .card .card-body{padding:1.15rem 1.25rem}
.card-header{background:transparent;border-bottom:1px solid var(--line);
  padding:.85rem 1.25rem;font-weight:600;font-size:.95rem}

/* ---- sidebar: pill active state, airy ---- */
.app-sidebar{border-right:1px solid var(--line);background:#fff;padding:10px 10px}
.app-sidebar .nav-link{border-radius:10px;margin:2px 0;padding:.6rem .8rem;color:var(--ink);
  font-weight:500;font-size:.92rem;display:flex;align-items:center;gap:10px}
.app-sidebar .nav-link::before{display:none}
.app-sidebar .nav-link:hover{background:var(--brand-light);padding-left:.8rem}
.app-sidebar .nav-link.active{background:var(--brand-gradient);color:#fff;box-shadow:0 4px 12px rgba(138,31,156,.28)}
.app-sidebar .nav-link.active i{color:#fff}
.app-sidebar .nav-link i{font-size:1.05rem;width:20px;text-align:center}
.app-sidebar .nav-heading{font-size:.68rem;letter-spacing:.8px;color:var(--muted);
  text-transform:uppercase;padding:14px 12px 6px;font-weight:600}

/* ---- stat cards: rounded squircle icon, big number ---- */
.stat-card{border-radius:var(--radius-card);padding:1.15rem 1.25rem;gap:14px;align-items:center}
.stat-card .stat-icon{width:50px;height:50px;border-radius:14px;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.stat-card .stat-value{font-size:1.9rem;font-weight:700;letter-spacing:-1px;line-height:1.05}
.stat-card .stat-label{font-size:.82rem;color:var(--muted);font-weight:500}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

.stat-mini{background:var(--tile-bg,#faf9fd);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem}
.stat-mini .h3,.stat-mini .h4,.stat-mini .h5{font-weight:700;letter-spacing:-.5px}

/* ---- tables: airy rows, soft header ---- */
.table{--bs-table-bg:transparent}
.table thead th{background:var(--thead-bg,#faf9fd);border-bottom:1px solid var(--line);
  font-size:.74rem;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:.7rem .9rem}
.table tbody td{padding:.7rem .9rem;border-color:var(--line);vertical-align:middle}
.table-hover tbody tr:hover{background:var(--brand-light)}
.table-sm tbody td,.table-sm thead th{padding:.5rem .75rem}

/* ---- buttons: rounded, medium weight ---- */
.btn{border-radius:10px;font-weight:500;letter-spacing:-.2px}
.btn-sm{border-radius:8px}
.btn-primary{box-shadow:0 2px 8px rgba(138,31,156,.22)}

/* ---- badges as pills ---- */
.badge{font-weight:600;border-radius:20px;padding:.35em .7em;letter-spacing:.2px}

/* ---- inputs: rounded, soft focus ---- */
.form-control,.form-select{border-radius:10px;border-color:var(--line);padding:.5rem .8rem}
.form-control:focus,.form-select:focus{border-color:var(--brand-pink);box-shadow:0 0 0 .2rem rgba(214,0,110,.12)}

/* ---- topbar: brand logo + glassy ---- */
.app-topbar{box-shadow:0 2px 18px rgba(91,22,112,.22)}
.brand-logo{height:32px}

/* ---- pagination ---- */
.pagination .page-link{border-radius:8px;margin:0 2px;border-color:var(--line);color:var(--brand)}
.page-item.active .page-link{background:var(--brand-gradient);border-color:transparent}

/* ---- dark mode premium ---- */
html[data-theme="dark"]{--bg:#0f0a16;--line:#241a30;--card-bg:#171022;--tile-bg:#1c1429;--thead-bg:#1c1429}
html[data-theme="dark"] body{background:var(--bg)}
html[data-theme="dark"] .app-sidebar{background:#140d1d;border-color:var(--line)}
html[data-theme="dark"] .card{border-color:var(--line);box-shadow:0 2px 10px rgba(0,0,0,.4)}
html[data-theme="dark"] .table thead th{background:#1c1429}

/* ---- mobile friendly ---- */
@media (max-width:991.98px){
  .app-sidebar{box-shadow:var(--shadow-lg);width:260px;padding:10px}
  .app-sidebar.open ~ .app-main::before{content:"";position:fixed;inset:var(--topbar-h) 0 0 0;
    background:rgba(20,10,28,.45);z-index:1029}
  .app-main{margin-left:0}
  .app-main .container-fluid{padding-left:14px;padding-right:14px}
  .stat-card .stat-value{font-size:1.6rem}
  .card-header,.app-main .card .card-body{padding:.9rem 1rem}
  h4{font-size:1.2rem}
  .table-responsive{border-radius:12px}
}
@media (max-width:575.98px){
  .stat-card{padding:.9rem}
  .stat-card .stat-icon{width:42px;height:42px;font-size:1.15rem}
  .brand-logo{height:26px}
  .navbar .btn-sm{padding:.25rem .5rem}
}

/* ============ Mobile polish (<=767px) ============ */
@media (max-width: 767.98px){
  /* tighter page padding */
  .app-main .container-fluid, .app-main .container { padding-left:.75rem; padding-right:.75rem; }
  .app-main { padding-top:.5rem; }

  /* tables: never overflow the screen — scroll horizontally inside cards */
  .card .table, .table { white-space: nowrap; }
  .card > .table, .card-body > .table, .card .table-responsive { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* headings & cards a touch smaller */
  h4 { font-size:1.15rem; }
  .card-body { padding:.85rem; }
  .stat-card .h3, .stat-card .display-6 { font-size:1.5rem; }

  /* top bar: keep it from crowding — hide button labels, keep icons */
  .app-topbar .btn { padding:.25rem .5rem; }
  #saveConfigBtn span, #saveConfigBtn { font-size:.8rem; }

  /* dashboard action buttons (Sync / Match / Discover) stack full-width */
  .dash-actions .btn, .page-actions .btn { width:100%; }

  /* modals use full width on phones */
  .modal-dialog { margin:.5rem; }

  /* forms: inputs comfortable to tap */
  .form-control, .form-select, .btn { font-size:.95rem; }
}

/* dim backdrop when the mobile drawer is open */
@media (max-width: 991.98px){
  .app-sidebar.open::after{
    content:""; position:fixed; top:0; left:var(--sidebar-w); right:0; bottom:0;
    background:rgba(0,0,0,.35); z-index:-1;
  }
  .app-sidebar{ z-index:1050; box-shadow:2px 0 16px rgba(0,0,0,.15); }
}