/* ============================================================
   custom.css — Custom styles untuk Siandalan
   Framework : AdminLTE 4 + Bootstrap 5
   ============================================================ */

/* ---- Box Mode: Kotak klasik (zero border-radius global) ---- */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* Badge tetap sedikit rounded agar tidak aneh */
.badge {
    border-radius: 0.35rem !important;
}

/* Checkbox — bulat sewajarnya, centang di tengah */
.form-check-input[type="checkbox"] {
    border-radius: 0.2em !important;
    cursor: pointer;
}

/* ============================================================
   Typography Scale — fontsize konsisten seluruh aplikasi
   ============================================================ */
/* Base: 0.875rem (14px) */
body {
    font-size: 0.875rem;
}

/* Heading scale */
h1 { font-size: 1.35rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
h4, .h4 { font-size: 0.95rem; }
h5, .h5 { font-size: 0.875rem; }
h6, .h5 { font-size: 0.85rem; }

/* Cards */
.card-title { font-size: 0.95rem; font-weight: 600; }
.card-header { font-size: 0.9rem; }

/* Tables */
.table th { font-size: 0.78rem; }
.table td { font-size: 0.85rem; }

/* Buttons — konsisten */
.btn { font-size: 0.85rem; }
.btn-sm { font-size: 0.8rem; padding: 0.3rem 0.65rem; }
.btn-lg { font-size: 0.95rem; }

/* Forms */
.form-control, .form-select { font-size: 0.85rem; }
.form-control-sm, .form-select-sm { font-size: 0.8rem; }
.form-label { font-size: 0.85rem; font-weight: 600; }
.form-text { font-size: 0.75rem; }

/* Badges */
.badge { font-size: 0.72rem; padding: 0.4em 0.7em; }

/* Small / muted text */
small, .small { font-size: 0.78rem; }
.text-muted { font-size: inherit; }

/* Alert */
.alert { font-size: 0.85rem; }

/* Dropdown */
.dropdown-menu { font-size: 0.85rem; }
.dropdown-item { font-size: 0.85rem; padding: 0.4rem 1rem; }

/* Modal */
.modal-title { font-size: 1rem; }
.modal-body { font-size: 0.875rem; }
.modal-footer .btn { font-size: 0.82rem; }

/* List group */
.list-group-item { font-size: 0.85rem; }

/* Sidebar */
.sidebar-brand .brand-text { font-size: 1rem; }
.nav-sidebar .nav-link { font-size: 0.85rem; }
.nav-sidebar .nav-treeview > .nav-link { font-size: 0.82rem; }

/* ============================================================
   DataTables overrides — seragam dengan aplikasi
   ============================================================ */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 0.82rem;
}

.dataTables_wrapper .dataTables_length select {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
}

.dataTables_wrapper .dataTables_filter input {
    font-size: 0.82rem;
    padding: 0.25rem 0.5rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.7rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    font-weight: 600;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 0.75rem;
    color: #6c757d;
}

table.dataTable thead th,
table.dataTable thead td {
    font-size: 0.78rem;
    padding: 0.6rem 0.75rem;
}

table.dataTable tbody td {
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
}

/* ============================================================
   Component overrides
   ============================================================ */
:root {
    --bs-primary: #3b7ddd;
    --adminlte-sidebar-width: 250px;
}

body {
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
}

.app-sidebar {
    transition: width 0.3s ease-in-out;
}

.card {
    border: none;
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0,0,0,.07);
    padding: 0.85rem 1.1rem;
    font-weight: 600;
}

.info-box {
    margin-bottom: 1rem;
}

.info-box-icon {
    font-size: 1.5rem;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.small-box {
    overflow: hidden;
    margin-bottom: 1rem;
}

.table th {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f8f9fa;
}

.table td {
    vertical-align: middle;
}

/* ---- Breadcrumb customization ---- */
.app-content-header {
    background-color: transparent;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    margin-bottom: 1rem;
}

/* ---- Login page ---- */
.login-page, .register-page {
    background: linear-gradient(135deg, #3b7ddd 0%, #1e4da0 100%);
    min-height: 100vh;
}

.login-box, .register-box {
    margin: auto;
    padding-top: 5vh;
}

.login-logo a, .register-logo a {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.login-card-body, .register-card-body {
    /* boxy mode */
}

/* ---- Toastr override ---- */
#toast-container > .toast {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 15px 20px 15px 60px;
}

/* ---- Profile ---- */
.profile-user-img {
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* ---- Responsive tweaks ---- */
@media (max-width: 767.98px) {
    .info-box {
        flex-direction: column;
        text-align: center;
    }
    .info-box-icon {
        width: 100%;
        min-height: 60px;
    }
}

/* ---- Utility ---- */
.cursor-pointer { cursor: pointer; }
.font-weight-600 { font-weight: 600; }
.gap-1 { gap: 0.25rem; }

/* ---- Sidebar divider item ---- */
.sidebar-divider {
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
}

/* ---- Menu management drag-drop ---- */
.menu-drag-handle {
    cursor: grab;
}

.menu-draggable-row.dragging {
    opacity: 0.45;
}

/* ---- Navbar notifications ---- */
.notif-dropdown-menu {
    width: min(420px, calc(100vw - 1rem));
    min-width: 320px;
    max-width: calc(100vw - 1rem);
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
}

.notif-item-content {
    min-width: 0;
}

/* Notification icon — bulat */
.notif-dropdown-menu .d-inline-flex.align-items-center.justify-content-center {
    border-radius: 50% !important;
}

@media (max-width: 576px) {
    .notif-dropdown-menu {
        min-width: 0;
        width: calc(100vw - 1rem);
    }
}