/* ========================================
   DASHBOARD MT BAC
   REGIONAL SUMBAR
======================================== */


/* ========================================
   ROOT
======================================== */

:root {

  --blue:
    #2563eb;

  --blue-dark:
    #1d4ed8;

  --blue-light:
    #eff6ff;

  --green:
    #16a34a;

  --green-light:
    #f0fdf4;

  --red:
    #dc2626;

  --yellow:
    #d97706;

  --text:
    #172033;

  --muted:
    #64748b;

  --border:
    #e5e7eb;

  --background:
    #f5f7fb;

  --white:
    #ffffff;

  --sidebar:
    #111827;

}


/* ========================================
   RESET
======================================== */

* {
  box-sizing: border-box;
}


html {
  margin: 0;
  padding: 0;
}


body {

  margin: 0;

  padding: 0;

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

  background:
    var(--background);

  color:
    var(--text);

}


button,
select {
  font-family: inherit;
}


button {
  cursor: pointer;
}


/* ========================================
   APP
======================================== */

.app {

  min-height:
    100vh;

  display:
    flex;

}


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

.sidebar {

  width:
    240px;

  min-width:
    240px;

  min-height:
    100vh;

  background:
    var(--sidebar);

  color:
    white;

  display:
    flex;

  flex-direction:
    column;

  padding:
    22px 16px;

}


.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    4px 8px 28px;

}


.brand-logo {

  width:
    40px;

  height:
    40px;

  border-radius:
    11px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    white;

  color:
    var(--blue);

  font-size:
    12px;

  font-weight:
    900;

}


.brand-title {

  font-size:
    14px;

  font-weight:
    800;

}


.brand-subtitle {

  margin-top:
    2px;

  color:
    #94a3b8;

  font-size:
    10px;

}


.navigation {

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

}


.nav-item {

  width:
    100%;

  border:
    0;

  border-radius:
    9px;

  padding:
    11px 12px;

  background:
    transparent;

  color:
    #94a3b8;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  text-align:
    left;

  font-size:
    11px;

  font-weight:
    650;

  transition:
    0.2s ease;

}


.nav-item:hover {

  background:
    rgba(255,255,255,0.06);

  color:
    white;

}


.nav-item.active {

  background:
    rgba(37,99,235,0.18);

  color:
    white;

}


.sidebar-footer {

  margin-top:
    auto;

  padding:
    16px 8px 4px;

}


.footer-label {

  color:
    #64748b;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    1px;

}


.footer-status {

  margin-top:
    8px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    #94a3b8;

  font-size:
    10px;

}


.status-dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #22c55e;

}


/* ========================================
   MAIN
======================================== */

.main-content {

  flex:
    1;

  min-width:
    0;

  padding:
    28px 32px 40px;

}


/* ========================================
   TOPBAR
======================================== */

.topbar {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    20px;

  margin-bottom:
    24px;

}


.eyebrow {

  color:
    var(--blue);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    1.2px;

}


.topbar h1 {

  margin:
    5px 0 5px;

  font-size:
    25px;

  line-height:
    1.15;

  letter-spacing:
    -0.5px;

}


.topbar p {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    11px;

}


.last-update {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px 12px;

  background:
    white;

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

  border-radius:
    10px;

}


.update-dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #22c55e;

}


.update-label {

  color:
    #94a3b8;

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    0.8px;

}


#lastUpdated {

  margin-top:
    2px;

  font-size:
    9px;

  font-weight:
    700;

}


/* ========================================
   FILTER
======================================== */

.filter-panel {

  background:
    white;

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

  border-radius:
    14px;

  padding:
    18px;

  margin-bottom:
    18px;

}


.filter-heading {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    15px;

}


.filter-heading h2 {

  margin:
    0 0 4px;

  font-size:
    14px;

}


.filter-heading p {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    10px;

}


.filter-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    12px;

}


.filter-group {

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

}


.filter-group label {

  color:
    var(--muted);

  font-size:
    9px;

  font-weight:
    750;

}


.filter-group select {

  width:
    100%;

  height:
    38px;

  padding:
    0 11px;

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

  border-radius:
    8px;

  background:
    white;

  color:
    var(--text);

  font-size:
    10px;

  outline:
    none;

}


.filter-group select:focus {

  border-color:
    var(--blue);

  box-shadow:
    0 0 0 3px
    rgba(37,99,235,0.08);

}


.reset-button {

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

  background:
    white;

  color:
    var(--muted);

  border-radius:
    8px;

  padding:
    8px 12px;

  font-size:
    9px;

  font-weight:
    750;

}


.reset-button:hover {

  border-color:
    var(--blue);

  color:
    var(--blue);

}


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

.kpi-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    12px;

  margin-bottom:
    18px;

}


.kpi-card {

  background:
    white;

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

  border-radius:
    13px;

  padding:
    16px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

}


