/*
 * Tema ComTalk (lihat DESIGN.md) di atas Metronic.
 * Markup & JS Metronic tetap dipakai; warna, tipografi, radius dan bentuk komponen diatur di sini.
 * Urutan: style.bundle.css -> theme.css -> topbar.css -> ui.css (komponen halaman). Komponen hanya memakai token di bawah, jangan hex mentah.
 */

/* ===================== 1. Token (DESIGN.md §3) ===================== */

:root,
[data-bs-theme=light] {
    color-scheme: light;

    --bg: #f9f9f9;
    --card-bg: #ffffff;
    --border: #f1eeee;
    --border-strong: #e6dfda;
    --hover: #fafafa;
    --text: #2b2320;
    --muted: #9a8f83;

    --primary: #f97316;
    --primary-hover: #ea580c;
    --primary-soft: #ffedd9;
    --primary-ink: #c2410c;
    --on-primary: #ffffff;
    --ring: rgba(249, 115, 22, .28);

    --danger: #e5484d;
    --danger-soft: #fdeaea;
    --danger-soft-hover: #fbd6d7;
    --success: #1fa971;
    --success-soft: #e4f8ef;

    --neutral: #f1eeee;
    --neutral-hover: #e8dcd0;

    --overlay: rgba(20, 14, 8, .5);
    --shadow-sm: 0 1px 2px rgba(43, 35, 32, .06);
    --shadow-lg: 0 20px 40px rgba(43, 35, 32, .22);
    --shadow-card: 0 1px 2px rgba(43, 35, 32, .04), 0 12px 32px -20px rgba(43, 35, 32, .22);

    --radius: 12px;
    --radius-lg: 20px;
    --bg-grid: var(--border);
    --speed: .2s;
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-bs-theme=dark] {
    color-scheme: dark;

    --bg: #0f1014;
    --card-bg: #15171c;
    --border: #2f2a28;
    --border-strong: #3a3532;
    --hover: #2c2e31;
    --text: #f0e6dc;
    --muted: #a3907f;

    --primary-soft: #3a2415;
    --primary-ink: #fdba74;
    --ring: rgba(251, 139, 60, .32);

    --danger: #ff6369;
    --danger-soft: #331c1d;
    --danger-soft-hover: #452325;
    --success: #3dd68c;
    --success-soft: #10291f;

    --neutral: #090a0c;
    --neutral-hover: #2c2e31;

    --overlay: rgba(0, 0, 0, .65);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, .55);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -20px rgba(0, 0, 0, .6);
    --bg-grid: rgba(255, 255, 255, .035);
}

/* ===================== 2. Metronic/Bootstrap -> token ===================== */

