@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.1.0/sweetalert2.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

:root {
    --bg-0: #040b1e;
    --bg-1: #091732;
    --bg-2: #112952;
    --surface: #0d1d3f;
    --surface-soft: #122a56;
    --surface-strong: #17356b;
    --text-main: #e6f0ff;
    --text-muted: #97afd2;
    --border: rgba(130, 182, 255, 0.28);
    --primary: #2f93ff;
    --primary-strong: #1d73dc;
    --success: #33d6ac;
    --warning: #ffcb65;
    --danger: #ff5b7f;
    --shadow: 0 20px 40px rgba(1, 7, 22, 0.55);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-strong) var(--bg-0);
}

body {
    min-height: 100vh;
    color: var(--text-main);
    font-family: "Poppins", sans-serif !important;
    background:
        radial-gradient(1100px 500px at 90% -20%, rgba(72, 145, 255, 0.2), transparent 60%),
        radial-gradient(1000px 500px at -20% 110%, rgba(26, 80, 171, 0.3), transparent 60%),
        linear-gradient(165deg, var(--bg-0), var(--bg-1) 48%, var(--bg-2));
    background-attachment: fixed;
}

main,
#content {
    position: relative;
    z-index: 1;
}

.container {
    max-width: 1140px;
}

a {
    color: #8ec5ff;
    text-decoration: none;
}

a:hover {
    color: #b6dbff;
}

.logo-txt {
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #eaf4ff;
}

