/* ==============================================================
   SIMDA VISUAL THEME LAYER
   Tampilan saja: warna, font, radius, spacing, bottom navigation.
   Tidak mengubah role, API, database, absensi, WA, santri/guru, dll.
   File ini sengaja dimuat SETELAH app.css agar perubahan visual kecil
   ke depan cukup dilakukan di sini tanpa menyentuh logika aplikasi.
   ============================================================== */

:root {
  --simda-green: #08795d;
  --simda-green-strong: #047857;
  --simda-glass-text: #08795d;
}

/* Bottom navigation HP — neutral clear tempered glass, zero green tint */
@media (max-width: 768px) {
  html body #root nav.simda-bottom-nav {
    position: fixed !important;
    left: 5.2% !important;
    right: 5.2% !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 5px 7px !important;
    gap: 2px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    isolation: isolate !important;

    /* benar-benar netral: tanpa hijau, tanpa gradient berwarna */
    background-color: rgba(255,255,255,.20) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    outline: 1px solid rgba(255,255,255,.24) !important;

    -webkit-backdrop-filter: blur(24px) saturate(118%) brightness(108%) !important;
    backdrop-filter: blur(24px) saturate(118%) brightness(108%) !important;

    box-shadow:
      0 14px 32px rgba(15,23,42,.15),
      0 2px 8px rgba(15,23,42,.07),
      inset 0 1px 0 rgba(255,255,255,.92),
      inset 0 -1px 0 rgba(255,255,255,.30) !important;
  }

  /* hapus lapisan warna/pseudo dari style lama */
  html body #root nav.simda-bottom-nav::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.04)) !important;
    opacity: 1 !important;
  }
  html body #root nav.simda-bottom-nav::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  html body #root nav.simda-bottom-nav > button {
    position: relative !important;
    z-index: 1 !important;
    height: 56px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px 2px 4px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--simda-glass-text) !important;
    opacity: .92 !important;
  }

  html body #root nav.simda-bottom-nav > button i,
  html body #root nav.simda-bottom-nav > button span {
    color: var(--simda-glass-text) !important;
    text-shadow: none !important;
    filter: none !important;
  }

  html body #root nav.simda-bottom-nav > button i {
    font-size: 17px !important;
    margin-bottom: 0 !important;
  }

  html body #root nav.simda-bottom-nav > button span {
    font-size: 8.6px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
  }

  /* tombol aktif tetap kaca bening, bukan blok hijau/putih pekat */
  html body #root nav.simda-bottom-nav > button.active-bottom {
    background-color: rgba(255,255,255,.36) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow:
      0 5px 14px rgba(15,23,42,.10),
      inset 0 1px 0 rgba(255,255,255,.90),
      inset 0 -1px 0 rgba(255,255,255,.22) !important;
    transform: translateY(-1px) !important;
    opacity: 1 !important;
  }

  html body #root nav.simda-bottom-nav > button.active-bottom i,
  html body #root nav.simda-bottom-nav > button.active-bottom span {
    color: var(--simda-green-strong) !important;
  }

  /* ruang konten tetap aman dari nav mengambang */
  .simda-content-scroll { padding-bottom: 94px !important; }
  .simda-logout-mini { bottom: 84px !important; }
}

@media (max-width: 390px) {
  html body #root nav.simda-bottom-nav {
    left: 4.2% !important;
    right: 4.2% !important;
    height: 65px !important;
    min-height: 65px !important;
    padding: 4px 6px !important;
    border-radius: 24px !important;
  }
  html body #root nav.simda-bottom-nav > button { height: 53px !important; border-radius: 18px !important; }
  html body #root nav.simda-bottom-nav > button i { font-size: 16px !important; }
  html body #root nav.simda-bottom-nav > button span { font-size: 8.1px !important; }
}

/* ==============================================================
   COMPACT MOBILE DASHBOARD + SETTINGS (UI ONLY)
   Semua aturan di bawah khusus tampilan HP. Bottom navigation tidak diubah.
   ============================================================== */
