/* ==============================================================
   SIMDA DISPLAY PROFILES — TAHAP 13
   Presentation only. Dua profil ringan: Kecil (default sekarang)
   dan Besar (lebih lega). Tidak menambah query/API/database.
   File dipisahkan agar penyesuaian tampilan mudah tanpa menyentuh app.js.
   ============================================================== */

html[data-simda-size="small"] { font-size: 16px; }
html[data-simda-size="large"] { font-size: 18px; }

html[data-simda-font="system"] body,
html[data-simda-font="system"] #root,
html[data-simda-font="system"] #root button,
html[data-simda-font="system"] #root input,
html[data-simda-font="system"] #root select,
html[data-simda-font="system"] #root textarea,
html[data-simda-font="bahnschrift"] body,
html[data-simda-font="bahnschrift"] #root,
html[data-simda-font="bahnschrift"] #root button,
html[data-simda-font="bahnschrift"] #root input,
html[data-simda-font="bahnschrift"] #root select,
html[data-simda-font="bahnschrift"] #root textarea,
html[data-simda-font="serif"] body,
html[data-simda-font="serif"] #root,
html[data-simda-font="serif"] #root button,
html[data-simda-font="serif"] #root input,
html[data-simda-font="serif"] #root select,
html[data-simda-font="serif"] #root textarea {
  font-family: var(--simda-font-stack) !important;
}

/* Dashboard guru: teks tidak boleh keluar kartu pada HP sempit. */
#root .simda-teacher-active-card,
#root .simda-dashboard-fold-card,
#root .simda-dashboard-fold-card button { min-width: 0 !important; }
#root .simda-teacher-active-title,
#root .simda-dashboard-fold-card button > div:nth-child(2),
#root .simda-dashboard-fold-card button > div:nth-child(2) > div:first-child {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (max-width: 768px) {
  /* PROFIL KECIL = tampilan kompak sekarang. */
  html[data-simda-size="small"] #root .simda-teacher-active-title {
    font-size: 10px !important;
    line-height: 1.12 !important;
  }
  html[data-simda-size="small"] #root .simda-dashboard-fold-card button > div:nth-child(2) > div:first-child {
    font-size: 9.4px !important;
    line-height: 1.12 !important;
  }
  html[data-simda-size="small"] #root .simda-dashboard-fold-card button > div:nth-child(2) > div:nth-child(2) {
    font-size: 8px !important;
    line-height: 1.18 !important;
  }
  html[data-simda-size="small"] #root .simda-dashboard-fold-card button > div:nth-child(2) > div:nth-child(3) {
    font-size: 7.6px !important;
    line-height: 1.1 !important;
  }

  /* PROFIL BESAR = lebih lega seperti tampilan SIMDA awal. */
  html[data-simda-size="large"] #root .simda-role-menu-grid,
  html[data-simda-size="large"] #root .simda-role-menu-grid-compact {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 11px !important;
  }
  html[data-simda-size="large"] #root .simda-role-menu-card,
  html[data-simda-size="large"] #root .simda-role-menu-card-compact {
    min-height: 118px !important;
    padding: 13px 7px 11px !important;
    border-radius: 22px !important;
  }
  html[data-simda-size="large"] #root .simda-role-menu-card > i,
  html[data-simda-size="large"] #root .simda-role-menu-card-compact > i {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 16px !important;
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }
  html[data-simda-size="large"] #root .simda-role-menu-card > span,
  html[data-simda-size="large"] #root .simda-role-menu-card-compact > span {
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }
  html[data-simda-size="large"] #root .simda-role-menu-card > small,
  html[data-simda-size="large"] #root .simda-role-menu-card-compact > small {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  html[data-simda-size="large"] #root .simda-teacher-active-card,
  html[data-simda-size="large"] #root .simda-active-students-kpi {
    min-height: 118px !important;
    padding: 13px !important;
  }
  html[data-simda-size="large"] #root .simda-teacher-active-title,
  html[data-simda-size="large"] #root .simda-active-students-kpi .text-lg {
    font-size: 12.5px !important;
    line-height: 1.16 !important;
  }
  html[data-simda-size="large"] #root .simda-active-students-kpi .text-xs { font-size: 9px !important; }
  html[data-simda-size="large"] #root .simda-active-students-kpi .text-4xl { font-size: 28px !important; }
  html[data-simda-size="large"] #root .simda-active-students-kpi .text-sm { font-size: 9px !important; }

  html[data-simda-size="large"] #root .simda-mini-fold.simda-dashboard-kpi,
  html[data-simda-size="large"] #root .simda-dashboard-fold-card {
    min-height: 118px !important;
  }
  html[data-simda-size="large"] #root .simda-mini-fold.simda-dashboard-kpi > button,
  html[data-simda-size="large"] #root .simda-dashboard-fold-card > button {
    min-height: 116px !important;
    padding: 12px 10px !important;
    gap: 8px !important;
  }
  html[data-simda-size="large"] #root .simda-dashboard-fold-card button > div:first-child {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    font-size: 18px !important;
  }
  html[data-simda-size="large"] #root .simda-dashboard-fold-card button > div:nth-child(2) > div:first-child {
    font-size: 12px !important;
    line-height: 1.16 !important;
  }
  html[data-simda-size="large"] #root .simda-dashboard-fold-card button > div:nth-child(2) > div:nth-child(2) {
    font-size: 9.6px !important;
    line-height: 1.2 !important;
  }
  html[data-simda-size="large"] #root .simda-dashboard-fold-card button > div:nth-child(2) > div:nth-child(3) {
    font-size: 9px !important;
  }

  html[data-simda-size="large"] #root .simda-mini-stat-card p,
  html[data-simda-size="large"] #root .simda-mini-finance-card p { font-size: 9.5px !important; }
  html[data-simda-size="large"] #root .simda-mini-stat-card h3,
  html[data-simda-size="large"] #root .simda-mini-finance-card h4 { font-size: 20px !important; }

  html[data-simda-size="large"] body #root nav.simda-bottom-nav > button span { font-size: 10px !important; }
  html[data-simda-size="large"] body #root nav.simda-bottom-nav > button i { font-size: 19px !important; }
}

