/* Override SB Admin 2 Color Variables */
:root {
    /* Primary Colors - Hijau Instansi */
    --green-primary: #006316;
    --green-secondary: #8da03c;
    --yellow-primary: #f0c001;
    --yellow-secondary: #f7d914;

    /* Override default variables */
    --primary: #006316;
    --secondary: #8da03c;
    --warning: #f0c001;
    --success: #8da03c;
    --info: #f7d914;

    /* Layout sizing */
    --sidebar-width: 14rem; /* full sidebar width */
    --sidebar-collapsed-width: 6.5rem; /* collapsed (toggled) width */

    /* Gradients */
    --sidebar-gradient-start: var(--green-secondary);
    --sidebar-gradient-end: var(--green-primary);
}

/* Gradient Background Override */
body.bg-gradient-primary {
    background: linear-gradient(
        180deg,
        var(--sidebar-gradient-start) 1%,
        var(--sidebar-gradient-end) 100%
    ) !important;
}

.login-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
    background: url("data:image/svg+xml;utf8,<svg width='100vw' height='100vh' xmlns='http://www.w3.org/2000/svg'><g opacity='0.3'><polygon points='60,20 80,40 80,70 60,90 40,70 40,40' fill='%238da03c'/><polygon points='160,120 180,140 180,170 160,190 140,170 140,140' fill='%23f0c001'/><polygon points='260,220 280,240 280,270 260,290 240,270 240,240' fill='%23006316'/></g><g opacity='0.18'><polygon points='400,80 420,100 420,130 400,150 380,130 380,100' fill='%238da03c'/><polygon points='600,300 620,320 620,350 600,370 580,350 580,320' fill='%23f0c001'/></g><g opacity='0.12'><polygon points='900,500 920,520 920,550 900,570 880,550 880,520' fill='%23006316'/></g><g opacity='0.2'><path d='M50 600 l40 0 l20 35 l-20 35 l-40 0 l-20 -35 z' fill='%238da03c'/></g></svg>");
    background-repeat: no-repeat;
    background-size: cover;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--green-secondary);
}

/* Sidebar specific overrides */
.navbar-nav.bg-gradient-primary.sidebar {
    background: linear-gradient(
        180deg,
        var(--sidebar-gradient-start) 1%,
        var(--sidebar-gradient-end) 100%
    ) !important;
}

/* Button overrides */
.btn-primary {
    color: #fff !important;
    background-color: var(--green-secondary) !important;
    border-color: var(--green-secondary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff !important;
    background-color: var(--green-primary) !important;
    border-color: var(--green-primary) !important;
}

.btn-link {
    color: var(--green-secondary) !important;
}
.btn-link:hover {
    color: var(--green-primary) !important;
}

a.link {
    color: var(--green-primary) !important;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--green-primary);
    border-color: var(--green-primary);
}

.page-link {
    color: var(--green-primary);
}

.page-link:hover {
    z-index: 2;
    color: var(--green-primary);
    text-decoration: none;
    background-color: #eaecf4;
    border-color: #dddfeb;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--green-primary) !important;
    background-color: var(--green-primary) !important;
}

/* Avatar styling */
.img-profile {
    box-sizing: content-box !important; /* Ensure border doesn't shrink the image */
    width: 40px !important; /* Set a fixed width for the avatar */
    height: 40px !important; /* Set a fixed height for the avatar */
    object-fit: cover !important; /* Ensure the image fits nicely within the circle */
    border: 2px solid var(--green-secondary) !important;
}

/* Profile Avatar Large (for profile page) */
.img-profile.rounded-circle {
    object-fit: cover;
    border: 3px solid var(--green-secondary);
}

/* Border colors for user roles */
.border-role-employee {
    border: 3px solid var(--green-primary) !important; /* Hijau */
}

.border-role-supervisor {
    border: 3px solid var(--yellow-primary) !important; /* Kuning */
}

.border-role-admin {
    border: 3px solid orange !important; /* Oranye */
}

.border-role-superadmin {
    border: 3px solid red !important; /* Merah */
}

.sticky-footer {
    padding: 1rem 0 !important; /* Kurangi padding atas dan bawah */
    line-height: 1.5 !important; /* Pastikan teks tidak terlalu rapat */
}

/* Text colors */
.text-primary {
    color: var(--green-primary) !important;
}

/* Border colors */
.border-left-primary {
    border-left: 0.25rem solid var(--green-primary) !important;
}

/* Nav link active state */
.sidebar .nav-item.active .nav-link {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active {
    color: var(--green-primary) !important;
}

/* Hide illustration and subtitle when sidebar is toggled */
@media (min-width: 768px) {
    #wrapper .sidebar.toggled .sidebar-card-illustration,
    #wrapper .sidebar.toggled .sidenav-footer-subtitle {
        display: none !important;
    }
}

/* Card primary border */
.card.border-left-primary {
    border-left: 0.25rem solid var(--green-primary) !important;
}

/* Warning colors */
.text-warning {
    color: var(--yellow-primary) !important;
}

