/*!
 * Kimia Farma Design System — E-Asset
 * ---------------------------------------------------------------------------
 * Imported from the Claude Design project "UI/UX design for E-Asset"
 * (design system: kimia-farma-design-system-5641f700).
 *
 * The upstream _ds_bundle.css is a full Velzon build (Bootstrap 5.3 + theme).
 * This file carries the layer the DS components actually depend on: the --vz-*
 * token set, the soft/ghost colour variants, avatars, page header, card
 * treatment, dropdowns, pagination and the kifest-toast widget. It is designed
 * to load ON TOP of the Bootstrap 5 bundle vendored at /assets/ds.
 *
 * SCOPE: this is now the app's only theme. Both layouts/app.blade.php (Fixed
 * Asset, masters, operations) and layouts/property.blade.php load it. Every
 * rule except the shell classes (.kf-shell / .kf-sidebar / .kf-main /
 * .kf-topbar / .kf-content / .kf-footer) is scoped under `.kf-ds`, which both
 * layouts set on <body>.
 */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
    --vz-blue: #3577f1;
    --vz-indigo: #123560;
    --vz-purple: #6559cc;
    --vz-pink: #f672a7;
    --vz-red: #f06548;
    --vz-orange: #f1963b;
    --vz-yellow: #f7b84b;
    --vz-green: #0ab39c;
    --vz-teal: #02a8b5;
    --vz-cyan: #299cdb;

    --vz-gray-100: #f3f6f9;
    --vz-gray-200: #eff2f7;
    --vz-gray-300: #e9ebec;
    --vz-gray-400: #ced4da;
    --vz-gray-500: #adb5bd;
    --vz-gray-600: #878a99;
    --vz-gray-700: #495057;
    --vz-gray-800: #343a40;
    --vz-gray-900: #212529;

    --vz-primary: #123560;
    --vz-secondary: #3577f1;
    --vz-success: #0ab39c;
    --vz-info: #299cdb;
    --vz-warning: #f7b84b;
    --vz-danger: #f06548;
    --vz-light: #f3f6f9;
    --vz-dark: #212529;

    --vz-primary-rgb: 18, 53, 96;
    --vz-secondary-rgb: 53, 119, 241;
    --vz-success-rgb: 10, 179, 156;
    --vz-info-rgb: 41, 156, 219;
    --vz-warning-rgb: 247, 184, 75;
    --vz-danger-rgb: 240, 101, 72;
    --vz-light-rgb: 243, 246, 249;
    --vz-dark-rgb: 33, 37, 41;

    --vz-body-font-family: "Poppins", sans-serif;
    --vz-body-font-size: 0.8125rem;
    --vz-body-color: #212529;
    --vz-body-bg: #f3f3f9;
    --vz-border-color: var(--vz-gray-300);
    --vz-secondary-color: var(--vz-gray-600);

    --vz-card-bg: #fff;
    --vz-card-radius: 0.5rem;
    --vz-header-height: 70px;
    --vz-sidebar-width: 250px;

    /* Upstream ships these four under the --kf-* namespace (see the token list
       in the design system's README). Values match the literals this file was
       already using for cards, dropdowns and popovers. */
    --kf-radius: 0.25rem;
    --kf-radius-lg: 0.5rem;
    --kf-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    --kf-shadow-md: 0 5px 20px rgba(30, 32, 37, .18);
}

/* Bootstrap in this project ships its own --bs-* palette. Re-point the handful
   of --bs-* tokens the shared Bootstrap components read, so .btn-primary,
   .table-light etc. pick up the Kimia Farma navy inside the property shell. */
