/* app-patches-2.css — potongan dari assets/app.css (dipecah 28 Jul 2026).
   Command Shell Home, Laporan Advance, viewer lampiran, petugas teknis, lokasi + ETA, presence.
   URUTAN <link> di index.html/admin-users.html/observability.html adalah KONTRAK:
   cascade CSS = urutan muat, blok bawah sengaja mengalahkan blok atas.
   Muat setelah app-patches-1.css, sebelum app-patches-3.css. */
/* ============================================================================
   FASE HOME — Tab Home mengadopsi Command Shell (kiblat Peta).
   Kontrak dijaga: id upcomingEventBar/todayWarnings/todayList + [data-open-add]
   + [data-home-*] tak berubah. Stats strip (.grid.stats) TETAP di posisi DOM
   lama (dipakai semua tab non-map) — hanya di-RESTYLE saat body.wide-view-active
   supaya serupa .cc-metric; tab lain masih melihat tampilan lama.
   ========================================================================== */
body.wide-view-active .grid.stats{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--ui-25);
  margin:0 0 14px;
}
body.wide-view-active .grid.stats .stat{
  min-height:88px;
  justify-content:center;
  gap:var(--ui-05);
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--panel) 86%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.wide-view-active .grid.stats .stat::before{display:none} /* orb glass lama tak dipakai di rupa metric */
body.wide-view-active .grid.stats .stat .stat-label{
  color:var(--muted);
  font-size:var(--fs-caption);
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;
}
body.wide-view-active .grid.stats .stat strong{
  margin:3px 0 1px;
  color:var(--ink);
  font-size:24px;
  line-height:1;
}
body.wide-view-active .grid.stats .stat .stat-icon{font-size:var(--fs-body)}
body.wide-view-active .grid.stats .stat.waiting{
  border-color:color-mix(in srgb,var(--warning) 34%,var(--line));
  background:color-mix(in srgb,var(--status-pending-bg) 28%,var(--panel));
}
[data-theme="dark"] body.wide-view-active .grid.stats .stat{box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}

/* Isi shell Home: ritme 14 antar blok; bar agenda-berikutnya rapat ke atas. */
#view-today .home-command-shell .upcoming-event-bar{margin:0 0 14px}
#view-today .home-command-shell #todayWarnings > *{margin-top:14px}
#view-today .home-command-shell .agenda-list{margin-top:14px}

/* ============================================================================
   FASE AGENDA — Tab Agenda mengadopsi Command Shell (kiblat Peta).
   Kontrak dijaga: seluruh id (agendaDate*, prev/today/nextAgendaDayBtn,
   searchInput/clearSearch, agendaSelect*, agendaList, agendaAssignBar,
   assignRecipient*) + data-filter + data-daily-swipe + data-scoped-create.
   Hanya restyle scoped #view-agenda; .chip/.searchbar global TIDAK disentuh.
   ========================================================================== */
#view-agenda .agenda-command-shell > .daily-report-card{margin-top:14px}
#view-agenda .daily-report-card .daily-date-controls .btn{min-height:var(--ctrl-h);margin:0}
#view-agenda #todayAgendaDayBtn{min-width:96px}
/* Searchbar -> rupa cc-search (struktur input+tombol Clear dipertahankan). */
#view-agenda .searchbar{
  display:flex;
  align-items:center;
  gap:var(--ui-2);
  margin-top:14px;
}
#view-agenda .searchbar input{
  flex:1 1 auto;
  min-width:0;
  min-height:var(--ctrl-h);
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-body);
}
#view-agenda .searchbar input:focus{
  outline:0;
  border-color:color-mix(in srgb,var(--accent) 58%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}
#view-agenda .searchbar .btn{min-height:var(--ctrl-h);margin:0;border-radius:var(--radius-control)}
/* Chip filter -> rupa cc-filter-group (chips tetap tombol lepas; dibungkus visual). */
#view-agenda .chip-row{
  display:flex;
  align-items:center;
  gap:5px;
  width:max-content;
  max-width:100%;
  overflow-x:auto;
  margin-top:14px;
  padding:var(--ui-05);
  border:1px solid var(--line);
  border-radius:var(--radius-inner);
  background:color-mix(in srgb,var(--panel) 78%,transparent);
}
#view-agenda .chip-row .chip{
  min-height:36px;
  flex:0 0 auto;
  margin:0;
  padding:0 var(--ui-3);
  border:0;
  border-radius:12px;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  font-size:var(--fs-label);
  font-weight:var(--fw-heavy);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#view-agenda .chip-row .chip:hover{color:var(--ink);background:color-mix(in srgb,var(--accent-soft) 35%,transparent)}
#view-agenda .chip-row .chip.active{
  background:var(--ink);
  color:var(--panel);
  box-shadow:0 6px 16px rgba(15,23,42,.15);
}
/* Ritme blok bawah + list */
#view-agenda .scoped-create-row{margin-top:14px}
#view-agenda #agendaSelectToolbar{margin-top:14px}
#view-agenda #agendaList{margin-top:14px !important} /* timpa inline style lama margin-top:12px */
#view-agenda #agendaAssignBar{margin-top:14px}
[data-theme="dark"] #view-agenda .searchbar input,
[data-theme="dark"] #view-agenda .chip-row{box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
@media (max-width:680px){
  #view-agenda .searchbar{flex-wrap:wrap}
  #view-agenda .chip-row{width:100%}
}

/* ============================================================================
   FASE KALENDER — Tab Kalender mengadopsi Command Shell (kiblat Peta).
   calendar-suite internal (Harian/Mingguan/Bulanan + grid) TIDAK disentuh —
   hanya dibingkai shell + ritme 14. Kontrak: openPresentationBtn, data-open-add,
   calendarSuite + seluruh id di dalam suite.
   ========================================================================== */
#view-calendar .calendar-command-shell > .calendar-suite{margin-top:14px}
#view-calendar .cc-header-side .btn{min-height:var(--ctrl-h)}

/* ============================================================================
   FASE INPUT + APPROVAL + TOOLS — tiga tab tersisa mengadopsi Command Shell.
   Isi masing-masing (input-command-strip, daily-report-card approval,
   grid kartu tools) TIDAK disentuh — hanya dibingkai shell + ritme 14.
   ========================================================================== */
#view-add .input-command-shell > *:not(.cc-shell-header):not(style):not(script){margin-top:14px}
#view-add .input-command-shell > .cc-shell-header{margin-top:0}
#view-approval .approval-command-shell > .daily-report-card{margin-top:14px}
#view-approval .daily-date-controls .btn{min-height:var(--ctrl-h);margin:0}
#view-approval #todayApprovalDayBtn{min-width:96px}
#view-approval .approval-command-shell > details,
#view-approval .approval-command-shell > #approvalList{margin-top:14px}
#view-more .tools-command-shell > .grid{margin-top:14px}
@media (max-width:680px){
  body.wide-view-active .grid.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  body.wide-view-active .grid.stats .stat{min-height:78px;padding:11px}
}

/* ============================================================
   REDESIGN "Hasil Check List" — worksheet bertumpuk + baris selaras
   (Jul 2026). CSS-only; render hanya menambah --cl-pct & de-dup owner.
   Semua hook data-* & fungsi checklist/mode-kerja DIPERTAHANKAN;
   yang berubah hanya tata letak, jarak, dan keterbacaan.
   Ruang lingkup terkunci ke blok hasil checklist (.checklist-category-*
   + .detail-brief-inline-work), tidak menyentuh tab lain.
   ============================================================ */

/* 1) Kategori: dari 4 kolom bersanding -> pita SELEBAR PENUH bertumpuk */
.checklist-category-grid{
  display:flex !important;
  flex-direction:column;
  gap:var(--ui-3);
}

/* 2) Band header kategori: aksen kiri + dot + ring progress + chevron */
.checklist-category-column{ position:relative; }
.checklist-category-head{ position:relative; padding-left:18px; gap:var(--ui-25); }
.checklist-category-head::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--category-color); border-radius:4px 0 0 4px;
}
/* nama mengisi ruang; dot warna kategori sebelum nama */
.checklist-category-head > span:first-of-type{ flex:1; display:inline-flex; align-items:center; gap:9px; }
.checklist-category-head > span:first-of-type::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--category-color); flex:0 0 auto;
}
/* penghitung jadi RING progress (busur = --cl-pct) */
.checklist-category-head strong{
  width:42px; height:42px; min-width:42px; min-height:42px; border-radius:50%;
  display:grid; place-items:center; font-size:var(--fs-caption); font-weight:var(--fw-heavy); color:#26313f;
  background:
    radial-gradient(closest-side, var(--category-tint) 74%, transparent 76%),
    conic-gradient(var(--category-color) var(--cl-pct,0%), color-mix(in srgb,var(--category-color) 16%, var(--panel)) 0) !important;
}
/* chevron buka/tutup di ujung kanan */
.checklist-category-head::after{
  content:"\203A"; margin-left:2px; flex:0 0 auto;
  font-size:19px; line-height:1; color:var(--category-color);
  transform:rotate(90deg); transition:transform .15s;
}
.checklist-category-column[open] > summary.checklist-category-head::after{ transform:rotate(-90deg); }

/* 2b) EDITOR MODE KERJA — SATU PANEL KOHESIF (bukan tumpukan kotak).
   Semua kontrol & hook data-* tetap; hanya presentasi. */
.detail-brief-inline-work{
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  background:color-mix(in srgb, var(--panel) 96%, var(--bg)) !important;
  box-shadow:none !important;
  padding:14px !important;
  margin-top:6px;
}
.detail-brief-inline-work .work-result-cell{ display:flex; flex-direction:column; gap:var(--ui-3); }
/* buang kotak kosong redundan "Belum ada ..." */
.detail-brief-inline-work .work-link-preview.is-missing,
.detail-brief-inline-work .work-result-note.is-missing{ display:none !important; }
/* fold editor diratakan; summary "Isi / update item" disembunyikan HANYA utk editor
   item UTAMA (data-work-edit-fold, sudah open). Sub-item grup (data-work-sub-fold)
   TETAP punya summary yang bisa diklik agar editornya bisa dibuka. */
.detail-brief-inline-work .work-edit-fold{ border:0 !important; background:transparent !important; overflow:visible !important; }
.detail-brief-inline-work .work-edit-fold[data-work-edit-fold] > summary{ display:none !important; }
/* sub-item grup: summary tetap tampil sebagai tombol buka yang rapi */
.detail-brief-inline-work .work-edit-fold[data-work-sub-fold] > summary{
  display:flex !important; color:var(--accent); font-size:12px; padding:7px 2px;
}
.detail-brief-inline-work .work-edit-body{ padding:0 !important; gap:12px; }

