/* ==========================================================================
   tata-letak.css - kerangka halaman: menu samping, bilah atas, area isi,
   judul halaman, dan grid. Lihat layouts/app.blade.php.
   ========================================================================== */

/* ---------- Kerangka ---------- */
.shell { display: flex; min-height: 100vh; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.isi-halaman { width: 100%; max-width: 1320px; padding: 24px 32px 48px; }

/* ---------- Menu samping ---------- */
.sidebar {
  width: var(--lebar-samping); flex: 0 0 var(--lebar-samping);
  background: var(--samping); color: var(--samping-teks);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand { display: flex; gap: 10px; align-items: center; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); text-decoration: none; }
.sidebar .brand .logo-kecil { width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .1); flex: 0 0 36px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-weight: 700; }
.sidebar .brand .logo-kecil img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sidebar .brand-teks { min-width: 0; }
.sidebar .brand strong { display: block; color: #fff; font-size: 14px; line-height: 1.25; font-weight: 600; }
.sidebar .brand small { display: block; font-size: 12px; color: var(--samping-teks); opacity: .8; }
.sidebar nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px 16px; }
.sidebar .grp { padding: 16px 10px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .45); }
.sidebar a.item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 0; border-radius: var(--radius-kecil);
  color: var(--samping-teks); text-decoration: none; font-size: 13.5px;
}
.sidebar a.item .ikon { flex: 0 0 18px; opacity: .8; }
.sidebar a.item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar a.item.active { background: var(--samping-aktif); color: #fff; font-weight: 600; }
.sidebar a.item.active .ikon { opacity: 1; }
.sidebar a.item.utama { background: rgba(255, 255, 255, .06); margin-bottom: 4px; }
.sidebar a.item.utama.active { background: var(--samping-aktif); }
.sidebar .badge { margin-left: auto; font-size: 10.5px; background: rgba(255, 255, 255, .14); padding: 0 7px; border-radius: 9px; white-space: nowrap; }

/* ---------- Kelompok menu yang bisa dilipat (Revisi 6.3) ---------- */
.sidebar .grp { display: flex; width: 100%; align-items: center; justify-content: space-between; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
.sidebar .grp { padding: 16px 10px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .45); }
.sidebar .grp:hover { color: rgba(255, 255, 255, .8); }
.sidebar .grp .ikon { transition: transform .15s; opacity: .8; }
.sidebar .grp-wadah.terlipat .grp .ikon { transform: rotate(-90deg); }
.sidebar .grp-wadah.terlipat .grp-isi { display: none; }
.sidebar .grp-wadah.terlipat .grp { padding-bottom: 8px; }

/* ---------- Kaki menu: tombol ciutkan (desktop) ---------- */
.sidebar .kaki-samping { flex: 0 0 auto; padding: 8px 10px 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sidebar .tombol-ciut { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-kecil); background: none; color: var(--samping-teks); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.sidebar .tombol-ciut:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar .tombol-ciut .ikon { flex: 0 0 18px; transition: transform .2s; }

/* ---------- Menu ciut: ikon saja ---------- */
.sidebar { transition: width .2s ease, flex-basis .2s ease; }
.samping-ciut .sidebar { width: 64px; flex-basis: 64px; }
.samping-ciut .sidebar .brand { justify-content: center; padding: 14px 0 12px; }
.samping-ciut .sidebar .brand-teks,
.samping-ciut .sidebar a.item .label,
.samping-ciut .sidebar a.item .badge,
.samping-ciut .sidebar .tombol-ciut .label,
.samping-ciut .sidebar .grp span,
.samping-ciut .sidebar .grp .ikon { display: none; }
.samping-ciut .sidebar nav { padding: 8px 8px 16px; scrollbar-width: none; }
.samping-ciut .sidebar nav::-webkit-scrollbar { display: none; }
.samping-ciut .sidebar a.item { justify-content: center; padding: 10px 0; }
.samping-ciut .sidebar a.item .ikon { flex-basis: auto; opacity: .9; }
.samping-ciut .sidebar .grp { height: 1px; padding: 0; margin: 10px 8px; background: rgba(255, 255, 255, .12); cursor: default; pointer-events: none; }
.samping-ciut .sidebar .grp-wadah.terlipat .grp-isi { display: block; }
.samping-ciut .sidebar .kaki-samping { padding: 8px; }
.samping-ciut .sidebar .tombol-ciut { justify-content: center; padding: 10px 0; }
.samping-ciut .sidebar .tombol-ciut .ikon { transform: scaleX(-1); }
/* Nama menu yang muncul di samping ikon (diatur js/menu.js). */
.tip-menu { position: fixed; z-index: 300; transform: translateY(-50%); padding: 6px 10px; border-radius: 6px; background: #10231e; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); display: none; }
.tip-menu.tampil { display: block; }
.tip-menu::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: #10231e; }

/* ---------- Tampil hanya di ukuran layar tertentu ----------
   hanya-hp: <= 640px · hanya-tablet: <= 860px (HP & tablet) · hanya-desktop: > 860px */
.hanya-hp, .hanya-tablet { display: none !important; }
.tirai-menu { display: none; }
.nav-bawah { display: none; }

/* ---------- Bilah atas ---------- */
.bilah-atas {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  height: var(--tinggi-atas); padding: 0 32px;
  background: var(--panel); border-bottom: 1px solid var(--garis);
}
.bilah-atas .hari { font-weight: 600; white-space: nowrap; }
.bilah-atas .ta { font-size: 12.5px; color: var(--teks-redup); white-space: nowrap; }
.bilah-atas .ta a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--garis-kuat); }
.bilah-atas .ta.tertunda a { color: var(--awas); border-bottom-color: var(--awas); }
.bilah-atas .cari-atas { margin-left: auto; flex: 0 1 340px; position: relative; }
.bilah-atas .cari-atas .ikon { position: absolute; left: 11px; top: 9px; color: var(--teks-redup); pointer-events: none; }
.bilah-atas .cari-atas input { height: 36px; padding: 6px 12px 6px 34px; border-radius: 18px; background: var(--panel-redup); }
.bilah-atas .cari-atas input:focus { background: #fff; }
.bilah-atas .akun { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13px; }
.bilah-atas .akun .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-muda); color: var(--brand); font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
.bilah-atas .akun form { margin: 0; }
.bilah-atas .akun button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--garis-kuat); border-radius: var(--radius-kecil); padding: 5px 10px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--teks-redup); }
.bilah-atas .akun button:hover { color: var(--teks); border-color: var(--teks-redup); }
.bilah-atas .menu-toggle { display: none; }
.bilah-atas .cari-atas:only-child { margin-left: auto; }

