@import url("base.css");
@import url("layout.css");
@import url("components.css");
@import url("pages.css");
@import url("utils.css");

/* Header tabel nempel di atas saat scroll dalam card */
.table-container {
    max-height: 68vh;
    /* biar tabel enak discroll */
    overflow: auto;
}

.table-sticky th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Zebra + hover lembut */
.table-zebra tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, .015);
}

.table-zebra tbody tr:hover {
    background-color: rgba(0, 0, 0, .04);
}

/* Sudut halus untuk tabel agar menyatu dengan card */
.table thead:first-child tr:first-child th:first-child {
    border-top-left-radius: .6rem;
}

.table thead:first-child tr:first-child th:last-child {
    border-top-right-radius: .6rem;
}

.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: .6rem;
}

.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: .6rem;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table thead th {
    background: var(--bs-body-bg);
}

/* Indikator arah panah saat expand */
.sidebar-collapsible.is-active .sidebar-collapsible__icon {
    transform: rotate(90deg);
    transition: transform .2s ease;
}

.sidebar-collapsible__icon {
    transition: transform .2s ease;
}

/* Hover & active yang lebih jelas */
.sidebar-nav>a,
.sidebar-collapsible__content>a {
    border-radius: .5rem;
    padding: .5rem .75rem;
}

.sidebar-nav>a.active,
.sidebar-collapsible__content>a.active {
    background: var(--bs-primary-bg-subtle, rgba(13, 110, 253, .08));
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
}

/* Footer user menu popover */
.user-settings-menu {
    margin-top: .5rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    padding: .5rem;
}

/* Dark mode (opsional, sederhana) */
:root.dark .sidebar,
:root.dark .user-settings-menu {
    background: #0f172a;
    color: #e2e8f0;
}

:root.dark .sidebar a {
    color: #cbd5e1;
}

:root.dark .sidebar a.active {
    color: #60a5fa;
    background: rgba(96, 165, 250, .12);
}

/* === NORMALISASI SIDEBAR === */
:root {
    --sb-font-size: 14px;
    /* ukuran teks item */
    --sb-icon-size: 18px;
    /* ukuran ikon kiri */
    --sb-chevron-size: 16px;
    /* ukuran chevron kanan */
    --sb-radius: 12px;
    /* sudut item */
    --sb-gap: 10px;
    /* jarak ikon-teks */
    --sb-py: 8px;
    /* padding vertikal item */
    --sb-px: 12px;
    /* padding horizontal item */
}

/* baris & ritme yang konsisten */
.sidebar-nav>a,
.sidebar-collapsible__toggle,
.sidebar-collapsible__content>a {
    display: flex;
    align-items: center;
    gap: var(--sb-gap);
    font-size: var(--sb-font-size);
    line-height: 1.3;
    padding: var(--sb-py) var(--sb-px);
    border-radius: var(--sb-radius);
}

/* jarak antar item */
.sidebar-nav>*+*,
.sidebar-collapsible+.sidebar-collapsible {
    margin-top: 6px;
}

/* ukuran ikon kiri diseragamkan */
.sidebar .sidebar-nav__icon,
.sidebar [data-lucide]:not(.sidebar-collapsible__icon) {
    width: var(--sb-icon-size);
    height: var(--sb-icon-size);
    flex: 0 0 auto;
}

/* chevron di kanan & ukurannya konsisten */
.sidebar .sidebar-collapsible__icon {
    margin-left: auto;
    width: var(--sb-chevron-size);
    height: var(--sb-chevron-size);
    opacity: .7;
    transition: transform .2s ease;
}

.sidebar-collapsible.is-active .sidebar-collapsible__icon {
    transform: rotate(90deg);
}

/* gaya active yang jelas, tapi tidak membuat tinggi berubah */
.sidebar-nav>a.active,
.sidebar-collapsible__toggle.active {
    background: rgba(13, 110, 253, .08);
    /* bs-primary-subtle */
    color: #0d6efd;
    font-weight: 600;
    border: 1px solid rgba(13, 110, 253, .25);
}

/* ikon tidak “berat” berbeda (seragam stroke) */
.sidebar [data-lucide] {
    stroke-width: 1.75;
}

/* kompensasi untuk ikon yang secara optik lebih tinggi/rendah */
.sidebar [data-lucide="database"],
.sidebar [data-lucide="file-text"] {
    margin-top: 1px;
    /* kecilkan kalau terasa turun/naik boleh ubah 1–2px */
}

/* menu user di footer tetap ukuran yang sama */
.sidebar-user-button {
    font-size: var(--sb-font-size);
    padding: var(--sb-py) var(--sb-px);
    border-radius: var(--sb-radius);
}

.sidebar .user-settings-icon {
    width: var(--sb-icon-size);
    height: var(--sb-icon-size);
}