/* banner Menko (kalem) */
.menko-banner{
  display:flex; align-items:center; gap:var(--ui-2); font-size:var(--fs-label); color:#8a3a33;
  background:color-mix(in srgb, var(--check-menko-tint) 68%, var(--panel));
  border:1px solid var(--check-menko-border); border-radius:11px; padding:9px 12px;
}
.menko-banner b{ color:#8a3a33; }

/* lampiran terbaru + riwayat versi: netral, konsisten dengan panel */
.detail-brief-inline-work .menko-latest-file{
  border:1px solid var(--line) !important; border-radius:11px;
  background:color-mix(in srgb,var(--panel) 92%,var(--bg)) !important;
}
.detail-brief-inline-work .menko-version-history{
  border:1px solid var(--line) !important; border-radius:12px;
  background:color-mix(in srgb,var(--panel) 94%,var(--bg)) !important;
}
.detail-brief-inline-work .menko-version-history > summary{ font-size:var(--fs-label); color:var(--muted); font-weight:var(--fw-heavy); }
.detail-brief-inline-work .menko-version-row{ background:var(--panel) !important; border:1px solid var(--line); border-radius:10px; }

/* toggle NA & Summary Home -> SWITCH (bukan checkbox/kotak) */
.detail-brief-inline-work .work-na-toggle,
.detail-brief-inline-work .operational-home-toggle{
  border:0 !important; background:transparent !important; padding:0 !important; min-height:0 !important; gap:9px;
}
.detail-brief-inline-work .work-na-toggle span,
.detail-brief-inline-work .operational-home-toggle span{
  color:#3a4658 !important; font-size:12.5px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important;
}
.detail-brief-inline-work .work-na-toggle input[type=checkbox],
.detail-brief-inline-work .operational-home-toggle input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:38px; height:22px; min-height:22px; border-radius:99px;
  background:#cfd8e5; cursor:pointer; flex:0 0 auto; margin:0; transition:background .15s;
  background-image:radial-gradient(circle 8px at 11px 11px, #fff 96%, transparent 100%);
}
.detail-brief-inline-work .work-na-toggle input[type=checkbox]:checked,
.detail-brief-inline-work .operational-home-toggle input[type=checkbox]:checked{
  background:var(--check-ops,#1f9d55);
  background-image:radial-gradient(circle 8px at 27px 11px, #fff 96%, transparent 100%);
}

/* tab segmented bersih */
.detail-brief-inline-work .work-input-tabs{ gap:var(--ui-25); }
.detail-brief-inline-work .work-input-tab-buttons{
  border-bottom:0; gap:var(--ui-1); padding:3px; width:max-content; max-width:100%;
  background:color-mix(in srgb,var(--bg) 72%,transparent); border:1px solid var(--line); border-radius:11px;
}
.detail-brief-inline-work .work-input-tab-btn{ padding:7px 14px; border-radius:8px; }
.detail-brief-inline-work .work-input-tab-btn.is-active{
  background:var(--panel); color:var(--accent); box-shadow:0 1px 3px rgba(15,23,42,.12);
}

/* input & area */
.detail-brief-inline-work .work-label span{ font-size:var(--fs-caption); }
.detail-brief-inline-work .work-input{ border-radius:var(--radius-chip); padding:9px 11px; min-height:40px; }
.detail-brief-inline-work textarea.work-textarea{ min-height:84px; }
.detail-brief-inline-work .work-input[type=file]{
  padding:11px; border:1.5px dashed color-mix(in srgb,var(--accent) 40%, var(--line));
  background:color-mix(in srgb,var(--accent-soft) 16%,var(--panel)); cursor:pointer;
}

/* aksi kanan bawah */
.detail-brief-inline-work .work-row-actions{ margin-top:2px; justify-content:flex-end; gap:var(--ui-2); }

/* sub-editor operasional & persidangan: kalem, konsisten */
.detail-brief-inline-work .operational-entry-list{ border-top:1px solid var(--line); }
.operational-entry-count{ font-size:var(--fs-label); font-weight:var(--fw-heavy); color:var(--check-ops); background:var(--check-ops-tint); border:1px solid var(--check-ops-border); border-radius:9px; padding:6px 11px; width:max-content; }
.operational-report-title{ display:flex; align-items:center; gap:var(--ui-2); margin-bottom:2px; }
.operational-report-title strong{ font-size:var(--fs-body); color:var(--ink); }
.operational-report-title span{ font-size:9.5px; font-weight:var(--fw-heavy); color:var(--check-ops); background:var(--check-ops-tint); border:1px solid var(--check-ops-border); border-radius:99px; padding:var(--ui-05) var(--ui-2); }
/* #4: lampiran Laporan Advance — thumbnail foto + hitungan */
.report-attach-count{ font-size:var(--fs-caption); font-weight:var(--fw-bold); color:var(--muted); margin:2px 0 1px; }
.report-attach-thumbs{ display:flex; flex-wrap:wrap; gap:var(--ui-2); margin:2px 0 4px; }
.report-attach-thumb{ position:relative; width:88px; border:1px solid var(--line); border-radius:var(--radius-chip); overflow:hidden; background:color-mix(in srgb,var(--panel) 90%,var(--bg)); display:flex; flex-direction:column; }
.report-attach-open{ display:flex; flex-direction:column; width:100%; border:0; background:transparent; padding:0; cursor:pointer; font:inherit; text-align:left; }
.report-attach-remove{ position:absolute; top:4px; right:4px; width:20px; height:20px; border:0; border-radius:var(--ui-r-pill); background:rgba(15,23,42,.62); color:#fff; font-size:var(--fs-body); line-height:1; cursor:pointer; display:grid; place-items:center; }
.report-attach-remove:hover{ background:var(--danger,#c0392b); }
.report-attach-thumb img{ width:100%; height:64px; object-fit:cover; display:block; background:linear-gradient(135deg,#dfe7f1,#eef2f8); }
.report-attach-thumb span{ font-size:9.5px; color:var(--muted); padding:3px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report-attach-thumb:hover{ border-color:var(--accent); box-shadow:0 4px 12px rgba(20,32,46,.12); }
.detail-brief-inline-work .operational-entry-card,
.detail-brief-inline-work .operational-photo-group-result,
.detail-brief-inline-work .persidangan-doc-block{
  border:1px solid var(--line) !important; background:color-mix(in srgb,var(--panel) 92%,var(--bg)) !important;
}

/* ikon petugas kecil di baris pemilik */
.checklist-category-column .detail-brief-result-owner strong::before{
  content:""; display:inline-block; width:13px; height:13px; margin-right:6px; vertical-align:-2px;
  background:currentColor; opacity:.55;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/></svg>") center/contain no-repeat;
}

/* nilai kosong: lebih ringan (tak alarm) */
.checklist-category-column .detail-brief-result-value .result-preview.empty{ font-weight:var(--fw-medium); }

/* 3) Kartu item: baris HORIZONTAL SELARAS, buang paksaan 196px vertikal/clip */
.checklist-category-column .detail-brief-result-row{
  grid-template-columns:minmax(150px,1.15fr) minmax(160px,1.5fr) minmax(140px,.95fr) auto !important;
  height:auto !important;
  min-height:56px !important;
  overflow:visible !important;
  align-items:center;
  gap:14px;
  padding:11px 14px;
  background:color-mix(in srgb,var(--panel) 94%,transparent) !important;
}
.checklist-category-column .detail-brief-result-owner{
  grid-template-columns:minmax(0,1fr) !important;
}
.checklist-category-column .detail-brief-chip{ justify-self:end !important; }
.checklist-category-column .detail-brief-result-value strong,
.checklist-category-column .detail-brief-result-owner strong{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 4) Responsif: baris menumpuk saat sempit (di dalam modal) */
@media (max-width:820px){
  .checklist-category-column .detail-brief-result-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; align-items:start;
  }
  .checklist-category-column .detail-brief-chip{ justify-self:start !important; }
}
@media (max-width:560px){
  .checklist-category-column .detail-brief-result-row{ grid-template-columns:1fr !important; }
}

/* (blok editor lama digabung ke 2b — panel kohesif) */

/* ===== Option C: pratinjau penuh Laporan Advance (#linkReaderSplit) =====
   Mode "split" #linkModal: teks manual kiri, galeri foto/video + baris dokumen kanan.
   Aksen biru #0a84ff disengaja (paritas link reader), BUKAN var(--accent) yang slate. */
.link-modal.is-split .link-popup-note,
.link-modal.is-split .link-reader-toolbar{ display:none; }
.link-reader-split{
  flex:1 1 auto; min-height:0; overflow:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:var(--ui-5);
  align-items:start; align-content:start; padding:18px 20px 22px;
  border:1px solid var(--glass-border,var(--line)); border-radius:20px;
  background:color-mix(in srgb,var(--panel) 88%,var(--bg));
}
.reader-split-text{ min-width:0; font-size:var(--fs-title); line-height:1.62; overflow-wrap:anywhere; }
.reader-split-text-empty{ color:var(--muted); font-style:italic; }
.reader-split-media{ min-width:0; display:flex; flex-direction:column; gap:var(--ui-3); }
.reader-gallery{ display:flex; flex-direction:column; gap:var(--ui-25); min-width:0; }
.reader-gallery-stage{
  position:relative; border-radius:18px; overflow:hidden;
  background:color-mix(in srgb,#0b1220 78%,var(--panel));
  aspect-ratio:16/10; touch-action:pan-y; cursor:pointer;
}
.reader-gallery-canvas{ position:absolute; inset:0; display:grid; place-items:center; }
.reader-gallery-canvas img,
.reader-gallery-canvas video{ width:100%; height:100%; object-fit:cover; display:block; }
.reader-gallery-stage.is-contain .reader-gallery-canvas img,
.reader-gallery-stage.is-contain .reader-gallery-canvas video{ object-fit:contain; }
.reader-gallery-loading{ color:#e2e8f0; font-size:var(--fs-body); font-weight:var(--fw-bold); }
.reader-gallery-count{
  position:absolute; top:12px; right:12px; z-index:2; padding:var(--ui-1) var(--ui-3); border-radius:var(--ui-r-pill);
  background:rgba(15,23,42,.72); color:#fff; font-size:var(--fs-label); font-weight:var(--fw-heavy);
}
.reader-gallery-name{
  position:absolute; left:12px; bottom:12px; z-index:2; max-width:70%; padding:var(--ui-1) var(--ui-25);
  border-radius:8px; background:rgba(15,23,42,.72); color:#fff; font-size:var(--fs-label); font-weight:var(--fw-bold);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reader-gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:38px; height:38px;
  border:0; border-radius:var(--ui-r-pill); background:rgba(255,255,255,.9); color:#0f172a;
  font-size:var(--fs-display); line-height:1; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(15,23,42,.28);
}
.reader-gallery-arrow.is-prev{ left:12px; }
.reader-gallery-arrow.is-next{ right:12px; }
.reader-gallery-arrow:hover{ background:#fff; }
.reader-gallery-strip{ display:flex; gap:var(--ui-2); overflow-x:auto; padding-bottom:var(--ui-05); }
.reader-gallery-thumb{
  position:relative; flex:0 0 84px; height:64px; border:2px solid transparent; border-radius:12px;
  overflow:hidden; padding:0; background:color-mix(in srgb,var(--panel) 85%,var(--bg)); cursor:pointer;
}
.reader-gallery-thumb img,
.reader-gallery-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.reader-gallery-thumb.is-active{ border-color:var(--link); box-shadow:0 0 0 2px rgba(10,132,255,.32); }
.reader-gallery-thumb.is-video::after{
  content:"\25B6"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:var(--fs-title); background:rgba(15,23,42,.35); pointer-events:none;
}
.reader-doc-list{ display:flex; flex-direction:column; gap:var(--ui-2); min-width:0; }
.reader-doc-row{
  display:flex; align-items:center; gap:var(--ui-25); padding:var(--ui-25) var(--ui-3);
  border:1px solid var(--line); border-radius:var(--radius-control);
  background:color-mix(in srgb,var(--panel) 94%,var(--bg));
}
.reader-doc-badge{
  flex:0 0 auto; padding:5px 8px; border-radius:8px;
  background:rgba(10,132,255,.14); color:var(--link); font-size:var(--fs-caption); font-weight:900; letter-spacing:.03em;
}
.reader-doc-name{ flex:1; min-width:0; font-weight:var(--fw-bold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-doc-size{ flex:0 0 auto; color:var(--muted); font-size:var(--fs-label); }
.reader-doc-row .btn{ flex:0 0 auto; }
@media (max-width:820px){
  .link-reader-split{ grid-template-columns:1fr; gap:14px; padding:14px; }
  .reader-gallery-stage{ aspect-ratio:4/3; }
}
.reader-doc-row a.btn{ text-decoration:none; }
/* Guard lebar: strip thumbnail jangan mendorong galeri melebihi kolomnya (mobile). */
.reader-gallery{ min-width:0; }
.reader-gallery-stage{ max-width:100%; }
.reader-gallery-strip{ min-width:0; }
/* Hormati atribut [hidden] (paritas pola .agenda-select-toolbar[hidden]): tanpa ini,
   display:grid di atas membuat panel split KOSONG tampil & mencuri tinggi di semua
   mode reader lain (#linkModal dipakai bersama banyak mode). */
.link-reader-split[hidden]{ display:none !important; }
/* Laporan teks-saja: jangan alokasikan kolom kanan kosong di desktop. */
.link-reader-split.is-text-only{ grid-template-columns:1fr; }
/* Tombol ganti mode tampilan media (penuh/utuh) — affordance eksplisit, termasuk
   untuk video yang kliknya dikonsumsi kontrol native. */
.reader-gallery-fit{
  position:absolute; top:12px; left:12px; z-index:2; width:30px; height:30px;
  border:0; border-radius:var(--ui-r-pill); background:rgba(15,23,42,.6); color:#fff;
  font-size:var(--fs-title); line-height:1; display:grid; place-items:center; cursor:pointer;
}
.reader-gallery-fit:hover{ background:rgba(15,23,42,.82); }

/* ===== Lembar Kerja Laporan Advance (akordeon; preview disetujui 19 Jul) =====
   Laporan terisi menutup jadi satu baris berjudul; klik untuk edit lagi. Aksen
   biru #0a84ff paritas reader. Guard [hidden] & spesifisitas summary: rule fold
   `.detail-brief-fold summary` global — bar kartu pakai !important seperlunya. */
.la-guide{ display:grid; gap:var(--ui-15); padding:12px 14px; border:1px solid rgba(10,132,255,.28); border-radius:var(--radius-control); background:rgba(10,132,255,.07); font-size:12.5px; line-height:var(--lh-reading); }
.la-guide strong{ font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.05em; color:var(--link); }
.la-guide ol{ margin:0; padding-left:18px; display:grid; gap:var(--ui-1); }
.la-guide b{ font-weight:var(--fw-heavy); }
details.la-card{ display:block; padding:0; overflow:hidden; }
details.la-card.is-main{ border-color:rgba(10,132,255,.45); box-shadow:0 0 0 2px rgba(10,132,255,.10); }
.la-card > summary.la-card-bar{ list-style:none; cursor:pointer; display:flex !important; align-items:center; gap:10px; padding:11px 13px !important; margin:0; background:transparent; }
.la-card > summary.la-card-bar::-webkit-details-marker{ display:none; }
.la-card > summary.la-card-bar::after{ content:none !important; }
.la-card-badge{ flex:0 0 auto; display:inline-grid; place-items:center; padding:3px 10px; border-radius:999px; background:#0a84ff; color:#fff !important; font-size:11px; font-weight:900; letter-spacing:.04em; }
.la-card.is-main .la-card-badge{ background:#0a5ad6; }
.la-card-bar strong{ flex:1; min-width:0; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.la-card-status{ flex:0 0 auto; color:var(--muted); font-size:11.5px; }
.la-chevron{ flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; border-radius:var(--ui-r-pill); background:color-mix(in srgb,var(--panel) 70%,var(--bg)); color:var(--muted); font-size:var(--fs-label); transition:transform .15s ease; }
details.la-card[open] > summary .la-chevron{ transform:rotate(180deg); }
details.la-card[open] > summary .la-edit-hint{ display:none; }
.la-edit-hint{ flex:0 0 auto; color:var(--link); font-size:11.5px; font-weight:var(--fw-heavy); }
.la-card-body{ display:grid; gap:var(--ui-2); padding:2px 13px 13px; }
.la-optional{ font-style:normal; color:var(--muted); font-weight:var(--fw-medium); }
.la-field-caption{ display:block; margin-top:3px; color:var(--muted); font-size:var(--fs-caption); }
.la-attach-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ui-25); }
@media (max-width:700px){ .la-attach-row{ grid-template-columns:1fr; } }
.operational-add-btn.la-add{ width:100%; padding:var(--ui-3); border:2px dashed rgba(10,132,255,.5); border-radius:var(--radius-control); background:rgba(10,132,255,.05); color:var(--link); font-weight:var(--fw-heavy); font-size:13.5px; }
.operational-add-btn.la-add:hover{ background:rgba(10,132,255,.1); }
/* Fix review 19 Jul: aksen biru kartu Utama kalah dari rule editor-inline ber-!important. */
.detail-brief-inline-work details.la-card.is-main{ border-color:rgba(10,132,255,.45) !important; }
/* Fix review 19 Jul: bar kartu di layar sempit — status boleh menyusut ber-ellipsis,
   hint disembunyikan, supaya JUDUL laporan tidak terdesak sampai hilang. */
.la-card-status{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:700px){
  .la-edit-hint{ display:none; }
  /* Bar 2 baris: baris-1 badge+JUDUL+chevron, baris-2 status — judul tak terdesak. */
  .la-card > summary.la-card-bar{ flex-wrap:wrap; row-gap:3px; }
  .la-card-bar strong{ flex:1 1 40%; }
  .la-card-status{ flex:1 1 100%; order:6; max-width:none; }
}
/* Compact 19 Jul: pratinjau tidak lagi dirender di atas lembar kerja LA — tombol
   "Pratinjau" kecil di bar kartu membuka pop-up pratinjau penuh (Option C). */
.la-bar-preview{ flex:0 0 auto; border:0; background:none; padding:0; color:var(--link); font-size:11.5px; font-weight:var(--fw-heavy); cursor:pointer; }
.la-bar-preview:hover{ text-decoration:underline; }
@media (max-width:700px){
  .la-bar-preview{ order:7; }
}

/* ============================================================
   REDESIGN "Rangkuman Read-Only" (19 Jul) — grid tile SIMETRIS.
   CSS-only + 1 baris JS penanda .is-empty. Hook & fungsi tetap.
   ============================================================ */
/* 1) Grid simetris 6 kolom: baris seragam 3/2/3/3, tanpa tile ganjil.
   HANYA mode read-only — mode EDIT (.detail-brief-grid-editing) punya auto-flow
   2 kolom sendiri (tile ekstra: multidate/objective/tapping) dan TIDAK boleh kena. */
.detail-brief-grid:not(.detail-brief-grid-editing){
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  grid-template-areas:
    "kegiatan kegiatan kegiatan kegiatan kegiatan kegiatan"
    "tanggal tanggal waktu waktu lokasi lokasi"
    "organizer organizer organizer dresscode dresscode dresscode"
    "pendamping pendamping picint picint pic pic"
    "sespri sespri protokol protokol ops ops"
    "persidangan persidangan persidangan media media media" !important;
  gap:var(--ui-25);
}
/* 2) Tile seragam & tenang */
.detail-brief-tile{
  border-radius:12px;
  padding:11px 13px;
  min-height:58px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  display:flex; flex-direction:column; justify-content:center;
}
.detail-brief-tile span{ margin-bottom:3px; font-size:10px; letter-spacing:.05em; }
.detail-brief-tile strong{ font-size:var(--fs-body); line-height:var(--lh-snug); }
/* nilai kosong ("Belum ada …"/TBC) diredam agar data asli menonjol */
.detail-brief-tile strong.is-empty{ color:var(--muted); font-weight:550; }
/* 3) Kesiapan: band rapi — angka kanan, progress penuh di bawah */
.detail-brief-score-full{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"lbl pct" "sub pct" "bar bar";
  align-items:center; gap:var(--ui-05) var(--ui-4);
  border:1px solid var(--line); border-radius:var(--radius-control); padding:13px 16px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
}
.detail-brief-score-full > span{ grid-area:lbl; color:var(--muted); font-size:var(--fs-caption); font-weight:820; text-transform:uppercase; letter-spacing:.05em; }
.detail-brief-score-full > strong{ grid-area:pct; font-size:30px; font-weight:var(--fw-heavy); line-height:1; }
.detail-brief-score-full > small{ grid-area:sub; color:var(--muted); font-size:var(--fs-label); }
.detail-brief-score-full > .detail-brief-progress{ grid-area:bar; margin-top:9px; height:8px; border-radius:99px; }
.detail-brief-progress span{ border-radius:99px; }
/* 4) Header: kicker + badges sejajar rapi */
.detail-brief-badges{ gap:9px; }
.detail-brief-badges .badge{ display:inline-flex; align-items:center; min-height:34px; border-radius:var(--radius-chip); }
.detail-brief-editbtn{ min-height:34px; border-radius:var(--radius-chip); font-weight:var(--fw-bold); }
.detail-brief-create-actions{
  display:flex;
  width:100%;
}
.detail-brief-create-submit{
  width:100%;
  min-height:48px;
  border-radius:12px;
  font-weight:var(--fw-heavy);
}
@media (max-width:1024px){
  .detail-brief-head{display:grid;grid-template-columns:minmax(0,1fr)}
  .detail-brief-badges{width:100%;min-width:0;justify-content:flex-start}
}
/* 5) Baris aksi (Copy Detail · Keputusan · Hapus): 3 kolom setara */
.detail-brief-copy{ gap:var(--ui-25); }
.detail-brief-copy .btn{ min-height:44px; border-radius:12px; font-weight:var(--fw-bold); }
/* 6) Responsif: 6→2→1 kolom, area dilepas rapi */
@media (max-width:900px){
  .detail-brief-grid:not(.detail-brief-grid-editing){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:none !important;
  }
  .detail-brief-grid > .detail-brief-tile{ grid-area:auto !important; }
  .detail-brief-tile-full{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .detail-brief-grid:not(.detail-brief-grid-editing){ grid-template-columns:1fr !important; }
}
/* baris aksi: 3 kolom setara di layar lebar */
@media (min-width:701px){
  .detail-brief-copy{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
/* 7) FORM EDIT INLINE ("whitelist") — input seragam & simetris, hook tetap */
.detail-brief-grid-editing{ gap:var(--ui-25); }
.detail-brief-grid-editing > .detail-brief-tile{
  border-radius:12px; padding:11px 13px;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.detail-brief-grid-editing .detail-brief-input,
.detail-brief-grid-editing select.detail-brief-pick{
  width:100%; min-height:var(--ctrl-h); border:1px solid var(--line); border-radius:var(--radius-control);
  padding:9px 12px; background:var(--panel); color:var(--ink); font:inherit; font-size:var(--ctrl-fs);
}
.detail-brief-grid-editing .detail-brief-input:focus,
.detail-brief-grid-editing select.detail-brief-pick:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.detail-brief-grid-editing textarea.detail-brief-input{ min-height:84px; resize:vertical; }
/* pasangan jam: sejajar rapi dengan tanda hubung */
.detail-brief-grid-editing .detail-brief-time-pair{ display:flex; align-items:center; gap:var(--ui-2); }
.detail-brief-grid-editing .detail-brief-time-pair .detail-brief-input{ flex:1; min-width:0; }
/* checkbox "Tanggal saja": baris ringkas, bukan huruf kapital raksasa */
.detail-brief-grid-editing .detail-brief-dateonly{
  display:flex; align-items:center; gap:var(--ui-2); margin-top:9px; cursor:pointer;
  font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--muted);
  text-transform:none; letter-spacing:0;
}
.detail-brief-grid-editing .detail-brief-dateonly input{ width:17px; height:17px; min-height:0; margin:0; accent-color:var(--accent); }
/* blok beberapa tanggal: input + tombol satu baris */
/* teks bantu di bawah field */
.detail-brief-grid-editing .detail-brief-tile-sub{
  margin-top:7px; font-size:var(--fs-caption); color:var(--muted);
  text-transform:none; letter-spacing:0; font-weight:500;
}
/* chips pendamping/PIC rapi */
.detail-brief-grid-editing .assign-chips{ display:flex; flex-wrap:wrap; gap:var(--ui-15); margin-top:4px; }
/* RENTANG TANGGAL (4 Sep 2026): kolom jam di baris [tgl][jam] – [jam][tgl] boleh lebih
   ramping daripada aturan umum min-width:72px karena tanggalnya yang butuh ruang. */
.detail-brief-grid-editing .detail-brief-rentang-tepi .detail-brief-input[data-time24]{ min-width:4.5em; flex:0 1 5.5em; }
.detail-brief-grid-editing .detail-brief-rentang-tepi .detail-brief-input[type="date"]{ flex:1 1 9.5em; }
/* FIX: select di dalam pasangan (mis. Pendamping: "Ketik nama" + "Pilih Pejabat Utama")
   jangan width:100% — berbagi baris rata dengan input agar tak menggencet 20px. */
.detail-brief-grid-editing .detail-brief-time-pair select.detail-brief-pick{ width:auto; flex:1; min-width:0; }
/* FIX (24 Jul 2026): select ZONA (.detail-brief-tz) yang baru di baris jam belum
   punya aturan sendiri, jadi ia mewarisi width:100% dari
   `.detail-brief-tile-editing .detail-brief-select` dan MENGGENCET kedua kolom jam
   sampai isinya tak terlihat. Sama penyakitnya dengan .detail-brief-pick di atas:
   zona cukup selebar isinya, sisa ruang untuk jam mulai/selesai. */
.detail-brief-time-pair select.detail-brief-tz,
.detail-brief-grid-editing .detail-brief-time-pair select.detail-brief-tz{
  width:auto; flex:0 1 auto; min-width:0;
  /* Zona IANA (24 Jul 2026): label opsi kini panjang ("America/Los_Angeles (GMT−8/−7)").
     Tanpa batas, `width:auto` menyesuaikan opsi TERLEBAR dan menggencet lagi kolom jam.
     Batasi + potong dgn ellipsis; kedua input tetap terlindungi oleh min-width:72px. */
  max-width:9.5em; text-overflow:ellipsis;
}
/* jam mulai/selesai wajib cukup lebar untuk menampilkan "HH:MM" */
.detail-brief-grid-editing .detail-brief-time-pair .detail-brief-input{ min-width:72px; }

/* Jam agenda selalu diedit sebagai HH:MM 24 jam; angka tabular menjaga pasangan waktu sejajar. */
input[data-time24]{
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

/* ============================================================
   DETAIL AGENDA — zona atas yang berorientasi tugas.
   Scope berhenti di [data-detail-upper]; Disposisi, Yang Belum
   Beres, dan Hasil Check List tetap memakai struktur lama.
   ============================================================ */
.detail-brief-upper{
  display:grid;
  gap:14px;
  min-width:0;
}
.detail-brief-upper .detail-brief-head{
  position:relative;
  align-items:center;
  padding:16px 18px;
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius:var(--radius-inner);
  background:
    linear-gradient(110deg,
      color-mix(in srgb, var(--accent-soft) 64%, var(--panel)) 0%,
      color-mix(in srgb, var(--panel) 94%, transparent) 72%);
  overflow:hidden;
}
.detail-brief-upper .detail-brief-head::before{
  content:"";
  position:absolute;
  inset:12px auto 12px 0;
  width:4px;
  border-radius:0 999px 999px 0;
  background:var(--accent);
}
.detail-brief-heading{
  min-width:0;
  max-width:min(720px,100%);
  padding-left:3px;
}
.detail-brief-upper .detail-brief-kicker{
  margin-bottom:6px;
  border:0;
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--accent);
  font-size:10px;
  letter-spacing:.08em;
}
.detail-brief-upper .detail-brief-title{
  font-size:clamp(19px,2vw,24px);
  line-height:var(--lh-tight);
  letter-spacing:0;
}
.detail-brief-upper .detail-brief-meta{
  max-width:68ch;
  margin-top:7px;
  font-size:12.5px;
}
.detail-brief-upper .detail-brief-badges{
  align-items:center;
  justify-content:flex-end;
  max-width:min(720px,62%);
}
.detail-brief-upper .detail-brief-badges .badge,
.detail-brief-upper .detail-brief-editbtn{
  min-height:38px;
}
.detail-brief-header-actions{
  display:flex;
  align-items:stretch;
  gap:var(--ui-2);
}
.detail-brief-header-actions .detail-brief-editbtn{
  min-width:78px;
  height:100%;
  margin-left:0;
}
.detail-brief.is-editing .detail-brief-heading{
  max-width:100%;
}
.detail-brief.is-editing .detail-brief-upper .detail-brief-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
  gap:var(--ui-3);
}
.detail-brief.is-editing .detail-brief-header-controls{
  display:grid;
  grid-template-columns:repeat(2,minmax(190px,1fr)) auto;
  width:100%;
  max-width:100%;
  gap:var(--ui-2);
}
.detail-brief.is-editing .detail-brief-control{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(22px,1fr);
  align-content:center;
  align-items:center;
  gap:var(--ui-05);
  min-width:0;
  min-height:58px;
  padding:7px 36px 7px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 58%,transparent);
}
.detail-brief.is-editing .detail-brief-control::after{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-70%) rotate(45deg);
}
.detail-brief.is-editing .detail-brief-control > span{
  overflow:hidden;
  color:var(--muted);
  font-size:9.5px;
  line-height:1.15;
  letter-spacing:.06em;
  text-overflow:ellipsis;
  text-transform:uppercase;
}
.detail-brief.is-editing .detail-brief-control .detail-brief-select{
  display:block;
  width:100%;
  min-width:0;
  min-height:24px;
  padding:0;
  overflow:hidden;
  font-size:12.5px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.detail-brief.is-editing .detail-brief-header-actions{
  min-height:58px;
}
.detail-brief-info-section,
.detail-brief-command-section{
  display:grid;
  gap:var(--ui-2);
  min-width:0;
}
.detail-brief-section-head{
  display:flex;
  align-items:center;
  min-height:22px;
  padding:0 3px;
}
.detail-brief-section-head > span{
  color:var(--muted);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.detail-brief-upper .detail-brief-grid{
  gap:var(--ui-2);
}
.detail-brief-upper .detail-brief-tile{
  border-color:color-mix(in srgb, var(--line) 82%, var(--accent));
  background:color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent);
}
.detail-brief.is-readonly .detail-brief-upper .detail-brief-tile-full{
  border-color:color-mix(in srgb, var(--accent) 28%, var(--line));
  background:color-mix(in srgb, var(--accent-soft) 42%, var(--panel));
}
.detail-brief.is-readonly .detail-brief-upper .detail-brief-tile-date strong,
.detail-brief.is-readonly .detail-brief-upper .detail-brief-tile-time strong{
  font-size:14px;
}
.detail-brief-command-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--ui-2);
  align-items:stretch;
}
.detail-brief-command-grid.has-actions{
  grid-template-columns:minmax(250px,.88fr) minmax(390px,1.12fr);
}
.detail-brief-command-grid > .detail-brief-score-full,
.detail-brief-command-grid > .detail-modal-actions{
  margin:0;
  min-width:0;
  height:100%;
}
.detail-brief-command-grid > .detail-modal-actions{
  justify-content:center;
  padding:var(--ui-3);
  border-radius:var(--radius-control);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
}
.detail-brief-command-grid .detail-decision-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
}
.detail-brief-command-grid .detail-decision-row .btn{
  width:100%;
  min-width:0;
}
.detail-brief-command-grid .detail-modal-actions .btn{
  min-height:44px;
  border-radius:11px;
  font-weight:750;
}
.detail-brief-upper .detail-brief-create-actions{
  position:sticky;
  bottom:0;
  z-index:2;
  padding:var(--ui-1) 0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--panel) 92%,transparent) 35%);
}
.detail-brief-upper .detail-brief-create-submit{
  min-height:52px;
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 20%,transparent);
}
@media (max-width:1024px){
  .detail-brief-upper .detail-brief-head{
    align-items:start;
    padding:15px 16px;
  }
  .detail-brief-upper .detail-brief-badges{
    max-width:100%;
    justify-content:flex-start;
  }
  .detail-brief-command-grid.has-actions{
    grid-template-columns:1fr;
  }
  .detail-brief.is-editing .detail-brief-heading{
    max-width:100%;
  }
  .detail-brief.is-editing .detail-brief-header-controls{
    width:100%;
    max-width:100%;
  }
}
@media (max-width:680px){
  .detail-brief-upper{
    gap:var(--ui-3);
  }
  .detail-brief-upper .detail-brief-head{
    gap:var(--ui-3);
    padding:14px;
  }
  .detail-brief-upper .detail-brief-head::before{
    inset:10px auto 10px 0;
  }
  .detail-brief-upper .detail-brief-title{
    font-size:19px;
  }
  .detail-brief.is-editing .detail-brief-header-controls{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:var(--ui-2);
  }
  .detail-brief.is-editing .detail-brief-header-controls .detail-brief-control{
    min-width:0;
    width:100%;
  }
  .detail-brief.is-editing .detail-brief-header-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-column:1 / -1;
    min-height:44px;
  }
  .detail-brief.is-new-input .detail-brief-header-actions{
    grid-template-columns:1fr;
  }
  .detail-brief.is-editing .detail-brief-header-actions .detail-brief-editbtn{
    width:100%;
    min-height:44px;
  }
  .detail-brief-command-grid .detail-modal-actions .detail-decision-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .detail-brief-command-grid .detail-decision-row .decision-trigger{
    grid-column:1 / -1;
    grid-row:1;
  }
  .detail-brief-command-grid .detail-decision-row [data-copy-detail]{
    grid-column:1;
    grid-row:2;
  }
  .detail-brief-command-grid .detail-decision-row [data-modal-delete]{
    grid-column:2;
    grid-row:2;
  }
}
@media (max-width:420px){
  .detail-brief.is-editing .detail-brief-header-controls{
    grid-template-columns:1fr;
  }
  .detail-brief.is-editing .detail-brief-header-actions{
    grid-column:1;
  }
}

/* ============================================================
   REDESIGN TAB AGENDA (19 Jul) — kartu simetris. Scoped #view-agenda.
   ============================================================ */

#view-agenda .agenda-card{
  border-radius:var(--radius-inner); padding:15px 17px;
  /* box-shadow SENGAJA tidak di-set: strip kiri berwarna status (inset shadow
     .agenda-card.status-*) harus tetap hidup sebagai penanda cepat. */
}
#view-agenda .agenda-row{ gap:14px; align-items:flex-start; }
#view-agenda .timebox{
  min-width:64px; padding:9px 10px; border-radius:12px; text-align:center;
}
#view-agenda .agenda-title{ font-size:var(--fs-title); font-weight:var(--fw-heavy); line-height:1.3; }
#view-agenda .agenda-meta{ font-size:12.5px; margin-top:3px; }
#view-agenda .agenda-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:10px; }
#view-agenda .agenda-badges .badge{ display:inline-flex; align-items:center; min-height:26px; border-radius:8px; padding:3px 10px; font-size:11.5px; }
#view-agenda .agenda-assignee{ display:flex; align-items:center; gap:var(--ui-2); margin-top:8px; }
#view-agenda .progress-wrap{ margin-top:10px; }
#view-agenda .progress-label{ font-size:11.5px; margin-bottom:5px; }
#view-agenda .progress{ height:7px; border-radius:99px; overflow:hidden; }
#view-agenda .progress span{ border-radius:99px; }
#view-agenda .agenda-card .actions{ display:flex; flex-wrap:wrap; gap:var(--ui-2); margin-top:12px; }
#view-agenda .agenda-card .actions .btn{ min-height:40px; border-radius:11px; padding:var(--ui-2) var(--ui-4); font-weight:var(--fw-bold); }

/* ============================================================
   REDESIGN TAB TOOLS (20 Jul) — grid 2 kolom simetris, kartu setinggi
   sama, tombol dipatok ke dasar. CSS-only, scoped #view-more. Fungsi tetap.
   ============================================================ */
#view-more .tools-command-shell > .grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
#view-more .tools-command-shell > .grid > .card{
  display:flex; flex-direction:column;
  border-radius:var(--radius-inner); padding:17px 18px;
  min-height:170px;
}
#view-more .tools-command-shell .card h3{
  font-size:var(--fs-title); font-weight:var(--fw-heavy); letter-spacing:-.01em;
  margin:0 0 6px !important;
}
#view-more .tools-command-shell .card > p.muted{ font-size:12.5px; line-height:var(--lh-reading); margin:0 0 10px; }
/* tombol aksi dipatok ke dasar kartu — baris tombol antar-kartu sejajar */
#view-more .tools-command-shell .card .actions{
  margin-top:auto; display:flex; align-items:center; gap:var(--ui-25); padding-top:var(--ui-25);
}
#view-more .tools-command-shell .card .actions .btn{
  flex:1; min-height:44px; border-radius:12px; font-weight:var(--fw-bold);
}
#view-more .tools-command-shell .card .actions .badge{
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:30px; border-radius:9px; padding:var(--ui-1) var(--ui-3);
}
/* input & select seragam (Tes Email, filter Junk) */
#view-more .tools-command-shell .card input:not([type=checkbox]):not([type=file]),
#view-more .tools-command-shell .card select{
  min-height:var(--ctrl-h); border-radius:var(--radius-control);
}
/* Junk tetap pita selebar penuh (sudah grid-column:1/-1) — samakan ritme */
#view-more .junk-tools-card{ min-height:0; }
@media (max-width:900px){
  #view-more .tools-command-shell > .grid{ grid-template-columns:1fr; }
}
/* Junk: TERTUTUP default — band ringkas, klik untuk membuka daftar */
#view-more .junk-tools-fold > summary{ list-style:none; cursor:pointer; }
#view-more .junk-tools-fold > summary::-webkit-details-marker{ display:none; }
#view-more .junk-tools-fold > summary.junk-tools-head{ position:relative; padding-right:34px; }
#view-more .junk-tools-fold > summary.junk-tools-head::after{
  content:"\203A"; position:absolute; right:6px; top:50%; transform:translateY(-50%) rotate(90deg);
  font-size:20px; line-height:1; color:var(--muted); transition:transform .15s;
}
#view-more .junk-tools-fold[open] > summary.junk-tools-head::after{ transform:translateY(-50%) rotate(-90deg); }
#view-more .junk-tools-fold > .junk-tools-filters{ margin-top:12px; }

