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

        * {
            transition: 0.2s;
        }

        body {
            background: #f4f6f9;
            overflow-x: hidden;
            font-family: Arial, sans-serif;
        }

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

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 240px;
            height: 100vh;
            background: #fff;
            border-right: 1px solid #ddd;
            overflow-y: auto;
            z-index: 1000;
        }

        .sidebar.small {
            width: 75px;
        }

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

        .sidebar-logo {
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        .sidebar-logo h4 {
            margin-top: 10px;
            font-weight: bold;
        }

        .sidebar-logo small {
            color: #777;
        }

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

        .sidebar a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            text-decoration: none;
            color: #333;
            white-space: nowrap;
        }

        .sidebar a:hover {
            background: #f1f5ff;
            color: #0d6efd;
        }

        .sidebar i {
            font-size: 18px;
            min-width: 25px;
        }

        .active-menu {
            background: #0d6efd !important;
            color: #fff !important;
        }

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

        .sidebar.small .menu-text,
        .sidebar.small .sidebar-logo h4,
        .sidebar.small .sidebar-logo small {
            display: none;
        }

        .sidebar.small .sidebar-logo img {
            width: 40px;
        }

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

        .navbar-custom {
            position: fixed;
            top: 0;
            left: 240px;
            right: 0;
            height: 60px;
            background: #fff;
            border-bottom: 1px solid #ddd;
            z-index: 999;
            padding: 0 20px;
        }

        .sidebar.small~.navbar-custom {
            left: 75px;
        }

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

        .content {
            margin-left: 240px;
            margin-top: 80px;
            padding: 25px;
        }

        .content.full {
            margin-left: 75px;
        }

        /* =====================================
   CARD
===================================== */

        .card-dashboard {
            border: none;
            border-radius: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        /* =====================================
   FOOTER
===================================== */

        .footer {
            margin-top: 30px;
            text-align: center;
            color: #777;
            font-size: 14px;
        }

        /* =====================================
   DARK MODE
===================================== */

        body.dark-mode {
            background: #121212;
            color: #fff;
        }

        body.dark-mode .sidebar,
        body.dark-mode .navbar-custom,
        body.dark-mode .card-dashboard {
            background: #1e1e1e;
            border-color: #333;
        }

        body.dark-mode .sidebar a {
            color: #ddd;
        }

        body.dark-mode .sidebar a:hover {
            background: #333;
        }

        /* =====================================
   DARK MODE COMPONENT FIX
===================================== */

/* CONTENT */
body.dark-mode .content {
    color: #fff;
}


/* CARD */
body.dark-mode .card-dashboard {
    background: #1e1e1e;
    color: #fff;
}


/* TABLE */
body.dark-mode .custom-table thead th {
    background: #2b2b2b !important;
    color: #ccc;
}


body.dark-mode .custom-table tbody tr {
    background: #1e1e1e;
    color: #fff;
}


body.dark-mode .custom-table tbody td {
    color: #ddd;
}


body.dark-mode .custom-table tbody tr:hover {
    background: #2b2b2b;
}



/* TABLE NUMBER */
body.dark-mode .table-number {
    background: #333;
    color: #fff;
}



/* FORM INPUT */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea {
    background: #2b2b2b;
    border-color: #444;
    color: #fff;
}


body.dark-mode .form-control::placeholder {
    color: #aaa;
}


body.dark-mode .input-group-text {
    background: #2b2b2b;
    border-color: #444;
    color: #fff;
}



/* TEXT */
body.dark-mode .text-muted {
    color: #aaa !important;
}


/* FOOTER */
body.dark-mode .footer {
    color: #aaa;
}



/* DROPDOWN */
body.dark-mode .dropdown-menu {
    background: #1e1e1e;
    border-color: #333;
}


body.dark-mode .dropdown-item {
    color: #fff;
}


body.dark-mode .dropdown-item:hover {
    background: #333;
}


/* PAGINATION */
body.dark-mode .pagination .page-link {
    background: #1e1e1e;
    color: #fff;
}



/* ALERT */
body.dark-mode .alert {
    border-color: #444;
}



/* MODAL */
body.dark-mode .modal-content {
    background: #1e1e1e;
    color: #fff;
}



/* BADGE TEXT */
body.dark-mode .badge {
    border: 1px solid rgba(255,255,255,.1);
}

/* ==========================
   GLOBAL DARK MODE
========================== */


/* CARD */
body.dark-mode .card,
body.dark-mode .card-body {
    background-color: #1e1e1e !important;
    color: #ffffff;
}


/* TABLE GLOBAL */
body.dark-mode .custom-table {
    --bs-table-bg: #1e1e1e;
    --bs-table-color: #ffffff;
    --bs-table-border-color: #444;
    --bs-table-hover-bg: #2b2b2b;
    --bs-table-hover-color: #ffffff;
}


body.dark-mode .custom-table > :not(caption)>*>* {
    background-color: #1e1e1e;
    color: #ffffff;
    border-color: #444;
}


body.dark-mode .custom-table tbody tr:hover td {
    background-color: #2b2b2b;
    color: #ffffff;
}


/* HEADER TABLE */
body.dark-mode .custom-table thead th {
    background-color: #212529;
    color: white;
}


/* INPUT */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background-color: #2b2b2b;
    color: white;
    border-color: #555;
}


