/* Tema Manajemen Kos: biru laut, cerah */
:root {
    --sea-950: #0c4a6e;
    --sea-800: #075985;
    --sea-700: #0369a1;
    --sea-600: #0284c7;
    --sea-500: #0ea5e9;
    --sea-400: #38bdf8;
    --sea-100: #e0f2fe;
    --sea-50: #f0f9ff;
    --teal-500: #14b8a6;
    --ink: #0f2a43;

    --bs-primary: #0284c7;
    --bs-primary-rgb: 2, 132, 199;
    --bs-link-color: #0369a1;
    --bs-link-color-rgb: 3, 105, 161;
    --bs-link-hover-color: #075985;
    --bs-link-hover-color-rgb: 7, 89, 133;
    --bs-body-color: #0f2a43;
    --bs-body-color-rgb: 15, 42, 67;
    --bs-secondary-color: #5b7083;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-border-radius: .7rem;
}

body {
    background: radial-gradient(900px 380px at 90% -80px, #d3effd 0%, transparent 70%), #f5fbff;
    background-repeat: no-repeat;
    min-height: 100vh;
}

h1.h4, h1.h3 { font-weight: 700; color: var(--sea-950); }
.text-muted { color: #5b7083 !important; }

/* Navbar */
.app-navbar {
    background: linear-gradient(100deg, #0369a1 0%, #0284c7 55%, #06b6d4 100%);
    box-shadow: 0 6px 20px rgba(2, 132, 199, .28);
}
.app-navbar .navbar-brand { font-weight: 700; letter-spacing: .2px; }
.app-navbar .nav-link {
    border-radius: .6rem;
    padding: .45rem .85rem;
    margin: 0 .1rem;
    transition: background-color .2s;
}
.app-navbar .nav-link:hover { background: rgba(255, 255, 255, .16); }
.app-navbar .nav-link.active { background: rgba(255, 255, 255, .24); font-weight: 600; }

/* Tombol */
.btn { border-radius: .65rem; font-weight: 500; transition: transform .15s, box-shadow .15s, background-color .15s; }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn-primary {
    --bs-btn-bg: #0284c7; --bs-btn-border-color: #0284c7;
    --bs-btn-hover-bg: #0369a1; --bs-btn-hover-border-color: #0369a1;
    --bs-btn-active-bg: #075985; --bs-btn-active-border-color: #075985;
    --bs-btn-disabled-bg: #0284c7; --bs-btn-disabled-border-color: #0284c7;
    --bs-btn-focus-shadow-rgb: 2, 132, 199;
}
.btn-primary:not(:disabled):hover { box-shadow: 0 8px 18px rgba(2, 132, 199, .35); }
.btn-outline-primary {
    --bs-btn-color: #0284c7; --bs-btn-border-color: #0284c7;
    --bs-btn-hover-bg: #0284c7; --bs-btn-hover-border-color: #0284c7;
    --bs-btn-active-bg: #0369a1; --bs-btn-active-border-color: #0369a1;
    --bs-btn-focus-shadow-rgb: 2, 132, 199;
}
.btn-dark {
    --bs-btn-bg: #075985; --bs-btn-border-color: #075985;
    --bs-btn-hover-bg: #0369a1; --bs-btn-hover-border-color: #0369a1;
    --bs-btn-active-bg: #0c4a6e; --bs-btn-active-border-color: #0c4a6e;
}
.btn-outline-secondary {
    --bs-btn-color: #4b6479; --bs-btn-border-color: #bcd3e3;
    --bs-btn-hover-bg: #e8f4fc; --bs-btn-hover-color: #0c4a6e; --bs-btn-hover-border-color: #8fc3e3;
}

/* Kartu */
.card {
    border: 1px solid rgba(2, 132, 199, .12);
    border-radius: 1rem;
    box-shadow: 0 10px 28px rgba(3, 105, 161, .08) !important;
}
.card-footer { background: #f8fcff; border-top-color: #e3f1fa; border-radius: 0 0 1rem 1rem; }

/* Tabel */
.table { --bs-table-hover-bg: #f0f9ff; }
.table-light { --bs-table-bg: #e7f4fd; --bs-table-color: #0b4a6f; --bs-table-border-color: #d3e8f6; }
.table thead th {
    font-size: .75rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; padding-top: .85rem; padding-bottom: .85rem;
}
.table > :not(caption) > * > * { padding: .85rem .9rem; }
.table tbody tr { transition: background-color .15s; }

/* Form */
.form-control, .form-select { border-radius: .65rem; border-color: #cfe3f1; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 .22rem rgba(14, 165, 233, .18);
}
.form-label { font-weight: 500; font-size: .9rem; color: #1d4560; }

/* Badge, alert, pagination */
.badge { font-weight: 600; border-radius: 999px; padding: .45em .8em; letter-spacing: .02em; }
.alert { border: 0; border-radius: .9rem; box-shadow: 0 6px 18px rgba(3, 105, 161, .1); }
.page-link { color: #0369a1; border-color: #cfe3f1; }
.page-link:hover { background: #e7f4fd; color: #075985; }
.page-item.active .page-link { background: #0284c7; border-color: #0284c7; }

/* Modal */
.modal-content { border: 0; border-radius: 1.1rem; box-shadow: 0 24px 60px rgba(3, 105, 161, .3); }
.modal-header { border-bottom-color: #e3f1fa; }
.modal-footer { border-top-color: #e3f1fa; }
.modal-title { font-weight: 700; color: var(--sea-950); }

/* Animasi masuk halaman */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main > * { animation: fadeUp .4s ease both; }
main > *:nth-child(2) { animation-delay: .05s; }
main > *:nth-child(3) { animation-delay: .1s; }
main > *:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
    main > * { animation: none; }
    .btn { transition: none; }
}
/* Indikator loading API */
.api-progress {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2000;
    background: linear-gradient(90deg, #38bdf8, #14b8a6, #38bdf8);
    background-size: 200% 100%;
    opacity: 0; transform: scaleX(0); transform-origin: left;
    transition: opacity .25s, transform .5s;
    pointer-events: none;
}
.api-progress.active { opacity: 1; transform: scaleX(.85); animation: progressSlide 1.2s linear infinite; }
@keyframes progressSlide { to { background-position: -200% 0; } }

/* Toast */
.toast-stack {
    position: fixed; top: 4.6rem; right: 1rem; z-index: 2100;
    width: min(380px, calc(100vw - 2rem));
    display: flex; flex-direction: column; gap: .6rem;
    pointer-events: none;
}
.app-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .85rem 1rem; font-size: .92rem;
    background: #fff; border-radius: .9rem; border-left: 5px solid #0ea5e9;
    box-shadow: 0 14px 34px rgba(3, 105, 161, .22);
    animation: toastIn .3s ease both;
    transition: opacity .25s, transform .25s;
}
.app-toast.hide { opacity: 0; transform: translateX(16px); }
.app-toast > i { font-size: 1.2rem; margin-top: .05rem; color: #0284c7; }
.app-toast-text { flex: 1; word-break: break-word; }
.app-toast .btn-close { font-size: .65rem; margin-top: .25rem; }
.app-toast-success { border-left-color: #14b8a6; }
.app-toast-success > i { color: #0d9488; }
.app-toast-danger { border-left-color: #ef4444; }
.app-toast-danger > i { color: #dc2626; }
.app-toast-warning { border-left-color: #f59e0b; }
.app-toast-warning > i { color: #d97706; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* Navbar: avatar dan peran */
.nav-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .55);
    font-weight: 700; font-size: .8rem;
}
.nav-role { background: rgba(255, 255, 255, .2); color: #fff; text-transform: capitalize; font-weight: 600; }
#nav-user .btn-outline-light { border-radius: .65rem; }
@media (prefers-reduced-motion: reduce) {
    .api-progress.active, .app-toast { animation: none; }
}
/* Halaman autentikasi */
.auth-card { overflow: hidden; border-radius: 1.25rem; }
.auth-aside {
    background: linear-gradient(155deg, #075985 0%, #0284c7 55%, #14b8a6 100%);
    color: #fff; position: relative; overflow: hidden;
}
.auth-aside::before, .auth-aside::after {
    content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1);
}
.auth-aside::before { width: 260px; height: 260px; right: -90px; top: -80px; }
.auth-aside::after { width: 200px; height: 200px; left: -70px; bottom: -70px; }
.auth-aside > * { position: relative; z-index: 1; }
.auth-logo {
    width: 56px; height: 56px; border-radius: 1rem; font-size: 1.6rem;
    background: rgba(255, 255, 255, .2);
    display: inline-flex; align-items: center; justify-content: center;
}
.auth-aside ul { list-style: none; padding: 0; margin: 0; }
.auth-aside li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .75rem; font-size: .92rem; }
.auth-aside li i { color: #a5f3fc; }

/* Input password dengan tombol tampil/sembunyi */
.pw-wrap { position: relative; }
.pw-wrap .form-control,
.pw-wrap .form-control.is-invalid { padding-right: 2.9rem; background-image: none; }
.pw-toggle {
    position: absolute; top: 0; right: 0; width: 2.9rem;
    height: calc(1.5em + 1.1rem + 2px);
    border: 0; background: transparent; color: #5b7083;
}
.pw-toggle:hover { color: #0284c7; }
/* Header halaman */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-head h1 { display: flex; align-items: center; gap: .65rem; margin: 0; }
.page-icon {
    width: 42px; height: 42px; border-radius: .85rem; font-size: 1.25rem; color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #14b8a6);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px rgba(14, 165, 233, .35);
}
.page-sub { color: #5b7083; font-size: .9rem; margin: .2rem 0 0; }

/* Badge status lembut */
.badge-soft { display: inline-flex; align-items: center; gap: .35rem; }
.badge-soft-success { background: #d1fae5; color: #047857; }
.badge-soft-danger { background: #fee2e2; color: #b91c1c; }
.badge-soft-warning { background: #fef3c7; color: #b45309; }
.badge-soft-secondary { background: #e2e8f0; color: #475569; }
.badge-soft-info { background: #e0f2fe; color: #075985; }

/* Avatar kecil dan keadaan kosong */
.avatar-sm {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #bae6fd, #99f6e4); color: #075985;
    font-weight: 700; font-size: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.empty-state { padding: 2rem 1rem; color: #5b7083; }
.empty-state i { display: block; font-size: 2rem; color: #7dd3fc; margin-bottom: .4rem; }

/* Tabel menjadi kartu di layar HP */
@media (max-width: 767.98px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr { padding: .85rem 1rem; border-bottom: 1px solid #e3f1fa; }
    .table-stack td {
        display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        padding: .3rem 0 !important; border: 0; text-align: right;
    }
    .table-stack td::before {
        content: attr(data-label); flex-shrink: 0; text-align: left;
        font-weight: 600; font-size: .8rem; color: #5b7083;
    }
    .table-stack td.cell-actions { justify-content: flex-end; }
    .table-stack td.cell-actions::before, .table-stack td[colspan]::before { content: none; }
    .table-stack td[colspan] { justify-content: center; }
}
/* Kartu statistik dashboard */
.stat-link { display: block; text-decoration: none; color: inherit; height: 100%; }
.stat-card { transition: transform .18s, box-shadow .18s; }
.stat-link:hover .stat-card { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(3, 105, 161, .16) !important; }
.stat-icon {
    width: 48px; height: 48px; border-radius: .95rem; font-size: 1.35rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.stat-label { font-size: .84rem; color: #5b7083; }
.stat-value { font-size: clamp(1rem, 4.6vw, 1.55rem); font-weight: 700; line-height: 1.15; white-space: nowrap; }
.stat-primary .stat-icon { background: #e0f2fe; color: #0284c7; }
.stat-primary .stat-value { color: #0369a1; }
.stat-success .stat-icon { background: #d1fae5; color: #047857; }
.stat-success .stat-value { color: #047857; }
.stat-danger .stat-icon { background: #fee2e2; color: #b91c1c; }
.stat-danger .stat-value { color: #b91c1c; }
.stat-warning .stat-icon { background: #fef3c7; color: #b45309; }
.stat-warning .stat-value { color: #b45309; }
.stat-dark .stat-icon { background: #e2e8f0; color: #334155; }
.stat-dark .stat-value { color: #0f2a43; }
.stat-card .card-body > div { min-width: 0; flex: 1; }   

.stat-card .card-body {
    flex-wrap: wrap;
    gap: .5rem .75rem !important;     
}
.stat-card .card-body > div {
    flex: 1 1 0;                       
    min-width: min-content;
}

@media (max-width: 575.98px) {
    .stat-icon { width: 40px; height: 40px; font-size: 1.15rem; border-radius: .8rem; }
    .stat-label { font-size: .78rem; }
}

/* Skeleton saat memuat */
.skeleton {
    border-radius: .7rem;
    background: linear-gradient(90deg, #e7f4fd 25%, #f4fbff 50%, #e7f4fd 75%);
    background-size: 200% 100%;
    animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
/* Badge bawaan Bootstrap (text-bg-*) diubah menjadi gaya lembut agar halaman lain ikut serasi */
.badge.text-bg-danger { background-color: #fee2e2 !important; color: #b91c1c !important; }
.badge.text-bg-success { background-color: #d1fae5 !important; color: #047857 !important; }
.badge.text-bg-warning { background-color: #fef3c7 !important; color: #b45309 !important; }
.badge.text-bg-secondary { background-color: #e2e8f0 !important; color: #475569 !important; }
.badge.text-bg-info, .badge.text-bg-primary { background-color: #e0f2fe !important; color: #075985 !important; }
.badge.text-bg-dark { background-color: #cbd5e1 !important; color: #0f2a43 !important; }

/* Judul halaman yang belum memakai page-head */
h4 { font-weight: 700; color: #0c4a6e; }
.card-header { background: #fff; border-bottom-color: #e3f1fa; }