/* ========================================================================== 
   SocoApp v12.5.1 — internal stability layer

   This file is loaded after the proven v12.4 layout baseline. It intentionally
   avoids global layout rewrites. Public Ticketing, public registration,
   reimbursement public pages, and email templates do not load this asset.
   ========================================================================== */

:root{
  --app-bg:#f4f5fb;
  --app-surface:#fff;
  --app-surface-2:#f8f8fc;
  --app-surface-3:#f0eff8;
  --app-border:#e6e5f2;
  --app-border-strong:#d5d3e7;
  --app-text:#1d184b;
  --app-text-2:#6c6892;
  --app-text-3:#9a97b5;
  --app-accent:#4f46b8;
  --app-accent-soft:#eceafb;
  --app-shadow:0 24px 60px -34px rgba(29,24,75,.6);
}

html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0b100e;
  --paper:#141b17;
  --ink:#f1f4f2;
  --ink-2:#b3beb8;
  --ink-3:#849188;
  --line:#2b3730;
  --line-2:#202923;
  --indigo:#aaa5ff;
  --indigo-soft:#29264a;
  --coral-soft:#3a2222;
  --ui-green:#62d293;
  --ui-green-dark:#7be1a5;
  --ui-green-soft:#183728;
  --ui-border:#2b3730;
  --ui-muted:#b3beb8;
  --ui-ink:#f1f4f2;
  --ui-bg:#0b100e;
  --app-bg:#0b100e;
  --app-surface:#141b17;
  --app-surface-2:#19221d;
  --app-surface-3:#202b24;
  --app-border:#2b3730;
  --app-border-strong:#3d4d44;
  --app-text:#f1f4f2;
  --app-text-2:#b3beb8;
  --app-text-3:#849188;
  --app-accent:#aaa5ff;
  --app-accent-soft:#29264a;
  --app-shadow:0 28px 70px -38px rgba(0,0,0,.78);
}

