/* v4.9 reference-style Customer / Finance / Help / Bill / MikroTik dashboard. */
.dashboard-tabs{display:flex;gap:6px;margin-bottom:8px;border-bottom:1px solid var(--line);overflow-x:auto}.dashboard-tab{flex:0 0 auto;min-width:98px;height:42px;padding:0 18px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;background:#f0f2f1;color:#283936;font-size:12px}.dashboard-tab:hover{background:#fff;color:#005aff}.dashboard-tab.active{border-color:var(--line);background:#fff;color:#005aff}.dashboard-load-state{padding:12px 16px;border:1px solid #d4e4ff;border-radius:10px;background:#edf5ff;color:#2a5e99;font-size:11px}.dashboard-load-state[hidden]{display:none}.dashboard-load-state.error{border-color:#efc2bc;background:#fff1ef;color:#9b4038}.dashboard-pane{padding-top:16px}.dashboard-pane[hidden]{display:none}.reference-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.customer-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.customer-metrics .reference-metric:nth-child(5){grid-column:span 1}.reference-metric{position:relative;min-height:105px;padding:20px 65px 18px 20px;border:1px solid #ebeff1;border-radius:8px;background:#fff;box-shadow:0 8px 20px rgba(35,53,68,.035)}.reference-metric>span{display:block;color:#35345d;font-size:11px;font-weight:600}.reference-metric>strong{display:block;margin-top:8px;color:#272855;font-size:21px;font-weight:500;font-variant-numeric:tabular-nums}.reference-metric>strong.teal,.teal{color:#27c6ad!important}.reference-metric>strong.red,.red{color:#ec1648!important}.reference-metric>strong.orange,.orange{color:#e56d00!important}.reference-metric>small{display:block;margin-top:4px;color:#687399;font-size:10px}.reference-metric>i{position:absolute;top:40px;right:28px;display:grid;place-items:center;width:40px;height:40px;border-radius:7px;background:#dff7f4;color:#21bca5;font-style:normal;font-weight:800}.reference-metric>i.alert{background:#fff0f1;color:#ef214d}.reference-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(310px,.72fr);gap:22px;margin-top:30px}.analytics-card{border:1px solid #ebeff1;border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(37,53,68,.04);overflow:hidden}.analytics-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:23px 24px}.analytics-card-head h2,.analytics-card-head p{margin:0}.analytics-card-head h2{color:#28294f;font-size:17px}.analytics-card-head p{margin-top:6px;color:#7d83a7;font-size:11px}.analytics-highlights{display:flex;gap:8px}.analytics-highlights span{min-width:125px;padding:10px 15px;border-radius:5px;background:#eef6ff;color:#7580a5;font-size:10px}.analytics-highlights span:nth-child(2){background:#f2efff}.analytics-highlights strong{display:block;margin-top:4px;color:#24bea6;font-size:15px}.analytics-highlights span:nth-child(2) strong{color:#6c2ae8}.chart-card{min-height:490px}.chart-badge-row{display:flex;gap:9px;padding:0 24px}.chart-badge-row span{padding:7px 15px;border-radius:999px;background:#eaf7ff;color:#1489b7;font-size:9px}.chart-badge-row span:nth-child(2){background:#edffd1;color:#5d9b12}.dashboard-line-chart{display:block;width:100%;height:auto;min-height:300px;padding:6px 12px 12px;overflow:visible}.chart-grid-line{stroke:#e9edf3;stroke-width:1;stroke-dasharray:4 4}.chart-axis-label{fill:#8390aa;font-size:10px}.chart-legend-label{fill:#58647d;font-size:10px}.chart-series{filter:drop-shadow(0 3px 3px rgba(40,102,232,.08))}.dashboard-donut{position:relative;width:235px;aspect-ratio:1;margin:12px auto 20px;border-radius:50%;background:#edf1ef}.dashboard-donut:after{content:"";position:absolute;inset:29px;border-radius:50%;background:#fff}.dashboard-donut span{position:absolute;z-index:1;inset:48px;border-radius:50%;background:#fff}.donut-card{min-height:490px;padding-bottom:22px}.donut-legend{margin:0 24px}.donut-legend-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:5px;background:#f7f9fb;color:#4f5875;font-size:10px}.donut-legend-row+.donut-legend-row{margin-top:5px}.donut-legend-row span{display:flex;align-items:center;gap:8px}.donut-legend-row i{width:11px;height:11px;border-radius:50%}.donut-total{width:min(220px,calc(100% - 48px));margin:18px auto 0;padding:14px;background:#f7f9fb;text-align:center}.donut-total span,.dashboard-side-stat span{display:block;color:#7d83a7;font-size:10px}.donut-total strong{display:block;margin-top:4px;color:#28294f;font-size:19px}.dashboard-side-stat{margin:18px 24px 0;padding:15px;background:#f7f9fb}.dashboard-side-stat strong{display:block;margin-top:5px;color:#28294f;font-size:16px}.dashboard-side-stat.due{background:#fff7ed}.dashboard-side-stat small{display:block;margin-top:4px;color:#7d83a7}.dashboard-pane-heading{padding:10px 24px 0}.dashboard-period{display:grid;gap:8px;width:270px}.dashboard-period select,.mikrotik-dashboard-head select{width:100%;height:40px;padding:0 12px;border:1px solid #e3e7ee;border-radius:6px;background:#fff;color:#202647;outline:none}.analytics-summary-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:22px 24px 0}.analytics-summary-row>span{min-height:82px;padding:16px;background:#eef6ff;color:#7a82a5;font-size:10px}.analytics-summary-row>span:nth-child(2){background:#fff1f3}.analytics-summary-row>span:nth-child(3){background:#efffd0}.analytics-summary-row strong{display:block;margin-top:6px;color:#344000;font-size:18px}.status-metrics,.bill-metrics{margin-top:20px}.status-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.bill-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.reference-metric.compact{min-height:110px}.mikrotik-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;padding:24px 20px}.mikrotik-dashboard-head label{display:grid;gap:8px;width:min(520px,100%);color:#444568;font-size:11px}.mikrotik-dashboard-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px}.mikrotik-menu{display:flex;flex-direction:column;min-height:410px;padding:20px;border:1px solid #ebeff1;border-radius:10px;background:#fff}.mikrotik-menu>*{padding:8px 12px;color:#47506e;font-size:11px}.mikrotik-menu strong{border-radius:5px;background:#3ac7b2;color:#fff}.mikrotik-health{min-height:410px}.router-health-empty{display:grid;place-items:center;align-content:center;height:100%;min-height:410px;padding:40px;text-align:center}.router-health-empty>span{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:#e7f8f1;color:var(--green);font-size:29px}.router-health-empty h2{margin:18px 0 6px;color:#28294f}.router-health-empty p{max-width:540px;margin:0;color:#7d83a7;font-size:11px;line-height:1.6}.router-health-header{display:flex;justify-content:space-between;gap:20px;padding:25px;border-bottom:1px solid #edf0f2}.router-health-header small{color:#1cb599;font-size:9px;font-weight:800;letter-spacing:.1em}.router-health-header h2{margin:7px 0 3px;color:#28294f}.router-health-header p{margin:0;color:#7d83a7;font-size:10px}.router-health-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:22px}.router-health-metrics article{min-height:95px;padding:15px;border:1px solid #ebeff1;border-radius:8px}.router-health-metrics span,.router-health-metrics strong{display:block}.router-health-metrics span{color:#8b93aa;font-size:9px;text-transform:uppercase}.router-health-metrics strong{margin-top:8px;color:#313352;font-size:12px;overflow-wrap:anywhere}.router-health-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 22px}.router-health-stage{display:grid;grid-template-columns:24px minmax(90px,.45fr) minmax(0,1fr);gap:8px;align-items:center;padding:12px;border:1px solid #e8edf0;border-radius:8px;font-size:9px}.router-health-stage i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#edf1ef;font-style:normal}.router-health-stage.success i{background:#dff7ec;color:#158957}.router-health-stage.failed i{background:#fff0f0;color:#d52c42}.router-health-stage span{color:#77819a;overflow-wrap:anywhere}.router-health-summary{margin:18px 22px 22px;padding:12px 14px;border-radius:8px;background:#f5f8f7;color:#586a64;font-size:10px;line-height:1.5}
@media(max-width:1280px){.customer-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.reference-dashboard-grid{grid-template-columns:minmax(0,1.55fr) minmax(290px,.7fr)}.router-health-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.reference-dashboard-grid{grid-template-columns:1fr}.customer-metrics,.bill-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-pane-heading{align-items:flex-start;flex-direction:column}.dashboard-period{width:100%;grid-template-columns:1fr 1fr}.mikrotik-dashboard-layout{grid-template-columns:1fr}.mikrotik-menu{min-height:auto;flex-direction:row;overflow-x:auto}.router-health-stages{grid-template-columns:1fr}}
@media(max-width:620px){.reference-metric-grid,.customer-metrics,.status-metrics,.bill-metrics{grid-template-columns:1fr 1fr}.reference-metric{min-height:94px;padding:15px 48px 14px 15px}.reference-metric>i{top:34px;right:14px;width:34px;height:34px}.analytics-card-head,.analytics-summary-row{padding-inline:15px}.analytics-highlights{display:none}.analytics-summary-row{grid-template-columns:1fr}.chart-card{min-height:0}.dashboard-line-chart{min-height:240px}.dashboard-donut{width:205px}.mikrotik-dashboard-head{align-items:stretch;flex-direction:column}.mikrotik-dashboard-layout{gap:12px}.router-health-metrics{grid-template-columns:1fr}.router-health-stage{grid-template-columns:24px 1fr}.router-health-stage span{grid-column:2}}


/* RMCJJ_MIKROTIK_DASHBOARD_MENU_V1 */

.mikrotik-menu-item {
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #47506e;
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.mikrotik-menu-item:hover {
  background: #eef7f4;
  color: #178b77;
}

.mikrotik-menu-item.active {
  background: #3ac7b2;
  color: #fff;
  font-weight: 700;
}

.router-dashboard-state {
  display: grid;
  min-height: 410px;
  place-items: center;
  align-content: center;
  padding: 40px;
  text-align: center;
}

.router-dashboard-state-icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 18px;
  background: #e7f8f1;
  color: #178b77;
  font-size: 28px;
}

.router-dashboard-state h2 {
  margin: 18px 0 6px;
}

.router-dashboard-state p {
  max-width: 560px;
  margin: 0;
  color: #7d83a7;
  font-size: 11px;
}

.router-dashboard-state.error
.router-dashboard-state-icon {
  background: #fff0f0;
  color: #d52c42;
}

.router-dashboard-count {
  align-self: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef7f4;
  color: #178b77;
  font-size: 10px;
  font-weight: 700;
}

.router-dashboard-table-wrap {
  max-height: 520px;
  overflow: auto;
  padding: 0 22px 22px;
}

.router-dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.router-dashboard-table th,
.router-dashboard-table td {
  padding: 10px 9px;
  border-bottom: 1px solid #edf0f2;
  text-align: left;
  vertical-align: top;
}

.router-dashboard-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: #fff;
  color: #7d83a7;
}

