:root {
    --brand: #1f6feb;
    --brand-strong: #0ea5e9;
    --brand-warm: #f59e0b;
    --surface: #0f172a;
    --panel: #0b1220;
    --panel-alt: #111a2f;
    --muted: #9fb3ce;
    --border: rgba(255,255,255,0.08);
    --shadow-soft: 0 14px 32px rgba(0,0,0,0.35);
    --radius-lg: 18px;
}

body.admin-layout,
body.pimpinan-layout,
body.personel-layout {
    background: radial-gradient(circle at 12% 18%, rgba(31,111,235,0.18), transparent 30%),
                radial-gradient(circle at 82% 8%, rgba(245,158,11,0.14), transparent 26%),
                linear-gradient(135deg, #0f172a, #11182c 55%, #0c1223);
    color: #e9edf5;
}

.card,
.table-card,
.stat-card,
.personel-card,
.info-banner,
.alert,
.profile-card {
    background: var(--panel-alt) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-soft) !important;
    color: #e9edf5;
}

.card-header,
.table-card .card-header {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid var(--border) !important;
    color: #fff;
}

.navbar-admin {
    background: linear-gradient(120deg, #0b1220, #0f172a 55%, #0b1220) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow-soft) !important;
}

.sidebar-admin {
    background: linear-gradient(180deg, #0d1424, #0b1220) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: 8px 0 22px rgba(0,0,0,0.35) !important;
    width: 260px !important;
    flex-shrink: 0;
    padding: 24px 16px !important;
}

.sidebar-admin {
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
    align-self: flex-start;
}

.personel-layout .sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    align-self: flex-start;
}

.sidebar-admin a {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid transparent !important;
    color: #e9edf5 !important;
    font-weight: 600;
    transition: all 0.2s ease;
    min-height: 52px;
    display: flex;
    align-items: center;
}

.sidebar-admin a:hover,
.sidebar-admin a.active {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    color: #0b1220 !important;
    box-shadow: 0 12px 22px rgba(14,165,233,0.35);
    border-color: transparent !important;
}

.btn-primary,
.btn-SIAP,
.btn-login {
    background: linear-gradient(120deg, var(--brand), var(--brand-strong)) !important;
    border: none !important;
    color: #0b1220 !important;
    font-weight: 700;
    box-shadow: 0 12px 26px rgba(31,111,235,0.35) !important;
}

.btn-primary:hover,
.btn-SIAP:hover,
.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(14,165,233,0.45) !important;
}

.btn-outline-secondary,
.btn-outline-light {
    border-color: rgba(255,255,255,0.2) !important;
    color: #e9edf5 !important;
    background: transparent !important;
}

.form-control,
select.form-control,
textarea.form-control {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #e9edf5 !important;
    border-radius: 14px !important;
}

.form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 0.2rem rgba(14,165,233,0.2) !important;
    background: rgba(255,255,255,0.07) !important;
}

/* Dropdown readability */
select.form-control,
.form-select {
    color: #e9edf5 !important;
}

select.form-control option,
.form-select option {
    color: #0b1220 !important;
    background: #fff !important;
}

select.form-control option:disabled,
.form-select option:disabled {
    color: #8f95a3 !important;
}

.table {
    --bs-table-bg: #0e1526 !important;
    --bs-table-striped-bg: rgba(255,255,255,0.03) !important;
    --bs-table-hover-bg: rgba(255,255,255,0.05) !important;
    color: #e9edf5 !important;
    border-color: var(--border) !important;
}

.table thead th {
    background: rgba(255,255,255,0.05) !important;
    color: #fff;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 13px;
}

.status-badge {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: #e9edf5;
}

.content-admin,
.content-pimpinan,
.main-content,
.personel-layout .container,
.personel-layout .main-content {
    padding: 28px 26px 40px !important;
}

.layout-wrapper {
    gap: 18px;
    align-items: flex-start;
}

.content-admin,
.content-pimpinan {
    margin-left: 4px;
}

.page-title,
.card h4,
.card h5 {
    letter-spacing: 0.2px;
}

.tagline-app,
.text-muted,
small,
.muted {
    color: var(--muted) !important;
}

.dashboard-menu a,
.menu-absen .action-card {
    border-radius: 14px !important;
}

.alert-info {
    background: rgba(31,111,235,0.08) !important;
    border-color: rgba(31,111,235,0.35) !important;
    color: #c8e1ff !important;
}

.alert-warning {
    background: rgba(245,158,11,0.1) !important;
    border-color: rgba(245,158,11,0.35) !important;
    color: #fcd34d !important;
}

.stat-card h3 {
    color: var(--muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.stat-card .value {
    color: #fff;
}

.table-responsive {
    border-radius: 14px !important;
    border: 1px solid var(--border) !important;
}

.quick-icon,
.topbar,
.info-banner {
    border: 1px solid var(--border) !important;
}

@media (max-width: 992px) {
    .sidebar-admin,
    .personel-layout .sidebar {
        position: static;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .layout-wrapper {
        gap: 0;
    }
}

@media (max-width: 768px) {
    .layout-wrapper {
        padding: 0 14px;
    }
    .content-admin,
    .content-pimpinan,
    .main-content {
        padding: 22px 16px 32px !important;
    }
}