/* ==========================================================
   LIMITLESS ADMIN THEME
   For AdminLTE 4 + Bootstrap 5
   ========================================================== */

:root {
    --brand-red: #E63946;
    --brand-red-hover: #cf3340;

    --brand-blue: #1D4ED8;
    --brand-blue-hover: #1840b1;

    --brand-dark: #0B1120;

    --surface: #ffffff;
    --surface-alt: #f8fafc;

    --border-color: #e8edf4;

    --text-dark: #111827;
    --text-muted: #64748b;

    --shadow-sm: 0 4px 12px rgba(15, 23, 42, .04);
    --shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
    --shadow-lg: 0 20px 40px rgba(15, 23, 42, .12);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
}

/* ==========================================================
   GLOBAL
   ========================================================== */

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background: #f4f6f9;
}

h1,
h2,
h3,
h4,
h5,
h6,
.content-header h1,
.brand-text,
.card-title,
.heading-display {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .05em;
}

a {
    transition: .25s ease;
}

/* ==========================================================
   BRAND
   ========================================================== */

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

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

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

.bg-brand-red {
    background: var(--brand-red) !important;
}

.bg-brand-blue {
    background: var(--brand-blue) !important;
}

.bg-brand-dark {
    background: var(--brand-dark) !important;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.main-sidebar {
    background: var(--brand-dark);
    border-right: 1px solid rgba(255,255,255,.06);
}

.brand-link {
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand-link .brand-text {
    color: white;
    font-size: 1.4rem;
    letter-spacing: .12em;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link {
    border-radius: 12px;
    margin-bottom: 4px;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active {
    background: var(--brand-red);
    color: white;
    box-shadow:
        0 10px 25px rgba(230,57,70,.25);
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link:hover {
    background: rgba(255,255,255,.08);
}

.nav-sidebar .nav-treeview {
    margin-left: .5rem;
}

.nav-sidebar .nav-treeview>.nav-item>.nav-link {
    border-radius: 10px;
}

/* ==========================================================
   TOP NAVBAR
   ========================================================== */

.main-header {
    background: white;
    border-bottom: 1px solid var(--border-color);
}

.main-header .nav-link {
    color: var(--text-dark);
}

.main-header .nav-link:hover {
    color: var(--brand-red);
}

/* ==========================================================
   CONTENT HEADER
   ========================================================== */

.content-header {
    padding-top: 1.5rem;
}

.content-header h1 {
    font-size: 3rem;
    line-height: 1;
    color: var(--brand-dark);
}

/* ==========================================================
   CARDS
   ========================================================== */

.card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    background: white;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 1.6rem;
    margin-bottom: 0;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn {
    border-radius: 12px;
    font-weight: 600;
}

.btn-primary {
    background: var(--brand-red);
    border-color: var(--brand-red);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-red-hover);
    border-color: var(--brand-red-hover);
}

.btn-secondary {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--brand-blue-hover);
    border-color: var(--brand-blue-hover);
}

.btn-outline-primary {
    color: var(--brand-red);
    border-color: var(--brand-red);
}

.btn-outline-primary:hover {
    background: var(--brand-red);
    border-color: var(--brand-red);
}

.btn-outline-secondary {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.btn-outline-secondary:hover {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
}

/* ==========================================================
   FORMS
   ========================================================== */

.form-control,
.form-select {
    border-radius: 12px;
    border: 1px solid #dbe3ef;
    min-height: 44px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-blue);
    box-shadow:
        0 0 0 .25rem rgba(29,78,216,.15);
}

.input-group-text {
    border-radius: 12px;
}

/* ==========================================================
   TABLES
   ========================================================== */

.table {
    margin-bottom: 0;
}

.table thead th {
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    color: var(--text-muted);
}

.table tbody td {
    vertical-align: middle;
}

.table tbody tr:hover {
    background: rgba(29,78,216,.03);
}

/* ==========================================================
   PAGINATION
   ========================================================== */

.page-link {
    border-radius: 10px;
    margin: 0 2px;
    border: 1px solid var(--border-color);
}

.page-item.active .page-link {
    background: var(--brand-red);
    border-color: var(--brand-red);
}

/* ==========================================================
   BADGES
   ========================================================== */

.badge.bg-primary {
    background: var(--brand-red) !important;
}

.badge.bg-secondary {
    background: var(--brand-blue) !important;
}

/* ==========================================================
   ALERTS
   ========================================================== */

.alert-primary {
    background: rgba(230,57,70,.08);
    border-color: rgba(230,57,70,.15);
    color: var(--brand-red);
}

.alert-secondary {
    background: rgba(29,78,216,.08);
    border-color: rgba(29,78,216,.15);
    color: var(--brand-blue);
}

/* ==========================================================
   SMALL BOXES
   ========================================================== */

.small-box {
    border-radius: 20px;
    overflow: hidden;
    border: none;
    box-shadow: var(--shadow-md);
}

.small-box>.inner {
    padding: 24px;
}

.small-box h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    letter-spacing: .04em;
}

.small-box.bg-primary {
    background:
        linear-gradient(
            135deg,
            #E63946 0%,
            #ff5f6d 100%
        ) !important;
}

.small-box.bg-success {
    background:
        linear-gradient(
            135deg,
            #1D4ED8 0%,
            #4f7fff 100%
        ) !important;
}

.small-box.bg-info {
    background:
        linear-gradient(
            135deg,
            #0B1120 0%,
            #1e293b 100%
        ) !important;
}

.small-box.bg-danger {
    background:
        linear-gradient(
            135deg,
            #E63946 0%,
            #ff5f6d 100%
        ) !important;
}

/* ==========================================================
   INFO BOX
   ========================================================== */

.info-box {
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.info-box-icon {
    border-radius: 16px;
}

/* ==========================================================
   MODALS
   ========================================================== */

.modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
}

/* ==========================================================
   DROPDOWNS
   ========================================================== */

.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

.dropdown-item:hover {
    background: rgba(29,78,216,.05);
}

/* ==========================================================
   LOGIN / REGISTER PAGE
   ========================================================== */

.login-page,
.register-page {
    background:
        radial-gradient(
            circle at top right,
            rgba(230,57,70,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(29,78,216,.12),
            transparent 30%
        ),
        #f8fafc;
}

.login-box,
.register-box {
    /* width: 420px; */
}

.login-card-body,
.register-card-body {
    border-radius: 20px;
}

.login-logo a,
.register-logo a {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .12em;
    color: var(--brand-dark);
}

/* ==========================================================
   DATATABLES
   ========================================================== */

.dataTables_wrapper .dataTables_filter input {
    border-radius: 12px;
    border: 1px solid #dbe3ef;
}

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

/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(100,116,139,.35);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100,116,139,.6);
}

/* ==========================================================
   BRAND SPECIAL
   ========================================================== */

.limitless-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .08em;
    line-height: .95;
}

.limitless-gradient-red {
    background: linear-gradient(
        135deg,
        #E63946,
        #ff5f6d
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.limitless-gradient-blue {
    background: linear-gradient(
        135deg,
        #1D4ED8,
        #4f7fff
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hanya aktif di layar komputer/laptop */
@media (min-width: 768px) {
    /* 1. Mengatur kondisi awal menu anak (tersembunyi & agak turun) */
    .navbar-nav .nav-item.dropdown .dropdown-menu-hover {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
        margin-top: 0; 
    }

    /* 2. Mengatur kondisi saat cursor hover (muncul & naik perlahan) */
    .navbar-nav .nav-item.dropdown:hover .dropdown-menu-hover {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767.98px) {
  body {
    /* Beri jarak di bawah body agar konten tidak tertutup bottom navbar */
    padding-bottom: 35px !important; 
  }
}