/* ============================================================
   REDESIGN KALENDER BULANAN (22 Jul) — baris agenda + pita lintas hari
   (opsi B: blockGroupId). #calendarGrid kini berisi .calendar-week; tiap minggu
   = 7 .calendar-day + lapisan .calendar-bands yang membentang. Kontrak DOM utuh:
   data-calendar-date pada sel, data-agenda-preview pada baris & pita.
   ============================================================ */
/* bingkai bulan: satu kanvas bergaris, bukan 42 kartu melayang */
/* CATATAN: --line di tema ini = rgba(255,255,255,.56) (putih transparan untuk efek
   kaca) sehingga TIDAK terlihat di atas kartu putih. Grid bulan perlu garis nyata,
   jadi dipakai token lokal turunan --ink (otomatis benar di mode gelap juga). */
#view-calendar .calendar-suite{ --cal-line:color-mix(in srgb, var(--ink) 13%, transparent); }
#view-calendar .calendar-suite #calendarGrid{
  display:block; gap:0; grid-auto-rows:auto;
  border:1px solid var(--cal-line); border-radius:var(--radius-control); overflow:hidden; background:var(--panel);
}
#view-calendar #calendarWeekdays{ gap:0; padding:0 0 var(--ui-1); }
#view-calendar #calendarWeekdays .weekday{ text-align:center; }
#view-calendar .calendar-week{
  position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0; border-bottom:1px solid var(--cal-line);
}
#view-calendar .calendar-week:last-child{ border-bottom:0; }
/* menang atas .calendar-suite .calendar-day (height:82px + overflow:hidden + radius 18) */
#view-calendar .calendar-suite .calendar-week .calendar-day{
  height:auto; min-height:120px; overflow:hidden;
  border:0; border-right:1px solid var(--cal-line); border-radius:0;
  background:var(--panel); box-shadow:none;
  padding:var(--ui-15) var(--ui-15) var(--ui-2); display:flex; flex-direction:column; gap:1px;
}
#view-calendar .calendar-suite .calendar-week .calendar-day:last-child{ border-right:0; }
#view-calendar .calendar-suite .calendar-week .calendar-day.muted-month{ background:#fafbfd; }
#view-calendar .calendar-suite .calendar-week .calendar-day.today{ background:color-mix(in srgb, var(--accent) 4%, var(--panel)); }
#view-calendar .calendar-suite .calendar-week .calendar-day.selected:not(.today){ box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent); }
#view-calendar .calendar-date-no{
  display:flex; align-items:center; gap:5px; min-height:22px; margin:0 0 2px;
}
#view-calendar .calendar-week .date-circle{
  font-size:12.5px; font-weight:750; font-variant-numeric:tabular-nums;
  width:22px; height:22px; min-width:0; display:inline-grid; place-items:center; border-radius:50%;
}
#view-calendar .calendar-week .calendar-count{
  min-width:0; width:auto; height:auto; background:transparent; border:0; color:var(--muted);
  font-size:10px; font-weight:750; padding:0;
}
#view-calendar .calendar-week .calendar-day.today .calendar-count{ background:transparent; color:var(--accent); }
#view-calendar .calendar-day.today .date-circle{ background:var(--accent); color:var(--accent-ink); font-weight:850; }
#view-calendar .calendar-date-no .calendar-count{ margin-left:auto; font-size:10px; font-weight:750; color:var(--muted); }

