:root {
    font-size: clamp(14px, calc(13px + .2vw), 16px);
    color-scheme: light;
    --app-accent: #1d4ed8;
    --app-accent-text: #1d4ed8;
    --app-accent-soft: #eff6ff;
    --app-accent-border: #bfdbfe;
    --app-accent-deep: #1e3a8a;
    --app-surface: #fff;
    --app-canvas: #f4f7fb;
    --app-ink: #172033;
    --app-muted: #64748b;
    --app-line: #e2e8f0;
}

html[data-app-palette="lagoon"] {
    --app-accent: #347f8e;
    --app-accent-text: #347f8e;
    --app-accent-soft: #ecfeff;
    --app-accent-border: #a5f3fc;
    --app-accent-deep: #244d56;
}
html[data-app-palette="violet"] {
    --app-accent: #69538f;
    --app-accent-text: #69538f;
    --app-accent-soft: #f5f3ff;
    --app-accent-border: #ddd6fe;
    --app-accent-deep: #43325e;
}
html[data-app-palette="rose"] {
    --app-accent: #a24c63;
    --app-accent-text: #a24c63;
    --app-accent-soft: #fff1f2;
    --app-accent-border: #fecdd3;
    --app-accent-deep: #643042;
}
html[data-app-palette="amber"] {
    --app-accent: #8e672e;
    --app-accent-text: #92400e;
    --app-accent-soft: #fffbeb;
    --app-accent-border: #fde68a;
    --app-accent-deep: #5d431f;
}
html[data-app-palette="emerald"] {
    --app-accent: #3d7356;
    --app-accent-text: #3d7356;
    --app-accent-soft: #ecfdf5;
    --app-accent-border: #a7f3d0;
    --app-accent-deep: #294d39;
}
html[data-app-palette="blue"] {
    --app-accent: #4c6897;
    --app-accent-text: #4c6897;
    --app-accent-soft: #eff6ff;
    --app-accent-border: #bfdbfe;
    --app-accent-deep: #31476c;
}
html[data-app-palette="lagoon"]:not([data-app-theme="dark"]) { --app-canvas: #f0f6f7; --app-line: #dbe8e9; }
html[data-app-palette="violet"]:not([data-app-theme="dark"]) { --app-canvas: #f4f2f8; --app-line: #e3deed; }
html[data-app-palette="rose"]:not([data-app-theme="dark"]) { --app-canvas: #faf3f5; --app-line: #eddee2; }
html[data-app-palette="amber"]:not([data-app-theme="dark"]) { --app-canvas: #f8f5ee; --app-line: #e9e1d1; }
html[data-app-palette="emerald"]:not([data-app-theme="dark"]) { --app-canvas: #f1f6f3; --app-line: #dce8e0; }
html[data-app-palette="blue"]:not([data-app-theme="dark"]) { --app-canvas: #f2f6fb; --app-line: #dce5f0; }

html[data-app-theme="dark"] {
    color-scheme: dark;
    --app-surface: #1e293b;
    --app-canvas: #0f172a;
    --app-ink: #e2e8f0;
    --app-muted: #a9b8cc;
    --app-line: #334155;
}
html[data-app-theme="dark"][data-app-palette="lagoon"] {
    --app-accent: #0891b2; --app-accent-text: #67e8f9; --app-accent-soft: #164e63; --app-accent-border: #0e7490; --app-accent-deep: #0e7490;
}
html[data-app-theme="dark"][data-app-palette="violet"] {
    --app-accent: #7c3aed; --app-accent-text: #c4b5fd; --app-accent-soft: #312e81; --app-accent-border: #6d28d9; --app-accent-deep: #5b21b6;
}
html[data-app-theme="dark"][data-app-palette="rose"] {
    --app-accent: #e11d48; --app-accent-text: #fda4af; --app-accent-soft: #881337; --app-accent-border: #be123c; --app-accent-deep: #9f1239;
}
html[data-app-theme="dark"][data-app-palette="amber"] {
    --app-accent: #d97706; --app-accent-text: #fcd34d; --app-accent-soft: #78350f; --app-accent-border: #b45309; --app-accent-deep: #92400e;
}
html[data-app-theme="dark"][data-app-palette="emerald"] {
    --app-accent: #059669; --app-accent-text: #6ee7b7; --app-accent-soft: #064e3b; --app-accent-border: #047857; --app-accent-deep: #047857;
}
html[data-app-theme="dark"][data-app-palette="blue"] {
    --app-accent: #2563eb; --app-accent-text: #93c5fd; --app-accent-soft: #1e3a8a; --app-accent-border: #1d4ed8; --app-accent-deep: #1d4ed8;
}

html[data-app-palette] :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-cyan-500, .text-cyan-600, .text-cyan-700, .text-sky-500, .text-sky-600, .text-sky-700) {
    color: var(--app-accent-text) !important;
}
html[data-app-palette] :is(.bg-blue-50, .bg-blue-100, .bg-cyan-50, .bg-cyan-100, .bg-sky-50, .bg-sky-100) {
    background-color: var(--app-accent-soft) !important;
}
html[data-app-palette] :is(.bg-blue-500, .bg-blue-600, .bg-cyan-500, .bg-cyan-600, .bg-sky-500, .bg-sky-600) {
    background-color: var(--app-accent) !important;
}
html[data-app-palette] :is(.border-blue-100, .border-blue-200, .border-cyan-100, .border-cyan-200, .border-sky-100, .border-sky-200) {
    border-color: var(--app-accent-border) !important;
}
html[data-app-palette] :is([class~="hover:bg-blue-50"], [class~="hover:bg-cyan-50"], [class~="hover:bg-sky-50"]):hover {
    background-color: var(--app-accent-soft) !important;
}
html[data-app-palette] :is([class~="hover:text-blue-700"], [class~="hover:text-blue-600"], [class~="hover:text-cyan-700"]):hover {
    color: var(--app-accent-text) !important;
}

html {
    background: var(--app-canvas);
    color: var(--app-ink);
    overflow-x: clip;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body:has(.app-topbar) {
    background:
        radial-gradient(ellipse at 88% 5%, color-mix(in srgb, var(--app-accent-soft) 78%, transparent), transparent 38%),
        var(--app-canvas) !important;
    color: var(--app-ink);
    transition: background-color .25s ease, color .25s ease;
}

body:has(.app-topbar) > header .app-topbar {
    position: relative;
    border-bottom-color: var(--app-line);
    background: color-mix(in srgb, var(--app-surface) 94%, var(--app-accent-soft)) !important;
}
body:has(.app-topbar) > header .app-topbar::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--app-accent), transparent);
    content: "";
    opacity: .72;
    pointer-events: none;
}

body:has(.app-topbar) #menuSidebar {
    background: var(--app-surface) !important;
    border-color: var(--app-line) !important;
    box-shadow: 8px 0 28px rgb(15 23 42 / 5%);
}
body:has(.app-topbar) #menuSidebar .nav-link-active {
    box-shadow: inset 3px 0 var(--app-accent);
}
body:has(#loginForm) #loginForm button[type="submit"] {
    background: linear-gradient(110deg, var(--app-accent), var(--app-accent-deep));
}
body:has(#loginForm) #loginForm button[type="submit"]:hover {
    filter: brightness(.94);
}
body:has(#loginForm) main > div > div:first-child > div {
    background: linear-gradient(135deg, var(--app-accent), var(--app-accent-deep));
}

body:has(.app-topbar) main {
    min-width: 0;
    color: var(--app-ink);
}
body:has(.app-topbar) main h1 {
    letter-spacing: -.035em;
}
body:has(.app-topbar) main h2 {
    letter-spacing: -.02em;
}
body:has(.app-topbar) main :is(.bg-white, [class~="bg-white/90"], [class~="bg-white/80"])[class*="border"] {
    border-color: var(--app-line);
    box-shadow: 0 8px 24px rgb(15 23 42 / 4%);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body:has(.app-topbar) main :is(section, article)[class*="shadow-sm"][class~="bg-white"]:hover {
    box-shadow: 0 12px 28px rgb(15 23 42 / 7%);
}
body:has(.app-topbar) main :is(section, article)[class*="rounded"][class*="border"] {
    box-shadow: 0 8px 24px rgb(15 23 42 / 6%);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2, .75, .25, 1);
}
body:has(.app-topbar) main :is(section, article)[class*="rounded"][class*="border"]:hover {
    box-shadow: 0 16px 34px rgb(15 23 42 / 11%);
    transform: translateY(-3px);
}

body:has(.app-topbar) main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), select, textarea) {
    border-color: #cbd5e1;
    border-radius: 10px;
    background-color: var(--app-surface);
    color: var(--app-ink);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .2s ease;
}
body:has(.app-topbar) main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), select, textarea):focus {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 18%, transparent);
    outline: none;
}
body:has(.app-topbar) main input[type="checkbox"],
body:has(.app-topbar) main input[type="radio"] {
    accent-color: var(--app-accent);
}
body:has(.app-topbar) main input::placeholder,
body:has(.app-topbar) main textarea::placeholder {
    color: #94a3b8;
}
body:has(.app-topbar) main :is(button, a, input[type="submit"], input[type="button"]) {
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
body:has(.app-topbar) main button:not(:disabled):hover,
body:has(.app-topbar) main a[class*="rounded"]:hover {
    transform: translateY(-1px);
}
body:has(.app-topbar) main button:not(:disabled):active,
body:has(.app-topbar) main a[class*="rounded"]:active {
    transform: translateY(1px) scale(.98);
}

body:has(.app-topbar) main table.table-cards {
    font-size: clamp(12px, .8rem, 14px);
    color: var(--app-muted);
}

body:has(.app-topbar) main [role="tablist"] button[aria-selected="true"],
body:has(.app-topbar) main [role="tablist"] button.active {
    border-color: var(--app-accent);
    color: var(--app-accent-text);
}
body:has(.app-topbar) main details > summary {
    transition: color .16s ease, background-color .16s ease;
}
body:has(.app-topbar) main details[open] > summary {
    color: var(--app-accent-text);
}

body:has(#templatePreview) {
    background:
        radial-gradient(ellipse at 94% 0%, color-mix(in srgb, var(--app-accent-soft) 86%, transparent), transparent 34%),
        var(--app-canvas) !important;
    color: var(--app-ink);
}
body:has(#templatePreview) main > header {
    padding: 10px 4px 14px;
    border-bottom: 1px solid var(--app-line);
}
body:has(#templatePreview) main > header h1 {
    color: var(--app-ink);
    letter-spacing: -.035em;
}
body:has(#templatePreview) main > div.grid > section > div,
body:has(#templatePreview) main > form > section {
    border-color: var(--app-line);
    border-radius: 16px;
    background: var(--app-surface);
    box-shadow: 0 8px 24px rgb(15 23 42 / 5%);
}
body:has(#templatePreview) main iframe {
    border-color: var(--app-line);
    box-shadow: 0 8px 24px rgb(15 23 42 / 5%);
}
body:has(#templatePreview) main :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea) {
    border-color: #cbd5e1;
    border-radius: 9px;
    background: var(--app-surface);
    color: var(--app-ink);
}
body:has(#templatePreview) main :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea):focus {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 18%, transparent);
    outline: none;
}
html[data-app-theme="dark"] body:has(#templatePreview) main :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea) {
    border-color: #475569;
}

html[data-app-palette] body:has(.app-topbar) .app-brand-mark,
html[data-app-palette] body:has(.app-topbar) #menuBtn:hover,
html[data-app-palette] body:has(.app-topbar) #menuBtn:focus-visible,
html[data-app-palette] body:has(.app-topbar) #menuSidebar .nav-link-active .nav-link-icon,
html[data-app-palette] body:has(.app-topbar) #menuSidebar .nav-section-active .nav-section-icon {
    color: var(--app-accent-text);
}
html[data-app-palette] body:has(.app-topbar) #menuSidebar .nav-link-active {
    background-color: var(--app-accent-soft) !important;
    color: var(--app-accent-text) !important;
}
html[data-app-palette] body:has(.app-topbar) #menuSidebar .nav-section-active > .dropdown > .dropToggle,
html[data-app-palette] body:has(.app-topbar) #menuSidebar .nav-section-active > .dropToggle {
    color: var(--app-accent-text) !important;
}
html[data-app-palette] body:has(.app-topbar) main :is(.border-blue-100, .border-blue-200, .border-cyan-100, .border-cyan-200, .border-sky-100, .border-sky-200) {
    border-color: var(--app-accent-border) !important;
}
html[data-app-palette] body:has(.app-topbar) main :is([class~="hover:bg-blue-50"], [class~="hover:bg-cyan-50"], [class~="hover:bg-sky-50"]):hover {
    background-color: var(--app-accent-soft) !important;
}
html[data-app-palette] body:has(.app-topbar) main :is([class~="hover:text-blue-700"], [class~="hover:text-blue-600"], [class~="hover:text-cyan-700"]):hover {
    color: var(--app-accent-text) !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) {
    background:
        radial-gradient(ellipse at 88% 5%, color-mix(in srgb, var(--app-accent-soft) 38%, transparent), transparent 38%),
        var(--app-canvas) !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), select, textarea) {
    border-color: #475569;
}
body:has(.app-topbar) main {
    font-size: 1rem;
}
body:has(.app-topbar) main :is([class~="text-[9px]"], [class~="text-[10px]"]) {
    font-size: clamp(11px, .7rem, 12px) !important;
}
body:has(.app-topbar) main :is([class~="text-[11px]"]) {
    font-size: clamp(11px, .73rem, 12px) !important;
}
body:has(.app-topbar) main .text-xs {
    font-size: clamp(12px, .76rem, 13px) !important;
}
body:has(#loginForm) .text-xs {
    font-size: clamp(11px, .78rem, 12px) !important;
}
body:has(.app-topbar) main :is(.text-slate-400, .text-gray-400, .text-zinc-400, .text-neutral-400) {
    color: #526176 !important;
}
body:has(.app-topbar) main table.table-cards {
    font-size: clamp(12px, .76rem, 13px);
}
body:has(.app-topbar) main table.table-cards :is(th, td) {
    line-height: 1.45;
}
body:has(.app-topbar) main table.table-cards th {
    color: #475569;
}
body:has(.app-topbar) main table.table-cards thead:is([class*="bg-sky-"], [class*="bg-blue-"], [class*="bg-cyan-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-teal-"]):not([class*="bg-sky-50"], [class*="bg-sky-100"], [class*="bg-blue-50"], [class*="bg-blue-100"], [class*="bg-emerald-50"], [class*="bg-emerald-100"], [class*="bg-green-50"], [class*="bg-green-100"]) th,
html[data-app-theme="dark"] body:has(.app-topbar) main table.table-cards thead:is([class*="bg-sky-"], [class*="bg-blue-"], [class*="bg-cyan-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-teal-"]):not([class*="bg-sky-50"], [class*="bg-sky-100"], [class*="bg-blue-50"], [class*="bg-blue-100"], [class*="bg-emerald-50"], [class*="bg-emerald-100"], [class*="bg-green-50"], [class*="bg-green-100"]) th {
    color: #fff;
}
body:has(.app-topbar) main input::placeholder,
body:has(.app-topbar) main textarea::placeholder {
    color: #64748b;
    opacity: 1;
}
body:has(.app-topbar) main :is(button, a[class*="rounded"], [role="button"]) {
    -webkit-tap-highlight-color: transparent;
}
body:has(.app-topbar) main > * {
    animation: app-content-enter .48s cubic-bezier(.2, .75, .25, 1) both;
}
body:has(.app-topbar) main > :nth-child(2) {
    animation-delay: 50ms;
}
body:has(.app-topbar) main > :nth-child(3) {
    animation-delay: 100ms;
}
body:has(.app-topbar) main > :nth-child(4) {
    animation-delay: 150ms;
}
body:has(.app-topbar) main > :nth-child(n + 5) {
    animation-delay: 180ms;
}
body:has(.app-topbar) #menuSidebar .nav-link,
body:has(.app-topbar) #menuSidebar .dropToggle {
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
body:has(.app-topbar) #menuSidebar .nav-link:hover,
body:has(.app-topbar) #menuSidebar .dropToggle:hover {
    transform: translateX(2px);
}
body:has(.app-topbar) main :is(section, article)[class~="bg-white"][class*="shadow"]:hover {
    transform: translateY(-2px);
}
html[data-app-theme="dark"] body:has(.app-topbar) main :is(.text-slate-400, .text-gray-400, .text-zinc-400, .text-neutral-400) {
    color: #b8c6d9 !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) main table.table-cards th {
    color: #d6e0ed;
}
html[data-app-theme="dark"] body:has(.app-topbar) main :is(.bg-white, .bg-white\/80, .bg-white\/90) {
    background-color: var(--app-surface) !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) main :is(section, article, div)[class*="bg-gradient-to-"]:not([class~="from-slate-900"]) {
    background-color: var(--app-surface) !important;
    background-image: none !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) main :is(.text-slate-300, .text-gray-300, .text-zinc-300, .text-neutral-300) {
    color: #d4deeb !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) main :is(.text-slate-400, .text-gray-400, .text-zinc-400, .text-neutral-400, .text-slate-500, .text-gray-500, .text-zinc-500, .text-neutral-500) {
    color: #b8c6d9 !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) main :is(.border-sky-100, .border-blue-100, .border-indigo-100, .border-violet-100, .border-purple-100, .border-cyan-100, .border-teal-100, .border-emerald-100, .border-green-100, .border-lime-100, .border-amber-100, .border-yellow-100, .border-orange-100, .border-red-100, .border-rose-100, .border-pink-100, .border-fuchsia-100) {
    border-color: #475569 !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) main :is(article, section)[class*="rounded"][class*="border"] {
    box-shadow: 0 10px 28px rgb(0 0 0 / 22%);
}
html[data-app-theme="dark"] body:has(.app-topbar) main :is(article, section)[class*="rounded"][class*="border"]:hover {
    box-shadow: 0 18px 38px rgb(0 0 0 / 32%);
}
body:has(.app-topbar) #menuSidebar .nav-link:hover .nav-link-icon,
body:has(.app-topbar) #menuSidebar .nav-section-active .nav-section-icon,
body:has(.app-topbar) main :is(article, section)[class~="group"]:hover i {
    animation: app-icon-bounce .48s cubic-bezier(.34, 1.56, .64, 1);
}
html[data-app-theme="dark"] body:has(.app-topbar) #menuBtn {
    color: #e2e8f0 !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) #menuBtn span {
    background-color: #e2e8f0 !important;
}

