/*!
 * 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: 0 0 .25rem 0;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.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: 200px;
    height: 48px;
    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-topbar__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: #7c8190; font-size: 24px;
}
.kf-topbar__toggle:hover { background: #f3f3f9; color: #133560; }

.kf-search { width: 240px; }
.kf-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #7c8190; pointer-events: none; }
.kf-ds .kf-search__input {
    height: 36px; padding-left: 36px; border: 0; border-radius: 6px;
    background: #f3f3f9; color: #212529; font-size: 13px; box-shadow: none;
}
.kf-ds .kf-search__input::placeholder { color: #878a99; }
.kf-ds .kf-search__input:focus { background: #ededf5; box-shadow: none; }

/* Mini sidebar (desktop): icons only; labels and submenus fly out on hover. */
@media (min-width: 992px) {
    .kf-sidebar { transition: width .2s ease, flex-basis .2s ease; }
    .kf-sb-collapsed .kf-sidebar { flex-basis: 70px; width: 70px; z-index: 1030; }
    .kf-sb-collapsed .kf-sidebar .kf-sidebar__brand { padding: .75rem .5rem; }
    .kf-sb-collapsed .kf-sidebar .kf-sidebar__brand-logo { height: 40px; max-width: 48px; }
    .kf-sb-collapsed .kf-sidebar__nav { overflow: visible; }
    .kf-sb-collapsed .kf-sidebar__heading { font-size: 0; padding: .5rem 0; margin: 0 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
    .kf-sb-collapsed .kf-sidebar__nav > li { position: relative; }
    .kf-sb-collapsed .kf-sidebar__nav > li > .kf-sidebar__link { justify-content: center; padding: .65rem 0; }
    .kf-sb-collapsed .kf-sidebar__nav > li > .kf-sidebar__link i:not(.kf-sidebar__caret) { font-size: 20px; }
    .kf-sb-collapsed .kf-sidebar__nav > li > .kf-sidebar__link > span,
    .kf-sb-collapsed .kf-sidebar__nav > li > .kf-sidebar__link > .kf-sidebar__caret { display: none; }

    .kf-sb-collapsed .kf-sidebar__nav > li:hover > .kf-sidebar__link:not(.kf-sidebar__link--toggle) > span:first-of-type {
        display: block; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
        padding: .4rem .75rem; border-radius: 0 6px 6px 0; white-space: nowrap;
        background: #133560; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    }

    .kf-sb-collapsed .kf-sidebar__sub,
    .kf-sb-collapsed .kf-sidebar__sub.show { display: none; }
    .kf-sb-collapsed .kf-sidebar__nav > li:hover > .kf-sidebar__sub {
        display: block; position: absolute; left: 100%; top: 0; min-width: 200px; height: auto !important;
        padding: .35rem 0; border-radius: 0 6px 6px 0;
        background: #133560; box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    }
    .kf-sb-collapsed .kf-sidebar__sub .kf-sidebar__link { padding-left: 2.25rem; white-space: nowrap; }
    .kf-sb-collapsed .kf-sidebar__sub .kf-sidebar__link::before { left: 1.1rem; }
}
.kf-search__results { width: 100%; max-height: 320px; overflow-y: auto; margin-top: 4px; }

.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__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__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__logo--dark {
    color: var(--vz-primary);
}

.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; }