body.dark-mode .form-control::placeholder {
    color: #aaa;
}


/* TEXT MUTED */
body.dark-mode .text-muted {
    color: #adb5bd !important;
}


/* BADGE TANGGAL */
.badge-tanggal {
    background-color: #f8f9fa;
    color: #212529;
}


body.dark-mode .badge-tanggal {
    background-color: #343a40;
    color: white;
}

        /* =====================================
   RESPONSIVE MOBILE
===================================== */

        @media (max-width: 768px) {

            .sidebar {
                left: -240px;
            }

            .sidebar.show {
                left: 0;
            }

            .navbar-custom {
                left: 0 !important;
            }

            .content,
            .content.full {
                margin-left: 0 !important;
                padding: 15px;
            }
        }

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

        .pagination .page-link {
            border-radius: 10px;
            margin: 0 3px;
            border: none;
            color: #0d6efd;
            padding: 8px 14px;
            transition: .2s ease;
        }

        .pagination .page-link:hover {
            background: #0d6efd;
            color: white;
            transform: translateY(-2px);
        }

        .pagination .active .page-link {
            background: #0d6efd;
            color: white;
            font-weight: 600;
        }

        /* =====================================
   CUSTOM TABLE
===================================== */

        .custom-table {
            border-collapse: separate;
            border-spacing: 0 12px;
        }

       /* =====================================
   CUSTOM TABLE
===================================== */

.custom-table {
    border-collapse: separate;
    border-spacing: 0 12px;
}


.custom-table thead th {
    background: #f8fafc !important;
    border: none !important;
    color: #64748b;
    font-size: 15px;
    font-weight: 700;
    padding: 16px;
    vertical-align: middle;
}


.custom-table tbody tr {
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
    transition: .2s ease;
}


.custom-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}


.custom-table tbody td {
    border: none;
    padding: 18px 16px;
    vertical-align: middle;
    font-size: 15px;
}


/* teks nama pegawai */
.custom-table tbody td .fw-semibold,
.custom-table tbody td .fw-bold {
    font-size: 15px;
}


/* teks kecil NIK, cabang, keterangan */
.custom-table tbody td small {
    font-size: 14px;
}