/* ---------- Containment without changing component layout ---------- */
body.soco-internal{max-width:100%;overflow-x:hidden;background:var(--canvas);color:var(--ink)}
body.soco-internal :where(.app,.main,#views,.view){min-width:0;max-width:100%}
body.soco-internal #views>.view,
body.soco-internal #views>.view>*{min-width:0;max-width:100%}
body.soco-internal :where(img,video,canvas){max-width:100%}
body.soco-internal :where(input,select,textarea,button){min-width:0;max-width:100%}
body.soco-internal :where(.table-wrap,.table-responsive,[class$="-table-wrap"],[class*=" table-wrap"]){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
body.soco-internal :where(.section-head,.page-head,.toolbar,[class$="-toolbar"],[class*="-actions"],.filters,.filter-bar){min-width:0}
body.soco-internal :where(.section-head,.page-head,.toolbar,[class$="-toolbar"],[class*="-actions"]){flex-wrap:wrap}
body.soco-internal :where(h1,h2,h3,h4,p,small,b,strong,label,code){overflow-wrap:anywhere}
body.soco-internal .main{overflow-x:hidden}
body.soco-internal #views{width:min(100%,1440px);margin-inline:auto}

/* ---------- Restore the corrected v12.4 direct-flow rules ---------- */
body.soco-internal #views>.view:not(.hidden)>:first-child{margin-top:0}
body.soco-internal :where(.direct-submodule-page,.ops-page,.participant-page,.log-page,.imp-page,.loc-database-page,.loc-manage-page,.loc-main-page,.fbk-page,.fbk-main-page,.insight-page){display:grid;gap:16px}
body.soco-internal .page-action-strip{margin:0;box-shadow:none;background:#fff}
body.soco-internal .action-strip-spacer{flex:1 1 auto}
body.soco-internal .loc-compact-count{display:flex;align-items:center;gap:9px;margin-left:auto;padding:8px 11px;border:1px solid #e2ebe5;border-radius:12px;background:#f7faf8;color:#174c38}
body.soco-internal .loc-compact-count .ic{width:20px;height:20px}
body.soco-internal .loc-compact-count b{font-size:18px;line-height:1}
body.soco-internal .loc-compact-count small{font-size:10px;color:#718078}
body.soco-internal .booking-view-toggle{flex:none}
body.soco-internal .booking-view-toggle button{min-width:88px}
body.soco-internal .bkg-page .ops-board{padding:18px}
body.soco-internal .bkg-page .ops-section-head{margin-bottom:14px}
body.soco-internal .bkg-page .ops-section-head p{margin-top:3px}
body.soco-internal .bkg-page .ops-filter-bar{margin:0 0 16px}
body.soco-internal .bkg-calendar{border:1px solid var(--ui-border);border-radius:14px;background:#fff}
body.soco-internal .participant-payment-proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px}
body.soco-internal .participant-payment-proof-card{overflow:hidden;border:1px solid #e1e9e4;border-radius:14px;background:#fff}
body.soco-internal .participant-payment-proof-media{aspect-ratio:4/3;background:#f3f6f4;display:grid;place-items:center;overflow:hidden}
body.soco-internal .participant-payment-proof-media a,
body.soco-internal .participant-payment-proof-media img{width:100%;height:100%}
body.soco-internal .participant-payment-proof-media img{object-fit:contain;background:#f7f9f8}
body.soco-internal .participant-proof-empty{padding:20px;color:#78847e;font-size:12px;text-align:center}
body.soco-internal .participant-payment-proof-copy{display:grid;gap:8px;padding:13px}
body.soco-internal .participant-payment-proof-copy>div{display:flex;align-items:center;justify-content:space-between;gap:8px}
body.soco-internal .participant-payment-proof-copy>span{font-size:11px;color:#708078;overflow-wrap:anywhere}
body.soco-internal .impact-workflow-modal{z-index:1250}
body.soco-internal .impact-workflow-modal-box{
  width:min(1240px,calc(100vw - 36px));max-width:none;
  height:min(900px,calc(100vh - var(--internal-dialog-gutter,26px) - var(--internal-dialog-gutter,26px)));
  height:min(900px,calc(100dvh - var(--internal-dialog-gutter,26px) - var(--internal-dialog-gutter,26px)));
  max-height:calc(100vh - var(--internal-dialog-gutter,26px) - var(--internal-dialog-gutter,26px));
  max-height:calc(100dvh - var(--internal-dialog-gutter,26px) - var(--internal-dialog-gutter,26px));
  padding:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:20px
}
body.soco-internal .impact-workflow-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #e4ebe6;background:#fff}
body.soco-internal .impact-workflow-head h3{margin:2px 0 0;font-size:22px}
body.soco-internal .impact-workflow-host{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-gutter:stable;padding:18px 18px max(28px,env(safe-area-inset-bottom));background:#f4f7f5}
body.soco-internal .impact-workflow-host>.imp-page{gap:16px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
body.soco-internal .impact-workflow-host .impact-form-tools{position:sticky;top:-18px;z-index:4;border-radius:0 0 14px 14px}
body.soco-internal .impact-workflow-host .imp-form-actions{position:static;bottom:auto;margin-top:2px}
body.soco-internal .impact-database-actions{justify-content:flex-end}
body.soco-internal .evt-doc-popover.open-up{top:auto!important;bottom:calc(100% + 8px)}

/* ---------- Compact shared toolbars ---------- */
body.soco-internal .workspace-toolbar,
body.soco-internal .workspace-context-bar,
body.soco-internal .direct-action-strip{
  display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;
  margin:0;padding:11px 13px;border:1px solid #dfe8e2;border-radius:15px;background:#fff;
  box-shadow:0 10px 28px -30px rgba(20,55,42,.5)
}
/* Ticketing header: 3 plain action buttons, no left/right label pair like the
   other toolbars — space-between spreads them out with huge gaps on wide
   desktop screens. Group the create actions on the left and pin the review
   alert to the right instead. 2026-08-05, atas permintaan Ikal. */
body.soco-internal .ticketing-direct-actions{justify-content:flex-start;flex-wrap:wrap}
body.soco-internal .ticketing-direct-actions #reg-e-review{margin-left:auto}
@media(max-width:760px){
  body.soco-internal .ticketing-direct-actions #reg-e-review{margin-left:0}
}

/* Ticketing: 5 KPI cards now that "Antrean" moved up here from the removed
   Ringkasan Hari Ini bar. */
body.soco-internal .evt-kpi-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1280px){body.soco-internal .evt-kpi-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){body.soco-internal .evt-kpi-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Ticketing search/filter row: the shared .evt-toolbar grid uses generous
   fr-based columns meant for narrower cards — on a wide desktop card it
   leaves a large dead gap between the search box and the filters. Switch to
   a flex row that keeps the search box and filters close together instead. */
#view-reg-pengaturan .evt-toolbar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:end;align-content:flex-start;gap:9px}
#view-reg-pengaturan .evt-toolbar .evt-search{flex:1 1 280px;max-width:420px}
#view-reg-pengaturan .evt-toolbar>label:not(.evt-search){flex:0 1 200px;max-width:220px}
#view-reg-pengaturan .evt-toolbar #reg-e-clear-filter{margin-left:auto}
@media(max-width:900px){
  #view-reg-pengaturan .evt-toolbar>label:not(.evt-search){flex:1 1 45%;max-width:none}
}

/* Peserta: unify the left "Direktori/Insight" pill-nav with the right action
   buttons so the toolbar reads as one consistent group instead of two
   different-looking halves. Scoped to .people-hub-tabs only, not the
   generic .workspace-nav used elsewhere. */
body.soco-internal .people-hub-tabs{background:transparent;padding:0;gap:8px}
body.soco-internal .people-hub-tabs button{min-height:40px;border:1px solid #dfe8e2;border-radius:11px;background:#fff;padding:9px 14px}
body.soco-internal .people-hub-tabs button:hover{background:#f3f7f4}
body.soco-internal .people-hub-tabs button.active{background:#145f39;color:#fff;border-color:#145f39;box-shadow:none}

/* Peserta: Tinjauan & Refund / Tambah Peserta are now modals, not tabs —
   give them a bit more room than the default .modal-box width. */
body.soco-internal .participant-modal-box{width:min(760px,100%)}
body.soco-internal .participant-modal-head-actions{display:flex;align-items:center;gap:8px}
body.soco-internal .participant-manual-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}

/* Peserta: simplified leaderboard + event context on the detail modal */
/* Leaderboard: card-list (bukan <table>) supaya gak kena aturan mobile
   yang maksa min-width:680px dan bikin scroll horizontal di HP. */
body.soco-internal .participant-leaderboard-simple{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #dfe8e2;border-radius:16px;padding:8px}
body.soco-internal .participant-lb-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 10px;border-radius:12px}
body.soco-internal .participant-lb-row:nth-child(odd){background:#f8faf8}
body.soco-internal .participant-lb-rank{font:800 13px var(--mono);color:#526159;text-align:center}
body.soco-internal .participant-lb-main{display:flex;flex-direction:column;gap:1px;min-width:0}
body.soco-internal .participant-lb-main b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.soco-internal .participant-lb-main span{font-size:11px;color:#728078}
body.soco-internal .participant-lb-wa{font-size:12px;white-space:nowrap}
body.soco-internal .participant-lb-event{display:flex;flex-direction:column;align-items:center;line-height:1.1}
body.soco-internal .participant-lb-event b{font-size:14px}
body.soco-internal .participant-lb-event small{font-size:9px;color:#728078;text-transform:uppercase}
@media(max-width:520px){
  body.soco-internal .participant-lb-row{grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"rank main event" "rank wa event"}
  body.soco-internal .participant-lb-rank{grid-area:rank}
  body.soco-internal .participant-lb-main{grid-area:main}
  body.soco-internal .participant-lb-wa{grid-area:wa;font-size:11px}
  body.soco-internal .participant-lb-event{grid-area:event}
}

/* Section headings Leaderboard/Profil Peserta: cukup satu baris kicker,
   tanpa judul & deskripsi berulang. */
body.soco-internal .participant-insight-leaderboard-head{padding-bottom:6px}
body.soco-internal .participant-insight-leaderboard-head .eyebrow{font-size:11px}

/* Cari + CSV sejajar di semua ukuran layar */
body.soco-internal .participant-filter-actions{display:flex;gap:9px;min-width:0}
body.soco-internal .participant-filter-actions .btn{flex:1;white-space:nowrap}

/* Checkbox+label ("Tampilkan semua bukti transfer" dkk) kena bug yang sama:
   .cek-inline set display:inline-flex tapi gak pernah nyebut flex-direction,
   jadi warisan flex-direction:column dari elemen <label> dasar tetap kepakai
   dan checkbox-nya numpuk di atas teksnya. */
body.soco-internal .cek-inline{flex-direction:row}
body.soco-internal .participant-filter-foot{gap:8px}
body.soco-internal .participant-filter-foot .cek-inline{padding:10px 12px;border:1px solid #dfe8e2;border-radius:12px;background:#f8faf8;font-weight:700}
body.soco-internal .participant-filter-foot .rincian-sm{padding-left:2px}

/* Tombol "Detail" di kartu Data Peserta (mobile) — btn-ghost kelihatan mati,
   bikin kelihatan jelas bisa diklik. */
body.soco-internal .participant-people-table td.r .btn{border:1px solid #174c38;color:#174c38;font-weight:800;background:#fff}
body.soco-internal .participant-people-table td.r .btn:active{background:#eef5f0}
html[data-theme="dark"] body.soco-internal .participant-people-table td.r .btn{background:var(--app-surface-2)!important;border-color:var(--ui-green-dark)!important;color:var(--ui-green-dark)!important}

/* Elemen custom yang ditambahkan sepanjang revisi Ticketing/Peserta/Absensi —
   dulu di-hardcode warna terang, sekarang dikasih padanan gelapnya. */
html[data-theme="dark"] body.soco-internal :where(
  .people-hub-tabs button,.participant-leaderboard-simple,#reg-modal-tutup,
  .participant-detail-event-context,.workspace-metric,.workspace-back,
  .participant-payment-proof-card
){background:var(--app-surface)!important;border-color:var(--app-border)!important;color:var(--app-text)!important}
html[data-theme="dark"] body.soco-internal .participant-lb-row:nth-child(odd){background:var(--app-surface-2)!important}
html[data-theme="dark"] body.soco-internal .participant-filter-foot .cek-inline{background:var(--app-surface-2)!important;border-color:var(--app-border)!important;color:var(--app-text)!important}
html[data-theme="dark"] body.soco-internal :where(.workspace-nav button:hover,.workspace-nav button.active){background:var(--app-surface-2)!important;color:var(--app-text)!important}
html[data-theme="dark"] body.soco-internal .workspace-back{color:var(--ui-green-dark)!important;box-shadow:inset 0 0 0 1px var(--app-border)}

/* Modal detail peserta: tombol Tutup kelihatan jelas + tetap nempel di atas
   walau judulnya wrap 2 baris. */
body.soco-internal #reg-modal .card-head{align-items:flex-start}
body.soco-internal #reg-modal-tutup{flex:none;border:1px solid #dfe8e2;background:#fff;color:#174c38;font-weight:800;border-radius:10px}

/* SEMUA modul & submodul: box pertama nempel ke header di mobile (topbar
   sticky pakai margin negatif yang gak konsisten ngasih jarak ke konten
   berikutnya — kegantung sama urutan cascade beberapa file CSS). Absensi
   dipakai sebagai acuan (~18px jarak yang enak dilihat), diterapkan
   universal ke elemen pertama di tiap halaman, bukan cuma satu modul. */
@media(max-width:760px){
  body.soco-internal #views>.view:not(.hidden){padding-top:14px!important}
}

body.soco-internal .participant-detail-event-context{background:#f3f7f4;border:1px solid #dfe8e2;border-radius:14px;padding:12px 14px;margin-bottom:14px}
body.soco-internal .participant-detail-event-context h4{margin:2px 0 8px;font-size:16px}
body.soco-internal .participant-detail-event-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:#4a5c50}
body.soco-internal .participant-detail-event-meta span{display:inline-flex;align-items:center;gap:5px}
body.soco-internal .workspace-nav{display:flex;align-items:center;gap:5px;min-width:0;padding:4px;border-radius:12px;background:#f3f7f4;overflow:auto;scrollbar-width:none}
body.soco-internal .workspace-nav::-webkit-scrollbar{display:none}
body.soco-internal .workspace-nav button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 13px;border:0;border-radius:9px;background:transparent;color:#526159;font:750 12px/1.2 var(--sans);white-space:nowrap;cursor:pointer}
body.soco-internal .workspace-nav button:hover{background:#fff;color:#214d36}
body.soco-internal .workspace-nav button.active{background:#fff;color:#145f39;box-shadow:0 7px 18px -15px rgba(18,70,44,.65),inset 0 0 0 1px #d5e5db}
body.soco-internal .workspace-nav .ic{width:16px;height:16px}
body.soco-internal .workspace-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
body.soco-internal .workspace-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;margin:0;white-space:nowrap}
body.soco-internal .workspace-title{display:flex;align-items:center;gap:11px;min-width:0}
body.soco-internal .workspace-title>div{display:grid;gap:2px;min-width:0}
body.soco-internal .workspace-title b{font-size:13px;color:#243a2f}
body.soco-internal .workspace-title small{font-size:10px;color:#728078}
body.soco-internal .workspace-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;background:#eaf5ee;color:#20724d}
body.soco-internal .workspace-icon .ic{width:19px;height:19px}
body.soco-internal .workspace-metric{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 11px;border:1px solid #dfe8e2;border-radius:11px;background:#f8faf8;color:#27523d;white-space:nowrap}
body.soco-internal .workspace-metric .ic{width:17px;height:17px;color:#27805a}
body.soco-internal .workspace-metric b{font-size:14px}
body.soco-internal .workspace-metric small{font-size:9.5px;color:#738078}
body.soco-internal .workspace-context-bar{justify-content:flex-start;min-height:58px}
body.soco-internal .context-back,
body.soco-internal .workspace-back{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0 0 12px;padding:8px 12px;border:0;border-radius:10px;background:#fff;color:#17653d;font:750 12px/1.2 var(--sans);cursor:pointer;box-shadow:inset 0 0 0 1px #dfe8e2}
body.soco-internal .context-back:hover,
body.soco-internal .workspace-back:hover{background:#edf6f1}

/* ---------- Sidebar dikembalikan ke gaya ijo/putih polos (style.css baseline).
   Blok override navy/coral v12.5.1 sengaja dicabut atas permintaan Ikal,
   2026-08-04 — sidebar balik seperti tampilan sebelum staging R2/R3.
   Warisan struktural nav-direct (Lokasi/Feedback sebagai menu langsung) tetap
   dipertahankan, cuma warnanya yang dikembalikan ke skema hijau dasar. ---------- */
body.soco-internal .nav-group.nav-direct>.nav-head{width:100%}
body.soco-internal .nav-group.nav-direct>.nav-head .nav-head-main{width:100%}
body.soco-internal.sb-ciut .nav-group.nav-direct>.nav-head,
body.sb-ciut.soco-internal .nav-group.nav-direct>.nav-head{width:48px}
/* Lokasi/Feedback (menu langsung tanpa submenu) memakai state aktif hijau yang
   sama dengan .nav-item.active di style.css, supaya tetap kelihatan aktif
   walau tanpa override navy/coral di atas. */
body.soco-internal .nav-group.nav-direct.active-module>.nav-head{background:#E1F1E8;color:#14613F;box-shadow:none}
body.soco-internal .nav-group.nav-direct.active-module>.nav-head .ic{color:#14613F}

/* ---------- Theme control; it must float above content but below dialogs ---------- */
body.soco-internal .theme-control{position:relative}
body.soco-internal .theme-toggle{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
body.soco-internal .theme-toggle-icon{color:var(--indigo)}
body.soco-internal .theme-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:110;display:grid;gap:4px;width:230px;
  padding:7px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow-lg)
}
body.soco-internal .theme-menu>button{display:grid;gap:2px;width:100%;padding:10px 11px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
body.soco-internal .theme-menu>button span{font-size:13px;font-weight:800}
body.soco-internal .theme-menu>button small{color:var(--ink-2);font-size:10.5px}
body.soco-internal .theme-menu>button:hover{background:var(--line-2)}
body.soco-internal .theme-menu>button.active{background:var(--indigo-soft);color:var(--indigo)}

/* ---------- One dialog contract for every internal pop-up ---------- */
body.modal-open,
body.fbk-modal-open{overflow:hidden}
body.soco-internal :where(.modal,.fbk-modal){
  --internal-dialog-gutter:clamp(14px,2.5vw,26px);
  position:fixed!important;inset:0!important;z-index:1200;display:grid;
  grid-template-columns:minmax(0,1fr);align-items:center;justify-items:center;
  width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:var(--internal-dialog-gutter);overflow-y:auto;overscroll-behavior:contain;
  background:rgba(29,24,75,.56);backdrop-filter:blur(6px)
}
body.soco-internal :where(.modal,.fbk-modal).hidden{display:none!important}
body.soco-internal :where(.modal,.fbk-modal)>
  :where(.modal-box,.fbk-modal-box){
  position:relative;min-width:0;max-width:calc(100vw - var(--internal-dialog-gutter) - var(--internal-dialog-gutter));
  max-height:calc(100vh - var(--internal-dialog-gutter) - var(--internal-dialog-gutter));
  max-height:calc(100dvh - var(--internal-dialog-gutter) - var(--internal-dialog-gutter));
  margin:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:var(--app-shadow)
}
body.soco-internal :where(.modal-box,.fbk-modal-box,.ops-modal-box,.loc-detail-box,.log-da-modal-box){overscroll-behavior:contain}
body.soco-internal .ops-modal-box{display:flex;flex-direction:column;overflow:hidden}
body.soco-internal .ops-modal-scroll,
body.soco-internal .ops-form,
body.soco-internal .fbk-modal-body{min-height:0;overflow-y:auto}
body.soco-internal .loc-detail-box{overflow-y:auto;overflow-x:hidden}
body.soco-internal .toast{z-index:1400}
body.soco-internal .password-first-modal{z-index:1300}

/* ---------- Participant Insight: Leaderboard is a section, never a third tab ---------- */
body.soco-internal .participant-insight-leaderboard{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:var(--shadow)}
body.soco-internal .participant-insight-leaderboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
body.soco-internal .participant-insight-leaderboard-head h3{font-size:18px}
body.soco-internal .participant-insight-leaderboard-head p{margin:3px 0 0;color:var(--ink-2);font-size:12px}
body.soco-internal .participant-insight-divider{height:1px;background:var(--line);margin:2px 0}
body.soco-internal .participant-leaderboard-summary{display:grid;gap:12px}
body.soco-internal .participant-leaderboard-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
body.soco-internal .participant-leaderboard-person{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;min-width:0;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--paper);overflow:hidden}
body.soco-internal .participant-leaderboard-person.rank-1{border-color:#b9d9c7;background:linear-gradient(145deg,#eef8f2,var(--paper) 60%)}
body.soco-internal .participant-leaderboard-rank{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--line-2);color:var(--ink-2);font:800 12px/1 var(--sans)}
body.soco-internal .rank-1 .participant-leaderboard-rank{background:#23835a;color:#fff}
body.soco-internal .participant-leaderboard-person>div{min-width:0}
body.soco-internal .participant-leaderboard-person b,
body.soco-internal .participant-leaderboard-person small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.soco-internal .participant-leaderboard-person b{font-size:13px;color:var(--ink)}
body.soco-internal .participant-leaderboard-person small{margin-top:3px;font-size:11px;color:var(--ink-3)}
body.soco-internal .participant-leaderboard-person>strong{grid-column:1/-1;display:flex;align-items:baseline;gap:5px;font:800 23px/1 var(--sans);color:#23835a}
body.soco-internal .participant-leaderboard-person>strong small{font:700 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
body.soco-internal .participant-leaderboard-metrics{display:flex;gap:8px;flex-wrap:wrap}
body.soco-internal .participant-leaderboard-metrics span{padding:7px 10px;border-radius:999px;background:var(--line-2);color:var(--ink-2);font-size:12px}
body.soco-internal .participant-leaderboard-metrics b{color:var(--ink)}
body.soco-internal .participant-leaderboard-details{padding:0!important;overflow:hidden}
body.soco-internal .participant-leaderboard-details>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;cursor:pointer;list-style:none}
body.soco-internal .participant-leaderboard-details>summary::-webkit-details-marker{display:none}
body.soco-internal .participant-leaderboard-details>summary>span:first-child{display:grid;gap:2px}
body.soco-internal .participant-leaderboard-details>summary small{font-size:11.5px;color:var(--ink-3)}
body.soco-internal .participant-details-action{font-size:12px;font-weight:750;color:#17653d}
body.soco-internal .participant-leaderboard-details[open] .participant-details-action::after{content:' · tutup'}
body.soco-internal .participant-leaderboard-details-body{display:grid;gap:14px;padding:0 16px 16px;border-top:1px solid var(--line)}
body.soco-internal .participant-leaderboard-details-body>.table-wrap{margin-top:14px}
body.soco-internal .participant-leaderboard-secondary{margin:0}

/* ---------- Dark mode changes color only; geometry stays on the stable layout ---------- */
html[data-theme="dark"] body.soco-internal .main,
html[data-theme="dark"] body.soco-internal #views{background:var(--app-bg)}
html[data-theme="dark"] body.soco-internal .topbar{background:rgba(11,16,14,.94);border-bottom-color:var(--app-border)}
html[data-theme="dark"] body.soco-internal :where(.card,.modal-box,.fbk-modal-box,.ops-modal-box){background:var(--app-surface);border-color:var(--app-border);color:var(--app-text)}
html[data-theme="dark"] body.soco-internal :where(input,select,textarea){background:var(--app-surface-2);border-color:var(--app-border);color:var(--app-text)}
html[data-theme="dark"] body.soco-internal :where(input,select,textarea)::placeholder{color:var(--app-text-3)}
html[data-theme="dark"] body.soco-internal :where(.table th,.perm-row.head){background:var(--app-surface-2);color:var(--app-text-2)}
html[data-theme="dark"] body.soco-internal :where(.table td,.table th,.perm-row,.st-line,.ins-urut li){border-color:var(--app-border);color:var(--app-text)}
html[data-theme="dark"] body.soco-internal :where(
  .workspace-toolbar,.workspace-context-bar,.direct-action-strip,.page-action-strip,.hub-tabs,.fbk-hub-tabs,
  .ev3-switcher,.ev3-event-summary,.ev3-stage-nav,.ev3-stage-card,.ev3-stage-card>header,.ev3-stage-body,.ev3-actions,
  .ops-modal-head,.ops-modal-actions,.ops-form-section,.ops-inline-create,.evt-doc-popover,.evt-calendar,.evt-cal-cell,
  .participant-manual-intro,.participant-manual-note,.participant-payment-proof-media,.participant-payment-proof-copy,
  .participant-insight-leaderboard,.participant-leaderboard-person,.participant-leaderboard-details,
  .reg-qris-card,.reg-contact-card,.reg-qris-preview,.event-question-card,.event-qris-preview,
  .loc-main-card,.loc-main-kpis article,.loc-detail-head,.loc-detail-section,.loc-manage-row,.loc-note-editor,.loc-bulk-guide,.loc-bulk-row,
  .fbk-main-kpis article,.fbk-main-recent,.fbk-modal-body,.fbk-raw,.fbk-safe-summary,.fbk-brief-grid,.fbk-detail-summary,.fbk-match-editor,
  .imp-detail-section,.imp-detail-kpis>div,.imp-item-row,.imp-calc-strip,.imp-popover-panel,.imp-master-row,
  .log-field-settings,.log-template-stage,.log-da-overview-meta>div,.log-da-detail-filters,.log-da-cert-tools,.log-da-cert-preview,
  .fin-field-item,.fin-wallet-panel,.fin-wallet-balance,.fin-access-person,.credential-summary,
  .fin-access-edge,.fin-category-manage,.fin-health-state,.fin-optional,.fin-panel-note,.fin-wallet-progress,
  .my-monitor-card,.my-task-card,.my-history,.account-avatar-picker,.avatar-choice,
  .evt-panel,.evt-kpi,.evt-list-box,.evt-event-card,.evt-secondary-btn,.evt-toolbar,.evt-view-toggle,
  .fbk-action-card,.fbk-action-filter,.fbk-attention,.fbk-data-note,.fbk-filter-card,.fbk-kpi,.fbk-response-card,.fbk-safe-warning,
  .fbk-main-links>div,.fbk-main-icon,
  .participant-empty,.participant-kpi,.participant-missing,.participant-review-card,.participant-section-head,.participant-summary-line,
  .loc-detail-item,.loc-detail-mark,.loc-note-input,
  .log-da-cert-checkbox,.log-da-mobile-card,.log-file-state,.log-location-results,
  .fin-access-row,.fin-kpi-card,.ins-kpi,.kartu-insight,.cat-icon-btn,.cetak-lk,
  .participant-filter-foot .cek-inline
){background:var(--app-surface)!important;border-color:var(--app-border)!important;color:var(--app-text)!important}
html[data-theme="dark"] body.soco-internal :where(
  .workspace-nav,.bkg-calendar-day.is-empty,.evt-cal-cell.is-empty,.ops-inline-empty,.participant-proof-empty,.reg-qris-empty,
  .loc-empty,.fbk-empty,.imp-empty,.log-empty-mini,.log-pdf-empty,.ev3-empty,.location-mini-list>div,
  .participant-leaderboard-metrics span,.participant-leaderboard-rank
){background:var(--app-surface-2)!important;border-color:var(--app-border)!important;color:var(--app-text-2)!important}
html[data-theme="dark"] body.soco-internal :where(.workspace-title b,.view h1,.view h2,.view h3,.view h4,.view b,.view strong){color:var(--app-text)}
html[data-theme="dark"] body.soco-internal .evt-view-toggle button.active{background:var(--app-surface-2)!important;color:var(--app-text)!important}
html[data-theme="dark"] body.soco-internal :where(.workspace-title small,.view p,.view small,.view .sub,.view .meta,.view [class*="-note"],.fbk-main-links small,.fbk-main-kpis small,.evt-kpi small,.evt-kpi span){color:var(--app-text-2)}
html[data-theme="dark"] body.soco-internal :where(code,.kode){background:var(--app-surface-3);color:#9de4b9;border-color:var(--app-border)}
html[data-theme="dark"] body.soco-internal .participant-leaderboard-person.rank-1{background:linear-gradient(145deg,#183728,var(--app-surface) 60%)}
html[data-theme="dark"] body.soco-internal img{filter:none}

/* ---------- Responsive gates ---------- */
@media(max-width:1080px){
  body.soco-internal .participant-leaderboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.soco-internal :where(.participant-payment-proof-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  body.soco-internal .topbar{display:flex;align-items:center;flex-wrap:nowrap;gap:7px}
  body.soco-internal .topbar-main{display:flex;align-items:center;min-width:0;flex:1;gap:7px}
  body.soco-internal .topbar-copy{min-width:0}
  body.soco-internal .topbar-copy h1{max-width:44vw;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.soco-internal .topbar-copy p,
  body.soco-internal #clock,
  body.soco-internal .theme-toggle>span,
  body.soco-internal .topbar-refresh>span{display:none}
  body.soco-internal .topbar-actions{display:flex;align-items:center;flex:0 0 auto;gap:5px}
  body.soco-internal :where(.sb-btn,.theme-toggle,.topbar-refresh){display:grid;place-items:center;width:40px!important;height:40px;min-height:40px;padding:0!important;flex:0 0 40px}
  body.soco-internal .theme-menu{position:fixed;top:62px;right:10px;width:min(250px,calc(100vw - 20px))}

  body.soco-internal :where(.workspace-toolbar,.workspace-context-bar,.direct-action-strip){align-items:stretch;flex-direction:column;padding:10px;border-radius:14px}
  body.soco-internal .workspace-nav{width:100%}
  body.soco-internal .workspace-nav button{flex:1 0 auto;min-width:max-content}
  body.soco-internal .workspace-actions{display:grid;grid-template-columns:1fr;width:100%}
  body.soco-internal .workspace-actions .btn,
  body.soco-internal .workspace-actions>a{width:100%}
  body.soco-internal .workspace-metric{justify-content:center;width:100%}
  body.soco-internal .context-back,
  body.soco-internal .workspace-back{justify-content:flex-start;width:100%}
  body.soco-internal .action-strip-spacer{display:none}
  body.soco-internal .loc-compact-count{margin-left:0;justify-content:center}

  body.soco-internal :where(.row,.row-3,.grid-2,.grid-form,.ops-form-grid,.evt-form-grid,.evt-form-grid-2,.evt-form-grid-3,.participant-manual-layout,.imp-filter-grid,.imp-number-grid,.imp-team-grid,.loc-form-grid,.fbk-detail-grid,.fbk-brief-grid,.fin-entry-grid,.fin-wallet-grid,.reg-contact-grid){grid-template-columns:1fr!important}
  body.soco-internal :where(.loc-main-toolbar,.fbk-filter-card,.fbk-action-filter,.people-toolbar,.ops-filter-bar,.bkg-filters,.evt-filters,.log-da-filter-grid){grid-template-columns:1fr!important}
  body.soco-internal :where(.fbk-dashboard-grid,.fbk-main-grid,.fbk-response-list,.fbk-action-list,.loc-card-grid,.imp-report-grid,.log-da-session-grid){grid-template-columns:1fr!important}
  body.soco-internal :where(.loc-main-kpis,.fbk-main-kpis,.fbk-kpis,.people-kpis,.stat-grid,.evt-kpi-grid,.log-da-kpis,.imp-kpi-grid,.fin-kpi-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
  body.soco-internal .participant-payment-proof-grid{grid-template-columns:1fr;padding:10px}
  body.soco-internal .participant-insight-leaderboard{padding:13px}
  body.soco-internal .participant-insight-leaderboard-head{display:grid}
  body.soco-internal .participant-insight-leaderboard-head .btn{width:100%}
  body.soco-internal .participant-leaderboard-grid{display:flex;overflow-x:auto;padding:1px 1px 8px;scroll-snap-type:x mandatory}
  body.soco-internal .participant-leaderboard-person{flex:0 0 min(245px,78vw);scroll-snap-align:start}

  /* Insight Peserta: 2 kartu sejajar di HP, bukan numpuk 1 kolom ke bawah */
  body.soco-internal .ins-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.soco-internal .ins-gender-people{grid-template-columns:1fr 1fr!important;gap:8px}
  body.soco-internal .ins-gender-person{min-height:120px;padding:9px}
  body.soco-internal .ins-gender-person svg,
  body.soco-internal .ins-gender-person img{width:44px;height:44px}
  body.soco-internal .ins-gender-person b{font-size:19px}

  /* Data Peserta: tabel jadi kartu bertumpuk di HP (bukan disembunyikan)
     supaya info Event/Tanggal/Status tetap kelihatan, sama seperti desktop. */
  body.soco-internal .participant-people-table{min-width:0!important}
  body.soco-internal .participant-people-table thead{display:none}
  body.soco-internal .participant-people-table,
  body.soco-internal .participant-people-table tbody,
  body.soco-internal .participant-people-table tr,
  body.soco-internal .participant-people-table td{display:block;width:100%}
  body.soco-internal .participant-people-table tr{border:1px solid #dfe8e2;border-radius:14px;padding:12px;margin-bottom:10px}
  body.soco-internal .participant-people-table td{padding:4px 0!important;border:0!important}
  body.soco-internal .participant-people-table td.hide-sm{display:block!important}
  body.soco-internal .participant-people-table td[data-label]:not([data-label="Kode"]):not([data-label="Peserta"])::before{content:attr(data-label) ": ";font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:#8a978f;font-weight:800}
  body.soco-internal .participant-people-table td.r{text-align:left;margin-top:8px}
  body.soco-internal .participant-people-table td.r .btn{width:100%}

  body.soco-internal :where(.modal,.fbk-modal){align-items:end;justify-items:center;padding:0;overflow:hidden}
  body.soco-internal :where(.modal,.fbk-modal)>
    :where(.modal-box,.fbk-modal-box){width:100%!important;max-width:100%!important;max-height:94vh;max-height:94dvh;margin:0;border-radius:20px 20px 0 0!important;padding-bottom:max(16px,env(safe-area-inset-bottom))}
  body.soco-internal .impact-workflow-modal-box{height:94vh;height:94dvh;max-height:94vh;max-height:94dvh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
  body.soco-internal .impact-workflow-host{padding:12px 12px max(24px,env(safe-area-inset-bottom));scroll-padding-bottom:max(28px,env(safe-area-inset-bottom))}
  body.soco-internal .impact-workflow-host .impact-form-tools{top:-12px}
  body.soco-internal .toast{bottom:max(14px,env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:480px;text-align:center}
}

@media(max-width:420px){
  body.soco-internal .topbar-copy h1{max-width:38vw;font-size:16px}
  body.soco-internal :where(.loc-main-kpis,.fbk-main-kpis,.fbk-kpis,.people-kpis,.stat-grid,.evt-kpi-grid,.log-da-kpis,.imp-kpi-grid,.fin-kpi-grid){gap:9px}
}

@media(max-width:350px){
  body.soco-internal .topbar-copy h1{max-width:31vw;font-size:15px}
  body.soco-internal :where(.loc-main-kpis,.fbk-main-kpis,.fbk-kpis,.people-kpis,.stat-grid,.evt-kpi-grid,.log-da-kpis,.imp-kpi-grid,.fin-kpi-grid){grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  body.soco-internal *{scroll-behavior:auto!important}
}

/* Tombol Hapus Booking Panti (data trial yang tersangkut, tidak bisa dihapus
   sebelumnya). Merah tipis, konsisten sama pola hapus lain di app. */
body.soco-internal .btn-danger-outline{border-color:#e2716a;color:#c0392b;background:#fff}
body.soco-internal .btn-danger-outline:hover{background:#fdf1f0}
html[data-theme="dark"] body.soco-internal .btn-danger-outline{background:var(--app-surface)!important;border-color:#c0392b!important;color:#ff9a90!important}

/* Event > Laporan — mobile-only compact pass (2026-08-10).
   Scope sengaja dikunci ke #view-impact-insight supaya desktop dan modul lain
   tidak ikut berubah. */
body.soco-internal #view-impact-insight .impact-db-label-mobile{display:none}

@media(max-width:760px){
  /* Action strip: Buat Laporan tetap utama; Sisa Barang + Database satu baris. */
  body.soco-internal #view-impact-insight .impact-direct-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:8px!important;
    padding:10px!important
  }
  body.soco-internal #view-impact-insight .impact-direct-actions #impact-direct-create{
    grid-column:1/-1;width:100%;min-width:0
  }
  body.soco-internal #view-impact-insight .impact-direct-actions #impact-direct-stock,
  body.soco-internal #view-impact-insight .impact-direct-actions #impact-direct-database{
    width:100%;min-width:0;padding-inline:9px;justify-content:center
  }
  body.soco-internal #view-impact-insight .impact-direct-actions .imp-export-more{
    grid-column:1/-1;justify-self:end;width:40px;margin:0
  }
  body.soco-internal #view-impact-insight .impact-direct-actions .imp-export-more summary{
    width:40px;height:38px;min-height:38px
  }
  body.soco-internal #view-impact-insight .impact-db-label-desktop{display:none}
  body.soco-internal #view-impact-insight .impact-db-label-mobile{display:inline}

  /* Filter: Periode full width; sisanya dua kolom yang rapi dan konsisten. */
  body.soco-internal #view-impact-insight .imp-filter-card{padding:12px}
  body.soco-internal #view-impact-insight .imp-filter-grid.insight{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important
  }
  body.soco-internal #view-impact-insight .imp-filter-grid.insight>label:first-child{
    grid-column:1/-1
  }
  body.soco-internal #view-impact-insight .imp-filter-grid.insight label{
    gap:5px;font-size:9.5px;letter-spacing:.06em
  }
  body.soco-internal #view-impact-insight .imp-filter-grid.insight input,
  body.soco-internal #view-impact-insight .imp-filter-grid.insight select{
    width:100%;min-width:0;min-height:40px;padding:8px 9px;font-size:12px
  }

  /* Periode aktif lebih pendek tanpa membuang informasi. */
  body.soco-internal #view-impact-insight .imp-period-summary{
    gap:10px;padding:12px 13px;margin-bottom:12px
  }
  body.soco-internal #view-impact-insight .imp-period-summary b{font-size:14px}
  body.soco-internal #view-impact-insight .imp-period-summary small{
    font-size:10px;line-height:1.35;white-space:normal;overflow-wrap:anywhere
  }
  body.soco-internal #view-impact-insight .imp-period-deltas{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%
  }
  body.soco-internal #view-impact-insight .imp-delta{
    min-width:0;justify-content:center;text-align:center;white-space:normal;padding:6px 7px;font-size:9px
  }

  /* Insight cards: dua per baris supaya scroll mobile jauh lebih pendek. */
  body.soco-internal #view-impact-insight .imp-kpi-grid.impact,
  body.soco-internal #view-impact-insight .imp-fun-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;margin-bottom:10px!important
  }
  body.soco-internal #view-impact-insight .imp-kpi{
    min-width:0;padding:11px;border-radius:15px
  }
  body.soco-internal #view-impact-insight .imp-kpi>span{
    width:30px;height:30px;border-radius:10px;margin-bottom:8px
  }
  body.soco-internal #view-impact-insight .imp-kpi small{font-size:9.5px}
  body.soco-internal #view-impact-insight .imp-kpi b{
    font-size:16px;line-height:1.2;overflow-wrap:anywhere
  }
  body.soco-internal #view-impact-insight .imp-fun-card{
    min-width:0;padding:11px;border-radius:15px
  }
  body.soco-internal #view-impact-insight .imp-fun-card>span{
    width:30px;height:30px;border-radius:10px
  }
  body.soco-internal #view-impact-insight .imp-fun-card small{
    margin:8px 0 3px;font-size:9px
  }
  body.soco-internal #view-impact-insight .imp-fun-card b{
    display:block;font-size:11px;line-height:1.3;overflow-wrap:anywhere
  }

  /* Panel insight yang isinya lebih kompleks berdiri sendiri di mobile.
     KPI ringkas di atas tetap 2 per baris; delapan panel detail ini full-width
     agar tidak terasa mepet. Desktop tidak berubah. */
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;margin-bottom:9px!important
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2>.card{
    min-width:0;padding:14px;border-radius:16px;overflow:hidden
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2 .card-head{
    gap:7px;margin-bottom:10px;align-items:flex-start
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2 .card-head h3{
    gap:6px;font-size:13px;line-height:1.3;overflow-wrap:anywhere
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2 .card-head h3 .ic{
    width:15px;height:15px;flex:none
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2 .card-head p{
    margin-top:3px;font-size:10px;line-height:1.4;overflow-wrap:anywhere
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2 .chart-box{
    height:180px;min-height:180px
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2 .imp-rank-row{
    grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2 .imp-rank-row>span{
    width:26px;height:26px;border-radius:8px;font-size:10px
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2 .imp-rank-row b{
    display:block;font-size:11px;line-height:1.3;overflow-wrap:anywhere
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2 .imp-rank-row small{
    font-size:9px;overflow-wrap:anywhere
  }
  body.soco-internal #view-impact-insight #imp-insight-content>.grid-2 .imp-rank-row strong{
    grid-column:auto;justify-self:end;font-size:9px;white-space:normal;text-align:right
  }
  body.soco-internal #view-impact-insight #imp-leader-tabs{
    width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px
  }
  body.soco-internal #view-impact-insight #imp-leader-tabs button{
    min-width:0;padding:7px 4px;font-size:9px
  }

  /* Karena panel detail full-width, metrik di dalam panel dukungan/stok
     boleh tetap dua kolom tanpa membuat card utama sesak. */
  body.soco-internal #view-impact-insight .imp-support-breakdown,
  body.soco-internal #view-impact-insight .imp-stock-insight{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px
  }
  body.soco-internal #view-impact-insight .imp-support-breakdown>div,
  body.soco-internal #view-impact-insight .imp-stock-insight>div{
    min-height:0;padding:10px;border-radius:12px
  }
  body.soco-internal #view-impact-insight .imp-support-breakdown>div>span,
  body.soco-internal #view-impact-insight .imp-stock-insight>div>span{
    width:30px;height:30px;border-radius:9px;margin-bottom:7px
  }
  body.soco-internal #view-impact-insight .imp-support-breakdown>div small,
  body.soco-internal #view-impact-insight .imp-stock-insight small{
    margin:7px 0 2px;font-size:9px;line-height:1.3
  }
  body.soco-internal #view-impact-insight .imp-support-breakdown>div b,
  body.soco-internal #view-impact-insight .imp-stock-insight b{
    font-size:12px;line-height:1.3;overflow-wrap:anywhere
  }
  body.soco-internal #view-impact-insight .imp-stock-insight em{font-size:9px;overflow-wrap:anywhere}
  body.soco-internal #view-impact-insight .imp-stock-insight>p{
    grid-column:1/-1;padding:9px;font-size:9.5px;line-height:1.35;overflow-wrap:anywhere
  }

  /* Laporan terbaru: nama/tanggal/lokasi wajib wrap; tidak boleh meluber horizontal. */
  body.soco-internal #view-impact-insight .imp-latest-reports{gap:6px;min-width:0}
  body.soco-internal #view-impact-insight .imp-latest-reports>div:not(.imp-empty){
    grid-template-columns:25px minmax(0,1fr)!important;
    gap:6px;padding:8px;min-width:0;overflow:hidden
  }
  body.soco-internal #view-impact-insight .imp-latest-reports>div:not(.imp-empty)>span{
    width:25px;height:25px;border-radius:8px
  }
  body.soco-internal #view-impact-insight .imp-latest-reports>div:not(.imp-empty)>div{min-width:0}
  body.soco-internal #view-impact-insight .imp-latest-reports b,
  body.soco-internal #view-impact-insight .imp-latest-reports small{
    max-width:100%;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
    overflow-wrap:anywhere;word-break:break-word;line-height:1.25
  }
  body.soco-internal #view-impact-insight .imp-latest-reports b{font-size:9.5px}
  body.soco-internal #view-impact-insight .imp-latest-reports small{font-size:8.5px;margin-top:2px}
  body.soco-internal #view-impact-insight .imp-latest-reports strong{
    grid-column:2;justify-self:start;max-width:100%;white-space:normal;font-size:8.5px;overflow-wrap:anywhere
  }
  body.soco-internal #view-impact-insight .imp-latest-reports>.imp-empty{
    display:block!important;padding:16px 6px!important;min-width:0;text-align:center;overflow:hidden
  }
  body.soco-internal #view-impact-insight .imp-latest-reports>.imp-empty>span{
    width:34px;height:34px;margin:0 auto 8px
  }
  body.soco-internal #view-impact-insight .imp-latest-reports>.imp-empty b{
    display:block;font-size:10px;white-space:normal!important;overflow-wrap:normal;word-break:normal
  }
  body.soco-internal #view-impact-insight .imp-latest-reports>.imp-empty p{
    margin:4px auto 0;max-width:16ch;font-size:8.5px;line-height:1.35;white-space:normal!important;overflow-wrap:normal;word-break:normal
  }
}

/* Sangat sempit: nested metrik ikut satu kolom; panel utama sudah full-width. */
@media(max-width:340px){
  body.soco-internal #view-impact-insight .imp-support-breakdown,
  body.soco-internal #view-impact-insight .imp-stock-insight{
    grid-template-columns:1fr!important
  }
  body.soco-internal #view-impact-insight .imp-stock-insight>p{grid-column:1}
}


/* ============================================================
 * Laporan mobile R3 — date containment + Database Laporan compact/nav.
 * Scope dikunci ke dua view Impact; desktop layout existing tidak diubah.
 * ============================================================ */
body.soco-internal #view-impact-database .impact-database-back{
  margin-bottom:10px
}

@media(max-width:760px){
  /* Native date input (khususnya WebKit/iOS) punya intrinsic width sendiri.
     Paksa mengikuti track grid supaya Dari/Sampai tidak saling menimpa. */
  body.soco-internal #view-impact-insight :is(#imp-insight-from,#imp-insight-to){
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    inline-size:100%!important;
    min-width:0!important;
    min-inline-size:0!important;
    max-width:100%!important;
    -webkit-min-logical-width:0!important;
    overflow:hidden!important;
    padding-inline:6px!important;
    font-size:11px!important;
    letter-spacing:-.01em
  }
  body.soco-internal #view-impact-insight :is(#imp-insight-from,#imp-insight-to)::-webkit-date-and-time-value{
    min-width:0!important;
    width:100%!important;
    text-align:center
  }
  body.soco-internal #view-impact-insight :is(#imp-insight-from,#imp-insight-to)::-webkit-datetime-edit{
    min-width:0!important;
    padding:0!important
  }

  /* 4 status Database Laporan menjadi 2 x 2 di mobile. */
  body.soco-internal #view-impact-database .imp-mini-kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin:12px 0 14px
  }
  body.soco-internal #view-impact-database .imp-mini-kpi{
    min-width:0!important;
    min-height:72px;
    padding:11px 12px;
    gap:8px
  }
  body.soco-internal #view-impact-database .imp-mini-kpi small{
    min-width:0;
    font-size:10.5px;
    line-height:1.25;
    white-space:normal;
    overflow-wrap:anywhere
  }
  body.soco-internal #view-impact-database .imp-mini-kpi b{
    flex:none;
    font-size:21px
  }
}


/* ============================================================
 * Laporan mobile R4 — hard fix native date width + DB filter 2x2.
 * Mobile-only. R1/R2/R3 behavior lain tetap dipertahankan.
 * ============================================================ */
@media(max-width:760px){
  /* Safari/iOS date controls dapat membawa intrinsic width dari UA style.
     Grid item + control dikunci agar tidak bisa melewati track/card. */
  body.soco-internal #view-impact-insight .imp-filter-grid.insight,
  body.soco-internal #view-impact-database .imp-filter-grid.imp-db-filters{
    min-width:0!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:10px!important;
    row-gap:10px!important
  }

  body.soco-internal #view-impact-insight .imp-filter-grid.insight>label,
  body.soco-internal #view-impact-database .imp-filter-grid.imp-db-filters>label{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important
  }

  /* Halaman insight: Periode tetap full width. */
  body.soco-internal #view-impact-insight .imp-filter-grid.insight>label:first-child{
    grid-column:1/-1!important
  }

  /* Database: Cari full width, lalu Status|Dari dan Sampai|Brand = 2x2. */
  body.soco-internal #view-impact-database .imp-filter-grid.imp-db-filters>label:first-child{
    grid-column:1/-1!important
  }

  body.soco-internal #view-impact-insight :is(#imp-insight-from,#imp-insight-to),
  body.soco-internal #view-impact-database :is(#imp-db-from,#imp-db-to){
    -webkit-appearance:none!important;
    appearance:none!important;
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    inline-size:100%!important;
    min-width:0!important;
    min-inline-size:0!important;
    max-width:100%!important;
    max-inline-size:100%!important;
    justify-self:stretch!important;
    overflow:hidden!important;
    padding-left:4px!important;
    padding-right:4px!important;
    font-size:10.5px!important;
    letter-spacing:-.015em!important;
    text-align:center!important
  }

  body.soco-internal #view-impact-insight :is(#imp-insight-from,#imp-insight-to)::-webkit-date-and-time-value,
  body.soco-internal #view-impact-database :is(#imp-db-from,#imp-db-to)::-webkit-date-and-time-value{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:0!important;
    text-align:center!important
  }

  body.soco-internal #view-impact-insight :is(#imp-insight-from,#imp-insight-to)::-webkit-datetime-edit,
  body.soco-internal #view-impact-database :is(#imp-db-from,#imp-db-to)::-webkit-datetime-edit{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:0!important
  }

  body.soco-internal #view-impact-insight :is(#imp-insight-from,#imp-insight-to)::-webkit-calendar-picker-indicator,
  body.soco-internal #view-impact-database :is(#imp-db-from,#imp-db-to)::-webkit-calendar-picker-indicator{
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important
  }

  /* At 360px ke bawah, beri sedikit ekstra ruang horizontal pada date text. */
  @media(max-width:380px){
    body.soco-internal #view-impact-insight :is(#imp-insight-from,#imp-insight-to),
    body.soco-internal #view-impact-database :is(#imp-db-from,#imp-db-to){
      font-size:10px!important;
      padding-left:2px!important;
      padding-right:2px!important
    }
  }
}

/* ========================================================================== 
 * Feedback Event independent R1 — focused module-only rework.
 * Keeps Feedback standalone from Ticketing/Event Workspace/Lokasi.
 * ========================================================================== */
body.soco-internal #view-fbk-main .fbk-main-top-actions{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap
}
body.soco-internal #view-fbk-main .fbk-main-top-actions .btn{min-width:160px}
body.soco-internal #view-fbk-main .fbk-main-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
body.soco-internal #view-fbk-main .fbk-main-form-card{display:grid;gap:12px;padding:18px}
body.soco-internal #view-fbk-main .fbk-main-form-card>h3{margin:0;font-size:16px}
body.soco-internal #view-fbk-main .fbk-main-form-actions{display:flex;gap:8px;flex-wrap:wrap}
body.soco-internal #view-fbk-main .fbk-event-form{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(260px,1.45fr);gap:10px;align-items:end}
body.soco-internal #view-fbk-main .fbk-event-form>.fbk-modal-actions{grid-column:1/-1;margin-top:2px}
body.soco-internal #view-fbk-main .fbk-event-list-head{display:grid;gap:3px;margin:18px 0 8px;padding-top:15px;border-top:1px solid var(--line)}
body.soco-internal #view-fbk-main .fbk-event-list-head b{font-size:13px}
body.soco-internal #view-fbk-main .fbk-event-list-head small{color:var(--ink-3);font-size:10.5px;line-height:1.45}
body.soco-internal #view-fbk-main .fbk-event-list{display:grid;gap:7px}
body.soco-internal #view-fbk-main .fbk-event-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:13px;background:#fff}
body.soco-internal #view-fbk-main .fbk-event-row.archived{background:#f6f8f6;opacity:.78}
body.soco-internal #view-fbk-main .fbk-event-row>div{min-width:0}
body.soco-internal #view-fbk-main .fbk-event-row b{display:block;margin-top:5px;font-size:11.5px;overflow-wrap:anywhere}
body.soco-internal #view-fbk-main .fbk-event-row small{display:block;margin-top:2px;color:var(--ink-3);font-size:9.5px}

body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:end!important
}
body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card>label,
body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card>.btn{
  min-width:0!important;max-width:100%!important
}
body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card .fbk-search{
  grid-column:span 2!important
}
body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card input,
body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card select{
  display:block!important;box-sizing:border-box!important;width:100%!important;inline-size:100%!important;min-width:0!important;min-inline-size:0!important;max-width:100%!important;max-inline-size:100%!important
}
body.soco-internal #view-fbk-responses .fbk-detail-delete{display:flex;justify-content:flex-end;padding-top:14px;margin-top:14px;border-top:1px solid var(--line)}
body.soco-internal .fbk-danger-link{border-color:#d9a5a0!important;color:#9b3f37!important}
body.soco-internal .fbk-danger-btn{border:1px solid #b9554c;background:#b9554c;color:#fff;border-radius:12px;padding:10px 14px;font:inherit;font-weight:850;cursor:pointer}

@media(max-width:760px){
  body.soco-internal #view-fbk-main .fbk-main-top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  body.soco-internal #view-fbk-main .fbk-main-top-actions .btn{width:100%;min-width:0}
  body.soco-internal #view-fbk-main .fbk-main-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  body.soco-internal #view-fbk-main .fbk-main-kpis>article:last-child{grid-column:1/-1}
  body.soco-internal #view-fbk-main .fbk-main-form-actions{display:grid;grid-template-columns:1fr}
  body.soco-internal #view-fbk-main .fbk-main-form-actions .btn{width:100%}
  body.soco-internal #view-fbk-main .fbk-event-form{grid-template-columns:1fr}
  body.soco-internal #view-fbk-main .fbk-event-form>.fbk-modal-actions{grid-column:auto}
  body.soco-internal #view-fbk-main .fbk-event-row{grid-template-columns:minmax(0,1fr) auto}

  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important
  }
  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card .fbk-search{grid-column:1/-1!important}
  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card .fbk-filter-from{grid-column:1!important}
  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card .fbk-filter-to{grid-column:2!important}
  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card .fbk-filter-organizer{grid-column:1!important}
  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card .fbk-filter-event{grid-column:2!important}
  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card .fbk-filter-rating,
  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card .fbk-filter-reset{grid-column:1/-1!important}

  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card :is(.fbk-filter-from,.fbk-filter-to){overflow:hidden!important}
  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card input[type=date]{
    -webkit-appearance:none!important;appearance:none!important;display:block!important;box-sizing:border-box!important;
    width:100%!important;inline-size:100%!important;min-width:0!important;min-inline-size:0!important;max-width:100%!important;max-inline-size:100%!important;
    overflow:hidden!important;padding-left:5px!important;padding-right:5px!important;font-size:10.5px!important;text-align:center!important
  }
  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card input[type=date]::-webkit-date-and-time-value,
  body.soco-internal :is(#view-fbk-dashboard,#view-fbk-responses) .fbk-filter-card input[type=date]::-webkit-datetime-edit{
    min-width:0!important;width:100%!important;max-width:100%!important;padding:0!important;margin:0!important;text-align:center!important
  }
}

/* Lokasi R1 hotfix 1 — quick filter kota/kategori collapse guard.
   Scoped only to main Lokasi view. Global button min/max-width rules must not
   collapse these horizontal filter cards. */
body.soco-internal #view-loc-main .loc-filter-scroll{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:flex-start!important;
  gap:10px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  min-height:0!important;
  max-width:100%!important;
  padding:1px 2px 9px!important;
  -webkit-overflow-scrolling:touch;
}
body.soco-internal #view-loc-main .loc-filter-card{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:168px!important;
  max-width:220px!important;
  height:auto!important;
  min-height:62px!important;
  max-height:72px!important;
  align-self:flex-start!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  padding:10px 12px!important;
  white-space:normal!important;
  writing-mode:horizontal-tb!important;
  overflow:hidden!important;
}
body.soco-internal #view-loc-main .loc-filter-card>.loc-filter-icon{
  flex:0 0 34px!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
}
body.soco-internal #view-loc-main .loc-filter-card>span:last-child{
  display:block!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  writing-mode:horizontal-tb!important;
  overflow:hidden!important;
}
body.soco-internal #view-loc-main .loc-filter-card b,
body.soco-internal #view-loc-main .loc-filter-card small{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  writing-mode:horizontal-tb!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:620px){
  body.soco-internal #view-loc-main .loc-filter-card{
    min-width:158px!important;
    max-width:200px!important;
    min-height:58px!important;
    max-height:68px!important;
    padding:9px 11px!important;
  }
}