.kpi-icon {

  width:
    37px;

  height:
    37px;

  border-radius:
    10px;

  background:
    var(--blue-light);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    16px;

}


.kpi-card.success
.kpi-icon {

  background:
    var(--green-light);

}


.kpi-label {

  color:
    var(--muted);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.5px;

}


.kpi-value {

  margin-top:
    3px;

  font-size:
    22px;

  font-weight:
    850;

}


/* ========================================
   DASHBOARD GRID
======================================== */

.dashboard-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    18px;

}


.dashboard-card {

  min-width:
    0;

  background:
    white;

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

  border-radius:
    14px;

  padding:
    18px;

}


.card-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    16px;

}


.card-eyebrow {

  color:
    var(--blue);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    1px;

}


.card-header h2 {

  margin:
    4px 0 0;

  font-size:
    15px;

}


.card-badge {

  padding:
    5px 8px;

  border-radius:
    6px;

  background:
    var(--blue-light);

  color:
    var(--blue);

  font-size:
    8px;

  font-weight:
    800;

}


/* ========================================
   RANKING
======================================== */

.ranking-list {

  display:
    flex;

  flex-direction:
    column;

}


.ranking-item {

  display:
    grid;

  grid-template-columns:
    30px 1fr auto;

  align-items:
    center;

  gap:
    10px;

  padding:
    11px 0;

  border-bottom:
    1px solid #f1f5f9;

}


.ranking-item:last-child {

  border-bottom:
    0;

}


.rank-number {

  width:
    27px;

  height:
    27px;

  border-radius:
    8px;

  background:
    #f1f5f9;

  color:
    var(--muted);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    9px;

  font-weight:
    850;

}


.rank-number.top {

  background:
    var(--blue-light);

  color:
    var(--blue);

}


.rank-name {

  font-size:
    10px;

  font-weight:
    750;

}


.rank-session {

  margin-top:
    2px;

  color:
    var(--muted);

  font-size:
    8px;

}


.rank-percent {

  font-size:
    10px;

  font-weight:
    800;

  color:
    var(--blue);

}


/* ========================================
   BRANCH
======================================== */

.branch-item {

  padding:
    10px 0;

  border-bottom:
    1px solid #f1f5f9;

}


.branch-item:last-child {

  border-bottom:
    0;

}


.branch-top {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

}


.branch-name {

  font-size:
    10px;

  font-weight:
    750;

}


.branch-percent {

  color:
    var(--blue);

  font-size:
    10px;

  font-weight:
    800;

}


.progress-track {

  height:
    6px;

  margin:
    7px 0 5px;

  overflow:
    hidden;

  background:
    #eef2f7;

  border-radius:
    999px;

}


.progress-bar {

  height:
    100%;

  background:
    var(--blue);

  border-radius:
    inherit;

}


.branch-meta {

  color:
    var(--muted);

  font-size:
    8px;

}


/* ========================================
   TABLE
======================================== */

.table-wrapper {

  width:
    100%;

  overflow-x:
    auto;

}


.monitor-table {

  width:
    100%;

  min-width:
    900px;

  border-collapse:
    collapse;

}


.monitor-table th {

  padding:
    11px 12px;

  background:
    #f8fafc;

  color:
    var(--muted);

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

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.4px;

  text-align:
    left;

  white-space:
    nowrap;

}


.monitor-table td {

  padding:
    12px;

  border-bottom:
    1px solid #f1f5f9;

  color:
    var(--text);

  font-size:
    9px;

  vertical-align:
    middle;

}


.monitor-table tbody tr:hover {

  background:
    #fafcff;

}


.monitor-table tbody tr:last-child td {

  border-bottom:
    0;

}


.table-rank {

  width:
    27px;

  height:
    27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(--blue-light);

  color:
    var(--blue);

  font-size:
    9px;

  font-weight:
    850;

}


.teacher-name {

  color:
    var(--text);

  font-size:
    9px;

  font-weight:
    750;

}


.teacher-link {

  padding:
    0;

  border:
    0;

  background:
    transparent;

  text-align:
    left;

}


.teacher-link:hover {

  color:
    var(--blue);

  text-decoration:
    underline;

}


.number-good {

  color:
    var(--green);

  font-weight:
    800;

}


.number-danger {

  color:
    var(--red);

  font-weight:
    800;

}


.percentage-badge {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    5px 8px;

  border-radius:
    7px;

  font-size:
    8px;

  font-weight:
    850;

  white-space:
    nowrap;

}


.status-good {

  background:
    var(--green-light);

  color:
    var(--green);

}


.status-warning {

  background:
    #fffbeb;

  color:
    var(--yellow);

}


.status-danger {

  background:
    #fef2f2;

  color:
    var(--red);

}


