:root{--bg:#f5f5f7;--surface:rgba(255,255,255,.9);--text:#1d1d1f;--muted:#6e6e73;--line:rgba(0,0,0,.08);--brand:#1c6a8d;--brand2:#24a9b9;--green:#2cc95a;--red:#ff453a;--orange:#ff9f0a;--shadow:0 8px 28px rgba(0,0,0,.06)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 20% 10%,rgba(36,169,185,.15),transparent 34%),radial-gradient(circle at 85% 90%,rgba(28,106,141,.12),transparent 36%),var(--bg)}
.login-card{width:min(430px,100%);padding:44px;background:rgba(255,255,255,.84);backdrop-filter:blur(26px);border:1px solid rgba(255,255,255,.9);border-radius:28px;box-shadow:0 35px 90px rgba(0,0,0,.12);text-align:center}
.login-logo{width:230px;max-width:80%;height:auto;margin-bottom:24px}.login-card h1{margin:0;font-size:30px;letter-spacing:-.8px}.login-card p{color:var(--muted);margin:7px 0 28px}.login-card label{display:block;text-align:left;color:var(--muted);font-size:13px;margin:14px 0}
.login-card input,.toolbar input,.modal input,.modal select{width:100%;padding:13px 14px;border:1px solid rgba(0,0,0,.12);border-radius:12px;background:white;outline:none}.login-card input:focus,.toolbar input:focus,.modal input:focus,.modal select:focus{border-color:rgba(28,106,141,.65);box-shadow:0 0 0 4px rgba(28,106,141,.1)}
.error{padding:10px;border-radius:10px;background:rgba(255,69,58,.09);color:#c9342c;font-size:13px}.primary,.actions .primary{background:var(--brand);color:#fff!important;border:0}.primary:hover{background:#155777}.login-card .primary{width:100%;padding:12px;margin-top:8px;border-radius:12px}
.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:270px;padding:24px 18px 18px;background:rgba(247,247,249,.95);border-right:1px solid var(--line);display:flex;flex-direction:column;backdrop-filter:blur(28px);z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:0 6px 28px}.brand img{width:125px;height:auto}.brand>div{display:flex;flex-direction:column}.brand strong{font-size:14px}.brand span{font-size:11px;color:var(--muted);margin-top:2px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.nav{width:100%;padding:12px 14px;border:0;border-radius:12px;background:transparent;color:#505055;text-align:left;position:relative}.nav:hover{background:rgba(0,0,0,.045)}.nav.active{background:rgba(28,106,141,.11);color:var(--brand);font-weight:600}.badge{float:right;background:var(--orange);color:#fff;border-radius:20px;padding:2px 7px;font-size:11px}.side-bottom{margin-top:auto}.server-state{display:flex;gap:8px;align-items:center;padding:14px 10px;color:var(--muted);font-size:12px}.server-state i{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px rgba(44,201,90,.12)}.user-card{display:flex;align-items:center;gap:10px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:16px}.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700}.user-card>div:nth-child(2){display:flex;flex-direction:column;min-width:0}.user-card strong{font-size:13px}.user-card span{font-size:11px;color:var(--muted);text-transform:capitalize}.user-card button{margin-left:auto;border:0;background:transparent;font-size:18px;color:var(--muted)}
.main{margin-left:270px;min-height:100vh}.main header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:26px 36px 20px;background:rgba(245,245,247,.82);border-bottom:1px solid var(--line);backdrop-filter:blur(24px)}header h1{margin:0;font-size:31px;letter-spacing:-.9px}header p{margin:5px 0 0;color:var(--muted);font-size:13px}.refresh{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px}.refresh button{width:40px;height:40px;border:0;border-radius:12px;background:white;box-shadow:0 1px 5px rgba(0,0,0,.08);font-size:20px}
.content{max-width:1600px;margin:auto;padding:30px 36px 50px}.stats,.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}.stat,.metric,.panel{background:var(--surface);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.stat,.metric{padding:22px;border-radius:22px}.stat span,.metric span{color:var(--muted);font-size:13px}.stat strong,.metric strong{display:block;margin-top:16px;font-size:38px;letter-spacing:-1px}.stat small,.metric small{color:#8f8f94}.green{color:#16883d}.red{color:#d92d28}.orange{color:#c87500}
.panel{padding:22px;border-radius:22px;margin-bottom:22px}.panel.no-pad{padding:0;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.panel-head h2{margin:0;font-size:18px}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.link,.back{border:0;background:transparent;color:var(--brand)}
.dash-list{display:flex;flex-direction:column}.dash-row{display:grid;grid-template-columns:24px minmax(150px,1.5fr) 1fr 1fr .8fr .7fr .8fr auto;gap:14px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}.dash-row:last-child{border-bottom:0}.dash-row strong{font-size:13px}.dash-row small{display:block;color:var(--muted);margin-top:3px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}.dot.online{background:var(--green)}.dot.offline{background:var(--red)}.dot.pending{background:var(--orange)}.dot.rebooting{background:var(--orange);animation:pulse 1.2s infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,159,10,.35)}50%{box-shadow:0 0 0 7px rgba(255,159,10,0)}}
.toolbar{margin-bottom:18px}.toolbar input{max-width:520px;background:white}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}th{padding:14px 16px;text-align:left;background:rgba(0,0,0,.018);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.35px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:16px;border-bottom:1px solid var(--line);font-size:13px;white-space:nowrap}tbody tr:last-child td{border-bottom:0}.status-cell{display:flex;align-items:center;gap:8px}.table-actions{display:flex;justify-content:flex-end}
.table-actions button,.actions button,.pending-card button,.panel button.export,.dash-row button{padding:9px 12px;border:0;border-radius:10px;background:rgba(0,0,0,.055);color:var(--text)}.export{background:rgba(28,106,141,.1)!important;color:var(--brand)!important}.danger{background:rgba(255,69,58,.1)!important;color:#c9342c!important}.reboot{background:rgba(255,159,10,.12)!important;color:#a96000!important}.reboot:disabled{opacity:.55;cursor:not-allowed}
.interval-edit{display:inline-flex;align-items:center;gap:3px;padding:4px 7px;margin:-4px -7px;border-radius:8px;cursor:pointer;transition:.15s}.interval-edit:hover{background:rgba(28,106,141,.08);color:var(--brand)}.interval-edit.admin-editable::after{content:"✎";opacity:0;font-size:10px;margin-left:2px;transition:.15s}.interval-edit.admin-editable:hover::after{opacity:.7}.inline-interval-wrap{display:inline-flex;align-items:center;gap:6px}.inline-interval-input{width:72px;padding:7px 8px;border:1px solid rgba(28,106,141,.5);border-radius:8px;outline:none;box-shadow:0 0 0 3px rgba(28,106,141,.08)}
.temperature{display:inline-flex;align-items:center;gap:5px;font-weight:600}.temperature.normal{color:#27834a}.temperature.warning{color:#b86c00}.temperature.critical{color:#c9342c}.temperature.na{color:var(--muted);font-weight:400}
.pending-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}.pending-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}.pending-card h3{margin:0 0 15px}.pending-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.05);font-size:12px}.pending-row span{color:var(--muted)}
.client-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.title-row h2{margin:0;font-size:30px}.detail-status-text{color:var(--muted);font-size:12px;font-weight:600}.detail-status-text.rebooting{color:#a96000}.muted{color:var(--muted);font-size:12px;margin-top:5px}.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.metrics .metric strong{display:inline;font-size:31px}.metrics .metric small{margin-left:4px}
.grid2{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:22px}.chart{height:320px}.info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 30px}.info-item span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;margin-bottom:5px}.info-item strong{font-size:13px;overflow-wrap:anywhere}.info-item .temperature{font-size:13px}
.role,.state{display:inline-flex;padding:5px 9px;border-radius:20px;font-size:11px}.role.admin{background:rgba(28,106,141,.1);color:var(--brand)}.role.viewer{background:rgba(0,0,0,.055)}.state.enabled{background:rgba(44,201,90,.11);color:#18793a}.state.disabled{background:rgba(255,69,58,.1);color:#be332d}
.modal-overlay{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.24);backdrop-filter:blur(12px);z-index:100}.modal{width:min(470px,100%);background:rgba(255,255,255,.96);border-radius:24px;padding:24px;box-shadow:0 35px 90px rgba(0,0,0,.22)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.modal-head h2{margin:0}.modal-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.modal-head button{border:0;background:rgba(0,0,0,.06);width:30px;height:30px;border-radius:50%;font-size:20px}.modal label{display:block;margin:14px 0;color:var(--muted);font-size:13px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.modal-actions button{padding:10px 14px;border:0;border-radius:10px}.warning{padding:14px;border-radius:12px;background:rgba(255,69,58,.08);color:#a52a25;font-size:13px}.notice{padding:14px;border-radius:12px;background:rgba(28,106,141,.08);color:#155777;font-size:13px;line-height:1.45}
.toast{position:fixed;right:25px;bottom:25px;padding:13px 17px;background:rgba(29,29,31,.92);color:#fff;border-radius:14px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.25s;z-index:200}.toast.visible{opacity:1;transform:none}.empty{text-align:center;color:var(--muted);padding:50px 15px}
@media(max-width:1200px){.stats,.metrics{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.info-grid{grid-template-columns:repeat(2,1fr)}.dash-row{grid-template-columns:24px minmax(140px,1.4fr) 1fr 1fr .8fr .7fr auto}.dash-row .dash-temp{display:none}}
@media(max-width:850px){.sidebar{width:82px}.brand img{width:48px}.brand>div,.nav{font-size:0}.nav{padding:13px;text-align:center}.main{margin-left:82px}.content,.main header{padding-left:18px;padding-right:18px}.client-head{align-items:flex-start;flex-direction:column}.actions{justify-content:flex-start}.dash-row{grid-template-columns:24px minmax(140px,1fr) 1fr .8fr auto}.dash-row .dash-upload,.dash-row .dash-temp,.dash-row .dash-interval{display:none}}
@media(max-width:600px){.stats,.metrics,.info-grid{grid-template-columns:1fr}.login-card{padding:34px 24px}}

.update-agent{background:rgba(36,169,185,.12)!important;color:#147887!important}
.update-agent:hover{background:rgba(36,169,185,.2)!important}
.update-agent:disabled{opacity:.55;cursor:not-allowed}
.agent-version-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.agent-version-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(28,106,141,.09);color:var(--brand);font-size:11px;font-weight:700}
.agent-update-state{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}
.agent-update-state.available{background:rgba(36,169,185,.12);color:#147887}
.agent-update-state.current{background:rgba(44,201,90,.11);color:#18793a}
.agent-update-state.unknown{background:rgba(0,0,0,.055);color:var(--muted)}

/* =========================================================
   Responsive/mobile UI + compact list actions
   Desktop layout above 850px remains unchanged.
   ========================================================= */
.mobile-menu-button,.sidebar-backdrop{display:none}
.row-actions,.table-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.quick-test{min-width:38px;font-weight:700;font-size:16px;line-height:1}
.quick-test:disabled{opacity:.5;cursor:not-allowed}
.table-actions .danger:disabled{opacity:.45;cursor:not-allowed}

@media(max-width:850px){
  body.mobile-menu-open{overflow:hidden}
  .sidebar{width:270px;transform:translateX(-100%);transition:transform .22s ease;box-shadow:20px 0 60px rgba(0,0,0,.14);z-index:60}
  .sidebar .brand img{width:125px}
  .sidebar .brand>div{display:flex}
  .sidebar .nav{font-size:inherit;padding:12px 14px;text-align:left}
  body.mobile-menu-open .sidebar{transform:translateX(0)}
  .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .22s;z-index:55}
  body.mobile-menu-open .sidebar-backdrop{opacity:1;pointer-events:auto}
  .main{margin-left:0;width:100%}
  .main header{padding:14px 18px;gap:12px}
  .mobile-menu-button{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:0;border-radius:12px;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.08);font-size:20px}
  .header-title{min-width:0;flex:1}
  header h1{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .refresh span{display:none}
  .content{padding:20px 16px 38px}
  .stats,.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .stat,.metric{padding:17px;border-radius:18px}
  .stat strong,.metric strong{font-size:30px;margin-top:10px}
  .panel{padding:17px;border-radius:18px}
  .panel-head{align-items:flex-start}
  .dash-row{grid-template-columns:14px minmax(0,1fr) auto auto;gap:9px 10px;padding:14px 2px}
  .dash-row>div:nth-of-type(2){grid-column:2;min-width:0}
  .dash-row>div:nth-of-type(2) strong,.dash-row>div:nth-of-type(2) small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dash-row>div:nth-of-type(3){grid-column:3;text-align:right}
  .dash-row>div:nth-of-type(5){grid-column:4;text-align:right}
  .dash-row .dash-upload,.dash-row .dash-temp,.dash-row .dash-interval{display:none}
  .dash-row .row-actions{grid-column:2/-1;justify-content:flex-end}
  .dash-row .row-actions button{min-width:42px}
  .client-head{align-items:flex-start;flex-direction:column}
  .title-row h2{font-size:25px}
  .actions{justify-content:flex-start;width:100%}
  .actions button{flex:1 1 auto}
  .grid2{grid-template-columns:1fr}
  .chart{height:260px}
  .info-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .toolbar input{max-width:none}
}

@media(max-width:600px){
  .login-screen{padding:16px}.login-card{padding:32px 20px;border-radius:22px}
  .stats,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat span,.metric span{font-size:12px}.stat small,.metric small{font-size:10px}
  .panel-head{gap:10px}.panel-head .primary{white-space:nowrap}
  .table-scroll{overflow:visible}
  .table-scroll table,.table-scroll tbody,.table-scroll tr,.table-scroll td{display:block;width:100%}
  .table-scroll thead{display:none}
  .table-scroll tbody{display:grid;gap:12px}
  .table-scroll tr{background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 14px;box-shadow:0 3px 14px rgba(0,0,0,.035)}
  .table-scroll td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.05);white-space:normal;text-align:right;min-width:0}
  .table-scroll td:last-child{border-bottom:0}
  .table-scroll td::before{content:attr(data-label);color:var(--muted);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;text-align:left;flex:0 0 84px}
  .table-scroll td.empty{display:block;text-align:center;padding:30px 10px}
  .table-scroll td.empty::before{display:none}
  .table-actions{flex-wrap:wrap}
  .table-actions button{padding:8px 10px}
  .client-head .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .client-head .actions button{width:100%}
  .info-grid{grid-template-columns:1fr 1fr}
  .modal-overlay{padding:12px}.modal{padding:20px;border-radius:20px;max-height:92vh;overflow:auto}
  .toast{left:14px;right:14px;bottom:14px;text-align:center}
}

@media(max-width:390px){
  .stats,.metrics,.info-grid{grid-template-columns:1fr}
  .panel-head{flex-direction:column;align-items:stretch}
  .panel-head .link,.panel-head .primary{align-self:flex-start}
}

/* Speedtest history filters + pagination */
.history-filters{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:4px 0 18px}
.history-quick-filters{display:flex;gap:8px;flex-wrap:wrap}
.history-quick{background:#f4f7f9;border:1px solid var(--line);color:var(--text)}
.history-quick.active{background:#1c6a8d;color:#fff;border-color:#1c6a8d}
.history-custom{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.history-custom label{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:700}
.history-custom input{min-width:145px}
.history-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px}
.history-count{color:var(--muted);font-size:12px}
.history-pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.history-pages button.active{background:#1c6a8d;color:#fff;border-color:#1c6a8d}
.history-pages button:disabled{opacity:.45;cursor:not-allowed}
.history-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:24px;color:var(--muted)}
@media(max-width:600px){
  .history-filters,.history-pagination{align-items:stretch;flex-direction:column}
  .history-quick-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .history-custom{display:grid;grid-template-columns:1fr 1fr}
  .history-custom .primary,.history-custom button:last-child{grid-column:auto}
  .history-custom input{min-width:0;width:100%}
  .history-pages{display:flex;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .history-pages button{flex:0 0 auto}
}


/* Super Admin Audit Log */
.audit-filters{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;margin:4px 0 18px}
.audit-filters label{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:700}
.audit-filters select,.audit-filters input{min-width:145px}
.audit-action{font-weight:700;font-size:12px}
.audit-details{max-width:360px;white-space:normal;line-height:1.45}
td code{font-size:11px}
@media(max-width:600px){.audit-filters{display:grid;grid-template-columns:1fr 1fr}.audit-filters select,.audit-filters input{min-width:0;width:100%}}

/* NOC Health / SLA */
.dot.healthy{background:#21a366}.dot.degraded{background:#e39a18}.dot.unconfigured{background:#8a94a3}
.attention-list{display:grid;gap:8px}.attention-row{display:grid;grid-template-columns:12px minmax(220px,1fr) 150px 120px;gap:14px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer}.attention-row:last-child{border-bottom:0}.attention-row small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.sla-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sla-grid label{margin:0}
.open-chevron{display:inline-flex!important;align-items:center;justify-content:center}.open-chevron span{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);display:block}
@media(max-width:700px){.attention-row{grid-template-columns:12px 1fr}.attention-row>div:nth-of-type(n+2){display:none}.sla-grid{grid-template-columns:1fr}}

/* Five NOC summary cards on wide desktop; existing responsive rules remain unchanged. */
@media(min-width:1201px){
  #page-dashboard .stats{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ===== Server Health ===== */

.server-state{
  cursor:pointer;
  border-radius:12px;
  transition:.15s;
}

.server-state:hover{
  background:rgba(0,0,0,.045);
}

.server-state.high i{
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,159,10,.14);
}

.server-state.critical i{
  background:var(--red);
  box-shadow:0 0 0 4px rgba(255,69,58,.14);
}

.server-health-modal{
  width:min(520px,100%);
}

.server-health-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.server-health-item{
  padding:16px;
  border-radius:16px;
  background:rgba(0,0,0,.028);
  border:1px solid var(--line);
}

.server-health-item span{
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  margin-bottom:8px;
}

.server-health-item strong{
  display:block;
  font-size:20px;
  letter-spacing:-.3px;
}

.server-health-wide{
  grid-column:1 / -1;
}

@media(max-width:600px){
  .server-health-grid{
    grid-template-columns:1fr;
  }

  .server-health-wide{
    grid-column:auto;
  }
}

/* ===== Light / Dark Theme Toggle ===== */

.header-tools{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}

.theme-toggle-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}

.theme-icon{
  color:var(--muted);
  font-size:15px;
  line-height:1;
  user-select:none;
}

.theme-toggle{
  width:42px;
  height:22px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.12);
  position:relative;
  transition:
    background .22s ease,
    box-shadow .22s ease;
}

.theme-toggle:hover{
  box-shadow:0 0 0 4px rgba(28,106,141,.08);
}

.theme-toggle-knob{
  position:absolute;
  width:18px;
  height:18px;
  left:2px;
  top:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.22);
  transition:transform .22s ease;
}

/* ===== Dark Theme ===== */

html[data-theme="dark"]{
  --bg:#161719;
  --surface:rgba(31,32,35,.94);
  --text:#f3f3f5;
  --muted:#a5a5ab;
  --line:rgba(255,255,255,.09);
  --shadow:0 8px 28px rgba(0,0,0,.25);
}

html[data-theme="dark"] body{
  background:var(--bg);
  color:var(--text);
}

html[data-theme="dark"] .sidebar{
  background:rgba(24,25,28,.97);
}

html[data-theme="dark"] .main header{
  background:rgba(22,23,25,.88);
}

html[data-theme="dark"] .stat,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .pending-card,
html[data-theme="dark"] .modal{
  background:rgba(31,32,35,.96);
  border-color:rgba(255,255,255,.08);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] .toolbar input,
html[data-theme="dark"] .modal input,
html[data-theme="dark"] .modal select{
  background:#25262a;
  color:var(--text);
  border-color:rgba(255,255,255,.12);
}

html[data-theme="dark"] th{
  background:rgba(255,255,255,.025);
}

html[data-theme="dark"] .nav{
  color:#c5c5ca;
}

html[data-theme="dark"] .nav:hover{
  background:rgba(255,255,255,.055);
}

html[data-theme="dark"] .nav.active{
  background:rgba(36,169,185,.15);
}

html[data-theme="dark"] .refresh button,
html[data-theme="dark"] .table-actions button,
html[data-theme="dark"] .actions button,
html[data-theme="dark"] .pending-card button,
html[data-theme="dark"] .panel button.export,
html[data-theme="dark"] .dash-row button{
  background:rgba(255,255,255,.075);
  color:var(--text);
}

html[data-theme="dark"] .server-health-item{
  background:rgba(255,255,255,.04);
}

html[data-theme="dark"] .theme-toggle{
  background:rgba(36,169,185,.45);
}

html[data-theme="dark"] .theme-toggle-knob{
  transform:translateX(20px);
}

html[data-theme="dark"] .login-screen{
  background:
    radial-gradient(circle at 20% 10%,rgba(36,169,185,.12),transparent 34%),
    radial-gradient(circle at 85% 90%,rgba(28,106,141,.12),transparent 36%),
    var(--bg);
}

html[data-theme="dark"] .login-card{
  background:rgba(31,32,35,.92);
  border-color:rgba(255,255,255,.08);
}

@media(max-width:850px){
  .header-tools{
    gap:5px;
  }

  .theme-toggle-wrap{
    gap:6px;
  }
}

/* ===== Dark theme: Speedtest History filters ===== */

html[data-theme="dark"] .history-quick,
html[data-theme="dark"] #historyCustom button,
html[data-theme="dark"] .history-custom button{
  background:rgba(255,255,255,.075);
  color:var(--text);
  border-color:rgba(255,255,255,.10);
}

html[data-theme="dark"] .history-quick:hover{
  background:rgba(255,255,255,.11);
}

html[data-theme="dark"] .history-quick.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}


/* ===== Language Selector ===== */

.header-preferences{
  display:flex;
  align-items:center;
  gap:14px;
}

.language-selector{
  display:flex;
  align-items:center;
  gap:6px;
}

.language-option{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  padding:4px 6px;
  border-radius:7px;
  transition:.15s;
}

.language-option:hover{
  color:var(--text);
  background:rgba(0,0,0,.045);
}

.language-option.active{
  color:#fff;
  background:var(--brand);
}

.language-divider{
  width:1px;
  height:14px;
  background:var(--line);
}

html[data-theme="dark"] .language-option:hover{
  background:rgba(255,255,255,.07);
}

@media(max-width:850px){
  .header-preferences{
    gap:8px;
  }

  .language-selector{
    gap:3px;
  }

  .language-option{
    padding:4px;
    font-size:10px;
  }
}


/* ===== Theme Brand Logo ===== */

.theme-brand-logo{
  display:block;
  width:125px;
}

.theme-brand-logo img{
  display:block;
  width:125px;
  height:auto;
}

/*
  Theme is controlled manually by data-theme,
  therefore JS/CSS override the picture source below.
*/

@media(max-width:850px){
  .theme-brand-logo,
  .theme-brand-logo img{
    width:48px;
  }
}



/* =========================================================
   MOBILE DARK THEME — RESPONSIVE TABLE CARDS
   Clients / History / Users / Audit Logs / future tables
   ========================================================= */

@media(max-width:600px){

  html[data-theme="dark"] .table-scroll tr{
    background:#202124;
    border-color:rgba(255,255,255,.10);
    box-shadow:0 3px 14px rgba(0,0,0,.18);
    color:var(--text);
  }

  html[data-theme="dark"] .table-scroll td{
    color:var(--text);
    border-bottom-color:rgba(255,255,255,.08);
  }

  html[data-theme="dark"] .table-scroll td::before{
    color:var(--muted);
  }

  html[data-theme="dark"] .table-scroll td strong,
  html[data-theme="dark"] .table-scroll td b{
    color:var(--text);
  }

  html[data-theme="dark"] .table-scroll td code{
    color:var(--text);
  }

  html[data-theme="dark"] .table-scroll td.empty{
    color:var(--muted);
  }

}


/* Pending cards — keep same visual language in dark theme */

html[data-theme="dark"] .pending-card{
  background:#202124;
  border-color:rgba(255,255,255,.10);
  color:var(--text);
}

html[data-theme="dark"] .pending-row{
  border-bottom-color:rgba(255,255,255,.08);
}

html[data-theme="dark"] .pending-row span{
  color:var(--muted);
}


/* =========================================================
   NETWORK QUALITY
   ========================================================= */

.network-quality-metrics{
  margin-top:18px;
}

.network-quality-meta{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin:18px 0 22px;
  color:var(--muted);
  font-size:12px;
}

.network-quality-meta strong{
  color:var(--text);
}

.network-quality-charts{
  margin-top:8px;
}

.network-chart-title{
  font-size:12px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--text);
}

.network-quality-table-wrap{
  margin-top:22px;
}

@media(max-width:600px){

  .network-quality-meta{
    gap:10px 18px;
  }

  .network-quality-charts{
    grid-template-columns:1fr;
  }

}


/* Mobile dark mode safeguard */

@media(max-width:600px){

  html[data-theme="dark"] #networkQualityPanel .table-scroll tr{
    background:#202124;
    border-color:rgba(255,255,255,.10);
    color:var(--text);
  }

  html[data-theme="dark"] #networkQualityPanel .table-scroll td{
    color:var(--text);
  }

}


