/* NIE overrides on top of kf-ds.css (Kaber KFSP design system). Colours from DS tokens (--vz-*). */

/* Shell */
.kf-content > .card,
.kf-content > .row { margin-bottom: 0; }
.kf-sidebar .kf-sidebar__brand { min-height: 72px; padding: 1rem 1rem .85rem; }
.kf-sidebar .kf-sidebar__brand-logo { height: 48px; width: auto; max-width: 200px; object-fit: contain; }
.min-w-0 { min-width: 0; }

/* NIE: iframe Power BI di dalam card */
.kf-content iframe { max-width: 100%; }

/* NIE: kompatibilitas container-fluid Velzon lama */
.kf-content > .container-fluid { padding-left: 0; padding-right: 0; }

/* Login */
.kf-login .bc-login__logo-img { display: block; height: 64px; width: auto; max-width: 360px; object-fit: contain; }

/* Logo and footer share the brand-body column so all left edges line up */
.kf-login .kf-login__logo,
.kf-login .kf-login__brand-foot {
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
}
.kf-login .kf-login__logo { margin-top: 4vh; }

.bc-login__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.bc-login__features li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85);
    font-size: .75rem;
}
.bc-login__features i { font-size: .95rem; color: #fff; }

/* Optical centre: lift the form to line up with the brand headline */
@media (min-width: 992px) {
    .kf-login .kf-login__panel { padding-bottom: 12vh; }

    /* No page scroll on desktop: the illustration absorbs the leftover height */
    .kf-login:not(.kf-login--center) { height: 100vh; overflow: hidden; }
    body:has(> .kf-login:not(.kf-login--center)) { overflow: hidden; }
    .kf-login .kf-login__brand { min-height: 0; }
    .kf-login .kf-login__brand-body { min-height: 0; justify-content: flex-start; padding-top: 5vh; }
    .kf-login .kf-login__cover {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .kf-login .bc-login__cover-img { max-height: 100%; width: auto; }
}

/* Fade the illustration's solid navy edges into the brand gradient */
.kf-login .bc-login__cover-img {
    max-width: min(100%, 520px);
    height: auto;
    filter: none;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%);
}

/* Home */
.bc-hero {
    color: #fff;
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(53, 119, 241, .35) 0%, transparent 60%),
        linear-gradient(135deg, #123560 0%, #0e2a4d 100%) !important;
    overflow: hidden;
}
.bc-hero .card-body { padding: 1.5rem; }
.bc-hero__eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.kf-ds .bc-hero .bc-hero__title { color: #fff; font-weight: 600; }
.bc-hero__lead { color: rgba(255, 255, 255, .75); }
.bc-hero__logo { height: 64px; width: auto; border-radius: .5rem; background: #fff; padding: .35rem; }

.kf-ds .bc-shortcut {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .75rem;
    border: 1px solid var(--vz-border-color);
    border-radius: .5rem;
    color: var(--vz-gray-800, #343a40);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.kf-ds .bc-shortcut:hover { border-color: rgba(var(--vz-primary-rgb), .4); background: rgba(var(--vz-primary-rgb), .04); }
.bc-shortcut__label { font-size: .8125rem; font-weight: 500; line-height: 1.3; }

/* Laporan */
.bc-report__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--vz-border-color);
}
.bc-report__logo { height: 56px; width: auto; flex-shrink: 0; }
.bc-report__title { font-size: .95rem; font-weight: 600; margin: 0 0 .15rem; letter-spacing: .01em; }
.bc-report__company { font-size: .75rem; color: var(--vz-gray-600); letter-spacing: .04em; }

.bc-report__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    background: var(--vz-light, #f3f6f9);
    border-bottom: 1px solid var(--vz-border-color);
}

.kf-ds .bc-table { font-size: 12px; white-space: nowrap; }
.kf-ds .bc-table thead th {
    background: var(--vz-light, #f3f6f9);
    font-weight: 600;
    color: var(--vz-gray-700);
    vertical-align: middle;
}

/* DataTables 2 controls */
.kf-ds div.dt-container .dt-search input { min-width: 220px; }
.kf-ds div.dt-container .dt-length select { width: auto; min-width: 80px; display: inline-block; }
.kf-ds table.dataTable th.dt-type-date,
.kf-ds table.dataTable td.dt-type-date { text-align: left; }
.kf-ds div.dt-container .row { margin-bottom: .5rem; }

/* Dokumentasi */
.kf-ds .bc-doc-toc__link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border-radius: .375rem;
    font-size: .8125rem;
    color: var(--vz-gray-700);
    text-decoration: none;
}
.kf-ds .bc-doc-toc__link i { font-size: 1rem; color: var(--vz-gray-500); }
.kf-ds .bc-doc-toc__link:hover { background: rgba(var(--vz-primary-rgb), .06); color: var(--vz-primary); }
.kf-ds .bc-doc-toc__link:hover i { color: var(--vz-primary); }
.bc-doc-section { scroll-margin-top: calc(var(--vz-header-height, 70px) + 1rem); }
.bc-doc-feature {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .75rem;
    border: 1px solid var(--vz-border-color);
    border-radius: .5rem;
}
.bc-doc-feature > i { font-size: 1.5rem; }
.bc-doc-steps { counter-reset: step; list-style: none; padding-left: 0; margin-bottom: 1rem; }
.bc-doc-steps:last-child { margin-bottom: 0; }
.bc-doc-steps > li { counter-increment: step; position: relative; padding: 0 0 .85rem 2.25rem; }
.bc-doc-steps > li:last-child { padding-bottom: 0; }
.bc-doc-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -.1rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--vz-primary);
    background: rgba(var(--vz-primary-rgb), .1);
}
.kf-ds .bc-doc-section .accordion-button {
    font-size: .8125rem;
    font-weight: 500;
    padding: .75rem 1rem;
}
.kf-ds .bc-doc-section .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; }
.kf-ds .bc-doc-section .accordion-body { font-size: .8125rem; line-height: 1.6; padding: .75rem 1rem; }
html { scroll-behavior: smooth; }

