/* ============================================================ BOOKING GATEWAY — VIRCANSASTUDIO · ADMIN Dense, scannable, low-decoration admin panel. Inherits tokens from app.css (loaded first). ============================================================ */ /* ============================================================ FONT SISTEM DS v2.0 — restore stack prototype "POS Money-First". Kembali ke tiga family DS: Fivo Sans Modern (display/judul + angka TOTAL besar), Geist Mono (No.Dok, ID, harga), Geist (body). Override token DILAKUKAN DI SINI (admin.css hanya dimuat oleh admin app) → efek global untuk seluruh admin, storefront/tracking tetap Geist tunggal. Fivo self-hosted (assets/fonts); Geist Mono & Space Grotesk via Google Fonts di admin/index.html. ============================================ */ @font-face { font-family: "Fivo Sans Modern"; src: url("../fonts/FivoSansModern-400.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Fivo Sans Modern"; src: url("../fonts/FivoSansModern-500.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Fivo Sans Modern"; src: url("../fonts/FivoSansModern-700.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Fivo Sans Modern"; src: url("../fonts/FivoSansModern-800.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } :root { /* display (judul + angka besar) = Fivo → Space Grotesk → system */ --font-heading: "Fivo Sans Modern", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Fivo Sans Modern", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-head: var(--font-heading); /* mono (No.Dok / ID / harga) = Geist Mono */ --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* body tetap Geist (app.css) */ } body.admin { background: var(--app-bg); font-size: 14px; } /* ---------- Login admin (12.33 · Quiet Access Portal) ---------- Primitive form, CTA, alert, dan breakpoint tetap diwarisi dari AUTH-UNIFY di app.css. Blok ini hanya mengatur komposisi dan identitas login admin. */ .auth-wrap--admin { --ls-display: -.02em; position: relative; overflow: hidden; background: var(--bg-app); } .auth-wrap--admin[data-brand="luxa"] { --brand-gradient: var(--brand-luxa-grad); --brand-gradient-soft: var(--brand-luxa-grad-soft); --brand-accent: var(--brand-luxa-accent); --brand-accent-ink: var(--text-on-dark); } .auth-wrap--admin[data-brand="nussa"] { --brand-gradient: var(--brand-nussa-grad); --brand-gradient-soft: var(--brand-nussa-grad-soft); --brand-accent: var(--brand-nussa-accent); --brand-accent-ink: var(--text-on-dark); } .auth-shell--admin { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); background: var(--surface-0); border-color: var(--border-default); box-shadow: var(--shadow-pop); } .auth-hero--admin { min-width: 0; min-height: calc(var(--space-14) + var(--space-14) + var(--space-14) + var(--space-14) + var(--space-8)); padding: var(--space-10) var(--space-9); border-radius: var(--radius-lg); background: var(--brand-gradient-soft); color: var(--text-strong); } .auth-hero--admin::after { content: ""; position: absolute; right: calc(var(--space-1) - var(--space-1) - var(--space-10)); bottom: calc(var(--space-1) - var(--space-1) - var(--space-10)); z-index: 0; width: calc(var(--space-14) + var(--space-14)); aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--brand-accent); filter: blur(var(--space-9)); opacity: .42; pointer-events: none; } .auth-hero--admin > * { position: relative; z-index: 1; } .auth-hero-head, .auth-brand-lockup { display: flex; align-items: center; } .auth-hero-head { min-height: var(--space-10); } .auth-brand-lockup { min-width: 0; } .auth-brand-logo { display: block; width: auto; height: var(--space-6); max-width: calc(var(--space-14) + var(--space-9)); object-fit: contain; object-position: left center; } .auth-hero-kicker { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; } .auth-hero-kicker { margin: var(--space-0) var(--space-0) var(--space-5); color: var(--text-muted); } .auth-hero-title { margin: var(--space-0); color: var(--text-strong); font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: var(--lh-tight); text-wrap: balance; } .auth-hero-accent { color: var(--text-strong); } .auth-hero-sub { max-width: 34ch; margin: var(--space-5) var(--space-0) var(--space-0); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--lh-relaxed); } /* — Panel dan aksesori form admin — */ .auth-panel--admin.auth-form { margin-top: var(--space-0); padding: var(--space-11) var(--space-10); border-radius: var(--radius-lg); } .auth-panel-head { margin-bottom: var(--space-2); } .auth-panel--admin .auth-title { margin-top: var(--space-0); font-size: var(--text-h2); line-height: var(--lh-snug); } .auth-panel--admin .auth-sub { max-width: 42ch; margin-top: var(--space-3); } /* Input dengan ikon kiri + toggle kanan; struktur tetap primitive AUTH-UNIFY. */ .ctl-wrap { position: relative; } .ctl-wrap .ctl-ic { position: absolute; left: var(--space-4); top: 50%; display: inline-flex; color: var(--text-subtle); pointer-events: none; transform: translateY(-50%); } .control--ic, .auth-field .control--ic { padding-left: calc(var(--space-8) + var(--space-3)); } .control--pass, .auth-field .control--pass { padding-right: calc(var(--space-9) + var(--space-4)); } .auth-field .control:focus { border-color: var(--border-strong); box-shadow: var(--shadow-focus-brand); } .pass-toggle { position: absolute; right: var(--space-2); top: 50%; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--space-9) + var(--space-2)); height: calc(var(--space-9) + var(--space-2)); padding: var(--space-0); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-subtle); cursor: pointer; transform: translateY(-50%); } .pass-toggle:hover { background: var(--surface-50); color: var(--text-strong); } .pass-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .caps-hint { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--tag-warning-text); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label-sm); text-transform: uppercase; } .caps-hint svg { color: var(--tag-warning-text); } .auth-trust { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4); border: 1px solid var(--tag-neutral-border); border-radius: var(--radius-sm); background: var(--tag-neutral-bg); color: var(--tag-neutral-text); font-size: var(--text-2xs); line-height: var(--lh-normal); } .auth-trust svg { color: var(--tag-success-text); } .auth-foot { margin-top: var(--space-5); color: var(--text-subtle); font-size: var(--text-2xs); line-height: var(--lh-normal); text-align: center; } .demo-hint { margin-top: var(--space-5); padding: var(--space-4); border: 1px dashed var(--tag-warning-border); border-radius: var(--radius-sm); background: var(--tag-warning-bg); color: var(--tag-warning-text); font-family: var(--font-mono); font-size: var(--text-2xs); line-height: var(--lh-relaxed); } @media (max-width: 900px) { .auth-shell--admin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--space-0); } .auth-hero--admin { min-height: var(--space-13); padding: var(--space-6) var(--space-7); } .auth-hero--admin .auth-hero-more { display: none; } .auth-hero-head { width: 100%; } .auth-panel--admin.auth-form { padding: var(--space-8) var(--space-7); } } @media (max-width: 560px) { .auth-wrap--admin { background: var(--brand-gradient-soft); } .auth-shell--admin { grid-template-rows: calc(var(--space-14) + var(--space-12)) minmax(0, 1fr); gap: var(--space-0); padding: var(--space-0); background: var(--brand-gradient-soft); } .auth-hero--admin { min-height: calc(var(--space-14) + var(--space-12)); padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--space-6) var(--space-10); border-radius: var(--space-0); flex-direction: column; align-items: stretch; } .auth-hero--admin .auth-hero-body.auth-hero-more { display: block; margin-top: auto; } .auth-hero-kicker, .auth-hero-sub { display: none; } .auth-hero-title { max-width: 16ch; font-size: var(--text-h2); line-height: var(--lh-snug); } .auth-panel--admin.auth-form { position: relative; top: calc(var(--space-1) - var(--space-1) - var(--space-7)); z-index: 2; min-height: calc(100dvh - var(--space-14) - var(--space-12) + var(--space-7)); margin-top: var(--space-0); margin-bottom: calc(var(--space-1) - var(--space-1) - var(--space-7)); padding: var(--space-9) var(--space-6) calc(var(--space-7) + env(safe-area-inset-bottom)); border-radius: var(--radius-xl) var(--radius-xl) var(--space-0) var(--space-0); justify-content: flex-start; } .auth-panel--admin::before { content: ""; position: absolute; top: var(--space-3); left: 50%; width: var(--space-8); height: var(--space-1); border-radius: var(--radius-pill); background: var(--border-default); transform: translateX(-50%); } .auth-foot { margin-top: auto; padding-top: var(--space-7); } } /* ---------- App layout · DS v2 App Shell ---------- */ .skip-link { position:fixed; left:16px; top:12px; z-index:1000; padding:10px 14px; border-radius:var(--radius-sm); background:var(--ink); color:#fff; font-weight:650; transform:translateY(-160%); transition:transform .14s ease; } .skip-link:focus { transform:translateY(0); } .admin-shell { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100dvh; background:var(--app-bg); } .sidebar { background:var(--surface-0); color:var(--text-body); padding:18px 12px 14px; display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; border-right:1px solid var(--line-200); overflow:hidden; } .sidebar .logo { min-height:46px; display:flex; align-items:center; justify-content:flex-start; padding:4px 12px 15px; border-bottom:1px solid var(--line-100); } .sidebar .logo .wordmark { color:var(--ink); font-family:var(--font-display); font-size:14px; font-weight:800; letter-spacing:-.02em; } .sidebar .logo .logo-img { height:18px; width:auto; max-width:178px; object-fit:contain; display:block; } .sidebar .logo .tag { font-family:var(--font-mono); font-size:9px; color:var(--text-subtle); letter-spacing:.14em; text-transform:uppercase; } .nav { display:flex; flex-direction:column; gap:2px; flex:1; min-height:0; overflow-y:auto; padding:11px 0 8px; scrollbar-width:thin; scrollbar-color:var(--line-200) transparent; } .nav-label { padding:7px 12px 8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); } .nav-separator { height:1px; flex:0 0 auto; background:var(--line-100); margin:9px 12px; } .nav a { position:relative; display:flex; align-items:center; gap:11px; min-height:40px; padding:8px 12px; border-radius:8px; color:var(--text-muted); font-size:13.5px; font-weight:520; transition:background .14s ease,color .14s ease; } .nav a svg { width:18px; height:18px; flex:0 0 auto; } .nav a:hover { background:var(--surface-50); color:var(--text-strong); } .nav a.active { background:var(--surface-50); color:var(--ink); font-weight:650; } .nav a.active::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--identity-yellow); box-shadow:0 0 0 1px var(--identity-yellow-shadow); } .nav a:focus-visible { outline:none; box-shadow:var(--shadow-focus,0 0 0 3px rgba(5,5,5,.14)); } .nav .nav-external { color:var(--text-subtle); } .sidebar .userbox { border-top:1px solid var(--line-100); padding:14px 4px 0; margin-top:0; display:flex; align-items:center; gap:10px; } .sidebar .userbox .av { width:34px; height:34px; border-radius:10px; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; flex:none; } .sidebar .userbox .who { min-width:0; } .sidebar .userbox .who .nm { font-size:12.5px; color:var(--text-strong); font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sidebar .userbox .who .rl { font-size:10.5px; color:var(--text-subtle); } .sidebar .userbox .out { margin-left:auto; color:var(--text-subtle); background:transparent; border:0; padding:7px; border-radius:8px; cursor:pointer; } .sidebar .userbox .out:hover { color:var(--text-strong); background:var(--surface-50); } .sidebar .userbox .out:focus-visible { outline:none; box-shadow:var(--shadow-focus,0 0 0 3px rgba(5,5,5,.14)); } /* ── Sidebar auto-rail (desktop): ciutkan jadi rail ikon, auto-perluas saat hover ── */ .sb-rail-toggle { margin-left:auto; flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; color:var(--text-subtle); background:transparent; border:1px solid transparent; border-radius:8px; cursor:pointer; transition:background .14s ease,color .14s ease; } .sb-rail-toggle:hover { color:var(--text-strong); background:var(--surface-50); } .sb-rail-toggle:focus-visible { outline:none; box-shadow:var(--shadow-focus,0 0 0 3px rgba(5,5,5,.14)); } @media (min-width:861px) { .admin-shell.is-rail { grid-template-columns:68px minmax(0,1fr); } .admin-shell.is-rail .sidebar { width:68px; z-index:40; transition:width .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease; } .admin-shell.is-rail .sidebar:hover, .admin-shell.is-rail .sidebar:focus-within { width:248px; box-shadow:var(--shadow-pop); } /* Sembunyikan teks/label saat rail tertutup → ikon di tengah */ .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .nav a span, .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .nav-external span, .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .nav-label, .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .userbox .who, .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .logo .wordmark, .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .logo .logo-img { display:none; } .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .nav a { justify-content:center; padding-inline:0; } .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .userbox { justify-content:center; padding-inline:0; } .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .userbox .out { display:none; } .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .logo { justify-content:center; padding-inline:0; } .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .sb-rail-toggle { margin-inline:0; } } .main { min-width:0; display:flex; flex-direction:column; } .admin-top { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 28px; background:rgba(255,255,255,.96); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line-200); position:sticky; top:0; z-index:20; } .admin-top__title { display:flex; align-items:baseline; gap:10px; min-width:0; } .admin-top__eyebrow { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; color:var(--text-subtle); } .admin-top h1 { font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.01em; } .admin-top .crumb { font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); letter-spacing:.04em; } /* Hanya tombol netral yang di-flatten ke surface topbar. Varian solid (dark/danger) dikecualikan: selector ini lebih spesifik dari .abtn--dark dan dulu menimpa background-nya saja — teks tetap putih → tombol putih di atas putih. */ .admin-top__tools .abtn:not(.abtn--dark):not(.abtn--danger) { background:var(--surface-0); border-color:var(--border-input); } /* Isi penuh kolom .main (hilangkan ruang kosong kanan); cap besar hanya untuk layar ultra-wide. Header (.admin-top) juga selebar .main, jadi tepi kanan konten & tombol header sejajar. */ /* --content-pad diekspos supaya elemen full-bleed (mis. .bk-datebar sticky) bisa menghitung margin negatifnya tanpa menebak angka padding. */ .content { --content-pad:28px; padding:28px var(--content-pad) 64px; max-width:1440px; width:100%; margin:0 auto; } /* mobile bottom nav */ .mnav { display: none; } @media (max-width: 860px) { .admin-shell { grid-template-columns: 1fr; } .sidebar { display: none; } .content { --content-pad:16px; padding: 18px var(--content-pad) 108px; } /* Header boleh membungkus: judul + tombol aksi tak lagi meluber keluar layar. Crumb (subjudul) disembunyikan di mobile untuk menghemat ruang. */ .admin-top { padding: 9px 16px; height: auto; min-height: 54px; flex-wrap: wrap; row-gap: 8px; align-items: center; } .admin-top > div:first-child { min-width: 0; } .admin-top h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-top .between { flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; } .admin-top .crumb { display: none; } .mnav { --mnav-pad-x: 10px; display: flex; gap: 6px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: rgba(255,255,255,.96); backdrop-filter: saturate(160%) blur(14px); border-top: 1px solid var(--line); padding: 8px var(--mnav-pad-x) calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 22px rgba(10,10,10,.06); } .mnav::-webkit-scrollbar { display: none; } .mnav::before, .mnav::after { content:''; flex: 0 0 max(0px, calc(env(safe-area-inset-left) - var(--mnav-pad-x))); } .mnav::after { flex-basis: max(0px, calc(env(safe-area-inset-right) - var(--mnav-pad-x))); } .mnav a { flex: 0 0 66px; min-width: 66px; min-height: 56px; scroll-snap-align: center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:7px 4px 6px; border-radius: 8px; color: var(--muted); font-size:10.5px; line-height:1.12; font-weight:650; text-align:center; transition: background .14s, color .14s, transform .14s; } .mnav a svg { width: 21px; height: 21px; flex:none; } .mnav a span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mnav a:active { transform: translateY(1px); } .mnav a.active { color: var(--ink); background: var(--paper-warm2); box-shadow: inset 0 0 0 1px var(--line-soft); } } @media (max-width: 360px) { .mnav a { flex-basis: 60px; min-width: 60px; font-size: 10px; } } /* ---------- Stat cards ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; } @media (max-width: 860px) { .stat-grid { grid-template-columns: 1fr 1fr; } } /* Kartu boleh menyusut; nominal tak boleh dipecah di tengah angka. Layar sempit pakai kolom lebih sedikit (lihat .kpi6 di bawah) agar nominal Rp besar tetap muat 1 baris. */ .stat-grid > * { min-width: 0; } .stat .num { white-space: nowrap; } @media (max-width: 560px) { .stat .num { font-size: 22px; } } .stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow-card); } .stat .lbl { font-size: 11px; color: var(--muted); font-weight: 600; display:flex; align-items:center; gap:6px; } .stat .lbl svg { width: 14px; height: 14px; } .stat .num { font-family: var(--font-mono); font-size: 28px; font-weight: 600; letter-spacing: 0; margin-top: 8px; line-height: 1; } .stat .sub { font-size: 11px; color: var(--graphite); margin-top: 6px; } .stat.accent { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); } .stat.accent .lbl, .stat.accent .sub { color: var(--text-on-dark-muted); } /* ---------- Section / card ---------- */ .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 20px; } .panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); } .panel-head h2 { font-size: 14.5px; font-weight: 700; } .panel-head .meta { font-size: 12px; color: var(--muted); } .panel-body { padding: 16px; } .panel-body.flush { padding: 0; } .section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--graphite); margin: 6px 0 12px; } /* ---------- Table ---------- */ .tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--paper-warm); white-space: nowrap; } .tbl td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; } .tbl tr:last-child td { border-bottom: 0; } .tbl tr.clickable { cursor: pointer; transition: background .12s; } .tbl tr.clickable:hover td { background: var(--paper-warm); } .tbl .sid { font-family: var(--font-mono); font-size: 11.5px; color: var(--graphite); } .tbl .nm { font-weight: 620; } .tbl .sub { font-size: 11.5px; color: var(--muted); } .tbl .select-col, .select-col { width: 38px; text-align: center; } .tbl input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ink); } .sort-th { display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; padding:0; } .sort-th:hover { color: var(--ink); } .sort-arrow { font-size: 9px; color: var(--ink); } .db-size { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); } .db-size select { padding: 8px 28px 8px 10px; border:1px solid var(--line); border-radius: var(--r-sm); background:var(--paper); font-size:13px; } .db-pager { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding: 10px 14px; color:var(--muted); font-size:12px; } .db-page, .db-range { font-family: var(--font-mono); } .db-bulk { display:none; align-items:center; gap:8px; flex-wrap:wrap; margin: 0 0 14px; padding:10px; border:1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); } .db-bulk.show { display:flex; } .db-selected-count { font-family: var(--font-mono); font-size:12px; color:var(--graphite); margin-right:auto; } .db-bulk select { padding:7px 28px 7px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); } .cat-tag { display:inline-flex; align-items:center; max-width:100%; padding:3px 8px; border-radius:999px; background:var(--vf-bg); color:var(--vf-ink); font-size:11px; font-weight:700; line-height:1.2; } .card-check { position:absolute; z-index:5; margin:8px; display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--ink); background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:6px; padding:4px 7px; box-shadow: var(--shadow-1); } .card-check input { accent-color: var(--ink); } /* responsive table -> cards */ @media (max-width: 720px) { .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; } .tbl thead { display: none; } .tbl tr { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 10px; padding: 6px; } /* AUDIT Finance 2026-08-11 (D-17) + aturan owner "baris komposit = grid": flex tanpa wrap membuat teks + subline berjejer horizontal dan mendorong isi sel rata kanan tanpa keterangan. Dua track: label (auto) | nilai (minmax(0,1fr)). Anak elemen berikutnya (mis. .sub) TURUN ke baris berikutnya di kolom nilai. */ .tbl td { border: 0; padding: 6px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; text-align: right; } .tbl td::before { content: attr(data-l); grid-column: 1; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing:.06em; color: var(--muted); font-weight: 650; } .tbl td > * { grid-column: 2; } .tbl td.no-l { grid-template-columns: minmax(0, 1fr); text-align: left; } .tbl td.no-l::before { content: none; } .tbl td.no-l > * { grid-column: 1; } } /* ---------- Status badge ---------- Anatomi = Fresh Tag System (unit GUI/07/TAGS-TONES, reproduksi app `.vs-tag`): pill hairline, min-height 26px, 11px/650 body, dot 6px. Tone memakai alias kanonik --tag-* (bukan ramp mentah --pst-*). */ .badge-st { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; font: 650 11px/1.2 var(--font-body); padding: 3px 10px; border-radius: var(--radius-pill,100px); border: 1px solid transparent; white-space: nowrap; } .badge-st::before { content:''; width: 6px; height: 6px; flex:0 0 auto; border-radius: var(--radius-pill,100px); background: currentColor; } /* Peta warna status (2026-07-22) — lihat catatan di app.css § status chip aliases. Merah disimpan HANYA untuk cancelled; window bayar habis pakai abu (mati, bukan alarm). */ .st-new { color: var(--tag-success-text); background:var(--tag-success-bg); border-color:var(--tag-success-border); } .st-reviewing { color: var(--tag-purple-text); background:var(--tag-purple-bg); border-color:var(--tag-purple-border); } .st-contacted { color: var(--tag-info-text); background:var(--tag-info-bg); border-color:var(--tag-info-border); } .st-tentative, .st-pending_payment { color: var(--tag-warning-text); background:var(--tag-warning-bg); border-color:var(--tag-warning-border); } .st-partially_paid, .st-rescheduled { color: var(--tag-orange-text); background:var(--tag-orange-bg); border-color:var(--tag-orange-border); } .st-paid { color: var(--tag-mint-text); background:var(--tag-mint-bg); border-color:var(--tag-mint-border); } .st-confirmed { color: var(--tag-blue-text); background:var(--tag-blue-bg); border-color:var(--tag-blue-border); } .st-cancelled { color: var(--tag-danger-text); background:var(--tag-danger-bg); border-color:var(--tag-danger-border); } .st-payment_expired, .st-completed { color: var(--tag-neutral-text); background:var(--tag-neutral-bg); border-color:var(--tag-neutral-border); } /* ---------- Filters ---------- */ .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; align-items: center; } .search-box { position: relative; flex: 1; min-width: 200px; } .search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); } .search-box input { width: 100%; padding: 9px 12px 9px 36px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-size: 14px; outline: none; } .search-box input:focus { border-color: var(--ink); } .filters select { padding: 9px 32px 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-size: 13.5px; appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8C86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 11px center; } .status-strip { display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; margin:-6px 0 14px; } .status-chip { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:100px; background:var(--paper); cursor:pointer; white-space:nowrap; } .status-chip b { font-family:var(--font-mono); font-size:11px; color:var(--muted); } .status-chip.active { border-color:var(--ink); box-shadow:var(--shadow-1); } .booking-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; padding:14px; } .booking-card { border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); padding:13px; cursor:pointer; transition:border-color .14s, box-shadow .14s, transform .12s; } .booking-card:hover { border-color:var(--ink); box-shadow:var(--shadow-1); transform:translateY(-1px); } .booking-card-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; } .booking-card .sid { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); } .booking-card .nm { font-size:14px; font-weight:700; margin-top:3px; } .booking-card-body { display:grid; gap:7px; margin-top:12px; color:var(--graphite); font-size:12px; } .booking-card-body div { display:flex; align-items:center; gap:7px; } .booking-board { display:flex; gap:14px; overflow-x:auto; padding:14px; } .booking-col { flex:none; width:260px; background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .booking-detail-split { display:grid; grid-template-columns:340px 1fr; gap:16px; padding:14px; } .booking-actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; } @media (max-width:760px){ .booking-detail-split { grid-template-columns:1fr; } } /* admin buttons (compact) */ .abtn { display:inline-flex; align-items:center; gap:7px; padding: 9px 14px; font-size: 13px; font-weight: 620; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); cursor:pointer; transition: background .14s, border-color .14s; white-space: nowrap; } .abtn svg { width: 16px; height: 16px; } .abtn:hover { background: var(--paper-warm); } .abtn--dark { background: var(--ink); color:#fff; border-color: var(--ink); } .abtn--dark:hover { opacity:.92; background: var(--ink); } .abtn--sm { padding: 6px 10px; font-size: 12px; } .abtn:disabled { opacity:.5; cursor: not-allowed; } /* AUDIT Finance 2026-08-11 (D-15) — modifier yang dipakai 76×/1× di admin.js tetapi TIDAK PERNAH punya aturan, sehingga "xs" justru render lebih besar daripada "sm". Didefinisikan di blok primitive (bukan ditambal per-modul). Tangga tinggi terukur: xs < sm < base. `.abtn--sm` sengaja TIDAK diubah — menaikkannya menyentuh 182 pemakaian di luar scope brief; target sentuh 44px ditegakkan per-container di FIN-V2. */ .abtn--xs { padding: 3px 8px; font-size: 11.5px; gap: 5px; } .abtn--xs svg { width: 13px; height: 13px; } .abtn--light { background: var(--paper); color: var(--ink); border-color: var(--line); } .abtn--light:hover { background: var(--paper-warm); } /* `.icon-btn` hanya punya aturan kontekstual (modal-head, schedule-layer, sg-table); tanpa aturan dasar, tombol tutup 5 modal Finance render sebagai tombol default browser. */ .icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); cursor:pointer; transition: background .14s, border-color .14s; } .icon-btn:hover { background: var(--paper-warm); } .icon-btn svg { width:16px; height:16px; } /* ---------- Detail drawer ---------- */ .drawer-back { position: fixed; inset: 0; background: rgba(10,10,10,.4); z-index: 60; animation: fade .2s var(--ease); } .drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(460px, 100%); background: var(--paper); z-index: 61; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: slidein .26s var(--ease); } @keyframes slidein { from { transform: translateX(100%); } to { transform: none; } } .drawer-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .drawer-head .sid { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .drawer-head .ttl { font-size: 18px; font-weight: 760; margin-top: 4px; } .drawer-head .x { background:transparent; border:0; color: var(--muted); padding:6px; border-radius:6px; cursor:pointer; } .drawer-head .x:hover { background: var(--paper-warm); color: var(--ink); } .drawer-body { overflow-y: auto; padding: 18px 20px; flex: 1; } .drawer-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display:flex; gap:10px; } .kv { display:flex; gap:12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .kv:last-child { border-bottom: 0; } .kv .k { flex:none; width: 40%; font-size: 12px; color: var(--muted); } .kv .v { flex:1; font-size: 13px; font-weight: 520; word-break: break-word; } .dgroup-label { font-family: var(--font-mono); font-size: 10px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); margin: 18px 0 6px; } .pill-list { display:flex; flex-wrap:wrap; gap:6px; } .pill-list .pill { font-size:12px; padding:4px 10px; border:1px solid var(--line); border-radius:100px; background: var(--paper-warm); } .wa-preview { font-family: var(--font-mono); font-size: 11.5px; line-height:1.6; white-space: pre-wrap; word-break: break-word; background: var(--paper-warm); border:1px solid var(--line); border-radius: var(--r-sm); padding: 12px; color: var(--ink-soft); max-height: 220px; overflow:auto; } .note-area { width:100%; min-height: 70px; border:1px solid var(--line); border-radius: var(--r-sm); padding:10px 12px; font-size:13px; resize:vertical; outline:none; font-family: var(--font-sans); } .note-area:focus { border-color: var(--ink); } .status-select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius: var(--r-sm); font-size:14px; font-weight:600; appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8C86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 12px center; } /* ---------- Pages management ---------- */ .page-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .page-cards { grid-template-columns: 1fr; } } .page-card { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); } .page-card .pc-cover { height: 86px; background: var(--paper-warm2); position: relative; display:grid; place-items:center; overflow:hidden; } .page-card .pc-cover .ph { font-family: var(--font-mono); font-size: 10px; letter-spacing:.14em; color: var(--muted); text-transform:uppercase; } .page-card .pc-cover.visual-fallback { background:var(--vf-bg); } .page-card .pc-cover .vf-label { max-width:76%; color:var(--vf-ink); } .page-card .pc-cover .swatch { position:absolute; top:10px; left:10px; width:18px; height:18px; border-radius:5px; border:2px solid #fff; box-shadow: var(--shadow-1); z-index:2; } .page-card .pc-order { position:absolute; top:8px; right:8px; z-index:3; display:flex; align-items:center; gap:4px; } .page-card .pc-order .pc-pos { font-family: var(--font-mono); font-size:10.5px; font-weight:700; color:#fff; background:rgba(0,0,0,.45); border-radius:5px; padding:2px 6px; backdrop-filter:saturate(140%) blur(2px); } .page-card .pc-order .pc-move { width:24px; height:24px; display:grid; place-items:center; border:none; border-radius:6px; background:rgba(255,255,255,.92); color:var(--ink); cursor:pointer; box-shadow: var(--shadow-1); } .page-card .pc-order .pc-move:hover:not(:disabled) { background:#fff; } .page-card .pc-order .pc-move:disabled { opacity:.35; cursor:default; } .page-card .pc-body { padding: 13px 14px; } .page-card .pc-body .nm { font-size: 14.5px; font-weight: 700; } .page-card .pc-body .slug { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; } .page-card .pc-body .ds { font-size: 12px; color: var(--graphite); margin-top: 8px; line-height: 1.45; } .public-link { margin-top: 10px; display:flex; align-items:center; gap:8px; min-width:0; } .public-link .mono { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--graphite); font-size:10.5px; } .link-copy { flex:none; border:1px solid var(--line); background:var(--paper); color:var(--graphite); border-radius:6px; width:26px; height:26px; display:grid; place-items:center; cursor:pointer; } .link-copy:hover { color:var(--ink); border-color:var(--ink); } .page-card .pc-foot { display:flex; align-items:center; justify-content:space-between; padding: 11px 14px; border-top: 1px solid var(--line-soft); } .page-card .pc-foot .cnt { font-size: 11.5px; color: var(--muted); } .dot-on { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color: var(--ok); } .dot-on::before { content:''; width:7px; height:7px; border-radius:50%; background: var(--ok); } .dot-off { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color: var(--muted); } .dot-off::before { content:''; width:7px; height:7px; border-radius:50%; background: var(--muted); } /* mini bar chart for "by page" */ .bars { display:flex; flex-direction:column; gap:10px; } .bar-row { display:flex; align-items:center; gap:12px; } .bar-row .bl { flex:none; width: 150px; font-size: 12.5px; font-weight: 550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bar-row .bt { flex:1; height: 8px; background: var(--paper-warm2); border-radius: 100px; overflow:hidden; } .bar-row .bt i { display:block; height:100%; background: var(--ink); border-radius: 100px; } .bar-row .bn { flex:none; width: 30px; text-align:right; font-family: var(--font-mono); font-size: 12px; font-weight: 600; } .empty-row td { text-align:center; color: var(--muted); padding: 40px 14px; font-size: 13px; } /* ---------- CRM / Customer Management ---------- */ .crm-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .crm-subnav a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--graphite); font-size: 13px; font-weight: 650; } .crm-subnav a svg { width: 15px; height: 15px; } .crm-subnav a:hover { border-color: var(--ink-soft); color: var(--ink); } .crm-subnav a.active { background: var(--ink); border-color: var(--ink); color: #fff; } .crm-subnav b { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper-warm2); color: var(--graphite); font-family: var(--font-mono); font-size: 11px; line-height: 1; font-weight: 700; } .crm-subnav a.active b { background: rgba(255,255,255,.18); color: #fff; } .stat-grid.crm-kpi { grid-template-columns: repeat(6, 1fr); } @media (max-width: 1100px){ .stat-grid.crm-kpi { grid-template-columns: repeat(3,1fr); } } @media (max-width: 640px){ .stat-grid.crm-kpi { grid-template-columns: repeat(2,1fr); } } /* KPI CRM = tombol filter: paritas hover a.stat + status aktif terlihat jelas. */ .stat--btn { cursor:pointer; text-decoration:none; color:inherit; display:block; transition: border-color .14s, box-shadow .14s, transform .12s; } .stat--btn:hover { border-color: var(--ink); box-shadow: var(--shadow-1); transform: translateY(-1px); } .stat--btn.is-active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; } .stat--btn.accent.is-active { box-shadow: 0 0 0 2px rgba(255,255,255,.55) inset; } /* Filter chip-select di bar .filters: field kompak sejajar kontrol lain. */ .filters .chipsel { min-width: 150px; } .filters .chipsel.chip-field { min-height: 36px; padding: 3px 6px; } .crm-type { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:100px; font-size:11.5px; font-weight:650; white-space:nowrap; border:1px solid transparent; } .crm-regular { color:var(--pst-blue-text); background:var(--pst-blue-bg); border:1px solid var(--pst-blue-border); } .crm-brand { color:var(--pst-warning-text); background:var(--pst-warning-bg); border:1px solid var(--pst-warning-border); } .crm-vendor { color:var(--pst-success-text); background:var(--pst-success-bg); border:1px solid var(--pst-success-border); } .crm-internal { color:var(--pst-neutral-text); background:var(--pst-neutral-bg); border:1px solid var(--pst-neutral-border); } .crm-blocked { color:var(--pst-danger-text); background:var(--pst-danger-bg); border:1px solid var(--pst-danger-border); } .crm-tags { display:flex; flex-wrap:wrap; gap:5px; } .crm-tag { display:inline-flex; align-items:center; padding:3px 7px; border-radius:6px; font-family:var(--font-mono); font-size:10.5px; background:var(--paper-warm2); color:var(--graphite); border:1px solid var(--line-soft); } .crm-drawer { width:clamp(24rem,58vw,51.25rem); max-width:100%; } .crm-drawer .drawer-body { background:var(--paper-warm2); } .crm-profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:760px){ .crm-profile-grid { grid-template-columns:1fr; } } .crm-score { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .crm-score div { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-warm); padding:9px 10px; min-width:0; } .crm-score span { display:block; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; } .crm-score b { display:block; margin-top:3px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:520px){ .crm-score { grid-template-columns:1fr; } } .crm-mini-row { display:grid; grid-template-columns: 1fr auto auto auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line-soft); font-size:12.5px; } .crm-mini-row:last-child { border-bottom:0; } .crm-mini-row a { font-size:12px; font-weight:650; color:var(--ink); } @media (max-width:560px){ .crm-mini-row { grid-template-columns:1fr; gap:3px; } } .crm-stack { display:flex; flex-direction:column; gap:8px; } .crm-note, .crm-ledger, .crm-voucher, .crm-contact { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); padding:10px 11px; display:flex; flex-direction:column; gap:3px; font-size:12.5px; } .crm-note b, .crm-ledger b, .crm-voucher b, .crm-contact b { font-size:12.5px; } .crm-note small, .crm-ledger small { color:var(--muted); font-size:11px; } .crm-ledger b.pos { color:var(--ok); } .crm-ledger b.neg { color:var(--danger); } .crm-voucher { display:grid; grid-template-columns:1fr auto; gap:3px 10px; } .crm-voucher span { color:var(--graphite); } .crm-voucher em, .crm-contact em { font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); } .crm-contact span { color:var(--graphite); } .crm-foot { flex-wrap:wrap; } .crm-foot .abtn { flex:none; } /* inline note saved flash */ .saved-flash { font-size: 11.5px; color: var(--ok); font-weight:600; opacity:0; transition: opacity .2s; } .saved-flash.show { opacity:1; } /* ============================================================ EDITOR (create / customize booking page) + SETTINGS ============================================================ */ .ed-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; } .ed-head .back { font-size:13px; } /* sub-tabs inside editor — segmented pill bar (scrollable, tak membungkus) */ .ed-tabs { display:flex; gap:3px; flex-wrap:nowrap; overflow-x:auto; margin-bottom:22px; padding:4px; background:var(--paper-warm); border:1px solid var(--line); border-radius:12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .ed-tabs::-webkit-scrollbar { display:none; } .ed-tab { flex:0 0 auto; padding:9px 14px; font-size:13px; font-weight:600; color:var(--graphite); background:transparent; border:0; border-radius:9px; cursor:pointer; transition:background .16s, color .16s, box-shadow .16s; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; } .ed-tab svg { width:15px; height:15px; opacity:.85; } .ed-tab:hover { color:var(--ink); background:rgba(255,255,255,.6); } .ed-tab.active { color:var(--ink); background:var(--paper); box-shadow:0 1px 2px rgba(16,18,22,.10), inset 0 0 0 1px var(--line); } .ed-tab.active svg { opacity:1; } /* form layout */ .fgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:720px){ .fgrid { grid-template-columns:1fr; } } .fcol { display:flex; flex-direction:column; } .frow { margin-bottom:16px; } .frow > label, .flabel { display:block; font-size:12.5px; font-weight:620; margin-bottom:7px; color:var(--ink); } .frow .fhint { font-size:11px; color:var(--muted); margin-top:6px; line-height:1.45; } .ctrl { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); font-size:14px; color:var(--ink); outline:none; transition:border-color .14s, box-shadow .14s; font-family:var(--font-sans); } .ctrl:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(10,10,10,.05); } textarea.ctrl { resize:vertical; min-height:70px; line-height:1.5; } .ctrl.mono { font-family:var(--font-mono); font-size:12.5px; } select.ctrl { appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8C86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; } .input-prefix { display:flex; } .input-prefix .pf { display:flex; align-items:center; padding:0 11px; background:var(--paper-warm2); border:1px solid var(--line); border-right:0; border-radius:var(--r-sm) 0 0 var(--r-sm); font-family:var(--font-mono); font-size:13px; color:var(--graphite); } .input-prefix .ctrl { border-radius:0 var(--r-sm) var(--r-sm) 0; } /* toggle switch */ .switch-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; } .switch-row .sl { font-size:13.5px; font-weight:560; } .switch-row .sl small { display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin-top:2px; } .switch { position:relative; width:42px; height:24px; flex:none; } .switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; } .switch .track { position:absolute; inset:0; background:var(--line); border-radius:100px; transition:background .16s; } .switch .track::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--shadow-1); transition:transform .16s; } .switch input:checked + .track { background:var(--ink); } .switch input:checked + .track::after { transform:translateX(18px); } /* color picker row */ .color-row { display:flex; align-items:center; gap:10px; } .color-row input[type=color] { width:42px; height:42px; padding:0; border:1px solid var(--line); border-radius:var(--r-sm); background:none; cursor:pointer; } .color-row .ctrl { flex:1; } .accent-swatches { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; } .accent-swatch { width:24px; height:24px; border:1px solid rgba(10,10,10,.18); border-radius:7px; padding:0; cursor:pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } .accent-swatch.active { outline:2px solid var(--ink); outline-offset:2px; } .copy-row { display:flex; gap:8px; align-items:center; } .copy-row .ctrl { min-width:0; } .img-upload { display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:stretch; } .img-preview { min-height:104px; border:1px dashed var(--line); border-radius:var(--r-sm); background:var(--paper-warm2) center/cover no-repeat; display:grid; place-items:center; color:var(--muted); overflow:hidden; } .img-preview.has { border-style:solid; } .img-preview.visual-fallback { border-style:solid; background:var(--vf-bg); } .img-preview.visual-fallback .vf-label { color:var(--vf-ink); font-size:10px; } .img-upload-actions { display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; align-items:center; } .img-upload-actions .fhint { width:100%; margin-top:2px; } @media (max-width:560px){ .img-upload { grid-template-columns:1fr; } .img-preview { aspect-ratio:16/9; } } /* repeatable rows (categories / items / fields) */ .repeat { display:flex; flex-direction:column; gap:10px; } .rrow { border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); overflow:hidden; } .rrow-head { display:flex; align-items:center; gap:10px; padding:12px 14px; } .rrow-head.toggle-open { cursor:pointer; } .rrow-head .grip { color:var(--muted); display:flex; flex-direction:column; gap:2px; } .rrow-head .grip button { background:transparent; border:0; color:var(--muted); cursor:pointer; padding:0; line-height:0; } .rrow-head .grip button:hover { color:var(--ink); } .rrow-head .grip button:disabled { opacity:.28; cursor:not-allowed; } .rrow-head .grip button:disabled:hover { color:var(--muted); } .rrow-head .grip svg { width:14px; height:14px; } .rrow-head .rtitle { font-size:13.5px; font-weight:650; flex:1; min-width:0; } .rrow-head .rtitle small { font-family:var(--font-mono); font-size:11px; color:var(--muted); font-weight:400; display:block; margin-top:2px; } .rrow-head .rmeta { font-size:11.5px; color:var(--muted); white-space:nowrap; } .rrow-head .rdel { background:transparent; border:0; color:var(--muted); padding:6px; border-radius:6px; cursor:pointer; } .rrow-head .rdel:hover { color:var(--danger); background:var(--danger-bg); } .rrow-head .chev { color:var(--muted); transition:transform .18s; } .rrow.open .rrow-head .chev { transform:rotate(180deg); } .rrow-body { padding:0 14px; max-height:0; overflow:hidden; transition:max-height .25s var(--ease), padding .2s; border-top:0 solid var(--line-soft); } .rrow.open .rrow-body { max-height:1400px; padding:14px; border-top:1px solid var(--line-soft); } .add-row { display:inline-flex; align-items:center; gap:7px; padding:11px 14px; border:1px dashed var(--line); border-radius:var(--r-sm); background:var(--paper-warm); color:var(--graphite); font-size:13px; font-weight:600; cursor:pointer; width:100%; justify-content:center; transition:border-color .14s, color .14s; } .add-row:hover { border-color:var(--ink); color:var(--ink); } .add-row svg { width:16px; height:16px; } /* options tag list */ .opt-list { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; } .opt-tag { display:inline-flex; align-items:center; gap:6px; padding:5px 8px 5px 11px; border:1px solid var(--line); border-radius:100px; font-size:12.5px; background:var(--paper-warm); } .opt-tag button { background:transparent; border:0; color:var(--muted); cursor:pointer; padding:0; display:flex; } .opt-tag button:hover { color:var(--danger); } .opt-tag svg { width:13px; height:13px; } /* ===== WhatsApp template editor (advanced) ===== */ .wa-template-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:20px; align-items:start; } /* Editor shell: toolbar + textarea + footer sebagai satu kartu */ .wa-editor { border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); overflow:hidden; box-shadow:var(--shadow-xs,0 1px 2px rgba(16,18,22,.04)); } .wa-editor:focus-within { border-color:var(--ink); box-shadow:0 0 0 3px var(--identity-yellow-shadow,rgba(255,247,0,.28)); } .wa-toolbar { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line-soft); background:var(--paper-warm); } .wa-toolbar .grow { flex:1; } .wa-tool-grp { display:flex; gap:3px; } .wa-tool-sep { width:1px; align-self:stretch; margin:2px 2px; background:var(--line); } .wa-tool { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--graphite); cursor:pointer; transition:background .14s,color .14s,border-color .14s; padding:0; } .wa-tool:hover { background:#fff; color:var(--ink); border-color:var(--line); } .wa-tool:active { transform:translateY(.5px); } .wa-tool svg { width:15px; height:15px; } .wa-tool--ghost { color:var(--muted); } .wa-tool-g { font-size:13.5px; font-weight:800; line-height:1; } .wa-tool-g.is-i { font-style:italic; font-family:var(--font-serif,Georgia,serif); } .wa-tool-g.is-s { text-decoration:line-through; } .wa-input { display:block; width:100%; border:0; outline:none; resize:vertical; padding:14px 14px; font-size:12.5px; line-height:1.7; min-height:300px; background:var(--paper); color:var(--ink); } .wa-input::placeholder { color:var(--muted); } .wa-editor-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-top:1px solid var(--line-soft); background:var(--paper-warm); } .wa-syntax { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:11px; color:var(--muted); } .wa-syntax b, .wa-syntax i, .wa-syntax s { color:var(--graphite); font-family:var(--font-mono); font-size:10.5px; } .wa-syntax code { font-family:var(--font-mono); font-size:10.5px; color:var(--graphite); } .wa-count { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); white-space:nowrap; } /* placeholder chips for WA template */ .ph-panel { margin-top:16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); padding:14px 16px; } .ph-panel-head { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink); } .ph-panel-head svg { width:14px; height:14px; color:var(--graphite); } .ph-panel-head small { margin-left:auto; font-weight:500; font-size:11px; color:var(--muted); } .ph-section { margin:14px 0 0; } .ph-sub { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } .ph-chips { display:flex; flex-wrap:wrap; gap:6px; } .ph-chip { display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; padding:5px 11px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-warm); color:var(--graphite); cursor:pointer; transition:all .14s; } .ph-chip:hover { border-color:var(--ink); color:var(--ink); background:#fff; transform:translateY(-1px); } .ph-chip--field { background:#fff; } .ph-chip .ph-lb { font-size:11.5px; font-weight:600; color:var(--ink); line-height:1.2; } .ph-chip .ph-tk { font-family:var(--font-mono); font-size:10px; color:var(--muted); line-height:1.2; } .ph-chip:hover .ph-tk { color:var(--graphite); } /* WhatsApp phone preview */ .wa-preview-panel { position:sticky; top:80px; } .wa-phone { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#0b141a; box-shadow:0 8px 30px rgba(16,18,22,.10); } .wa-phone-bar { display:flex; align-items:center; gap:8px; padding:11px 14px; background:#1f2c34; color:#e9edef; font-size:12px; font-weight:600; } .wa-phone-bar svg { width:15px; height:15px; color:#25d366; } .wa-phone-screen { padding:16px 14px 22px; min-height:300px; max-height:560px; overflow:auto; background-color:#0b141a; background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size:18px 18px; } .wa-bubble { position:relative; max-width:88%; margin-left:auto; background:#005c4b; color:#e9edef; font-family:var(--font-sans); font-size:13px; line-height:1.55; padding:9px 12px 8px; border-radius:12px 12px 4px 12px; white-space:pre-wrap; word-break:break-word; box-shadow:0 1px 1px rgba(0,0,0,.18); } .wa-bubble b { font-weight:700; } .wa-bubble i { font-style:italic; } .wa-bubble s { text-decoration:line-through; } .wa-bubble .wa-mono { font-family:var(--font-mono); font-size:12px; background:rgba(0,0,0,.22); padding:1px 4px; border-radius:4px; } .wa-bubble .wa-quote { display:block; border-left:3px solid #25d366; padding-left:9px; margin:2px 0; color:#cfe9df; } .wa-bubble .wa-li { display:block; padding-left:2px; } .wa-bubble .wa-li .wa-mk { display:inline-block; min-width:1.2em; color:#9fe3c5; font-style:normal; } @media (max-width:880px){ .wa-template-grid { grid-template-columns:1fr; } .wa-preview-panel { position:static; } } /* category group label inside item list */ .item-group-label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:16px 0 8px; display:flex; align-items:center; gap:8px; } .item-group-label::after { content:''; flex:1; height:1px; background:var(--line-soft); } /* sticky save bar */ .save-bar { position:sticky; bottom:0; margin:24px -24px -60px; padding:14px 24px calc(14px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; z-index:10; } @media (max-width:860px){ /* Bungkus tombol save-bar agar label panjang (mis. "Reset ke Design System") tak meluber di mobile. */ .save-bar { margin:24px -16px 0; bottom:72px; flex-wrap:wrap; justify-content:flex-end; row-gap:8px; } .save-bar .grow { display:none; } } .save-bar .grow { flex:1; } .ed-info-banner { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-warm); font-size:12.5px; color:var(--graphite); line-height:1.5; margin-bottom:18px; } .ed-info-banner svg { width:17px; height:17px; flex:none; margin-top:1px; color:var(--graphite); } .field-toolrow { display:flex; justify-content:flex-end; gap:8px; margin:-6px 0 12px; } .content-organizer { display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 18px; } .content-organizer span { border:1px solid var(--line); background:#fff; border-radius:7px; padding:7px 10px; font-size:11.5px; font-weight:650; color:var(--graphite); } /* ---------- Bypass / mode pemrosesan (Page Editor → tab Halaman) ---------- */ .bypass-seg { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } @media (max-width:640px){ .bypass-seg { grid-template-columns:1fr; } } .bypass-opt { display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); color:var(--graphite); transition:border-color .14s, background .14s, box-shadow .14s; } .bypass-opt:hover { border-color:var(--ink-400); } .bypass-opt .bo-ic { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:8px; background:var(--paper-warm); color:var(--graphite); } .bypass-opt .bo-ic svg { width:16px; height:16px; } .bypass-opt .bo-tx { display:flex; flex-direction:column; min-width:0; line-height:1.25; } .bypass-opt .bo-tx b { font-size:13px; font-weight:680; color:var(--ink); white-space:nowrap; } .bypass-opt .bo-tx small { font-size:10.5px; font-family:var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .bypass-opt.active { border-color:var(--ink); background:#fff; box-shadow:inset 0 0 0 1px var(--ink); } .bypass-opt.active .bo-ic { background:var(--ink); color:#fff; } .bypass-note { display:flex; align-items:flex-start; gap:9px; margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-warm); font-size:12px; line-height:1.5; color:var(--graphite); } .bypass-note svg { width:16px; height:16px; flex:none; margin-top:1px; } .bypass-note.is-schedule { background:var(--pst-info-bg); border-color:var(--pst-info-border); color:var(--pst-info-text); } .bypass-note.is-forward { background:var(--pst-warning-bg); border-color:var(--pst-warning-border); color:var(--pst-warning-text); } .bypass-note b { font-weight:700; } /* Chip mode bypass di kartu Booking Page */ .page-card .pc-mode { position:absolute; left:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:var(--r-pill, 100px); font-size:10px; font-weight:700; letter-spacing:.02em; line-height:1; white-space:nowrap; box-shadow:var(--shadow-1); backdrop-filter:saturate(140%) blur(2px); } .page-card .pc-mode svg { width:11px; height:11px; } .page-card .pc-mode.mode-schedule { background:var(--pst-info-bg); color:var(--pst-info-text); border:1px solid var(--pst-info-border); } .page-card .pc-mode.mode-forward { background:var(--pst-warning-bg); color:var(--pst-warning-text); border:1px solid var(--pst-warning-border); } .flow-toolbar { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin:-6px 0 14px; } .flow-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } @media (max-width:760px){ .flow-grid { grid-template-columns:1fr; } } .flow-card { border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); overflow:hidden; } .flow-card-head { display:flex; justify-content:space-between; gap:12px; padding:14px; border-bottom:1px solid var(--line-soft); } .flow-card-head h3 { font-size:14px; font-weight:720; } .flow-card-head p { font-size:12px; color:var(--muted); line-height:1.45; margin-top:4px; } .flow-count { width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-mono); font-size:12px; flex:none; } .flow-list { display:grid; gap:8px; padding:12px 14px; } .flow-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--paper-warm); } .flow-item span { font-size:12.5px; font-weight:620; } .flow-item small { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); } .flow-toggle { padding:0 14px 14px; } .flow-step-list { display:grid; gap:12px; } .flow-step-card { border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); overflow:hidden; } .flow-step-head { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line-soft); } .flow-step-head .grip { display:flex; flex-direction:column; gap:2px; } .flow-step-head .grip button { border:0; background:transparent; color:var(--muted); padding:0; line-height:0; } .flow-step-head .grip button:hover { color:var(--ink); } .flow-step-head .grip button:disabled { opacity:.28; cursor:not-allowed; } .flow-step-head b { display:block; font-size:13.5px; } .flow-step-head small { display:block; margin-top:2px; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); } .flow-step-head > div:nth-child(2) { flex:1; min-width:0; } .flow-step-body { padding:14px; } .flow-list.compact { margin-top:4px; padding:0; } .settings-card { max-width:680px; } /* Builder (Email/WhatsApp) butuh ruang lebih agar kolom preview tak terpotong */ .settings-card.is-wide { max-width:1040px; } .help-pill { font-family:var(--font-mono); font-size:11px; color:var(--ok); background:var(--ok-bg); padding:3px 8px; border-radius:6px; } /* ===== Notifikasi & Template — Builder (Email/WA) ===== */ .nt-builder-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; } @media (max-width:900px){ .nt-builder-grid { grid-template-columns:1fr; } } .nt-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; } .nt-fmtbar { display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:6px; background:var(--paper-warm2,#f6f6f4); border:1px solid var(--line); border-radius:10px; } .nt-fmtbar .abtn.nt-fmt { width:30px; padding:0; justify-content:center; } .nt-fmt-sep { width:1px; align-self:stretch; background:var(--line); margin:2px 4px; } /* Panggung + bubble WhatsApp (render text formatting) */ .nt-wa-stage { background:#E5DDD5; border:1px solid var(--line); border-radius:12px; padding:16px; min-height:180px; } .nt-wa-bubble { background:#DCF8C6; border-radius:12px 12px 12px 4px; padding:12px 14px; font-size:13px; line-height:1.55; color:#111; max-width:340px; box-shadow:0 1px 2px rgba(0,0,0,.14); word-break:break-word; overflow-wrap:anywhere; } .nt-wa-bubble b { font-weight:700; } .nt-wa-bubble code { font-family:var(--font-mono); font-size:12px; background:rgba(0,0,0,.06); padding:1px 4px; border-radius:4px; } /* ============================================================ CENTERED MODAL (item editor, category manager, field palette) ============================================================ */ .modal-back.center { display:grid; place-items:center; padding:24px; } /* Modal bertumpuk di atas drawer booking (#bkDetailBack z-index:1200). */ #bkModalStack .modal-back { z-index:1300; } /* Modal generik (adminModal) = interaksi teratas SAAT terbuka. Default app.css 90 kalah dari slideover Workspace (1201) / pos-modal (1200) / drawer wp2 (1201) — modal yang dibuka DARI permukaan itu tenggelam. 1290 = di atas semua drawer, tetap di bawah #bkModalStack (1300), uiConfirm (1500), dan toast (1600). */ .modal-back { z-index:1290; } /* ============================================================ DOKUMEN TRANSAKSI — Invoice Card (.inv2) & Struk kasir (.rcp2) Reproduksi komponen master; angka mono, rule identity di kepala invoice. ============================================================ */ .inv2 { display:flex; flex-direction:column; gap:14px; padding:24px 26px; background:var(--surface-0,var(--paper)); border:1px solid var(--line-200,var(--line)); border-top:3px solid var(--identity-yellow,#FFF700); border-radius:var(--radius-md,14px); } .inv2-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:14px; } .inv2-kicker { display:block; color:var(--text-subtle,var(--ink-400)); font-family:var(--font-mono); font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; } .inv2-no { display:block; margin-top:4px; color:var(--text-strong,var(--ink)); font-size:27px; font-weight:750; letter-spacing:-.02em; } .inv2-headright { display:grid; justify-items:end; gap:8px; } .inv2-brand { color:var(--text-strong,var(--ink)); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .inv2-status { padding:5px 12px; border:1px solid; border-radius:var(--radius-pill,100px); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; } .inv2-status.is-due { color:var(--tag-orange-text); background:var(--tag-orange-bg); border-color:var(--tag-orange-border); } .inv2-status.is-paid { color:var(--tag-success-text); background:var(--tag-success-bg); border-color:var(--tag-success-border); } .inv2-meta { color:var(--text-subtle,var(--ink-400)); font-size:11px; letter-spacing:.06em; text-transform:uppercase; } .inv2-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:14px 16px; background:var(--surface-1,var(--paper-warm)); border-radius:var(--radius-sm,10px); } .inv2-panel > div { min-width:0; display:grid; gap:3px; } .inv2-panel b { overflow:hidden; color:var(--text-strong,var(--ink)); font-size:14px; text-overflow:ellipsis; white-space:nowrap; } .inv2-panel small { color:var(--text-subtle,var(--ink-400)); font-size:11.5px; } .inv2-lines { display:flex; flex-direction:column; } .inv2-line { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-100,var(--line-soft)); } .inv2-line b { display:block; color:var(--text-strong,var(--ink)); font-size:14px; font-weight:700; } .inv2-line small { display:block; margin-top:2px; color:var(--text-subtle,var(--ink-400)); font-size:11.5px; } .inv2-line strong { font-size:14px; font-weight:600; } .inv2-totals { display:grid; gap:7px; justify-self:end; width:min(320px,100%); margin-left:auto; } .inv2-totals > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; color:var(--text-body,var(--ink-700)); font-size:13px; } .inv2-totals .inv2-total { padding-top:7px; border-top:1px solid var(--line-200,var(--line)); font-size:15px; font-weight:750; } .inv2-totals .inv2-due { padding-top:9px; border-top:2px solid var(--ink-900,var(--ink)); font-size:17px; font-weight:750; } .inv2-foot { padding-top:12px; border-top:1px solid var(--line-100,var(--line-soft)); color:var(--text-subtle,var(--ink-400)); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; } /* ── Dokumen Order (brief §Phase 2.D): daftar sesi + section per tanggal transaksi. Anatominya meneruskan .inv2-* yang sudah ada; hanya penataan grup yang baru. Spacing/tipografi SELURUHNYA token (ADR D-23); hairline 1px tetap literal karena ia lebar garis, bukan nilai skala. */ .inv2-sessions { grid-template-columns:minmax(0,1fr); } .inv2-session-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-4); align-items:center; padding:var(--space-3) 0; border-bottom:1px solid var(--line-100,var(--line-soft)); } .inv2-session-row:last-child { border-bottom:0; } .inv2-session-row b { overflow:hidden; display:block; font-size:var(--text-sm); text-overflow:ellipsis; white-space:nowrap; } .inv2-session-row small { display:block; margin-top:var(--space-1); color:var(--text-subtle,var(--ink-400)); font-size:var(--text-2xs); } .inv2-txsec { padding-top:var(--space-4); } .inv2-txsec + .inv2-txsec { margin-top:var(--space-3); border-top:1px solid var(--line-100,var(--line-soft)); } .inv2-txsec-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-4); align-items:baseline; padding-bottom:var(--space-2); } .inv2-txsec-head small { color:var(--text-subtle,var(--ink-400)); font-size:var(--text-2xs); } .inv2-line--sum { border-bottom:0; font-weight:var(--fw-bold); } .inv2-request { margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line-200,var(--line)); } /* ── Riwayat pembayaran (tiap transaksi + kapan dibayar) ── Baris komposit → grid, sesuai aturan: no|isi|status|nominal|kumulatif. */ .inv2-pay { display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--line-100,var(--line-soft)); } .inv2-pay-empty { color:var(--text-subtle,var(--ink-400)); font-size:12px; } .inv2-pay-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:4px 10px; padding:10px 12px; background:var(--surface-1,var(--paper-warm)); border:1px solid var(--line-100,var(--line-soft)); border-radius:var(--radius-sm,10px); } .inv2-pay-seq { display:grid; place-items:center; width:22px; height:22px; color:var(--text-muted,var(--graphite)); background:var(--surface-0,var(--paper)); border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-pill,100px); font-size:10.5px; } .inv2-pay-main { min-width:0; display:grid; justify-items:start; gap:2px; } .inv2-pay-main b { color:var(--text-strong,var(--ink)); font-size:13px; font-weight:700; } .inv2-pay-main small { color:var(--text-subtle,var(--ink-400)); font-size:11px; overflow-wrap:anywhere; } .inv2-pay-stat { margin-top:3px; padding:3px 9px; border:1px solid; border-radius:var(--radius-pill,100px); font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; } .inv2-pay-stat.is-ok { color:var(--tag-success-text); background:var(--tag-success-bg); border-color:var(--tag-success-border); } .inv2-pay-stat.is-wait { color:var(--tag-orange-text); background:var(--tag-orange-bg); border-color:var(--tag-orange-border); } /* Kolom nominal: rata kanan, tak pernah ikut menyusut. */ .inv2-pay-amt { display:grid; justify-items:end; gap:2px; text-align:right; } .inv2-pay-amt strong { color:var(--text-strong,var(--ink)); font-size:14px; font-weight:700; white-space:nowrap; } .inv2-pay-run { color:var(--text-subtle,var(--ink-400)); font-size:10.5px; white-space:nowrap; } /* ── Halaman lampiran bukti transfer ── */ .inv2-proofpage { margin-top:16px; padding-top:14px; border-top:1px solid var(--line-200,var(--line)); break-before:page; } .inv2-proofpage-head { display:grid; gap:3px; margin-bottom:12px; } .inv2-proofpage-head b { color:var(--text-strong,var(--ink)); font-size:16px; font-weight:750; } .inv2-proofpage-head small { color:var(--text-subtle,var(--ink-400)); font-size:11.5px; } .inv2-proof-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; } .inv2-proof-card { margin:0; border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-sm,10px); overflow:hidden; background:var(--surface-0,var(--paper)); } .inv2-proof-card img { display:block; width:100%; max-height:260px; object-fit:contain; background:var(--surface-1,var(--paper-warm)); } .inv2-proof-card figcaption { display:grid; gap:2px; padding:9px 11px; border-top:1px solid var(--line-100,var(--line-soft)); } .inv2-proof-card figcaption b { color:var(--text-strong,var(--ink)); font-size:12px; font-weight:700; } .inv2-proof-card figcaption small { color:var(--text-subtle,var(--ink-400)); font-size:10.5px; } .inv2-proof-card figcaption small.is-ok { color:var(--tag-success-text); } .inv2-proof-card figcaption small.is-wait { color:var(--tag-orange-text); } /* Receipt: banner status saat pembayaran belum diverifikasi. */ .rcp2-warn { display:flex; align-items:flex-start; gap:8px; padding:9px 11px; color:var(--tag-orange-text); background:var(--tag-orange-bg); border:1px solid var(--tag-orange-border); border-radius:var(--radius-sm,10px); font-size:11.5px; line-height:1.45; } .rcp2-warn svg { flex:none; margin-top:1px; } .rcp2 { display:flex; flex-direction:column; gap:12px; padding:22px; background:var(--surface-0,var(--paper)); border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-md,14px); } .rcp2-title { color:var(--text-strong,var(--ink)); font-size:20px; font-weight:750; letter-spacing:-.01em; } /* Kertas struk drawer generasi lama (`.rcp-paper` dkk) DICABUT — struk kasir dan Kwitansi kini memakai komponen DS bersama `.vs-receipt` (unit GUI/19/RECEIPT), sama dengan POS. Menyisakannya berarti menyimpan desain struk kedua yang siap dipakai tanpa sengaja lalu menyimpang lagi. `.rcp2*` (bingkai dokumen di sekeliling kertas, bukan kertasnya) TETAP dipakai dan tidak ikut dicabut. */ /* Picker add-on pada modal Tambah Charge (hirarki paket → katalog → manual). */ .ch-list { display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; } .ch-opt { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:10px 12px; text-align:left; background:var(--surface-0,var(--paper)); border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-sm,10px); cursor:pointer; transition:border-color .14s ease, background .14s ease; } .ch-opt:hover { border-color:var(--ink-400,var(--muted)); } .ch-opt.is-on { border-color:var(--ink-900,var(--ink)); box-shadow:0 0 0 1px var(--ink-900,var(--ink)) inset; } .ch-opt-main { min-width:0; display:grid; } .ch-opt-main > b { overflow:hidden; color:var(--text-strong,var(--ink)); font-size:13px; text-overflow:ellipsis; white-space:nowrap; } .ch-opt-main > small { color:var(--text-subtle,var(--ink-400)); font-size:11px; } /* ============================================================ PAYMENT DRAWER — Status deposit · Rincian tagihan · Riwayat Adaptasi master; semua warna/spacing dari token DS. ============================================================ */ .bkpay-card { display:flex; flex-direction:column; gap:10px; padding:16px 18px; margin-bottom:12px; background:var(--surface-0,var(--paper)); border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-md,14px); } .bkpay-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; } .bkpay-kicker { color:var(--text-subtle,var(--ink-400)); font-family:var(--font-mono); font-size:10px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; } .bkpay-title { margin:-4px 0 2px; color:var(--text-strong,var(--ink)); font-size:16px; font-weight:700; letter-spacing:-.01em; } .bkpay-chip { display:inline-flex; align-items:center; padding:3px 10px; border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-pill,100px); color:var(--text-muted,var(--ink-600)); background:var(--surface-1,var(--paper-warm)); font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; white-space:nowrap; } .bkpay-chip--dp { color:var(--tag-blue-text); background:var(--tag-blue-bg); border-color:var(--tag-blue-border); } .bkpay-chip--lunas { color:var(--tag-success-text); background:var(--tag-success-bg); border-color:var(--tag-success-border); } .bkpay-chip--refund { color:var(--tag-purple-text); background:var(--tag-purple-bg); border-color:var(--tag-purple-border); } .bkpay-amountrow { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .bkpay-amountrow > b { font-size:30px; font-weight:700; letter-spacing:-.03em; } .bkpay-amountrow > span { color:var(--text-subtle,var(--ink-400)); font-size:12.5px; } .bkpay-bar { height:8px; overflow:hidden; background:var(--ink-050,var(--surface-1)); border-radius:var(--radius-pill,100px); } .bkpay-bar > i { display:block; height:100%; background:var(--ink-900,var(--ink)); border-radius:inherit; } .bkpay-deprow { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; color:var(--text-muted,var(--ink-600)); font-size:12.5px; } .bkpay-lines { display:flex; flex-direction:column; } .bkpay-line { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:12px; padding:7px 0; color:var(--text-body,var(--ink-700)); font-size:13px; } .bkpay-line--sum { border-top:1px solid var(--line-100,var(--line-soft)); font-weight:700; } .bkpay-line--grand { border-top:2px solid var(--ink-900,var(--ink)); font-size:15px; font-weight:750; } .bkpay-neg { color:var(--tag-success-text); } .bkpay-due { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:4px; padding:12px 14px; background:var(--surface-1,var(--paper-warm)); border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-sm,10px); } .bkpay-due > b { justify-self:end; font-size:20px; font-weight:750; letter-spacing:-.02em; } .bkpay-hrow { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-100,var(--line-soft)); } .bkpay-hrow:last-of-type { border-bottom:0; } .bkpay-hwhen { display:grid; } .bkpay-hwhen > b { font-size:11.5px; } .bkpay-hwhen > small { color:var(--text-subtle,var(--ink-400)); font-size:10.5px; } .bkpay-hmain { min-width:0; display:grid; } .bkpay-hmain > b { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; } .bkpay-hmain > small { color:var(--text-subtle,var(--ink-400)); font-size:11px; } .bkpay-hamt { display:grid; justify-items:end; } .bkpay-hamt > b { font-size:13.5px; font-weight:700; } .bkpay-hamt > small { color:var(--text-subtle,var(--ink-400)); font-size:10.5px; } .bkpay-hbadge { display:inline-flex; align-items:center; gap:6px; } @media (max-width:768px) { .bkpay-hrow { grid-template-columns:auto minmax(0,1fr); row-gap:6px; } .bkpay-hamt, .bkpay-hbadge { grid-column:2; justify-self:start; justify-items:start; } } /* Scroll-lock saat modal terbuka (setModalScrollLock di admin.js). Mengunci gulir latar + menutup artefak repaint backdrop-filter pada backdrop fixed. */ html.bg-modal-lock, html.bg-modal-lock body { overflow:hidden; } .modal-center { width:100%; max-width:520px; background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); max-height:88vh; display:flex; flex-direction:column; animation:popin .2s var(--ease); text-align:left; } .modal-center.wide { max-width:580px; } @keyframes popin { from { opacity:0; transform:translateY(12px) scale(.99);} to { opacity:1; transform:none; } } .mc-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); } .mc-head h3 { font-size:16px; font-weight:740; } .mc-head .x { background:transparent; border:0; color:var(--muted); padding:6px; border-radius:6px; cursor:pointer; } .mc-head .x:hover { background:var(--paper-warm); color:var(--ink); } .mc-body { padding:18px 20px; overflow-y:auto; } /* Tab editor item — bar section di bawah head modal; pane di-swap tanpa re-render. */ .ed-tabbar { padding:0 20px; border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch; } .ed-tabbar::-webkit-scrollbar { height:0; } .ed-tabbar .vs-tabs { border-bottom:0; flex-wrap:nowrap; } /* Tab composer diperjelas: target sentuh 44px, jarak lega, state aktif tegas (garis bawah 2px + teks penuh kontras) — sebelumnya 8px padding dan tipis. */ .ed-tabbar .vs-tab { flex:none; white-space:nowrap; gap:7px; padding:0 14px; min-height:46px; font-size:13px; color:var(--text-muted); } .ed-tabbar .vs-tab:hover { color:var(--text-strong); background:var(--surface-1); } .ed-tabbar .vs-tab[aria-selected="true"] { color:var(--text-strong); font-weight:700; } .ed-tabbar .vs-tab:focus-visible { outline:none; box-shadow:var(--shadow-focus); } /* Kontainer grup field di composer — batas "kebutuhan input" jadi jelas: border grey + head kicker mono + penjelas, isi ber-padding. */ .fgrp { border:1px solid var(--line-200); border-radius:var(--radius-sm); background:var(--surface-0); margin:0 0 14px; } .fgrp:last-child { margin-bottom:0; } .fgrp__head { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-bottom:1px solid var(--line-100); background:var(--surface-1); border-radius:var(--radius-sm) var(--radius-sm) 0 0; } .fgrp__ttl { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); } .fgrp__desc { font-size:12px; color:var(--text-muted); line-height:1.45; } .fgrp__body { padding:14px; } .fgrp__body > .frow:last-child, .fgrp__body > .fgrid:last-child, .fgrp__body > .fgrid3:last-child { margin-bottom:0; } /* Transisi antar tab: fade + geser halus, dihormati prefers-reduced-motion. */ @keyframes ed-pane-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } } .ed-pane.is-in { animation:ed-pane-in .18s ease both; } @media (prefers-reduced-motion: reduce){ .ed-pane.is-in { animation:none; } } /* `hidden` harus menang atas display flex/grid pane (lih. pola .pos-*[hidden]). */ .ed-pane[hidden] { display:none !important; } .mc-foot { display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid var(--line); } /* Alias untuk modal yang memakai class .modal-* (Finance dkk) — tanpa ini layoutnya berantakan */ .modal-center .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); } .modal-center .modal-head h2, .modal-center .modal-head h3 { font-size:16px; font-weight:740; margin:0; min-width:0; overflow-wrap:anywhere; } .modal-center .modal-head .icon-btn { flex:0 0 auto; } .modal-center .modal-body { padding:18px 20px; overflow-y:auto; min-height:0; } .modal-center .modal-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--line); } @media (max-width:560px){ .modal-back.center { place-items:end center; padding:0; } .modal-center { max-width:100%; border-radius:var(--r-lg) var(--r-lg) 0 0; max-height:92vh; } } /* In-app confirm dialog (uiConfirm) — bertumpuk di atas modal editor (modal-back z=90) */ /* == TANGGA LAPISAN OVERLAY (bugfix 2026-08-10) ============================== Bug nyata: "Hapus ke Trash" di drawer Bookings memunculkan uiConfirm DI BELAKANG backdrop blur — karena permukaan interaktif tertinggi ada di 1200–1300 (.bk-detail-back/.pos-modal/#bgAsst 1200 · .ws-slideover/.wp2-drawer 1201 · .sched-doc-overlay 1250 · #bkModalStack .modal-back 1300) sedangkan layer KEPUTUSAN (.uic-back) dulu 300 dan UMPAN BALIK (.toast-wrap) 80. Kanon mulai sekarang: interaktif ≤1300 < modal c2 1320 < uiConfirm/uiPrompt 1500 < toast 1600 < station badge/lock 8000/9000 (kiosk wajib menang) < chip-pop 9999. Jangan menambah permukaan interaktif baru di atas 1300. */ .uic-back { position:fixed; inset:0; z-index:1500; background:rgba(10,10,10,.5); display:grid; place-items:center; padding:24px; animation:fade .16s var(--ease); } .uic-card { width:100%; max-width:420px; background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:22px 22px 16px; animation:popin .18s var(--ease); text-align:left; } .uic-title { font-size:16px; font-weight:760; margin:0 0 8px; } .uic-msg { font-size:13.5px; color:var(--graphite); line-height:1.55; } .uic-foot { display:flex; align-items:center; gap:10px; margin-top:18px; } .abtn--danger { background:var(--danger); color:#fff; border-color:var(--danger); } .abtn--danger:hover { opacity:.92; background:var(--danger); } @media (max-width:560px){ .uic-back { place-items:end center; padding:0; } .uic-card { max-width:100%; border-radius:var(--r-lg) var(--r-lg) 0 0; } } /* Toast = umpan balik terakhir; app.css menetapkan 80 (di bawah semua drawer 1200+ → toast dari dalam drawer tak pernah terlihat). Override khusus admin (admin.css hanya dimuat app admin; permukaan publik tetap 80 milik app.css). */ .toast-wrap { z-index:1600; } .subcat-editor { display:grid; gap:8px; margin-bottom:10px; } .subcat-edit-row { display:grid; grid-template-columns:auto 1fr 150px auto auto; gap:8px; align-items:center; } .subcat-edit-row.is-off .ctrl { opacity:.5; } .subcat-ord { display:flex; gap:2px; } .subcat-act { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--graphite); cursor:pointer; white-space:nowrap; } .subcat-add-row, .category-add-row { display:grid; grid-template-columns:1fr 180px auto; gap:8px; align-items:center; margin-top:12px; } @media (max-width:620px){ .subcat-edit-row, .subcat-add-row, .category-add-row { grid-template-columns:1fr; } } /* field palette */ .palette-label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .palette-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (min-width:480px){ .palette-grid { grid-template-columns:1fr 1fr 1fr; } } .palette-item { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); cursor:pointer; transition:border-color .14s, background .14s, transform .1s; text-align:left; } .palette-item:hover { border-color:var(--ink); background:var(--paper-warm); } .palette-item:active { transform:scale(.98); } .palette-item svg { width:18px; height:18px; color:var(--ink); } .palette-item span { font-size:12.5px; font-weight:600; } /* ============================================================ CATALOG DATABASE ============================================================ */ .cat-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; } .cat-toolbar select { padding:9px 30px 9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); font-size:13px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8C86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; } /* segmented view switcher */ .seg { display:inline-flex; background:var(--paper-warm2); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; gap:2px; } .seg-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:0; background:transparent; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--graphite); cursor:pointer; transition:background .14s, color .14s; } .seg-btn svg { width:15px; height:15px; } .seg-btn:hover { color:var(--ink); } .seg-btn.active { background:var(--paper); color:var(--ink); box-shadow:var(--shadow-1); } @media (max-width:600px){ .seg-btn span { display:none; } .seg-btn { padding:8px 10px; } } /* 12.20 — selektor metode pembayaran (Verifikasi Pembayaran): chip mengisi penuh, label tetap tampil di mobile */ .seg--pay { display:flex; width:100%; } .seg--pay .seg-btn { flex:1; justify-content:center; } .img-thumb { width:40px; height:40px; border-radius:8px; background:var(--paper-warm2) center/cover no-repeat; flex:none; display:grid; place-items:center; color:var(--muted); overflow:hidden; } .img-thumb.ph svg { width:18px; height:18px; } .img-thumb.visual-fallback { background:var(--vf-bg); color:var(--vf-ink); } .img-thumb.visual-fallback::before, .img-thumb.visual-fallback::after { display:none; } .img-thumb .vf-mini { font-size:12px; font-weight:800; color:var(--vf-ink); } /* gallery */ .gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; } .gal-card { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--paper); cursor:pointer; transition:border-color .14s, box-shadow .14s, transform .12s; } .gal-card:hover { border-color:var(--ink); box-shadow:var(--shadow-2); transform:translateY(-2px); } .gal-cover { aspect-ratio:4/3; background:var(--paper-warm2); position:relative; display:grid; place-items:center; color:var(--muted); overflow:hidden; } .gal-cover.visual-fallback { background:var(--vf-bg); } .gal-cover .vf-label { max-width:76%; color:var(--vf-ink); } .gal-cover .img-cover { position:absolute; inset:0; background-size:cover; background-position:center; } .gal-cover .badge { position:absolute; top:9px; left:9px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; background:var(--ink); color:#fff; padding:3px 8px; border-radius:100px; z-index:2; } .gal-cover .muted-tag { position:absolute; top:9px; right:9px; font-size:10px; background:rgba(10,10,10,.6); color:#fff; padding:3px 8px; border-radius:100px; z-index:2; } .gal-body { padding:11px 12px 13px; } .gal-body .nm { font-size:13.5px; font-weight:680; letter-spacing:0; } .gal-body .cat { font-size:11.5px; color:var(--muted); margin-top:3px; } .gal-body .pr { font-size:12px; color:var(--ink); margin-top:7px; font-weight:600; } /* board */ .board { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; } .board-col { flex:none; width:248px; background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--r-md); display:flex; flex-direction:column; max-height:70vh; } .board-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line-soft); font-size:13px; font-weight:700; } .board-head .cnt { font-family:var(--font-mono); font-size:11px; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:1px 8px; } .board-items { padding:10px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; } .board-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px; cursor:pointer; transition:border-color .14s, box-shadow .14s; } .board-card:hover { border-color:var(--ink); box-shadow:var(--shadow-1); } .board-card .bc-top { display:flex; align-items:center; gap:9px; } .board-card .bc-top .img-thumb { width:30px; height:30px; } .board-card .bc-top .nm { font-size:12.5px; font-weight:620; line-height:1.3; } .board-card .bc-meta { display:flex; align-items:center; justify-content:space-between; margin-top:8px; } .board-card .bc-meta .mono { font-size:11px; color:var(--graphite); } .board-card .bc-meta .dot-off { width:7px; height:7px; border-radius:50%; background:var(--muted); display:inline-block; } .board-card .bc-meta .dot-off::before { display:none; } .board-empty { text-align:center; color:var(--muted); font-size:12px; padding:10px; } .board-add { display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border:1px dashed var(--line); border-radius:var(--r-sm); background:transparent; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; } .board-add:hover { border-color:var(--ink); color:var(--ink); } /* ============================================================ GROUP-BY (Notion-like multi-level) · inline edit · drag-drop ============================================================ */ /* group-by control bar */ .grp-ctrl { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-6px 0 16px; padding:10px 12px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); } .grp-ctrl-lbl { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--graphite); text-transform:uppercase; letter-spacing:.04em; } .grp-ctrl-lbl svg { width:15px; height:15px; } .grp-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .grp-keychip { display:inline-flex; align-items:center; gap:7px; padding:5px 8px 5px 6px; background:var(--ink-950); color:#fff; border:1px solid var(--ink-950); border-radius:var(--r-sm); font-size:12px; font-weight:600; cursor:grab; user-select:none; } .grp-keychip .gk-ord { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--identity-yellow); color:var(--ink-950); font-family:var(--font-mono); font-size:10px; font-weight:700; } .grp-keychip .gk-x { display:inline-flex; align-items:center; background:transparent; border:0; color:#aaa; padding:1px; border-radius:4px; cursor:pointer; } .grp-keychip .gk-x:hover { color:#fff; background:rgba(255,255,255,.14); } .grp-keychip.is-dragging { opacity:.4; } .grp-keychip.drag-over { outline:2px dashed var(--identity-yellow); outline-offset:2px; } .grp-add { padding:7px 10px; border:1px dashed var(--line); border-radius:var(--r-sm); background:var(--paper-warm); font-size:12.5px; font-weight:600; color:var(--graphite); cursor:pointer; } .grp-hint { font-size:12px; color:var(--muted); } /* top summary strip */ .grp-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; padding:12px 14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-card); } .grp-summary-note { font-size:12px; color:var(--muted); } /* group chips & totals */ .grp-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:600; background:var(--pst-neutral-bg); border:1px solid var(--pst-neutral-border); color:var(--pst-neutral-text); white-space:nowrap; } .grp-chip.lg { font-size:12.5px; padding:3px 11px; } .grp-chip.ok { background:var(--pst-success-bg); border-color:var(--pst-success-border); color:var(--pst-success-text); } .grp-chip.muted { background:var(--pst-neutral-bg); border-color:var(--pst-neutral-border); color:var(--pst-neutral-text); } .grp-total { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-900); } .grp-total.lg { font-size:15px; } /* nested group accordion */ .grp-wrap { display:flex; flex-direction:column; gap:10px; } .grp { border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); overflow:hidden; } .grp.lvl-top { box-shadow:var(--shadow-card); } .grp.lvl-top > .grp-head { border-left:3px solid var(--identity-yellow); } .grp .grp { margin:0; border:0; border-top:1px solid var(--line-soft); border-radius:0; } .grp-head { display:flex; align-items:center; gap:9px; padding:11px 14px; cursor:pointer; user-select:none; background:var(--paper); transition:background .12s; } .grp-head:hover { background:var(--paper-warm); } .grp-head:focus-visible { outline:2px solid var(--ink-950); outline-offset:-2px; } .grp-caret { display:inline-flex; color:var(--graphite); flex:none; } .grp-caret svg { width:16px; height:16px; } .grp-label { font-size:13.5px; font-weight:700; color:var(--ink-900); } .grp .grp .grp-label { font-size:13px; font-weight:640; } .grp .grp .grp .grp-label { font-weight:600; color:var(--ink-700); } .grp-crumb { font-size:11px; color:var(--muted); font-family:var(--font-mono); } .grp-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .grp-body { border-top:1px solid var(--line-soft); } .grp .grp-body { padding-left:14px; } /* indent nested levels */ .grp.is-collapsed > .grp-body { display:none; } /* DBGroup: tabel daun (rows DB lain) di dalam group body — mulus tanpa border ganda */ .grp-host { display:block; } .grp-body > .tbl--leaf { width:100%; margin:0; } .grp-body > .tbl--leaf > tbody > tr > td { border-top:1px solid var(--line-soft); } .grp-body > .tbl--leaf > tbody > tr:first-child > td { border-top:0; } .grp-body > .tbl--leaf > tbody > tr:last-child > td { border-bottom:0; } /* leaf item rows */ .grp-rows { display:flex; flex-direction:column; } /* Baris komposit → grid dgn kolom tetap, bukan flex: kolomnya sejajar antar baris dan teks panjang menyusut di kolomnya sendiri (tidak membungkus / mendorong). */ .grp-row { display:grid; grid-template-columns:auto auto auto 128px minmax(0,1fr) auto 190px auto auto; align-items:center; gap:10px; padding:9px 14px; border-top:1px solid var(--line-soft); background:var(--paper); } .grp-rows .grp-row:first-child { border-top:0; } .grp-row:hover { background:var(--paper-warm); } .grp-row.is-off { opacity:.62; } .grp-row.is-dragging { opacity:.4; } .grp-row.drag-over { box-shadow:inset 0 2px 0 var(--identity-yellow); } .grp-grip { display:inline-flex; color:var(--muted); cursor:grab; flex:none; opacity:.5; } .grp-row:hover .grp-grip { opacity:1; } .grp-grip:active { cursor:grabbing; } .grp-sel { display:inline-flex; flex:none; } .grp-sel input { width:16px; height:16px; accent-color:var(--ink-950); } .grp-thumb { flex:none; } .grp-thumb .img-thumb { width:26px; height:26px; } .grp-code { font-size:11px; color:var(--graphite); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .grp-name { font-size:13px; font-weight:600; color:var(--ink-900); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .grp-tags { display:flex; align-items:center; gap:6px; min-width:0; } .grp-tags .sub { font-size:11px; color:var(--muted); } /* nowrap = harga tetap satu baris; kolomnya sudah dipatok di grid-template. */ .grp-price { font-family:var(--font-mono); font-size:12px; color:var(--ink-900); min-width:0; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .grp-stat { flex:none; padding:2px 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:600; cursor:pointer; border:1px solid; } .grp-stat.on { background:var(--pst-success-bg); border-color:var(--pst-success-border); color:var(--pst-success-text); } .grp-stat.off { background:var(--pst-neutral-bg); border-color:var(--pst-neutral-border); color:var(--pst-neutral-text); } .grp-edit { flex:none; display:inline-flex; align-items:center; padding:5px; border:1px solid var(--line); border-radius:var(--r-xs); background:var(--paper); color:var(--graphite); cursor:pointer; } .grp-edit:hover { border-color:var(--ink-950); color:var(--ink-950); } /* inline-edit affordance + active input */ .cat-inline { cursor:text; border-radius:4px; transition:background .12s, box-shadow .12s; } .cat-inline:hover { background:var(--identity-yellow-soft); box-shadow:inset 0 0 0 1px var(--identity-yellow); } .grp-edit-input { width:100%; min-width:80px; padding:3px 6px; border:1.5px solid var(--ink-950); border-radius:var(--r-xs); font-family:inherit; font-size:13px; background:var(--paper); outline:none; } .grp-edit-input.mono { font-family:var(--font-mono); } /* tags (FR-11) */ .cat-tag.tag-soft { background:var(--pst-info-bg); color:var(--pst-info-text); border:1px solid var(--pst-info-border); font-weight:600; } .row-tags { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:5px; } .grp-tags .cat-tag { font-size:10.5px; padding:2px 7px; } /* tag input (item editor) */ .tag-input { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:6px; min-height:42px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); } .tag-input:focus-within { border-color:var(--ink-950); } .tag-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 6px 3px 9px; border-radius:var(--radius-pill); background:var(--pst-info-bg); border:1px solid var(--pst-info-border); color:var(--pst-info-text); font-size:12px; font-weight:600; } .tag-chip .tc-x { display:inline-flex; align-items:center; background:transparent; border:0; color:inherit; opacity:.65; padding:1px; border-radius:50%; cursor:pointer; } .tag-chip .tc-x:hover { opacity:1; background:rgba(0,0,0,.08); } .tag-add-input { flex:1; min-width:120px; border:0; outline:none; background:transparent; font-family:inherit; font-size:13px; padding:4px 2px; } /* board: dimension selector + kanban drag (FR-13) */ .board-dim { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .board-dim-lbl { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--graphite); } .board-dim-hint { font-size:12px; color:var(--muted); } .board-head .cnt { font-family:var(--font-mono); } .board-card[draggable="true"] { cursor:grab; } .board-card.is-dragging { opacity:.4; } .board-items.drag-over { background:var(--identity-yellow-soft); outline:2px dashed var(--identity-yellow); outline-offset:-4px; border-radius:var(--r-sm); } .board-card .row-tags { margin-top:7px; } /* light in-table group header rows (bookings / customers / rooms) */ .tbl tr.tbl-grp td { background:var(--paper-warm); border-bottom:1px solid var(--line); border-top:2px solid var(--line); padding:9px 14px; position:sticky; } .tbl tr.tbl-grp:first-child td { border-top:0; } .tg-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-900); margin-right:10px; } .tg-total { margin-left:10px; font-family:var(--font-mono); font-size:12px; color:var(--ink-700); } .tbl tr.tbl-grp td .grp-chip { vertical-align:middle; } @media (max-width:760px){ .grp-code { display:none; } .grp-price { width:auto; } .grp-name { min-width:90px; } .grp-tags { display:none; } } /* details */ .detail-split { display:grid; grid-template-columns:300px 1fr; gap:16px; } @media (max-width:760px){ .detail-split { grid-template-columns:1fr; } } .detail-list { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; max-height:72vh; overflow-y:auto; background:var(--paper); } .dl-row { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:0; border-bottom:1px solid var(--line-soft); background:transparent; cursor:pointer; text-align:left; transition:background .12s; } .dl-row:hover { background:var(--paper-warm); } .dl-row.active { background:var(--ink); } .dl-row.active .nm, .dl-row.active .sub { color:#fff; } .dl-row .nm { font-size:13px; font-weight:620; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dl-row .sub { font-size:11px; color:var(--muted); } .detail-pane { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--paper); } .dp-cover { aspect-ratio:16/7; background:var(--paper-warm2); display:grid; place-items:center; color:var(--muted); position:relative; overflow:hidden; } .dp-cover.visual-fallback { background:var(--vf-bg); } .dp-cover .vf-label { max-width:70%; color:var(--vf-ink); } .dp-cover .img-cover { position:absolute; inset:0; background-size:cover; background-position:center; } .dp-body { padding:18px 20px; } .dp-tags { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; } /* ============================================================ POS RECEIPT ============================================================ */ .content.content--pos { max-width:none; padding:18px 18px 72px; } /* PRD 12.25b — Layout 2-kolom + work area ber-tab. Sebelumnya 3 kolom (queue|register|checkout) yang lebarnya melebihi ruang konten (viewport − sidebar 232px − padding) sehingga kolom ke-3 ter-clip / tumpang-tindih. Kini: rail Queue + satu kontainer kerja ber-tab. */ .pos-shell { display:grid; grid-template-columns:300px minmax(0,1fr); gap:14px; align-items:start; } .pos-queue, .pos-work { min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .pos-queue { position:sticky; top:78px; max-height:calc(100dvh - 96px); overflow:auto; } /* Work area: panel penuh-tinggi yang dipancang; header + tab + footer tetap, hanya pane aktif yang men-scroll. */ .pos-work { position:sticky; top:78px; max-height:calc(100dvh - 96px); display:flex; flex-direction:column; } .pos-work-head { flex:none; } .pos-tabbody { flex:1 1 auto; min-height:0; overflow:auto; } .pos-pane { padding:14px; } .pos-pane[data-pane="items"] { padding:0; } .pos-pane[hidden] { display:none !important; } .pos-panel-head, .pos-context, .pos-catalog-head, .pos-cart-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border-bottom:1px solid var(--line-soft); } .pos-panel-head h2, .pos-context h2, .pos-catalog-head h2, .pos-cart-head h2 { font-size:14px; font-weight:760; } .pos-panel-head span, .pos-context span, .pos-catalog-head span, .pos-cart-head span { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; } .pos-context-id { font-size:10.5px; color:var(--muted); margin-bottom:3px; } .pos-context-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .pos-search { margin:12px 12px 10px; min-width:0; } .pos-queue-list { display:grid; gap:8px; padding:0 12px 12px; } /* FR-4: bar customer + daftar pencarian customer di POS */ .pos-cust-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; } .pos-cust-tag { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted); } .pos-cust-actions { display:flex; gap:8px; flex-wrap:wrap; } .pos-detail-grid { border-top:1px solid var(--line-soft); } .pos-cust-list { display:grid; gap:6px; max-height:52vh; overflow:auto; } .pos-cust-row { width:100%; text-align:left; display:grid; gap:2px; border:1px solid var(--line); background:var(--paper); border-radius:var(--r-sm); padding:9px 11px; } .pos-cust-row:hover { border-color:var(--ink); background:var(--paper-warm); } .pos-cust-row b { font-size:12.5px; } .pos-cust-row span { font-size:11px; color:var(--muted); } /* FR-5: highlight field bermasalah + panel checklist validasi POS */ .pos-invalid { border-color:var(--danger) !important; box-shadow:0 0 0 2px var(--pst-danger-bg); } .pos-validate-hint { display:grid; gap:4px; margin:0 0 10px; padding:10px 12px; border:1px solid var(--pst-warning-border); background:var(--pst-warning-bg); border-radius:var(--r-sm); } .pos-validate-hint span { display:flex; gap:6px; align-items:flex-start; font-size:11.5px; color:var(--pst-warning-text); } .pos-config-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:14px; border-bottom:1px solid var(--line-soft); } .pos-config-grid .frow { margin-bottom:0; } .pos-brand-seg { width:100%; } .pos-brand-seg .seg-btn { flex:1; justify-content:center; } .pos-pay-methods { display:flex; gap:8px; margin-bottom:4px; } .pos-pay-methods button { flex:1; min-width:0; border:1px solid var(--line); background:var(--paper); border-radius:var(--r-sm); padding:9px 8px; font-size:12px; font-weight:650; color:var(--graphite); cursor:pointer; } .pos-pay-methods button.active { background:var(--ink); border-color:var(--ink); color:#fff; } /* Checkout sections */ .pos-sec { margin-bottom:14px; } .pos-sec-head { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; color:var(--graphite); margin-bottom:9px; } .pos-sec-head svg { color:var(--muted); } .pos-pay-sec { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-warm); padding:12px; } .pos-mini-label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:650; margin:8px 0 5px; } .pos-pay-sec .pos-mini-label:first-of-type { margin-top:0; } .pos-dp-row .ctrl { width:100%; } .pos-dp-chips { display:flex; gap:6px; margin-top:8px; } .pos-dp-chip { flex:1; border:1px solid var(--line); background:var(--paper); border-radius:100px; padding:7px 8px; font-size:11.5px; font-weight:650; color:var(--graphite); cursor:pointer; transition:border-color .12s, background .12s, color .12s; } .pos-dp-chip:hover { border-color:var(--ink); color:var(--ink); } .pos-dp-chip.active { background:var(--ink); border-color:var(--ink); color:#fff; } .pos-total-due { margin-top:10px; font-family:var(--font-mono); font-size:12px; font-weight:600; color:#B8B8B4; } .pos-total-due.is-partial { color:var(--pst-warning-border); } .pos-total-due.is-paid { color:var(--pst-mint-border); } .pos-auto-tag { display:inline-block; margin-left:6px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:1px 7px; vertical-align:middle; } .pos-cta { width:100%; justify-content:center; padding:13px; font-size:13.5px; margin-top:6px; } .pos-cat-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .pos-cat-tools .search-box { min-width:190px; } .pos-cat-tools select { padding:9px 30px 9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); font-size:13px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8C86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; } /* Instant category picker — chip warna design-system */ .pos-cat-chips { display:flex; flex-wrap:wrap; gap:6px; padding:12px 14px 0; } .pos-cat-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--paper); border-radius:100px; padding:5px 11px; font-size:11.5px; font-weight:650; color:var(--graphite); cursor:pointer; transition:border-color .12s, background .12s, color .12s; } .pos-cat-chip:hover { border-color:var(--ink); color:var(--ink); } .pos-cat-chip .pos-cat-dot { width:9px; height:9px; border-radius:3px; background:var(--dot,var(--line)); flex:none; } .pos-cat-chip.active .pos-cat-dot { display:none; } .pos-cat-chip.active { font-weight:720; } .pos-cat-chip em { font-style:normal; font-family:var(--font-mono); font-size:10px; opacity:.7; } .pos-cat-chip--all.active { background:var(--ink); color:#fff; border-color:var(--ink); } .pos-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; padding:12px 14px 16px; border-bottom:1px solid var(--line-soft); max-height:330px; overflow:auto; } .pos-prod-group { grid-column:1 / -1; padding:8px 0 2px; } .pos-product { position:relative; min-height:74px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-warm); padding:10px 10px 10px 13px; text-align:left; display:flex; flex-direction:column; justify-content:space-between; gap:8px; transition:border-color .14s, background .14s, transform .1s; overflow:hidden; } .pos-product::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--prod-tone,var(--line)); } .pos-product:hover { border-color:var(--ink); background:var(--paper); } .pos-product:active { transform:scale(.985); } .pos-product b { font-size:12.5px; line-height:1.3; } .pos-product span { font-family:var(--font-mono); font-size:11px; color:var(--graphite); } .pos-cart { padding:12px 14px 16px; display:grid; gap:10px; } .pos-line { position:relative; display:grid; gap:8px; padding:10px 10px 10px 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-warm); } .pos-line::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:var(--r-sm) 0 0 var(--r-sm); background:var(--ln-tone,var(--line)); } .pos-line .ctrl { padding:8px 9px; font-size:13px; min-width:0; } .pos-line-main { display:grid; grid-template-columns:minmax(150px,1fr) 116px 58px auto 32px; gap:7px; align-items:center; } .pos-line-name { font-weight:650; } .pos-line-total { font-family:var(--font-mono); font-size:12px; font-weight:700; text-align:right; white-space:nowrap; } .pos-line-total small { display:block; margin-top:2px; font-family:var(--font-body); font-size:10px; font-weight:600; color:var(--graphite); white-space:normal; } .pos-line-del { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r-xs); background:var(--paper); color:var(--danger); flex:none; } .pos-line-del:hover { border-color:var(--danger); } /* Mini labelled field (pricing & schedule sub-rows) */ .pos-line-mini { display:flex; flex-direction:column; gap:3px; min-width:0; } .pos-line-mini > span { font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:650; } .pos-line-mini .ctrl { width:100%; } .pos-order-block { display:grid; grid-template-columns:auto minmax(120px,1fr) minmax(92px,1fr) minmax(92px,1fr) auto; gap:6px; align-items:end; padding:9px 0; } .pos-order-block .pos-order-break { grid-column:2 / 4; } .pos-order-block .pos-order-resource { grid-column:4 / 6; } .pos-line-pricing { display:grid; grid-template-columns:1fr 1fr; gap:8px; } /* Rental studio: harga digerakkan durasi (jam) + tier — TANPA kolom qty. */ .pos-line-pricing--flat { grid-template-columns:1fr; } .pos-line--rental .pos-line-main { grid-template-columns:minmax(150px,1fr) 116px auto 32px; } .pos-line-sched { border-top:1px dashed var(--line); padding-top:9px; display:grid; gap:7px; } .pos-line-sched-top { display:flex; align-items:center; justify-content:space-between; gap:8px; } .pos-line-sched-tag { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:650; color:var(--st-tentative); } .pos-line-sched-fields { display:grid; grid-template-columns:1fr 1fr 110px; gap:8px; align-items:end; } .pos-line-sched-fields.is-rental { grid-template-columns:1fr 1fr; } .pos-line-schedoff { display:inline-flex; align-items:center; gap:4px; border:none; background:none; cursor:pointer; font-size:10.5px; font-weight:600; color:var(--muted); padding:2px 4px; border-radius:var(--r-xs); } .pos-line-schedoff:hover { color:var(--danger); } .pos-line-schedbtn { display:inline-flex; align-items:center; gap:6px; align-self:start; width:fit-content; border:1px dashed var(--line); background:var(--paper); border-radius:100px; padding:6px 12px; font-size:11.5px; font-weight:600; color:var(--graphite); cursor:pointer; } .pos-line-schedbtn:hover { border-color:var(--ink); color:var(--ink); border-style:solid; } /* Work-area tabs (PRD 12.25b) */ .pos-tabs { flex:none; display:flex; gap:2px; padding:0 14px; border-bottom:1px solid var(--line); background:var(--paper); overflow-x:auto; } .pos-tab { position:relative; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; border:none; background:none; cursor:pointer; padding:12px 14px; font-size:12.5px; font-weight:650; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .14s; } .pos-tab:hover { color:var(--ink); } .pos-tab.active { color:var(--ink); font-weight:760; border-bottom-color:var(--pos-accent,var(--ink)); } .pos-tab svg { color:currentColor; } .pos-tab-badge { font-style:normal; font-family:var(--font-mono); font-size:10px; font-weight:700; min-width:16px; text-align:center; background:var(--paper-warm); border:1px solid var(--line); border-radius:100px; padding:1px 6px; color:var(--graphite); } .pos-tab-badge:empty { display:none; } .pos-tab.active .pos-tab-badge { background:var(--pos-accent,var(--ink)); border-color:var(--pos-accent,var(--ink)); color:#fff; } /* Pane refinements: pane scrolls as one surface (no nested catalog scroll) */ .pos-pane .pos-product-grid { max-height:none; overflow:visible; } .pos-pane[data-pane="pay"] .pos-summary:first-child { margin-top:0; } /* Status override popup membuka ke atas agar tak ter-clip dasar pane yang men-scroll */ .pos-tabbody .pos-kebab-menu { top:auto; bottom:calc(100% + 6px); } /* Work footer: total selalu terlihat + CTA lintas-tab */ .pos-workfoot { flex:none; border-top:1px solid var(--line); background:var(--paper); padding:12px 14px; } .pos-foot-total { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; } .pos-foot-total-l { display:flex; align-items:baseline; gap:10px; min-width:0; } .pos-foot-total span { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); white-space:nowrap; } .pos-foot-total strong { font-family:var(--font-mono); font-size:22px; line-height:1; font-weight:800; color:var(--ink); } .pos-foot-total .pos-total-due { margin:0; font-size:11.5px; text-align:right; white-space:nowrap; } .pos-workfoot .pos-cta { margin-top:0; } .pos-workfoot .pos-action-grid { margin-top:8px; grid-template-columns:repeat(5,1fr); } .pos-check-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .pos-check-grid .frow { margin-bottom:0; } .pos-summary { border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; margin:14px 0; } .pos-sum-row { display:flex; justify-content:space-between; gap:12px; padding:9px 11px; border-bottom:1px solid var(--line-soft); font-size:12.5px; } .pos-sum-row:last-child { border-bottom:0; } .pos-sum-row b { font-family:var(--font-mono); font-size:12px; white-space:nowrap; } .pos-sum-row.total { background:var(--paper-warm); color:var(--ink); font-weight:760; } .pos-sum-row.due { background:var(--pst-warning-bg); color:var(--pst-warning-text); font-weight:760; } .pos-preview-head { display:flex; justify-content:flex-end; margin:12px 0 10px; } .pos-preview-pane { min-height:240px; max-height:420px; overflow:auto; } .pos-wa-text { margin:0; font-family:var(--font-mono); font-size:11.5px; line-height:1.58; white-space:pre-wrap; word-break:break-word; background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px; color:var(--ink-soft); } /* Kartu struk generasi lama — dipertahankan hanya untuk markup lain yang masih memakainya TANPA .vs-receipt. Warna kertas kini token (dulu literal #fff). Struk kanonik = .vs-receipt (unit DS GUI/19/RECEIPT) di bagian POSDOC-REFRESH. */ .pos-receipt-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-0); padding:18px; } /* .pos-watermark DIHAPUS: unit DS GUI/19/RECEIPT tidak punya watermark diagonal, dan nilainya dulu literal rgba() di luar token. Tidak ada pemakai tersisa. */ .pos-r-head { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding-bottom:12px; } .pos-r-brand { font-size:15px; font-weight:850; } .pos-r-sub { font-size:11.5px; color:var(--muted); margin-top:2px; } .pos-r-mode { font-family:var(--font-mono); font-size:11px; font-weight:800; text-transform:uppercase; } .pos-r-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:13px 0; border-bottom:1px solid var(--line-soft); } .pos-r-meta span { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; } .pos-r-meta b { display:block; font-size:12.5px; margin-top:2px; } .pos-r-items { display:grid; gap:9px; padding:12px 0; border-bottom:1px solid var(--line-soft); } .pos-r-item { display:flex; justify-content:space-between; gap:12px; } .pos-r-item b, .pos-r-item strong { font-size:12.5px; } .pos-r-item span, .pos-r-item small { display:block; font-size:10.8px; color:var(--muted); margin-top:1px; } .pos-r-empty { color:var(--muted); font-size:12px; } .pos-r-total { margin-top:10px; } .pos-r-notes { margin-top:12px; background:var(--paper-warm); border-radius:var(--r-sm); padding:10px; font-size:11.8px; color:var(--graphite); line-height:1.5; } .pos-r-foot { margin-top:13px; color:var(--muted); font-size:11px; text-align:center; } .pos-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; } .pos-action-grid .abtn { justify-content:center; min-width:0; } .pos-empty { min-height:132px; display:grid; place-items:center; align-content:center; gap:5px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--r-sm); padding:18px; } .pos-empty b { color:var(--graphite); font-size:13px; } .pos-empty span { font-size:11.5px; } /* .pos-history-list / .pos-history-row DIHAPUS bersama modal "Histori Draft POS" (ADR D-12b): quotation POS tidak lagi mem-persist ke localStorage, jadi tidak ada daftar draft yang perlu digayakan. */ /* ============================================================ PRD 12.25 — POS Frontend (brand navbar, status chip, identity, progressive disclosure, quick-jump). Token-only, additive. ============================================================ */ /* Fix: elemen ber-display:grid/flex tetap tunduk pada atribut [hidden] (popover & collapsible). */ .pos-qj-menu[hidden], .pos-kebab-menu[hidden], .pos-config-grid[hidden], .pos-adjust-box[hidden], .pos-detail-grid[hidden] { display:none !important; } /* Aksen brand per shell (Q4): VS hitam+dot kuning · LUXA hitam mono · NUSSA orange pekat */ .pos-shell { --pos-accent:var(--ink-950); --pos-dot:var(--ink-700); } .pos-shell[data-pos-brand-active="vs"] { --pos-accent:var(--ink-950); --pos-dot:var(--identity-yellow); } .pos-shell[data-pos-brand-active="luxa"] { --pos-accent:var(--ink-950); --pos-dot:var(--ink-900); } .pos-shell[data-pos-brand-active="nussa"] { --pos-accent:var(--pst-orange-text); --pos-dot:var(--sunset-orange); } /* Brand Navbar (F0) — spans semua kolom */ .pos-navbar { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:8px 10px; margin-bottom:2px; } .pos-nav-brands { display:flex; gap:6px; min-width:0; flex-wrap:wrap; } .pos-brand-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--paper); border-radius:var(--r-md); padding:7px 13px; cursor:pointer; transition:border-color .14s, background .14s, color .14s; min-height:40px; } .pos-brand-pill .pos-brand-dot { width:10px; height:10px; border-radius:50%; background:var(--line); flex:none; } .pos-brand-pill[data-brand="vs"] .pos-brand-dot { background:var(--identity-yellow); } .pos-brand-pill[data-brand="luxa"] .pos-brand-dot { background:var(--ink-900); } .pos-brand-pill[data-brand="nussa"] .pos-brand-dot { background:var(--sunset-orange); } .pos-brand-pill .pos-brand-name { font-size:13px; font-weight:740; letter-spacing:-.2px; } .pos-brand-pill small { font-size:10.5px; color:var(--muted); margin-left:2px; } .pos-brand-pill:hover:not(.active):not(:disabled) { border-color:var(--ink); } .pos-brand-pill.active { background:var(--pos-accent); border-color:var(--pos-accent); color:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--pos-accent) 18%, transparent); } .pos-brand-pill.active small { color:rgba(255,255,255,.72); } .pos-brand-pill.active .pos-brand-dot { box-shadow:0 0 0 2px rgba(255,255,255,.3); } .pos-brand-pill[data-brand="luxa"].active .pos-brand-dot { background:#fff; } .pos-brand-pill:disabled { opacity:.4; cursor:not-allowed; } .pos-nav-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .pos-nav-search { min-width:220px; } .pos-nav-search input { padding-top:8px; padding-bottom:8px; } .pos-nav-site { padding:9px 11px; } /* Quick-jump (F5) */ .pos-qj { position:relative; } .pos-qj-btn { white-space:nowrap; } .pos-qj-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:230px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-pop,0 12px 32px rgba(17,18,20,.12)); padding:6px; display:grid; gap:2px; } .pos-qj-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:none; border-radius:var(--r-sm); padding:9px 10px; font-size:12.5px; color:var(--ink); cursor:pointer; } .pos-qj-item span { flex:1; } .pos-qj-item em { font-style:normal; font-size:10px; color:var(--muted); } .pos-qj-item:hover:not(:disabled) { background:var(--paper-warm); } .pos-qj-item:disabled { color:var(--muted); cursor:not-allowed; } .pos-qj-item:disabled svg { opacity:.5; } /* Queue brand-aware (F1) */ .pos-brand-badge { display:inline-block; font-style:normal; font-size:9.5px; font-weight:740; letter-spacing:.03em; border:1px solid var(--line); border-radius:100px; padding:0 6px; margin-right:6px; color:var(--graphite); background:var(--paper-warm); vertical-align:1px; } .pos-brand-badge[data-brand="vs"] { box-shadow:inset 3px 0 0 var(--identity-yellow); } .pos-brand-badge[data-brand="luxa"] { box-shadow:inset 3px 0 0 var(--ink-900); } .pos-brand-badge[data-brand="nussa"] { box-shadow:inset 3px 0 0 var(--sunset-orange); } /* Doc meta: mode segmented + No.Dok chip (F2) */ .pos-docmeta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .pos-mode-seg .seg-btn { padding:7px 11px; font-size:12px; } .pos-docnum { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-warm); padding:2px 4px 2px 9px; } .pos-docnum-input { border:none; background:none; padding:5px 0; width:160px; font-size:11.5px; color:var(--graphite); } .pos-docnum-input[readonly] { cursor:default; } .pos-docnum-input.editing { color:var(--ink); } .pos-mini-edit { border:none; background:none; color:var(--muted); cursor:pointer; padding:4px; border-radius:6px; display:inline-flex; } .pos-mini-edit:hover { background:var(--paper); color:var(--ink); } /* Identity block (F3) */ .pos-ident-wrap { padding:12px 14px; border-bottom:1px solid var(--line-soft); } .pos-ident { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; } .pos-ident-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:1; min-width:240px; } .pos-ident-fields .frow { margin-bottom:0; } .pos-ident-actions { display:flex; gap:6px; flex-wrap:wrap; } .pos-ident--linked { padding:11px 13px; border:1px solid var(--pst-mint-border); background:var(--pst-mint-bg); border-radius:var(--r-sm); justify-content:space-between; } .pos-ident-main { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; } .pos-ident-tag { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--pst-mint-text); } .pos-ident-main b { font-size:13.5px; } .pos-ident-main .mono { font-size:12px; color:var(--graphite); } /* Progressive disclosure (F4) */ .pos-details-toggle, .pos-adjust-toggle { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:none; cursor:pointer; padding:11px 14px; font-size:12.5px; color:var(--ink); border-bottom:1px solid var(--line-soft); } .pos-adjust-toggle { border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:14px; } .pos-details-toggle b, .pos-adjust-toggle b { font-weight:700; } .pos-details-sum, .pos-adjust-sum { flex:1; font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); } .pos-details-toggle svg:last-child, .pos-adjust-toggle svg:last-child { color:var(--muted); transition:transform .16s; } .pos-details-toggle.open svg:last-child, .pos-adjust-toggle.open svg:last-child { transform:rotate(180deg); } .pos-adjust-box { margin-top:-8px; margin-bottom:14px; } /* Status chip (F2/Q3) */ .pos-status-row { display:flex; align-items:center; gap:8px; } .pos-status-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:100px; padding:5px 11px; font-size:12px; font-weight:680; } .pos-status-chip em { font-style:normal; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.7; } .pos-status-chip.is-paid { background:var(--pst-mint-bg); border-color:var(--pst-mint-border); color:var(--pst-mint-text); } .pos-status-chip.is-partial { background:var(--pst-warning-bg); border-color:var(--pst-warning-border); color:var(--pst-warning-text); } .pos-status-chip.is-unpaid { background:var(--pst-neutral-bg); border-color:var(--pst-neutral-border); color:var(--pst-neutral-text); } .pos-status-chip.is-draft { background:var(--pst-neutral-bg); border-color:var(--pst-neutral-border); color:var(--pst-neutral-text); } .pos-status-chip.is-sent { background:var(--pst-blue-bg); border-color:var(--pst-blue-border); color:var(--pst-blue-text); } .pos-status-chip.is-void { background:var(--pst-danger-bg); border-color:var(--pst-danger-border); color:var(--pst-danger-text); } .pos-status-more { position:relative; } .pos-kebab { border:1px solid var(--line); background:var(--paper); border-radius:var(--r-sm); cursor:pointer; width:30px; height:30px; font-size:16px; line-height:1; color:var(--graphite); } .pos-kebab:hover { border-color:var(--ink); color:var(--ink); } .pos-kebab-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:200px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-pop,0 12px 32px rgba(17,18,20,.12)); padding:6px; display:grid; gap:2px; } .pos-kebab-menu button { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:none; border-radius:var(--r-sm); padding:9px 10px; font-size:12.5px; color:var(--ink); cursor:pointer; } .pos-kebab-menu button:hover { background:var(--paper-warm); } /* Breakpoints sadar-sidebar: ruang nyata = viewport − sidebar(232) − padding. Persempit rail Queue lebih dulu, lalu tumpuk sebelum work-area sesak. */ @media (max-width:1180px) { .pos-shell { grid-template-columns:260px minmax(0,1fr); } .pos-config-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .pos-workfoot .pos-action-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:920px) { .pos-shell { grid-template-columns:1fr; } .pos-queue, .pos-work { position:static; max-height:none; } .pos-tabbody { overflow:visible; } .pos-queue-list { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); } } @media (max-width:760px) { .content.content--pos { padding:14px 12px 96px; } .pos-panel-head, .pos-context, .pos-catalog-head, .pos-cart-head { align-items:flex-start; flex-direction:column; } .pos-context-actions, .pos-cat-tools { width:100%; justify-content:stretch; } .pos-cat-tools .search-box { width:100%; max-width:none; } .pos-config-grid, .pos-check-grid, .pos-r-meta, .pos-action-grid, .pos-workfoot .pos-action-grid { grid-template-columns:1fr 1fr; } .pos-line-main { grid-template-columns:1fr 84px 50px 32px; grid-template-areas:"name name name del" "price qty total total"; } .pos-line--rental .pos-line-main { grid-template-columns:1fr 84px 32px; grid-template-areas:"name name del" "price total total"; } .pos-line-main .pos-line-name { grid-area:name; } .pos-line-main .pos-line-price { grid-area:price; } .pos-line-main .pos-line-qty { grid-area:qty; } .pos-line-main .pos-line-total { grid-area:total; text-align:left; align-self:center; } .pos-line-main .pos-line-del { grid-area:del; justify-self:end; } .pos-line-sched-fields, .pos-line-sched-fields.is-rental { grid-template-columns:1fr 1fr; } .pos-order-block { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .pos-order-block > b { grid-column:1; grid-row:1; align-self:center; } .pos-order-block > [data-pos-block-del] { grid-column:2; grid-row:1; justify-self:end; } .pos-order-block > .pos-line-mini:nth-of-type(1) { grid-column:1 / -1; } .pos-order-block .pos-order-spacer { display:none; } .pos-order-block .pos-order-break, .pos-order-block .pos-order-resource { grid-column:1 / -1; } .pos-product-grid { max-height:none; grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ============================================================ PRD 12.39 — POS System redesign (Claude Design import) Additive reskin of the POS surfaces to match "POS System.dc.html". Token-only (no global token changes) · selectors mirror the wired markup, so logic/event-binding is untouched. Loaded AFTER the base POS rules above, so these win by cascade order. Revert = delete block. ============================================================ */ .content.content--pos { background:var(--app-bg); padding:16px 16px 80px; /* design semantic aliases mapped onto existing tokens */ --pos-surface:var(--paper); --pos-surface-1:var(--paper-warm); --pos-canvas:var(--app-bg); --pos-line:var(--line); --pos-line-soft:var(--line-soft); --pos-strong:var(--ink); --pos-body:var(--ink-soft); --pos-muted:var(--ink-700); --pos-subtle:var(--ink-500); --pos-faint:var(--ink-400); } /* Per-brand accent rule colour (3px bar atop the work panel) */ .pos-shell { --pos-rule:var(--ink); } .pos-shell[data-pos-brand-active="vs"] { --pos-rule:var(--identity-yellow); } .pos-shell[data-pos-brand-active="luxa"] { --pos-rule:#3A3A3A; } .pos-shell[data-pos-brand-active="nussa"] { --pos-rule:var(--brand-nussa-accent); } /* VER-3 #4 — satu nilai orange */ /* ---- shell + panels ---- */ .pos-shell { gap:16px; } .pos-queue, .pos-work { background:var(--pos-surface); border:1px solid var(--pos-line); border-radius:var(--r-md); box-shadow:var(--shadow-card); } /* 3-column layout (Booking Queue · Register · Detail+Pembayaran+Dokumen). FLUID widths via minmax(0,Nfr) — proportional "%" tracks that always shrink to fit the real space (viewport − sidebar 232px − padding), so the 3rd column can never clip the way the old fixed-px 3-col did. Collapses 3→2→1 by breakpoint. */ .pos-shell.pos-shell--3col { grid-template-columns: minmax(0,1.1fr) minmax(0,1.85fr) minmax(0,1.4fr); align-items:start; } /* narrow rails: let panel headers wrap their action buttons instead of clipping */ .pos-shell--3col .pos-panel-head, .pos-shell--3col .pos-context { flex-wrap:wrap; row-gap:9px; } .pos-shell--3col .pos-queue, .pos-shell--3col .pos-register, .pos-shell--3col .pos-detail { top:74px; max-height:calc(100dvh - 90px); } /* per-column scroll body; detail column keeps its footer pinned */ .pos-colbody { flex:1 1 auto; min-height:0; overflow:auto; } .pos-detail { display:flex; flex-direction:column; } .pos-detail .pos-workfoot { flex:none; } .pos-detail .pos-workfoot .pos-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } /* detail column: prominent TOTAL TAGIHAN card pinned at TOP (owner pref — biaya langsung terlihat, footer tinggal Simpan + aksi). flex:none so it stays above the scrolling body. */ .pos-detail-total { flex:none; margin:13px 14px 2px; padding:14px 17px; background:var(--ink-950); border-radius:var(--r-md); } .pos-detail-total .pos-foot-total { margin:0; flex-direction:column; align-items:flex-start; gap:6px; } .pos-detail-total .pos-foot-total-l { flex-direction:column; align-items:flex-start; gap:3px; } .pos-detail-total .pos-foot-total span { color:rgba(255,255,255,.55); } .pos-detail-total .pos-foot-total strong { color:#fff; font-size:30px; line-height:1; } .pos-detail-total .pos-total-due { color:rgba(255,255,255,.78); font-size:11.5px; } .pos-detail-total .pos-total-due.is-partial { color:var(--pst-warning-border); } .pos-detail-total .pos-total-due.is-paid { color:var(--pst-mint-border); } @media (max-width:1200px) { .pos-shell.pos-shell--3col { grid-template-columns: minmax(0,1fr) minmax(0,1.55fr); } .pos-shell--3col .pos-detail { grid-column:1 / -1; position:static; max-height:none; } } @media (max-width:900px) { .pos-shell.pos-shell--3col { grid-template-columns:1fr; } .pos-shell--3col .pos-queue, .pos-shell--3col .pos-register { position:static; max-height:none; } .pos-shell--3col .pos-detail { grid-column:auto; } /* queue full-width → cards flow into a responsive grid instead of stretching */ .pos-shell--3col .pos-queue-list { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } } /* brand accent rule — pseudo first flex child, zero markup change */ .pos-work::before { content:''; flex:none; height:3px; background:var(--pos-rule); border-radius:var(--r-md) var(--r-md) 0 0; } /* ---- panel heads ---- */ .pos-panel-head, .pos-context, .pos-catalog-head, .pos-cart-head { padding:15px 16px; border-bottom:1px solid var(--pos-line-soft); } .pos-panel-head h2, .pos-context h2, .pos-catalog-head h2, .pos-cart-head h2 { font-family:var(--font-head); font-weight:700; font-size:15px; letter-spacing:-.01em; } .pos-panel-head span, .pos-context span, .pos-catalog-head span, .pos-cart-head span { font-size:11.5px; color:var(--pos-subtle); } .pos-context-id { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--pos-faint); margin-bottom:4px; } /* ---- booking queue — structured card (header · meta grid · footer) ---- */ .pos-queue-list { gap:9px; padding:10px; } /* header: client name + brand badge */ /* meta grid: id (mono) · layanan · jadwal — each on its own line with an icon */ /* footer: status badge + payment, divided from the meta above */ /* ---- brand navbar → full-gradient identity banner + segmented switcher ---- */ .pos-navbar { flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; border-radius:var(--r-md); border-color:var(--pos-line); box-shadow:var(--shadow-card); } /* Gradient identity band — brand grad tokens from DS (12.34.A palette) */ .pos-nav-banner { display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; padding:15px 18px; color:#fff; position:relative; isolation:isolate; background:var(--brand-vs-grad); transition:background .35s ease; } .pos-navbar[data-brand="vs"] .pos-nav-banner { background:var(--brand-vs-grad); } .pos-navbar[data-brand="luxa"] .pos-nav-banner { background:var(--brand-luxa-grad); } .pos-navbar[data-brand="nussa"] .pos-nav-banner { background:var(--brand-nussa-grad); } /* soft top-right sheen for depth */ .pos-nav-banner::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 150% at 90% -20%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); } .pos-nav-identity { display:flex; align-items:center; gap:13px; min-width:0; } .pos-nav-crest { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.32); } .pos-nav-crest-dot { width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.22); } .pos-navbar[data-brand="vs"] .pos-nav-crest-dot { background:var(--identity-yellow); } .pos-navbar[data-brand="nussa"] .pos-nav-crest-dot { background:#fff; } .pos-nav-idtext { display:flex; flex-direction:column; min-width:0; } .pos-nav-brandname { font-family:var(--font-head); font-weight:800; font-size:18px; line-height:1.05; letter-spacing:.01em; text-transform:uppercase; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pos-nav-tagline { font-size:11.5px; font-weight:500; letter-spacing:.01em; margin-top:3px; color:rgba(255,255,255,.9); text-shadow:0 1px 8px rgba(0,0,0,.26); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* switcher pills — frosted glass on the gradient */ .pos-nav-banner .pos-nav-brands { gap:5px; padding:4px; flex-wrap:nowrap; align-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26); border-radius:var(--r-sm); } .pos-nav-banner .pos-brand-pill { border:1px solid transparent; background:transparent; border-radius:var(--r-xs); padding:7px 13px; min-height:34px; gap:7px; color:rgba(255,255,255,.92); transition:background .16s, color .16s, box-shadow .16s; } .pos-nav-banner .pos-brand-pill .pos-brand-dot { width:9px; height:9px; background:rgba(255,255,255,.8); box-shadow:none; } .pos-nav-banner .pos-brand-pill .pos-brand-name { font-size:12.5px; font-weight:700; color:inherit; } .pos-nav-banner .pos-brand-pill small { display:none; } .pos-nav-banner .pos-brand-pill:hover:not(.active):not(:disabled) { background:rgba(255,255,255,.18); color:#fff; } .pos-nav-banner .pos-brand-pill.active { background:#fff; border-color:#fff; color:var(--ink); box-shadow:0 4px 14px rgba(0,0,0,.2); } .pos-nav-banner .pos-brand-pill.active[data-brand="vs"] .pos-brand-dot { background:var(--identity-yellow); box-shadow:0 0 0 1.5px rgba(5,5,5,.12); } .pos-nav-banner .pos-brand-pill.active[data-brand="luxa"] .pos-brand-dot { background:var(--ink-900); } .pos-nav-banner .pos-brand-pill.active[data-brand="nussa"] .pos-brand-dot { background:var(--sunset-orange); } .pos-nav-banner .pos-brand-pill:disabled { opacity:.5; cursor:not-allowed; } .pos-nav-lock { display:inline-flex; align-items:center; gap:4px; align-self:center; margin-left:4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.85); } /* tools row — plain surface below the band */ .pos-nav-tools { padding:10px 14px; gap:8px; background:var(--pos-surface); } .pos-nav-search { flex:1 1 auto; min-width:160px; max-width:none; } .pos-nav-search input { background:var(--pos-surface-1); } @media (max-width:560px) { .pos-nav-banner { flex-direction:column; align-items:stretch; gap:12px; } .pos-nav-banner .pos-nav-brands { width:100%; } .pos-nav-banner .pos-brand-pill { flex:1 1 0; justify-content:center; } } /* ---- work header: doc meta + status ---- */ .pos-work-head { background:var(--pos-surface); } .pos-docnum { border-radius:var(--r-xs); background:var(--pos-surface-1); border-color:var(--pos-line); } .pos-status-chip { border-radius:var(--r-pill,100px); font-weight:680; } .pos-kebab { border-radius:var(--r-xs); } /* ---- identity: linked customer card (success) + walk-in ---- */ .pos-ident-wrap { padding:14px 16px; } .pos-ident--linked { padding:12px 14px; border-radius:var(--r-md); border-color:var(--pst-success-border); background:var(--pst-success-bg); } .pos-ident-tag { color:var(--pst-success-text); } .pos-ident-main b { font-family:var(--font-head); font-size:16px; font-weight:700; } /* ---- progressive disclosure toggles ---- */ .pos-details-toggle, .pos-adjust-toggle { border:1px solid var(--pos-line); border-radius:var(--r-sm); background:var(--pos-surface); margin:14px 16px; padding:11px 14px; width:auto; } .pos-pane[data-pane="items"] .pos-details-toggle { margin:14px 16px 0; } .pos-details-toggle b, .pos-adjust-toggle b { font-weight:650; } /* Register field grid — auto-fit tracks so every field keeps a consistent width and reflows 1→N columns responsively (overrides the fixed 3/2-col base rules above via source order). */ .pos-config-grid { grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); padding:0 16px 14px; border-bottom:none; gap:12px 13px; align-items:end; } .pos-config-grid .frow { display:flex; flex-direction:column; gap:5px; margin-bottom:0; min-width:0; } .pos-config-grid .frow label { font-size:10.5px; font-weight:650; text-transform:uppercase; letter-spacing:.04em; color:var(--pos-subtle); } .pos-config-grid .frow .ctrl { width:100%; } .pos-config-grid .frow .fhint { font-size:10px; line-height:1.4; color:var(--pos-faint); } .pos-pane[data-pane="items"] .pos-config-grid { padding:14px 16px; margin:0 16px 4px; border:1px solid var(--pos-line); border-radius:var(--r-md); } /* identity fields keep the same consistent min-width so name/phone line up with the advanced-detail grid above them */ .pos-ident-fields { grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); } /* ---- category chips (hirarki: utama dulu · pemisah Add-on) ---- */ .pos-cat-chips { padding:12px 16px 4px; gap:8px; align-items:center; } .pos-cat-chip { border-radius:100px; border-color:var(--pos-line); font-weight:600; } .pos-cat-chip:hover { background:var(--pos-surface-1); } .pos-cat-sep { display:inline-flex; align-items:center; gap:4px; margin:0 2px; padding-left:8px; border-left:1px solid var(--pos-line); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pos-faint); white-space:nowrap; } .pos-cat-sep svg { color:var(--pos-faint); } /* ---- catalog product cards ---- */ .pos-product-grid { grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; padding:8px 16px 16px; border-bottom:none; } .pos-prod-group { grid-column:1 / -1; display:flex; align-items:center; gap:9px; padding:10px 0 2px; } .pos-prod-group::after { content:''; flex:1; height:1px; background:var(--pos-line-soft); } /* add-on group heading + cards: quieter tone so main packages read first */ .pos-prod-kind { display:inline-flex; align-items:center; gap:4px; flex:none; padding:2px 8px; border:1px dashed var(--pos-line); border-radius:100px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pos-subtle); } .pos-prod-group.is-addon { padding-top:14px; } .pos-product.is-addon { min-height:70px; background:var(--pos-surface-1); } .pos-product.is-addon::after { content:'+ Add-on'; } .pos-product { min-height:82px; padding:13px 13px 30px; gap:9px; border-radius:var(--r-md); background:var(--pos-surface); border-color:var(--pos-line); justify-content:space-between; } .pos-product::before { width:3px; opacity:.85; } .pos-product:hover { background:var(--pos-surface); border-color:var(--ink); box-shadow:var(--shadow-card); transform:translateY(-1px); } .pos-product b { font-size:13.5px; font-weight:600; color:var(--pos-strong); } .pos-product span { font-size:13px; font-weight:600; color:var(--pos-strong); } /* "+ Tambah" affordance via pseudo (no markup change), pinned bottom-right */ .pos-product::after { content:'+ Tambah'; position:absolute; right:13px; bottom:11px; font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--pos-subtle); } /* ---- cart / line items ---- */ .pos-cart { padding:14px 16px 18px; gap:10px; } .pos-line { border-radius:var(--r-md); border-color:var(--pos-line); background:var(--pos-surface); padding:12px 12px 12px 15px; } .pos-line:hover { border-color:var(--pos-line); box-shadow:var(--shadow-card); } .pos-line-name { font-weight:600; } .pos-line-total { font-size:13px; } /* B2: schedule fields reflow consistently (Tanggal · Jam mulai · Durasi · Selesai) */ .pos-line-sched-fields, .pos-line-sched-fields.is-rental { grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); align-items:end; } /* B2: compact duration stepper [-] [input] [+] — joined segmented control */ .pos-stepper { display:flex; align-items:stretch; } .pos-stepper .ctrl, .pos-stepper .vs-field__control { flex:1 1 auto; min-width:0; text-align:center; border:0; border-radius:0; box-shadow:none; } .pos-step { flex:none; width:30px; display:grid; place-items:center; cursor:pointer; color:var(--ink); border:1px solid var(--pos-line); background:var(--pos-surface); -webkit-tap-highlight-color:transparent; } .pos-step:first-child { border-radius:var(--r-xs) 0 0 var(--r-xs); } .pos-step:last-child { border-radius:0 var(--r-xs) var(--r-xs) 0; } .pos-step:hover { border-color:var(--ink); color:var(--ink); position:relative; z-index:1; } .pos-step:active { background:var(--pos-surface-1); transform:scale(.95); } /* B2: auto-computed end time — read-only badge */ .pos-line-endwrap { min-width:0; } .pos-line-endtime { display:flex; align-items:center; gap:5px; min-height:36px; padding:8px 10px; border:1px dashed var(--pos-line); border-radius:var(--r-sm); background:var(--pos-surface-1); font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--pos-strong); } .pos-line-endtime.is-empty::before { content:'—'; color:var(--pos-faint); font-weight:600; } /* ---- work tabs (underline) ---- */ .pos-tabs { padding:0 16px; gap:4px; border-bottom:1px solid var(--pos-line); } .pos-tab { padding:13px 14px; font-size:13px; } .pos-tab.active { border-bottom-color:var(--ink); } .pos-tab-badge { border-radius:100px; } /* ---- payment summary card ---- */ .pos-pay-sec { border-radius:var(--r-md); background:var(--pos-surface); border-color:var(--pos-line); padding:14px; } .pos-pay-methods button { border-radius:var(--r-sm); padding:11px 8px; font-weight:600; } .pos-pay-methods button.active { background:var(--ink); border-color:var(--ink); } .pos-dp-chip { border-radius:var(--r-sm); padding:10px 8px; } .pos-dp-chip.active { background:var(--ink); border-color:var(--ink); } .pos-summary { border-radius:var(--r-md); border-color:var(--pos-line); box-shadow:var(--shadow-card); } .pos-sum-row { padding:11px 14px; font-size:13.5px; } .pos-sum-row.total { background:transparent; border-top:1px solid var(--pos-line); font-family:var(--font-head); font-weight:800; } .pos-sum-row.total span { font-size:14px; } .pos-sum-row.total b { font-family:var(--font-head); font-size:19px; } /* remaining-balance highlighted box */ .pos-sum-row.due { margin:10px 12px 12px; border-radius:var(--r-sm); border:1px solid var(--pst-warning-border); background:var(--pst-warning-bg); padding:11px 13px; font-weight:700; } .pos-sum-row.due b { font-size:15px; } /* ---- document tab preview ---- */ /* Dibatasi ke kartu struk LAMA (`:not(.vs-receipt)`) — dulu selektornya menyebut .pos-watermark yang sudah dihapus, dan `> *` di sini lebih spesifik daripada aturan .vs-receipt sehingga akan diam-diam mengembalikan margin samping ke struk kanonik. Batasi di selektornya, jangan diadu spesifisitas. */ .pos-receipt-card:not(.vs-receipt) { border-radius:var(--r-md); box-shadow:var(--shadow-card); padding:0; } .pos-receipt-card:not(.vs-receipt)::before { content:''; display:block; height:4px; background:var(--pos-rule); } .pos-receipt-card:not(.vs-receipt) > * { margin-left:22px; margin-right:24px; } .pos-r-head { padding-top:20px; } .pos-r-brand { font-family:var(--font-head); font-weight:800; font-size:18px; letter-spacing:-.01em; } .pos-r-foot { margin-bottom:20px; } .pos-wa-text { border-radius:var(--r-md); background:var(--ink-050,var(--paper-warm)); } /* ---- cross-tab footer ---- */ .pos-workfoot { padding:13px 16px; } .pos-foot-total strong { font-family:var(--font-head); font-size:24px; } .pos-cta { border-radius:var(--r-sm); font-weight:650; } /* ---- B3: pos-detail — grid rapi · hint kecil · accordion dokumen ---- */ /* hint text lebih kecil agar tidak memakan ruang di kolom detail */ .pos-detail .fhint { font-size:10px; line-height:1.42; color:var(--pos-faint); margin-top:5px; } .pos-detail .pos-total-due { font-size:11px; } .pos-detail .pos-mini-label { font-size:9.5px; } /* metode bayar & chip DP → grid lebar sama */ .pos-detail .pos-pay-methods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .pos-detail .pos-dp-chips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .pos-detail .pos-dp-chip { flex:none; } .pos-detail .pos-check-grid { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); } /* accordion "Catatan & preview dokumen" — mirror gaya toggle lain */ .pos-doc-toggle { display:flex; align-items:center; gap:9px; width:auto; text-align:left; cursor:pointer; border:1px solid var(--pos-line); border-radius:var(--r-sm); background:var(--pos-surface); margin:2px 16px 12px; padding:11px 14px; font-size:12.5px; color:var(--ink); } .pos-doc-toggle b { font-weight:650; } .pos-doc-sum { flex:1; font-size:11px; color:var(--pos-subtle); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pos-doc-toggle svg:last-child { color:var(--muted); transition:transform .16s; } .pos-doc-toggle.open svg:last-child { transform:rotate(180deg); } .pos-doc-toggle:hover { border-color:var(--ink); } .pos-doc-body { padding-top:0; } /* ---- popovers / quick-jump ---- */ .pos-qj-menu, .pos-kebab-menu { border-radius:var(--r-md); box-shadow:var(--shadow-pop); } .pos-qj-item, .pos-kebab-menu button { border-radius:var(--r-sm); } /* ═══════════════════════════════════════════════════════════════════════ PRD 12.37 — POS REFRESH (prototype "POS System.dc.html", Claude Design) Additive override layer di atas reskin 12.39. Loaded PALING AKHIR di region POS → menang cascade. CSS-only: cermin markup ter-wire, nol ubah logic/handler/id. Token DS v2.0 (bridge di app.css). Revert = hapus blok. ═══════════════════════════════════════════════════════════════════════ */ /* Per-brand accent + gradient mengalir ke crest, top-strip & hero total */ .pos-shell.pos-shell--3col { gap:14px; } .pos-shell[data-pos-brand-active="vs"] { --brand-accent:var(--brand-vs-accent); --brand-gradient:var(--brand-vs-grad); } .pos-shell[data-pos-brand-active="luxa"] { --brand-accent:var(--brand-luxa-accent); --brand-gradient:var(--brand-luxa-grad); } .pos-shell[data-pos-brand-active="nussa"] { --brand-accent:var(--brand-nussa-accent); --brand-gradient:var(--brand-nussa-grad); } .content.content--pos { background:var(--canvas); } /* ── Navbar → bar putih bersih + strip aksen 3px + crest hitam (prototype) ── */ .pos-navbar { position:relative; background:var(--surface-0); border-color:var(--border-default); } .pos-navbar::before { content:''; display:block; height:3px; background:var(--brand-accent); } .pos-nav-banner, .pos-navbar[data-brand="vs"] .pos-nav-banner, .pos-navbar[data-brand="luxa"] .pos-nav-banner, .pos-navbar[data-brand="nussa"] .pos-nav-banner { background:var(--surface-0); color:var(--text-strong); padding:13px 16px; } .pos-nav-banner::after { display:none; } .pos-nav-crest { background:var(--vs-black); border:0; border-radius:var(--radius-sm); width:44px; height:44px; box-shadow:var(--shadow-xs); } .pos-nav-crest-dot { box-shadow:none; } .pos-navbar[data-brand="vs"] .pos-nav-crest-dot { background:var(--brand-accent); } .pos-navbar[data-brand="luxa"] .pos-nav-crest-dot, .pos-navbar[data-brand="nussa"] .pos-nav-crest-dot { background:#fff; } .pos-nav-brandname { color:var(--text-strong); text-shadow:none; font-size:16px; letter-spacing:-.01em; } .pos-nav-tagline { color:var(--text-subtle); text-shadow:none; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; } .pos-nav-banner .pos-nav-brands { background:var(--surface-1); border:1px solid var(--border-default); border-radius:var(--radius-pill); padding:4px; gap:4px; } .pos-nav-banner .pos-brand-pill { color:var(--text-muted); border-radius:var(--radius-pill); } .pos-nav-banner .pos-brand-pill .pos-brand-dot { background:var(--ink-300); } .pos-nav-banner .pos-brand-pill .pos-brand-name { color:inherit; } .pos-nav-banner .pos-brand-pill:hover:not(.active):not(:disabled) { background:var(--surface-0); color:var(--text-strong); } .pos-nav-banner .pos-brand-pill.active { background:var(--vs-black); border-color:var(--vs-black); color:#fff; box-shadow:none; } .pos-nav-banner .pos-brand-pill.active .pos-brand-name { color:#fff; } .pos-nav-banner .pos-brand-pill.active .pos-brand-dot { box-shadow:0 0 0 1.5px rgba(255,255,255,.25); } .pos-nav-lock { color:var(--text-subtle); } .pos-nav-tools { border-top:1px solid var(--line-100); background:var(--surface-0); } .pos-nav-search input { background:var(--surface-1); } /* ── Total hero → gradient brand ekspresif + angka tabular besar (prototype) ── */ .pos-detail-total { background:var(--brand-gradient); border-radius:var(--radius-md); box-shadow:var(--shadow-card); position:relative; overflow:hidden; padding:16px 18px; } .pos-detail-total .pos-foot-total span { color:rgba(255,255,255,.6); font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; } .pos-detail-total .pos-foot-total strong { color:#fff; font-size:34px; letter-spacing:-.02em; line-height:1.02; font-variant-numeric:tabular-nums; } .pos-detail-total .pos-total-due { color:rgba(255,255,255,.72); font-family:var(--font-mono); font-size:11.5px; } .pos-detail-total__ico { position:absolute; top:16px; right:18px; width:30px; height:30px; border-radius:var(--radius-xs); display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; } .pos-detail-total__ico svg { width:16px; height:16px; } /* ── Kartu & permukaan → token DS v2.0 (radius/shadow/border konsisten) ── */ .pos-queue, .pos-work { border-color:var(--border-default); box-shadow:var(--shadow-card); } .pos-product { border-radius:var(--radius-sm); background:var(--surface-0); } .pos-product:hover { border-color:var(--vs-black); box-shadow:var(--shadow-card); } .pos-line { border-radius:var(--radius-sm); background:var(--surface-0); } /* ── Chip kategori, tombol Add-item aksen, segmented & ringkasan ── */ .pos-cat-chip { border-radius:var(--radius-pill); border-color:var(--border-default); } .pos-cat-chip.active { background:var(--vs-black); color:#fff; border-color:var(--vs-black); } .pos-cat-chip.active .pos-cat-dot { display:none; } .pos-mode-seg .seg-btn.active { background:var(--surface-0); color:var(--text-strong); box-shadow:var(--shadow-xs); } .pos-sum-row.total { background:var(--surface-1); color:var(--text-strong); } .pos-sum-row.due { background:var(--tag-warning-bg); color:var(--tag-warning-text); } .pos-cta.abtn--dark { background:var(--vs-black); border-radius:var(--radius-sm); } .pos-cta.abtn--dark:hover { background:var(--primary-hover); } /* ═══ 12.37 REFRESH — adaptasi struktur/workflow prototype (kartu + modal) ═══ */ /* Kolom Register & Checkout jadi TRANSPARAN → kartu mengambang di kanvas (Queue tetap 1 panel) */ .pos-shell--3col .pos-register, .pos-shell--3col .pos-detail { background:transparent; border:0; box-shadow:none; border-radius:0; } .pos-register::before, .pos-detail::before { display:none; } .pos-reg-body { display:flex; flex-direction:column; gap:14px; padding:2px; } .pos-shell--3col .pos-detail { gap:13px; } .pos-detail .pos-detail-total { margin:2px 2px 0; } .pos-detail .pos-colbody { display:flex; flex-direction:column; gap:13px; padding:2px; } /* Kartu dasar */ .pos-card { background:var(--surface-0); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:16px; } .pos-card__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .pos-detail-sum { font-size:11.5px; color:var(--text-subtle); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } /* Context card */ .pos-ctxcard { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; } .pos-ctxcard__main { min-width:0; flex:1 1 210px; } .pos-ctxcard .pos-context-id { font-size:11px; color:var(--text-muted); } .pos-ctxcard__name { font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.02em; line-height:1.05; color:var(--text-strong); margin:8px 0 12px; } .pos-ctxcard .pos-mode-seg { display:inline-flex; } .pos-ctxcard__meta { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto; } .pos-ctxcard__meta .pos-mini-label { margin:0; } .pos-ctxcard .pos-context-actions { display:flex; gap:7px; margin-top:2px; } /* Identitas + Detail grid */ .pos-cardgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); gap:14px; } .pos-identcard .pos-ident-wrap { padding:0; border:0; margin-top:12px; } .pos-detailcard .pos-config-grid { padding:0; border:0; margin:0; grid-template-columns:1fr 1fr; } /* Cart card */ .pos-cartcard { padding:0; overflow:hidden; } .pos-cartcard .pos-cart-head { padding:14px 16px; border-bottom:1px solid var(--line-100); } .pos-cart-head__l { display:flex; align-items:center; gap:9px; min-width:0; } .pos-cart-head__l h2 { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text-strong); } .pos-cart-ico { width:32px; height:32px; border-radius:var(--radius-xs); background:var(--vs-black); color:#fff; display:grid; place-items:center; flex:none; } .pos-cart-actions { display:flex; gap:8px; flex:none; } .pos-cartcard .pos-cart { padding:12px 14px 16px; } .pos-addbtn { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border:0; border-radius:var(--radius-sm); background:var(--brand-accent); color:var(--brand-accent-ink); font-family:var(--font-body); font-size:13px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-identity); white-space:nowrap; } .pos-addbtn:hover { filter:brightness(.96); } /* Summary card + method summary */ .pos-sumcard .pos-summary { margin:12px 0 0; } .pos-sum-actions { display:flex; gap:8px; margin-top:14px; } .pos-sum-actions .abtn { flex:1; justify-content:center; height:40px; min-width:0; } .pos-method-summary { display:flex; align-items:center; gap:9px; margin-top:12px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--surface-1); border:1px solid var(--border-default); } .pos-method-ico { width:30px; height:30px; border-radius:var(--radius-xs); background:var(--vs-black); color:#fff; display:grid; place-items:center; flex:none; } .pos-method-txt { flex:1; min-width:0; } .pos-method-txt b { display:block; font-size:12.5px; color:var(--text-strong); } .pos-method-txt span { font-size:11px; color:var(--text-subtle); } .pos-method-dp { text-align:right; flex:none; } .pos-method-dp b { font-family:var(--font-mono); font-size:13px; color:var(--text-strong); } /* Status card */ .pos-statuscard .pos-status-row { display:flex; align-items:center; justify-content:space-between; gap:10px; } .pos-statuscard__chip { margin-top:9px; } /* Doc toggle & footer di kolom transparan → beri permukaan sendiri */ .pos-detail .pos-doc-toggle { margin:0 2px; background:var(--surface-0); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-card); } .pos-detail .pos-doc-body { background:var(--surface-0); border:1px solid var(--border-default); border-top:0; border-radius:0 0 var(--radius-md) var(--radius-md); margin:-6px 2px 0; padding:12px 14px; } .pos-detail .pos-workfoot { background:transparent; border-top:0; padding:6px 2px 2px; } /* Modal overlay (katalog / penyesuaian / pembayaran) */ html.pos-modal-open, body.pos-modal-open { overflow:hidden; } .pos-modal { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(5,5,5,.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:posmodal-fade .14s ease; } .pos-modal[hidden] { display:none !important; } .pos-modal__card { width:min(560px,100%); max-height:86vh; display:flex; flex-direction:column; background:var(--surface-0); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); overflow:hidden; animation:posmodal-pop .16s ease; } .pos-modal__card--wide { width:min(900px,100%); height:min(720px,86vh); } .pos-modal__head { display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line-100); } .pos-modal__title { flex:1; min-width:0; } .pos-modal__title b { display:block; font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--text-strong); } .pos-modal__title span { font-size:12px; color:var(--text-subtle); } .pos-modal__search { width:260px; max-width:42%; flex:none; } .pos-modal__x { width:40px; height:40px; flex:none; display:grid; place-items:center; border:1px solid var(--border-input); border-radius:var(--radius-xs); background:var(--surface-0); color:var(--text-muted); cursor:pointer; } .pos-modal__x:hover { background:var(--surface-1); } .pos-modal__body { padding:18px 20px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; } .pos-modal__scroll { padding:16px 20px; overflow-y:auto; flex:1 1 auto; min-height:0; } .pos-modal__card--wide .pos-cat-chips { padding:14px 20px; border-bottom:1px solid var(--line-100); margin:0; } .pos-modal__card--wide .pos-product-grid { max-height:none; border:0; padding:0; grid-template-columns:repeat(3,1fr); overflow:visible; } .pos-modal__foot { padding:0 20px 18px; } .pos-modal__foot .abtn { width:100%; justify-content:center; height:46px; } @keyframes posmodal-fade { from{opacity:0} to{opacity:1} } @keyframes posmodal-pop { from{transform:translateY(8px) scale(.99);opacity:0} to{transform:none;opacity:1} } @media (prefers-reduced-motion:reduce){ .pos-modal, .pos-modal__card { animation:none; } } /* ═══ 12.37 REVISI layout — navbar dihapus, switcher→header, queue tools, kompak ═══ */ /* Brand switcher header — gradient hologram per brand + thumb geser (slide); ukuran ringkas */ .pos-hdr-brands { --brandc:var(--identity-yellow); --brand-ink:rgba(24,24,16,.60); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 11px; isolation:isolate; overflow:hidden; /* Lebar DIKUNCI (widest = brand-name terpanjang aktif) → ganti brand tak mengubah lebar, jadi switcher absolut-tengah tak "loncat" (translate -50% stabil). */ width:322px; box-sizing:border-box; border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-pill); background: radial-gradient(130% 170% at 78% 50%, color-mix(in srgb, var(--brandc) 55%, transparent) 0%, transparent 70%), linear-gradient(100deg, color-mix(in srgb, var(--brandc) 60%, #2c2c26) 0%, color-mix(in srgb, var(--brandc) 92%, #fff 6%) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 4px 14px -8px rgba(0,0,0,.55); transition:background .45s ease; } .pos-hdr-brands[data-active-brand="vs"] { --brandc:var(--identity-yellow); --brand-ink:rgba(24,24,16,.60); } .pos-hdr-brands[data-active-brand="luxa"] { --brandc:#3a3a40; --brand-ink:rgba(255,255,255,.60); } .pos-hdr-brands[data-active-brand="nussa"] { --brandc:var(--sunset-orange); --brand-ink:rgba(28,14,8,.62); } /* Lapisan hologram: pita cahaya lembut yang bergerak pelan */ .pos-hdr-brands::before { content:""; position:absolute; inset:-40% -20%; z-index:0; pointer-events:none; mix-blend-mode:screen; opacity:.5; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 48%, rgba(180,220,255,.28) 54%, transparent 70%); background-size:220% 100%; animation:posHolo 7s linear infinite; } @keyframes posHolo { 0%{background-position:180% 0} 100%{background-position:-60% 0} } /* Thumb putih yang menggeser ke pill aktif (posisi diukur via JS) */ .pos-hdr-brands__thumb { position:absolute; z-index:1; top:3px; bottom:3px; left:0; width:0; opacity:0; border-radius:var(--radius-pill); background:linear-gradient(180deg, #fff, #f4f4f2); box-shadow:0 2px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.6); transform:translateX(0); transition:transform .34s cubic-bezier(.22,.61,.36,1), width .34s cubic-bezier(.22,.61,.36,1); } .pos-hdr-brands .pos-brand-pill { position:relative; z-index:2; display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 15px; border:0; background:transparent; border-radius:var(--radius-pill); color:var(--brand-ink); font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; cursor:pointer; transition:color .28s ease; } .pos-hdr-brands .pos-brand-ico { display:inline-flex; flex:none; opacity:.85; transition:opacity .2s; } .pos-hdr-brands .pos-brand-ico svg { width:13px; height:13px; } /* Kompak: nama hanya untuk pill aktif; non-aktif = ikon saja (footprint ramping). */ .pos-hdr-brands .pos-brand-name { display:none; } .pos-hdr-brands .pos-brand-pill.active .pos-brand-name { display:inline; } .pos-hdr-brands .pos-brand-pill:not(.active) { padding:0 12px; } .pos-hdr-brands .pos-brand-pill:hover:not(.active):not(:disabled) { color:color-mix(in srgb, var(--brand-ink) 55%, #fff 20%); } .pos-hdr-brands .pos-brand-pill:hover:not(.active):not(:disabled) .pos-brand-ico { opacity:1; } .pos-hdr-brands .pos-brand-pill.active { color:var(--ink-950); background:transparent; box-shadow:none; } .pos-hdr-brands .pos-brand-pill.active .pos-brand-ico { opacity:1; } .pos-hdr-brands .pos-brand-pill:disabled { opacity:.4; cursor:not-allowed; } .pos-hdr-brands .pos-nav-lock { position:relative; z-index:2; display:inline-flex; align-items:center; color:var(--brand-ink); padding-left:4px; } @media (prefers-reduced-motion:reduce) { .pos-hdr-brands::before { animation:none; } .pos-hdr-brands__thumb { transition:none; } } /* Queue: tools (search + brand toggle) + quick-jump bento ikon-only */ .pos-queue-search { flex:1 1 auto; min-width:0; height:36px; } .pos-queue-search input { font-size:12.5px; } .pos-qj-bento { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:0 14px 12px; border-bottom:1px solid var(--line-100); margin-bottom:10px; } .pos-qj-cell { display:grid; place-items:center; height:38px; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--surface-0); color:var(--text-muted); cursor:pointer; transition:border-color .14s, color .14s, background .14s; } .pos-qj-cell:hover:not(:disabled) { border-color:var(--vs-black); color:var(--text-strong); background:var(--surface-1); } .pos-qj-cell:disabled { opacity:.4; cursor:not-allowed; } /* Queue card: rapikan detail (svc di atas, id + jadwal satu baris) */ /* Kolom kanan lebih ramping + gap kolom rapat */ .pos-shell.pos-shell--3col { grid-template-columns:minmax(238px,1.02fr) minmax(0,2.05fr) minmax(0,1.02fr); gap:12px; } /* Kompak: font & padding lebih hemat tapi tetap terbaca (cart cepat kelihatan) */ .pos-reg-body, .pos-detail .pos-colbody { gap:10px; padding:2px; } .pos-shell--3col .pos-detail { gap:10px; } .pos-cardgrid { gap:10px; } .pos-shell .pos-card { padding:12px 14px; } .pos-ctxcard__name { font-size:19px; margin:5px 0 9px; } .pos-detailcard .pos-config-grid { gap:9px; } .pos-detailcard .frow label, .pos-identcard .frow label { font-size:10px; } .pos-sum-actions .abtn { height:38px; font-size:12.5px; } .pos-method-summary { padding:9px 11px; margin-top:10px; } .pos-detail .pos-detail-total { padding:13px 15px; } .pos-detail .pos-detail-total .pos-foot-total strong { font-size:30px; } .pos-cartcard .pos-cart-head { padding:12px 14px; } .pos-cartcard .pos-cart { padding:10px 12px 14px; } /* ═══ 12.37 REVISI-2 — switcher tengah, kolom penuh (isi scroll), kartu kompak ═══ */ /* (1) Brand switcher di header admin. Nama brand kini lengkap (lebih lebar), jadi switcher TIDAK lagi overlay absolut di tengah — itu menutup util topbar (bell/chat/help/trash/Pedoman). Sekarang ikut alur flex, rata kanan bersama util. */ .admin-top { position:relative; } /* Brand switcher = pusatkan absolut di header (prototype: switcher rata-tengah topbar). Tools (Brand ini · Baru) tetap rata kanan. position:absolute juga mengembalikan switcher jadi offsetParent pill-nya → thumb geser ukur offsetLeft dengan benar (sebelumnya position:static bikin thumb salah posisi / mengambang). */ .admin-top__tools:has(.pos-hdr-brands) { justify-content:flex-end; } .admin-top:has(.pos-hdr-brands) .admin-top__tools { position:static; } /* POS: header WAJIB sticky (global .admin-top di-set position:relative → scroll hilang & money bar sticky top:64px meninggalkan gap). Sticky tetap positioned → offsetParent switcher. */ .admin-top:has(.pos-hdr-brands) { position:sticky; top:0; z-index:22; } .pos-hdr-brands { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:6; margin:0; } .pos-hdr-brands .pos-brand-pill { justify-content:center; } @media (max-width:1200px) { /* Ruang header lebih sempit → switcher kembali inline lebih awal (position:relative agar thumb tetap terukur benar), ikut alur tools dgn margin agar tak menempel. */ .pos-hdr-brands { position:relative; left:auto; top:auto; transform:none; margin:0 4px 0 10px; } } @media (max-width:760px) { /* Header POS di layar kecil: brand switcher (±322px) + tools (±181px) tak muat sebaris dengan ikon topbar → wrap jadi 3–4 baris dan header memakan ±190px tinggi. Tools dinaikkan ke baris ikon (34+148+181 muat), switcher dapat barisnya sendiri. */ .admin-top:has(.pos-hdr-brands) .admin-top__tools { flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:8px; } .pos-hdr-tools { order:-1; flex:0 0 auto; } .pos-hdr-brands { order:0; flex:1 1 100%; max-width:340px; margin-inline:auto; min-width:0; justify-content:center; } } @media (max-width:430px) { /* Ponsel: "Brand ini" + "Baru" (181px) masih memaksa baris ketiga → rapatkan tombol supaya muat sebaris dengan cluster ikon (label tetap ada, bukan icon-only). */ .pos-hdr-tools { gap:6px; } .pos-hdr-tools .vs-btn { padding:0 9px; font-size:11.5px; gap:5px; } /* "Brand ini" jadi ikon saja: font-size:0 menyembunyikan label secara visual TAPI teksnya tetap ada di accessibility tree (accessible name & title utuh). */ } /* (3) Kolom isi PENUH tinggi (nempel), nol kanvas kosong — hanya isi yang scroll */ .pos-shell--3col .pos-queue, .pos-shell--3col .pos-register, .pos-shell--3col .pos-detail { height:calc(100dvh - 90px); max-height:none; } .pos-reg-body { overflow:hidden; } .pos-cartcard { flex:1 1 auto; min-height:140px; display:flex; flex-direction:column; } .pos-cartcard .pos-cart { flex:1 1 auto; min-height:0; overflow:auto; } .pos-cartcard .pos-empty { height:100%; margin:0; } /* (2) Identitas & Detail booking lebih ringkas (input pendek, tak kebesaran) */ .pos-identcard .ctrl, .pos-detailcard .ctrl { height:38px; min-height:38px; padding:6px 11px; font-size:12.5px; } .pos-identcard, .pos-detailcard { padding:11px 12px; } .pos-identcard .pos-ident-wrap { margin-top:9px; } .pos-detailcard .pos-card__head { margin-bottom:9px; } .pos-detailcard .pos-config-grid { gap:8px 10px; } /* ═══ 12.37 REVISI-3 — total tagihan isi space, ikon cart, tag queue grid ═══ */ /* (1) Kartu TOTAL TAGIHAN melar mengisi ruang kosong kolom kanan (angka di tengah) */ .pos-detail .pos-detail-total { flex:1 1 auto; min-height:120px; display:flex; flex-direction:column; justify-content:center; } .pos-detail .pos-colbody { flex:0 1 auto; } /* (2b) Ikon Cart tanpa blok hitam — ikon polos biar clean */ .pos-cart-head__l .pos-cart-ico { width:auto; height:auto; background:transparent; color:var(--text-strong); border-radius:0; box-shadow:none; } .pos-cart-head__l .pos-cart-ico svg { width:20px; height:20px; color:var(--text-strong); } /* ═══ 12.37 REVISI-4 — Detail booking lega + input rapi (fix select ketiban chevron) ═══ */ /* Ambil sedikit lebar dari Identitas → beri ke Detail booking */ .pos-cardgrid { grid-template-columns:minmax(0,0.9fr) minmax(0,1.15fr); } @media (max-width:900px) { .pos-cardgrid { grid-template-columns:1fr; } } /* Layanan full-width: teks panjang + hint tak sesak, baris lain jadi rata */ .pos-detailcard .pos-config-grid .frow:first-child { grid-column:1 / -1; } .pos-detailcard .pos-config-grid .frow:first-child .fhint { margin-top:4px; } /* FIX overlap: select butuh ruang kanan utk chevron (jangan ketiban teks) */ .pos-identcard select.ctrl, .pos-detailcard select.ctrl { padding:6px 34px 6px 11px; text-overflow:ellipsis; } /* Input rapi & konsisten */ .pos-identcard .ctrl, .pos-detailcard .ctrl { border-color:var(--border-input); border-radius:var(--radius-sm); background:var(--surface-0); } .pos-identcard .ctrl:focus, .pos-detailcard .ctrl:focus { border-color:var(--vs-black); outline:none; box-shadow:0 0 0 3px var(--focus-ring); } .pos-detailcard .pos-config-grid .frow > label { margin-bottom:5px; } /* (3) Footer kartu queue dirapikan grid: status di atas, chip bayar + sisa satu baris */ /* ---------- Schedule editor / Kalender Global ---------- */ .wk-list { display:flex; flex-direction:column; } .wk-row { display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); } .wk-row:last-child { border-bottom:none; } .wk-day { display:flex; align-items:center; gap:8px; width:108px; flex:none; font-size:13.5px; font-weight:560; cursor:pointer; } .wk-day input { width:16px; height:16px; } .wk-times { display:flex; align-items:center; gap:8px; } .wk-times .ctrl { width:118px; } .wk-dash { color:var(--muted); } .wk-closed { font-size:13px; } .rule-card { border:1px solid var(--line); border-radius:var(--r-sm,10px); padding:14px; margin-bottom:12px; background:var(--paper,#fff); } .rule-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; } .rule-head b { display:flex; align-items:center; gap:6px; } .rdel { background:none; border:none; color:var(--danger); cursor:pointer; padding:4px; border-radius:6px; } .rdel:hover { background:var(--paper-warm2,#f3f2ee); } .wd-chips { display:flex; flex-wrap:wrap; gap:6px; } .wd-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border:1px solid var(--line); border-radius:100px; background:var(--paper); color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer; user-select:none; } .wd-chip.on { background:var(--ink); color:#fff; border-color:var(--ink); } .wd-chip input { width:13px; height:13px; margin:0; } .wd-chip input:disabled { cursor:not-allowed; } /* ============================================================ BOOKING DASHBOARD & DB (PRD 12.02) — dashboard, payment, calendar, room management additions. ============================================================ */ /* KPI grid (6 cards) + clickable stat */ .stat-grid.kpi6 { grid-template-columns: repeat(6, 1fr); } a.stat { text-decoration:none; transition: border-color .14s, box-shadow .14s, transform .12s; } a.stat:hover { border-color: var(--ink); box-shadow: var(--shadow-1); transform: translateY(-1px); } .stat.warn { border-color:#E8D08A; } .stat.warn .num { color:var(--pst-warning-text); } .stat.ok .num { color: var(--ok); } @media (max-width: 1100px){ .stat-grid.kpi6 { grid-template-columns: repeat(3,1fr); } } @media (max-width: 560px){ .stat-grid.kpi6 { grid-template-columns: repeat(2,1fr); } } /* Finance: tepat 4 KPI → isi 4 kolom (tak ada kolom kosong di kanan). Layar sempit pakai kolom lebih sedikit agar nominal Rp besar muat 1 baris. */ .stat-grid.kpi4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 960px){ .stat-grid.kpi4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 480px){ .stat-grid.kpi4 { grid-template-columns: 1fr; } } /* dashboard 2-column */ .dash-2col { display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-bottom:20px; } @media (max-width: 900px){ .dash-2col { grid-template-columns:1fr; } } /* alert list */ .alert-list { display:flex; flex-direction:column; } .alert-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 16px; border:0; border-bottom:1px solid var(--line-soft); background:transparent; cursor:pointer; font:inherit; font-size:13px; color:var(--ink); } .alert-row:last-child { border-bottom:0; } .alert-row:hover { background:var(--paper-warm); } .alert-row span { flex:1; min-width:0; } .alert-row svg:first-child { flex:none; } .alert-row.al-high { color:var(--danger); } .alert-row.al-high svg:first-child { color:var(--danger); } .alert-row.al-warn svg:first-child { color:var(--warn); } .alert-row.al-info svg:first-child { color:var(--st-contacted); } .alert-row b { font-weight:680; } .alert-empty { padding:18px 16px; color:var(--graphite); font-size:13px; display:flex; align-items:center; gap:8px; } .alert-empty svg { color:var(--ok); } /* today timeline */ .timeline { display:flex; flex-direction:column; } .tl-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 16px; border:0; border-bottom:1px solid var(--line-soft); background:transparent; cursor:pointer; font:inherit; } .tl-row:last-child { border-bottom:0; } .tl-row:hover { background:var(--paper-warm); } .tl-time { flex:none; width:96px; font-size:12px; color:var(--ink); font-weight:600; } .tl-main { flex:1; min-width:0; display:flex; flex-direction:column; } .tl-main b { font-size:13px; font-weight:640; } .tl-main em { font-style:normal; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tl-side { display:flex; align-items:center; gap:6px; flex:none; flex-wrap:wrap; justify-content:flex-end; } .empty.mini { padding:22px 16px; text-align:center; color:var(--muted); } /* payment chip — Fresh Tag varian sm (`.vs-tag--sm`): pill hairline, min-height 22px, angka/kode tetap mono sesuai aturan tipografi DS. Tone dari alias --tag-*. */ .pay-chip { display:inline-flex; align-items:center; gap:4px; min-height:22px; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.02em; padding:2px 8px; border-radius:var(--radius-pill,100px); white-space:nowrap; border:1px solid var(--tag-neutral-border); color:var(--tag-neutral-text); background:var(--tag-neutral-bg); } .pay-unpaid { color:var(--tag-warning-text); background:var(--tag-warning-bg); border-color:var(--tag-warning-border); } .pay-dp_paid { color:var(--tag-blue-text); background:var(--tag-blue-bg); border-color:var(--tag-blue-border); } .pay-partial { color:var(--tag-orange-text); background:var(--tag-orange-bg); border-color:var(--tag-orange-border); } .pay-paid { color:var(--tag-success-text); background:var(--tag-success-bg); border-color:var(--tag-success-border); } .pay-refunded { color:var(--tag-neutral-text); background:var(--tag-neutral-bg); border-color:var(--tag-neutral-border); } .pay-cancelled { color:var(--tag-danger-text); background:var(--tag-danger-bg); border-color:var(--tag-danger-border); } /* drawer chips + conflict */ .drawer-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center; } .conflict-chip { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-family:var(--font-mono); padding:3px 8px; border-radius:100px; color:var(--danger); background:var(--danger-bg); } .conflict-chip svg { width:12px; height:12px; } /* Sistem Bypass / Akses Sementara (PRD 12.13) — chip & banner (token-only). */ .bypass-chip { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:100px; cursor:pointer; color:var(--pst-warning-text); background:var(--pst-warning-bg); border:1px solid var(--pst-warning-border); margin-left:4px; vertical-align:middle; } .bypass-chip svg { width:12px; height:12px; } .bypass-banner { display:flex; align-items:center; gap:8px; padding:8px 14px; margin:0 0 10px; border-radius:var(--r-sm); background:var(--pst-warning-bg); color:var(--pst-warning-text); border:1px solid var(--pst-warning-border); font-size:12.5px; } .bypass-banner svg { flex:none; } .abtn.is-on { background:var(--pst-warning-bg); color:var(--pst-warning-text); border-color:var(--pst-warning-border); } .inline-alert { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:var(--r-sm); background:var(--danger-bg); color:var(--danger); font-size:12.5px; margin:8px 0; } .inline-alert svg { flex:none; } .pax-warn { font-size:11.5px; margin-top:3px; } .pax-warn.pax-charge { color:var(--st-contacted); } .pax-warn.pax-warn { color:var(--warn); } .pax-warn.pax-reject { color:var(--danger); } /* payment section */ .pay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:6px 0 10px; } .pay-box { border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 10px; background:var(--paper-warm); } .pay-box .pl { display:block; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; } .pay-box b { font-size:14px; } .pay-box.rem { border-color:var(--pst-warning-border); background:var(--pst-warning-bg); } .pay-box.rem b { color:var(--pst-warning-text); } .pay-hist { display:flex; flex-direction:column; gap:4px; margin:6px 0; } .pay-hist-row { display:flex; gap:10px; align-items:baseline; font-size:12px; padding:5px 0; border-bottom:1px dashed var(--line-soft); } .pay-hist-row .mono { font-weight:640; } /* 12.20 F3: banner verifikasi bukti klien */ .proof-pending { margin:8px 0; padding:9px 11px; border:1px solid var(--warn,#E0A800); border-radius:8px; background:rgba(255,193,7,.08); } .proof-pending-h { display:flex; align-items:center; gap:6px; font-size:12.5px; margin-bottom:6px; } .proof-thumbs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; } .proof-thumbs img { max-height:64px; border-radius:6px; border:1px solid var(--line); cursor:pointer; } .proof-verified { margin:8px 0; padding:7px 11px; border:1px solid var(--ok,#1E9E5A); border-radius:8px; background:rgba(30,158,90,.08); font-size:12px; display:flex; align-items:center; gap:6px; } .row-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } /* progress */ .prog-flow { display:flex; flex-wrap:wrap; gap:4px 14px; margin:6px 0 10px; } .prog-step { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); } .prog-step .dot { width:9px; height:9px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper); } .prog-step.done { color:var(--ink); } .prog-step.done .dot { background:var(--ok); border-color:var(--ok); } .prog-step.current { color:var(--ink); font-weight:680; } .prog-step.current .dot { background:var(--ink); border-color:var(--ink); } .prog-logs { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; } .prog-log { font-size:12px; color:var(--ink-soft); padding:5px 0; border-bottom:1px dashed var(--line-soft); } .prog-log .sub { display:block; font-size:10.5px; color:var(--muted); } /* reschedule */ .resch-row { font-size:12.5px; padding:6px 0; border-bottom:1px dashed var(--line-soft); display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .resch-row .sub { flex-basis:100%; color:var(--muted); font-size:11px; } .muted.mini { font-size:12px; color:var(--muted); padding:4px 0; } /* 12.34.A — inbox permintaan klien (add-on/perpanjang/BTS) di drawer booking */ .req-row { padding:9px 0; border-bottom:1px dashed var(--line-soft); } .req-row.is-done { opacity:.72; } .req-head { display:flex; align-items:center; justify-content:space-between; gap:8px; } .req-head b { font-size:13px; } .req-meta { font-size:11.5px; color:var(--muted); margin-top:2px; } .req-row .sub { color:var(--muted); font-size:11.5px; margin-top:2px; } .conflict-chip.req-st-ok { color:var(--pst-success-text,#0B7A47); background:var(--pst-success-bg,#D6F9E5); } .req-confirm { display:flex; align-items:center; gap:7px; margin-top:7px; } .req-confirm .req-price { max-width:140px; } /* 12.34.A — scanner QR check-in */ .scan-wrap { position:relative; width:100%; aspect-ratio:4/3; background:#000; border-radius:var(--r-md); overflow:hidden; margin-bottom:8px; } .scan-wrap video { width:100%; height:100%; object-fit:cover; display:block; } .scan-frame { position:absolute; inset:18% 22%; border:2px solid rgba(255,247,0,.9); border-radius:12px; box-shadow:0 0 0 9999px rgba(0,0,0,.28); pointer-events:none; } /* filters: date input */ .filter-date { padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); font-size:13px; } .fgrid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .bc-pay { display:flex; align-items:center; gap:8px; margin-top:4px; } /* ---------- BOOKING CALENDAR ---------- */ .cal-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; } /* .cal-datenav: kelas khusus admin (hindari bentrok dgn .cal-nav publik di app.css yang paksa tombol 32px grid). */ .cal-datenav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .cal-navico { flex:none; width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); cursor:pointer; } .cal-navico:hover { background:var(--paper-warm); } .cal-navico svg { width:16px; height:16px; } .cal-datepill { flex:none; display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); cursor:pointer; font:inherit; white-space:nowrap; } .cal-datepill:hover { background:var(--paper-warm); border-color:var(--ink); } .cal-datepill svg { color:var(--graphite); } .cal-datepill svg:last-child { width:13px; height:13px; } .cal-title { font-size:14px; font-weight:680; } /* Mini calendar / date picker popover */ .minical-pop { position:absolute; z-index:210; width:264px; padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-pop); } .minical-pop .mc-head { display:flex; align-items:center; gap:6px; margin-bottom:8px; } .minical-pop .mc-nav { width:28px; height:28px; } .minical-pop .mc-nav svg { width:15px; height:15px; } .mc-title { flex:1; text-align:center; font-size:13px; font-weight:700; border:0; background:transparent; cursor:pointer; border-radius:7px; padding:5px 4px; color:var(--ink); } .mc-title:hover { background:var(--paper-warm); } .mc-wd { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; } .mc-wd span { text-align:center; font-size:10px; color:var(--muted); font-weight:640; text-transform:uppercase; } .mc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .mc-day { aspect-ratio:1; border:0; background:transparent; border-radius:7px; font-size:12px; font-weight:560; color:var(--ink); cursor:pointer; font-family:inherit; } .mc-day:hover { background:var(--paper-warm); } .mc-day.out { color:#C8C7C1; } .mc-day.today { box-shadow:inset 0 0 0 1.5px var(--ink); } .mc-day.sel { background:var(--gradient-identity-sunset); color:var(--ink); font-weight:780; box-shadow:var(--shadow-identity); } .mc-foot { margin-top:9px; display:flex; justify-content:center; } .mc-today { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); font-size:12px; font-weight:620; color:var(--ink); cursor:pointer; } .mc-today:hover { background:var(--paper-warm); border-color:var(--ink); } .mc-today svg { width:14px; height:14px; } .mc-months { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .mc-mon { padding:11px 0; border:1px solid var(--line); border-radius:9px; background:var(--paper); font-size:12px; font-weight:600; color:var(--ink); cursor:pointer; font-family:inherit; } .mc-mon:hover { background:var(--paper-warm); } .mc-mon.sel { background:var(--ink); color:#fff; border-color:var(--ink); } .cal-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin:6px 0 14px; font-size:11.5px; color:var(--graphite); } .cal-leg-item { display:inline-flex; align-items:center; gap:6px; } .leg-dot { width:11px; height:11px; border-radius:3px; display:inline-block; } .leg-dot.ev-conflict-dot { background:repeating-linear-gradient(45deg,var(--danger),var(--danger) 3px,#fff 3px,#fff 5px); } .cal-month .cal-wdrow { display:grid; grid-template-columns:repeat(7,1fr); background:var(--paper-warm); border-bottom:1px solid var(--line); } .cal-wd { padding:8px 10px; font-size:11px; font-weight:640; color:var(--graphite); text-transform:uppercase; letter-spacing:.05em; } .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); } .cal-cell { min-height:104px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:6px; cursor:pointer; display:flex; flex-direction:column; gap:4px; } .cal-cell:nth-child(7n) { border-right:0; } .cal-cell:hover { background:var(--paper-warm); } .cal-cell.out { background:#FBFAF7; } .cal-cell.out .cal-date { color:#C4C3BD; } .cal-cell.today .cal-date { background:var(--ink); color:#fff; border-radius:50%; } .cal-date { font-size:12px; font-weight:600; width:22px; height:22px; display:grid; place-items:center; } .cal-evs { display:flex; flex-direction:column; gap:3px; } .cal-ev { display:flex; align-items:center; gap:5px; width:100%; text-align:left; border:0; border-left:3px solid currentColor; border-radius:4px; padding:3px 6px; font:inherit; font-size:11px; cursor:pointer; overflow:hidden; } .cal-ev .evt-t { font-family:var(--font-mono); font-size:10px; opacity:.8; flex:none; } .cal-ev .evt-n { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-ev.ev-conflict { outline:2px solid var(--danger); outline-offset:-2px; } .cal-more { font-size:10.5px; color:var(--muted); padding-left:4px; } .cal-week { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; } .cal-wcol { border-right:1px solid var(--line-soft); min-height:240px; } .cal-wcol:last-child { border-right:0; } .cal-wcol-head { padding:8px; font-size:12px; font-weight:640; text-align:center; background:var(--paper-warm); border-bottom:1px solid var(--line-soft); } .cal-wcol-head.today { background:var(--ink); color:#fff; } .cal-wcol-body { padding:6px; display:flex; flex-direction:column; gap:4px; cursor:pointer; min-height:200px; } .cal-wempty { color:#D7D6D0; text-align:center; font-size:12px; padding-top:10px; } .cal-day { display:flex; flex-direction:column; } .cal-day-row { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:12px 16px; border:0; border-left:4px solid currentColor; border-bottom:1px solid var(--line-soft); background:transparent; cursor:pointer; font:inherit; } .cal-day-row:hover { background:var(--paper-warm); } .cal-day-row.ev-conflict { background:var(--danger-bg); } .cd-time { flex:none; width:110px; font-size:12.5px; font-weight:640; color:var(--ink); } .cd-main { flex:1; min-width:0; display:flex; flex-direction:column; } .cd-main b { font-size:13.5px; } .cd-main em { font-style:normal; font-size:11.5px; color:var(--muted); } .cd-side { display:flex; align-items:center; gap:6px; flex:none; flex-wrap:wrap; justify-content:flex-end; } .agenda-date { padding:10px 16px 6px; font-size:12px; font-weight:700; color:var(--graphite); text-transform:uppercase; letter-spacing:.04em; background:var(--paper-warm); border-bottom:1px solid var(--line-soft); } /* ---------- SCHEDULE: attention strip (F5, Ref Needs Attention) ---------- */ .cal-attn { display:flex; align-items:center; gap:8px; padding:9px 13px; margin-bottom:12px; font-size:12.5px; color:var(--pst-warning-text); background:var(--pst-warning-bg); border:1px solid var(--pst-warning-border); border-radius:var(--r-sm); } .cal-attn svg { flex:none; } .cal-attn b { font-weight:720; } /* ---------- SCHEDULE: tone & legend (design system §4.2/§4.3) ---------- */ .leg-dot.leg-blocked { background:repeating-linear-gradient(45deg,var(--pst-neutral-border),var(--pst-neutral-border) 3px,#fff 3px,#fff 5px); } .cal-ev.ev-identity { box-shadow:inset 0 0 0 1.5px var(--pst-identity-border); } .cal-day-row.ev-identity { box-shadow:inset 4px 0 0 var(--pst-identity-border); } /* ---------- SCHEDULE: Kalender Global block overlay (F3) ---------- */ .cal-blockchip { display:flex; align-items:center; gap:4px; font-size:10px; font-weight:600; line-height:1.3; color:var(--pst-neutral-text); background:repeating-linear-gradient(45deg,var(--pst-neutral-bg),var(--pst-neutral-bg) 5px,#fff 5px,#fff 10px); border:1px solid var(--pst-neutral-border); border-radius:4px; padding:2px 5px; margin-bottom:2px; overflow:hidden; } .cal-blockchip svg { flex:none; } .cal-blockchip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-blockchip.full { color:var(--pst-danger-text); border-color:var(--pst-danger-border); background:repeating-linear-gradient(45deg,var(--pst-danger-bg),var(--pst-danger-bg) 5px,#fff 5px,#fff 10px); } .cal-cell.blocked { background:repeating-linear-gradient(45deg,#FBFAF7,#FBFAF7 7px,#F3F2ED 7px,#F3F2ED 14px); } .cal-block-banner { display:flex; align-items:flex-start; gap:8px; padding:10px 14px; margin-bottom:10px; font-size:12.5px; background:var(--pst-neutral-bg); border:1px solid var(--pst-neutral-border); border-radius:var(--r-sm); color:var(--ink-soft); } .cal-block-banner svg { flex:none; margin-top:1px; } /* ---------- SCHEDULE: Resource timeline view (F1, Ref Studio Schedule) ---------- */ .cal-res-wrap { display:flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:auto; background:var(--paper); max-height:74vh; } .cal-res-gutter { position:sticky; left:0; z-index:4; flex:none; width:52px; background:var(--paper); border-right:1px solid var(--line); } .cal-res-cols { display:flex; flex:1; min-width:0; } .cal-res-group { display:flex; flex-direction:column; min-width:0; border-right:2px solid var(--line); } .cal-res-group:last-child { border-right:0; } .cal-res-groupcols { display:flex; flex:1; min-width:0; } .cal-res-bandhead { flex:none; height:24px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 6px; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#fff; background:var(--ink); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-res-bandhead.gutter-band { background:var(--paper); } .cal-res-col { flex:1 1 0; min-width:0; border-right:1px solid var(--line-soft); } .cal-res-col:last-child { border-right:0; } .cal-res-colhead { height:56px; box-sizing:border-box; padding:8px 11px; border-bottom:1px solid var(--line); background:var(--paper-warm); display:flex; flex-direction:column; justify-content:center; gap:4px; position:sticky; top:24px; z-index:3; } .gutter-head { background:var(--paper); } .cal-res-name { font-size:12.5px; font-weight:680; color:var(--ink); display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-res-band { font-size:9px; font-weight:700; color:var(--muted); background:var(--paper-warm2); border-radius:4px; padding:1px 5px; flex:none; } .cal-res-substat { display:flex; align-items:center; gap:6px; font-size:11px; min-width:0; } .cal-res-dot { width:8px; height:8px; border-radius:50%; flex:none; } .cal-res-occ { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); } .cal-res-occ.muted { color:var(--muted); } .cal-res-occ em { font-style:normal; color:var(--muted); margin-left:4px; font-size:10px; } .cal-res-hours { position:relative; } .cal-res-hr { box-sizing:border-box; border-bottom:1px solid var(--line-soft); position:relative; } .cal-res-hr span { font-size:10px; color:var(--muted); font-family:var(--font-mono); position:absolute; top:-7px; left:6px; background:var(--paper); padding:0 2px; } .cal-res-track { position:relative; cursor:pointer; background-image:linear-gradient(to bottom,var(--line-soft) 1px,transparent 1px); background-repeat:repeat-y; } .cal-res-track:hover { background-color:var(--paper-warm); } .cal-res-track.blocked { background-color:#FBFAF7; background-image:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(0,0,0,.035) 8px,rgba(0,0,0,.035) 16px),linear-gradient(to bottom,var(--line-soft) 1px,transparent 1px); } .cal-res-block { position:absolute; left:2px; right:2px; z-index:1; background:repeating-linear-gradient(45deg,var(--pst-neutral-bg),var(--pst-neutral-bg) 6px,#fff 6px,#fff 12px); border:1px dashed var(--pst-neutral-border); border-radius:4px; } .cal-res-ev { position:absolute; left:3px; right:3px; z-index:2; box-sizing:border-box; border:0; border-left:4px solid currentColor; border-radius:5px; padding:3px 7px; text-align:left; font:inherit; cursor:pointer; overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:1px; } .cal-res-ev .rev-t { font-family:var(--font-mono); font-size:9.5px; opacity:.85; white-space:nowrap; } .cal-res-ev .rev-n { font-size:11.5px; font-weight:620; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-res-ev.ev-conflict { outline:2px solid var(--danger); outline-offset:-2px; } .cal-res-ev.ev-identity { box-shadow:0 0 0 2px var(--pst-identity-border),var(--shadow-1); } .cal-res-ev.ev-parent { border-left-style:dashed; } /* booking diturunkan dari parent (mis. V SPACE) */ /* ============================================================ SCHEDULE — Redesign polish (ref: "Schedule Module standalone"). Selaras DS v2.0 (ink/paper/identity + pastel --pst-*); semua selector di-scope ke kelas Schedule agar tak merembet ke modul lain. ============================================================ */ /* View-switcher: pil hitam aktif + ikon (khusus toolbar Schedule) */ .cal-toolbar .seg-btn { height:32px; padding:0 11px; } .cal-toolbar .seg-btn svg { color:var(--muted); transition:color .14s; } .cal-toolbar .seg-btn:hover svg { color:var(--ink); } .cal-toolbar .seg-btn.active { background:var(--ink); color:#fff; box-shadow:var(--shadow-1); } .cal-toolbar .seg-btn.active svg { color:#fff; } /* Filter bar inline + kicker mono */ .cal-filterbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .cal-filterbar--row { margin:-2px 0 14px; } /* baris filter terpisah, di bawah baris pilihan tab */ .cal-filter-kicker { font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .cal-filterbar select { height:34px; padding:0 30px 0 11px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); font-size:13px; color:var(--ink); cursor:pointer; } .cal-filter-reset { display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); cursor:pointer; font:inherit; font-size:13px; font-weight:560; color:var(--muted); } .cal-filter-reset:hover { color:var(--ink); border-color:var(--ink); } /* Tombol "Hari Ini" tersorot saat memang di hari ini */ .cal-today-on { background:var(--identity-yellow-soft) !important; border-color:var(--identity-yellow-shadow) !important; color:var(--ink) !important; } /* Transisi mulus semua tombol toolbar + anti-"jumping" saat ganti view/tanggal: body ditukar di tempat (tanpa remount) → min-height stabil + fade halus. */ .cal-navico, .cal-datepill, .cal-toolbar .abtn, .cal-filterbar select, .cal-filter-reset { transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } .cal-datepill svg, .cal-navico svg { transition:color .15s ease; } #calBody { min-height:52vh; } #calBody.cal-swap { animation:cal-bodyswap .18s ease; } @keyframes cal-bodyswap { from { opacity:.35; } to { opacity:1; } } @media (prefers-reduced-motion: reduce) { #calBody.cal-swap { animation:none; } } /* Rich attention banner "Perlu perhatian" */ .cal-attn-card { display:flex; flex-direction:column; gap:7px; padding:13px 16px; margin-bottom:14px; background:linear-gradient(180deg,var(--paper),var(--paper-warm)); border:1px solid var(--line); border-left:4px solid var(--danger); border-radius:var(--r-md); box-shadow:var(--shadow-1); } .cal-attn-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .cal-attn-title { font-family:var(--font-display,inherit); font-weight:760; font-size:15px; color:var(--ink); letter-spacing:-.01em; display:inline-flex; align-items:center; gap:8px; } .cal-attn-title svg { color:var(--danger); } .cal-attn-pill { font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; } .cal-attn-pill.danger { background:var(--pst-danger-bg); color:var(--pst-danger-text); border:1px solid var(--pst-danger-border); } .cal-attn-pill.orange { background:var(--pst-orange-bg); color:var(--pst-orange-text); border:1px solid var(--pst-orange-border); } .cal-attn-rows { display:flex; flex-direction:column; gap:2px; } .cal-attn-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:7px 10px; border:0; border-radius:var(--r-sm); background:transparent; cursor:pointer; font:inherit; } .cal-attn-row:hover { background:var(--paper-warm2); } .cal-attn-row .ar-dot { width:7px; height:7px; border-radius:50%; flex:none; } .cal-attn-row .ar-title { font-size:13.5px; font-weight:640; color:var(--ink); flex:none; white-space:nowrap; } .cal-attn-row .ar-detail { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; } .cal-attn-row .ar-chev { color:var(--line); flex:none; } .cal-attn-more { font-size:12px; color:var(--muted); padding:3px 10px 0; } /* Legend → carded (kicker "Legenda") */ .cal-legend.cal-legend-card { padding:11px 15px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); margin:14px 0 0; align-items:center; } .cal-leg-kicker { font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } /* Month: kolom Minggu (Sun) merah seperti prototype */ .cal-wd.cal-wd-sun { color:var(--danger); } /* Resource view: band dot + kind subtitle + garis "now" */ .cal-res-banddot { width:8px; height:8px; border-radius:2px; flex:none; display:inline-block; } .cal-res-colhead { height:64px; } /* +ruang utk baris "kind" (jenis room); gutter-head ikut agar grid sejajar */ .cal-res-bandhead.cal-res-bandhead--soft { background:var(--paper-warm); color:var(--ink); gap:6px; font-weight:740; letter-spacing:.02em; text-transform:none; font-size:11px; } .cal-res-kind { font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .cal-res-cols { position:relative; } .cal-res-now { position:absolute; left:0; right:0; height:0; border-top:2px solid var(--danger); z-index:6; pointer-events:none; } .cal-res-now::before { content:''; position:absolute; left:-3px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--danger); } .cal-res-now .now-lbl { position:absolute; right:4px; top:-8px; font-family:var(--font-mono); font-size:9px; font-weight:700; color:#fff; background:var(--danger); padding:1px 5px; border-radius:3px; } /* ============================================================ SCHEDULE REFRESH 12.56 — brand workspace, conditional color, attention cards, rich booking cards, aligned resource grid. ============================================================ */ .cal-context-card { display:grid; grid-template-columns:minmax(250px,.72fr) minmax(0,1.5fr); align-items:end; gap:18px; margin-bottom:14px; padding:16px 18px; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--radius-md); box-shadow:var(--shadow-card); } .cal-context-copy h2 { margin:3px 0 2px; font-size:18px; letter-spacing:-.02em; color:var(--ink); } .cal-context-copy p { margin:0; max-width:520px; font-size:12.5px; line-height:1.45; color:var(--muted); } .cal-context-kicker { display:block; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500); } .cal-brand-tabs { display:flex; justify-content:flex-end; gap:5px; min-width:0; overflow-x:auto; padding:2px; scrollbar-width:none; } .cal-brand-tabs::-webkit-scrollbar { display:none; } .cal-color-control { min-height:34px; display:inline-flex; align-items:center; gap:8px; padding-left:10px; border-left:1px solid var(--line-200); color:var(--ink-500); font-size:11.5px; font-weight:620; white-space:nowrap; } .cal-color-control select { min-width:112px; color:var(--ink); font-weight:620; } .cal-main-panel .panel-body { overflow:auto; } /* Conditional-color contract. Conflict and block styles remain independent. */ .cal-ev.sched-colored,.cal-scard.sched-colored,.cal-day-row.sched-colored,.cal-res-ev.sched-colored { background:var(--sched-bg); color:var(--sched-text); border-color:var(--sched-border); border-left-color:var(--sched-accent); } .cal-ev.sched-colored:hover,.cal-scard.sched-colored:hover,.cal-day-row.sched-colored:hover,.cal-res-ev.sched-colored:hover { box-shadow:0 4px 14px color-mix(in srgb,var(--sched-accent) 15%,transparent); } .cal-ev.ev-conflict,.cal-scard.ev-conflict,.cal-day-row.ev-conflict,.cal-res-ev.ev-conflict { outline:2px solid var(--hot-red); outline-offset:-2px; } /* Compact month card: two information lines without crowding the date cell. */ .cal-month { min-width:920px; } .cal-cell { min-height:132px; padding:7px; } .cal-ev { min-height:36px; display:block; padding:5px 7px; border:1px solid var(--sched-border); border-left:3px solid var(--sched-accent); border-radius:6px; line-height:1.15; } .cal-ev .evt-line { display:flex; align-items:center; gap:5px; min-width:0; } .cal-ev .evt-t { color:var(--sched-text); font-weight:700; } .cal-ev .evt-n { min-width:0; font-size:10.8px; font-weight:700; } .cal-ev .evt-meta { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9.5px; color:var(--sched-text); opacity:.78; } .cal-more { width:100%; min-height:24px; border:0; border-radius:6px; background:transparent; color:var(--ink-500); padding:3px 5px; text-align:left; font:inherit; font-size:10.5px; font-weight:650; cursor:pointer; } .cal-more:hover { background:var(--surface-50); color:var(--ink); } /* Weekly Notion-inspired cards. View scrolls horizontally instead of crushing columns. */ .cal-week { min-width:1470px; grid-template-columns:repeat(7,minmax(210px,1fr)); border-radius:var(--radius-sm); } .cal-wcol { min-height:420px; background:var(--surface-0); } .cal-wcol-head { min-height:45px; display:flex; align-items:center; justify-content:center; gap:6px; color:var(--ink-500); } /* Pintasan "+" per tanggal: selalu ada (bukan hanya saat kolom kosong), muncul penuh saat hover/focus kolom supaya tidak berisik. */ .cal-wcol-head { position:relative; } .cal-wcol-add { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; color:var(--text-muted,var(--ink-500)); background:var(--surface-0,var(--paper)); border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-sm,7px); cursor:pointer; opacity:.45; transition:opacity .14s ease, background .14s ease, color .14s ease; } .cal-wcol:hover .cal-wcol-add, .cal-wcol-add:focus-visible { opacity:1; } .cal-wcol-add:hover { color:var(--primary-contrast,#fff); background:var(--ink-900,var(--ink)); border-color:var(--ink-900,var(--ink)); } .cal-wcol-head.today .cal-wcol-add { background:transparent; border-color:rgba(255,255,255,.35); color:#fff; } .cal-wcol-head.today .cal-wcol-add:hover { background:rgba(255,255,255,.18); } .cal-wcol-head b { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:var(--ink); } .cal-wcol-head.today { background:var(--surface-50); color:var(--ink-500); } .cal-wcol-head.today b { background:var(--ink); color:#fff; } .cal-wcol-body { gap:7px; padding:7px; } .cal-wempty { padding:20px 6px; color:var(--ink-300); } .cal-scard { width:100%; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:10px; border:1px solid var(--sched-border); border-left:4px solid var(--sched-accent); border-radius:var(--radius-sm); text-align:left; font:inherit; cursor:pointer; box-shadow:var(--shadow-card); } .cal-scard-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } .cal-scard-top b { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:13px; line-height:1.25; color:var(--ink); } .cal-scard-top em { flex:none; color:var(--sched-text); font-size:10.5px; font-weight:700; font-style:normal; } .cal-scard-tags,.cal-scard-state { display:flex; align-items:center; gap:5px; flex-wrap:wrap; } .cal-brand-chip,.cal-resource-chip { display:inline-flex; align-items:center; max-width:100%; min-height:20px; padding:2px 7px; border:1px solid var(--sched-border); border-radius:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:680; } .cal-brand-chip { color:var(--sched-text); background:var(--sched-bg); } .cal-resource-chip { color:var(--ink-700); background:rgba(255,255,255,.55); border-color:rgba(5,5,5,.1); } .cal-scard-client,.cal-scard-time { display:flex; align-items:flex-start; gap:6px; min-width:0; color:var(--ink-700); font-size:11px; line-height:1.35; } .cal-scard-client svg,.cal-scard-time svg { flex:none; margin-top:1px; color:var(--ink-400); } .cal-scard-client b,.cal-scard-time span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cal-scard-note { padding-top:6px; border-top:1px solid color-mix(in srgb,var(--sched-border) 65%,transparent); color:var(--ink-700); font-size:10.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .cal-scard-code { color:var(--ink-400); font-size:10px; } .cal-conflict-chip { display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:5px; color:var(--pst-danger-text); background:var(--pst-danger-bg); border:1px solid var(--pst-danger-border); font-size:9.5px; font-weight:700; } .cal-day-modal { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; } .cal-scard--modal { min-height:190px; } /* Rich day/agenda rows remain scannable at table density. */ .cal-day { gap:8px; padding:10px; } .cal-day-row { gap:16px; padding:13px 15px; border:1px solid var(--sched-border); border-left:4px solid var(--sched-accent); border-radius:var(--radius-sm); box-shadow:var(--shadow-card); } .cal-day-row:hover { background:var(--sched-bg); } .cd-main { gap:2px; } .cd-main b { font-size:14px; color:var(--ink); } .cd-main em { font-size:12px; color:var(--ink-700); } .cd-tags { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:5px; color:var(--ink-500); font-size:10.5px; } .cd-main small { max-width:720px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-500); font-size:10.5px; } .cd-code { color:var(--ink-400); font-size:10px; } /* Attention is a real card grid: 3/2/1 columns. */ .cal-attn-shell { margin-bottom:14px; padding:15px; background:var(--surface-0); border:1px solid var(--line-200); border-left:4px solid var(--hot-red); border-radius:var(--radius-md); box-shadow:var(--shadow-card); } .cal-attn-shell .cal-attn-top { justify-content:space-between; align-items:flex-start; margin-bottom:12px; } .cal-attn-shell .cal-attn-top p { margin:3px 0 0; color:var(--ink-500); font-size:11.5px; } .cal-attn-pills { display:flex; gap:6px; flex-wrap:wrap; } .cal-attn-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; } .cal-attn-item { --attn-bg:var(--pst-neutral-bg); --attn-border:var(--pst-neutral-border); --attn-text:var(--pst-neutral-text); display:flex; flex-direction:column; min-width:0; padding:12px; background:color-mix(in srgb,var(--attn-bg) 48%,white); border:1px solid var(--attn-border); border-left:3px solid var(--attn-border); border-radius:var(--radius-sm); } .cal-attn-item.tone-danger { --attn-bg:var(--pst-danger-bg); --attn-border:var(--pst-danger-border); --attn-text:var(--pst-danger-text); } .cal-attn-item.tone-orange { --attn-bg:var(--pst-orange-bg); --attn-border:var(--pst-orange-border); --attn-text:var(--pst-orange-text); } .cal-attn-item.tone-warning { --attn-bg:var(--pst-warning-bg); --attn-border:var(--pst-warning-border); --attn-text:var(--pst-warning-text); } .cal-attn-item header { display:flex; align-items:center; justify-content:space-between; gap:7px; color:var(--ink-400); font-size:9.5px; } .cal-attn-type { display:inline-flex; align-items:center; gap:5px; color:var(--attn-text); font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; } .cal-attn-item h3 { margin:8px 0 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:14px; } .cal-attn-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 10px; } .cal-attn-grid span { min-width:0; } .cal-attn-grid small { display:block; margin-bottom:2px; color:var(--ink-400); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; } .cal-attn-grid b { display:block; overflow:hidden; text-overflow:ellipsis; color:var(--ink-700); font-size:10.8px; line-height:1.35; } .cal-attn-item footer { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:auto; padding-top:11px; } .cal-attn-item footer .abtn:last-child { margin-left:auto; } .cal-attn-toggle { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:32px; margin-top:10px; border:0; border-top:1px solid var(--line-100); background:transparent; color:var(--ink-500); font:inherit; font-size:11.5px; font-weight:650; cursor:pointer; } .cal-attn-toggle:hover { color:var(--ink); } /* Legend explains the active conditional color rather than a hard-coded status set. */ .cal-legend.cal-legend-card { gap:7px 14px; } .cal-legend .cal-leg-item { color:var(--ink-700); } .cal-legend .leg-dot:not(.leg-blocked):not(.ev-conflict-dot) { background:var(--sched-accent); border:1px solid var(--sched-border); } .cal-leg-empty { color:var(--ink-400); font-size:11px; } .cal-leg-sep { width:1px; height:18px; background:var(--line-200); } /* Resource header alignment: the gutter and all columns share the same tokens. */ .cal-res-wrap { --cal-gutter-w:64px; --cal-band-h:28px; --cal-resource-head-h:76px; } .cal-res-gutter { width:var(--cal-gutter-w); z-index:8; } .cal-res-cols { flex:1 0 auto; min-width:max-content; } .cal-res-group { min-width:176px; } .cal-res-groupcols { min-width:max-content; } .cal-res-col { flex:0 0 176px; min-width:176px; } .cal-res-bandhead { height:var(--cal-band-h); } .cal-res-colhead { height:var(--cal-resource-head-h); top:var(--cal-band-h); padding:9px 10px; gap:3px; } .cal-res-name { line-height:1.25; } .cal-res-hours { background:var(--surface-0); } .cal-res-hr { display:flex; align-items:flex-start; padding:4px 7px 0; } .cal-res-hr span { position:static; display:block; padding:0; background:transparent; line-height:1; } .cal-res-ev { border:1px solid var(--sched-border); border-left:4px solid var(--sched-accent); gap:1px; } .cal-res-ev .rev-service { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:11px; font-weight:720; } .cal-res-ev .rev-n { color:var(--ink-700); font-size:10.5px; } .cal-res-ev .rev-meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sched-text); font-size:9px; opacity:.82; } .cal-res-ev--compact .rev-n,.cal-res-ev--compact .rev-meta { display:none; } .cal-res-ev--standard .rev-meta { display:none; } @media (max-width:1100px) { .cal-context-card { grid-template-columns:1fr; align-items:start; } .cal-brand-tabs { justify-content:flex-start; } .cal-attn-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:760px) { .cal-context-card { padding:14px; } .cal-brand-tabs { margin:0 -2px; } .cal-toolbar { align-items:flex-start; } .cal-toolbar > .grow { display:none; } .cal-toolbar .seg { width:100%; overflow-x:auto; justify-content:flex-start; } .cal-filterbar > .grow { display:none; } .cal-color-control { width:100%; justify-content:space-between; padding:8px 0 0; border-left:0; border-top:1px solid var(--line-200); } .cal-color-control select { flex:1; } .cal-attn-cards { grid-template-columns:1fr; } .cal-attn-grid { grid-template-columns:1fr 1fr; } .cal-day-row { display:grid; grid-template-columns:92px minmax(0,1fr); align-items:start; } .cd-time { width:auto; } .cd-side { grid-column:2; justify-content:flex-start; } .cal-leg-sep { width:100%; height:1px; } } @media (max-width:480px) { .cal-datenav { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; width:100%; } .cal-datepill { min-width:0; justify-content:center; } .cal-title { overflow:hidden; text-overflow:ellipsis; } .cal-datenav #calToday { grid-column:1/-1; } .cal-filterbar select { flex:1 1 calc(50% - 8px); min-width:0; } .cal-day-row { grid-template-columns:1fr; } .cd-side { grid-column:1; } .cal-attn-grid { grid-template-columns:1fr; } } /* Daftar Jadwal: avatar inisial klien (scoped) */ .sched-cli { display:flex; align-items:center; gap:10px; } .sched-av { width:30px; height:30px; border-radius:50%; flex:none; display:inline-grid; place-items:center; font-size:12px; font-weight:700; color:var(--ink); background:var(--paper-warm2); border:1px solid var(--line); } /* ---------- SCHEDULE: Export Jadwal Harian (F4, Ref daily export) ---------- */ .sx-overlay { position:fixed; inset:0; z-index:200; background:rgba(18,18,20,.55); display:flex; flex-direction:column; } .sx-toolbar { display:flex; align-items:center; gap:12px; padding:11px 16px; background:var(--paper); border-bottom:1px solid var(--line); flex-wrap:wrap; } .sx-tdate { display:flex; align-items:center; gap:8px; margin:0; } .sx-tdate label { font-size:12px; color:var(--muted); } .sx-tdate input { width:auto; } .sx-toggle { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--graphite); cursor:pointer; } .sx-scroll { flex:1; overflow:auto; padding:20px; display:flex; justify-content:center; align-items:flex-start; } .sx-sheet { background:#fff; width:100%; max-width:780px; border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:22px 22px 18px; color:var(--ink); } .sx-empty { padding:40px; text-align:center; color:var(--muted); } .sx-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; margin:-22px -22px 16px; background:var(--ink); color:#fff; border-radius:var(--r-md) var(--r-md) 0 0; } .sx-brand { font-family:var(--font-display,var(--font-sans)); font-size:16px; font-weight:800; line-height:1.1; display:flex; flex-direction:column; color:#fff; } .sx-wordmark { letter-spacing:.02em; } .sx-wordmark b { color:var(--identity-yellow); font-weight:800; } .sx-brand small { font-size:10px; font-weight:600; letter-spacing:.16em; color:rgba(255,255,255,.7); text-transform:uppercase; margin-top:4px; } .sx-meta { text-align:right; } .sx-date { font-size:14px; font-weight:700; color:#fff; } .sx-updated { font-size:10.5px; color:rgba(255,255,255,.7); font-family:var(--font-mono); margin-top:2px; } .sx-table { width:100%; border-collapse:separate; border-spacing:3px; table-layout:fixed; } .sx-table th, .sx-table td { font-size:10px; } .sx-corner { width:52px; background:var(--paper-warm2); border-radius:6px; font-weight:700; color:var(--graphite); vertical-align:middle; } .sx-space { background:var(--ink); color:#fff; font-size:10px; font-weight:700; letter-spacing:.07em; padding:5px; border-radius:6px; text-transform:uppercase; } .sx-room { background:var(--paper-warm); border:1px solid var(--line); border-radius:6px; padding:5px 4px; font-weight:660; color:var(--ink); } .sx-rowtime { background:var(--paper-warm2); border-radius:6px; font-family:var(--font-mono); font-weight:640; color:var(--graphite); padding:4px; } .sx-cell { border:1px solid transparent; border-radius:6px; padding:5px 4px; text-align:center; line-height:1.25; vertical-align:middle; } .sx-cell .sx-lbl { display:block; font-weight:700; font-size:10px; } .sx-cell .sx-slot { display:block; font-family:var(--font-mono); font-size:8.5px; opacity:.8; margin-top:1px; } .sx-cell .sx-name { display:block; font-size:8.5px; font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sx-cell.sx-avail { background:var(--pst-success-bg); color:var(--pst-success-text); border-color:var(--pst-success-border); } .sx-cell.sx-blocked { color:var(--pst-neutral-text); border-color:var(--pst-neutral-border); background:repeating-linear-gradient(45deg,var(--pst-neutral-bg),var(--pst-neutral-bg) 5px,#fff 5px,#fff 10px); } .sx-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:11px; color:var(--graphite); } .sx-leg { display:inline-flex; align-items:center; gap:6px; } .sx-dot { width:10px; height:10px; border-radius:3px; } @media (max-width:560px){ .sx-sheet { padding:16px 12px; } .sx-table th, .sx-table td { font-size:9px; } .sx-table { border-spacing:2px; } .sx-cell .sx-slot { font-size:7.5px; } } @media print { body.sx-printing { background:#fff !important; } body.sx-printing > *:not(.sx-overlay) { display:none !important; } body.sx-printing .sx-overlay { position:static; inset:auto; background:none; display:block; } body.sx-printing .sx-toolbar { display:none !important; } body.sx-printing .sx-scroll { overflow:visible; padding:0; display:block; } body.sx-printing .sx-sheet { box-shadow:none; max-width:none; width:auto; border-radius:0; padding:0; } @page { margin:12mm; } } /* ---------- ROOM MANAGEMENT ---------- */ .res-name { font-weight:600; display:flex; align-items:center; gap:8px; } .res-code { font-size:11px; color:var(--muted); background:var(--paper-warm2); padding:1px 6px; border-radius:5px; } tr.res-off { opacity:.55; } .rel-type { font-family:var(--font-mono); font-size:11px; padding:2px 8px; border-radius:100px; } .rel-contains { color:var(--pst-blue-text); background:var(--pst-blue-bg); border:1px solid var(--pst-blue-border); } .rel-exclusive { color:var(--pst-danger-text); background:var(--pst-danger-bg); border:1px solid var(--pst-danger-border); } .rel-bundle { color:var(--pst-purple-text); background:var(--pst-purple-bg); border:1px solid var(--pst-purple-border); } .rel-partial_block { color:var(--pst-orange-text); background:var(--pst-orange-bg); border:1px solid var(--pst-orange-border); } .rel-shared_dependency { color:var(--pst-neutral-text); background:var(--pst-neutral-bg); border:1px solid var(--pst-neutral-border); } .dot-on { font-size:11.5px; color:var(--ok); font-weight:600; } .dot-off { font-size:11.5px; color:var(--muted); } /* ============================================================ TAMPILAN — theme editor + live preview ============================================================ */ .theme-editor { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,440px); gap:20px; align-items:start; } .theme-controls { min-width:0; } .theme-preview { position:sticky; top:14px; } .th-prev-bar { display:flex; align-items:center; gap:8px; margin-bottom:10px; } .th-prev-title { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:650; color:var(--ink); } .th-prev-title svg { width:15px; height:15px; } /* device segmented switcher (mobile/tablet/desktop) */ .th-dev-seg { display:inline-flex; gap:2px; padding:2px; background:var(--paper-warm); border:1px solid var(--line); border-radius:9px; } .th-dev { width:30px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--graphite); border-radius:7px; cursor:pointer; transition:background .14s,color .14s; padding:0; } .th-dev svg { width:15px; height:15px; } .th-dev:hover { color:var(--ink); } .th-dev.active { background:var(--ink); color:#fff; } .th-prev-stage { border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-warm2); padding:14px; display:flex; justify-content:center; align-items:flex-start; overflow:hidden; transition:height .22s ease; } /* frame dirender pada lebar device asli, lalu di-scale agar muat → reflow akurat */ .th-frame { flex:none; transform-origin:top center; transition:transform .22s ease, width .22s ease; background:#fff; border-radius:14px; box-shadow:0 8px 30px rgba(10,10,10,.14); overflow:hidden; border:1px solid rgba(10,10,10,.08); } .th-frame iframe { display:block; width:100%; height:100%; border:0; background:#fff; } .th-prev-meta { margin-top:9px; text-align:center; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--muted); } .th-prev-meta span { color:var(--graphite); } /* color swatch rows */ .th-color .swatch, .frow .swatch { display:flex; align-items:center; gap:10px; } .th-color input[type=color], .swatch input[type=color] { width:42px; height:38px; padding:0; border:1px solid var(--line); border-radius:var(--r-sm); background:none; cursor:pointer; flex:none; } .th-color .ctrl { max-width:140px; } .swatch input[type=file] { font-size:12px; } /* toggles */ .th-checks { display:flex; flex-wrap:wrap; gap:10px 18px; } .th-toggle { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:540; color:var(--ink); cursor:pointer; } .th-toggle input { width:16px; height:16px; accent-color:var(--ink); cursor:pointer; } /* accent quick-pick */ .th-accs { display:flex; flex-wrap:wrap; gap:7px; } .th-acc { width:26px; height:26px; border-radius:7px; border:1px solid rgba(10,10,10,.12); cursor:pointer; padding:0; transition:transform .12s; } .th-acc:hover { transform:scale(1.12); } /* sub-heading + range slider (kontrol lebar hero) */ .th-subh { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--graphite); margin:16px 0 6px; padding-top:12px; border-top:1px dashed var(--line); } .th-subh svg { width:14px; height:14px; } .th-slider label { display:flex; align-items:center; justify-content:space-between; gap:8px; } .th-slider-val { font-family:var(--font-mono, monospace); font-size:12px; font-weight:700; color:var(--ink); background:var(--paper-warm, #F7F8FA); border:1px solid var(--line); border-radius:6px; padding:1px 7px; } .th-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:100px; background:var(--line); outline:none; margin:8px 0 2px; cursor:pointer; } .th-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--ink); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer; } .th-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--ink); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer; } /* slider foto — slot editor (storefront beranda) */ .th-slide-edit { position:relative; padding:14px 14px 4px; margin-top:12px; border:1px solid var(--line); border-radius:12px; background:var(--paper-warm, #F7F8FA); } .th-slide-edit:first-of-type { margin-top:6px; } .th-slide-no { position:absolute; top:-9px; left:12px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:11px; font-weight:700; } @media (max-width: 980px) { .theme-editor { grid-template-columns: 1fr; } .theme-preview { position:static; } } /* ============================================================ RBAC — Role, Hak Akses & Modul Pengaturan (PRD 12.04) ============================================================ */ .set-subnav { display:flex; gap:6px; overflow-x:auto; padding:2px 0 12px; margin-bottom:14px; border-bottom:1px solid var(--line-soft); -webkit-overflow-scrolling:touch; } .set-subnav::-webkit-scrollbar { height:0; } .set-subnav a { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:8px 13px; border-radius:999px; font-size:13px; font-weight:560; color:var(--muted); border:1px solid var(--line); background:var(--paper); } .set-subnav a:hover { color:var(--ink); } .set-subnav a.active { background:var(--ink); color:#fff; border-color:var(--ink); } .set-body { margin-top:2px; } /* PRD 12.18 (D1): subnav Katalog 3 klaster — label grup + pemisah */ .cat-subnav { align-items:center; } .cat-subnav-grp { align-self:center; white-space:nowrap; font-size:11px; font-weight:560; color:var(--muted); padding:0 4px 0 2px; text-transform:none; } .cat-subnav-sep { flex:0 0 auto; align-self:center; width:1px; height:20px; background:var(--line); margin:0 6px; } /* PRD 12.18 (A2): tab Kategori — filter brand, kartu, chip brand multi */ .catcat-filter { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; } .catcat-pill { cursor:pointer; font-size:13px; padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--muted); white-space:nowrap; } .catcat-pill:hover { color:var(--ink); } .catcat-pill.active { background:var(--ink); color:#fff; border-color:var(--ink); } .catcat-card { border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; background:var(--paper); } .catcat-brandchips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .catcat-bc { cursor:pointer; font-size:11.5px; font-weight:560; padding:3px 11px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--muted); user-select:none; } .catcat-bc:hover { color:var(--ink); } .catcat-bc.on { background:var(--pst-info-bg); color:var(--pst-info-text); border-color:var(--pst-info-border); } .catcat-uni { font-size:11.5px; color:var(--muted); } .catcat-foot { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); } .catcat-meta { font-size:12px; color:var(--muted); } /* PRD 12.18 (A3): Storefront — kartu tampilan per halaman */ .catdisp-h { font-size:14px; font-weight:600; margin:6px 0 10px; display:flex; align-items:center; gap:7px; } .catdisp-card { border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin-bottom:10px; background:var(--paper); } .catdisp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; } .catdisp-fld { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:9px 0; border-top:1px solid var(--line-soft); } .catdisp-flabel { font-size:12.5px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; min-width:160px; } .catdisp-ctl { font-size:12.5px; color:var(--muted); display:inline-flex; align-items:center; gap:7px; } .catdisp-ctl select { min-width:150px; } /* PRD 12.18 (B4): Wizard Produk 6 tahap */ .wz-stepper { display:flex; gap:6px; flex-wrap:wrap; padding:4px 0 10px; } .wz-step { font-size:12px; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--muted); cursor:pointer; } .wz-step.ok { color:var(--ok); border-color:var(--ok); } .wz-step.cur { background:var(--ink); color:#fff; border-color:var(--ink); } .wz-step:disabled { opacity:.45; cursor:not-allowed; } .wz-meter { display:flex; align-items:center; gap:10px; padding:0 0 12px; } .wz-meter-bar { flex:1; height:6px; background:var(--line-soft); border-radius:999px; overflow:hidden; } .wz-meter-bar > span { display:block; height:100%; background:var(--accent); transition:width .2s; } .wz-meter-t { font-size:12px; color:var(--muted); min-width:110px; text-align:right; } .wz-seg { display:flex; gap:6px; flex-wrap:wrap; } .wz-chip { cursor:pointer; font-size:13px; padding:7px 13px; border-radius:8px; border:1px solid var(--line); background:var(--paper); color:var(--ink); } .wz-chip.on { background:var(--pst-info-bg); color:var(--pst-info-text); border-color:var(--pst-info-border); font-weight:560; } .wz-comprow { display:flex; gap:6px; align-items:center; margin-bottom:6px; flex-wrap:wrap; } .wz-comprow .ctrl[data-cf=label] { flex:1 1 120px; } .wz-tayang { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); } .wz-gate { font-size:12.5px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; } .wz-gate--err { color:var(--danger); font-weight:560; } .cat-dorrow { display:flex; align-items:center; gap:8px; font-size:13.5px; padding:5px 0; } .cat-dorrow--sug { color:var(--muted); } .cat-dor-ok { color:var(--ok); font-style:normal; font-weight:700; } .cat-dor-no { color:var(--danger); font-style:normal; font-weight:700; } .cat-dor { font-size:11px; font-weight:560; padding:2px 8px; border-radius:999px; } .cat-dor--ok { background:var(--ok-bg); color:var(--ok); } .cat-dor--warn { background:var(--pst-identity-bg); color:var(--pst-identity-text); } .cat-dor--danger { background:var(--danger-bg); color:var(--danger); } .set-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-bottom:20px; } .set-card { display:flex; align-items:center; gap:13px; padding:15px 16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); transition:border-color .15s, transform .12s; } .set-card:hover { border-color:var(--ink); transform:translateY(-1px); } .set-card .sc-ic { width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--paper-warm2); color:var(--ink); } .set-card .sc-main { min-width:0; flex:1; } .set-card .sc-t { font-weight:680; font-size:14px; } .set-card .sc-d { font-size:12px; color:var(--muted); margin-top:2px; line-height:1.45; } .set-card .sc-cta { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:620; color:var(--ink); white-space:nowrap; } /* badges */ .role-badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:680; letter-spacing:.01em; background:var(--paper-warm2); color:var(--ink); border:1px solid var(--line); } .role-badge.role-super_admin { background:var(--ink); color:#fff; border-color:var(--ink); } .role-badge.role-owner { background:var(--pst-purple-bg); color:var(--pst-purple-text); border-color:var(--pst-purple-border); } .role-badge.role-finance { background:var(--pst-success-bg); color:var(--pst-success-text); border-color:var(--pst-success-border); } .role-badge.role-staf { background:var(--pst-blue-bg); color:var(--pst-blue-text); border-color:var(--pst-blue-border); } .role-badge.role-intern { background:var(--paper-warm2); color:var(--muted); } .st-badge { display:inline-flex; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:640; background:var(--paper-warm2); color:var(--muted); border:1px solid var(--line); } .st-badge.st-active { background:var(--pst-success-bg); color:var(--pst-success-text); border-color:var(--pst-success-border); } .st-badge.st-susp { background:var(--pst-danger-bg); color:var(--pst-danger-text); border-color:var(--pst-danger-border); } .row-acts { display:inline-flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; } /* role grid + matrix */ .role-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; } .role-card-box { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 15px; } .rcb-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .rcb-desc { font-size:12.5px; color:var(--muted); margin:9px 0; line-height:1.5; } .rcb-meta { display:flex; gap:14px; font-size:11.5px; color:var(--muted); font-weight:560; border-top:1px solid var(--line-soft); padding-top:9px; } /* PRD 12.12 F2: matriks RBAC tetap tabel, dirapikan — kolom modul sticky tak overlap, sel lega, checkbox jadi toggle-pill yang mudah di-scan (CSS-only, state/markup tetap). */ .rm-wrap { max-height:58vh; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm); } .rm-table { width:100%; border-collapse:separate; border-spacing:0; } .rm-table td { padding:8px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; } .rm-table td.rm-cell { border-left:1px solid var(--line-100); min-width:96px; text-align:center; } .rm-table tr:last-child td { border-bottom:0; } .rm-mod { font-weight:660; font-size:12.5px; white-space:nowrap; background:var(--paper-warm); position:sticky; left:0; z-index:2; border-right:1px solid var(--line); } /* toggle-pill: checkbox asli disembunyikan, label-span jadi pill (off = ghost, on = pst-success) */ .rm-chk { display:inline-flex; align-items:center; cursor:pointer; position:relative; } .rm-chk input { position:absolute; opacity:0; width:0; height:0; margin:0; } .rm-chk span { display:inline-flex; align-items:center; padding:4px 11px; border-radius:var(--radius-pill,100px); font-size:11.5px; font-weight:540; white-space:nowrap; border:1px solid var(--line-200); background:transparent; color:var(--muted); transition:background .12s,border-color .12s,color .12s; } .rm-chk:hover span { border-color:var(--ink-500); color:var(--ink); } .rm-chk input:checked + span { background:var(--pst-success-bg); border-color:var(--pst-success-border); color:var(--pst-success-text); } .rm-chk input:focus-visible + span { outline:2px solid var(--ink-900); outline-offset:2px; } /* log tabs */ .set-tabs { display:inline-flex; gap:4px; padding:4px; background:var(--paper-warm2); border-radius:999px; margin-bottom:14px; } .set-tab { display:inline-flex; align-items:center; gap:6px; padding:7px 15px; border-radius:999px; font-size:13px; font-weight:580; color:var(--muted); background:transparent; } .set-tab.active { background:var(--paper); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06); } /* profil saya */ .prof-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; } .prof-av { width:54px; height:54px; flex:none; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:700; font-size:18px; overflow:hidden; } .prof-av img { width:100%; height:100%; object-fit:cover; } .prof-name { font-weight:720; font-size:16px; } .th-toggle.is-disabled { opacity:.5; cursor:not-allowed; } /* ============================================================ MODUL KATALOG — Fase 1 (Overview, Costing, Brand, Page Map, recipe/HPP) ============================================================ */ .cat-note { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--graphite); background:var(--paper-warm); border:1px solid var(--line-soft); border-radius:10px; padding:9px 12px; margin-bottom:12px; } .cat-note code { font-family:var(--font-mono); background:var(--paper); padding:1px 5px; border-radius:5px; border:1px solid var(--line); } .cat-empty { color:var(--muted); font-size:13px; text-align:center; padding:18px 6px; } .cat-muted { color:var(--muted); } .cat-sub { font-size:11.5px; color:var(--muted); margin-top:2px; } .cat-neg { color:var(--danger); } /* Review chips */ .cat-rv { display:inline-block; font-size:11px; font-weight:650; padding:2px 8px; border-radius:999px; border:1px solid var(--line); } .cat-rv--ok { background:var(--ok-bg); color:var(--ok); border-color:transparent; } .cat-rv--below_floor { background:var(--pst-danger-bg); color:var(--pst-danger-text); border-color:var(--pst-danger-border); } .cat-rv--low_margin { background:var(--pst-info-bg); color:var(--pst-info-text); border-color:var(--pst-info-border); } .cat-rv--needs_review { background:var(--pst-neutral-bg); color:var(--pst-neutral-text); border-color:var(--pst-neutral-border); } .cat-rv--stale { background:var(--paper-warm2); color:var(--graphite); } /* Overview KPIs */ .cat-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:16px; } .cat-kpi { display:flex; gap:10px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px; } .cat-kpi svg { color:var(--muted); flex:none; } .cat-kpi--danger { border-color:var(--pst-danger-border); background:var(--pst-danger-bg); } .cat-kpi--warn { border-color:var(--pst-info-border); background:var(--pst-info-bg); } .cat-kpi .ck-v { font-size:22px; font-weight:760; line-height:1; } .cat-kpi .ck-l { font-size:12px; color:var(--graphite); margin-top:3px; } .cat-kpi .ck-s { font-size:11px; color:var(--muted); margin-top:1px; } .cat-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; } @media (max-width:720px){ .cat-2col { grid-template-columns:1fr; } } .cat-panel { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:13px 15px; } .cat-panel h4 { margin:0 0 9px; font-size:13px; } .cat-rankrow { display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--line-soft); font-size:13px; } .cat-rankrow:first-of-type { border-top:0; } .cat-rankrow .cr-name { flex:1; font-weight:560; } .cat-rankrow .cr-brand { font-size:11px; color:var(--muted); } .cat-quick { display:flex; gap:8px; flex-wrap:wrap; } /* Tables */ .cat-tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; } .cat-table { width:100%; border-collapse:collapse; font-size:13px; } .cat-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line); background:var(--paper-warm); } .cat-table td { padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; } .cat-table tr:last-child td { border-bottom:0; } .cat-table .mono { font-family:var(--font-mono); } /* Costing section inside item editor */ .cat-costsec { margin-top:6px; padding:14px; border:1px dashed var(--line); border-radius:12px; background:var(--paper-warm); } .cat-costsec-h { display:flex; align-items:center; gap:7px; font-weight:650; font-size:13px; margin-bottom:10px; } .cat-costsec .req { color:var(--danger); } .cat-recipe { margin-top:6px; } .cat-recipe-h { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:600; margin:6px 0; } .cat-comprow { display:flex; gap:6px; align-items:center; margin-bottom:6px; flex-wrap:wrap; } .cat-comprow .ctrl { padding:6px 8px; font-size:12.5px; } .cat-comprow select.ctrl { max-width:120px; } .cat-actsw { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--graphite); white-space:nowrap; } .cat-costsum { display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top:12px; padding:10px 12px; background:var(--paper); border:1px solid var(--line); border-radius:10px; } .cat-costsum > div { display:flex; flex-direction:column; gap:2px; } .cat-costsum span { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .cat-costsum b { font-size:14px; } .cat-belowreason { margin-top:10px; } .cat-costhint { font-size:11px; color:var(--muted); margin-top:8px; display:flex; gap:5px; align-items:flex-start; } /* PRD 12.36 — controller Dynamic Pricing (aturan harga per tier/mode) */ .dp-row { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:var(--paper); } .dp-row-head { display:flex; gap:6px; align-items:center; } .dp-row-head select.ctrl { padding:6px 8px; font-size:12.5px; } .dp-row-head .dp-del { margin-left:auto; color:var(--danger); padding:6px 8px; } .dp-row-fields { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; } .dp-f { display:flex; flex-direction:column; gap:3px; } .dp-f > span { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .dp-f .ctrl { padding:6px 8px; font-size:12.5px; } .dp-actions { display:flex; gap:8px; align-items:center; margin-top:6px; } .dp-actions #i_dynsave { margin-left:auto; } /* Brand registry editor — grid agar header & input sejajar kolom */ .cat-brandhead, .cat-brandrow { display:grid; grid-template-columns:84px minmax(140px,1fr) 96px 92px auto 36px; gap:8px; align-items:center; } .cat-brandhead { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:0 2px 6px; line-height:1.2; } .cat-brandrow { margin-bottom:7px; } .cat-brandrow .ctrl { width:100%; min-width:0; } .cat-brandrow .cat-actsw { justify-self:start; white-space:nowrap; } @media (max-width:640px){ .cat-brandhead { display:none; } .cat-brandrow { grid-template-columns:1fr 1fr; } } /* Multi-select resource (Connect Resource / Room) di editor produk */ /* .cat-resmulti (grid checkbox lama) di-deprecate PRD 12.12 F1/F3 — diganti .chip-field. */ .cat-rescount { font-size:11px; color:var(--graphite); margin-top:4px; } /* ── Chip Selector (Notion-style multi/single) — PRD 12.12 F1 ── */ .chip-field { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:40px; padding:6px 8px; border:1px solid var(--line-200); border-radius:var(--radius-sm); background:var(--surface-0); } .chip-field:focus-within { border-color:var(--ink-900); } .chip-empty { font-size:12.5px; color:var(--muted); padding:2px 4px; } .chip { display:inline-flex; align-items:center; gap:6px; padding:4px 7px 4px 9px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:560; line-height:1; white-space:nowrap; background:var(--pst-neutral-bg); border:1px solid var(--pst-neutral-border); color:var(--pst-neutral-text); } .chip__dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.8; flex:none; } .chip__x { display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; color:inherit; opacity:.55; padding:1px; margin-left:1px; border-radius:50%; cursor:pointer; } .chip__x:hover { opacity:1; background:rgba(0,0,0,.10); } .chip--mini { font-size:12px; padding:3px 9px; } .chip--mini .chip__dot { width:6px; height:6px; } .chip--success { background:var(--pst-success-bg); border-color:var(--pst-success-border); color:var(--pst-success-text); } .chip--mint { background:var(--pst-mint-bg); border-color:var(--pst-mint-border); color:var(--pst-mint-text); } .chip--info { background:var(--pst-info-bg); border-color:var(--pst-info-border); color:var(--pst-info-text); } .chip--blue { background:var(--pst-blue-bg); border-color:var(--pst-blue-border); color:var(--pst-blue-text); } .chip--purple { background:var(--pst-purple-bg); border-color:var(--pst-purple-border); color:var(--pst-purple-text); } .chip--pink { background:var(--pst-pink-bg); border-color:var(--pst-pink-border); color:var(--pst-pink-text); } .chip--warning { background:var(--pst-warning-bg); border-color:var(--pst-warning-border); color:var(--pst-warning-text); } .chip--orange { background:var(--pst-orange-bg); border-color:var(--pst-orange-border); color:var(--pst-orange-text); } .chip--danger { background:var(--pst-danger-bg); border-color:var(--pst-danger-border); color:var(--pst-danger-text); } .chip--neutral { background:var(--pst-neutral-bg); border-color:var(--pst-neutral-border); color:var(--pst-neutral-text); } .chip--identity{ background:var(--pst-identity-bg);border-color:var(--pst-identity-border);color:var(--pst-identity-text); } .chip-add { display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 8px; border-radius:var(--radius-pill); border:1px dashed var(--line-200); background:transparent; color:var(--muted); font:inherit; font-size:12.5px; font-weight:540; cursor:pointer; } .chip-add:hover { border-style:solid; border-color:var(--ink-500); color:var(--ink); } .chip-add svg { opacity:.8; } .chip-add:focus-visible { outline:2px solid var(--ink-900); outline-offset:2px; } .chip-pop { position:fixed; z-index:9999; min-width:240px; max-width:340px; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--radius-md); box-shadow:var(--shadow-pop); padding:6px; } .chip-pop__search { display:flex; align-items:center; gap:7px; padding:5px 8px; margin-bottom:4px; border-bottom:1px solid var(--line-100); color:var(--muted); } .chip-pop__search input { flex:1; border:0; outline:none; background:transparent; font:inherit; font-size:13px; color:var(--ink); } .chip-pop__list { max-height:260px; overflow:auto; display:flex; flex-direction:column; gap:2px; } .chip-pop__opt { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 7px; border-radius:8px; cursor:pointer; } .chip-pop__opt:hover, .chip-pop__opt.is-active { background:var(--surface-50); } .chip-pop__chk { display:inline-flex; color:var(--ink); opacity:0; flex:none; } .chip-pop__opt.is-sel .chip-pop__chk { opacity:1; } .chip-pop__empty { padding:10px 8px; font-size:12.5px; color:var(--muted); text-align:center; } @media (max-width:640px){ .chip-pop { left:8px !important; right:8px; width:auto !important; max-width:none; } } /* ── Action chips (preset buttons ala chip) — PRD 12.12, dipakai Finance "Aksi cepat" ── */ .chip-act-row { display:flex; flex-wrap:wrap; gap:7px; } .chip-act { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--radius-pill); border:1px solid var(--line-200); background:var(--surface-0); color:var(--ink); font:inherit; font-size:12.5px; font-weight:540; cursor:pointer; transition:background .12s,border-color .12s,color .12s,transform .04s; } .chip-act:hover { border-color:var(--ink-500); background:var(--surface-50); } .chip-act:active { transform:translateY(1px); } .chip-act:focus-visible { outline:2px solid var(--ink-900); outline-offset:2px; } .chip-act__dot { width:7px; height:7px; border-radius:50%; flex:none; background:var(--ink-400); } .chip-act--in .chip-act__dot { background:var(--pst-success-text); } .chip-act--out .chip-act__dot { background:var(--pst-danger-text); } .chip-act--in:hover { background:var(--pst-success-bg); border-color:var(--pst-success-border); color:var(--pst-success-text); } .chip-act--out:hover { background:var(--pst-danger-bg); border-color:var(--pst-danger-border); color:var(--pst-danger-text); } /* ── In/out toggle (uang masuk hijau · uang keluar merah) — scoped, tak ganggu .seg lain ── */ .seg--io .seg-btn::before { content:''; width:7px; height:7px; border-radius:50%; flex:none; background:var(--ink-400); } .seg--io .seg-btn[data-fin-dir="in"]::before { background:var(--pst-success-text); } .seg--io .seg-btn[data-fin-dir="out"]::before { background:var(--pst-danger-text); } .seg--io .seg-btn[data-fin-dir="in"].active { background:var(--pst-success-bg); color:var(--pst-success-text); box-shadow:none; } .seg--io .seg-btn[data-fin-dir="out"].active { background:var(--pst-danger-bg); color:var(--pst-danger-text); box-shadow:none; } /* Page map */ .cat-pchip { display:inline-block; font-size:11.5px; padding:2px 9px; border-radius:999px; background:var(--paper-warm2); color:var(--ink); margin:2px 4px 2px 0; } .cat-pchip--feat { background:var(--identity-yellow-soft); } /* .cat-pmrow di-deprecate PRD 12.12 F2 — modal page-map kini pakai .chip-field. */ /* ══ Pedoman / Guides (in-app wiki) — Finance + generik ══════════════ */ .fin-guide-wrap { display:grid; grid-template-columns:264px 1fr; gap:16px; align-items:start; } /* R-14 — nav sticky WAJIB punya batas tinggi + gulir sendiri; tanpa itu daftar artikel yang panjang tidak bisa dijangkau sama sekali. Ambangnya diukur dari kontainer modul (D-06), bukan viewport. */ .fin-guide-nav { position:sticky; top:76px; margin-bottom:0; max-height:calc(100dvh - 96px); overflow:auto; overscroll-behavior:contain; } .fin-guide-nav .panel-body { padding:8px; } @container finroot (max-width: 860px) { .fin-guide-wrap { grid-template-columns:1fr; } .fin-guide-nav { position:static; max-height:none; overflow:visible; } } /* Tabel di dalam artikel Pedoman lolos dari mesin card-mode; beri wadah gulir sendiri supaya tidak mendorong lebar halaman. */ .fin-md table { display:block; max-width:100%; overflow-x:auto; } /* Category color tag (Fresh Tag pastel) */ .fin-cat-chip { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:3px 9px; border-radius:var(--radius-pill); border:1px solid transparent; margin:13px 0 7px 4px; } .fin-cat-chip:first-child { margin-top:2px; } /* Generic pastel palette helpers */ .pst-neutral { background:var(--pst-neutral-bg); border-color:var(--pst-neutral-border); color:var(--pst-neutral-text); } .pst-blue { background:var(--pst-blue-bg); border-color:var(--pst-blue-border); color:var(--pst-blue-text); } .pst-mint { background:var(--pst-mint-bg); border-color:var(--pst-mint-border); color:var(--pst-mint-text); } .pst-info { background:var(--pst-info-bg); border-color:var(--pst-info-border); color:var(--pst-info-text); } .pst-purple { background:var(--pst-purple-bg); border-color:var(--pst-purple-border); color:var(--pst-purple-text); } .pst-warning { background:var(--pst-warning-bg); border-color:var(--pst-warning-border); color:var(--pst-warning-text); } .pst-identity { background:var(--pst-identity-bg); border-color:var(--pst-identity-border); color:var(--pst-identity-text); } /* Article link */ .fin-guide-link { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-sm); color:var(--graphite); font-size:13px; font-weight:520; text-decoration:none; line-height:1.35; transition:background .12s,color .12s; } .fin-guide-link svg { flex:none; color:var(--muted); transition:color .12s; } .fin-guide-link:hover { background:var(--paper-warm); color:var(--ink); } .fin-guide-link.active { background:var(--ink-950); color:#fff; font-weight:640; box-shadow:var(--shadow-card); } .fin-guide-link.active svg { color:var(--identity-yellow); } /* Article header */ .fin-guide-head { align-items:flex-start; } .fin-guide-title h2 { font-family:var(--font-heading); font-size:18px; font-weight:760; letter-spacing:-.01em; } .fin-guide-sum { font-size:12.5px; color:var(--muted); margin-top:4px; max-width:62ch; line-height:1.5; } .fin-guide-actions { display:flex; gap:6px; flex:none; } /* ── Rendered markdown body ─────────────────────────────────────── */ .fin-md { font-size:13.5px; line-height:1.7; color:var(--ink-900); max-width:76ch; } .fin-md > :first-child { margin-top:0; } .fin-md > :last-child { margin-bottom:0; } .fin-md h2 { font-family:var(--font-heading); font-size:16px; font-weight:720; letter-spacing:-.01em; margin:22px 0 9px; padding-bottom:6px; border-bottom:1px solid var(--line); } .fin-md h3 { font-size:14px; font-weight:700; margin:18px 0 6px; color:var(--ink); } .fin-md h4 { font-size:12.5px; font-weight:700; margin:16px 0 5px; color:var(--graphite); } .fin-md p { margin:0 0 11px; } .fin-md ul, .fin-md ol { margin:0 0 12px; padding-left:22px; } .fin-md li { margin:5px 0; padding-left:3px; } .fin-md li::marker { color:var(--muted); } .fin-md ol li::marker { color:var(--electric-blue); font-weight:700; } .fin-md strong { font-weight:680; color:var(--ink); } .fin-md em { font-style:italic; } .fin-md a { color:var(--electric-blue); text-decoration:underline; text-underline-offset:2px; } .fin-md a:hover { color:var(--ink); } .fin-md code { font-family:var(--font-mono); font-size:.86em; background:var(--pst-neutral-bg); border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--ink-900); } .fin-md pre.md-pre { background:var(--ink-950); color:#eaeaea; border-radius:var(--r-sm); padding:12px 14px; overflow:auto; margin:0 0 12px; } .fin-md pre.md-pre code { background:none; border:0; padding:0; color:inherit; font-size:12px; } .fin-md blockquote.md-quote { margin:0 0 12px; padding:10px 14px; background:var(--pst-info-bg); border-left:3px solid var(--pst-info-border); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--pst-info-text); font-size:13px; } .fin-md blockquote.md-quote a { color:var(--pst-info-text); } .fin-md hr.md-hr { border:0; border-top:1px solid var(--line); margin:18px 0; } .fin-md table.fin-tbl { width:100%; border-collapse:collapse; margin:0 0 14px; font-size:12.5px; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; } .fin-md table.fin-tbl th { background:var(--paper-warm); text-align:left; font-weight:680; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--graphite); padding:9px 12px; border-bottom:1px solid var(--line); } .fin-md table.fin-tbl td { padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top; } .fin-md table.fin-tbl tr:last-child td { border-bottom:0; } @media (max-width:860px){ .fin-guide-wrap { grid-template-columns:1fr; } .fin-guide-nav { position:static; } } /* Header "Pedoman" tab per modul (PRD 12.16 D1-b) */ .guide-tab { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--paper); color:var(--graphite); font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap; transition:background .12s,color .12s,border-color .12s; } .guide-tab svg { color:var(--muted); } .guide-tab:hover { background:var(--paper-warm); color:var(--ink); border-color:var(--ink-400); } .guide-tab.active { background:var(--ink-950); color:#fff; border-color:var(--ink-950); } .guide-tab.active svg { color:var(--identity-yellow); } /* Draft (unpublished) article in nav */ .fin-guide-link.is-draft span { opacity:.6; font-style:italic; } .fin-guide-link.is-draft::after { content:"draft"; margin-left:auto; font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--pst-warning-text); background:var(--pst-warning-bg); border:1px solid var(--pst-warning-border); padding:1px 6px; border-radius:var(--radius-pill); } /* Settings → Pedoman: baris toggle visibilitas per modul */ .guide-vis-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 2px; border-bottom:1px solid var(--line-soft); } .guide-vis-row:last-child { border-bottom:0; } .guide-vis-row .gv-name { font-weight:640; font-size:13.5px; } .guide-vis-row .gv-sub { font-size:11.5px; margin-top:2px; } .gv-toggle { min-width:52px; text-align:center; flex:none; } /* ══ Asisten Onboarding (PRD 12.30) — launcher = tombol topbar #asstTopBtn; panel dropdown kanan-atas ══ */ #bgAsst { position:fixed; z-index:1200; } /* wadah panel; tak ada lagi FAB mengambang */ /* Lebar fluid (vw) + batas rem — sebelumnya 380px mati. Token DS disamakan dgn drawer lain (surface-0 / line-200 / radius-lg). */ .asst-panel { position:fixed; top:62px; right:18px; width:clamp(18rem,26vw,23.75rem); max-width:calc(100vw - 32px); height:520px; max-height:calc(100vh - 92px); background:var(--surface-0,var(--paper)); border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-lg,var(--r-lg)); box-shadow:var(--shadow-pop); display:flex; flex-direction:column; overflow:hidden; z-index:1200; } .asst-panel[hidden] { display:none; } .asst-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:13px 15px; background:var(--ink-950); color:#fff; } .asst-head b { font-size:14px; font-weight:700; } .asst-sub { font-size:11px; color:#B8B8B4; margin-top:2px; } .asst-x { background:none; border:0; color:#fff; cursor:pointer; opacity:.8; } .asst-x:hover { opacity:1; } .asst-msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--app-bg); } .asst-msg { max-width:90%; font-size:13px; line-height:1.55; padding:9px 12px; border-radius:14px; } .asst-msg.user { align-self:flex-end; background:var(--ink-950); color:#fff; border-bottom-right-radius:4px; } .asst-msg.bot { align-self:flex-start; background:var(--paper); border:1px solid var(--line); border-bottom-left-radius:4px; } .asst-msg.bot p { margin:0 0 6px; } .asst-msg.bot :last-child { margin-bottom:0; } .asst-msg.bot strong { font-weight:680; } .asst-msg.bot code { font-family:var(--font-mono); font-size:.85em; background:var(--pst-neutral-bg); border:1px solid var(--line); border-radius:5px; padding:1px 5px; } .asst-typing { color:var(--muted); letter-spacing:2px; } .asst-srcs { display:flex; flex-direction:column; gap:4px; margin-top:8px; } .asst-src { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--electric-blue); background:var(--pst-blue-bg); border:1px solid var(--pst-blue-border); border-radius:var(--radius-pill); padding:3px 10px; text-decoration:none; } .asst-src:hover { background:var(--pst-blue-border); color:var(--ink); } .asst-fb { display:flex; flex-wrap:wrap; gap:6px; align-self:flex-start; } .asst-input { display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:var(--paper); } .asst-input .ctrl { flex:1; } .asst-input .abtn { flex:none; padding:8px 12px; } .asst-foot { font-size:10.5px; color:var(--muted); padding:6px 12px 9px; background:var(--paper); text-align:center; } .asst-foot a { color:var(--electric-blue); } @media (max-width:520px){ .asst-panel { top:56px; left:8px; right:8px; width:auto; max-width:none; height:auto; max-height:calc(100dvh - 150px); } } /* Inbox tiket — chip gap analitik */ .gap-row { display:flex; flex-wrap:wrap; gap:8px; } .gap-chip { font-size:12px; padding:4px 11px; border-radius:var(--radius-pill); background:var(--pst-warning-bg); border:1px solid var(--pst-warning-border); color:var(--pst-warning-text); } .ht-q { background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 13px; margin-bottom:12px; font-size:13px; } /* ============================================================ PRD 12.26 — Workspace Forum & Internal Chat ============================================================ */ .ws-top-cluster{ display:inline-flex; gap:4px; align-items:center; } .ws-top-btn{ position:relative; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--line,#e6e8ee); background:var(--paper,#fff); color:var(--ink,#1a1a2e); cursor:pointer; transition:background .15s ease; } .ws-top-btn:hover{ background:var(--paper-warm,#f7f8fa); } .ws-badge{ position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--danger,#dc2626); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; } .ws-ch .ws-badge{ position:static; } /* Launcher chat = tombol topbar #wsChatBtn (bubble mengambang dipensiunkan). */ /* Notif bell popover */ .ws-bell-pop{ position:fixed; right:18px; top:62px; z-index:76; width:340px; max-width:calc(100vw - 24px); max-height:70vh; overflow:auto; background:var(--paper,#fff); border:1px solid var(--line,#e6e8ee); border-radius:14px; box-shadow:0 16px 48px rgba(5,5,5,.18); } .ws-pop-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line,#e6e8ee); } .ws-pop-body{ padding:6px; } .ws-noti{ display:block; padding:9px 10px; border-radius:9px; text-decoration:none; color:var(--ink,#1a1a2e); } .ws-noti:hover{ background:var(--paper-warm,#f7f8fa); } .ws-noti.is-unread{ background:rgba(79,70,229,.06); } .ws-noti-t{ font-weight:650; font-size:13px; } .ws-noti-b{ font-size:12px; color:var(--muted,#6b7280); margin-top:1px; } .ws-noti-time{ font-size:11px; color:var(--muted,#9aa0ab); margin-top:2px; } .ws-empty{ padding:18px; text-align:center; color:var(--muted,#6b7280); font-size:13px; } /* ══ Notifikasi tindakan booking — nav badge + bell. Reuse anatomi .ws-* (bell/pop). ══ */ /* vs-badge — DS primitif (12.04.00 data-display/Badge.jsx): hitungan/dot untuk nav, tab, icon. */ .vs-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:var(--radius-pill); font-family:var(--font-mono); font-size:11px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; box-sizing:border-box; } .vs-badge--sm{ min-width:16px; height:16px; font-size:10px; padding:0 4px; } .vs-badge--dot{ min-width:0; width:8px; height:8px; padding:0; } .vs-badge--ink{ background:var(--primary); color:var(--primary-contrast); } .vs-badge--brand{ background:var(--brand); color:var(--brand-ink); } .vs-badge--danger{ background:var(--accent-red); color:#fff; } .vs-badge--neutral{ background:var(--ink-100); color:var(--text-muted); } /* Badge hitungan pada item nav (desktop): dorong ke ujung kanan saat sidebar terbuka. */ .nav a .nav-badge{ margin-left:auto; display:inline-flex; flex:0 0 auto; } @media (min-width:861px){ /* Rail tertutup: tak ada ruang angka → badge jadi dot di pojok ikon. */ .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .nav a{ overflow:visible; } .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .nav a .nav-badge{ position:absolute; top:6px; right:16px; margin:0; } .admin-shell.is-rail .sidebar:not(:hover):not(:focus-within) .nav a .nav-badge .vs-badge{ min-width:9px; width:9px; height:9px; padding:0; font-size:0; box-shadow:0 0 0 2px var(--paper,#fff); } } /* Badge pada nav mobile: dot/hitungan di pojok kanan-atas item. */ .mnav a{ position:relative; } .mnav a .nav-badge{ position:absolute; top:4px; right:12px; } .mnav a .nav-badge .vs-badge{ box-shadow:0 0 0 2px var(--paper,#fff); } /* Baris notifikasi booking di popover (komposit = grid auto|minmax(0,1fr)|auto). */ .bk-notice-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--radius-sm); text-decoration:none; color:var(--ink); } .bk-notice-row:hover{ background:var(--paper-warm,#f7f8fa); } .bk-notice-ic{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; } .bk-notice-ic--danger{ background:var(--tag-danger-bg); color:var(--tag-danger-text); } .bk-notice-ic--warning{ background:var(--tag-warning-bg); color:var(--tag-warning-text); } .bk-notice-ic--neutral{ background:var(--surface-50); color:var(--text-muted); } .bk-notice-tt{ font-weight:640; font-size:13px; } .bk-notice-sb{ font-size:11.5px; color:var(--muted); margin-top:1px; } .bk-notice-empty{ padding:22px 14px; text-align:center; color:var(--muted); font-size:13px; } .bk-notice-foot{ padding:9px 12px 11px; border-top:1px solid var(--line); } .bk-notice-foot .abtn{ width:100%; justify-content:center; } /* Isi popover = booking nyata, bukan cuma angka. Popover ini sedikit lebih lebar dari .ws-bell-pop bawaan supaya nama klien + subline muat satu baris; scope ke #bkNoticePop saja agar popover lonceng WSComm tidak ikut berubah. */ #bkNoticePop{ width:382px; } /* Judul + petunjuk ditumpuk: dua-duanya di satu baris flex bikin keduanya terjepit jadi 2 baris masing-masing di lebar 382px. */ #bkNoticePop .ws-pop-head{ display:block; } .bk-notice-hint{ display:block; margin-top:2px; font-size:10.5px; color:var(--muted); font-weight:500; } /* Judul + subline kategori: keduanya span; tanpa display:block mereka mengalir jadi satu kalimat ("…diproses7 overdue (>12 jam)"). */ .bk-notice-tt{ display:block; } .bk-notice-sb{ display:block; } .bk-notice-grp{ padding-bottom:4px; } .bk-notice-grp + .bk-notice-grp{ margin-top:2px; border-top:1px solid var(--line-100); padding-top:4px; } /* Baris item: nama | kode · detail di baris kedua (span penuh). TANPA garis warna di pinggir — warna kategori cukup hidup di fill ikon kategori. Indent 43px = lebar ikon kategori (32) + gap (11), jadi item lurus di bawah judulnya. */ .bk-notice-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:8px; row-gap:1px; margin:1px 0 1px 43px; padding:5px 9px; border-radius:var(--radius-sm); text-decoration:none; color:var(--ink); } .bk-notice-item:hover{ background:var(--paper-warm,#f7f8fa); } .bk-notice-item__tt{ min-width:0; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bk-notice-item__id{ font-size:10.5px; color:var(--text-muted); white-space:nowrap; } .bk-notice-item__sb{ grid-column:1 / -1; min-width:0; font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bk-notice-more{ display:block; margin:2px 0 0 43px; padding:5px 9px; border-radius:var(--radius-sm); font-size:11px; font-weight:600; color:var(--text-muted); text-decoration:none; } .bk-notice-more:hover{ background:var(--paper-warm,#f7f8fa); color:var(--text-strong); } .bk-notice-load{ padding:10px 12px; font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:6px; } /* Chat slide-over */ .ws-chat-overlay{ position:fixed; inset:0; z-index:70; background:rgba(10,10,10,.28); } /* Lebar fluid (vw) + batas rem — sebelumnya 440px mati. Token DS disamakan. */ .ws-chat-panel{ position:fixed; top:0; right:0; bottom:0; z-index:72; width:clamp(20rem,30vw,27.5rem); max-width:100vw; display:flex; flex-direction:column; background:var(--surface-0,var(--paper,#fff)); border-left:1px solid var(--line-200,var(--line,#e6e8ee)); box-shadow:-12px 0 36px rgba(5,5,5,.14); } /* `display:flex` di atas mengalahkan UA `[hidden]{display:none}`, jadi atribut hidden harus ditegaskan ulang — kalau tidak, panel chat kosong nyangkut sbg lapisan blank di kanan tiap modul. (lih. pola .pos-*-menu[hidden]) */ .ws-chat-overlay[hidden], .ws-chat-panel[hidden]{ display:none !important; } .ws-chat-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line,#e6e8ee); } .ws-x{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; border:none; background:transparent; cursor:pointer; color:var(--ink,#1a1a2e); } .ws-x:hover{ background:var(--paper-warm,#f7f8fa); } .ws-chat-body{ flex:1; display:flex; min-height:0; } .ws-chat-list{ width:160px; border-right:1px solid var(--line,#e6e8ee); overflow:auto; padding:6px; } .ws-ch{ display:flex; align-items:center; gap:6px; width:100%; padding:8px; border:none; background:transparent; border-radius:9px; cursor:pointer; text-align:left; color:var(--ink,#1a1a2e); } .ws-ch:hover{ background:var(--paper-warm,#f7f8fa); } .ws-ch.is-active{ background:rgba(79,70,229,.1); } .ws-ch-nm{ flex:1; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ws-chat-main{ flex:1; display:flex; flex-direction:column; min-width:0; } .ws-msgs{ flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:8px; } .ws-msg{ max-width:84%; align-self:flex-start; } .ws-msg--own{ align-self:flex-end; text-align:right; } .ws-msg--del{ align-self:center; color:var(--muted,#9aa0ab); font-size:12px; font-style:italic; } .ws-msg-meta{ font-size:10.5px; color:var(--muted,#9aa0ab); margin-bottom:2px; } .ws-msg-body{ display:inline-block; padding:8px 11px; border-radius:12px; background:var(--paper-warm,#f1f2f5); font-size:13.5px; line-height:1.45; text-align:left; word-break:break-word; } .ws-msg--own .ws-msg-body{ background:var(--accent,#4f46e5); color:#fff; } .ws-msg-acts{ display:flex; gap:6px; align-items:center; margin-top:3px; flex-wrap:wrap; font-size:11px; } .ws-msg--own .ws-msg-acts{ justify-content:flex-end; } .ws-react{ background:var(--paper-warm,#f1f2f5); border:1px solid var(--line,#e6e8ee); border-radius:20px; padding:1px 7px; cursor:pointer; } .ws-react-add,.ws-mini,.ws-mini-act{ cursor:pointer; color:var(--muted,#6b7280); display:inline-flex; align-items:center; gap:3px; } .ws-react-add:hover,.ws-mini:hover,.ws-mini-act:hover{ color:var(--accent,#4f46e5); } .ws-composer{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line,#e6e8ee); align-items:flex-end; } .ws-composer textarea{ flex:1; resize:none; max-height:120px; } .ws-pick-list{ display:flex; flex-direction:column; gap:4px; max-height:200px; overflow:auto; border:1px solid var(--line,#e6e8ee); border-radius:9px; padding:8px; } .ws-pick{ display:flex; align-items:center; gap:8px; font-size:13px; } /* Forum */ .ws-forum-mini{ padding:4px; } .ws-forum-mini-row{ display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--ink,#1a1a2e); } .ws-forum-mini-row:hover{ background:var(--paper-warm,#f7f8fa); } .ws-forum-mini-row.is-unread .ws-fm-title{ font-weight:700; } .ws-fm-title{ flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ws-fm-meta{ font-size:11px; color:var(--muted,#9aa0ab); display:inline-flex; gap:4px; align-items:center; } .ws-forum-mini-foot{ padding:8px 10px; } .ws-cat-list{ display:flex; flex-direction:column; gap:6px; } .ws-cat-card{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line,#e6e8ee); border-radius:11px; text-decoration:none; color:var(--ink,#1a1a2e); } .ws-cat-card:hover{ background:var(--paper-warm,#f7f8fa); } .ws-cat-ic{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:rgba(79,70,229,.1); color:var(--accent,#4f46e5); } .ws-cat-nm{ font-weight:650; font-size:14px; } .ws-cat-ct{ font-weight:700; color:var(--muted,#6b7280); font-size:13px; } .ws-thread-list{ display:flex; flex-direction:column; } .ws-thread-row{ display:block; padding:11px 14px; border-bottom:1px solid var(--line,#eef0f3); text-decoration:none; color:var(--ink,#1a1a2e); } .ws-thread-row:hover{ background:var(--paper-warm,#f7f8fa); } .ws-tr-main{ display:flex; align-items:center; gap:6px; } .ws-tr-title{ font-weight:620; font-size:14px; } .ws-thread-row.is-unread .ws-tr-title{ font-weight:800; } .ws-tr-meta{ font-size:11.5px; color:var(--muted,#9aa0ab); margin-top:2px; } .ws-thread-top{ display:flex; align-items:center; gap:8px; margin-bottom:12px; } .ws-thread-h h2{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:19px; margin:0; } .ws-posts{ display:flex; flex-direction:column; gap:10px; margin:14px 0; } .ws-post{ background:var(--paper,#fff); border:1px solid var(--line,#e6e8ee); border-radius:12px; padding:13px 15px; } .ws-post.is-answer{ border-color:var(--ok,#16a34a); box-shadow:0 0 0 1px var(--ok,#16a34a) inset; } .ws-post--del{ color:var(--muted,#9aa0ab); font-style:italic; } .ws-post-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; } .ws-post-body{ font-size:14px; line-height:1.6; word-break:break-word; } .ws-post-acts{ display:flex; gap:12px; align-items:center; margin-top:9px; flex-wrap:wrap; font-size:12px; } .ws-answer-tag{ display:inline-flex; align-items:center; gap:3px; color:var(--ok,#16a34a); font-weight:650; font-size:12px; } .ws-locked{ display:flex; align-items:center; gap:8px; color:var(--muted,#6b7280); font-size:13px; padding:8px 0; } @media (max-width:640px){ .ws-chat-panel{ width:100vw; } } /* 12.26 F4 — thread↔entity link card */ .ws-link-card{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:7px 12px; border-radius:10px; border:1px solid var(--line,#e6e8ee); background:var(--paper-warm,#f7f8fa); text-decoration:none; color:var(--ink,#1a1a2e); font-size:13px; } .ws-link-card:hover{ border-color:var(--accent,#4f46e5); } .ws-link-card .meta{ color:var(--muted,#9aa0ab); } /* PRD 12.28 Customer Trust Engine — badge standing & conduct */ .pay-chip.trust-st{font-weight:700} .pay-chip.trust-green{background:#e7f7ed;color:#0f7a3d;border:1px solid #bfe8cf} .pay-chip.trust-neutral{background:#eef0f3;color:#555c68;border:1px solid #dfe2e8} .pay-chip.trust-red{background:#fdeaea;color:#b3261e;border:1px solid #f3c4c0} .pay-chip.trust-conduct{font-weight:700} .pay-chip.trust-c-watchlist{background:#fff3e0;color:#b7791f;border:1px solid #f3dcae} .pay-chip.trust-c-suspended{background:#fdeaea;color:#b3261e;border:1px solid #f3c4c0} /* ============================================================ Reception Station (PRD 12.32) — kiosk lock-screen, badge, PIN ============================================================ */ .station-lock{ position:fixed; inset:0; z-index:9000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(8,8,12,.72); backdrop-filter:blur(8px); } body.station-locked{ overflow:hidden; } body.station-locked .admin-shell, body.station-locked .admin-main{ filter:blur(3px); pointer-events:none; } .station-lock .st-card{ width:min(440px,94vw); border-radius:22px; padding:30px 26px 22px; color:#fff; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.5); } .st-card .st-brand{ font-family:var(--font-heading); font-weight:800; letter-spacing:.16em; font-size:13px; opacity:.8; text-transform:uppercase; } .st-card .st-label{ font-size:20px; font-weight:700; margin-top:2px; } .st-card .st-clock{ font-family:var(--font-mono); font-size:40px; font-weight:700; margin:10px 0 14px; letter-spacing:.04em; } .st-card .st-qr{ background:#fff; border-radius:16px; padding:14px; width:248px; height:248px; margin:0 auto; display:flex; align-items:center; justify-content:center; } .st-card .st-qr svg{ width:100%; height:100%; display:block; } .st-qr-fallback{ font-family:var(--font-mono); font-size:11px; color:#111; word-break:break-all; } .st-card .st-help{ display:flex; gap:8px; align-items:center; justify-content:center; font-size:13px; opacity:.92; margin-top:16px; line-height:1.4; } .st-card .st-help svg{ flex:0 0 auto; } .st-card .st-foot{ font-size:11px; opacity:.6; margin-top:8px; } .st-card .st-op{ display:inline-flex; gap:6px; align-items:center; font-size:13px; background:rgba(255,255,255,.12); padding:5px 12px; border-radius:999px; margin:8px 0 14px; } .st-card--pin .st-altrow{ display:flex; gap:8px; justify-content:center; margin-top:14px; } .st-spin{ width:30px; height:30px; border:3px solid var(--ink-100); border-top-color:var(--ink-950); border-radius:50%; animation:stspin .7s linear infinite; margin:6px auto; } @keyframes stspin{ to{ transform:rotate(360deg); } } /* operator badge (floating, active state) */ .station-badge{ position:fixed; top:10px; right:14px; z-index:8000; display:none; align-items:center; gap:8px; background:var(--panel,#fff); border:1px solid var(--line,#e6e6ea); border-radius:999px; padding:5px 6px 5px 12px; box-shadow:0 6px 20px rgba(0,0,0,.1); font-size:13px; } .station-badge .stb-dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); } .station-badge .stb-name{ display:inline-flex; gap:5px; align-items:center; font-weight:600; color:var(--ink,#111); } .station-badge .stb-menu{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:none; background:transparent; border-radius:999px; cursor:pointer; color:var(--muted,#666); } .station-badge .stb-menu:hover{ background:rgba(0,0,0,.06); } .st-menu{ display:flex; flex-direction:column; gap:8px; } .st-menu .abtn{ justify-content:flex-start; } /* PIN pad */ .pinpad{ max-width:248px; margin:0 auto; } .pin-dots{ display:flex; gap:10px; justify-content:center; margin:4px 0 14px; min-height:14px; } .pin-dots span{ width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.5); } .pin-dots span.on{ background:#fff; border-color:#fff; } .pin-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .pin-key{ height:54px; border-radius:14px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#fff; font-size:22px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; } .pin-key:active{ transform:scale(.96); } .pin-key.pin-ok{ background:#fff; color:#111; border-color:#fff; } .pin-key.pin-min{ font-size:18px; } .pin-hint{ font-size:12px; opacity:.8; text-align:center; margin-top:12px; } /* PIN pad inside white modal (switch operator) → dark keys */ .mc-body .pinpad .pin-dots span{ border-color:rgba(0,0,0,.3); } .mc-body .pinpad .pin-dots span.on{ background:#111; border-color:#111; } .mc-body .pinpad .pin-key{ border-color:var(--line,#e6e6ea); background:#f6f6f8; color:#111; } .mc-body .pinpad .pin-key.pin-ok{ background:#111; color:#fff; } .mc-body .pinpad .pin-hint{ color:var(--muted,#666); } /* Pusat Kendali Stasiun rows */ .stn-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line,#eee); } .stn-row:last-child{ border-bottom:none; } .stn-row .stn-main{ flex:1; min-width:0; } .stn-row .stn-name{ display:flex; gap:6px; align-items:center; font-weight:600; } .stn-row .stn-sub{ font-size:12px; margin-top:2px; } .stn-row .stn-act{ display:flex; gap:6px; white-space:nowrap; } @media (max-width:520px){ .stn-row{ flex-wrap:wrap; } .station-badge{ top:auto; bottom:12px; } } /* ============================================================ STOREFRONT PAGE BUILDER (PRD 12.45) — komposer visual ============================================================ */ .pb-badge{ display:inline-block; font-size:11px; font-weight:600; padding:2px 7px; border-radius:999px; background:var(--pst-neutral-bg); color:var(--pst-neutral-text); border:1px solid var(--pst-neutral-border); vertical-align:middle; margin-left:6px; } .pb-badge--draft{ background:var(--pst-warning-bg); color:var(--pst-warning-text); border-color:var(--pst-warning-border); } .pb-badge--off{ opacity:.6; } .pb-switch{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; } .pb-switch input{ width:0; height:0; opacity:0; position:absolute; } .pb-switch-ui{ width:40px; height:22px; border-radius:999px; background:var(--line); position:relative; transition:.18s; flex:none; } .pb-switch-ui::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.18s; box-shadow:var(--shadow-1); } .pb-switch input:checked + .pb-switch-ui{ background:var(--ink); } .pb-switch input:checked + .pb-switch-ui::after{ transform:translateX(18px); } .pb-topbar{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:5; flex-wrap:wrap; } .pb-topbar .grow{ flex:1; } .pb-topbar .back{ display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--muted); text-decoration:none; } .pb-layertabs{ display:flex; gap:2px; flex-wrap:wrap; } .pb-layertabs a{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:var(--r-sm); font-size:13px; font-weight:500; color:var(--muted); text-decoration:none; border:1px solid transparent; } .pb-layertabs a.active{ background:var(--ink); color:#fff; } .pb-layertabs a:not(.active):hover{ background:var(--paper-warm); } .pb-status{ font-size:12px; color:var(--muted); } .pb-status.is-dirty{ color:var(--danger); font-weight:600; } .pb-shell{ display:grid; grid-template-columns:210px minmax(280px,1fr) minmax(360px,1.2fr); gap:0; height:calc(100vh - 120px); min-height:520px; } .pb-pane-h{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:11px 13px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper); z-index:2; } .pb-palette{ border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--paper-warm); } .pb-pal-scroll{ overflow:auto; padding:8px; } .pb-pal-grp{ margin-bottom:12px; } .pb-pal-h{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:4px 4px 6px; } .pb-pal-items{ display:flex; flex-direction:column; gap:4px; } .pb-pal-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 9px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; cursor:pointer; font-size:13px; color:var(--ink); transition:.12s; } .pb-pal-item:hover{ border-color:var(--ink); background:var(--paper-warm2); transform:translateY(-1px); } .pb-pal-item svg{ color:var(--muted); flex:none; } .pb-canvas{ border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; } .pb-canvas-scroll{ overflow:auto; padding:10px; flex:1; } .pb-canvas-empty{ text-align:center; color:var(--muted); padding:48px 20px; } .pb-canvas-empty svg{ color:var(--line); margin-bottom:10px; } .pb-canvas-empty p{ font-size:14px; } .pb-card{ border:1px solid var(--line); border-radius:var(--r-md); background:#fff; margin-bottom:8px; overflow:hidden; } .pb-card.is-sel{ border-color:var(--ink); box-shadow:0 0 0 2px rgba(0,0,0,.06); } .pb-card.is-container{ background:var(--paper-warm); } .pb-card.is-dragging{ opacity:.45; } .pb-card.pb-dropover{ border-color:var(--ink); border-style:dashed; } .pb-card-hd{ display:flex; align-items:center; gap:8px; padding:9px 10px; cursor:pointer; user-select:none; } .pb-drag{ color:var(--line); cursor:grab; display:inline-flex; } .pb-card-ic{ color:var(--muted); display:inline-flex; } .pb-card-lb{ font-size:13.5px; font-weight:600; flex:1; } .pb-visoff{ color:var(--muted); display:inline-flex; } .pb-card-acts{ display:flex; gap:2px; } .pb-mini{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:var(--r-sm); background:transparent; cursor:pointer; color:var(--muted); } .pb-mini:hover{ background:var(--paper-warm2); color:var(--ink); } .pb-mini--del:hover{ color:var(--danger); } .pb-inspector{ padding:12px 12px 14px; border-top:1px solid var(--line); background:var(--paper-warm); } .pb-f{ display:block; margin-bottom:10px; } .pb-f > span{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px; } .pb-f .ctrl{ width:100%; } .pb-f-chk{ display:flex; align-items:center; gap:8px; } .pb-f-chk > span{ margin:0; } .pb-help{ font-size:12px; color:var(--muted); background:#fff; border:1px dashed var(--line); border-radius:var(--r-sm); padding:8px 10px; margin-top:2px; } .pb-hr{ border:0; border-top:1px solid var(--line); margin:12px 0; } .pb-vis{ display:flex; gap:12px; } .pb-vischk{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink); } .pb-children{ padding:6px 10px 10px 20px; border-left:2px solid var(--line); margin:0 10px 8px; } .pb-empty-child{ font-size:12px; color:var(--muted); padding:10px; text-align:center; border:1px dashed var(--line); border-radius:var(--r-sm); } .pb-addchild{ margin-top:6px; font-size:12px; color:var(--muted); background:transparent; border:1px dashed var(--line); border-radius:var(--r-sm); padding:6px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; } .pb-addchild:hover{ border-color:var(--ink); color:var(--ink); } .pb-preview{ display:flex; flex-direction:column; min-height:0; background:var(--paper-warm2); } .pb-prev-bar{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--paper); } .pb-prev-bar .grow{ flex:1; } .pb-prev-t{ font-size:12px; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:5px; } .pb-dev-seg{ display:flex; gap:2px; background:var(--paper-warm); border-radius:var(--r-sm); padding:2px; } .pb-dev{ width:30px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:5px; background:transparent; cursor:pointer; color:var(--muted); } .pb-dev.active{ background:#fff; color:var(--ink); box-shadow:var(--shadow-1); } .pb-prev-stage{ flex:1; overflow:auto; display:flex; justify-content:center; padding:16px; } .pb-frame{ width:1180px; max-width:100%; height:100%; min-height:480px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-1); transition:width .2s; } .pb-frame iframe{ width:100%; height:100%; min-height:640px; border:0; display:block; } @media (max-width:1100px){ .pb-shell{ grid-template-columns:1fr; height:auto; } .pb-palette,.pb-canvas{ border-right:0; border-bottom:1px solid var(--line); } .pb-pal-scroll{ max-height:220px; } .pb-prev-stage{ min-height:520px; } } /* Page Builder — Advanced Controller (nav editor) */ .pbg-nav{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; } .pbg-navrow{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; } .pbg-navrow .pbg-drag{ color:var(--line); display:inline-flex; } .pbg-navrow .ctrl{ flex:1; } .pbg-navrow .pbg-tab{ font-size:11px; color:var(--muted); font-family:var(--font-mono); background:var(--paper-warm); padding:2px 7px; border-radius:999px; } .pbg-navrow .pbg-ord{ display:flex; gap:2px; } .pbg-manage{ margin-top:6px; } /* Page Builder — hub headers & Form Builder (F5) */ .pb-hub-h{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:6px 2px 8px; } .fb-shell{ grid-template-columns:minmax(320px,1fr) minmax(380px,1.05fr) !important; } .fb-2col{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .fb-step{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-warm); margin-bottom:10px; overflow:hidden; } .fb-step-hd{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:#fff; border-bottom:1px solid var(--line); } .fb-step-hd .fb-drag{ color:var(--line); } .fb-step-label{ flex:1; font-weight:600; max-width:220px; } .fb-step-key{ font-size:11px; font-family:var(--font-mono); color:var(--muted); background:var(--paper-warm); padding:2px 7px; border-radius:999px; } .fb-step-acts{ display:flex; gap:2px; margin-left:auto; } .fb-step-body{ padding:8px 10px; display:flex; flex-direction:column; gap:6px; } .fb-field{ border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; } .fb-field.is-sel{ border-color:var(--ink); box-shadow:0 0 0 2px rgba(0,0,0,.05); } .fb-field-hd{ display:flex; align-items:center; gap:8px; padding:7px 9px; cursor:pointer; } .fb-field-ic{ color:var(--muted); display:inline-flex; } .fb-field-lb{ font-size:13px; font-weight:600; flex:1; } .fb-field-type{ font-size:11px; color:var(--muted); } .fb-req{ font-size:10px; font-weight:700; color:var(--danger); background:var(--pst-danger-bg); padding:1px 6px; border-radius:999px; text-transform:uppercase; } .fb-field-insp{ padding:10px; border-top:1px solid var(--line); background:var(--paper-warm); } .fb-empty-fields{ font-size:12px; color:var(--muted); text-align:center; padding:8px; border:1px dashed var(--line); border-radius:var(--r-sm); } .fb-addfield{ font-size:12px; color:var(--muted); background:transparent; border:1px dashed var(--line); border-radius:var(--r-sm); padding:6px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; align-self:flex-start; } .fb-addfield:hover{ border-color:var(--ink); color:var(--ink); } .fb-schedule{ font-size:12.5px; color:var(--muted); padding:10px; background:#fff; border:1px dashed var(--line); border-radius:var(--r-sm); display:flex; align-items:center; gap:8px; } .fb-step-txt{ display:grid; grid-template-columns:1fr 1.4fr; gap:6px; } .fb-step-txt .ctrl{ font-size:12.5px; } @media (max-width:900px){ .fb-step-txt{ grid-template-columns:1fr; } } /* Kebijakan Reschedule dinamis (cond-if) — baris aturan di tab Halaman */ .rsch-list{ display:flex; flex-direction:column; gap:8px; } .rsch-rule{ display:grid; grid-template-columns:auto 1.5fr .6fr .8fr 1.2fr auto; gap:8px; align-items:end; padding:10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-warm); } .rsch-rule .frow{ margin:0; } .rsch-rule .frow label{ font-size:11px; } .rsch-rule .fhint{ font-size:10.5px; margin-top:2px; } .rsch-if{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding-bottom:10px; } .rsch-rule .rdel{ margin-bottom:4px; } @media (max-width:900px){ .rsch-rule{ grid-template-columns:1fr 1fr; } .rsch-if{ display:none; } } /* Form Builder — tab pengaturan terpadu (12.45 merge pageEditor) */ .fb-tabs{ margin-left:6px; } .fb-set-wrap{ max-width:920px; margin:0 auto; padding:18px 16px 40px; } .fb-set-wrap .panel{ margin-bottom:14px; } .fb-schedule a{ color:inherit; } /* ============================================================ 12.47 — Workspace UI Refresh (DS v2.0): alias token + komponen Nilai --pst-* / --surface-* / --line-* / --text-* berasal dari app.css. ============================================================ */ :root{ --vs-yellow: var(--brand, #FFF700); --accent-blue: var(--pst-blue-text); --accent-violet: var(--pst-purple-text); --accent-orange: var(--pst-orange-text); --accent-red: var(--pst-danger-text); --accent-pink: var(--pst-pink-text); --accent-mint: var(--pst-mint-text); --ws-ink-100: var(--line-100); --ws-ink-300: var(--line-200); --ws-text-disabled: var(--text-subtle); } /* Subnav modul (pill row) */ .ws-subnav{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .ws-pill{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 15px; border-radius:100px; background:var(--surface-0); color:var(--text-muted); border:1px solid var(--line-200); font-size:13px; font-weight:500; white-space:nowrap; text-decoration:none; transition:background .12s ease, color .12s ease; } .ws-pill:hover{ border-color:var(--ink, #050505); color:var(--text-strong); } .ws-pill.is-on{ background:#050505; color:#fff; border-color:#050505; font-weight:700; } .ws-pill__badge{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:100px; background:var(--vs-yellow); color:#050505; } .ws-pill.is-on .ws-pill__badge{ background:var(--vs-yellow); color:#050505; } /* Tag tone-tetap */ .ws-tag{ display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px; border-radius:100px; font-size:10.5px; font-weight:600; white-space:nowrap; } .ws-tag--success{ background:var(--pst-success-bg); border:1px solid var(--pst-success-border); color:var(--pst-success-text); } .ws-tag--mint{ background:var(--pst-mint-bg); border:1px solid var(--pst-mint-border); color:var(--pst-mint-text); } .ws-tag--info{ background:var(--pst-info-bg); border:1px solid var(--pst-info-border); color:var(--pst-info-text); } .ws-tag--blue{ background:var(--pst-blue-bg); border:1px solid var(--pst-blue-border); color:var(--pst-blue-text); } .ws-tag--purple{ background:var(--pst-purple-bg); border:1px solid var(--pst-purple-border); color:var(--pst-purple-text); } .ws-tag--pink{ background:var(--pst-pink-bg); border:1px solid var(--pst-pink-border); color:var(--pst-pink-text); } .ws-tag--warning{ background:var(--pst-warning-bg); border:1px solid var(--pst-warning-border); color:var(--pst-warning-text); } .ws-tag--orange{ background:var(--pst-orange-bg); border:1px solid var(--pst-orange-border); color:var(--pst-orange-text); } .ws-tag--danger{ background:var(--pst-danger-bg); border:1px solid var(--pst-danger-border); color:var(--pst-danger-text); } .ws-tag--neutral{ background:var(--pst-neutral-bg); border:1px solid var(--pst-neutral-border); color:var(--pst-neutral-text); } .ws-tag--identity{ background:var(--pst-identity-bg); border:1px solid var(--pst-identity-border); color:var(--pst-identity-text); } /* Kartu statistik */ .ws-statgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; } .ws-statcard{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:14px; padding:14px 16px; } .ws-statcard__ico{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--surface-1); color:var(--text-muted); margin-bottom:10px; } .ws-statcard__val{ font-size:24px; font-weight:800; color:var(--text-strong); line-height:1.1; } .ws-statcard__lbl{ font-size:12px; color:var(--text-muted); margin-top:2px; } .ws-statcard__foot{ font-size:11px; color:var(--text-subtle); margin-top:4px; } /* Hero presensi */ .ws-hero{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:16px; padding:18px 20px; } .ws-hero__clock{ font-family:var(--font-mono); font-size:34px; font-weight:800; color:var(--text-strong); letter-spacing:.02em; } .ws-hero__cap{ font-size:12px; color:var(--text-subtle); } /* Slide-over kanan */ .ws-slideover-bd{ position:fixed; inset:0; background:rgba(5,5,5,.42); z-index:1200; opacity:0; animation:wsfade .16s ease forwards; } .ws-slideover{ position:fixed; top:0; right:0; height:100%; width:clamp(20rem,32vw,27.5rem); max-width:94vw; background:var(--surface-0); border-left:1px solid var(--line-200); box-shadow:-14px 0 40px rgba(5,5,5,.16); z-index:1201; display:flex; flex-direction:column; transform:translateX(100%); animation:wsslide .2s cubic-bezier(.2,.8,.2,1) forwards; } .ws-slideover__head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line-100); } .ws-slideover__head h3{ font-size:15px; font-weight:700; margin:0; flex:1; } .ws-slideover__body{ padding:16px; overflow-y:auto; flex:1; } .ws-slideover__foot{ padding:12px 16px; border-top:1px solid var(--line-100); display:flex; gap:8px; justify-content:flex-end; } @keyframes wsslide{ to{ transform:translateX(0); } } @keyframes wsfade{ to{ opacity:1; } } /* Kanban */ .ws-kanban{ display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; } .ws-kcol{ flex:0 0 272px; border-radius:14px; background:var(--surface-1); border:1px solid var(--line-100); transition:background .14s ease, border-color .14s ease; } .ws-kcol.is-over{ background:var(--brand-soft); border:1px dashed var(--brand-line); } .ws-kcol__head{ display:flex; align-items:center; gap:8px; padding:10px 12px; } .ws-kcol__dot{ width:9px; height:9px; border-radius:100px; } .ws-kcard{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:11px; padding:10px 11px; margin:0 8px 8px; cursor:grab; } .ws-kcard:active{ cursor:grabbing; } .ws-kcard__code{ font-family:var(--font-mono); font-size:10px; color:var(--text-subtle); } .ws-kcard__title{ font-size:12.5px; color:var(--text-body); margin:3px 0 6px; line-height:1.4; } /* Roster grid — sel penuh warna */ .ws-roster{ width:100%; border-collapse:separate; border-spacing:0; } .ws-roster th, .ws-roster td{ border-bottom:1px solid var(--line-100); } .ws-roster th{ padding:8px 6px; font-size:11px; color:var(--text-muted); font-weight:600; text-align:center; } .ws-roster th.ws-roster__demand--hot{ color:var(--pst-danger-text); font-weight:800; } .ws-roster__namecol{ text-align:left; min-width:180px; padding-left:14px; } .ws-cell{ text-align:center; padding:0; } .ws-cell__inner{ display:block; width:100%; border:0; cursor:default; padding:13px 4px; font-family:var(--font-mono); font-size:12px; font-weight:800; } .ws-cell--clickable .ws-cell__inner{ cursor:pointer; } .ws-cell--P .ws-cell__inner{ background:var(--pst-success-bg); color:var(--pst-success-text); } .ws-cell--M .ws-cell__inner{ background:var(--pst-blue-bg); color:var(--pst-blue-text); } .ws-cell--S .ws-cell__inner{ background:var(--pst-purple-bg); color:var(--pst-purple-text); } .ws-cell--OFF .ws-cell__inner{ background:var(--surface-1); color:var(--text-subtle); } .ws-cell--CT .ws-cell__inner{ background:var(--pst-orange-bg); color:var(--pst-orange-text); } .ws-cell--ED .ws-cell__inner{ background:var(--pst-pink-bg); color:var(--pst-pink-text); } .ws-cell--empty .ws-cell__inner{ color:var(--text-subtle); } .ws-demandrow td{ font-family:var(--font-mono); font-size:9px; text-align:center; color:var(--text-subtle); padding:2px 0 6px; } /* Step tracker Post-Pro */ .ws-steps{ display:flex; align-items:flex-start; gap:0; } .ws-step{ flex:1; text-align:center; position:relative; } .ws-step__dot{ width:12px; height:12px; border-radius:100px; margin:0 auto 5px; background:var(--line-200); } .ws-step--done .ws-step__dot{ background:#050505; } .ws-step--cur .ws-step__dot{ background:var(--vs-yellow); border:2px solid #050505; } .ws-step__lbl{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-subtle); } .ws-step--cur .ws-step__lbl{ color:var(--text-strong); font-weight:700; } /* Timeline agenda */ .ws-timeline{ display:flex; flex-direction:column; gap:2px; } .ws-tl{ display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--line-100); } .ws-tl__time{ font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); min-width:44px; } .ws-tl__dot{ width:8px; height:8px; border-radius:100px; margin-top:4px; flex:0 0 auto; } /* Antrean approval / list rows */ .ws-appr{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-100); } .ws-appr__body{ flex:1; min-width:0; } .ws-appr__who{ font-weight:600; font-size:13px; color:var(--text-strong); } .ws-appr__detail{ font-size:12px; color:var(--text-muted); } /* ===== 12.47 polish 2 — parity prototype: home 2 kolom + hero gelap + subtab ===== */ .ws-home{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:14px; align-items:start; } @media (max-width: 1100px){ .ws-home{ grid-template-columns:1fr; } } .ws-home__main > *, .ws-home__aside > *{ margin-bottom:14px; } .ws-kicker{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; } .ws-hero--dark{ position:relative; background:#050505; border:1px solid #050505; border-radius:16px; padding:20px 22px; overflow:hidden; } .ws-hero--dark::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--vs-yellow); } .ws-hero--dark .ws-kicker{ color:rgba(255,255,255,.5); } .ws-hero--dark .ws-hero__clock{ color:#fff; font-size:44px; letter-spacing:.03em; } .ws-hero--dark .ws-hero__cap{ color:rgba(255,255,255,.55); } .ws-hero__meta{ font-size:12.5px; color:rgba(255,255,255,.78); line-height:1.7; text-align:right; } .ws-hero__meta b{ color:#fff; } .ws-btn-brand{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 22px; border-radius:100px; border:0; cursor:pointer; background:var(--vs-yellow); color:#050505; font-weight:800; font-size:14px; font-family:inherit; } .ws-btn-brand:hover{ filter:brightness(.96); } .ws-btn-ghostdark{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:100px; cursor:pointer; background:transparent; color:rgba(255,255,255,.85); border:1px dashed rgba(255,255,255,.35); font-weight:600; font-size:12px; font-family:inherit; } .ws-btn-ghostdark:hover{ border-color:rgba(255,255,255,.65); color:#fff; } .ws-btn-darksm{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:100px; cursor:pointer; background:rgba(255,255,255,.1); color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.22); font-size:12px; font-family:inherit; } .ws-btn-darksm:hover{ background:rgba(255,255,255,.18); } .ws-statcard__top{ display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:10px; } .ws-badge-count{ font-family:var(--font-mono); font-size:11px; font-weight:800; min-width:22px; height:22px; padding:0 7px; border-radius:100px; background:var(--vs-yellow); color:#050505; display:inline-flex; align-items:center; justify-content:center; } .ws-appr2{ padding:12px 0; border-bottom:1px solid var(--line-100); } .ws-appr2:last-child{ border-bottom:0; } .ws-appr2__head{ display:flex; align-items:center; gap:8px; } .ws-appr2__who{ font-weight:700; font-size:13.5px; color:var(--text-strong); } .ws-appr2__detail{ font-size:12.5px; color:var(--text-muted); margin-top:4px; line-height:1.5; } .ws-appr2__actions{ display:flex; gap:8px; margin-top:10px; } .ws-appr2__actions .abtn{ flex:1; justify-content:center; } .ws-taskrow{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-100); cursor:pointer; } .ws-taskrow:last-child{ border-bottom:0; } .ws-taskrow__code{ font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); min-width:52px; } .ws-taskrow__title{ flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--text-strong); } .ws-taskrow__due{ font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); min-width:44px; text-align:right; } .ws-jrcards{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; } .ws-jrcard{ flex:0 0 210px; background:var(--surface-0); border:1px solid var(--line-200); border-radius:12px; padding:11px 12px; } .ws-jrcard__title{ font-size:12.5px; font-weight:600; color:var(--text-strong); margin-top:7px; line-height:1.4; } .ws-subtabs{ display:inline-flex; gap:4px; padding:4px; margin-bottom:14px; background:var(--surface-0); border:1px solid var(--line-200); border-radius:12px; overflow-x:auto; max-width:100%; } .ws-subtab{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px; border-radius:9px; text-decoration:none; background:transparent; color:var(--text-muted); font-size:12.5px; font-weight:500; border:0; cursor:pointer; white-space:nowrap; flex:0 0 auto; } .ws-subtab:hover{ color:var(--text-strong); background:var(--surface-1); } .ws-subtab.is-on{ background:#050505; color:#fff; font-weight:700; } .ws-subtab__badge{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:100px; background:var(--tag-warning-bg); color:var(--tag-warning-text); border:1px solid var(--tag-warning-border); } .ws-subtab.is-on .ws-subtab__badge{ background:var(--vs-yellow); color:#050505; border-color:transparent; } /* ===== 12.47 polish 3 — kartu project, avatar, kanban rapi ===== */ .ws-projrow{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); gap:12px; overflow-x:auto; padding-bottom:10px; scrollbar-width:thin; } @media (max-width:900px){ .ws-projrow{ grid-auto-columns:80%; } } .ws-projcard{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:14px; padding:14px 15px; display:flex; flex-direction:column; } .ws-projbar{ height:6px; border-radius:100px; background:var(--line-100); overflow:hidden; margin-top:10px; } .ws-projbar > span{ display:block; height:100%; background:#050505; border-radius:100px; } .ws-avarow{ display:inline-flex; align-items:center; } .ws-ava{ width:22px; height:22px; border-radius:100px; background:#050505; color:#fff; font-size:9px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--surface-0); margin-left:-6px; } .ws-ava:first-child{ margin-left:0; } .ws-kanban{ align-items:stretch; } .ws-kcol{ display:flex; flex-direction:column; min-height:120px; } .ws-kcard{ display:flex; flex-direction:column; } /* == WS-REFRESH2:BEGIN ========================================================= Workspace redesign — selaras library 12.04.03 Workspace Component Library. Blok additive & reversible: menumpuk di atas refresh 12.47 tanpa menyentuh markup/JS. Fase 0 (fondasi) menormalkan "pulau" legacy (bell/chat/forum) yang masih pakai indigo lama + px radius keras ke token DS v2.0 (yellow/black), radius selalu via token agar shape-controller (SF-SHAPE) tetap jalan, dan angka dinamis pakai tabular-nums (aturan Geist-only). Fase lanjut menumpuk di sini per bagian: [WS2-HOME] [WS2-TASKS] [WS2-POSTPRO] [WS2-EOFFICE] [WS2-ROSTER] [WS2-FORUM] [WS2-JURNAL]. ============================================================================= */ /* --- [WS2-BASE] Normalisasi pulau legacy: buang sisa indigo #4f46e5 → aksen DS --- */ .ws-noti.is-unread{ background:var(--identity-yellow-soft); box-shadow:inset 3px 0 0 var(--identity-yellow); } .ws-ch.is-active{ background:var(--ink-050); color:var(--text-strong); font-weight:700; } .ws-cat-ic{ background:var(--ink-050); color:var(--text-strong); border-radius:var(--radius-sm); } .ws-msg--own .ws-msg-body{ background:var(--vs-black); color:#fff; } /* --- [WS2-BASE] Radius via token (shape-controller aman) --- */ .ws-top-btn{ border-radius:var(--radius-sm); } .ws-bell-pop{ border-radius:var(--radius-md); box-shadow:var(--shadow-pop); } .ws-noti{ border-radius:var(--radius-sm); } .ws-x{ border-radius:var(--radius-xs); } .ws-ch{ border-radius:var(--radius-sm); } .ws-msg-body{ border-radius:var(--radius-md); } .ws-react{ border-radius:var(--radius-pill); } .ws-pick-list{ border-radius:var(--radius-sm); } .ws-forum-mini-row{ border-radius:var(--radius-sm); } .ws-cat-card{ border-radius:var(--radius-sm); } .ws-post{ border-radius:var(--radius-md); } .ws-link-card{ border-radius:var(--radius-sm); } /* --- [WS2-BASE] Overlay chat selaras slide-over (backdrop + blur konsisten) --- */ .ws-chat-overlay{ background:rgba(5,5,5,.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .ws-chat-panel{ box-shadow:-14px 0 40px rgba(5,5,5,.16); } /* --- [WS2-BASE] Angka dinamis: tabular-nums (Geist) biar digit tidak loncat --- */ .ws-hero__clock, .ws-statcard__val, .ws-cell__inner, .ws-badge, .ws-badge-count, .ws-pill__badge, .ws-subtab__badge, .ws-kcard__code, .ws-taskrow__code, .ws-taskrow__due, .ws-tl__time, .ws-demandrow td, .ws-noti-time, .ws-msg-meta{ font-variant-numeric:tabular-nums; } /* --- [WS2-HOME] Ringkasan: avatar di antrean approval, kartu shadow-over-border, hover interaktif (make-interfaces-feel-better) --- */ .ws-ava--lg{ width:28px; height:28px; font-size:10px; } .ws-appr2__head{ align-items:center; } .ws-statcard, .ws-jrcard, .ws-projcard{ box-shadow:var(--shadow-card); } .ws-projcard{ transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .ws-projcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--ink-200); } .ws-taskrow{ transition:background .12s ease; } .ws-taskrow:hover{ background:var(--surface-50); } .ws-taskrow:hover .ws-taskrow__title{ color:var(--vs-black); } /* --- [WS2-TASKS] Kanban & Project: radius token, grip handle, hover-lift kartu, header kolom (count pill + tombol tambah), empty placeholder (parity 06 Kanban) --- */ .ws-kcol{ border-radius:var(--radius-md); } .ws-kcard{ border-radius:var(--radius-sm); box-shadow:var(--shadow-xs); transition:box-shadow .14s ease, border-color .14s ease; } .ws-kcard:hover{ box-shadow:var(--shadow-card); border-color:var(--ink-200); } .ws-kcard__top{ display:flex; align-items:center; gap:6px; } .ws-kcard__grip{ display:inline-flex; color:var(--text-disabled); opacity:0; transition:opacity .14s ease; cursor:grab; } .ws-kcard:hover .ws-kcard__grip{ opacity:1; } .ws-kcol__count{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:11px; font-weight:600; color:var(--text-subtle); min-width:20px; height:20px; padding:0 6px; border-radius:var(--radius-pill); background:var(--ink-050); display:inline-flex; align-items:center; justify-content:center; } .ws-kcol__add{ display:inline-grid; place-items:center; width:24px; height:24px; border:0; background:transparent; color:var(--text-subtle); border-radius:var(--radius-xs); cursor:pointer; transition:background .12s ease, color .12s ease; } .ws-kcol__add:hover{ background:var(--vs-yellow); color:#050505; } .ws-kcol__empty{ margin:0 8px 8px; padding:16px 10px; text-align:center; font-size:11.5px; color:var(--text-subtle); border:1px dashed var(--line-200); border-radius:var(--radius-sm); } /* --- [WS2-POSTPRO] Post-Pro Hub: kartu antrian pakai treatment kanban (.ws-kcard), tapi navigasi antar-status via tombol (bukan drag) --- */ .ws-ppcard{ cursor:default; } .ws-ppcard .ws-kcard__code{ display:inline-flex; align-items:center; } .ws-ppcard__nav{ display:flex; justify-content:space-between; align-items:center; gap:4px; margin-top:8px; } .ws-ppcard__nav .abtn{ min-width:34px; justify-content:center; } .ws-ppcard__nav > span:empty{ flex:0 0 auto; } /* --- [WS2-EOFFICE] E-Office: sel identitas (avatar + nama) di semua tabel orang, baris "perlu tinjau" pakai token danger (parity 12 Attendance / directory) --- */ .ws-idcell{ display:flex; align-items:center; gap:9px; min-width:0; } .ws-idcell > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ws-idcell__txt{ min-width:0; } .ws-idcell .ws-ava{ flex:0 0 auto; } .ws-row-suspect{ background:color-mix(in srgb, var(--pst-danger-bg) 45%, var(--surface-0)); } .ws-row-suspect:hover{ background:color-mix(in srgb, var(--pst-danger-bg) 65%, var(--surface-0)); } .ws-row-suspect td:first-child{ box-shadow:inset 3px 0 0 var(--pst-danger-text); } /* --- [WS2-ROSTER] Roster: avatar di kolom nama, affordance hover pada sel editable --- */ .ws-roster__namecol .ws-idcell{ min-width:160px; } .ws-cell--clickable:hover .ws-cell__inner{ box-shadow:inset 0 0 0 2px var(--ink-900); } /* --- [WS2-FORUM] Forum & Chat: avatar penulis di thread row, post, & pesan masuk (parity library 08 Channels & Chat / 09 Threads) --- */ .ws-tr-row{ display:flex; gap:10px; align-items:center; } .ws-tr-body{ flex:1; min-width:0; } .ws-tr-count{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:11px; color:var(--text-subtle); display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; } .ws-post-head .ws-ava{ flex:0 0 auto; } .ws-msg{ display:flex; gap:8px; align-items:flex-start; } .ws-msg .ws-ava{ flex:0 0 auto; } .ws-msg-main{ min-width:0; display:flex; flex-direction:column; } .ws-msg--own{ flex-direction:row-reverse; } .ws-msg--own .ws-msg-main{ align-items:flex-end; } .ws-msg--del{ display:block; } /* --- [WS2-SHELL] Satu language visual untuk seluruh layer Workspace --------- */ /* CATATAN: kelas .workspace-layer dipasang di BANYAK elemen (main.content, tapi JUGA backdrop .modal-back / .uic-back yang di-suffix layer di adminModal/uiConfirm). Karena itu rule dasar ini HANYA boleh menaruh custom-property yang aman diwarisi — JANGAN taruh max-width / background di sini: keduanya bocor ke backdrop fixed sehat (mengekang lebar backdrop ke 1480px → strip kanan tak ter-dim di layar lebar, dan menimpa dim gelap uiConfirm dengan gradient terang). Lebar & latar konten asli sudah diatur `.content.workspace-layer` di bawah. */ .workspace-layer{ --ws-content-gap:16px; --ws-panel-radius:var(--radius-md); --ws-control-radius:var(--radius-sm); } .workspace-layer .sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } /* Switcher modul = tab strip menyatu dengan halaman (BUKAN pill mengambang). Dulu position:sticky + bg translucent + shadow besar → terlihat melayang & menutupi hero saat konten scroll di bawahnya. Sekarang inline + solid. */ .workspace-layer .ws-subnav{ display:flex; flex-wrap:nowrap; gap:4px; max-width:100%; margin:0 0 18px; padding:4px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; background:var(--surface-0); border:1px solid var(--line-200); border-radius:12px; box-shadow:none; } .workspace-layer .ws-subnav::-webkit-scrollbar{ display:none; } .workspace-layer .ws-pill{ flex:0 0 auto; min-height:40px; height:40px; padding:0 13px; border:0; border-radius:8px; background:transparent; color:var(--text-muted); font-size:12.5px; font-weight:550; } .workspace-layer .ws-pill:hover{ background:var(--surface-50); color:var(--text-strong); } .workspace-layer .ws-pill.is-on{ background:var(--vs-black); color:#fff; box-shadow:none; } .workspace-layer .ws-pill:active{ transform:translateY(.5px); } /* Panel, data table, form, action — shared family lintas Home/E-Office/Jurnal. */ .workspace-layer .panel{ margin-bottom:var(--ws-content-gap); border-color:var(--line-200); border-radius:var(--ws-panel-radius); background:var(--surface-0); box-shadow:none; } .workspace-layer .panel-head{ min-height:58px; padding:13px 16px; border-bottom-color:var(--line-100); background:var(--surface-0); } .workspace-layer .panel-head h2{ display:flex; align-items:center; gap:8px; margin:0; font-size:14px; font-weight:720; letter-spacing:-.01em; } .workspace-layer .panel-head h2 svg{ color:var(--text-subtle); } .workspace-layer .panel-head .meta{ font-family:var(--font-mono); font-size:10.5px; font-variant-numeric:tabular-nums; } .workspace-layer .panel-body{ padding:16px; } .workspace-layer .panel-body.flush{ padding:0; overflow-x:auto; } .workspace-layer .panel-foot{ border-top:1px solid var(--line-100); background:var(--surface-0); } .workspace-layer .filters{ min-height:54px; padding:9px 10px; gap:8px; border:1px solid var(--line-200); border-radius:var(--radius-md); background:var(--surface-0); box-shadow:none; } .workspace-layer .ctrl{ min-height:40px; border-color:var(--border-input); border-radius:var(--ws-control-radius); background:var(--surface-0); } .workspace-layer textarea.ctrl{ padding-block:10px; } .workspace-layer .frow > label{ margin-bottom:6px; font-size:11.5px; font-weight:650; color:var(--text-muted); } .workspace-layer .abtn{ min-height:36px; border-color:var(--line-200); border-radius:8px; font-weight:620; transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease,box-shadow .14s ease; } .workspace-layer .abtn:hover{ border-color:var(--ink-400); background:var(--surface-50); } .workspace-layer .abtn--dark{ border-color:var(--vs-black); background:var(--vs-black); color:#fff; } .workspace-layer .abtn--dark:hover{ border-color:#1b1c1f; background:#1b1c1f; } .workspace-layer .abtn:active{ transform:translateY(.5px); } .workspace-layer :is(a,button,input,select,textarea):focus-visible, .modal-center.workspace-layer :is(a,button,input,select,textarea):focus-visible{ outline:none; box-shadow:var(--shadow-focus-brand,0 0 0 3px rgba(255,247,0,.55)); } .workspace-layer .tbl{ min-width:680px; } .workspace-layer .tbl th{ padding:10px 13px; border-bottom-color:var(--line-200); background:var(--surface-50); font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; } .workspace-layer .tbl td{ padding:12px 13px; border-bottom-color:var(--line-100); } .workspace-layer .tbl tr.clickable:hover td{ background:var(--surface-50); } /* State contract: skeleton, empty, forbidden/error. */ .ws-loading{ display:flex; align-items:center; gap:14px; min-height:112px; padding:20px; border:1px solid var(--line-200); border-radius:var(--radius-md); background:var(--surface-0); } .ws-loading__copy{ flex:1; display:flex; flex-direction:column; gap:10px; } .ws-skeleton{ display:block; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--ink-100) 25%,var(--ink-050) 50%,var(--ink-100) 75%); background-size:200% 100%; animation:wsShimmer 1.35s ease infinite; } .ws-skeleton--icon{ width:48px; height:48px; border-radius:var(--radius-sm); flex:0 0 auto; } .ws-skeleton--title{ width:min(240px,65%); height:12px; } .ws-skeleton--line{ width:min(420px,90%); height:10px; } @keyframes wsShimmer{ to{ background-position:-200% 0; } } .ws-state,.workspace-layer .ws-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:180px; padding:32px 24px; text-align:center; color:var(--text-subtle); border:1px dashed var(--line-200); border-radius:var(--radius-md); background:var(--surface-0); } .ws-state > svg,.workspace-layer .ws-empty > svg{ opacity:.65; } .ws-state h3{ margin:2px 0 0; font-family:var(--font-display); font-size:15px; color:var(--text-strong); } .ws-state p{ max-width:48ch; margin:0; font-size:12.5px; line-height:1.55; } .ws-state--error{ color:var(--pst-danger-text); border-style:solid; border-color:var(--pst-danger-border); background:var(--pst-danger-bg); } /* Cards/boards/roster: affordance dan density yang konsisten. */ .workspace-layer .ws-statgrid{ gap:10px; } .workspace-layer .ws-statcard{ border-color:var(--line-200); border-radius:var(--radius-md); box-shadow:none; } .workspace-layer .ws-statcard__val{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; } .workspace-layer .ws-projcard,.workspace-layer .ws-jrcard{ box-shadow:none; } .workspace-layer .ws-kanban{ gap:12px; padding:2px 2px 14px; scroll-snap-type:x proximity; } .workspace-layer .ws-kcol{ flex-basis:292px; min-height:220px; scroll-snap-align:start; background:var(--surface-50); border-color:var(--line-200); } .workspace-layer .ws-kcol__head{ min-height:48px; padding:10px 11px; border-bottom:1px solid var(--line-100); } .workspace-layer .ws-kcol__head h2{ min-width:0; flex:1; margin:0; overflow:hidden; font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; } .workspace-layer .ws-kcol__body{ flex:1; padding:8px 0; } .workspace-layer .ws-kcard{ padding:11px 12px; margin:0 8px 8px; cursor:pointer; box-shadow:none; } .workspace-layer .ws-kcard:hover{ transform:translateY(-1px); border-color:var(--ink-300); box-shadow:var(--shadow-card); } .workspace-layer .ws-kcard__top{ align-items:flex-start; } .workspace-layer .ws-kcard__title{ flex:1; margin:0 0 7px; font-size:12.5px; line-height:1.45; } .workspace-layer .ws-kcol.is-over{ background:var(--identity-yellow-soft); border-color:var(--identity-yellow); box-shadow:inset 0 0 0 1px var(--identity-yellow); } .workspace-layer .ws-roster{ min-width:880px; } .workspace-layer .ws-roster th{ position:sticky; top:0; z-index:2; background:var(--surface-50); } .workspace-layer .ws-cell__inner{ transition:box-shadow .14s ease,filter .14s ease; } /* Workspace dialogs inherit the same component family. */ .modal-center.workspace-layer{ max-width:640px; overflow:hidden; border:1px solid var(--line-200); border-radius:var(--radius-lg); background:var(--surface-0); box-shadow:0 28px 80px rgba(5,5,5,.24); } .modal-center.workspace-layer.wide{ max-width:860px; } .modal-center.workspace-layer .mc-head{ min-height:64px; padding:14px 18px; border-bottom:1px solid var(--line-100); background:var(--surface-0); } .modal-center.workspace-layer .mc-head h3{ margin:0; font-family:var(--font-display); font-size:18px; letter-spacing:-.02em; } .modal-center.workspace-layer .mc-head .x{ display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line-200); border-radius:8px; background:var(--surface-0); } .modal-center.workspace-layer .mc-body{ padding:18px; } .modal-center.workspace-layer .mc-foot{ min-height:64px; padding:13px 18px; border-top:1px solid var(--line-100); background:var(--surface-0); } .modal-center.workspace-layer .ctrl{ min-height:42px; border-color:var(--border-input); border-radius:var(--radius-sm); } .uic-card.workspace-layer{ max-width:460px; padding:22px; border:1px solid var(--line-200); border-radius:var(--radius-md); box-shadow:0 28px 80px rgba(5,5,5,.24); } .uic-card.workspace-layer .uic-title{ font-family:var(--font-display); font-size:18px; letter-spacing:-.02em; } @media (max-width:860px){ .workspace-layer{ padding-top:20px; } .workspace-layer .ws-subnav{ top:70px; margin-inline:-4px; } .workspace-layer .filters{ align-items:stretch; } .workspace-layer .filters .ctrl{ width:100%; max-width:none!important; } .workspace-layer .ws-home{ grid-template-columns:1fr; } .workspace-layer .ws-kcol{ flex-basis:min(82vw,292px); } } @media (max-width:520px){ .workspace-layer .ws-pill{ min-height:38px; height:38px; padding-inline:11px; } .workspace-layer .panel-head{ align-items:flex-start; flex-wrap:wrap; min-height:54px; } .workspace-layer .panel-head > .abtn{ margin-left:auto; } .modal-center.workspace-layer{ width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:var(--radius-md); } .modal-center.workspace-layer .mc-body{ padding:15px; } } @media (prefers-reduced-motion:reduce){ .ws-skeleton{ animation:none; } .workspace-layer *,.modal-center.workspace-layer *{ scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } } /* --- [WS3-WORKBENCH] Adopsi penuh Workspace Component Library --------------- */ /* flex:1 WAJIB. .main adalah flex column setinggi shell; tanpa ini .content hanya setinggi isinya (mis. 388px di layar 994px) sehingga gradient berhenti di tengah layar dan sisanya memperlihatkan latar .admin-shell yang warnanya beda — itu "background terpotong". Sekaligus gradient jadi punya ruang penuh untuk membentang. */ .content.workspace-layer{ flex:1 1 auto; min-height:0; max-width:none; padding:34px clamp(18px,3vw,52px) 84px; overflow:clip; background: radial-gradient(circle at 82% -8%,rgba(255,247,0,.13),transparent 28rem), linear-gradient(180deg,#f5f5f8 0,#efeff4 42%,#f5f5f8 100%); } .ws-workbench{ position:relative; width:min(100%,1560px); margin-inline:auto; } /* Command-search & focus-toggle sekarang hidup di header.admin-top (bukan hero per-halaman). */ .ws-command-trigger{ display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 6px 0 11px; border:1px solid var(--line-200); border-radius:9px; color:var(--text-muted); background:rgba(255,255,255,.72); box-shadow:var(--shadow-xs); cursor:pointer; font:600 12px/1 var(--font-body); transition:transform .16s ease,border-color .16s ease,background .16s ease; } .ws-command-trigger:hover{ transform:translateY(-1px); border-color:var(--ink-400); background:#fff; color:var(--text-strong); } .ws-command-trigger kbd,.ws-command-search kbd,.ws-command-item kbd{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; padding:0 6px; border:1px solid var(--line-200); border-radius:6px; color:var(--text-subtle); background:var(--surface-50); font:600 9.5px/1 var(--font-mono); box-shadow:inset 0 -1px 0 var(--line-200); } .ws-icon-action{ display:inline-grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line-200); border-radius:9px; color:var(--text-muted); background:rgba(255,255,255,.78); cursor:pointer; transition:all .16s ease; } .ws-icon-action:hover,.ws-icon-action.is-on{ color:var(--text-strong); border-color:var(--ink-500); background:#fff; transform:translateY(-1px); } .ws-icon-action.is-on{ color:var(--vs-black); background:var(--vs-yellow); border-color:var(--vs-yellow); } /* Workspace switcher: bernomor, responsif, inline (menyatu, tanpa float). */ .workspace-layer .ws-subnav{ display:grid; grid-template-columns:repeat(7,minmax(124px,1fr)); gap:0; margin-bottom:22px; padding:0; border-radius:16px; overflow-x:auto; background:var(--surface-0); box-shadow:none; } .workspace-layer .ws-pill{ position:relative; display:grid; grid-template-columns:auto 28px minmax(0,1fr) auto; align-items:center; gap:8px; min-width:124px; height:58px; padding:0 12px; border-right:1px solid var(--line-100); border-radius:0; text-decoration:none; } .workspace-layer .ws-pill:first-child{ border-radius:15px 0 0 15px; } .workspace-layer .ws-pill:last-child{ border-right:0; border-radius:0 15px 15px 0; } .ws-pill__index{ font:600 9px/1 var(--font-mono); color:var(--text-disabled); } .ws-pill__icon{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:var(--text-subtle); background:var(--surface-50); } .ws-pill__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .workspace-layer .ws-pill.is-on{ color:#fff; background:var(--vs-black); } .workspace-layer .ws-pill.is-on .ws-pill__index{ color:rgba(255,255,255,.42); } .workspace-layer .ws-pill.is-on .ws-pill__icon{ color:var(--vs-black); background:var(--vs-yellow); } .workspace-layer .ws-pill:hover:not(.is-on){ background:#fff; } /* ── [WS4-SUBRAIL] Rail anak Workspace, tepat di sebelah sidebar utama ── */ .ws-subrail{ display:none; } @media (min-width:1100px){ .admin-shell.has-ws-subrail{ grid-template-columns:248px 68px minmax(0,1fr); } .admin-shell.has-ws-subrail.is-rail{ grid-template-columns:68px 68px minmax(0,1fr); } .ws-subrail{ /* Rail selalu memusatkan daftar modul di sumbu-y viewport (flex center), dengan clearance header di atas. Konten pendek → center; tak akan overflow (8 modul). */ display:flex; flex-direction:column; justify-content:center; align-items:center; position:sticky; top:0; width:68px; height:100dvh; padding:78px 9px 14px; overflow-y:auto; background:var(--surface-0); border-right:1px solid var(--line-200); z-index:19; } .content.workspace-layer .ws-shell{ display:block; } .content.workspace-layer .ws-shell__main{ flex:1; min-width:0; } /* strip horizontal di dalam body diganti oleh sub-rail */ .content.workspace-layer .ws-shell__main .ws-workbench > .ws-subnav{ display:none; } /* workbench mengisi kolom utama (tak perlu center 1560) */ .content.workspace-layer .ws-shell__main .ws-workbench{ width:100%; max-width:none; margin-inline:0; } /* switcher selalu berupa rail ikon; label tersedia lewat tooltip + aria-label */ .ws-subrail .ws-subnav{ display:flex; flex-direction:column; gap:0; margin:0; padding:0; width:100%; align-items:center; background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; } .ws-subrail .ws-pill{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:50px; min-width:50px; height:58px; min-height:58px; margin:3px 0; padding:6px 2px 5px; border:0; border-radius:11px; } /* Garis tipis pemisah antar-pill (kecuali item terakhir). */ .ws-subrail .ws-pill:not(:last-child)::after{ content:''; position:absolute; left:50%; bottom:-3px; width:34px; height:1px; transform:translateX(-50%); background:var(--line-200); } .ws-subrail .ws-pill:first-child, .ws-subrail .ws-pill:last-child{ border-radius:11px; } .ws-subrail .ws-pill__icon{ flex:0 0 auto; width:28px; height:28px; } .ws-subrail .ws-pill__label{ display:block; width:100%; overflow:hidden; color:inherit; font:600 7.5px/1.05 var(--font-body); letter-spacing:-.01em; text-align:center; text-overflow:ellipsis; white-space:nowrap; } .ws-subrail .ws-pill__index{ display:none; } .ws-subrail .ws-pill__badge{ position:absolute; top:2px; right:1px; min-width:16px; height:16px; padding:0 4px; display:grid; place-items:center; border:2px solid var(--surface-0); font-size:8px; } } /* View toolbar, modular launchpad, dan section header. */ .ws-viewbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 18px; padding:10px 12px; border:1px solid var(--line-200); border-radius:14px; background:rgba(255,255,255,.78); box-shadow:var(--shadow-xs); } .ws-viewbar__switch,.ws-viewbar__tools{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .ws-viewchip{ display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 12px; border-radius:9px; color:var(--text-muted); font-size:12.5px; font-weight:650; text-decoration:none; } .ws-viewchip:hover{ color:var(--text-strong); background:var(--surface-50); } .ws-viewchip.is-on{ color:#fff; background:var(--vs-black); } .ws-compact-field{ display:flex; align-items:center; gap:8px; } .ws-compact-field > span{ font:650 9.5px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); } .ws-compact-field .ctrl{ width:min(240px,28vw); } .ws-section-heading{ display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:13px; } .ws-section-heading h2,.ws-board-head h2{ margin:3px 0 0; font-family:var(--font-display); font-size:20px; line-height:1.1; letter-spacing:-.025em; } .ws-section-heading p{ max-width:54ch; margin:0; color:var(--text-subtle); font-size:12.5px; line-height:1.5; } .ws-kicker{ font:700 9.5px/1.2 var(--font-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--text-subtle); } /* .ws-launchpad / .ws-modulecard DIHAPUS di F2 — launchpad Ringkasan lama diganti anatomi master (blok WORKSPACE-HOME). Tidak ada pemakai tersisa. */ /* Project gallery + work board dari komponen Projects/Kanban. */ .workspace-layer .ws-projrow{ display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:10px; margin:0 0 18px; overflow-x:auto; } .workspace-layer .ws-projcard{ min-width:220px; padding:15px; border:1px solid var(--line-200); border-radius:14px; background:rgba(255,255,255,.86); } .ws-projcard__top,.ws-projcard__foot{ display:flex; align-items:center; gap:8px; } .ws-projcard__code{ font:650 9.5px/1 var(--font-mono); letter-spacing:.08em; color:var(--text-subtle); } .workspace-layer .ws-projcard h3{ margin:13px 0 4px; font-size:14px; line-height:1.35; } .workspace-layer .ws-projcard p{ margin:0 0 14px; color:var(--text-subtle); font-size:11.5px; } .ws-projcard__progress{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:9px; } .ws-projcard__progress > span{ height:5px; overflow:hidden; border-radius:99px; background:var(--ink-100); } .ws-projcard__progress i{ display:block; height:100%; border-radius:inherit; background:var(--vs-black); } .ws-projcard__progress b{ font:650 10px/1 var(--font-mono); } .ws-projcard__foot{ margin-top:13px; padding-top:11px; border-top:1px solid var(--line-100); } .ws-projcard__foot > span:not(.ws-ava):not(.grow):not(.ws-tag){ overflow:hidden; font-size:10.5px; color:var(--text-subtle); text-overflow:ellipsis; white-space:nowrap; } .ws-board-shell{ margin-bottom:20px; overflow:hidden; border:1px solid var(--line-200); border-radius:18px; background:rgba(255,255,255,.72); box-shadow:0 18px 50px rgba(30,31,35,.07); } .ws-board-head{ display:flex; align-items:center; gap:20px; padding:18px 20px; border-bottom:1px solid var(--line-200); background:rgba(255,255,255,.9); } .ws-board-head > div:first-child{ min-width:180px; } .ws-board-head p{ margin:5px 0 0; color:var(--text-subtle); font:500 10.5px/1.3 var(--font-mono); } .ws-board-head__people{ display:flex; align-items:center; gap:9px; margin-left:auto; color:var(--text-subtle); font-size:10.5px; } .ws-board-head__tools{ display:flex; align-items:center; gap:8px; margin-left:auto; } .ws-board-head__people + .ws-board-head__tools{ margin-left:0; } .ws-board-search{ display:flex; align-items:center; gap:7px; min-width:210px; height:40px; padding:0 10px; border:1px solid var(--line-200); border-radius:10px; color:var(--text-subtle); background:var(--surface-0); } .ws-board-search:focus-within{ border-color:var(--ink-500); box-shadow:var(--shadow-focus-brand,0 0 0 3px rgba(255,247,0,.5)); } .ws-board-search input{ min-width:0; width:100%; border:0; outline:0; background:transparent; font:500 12px/1 var(--font-body); } .ws-priority-filter{ width:150px; } .workspace-layer .ws-board-shell .ws-kanban{ gap:0; margin:0; padding:0; background:#ececf1; scroll-snap-type:x proximity; } .workspace-layer .ws-board-shell .ws-kcol{ flex-basis:310px; min-height:520px; margin:0; border:0; border-right:1px solid var(--line-200); border-radius:0; background:transparent; } .workspace-layer .ws-board-shell .ws-kcol:last-child{ border-right:0; } .workspace-layer .ws-kcol__head{ min-height:68px; padding:13px 14px; background:rgba(255,255,255,.62); } .workspace-layer .ws-kcol__head > div{ flex:1; min-width:0; } .workspace-layer .ws-kcol__head h2{ font-size:12.5px; } .workspace-layer .ws-kcol__head small{ display:block; margin-top:3px; color:var(--text-disabled); font:500 9px/1.2 var(--font-mono); } .workspace-layer .ws-kcol__dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-300); box-shadow:0 0 0 4px rgba(120,124,132,.1); } .workspace-layer .ws-kcol--in_progress .ws-kcol__dot{ background:var(--accent-blue); } .workspace-layer .ws-kcol--review .ws-kcol__dot{ background:var(--accent-orange); } .workspace-layer .ws-kcol--done .ws-kcol__dot{ background:var(--accent-mint); } .workspace-layer .ws-kcol__body{ min-height:160px; padding:10px 0 24px; } .workspace-layer .ws-kcard{ position:relative; padding:13px; margin:0 10px 9px; border:1px solid rgba(214,216,222,.92); border-radius:12px; background:rgba(255,255,255,.96); box-shadow:0 4px 12px rgba(30,31,35,.035); transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease,border-color .18s ease; } .workspace-layer .ws-kcard:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,31,35,.1); } .workspace-layer .ws-kcard.is-dragging{ opacity:.34; transform:rotate(1.2deg) scale(.985); box-shadow:0 18px 42px rgba(30,31,35,.16); } .workspace-layer .ws-kcard.is-saving::after{ content:'Menyimpan'; position:absolute; right:9px; bottom:9px; padding:4px 7px; border-radius:6px; color:#fff; background:var(--vs-black); font:600 8.5px/1 var(--font-mono); animation:wsPulse .8s ease infinite alternate; } .workspace-layer .ws-kcard.is-settled{ animation:wsSettle .4s cubic-bezier(.2,.9,.2,1); } .workspace-layer .ws-kcard.is-filtered{ display:none; } .workspace-layer .ws-kcard__code{ font:650 9.5px/1 var(--font-mono); letter-spacing:.06em; color:var(--text-subtle); } .workspace-layer .ws-kcard__title{ margin:9px 0 8px; font-size:13px; font-weight:650; line-height:1.42; } .ws-kcard__labels{ display:flex; gap:4px; margin-top:8px; } .ws-kcard__labels span{ width:28px; height:3px; overflow:hidden; border-radius:99px; color:transparent; background:var(--accent-blue); } .ws-kcard__labels span:nth-child(2){ background:var(--accent-orange); }.ws-kcard__labels span:nth-child(3){ background:var(--accent-mint); } .ws-kcard__project{ display:flex; align-items:center; gap:5px; margin:-1px 0 8px; color:var(--text-subtle); font-size:10.5px; } .ws-kcard__meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px; } .ws-duechip{ display:inline-flex; align-items:center; gap:4px; padding:4px 6px; border-radius:6px; color:var(--text-muted); background:var(--surface-50); font:550 9.5px/1 var(--font-mono); } .ws-duechip.is-muted{ color:var(--text-disabled); background:transparent; } .workspace-layer .ws-kanban.is-compact .ws-kcol{ flex-basis:260px; } .workspace-layer .ws-kanban.is-compact .ws-kcard{ padding:10px; margin-inline:8px; } .workspace-layer .ws-kanban.is-compact .ws-kcard__project,.workspace-layer .ws-kanban.is-compact .ws-kcard__labels{ display:none; } @keyframes wsPulse{ to{ opacity:.62; } } @keyframes wsSettle{ 0%{ transform:scale(.97); } 55%{ transform:scale(1.015); } 100%{ transform:scale(1); } } /* Command center + work windows + seluruh form Workspace. */ .modal-back.center.workspace-layer{ padding:22px; background:rgba(10,10,12,.48); backdrop-filter:blur(9px) saturate(120%); -webkit-backdrop-filter:blur(9px) saturate(120%); } .modal-center.workspace-layer.ws-command-window{ width:min(640px,calc(100vw - 30px)); max-width:640px; max-height:min(860px,calc(100dvh - 38px)); border-radius:18px; } .modal-center.workspace-layer.ws-command-window.wide{ width:min(980px,calc(100vw - 30px)); max-width:980px; } .modal-center.workspace-layer .mc-head{ display:grid; grid-template-columns:42px minmax(0,1fr) 36px; gap:12px; min-height:76px; padding:14px 18px; } .ws-window-mark{ display:grid; place-items:center; width:42px; height:42px; border-radius:11px; color:var(--vs-black); background:var(--vs-yellow); } .ws-window-title{ display:flex; flex-direction:column; justify-content:center; min-width:0; } .ws-window-title small{ margin-bottom:4px; color:var(--text-subtle); font:650 9px/1 var(--font-mono); letter-spacing:.11em; text-transform:uppercase; } .ws-window-title h3{ overflow:hidden; font-size:19px!important; text-overflow:ellipsis; white-space:nowrap; } .modal-center.workspace-layer .mc-head .x{ grid-column:3; } .modal-center.workspace-layer .ws-form-canvas{ max-height:calc(100dvh - 190px); padding:22px; overflow-y:auto; background:linear-gradient(180deg,var(--surface-0),#fafafd); } .modal-center.workspace-layer.wide .ws-form-canvas{ padding:24px 26px 28px; } .modal-center.workspace-layer .frow{ margin-bottom:16px; } .modal-center.workspace-layer .frow > label{ display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; color:var(--text-muted); font:650 10px/1.2 var(--font-mono); letter-spacing:.055em; text-transform:uppercase; } .modal-center.workspace-layer .ctrl{ min-height:44px; padding-inline:12px; border:1px solid var(--line-200); border-radius:10px; color:var(--text-strong); background:var(--surface-0); transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; } .modal-center.workspace-layer textarea.ctrl{ min-height:92px; padding-block:11px; resize:vertical; } .modal-center.workspace-layer .ctrl:hover{ border-color:var(--ink-400); } .modal-center.workspace-layer .ctrl:focus{ border-color:var(--vs-black); background:#fff; box-shadow:0 0 0 3px rgba(255,247,0,.48); } .modal-center.workspace-layer .dgroup-label{ margin:22px 0 11px; padding-top:16px; border-top:1px solid var(--line-100); color:var(--text-subtle); font:700 9.5px/1.2 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; } .modal-center.workspace-layer .ws-window-actions{ min-height:70px; padding:14px 18px; background:#f7f7fa; } .modal-center.workspace-layer .ws-window-actions .abtn{ min-height:40px; padding-inline:15px; } .ws-command-search{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:9px; height:50px; padding:0 10px 0 13px; border:1px solid var(--ink-400); border-radius:12px; background:#fff; box-shadow:0 0 0 4px rgba(255,247,0,.24); } .ws-command-search input{ width:100%; border:0; outline:0; background:transparent; font:600 14px/1 var(--font-body); } .ws-command-label{ margin:20px 4px 8px; color:var(--text-subtle); font:700 9px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; } .ws-command-list{ display:flex; flex-direction:column; gap:4px; } .ws-command-item{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:11px; width:100%; padding:9px; border:0; border-radius:10px; color:var(--text-strong); background:transparent; cursor:pointer; text-align:left; } .ws-command-item:hover,.ws-command-item:focus-visible{ outline:0; background:var(--surface-50); } .ws-command-item__icon{ display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line-100); border-radius:10px; background:#fff; } .ws-command-item > span:nth-child(2){ display:flex; flex-direction:column; gap:3px; min-width:0; } .ws-command-item strong{ font-size:13px; }.ws-command-item small{ color:var(--text-subtle); font-size:11px; } .ws-command-empty{ padding:24px; text-align:center; color:var(--text-subtle); font-size:12.5px; } /* Detail drawer, subtabs, tabel, dan layers lain mengikuti pola yang sama. */ .ws-slideover{ width:clamp(21rem,38vw,32.5rem); max-width:96vw; border-left:0; box-shadow:-28px 0 80px rgba(5,5,5,.18); } .ws-slideover__head{ min-height:72px; padding:14px 18px; background:var(--vs-black); border:0; } .ws-slideover__head::before{ content:''; width:8px; height:28px; border-radius:99px; background:var(--vs-yellow); } .ws-slideover__head h3{ color:#fff; font-family:var(--font-display); font-size:18px; letter-spacing:-.02em; } .ws-slideover__head .abtn{ color:#fff; border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.07); } .ws-slideover__body{ padding:20px; background:#fafafd; } .ws-slideover__foot{ min-height:68px; padding:13px 18px; background:#fff; } .workspace-layer .ws-subtabs{ display:flex; width:100%; padding:0; gap:0; overflow-x:auto; border:0; border-bottom:1px solid var(--line-200); border-radius:0; background:transparent; box-shadow:none; } .workspace-layer .ws-subtab{ min-height:46px; padding:0 16px; border-bottom:2px solid transparent; border-radius:0; white-space:nowrap; } .workspace-layer .ws-subtab.is-on{ color:var(--text-strong); background:transparent; border-bottom-color:var(--vs-black); } .workspace-layer .panel{ overflow:hidden; border:1px solid var(--line-200); border-radius:16px; background:rgba(255,255,255,.84); } .workspace-layer .panel-head{ min-height:64px; padding:15px 18px; } .workspace-layer .panel-head h2{ font-size:14.5px; } .workspace-layer .tbl th{ position:sticky; top:0; z-index:2; height:38px; background:#f4f4f7; } .workspace-layer .tbl td{ height:50px; } .workspace-layer .filters{ min-height:62px; padding:11px 12px; border-radius:14px; background:rgba(255,255,255,.84); } /* Focus mode adalah fitur nyata, bukan state dekoratif. HATI-HATI dengan grid-template-columns di sini: .admin-shell hanya punya 2 track (sidebar | main; .mnav ikut track ke-2 dan display:none di desktop). Menulis 3 track membuat .main jatuh ke track 0px → SELURUH konten app kolaps jadi sepotong sidebar. Override hanya berlaku ≥861px; di bawah itu .sidebar sudah display:none dan shell jadi 1 kolom, jadi menimpa track di sana justru mengolapskan .main lagi. */ @media (min-width:861px){ .ws-focus-mode .admin-shell{ grid-template-columns:0 minmax(0,1fr); } /* specificity harus >= .admin-shell.is-rail .sidebar (width:68px), kalau tidak sidebar tetap 68px dan meluber menimpa konten walau tak terlihat. */ .ws-focus-mode .admin-shell .sidebar{ width:0; min-width:0; padding-inline:0; overflow:hidden; } } .ws-focus-mode .sidebar,.ws-focus-mode .ws-subrail{ opacity:0; visibility:hidden; transform:translateX(-24px); pointer-events:none; } .ws-focus-mode .content.workspace-layer{ padding-inline:clamp(24px,5vw,84px); } @media (max-width:1180px){ .workspace-layer .ws-subnav{ grid-template-columns:repeat(7,minmax(138px,1fr)); } .workspace-layer .ws-projrow{ grid-template-columns:repeat(4,minmax(220px,1fr)); } .ws-board-head{ flex-wrap:wrap; } .ws-board-head__tools{ width:100%; margin-left:0; } .ws-board-search{ flex:1; } } @media (max-width:760px){ .content.workspace-layer{ padding:22px 12px 78px; } .workspace-layer .ws-subnav{ display:flex; top:68px; margin-inline:-2px; } .workspace-layer .ws-pill{ min-width:148px; border-right:1px solid var(--line-100); } .ws-viewbar,.ws-section-heading{ align-items:stretch; flex-direction:column; } .ws-viewbar__tools,.ws-compact-field{ width:100%; } .ws-compact-field .ctrl{ width:100%; } .workspace-layer .ws-projrow{ display:flex; } .ws-board-head__people{ margin-left:0; } .ws-board-head__tools{ align-items:stretch; flex-direction:column; } .ws-board-search,.ws-priority-filter{ width:100%; min-width:0; } .workspace-layer .ws-board-shell .ws-kcol{ flex-basis:min(84vw,310px); min-height:470px; } .modal-back.center.workspace-layer{ align-items:end; padding:10px; } .modal-center.workspace-layer.ws-command-window,.modal-center.workspace-layer.ws-command-window.wide{ width:100%; max-height:calc(100dvh - 12px); border-radius:18px 18px 12px 12px; } .modal-center.workspace-layer .mc-head{ grid-template-columns:38px minmax(0,1fr) 34px; padding:12px 14px; } .ws-window-mark{ width:38px; height:38px; } .modal-center.workspace-layer .ws-form-canvas{ padding:17px 15px; } } /* == [WS3-PROJ] Project Overview — adaptasi 12.04.03 (ProjectCard + OverviewPanel) === */ /* Section header di atas baris kartu proyek */ .workspace-layer .ws-projsec{ margin:0 0 20px; } .ws-projsec__h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 2px 11px; } .ws-projsec__h .ws-kicker{ display:inline-flex; align-items:center; gap:6px; margin:0; } .ws-projsec__h small{ font-size:11px; color:var(--text-subtle); } /* Kartu proyek yang diperkaya: rule health di tepi kiri + interaktif */ .workspace-layer .ws-projcard{ position:relative; overflow:hidden; cursor:pointer; } .ws-projcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ink-200); border-radius:3px 0 0 3px; } .ws-projcard--on::before{ background:var(--accent-mint); } .ws-projcard--risk::before{ background:var(--accent-orange); } .ws-projcard--off::before{ background:var(--accent-red); } .ws-projcard:focus-visible{ outline:none; box-shadow:var(--shadow-card),0 0 0 3px var(--focus-ring); border-color:var(--ink-300); } .ws-projcard__solo{ font-size:10.5px; color:var(--text-subtle); } /* Health chip (dot + label) */ .ws-healthchip{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px 3px 7px; border-radius:100px; font-size:10.5px; font-weight:650; line-height:1; border:1px solid var(--line-200); background:var(--surface-1); color:var(--text-muted); white-space:nowrap; } .ws-healthchip i{ width:7px; height:7px; border-radius:100px; background:var(--ink-300); flex:0 0 auto; } .ws-healthchip--on{ color:var(--accent-mint); border-color:color-mix(in srgb,var(--accent-mint) 32%,transparent); background:color-mix(in srgb,var(--accent-mint) 9%,var(--surface-0)); } .ws-healthchip--on i{ background:var(--accent-mint); } .ws-healthchip--risk{ color:#9a6100; border-color:color-mix(in srgb,var(--accent-orange) 40%,transparent); background:color-mix(in srgb,var(--accent-orange) 12%,var(--surface-0)); } .ws-healthchip--risk i{ background:var(--accent-orange); } .ws-healthchip--off{ color:var(--accent-red); border-color:color-mix(in srgb,var(--accent-red) 36%,transparent); background:color-mix(in srgb,var(--accent-red) 10%,var(--surface-0)); } .ws-healthchip--off i{ background:var(--accent-red); } /* Bar rincian tugas (segmented) */ .ws-projbreak{ display:flex; gap:2px; height:7px; margin:11px 0 0; border-radius:100px; overflow:hidden; background:var(--ink-100); } .ws-projbreak__seg{ min-width:3px; border-radius:2px; } .ws-ava--more{ background:var(--ink-100); color:var(--text-muted); } .ws-duechip.is-late{ color:var(--accent-red); background:color-mix(in srgb,var(--accent-red) 10%,transparent); } /* Avatar group tumpang tindih di footer kartu */ .ws-projcard__foot .ws-avarow .ws-ava{ margin-left:-6px; } .ws-projcard__foot .ws-avarow .ws-ava:first-child{ margin-left:0; } /* ── Project Overview panel (di dalam wsSlideOver) ─────────────────────────── */ .ws-ovhero{ padding:0 0 16px; border-bottom:1px solid var(--line-100); } .ws-ovhero__badges{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .ws-ovstage{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:100px; font-size:10.5px; font-weight:600; color:var(--text-muted); background:var(--surface-1); border:1px solid var(--line-200); } .ws-ovhero__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:12px; font-size:12px; color:var(--text-muted); } .ws-ovhero__meta svg{ opacity:.65; } .ws-ovhero__meta b{ color:var(--text-strong); font-weight:650; } .ws-ovhero__meta span[aria-hidden]{ color:var(--ink-200); } .ws-ovprogress{ display:flex; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--line-100); } .ws-ovring{ position:relative; flex:0 0 auto; display:grid; place-items:center; } .ws-ring__trk{ stroke:var(--ink-100); } .ws-ovring__num{ position:absolute; font:800 20px/1 var(--font-display,var(--font-sans)); letter-spacing:-.03em; color:var(--text-strong); font-variant-numeric:tabular-nums; } .ws-ovring__num i{ font-size:11px; font-weight:700; color:var(--text-subtle); font-style:normal; } .ws-ovprogress__side{ min-width:0; } .ws-ovprogress__side .ws-kicker{ margin:0 0 6px; } .ws-ovprogress__side p{ margin:0; font-size:14px; color:var(--text-body); } .ws-ovprogress__side p b{ font-weight:750; color:var(--text-strong); font-variant-numeric:tabular-nums; } .ws-ovhealth{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; font-weight:600; color:var(--text-muted); } .ws-healthbar{ display:inline-flex; gap:4px; } .ws-healthbar i{ width:16px; height:5px; border-radius:100px; background:var(--ink-100); } .ws-ovsec{ padding:16px 0; border-bottom:1px solid var(--line-100); } .ws-ovsec:last-child{ border-bottom:0; } .ws-ovsec__h{ display:flex; align-items:center; gap:7px; margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-subtle); } .ws-ovsec__h svg{ opacity:.7; } .ws-ovsec__count{ margin-left:auto; padding:1px 8px; border-radius:100px; background:var(--ink-050); color:var(--text-muted); font-size:10.5px; font-weight:700; letter-spacing:0; } .ws-ovlegend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:11px; } .ws-ovlegend__item{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted); } .ws-ovlegend__item i{ width:9px; height:9px; border-radius:3px; } .ws-ovlegend__item b{ color:var(--text-strong); font-variant-numeric:tabular-nums; } .ws-ovrisk{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 11px; margin-bottom:7px; border:1px solid var(--line-200); border-left:3px solid var(--accent-red); border-radius:var(--radius-sm); background:var(--surface-0); cursor:pointer; transition:background .14s ease; } .ws-ovrisk:last-child{ margin-bottom:0; } .ws-ovrisk:hover{ background:var(--surface-1); } .ws-ovrisk__dot{ display:none; } .ws-ovrisk__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .ws-ovrisk__main b{ font-size:12.5px; font-weight:600; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ws-ovrisk__main small{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:var(--accent-red); } .ws-ovrisk__main small svg{ opacity:.8; } .ws-ovempty{ display:flex; align-items:center; gap:8px; padding:14px; border-radius:var(--radius-sm); background:var(--surface-1); color:var(--text-muted); font-size:12.5px; } .ws-ovempty svg{ color:var(--accent-mint); } .ws-ovteam{ display:flex; flex-direction:column; gap:9px; } .ws-ovteam__m{ display:inline-flex; align-items:center; gap:9px; } .ws-ovteam__nm{ font-size:12.5px; color:var(--text-body); } .ws-ovteam__nm em{ margin-left:6px; padding:1px 6px; border-radius:100px; background:var(--vs-yellow); color:var(--vs-black); font:700 8.5px/1.4 var(--font-mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle; } .ws-ovgroup{ margin-bottom:14px; } .ws-ovgroup:last-child{ margin-bottom:0; } .ws-ovgroup__h{ display:flex; align-items:center; gap:7px; margin-bottom:7px; font-size:12px; font-weight:700; color:var(--text-strong); } .ws-ovgroup__h::before{ content:""; width:8px; height:8px; border-radius:100px; background:var(--ink-300); } .ws-ovgroup__h--in_progress::before{ background:var(--accent-blue); } .ws-ovgroup__h--review::before{ background:var(--accent-orange); } .ws-ovgroup__h--done::before{ background:var(--accent-mint); } .ws-ovgroup__n{ margin-left:auto; color:var(--text-subtle); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; } .ws-ovtask{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; margin-bottom:5px; border:1px solid var(--line-100); border-radius:var(--radius-xs); background:var(--surface-0); cursor:pointer; transition:background .14s ease,border-color .14s ease; } .ws-ovtask:hover{ background:var(--surface-1); border-color:var(--line-200); } .ws-ovtask__code{ font:650 9px/1 var(--font-mono); letter-spacing:.06em; color:var(--text-subtle); flex:0 0 auto; } .ws-ovtask__title{ flex:1; min-width:0; overflow:hidden; font-size:12px; color:var(--text-body); text-overflow:ellipsis; white-space:nowrap; } /* == [WS3-PROJ] END ============================================================ */ /* ============ DISCOVER ADMIN (PRD 12.50) ============ */ .sf-badge-chip{ display:inline-flex; align-items:center; padding:1px 7px; border-radius:100px; font-size:10px; font-weight:700; line-height:1.6; margin-left:4px; border:1px solid transparent; vertical-align:middle; } .sf-badge-chip.is-verified{ background:var(--pst-info-bg,#D4F1FD); color:var(--pst-info-text,#0C7090); border-color:var(--pst-info-border,#6BCBEC); } .sf-badge-chip.is-partner{ background:var(--pst-purple-bg,#E7DDFF); color:var(--pst-purple-text,#6636D6); border-color:var(--pst-purple-border,#B093FF); } .sf-badge-chip.is-official{ background:var(--pst-identity-bg,#FFFBD6); color:var(--pst-identity-text,#050505); border-color:var(--pst-identity-border,#FFF700); } .sf-badge-chip.is-pending{ background:var(--pst-warning-bg,#FFEFBE); color:var(--pst-warning-text,#8A5E00); border-color:var(--pst-warning-border,#F2C233); } .sf-disc-dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; } .sf-disc-dot.on{ background:var(--pst-mint-border,#54DDA0); box-shadow:0 0 0 3px var(--pst-mint-bg,#C8F7DC); } .sf-disc-dot.off{ background:var(--ink-400,#9AA0AA); box-shadow:0 0 0 3px var(--line-100,#F0F2F5); } .sf-disc-st{ display:inline-flex; padding:2px 9px; border-radius:100px; font-size:11px; font-weight:700; } .sf-disc-st.st-published{ background:var(--pst-mint-bg,#C8F7DC); color:var(--pst-mint-text,#047857); } .sf-disc-st.st-review{ background:var(--pst-warning-bg,#FFEFBE); color:var(--pst-warning-text,#8A5E00); } .sf-disc-st.st-draft{ background:var(--pst-neutral-bg,#ECEEF3); color:var(--pst-neutral-text,#59616E); } .sf-disc-st.st-hidden{ background:var(--pst-neutral-bg,#ECEEF3); color:var(--ink-400,#9AA0AA); } .disc-pf-grid{ display:grid; grid-template-columns:repeat(3,72px); gap:8px; margin-top:8px; } .disc-pf-cell{ position:relative; width:72px; height:72px; border-radius:10px; background:var(--surface-50,#F7F8FA); background-size:cover; background-position:center; display:grid; place-items:center; border:1px solid var(--line-200,#E6E8EE); } .disc-pf-cell.add{ cursor:pointer; color:var(--ink-400,#9AA0AA); border-style:dashed; } .disc-pf-cell.add:hover{ color:var(--ink-900,#111214); border-color:var(--ink-400,#9AA0AA); } .disc-pf-rm{ position:absolute; top:-6px; right:-6px; width:22px; height:22px; border:0; border-radius:50%; background:var(--ink-900,#111214); color:#fff; cursor:pointer; display:grid; place-items:center; } .disc-lstack{ display:flex; flex-direction:column; gap:8px; } .disc-lrow{ border:1px solid var(--line-200,#E6E8EE); border-radius:10px; overflow:hidden; } .disc-lrow-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:var(--surface-50,#F7F8FA); } .disc-lrow-bd{ padding:10px 12px; } .disc-lrow-bd .ctrl{ width:100%; } /* — Tipografi Global (Tampilan): details Advanced ukuran per elemen — */ .th-typo-adv { margin-top: 4px; border: 1px solid var(--line-200, #E6E8EE); border-radius: 10px; padding: 0 12px; background: var(--surface-50, #F7F8FA); } .th-typo-adv summary { cursor: pointer; padding: 10px 0; font-size: 12.5px; font-weight: 700; color: var(--ink-700, #3A3D45); user-select: none; } .th-typo-adv[open] { padding-bottom: 12px; background: var(--surface-0, #fff); } .th-typo-adv[open] summary { border-bottom: 1px solid var(--line-100, #F0F2F5); margin-bottom: 8px; } /* ============================================================ BOOKING MODULE FRONT-END REFRESH (BK-REFRESH) Blok additive: Overview, Database, attention model, modal terpusat. Semua warna via token DS v2.0 (--tag-*, --line, --surface). Boxy, hairline, Identity Yellow hanya untuk indicator tab aktif. Tanpa mengubah tipografi. ============================================================ */ /* ---- tab underline Overview / Database ---- */ .bk-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 0 16px; } .bk-tab { padding:10px 14px; font-size:14px; font-weight:640; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; transition:color .15s ease, border-color .15s ease; } .bk-tab:hover { color:var(--text-strong, var(--ink)); } .bk-tab.is-on { color:var(--text-strong, var(--ink)); border-bottom-color:var(--brand, #F5C518); } /* ---- universal date filter (sticky) ---- */ .bk-datebar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:14px; margin-bottom:16px; box-shadow:var(--shadow-card, var(--shadow-1)); } .bk-datebar-nav { display:flex; align-items:center; gap:8px; } .bk-navbtn { padding:0; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; } .bk-datepick { position:relative; display:inline-flex; } .bk-datebtn { font-weight:640; min-height:40px; } .bk-date-input { position:absolute; inset:0; opacity:0; width:100%; height:100%; border:0; cursor:pointer; } .bk-datebar-meta { font-size:12px; color:var(--muted); } .bk-datebar-meta .mono { font-variant-numeric:tabular-nums; } /* ---- StatCards ---- */ .bk-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; } .bk-stat { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:start; gap:12px; min-height:94px; padding:16px; text-align:left; color:var(--text-strong, var(--ink)); background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:14px; cursor:pointer; box-shadow:var(--shadow-card, var(--shadow-1)); transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .bk-stat:hover { transform:translateY(-2px); box-shadow:var(--shadow-pop, var(--shadow-card)); } .bk-stat.is-on { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; } .bk-stat-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; color:var(--primary); background:var(--canvas); border:1px solid var(--line); } .bk-stat-copy { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:3px 8px; } .bk-stat-lbl { font-size:12.5px; font-weight:700; color:var(--muted); } .bk-stat-num { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:27px; font-weight:760; font-variant-numeric:tabular-nums; line-height:1; } .bk-stat-desc { min-width:0; font-size:11.5px; line-height:1.3; color:var(--muted); } .bk-stat.tone-info .bk-stat-icon { color:var(--tag-info-text); background:var(--tag-info-bg); border-color:var(--tag-info-border); } .bk-stat.tone-live .bk-stat-icon { color:var(--tag-info-text); background:var(--tag-info-bg); border-color:var(--tag-info-border); } .bk-stat.tone-ok .bk-stat-icon { color:var(--tag-success-text); background:var(--tag-success-bg); border-color:var(--tag-success-border); } /* ---- overview layout ---- */ .bk-ov-grid { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr); gap:16px; align-items:start; margin-bottom:16px; } .bk-ov-side { display:flex; flex-direction:column; gap:16px; } .bk-panel { min-width:0; background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow-card, var(--shadow-1)); } .bk-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; } .bk-panel-title { min-width:0; display:flex; align-items:center; gap:10px; } .bk-panel-icon { flex:none; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; color:var(--primary); background:var(--canvas); border:1px solid var(--line); } .bk-panel-icon--success { color:var(--tag-success-text); background:var(--tag-success-bg); border-color:var(--tag-success-border); } .bk-panel-head h2 { margin:0; font-size:15px; font-weight:720; line-height:1.25; } .bk-panel-head p { margin:3px 0 0; font-size:11.5px; color:var(--muted); line-height:1.3; } .bk-count { flex:none; display:inline-flex; align-items:center; min-height:26px; padding:3px 9px; font-size:11.5px; font-weight:650; color:var(--muted); background:var(--canvas); border:1px solid var(--line); border-radius:100px; font-variant-numeric:tabular-nums; } .bk-localfilter { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; } .bk-localfilter--wrap { gap:6px; } .bk-localfilter-sp { flex:1 1 12px; } .bk-chip { padding:6px 11px; font-size:12.5px; font-weight:600; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:100px; cursor:pointer; transition:all .15s ease; } .bk-chip:hover { color:var(--text-strong, var(--ink)); border-color:var(--muted); } .bk-chip.is-on { color:#fff; background:var(--primary); border-color:var(--primary); } .bk-chip b { font-variant-numeric:tabular-nums; margin-left:3px; } .bk-chip--warn { color:var(--tag-warning-text); border-color:var(--tag-warning-border); background:var(--tag-warning-bg); } .bk-mini-sel { height:32px; max-width:180px; color:var(--text-strong, var(--ink)); border:1px solid var(--line); border-radius:8px; background:var(--surface-0, var(--paper)); font-size:12.5px; padding:0 28px 0 9px; } /* ---- session card / finished / queue row ---- */ .bk-scard-list, .bk-qrow-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:12px; align-items:stretch; } .bk-scard-list .bk-empty, .bk-qrow-list .bk-empty { grid-column:1 / -1; } /* Kartu sesi = unit library GUI/15/CARD varian "default" (kartu detail comfy). Anatomi tetap: head · grid detail · baris tag · divider · footer (total + aksi). Semua baris komposit memakai grid (bukan flex) supaya kolom tak pernah saling menindih saat teks panjang; kartu jadi container agar tiap blok bisa melipat sendiri mengikuti lebar KARTU, bukan lebar layar. */ .bk-scard { display:flex; flex-direction:column; gap:12px; padding:15px 16px; height:100%; container-type:inline-size; container-name:scard; background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .bk-scard:hover { transform:translateY(-1px); border-color:var(--muted); box-shadow:var(--shadow-card, var(--shadow-1)); } /* Head: avatar · identitas · badge. Di kartu sempit badge turun ke barisnya sendiri supaya nama & SID tidak tergencet jadi 2 baris terpotong. */ .bk-scard-head { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"av id" "st st"; align-items:center; gap:8px 11px; } .bk-scard-av { grid-area:av; width:38px; height:38px; border-radius:100px; background:var(--ink-050); border:1px solid var(--line-200, var(--line)); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--text-muted, var(--muted)); } .bk-scard-idlabel { grid-area:id; display:grid; gap:2px; min-width:0; } .bk-scard-name { font-size:14.5px; font-weight:600; line-height:1.25; color:var(--text-strong, var(--ink)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bk-scard-sid { font-family:var(--font-mono); font-size:11px; line-height:1.2; color:var(--text-subtle, var(--muted)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bk-scard-head .badge-st { grid-area:st; justify-self:start; white-space:nowrap; } /* Badge dibiarkan selebar labelnya (tak pernah dipotong); yang menyusut adalah kolom identitas. Ambang container dipilih agar nama masih dapat ±150px saat sebaris. */ @container scard (min-width: 360px) { .bk-scard-head { grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"av id st"; } .bk-scard-head .badge-st { justify-self:end; } } /* Detail: satu kolom penuh secara default (teks utuh), dua kolom saat kartu lega. */ .bk-scard-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:7px 16px; font-size:13px; line-height:1.35; color:var(--text-muted, var(--muted)); } @container scard (min-width: 400px) { .bk-scard-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } .bk-scard-cell { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px; min-width:0; } .bk-scard-cell svg { opacity:.72; } .bk-scard-cell-tx { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bk-scard-div { flex:none; height:1px; background:var(--line-100, var(--line)); margin-top:auto; } /* Footer: total (kiri) · aksi (kanan) — dua kolom tegas, tombol tak pernah menempel ke angka. Kartu sempit: aksi pindah ke baris bawah, tetap rata kanan. */ .bk-scard-foot { display:grid; grid-template-columns:minmax(0,1fr); justify-items:end; align-items:end; gap:10px 12px; } @container scard (min-width: 240px) { .bk-scard-foot { grid-template-columns:minmax(0,auto) minmax(0,1fr); } } .bk-scard-foot--end { grid-template-columns:minmax(0,1fr); } .bk-scard-total { display:grid; gap:1px; justify-self:start; min-width:0; } .bk-scard-total-lbl { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle, var(--muted)); } .bk-scard-total-val { font-size:15px; font-weight:700; line-height:1.2; color:var(--text-strong, var(--ink)); } .bk-meta-item { display:inline-flex; align-items:center; gap:4px; min-width:0; } .bk-meta-item svg, .bk-frow-meta svg { flex:none; opacity:.72; } .bk-meta-sep { opacity:.45; margin:0 3px; } /* Baris tag: chip pembayaran/attention/bypass punya barisnya sendiri agar tak lagi berebut tempat dengan total & tombol. Chip boleh menyusut, tak boleh terpotong. */ .bk-scard-tags, .bk-qrow-tags { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; } .bk-scard-tags > * { max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bk-scard-act, .bk-qrow-act { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; min-width:0; } .bk-scard-act .abtn { flex:0 1 auto; min-width:0; } .bk-frow-list { display:flex; flex-direction:column; gap:4px; } .bk-frow { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px; cursor:pointer; font-size:13px; } .bk-frow:hover { background:var(--canvas); } .bk-frow-check { display:inline-flex; color:var(--tag-success-text); } .bk-frow-time { font-variant-numeric:tabular-nums; font-weight:700; color:var(--muted); } .bk-frow-name { font-weight:600; } .bk-frow-meta { display:inline-flex; align-items:center; gap:3px; color:var(--muted); font-size:12px; margin-left:auto; } .bk-intake-kpi { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:14px; } .bk-intake-stat { display:flex; align-items:center; gap:9px; min-width:0; padding:10px; text-align:left; color:var(--text-strong, var(--ink)); background:var(--canvas); border:1px solid var(--line); border-radius:11px; cursor:pointer; transition:border-color .15s ease, transform .15s ease; } .bk-intake-stat:hover { transform:translateY(-1px); border-color:var(--muted); } .bk-intake-stat.is-on { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; } .bk-intake-icon { flex:none; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; color:var(--muted); background:var(--surface-0, var(--paper)); border:1px solid var(--line); } .bk-intake-stat > span:last-child { min-width:0; display:flex; flex-direction:column; } .bk-intake-stat b { font-size:16px; line-height:1.1; font-variant-numeric:tabular-nums; } .bk-intake-stat small { margin-top:2px; overflow:hidden; color:var(--muted); font-size:10.5px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .bk-intake-stat.tone-warning .bk-intake-icon { color:var(--tag-warning-text); background:var(--tag-warning-bg); border-color:var(--tag-warning-border); } .bk-intake-stat.tone-info .bk-intake-icon { color:var(--tag-info-text); background:var(--tag-info-bg); border-color:var(--tag-info-border); } .bk-intake-stat.tone-danger .bk-intake-icon { color:var(--tag-danger-text); background:var(--tag-danger-bg); border-color:var(--tag-danger-border); } /* Kartu ikut warna statusnya — digradasikan ke putih (150deg → surface 62%), rumus yang sama dengan kartu Daftar Jadwal & galeri Customers. */ .bk-intake-stat.tone-warning { background:linear-gradient(150deg,var(--tag-warning-bg),var(--surface-0,var(--paper)) 62%); border-color:var(--tag-warning-border); } .bk-intake-stat.tone-info { background:linear-gradient(150deg,var(--tag-info-bg),var(--surface-0,var(--paper)) 62%); border-color:var(--tag-info-border); } .bk-intake-stat.tone-danger { background:linear-gradient(150deg,var(--tag-danger-bg),var(--surface-0,var(--paper)) 62%); border-color:var(--tag-danger-border); } .bk-intake-stat:not([class*="tone-"]) { background:linear-gradient(150deg,var(--tag-neutral-bg,var(--surface-1)),var(--surface-0,var(--paper)) 62%); } .bk-qrow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .bk-qrow:hover { transform:translateY(-1px); border-color:var(--muted); box-shadow:var(--shadow-card, var(--shadow-1)); } .bk-qrow-top { display:flex; align-items:baseline; gap:8px; } .bk-qrow-name { font-weight:640; font-size:14px; } .bk-qrow-sid { font-size:11px; color:var(--muted); } .bk-qrow-age { font-size:11px; color:var(--muted); margin-left:auto; } .bk-qrow-meta { font-size:12.5px; color:var(--muted); margin:3px 0 7px; display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; } .bk-note { margin-top:12px; padding:9px 12px; border-radius:10px; font-size:12.5px; display:flex; align-items:center; gap:8px; } .bk-note--warn { background:var(--tag-warning-bg); color:var(--tag-warning-text); border:1px solid var(--tag-warning-border); } .bk-empty { text-align:center; color:var(--muted); padding:28px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; } .bk-empty svg { opacity:.4; } .bk-empty--sm { padding:14px; } /* ---- attention tag + rail + tint (icon+label, jangan warna-saja) ---- */ .bk-attn { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; height:22px; border-radius:100px; font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap; } .bk-attn svg { flex:none; } .bk-attn--danger { background:var(--tag-danger-bg); color:var(--tag-danger-text); border:1px solid var(--tag-danger-border); } .bk-attn--warning { background:var(--tag-warning-bg); color:var(--tag-warning-text); border:1px solid var(--tag-warning-border); } .bk-attn--info { background:var(--tag-info-bg); color:var(--tag-info-text); border:1px solid var(--tag-info-border); } .bk-attn--success { background:var(--tag-success-bg); color:var(--tag-success-text); border:1px solid var(--tag-success-border); } .bk-attn--neutral { background:var(--tag-neutral-bg); color:var(--tag-neutral-text); border:1px solid var(--tag-neutral-border); } .bk-rail { position:relative; } .bk-rail::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:12px 0 0 12px; } .bk-rail--danger::before { background:var(--tag-danger-text); } .bk-rail--warning::before { background:var(--tag-warning-text); } .bk-rail--danger { background:var(--surface-0, var(--paper)); border-color:var(--tag-danger-border); } .bk-rail--warning { background:var(--surface-0, var(--paper)); border-color:var(--tag-warning-border); } .bk-attn-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:middle; } .bk-attn-dot--danger { background:var(--tag-danger-text); } .bk-attn-dot--warning { background:var(--tag-warning-text); } tr.bk-tr-attn--danger td { background:var(--surface-0, var(--paper)); background:color-mix(in srgb, var(--tag-danger-bg) 42%, var(--surface-0, #fff)); } tr.bk-tr-attn--warning td { background:var(--surface-0, var(--paper)); background:color-mix(in srgb, var(--tag-warning-bg) 48%, var(--surface-0, #fff)); } tr.bk-tr-attn td:first-child { position:relative; } tr.bk-tr-attn td:first-child::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; } tr.bk-tr-attn--danger td:first-child::before { background:var(--tag-danger-text); } tr.bk-tr-attn--warning td:first-child::before { background:var(--tag-warning-text); } /* ---- Database: quick views, status multi-select, active chips ---- */ .bk-quickviews { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; } .bk-qv { padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:100px; cursor:pointer; transition:all .15s ease; } .bk-qv:hover { color:var(--text-strong, var(--ink)); border-color:var(--muted); } .bk-qv.is-on { color:#fff; background:var(--primary); border-color:var(--primary); } .bk-statusms { position:relative; } .bk-ms-badge { display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; margin-left:2px; border-radius:100px; background:var(--primary); color:#fff; font-size:10.5px; font-variant-numeric:tabular-nums; } .bk-status-pop { position:absolute; top:calc(100% + 6px); left:0; z-index:40; width:260px; max-height:320px; overflow:auto; background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-pop); padding:6px; } .bk-status-opt { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:13px; } .bk-status-opt:hover { background:var(--canvas); } .bk-status-opt b { margin-left:auto; color:var(--muted); font-size:11.5px; } .bk-activechips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px; } .bk-filter-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; font-size:12px; font-weight:600; color:var(--text-strong, var(--ink)); background:var(--canvas); border:1px solid var(--line); border-radius:100px; cursor:pointer; } .bk-filter-chip:hover { border-color:var(--danger); color:var(--danger); } .bk-filter-chip svg { opacity:.6; } .bk-clearall { padding:4px 10px; font-size:12px; font-weight:600; color:var(--muted); background:transparent; border:0; cursor:pointer; text-decoration:underline; } /* ---- Detail modal terpusat ---- */ .bk-detail-back { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(5,5,5,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:bkFade .16s ease; } /* Lebar fluid (% dari .bk-detail-back yang sudah ber-padding 24px), bukan px mati → ikut ukuran layar. Batas atas tetap ada dalam rem: tanpa itu, di layar lebar grid 2fr/1fr melar dan baris teks jadi terlalu panjang untuk dibaca. */ .bk-detail { width:92%; max-width:70rem; min-width:0; max-height:90vh; display:flex; flex-direction:column; text-align:left; color:var(--text-strong, var(--ink)); background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-pop); overflow:hidden; animation:bkRise .16s ease; } .bk-detail-head { display:flex; align-items:flex-start; gap:16px; padding:20px 22px; background:var(--surface-0, var(--paper)); border-bottom:1px solid var(--line); } .bk-detail-head-main { min-width:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); align-items:center; gap:22px; } .bk-detail-identity { min-width:0; } .bk-detail-sid { display:inline-flex; align-items:center; gap:4px; max-width:100%; font-size:11px; color:var(--muted); } .bk-detail-sid span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bk-detail .bk-detail-title { display:block; margin:5px 0 9px; font-family:var(--font-sans); font-size:21px; font-weight:760; line-height:1.18; letter-spacing:-.025em; text-transform:none; color:var(--text-strong, var(--ink)); } .bk-detail-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .bk-detail-schedule { min-width:0; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:start; gap:11px; padding:12px 13px; background:var(--canvas); border:1px solid var(--line); border-radius:12px; } .bk-detail-schedule-ic { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; color:var(--text-strong, var(--ink)); background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:10px; } .bk-detail-schedule-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; } .bk-detail-schedule-label { margin-bottom:2px; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .bk-detail-schedule-copy strong { max-width:100%; overflow:hidden; font-size:12.5px; font-weight:700; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; } .bk-detail-schedule-meta { width:100%; display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin-top:5px; font-size:11px; color:var(--muted); } .bk-detail-schedule-meta span { min-width:0; display:inline-flex; align-items:center; gap:4px; } .bk-detail-schedule-meta svg { flex:none; } .bk-detail-head .x { flex:none; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; background:transparent; border-radius:9px; cursor:pointer; color:var(--muted); } .bk-detail-head .x:hover { background:var(--canvas); color:var(--text-strong, var(--ink)); } .bk-detail-body { overflow-y:auto; overflow-x:hidden; padding:18px 22px; flex:1; } .bk-detail-grid { display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start; } .bk-detail-main { min-width:0; display:flex; flex-direction:column; gap:14px; } .bk-detail-side { display:flex; flex-direction:column; gap:12px; position:sticky; top:0; } .bk-sec { background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:12px; overflow:hidden; } .bk-sec-h { display:flex; align-items:center; gap:9px; padding:10px 13px; background:var(--canvas); border-bottom:1px solid var(--line); } .bk-sec-ic { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; color:var(--muted); background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:8px; } .bk-sec-h h3 { min-width:0; margin:0; flex:1; text-align:left; font-size:13px; font-weight:700; line-height:1.3; } .bk-sec--coll .bk-sec-h { cursor:pointer; user-select:none; } .bk-sec--coll:not(.is-open) .bk-sec-h { border-bottom:0; } .bk-sec-chev { color:var(--muted); transition:transform .15s ease; } .bk-sec.is-open .bk-sec-chev { transform:rotate(180deg); } .bk-sec-b { padding:6px 14px; } .bk-sec--coll .bk-sec-b { display:none; } .bk-sec--coll.is-open .bk-sec-b { display:block; } .bk-sec-div { height:1px; background:var(--line); margin:10px 0; } .bk-detail .kv { display:grid; grid-template-columns:minmax(118px,30%) minmax(0,1fr); align-items:start; gap:16px; padding:10px 0; } .bk-detail .kv .k { width:auto; text-align:left; font-size:12px; line-height:1.45; color:var(--muted); } .bk-detail .kv .v { min-width:0; text-align:left; font-size:13px; font-weight:600; line-height:1.45; word-break:break-word; } .bk-detail .pax-warn { margin-top:4px; text-align:left; line-height:1.4; } .bk-detail .inline-alert { margin-top:10px; text-align:left; } .bk-side-card { border:1px solid var(--line); border-radius:12px; padding:13px 14px; background:var(--surface-0, var(--paper)); } .bk-side-attn { border-color:var(--tag-warning-border); background:color-mix(in srgb, var(--tag-warning-bg) 72%, var(--surface-0, #fff)); } .bk-side-h { display:flex; align-items:center; gap:6px; margin-bottom:10px; font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } .bk-side-h svg { flex:none; } .bk-attn-line { margin-bottom:7px; text-align:left; } .bk-attn-line:last-child { margin-bottom:0; } .bk-side-pay { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; padding:4px 0; } .bk-side-pay--due { color:var(--tag-warning-text); font-weight:700; } .bk-side-pay .mono { font-variant-numeric:tabular-nums; } .bk-detail-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 22px; border-top:1px solid var(--line); background:var(--surface-0, var(--paper)); } .bk-detail-foot .bk-primary { margin-right:auto; } .bk-primary--blocked { display:inline-flex; align-items:center; gap:8px; min-width:0; } .bk-primary--blocked .abtn[disabled] { opacity:.55; cursor:not-allowed; } .bk-primary-reason { font-size:11.5px; color:var(--tag-warning-text); max-width:260px; line-height:1.3; } .bk-more { position:relative; } .bk-more-menu { position:absolute; bottom:calc(100% + 6px); right:0; z-index:50; min-width:220px; background:var(--surface-0, var(--paper)); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-pop); padding:6px; } .bk-more-item { display:flex; align-items:center; gap:8px; width:100%; padding:9px 10px; font-size:13px; font-weight:600; color:var(--text-strong, var(--ink)); background:transparent; border:0; border-radius:8px; cursor:pointer; text-align:left; } .bk-more-item:hover { background:var(--canvas); } .bk-more-danger { color:var(--danger); } @keyframes bkFade { from { opacity:0; } to { opacity:1; } } @keyframes bkRise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } /* ---- responsive ---- */ @media (max-width:1024px) { .bk-ov-grid { grid-template-columns:1fr; } .bk-intake-kpi { grid-template-columns:repeat(2,minmax(0,1fr)); } .bk-detail-grid { grid-template-columns:1fr; } .bk-detail-side { position:static; } } @media (max-width:768px) { .bk-stats { grid-template-columns:repeat(2,1fr); } .bk-datebar { padding-top:8px; padding-bottom:8px; } .bk-datebar-nav { width:100%; } .bk-datepick { flex:1; min-width:0; } .bk-datebtn { width:100%; justify-content:flex-start; overflow:hidden; } .bk-datebtn span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bk-panel { padding:14px; } .bk-qrow { grid-template-columns:1fr; } .bk-qrow-act { justify-content:flex-start; } .bk-frow { flex-wrap:wrap; } .bk-frow-meta { order:5; width:100%; margin-left:39px; } .bk-detail-back { padding:0; } .bk-detail { width:100vw; max-width:100vw; height:100vh; max-height:100vh; border-radius:0; border:0; } .bk-detail-head { padding-top:16px; padding-bottom:16px; } .bk-detail-head-main { grid-template-columns:1fr; gap:12px; } .bk-detail-schedule { width:100%; } .bk-detail-schedule-copy strong { white-space:normal; } .bk-detail-foot { padding-bottom:calc(14px + env(safe-area-inset-bottom)); position:sticky; bottom:0; } .bk-detail-foot .bk-primary { flex:1 0 100%; width:100%; margin-right:0; } .bk-primary--blocked { flex:1 0 100%; width:100%; } .bk-status-pop { width:min(280px, calc(100vw - 32px)); } } @media (max-width:480px) { .bk-stat { grid-template-columns:36px minmax(0,1fr); gap:9px; min-height:86px; padding:12px; } .bk-stat-icon { width:36px; height:36px; border-radius:10px; } .bk-stat-num { font-size:23px; } .bk-stat-desc { font-size:10.5px; } .bk-intake-kpi { grid-template-columns:1fr 1fr; } .bk-intake-stat { padding:8px; } .bk-localfilter-sp { display:none; } .bk-mini-sel { flex:1 1 calc(50% - 6px); min-width:0; max-width:none; } .bk-detail-head, .bk-detail-body, .bk-detail-foot { padding-left:14px; padding-right:14px; } .bk-detail .bk-detail-title { font-size:19px; } .bk-detail-schedule { grid-template-columns:34px minmax(0,1fr); padding:10px; } .bk-detail-schedule-ic { width:34px; height:34px; } .bk-detail .kv { grid-template-columns:1fr; gap:3px; padding:9px 0; } .bk-detail .kv .k { font-size:11px; } .bk-sec-h { padding:9px 10px; } .bk-sec-b { padding-left:11px; padding-right:11px; } } /* ---- motion/a11y ---- */ .bk-tab:focus-visible, .bk-chip:focus-visible, .bk-qv:focus-visible, .bk-stat:focus-visible, .bk-scard:focus-visible, .bk-qrow:focus-visible, .bk-filter-chip:focus-visible { outline:2px solid var(--brand, #F5C518); outline-offset:2px; } @media (prefers-reduced-motion: reduce) { .bk-detail-back, .bk-detail { animation:none; } .bk-stat, .bk-scard, .bk-qrow { transition:none; } } /* ---- Bookings workspace · VIRCANSA OS component library alignment ---- */ .bk-workspace { --bk-radius:12px; min-width:0; } /* Hero .bk-page-head dihapus (2026-07-22, permintaan owner): judul modul sudah ada di topbar, hero-nya cuma menambah tinggi sebelum konten kerja. Kicker tetap dipakai toolbox. */ .bk-kicker, .bk-toolbox-kicker { display:block; margin-bottom:8px; font-family:var(--font-mono); font-size:10px; font-weight:650; letter-spacing:.13em; line-height:1.3; text-transform:uppercase; color:var(--text-subtle, var(--muted)); } /* Tab dipertegas: teks naik ke ukuran/berat bodi, inactive dipindah dari --muted ke --text-muted biar kebaca, indikator aktif jadi rail 3px penuh di atas hairline. */ .bk-workspace > .bk-tabs { gap:26px; margin:0 0 18px; padding-top:0; border-bottom-color:var(--line-200, var(--line)); } .bk-workspace > .bk-tabs .bk-tab { padding:12px 0 12px; font-size:14px; font-weight:680; letter-spacing:-.01em; color:var(--text-muted, var(--muted)); border-bottom-width:3px; margin-bottom:-1px; } .bk-workspace > .bk-tabs .bk-tab:hover { color:var(--text-strong, var(--ink)); border-bottom-color:var(--line-200, var(--line)); } .bk-workspace > .bk-tabs .bk-tab.is-on { color:var(--text-strong, var(--ink)); font-weight:740; border-bottom-color:var(--ink); } /* Datebar dikembalikan ke lebar kontainer (bukan full-bleed) dan memakai radius + hairline yang sama dengan .bk-stat / .bk-panel di bawahnya, supaya tepi kiri-kanan dan sudutnya sejajar dengan kartu — satu kolom, bukan bar yang menggantung. */ .bk-datebar { top:0; margin:0 0 16px; padding:9px 14px; border-width:1px; border-radius:var(--bk-radius); border-color:var(--line-200, var(--line)); box-shadow:none; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); } /* Anatomi referensi: dua panah jadi satu segmen, tanggal = teks tebal (bukan tombol berkotak), penanda "Hari ini" identity-yellow, meta kanan = ringkasan konten mono tanpa kotak chip. */ .bk-datebar-nav { gap:12px; } .bk-navgroup { display:inline-flex; gap:6px; } .bk-navbtn { min-height:36px; height:36px; width:36px; border-radius:var(--radius-sm,10px); } .bk-datebtn { display:inline-flex; align-items:center; min-height:36px; padding:0 2px; color:var(--text-strong,var(--ink)); background:none; border:0; cursor:pointer; font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.01em; } .bk-datebtn:hover { text-decoration:underline; text-underline-offset:3px; } .bk-today-tag { display:inline-flex; align-items:center; padding:4px 10px; color:var(--tag-identity-text); background:var(--identity-yellow,#FFF700); border:1px solid var(--identity-yellow,#FFF700); border-radius:var(--radius-pill,100px); font-size:11.5px; font-weight:700; } .bk-datebar-meta { color:var(--text-subtle,var(--ink-400)); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; } /* StatCard tanpa ikon-box: kicker → angka → subline, tone dibawa fill+border kartu. */ .bk-stats { gap:10px; margin-bottom:18px; } .bk-stat { grid-template-columns:minmax(0,1fr); gap:0; min-height:112px; padding:16px 18px; border-color:var(--line-200, var(--line)); border-radius:var(--bk-radius); box-shadow:none; } .bk-stat:hover { transform:translateY(-2px); border-color:var(--ink-400, var(--muted)); box-shadow:0 10px 26px rgba(17,18,20,.06); } .bk-stat-copy { display:flex; flex-direction:column; align-items:flex-start; gap:0; } .bk-stat-lbl { font-family:var(--font-mono); font-size:10px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; } .bk-stat-num { order:2; margin:10px 0 6px; font-size:32px; font-weight:650; letter-spacing:-.045em; } .bk-stat-desc { order:3; font-size:11px; } .bk-stat.tone-attn { background:var(--tag-danger-bg); border-color:var(--tag-danger-border); } .bk-stat.tone-attn .bk-stat-num { color:var(--tag-danger-text); } .bk-stat.tone-live { background:var(--tag-info-bg); border-color:var(--tag-info-border); } .bk-stat.tone-ok { background:var(--tag-success-bg); border-color:var(--tag-success-border); } /* Kartu terpilih ditandai ring ink (bukan fill hitam) supaya tone tetap terbaca. */ .bk-stat.is-on { border-color:var(--ink, #050505); box-shadow:0 0 0 1px var(--ink, #050505) inset; } .bk-panel { border-color:var(--line-200, var(--line)); border-radius:var(--bk-radius); box-shadow:none; } .bk-panel--sessions { min-height:420px; } /* Antrean intake: tinggi kontainer dikunci pada rentang tetap (min 2 baris kartu, maks 2 baris lalu scroll di dalam) supaya berpindah quick filter — 14 item ke 2 item — tidak membuat panel melonjak/mengempis dan halaman ikut bergeser. */ .bk-panel--intake { min-height:560px; } .bk-panel--intake .bk-qrow-list { min-height:566px; max-height:566px; overflow-y:auto; padding-right:4px; align-content:start; } .bk-panel--intake .bk-qrow-list .bk-empty { align-self:start; } @media (max-width:768px) { .bk-panel--intake { min-height:0; } .bk-panel--intake .bk-qrow-list { min-height:0; max-height:none; overflow:visible; padding-right:0; } } .bk-panel-head { padding-bottom:13px; border-bottom:1px solid var(--line-100, var(--line)); } .bk-panel-icon { border-radius:9px; } .bk-panel-head h2 { font-size:15px; letter-spacing:-.01em; } .bk-localfilter { padding-bottom:2px; } .bk-chip, .bk-qv { border-radius:7px; } .bk-chip.is-on, .bk-qv.is-on { color:#fff; background:var(--ink, #050505); border-color:var(--ink, #050505); } .bk-scard, .bk-qrow { border-radius:10px; box-shadow:none; } .bk-scard:hover, .bk-qrow:hover { box-shadow:none; border-color:var(--ink-400, var(--muted)); } .bk-intake-stat { border-radius:9px; } .bk-intake-stat.is-on { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset; } /* Fill kartu = tone tag statusnya (triad --pst-* yang sama dipakai badge .st-*), supaya status kebaca sekilas tanpa harus menyisir badge. Warna tetap didampingi label badge (§7.3: tak pernah warna-saja). Dipakai bersama oleh kartu booking (.bk-scard) dan kartu queue POS (.pqm) — satu peta warna, bukan dua. Konsumennya membaca --sc-fill/--sc-line/--sc-text. */ .bk-scard[data-st] { background:var(--sc-fill, var(--surface-0, var(--paper))); border-color:var(--sc-line, var(--line)); } .bk-scard[data-st]:hover { border-color:var(--sc-text, var(--ink-400, var(--muted))); } .bk-scard[data-st="new"], .pqm[data-st="new"] { --sc-fill:var(--pst-success-bg); --sc-line:var(--pst-success-border); --sc-text:var(--pst-success-text); } .bk-scard[data-st="reviewing"], .pqm[data-st="reviewing"] { --sc-fill:var(--pst-purple-bg); --sc-line:var(--pst-purple-border); --sc-text:var(--pst-purple-text); } .bk-scard[data-st="contacted"], .pqm[data-st="contacted"] { --sc-fill:var(--pst-info-bg); --sc-line:var(--pst-info-border); --sc-text:var(--pst-info-text); } .bk-scard[data-st="tentative"], .pqm[data-st="tentative"], .bk-scard[data-st="pending_payment"], .pqm[data-st="pending_payment"] { --sc-fill:var(--pst-warning-bg); --sc-line:var(--pst-warning-border); --sc-text:var(--pst-warning-text); } .bk-scard[data-st="partially_paid"], .pqm[data-st="partially_paid"], .bk-scard[data-st="rescheduled"], .pqm[data-st="rescheduled"] { --sc-fill:var(--pst-orange-bg); --sc-line:var(--pst-orange-border); --sc-text:var(--pst-orange-text); } .bk-scard[data-st="paid"], .pqm[data-st="paid"] { --sc-fill:var(--pst-mint-bg); --sc-line:var(--pst-mint-border); --sc-text:var(--pst-mint-text); } .bk-scard[data-st="confirmed"], .pqm[data-st="confirmed"] { --sc-fill:var(--pst-blue-bg); --sc-line:var(--pst-blue-border); --sc-text:var(--pst-blue-text); } .bk-scard[data-st="cancelled"], .pqm[data-st="cancelled"] { --sc-fill:var(--pst-danger-bg); --sc-line:var(--pst-danger-border); --sc-text:var(--pst-danger-text); } .bk-scard[data-st="payment_expired"], .pqm[data-st="payment_expired"], .bk-scard[data-st="completed"], .pqm[data-st="completed"] { --sc-fill:var(--pst-neutral-bg); --sc-line:var(--pst-neutral-border); --sc-text:var(--pst-neutral-text); } /* Elemen dalam kartu ikut tone: avatar & divider pakai garis tone, badge/chip dinaikkan ke surface polos supaya tetap kontras di atas fill berwarna. */ .bk-scard[data-st] .bk-scard-av { background:var(--surface-0, var(--paper)); border-color:var(--sc-line, var(--line)); color:var(--sc-text, var(--text-muted, var(--muted))); } .bk-scard[data-st] .bk-scard-div { background:var(--sc-line, var(--line)); } .bk-scard[data-st] .badge-st { background:var(--surface-0, var(--paper)); } /* Rail attention (danger/warning) tetap menang di border supaya sinyalnya tak hilang. */ .bk-scard[data-st].bk-rail--danger { border-color:var(--tag-danger-border); } .bk-scard[data-st].bk-rail--warning { border-color:var(--tag-warning-border); } .bk-scard[data-st].bk-rail--danger:hover { border-color:var(--tag-danger-text); } .bk-scard[data-st].bk-rail--warning:hover { border-color:var(--tag-warning-text); } .bk-toolbox { padding:18px; margin-bottom:14px; background:var(--surface-0, var(--paper)); border:1px solid var(--line-200, var(--line)); border-radius:var(--bk-radius); } .bk-toolbox-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:13px; } .bk-toolbox-head .bk-toolbox-kicker { margin-bottom:5px; } .bk-toolbox-head h3 { margin:0; font-size:15px; font-weight:720; letter-spacing:-.01em; } .bk-toolbox-hint { color:var(--text-subtle, var(--muted)); font-family:var(--font-mono); font-size:10px; } .bk-toolbox .bk-quickviews { gap:6px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line-100, var(--line)); } .bk-toolbox .bk-qv { padding:7px 11px; font-size:12px; } /* Quick view membawa warna status filternya (triad --tag-* dari DS): urgensi kebaca sebelum teks dibaca. Chip aktif tetap ink solid supaya "yang sedang dipakai" satu bahasa dengan chip lain di modul ini. */ .bk-toolbox .bk-qv[data-qv="action"] { color:var(--tag-danger-text); background:var(--tag-danger-bg); border-color:var(--tag-danger-border); } .bk-toolbox .bk-qv[data-qv="issue"] { color:var(--tag-pink-text); background:var(--tag-pink-bg); border-color:var(--tag-pink-border); } .bk-toolbox .bk-qv[data-qv="payment_due"] { color:var(--tag-warning-text); background:var(--tag-warning-bg); border-color:var(--tag-warning-border); } .bk-toolbox .bk-qv[data-qv="needs_scheduling"] { color:var(--tag-orange-text); background:var(--tag-orange-bg); border-color:var(--tag-orange-border); } .bk-toolbox .bk-qv[data-qv="intake_today"] { color:var(--tag-blue-text); background:var(--tag-blue-bg); border-color:var(--tag-blue-border); } .bk-toolbox .bk-qv[data-qv="session_today"] { color:var(--tag-info-text); background:var(--tag-info-bg); border-color:var(--tag-info-border); } .bk-toolbox .bk-qv[data-qv="upcoming7"] { color:var(--tag-purple-text); background:var(--tag-purple-bg); border-color:var(--tag-purple-border); } .bk-toolbox .bk-qv[data-qv="completed"] { color:var(--tag-success-text); background:var(--tag-success-bg); border-color:var(--tag-success-border); } .bk-toolbox .bk-qv[data-qv="archived"] { color:var(--tag-neutral-text); background:var(--tag-neutral-bg); border-color:var(--tag-neutral-border); } .bk-toolbox .bk-qv[data-qv]:hover { border-color:currentColor; } .bk-toolbox .bk-qv.is-on { color:#fff; background:var(--ink, #050505); border-color:var(--ink, #050505); } .bk-filter-grid { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:0; } .bk-filter-grid > * { flex:0 1 auto; } .bk-filter-grid .bk-search-wide { flex:1 1 300px; min-width:240px; } .bk-filter-grid select { flex:1 1 145px; min-width:130px; } .bk-filter-grid .filter-date { flex:0 1 155px; } .bk-filter-grid .search-box, .bk-filter-grid select, .bk-filter-grid .filter-date, .bk-filter-grid .abtn, .bk-filter-grid .seg, .bk-filter-grid .db-size select { min-height:38px; border-color:var(--border-input, var(--line)); border-radius:8px; } .bk-filter-grid .seg { padding:3px; } .bk-toolbox .bk-activechips { margin:12px 0 0; padding-top:12px; border-top:1px dashed var(--line-200, var(--line)); } .bk-status-pop { top:calc(100% + 8px); border-radius:10px; border-color:var(--line-200, var(--line)); box-shadow:0 18px 48px rgba(17,18,20,.14); } .bk-database-panel { border-color:var(--line-200, var(--line)); border-radius:var(--bk-radius); box-shadow:none; } .bk-database-panel .panel-head { min-height:65px; padding:14px 18px; } .bk-database-panel .panel-head .bk-toolbox-kicker { margin-bottom:3px; } .bk-database-panel .panel-head h2 { font-size:15px; } .bk-database-panel .tbl th { background:var(--surface-50, var(--paper-warm)); } .bk-database-panel .tbl td { padding-top:14px; padding-bottom:14px; } .bk-database-panel .tbl tr.clickable:hover td { background:var(--surface-50, var(--paper-warm)); } .booking-card, .booking-col { border-color:var(--line-200, var(--line)); box-shadow:none; } /* Kolom board diwarnai statusnya: judul kolom pakai badge-st (triad --tag-* per status) dan kepala kolom mengambil hairline yang sama, jadi kanban terbaca per warna. */ .booking-col .board-head { gap:8px; background:var(--surface-0,var(--paper)); } .booking-col .board-head .badge-st { font-size:11.5px; } .booking-card:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(17,18,20,.06); } /* Grid kartu Database Booking memakai unit .sl-board-card (lihat bookingCard() di admin.js) — samakan perilaku kontainernya dengan .sl-gallery: tinggi kartu diratakan per baris. Kelas .booking-card lama tinggal dipakai board/kanban. */ .booking-card-grid > .sl-board-card { height:100%; } /* ---- Tabel Database Booking: kolom bernapas, sel tidak saling tabrak ---- Sebelumnya kode submission & label jadwal pecah 2 baris sementara sel Payment dan Status menumpuk chip tanpa jarak, jadi tinggi baris tak beraturan. */ .bk-database-panel .tbl td { padding:14px; vertical-align:middle; } .bk-database-panel .tbl th { padding:12px 14px; white-space:nowrap; } .bk-database-panel .tbl .sid { display:inline-flex; align-items:center; white-space:nowrap; letter-spacing:-.01em; } .bk-database-panel .tbl td[data-l="Submission"] { width:1%; white-space:nowrap; } .bk-database-panel .tbl td[data-l="Klien"] { min-width:170px; } .bk-database-panel .tbl td[data-l="Layanan"] { min-width:190px; } .bk-database-panel .tbl td[data-l="Jadwal"] { width:1%; white-space:nowrap; font-variant-numeric:tabular-nums; } .bk-database-panel .tbl td[data-l="Payment"] { width:1%; } .bk-database-panel .tbl td[data-l="Payment"] .sub { display:block; margin-top:4px; white-space:nowrap; } /* Sel status = baris chip: jarak tetap 6px & boleh turun baris tanpa menempel. */ .bk-database-panel .tbl td[data-l="Status"] { min-width:190px; } .bk-database-panel .tbl td[data-l="Status"] > * { vertical-align:middle; } .bk-database-panel .tbl td[data-l="Status"] { line-height:2.1; } .bk-database-panel .tbl td[data-l="Status"] .badge-st, .bk-database-panel .tbl td[data-l="Status"] .bk-attn, .bk-database-panel .tbl td[data-l="Status"] .pay-chip { margin-right:6px; } .bk-database-panel .tbl .nm { line-height:1.35; } .bk-database-panel .tbl .sub { margin-top:3px; line-height:1.35; } /* Rail perhatian diberi jarak dari kolom centang supaya tidak menempel isi sel. */ .bk-database-panel tr.bk-tr-attn td:first-child { padding-left:18px; } /* Detail booking dan seluruh popup turunannya berbagi satu bahasa layer. */ .bk-detail-back, .modal-back.center.booking-layer, .uic-back.booking-layer { background:rgba(17,18,20,.48); backdrop-filter:blur(6px); } .bk-detail { width:1040px; border-color:var(--line-200, var(--line)); border-radius:16px; box-shadow:0 28px 80px rgba(17,18,20,.24); } .bk-detail-head { padding:18px 20px; background:var(--surface-0, var(--paper)); } .bk-detail-body { padding:18px 20px 22px; background:var(--surface-50, #f7f8fa); } .bk-detail-schedule { border-radius:10px; } .bk-sec, .bk-side-card { border-color:var(--line-200, var(--line)); border-radius:10px; } .bk-sec-h { padding:11px 13px; background:var(--surface-0, var(--paper)); } .bk-sec-ic { background:var(--surface-50, var(--paper-warm)); } .bk-side-card--payment { color:#fff; background:var(--ink, #050505); border-color:var(--ink, #050505); padding:16px; } .bk-side-card--payment .bk-side-h { color:#b9bdc6; } .bk-side-card--payment .bk-side-pay { color:#fff; } .bk-side-card--payment .bk-side-pay--due { margin-top:8px; padding-top:11px; border-top:1px solid #35373d; color:var(--identity-yellow, #FFF700); } .bk-side-card--status { background:var(--surface-0, var(--paper)); } .bk-detail-foot { padding:13px 20px; background:var(--surface-0, var(--paper)); } .bk-more-menu { border-radius:10px; border-color:var(--line-200, var(--line)); box-shadow:0 18px 48px rgba(17,18,20,.16); } .modal-center.booking-layer { max-width:600px; overflow:hidden; background:var(--surface-0, var(--paper)); border:1px solid var(--line-200, var(--line)); border-radius:16px; box-shadow:0 28px 80px rgba(17,18,20,.24); } .modal-center.booking-layer.wide { max-width:720px; } .modal-center.booking-layer .mc-head { min-height:64px; padding:15px 18px; background:var(--surface-0, var(--paper)); } .modal-center.booking-layer .mc-head h3 { font-family:var(--font-display, var(--font-sans)); font-size:17px; letter-spacing:-.015em; } .modal-center.booking-layer .mc-head .x { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--line-200, var(--line)); border-radius:8px; } .modal-center.booking-layer .mc-body { padding:20px; background:var(--surface-50, #f7f8fa); } .modal-center.booking-layer .mc-foot { min-height:64px; padding:13px 18px; background:var(--surface-0, var(--paper)); } .modal-center.booking-layer .frow { margin-bottom:14px; } .modal-center.booking-layer .frow label { margin-bottom:7px; font-size:11.5px; font-weight:650; color:var(--text-muted, var(--muted)); } .modal-center.booking-layer .ctrl { min-height:42px; border-color:var(--border-input, var(--line)); border-radius:8px; background:var(--surface-0, var(--paper)); } .modal-center.booking-layer .fhint { border-radius:8px; } .uic-card.booking-layer { max-width:440px; padding:22px; border:1px solid var(--line-200, var(--line)); border-radius:14px; box-shadow:0 28px 80px rgba(17,18,20,.24); } .uic-card.booking-layer .uic-title { font-family:var(--font-display, var(--font-sans)); font-size:18px; letter-spacing:-.02em; } @media (max-width:900px) { .bk-filter-grid .bk-search-wide { flex-basis:100%; } } @media (max-width:768px) { .bk-workspace > .bk-tabs { overflow-x:auto; flex-wrap:nowrap; } .bk-stats { gap:8px; } .bk-stat { min-height:112px; padding:13px; } .bk-stat-num { margin-top:12px; font-size:29px; } .bk-toolbox { padding:14px; } .bk-toolbox-head { align-items:flex-start; } .bk-toolbox-hint { display:none; } .bk-toolbox .bk-quickviews { flex-wrap:nowrap; overflow-x:auto; margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; scrollbar-width:none; } .bk-toolbox .bk-qv { flex:none; } .bk-filter-grid > *, .bk-filter-grid select, .bk-filter-grid .filter-date { flex:1 1 calc(50% - 4px); min-width:0; } .bk-filter-grid .bk-search-wide { flex-basis:100%; min-width:100%; } .bk-detail-body { background:var(--surface-50, #f7f8fa); } .modal-center.booking-layer { max-width:100%; border-radius:16px 16px 0 0; } } @media (max-width:480px) { .bk-stat { grid-template-columns:minmax(0,1fr) 34px; min-height:106px; } .bk-stat-icon { width:34px; height:34px; } .bk-stat-desc { max-width:16ch; } .bk-filter-grid > *, .bk-filter-grid select, .bk-filter-grid .filter-date { flex-basis:100%; } .bk-filter-grid .seg { width:100%; } .bk-filter-grid .seg-btn { flex:1; justify-content:center; } .bk-database-panel { border-radius:10px; } .modal-center.booking-layer .mc-body { padding:16px; } .modal-center.booking-layer .mc-foot { flex-wrap:wrap; } .modal-center.booking-layer .mc-foot .abtn { flex:1; justify-content:center; } .uic-card.booking-layer { border-radius:14px 14px 0 0; } } /* ══ PRD 12.55 — Booking Order (Order Group v2) ══ Chip Order pada list/drawer Bookings + tone blok HOLD di kalender resource. Additive; tanpa flag ON tak ada elemen yang memakai kelas ini. */ /* Chip Order = Fresh Tag varian ink (fill gelap) — token, bukan #fff/--r-chip legacy. */ .ord-chip{display:inline-flex;align-items:center;gap:4px;color:var(--primary-contrast,var(--paper));background:var(--primary,var(--ink));border-color:var(--primary,var(--ink));border-radius:var(--radius-pill,100px)} .cal-res-ev.ev-hold{background:repeating-linear-gradient(45deg,rgba(0,0,0,.05),rgba(0,0,0,.05) 6px,rgba(0,0,0,.12) 6px,rgba(0,0,0,.12) 12px);border-left-style:dashed;opacity:.85} .cal-res-ev.ev-hold .rev-n{font-style:italic} /* ============================================================ SCHEDULE — VIRCANSA_OS component-library alignment (2026-07) Calendar, list, global blocks, popovers, dialogs, export layer. ============================================================ */ .sched-workspace { width:100%; max-width:1480px; margin:0 auto; } .sched-page-signal { flex:none; display:flex; align-items:center; gap:10px; min-width:218px; padding:11px 13px; color:#fff; background:var(--ink); border:1px solid var(--ink); border-radius:12px; box-shadow:var(--shadow-card); } .sched-page-signal > svg { flex:none; color:var(--identity-yellow); } .sched-page-signal span { display:flex; flex-direction:column; gap:1px; } .sched-page-signal small { color:rgba(255,255,255,.58); font-family:var(--font-mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase; } .sched-page-signal b { color:#fff; font-size:12px; font-weight:650; } .sched-subnav { margin:0 0 18px; padding:4px; border:1px solid var(--line-200, var(--line)); border-radius:11px; background:var(--surface-0, var(--paper)); box-shadow:var(--shadow-card); } .sched-subnav a { min-height:38px; border-radius:8px; transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease; } .sched-subnav a:hover { background:var(--surface-50, var(--paper-warm)); } .sched-subnav a:active { transform:translateY(1px); } .sched-subnav a.active { color:#fff; background:var(--ink); box-shadow:var(--shadow-1); } .sched-subnav a.active svg { color:var(--identity-yellow); } .sched-subnav a:focus-visible { outline:2px solid var(--electric-blue); outline-offset:2px; } .sched-view { min-width:0; } /* Brand context + calendar control deck */ .sched-view--calendar .cal-context-card { margin-bottom:16px; padding:18px 20px; border-radius:14px; box-shadow:var(--shadow-card); } .sched-view--calendar .cal-context-copy h2 { margin-top:5px; font-family:var(--font-display, var(--font-sans)); font-size:21px; letter-spacing:-.025em; } .sched-view--calendar .cal-context-copy p { margin-top:4px; max-width:58ch; } .sched-control-deck { margin-bottom:14px; padding:15px 16px 14px; background:var(--surface-0, var(--paper)); border:1px solid var(--line-200, var(--line)); border-radius:14px; box-shadow:var(--shadow-card); } .sched-control-label { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:13px; padding-bottom:11px; border-bottom:1px solid var(--line-100, var(--line-soft)); } .sched-control-label p { margin:0; color:var(--text-subtle, var(--muted)); font-size:11.5px; } .sched-control-deck .cal-toolbar { margin-bottom:12px; } .sched-control-deck .cal-filterbar--row { margin:0; padding-top:12px; border-top:1px solid var(--line-100, var(--line-soft)); } .sched-control-deck .cal-navico,.sched-control-deck .cal-datepill,.sched-control-deck .cal-filterbar select,.sched-control-deck .cal-filter-reset { min-height:36px; border-color:var(--border-input, var(--line)); border-radius:8px; } .sched-control-deck .cal-datepill { height:36px; padding-inline:13px; } .sched-control-deck .cal-navico { width:36px; height:36px; } .sched-control-deck .seg { padding:3px; background:var(--surface-50, var(--paper-warm)); border:1px solid var(--line-100, var(--line-soft)); border-radius:10px; } .sched-control-deck .seg-btn { min-height:32px; border-radius:7px; } .sched-control-deck .seg-btn.active { color:#fff; background:var(--ink); } .sched-control-deck .seg-btn.active svg { color:var(--identity-yellow); } .sched-control-deck :is(button,select):focus-visible { outline:2px solid var(--electric-blue); outline-offset:2px; } .cal-main-panel { overflow:hidden; border-color:var(--line-200, var(--line)); border-radius:14px; box-shadow:var(--shadow-card); } .cal-main-head { min-height:68px; padding:13px 16px; background:var(--surface-0, var(--paper)); } .cal-main-head h3 { margin:4px 0 0; color:var(--text-strong, var(--ink)); font-family:var(--font-display, var(--font-sans)); font-size:18px; letter-spacing:-.02em; } .sched-live-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; color:var(--pst-success-text); background:var(--pst-success-bg); border:1px solid var(--pst-success-border); border-radius:7px; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .sched-live-chip svg { color:var(--pst-success-text); } .cal-main-panel .cal-month,.cal-main-panel .cal-week,.cal-main-panel .cal-res-wrap { border:0; border-radius:0; } .cal-main-panel .cal-wdrow { background:var(--surface-50, var(--paper-warm)); } .cal-main-panel .cal-wd { padding-block:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-align:center; } .cal-main-panel .cal-cell { transition:background .16s ease,box-shadow .16s ease; } .cal-main-panel .cal-cell:hover { background:var(--surface-50, var(--paper-warm)); box-shadow:inset 0 0 0 1px var(--line-200, var(--line)); } .cal-main-panel :is(.cal-ev,.cal-scard,.cal-day-row,.cal-res-ev) { transition:transform .16s ease,box-shadow .16s ease,filter .16s ease; } .cal-main-panel :is(.cal-ev,.cal-scard,.cal-day-row,.cal-res-ev):hover { transform:translateY(-1px); filter:saturate(.96); } .cal-main-panel :is(.cal-ev,.cal-scard,.cal-day-row,.cal-res-ev):focus-visible { outline:2px solid var(--electric-blue); outline-offset:2px; } .cal-legend.cal-legend-card { margin-top:12px; padding:11px 14px; border-color:var(--line-200, var(--line)); border-radius:10px; background:var(--surface-0, var(--paper)); box-shadow:none; } .minical-pop { width:280px; padding:14px; border-color:var(--line-200, var(--line)); border-radius:14px; box-shadow:0 24px 70px rgba(17,18,20,.2); } .mc-day.sel { color:var(--ink); background:var(--identity-yellow); box-shadow:inset 0 0 0 1px var(--identity-yellow-shadow); } .mc-day:focus-visible,.mc-mon:focus-visible,.mc-today:focus-visible { outline:2px solid var(--electric-blue); outline-offset:1px; } /* Attention and data-oriented schedule views */ .sched-view--calendar .cal-attn-shell { margin-bottom:16px; border-left-width:3px; border-radius:14px; box-shadow:var(--shadow-card); } .sched-view--calendar .cal-attn-item { border-radius:9px; box-shadow:none; } .sched-notice { margin-bottom:14px; padding:12px 14px; border:1px solid var(--line-200, var(--line)); border-left:3px solid var(--identity-yellow-shadow); border-radius:10px; background:var(--identity-yellow-soft); color:var(--text-muted, var(--ink-soft)); } /* FE-10 — kicker kini boleh berupa

(heading nyata untuk daftar landmark pembaca layar), jadi margin bawaan heading harus dinolkan di sini; kalau tidak, setiap seksi composer mendapat jarak atas/bawah yang tidak diminta desain. */ .sched-kicker { display:block; margin:0; color:var(--text-subtle, var(--ink-400)); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em; line-height:1.3; text-transform:uppercase; } .sched-list-deck,.sched-block-tools { margin-bottom:14px; padding:15px; background:var(--surface-0, var(--paper)); border:1px solid var(--line-200, var(--line)); border-radius:14px; box-shadow:var(--shadow-card); } .sched-list-deck-head,.sched-block-tools { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; } .sched-list-deck-head h3,.sched-block-tools h3 { margin:4px 0 0; color:var(--text-strong, var(--ink)); font-size:15px; letter-spacing:-.01em; } .sched-list-deck-head > span { color:var(--text-subtle, var(--muted)); font-family:var(--font-mono); font-size:10px; } .sched-status-strip { flex-wrap:nowrap; overflow-x:auto; margin:13px -2px 0; padding:0 2px 11px; border-bottom:1px solid var(--line-100, var(--line-soft)); scrollbar-width:none; } .sched-status-strip::-webkit-scrollbar { display:none; } .sched-status-strip .status-chip { flex:none; min-height:36px; border-radius:8px; } .sched-status-strip .status-chip.active { border-color:var(--ink); background:var(--ink); color:#fff; } .sched-status-strip .status-chip.active b { color:var(--identity-yellow); } .sched-list-filters { margin:12px 0 0; } .sched-list-filters .search-box { flex:1 1 300px; min-width:240px; } .sched-list-filters select,.sched-list-filters .filter-date { min-height:38px; border-color:var(--border-input, var(--line)); border-radius:8px; } .sched-block-tools { align-items:center; } .sched-block-tools > .filters { margin:0; } .sched-data-panel { overflow:hidden; border-color:var(--line-200, var(--line)); border-radius:14px; box-shadow:var(--shadow-card); } .sched-data-panel .panel-head { min-height:66px; padding:13px 16px; } .sched-data-panel .panel-head h2 { margin:4px 0 0; font-family:var(--font-display, var(--font-sans)); font-size:17px; letter-spacing:-.015em; } .sched-data-panel .tbl thead th { background:var(--surface-50, var(--paper-warm)); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; } .sched-data-panel .tbl tbody tr { transition:background .15s ease; } .sched-data-panel .tbl tbody tr:hover { background:var(--surface-50, var(--paper-warm)); } .sched-av { border-radius:8px; background:var(--identity-yellow-soft); border-color:var(--identity-yellow-shadow); } /* Schedule-owned layers: block form, day list, confirm, export. */ .modal-back.center.schedule-layer,.uic-back.schedule-layer,.sx-overlay.schedule-layer { background:rgba(5,5,5,.42); backdrop-filter:blur(3px); } .modal-center.schedule-layer { width:min(94vw,580px); max-height:min(88dvh,820px); overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:20px; box-shadow:0 30px 90px rgba(5,5,5,.3); } .modal-center.schedule-layer.wide { width:min(94vw,920px); max-width:920px; } .modal-center.schedule-layer .mc-head,.modal-center.schedule-layer .modal-head { min-height:66px; padding:15px 18px; background:var(--surface-0, var(--paper)); border-bottom:1px solid var(--line-100, var(--line-soft)); } .modal-center.schedule-layer :is(.mc-head,.modal-head) h3,.modal-center.schedule-layer .modal-head h2 { margin:0; font-family:var(--font-display, var(--font-sans)); font-size:19px; letter-spacing:-.02em; } .modal-center.schedule-layer .mc-body,.modal-center.schedule-layer .modal-body { overflow:auto; padding:20px; background:var(--surface-50, #f7f8fa); } .modal-center.schedule-layer .mc-foot { min-height:66px; padding:13px 18px; background:var(--surface-0, var(--paper)); border-top:1px solid var(--line-100, var(--line-soft)); } .modal-center.schedule-layer .x,.modal-center.schedule-layer .icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--line-200, var(--line)); border-radius:8px; background:var(--surface-0, var(--paper)); } .modal-center.schedule-layer .ctrl { min-height:42px; border-color:var(--border-input, var(--line)); border-radius:8px; background:var(--surface-0, var(--paper)); } .modal-center.schedule-layer .frow > label { margin-bottom:7px; color:var(--text-muted, var(--muted)); font-size:11.5px; font-weight:650; } .modal-center.schedule-layer .wd-chip { border-radius:8px; } .modal-center.schedule-layer .wd-chip.on { color:#fff; background:var(--ink); border-color:var(--ink); } .sched-modal-intro { display:flex; align-items:flex-start; gap:10px; margin-bottom:17px; padding:12px; color:var(--text-muted, var(--muted)); background:var(--identity-yellow-soft); border:1px solid var(--identity-yellow-shadow); border-radius:9px; } .sched-modal-intro > svg { flex:none; color:var(--ink); } .sched-modal-intro span { display:block; color:var(--ink); font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .sched-modal-intro p { margin:3px 0 0; font-size:11.5px; line-height:1.45; } .uic-card.schedule-layer { max-width:460px; padding:22px; border:1px solid var(--line-200, var(--line)); border-radius:16px; box-shadow:0 28px 80px rgba(5,5,5,.28); } .uic-card.schedule-layer .uic-title { font-family:var(--font-display, var(--font-sans)); font-size:19px; letter-spacing:-.02em; } .cal-day-modal { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .sx-overlay.schedule-layer { z-index:220; } .sx-overlay.schedule-layer .sx-toolbar { min-height:64px; padding:10px 16px; border-bottom-color:var(--line-200, var(--line)); box-shadow:0 8px 30px rgba(5,5,5,.08); } .sx-overlay.schedule-layer .sx-scroll { padding:24px; } .sx-overlay.schedule-layer .sx-sheet { max-width:840px; border:1px solid var(--line-200, var(--line)); border-radius:16px; box-shadow:0 28px 80px rgba(5,5,5,.28); } .sx-overlay.schedule-layer .sx-head { border-radius:12px 12px 0 0; } @media (max-width:900px) { .sched-page-signal { min-width:190px; } .sched-block-tools { align-items:flex-start; flex-direction:column; } .sched-block-tools > .filters { width:100%; } } @media (max-width:760px) { .sched-page-signal { width:100%; min-width:0; } .sched-subnav { display:flex; overflow-x:auto; scrollbar-width:none; } .sched-subnav::-webkit-scrollbar { display:none; } .sched-subnav a { flex:none; } .sched-view--calendar .cal-context-card { padding:15px; } .sched-control-deck { padding:14px; } .sched-control-label { align-items:flex-start; flex-direction:column; gap:3px; } .sched-control-deck .cal-filterbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .sched-control-deck .cal-filter-kicker { grid-column:1/-1; } .sched-control-deck .cal-color-control { grid-column:1/-1; } .sched-control-deck .cal-filter-reset { justify-content:center; } .sched-list-deck-head { align-items:flex-start; } .sched-list-filters .search-box { flex-basis:100%; min-width:100%; } .sched-data-panel .panel-body { overflow-x:auto; } .modal-center.schedule-layer { align-self:flex-end; width:100%; max-width:100%; max-height:92dvh; border-radius:18px 18px 0 0; } .modal-center.schedule-layer.wide { width:100%; max-width:100%; } .uic-card.schedule-layer { align-self:flex-end; width:100%; max-width:100%; margin:0; border-radius:16px 16px 0 0; } .sx-overlay.schedule-layer .sx-toolbar { align-items:stretch; } .sx-overlay.schedule-layer .sx-toolbar .grow { display:none; } .sx-overlay.schedule-layer .sx-scroll { padding:12px; } } @media (max-width:480px) { .sched-list-deck { padding:14px; } .sched-list-deck-head > span { display:none; } .sched-control-deck .cal-filterbar select { width:100%; } .cal-main-head { min-height:62px; } .sched-live-chip { display:none; } .modal-center.schedule-layer .mc-body,.modal-center.schedule-layer .modal-body { padding:16px; } .modal-center.schedule-layer .mc-foot { flex-wrap:wrap; } .modal-center.schedule-layer .mc-foot .abtn { flex:1; justify-content:center; } .cal-day-modal { grid-template-columns:1fr; } .sx-overlay.schedule-layer .sx-toolbar > .abtn { flex:1 1 calc(50% - 8px); justify-content:center; } .sx-overlay.schedule-layer .sx-tdate,.sx-overlay.schedule-layer .sx-toggle { flex:1 1 100%; } } /* Schedule v4 — direct component mapping to section 14 / App Shell. */ .sched-subnav { display:flex; gap:24px; margin:0 0 16px; padding:0; background:transparent; border:0; border-bottom:1px solid var(--line-200, var(--line)); border-radius:0; box-shadow:none; } .sched-subnav a { position:relative; display:inline-flex; min-height:42px; padding:0 1px 11px; color:var(--text-subtle, var(--muted)); border:0; border-radius:0; background:transparent; font-size:13px; font-weight:600; } .sched-subnav a:hover { color:var(--ink); background:transparent; } .sched-subnav a.active { color:var(--ink); background:transparent; box-shadow:none; } .sched-subnav a.active svg { color:var(--ink); } .sched-subnav a.active::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--ink); border-radius:2px 2px 0 0; } .sched-subnav a.active::before { display:none; } .sched-calendar-card { overflow:hidden; padding:24px; background:var(--surface-0, var(--paper)); border:1px solid var(--line-200, var(--line)); border-radius:14px; box-shadow:var(--shadow-card); } .sched-calendar-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:16px; } .sched-calendar-head h3 { margin:4px 0 0; color:var(--text-strong, var(--ink)); font-family:var(--font-display, var(--font-sans)); font-size:19px; font-weight:700; letter-spacing:-.01em; } .sched-calendar-toolbar { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line-100, var(--line-soft)); border-bottom:1px solid var(--line-100, var(--line-soft)); } .sched-calendar-toolbar .seg { flex:none; padding:3px; border:1px solid var(--line-100, var(--line-soft)); border-radius:10px; background:var(--surface-50, var(--paper-warm)); } .sched-calendar-toolbar .seg-btn { min-height:32px; border-radius:7px; } .sched-calendar-toolbar .seg-btn.active { color:#fff; background:var(--ink); } .sched-calendar-toolbar .seg-btn.active svg { color:var(--identity-yellow); } .sched-calendar-card .cal-filterbar { margin:0; padding:12px 0; border-bottom:1px solid var(--line-100, var(--line-soft)); } .sched-calendar-card :is(.cal-navico,.cal-datepill,.cal-filterbar select,.cal-filter-reset) { min-height:34px; border-color:var(--border-input, var(--line)); border-radius:8px; background:var(--surface-0, var(--paper)); } .sched-calendar-frame { overflow:auto; margin-top:16px; border:1px solid var(--line-200, var(--line)); border-radius:10px; background:var(--surface-0, var(--paper)); } .sched-calendar-frame > :is(.cal-month,.cal-week,.cal-res-wrap) { border:0; border-radius:0; } .sched-calendar-frame .cal-wdrow { background:var(--surface-50, var(--paper-warm)); } .sched-calendar-frame .cal-wd { padding-block:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-align:center; } .sched-calendar-frame :is(.cal-ev,.cal-scard,.cal-day-row,.cal-day-block,.cal-res-ev) { transition:transform .15s ease,box-shadow .15s ease; } .sched-calendar-frame :is(.cal-ev,.cal-scard,.cal-day-row,.cal-day-block,.cal-res-ev):hover { transform:translateY(-1px); box-shadow:var(--shadow-pop); } .sched-calendar-card > .cal-legend { margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line-100, var(--line-soft)); } .cal-day-timeline { display:grid; grid-template-columns:58px minmax(520px,1fr); min-height:var(--day-height); padding:18px 18px 24px 8px; } .cal-day-gutter { position:relative; height:var(--day-height); } .cal-day-gutter > span { position:absolute; right:10px; color:var(--ink-300); font-family:var(--font-mono); font-size:9.5px; transform:translateY(-50%); } .cal-day-track { position:relative; height:var(--day-height); border-left:1px solid var(--line-100); background-image:repeating-linear-gradient(to bottom,var(--line-100) 0 1px,transparent 1px 64px); } .cal-day-block { position:absolute; right:8px; left:7px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; overflow:hidden; padding:7px 10px; text-align:left; color:var(--sched-text); background:var(--sched-bg); border:1px solid var(--sched-border); border-radius:8px; cursor:pointer; font:inherit; } .cal-day-block-top { display:flex; align-items:center; gap:9px; width:100%; color:var(--sched-text); font-size:9.5px; opacity:.78; } .cal-day-block-top em { display:inline-flex; align-items:center; gap:5px; margin-left:auto; color:var(--ink-800); font-family:var(--font-mono); font-size:8.5px; font-style:normal; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .cal-day-block-top i { width:6px; height:6px; background:var(--accent-mint, var(--mint-green)); border-radius:50%; animation:vs-pulse-g 2s infinite; } .cal-day-block > b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; } .cal-day-block > small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; opacity:.8; } .cal-day-now { position:absolute; right:0; left:0; z-index:3; height:2px; background:var(--hot-red); pointer-events:none; } .cal-day-now em { position:absolute; right:5px; top:-16px; padding:1px 5px; color:#fff; background:var(--hot-red); border-radius:4px; font-family:var(--font-mono); font-size:9px; font-style:normal; } .sched-empty { display:flex; align-items:center; gap:14px; min-height:138px; padding:24px; } .sched-empty-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; color:var(--ink-600); background:var(--surface-50, var(--paper-warm)); border:1px solid var(--line-200, var(--line)); border-radius:10px; } .sched-empty > div { flex:1; min-width:0; } .sched-empty h3 { margin:0 0 3px; font-size:14px; } .sched-empty p { margin:0; color:var(--text-subtle, var(--muted)); font-size:12px; } .sched-view--calendar .cal-attn-shell { margin-bottom:16px; padding:0; overflow:hidden; border:1px solid var(--line-200, var(--line)); border-left:0; border-radius:14px; background:var(--surface-0, var(--paper)); box-shadow:var(--shadow-card); } .cal-attn-shell .cal-attn-top { align-items:center; margin:0; padding:14px 16px; border-bottom:1px solid var(--line-100, var(--line-soft)); } .cal-attn-list { display:flex; flex-direction:column; } .sched-view--calendar .cal-attn-item { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 16px; background:var(--surface-0, var(--paper)); border:0; border-bottom:1px solid var(--line-100, var(--line-soft)); border-left:3px solid var(--attn-border); border-radius:0; } .cal-attn-item:last-child { border-bottom:0; } .cal-attn-mark { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; color:var(--attn-text); background:var(--attn-bg); border:1px solid var(--attn-border); border-radius:8px; } .cal-attn-copy { min-width:0; } .cal-attn-copy .cal-attn-type { display:block; margin-bottom:2px; font-family:var(--font-mono); font-size:9px; } .cal-attn-copy h3 { margin:0; overflow:hidden; color:var(--ink); font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; } .cal-attn-copy p { margin:3px 0 0; overflow:hidden; color:var(--ink-500); font-size:10.5px; text-overflow:ellipsis; white-space:nowrap; } .cal-attn-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; } .sched-notice { display:flex; align-items:flex-start; gap:9px; } .sched-notice > svg { flex:none; margin-top:1px; } .sched-danger-action { color:var(--pst-danger-text)!important; border-color:var(--pst-danger-border)!important; background:var(--pst-danger-bg)!important; } .admin-top__tools .sched-action.abtn--dark { color:#fff; background:var(--ink); border-color:var(--ink); } .admin-top__tools .sched-action.abtn--dark:hover { color:#fff; background:var(--ink-800, #242424); } .sched-table-empty { display:flex; align-items:center; justify-content:center; gap:11px; min-height:132px; padding:24px; text-align:left; } .sched-table-empty > span { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; color:var(--ink-500); background:var(--surface-50, var(--paper-warm)); border:1px solid var(--line-200, var(--line)); border-radius:9px; } .sched-table-empty b,.sched-table-empty small { display:block; } .sched-table-empty b { color:var(--ink); font-size:13px; } .sched-table-empty small { margin-top:3px; color:var(--ink-400); font-size:11px; } .bk-detail-back.schedule-detail-layer { align-items:stretch; justify-content:flex-end; padding:0; background:rgba(5,5,5,.42); backdrop-filter:blur(3px); } .schedule-detail-layer .bk-detail { width:min(620px,100vw); max-width:100vw; max-height:100dvh; height:100dvh; border-width:0 0 0 1px; border-radius:0; box-shadow:-24px 0 70px rgba(5,5,5,.2); animation:schedDrawerIn .18s ease-out; } .schedule-detail-layer .bk-detail-head-main { grid-template-columns:1fr; gap:12px; } .schedule-detail-layer .bk-detail-grid { grid-template-columns:1fr; } .schedule-detail-layer .bk-detail-side { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .schedule-detail-layer .bk-side-attn { grid-column:1/-1; } @keyframes schedDrawerIn { from { transform:translateX(28px); opacity:.65; } to { transform:none; opacity:1; } } @media (max-width:900px) { .sched-calendar-head { flex-direction:column; } .sched-calendar-toolbar { align-items:flex-start; flex-direction:column; } .sched-calendar-toolbar .grow { display:none; } .sched-calendar-toolbar .seg { width:100%; overflow-x:auto; } } @media (max-width:760px) { .sched-subnav { gap:20px; margin-inline:-2px; } .sched-calendar-card { padding:16px; } .sched-calendar-head .cal-datenav { width:100%; } .sched-calendar-head .cal-datepill { flex:1; min-width:0; } .sched-calendar-card .cal-filterbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .sched-calendar-card .cal-filter-kicker,.sched-calendar-card .cal-color-control { grid-column:1/-1; } .sched-calendar-card .cal-filterbar .grow { display:none; } .sched-view--calendar .cal-attn-item { grid-template-columns:30px minmax(0,1fr); } .cal-attn-actions { grid-column:2; justify-content:flex-start; } .schedule-detail-layer .bk-detail { width:100vw; } } @media (max-width:480px) { .sched-subnav a { font-size:12px; } .sched-calendar-card .cal-filterbar { grid-template-columns:1fr; } .sched-calendar-card .cal-filter-kicker,.sched-calendar-card .cal-color-control { grid-column:1; } .sched-calendar-toolbar .seg-btn { flex:1 0 auto; } .sched-empty { align-items:flex-start; flex-wrap:wrap; } .sched-empty .abtn { width:100%; justify-content:center; } .schedule-detail-layer .bk-detail-side { grid-template-columns:1fr; } } /* ══ PRD 12.43.02 — Akun Klien v2: badge multi-sumbu, thumbnail tier, Customer Overview ══ Additive; hanya dipakai tab Overview/Members/Temporary/Pending/Conflicts + drawer akun. Badge = ikon + teks + SHAPE (bukan warna saja, §14.1); kontras teks ≥ AA. */ .acct-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;line-height:1; padding:4px 8px;margin:2px 3px 2px 0;border:1.5px solid currentColor;white-space:nowrap} .acct-badge svg{width:12px;height:12px;flex:none} .acct-badge.sh-pill,.acct-badge.sh-pill-outline{border-radius:999px} .acct-badge.sh-rect,.acct-badge.sh-rect-outline{border-radius:6px} .acct-badge.sh-shield{border-radius:10px 10px 12px 12px} .acct-badge.sh-bevel{border-radius:2px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)} .acct-badge.sh-pill-outline,.acct-badge.sh-rect-outline{background:transparent} .acct-badge.tn-red{color:#b42318;background:#fef3f2} .acct-badge.tn-orange{color:#b93815;background:#fff4ed} .acct-badge.tn-amber{color:#b54708;background:#fffaeb} .acct-badge.tn-mint{color:#067647;background:#ecfdf3} .acct-badge.tn-green{color:#085d3a;background:#dcfae6} .acct-badge.tn-blue{color:#175cd3;background:#eff8ff} .acct-badge.tn-neutral,.acct-badge.tn-slate{color:#475467;background:#f9fafb} .acct-badge.tn-indigo{color:#3538cd;background:#eef4ff} .acct-badge.tn-gold{color:#854d0e;background:#1d2939;color:#fbbf24} .acct-badge.tn-gold svg{color:#fbbf24} /* Thumbnail tier — default sistem deterministik per tier (§15.2) + initials fallback */ .acct-thumb{border-radius:8px;object-fit:cover;flex:none;display:inline-flex;align-items:center;justify-content:center} .acct-thumb--ini{font-weight:700;font-size:12px;letter-spacing:.02em;color:#fff;background:#475467} .acct-thumb--ini.tier-regular{background:linear-gradient(135deg,#64748b,#94a3b8)} .acct-thumb--ini.tier-member_basic{background:linear-gradient(135deg,#444ce7,#12b76a)} .acct-thumb--ini.tier-member_exclusive{background:linear-gradient(135deg,#1d2939,#4a1d96);color:#fbbf24} /* Customer Overview (§18.1): grid widget + chart ringan tanpa library */ .cov-kpi{margin-bottom:14px} .cov-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} @media(max-width:1100px){.cov-grid{grid-template-columns:1fr}} .cov-delta{font-weight:700;margin-left:4px} .cov-delta.up{color:#067647}.cov-delta.down{color:#b42318} .cov-trend{display:flex;align-items:flex-end;gap:2px;height:96px;padding:4px 0;overflow-x:auto} .cov-col{display:flex;flex-direction:column-reverse;width:100%;min-width:5px;max-width:26px;flex:1;cursor:pointer} .cov-col-t{background:#94a3b8} .cov-col-m{background:var(--brand,#F5C518);border-bottom:1px solid rgba(0,0,0,.15)} .cov-col:hover .cov-col-t{background:#64748b} .cov-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:#475467} .cov-legend span{display:inline-flex;align-items:center;gap:5px} .cov-sw{width:10px;height:10px;display:inline-block;border-radius:2px} .cov-sw-t{background:#94a3b8}.cov-sw-m{background:var(--brand,#F5C518)} .cov-row{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer} .cov-row-l{flex:0 0 150px;font-size:12.5px;color:#344054} .cov-row-v{flex:0 0 auto;font-size:12px;font-weight:600;color:#101828} .cov-bar{flex:1;height:14px;background:#f2f4f7;border-radius:4px;overflow:hidden;display:flex} .cov-bar i{display:block;height:100%;border-radius:4px} .cov-bar i.tier-regular{background:#94a3b8} .cov-bar i.tier-member_basic{background:#444ce7} .cov-bar i.tier-member_exclusive{background:#1d2939} .cov-funnel{background:var(--ink,#050505)} .cov-bar--stack{gap:1px} .cov-age{height:100%} .cov-age-0{background:#12b76a}.cov-age-1{background:#F5C518}.cov-age-2{background:#f79009}.cov-age-3{background:#b93815}.cov-age-4{background:#b42318} .cov-age-empty{flex:1;background:#f2f4f7} .acct-check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#344054} .pos-pax-warn { margin-top:6px; padding:7px 8px; border:1px solid #e8cb78; border-radius:6px; background:#fff8e4; color:#6b4900; line-height:1.45; } .pos-pax-bad { margin-top:6px; padding:7px 8px; border:1px solid #efaaa5; border-radius:6px; background:#fff1f0; color:#8a2119; } .pos-pax-upgrade { margin-left:5px; border:0; border-radius:5px; padding:4px 7px; background:#07563b; color:#fff; font:inherit; font-weight:800; cursor:pointer; } /* ============================================================ POSQ1 / POSLINEPAX (additive) — rail queue ber-tab + kartu ala rich-card kalender week (sched56), kartu identitas+detail merged, pax per kantong item. Semua selector baru — nol override destruktif. ============================================================ */ /* Rail queue diciutkan, register diberi ruang paling besar, kolom Detail (Total/Ringkasan) disempitkan lagi (feedback owner 14 Jul: kanan terlalu lebar). */ .pos-shell.pos-shell--3col { grid-template-columns: minmax(228px,.8fr) minmax(0,2.35fr) minmax(0,1.06fr); } /* Tab Booking / Trx / Invoice */ /* Kartu queue terstruktur (grid internal, aksen kiri status) */ .pqr-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; } .pqr-top b { min-width:0; font-size:12.5px; font-weight:760; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pqr-top em { flex:none; font-style:normal; font-size:11px; color:var(--muted); } .pqr-tags { display:flex; flex-wrap:wrap; gap:4px; align-items:center; } .pqr-chip { font-size:10.5px; padding:2px 7px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--muted); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pqr-client, .pqr-when { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-700,#333); min-width:0; } .pqr-client b { min-width:0; font-weight:680; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pqr-when { color:var(--muted); } .pqr-state { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:1px; } .pqr-state .badge-st { font-size:10.5px; padding:2.5px 8px; } .pqr-code { font-size:10px; color:var(--muted); letter-spacing:.02em; } .pqr--trx .pqr-top b { font-size:13px; } /* Kartu identitas + detail booking merged — KOMPAK (feedback owner 14 Jul: kurangi tinggi kartu ini biar kontainer Cart di bawah lebih lega/tinggi). Padding & gap dirapatkan, grid detail auto-fit packing biar lebih sedikit baris. */ .pos-detailcard--merged .pos-card__head { padding:8px 14px 6px; } .pos-detailcard--merged .pos-ident-wrap { padding:8px 14px; } .pos-detailcard--merged .pos-ident-fields { gap:8px; } .pos-detailcard--merged .pos-ident--linked { padding:8px 12px; } .pos-detailcard--merged .pos-detail-grid { grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); padding:8px 14px 11px; gap:7px 10px; } .pos-detailcard--merged .pos-detail-grid .frow { margin-bottom:0; } /* Layanan ikut mengalir (tidak lagi span penuh) → [Layanan|Room|Tipe] + [Channel|Tanggal] = 2 baris saja, hemat 1 baris tinggi kartu. Override rule lama :first-child. */ .pos-detailcard--merged .pos-detail-grid .frow:first-child { grid-column:auto; } .pos-detailcard--merged .frow label { font-size:10px; margin-bottom:2px; letter-spacing:.02em; } .pos-detailcard--merged .ctrl { padding:6px 9px; font-size:12.5px; } /* Pax per kantong item */ .pos-line-paxwrap small.pos-line-paxinfo { display:block; margin-top:3px; font-size:10.5px; color:var(--muted); } .pos-line-paxwrap small.pos-line-paxinfo.is-over { color:#6b4900; font-weight:700; } .pos-paxhint-cart { margin:0 14px 12px; } .pos-paxhint-cart:empty { display:none; } /* ============================================================ FIN-V2 — Modul Finance, redesign penuh Brief "Finance Familiar & Booking Schedule" R2 (2026-08-11) §2.1/§2.5 + AUDIT UX Modul Finance 2026-08-11 (D-01..D-17, B-01..B-06, R-01..R-15). Anatomi direproduksi dari master 12.04.02 `Finance & Metrics.dc.html` (kini terindeks: `GUI/F1..F3/*` di design-system/library-index.md): · GUI/F1/KPI-CARDS → .fin-kpi-row (primitive .vs-stat) · GUI/F3/LEDGER → .fin-ledger (grid 4 kolom + toolbar + baris net) · GUI/F3/APPROVAL → .fin-review-item (kartu + stepper + baris) · GUI/F3/CASH-FLOW → .fin-cash-card Aturan mutlak blok ini: 1. NOL literal warna — termasuk sebagai fallback var() (D-11, memori `vs-yellow-brand-token-cycle`: rantai token berakhir di tokens.css). 2. NOL `@media (max-width:…)` baru — ambang diukur dari kontainer #finBody (D-06). `@media` yang tersisa hanya untuk hal non-layout (reduced motion). 3. Pasangan teks/latar ≥4.5:1. Master memakai --text-subtle (#777D88 = 4.14:1) untuk label kolom; label kolom membawa makna, jadi dipakai --text-muted (10.86:1). --accent-red (#F5365E = 3.77:1) hanya untuk grafis non-teks; nominal keluar memakai --tag-danger-text (5.61:1). ============================================================ */ /* ── fondasi: kontainer, bukan viewport (D-06) ───────────────────────────── */ /* Dua kontainer bersarang, masing-masing menjawab pertanyaan yang berbeda: finroot — lebar kolom konten modul (shell, filter, target sentuh) finbody — lebar badan tab (ambang tabel → kartu, grid halaman) */ .fin-root { container-type: inline-size; container-name: finroot; min-width: 0; } #finBody { container-type: inline-size; container-name: finbody; } /* ── shell: tab primer + disclosure "Lainnya" (D-04, R-04, F-10) ─────────── */ /* Strip tab + badge + disclosure duduk di satu baris; hanya STRIP-nya yang bergulir, sehingga pintu ke 11 tab sekunder tidak pernah ikut hanyut keluar layar seperti berisi kata "Personal" sampai ~950px dan mendorong Layanan, Tanggal, serta strip peringatan keluar layar. Tangga 3 → 2 → 1 milik `.pos-client-grid` sudah ada (≤1180 dan ≤760) — modifier ini cukup mewarisinya, dengan lebar baca dibatasi token kontainer supaya kontrol tidak pernah melar melewati ukuran yang wajar dibaca. */ /* Aturan KEGAGALAN ISI, bukan label perangkat: kolom terbentuk sebanyak yang muat pada lebar kartu yang sebenarnya. Itu menutup jebakan yang sama dua kali — tangga 3→2→1 lama memakai lebar VIEWPORT, padahal yang sempit adalah KARTU (pada 1784px kartu klien hanya ±560px meskipun layarnya lebar). Catatan: `max-width:var(--container-md)` sempat dicoba dan MATI — token itu ada di design-system/tokens.css tetapi tidak pernah dialiaskan ke app.css, jadi computed value-nya `none`. Diverifikasi di runtime, bukan lewat grep. */ /* KOREKSI 2026-08-09 — `minmax(min(100%,260px),1fr)` memakai lantai 260px untuk MENAHAN jumlah kolom di 3 saat kartunya lebar. Cara itu punya dua sisi rugi yang terukur: · kartu 542px (viewport 1920, kolom kerja 2 kolom) → 542 < 2×260+12, jadi hasilnya SATU kolom selebar 500px: tiga "pisahkan dengan koma" yang membuat tag kembar (repeat-rental vs "repeat rental") lahir tanpa ada yang sadar. */ .cust2-ov .c2tagin { position:relative; } .cust2-ov .c2tagin__box { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:40px; padding:6px 8px; border:1px solid var(--border-input); border-radius:var(--radius-sm); background:var(--surface-0); cursor:text; } .cust2-ov .c2tagin__box:focus-within { border-color:var(--ink-400); box-shadow:var(--shadow-focus); } .cust2-ov .c2tagin__chips { display:contents; } .cust2-ov .c2tag { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; padding:3px 5px 3px 9px; border-radius:var(--radius-pill); background:var(--surface-1); border:1px solid var(--line-200); font:500 11.5px var(--font-mono); color:var(--text-strong); } .cust2-ov .c2tag__x { display:inline-flex; padding:0; border:0; background:none; color:var(--text-subtle); cursor:pointer; line-height:0; } .cust2-ov .c2tag__x:hover { color:var(--tag-danger-text); } .cust2-ov .c2tagin__inp { flex:1 1 120px; min-width:110px; height:26px; border:0; outline:0; background:none; font:400 13.5px var(--font-body); color:var(--text-strong); } .cust2-ov .c2tagin__pop { position:absolute; z-index:5; left:0; right:0; top:calc(100% + 4px); max-height:210px; overflow-y:auto; padding:4px; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--surface-0); box-shadow:var(--shadow-pop); } .cust2-ov .c2tagin__opt { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:7px 9px; border:0; border-radius:var(--radius-xs); background:none; cursor:pointer; font:500 12.5px var(--font-mono); color:var(--text-strong); text-align:left; } .cust2-ov .c2tagin__opt:hover { background:var(--surface-1); } .cust2-ov .c2tagin__opt small { font:400 11px var(--font-body); color:var(--text-subtle); } .cust2 .frow, .cust2-ov .frow { display:flex; flex-direction:column; gap:5px; } .cust2 .fgrid, .cust2-ov .fgrid { display:grid; gap:12px; } .cust2 .flabel, .cust2-ov .flabel { font:600 12px var(--font-body); color:var(--text-strong); } .cust2 .fhint, .cust2-ov .fhint { font-size:11px; color:var(--text-subtle); } .cust2 .finput, .cust2-ov .finput { width:100%; height:40px; padding:0 12px; border:1px solid var(--border-input); border-radius:var(--radius-sm); background:var(--surface-0); font:400 14px var(--font-body); color:var(--text-strong); } .cust2 .finput:focus, .cust2-ov .finput:focus { outline:0; border-color:var(--ink-400); box-shadow:var(--shadow-focus); } .cust2 textarea.finput, .cust2-ov textarea.finput { height:auto; min-height:80px; padding:10px 12px; resize:vertical; line-height:1.5; } .cust2 select.finput, .cust2-ov select.finput { cursor:pointer; } .cust2 .switch-row, .cust2-ov .switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; } .cust2 .c2switch, .cust2-ov .c2switch { position:relative; width:42px; height:24px; border-radius:100px; background:var(--ink-200); cursor:pointer; transition:background .16s; flex:0 0 auto; } .cust2 .c2switch.on, .cust2-ov .c2switch.on { background:var(--ink-900); } .cust2 .c2switch .knob, .cust2-ov .c2switch .knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--primary-contrast); transition:left .16s; } .cust2 .c2switch.on .knob, .cust2-ov .c2switch.on .knob { left:21px; } @keyframes c2slide { from{transform:translateX(100%)} to{transform:none} } @keyframes c2fade { from{opacity:0} to{opacity:1} } @keyframes c2rise { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ .cust2-ov .c2-drawer, .cust2-ov .c2-back, .cust2-ov .c2modal, .cust2-ov .c2modal-back { animation:none!important; } } /* Tema square (html[data-shape="square"]) menyapu semua radius. Bentuk bundar di modul ini adalah MAKNA, bukan dekorasi (avatar identitas, dot status, switch, perforasi voucher) → dikecualikan, seperti radio & notch e-ticket di app.css. */ html[data-shape="square"] .cust2 .gcard-av, html[data-shape="square"] .cust2 .dlist-av, html[data-shape="square"] .cust2 .athumb, html[data-shape="square"] .cust2 .tl-dot, html[data-shape="square"] .cust2 .tg .dot, html[data-shape="square"] .cust2 .abadge.bflat::before, html[data-shape="square"] .cust2-ov .d360-av, html[data-shape="square"] .cust2-ov .athumb, html[data-shape="square"] .cust2-ov .tg .dot, html[data-shape="square"] .cust2-ov .c2switch, html[data-shape="square"] .cust2-ov .c2switch .knob, html[data-shape="square"] .cust2-ov .vch-notch, html[data-shape="square"] .cust2-ov .pic-av { border-radius:50%!important; } html[data-shape="square"] .cust2-ov .c2switch { border-radius:100px!important; } /* == /MODUL CUSTOMERS V2 =================================================== */ /* --- MODUL CUSTOMERS V2 · sub-komponen drawer (voucher, PIC, ledger, feedback) Master memakai inline style untuk blok ini; di app dipindah ke kelas agar markup JS tetap terbaca. Anatomi & token identik dengan .dc.html. --------- */ .cust2-ov .vch { position:relative; display:flex; border:1px solid var(--line-200); border-radius:12px; background:var(--surface-0); box-shadow:var(--shadow-card); overflow:hidden; } .cust2-ov .vch-stub { flex:0 0 52px; display:flex; align-items:center; justify-content:center; background:var(--ink-900); color:var(--vs-yellow); } .cust2-ov .vch-perf { align-self:stretch; border-left:2px dashed var(--line-200); } .cust2-ov .vch-main { flex:1; min-width:0; padding:11px 13px; } .cust2-ov .vch-top { display:flex; align-items:center; justify-content:space-between; gap:8px; } .cust2-ov .vch-code { font-family:var(--font-mono); font-size:14px; font-weight:700; letter-spacing:.05em; color:var(--text-strong); } .cust2-ov .vch-name { font-size:12.5px; font-weight:600; color:var(--text-body); margin-top:3px; } .cust2-ov .vch-effect { font-size:12px; color:var(--text-muted); margin-top:1px; } .cust2-ov .vch-foot { font-family:var(--font-mono); display:flex; gap:14px; font-size:10.5px; color:var(--text-subtle); margin-top:7px; padding-top:7px; border-top:1px dashed var(--line-100); } .cust2-ov .vch-notch { position:absolute; left:52px; width:12px; height:12px; border-radius:50%; background:var(--surface-0); border:1px solid var(--line-200); transform:translateX(-50%); } .cust2-ov .vch-notch.top { top:-7px; } .cust2-ov .vch-notch.bot { bottom:-7px; } .cust2-ov .note-ic { width:30px; height:30px; border-radius:50%; padding:0; flex:0 0 auto; display:flex; align-items:center; justify-content:center; } .cust2-ov .note-main { flex:1; min-width:0; } .cust2-ov .note-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:3px; } .cust2-ov .note-type { font-size:12px; font-weight:700; color:var(--text-strong); } .cust2-ov .note-at { font-family:var(--font-mono); font-size:10.5px; color:var(--text-subtle); } .cust2-ov .note-text { font-size:13px; color:var(--text-body); line-height:1.45; } .cust2-ov .pic-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; } .cust2-ov .pic-av { width:30px; height:30px; border-radius:50%; background:var(--surface-1); border:1px solid var(--line-200); display:flex; align-items:center; justify-content:center; font:700 11px var(--font-display); flex:0 0 auto; } .cust2-ov .pic-nm { font-size:13px; font-weight:600; color:var(--text-strong); } .cust2-ov .pic-sub { font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); } .cust2-ov .led-row { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:10px; padding-bottom:7px; border-bottom:1px solid var(--line-100); } .cust2-ov .led-row:last-child { border-bottom:0; } .cust2-ov .led-delta { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; } .cust2-ov .led-delta.pos { color:var(--tag-success-text); } .cust2-ov .led-delta.neg { color:var(--accent-red); } .cust2-ov .led-ev { font-size:12.5px; color:var(--text-strong); } .cust2-ov .led-note { font-size:11px; color:var(--text-subtle); } .cust2-ov .fb-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--line-100); } .cust2-ov .fb-row:last-child { border-bottom:0; } .cust2-ov .fb-score { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; } .cust2-ov .fb-sub { font-family:var(--font-mono); font-size:11.5px; color:var(--text-strong); display:flex; align-items:center; gap:5px; } .cust2-ov .fb-note { font-size:11.5px; color:var(--text-subtle); } .cust2-ov .aff-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; } .cust2-ov .aff-nm { font-size:13px; font-weight:600; color:var(--text-strong); } .cust2-ov .aff-sub { font-size:11.5px; color:var(--text-subtle); } .cust2-ov .stack { display:flex; flex-direction:column; gap:8px; } .cust2-ov .actbox { border:1px solid var(--line-200); border-radius:var(--radius-sm); padding:9px 11px; } .cust2-ov .actbox .as { font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); } .cust2-ov .actbox .ad { font-size:12.5px; font-weight:600; margin:2px 0; } .cust2-ov .wa-tpl { width:100%; justify-content:flex-start; text-align:left; height:auto; padding:11px 13px; flex-direction:column; align-items:flex-start; gap:3px; } .cust2-ov .wa-tpl .wl { font-weight:700; font-size:13px; } .cust2-ov .wa-tpl .wp { font-size:11px; color:var(--text-subtle); white-space:normal; } .cust2-ov .lvl-card .lt { font-weight:700; font-size:13px; } /* == /sub-komponen drawer ================================================== */ /* == VSOS-OPS:BEGIN ========================================================= Panel operasional VS OS (Template Ketentuan, Console Refund, Antrean Closing). Reproduksi anatomi unit 12.04.02: GUI/11 DATA-GRID (.vg-*), GUI/03 TEXT-SELECT-COMBOBOX (.vs-combo), GUI/03 FILE-UPLOAD (.vs-upl), GUI/09 STEPPER (.vs-steps), GUI/13 ACTIVITY-TIMELINE (.vs-atl), GUI/24 CHECKLIST (.vs-ckl). Token-only (design-system/tokens.css via app.css). */ /* ---- label form generik ---- */ .vs-lbl { display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-subtle); min-width:0; } .vs-lbl > .ctrl, .vs-lbl > .vs-combo { text-transform:none; letter-spacing:normal; } /* ---- DATA-GRID (GUI/11) — head kicker+judul, sel mono, tag status, aksi ---- */ .vg-panel { overflow:hidden; } .vg-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:16px 16px 13px; border-bottom:1px solid var(--line-200); } .vg-head > div { display:flex; flex-direction:column; gap:3px; min-width:0; } .vg-kicker { color:var(--text-subtle); font:600 10.5px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; } .vg-head > div > b { color:var(--text-strong); font-size:16px; font-weight:700; letter-spacing:-.01em; } .vg-meta { color:var(--text-subtle); font-size:12.5px; white-space:nowrap; } .vg-scroll { overflow-x:auto; } .vg-table { width:100%; } .vg-table th { padding:9px 12px; text-align:left; font:600 10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); border-bottom:1px solid var(--line-200); white-space:nowrap; } .vg-table td { padding:11px 12px; vertical-align:middle; border-bottom:1px solid var(--line-100); } .vg-table tbody tr:last-child td { border-bottom:0; } .vg-table td > b { font-size:13.5px; font-weight:600; color:var(--text-strong); } .vg-sub { display:block; margin-top:2px; font-size:11px; color:var(--text-subtle); } .vg-num, th.vg-num { text-align:right; font-variant-numeric:tabular-nums; } .vg-actcell { text-align:right; white-space:nowrap; } .vg-actions { display:inline-flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; } /* ---- COMBOBOX (GUI/03/TEXT-SELECT-COMBOBOX) ---- */ .vs-combo { position:relative; min-width:0; } .vs-combo__shell { display:flex; align-items:center; gap:9px; height:var(--field-h,44px); padding:0 12px 0 13px; background:var(--surface-0); border:1px solid var(--border-input); border-radius:var(--radius-sm); cursor:text; transition:border-color .14s ease, box-shadow .14s ease; } .vs-combo.is-open .vs-combo__shell, .vs-combo__shell:focus-within { border-color:var(--ink-900); box-shadow:var(--shadow-focus); } .vs-combo__shell > svg { flex:0 0 auto; color:var(--text-subtle); } .vs-combo__shell > svg:last-child { color:var(--text-subtle); transition:transform .16s ease; } .vs-combo.is-open .vs-combo__shell > svg:last-child { transform:rotate(180deg); } .vs-combo__input { flex:1; min-width:0; border:0; outline:none; background:transparent; font:400 14px var(--font-body); color:var(--text-strong); } .vs-combo__input::placeholder { color:var(--text-subtle); } .vs-combo__pop { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--radius-sm); box-shadow:var(--shadow-pop); padding:6px; max-height:236px; overflow:auto; } .vs-combo__opt { display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:6px 10px; border:0; border-radius:var(--radius-xs); background:transparent; cursor:pointer; text-align:left; font-family:var(--font-body); color:var(--text-strong); } .vs-combo__opt:hover, .vs-combo__opt.is-hi { background:var(--surface-1); } .vs-combo__opt.is-sel { background:var(--surface-1); } .vs-combo__opt > svg { flex:0 0 auto; color:var(--ink-900); margin-left:auto; } .vs-combo__opt-main { display:flex; flex-direction:column; gap:1px; min-width:0; } .vs-combo__opt-l { font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vs-combo__opt-s { font-size:11.5px; color:var(--text-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vs-combo__empty { padding:14px 10px; text-align:center; font-size:12.5px; color:var(--text-subtle); } /* ---- Template Ketentuan (layout) ---- */ .tt-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; } .tt-grid > .panel:first-child { grid-column:1 / -1; } @media (max-width:920px){ .tt-grid { grid-template-columns:1fr; } } .tt-bindform { border-top:1px solid var(--line-200); padding:14px 16px; } .tt-bindform-row { display:grid; grid-template-columns:minmax(130px,.9fr) minmax(170px,1.5fr) minmax(140px,1fr) auto; gap:10px; align-items:end; } @media (max-width:640px){ .tt-bindform-row { grid-template-columns:1fr 1fr; } .tt-bindform-row > button { grid-column:1 / -1; } } .tt-bindform-row > button { height:var(--field-h,44px); white-space:nowrap; } .tt-hint { display:flex; align-items:flex-start; gap:6px; margin:10px 2px 0; font-size:11.5px; line-height:1.5; color:var(--text-muted); } .tt-hint > svg { flex:0 0 auto; margin-top:1px; color:var(--text-subtle); } .tt-fhint { font-weight:400; text-transform:none; letter-spacing:normal; color:var(--text-subtle); font-size:11px; } .tt-prev-controls { display:grid; grid-template-columns:minmax(160px,1.4fr) minmax(160px,1.4fr) auto; gap:10px; align-items:end; } @media (max-width:640px){ .tt-prev-controls { grid-template-columns:1fr; } } .tt-prev-controls > button { height:var(--field-h,44px); white-space:nowrap; } .tt-chips { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 0; } .tt-chips:empty { margin:0; } .tt-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 11px; background:var(--surface-1); border:1px solid var(--line-200); border-radius:var(--radius-pill); font-size:12px; color:var(--text-body); } .tt-chip > button { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--text-subtle); cursor:pointer; } .tt-chip > button:hover { background:var(--ink-100); color:var(--text-strong); } .tt-prev-result { margin-top:14px; } .tt-prev-table td:first-child { color:var(--text-body); font-size:13px; } /* editor template */ .tt-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } @media (max-width:640px){ .tt-editor-grid { grid-template-columns:1fr; } } .tt-fgroup { border:1px solid var(--line-200); border-radius:var(--radius-sm); overflow:hidden; } .tt-fgroup-h { padding:9px 13px; background:var(--surface-1); border-bottom:1px solid var(--line-200); font:600 10.5px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); } .tt-fgroup-b { padding:12px 13px; display:flex; flex-direction:column; gap:10px; } .tt-numwrap { position:relative; display:flex; align-items:center; } .tt-numwrap > .ctrl { flex:1; padding-right:60px; } .tt-unit { position:absolute; right:12px; font-size:11px; color:var(--text-subtle); pointer-events:none; } /* ---- STEPPER (GUI/09) — status linier refund ---- */ .vs-steps { display:flex; align-items:flex-start; gap:0; margin:16px 0 4px; } .vs-step { display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; width:92px; text-align:center; } .vs-step__node { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-pill); font:700 13px var(--font-body); box-sizing:border-box; } .vs-step__l { font-size:11px; line-height:1.25; color:var(--text-subtle); } .vs-step.done .vs-step__node { background:var(--ink-900); color:var(--primary-contrast,#fff); } .vs-step.done .vs-step__l { color:var(--text-muted); font-weight:500; } .vs-step.current .vs-step__node { background:var(--brand); border:2px solid var(--ink-900); color:var(--ink-900); } .vs-step.current .vs-step__l { color:var(--text-strong); font-weight:600; } .vs-step.current.rej .vs-step__node { background:var(--tag-danger-bg); border-color:var(--tag-danger-text); color:var(--tag-danger-text); } .vs-step.todo .vs-step__node { background:var(--surface-0); border:1.5px solid var(--line-200); color:var(--text-subtle); } .vs-step__conn { flex:1; min-width:14px; height:2px; margin-top:15px; background:var(--ink-100,var(--line-200)); } .vs-step__conn.is-done { background:var(--ink-900); } .vs-step__conn.is-rej { background:var(--tag-danger-border); } /* ---- ACTIVITY-TIMELINE (GUI/13) — jejak status refund ---- */ .vs-atl { display:flex; flex-direction:column; } .vs-atl__row { display:grid; grid-template-columns:28px 1fr; gap:12px; } .vs-atl__rail { display:flex; flex-direction:column; align-items:center; } .vs-atl__node { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--radius-pill); flex-shrink:0; border:1px solid var(--tag-neutral-border); background:var(--tag-neutral-bg); color:var(--tag-neutral-text); } .vs-atl__node.is-blue { background:var(--tag-blue-bg); border-color:var(--tag-blue-border); color:var(--tag-blue-text); } .vs-atl__node.is-info { background:var(--tag-info-bg); border-color:var(--tag-info-border); color:var(--tag-info-text); } .vs-atl__node.is-mint { background:var(--tag-mint-bg); border-color:var(--tag-mint-border); color:var(--tag-mint-text); } .vs-atl__node.is-purple { background:var(--tag-purple-bg); border-color:var(--tag-purple-border); color:var(--tag-purple-text); } .vs-atl__node.is-success { background:var(--tag-success-bg); border-color:var(--tag-success-border); color:var(--tag-success-text); } .vs-atl__node.is-danger { background:var(--tag-danger-bg); border-color:var(--tag-danger-border); color:var(--tag-danger-text); } .vs-atl__conn { width:1.5px; flex:1; min-height:14px; background:var(--line-200); margin:4px 0; } .vs-atl__body { display:flex; flex-direction:column; gap:3px; padding-bottom:16px; min-width:0; } .vs-atl__t { font-size:13px; color:var(--text-body); } .vs-atl__t b { color:var(--text-strong); font-weight:600; } .vs-atl__note { font-size:12px; color:var(--text-muted); background:var(--surface-1); border:1px solid var(--line-100); border-radius:var(--radius-xs); padding:6px 9px; } .vs-atl__meta { font-size:11px; color:var(--text-subtle); letter-spacing:.02em; } /* ---- FILE-UPLOAD (GUI/03) ---- */ .vs-upl { display:flex; flex-direction:column; gap:12px; } .vs-upl__zone { display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:22px; border:1.5px dashed var(--border-input); border-radius:var(--radius-md); cursor:pointer; transition:border-color .15s ease, background .15s ease; } .vs-upl__zone:hover, .vs-upl__zone.drag, .vs-upl__zone:focus-visible { border-color:var(--ink-400,var(--text-subtle)); background:var(--surface-1); outline:none; } .vs-upl__zone.has-file { display:none; } .vs-upl__ic { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:var(--radius-pill); background:var(--ink-050); color:var(--text-strong); } .vs-upl__t { font-size:13px; color:var(--text-body); } .vs-upl__pick { font-weight:600; text-decoration:underline; text-underline-offset:3px; } .vs-upl__hint { font-size:11.5px; color:var(--text-subtle); } .vs-upl__row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line-200); border-radius:var(--radius-sm); } .vs-upl__fic { flex:0 0 auto; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); border-radius:var(--radius-xs); overflow:hidden; } .vs-upl__fic img { width:34px; height:34px; object-fit:cover; border-radius:var(--radius-xs); } .vs-upl__meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; } .vs-upl__frow { display:flex; align-items:center; justify-content:space-between; gap:10px; } .vs-upl__fname { font-size:13px; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vs-upl__pct { font-size:11.5px; color:var(--text-subtle); } .vs-upl__track { height:5px; border-radius:var(--radius-pill); background:var(--ink-050); overflow:hidden; } .vs-upl__fill { height:100%; width:0; background:var(--ink-900); border-radius:var(--radius-pill); transition:width .2s ease; } .vs-upl__x { flex:0 0 auto; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:var(--radius-xs); background:transparent; color:var(--text-subtle); cursor:pointer; } .vs-upl__x:hover { background:var(--surface-1); color:var(--text-strong); } /* ---- Weekly Check: baris pemeriksaan aset (Brief Inventory Fase 2.1) ---- Baris komposit = GRID auto | minmax(0,1fr) | auto | auto (aturan owner untuk baris ikon+teks+kontrol+aksi), BUKAN sel tabel: kolomnya kini memuat select, combobox, dan dropzone sehingga tabel akan overlap di layar sempit. Sub-baris detail (lokasi ditemukan + foto) disembunyikan sampai dibutuhkan supaya pemeriksaan cepat OK/OK → Simpan tetap satu tarikan napas. Warna/radius/shadow dari token; ritme spacing mengikuti komposit DS di atasnya (.vs-upl/.vs-combo/.vg-*) agar satu file tetap satu bahasa. */ .inv-chk-list { display:flex; flex-direction:column; } .inv-chk { border-bottom:1px solid var(--line-100); } .inv-chk:last-child { border-bottom:0; } .inv-chk.is-open { background:var(--surface-1); } .inv-chk-main { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:11px 16px; } .inv-chk-ic { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--radius-xs); background:var(--surface-1); color:var(--text-subtle); } .inv-chk.is-open .inv-chk-ic { background:var(--surface-0); } .inv-chk-id { min-width:0; display:flex; flex-direction:column; gap:2px; } .inv-chk-id > b { font-size:13.5px; font-weight:600; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .inv-chk-sub { font-size:11.5px; color:var(--text-subtle); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .inv-chk-sub b { font-weight:600; color:var(--text-strong); } .inv-chk-ctl { display:flex; align-items:flex-end; gap:10px; } .inv-chk-f { display:flex; flex-direction:column; gap:4px; min-width:0; } .inv-chk-f > span { font:600 10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); white-space:nowrap; } .inv-chk-f .ctrl { height:36px; min-width:84px; } .inv-chk-act { display:flex; align-items:center; gap:6px; justify-content:flex-end; white-space:nowrap; } .inv-chk-dmg { display:inline-flex; align-items:center; color:var(--danger); } .inv-chk-act .abtn { position:relative; } .inv-chk-dot { position:absolute; top:3px; right:3px; width:6px; height:6px; border-radius:var(--radius-pill); background:var(--ink-900); } .inv-chk-det { padding:0 16px 14px; border-top:1px dashed var(--line-200); margin-top:2px; padding-top:12px; } .inv-chk-det-g { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; } .inv-chk-det .frow { margin-bottom:10px; } .inv-chk-det .fhint { margin-top:5px; } @media (max-width:820px) { .inv-chk-main { grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ic id" "ctl ctl" "act act"; row-gap:10px; } .inv-chk-ic { grid-area:ic; } .inv-chk-id { grid-area:id; } .inv-chk-ctl { grid-area:ctl; } .inv-chk-act { grid-area:act; justify-content:flex-start; flex-wrap:wrap; } .inv-chk-ctl .inv-chk-f { flex:1; } .inv-chk-det-g { grid-template-columns:minmax(0,1fr); } } /* ---- Foto Kelengkapan aset: strip thumbnail + hapus per foto (Brief Inventory Fase 2.2) ---- */ .inv-gal { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .inv-gal-i { position:relative; display:inline-flex; } .inv-gal-i img { width:56px; height:56px; object-fit:cover; border-radius:var(--radius-xs); border:1px solid var(--line-200); display:block; } .inv-gal-x { position:absolute; top:-5px; right:-5px; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-200); border-radius:var(--radius-pill); background:var(--surface-0); color:var(--text-subtle); cursor:pointer; box-shadow:var(--shadow-xs,none); } .inv-gal-x:hover { color:var(--danger); border-color:var(--danger); } /* ---- Console Refund (layout) ---- */ .rfc-toolbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; align-items:center; } .rfc-search { display:flex; align-items:center; gap:8px; flex:1; min-width:220px; height:38px; padding:0 12px; border:1px solid var(--border-input); border-radius:var(--radius-sm); background:var(--surface-0); } .rfc-search > svg { color:var(--text-subtle); flex:0 0 auto; } .rfc-search-inp { flex:1; min-width:0; border:0; outline:none; background:transparent; font:400 13.5px var(--font-body); color:var(--text-strong); } .rfc-refs { display:flex; flex-wrap:wrap; gap:6px; } .rfc-ref { display:inline-flex; align-items:center; gap:4px; font:500 11.5px var(--font-mono); color:var(--text-muted); background:var(--surface-1); border:1px solid var(--line-200); border-radius:var(--radius-xs); padding:2px 7px; } .rfc-ref > svg { color:var(--text-subtle); } .rfc-table tbody tr[data-rfc-open] { cursor:pointer; } .rfc-table tbody tr[data-rfc-open]:hover { background:var(--surface-1); } .rfc-table tbody tr[data-rfc-open]:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--ink-900); } .rfc-table .vg-actcell svg { color:var(--text-subtle); vertical-align:middle; } .rfc-sla-over { color:var(--tag-danger-text); font-weight:600; } .rfc-sla-soon { color:var(--tag-warning-text); font-weight:600; } .rfc-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } .rfc-tno { font-size:12px; color:var(--text-subtle); } .rfc-reject-banner { display:flex; align-items:flex-start; gap:8px; margin:4px 0 0; padding:10px 12px; background:var(--tag-danger-bg); border:1px solid var(--tag-danger-border); border-radius:var(--radius-sm); font-size:12.5px; color:var(--tag-danger-text); } .rfc-cols { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin-top:14px; align-items:start; } @media (max-width:720px){ .rfc-cols { grid-template-columns:1fr; } } .rfc-col { display:flex; flex-direction:column; gap:14px; min-width:0; } .rfc-card { border:1px solid var(--line-200); border-radius:var(--radius-sm); overflow:hidden; } .rfc-card-h { padding:9px 13px; background:var(--surface-1); border-bottom:1px solid var(--line-200); font:600 10.5px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); } .rfc-dl { padding:6px 13px; } .rfc-kv { display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:12px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line-100); } .rfc-kv:last-child { border-bottom:0; } .rfc-k { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-subtle); } .rfc-v { font-size:13px; color:var(--text-body); overflow-wrap:break-word; min-width:0; } .rfc-v.rfc-strong { font-weight:700; color:var(--text-strong); } .rfc-note-blk { padding:10px 13px; border-top:1px solid var(--line-100); } .rfc-note-blk .rfc-k { display:block; margin-bottom:4px; } .rfc-note-blk p { margin:0; font-size:12.5px; line-height:1.5; color:var(--text-body); } .rfc-entry { display:flex; align-items:center; gap:11px; padding:12px 13px; background:var(--tag-mint-bg); border:1px solid var(--tag-mint-border); border-radius:var(--radius-sm); } .rfc-entry > svg { color:var(--tag-mint-text); flex:0 0 auto; } .rfc-entry > div { flex:1; min-width:0; } .rfc-entry b { display:block; font-size:13px; color:var(--text-strong); } .rfc-entry small { font-size:11.5px; color:var(--text-muted); } .rfc-actions { border:1px solid var(--line-200); border-radius:var(--radius-sm); padding:13px; } .rfc-act-h { font:600 10.5px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; } .rfc-act-row { display:flex; flex-wrap:wrap; gap:8px; } .rfc-form { display:flex; flex-direction:column; gap:12px; } .rfc-form-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:2px; } /* ---- CHECKLIST (GUI/24) — langkah closing per booking ---- */ .vs-ckl { border:1px solid var(--line-200); border-radius:var(--radius-sm); padding:12px 13px; display:flex; flex-direction:column; gap:11px; } .vs-ckl-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } .vs-ckl-kicker { font:600 10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); } .vs-ckl-count { font-size:11.5px; color:var(--text-strong); } .vs-ckl-track { height:8px; border-radius:var(--radius-pill); background:var(--ink-050); overflow:hidden; } .vs-ckl-fill { height:100%; background:var(--ink-900); border-radius:var(--radius-pill); transition:width .2s ease; } .vs-ckl-list { display:flex; flex-direction:column; gap:2px; } .vs-ckl-item { display:flex; align-items:center; gap:11px; padding:6px 2px; } .vs-ckl-box { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:var(--radius-xs); border:1.5px solid var(--border-input); background:var(--surface-0); color:var(--primary-contrast,#fff); transition:all .14s ease; } .vs-ckl-item.is-done .vs-ckl-box { border-color:var(--primary); background:var(--primary); } .vs-ckl-label { font-size:13px; color:var(--text-strong); } .vs-ckl-item.is-done .vs-ckl-label { color:var(--text-subtle); } .vs-ckl-when { margin-left:6px; font-size:10.5px; color:var(--text-subtle); } /* ---- Antrean & Closing Harian (layout) ---- */ .qc-summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--radius-md); box-shadow:var(--shadow-card); margin-bottom:16px; } .qc-sum-stat { display:flex; flex-direction:column; gap:2px; } .qc-sum-k { font:600 10px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle); } .qc-sum-n { font:700 30px/1 var(--font-display); color:var(--text-strong); letter-spacing:-.02em; } .qc-sum-n.is-open { color:var(--tag-warning-text); } .qc-sum-d { font-size:11.5px; color:var(--text-subtle); } .qc-sum-act { display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .qc-sum-reason { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted); text-align:right; } .qc-sum-reason > svg { flex:none; color:var(--text-subtle); } .qc-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; } .qc-card { display:flex; flex-direction:column; gap:12px; padding:15px; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--radius-md); box-shadow:var(--shadow-card); } .qc-card-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; } .qc-card .vs-avatar { width:36px; height:36px; font:600 12px/1 var(--font-body); } .qc-card-id { min-width:0; } .qc-card-id b { display:block; font-size:14px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .qc-card-id small { font-size:11px; color:var(--text-subtle); } .qc-card-tags { display:flex; flex-direction:column; gap:4px; align-items:flex-end; } .qc-card-meta { display:flex; flex-wrap:wrap; gap:6px; } .qc-meta-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-muted); background:var(--surface-1); border:1px solid var(--line-200); border-radius:var(--radius-xs); padding:2px 8px; } .qc-meta-chip > svg { flex:none; color:var(--text-subtle); } .qc-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .qc-card-actions .abtn { width:100%; justify-content:center; } .qc-card-warn { display:flex; align-items:flex-start; gap:7px; padding:9px 11px; background:var(--tag-danger-bg); border:1px solid var(--tag-danger-border); border-radius:var(--radius-sm); font-size:11.5px; line-height:1.45; color:var(--tag-danger-text); } .qc-card-warn > svg { flex:none; margin-top:1px; } .qc-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:40px 20px; text-align:center; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--radius-md); } .qc-empty > svg { color:var(--tag-mint-text); } .qc-empty b { font-size:15px; color:var(--text-strong); } .qc-empty span { font-size:12.5px; color:var(--text-muted); } .qc-decided { margin-top:16px; } /* == VSOS-OPS:END ========================================================== */ /* == OPS-MASTERDATA-REFRESH:BEGIN ========================================== Resource · Katalog · Inventori Adapter token-only untuk GUI/11 Data Grid, GUI/12 Toolbar, StatCard, Fresh Tags, dan Composite 04 Inventory. */ .ops-module { display:flex; flex-direction:column; gap:var(--space-5); min-width:0; } .ops-subnav { margin:0; overflow-x:auto; scrollbar-width:thin; } .ops-context { display:flex; align-items:flex-start; gap:var(--space-3); min-height:44px; padding:var(--space-4) var(--space-5); color:var(--text-body); background:var(--surface-0); border:1px solid var(--border-default); border-radius:var(--radius-sm); } .ops-context > svg { flex:none; margin-top:var(--space-1); color:var(--text-subtle); } .ops-context > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-3); min-width:0; } .ops-context b { color:var(--text-strong); font-size:var(--text-xs); font-weight:var(--fw-semibold); } .ops-context span { color:var(--text-muted); font-size:var(--text-xs); line-height:var(--lh-normal); } .ops-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4); } .ops-stat { min-width:0; } .ops-stat .vs-stat__value { overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; } .ops-stat--ok .vs-stat__icon, .ops-stat--ok .vs-stat__value { color:var(--tag-success-text); } .ops-stat--warn .vs-stat__icon, .ops-stat--warn .vs-stat__value { color:var(--tag-warning-text); } .ops-signal-strip { display:flex; flex-wrap:wrap; gap:var(--space-3); padding:var(--space-3); background:var(--surface-0); border:1px solid var(--border-default); border-radius:var(--radius-sm); } .ops-signal { display:inline-flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex:1 1 150px; min-height:36px; padding:var(--space-2) var(--space-3); color:var(--text-muted); background:var(--surface-1); border:1px solid var(--border-faint); border-radius:var(--radius-xs); font-size:var(--text-2xs); } .ops-signal b { color:var(--text-strong); font-size:var(--text-xs); font-variant-numeric:tabular-nums; } .ops-signal--warn { color:var(--tag-warning-text); background:var(--tag-warning-bg); border-color:var(--tag-warning-border); } .ops-signal--warn b { color:var(--tag-warning-text); } .ops-toolbar { position:sticky; top:var(--space-3); z-index:10; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); padding:var(--space-4); background:var(--surface-0); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-card); } .ops-toolbar .vs-field__control { flex:1 1 156px; width:auto; min-width:128px; max-width:100%; min-height:44px; } .ops-search { display:flex; align-items:center; gap:var(--space-3); flex:1 1 200px; min-width:min(180px,100%); min-height:44px; padding:0 var(--space-4); color:var(--text-subtle); background:var(--surface-0); border:1px solid var(--border-input); border-radius:var(--radius-sm); transition:border-color .16s ease,box-shadow .16s ease; } .ops-search:focus-within { color:var(--text-strong); border-color:var(--border-strong); box-shadow:var(--shadow-focus); } .ops-search input { flex:1; min-width:0; border:0; outline:0; color:var(--text-strong); background:transparent; font:var(--fw-medium) var(--text-xs)/var(--lh-normal) var(--font-body); } .ops-search input::placeholder { color:var(--text-subtle); } /* Segmented view switch tidak boleh melebarkan halaman saat tab-nya banyak (Schedule punya 6 tab): tetap flex:none, tapi dibatasi lebar toolbar & digulir. */ .ops-view-switch { flex:none; max-width:100%; overflow-x:auto; scrollbar-width:none; } .ops-view-switch::-webkit-scrollbar { display:none; } /* Brand tab switch di toolbar — segmented, tidak melebar mengikuti sisa ruang */ .ops-brand-tabs { flex:none; } .ops-brand-tabs .vs-tab { padding-inline:12px; gap:6px; } .ops-brand-tabs__n { font-size:10.5px; color:var(--text-subtle); font-variant-numeric:tabular-nums; } .ops-brand-tabs .vs-tab[aria-selected="true"] .ops-brand-tabs__n { color:inherit; opacity:.7; } /* Cakupan data (mis. Aktif ⇄ Arsip di Utility) — segmented, selebar isinya saja */ .ops-scope-tabs { flex:none; } .ops-scope-tabs .vs-tab { padding-inline:12px; gap:6px; } .ops-scope-tabs .vs-tab[aria-selected="true"] .ops-brand-tabs__n { color:inherit; opacity:.7; } /* ---------- Kunci view & filter (IconButton toggle, aria-pressed) ---------- State terkunci HARUS terbaca tanpa membaca tooltip: ikon kunci jadi kontras penuh + latar brand-line, ditemani Tag "Terkunci", dan kontrol yang dibekukan diberi opasitas rendah + cursor not-allowed. */ /* Group-by adalah BARIS KEDUA dari toolbar yang sama, bukan kartu terpisah: view + filter + group-by = satu unit yang dikunci/dibuka bersama. */ .ops-toolbar .grp-ctrl { flex:1 1 100%; margin:0; padding:var(--space-3) 0 0; background:transparent; border:0; border-top:1px solid var(--line-100); border-radius:0; } .ops-lock { flex:0 0 auto; color:var(--text-muted); } .ops-lock:hover:not(:disabled) { color:var(--text-strong); background:var(--surface-1); } .ops-lock[aria-pressed="true"] { color:var(--brand-ink); background:var(--brand); border-color:var(--brand-line); } .ops-lock-tag { flex:0 0 auto; } /* Kontrol beku — indikasi visual, bukan hanya atribut disabled */ .ops-toolbar.is-locked .vs-field__control:disabled, .ops-toolbar.is-locked .ops-search:has(input:disabled), .ops-toolbar.is-locked .ops-view-switch .vs-tab:disabled, .ops-toolbar.is-locked .ops-brand-tabs .vs-tab:disabled, .grp-ctrl.is-locked .grp-add:disabled, .grp-ctrl.is-locked .gk-x:disabled { opacity:.55; cursor:not-allowed; } /* Urutan tabel ikut preset yang dikunci, jadi tombol header sort juga dibekukan. */ .ops-module .tbl thead .sort-th:disabled { opacity:.55; cursor:not-allowed; } .ops-toolbar.is-locked .ops-search input:disabled { cursor:not-allowed; } .ops-toolbar .db-size select { min-height:44px; color:var(--text-body); background:var(--surface-0); border-color:var(--border-input); border-radius:var(--radius-sm); } .ops-data-card { margin:0; overflow:hidden; } .ops-data-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--border-default); } .ops-data-head > div { min-width:0; } .ops-data-head h2 { margin:var(--space-1) 0; color:var(--text-strong); font-size:var(--text-h4); font-weight:var(--fw-semibold); line-height:var(--lh-snug); } .ops-data-head p { margin:0; color:var(--text-subtle); font-size:var(--text-xs); line-height:var(--lh-normal); } .ops-kicker { display:block; color:var(--text-subtle); font:var(--fw-semibold) var(--text-2xs)/var(--lh-normal) var(--font-mono); letter-spacing:var(--ls-label-sm); text-transform:uppercase; } .ops-table-scroll { max-width:100%; overflow-x:auto; } .ops-data-card .tbl { margin:0; } .ops-data-card .tbl th { position:sticky; top:0; z-index:1; background:var(--surface-1); } .ops-data-card .tbl tbody tr { transition:background-color .14s ease,box-shadow .14s ease; } .ops-data-card .tbl tbody tr:hover { background:var(--surface-1); box-shadow:inset 3px 0 0 var(--border-strong); } .ops-data-card .db-pager { margin:0; padding:var(--space-4) var(--space-5); border-top:1px solid var(--border-default); } /* Body untuk mode non-tabel (Gallery) — kartu duduk di surface yang sama dgn List. */ .ops-grid-body { padding:var(--space-5) var(--space-6); } .ops-grid-body .gallery-grid { margin:0; } /* Grouped gallery: grid kartu jadi daun di dalam pohon grup. */ .grp-wrap--gallery .grp-body > .gallery-grid { padding:var(--space-4); } /* Board memakai kartu gallery yang sama, tapi disusun mendatar: thumbnail kecil di kiri + isi di kanan — kartu tetap ringkas & hemat ruang kolom. Baris komposit → grid auto|minmax(0,1fr) (bukan flex) supaya kolom teks bisa menyusut tanpa mendorong/menimpa thumbnail. */ .board-items > .gal-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:10px; padding:8px; flex:none; /* .board-items = flex column → tanpa ini kartu menyusut & isinya terpotong */ } .board-items > .gal-card:hover { transform:none; } .board-items > .gal-card .gal-cover { width:44px; height:44px; aspect-ratio:auto; border-radius:var(--r-sm); } /* Thumb 44px tak muat teks apa pun — label kategori disembunyikan, dan overlay (badge status / "Nonaktif") memang tidak dirender di layout compact; keduanya turun jadi chip di baris teks. Selector overlay tetap ada sbg jaring pengaman. */ .board-items > .gal-card .gal-cover .vf-label, .board-items > .gal-card .gal-cover .badge, .board-items > .gal-card .gal-cover .muted-tag { display:none; } .board-items > .gal-card .gal-body { padding:0; min-width:0; } .board-items > .gal-card .gal-body .sub { font-size:10px; line-height:1.35; } .board-items > .gal-card .gal-body .nm { font-size:12px; line-height:1.3; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .board-items > .gal-card .gal-body .cat { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; font-size:10.5px; } .board-items > .gal-card .gal-body .cat .cat-tag { font-size:9.5px; padding:1px 6px; } .board-items > .gal-card .gal-body .row-tags { margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .board-items > .gal-card .gal-body .pr { margin-top:3px; font-size:11px; } .board-items > .gal-card[draggable="true"] { cursor:grab; } .board-items > .gal-card.is-dragging { opacity:.4; } .board-items > .gal-card .row-tags { margin-top:3px; } .ops-actions { text-align:right; } .ops-num { color:var(--text-strong); font-size:var(--text-xs); font-variant-numeric:tabular-nums; } .ops-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2); color:var(--text-subtle); text-align:center; } .ops-empty b { color:var(--text-strong); font-size:var(--text-sm); } .ops-empty span { max-width:48ch; color:var(--text-muted); font-size:var(--text-xs); line-height:var(--lh-normal); } .ops-empty--page { padding:var(--space-10) var(--space-6); } .ops-module .grp-ctrl, .ops-module .db-bulk { margin:0; border-color:var(--border-default); border-radius:var(--radius-sm); box-shadow:none; } .ops-module--catalog .cat-subnav { margin:0; } .ops-module--catalog #catBody { display:flex; flex-direction:column; gap:var(--space-4); } .ops-module :is(.vs-btn,.vs-iconbtn,.abtn):active:not(:disabled) { transform:scale(.96); } .ops-module :is(.vs-btn,.vs-iconbtn,.abtn):focus-visible { outline:none; box-shadow:var(--shadow-focus); } @media (prefers-reduced-motion:reduce) { .ops-module :is(.ops-search,.tbl tbody tr,.vs-btn,.vs-iconbtn,.abtn) { transition:none; } .ops-module :is(.vs-btn,.vs-iconbtn,.abtn):active:not(:disabled) { transform:none; } } /* == OPS-MASTERDATA-REFRESH:END ============================================ */ /* == CATALOG-CATEGORY-COMPOSER:BEGIN ======================================= Category tree + focused detail composer. Library mapping: GUI/08 Navigation, GUI/03 Forms, GUI/13 Detail views. */ .catcat-shell { min-width:0; } .catcat-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); padding:var(--space-4); background:var(--surface-0); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-card); } .catcat-toolbar .ops-search { flex:1 1 280px; min-width:min(280px,100%); } .catcat-filter { flex:none; margin:0; } .catcat-filter-note { display:inline-flex; align-items:center; gap:var(--space-2); flex:1 1 100%; color:var(--text-subtle); font-size:var(--text-2xs); line-height:var(--lh-normal); } .catcat-filter-note svg { flex:none; } .catcat-workspace { display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr); gap:var(--space-5); align-items:start; min-width:0; } .catcat-nav { position:sticky; top:var(--space-3); display:flex; flex-direction:column; max-height:calc(100vh - var(--space-8)); margin:0; overflow:hidden; } .catcat-nav-head, .catcat-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); padding:var(--space-5); border-bottom:1px solid var(--border-default); } .catcat-nav-head h2, .catcat-editor-head h2 { margin:var(--space-1) 0 0; color:var(--text-strong); font-size:var(--text-h4); font-weight:var(--fw-semibold); line-height:var(--lh-snug); } .catcat-nav-list { display:flex; flex-direction:column; gap:var(--space-1); min-height:120px; padding:var(--space-3); overflow:auto; } .catcat-nav-item { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:start; gap:var(--space-3); width:100%; min-height:44px; padding:var(--space-3); color:var(--text-body); background:transparent; border:0; border-radius:var(--radius-sm); font-family:var(--font-body); text-align:left; cursor:pointer; transition:background-color .14s ease,color .14s ease; } .catcat-nav-item:hover { background:var(--surface-1); } .catcat-nav-item.is-active { color:var(--text-strong); background:var(--surface-1); } .catcat-nav-item:focus-visible { outline:none; box-shadow:var(--shadow-focus); } .catcat-nav-item[hidden] { display:none; } .catcat-nav-tick { position:absolute; top:var(--space-3); bottom:var(--space-3); left:0; width:3px; background:transparent; border-radius:0 var(--radius-xs) var(--radius-xs) 0; } .catcat-nav-item.is-active .catcat-nav-tick { background:var(--identity-yellow); } .catcat-nav-icon { display:grid; place-items:center; width:32px; height:32px; color:var(--text-subtle); background:var(--surface-0); border:1px solid var(--border-faint); border-radius:var(--radius-xs); } .catcat-nav-item.is-active .catcat-nav-icon { color:var(--text-strong); border-color:var(--border-default); } .catcat-nav-copy { display:flex; flex-direction:column; gap:var(--space-1); min-width:0; } .catcat-nav-title { overflow:hidden; color:var(--text-strong); font-size:var(--text-xs); font-weight:var(--fw-semibold); line-height:var(--lh-normal); text-overflow:ellipsis; white-space:nowrap; } .catcat-nav-key { overflow:hidden; color:var(--text-subtle); font-size:var(--text-2xs); font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; } .catcat-nav-children { display:flex; flex-direction:column; gap:var(--space-1); margin-top:var(--space-2); padding-left:var(--space-4); border-left:1px solid var(--border-default); } .catcat-nav-children > span { position:relative; display:flex; align-items:center; gap:var(--space-2); min-width:0; color:var(--text-muted); font-size:var(--text-2xs); line-height:var(--lh-normal); } .catcat-nav-children > span.is-off { color:var(--text-disabled); } .catcat-nav-children > span i { position:absolute; top:50%; left:calc(var(--space-4) * -1); width:var(--space-3); border-top:1px solid var(--border-default); } .catcat-nav-children em { margin-left:auto; color:var(--tag-blue-text); font-size:var(--text-2xs); font-style:normal; } .catcat-nav-count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 var(--space-2); color:var(--text-muted); background:var(--surface-0); border:1px solid var(--border-default); border-radius:var(--radius-pill); font-size:var(--text-2xs); font-variant-numeric:tabular-nums; } .catcat-nav-item > svg { margin-top:var(--space-2); color:var(--text-subtle); } .catcat-nav-empty, .catcat-no-selection, .catcat-empty-sub { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2); color:var(--text-subtle); text-align:center; } .catcat-nav-empty { min-height:160px; padding:var(--space-5); } .catcat-no-selection { min-height:320px; } .catcat-no-selection b, .catcat-empty-sub b { color:var(--text-strong); font-size:var(--text-sm); } .catcat-no-selection span, .catcat-empty-sub span { color:var(--text-muted); font-size:var(--text-xs); } .catcat-create { display:flex; flex-direction:column; gap:var(--space-3); margin-top:auto; padding:var(--space-4); background:var(--surface-1); border-top:1px solid var(--border-default); } .catcat-create-head { display:flex; align-items:flex-start; gap:var(--space-2); } .catcat-create-head > svg { flex:none; margin-top:var(--space-1); color:var(--text-subtle); } .catcat-create-head div { display:flex; flex-direction:column; gap:var(--space-1); } .catcat-create-head b { color:var(--text-strong); font-size:var(--text-xs); } .catcat-create-head span { color:var(--text-subtle); font-size:var(--text-2xs); } .catcat-create > div:last-child { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2); } .catcat-detail { min-width:0; } .catcat-card.catcat-editor { margin:0; padding:0; border-radius:var(--radius-md); } .catcat-editor-head { align-items:center; padding:var(--space-5) var(--space-6); } .catcat-editor-head p { display:flex; align-items:center; gap:var(--space-2); margin:var(--space-1) 0 0; color:var(--text-subtle); font-size:var(--text-xs); } .catcat-editor-head p span { display:flex; } .catcat-editor-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--space-2); } .catcat-editor-actions .vs-btn--danger { color:var(--tag-danger-text); background:var(--tag-danger-bg); border-color:var(--tag-danger-border); } .catcat-editor-body { display:flex; flex-direction:column; } .catcat-section { display:flex; flex-direction:column; gap:var(--space-5); padding:var(--space-6); border-bottom:1px solid var(--border-default); } .catcat-section:last-child { border-bottom:0; } .catcat-section-head { display:flex; align-items:flex-start; gap:var(--space-3); } .catcat-section-head > span { display:inline-flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; color:var(--text-muted); background:var(--surface-1); border:1px solid var(--border-default); border-radius:var(--radius-xs); font-size:var(--text-2xs); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; } .catcat-section-head h3 { margin:0; color:var(--text-strong); font-size:var(--text-sm); font-weight:var(--fw-semibold); line-height:var(--lh-normal); } .catcat-section-head p { margin:var(--space-1) 0 0; color:var(--text-subtle); font-size:var(--text-xs); line-height:var(--lh-normal); } .catcat-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); } .catcat-field { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; } .catcat-field > span { color:var(--text-strong); font-size:var(--text-xs); font-weight:var(--fw-semibold); } .catcat-field > span small, .catcat-field > small { color:var(--text-subtle); font-size:var(--text-2xs); font-weight:var(--fw-regular); line-height:var(--lh-normal); } .catcat-field--template { max-width:420px; } .catcat-brandchips { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); } .catcat-bc { min-height:26px; padding:0 var(--space-3); cursor:pointer; } .catcat-uni { color:var(--text-subtle); font-size:var(--text-xs); } .catcat-treepath { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); color:var(--text-muted); background:var(--surface-1); border:1px solid var(--border-faint); border-radius:var(--radius-sm); font-size:var(--text-xs); } .catcat-treepath > span { display:inline-flex; align-items:center; gap:var(--space-2); } .catcat-treepath > span + span::before { content:"/"; margin-right:var(--space-2); color:var(--text-disabled); } /* 7 kolom: urutan · nama · key · template opsi · template durasi (12.66) · status · hapus */ .catcat-subhead, .catcat-shell .subcat-edit-row { display:grid; grid-template-columns:84px minmax(150px,1fr) minmax(120px,.8fr) minmax(140px,.9fr) minmax(140px,.9fr) 70px 36px; gap:var(--space-2); align-items:center; min-width:860px; } .catcat-subhead { padding:0 var(--space-3); color:var(--text-subtle); font-size:var(--text-2xs); font-weight:var(--fw-semibold); letter-spacing:var(--ls-label-sm); text-transform:uppercase; } .catcat-shell .subcat-editor { display:flex; flex-direction:column; gap:var(--space-2); overflow-x:auto; } .catcat-shell .subcat-edit-row { position:relative; padding:var(--space-3); background:var(--surface-1); border:1px solid var(--border-faint); border-radius:var(--radius-sm); } .catcat-shell .subcat-edit-row::before { content:""; position:absolute; top:calc(var(--space-3) * -1); bottom:50%; left:var(--space-3); width:var(--space-3); border-bottom:1px solid var(--border-default); border-left:1px solid var(--border-default); } .catcat-shell .subcat-edit-row.is-off { opacity:.68; } .catcat-shell .subcat-edit-row .vs-field__control { min-width:0; } .catcat-sub-order { position:relative; z-index:1; display:flex; align-items:center; gap:var(--space-2); } .catcat-sub-order > span { display:grid; place-items:center; flex:none; width:28px; height:28px; color:var(--text-muted); background:var(--surface-0); border:1px solid var(--border-default); border-radius:var(--radius-xs); font-size:var(--text-2xs); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; } .catcat-sub-order > div { display:flex; } .catcat-sub-order .vs-iconbtn { width:28px; min-height:28px; border:0; background:transparent; } .catcat-shell .subcat-act { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:36px; padding:0 var(--space-2); color:var(--tag-success-text); background:var(--tag-success-bg); border:1px solid var(--tag-success-border); border-radius:var(--radius-xs); font-size:var(--text-2xs); } .catcat-shell .subcat-act:has(input:not(:checked)) { color:var(--tag-neutral-text); background:var(--tag-neutral-bg); border-color:var(--tag-neutral-border); } .catcat-shell .subcat-act input { accent-color:var(--tag-success-text); } .catcat-sub-delete { color:var(--tag-danger-text); } .catcat-empty-sub { min-height:150px; padding:var(--space-6); background:var(--surface-1); border:1px dashed var(--border-default); border-radius:var(--radius-sm); } .catcat-shell .subcat-add-row.catcat-sub-create { display:grid; grid-template-columns:auto minmax(150px,1fr) minmax(120px,.8fr) auto; gap:var(--space-2); align-items:center; margin:0; padding:var(--space-3); background:var(--tag-blue-bg); border:1px dashed var(--tag-blue-border); border-radius:var(--radius-sm); } .catcat-sub-create > span { display:grid; place-items:center; width:32px; height:32px; color:var(--tag-blue-text); background:var(--surface-0); border-radius:var(--radius-xs); } .catcat-shell :is(.catcat-nav-item,.catcat-bc,.vs-btn,.vs-iconbtn):active:not(:disabled) { transform:scale(.96); } @media (max-width:1100px) { .catcat-workspace { grid-template-columns:1fr; } .catcat-nav { position:static; max-height:none; } .catcat-nav-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); max-height:360px; } } @media (max-width:620px) { .catcat-toolbar { align-items:stretch; } .catcat-filter { max-width:100%; overflow-x:auto; } .catcat-editor-head, .catcat-editor-actions { align-items:flex-start; } .catcat-editor-head { flex-direction:column; } .catcat-editor-actions { justify-content:flex-start; } .catcat-section { padding:var(--space-5); } .catcat-field-grid { grid-template-columns:1fr; } .catcat-subhead { display:none; } .catcat-shell .subcat-editor { overflow-x:visible; } .catcat-shell .subcat-edit-row { grid-template-columns:minmax(0,1fr) auto; min-width:0; } .catcat-sub-order, .catcat-shell .subcat-edit-row > .vs-field__control { grid-column:1 / -1; } .catcat-shell .subcat-act { grid-column:1; } .catcat-sub-delete { grid-row:5; grid-column:2; } .catcat-shell .subcat-add-row.catcat-sub-create { grid-template-columns:1fr; } .catcat-sub-create > span { display:none; } } @media (prefers-reduced-motion:reduce) { .catcat-shell :is(.catcat-nav-item,.catcat-bc,.vs-btn,.vs-iconbtn) { transition:none; } .catcat-shell :is(.catcat-nav-item,.catcat-bc,.vs-btn,.vs-iconbtn):active:not(:disabled) { transform:none; } } /* == CATALOG-CATEGORY-COMPOSER:END ========================================= */ /* == WORKSPACE-PM (Tasks & PM v2 — reproduksi Workspace.dc.html) ==== */ /* Sumber: 12.00.01.01 WORKSPACE - Claude Design/Workspace.dc.html markup 720-1190 · dialog 2127-2379 · card modal 2380-2653 · helmet 25-76 Semua warna/shadow/tipografi dari token app (--pst-*, --ink-*, --line-*, --surface-*, --text-*, --shadow-*, --font-*). Geometri (px) literal dari master. Prefix .wsp-* di dalam scope .wsp — tidak menyentuh .ws-* lama. */ /* ------------------------------------------------------------------ */ /* §0 · SCOPE · TOKEN LOKAL · KEYFRAME · SCROLLBAR */ /* ------------------------------------------------------------------ */ /* Token lokal dideklarasikan di SEMUA akar WSP, bukan cuma .wsp. Alasan: dialog & card modal dirakit lewat adminModal() → dipasang di #adminOverlay, yang di shell() adalah SIBLING dari .main (admin.js:995 vs :1001) — di luar subtree .wsp. Custom property diwariskan lewat pohon DOM, bukan lewat selector, jadi tanpa ini setiap var(--wsp-*) di modal jadi "invalid at computed-value time" (background→transparent, radius→0, border-color→currentColor). Akar yang mungkin: .wsp (halaman), .wsp-dlg (jalur standalone), .wsp-modal (kelas di .modal-center, spec_jsPlan.md:56), .wsp-scrim (memakai --wsp-scrim pada dirinya sendiri). */ .wsp, .wsp-dlg, .wsp-modal, .wsp-scrim, .wsp-drawer, .wsp-drawer-back, .wsp-notifpop{ font-family:var(--font-body); color:var(--text-body); /* alias ink/kontras (peta dialek master → app) */ --wsp-ink:var(--ink-950); /* #050505 */ --wsp-ink-hover:var(--primary-hover); /* #1B1C1F */ --wsp-on-ink:var(--primary-contrast); /* teks di atas ink */ --wsp-ring:var(--surface-0); /* ring/border avatar */ --wsp-on-ink-fill:color-mix(in srgb, var(--primary-contrast) 20%, transparent); --wsp-on-ink-fill-18:color-mix(in srgb, var(--primary-contrast) 18%, transparent); --wsp-on-ink-fill-10:color-mix(in srgb, var(--primary-contrast) 10%, transparent); --wsp-on-ink-fill-25:color-mix(in srgb, var(--primary-contrast) 25%, transparent); --wsp-on-tone-fill:color-mix(in srgb, var(--surface-0) 75%, transparent); --wsp-scrim:color-mix(in srgb, var(--ink-950) 42%, transparent); /* drop state kanban (master: --brand-soft / --brand-line) */ --wsp-drop-bg:var(--pst-identity-bg); --wsp-drop-line:var(--vs-yellow-shadow); /* RADIUS — reproduksi persis master, dipusatkan. Yang sudah ada di skala DS memakai token DS. */ --wsp-r4:4px; --wsp-r5:5px; --wsp-r6:var(--radius-xs); /* 6px */ --wsp-r7:7px; --wsp-r8:8px; --wsp-r9:9px; --wsp-r10:var(--radius-sm); /* 10px */ --wsp-r11:11px; --wsp-r12:12px; --wsp-r13:13px; --wsp-r14:var(--radius-md); /* 14px */ --wsp-r20:var(--radius-lg); /* 20px */ --wsp-rp:var(--radius-pill); /* 100px */ /* fallback tone (kalau kelas .wsp-t-* belum dipasang) */ --wsp-tone-bg:var(--pst-neutral-bg); --wsp-tone-border:var(--pst-neutral-border); --wsp-tone-text:var(--pst-neutral-text); } @keyframes wsp-fade{ from{ opacity:0 } to{ opacity:1 } } @keyframes wsp-rise{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } } .wsp ::-webkit-scrollbar, .wsp-dlg ::-webkit-scrollbar, .wsp-modal ::-webkit-scrollbar{ width:8px; height:8px } .wsp ::-webkit-scrollbar-thumb, .wsp-dlg ::-webkit-scrollbar-thumb, .wsp-modal ::-webkit-scrollbar-thumb{ background:var(--ink-200); border-radius:var(--wsp-rp) } .wsp ::-webkit-scrollbar-track, .wsp-dlg ::-webkit-scrollbar-track, .wsp-modal ::-webkit-scrollbar-track{ background:transparent } /* ------------------------------------------------------------------ */ /* §1 · TONE MAP — sumber tunggal semua chip/dot/bar/gradien */ /* ------------------------------------------------------------------ */ .wsp-t-success { --wsp-tone-bg:var(--pst-success-bg); --wsp-tone-border:var(--pst-success-border); --wsp-tone-text:var(--pst-success-text) } .wsp-t-mint { --wsp-tone-bg:var(--pst-mint-bg); --wsp-tone-border:var(--pst-mint-border); --wsp-tone-text:var(--pst-mint-text) } .wsp-t-info { --wsp-tone-bg:var(--pst-info-bg); --wsp-tone-border:var(--pst-info-border); --wsp-tone-text:var(--pst-info-text) } .wsp-t-blue { --wsp-tone-bg:var(--pst-blue-bg); --wsp-tone-border:var(--pst-blue-border); --wsp-tone-text:var(--pst-blue-text) } .wsp-t-purple { --wsp-tone-bg:var(--pst-purple-bg); --wsp-tone-border:var(--pst-purple-border); --wsp-tone-text:var(--pst-purple-text) } .wsp-t-pink { --wsp-tone-bg:var(--pst-pink-bg); --wsp-tone-border:var(--pst-pink-border); --wsp-tone-text:var(--pst-pink-text) } .wsp-t-warning { --wsp-tone-bg:var(--pst-warning-bg); --wsp-tone-border:var(--pst-warning-border); --wsp-tone-text:var(--pst-warning-text) } .wsp-t-orange { --wsp-tone-bg:var(--pst-orange-bg); --wsp-tone-border:var(--pst-orange-border); --wsp-tone-text:var(--pst-orange-text) } .wsp-t-danger { --wsp-tone-bg:var(--pst-danger-bg); --wsp-tone-border:var(--pst-danger-border); --wsp-tone-text:var(--pst-danger-text) } .wsp-t-neutral { --wsp-tone-bg:var(--pst-neutral-bg); --wsp-tone-border:var(--pst-neutral-border); --wsp-tone-text:var(--pst-neutral-text) } .wsp-t-identity{ --wsp-tone-bg:var(--pst-identity-bg); --wsp-tone-border:var(--pst-identity-border); --wsp-tone-text:var(--pst-identity-text) } /* ------------------------------------------------------------------ */ /* §2 · PRIMITIF BERSAMA */ /* ------------------------------------------------------------------ */ /* -- tag / chip pastel (helper tag() master baris 3012) -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-tag{ display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px; border-radius:var(--wsp-rp); font-family:var(--font-body); font-size:10.5px; font-weight:600; white-space:nowrap; flex:0 0 auto; background:var(--wsp-tone-bg); border:1px solid var(--wsp-tone-border); color:var(--wsp-tone-text); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-tag--xs{ font-size:8px; padding:0 5px } /* chip "Custom" di rail */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-tag--85{ font-size:8.5px; padding:1px 6px } /* brand/src project, scope kartu */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-tag--9{ font-size:9px; padding:1px 7px } /* scope chip toolbar, kind project */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-tag--95{ font-size:9.5px; padding:1.5px 8px } /* label chip kartu kanban */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-tag--kind{ font-size:8.5px; padding:1px 7px } /* badge jenis lampiran */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-tag--hide{ display:none } /* scopeSt saat taskScope=project */ /* -- kicker mono uppercase -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kicker{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kicker--tight{ letter-spacing:.12em } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kicker--9{ font-size:9px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kicker--95{ font-size:9.5px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kicker--wide{ font-size:9px; letter-spacing:.16em } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kicker--flow{ flex:0 0 auto } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kicker--grow{ flex:1; min-width:0 } /* -- badge angka mono -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-badge{ font-family:var(--font-mono); font-size:9px; font-weight:700; padding:0 5px; border-radius:var(--wsp-rp); background:var(--ink-050); color:var(--text-muted); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-badge--95{ font-size:9.5px; padding:1px 6px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-badge.is-on{ background:var(--wsp-on-ink-fill); color:var(--wsp-on-ink) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-badge--18.is-on{ background:var(--wsp-on-ink-fill-18) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-badge--ink.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-badge--tone{ background:var(--wsp-on-tone-fill); color:var(--wsp-tone-text) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .is-on > .wsp-badge--tone{ background:var(--wsp-on-ink-fill); color:var(--wsp-on-ink) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-badge--brand.is-on{ background:var(--vs-yellow); color:var(--wsp-ink) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-num{ font-family:var(--font-mono); font-size:9px; font-weight:700 } /* counter telanjang di tombol Filter */ /* -- pill / chip aksi -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-pill{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--wsp-rp); border:1px solid var(--line-200); background:var(--surface-0); color:var(--text-muted); font-family:var(--font-body); font-size:11.5px; font-weight:500; white-space:nowrap; cursor:pointer; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-pill:hover{ background:var(--surface-1); color:var(--text-strong) } /* master 1051 style-hover */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-pill.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); border-color:var(--wsp-ink); font-weight:700 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-pill.is-on:hover{ background:var(--wsp-ink-hover); color:var(--wsp-on-ink) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-pill--26{ height:26px; padding:0 10px; font-size:10.5px } /* --28 = tombol "Atur status" master 1051: border-input + text-strong */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-pill--28{ height:28px; padding:0 11px; font-size:11px; font-weight:600; border-color:var(--border-input); color:var(--text-strong) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-pill--29{ height:29px; padding:0 11px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-pill--32{ height:32px; padding:0 12px; font-size:11.5px; font-weight:600; border-color:var(--border-input) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-pill--flow{ flex:0 0 auto } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-pill--max{ max-width:100% } /* -- tombol ikon -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico{ width:24px; height:24px; display:grid; place-items:center; border-radius:var(--wsp-r7); border:0; background:transparent; color:var(--text-muted); cursor:pointer; flex:0 0 auto; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico:hover{ background:var(--surface-1); color:var(--text-strong) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--22{ width:22px; height:22px; border-radius:var(--wsp-r6); color:var(--text-subtle) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--26{ width:26px; height:26px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--28{ /* master 2441 — "Hapus tenggat" */ width:28px; height:28px; border-radius:var(--wsp-r8); border:1px solid var(--border-input); background:var(--surface-0); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--30{ width:30px; height:30px; border-radius:var(--wsp-r8) } /* 24px berbingkai — tombol tambah label di kotak meta card modal (master 2421) */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--outline{ border:1px solid var(--border-input); background:var(--surface-0) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--round{ width:32px; height:32px; border-radius:var(--wsp-rp); border:1px solid var(--border-input); background:var(--surface-0) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--box{ width:32px; height:32px; border-radius:var(--wsp-r9); border:1px solid var(--line-200); background:var(--surface-0) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--flat:hover{ background:var(--ink-050); color:var(--text-strong) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--danger:hover{ background:var(--ink-050); color:var(--pst-danger-text) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--onink:hover{ background:var(--surface-0); color:var(--text-strong) } /* kombinasi --onink + --danger (hapus kolom di head kanban, master 1107): surface-0 + danger. Harus setelah --onink, kalau tidak color-nya tertimpa. */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--onink.wsp-ico--danger:hover{ background:var(--surface-0); color:var(--pst-danger-text) } /* --28 versi danger memakai surface-1 (master 2441), bukan ink-050 */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--28.wsp-ico--danger:hover{ background:var(--surface-1); color:var(--pst-danger-text) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--dangerbox{ width:32px; height:32px; border-radius:var(--wsp-r9); border:1px solid var(--pst-danger-border); background:var(--pst-danger-bg); color:var(--pst-danger-text); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico--dangerbox:hover{ filter:brightness(.97); background:var(--pst-danger-bg); color:var(--pst-danger-text) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico i, :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ico svg{ display:inline-flex; flex:0 0 auto } /* -- tombol teks -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:var(--wsp-r10); font-family:var(--font-body); font-size:12.5px; cursor:pointer; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--dark{ border:0; background:var(--wsp-ink); color:var(--wsp-on-ink); font-weight:700 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--dark:hover{ background:var(--wsp-ink-hover) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--ghost{ border:1px solid var(--border-input); background:var(--surface-0); color:var(--text-muted); font-weight:600 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--ghost:hover{ background:var(--surface-1); color:var(--text-strong) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--plain{ border:0; background:transparent; color:var(--text-subtle); font-weight:600 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--plain:hover{ background:var(--surface-1); color:var(--text-strong) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--26{ height:26px; padding:0 10px; border-radius:var(--wsp-r8); font-size:11px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--27{ height:27px; padding:0 10px; border-radius:var(--wsp-r8); font-size:11px; flex:0 0 auto } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--28{ height:28px; padding:0 11px; border-radius:var(--wsp-r8); font-size:11.5px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--32{ height:32px; padding:0 15px; border-radius:var(--wsp-r9); font-size:12.5px } /* --38 menyamai tinggi .wsp-input di baris "Tambah link" dialog lampiran (master 2196-2197) */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--38{ height:38px; padding:0 14px; border-radius:var(--wsp-r10); font-size:12px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--cta{ height:32px; padding:0 14px; border-radius:var(--wsp-rp); font-size:12px; gap:6px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--w16{ padding:0 16px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--w17{ padding:0 17px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--dark[disabled], :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--dark.is-off{ background:var(--ink-050); color:var(--text-disabled); cursor:not-allowed; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--dark[disabled]:hover, :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-btn--dark.is-off:hover{ background:var(--ink-050) } /* -- kartu / permukaan -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-card{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r12); box-shadow:var(--shadow-card); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-card--14{ border-radius:var(--wsp-r14); overflow:hidden } /* -- track & bar progress -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-track{ display:block; border-radius:var(--wsp-rp); background:var(--ink-050); overflow:hidden; flex:1; min-width:0; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-track--3{ height:3px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-track--4{ height:4px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-track--5{ height:5px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-track--6{ height:6px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-bar{ display:block; height:100%; border-radius:var(--wsp-rp); background:var(--wsp-ink) } /* width inline (data) */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-bar--tone{ background:var(--wsp-tone-text) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-bar--done{ background:var(--pst-success-text) } /* -- dot -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dot{ width:7px; height:7px; border-radius:var(--wsp-rp); flex:0 0 auto; background:var(--wsp-tone-text) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dot--4{ width:4px; height:4px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dot--8{ width:8px; height:8px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dot.is-ring{ box-shadow:0 0 0 2px var(--wsp-on-ink-fill-25) } /* -- avatar & stack -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ava{ width:22px; height:22px; border-radius:var(--wsp-rp); background:var(--ink-100); color:var(--ink-600); display:grid; place-items:center; font-family:var(--font-mono); font-size:8.5px; font-weight:700; border:1.5px solid var(--wsp-ring); margin-left:-6px; flex:0 0 auto; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ava--20{ width:20px; height:20px; font-size:8px; margin-left:-5px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ava--24{ width:24px; height:24px; font-size:9px; margin-left:0; border:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ava--26{ width:26px; height:26px; font-size:10px; margin-left:0; border:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ava--28{ width:28px; height:28px; font-size:11px; margin-left:0; border:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ava--30{ width:30px; height:30px; font-size:10px; margin-left:0; border:0 } /* F5 · avatar composer thread (master 1522) & baris thread (1588) */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ava--32{ width:32px; height:32px; font-size:10.5px; margin-left:0; border:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ava--dark{ background:var(--wsp-ink); color:var(--wsp-on-ink) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) button.wsp-ava--dark{ cursor:pointer } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) button.wsp-ava--dark:hover{ background:var(--wsp-ink-hover) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ava--add{ background:var(--surface-0); color:var(--text-muted); border:1px dashed var(--border-input); cursor:pointer; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-ava--add:hover{ background:var(--surface-1); color:var(--text-strong) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-avastack{ display:flex; padding-left:6px; flex:0 0 auto } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-avastack--5{ padding-left:5px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-avastack--0{ padding-left:0 } /* -- util -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-spacer{ flex:1; min-width:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-showsm{ display:none !important } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-mono{ font-family:var(--font-mono) } /* ------------------------------------------------------------------ */ /* §3 · SURFACE 1 — GRID + RAIL BOARD + TOOLBAR + POPOVER FILTER */ /* ------------------------------------------------------------------ */ .wsp .wsp-grid{ display:grid; grid-template-columns:198px minmax(0,1fr); gap:14px; align-items:start; animation:wsp-fade .2s ease; } .wsp .wsp-rail{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); overflow:hidden; } .wsp .wsp-rail__head{ display:flex; align-items:center; gap:8px; padding:10px 12px 11px; border-bottom:1px solid var(--line-100); } .wsp .wsp-rail__head--boards{ gap:7px; padding:11px 12px 9px } .wsp .wsp-rail__sel{ flex:1; min-width:0; height:30px; padding:0 8px; border:1px solid var(--border-input); border-radius:var(--wsp-r9); background:var(--surface-0); font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--text-strong); outline:none; cursor:pointer; } .wsp .wsp-railwrap{ padding:7px; display:flex; flex-direction:column; gap:5px } .wsp .wsp-boardcard{ display:block; width:100%; text-align:left; padding:8px 9px; border-radius:var(--wsp-r9); cursor:pointer; font-family:var(--font-body); background:linear-gradient(103deg, var(--wsp-tone-border) 0%, var(--wsp-tone-bg) 42%, var(--surface-0) 100%); border:1px solid var(--wsp-tone-bg); } .wsp .wsp-boardcard.is-on{ border-color:var(--wsp-ink) } .wsp .wsp-boardcard__row { display:flex; align-items:center; gap:7px } .wsp .wsp-boardcard__ic { width:13px; height:13px; flex:0 0 auto; color:var(--wsp-tone-text); display:inline-flex } .wsp .wsp-boardcard__name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11.5px; font-weight:600; color:var(--text-body); } .wsp .wsp-boardcard.is-on .wsp-boardcard__name{ font-weight:700; color:var(--text-strong) } .wsp .wsp-boardcard__mix { display:block; font-family:var(--font-mono); font-size:8.5px; color:var(--text-subtle); margin-top:4px } .wsp .wsp-boardcard__prog{ display:flex; align-items:center; gap:6px; margin-top:5px } .wsp .wsp-boardcard__short{ font-family:var(--font-mono); font-size:9px; color:var(--text-subtle); flex:0 0 auto } .wsp .wsp-boardcard .wsp-bar{ background:var(--wsp-tone-text) } .wsp .wsp-boardcard.is-on .wsp-bar{ background:var(--wsp-ink) } .wsp .wsp-main{ display:flex; flex-direction:column; gap:11px; min-width:0 } .wsp .wsp-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap } .wsp .wsp-toolbar__id{ display:inline-flex; align-items:center; gap:8px; min-width:0 } .wsp .wsp-toolbar__ic{ width:16px; height:16px; color:var(--text-strong); flex:0 0 auto; display:inline-flex } .wsp .wsp-toolbar__title{ font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text-strong); white-space:nowrap; } .wsp .wsp-toolbar__prog{ font-family:var(--font-mono); font-size:10px; color:var(--text-subtle) } .wsp .wsp-search{ display:flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:var(--wsp-rp); border:1px solid var(--border-input); background:var(--surface-0); flex:0 1 210px; min-width:150px; } .wsp .wsp-search i, .wsp .wsp-search svg{ color:var(--text-subtle); flex:0 0 auto; display:inline-flex } .wsp .wsp-search input{ flex:1; min-width:0; border:0; outline:none; background:transparent; font-family:var(--font-body); font-size:12px; color:var(--text-strong); } .wsp .wsp-pop{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r13); box-shadow:var(--shadow-pop); padding:12px 14px; display:flex; flex-direction:column; gap:10px; } .wsp .wsp-pop__head{ display:flex; align-items:center; gap:8px } .wsp .wsp-chiprow{ display:flex; align-items:center; gap:6px; flex-wrap:wrap } .wsp .wsp-chip--mine { padding:0 12px } .wsp .wsp-chip--mine.is-on{ background:var(--vs-yellow); color:var(--wsp-ink); border-color:var(--wsp-ink); font-weight:700 } .wsp .wsp-chip--label{ padding:0 11px } /* ------------------------------------------------------------------ */ /* §4 · SURFACE 2 — STRIP KONTEKS (tabs + panel Tasks + panel Projects) */ /* ------------------------------------------------------------------ */ .wsp .wsp-strip{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); overflow:hidden; } .wsp .wsp-strip__tabs{ display:flex; align-items:center; gap:6px; padding:7px 9px; border-bottom:1px solid var(--line-100); } .wsp .wsp-tabscroll{ display:flex; gap:2px; flex:1; min-width:0; overflow-x:auto } .wsp .wsp-tab{ border:0; background:transparent } /* dipasang bersama .wsp-pill */ .wsp .wsp-tab.is-on{ border:0 } .wsp .wsp-achip{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--wsp-rp); border:1px solid var(--line-200); background:var(--surface-0); font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--text-body); cursor:pointer; flex:0 0 auto; } .wsp .wsp-achip:hover{ background:var(--surface-1); color:var(--text-strong) } .wsp .wsp-crumb{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle); flex:0 0 auto; white-space:nowrap; } .wsp .wsp-panel{ padding:10px 11px 12px; display:flex; flex-direction:column; gap:8px } .wsp .wsp-panel--proj { padding:11px 12px 13px; gap:10px } .wsp .wsp-panel--team-top{ padding:11px 12px 2px; gap:9px } .wsp .wsp-panel--team-bot{ padding:8px 12px 13px; gap:16px; flex-direction:row; align-items:center; flex-wrap:wrap } .wsp .wsp-panel__head{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap } .wsp .wsp-panel__head--center{ align-items:center } .wsp .wsp-panel__hint{ font-size:11px; color:var(--text-subtle); flex:1; min-width:140px } /* chip cakupan project — tone di luar, ink saat aktif */ .wsp .wsp-scopechip{ font-weight:600; background:var(--wsp-tone-bg); color:var(--wsp-tone-text); border-color:var(--wsp-tone-border); } .wsp .wsp-scopechip.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); border-color:var(--wsp-ink); font-weight:700 } .wsp .wsp-scopechip__label{ white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis } .wsp .wsp-scopechip__label--170{ max-width:170px } /* grid kartu project */ .wsp .wsp-projgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(258px,1fr)); gap:10px; align-items:start; } .wsp .wsp-projcard{ display:flex; flex-direction:column; gap:9px; min-width:0; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r12); padding:11px 13px 12px; box-shadow:var(--shadow-card); font-family:var(--font-body); } .wsp .wsp-projcard.is-on{ border-color:var(--wsp-ink) } .wsp .wsp-projcard__tags{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-width:0 } .wsp .wsp-projcard__code{ font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-strong); flex:0 0 auto } .wsp .wsp-projcard__body{ min-width:0 } .wsp .wsp-projcard__name{ font-size:13px; font-weight:700; color:var(--text-strong); line-height:1.35; overflow-wrap:anywhere } .wsp .wsp-projcard__client{ font-size:11px; color:var(--text-subtle); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wsp .wsp-projcard__prog{ display:flex; flex-direction:column; gap:5px } .wsp .wsp-projcard__progrow{ display:flex; align-items:center; gap:7px } .wsp .wsp-projcard__pct{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; color:var(--text-strong); flex:0 0 auto } .wsp .wsp-projcard__counts{ font-family:var(--font-mono); font-size:9px; color:var(--text-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wsp .wsp-projcard__foot{ display:flex; align-items:center; gap:8px; padding-top:9px; border-top:1px solid var(--line-100); min-width:0; } .wsp .wsp-projcard__lead{ flex:1; min-width:0; font-size:10.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wsp .wsp-projcard__period{ font-family:var(--font-mono); font-size:9px; color:var(--text-subtle); flex:0 0 auto; white-space:nowrap } .wsp .wsp-projcard__acts{ display:flex; align-items:center; flex-wrap:wrap; gap:6px } .wsp .wsp-projcard__acts .wsp-btn--dark{ padding:0 11px } /* empty state umum */ .wsp .wsp-empty{ display:flex; gap:9px; padding:12px 13px; border:1px dashed var(--line-200); border-radius:var(--wsp-r11); background:var(--surface-1); font-size:11.5px; line-height:1.55; color:var(--text-muted); } .wsp .wsp-empty i, .wsp .wsp-empty svg{ width:15px; height:15px; color:var(--text-muted); flex:0 0 auto; margin-top:1px; display:inline-flex; } .wsp .wsp-empty__text{ font-size:11.5px; line-height:1.55; color:var(--text-muted) } /* ------------------------------------------------------------------ */ /* §5 · SURFACE 3 — PLANNER (kalender bulan + timeline + tenggat) */ /* ------------------------------------------------------------------ */ .wsp .wsp-plan__scope{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px 0 } .wsp .wsp-plan__note { font-size:11px; color:var(--text-subtle) } .wsp .wsp-plan__body { padding:10px 12px 12px; display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap } .wsp .wsp-plan__left { flex:0 1 300px; min-width:250px } .wsp .wsp-plan__right{ flex:1 1 220px; min-width:200px; display:flex; flex-direction:column; gap:6px } .wsp .wsp-plan__nav { display:flex; align-items:center; gap:6px; margin-bottom:7px } .wsp .wsp-navbtn{ width:22px; height:22px; display:grid; place-items:center; border-radius:var(--wsp-r6); border:1px solid var(--line-200); background:var(--surface-0); color:var(--text-muted); cursor:pointer; flex:0 0 auto; } .wsp .wsp-navbtn:hover{ background:var(--surface-1) } .wsp .wsp-plan__title{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-strong); flex:1; text-align:center; } .wsp .wsp-seg{ display:flex; gap:2px; padding:2px; background:var(--surface-1); border-radius:var(--wsp-rp); margin-left:4px } .wsp .wsp-seg__btn{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:var(--wsp-rp); border:0; background:transparent; color:var(--text-muted); font-family:var(--font-body); font-size:10.5px; font-weight:500; cursor:pointer; } .wsp .wsp-seg__btn.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); font-weight:700 } .wsp .wsp-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:3px } .wsp .wsp-dow span{ text-align:center; font-family:var(--font-mono); font-size:8px; color:var(--text-subtle) } .wsp .wsp-cells{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px } .wsp .wsp-day{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:28px; border-radius:var(--wsp-r7); cursor:pointer; font-family:var(--font-mono); font-size:10px; font-weight:500; border:1px solid transparent; background:transparent; color:var(--text-subtle); } .wsp .wsp-day.has-task{ border-color:var(--line-200); background:var(--surface-0); color:var(--text-strong); font-weight:600 } .wsp .wsp-day.is-today{ border-color:var(--vs-yellow); background:var(--pst-identity-bg); color:var(--text-strong); font-weight:700 } .wsp .wsp-day.is-on { border-color:var(--wsp-ink); background:var(--wsp-ink); color:var(--wsp-on-ink); font-weight:700 } .wsp .wsp-day.is-blank{ border:0; background:transparent; cursor:default } .wsp .wsp-day__dots{ display:flex; gap:2px } .wsp .wsp-day__dot { width:4px; height:4px; border-radius:var(--wsp-rp); background:var(--wsp-tone-text) } .wsp .wsp-tl{ display:flex; flex-direction:column; gap:6px } .wsp .wsp-tl__scale{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:8px; letter-spacing:.06em; color:var(--text-subtle); } .wsp .wsp-row{ display:block; width:100%; text-align:left; border:0; background:transparent; padding:0; cursor:pointer; font-family:var(--font-body); } .wsp .wsp-row__head { display:flex; align-items:center; gap:6px } .wsp .wsp-row__title{ font-size:10.5px; font-weight:600; color:var(--text-body); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wsp .wsp-row__due { font-family:var(--font-mono); font-size:9px; color:var(--text-subtle); flex:0 0 auto } .wsp .wsp-row--due .wsp-row__title{ font-size:11px } .wsp .wsp-row--due .wsp-row__due { font-size:9.5px } .wsp .wsp-gtrack{ display:block; position:relative; height:7px; border-radius:var(--wsp-rp); background:var(--ink-050); margin-top:4px; overflow:hidden; } .wsp .wsp-gtrack--thin{ height:5px } .wsp .wsp-gbar{ position:absolute; top:0; height:100%; border-radius:var(--wsp-rp); background:var(--wsp-tone-text); opacity:.85; /* left/width inline (data) */ } .wsp .wsp-gbar--due{ min-width:12% } .wsp .wsp-msblock{ margin-top:4px; padding-top:9px; border-top:1px solid var(--line-100); display:flex; flex-direction:column; gap:6px; } .wsp .wsp-ms{ display:flex; align-items:center; gap:7px } .wsp .wsp-ms__label{ font-size:11px; color:var(--text-body); flex:1; min-width:0 } .wsp .wsp-ms__date { font-family:var(--font-mono); font-size:9.5px; color:var(--text-subtle) } .wsp .wsp-plan__empty{ font-size:11.5px; color:var(--text-subtle) } /* ------------------------------------------------------------------ */ /* §6 · SURFACE 4 — TEAM (members, project team, progress board) */ /* ------------------------------------------------------------------ */ .wsp .wsp-memberwrap{ display:flex; gap:6px; flex-wrap:wrap } .wsp .wsp-loadwrap { display:flex; gap:4px; flex-wrap:wrap } .wsp .wsp-member{ display:flex; align-items:center; gap:8px; padding:6px 11px 6px 6px; border-radius:var(--wsp-rp); cursor:pointer; font-family:var(--font-body); background:var(--surface-0); border:1px solid var(--line-200); } .wsp .wsp-member.is-on{ background:var(--surface-1); border-color:var(--wsp-ink) } .wsp .wsp-member.is-on .wsp-ava{ background:var(--wsp-ink); color:var(--wsp-on-ink) } .wsp .wsp-member--load{ padding:6px 10px 6px 6px; background:transparent; border-color:transparent } .wsp .wsp-member__meta { display:flex; flex-direction:column; align-items:flex-start } .wsp .wsp-member__name { font-size:11.5px; font-weight:600; color:var(--text-strong); line-height:1.2 } .wsp .wsp-member__role { font-size:10px; color:var(--text-subtle); line-height:1.2 } .wsp .wsp-member__count{ font-family:var(--font-mono); font-size:9px; font-weight:700; line-height:1.2; color:var(--text-strong) } .wsp .wsp-member__count.is-idle{ color:var(--text-subtle) } .wsp .wsp-pjtwrap{ display:flex; flex-direction:column; gap:6px; margin-top:2px } .wsp .wsp-pjt{ display:flex; align-items:center; gap:9px; padding:7px 10px; border:1px solid var(--line-100); border-radius:var(--wsp-r10); background:var(--surface-1); } .wsp .wsp-pjt__code{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; color:var(--text-strong); flex:0 0 auto } .wsp .wsp-pjt__name{ flex:1; min-width:0; font-size:11.5px; color:var(--text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wsp .wsp-pjt__lead{ font-size:10.5px; color:var(--text-muted); flex:0 0 auto; white-space:nowrap } .wsp .wsp-progblock{ flex:0 1 220px; min-width:180px } .wsp .wsp-progblock__head{ display:flex; align-items:center; gap:7px } .wsp .wsp-progblock__pct { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-strong) } .wsp .wsp-progblock .wsp-track{ margin-top:5px } .wsp .wsp-gt{ display:flex; align-items:center; gap:10px; margin-top:7px; flex-wrap:wrap } .wsp .wsp-gt__item { display:inline-flex; align-items:center; gap:5px } .wsp .wsp-gt__label{ font-size:10.5px; color:var(--text-muted) } .wsp .wsp-gt__n { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-strong) } .wsp .wsp-gdot{ width:7px; height:7px; border-radius:var(--wsp-rp); flex:0 0 auto } .wsp .wsp-gdot--todo { background:var(--ink-300) } .wsp .wsp-gdot--progress{ background:var(--accent-blue) } .wsp .wsp-gdot--complete{ background:var(--accent-mint) } /* ------------------------------------------------------------------ */ /* §7 · SURFACE 5 — BOARD BAR · STATUS MANAGER · KANBAN · COMPOSER */ /* ------------------------------------------------------------------ */ .wsp .wsp-boardbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap } .wsp .wsp-boardbar__count{ font-family:var(--font-mono); font-size:10px; color:var(--text-subtle) } /* -- status manager -- */ .wsp .wsp-statusmgr{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-pop); padding:13px 15px 15px; display:flex; flex-direction:column; gap:12px; } .wsp .wsp-statusmgr__head { display:flex; align-items:center; gap:8px } .wsp .wsp-statusmgr__title{ font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--text-strong); flex:1 } .wsp .wsp-statusmgr__hint { font-size:11px; color:var(--text-subtle) } .wsp .wsp-sgroup { display:flex; flex-direction:column; gap:5px } .wsp .wsp-sgroup__head{ display:flex; align-items:center; gap:7px } .wsp .wsp-sgroup__dot { width:8px; height:8px; border-radius:var(--wsp-rp); flex:0 0 auto } .wsp .wsp-sgroup__label{ font-size:11.5px; font-weight:600; color:var(--text-muted); flex:1 } .wsp .wsp-srow{ display:flex; align-items:center; gap:7px; padding:4px 7px 4px 3px; border-radius:var(--wsp-r8) } .wsp .wsp-srow:hover{ background:var(--surface-1) } .wsp .wsp-srow__grip{ width:12px; height:12px; color:var(--ink-300); flex:0 0 auto; display:inline-flex } .wsp .wsp-srow__chip{ display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:var(--wsp-rp); background:var(--wsp-tone-bg); border:1px solid var(--wsp-tone-border); color:var(--wsp-tone-text); font-family:var(--font-body); font-size:12px; font-weight:600; } .wsp .wsp-srow__count{ font-family:var(--font-mono); font-size:9px; color:var(--text-subtle) } .wsp .wsp-srow__def { font-family:var(--font-mono); font-size:8px; letter-spacing:.12em; color:var(--text-subtle) } .wsp .wsp-move{ height:24px; padding:0 9px; border-radius:var(--wsp-rp); border:1px solid var(--line-200); background:var(--surface-0); font-family:var(--font-body); font-size:10px; font-weight:600; color:var(--text-muted); cursor:pointer; flex:0 0 auto; } .wsp .wsp-move:hover{ background:var(--surface-1); color:var(--text-strong) } .wsp .wsp-addstatus{ display:flex; align-items:center; gap:6px; padding-left:18px } .wsp .wsp-input--status{ flex:0 1 200px; height:28px; padding:0 10px; border:1px solid var(--ink-300); border-radius:var(--wsp-r8); font-family:var(--font-body); font-size:11.5px; color:var(--text-strong); outline:none; background:var(--surface-0); } /* -- papan -- */ .wsp .wsp-board{ display:flex; gap:12px; overflow-x:auto; align-items:flex-start; padding-bottom:10px } .wsp .wsp-col{ flex:0 0 274px; border-radius:var(--wsp-r14); background:var(--ink-050); border:1px solid var(--line-100); transition:background .14s ease; } .wsp .wsp-col.is-over{ background:var(--wsp-drop-bg); border-style:dashed; border-color:var(--wsp-drop-line) } .wsp .wsp-col__head { padding:11px 12px 9px } .wsp .wsp-col__top { display:flex; align-items:center; gap:7px } .wsp .wsp-col__dot { width:8px; height:8px; border-radius:var(--wsp-rp); background:var(--wsp-tone-text); flex:0 0 auto } .wsp .wsp-col__label{ font-size:12px; font-weight:700; color:var(--text-strong); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Elemen ini membawa alias .ws-kcol__count (dipakai wsKanbanDnD untuk meng-update angka). Rule global admin.css:4172 ikut kena, jadi geometri lamanya (min-width/height 20px, inline-flex, tabular-nums) harus dinolkan eksplisit — kalau tidak chip jadi kotak 20x20, bukan pill auto-height. */ .wsp .wsp-col__count{ font-family:var(--font-mono); font-size:10px; font-weight:700; font-variant-numeric:normal; display:inline-block; min-width:0; height:auto; padding:1px 6px; border-radius:var(--wsp-rp); background:var(--surface-0); border:1px solid var(--line-200); color:var(--text-muted); flex:0 0 auto; } .wsp .wsp-col__sub { display:flex; align-items:center; gap:6px; margin-top:7px } .wsp .wsp-col__group{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:1px 6px; border-radius:var(--wsp-rp); background:var(--wsp-tone-bg); color:var(--wsp-tone-text); border:1px solid var(--wsp-tone-border); } .wsp .wsp-col__def { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.12em; color:var(--text-subtle) } .wsp .wsp-col__cards{ display:flex; flex-direction:column; gap:7px; padding:0 10px 8px; min-height:56px } /* placeholder di-inject wsKanbanDnD dengan className ws-kcol__empty → kena rule global admin.css:4177 (kotak dashed rata tengah). Netralkan. */ .wsp .wsp-col .ws-kcol__empty{ margin:0; padding:6px 2px; text-align:left; border:0; border-radius:0; font-size:11.5px; color:var(--text-subtle); } .wsp .wsp-insert{ height:3px; border-radius:var(--wsp-rp); background:var(--wsp-ink); margin:0 2px 7px } /* -- kartu kanban -- */ .wsp .wsp-kcard{ position:relative; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r10); padding:10px 11px; cursor:grab; box-shadow:var(--shadow-card); transition:border-color .14s ease, transform .14s ease; } .wsp .wsp-kcard:hover{ border-color:var(--ink-300); transform:translateY(-1px) } .wsp .wsp-kcard.is-dragging{ opacity:.45; cursor:grabbing; transform:none } /* State yang dipasang wsKanbanDnD (admin.js:668/672). Rule legacy-nya mensyaratkan .workspace-layer .ws-kcard, jadi kartu .wsp-kcard tidak dapat feedback apa pun tanpa pasangan ini. */ .wsp .wsp-kcard.is-saving{ opacity:.7; cursor:progress; transform:none } .wsp .wsp-kcard.is-settled{ border-color:var(--pst-success-border) } .wsp .wsp-kcard:active{ cursor:grabbing } .wsp .wsp-kcard__labels{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px } .wsp .wsp-kcard__meta { display:flex; align-items:center; gap:6px } .wsp .wsp-kcard__code { font-family:var(--font-mono); font-size:10px; color:var(--text-subtle) } .wsp .wsp-kcard__title { font-size:12.5px; font-weight:600; color:var(--text-body); margin-top:7px; line-height:1.4 } .wsp .wsp-kcard__foot { display:flex; align-items:center; gap:8px; margin-top:9px; color:var(--text-subtle) } .wsp .wsp-kcard__chip{ display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:10px; padding:1px 6px; border-radius:var(--wsp-r6); color:var(--text-subtle); } .wsp .wsp-kcard__chip.is-full{ background:var(--pst-success-bg); color:var(--pst-success-text); font-weight:700 } .wsp .wsp-kcard__due{ display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:10px; color:var(--text-subtle); } .wsp .wsp-kcard__due.is-urgent{ color:var(--pst-danger-text); font-weight:700 } /* -- composer kartu -- */ .wsp .wsp-composer{ background:var(--surface-0); border:1px solid var(--wsp-ink); border-radius:var(--wsp-r10); padding:9px 10px; box-shadow:var(--shadow-pop); } .wsp .wsp-composer textarea{ width:100%; box-sizing:border-box; min-height:52px; border:0; outline:none; resize:none; background:transparent; font-family:var(--font-body); font-size:12.5px; line-height:1.45; color:var(--text-strong); } .wsp .wsp-composer__foot{ display:flex; align-items:center; gap:6px; margin-top:6px } .wsp .wsp-composer select{ height:28px; max-width:96px; padding:0 5px; border:1px solid var(--border-input); border-radius:var(--wsp-r8); background:var(--surface-0); font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); } .wsp .wsp-composer .wsp-btn--28{ font-size:11.5px } .wsp .wsp-composer .wsp-btn--dark.wsp-btn--28{ padding:0 13px } /* -- tombol tambah kartu / kolom -- */ .wsp .wsp-addcard{ display:flex; align-items:center; gap:7px; width:calc(100% - 20px); margin:0 10px 10px; height:34px; padding:0 10px; border-radius:var(--wsp-r9); border:1px dashed var(--line-200); background:transparent; font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--text-subtle); cursor:pointer; text-align:left; } .wsp .wsp-addcard:hover{ background:var(--surface-0); color:var(--text-strong); border-color:var(--ink-300) } .wsp .wsp-addcol{ flex:0 0 168px; align-self:stretch; min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-radius:var(--wsp-r14); border:1px dashed var(--line-200); background:transparent; font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--text-subtle); cursor:pointer; } .wsp .wsp-addcol:hover{ background:var(--ink-050); color:var(--text-strong); border-color:var(--ink-300) } /* -- footnote papan -- */ .wsp .wsp-foot{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-subtle) } .wsp .wsp-foot strong{ color:var(--text-strong); font-weight:600 } .wsp .wsp-foot i, .wsp .wsp-foot svg{ flex:0 0 auto; display:inline-flex } /* ------------------------------------------------------------------ */ /* §8 · SURFACE 6 — DIALOG (board baru · lampiran · project baru) */ /* ------------------------------------------------------------------ */ /* 8a. Jalur standalone (reproduksi persis master: scrim + panel fixed) */ .wsp-scrim{ position:fixed; inset:0; z-index:50; background:var(--wsp-scrim); backdrop-filter:blur(3px); animation:wsp-fade .15s ease; } .wsp-scrim--60{ z-index:60 } .wsp-dlg{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:51; background:var(--surface-0); border-radius:var(--wsp-r20); box-shadow:var(--shadow-pop); animation:wsp-rise .18s ease; overflow:hidden; font-family:var(--font-body); color:var(--text-body); } .wsp-dlg--61 { z-index:61 } .wsp-dlg--460{ width:min(460px, 94vw) } .wsp-dlg--560{ width:min(560px, 94vw); max-height:88vh; overflow-y:auto } .wsp-dlg--620{ width:min(620px, 94vw); max-height:88vh; overflow-y:auto } .wsp-dlg--card{ width:min(940px, 96vw); height:min(86vh, 780px); display:flex; flex-direction:column; overflow:hidden; } /* 8b. Jalur adminModal — INI yang dipakai (spec_jsPlan.md:56/61). Di rute hash #/workspace, adminModal() menempelkan .workspace-layer + .ws-command-window ke .modal-center (admin.js:1055 & :1077). Rule lama admin.css:4552 (0,3,0) dan :4553 .wide (0,4,0) mengunci 640px/980px + radius 18px, jadi sizing WSP harus ≥ (0,4,0) supaya menang. Selektor pendek dipertahankan sebagai fallback bila layer class tidak terpasang. */ .modal-center.wsp-modal { border-radius:var(--wsp-r20) } .modal-center.wsp-modal--460 { width:min(460px, 94vw); max-width:460px } .modal-center.wsp-modal--560 { width:min(560px, 94vw); max-width:560px; max-height:88vh } .modal-center.wsp-modal--620 { width:min(620px, 94vw); max-width:620px; max-height:88vh } .modal-center.wsp-modal--card{ max-width:940px; width:min(940px, 96vw); height:min(86vh, 780px); max-height:min(86vh, 780px); } .modal-center.workspace-layer.ws-command-window.wsp-modal { border-radius:var(--wsp-r20) } .modal-center.workspace-layer.ws-command-window.wsp-modal--460{ width:min(460px, 94vw); max-width:460px } .modal-center.workspace-layer.ws-command-window.wsp-modal--560{ width:min(560px, 94vw); max-width:560px; max-height:88vh } .modal-center.workspace-layer.ws-command-window.wsp-modal--620{ width:min(620px, 94vw); max-width:620px; max-height:88vh } .modal-center.workspace-layer.ws-command-window.wsp-modal--card, .modal-center.workspace-layer.ws-command-window.wsp-modal--card.wide{ width:min(940px, 96vw); max-width:940px; height:min(86vh, 780px); max-height:min(86vh, 780px); } /* -- anatomi dialog -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__head{ display:flex; align-items:center; gap:10px; padding:17px 20px 13px; border-bottom:1px solid var(--line-100); flex:0 0 auto; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__head--lg{ padding:18px 22px 14px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__badge{ width:32px; height:32px; border-radius:var(--wsp-r9); background:var(--ink-050); display:grid; place-items:center; flex:0 0 auto; color:var(--text-strong); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__id{ flex:1; min-width:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__title{ display:block; font-family:var(--font-display); font-size:15.5px; font-weight:700; color:var(--text-strong); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__title--lg{ font-size:16px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__sub{ display:block; font-size:11.5px; color:var(--text-subtle); margin-top:1px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__body{ padding:16px 20px 19px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; min-height:0; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__body--att{ padding:15px 20px 19px; gap:13px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__body--proj{ padding:16px 22px 20px; gap:16px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__foot{ display:flex; align-items:center; gap:8px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__foot--proj{ padding-top:4px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__hint{ flex:1; font-size:11.5px; color:var(--text-subtle) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__block{ min-width:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dlg__blockhead{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:8px; } /* -- field -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-field{ display:flex; flex-direction:column; gap:6px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-field--grid{ display:grid; grid-template-rows:18px 38px auto; gap:6px; align-content:start; min-width:0; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-field__label{ align-self:center } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-field__label--row{ display:flex; align-items:center; gap:6px; min-width:0; align-self:center; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-input{ height:38px; padding:0 12px; border:1px solid var(--border-input); border-radius:var(--wsp-r10); font-family:var(--font-body); font-size:13px; color:var(--text-strong); outline:none; background:var(--surface-0); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-input--date{ font-size:12.5px; padding:0 10px; flex:1; min-width:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-input--grow{ flex:1; min-width:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-select{ height:38px; padding:0 10px; border:1px solid var(--border-input); border-radius:var(--wsp-r10); font-family:var(--font-body); font-size:13px; color:var(--text-strong); background:var(--surface-0); } /* -- callout -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-callout{ display:flex; gap:9px; padding:11px 12px; border:1px solid var(--line-200); border-radius:var(--wsp-r11); background:var(--surface-1); font-size:11.5px; line-height:1.55; color:var(--text-muted); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-callout strong{ color:var(--text-strong) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-callout i, :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-callout svg{ width:15px; height:15px; flex:0 0 auto; margin-top:1px; display:inline-flex; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-callout--tone{ align-items:flex-start; padding:11px 14px; border-radius:var(--wsp-r10); background:var(--wsp-tone-bg); border-color:var(--wsp-tone-border); color:var(--wsp-tone-text); font-size:12px; line-height:1.5; } /* -- dropzone lampiran -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:26px 18px; border-radius:var(--wsp-r13); cursor:pointer; text-align:center; border:1.5px dashed var(--border-input); background:var(--surface-0); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-drop.is-drag{ border-color:var(--wsp-ink); background:var(--surface-1) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-drop i, :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-drop svg{ width:22px; height:22px; color:var(--text-muted) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-drop__title{ font-size:12.5px; font-weight:600; color:var(--text-strong) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-drop__meta{ font-family:var(--font-mono); font-size:10px; color:var(--text-subtle) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-linkrow{ display:flex; gap:7px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-linkstack{ display:flex; flex-direction:column; gap:9px } /* -- preview link -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-lp{ display:flex; align-items:center; gap:11px; padding:11px 12px; border:1px solid var(--pst-blue-border); border-radius:var(--wsp-r12); background:var(--pst-blue-bg); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-lp__ini{ width:38px; height:38px; border-radius:var(--wsp-r10); background:var(--surface-0); color:var(--pst-blue-text); display:grid; place-items:center; flex:0 0 auto; font-family:var(--font-mono); font-size:15px; font-weight:700; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-lp__id{ flex:1; min-width:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-lp__title{ display:block; font-size:12.5px; font-weight:700; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-lp__meta{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--pst-blue-text); margin-top:2px; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-lp__badge{ font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--pst-blue-text); flex:0 0 auto; } /* -- antrean lampiran -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-qwrap{ display:flex; flex-direction:column; gap:6px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-q{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line-200); border-radius:var(--wsp-r10); background:var(--surface-1); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-q__thumb{ width:34px; height:34px; border-radius:var(--wsp-r8); flex:0 0 auto; display:block; border:1px solid var(--line-200); background:var(--ink-050) center/cover no-repeat; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-q__ico{ width:30px; height:30px; border-radius:var(--wsp-r8); background:var(--ink-050); display:grid; place-items:center; flex:0 0 auto; color:var(--text-muted); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-q__link{ width:30px; height:30px; border-radius:var(--wsp-r8); background:var(--pst-blue-bg); color:var(--pst-blue-text); display:grid; place-items:center; flex:0 0 auto; font-family:var(--font-mono); font-size:12px; font-weight:700; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-q__id{ flex:1; min-width:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-q__name{ display:block; font-size:12px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-q__meta{ display:block; font-family:var(--font-mono); font-size:9.5px; color:var(--text-subtle); margin-top:1px; } /* -- pilih tipe project -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kindgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:8px; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kindcard{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; width:100%; padding:11px 13px; border-radius:var(--wsp-r12); cursor:pointer; font-family:var(--font-body); background:linear-gradient(103deg, var(--wsp-tone-border) 0%, var(--wsp-tone-bg) 44%, var(--surface-0) 100%); border:1px solid var(--wsp-tone-bg); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kindcard.is-on{ border-color:var(--wsp-ink); box-shadow:0 0 0 1px var(--wsp-ink) inset; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kindcard__row{ display:flex; align-items:center; gap:8px; width:100% } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kindcard__ic{ width:15px; height:15px; flex:0 0 auto; color:var(--wsp-tone-text); display:inline-flex; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kindcard__label{ font-size:12.5px; font-weight:700; color:var(--text-strong) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kindcard__desc{ display:block; font-size:11px; line-height:1.5; color:var(--text-subtle); text-align:left; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-kindcard__board{ display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--wsp-tone-text); } /* -- form grid + saran customer -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-formgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-custstack{ display:flex; flex-direction:column; gap:5px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-custrow{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:7px 10px; border-radius:var(--wsp-r9); cursor:pointer; font-family:var(--font-body); background:var(--surface-0); border:1px solid var(--line-200); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-custrow:hover{ background:var(--surface-1); border-color:var(--ink-300) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-custrow__ava{ width:24px; height:24px; border-radius:var(--wsp-rp); background:var(--ink-050); color:var(--text-muted); display:grid; place-items:center; flex:0 0 auto; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-custrow__id{ flex:1; min-width:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-custrow__name{ display:block; font-size:12px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-custrow__meta{ display:block; font-family:var(--font-mono); font-size:9px; color:var(--text-subtle); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-linkchip{ display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:var(--wsp-r9); background:var(--wsp-tone-bg); border:1px solid var(--wsp-tone-border); color:var(--wsp-tone-text); font-size:11px; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-linkchip i, :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-linkchip svg{ width:13px; height:13px; flex:0 0 auto } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-linkchip__meta{ flex:1; min-width:0; font-family:var(--font-mono); font-size:9.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-linkchip__text{ flex:1; min-width:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-linkchip__btn{ border:0; background:transparent; font-family:var(--font-body); font-size:10.5px; font-weight:700; color:var(--wsp-tone-text); cursor:pointer; flex:0 0 auto; } /* -- jadwal + checkbox + deliverable + seed -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-daterow{ display:flex; align-items:center; gap:7px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-datesep{ font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); flex:0 0 auto } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-datenote{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-subtle) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-chk{ width:15px; height:15px; border-radius:var(--wsp-r4); display:grid; place-items:center; flex:0 0 auto; background:var(--surface-0); border:1px solid var(--border-input); color:var(--wsp-on-ink); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-chk.is-on{ background:var(--wsp-ink); border-color:var(--wsp-ink) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-chk--lg{ width:17px; height:17px; border-radius:var(--wsp-r5); cursor:pointer } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-deliverrow{ display:flex; gap:7px; flex-wrap:wrap } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-deliver{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:var(--wsp-rp); cursor:pointer; font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--text-strong); background:var(--surface-0); border:1px solid var(--line-200); } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-deliver.is-on{ background:var(--surface-1); border-color:var(--wsp-ink) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-delivernote{ font-size:11px; color:var(--text-subtle); margin-top:8px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-seedrow{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:var(--wsp-r10); border:1px solid var(--line-200); background:var(--surface-1); cursor:pointer; } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-seedrow__id{ flex:1; min-width:0 } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-seedrow__title{ display:block; font-size:12.5px; font-weight:600; color:var(--text-strong) } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-seedrow__note{ display:block; font-size:11px; color:var(--text-subtle); margin-top:1px } /* ------------------------------------------------------------------ */ /* §9 · SURFACE 7 — CARD MODAL (detail tugas) */ /* ------------------------------------------------------------------ */ .wsp-cm{ display:grid; grid-template-columns:minmax(0,1fr) 216px; overflow:hidden; flex:1 1 auto; min-height:0; } .wsp-cm__head{ padding:16px 22px 13px; border-bottom:1px solid var(--line-100); flex:0 0 auto } .wsp-cm__row { display:flex; align-items:center; gap:8px } .wsp-cm__code{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-subtle) } .wsp-cm__title{ display:block; width:calc(100% + 12px); box-sizing:border-box; margin:9px 0 3px -7px; padding:3px 6px; border:1px solid transparent; border-radius:var(--wsp-r8); font-family:var(--font-display); font-size:19px; font-weight:700; line-height:1.3; color:var(--text-strong); background:transparent; outline:none; } .wsp-cm__title:hover{ border-color:var(--line-200); background:var(--surface-1) } .wsp-cm__title:focus{ border-color:var(--ink-300); background:var(--surface-0) } .wsp-cm__crumb{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11.5px; color:var(--text-subtle); } .wsp-cm__crumb b{ color:var(--text-body); font-weight:600 } .wsp-minisel{ height:26px; padding:0 6px; border:1px solid var(--border-input); border-radius:var(--wsp-r7); background:var(--surface-0); font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--text-strong); cursor:pointer; } .wsp-minisel--mono{ font-family:var(--font-mono); font-size:10.5px; font-weight:700 } .wsp-cm__main{ overflow-y:auto; padding:16px 18px 22px; display:flex; flex-direction:column; gap:12px; min-width:0; background:var(--canvas); } /* -- kotak meta (label · anggota · tenggat) -- */ .wsp-meta{ display:grid; grid-template-columns:repeat(auto-fit, minmax(148px,1fr)); gap:16px; padding:13px 15px; border:1px solid var(--line-200); border-radius:var(--wsp-r12); background:var(--surface-0); } .wsp-meta__cell{ min-width:0 } .wsp-meta__kicker{ font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:7px; } .wsp-meta__row{ display:flex; align-items:center; gap:5px; flex-wrap:wrap } .wsp-meta__none{ font-size:12px; color:var(--text-subtle) } /* -- seksi konten -- */ .wsp-sect{ padding:13px 15px 15px; border:1px solid var(--line-200); border-radius:var(--wsp-r12); background:var(--surface-0); } .wsp-sect__head { display:flex; align-items:center; gap:8px; margin-bottom:9px } .wsp-sect__head--10{ margin-bottom:10px } .wsp-sect__ic { width:15px; height:15px; color:var(--text-muted); flex:0 0 auto; display:inline-flex } .wsp-sect__title{ font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--text-strong); flex:1 } .wsp-sect__count{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-muted) } /* -- picker label / assignee -- */ .wsp-pick{ border:1px solid var(--line-200); border-radius:var(--wsp-r12); background:var(--surface-1); padding:12px 13px } .wsp-pick__title{ font-size:11.5px; font-weight:700; color:var(--text-strong); margin-bottom:9px } .wsp-pick__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); gap:6px } .wsp-pick__grid--asg{ grid-template-columns:repeat(auto-fill, minmax(190px,1fr)) } .wsp-pick__row{ display:flex; align-items:center; gap:8px; height:34px; padding:0 10px; border-radius:var(--wsp-r9); cursor:pointer; font-family:var(--font-body); background:var(--surface-0); border:1px solid var(--line-200); } .wsp-pick__row.is-on{ border-color:var(--wsp-ink) } .wsp-pick__row--asg{ height:38px; gap:9px } .wsp-pick__name{ flex:1; min-width:0; text-align:left; font-size:12px; font-weight:600; color:var(--text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wsp-pick__check{ width:14px; height:14px; color:var(--text-strong); flex:0 0 auto; display:inline-flex } /* -- chip tenggat -- */ .wsp-duechip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:var(--wsp-r9); cursor:pointer; font-family:var(--font-mono); font-size:11.5px; font-weight:700; background:var(--surface-0); border:1px solid var(--border-input); color:var(--text-strong); } .wsp-duechip.is-urgent{ background:var(--pst-danger-bg); border-color:var(--pst-danger-border); color:var(--pst-danger-text) } .wsp-dueedit{ display:flex; align-items:center; gap:6px } .wsp-dueinput{ height:28px; padding:0 8px; border:1px solid var(--ink-300); border-radius:var(--wsp-r8); font-family:var(--font-mono); font-size:11.5px; color:var(--text-strong); outline:none; background:var(--surface-0); } /* -- deskripsi + editor rich text -- */ .wsp-desc{ border:1px solid transparent; border-radius:var(--wsp-r10); padding:10px 12px; margin-left:-12px; cursor:text; font-size:13px; color:var(--text-body); } .wsp-desc:hover{ background:var(--surface-1); border-color:var(--line-100) } .wsp-editor{ border:1px solid var(--ink-300); border-radius:var(--wsp-r12); overflow:hidden; background:var(--surface-0); box-shadow:var(--shadow-card); } .wsp-editor--cmt{ border-color:var(--border-input); box-shadow:none } .wsp-editor__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:1px; padding:5px 7px; border-bottom:1px solid var(--line-100); background:var(--surface-1); } .wsp-editor__tool{ width:28px; height:28px; display:grid; place-items:center; border-radius:var(--wsp-r7); border:0; background:transparent; color:var(--text-muted); cursor:pointer; flex:0 0 auto; } .wsp-editor__tool:hover{ background:var(--ink-050); color:var(--text-strong) } .wsp-editor__tool.is-on{ background:var(--ink-050); color:var(--text-strong) } .wsp-editor__acts{ display:flex; align-items:center; gap:7px; margin-top:9px } .wsp-editor__acts--cmt{ gap:7px; margin-top:8px } .wsp-shortcut{ font-family:var(--font-mono); font-size:10px; color:var(--text-subtle) } /* -- checklist -- */ .wsp-ckprog{ display:flex; align-items:center; gap:10px; margin-bottom:10px } .wsp-cklist{ display:flex; flex-direction:column; gap:1px } .wsp-ckrow{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:var(--wsp-r8); margin-left:-8px } .wsp-ckrow:hover{ background:var(--surface-1) } .wsp-ckbox{ width:18px; height:18px; border-radius:var(--wsp-r5); display:grid; place-items:center; cursor:pointer; flex:0 0 auto; background:var(--surface-0); border:1px solid var(--border-input); color:var(--wsp-on-ink); } .wsp-ckbox.is-on{ background:var(--wsp-ink); border-color:var(--wsp-ink) } .wsp-cktext{ flex:1; min-width:0; font-size:12.5px; line-height:1.45; color:var(--text-body) } .wsp-cktext.is-done{ color:var(--text-subtle); text-decoration:line-through } .wsp-ckadd{ display:flex; align-items:center; gap:7px; margin-top:9px } .wsp-ckadd input{ flex:1; min-width:0; height:32px; padding:0 12px; border:1px solid var(--border-input); border-radius:var(--wsp-r9); font-family:var(--font-body); font-size:12.5px; color:var(--text-strong); outline:none; background:var(--surface-0); } .wsp-ckadd .wsp-btn{ height:32px; padding:0 14px; border-radius:var(--wsp-r9); color:var(--text-strong) } /* -- lampiran kartu -- */ .wsp-attwrap{ display:flex; flex-direction:column; gap:6px } .wsp-att{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line-200); border-radius:var(--wsp-r10); background:var(--surface-0); } .wsp-att__id { flex:1; min-width:0 } .wsp-att__name{ display:block; font-size:12.5px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wsp-att__meta{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--text-subtle); margin-top:1px } .wsp-att__none{ font-size:12px; color:var(--text-subtle) } /* -- aktivitas & komentar -- */ .wsp-cmtbox{ display:flex; gap:10px; margin-bottom:16px } .wsp-cmtbox__body{ flex:1; min-width:0 } .wsp-feed{ display:flex; flex-direction:column } .wsp-feed__row{ display:flex; gap:10px; padding:11px 0; border-top:1px solid var(--line-100) } .wsp-feed__id { flex:1; min-width:0 } .wsp-feed__head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap } .wsp-feed__author{ font-size:12.5px; font-weight:700; color:var(--text-strong) } .wsp-feed__time { font-family:var(--font-mono); font-size:10px; color:var(--text-subtle) } .wsp-feed__cmt { display:block; margin-top:5px; font-size:13px; color:var(--text-body) } .wsp-feed__log { display:block; margin-top:3px; font-size:12.5px; color:var(--text-muted) } .wsp-feed__ava--log{ background:var(--ink-100); color:var(--ink-600); font-size:9px } /* -- sidebar aksi -- */ .wsp-side{ border-left:1px solid var(--line-100); background:var(--surface-1); padding:16px 14px 22px; overflow-y:auto; display:flex; flex-direction:column; gap:18px; } .wsp-side__kicker{ font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:8px; } .wsp-side__stack{ display:flex; flex-direction:column; gap:5px } .wsp-side__wrap { display:flex; gap:5px; flex-wrap:wrap } .wsp-sideitem{ display:flex; align-items:center; gap:8px; height:32px; padding:0 11px; border-radius:var(--wsp-r9); border:1px solid var(--line-200); background:var(--surface-0); font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--text-body); cursor:pointer; text-align:left; } .wsp-sideitem:hover{ background:var(--surface-1); border-color:var(--ink-300) } .wsp-sideitem.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); border-color:var(--wsp-ink); font-weight:700 } .wsp-sideitem i, .wsp-sideitem svg{ width:14px; height:14px; color:var(--text-muted); flex:0 0 auto; display:inline-flex } .wsp-sideitem.is-on i, .wsp-sideitem.is-on svg{ color:var(--wsp-on-ink) } .wsp-sideitem--danger{ border-color:var(--pst-danger-border); background:var(--pst-danger-bg); color:var(--pst-danger-text); } .wsp-sideitem--danger:hover{ filter:brightness(.97); border-color:var(--pst-danger-border); background:var(--pst-danger-bg) } .wsp-sideitem--danger i, .wsp-sideitem--danger svg{ color:var(--pst-danger-text) } .wsp-prio{ font-size:11.5px; height:29px } /* dipasang bersama .wsp-pill */ /* Harus se-spesifik .wsp-pill.is-on (0,3,0) + dideklarasikan setelahnya, kalau tidak chip prioritas aktif ter-render ink, bukan bertone. */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-prio.is-on, :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-prio.is-on:hover{ background:var(--wsp-tone-bg); color:var(--wsp-tone-text); border-color:var(--wsp-tone-text); font-weight:700; } .wsp-side__note{ margin-top:auto; font-size:11px; color:var(--text-subtle); line-height:1.5 } /* -- baris aksi versi layar sempit -- */ .wsp-mobacts{ display:none; flex-wrap:wrap; gap:6px; align-items:center; padding:2px 0; border-bottom:1px solid var(--line-100); } /* ------------------------------------------------------------------ */ /* §10 · .wsp-rich — tipografi rich-text (helmet master baris 32-43) */ /* ------------------------------------------------------------------ */ .wsp-rich{ min-height:140px; max-height:300px; overflow-y:auto; padding:13px 15px; font-size:13px; line-height:1.65; color:var(--text-body); outline:none; } .wsp-rich--cmt{ min-height:64px; max-height:200px; padding:11px 13px; line-height:1.6 } .wsp-rich p{ margin:0 0 8px } .wsp-rich p:last-child{ margin-bottom:0 } .wsp-rich ul, .wsp-rich ol{ margin:8px 0; padding-left:20px; list-style:revert } .wsp-rich li{ margin:3px 0 } .wsp-rich h1, .wsp-rich h2{ font-family:var(--font-display); font-size:15px; font-weight:700; margin:12px 0 6px; color:var(--text-strong); } .wsp-rich h3{ font-size:13.5px; font-weight:700; margin:10px 0 5px; color:var(--text-strong) } .wsp-rich blockquote{ margin:9px 0; padding:2px 0 2px 12px; border-left:3px solid var(--line-200); color:var(--text-muted); } .wsp-rich code{ font-family:var(--font-mono); font-size:12px; background:var(--ink-050); padding:1px 5px; border-radius:var(--wsp-r5); } .wsp-rich a{ color:var(--text-strong); text-decoration:underline } .wsp-rich b, .wsp-rich strong{ font-weight:700; color:var(--text-strong) } .wsp-rich[contenteditable]:empty:before{ content:attr(data-ph); color:var(--text-subtle) } /* ------------------------------------------------------------------ */ /* §11 · RESPONSIVE — hanya breakpoint yang ada di master (1180 · 760) */ /* ------------------------------------------------------------------ */ @media (max-width:1180px){ .wsp .wsp-grid{ grid-template-columns:minmax(0,1fr) } .wsp .wsp-railwrap{ flex-direction:row; overflow-x:auto; gap:6px } .wsp .wsp-railwrap > .wsp-boardcard{ flex:0 0 176px } /* Scope-nya WAJIB sama dengan rule dasar di §2 (:is(...) = 0,2,0), kalau tidak rule dasar yang lebih spesifik justru menang di antar-!important dan .wsp-showsm tidak pernah muncul di dalam dialog/card modal. */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-hidesm{ display:none !important } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-showsm{ display:flex !important } .wsp-cm{ grid-template-columns:1fr } .wsp-side{ display:none !important } .wsp-mobacts{ display:flex !important } } @media (max-width:760px){ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-hidexs{ display:none !important } } /* ------------------------------------------------------------------ */ /* §12 · REDUCED MOTION */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .wsp .wsp-grid, .wsp-scrim, .wsp-dlg{ animation:none !important } .wsp .wsp-col, .wsp .wsp-kcard{ transition:none !important } .wsp .wsp-kcard:hover{ transform:none } } /* == :END == WORKSPACE-PM ============================================ */ /* == WORKSPACE-HOME (F2 · Ringkasan — reproduksi Workspace.dc.html) === */ /* Sumber: markup 203-379 (layout "fokus", default props master) + anatomi "Agenda hari ini" 404-422 dari varian BRIEFING. Binding style diresolusi dari script master 4128-4203 (tag(), barSt, g.dot). Breakpoint 1180/760 = helmet master 58-75 (.ws-g2 → 1fr, .ws-herorow → kolom). Token lokal --wsp-* diwarisi dari §0 blok WORKSPACE-PM di atas. */ /* alpha di atas permukaan ink (master rgba(255,255,255,.NN)) — additive ke §0. Deklarasi ulang pada akar yang sama; tidak menimpa nilai lama. */ .wsp, .wsp-dlg, .wsp-modal, .wsp-scrim, .wsp-drawer, .wsp-drawer-back, .wsp-notifpop{ --wsp-on-ink-55:color-mix(in srgb, var(--primary-contrast) 55%, transparent); --wsp-on-ink-64:color-mix(in srgb, var(--primary-contrast) 64%, transparent); --wsp-on-ink-75:color-mix(in srgb, var(--primary-contrast) 75%, transparent); --wsp-on-ink-line:color-mix(in srgb, var(--primary-contrast) 22%, transparent); --wsp-on-ink-line-28:color-mix(in srgb, var(--primary-contrast) 28%, transparent); --wsp-on-ink-fill-08:color-mix(in srgb, var(--primary-contrast) 8%, transparent); --wsp-on-ink-fill-06:color-mix(in srgb, var(--primary-contrast) 6%, transparent); --wsp-ink-fill-10:color-mix(in srgb, var(--ink-950) 10%, transparent); /* master: box-shadow 0 0 24px rgba(255,247,0,.25) — rgba itu --vs-yellow */ --wsp-glow-brand:color-mix(in srgb, var(--vs-yellow) 25%, transparent); } /* -- dot 6px mewarisi warna teks induk (master 224: background:currentColor) -- */ :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dot--6{ width:6px; height:6px } :is(.wsp,.wsp-dlg,.wsp-modal,.wsp-drawer) .wsp-dot--cc{ background:currentColor } /* ------------------------------------------------------------------ */ /* H1 · KERANGKA master 205-211 */ /* ------------------------------------------------------------------ */ .wsp-home{ display:flex; flex-direction:column; gap:18px; animation:wsp-fade .2s ease } .wsp-home__grid{ display:grid; grid-template-columns:minmax(0,1fr) 332px; gap:18px; align-items:start } .wsp-home__col{ display:flex; flex-direction:column; gap:18px; min-width:0 } /* ------------------------------------------------------------------ */ /* H2 · HERO PRESENSI master 214-245 */ /* ------------------------------------------------------------------ */ .wsp .wsp-hero{ position:relative; overflow:hidden; background:var(--bg-ink); color:var(--wsp-on-ink); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); } /* master 215: garis kuning 3px penuh di tepi atas */ .wsp .wsp-hero::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--vs-yellow) } /* Hero berganti warna mengikuti status presensi (keputusan owner 2026-07-28). Warna DITURUNKAN dari token tag yang sudah ada lewat color-mix di atas --bg-ink — tidak ada hex baru. Basis tetap gelap supaya --wsp-on-ink (teks terang) aman kontrasnya; yang berubah hanya temperatur permukaannya. */ .wsp .wsp-hero--late{ background: radial-gradient(115% 150% at 10% 0%, color-mix(in srgb, var(--tag-danger-text) 46%, transparent) 0%, transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--tag-danger-text) 34%, var(--bg-ink)) 0%, var(--bg-ink) 72%); } .wsp .wsp-hero--ontime{ background: radial-gradient(115% 150% at 10% 0%, color-mix(in srgb, var(--tag-info-text) 44%, transparent) 0%, transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--tag-info-text) 32%, var(--bg-ink)) 0%, var(--bg-ink) 72%); } .wsp .wsp-hero__row{ display:flex; align-items:center; gap:28px; padding:26px 28px } .wsp .wsp-hero__main{ flex:1; min-width:220px } .wsp .wsp-hero__kick{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--wsp-on-ink-55); } .wsp .wsp-hero__clock{ font-family:var(--font-mono); font-size:44px; font-weight:700; letter-spacing:-.01em; margin-top:8px; color:var(--wsp-on-ink); } .wsp .wsp-hero__cap{ font-size:13px; color:var(--wsp-on-ink-64); margin-top:2px } .wsp .wsp-hero__side{ display:flex; flex-direction:column; gap:10px; min-width:230px } .wsp .wsp-hero__tags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap } .wsp .wsp-hero__geo{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--wsp-rp); border:1px solid var(--wsp-on-ink-line); color:var(--wsp-on-ink-75); font-size:11.5px; font-weight:500; white-space:nowrap; } .wsp .wsp-hero__meta{ font-size:12.5px; color:var(--wsp-on-ink-64); line-height:1.5 } .wsp .wsp-hero__meta b{ color:var(--wsp-on-ink); font-weight:600 } .wsp .wsp-hero__acts{ display:flex; gap:8px; flex-wrap:wrap } /* tombol hero — master 232 (brand) · 237 (ghost) · 241 (dashed) */ .wsp .wsp-hbtn{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 22px; border-radius:var(--wsp-r10); border:0; background:var(--vs-yellow); color:var(--wsp-ink); font-family:var(--font-body); font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 0 24px var(--wsp-glow-brand); } /* master style-hover #F0E900 = kuning satu tingkat lebih gelap; padanan token DS = --vs-yellow-shadow (#E6DC00). Tidak ada token #F0E900 di app. */ .wsp .wsp-hbtn:hover{ background:var(--vs-yellow-shadow) } .wsp .wsp-hbtn--ghost{ border:1px solid var(--wsp-on-ink-line-28); background:transparent; color:var(--wsp-on-ink); font-weight:600; box-shadow:none; } .wsp .wsp-hbtn--ghost:hover{ background:var(--wsp-on-ink-fill-08) } .wsp .wsp-hbtn--dash{ padding:0 16px; border:1px dashed var(--wsp-on-ink-line-28); background:transparent; color:var(--wsp-on-ink-75); font-size:13px; font-weight:500; box-shadow:none; } .wsp .wsp-hbtn--dash:hover{ background:var(--wsp-on-ink-fill-06) } /* ------------------------------------------------------------------ */ /* H3 · STAT TILE master 248-258 */ /* ------------------------------------------------------------------ */ .wsp .wsp-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px } .wsp .wsp-stat{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); padding:16px 18px; box-shadow:var(--shadow-card); } .wsp .wsp-stat__lbl{ display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); } .wsp .wsp-stat__val{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--text-strong); margin-top:8px; letter-spacing:-.01em; } .wsp .wsp-stat__foot{ font-size:11.5px; color:var(--text-subtle); margin-top:2px } /* ------------------------------------------------------------------ */ /* H4 · PANEL DASAR master 261-266 · 307-312 */ /* ------------------------------------------------------------------ */ .wsp .wsp-hp{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); overflow:hidden; } .wsp .wsp-hp__head{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line-100); } .wsp .wsp-hp__ic{ display:inline-flex; color:var(--text-muted); flex:0 0 auto } .wsp .wsp-hp__title{ font-family:var(--font-display); font-size:15px; font-weight:700; margin:0; flex:1; min-width:0; color:var(--text-strong); } .wsp .wsp-hp__note{ font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); flex:0 0 auto } .wsp .wsp-hp__empty{ padding:22px; text-align:center; font-size:13px; color:var(--text-subtle) } .wsp .wsp-hp__body{ display:flex; flex-direction:column } .wsp .wsp-hp > :last-child{ border-bottom:0 } .wsp .wsp-hp__body > :last-child{ border-bottom:0 } /* varian kolom kanan (master 307-366): head 15px 18px · gap 9 · judul 14.5px */ .wsp .wsp-hp--side .wsp-hp__head{ padding:15px 18px; gap:9px } .wsp .wsp-hp--side .wsp-hp__title{ font-size:14.5px } .wsp .wsp-hp--side .wsp-hp__empty{ padding:20px; font-size:12.5px } /* tombol/link kanan di head — master 265 · 337 · 355 */ .wsp .wsp-hlink{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--wsp-rp); border:1px solid var(--border-input); background:var(--surface-0); font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--text-strong); cursor:pointer; text-decoration:none; flex:0 0 auto; white-space:nowrap; } .wsp .wsp-hlink:hover{ background:var(--surface-1); color:var(--text-strong) } .wsp .wsp-hlink--bare{ border:0; background:transparent; color:var(--text-muted); padding:0 } .wsp .wsp-hlink--bare:hover{ background:transparent; color:var(--text-strong) } .wsp .wsp-hlink--ink{ border:0; background:var(--wsp-ink); color:var(--wsp-on-ink); padding:5px 11px; gap:5px; font-size:11.5px; } .wsp .wsp-hlink--ink:hover{ background:var(--wsp-ink-hover); color:var(--wsp-on-ink) } /* ------------------------------------------------------------------ */ /* H5 · BARIS TUGAS SAYA master 268-278 */ /* ------------------------------------------------------------------ */ .wsp .wsp-trow{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 20px; border:0; border-bottom:1px solid var(--line-100); background:transparent; cursor:pointer; text-align:left; font-family:var(--font-body); } .wsp .wsp-trow:hover{ background:var(--surface-1) } .wsp .wsp-trow__code{ font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); flex:0 0 44px } .wsp .wsp-trow__title{ flex:1; min-width:0; font-size:13.5px; font-weight:500; color:var(--text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wsp .wsp-trow__due{ font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); flex:0 0 auto } /* ------------------------------------------------------------------ */ /* H6 · STRIP DAILY JURNAL master 289-299 */ /* ------------------------------------------------------------------ */ .wsp .wsp-jstrip{ display:flex; gap:10px; padding:16px 20px; overflow-x:auto } .wsp .wsp-jcard{ flex:0 0 200px; border:1px solid var(--line-200); border-radius:var(--wsp-r10); padding:11px 12px; background:var(--surface-1); } .wsp .wsp-jcard__tags{ display:flex; align-items:center; gap:6px; flex-wrap:wrap } .wsp .wsp-jcard__title{ font-size:12.5px; font-weight:500; color:var(--text-body); margin-top:8px; line-height:1.4 } /* ------------------------------------------------------------------ */ /* H7 · MENUNGGU KEPUTUSAN / PENGAJUAN SAYA master 311-328 · 339-347 */ /* ------------------------------------------------------------------ */ .wsp .wsp-hcount{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:var(--wsp-rp); background:var(--vs-yellow); color:var(--wsp-ink); flex:0 0 auto; } .wsp .wsp-arow{ padding:12px 18px; border-bottom:1px solid var(--line-100) } .wsp .wsp-arow__head{ display:flex; align-items:center; gap:8px } .wsp .wsp-arow__who{ font-size:12.5px; font-weight:600; color:var(--text-strong); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wsp .wsp-arow__detail{ font-size:12px; color:var(--text-muted); margin-top:5px; line-height:1.45 } .wsp .wsp-arow__acts{ display:flex; gap:6px; margin-top:9px } .wsp .wsp-abtn{ flex:1; height:30px; border-radius:var(--wsp-r8); border:0; background:var(--wsp-ink); color:var(--wsp-on-ink); font-family:var(--font-body); font-size:12px; font-weight:600; cursor:pointer; } .wsp .wsp-abtn:hover{ background:var(--wsp-ink-hover) } .wsp .wsp-abtn--ghost{ border:1px solid var(--border-input); background:var(--surface-0); color:var(--text-muted) } .wsp .wsp-abtn--ghost:hover{ background:var(--surface-1); color:var(--text-muted) } .wsp .wsp-abtn--note{ flex:1; align-self:center; font-size:11.5px; color:var(--text-subtle); text-align:center } .wsp .wsp-srow{ padding:12px 18px; border-bottom:1px solid var(--line-100); display:flex; align-items:center; gap:10px } .wsp .wsp-srow__body{ flex:1; min-width:0 } .wsp .wsp-srow__title{ font-size:12.5px; font-weight:600; color:var(--text-strong) } .wsp .wsp-srow__detail{ font-size:11.5px; color:var(--text-subtle); margin-top:2px } /* ------------------------------------------------------------------ */ /* H8 · FORUM TERBARU master 358-364 */ /* ------------------------------------------------------------------ */ .wsp .wsp-frow{ display:flex; gap:10px; width:100%; padding:12px 18px; border:0; border-bottom:1px solid var(--line-100); background:transparent; cursor:pointer; text-align:left; font-family:var(--font-body); text-decoration:none; } .wsp .wsp-frow:hover{ background:var(--surface-1) } .wsp .wsp-frow__ava{ width:28px; height:28px; border-radius:var(--wsp-rp); background:var(--ink-100); color:var(--ink-600); display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; font-weight:700; flex:0 0 auto; } .wsp .wsp-frow__body{ flex:1; min-width:0 } .wsp .wsp-frow__title{ display:block; font-size:12.5px; font-weight:600; color:var(--text-body); line-height:1.4 } .wsp .wsp-frow__meta{ display:block; font-size:11px; color:var(--text-subtle); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ------------------------------------------------------------------ */ /* H9 · POST-PRO BERJALAN (mini) master 368-376 */ /* ------------------------------------------------------------------ */ .wsp .wsp-ppmini{ background:var(--pst-identity-bg); border:1px solid var(--vs-yellow-shadow); border-radius:var(--wsp-r14); padding:16px 18px; } .wsp .wsp-ppmini__head{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--pst-identity-text); } .wsp .wsp-ppmini__row{ display:block; width:100%; border:0; background:transparent; padding:10px 0 0; cursor:pointer; text-align:left; font-family:var(--font-body); } .wsp .wsp-ppmini__line{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; font-weight:600; color:var(--text-strong); } .wsp .wsp-ppmini__name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wsp .wsp-ppmini__pct{ font-family:var(--font-mono); font-weight:700; flex:0 0 auto } .wsp .wsp-ppmini__track{ height:5px; border-radius:var(--wsp-rp); background:var(--wsp-ink-fill-10); margin-top:6px; overflow:hidden; } .wsp .wsp-ppmini__bar{ height:100%; background:var(--wsp-ink); border-radius:var(--wsp-rp) } .wsp .wsp-ppmini__empty{ font-size:12px; color:var(--pst-identity-text); margin-top:9px; line-height:1.45 } /* ------------------------------------------------------------------ */ /* H10 · AGENDA HARI INI master 404-421 */ /* ------------------------------------------------------------------ */ .wsp .wsp-agenda{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); padding:20px 24px; } .wsp .wsp-agenda__head{ display:flex; align-items:center; gap:9px; margin-bottom:14px } .wsp .wsp-agenda__title{ font-family:var(--font-display); font-size:14.5px; font-weight:700; margin:0; flex:1; min-width:0; color:var(--text-strong); } .wsp .wsp-agenda__list{ display:flex; flex-direction:column } .wsp .wsp-agenda__list > :last-child{ border-bottom:0 } .wsp .wsp-agrow{ display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--line-100) } .wsp .wsp-agrow__time{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--text-subtle); flex:0 0 46px; padding-top:2px; } /* master 413: background:{{ g.dot }} — nilai token per jenis agenda (script 4197-4202) */ .wsp .wsp-agrow__dot{ width:8px; height:8px; border-radius:var(--wsp-rp); margin-top:5px; flex:0 0 auto; background:var(--wsp-agdot,var(--ink-300)); } .wsp .wsp-agrow--shift { --wsp-agdot:var(--vs-yellow) } .wsp .wsp-agrow--booking{ --wsp-agdot:var(--accent-blue) } .wsp .wsp-agrow--due { --wsp-agdot:var(--accent-red) } .wsp .wsp-agrow--routine{ --wsp-agdot:var(--accent-violet) } .wsp .wsp-agrow__body{ flex:1; min-width:0 } .wsp .wsp-agrow__title{ display:block; font-size:13px; font-weight:600; color:var(--text-body) } .wsp .wsp-agrow__meta{ display:block; font-size:11.5px; color:var(--text-subtle); margin-top:2px } .wsp .wsp-agenda__empty{ font-size:13px; color:var(--text-subtle); padding:4px 0 2px } /* ------------------------------------------------------------------ */ /* H11 · RESPONSIF (helmet master 58-75) */ /* ------------------------------------------------------------------ */ @media (max-width:1180px){ .wsp-home__grid{ grid-template-columns:minmax(0,1fr) } } @media (max-width:760px){ .wsp .wsp-hero__row{ flex-direction:column; align-items:flex-start } } @media (prefers-reduced-motion: reduce){ .wsp-home{ animation:none !important } } /* == :END == WORKSPACE-HOME ========================================== */ /* == WORKSPACE-POSTPRO (F3 — reproduksi Workspace.dc.html 1191-1399) === */ /* Binding style diresolusi dari script master postproVals() 5101-5240 dan drawer batch 5590-5603 / markup 2719-2763. Primitif bersama (.wsp-tag/.wsp-track/.wsp-bar/--wsp-*) dari blok WORKSPACE-PM. */ .wsp-pp{ display:flex; flex-direction:column; gap:16px; animation:wsp-fade .2s ease } /* -- head (master 1194-1201) -- */ .wsp .wsp-pp__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap } .wsp .wsp-pp__h2{ font-family:var(--font-display); font-size:16px; font-weight:700; margin:0; color:var(--text-strong) } .wsp .wsp-pp__sub{ font-family:var(--font-mono); font-size:11px; color:var(--text-subtle) } .wsp .wsp-pp__spacer{ flex:1 } /* -- tab bar pill (master 1203-1207) -- */ .wsp .wsp-pp__tabs{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; align-self:flex-start; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-rp); padding:4px; box-shadow:var(--shadow-card); } .wsp .wsp-pptab{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:var(--wsp-rp); border:0; background:transparent; color:var(--text-muted); font-family:var(--font-body); font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; text-decoration:none; } .wsp .wsp-pptab.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); font-weight:700 } .wsp .wsp-pptab__n{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:var(--wsp-rp); background:var(--ink-050); color:var(--text-muted); } .wsp .wsp-pptab.is-on .wsp-pptab__n{ background:var(--wsp-on-ink-fill-18); color:var(--wsp-on-ink) } /* -- chip filter tahap (master 1213-1215) -- */ .wsp .wsp-ppchips{ display:flex; align-items:center; gap:7px; flex-wrap:wrap } .wsp .wsp-ppchip{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--wsp-rp); border:1px solid var(--line-200); background:var(--surface-0); color:var(--text-muted); font-family:var(--font-body); font-size:11.5px; font-weight:500; cursor:pointer; white-space:nowrap; } .wsp .wsp-ppchip.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); border-color:var(--wsp-ink); font-weight:700 } .wsp .wsp-ppchip__n{ font-family:var(--font-mono); opacity:.65 } .wsp .wsp-ppchips__note{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-subtle); margin-left:auto } /* -- tabel antrean edit (master 1219-1262) -- */ .wsp .wsp-ppwrap{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); overflow:hidden; } .wsp .wsp-ppscroll{ overflow-x:auto } /* 744px = jumlah LANTAI kolom (78+148+64+94+60+106+98=648) + gap (6x10=60) + padding (2x18=36). Dulu 1000px kaku: kontainer <1000px langsung menggeser ke samping walau isinya muat. */ .wsp .wsp-pptable{ min-width:744px } /* FLUID: tiap kolom minmax(lantai, nilai master). Di layar lebar tiap kolom mencapai maksimum = angka master persis, jadi geometri desktop TIDAK berubah sama sekali; di layar sempit kolom menyusut sampai lantainya, bukan memaksa scroll. Lantai dihitung dari isi TERPANJANG yang mungkin, bukan dikira-kira: Aksi 98 = 3 tombol x 30 + 2 gap x 4 · Tahap 106 = tag "Terkirim Vendor" + persen + gap. */ .wsp .wsp-pprow{ display:grid; grid-template-columns: minmax(78px, 92px) /* Batch */ minmax(148px, 1.4fr) /* Klien / asal — satu-satunya yang boleh melar */ minmax(64px, 84px) /* Volume */ minmax(94px, 116px) /* Editor */ minmax(60px, 84px) /* Due */ minmax(106px, 132px) /* Tahap · progress */ minmax(98px, 118px); /* Aksi */ gap:10px; align-items:center; padding:13px 18px; border-bottom:1px solid var(--line-100); } /* WAJIB: anak grid default punya min-width:auto sehingga TIDAK PERNAH menyusut di bawah isinya — isinya lalu meluber ke kolom sebelah dan terlihat seperti tumpang tindih. Sebelumnya hanya .wsp-ppcell yang dinolkan; .wsp-ppmono/.wsp-ppdue/.wsp-ppacts dan SELURUH span header masih 'auto'. Ini penyebab overlap yang dilaporkan. */ .wsp .wsp-pprow > *{ min-width:0 } .wsp .wsp-pprow--head{ align-items:center; padding:11px 18px; background:var(--surface-1); font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); } /* header dipotong elipsis, bukan mendorong kolom sebelahnya */ .wsp .wsp-pprow--head > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wsp .wsp-pptable > :last-child{ border-bottom:0 } .wsp .wsp-ppcell{ min-width:0 } .wsp .wsp-ppcell--stack{ display:flex; flex-direction:column; gap:4px; align-items:flex-start } .wsp .wsp-ppcode{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-strong) } .wsp .wsp-ppname{ display:block; font-size:12.5px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wsp .wsp-ppsub{ display:block; font-size:11px; color:var(--text-subtle); margin-top:2px } .wsp .wsp-ppmono{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wsp .wsp-ppsel{ width:100%; height:30px; border:1px solid var(--border-input); border-radius:var(--wsp-r8); background:var(--surface-0); font-family:var(--font-body); font-size:11.5px; color:var(--text-strong); padding:0 6px; } .wsp .wsp-ppdue{ font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wsp .wsp-ppdue.is-late{ font-weight:700; color:var(--pst-danger-text) } .wsp .wsp-ppstep{ display:flex; align-items:center; gap:7px; min-width:0 } .wsp .wsp-ppstep > .wsp-tag{ min-width:0; overflow:hidden; text-overflow:ellipsis } .wsp .wsp-pppct{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--text-strong); flex:0 0 auto } .wsp .wsp-ppacts{ display:flex; gap:4px; justify-content:flex-end; flex-wrap:nowrap } .wsp .wsp-ppico{ width:30px; height:30px; display:grid; place-items:center; border-radius:var(--wsp-r8); border:1px solid var(--border-input); background:var(--surface-0); color:var(--text-muted); cursor:pointer; flex:0 0 auto; } .wsp .wsp-ppico:hover:not(:disabled){ background:var(--surface-1); color:var(--text-strong) } .wsp .wsp-ppico:disabled{ opacity:.45; cursor:not-allowed } .wsp .wsp-ppico--tone{ border-color:var(--wsp-tone-border); background:var(--wsp-tone-bg); color:var(--wsp-tone-text); } .wsp .wsp-ppico--tone:hover:not(:disabled){ filter:brightness(.97); background:var(--wsp-tone-bg); color:var(--wsp-tone-text) } .wsp .wsp-ppnote{ display:flex; align-items:flex-start; gap:7px; font-size:11.5px; color:var(--text-subtle); line-height:1.5 } .wsp .wsp-ppnote svg{ flex:0 0 auto; margin-top:2px } /* -- stat cetak (master 1270-1277) -- */ .wsp .wsp-ppstats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:10px } .wsp .wsp-ppstat{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r12); padding:12px 14px } .wsp .wsp-ppstat__lbl{ font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle) } .wsp .wsp-ppstat__val{ font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--text-strong); margin-top:4px } .wsp .wsp-ppstat__foot{ font-size:11px; color:var(--text-subtle); margin-top:2px } /* -- kartu antrean cetak / batch vendor (master 1280-1308 · 1318-1340) -- */ .wsp .wsp-ppcard{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); padding:15px 18px; display:flex; flex-direction:column; gap:12px; } .wsp .wsp-ppcard__head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap } .wsp .wsp-ppcard__meta{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-subtle) } .wsp .wsp-ppcard__body{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap } .wsp .wsp-ppcard__main{ flex:1; min-width:200px } .wsp .wsp-ppcard__title{ font-size:14px; font-weight:700; color:var(--text-strong) } .wsp .wsp-ppcard__qty{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; color:var(--text-muted) } .wsp .wsp-ppcard__spec{ font-size:12px; color:var(--text-subtle); margin-top:3px } .wsp .wsp-ppcard__line{ font-size:11.5px; color:var(--text-muted); margin-top:5px } .wsp .wsp-ppcard__steps{ display:flex; align-items:center; gap:5px; flex-wrap:wrap } .wsp .wsp-ppcard__foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:11px; border-top:1px solid var(--line-100); } .wsp .wsp-ppcard__note{ flex:1; min-width:120px; font-size:11.5px; color:var(--text-subtle) } .wsp .wsp-ppresi{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted) } .wsp .wsp-ppprog{ display:flex; align-items:center; gap:10px } .wsp .wsp-ppprog__pct{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text-strong) } /* chip tahap cetak — 3 state master 1295 */ .wsp .wsp-ppstepchip{ height:26px; padding:0 10px; border-radius:var(--wsp-rp); cursor:pointer; font-family:var(--font-body); font-size:10.5px; white-space:nowrap; background:var(--surface-0); color:var(--text-subtle); border:1px dashed var(--line-200); font-weight:500; } .wsp .wsp-ppstepchip.is-done{ background:var(--ink-050); color:var(--text-body); border:1px solid var(--line-200); font-weight:600 } .wsp .wsp-ppstepchip.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); border:1px solid var(--wsp-ink); font-weight:700 } .wsp .wsp-ppstepchip:disabled{ cursor:not-allowed; opacity:.55 } /* tombol pill footer kartu (master 1304-1306) */ .wsp .wsp-ppbtn{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--wsp-rp); border:1px solid var(--border-input); background:var(--surface-0); font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--text-muted); cursor:pointer; white-space:nowrap; } .wsp .wsp-ppbtn:hover:not(:disabled){ background:var(--surface-1); color:var(--text-strong) } .wsp .wsp-ppbtn:disabled{ opacity:.5; cursor:not-allowed } .wsp .wsp-ppbtn--ink{ padding:0 13px; border:0; background:var(--wsp-ink); color:var(--wsp-on-ink); font-weight:700; } .wsp .wsp-ppbtn--ink:hover:not(:disabled){ background:var(--wsp-ink-hover); color:var(--wsp-on-ink) } .wsp .wsp-ppbtn--tone{ border-color:var(--wsp-tone-border); background:var(--wsp-tone-bg); color:var(--wsp-tone-text); } .wsp .wsp-ppbtn--tone:hover:not(:disabled){ filter:brightness(.97); background:var(--wsp-tone-bg); color:var(--wsp-tone-text) } .wsp .wsp-ppbtn--strong{ color:var(--text-strong) } /* -- grid vendor + aside (master 1315 · 1343-1358) -- */ .wsp .wsp-ppvgrid{ display:grid; grid-template-columns:minmax(0,1fr) 288px; gap:14px; align-items:start } .wsp .wsp-ppvcol{ display:flex; flex-direction:column; gap:12px; min-width:0 } .wsp .wsp-ppaside{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); overflow:hidden; } .wsp .wsp-ppaside__head{ padding:14px 16px 10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); } .wsp .wsp-ppaside__row{ padding:12px 16px; border-top:1px solid var(--line-100) } .wsp .wsp-ppaside__top{ display:flex; align-items:center; gap:8px } .wsp .wsp-ppaside__name{ font-size:12.5px; font-weight:700; color:var(--text-strong); flex:1; min-width:0 } .wsp .wsp-ppaside__meta{ font-size:11px; color:var(--text-subtle); margin-top:4px } .wsp .wsp-ppaside__foot{ display:flex; align-items:center; gap:8px; margin-top:7px } .wsp .wsp-ppaside__contact{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); flex:1; min-width:0 } .wsp .wsp-ppaside__empty{ padding:12px 16px 16px; border-top:1px solid var(--line-100); font-size:11.5px; color:var(--text-subtle); line-height:1.5 } /* -- grid semua batch + step tracker (master 1363-1394) -- */ .wsp .wsp-ppgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px } .wsp .wsp-ppbcard{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); padding:16px 18px; display:flex; flex-direction:column; gap:12px; } .wsp .wsp-ppbcard__head{ display:flex; align-items:center; gap:8px } .wsp .wsp-ppbcard__title{ font-size:14px; font-weight:700; color:var(--text-strong) } .wsp .wsp-ppbcard__sub{ font-size:12px; color:var(--text-subtle); margin-top:2px } .wsp .wsp-ppbcard__foot{ display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid var(--line-100) } .wsp .wsp-pptrk{ display:flex; align-items:center; gap:4px } .wsp .wsp-pptrk__i{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0 } .wsp .wsp-pptrk__dot{ width:10px; height:10px; border-radius:var(--wsp-rp); background:var(--ink-100); flex:0 0 auto } .wsp .wsp-pptrk__i.is-done .wsp-pptrk__dot{ background:var(--wsp-ink) } .wsp .wsp-pptrk__i.is-on .wsp-pptrk__dot{ background:var(--vs-yellow); border:2px solid var(--wsp-ink) } .wsp .wsp-pptrk__lbl{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-subtle); text-align:center; } .wsp .wsp-pptrk__i.is-on .wsp-pptrk__lbl{ color:var(--text-strong); font-weight:700 } /* ------------------------------------------------------------------ */ /* DRAWER DETAIL BATCH (master 2720-2763) */ /* ------------------------------------------------------------------ */ /* Panel mandiri di document.body (gotcha #1: TIDAK lewat adminModal). */ .wsp-drawer-back{ position:fixed; inset:0; background:var(--wsp-scrim); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); z-index:50; animation:wsp-fade .15s ease; } .wsp-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(400px,94vw); background:var(--surface-0); border-left:1px solid var(--line-200); box-shadow:var(--shadow-pop); z-index:51; display:flex; flex-direction:column; animation:wsp-slide .18s ease; overflow-y:auto; } @keyframes wsp-slide{ from{ transform:translateX(100%) } to{ transform:none } } .wsp-drawer__head{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line-100); flex:0 0 auto; } .wsp-drawer__code{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text-strong) } .wsp-drawer__spacer{ flex:1 } .wsp-drawer__x{ width:30px; height:30px; display:grid; place-items:center; border-radius:var(--wsp-r8); border:0; background:transparent; color:var(--text-muted); cursor:pointer; flex:0 0 auto; } .wsp-drawer__x:hover{ background:var(--surface-1); color:var(--text-strong) } .wsp-drawer__body{ padding:18px 20px; display:flex; flex-direction:column; gap:16px } .wsp-drawer__title{ font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text-strong) } .wsp-drawer__sub{ font-size:12px; color:var(--text-subtle); margin-top:3px } .wsp-drawer__line{ font-size:12px; color:var(--text-muted); margin-top:2px } .wsp-drawer__prohead{ display:flex; justify-content:space-between; align-items:baseline; gap:10px } .wsp-drawer__probig{ font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--text-strong) } .wsp-drawer__protrack{ height:7px; border-radius:var(--wsp-rp); background:var(--ink-050); overflow:hidden; margin-top:7px } .wsp-drawer__probar{ display:block; height:100%; border-radius:var(--wsp-rp); background:var(--wsp-ink) } .wsp-drawer__probar.is-done{ background:var(--pst-success-text) } .wsp-drawer__acts{ display:flex; gap:7px; margin-top:12px } .wsp-drawer__btn{ flex:1; height:36px; border-radius:var(--wsp-r10); border:0; background:var(--wsp-ink); color:var(--wsp-on-ink); font-family:var(--font-body); font-size:12.5px; font-weight:600; cursor:pointer; } .wsp-drawer__btn:hover:not(:disabled){ background:var(--wsp-ink-hover) } .wsp-drawer__btn:disabled{ opacity:.5; cursor:not-allowed } .wsp-drawer__btn--ghost{ border:1px solid var(--border-input); background:var(--surface-0); color:var(--text-strong) } .wsp-drawer__btn--ghost:hover:not(:disabled){ background:var(--surface-1) } .wsp-drawer__hint{ font-size:11px; color:var(--text-subtle); margin-top:8px; line-height:1.5 } .wsp-drawer__kick{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); } .wsp-drawer__steps{ display:flex; flex-direction:column; gap:2px; margin-top:8px } .wsp-drawer__step{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--wsp-r9); background:transparent; } .wsp-drawer__step.is-on{ background:var(--pst-identity-bg) } .wsp-drawer__sdot{ width:10px; height:10px; border-radius:var(--wsp-rp); background:var(--ink-100); flex:0 0 auto } .wsp-drawer__step.is-done .wsp-drawer__sdot{ background:var(--wsp-ink) } .wsp-drawer__step.is-on .wsp-drawer__sdot{ background:var(--vs-yellow); border:2px solid var(--wsp-ink) } .wsp-drawer__slbl{ font-size:12.5px; color:var(--text-subtle) } .wsp-drawer__step.is-done .wsp-drawer__slbl{ font-weight:600; color:var(--text-body) } .wsp-drawer__step.is-on .wsp-drawer__slbl{ font-weight:700; color:var(--text-strong) } .wsp-drawer__smeta{ font-family:var(--font-mono); font-size:10px; color:var(--text-subtle); margin-left:auto } .wsp-drawer__callout{ display:flex; align-items:flex-start; gap:8px; padding:11px 13px; border-radius:var(--wsp-r10); background:var(--pst-identity-bg); border:1px solid var(--vs-yellow-shadow); font-size:11.5px; color:var(--pst-identity-text); line-height:1.5; } .wsp-drawer__callout svg{ flex:0 0 auto; margin-top:1px } .wsp-drawer__memo{ font-size:12px; color:var(--text-muted); line-height:1.55 } .wsp-drawer__memo b{ color:var(--text-strong) } @media (max-width:1180px){ .wsp .wsp-ppvgrid{ grid-template-columns:minmax(0,1fr) } } @media (prefers-reduced-motion: reduce){ .wsp-pp, .wsp-drawer, .wsp-drawer-back{ animation:none !important } } /* == :END == WORKSPACE-POSTPRO ======================================= */ /* == WORKSPACE-EOFFICE (F4 — reproduksi Workspace.dc.html 455-719) ==== */ /* + drawer detail karyawan 2654-2717 · dialog Ajukan cuti 2049-2075. Binding style diresolusi dari script master eofficeVals() 4251-4353. */ .wsp-eo{ display:flex; flex-direction:column; gap:16px; animation:wsp-fade .2s ease } /* -- bar sub-tab (master 458-469) -- */ .wsp .wsp-eo__bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap } .wsp .wsp-eo__tabs{ display:flex; gap:4px; padding:4px; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r12); overflow-x:auto; max-width:100%; } .wsp .wsp-eotab{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px; border-radius:var(--wsp-r9); border:0; background:transparent; color:var(--text-muted); font-family:var(--font-body); font-size:12.5px; font-weight:500; white-space:nowrap; flex:0 0 auto; cursor:pointer; text-decoration:none; } .wsp .wsp-eotab.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); font-weight:700 } .wsp .wsp-eotab__b{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:var(--wsp-rp); background:var(--pst-warning-bg); color:var(--pst-warning-text); border:1px solid var(--pst-warning-border); } .wsp .wsp-eotab.is-on .wsp-eotab__b{ background:var(--vs-yellow); color:var(--wsp-ink); border-color:var(--vs-yellow) } .wsp .wsp-eo__gate{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle); margin-left:auto; } /* -- panel + head (master 473-483 · 577-581 · 620-624 · 644-648) -- */ .wsp .wsp-eop{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); overflow:hidden; } .wsp .wsp-eop__head{ display:flex; align-items:center; gap:10px; row-gap:8px; padding:15px 20px; border-bottom:1px solid var(--line-100); flex-wrap:wrap; } .wsp .wsp-eop__head--14{ padding:14px 20px; gap:9px } .wsp .wsp-eop__title{ font-family:var(--font-display); font-size:15px; font-weight:700; margin:0; color:var(--text-strong) } .wsp .wsp-eop__title--14{ font-size:14px; flex:1; min-width:0 } .wsp .wsp-eop__count{ font-family:var(--font-mono); font-size:11px; color:var(--text-subtle) } .wsp .wsp-eop__gate{ font-size:11px; color:var(--text-subtle) } .wsp .wsp-eop__spacer{ flex:1 } /* Toolbar head PINDAH SEBAGAI SATU BLOK, tidak pernah pecah di tengah. Dengan flex-wrap:wrap di grup ini, sisa ruang baris-1 dipakai untuk membelah isinya (tanggal+karyawan+Tambah di baris 1, CSV menggantung sendirian di baris 2) sementara judul tetap di kiri — itu yang terlihat berantakan. nowrap memaksa seluruh grup turun rapi ke baris berikutnya dan rata kanan. */ .wsp .wsp-eop__tools{ display:flex; gap:6px; flex-wrap:nowrap; align-items:center; margin-left:auto; max-width:100% } .wsp .wsp-eop__count{ min-width:0 } @media (max-width:720px){ /* Di layar sempit grup toolbar memang harus boleh melipat, kalau tidak ia meluber. */ .wsp .wsp-eop__tools{ flex-wrap:wrap; margin-left:0; flex:1 1 100% } .wsp .wsp-eop__tools .ctrl{ flex:1 1 140px } } .wsp .wsp-eop__empty{ padding:22px 20px; text-align:center; font-size:12.5px; color:var(--text-subtle) } /* chip filter divisi (master 480) */ .wsp .wsp-eochip{ height:28px; padding:0 12px; border-radius:var(--wsp-rp); cursor:pointer; font-family:var(--font-body); font-size:11.5px; font-weight:500; white-space:nowrap; background:var(--surface-0); color:var(--text-muted); border:1px solid var(--line-200); } .wsp .wsp-eochip.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); border-color:var(--wsp-ink); font-weight:600 } /* tombol pill head (master 580 · 647) */ .wsp .wsp-eobtn{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 15px; border-radius:var(--wsp-rp); border:1px solid var(--border-input); background:var(--surface-0); font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--text-strong); cursor:pointer; white-space:nowrap; } .wsp .wsp-eobtn:hover:not(:disabled){ background:var(--surface-1) } .wsp .wsp-eobtn:disabled{ opacity:.5; cursor:not-allowed } .wsp .wsp-eobtn--ink{ border:0; background:var(--wsp-ink); color:var(--wsp-on-ink) } .wsp .wsp-eobtn--ink:hover:not(:disabled){ background:var(--wsp-ink-hover) } /* tombol keputusan baris (master 563-564 · 592-593 · 634) */ .wsp .wsp-eoact{ height:30px; padding:0 14px; border-radius:var(--wsp-r8); border:0; background:var(--wsp-ink); color:var(--wsp-on-ink); font-family:var(--font-body); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; } .wsp .wsp-eoact:hover{ background:var(--wsp-ink-hover) } .wsp .wsp-eoact--ghost{ border:1px solid var(--border-input); background:var(--surface-0); color:var(--text-muted) } .wsp .wsp-eoact--ghost:hover{ background:var(--surface-1); color:var(--text-muted) } .wsp .wsp-eoact--29{ height:29px; padding:0 13px; font-size:11.5px } /* -- tabel grid (master 486-510 · 528-543) -- */ .wsp .wsp-eoscroll{ overflow-x:auto } .wsp .wsp-eotable--emp{ min-width:860px } .wsp .wsp-eotable--att{ min-width:820px } .wsp .wsp-eorow{ display:grid; gap:12px; padding:11px 20px; border-bottom:1px solid var(--line-100); align-items:center; } .wsp .wsp-eorow--head{ padding:9px 20px; background:var(--surface-1); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle); } .wsp .wsp-eotable--emp .wsp-eorow{ grid-template-columns:2.2fr 1.6fr 1fr 1fr 1.7fr .9fr } .wsp .wsp-eotable--att .wsp-eorow{ grid-template-columns:2fr 1.6fr .8fr .8fr 1.1fr 1.6fr } .wsp .wsp-eotable > :last-child{ border-bottom:0 } .wsp .wsp-eorow:not(.wsp-eorow--head):hover{ background:var(--surface-1) } .wsp .wsp-eoid{ display:flex; align-items:center; gap:10px; min-width:0 } .wsp .wsp-eoava{ width:30px; height:30px; border-radius:var(--wsp-rp); background:var(--ink-100); color:var(--ink-600); display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; font-weight:700; flex:0 0 auto; } .wsp .wsp-eoava--28{ width:28px; height:28px } .wsp .wsp-eoname{ display:block; font-size:13px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wsp .wsp-eosub{ display:block; font-size:11px; color:var(--text-subtle) } .wsp .wsp-eocell{ font-size:12.5px; color:var(--text-body); min-width:0 } .wsp .wsp-eocell--muted{ color:var(--text-muted) } .wsp .wsp-eocell--mono{ font-family:var(--font-mono); font-size:12.5px } .wsp .wsp-eocell--right{ text-align:right } .wsp .wsp-eocell--note{ font-size:11.5px; color:var(--text-subtle) } .wsp .wsp-eoroles{ display:flex; gap:4px; flex-wrap:wrap } /* chip role pekerjaan (master 503) */ .wsp .wsp-eorole{ font-size:10.5px; font-weight:500; padding:2px 8px; border-radius:var(--wsp-rp); background:var(--surface-1); border:1px solid var(--line-200); color:var(--text-muted); white-space:nowrap; } .wsp .wsp-eodetail{ padding:5px 12px; border-radius:var(--wsp-rp); border:1px solid var(--border-input); background:var(--surface-0); font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--text-strong); cursor:pointer; } .wsp .wsp-eodetail:hover{ background:var(--surface-1) } /* -- ringkas presensi (master 518-524) -- */ .wsp .wsp-eosum{ display:flex; gap:8px; flex-wrap:wrap; align-items:center } .wsp .wsp-eosum__note{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-subtle); margin-left:auto } /* -- baris koreksi (master 554-569) -- */ .wsp .wsp-eocorr{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--line-100); flex-wrap:wrap; } .wsp .wsp-eocorr__body{ flex:1; min-width:200px } .wsp .wsp-eocorr__ask{ display:block; font-size:13px; font-weight:600; color:var(--text-strong) } .wsp .wsp-eocorr__meta{ display:block; font-size:11.5px; color:var(--text-subtle); margin-top:2px } .wsp .wsp-eocorr__acts{ display:flex; gap:6px } /* -- cuti (master 576-615) -- */ .wsp .wsp-eogrid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start } .wsp .wsp-eolv{ padding:13px 20px; border-bottom:1px solid var(--line-100) } .wsp .wsp-eolv__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap } .wsp .wsp-eolv__emp{ font-size:13px; font-weight:600; color:var(--text-strong) } .wsp .wsp-eolv__range{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted) } .wsp .wsp-eolv__reason{ font-size:12px; color:var(--text-subtle); margin-top:6px; padding-left:38px } .wsp .wsp-eopol{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); padding:16px 18px; } .wsp .wsp-eopol__head{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); } .wsp .wsp-eopol__row{ display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-100) } .wsp .wsp-eopol__k{ font-size:12.5px; font-weight:600; color:var(--text-strong) } .wsp .wsp-eopol__v{ text-align:right } .wsp .wsp-eopol__v b{ display:block; font-size:12px; color:var(--text-body); font-weight:400 } .wsp .wsp-eopol__v small{ display:block; font-size:11px; color:var(--text-subtle) } .wsp .wsp-eopol__foot{ font-size:11.5px; color:var(--text-subtle); margin-top:10px; line-height:1.5 } /* -- kompensasi (master 626-637) -- */ .wsp .wsp-eocomp{ display:flex; align-items:center; gap:12px; padding:13px 20px; border-bottom:1px solid var(--line-100); flex-wrap:wrap; } .wsp .wsp-eocomp__body{ flex:1; min-width:220px } .wsp .wsp-eocomp__t{ display:block; font-size:13px; font-weight:600; color:var(--text-strong) } .wsp .wsp-eocomp__d{ display:block; font-size:11.5px; color:var(--text-subtle); margin-top:2px } .wsp .wsp-eocomp__amt{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--text-strong) } /* -- dokumen (master 650-658) -- */ .wsp .wsp-eodoc{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--line-100) } .wsp .wsp-eodoc:hover{ background:var(--surface-1) } .wsp .wsp-eodoc__ic{ width:34px; height:34px; border-radius:var(--wsp-r9); background:var(--surface-1); border:1px solid var(--line-200); display:grid; place-items:center; color:var(--text-muted); flex:0 0 auto; } .wsp .wsp-eodoc__body{ flex:1; min-width:0 } .wsp .wsp-eodoc__n{ display:block; font-size:13px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wsp .wsp-eodoc__m{ display:block; font-size:11px; color:var(--text-subtle); margin-top:2px } .wsp .wsp-eodoc__dl{ width:32px; height:32px; display:grid; place-items:center; border-radius:var(--wsp-r8); border:1px solid var(--border-input); background:var(--surface-0); color:var(--text-muted); cursor:pointer; flex:0 0 auto; text-decoration:none; } .wsp .wsp-eodoc__dl:hover{ background:var(--surface-1) } /* -- pusat kendali (master 664-714) -- */ .wsp .wsp-eolock{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); padding:40px; text-align:center; } .wsp .wsp-eolock__ic{ color:var(--text-disabled); display:inline-flex } .wsp .wsp-eolock__t{ font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text-strong); margin-top:10px } .wsp .wsp-eolock__d{ font-size:13px; color:var(--text-muted); margin-top:6px; line-height:1.55 } .wsp .wsp-eokgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px } .wsp .wsp-eok{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); padding:18px 20px; } .wsp .wsp-eok__head{ display:flex; align-items:center; gap:8px; margin-bottom:12px } .wsp .wsp-eok__t{ font-family:var(--font-display); font-size:14px; font-weight:700; margin:0; flex:1; min-width:0; color:var(--text-strong) } .wsp .wsp-eok__chips{ display:flex; gap:6px; flex-wrap:wrap } .wsp .wsp-eok__chip{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--wsp-rp); font-size:11.5px; font-weight:600; background:var(--surface-1); border:1px solid var(--line-200); color:var(--text-body); } .wsp .wsp-eok__note{ font-size:11.5px; color:var(--text-subtle); margin-top:12px; line-height:1.5 } .wsp .wsp-eok__row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-100) } .wsp .wsp-eok__code{ width:26px; height:26px; border-radius:var(--wsp-r8); background:var(--wsp-ink); color:var(--vs-yellow); display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; font-weight:700; flex:0 0 auto; } .wsp .wsp-eok__lbl{ flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--text-strong) } .wsp .wsp-eok__time{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted) } .wsp .wsp-eok__map{ border:1px dashed var(--line-200); border-radius:var(--wsp-r10); height:90px; display:grid; place-items:center; background:var(--surface-1); color:var(--text-disabled); font-size:11px; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:0 12px; } .wsp .wsp-eok__name{ font-size:12.5px; color:var(--text-body); margin-top:10px; font-weight:600 } .wsp .wsp-eok__addr{ font-size:11.5px; color:var(--text-subtle); margin-top:2px } .wsp .wsp-eok__switch{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-100); font-size:12.5px; color:var(--text-body); } .wsp .wsp-eok__crit{ display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--line-100) } .wsp .wsp-eok__crit svg{ color:var(--pst-success-text); flex:0 0 auto } .wsp .wsp-eok__crit span{ font-size:12.5px; color:var(--text-body) } /* ------------------------------------------------------------------ */ /* DRAWER DETAIL KARYAWAN (master 2655-2716) */ /* ------------------------------------------------------------------ */ .wsp-drawer__hero{ padding:22px 24px; background:var(--bg-ink); color:var(--wsp-on-ink); position:relative; flex:0 0 auto } .wsp-drawer__hx{ position:absolute; top:14px; right:14px; width:30px; height:30px; display:grid; place-items:center; border-radius:var(--wsp-r8); border:0; background:var(--wsp-on-ink-fill-10); color:var(--wsp-on-ink); cursor:pointer; } .wsp-drawer__hx:hover{ background:var(--wsp-on-ink-fill) } .wsp-drawer__hava{ width:52px; height:52px; border-radius:var(--wsp-rp); background:var(--vs-yellow); color:var(--wsp-ink); display:grid; place-items:center; font-family:var(--font-mono); font-size:16px; font-weight:700; } .wsp-drawer__hname{ font-family:var(--font-display); font-size:18px; font-weight:800; margin-top:12px } .wsp-drawer__hrole{ font-size:12.5px; color:var(--wsp-on-ink-64); margin-top:2px } .wsp-drawer__htags{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap } .wsp-drawer__htag{ display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px; border-radius:var(--wsp-rp); font-size:10.5px; font-weight:600; background:var(--wsp-on-ink-fill-10); border:1px solid var(--wsp-on-ink-fill); color:var(--wsp-on-ink-75); } .wsp-drawer__body--24{ padding:18px 24px } .wsp-drawer__ident{ display:flex; flex-direction:column; gap:7px; margin-top:8px } .wsp-drawer__irow{ display:flex; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:var(--wsp-r9); background:var(--surface-1); border:1px solid var(--line-100); } .wsp-drawer__ik{ font-size:12px; color:var(--text-subtle) } .wsp-drawer__iv{ font-size:12px; font-weight:700; color:var(--text-strong); text-align:right } .wsp-drawer__ibox{ padding:9px 12px; border-radius:var(--wsp-r9); background:var(--surface-1); border:1px solid var(--line-100) } .wsp-drawer__iroles{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px } .wsp-drawer__irole{ font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:var(--wsp-rp); background:var(--surface-0); border:1px solid var(--line-200); color:var(--text-muted); } .wsp-drawer__contact{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-body); margin-top:8px } .wsp-drawer__contact svg{ color:var(--text-subtle); flex:0 0 auto } .wsp-drawer__hist{ display:flex; flex-direction:column; margin-top:8px } .wsp-drawer__hrow{ display:flex; gap:12px; padding:8px 0 } .wsp-drawer__hline{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto } .wsp-drawer__hdot{ width:9px; height:9px; border-radius:var(--wsp-rp); background:var(--wsp-ink); margin-top:4px } .wsp-drawer__hbar{ width:1px; flex:1; background:var(--line-200) } .wsp-drawer__hd{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--text-subtle) } .wsp-drawer__he{ display:block; font-size:12.5px; color:var(--text-body); margin-top:2px } .wsp-drawer__edit{ height:38px; border-radius:var(--wsp-r10); border:0; background:var(--wsp-ink); color:var(--wsp-on-ink); font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; } .wsp-drawer__edit:hover{ background:var(--wsp-ink-hover) } .wsp-drawer__locked{ display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:var(--wsp-r10); background:var(--surface-1); border:1px solid var(--line-200); color:var(--text-subtle); font-size:11.5px; } /* ------------------------------------------------------------------ */ /* DIALOG AJUKAN CUTI (master 2050-2074) — lewat adminModal */ /* ------------------------------------------------------------------ */ .modal-center.wsp-modal--440{ width:min(440px,92vw); max-width:440px } .modal-center.workspace-layer.ws-command-window.wsp-modal--440{ width:min(440px,92vw); max-width:440px } /* garis kuning 3px di tepi atas dialog (master 2053) */ .wsp-dlgtop{ height:3px; background:var(--vs-yellow); margin:-1px -1px 0 } .wsp-dlghead{ padding:20px 24px 0 } .wsp-dlghead h3{ font-family:var(--font-display); font-size:17px; font-weight:700; margin:0; color:var(--text-strong) } .wsp-dlghead p{ font-size:12px; color:var(--text-subtle); margin:3px 0 0 } .wsp-dlgbody{ padding:18px 24px; display:flex; flex-direction:column; gap:13px } .wsp-dlgfield > span{ display:block; font-size:12.5px; font-weight:600; color:var(--text-strong); margin-bottom:6px } .wsp-dlggrid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px } .wsp-dlgnote{ display:flex; align-items:flex-start; gap:8px; padding:10px 13px; border-radius:var(--wsp-r10); background:var(--pst-warning-bg); border:1px solid var(--pst-warning-border); color:var(--pst-warning-text); font-size:11.5px; line-height:1.5; } .wsp-dlgnote svg{ flex:0 0 auto; margin-top:1px } .wsp-dlgfoot{ display:flex; justify-content:flex-end; gap:8px; padding:16px 24px; border-top:1px solid var(--line-100); } .wsp-dlgbtn{ height:38px; padding:0 16px; border-radius:var(--wsp-r10); border:1px solid var(--border-input); background:var(--surface-0); font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; } .wsp-dlgbtn:hover{ background:var(--surface-1) } .wsp-dlgbtn--ink{ padding:0 20px; border:0; background:var(--wsp-ink); color:var(--wsp-on-ink); font-weight:700 } .wsp-dlgbtn--ink:hover{ background:var(--wsp-ink-hover) } @media (max-width:1180px){ .wsp .wsp-eogrid{ grid-template-columns:minmax(0,1fr) } } @media (prefers-reduced-motion: reduce){ .wsp-eo{ animation:none !important } } /* == :END == WORKSPACE-EOFFICE ======================================= */ /* == WORKSPACE-FORUM (F5 — reproduksi Workspace.dc.html 1400-1688) ===== */ /* Binding style diresolusi dari forumVals() (script master 5240-5385), tag() 3012-3014, toolset() 3409-3424. Spec: docs/workspace-prototype/spec_F5_forum.md Scope .wsp; prefix .wsp-fo*. Primitif bersama (.wsp-tag/.wsp-pill/.wsp-badge/ .wsp-ava/.wsp-editor/.wsp-rich/.wsp-pick__row/.wsp-callout/.wsp-search/--wsp-*) dari blok WORKSPACE-PM. NOL hex/rgba mentah. */ /* ---- 3.1 struktur & rail (master 1402-1419) ---- */ .wsp-fo{ animation:wsp-fade .2s ease } .wsp .wsp-fo__grid{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:16px; align-items:start } .wsp .wsp-fo__rail{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); overflow:hidden; } /* master 1405 kicker; tombol (+) = deviasi D1 (aksi app nyata ws_forum_category_save) */ .wsp .wsp-fo__railhead{ display:flex; align-items:center; gap:8px; padding:14px 16px 10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); } .wsp .wsp-fo__railhead > span{ flex:1; min-width:0 } .wsp .wsp-fo__chans{ display:flex; flex-direction:column; padding:0 8px 12px; gap:2px } .wsp .wsp-fo__chan{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--wsp-r9); border:0; cursor:pointer; width:100%; font-family:var(--font-body); background:transparent; color:var(--text-body); } .wsp .wsp-fo__chan.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink) } .wsp .wsp-fo__chanid{ flex:1; min-width:0; text-align:left } .wsp .wsp-fo__channame{ display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wsp .wsp-fo__chansub{ display:block; font-size:10px; margin-top:1px; color:var(--text-subtle) } .wsp .wsp-fo__chan.is-on .wsp-fo__chansub{ color:var(--wsp-on-ink-55) } .wsp .wsp-fo__chanct{ font-family:var(--font-mono); font-size:10px; font-weight:700; padding:1px 7px; border-radius:var(--wsp-rp); background:var(--ink-050); color:var(--text-muted); flex:0 0 auto; } .wsp .wsp-fo__chan.is-on .wsp-fo__chanct{ background:var(--vs-yellow); color:var(--wsp-ink) } .wsp .wsp-fo__main{ min-width:0; display:flex; flex-direction:column; gap:12px } .wsp .wsp-fo__card{ background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-card); overflow:hidden; } /* ---- 3.2 header kanal + tab (master 1421-1435) ---- */ .wsp .wsp-fo__head{ display:flex; align-items:center; gap:10px; padding:15px 20px 11px } .wsp .wsp-fo__headid{ flex:1; min-width:0 } .wsp .wsp-fo__title{ font-family:var(--font-display); font-size:15px; font-weight:700; margin:0; color:var(--text-strong); } .wsp .wsp-fo__desc{ font-size:11.5px; color:var(--text-subtle); margin-top:2px } .wsp .wsp-fo__members{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-subtle); flex:0 0 auto; } .wsp .wsp-fo__members i, .wsp .wsp-fo__members svg{ flex:0 0 auto; display:inline-flex } .wsp .wsp-fo__tabs{ display:flex; align-items:center; gap:3px; padding:0 14px; border-top:1px solid var(--line-100) } .wsp .wsp-fo__tab{ display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 13px; border:0; background:transparent; cursor:pointer; font-family:var(--font-body); font-size:12.5px; color:var(--text-muted); font-weight:500; white-space:nowrap; } .wsp .wsp-fo__tab.is-on{ color:var(--text-strong); font-weight:700; box-shadow:inset 0 -2px 0 var(--wsp-ink) } .wsp .wsp-fo__tab i, .wsp .wsp-fo__tab svg{ flex:0 0 auto; display:inline-flex } /* ---- 3.3 panel File / Tugas (master 1437-1516) ---- */ .wsp .wsp-fo__phead{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line-100); } .wsp .wsp-fo__pkicker{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); flex:1; min-width:0; } .wsp .wsp-fo__phint{ font-size:11.5px; color:var(--text-subtle); flex:0 0 auto } .wsp .wsp-fo__bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 20px; border-bottom:1px solid var(--line-100); background:var(--surface-1); } .wsp .wsp-fo__inp{ flex:1; min-width:180px; height:34px; padding:0 12px; border:1px solid var(--border-input); border-radius:var(--wsp-r9); font-family:var(--font-body); font-size:12.5px; color:var(--text-strong); outline:none; background:var(--surface-0); } .wsp .wsp-fo__sel{ height:34px; padding:0 8px; border:1px solid var(--border-input); border-radius:var(--wsp-r9); background:var(--surface-0); font-family:var(--font-body); font-size:11.5px; color:var(--text-body); } .wsp .wsp-fo__sel--mono{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted) } .wsp .wsp-fo__sel--140{ max-width:140px } .wsp .wsp-fo__go{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:var(--wsp-r9); border:0; background:var(--wsp-ink); color:var(--wsp-on-ink); font-family:var(--font-body); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; } .wsp .wsp-fo__go:hover:not(:disabled){ background:var(--wsp-ink-hover) } .wsp .wsp-fo__go:disabled{ background:var(--ink-050); color:var(--text-disabled); cursor:not-allowed } .wsp .wsp-fo__row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 20px; border-bottom:1px solid var(--line-100); } .wsp .wsp-fo__fico{ width:34px; height:34px; border-radius:var(--wsp-r9); background:var(--ink-050); display:grid; place-items:center; flex:0 0 auto; color:var(--text-muted); } .wsp .wsp-fo__rowid{ flex:1; min-width:140px } .wsp .wsp-fo__rowid--150{ min-width:150px } .wsp .wsp-fo__rowname{ display:block; font-size:12.5px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wsp .wsp-fo__rowmeta{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--text-subtle); margin-top:2px; } .wsp .wsp-fo__rowtitle{ display:block; font-size:12.5px; font-weight:600; color:var(--text-strong); line-height:1.4 } .wsp .wsp-fo__rowsub{ display:block; font-size:11px; color:var(--text-subtle); margin-top:2px } .wsp .wsp-fo__selpill{ height:30px; max-width:150px; padding:0 8px; border:1px solid var(--border-input); border-radius:var(--wsp-rp); background:var(--surface-0); font-family:var(--font-body); font-size:11px; color:var(--text-muted); flex:0 0 auto; } .wsp .wsp-fo__code{ font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); flex:0 0 auto } .wsp .wsp-fo__moves{ display:flex; gap:4px; flex-wrap:wrap; flex:0 0 auto } .wsp .wsp-fo__move{ padding:0 9px } /* master 5344/5346/5352 — font-weight TETAP 600 (beda dari .wsp-pill.is-on yang 700) */ .wsp .wsp-fo__act{ border-color:var(--border-input); font-weight:600 } .wsp .wsp-fo__act.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); border-color:var(--wsp-ink); font-weight:600; } .wsp .wsp-fo__act--strong{ color:var(--text-strong) } .wsp .wsp-fo__pin.is-on{ background:var(--vs-yellow); color:var(--wsp-ink); border-color:var(--wsp-ink); font-weight:600; } /* WAJIB: :is(...) .wsp-pill.is-on:hover (0,4,0) akan mencuri background jadi ink-hover. Master 5352 tidak punya varian hover — pin harus tetap kuning. */ .wsp .wsp-fo__pin.is-on:hover{ background:var(--vs-yellow); color:var(--wsp-ink) } .wsp .wsp-fo__empty{ padding:24px; text-align:center; font-size:12.5px; color:var(--text-subtle) } .wsp .wsp-fo__gapwrap{ padding:24px } /* ---- 3.4 composer thread (master 1518-1585) ---- */ .wsp .wsp-fo__comp{ display:flex; gap:11px; padding:14px 18px; border-bottom:1px solid var(--line-100) } .wsp .wsp-fo__compbody{ flex:1; min-width:0 } .wsp .wsp-fo__ntinp{ width:100%; box-sizing:border-box; padding:0 13px } .wsp .wsp-fo__ed{ border-radius:var(--wsp-r11) } .wsp .wsp-fo__ed--nt{ margin-top:8px } /* spesifisitas 0,3,0 supaya menang atas .wsp-editor__tool.is-on (0,2,0) */ .wsp .wsp-fo__mentbtn.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink) } .wsp .wsp-rich--fnt{ min-height:76px; max-height:220px; padding:11px 13px; line-height:1.6 } .wsp .wsp-rich--frp{ min-height:62px; max-height:200px; padding:11px 13px; line-height:1.6 } /* badan post: .wsp-rich dipakai agar ul/ol/blockquote/code hasil markdown ikut bergaya, tapi min-height:140px bawaannya WAJIB dinolkan (R4) */ .wsp .wsp-rich--fpost{ min-height:0; max-height:none; overflow:visible; padding:0; margin-top:4px; font-size:13px; line-height:1.55; color:var(--text-body); } .wsp .wsp-fo__ment{ margin-top:8px; padding:10px 11px; border:1px solid var(--line-200); border-radius:var(--wsp-r11); background:var(--surface-1); } .wsp .wsp-fo__mentk{ display:block; margin-bottom:8px } .wsp .wsp-fo__mentgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:6px } .wsp .wsp-fo__mentopt:hover{ border-color:var(--ink-300) } .wsp .wsp-fo__mentava{ width:22px; height:22px; border-radius:var(--wsp-rp); background:var(--ink-100); color:var(--ink-600); display:grid; place-items:center; font-family:var(--font-mono); font-size:9px; font-weight:700; flex:0 0 auto; } .wsp .wsp-fo__chips{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px } .wsp .wsp-fo__chip{ display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 6px 0 11px; border-radius:var(--wsp-rp); border:1px solid var(--line-200); background:var(--surface-1); font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); } .wsp .wsp-fo__chipx{ width:20px; height:20px; display:grid; place-items:center; border-radius:var(--wsp-rp); border:0; background:transparent; color:var(--text-subtle); cursor:pointer; flex:0 0 auto; } .wsp .wsp-fo__chipx:hover{ background:var(--ink-050); color:var(--pst-danger-text) } .wsp .wsp-fo__acts{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:9px } .wsp .wsp-fo__cancel{ height:32px; padding:0 12px; border-radius:var(--wsp-r9); border:0; background:transparent; font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--text-subtle); cursor:pointer; } .wsp .wsp-fo__cancel:hover{ background:var(--surface-1) } .wsp .wsp-fo__send{ gap:6px } .wsp .wsp-fo__taskbox{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:8px; padding:9px 11px; border:1px dashed var(--line-200); border-radius:var(--wsp-r10); background:var(--surface-1); } .wsp .wsp-fo__msel{ height:28px; padding:0 6px; border:1px solid var(--border-input); border-radius:var(--wsp-r8); background:var(--surface-0); font-family:var(--font-body); font-size:11.5px; color:var(--text-body); } .wsp .wsp-fo__msel--mono{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted) } .wsp .wsp-fo__mdate{ height:28px; padding:0 7px; border:1px solid var(--border-input); border-radius:var(--wsp-r8); font-family:var(--font-mono); font-size:11px; color:var(--text-strong); outline:none; background:var(--surface-0); } .wsp .wsp-fo__taskhint{ flex:1 0 100%; font-size:11px; color:var(--text-subtle); line-height:1.45 } /* ---- 3.5 baris thread (master 1586-1607) ---- */ .wsp .wsp-fo__trow{ display:flex; gap:12px; width:100%; padding:14px 20px; border:0; border-bottom:1px solid var(--line-100); background:transparent; cursor:pointer; text-align:left; font-family:var(--font-body); align-items:flex-start; } .wsp .wsp-fo__trow:hover{ background:var(--surface-1) } .wsp .wsp-fo__trbody{ flex:1; min-width:0 } .wsp .wsp-fo__trtop{ display:flex; align-items:center; gap:7px; flex-wrap:wrap } .wsp .wsp-fo__pinico{ display:inline-flex; flex:0 0 auto; color:var(--pst-identity-text) } .wsp .wsp-fo__trtitle{ font-size:13.5px; font-weight:600; color:var(--text-strong); line-height:1.4 } .wsp .wsp-fo__trow.is-unread .wsp-fo__trtitle{ font-weight:700 } .wsp .wsp-fo__trmeta{ display:block; font-size:11.5px; color:var(--text-subtle); margin-top:3px } .wsp .wsp-fo__trstats{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11px; color:var(--text-muted); flex:0 0 auto; } .wsp .wsp-fo__trstat{ display:inline-flex; align-items:center; gap:4px } .wsp .wsp-fo__trstat--task{ color:var(--pst-blue-text) } /* ---- 3.6 thread terbuka + post + composer balasan (master 1610-1683) ---- */ .wsp .wsp-fo__backbar{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line-100); flex-wrap:wrap; } .wsp .wsp-fo__back{ display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; padding:0; } .wsp .wsp-fo__back:hover{ color:var(--text-strong) } .wsp .wsp-fo__thead{ padding:18px 22px 6px } .wsp .wsp-fo__ttitle{ font-family:var(--font-display); font-size:17px; font-weight:700; margin:0; color:var(--text-strong); line-height:1.35; } .wsp .wsp-fo__tmeta{ font-size:11.5px; color:var(--text-subtle); margin-top:4px } .wsp .wsp-fo__links{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px } .wsp .wsp-fo__lchip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:var(--wsp-rp); border:1px solid var(--wsp-tone-border); background:var(--wsp-tone-bg); font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--wsp-tone-text); cursor:pointer; } .wsp .wsp-fo__lchip:hover{ filter:brightness(.97) } .wsp .wsp-fo__lchip--file{ border-color:var(--line-200); background:var(--surface-1); color:var(--text-muted); font-weight:400; cursor:default; } .wsp .wsp-fo__lchip--file:hover{ filter:none } .wsp .wsp-fo__posts{ padding:10px 22px 6px; display:flex; flex-direction:column } .wsp .wsp-fo__post{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-100) } /* 42px = avatar 30px + gap 12px milik master 1631-1632 (deviasi D5, bukan angka karangan) */ .wsp .wsp-fo__post--child{ padding-left:42px } .wsp .wsp-fo__pbody{ flex:1; min-width:0 } .wsp .wsp-fo__posthead{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap } .wsp .wsp-fo__pauthor{ font-size:12.5px; font-weight:700; color:var(--text-strong) } .wsp .wsp-fo__ptime{ font-size:10.5px; color:var(--text-subtle) } .wsp .wsp-fo__pdel{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:13px; color:var(--text-subtle) } .wsp .wsp-fo__pacts{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px } .wsp .wsp-fo__react{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:var(--wsp-rp); border:1px solid var(--line-200); background:var(--surface-1); font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); cursor:pointer; } .wsp .wsp-fo__react.is-mine{ border-color:var(--wsp-ink); color:var(--text-strong) } .wsp .wsp-fo__rp{ padding:14px 22px 18px } .wsp .wsp-fo__rprow{ display:flex; gap:10px; align-items:flex-start } .wsp .wsp-fo__rpava{ margin-top:3px } .wsp .wsp-fo__rpbody{ flex:1; min-width:0 } .wsp .wsp-fo__rpsend{ height:40px; padding:0 18px; font-size:13px; font-weight:600; flex:0 0 auto } /* ---- 3.7 responsif & motion (helmet master 58-62) ---- */ @media (max-width:1180px){ .wsp .wsp-fo__grid{ grid-template-columns:minmax(0,1fr) } } @media (prefers-reduced-motion: reduce){ .wsp-fo{ animation:none !important } } /* == :END == WORKSPACE-FORUM ========================================== */ /* == WORKSPACE-ROSTER (F8 — reproduksi Workspace.dc.html 1776-1836) ==== */ /* Binding style diresolusi dari script master rosterVals() 5444-5484 + helper tag() 3012-3013. Spec: docs/workspace-prototype/spec_F8_roster.md Primitif bersama (.wsp-tag/.wsp-ava/.wsp-card/.wsp-callout/.wsp-pill/.wsp-ico/ .wsp-btn/.wsp-spacer/--wsp-r*) dari blok WORKSPACE-PM. BREAKPOINT: NOL — tidak satu pun @media helmet master menyentuh kelas roster. Responsivitas datang dari overflow-x:auto (1798) + min-width:780px (1799) + flex-wrap:wrap (1779, 1822). Jangan mengarang breakpoint. */ .wsp-rst{ display:flex; flex-direction:column; gap:14px; animation:wsp-fade .2s ease } .wsp .wsp-rst__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap } .wsp .wsp-rst__id{ min-width:0 } .wsp .wsp-rst__titlerow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap } .wsp .wsp-rst__h2{ font-family:var(--font-display); font-size:16px; font-weight:700; margin:0; color:var(--text-strong) } .wsp .wsp-rst__sub{ font-size:11.5px; color:var(--text-subtle); margin-top:2px } /* toolbar app (master tak punya toolbar) — memakai primitif master, tanpa geometri baru */ .wsp .wsp-rst__tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap } .wsp .wsp-rst__wk{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); white-space:nowrap } .wsp .wsp-rst__sel{ height:30px; padding:0 8px; border:1px solid var(--border-input); border-radius:var(--wsp-r9); background:var(--surface-0); font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--text-strong); outline:none; cursor:pointer; flex:0 0 auto; min-width:168px; max-width:220px; } .wsp .wsp-rst__sel:disabled{ cursor:not-allowed; opacity:.65 } /* flex:0 0 auto = tambahan app: di master seg adalah anak terakhir setelah spacer */ .wsp .wsp-rst__seg{ display:flex; gap:2px; padding:3px; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-rp); flex:0 0 auto; } .wsp .wsp-rstmode{ height:30px; padding:0 13px; border-radius:var(--wsp-rp); border:0; cursor:pointer; font-family:var(--font-body); font-size:12px; white-space:nowrap; background:transparent; color:var(--text-muted); font-weight:500; } .wsp .wsp-rstmode.is-on{ background:var(--wsp-ink); color:var(--wsp-on-ink); font-weight:700 } .wsp .wsp-rstmode:disabled{ cursor:not-allowed; opacity:.55 } /* dipasang bersama .wsp-callout .wsp-callout--tone .wsp-t-blue */ .wsp .wsp-rst__note{ align-items:center; padding:11px 16px; font-size:12.5px } /* WAJIB: .wsp-callout svg memasang margin-top:1px, master 1795 align-items:center tanpa margin */ .wsp .wsp-rst__note svg{ margin-top:0 } .wsp .wsp-rst__scroll{ overflow-x:auto } .wsp .wsp-rst__grid{ min-width:780px } .wsp .wsp-rstrow{ display:grid; grid-template-columns:180px repeat(7, 1fr); border-bottom:1px solid var(--line-100); align-items:stretch; } .wsp .wsp-rst__corner{ padding:11px 16px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle); } .wsp .wsp-rst__day{ padding:11px 8px; text-align:center; border-left:1px solid var(--line-100) } .wsp .wsp-rst__dayname{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--text-strong) } .wsp .wsp-rst__demand{ font-family:var(--font-mono); font-size:8.5px; margin-top:2px; color:var(--text-subtle) } .wsp .wsp-rst__demand.is-hot{ color:var(--pst-danger-text); font-weight:700 } .wsp .wsp-rst__who{ padding:9px 16px; display:flex; align-items:center; gap:9px; min-width:0 } .wsp .wsp-rst__ava{ font-size:9.5px } .wsp .wsp-rst__name{ font-size:12px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* URUTAN #26 → #27 → #28 LOAD-BEARING: spesifisitas identik (0,2,0), yang belakangan menang. */ .wsp .wsp-rstcell{ border:0; border-left:1px solid var(--line-100); cursor:pointer; padding:12px 4px; font-family:var(--font-mono); font-size:11px; font-weight:700; text-align:center; background:var(--wsp-tone-bg); color:var(--wsp-tone-text); } .wsp .wsp-rstcell--off{ background:var(--surface-1); color:var(--text-disabled) } /* state app: sel tanpa data. Master tak punya ini; fallback cellMeta akan membuatnya terlihat OFF = data palsu. */ .wsp .wsp-rstcell--blank{ background:var(--surface-0); color:var(--text-subtle) } .wsp .wsp-rstcell:disabled{ cursor:default } .wsp .wsp-rstcell.is-pending{ position:relative } .wsp .wsp-rstcell.is-pending::after{ content:""; position:absolute; top:5px; right:5px; width:4px; height:4px; border-radius:var(--wsp-rp); background:currentColor; } .wsp .wsp-rstcell.is-draft{ box-shadow:inset 0 0 0 2px var(--vs-yellow) } .wsp .wsp-rst__legend{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 16px; border-top:1px solid var(--line-100); } .wsp .wsp-rst__lnote{ font-size:11px; color:var(--text-subtle) } .wsp .wsp-rst__empty{ padding:22px 16px; text-align:center; font-size:12.5px; color:var(--text-subtle) } .wsp .wsp-rst__gap{ display:flex; align-items:flex-start; gap:7px; padding:0 16px 12px; font-size:11.5px; color:var(--text-subtle); line-height:1.5; } .wsp .wsp-rst__gap svg{ flex:0 0 auto; margin-top:2px } @media (prefers-reduced-motion: reduce){ .wsp-rst{ animation:none !important } } /* == :END == WORKSPACE-ROSTER ========================================= */ /* == WORKSPACE-NOTIF (F9 — reproduksi Workspace.dc.html 2027-2047 · 2766-2772) == */ /* Spec: docs/workspace-prototype/spec_F9_notif_toast.md SELF-CONTAINED: TIDAK memakai prefix :is(.wsp,…) karena #wsBellPop hidup di #bgCommDock (anak document.body), di luar subtree .wsp. Token --wsp-* tersedia karena .wsp-notifpop sudah ditambahkan ke akar token di §0 blok WORKSPACE-PM. BREAKPOINT: NOL — master responsif lewat width:min(348px,90vw) & max-width:88vw. */ /* -- scrim (master 2029) -- */ .wsp-notifscrim{ position:fixed; inset:0; z-index:75; background:transparent } /* -- panel popover (master 2030) -- Properti di bawah WAJIB dideklarasi ulang karena elemen juga membawa .ws-bell-pop (admin.css ±3596 & ±4132). Menang lewat urutan sumber, bukan spesifisitas. */ .wsp-notifpop{ position:fixed; top:70px; right:28px; /* FALLBACK; ditimpa inline oleh wspNotifAnchor() */ width:min(348px, 90vw); max-width:none; background:var(--surface-0); border:1px solid var(--line-200); border-radius:var(--wsp-r14); box-shadow:var(--shadow-pop); z-index:76; overflow:hidden; animation:wsp-rise .16s ease; font-family:var(--font-body); color:var(--text-body); display:flex; flex-direction:column; max-height:min(70vh, 560px); padding:0; } /* WAJIB: [hidden] punya spesifisitas 0 — tanpa ini display:flex membuat popover tidak pernah bisa disembunyikan lagi di SEMUA modul. */ .wsp-notifpop[hidden]{ display:none !important } /* -- head (master 2031-2035) -- */ .wsp-notifpop__head{ display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--line-100); flex:0 0 auto; } .wsp-notifpop__head > svg{ width:15px; height:15px; color:var(--text-muted); flex:0 0 auto; display:block } .wsp-notifpop__title{ font-family:var(--font-display); font-size:13.5px; font-weight:700; margin:0; flex:1; color:var(--text-strong); } .wsp-notifpop__all{ border:0; background:transparent; padding:0; font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--text-muted); cursor:pointer; flex:0 0 auto; } .wsp-notifpop__all:hover{ color:var(--text-strong) } /* -- body scroll (adaptasi: head tetap, isi bergulir; backend LIMIT 100) -- */ .wsp-notifpop__body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain } /* -- baris notifikasi (script master 5580 · 5583) -- */ .wsp-notifrow{ display:flex; gap:11px; align-items:flex-start; padding:11px 16px; border:0; border-bottom:1px solid var(--line-100); width:100%; cursor:pointer; font-family:var(--font-body); background:transparent; color:var(--text-body); } /* Isian per KATEGORI supaya sekali lihat langsung ketahuan asalnya (Forum / Chat / Daily Jurnal / Tasks & PM / E-Office / Post-Pro). Baris membawa .wsp-t-{tone} sehingga --wsp-tone-* tersedia untuk baris DAN ikon di dalamnya. Garis kategori memakai inset box-shadow, BUKAN border-left: border akan menggeser padding/lebar baris dan berisiko menimbulkan tumpang tindih; box-shadow nol dampak layout. */ .wsp-notifpop .wsp-notifrow{ background:color-mix(in srgb, var(--wsp-tone-bg) 38%, transparent); box-shadow:inset 3px 0 0 var(--wsp-tone-border); } /* belum dibaca = isian tone penuh + teks lebih tegas */ .wsp-notifpop .wsp-notifrow.is-unread{ background:var(--wsp-tone-bg); box-shadow:inset 3px 0 0 var(--wsp-tone-text); } .wsp-notifpop .wsp-notifrow.is-unread .wsp-notifrow__line{ font-weight:600; color:var(--text-strong) } .wsp-notifpop .wsp-notifrow:hover:not(.is-dead){ filter:brightness(.985) } /* baris mati (tautan tidak bisa dibuka) sengaja TIDAK diberi warna kategori — mewarnainya membuatnya tampak bisa diklik. */ .wsp-notifpop .wsp-notifrow.is-dead{ cursor:default; background:transparent; box-shadow:inset 3px 0 0 var(--line-200); opacity:.72; } .wsp-notifrow.is-dead{ cursor:default } .wsp-notifrow__ic{ width:30px; height:30px; border-radius:var(--wsp-r9); display:grid; place-items:center; flex:0 0 auto; background:var(--wsp-tone-bg); border:1px solid var(--wsp-tone-border); color:var(--wsp-tone-text); } .wsp-notifrow__ic > svg{ width:14px; height:14px; display:block } .wsp-notifrow__txt{ flex:1; min-width:0; text-align:left } .wsp-notifrow__line{ display:block; font-size:12px; color:var(--text-body); line-height:1.45 } .wsp-notifrow__meta{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--text-subtle); margin-top:3px; } .wsp-notifrow__meta b{ font-weight:600; color:var(--text-muted) } .wsp-notifrow__dot{ width:7px; height:7px; border-radius:var(--wsp-rp); background:var(--vs-yellow); border:1px solid var(--vs-yellow-shadow); margin-top:5px; flex:0 0 auto; } /* -- empty state (adaptasi: master selalu punya seed, app tidak boleh dummy) -- */ .wsp-notifpop__empty{ display:flex; gap:9px; align-items:flex-start; padding:12px 16px; font-size:11.5px; line-height:1.55; color:var(--text-muted); } .wsp-notifpop__empty > svg{ width:15px; height:15px; color:var(--text-muted); flex:0 0 auto; margin-top:1px; display:block; } /* -- toast (master 2767-2771): opt-in lewat kelas .wsp-toast. ui.js/app.css TIDAK disentuh; kelas hanya dipasang saat layer aktif = Workspace. -- */ .toast-wrap:has(> .toast.wsp-toast){ bottom:26px; width:auto; max-width:none } .toast.wsp-toast{ max-width:88vw; border-radius:var(--radius-pill); padding:11px 20px; font-family:var(--font-body); font-size:13px; font-weight:600; display:flex; align-items:center; gap:9px; background:var(--ink-950); color:var(--primary-contrast); box-shadow:var(--shadow-pop); animation:wsp-rise .2s ease; } /* master tidak punya ikon di toast — yang ada dot kuning 7px */ .toast.wsp-toast > svg{ display:none } .toast.wsp-toast::before{ content:''; width:7px; height:7px; border-radius:var(--radius-pill); background:var(--vs-yellow); flex:0 0 auto; } /* varian --icon: dipakai saat pemanggil mengirim opts.icon (mis. {icon:'warn'}) supaya makna peringatan tidak hilang. Bentuk pil master dipertahankan. */ .toast.wsp-toast--icon > svg{ display:block; width:18px; height:18px } .toast.wsp-toast--icon::before{ content:none } @media (prefers-reduced-motion: reduce){ .wsp-notifpop, .toast.wsp-toast{ animation:none !important } } /* == :END == WORKSPACE-NOTIF ========================================== */ /* == WORKSPACE-JURNAL (F7 — reproduksi Workspace.dc.html 1689-1775) === */ /* Sumber: 12.00.01.01 WORKSPACE - Claude Design/Workspace.dc.html markup 1689-1775 (blok "DAILY JURNAL v2.0") · script jurnalVals() 5386-5442 · tag() 3012-3014 · helmet responsive 44-75. Spec bedah: docs/workspace-prototype/spec_F7_jurnal.md (43 binding teresolusi, lewat audit adversarial 3 lensa). Prefix .wsp-jr* — BUKAN .wsp-j*, karena .wsp-jcard/.wsp-jstrip sudah dipakai blok WORKSPACE-HOME (F2) untuk strip "Daily Jurnal hari ini" di Ringkasan. Waspada tetangga satu huruf: .ws-jrcard (legacy, admin.css §4086) ≠ .wsp-jrcard. Token lokal --wsp-* memakai akar yang sudah ada (§0 blok WORKSPACE-PM); blok ini TIDAK menambah token baru satu pun. Nol hex/rgba mentah. PENYIMPANGAN YANG DISENGAJA (jangan dikira lupa): 1. Tabel Papan Performa (.wsp-jrtable/.wsp-jrtrow) — master tidak pernah menggambar tabel di layar Jurnal. Nilai padding/mono-head/hover disalin dari anatomi tabel master 486-510 (preseden .wsp-eorow F4); grid 9 kolom dan min-width:1000px murni keputusan app. 2. .wsp-jrdivrow / .wsp-jrswitch (sub `config`) dan .wsp-jrsec__body/__foot/__empty — wadah untuk sub-tab app (plan/board/config) yang tidak ada di master. Ritme padding menyalin master (15px 20px head, 13px 20px row). 3. Dot kolom hold/handover/cancel memakai --sunset-orange/--neon-pink/--hot-red, BUKAN --accent-orange/pink/red. Keputusan owner (ADR-001): app menimpa alias --accent-* di admin.css §3938-3940 sehingga nilainya meleset dari prototype (#C2470E vs #F97316, dst). Token literal di app.css:38,41,42 nilainya identik prototype, jadi keenam dot papan cocok 100% dengan master tanpa hardcode. */ /* ------------------------------------------------------------------ */ /* §1 · WADAH + HEAD (master 1691-1695) */ /* ------------------------------------------------------------------ */ .wsp-jr{ display:flex; flex-direction:column; gap:14px; animation:wsp-fade .2s ease } .wsp .wsp-jr__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap } /* min-width:0 = TAMBAHAN app (master 1693
telanjang); judul app dinamis. */ .wsp .wsp-jr__id{ min-width:0 } .wsp .wsp-jr__h2{ font-family:var(--font-display); font-size:16px; font-weight:700; margin:0; color:var(--text-strong); } .wsp .wsp-jr__sub{ font-size:11.5px; color:var(--text-subtle); margin-top:2px } /* ------------------------------------------------------------------ */ /* §2 · SEGMENTED SWITCH VIEW (master 1699 + jv.st script 5400-5401) */ /* ------------------------------------------------------------------ */ /* max-width+overflow-x = TAMBAHAN (master punya 2 chip, app sampai 5 — pola identik .wsp-eo__tabs F4). inline-flex/align/text-decoration/flex:0 0 auto = master memakai