/* =========================================================
   NETWORK QUALITY RANGE SELECTOR
   ========================================================= */

.network-quality-range-selector{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 22px;
}

.network-quality-range{
  padding:8px 13px;
  border-radius:8px;
  cursor:pointer;
}

.network-quality-range.active{
  background:var(--text);
  color:var(--bg);
}

html[data-theme="dark"] .network-quality-range.active{
  background:var(--text);
  color:var(--bg);
}

@media(max-width:600px){

  .network-quality-range-selector{
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }

  .network-quality-range{
    padding:8px 6px;
    font-size:11px;
  }

}


/* =========================================================
   GATEWAY SUMMARY
   ========================================================= */

.gateway-summary{
  margin:0 0 22px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel-soft);
}

.gateway-summary-title{
  font-size:12px;
  font-weight:700;
  margin-bottom:12px;
}

.gateway-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.gateway-summary-grid > div span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:5px;
}

.gateway-summary-grid > div strong{
  font-size:14px;
}

.gateway-summary-grid small{
  margin-left:3px;
  color:var(--muted);
}

@media(max-width:700px){
  .gateway-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:420px){
  .gateway-summary-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   ETHERNET LINK DETAILS
   ========================================================= */

.info-link{
  border:0;
  padding:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.ethernet-link-speed{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.ethernet-link-speed span{
  font-size:18px;
  line-height:1;
  color:var(--muted);
}

.ethernet-link-speed:hover{
  text-decoration:underline;
}

.ethernet-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:8px;
}

.ethernet-detail-grid > div{
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel-soft);
}

.ethernet-detail-grid span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:5px;
}