:root,
[data-bs-theme=light] {
    --bs-font-sans-serif: var(--font-sans);
    --bs-body-font-family: var(--font-sans);
    --bs-body-bg: var(--card-bg);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--text);
    --bs-body-color-rgb: 43, 35, 32;
    --bs-heading-color: var(--text);
    --bs-emphasis-color: var(--text);
    --bs-emphasis-color-rgb: 43, 35, 32;
    --bs-secondary-color: rgba(43, 35, 32, .75);
    --bs-tertiary-color: rgba(43, 35, 32, .5);
    --bs-secondary-bg: var(--neutral);
    --bs-tertiary-bg: var(--bg);
    --bs-app-bg-color: var(--bg);
    --bs-app-blank-bg-color: var(--bg);

    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-dashed-color: var(--border-strong);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--radius);
    --bs-border-radius-xl: 16px;
    --bs-border-radius-xxl: 20px;

    --bs-box-shadow-xs: var(--shadow-sm);
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow: 0 8px 24px rgba(43, 35, 32, .08);
    --bs-box-shadow-lg: var(--shadow-lg);
    --bs-root-card-border-color: var(--border);
    --bs-root-card-box-shadow: var(--shadow-sm);

    --bs-link-color: var(--primary);
    --bs-link-color-rgb: 249, 115, 22;
    --bs-link-hover-color: var(--primary-hover);
    --bs-link-hover-color-rgb: 234, 88, 12;
    --bs-focus-ring-color: var(--ring);
    --bs-highlight-bg: var(--primary-soft);
    --bs-code-bg: var(--neutral);
    --bs-code-color: var(--text);

    /* skala abu-abu hangat */
    --bs-gray-100: #faf8f7;
    --bs-gray-200: #f1eeee;
    --bs-gray-300: #e6dfda;
    --bs-gray-400: #cfc5bc;
    --bs-gray-500: #9a8f83;
    --bs-gray-600: #85796d;
    --bs-gray-700: #5e534a;
    --bs-gray-800: #3f3530;
    --bs-gray-900: #2b2320;
    --bs-gray-100-rgb: 250, 248, 247;
    --bs-gray-200-rgb: 241, 238, 238;
    --bs-gray-300-rgb: 230, 223, 218;
    --bs-gray-400-rgb: 207, 197, 188;
    --bs-gray-500-rgb: 154, 143, 131;
    --bs-gray-600-rgb: 133, 121, 109;
    --bs-gray-700-rgb: 94, 83, 74;
    --bs-gray-800-rgb: 63, 53, 48;
    --bs-gray-900-rgb: 43, 35, 32;
    --bs-gray: var(--bs-gray-600);
    --bs-gray-dark: var(--bs-gray-800);
    --bs-text-gray-100: var(--bs-gray-100);
    --bs-text-gray-200: var(--bs-gray-200);
    --bs-text-gray-300: var(--bs-gray-300);
    --bs-text-gray-400: var(--bs-gray-400);
    --bs-text-gray-500: var(--bs-gray-500);
    --bs-text-gray-600: var(--bs-gray-600);
    --bs-text-gray-700: var(--bs-gray-700);
    --bs-text-gray-800: var(--bs-gray-800);
    --bs-text-gray-900: var(--bs-gray-900);

    /* warna kontekstual: oranye satu-satunya warna brand; warning = primary (DESIGN.md §3.1) */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 249, 115, 22;
    --bs-primary-active: var(--primary-hover);
    --bs-primary-light: var(--primary-soft);
    --bs-primary-inverse: var(--on-primary);
    --bs-primary-clarity: rgba(249, 115, 22, .2);
    --bs-primary-bg-subtle: var(--primary-soft);
    --bs-primary-border-subtle: #fed7aa;
    --bs-primary-text-emphasis: #9a3412;

    --bs-warning: var(--primary);
    --bs-warning-rgb: 249, 115, 22;
    --bs-warning-active: var(--primary-hover);
    --bs-warning-light: var(--primary-soft);
    --bs-warning-inverse: var(--on-primary);
    --bs-warning-clarity: rgba(249, 115, 22, .2);
    --bs-warning-bg-subtle: var(--primary-soft);
    --bs-warning-border-subtle: #fed7aa;
    --bs-warning-text-emphasis: #9a3412;

    --bs-success: var(--success);
    --bs-success-rgb: 31, 169, 113;
    --bs-success-active: #198c5d;
    --bs-success-light: var(--success-soft);
    --bs-success-inverse: #ffffff;
    --bs-success-clarity: rgba(31, 169, 113, .2);
    --bs-success-bg-subtle: var(--success-soft);
    --bs-success-border-subtle: #bfeedb;
    --bs-success-text-emphasis: #0f5c3d;

    --bs-danger: var(--danger);
    --bs-danger-rgb: 229, 72, 77;
    --bs-danger-active: #d13a3f;
    --bs-danger-light: var(--danger-soft);
    --bs-danger-inverse: #ffffff;
    --bs-danger-clarity: rgba(229, 72, 77, .2);
    --bs-danger-bg-subtle: var(--danger-soft);
    --bs-danger-border-subtle: #f7c2c4;
    --bs-danger-text-emphasis: #8f2226;

    /* info tidak ada di DESIGN.md -> netral hangat */
    --bs-info: #7a6a5d;
    --bs-info-rgb: 122, 106, 93;
    --bs-info-active: #65574c;
    --bs-info-light: var(--neutral);
    --bs-info-inverse: #ffffff;
    --bs-info-clarity: rgba(122, 106, 93, .2);
    --bs-info-bg-subtle: var(--neutral);
    --bs-info-border-subtle: var(--border-strong);
    --bs-info-text-emphasis: var(--text);

    --bs-secondary: var(--neutral);
    --bs-secondary-rgb: 241, 238, 238;
    --bs-secondary-active: var(--neutral-hover);
    --bs-secondary-light: var(--neutral);
    --bs-secondary-inverse: var(--text);

    --bs-light: var(--neutral);
    --bs-light-rgb: 241, 238, 238;
    --bs-light-active: var(--neutral-hover);
    --bs-light-light: var(--bg);
    --bs-light-inverse: var(--text);
    --bs-light-bg-subtle: var(--bg);
    --bs-light-border-subtle: var(--border);
    --bs-light-text-emphasis: var(--text);

    --bs-dark: var(--text);
    --bs-dark-rgb: 43, 35, 32;
    --bs-dark-active: #3f3530;
    --bs-dark-light: var(--neutral);
    --bs-dark-inverse: #ffffff;

    /* dipakai .text-active-*, .text-hover-* dll. */
    --bs-text-primary: var(--primary);
    --bs-text-warning: var(--primary);
    --bs-text-success: var(--success);
    --bs-text-danger: var(--danger);
    --bs-text-info: var(--bs-info);
    --bs-text-dark: var(--text);
    --bs-text-secondary: var(--bs-gray-600);
    --bs-text-light: var(--bs-gray-100);
    --bs-secondary-bg-rgb: 241, 238, 238;
    --bs-highlight-color: var(--text);

    --bs-component-active-bg: var(--primary);
    --bs-component-active-color: var(--on-primary);
    --bs-component-checked-bg: var(--primary);
    --bs-component-checked-color: var(--on-primary);
    --bs-component-hover-bg: var(--hover);
    --bs-component-hover-color: var(--primary);

    --bs-input-bg: var(--card-bg);
    --bs-input-color: var(--text);
    --bs-input-solid-bg: var(--card-bg);
    --bs-input-solid-bg-focus: var(--card-bg);
    --bs-input-solid-color: var(--text);
    --bs-input-solid-placeholder-color: var(--muted);

    --bs-menu-dropdown-bg-color: var(--card-bg);
    --bs-menu-dropdown-box-shadow: var(--shadow-lg);
    --bs-menu-heading-color: var(--muted);
    --bs-menu-link-color-hover: var(--primary);
    --bs-menu-link-color-show: var(--primary);
    --bs-menu-link-color-here: var(--primary);
    --bs-menu-link-color-active: var(--primary);
    --bs-menu-link-bg-color-hover: var(--hover);
    --bs-menu-link-bg-color-show: var(--hover);
    --bs-menu-link-bg-color-here: var(--hover);
    --bs-menu-link-bg-color-active: var(--primary-soft);
    --bs-dropdown-bg: var(--card-bg);
    --bs-dropdown-box-shadow: var(--shadow-lg);
    --bs-tooltip-box-shadow: var(--shadow-lg);

    --bs-symbol-label-bg: var(--neutral);
    --bs-symbol-label-color: var(--text);
    --bs-symbol-border-color: var(--card-bg);
    --bs-scrollbar-color: var(--border-strong);
    --bs-scrollbar-hover-color: var(--bs-gray-400);
    --bs-table-striped-bg: var(--hover);
    --bs-bullet-bg-color: var(--bs-gray-400);
    --bs-app-toolbar-base-bg-color: transparent;
    --bs-app-footer-bg-color: transparent;
    --bs-app-footer-border-top: 1px solid var(--border);
}

