/* FiberPilot Professional Operations UI v1
   UI-only overrides: no API, OLT, WAN, Wi-Fi, TR-069 or provisioning logic. */
:root{
  --fp-sidebar:#0b1320;
  --fp-sidebar-2:#101b2b;
  --fp-sidebar-line:#1e2a3b;
  --fp-bg:#f5f7fb;
  --fp-card:#ffffff;
  --fp-card-2:#f8fafc;
  --fp-line:#e3e8ef;
  --fp-line-strong:#d6dee8;
  --fp-text:#172033;
  --fp-muted:#667085;
  --fp-blue:#1769e0;
  --fp-blue-2:#0f5ccc;
  --fp-blue-soft:#eaf2ff;
  --fp-green:#149154;
  --fp-green-soft:#eaf8f0;
  --fp-amber:#b7791f;
  --fp-amber-soft:#fff7e6;
  --fp-red:#c93d4b;
  --fp-red-soft:#fff0f1;
  --fp-purple:#7158d9;
  --fp-radius:14px;
  --fp-radius-sm:10px;
  --fp-shadow:0 2px 6px rgba(16,24,40,.035),0 10px 28px rgba(16,24,40,.055);
  --fp-shadow-hover:0 8px 28px rgba(16,24,40,.10);
}

*{box-sizing:border-box}
html{background:var(--fp-bg)}
body{
  background:var(--fp-bg) !important;
  color:var(--fp-text) !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ---------- unified sidebar ---------- */
body.fp-topnav-layout .topbar{
  width:258px !important;
  height:100vh !important;
  position:fixed !important;
  inset:0 auto 0 0 !important;
  z-index:200 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  padding:20px 14px !important;
  background:linear-gradient(180deg,var(--fp-sidebar),#09111d 100%) !important;
  border-right:1px solid var(--fp-sidebar-line) !important;
  box-shadow:12px 0 32px rgba(15,23,42,.06) !important;
  overflow-y:auto;
}
body.fp-topnav-layout .topbar .brand,
.sidebar .brand{
  min-height:54px;
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  margin:0 4px 18px !important;
  color:#fff !important;
  font-size:19px !important;
  font-weight:800 !important;
  letter-spacing:-.2px;
}
body.fp-topnav-layout .topbar .brand::before{
  content:"FP";
  width:38px;height:38px;
  display:grid;place-items:center;
  flex:0 0 auto;
  border-radius:11px;
  background:linear-gradient(135deg,#2580ff,#6d5dfc);
  box-shadow:0 8px 20px rgba(37,128,255,.24);
  color:#fff;font-size:13px;font-weight:900;letter-spacing:.5px;
}
body.fp-topnav-layout .brand small,
.sidebar .brand small{
  display:block !important;
  margin:2px 0 0 !important;
  color:#7f93ad !important;
  font-size:10px !important;
  line-height:1.25;
  font-weight:600 !important;
  letter-spacing:.2px;
}

body.fp-topnav-layout .nav,
.sidebar .nav{
  width:100%;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  align-items:stretch !important;
}
body.fp-topnav-layout .nav a,
.sidebar .nav a{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:40px !important;
  padding:9px 11px !important;
  margin:0 !important;
  border-radius:9px !important;
  color:#aebed1 !important;
  text-decoration:none !important;
  background:transparent !important;
  font-size:12.5px !important;
  font-weight:650 !important;
  transition:.16s ease;
}
body.fp-topnav-layout .nav a:hover,
.sidebar .nav a:hover{
  color:#fff !important;
  background:#15253a !important;
  transform:translateX(1px);
}
body.fp-topnav-layout .nav a.active,
.sidebar .nav a.active{
  color:#fff !important;
  background:linear-gradient(90deg,#17365d,#142d4d) !important;
  box-shadow:inset 3px 0 0 #438eff;
}
.fp-nav-ico{
  width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px;
  color:#7893b2;font-size:14px;line-height:1;
}
a.active .fp-nav-ico,a:hover .fp-nav-ico{color:#74adff}
.fp-nav-section,
.sidebar .nav .section{
  margin:17px 10px 6px !important;
  color:#58708c !important;
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:1.35px !important;
  text-transform:uppercase;
}
.sidebar{
  width:258px !important;
  padding:20px 14px !important;
  background:linear-gradient(180deg,var(--fp-sidebar),#09111d 100%) !important;
  border-right:1px solid var(--fp-sidebar-line) !important;
  box-shadow:12px 0 32px rgba(15,23,42,.06) !important;
  overflow-y:auto;
  z-index:200 !important;
}
.sidebar .logo{
  width:38px !important;height:38px !important;border-radius:11px !important;
  background:linear-gradient(135deg,#2580ff,#6d5dfc) !important;
  box-shadow:0 8px 20px rgba(37,128,255,.24) !important;
  font-size:13px !important;
}

body.fp-topnav-layout .page{
  max-width:none !important;
  margin:0 0 0 258px !important;
  padding:28px 30px 42px !important;
}
body.fp-sidebar-layout .main{
  margin-left:258px !important;
  width:calc(100% - 258px) !important;
  max-width:none !important;
  padding:26px 30px 42px !important;
}

/* ---------- page headers ---------- */
.page-head,.head,main > .topbar,.main > .topbar{
  gap:16px !important;
}
.page-head h1,.head h1,.title h1{
  color:var(--fp-text) !important;
  font-size:24px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:-.45px !important;
}
.page-head p,.head p,.title p{
  color:var(--fp-muted) !important;
  font-size:12.5px !important;
  line-height:1.5 !important;
}
body.fp-sidebar-layout .main > .topbar{
  margin-bottom:20px !important;
  padding:0 !important;
  background:transparent !important;
  color:var(--fp-text) !important;
  height:auto !important;
  position:static !important;
}
.actions{gap:8px !important;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn,button.btn,.view,.pages button,
.fp-so-actions button,.fp-so-bottom-actions button{
  border-radius:9px !important;
  font-weight:750 !important;
  transition:.15s ease !important;
  box-shadow:none !important;
}
.btn,.pill{
  min-height:36px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px;
  border:1px solid var(--fp-line-strong) !important;
  background:#fff !important;
  color:#344054 !important;
  padding:8px 12px !important;
  text-decoration:none !important;
}
.btn:hover,.pages button:hover{border-color:#b9c7d8 !important;background:#f9fbfd !important}
.btn-primary,.view,
button[type="submit"]:not(.fp-pass-toggle){
  background:var(--fp-blue) !important;
  border-color:var(--fp-blue) !important;
  color:#fff !important;
}
.btn-primary:hover,.view:hover,
button[type="submit"]:not(.fp-pass-toggle):hover{
  background:var(--fp-blue-2) !important;
  border-color:var(--fp-blue-2) !important;
}
button:disabled,.btn:disabled{opacity:.52 !important;cursor:not-allowed !important;transform:none !important}

/* ---------- live/status pills ---------- */
.live-pill,.pill.live,#fp-auto-live-state,.fp-so-live{
  border:1px solid #b9e5ca !important;
  background:var(--fp-green-soft) !important;
  color:#0e7a43 !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.15px;
}
.live-pill::before,.pill.live::before,#fp-auto-live-state .fp-live-dot{
  background:#19a45d !important;
  box-shadow:0 0 0 3px rgba(25,164,93,.10) !important;
}

/* ---------- cards & metrics ---------- */
.card,.stat,.metric,#fp-so-view,.fp-smart-hero{
  background:var(--fp-card) !important;
  border:1px solid var(--fp-line) !important;
  border-radius:var(--fp-radius) !important;
  box-shadow:var(--fp-shadow) !important;
  color:var(--fp-text) !important;
}
.card{overflow:hidden}
.card:hover,.stat:hover,.metric:hover{border-color:#d3dce7 !important}
.card h3,.fp-so-section h3,.fp-so-graph-title{
  color:var(--fp-text) !important;
  font-weight:800 !important;
  letter-spacing:-.12px;
}
.card-head{
  min-height:46px !important;
  padding:11px 15px !important;
  background:#fff !important;
  color:var(--fp-text) !important;
  border-bottom:1px solid var(--fp-line) !important;
}
.card-body{padding:16px !important}

.summary,.stats{gap:12px !important}
.stat{
  padding:15px 16px !important;
  min-height:92px;
  position:relative;
  overflow:hidden;
}
.stat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#dbe7f6;
}
.stat span,.metric .label{color:var(--fp-muted) !important;font-weight:650 !important}
.stat strong,.metric .value{color:var(--fp-text) !important;font-weight:850 !important;letter-spacing:-.7px}

.metric{min-height:122px !important;position:relative}
.metric-top{
  min-height:86px !important;
  padding:17px !important;
  background:#fff !important;
  color:var(--fp-text) !important;
}
.metric.blue{border-top:3px solid #438eff !important}
.metric.green{border-top:3px solid #21a363 !important}
.metric.dark{border-top:3px solid #64748b !important}
.metric.orange{border-top:3px solid #e79a20 !important}
.metric-label{color:var(--fp-muted) !important;font-size:11px !important}
.metric-value{color:var(--fp-text) !important;font-size:34px !important;letter-spacing:-1px}
.metric-icon{
  width:44px;height:44px;display:grid;place-items:center;border-radius:12px;
  background:var(--fp-blue-soft);color:var(--fp-blue) !important;font-size:22px !important;opacity:1 !important;
}
.metric-foot{border-top:1px solid #f0f2f5;background:#fbfcfe !important}

/* ---------- forms ---------- */
input,select,textarea{
  border:1px solid var(--fp-line-strong) !important;
  background:#fff !important;
  color:var(--fp-text) !important;
  border-radius:9px !important;
  outline:none !important;
  font-family:inherit !important;
  transition:.15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:#79a9ee !important;
  box-shadow:0 0 0 3px rgba(23,105,224,.10) !important;
}
input:disabled,select:disabled,textarea:disabled{
  background:#f4f6f9 !important;color:#8a97a8 !important;cursor:not-allowed;
}
.form-grid{gap:13px !important}
.form-grid label{color:#475467 !important;font-weight:650 !important}
.form-grid label > span{font-size:11px;font-weight:750;color:#475467}
.form-grid small{color:#8491a3 !important;font-size:10.5px;line-height:1.4}
.form-grid input,.form-grid select{min-height:42px !important;padding:9px 11px !important}
.fp-pass-wrap{display:flex;gap:6px;align-items:center;width:100%}
.fp-pass-wrap input{flex:1;min-width:0}
.fp-pass-toggle{
  flex:0 0 auto;min-height:40px;padding:7px 10px;border:1px solid var(--fp-line-strong);
  border-radius:8px;background:#fff;color:#475467;font-size:11px;font-weight:750;cursor:pointer;
}

/* ---------- tables ---------- */
.table-wrap,.fp-table-shell{overflow:auto;max-width:100%}
table{border-collapse:separate !important;border-spacing:0 !important;color:var(--fp-text) !important}
th{
  background:#f8fafc !important;
  color:#667085 !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.25px;
  text-transform:uppercase;
  border-bottom:1px solid var(--fp-line) !important;
}
td{
  color:#344054 !important;
  border-bottom:1px solid #eef1f5 !important;
}
tbody tr:hover{background:#f8fbff !important}
.table-wrap table th{position:sticky;top:0;z-index:2}

/* ---------- badges ---------- */
.badge{border-radius:999px !important;font-size:9.5px !important;font-weight:850 !important;letter-spacing:.15px}
.good,.b-good{background:var(--fp-green-soft) !important;color:#0b7f45 !important;border-color:#bee7cf !important}
.bad,.b-bad{background:var(--fp-red-soft) !important;color:#b12c3a !important;border-color:#f3c3c8 !important}
.warn,.b-warn{background:var(--fp-amber-soft) !important;color:#986314 !important;border-color:#efd7a8 !important}
.blue,.b-blue{background:var(--fp-blue-soft) !important;color:#175fb7 !important;border-color:#c7dcfb !important}

/* ---------- filters ---------- */
.filters{
  background:#fff !important;
  border-bottom:1px solid var(--fp-line) !important;
  padding:12px !important;
  gap:8px !important;
}
.filters input,.filters select{height:38px !important;font-size:11.5px}

/* ---------- notices/alerts ---------- */
.notice,.alert{
  border:1px solid #dbe4ef !important;
  background:#f8fafc !important;
  color:#475467 !important;
  border-radius:10px !important;
  line-height:1.5 !important;
}
.notice{padding:11px 12px !important}
.alert strong{color:var(--fp-text) !important}
.alert span,.muted,.muted-note{color:var(--fp-muted) !important}

/* ---------- ONU details / WAN / Wi-Fi / TR069 ---------- */
body.fp-sidebar-layout .tabs{
  display:flex !important;
  gap:5px !important;
  padding:5px !important;
  margin-bottom:16px !important;
  border:1px solid var(--fp-line) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 1px 4px rgba(16,24,40,.035);
  overflow-x:auto;
  flex-wrap:nowrap !important;
}
body.fp-sidebar-layout .tab{
  flex:0 0 auto;
  min-height:36px;
  padding:8px 12px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:#667085 !important;
  font-size:11.5px !important;
  font-weight:750 !important;
}
body.fp-sidebar-layout .tab:hover{background:#f3f6fa !important;color:#344054 !important}
body.fp-sidebar-layout .tab.active{
  background:var(--fp-blue-soft) !important;
  color:#155fbd !important;
  box-shadow:inset 0 0 0 1px #c9ddfb !important;
}
body.fp-sidebar-layout .grid{gap:12px !important}
body.fp-sidebar-layout .card{padding:15px !important}
body.fp-sidebar-layout .kv{
  min-height:37px;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:8px 0 !important;
  border-bottom:1px solid #edf1f5 !important;
  color:var(--fp-text) !important;
  font-size:11.5px !important;
}
body.fp-sidebar-layout .kv:last-child{border-bottom:0 !important}
body.fp-sidebar-layout .kv span:first-child{color:#718096 !important;font-weight:600}
body.fp-sidebar-layout .kv strong{color:#27364a !important;font-weight:750;text-align:right;overflow-wrap:anywhere}
.pppoe-live-box{
  margin:12px 0 !important;
  padding:8px 13px !important;
  border:1px solid var(--fp-line) !important;
  background:#fbfcfe !important;
  border-radius:11px !important;
  color:var(--fp-text) !important;
}
.pppoe-editor,#wan-management-card,#wifi-management-card,#tr069 .card{
  border-top:3px solid #dbe9fb !important;
}
.pppoe-result{border-radius:10px !important;background:#f8fafc !important;color:#475467 !important}
.pppoe-result.good{border-color:#bde2cc !important;background:var(--fp-green-soft) !important;color:#0c7541 !important}
.pppoe-result.bad{border-color:#f0c2c8 !important;background:var(--fp-red-soft) !important;color:#a92f3c !important}
.pppoe-result.pending{border-color:#ecd5a5 !important;background:var(--fp-amber-soft) !important;color:#916014 !important}

/* Smart ONU detail card */
#fp-so-view{padding:16px !important}
.fp-so-head{padding-bottom:11px;border-bottom:1px solid var(--fp-line);margin-bottom:15px !important}
.fp-so-head h2{font-size:18px !important;font-weight:850 !important;letter-spacing:-.35px}
.fp-so-top{gap:16px !important}
.fp-so-device{background:#f8fafc !important;border-color:var(--fp-line) !important;border-radius:12px !important}
.fp-so-router{box-shadow:0 8px 18px rgba(15,23,42,.08)}
.fp-so-info td{font-size:11.5px !important}
.fp-so-info td:first-child{color:#7b8798 !important}
.fp-so-info td:last-child{color:#28364b !important;font-weight:750 !important}
.fp-so-actions button{background:var(--fp-blue) !important;padding:7px 10px !important}
.fp-so-actions button.live{background:var(--fp-green) !important}
.fp-so-graphs{gap:10px !important}
.fp-so-graph,.fp-so-section{border-color:var(--fp-line) !important;border-radius:10px !important;overflow:hidden}
.fp-so-section h3{background:#f8fafc !important;border-color:var(--fp-line) !important;padding:9px 11px !important}
.fp-so-table th,.fp-so-table td{padding:7px 8px !important}

/* ---------- pagination ---------- */
.footer-row{background:#fff !important;border-top:1px solid var(--fp-line)}
.pages button{border-color:var(--fp-line-strong) !important;color:#475467 !important}
.pages button.active{background:var(--fp-blue) !important;color:#fff !important;border-color:var(--fp-blue) !important}

/* ---------- login ---------- */
body.fp-login-page{
  min-height:100vh !important;
  background:
    radial-gradient(circle at 18% 18%,rgba(37,128,255,.16),transparent 31%),
    radial-gradient(circle at 86% 78%,rgba(109,93,252,.13),transparent 29%),
    #09111d !important;
}
body.fp-login-page .box{
  width:min(430px,calc(100% - 30px)) !important;
  padding:30px !important;
  background:rgba(255,255,255,.98) !important;
  border:1px solid rgba(255,255,255,.5) !important;
  border-radius:18px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.34) !important;
  color:var(--fp-text) !important;
}
body.fp-login-page .box::before{
  content:"FP";width:42px;height:42px;display:grid;place-items:center;margin-bottom:16px;
  border-radius:12px;background:linear-gradient(135deg,#2580ff,#6d5dfc);color:#fff;font-weight:900;font-size:14px;
  box-shadow:0 10px 24px rgba(37,128,255,.25);
}
body.fp-login-page h1{font-size:24px;letter-spacing:-.5px}
body.fp-login-page .sub,body.fp-login-page .note{color:var(--fp-muted) !important}
body.fp-login-page label{color:#475467;font-size:12px;font-weight:750}
body.fp-login-page input{min-height:44px !important;padding:10px 12px !important}
body.fp-login-page button[type="submit"]{min-height:44px;border-radius:10px !important}
body.fp-login-page #error{background:var(--fp-red-soft) !important;color:#a82e3b !important;border:1px solid #f1c5ca}

/* ---------- mobile ---------- */
.fp-mobile-toggle{display:none}
@media(max-width:900px){
  body.fp-topnav-layout .topbar{
    width:100% !important;height:60px !important;position:sticky !important;top:0 !important;
    flex-direction:row !important;align-items:center !important;padding:9px 12px !important;overflow:visible;
  }
  body.fp-topnav-layout .topbar .brand{margin:0 !important;min-height:auto !important;flex:1}
  body.fp-topnav-layout .topbar .brand::before{width:34px;height:34px;border-radius:9px}
  body.fp-topnav-layout .nav{
    display:none !important;position:absolute;left:10px;right:10px;top:64px;width:auto !important;
    max-height:calc(100vh - 80px);overflow:auto;padding:10px;border-radius:12px;
    background:#0c1624 !important;border:1px solid #223148;box-shadow:0 18px 42px rgba(0,0,0,.28);
  }
  body.fp-topnav-layout.fp-nav-open .nav{display:flex !important}
  body.fp-topnav-layout .page{margin-left:0 !important;padding:18px 14px 30px !important}
  .fp-mobile-toggle{
    display:grid;width:38px;height:38px;place-items:center;border:1px solid #27364a;border-radius:9px;
    background:#101c2d;color:#d8e5f4;font-size:18px;cursor:pointer;
  }

  body.fp-sidebar-layout .sidebar{
    transform:translateX(-102%);transition:.2s ease;width:258px !important;
  }
  body.fp-sidebar-layout.fp-nav-open .sidebar{transform:translateX(0)}
  body.fp-sidebar-layout .main{margin-left:0 !important;width:100% !important;padding:18px 14px 30px !important}
  body.fp-sidebar-layout .main > .topbar::before{
    content:"☰";display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
    border:1px solid var(--fp-line-strong);border-radius:9px;background:#fff;color:#344054;font-size:17px;cursor:pointer;
  }
  body.fp-sidebar-layout .main > .topbar{align-items:flex-start !important}
  .summary,.stats,.grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .filters{grid-template-columns:1fr 1fr !important}
}
@media(max-width:580px){
  .summary,.stats,.grid{grid-template-columns:1fr !important}
  .filters{grid-template-columns:1fr !important}
  .page-head,.head,.main > .topbar{align-items:flex-start !important;flex-direction:column !important}
  .actions{width:100%}
  .actions .btn,.actions .pill{flex:1}
  .metric-value{font-size:30px !important}
  .fp-so-top,.fp-so-graphs{grid-template-columns:1fr !important}
}