.ethernet-detail-grid strong{
  font-size:14px;
  word-break:break-word;
}

@media(max-width:520px){
  .ethernet-detail-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   DNS STATUS
   ========================================================= */

.dns-status-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.dns-status-link span{
  font-size:18px;
  line-height:1;
  color:var(--muted);
}

.dns-status-link.dns-ok{
  color:var(--text);
}

.dns-status-link.dns-failed{
  color:#d93025;
}

.dns-error-row{
  grid-column:1 / -1;
}


/* =========================================================
   HEALTH V2 - CRITICAL STATUS
   ========================================================= */

.dot.critical{
    background:#c9342c;
    box-shadow:0 0 0 3px rgba(201,52,44,.10);
}

.status-cell .dot.critical{
    background:#c9342c;
}

.attention-row .dot.critical{
    background:#c9342c;
}



/* =========================================================
   DASHBOARD STATUS FILTERS
   ========================================================= */

.status-filter-card{
    cursor:pointer;
    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.status-filter-card:hover{
    transform:translateY(-2px);
    border-color:rgba(28,106,141,.35);
}

.status-filter-card:active{
    transform:translateY(0);
}

.clients-toolbar{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.client-status-filter{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:7px 10px 7px 13px;
    border-radius:12px;
    background:rgba(28,106,141,.10);
    color:var(--brand);
    font-size:12px;
    font-weight:600;
}

.client-status-filter.hidden{
    display:none;
}

.client-status-filter button{
    width:25px;
    height:25px;
    padding:0;
    border:0;
    border-radius:8px;
    background:rgba(0,0,0,.07);
    color:inherit;
    font-size:18px;
    line-height:1;
    cursor:pointer;
}

.client-status-filter button:hover{
    background:rgba(0,0,0,.12);
}

html[data-theme="dark"] .client-status-filter{
    background:rgba(36,169,185,.13);
}

html[data-theme="dark"] .client-status-filter button{
    background:rgba(255,255,255,.08);
}


/* =========================================================
   HEALTH PARAMETER COLORS
   ========================================================= */

.health-value-degraded{
    color:#ff9f0a !important;
    font-weight:700;
}

.health-value-critical{
    color:#ff3b30 !important;
    font-weight:700;
}

.info-link.health-value-degraded{
    color:#ff9f0a !important;
}

.info-link.health-value-critical{
    color:#ff3b30 !important;
}


/* =========================================================
   SLA SEVERITY COLORS
   ========================================================= */

.sla-warning{
    color:#ffd60a !important;
    font-weight:700 !important;
}

.sla-degraded{
    color:#ff9f0a !important;
    font-weight:700 !important;
}

.sla-critical{
    color:#ff3b30 !important;
    font-weight:700 !important;
}

/* Slight emphasis inside history table */
#historyTable td.sla-warning,
#historyTable td.sla-degraded,
#historyTable td.sla-critical{
    font-weight:700;
}



/* =========================================================
   INCIDENT HISTORY
   ========================================================= */

.incident-severity{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
}

.incident-severity.degraded{
    background:rgba(255,159,10,.12);
    color:#c87500;
}

.incident-severity.critical{
    background:rgba(255,59,48,.12);
    color:#d92d28;
}

.incident-active{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(255,59,48,.12);
    color:#d92d28;
    font-size:11px;
    font-weight:700;
}

.incident-reason{
    white-space:normal;
    min-width:280px;
}


/* =========================================================
   EXPORT REPORT SELECTOR
   ========================================================= */

.export-report-options{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.export-select-all{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(28,106,141,.08);
    cursor:pointer;
}

.export-section-list{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:10px;
}

.export-section-list label{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    cursor:pointer;
}

.export-section-list input,
.export-select-all input{
    width:17px;
    height:17px;
    margin:0;
}

.export-period-info{
    padding:10px 12px;
    border-radius:10px;
    background:rgba(0,0,0,.035);
    font-size:12px;
}

html[data-theme="dark"]
.export-period-info{
    background:rgba(255,255,255,.05);
}

@media(max-width:650px){
    .export-section-list{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   ALARM CENTER
   ========================================================= */

.alarm-center-wrap{
    position:relative;
    display:flex;
    align-items:center;
}

.alarm-bell{
    position:relative;
    width:40px;
    height:40px;
    padding:0;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    cursor:pointer;
}

.alarm-badge{
    position:absolute;
    top:-5px;
    right:-7px;
    min-width:19px;
    height:19px;
    padding:0 5px;
    border-radius:999px;
    background:#ff3b30;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:800;
    line-height:1;
    border:2px solid var(--bg);
}

.alarm-badge.hidden{
    display:none;
}

.alarm-dropdown{
    position:absolute;
    z-index:300;
    top:48px;
    right:0;
    width:min(520px,calc(100vw - 32px));
    max-height:620px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:
        0 18px 55px rgba(0,0,0,.18);
    overflow:hidden;
}

.alarm-dropdown.hidden{
    display:none;
}

.alarm-dropdown-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 17px;
    border-bottom:1px solid var(--line);
}

.alarm-dropdown-head strong{
    display:block;
    font-size:14px;
}

.alarm-dropdown-head span{
    display:block;
    margin-top:3px;
    font-size:11px;
    color:var(--muted);
}

.alarm-list{
    max-height:540px;
    overflow:auto;
}

.alarm-item{
    width:100%;
    border:0;
    border-bottom:1px solid var(--line);
    border-radius:0;
    background:transparent;
    padding:13px 15px;
    display:grid;
    grid-template-columns:
        10px minmax(0,1fr) auto;
    gap:11px;
    text-align:left;
    cursor:pointer;
}

.alarm-item:last-child{
    border-bottom:0;
}

.alarm-item:hover{
    background:rgba(28,106,141,.055);
}

.alarm-item.unread{
    background:rgba(28,106,141,.075);
}

.alarm-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    margin-top:5px;
}

.alarm-dot.degraded{
    background:#ff9f0a;
}

.alarm-dot.critical{
    background:#ff3b30;
}

.alarm-main{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.alarm-main strong{
    font-size:13px;
}

.alarm-reason{
    margin-top:3px;
    font-size:12px;
    line-height:1.35;
    white-space:normal;
}

.alarm-main small{
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
}

.alarm-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
}

.alarm-state{
    display:inline-flex;
    padding:4px 7px;
    border-radius:999px;
    font-size:9px;
    font-weight:800;
}

.alarm-state.active{
    background:rgba(255,59,48,.11);
    color:#ff3b30;
}

.alarm-state.resolved{
    background:rgba(52,199,89,.11);
    color:#34c759;
}

.alarm-severity-text{
    font-size:10px;
    font-weight:700;
}

.alarm-severity-text.degraded{
    color:#ff9f0a;
}

.alarm-severity-text.critical{
    color:#ff3b30;
}

.alarm-empty{
    padding:30px 18px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
}

@media(max-width:650px){
    .alarm-dropdown{
        position:fixed;
        top:72px;
        right:12px;
        left:12px;
        width:auto;
    }
}


/* =========================================================
   ALARM BELL DESIGN V2
   ========================================================= */

.alarm-bell{
    width:42px !important;
    height:42px !important;
    border:1px solid var(--line) !important;
    border-radius:12px !important;
    background:var(--panel) !important;
    color:var(--text) !important;
    box-shadow:none !important;
    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.alarm-bell:hover{
    background:rgba(28,106,141,.08) !important;
    border-color:rgba(28,106,141,.28) !important;
}

.alarm-bell:active{
    transform:scale(.97);
}

.alarm-bell-icon{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.alarm-badge{
    top:-6px !important;
    right:-6px !important;
    min-width:18px !important;
    height:18px !important;
    padding:0 5px !important;
    border-radius:999px !important;
    font-size:10px !important;
    font-weight:800 !important;
    background:#ff3b30 !important;
    color:#fff !important;
    border:2px solid var(--bg) !important;
}



/* =========================================================
   ALARM CENTER DESIGN V3
   ========================================================= */

.header-preferences{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
}


/* Bell now behaves like a header control */

.header-preferences .alarm-center-wrap{
    position:relative;
    display:flex;
    align-items:center;
    margin-left:2px;
}

.header-preferences .alarm-bell{
    width:36px !important;
    height:36px !important;

    border:1px solid var(--line) !important;
    border-radius:11px !important;

    background:transparent !important;
    color:var(--text) !important;

    box-shadow:none !important;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 !important;
}

.header-preferences .alarm-bell:hover{
    background:rgba(28,106,141,.08) !important;
    border-color:rgba(28,106,141,.28) !important;
}

.header-preferences .alarm-bell-icon{
    width:18px;
    height:18px;
}


/* unread badge */

.header-preferences .alarm-badge{
    top:-6px !important;
    right:-7px !important;

    min-width:18px !important;
    height:18px !important;

    padding:0 5px !important;

    background:#ff3b30 !important;
    color:#fff !important;

    border:2px solid var(--bg) !important;

    font-size:10px !important;
    font-weight:800 !important;
}


/* Alarm popup */

.header-preferences .alarm-dropdown{
    position:absolute;

    top:46px;
    right:0;

    width:430px;
    max-width:calc(100vw - 40px);
    max-height:520px;

    z-index:10000;

    border:1px solid var(--line);
    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 20px 55px rgba(0,0,0,.22);

    isolation:isolate;
}


/*
 * IMPORTANT:
 * Explicit opaque backgrounds.
 * Do not inherit a translucent panel background.
 */

html:not([data-theme="dark"])
.header-preferences .alarm-dropdown{
    background:#ffffff !important;
}

html[data-theme="dark"]
.header-preferences .alarm-dropdown{
    background:#1f2022 !important;
}


/* Header of popup */

.header-preferences .alarm-dropdown-head{
    padding:15px 17px;

    border-bottom:1px solid var(--line);

    background:inherit !important;
}

.header-preferences .alarm-dropdown-head strong{
    font-size:14px;
    font-weight:750;
}

.header-preferences .alarm-dropdown-head span{
    margin-top:3px;
    font-size:11px;
    color:var(--muted);
}


/* Scroll area */

.header-preferences .alarm-list{
    max-height:440px;
    overflow-y:auto;

    background:inherit !important;
}


/* Every notification has solid background */

.header-preferences .alarm-item{
    background:inherit !important;

    padding:13px 15px;

    grid-template-columns:
        9px minmax(0,1fr) auto;

    gap:11px;

    border-bottom:1px solid var(--line);
}

.header-preferences .alarm-item:hover{
    background:rgba(28,106,141,.07) !important;
}

.header-preferences .alarm-item.unread{
    background:rgba(28,106,141,.09) !important;
}


/* Slightly cleaner typography */

.header-preferences .alarm-main strong{
    font-size:13px;
    font-weight:700;
}

.header-preferences .alarm-reason{
    font-size:11px;
    line-height:1.4;
}

.header-preferences .alarm-main small{
    font-size:10px;
}


/* Mobile */

@media(max-width:650px){

    .header-preferences{
        gap:8px;
    }

    .header-preferences .alarm-dropdown{
        position:fixed;

        top:72px;
        right:12px;
        left:12px;

        width:auto;
        max-width:none;
    }
}


/* =========================================================
   ALARM CENTER DARK TEXT FIX
   ========================================================= */

html[data-theme="dark"]
.header-preferences .alarm-dropdown{
    color:#f5f5f5 !important;
}

html[data-theme="dark"]
.header-preferences .alarm-main strong{
    color:#f5f5f5 !important;
}

html[data-theme="dark"]
.header-preferences .alarm-reason{
    color:#d3d3d3 !important;
}

html[data-theme="dark"]
.header-preferences .alarm-main small{
    color:#8f9298 !important;
}

html[data-theme="dark"]
.header-preferences .alarm-dropdown-head strong{
    color:#f5f5f5 !important;
}

html[data-theme="dark"]
.header-preferences .alarm-dropdown-head span{
    color:#9da0a6 !important;
}

/* Read rows must stay readable too */
html[data-theme="dark"]
.header-preferences .alarm-item{
    color:#f5f5f5 !important;
}

/* Preserve status colors */
html[data-theme="dark"]
.header-preferences .alarm-state.active{
    color:#ff453a !important;
}

html[data-theme="dark"]
.header-preferences .alarm-state.resolved{
    color:#30d158 !important;
}

html[data-theme="dark"]
.header-preferences .alarm-severity-text.degraded{
    color:#ff9f0a !important;
}

html[data-theme="dark"]
.header-preferences .alarm-severity-text.critical{
    color:#ff453a !important;
}


/* =========================================================
   ALARM CLEAR ALL
   ========================================================= */

.alarm-dropdown-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.alarm-clear-all{
    appearance:none;
    border:0;
    background:transparent;
    color:#1c789d;
    font:inherit;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    padding:7px 10px;
    border-radius:8px;
    transition:
        background .15s ease,
        opacity .15s ease;
}

.alarm-clear-all:hover{
    background:rgba(28,120,157,.10);
}

.alarm-clear-all:disabled{
    opacity:.45;
    cursor:default;
}

html[data-theme="dark"] .alarm-clear-all{
    color:#48a9c7;
}

html[data-theme="dark"] .alarm-clear-all:hover{
    background:rgba(72,169,199,.12);
}



/* =========================================================
   Offline Period Data
   ========================================================= */

.offline-period-button{
  background:rgba(255,159,10,.10)!important;
  color:#a96000!important;
}

.offline-period-button:hover{
  background:rgba(255,159,10,.17)!important;
}


/* Large dedicated modal */

.offline-period-modal{
  width:min(1180px,96vw);
  max-height:92vh;
  overflow:auto;
}


/* Session list */

.offline-period-loading{
  padding:48px 20px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.offline-period-list{
  display:grid;
  gap:10px;
}

.offline-period-card{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;

  padding:16px 18px;

  border:1px solid var(--line);
  border-radius:16px;

  background:rgba(0,0,0,.025);
  color:var(--text);

  text-align:left;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.offline-period-card:hover{
  background:rgba(28,106,141,.06);
  border-color:rgba(28,106,141,.20);
  transform:translateY(-1px);
}

.offline-period-card-main{
  min-width:0;
}

.offline-period-time{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}

.offline-period-time strong{
  font-size:13px;
}

.offline-period-time span{
  color:var(--muted);
}

.offline-period-meta{
  display:flex;
  gap:7px;
  margin-top:6px;

  color:var(--muted);
  font-size:11px;
}

.offline-period-card-side{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;

  min-width:280px;
}

.offline-diagnosis-name{
  font-size:12px;
  font-weight:700;
  text-align:right;
}


/* Confidence badge */

.offline-confidence{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:68px;

  padding:5px 9px;

  border-radius:999px;

  font-size:10px;
  font-weight:800;
  letter-spacing:.35px;
}

.offline-confidence.high{
  background:rgba(44,201,90,.12);
  color:#18793a;
}

.offline-confidence.medium{
  background:rgba(255,159,10,.13);
  color:#a96000;
}

.offline-confidence.low{
  background:rgba(255,69,58,.11);
  color:#be332d;
}


/* Detail page */

.offline-period-back{
  margin-bottom:16px;
  padding:0;
}

.offline-period-diagnosis{
  padding:18px;

  border:1px solid rgba(28,106,141,.14);
  border-radius:18px;

  background:rgba(28,106,141,.055);

  margin-bottom:22px;
}

.offline-diagnosis-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.offline-diagnosis-head > div{
  min-width:0;
}

.offline-diagnosis-label{
  display:block;

  margin-bottom:5px;

  color:var(--muted);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.offline-diagnosis-head strong{
  display:block;
  font-size:20px;
  letter-spacing:-.3px;
}

.offline-diagnosis-text{
  margin:12px 0 18px;

  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}


/* Diagnosis summary */

.offline-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.offline-summary-grid > div{
  padding:12px 13px;

  border:1px solid var(--line);
  border-radius:13px;

  background:rgba(255,255,255,.55);
}

.offline-summary-grid span{
  display:block;

  margin-bottom:5px;

  color:var(--muted);
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.offline-summary-grid strong{
  display:block;
  font-size:12px;
  overflow-wrap:anywhere;
}


/* Telemetry sections */

.offline-period-section{
  margin-top:24px;
}

.offline-period-section-title{
  margin-bottom:10px;

  font-size:14px;
  font-weight:750;
}

.offline-period-section .table-scroll{
  border:1px solid var(--line);
  border-radius:15px;
  overflow:auto;
}

.offline-period-section table{
  min-width:820px;
}

.offline-period-section th{
  background:rgba(0,0,0,.025);
}

.offline-period-section td{
  font-size:12px;
  padding:12px 14px;
}


/* =========================================================
   Dark mode
   ========================================================= */

html[data-theme="dark"] .offline-period-button{
  background:rgba(255,159,10,.14)!important;
  color:#ffb84d!important;
}

html[data-theme="dark"] .offline-period-button:hover{
  background:rgba(255,159,10,.22)!important;
}

html[data-theme="dark"] .offline-period-modal{
  background:rgba(31,32,35,.98);
  color:var(--text);
}

html[data-theme="dark"] .offline-period-card{
  background:rgba(255,255,255,.035);
  color:var(--text);
}

html[data-theme="dark"] .offline-period-card:hover{
  background:rgba(36,169,185,.09);
  border-color:rgba(36,169,185,.22);
}

html[data-theme="dark"] .offline-period-diagnosis{
  background:rgba(36,169,185,.07);
  border-color:rgba(36,169,185,.18);
}

html[data-theme="dark"] .offline-summary-grid > div{
  background:rgba(255,255,255,.035);
}

html[data-theme="dark"] .offline-period-section th{
  background:rgba(255,255,255,.035);
}

html[data-theme="dark"] .offline-confidence.high{
  color:#62d982;
}

html[data-theme="dark"] .offline-confidence.medium{
  color:#ffb84d;
}

html[data-theme="dark"] .offline-confidence.low{
  color:#ff736c;
}


/* =========================================================
   Responsive
   ========================================================= */

@media(max-width:850px){

  .offline-period-modal{
    width:100%;
  }

  .offline-period-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .offline-period-card-side{
    width:100%;
    min-width:0;
    justify-content:space-between;
  }

  .offline-diagnosis-name{
    text-align:left;
  }

  .offline-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


@media(max-width:600px){

  .offline-period-modal{
    max-height:94vh;
  }

  .offline-period-time{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

  .offline-period-time > span{
    display:none;
  }

  .offline-summary-grid{
    grid-template-columns:1fr 1fr;
  }

  .offline-diagnosis-head{
    align-items:flex-start;
  }
}


@media(max-width:390px){

  .offline-summary-grid{
    grid-template-columns:1fr;
  }
}



/* =========================================================
   Network Quality range selector - dark mode active state
   ========================================================= */

html[data-theme="dark"]
.network-quality-range-selector
.network-quality-range{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);
}

html[data-theme="dark"]
.network-quality-range-selector
.network-quality-range:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}

html[data-theme="dark"]
.network-quality-range-selector
.network-quality-range.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:
    0 0 0 2px rgba(36,169,185,.18),
    0 4px 14px rgba(0,0,0,.24);
  font-weight:700;
}



/* =========================================================
   Inline Agent Update
   Run test | Open client | Agent update
   ========================================================= */

.agent-inline-update{
  width:38px;
  min-width:38px;
  height:38px;

  padding:0 !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:10px;

  background:rgba(0,0,0,.055);
  color:var(--text);

  line-height:1;

  transition:
    background .15s ease,
    color .15s ease,
    opacity .15s ease,
    box-shadow .15s ease;
}

.agent-update-glyph{
  display:block;
  font-size:20px;
  line-height:1;
  font-weight:600;
  transform:translateY(-1px);
}


/* Update available */

.agent-inline-update.available{
  background:rgba(36,169,185,.12);
  color:#147887;
  cursor:pointer;
}

.agent-inline-update.available:hover{
  background:rgba(36,169,185,.20);
  box-shadow:
    0 0 0 3px
    rgba(36,169,185,.07);
}


/* Current / unavailable / offline */

.agent-inline-update.current,
.agent-inline-update:disabled{
  opacity:.35;
  cursor:default;
}


/* Update in progress */

.agent-inline-update.updating{
  opacity:1;
  color:#147887;
  cursor:wait;
}

.agent-inline-update.updating
.agent-update-glyph{
  animation:
    inline-agent-update-pulse
    1s ease-in-out infinite;
}

@keyframes inline-agent-update-pulse{
  0%,100%{
    opacity:1;
    transform:translateY(-1px);
  }

  50%{
    opacity:.45;
    transform:translateY(-4px);
  }
}


/* Dark theme */

html[data-theme="dark"]
.agent-inline-update{
  background:rgba(255,255,255,.07);
  color:var(--text);
}

html[data-theme="dark"]
.agent-inline-update.available{
  background:rgba(36,169,185,.15);
  color:#55c6d3;
}

html[data-theme="dark"]
.agent-inline-update.available:hover{
  background:rgba(36,169,185,.24);
  box-shadow:
    0 0 0 3px
    rgba(36,169,185,.09);
}

html[data-theme="dark"]
.agent-inline-update.current,
html[data-theme="dark"]
.agent-inline-update:disabled{
  opacity:.30;
}



/* =========================================================
   Agent update cloud icon
   ========================================================= */

.agent-inline-update .agent-update-glyph{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:0;
  line-height:1;

  transform:none;
}

.agent-inline-update .agent-update-glyph svg{
  width:20px;
  height:20px;

  display:block;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* Available update */

.agent-inline-update.available
.agent-update-glyph{
  opacity:1;
}


/* Current / unavailable */

.agent-inline-update.current
.agent-update-glyph,
.agent-inline-update:disabled
.agent-update-glyph{
  opacity:.85;
}


/* Update animation */

.agent-inline-update.updating
.agent-update-glyph{
  animation:
    agent-cloud-upload-pulse
    1s ease-in-out infinite;
}

@keyframes agent-cloud-upload-pulse{
  0%,100%{
    opacity:1;
    transform:translateY(0);
  }

  50%{
    opacity:.5;
    transform:translateY(-2px);
  }
}



/* =========================================================
   Collapsible desktop sidebar
   ========================================================= */

.sidebar,
.main{
  transition:
    width .22s ease,
    margin-left .22s ease;
}


/* ---------- navigation icons ---------- */

.nav{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:46px;
  overflow:hidden;
}

.nav-icon{
  width:20px;
  min-width:20px;
  height:20px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:currentColor;
}

.nav-icon svg{
  width:19px;
  height:19px;

  display:block;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-label{
  white-space:nowrap;
}


/* ---------- collapse button ---------- */

.brand{
  position:relative;
}

.sidebar-collapse-button{
  width:30px;
  min-width:30px;
  height:30px;

  margin-left:auto;
  padding:0;

  border:0;
  border-radius:9px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.045);
  color:var(--muted);

  transition:
    background .15s ease,
    color .15s ease;
}

.sidebar-collapse-button:hover{
  background:rgba(28,106,141,.10);
  color:var(--brand);
}


/*
   Double chevron is drawn with CSS.
   Same visual language as open-chevron.
*/

.sidebar-collapse-icon{
  position:relative;
  display:block;

  width:12px;
  height:12px;
}

.sidebar-collapse-icon::before,
.sidebar-collapse-icon::after{
  content:"";

  position:absolute;
  top:2px;

  width:6px;
  height:6px;

  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;

  transform:rotate(45deg);
}

.sidebar-collapse-icon::before{
  left:1px;
}

.sidebar-collapse-icon::after{
  left:6px;
}


/* =========================================================
   Collapsed state
   ========================================================= */

@media(min-width:851px){

  body.sidebar-collapsed .sidebar{
    width:82px;
    padding-left:14px;
    padding-right:14px;
  }

  body.sidebar-collapsed .main{
    margin-left:82px;
  }


  /* Brand */

  body.sidebar-collapsed .brand{
    padding-left:0;
    padding-right:0;
    padding-bottom:28px;

    flex-direction:column;
    gap:12px;
  }

  body.sidebar-collapsed .brand img{
    width:46px;
  }

  body.sidebar-collapsed .brand-text{
    display:none;
  }

  body.sidebar-collapsed
  .sidebar-collapse-button{
    margin-left:0;
    width:38px;
    height:34px;
  }


  /* reverse chevron */

  body.sidebar-collapsed
  .sidebar-collapse-icon{
    transform:rotate(180deg);
  }


  /* Navigation */

  body.sidebar-collapsed .sidebar nav{
    align-items:center;
  }

  body.sidebar-collapsed .nav{
    width:52px;
    height:48px;

    padding:0;

    justify-content:center;
    gap:0;
  }

  body.sidebar-collapsed .nav-label{
    display:none;
  }

  body.sidebar-collapsed .nav-icon{
    width:21px;
    min-width:21px;
    height:21px;
  }

  body.sidebar-collapsed .nav-icon svg{
    width:20px;
    height:20px;
  }


  /* Pending counter */

  body.sidebar-collapsed .badge{
    position:absolute;
    right:3px;
    top:3px;

    min-width:17px;
    height:17px;

    padding:1px 4px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:9px;
  }


  /* Bottom server state */

  body.sidebar-collapsed .server-state{
    justify-content:center;
    padding:14px 0;
  }

  body.sidebar-collapsed
  .server-state span{
    display:none;
  }


  /* User card */

  body.sidebar-collapsed .user-card{
    padding:9px;
    justify-content:center;
  }

  body.sidebar-collapsed
  .user-card>div:nth-child(2),
  body.sidebar-collapsed
  .user-card>button{
    display:none;
  }

}


/* =========================================================
   Dark mode
   ========================================================= */

html[data-theme="dark"]
.sidebar-collapse-button{
  background:rgba(255,255,255,.07);
  color:var(--muted);
}

html[data-theme="dark"]
.sidebar-collapse-button:hover{
  background:rgba(36,169,185,.14);
  color:#55c6d3;
}


/* Mobile keeps existing slide-out menu */
@media(max-width:850px){

  .sidebar-collapse-button{
    display:none;
  }

  .nav-icon{
    width:20px;
    min-width:20px;
  }

  .sidebar .nav{
    display:flex;
    align-items:center;
    gap:12px;
  }

}



/* =========================================================
   Collapsible desktop sidebar
   ========================================================= */

.sidebar,
.main{
  transition:
    width .22s ease,
    margin-left .22s ease;
}


/* ---------- navigation icons ---------- */

.nav{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:46px;
  overflow:hidden;
}

.nav-icon{
  width:20px;
  min-width:20px;
  height:20px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:currentColor;
}

.nav-icon svg{
  width:19px;
  height:19px;

  display:block;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-label{
  white-space:nowrap;
}


/* ---------- collapse button ---------- */

.brand{
  position:relative;
}

.sidebar-collapse-button{
  width:30px;
  min-width:30px;
  height:30px;

  margin-left:auto;
  padding:0;

  border:0;
  border-radius:9px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.045);
  color:var(--muted);

  transition:
    background .15s ease,
    color .15s ease;
}

.sidebar-collapse-button:hover{
  background:rgba(28,106,141,.10);
  color:var(--brand);
}


/*
   Double chevron is drawn with CSS.
   Same visual language as open-chevron.
*/

.sidebar-collapse-icon{
  position:relative;
  display:block;

  width:12px;
  height:12px;
}

.sidebar-collapse-icon::before,
.sidebar-collapse-icon::after{
  content:"";

  position:absolute;
  top:2px;

  width:6px;
  height:6px;

  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;

  transform:rotate(45deg);
}

.sidebar-collapse-icon::before{
  left:1px;
}

.sidebar-collapse-icon::after{
  left:6px;
}


/* =========================================================
   Collapsed state
   ========================================================= */

@media(min-width:851px){

  body.sidebar-collapsed .sidebar{
    width:82px;
    padding-left:14px;
    padding-right:14px;
  }

  body.sidebar-collapsed .main{
    margin-left:82px;
  }


  /* Brand */

  body.sidebar-collapsed .brand{
    padding-left:0;
    padding-right:0;
    padding-bottom:28px;

    flex-direction:column;
    gap:12px;
  }

  body.sidebar-collapsed .brand img{
    width:46px;
  }

  body.sidebar-collapsed .brand-text{
    display:none;
  }

  body.sidebar-collapsed
  .sidebar-collapse-button{
    margin-left:0;
    width:38px;
    height:34px;
  }


  /* reverse chevron */

  body.sidebar-collapsed
  .sidebar-collapse-icon{
    transform:rotate(180deg);
  }


  /* Navigation */

  body.sidebar-collapsed .sidebar nav{
    align-items:center;
  }

  body.sidebar-collapsed .nav{
    width:52px;
    height:48px;

    padding:0;

    justify-content:center;
    gap:0;
  }

  body.sidebar-collapsed .nav-label{
    display:none;
  }

  body.sidebar-collapsed .nav-icon{
    width:21px;
    min-width:21px;
    height:21px;
  }

  body.sidebar-collapsed .nav-icon svg{
    width:20px;
    height:20px;
  }


  /* Pending counter */

  body.sidebar-collapsed .badge{
    position:absolute;
    right:3px;
    top:3px;

    min-width:17px;
    height:17px;

    padding:1px 4px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:9px;
  }


  /* Bottom server state */

  body.sidebar-collapsed .server-state{
    justify-content:center;
    padding:14px 0;
  }

  body.sidebar-collapsed
  .server-state span{
    display:none;
  }


  /* User card */

  body.sidebar-collapsed .user-card{
    padding:9px;
    justify-content:center;
  }

  body.sidebar-collapsed
  .user-card>div:nth-child(2),
  body.sidebar-collapsed
  .user-card>button{
    display:none;
  }

}


/* =========================================================
   Dark mode
   ========================================================= */

html[data-theme="dark"]
.sidebar-collapse-button{
  background:rgba(255,255,255,.07);
  color:var(--muted);
}

html[data-theme="dark"]
.sidebar-collapse-button:hover{
  background:rgba(36,169,185,.14);
  color:#55c6d3;
}


/* Mobile keeps existing slide-out menu */
@media(max-width:850px){

  .sidebar-collapse-button{
    display:none;
  }

  .nav-icon{
    width:20px;
    min-width:20px;
  }

  .sidebar .nav{
    display:flex;
    align-items:center;
    gap:12px;
  }

}



/* =========================================================
   Sidebar collapsed Teleport mark
   ========================================================= */

.sidebar-logo-mark{
  display:none;
  width:46px;
  height:46px;
  object-fit:contain;
  flex:0 0 46px;
}

@media(min-width:851px){

  body.sidebar-collapsed
  .sidebar-logo-full{
    display:none;
  }

  body.sidebar-collapsed
  .sidebar-logo-mark{
    display:block;
  }

  body.sidebar-collapsed
  .brand img.sidebar-logo-mark{
    width:46px;
    height:46px;
  }

}


/* =========================================================
   Sidebar collapsed logo - Light / Dark
   ========================================================= */

/* Default: marks are hidden while sidebar is expanded */
.sidebar-logo-mark{
  display:none;
  width:46px;
  height:46px;
  object-fit:contain;
  flex:0 0 46px;
}


/* Desktop collapsed sidebar */
@media(min-width:851px){

  /* Full logo disappears */
  body.sidebar-collapsed
  .sidebar-logo-full{
    display:none;
  }

  /*
     LIGHT THEME
     Original Prussian Blue Teleport mark
  */
  body.sidebar-collapsed
  .sidebar-logo-mark-light{
    display:block;
  }

  body.sidebar-collapsed
  .sidebar-logo-mark-dark{
    display:none;
  }


  /*
     DARK THEME
     Original white Teleport mark
  */
  html[data-theme="dark"]
  body.sidebar-collapsed
  .sidebar-logo-mark-light{
    display:none;
  }

  html[data-theme="dark"]
  body.sidebar-collapsed
  .sidebar-logo-mark-dark{
    display:block;
  }


  /* Prevent old generic brand image rule from resizing it */
  body.sidebar-collapsed
  .brand img.sidebar-logo-mark{
    width:46px;
    height:46px;
    max-width:46px;
  }

}


/* =========================================================
   Sidebar / Chromium compositor stability fix
   ========================================================= */

/*
   Do not animate the whole main document.
   Animating margin/width together with multiple backdrop-filter
   layers may create temporary compositor seams while scrolling.
*/

.sidebar{
  transition:width .18s ease;
}

.main{
  transition:none !important;
}


/*
   Keep fixed/sticky surfaces on stable compositor layers.
*/


.main header{
  transform:translateZ(0);
  backface-visibility:hidden;
}


/*
   Prevent transient horizontal paint seams on dashboard panels.
*/

.content,
.page{
  position:relative;
  z-index:0;
}



/* =========================================================
   Light theme paint seam fix
   ========================================================= */

html:not([data-theme="dark"]) .main{
  background:var(--bg);
}

html:not([data-theme="dark"]) .main header{
  background:rgba(245,245,247,.96);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

html:not([data-theme="dark"]) .content{
  background:var(--bg);
  isolation:isolate;
}

html:not([data-theme="dark"]) .page{
  background:transparent;
}

html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .stat,
html:not([data-theme="dark"]) .metric{
  transform:translateZ(0);
  backface-visibility:hidden;
}



/* =========================================================
   Chromium horizontal compositor seam fix
   ========================================================= */

/*
   Main content cards are already almost opaque.
   Disable backdrop-filter here to prevent GPU tile seams.
*/

.panel,
.stat,
.metric{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  transform:none !important;
  backface-visibility:visible !important;
}


/*
   Do not force the main document/header into separate
   GPU compositing layers.
*/

.main,
.main header,
.content,
.page{
  transform:none !important;
  backface-visibility:visible !important;
}


/*
   Remove previously added paint-layer isolation.
*/

.content{
  isolation:auto !important;
}


/*
   Sticky header does not need blur for this design.
   Keep the same translucent visual background.
*/

.main header{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/*
   Main layout must switch width immediately when sidebar
   collapses. Do not animate the entire document surface.
*/

.main{
  transition:none !important;
}



/* =========================================================
   Canonical mobile sidebar behavior
   ========================================================= */

@media(max-width:850px){

  body:not(.mobile-menu-open) .sidebar{
    width:270px;
    transform:translateX(-100%) !important;
  }

  body.mobile-menu-open .sidebar{
    width:270px;
    transform:translateX(0) !important;
  }

  .sidebar{
    transition:transform .22s ease !important;
  }

  .main{
    margin-left:0 !important;
    width:100% !important;
  }

  .sidebar-backdrop{
    display:block;
    opacity:0;
    pointer-events:none;
  }

  body.mobile-menu-open .sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }

}