.kf-ds {
    --bs-primary: #123560;
    --bs-primary-rgb: 18, 53, 96;
    --bs-secondary: #3577f1;
    --bs-secondary-rgb: 53, 119, 241;
    --bs-success: #0ab39c;
    --bs-success-rgb: 10, 179, 156;
    --bs-info: #299cdb;
    --bs-info-rgb: 41, 156, 219;
    --bs-warning: #f7b84b;
    --bs-warning-rgb: 247, 184, 75;
    --bs-danger: #f06548;
    --bs-danger-rgb: 240, 101, 72;
    --bs-light: #f3f6f9;
    --bs-light-rgb: 243, 246, 249;
    --bs-body-bg: #f3f3f9;
    --bs-body-color: #212529;
    --bs-border-color: #e9ebec;
    --bs-link-color: #123560;
    --bs-link-hover-color: #0e2a4d;
    --bs-border-radius: 0.5rem;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
.kf-ds {
    font-family: var(--vz-body-font-family);
    font-size: var(--vz-body-font-size);
    line-height: 1.5;
    color: var(--vz-body-color);
    background: var(--vz-body-bg);
}

.kf-ds a {
    color: #123560;
    text-decoration: none;
}

.kf-ds a:hover {
    color: #0e2a4d;
}

.kf-ds h1, .kf-ds h2, .kf-ds h3,
.kf-ds h4, .kf-ds h5, .kf-ds h6 {
    font-weight: 600;
    color: var(--vz-gray-900);
}

.kf-ds .text-muted {
    color: var(--vz-gray-600) !important;
}

/* ── Colour variants ──────────────────────────────────────────────────────── */
/* Solid, soft, outline and ghost variants for every theme colour. The DS
   Button/Badge components emit btn-{c} / btn-soft-{c} / btn-outline-{c} /
   btn-ghost-{c} and badge-soft-{c} / badge-outline-{c}. */
.kf-ds .bg-soft-primary   { background-color: rgba(var(--vz-primary-rgb), .1) !important; }
.kf-ds .bg-soft-secondary { background-color: rgba(var(--vz-secondary-rgb), .1) !important; }
.kf-ds .bg-soft-success   { background-color: rgba(var(--vz-success-rgb), .1) !important; }
.kf-ds .bg-soft-info      { background-color: rgba(var(--vz-info-rgb), .1) !important; }
.kf-ds .bg-soft-warning   { background-color: rgba(var(--vz-warning-rgb), .1) !important; }
.kf-ds .bg-soft-danger    { background-color: rgba(var(--vz-danger-rgb), .1) !important; }
.kf-ds .bg-soft-light     { background-color: rgba(var(--vz-light-rgb), .1) !important; }
.kf-ds .bg-soft-dark      { background-color: rgba(var(--vz-dark-rgb), .1) !important; }

.kf-ds .text-primary   { color: var(--vz-primary) !important; }
.kf-ds .text-secondary { color: var(--vz-secondary) !important; }
.kf-ds .text-success   { color: var(--vz-success) !important; }
.kf-ds .text-info      { color: var(--vz-info) !important; }
.kf-ds .text-warning   { color: var(--vz-warning) !important; }
.kf-ds .text-danger    { color: var(--vz-danger) !important; }

.kf-ds .badge {
    padding: .25em .6em;
    font-size: .75em;
    font-weight: 500;
    border-radius: .25rem;
    line-height: 1.4;
}

.kf-ds .badge-soft-primary   { background-color: rgba(var(--vz-primary-rgb), .1);   color: var(--vz-primary); }
.kf-ds .badge-soft-secondary { background-color: rgba(var(--vz-secondary-rgb), .1); color: var(--vz-secondary); }
.kf-ds .badge-soft-success   { background-color: rgba(var(--vz-success-rgb), .1);   color: var(--vz-success); }
.kf-ds .badge-soft-info      { background-color: rgba(var(--vz-info-rgb), .1);      color: var(--vz-info); }
.kf-ds .badge-soft-warning   { background-color: rgba(var(--vz-warning-rgb), .1);   color: #e6a83c; }
.kf-ds .badge-soft-danger    { background-color: rgba(var(--vz-danger-rgb), .1);    color: var(--vz-danger); }
.kf-ds .badge-soft-light     { background-color: var(--vz-gray-200);                color: var(--vz-gray-700); }
.kf-ds .badge-soft-dark      { background-color: rgba(var(--vz-dark-rgb), .1);      color: var(--vz-dark); }

.kf-ds .badge-outline-primary { border: 1px solid var(--vz-primary); color: var(--vz-primary); background: transparent; }
.kf-ds .badge-outline-success { border: 1px solid var(--vz-success); color: var(--vz-success); background: transparent; }
.kf-ds .badge-outline-danger  { border: 1px solid var(--vz-danger);  color: var(--vz-danger);  background: transparent; }

.kf-ds .btn {
    font-size: .8125rem;
    padding: .5rem .9rem;
    border-radius: .25rem;
    font-weight: 400;
    transition: all .2s ease;
}

.kf-ds .btn-sm { padding: .25rem .6rem; font-size: .75rem; }
.kf-ds .btn-lg { padding: .7rem 1.2rem; font-size: .875rem; }
.kf-ds .btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.kf-ds .btn-sm.btn-icon { width: 1.75rem; height: 1.75rem; }

.kf-ds .btn-primary   { background-color: var(--vz-primary);   border-color: var(--vz-primary);   color: #fff; }
.kf-ds .btn-secondary { background-color: var(--vz-secondary); border-color: var(--vz-secondary); color: #fff; }
.kf-ds .btn-success   { background-color: var(--vz-success);   border-color: var(--vz-success);   color: #fff; }
.kf-ds .btn-info      { background-color: var(--vz-info);      border-color: var(--vz-info);      color: #fff; }
.kf-ds .btn-warning   { background-color: var(--vz-warning);   border-color: var(--vz-warning);   color: #fff; }
.kf-ds .btn-danger    { background-color: var(--vz-danger);    border-color: var(--vz-danger);    color: #fff; }
.kf-ds .btn-light     { background-color: var(--vz-light);     border-color: var(--vz-light);     color: var(--vz-gray-700); }
.kf-ds .btn-dark      { background-color: var(--vz-dark);      border-color: var(--vz-dark);      color: #fff; }

.kf-ds .btn-primary:hover   { background-color: #0f2c52; border-color: #0f2c52; color: #fff; }
.kf-ds .btn-success:hover   { background-color: #099885; border-color: #099885; color: #fff; }
.kf-ds .btn-info:hover      { background-color: #2385ba; border-color: #2385ba; color: #fff; }
.kf-ds .btn-warning:hover   { background-color: #d29d40; border-color: #d29d40; color: #fff; }
.kf-ds .btn-danger:hover    { background-color: #cc563d; border-color: #cc563d; color: #fff; }
.kf-ds .btn-light:hover     { background-color: var(--vz-gray-200); border-color: var(--vz-gray-200); color: var(--vz-gray-700); }

.kf-ds .btn-soft-primary   { background-color: rgba(var(--vz-primary-rgb), .1);   color: var(--vz-primary);   border-color: transparent; }
.kf-ds .btn-soft-secondary { background-color: rgba(var(--vz-secondary-rgb), .1); color: var(--vz-secondary); border-color: transparent; }
.kf-ds .btn-soft-success   { background-color: rgba(var(--vz-success-rgb), .1);   color: var(--vz-success);   border-color: transparent; }
.kf-ds .btn-soft-info      { background-color: rgba(var(--vz-info-rgb), .1);      color: var(--vz-info);      border-color: transparent; }
.kf-ds .btn-soft-warning   { background-color: rgba(var(--vz-warning-rgb), .1);   color: #d29d40;             border-color: transparent; }
.kf-ds .btn-soft-danger    { background-color: rgba(var(--vz-danger-rgb), .1);    color: var(--vz-danger);    border-color: transparent; }
.kf-ds .btn-soft-light     { background-color: var(--vz-gray-200);                color: var(--vz-gray-700);  border-color: transparent; }
.kf-ds .btn-soft-dark      { background-color: rgba(var(--vz-dark-rgb), .1);      color: var(--vz-dark);      border-color: transparent; }

.kf-ds .btn-soft-primary:hover   { background-color: var(--vz-primary);   color: #fff; }
.kf-ds .btn-soft-secondary:hover { background-color: var(--vz-secondary); color: #fff; }
.kf-ds .btn-soft-success:hover   { background-color: var(--vz-success);   color: #fff; }
.kf-ds .btn-soft-info:hover      { background-color: var(--vz-info);      color: #fff; }
.kf-ds .btn-soft-warning:hover   { background-color: var(--vz-warning);   color: #fff; }
.kf-ds .btn-soft-danger:hover    { background-color: var(--vz-danger);    color: #fff; }

.kf-ds .btn-ghost-primary { background: transparent; color: var(--vz-primary); border-color: transparent; }
.kf-ds .btn-ghost-danger  { background: transparent; color: var(--vz-danger);  border-color: transparent; }
.kf-ds .btn-ghost-primary:hover { background-color: rgba(var(--vz-primary-rgb), .1); }
.kf-ds .btn-ghost-danger:hover  { background-color: rgba(var(--vz-danger-rgb), .1); }

.kf-ds .btn-outline-primary { border-color: var(--vz-primary); color: var(--vz-primary); background: transparent; }
.kf-ds .btn-outline-primary:hover { background-color: var(--vz-primary); color: #fff; }
.kf-ds .btn-outline-danger  { border-color: var(--vz-danger); color: var(--vz-danger); background: transparent; }
.kf-ds .btn-outline-danger:hover { background-color: var(--vz-danger); color: #fff; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.kf-ds .card {
    border: none;
    border-radius: var(--vz-card-radius);
    background-color: var(--vz-card-bg);
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    margin-bottom: 1rem;
}

.kf-ds .card-header {
    padding: .75rem 1rem;
    background-color: var(--vz-card-bg);
    border-bottom: 1px solid var(--vz-border-color);
    border-radius: var(--vz-card-radius) var(--vz-card-radius) 0 0;
}

.kf-ds .card-body { padding: 1rem; }
.kf-ds .card-footer {
    padding: .75rem 1rem;
    background-color: var(--vz-card-bg);
    border-top: 1px solid var(--vz-border-color);
}

.kf-ds .card-title { font-size: .9375rem; font-weight: 600; margin-bottom: 0; }

.kf-ds .card-animate { transition: transform .3s ease, box-shadow .3s ease; }
.kf-ds .card-animate:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
}

/* ── Avatars ──────────────────────────────────────────────────────────────── */
.kf-ds .avatar-xxs { height: 1.5rem;  width: 1.5rem; }
.kf-ds .avatar-xs  { height: 2rem;    width: 2rem; }
.kf-ds .avatar-sm  { height: 3rem;    width: 3rem; }
.kf-ds .avatar-md  { height: 4.5rem;  width: 4.5rem; }
.kf-ds .avatar-lg  { height: 6rem;    width: 6rem; }
.kf-ds .avatar-xl  { height: 7.5rem;  width: 7.5rem; }

.kf-ds .avatar-title {
    align-items: center;
    display: flex;
    font-weight: 500;
    height: 100%;
    justify-content: center;
    width: 100%;
    color: #fff;
    background-color: var(--vz-primary);
}

.kf-ds .avatar-group { padding-left: 12px; display: flex; flex-wrap: wrap; }
.kf-ds .avatar-group .avatar-group-item { margin-left: -12px; border: 2px solid #fff; border-radius: 50%; transition: all .2s; }
.kf-ds .avatar-group .avatar-group-item:hover { transform: translateY(-2px); z-index: 1; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.kf-ds .page-title-box {
    padding: 0 0 .5rem 0;
    margin-bottom: .25rem;
}

.kf-ds .page-title-box h4 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 0;
}

.kf-ds .page-title-box .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: .8125rem;
}

.kf-ds .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--vz-gray-500); }
.kf-ds .breadcrumb-item.active { color: var(--vz-gray-600); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.kf-ds .table {
    --bs-table-bg: transparent;
    font-size: .8125rem;
    color: var(--vz-body-color);
    border-color: var(--vz-border-color);
    margin-bottom: 0;
}

.kf-ds .table > :not(caption) > * > * { padding: .75rem .75rem; }

.kf-ds .table thead.table-light th,
.kf-ds .table > thead.table-light > tr > th {
    background-color: var(--vz-gray-200);
    color: var(--vz-gray-700);
    font-weight: 600;
    font-size: .75rem;
    text-transform: none;
    border-bottom: 1px solid var(--vz-border-color);
    white-space: nowrap;
}

.kf-ds .table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--vz-primary-rgb), .035);
}

.kf-ds .table-responsive { border-radius: 0 0 var(--vz-card-radius) var(--vz-card-radius); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.kf-ds .form-group { margin-bottom: 0; }

.kf-ds .form-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--vz-gray-700);
    margin-bottom: .35rem;
}

.kf-ds .form-control,
.kf-ds .form-select {
    font-size: .8125rem;
    padding: .5rem .9rem;
    border: 1px solid var(--vz-gray-400);
    border-radius: .25rem;
    color: var(--vz-body-color);
    background-color: #fff;
}

.kf-ds .form-control-sm,
.kf-ds .form-select-sm { padding: .25rem .6rem; font-size: .75rem; }

.kf-ds .form-control:focus,
.kf-ds .form-select:focus {
    border-color: #89a0bb;
    box-shadow: 0 0 0 .15rem rgba(var(--vz-primary-rgb), .12);
    outline: 0;
}

.kf-ds .form-control::placeholder { color: var(--vz-gray-500); }
.kf-ds .form-control:disabled,
.kf-ds .form-control[readonly] { background-color: var(--vz-gray-100); }

.kf-ds .form-text { font-size: .75rem; color: var(--vz-gray-600); margin-top: .25rem; }
.kf-ds .invalid-feedback { font-size: .75rem; color: var(--vz-danger); }
.kf-ds .is-invalid { border-color: var(--vz-danger) !important; }
.kf-ds .is-valid { border-color: var(--vz-success) !important; }

.kf-ds .form-check-input:checked {
    background-color: var(--vz-primary);
    border-color: var(--vz-primary);
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.kf-ds .alert {
    border: none;
    border-radius: .25rem;
    padding: .75rem 1rem;
    font-size: .8125rem;
    margin-bottom: 0;
}

.kf-ds .alert-primary { background-color: rgba(var(--vz-primary-rgb), .1); color: var(--vz-primary); }
.kf-ds .alert-success { background-color: rgba(var(--vz-success-rgb), .1); color: var(--vz-success); }
.kf-ds .alert-info    { background-color: rgba(var(--vz-info-rgb), .1);    color: var(--vz-info); }
.kf-ds .alert-warning { background-color: rgba(var(--vz-warning-rgb), .1); color: #c9922f; }
.kf-ds .alert-danger  { background-color: rgba(var(--vz-danger-rgb), .1);  color: var(--vz-danger); }
.kf-ds .alert-borderless { border-left: none; }
.kf-ds .alert-additional { padding: 0; overflow: hidden; }
.kf-ds .alert-additional .alert-body { padding: .75rem 1rem; }

/* ── Progress ─────────────────────────────────────────────────────────────── */
.kf-ds .progress { background-color: var(--vz-gray-300); border-radius: .25rem; height: .75rem; }
.kf-ds .progress-sm { height: .35rem; }
.kf-ds .progress-lg { height: 1.2rem; }
.kf-ds .progress-bar { background-color: var(--vz-primary); }
.kf-ds .progress-bar.bg-success { background-color: var(--vz-success) !important; }
.kf-ds .progress-bar.bg-warning { background-color: var(--vz-warning) !important; }
.kf-ds .progress-bar.bg-danger  { background-color: var(--vz-danger) !important; }
.kf-ds .progress-bar.bg-info    { background-color: var(--vz-info) !important; }

/* ── Nav / tabs ───────────────────────────────────────────────────────────── */
.kf-ds .nav-tabs { border-bottom: 1px solid var(--vz-border-color); }
.kf-ds .nav-tabs .nav-link {
    color: var(--vz-gray-600);
    font-weight: 500;
    font-size: .8125rem;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .6rem 1rem;
    background: transparent;
}
.kf-ds .nav-tabs .nav-link.active {
    color: var(--vz-primary);
    border-bottom-color: var(--vz-primary);
    background: transparent;
}
.kf-ds .nav-tabs .nav-link:hover:not(.active) { color: var(--vz-primary); border-bottom-color: var(--vz-gray-400); }

.kf-ds .nav-pills .nav-link { color: var(--vz-gray-600); font-size: .8125rem; border-radius: .25rem; }
.kf-ds .nav-pills .nav-link.active { background-color: var(--vz-primary); color: #fff; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.kf-ds .modal-content, .modal-content.kf-ds-modal {
    border: none;
    border-radius: var(--vz-card-radius);
    box-shadow: 0 5px 20px rgba(30, 32, 37, .18);
}
.kf-ds-modal .modal-header, .kf-ds .modal-header {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--vz-border-color);
}
.kf-ds-modal .modal-title, .kf-ds .modal-title { font-size: .9375rem; font-weight: 600; }
.kf-ds-modal .modal-footer, .kf-ds .modal-footer { padding: .75rem 1rem; border-top: 1px solid var(--vz-border-color); }

/* ── Toast (kifest-toast) ─────────────────────────────────────────────────── */
.kifest-toast-popup {
    min-width: 300px;
    max-width: 360px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    overflow: hidden;
    background: #fff;
    font-family: var(--vz-body-font-family);
}

.kifest-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
}

.kifest-toast__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--toast-accent, var(--vz-success));
    background: color-mix(in srgb, var(--toast-accent, var(--vz-success)) 12%, #fff);
}

.kifest-toast__content { min-width: 0; }
.kifest-toast__title { font-size: 13px; font-weight: 600; color: var(--vz-gray-900); }
.kifest-toast__subtitle { font-size: 12px; color: var(--vz-gray-600); margin-top: 2px; line-height: 1.45; }
.kifest-toast-progress { height: 3px; }
.kifest-toast-progress > div { height: 100%; background: var(--toast-accent, var(--vz-success)); animation: kifest-toast-bar 4s linear forwards; }

@keyframes kifest-toast-bar { from { width: 100%; } to { width: 0%; } }

/* ── Shell: sidebar + topbar ──────────────────────────────────────────────── */
.kf-shell { display: flex; min-height: 100vh; align-items: stretch; background: var(--vz-body-bg); }

.kf-sidebar {
    flex: 0 0 var(--vz-sidebar-width);
    width: var(--vz-sidebar-width);
    min-height: 100vh;
    background-color: #133560;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
}

/* NOTE ON THE `.kf-sidebar` PREFIX below.
 * The base link colour is `.kf-ds a { color: #123560 }` — specificity (0,1,1),
 * because it is a class PLUS an element. A bare `.kf-sidebar__link` is only
 * (0,1,0), so it LOSES regardless of source order, and every non-active link
 * renders navy-on-navy — invisible. (The `.active` and `:hover` rules were
 * (0,2,0) and survived, which is why only the current page used to show up.)
 * Prefixing with `.kf-sidebar` lifts these to (0,2,0) so they win, without
 * scoping them under `.kf-ds` — the shell classes stay usable on their own.
 */
.kf-sidebar .kf-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vz-header-height);
    padding: .75rem 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

.kf-sidebar .kf-sidebar__brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 40px;
    margin-inline: auto;
    object-fit: contain;
}

/* Module switcher (components/ds/module-switcher.blade.php) — sits between the
   brand and the nav in both sidebars. Same `.kf-sidebar` prefix trick as the
   links below: the trigger has to out-specify `.kf-ds a`/Bootstrap's button
   reset to keep its white-on-navy treatment. */
.kf-sidebar__switch { padding: 0 1rem .75rem; }

.kf-sidebar .kf-sidebar__switch-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.kf-sidebar .kf-sidebar__switch-btn:hover,
.kf-sidebar .kf-sidebar__switch-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
}

.kf-sidebar .kf-sidebar__switch-btn > i { font-size: 16px; }
.kf-sidebar__switch-label { flex: 1 1 auto; min-width: 0; }
.kf-sidebar__switch-eyebrow {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.kf-sidebar__switch-name {
    display: block;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kf-sidebar .kf-sidebar__switch-caret { margin-left: auto; font-size: 14px; opacity: .7; }

/* Wider than the sidebar on purpose — the two module descriptions do not fit
   in 250px, and Bootstrap's .dropdown-item never wraps. It spills over the
   content area, which is what a popover is meant to do. */
.kf-sidebar__switch .dropdown-menu { min-width: 288px; }

.kf-sidebar__nav { list-style: none; margin: 0; padding: .5rem 0 1.5rem; overflow-y: auto; flex: 1 1 auto; }

.kf-sidebar__heading {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .45);
    padding: .75rem 1.5rem .25rem;
}

.kf-sidebar .kf-sidebar__link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.5rem;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .6);
    border-left: 3px solid transparent;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.kf-sidebar .kf-sidebar__link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.kf-sidebar .kf-sidebar__link.active { color: #fff; background: rgba(255, 255, 255, .08); border-left-color: #fff; }
.kf-sidebar .kf-sidebar__link i { font-size: 16px; }
.kf-sidebar .kf-sidebar__link .badge { margin-left: auto; }

/* Collapsible groups (Operations, Master Data) — Bootstrap's collapse drives
   the .collapsed class on the toggle, which is what rotates the caret. */
.kf-sidebar__link--toggle { cursor: pointer; }
.kf-sidebar__caret {
    margin-left: auto;
    font-size: 14px !important;
    transition: transform .15s ease;
}
.kf-sidebar__link--toggle.collapsed .kf-sidebar__caret { transform: rotate(-90deg); }

.kf-sidebar__sub { list-style: none; margin: 0; padding: 0; }
.kf-sidebar__sub .kf-sidebar__link {
    padding-left: 3.25rem;
    font-size: 13.5px;
    position: relative;
}
.kf-sidebar__sub .kf-sidebar__link::before {
    content: "";
    position: absolute;
    left: 2.1rem;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

.kf-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.kf-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 0 1rem;
    height: var(--vz-header-height);
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.kf-content { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }

.kf-footer {
    padding: 14px 24px;
    background: #fff;
    border-top: 1px solid var(--vz-border-color);
    color: var(--vz-gray-600);
    font-size: 13px;
}

/* ── Font-size scale ─────────────────────────────────────────────────────── */
/* TWO scales coexist here, and both are load-bearing:
 *
 *   fs-11 .. fs-32  the design system's px scale (Velzon). Used by the DS
 *                   components and the property views.
 *   fs-1 .. fs-10   the Modernize rem scale, kept verbatim from the template
 *                   this app used to ship. ~180 usages across the Fixed Asset,
 *                   master and operation views depend on these exact values.
 *
 * Do NOT let Bootstrap's own .fs-1...fs-6 win here — its scale is INVERTED
 * relative to Modernize's (Bootstrap fs-4 = 1.5rem, Modernize fs-4 = 1rem),
 * which is why every entry below is !important and lives after the Bootstrap
 * link in layouts/components/styles.blade.php.
 */
.kf-ds .fs-11 { font-size: 11px !important; }
.kf-ds .fs-12 { font-size: 12px !important; }
.kf-ds .fs-13 { font-size: 13px !important; }
.kf-ds .fs-14 { font-size: 14px !important; }
.kf-ds .fs-15 { font-size: 15px !important; }
.kf-ds .fs-16 { font-size: 16px !important; }
.kf-ds .fs-18 { font-size: 18px !important; }
.kf-ds .fs-20 { font-size: 20px !important; }
.kf-ds .fs-22 { font-size: 22px !important; }
.kf-ds .fs-24 { font-size: 24px !important; }
.kf-ds .fs-32 { font-size: 32px !important; }

.kf-ds .fs-1  { font-size: .625rem !important; }
.kf-ds .fs-2  { font-size: .75rem !important; }
.kf-ds .fs-3  { font-size: .875rem !important; }
.kf-ds .fs-4  { font-size: 1rem !important; }
.kf-ds .fs-5  { font-size: 1.125rem !important; }
.kf-ds .fs-6  { font-size: 1.25rem !important; }
.kf-ds .fs-7  { font-size: 1.5rem !important; }
.kf-ds .fs-8  { font-size: 1.75rem !important; }
.kf-ds .fs-9  { font-size: 2rem !important; }
.kf-ds .fs-10 { font-size: 2.25rem !important; }
.kf-ds .ff-secondary { font-family: var(--vz-body-font-family); }
.kf-ds .fw-medium { font-weight: 500 !important; }
.kf-ds .fw-semibold { font-weight: 600 !important; }

/* Remixicon has no spin modifier of its own (FontAwesome's fa-spin is gone
   with the Modernize stack), so spinners use this. */
.kf-ds .kf-spin { display: inline-block; animation: kf-spin 1s linear infinite; }
@keyframes kf-spin { to { transform: rotate(360deg); } }

/* ── Page header ─────────────────────────────────────────────────────────── */
/* Breadcrumb side of .page-title-box. Bootstrap's flex handles the placement;
   this only stops the breadcrumb wrapping oddly on narrow viewports. */
.kf-ds .page-title-right { flex-shrink: 0; }

/* ── Dropdowns ───────────────────────────────────────────────────────────── */
.kf-ds .dropdown-menu {
    border: 1px solid var(--vz-border-color);
    border-radius: var(--kf-radius);
    box-shadow: var(--kf-shadow-md);
    padding: .25rem 0;
    font-size: 13px;
    color: var(--vz-body-color);
}

.kf-ds .dropdown-item { padding: .45rem 1rem; color: var(--vz-body-color); }
.kf-ds .dropdown-item:hover,
.kf-ds .dropdown-item:focus { background-color: var(--vz-light); color: var(--vz-primary); }
.kf-ds .dropdown-item.active,
.kf-ds .dropdown-item:active { background-color: var(--vz-primary); color: #fff; }
.kf-ds .dropdown-divider { border-top-color: var(--vz-border-color); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.kf-ds .pagination { margin-bottom: 0; gap: 4px; }
.kf-ds .page-link {
    border: none;
    border-radius: var(--kf-radius);
    color: var(--vz-gray-600);
    font-size: 13px;
    padding: .35rem .7rem;
}
.kf-ds .page-link:hover { background-color: rgba(var(--vz-primary-rgb), .1); color: var(--vz-primary); }
.kf-ds .page-item.active .page-link { background-color: var(--vz-primary); color: #fff; }
.kf-ds .page-item.disabled .page-link { color: var(--vz-gray-400); background: transparent; }

/* Stage stepper on the property dashboard */
.kf-stage {
    cursor: pointer;
    border: 1px solid var(--vz-border-color);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.kf-stage:hover { border-color: #123560; box-shadow: 0 1px 4px rgba(18, 53, 96, .15); }
.kf-stage__n {
    width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 50%;
    background: rgba(18, 53, 96, .08);
    color: #123560;
    font-weight: 600;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}
.kf-stage__label { font-size: 12px; font-weight: 600; color: #212529; white-space: nowrap; }
.kf-stage__sub { font-size: 11px; color: #878a99; white-space: nowrap; }

/* Login / auth screens ───────────────────────────────────────────────────── */
.kf-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    background: var(--vz-body-bg);
}

.kf-login__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 2.5rem 1.5rem;
    color: #fff;
    background:
        radial-gradient(ellipse 80% 60% at 10% 0%, rgba(53, 119, 241, .35) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 90% 100%, rgba(10, 179, 156, .18) 0%, transparent 50%),
        linear-gradient(160deg, #123560 0%, #0e2a4d 55%, #0a1f38 100%);
    overflow: hidden;
}

.kf-login__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 85%);
    pointer-events: none;
}

.kf-login .kf-login__logo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
}

.kf-login .kf-login__logo:hover {
    color: #fff;
    opacity: .9;
}

.kf-login__brand-body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 36rem;
    margin: 1.5rem auto 0;
    width: 100%;
}

.kf-login__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .75rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

.kf-ds .kf-login__headline {
    margin: 0 0 .85rem;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.kf-login__lead {
    margin: 0 0 1.75rem;
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    max-width: 28rem;
}

.kf-login__cover {
    margin-top: .5rem;
    text-align: center;
}

.kf-login__cover img {
    max-width: min(100%, 460px);
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .28));
}

.kf-login__brand-foot {
    position: relative;
    z-index: 1;
    margin: 1.25rem 0 0;
    font-size: .75rem;
    color: rgba(255, 255, 255, .55);
}

.kf-login__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #fff;
}

.kf-login__form {
    width: 100%;
    max-width: 380px;
}

.kf-login__form-head {
    margin-bottom: 1.5rem;
}

.kf-login__badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .85rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(var(--vz-primary-rgb), .08);
    color: var(--vz-primary);
    font-size: .75rem;
    font-weight: 600;
}

.kf-login__title {
    margin: 0 0 .35rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--vz-gray-900);
}

.kf-login__subtitle {
    margin: 0;
    font-size: .8125rem;
    color: var(--vz-gray-600);
}

.kf-login__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kf-login__password {
    position: relative;
}

.kf-login__password .form-control {
    padding-right: 2.75rem;
}

.kf-login__password-toggle {
    position: absolute;
    top: 50%;
    right: .55rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--vz-gray-600);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
    cursor: pointer;
}

.kf-login__password-toggle:hover {
    color: var(--vz-primary);
    background: rgba(var(--vz-primary-rgb), .06);
}

.kf-login__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -.15rem;
}

.kf-login__meta .form-check-label {
    font-size: .8125rem;
    color: var(--vz-gray-700);
}

.kf-login__submit {
    margin-top: .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.kf-login__footnote {
    margin: 1.5rem 0 0;
    font-size: .75rem;
    color: var(--vz-gray-500);
    text-align: center;
}

/* Compact centered card variant (2FA, etc.) */
.kf-login--center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse 70% 50% at 15% 0%, rgba(53, 119, 241, .28) 0%, transparent 55%),
        linear-gradient(160deg, #123560 0%, #0e2a4d 100%);
}

.kf-login--center .kf-login__card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: var(--vz-card-radius);
    box-shadow: var(--kf-shadow-md);
    padding: 2rem 1.75rem;
}

.kf-login--center .kf-login__card-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.kf-login .kf-login__logo--dark {
    color: var(--vz-primary);
}

.kf-login .kf-login__logo--dark:hover {
    color: var(--vz-primary);
    opacity: .85;
}

@media (max-width: 991.98px) {
    .kf-login {
        grid-template-columns: 1fr;
    }

    .kf-login__brand {
        min-height: auto;
        padding: 1.5rem 1.25rem 1rem;
    }

    .kf-login__brand-body {
        margin-top: 1rem;
    }

    .kf-login__cover {
        display: none;
    }

    .kf-login__headline {
        font-size: 1.35rem;
    }

    .kf-login__lead {
        margin-bottom: .5rem;
    }

    .kf-login__brand-foot {
        display: none;
    }

    .kf-login__panel {
        padding: 1.75rem 1.25rem 2.5rem;
        align-items: flex-start;
    }
}

@media (max-width: 991.98px) {
    .kf-sidebar { position: fixed; z-index: 1030; transform: translateX(-100%); transition: transform .2s ease; }
    .kf-sidebar.show { transform: translateX(0); }
    .kf-content { padding: 16px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Modernize compatibility layer
   ─────────────────────────────────────────────────────────────────────────
   The Fixed Asset, master and operation views were authored against the
   Modernize template. These rules carry over the handful of utilities those
   views depend on that neither Bootstrap 5.1.3 nor the DS layer provides, so
   the migration to the Kimia Farma DS did not have to touch 149 view files.

   Scope note: app-level classes (.badge-sm, .table-nowrap, .sticky-side-div,
   .table-loading-overlay, the label-generator print rules) are NOT duplicated
   here — they live in public/assets/css/custom.css, which the main app shell
   still loads. Classes that never resolved even under Modernize (fs-lg,
   nowrap, table-md, card-height-100, py-md-11, swiper-*, aos-*) are likewise
   left alone.
   ═════════════════════════════════════════════════════════════════════════ */

/* Modernize kept its own 6-9 step on top of Bootstrap's 0-5 spacing
   scale, with non-monotonic values (6=12px, 7=30px, 8=10px, 9=20px).
   Reproduced verbatim so the migrated views keep their spacing. */
.kf-ds .mt-6 { margin-top: 12px !important; }
.kf-ds .mt-7 { margin-top: 30px !important; }
.kf-ds .mt-8 { margin-top: 10px !important; }
.kf-ds .mt-9 { margin-top: 20px !important; }
.kf-ds .mb-6 { margin-bottom: 12px !important; }
.kf-ds .mb-7 { margin-bottom: 30px !important; }
.kf-ds .mb-8 { margin-bottom: 10px !important; }
.kf-ds .mb-9 { margin-bottom: 20px !important; }
.kf-ds .ms-6 { margin-left: 12px !important; }
.kf-ds .ms-7 { margin-left: 30px !important; }
.kf-ds .ms-8 { margin-left: 10px !important; }
.kf-ds .ms-9 { margin-left: 20px !important; }
.kf-ds .me-6 { margin-right: 12px !important; }
.kf-ds .me-7 { margin-right: 30px !important; }
.kf-ds .me-8 { margin-right: 10px !important; }
.kf-ds .me-9 { margin-right: 20px !important; }
.kf-ds .mx-6 { margin-left: 12px !important; margin-right: 12px !important; }
.kf-ds .mx-7 { margin-left: 30px !important; margin-right: 30px !important; }
.kf-ds .mx-8 { margin-left: 10px !important; margin-right: 10px !important; }
.kf-ds .mx-9 { margin-left: 20px !important; margin-right: 20px !important; }
.kf-ds .my-6 { margin-top: 12px !important; margin-bottom: 12px !important; }
.kf-ds .my-7 { margin-top: 30px !important; margin-bottom: 30px !important; }
.kf-ds .my-8 { margin-top: 10px !important; margin-bottom: 10px !important; }
.kf-ds .my-9 { margin-top: 20px !important; margin-bottom: 20px !important; }
.kf-ds .m-6 { margin: 12px !important; }
.kf-ds .m-7 { margin: 30px !important; }
.kf-ds .m-8 { margin: 10px !important; }
.kf-ds .m-9 { margin: 20px !important; }
.kf-ds .pt-6 { padding-top: 12px !important; }
.kf-ds .pt-7 { padding-top: 30px !important; }
.kf-ds .pt-8 { padding-top: 10px !important; }
.kf-ds .pt-9 { padding-top: 20px !important; }
.kf-ds .pb-6 { padding-bottom: 12px !important; }
.kf-ds .pb-7 { padding-bottom: 30px !important; }
.kf-ds .pb-8 { padding-bottom: 10px !important; }
.kf-ds .pb-9 { padding-bottom: 20px !important; }
.kf-ds .ps-6 { padding-left: 12px !important; }
.kf-ds .ps-7 { padding-left: 30px !important; }
.kf-ds .ps-8 { padding-left: 10px !important; }
.kf-ds .ps-9 { padding-left: 20px !important; }
.kf-ds .pe-6 { padding-right: 12px !important; }
.kf-ds .pe-7 { padding-right: 30px !important; }
.kf-ds .pe-8 { padding-right: 10px !important; }
.kf-ds .pe-9 { padding-right: 20px !important; }
.kf-ds .px-6 { padding-left: 12px !important; padding-right: 12px !important; }
.kf-ds .px-7 { padding-left: 30px !important; padding-right: 30px !important; }
.kf-ds .px-8 { padding-left: 10px !important; padding-right: 10px !important; }
.kf-ds .px-9 { padding-left: 20px !important; padding-right: 20px !important; }
.kf-ds .py-6 { padding-top: 12px !important; padding-bottom: 12px !important; }
.kf-ds .py-7 { padding-top: 30px !important; padding-bottom: 30px !important; }
.kf-ds .py-8 { padding-top: 10px !important; padding-bottom: 10px !important; }
.kf-ds .py-9 { padding-top: 20px !important; padding-bottom: 20px !important; }
.kf-ds .p-6 { padding: 12px !important; }
.kf-ds .p-7 { padding: 30px !important; }
.kf-ds .p-8 { padding: 10px !important; }
.kf-ds .p-9 { padding: 20px !important; }

/* Negative margins used by components/ui-breadcrumb.blade.php */
.kf-ds .mb-n4 { margin-bottom: -1.5rem !important; }
.kf-ds .mb-n5 { margin-bottom: -3rem !important; }

/* Fixed 45x45 media box (Modernize .round) and dashed borders */
.kf-ds .round { width: 45px; height: 45px; }
.kf-ds .border-dashed { border-style: dashed !important; }

/* Bootstrap 5.3 subtle backgrounds + text-bg pairs. Upstream's theme is built
   on 5.3, but the Bootstrap vendored here is 5.1.3, which predates both. */
.kf-ds .bg-primary-subtle   { background-color: rgba(var(--vz-primary-rgb), .12) !important; }
.kf-ds .bg-secondary-subtle { background-color: rgba(var(--vz-secondary-rgb), .12) !important; }
.kf-ds .bg-success-subtle   { background-color: rgba(var(--vz-success-rgb), .12) !important; }
.kf-ds .bg-info-subtle      { background-color: rgba(var(--vz-info-rgb), .12) !important; }
.kf-ds .bg-warning-subtle   { background-color: rgba(var(--vz-warning-rgb), .12) !important; }
.kf-ds .bg-danger-subtle    { background-color: rgba(var(--vz-danger-rgb), .12) !important; }
.kf-ds .bg-dark-subtle      { background-color: rgba(var(--vz-dark-rgb), .12) !important; }
.kf-ds .bg-purple-subtle    { background-color: rgba(101, 89, 204, .12) !important; }

.kf-ds .text-bg-primary   { background-color: var(--vz-primary) !important;   color: #fff !important; }
.kf-ds .text-bg-secondary { background-color: var(--vz-secondary) !important; color: #fff !important; }
.kf-ds .text-bg-success   { background-color: var(--vz-success) !important;   color: #fff !important; }
.kf-ds .text-bg-info      { background-color: var(--vz-info) !important;      color: #fff !important; }
.kf-ds .text-bg-warning   { background-color: var(--vz-warning) !important;   color: #fff !important; }
.kf-ds .text-bg-danger    { background-color: var(--vz-danger) !important;    color: #fff !important; }
.kf-ds .text-bg-light     { background-color: var(--vz-light) !important;     color: var(--vz-gray-700) !important; }
.kf-ds .text-bg-dark      { background-color: var(--vz-dark) !important;      color: #fff !important; }