:root{
  --simda-ui-scale:1;
  --simda-font-stack:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
html[data-simda-font="system"]{--simda-font-stack:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;}
html[data-simda-font="bahnschrift"]{--simda-font-stack:Bahnschrift,"Arial Narrow",Arial,sans-serif;}
html[data-simda-font="serif"]{--simda-font-stack:Georgia,"Times New Roman",serif;}
html[data-simda-size="small"]{--simda-ui-scale:.92;}
html[data-simda-size="normal"]{--simda-ui-scale:1;}
html[data-simda-size="large"]{--simda-ui-scale:1.08;}
html body #root{font-family:var(--simda-font-stack)!important;font-size:calc(16px * var(--simda-ui-scale));}

@media(max-width:768px){
  /* menu utama diperkecil ±10% tanpa mengubah urutan/fungsi */
  .simda-role-menu-grid-compact{gap:12px!important;}
  .simda-role-menu-card-compact{min-height:126px!important;padding:17px 9px 13px!important;border-radius:25px!important;}
  .simda-role-menu-card-compact>i{width:58px!important;height:58px!important;font-size:26px!important;border-radius:19px!important;}
  .simda-role-menu-card-compact>span{font-size:14px!important;line-height:1.12!important;margin-top:7px!important;}
  .simda-role-menu-card-compact>small{font-size:10px!important;line-height:1.12!important;margin-top:4px!important;}

  /* grid ringkas: 3 indikator dalam satu baris */
  .simda-dashboard-kpi-grid,.simda-mini-dashboard-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;align-items:stretch!important;}
  .simda-dashboard-kpi-grid>.simda-dashboard-kpi,.simda-mini-dashboard-grid>.simda-mini-stat-card,.simda-mini-dashboard-grid>.simda-mini-finance-card{min-width:0!important;width:auto!important;margin:0!important;}

  /* Santri aktif kelas saya: kecil dahulu, klik baru melebar */
  .simda-active-students-kpi{padding:11px!important;border-radius:22px!important;min-height:112px!important;cursor:pointer!important;overflow:hidden!important;transition:.18s ease!important;}
  .simda-active-students-kpi>div{gap:8px!important;align-items:center!important;}
  .simda-active-students-kpi>div>div:first-child{width:40px!important;height:40px!important;border-radius:14px!important;font-size:18px!important;flex:0 0 40px!important;}
  .simda-active-students-kpi .text-lg{font-size:11px!important;line-height:1.18!important;}
  .simda-active-students-kpi .text-xs{font-size:9px!important;}
  .simda-active-students-kpi .text-4xl{font-size:24px!important;}
  .simda-active-students-kpi .text-sm{font-size:9px!important;}
  .simda-active-students-kpi:not(.is-open) .flex.items-end{margin-top:5px!important;}
  .simda-active-students-kpi.is-open{grid-column:1/-1!important;min-height:150px!important;padding:18px!important;}
  .simda-active-students-kpi.is-open .text-lg{font-size:16px!important;}.simda-active-students-kpi.is-open .text-4xl{font-size:38px!important;}

  /* Fold cards kehadiran/iuran/absensi: ikon mini, isi tersembunyi sampai klik */
  .simda-mini-fold.simda-dashboard-kpi{border-radius:22px!important;overflow:hidden!important;min-height:112px!important;}
  .simda-mini-fold.simda-dashboard-kpi>button{padding:10px!important;min-height:110px!important;align-items:center!important;}
  .simda-mini-fold.simda-dashboard-kpi>button>div:first-child{width:38px!important;height:38px!important;border-radius:13px!important;font-size:16px!important;flex:0 0 38px!important;}
  .simda-mini-fold.simda-dashboard-kpi>button>div:nth-child(2)>div:first-child{font-size:10.5px!important;line-height:1.15!important;}
  .simda-mini-fold.simda-dashboard-kpi>button>div:nth-child(2)>div:nth-child(2){font-size:8.5px!important;line-height:1.2!important;-webkit-line-clamp:2!important;}
  .simda-mini-fold.simda-dashboard-kpi>button>div:nth-child(2)>div:nth-child(3){font-size:7.8px!important;padding:2px 5px!important;}
  .simda-mini-fold.simda-dashboard-kpi:not(.is-open)>div:not(:first-child){display:none!important;}
  .simda-mini-fold.simda-dashboard-kpi.is-open{grid-column:1/-1!important;min-height:auto!important;}
  .simda-mini-fold.simda-dashboard-kpi.is-open>div:not(:first-child){display:block!important;}

  /* Admin cards ringkas dan bisa klik untuk menonjolkan */
  .simda-mini-stat-card,.simda-mini-finance-card{padding:11px!important;min-height:90px!important;border-radius:20px!important;cursor:pointer!important;}
  .simda-mini-stat-card p,.simda-mini-finance-card p{font-size:8.5px!important;line-height:1.15!important;}
  .simda-mini-stat-card h3,.simda-mini-finance-card h4{font-size:17px!important;margin-top:5px!important;}
  .simda-mini-stat-card.is-open,.simda-mini-finance-card.is-open{grid-column:1/-1!important;min-height:120px!important;}

  /* Papan pengumuman: satu chip kecil, isi baru muncul saat dibuka */
  .simda-announcement-mini{border-radius:22px!important;margin-top:12px!important;overflow:hidden!important;}
  .simda-announcement-mini .simda-announcement-head{height:52px!important;padding:0 15px!important;background:rgba(255,255,255,.90)!important;color:#08795d!important;border:1px solid rgba(5,150,105,.16)!important;font-size:12px!important;border-radius:22px!important;box-shadow:0 7px 20px rgba(15,23,42,.06)!important;}
  .simda-announcement-mini .simda-announcement-head:before{content:"\f0a1";font-family:"Font Awesome 6 Free";font-weight:900;width:34px;height:34px;border-radius:12px;background:#e9fbf4;display:inline-flex;align-items:center;justify-content:center;margin-right:8px;}
  .simda-announcement-mini .simda-announcement-head:after{content:"Buka"!important;color:#64748b!important;margin-left:auto!important;font-size:9px!important;}
  .simda-announcement-mini.open .simda-announcement-head:after{content:"Tutup"!important;}
  .simda-announcement-mini .simda-announcement-body{display:none!important;background:#fff!important;padding:12px!important;}
  .simda-announcement-mini.open .simda-announcement-body{display:block!important;}

  /* Web selalu setelah pengumuman; track geser horizontal tetap hemat tempat */
  .simda-dashboard-web-block{margin-top:12px!important;}
  .simda-public-news-track{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:10px!important;padding-bottom:4px!important;-webkit-overflow-scrolling:touch!important;}
  .simda-public-news-track>*{flex:0 0 100%!important;scroll-snap-align:start!important;}

  /* tombol pengaturan + keluar: icon-only, kecil, sejajar */
  .simda-top-actions{display:flex!important;align-items:center!important;gap:7px!important;margin-left:auto!important;}
  .simda-top-settings,.simda-top-logout-compact{position:static!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;padding:0!important;box-shadow:0 7px 16px rgba(15,23,42,.10)!important;border:1px solid rgba(255,255,255,.62)!important;}
  .simda-top-settings{background:rgba(255,255,255,.88)!important;color:#08795d!important;}
  .simda-top-logout-compact{background:#ef4444!important;color:#fff!important;}
  .simda-hide-duplicate-logout{display:none!important;}

  /* settings modal */
  .simda-ui-settings-panel{position:fixed;inset:0;z-index:999999;background:rgba(15,23,42,.22);display:none;align-items:flex-end;justify-content:center;padding:12px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
  .simda-ui-settings-panel.open{display:flex!important;}
  .simda-settings-card{width:min(100%,460px);background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.86);border-radius:26px;padding:16px;box-shadow:0 20px 60px rgba(15,23,42,.22);}
  .simda-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;color:#0f172a;}.simda-settings-head strong{font-size:16px;}.simda-settings-close{width:32px;height:32px;border-radius:11px;background:#f1f5f9;color:#475569;}
  .simda-settings-group{margin-top:12px}.simda-settings-group>label{display:block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:7px}.simda-setting-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.simda-setting-options[data-setting="mode"]{grid-template-columns:repeat(2,minmax(0,1fr));}.simda-setting-options button{border:1px solid #dbe6e1;background:#fff;border-radius:13px;padding:9px 6px;font-size:11px;font-weight:800;color:#475569}.simda-setting-options button.active{border-color:#10b981;background:#ecfdf5;color:#047857;box-shadow:inset 0 0 0 1px #6ee7b7;}
}

/* Mode gelap: hanya presentation layer. */
html.simda-dark body,html.simda-dark #root,html.simda-dark .simda-mobile-shell,html.simda-dark .simda-content-scroll{background:#07130f!important;color:#e5f4ee!important;}
html.simda-dark #root .bg-white,html.simda-dark #root .simda-role-menu-card,html.simda-dark #root .simda-welcome-card,html.simda-dark #root .simda-settings-card{background:#0d211a!important;color:#e5f4ee!important;border-color:rgba(52,211,153,.16)!important;}
html.simda-dark #root .text-gray-800,html.simda-dark #root .text-gray-700{color:#e5f4ee!important;}html.simda-dark #root .text-gray-500,html.simda-dark #root .text-gray-400{color:#9bb6ac!important;}
html.simda-dark .simda-announcement-mini .simda-announcement-head{background:#0d211a!important;color:#6ee7b7!important;border-color:rgba(52,211,153,.18)!important;}html.simda-dark .simda-announcement-mini .simda-announcement-body{background:#0d211a!important;}
html.simda-dark .simda-ui-settings-panel{background:rgba(0,0,0,.48)!important;}html.simda-dark .simda-setting-options button{background:#10271f!important;color:#d9eee6!important;border-color:#244a3d!important;}html.simda-dark .simda-settings-head{color:#e5f4ee!important;}

@media(max-width:390px){
  .simda-role-menu-card-compact{min-height:116px!important;padding:14px 7px 11px!important}.simda-role-menu-card-compact>i{width:54px!important;height:54px!important;font-size:24px!important}.simda-role-menu-card-compact>span{font-size:12.8px!important}.simda-role-menu-card-compact>small{font-size:9px!important}
  .simda-dashboard-kpi-grid,.simda-mini-dashboard-grid{gap:7px!important}.simda-active-students-kpi,.simda-mini-fold.simda-dashboard-kpi{min-height:105px!important}.simda-mini-fold.simda-dashboard-kpi>button{min-height:103px!important;padding:8px!important}
}

/* ==============================================================
   SIMDA COMPACT MOBILE V2 — UI ONLY
   Target: hemat layar seperti pola DIGDAYA, tanpa mengubah bottom nav.
   ============================================================== */
@media (max-width:768px){
  /* Menu utama: 4 kolom, lebih kecil dan rapat */
  html body #root .simda-role-menu-grid,
  html body #root .simda-role-menu-grid-compact{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    margin-bottom:10px!important;
  }
  html body #root .simda-role-menu-card,
  html body #root .simda-role-menu-card-compact{
    min-height:88px!important;
    height:auto!important;
    padding:8px 3px 7px!important;
    border-radius:18px!important;
    box-shadow:0 5px 14px rgba(15,23,42,.055)!important;
  }
  html body #root .simda-role-menu-card>i,
  html body #root .simda-role-menu-card-compact>i{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    border-radius:12px!important;
    font-size:16px!important;
    margin:0 auto 6px!important;
  }
  html body #root .simda-role-menu-card>span,
  html body #root .simda-role-menu-card-compact>span{
    font-size:10.2px!important;
    line-height:1.08!important;
    margin-top:0!important;
    font-weight:850!important;
  }
  html body #root .simda-role-menu-card>small,
  html body #root .simda-role-menu-card-compact>small{
    font-size:7.4px!important;
    line-height:1.05!important;
    margin-top:2px!important;
    min-height:0!important;
  }
  html body #root .simda-section-heading{
    font-size:11px!important;
    margin:2px 1px 8px!important;
    gap:6px!important;
  }
  html body #root .simda-section-heading i{font-size:13px!important;}

  /* Semua indikator ringkas: 3 kartu sejajar, minim ruang kosong */
  html body #root .simda-dashboard-kpi-grid,
  html body #root .simda-mini-dashboard-grid{
    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-mini-stat-card,
  html body #root .simda-mini-finance-card{
    min-height:76px!important;
    padding:9px 8px!important;
    border-radius:17px!important;
    border-left-width:1px!important;
    box-shadow:0 4px 12px rgba(15,23,42,.045)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  html body #root .simda-mini-stat-card p,
  html body #root .simda-mini-finance-card p{
    font-size:7.8px!important;
    line-height:1.05!important;
    margin:0!important;
  }
  html body #root .simda-mini-stat-card h3,
  html body #root .simda-mini-finance-card h4{
    font-size:16px!important;
    line-height:1!important;
    margin-top:5px!important;
  }
  html body #root .simda-mini-stat-card.is-open,
  html body #root .simda-mini-finance-card.is-open{
    grid-column:1/-1!important;
    min-height:98px!important;
  }

  /* Guru / wali: 3 indikator kecil, detail penuh hanya saat diklik */
  html body #root .simda-active-students-kpi,
  html body #root .simda-mini-fold.simda-dashboard-kpi{
    min-height:88px!important;
    border-radius:18px!important;
    box-shadow:0 4px 12px rgba(15,23,42,.045)!important;
  }
  html body #root .simda-active-students-kpi{
    padding:8px!important;
  }
  html body #root .simda-active-students-kpi>div{
    gap:6px!important;
    align-items:center!important;
  }
  html body #root .simda-active-students-kpi>div>div:first-child{
    width:32px!important;height:32px!important;flex:0 0 32px!important;
    border-radius:11px!important;font-size:14px!important;
  }
  html body #root .simda-active-students-kpi .text-lg{font-size:9.5px!important;line-height:1.08!important;}
  html body #root .simda-active-students-kpi .text-xs{font-size:7.6px!important;line-height:1.05!important;}
  html body #root .simda-active-students-kpi .text-4xl{font-size:22px!important;}
  html body #root .simda-active-students-kpi .text-sm{font-size:7.5px!important;}
  html body #root .simda-active-students-kpi .flex.items-end{margin-top:4px!important;gap:4px!important;}

  html body #root .simda-mini-fold.simda-dashboard-kpi>button{
    min-height:86px!important;
    padding:8px 6px!important;
    gap:6px!important;
    align-items:center!important;
  }
  html body #root .simda-mini-fold.simda-dashboard-kpi>button>div:first-child{
    width:31px!important;height:31px!important;flex:0 0 31px!important;
    border-radius:11px!important;font-size:13px!important;
  }
  html body #root .simda-mini-fold.simda-dashboard-kpi>button>div:nth-child(2)>div:first-child{
    font-size:9.2px!important;line-height:1.08!important;
  }
  html body #root .simda-mini-fold.simda-dashboard-kpi>button>div:nth-child(2)>div:nth-child(2){
    font-size:7.4px!important;line-height:1.1!important;margin-top:2px!important;
    display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;
  }
  html body #root .simda-mini-fold.simda-dashboard-kpi>button>div:nth-child(2)>div:nth-child(3){
    font-size:6.8px!important;padding:1px 4px!important;margin-top:3px!important;
  }
  html body #root .simda-mini-fold.simda-dashboard-kpi.is-open,
  html body #root .simda-active-students-kpi.is-open{
    grid-column:1/-1!important;
    min-height:auto!important;
  }

  /* Pengumuman: satu baris kecil, isi dibuka saat klik */
  html body #root .simda-announcement-mini{
    border-radius:17px!important;
    margin-top:0!important;
    box-shadow:0 4px 12px rgba(15,23,42,.045)!important;
  }
  html body #root .simda-announcement-head{
    min-height:48px!important;
    padding:9px 12px!important;
    border-radius:17px!important;
    font-size:11px!important;
  }
  html body #root .simda-announcement-head i{font-size:13px!important;}
  html body #root .simda-announcement-mini:not(.open) .simda-announcement-body{display:none!important;}
  html body #root .simda-announcement-mini.open .simda-announcement-body{display:block!important;padding:10px 12px!important;}

  /* Website selalu blok terakhir setelah pengumuman */
  html body #root .simda-dashboard-web-block{margin-top:0!important;}
  html body #root .simda-public-news-strip{border-radius:18px!important;}

  /* Header: keluar dan pengaturan sama-sama kecil */
  html body #root .simda-top-actions{gap:7px!important;}
  html body #root .simda-top-settings,
  html body #root .simda-top-logout,
  html body #root .simda-top-logout-compact{
    width:31px!important;height:31px!important;min-width:31px!important;flex:0 0 31px!important;
    border-radius:12px!important;padding:0!important;
  }
  html body #root .simda-top-settings i,
  html body #root .simda-top-logout i,
  html body #root .simda-top-logout-compact i{font-size:13px!important;}

  /* Kurangi jarak vertikal antar blok dashboard */
  html body #root .animate-fade-in.space-y-5{row-gap:10px!important;}
  html body #root .animate-fade-in.space-y-5>*+*{margin-top:10px!important;}
}