/* Layar sangat sempit: jangan biarkan profil besar menyebabkan overflow horizontal. */
@media (max-width: 360px) {
  html[data-simda-size="large"] #root .simda-role-menu-grid,
  html[data-simda-size="large"] #root .simda-role-menu-grid-compact {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  html[data-simda-size="large"] #root .simda-teacher-active-title,
  html[data-simda-size="large"] #root .simda-dashboard-fold-card button > div:nth-child(2) > div:first-child {
    font-size: 11px !important;
  }
}

/* ==============================================================
   TAHAP 14 — teacher dashboard hardening
   Judul KPI dibuat dua baris stabil agar tidak tumpang tindih pada HP sempit,
   termasuk saat Display Size / Font Size Android diperbesar.
   ============================================================== */
#root .simda-teacher-active-copy { min-width: 0 !important; overflow: hidden !important; }
#root .simda-teacher-active-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: 0 !important;
}
#root .simda-teacher-active-title-main,
#root .simda-teacher-active-title-sub {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
#root .simda-teacher-active-title-main { font-size: 14px !important; line-height: 1.08 !important; }
#root .simda-teacher-active-title-sub { font-size: 10px !important; line-height: 1.08 !important; font-weight: 800 !important; opacity: .78; }
#root .simda-teacher-active-class {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  #root .simda-teacher-active-card {
    padding: 12px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  #root .simda-teacher-active-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 13px !important;
    font-size: 17px !important;
  }
  html[data-simda-size="small"] #root .simda-teacher-active-title-main {
    font-size: 11px !important;
    line-height: 1.08 !important;
  }
  html[data-simda-size="small"] #root .simda-teacher-active-title-sub {
    font-size: 8.5px !important;
    line-height: 1.08 !important;
  }
  html[data-simda-size="large"] #root .simda-teacher-active-title-main {
    font-size: 13px !important;
    line-height: 1.1 !important;
  }
  html[data-simda-size="large"] #root .simda-teacher-active-title-sub {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  #root .simda-teacher-active-class { font-size: 9px !important; line-height: 1.15 !important; }
  #root .simda-teacher-active-count { margin-top: 7px !important; gap: 6px !important; }
  #root .simda-teacher-active-count .text-4xl { font-size: 25px !important; }
  #root .simda-teacher-active-count .text-sm { font-size: 9px !important; padding-bottom: 1px !important; }
}