.router-dashboard-table td {
  color: #343a55;
  overflow-wrap: anywhere;
}

.router-dashboard-note {
  margin: -8px 22px 20px;
  color: #7d83a7;
  font-size: 9px;
}

.router-dashboard-empty {
  padding: 60px 24px;
  color: #7d83a7;
  text-align: center;
}

.router-dashboard-test-result {
  margin: 16px 22px 0;
  padding: 10px 12px;
  border: 1px solid #bde8da;
  border-radius: 7px;
  background: #eaf8f3;
  color: #16775f;
  font-size: 10px;
}


/* ==========================================================
   Night mode for the reference-style dashboard
   ========================================================== */

html[data-theme="dark"] .dashboard-tab {
  border-color: #23483a;
  background: #0e211a;
  color: #b9cec5;
}

html[data-theme="dark"] .dashboard-tab:hover,
html[data-theme="dark"] .dashboard-tab.active {
  border-color: #31634f;
  background: #14352a;
  color: #fff;
}

html[data-theme="dark"] .dashboard-load-state {
  border-color: #285441;
  background: #102b21;
  color: #a8cfc0;
}

html[data-theme="dark"] .reference-metric,
html[data-theme="dark"] .analytics-card,
html[data-theme="dark"] .mikrotik-menu {
  border-color: #244a3b;
  background: #0e211a;
  box-shadow: none;
}