@media (max-width:390px){
  html body #root .simda-role-menu-grid,
  html body #root .simda-role-menu-grid-compact{gap:6px!important;}
  html body #root .simda-role-menu-card,
  html body #root .simda-role-menu-card-compact{min-height:82px!important;padding:7px 2px 6px!important;}
  html body #root .simda-role-menu-card>i,
  html body #root .simda-role-menu-card-compact>i{width:31px!important;height:31px!important;flex-basis:31px!important;font-size:14px!important;}
  html body #root .simda-role-menu-card>span,
  html body #root .simda-role-menu-card-compact>span{font-size:9.4px!important;}
  html body #root .simda-role-menu-card>small,
  html body #root .simda-role-menu-card-compact>small{font-size:6.9px!important;}
}

/* ==============================================================
   DESKTOP SETTINGS PANEL FIX — UI ONLY
   Panel pengaturan harus tersembunyi saat tidak dibuka di SEMUA ukuran layar.
   Sebelumnya aturan display:none hanya berada di media query HP sehingga
   pada desktop markup panel tampil sebagai teks biasa di bawah dashboard.
   ============================================================== */
.simda-ui-settings-panel{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  background:rgba(15,23,42,.24) !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  -webkit-backdrop-filter:blur(6px) !important;
  backdrop-filter:blur(6px) !important;
}
.simda-ui-settings-panel.open{
  display:flex !important;
}
.simda-settings-card{
  width:min(430px, calc(100vw - 40px)) !important;
  max-height:min(620px, calc(100vh - 40px)) !important;
  overflow:auto !important;
  background:rgba(255,255,255,.97) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:22px !important;
  padding:18px !important;
  box-shadow:0 24px 70px rgba(15,23,42,.24) !important;
}
.simda-settings-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:14px !important;
  color:#0f172a !important;
}
.simda-settings-head strong{font-size:16px !important;}
.simda-settings-close{
  width:32px !important;height:32px !important;min-width:32px !important;
  border:0 !important;border-radius:10px !important;
  background:#f1f5f9 !important;color:#475569 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
}
.simda-settings-group{margin-top:13px !important;}
.simda-settings-group>label{
  display:block !important;font-size:10px !important;font-weight:900 !important;
  text-transform:uppercase !important;letter-spacing:.08em !important;
  color:#64748b !important;margin-bottom:7px !important;
}
.simda-setting-options{
  display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:7px !important;
}
.simda-setting-options[data-setting="mode"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.simda-setting-options button{
  border:1px solid #dbe6e1 !important;background:#fff !important;border-radius:12px !important;
  padding:9px 6px !important;font-size:11px !important;font-weight:800 !important;color:#475569 !important;
}
.simda-setting-options button.active{
  border-color:#10b981 !important;background:#ecfdf5 !important;color:#047857 !important;
  box-shadow:inset 0 0 0 1px #6ee7b7 !important;
}

/* Desktop: tombol UI kecil, tanpa mengubah sidebar/menu aplikasi. */
@media (min-width:769px){
  .simda-top-actions{display:flex !important;align-items:center !important;gap:6px !important;margin-left:auto !important;}
  .simda-top-settings,.simda-top-logout-compact{
    width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;
    border-radius:11px !important;padding:0 !important;display:inline-flex !important;
    align-items:center !important;justify-content:center !important;
  }
}

/* HP tetap sebagai bottom-sheet yang sudah ada. */
@media (max-width:768px){
  .simda-ui-settings-panel{
    align-items:flex-end !important;
    justify-content:center !important;
    padding:12px !important;
  }
  .simda-settings-card{
    width:min(100%,460px) !important;
    max-height:82vh !important;
    border-radius:26px !important;
    padding:16px !important;
  }
}

/* =========================================================
   DATA GURU & SANTRI — KARTU RAPI / COMPACT
   UI-only. Tidak mengubah data, aksi, role, atau alur aplikasi.
   ========================================================= */

/* Nama jangan dipotong; tampil lengkap di kartu data. */
#root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .space-y-3 > div.bg-white.rounded-3xl .font-extrabold.uppercase,
#root .space-y-6:has(input[placeholder*="NIP Santri"]) .space-y-3 > div.bg-white\/95.rounded-3xl .font-extrabold.uppercase{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:break-word !important;
  line-height:1.18 !important;
}