[data-bs-theme=dark] {
    --bs-body-bg-rgb: 21, 23, 28;
    --bs-body-color-rgb: 240, 230, 220;
    --bs-emphasis-color-rgb: 240, 230, 220;
    --bs-secondary-color: rgba(240, 230, 220, .75);
    --bs-tertiary-color: rgba(240, 230, 220, .5);

    --bs-box-shadow: 0 8px 24px rgba(0, 0, 0, .35);

    --bs-gray-100: #1c1e23;
    --bs-gray-200: #2f2a28;
    --bs-gray-300: #3a3532;
    --bs-gray-400: #4d4641;
    --bs-gray-500: #7d6f63;
    --bs-gray-600: #a3907f;
    --bs-gray-700: #c4b2a2;
    --bs-gray-800: #e0d3c7;
    --bs-gray-900: #f0e6dc;
    --bs-gray-100-rgb: 28, 30, 35;
    --bs-gray-200-rgb: 47, 42, 40;
    --bs-gray-300-rgb: 58, 53, 50;
    --bs-gray-400-rgb: 77, 70, 65;
    --bs-gray-500-rgb: 125, 111, 99;
    --bs-gray-600-rgb: 163, 144, 127;
    --bs-gray-700-rgb: 196, 178, 162;
    --bs-gray-800-rgb: 224, 211, 199;
    --bs-gray-900-rgb: 240, 230, 220;

    --bs-primary-clarity: rgba(249, 115, 22, .25);
    --bs-primary-border-subtle: #7c3a12;
    --bs-primary-text-emphasis: #fdba74;
    --bs-warning-border-subtle: #7c3a12;
    --bs-warning-text-emphasis: #fdba74;

    --bs-success-rgb: 61, 214, 140;
    --bs-success-active: #2fbf79;
    --bs-success-border-subtle: #1d5a3f;
    --bs-success-text-emphasis: #8be8ba;

    --bs-danger-rgb: 255, 99, 105;
    --bs-danger-active: #ff7f84;
    --bs-danger-border-subtle: #6b2a2d;
    --bs-danger-text-emphasis: #ffa3a6;

    --bs-info: #b39684;
    --bs-info-rgb: 179, 150, 132;
    --bs-info-active: #c4a895;

    --bs-secondary-rgb: 9, 10, 12;
    --bs-light-rgb: 9, 10, 12;
    --bs-dark: #f0e6dc;
    --bs-dark-rgb: 240, 230, 220;
    --bs-dark-active: #e0d3c7;
    --bs-dark-inverse: #15171c;
}

/* ===================== 3. Dasar ===================== */

html,
body {
    font-family: var(--font-sans);
}

body {
    color: var(--text);
    transition: background-color var(--speed) ease, color var(--speed) ease;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -.01em;
}

::selection {
    background: var(--primary-soft);
    color: var(--text);
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    border-radius: 4px;
}

/* ===================== 4. Lebar konten, header halaman & footer ===================== */

