/* =========================================================
   TELEKABEL 4.0 NOC
   GLOBAL UI V3
   Readable · Compact · Responsive
   ========================================================= */

:root{
  --ui-bg:#f3f6fa;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fafc;
  --ui-surface-hover:#f4f7fb;

  --ui-text:#172033;
  --ui-text-2:#344154;
  --ui-muted:#64748b;
  --ui-muted-2:#8794a6;

  --ui-line:#dce3ec;
  --ui-line-strong:#cbd5e1;

  --ui-blue:#2f6fed;
  --ui-blue-soft:#edf4ff;

  --ui-green:#159b68;
  --ui-green-soft:#eaf8f2;

  --ui-yellow:#b77900;
  --ui-yellow-soft:#fff8dd;

  --ui-orange:#d86a18;
  --ui-orange-soft:#fff3e8;

  --ui-red:#df3d4f;
  --ui-red-soft:#fff0f2;

  --ui-purple:#7553c6;
  --ui-purple-soft:#f3efff;

  --ui-radius:14px;
  --ui-radius-lg:18px;

  --ui-shadow:
    0 1px 2px rgba(15,23,42,.025),
    0 8px 24px rgba(15,23,42,.045);
}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

html{
  font-size:16px;
  background:var(--ui-bg);
}

body.tk-app{
  background:var(--ui-bg) !important;
  color:var(--ui-text) !important;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.tk-shell{
  background:var(--ui-bg) !important;
}

.tk-shell main{
  color:var(--ui-text);
}

.tk-shell main h1,
.tk-shell main h2,
.tk-shell main h3,
.tk-shell main h4,
.tk-shell main strong,
.tk-shell main b{
  color:var(--ui-text);
}

.tk-shell main p{
  line-height:1.55;
}

.tk-shell main .muted{
  color:var(--ui-muted) !important;
}

.tk-shell main .eyebrow,
.tk-shell main .kicker,
.tk-eyebrow{
  color:#52657d !important;
  font-size:11px !important;
  font-weight:800;
  letter-spacing:1.15px;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.tk-sidebar{
  background:#111e31 !important;
  box-shadow:
    8px 0 30px rgba(15,23,42,.07) !important;
}

.tk-side-brand b{
  font-size:17px !important;
  letter-spacing:-.2px;
}

.tk-side-brand span{
  font-size:11px !important;
  color:#9caec2 !important;
}

.tk-side-nav small{
  color:#8295ac !important;
  font-size:10px !important;
  letter-spacing:1.25px;
}

.tk-side-nav a{
  min-height:42px;

  font-size:14px !important;
  font-weight:650;

  color:#c4d0dd !important;

  border-radius:10px !important;

  transition:
    background .14s ease,
    color .14s ease,
    transform .14s ease;
}

.tk-side-nav a:hover{
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
}

.tk-side-nav a.active{
  background:#223b62 !important;
  color:#fff !important;
}

.tk-side-nav a.active i{
  color:#64b0ff !important;
}

.tk-side-note{
  color:#8fa1b5 !important;
}

.tk-side-note b{
  color:#e6edf5 !important;
  font-size:11px;
}

.tk-side-note span{
  font-size:10px !important;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.tk-topbar{
  min-height:72px;
  height:auto !important;

  padding:11px 28px !important;

  background:rgba(255,255,255,.97) !important;

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

  box-shadow:
    0 1px 3px rgba(15,23,42,.025);
}

.tk-topbar-title b{
  color:var(--ui-text) !important;
  font-size:17px !important;
  font-weight:750;
}

.tk-topbar-title span{
  color:var(--ui-muted) !important;
  font-size:12px !important;
}

.tk-monitor-status strong{
  color:var(--ui-text) !important;
  font-size:13px !important;
}

.tk-monitor-status small{
  color:var(--ui-muted) !important;
  font-size:11px !important;
}


/* =========================================================
   LIVE STRIP
   ========================================================= */

.tk-live-strip{
  gap:9px !important;

  padding:
    0
    22px
    10px !important;

  background:#fff !important;
}

.tk-live-strip > div{
  min-height:72px;

  padding:11px 13px !important;

  border-radius:11px !important;
  border:1px solid #18354a !important;

  background:#081a29 !important;
}

.tk-live-strip span{
  font-size:10px !important;
  font-weight:750;
  letter-spacing:.35px;
}

.tk-live-strip b{
  margin-top:4px;

  font-size:13px !important;
  line-height:1.25;
}

.tk-live-strip small{
  margin-top:4px;

  font-size:10px !important;
  line-height:1.25;

  color:#9fb0c0 !important;
}


/* =========================================================
   PAGE LAYOUT
   ========================================================= */

.tk-shell main{
  padding:
    34px
    clamp(20px,2.5vw,38px)
    70px !important;
}

.tk-page-head,
.page-head{
  margin-bottom:24px !important;
}

.tk-page-head h1,
.page-head h1{
  color:var(--ui-text) !important;

  font-size:38px !important;
  line-height:1.08 !important;
  letter-spacing:-1.1px !important;

  font-weight:780;
}

.tk-page-head p,
.page-head p{
  color:var(--ui-muted) !important;
  font-size:14px !important;
  line-height:1.55;
}


/* =========================================================
   GENERIC SURFACES
   ========================================================= */

.tk-shell main .panel,
.tk-shell main .card,
.tk-shell main .tk-kpi-card{
  background:var(--ui-surface) !important;

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

  box-shadow:var(--ui-shadow) !important;

  color:var(--ui-text) !important;
}

.tk-shell main .panel{
  padding:22px !important;
}


/* =========================================================
   KPI
   ========================================================= */

.tk-kpi-grid{
  gap:12px !important;
}

.tk-kpi-card{
  min-height:130px !important;
  padding:18px !important;
}

.tk-kpi-card span{
  color:var(--ui-text-2) !important;
  font-size:14px !important;
  font-weight:700 !important;
}

.tk-kpi-card b{
  margin:5px 0 4px !important;

  color:var(--ui-text) !important;

  font-size:35px !important;
  line-height:1 !important;

  font-variant-numeric:tabular-nums;
}

.tk-kpi-card small{
  color:var(--ui-muted) !important;

  font-size:11px !important;
  line-height:1.4 !important;
}

.tk-kpi-icon{
  width:46px !important;
  height:46px !important;
  flex:0 0 46px !important;

  border-radius:13px !important;
}


/* =========================================================
   SECTION HEADERS
   ========================================================= */

.tk-section-head h2,
.tk-subsection-head h2,
.panel-head h2{
  font-size:19px !important;
  line-height:1.25;
}

.tk-section-head p,
.tk-subsection-head p,
.panel-head p{
  color:var(--ui-muted) !important;
  font-size:13px !important;
}


/* =========================================================
   FORMS
   ========================================================= */

.tk-shell main input,
.tk-shell main select,
.tk-shell main textarea,
.tk-shell main button{
  font:inherit;
}

.tk-shell main input[type="text"],
.tk-shell main input[type="search"],
.tk-shell main input[type="number"],
.tk-shell main select,
.tk-shell main textarea,
.tk-shell main .onu-search{
  min-height:42px;

  padding:9px 12px;

  border:1px solid var(--ui-line-strong) !important;
  border-radius:10px !important;

  background:#fff !important;
  color:var(--ui-text) !important;

  outline:none;

  font-size:13px !important;
}

.tk-shell main input::placeholder,
.tk-shell main textarea::placeholder,
.tk-shell main .onu-search::placeholder{
  color:#8795a8 !important;
  opacity:1;
}

.tk-shell main input:focus,
.tk-shell main select:focus,
.tk-shell main textarea:focus{
  border-color:#6a9af2 !important;

  box-shadow:
    0 0 0 3px rgba(47,111,237,.09) !important;
}


/* =========================================================
   BUTTONS / TABS / FILTERS
   ========================================================= */

.tk-shell main .button,
.tk-shell main .diag-tab,
.tk-shell main .map-filter{
  font-size:13px !important;
}

.tk-shell main .onu-tabs a,
.tk-shell main .onu-filters a{
  color:#526378 !important;

  font-size:13px !important;
  font-weight:700 !important;

  border-color:var(--ui-line) !important;
}

.tk-shell main .onu-tabs a:hover,
.tk-shell main .onu-filters a:hover{
  color:var(--ui-text) !important;
  background:#f3f6fb !important;
}

.tk-shell main .onu-tabs a.active,
.tk-shell main .onu-filters a.active{
  color:#fff !important;
  background:var(--ui-blue) !important;
  border-color:var(--ui-blue) !important;
}


/* =========================================================
   TABLES
   ========================================================= */

.tk-shell main .table,
.tk-shell main .ops-table{
  background:#fff !important;

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

  box-shadow:
    0 5px 18px rgba(15,23,42,.035);
}

.tk-shell main table{
  color:var(--ui-text);
}

.tk-shell main th{
  padding:11px 12px !important;

  background:#f7f9fc !important;

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

  color:#5f7084 !important;

  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.45px !important;
}

.tk-shell main td{
  padding:12px !important;

  border-bottom:1px solid #edf0f4 !important;

  color:#263447 !important;

  font-size:13px !important;
  line-height:1.4;
}

.tk-shell main td small{
  color:var(--ui-muted) !important;
  font-size:11px !important;
}

.tk-shell main tbody tr{
  transition:background .12s ease;
}

.tk-shell main tbody tr:hover{
  background:#f8fafc !important;
}


/* =========================================================
   BADGES
   ========================================================= */

.tk-shell main .badge{
  padding:5px 8px;

  border-radius:7px;

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

.tk-shell main .badge.critical{
  background:var(--ui-red-soft) !important;
  color:var(--ui-red) !important;
}

.tk-shell main .badge.high{
  background:var(--ui-orange-soft) !important;
  color:var(--ui-orange) !important;
}

.tk-shell main .badge.warning{
  background:var(--ui-yellow-soft) !important;
  color:var(--ui-yellow) !important;
}

.tk-shell main .badge.normal,
.tk-shell main .badge.up{
  background:var(--ui-green-soft) !important;
  color:var(--ui-green) !important;
}


/* =========================================================
   ONU PAGE · FOLLOW GLOBAL DESIGN
   ========================================================= */

.tk-shell main .onu-kpis{
  gap:10px !important;
}

.tk-shell main .onu-kpi{
  background:#fff !important;

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

  box-shadow:
    0 4px 14px rgba(15,23,42,.03) !important;

  color:var(--ui-text) !important;
}

.tk-shell main .onu-kpi small{
  color:var(--ui-muted) !important;
  font-size:13px !important;
}

.tk-shell main .onu-kpi b{
  color:var(--ui-text) !important;
  font-size:30px !important;
}

.tk-shell main .onu-kpi span{
  color:var(--ui-muted) !important;
  font-size:11px !important;
}

.tk-shell main .onu-toolbar{
  background:#fff !important;

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

  box-shadow:
    0 4px 14px rgba(15,23,42,.025);
}

.tk-shell main .onu-tabs{
  background:#f2f5f9 !important;
}


/* OLT */

.tk-shell main .net-olt{
  margin-bottom:10px;

  background:#fff !important;

  border:1px solid var(--ui-line) !important;
  border-left:4px solid #94a3b8 !important;

  border-radius:14px !important;

  box-shadow:
    0 4px 14px rgba(15,23,42,.035) !important;
}

.tk-shell main .net-olt.has-critical{
  border-left-color:var(--ui-red) !important;
}

.tk-shell main .net-olt.has-bad:not(.has-critical){
  border-left-color:var(--ui-orange) !important;
}

.tk-shell main .olt-summary{
  padding:15px 16px !important;
}

.tk-shell main .olt-summary:hover{
  background:#f8fafc !important;
}

.tk-shell main .olt-title strong{
  color:var(--ui-text) !important;
  font-size:17px !important;
}

.tk-shell main .olt-sub{
  color:var(--ui-muted) !important;
  font-size:12px !important;
}


/* PON */

.tk-shell main .net-pon{
  background:#f8fafc !important;

  border:1px solid #e1e7ef !important;

  border-radius:11px !important;
}

.tk-shell main .pon-summary:hover{
  background:#f2f6fa !important;
}

.tk-shell main .pon-name{
  color:#263447 !important;
  font-size:14px !important;
}

.tk-shell main .pon-sub{
  color:var(--ui-muted) !important;
  font-size:11px !important;
}


/* Splitter */

.tk-shell main .splitter-row{
  background:#fff !important;

  border-left-color:#d5dee8 !important;
}

.tk-shell main .splitter-row:hover{
  background:#f7f9fc !important;
  border-left-color:var(--ui-blue) !important;
}

.tk-shell main .splitter-title{
  color:var(--ui-text-2) !important;
  font-size:13px !important;
}

.tk-shell main .splitter-location,
.tk-shell main .splitter-rx{
  color:var(--ui-muted) !important;
  font-size:11px !important;
}


/* ONU issue chips */

.tk-shell main .issue-chip{
  min-height:28px;

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

  background:#f7f9fc !important;

  color:#56677b !important;

  font-size:11px !important;
}

.tk-shell main .issue-chip.total{
  background:#edf3fa !important;
  color:#26384c !important;
}

.tk-shell main .issue-chip.critical{
  background:var(--ui-red-soft) !important;
  color:var(--ui-red) !important;
  border-color:#ffd4d9 !important;
}

.tk-shell main .issue-chip.bad{
  background:var(--ui-orange-soft) !important;
  color:var(--ui-orange) !important;
  border-color:#f9ddc5 !important;
}

.tk-shell main .issue-chip.warning{
  background:var(--ui-yellow-soft) !important;
  color:var(--ui-yellow) !important;
  border-color:#f2e6ad !important;
}

.tk-shell main .issue-chip.no-rx{
  background:#f1f3f6 !important;
  color:#66758a !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:860px){

  html{
    font-size:16px;
  }

  .tk-topbar{
    min-height:64px;
    padding:9px 14px !important;
  }

  .tk-shell main{
    padding:
      22px
      14px
      54px !important;
  }

  .tk-page-head h1,
  .page-head h1{
    font-size:31px !important;
  }

  .tk-page-head p,
  .page-head p{
    font-size:13px !important;
  }

  .tk-live-strip{
    overflow-x:auto;

    padding:
      0
      12px
      8px !important;

    scroll-snap-type:x proximity;

    scrollbar-width:none;
  }

  .tk-live-strip::-webkit-scrollbar{
    display:none;
  }

  .tk-live-strip > div{
    min-width:210px;
    min-height:68px;

    scroll-snap-align:start;
  }

  .tk-kpi-card{
    min-height:112px !important;
    padding:15px !important;
  }

  .tk-kpi-card span{
    font-size:13px !important;
  }

  .tk-kpi-card b{
    font-size:30px !important;
  }

  .tk-shell main .onu-kpi small{
    font-size:12px !important;
  }

  .tk-shell main .onu-kpi b{
    font-size:26px !important;
  }

  .tk-shell main .olt-title strong{
    font-size:15px !important;
  }

  .tk-shell main .olt-sub{
    font-size:11px !important;
  }

}


/* PHONE */

@media(max-width:520px){

  .tk-shell main{
    padding:
      18px
      11px
      48px !important;
  }

  .tk-page-head h1,
  .page-head h1{
    font-size:28px !important;
  }

  .tk-kpi-grid{
    gap:8px !important;
  }

  .tk-kpi-card{
    min-height:105px !important;
  }

  .tk-shell main th{
    font-size:10px !important;
  }

  .tk-shell main td{
    font-size:12px !important;
  }

}


/* =========================================================
   TELEKABEL 4.0 NOC · UI V3.1 POLISH
   ========================================================= */


/* ---------------------------------------------------------
   STRONGER READABILITY
   --------------------------------------------------------- */

:root{
  --ui-muted:#586a80;
  --ui-muted-2:#75859a;
}

.tk-shell main{
  font-size:14px;
}

.tk-shell main .muted{
  color:#5f7187 !important;
}

.tk-shell main p,
.tk-shell main small{
  text-rendering:optimizeLegibility;
}


/* ---------------------------------------------------------
   TOP LIVE MONITORING STRIP
   less heavy than the previous dark blocks
   --------------------------------------------------------- */

.tk-live-strip{
  gap:10px !important;
  padding:0 22px 12px !important;
  background:#fff !important;
}

.tk-live-strip > div{
  min-height:66px !important;

  padding:10px 13px !important;

  border:1px solid #d8e1ea !important;
  border-top:3px solid #41b883 !important;

  border-radius:11px !important;

  background:#f7fafc !important;

  box-shadow:
    0 2px 8px rgba(15,23,42,.025) !important;
}

.tk-live-strip span{
  color:#61748a !important;
  font-size:10px !important;
  font-weight:800 !important;
}

.tk-live-strip b{
  color:#172033 !important;

  margin-top:3px !important;

  font-size:13px !important;
  font-weight:760 !important;
}

.tk-live-strip small{
  color:#71849a !important;

  margin-top:3px !important;

  font-size:10px !important;
}

.tk-live-strip > div:nth-child(3){
  border-top-color:#4aa7ff !important;
}


/* ---------------------------------------------------------
   GLOBAL KPI CARDS
   more compact / better text wrapping
   --------------------------------------------------------- */

.tk-kpi-grid{
  gap:11px !important;
}

.tk-kpi-card{
  min-height:112px !important;

  padding:16px !important;

  gap:12px !important;

  align-items:center !important;
}

.tk-kpi-icon{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;

  font-size:18px !important;
}

.tk-kpi-card > div:last-child{
  min-width:0 !important;
}

.tk-kpi-card span{
  display:block;

  color:#344154 !important;

  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:750 !important;

  white-space:normal !important;
}

.tk-kpi-card b{
  margin:4px 0 3px !important;

  font-size:32px !important;
}

.tk-kpi-card small{
  color:#687b90 !important;

  font-size:10.5px !important;
  line-height:1.3 !important;
}


/* ---------------------------------------------------------
   PAGE HEADINGS
   --------------------------------------------------------- */

.tk-page-head,
.page-head{
  margin-bottom:22px !important;
}

.tk-page-head h1,
.page-head h1{
  margin-bottom:7px !important;
}

.tk-page-head p,
.page-head p{
  color:#5d7086 !important;
}


/* ---------------------------------------------------------
   SECTION HEADERS
   --------------------------------------------------------- */

.tk-section-head,
.tk-subsection-head,
.panel-head{
  margin-bottom:16px !important;
}

.tk-section-head h2,
.tk-subsection-head h2,
.panel-head h2{
  color:#172033 !important;

  font-size:19px !important;
  font-weight:760 !important;
}

.tk-section-head p,
.tk-subsection-head p,
.panel-head p{
  color:#607389 !important;

  font-size:12.5px !important;
}


/* ---------------------------------------------------------
   INCIDENT / PROBLEM CARDS
   --------------------------------------------------------- */

.tk-issue-card,
.v5-human-card,
.problem-item{
  border-color:#dce3ec !important;

  background:#fff !important;

  box-shadow:
    0 2px 8px rgba(15,23,42,.025) !important;
}

.tk-issue-card:hover,
.v5-human-card:hover,
.problem-item:hover{
  background:#fafcff !important;
  border-color:#c6d3e0 !important;
}

.tk-issue-card h3,
.v5-human-card h4,
.problem-copy b{
  color:#182337 !important;

  font-size:15px !important;
}

.tk-issue-card p,
.v5-human-card p,
.problem-copy p{
  color:#53677e !important;

  font-size:12px !important;
  line-height:1.5 !important;
}

.tk-issue-card small,
.v5-human-card small,
.problem-copy small{
  color:#718398 !important;

  font-size:10.5px !important;
}


/* right-side incident information */

.tk-issue-side,
.tk-issue-side time,
.v533-card-time,
.v533-card-time time{
  color:#53677e !important;

  font-size:10.5px !important;
}

.tk-issue-side b,
.v533-card-time b{
  color:#26364a !important;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.tk-shell main button,
.tk-shell main .button,
.tk-shell main .v51-btn{
  min-height:36px;

  border-radius:9px !important;

  font-size:12px !important;
  font-weight:700 !important;
}


/* ---------------------------------------------------------
   TABLE READABILITY
   --------------------------------------------------------- */

.tk-shell main th{
  color:#52667c !important;

  font-size:10.5px !important;
}

.tk-shell main td{
  color:#25354a !important;

  font-size:13px !important;
}

.tk-shell main td small{
  color:#66798f !important;
}


/* ---------------------------------------------------------
   ONU KPI POLISH
   --------------------------------------------------------- */

.tk-shell main .onu-kpi{
  min-height:98px !important;

  padding:13px 14px !important;
}

.tk-shell main .onu-kpi small{
  color:#5b6e84 !important;

  font-size:12px !important;
  font-weight:700 !important;
}

.tk-shell main .onu-kpi b{
  margin-top:4px !important;

  font-size:29px !important;
}

.tk-shell main .onu-kpi span{
  color:#718398 !important;

  font-size:10px !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:860px){

  .tk-live-strip{
    padding:0 12px 9px !important;
  }

  .tk-live-strip > div{
    min-width:195px !important;
    min-height:64px !important;
  }

  .tk-kpi-card{
    min-height:105px !important;
    padding:14px !important;
  }

  .tk-kpi-card span{
    font-size:12px !important;
  }

  .tk-kpi-card b{
    font-size:29px !important;
  }

}


@media(max-width:520px){

  .tk-live-strip > div{
    min-width:180px !important;
  }

  .tk-kpi-card{
    min-height:98px !important;
  }

  .tk-kpi-card b{
    font-size:27px !important;
  }

}


/* =========================================================
   NETWORK DEVICES · KPI CARDS
   ========================================================= */

.device-kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 0 18px !important;
}

.device-kpi{
  position:relative;

  min-height:112px !important;
  padding:16px 18px !important;

  overflow:hidden;

  background:#fff !important;

  border:1px solid var(--ui-line) !important;
  border-top:4px solid var(--ui-blue) !important;
  border-radius:14px !important;

  box-shadow:
    0 4px 14px rgba(15,23,42,.035) !important;

  color:var(--ui-text) !important;
}

.device-kpi.problem{
  border-top-color:var(--ui-orange) !important;
}

.device-kpi.critical{
  border-top-color:var(--ui-red) !important;
}

.device-kpi.warning{
  border-top-color:#d3a300 !important;
}

.device-kpi span{
  display:block;

  color:#52657b !important;

  font-size:12px !important;
  font-weight:750 !important;
}

.device-kpi b{
  display:block;

  margin:7px 0 5px !important;

  color:#172033 !important;

  font-size:34px !important;
  line-height:1 !important;
  font-weight:800 !important;

  font-variant-numeric:tabular-nums;
}

.device-kpi small{
  display:block;

  color:#718398 !important;

  font-size:10.5px !important;
  line-height:1.3 !important;
}


/* subtle status tint */

.device-kpi.problem{
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fffaf6 100%
    ) !important;
}

.device-kpi.critical{
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fff8f9 100%
    ) !important;
}

.device-kpi.warning{
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fffcf2 100%
    ) !important;
}


/* responsive */

@media(max-width:900px){

  .device-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

}

@media(max-width:520px){

  .device-kpi-grid{
    gap:8px !important;
  }

  .device-kpi{
    min-height:96px !important;
    padding:13px 14px !important;
  }

  .device-kpi b{
    font-size:29px !important;
  }

  .device-kpi span{
    font-size:11px !important;
  }

}


/* =========================================================
   ONU KPI · CLICKABLE FILTER CARDS
   ========================================================= */

a.onu-kpi{
  cursor:pointer !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease !important;
}

a.onu-kpi:hover{
  transform:translateY(-3px) !important;

  border-color:#9bb8da !important;

  box-shadow:
    0 10px 24px rgba(15,23,42,.09) !important;
}

a.onu-kpi:active{
  transform:translateY(-1px) !important;
}

a.onu-kpi span{
  display:block !important;
  margin-top:10px !important;

  color:#2f6fed !important;

  font-size:11px !important;
  font-weight:750 !important;

  opacity:.9;
}

a.onu-kpi:hover span{
  opacity:1;
}


/* Active filter card */

a.onu-kpi.is-active{
  border-color:#6e9eea !important;

  box-shadow:
    0 0 0 2px rgba(47,111,237,.10),
    0 8px 20px rgba(15,23,42,.07) !important;
}


/* Mobile */

@media(max-width:720px){

  a.onu-kpi:hover{
    transform:none !important;
  }

}