/* Sedikit lebih bersih juga di desktop tanpa mengubah struktur. */
#root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .space-y-3 > div.bg-white.rounded-3xl,
#root .space-y-6:has(input[placeholder*="NIP Santri"]) .space-y-3 > div.bg-white\/95.rounded-3xl{
  border-color:rgba(16,185,129,.18) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.055) !important;
}

@media (max-width:768px){
  /* ===== GURU ===== */
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .space-y-3{
    gap:9px !important;
  }
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .space-y-3 > div.bg-white.rounded-3xl{
    padding:12px 13px !important;
    border-radius:19px !important;
  }
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .space-y-3 > div.bg-white.rounded-3xl > .flex.items-start{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px !important;
  }
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .font-extrabold.uppercase{
    font-size:14px !important;
    letter-spacing:-.01em !important;
    padding-right:2px !important;
  }
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .mt-1.flex.flex-wrap{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    margin-top:7px !important;
  }
  /* Urutan: tugas/wali kelas -> NIP -> password */
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .mt-1.flex.flex-wrap > :nth-child(2){
    order:1 !important;
    flex:0 0 100% !important;
    width:max-content !important;
    max-width:100% !important;
  }
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .mt-1.flex.flex-wrap > :nth-child(1){order:2 !important;}
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .mt-1.flex.flex-wrap > :nth-child(3){order:3 !important;}
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .mt-1.flex.flex-wrap > span{
    min-height:24px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:4px 8px !important;
    border-radius:9px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .flex.items-center.gap-1.shrink-0{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
    gap:5px !important;
    width:100% !important;
    padding-top:7px !important;
    border-top:1px solid rgba(148,163,184,.16) !important;
  }
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .flex.items-center.gap-1.shrink-0 button{
    width:31px !important;
    min-width:31px !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 !important;
    border-radius:10px !important;
    font-size:10px !important;
    box-shadow:none !important;
  }
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) .flex.items-center.gap-1.shrink-0 button:not([class*="w-"]){
    width:auto !important;
    min-width:66px !important;
    padding:0 9px !important;
  }

  /* ===== SANTRI ===== */
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .space-y-3{
    gap:9px !important;
  }
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .space-y-3 > div.bg-white\/95.rounded-3xl{
    padding:12px 13px !important;
    border-radius:19px !important;
  }
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .space-y-3 > div.bg-white\/95.rounded-3xl > .grid.grid-cols-\[1fr_auto\]{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px !important;
  }
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .font-extrabold.uppercase{
    font-size:14px !important;
    letter-spacing:-.01em !important;
  }
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .mt-1\.5.flex.flex-wrap{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    margin-top:7px !important;
  }
  /* Urutan: kelas -> NIP -> password */
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .mt-1\.5.flex.flex-wrap > :nth-child(1){
    order:1 !important;
    flex:0 0 100% !important;
    width:max-content !important;
    max-width:100% !important;
  }
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .mt-1\.5.flex.flex-wrap > :nth-child(3){order:2 !important;}
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .mt-1\.5.flex.flex-wrap > :nth-child(2){order:3 !important;}
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .mt-1\.5.flex.flex-wrap > span{
    min-height:24px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:4px 8px !important;
    border-radius:9px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .grid.grid-cols-3.gap-1\.5.w-\[132px\]{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
    gap:5px !important;
    width:100% !important;
    padding-top:7px !important;
    border-top:1px solid rgba(148,163,184,.16) !important;
  }
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .grid.grid-cols-3.gap-1\.5.w-\[132px\] button{
    min-width:31px !important;
    width:31px !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 !important;
    border-radius:10px !important;
    font-size:9px !important;
    box-shadow:none !important;
  }
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .grid.grid-cols-3.gap-1\.5.w-\[132px\] button.col-span-2,
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) .grid.grid-cols-3.gap-1\.5.w-\[132px\] button.col-span-3{
    width:auto !important;
    min-width:52px !important;
    padding:0 8px !important;
  }

  /* Tab dan kolom cari dibuat sedikit lebih hemat tinggi. */
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) > .flex.gap-2.border-b,
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) > .flex.gap-2.border-b{
    gap:5px !important;
    padding-bottom:6px !important;
  }
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) > .flex.gap-2.border-b button,
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) > .flex.gap-2.border-b button{
    padding:7px 10px !important;
    font-size:11px !important;
    border-radius:10px 10px 6px 6px !important;
  }
  #root .space-y-6:has(input[placeholder*="Nama/NIP Guru"]) input[placeholder*="Nama/NIP Guru"],
  #root .space-y-6:has(input[placeholder*="NIP Santri"]) input[placeholder*="NIP Santri"]{
    min-height:42px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
    border-radius:16px !important;
    font-size:12px !important;
  }
}