/* tanpa sidebar konten jadi terlalu lebar: dibatasi & diberi jarak tepi; top bar ikut lebar yang sama */
:root {
    --content-max: 1360px;
    --content-gutter: clamp(16px, 3.5vw, 48px);
}

.app-container {
    width: 100%;
    max-width: calc(var(--content-max) + var(--content-gutter) * 2);
    margin-inline: auto;
    padding-left: var(--content-gutter) !important;
    padding-right: var(--content-gutter) !important;
}

/*
 * latar atas halaman: cahaya brand + grid samar di bawah top bar.
 * Diletakkan di z-index -1 (di belakang konten) — .app-main sengaja TANPA z-index: stacking context
 * di sana mengurung modal di bawah .modal-backdrop (yang ditempel ke body), modal jadi tidak bisa diklik.
 */
.app-wrapper {
    position: relative;
}

.app-wrapper::before {
    content: "";
    position: absolute;
    /* naik setinggi header fixed: cahaya & grid ikut terlihat samar di balik top bar yang transparan */
    inset: calc(-1 * var(--bs-app-header-height, 0px)) 0 auto;
    z-index: -1;
    height: calc(380px + var(--bs-app-header-height, 0px));
    pointer-events: none;
    background:
        radial-gradient(55% 90% at 50% 0%, rgba(249, 115, 22, .06), transparent 70%),
        linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0 / 36px 36px,
        linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0 / 36px 36px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .85), transparent);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .85), transparent);
}

/* header halaman (layouts/components/tool-bar.blade.php) */
.app-toolbar.ct-page-head {
    padding: 32px 0 24px;
}

.ct-page-head-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.ct-page-head-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    /* backwards, bukan both: animasi transform yang "fill forwards" membuat elemen jadi stacking context
       permanen (seperti will-change), modal di dalamnya terkurung di bawah backdrop */
    animation: ct-page-in .45s ease backwards;
}

.ct-page-icon {
    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(135deg, #FFB31A 0%, var(--primary) 55%, var(--primary-hover) 100%);
    box-shadow: 0 10px 20px -16px rgba(234, 88, 12, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
    isolation: isolate;
}

/* tekstur panel fitur mega menu: grid halus + cahaya mengambang */
.ct-page-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 10px 10px;
    -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 75%);
    mask-image: linear-gradient(160deg, #000 10%, transparent 75%);
}

.ct-page-icon::after {
    content: "";
    position: absolute;
    top: -26px;
    right: -26px;
    z-index: -1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 68%);
    animation: ct-float 7s ease-in-out infinite;
}

.ct-page-icon i {
    font-size: 26px;
    color: #fff;
}

.ct-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.ct-crumbs a {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    transition: color .15s ease;
}

.ct-crumbs a:hover {
    color: var(--primary);
}

.ct-crumbs a:last-child {
    color: var(--text);
}

.ct-crumbs i {
    font-size: 14px;
    color: inherit;
}

.ct-crumbs-sep {
    color: var(--bs-gray-400);
}

.ct-page-head h1.page-heading {
    margin: 0;
    font-size: 28px !important;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--text) !important;
}

.ct-page-desc {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.ct-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    animation: ct-page-in .45s ease .08s backwards;
}

.ct-page-actions:empty {
    display: none;
}

/* margin bawaan tombol (me-2 dll.) diganti gap */
.ct-page-actions > .btn {
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    .app-toolbar.ct-page-head {
        padding: 20px 0 16px;
    }

    .ct-page-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .ct-page-icon i {
        font-size: 21px;
    }

    .ct-page-head h1.page-heading {
        font-size: 21px !important;
    }

    .ct-page-actions {
        width: 100%;
    }
}

@keyframes ct-page-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.app-footer {
    font-size: 13px;
}

.ct-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 18px 0 22px;
    color: var(--muted);
}

.ct-footer-meta-left {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.ct-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text);
}

.ct-footer-brand img {
    width: 20px;
    height: 20px;
}

.ct-footer-name > span {
    color: var(--primary);
}

.ct-footer-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.ct-footer-meta::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
}

/* tombol kembali ke atas = tombol aksi utama */
.scrolltop {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--primary);
    box-shadow: 0 8px 18px -12px rgba(15, 23, 42, .35);
    opacity: .92;
}

.scrolltop:hover {
    background: var(--primary-hover);
    opacity: 1;
}

.scrolltop i {
    color: #fff !important;
}

/* ===================== 5. Card ===================== */

/* card: sudut lebih bulat, bayangan lembut, header tanpa garis (dipisah jarak, bukan border) */
.card {
    --bs-card-bg: var(--card-bg);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-box-shadow: var(--shadow-card);
    --bs-card-title-color: var(--text);
    --bs-card-cap-bg: transparent;
    transition: background-color var(--speed) ease, border-color var(--speed) ease;
}

.card .card-header {
    min-height: 0;
    padding: 22px 24px 0;
    border-bottom: 0;
}

.card.card-flush > .card-header {
    padding-top: 22px !important;
}

