/* ============================================================ AirRO — tema "Aqua Clear" (Liquid Glass), konsep A yang dipilih pemilik (2026-10-05) ------------------------------------------------------------ One presentation layer, loaded LAST (index.html), over the existing tokens and components: no screen markup or logic changes. A deep aqua water ground with slow drifting light, floating glass panels (sidebar, content, sticky header, modals, bottom nav), solid white cards on the glass for readability, darker text, springy motion. Light theme only — the dark theme (:root[data-theme="dark"]) is left exactly as it was. Respects prefers-reduced-motion. ============================================================ */ /* ── 1. Tokens ───────────────────────────────────────────── */ :root:not([data-theme="dark"]) { --aq-ground: linear-gradient(155deg, #BCDCF2 0%, #C3E7E3 52%, #CDD5F5 100%); --aq-glass: rgba(255, 255, 255, .72); --aq-glass-strong: rgba(255, 255, 255, .86); --aq-glass-line: rgba(255, 255, 255, .95); --aq-edge: 0 0 0 1px rgba(16, 64, 104, .08); --aq-blur: blur(24px) saturate(190%); --aq-accent: #0A5C99; --aq-accent-grad: linear-gradient(145deg, #2E9BE0, #0A5C99); --aq-spring: cubic-bezier(.34, 1.56, .64, 1); --canvas: #C9E3F1; --card-soft: #F2F8FC; --border: #D3E3EC; --border-soft: #E3EEF4; --ink: #0F2230; --text: #0F2230; --text-mut: #3B5262; --text-faint: #5E7482; --shadow-sm: 0 1px 2px rgba(12, 64, 104, .06); --shadow-md: 0 10px 28px rgba(12, 64, 104, .12); --shadow-lg: 0 22px 54px rgba(12, 64, 104, .18); --r-md: 18px; } /* ── 2. The water ground + drifting light (behind everything) ── */ :root:not([data-theme="dark"]) body { background: var(--aq-ground); background-attachment: fixed; } :root:not([data-theme="dark"]) body::before, :root:not([data-theme="dark"]) body::after { content: ""; position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; will-change: transform; } :root:not([data-theme="dark"]) body::before { width: 62vw; height: 62vw; left: -18vw; top: -26vw; background: radial-gradient(circle at 40% 40%, rgba(46, 155, 224, .55), rgba(46, 155, 224, 0) 66%); animation: aqDriftA 26s ease-in-out infinite alternate; } :root:not([data-theme="dark"]) body::after { width: 56vw; height: 56vw; right: -16vw; bottom: -24vw; background: radial-gradient(circle at 50% 50%, rgba(36, 190, 170, .45), rgba(36, 190, 170, 0) 66%); animation: aqDriftB 31s ease-in-out infinite alternate; } :root:not([data-theme="dark"]) #root { position: relative; z-index: 1; } @keyframes aqDriftA { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vw, 6vw) scale(1.12); } } @keyframes aqDriftB { from { transform: translate(0, 0) scale(1); } to { transform: translate(-7vw, -5vw) scale(1.1); } } /* ── 3. App shell: floating glass sidebar + glass content panel ── */ :root:not([data-theme="dark"]) .app { background: transparent; } :root:not([data-theme="dark"]) .content { background: var(--aq-glass); -webkit-backdrop-filter: var(--aq-blur); backdrop-filter: var(--aq-blur); border: 1px solid var(--aq-glass-line); box-shadow: inset 0 1px 0 #fff, var(--aq-edge), var(--shadow-lg); border-radius: 28px; } @media (min-width: 861px) { :root:not([data-theme="dark"]) .app { padding: 16px; gap: 16px; } :root:not([data-theme="dark"]) .main { padding: 0; } :root:not([data-theme="dark"]) .app > .sidebar { height: auto; align-self: stretch; padding: 22px 14px; border-radius: 28px; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: var(--aq-blur); backdrop-filter: var(--aq-blur); border: 1px solid var(--aq-glass-line); box-shadow: inset 0 1px 0 #fff, var(--aq-edge), var(--shadow-md); } /* the sticky header becomes real glass: the page scrolls UNDER it */ :root:not([data-theme="dark"]) .topbar { background: rgba(255, 255, 255, .58); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, .7); border-radius: 28px 28px 0 0; } } :root:not([data-theme="dark"]) .brand-name { color: #06192A; } :root:not([data-theme="dark"]) .nav-label { color: #3E5466; } :root:not([data-theme="dark"]) .nav-item { color: #1D3446; border-radius: 14px; min-height: 44px; transition: background .25s ease, color .25s ease, transform .4s var(--aq-spring), box-shadow .25s ease; } :root:not([data-theme="dark"]) .nav-item:hover { background: rgba(10, 92, 153, .08); color: #06192A; } :root:not([data-theme="dark"]) .nav-item:active { transform: scale(.97); } :root:not([data-theme="dark"]) .nav-item.on { background: var(--aq-accent-grad); color: #fff; box-shadow: 0 6px 16px rgba(10, 92, 153, .32), inset 0 1px 0 rgba(255, 255, 255, .35); } :root:not([data-theme="dark"]) .nav-item.on svg { color: #fff; } /* systems (modules) on top of the sidebar: glass tiles, the open one a bright white tile */ :root:not([data-theme="dark"]) .nav-min-btn { color: #2A4152; } :root:not([data-theme="dark"]) .nav-min-btn:hover { background: rgba(10, 92, 153, .08); color: #06192A; } :root:not([data-theme="dark"]) .mod-tile { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .9); color: #2A4152; box-shadow: var(--aq-edge); } :root:not([data-theme="dark"]) .mod-tile:hover { background: rgba(255, 255, 255, .85); color: #06192A; } :root:not([data-theme="dark"]) .mod-tile.on { background: #fff; border-color: #fff; color: var(--aq-accent); box-shadow: inset 0 0 0 1.5px rgba(46, 155, 224, .6), 0 6px 16px rgba(10, 92, 153, .18); } :root:not([data-theme="dark"]) .mod-head { color: #3E5466; border-top-color: rgba(16, 64, 104, .1); } :root:not([data-theme="dark"]) .user-chip .up-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } /* ── 4. Surfaces: solid white cards on the glass, with a soft lift ── */ :root:not([data-theme="dark"]) .card { border-color: rgba(255, 255, 255, .9); box-shadow: var(--aq-edge), 0 8px 24px rgba(12, 64, 104, .08); } :root:not([data-theme="dark"]) .fin-kpi, :root:not([data-theme="dark"]) .kpi-card { transition: transform .45s var(--aq-spring), box-shadow .35s ease, border-color .25s ease; } :root:not([data-theme="dark"]) button.fin-kpi:hover, :root:not([data-theme="dark"]) .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--aq-edge), 0 18px 40px rgba(12, 64, 104, .16); } /* ── 5. Controls ─────────────────────────────────────────── */ :root:not([data-theme="dark"]) .btn { border-radius: 13px; transition: transform .35s var(--aq-spring), background .2s ease, box-shadow .25s ease; } :root:not([data-theme="dark"]) .btn:active { transform: scale(.96); } :root:not([data-theme="dark"]) .btn-primary { background: var(--aq-accent-grad); color: #fff; box-shadow: 0 6px 16px rgba(10, 92, 153, .28), inset 0 1px 0 rgba(255, 255, 255, .35); } :root:not([data-theme="dark"]) .btn-primary:hover { background: linear-gradient(145deg, #3AA8EC, #0B66A8); box-shadow: 0 10px 22px rgba(10, 92, 153, .34), inset 0 1px 0 rgba(255, 255, 255, .4); } :root:not([data-theme="dark"]) .btn-ghost { background: #fff; border-color: #CFE0EA; } :root:not([data-theme="dark"]) .btn-ghost:hover { background: #F2F8FC; } :root:not([data-theme="dark"]) .fld { border-color: #CFE0EA; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; } :root:not([data-theme="dark"]) .fld:focus { border-color: #2E9BE0; box-shadow: 0 0 0 4px rgba(46, 155, 224, .18); } :root:not([data-theme="dark"]) .top-search, :root:not([data-theme="dark"]) .icon-circle { background: #fff; border-color: #CFE0EA; } :root:not([data-theme="dark"]) .seg { background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .9); box-shadow: var(--aq-edge); border-radius: 12px; } :root:not([data-theme="dark"]) .seg-btn { color: #2A4152; border-radius: 9px; transition: background .3s ease, color .3s ease, box-shadow .3s ease; } :root:not([data-theme="dark"]) .gran-seg { background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .9); box-shadow: var(--aq-edge); } :root:not([data-theme="dark"]) .gran-btn { color: #2A4152; transition: background .3s ease, color .3s ease, box-shadow .3s ease; } :root:not([data-theme="dark"]) .gran-btn.on { background: #fff; color: var(--aq-accent); box-shadow: 0 4px 14px rgba(10, 92, 153, .18), inset 0 1px 0 #fff; } :root:not([data-theme="dark"]) .seg-btn.on { background: #fff; color: var(--aq-accent); box-shadow: 0 4px 14px rgba(10, 92, 153, .18), inset 0 1px 0 #fff; } /* ── 6. Modals: a glass sheet over a softly blurred page ── */ :root:not([data-theme="dark"]) .modal-scrim { background: rgba(6, 40, 66, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } :root:not([data-theme="dark"]) .modal-card { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--aq-glass-line); border-radius: 24px; box-shadow: inset 0 1px 0 #fff, var(--aq-edge), 0 30px 70px rgba(6, 40, 66, .28); animation: aqPop .45s var(--aq-spring) both; } @keyframes aqPop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } /* ── 7. Login ────────────────────────────────────────────── */ :root:not([data-theme="dark"]) .login-stage { background: transparent; } :root:not([data-theme="dark"]) .login-stage .login-card { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: var(--aq-blur); backdrop-filter: var(--aq-blur); border: 1px solid var(--aq-glass-line); box-shadow: inset 0 1px 0 #fff, var(--aq-edge), 0 24px 60px rgba(12, 64, 104, .2); } /* ── 8. Phones (office view): full-height glass page + a floating glass dock ── */ @media (max-width: 860px) { :root:not([data-theme="dark"]) .content { border-radius: 0; border: 0; box-shadow: none; background: rgba(255, 255, 255, .64); padding-bottom: calc(100px + env(safe-area-inset-bottom)); } :root:not([data-theme="dark"]) .hamburger { background: #fff; border-color: #CFE0EA; } :root:not([data-theme="dark"]) .mobile-nav { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 5px; border-radius: 26px; border: 1px solid var(--aq-glass-line); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: var(--aq-blur); backdrop-filter: var(--aq-blur); box-shadow: inset 0 1px 0 #fff, var(--aq-edge), 0 14px 34px rgba(12, 64, 104, .22); } :root:not([data-theme="dark"]) .mnav { color: #2A4152; border-radius: 20px; transition: background .3s ease, color .3s ease, transform .35s var(--aq-spring); } :root:not([data-theme="dark"]) .mnav:active { transform: scale(.92); } :root:not([data-theme="dark"]) .mnav.on { background: #DCEFFB; color: var(--aq-accent); } :root:not([data-theme="dark"]) .mnav.on svg { color: var(--aq-accent); } :root:not([data-theme="dark"]) .drawer { background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: var(--aq-blur); backdrop-filter: var(--aq-blur); border-right: 1px solid var(--aq-glass-line); border-radius: 0 26px 26px 0; } :root:not([data-theme="dark"]) .scrim { background: rgba(6, 40, 66, .3); } } /* ── 9. Field view (mode lapangan): the same water ground, darker secondary text ── */ :root:not([data-theme="dark"]) .mlap-root { --mlap-bg: #C9E3F1; --mlap-sub: #3B5262; --mlap-line: #E1ECF3; background: var(--aq-ground); } :root:not([data-theme="dark"]) .mlap-root::before { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; width: 120vw; height: 120vw; left: -40vw; top: -50vw; background: radial-gradient(circle at 40% 40%, rgba(46, 155, 224, .45), rgba(46, 155, 224, 0) 64%); animation: aqDriftA 24s ease-in-out infinite alternate; } :root:not([data-theme="dark"]) body.mlap-on, :root:not([data-theme="dark"]) .mlap-boot { background: var(--aq-ground); } :root:not([data-theme="dark"]) .mlap-top { background: linear-gradient(to top, rgba(196, 226, 236, 0), rgba(196, 226, 236, .92) 55%); } :root:not([data-theme="dark"]) .mlap-dockfade, :root:not([data-theme="dark"]) .mlap-ctafade { background: linear-gradient(to bottom, rgba(196, 226, 236, 0), rgba(196, 226, 236, .95) 70%); } /* ── 10. Screen entrance ─────────────────────────────────── */ :root:not([data-theme="dark"]) .screen-enter { animation: aqRise .5s cubic-bezier(.2, .8, .2, 1); } @keyframes aqRise { from { transform: translateY(12px); } to { transform: none; } } /* transform only: resting opacity is always 1 */ /* ── 11. Dashboards (Perusahaan · Ringkasan keuangan · Distribusi), konsep A ── A glass greeting header, white KPI tiles with a tinted icon (no dark hero tiles), a white-pill segmented period control, gradient bars that grow in, rounded hover rows, and a short staggered entrance. Transform-only motion, so a card's resting state never depends on an animation. */ :root:not([data-theme="dark"]) .co-dash .co-hero { background: rgba(255, 255, 255, .8); color: #06192A; -webkit-backdrop-filter: var(--aq-blur); backdrop-filter: var(--aq-blur); border: 1px solid var(--aq-glass-line); border-radius: 24px; padding: 20px 24px; box-shadow: inset 0 1px 0 #fff, var(--aq-edge), 0 14px 36px rgba(12, 64, 104, .12); } :root:not([data-theme="dark"]) .co-dash .co-hello { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } :root:not([data-theme="dark"]) .co-dash .co-hello-date { color: #34495A; font-size: 13px; } :root:not([data-theme="dark"]) .co-dash .co-hello-sub { color: #3B5262; font-size: 13.5px; margin-top: 4px; } :root:not([data-theme="dark"]) .co-dash .co-tag { background: #fff; color: #1D3446; border: 1px solid #D2E3EE; } :root:not([data-theme="dark"]) .co-dash .co-tag.good { background: #D9F3EF; color: #0E6E66; border-color: transparent; } :root:not([data-theme="dark"]) .co-dash .co-tag.warn { background: #FCEFD9; color: #7A4B00; border-color: transparent; } /* cards on the dashboards: rounder, airier, one title style */ :root:not([data-theme="dark"]) .co-dash .card, :root:not([data-theme="dark"]) .fin-dash .card, :root:not([data-theme="dark"]) .dist-dash .card { border-radius: 24px; } :root:not([data-theme="dark"]) .fin-dash .sec-title, :root:not([data-theme="dark"]) .dist-dash .sec-title, :root:not([data-theme="dark"]) .co-dash .co-grid .card .sec-title { font-size: 16px; font-weight: 700; color: #06192A; letter-spacing: -.01em; } /* KPI tiles: white, tinted icon, big figure, springy lift on hover */ :root:not([data-theme="dark"]) .aq-kpi, :root:not([data-theme="dark"]) .dist-dash .dist-kpi, :root:not([data-theme="dark"]) .fin-dash .fin-kpi { background: #fff; border: 1px solid rgba(255, 255, 255, .95); border-radius: 24px; padding: 20px; box-shadow: var(--aq-edge), 0 10px 28px rgba(12, 64, 104, .1); transition: transform .45s var(--aq-spring), box-shadow .35s ease; } :root:not([data-theme="dark"]) .aq-kpi:hover, :root:not([data-theme="dark"]) .dist-dash .dist-kpi:hover, :root:not([data-theme="dark"]) .fin-dash button.fin-kpi:hover { transform: translateY(-4px); box-shadow: var(--aq-edge), 0 22px 46px rgba(12, 64, 104, .17); } :root:not([data-theme="dark"]) .aq-kpi-val { font-size: 26px; } :root:not([data-theme="dark"]) .aq-kpi.tone-blue .aq-kpi-ic { background: #DCEFFB; } :root:not([data-theme="dark"]) .aq-kpi.tone-teal .aq-kpi-ic { background: #D9F3EF; } :root:not([data-theme="dark"]) .aq-kpi.tone-amber .aq-kpi-ic { background: #FCEFD9; } :root:not([data-theme="dark"]) .aq-kpi.tone-indigo .aq-kpi-ic { background: #E6E8FB; } :root:not([data-theme="dark"]) .aq-kpi.tone-slate .aq-kpi-ic { background: #E8EEF3; } :root:not([data-theme="dark"]) .co-dash .aq-kpi-val { font-size: 28px; } :root:not([data-theme="dark"]) .aq-kpi-lbl, :root:not([data-theme="dark"]) .dist-dash .dist-kpi-lbl, :root:not([data-theme="dark"]) .fin-dash .fin-kpi-label { color: #2A4152; font-size: 13px; font-weight: 600; } :root:not([data-theme="dark"]) .dist-dash .dist-kpi-val, :root:not([data-theme="dark"]) .fin-dash .fin-kpi-val { letter-spacing: -.02em; } :root:not([data-theme="dark"]) .dist-dash .dist-kpi-val { font-size: 24px; } :root:not([data-theme="dark"]) .dist-dash .dist-kpi .icon-tile { border-radius: 11px; } /* the former dark hero tiles become ordinary light tiles with a blue icon */ :root:not([data-theme="dark"]) .dist-dash .dist-kpi-hero .icon-tile.hero { background: #DCEFFB; color: #0A5C99; } :root:not([data-theme="dark"]) .dist-dash .dist-kpi-hero .dist-kpi-val { color: #06192A; } :root:not([data-theme="dark"]) .dist-dash .dist-kpi-hero .dist-kpi-unit { color: var(--text-faint); } :root:not([data-theme="dark"]) .dist-dash .dist-kpi-hero .dist-kpi-lbl { color: #2A4152; } :root:not([data-theme="dark"]) .dist-dash .dist-kpi-hero .dist-kpi-skel { background: #E3EEF4; } :root:not([data-theme="dark"]) .dist-dash .dist-kpi-pill { border-radius: 10px; padding: 3px 9px; } :root:not([data-theme="dark"]) .dist-dash .dist-kpi-pill.hero { background: #DCEFFB; color: #0A5C99; } :root:not([data-theme="dark"]) .fin-dash .fin-kpi-ic { width: 38px; height: 38px; border-radius: 12px; } /* Kas Lapangan (Distribusi rail): a light card with a soft aqua wash instead of the dark block */ :root:not([data-theme="dark"]) .dist-dash .dist-today-hero { background: linear-gradient(160deg, #DDF0FC 0%, #FFFFFF 72%); color: #06192A; border: 1px solid rgba(255, 255, 255, .95); box-shadow: var(--aq-edge), 0 10px 28px rgba(12, 64, 104, .1); } :root:not([data-theme="dark"]) .dist-dash .dist-th-count, :root:not([data-theme="dark"]) .dist-dash .dist-th-lbl, :root:not([data-theme="dark"]) .dist-dash .dist-th-split > span, :root:not([data-theme="dark"]) .dist-dash .dist-th-avg, :root:not([data-theme="dark"]) .dist-dash .dist-th-fleetcash-h, :root:not([data-theme="dark"]) .dist-dash .dist-th-net-row { color: #3B5262; } :root:not([data-theme="dark"]) .dist-dash .dist-th-net-formula, :root:not([data-theme="dark"]) .dist-dash .dist-th-fleetcash-exp { color: #5E7482; } :root:not([data-theme="dark"]) .dist-dash .dist-th-split b, :root:not([data-theme="dark"]) .dist-dash .dist-th-avg b, :root:not([data-theme="dark"]) .dist-dash .dist-th-net-row b, :root:not([data-theme="dark"]) .dist-dash .dist-th-net-row.total, :root:not([data-theme="dark"]) .dist-dash .dist-th-fleetcash-row { color: #06192A; } :root:not([data-theme="dark"]) .dist-dash .dist-th-val.pos, :root:not([data-theme="dark"]) .dist-dash .dist-th-net-row.total b, :root:not([data-theme="dark"]) .dist-dash .dist-th-fleetcash-row b { color: #0B6152; } :root:not([data-theme="dark"]) .dist-dash .dist-th-val.warn { color: #8A5A00; } :root:not([data-theme="dark"]) .dist-dash .dist-th-net-row b.neg { color: #B42318; } :root:not([data-theme="dark"]) .dist-dash .dist-th-avg, :root:not([data-theme="dark"]) .dist-dash .dist-th-net, :root:not([data-theme="dark"]) .dist-dash .dist-th-fleetcash { border-top-color: #D3E3EC; } /* period control: glass track, the chosen period a white pill (same as the header's .seg) */ :root:not([data-theme="dark"]) .dist-dash .dist-period-bar .dist-chips { gap: 2px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--aq-edge); } :root:not([data-theme="dark"]) .dist-dash .dist-period-bar .dist-chip { border: 0; background: transparent; color: #233B4D; border-radius: 12px; padding: 9px 16px; transition: background .3s ease, color .3s ease, box-shadow .3s ease; } :root:not([data-theme="dark"]) .dist-dash .dist-period-bar .dist-chip:hover { color: #06192A; background: rgba(255, 255, 255, .6); } :root:not([data-theme="dark"]) .dist-dash .dist-period-bar .dist-chip.on { background: #fff; color: var(--aq-accent); box-shadow: 0 4px 14px rgba(10, 92, 153, .18), inset 0 1px 0 #fff; } /* charts: gradient bars, rounder tops, growing in from the baseline */ :root:not([data-theme="dark"]) .cf-bar { rx: 5px; transform-box: fill-box; transform-origin: 50% 100%; animation: aqGrow .9s var(--aq-spring) backwards; } :root:not([data-theme="dark"]) .cf-bar.rev { fill: url(#cfRevGrad); } :root:not([data-theme="dark"]) .cf-bar.exp { fill: url(#cfExpGrad); } :root:not([data-theme="dark"]) .cf-bar.rev.on { fill: #053F66; } :root:not([data-theme="dark"]) .cf-bar.exp.on { fill: #0E7C72; } :root:not([data-theme="dark"]) .dist-chart2-bar { border-radius: 12px 12px 6px 6px; transform-origin: 50% 100%; animation: aqGrow .9s var(--aq-spring) backwards; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); } :root:not([data-theme="dark"]) .dist-bar-seg.lunas { background: linear-gradient(180deg, #3AA8EC, #0A5C99); } :root:not([data-theme="dark"]) .dist-bar-seg.bon { background: linear-gradient(180deg, #FFDB8F, #F0B445); } :root:not([data-theme="dark"]) .dist-legend .dot.navy { background: #1E86CC; } :root:not([data-theme="dark"]) .dist-legend .dot.amber { background: #F0B445; } @keyframes aqGrow { from { transform: scaleY(0); } to { transform: none; } } /* list rows: rounded, a soft hover, tinted initials */ :root:not([data-theme="dark"]) .dist-dash .dist-txn, :root:not([data-theme="dark"]) .fin-dash .fin-acctline { border-radius: 14px; transition: background .2s ease; } :root:not([data-theme="dark"]) .dist-dash .dist-txn { padding: 10px; border-bottom-color: #E3EEF4; } :root:not([data-theme="dark"]) .dist-dash .dist-txn:hover, :root:not([data-theme="dark"]) .fin-dash .fin-acctline:hover, :root:not([data-theme="dark"]) .fin-dash .gp-line:hover { background: rgba(10, 92, 153, .06); } :root:not([data-theme="dark"]) .dist-dash .dist-txn-av { border-radius: 12px; background: #DCEFFB; color: #0A5C99; } :root:not([data-theme="dark"]) .dist-dash .dist-txn:nth-child(4n+3) .dist-txn-av { background: #D9F3EF; color: #0E6E66; } :root:not([data-theme="dark"]) .dist-dash .dist-txn:nth-child(4n) .dist-txn-av { background: #E6E8FB; color: #3B3F99; } :root:not([data-theme="dark"]) .dist-dash .dist-txn:nth-child(4n+1) .dist-txn-av { background: #FCEFD9; color: #7A4B00; } :root:not([data-theme="dark"]) .dist-dash .dist-status { border-radius: 10px; padding: 3px 10px; } :root:not([data-theme="dark"]) .fin-dash .gp-line { border-radius: 10px; } :root:not([data-theme="dark"]) .fin-dash .gp-line.result { background: #F2F8FC; } :root:not([data-theme="dark"]) .fin-dash .gp-line.result.strong { background: linear-gradient(135deg, #DCEFFB, #D9F3EF); } /* entrance: KPI tiles and cards rise in one after another */ :root:not([data-theme="dark"]) .aq-kpis > *, :root:not([data-theme="dark"]) .co-dash .co-grid > *, :root:not([data-theme="dark"]) .dist-dash .dist-kpis > *, :root:not([data-theme="dark"]) .dist-dash .dist-main > .card, :root:not([data-theme="dark"]) .dist-dash .dist-rail > *, :root:not([data-theme="dark"]) .fin-dash .fin-dash-top > *, :root:not([data-theme="dark"]) .fin-dash > .card, :root:not([data-theme="dark"]) .fin-dash .fin-dash-grid > * { animation: aqRise .6s cubic-bezier(.2, .8, .2, 1) backwards; } :root:not([data-theme="dark"]) .aq-kpis > :nth-child(2), :root:not([data-theme="dark"]) .dist-dash .dist-kpis > :nth-child(2), :root:not([data-theme="dark"]) .fin-dash .fin-dash-top > :nth-child(2), :root:not([data-theme="dark"]) .dist-dash .dist-rail > :nth-child(2) { animation-delay: .06s; } :root:not([data-theme="dark"]) .aq-kpis > :nth-child(3), :root:not([data-theme="dark"]) .dist-dash .dist-kpis > :nth-child(3), :root:not([data-theme="dark"]) .dist-dash .dist-rail > :nth-child(3), :root:not([data-theme="dark"]) .co-dash .co-grid > * { animation-delay: .12s; } :root:not([data-theme="dark"]) .aq-kpis > :nth-child(4), :root:not([data-theme="dark"]) .dist-dash .dist-kpis > :nth-child(4), :root:not([data-theme="dark"]) .dist-dash .dist-main > .card, :root:not([data-theme="dark"]) .fin-dash .fin-dash-grid > * { animation-delay: .18s; } :root:not([data-theme="dark"]) .dist-dash .dist-kpis > :nth-child(5), :root:not([data-theme="dark"]) .fin-dash > .card { animation-delay: .24s; } /* sidebar account chip: a long role name ends in "…" instead of running under the buttons */ @media (min-width: 861px) { :root:not([data-theme="dark"]) { --sidebar-w: 264px; } } :root:not([data-theme="dark"]) .user-chip { gap: 8px; padding: 10px 8px; } :root:not([data-theme="dark"]) .user-chip .role-badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } :root:not([data-theme="dark"]) .user-chip .role-badge svg { vertical-align: -1px; margin-right: 3px; } :root:not([data-theme="dark"]) .user-chip .icon-btn { width: 28px; flex-shrink: 0; } /* ── 12. Transaksi (Keuangan + Distribusi) & Pelanggan, konsep A ── A glass toolbar with a round search field, soft-blue filter chips, white KPI tiles, the list on one white card with rounded hover rows and tinted initials, and pill tabs. */ :root:not([data-theme="dark"]) .tx-toolbar, :root:not([data-theme="dark"]) .cl-toolbar { align-items: stretch; padding: 10px 12px; margin-bottom: 4px; border-radius: 20px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: var(--aq-blur); backdrop-filter: var(--aq-blur); border: 1px solid var(--aq-glass-line); box-shadow: inset 0 1px 0 #fff, var(--aq-edge), 0 8px 22px rgba(12, 64, 104, .08); } :root:not([data-theme="dark"]) .cl-toolbar { align-items: center; } :root:not([data-theme="dark"]) .dist-search { border-radius: 22px; background: #fff; border-color: #D2E3EE; padding: 9px 16px; transition: border-color .2s ease, box-shadow .2s ease; } :root:not([data-theme="dark"]) .dist-search:focus-within { border-color: #2E9BE0; box-shadow: 0 0 0 4px rgba(46, 155, 224, .18); } /* filter chips: white, the chosen ones soft blue; a period group is a glass track with a white pill */ :root:not([data-theme="dark"]) .dist-chip { border-radius: 12px; background: #fff; border-color: #D2E3EE; color: #233B4D; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } :root:not([data-theme="dark"]) .dist-chip:hover { border-color: #A9CFE8; color: #06192A; } :root:not([data-theme="dark"]) .dist-chip.on { background: #DCEFFB; border-color: rgba(46, 155, 224, .55); color: var(--aq-accent); } :root:not([data-theme="dark"]) .tx-segmented { gap: 2px; padding: 3px; border-radius: 14px; border-color: rgba(255, 255, 255, .9); background: rgba(225, 238, 246, .8); } :root:not([data-theme="dark"]) .tx-segmented .dist-chip { border: 0; border-radius: 11px; background: transparent; } :root:not([data-theme="dark"]) .tx-segmented .dist-chip.on { background: #fff; color: var(--aq-accent); box-shadow: 0 3px 10px rgba(10, 92, 153, .16), inset 0 1px 0 #fff; } :root:not([data-theme="dark"]) .cl-viewtoggle { border-radius: 12px; background: rgba(225, 238, 246, .8); border-color: transparent; padding: 2px; } :root:not([data-theme="dark"]) .cl-viewtoggle button { background: transparent; border-radius: 9px; } :root:not([data-theme="dark"]) .cl-viewtoggle button + button { border-left: 0; } :root:not([data-theme="dark"]) .cl-viewtoggle button.on { background: #fff; color: var(--aq-accent); border-radius: 9px; box-shadow: 0 2px 8px rgba(10, 92, 153, .16); } /* summary tiles above the lists */ :root:not([data-theme="dark"]) .cl-sumcard { background: #fff; border: 1px solid rgba(255, 255, 255, .95); border-radius: 20px; padding: 16px 20px; gap: 6px; box-shadow: var(--aq-edge), 0 8px 22px rgba(12, 64, 104, .08); } :root:not([data-theme="dark"]) .cl-sumlbl { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: #2A4152; } :root:not([data-theme="dark"]) .cl-sumval { font-size: 22px; letter-spacing: -.02em; color: #06192A; } :root:not([data-theme="dark"]) .cl-sumval.amber { color: #8A5A00; } /* the lists: one white card, rounded hover rows, a quiet header */ :root:not([data-theme="dark"]) .tx-tablewrap { background: #fff; border-radius: 24px; padding: 6px 10px 10px; box-shadow: var(--aq-edge), 0 10px 28px rgba(12, 64, 104, .09); } :root:not([data-theme="dark"]) .tx-th, :root:not([data-theme="dark"]) .cl-table thead th, :root:not([data-theme="dark"]) .fin-th { background: #fff; color: #3E5466; } :root:not([data-theme="dark"]) .tx-td { border-bottom-color: #E3EEF4; } :root:not([data-theme="dark"]) .txt-row, :root:not([data-theme="dark"]) .cl-trow, :root:not([data-theme="dark"]) .fin-trow { transition: background .2s ease; } :root:not([data-theme="dark"]) .txt-row:hover, :root:not([data-theme="dark"]) .cl-trow:hover, :root:not([data-theme="dark"]) .fin-trow.clickable:hover { background: rgba(10, 92, 153, .05); } :root:not([data-theme="dark"]) .txt-row.active, :root:not([data-theme="dark"]) .txt-row.cursor, :root:not([data-theme="dark"]) .fin-trow.active { background: #E4F1FB; box-shadow: inset 3px 0 0 #2E9BE0; } :root:not([data-theme="dark"]) .txt-row.cursor .tx-td { box-shadow: none; } :root:not([data-theme="dark"]) .tx-grphead td { background: #F2F8FC; } :root:not([data-theme="dark"]) .tx-grphead-in { border-top-color: #E3EEF4; color: #3B5262; } :root:not([data-theme="dark"]) .cl-trow { border-bottom-color: #E3EEF4; } :root:not([data-theme="dark"]) .cl-listcard, :root:not([data-theme="dark"]) .txn-tablecard, :root:not([data-theme="dark"]) .txn-summary { border-radius: 24px; } :root:not([data-theme="dark"]) .txn-summary { padding: 16px 20px; } /* tinted initials, cycling blue · teal · indigo · amber down the list */ :root:not([data-theme="dark"]) .txt-row:nth-child(4n+3) .tx-av, :root:not([data-theme="dark"]) .cl-trow:nth-child(4n+2) .cl-av { background: #D9F3EF; color: #0E6E66; } :root:not([data-theme="dark"]) .txt-row:nth-child(4n) .tx-av, :root:not([data-theme="dark"]) .cl-trow:nth-child(4n+3) .cl-av { background: #E6E8FB; color: #3B3F99; } :root:not([data-theme="dark"]) .txt-row:nth-child(4n+1) .tx-av, :root:not([data-theme="dark"]) .cl-trow:nth-child(4n) .cl-av { background: #FCEFD9; color: #7A4B00; } :root:not([data-theme="dark"]) .tx-av, :root:not([data-theme="dark"]) .cl-av { border-radius: 11px; } :root:not([data-theme="dark"]) .dist-code { border-radius: 8px; } :root:not([data-theme="dark"]) .dist-bonpill { border-radius: 10px; } /* tabs (Catatan · Kas & Bank, the Laporan hub …): a glass track with the open tab a white pill */ :root:not([data-theme="dark"]) .lap-tabs { width: fit-content; max-width: 100%; gap: 2px; padding: 4px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .6); box-shadow: var(--aq-edge); } :root:not([data-theme="dark"]) .lap-tab { border-bottom: 0; margin-bottom: 0; border-radius: 12px; padding: 8px 16px; color: #233B4D; transition: background .3s ease, color .3s ease, box-shadow .3s ease; } :root:not([data-theme="dark"]) .lap-tab:hover { color: #06192A; background: rgba(255, 255, 255, .6); } :root:not([data-theme="dark"]) .lap-tab.on { background: #fff; color: var(--aq-accent); box-shadow: 0 4px 14px rgba(10, 92, 153, .18), inset 0 1px 0 #fff; } /* entrance */ :root:not([data-theme="dark"]) .cl-summary > *, :root:not([data-theme="dark"]) .tx-tablewrap, :root:not([data-theme="dark"]) .cl-listcard, :root:not([data-theme="dark"]) .txn-summary, :root:not([data-theme="dark"]) .txn-tablecard { animation: aqRise .6s cubic-bezier(.2, .8, .2, 1) backwards; } :root:not([data-theme="dark"]) .cl-summary > :nth-child(2) { animation-delay: .05s; } :root:not([data-theme="dark"]) .cl-summary > :nth-child(3), :root:not([data-theme="dark"]) .txn-tablecard { animation-delay: .1s; } :root:not([data-theme="dark"]) .cl-summary > :nth-child(4), :root:not([data-theme="dark"]) .tx-tablewrap, :root:not([data-theme="dark"]) .cl-listcard { animation-delay: .15s; } /* ── 13. Pengiriman, konsep A ── A glass toolbar, the progress ring growing in, soft status chips, rounded stop rows whose avatar takes the stop's status colour, rit rows as white cards with a live dot, and calmer location notices. */ :root:not([data-theme="dark"]) .dist-dash .dist-tx-toolbar.is-flow { padding: 10px 12px; border-radius: 20px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: var(--aq-blur); backdrop-filter: var(--aq-blur); border: 1px solid var(--aq-glass-line); box-shadow: inset 0 1px 0 #fff, var(--aq-edge), 0 8px 22px rgba(12, 64, 104, .08); } :root:not([data-theme="dark"]) .dlv-ring { animation: aqRing 1.4s cubic-bezier(.2, .8, .2, 1) backwards; } @keyframes aqRing { from { stroke-dashoffset: 251.3; } } :root:not([data-theme="dark"]) .dlv-ring-track { stroke: #D3E5F1; } :root:not([data-theme="dark"]) .dlv-prog-pct { color: #06192A; } :root:not([data-theme="dark"]) .dlv-prog-big { color: #06192A; } :root:not([data-theme="dark"]) .dlv-prog-bar { background: #D3E5F1; } :root:not([data-theme="dark"]) .dlv-prog-bar span { transform-origin: 0 50%; animation: aqGrowX 1s var(--aq-spring) backwards; } @keyframes aqGrowX { from { transform: scaleX(0); } to { transform: none; } } /* status chips: filled and soft instead of outlined */ :root:not([data-theme="dark"]) .dist-dstat { border: 0; border-radius: 9px; padding: 2px 9px; font-size: 10.5px; } :root:not([data-theme="dark"]) .dist-dstat.pending { background: #FCEFD9; color: #7A4B00; } :root:not([data-theme="dark"]) .dist-dstat.terkirim { background: #D9F3EF; color: #0E6E66; } :root:not([data-theme="dark"]) .dist-dstat.ditunda { background: #EDE7FB; color: #5B3CC4; } :root:not([data-theme="dark"]) .dist-dstat.batal { background: #FDE8E7; color: #B42318; } :root:not([data-theme="dark"]) .dist-src { border-radius: 9px; padding: 2px 8px; } :root:not([data-theme="dark"]) .dist-src.jadwal { background: #DCEFFB; color: #0A5C99; } /* stop rows */ :root:not([data-theme="dark"]) .dlv-list .dist-deliv-row { padding: 14px 10px; border-radius: 16px; border-bottom-color: #E3EEF4; transition: background .2s ease; } :root:not([data-theme="dark"]) .dlv-list .dist-deliv-row:hover { background: rgba(10, 92, 153, .045); } :root:not([data-theme="dark"]) .dlv-list .dist-deliv-row .dist-txn-av { border-radius: 12px; background: #FCEFD9; color: #7A4B00; } :root:not([data-theme="dark"]) .dlv-list .dist-deliv-row.st-terkirim .dist-txn-av { background: #D9F3EF; color: #0E6E66; } :root:not([data-theme="dark"]) .dlv-list .dist-deliv-row.st-ditunda .dist-txn-av { background: #EDE7FB; color: #5B3CC4; } :root:not([data-theme="dark"]) .dlv-list .dist-deliv-row.st-batal .dist-txn-av { background: #FDE8E7; color: #B42318; } :root:not([data-theme="dark"]) .dlv-list .dist-deliv-row.st-terkirim { opacity: .72; } :root:not([data-theme="dark"]) .dlv-list .dist-deliv-seq { color: #5E7482; } :root:not([data-theme="dark"]) .dlv-list .dist-deliv-actions .btn { border-radius: 12px; } :root:not([data-theme="dark"]) .dist-deliv-reason { color: #5B3CC4; } :root:not([data-theme="dark"]) .dlv-loc-once { color: #3B5262; } /* rit panel */ :root:not([data-theme="dark"]) .run-open-row { background: #fff; border: 1px solid #CFE6F6; border-radius: 16px; box-shadow: inset 3px 0 0 #2E9BE0, 0 4px 14px rgba(12, 64, 104, .06); } :root:not([data-theme="dark"]) .run-open-badge { color: #0A5C99; } :root:not([data-theme="dark"]) .run-dot { background: #2E9BE0; box-shadow: 0 0 0 3px rgba(46, 155, 224, .22); animation: aqPulse 2s ease-in-out infinite; } @keyframes aqPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(46, 155, 224, .22); } 50% { box-shadow: 0 0 0 6px rgba(46, 155, 224, .08); } } :root:not([data-theme="dark"]) .run-table th { color: #3E5466; } :root:not([data-theme="dark"]) .run-table th, :root:not([data-theme="dark"]) .run-table td { border-bottom-color: #E3EEF4; } :root:not([data-theme="dark"]) .run-table tbody tr { transition: background .2s ease; } :root:not([data-theme="dark"]) .run-table tbody tr:hover { background: rgba(10, 92, 153, .04); } :root:not([data-theme="dark"]) .run-st { border-radius: 9px; padding: 2px 9px; } :root:not([data-theme="dark"]) .run-st.open { background: #DCEFFB; color: #0A5C99; } :root:not([data-theme="dark"]) .run-armada-chip { border-radius: 10px; } /* location notices + coverage bar */ :root:not([data-theme="dark"]) .dist-pos-card { background: #FFF4E2; color: #6B4310; border-radius: 20px; } :root:not([data-theme="dark"]) .dist-pos-card.blocking { border-color: rgba(138, 90, 18, .2); } :root:not([data-theme="dark"]) .dist-cov-bar { background: #D3E5F1; } :root:not([data-theme="dark"]) .dist-cov-bar span { background: linear-gradient(90deg, #2E9BE0, #14A396); } :root:not([data-theme="dark"]) .dist-closed-banner { border-color: #9ED9CF; background: #EAF8F5; border-radius: 20px; } :root:not([data-theme="dark"]) .dist-closed-ic { color: #0E6E66; } :root:not([data-theme="dark"]) .dist-route-group { border-radius: 12px; background: #F2F8FC; } /* ── 14. Mode lapangan (HP sopir), konsep A ── On top of section 9's water ground: glass cards, the rit card with a pulsing "running" dot, the day's stops in big figures and a flowing load bar, the next stop with a soft number tile and a white Navigasi beside a gradient "Antar & catat", a glass segmented filter, round stop numbers, a gradient Catat button. dist-field.css (the approved mockup base) is left as it is. */ :root:not([data-theme="dark"]) .mlap-root .mlap-card { border-radius: 22px; box-shadow: 0 0 0 1px rgba(16, 64, 104, .06), 0 10px 26px rgba(12, 64, 104, .1); } :root:not([data-theme="dark"]) .mlap-root .mlap-ritcard, :root:not([data-theme="dark"]) .mlap-root .mlap-list { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); border: 1px solid rgba(255, 255, 255, .95); } :root:not([data-theme="dark"]) .mlap-root .mlap-ritcard { padding: 12px 16px 16px; gap: 6px; border-radius: 24px; } :root:not([data-theme="dark"]) .mlap-root .mlap-rit-dot { width: 8px; height: 8px; background: #14A396; animation: aqLive 2.2s ease-out infinite; } :root:not([data-theme="dark"]) .mlap-root .mlap-rit-dot.off { animation: none; } @keyframes aqLive { 0% { box-shadow: 0 0 0 0 rgba(20, 163, 150, .45); } 100% { box-shadow: 0 0 0 10px rgba(20, 163, 150, 0); } } :root:not([data-theme="dark"]) .mlap-root .mlap-rit-stops { font-variant-numeric: tabular-nums; line-height: 1.1; } :root:not([data-theme="dark"]) .mlap-root .mlap-rit-stops b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #06192A; } :root:not([data-theme="dark"]) .mlap-root .mlap-rit-stops span { font-size: 16px; font-weight: 600; color: #34495A; } :root:not([data-theme="dark"]) .mlap-root .mlap-bar { height: 10px; border-radius: 5px; background: #D3E5F1; margin-top: 4px; } :root:not([data-theme="dark"]) .mlap-root .mlap-bar > span { border-radius: 5px; background-image: linear-gradient(90deg, #2E9BE0, #14A396, #2E9BE0); background-size: 200% 100%; animation: aqFlow 3s linear infinite; } @keyframes aqFlow { from { background-position: 0 0; } to { background-position: -200% 0; } } /* the next stop */ :root:not([data-theme="dark"]) .mlap-root .mlap-next { border-radius: 26px; padding: 16px; gap: 12px; background: rgba(255, 255, 255, .94); } :root:not([data-theme="dark"]) .mlap-root .mlap-next-eb { color: #0A5C99; letter-spacing: .06em; } :root:not([data-theme="dark"]) .mlap-root .mlap-next-nm { font-size: 20px; letter-spacing: -.01em; } :root:not([data-theme="dark"]) .mlap-root .mlap-nbig { width: 48px; height: 48px; border-radius: 16px; background: #DCEFFB; color: #0A5C99; font-size: 18px; font-weight: 800; } :root:not([data-theme="dark"]) .mlap-root .mlap-chip-s { height: 28px; border-radius: 11px; padding: 0 10px; font-weight: 700; } :root:not([data-theme="dark"]) .mlap-root .mlap-chip-s.blue { background: #E6F1F9; color: #0B2A40; } :root:not([data-theme="dark"]) .mlap-root .mlap-btn.gray { background: #fff; border: 1px solid #C9DDEA; color: #0A5C99; font-weight: 700; } :root:not([data-theme="dark"]) .mlap-root .mlap-btn.primary { background: linear-gradient(145deg, #2E9BE0, #0A5C99); box-shadow: 0 8px 20px rgba(10, 92, 153, .32), inset 0 1px 0 rgba(255, 255, 255, .4); } :root:not([data-theme="dark"]) .mlap-root .mlap-btn.primary:disabled { background: #C9D3DA; color: #4A5A64; box-shadow: none; } :root:not([data-theme="dark"]) .mlap-root .mlap-next .mlap-actions .mlap-btn { min-height: 48px; border-radius: 16px; } :root:not([data-theme="dark"]) .mlap-root .mlap-next .mlap-actions .mlap-btn.primary { box-shadow: 0 8px 20px rgba(10, 92, 153, .32), inset 0 1px 0 rgba(255, 255, 255, .4); } /* filter + list */ :root:not([data-theme="dark"]) .mlap-root .mlap-seg { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(16, 64, 104, .06); border-radius: 14px; padding: 3px; } :root:not([data-theme="dark"]) .mlap-root .mlap-seg-b { color: #233B4D; border-radius: 11px; } :root:not([data-theme="dark"]) .mlap-root .mlap-seg-b.on { background: #fff; color: #0A5C99; box-shadow: 0 3px 10px rgba(10, 92, 153, .16), inset 0 1px 0 #fff; } :root:not([data-theme="dark"]) .mlap-root .mlap-list { border-radius: 24px; padding: 6px; } :root:not([data-theme="dark"]) .mlap-root .mlap-list .mlap-row { min-height: 58px; border-radius: 18px; border-bottom-color: transparent; transition: background .25s ease; } :root:not([data-theme="dark"]) .mlap-root .mlap-list .mlap-row:active { background: rgba(10, 92, 153, .06); } :root:not([data-theme="dark"]) .mlap-root .mlap-num { width: 30px; height: 30px; border-radius: 50%; background: #DCEFFB; color: #0A5C99; } :root:not([data-theme="dark"]) .mlap-root .mlap-num.ok { background: #D9F3EF; color: #0E6E66; } :root:not([data-theme="dark"]) .mlap-root .mlap-num.neg { background: #FDE8E7; color: #B42318; } /* header buttons, notices, Setoran tiles, the dock's Catat button */ :root:not([data-theme="dark"]) .mlap-root .mlap-round { background: rgba(255, 255, 255, .88); } :root:not([data-theme="dark"]) .mlap-root .mlap-alert.warn { background: #FFF4E6; border-color: #F6D2AE; border-radius: 18px; } :root:not([data-theme="dark"]) .mlap-root .mlap-kpi3 > div { border-radius: 18px; box-shadow: 0 0 0 1px rgba(16, 64, 104, .06), 0 8px 20px rgba(12, 64, 104, .08); } :root:not([data-theme="dark"]) .mlap-root .mlap-tab.on { color: #0A5C99; } :root:not([data-theme="dark"]) .mlap-root .mlap-catat { background: linear-gradient(145deg, #2E9BE0, #0A5C99); box-shadow: 0 10px 24px rgba(10, 92, 153, .4), inset 0 1px 0 rgba(255, 255, 255, .45); } /* ── 15. SDM (Karyawan, Kalender, Orientasi, Headcount, Penggajian, Kasbon, THR, Laporan, Pengaturan), konsep A ── The KPI rows use the shared .aq-kpi tile (section 11); here: white employee cards with tinted initials and a springy lift, pill department chips, the payroll / THR tables on one white card with rounded hover rows, the HR calendar as soft day tiles with today ringed in blue, gradient attendance bars, and the settings groups as white panels. */ :root:not([data-theme="dark"]) .dept-chip { background: #fff; border-color: #D2E3EE; color: #233B4D; transition: background .25s ease, color .25s ease, border-color .25s ease; } :root:not([data-theme="dark"]) .dept-chip:hover { border-color: #A9CFE8; color: #06192A; } :root:not([data-theme="dark"]) .dept-chip.on { background: #DCEFFB; border-color: rgba(46, 155, 224, .55); color: var(--aq-accent); } :root:not([data-theme="dark"]) .emp-toolbar .tx-search { border-radius: 22px; background: #fff; border-color: #D2E3EE; } :root:not([data-theme="dark"]) .emp-dept-head > span:first-child { color: #06192A; } :root:not([data-theme="dark"]) .emp-card { border-radius: 20px; border-color: rgba(255, 255, 255, .95); background: #fff; box-shadow: var(--aq-edge), 0 8px 22px rgba(12, 64, 104, .08); transition: transform .45s var(--aq-spring), box-shadow .35s ease; } :root:not([data-theme="dark"]) .emp-card:hover { transform: translateY(-3px); box-shadow: var(--aq-edge), 0 18px 40px rgba(12, 64, 104, .15); } :root:not([data-theme="dark"]) .emp-av, :root:not([data-theme="dark"]) .emp-av.sm { border-radius: 14px; background: #DCEFFB !important; color: #0A5C99 !important; } :root:not([data-theme="dark"]) .emp-cards > :nth-child(4n+2) .emp-av { background: #D9F3EF !important; color: #0E6E66 !important; } :root:not([data-theme="dark"]) .emp-cards > :nth-child(4n+3) .emp-av { background: #E6E8FB !important; color: #3B3F99 !important; } :root:not([data-theme="dark"]) .emp-cards > :nth-child(4n) .emp-av { background: #FCEFD9 !important; color: #7A4B00 !important; } /* tables: payroll, THR, orientation slips */ :root:not([data-theme="dark"]) .hrd-table-card { border-radius: 24px; padding: 8px 10px; } :root:not([data-theme="dark"]) .hrd-table th { color: #3E5466; border-bottom-color: #E3EEF4; } :root:not([data-theme="dark"]) .hrd-table td { border-bottom-color: #E3EEF4; } :root:not([data-theme="dark"]) .hrd-table tbody tr { transition: background .2s ease; } :root:not([data-theme="dark"]) .hrd-table tbody tr:hover { background: rgba(10, 92, 153, .05); } :root:not([data-theme="dark"]) .hrd-table tbody tr:hover td:first-child { border-radius: 14px 0 0 14px; } :root:not([data-theme="dark"]) .hrd-table tbody tr:hover td:last-child { border-radius: 0 14px 14px 0; } /* HR calendar */ :root:not([data-theme="dark"]) .hrcal-card { border-radius: 24px; } :root:not([data-theme="dark"]) .hrcal-cell { border-radius: 14px; border-color: #E3EEF4; background: #fff; transition: background .2s ease, transform .35s var(--aq-spring); } :root:not([data-theme="dark"]) .hrcal-cell:not(.empty):hover { background: #F2F8FC; transform: translateY(-2px); } :root:not([data-theme="dark"]) .hrcal-cell.has-ev { background: #F2F8FC; } :root:not([data-theme="dark"]) .hrcal-cell.today { border-color: #2E9BE0; box-shadow: inset 0 0 0 1px #2E9BE0, 0 6px 16px rgba(10, 92, 153, .14); } :root:not([data-theme="dark"]) .hrcal-cell.today .hrcal-dnum { color: #fff; background: linear-gradient(145deg, #2E9BE0, #0A5C99); border-radius: 8px; padding: 1px 7px; align-self: flex-start; } :root:not([data-theme="dark"]) .hrcal-wd span { color: #3E5466; } :root:not([data-theme="dark"]) .hrcal-list { border-radius: 24px; } /* report, orientation, THR, settings */ :root:not([data-theme="dark"]) .hrr-tile { background: #F2F8FC; border-color: #E3EEF4; border-radius: 16px; } :root:not([data-theme="dark"]) .hrr-chip { background: #F2F8FC; border-color: #E3EEF4; } :root:not([data-theme="dark"]) .hrr-chip b { color: #0A5C99; } :root:not([data-theme="dark"]) .hrr-trend-bar { background: linear-gradient(180deg, #3AA8EC, #0A5C99); border-radius: 12px 12px 6px 6px; transform-origin: 50% 100%; animation: aqGrow .9s var(--aq-spring) backwards; } :root:not([data-theme="dark"]) .thr-rel-chip { border-radius: 18px; border-color: rgba(255, 255, 255, .95); box-shadow: var(--aq-edge), 0 8px 22px rgba(12, 64, 104, .08); } :root:not([data-theme="dark"]) .thr-rel-cnt { background: #DCEFFB; color: #0A5C99; } :root:not([data-theme="dark"]) .ori-card { border-radius: 22px; } :root:not([data-theme="dark"]) .co-afford { border-radius: 24px; } :root:not([data-theme="dark"]) .rate-group { background: #fff; border-color: #E3EEF4; border-radius: 18px; box-shadow: 0 4px 14px rgba(12, 64, 104, .05); } :root:not([data-theme="dark"]) .rate-group-title { color: #0A5C99; } /* ── 16. Gudang (Stok Gudang, Stok Galon, Pemasok), konsep A ── White item cards with a springy lift and a soft blue icon tile, filled status chips, the stock level bar growing in, rounder action buttons, a softer restock panel, and the movement / supplier lists as rounded hover rows. */ :root:not([data-theme="dark"]) .gud-card { background: #fff; border-color: rgba(255, 255, 255, .95); border-radius: 24px; padding: 18px; gap: 12px; box-shadow: var(--aq-edge), 0 10px 26px rgba(12, 64, 104, .09); transition: transform .45s var(--aq-spring), box-shadow .35s ease; } :root:not([data-theme="dark"]) .gud-card:hover { transform: translateY(-3px); box-shadow: var(--aq-edge), 0 20px 44px rgba(12, 64, 104, .15); } :root:not([data-theme="dark"]) .gud-card.low { box-shadow: inset 0 0 0 1.5px rgba(217, 130, 43, .55), 0 10px 26px rgba(12, 64, 104, .09); } :root:not([data-theme="dark"]) .gud-card-top .icon-tile, :root:not([data-theme="dark"]) .gud-card-top img { border-radius: 14px; } :root:not([data-theme="dark"]) .gud-kind-ic { background: #DCEFFB; color: #0A5C99; } :root:not([data-theme="dark"]) .gud-card-name { color: #06192A; } :root:not([data-theme="dark"]) .gud-card-num { letter-spacing: -.02em; color: #06192A; } :root:not([data-theme="dark"]) .gud-card-actions .btn { border-radius: 12px; } :root:not([data-theme="dark"]) .gud-card-note { background: #F2F8FC; border-radius: 12px; } :root:not([data-theme="dark"]) .gud-badge { border-radius: 9px; padding: 3px 9px; border: 0; } :root:not([data-theme="dark"]) .gud-badge.ok { background: #D9F3EF; color: #0E6E66; } :root:not([data-theme="dark"]) .gud-badge.low { background: #FCEFD9; color: #7A4B00; } :root:not([data-theme="dark"]) .gud-badge.none { background: #EEF3F7; color: #3E5466; } :root:not([data-theme="dark"]) .gud-level { height: 10px; border-radius: 5px; background: #D3E5F1; } :root:not([data-theme="dark"]) .gud-level > span { border-radius: 5px; transform-origin: 0 50%; animation: aqGrowX 1s var(--aq-spring) backwards; } :root:not([data-theme="dark"]) .gud-restock { background: #FFF4E2; border-color: #F6D2AE; border-radius: 20px; } :root:not([data-theme="dark"]) .gud-restock-h { color: #7A4B00; } :root:not([data-theme="dark"]) .gud-restock-pill { border-radius: 10px; border-color: #F0C68A; } :root:not([data-theme="dark"]) .gud-mtag { border-radius: 9px; } :root:not([data-theme="dark"]) .gud-mtag.in { background: #D9F3EF; color: #0E6E66; } :root:not([data-theme="dark"]) .gud-mtag.out { background: #DCEFFB; color: #0A5C99; } :root:not([data-theme="dark"]) .gud-sup-ic { background: #DCEFFB; color: #0A5C99; border-radius: 12px; } :root:not([data-theme="dark"]) .dist-dash .dist-txn.gud-sup-row { border-radius: 14px; } :root:not([data-theme="dark"]) .gm-posisi { border-radius: 24px; } :root:not([data-theme="dark"]) .gm-loc { background: #fff; border: 1px solid #E3EEF4; border-left-width: 1px; border-radius: 18px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(12, 64, 104, .05); position: relative; overflow: hidden; } :root:not([data-theme="dark"]) .gm-loc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } :root:not([data-theme="dark"]) .gm-loc.depot::before { background: #2E9BE0; } :root:not([data-theme="dark"]) .gm-loc.armada::before { background: #14A396; } :root:not([data-theme="dark"]) .gm-loc.pelanggan::before { background: #F0B445; } :root:not([data-theme="dark"]) .gm-loc.rusak::before { background: #E5484D; } :root:not([data-theme="dark"]) .gm-loc span { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: #2A4152; } :root:not([data-theme="dark"]) .gm-loc b { font-size: 26px; letter-spacing: -.02em; color: #06192A; } :root:not([data-theme="dark"]) .gud-cards > * { animation: aqRise .6s cubic-bezier(.2, .8, .2, 1) backwards; } :root:not([data-theme="dark"]) .gud-cards > :nth-child(2) { animation-delay: .04s; } :root:not([data-theme="dark"]) .gud-cards > :nth-child(3) { animation-delay: .08s; } :root:not([data-theme="dark"]) .gud-cards > :nth-child(4) { animation-delay: .12s; } :root:not([data-theme="dark"]) .gud-cards > :nth-child(n+5) { animation-delay: .16s; } /* ── 17. Admin (Pengajuan, Pengaturan, Pengguna), konsep A ── The users / roles list on one white card with rounded hover rows and rounded avatars, filled status chips, pill tabs and segmented controls, white category rows, and the phone user cards as white tiles. */ :root:not([data-theme="dark"]) .um-table-wrap { border-radius: 24px; } :root:not([data-theme="dark"]) .um-table th { color: #3E5466; border-bottom-color: #E3EEF4; text-transform: none; letter-spacing: 0; font-size: 12px; } :root:not([data-theme="dark"]) .um-table td { border-bottom-color: #E3EEF4; } :root:not([data-theme="dark"]) .um-table tbody tr { transition: background .2s ease; } :root:not([data-theme="dark"]) .um-table tbody tr:hover { background: rgba(10, 92, 153, .05); } :root:not([data-theme="dark"]) .um-table .user-av { border-radius: 12px; } :root:not([data-theme="dark"]) .um-st { border-radius: 9px; padding: 3px 9px; } :root:not([data-theme="dark"]) .um-st.on { background: #D9F3EF; color: #0E6E66; } :root:not([data-theme="dark"]) .um-st.off { background: #EEF3F7; color: #3E5466; } :root:not([data-theme="dark"]) .fin-denseg { border-color: rgba(255, 255, 255, .9); background: rgba(225, 238, 246, .8); padding: 3px; border-radius: 12px; gap: 2px; } :root:not([data-theme="dark"]) .fin-denseg button { background: transparent; color: #233B4D; border-radius: 9px; transition: background .3s ease, color .3s ease, box-shadow .3s ease; } :root:not([data-theme="dark"]) .fin-denseg button.on { background: #fff; color: var(--aq-accent); box-shadow: 0 3px 10px rgba(10, 92, 153, .16); } :root:not([data-theme="dark"]) .cat-edit-input { border-color: #D2E3EE; border-radius: 14px; background: #fff; } :root:not([data-theme="dark"]) .cat-edit-input:focus { border-color: #2E9BE0; box-shadow: 0 0 0 4px rgba(46, 155, 224, .18); } :root:not([data-theme="dark"]) .cr-status { border-radius: 9px; } @media (max-width: 768px) { :root:not([data-theme="dark"]) .um-table tr { background: #fff; border-color: #E3EEF4; border-radius: 18px; box-shadow: 0 4px 14px rgba(12, 64, 104, .06); } } /* ── 18. Laporan & Biaya Tetap (Neraca, Laba Rugi, Jurnal, Buku Besar, Arus Kas; Langganan, Aset, Akrual), konsep A ── Statement sections as white cards with a quiet header, the result rows tinted, Laba Rugi's KPI strip as white tiles, the explanation banners as soft glass, the balance check as a filled chip, the chart of accounts in its own white panel with a blue selected account, and the Arus Kas sub-tabs as a pill track. */ :root:not([data-theme="dark"]) .fin-stmt-sec { border-radius: 22px; border-color: rgba(255, 255, 255, .95); box-shadow: var(--aq-edge), 0 8px 22px rgba(12, 64, 104, .07); } :root:not([data-theme="dark"]) .fin-stmt-h { color: #0A5C99; background: #F2F8FC; border-bottom-color: #E3EEF4; letter-spacing: .05em; } :root:not([data-theme="dark"]) .fin-stmt-sec .fin-trow.grand { background: #F7FAFD; } :root:not([data-theme="dark"]) .fin-stmt-sec .fin-trow.grand td { background: none; border-top-color: #D3E3EC; } :root:not([data-theme="dark"]) .fin-stmt-sec .fin-trow.fin-is-net { background: linear-gradient(135deg, #DCEFFB, #D9F3EF); } :root:not([data-theme="dark"]) .fin-stmt-sec .fin-trow.fin-is-net td { font-size: 14.5px; } :root:not([data-theme="dark"]) .fin-is-kpis .fin-kpi { background: #fff; border-color: rgba(255, 255, 255, .95); border-radius: 20px; padding: 14px 18px; box-shadow: var(--aq-edge), 0 8px 22px rgba(12, 64, 104, .08); } :root:not([data-theme="dark"]) .fin-is-kpis .fin-kpi > span { font-size: 12.5px; font-weight: 600; color: #2A4152; } :root:not([data-theme="dark"]) .fin-is-kpis .fin-kpi > b { font-size: 22px; letter-spacing: -.02em; } :root:not([data-theme="dark"]) .fin-intro { background: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .95); border-radius: 18px; box-shadow: var(--aq-edge); } :root:not([data-theme="dark"]) .fin-intro-ic { color: #0A5C99; } :root:not([data-theme="dark"]) .fin-intro-warn { background: #FFF4E2; border-color: #F6D2AE; } :root:not([data-theme="dark"]) .fin-bs-balance { border-radius: 14px; } :root:not([data-theme="dark"]) .fin-bs-balance.ok { background: #D9F3EF; color: #0E6E66; } :root:not([data-theme="dark"]) .fin-acct-code { color: #5E7482; } :root:not([data-theme="dark"]) .bb-picker { background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .95); border-radius: 22px; padding: 14px 10px 14px 14px; box-shadow: var(--aq-edge), 0 8px 22px rgba(12, 64, 104, .07); } :root:not([data-theme="dark"]) .bb-acct { border-radius: 10px; transition: background .2s ease, color .2s ease; } :root:not([data-theme="dark"]) .bb-acct:hover { background: rgba(10, 92, 153, .06); color: #06192A; } :root:not([data-theme="dark"]) .bb-acct.on { background: #DCEFFB; color: #0A5C99; border-left-color: #2E9BE0; } :root:not([data-theme="dark"]) .bb-acct.on b { color: #0A5C99; } :root:not([data-theme="dark"]) .bb-search { border-radius: 18px; } :root:not([data-theme="dark"]) .rep-tabs { background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .9); border-radius: 16px; box-shadow: var(--aq-edge); } :root:not([data-theme="dark"]) .rep-tab { border-radius: 12px; color: #233B4D; transition: background .3s ease, color .3s ease, box-shadow .3s ease; } :root:not([data-theme="dark"]) .rep-tab.on { background: #fff; color: var(--aq-accent); box-shadow: 0 4px 14px rgba(10, 92, 153, .18), inset 0 1px 0 #fff; } :root:not([data-theme="dark"]) .rep-kpi { border-radius: 20px; } :root:not([data-theme="dark"]) .fin-stmt-sec, :root:not([data-theme="dark"]) .fin-is-kpis > * { animation: aqRise .6s cubic-bezier(.2, .8, .2, 1) backwards; } :root:not([data-theme="dark"]) .fin-is-grid > :nth-child(2) { animation-delay: .06s; } :root:not([data-theme="dark"]) .fin-is-grid > :nth-child(3) { animation-delay: .12s; } @media (prefers-reduced-motion: reduce) { :root:not([data-theme="dark"]) body::before, :root:not([data-theme="dark"]) body::after, :root:not([data-theme="dark"]) .mlap-root::before, :root:not([data-theme="dark"]) .modal-card, :root:not([data-theme="dark"]) .screen-enter, :root:not([data-theme="dark"]) .cf-bar, :root:not([data-theme="dark"]) .dist-chart2-bar, :root:not([data-theme="dark"]) .aq-kpis > *, :root:not([data-theme="dark"]) .co-dash *, :root:not([data-theme="dark"]) .dist-dash *, :root:not([data-theme="dark"]) .fin-dash *, :root:not([data-theme="dark"]) .cl-summary > *, :root:not([data-theme="dark"]) .tx-tablewrap, :root:not([data-theme="dark"]) .cl-listcard, :root:not([data-theme="dark"]) .txn-summary, :root:not([data-theme="dark"]) .txn-tablecard, :root:not([data-theme="dark"]) .dlv-ring, :root:not([data-theme="dark"]) .dlv-prog-bar span, :root:not([data-theme="dark"]) .run-dot, :root:not([data-theme="dark"]) .mlap-root .mlap-rit-dot, :root:not([data-theme="dark"]) .mlap-root .mlap-bar > span, :root:not([data-theme="dark"]) .hrr-trend-bar, :root:not([data-theme="dark"]) .gud-level > span, :root:not([data-theme="dark"]) .gud-cards > *, :root:not([data-theme="dark"]) .fin-stmt-sec, :root:not([data-theme="dark"]) .fin-is-kpis > * { animation: none; } }