/* =========================================================
   WEBSITE PUBLIK — ADMIN/SUPERADMIN VISUAL FIX
   Pure UI only. No business logic touched.
   ========================================================= */
#root .public-news-form-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  justify-content:flex-end!important;
  align-items:center!important;
  padding-top:4px!important;
}
#root .public-btn{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:38px!important;
  padding:9px 14px!important;
  border-radius:12px!important;
  border:1px solid rgba(15,118,87,.16)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:800!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:.18s ease!important;
  box-shadow:0 5px 14px rgba(15,23,42,.05)!important;
}
#root .public-btn:hover{transform:translateY(-1px)!important;box-shadow:0 8px 18px rgba(15,23,42,.08)!important;}
#root .public-btn-primary{background:#0f9f74!important;color:#fff!important;border-color:#0f9f74!important;}
#root .public-btn-secondary{background:#fff!important;color:#334155!important;border-color:#dbe5e1!important;}
#root .public-btn-warning{background:#fff8e8!important;color:#a16207!important;border-color:#f8df9c!important;}
#root .public-btn-danger{background:#fff1f2!important;color:#be123c!important;border-color:#fecdd3!important;}
#root .public-btn-link{background:#eef8ff!important;color:#075985!important;border-color:#bae6fd!important;}

#root .public-news-summary{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
#root .public-news-summary-card{
  min-width:0!important;
  background:#fff!important;
  border:1px solid #e4ece9!important;
  border-radius:16px!important;
  padding:13px 15px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  box-shadow:0 7px 18px rgba(15,23,42,.045)!important;
}
#root .public-news-summary-card strong{
  font-size:22px!important;
  line-height:1!important;
  color:#334155!important;
}
#root .public-news-summary-card span{
  font-size:11px!important;
  line-height:1.25!important;
  color:#64748b!important;
  font-weight:800!important;
}
#root .public-news-summary-card.pending{background:#fffaf0!important;border-color:#fde6ae!important;}
#root .public-news-summary-card.published{background:#f1fbf7!important;border-color:#bcebd8!important;}
#root .public-news-summary-card.rejected{background:#fff5f5!important;border-color:#fecaca!important;}

