:root{
  --pm-bg:#071022;
  --pm-surface:#0f1a34;
  --pm-surface-soft:#182549;
  --pm-surface-muted:#0b142b;
  --pm-text:#f5f7ff;
  --pm-text-soft:#c9d3f0;
  --pm-border:rgba(207,220,255,0.16);
  --pm-primary:#1ec8a5;
  --pm-accent:#f0b95a;
  --pm-danger:#f36a6a;
  --pm-radius:22px;
  --pm-radius-sm:14px;
  --pm-shadow:0 22px 40px rgba(3,8,20,0.5);
}

html,body{
  background:
    radial-gradient(1000px 480px at 90% -40%, rgba(30,200,165,0.2), transparent 65%),
    radial-gradient(900px 420px at 10% -20%, rgba(240,185,90,0.16), transparent 70%),
    var(--pm-bg);
  color:var(--pm-text);
}

body{
  font-family:"Cairo","Noto Kufi Arabic","Segoe UI",sans-serif;
  letter-spacing:0;
}

.app-shell{
  padding-inline:12px;
}

.tabs{
  margin:10px 0 14px;
  padding:10px;
  border-radius:999px;
  background:rgba(11,20,43,0.82);
  backdrop-filter:blur(12px);
  border:1px solid var(--pm-border);
  box-shadow:0 14px 28px rgba(2,7,18,0.55);
  overflow-x:auto;
  flex-wrap:nowrap;
}

.tab{
  white-space:nowrap;
  border:1px solid transparent;
  background:transparent;
  color:var(--pm-text-soft);
}

.tab.active{
  background:linear-gradient(135deg, rgba(30,200,165,0.22), rgba(240,185,90,0.22));
  border-color:rgba(30,200,165,0.42);
  color:#ffffff;
}

.panel{
  padding:0 0 18px;
}

.dashboard-shell,
.analytics-shell,
.teachers-shell{
  gap:14px;
  padding:4px 0 12px;
}

.dashboard-section,
.dashboard-card,
.analytics-chart-card,
.analytics-insight-card,
.analytics-drilldown-card,
.teachers-controls,
.teachers-list-shell,
.teachers-detail-shell,
.teacher-card,
.teacher-detail-card,
.notifications-panel,
.schedule-panel{
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border:1px solid var(--pm-border);
  border-radius:var(--pm-radius);
  box-shadow:var(--pm-shadow);
}

.dashboard-hero,
.teachers-header,
.analytics-header{
  border-radius:var(--pm-radius);
  padding:16px;
  border:1px solid var(--pm-border);
  background:linear-gradient(130deg, rgba(30,200,165,0.2), rgba(16,29,58,0.9) 52%, rgba(240,185,90,0.18));
  box-shadow:var(--pm-shadow);
}

.dashboard-hero h2,
.teachers-header h2,
.analytics-header h2{
  font-size:1.28rem;
  margin:0;
  color:#ffffff;
}

.dashboard-hero p,
.teachers-header p,
.analytics-header p{
  margin:6px 0 0;
  color:var(--pm-text-soft);
  font-size:.9rem;
  line-height:1.6;
}

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

.kpi-card{
  min-height:90px;
  border-radius:var(--pm-radius-sm);
  border:1px solid rgba(30,200,165,0.26);
  background:linear-gradient(145deg, rgba(30,200,165,0.16), rgba(15,26,52,0.9));
  box-shadow:0 10px 20px rgba(2,7,18,0.35);
  padding:12px;
}

.kpi-label{
  color:var(--pm-text-soft);
  font-size:.76rem;
  line-height:1.4;
}

.kpi-value{
  font-size:1.25rem;
  color:#fff;
}

.dashboard-meta-grid{
  gap:10px;
}

.dashboard-card{
  padding:14px;
}

.dashboard-card-heading{
  font-size:.92rem;
}

.chart-wrapper{
  height:200px;
}

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

.analytics-tile{
  border-radius:var(--pm-radius-sm);
  border:1px solid rgba(207,220,255,0.2);
  background:linear-gradient(145deg, rgba(24,37,73,0.94), rgba(9,17,36,0.95));
  padding:12px;
}

.analytics-label{
  color:var(--pm-text-soft);
  font-size:.74rem;
}

.analytics-value{
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
}

.analytics-chart-row{
  grid-template-columns:1fr;
}

.analytics-insights{
  grid-template-columns:1fr;
}

.analytics-insight-card{
  padding:12px;
}

.analytics-insight-card.warning{
  border-color:rgba(240,185,90,0.55);
}

.analytics-insight-card.info{
  border-color:rgba(30,200,165,0.55);
}

.analytics-insight-card.success{
  border-color:rgba(137,214,255,0.55);
}

.analytics-drilldown-card h4{
  margin:0 0 8px;
  color:#fff;
}

.analytics-drilldown-card ul{
  margin:0 0 10px;
}