html[data-theme="dark"]
.reference-metric > span,
html[data-theme="dark"]
.reference-metric > small,
html[data-theme="dark"]
.analytics-card-head p,
html[data-theme="dark"]
.router-health-header p,
html[data-theme="dark"]
.router-dashboard-state p,
html[data-theme="dark"]
.router-dashboard-note,
html[data-theme="dark"]
.router-dashboard-empty {
  color: #8fb0a3;
}

html[data-theme="dark"]
.reference-metric > strong,
html[data-theme="dark"]
.analytics-card-head h2,
html[data-theme="dark"]
.router-health-header h2,
html[data-theme="dark"]
.router-dashboard-state h2 {
  color: #f3faf7;
}

html[data-theme="dark"]
.mikrotik-dashboard-head label {
  color: #c5d9d1;
}

html[data-theme="dark"]
.dashboard-period select,
html[data-theme="dark"]
.mikrotik-dashboard-head select {
  border-color: #28503f;
  background: #0a1b15;
  color: #eef8f4;
}

html[data-theme="dark"]
.mikrotik-menu-item {
  color: #bad0c7;
}

html[data-theme="dark"]
.mikrotik-menu-item:hover {
  background: #163a2d;
  color: #60d6bc;
}

html[data-theme="dark"]
.mikrotik-menu-item.active {
  background: #15986f;
  color: #fff;
}