#root .public-kicker{
  display:block!important;
  color:#0f8f6a!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
  margin-bottom:3px!important;
}
#root .public-count-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:#edf8f4!important;
  color:#0b7a5b!important;
  font-size:10px!important;
  font-weight:900!important;
  border:1px solid #cdebe0!important;
}

#root .public-approval-box,
#root .public-news-panel{
  background:#fff!important;
  border:1px solid #dfe9e5!important;
  border-radius:20px!important;
  box-shadow:0 10px 24px rgba(15,23,42,.05)!important;
  overflow:hidden!important;
}
#root .public-approval-head,
#root .public-news-panel-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:15px 17px!important;
  border-bottom:1px solid #edf2f0!important;
  background:linear-gradient(180deg,#ffffff,#fbfdfc)!important;
}
#root .public-approval-head h3,
#root .public-news-panel-head h3{
  margin:0!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:900!important;
  color:#1f2937!important;
}
#root .public-approval-list,
#root .public-news-list{
  display:grid!important;
  gap:0!important;
}
#root .public-approval-item,
#root .public-news-row{
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr)!important;
  gap:15px!important;
  align-items:start!important;
  padding:15px 17px!important;
  border-bottom:1px solid #edf2f0!important;
  background:#fff!important;
}
#root .public-approval-item:last-child,
#root .public-news-row:last-child{border-bottom:none!important;}
#root .public-approval-thumb,
#root .public-news-cover{
  width:150px!important;
  height:96px!important;
  max-width:150px!important;
  max-height:96px!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:13px!important;
  border:1px solid #e5ebe8!important;
  display:block!important;
  background:#f4f7f6!important;
}
#root .public-news-placeholder{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#94a3b8!important;
  font-size:26px!important;
}
#root .public-approval-content,
#root .public-news-main{
  min-width:0!important;
}
#root .public-news-meta{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-bottom:6px!important;
  font-size:10px!important;
  color:#64748b!important;
  font-weight:700!important;
}
#root .public-status{
  display:inline-flex!important;
  align-items:center!important;
  min-height:23px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1!important;
}
#root .public-status.draft{background:#f1f5f9!important;color:#475569!important;}
#root .public-status.pending{background:#fff4d6!important;color:#9a6700!important;}
#root .public-status.published{background:#dcfce7!important;color:#166534!important;}
#root .public-status.rejected{background:#fee2e2!important;color:#b91c1c!important;}
#root .public-approval-content h4,
#root .public-news-main h4{
  margin:0 0 5px!important;
  font-size:15px!important;
  line-height:1.3!important;
  font-weight:900!important;
  color:#172033!important;
  overflow-wrap:anywhere!important;
}
#root .public-approval-content p,
#root .public-news-summary-text{
  margin:0!important;
  font-size:11px!important;
  line-height:1.5!important;
  color:#64748b!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
