/* ==============================================================
   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;
  }
}

/* === FIX DESKTOP WIDTH + HEADER ACTIONS 2026-09-12 ===
   Menahan tabel/carousel lebar agar tidak mendorong shell keluar viewport. */
html body #root .simda-mobile-shell,
html body #root main.print-area,
html body #root .simda-content-scroll {
  min-width: 0 !important;
  max-width: 100% !important;
}
html body #root main.print-area { overflow: hidden !important; }
html body #root .simda-content-scroll { overflow-x: hidden !important; }
html body #root .simda-content-scroll > * { min-width: 0 !important; max-width: 100% !important; }
html body #root .simda-grade-rekap { min-width:0 !important; max-width:100% !important; overflow:hidden !important; }
html body #root .simda-grade-rekap-scroll { min-width:0 !important; max-width:100% !important; overflow-x:auto !important; overscroll-behavior-x:contain !important; }
html body #root header.simda-header-solid > div:first-child { min-width:0 !important; flex:1 1 auto !important; overflow:hidden !important; }
html body #root header.simda-header-solid .simda-mobile-profile { flex:0 0 auto !important; }
@media (min-width:769px){
  html body #root header.simda-header-solid .simda-top-actions,
  html body #root header.simda-header-solid .simda-top-logout,
  html body #root header.simda-header-solid .simda-top-logout-compact { display:flex !important; }
  html body #root header.simda-header-solid .simda-top-actions { flex:0 0 auto !important; align-items:center !important; }
}

/* Tabungan: input transaksi dan riwayat harus selalu tampak; rekap hanya tambahan laporan. */
html body #root .simda-savings-report { width:100% !important; min-width:0 !important; }
html body #root .simda-savings-input-panel,
html body #root .simda-savings-history-panel { display:block !important; visibility:visible !important; width:100% !important; min-width:0 !important; }
html body #root .simda-savings-history-panel { display:flex !important; }

/* ==============================================================
   DASHBOARD MOBILE GURU + ADMIN CABANG — RAPAT & SIMETRIS
   Presentation only. Tidak mengubah hak akses, API, bottom nav,
   sidebar desktop, data, absensi, atau alur menu.
   ============================================================== */
@media (max-width:768px) {
  /* Guru: enam tile dibuat 3x2 agar tidak ada ruang kosong, baik Kecil/Besar. */
  html body #root .simda-role-menu-grid-guru,
  html[data-simda-size="small"] body #root .simda-role-menu-grid-guru,
  html[data-simda-size="large"] body #root .simda-role-menu-grid-guru {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
  }

  /* Tiga kartu informasi guru mengikuti proporsi tile menu utama. */
  html body #root .simda-teacher-dashboard-cards {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    align-items:stretch !important;
    margin:0 !important;
  }
  html body #root .simda-teacher-dashboard-cards > .simda-teacher-active-card,
  html body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card {
    min-width:0 !important;
    min-height:88px !important;
    height:88px !important;
    border-radius:18px !important;
    box-shadow:0 5px 14px rgba(15,23,42,.055) !important;
    overflow:hidden !important;
    margin:0 !important;
  }
  html body #root .simda-teacher-dashboard-cards > .simda-teacher-active-card {
    padding:8px 4px 7px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:5px !important;
    text-align:center !important;
  }
  html body #root .simda-teacher-dashboard-cards .simda-teacher-active-icon {
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    border-radius:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#ecfdf5 !important;
    color:#059669 !important;
    font-size:16px !important;
    box-shadow:inset 0 -3px 0 rgba(4,120,87,.08) !important;
  }
  html body #root .simda-teacher-dashboard-cards .simda-teacher-active-copy {
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  html body #root .simda-teacher-class-compact {
    font-size:10.2px !important;
    line-height:1.08 !important;
    font-weight:900 !important;
    color:#065f46 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  html body #root .simda-teacher-count-compact {
    margin-top:2px !important;
    font-size:7.8px !important;
    line-height:1.08 !important;
    font-weight:800 !important;
    color:#64748b !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Fold card tertutup dibuat persis sekelas dengan tile menu. */
  html body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button {
    min-height:86px !important;
    height:86px !important;
    padding:7px 4px !important;
    gap:4px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  html body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button > div:first-child {
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    border-radius:12px !important;
    font-size:16px !important;
  }
  html body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button > div:nth-child(2) {
    width:100% !important;
    min-width:0 !important;
  }
  html body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button > div:nth-child(2) > div:first-child {
    font-size:9.7px !important;
    line-height:1.08 !important;
    justify-content:center !important;
    gap:3px !important;
  }
  html body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button > div:nth-child(2) > div:first-child > i {
    display:none !important;
  }
  html body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button > div:nth-child(2) > div:nth-child(2) {
    font-size:7.2px !important;
    line-height:1.05 !important;
    margin-top:2px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    display:block !important;
  }
  html body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button > div:nth-child(2) > div:nth-child(3) {
    display:none !important;
  }
  html body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card:has(> div) {
    grid-column:1/-1 !important;
    height:auto !important;
    min-height:88px !important;
  }
  html body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card:has(> div) > button {
    height:auto !important;
    min-height:72px !important;
  }

  /* Mode besar: kartu informasi guru mengikuti tile menu besar. */
  html[data-simda-size="large"] body #root .simda-teacher-dashboard-cards {
    gap:11px !important;
  }
  html[data-simda-size="large"] body #root .simda-teacher-dashboard-cards > .simda-teacher-active-card,
  html[data-simda-size="large"] body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card {
    min-height:118px !important;
    height:118px !important;
    border-radius:22px !important;
  }
  html[data-simda-size="large"] body #root .simda-teacher-dashboard-cards > .simda-teacher-active-card {
    padding:13px 7px 11px !important;
    gap:7px !important;
  }
  html[data-simda-size="large"] body #root .simda-teacher-dashboard-cards .simda-teacher-active-icon,
  html[data-simda-size="large"] body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button > div:first-child {
    width:48px !important;
    height:48px !important;
    flex-basis:48px !important;
    border-radius:16px !important;
    font-size:22px !important;
  }
  html[data-simda-size="large"] body #root .simda-teacher-class-compact {
    font-size:12.5px !important;
  }
  html[data-simda-size="large"] body #root .simda-teacher-count-compact {
    font-size:9px !important;
  }
  html[data-simda-size="large"] body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button {
    min-height:116px !important;
    height:116px !important;
    padding:11px 7px !important;
    gap:7px !important;
  }
  html[data-simda-size="large"] body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button > div:nth-child(2) > div:first-child {
    font-size:12px !important;
  }
  html[data-simda-size="large"] body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card > button > div:nth-child(2) > div:nth-child(2) {
    font-size:9px !important;
  }
  html[data-simda-size="large"] body #root .simda-teacher-dashboard-cards > .simda-dashboard-fold-card:has(> div) {
    height:auto !important;
  }
}