:root {
    --hijrah-maroon: #861f24;
    --hijrah-maroon-dark: #5f1015;
}

body.bg-gradient-primary {
    min-height: 100vh;
    background-color: var(--hijrah-maroon) !important;
    background-image: linear-gradient(135deg, var(--hijrah-maroon) 0%, var(--hijrah-maroon-dark) 100%) !important;
}

body.bg-gradient-primary .card {
    border-radius: .75rem;
}

body.bg-gradient-primary a { color: var(--hijrah-maroon); }

.bg-gradient-primary {
    background-color: var(--hijrah-maroon) !important;
    background-image: linear-gradient(180deg, var(--hijrah-maroon) 10%, var(--hijrah-maroon-dark) 100%) !important;
}

.btn-primary {
    background-color: var(--hijrah-maroon) !important;
    border-color: var(--hijrah-maroon) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--hijrah-maroon-dark) !important;
    border-color: var(--hijrah-maroon-dark) !important;
}

.text-primary { color: var(--hijrah-maroon) !important; }
.border-left-primary { border-left-color: var(--hijrah-maroon) !important; }
.border-bottom-primary { border-bottom-color: var(--hijrah-maroon) !important; }
.page-item.active .page-link {
    background-color: var(--hijrah-maroon) !important;
    border-color: var(--hijrah-maroon) !important;
}
.page-link { color: var(--hijrah-maroon); }

.sidebar .sidebar-brand.hijrah-brand {
    height: 6rem;
    padding: .5rem .5rem;
    overflow: visible;
    flex-shrink: 0;
}

.sidebar .sidebar-brand .hijrah-brand-name {
    display: block;
    margin: 0 !important;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: .04rem;
}

.sidebar .sidebar-brand .hijrah-sidebar-logo {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    transition: width .2s ease, height .2s ease, border-radius .2s ease;
}

.sidebar.toggled .sidebar-brand .hijrah-sidebar-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 10px;
}

.hijrah-sidebar-toggle {
    width: 2.25rem;
    height: 2.25rem;
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

.hijrah-sidebar-toggle::after {
    font-weight: 900;
    content: '\f104';
    font-family: 'Font Awesome 5 Free';
}

.sidebar.toggled .hijrah-sidebar-toggle::after { content: '\f105'; }

.topbar-datetime {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #6e707e;
    white-space: nowrap;
}

/*
 * Header aplikasi selalu terlihat ketika halaman digulir.
 * Fixed dipakai karena content-wrapper bawaan tema memiliki overflow-x:hidden
 * yang membuat position:sticky tidak bekerja pada sebagian browser.
 */
#content {
    padding-top: 5.875rem;
}

#content > .topbar {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 6.5rem;
    width: auto;
    margin-bottom: 0 !important;
    z-index: 1030;
    transition: left .15s ease;
}

body.sidebar-toggled #content > .topbar {
    left: 0;
}

.sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}

#content > .topbar .dropdown-menu {
    z-index: 1040;
}

@media (min-width: 768px) {
    #content > .topbar {
        left: 14rem;
    }

    body.sidebar-toggled #content > .topbar {
        left: 6.5rem;
    }
}

.topbar-clock {
    font-variant-numeric: tabular-nums;
    color: var(--hijrah-maroon);
}

.attendance-actions {
    display: grid;
    grid-template-columns: auto minmax(190px, 1fr) minmax(150px, 1fr);
    gap: .75rem;
    max-width: 850px;
}

.attendance-start-button,
.attendance-summary-card {
    min-height: 58px;
    border-radius: .5rem;
}

.attendance-start-button { padding-left: 1.25rem; padding-right: 1.25rem; }

.attendance-summary-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .55rem .9rem;
    color: #5a5c69;
    background: #fff;
    border: 1px solid #e3e6f0;
}

.attendance-summary-card small { margin-bottom: .1rem; }
.attendance-leave-card:hover { color: var(--hijrah-maroon); text-decoration: none; border-color: var(--hijrah-maroon); }
.attendance-list {
    width: 100%;
    max-width: 1150px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .sidebar .sidebar-brand.hijrah-brand { height: 5.5rem; padding: .4rem .25rem; overflow: visible; }
    .sidebar .sidebar-brand .hijrah-brand-name { font-size: .65rem; }
    .sidebar .sidebar-brand .hijrah-sidebar-logo { width: 54px; height: 54px; object-fit: contain; border-radius: 10px; }

    .topbar { padding-left: .65rem; padding-right: .65rem; }
    .topbar-datetime { flex-direction: column; align-items: flex-start; gap: 0; font-size: .7rem; line-height: 1.25; }
    .topbar-clock { font-size: .85rem; }
    .topbar #sidebarToggleTop { margin-right: .25rem !important; }
    .topbar .nav-item .nav-link { padding-left: .4rem; padding-right: .4rem; }

    .container-fluid > h1.h3 { font-size: 1.35rem; margin-bottom: 1rem !important; }
    .attendance-actions { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .attendance-start-button { grid-column: 1 / -1; width: 100%; font-size: 1rem; }
    .attendance-summary-card { min-height: 64px; padding: .5rem .65rem; }
    .attendance-summary-card small { font-size: .67rem; }

    .attendance-table,
    .attendance-table tbody,
    .attendance-table tr,
    .attendance-table td,
    .attendance-table th { display: block; width: 100%; }
    .attendance-table thead { display: none; }
    .attendance-table { border: 0; background: transparent; }
    .attendance-list { overflow-x: auto !important; touch-action: pan-x pan-y; }
    .attendance-table tbody tr {
        margin-bottom: .9rem;
        padding: .35rem .75rem;
        overflow: hidden;
        background: #fff;
        border: 1px solid #e3e6f0;
        border-left: 4px solid var(--hijrah-maroon);
        border-radius: .55rem;
        box-shadow: 0 .15rem .45rem rgba(58, 59, 69, .08);
    }
    .attendance-table tbody td,
    .attendance-table tbody th {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        min-height: 38px;
        padding: .45rem 0 !important;
        text-align: right !important;
        border: 0;
        border-bottom: 1px solid #f0f1f5;
    }
    .attendance-table tbody td::before,
    .attendance-table tbody th::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: #858796;
        font-size: .72rem;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
    }
    .attendance-table tbody tr > :last-child { border-bottom: 0; }
    .attendance-row-action .btn { min-width: 95px; }
}