html[data-app-theme] body:has(.app-topbar) {
    transition: background-color 380ms cubic-bezier(.2, .75, .25, 1), color 380ms cubic-bezier(.2, .75, .25, 1);
}
html[data-app-theme] body:has(.app-topbar) :is(
    .app-topbar, .app-brand, #menuSidebar, main, .app-theme-toggle
) {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 380ms;
    transition-timing-function: cubic-bezier(.2, .75, .25, 1);
}

.app-theme-transition-overlay {
    position: fixed;
    z-index: 10000;
    inset: 0;
    pointer-events: none;
    animation: app-theme-wash .46s ease-out both;
}

@keyframes app-content-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes app-icon-bounce {
    0%, 100% { transform: translateY(0); }
    36% { transform: translateY(-4px); }
    68% { transform: translateY(1px); }
}
@keyframes app-theme-wash {
    from { opacity: .68; }
    to { opacity: 0; }
}

@media (max-width: 767px) {
    body:has(.app-topbar) main {
        padding-right: 14px;
        padding-left: 14px;
    }
    body:has(.app-topbar) main :is(h1, .app-page-title) {
        font-size: clamp(1.15rem, 5vw, 1.45rem);
        line-height: 1.25;
    }
    body:has(.app-topbar) main table.table-cards {
        min-width: 640px;
    }
}