.teachers-stats-strip{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.stat-card{
  background:linear-gradient(145deg, rgba(24,37,73,0.95), rgba(10,18,38,0.96));
  border:1px solid rgba(207,220,255,0.2);
  border-radius:var(--pm-radius-sm);
  box-shadow:0 10px 18px rgba(2,7,18,0.34);
}

.stat-value{
  color:#fff;
  font-size:1.35rem;
}

.stat-label{
  color:var(--pm-text-soft);
}

.teachers-controls{
  grid-template-columns:1fr;
  padding:14px;
  gap:10px;
}

.teachers-controls input,
.teachers-controls select,
.teacher-detail-card input{
  background:var(--pm-surface-muted);
  border:1px solid rgba(207,220,255,0.22);
  color:#fff;
}

.teachers-body{
  grid-template-columns:1fr;
  gap:12px;
}

.teacher-card{
  border-radius:var(--pm-radius-sm);
  padding:12px;
}

.teacher-card .teacher-card-heading h3{
  margin:0;
  font-size:1rem;
}

.teacher-card.selected{
  border-color:rgba(30,200,165,0.64);
  background:linear-gradient(145deg, rgba(30,200,165,0.15), rgba(18,37,70,0.95));
}

.teacher-card-chips .chip,
.chip{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(207,220,255,0.22);
  color:#fff;
}

.chip.chip-risk{
  border-color:rgba(240,185,90,0.64);
  color:#ffe1ae;
}

.teacher-detail-card{
  padding:14px;
}

.teacher-detail-card header h3{
  margin:0;
  font-size:1.1rem;
}

.teacher-detail-card .detail-group{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(207,220,255,0.18);
  border-radius:var(--pm-radius-sm);
  padding:10px;
}

.teacher-detail-card .detail-group h4{
  margin:0 0 8px;
}

.schedule-preview li{
  background:rgba(30,200,165,0.12);
  border:1px solid rgba(30,200,165,0.3);
  border-radius:12px;
}

.notifications-shell{
  grid-template-columns:1fr;
  gap:12px;
  padding:2px 0 12px;
}

.notification-card{
  border-radius:var(--pm-radius-sm);
  border:1px solid rgba(207,220,255,0.2);
  background:rgba(255,255,255,0.03);
}

.schedule-grid{
  grid-template-columns:1fr;
  gap:10px;
}

.schedule-day{
  border-radius:var(--pm-radius-sm);
  background:rgba(255,255,255,0.02);
}

.schedule-entry{
  border-radius:12px;
  background:rgba(30,200,165,0.1);
  border:1px solid rgba(30,200,165,0.26);
}

.table-wrap,
.tbl{
  border-radius:16px;
  overflow:hidden;
  border-color:rgba(207,220,255,0.2);
}

.tt-shell{
  display:grid;
  gap:12px;
}

.tt-header{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  padding:14px;
  border-radius:var(--pm-radius);
  border:1px solid var(--pm-border);
  background:linear-gradient(130deg, rgba(30,200,165,0.2), rgba(16,29,58,0.9) 55%, rgba(240,185,90,0.18));
  box-shadow:var(--pm-shadow);
}

.tt-header h3{
  margin:0;
  color:#fff;
}

.tt-header-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.tt-header-actions input{
  min-height:42px;
  border-radius:999px;
  border:1px solid rgba(207,220,255,0.22);
  background:var(--pm-surface-muted);
  color:#fff;
  padding:8px 12px;
}

.tt-content{
  display:grid;
  gap:10px;
}

.tt-week-grid{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}

.tt-day-card{
  border-radius:var(--pm-radius-sm);
  border:1px solid rgba(207,220,255,0.22);
  background:linear-gradient(145deg, rgba(24,37,73,0.92), rgba(9,17,36,0.93));
  box-shadow:0 12px 20px rgba(2,7,18,0.32);
  padding:10px;
}

.tt-day-card header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
  margin-bottom:8px;
}

.tt-day-card h4{
  margin:0;
  font-size:1rem;
}

.tt-day-list{
  display:grid;
  gap:8px;
}

.tt-entry{
  border-radius:12px;
  border:1px solid rgba(30,200,165,0.3);
  background:rgba(30,200,165,0.1);
  padding:9px;
}

.tt-entry-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.78rem;
  color:var(--pm-text-soft);
}

.tt-subject{
  font-weight:700;
  color:#fff;
  margin:6px 0 2px;
}

.tt-meta{
  font-size:.84rem;
  color:var(--pm-text-soft);
}

.tt-table-wrap{
  display:none;
}

.tbl th{
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:.8rem;
}

.tbl td{
  color:var(--pm-text-soft);
}

.btn{
  border-radius:999px;
  min-height:42px;
  padding:10px 14px;
  border:1px solid rgba(207,220,255,0.2);
  background:rgba(255,255,255,0.03);
  color:#fff;
  font-weight:700;
}

.btn.primary{
  background:linear-gradient(135deg, var(--pm-primary), #0fb190);
  color:#081122;
  border:none;
}

.btn:disabled{
  opacity:.6;
}

.empty-state,
.loading,
.error-box{
  border-radius:14px;
  padding:14px;
  border:1px dashed rgba(207,220,255,0.26);
  background:rgba(255,255,255,0.03);
  color:var(--pm-text-soft);
}

.error-box{
  border-style:solid;
  border-color:rgba(243,106,106,0.6);
  background:rgba(243,106,106,0.12);
  color:#ffd1d1;
}

.teacher-mode .dashboard-hero,
.teacher-mode .analytics-header,
.teacher-mode .teachers-header{
  background:linear-gradient(130deg, rgba(137,214,255,0.16), rgba(16,29,58,0.93));
}

.teacher-mode .kpi-card{
  background:linear-gradient(145deg, rgba(137,214,255,0.16), rgba(15,26,52,0.94));
  border-color:rgba(137,214,255,0.34);
}

.teacher-mode .dashboard-card,
.teacher-mode .analytics-chart-card{
  box-shadow:0 12px 24px rgba(3,8,20,0.36);
}

@media (min-width:768px){
  .app-shell{
    padding-inline:18px;
  }
  .kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .analytics-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .teachers-controls{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .teachers-stats-strip{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .schedule-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tt-week-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:1024px){
  .app-shell{
    padding-inline:24px;
  }
  .dashboard-columns{
    grid-template-columns:1.1fr .9fr;
  }
  .teachers-body{
    grid-template-columns:1.2fr .8fr;
  }
  .analytics-chart-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .analytics-insights{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .schedule-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .tt-week-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .tt-table-wrap{
    display:block;
  }
}