/* lapisan pita: grid 7 kolom yang menimpa area sesudah baris tanggal */
#view-calendar .calendar-bands{
  position:absolute; left:0; right:0; top:30px; z-index:2;
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--ui-05) 0;
  pointer-events:none; padding:0 3px;
}
#view-calendar .calendar-band{
  pointer-events:auto; appearance:none; font:inherit; cursor:pointer; text-align:left;
  /* Lihat catatan "WARNA DASAR WAJIB" pada .week-band di bawah: tanpa tiga
     properti ini, status yang belum punya aturan (mis. blok "Sibuk") jatuh ke
     gaya UA hitam, bukan ke surface netral seperti yang diniatkan. */
  color:var(--ink); background:var(--panel); border-color:var(--line);
  height:19px; margin:0 2px; padding:0 var(--ui-2); border-radius:6px; border:1px solid;
  font-size:10.5px; font-weight:var(--fw-bold); line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#view-calendar .calendar-band.cont-left{ border-top-left-radius:0; border-bottom-left-radius:0; border-left-style:dashed; margin-left:0; }
#view-calendar .calendar-band.cont-right{ border-top-right-radius:0; border-bottom-right-radius:0; border-right-style:dashed; margin-right:0; }
#view-calendar .calendar-band-space{ flex:0 0 auto; }

