/* Tema panel client. Hanya dimuat oleh panel client (render hook HEAD_END). */
:root {
    --kp-bg: #f4f6fb; --kp-surface: #ffffff; --kp-surface-2: #eef1f8; --kp-border: #dfe3ee;
    --kp-text: #1b2033; --kp-muted: #68708a; --kp-accent: #0d6efd; --kp-active-bg: #dbe8ff; --kp-active-text: #0b5ed7;
    --kp-badge-bg: #dbe8ff; --kp-badge-text: #0b5ed7; --kp-input: #ffffff;
    --kp-amber-bg: #fff4d6; --kp-amber-border: #d9a500; --kp-amber-text: #8a6500;
    --kp-blue-bg: #e1ecff; --kp-blue-border: #5c95f5; --kp-blue-text: #0b4fb8;
}
.dark {
    --kp-bg: #0f1123; --kp-surface: #151931; --kp-surface-2: #1c2140; --kp-border: #272c4b;
    --kp-text: #e8eaf3; --kp-muted: #8e94ad; --kp-accent: #0d6efd; --kp-active-bg: #1b3263; --kp-active-text: #5a9dff;
    --kp-badge-bg: #1e3a8a; --kp-badge-text: #bcd4ff; --kp-input: #1a1e38;
    --kp-amber-bg: #3b2a20; --kp-amber-border: #d9a500; --kp-amber-text: #ffc107;
    --kp-blue-bg: #1b2f6e; --kp-blue-border: #2f6df0; --kp-blue-text: #8fb8ff;
}

.fi-body, .fi-layout, .fi-main-ctn { background: var(--kp-bg) !important; color: var(--kp-text); }

/* ---- Sidebar ---- */
.fi-sidebar, .fi-sidebar-header, .fi-sidebar-nav { background: var(--kp-surface) !important; }
.fi-sidebar { border-right: 1px solid var(--kp-border); box-shadow: none !important; }
.fi-sidebar-header-ctn, .fi-sidebar-header { display: none !important; }
.fi-sidebar-nav { padding: .7rem !important; gap: .25rem !important; }
.fi-sidebar-nav-groups { gap: .7rem !important; margin: 0 !important; }
.fi-sidebar-group { gap: .1rem !important; }
.fi-sidebar-group-items { gap: .1rem !important; }
.fi-sidebar-group-label { font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--kp-muted) !important; }
.fi-sidebar-group-btn { padding-block: .25rem !important; }
.fi-sidebar-group-collapse-btn { display: none !important; }
.fi-sidebar-item-btn { padding: .5rem .75rem !important; font-size: .9rem; border-radius: .6rem !important; border: 1px solid transparent; }
.fi-sidebar-item-label { color: var(--kp-text) !important; font-weight: 500 !important; }
.fi-sidebar-item-icon { color: var(--kp-muted) !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn { background: var(--kp-active-bg) !important; border-left: 3px solid var(--kp-accent); }
.fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--kp-active-text) !important; }
.fi-sidebar-item .fi-badge { background: var(--kp-badge-bg) !important; color: var(--kp-badge-text) !important; --tw-ring-shadow: none; box-shadow: none !important; border-radius: .35rem; min-width: 1.75rem; justify-content: center; }
.kp-menu-search { position: relative; margin-bottom: .75rem; }
.kp-menu-search input { width: 100%; height: 2.3rem; padding: 0 .75rem 0 2.2rem; font-size: .84rem; color: var(--kp-text); background: transparent; border: 1px solid var(--kp-border); border-radius: .6rem; outline: none; }
.kp-menu-search input:focus { border-color: var(--kp-accent); }
.kp-menu-search-icon { position: absolute; left: .7rem; top: .6rem; width: 1rem; height: 1rem; color: var(--kp-muted); }

/* ---- Brand ---- */
.kp-brand { display: inline-flex; align-items: center; gap: .6rem; }
.kp-brand-mark { width: 2.1rem; height: 2.1rem; flex: none; }
.kp-brand-name { font-size: 1.45rem; font-weight: 400; color: var(--kp-text); line-height: 1; white-space: nowrap; }