/* header berisi tab yang menempel ke garis tetap pakai border */
.card .card-header:has(.nav-stretch),
.card .card-header.border-bottom {
    padding-top: 0;
    border-bottom: 1px solid var(--border) !important;
}

.card .card-body {
    padding: 20px 24px 24px;
}

.card .card-footer {
    padding: 16px 24px;
}

.card .card-header .card-title,
.card .card-header .card-title .card-label {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}

/* judul + keterangan kecil (pola Metronic: .card-label + span.text-gray-500) */
.card .card-header .card-title.flex-column > span:not(.card-label) {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    color: var(--muted) !important;
}

/* judul card-label diberi aksen garis gradasi di kiri (menutupi judul + keterangan) */
.card .card-header .card-title:has(> .card-label) {
    position: relative;
    padding-left: 15px;
}

.card .card-header .card-title:has(> .card-label)::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 4px;
    border-radius: 4px;
    background: var(--primary);
}

@media (max-width: 767.98px) {
    .card .card-header {
        padding: 16px 16px 0;
    }

    .card .card-body {
        padding: 16px;
    }
}

/* ===================== 6. Button (DESIGN.md §7.1) ===================== */

.btn {
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--radius);
    font-family: inherit;
    letter-spacing: 0;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-group-sm > .btn,
.btn-sm {
    --bs-btn-font-size: 13px;
    --bs-btn-border-radius: var(--radius);
}

.btn-group-lg > .btn,
.btn-lg {
    --bs-btn-font-size: 15px;
    --bs-btn-border-radius: var(--radius);
}

/* aksi selain primary dibuat lembut: hanya aksi utama yang solid */
.btn.btn-danger,
.btn.btn-success,
.btn.btn-info,
.btn.btn-warning {
    border-color: transparent;
}

.btn.btn-danger {
    color: var(--danger);
    background-color: var(--danger-soft);
}

.btn.btn-success {
    color: var(--success);
    background-color: var(--success-soft);
}

.btn.btn-info {
    color: var(--text);
    background-color: var(--neutral);
}

.btn.btn-warning {
    color: var(--primary);
    background-color: var(--primary-soft);
}

.btn.btn-danger i, .btn.btn-danger .svg-icon { color: var(--danger); }
.btn.btn-success i, .btn.btn-success .svg-icon { color: var(--success); }
.btn.btn-info i, .btn.btn-info .svg-icon { color: var(--text); }
.btn.btn-warning i, .btn.btn-warning .svg-icon { color: var(--primary); }

.btn-check:checked + .btn.btn-danger, .btn.btn-danger.active, .btn.btn-danger.show,
.btn.btn-danger:active:not(.btn-active), .btn.btn-danger:focus:not(.btn-active), .btn.btn-danger:hover:not(.btn-active) {
    color: var(--danger);
    background-color: var(--danger-soft-hover) !important;
}

.btn-check:checked + .btn.btn-success, .btn.btn-success.active, .btn.btn-success.show,
.btn.btn-success:active:not(.btn-active), .btn.btn-success:focus:not(.btn-active), .btn.btn-success:hover:not(.btn-active) {
    color: var(--success);
    background-color: color-mix(in srgb, var(--success) 14%, var(--success-soft)) !important;
}

.btn-check:checked + .btn.btn-info, .btn.btn-info.active, .btn.btn-info.show,
.btn.btn-info:active:not(.btn-active), .btn.btn-info:focus:not(.btn-active), .btn.btn-info:hover:not(.btn-active),
.btn-check:checked + .btn.btn-light, .btn.btn-light.active, .btn.btn-light.show,
.btn.btn-light:active:not(.btn-active), .btn.btn-light:focus:not(.btn-active), .btn.btn-light:hover:not(.btn-active),
.btn-check:checked + .btn.btn-secondary, .btn.btn-secondary.active, .btn.btn-secondary.show,
.btn.btn-secondary:active:not(.btn-active), .btn.btn-secondary:focus:not(.btn-active), .btn.btn-secondary:hover:not(.btn-active) {
    color: var(--text);
    background-color: var(--neutral-hover) !important;
}

.btn-check:checked + .btn.btn-warning, .btn.btn-warning.active, .btn.btn-warning.show,
.btn.btn-warning:active:not(.btn-active), .btn.btn-warning:focus:not(.btn-active), .btn.btn-warning:hover:not(.btn-active) {
    color: var(--on-primary);
    background-color: var(--primary) !important;
}

.btn.btn-success:hover i, .btn.btn-danger:hover i, .btn.btn-info:hover i { color: inherit; }
.btn.btn-warning:hover i { color: var(--on-primary); }

/* aksi utama: warna brand solid, sedikit terangkat */
.btn.btn-primary {
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: background-color .2s ease, box-shadow .2s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}

.btn.btn-primary:hover:not(.btn-active) {
    box-shadow: 0 8px 16px -12px rgba(15, 23, 42, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
    transform: translateY(-1px);
}

.btn.btn-primary:active:not(.btn-active) {
    transform: translateY(0) scale(.98);
}

.btn.btn-icon {
    border-radius: 11px;
}

.btn.btn-primary:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px;
}

