/* VERTEX YY: tema gelap kayu dan espresso (dibuat oleh contoh/logo/buat-tema-css.py). Hanya berlaku di mode gelap (html.dark); mode terang tidak diubah,
   kecuali warna teks wordmark agar tetap terbaca di latar putih. Font Sora dimuat dari berkas lokal (/fonts/sora), bukan CDN. */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sora/sora-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sora/sora-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Wordmark "VERTEX YY" (teks HTML). Terang: cokelat tua dan amber tua (kontras di latar putih); gelap: krem dan amber sesuai desain. */
.vy-wm { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: 0.18em; white-space: nowrap; line-height: 1; }
.vy-wm .vy-v { color: #3a2a1d; }
.vy-wm .vy-y { color: #9c5a0b; }
html.dark .vy-wm .vy-v { color: #f4e9da; }
html.dark .vy-wm .vy-y { color: #f2a33a; }

/* ---------- mode gelap ---------- */
html.dark {
    color-scheme: dark;
    --vy-serat: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22180%22 viewBox=%220 0 260 180%22%3E%3Cg fill=%22none%22 stroke=%22%23F4E9DA%22 stroke-opacity=%220.03%22 stroke-width=%221.1%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M0,6 C60,0 110,11 170,5 S230,12 260,6%22/%3E%3Cpath d=%22M0,22 C60,19 110,28 170,26 S230,25 260,22%22/%3E%3Cpath d=%22M0,40 C60,36 110,46 170,38 S230,44 260,40%22/%3E%3Cpath d=%22M0,56 C60,55 110,53 170,54 S230,57 260,56%22/%3E%3Cpath d=%22M0,74 C60,68 110,75 170,76 S230,80 260,74%22/%3E%3Cpath d=%22M0,90 C60,86 110,88 170,86 S230,94 260,90%22/%3E%3Cpath d=%22M0,102 C60,99 110,104 170,105 S230,105 260,102%22/%3E%3Cpath d=%22M0,121 C60,118 110,127 170,118 S230,124 260,121%22/%3E%3Cpath d=%22M0,138 C60,138 110,137 170,132 S230,138 260,138%22/%3E%3Cpath d=%22M0,151 C60,154 110,149 170,157 S230,148 260,151%22/%3E%3Cpath d=%22M0,170 C60,173 110,178 170,169 S230,167 260,170%22/%3E%3C/g%3E%3C/svg%3E");
    --gray-50: 250, 244, 236; --gray-100: 244, 233, 218; --gray-200: 232, 220, 203; --gray-300: 211, 196, 176; --gray-400: 179, 160, 138;
    --gray-500: 154, 134, 114; --gray-600: 112, 92, 74; --gray-700: 78, 60, 45; --gray-800: 58, 42, 29; --gray-900: 36, 26, 19; --gray-950: 18, 12, 9;
}
html.dark body.fi-body { background-color: #1b1410; background-image: var(--vy-serat); background-size: 260px 180px; }

/* kartu dan tabel */
html.dark .fi-section, html.dark .fi-ta-ctn, html.dark .fi-wi-stats-overview-stat, html.dark .fi-modal-window { background-color: #241a13; --tw-ring-color: #3a2a1d; }
html.dark .fi-ta-header-cell, html.dark .fi-ta-group-header { background-color: rgba(244, 233, 218, 0.04); }
html.dark .fi-ta-row, html.dark .fi-ta-header, html.dark .fi-section-content, html.dark .fi-section-header { border-color: #3a2a1d !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #b3a08a; opacity: 1; }   /* kontras >= 4.5:1 di atas isian gelap */
/* Teks inline berwarna di halaman buatan sendiri (merah/biru/cokelat tua dirancang untuk latar terang): dinaikkan terangnya di mode gelap agar kontras >= 4.5:1 */
html.dark [style*="--danger-600" i]:not(.fi-btn[class*="bg-custom-"]), html.dark [style*="#dc2626" i] { color: #f87171 !important; }   /* tombol bahaya terisi tetap berteks terang di atas latar merah */
html.dark [style*="#2563eb" i] { color: #7fb0f9 !important; }
html.dark [style*="#b45309" i] { color: #f2a33a !important; }
html.dark .fi-wi-stats-overview-stat-value { color: #f2a33a; }
html.dark .fi-badge.fi-color-success { color: #9fd0a4; background-color: rgba(159, 208, 164, 0.12); --tw-ring-color: rgba(159, 208, 164, 0.3); }

/* bilah atas */
html.dark .fi-topbar > nav { background-color: #17110d; --tw-ring-color: #3a2a1d; }

/* tombol utama terisi: gradasi kayu, teks gelap (kontras tinggi) */
html.dark .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):not(label)[class*="bg-custom-"] { background-image: linear-gradient(135deg, #d79b5e, #b97b45); background-color: #b97b45; color: #241408; }
html.dark .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):not(label)[class*="bg-custom-"]:hover { filter: brightness(1.07); }
html.dark .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):not(label)[class*="bg-custom-"] .fi-btn-label, html.dark .fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):not(label)[class*="bg-custom-"] svg { color: #241408; }

/* halaman masuk */
html.dark .fi-simple-layout { position: relative; background: radial-gradient(ellipse at 50% 38%, #3a271a 0%, #1c1410 55%, #120c09 100%); }
html.dark .fi-simple-layout::before { content: ""; position: absolute; inset: 0; background-image: var(--vy-serat); background-size: 260px 180px; pointer-events: none; }
html.dark .fi-simple-main-ctn { position: relative; z-index: 1; }
html.dark .fi-simple-main { background-color: #241a13; border: 1px solid #3f2e21; border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); --tw-ring-shadow: 0 0 #0000; }

/* logo kecil bawaan di kepala halaman masuk disembunyikan di semua mode (logo besar dan wordmark sudah ada di bawah judul) */
html .fi-simple-header .fi-logo { display: none; }
@media (max-width: 639px) {
    html.dark .fi-simple-main { width: calc(100% - 1.5rem); margin-left: auto; margin-right: auto; padding: 2rem 1.25rem; }
}

/* menu samping: papan kayu gelap pekat */
html.dark .fi-sidebar { background-color: #0e0906; background-image: linear-gradient(rgba(5, 3, 2, 0.62), rgba(5, 3, 2, 0.62)), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22230%22 height=%22320%22 viewBox=%220 0 230 320%22%3E%3Crect width=%22230%22 height=%22320%22 fill=%22%230E0906%22/%3E%3Crect x=%220%22 y=%220%22 width=%2246%22 height=%22320%22 fill=%22%23C9A173%22 fill-opacity=%220.012%22/%3E%3Cpath d=%22M30,0 C25,96.0 34,198.4 30,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M19,0 C24,96.0 22,198.4 19,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M39,0 C34,96.0 34,198.4 39,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M25,0 C30,96.0 20,198.4 25,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M13,0 C16,96.0 12,198.4 13,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M26,0 C22,96.0 27,198.4 26,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M35,0 C36,89.60000000000001 33,224.0 35,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M35,0 C38,89.60000000000001 32,224.0 35,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M34,0 C38,89.60000000000001 31,224.0 34,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M32,0 C31,89.60000000000001 33,224.0 32,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Crect x=%2246%22 y=%220%22 width=%2246%22 height=%22320%22 fill=%22%23C9A173%22 fill-opacity=%220.009%22/%3E%3Cpath d=%22M79,0 C78,96.0 76,198.4 79,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M73,0 C69,96.0 77,198.4 73,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M80,0 C81,96.0 77,198.4 80,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M70,0 C70,96.0 68,198.4 70,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M66,0 C70,96.0 71,198.4 66,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M55,0 C54,96.0 51,198.4 55,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M86,0 C84,89.60000000000001 87,224.0 86,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M84,0 C82,89.60000000000001 88,224.0 84,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M63,0 C60,89.60000000000001 65,224.0 63,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M57,0 C58,89.60000000000001 55,224.0 57,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Crect x=%2292%22 y=%220%22 width=%2246%22 height=%22320%22 fill=%22%23C9A173%22 fill-opacity=%220.009%22/%3E%3Cpath d=%22M97,0 C102,96.0 94,198.4 97,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M122,0 C126,96.0 127,198.4 122,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M130,0 C135,96.0 125,198.4 130,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M112,0 C112,96.0 108,198.4 112,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M122,0 C124,96.0 127,198.4 122,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M105,0 C106,96.0 108,198.4 105,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M127,0 C129,89.60000000000001 125,224.0 127,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M121,0 C121,89.60000000000001 123,224.0 121,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M105,0 C107,89.60000000000001 101,224.0 105,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M103,0 C99,89.60000000000001 102,224.0 103,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Crect x=%22138%22 y=%220%22 width=%2246%22 height=%22320%22 fill=%22%23C9A173%22 fill-opacity=%220.012%22/%3E%3Cpath d=%22M167,0 C167,96.0 166,198.4 167,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M175,0 C175,96.0 170,198.4 175,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M158,0 C157,96.0 159,198.4 158,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M162,0 C161,96.0 165,198.4 162,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M158,0 C153,96.0 162,198.4 158,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M168,0 C167,96.0 163,198.4 168,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M176,0 C179,89.60000000000001 172,224.0 176,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M164,0 C164,89.60000000000001 166,224.0 164,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M178,0 C174,89.60000000000001 175,224.0 178,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M152,0 C151,89.60000000000001 148,224.0 152,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Crect x=%22184%22 y=%220%22 width=%2246%22 height=%22320%22 fill=%22%23C9A173%22 fill-opacity=%220.006%22/%3E%3Cpath d=%22M207,0 C204,96.0 212,198.4 207,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M190,0 C195,96.0 193,198.4 190,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M214,0 C210,96.0 218,198.4 214,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M223,0 C219,96.0 227,198.4 223,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M189,0 C190,96.0 194,198.4 189,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M202,0 C197,96.0 202,198.4 202,320%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.35%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M198,0 C201,89.60000000000001 198,224.0 198,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M213,0 C211,89.60000000000001 213,224.0 213,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M196,0 C194,89.60000000000001 197,224.0 196,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M203,0 C203,89.60000000000001 203,224.0 203,320%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.09%22 stroke-width=%220.9%22/%3E%3Cellipse cx=%2269%22 cy=%2296%22 rx=%227.2%22 ry=%2213.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.5%22 stroke-width=%221%22/%3E%3Cellipse cx=%2269%22 cy=%2296%22 rx=%224.800000000000001%22 ry=%229.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.42%22 stroke-width=%221%22/%3E%3Cellipse cx=%2269%22 cy=%2296%22 rx=%222.5600000000000005%22 ry=%224.800000000000001%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.5%22 stroke-width=%221%22/%3E%3Cellipse cx=%2269%22 cy=%2296%22 rx=%229.7%22 ry=%2216.5%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.07%22 stroke-width=%221%22/%3E%3Cellipse cx=%22158%22 cy=%22232%22 rx=%227.2%22 ry=%2213.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.5%22 stroke-width=%221%22/%3E%3Cellipse cx=%22158%22 cy=%22232%22 rx=%224.800000000000001%22 ry=%229.0%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.42%22 stroke-width=%221%22/%3E%3Cellipse cx=%22158%22 cy=%22232%22 rx=%222.5600000000000005%22 ry=%224.800000000000001%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%220.5%22 stroke-width=%221%22/%3E%3Cellipse cx=%22158%22 cy=%22232%22 rx=%229.7%22 ry=%2216.5%22 fill=%22none%22 stroke=%22%23C9A173%22 stroke-opacity=%220.07%22 stroke-width=%221%22/%3E%3Cline x1=%220%22 y1=%220%22 x2=%220%22 y2=%22320%22 stroke=%22%23050302%22 stroke-width=%221.3%22/%3E%3Cline x1=%2246%22 y1=%220%22 x2=%2246%22 y2=%22320%22 stroke=%22%23050302%22 stroke-width=%221.3%22/%3E%3Cline x1=%2292%22 y1=%220%22 x2=%2292%22 y2=%22320%22 stroke=%22%23050302%22 stroke-width=%221.3%22/%3E%3Cline x1=%22138%22 y1=%220%22 x2=%22138%22 y2=%22320%22 stroke=%22%23050302%22 stroke-width=%221.3%22/%3E%3Cline x1=%22184%22 y1=%220%22 x2=%22184%22 y2=%22320%22 stroke=%22%23050302%22 stroke-width=%221.3%22/%3E%3Cline x1=%22230%22 y1=%220%22 x2=%22230%22 y2=%22320%22 stroke=%22%23050302%22 stroke-width=%221.3%22/%3E%3C/svg%3E"); background-size: auto, 230px 320px;
    --tw-ring-color: #050302; box-shadow: inset -1px 0 0 #050302; }
html.dark .fi-sidebar-header { background-color: transparent; background-image: none; box-shadow: none; border-bottom: 1px solid rgba(201, 161, 115, 0.12); --tw-ring-shadow: 0 0 #0000; }
html.dark .fi-sidebar-nav, html.dark .fi-sidebar-group-items { background-color: transparent; }
html.dark .fi-sidebar-item-button { color: #b3a08a; border-radius: 0.5rem; }
html.dark .fi-sidebar-item-label { color: #b3a08a; }
html.dark .fi-sidebar-item-icon { color: #a8957f; }
html.dark .fi-sidebar-item-button:hover { background-color: rgba(0, 0, 0, 0.35); }
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button { background-color: rgba(0, 0, 0, 0.55); box-shadow: inset 3px 0 0 #b97b45; }
html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #efe3d2; }
html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: #d79b5e; }
html.dark .fi-sidebar-group-label { color: #a8957f; }
html.dark .fi-sidebar-group-button svg, html.dark .fi-sidebar-group-collapse-button { color: #a8957f; }