/* Role permission */
.bc-permission-list { max-height: 320px; overflow-y: auto; }

@media (max-width: 575.98px) {
    .bc-report__head { flex-direction: column; text-align: center; }
    .bc-hero__logo { display: none; }
}

/* Login submit spinner */
.kf-login__submit { position: relative; }
.kf-login__submit .bc-btn-loading { display: none; align-items: center; justify-content: center; }
.kf-login__submit.is-loading .bc-btn-label { display: none; }
.kf-login__submit.is-loading .bc-btn-loading { display: inline-flex; }
.kf-login__submit.is-loading:disabled { opacity: .85; cursor: progress; }

/* ── Skeleton: initial load (html.bc-loading) ─────────────────────────────── */
.bc-skel-host { position: relative; margin-bottom: 1rem; }
.bc-skel-host.h-100 { margin-bottom: 0; }
.bc-skel-host > .card { margin-bottom: 0; }
.bc-skel {
    position: absolute; inset: 0; z-index: 2;
    padding: 1.1rem 1.25rem;
    background: var(--vz-card-bg, #fff);
    border-radius: var(--vz-card-radius, .5rem);
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    overflow: hidden;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s ease var(--bc-d, 0s), visibility 0s linear calc(var(--bc-d, 0s) + .35s);
}
html.bc-loading .bc-skel-host .bc-skel {
    opacity: 1; visibility: visible; transition: none;
    animation: bc-skel-failsafe 0s linear 6s forwards;
}
.bc-skel-host > .card { transition: opacity .4s ease var(--bc-d, 0s), transform .4s ease var(--bc-d, 0s); }
html.bc-loading .bc-skel-host > .card {
    opacity: 0; transform: translateY(6px); transition: none;
    animation: bc-card-failsafe 0s linear 6s forwards;
}

/* Generic card skeleton, shared by content cards (loading) and the navigation overlay */
.kf-content .card:not(.bc-skel-host > .card),
.bc-nav-skel__card {
    position: relative;
    --bc-sk-bg: var(--vz-card-bg, #fff);
    --bc-sk-line: #eef1f6;
    --bc-sk-shine: rgba(255, 255, 255, .75);
}
.kf-content .card.bc-hero:not(.bc-skel-host > .card),
.bc-nav-skel__card--hero { --bc-sk-bg: #10305a; --bc-sk-line: rgba(255, 255, 255, .12); --bc-sk-shine: rgba(255, 255, 255, .08); }
.kf-content .card:not(.bc-skel-host > .card)::before,
.kf-content .card:not(.bc-skel-host > .card)::after,
.bc-nav-skel__card::before,
.bc-nav-skel__card::after {
    content: ""; position: absolute; inset: 0; z-index: 6;
    border-radius: inherit; pointer-events: none;
}
.kf-content .card:not(.bc-skel-host > .card)::before,
.kf-content .card:not(.bc-skel-host > .card)::after {
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease var(--bc-d, 0s), visibility 0s linear calc(var(--bc-d, 0s) + .35s);
}
.kf-content .card:not(.bc-skel-host > .card)::before,
.bc-nav-skel__card::before {
    background-color: var(--bc-sk-bg);
    background-image:
        linear-gradient(var(--bc-sk-line), var(--bc-sk-line)),
        linear-gradient(var(--bc-sk-line), var(--bc-sk-line)),
        repeating-linear-gradient(to bottom, var(--bc-sk-line) 0 10px, transparent 10px var(--bc-sk-step, 36px));
    background-size: min(38%, 260px) 14px, min(22%, 140px) 10px, calc(100% - 2.5rem) calc(100% - 90px);
    background-position: 1.25rem 1.25rem, 1.25rem 2.6rem, 1.25rem 70px;
    background-repeat: no-repeat;
}
.kf-content .card:not(.bc-skel-host > .card)::after,
.bc-nav-skel__card::after {
    background: linear-gradient(100deg, transparent 20%, var(--bc-sk-shine) 50%, transparent 80%) no-repeat;
    background-size: 60% 100%;
    background-position: -150% 0;
}
.bc-nav-skel__card::after { animation: bc-shine 1.3s ease-in-out infinite; }
html.bc-loading .kf-content .card:not(.bc-skel-host > .card) { overflow: hidden; }
html.bc-loading .kf-content .card:not(.bc-skel-host > .card)::before,
html.bc-loading .kf-content .card:not(.bc-skel-host > .card)::after { opacity: 1; visibility: visible; transition: none; }
html.bc-loading .kf-content .card:not(.bc-skel-host > .card)::before { animation: bc-skel-failsafe 0s linear 6s forwards; }
html.bc-loading .kf-content .card:not(.bc-skel-host > .card)::after {
    animation: bc-shine 1.3s ease-in-out infinite, bc-skel-failsafe 0s linear 6s forwards;
}
.kf-content .card:not(.bc-skel-host > .card) > * { transition: opacity .4s ease var(--bc-d, 0s); }
html.bc-loading .kf-content .card:not(.bc-skel-host > .card) > * {
    opacity: 0; transition: none;
    animation: bc-card-failsafe 0s linear 6s forwards;
}

/* Partial card: header/filter stay visible, only .bc-skel-target gets the skeleton */
html.bc-loading .kf-content .card.bc-skel-partial:not(.bc-skel-host > .card)::before,
html.bc-loading .kf-content .card.bc-skel-partial:not(.bc-skel-host > .card)::after { opacity: 0; visibility: hidden; animation: none; }
html.bc-loading .kf-content .card.bc-skel-partial:not(.bc-skel-host > .card) > * { opacity: 1; animation: none; }
.bc-skel-partial .bc-skel-target { position: relative; }
.bc-skel-partial .bc-skel-target::before,
.bc-skel-partial .bc-skel-target::after {
    content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
    border-radius: 0 0 var(--vz-card-radius, .5rem) var(--vz-card-radius, .5rem);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease var(--bc-d, 0s), visibility 0s linear calc(var(--bc-d, 0s) + .35s);
}
.bc-skel-partial .bc-skel-target::before {
    background-color: var(--vz-card-bg, #fff);
    background-image:
        linear-gradient(#e3e8ef, #e3e8ef),
        repeating-linear-gradient(to bottom, #e3e8ef 0 12px, transparent 12px 36px);
    background-size: calc(100% - 2.5rem) 28px, calc(100% - 2.5rem) calc(100% - 80px);
    background-position: 1.25rem 1.25rem, 1.25rem 64px;
    background-repeat: no-repeat;
}
.bc-skel-partial .bc-skel-target::after {
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .9) 50%, transparent 70%);
    transform: translateX(-100%);
}
.bc-skel-partial .bc-skel-target > * { transition: opacity .4s ease var(--bc-d, 0s); }
html.bc-loading .bc-skel-partial .bc-skel-target { overflow: hidden; }
.bc-skel-partial.is-refreshing .bc-skel-target { overflow: hidden; min-height: 260px; }
html.bc-loading .bc-skel-partial .bc-skel-target::before,
html.bc-loading .bc-skel-partial .bc-skel-target::after,
.bc-skel-partial.is-refreshing .bc-skel-target::before,
.bc-skel-partial.is-refreshing .bc-skel-target::after { opacity: 1; visibility: visible; transition: none; }
.bc-skel-partial.is-refreshing .bc-skel-target::before { animation: bc-pulse 1.3s ease-in-out infinite; }
.bc-skel-partial.is-refreshing .bc-skel-target::after { animation: bc-sweep 1.2s ease-in-out infinite; }
html.bc-loading .bc-skel-partial .bc-skel-target::before { animation: bc-pulse 1.3s ease-in-out infinite, bc-skel-failsafe 0s linear 6s forwards; }
html.bc-loading .bc-skel-partial .bc-skel-target::after { animation: bc-sweep 1.2s ease-in-out infinite, bc-skel-failsafe 0s linear 6s forwards; }
html.bc-loading .bc-skel-partial .bc-skel-target > *,
.bc-skel-partial.is-refreshing .bc-skel-target > * { opacity: 0; transition: none; }
html.bc-loading .bc-skel-partial .bc-skel-target > * { animation: bc-card-failsafe 0s linear 6s forwards; }

.kf-content .page-title-box h4,
.kf-content .page-title-box .breadcrumb { transition: color .3s ease, background-color .3s ease; border-radius: 6px; }
html.bc-loading .kf-content .page-title-box h4,
html.bc-loading .kf-content .page-title-box .breadcrumb {
    color: transparent !important;
    background: linear-gradient(90deg, #e6eaf1 0%, #f3f5f9 40%, #e6eaf1 80%);
    background-size: 200% 100%;
    animation: bc-shimmer 1.3s ease-in-out infinite;
}
html.bc-loading .kf-content .page-title-box a,
html.bc-loading .kf-content .page-title-box .breadcrumb-item,
html.bc-loading .kf-content .page-title-box .breadcrumb-item::before { color: transparent !important; }

/* ── Skeleton: navigation overlay built from the target page's saved layout ── */
.kf-content { position: relative; }
html.bc-navigating .kf-content > :not(.bc-nav-skel) { visibility: hidden; opacity: 0; }
.bc-nav-skel {
    position: absolute; inset: 0; z-index: 5;
    pointer-events: none;
    animation: bc-fade-in .15s ease-out;
}
.bc-nav-skel__card,
.bc-nav-skel__host {
    position: absolute;
    border-radius: var(--vz-card-radius, .5rem);
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    overflow: hidden;
}
.bc-nav-skel__host .bc-skel { opacity: 1; visibility: visible; transition: none; }
.bc-nav-skel__title { position: absolute; display: flex; align-items: center; justify-content: space-between; }
.bc-nav-skel__title span {
    display: block; height: 14px; border-radius: 6px;
    background: linear-gradient(90deg, #e6eaf1 0%, #f3f5f9 40%, #e6eaf1 80%);
    background-size: 200% 100%;
    animation: bc-shimmer 1.3s ease-in-out infinite;
}
.bc-nav-skel__title span:first-child { width: min(30%, 220px); height: 16px; }
.bc-nav-skel__title span:last-child { width: min(18%, 140px); }

/* Top progress bar while navigating */
.bc-progress {
    position: fixed; top: 0; left: 0; z-index: 2000;
    height: 3px; width: 0; opacity: 0;
    background: linear-gradient(90deg, #3577f1, #0ab39c);
    box-shadow: 0 0 8px rgba(53, 119, 241, .5);
    transition: width .2s ease, opacity .3s ease .1s;
}
html.bc-navigating .bc-progress,
html.bc-refreshing .bc-progress { opacity: 1; width: 85%; transition: width 8s cubic-bezier(.1, .7, .2, 1), opacity .1s; }

/* Skeleton primitives (dashboard templates) */
.bc-skel__line,
.bc-skel__box {
    display: block;
    background: linear-gradient(90deg, #eef1f6 0%, #f7f9fc 40%, #eef1f6 80%);
    background-size: 200% 100%;
    animation: bc-shimmer 1.3s ease-in-out infinite;
}
.bc-skel__line { height: 10px; border-radius: 999px; }
.bc-skel__line--sm { height: 8px; }
.bc-skel__line--lg { height: 14px; }
.bc-skel__line--xl { height: 24px; border-radius: 6px; }
.bc-skel__box { border-radius: 8px; }
.bc-skel__box--avatar { width: 48px; height: 48px; flex-shrink: 0; }
.bc-skel__box--icon { width: 32px; height: 32px; flex-shrink: 0; }
.bc-skel__box--circle { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.bc-skel__item {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .75rem; border: 1px solid #f0f2f7; border-radius: 10px;
}
.bc-skel__item .bc-skel__line { flex: 1 1 auto; max-width: 100%; }

@keyframes bc-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes bc-shine { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes bc-skel-failsafe { to { opacity: 0; visibility: hidden; } }
@keyframes bc-card-failsafe { to { opacity: 1; transform: none; } }
@keyframes bc-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes bc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes bc-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .bc-skel__line, .bc-skel__box, .bc-nav-skel__title span, .bc-nav-skel__card::after,
    .bc-skel-partial .bc-skel-target::after { animation: none !important; }
    .bc-skel-host > .card, .bc-skel { transition: none; }
}

/* Dashboard NIE KPI (Power BI parity) */
.nie-kpi {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 88px;
    padding: .7rem .75rem .65rem;
    border-radius: .6rem .6rem .3rem .3rem;
    color: #fff;
    box-shadow: 0 3px 10px rgba(30, 32, 37, .1);
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.nie-kpi::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 22%;
    background: rgba(0, 0, 0, .18);
}
.nie-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 32, 37, .16); }
.nie-kpi.is-active { outline: 2px solid rgba(18, 53, 96, .45); outline-offset: 2px; }
.nie-kpi__value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; position: relative; z-index: 1; }
.nie-kpi__label { font-size: .72rem; font-weight: 600; letter-spacing: .02em; margin-top: .2rem; position: relative; z-index: 1; }
.nie-kpi__hint { font-size: .62rem; opacity: .85; margin-top: .1rem; position: relative; z-index: 1; }
.nie-kpi--total { background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%); }
.nie-kpi--safe { background: linear-gradient(180deg, #2e9b4a 0%, #217a38 100%); }
.nie-kpi--low { background: linear-gradient(180deg, #3aa0e8 0%, #2b7fc0 100%); }
.nie-kpi--medium { background: linear-gradient(180deg, #f0b429 0%, #d49a14 100%); }
.nie-kpi--high { background: linear-gradient(180deg, #e53935 0%, #c62828 100%); }
.nie-kpi--expired { background: linear-gradient(180deg, #6d4c41 0%, #4e342e 100%); }