/* baris agenda per tanggal */
#view-calendar .calendar-day .calendar-pill.calendar-chip{
  display:flex; align-items:center; gap:5px; width:100%;
  border-radius:6px; padding:2px 7px 2px 9px; margin:0;
  font-size:10.5px; font-weight:650; text-align:left; cursor:pointer;
  white-space:nowrap; overflow:hidden; min-height:0; line-height:var(--lh-reading);
}
/* CATATAN PENTING: baris agenda SENGAJA tetap berlatar warna status. app.css:9875
   menetapkan dengan !important bahwa "warna keputusan selalu menjadi surface Kalender".
   Itu aturan desain yang sudah berlaku di seluruh kalender (pill, kartu harian, kartu
   mingguan) — jadi TIDAK diratakan jadi teks polos meski kiblat referensi begitu.
   Yang diubah hanya kerapatan & tata letak, bukan warnanya. */
#view-calendar .calendar-day .calendar-pill.calendar-chip:hover{ filter:brightness(.97); }
#view-calendar .calendar-chip-time{ font-weight:var(--fw-heavy); font-variant-numeric:tabular-nums; flex:0 0 auto; opacity:.9; }
#view-calendar .calendar-chip-title{ overflow:hidden; text-overflow:ellipsis; }
/* Zona IANA (24 Jul 2026): penanda kecil zona non-WIB pada kartu kalender. Jam kartu
   selalu WIB; penanda ini menerangkan angka lokal yang berbeda di Detail Agenda. */
.cev-zone-chip{
  display:inline-block; margin-left:4px; padding:0 var(--ui-1); border-radius:5px;
  font-size:9px; font-weight:var(--fw-heavy); letter-spacing:.02em; vertical-align:middle;
  background:color-mix(in srgb, var(--accent, #2563eb) 16%, transparent);
  color:var(--accent, #2563eb); border:1px solid color-mix(in srgb, var(--accent, #2563eb) 32%, transparent);
}
.detail-brief-wib-hint{ color:var(--accent, #2563eb); font-weight:var(--fw-bold); }
.detail-brief-wib-hint:empty{ display:none; }
/* (25 Jul 2026) Label zona BACA-SAJA di baris jam — mengganti dropdown. Zona mengikuti
   lokasi otomatis; ini sekadar menandai zona yang berlaku, bukan kontrol yang bisa diklik. */
.detail-brief-zone-tag{
  flex:0 0 auto; align-self:center; white-space:nowrap;
  padding:5px 9px; border-radius:8px;
  font-size:var(--fs-label); font-weight:var(--fw-heavy); letter-spacing:.02em; font-variant-numeric:tabular-nums;
  background:color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
  color:var(--accent, #2563eb);
  border:1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, transparent);
}
#view-calendar .calendar-day .calendar-more{
  font-size:10px; font-weight:750; color:var(--muted); padding:1px 6px; margin-top:1px;
}

/* warna: ikut token status yang sudah ada (tidak menambah palet baru) */
#view-calendar .calendar-band.status-approved,
#view-calendar .calendar-band.agenda-tone-approved{ background:var(--status-approved-bg); border-color:var(--status-approved-border); color:var(--status-approved); }
#view-calendar .calendar-band.status-pending,
#view-calendar .calendar-band.agenda-tone-pending{ background:var(--status-pending-bg); border-color:var(--status-pending-border); color:var(--status-pending); }
#view-calendar .calendar-band.status-rejected,
#view-calendar .calendar-band.agenda-tone-rejected{ background:var(--status-rejected-bg); border-color:var(--status-rejected-border); color:var(--status-rejected); }
#view-calendar .calendar-band.status-delegated,
#view-calendar .calendar-band.agenda-tone-delegated{ background:var(--status-delegated-bg); border-color:var(--status-delegated-border); color:var(--status-delegated); }
#view-calendar .calendar-band.status-tapping{ background:var(--status-tapping-bg); border-color:var(--status-tapping-border); color:var(--status-tapping); }
#view-calendar .calendar-band.status-waiting{ background:var(--status-waiting-bg); border-color:var(--status-waiting-border); color:var(--status-waiting); }
#view-calendar .calendar-band.status-flower{ background:var(--status-flower-bg); border-color:var(--status-flower-border); color:var(--status-flower); }
#view-calendar .calendar-band.status-resched{ background:var(--status-resched-bg); border-color:var(--status-resched-border); color:var(--status-resched); }

@media (max-width:820px){
  #view-calendar .calendar-week .calendar-day{ min-height:92px; padding:5px 4px 6px; }
  #view-calendar .calendar-chip-title{ display:none; }
}
/* penanda status ringkas di baris tanggal (Rejected/Prioritas tetap terlihat
   walau agendanya masuk luapan "+N lagi") */
#view-calendar .calendar-week .calendar-date-no .status-dots{ display:inline-flex; align-items:center; gap:3px; margin-left:2px; }
#view-calendar .calendar-week .calendar-date-no .status-dot{ width:5px; height:5px; border-radius:50%; display:block; }

/* ============================================================
   REDESIGN KALENDER MINGGUAN (22 Jul) — kanvas waktu.
   #weekGrid berisi .week-stage: baris kepala + baris "Blok" (pita lintas hari,
   memakai ulang calendarBandRuns) + kanvas jam dengan agenda diposisikan menurut
   jam mulai & durasi, bentrok berdampingan, plus garis "sekarang".
   Warna TETAP dari token status (.week-agenda-item mewarisi aturan surface kalender).
   Kontrak DOM: data-week-date pada kepala hari, data-agenda-preview pada tiap agenda.
   ============================================================ */
/* #weekGrid sendiri adalah grid 7 kolom (gaya lama kartu per hari). Panggung baru
   adalah SATU anak, jadi wadahnya harus block agar tidak terjepit 1/7 lebar. */
#view-calendar .calendar-suite #weekGrid{ display:block; gap:0; grid-auto-rows:auto; margin-top:14px; }
#view-calendar .week-stage{
  --wk-gutter:54px;
  border:1px solid var(--cal-line); border-radius:var(--radius-control); overflow:hidden; background:var(--panel);
}
#view-calendar .week-headrow{
  display:grid; grid-template-columns:var(--wk-gutter) repeat(7,minmax(0,1fr));
  border-bottom:1px solid var(--cal-line);
}
/* Baris Blok: anak keduanya SATU grid 7 kolom, jadi wadahnya cukup 2 kolom
   (gutter + sisa). Kalau dipaksa repeat(7), pita hanya dapat 1/7 lebar. */
#view-calendar .week-alldayrow{
  display:grid; grid-template-columns:var(--wk-gutter) 1fr;
  border-bottom:1px solid var(--cal-line);
}
#view-calendar .week-gutter-cell{
  border-right:1px solid var(--cal-line); display:flex; align-items:center; justify-content:flex-end;
  padding:6px 7px 0 0; font-size:9.5px; font-weight:var(--fw-heavy); letter-spacing:.4px; color:var(--muted);
  text-transform:uppercase;
}
/* kepala hari — menang atas gaya kartu lama */
#view-calendar .week-headrow .week-day-head{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  border:0; border-right:1px solid var(--cal-line); border-radius:0; background:#fafbfd;
  padding:7px 4px 8px; cursor:pointer; width:auto; min-height:0; box-shadow:none;
}
#view-calendar .week-headrow .week-day-head:last-child{ border-right:0; }
#view-calendar .week-headrow .week-day-name{
  font-size:9.5px; font-weight:var(--fw-heavy); letter-spacing:1.2px; text-transform:uppercase; color:var(--muted);
}
#view-calendar .week-headrow .week-day-number{
  font-size:var(--fs-heading); font-weight:var(--fw-heavy); letter-spacing:-.5px; font-variant-numeric:tabular-nums; color:var(--ink);
}
#view-calendar .week-headrow .week-day-head.today .week-day-name{ color:var(--accent); }
#view-calendar .week-headrow .week-day-head.today .week-day-number{
  background:var(--accent); color:var(--panel); border-radius:50%;
  width:28px; height:28px; display:inline-grid; place-items:center; font-size:var(--fs-title);
}
#view-calendar .week-headrow .week-day-head.selected:not(.today){ background:color-mix(in srgb, var(--accent) 6%, var(--panel)); }
/* hitungan agenda dipindah ke pojok kepala hari supaya tidak menggantung di bawah angka */
#view-calendar .week-headrow .week-day-head{ position:relative; }
#view-calendar .week-headrow .week-count{
  position:absolute; top:6px; right:7px;
  font-size:9.5px; font-weight:var(--fw-heavy); color:var(--muted); background:transparent; border:0; padding:0;
  min-width:0; width:auto; height:auto; line-height:1;
}
#view-calendar .week-headrow .calendar-plane{ font-size:var(--fs-caption); opacity:.75; }

/* baris Blok: pita lintas hari + blok satu hari */
#view-calendar .week-alldayrow .week-gutter-cell{ align-items:flex-start; padding-top:7px; }
#view-calendar .week-allday{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--ui-05) 0; padding:5px 0 6px; align-content:start;
}
/* WARNA DASAR WAJIB (7 Sep 2026, laporan pemilik "Delegate di Kalender hitam").
   Ketiga permukaan pita/kartu Kalender adalah <button>. `font:inherit` TIDAK
   mewarisi `color`, dan `border:1px solid` tanpa nilai warna memakai currentColor,
   sehingga tanpa tiga properti di bawah peramban jatuh ke gaya UA: teks
   `buttontext` HITAM di atas `buttonface` abu — apa pun kelas statusnya, di kedua
   tema (aplikasi ini tidak pernah menyetel color-scheme). Ini akar hitamnya, dan
   dipaku DI SUMBER supaya tidak bisa kambuh lewat daftar kelas yang tertinggal. */
#view-calendar .week-band{
  appearance:none; font:inherit; cursor:pointer; text-align:left;
  color:var(--ink); background:var(--panel); border-color:var(--line);
  height:18px; margin:0 3px; padding:0 var(--ui-2); border-radius:6px; border:1px solid;
  font-size:10.5px; font-weight:750; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Pita Blok Mingguan memakai token status yang SAMA dengan pita Bulan
   (.calendar-band di atas), kartu agenda, lencana, dan CCTheme iOS/Flutter —
   satu warna per status di semua permukaan. Sebelum ini .week-band tidak punya
   SATU PUN aturan status: Delegasi, Kirim Bunga, dan yang lain semuanya hitam. */
#view-calendar .week-band.status-approved{ background:var(--status-approved-bg); border-color:var(--status-approved-border); color:var(--status-approved); }
#view-calendar .week-band.status-pending{ background:var(--status-pending-bg); border-color:var(--status-pending-border); color:var(--status-pending); }
#view-calendar .week-band.status-rejected{ background:var(--status-rejected-bg); border-color:var(--status-rejected-border); color:var(--status-rejected); }
#view-calendar .week-band.status-delegated{ background:var(--status-delegated-bg); border-color:var(--status-delegated-border); color:var(--status-delegated); }
#view-calendar .week-band.status-tapping{ background:var(--status-tapping-bg); border-color:var(--status-tapping-border); color:var(--status-tapping); }
#view-calendar .week-band.status-waiting{ background:var(--status-waiting-bg); border-color:var(--status-waiting-border); color:var(--status-waiting); }
#view-calendar .week-band.status-flower{ background:var(--status-flower-bg); border-color:var(--status-flower-border); color:var(--status-flower); }
#view-calendar .week-band.status-resched{ background:var(--status-resched-bg); border-color:var(--status-resched-border); color:var(--status-resched); }
#view-calendar .week-allday-more{ font-size:9.5px; font-weight:750; color:var(--muted); padding:0 var(--ui-2); align-self:center; }