#root .public-rejection-note{
  margin:7px 0 0!important;
  padding:7px 9px!important;
  border-radius:10px!important;
  background:#fff3f3!important;
  color:#9f1239!important;
  font-size:10px!important;
  font-weight:700!important;
}
#root .public-news-actions{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:10px!important;
}
#root .public-news-actions .public-btn{
  min-height:32px!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  font-size:10px!important;
  box-shadow:none!important;
}
#root .public-empty{
  padding:24px!important;
  text-align:center!important;
  color:#94a3b8!important;
  font-size:12px!important;
}

/* Prevent media previews inside Website Publik management from ever expanding full-screen. */
#root .public-news-panel img,
#root .public-approval-box img{
  width:150px!important;
  height:96px!important;
  max-width:150px!important;
  object-fit:cover!important;
}

@media (max-width: 820px){
  #root .public-news-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  #root .public-news-summary-card{padding:10px 11px!important;border-radius:14px!important;}
  #root .public-news-summary-card strong{font-size:18px!important;}
  #root .public-approval-head,
  #root .public-news-panel-head{padding:12px 13px!important;align-items:flex-start!important;}
  #root .public-approval-head h3,
  #root .public-news-panel-head h3{font-size:13px!important;}
  #root .public-approval-item,
  #root .public-news-row{
    grid-template-columns:104px minmax(0,1fr)!important;
    gap:10px!important;
    padding:11px 12px!important;
  }
  #root .public-approval-thumb,
  #root .public-news-cover,
  #root .public-news-panel img,
  #root .public-approval-box img{
    width:104px!important;
    height:76px!important;
    max-width:104px!important;
    max-height:76px!important;
    border-radius:11px!important;
  }
  #root .public-approval-content h4,
  #root .public-news-main h4{font-size:12px!important;}
  #root .public-approval-content p,
  #root .public-news-summary-text{font-size:10px!important;-webkit-line-clamp:2!important;}
  #root .public-news-actions{gap:5px!important;margin-top:7px!important;}
  #root .public-news-actions .public-btn{min-height:29px!important;padding:6px 8px!important;font-size:9px!important;border-radius:9px!important;}
  #root .public-news-form-actions{justify-content:stretch!important;}
  #root .public-news-form-actions .public-btn{flex:1 1 150px!important;}
}

@media (max-width: 480px){
  #root .public-approval-item,
  #root .public-news-row{grid-template-columns:88px minmax(0,1fr)!important;gap:9px!important;}
  #root .public-approval-thumb,
  #root .public-news-cover,
  #root .public-news-panel img,
  #root .public-approval-box img{width:88px!important;height:68px!important;max-width:88px!important;max-height:68px!important;}
  #root .public-count-badge{padding:5px 8px!important;font-size:9px!important;}
}

/* TAHAP 13: opsi ukuran tampilan kini hanya Kecil/Besar. */
.simda-setting-options.simda-size-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.simda-settings-help{display:block;margin-top:6px;font-size:9px;line-height:1.35;color:#64748b;font-weight:700;}
html.simda-dark .simda-settings-help{color:#9bb6ac!important;}