/* badge status */
.custom-table .badge {
    font-size: 13.5px;
    padding: 7px 12px;
}

        /* =====================================
   TABLE COMPONENT
===================================== */

        .table-number {
            width: 36px;
            height: 36px;
            background: #eef2ff;
            color: #4f46e5;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }

        .badge-status {
            padding: 8px 14px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .text-ellipsis {
            max-width: 220px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* =====================================
   BUTTON
===================================== */

        .btn-action {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: .2s ease;
            border: none;
        }

        .btn-action:hover {
            transform: scale(1.08);
        }

        .btn-edit {
            background: #facc15;
            color: #78350f;
        }

        .btn-history {
            background: #0ea5e9;
            color: white;
        }

        .btn-primary-custom {
            background: #4f46e5;
            color: white;
        }

        .btn-delete {
            background: #ef4444;
            color: white;
        }

        /* =====================================
   EMPTY STATE
===================================== */

        .empty-state {
            padding: 40px;
            text-align: center;
            color: #94a3b8;
        }

        .empty-state i {
            font-size: 48px;
            display: block;
            margin-bottom: 10px;
        }

        .btn-surat {
            background: #198754;
            color: #fff;
        }

        .btn-surat:hover {
            background: #157347;
            color: #fff;
        }

        .btn-detail {
            background: #0d6efd;
            color: #fff;
        }

        .btn-detail:hover {
            background: #0b5ed7;
            color: #fff;
        }

        .btn-expired {
            background: #6c757d;
            color: #fff;
            cursor: not-allowed;
            opacity: .8;
        }
        /* LOGO SIDEBAR BULAT */
.logo-sidebar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* CARD HEADER DARK MODE */
body.dark-mode .card-header {
    background-color: #1e1e1e !important;
    color: #ffffff;
    border-color: #444 !important;
}
/* Tombol Dark Mode */
body.dark-mode .btn-outline-dark {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

body.dark-mode .btn-outline-dark:hover {
    background-color: #ffffff;
    color: #212529 !important;
}
.btn-notifikasi{
    background:#fff;
    border:1px solid #ddd;
    color:#333;
}

.btn-notifikasi:hover{
    background:#f8f9fa;
}

body.dark-mode .btn-notifikasi{
    background:#2b2b2b;
    border-color:#444;
    color:#fff;
}

body.dark-mode .btn-notifikasi i{
    color:#fff;
}
body{
    background:#f4f6f9;
    font-family:Arial,sans-serif;
}

.login-wrapper{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    width:100%;
    max-width:420px;
    border:none;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.login-header{
    padding:25px;
    background:#0d6efd;
    color:#fff;
    text-align:center;
}

.login-header h4{
    margin:0;
    font-weight:600;
}

.login-logo{
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:50%;
    background:#fff;
    padding:6px;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.login-body{
    padding:25px;
}

label{
    font-weight:500;
    margin-bottom:6px;
}

.form-control{
    border-radius:8px;
}

.form-control:focus{
    box-shadow:0 0 0 .2rem rgba(13,110,253,.25);
}

.btn-login{
    padding:10px;
    border-radius:8px;
    transition:.3s;
}

.btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(13,110,253,.3);
}
/* ==========================
   DETAIL PAGE
========================== */

.detail-box{
    background:#f8f9fa;
    border:1px solid #e9ecef;
    border-left:4px solid #0d6efd;
    border-radius:10px;
    padding:12px 15px;
    font-weight:500;
    min-height:48px;
    display:flex;
    align-items:center;
}

.detail-description{
    background:#f8f9fa;
    border:1px solid #e9ecef;
    border-radius:10px;
    padding:20px;
    line-height:1.8;
    text-align:justify;
}

.system-box{
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border:1px solid #e9ecef;
    border-radius:10px;
    background:#fafafa;
}

.system-box .icon{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#0d6efd;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.card{
    border-radius:14px;
}

.card-header{
    border-bottom:1px solid #f1f1f1;
}

/* ==========================
   DARK MODE DETAIL
========================== */

body.dark-mode .detail-box{
    background:#2b2b2b;
    border-color:#444;
    color:#fff;
}

body.dark-mode .detail-description{
    background:#2b2b2b;
    border-color:#444;
    color:#fff;
}

body.dark-mode .system-box{
    background:#2b2b2b;
    border-color:#444;
    color:#fff;
}

body.dark-mode .card-header{
    background:#1e1e1e !important;
    border-color:#444;
}
    .detail-box {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-left: 4px solid #0d6efd;
        border-radius: 10px;
        padding: 12px 15px;
        font-weight: 500;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .detail-description {
        background: #f8f9fa;
        border-radius: 10px;
        border: 1px solid #e9ecef;
        padding: 20px;
        line-height: 1.8;
        text-align: justify;
    }

    .system-box {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 18px;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        background: #fafafa;
    }

    .system-box .icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #0d6efd;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
    }

    .card {
        border-radius: 14px;
    }

    .card-header {
        border-bottom: 1px solid #f1f1f1;
    }
    /* ==========================
   DATE INPUT DARK MODE
========================== */

body.dark-mode .date-dark {

    background-color: #1e293b;
    color: #ffffff;
    border-color: #475569;

}


/* ICON KALENDER */
body.dark-mode .date-dark::-webkit-calendar-picker-indicator {

    filter: invert(1);

    cursor: pointer;

}


body.dark-mode .date-dark::-webkit-datetime-edit {

    color: #ffffff;

}


body.dark-mode .date-dark::-webkit-datetime-edit-text {

    color: #94a3b8;

}


body.dark-mode .date-dark::-webkit-datetime-edit-month-field,
body.dark-mode .date-dark::-webkit-datetime-edit-day-field,
body.dark-mode .date-dark::-webkit-datetime-edit-year-field {

    color: #ffffff;

}
/* ==========================
   DOKUMEN TABLE DARK MODE
========================== */

body.dark-mode .table tbody tr,
body.dark-mode .table tbody td {

    background-color: #121212 !important;
    color: #ffffff !important;
    border-color: #475569 !important;

}


body.dark-mode .table tbody tr:hover td {

    background-color: #000000 !important;
    color: #ffffff !important;

}
.login-wrapper {

    min-height: 100vh;

    background-image: url('/assets/img/10.jpeg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}


.login-wrapper::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.45);

}


.login-wrapper > * {

    position: relative;

    z-index: 1;

}
.pagination{
    margin-bottom:0 !important;
}

.pagination-nav{
    margin-bottom:0 !important;
}

.footer{
    clear: both;
}
.icon-summary{
    width:60px;
    height:60px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    flex-shrink:0;
}

.card h3{
    font-size:28px;
}

.card small{
    font-size:13px;
}