/* Sticky layout enhancements: make sidebar and topbar sticky without altering SB Admin 2 UX */
@media (min-width: 768px) {
    /* Fix the sidebar to the viewport with its own scroll */
    #wrapper .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100vh;
        width: var(--sidebar-width);
        overflow-y: auto;
        overflow-x: hidden;
        /* Ensure it sits above the content background but below modals */
        z-index: 1020;
        /* Hide scrollbar while preserving scroll (desktop only) */
        -ms-overflow-style: none; /* IE 10+ */
        scrollbar-width: none; /* Firefox */
    }

    /* WebKit */
    #wrapper .sidebar::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* Provide space for the fixed sidebar in the main content */
    #wrapper #content-wrapper {
        margin-left: var(--sidebar-width);
        /* Ensure the column fills the viewport so footer sits at the bottom */
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* When sidebar is toggled (collapsed), reduce the margin accordingly */
    #wrapper .sidebar.toggled ~ #content-wrapper {
        margin-left: var(--sidebar-collapsed-width);
    }

    /* Explicitly set the collapsed width to match mobile behavior */
    #wrapper .sidebar.toggled {
        width: var(--sidebar-collapsed-width);
    }

    /* Responsive sidebar footer: vertical layout saat toggled */
    #wrapper .sidebar.toggled .sidenav-footer-content {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem; /* Tambahkan jarak antar elemen untuk readability */
    }
    #wrapper .sidebar.toggled .sidenav-footer-content > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%; /* Pastikan elemen memanfaatkan lebar penuh */
    }
    #wrapper .sidebar.toggled .sidenav-footer-content > div i {
        margin-right: 0; /* Hapus margin horizontal */
        margin-bottom: 0.25rem; /* Tambahkan margin bawah untuk jarak icon-teks */
        font-size: 1rem; /* Kurangi ukuran icon agar sesuai dengan icon sidebar */
    }
    #wrapper .sidebar.toggled .sidenav-footer-content > div small {
        font-size: 0.7rem; /* Perkecil teks untuk fit di ruang sempit */
        line-height: 1.2;
        word-break: break-word; /* Tambahkan wrap untuk teks panjang */
        overflow-wrap: break-word; /* Pastikan teks turun ke bawah jika perlu */
        white-space: normal; /* Izinkan wrap normal */
    }

    /* Make the topbar stick to the top of the viewport while scrolling */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 1030; /* above sidebar/content */
    }

    /* Let the main content area expand and footer stay after it */
    #content {
        flex: 1 0 auto;
    }

    /* Prevent footer from growing to fill empty space */
    .sticky-footer {
        flex-shrink: 0;
    }
}

/* On smaller screens keep default behavior; sidebar overlays via existing JS toggle */

/* Reusable Components - Ditambahkan dari halaman-halaman */

/* Avatar preview styling to maintain aspect ratio in circle */
.avatar-preview-container {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 3px solid #fff;
}

.avatar-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* File Card Styles */
.file-card {
    position: relative;
    border: 1px solid #e3e6f0;
    border-radius: 0.35rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    background-color: #f8f9fc;
    height: 100%;
    transition: all 0.2s;
}

.file-card:hover {
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.file-icon {
    font-size: 1.75rem;
    color: #4e73df;
    margin-bottom: 0.5rem;
}

.file-name {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 0.7rem;
    color: #858796;
}

.remove-file-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e74a3b;
    color: white;
    border: none;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Progress text for import */
.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 25px;
    color: white;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Nav tabs styling for import */
.nav-tabs .nav-link {
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    color: #8da03c;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    color: #8da03c;
}

.list-unstyled li i {
    width: 16px;
    margin-right: 8px;
}

/* Column name styling */
.column-name {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 3px 8px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

/* Timeline status styles */
.timeline-status {
    position: relative;
}

.timeline-status::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    width: 2px;
    background-color: #e3e6f0;
    z-index: 0;
}

.status-icon {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-body {
    position: relative;
}

/* Simple, visible outline for DataTables processing card */
#userDataTable_processing.card,
.dataTables_wrapper .dataTables_processing.card {
    background-color: #f8f9fc;
    color: #22303a;
    border: 1px solid rgba(34, 48, 58, 0.08);
    border-left: 4px solid var(--green-primary); /* clear accent */
    border-radius: 0.5rem;
    box-shadow: 0 0.08rem 0.2rem rgba(34, 48, 58, 0.04);
    font-weight: 600;
}

/* Profile Page Specific Styles */
/* Activity Timeline Styles */
.activity-timeline {
    position: relative;
}

.activity-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.activity-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 50px;
    bottom: -24px;
    width: 2px;
    background: #e3e6f0;
}

.activity-icon {
    z-index: 1;
    position: relative;
}

/* Password Requirements Styling */
.password-requirements .requirement {
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.password-requirements .requirement.valid {
    color: var(--success);
}

.password-requirements .requirement.invalid {
    color: #858796;
}

.password-requirements .requirement i {
    width: 16px;
    margin-right: 0.5rem;
}

/* Tab customization for profile */
.nav-pills .nav-link {
    color: var(--green-primary);
    border-radius: 0.35rem;
    background-color: transparent;
    border: 1px solid transparent;
    transition: all 0.15s ease-in-out;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--green-secondary);
    color: #fff;
    border-color: var(--green-secondary);
}

.nav-pills .nav-link:hover {
    background-color: rgba(141, 160, 60, 0.15);
    color: var(--green-primary);
    border-color: rgba(141, 160, 60, 0.3);
}

.nav-pills .nav-link.active:hover,
.nav-pills .show > .nav-link:hover {
    background-color: var(--green-primary);
    color: #fff;
    border-color: var(--green-primary);
}

/* Button styling improvements */
.btn-outline-secondary {
    border-color: #d1d3e2;
    color: #6c757d;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

/* Input group button styling */
.input-group .btn-outline-secondary {
    border-left: none;
}

.input-group .form-control:focus + .input-group-append .btn-outline-secondary {
    border-color: #80bdff;
}

/* Secondary button improvements */
.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: #fff;
}

/* Primary button focus state */
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(141, 160, 60, 0.5);
}

/* Secondary button focus state */
.btn-secondary:focus,
.btn-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

/* Scrollable activity timeline in profile */
.activity-timeline-scroll {
    max-height: 570px; /* Atur sesuai kebutuhan */
    overflow-y: auto;
    padding-right: 8px; /* Agar tidak ketutup scrollbar */
}