/* app.css — potongan dari assets/app.css (dipecah 28 Jul 2026).
LAPISAN DASAR (bukan lapisan mati — sudah diukur 28 Jul 2026, lihat docs/plan/PLAN-pecah-berkas.md). Base styling seluruh aplikasi; hanya blok :root di awalnya yang nilainya dikalahkan app-tokens.css.
URUTAN di index.html/admin-users.html/observability.html adalah KONTRAK:
cascade CSS = urutan muat, blok bawah sengaja mengalahkan blok atas.
Muat paling awal, sebelum app-tokens.css. */
/* LAPISAN MATI — seluruh nilai di bawah DIKALAHKAN blok "v8 Liquid Glass"
(cari "TOKEN KESERAGAMAN"). Disinkron agar tidak menyesatkan; JANGAN
menambah/mengubah token di sini. (G0, 26 Jul 2026) */
:root{
--bg:#eef3f8;
--panel:rgba(255,255,255,.58);
--ink:#101828;
--muted:#5f6e84; /* retune G2: 4.46 -> 4.64 di bg */
--line:#e2e8f0;
--accent:#111827;
--accent-soft:#eef2ff;
--success:#166534;
--success-bg:#dcfce7;
--warning:#92400e;
--warning-bg:#fef3c7;
--danger:#991b1b;
--danger-bg:#fee2e2;
--info:#075985;
--info-bg:#e0f2fe;
--shadow:0 10px 30px rgba(15,23,42,.08);
--radius:24px;
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
[data-theme="dark"]{
--bg:#222a2d;
--panel:rgba(52,62,66,.92);
--ink:#f3f6f7;
--muted:#c2cdd1;
--line:#59666b;
--accent:#f3f6f7;
--accent-soft:#414c50;
--shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:var(--font-ui); /* "SF Pro Display" tak pernah resolve — -apple-system sudah SF */
background:var(--bg);
color:var(--ink);
min-height:100vh;
-webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.app{
width:100%;
max-width:860px;
margin:0 auto;
min-height:100vh;
padding-bottom:calc(86px + var(--safe-bottom));
}
.topbar{
position:sticky;
top:0;
z-index:20;
backdrop-filter: blur(18px);
background:color-mix(in srgb, var(--bg) 86%, transparent);
border-bottom:1px solid var(--line);
}
.topbar-inner{
display:flex;
justify-content:space-between;
gap:14px;
align-items:center;
padding:14px 16px 12px;
}
.brand{display:flex;align-items:center;gap:var(--ui-3);min-width:0;flex:1}
.logo{
min-width:52px;
min-height:52px;
max-width:52px;
border-radius:18px;
padding:var(--ui-15);
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(224,232,243,.64));
border:1px solid rgba(255,255,255,.68);
box-shadow:var(--shadow);
overflow:hidden;
backdrop-filter:blur(18px) saturate(160%);
-webkit-backdrop-filter:blur(18px) saturate(160%);
}
.logo img{
height:40px;
width:auto;
max-width:100%;
object-fit:contain;
display:block;
}
[data-theme="dark"] .logo{
background:linear-gradient(145deg, rgba(30,41,59,.88), rgba(15,23,42,.64));
border-color:rgba(255,255,255,.16);
}
.brand-copy{
min-width:0;
flex:1 1 auto;
}
.brand h1{
margin:0;
max-width:560px;
font-size:clamp(14px,2.15vw,18px);
line-height:1.15;
letter-spacing:0;
text-wrap:balance;
word-break:normal;
overflow-wrap:normal;
hyphens:none;
}
.brand p{margin:3px 0 0;color:var(--muted);font-size:var(--fs-label);line-height:1.25}
.topbar-actions{display:flex;gap:var(--ui-2);flex:0 0 auto}
.icon-btn{
border:1px solid var(--line);
background:var(--panel);
color:var(--ink);
border-radius:var(--radius-control);
min-width:42px;height:42px;
display:grid;place-items:center;
}
main{padding:var(--ui-4)}
.view{display:none}
.view.active{display:block}
.grid{display:grid;gap:var(--ui-3)}
.stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.card{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
padding:var(--ui-4);
box-shadow:var(--shadow);
}
.stat{
background:var(--panel);
border:1px solid var(--line);
border-radius:18px;
padding:var(--ui-3);
min-width:0;
box-shadow:var(--shadow);
}
.stat.home-stat-action{
width:100%;
appearance:none;
font:inherit;
color:inherit;
text-align:left;
cursor:pointer;
}
/* Upcoming Event: alert compact di atas "Agenda Hari Ini" -- kecil & tidak
mengganggu, tapi tetap jelas terlihat & bisa diklik. */
.upcoming-event-bar{
display:grid;
gap:var(--ui-2);
background:color-mix(in srgb, var(--accent-soft) 45%, var(--panel));
border:1px solid var(--line);
border-radius:var(--radius-control);
padding:var(--ui-25) var(--ui-3);
margin:var(--ui-3) 0;
}
.upcoming-event-bar[hidden]{ display:none; }
.upcoming-event-head{
font-size:var(--fs-caption);
font-weight:820;
text-transform:uppercase;
letter-spacing:.04em;
color:var(--accent);
}
/* wrap, BUKAN scroll — semua grup (Domestik & Luar Negeri) harus langsung terlihat. */
.upcoming-event-scroll{
display:flex;
gap:var(--ui-2) var(--ui-4);
flex-wrap:wrap;
min-width:0; /* cegah grid-blowout: tanpa ini, di HP baris grup melebar ke max-content (bukan lebar viewport) sehingga overflow-x:auto tidak bisa menggulir */
}
.upcoming-event-group{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--ui-15);
min-width:0;
}
.upcoming-event-group-label{
font-size:10px;
font-weight:820;
text-transform:uppercase;
letter-spacing:.03em;
color:var(--muted);
white-space:nowrap;
padding-right:var(--ui-05);
}
.upcoming-event-pill{
display:flex;
align-items:center;
gap:var(--ui-15);
flex:0 0 auto;
max-width:220px;
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--ui-r-pill);
padding:5px 10px;
font:inherit;
cursor:pointer;
color:inherit;
}
.upcoming-event-pill:hover{ border-color:var(--accent); }
.upcoming-event-pill.is-abroad{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.upcoming-event-pill .upcoming-event-date{
font-size:var(--fs-caption);
font-weight:820;
color:var(--accent);
white-space:nowrap;
}
.upcoming-event-pill .upcoming-event-title{
font-size:var(--fs-label);
font-weight:var(--fw-bold);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:120px;
}
.upcoming-event-pill .upcoming-event-loc{
font-size:var(--fs-caption);
color:var(--muted);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:90px;
}
.upcoming-event-more{
font-size:var(--fs-caption);
color:var(--muted);
white-space:nowrap;
padding:0 var(--ui-1);
}
@media (max-width:640px){
/* Di HP: grup ditumpuk vertikal (Domestik lalu Luar Negeri = 2 baris total,
ringkas/tidak menutupi layar). Tiap grup jadi SATU baris horizontal yang
bisa digeser; label grup di-sticky kiri agar tetap terlihat saat digeser. */
.upcoming-event-scroll{ flex-direction:column; gap:var(--ui-2); }
/* width:100% (bukan sekadar stretch) mengunci baris ke lebar container; tanpa ini
konten nowrap memaksa grup melebar ke max-content sehingga overflow-x tak menggulir. */
.upcoming-event-group{ width:100%; min-width:0; flex-wrap:nowrap; overflow-x:auto; align-items:center; gap:var(--ui-15); }
.upcoming-event-group-label{
position:sticky;
left:0;
flex:0 0 auto;
background:color-mix(in srgb, var(--accent-soft) 45%, var(--panel));
padding-right:var(--ui-15);
}
.upcoming-event-pill{ flex:0 0 auto; max-width:200px; }
.upcoming-event-pill .upcoming-event-loc{ display:none; }
}
.stat.home-stat-action:hover,
.stat.home-stat-action.active{
border-color:var(--status-rejected-border);
background:color-mix(in srgb, var(--status-rejected-bg) 38%, var(--panel));
box-shadow:inset 4px 0 0 var(--status-rejected), var(--shadow);
}
.stat.home-stat-action.waiting:hover,
.stat.home-stat-action.waiting.active{
border-color:var(--status-waiting-border);
background:color-mix(in srgb, var(--status-waiting-bg) 45%, var(--panel));
box-shadow:inset 4px 0 0 var(--status-waiting), var(--shadow);
}
.stat span{display:block;color:var(--muted);font-size:var(--fs-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat strong{display:block;font-size:24px;letter-spacing:-.04em;margin-top:3px}
.home-map-card{
position:relative;
margin-top:14px;
border:1px solid var(--line);
border-radius:var(--radius);
padding:var(--ui-4);
background:var(--panel);
box-shadow:var(--shadow);
overflow:hidden;
}
.map-head{margin:0 0 12px}
.map-day-controls{
display:flex;
align-items:center;
justify-content:flex-end;
gap:var(--ui-2);
flex-wrap:wrap;
}
.map-metrics{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--ui-2);
margin-bottom:12px;
}
.map-metric{
border:1px solid color-mix(in srgb, var(--line) 84%, transparent);
border-radius:18px;
padding:var(--ui-25);
background:color-mix(in srgb, var(--panel) 74%, transparent);
min-width:0;
}
.map-metric span{
display:block;
color:var(--muted);
font-size:var(--fs-caption);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.map-metric strong{
display:block;
margin-top:2px;
font-size:var(--fs-display);
letter-spacing:-.03em;
}
.official-map-layout{
display:grid;
grid-template-columns:minmax(0,1.42fr) minmax(260px,.68fr);
gap:var(--ui-3);
align-items:stretch;
}
.official-map-stage{
position:relative;
min-height:360px;
border:1px solid color-mix(in srgb, var(--line) 78%, transparent);
border-radius:22px;
overflow:hidden;
background:
radial-gradient(circle at 54% 44%, rgba(14,165,233,.14), transparent 34%),
linear-gradient(145deg, rgba(224,242,254,.78), rgba(255,255,255,.5));
}
.google-map-frame{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
filter:saturate(.96) contrast(.98);
opacity:.94;
}
.google-map-shade{
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg, rgba(255,255,255,.3), transparent 36%, rgba(255,255,255,.18)),
radial-gradient(circle at 52% 44%, transparent 0 34%, rgba(255,255,255,.22) 74%);
}
.google-map-link{
position:absolute;
left:12px;
bottom:12px;
z-index:3;
border:1px solid rgba(255,255,255,.72);
background:rgba(255,255,255,.78);
color:#0f172a;
border-radius:var(--ui-r-pill);
padding:var(--ui-2) var(--ui-25);
font-size:var(--fs-label);
font-weight:820;
text-decoration:none;
box-shadow:0 10px 24px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.76);
backdrop-filter:blur(16px) saturate(160%);
-webkit-backdrop-filter:blur(16px) saturate(160%);
}
.official-map-svg{
position:absolute;
inset:0;
width:100%;
height:100%;
min-height:360px;
display:block;
z-index:2;
pointer-events:none;
}
.delegate-picker-modal{max-width:720px}
.delegate-picker-body{display:grid;gap:var(--ui-3)}
.delegate-picker-summary{
border:1px solid var(--line);
border-radius:var(--radius-inner);
padding:var(--ui-3);
background:color-mix(in srgb, var(--accent-soft) 20%, var(--panel));
color:var(--ink);
font-size:var(--fs-body);
line-height:1.45;
}
.delegate-picker-summary strong{display:block;margin-bottom:4px;font-size:var(--fs-title)}
.delegate-picker-body label{display:grid;gap:var(--ui-15);font-size:var(--fs-label);font-weight:var(--fw-heavy);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.delegate-picker-body input,
.delegate-picker-body textarea{
width:100%;
border:1px solid var(--line);
border-radius:var(--radius-control);
padding:11px 12px;
background:var(--panel);
color:var(--ink);
font:inherit;
text-transform:none;
letter-spacing:0;
}
.approval-delegate-list{display:grid;gap:var(--ui-15)}
.approval-delegate-line{display:flex;gap:var(--ui-2);align-items:flex-start;justify-content:space-between}
.approval-delegate-line span{min-width:0;overflow-wrap:anywhere}
.approval-delegate-line small{display:block;color:var(--muted);font-size:var(--fs-caption);margin-top:2px}
.map-grid-line{stroke:rgba(15,23,42,.08);stroke-width:1}
.map-world-ghost{fill:rgba(255,255,255,.36);stroke:rgba(15,23,42,.08);stroke-width:1.4}
.map-island{
fill:rgba(255,255,255,.72);
stroke:rgba(2,132,199,.3);
stroke-width:2;
filter:drop-shadow(0 10px 18px rgba(15,23,42,.08));
}
.map-island.main{fill:rgba(255,255,255,.86)}
.map-label{
fill:rgba(15,23,42,.55);
font-size:14px;
font-weight:var(--fw-heavy);
letter-spacing:.08em;
}
.map-city-label{
fill:rgba(15,23,42,.46);
font-size:10px;
font-weight:760;
}
.official-map-marker{
cursor:pointer;
transform-box:fill-box;
transform-origin:center;
transition:transform .18s ease;
pointer-events:auto;
}
.official-map-marker:hover{transform:scale(1.08)}
.official-map-marker .marker-halo{opacity:.22}
.official-map-marker .marker-core{
stroke:rgba(255,255,255,.9);
stroke-width:3;
filter:drop-shadow(0 7px 12px rgba(15,23,42,.2));
}
.official-map-marker text{
fill:#fff;
font-size:var(--fs-caption);
font-weight:900;
text-anchor:middle;
dominant-baseline:middle;
pointer-events:none;
}
.official-map-marker.level-minister .marker-halo,
.official-map-marker.level-minister .marker-core{fill:#0f172a}
.official-map-marker.level-one .marker-halo,
.official-map-marker.level-one .marker-core{fill:var(--status-approved)}
.official-map-marker.level-two .marker-halo,
.official-map-marker.level-two .marker-core{fill:var(--success)}
.official-map-marker.level-unknown .marker-halo,
.official-map-marker.level-unknown .marker-core{fill:var(--status-delegated)}
.official-map-roster{
display:grid;
gap:var(--ui-2);
align-content:start;
max-height:360px;
overflow:auto;
padding-right:var(--ui-05);
}
.map-roster-item{
border:1px solid color-mix(in srgb, var(--line) 84%, transparent);
border-radius:18px;
padding:var(--ui-25);
background:color-mix(in srgb, var(--panel) 74%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.48);
color:var(--ink);
text-align:left;
cursor:pointer;
}
.map-roster-item.status-approved{border-color:var(--status-approved-border);box-shadow:inset 4px 0 0 var(--status-approved)}
.map-roster-item.status-pending{border-color:var(--status-pending-border);box-shadow:inset 4px 0 0 var(--status-pending)}
.map-roster-item.status-tapping{border-color:var(--status-tapping-border);box-shadow:inset 4px 0 0 var(--status-tapping)}
.map-roster-item.status-rejected{border-color:var(--status-rejected-border);box-shadow:inset 4px 0 0 var(--status-rejected)}
.map-roster-item.status-delegated{border-color:var(--status-delegated-border);box-shadow:inset 4px 0 0 var(--status-delegated)}
.map-roster-item.status-waiting{border-color:var(--status-waiting-border);box-shadow:inset 4px 0 0 var(--status-waiting)}
.map-roster-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--ui-2);
}
.map-roster-item strong{
display:block;
font-size:14px;
line-height:1.24;
}
.map-roster-item p{
margin:6px 0 0;
color:var(--muted);
font-size:var(--fs-label);
line-height:var(--lh-snug);
}
.map-roster-meta{
display:flex;
gap:var(--ui-15);
flex-wrap:wrap;
margin-top:8px;
}
.home-risk-card{
display:grid;
gap:var(--ui-3);
margin:12px 0;
border-color:color-mix(in srgb, var(--status-rejected-border) 70%, var(--line));
background:color-mix(in srgb, var(--status-rejected-bg) 22%, var(--panel));
}
.home-risk-card.collapsed .home-risk-body{display:none}
.home-risk-body{
display:grid;
gap:var(--ui-25);
}
.home-risk-toolbar{
display:flex;
flex-wrap:wrap;
gap:var(--ui-2);
align-items:center;
justify-content:space-between;
}
.home-risk-toolbar .btn.active{
background:var(--accent);
color:var(--bg);
border-color:var(--accent);
}
.home-risk-list{
display:grid;
gap:var(--ui-25);
}
.modal.high-risk-modal{
max-width:860px;
}
.high-risk-modal .home-risk-list{
max-height:56vh;
overflow:auto;
padding-right:var(--ui-05);
}
.map-level-badge{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:var(--ui-r-pill);
padding:4px 7px;
font-size:10px;
font-weight:850;
white-space:nowrap;
background:var(--accent-soft);
color:var(--ink);
}
.map-level-badge.level-one{background:var(--status-approved-bg);color:var(--status-approved)}
.map-level-badge.level-two{background:var(--success-bg);color:var(--success)}
.map-level-badge.level-minister{background:var(--status-neutral-bg);color:var(--status-neutral)}
.map-level-badge.level-unknown{background:var(--status-delegated-bg);color:var(--status-delegated)}
@media (max-width:860px){
.official-map-layout{grid-template-columns:1fr}
.official-map-roster{max-height:none}
}
@media (max-width:620px){
.map-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.official-map-stage,
.official-map-svg{min-height:300px}
}
.section-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:14px;
margin:18px 0 10px;
}
.section-head h2{margin:0;font-size:var(--fs-heading);letter-spacing:-.03em} /* G3 gerbang C: 20 -> 18 */
.section-head p{margin:2px 0 0;color:var(--muted);font-size:var(--fs-body)}
.chip-row{display:flex;gap:var(--ui-2);overflow-x:auto;padding-bottom:var(--ui-05)}
.chip{
border:1px solid var(--line);
background:var(--panel);
color:var(--ink);
border-radius:var(--ui-r-pill);
padding:8px 11px;
font-size:var(--fs-body);
white-space:nowrap;
}
.chip.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.agenda-list{display:grid;gap:var(--ui-3)}
.agenda-card{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius-card); /* G3: 22 -> 24, seragam .card */
padding:var(--pad-card-dense);
box-shadow:var(--shadow);
}
.agenda-card.status-approved{background:color-mix(in srgb, var(--status-approved-bg) 68%, var(--panel));border-color:var(--status-approved-border);box-shadow:inset 5px 0 0 var(--status-approved), var(--shadow)}
.agenda-card.status-pending{background:color-mix(in srgb, var(--status-pending-bg) 68%, var(--panel));border-color:var(--status-pending-border);box-shadow:inset 5px 0 0 var(--status-pending), var(--shadow)}
.agenda-card.status-tapping{background:color-mix(in srgb, var(--status-tapping-bg) 68%, var(--panel));border-color:var(--status-tapping-border);box-shadow:inset 5px 0 0 var(--status-tapping), var(--shadow)}
.agenda-card.status-rejected{background:color-mix(in srgb, var(--status-rejected-bg) 68%, var(--panel));border-color:var(--status-rejected-border);box-shadow:inset 5px 0 0 var(--status-rejected), var(--shadow)}
.agenda-card.status-delegated{background:color-mix(in srgb, var(--status-delegated-bg) 68%, var(--panel));border-color:var(--status-delegated-border);box-shadow:inset 5px 0 0 var(--status-delegated), var(--shadow)}
.agenda-card.status-waiting{background:color-mix(in srgb, var(--status-waiting-bg) 68%, var(--panel));border-color:var(--status-waiting-border);box-shadow:inset 5px 0 0 var(--status-waiting), var(--shadow)}
.agenda-card.status-flower{background:color-mix(in srgb, var(--status-flower-bg) 68%, var(--panel));border-color:var(--status-flower-border);box-shadow:inset 5px 0 0 var(--status-flower), var(--shadow)}
.agenda-card.status-resched{background:color-mix(in srgb, var(--status-resched-bg) 68%, var(--panel));border-color:var(--status-resched-border);box-shadow:inset 5px 0 0 var(--status-resched), var(--shadow)}
.agenda-card.date-block{
border-color:color-mix(in srgb, var(--accent) 34%, var(--line));
background:color-mix(in srgb, var(--accent-soft) 30%, var(--panel));
}
.agenda-card.status-approved .timebox{background:var(--status-approved-bg);color:var(--status-approved)}
.agenda-card.status-pending .timebox{background:var(--status-pending-bg);color:var(--status-pending)}
.agenda-card.status-tapping .timebox{background:var(--status-tapping-bg);color:var(--status-tapping-ink)}
.agenda-card.status-rejected .timebox{background:var(--status-rejected-bg);color:var(--status-rejected)}
.agenda-card.status-delegated .timebox{background:var(--status-delegated-bg);color:var(--status-delegated)}
.agenda-card.status-waiting .timebox{background:var(--status-waiting-bg);color:var(--status-waiting)}
.agenda-card.status-flower .timebox{background:var(--status-flower-bg);color:var(--status-flower)}
.agenda-card.status-resched .timebox{background:var(--status-resched-bg);color:var(--status-resched)}
.agenda-row{
display:grid;
grid-template-columns:64px 1fr auto;
gap:var(--ui-3);
align-items:start;
}
.timebox{
border-radius:var(--radius-inner);
background:var(--accent-soft);
padding:var(--ui-25) var(--ui-2);
text-align:center;
min-height:58px;
}
.timebox strong{display:block;font-size:var(--fs-title)}
.timebox span{display:block;color:var(--muted);font-size:var(--fs-caption);margin-top:2px}
.agenda-title{margin:0;font-size:var(--fs-title);font-weight:var(--fw-bold);letter-spacing:-.02em} /* G3 gerbang C: 16 -> 15 */
.agenda-card.date-block .agenda-title{font-size:var(--fs-heading);font-weight:850}
.agenda-meta{margin:5px 0 0;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-snug)}
.badge{
display:inline-flex;align-items:center;justify-content:center;
border-radius:var(--ui-r-pill);
padding:5px 8px;
font-size:var(--fs-label);
font-weight:650;
white-space:nowrap;
}
.badge.p1,.badge.high,.badge.danger{background:var(--danger-bg);color:var(--danger)}
.badge.p2,.badge.medium,.badge.warn{background:var(--warning-bg);color:var(--warning)}
.badge.p3,.badge.info{background:var(--info-bg);color:var(--info)}
.badge.p4{background:var(--priority-p4-bg);color:var(--priority-p4)}
.badge.p5{background:var(--priority-p5-bg);color:var(--priority-p5)}
.badge.ok{background:var(--success-bg);color:var(--success)}
.badge.status-approved{background:var(--status-approved-bg);color:var(--status-approved)}
.badge.status-pending{background:var(--status-pending-bg);color:var(--status-pending)}
.badge.status-tapping{background:var(--status-tapping-bg);color:var(--status-tapping-ink)}
.badge.status-rejected{background:var(--status-rejected-bg);color:var(--status-rejected)}
.badge.status-delegated{background:var(--status-delegated-bg);color:var(--status-delegated)}
.badge.status-waiting{background:var(--status-waiting-bg);color:var(--status-waiting)}
.badge.status-flower{background:var(--status-flower-bg);color:var(--status-flower)}
.badge.status-resched{background:var(--status-resched-bg);color:var(--status-resched)}
.badge.gray{background:var(--status-neutral-bg);color:var(--status-neutral)}
/* Indikator status sinkron server di topbar: netral saat belum diketahui,
hijau saat tersinkron, merah saat gagal (data yang tampil = cache lokal). */
#syncStatusBtn.sync-ok{color:var(--success)}
#syncStatusBtn.sync-err{color:var(--danger)}
/* Banner persisten lintas-view (gagal sinkron, versi baru, konfirmasi seed). */
.app-banners{display:flex;flex-direction:column;gap:var(--ui-2);padding:0 var(--ui-3,16px);margin:8px 0 0}
.app-banners:empty{display:none}
.app-banner{display:flex;align-items:center;gap:var(--ui-3);flex-wrap:wrap;padding:10px 14px;border-radius:var(--radius-control);font-size:var(--fs-body);line-height:1.4;border:1px solid transparent}
.app-banner .app-banner-msg{flex:1 1 240px;min-width:0}
.app-banner .app-banner-actions{display:flex;gap:var(--ui-2);flex-wrap:wrap}
.app-banner button{border:none;border-radius:var(--radius-chip);padding:var(--ui-15) var(--ui-3);font-size:var(--fs-label);font-weight:var(--fw-medium);cursor:pointer}
.app-banner button.primary{background:var(--accent,#2563eb);color:var(--accent-ink)}
.app-banner button.ghost{background:rgba(0,0,0,.06);color:inherit}
.app-banner.warn{background:var(--warning-bg,#fef3c7);color:var(--warning,#92400e);border-color:rgba(146,64,14,.25)}
.app-banner.info{background:var(--info-bg,#dbeafe);color:var(--info,#1e40af);border-color:rgba(30,64,175,.25)}
.app-banner.danger{background:var(--danger-bg,#fee2e2);color:var(--danger,#b42318);border-color:rgba(180,35,24,.25)}
button.badge{
border:0;
font:inherit;
cursor:pointer;
}
.metric-strip{
display:flex;
flex-wrap:wrap;
gap:var(--ui-2);
margin-top:10px;
}
.metric-disclosure{
position:relative;
min-width:0;
}
.metric-action{
box-shadow:inset 0 1px 0 rgba(255,255,255,.48), 0 8px 18px rgba(16,24,40,.07);
}
.metric-panel{
display:none;
position:static;
width:min(340px, calc(100vw - 48px));
padding:var(--ui-3);
border:1px solid var(--glass-border);
border-radius:18px;
background:var(--panel);
box-shadow:0 18px 42px rgba(16,24,40,.16), inset 0 1px 0 rgba(255,255,255,.58);
}
.metric-disclosure.open .metric-panel,
.metric-disclosure:hover .metric-panel,
.metric-disclosure:focus-within .metric-panel{
display:none;
}
.metric-disclosure.open .metric-action{
outline:2px solid color-mix(in srgb, var(--accent) 32%, transparent);
outline-offset:2px;
}
.floating-popover{
position:fixed;
z-index:5000;
display:grid;
gap:var(--ui-25);
max-width:calc(100vw - 24px);
max-height:calc(100vh - 24px);
overflow:auto;
overscroll-behavior:contain;
background:var(--panel);
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.floating-popover[data-placement="top"]{
transform-origin:bottom left;
}
.floating-popover[data-placement="bottom"]{
transform-origin:top left;
}
.metric-panel h4,
.detail-metric-panel h4{
margin:0;
font-size:var(--fs-body);
}
.metric-panel p,
.detail-metric-panel p{
margin:0;
color:var(--muted);
font-size:var(--fs-label);
line-height:1.45;
}
.metric-list{
display:grid;
gap:7px;
margin:0;
padding:0;
list-style:none;
}
.metric-list li{
display:flex;
gap:var(--ui-2);
align-items:flex-start;
color:var(--muted);
font-size:var(--fs-label);
line-height:var(--lh-snug);
}
.metric-list li::before{
content:"";
flex:0 0 8px;
width:8px;
height:8px;
margin-top:4px;
border-radius:var(--ui-r-pill);
background:var(--warning);
}
.metric-list.risk-list li::before{background:var(--danger)}
.metric-list.done-list li::before{background:var(--success)}
.metric-quick-actions{
display:flex;
flex-wrap:wrap;
gap:var(--ui-2);
}
.metric-quick-actions .btn{
min-height:34px;
padding:var(--ui-2) var(--ui-25);
font-size:var(--fs-label);
border-radius:12px;
}
.detail-metric-panel{
display:grid;
gap:var(--ui-25);
margin:0 0 12px;
padding:var(--ui-3);
border:1px solid var(--glass-border);
border-radius:18px;
background:color-mix(in srgb, var(--panel) 74%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.56), 0 10px 24px rgba(16,24,40,.07);
}
.detail-metric-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:var(--ui-25);
margin-bottom:12px;
}
.check-actions{
display:flex;
flex-wrap:wrap;
gap:var(--ui-2);
margin-top:8px;
}
.check-actions .btn{
min-height:34px;
padding:var(--ui-2) var(--ui-25);
font-size:var(--fs-label);
border-radius:12px;
}
.progress-wrap{margin-top:12px}
.progress-label{display:flex;justify-content:space-between;color:var(--muted);font-size:var(--fs-label);margin-bottom:6px}
.progress{height:10px;border-radius:var(--ui-r-pill);background:color-mix(in srgb, var(--line) 75%, var(--panel));overflow:hidden}
.progress span{height:100%;display:block;border-radius:var(--ui-r-pill);background:var(--accent)}
.actions{display:flex;gap:var(--ui-2);flex-wrap:wrap;margin-top:12px}
.sync-status{
margin-top:10px;
padding:var(--ui-25) var(--ui-3);
border:1px solid color-mix(in srgb, var(--line) 78%, transparent);
border-radius:var(--radius-control);
background:color-mix(in srgb, var(--panel) 74%, transparent);
color:var(--muted);
font-size:var(--fs-label);
line-height:1.45;
}
.sync-status.success{border-color:var(--status-approved-border);background:var(--status-approved-bg);color:var(--status-approved)}
.sync-status.warning{border-color:var(--status-pending-border);background:var(--status-pending-bg);color:var(--status-pending)}
.sync-status.error{border-color:var(--status-rejected-border);background:var(--status-rejected-bg);color:var(--status-rejected)}
.approval-summary{
margin-top:12px;
border:1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius:18px;
background:color-mix(in srgb, var(--panel) 72%, transparent);
overflow:hidden;
}
.approval-summary summary{
list-style:none;
cursor:pointer;
padding:var(--ui-3);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--ui-3);
font-weight:780;
}
.approval-summary summary::-webkit-details-marker{display:none}
.approval-summary summary::after{
content:"⌄";
width:26px;
height:26px;
border-radius:var(--ui-r-pill);
display:grid;
place-items:center;
background:var(--accent-soft);
color:var(--ink);
flex:0 0 auto;
}
.approval-summary[open] summary::after{content:"⌃"}
.approval-summary summary small{
display:block;
color:var(--muted);
font-size:var(--fs-label);
font-weight:650;
line-height:1.3;
margin-top:3px;
}
.approval-summary-body{
padding:0 var(--ui-3) var(--ui-3);
display:grid;
gap:var(--ui-25);
}
.approval-script{
border-radius:var(--radius-inner);
background:color-mix(in srgb, var(--accent-soft) 72%, var(--panel));
padding:9px 10px;
line-height:1.36;
font-size:12.5px;
white-space:pre-line;
max-height:128px;
overflow:auto;
}
.approval-summary-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--ui-2);
}
.approval-readiness-strip{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:var(--ui-2);
align-items:center;
padding:7px 9px;
border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
border-radius:13px;
background:color-mix(in srgb, var(--accent-soft) 72%, var(--panel));
}
.approval-readiness-strip strong{
display:block;
color:var(--ink);
font-size:var(--fs-label);
font-weight:900;
}
.approval-readiness-strip small{
display:block;
color:var(--muted);
font-size:10.5px;
font-weight:760;
margin-top:1px;
}
.approval-readiness-meter{
width:min(128px,22vw);
min-width:90px;
height:7px;
border-radius:var(--ui-r-pill);
background:color-mix(in srgb, var(--line) 60%, transparent);
overflow:hidden;
box-shadow:inset 0 1px 2px rgba(15,23,42,.08);
}
.approval-readiness-meter span{
display:block;
height:100%;
width:var(--approval-ready,0%);
border-radius:inherit;
background:linear-gradient(90deg,var(--accent),var(--readiness-complete));
}
.approval-checklist-grid{
grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
align-items:stretch;
}
.approval-summary-row{
border:1px solid color-mix(in srgb, var(--line) 84%, transparent);
border-radius:11px;
padding:7px;
background:color-mix(in srgb, var(--panel) 76%, transparent);
min-width:0;
display:grid;
gap:var(--ui-1);
align-content:start;
}
.approval-checklist-row{
min-height:86px;
}
.approval-checklist-row.is-missing{
border-color:color-mix(in srgb, var(--status-rejected) 34%, var(--line));
background:color-mix(in srgb, var(--status-rejected-bg) 58%, var(--panel));
}
.approval-summary-row small{
display:block;
color:var(--muted);
font-size:9.5px;
font-weight:760;
margin-bottom:1px;
text-transform:uppercase;
letter-spacing:.02em;
}
.approval-summary-row div{
font-size:var(--fs-label);
line-height:1.3;
white-space:pre-line;
overflow-wrap:anywhere;
}
.approval-summary-row .approval-checklist-value{
display:grid;
gap:var(--ui-1);
white-space:normal;
min-width:0;
}
.approval-summary-row .approval-checklist-text{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
color:var(--ink);
overflow-wrap:anywhere;
white-space:normal;
}
.approval-summary-row .approval-checklist-empty{
display:inline-flex;
align-items:center;
width:max-content;
max-width:100%;
min-height:24px;
padding:var(--ui-1) var(--ui-2);
border-radius:var(--ui-r-pill);
background:var(--status-rejected-bg);
color:var(--status-rejected);
font-weight:900;
font-size:10.5px;
}
.approval-checklist-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--ui-15);
color:var(--muted);
font-size:10px;
font-weight:760;
min-width:0;
}
.approval-checklist-meta span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.approval-checklist-more{
border:0;
background:transparent;
color:var(--accent);
font:inherit;
font-size:10.5px;
font-weight:900;
padding:0;
cursor:pointer;
white-space:nowrap;
}
.approval-checklist-row .result-reader-toggle{
min-height:34px;
grid-template-columns:auto minmax(0,1fr) auto;
gap:var(--ui-15);
border-radius:11px;
padding:5px 6px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.52), 0 6px 14px rgba(16,24,40,.045);
}
.approval-checklist-row .result-reader-toggle:hover{
transform:none;
box-shadow:0 8px 18px rgba(16,24,40,.07), inset 0 1px 0 rgba(255,255,255,.58);
}
.approval-checklist-row .result-reader-toggle-icon{
width:30px;
min-width:30px;
height:20px;
font-size:8.5px;
}
.approval-checklist-row .result-reader-toggle-label{
font-size:var(--fs-caption);
line-height:1.15;
}
.approval-checklist-row .result-reader-toggle-meta{
font-size:9.5px;
line-height:1.15;
}
.approval-checklist-row .result-reader-toggle-action{
min-width:38px;
min-height:22px;
font-size:10px;
}
.approval-whatsapp-card{
display:grid;
gap:var(--ui-25);
margin-bottom:12px;
}
.approval-whatsapp-card summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--ui-3);
}
.approval-whatsapp-card summary::-webkit-details-marker{display:none}
.approval-whatsapp-card summary::after{
content:"Buka";
border-radius:var(--ui-r-pill);
padding:var(--ui-15) var(--ui-25);
background:var(--accent-soft);
color:var(--ink);
font-size:var(--fs-label);
font-weight:850;
flex:0 0 auto;
}
.approval-whatsapp-card[open] summary::after{content:"Tutup"}
.approval-whatsapp-body{
display:grid;
gap:var(--ui-25);
}
.approval-whatsapp-preview{
display:block;
width:100%;
min-height:360px;
max-height:58vh;
border:1px solid color-mix(in srgb, var(--success-border) 72%, var(--line));
border-radius:18px;
padding:13px;
background:color-mix(in srgb, var(--success-bg) 34%, var(--panel));
color:var(--ink);
font-family:var(--font-ui);
font-size:var(--fs-body);
line-height:var(--lh-reading);
white-space:pre-wrap;
overflow-wrap:anywhere;
overflow:auto;
resize:vertical;
box-sizing:border-box;
letter-spacing:0;
}
.approval-whatsapp-preview:focus{
outline:2px solid color-mix(in srgb, var(--accent) 72%, transparent);
outline-offset:1px;
}
@media(max-width:680px){
.approval-whatsapp-preview{
min-height:320px;
}
}
.merge-result{
display:grid;
gap:var(--ui-25);
margin-top:10px;
}
.merge-candidate{
border:1px solid var(--line);
border-radius:18px;
padding:var(--ui-3);
background:color-mix(in srgb, var(--panel) 78%, transparent);
display:grid;
gap:var(--ui-25);
}
.merge-candidate-head{
display:flex;
gap:var(--ui-25);
justify-content:space-between;
align-items:flex-start;
}
.merge-candidate h4{
margin:0;
font-size:var(--fs-title);
line-height:1.25;
}
.merge-candidate p{
margin:4px 0 0;
color:var(--muted);
font-size:var(--fs-label);
line-height:var(--lh-snug);
}
.merge-list{
display:grid;
gap:7px;
}
.merge-row{
border:1px solid color-mix(in srgb, var(--line) 84%, transparent);
border-radius:var(--radius-control);
padding:9px;
background:color-mix(in srgb, var(--panel) 88%, var(--bg));
font-size:var(--fs-label);
line-height:var(--lh-snug);
}
.merge-row strong{
display:block;
font-size:var(--fs-body);
margin-bottom:2px;
}
.detail-merge-card{
margin-top:12px;
display:grid;
gap:var(--ui-25);
}
.detail-merge-card.attention{
border-color:var(--accent);
box-shadow:0 0 0 4px var(--accent-soft);
}
.detail-merge-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--ui-25);
}
.detail-merge-head strong{
display:block;
font-size:14px;
line-height:1.25;
}
.detail-merge-head span{
color:var(--muted);
font-size:var(--fs-label);
line-height:var(--lh-snug);
}
.detail-merge-row{
display:grid;
grid-template-columns:1fr auto;
gap:var(--ui-25);
align-items:center;
}
.detail-merge-row .btn{
min-height:32px;
padding:var(--ui-2) var(--ui-25);
border-radius:var(--ui-r-pill);
font-size:var(--fs-label);
}
.approval-quick-edit{
margin-top:12px;
border:1px solid color-mix(in srgb, var(--status-pending-border) 72%, var(--line));
border-radius:18px;
background:color-mix(in srgb, var(--status-pending-bg) 34%, var(--panel));
overflow:hidden;
}
.approval-quick-edit summary{
list-style:none;
cursor:pointer;
padding:var(--ui-3);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--ui-3);
font-weight:var(--fw-heavy);
}
.approval-quick-edit summary::-webkit-details-marker{display:none}
.approval-quick-edit summary::after{
content:"Edit";
border-radius:var(--ui-r-pill);
padding:5px 9px;
background:var(--status-pending-bg);
color:var(--status-pending);
font-size:var(--fs-caption);
font-weight:850;
flex:0 0 auto;
}
.approval-quick-edit[open] summary::after{content:"Tutup"}
.approval-quick-body{
display:grid;
gap:var(--ui-25);
padding:0 var(--ui-3) var(--ui-3);
}
.approval-quick-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--ui-25);
}
.approval-quick-grid label{
margin:0;
display:grid;
gap:5px;
color:var(--muted);
font-size:var(--fs-label);
font-weight:750;
}
.approval-quick-grid input,
.approval-quick-grid select,
.approval-quick-grid textarea{
font-size:var(--fs-body);
min-height:40px;
padding:var(--ui-25);
}
.approval-quick-wide{grid-column:1 / -1}
.approval-reschedule-panel{
display:none;
gap:var(--ui-3);
margin-top:12px;
padding:14px;
border:1px solid var(--status-waiting-border);
border-radius:18px;
background:color-mix(in srgb, var(--status-waiting-bg) 46%, var(--panel));
box-shadow:inset 0 1px 0 rgba(255,255,255,.56);
}
.approval-reschedule-panel.active{display:grid}
.approval-reschedule-panel strong,
.approval-reschedule-panel span{display:block}
.approval-reschedule-panel span{
margin-top:3px;
color:var(--muted);
font-size:var(--fs-label);
line-height:var(--lh-snug);
}
.approval-reschedule-grid{
display:grid;
grid-template-columns:minmax(150px,1fr) minmax(120px,.7fr) auto;
gap:var(--ui-25);
align-items:end;
}
.approval-reschedule-grid label{
display:grid;
gap:var(--ui-15);
font-size:var(--fs-label);
color:var(--muted);
font-weight:var(--fw-heavy);
}
.approval-reschedule-grid input,
.waiting-date-control input{
width:100%;
border:1px solid var(--glass-border);
border-radius:var(--radius-control);
padding:var(--ui-25) var(--ui-3);
color:var(--ink);
background:rgba(255,255,255,.52);
font:inherit;
}
.waiting-list-actions{
display:flex;
flex-wrap:wrap;
gap:var(--ui-2);
align-items:center;
margin-top:var(--ui-25);
padding-top:var(--ui-25);
border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
/* tipografi baris Daftar Tunggu: judul --fs-title, meta caption muted (token G3) */
.home-risk-item .waiting-head-main strong{
display:block;
font-size:var(--fs-title);
line-height:var(--lh-tight);
overflow-wrap:anywhere;
}
.home-risk-item .waiting-head-main p{
margin:3px 0 0;
font-size:var(--fs-caption);
color:var(--muted);
}
.home-risk-item > p{
margin:var(--ui-15) 0 var(--ui-15);
font-size:var(--fs-caption);
color:var(--muted);
}
.home-risk-hint{
font-size:var(--fs-caption);
color:var(--muted);
min-width:0;
}
/* Urutkan Daftar Tunggu (super admin): drag-drop + tombol naik/turun */
.waiting-head-main{ display:flex; align-items:flex-start; gap:var(--ui-2); min-width:0; }
.waiting-head-right{ display:flex; align-items:center; gap:var(--ui-2); flex:0 0 auto; }
.waiting-draggable{ cursor:grab; }
.waiting-draggable.dragging{ opacity:.5; }
.waiting-drop-target{ outline:2px dashed var(--accent); outline-offset:3px; border-radius:var(--radius-control); }
.waiting-drag-handle{ color:var(--muted); font-size:16px; line-height:1; cursor:grab; user-select:none; padding-top:var(--ui-05); }
.waiting-reorder{ display:inline-flex; flex-direction:column; gap:var(--ui-05); }
.waiting-move{
border:1px solid var(--line); background:var(--panel); color:var(--ink); /* dulu var(--text) tanpa definisi & fallback */
border-radius:var(--radius-chip); width:36px; height:24px; line-height:1; font-size:var(--fs-caption);
cursor:pointer; display:flex; align-items:center; justify-content:center;
/* HIG: pasangan naik/turun = satu stepper ~52pt; tiap tombol punya hit-area layak */
}
.waiting-move:hover{ border-color:var(--accent); color:var(--accent); }
/* Ikon pesawat di tanggal kalender yang punya agenda luar kota/negeri */
.calendar-plane{ font-size:var(--fs-label); line-height:1; margin-left:auto; opacity:.85; }
.waiting-date-control{
display:grid;
gap:var(--ui-1);
}
.waiting-date-control span{
color:var(--muted);
font-size:var(--fs-caption);
font-weight:var(--fw-heavy);
}
.waiting-schedule-group{
margin-top:8px;
padding:var(--ui-25);
border:1px solid var(--status-waiting-border);
border-radius:var(--radius-inner);
background:color-mix(in srgb, var(--status-waiting-bg) 40%, var(--panel));
box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.waiting-schedule-group-label{
display:block;
margin-bottom:8px;
color:var(--ink);
font-size:var(--fs-label);
font-weight:var(--fw-bold);
}
/* penjelas aksi: "Jadwalkan" memasukkan agenda ke kalender ber-status TBC */
.waiting-schedule-group-label em{
font-style:normal;
font-weight:var(--fw-medium);
color:var(--muted);
font-size:var(--fs-caption);
margin-left:var(--ui-15);
}
.waiting-schedule-group-row{
display:grid;
grid-template-columns:minmax(130px,1fr) minmax(100px,.7fr) auto;
gap:var(--ui-2);
align-items:center;
}
.waiting-schedule-group-row input{
width:100%;
border:1px solid var(--glass-border);
border-radius:var(--radius-control);
padding:var(--ui-25) var(--ui-3);
color:var(--ink);
background:rgba(255,255,255,.52);
font:inherit;
}
@media (max-width:680px){
.approval-summary-grid{grid-template-columns:1fr}
.approval-readiness-strip{grid-template-columns:1fr}
.approval-readiness-meter{width:100%;min-width:0}
.approval-summary summary{align-items:flex-start}
.approval-quick-grid{grid-template-columns:1fr}
.approval-reschedule-grid{grid-template-columns:1fr}
.waiting-schedule-group-row{grid-template-columns:1fr}
}
.btn{
border:1px solid var(--line);
background:var(--panel);
color:var(--ink);
border-radius:var(--radius-control);
padding:var(--ui-25) var(--ui-3);
font-size:var(--ctrl-fs); /* G3 gerbang B: tombol polos tak lagi mewarisi 16px */
font-weight:var(--fw-medium);
min-height:var(--ctrl-h); /* G3 gerbang A: 42 -> 44, sejajar isian */
}
.btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn.success{background:var(--success-bg);color:var(--success);border-color:transparent}
.btn.warn{background:var(--warning-bg);color:var(--warning);border-color:transparent}
.btn.danger{background:var(--danger-bg);color:var(--danger);border-color:transparent}
.btn.status-approved-action{background:var(--status-approved-bg);color:var(--status-approved);border-color:transparent}
.btn.status-pending-action{background:var(--status-pending-bg);color:var(--status-pending);border-color:transparent}
.btn.status-rejected-action{background:var(--status-rejected-bg);color:var(--status-rejected);border-color:transparent}
.btn.status-delegated-action{background:var(--status-delegated-bg);color:var(--status-delegated);border-color:transparent}
.btn.status-tapping-action,
.btn.tapping-active{background:var(--status-tapping-bg);color:var(--status-tapping-ink);border-color:var(--status-tapping-border)}
.btn.status-waiting-action{background:var(--status-waiting-bg);color:var(--status-waiting);border-color:transparent}
.btn.status-flower-action{background:var(--status-flower-bg);color:var(--status-flower);border-color:transparent}
.btn.status-resched-action{background:var(--status-resched-bg);color:var(--status-resched);border-color:transparent}
.btn:disabled{opacity:.48;cursor:not-allowed}
.btn.full{width:100%}
.empty{
border:1px dashed var(--line);
border-radius:22px;
padding:22px;
color:var(--muted);
text-align:center;
background:color-mix(in srgb, var(--panel) 78%, transparent);
}
label{display:block;font-size:var(--fs-body);color:var(--muted);margin-bottom:6px}
input,select,textarea{
width:100%;
border:1px solid var(--line);
background:var(--panel);
color:var(--ink);
border-radius:var(--radius-control);
padding:var(--ui-3);
min-height:44px;
outline:none;
}
textarea{min-height:88px;resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)}
.form-grid{display:grid;gap:var(--ui-3)}
.two{grid-template-columns:repeat(2,1fr)}
.three{grid-template-columns:repeat(3,1fr)}
.multi-date-panel{
border:1px solid var(--line);
border-radius:18px;
padding:var(--ui-3);
background:color-mix(in srgb, var(--panel) 88%, var(--bg));
}
.multi-date-input-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:var(--ui-2);
align-items:end;
}
.multi-date-list{
display:flex;
gap:var(--ui-2);
flex-wrap:wrap;
margin-top:10px;
}
.multi-date-chip{
display:inline-flex;
align-items:center;
gap:var(--ui-15);
border:1px solid var(--line);
border-radius:var(--ui-r-pill);
padding:var(--ui-15) var(--ui-2) var(--ui-15) var(--ui-25);
background:var(--panel);
color:var(--ink);
font-size:var(--fs-label);
font-weight:750;
max-width:100%;
}
.multi-date-chip.range{
background:var(--accent-soft);
border-color:color-mix(in srgb, var(--accent) 28%, var(--line));
}
.multi-date-chip small{
color:var(--muted);
font-size:10px;
font-weight:var(--fw-heavy);
text-transform:uppercase;
letter-spacing:.04em;
}
.multi-date-chip button{
border:0;
width:20px;
height:20px;
border-radius:var(--ui-r-pill);
background:var(--accent-soft);
color:var(--ink);
display:grid;
place-items:center;
line-height:1;
padding:0;
}
.multi-date-meta{
margin:8px 0 0;
color:var(--muted);
font-size:var(--fs-label);
line-height:var(--lh-snug);
}
.check-detail{
width:100%;
display:grid;
gap:var(--ui-2);
}
.check-detail-head{
display:flex;
align-items:center;
gap:var(--ui-25);
}
.check-detail textarea{
min-height:72px;
font-size:14px;
line-height:1.4;
margin-top:2px;
}
.checklist{display:grid;gap:var(--ui-2);margin-top:10px}
.check-item{
display:flex;gap:var(--ui-25);align-items:center;
border:1px solid var(--line);
border-radius:15px;
padding:var(--ui-25) var(--ui-3);
background:color-mix(in srgb, var(--panel) 92%, var(--bg));
}
.check-item.missing{
border-color:var(--status-rejected-border);
background:color-mix(in srgb, var(--status-rejected-bg) 44%, var(--panel));
box-shadow:inset 4px 0 0 var(--status-rejected);
}
.check-item.missing .check-detail-head span,
.check-item.missing .check-detail-head label{
color:var(--status-rejected);
font-weight:var(--fw-heavy);
}
.check-item.missing textarea{
border-color:var(--status-rejected-border);
background:color-mix(in srgb, var(--status-rejected-bg) 35%, var(--panel));
}
.check-item.missing .extract-box{
border-color:var(--status-rejected-border);
background:color-mix(in srgb, var(--status-rejected-bg) 30%, var(--panel));
}
.check-item input{width:auto;min-height:auto;accent-color:#0f172a}
.check-item span{font-size:14px}
.bottom-nav{
position:fixed;
left:0;right:0;bottom:0;
z-index:30;
padding:8px 12px calc(8px + var(--safe-bottom));
background:color-mix(in srgb, var(--panel) 88%, transparent);
border-top:1px solid var(--line);
backdrop-filter: blur(18px);
}
.nav-inner{
max-width:860px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(7,1fr);
gap:var(--ui-15);
}
.nav-btn{
border:0;
background:transparent;
color:var(--muted);
border-radius:var(--radius-inner);
padding:var(--ui-2) var(--ui-1);
font-size:var(--fs-caption);
display:grid;
gap:var(--ui-05);
place-items:center;
}
.nav-btn span:first-child{font-size:20px;line-height:1}
.nav-btn span:last-child{line-height:1.08;text-wrap:balance}
.nav-btn.active{color:var(--ink);background:var(--accent-soft)}
.modal-backdrop{
position:fixed;inset:0;
background:rgba(2,6,23,.55);
z-index:60;
display:none;
align-items:center;
padding:14px;
}
.modal-backdrop.active{display:flex}
.modal{
width:100%;
max-width:760px;
max-height:88vh;
overflow:auto;
margin:0 auto;
background:var(--panel);
color:var(--ink);
border-radius:26px;
border:1px solid var(--line);
box-shadow:0 25px 80px rgba(0,0,0,.35);
padding:var(--ui-4);
}
.modal-head{display:flex;justify-content:space-between;gap:var(--ui-3);align-items:start;margin-bottom:12px}
.modal-head h3{margin:0;font-size:20px;letter-spacing:-.03em}
.agenda-preview-backdrop{
z-index:220;
align-items:center;
padding:var(--ui-4);
}
.agenda-preview-modal{
max-width:680px;
border-radius:var(--radius-card);
}
.agenda-preview-hero{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--ui-25);
padding:14px;
border:1px solid var(--glass-border);
border-radius:24px;
background:linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.agenda-preview-hero-main{
display:grid;
gap:var(--ui-2);
min-width:0;
flex:1 1 auto;
}
.agenda-preview-detail-btn{
flex:0 0 auto;
padding:var(--ui-15) var(--ui-3);
min-height:0;
font-size:var(--fs-label);
font-weight:760;
border-radius:var(--ui-r-pill);
}
.agenda-preview-recommended,
.detail-brief-recommended{
margin:0;
color:var(--muted);
font-size:var(--fs-label);
font-style:italic;
}
.detail-brief-recommended{margin:2px 0 0}
[data-theme="dark"] .agenda-preview-hero{
background:linear-gradient(145deg, rgba(51,65,85,.62), rgba(15,23,42,.3));
}
.agenda-preview-title{
margin:0;
font-size:var(--fs-display);
line-height:1.15;
letter-spacing:0;
font-weight:860;
}
.agenda-preview-meta{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:0;
}
.agenda-preview-chip{
display:inline-flex;
align-items:center;
gap:var(--ui-15);
min-height:30px;
max-width:100%;
padding:var(--ui-15) var(--ui-25);
border:1px solid var(--glass-border);
border-radius:var(--ui-r-pill);
color:var(--muted);
background:rgba(255,255,255,.42);
font-size:var(--fs-label);
font-weight:760;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
[data-theme="dark"] .agenda-preview-chip{
background:rgba(255,255,255,.1);
}
.agenda-preview-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--ui-25);
margin-top:12px;
}
.agenda-preview-grid.agenda-preview-grid-3{
grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:560px){
.agenda-preview-grid.agenda-preview-grid-3{grid-template-columns:1fr;}
}
.agenda-preview-kv{
min-width:0;
border:1px solid var(--glass-border);
border-radius:18px;
padding:var(--ui-25) var(--ui-3);
background:rgba(255,255,255,.34);
box-shadow:inset 0 1px 0 rgba(255,255,255,.46);
}
[data-theme="dark"] .agenda-preview-kv{
background:rgba(15,23,42,.34);
}
.agenda-preview-kv small{
display:block;
margin-bottom:4px;
color:var(--muted);
font-size:var(--fs-caption);
font-weight:780;
text-transform:uppercase;
letter-spacing:.04em;
}
.agenda-preview-kv strong,
.agenda-preview-kv span,
.agenda-preview-kv a{
display:block;
min-width:0;
color:var(--ink);
font-size:var(--fs-body);
line-height:1.32;
font-weight:760;
overflow:hidden;
text-overflow:ellipsis;
}
.agenda-preview-kv a{ color:var(--accent); text-decoration:none; }
.agenda-preview-kv a:hover{ text-decoration:underline; }
.audiensi-attachment-link{
appearance:none;
border:0;
padding:0;
background:none;
color:var(--accent);
font:inherit;
font-weight:760;
text-align:left;
cursor:pointer;
}
.audiensi-attachment-link:hover{ text-decoration:underline; }
.agenda-preview-kv .audiensi-attachment-link{
display:block;
min-width:0;
max-width:100%;
font-size:var(--fs-body);
line-height:1.32;
overflow:hidden;
text-overflow:ellipsis;
}
.agenda-preview-kv-full{ grid-column:1 / -1; }
.agenda-preview-docs{ margin-top:14px; }
.agenda-preview-docs-title{
display:block;
margin-bottom:8px;
color:var(--muted);
font-size:var(--fs-caption);
font-weight:780;
text-transform:uppercase;
letter-spacing:.04em;
}
.agenda-preview-docs-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
gap:var(--ui-2);
}
.agenda-preview-doc{
appearance:none;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:var(--ui-05);
min-height:52px;
padding:var(--ui-2) var(--ui-15);
border:1px solid var(--glass-border);
border-radius:var(--radius-control);
background:rgba(255,255,255,.34);
color:var(--ink);
font:inherit;
font-size:var(--fs-label);
font-weight:760;
text-align:center;
text-decoration:none;
cursor:pointer;
}
[data-theme="dark"] .agenda-preview-doc{ background:rgba(15,23,42,.34); }
.agenda-preview-doc:hover{ border-color:var(--accent); }
.agenda-preview-doc small{ color:var(--accent); font-size:10px; font-weight:var(--fw-bold); }
.agenda-preview-doc.is-disabled{
color:var(--muted);
cursor:default;
opacity:.6;
}
.agenda-preview-doc.is-disabled small{ color:var(--muted); }
.home-operational-summary{margin-top:14px}
.home-operational-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-2)}
.home-operational-summary-card{min-width:0;min-height:112px;display:grid;align-content:start;gap:var(--ui-2);border:1px solid var(--check-ops-border);border-radius:var(--radius-inner);padding:var(--ui-25);background:var(--check-ops-tint);overflow:hidden}
.home-operational-summary-card header{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-2);min-width:0}
.home-operational-summary-card header strong{font-size:var(--fs-label);color:var(--check-ops);overflow-wrap:anywhere}
.home-operational-summary-card header span,.home-operational-summary-card header button{border:0;background:transparent;color:var(--accent);font:inherit;font-size:10px;font-weight:850;padding:0}
.home-operational-text{max-height:72px;overflow:hidden;font-size:var(--fs-caption);line-height:1.38;color:var(--ink)}
.home-operational-text .manual-rundown-row{grid-template-columns:72px minmax(0,1fr);gap:var(--ui-15);padding:var(--ui-05) 0}
.home-operational-text .manual-list{gap:var(--ui-05);padding-left:var(--ui-4)}.home-operational-text .manual-text{gap:var(--ui-05)}
.home-operational-photo-strip{display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--ui-05)}
.home-operational-photo-strip button{position:relative;flex:0 0 82px;height:68px;border:1px solid var(--check-ops-border);border-radius:12px;padding:0;overflow:hidden;background:var(--panel);scroll-snap-align:start}
.home-operational-photo-strip img{width:100%;height:100%;display:block;object-fit:cover;background:color-mix(in srgb,var(--panel) 80%,var(--bg))}
.home-operational-photo-strip button span{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;min-width:20px;height:20px;border-radius:var(--ui-r-pill);background:rgba(15,23,42,.78);color:#fff;font-size:10px;font-weight:900}
.home-operational-summary-card.is-link .agenda-preview-doc{width:100%;min-height:62px}
.agenda-preview-readiness{
display:flex;
align-items:center;
gap:var(--ui-2);
margin-top:12px;
font-size:var(--fs-label);
color:var(--muted);
}
.agenda-preview-readiness strong{ color:var(--ink); font-size:14px; }
/* Widget upload Talking Points di kotak "Talking Points" modal audiensi. */
.talking-points-widget{ display:flex; flex-direction:column; gap:var(--ui-15); margin-top:2px; }
.talking-points-chip{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--ui-2);
min-width:0;
border:1px solid var(--glass-border);
border-radius:12px;
padding:var(--ui-15) var(--ui-2);
background:rgba(255,255,255,.34);
}
[data-theme="dark"] .talking-points-chip{ background:rgba(15,23,42,.34); }
.talking-points-chip a,
.talking-points-chip .audiensi-attachment-link{
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:var(--fs-label);
font-weight:760;
color:var(--accent);
text-decoration:none;
}
.talking-points-chip a:hover,
.talking-points-chip .audiensi-attachment-link:hover{ text-decoration:underline; }
.talking-points-chip small{ display:block; color:var(--muted); font-size:10px; margin-top:1px; }
.talking-points-widget .btn{ align-self:flex-start; padding:var(--ui-1) var(--ui-25); min-height:26px; font-size:var(--fs-caption); }
.talking-points-widget input[type="file"]{
font-size:var(--fs-caption);
color:var(--muted);
max-width:100%;
}
.talking-points-status{ font-size:var(--fs-caption); color:var(--muted); }
.agenda-preview-summary{
margin:12px 0 0;
padding:12px 14px;
border:1px solid var(--glass-border);
border-radius:20px;
color:var(--muted);
background:rgba(255,255,255,.26);
font-size:var(--fs-body);
line-height:1.45;
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;
overflow:hidden;
}
.agenda-preview-actions{
display:flex;
justify-content:flex-end;
gap:var(--ui-2);
margin-top:14px;
flex-wrap:wrap;
}
.calendar-date-modal{
max-width:560px;
border-radius:var(--radius-card);
}
.calendar-date-list{
display:grid;
gap:var(--ui-15);
max-height:min(62vh, 520px);
overflow:auto;
padding-right:3px;
}
.calendar-date-event{
width:100%;
display:grid;
grid-template-columns:64px minmax(0,1fr);
gap:9px;
align-items:center;
border:1px solid var(--glass-border);
border-radius:var(--radius-control);
padding:7px 9px;
color:var(--ink);
background:rgba(255,255,255,.38);
text-align:left;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
[data-theme="dark"] .calendar-date-event{
background:rgba(15,23,42,.38);
}
.calendar-date-event:hover,
.calendar-date-event:focus{
transform:translateY(-1px);
outline:2px solid color-mix(in srgb, var(--accent) 32%, transparent);
outline-offset:1px;
}
.calendar-date-event time{
display:grid;
place-items:center;
min-height:30px;
border-radius:var(--radius-chip);
color:var(--accent);
background:var(--accent-soft);
font-size:var(--fs-label);
font-weight:860;
white-space:nowrap;
}
.calendar-date-event strong{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:var(--fs-body);
line-height:1.25;
font-weight:var(--fw-heavy);
}
.calendar-date-event small{
display:block;
min-width:0;
margin-top:2px;
color:color-mix(in srgb, currentColor 70%, var(--muted));
font-size:var(--fs-caption);
line-height:var(--lh-tight);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.calendar-date-empty{
border:1px dashed var(--glass-border);
border-radius:18px;
padding:var(--ui-4);
color:var(--muted);
background:rgba(255,255,255,.24);
text-align:center;
font-size:var(--fs-body);
}
@media (max-width:560px){
.agenda-preview-backdrop{align-items:end;padding:var(--ui-25);}
.agenda-preview-modal{border-radius:var(--radius-card);max-height:92vh;}
.agenda-preview-title{font-size:19px;}
.agenda-preview-grid{grid-template-columns:1fr;}
.agenda-preview-actions .btn{flex:1;min-width:0;}
.calendar-date-modal{border-radius:var(--radius-card);max-height:88vh;}
.calendar-date-event{grid-template-columns:56px minmax(0,1fr);padding:7px;}
.calendar-date-event time{font-size:var(--fs-caption);}
}
.detail-brief{
display:grid;
gap:var(--ui-3);
border:1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
border-radius:22px;
padding:14px;
margin-bottom:14px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, var(--accent-soft)) 0%, color-mix(in srgb, var(--panel) 82%, transparent) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 16px 42px rgba(15,23,42,.08);
}
.detail-brief-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:var(--ui-3);
min-width:0;
}
.detail-brief-kicker{
display:inline-flex;
width:max-content;
max-width:100%;
border:1px solid var(--line);
border-radius:var(--ui-r-pill);
padding:var(--ui-1) var(--ui-2);
margin-bottom:7px;
color:var(--muted);
background:color-mix(in srgb, var(--panel) 80%, transparent);
font-size:var(--fs-caption);
font-weight:850;
text-transform:uppercase;
letter-spacing:.04em;
}
.detail-brief-title{
margin:0;
color:var(--ink);
font-size:var(--fs-heading);
line-height:1.18;
letter-spacing:-.02em;
overflow-wrap:anywhere;
}
.detail-brief-meta{
margin:6px 0 0;
color:var(--muted);
font-size:var(--fs-body);
line-height:1.4;
}
.detail-brief-badges{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:var(--ui-15);
flex:0 0 auto;
}
.detail-brief-select-wrap{
position:relative;
display:inline-flex;
align-items:center;
gap:5px;
border-radius:var(--ui-r-pill);
padding:0 var(--ui-2) 0 var(--ui-25);
min-height:28px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.54), 0 8px 18px rgba(16,24,40,.07);
cursor:pointer;
}
.detail-brief-select-wrap::after{
content:"";
width:6px;
height:6px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(45deg) translateY(-1px);
opacity:.72;
pointer-events:none;
}
.detail-brief-select-wrap span{
font-size:var(--fs-caption);
font-weight:850;
white-space:nowrap;
pointer-events:none;
}
.detail-brief-select{
appearance:none;
-webkit-appearance:none;
border:0;
background:transparent;
color:inherit;
font:inherit;
font-size:var(--fs-caption);
font-weight:850;
line-height:1;
min-height:28px;
padding:0 var(--ui-05);
cursor:pointer;
outline:0;
}
.detail-brief-select option{
color:#0f172a;
background:#fff;
}
.detail-brief-actions{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:var(--ui-15);
margin-top:8px;
}
.detail-modal-actions{
margin:0 0 12px;
padding:var(--ui-25);
border:1px solid var(--line);
border-radius:18px;
background:color-mix(in srgb, var(--panel) 78%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
flex-direction:column;
flex-wrap:nowrap;
justify-content:flex-start;
align-items:stretch;
gap:var(--ui-2);
}
.detail-modal-actions-row{
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
align-items:center;
gap:var(--ui-2);
}
.detail-modal-actions .btn{
flex:1 1 112px;
min-width:max-content;
}
.detail-modal-actions-row .btn{
flex:1 1 112px;
min-width:max-content;
}
.detail-modal-actions .btn.danger[data-modal-delete]{
flex:1 1 100%;
}
/* Baris [Copy Detail | Edit Agenda | Keputusan]: tiga tombol seimbang & simetris. */
.detail-decision-row .btn{
flex:1 1 92px;
min-width:0;
}
.detail-decision-row .btn.decision-trigger{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--ui-15);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.decision-caret{ font-size:.82em; opacity:.85; }
/* Kontainer opsi di dalam pop-up bersama: daftar tombol keputusan vertikal, penuh & mudah ditekan. */
.decision-menu-actions{
display:flex;
flex-direction:column;
gap:var(--ui-2);
}
.decision-menu-actions .btn{
width:100%;
justify-content:center;
flex:0 0 auto;
}
/* Form Reschedule di dalam pop-up Keputusan (dikerjakan di tempat). */
.decision-reschedule{
display:flex;
flex-direction:column;
gap:var(--ui-3);
}
.decision-reschedule-hint{
margin:0;
color:var(--muted, #64748b);
font-size:var(--fs-body);
line-height:var(--lh-reading);
}
.decision-reschedule-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--ui-25);
align-items:end;
}
.decision-reschedule-grid label{
display:flex;
flex-direction:column;
gap:var(--ui-15);
font-size:var(--fs-label);
font-weight:var(--fw-bold);
color:var(--muted, #64748b);
}
.decision-reschedule-grid input{
width:100%;
min-width:0;
min-height:44px; /* G0: kontainer teks pakai min-height, bukan height tetap */
padding:var(--ui-25) var(--ui-3);
border:1px solid var(--line, #cbd5e1);
border-radius:12px;
background:var(--panel, #fff);
color:var(--ink); /* dulu var(--fg) yang tak pernah ada -> teks gelap di tema gelap */
font:inherit;
}
@media (max-width:520px){
.decision-reschedule-grid{ grid-template-columns:1fr; }
}
.detail-core-edit{
border:1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
border-radius:18px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 64%, var(--panel)) 0%, color-mix(in srgb, var(--panel) 86%, transparent) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px rgba(10,132,255,.08);
overflow:hidden;
min-width:0;
transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.detail-core-edit:hover{
border-color:color-mix(in srgb, var(--accent) 58%, var(--line));
box-shadow:inset 0 1px 0 rgba(255,255,255,.68), 0 14px 30px rgba(10,132,255,.12);
transform:translateY(-1px);
}
.detail-core-edit summary{
display:flex;
align-items:center;
justify-content:flex-start;
gap:var(--ui-25);
padding:11px 12px;
cursor:pointer;
color:var(--accent);
font-size:var(--fs-body);
font-weight:850;
list-style:none;
}
.detail-core-edit summary::-webkit-details-marker{display:none}
.detail-core-edit summary::before{
content:"\270E";
display:grid;
place-items:center;
width:24px;
height:24px;
border-radius:var(--ui-r-pill);
color:var(--accent);
background:color-mix(in srgb, var(--accent-soft) 86%, var(--panel));
flex:0 0 auto;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.detail-core-edit summary::after{
content:"+";
display:grid;
place-items:center;
width:24px;
height:24px;
border-radius:var(--ui-r-pill);
color:var(--accent);
background:color-mix(in srgb, var(--accent-soft) 72%, transparent);
margin-left:auto;
flex:0 0 auto;
}
.detail-core-edit[open] summary::after{content:"-"}
.detail-core-edit-body{
display:grid;
gap:var(--ui-25);
padding:0 var(--ui-3) var(--ui-3);
}
.detail-core-form{
display:grid;
grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(110px,.65fr));
gap:var(--ui-2);
align-items:end;
}
.detail-core-field{
display:grid;
gap:5px;
min-width:0;
}
.detail-core-field.wide{grid-column:span 2}
.detail-core-field span{
color:var(--muted);
font-size:var(--fs-caption);
font-weight:820;
text-transform:uppercase;
letter-spacing:.03em;
}
.detail-core-field input,
.detail-core-delegate-box{
min-width:0;
min-height:40px;
border:1px solid var(--line);
border-radius:13px;
padding:var(--ui-2) var(--ui-25);
color:var(--ink);
background:color-mix(in srgb, var(--bg) 72%, var(--panel));
font:inherit;
}
.detail-core-delegate-box{
display:grid;
gap:7px;
align-content:start;
}
.detail-core-delegate-box .delegate-add-row{
margin-top:0;
align-items:center;
}
.detail-core-delegate-box .delegate-add-row .work-input{
min-height:34px;
border:1px solid var(--line);
border-radius:11px;
padding:7px 9px;
background:var(--panel);
color:var(--ink);
font:inherit;
}
.detail-core-delegate-empty{
color:var(--muted);
font-size:var(--fs-label);
line-height:var(--lh-snug);
}
.delegate-stack{
display:grid;
gap:3px;
min-width:0;
line-height:1.28;
}
.delegate-stack-line{
display:block;
min-width:0;
overflow-wrap:anywhere;
}
.delegate-stack-more{
width:max-content;
max-width:100%;
border:0;
background:transparent;
color:var(--accent);
padding:1px 0;
font:inherit;
font-size:var(--fs-label);
font-weight:820;
cursor:pointer;
text-align:left;
}
.delegate-stack-more:hover{text-decoration:underline}
/* ===== Penanda "didelegasikan ke siapa" (23 Jul 2026) =====
Dipakai seragam di Home, kartu Agenda, Ringkasan. Nada = token status Delegated. */
.delegate-marker{
display:inline-flex;
align-items:baseline;
gap:var(--ui-05);
min-width:0;
color:var(--status-delegated);
font-weight:750;
overflow-wrap:anywhere;
}
.delegate-marker::before{ content:"\21AA\A0"; opacity:.85; }
.agenda-delegate{ margin-top:4px; font-size:var(--fs-label); }
/* Home: kalahkan .home-agenda-mini span (muted, block, nowrap) — spesifisitas .home-agenda-mini .cls */
.home-agenda-mini .home-agenda-mini-delegate{
display:inline-flex;
color:var(--status-delegated);
font-size:var(--fs-caption);
font-weight:750;
white-space:normal;
overflow:visible;
}
.delegate-list-modal{max-width:520px}
.delegate-list-body{
display:grid;
gap:var(--ui-2);
max-height:min(58vh,420px);
overflow:auto;
}
.delegate-list-item{
border:1px solid var(--line);
border-radius:var(--radius-control);
padding:9px 11px;
background:color-mix(in srgb, var(--panel) 78%, transparent);
font-weight:var(--fw-heavy);
overflow-wrap:anywhere;
}
/* Radio jenis lokasi/perjalanan (Otomatis/Kantor Menko IPK/DKI Jakarta/Domestik
Darat/Domestik Pesawat/Luar Negeri) -- saling eksklusif. Override tampilan
input teks .detail-core-field agar radio kecil. */
.detail-core-trip-opts{
display:flex;
flex-wrap:wrap;
gap:8px 14px;
margin-top:2px;
}
.detail-core-trip-opt{
display:flex;
flex-direction:row;
align-items:center;
gap:var(--ui-15);
cursor:pointer;
}
.detail-core-trip-opt input[type="radio"]{
min-height:auto;
min-width:auto;
width:16px;
height:16px;
flex:0 0 auto;
padding:0;
margin:0;
}
.detail-core-trip-opt span{
text-transform:none;
letter-spacing:0;
font-size:var(--fs-label);
font-weight:var(--fw-medium);
color:var(--ink);
}
.detail-core-save-row{
display:flex;
justify-content:flex-end;
gap:var(--ui-2);
flex-wrap:wrap;
}
/* T3: "Tanggal saja" (blok tanggal) + blok beberapa tanggal (date-only / multi-tanggal). */
.detail-core-field.detail-core-dateonly{
flex-direction:row;
align-items:center;
gap:var(--ui-2);
grid-column:span 2;
}
.detail-core-field.detail-core-dateonly input[type="checkbox"]{
width:16px;
height:16px;
flex:0 0 auto;
margin:0;
}
.detail-core-field.detail-core-dateonly span{margin:0}
.detail-core-field.is-disabled{opacity:.5}
.detail-core-field.is-disabled input{cursor:not-allowed}
.detail-core-multidate{
display:flex;
flex-direction:column;
gap:var(--ui-2);
padding:var(--ui-3);
border:1px dashed rgba(148,163,184,.5);
border-radius:12px;
}
.detail-core-multidate-title{font-weight:var(--fw-bold)}
.detail-core-multidate-add{
display:flex;
gap:var(--ui-2);
flex-wrap:wrap;
align-items:center;
}
.detail-core-multidate-add input[type="date"]{flex:1 1 160px;min-width:0}
.detail-core-multidate-list{
display:flex;
flex-wrap:wrap;
gap:var(--ui-15);
}
.detail-core-multidate-list:empty{display:none}
.detail-core-multidate-chip{
display:inline-flex;
align-items:center;
gap:var(--ui-15);
padding:var(--ui-1) var(--ui-15) var(--ui-1) var(--ui-25);
border-radius:var(--ui-r-pill);
background:rgba(10,132,255,.12);
color:var(--link);
font-size:var(--fs-body);
font-weight:var(--fw-bold);
}
.detail-core-multidate-remove{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
padding:0;
border:0;
border-radius:50%;
background:rgba(10,132,255,.2);
color:inherit;
font-size:14px;
line-height:1;
cursor:pointer;
}
.detail-brief-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-template-areas:
"kegiatan kegiatan kegiatan kegiatan"
"organizer organizer dresscode dresscode"
"tanggal waktu picint lokasi"
"pendamping pendamping pic protokol"
"pendamping pendamping sespri ops"
"persidangan persidangan media media";
gap:var(--ui-2);
}
.detail-brief-tile{
border:1px solid var(--line);
border-radius:var(--radius-inner);
padding:var(--ui-25);
background:color-mix(in srgb, var(--panel) 72%, transparent);
min-width:0;
}
.detail-brief-tile-button{
appearance:none;
width:100%;
text-align:left;
cursor:pointer;
font:inherit;
}
.detail-brief-tile-button:hover,
.detail-brief-tile-button:focus-visible{
border-color:var(--accent);
box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
outline:none;
}
.detail-brief-tile-full{grid-area:kegiatan}
.detail-brief-tile-span2{grid-area:pendamping}
/* grid-area tiap tile via kelas eksplisit (refactor home-detail-ops-preview) --
lebih robust dari nth-of-type & aman untuk campuran /