/* kanvas jam */
#view-calendar .week-canvas{
  position:relative; display:grid; grid-template-columns:var(--wk-gutter) 1fr;
}
#view-calendar .week-gutter{ position:relative; border-right:1px solid var(--cal-line); display:block; }
#view-calendar .week-hour{
  position:absolute; right:7px; transform:translateY(-6px);
  font-size:9.5px; font-weight:750; color:color-mix(in srgb, var(--ink) 38%, transparent);
  font-variant-numeric:tabular-nums;
}
#view-calendar .week-cols{ position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
#view-calendar .week-col{ position:relative; border-right:1px solid var(--cal-line); min-width:0; }
#view-calendar .week-col:last-child{ border-right:0; }
#view-calendar .week-col.today{ background:color-mix(in srgb, var(--accent) 4%, transparent); }
#view-calendar .week-hline{ position:absolute; left:0; right:0; height:1px; background:color-mix(in srgb, var(--ink) 7%, transparent); }

/* agenda berjam: diposisikan menurut jam & durasi */
#view-calendar .week-cols .week-agenda-item{
  position:absolute; display:flex; flex-direction:column; gap:0; overflow:hidden;
  margin:0 0 0 2px; padding:3px 6px; border-radius:7px; border:1px solid; border-left-width:3px;
  text-align:left; cursor:pointer; min-height:0; box-shadow:none;
  font-size:10.5px; line-height:1.3;
}
#view-calendar .week-cols .week-agenda-item:hover{ filter:brightness(.97); z-index:4; }
/* Di kanvas waktu POSISI PIKSEL ADALAH INFORMASI: kartu tidak boleh bergeser saat
   disorot. Kit kaca memasukkan .week-agenda-item ke transition:transform + hover
   translateY(-1px) (app.css:5147/5155) — di daftar biasa itu manis, di sini ia
   menggeser kartu 1px dari garis jamnya. Netralkan khusus di dalam kanvas. */
#view-calendar .week-cols .week-agenda-item{ transition:filter .18s ease; }
#view-calendar .week-cols .week-agenda-item:hover{ transform:none; }
#view-calendar .week-cols .week-agenda-time{
  font-size:9.5px; font-weight:var(--fw-heavy); font-variant-numeric:tabular-nums; opacity:.85; flex:0 0 auto;
}
#view-calendar .week-cols .week-agenda-title{
  font-weight:var(--fw-bold); overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
}
#view-calendar .week-cols .week-agenda-item.is-short{ flex-direction:row; align-items:center; gap:5px; padding:var(--ui-05) var(--ui-15); }
#view-calendar .week-cols .week-agenda-item.is-short .week-agenda-title{ -webkit-line-clamp:1; white-space:nowrap; }

/* garis "sekarang" */
#view-calendar .week-now{ position:absolute; left:0; right:0; display:flex; align-items:center; z-index:6; pointer-events:none; }
#view-calendar .week-now-dot{ width:9px; height:9px; border-radius:50%; background:#e5262b; margin-left:-4px; flex:0 0 auto; box-shadow:0 0 0 3px color-mix(in srgb, #e5262b 16%, transparent); }
#view-calendar .week-now-line{ flex:1; height:1.5px; background:#e5262b; opacity:.7; }

@media (max-width:900px){
  #view-calendar .week-stage{ --wk-gutter:42px; }
  #view-calendar .week-headrow .week-day-number{ font-size:var(--fs-title); }
  #view-calendar .week-cols .week-agenda-title{ -webkit-line-clamp:2; }
}

/* ============================================================
   EVENT KALENDER (22 Jul) — penanda ringan, bukan agenda.
   Gaya: netral slate + tepi putus-putus supaya sekali pandang terbedakan dari
   agenda ber-status. !important diperlukan untuk menang atas aturan surface
   kalender (app.css "warna keputusan selalu menjadi surface Kalender").
   ============================================================ */
#view-calendar .calendar-band.is-calendar-event,
#view-calendar .week-band.is-calendar-event{
  background:var(--status-waiting-bg) !important;
  border-color:var(--status-waiting) !important;
  border-style:dashed !important;
  color:var(--status-waiting) !important;
  font-style:italic;
}
#view-calendar .calendar-day .calendar-pill.calendar-chip.is-calendar-event{
  background:var(--status-waiting-bg) !important;
  border:1px dashed var(--status-waiting) !important;
  color:var(--status-waiting) !important;
  font-style:italic;
}
#view-calendar .calendar-day-event.is-calendar-event{
  background:var(--status-waiting-bg) !important;
  border:1px dashed var(--status-waiting) !important;
  color:var(--status-waiting) !important;
}

/* Jenis event -> warna (tetap putus-putus + miring = identitas "event").
   KEMENKO = tosca khas (bukan warna status mana pun); PD = biru; KRESNA = ungu. */
#view-calendar .calendar-band.is-calendar-event.evt-kemenko,
#view-calendar .week-band.is-calendar-event.evt-kemenko,
#view-calendar .calendar-day .calendar-pill.calendar-chip.is-calendar-event.evt-kemenko,
#view-calendar .day-timed-item.is-calendar-event.evt-kemenko,
#view-calendar .calendar-day-event.is-calendar-event.evt-kemenko{
  background:#dff3f0 !important; border-color:#0d7a6a !important; color:#0d7a6a !important;
}
#view-calendar .calendar-band.is-calendar-event.evt-pd,
#view-calendar .week-band.is-calendar-event.evt-pd,
#view-calendar .calendar-day .calendar-pill.calendar-chip.is-calendar-event.evt-pd,
#view-calendar .day-timed-item.is-calendar-event.evt-pd,
#view-calendar .calendar-day-event.is-calendar-event.evt-pd{
  /* biru TUA (navy) — permintaan pemilik: beda dari biru Approved (#1d4ed8) */
  background:#dfe6f6 !important; border-color:#1e3a8a !important; color:#1e3a8a !important;
}
#view-calendar .calendar-band.is-calendar-event.evt-kresna,
#view-calendar .week-band.is-calendar-event.evt-kresna,
#view-calendar .calendar-day .calendar-pill.calendar-chip.is-calendar-event.evt-kresna,
#view-calendar .day-timed-item.is-calendar-event.evt-kresna,
#view-calendar .calendar-day-event.is-calendar-event.evt-kresna{
  background:var(--status-delegated-bg) !important; border-color:var(--status-delegated) !important; color:var(--status-delegated) !important;
}
/* FITUR 5 (23 Jul 2026): pita EVENT HUT — fuchsia, tak bentrok token status maupun
   3 kind lain (KEMENKO tosca, PD biru tua, KRESNA ungu). */
#view-calendar .calendar-band.is-calendar-event.evt-hut,
#view-calendar .week-band.is-calendar-event.evt-hut,
#view-calendar .calendar-day .calendar-pill.calendar-chip.is-calendar-event.evt-hut,
#view-calendar .day-timed-item.is-calendar-event.evt-hut,
#view-calendar .calendar-day-event.is-calendar-event.evt-hut{
  background:#fbe8ff !important; border-color:var(--evt-hut-ink) !important; color:var(--evt-hut-ink) !important;
}

/* Form Event Kalender (13 Sep 2026) — compact & rapi setara form agenda biasa:
   irama vertikal TUNGGAL (gap 10px, tanpa margin ganda), kontrol seragam
   --ctrl-h/--ctrl-fs/--radius-control, grid 3 kolom jenis/mulai/selesai, dan
   checkbox "Ulangi setiap tahun" sebagai tick kecil 17px (reset aturan input global). */
#calendarEventModal .modal.cev-modal{ max-width:760px; }
#calendarEventForm.cev-form{ display:flex; flex-direction:column; gap:var(--ui-25); padding:var(--ui-1) var(--ui-05) var(--ui-05); }
#calendarEventForm .cev-field{ display:block; margin:0; }
#calendarEventForm .calendar-event-lbl{ display:block; font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--muted); margin-bottom:5px; }
#calendarEventForm .calendar-event-lbl .req{ color:#b3261e; margin-left:2px; }
#calendarEventForm input[type=text],
#calendarEventForm input[type=url],
#calendarEventForm input[type=date],
#calendarEventForm select,
#calendarEventForm textarea{
  width:100%; min-height:var(--ctrl-h); border:1px solid var(--line); border-radius:var(--radius-control);
  padding:9px 12px; background:var(--panel); color:var(--ink); font:inherit; font-size:var(--ctrl-fs);
}
#calendarEventForm input:focus, #calendarEventForm select:focus, #calendarEventForm textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
#calendarEventForm textarea{ min-height:72px; resize:vertical; line-height:var(--lh-reading); }
#calendarEventForm .calendar-event-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ui-25);
}
#calendarEventForm .cev-hint{ margin:-4px 0 0; font-size:var(--fs-caption); }
/* tick kecil: reset LENGKAP aturan input global (pola .bulk-delegate-item>input) */
#calendarEventForm .calendar-event-repeat{
  display:flex; align-items:center; gap:var(--ui-2); margin:0; padding:2px 0; cursor:pointer;
  border:0; background:transparent; border-radius:0;
}
#calendarEventForm .calendar-event-repeat input[type=checkbox]{
  appearance:auto; width:17px; min-width:17px; height:17px; min-height:17px;
  margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
  accent-color:var(--accent); flex:0 0 auto;
}
/* cincin fokus keyboard: reset di atas mematikan box-shadow & outline warisan */
#calendarEventForm .calendar-event-repeat input[type=checkbox]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
#calendarEventForm .calendar-event-repeat span{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 var(--ui-15); min-width:0; }
#calendarEventForm .calendar-event-repeat b{ font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--ink); }
#calendarEventForm .calendar-event-repeat small{ font-size:var(--fs-caption); color:var(--muted); font-weight:400; }
#calendarEventForm .calendar-event-actions{ display:flex; justify-content:flex-end; gap:var(--ui-25); margin-top:var(--ui-05); }
#calendarEventForm .calendar-event-actions .btn{ min-height:var(--ctrl-h); border-radius:var(--radius-control); padding:9px 18px; font-weight:var(--fw-bold); }
@media (max-width:640px){
  #calendarEventForm .calendar-event-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   REDESIGN KALENDER HARIAN (22 Jul) — "Panggung Waktu".
   #selectedDateList kini berisi .day-stage: baris Blok/Event di atas + kanvas jam
   (agenda diposisikan menurut jam & durasi, bentrok berdampingan, garis "sekarang").
   Kontrak DOM utuh: id selectedDateList tetap, tiap agenda tetap ber-data-agenda-preview
   + tone status + kelas jenis event. Rail tanggal kiri (day-focus-date) tak disentuh.
   ============================================================ */
#view-calendar #selectedDateList{ display:block; }
#view-calendar .day-stage{ display:block; }
#view-calendar .day-allday{ display:flex; flex-direction:column; gap:var(--ui-15); margin:0 0 12px; }
#view-calendar .day-empty-hint{ font-size:var(--fs-label); color:var(--muted); padding:var(--ui-2) var(--ui-05); }

#view-calendar .day-canvas{
  position:relative; display:grid; grid-template-columns:56px 1fr;
  border:1px solid var(--cal-line); border-radius:var(--radius-control); overflow:hidden; background:var(--panel);
}
#view-calendar .day-gutter{ position:relative; border-right:1px solid var(--cal-line); display:block; }
#view-calendar .day-hour{
  position:absolute; right:8px; transform:translateY(-6px);
  font-size:10px; font-weight:750; color:color-mix(in srgb, var(--ink) 38%, transparent);
  font-variant-numeric:tabular-nums;
}
#view-calendar .day-col{ position:relative; }
#view-calendar .day-hline{ position:absolute; left:0; right:0; height:1px; background:color-mix(in srgb, var(--ink) 7%, transparent); }

#view-calendar .day-timed-item{
  position:absolute; display:flex; flex-direction:column; gap:1px; overflow:hidden;
  /* Lihat catatan "WARNA DASAR WAJIB" pada .week-band. */
  color:var(--ink); background:var(--panel); border-color:var(--line);
  margin-left:4px; padding:var(--ui-15) var(--ui-25); border-radius:9px; border:1px solid; border-left-width:4px;
  text-align:left; cursor:pointer; font-size:11.5px; line-height:var(--lh-snug); box-shadow:none;
}
#view-calendar .day-timed-item:hover{ filter:brightness(.97); z-index:4; }
#view-calendar .day-timed-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--ui-2); }
#view-calendar .day-timed-time{
  font-size:10.5px; font-weight:var(--fw-heavy); font-variant-numeric:tabular-nums; opacity:.85;
  display:inline-flex; align-items:center; gap:var(--ui-1);
}
#view-calendar .day-timed-head .badge{
  min-height:0; padding:1px 7px; border-radius:6px; font-size:9.5px; font-weight:var(--fw-heavy); flex:0 0 auto;
}
#view-calendar .day-timed-title{
  font-weight:750; font-size:12.5px; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