@media (max-width: 420px) {
    body:has(.app-topbar) main {
        padding-right: 10px;
        padding-left: 10px;
    }
    body:has(.app-topbar) main table.table-cards {
        min-width: 600px;
    }
}

/* Tabel: tampilan seragam di semua halaman */
body:has(.app-topbar) :has(> table.table-cards):not(:has(> #rekapTable)) {
    overflow-x: auto;
    border: 1px solid var(--app-line, #e3e9f1);
    border-radius: 16px;
    background: var(--app-surface, #fff);
    box-shadow: 0 6px 20px rgb(15 23 42 / 5%);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
body:has(.app-topbar) table.table-cards:not(#rekapTable) {
    border-collapse: collapse;
}
body:has(.app-topbar) table.table-cards:not(#rekapTable) thead th {
    padding-block: .85rem;
    background: inherit;
    font-weight: 700;
    letter-spacing: .045em;
    vertical-align: middle;
    white-space: nowrap;
}
body:has(.app-topbar) table.table-cards:not(#rekapTable) thead th:first-child { border-top-left-radius: 14px; }
body:has(.app-topbar) table.table-cards:not(#rekapTable) thead th:last-child { border-top-right-radius: 14px; }
body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody td {
    padding-block: .8rem;
    border-bottom: 1px solid var(--app-line, #edf1f6);
    vertical-align: middle;
    transition: background-color .2s ease;
}
body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:last-child td { border-bottom: 0; }
body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:nth-child(even) td {
    background-color: color-mix(in srgb, var(--app-accent-soft, #eaf2ff) 34%, transparent);
}
body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:hover td {
    background-color: color-mix(in srgb, var(--app-accent-soft, #eaf2ff) 85%, transparent);
}
body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr {
    animation: app-row-enter .4s ease backwards;
}
body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:nth-child(2) { animation-delay: 30ms; }
body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:nth-child(3) { animation-delay: 60ms; }
body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:nth-child(4) { animation-delay: 90ms; }
body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:nth-child(n + 5) { animation-delay: 120ms; }
@keyframes app-row-enter {
    from { opacity: 0; transform: translateY(6px); }
}
html[data-app-theme="dark"] body:has(.app-topbar) :has(> table.table-cards):not(:has(> #rekapTable)) {
    border-color: #334155;
    box-shadow: 0 6px 20px rgb(0 0 0 / 25%);
}
html[data-app-theme="dark"] body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody td {
    border-bottom-color: #2b394d;
}

/* Gaya tabel bersih: header putih huruf kapital abu-abu, baris selang-seling */
html body:has(.app-topbar) table.table-cards:not(#rekapTable) thead,
html body:has(.app-topbar) table.table-cards:not(#rekapTable) thead tr {
    background: var(--app-surface, #fff) !important;
}
html body:has(.app-topbar) table.table-cards:not(#rekapTable) thead th {
    background: var(--app-surface, #fff) !important;
    color: #64748b !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--app-line, #e8edf4) !important;
    padding: 1rem 1.1rem;
}
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody td {
    padding: .95rem 1.1rem;
    border-bottom: 0;
    color: #475569;
}
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:nth-child(odd) td {
    background-color: transparent;
}
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:nth-child(even) td {
    background-color: #f8fafc;
}
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:hover td {
    background-color: #eef3fa;
}
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody td:first-child,
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody td.font-medium,
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody td.font-semibold {
    color: #1e293b;
}
html body:has(.app-topbar) :has(> table.table-cards):not(:has(> #rekapTable)) {
    border-radius: 18px;
    border-color: #eef1f6;
    box-shadow: 0 10px 30px rgb(15 23 42 / 7%);
}
html[data-app-theme="dark"] body:has(.app-topbar) table.table-cards:not(#rekapTable) :is(thead, thead tr, thead th) {
    background: var(--app-surface) !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:nth-child(even) td { background-color: rgb(255 255 255 / 3%); }
html[data-app-theme="dark"] body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:hover td { background-color: rgb(255 255 255 / 7%); }
html[data-app-theme="dark"] body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody td { color: #cbd5e1; }

/* Header tabel: warna tema, teks putih agar kontras */
html body:has(.app-topbar) table.table-cards:not(#rekapTable) thead,
html body:has(.app-topbar) table.table-cards:not(#rekapTable) thead tr {
    background: var(--app-accent) !important;
}
html body:has(.app-topbar) table.table-cards:not(#rekapTable) thead th {
    background: var(--app-accent) !important;
    color: #fff !important;
    border-bottom: 0 !important;
    border-color: transparent !important;
}
html body:has(.app-topbar) table.table-cards:not(#rekapTable) thead th i { color: rgb(255 255 255 / 70%) !important; }
html body:has(.app-topbar) table.table-cards:not(#rekapTable) thead th:hover { background: var(--app-accent-deep) !important; }
html body:has(.app-topbar) table.table-cards:not(#rekapTable) :is(th, td) { min-width: 7.5rem; }
html body:has(.app-topbar) table.table-cards:not(#rekapTable) :is(th, td):is(:first-child, :last-child) { min-width: 0; }
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr,
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:hover {
    filter: none;
    translate: none;
    transform: none;
}
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr > td {
    border-width: 0 !important;
    border-radius: 0 !important;
    background-color: transparent;
    color: #475569;
}
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:nth-child(even) > td { background-color: #f1f5f9; }
html body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:hover > td { background-color: var(--app-accent-soft); }
html[data-app-theme="dark"] body:has(.app-topbar) table.table-cards:not(#rekapTable) :is(thead, thead tr, thead th) {
    background: var(--app-accent-deep) !important;
    color: #fff !important;
}
html[data-app-theme="dark"] body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr > td { color: #cbd5e1; background-color: transparent; }
html[data-app-theme="dark"] body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:nth-child(even) > td { background-color: rgb(255 255 255 / 4%); }
html[data-app-theme="dark"] body:has(.app-topbar) table.table-cards:not(#rekapTable) tbody tr:hover > td { background-color: rgb(255 255 255 / 9%); }

/* Responsif: topbar bertumpuk di layar kecil */
body:has(.app-topbar) { overflow-x: hidden; }
body:has(.app-topbar) main img { max-width: 100%; }
@media (max-width: 767px) {
    body:has(.app-topbar) .app-topbar { flex-wrap: wrap; }
    body:has(.app-topbar) .app-topbar .app-brand {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-height: 58px;
        padding: 8px 14px !important;
    }
    body:has(.app-topbar) .app-topbar .app-topbar-meta {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-height: 42px;
        padding: 6px 14px !important;
        border-top: 1px solid var(--app-line, #e6eaf0);
        background: var(--app-canvas, #f4f7fb);
    }
    body:has(.app-topbar) #menuSidebar {
        height: calc(100vh - 100px) !important;
        overflow-y: auto;
        box-shadow: 8px 0 24px rgb(15 23 42 / 18%);
    }
    body:has(.app-topbar) #menuSidebar:not(.sidebar-open) { box-shadow: none; }
    body:has(.app-topbar) main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        font-size: 16px;
        max-width: 100%;
    }
    body:has(.app-topbar) main :is(button, a[class*="rounded"]) { min-height: 38px; }
    body:has(.app-topbar) :has(> table.table-cards):not(:has(> #rekapTable)) { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}