html[data-theme="dark"]
.router-health-header {
  border-bottom-color: #244a3b;
}

html[data-theme="dark"]
.router-dashboard-table th {
  background: #0e211a;
  color: #88aa9d;
}

html[data-theme="dark"]
.router-dashboard-table td {
  color: #dcebe5;
}

html[data-theme="dark"]
.router-dashboard-table th,
html[data-theme="dark"]
.router-dashboard-table td {
  border-bottom-color: #203f33;
}

html[data-theme="dark"]
.router-dashboard-count {
  background: #153a2d;
  color: #66d9bd;
}

html[data-theme="dark"]
.router-dashboard-state-icon {
  background: #153a2d;
  color: #62d6b9;
}

html[data-theme="dark"]
.router-dashboard-test-result {
  border-color: #28664e;
  background: #123427;
  color: #8ce2ca;
}

html[data-theme="dark"]
.analytics-summary-row > span,
html[data-theme="dark"]
.donut-legend-row,
html[data-theme="dark"]
.donut-total,
html[data-theme="dark"]
.dashboard-side-stat,
html[data-theme="dark"]
.router-health-summary {
  background: #112920;
  color: #9ab8ad;
}

html[data-theme="dark"]
.dashboard-donut,
html[data-theme="dark"]
.dashboard-donut::after,
html[data-theme="dark"]
.dashboard-donut span {
  background-color: #10261e;
}