/* ===================== 7. Form (DESIGN.md §7.11) ===================== */

.form-control,
.form-select,
.form-control.form-control-solid,
.form-select.form-select-solid {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    background-color: var(--card-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color .15s ease, box-shadow .15s ease, background-color var(--speed) ease;
}

.form-control.form-control-sm,
.form-select.form-select-sm {
    font-size: 13px;
}

.form-control::placeholder,
.form-control.form-control-solid::placeholder {
    color: var(--muted);
    font-weight: 400;
}

.form-control:focus,
.form-select:focus,
.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus,
.dropdown.show > .form-control.form-control-solid,
.select2-container--bootstrap5.select2-container--focus .form-select,
.select2-container--bootstrap5.select2-container--open .form-select,
.select2-container--bootstrap5.select2-container--focus:not(.select2-container--disabled) .form-select-solid,
.select2-container--bootstrap5.select2-container--open:not(.select2-container--disabled) .form-select-solid {
    color: var(--text);
    background-color: var(--card-bg);
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--ring) !important;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly].form-control-solid {
    color: var(--muted);
    background-color: var(--bg);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger) !important;
}

.invalid-feedback,
.fv-plugins-message-container .invalid-feedback {
    font-size: 12px;
    color: var(--danger);
}

.form-text {
    font-size: 12px;
    color: var(--muted);
}

.form-label,
.col-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.form-label.required::after,
.required::after {
    color: var(--danger);
}

.input-group-text {
    color: var(--muted);
    background-color: var(--neutral);
    border-color: var(--border-strong);
}

.form-check-input {
    border-color: var(--border-strong);
    background-color: var(--card-bg);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
}

.form-check-custom.form-check-solid .form-check-input:not(:checked) {
    background-color: var(--neutral);
}

/* ===================== 8. Select2 ===================== */

.select2-container--bootstrap5 .select2-dropdown {
    padding: 6px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card-bg);
    box-shadow: var(--shadow-lg);
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option {
    margin: 0 6px;
    border-radius: 6px;
    color: var(--text);
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    color: var(--text);
    background-color: var(--hover);
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected {
    color: var(--primary);
    background-color: var(--primary-soft);
}

.select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field {
    border-color: var(--border-strong);
    border-radius: var(--radius);
}

.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice {
    color: var(--text);
    background-color: var(--neutral);
    border-radius: 999px;
}

/* ===================== 9. Tabel & DataTables (DESIGN.md §7.4) ===================== */

.table {
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--hover);
    --bs-table-striped-bg: var(--hover);
}

/* :not(.table-bordered) menyamai spesifisitas Metronic (.table:not(.table-bordered) th { font-size: inherit; ... }) */
.table > thead > tr > th,
.table > thead > tr > td,
.table:not(.table-bordered) > thead > tr > th,
.table:not(.table-bordered) > thead > tr > td {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}

/* header tabel jadi baris pill berlatar tipis */
.table:not(.table-bordered) > thead > tr {
    border-bottom: 0 !important;
}

.table:not(.table-bordered) > thead > tr > th {
    background-color: var(--bg);
    border-bottom: 0;
}

.table:not(.table-bordered) > thead > tr > th:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.table:not(.table-bordered) > thead > tr > th:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Metronic menghapus padding sel pertama/terakhir; dengan latar header perlu jarak lagi */
.table:not(.table-bordered) > :not(caption) > tr > :first-child {
    padding-left: 14px;
}

.table:not(.table-bordered) > :not(caption) > tr > :last-child {
    padding-right: 14px;
}

.table > tbody > tr {
    transition: background-color .15s ease;
}

.table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--hover);
}

/* tabel bergaris (table-striped / border table-rounded) dibuat polos seperti tabel lain */
.table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
}

.table.table-rounded.border {
    border-color: var(--border) !important;
    border-radius: var(--radius-lg);
}

.table.table-row-dashed tr,
.table.table-row-dashed tbody tr {
    border-bottom-style: solid;
    border-bottom-color: var(--border);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
    font-size: 13px;
    color: var(--muted);
}

/* kotak cari DataTables: ikon kaca pembesar, label "Search:" disembunyikan */
div.dataTables_wrapper div.dataTables_filter label {
    font-size: 0;
}

div.dataTables_wrapper div.dataTables_filter input {
    width: 260px;
    margin-left: 0;
    padding-left: 38px;
    font-size: 14px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a8f83' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px;
}

@media (max-width: 767.98px) {
    div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
    }
}

.dataTables_wrapper td.dataTables_empty {
    padding: 40px 14px !important;
    color: var(--muted);
}

/* indikator "Processing" jadi kapsul kaca */
div.dataTables_wrapper div.dataTables_processing {
    top: 64px !important;
    padding: .75rem 1.4rem !important;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--ct-surface, var(--card-bg));
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--ct-shadow, var(--shadow-lg));
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