/* ==========================================================================
 * R3.13 — Impact Report annual period + compact desktop layout
 * ========================================================================== */
body.soco-internal #view-impact-insight .imp-filter-grid.insight.annual{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
body.soco-internal #view-impact-insight .imp-insight-columns{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start
}
body.soco-internal #view-impact-insight .imp-insight-column{
  display:grid;gap:14px;align-content:start;min-width:0
}
body.soco-internal #view-impact-insight .imp-insight-card{
  min-width:0;margin:0;padding:17px 18px
}
body.soco-internal #view-impact-insight .imp-insight-card .card-head{margin-bottom:12px}
body.soco-internal #view-impact-insight .imp-insight-card .card-head h3{font-size:14px;line-height:1.3}
body.soco-internal #view-impact-insight .imp-insight-card .card-head p{font-size:10.5px;line-height:1.45}
body.soco-internal #view-impact-database .imp-db-filters{
  grid-template-columns:minmax(220px,1.4fr) minmax(150px,.8fr) minmax(120px,.55fr) minmax(150px,.8fr)
}
body.soco-internal #view-impact-database .imp-report-card.database h3{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.3
}
body.soco-internal #view-impact-database .imp-report-card.database .imp-review-note{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
}
@media(max-width:1080px){
  body.soco-internal #view-impact-insight .imp-filter-grid.insight.annual{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.soco-internal #view-impact-database .imp-db-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body.soco-internal #view-impact-insight .imp-filter-grid.insight.annual{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.soco-internal #view-impact-insight .imp-filter-grid.insight.annual>label:first-child{grid-column:1/-1}
  body.soco-internal #view-impact-insight .imp-insight-columns{display:flex;flex-direction:column;gap:10px}
  body.soco-internal #view-impact-insight .imp-insight-column{display:contents}
  body.soco-internal #view-impact-insight .imp-insight-card{padding:14px;order:20}
  body.soco-internal #view-impact-insight .imp-order-1{order:1}
  body.soco-internal #view-impact-insight .imp-order-2{order:2}
  body.soco-internal #view-impact-insight .imp-order-3{order:3}
  body.soco-internal #view-impact-insight .imp-order-4{order:4}
  body.soco-internal #view-impact-insight .imp-order-5{order:5}
  body.soco-internal #view-impact-insight .imp-order-6{order:6}
  body.soco-internal #view-impact-insight .imp-order-7{order:7}
  body.soco-internal #view-impact-insight .imp-order-8{order:8}
  body.soco-internal #view-impact-database .imp-db-filters{grid-template-columns:1fr}
}