@media (max-width: 360px) {
  #root .simda-teacher-active-card { padding: 10px !important; gap: 8px !important; }
  #root .simda-teacher-active-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    font-size: 15px !important;
  }
  html[data-simda-size="small"] #root .simda-teacher-active-title-main { font-size: 10.5px !important; }
  html[data-simda-size="small"] #root .simda-teacher-active-title-sub { font-size: 8px !important; }
}


/* === FIX FINAL FULL-BLEED KARTU BERITA/VIDEO SIMDA HP — 2026-09-10 ===
   Mengunci lebar kartu 100% setelah seluruh tema dimuat. Hanya area berita/video dashboard. */
@media (max-width:768px){
  html body #root .simda-public-news-strip.simda-dashboard-web-block{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  html body #root .simda-public-news-strip .simda-public-news-slider{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    padding:0 !important;
    margin:0 !important;
  }
  html body #root .simda-public-news-strip .simda-public-news-track{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:2px 3% 15px !important;
    margin:0 !important;
    gap:10px !important;
    scroll-padding-inline:3% !important;
  }
  html body #root .simda-public-news-strip .simda-public-news-track > .simda-public-media-card{
    flex:0 0 97% !important;
    width:97% !important;
    min-width:97% !important;
    max-width:97% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
    scroll-snap-align:center !important;
    border:0 !important;
    overflow:hidden !important;
  }
  html body #root .simda-public-news-strip .simda-public-media-card > .simda-public-media-thumb,
  html body #root .simda-public-news-strip .simda-public-media-card .simda-public-media-thumb,
  html body #root .simda-public-news-strip .simda-public-media-card .simda-public-media-thumb-wrap,
  html body #root .simda-public-news-strip .simda-public-media-card .simda-public-media-hit{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }
}


/* === TAHAP 5 2026-09-11: MODE ADAPTIF HP LAMA / INTERNET LEMAH ===
   Aktif otomatis hanya bila boot mendeteksi perangkat/koneksi sangat terbatas.
   Mode normal tidak terkena aturan ini. Tidak mengubah fungsi atau hak akses. */
html.simda-lite body #root * {
  scroll-behavior:auto !important;
}
html.simda-lite body #root .simda-bottom-nav,
html.simda-lite body #root header,
html.simda-lite body #root [class*="backdrop"],
html.simda-lite body #root .simda-ui-settings-panel {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
html.simda-lite body #root .simda-bottom-nav {
  box-shadow:0 5px 14px rgba(15,23,42,.10) !important;
}
html.simda-lite body #root .simda-public-media-card,
html.simda-lite body #root .simda-mini-stat-card,
html.simda-lite body #root .simda-mini-finance-card,
html.simda-lite body #root .simda-dashboard-fold-card {
  box-shadow:0 4px 12px rgba(15,23,42,.055) !important;
}
html.simda-lite body #root .simda-public-media-card,
html.simda-lite body #root .simda-bottom-nav button,
html.simda-lite body #root button {
  transition:none !important;
}
html.simda-lite body #root .simda-public-media-card:hover,
html.simda-lite body #root .simda-bottom-nav .active-bottom {
  transform:none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #root * {
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}