div.dataTables_wrapper div.dataTables_length select {
    border-radius: 999px;
}

.pagination {
    --bs-pagination-color: var(--text);
    --bs-pagination-hover-color: var(--primary);
    --bs-pagination-hover-bg: var(--hover);
    --bs-pagination-active-color: var(--on-primary);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-border-radius: var(--radius);
}

.page-item .page-link {
    min-width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    transition: color .15s ease, background-color .15s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}

.page-item:not(.active):not(.disabled) .page-link:hover {
    transform: translateY(-1px);
}

.page-item.active .page-link {
    background: var(--primary);
    box-shadow: none;
}

/* ===================== 10. Badge (DESIGN.md §7.5) ===================== */

.badge {
    --bs-badge-border-radius: 999px;
    --bs-badge-font-size: 12px;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: 10px;
    --bs-badge-padding-y: 4px;
}

/* badge selalu lembut: warna teks di atas latar tipis */
.badge.badge-success { color: var(--success); background-color: var(--success-soft); }
.badge.badge-danger { color: var(--danger); background-color: var(--danger-soft); }
.badge.badge-warning,
.badge.badge-primary { color: var(--primary); background-color: var(--primary-soft); }
.badge.badge-info,
.badge.badge-secondary,
.badge.badge-light { color: var(--text); background-color: var(--neutral); }

/* ===================== 11. Tab & nav ===================== */

.nav-line-tabs .nav-item .nav-link {
    font-weight: 600;
    color: var(--muted);
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled),
.nav-line-tabs .nav-item.show .nav-link {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.nav-line-tabs.nav-line-tabs-2x .nav-item .nav-link.active,
.nav-line-tabs.nav-line-tabs-2x .nav-item .nav-link:hover:not(.disabled) {
    border-bottom-width: 2px;
}

.nav-pills .nav-link {
    border-radius: var(--radius);
}

/* ===================== 12. Modal, dropdown, tooltip ===================== */

.modal {
    --bs-modal-bg: var(--card-bg);
    --bs-modal-color: var(--text);
    --bs-modal-border-radius: 24px;
    --bs-modal-inner-border-radius: 23px;
    --bs-modal-box-shadow: var(--shadow-lg);
    --bs-modal-header-border-color: var(--border);
    --bs-modal-footer-border-color: var(--border);
    --bs-modal-padding: 24px;
}

.modal-content {
    position: relative;
    border: 1px solid var(--border);
    box-shadow: var(--ct-shadow, var(--shadow-lg));
}

/* garis gradasi logo di tepi atas modal, seperti top bar */
.modal-content::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 28px;
    right: 28px;
    z-index: 1;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #FFB31A, var(--primary), var(--primary-hover), var(--primary), #FFB31A);
    background-size: 200% 100%;
    animation: ct-shimmer 8s linear infinite;
    pointer-events: none;
}

.modal-header {
    padding: 22px 24px 18px;
}

.modal-header .modal-title,
.modal-header h2,
.modal-header h3,
.modal-header > .fs-2,
.modal-header > div > .fs-2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}

/* tombol tutup modal = tombol aksi top bar */
.modal-header > .btn.btn-icon[data-bs-dismiss],
.modal-header > div > .btn.btn-icon[data-bs-dismiss] {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--muted);
    transition: color .2s ease, border-color .2s ease;
}

.modal-header > .btn.btn-icon[data-bs-dismiss]:hover,
.modal-header > div > .btn.btn-icon[data-bs-dismiss]:hover {
    color: var(--primary);
    border-color: rgba(255, 106, 26, .35);
}

.modal-header > .btn.btn-icon[data-bs-dismiss] i,
.modal-header > div > .btn.btn-icon[data-bs-dismiss] i {
    font-size: 18px !important;
    color: inherit;
}

.modal-footer {
    padding: 16px 24px 20px;
}

.modal-backdrop {
    --bs-backdrop-bg: rgb(20, 14, 8);
    --bs-backdrop-opacity: .5;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

[data-bs-theme=dark] .modal-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: .65;
}

/* buka: fade + naik/membesar dengan easing top bar */
.modal.fade .modal-dialog {
    transform: translateY(14px) scale(.97);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.modal.show .modal-dialog {
    transform: none;
}

.menu-sub-dropdown,
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--ct-shadow, var(--shadow-lg));
}

.menu-sub-dropdown .menu-item .menu-link,
.dropdown-menu .dropdown-item {
    border-radius: 10px;
}

.dropdown-menu {
    --bs-dropdown-bg: var(--card-bg);
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--hover);
    --bs-dropdown-link-active-bg: var(--primary-soft);
    --bs-dropdown-link-active-color: var(--primary);
}

.tooltip {
    --bs-tooltip-bg: var(--text);
    --bs-tooltip-color: var(--card-bg);
    --bs-tooltip-border-radius: 8px;
    --bs-tooltip-font-size: 12px;
}