#view-calendar .day-timed-meta{
  font-size:10.5px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#view-calendar .day-timed-item.is-short{ flex-direction:row; align-items:center; gap:var(--ui-2); padding:var(--ui-1) var(--ui-25); }
#view-calendar .day-timed-item.is-short .day-timed-head{ flex:0 0 auto; }
#view-calendar .day-timed-item.is-short .day-timed-title{ -webkit-line-clamp:1; white-space:nowrap; flex:1; }
#view-calendar .day-timed-item.is-short .day-timed-meta{ display:none; }

#view-calendar .day-now{ position:absolute; left:-56px; right:0; display:flex; align-items:center; z-index:6; pointer-events:none; }
#view-calendar .day-now-lbl{
  width:44px; text-align:center; font-size:9.5px; font-weight:var(--fw-heavy); color:#fff; background:#e5262b;
  border-radius:5px; padding:var(--ui-05) 0; margin-right:4px; font-variant-numeric:tabular-nums; flex:0 0 auto;
}
#view-calendar .day-now-dot{ width:9px; height:9px; border-radius:50%; background:#e5262b; flex:0 0 auto; box-shadow:0 0 0 3px color-mix(in srgb, #e5262b 16%, transparent); }
#view-calendar .day-now-line{ flex:1; height:1.5px; background:#e5262b; opacity:.7; }
/* kartu berjam Harian: warna status (token yang sama dgn seluruh kalender) */
#view-calendar .day-timed-item.status-approved{ background:var(--status-approved-bg); border-color:var(--status-approved-border); color:var(--status-approved); }
#view-calendar .day-timed-item.status-pending{ background:var(--status-pending-bg); border-color:var(--status-pending-border); color:var(--status-pending); }
#view-calendar .day-timed-item.status-rejected{ background:var(--status-rejected-bg); border-color:var(--status-rejected-border); color:var(--status-rejected); }
#view-calendar .day-timed-item.status-delegated{ background:var(--status-delegated-bg); border-color:var(--status-delegated-border); color:var(--status-delegated); }
#view-calendar .day-timed-item.status-tapping{ background:var(--status-tapping-bg); border-color:var(--status-tapping-border); color:var(--status-tapping); }
#view-calendar .day-timed-item.status-waiting{ background:var(--status-waiting-bg); border-color:var(--status-waiting-border); color:var(--status-waiting); }
/* Dua keluarga yang lahir 27 Jul 2026 tidak pernah menyusul ke daftar ini —
   kartunya jatuh ke gaya UA hitam sampai 7 Sep 2026. */
#view-calendar .day-timed-item.status-flower{ background:var(--status-flower-bg); border-color:var(--status-flower-border); color:var(--status-flower); }
#view-calendar .day-timed-item.status-resched{ background:var(--status-resched-bg); border-color:var(--status-resched-border); color:var(--status-resched); }
/* label jam pertama jangan terpotong tepi atas kanvas */
#view-calendar .day-gutter .day-hour:first-child{ transform:translateY(2px); }

/* Preview Event: badge jenis + baris kelengkapan bergaya popup kategori checklist
   agenda biasa (anatomi .checklist-category-popup-item) + hapus grup */
#calendarEventPreviewModal .modal.cev-preview-modal{ max-width:560px; }
.cev-kind-badge{
  display:inline-block; font-size:10.5px; font-weight:var(--fw-heavy); letter-spacing:.8px;
  padding:3px 10px; border-radius:7px; border:1px dashed var(--status-waiting);
  background:var(--status-waiting-bg); color:var(--status-waiting); font-style:italic;
}
.cev-kind-badge.evt-kemenko{ background:#dff3f0; border-color:#0d7a6a; color:#0d7a6a; }
.cev-kind-badge.evt-pd{ background:#dfe6f6; border-color:#1e3a8a; color:#1e3a8a; }
.cev-kind-badge.evt-kresna{ background:var(--status-delegated-bg); border-color:var(--status-delegated); color:var(--status-delegated); }
.cev-kind-badge.evt-hut{ background:#fbe8ff; border-color:#c026d3; color:var(--evt-hut-ink); }
#cevPreviewBody.cev-preview-body{ padding:var(--ui-05) 0 var(--ui-2); gap:var(--ui-15); max-height:min(56dvh,520px); }
#cevPreviewBody .cev-row{ min-height:52px; padding:8px 11px; }
#cevPreviewBody .cev-row small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cevPreviewBody .cev-row.is-na{ opacity:.72; }
#cevPreviewBody .cev-row-opsional{
  display:inline-block; margin-left:5px; font-style:normal; font-size:10px; font-weight:var(--fw-bold);
  color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:1px 6px; vertical-align:1px;
}
#cevPreviewBody .cev-line.muted{ color:var(--muted); font-style:italic; font-size:var(--fs-body); padding:var(--ui-2) var(--ui-05); }
#deleteCalendarEventBtn.cev-delete{
  background:var(--status-rejected-bg); border:1px solid var(--status-rejected);
  color:var(--status-rejected); font-weight:750; margin-right:auto;
}
#deleteCalendarEventBtn.cev-delete:hover{ filter:brightness(.97); }

/* Kelengkapan Event = kartu Dokumen Pendukung: baris ringkas (label + chip status),
   dibuka -> teks manual + tautan Drive + berkas berdampingan (tanpa tab mode). */
#calendarEventForm .cev-fields{ display:flex; flex-direction:column; gap:var(--ui-15); margin:var(--ui-05) 0 0; }
#calendarEventForm .cev-fields-title{
  display:flex; align-items:baseline; gap:var(--ui-2); margin:0 0 2px;
  font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
}
#calendarEventForm .cev-fields-title small{ text-transform:none; letter-spacing:0; font-weight:500; font-size:var(--fs-caption); }
#calendarEventForm .cev-item{
  border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden;
}
#calendarEventForm .cev-item-head{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:var(--ui-25); padding:8px 12px; min-height:40px;
}
#calendarEventForm .cev-item-head::-webkit-details-marker{ display:none; }
#calendarEventForm .cev-item-head::after{
  content:"\203A"; font-size:17px; color:var(--muted); transform:rotate(90deg);
  transition:transform .15s; margin-left:2px;
}
#calendarEventForm .cev-item[open] .cev-item-head::after{ transform:rotate(-90deg); }
#calendarEventForm .cev-item-label{ font-size:var(--fs-body); font-weight:750; color:var(--ink); }
#calendarEventForm .cev-item-chip{
  font-size:10.5px; font-weight:var(--fw-heavy); padding:2px 9px; border-radius:99px; margin-left:auto;
  background:var(--status-rejected-bg); color:var(--status-rejected); border:1px solid var(--status-rejected-border);
}
#calendarEventForm .cev-item-chip.is-filled{
  background:var(--success-bg); color:var(--success); border-color:color-mix(in srgb, var(--success) 40%, transparent);
}
#calendarEventForm .cev-item-body{ padding:0 12px 11px; display:flex; flex-direction:column; gap:var(--ui-15); }
#calendarEventForm textarea.cev-input{ min-height:64px; }
#calendarEventForm .cev-file-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ui-15); }
#calendarEventForm .cev-file-list{ display:flex; flex-wrap:wrap; gap:var(--ui-15); width:100%; }
#calendarEventForm .cev-file-list[hidden]{ display:none; }
#calendarEventForm .cev-file-chip{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink);
  border:1px solid var(--line); border-radius:99px; padding:3px 6px 3px 9px; background:var(--bg);
}
#calendarEventForm .cev-file-chip.is-new{ border-style:dashed; color:var(--accent); }
#calendarEventForm .cev-file-chip small{ color:var(--muted); font-size:10px; }
#calendarEventForm .cev-file-remove{
  appearance:none; border:0; background:transparent; color:var(--muted); font:inherit; font-size:14px;
  line-height:1; width:20px; height:20px; border-radius:50%; cursor:pointer; padding:0;
}
#calendarEventForm .cev-file-remove:hover,
#calendarEventForm .cev-file-remove:focus-visible{ background:var(--status-rejected-bg); color:var(--status-rejected); outline:none; }
/* chip 'Tidak tersedia' (ditandai lewat editor checklist biasa): abu, bukan merah */
#calendarEventForm .cev-item-chip.is-na{ background:var(--bg); color:var(--muted); border-color:var(--line); }
#calendarEventForm .cev-file-pick{ min-height:var(--ctrl-h-sm); border-radius:var(--radius-chip); font-weight:var(--fw-bold); flex:0 0 auto; padding:6px 12px; }
#editCalendarEventBtn{ font-weight:var(--fw-bold); }

/* ============================================================
   PENANDA "HARI INI" DIPERTEGAS (23 Jul) — permintaan pemilik: jelas di tanggal
   mana kita berada, di ketiga mode. Redesign kartu sempat meredam tint lamanya.
   ============================================================ */
/* Bulanan: cincin aksen + tint lebih terang (angka tanggal sudah lingkaran terisi) */
#view-calendar .calendar-suite .calendar-week .calendar-day.today{
  background:color-mix(in srgb, var(--accent) 7%, var(--panel));
  box-shadow:inset 0 0 0 2px var(--accent);
}
/* Mingguan: kepala hari + garis aksen di puncak kolom + tint kolom lebih terang */
#view-calendar .week-headrow .week-day-head.today{
  background:color-mix(in srgb, var(--accent) 8%, var(--panel));
  box-shadow:inset 0 -3px 0 0 var(--accent);
}
#view-calendar .week-col.today{
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow:inset 0 3px 0 0 var(--accent);
}
/* Harian: rail tanggal menyala saat menampilkan hari ini */
#view-calendar .day-focus-date.is-today .day-focus-kicker{ color:var(--accent); }
#view-calendar .day-focus-date.is-today .day-focus-kicker::after{
  content:" · HARI INI"; font-weight:var(--fw-heavy); letter-spacing:.6px; color:var(--accent);
}
#view-calendar .day-focus-date.is-today strong{ color:var(--accent); }

/* Ketuk slot jam kosong -> buat agenda: beri afordans halus (kursor + kilau lembut).
   Hanya pada kanvas jam; kartu agenda punya kursor & handler sendiri. */
#view-calendar [data-slot-date]{ cursor:copy; }
#view-calendar [data-slot-date]:hover{ background:color-mix(in srgb, var(--accent) 3%, transparent); }
#view-calendar .week-col.today[data-slot-date]:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
#view-calendar [data-slot-date] .week-agenda-item,
#view-calendar [data-slot-date] .day-timed-item{ cursor:pointer; }

/* ============================================================
   GESER & UBAH DURASI di kanvas (23 Jul). Fluid: selama menggeser hanya
   transform/height yang berubah (GPU), tanpa render ulang. Pegangan resize
   hanya muncul saat kartu cukup tinggi & disorot.
   ============================================================ */
#view-calendar .week-agenda-item,
#view-calendar .day-timed-item{ touch-action:none; user-select:none; }
#view-calendar .week-cols .week-agenda-item.is-cal-dragging,
#view-calendar .day-col .day-timed-item.is-cal-dragging{
  z-index:20; opacity:.94; cursor:grabbing;
  box-shadow:0 12px 28px -10px rgba(16,24,40,.45);
  transition:none;
}
body.cal-dragging{ cursor:grabbing; user-select:none; }
body.cal-dragging #view-calendar [data-slot-date]{ cursor:grabbing; }

/* pegangan tarik-durasi di tepi bawah kartu */
#view-calendar .cal-resize{
  position:absolute; left:0; right:0; bottom:0; height:9px; cursor:ns-resize;
  opacity:0; transition:opacity .12s;
}
#view-calendar .cal-resize::after{
  content:""; position:absolute; left:50%; bottom:2.5px; width:26px; height:3px;
  transform:translateX(-50%); border-radius:99px; background:currentColor; opacity:.55;
}
#view-calendar .week-agenda-item:hover .cal-resize,
#view-calendar .day-timed-item:hover .cal-resize{ opacity:1; }
#view-calendar .week-agenda-item.is-short .cal-resize,
#view-calendar .day-timed-item.is-short .cal-resize{ display:none; }

/* label waktu melayang saat menggeser */
.cal-drag-badge{
  position:fixed; left:0; top:0; z-index:9999; pointer-events:none;
  background:var(--ink); color:var(--panel);
  font-size:11.5px; font-weight:var(--fw-heavy); font-variant-numeric:tabular-nums;
  padding:5px 10px; border-radius:8px; white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce){
  #view-calendar .cal-resize{ transition:none; }
}

