/* =====================================================
   app.css — tema sejuk/teal-mint (GLOBAL)
   ===================================================== */
:root{
  --primary:#2CB1A1; --primary600:#159895; --surface:#E6FAF7; --mint:#A8E6CF;
  --text:#234545; --textHd:#0F2E2E; --success:#38A169; --danger:#E53E3E;
  --infoBg:#F4FEFD; --borderSoft:#D9F3EF;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--surface),#fff)}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:16px}
.card{background:#fff;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.06);padding:14px}
.tile{background:var(--surface);border:1px solid var(--borderSoft);border-radius:16px;padding:14px}
.tile .title{font-size:.9rem;opacity:.8}
.tile .value{font-size:1.8rem;font-weight:800;color:var(--primary600);line-height:1.2}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:899px){.grid-4{grid-template-columns:1fr 1fr}}

/* Appbar */
.appbar{position:sticky;top:0;z-index:10;background:linear-gradient(135deg,var(--primary600),var(--primary));color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.10)}
.appbar-inner{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand img.logo{width:36px;height:36px;object-fit:contain;border-radius:8px;background:#ffffff22}
.brand .name{font-weight:800;letter-spacing:.3px}

/* Page title */
.page-title{margin:10px auto 0;max-width:1100px;padding:8px 16px;color:#0E3A39}
.page-title h1{font-size:1.2rem;margin:10px 0 0 0}
@media(min-width:900px){.page-title h1{font-size:1.4rem}}

/* Form & Button */
.select,.input,.btn{padding:10px 12px;border-radius:10px;border:1px solid var(--borderSoft);background:#fff;color:var(--text)}
.btn{font-weight:700;cursor:pointer}
.btn-primary{background:var(--primary600);color:#fff;border:0}
.btn-outline{background:#fff;color:var(--primary600);border:2px solid var(--primary600)}

/* Badge/List/Table */
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.8rem;font-weight:700}
.badge-success{background:#e8f7ee;color:var(--success)}
.badge-danger{background:#fde8e8;color:var(--danger)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.item{padding:10px 12px;background:var(--infoBg);border-radius:12px;display:flex;justify-content:space-between;align-items:center}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 8px;border-bottom:1px solid #eef2f2;text-align:left}

/* Hero / Footer */
.hero{background:linear-gradient(135deg,var(--primary600),var(--primary));color:#fff;border-radius:20px;padding:22px 18px;margin-bottom:16px}
.hero h1{margin:0 0 6px 0;font-size:1.3rem;line-height:1.25}
.hero p{margin:4px 0 0 0;opacity:.95}
.footer{margin-top:20px;padding:12px 0;color:#2a5b5a;background:#f7fffd;border-top:1px solid #def3f0}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Header actions (user chip + dropdown) */
.header-actions{position:relative;display:flex;align-items:center;gap:10px}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--borderSoft);box-shadow:0 4px 12px rgba(0,0,0,.06);cursor:pointer;transition:all .15s ease}
.user-chip:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.user-chip .avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ecfffb;color:#0f6d66;font-weight:800}
.user-name{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown{position:absolute;right:0;top:52px;min-width:240px;display:none;background:#fff;border-radius:16px;padding:10px;border:1px solid var(--borderSoft);box-shadow:0 16px 40px rgba(0,0,0,.12);z-index:20}
.dropdown.show{display:block}
.menu-group{padding:6px 0 10px 0}
.menu-title{font-size:.78rem;letter-spacing:.3px;text-transform:uppercase;color:#5a7777;margin:4px 8px}
.menu-list{display:flex;flex-direction:column;gap:6px}
.menu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none;transition:background .15s ease;border:1px solid transparent}
.menu-item:hover{background:var(--surface);border-color:var(--borderSoft)}
.menu-item .ic{width:20px;display:inline-flex;align-items:center;justify-content:center;opacity:.85}
@media (max-width:640px){.user-name{max-width:90px}}

/* ==== Auth page ==== */
.auth-wrap{max-width:420px;margin:18px auto}
.auth-card{border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.08);padding:16px 16px 12px}
.auth-card h2{margin:0 0 8px 0;color:var(--textHd)}
.field{display:flex;flex-direction:column;gap:6px}
.auth-card .input{width:100%;display:block}
.auth-actions{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.auth-link{display:inline-block;color:#159895;text-decoration:none;font-weight:600}
.auth-link:hover{text-decoration:underline}

/* ==== Toggle Ya/Tidak ==== */
.tg{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--borderSoft);border-radius:999px;padding:4px;user-select:none}
.tg .op{padding:6px 12px;border-radius:999px;font-weight:700;cursor:pointer;border:0;background:transparent;color:var(--text)}
.tg .op.on{background:#e8f7ee;color:#2f855a;border:1px solid #bfead0}
.tg .op.off{background:#ffecec;color:#c53030;border:1px solid #fecaca}

/* ==== Tombol Mode Salat ==== */
.mode-wrap{display:inline-flex;gap:8px}
.mode-btn{padding:6px 10px;border-radius:10px;border:1px solid var(--borderSoft);background:#fff;color:var(--text);cursor:pointer;font-weight:700;transition:all .15s ease}
.mode-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.mode-btn.sel-b{background:#e8f7ee;color:#2f855a;border-color:#bfead0}
.mode-btn.sel-m{background:#eef2ff;color:#3730a3;border-color:#cfd7ff}
.mode-btn.disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Pastikan teks tabel jelas */
.table td, .table th{color:var(--text)}
/* ====== Responsif khusus Portal Siswa (input jurnal) ====== */

/* 0) Jika sangat sempit, izinkan scroll-x halus agar tidak mepet */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive .table { min-width: 540px; } /* fallback minimal */

@media (max-width: 576px) {

  /* 1) Stack table -> tiap TR menjadi kartu vertikal */
  .table.stack-mobile thead {
    display: none;     /* sembunyikan header */
  }
  .table.stack-mobile tbody,
  .table.stack-mobile tr,
  .table.stack-mobile td {
    display: block;
    width: 100%;
  }

  .table.stack-mobile tr {
    background:#fff;
    border:1px solid #eef2f2;
    border-radius:14px;
    padding:10px 12px;
    margin-bottom:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
  }

  /* 2) Spasi antar baris di dalam kartu */
  .table.stack-mobile td {
    border:0;
    padding:8px 6px;
  }

  /* 3) Munculkan label kolom di depan nilai (pakai data-label dari HTML) */
  .table.stack-mobile td::before {
    content: attr(data-label);
    display:inline-block;
    min-width: 110px;     /* lebar label */
    font-weight:700;
    color:var(--textHd);
    margin-right:8px;
  }

  /* 4) Khusus sel Kegiatan: tampilkan judul lebih menonjol, 1 baris sendiri */
  .table.stack-mobile td[data-label="Kegiatan"] {
    padding-bottom:4px;
    font-weight:800; color:var(--textHd);
  }
  .table.stack-mobile td[data-label="Kegiatan"]::before {
    content:""; display:none;  /* label tidak perlu diulang untuk Kegiatan */
  }

  /* 5) Toggle & tombol mode: renggang dan mudah diketuk */
  .tg { padding:5px; }
  .tg .op { padding:8px 14px; font-size:14px; }

  .mode-wrap { gap:10px; }
  .mode-btn { padding:8px 12px; font-size:14px; }
}

/* Sedikit ruang di bawah agar tidak berhimpit dengan footer */
/* ===== Hilangkan "Mode Salat" pada baris non-sholat di mobile stack ===== */
@media (max-width: 576px) {
  /* Pada baris tanpa mode, sembunyikan sel ke-3 dan labelnya */
  .table.stack-mobile tr.no-mode td[data-label="Mode Salat"] {
    display: none;
  }
}

/* === PATCH: responsif grid KPI di HP === */
@media (max-width: 640px) {
  .grid.grid-2 { grid-template-columns: 1fr; }
}