.popover {
    --bs-popover-border-radius: var(--radius);
    --bs-popover-border-color: var(--border);
    --bs-popover-box-shadow: var(--shadow-lg);
}

/* ===================== 13. Alert & notice (DESIGN.md §7.12) ===================== */

.alert {
    --bs-alert-border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--bs-alert-color) 18%, transparent);
    font-size: 14px;
}

.alert-success { --bs-alert-color: var(--success); --bs-alert-bg: var(--success-soft); }
.alert-danger { --bs-alert-color: var(--danger); --bs-alert-bg: var(--danger-soft); }
.alert-warning,
.alert-primary { --bs-alert-color: var(--primary-hover); --bs-alert-bg: var(--primary-soft); }
.alert-info,
.alert-secondary,
.alert-light { --bs-alert-color: var(--text); --bs-alert-bg: var(--neutral); }

.notice {
    border-radius: var(--radius-lg) !important;
}

/* ===================== 14. Ikon kecil & simbol ===================== */

.symbol .symbol-label,
.symbol > img {
    border-radius: var(--radius);
}

.symbol.symbol-circle .symbol-label,
.symbol.symbol-circle > img {
    border-radius: 50%;
}

/* avatar tanpa foto: tile tint brand + ikon (mis. tipe customer) */
.symbol .symbol-label.ct-avatar-tile {
    border-radius: 14px;
    background: var(--primary-soft);
}

.symbol .symbol-label.ct-avatar-tile i {
    font-size: 22px;
    color: var(--primary-ink);
}

.separator {
    border-bottom-color: var(--border);
}

/* ===================== 15. FullCalendar ===================== */

.fc {
    --fc-today-bg-color: var(--primary-soft);
    --fc-border-color: var(--border);
    --fc-page-bg-color: var(--card-bg);
    --fc-neutral-bg-color: var(--bg);
}

.fc .fc-toolbar-title {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* grup tombol kalender = kapsul + pill seperti menu top bar */
.fc .fc-button-group {
    gap: .15rem;
    padding: .25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--ct-capsule, var(--bg));
}

.fc .fc-button-group > .fc-button.fc-button-primary,
.fc .fc-today-button.fc-button-primary {
    padding: .45rem .95rem;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted) !important;
    transition: color .2s ease, background-color .2s ease, box-shadow .25s ease;
}

.fc .fc-button-group > .fc-button.fc-button-primary:hover,
.fc .fc-today-button.fc-button-primary:not(:disabled):hover {
    color: var(--text) !important;
}

.fc .fc-button-group > .fc-button.fc-button-primary.fc-button-active {
    background: var(--ct-pill, var(--card-bg)) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px -6px rgba(15, 23, 42, .18) !important;
    color: var(--text) !important;
}

.fc .fc-today-button.fc-button-primary {
    border: 1px solid var(--border) !important;
}

.fc .fc-scrollgrid {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

/* ===================== 16. SweetAlert2 & toastr ===================== */

.swal2-container.swal2-backdrop-show {
    background: var(--overlay) !important;
}

.swal2-popup {
    padding: 24px !important;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--card-bg) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg);
}

.swal2-popup .swal2-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.swal2-popup .swal2-html-container {
    font-size: 14px;
    color: var(--muted);
}

.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    font-size: 14px;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: none;
}

.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
}

.swal2-popup .swal2-styled {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}

/* warna tombol dari halaman (confirmButtonColor) disatukan: aksi utama oranye, hapus = merah lembut */
.swal2-popup .swal2-styled.swal2-confirm {
    color: var(--on-primary) !important;
    background: var(--primary) !important;
}

.swal2-popup .swal2-styled.swal2-confirm:hover {
    background: var(--primary-hover) !important;
}

.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(221, 107, 85)"],
.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(241, 65, 108)"],
.swal2-popup .swal2-styled.swal2-deny {
    color: var(--danger) !important;
    background: var(--danger-soft) !important;
}

.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(221, 107, 85)"]:hover,
.swal2-popup .swal2-styled.swal2-confirm[style*="rgb(241, 65, 108)"]:hover,
.swal2-popup .swal2-styled.swal2-deny:hover {
    background: var(--danger-soft-hover) !important;
}

.swal2-popup .swal2-styled.swal2-cancel {
    color: var(--text) !important;
    background: var(--neutral) !important;
}

.swal2-popup .swal2-styled.swal2-cancel:hover {
    background: var(--neutral-hover) !important;
}

.swal2-icon.swal2-warning,
.swal2-icon.swal2-question,
.swal2-icon.swal2-info {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.swal2-icon.swal2-error {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: var(--danger) !important;
}

.swal2-icon.swal2-success {
    color: var(--success) !important;
    border-color: var(--success) !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--success) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(31, 169, 113, .3) !important;
}

#toast-container > div,
.toastr {
    font-family: var(--font-sans);
    font-size: 14px;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    opacity: 1;
}

/* ===================== 17. Gerak ===================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}