/* app-views.css — potongan dari assets/app.css (dipecah 28 Jul 2026). FINAL NORMALIZATION: shell global + per-view HOME/PETA/KALENDER/AGENDA/INPUT/APPROVAL/TOOLS. URUTAN di index.html/admin-users.html/observability.html adalah KONTRAK: cascade CSS = urutan muat, blok bawah sengaja mengalahkan blok atas. Muat setelah app-tokens.css, sebelum app-patches-1.css. */ /* ============================================================================ FINAL NORMALIZATION OVERRIDE LAYER (append immediately before the closing style tag) Append-only, behavior-preserving. No display:none on features. Order: 1) tokens 2) global chrome 3) per-view (today/map/calendar/ agenda/input/approval/more) 4) mobile consolidation Reuses existing --ui-1..--ui-6, --radius, --ui-stat-h, --safe-bottom. ============================================================================ */ /* ---------- 1) TOKENS (extend the existing --ui scale) ---------- */ :root{ /* radius aliases so nested surfaces step DOWN from the card radius coherently */ --ui-r:var(--radius); /* canonical surface radius (24px desktop / 20px mobile — nilai di blok v8) */ --ui-r-sm:calc(var(--radius) - 6px); /* inner tiles / small controls ~16px */ --ui-r-pill:999px; /* pills / chips */ /* shared control + layout magnitudes */ --ui-ctrl-h:42px; /* canonical control height */ --map-pane-h:360px; /* couples map stage + roster heights */ } /* ---------- 2) GLOBAL CHROME ---------- */ /* 2a. Unify corner-radius language across the chrome (logo/icon-btn/btn/stat/empty). */ .btn{ border-radius:var(--radius-control); } /* G3 gerbang B: 24 -> 14 (radius efektif tombol) */ .icon-btn{ border-radius:var(--radius-control); } .logo{ border-radius:var(--ui-r); } .stat{ border-radius:var(--ui-r); } .empty{ border-radius:var(--ui-r); } .input-popup-head .icon-btn{ border-radius:var(--radius-control); } /* 2b. Equalize the three horizontal control-cluster gaps onto the scale. */ .topbar-actions{ gap:var(--ui-2); } .nav-inner{ gap:var(--ui-2); } .actions{ gap:var(--ui-2); } /* 2c. Symmetrical topbar inner padding (was 14/12 top/bottom). */ .topbar-inner{ padding:var(--ui-3) var(--ui-4); } /* 2d. Desktop main: symmetric vertical rhythm, scale horizontal inset. */ main{ padding:var(--ui-5) var(--ui-2); } /* 2e. Modal layer: one gutter value for sheet + backdrop. */ .modal{ padding:var(--ui-4); } .modal-backdrop{ padding:var(--ui-4); } /* 2f. Bottom-nav: kill the permanently-"active" elevated center Input pill so the 7-up bar reads evenly; real .active highlight still wins. */ .nav-btn.nav-input-center{ background:transparent; border:0; box-shadow:none; color:var(--muted); } .nav-btn.nav-input-center.active{ color:var(--ink); } .nav-btn.nav-input-center span:first-child{ width:auto; height:auto; border-radius:0; color:inherit; background:none; box-shadow:none; font-size:20px; } /* ---------- 3) PER-VIEW ---------- */ /* === HOME (view-today) === */ /* 3a. Fixed 6-up KPI grid so 6 tiles never leave a lopsided orphan row. */ .grid.stats{ grid-template-columns:repeat(6,minmax(0,1fr)); } @media (max-width:900px){ .grid.stats{ grid-template-columns:repeat(2,minmax(0,1fr)) /* 3 -> 2 (13 Agu 2026): delapan kartu tidak habis dibagi tiga. Lapisan ini kalah dari app-latest untuk Home, tetapi dibiarkan berbeda ia menyesatkan pembaca berikutnya. */; } } @media (max-width:680px){ .grid.stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* 3b. Uniform corners + KPI tile internals (div + button tiles identical). */ #todayWarnings .card, #view-today .empty, #view-today .agenda-card, .grid.stats .stat{ border-radius:var(--ui-r); } .grid.stats .stat, .grid.stats .stat.home-stat-action{ text-align:left; align-items:flex-start; padding:var(--ui-3); } /* 3c. Section-head rhythm on the scale. */ #view-today .section-head{ margin:var(--ui-5) 0 var(--ui-3); } /* 3d. Warning/sheet banners: override inline ad-hoc margins. */ #todayWarnings{ margin-bottom:var(--ui-3); } #todayWarnings > .card{ margin-bottom:var(--ui-3) !important; padding:var(--ui-4); } #todayWarnings > .card > p{ margin:var(--ui-2) 0 0 !important; } /* 3e. Empty state + agenda badge alignment. */ #view-today .empty{ padding:var(--ui-6); } #view-today .agenda-row > .badge:last-child{ align-self:center; } .home-compact-shell{ display:grid; gap:var(--ui-3); } .home-compact-grid{ display:grid; grid-template-columns:1fr; gap:var(--ui-3); align-items:stretch; } .home-compact-card{ min-height:0; padding:var(--ui-4); display:grid; gap:var(--ui-3); align-content:start; } .home-agenda-card{ /* 23 Jul 2026: kartu diperbesar bersamaan dgn dibukanya batas 7 agenda. */ min-height:min(70vh, 620px); padding:clamp(18px,2.4vw,24px); border-color:color-mix(in srgb, var(--status-approved-border) 54%, var(--line)); background: radial-gradient(circle at 12% 8%, rgba(219,234,254,.78), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel) 76%, var(--accent-soft))); } .home-agenda-card .home-card-head h3{ font-size:clamp(18px,2.5vw,24px); } .home-agenda-card .home-agenda-mini-list{ /* Relatif layar supaya monitor besar menampilkan lebih banyak agenda tanpa menggulung, sementara layar pendek tidak terdorong keluar. */ max-height:min(56vh, 560px); } .home-compact-card.clickable{ width:100%; text-align:left; color:inherit; } .home-compact-card.clickable:hover, .home-compact-card.clickable:focus-visible{ border-color:color-mix(in srgb, var(--status-approved-border) 70%, var(--line)); box-shadow:inset 4px 0 0 var(--status-approved), var(--shadow); } .home-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--ui-3); } .home-card-head h3{ margin:0; font-size:var(--fs-title); letter-spacing:0; } .home-card-head p{ margin:3px 0 0; color:var(--muted); font-size:var(--fs-label); line-height:var(--lh-snug); } .home-day-nav{ display:flex; align-items:center; gap:var(--ui-2); flex:0 0 auto; } .home-day-nav .btn{ min-width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; } .home-agenda-mini-list{ display:grid; gap:var(--ui-2); max-height:238px; overflow:auto; padding-right:var(--ui-05); } .home-agenda-mini{ display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:var(--ui-2); align-items:center; width:100%; text-align:left; color:inherit; border:1px solid color-mix(in srgb, var(--line) 86%, transparent); background:color-mix(in srgb, var(--panel) 82%, transparent); border-radius:var(--ui-r-sm); padding:var(--ui-25); } .home-agenda-mini:hover{ border-color:var(--status-approved-border); } /* RBAC 5-jenjang: baris agenda se-hari yang terkunci detail (stub server) — tampil sebagai konteks hari, sedikit diredam + kursor default supaya tak terkesan bisa dibuka. */ .home-agenda-mini.is-detail-locked{ opacity:.72; cursor:default; } .home-agenda-mini.is-detail-locked:hover{ border-color:color-mix(in srgb, var(--line) 86%, transparent); } .home-agenda-mini.is-past-today{ opacity:.62; background:color-mix(in srgb, var(--panel) 70%, var(--line)); } .home-agenda-mini.is-past-today strong{ text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb, var(--muted) 55%, transparent); } .home-agenda-mini time{ font-size:var(--fs-label); font-weight:850; color:var(--accent); } /* Chip folder (PD) di daftar agenda Home. Selektor WAJIB memuat .home-agenda-mini: aturan `.home-agenda-mini span{display:block}` di bawah (0,1,1) mengalahkan `.home-agenda-mini-folder` (0,1,0), sehingga chip ini pernah melar jadi pil selebar baris (472px, temuan pemilik 27 Jul 2026). Dengan dua kelas (0,2,0) chip kembali selebar tulisannya saja. */ .home-agenda-mini .home-agenda-mini-folder{ display:inline-block; width:auto; padding:1px 6px; margin-right:2px; border-radius:var(--ui-r-pill); border:1px solid var(--line); background:var(--surface-2, transparent); font-size:.68rem; font-weight:var(--fw-bold); letter-spacing:.04em; vertical-align:1px; opacity:.85; } .home-agenda-mini strong{ display:block; font-size:var(--fs-body); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .home-agenda-mini span{ display:block; color:var(--muted); font-size:var(--fs-caption); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Daftar Audiensi (permohonan masuk dari sheet) — layout sendiri, tahan wrap, mobile-friendly */ .audiensi-list{ display:grid; gap:var(--ui-2); max-height:360px; overflow:auto; padding-right:var(--ui-05); } .audiensi-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--ui-25); align-items:start; border:1px solid var(--line); border-radius:var(--radius-control); padding:var(--ui-25) var(--ui-3); background:color-mix(in srgb, var(--panel) 80%, transparent); cursor:pointer; } .audiensi-item:hover{ border-color:var(--glass-border); } .audiensi-item-main{ display:grid; gap:3px; min-width:0; } .audiensi-item-main strong{ font-size:14px; font-weight:var(--fw-bold); line-height:1.3; } .audiensi-item-detail{ font-size:var(--fs-body); color:var(--ink); /* dulu var(--text) tanpa definisi & fallback */ line-height:var(--lh-snug); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .audiensi-item-meta{ font-size:var(--fs-label); color:var(--muted); line-height:1.3; } .audiensi-item-links{ font-size:var(--fs-label); display:flex; gap:var(--ui-3); flex-wrap:wrap; } .audiensi-item-links a, .audiensi-item-links .audiensi-attachment-link{ color:var(--accent); text-decoration:none; font-weight:var(--fw-medium); } .audiensi-item-links a:hover, .audiensi-item-links .audiensi-attachment-link:hover{ text-decoration:underline; } .audiensi-status{ flex:0 0 auto; white-space:nowrap; align-self:start; } @media (max-width:560px){ .audiensi-item{ grid-template-columns:1fr; } .audiensi-status{ justify-self:start; } } /* Highlight singkat saat stat mengarahkan ke sebuah kartu */ .home-card-flash{ animation:homeCardFlash 1.4s ease; } @keyframes homeCardFlash{ 0%,100%{ box-shadow:0 0 0 0 transparent; } 25%{ box-shadow:0 0 0 3px var(--accent); } } .home-card-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ui-2); } .home-card-summary span{ border:1px solid color-mix(in srgb, var(--line) 86%, transparent); border-radius:var(--ui-r-sm); padding:9px; background:color-mix(in srgb, var(--panel) 78%, transparent); min-width:0; } .home-card-summary small{ display:block; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .home-card-summary b{ display:block; margin-top:2px; font-size:17px; letter-spacing:-.03em; } .home-preview-line{ margin:0; color:var(--muted); font-size:var(--fs-label); line-height:var(--lh-snug); } .home-approval-alert{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--ui-3); text-align:left; border:1px solid rgba(248,113,113,.42); border-radius:18px; padding:var(--ui-25) var(--ui-3); color:#7f1d1d; background:linear-gradient(135deg, rgba(254,226,226,.74), rgba(255,255,255,.42)); box-shadow:0 16px 34px rgba(185,28,28,.10), inset 0 1px 0 rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(145%); -webkit-backdrop-filter:blur(16px) saturate(145%); } .home-approval-alert strong{ display:block; font-size:var(--fs-body); letter-spacing:.01em; } .home-approval-alert span{ display:block; margin-top:2px; font-size:var(--fs-caption); color:#991b1b; } [data-theme="dark"] .home-approval-alert{ color:#fecaca; background:linear-gradient(135deg, rgba(127,29,29,.72), rgba(15,23,42,.54)); border-color:rgba(248,113,113,.38); } [data-theme="dark"] .home-approval-alert span{color:#fecaca} /* Tingkatan alert approval Home: >=4 = merah (gaya dasar di atas, tak diubah); 1-3 = kuning; 0 = strip hijau kalem non-interaktif. Warna memakai token semantik tema yang SUDAH ADA (--warning/--success, theme-aware) — bukan token status agenda dan bukan warna baru. */ .home-approval-alert.level-warn{ color:var(--warning); border-color:var(--warning-border, color-mix(in srgb, var(--warning) 38%, transparent)); background:color-mix(in srgb, var(--warning-bg) 62%, var(--panel)); box-shadow:0 16px 34px color-mix(in srgb, var(--warning) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.35); } .home-approval-alert.level-warn span{color:var(--warning)} .home-approval-alert.level-ok{ color:var(--success); border-color:var(--success-border, color-mix(in srgb, var(--success) 30%, transparent)); background:color-mix(in srgb, var(--success-bg) 55%, var(--panel)); box-shadow:none; cursor:default; } .home-approval-alert.level-ok span{color:var(--success)} [data-theme="dark"] .home-approval-alert.level-warn{ color:var(--warning); border-color:var(--warning-border); background:color-mix(in srgb, var(--warning-bg) 62%, var(--panel)); } [data-theme="dark"] .home-approval-alert.level-warn span{color:var(--warning)} [data-theme="dark"] .home-approval-alert.level-ok{ color:var(--success); border-color:var(--success-border); background:color-mix(in srgb, var(--success-bg) 55%, var(--panel)); } [data-theme="dark"] .home-approval-alert.level-ok span{color:var(--success)} .home-approval-brief{ display:grid; gap:var(--ui-3); } #homeApprovalBody{ max-height:min(68dvh,680px); overflow:auto; overscroll-behavior:contain; padding-right:var(--ui-05); } .home-approval-days{ display:grid; gap:14px; } /* Pager per-hari (27 Jul 2026): satu hari per layar, geser native scroll-snap. */ .home-approval-pager{ display:flex; align-items:center; gap:var(--ui-15); margin-bottom:var(--ui-25); min-width:0; } /* Panah & chip pager: TINGGI MENGIKUTI TULISAN (permintaan pemilik 27 Jul 2026), bukan --ctrl-h 44px. Pengecualian sadar terhadap gerbang A: navigasi sekunder yang seluruhnya redundan — hari bisa dipindah dengan geser (swipe) maupun ketuk chip; memaksa 44px membuat kepala modal membengkak. */ .home-approval-nav{ flex:0 0 auto; min-height:0; padding:5px 10px; font-size:var(--fs-body); font-weight:var(--fw-bold); line-height:1.2; } .home-approval-daychips{ display:flex; gap:var(--ui-15); overflow-x:auto; scrollbar-width:none; min-width:0; flex:1; } .home-approval-daychips::-webkit-scrollbar{display:none} .home-approval-daychip{ flex:0 0 auto; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:var(--ui-r-pill); padding:5px 10px; font:inherit; font-size:var(--fs-label); font-weight:var(--fw-bold); line-height:1.2; white-space:nowrap; cursor:pointer; } .home-approval-daychip span{ margin-left:var(--ui-1); opacity:.7; font-weight:var(--fw-medium); font-variant-numeric:tabular-nums; } .home-approval-daychip.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .home-approval-days.is-pager{ display:flex; gap:var(--ui-3); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .home-approval-days.is-pager::-webkit-scrollbar{display:none} .home-approval-days.is-pager > .home-approval-day{ flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; } .home-approval-day{ display:grid; /* Slide pager saling menyamakan tinggi (flex). Tanpa align-content:start, baris grid ikut melar dan kepala hari tercetak di TENGAH ruang kosong. */ align-content:start; gap:var(--ui-25); min-width:0; padding:var(--ui-3); border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--soft) 58%,var(--panel)); } .home-approval-day-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--ui-3); } .home-approval-day-head span:not(.badge){ display:block; color:var(--muted); font-size:10px; font-weight:var(--fw-heavy); letter-spacing:.08em; text-transform:uppercase; line-height:1.2; } .home-approval-day-head h4{ margin:1px 0 0; color:var(--ink); font-size:var(--fs-title); line-height:1.2; } .home-approval-day-list{ display:grid; gap:14px; } .home-approval-day-list > .home-approval-brief + .home-approval-brief{ padding-top:14px; border-top:1px solid var(--line); } /* Tombol keputusan modal Approval: 4 kolom SETARA agar tidak ada satu tombol yang melebar sendiri (temuan pemilik 27 Jul 2026); aksi sekunder "Buka Menu Approval" turun selebar kartu. */ .home-approval-brief .actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .home-approval-brief .actions > .btn{ min-width:0; padding-inline:var(--ui-2); } @media (max-width:520px){ .home-approval-brief .actions{grid-template-columns:1fr} } .home-approval-card{ display:grid; gap:var(--ui-25); border:1px solid color-mix(in srgb, var(--status-rejected-border) 38%, var(--line)); border-radius:18px; padding:var(--ui-3); background:color-mix(in srgb, var(--panel) 88%, transparent); } .home-approval-card h4{ margin:0; font-size:16px; line-height:1.25; } .home-approval-card p{ margin:0; color:var(--muted); font-size:var(--fs-label); line-height:1.4; } @media (max-width:820px){ .home-compact-grid{grid-template-columns:1fr} .home-agenda-card{min-height:0} } @media (max-width:520px){ #view-today{overflow-x:hidden} #view-today .section-head{ display:grid; grid-template-columns:1fr; align-items:start; } #view-today .section-head .btn{ width:100%; min-width:0; } .home-compact-card{padding:var(--ui-3)} .home-card-head{display:grid;grid-template-columns:1fr;gap:var(--ui-2)} .home-day-nav{width:100%;justify-content:space-between} .home-day-nav .badge{flex:1;text-align:center;min-width:0} .home-agenda-card .home-agenda-mini-list{max-height:min(62vh, 520px)} .home-agenda-mini{grid-template-columns:48px minmax(0,1fr)} #homeApprovalBody{max-height:68dvh} .home-approval-day{padding:var(--ui-25)} .home-approval-day-head{align-items:flex-start} .home-agenda-mini .badge{grid-column:1 / -1;justify-self:start} .home-card-summary{grid-template-columns:repeat(3,minmax(0,1fr))} } /* === PETA (view-map) === */ /* 3f. Square prev/next arrows; equal-weight date-nav cluster. */ #prevOfficialMapDayBtn, #nextOfficialMapDayBtn{ width:var(--ui-ctrl-h); min-width:var(--ui-ctrl-h); padding-left:0; padding-right:0; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } #todayOfficialMapDayBtn{ flex:0 0 auto; } /* 3g. Harmonize radii inside the map card (stage = card radius; tiles step down). */ .official-map-stage{ border-radius:var(--ui-r); } .map-metric, .map-roster-item{ border-radius:var(--ui-r-sm); padding:var(--ui-3); } /* 3h. Gaps/margins onto the scale (roster gap now matches layout gap). */ .official-map-layout{ gap:var(--ui-3); } .official-map-roster{ gap:var(--ui-3); } .map-metrics{ gap:var(--ui-3); margin-bottom:var(--ui-3); } .map-day-controls{ gap:var(--ui-2); align-items:center; row-gap:var(--ui-2); } .map-head{ margin:0 0 var(--ui-3); } .map-roster-meta{ gap:var(--ui-1); margin-top:var(--ui-2); } .map-day-controls #officialMapFocus{ flex:0 0 auto; } /* 3i. Couple stage + roster heights via one token. */ .official-map-stage{ min-height:var(--map-pane-h); } .official-map-svg{ min-height:var(--map-pane-h); } .official-map-roster{ max-height:var(--map-pane-h); } /* === KALENDER (view-calendar) === */ /* 3j. Make the Bulanan toolbar a single row like the Mingguan toolbar. Scoped >560px so it does NOT fight the existing 1-col grid at <=560px. */ @media (min-width:561px){ .calendar-suite .calendar-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:var(--ui-3); flex-wrap:wrap; } } /* 3k. Header action buttons: tidy single nowrap row. */ #view-calendar .section-head{ flex-wrap:wrap; } #view-calendar .section-head > div:last-child{ gap:var(--ui-2); flex-wrap:nowrap; } #view-calendar .section-head #openPresentationBtn, #view-calendar .section-head [data-open-add]{ white-space:nowrap; } /* 3l. Glance cards == summary stats (radius, KPI number size, equal height). */ .calendar-suite .calendar-glance-item{ border-radius:var(--ui-r); display:flex; flex-direction:column; justify-content:flex-start; gap:var(--ui-1); min-height:74px; } .calendar-suite .calendar-summary .stat{ border-radius:var(--ui-r); } .calendar-suite .calendar-glance-item strong, .calendar-suite .calendar-summary .stat strong{ font-size:var(--fs-display); } /* 3m. Suite vertical rhythm onto the scale. */ .calendar-suite{ padding:var(--ui-4); } .calendar-suite-head{ padding-bottom:var(--ui-3); } .calendar-glance{ margin:var(--ui-3) 0; gap:var(--ui-2); } .calendar-suite .calendar-summary{ margin:var(--ui-3) 0; } .day-focus-layout{ gap:var(--ui-3); } /* === AGENDA (view-agenda) === */ /* 3n. Card radius follows token; uniform padding; centered action row. */ .agenda-card{ border-radius:var(--ui-r); padding:var(--ui-4); } @media (min-width:1024px){ .agenda-card{ padding:var(--ui-4); } } .agenda-card > .actions{ align-items:center; gap:var(--ui-2); } /* 3o. Equal-height cards in the desktop/tablet grid; action row pinned bottom. */ @media (min-width:720px){ #agendaList.agenda-list.desktop{ align-items:stretch; gap:var(--ui-4); } #agendaList.agenda-list.desktop > .agenda-card{ height:100%; display:flex; flex-direction:column; } #agendaList.agenda-list.desktop > .agenda-card > .actions{ margin-top:auto; } } /* 3p. List/section spacing onto the scale (defeat inline margin-top). */ .agenda-list{ gap:var(--ui-3); } #view-agenda .searchbar{ margin:var(--ui-4) 0; } #view-agenda .chip-row{ margin-top:var(--ui-3); } #view-agenda #agendaList{ margin-top:var(--ui-4) !important; } /* 3q. Unify control radii inside the Agenda header. */ #view-agenda .daily-date-controls .btn, #view-agenda .searchbar .btn{ border-radius:var(--radius-control); } #view-agenda .daily-date-controls .btn.active{ background:var(--accent); border-color:var(--accent); color:var(--bg); } /* === INPUT FORM (view-add) === */ /* 3r. 4 summary boxes as a 2x2 grid (was a tall single column). */ .extract-grid.compact-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ui-3); } /* 3s. Harmonize nested popup radii to the token family. */ .input-popup .multi-date-panel, .input-popup .extract-box, .input-popup .file-drop, .input-popup .input-result-panel, .input-popup .input-sync-panel{ border-radius:var(--ui-r); } .input-popup .check-item{ border-radius:var(--ui-r-sm); } /* 3t. Height-balance the two-up multi-date row. */ #multiDatePanel > .form-grid.two{ align-items:start; } #multiDatePanel > .form-grid.two > div{ display:flex; flex-direction:column; gap:var(--ui-2); } #multiDatePanel > .form-grid.two .multi-date-input-row{ margin-top:auto; } /* 3u. Command-strip / dashboard spacing onto the scale. */ .input-command-view .extract-grid{ gap:var(--ui-3); } .input-command-view .actions{ gap:var(--ui-2); } .input-command-pill{ padding:var(--ui-3); } .input-command-dashboard{ padding:var(--ui-4); gap:var(--ui-4); } /* 3v. Equal-width toolbar buttons inside upload/whatsapp popups. */ .input-popup-grid .form-grid > .actions, .input-popup-grid .input-result-panel > .actions{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--ui-2); } /* === APPROVAL (view-approval) === */ /* 3w. Decision buttons as an even grid (3-up small / 6-up >=680). */ #approvalList .agenda-card > .actions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ui-2); } #approvalList .agenda-card > .actions .btn{ width:100%; min-width:0; flex:initial; min-height:var(--ctrl-h); padding:8px var(--ui-2); border-radius:var(--ui-r-sm); display:inline-flex; align-items:center; justify-content:center; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--fs-body); } /* 3x. Harmonize nested panel radii (step down from card token). */ .approval-summary, .approval-whatsapp-preview, .approval-quick-edit, .approval-reschedule-panel{ border-radius:calc(var(--radius) - 4px); } .approval-script{ border-radius:var(--ui-r-sm); } .approval-summary-row{ border-radius:calc(var(--radius) - 8px); } /* 3y. Equalize the two text-pill disclosure toggles. */ .approval-whatsapp-card summary::after, .approval-quick-edit summary::after{ padding:var(--ui-15) var(--ui-25); font-size:var(--fs-label); font-weight:850; border-radius:var(--ui-r-pill); } /* 3z. Internal panel spacing onto the scale. */ .approval-whatsapp-preview{ padding:var(--ui-3); } .approval-reschedule-panel{ padding:var(--ui-3); } .approval-summary-body{ gap:var(--ui-3); } .approval-whatsapp-body, .approval-whatsapp-card{ gap:var(--ui-3); } .approval-summary-grid{ gap:var(--ui-3); } .approval-summary .approval-summary-body{ gap:7px; } .approval-summary-body .approval-checklist-grid{ gap:var(--ui-15); } .approval-summary-body .approval-checklist-row{ border-radius:11px; } /* 3aa. Restore align-items:start at the wide breakpoints (1024/1194 dropped it). */ @media (min-width:1024px){ #agendaList.agenda-list.desktop, #approvalList.agenda-list{ align-items:start; } } /* === TOOLS (view-more) === */ /* 3bb. Real multi-column grid (was single column even on desktop). */ #view-more > .grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--ui-3); align-items:stretch; } /* 3cc. Equal-height cards; action rows pinned to the bottom. */ #view-more > .grid > .card{ display:flex; flex-direction:column; height:100%; gap:var(--ui-2); } #view-more > .grid > .card > .actions{ margin-top:auto; } /* 3dd. Uniform internal paragraph/heading rhythm. */ #view-more > .grid > .card > h3{ margin:0 0 var(--ui-2); } #view-more > .grid > .card > p{ margin:0; } #view-more > .grid > .card > p + *{ margin-top:var(--ui-2); } /* ---------- 4) MOBILE CONSOLIDATION ---------- */ @media (max-width:680px){ /* main + topbar rhythm on the scale */ main{ padding:var(--ui-4) var(--ui-3); } .topbar-inner{ padding:var(--ui-2) var(--ui-2); } /* Peta date-nav goes full-width like every other toolbar */ .map-day-controls{ justify-content:space-between; width:100%; } .map-day-controls .actions{ width:100%; display:flex; gap:var(--ui-2); } #todayOfficialMapDayBtn{ flex:1 1 0; } #prevOfficialMapDayBtn, #nextOfficialMapDayBtn{ flex:0 0 var(--ui-ctrl-h); } /* Tools grid + view-more gap */ #view-more > .grid{ gap:var(--ui-2); } /* Input form: keep both .full action buttons stacked full-width (defeat the global 431-680 2-col grid that halved them) */ #eventForm > .actions{ grid-template-columns:1fr; gap:var(--ui-2); } #eventForm > .actions .btn.full{ width:100%; } /* Upload/WhatsApp popup toolbars wrap to balanced 2-up rows */ .input-popup-grid .form-grid > .actions, .input-popup-grid .input-result-panel > .actions{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:430px){ main{ padding-left:var(--ui-2); padding-right:var(--ui-2); } .modal-backdrop{ padding:var(--ui-3) var(--ui-2) calc(var(--ui-3) + var(--safe-bottom)); } /* 4 summary boxes stack on the smallest screens */ .extract-grid.compact-fields{ grid-template-columns:1fr; gap:var(--ui-2); } /* Searchbar becomes a 2-col grid to match the date-nav grid */ #view-agenda .searchbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--ui-2); } #view-agenda .searchbar .btn{ width:auto; min-width:84px; } /* Lone print button spans the full row (no empty 2nd cell) */ #view-more .card > .actions{ display:grid; grid-template-columns:1fr; gap:var(--ui-2); } #view-more .card > .actions > .btn{ width:100%; grid-column:1 / -1; } /* Role-access legend chips flow + wrap as a natural pill row (not stretched halves). MUST come after the .card>.actions grid rule above to win. */ #view-more #roleAccessInfo .actions{ display:flex; flex-wrap:wrap; gap:var(--ui-2); grid-template-columns:none; } #view-more #roleAccessInfo .actions > .legend-chip{ width:auto; flex:0 0 auto; } } /* ---------- 5) DESKTOP CONTAINER: constrain + center (permintaan user) ---------- Konten dibatasi & ditengahkan agar sejajar dengan bottom-nav (margin kiri-kanan seimbang) di layar lebar. Mobile (<=680px) tetap full-width via aturan sebelumnya. */ .app{ max-width:1120px; margin-left:auto; margin-right:auto; } @media (max-width:680px){ .app{ max-width:none; } } /* ---------- 6) INPUT command strip: wrap evenly, no truncated labels ---------- */ .input-command-strip, .input-command-strip.five{ grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:var(--ui-2); overflow:visible; } .input-command-pill{ min-height:96px; align-items:flex-start; text-align:left; gap:var(--ui-1); } .input-command-pill strong, .input-command-pill small{ white-space:normal; overflow:visible; text-overflow:clip; line-height:var(--lh-tight); width:100%; } /* ---------- 7) Daftar kartu: SATU KOLOM ke bawah (urut & konsisten) ---------- Hindari masonry besar-kecil bersisian; kartu lebar-penuh mengalir ke bawah agar mudah dibaca berurutan. Tinggi mengikuti konten (alami untuk daftar). */ #view-today .agenda-list, #agendaList.agenda-list, #agendaList.agenda-list.desktop, #approvalList.agenda-list{ grid-template-columns:1fr !important; align-items:stretch; gap:var(--ui-3); } #view-today .agenda-list > .agenda-card, #agendaList .agenda-card, #approvalList .agenda-card{ width:100%; height:auto; } /* Kartu lebar -> tombol keputusan kembali 1 baris (6 sejajar) di layar lebar, 3 sejajar (2 baris) saat sempit. Selalu rata & label utuh. */ @media (min-width:760px){ #approvalList .agenda-card > .actions{ grid-template-columns:repeat(6,minmax(0,1fr)); } } /* ---------- 8) KOMPONEN KARTU AGENDA: hierarki & keterbacaan ---------- Berlaku ke semua kartu .agenda-card (markup di fungsi agendaCard()). */ /* 8a. Judul panjang (mis. "GRAB ..."): wrap maks 2 baris + ellipsis, tak meluber. */ .agenda-card .agenda-row > *{ min-width:0; } .agenda-card .agenda-head-main{ min-width:0; } .agenda-card .agenda-title{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.25; overflow-wrap:anywhere; } /* 8b. Badge/metadata (status + risk) di area atas, TERPISAH dari tombol aksi. */ .agenda-card .agenda-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ui-2); margin-top:var(--ui-3); } /* 8c. Readiness: persen dekat label & bar (bukan terlempar ke ujung kanan), bar diwarnai sesuai level (merah/kuning/hijau) untuk cepat dibaca. */ .agenda-card .progress-wrap{ margin-top:var(--ui-3); } .agenda-card .progress-label{ justify-content:flex-start; gap:var(--ui-2); align-items:baseline; } .agenda-card .progress-label strong{ color:var(--ink); font-weight:var(--fw-heavy); } .progress.r-low span{ background:var(--status-rejected); } .progress.r-mid span{ background:var(--status-pending); } .progress.r-high span{ background:var(--readiness-complete); } /* 8d. Aksi: baris bawah, hanya tombol, spacing konsisten, 1 primer jelas. */ .agenda-card > .actions{ margin-top:var(--ui-4); gap:var(--ui-2); align-items:center; } .btn.ghost{ background:transparent; border-color:transparent; color:var(--muted); box-shadow:none; } .btn.ghost:hover{ color:var(--ink); background:var(--accent-soft); } /* ---------- 9) "TUNJUK KARTU" — mode seleksi + bulk assign (Super Admin) ---------- */ .agenda-select-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ui-2); margin-top:var(--ui-3); } .agenda-select-active{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ui-2); } .agenda-selall{ display:inline-flex; align-items:center; gap:var(--ui-15); font-weight:650; font-size:var(--fs-body); } .agenda-select-count{ color:var(--muted); font-size:var(--fs-body); font-weight:var(--fw-bold); } .agenda-card.selectable{ cursor:pointer; position:relative; padding-left:calc(var(--ui-6) + 10px); } .agenda-card.selectable .actions{ pointer-events:none; opacity:.5; } .agenda-card.selected{ box-shadow:0 0 0 2px var(--status-delegated, #6d28d9) inset, var(--shadow); } .agenda-check{ position:absolute; top:var(--ui-4); left:var(--ui-3); z-index:2; } .agenda-check input{ width:20px; height:20px; accent-color:var(--status-delegated, #6d28d9); cursor:pointer; } .agenda-assignee{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--ui-2); margin-top:var(--ui-2); font-size:var(--fs-body); } .agenda-assignee-name{ color:var(--ink); font-weight:var(--fw-medium); } .agenda-assign-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(96px + var(--safe-bottom, 0px)); z-index:60; width:min(1120px, calc(100% - 28px)); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--ui-3); padding:var(--ui-3) var(--ui-4); border-radius:var(--ui-r); background:var(--panel); border:1px solid var(--line); box-shadow:0 18px 48px rgba(16,24,40,.18); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); } .agenda-assign-fields{ display:flex; flex-wrap:wrap; gap:var(--ui-2); flex:1 1 auto; min-width:0; } .agenda-assign-fields input{ border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:var(--radius-control); padding:var(--ui-25) var(--ui-3); min-height:var(--ctrl-h); font:inherit; min-width:0; } .agenda-assign-fields #assignRecipient{ flex:2 1 220px; } .agenda-assign-fields #assignNote{ flex:2 1 180px; } .agenda-assign-fields #assignDeadline{ flex:0 0 auto; } .agenda-assign-actions{ display:flex; align-items:center; gap:var(--ui-3); flex:0 0 auto; } .assign-undo-toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(172px + var(--safe-bottom, 0px)); z-index:70; display:flex; align-items:center; gap:var(--ui-3); padding:10px var(--ui-3); border-radius:var(--ui-r); background:var(--accent); color:var(--bg); box-shadow:var(--shadow); max-width:calc(100% - 28px); font-size:var(--fs-body); transition:opacity .35s ease; } .assign-undo-toast.hide{ opacity:0; } .assign-undo-toast .btn{ background:var(--panel); color:var(--ink); min-height:34px; padding:var(--ui-15) var(--ui-3); } @media (max-width:680px){ .agenda-assign-bar{ width:calc(100% - 16px); bottom:calc(104px + var(--safe-bottom,0px)); } } /* Hormati atribut [hidden]: tanpa ini, display:flex di atas membuat toolbar/active/bar selalu tampil (termasuk untuk non-superadmin & saat belum memilih kartu). */ .agenda-select-toolbar[hidden], .agenda-select-active[hidden], .agenda-assign-bar[hidden]{ display:none !important; } /* ===== Mode Kerjakan (work mode) checklist ===== */ /* Item grup (protokol/media): sub-checklist + persentase internal sendiri */ .work-item-grid.is-group{ border-left:3px solid var(--state-progress-end); } .group-block{ display:grid; gap:var(--ui-2); align-content:start; min-width:0; } .group-progress-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--ui-2); flex-wrap:wrap; font-size:var(--fs-body); } .group-progress-head strong{ font-size:var(--fs-body); } .group-progress-meta{ font-size:var(--fs-label); color:var(--muted,#64748b); font-weight:var(--fw-bold); } .group-progress-meta.is-ok{ color:var(--state-filled); } .group-progress-bar{ height:8px; border-radius:var(--ui-r-pill); background:var(--line); overflow:hidden; } .group-progress-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--state-progress-start),var(--state-progress-end)); transition:width .3s ease; } .group-progress-bar.is-ready span{ background:var(--state-filled); } .group-sub-list{ display:grid; gap:var(--ui-15); margin-top:4px; } .group-sub{ border:1px solid var(--line); border-radius:12px; padding:var(--ui-2) var(--ui-25); background:color-mix(in srgb, var(--panel) 80%, transparent); } .group-sub.is-selected{ background:var(--bg); } .group-sub.is-filled{ border-color:var(--state-filled); } .group-sub-check{ display:flex; align-items:center; gap:var(--ui-2); font-size:14px; cursor:pointer; } .group-sub-check input{ width:auto; min-height:auto; } .group-sub-check span:first-of-type{ font-weight:var(--fw-medium); } .group-sub-body{ display:grid; gap:var(--ui-15); margin-top:8px; } .group-sub-owner{ font-size:var(--fs-label); color:var(--muted,#64748b); } .work-head{ display:flex; align-items:center; gap:var(--ui-3); margin:var(--ui-2) 0; flex-wrap:wrap; } .work-progress{ flex:1 1 220px; height:10px; border-radius:var(--ui-r-pill); background:var(--line); overflow:hidden; min-width:160px; } .work-progress .work-bar{ display:block; height:100%; background:linear-gradient(90deg,var(--state-progress-start),var(--state-progress-end)); transition:width .3s ease; } .work-progress.is-ready .work-bar{ background:var(--state-filled); } .work-summary{ font-size:14px; color:var(--ink); } .work-summary .work-100{ color:var(--state-filled); font-weight:var(--fw-bold); } .work-next{ background:var(--bg); border:1px solid var(--line); border-radius:var(--ui-r-sm); padding:var(--ui-2) var(--ui-3); margin:6px 0; display:flex; align-items:center; gap:var(--ui-2); flex-wrap:wrap; font-size:14px; } .work-next.is-ok{ border-color:var(--state-filled); color:var(--state-filled); } .work-toolbar{ display:flex; align-items:center; gap:var(--ui-2); flex-wrap:wrap; margin:6px 0 10px; } .work-toolbar .work-count{ font-size:var(--fs-body); color:var(--muted,#64748b); } .work-toolbar .work-deleg{ display:flex; gap:var(--ui-15); align-items:center; flex-wrap:wrap; } .work-row{ display:flex; gap:var(--ui-15); align-items:center; flex-wrap:wrap; margin-top:8px; } .work-row .work-input{ flex:1 1 150px; min-width:120px; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:var(--ui-r-sm); padding:7px 10px; min-height:38px; font:inherit; } .work-row .work-pick{ display:flex; align-items:center; gap:var(--ui-1); font-size:var(--fs-label); color:var(--muted,#64748b); flex:0 0 auto; } .work-row .work-pick input{ width:auto; min-height:auto; } .work-meta{ font-size:var(--fs-label); color:var(--muted,#64748b); margin-top:4px; } .work-meta.done{ color:var(--state-filled); } .check-item.is-done{ opacity:.95; } .work-summary-card{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(120px,.7fr)); gap:var(--ui-25); margin:8px 0 12px; } .work-summary-card .work-sum-cell{ border:1px solid var(--line); border-radius:var(--radius-inner); padding:var(--ui-25) var(--ui-3); background:color-mix(in srgb, var(--panel) 78%, transparent); min-width:0; } .work-summary-card span{display:block;color:var(--muted);font-size:var(--fs-caption);font-weight:820;text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px} .work-summary-card strong{display:block;color:var(--ink);font-size:14px;line-height:var(--lh-snug);overflow-wrap:anywhere} .work-summary-card .is-missing{border-color:var(--status-rejected-border);box-shadow:inset 4px 0 0 var(--status-rejected)} .work-item-grid{ display:grid; grid-template-columns:46px minmax(190px,1.05fr) minmax(230px,1.25fr) minmax(190px,.9fr); gap:var(--ui-25); align-items:stretch; padding:var(--ui-25); } .work-item-grid.missing{ border-color:var(--status-rejected-border); box-shadow:inset 4px 0 0 var(--status-rejected); } .work-status-cell{display:flex;align-items:flex-start;justify-content:center;padding-top:var(--ui-05)} .work-status-cell input{width:22px;height:22px;accent-color:var(--accent)} .work-item-main{display:grid;gap:7px;min-width:0;align-content:start} .work-item-title{display:flex;align-items:center;gap:var(--ui-2);flex-wrap:wrap;font-weight:850;color:var(--ink);line-height:var(--lh-snug);overflow-wrap:anywhere} .work-item-title .required-dot{margin-left:0} .work-item-source{font-size:var(--fs-label);color:var(--muted);line-height:var(--lh-snug)} .work-result-cell{display:grid;gap:var(--ui-2);align-content:start;min-width:0} .work-result-note{ border:1px solid var(--line); border-radius:var(--radius-control); padding:var(--ui-2) var(--ui-25); background:color-mix(in srgb, var(--panel) 74%, transparent); font-size:var(--fs-label); line-height:var(--lh-snug); min-width:0; overflow-wrap:anywhere; } .work-result-note.is-missing{color:var(--status-rejected);border-color:var(--status-rejected-border);background:var(--state-missing-note-bg);font-weight:var(--fw-heavy)} .work-result-note.is-note{color:var(--muted);background:color-mix(in srgb, var(--bg) 64%, var(--panel));} .work-item-panel{display:grid;gap:var(--ui-2);align-content:start;min-width:0} .work-edit-fold{ border:1px solid var(--line); border-radius:var(--radius-control); background:color-mix(in srgb, var(--panel) 72%, transparent); overflow:hidden; min-width:0; } .work-edit-fold summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--ui-2); padding:var(--ui-2) var(--ui-25); cursor:pointer; color:var(--ink); font-size:var(--fs-label); font-weight:850; list-style:none; } .work-edit-fold summary::-webkit-details-marker{display:none} .work-edit-fold summary::after{ content:"+"; display:grid; place-items:center; width:22px; height:22px; border-radius:var(--ui-r-pill); background:color-mix(in srgb, var(--accent-soft) 72%, transparent); color:var(--accent); flex:0 0 auto; } .work-edit-fold[open] summary::after{content:"-"} .work-edit-body{display:grid;gap:var(--ui-2);padding:0 var(--ui-25) var(--ui-25)} .work-field-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px} .work-field-grid .wide{grid-column:1 / -1} .work-label{display:grid;gap:var(--ui-1);min-width:0} .work-label span{color:var(--muted);font-size:var(--fs-caption);font-weight:820;text-transform:uppercase;letter-spacing:.03em} .work-na-toggle{display:inline-flex;width:max-content;flex-direction:row;align-items:center;gap:var(--ui-15);padding:var(--ui-05) 0;cursor:pointer} .work-na-toggle input{width:auto;margin:0;flex:0 0 auto} .work-na-toggle span{color:var(--muted);font-size:var(--fs-label);font-weight:var(--fw-bold);text-transform:none;letter-spacing:0} .work-input-tabs{display:grid;gap:var(--ui-2)} .work-input-tab-buttons{display:flex;gap:var(--ui-1);flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:var(--ui-1)} .work-input-tab-btn{border:1px solid transparent;background:transparent;color:var(--muted);font-size:var(--fs-label);font-weight:var(--fw-bold);padding:5px 10px;border-radius:var(--ui-r-pill);cursor:pointer} .work-input-tab-btn.is-active{background:color-mix(in srgb, var(--accent-soft) 72%, transparent);color:var(--accent);border-color:transparent} .work-input-tab-pane{display:none} .work-input-tab-pane.is-active{display:block} /* S2-R4/R4b: editor kartu seragam (Sespri+Menko) — 3 jenis isian BERTUMPUK/koeksis (manual+upload+link), bukan tab pilih-satu. */ .work-input-stack{display:flex;flex-direction:column;gap:var(--ui-25)} .work-input-stack > .work-label{margin:0} .delegate-chip-row{display:flex;flex-wrap:wrap;gap:var(--ui-15)} .delegate-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:var(--ui-r-pill);padding:var(--ui-1) var(--ui-15) var(--ui-1) var(--ui-25);background:var(--bg);font-size:var(--fs-label)} .delegate-chip small{color:var(--muted)} .delegate-chip-remove{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:var(--ui-05) var(--ui-1)} .delegate-chip-remove:hover{color:var(--danger,#c0392b)} .delegate-add-row{display:flex;gap:var(--ui-15);margin-top:6px} .delegate-add-row .work-input{flex:1} .work-field-grid .work-input{ width:100%; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:var(--ui-r-sm); padding:var(--ui-2) var(--ui-25); min-height:38px; font:inherit; min-width:0; } .work-link-preview{ display:flex; align-items:center; justify-content:space-between; gap:var(--ui-2); border:1px solid var(--line); border-radius:var(--radius-control); padding:var(--ui-2) var(--ui-25); background:color-mix(in srgb, var(--panel) 74%, transparent); font-size:var(--fs-label); min-width:0; } .work-link-preview.is-missing{color:var(--status-rejected);border-color:var(--status-rejected-border);background:var(--state-missing-note-bg);font-weight:var(--fw-heavy)} .work-link-preview a{font-weight:var(--fw-heavy);color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .operational-manual-editor{display:grid;gap:var(--ui-2)} .operational-photo-editor{display:grid;gap:var(--ui-2)} .operational-format-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ui-2);align-items:end} .operational-home-toggle{display:flex;align-items:center;gap:var(--ui-2);min-height:38px;padding:7px 9px;border:1px solid var(--check-ops-border);border-radius:var(--radius-control);background:var(--check-ops-tint);color:var(--check-ops);font-size:var(--fs-label);font-weight:850} .operational-home-toggle input{width:18px;height:18px;accent-color:var(--check-ops)} .operational-entry-list{display:grid;gap:var(--ui-2);margin-top:2px;padding-top:var(--ui-2);border-top:1px solid var(--check-ops-border)} .operational-entry-list > small{color:var(--muted);font-size:10px;line-height:1.4} .operational-entry-card{display:grid;gap:var(--ui-2);min-width:0;border:1px solid var(--check-ops-border);border-radius:var(--radius-inner);padding:var(--ui-25);background:color-mix(in srgb,var(--check-ops-tint) 70%,var(--panel));box-shadow:var(--shadow-soft)} .operational-entry-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-2);min-width:0} .operational-entry-head strong{font-size:var(--fs-label);overflow-wrap:anywhere} .operational-entry-head span{flex:0 0 auto;color:var(--muted);font-size:10px;font-weight:var(--fw-heavy)} .operational-entry-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-2)} .operational-entry-fields .wide,.operational-entry-fields .operational-home-toggle{grid-column:1/-1} .operational-entry-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--ui-2);flex-wrap:wrap} .operational-entry-actions .btn{min-height:38px;padding:7px 10px;font-size:var(--fs-caption)} .operational-add-btn{justify-self:start;min-height:40px} .operational-report-result{display:grid;gap:7px;margin-top:7px;border:1px solid var(--check-ops-border);border-radius:var(--radius-control);padding:9px;background:color-mix(in srgb,var(--check-ops-tint) 62%,var(--panel));max-height:172px;overflow:auto} .operational-report-result > header{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-2)} .operational-report-result > header strong{font-size:var(--fs-label);overflow-wrap:anywhere} .operational-report-result > header button{border:0;background:transparent;color:var(--accent);font:inherit;font-size:10px;font-weight:850;padding:0} .operational-report-result > header span{color:var(--muted);font-size:10px;font-weight:var(--fw-heavy)} .operational-report-result.is-missing{color:var(--muted);border-style:dashed} .operational-photo-groups{display:grid;gap:var(--ui-2)} .operational-photo-group-result{display:grid;gap:7px;border:1px solid var(--check-ops-border);border-radius:var(--radius-inner);padding:9px;background:color-mix(in srgb,var(--check-ops-tint) 60%,var(--panel))} .operational-photo-group-result > header{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-2)} .operational-photo-group-result > header strong{font-size:var(--fs-label);overflow-wrap:anywhere} .operational-photo-group-result > header span{color:var(--muted);font-size:10px;font-weight:var(--fw-heavy);white-space:nowrap} .operational-photo-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:148px;overflow:auto;padding:1px} .operational-photo-card{position:relative;min-width:0} .operational-photo-card > button:first-child{width:100%;min-height:54px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:center;border:1px solid var(--check-ops-border);border-radius:var(--radius-control);padding:8px 28px 8px 8px;background:var(--check-ops-tint);color:var(--ink);font:inherit;font-size:var(--fs-caption);font-weight:var(--fw-heavy);text-align:left} .operational-photo-card > button:first-child span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .operational-photo-index{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--radius-chip);background:var(--check-ops);color:#06251f;font-weight:950} .operational-photo-remove{position:absolute;top:5px;right:5px;width:24px;height:24px;border:0;border-radius:var(--ui-r-pill);background:var(--panel);color:var(--danger);font-size:16px;line-height:1} .operational-sheet-open{width:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer} .operational-sheet-open > span:first-child{display:grid;gap:var(--ui-05)}.operational-sheet-open small{color:var(--muted)} .persidangan-docs{display:grid;gap:var(--ui-25);margin-top:8px;border-top:1px solid var(--line);padding-top:var(--ui-25)} .persidangan-docs-title{font-size:var(--fs-label);font-weight:var(--fw-heavy);color:var(--muted)} .persidangan-doc-block{display:grid;gap:var(--ui-15);border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--ui-2) var(--ui-25);background:color-mix(in srgb, var(--panel) 60%, transparent)} .persidangan-doc-head{display:flex;align-items:center;gap:var(--ui-2);font-size:var(--fs-label)} .persidangan-doc-add{display:grid;gap:var(--ui-15);margin-top:2px} .calendar-attach-panel{ display:grid; gap:var(--ui-25); margin:10px 0 12px; border:1px solid var(--line); border-radius:18px; padding:var(--ui-3); background:color-mix(in srgb, var(--panel) 78%, transparent); box-shadow:var(--shadow-soft); } .calendar-attach-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ui-3);flex-wrap:wrap} .calendar-attach-head strong{display:block;color:var(--ink);font-size:14px} .calendar-attach-head span{display:block;color:var(--muted);font-size:var(--fs-label);line-height:var(--lh-snug)} .calendar-attach-list{display:grid;gap:var(--ui-2)} .calendar-attach-item{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(190px,.8fr) auto; gap:var(--ui-25); align-items:center; border:1px solid var(--line); border-radius:var(--radius-inner); padding:var(--ui-25); background:color-mix(in srgb, var(--bg) 76%, var(--panel)); min-width:0; } .calendar-attach-file{display:grid;gap:var(--ui-1);min-width:0} .calendar-attach-file strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)} .calendar-attach-file small, .calendar-attach-suggest small{color:var(--muted);line-height:var(--lh-snug)} .calendar-attach-suggest{display:grid;gap:var(--ui-1);min-width:0} .calendar-attach-suggest strong{font-size:var(--fs-body);color:var(--ink);overflow-wrap:anywhere} .calendar-attach-suggest .low-confidence{color:var(--status-rejected);font-weight:850} .calendar-attach-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--ui-15);flex-wrap:wrap} @media (max-width:760px){ .calendar-attach-item{grid-template-columns:1fr} .calendar-attach-actions{justify-content:flex-start} } .work-textarea{ min-height:88px; resize:vertical; line-height:1.45; white-space:pre-wrap; } .work-owner-cell{ display:grid; gap:var(--ui-2); align-content:start; border-left:1px solid var(--line); padding-left:var(--ui-25); min-width:0; } .work-owner-name{display:grid;gap:var(--ui-05);min-width:0} .work-owner-name span{font-size:var(--fs-caption);color:var(--muted);font-weight:820;text-transform:uppercase;letter-spacing:.03em} .work-owner-name strong{font-size:var(--fs-body);line-height:var(--lh-snug);overflow-wrap:anywhere} .work-item-grid.readonly .work-input, .work-item-grid.readonly textarea, .work-item-grid.readonly input[type="file"]{opacity:.62} .work-row-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center} .work-row-actions .btn{min-height:34px;padding:var(--ui-2) var(--ui-25);font-size:var(--fs-label);border-radius:12px} @media (max-width:980px){ .work-item-grid{grid-template-columns:38px minmax(0,1fr);grid-template-areas:"status main" "result result" "owner owner"} .work-status-cell{grid-area:status} .work-item-main{grid-area:main} .work-result-cell{grid-area:result} .work-owner-cell{grid-area:owner;border-left:0;border-top:1px solid var(--line);padding:var(--ui-2) 0 0} } @media (max-width:680px){ .work-row .work-input{ flex:1 1 100%; } .work-summary-card{grid-template-columns:1fr} .work-field-grid{grid-template-columns:1fr} .work-item-grid{padding:9px;gap:var(--ui-2)} } /* ===== Panel hasil ekstraksi undangan (LLM) ===== */ .llm-field{ display:flex; flex-direction:column; gap:var(--ui-1); min-width:0; } .llm-field > small{ display:flex; align-items:center; gap:var(--ui-15); flex-wrap:wrap; } .llm-field .detail-card-control{ width:100%; box-sizing:border-box; } .llm-field.missing > small{ font-weight:var(--fw-bold); } .llm-field .badge.warn{ background:#fef3c7; color:#92400e; } .llm-field .badge.ok{ background:#dcfce7; color:#166534; } .checklist-doc-review{display:grid;gap:var(--ui-2)} .checklist-doc-row{ display:grid; grid-template-columns:minmax(130px,.42fr) minmax(0,1fr); gap:var(--ui-25); align-items:start; border:1px solid var(--line); border-radius:var(--radius-control); padding:var(--ui-25); background:color-mix(in srgb, var(--panel) 82%, transparent); min-width:0; } .checklist-doc-row.low, .checklist-doc-row.empty{border-color:var(--status-rejected-border);background:var(--state-missing-note-bg)} .checklist-doc-label{display:grid;gap:5px;min-width:0} .checklist-doc-label strong{font-size:var(--fs-body);line-height:1.25;overflow-wrap:anywhere} .checklist-doc-label small{color:var(--muted);line-height:var(--lh-snug)} .checklist-doc-value{display:grid;gap:5px;min-width:0} .checklist-doc-value textarea{ width:100%; min-height:58px; box-sizing:border-box; resize:vertical; border:1px solid var(--line); border-radius:12px; padding:9px 10px; background:var(--bg); color:var(--ink); font:inherit; line-height:1.4; } .checklist-doc-empty{color:var(--status-rejected);font-weight:var(--fw-heavy)} @media (max-width:680px){ .checklist-doc-row{grid-template-columns:1fr} } /* === LANGKAH 2B: Hasil Check List tinggi SERAGAM + status HIJAU/MERAH === */ /* Potong 'Hasil read-only' ke maksimum baris sama (anti-menjulang). Isi UTUH tetap dibuka via tombol/"Lihat selengkapnya" (popup baca yg sudah ada). */ .detail-brief-result-value .result-preview{ max-height:5.7em; overflow:hidden; } .detail-brief-result-value .result-preview:not(.result-preview-structured){ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; white-space:normal; } .detail-brief-result-row:not(.is-head){ min-height:84px; } .detail-brief-result-row:not(.is-head) > div{ min-width:0; } /* AKSEN STATUS: terisi=hijau, belum=merah (kontras baik, teks tetap gelap) */ /* Parity hijau/merah: border + bar inset kiri + tint halus (samakan bobot visual) */ .detail-brief-result-row:not(.is-head):not(.is-missing){ border-color:var(--state-filled-border) !important; box-shadow:inset 4px 0 0 var(--state-filled) !important; background:var(--state-filled-bg) !important; } .detail-brief-result-row.is-missing{ border-color:var(--state-missing-border) !important; box-shadow:inset 4px 0 0 var(--state-missing) !important; background:var(--state-missing-bg) !important; } /* Mode Kerjakan (work-item): aksen hijau/merah + badge 'Belum' jadi merah */ .check-item.work-item-grid{ border-left:4px solid var(--line); } .check-item.work-item-grid.is-done{ border-left-color:var(--state-filled); background:var(--state-filled-bg-soft) !important; } .check-item.work-item-grid.missing{ border-left-color:var(--state-missing); background:var(--state-missing-bg-soft) !important; } .check-item.work-item-grid.missing .work-status-cell .badge.warn{ color:var(--state-missing-label); border-color:var(--state-missing-border-soft); background:var(--state-missing-label-bg); } /* work-summary cell yg 'is-missing' beri aksen merah halus juga */ .work-sum-cell.is-missing{ border-left:3px solid var(--state-missing); padding-left:9px; } /* === SIMETRI v9.4: perapian aditif menyeluruh (web & mobile) === */ /* FIX KRITIS: baris Hasil Check List FIXED height:84px+overflow:hidden milik Codex meng-klip konten saat baris menumpuk di mobile -> auto-height di <=760px. */ @media (max-width:760px){ .detail-brief-result-row:not(.is-head){ height:auto !important; min-height:0 !important; overflow:visible !important; align-items:start; row-gap:4px; padding:12px; } .detail-brief-result-row.is-head{ display:none; } .detail-brief-result-value .result-preview{ max-height:none; -webkit-line-clamp:4; } .result-readonly-stack{grid-template-columns:1fr} .result-reader-toggle{grid-template-columns:auto minmax(0,1fr) auto; min-height:52px} .link-reader-toolbar{display:grid;grid-template-columns:1fr} .link-reader-actions, .link-reader-zoom-controls{width:100%;justify-content:flex-start;margin-left:0} .link-reader-zoom-controls .btn{flex:1 1 auto} } /* Header hasil sejajar baris data (desktop) */ .detail-brief-result-row.is-head{ height:84px; padding:var(--ui-25) var(--ui-3); align-items:center; } /* Dropdown Prioritas/Risk sejajar judul Detail */ .detail-brief-head{ align-items:center; } .detail-brief-badges{ align-items:center; } /* Kolom pejabat tinggi konsisten */ .detail-brief-result-owner{ max-height:64px; overflow:hidden; } /* Work-item: status & pemilik selaras tengah baris */ .check-item.work-item-grid{ align-items:center; } .check-item.work-item-grid .work-status-cell{ display:flex; align-items:center; } /* Metric grid: tablet 2 kolom (hindari sel terlalu lebar) */ @media (max-width:1024px){ .detail-metric-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Kartu agenda: aksi rata kiri saat wrap + badge meta align tengah */ .agenda-card .actions{ justify-content:flex-start; align-items:center; } .agenda-card .agenda-badges{ align-items:center; } /* Badge & timebox padding seragam (lebih 'square') */ .badge{ padding-top:5px; padding-bottom:5px; } .timebox{ padding:var(--ui-2) var(--ui-25); } /* Empty-state benar-benar center */ .week-empty, .presentation-empty, .detail-brief-empty, .agenda-empty{ text-align:center; } /* Form: kolom-dua menumpuk lebih awal (<=680px) agar tak sempit */ @media (max-width:680px){ .form-grid.two, .form-grid.three{ grid-template-columns:1fr; } } /* Label uppercase pada weekday simetris vertikal */ .weekday, .week-day-label{ padding-top:var(--ui-2); padding-bottom:var(--ui-2); } /* === Modal Upload: compact === */ .ocr-status:empty{ display:none; } .ocr-status{ font-size:var(--fs-label); color:var(--muted); margin-top:6px; } .file-hint{ font-size:var(--fs-label); margin:6px 0 0; } .upload-fields-note{ margin-top:10px; border:1px solid var(--line); border-radius:12px; padding:var(--ui-05) var(--ui-3); } .upload-fields-note > summary{ cursor:pointer; font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--muted); padding:var(--ui-2) 0; list-style:none; } .upload-fields-note > summary::-webkit-details-marker{ display:none; } .upload-fields-note > summary::before{ content:"▸ "; } .upload-fields-note[open] > summary::before{ content:"▾ "; } .upload-fields-note[open]{ padding-bottom:var(--ui-25); } .upload-fields-note .compact-fields{ margin-top:6px; } /* Claude polish: sejajarkan aksi rangkuman Detail Agenda dengan kartu Kesiapan. */ .detail-brief-actions{ justify-content:flex-start; } /* Ringkasan AI Approval (compact, token bersama) */ .approval-ai-summary{ border:1px solid var(--line); border-radius:var(--radius-control); padding:var(--ui-25) var(--ui-3); margin-bottom:10px; background:color-mix(in srgb, var(--accent-soft) 22%, transparent); } .approval-ai-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--ui-2); flex-wrap:wrap; } .approval-ai-head strong{ font-size:var(--fs-body); } .approval-ai-headline{ margin:8px 0 0; font-weight:var(--fw-bold); } .approval-ai-points{ margin:8px 0 0; padding-left:18px; display:grid; gap:3px; } .approval-ai-points li{ font-size:var(--fs-body); line-height:1.4; } .approval-ai-pending{ margin:8px 0 0; font-size:var(--fs-label); color:var(--muted); } /* ========================================================================== KARTU DASHBOARD/STATISTIK COMPACT — KHUSUS MOBILE (≤680px) Murni kepadatan visual: grid dirapatkan ke 3 kolom, tinggi/padding/huruf diperkecil. Markup, angka, label, urutan, dan aksi tap TIDAK berubah; desktop (>680px) tidak tersentuh. Ditaruh paling akhir agar menang cascade atas FINAL NORMALIZATION LAYER (min-height 92-104px di mobile lama). Cakupan: strip .stats global (tampil di ke-7 menu), ringkasan Mingguan/ Bulanan Kalender (.calendar-summary), dan Mode Persentase (.presentation-summary). ====================================================== */ @media (max-width:680px){ .grid.stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ui-15); } .stats .stat{ min-height:48px; /* target sentuh tetap memadai (>=44px) */ padding:var(--ui-15) var(--ui-2); border-radius:12px; display:flex; flex-direction:column; justify-content:center; gap:1px; } .stats .stat > span:first-child{ font-size:var(--fs-caption); line-height:1.15; letter-spacing:0; white-space:normal; overflow:hidden; text-overflow:clip; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .stats .stat strong{ font-size:var(--fs-title); margin-top:0; letter-spacing:-.02em; } .calendar-summary{ margin:10px 0 8px; } .calendar-summary .stat, .calendar-suite .calendar-summary .stat{ min-height:44px; padding:var(--ui-15) var(--ui-2); border-radius:12px; } .calendar-summary .stat span{ font-size:var(--fs-caption); line-height:1.15; } /* G3 gerbang D */ .calendar-summary .stat strong, .calendar-suite .calendar-summary .stat strong{ font-size:var(--fs-title); margin-top:0; } .presentation-summary{ gap:6px; } .presentation-summary .stat{ min-height:44px; padding:6px 8px; border-radius:12px; justify-content:center; gap:1px; } .presentation-summary .stat span{ font-size:var(--fs-caption); line-height:1.15; } .presentation-summary .stat strong{ font-size:15px; margin-top:0; } } /* Layar sangat sempit: label sedikit lebih kecil agar tetap 2 baris utuh. */ @media (max-width:380px){ .stats .stat > span:first-child{ font-size:var(--fs-caption); } /* G3 gerbang D: 8.5 -> 11 */ .stats .stat strong{ font-size:var(--fs-title); } } /* Home dashboard ringkas: enam kartu selalu terbagi simetris tanpa memengaruhi statistik kalender/presentasi yang juga memakai .stats. */ .grid.stats[aria-label="Ringkasan"]{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; align-items:stretch; } .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action{ min-height:68px; height:68px; padding:8px; border-radius:13px; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"icon label" "icon value"; align-items:center; column-gap:7px; row-gap:2px; box-shadow:var(--shadow); } .grid.stats[aria-label="Ringkasan"] .stat-icon{ grid-area:icon; width:28px; height:28px; border-radius:10px; display:grid; place-items:center; font-size:14px; line-height:1; background:color-mix(in srgb, var(--accent-soft) 58%, var(--panel)); border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); } .grid.stats[aria-label="Ringkasan"] .stat-label{ grid-area:label; font-size:var(--fs-caption); /* G3b gerbang D: rule label SUNGGUHAN (10.5 -> 11) */ line-height:1.15; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--muted); } .grid.stats[aria-label="Ringkasan"] .stat strong{ grid-area:value; font-size:21px; line-height:1; margin-top:0; letter-spacing:-.03em; } @media (min-width:681px) and (max-width:960px){ .grid.stats[aria-label="Ringkasan"]{ grid-template-columns:repeat(2,minmax(0,1fr)) /* 3 -> 2 (13 Agu 2026): delapan kartu tidak habis dibagi tiga; pita ini akan menyisakan satu slot kosong. */; } } @media (max-width:680px){ /* Mobile: TUJUH kartu (Pengajuan Agenda masuk 13 Agu 2026) menjadi 2 x 3 penuh + satu kartu melebar. Angka ganjil tidak bisa dibagi dua kolom tanpa menyisakan satu kartu yatim di kanan; melebarkan kartu TERAKHIR membuat barisnya terbaca disengaja, bukan sisa. Tinggi eksplisit tetap menjaga semua kartu identik. */ .grid.stats[aria-label="Ringkasan"]{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:68px; gap:6px; } /* 13 Agu 2026: kartu ke-8 "Disposisi Saya" membuat jumlahnya GENAP lagi, jadi hack "kartu terakhir melebar penuh" DICABUT — dua kolom kini terisi rata 4 baris tanpa kartu yatim. Hack itu lahir hanya karena tujuh ganjil. */ .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action{ min-height:68px; height:100%; padding:7px 8px; border-radius:12px; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"icon label" "icon value"; justify-items:stretch; align-content:center; text-align:left; column-gap:7px; row-gap:2px; } .grid.stats[aria-label="Ringkasan"] .stat-icon{ width:24px; height:24px; border-radius:9px; font-size:12px; } .grid.stats[aria-label="Ringkasan"] .stat strong{ font-size:18px; } .grid.stats[aria-label="Ringkasan"] .stat-label{ font-size:var(--fs-caption); line-height:1.1; -webkit-line-clamp:2; min-height:2.2em; } } @media (max-width:380px){ .grid.stats[aria-label="Ringkasan"]{ gap:4px; grid-auto-rows:66px; } .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action{ min-height:66px; height:66px; padding:6px; } .grid.stats[aria-label="Ringkasan"] .stat-icon{ width:22px; height:22px; font-size:11px; } .grid.stats[aria-label="Ringkasan"] .stat strong{ font-size:17px; } .grid.stats[aria-label="Ringkasan"] .stat-label{ font-size:var(--fs-caption); } } /* Detail Agenda: keep action layout identical on desktop/mobile. Row 1 = Copy Detail | Edit Agenda | Keputusan, row 2 = Hapus full width. */ #modalBody .detail-modal-actions{ display:flex; flex-direction:column; align-items:stretch; } #modalBody .detail-modal-actions .detail-decision-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; } #modalBody .detail-modal-actions .detail-decision-row .btn{ width:100%; min-width:0; grid-column:auto; flex:0 1 auto; } #modalBody .detail-modal-actions > .btn.danger[data-modal-delete]{ width:100%; min-width:0; grid-column:1 / -1; flex:0 0 auto; } /* Mobile: tiga tombol aksi (Copy Detail | Status | Hapus) menumpuk vertikal. */ @media (max-width:680px){ #modalBody .detail-modal-actions .detail-decision-row{ grid-template-columns:1fr; } } /* Catatan HUT 🎂 di header hari (Agenda HUT). */ .home-birthday-note{ margin:4px 0 0; display:flex; flex-wrap:wrap; gap:6px; } .home-birthday-note .hut-note-link{ appearance:none; border:none; background:rgba(236,72,153,.12); color:var(--evt-hut-ink); font-weight:600; font-size:.82rem; padding:2px 8px; border-radius:999px; cursor:pointer; } .home-birthday-note .hut-note-link:hover{ background:rgba(236,72,153,.2); } .decision-menu-backdrop{ z-index:245; align-items:center; padding:16px; } .decision-menu-modal{ max-width:520px; width:min(520px,100%); } @media (max-width:680px){ #modalBody .detail-modal-actions{ gap:7px; } #modalBody .detail-modal-actions .detail-decision-row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ui-15); } #modalBody .detail-modal-actions .detail-decision-row .btn, #modalBody .detail-modal-actions > .btn.danger[data-modal-delete]{ min-height:40px; padding:8px 5px; font-size:clamp(10px, 2.9vw, 12px); line-height:1.12; } .decision-menu-backdrop{ align-items:center; padding:var(--ui-25); } .decision-menu-modal{ border-radius:26px; } } /* Approval: collapsed decisions use one full-width Keputusan button. */ #approvalList .agenda-card > .actions.approval-decision-actions{ display:block; grid-template-columns:none; width:100%; } #approvalList .agenda-card > .actions.approval-decision-actions .approval-decision-trigger{ width:100%; min-width:0; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:var(--ui-2); font-weight:850; white-space:nowrap; } @media (max-width:680px){ #approvalList .agenda-card > .actions.approval-decision-actions{ display:block; } #approvalList .agenda-card > .actions.approval-decision-actions .approval-decision-trigger{ min-height:var(--ctrl-h); font-size:var(--fs-label); } } /* Section "Lanjutan" (operasional + isian formulir) di form detail */ .detail-adv-group{margin-top:12px;padding-top:var(--ui-25);border-top:1px solid var(--line)} .detail-adv-group h5{margin:0 0 8px;font-size:var(--fs-body);letter-spacing:.02em;text-transform:uppercase;opacity:.7} .detail-adv-checks{display:flex;flex-wrap:wrap;gap:var(--ui-2);margin-bottom:8px} /* ========================================================================= MODE PERSENTASE — JUDUL UTUH (auto-height) + BAND SEJAJAR (subgrid). Blok ini SENGAJA diletakkan paling akhir & memakai !important agar menang atas aturan .pdf-* / .presentation-fit-stage yang terduplikasi di banyak media query di atas (yang mengunci aspect-ratio 16:9, tinggi lane 1fr, dan overflow:hidden -> memotong judul). Akar sebelumnya gagal karena kliping ada di KONTAINER (fit-stage 16:9 + lane tinggi-tetap + .pdf-event overflow:hidden), bukan di .pdf-event-title. Berlaku untuk LAYAR dan (kecuali override print di bawah) PDF, sehingga perbaikan judul-utuh IKUT terbawa ke PDF. Lintas-browser (Windows Chrome/Edge/Firefox): tanpa properti WebKit-only; subgrid dipakai bila didukung (2023+), dengan fallback auto rows bila tidak. */ .presentation-fit-stage{ aspect-ratio:auto !important; width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important; /* FIT SUNGGUHAN (27 Jul 2026): tinggi kotak layout = tinggi slide x skala (disetel JS via --presentation-stage-h) supaya transform scale tidak meninggalkan kliping/ruang mati; fallback auto bila var belum disetel. */ height:var(--presentation-stage-h, auto) !important; max-height:none !important; transform-origin:top center !important; } .pdf-slide{ width:100% !important; height:auto !important; min-height:calc(100vh - 28px) !important; overflow:visible !important; padding:clamp(160px, 13vw, 215px) 8.5% 46px !important; } .pdf-left-block-a{top:0 !important;left:0 !important;width:44px !important;height:120px !important;} .pdf-left-block-b{top:0 !important;left:44px !important;width:54px !important;height:140px !important;} .pdf-left-block-c{top:62px !important;left:0 !important;width:88px !important;height:120px !important;} .pdf-left-block-d{top:140px !important;left:0 !important;width:88px !important;height:44px !important;} .pdf-seal{top:30px !important;right:6% !important;width:118px !important;height:118px !important;} .pdf-heading{top:30px !important;left:15% !important;right:15% !important;} .pdf-timeline-grid{ position:static !important; inset:auto !important; margin:0 !important; height:auto !important; min-height:0 !important; grid-template-columns:repeat(7, minmax(0,1fr)) !important; } /* Fallback (tanpa subgrid): lane menyesuaikan isi -> judul utuh (band bisa sedikit tak sejajar). */ .pdf-day-col{ grid-template-rows:auto auto auto !important; } /* Kotak agenda: 1,5 kolom agar judul ringkas tanpa kehilangan hubungan ke kolom harinya. Pusat kotak tepat mengikuti pusat tanggal/nama hari; pola atas/bawah selang-seling tetap memberi ruang horizontal. */ .pdf-timeline-grid, .pdf-day-col, .pdf-lane{ overflow:visible !important; } .pdf-event{ width:150% !important; max-width:none !important; align-self:center !important; overflow:visible !important; flex:0 0 auto !important; height:auto !important; box-sizing:border-box; } .pdf-event-title{ overflow-wrap:break-word !important; word-break:normal !important; } .pdf-status-dots{ position:static !important; inset:auto !important; margin:14px 0 0 !important; display:flex !important; justify-content:flex-end !important; gap:8px !important; } .pdf-corner-mark{ display:none !important; } /* Band tanggal sejajar di semua kolom via subgrid (didukung Chrome/Edge 117+, FF 71+, Safari 16+). */ @supports (grid-template-rows: subgrid){ .pdf-timeline-grid{ grid-template-rows:auto auto auto !important; } .pdf-day-col{ grid-row:span 3 !important; grid-template-rows:subgrid !important; } } /* ===== Mode Persentase 27 Jul 2026: jaring gulir + dok navigasi bawah ===== (1) Data SELALU bisa dilihat penuh: shell boleh menggulir; grid tidak lagi memusatkan-lalu-memotong (bug klasik center+overflow). (2) Navigasi pindah jadi DOK MELAYANG bawah-tengah yang MEREDUP saat diam (kelas .controls-idle dari JS) sehingga tidak menutupi judul slide. */ .presentation-shell{ overflow:auto !important; height:100vh !important; height:100dvh !important; } .presentation-grid{ height:auto !important; min-height:0 !important; overflow:visible !important; display:block !important; } .presentation-fit-stage{ margin:0 auto !important; } .presentation-overlay .presentation-header{ position:fixed !important; top:auto !important; bottom:14px !important; left:50% !important; transform:translateX(-50%) !important; z-index:80; width:auto !important; max-width:min(96vw, 860px); margin:0 !important; transition:opacity .3s ease; } .presentation-overlay.controls-idle .presentation-header{ opacity:.14; pointer-events:none; } /* Kontrol dok: kompak mengikuti tulisan — pengecualian sadar gerbang A (chrome presentasi, redundan dengan gestur; 44px membuat dok menutupi slide). */ .presentation-actions{ flex-wrap:wrap; justify-content:center; } .presentation-actions .btn{ min-height:34px !important; padding:6px 12px !important; font-size:var(--fs-label) !important; } .presentation-zoom-label{ padding:6px 8px !important; min-width:64px !important; } /* Ringkasan atas dipadatkan supaya ruang vertikal untuk slide maksimal. */ .presentation-summary{ margin-bottom:6px; } /* PDF (window.print): satu minggu mengisi tepat satu lembar A4 landscape. Ukuran fisik dikunci ke area cetak 287x200 mm (A4 dikurangi margin 5 mm); kartu tetap auto-height, tetapi tipografi/gap dipadatkan khusus cetak agar tujuh kolom dan kedua lane tidak membentuk halaman kedua. */ @media print{ @page{size:A4 landscape;margin:5mm;} html, body{ width:287mm !important; height:200mm !important; min-height:0 !important; margin:0 !important; overflow:hidden !important; background:#fff !important; } .presentation-header,.presentation-summary,.presentation-actions,.presentation-footer-note,.presentation-zoom-label{display:none !important;} .presentation-overlay, .presentation-overlay.active, .presentation-shell, #presentationGrid, .presentation-grid, .presentation-fit-stage{ width:287mm !important; height:200mm !important; min-height:0 !important; max-width:287mm !important; max-height:200mm !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } .presentation-overlay, .presentation-overlay.active{ position:static !important; display:block !important; background:#fff !important; } .presentation-shell, #presentationGrid, .presentation-grid{display:block !important;} .presentation-fit-stage{transform:none !important;} .pdf-slide{ width:287mm !important; height:200mm !important; min-height:200mm !important; max-height:200mm !important; padding:42mm 13mm 8mm !important; overflow:hidden !important; background:#fff !important; box-shadow:none !important; border-radius:0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .pdf-heading{top:7mm !important;} .pdf-heading h1{font-size:27pt !important;} .pdf-heading h2{margin-top:4mm !important;font-size:20pt !important;} .pdf-seal{top:7mm !important;right:5mm !important;width:24mm !important;height:24mm !important;} .pdf-timeline-grid{ height:150mm !important; min-height:150mm !important; max-height:150mm !important; align-items:stretch !important; } .pdf-day-col{ grid-row:auto !important; grid-template-rows:minmax(0,1fr) 15mm minmax(0,1fr) !important; min-height:0 !important; max-height:150mm !important; } .pdf-lane{ min-height:0 !important; max-height:67.5mm !important; gap:1mm !important; padding-left:1.2mm !important; padding-right:1.2mm !important; } .pdf-lane-top{padding-bottom:2mm !important;} .pdf-lane-bottom{padding-top:2mm !important;} .pdf-event{ padding:1mm 1.2mm !important; border-width:.45mm !important; gap:.7mm !important; font-size:7pt !important; line-height:1.04 !important; } .pdf-slide.compact .pdf-event{padding:.7mm 1mm !important;font-size:6.2pt !important;} .pdf-slide.ultra-compact .pdf-event{padding:.5mm .8mm !important;font-size:5.5pt !important;} .pdf-slide.compact .pdf-lane{gap:.7mm !important;} .pdf-slide.ultra-compact .pdf-lane{gap:.45mm !important;} .pdf-date-cell{font-size:18pt !important;} .pdf-name-cell{font-size:13pt !important;} .pdf-event-ready{border-width:.35mm !important;padding:.2mm 1mm !important;} .pdf-slide *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;} .pdf-event.status-approved{background:var(--status-approved-print-bg) !important;border-color:var(--status-approved-print) !important;} .pdf-event.status-pending{background:var(--status-pending-print-bg) !important;border-color:var(--status-pending-print) !important;} .pdf-event.status-tapping{background:var(--status-tapping-print-bg) !important;border-color:var(--status-tapping-print) !important;} .pdf-event.status-rejected{background:var(--status-rejected-print-bg) !important;border-color:var(--status-rejected-print) !important;} .pdf-event.status-delegated{background:var(--status-delegated-print-bg) !important;border-color:var(--status-delegated-print) !important;} .pdf-event.status-waiting{background:var(--status-waiting-print-bg) !important;border-color:var(--status-waiting-print) !important;} .pdf-event,.pdf-day-col,.pdf-day-band{break-inside:avoid;} }