/* Pita peringatan sistem di bawah bilah atas */
.pita { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 32px; font-size: 13.5px; border-bottom: 1px solid var(--garis); }
.pita.awas { background: var(--awas-muda); color: #5b3a05; border-bottom-color: #efd9a4; }
.pita.bahaya { background: var(--bahaya-muda); color: #7a1c14; border-bottom-color: #f1c4c0; }
.pita.info { background: var(--brand-muda); color: #194a3e; border-bottom-color: #c5e0d6; }
.pita > span { flex: 1 1 420px; }
.pita form { margin: 0; }

/* ---------- Judul halaman ---------- */
.kepala-halaman { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.kepala-halaman .judul { min-width: 0; flex: 1 1 420px; }
.kepala-halaman .judul p { margin: 3px 0 0; color: var(--teks-redup); max-width: 780px; }
.kepala-halaman .judul .jejak { font-size: 12.5px; color: var(--teks-redup); margin-bottom: 2px; }
.kepala-halaman .judul .jejak a { color: inherit; text-decoration: none; }
.kepala-halaman .judul .jejak a:hover { color: var(--brand); text-decoration: underline; }
.kepala-halaman .aksi { flex: 0 0 auto; }
.aksi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.balik { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; margin-bottom: 8px; text-decoration: none; color: var(--teks-redup); }
.balik:hover { color: var(--brand); }

/* ---------- Grid ---------- */
.grid { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.grid > * { flex: 1 1 300px; margin: 0 8px 16px; }
.grid > .lebar-penuh { flex-basis: 100%; }
.kolom-2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.kolom-2 > * { min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; }
.form-grid > div > label:first-child { margin-top: 8px; }
.form-grid .lebar { grid-column: 1 / -1; }
.form-grid select, .form-grid input:not([type=checkbox]):not([type=radio]) { width: 100%; }
.form-tombol { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.row2 { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.row2 > div { flex: 1 1 240px; padding: 0 6px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; }
.inline-form > div { margin-bottom: 8px; }
.inline-form label { margin: 0 0 4px; font-size: 12.5px; color: var(--teks-redup); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.toolbar-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.aksi-pilih { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }

/* ---------- Halaman tanpa menu (login, setup) ---------- */
.plain-wrap { max-width: 640px; margin: 0 auto; padding: 40px 16px; }
.plain-wrap.narrow { max-width: 400px; }
.plain-wrap .logo { text-align: center; margin-bottom: 20px; }
.plain-wrap .logo .tanda { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 14px; background: var(--brand); color: #fff; font-size: 24px; font-weight: 700; line-height: 52px; }
.plain-wrap .logo h1 { font-size: 20px; }
.plain-wrap .card { padding: 22px 24px; }
.code-box { font-family: Consolas, "Courier New", monospace; font-size: 24px; letter-spacing: .08em; text-align: center; background: #fff; border: 2px dashed var(--brand); padding: 16px; border-radius: var(--radius); margin: 14px 0; }

/* ---------- Layar kecil ---------- */
@media (max-width: 1100px) {
  .kolom-2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .shell { display: block; }
  .hanya-desktop { display: none !important; }
  .hanya-tablet { display: inline-flex !important; }
  .sidebar a.item.hanya-tablet { display: flex !important; }
  .sidebar a.item-teknisi { margin-top: 10px; background: rgba(37, 164, 90, .18); color: #d9f5e4; }
  .sidebar a.item-teknisi .ikon { opacity: 1; }
  .bilah-atas { padding: 0 12px; gap: 10px; height: auto; min-height: var(--tinggi-atas); flex-wrap: wrap; }
  .bilah-atas .ta, .bilah-atas .akun .nama { display: none; }
  .bilah-atas .cari-atas { order: 5; flex: 1 1 100%; margin: 0 0 8px; }
  .isi-halaman { padding: 16px; }
  .pita { padding: 8px 16px; }

  /* Menu = laci di bawah bilah atas (dan di atas bilah navigasi bawah di HP). */
  .sidebar, .samping-ciut .sidebar {
    position: fixed; z-index: 100; left: 0; top: var(--atas-laci, 0); bottom: var(--bawah-laci, 0); height: auto;
    width: 300px; max-width: 86vw; flex-basis: auto;
    transform: translateX(-102%); visibility: hidden;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .24s;
    box-shadow: 6px 0 24px rgba(0, 0, 0, .22); border-radius: 0 12px 12px 0;
  }
  .sidebar.open { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  /* Di laci, tampilan ciut desktop tidak berlaku. */
  .samping-ciut .sidebar .brand { justify-content: flex-start; padding: 16px 16px 14px; }
  .samping-ciut .sidebar .brand-teks, .samping-ciut .sidebar a.item .label, .samping-ciut .sidebar a.item .badge, .samping-ciut .sidebar .grp span, .samping-ciut .sidebar .grp .ikon { display: initial; }
  .samping-ciut .sidebar .grp { height: auto; padding: 16px 10px 6px; margin: 0; background: none; pointer-events: auto; cursor: pointer; }
  .samping-ciut .sidebar .grp-wadah.terlipat .grp-isi { display: none; }
  .samping-ciut .sidebar a.item { justify-content: flex-start; padding: 8px 10px; }
  .samping-ciut .sidebar nav { padding: 8px 10px 16px; }
  .sidebar a.item { padding: 11px 12px; font-size: 14.5px; }
  .tirai-menu { display: block; position: fixed; z-index: 90; left: 0; right: 0; top: var(--atas-laci, 0); bottom: var(--bawah-laci, 0); background: rgba(15, 25, 22, .45); opacity: 0; visibility: hidden; transition: opacity .24s, visibility 0s linear .24s; }
  .tirai-menu.tampil { opacity: 1; visibility: visible; transition: opacity .24s, visibility 0s; }
  body.menu-terbuka { overflow: hidden; }

  /* Tombol ☰ berubah menjadi ✕ selama laci terbuka. */
  [data-buka-menu] .ik-tutup { display: none; }
  [data-buka-menu][aria-expanded="true"] .ik-buka { display: none; }
  [data-buka-menu][aria-expanded="true"] .ik-tutup { display: inline-flex; }
  [data-buka-menu] .ik-buka, [data-buka-menu] .ik-tutup { align-items: center; justify-content: center; }
  .bilah-atas .menu-toggle[aria-expanded="true"] { background: var(--brand-muda); border-color: var(--brand-garis); color: var(--brand); }
}

@media (max-width: 640px) {
  .hanya-hp { display: inline-flex !important; }
  .hanya-tablet.menu-toggle { display: none !important; }

  /* Bilah navigasi bawah */
  .nav-bawah {
    display: flex !important; position: fixed; z-index: 110; left: 0; right: 0; bottom: 0;
    background: var(--panel); border-top: 1px solid var(--garis); box-shadow: 0 -4px 16px rgba(20, 40, 30, .06);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .nav-bawah a, .nav-bawah button {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 54px; padding: 4px 2px; border: 0; border-radius: 10px; background: none; color: var(--teks-redup);
    font: inherit; font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer;
  }
  .nav-bawah a.active, .nav-bawah button[aria-expanded="true"] { color: var(--brand); }
  .nav-bawah a.active .ikon, .nav-bawah button[aria-expanded="true"] .ikon { background: var(--brand-muda); border-radius: 12px; padding: 0 12px; width: 46px; box-sizing: content-box; }
  .nav-bawah a .ikon, .nav-bawah button .ikon { height: 26px; padding: 0 12px; box-sizing: content-box; }
  .nav-bawah span:not(.ik-buka):not(.ik-tutup) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav-bawah [data-buka-menu] { position: relative; }
  .nav-bawah .ik-buka, .nav-bawah .ik-tutup { line-height: 0; }
  body.ada-nav-bawah .isi-halaman { padding-bottom: 96px; }
  /* Saat mengetik, papan ketik HP memakan layar: bilah bawah disembunyikan. */
  body.mengetik .nav-bawah { display: none !important; }
}

@media print {
  .sidebar, .bilah-atas, .pita, .menu-toggle, .no-print, .aksi, .nav-bawah, .tirai-menu, .tip-menu { display: none !important; }
  .isi-halaman { padding: 0; max-width: none; }
  body { background: #fff; }
}
.bilah-atas .akun a.nama { color: inherit; text-decoration: none; }
.bilah-atas .akun a.nama:hover { text-decoration: underline; }