/* ===== S2-R2: nama petugas teknis tappable -> WhatsApp/Telepon ===== */
.s2-wa-names{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
/* S2-R2: kontainer KV/tile punya aturan `span{display:block; font kecil}` (spesifisitas
   0,1,1) yang mengalahkan .s2-wa-names — kunci chip agar konsisten (flex, ukuran normal,
   tanpa transform) di Ringkasan Home & Detail Rangkuman. */
.agenda-preview-kv .s2-wa-names,
.detail-brief-tile .s2-wa-names{display:flex;font-size:inherit;letter-spacing:normal;margin:0}
.agenda-preview-kv .s2-wa-name,
.detail-brief-tile .s2-wa-name{font-size:12.5px;letter-spacing:normal;text-transform:none;margin:0}
.s2-wa-name{font:inherit;font-weight:var(--fw-bold);color:var(--cc-accent,#123c52);background:rgba(18,60,82,.08);
  border:1px solid rgba(18,60,82,.14);border-radius:8px;padding:2px 9px;cursor:pointer;line-height:var(--lh-snug);
  transition:background .12s ease,transform .06s ease}
.s2-wa-name:hover{background:rgba(18,60,82,.15)}
.s2-wa-name:active{transform:translateY(1px)}
.s2-wa-name.s2-wa-nonum{color:var(--muted);background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.s2-wa-name::before{content:"";display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-1px;
  background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.4A10 10 0 1 0 12 2z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.4A10 10 0 1 0 12 2z'/></svg>") center/contain no-repeat;opacity:.7}
.s2-wa-backdrop{position:fixed;inset:0;background:rgba(15,25,32,.42);display:none;align-items:center;justify-content:center;z-index:9600;backdrop-filter:blur(2px)}
.s2-wa-backdrop.active{display:flex;animation:s2fade .14s ease}
@keyframes s2fade{from{opacity:0}to{opacity:1}}
.s2-wa-menu{background:#fff;border-radius:var(--radius-inner);min-width:270px;max-width:88vw;box-shadow:0 18px 48px rgba(15,25,32,.28);overflow:hidden;animation:s2pop .16s ease}
@keyframes s2pop{from{transform:translateY(8px) scale(.98);opacity:.6}to{transform:none;opacity:1}}
.s2-wa-menu-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-25);padding:13px 16px;border-bottom:1px solid #eef2f4}
.s2-wa-menu-head strong{font-size:var(--fs-title);color:#20303a}
.s2-wa-close{border:none;background:none;font-size:var(--fs-display);line-height:1;color:#8a97a0;cursor:pointer;padding:0 var(--ui-05)}
.s2-wa-act{display:block;padding:13px 16px;font-size:14px;font-weight:var(--fw-medium);color:#123c52;text-decoration:none;border-bottom:1px solid #f2f5f6;cursor:pointer}
.s2-wa-act:last-child{border-bottom:none}
.s2-wa-act:hover{background:#f3f8f9}
.s2-wa-disabled{color:#8a97a0;font-weight:500;cursor:default}
.s2-wa-disabled:hover{background:none}

/* S2-R2: ikon aksi WhatsApp (chat/call) */
.s2-wa-act{display:flex;align-items:center;gap:9px}
.s2-wa-act small{color:#8a97a0;font-weight:500;font-size:var(--fs-caption);margin-left:auto}
.s2-wa-ic{width:17px;height:17px;flex:none;background:#25d366;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.s2-wa-ic-chat{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.4A10 10 0 1 0 12 2z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.4A10 10 0 1 0 12 2z'/></svg>")}
.s2-wa-ic-call{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.6c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.2 1z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.6c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.2 1z'/></svg>")}

/* ===== S2-R5: viewer #linkModal — gaya Apple Quick Look (near full-screen, opsi di ⋮) ===== */
#linkModal .modal.link-modal{width:96vw;max-width:none;height:94vh;height:94dvh;display:flex;flex-direction:column;
  padding:0;border-radius:var(--radius-inner);overflow:hidden}
/* SATU baris tipis: judul kiri, kontrol (zoom+⋮) & close kanan. Semua lain di-absolute
   agar TIDAK menambah tinggi -> konten naik maksimal (full ke atas). */
#linkModal .modal-head{flex:none;padding:7px 10px 7px 16px;margin:0;border:none;align-items:center;position:relative;z-index:25;min-height:0}
#linkModal .modal-head h3{font-size:12.5px;font-weight:var(--fw-bold);letter-spacing:-.01em;line-height:1.25;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* URL disembunyikan dari header (tersedia via menu ⋮) demi header 1-baris. */
#linkModal .modal-head .muted{display:none}
#linkModal .modal-head .icon-btn{width:28px;height:28px;font-size:16px;flex:none}
#linkModal .link-popup-note{display:none}
/* Toolbar (zoom + ⋮) MELEBUR ke baris header, di kiri tombol close — absolute,
   jadi tak memakan baris sendiri. */
#linkModal .link-reader-toolbar{position:absolute;top:6px;right:64px;left:auto;bottom:auto;width:auto;
  flex:none;padding:0;margin:0;justify-content:flex-end;gap:7px;z-index:30;overflow:visible}
/* Jarak lega antara ⋮ (kontrol) dan tombol ✕. */
#linkModal .modal-head .icon-btn{margin-left:8px}
#linkModal .link-reader-actions{gap:var(--ui-05);order:1;margin:0}
#linkModal .link-reader-zoom-controls{order:2}
#linkModal .link-reader-more-wrap{order:3}
/* Band lampiran saat KOSONG (atribut hidden) jangan makan ruang -> konten mepet header. */
#linkModal .link-reader-attachments[hidden]{display:none;padding:0;margin:0;border:0;height:0}
/* Viewport isi sisa tinggi penuh, tanpa jarak atas. */
#linkModal .link-reader-viewport{flex:1 1 auto;min-height:0;margin:0;border-radius:0}
#linkModal .link-reader-actions .btn{min-height:24px;padding:var(--ui-05) var(--ui-2);font-size:11.5px;box-shadow:none;background:rgba(0,0,0,.04);border:none}
#linkModal .link-reader-zoom-controls{padding:var(--ui-05);gap:var(--ui-05);box-shadow:none;background:rgba(0,0,0,.04);border-color:transparent}
#linkModal .link-reader-zoom-controls .btn{min-height:23px;padding:var(--ui-05) var(--ui-2);font-size:var(--fs-caption);box-shadow:none;background:transparent;border:none}
#linkModal .link-reader-zoom-controls .btn:hover{background:rgba(0,0,0,.06)}
#linkModal .link-reader-zoom-label{min-width:40px;font-size:var(--fs-caption);font-weight:var(--fw-bold)}
/* Tombol titik-tiga (⋮). */
#linkModal .link-reader-more-wrap{position:relative}
#linkModal .link-reader-more-btn{width:30px;height:30px;border-radius:9px;border:none;background:rgba(0,0,0,.04);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
#linkModal .link-reader-more-btn:hover{background:rgba(0,0,0,.09)}
#linkModal .link-reader-more-dots{width:4px;height:4px;border-radius:50%;background:var(--ink);position:relative}
#linkModal .link-reader-more-dots::before,#linkModal .link-reader-more-dots::after{content:"";position:absolute;left:0;width:4px;height:4px;border-radius:50%;background:var(--ink)}
#linkModal .link-reader-more-dots::before{top:-6px}
#linkModal .link-reader-more-dots::after{top:6px}
/* Dropdown opsi. */
#linkModal .link-reader-more-menu{position:absolute;top:calc(100% + 6px);right:0;display:none;flex-direction:column;
  align-items:stretch;gap:var(--ui-05);min-width:212px;background:#fff;border:1px solid #e7edf0;border-radius:13px;
  box-shadow:0 16px 44px rgba(15,25,32,.22);padding:var(--ui-15);z-index:40}
#linkModal .link-reader-more-wrap.is-open .link-reader-more-menu{display:flex}
#linkModal .link-reader-more-menu .btn{justify-content:flex-start;width:100%;text-align:left;padding:9px 12px;
  font-size:var(--fs-body);font-weight:var(--fw-medium);border-radius:9px;background:transparent;border:none;box-shadow:none;color:var(--ink);min-height:0}
#linkModal .link-reader-more-menu .btn:hover{background:rgba(18,60,82,.08)}
#linkModal .link-reader-more-menu .btn.primary{color:var(--cc-accent,#123c52)}
[data-theme="dark"] #linkModal .link-reader-more-menu{background:#1b2530;border-color:#2b3742}
/* Konten mengisi sisa layar (edge-to-edge). */
#linkModal .link-reader-viewport{flex:1 1 auto;min-height:0;margin:0;border-radius:0}
#linkModal .link-reader-canvas{min-height:100%}

/* ===== Produktivitas web: lokasi ringkas + ETA ===== */
.agenda-location-trigger{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
  padding:0;
  margin:0;
  text-align:left;
  max-width:100%;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.agenda-location-trigger:hover{color:var(--accent)}
.agenda-location-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}
#routeEtaModal{z-index:400}
.route-eta-modal{max-width:620px}
.route-eta-destination,
.route-eta-result{
  border:1px solid var(--line);
  border-radius:var(--radius-inner);
  background:var(--panel-strong);
  padding:14px;
}
.route-eta-destination small{display:block;color:var(--muted);font-weight:var(--fw-heavy);text-transform:uppercase;letter-spacing:.08em}
.route-eta-destination strong{display:block;margin-top:4px;font-size:var(--fs-heading)}
.route-eta-destination p{margin:5px 0 0;color:var(--muted);line-height:1.45}
/* Jembatan alamat -> titik peta (27 Jul 2026): blok muncul HANYA saat tujuan
   belum punya koordinat; menawarkan perkiraan dari alamat + kotak cari manual. */
/* WAJIB: display:grid mengalahkan [hidden] bawaan HTML — tanpa baris ini blok
   muncul di SEMUA agenda, termasuk yang tujuannya sudah punya titik peta
   (tertangkap saat pratinjau visual 27 Jul 2026). */
.route-eta-destination-fix[hidden]{display:none}
.route-eta-destination-fix{
  display:grid;
  gap:var(--ui-2);
  margin:var(--ui-25) 0 0;
  padding:var(--ui-3);
  border:1px solid var(--line);
  border-radius:var(--radius-inner);
  background:color-mix(in srgb,var(--soft) 55%,var(--panel));
}
.route-eta-fix-note{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-label);
  line-height:1.45;
}
.route-eta-fix-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ui-2);
}
.route-eta-fix-actions .btn{
  flex:1 1 auto;
  min-width:0;
}
.route-eta-origin-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--ui-2);margin:12px 0}
.route-eta-origin-search{margin:0 0 12px}
.route-eta-origin-search label,
.route-eta-controls label{display:grid;gap:5px;color:var(--muted);font-size:var(--fs-label);font-weight:var(--fw-heavy);text-transform:uppercase;letter-spacing:.06em}
.route-eta-origin-search input,
.route-eta-controls select{width:100%;min-height:44px}
.route-eta-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--ui-25);margin-bottom:12px}
.route-eta-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ui-2)}
.route-eta-result-grid div{padding:var(--ui-25);border-radius:12px;background:var(--soft);min-width:0}
.route-eta-result-grid small{display:block;color:var(--muted);font-weight:var(--fw-bold)}
.route-eta-result-grid strong{display:block;margin-top:4px;font-size:16px;overflow-wrap:anywhere}
.route-eta-updated{margin:10px 0 0;color:var(--muted);font-size:var(--fs-label)}

/* ===== Presence ringan di header Kalender ===== */
.calendar-presence{position:relative;flex:none}
.calendar-presence-trigger{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:var(--ui-2);
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--panel-strong);
  color:var(--ink);
  padding:5px 10px;
  cursor:pointer;
}
.calendar-presence-avatars{display:flex;align-items:center;padding-left:var(--ui-1)}
.calendar-presence-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  margin-left:-5px;
  border:2px solid var(--panel);
  color:var(--accent-ink);
  background:var(--accent);
  font-size:10px;
  font-weight:900;
}
.calendar-presence-avatar:first-child{margin-left:0}
.calendar-presence-avatar img{width:100%;height:100%;object-fit:cover}
.calendar-presence-more{background:var(--ink);color:var(--panel)}
.calendar-presence-label{font-size:var(--fs-label);font-weight:var(--fw-heavy);white-space:nowrap}
.calendar-presence-popover{
  position:fixed;
  z-index:5000;
  width:min(360px,calc(100vw - 24px));
  max-height:min(420px,65dvh);
  overflow:auto;
  overscroll-behavior:contain;
  padding:var(--ui-25);
  border:1px solid var(--line);
  border-radius:var(--radius-inner);
  background:var(--panel-strong);
  color:var(--ink);
  box-shadow:0 20px 55px rgba(15,23,42,.25);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.calendar-presence-popover-head{position:sticky;top:-10px;z-index:2;display:flex;align-items:center;justify-content:space-between;background:var(--panel-strong);padding:var(--ui-05) var(--ui-05) var(--ui-2)}
.calendar-presence-list{display:grid;gap:var(--ui-15)}
.calendar-presence-user{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center;padding:var(--ui-2);border-radius:12px;background:var(--soft)}
.calendar-presence-user .calendar-presence-avatar{width:36px;height:36px;margin:0;border:0}
.calendar-presence-user strong,.calendar-presence-user small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-presence-user small{margin-top:2px;color:var(--muted)}
.calendar-presence-state{font-size:var(--fs-caption);font-weight:var(--fw-heavy);color:var(--ok);white-space:nowrap}