.session-badge {

  display:
    inline-flex;

  padding:
    5px 8px;

  border-radius:
    6px;

  background:
    var(--blue-light);

  color:
    var(--blue);

  font-size:
    8px;

  font-weight:
    750;

  white-space:
    nowrap;

}


.missing-admin {

  max-width:
    280px;

  color:
    var(--red) !important;

  font-size:
    8px !important;

  line-height:
    1.45;

}


/* ========================================
   EMPTY STATE
======================================== */

.empty-state {

  padding:
    24px;

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    10px;

}


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

.page-hidden {

  display:
    none;

}


/* ========================================
   TEACHER MODAL
======================================== */

.teacher-modal {

  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;

  background:
    rgba(15,23,42,0.58);

  backdrop-filter:
    blur(4px);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;

}


.teacher-modal.show {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

}


.teacher-modal-content {

  width:
    min(1100px, 100%);

  max-height:
    90vh;

  overflow:
    hidden;

  background:
    white;

  border-radius:
    16px;

  box-shadow:
    0 25px 70px
    rgba(15,23,42,0.25);

  display:
    flex;

  flex-direction:
    column;

}


.teacher-modal-header {

  padding:
    20px 22px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

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

}


.teacher-modal-header h2 {

  margin:
    5px 0 4px;

  font-size:
    20px;

  letter-spacing:
    -0.3px;

}


.teacher-modal-subtitle {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    9px;

}


.modal-close {

  width:
    32px;

  height:
    32px;

  flex:
    0 0 auto;

  border:
    0;

  border-radius:
    8px;

  background:
    #f1f5f9;

  color:
    var(--muted);

  font-size:
    22px;

  line-height:
    1;

}


.modal-close:hover {

  background:
    #e2e8f0;

  color:
    var(--text);

}


/* ========================================
   TEACHER DETAIL SUMMARY
======================================== */

.teacher-detail-summary {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    10px;

  padding:
    14px 22px;

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

  background:
    #fafcff;

}


.detail-stat {

  padding:
    12px;

  background:
    white;

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

  border-radius:
    10px;

}


.detail-stat-label {

  color:
    var(--muted);

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    0.6px;

}


.detail-stat-value {

  margin-top:
    4px;

  font-size:
    18px;

  font-weight:
    850;

}


.detail-good {

  color:
    var(--green);

}


.detail-danger {

  color:
    var(--red);

}


/* ========================================
   TEACHER DETAIL TABLE
======================================== */

.teacher-detail-table-wrapper {

  flex:
    1;

  min-height:
    0;

  overflow:
    auto;

  padding:
    0 22px;

}


.teacher-detail-table {

  min-width:
    850px;

}


.teacher-detail-table th {

  position:
    sticky;

  top:
    0;

  z-index:
    2;

}


.teacher-modal-footer {

  padding:
    12px 22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  border-top:
    1px solid var(--border);

  color:
    var(--muted);

  font-size:
    8px;

}


/* ========================================
   BODY MODAL
======================================== */

body.modal-open {

  overflow:
    hidden;

}


/* ========================================
   RESPONSIVE
======================================== */

@media (
  max-width: 1050px
) {

  .filter-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .kpi-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

}


@media (
  max-width: 850px
) {

  .sidebar {

    width:
      190px;

    min-width:
      190px;

  }


  .main-content {

    padding:
      22px;

  }


  .dashboard-grid {

    grid-template-columns:
      1fr;

  }

}


@media (
  max-width: 650px
) {

  .app {

    display:
      block;

  }


  .sidebar {

    width:
      100%;

    min-width:
      0;

    min-height:
      auto;

    padding:
      12px;

  }


  .brand {

    padding:
      2px 4px 12px;

  }


  .navigation {

    flex-direction:
      row;

    overflow-x:
      auto;

  }


  .nav-item {

    width:
      auto;

    min-width:
      max-content;

  }


  .sidebar-footer {

    display:
      none;

  }


  .main-content {

    padding:
      16px;

  }


  .topbar {

    flex-direction:
      column;

  }


  .last-update {

    width:
      100%;

  }


  .filter-grid {

    grid-template-columns:
      1fr;

  }


  .filter-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .kpi-grid {

    grid-template-columns:
      1fr;

  }


  .teacher-modal {

    padding:
      10px;

  }


  .teacher-modal-content {

    max-height:
      94vh;

    border-radius:
      12px;

  }


  .teacher-modal-header {

    padding:
      16px;

  }


  .teacher-detail-summary {

    grid-template-columns:
      repeat(2, 1fr);

    padding:
      12px 16px;

  }


  .teacher-detail-table-wrapper {

    padding:
      0 16px;

  }


  .teacher-modal-footer {

    padding:
      10px 16px;

  }

}
.refresh-button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  color: var(--blue);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.refresh-button:hover {
  background: var(--blue-light);
}

.refresh-button.refreshing {
  animation: refreshSpin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes refreshSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}