/* ---- Topbar ---- */
.fi-topbar-ctn, .fi-topbar { background: var(--kp-surface) !important; box-shadow: none !important; }
.fi-topbar { border-bottom: 1px solid var(--kp-border); min-height: 5.25rem; }
.fi-topbar { padding-inline: 0 1rem !important; gap: 0 !important; }
.fi-topbar-start { order: 0; width: 15rem; flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; margin: 0 1.25rem 0 0 !important; border-right: 1px solid var(--kp-border); }
.fi-topbar-collapse-sidebar-btn-ctn { display: none !important; }
.kp-greeting { flex: 1; min-width: 0; order: 1; }
.fi-topbar > .fi-topbar-open-sidebar-btn, .fi-topbar > .fi-topbar-close-sidebar-btn { order: 0; margin-inline: .5rem; }
.fi-topbar-end { order: 2; }
@media (max-width: 64rem) { .fi-topbar-start { width: auto; border: 0; margin-right: .75rem !important; } .fi-topbar-start .kp-brand-name { display: none; } }
.kp-greeting-title { font-size: 1.05rem; font-weight: 600; color: var(--kp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-greeting-sub { font-size: .78rem; color: var(--kp-muted); }
.fi-global-search-ctn, .fi-topbar-end { display: flex; align-items: center; gap: .9rem; }
.fi-global-search-field .fi-input-wrp, .fi-global-search-field { background: var(--kp-input) !important; border-radius: .6rem; min-width: 18rem; }
.kp-tool { display: inline-flex; color: var(--kp-text); padding: .3rem; border-radius: .45rem; }
.kp-tool:hover { background: var(--kp-surface-2); }
.kp-tool svg { width: 1.35rem; height: 1.35rem; }
.kp-admin-chip { padding: .5rem .85rem; font-size: .88rem; font-weight: 600; color: #5a9dff; border: 1px solid #2f6df0; border-radius: .55rem; white-space: nowrap; }
.fi-user-menu .fi-avatar { outline: 2px solid var(--kp-accent); outline-offset: 1px; background: #123a7a; }
.fi-theme-switcher { display: none; }

/* ---- Halaman ---- */
.fi-header-heading { font-size: 1.45rem !important; font-weight: 700 !important; letter-spacing: 0; }
.fi-header-subheading { color: var(--kp-text); font-size: .85rem; }
.fi-breadcrumbs-item-label { color: var(--kp-text) !important; font-size: .8rem; font-weight: 500; }
.fi-breadcrumbs-list > li:first-child a { font-size: 0; display: inline-block; width: 1rem; height: 1rem; background: var(--kp-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='7' height='7' x='0' y='1' rx='1'/%3E%3Crect width='7' height='7' x='9' y='1' rx='1'/%3E%3Crect width='7' height='6' x='0' y='10' rx='1'/%3E%3Crect width='7' height='6' x='9' y='10' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='7' height='7' x='0' y='1' rx='1'/%3E%3Crect width='7' height='7' x='9' y='1' rx='1'/%3E%3Crect width='7' height='6' x='0' y='10' rx='1'/%3E%3Crect width='7' height='6' x='9' y='10' rx='1'/%3E%3C/svg%3E") center/contain no-repeat; }
.fi-breadcrumbs-list > li:first-child a * { display: none; }

.fi-btn.fi-color-primary:not(.fi-outlined), .fi-color-primary.fi-btn { --bg: var(--kp-accent); background: var(--kp-accent) !important; color: #fff !important; }
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .kp-card { background: var(--kp-surface) !important; border: 1px solid var(--kp-border); border-radius: .8rem !important; box-shadow: none !important; --tw-ring-shadow: none; }
.fi-ta-header-ctn, .fi-ta-header-toolbar, .fi-ta-filters-above-content-ctn { border-color: var(--kp-border) !important; }
.fi-ta-table, .fi-ta-table thead, .fi-ta-table thead tr, .fi-ta-cell, .fi-ta-header-cell, .fi-ta-row, .fi-ta-footer { background: transparent !important; }
.fi-ta-header-cell-label { font-size: .92rem; font-weight: 600; color: var(--kp-text); }
.fi-ta-table thead tr, .fi-ta-row { border-color: var(--kp-border) !important; }
.fi-ta-table > tbody, .fi-ta-table > thead { --tw-divide-color: var(--kp-border); }
.fi-ta-row:hover { background: var(--kp-surface-2) !important; }
.fi-input-wrp { background: var(--kp-input) !important; border-color: var(--kp-border); }
.fi-pagination-items, .fi-pagination-item-btn { background: transparent !important; }

/* Status pill bertitik */
.fi-ta-text .fi-badge:not(.fi-color-info) { border-radius: 999px; padding: .25rem .7rem; box-shadow: none !important; font-weight: 600; background: #2a3050; color: #b3bbd8; }
.fi-ta-text .fi-badge:not(.fi-color-info)::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.fi-ta-text .fi-badge.fi-color-success { background: #123527 !important; color: #33d17a !important; }
.fi-ta-text .fi-badge.fi-color-danger { background: #40171f !important; color: #ff6b6b !important; }
.fi-ta-text .fi-badge.fi-color-warning { background: #3b2d14 !important; color: #fbbf24 !important; }
.fi-ta-text .fi-badge.fi-color-info { background: #1b2f6e !important; color: #8fb8ff !important; box-shadow: none !important; }

/* ---- Tabs jadi pil (Tasks) ---- */
.fi-tabs { background: transparent !important; box-shadow: none !important; padding: 0 !important; gap: .4rem; border: 0; margin-inline: 0 !important; justify-content: flex-start; max-width: none !important; }
.fi-tabs-item { border: 1px solid var(--kp-border); border-radius: .5rem; padding: .3rem .7rem !important; background: transparent !important; }
.fi-tabs-item.fi-active { border-color: var(--kp-accent); background: #15305f !important; }
.fi-tabs-item .fi-badge { background: transparent !important; box-shadow: none !important; color: var(--kp-text) !important; padding: 0 !important; }

/* ---- Komponen kp ---- */
.kp-banner { padding: .95rem 1rem; text-align: center; font-size: 1rem; font-weight: 500; border: 1px solid; border-radius: .6rem; }
.kp-banner-amber { background: var(--kp-amber-bg); border-color: var(--kp-amber-border); color: var(--kp-amber-text); }
.kp-banner-blue { background: var(--kp-blue-bg); border-color: var(--kp-blue-border); color: var(--kp-blue-text); }
.fi-ta-ctn:has(.kp-banner) { background: transparent !important; border: 0; }
.fi-ta-ctn:has(.kp-banner) .fi-ta-header-ctn { display: none; }

.kp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.kp-stat { display: flex; align-items: center; gap: .85rem; padding: 1.05rem 1rem; background: var(--kp-surface); border: 1px solid var(--kp-border); border-radius: .7rem; }
.kp-stat-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .6rem; }
.kp-stat-icon svg { width: 1.25rem; height: 1.25rem; }
.kp-stat-value { font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--kp-text); }
.kp-stat-label { font-size: .76rem; color: var(--kp-muted); }
.kp-tone-green { background: #123527; color: #33d17a; } .kp-tone-blue { background: #14264f; color: #2f7bff; }
.kp-tone-teal { background: #10323a; color: #22b8e6; } .kp-tone-orange { background: #3b2318; color: #f97316; }
.kp-tone-purple { background: #2a1d4d; color: #a855f7; } .kp-tone-red { background: #40171f; color: #ef4444; }
.kp-tone-slate { background: #2a3050; color: #b3bbd8; }
.kp-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; font-size: .75rem; font-weight: 600; border-radius: 999px; }
.kp-pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.kp-pill-green { background: #123527; color: #33d17a; }

.kp-dash { display: flex; flex-direction: column; gap: 1.5rem; }
.kp-dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.kp-dash-main, .kp-dash-side { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.kp-card { padding: 1.3rem; }
.kp-card h2 { margin: 0 0 1.1rem; font-size: 1rem; font-weight: 700; color: var(--kp-text); }
.kp-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.kp-card-head a { color: #2f8bff; font-size: .85rem; font-weight: 500; }
.kp-muted { color: var(--kp-muted); font-size: .76rem; }
.kp-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .25rem; }
.kp-dot-teal { background: #22b8e6; } .kp-dot-blue { background: #2f7bff; } .kp-dot-green { background: #22c55e; } .kp-dot-orange { background: #f97316; }
.kp-resource { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; }
.kp-resource-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: var(--kp-text); margin-bottom: .75rem; }
.kp-select { margin-left: auto; padding: .3rem 1.7rem .3rem .6rem; font-size: .76rem; color: var(--kp-text); background-color: var(--kp-input); border: 1px solid var(--kp-border); border-radius: .4rem; }
.kp-resource-list { display: flex; flex-direction: column; gap: 1.1rem; padding-left: 1.25rem; border-left: 1px solid var(--kp-border); }
.kp-resource-row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--kp-text); margin-bottom: .45rem; }
.kp-bar { display: block; flex: 1; height: .35rem; background: var(--kp-surface-2); border-radius: 999px; overflow: hidden; margin-bottom: .4rem; }
.kp-bar-fill { display: block; height: 100%; border-radius: 999px; }
.kp-bar-green { background: #22c55e; } .kp-bar-red { background: #ef4444; } .kp-bar-blue { background: var(--kp-accent); }
.kp-progress-active { animation: kp-pulse 1.4s ease-in-out infinite; }
@keyframes kp-pulse { 50% { opacity: .45; } }
.kp-progress { display: flex; align-items: center; gap: .55rem; min-width: 7rem; }
.kp-progress .kp-bar { margin: 0; }
.kp-progress-text { font-size: .8rem; color: var(--kp-text); }
.kp-chart { display: block; width: 100%; height: auto; }
.kp-chart-grid { stroke: var(--kp-border); stroke-dasharray: 3 4; }
.kp-chart-label { fill: var(--kp-text); font-size: 12px; }
.kp-chart-line { fill: none; stroke: #22b8e6; stroke-width: 2; }
.kp-quick { display: flex; justify-content: space-around; gap: .5rem; }
.kp-quick a { display: flex; flex-direction: column; align-items: center; gap: .55rem; font-size: .78rem; color: var(--kp-text); }
.kp-activity { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
.kp-activity-body { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .82rem; }
.kp-activity-body strong { color: var(--kp-text); font-weight: 600; }
.kp-activity-body .kp-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-empty { text-align: center; color: var(--kp-muted); font-size: .85rem; padding: .75rem 0; }

.kp-cell-vps { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; }
.kp-cell-title { font-weight: 600; font-size: .92rem; color: var(--kp-text); }
.kp-cell-sub { font-size: .76rem; color: var(--kp-muted); }
.kp-cell-stack { display: flex; flex-direction: column; gap: .35rem; padding: .5rem .75rem; font-size: .8rem; color: var(--kp-text); white-space: nowrap; }
.kp-cell-stack span { display: inline-flex; align-items: center; gap: .35rem; }
.kp-cell-icon { width: .9rem; height: .9rem; color: var(--kp-muted); }
.kp-os { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.2rem; height: 2.2rem; font-weight: 800; font-size: .95rem; color: #fff; border-radius: .55rem; }
.kp-os-ubuntu { background: #e95420; } .kp-os-debian { background: #c70036; } .kp-os-alma { background: #0f4266; }
.kp-os-rocky { background: #10b981; } .kp-os-centos { background: #932279; } .kp-os-windows { background: #0078d4; } .kp-os-other { background: #475569; }

.kp-footer { padding: 1.1rem; text-align: center; font-size: .8rem; color: var(--kp-text); border-top: 1px solid var(--kp-border); }

/* ---- Login ---- */
.fi-simple-layout .kp-footer { display: none; }
.fi-simple-layout .fi-fo-field-label-required-mark { display: none; }
.fi-simple-layout, .fi-simple-main-ctn { background: #0a0c1a !important; }
html:not(.dark) .fi-simple-layout, html:not(.dark) .fi-simple-main-ctn { background: var(--kp-bg) !important; }
.fi-simple-main { background: var(--kp-surface) !important; border: 1px solid var(--kp-border) !important; border-radius: 1.1rem !important; box-shadow: none !important; --tw-ring-shadow: none; }
.fi-simple-main:has(.kp-login) { background: transparent !important; padding: 0 !important; border: 0 !important; }
.kp-forgot { display: block; text-align: right; font-size: .85rem; font-weight: 500; color: #2f8bff; }
.kp-forgot:hover { text-decoration: underline; }
.kp-login { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--kp-border); border-radius: 1.1rem; background: var(--kp-surface); }
.kp-login-art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 2.5rem; background: #0a0c1a; }
html:not(.dark) .kp-login-art { background: #16204a; }
html:not(.dark) .kp-login-art .kp-brand-name { color: #fff; }
.kp-login-art > svg { width: 100%; max-width: 21rem; }
.kp-login-form { padding: 3.25rem 2.5rem; }
.kp-login-form h1 { margin: 0; text-align: center; font-size: 1.6rem; font-weight: 700; color: var(--kp-text); }
.kp-login-form > p { margin: .4rem 0 1.6rem; text-align: center; font-size: .92rem; color: var(--kp-muted); }
.kp-login-foot { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; font-size: .8rem; color: var(--kp-muted); }
.kp-login-foot::before, .kp-login-foot::after { content: ""; flex: 1; height: 1px; background: var(--kp-border); }

@media (max-width: 64rem) {
    .kp-dash-grid, .kp-resource { grid-template-columns: minmax(0, 1fr); }
    .kp-resource-list { padding-left: 0; border-left: 0; }
    .kp-greeting-sub, .fi-global-search-ctn { display: none; }
}
@media (max-width: 48rem) {
    .kp-login { grid-template-columns: minmax(0, 1fr); }
    .kp-login-art { display: none; }
    .kp-login-form { padding: 2rem 1.25rem; }
    .kp-admin-chip { display: none; }
}

/* ---- Filter tanggal Tasks sebaris, tanpa judul ---- */
.fi-ta-filters-above-content-ctn { padding: .9rem 1.1rem !important; }
.fi-ta-filters-above-content-ctn .fi-ta-filters-header, .fi-ta-filters-heading { display: none !important; }
.fi-ta-filters-above-content-ctn .fi-input-wrp { min-width: 9rem; }

/* Tabel kosong: cukup banner, tanpa baris judul kolom */
.fi-ta-ctn:has(.kp-banner) table { display: none; }

/* Warna ikon & pill di mode terang */
html:not(.dark) .kp-tone-green, html:not(.dark) .kp-pill-green { background: #dcf7e8; color: #15803d; }
html:not(.dark) .kp-tone-blue { background: #dbe8ff; color: #0b5ed7; }
html:not(.dark) .kp-tone-teal { background: #d7f3fb; color: #0e7490; }
html:not(.dark) .kp-tone-orange { background: #ffe8d9; color: #c2410c; }
html:not(.dark) .kp-tone-purple { background: #eee3ff; color: #7e22ce; }
html:not(.dark) .kp-tone-red { background: #fde2e2; color: #b91c1c; }
html:not(.dark) .kp-tone-slate { background: #e6e9f2; color: #475069; }
html:not(.dark) .fi-ta-text .fi-badge:not(.fi-color-info) { background: #e6e9f2 !important; color: #475069 !important; }
html:not(.dark) .fi-ta-text .fi-badge.fi-color-success { background: #dcf7e8 !important; color: #15803d !important; }
html:not(.dark) .fi-ta-text .fi-badge.fi-color-danger { background: #fde2e2 !important; color: #b91c1c !important; }
html:not(.dark) .fi-ta-text .fi-badge.fi-color-warning { background: #fff0cc !important; color: #92600a !important; }
html:not(.dark) .fi-ta-text .fi-badge.fi-color-info { background: #dbe8ff !important; color: #0b5ed7 !important; }
html:not(.dark) .fi-tabs-item.fi-active { background: #dbe8ff !important; }

.fi-fo-field :has(.kp-forgot) { width: 100%; }

/* Storage terpakai di List VPS */
.kp-cell-storage { white-space: normal; min-width: 10rem; gap: .25rem; }
.kp-storage-row { display: flex !important; justify-content: space-between; gap: .75rem; }
.kp-cell-storage .kp-bar { margin: 0; display: block; }