.navbar.bg-dark,
.bg-dark {
    background: linear-gradient(90deg, #071530, #0d2650 45%, #173970) !important;
    border-bottom: 1px solid rgba(107, 168, 255, 0.35);
    box-shadow: 0 8px 24px rgba(2, 9, 26, 0.5);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #f2f7ff !important;
}

.navbar-brand i {
    color: #78bbff;
    margin-right: 8px;
}

.nav-link {
    color: #d7e8ff !important;
}

.nav-link:hover,
.nav-link:focus {
    color: #ffffff !important;
}

.card {
    color: var(--text-main);
    background: linear-gradient(160deg, rgba(17, 38, 77, 0.9), rgba(12, 27, 58, 0.92));
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-header {
    border-bottom: 1px solid var(--border);
    background: linear-gradient(120deg, #123068, #1a3f7e) !important;
    color: #ecf4ff !important;
    font-weight: 600;
}

.bg-default {
    background: linear-gradient(120deg, #123068, #1a3f7e) !important;
    color: #ecf4ff !important;
}

.bg-primary {
    background: linear-gradient(120deg, #123068, #1a3f7e) !important;
}

.text-black {
    color: #edf5ff !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-default {
    color: #8ec5ff !important;
}

.text-dark {
    color: var(--text-main) !important;
}

.text-success {
    color: #defeff !important;
}

.dash-count {
    background: linear-gradient(165deg, rgba(21, 47, 95, 0.88), rgba(13, 31, 63, 0.92));
    border: 1px solid var(--border);
    color: var(--text-main);
    min-height: 98px;
    width: 100%;
    border-radius: 10px;
    margin: 0 0 25px;
    padding: 20px;
}

.form-control,
.form-select {
    color: var(--text-main) !important;
    background-color: rgba(8, 21, 47, 0.85) !important;
    border: 1px solid rgba(115, 170, 255, 0.33);
}

.form-control::placeholder {
    color: rgba(184, 209, 245, 0.62);
}

.form-control:focus,
.form-select:focus {
    color: #ffffff;
    background-color: rgba(9, 24, 51, 0.96);
    border-color: rgba(132, 187, 255, 0.72);
    box-shadow: 0 0 0 0.2rem rgba(44, 136, 255, 0.2);
}

.input-group-text {
    color: #e8f3ff;
    background-color: #143665 !important;
    border: 1px solid rgba(124, 178, 255, 0.38);
}

.btn {
    border-radius: 10px;
    border-width: 1px;
    font-weight: 600;
}

.btn-primary {
    color: #f7fbff;
    border-color: #2f93ff;
    background: linear-gradient(120deg, #2f93ff, #1d73dc);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff;
    border-color: #54a9ff;
    background: linear-gradient(120deg, #41a0ff, #247de8);
}

.btn-dark {
    color: #f7fbff;
    border-color: #2a84e9;
    background: linear-gradient(120deg, #236cc0, #154989);
}

.btn-dark:hover,
.btn-dark:focus {
    color: #ffffff;
    border-color: #56a6ff;
    background: linear-gradient(120deg, #2e80d8, #1b5aa8);
}

.btn-default {
    color: #f7fbff;
    border-color: #2f93ff;
    background: linear-gradient(120deg, #2f93ff, #1d73dc);
}

.btn-default:hover {
    color: #ffffff;
    border-color: #54a9ff;
    background: linear-gradient(120deg, #41a0ff, #247de8);
}

.btn-secondary {
    color: #ecf4ff;
    border-color: rgba(117, 174, 255, 0.4);
    background: linear-gradient(120deg, #173b74, #123061);
}

.btn-secondary:hover {
    color: #ffffff;
    background: linear-gradient(120deg, #1f4b8f, #17407e);
}

.btn-outline-dark {
    color: #9ed2ff;
    border-color: rgba(117, 174, 255, 0.5);
}

.btn-outline-dark:hover {
    color: #ffffff;
    border-color: #4fa9ff;
    background-color: rgba(53, 132, 237, 0.3);
}

.table {
    color: var(--text-main);
}

.table-bordered {
    border-color: rgba(120, 175, 255, 0.22);
}

.table-bordered > :not(caption) > * {
    border-width: 1px 0;
    border-color: rgba(120, 175, 255, 0.22);
}

.table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
    border-bottom-width: 1px;
    color: var(--text-main);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: rgba(57, 111, 197, 0.15);
    color: #edf6ff;
}

.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: rgba(60, 122, 218, 0.2);
}

.list-group-item {
    color: var(--text-main);
    background-color: rgba(8, 21, 47, 0.68);
    border-color: rgba(116, 172, 255, 0.2);
}

.dropdown-menu.show {
    display: block;
    background: linear-gradient(160deg, #102349, #0d1f41) !important;
    border: 1px solid rgba(116, 174, 255, 0.24);
    box-shadow: var(--shadow);
}

.dropdown-item {
    color: #ecf4ff;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #ffffff;
    background: rgba(59, 124, 222, 0.27);
}

.dropdown-divider {
    border-top-color: rgba(125, 181, 255, 0.22);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    color: var(--text-main);
    background: rgba(8, 21, 47, 0.85);
    border: 1px solid rgba(115, 170, 255, 0.33);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text-main) !important;
}

.page-link {
    color: #d9ebff;
    background-color: rgba(14, 36, 74, 0.88);
    border-color: rgba(118, 173, 255, 0.26);
}

.page-link:hover {
    color: #ffffff;
    background-color: rgba(43, 107, 196, 0.68);
    border-color: rgba(129, 182, 255, 0.44);
}

.page-item.active .page-link {
    color: #ffffff;
    background-color: #2b87ef;
    border-color: #2b87ef;
}

.bg-light {
    background-color: rgba(15, 36, 73, 0.86) !important;
    color: #f0f7ff;
}

.alert {
    border: 1px solid;
    box-shadow: 0 12px 28px rgba(3, 12, 31, 0.35);
}

.alert-danger {
    color: #ffdbe4;
    background-color: rgba(86, 21, 40, 0.76);
    border-color: rgba(255, 109, 146, 0.45);
}

.alert-success {
    color: #d8fff1;
    background-color: rgba(21, 73, 59, 0.78);
    border-color: rgba(86, 224, 179, 0.45);
}

.alert-warning {
    color: #fff2d3;
    background-color: rgba(90, 66, 19, 0.76);
    border-color: rgba(255, 199, 94, 0.45);
}

.alert-secondary {
    color: #e0eeff;
    background-color: rgba(24, 52, 98, 0.75);
    border-color: rgba(114, 171, 255, 0.35);
}

.badge {
    border: 1px solid rgba(147, 196, 255, 0.35);
    background-color: rgba(27, 62, 119, 0.55);
}

.key-sensi {
    filter: blur(3px);
}

.swal2-popup {
    color: #e5f1ff !important;
    background: linear-gradient(160deg, #10234a, #0c1c3d) !important;
    border: 1px solid rgba(121, 178, 255, 0.35);
}

.swal2-title,
.swal2-html-container {
    color: #e8f3ff !important;
}

@media (max-width: 768px) {
    #content {
        padding: 12px 8px 22px !important;
    }

    .card {
        border-radius: 12px;
    }

    .btn {
        border-radius: 9px;
    }
}