/* ==========================================================================
   SiKomit — lapisan tampilan Website (desktop), Fase 1: kerangka
   --------------------------------------------------------------------------
   ATURAN KERAS:
   1. Setiap aturan berada di bawah penanda html[data-tampilan="web"].
      Penanda hanya ditulis untuk browser (APK Android selalu "hp").
   2. Aturan tampilan berada di dalam @media (min-width:1024px).
      Di bawah 1024px browser tetap memakai tata letak lama.
   3. Tidak ada selektor elemen telanjang (button, input, h2, ...).
      Semua selektor menyebut elemen lewat kelas atau id milik tampilan Web.
   4. Tidak ada !important kecuali untuk menimpa gaya inline lama.
   ========================================================================== */

/* Penjaga anti-kedip: elemen kerangka Web disembunyikan sebelum media aktif. */
html[data-tampilan="web"] #web-side,
html[data-tampilan="web"] #web-top,
html[data-tampilan="web"] #web-foot { display: none; }

@media (min-width: 1024px) {

  /* ===== DASAR HALAMAN ===== */
  html[data-tampilan="web"] body { background: #eef2f7; }
  html[data-tampilan="web"] #phone {
    max-width: none; min-height: 100vh; padding-bottom: 0;
    background: #eef2f7; box-shadow: none;
  }
  html[data-tampilan="web"] #hdr { display: none; }   /* diganti bilah atas Web */
  html[data-tampilan="web"] #nav { display: none; }   /* navigasi pindah ke sidebar */

  /* Kerangka: sidebar kiri tetap, bilah atas + konten + footer menggulir. */
  html[data-tampilan="web"] #app {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "side top"
      "side off"
      "side main"
      "side foot";
    align-items: start;
    min-height: 100vh;
  }
  html[data-tampilan="web"] #app.web-mini { grid-template-columns: 84px minmax(0, 1fr); }
  html[data-tampilan="web"] #offlineBar { grid-area: off; }
  html[data-tampilan="web"] main { grid-area: main; min-width: 0; padding: 0 0 30px; }
  html[data-tampilan="web"] main > section {
    max-width: 1440px; margin: 0 auto; padding: 12px 0 28px;
  }

  /* ===== SIDEBAR ===== */
  html[data-tampilan="web"] #web-side {
    grid-area: side;
    position: sticky; top: 0; align-self: start;
    height: 100vh; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #0d3a59 0%, #0a2c45 55%, #082539 100%);
    color: #e6f0f8; overflow: hidden; z-index: 30;
    box-shadow: 1px 0 0 rgba(255,255,255,.06) inset, 4px 0 24px rgba(9,30,48,.10);
  }
  html[data-tampilan="web"] .ws-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 18px 14px; min-height: 78px; flex-shrink: 0;
  }
  html[data-tampilan="web"] .ws-brand img {
    width: 42px; height: 42px; border-radius: 12px; background: #fff;
    padding: 5px; object-fit: contain; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
  }
  html[data-tampilan="web"] .ws-brand b {
    display: block; font-size: 1.05rem; font-weight: 900; letter-spacing: -.01em; line-height: 1.15;
  }
  html[data-tampilan="web"] .ws-brand span {
    display: block; font-size: .66rem; font-weight: 600; color: #9dbdd4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
  }
  html[data-tampilan="web"] .ws-menu {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 3px;
  }
  html[data-tampilan="web"] .ws-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    background: none; border: 0; border-radius: 11px; padding: 10px 12px;
    color: #cfe2f0; font: inherit; font-size: .88rem; font-weight: 700;
    text-align: left; cursor: pointer; position: relative;
    box-shadow: none; filter: none;
    transition: background .15s ease, color .15s ease;
  }
  html[data-tampilan="web"] .ws-item:hover { background: rgba(255,255,255,.07); color: #fff; filter: none; }
  html[data-tampilan="web"] .ws-item:focus-visible { outline: 2px solid #7cc4ee; outline-offset: 2px; }
  html[data-tampilan="web"] .ws-item[aria-current="page"] {
    background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
    color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  }
  html[data-tampilan="web"] .ws-item[aria-current="page"]::before {
    content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
    border-radius: 3px; background: var(--or, #e0862e);
  }
  html[data-tampilan="web"] .ws-ico { display: inline-flex; flex-shrink: 0; opacity: .92; }
  html[data-tampilan="web"] .ws-ico svg.ic { width: 20px; height: 20px; vertical-align: 0; }
  html[data-tampilan="web"] .ws-lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-tampilan="web"] .ws-dot {
    margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px;
    background: var(--or, #e0862e); color: #2b1602; font-size: .66rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center; padding: 0 6px;
  }
  /* Submenu (mis. Penyelesaian) */
  html[data-tampilan="web"] .ws-sub {
    display: none; flex-direction: column; gap: 2px;
    margin: 2px 0 4px 32px; padding: 2px 0 2px 10px;
    border-left: 1px solid rgba(255,255,255,.16);
  }
  html[data-tampilan="web"] .ws-sub.open { display: flex; }
  html[data-tampilan="web"] .ws-subitem {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: 0; border-radius: 9px; padding: 7px 10px;
    color: #a9c7dc; font: inherit; font-size: .8rem; font-weight: 600;
    text-align: left; cursor: pointer; box-shadow: none; filter: none;
  }
  html[data-tampilan="web"] .ws-subitem:hover { background: rgba(255,255,255,.06); color: #eaf4fb; filter: none; }
  html[data-tampilan="web"] .ws-sublb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-tampilan="web"] .ws-subitem.on { background: rgba(255,255,255,.12); color: #fff; font-weight: 800; }
  html[data-tampilan="web"] .ws-subitem svg.ic { width: 15px; height: 15px; vertical-align: 0; flex-shrink: 0; }
  html[data-tampilan="web"] .ws-subitem b {
    margin-left: auto; font-size: .68rem; font-weight: 900; color: #9fc0d6;
  }
  html[data-tampilan="web"] .ws-subitem.on b { color: #fff; }

  html[data-tampilan="web"] .ws-foot {
    flex-shrink: 0; display: flex; align-items: center; gap: 8px;
    padding: 12px 16px 16px; border-top: 1px solid rgba(255,255,255,.10);
  }
  html[data-tampilan="web"] .ws-ver { font-size: .68rem; font-weight: 700; color: #8fb2c9; letter-spacing: .02em; }
  html[data-tampilan="web"] .ws-mini {
    margin-left: auto; width: 32px; height: 32px; border-radius: 9px; padding: 0;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    color: #dbecf7; display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: none; filter: none;
  }
  html[data-tampilan="web"] .ws-mini:hover { background: rgba(255,255,255,.16); filter: none; }
  html[data-tampilan="web"] .ws-mini svg { width: 16px; height: 16px; }

  /* Sidebar ringkas (collapse) */
  html[data-tampilan="web"] #app.web-mini .ws-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  html[data-tampilan="web"] #app.web-mini .ws-brand div { display: none; }
  html[data-tampilan="web"] #app.web-mini .ws-item { justify-content: center; padding: 11px 0; }
  html[data-tampilan="web"] #app.web-mini .ws-lb,
  html[data-tampilan="web"] #app.web-mini .ws-dot,
  html[data-tampilan="web"] #app.web-mini .ws-sub { display: none; }
  html[data-tampilan="web"] #app.web-mini .ws-foot { flex-direction: column; padding: 10px 0 14px; }
  html[data-tampilan="web"] #app.web-mini .ws-ver { display: none; }
  html[data-tampilan="web"] #app.web-mini .ws-mini { margin: 0; }

  /* ===== BILAH ATAS ===== */
  html[data-tampilan="web"] #web-top {
    grid-area: top; position: sticky; top: 0; z-index: 25;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 74px; padding: 10px 28px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #e1e8f0;
  }
  html[data-tampilan="web"] .wt-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
  html[data-tampilan="web"] .wt-burger {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; padding: 0;
    background: #fff; border: 1px solid #dbe4ee; color: #33506a;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: none; filter: none;
  }
  html[data-tampilan="web"] .wt-burger:hover { background: #f1f7fc; border-color: #bcd8ea; filter: none; }
  html[data-tampilan="web"] .wt-burger svg { width: 18px; height: 18px; }
  html[data-tampilan="web"] .wt-title {
    font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em;
    color: #142433; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-tampilan="web"] .wt-crumb {
    font-size: .71rem; font-weight: 700; color: #74879a; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-tampilan="web"] .wt-crumb b { color: #2e7fb4; font-weight: 800; }
  html[data-tampilan="web"] .wt-crumb .sep { margin: 0 2px; color: #b6c3d0; }
  html[data-tampilan="web"] .wt-right { display: flex; align-items: center; gap: 10px; position: relative; }
  html[data-tampilan="web"] .wt-bell {
    position: relative; width: 40px; height: 40px; border-radius: 50%; padding: 0;
    background: #f3f7fb; border: 1px solid #e1e9f1; color: #33506a;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: none; filter: none;
  }
  html[data-tampilan="web"] .wt-bell:hover { background: #e9f3fb; filter: none; }
  html[data-tampilan="web"] .wt-bell svg.ic { width: 19px; height: 19px; vertical-align: 0; }
  html[data-tampilan="web"] .wt-badge {
    position: absolute; top: 1px; right: -1px; min-width: 17px; height: 17px;
    border-radius: 9px; background: #c22f2f; color: #fff; font-size: .6rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
    border: 2px solid #fff;
  }
  html[data-tampilan="web"] .wt-user {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    background: #f5f9fc; border: 1px solid #e1e9f1; border-radius: 999px;
    padding: 4px 14px 4px 4px; color: #1d2c3b;
    box-shadow: none; filter: none;
  }
  html[data-tampilan="web"] .wt-user:hover { background: #edf5fb; border-color: #cfe1ee; filter: none; }
  html[data-tampilan="web"] .wt-ava {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--g, #2e97d3), var(--gd, #1b6fa8));
    color: #fff; font-size: .8rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
  }
  html[data-tampilan="web"] .wt-uname {
    display: block; font-size: .8rem; font-weight: 800; line-height: 1.15;
    max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-tampilan="web"] .wt-urole {
    display: block; font-size: .62rem; font-weight: 800; color: #7b8d9f;
    text-transform: uppercase; letter-spacing: .06em; margin-top: 1px;
  }
  html[data-tampilan="web"] .wt-caret { width: 14px; height: 14px; color: #7b8d9f; flex-shrink: 0; }
  html[data-tampilan="web"] .wt-drop {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
    min-width: 246px; background: #fff; border: 1px solid #e1e8f0; border-radius: 14px;
    box-shadow: 0 20px 44px rgba(16,32,48,.18); padding: 7px;
  }
  html[data-tampilan="web"] .wt-drop-head {
    padding: 9px 11px 10px; border-bottom: 1px solid #eef2f6; margin-bottom: 6px;
  }
  html[data-tampilan="web"] .wt-drop-head b { display: block; font-size: .84rem; color: #16283a; }
  html[data-tampilan="web"] .wt-drop-head span { display: block; font-size: .7rem; color: #7b8d9f; font-weight: 600; margin-top: 1px; }
  html[data-tampilan="web"] .wt-drop button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: 0; border-radius: 9px; padding: 9px 11px;
    font: inherit; font-size: .82rem; font-weight: 700; color: #29404f;
    text-align: left; cursor: pointer; box-shadow: none; filter: none;
  }
  html[data-tampilan="web"] .wt-drop button:hover { background: #f1f7fc; filter: none; }
  html[data-tampilan="web"] .wt-drop button.danger { color: #b3261e; }
  html[data-tampilan="web"] .wt-drop button.danger:hover { background: #fdeeee; }
  html[data-tampilan="web"] .wt-drop svg.ic { width: 16px; height: 16px; vertical-align: 0; opacity: .85; }

  /* ===== FOOTER ===== */
  html[data-tampilan="web"] #web-foot {
    grid-area: foot; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 96px 14px 30px;
    background: #fff; border-top: 1px solid #e1e8f0;
    color: #7b8d9f; font-size: .73rem; font-weight: 600;
  }
  html[data-tampilan="web"] #web-foot b { color: #33506a; font-weight: 800; }

  /* ===== FASE 2: BILAH PENCARIAN & FILTER ===== */
  /* Menempel tepat di bawah bilah atas (74px), bukan di bawah 0px. */
  html[data-tampilan="web"] .tools {
    top: 74px; z-index: 14; gap: 10px;
    padding: 10px 18px;
    background: rgba(238, 242, 247, .94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #dde5ee;
  }
  /* Bilah yang memang tidak lengket (Beranda/Rekap) tetap datar. */
  html[data-tampilan="web"] .tools.nosticky {
    position: static; background: transparent; border-bottom: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  /* Kolom pencarian: ikon kaca pembesar digambar lewat latar, tanpa ubah markup. */
  html[data-tampilan="web"] .tools input[type="search"] {
    flex: 1 1 300px; max-width: 430px;
    padding: 9px 13px 9px 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8d9f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 13px center; background-size: 16px 16px;
    background-color: #fff;
  }
  html[data-tampilan="web"] .tools select {
    flex: 0 1 auto; min-width: 138px; max-width: 230px;
    padding: 9px 12px;
  }
  html[data-tampilan="web"] .tools .count {
    padding: 5px 11px; border-radius: 999px;
    background: #e3ebf3; color: #40566a;
  }
  /* Hitungan kosong (mis. Beranda tanpa filter) tidak menyisakan pil abu-abu. */
  html[data-tampilan="web"] .tools .count:empty { display: none; }
  /* Penyelesaian: chip sub-tab ikut lengket bersama kolom cari/filter. */
  html[data-tampilan="web"] #selesai-filt {
    top: 74px; z-index: 14;
    padding: 8px 18px 10px;
    background: rgba(238, 242, 247, .96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #dde5ee;
  }
  html[data-tampilan="web"] #selesai-filt .pjchips { gap: 8px; margin-bottom: 8px; }
  html[data-tampilan="web"] #selesai-filt .tools {
    padding: 0; margin: 0; background: transparent;
    border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  }

  /* ===== FASE 2: DAFTAR DATA SEBAGAI KISI DESKTOP ===== */
  /* Daftar tetap kartu yang sama; hanya disusun beberapa kolom agar tidak melebar. */
  html[data-tampilan="web"] :is(#feed, #k-list, #m-list, #p-list, #progres-list, #bulan-list,
    #selesai-berjalan, #selesai-list, #belum-undangan, #selesai-sudah, #w-list, #audit-list) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; padding: 12px 14px 4px; align-items: start;
  }
  /* Daftar dengan isi lebih panjang (foto/laporan/dokumen) cukup dua kolom. */
  html[data-tampilan="web"] :is(#laporan-list, #dok-saya-list, #riwayat-saya-list) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px; padding: 12px 14px 4px; align-items: start;
  }
  /* Kartu di dalam kisi tidak lagi memakai margin lama; jarak diatur gap. */
  html[data-tampilan="web"] :is(#feed, #k-list, #m-list, #p-list, #progres-list, #bulan-list,
    #selesai-berjalan, #selesai-list, #belum-undangan, #selesai-sudah, #w-list, #audit-list,
    #laporan-list, #dok-saya-list, #riwayat-saya-list) > .item,
  html[data-tampilan="web"] :is(#feed, #k-list, #m-list, #p-list, #progres-list, #bulan-list,
    #selesai-berjalan, #selesai-list, #belum-undangan, #selesai-sudah, #w-list, #audit-list,
    #laporan-list, #dok-saya-list, #riwayat-saya-list) > .card {
    margin: 0 !important;
    min-width: 0;
  }
  /* Tombol Muat N lagi membentang penuh, tetap di tengah — bukan satu sel kisi. */
  html[data-tampilan="web"] :is(#feed, #k-list, #m-list, #p-list, #progres-list, #bulan-list,
    #selesai-berjalan, #selesai-list, #belum-undangan, #selesai-sudah, #w-list, #audit-list,
    #laporan-list, #dok-saya-list, #riwayat-saya-list) > .loadmore {
    grid-column: 1 / -1;
    width: 100%; max-width: 420px;
    margin: 4px auto 8px;
  }
  html[data-tampilan="web"] :is(#feed, #k-list, #m-list, #p-list, #progres-list, #bulan-list,
    #selesai-berjalan, #selesai-list, #belum-undangan, #selesai-sudah, #w-list, #audit-list,
    #laporan-list, #dok-saya-list, #riwayat-saya-list) > .empty {
    grid-column: 1 / -1; margin: 0;
  }

  /* ===== PENYESUAIAN KOMPONEN DI KANVAS LEBAR ===== */
  html[data-tampilan="web"] .strow { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  html[data-tampilan="web"] .st,
  html[data-tampilan="web"] .st:nth-child(4),
  html[data-tampilan="web"] .st:nth-child(5) { grid-column: auto; }
  html[data-tampilan="web"] .strow.st4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-tampilan="web"] .card { border-radius: 16px; }
  html[data-tampilan="web"] .item { border-radius: 14px; }
  /* Tombol tambah melayang: menempel kanan bawah kanvas, bukan tengah layar. */
  html[data-tampilan="web"] .fab { right: 28px; bottom: 28px; }
  html[data-tampilan="web"] main > section > h2 { font-size: 1.16rem; }

  /* Login tetap di tengah, kartu sedikit lebih lega di layar besar. */
  html[data-tampilan="web"] .login-card { max-width: 430px; }
}

/* ===== FASE 2: KISI TIGA KOLOM PADA LAYAR LEBAR (≥1400px) ===== */
@media (min-width: 1400px) {
  html[data-tampilan="web"] :is(#feed, #k-list, #m-list, #p-list, #progres-list, #bulan-list,
    #selesai-berjalan, #selesai-list, #belum-undangan, #selesai-sudah, #w-list, #audit-list) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html[data-tampilan="web"] :is(#laporan-list, #dok-saya-list, #riwayat-saya-list) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}