:root {
    --bs-primary: #0b2f6e;
    --bs-primary-rgb: 11, 47, 110;
    --app-accent: #22c55e;
    --app-accent-2: #0b2f6e;
    --app-warm: #0b2f6e;
    --app-surface: rgba(255,255,255,.92);
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #082657;
}
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #082657;
    --bs-btn-hover-border-color: #082657;
    --bs-btn-active-bg: #061c40;
    --bs-btn-active-border-color: #061c40;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: rgba(var(--bs-primary-rgb), .65);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: #061c40;
    --bs-btn-active-border-color: #061c40;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.text-primary { color: var(--bs-primary) !important; }
.link-primary { color: var(--bs-primary) !important; }
.link-primary:hover, .link-primary:focus { color: #082657 !important; }
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), .55);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18);
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-input:focus {
    border-color: rgba(var(--bs-primary-rgb), .55);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18);
}
body {
    background:
        radial-gradient(900px 500px at 10% 10%, rgba(11,47,110,.22), transparent 55%),
        radial-gradient(700px 460px at 90% 15%, rgba(11,47,110,.18), transparent 60%),
        radial-gradient(800px 520px at 70% 90%, rgba(34,197,94,.14), transparent 60%),
        linear-gradient(180deg, #eef4ff, #e9f7ee);
    overflow: hidden;
}
.app-shell { height: 100vh; min-height: 100vh; }
.app-body { flex: 1; min-height: 0; }

.sidebar {
    width: 280px;
    background: linear-gradient(180deg, #0b2f6e, #0f6b8f 48%, #0f7a5d) !important;
    color: #fff;
    border-color: rgba(255,255,255,.18) !important;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.45) rgba(255,255,255,.12);
    position: relative;
    display: flex;
    flex-direction: column;
}
.sidebar-menu {
    flex: 1;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.45) rgba(255,255,255,.12);
    -webkit-overflow-scrolling: touch;
}
.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(240px 180px at 20% 10%, rgba(255,255,255,.14), transparent 60%),
        radial-gradient(240px 180px at 70% 40%, rgba(255,255,255,.10), transparent 60%),
        radial-gradient(240px 180px at 40% 85%, rgba(255,255,255,.08), transparent 60%);
    pointer-events: none;
}
.sidebar > * { position: relative; }
.sidebar .nav-link { color: rgba(255,255,255,.92); border-radius: .7rem; }
.sidebar .nav-link { position: relative; padding: .6rem .75rem; }
.sidebar .nav-link.active {
    background: rgba(255,255,255,.94);
    color: #0f6b28;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 60%;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff, rgba(255,255,255,.55));
}
.sidebar .nav-link:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar .text-secondary { color: rgba(255,255,255,.78) !important; }
.sidebar hr { border-color: rgba(255,255,255,.22); }
.sidebar .text-uppercase.small {
    letter-spacing: .12em;
    padding: .45rem .65rem;
    border-radius: .65rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
}

.app-header {
    background: linear-gradient(90deg, rgba(11,47,110,1), rgba(15,107,143,1), rgba(22,163,74,1));
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    position: relative;
}
.app-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, rgba(245,158,11,.55), rgba(34,197,94,.75), rgba(11,47,110,.45));
    opacity: .85;
}
.app-footer {
    background: linear-gradient(90deg, rgba(11,47,110,1), rgba(15,107,143,1), rgba(22,163,74,1));
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.18);
}
.content-scroll {
    overflow-y: scroll;
    background:
        radial-gradient(900px 500px at 10% 10%, rgba(255,255,255,.72), rgba(255,255,255,0) 60%),
        radial-gradient(900px 540px at 90% 90%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.35) rgba(0,0,0,.08);
    -webkit-overflow-scrolling: touch;
}
.card {
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 12px 34px rgba(0,0,0,.08);
    border-radius: 1rem;
    background: var(--app-surface);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(34,197,94,.85), rgba(245,158,11,.55), rgba(11,47,110,.50));
    opacity: .55;
}
.card-body > .fw-semibold.mb-1,
.card-body > .fw-semibold.mb-2,
.card-body > .fw-semibold.mb-3,
.card-body .d-flex > .fw-semibold {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .75rem;
    border-radius: .7rem;
    background: linear-gradient(90deg, rgba(11,47,110,.08), rgba(15,107,143,.10), rgba(22,163,74,.10));
    border: 1px solid rgba(11,47,110,.12);
    color: #0f2f63;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.card-body > .fw-semibold.mb-1::before,
.card-body > .fw-semibold.mb-2::before,
.card-body > .fw-semibold.mb-3::before,
.card-body .d-flex > .fw-semibold::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #0b2f6e, #16a34a);
    box-shadow: 0 0 0 3px rgba(11,47,110,.08);
}
.form-control, .form-select { border-radius: .8rem; }
.btn { border-radius: .8rem; }
.badge { border-radius: .7rem; }
.signature-box { position: absolute; cursor: move; border: 2px dashed rgba(var(--bs-primary-rgb), .6); border-radius: .6rem; }
.signature-handle { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; background: var(--bs-primary); border-radius: 4px; cursor: nwse-resize; }
.table { --bs-table-border-color: rgba(11, 47, 110, .28); }
.table > :not(caption) > * > * { border-color: var(--bs-table-border-color); }
.table thead th,
.table thead td {
    background: #0b2f6e !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .28) !important;
}
.table thead th a { color: #ffffff; }
.table-light { --bs-table-bg: rgba(var(--bs-primary-rgb), .08); }
.brand-logo { width: 44px; height: 44px; background: transparent; display:flex; align-items:center; justify-content:center; overflow: visible; }
.brand-logo img { width: 44px; height: 44px; object-fit: contain; display:block; }
.brand-logo-fallback { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.95); color: #0f6b28; display:flex; align-items:center; justify-content:center; font-weight: 800; font-size: .95rem; }
.header-title { line-height: 1.1; }
.page-title-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .75rem;
    border-radius: .75rem;
    background: #0b2f6e;
    color: #fff;
    border: 1px solid rgba(11,47,110,.35);
    box-shadow: 0 10px 24px rgba(11,47,110,.14);
}
.page-title-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #86efac;
    box-shadow: 0 0 0 3px rgba(11,47,110,.28);
    flex: 0 0 auto;
}
.header-pondok {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    max-width: 100%;
}
.header-pondok-name {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.inpage-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.header-system-logo {
    height: 32px;
    max-width: 240px;
    object-fit: contain;
    display: block;
}

.sidebar-offcanvas {
    width: 86vw;
    max-width: 320px;
}
.sidebar-offcanvas .offcanvas-header,
.sidebar-offcanvas .offcanvas-body {
    background: linear-gradient(180deg, #0b2f6e, #0f6b8f 48%, #0f7a5d) !important;
    color: #fff;
}
.sidebar-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255,255,255,.18);
}
.sidebar-offcanvas .nav-link { color: rgba(255,255,255,.92); border-radius: .7rem; }
.sidebar-offcanvas .nav-link.active {
    background: rgba(255,255,255,.94);
    color: #0f6b28;
}
.sidebar-offcanvas .nav-link:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar-offcanvas .text-secondary { color: rgba(255,255,255,.78) !important; }
.sidebar-offcanvas .text-uppercase.small { letter-spacing: .12em; }

@media (max-width: 768px) {
    .app-shell { height: 100dvh; min-height: 100dvh; }
    .header-system-logo { max-width: 170px; height: 28px; }
    .header-pondok-name {
        font-size: 16px;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .app-header .user-chip { padding: .3rem .45rem; }
}
.form-hint { display: none !important; }
.content-scroll::-webkit-scrollbar,
.sidebar-menu::-webkit-scrollbar { width: 6px; height: 6px; }
.content-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); border-radius: 8px; }
.content-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.08); }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 8px; }
.sidebar-menu::-webkit-scrollbar-track { background: rgba(255,255,255,.12); }
.user-chip { border: 1px solid rgba(255,255,255,.22); background: rgba(11,47,110,.55); border-radius: 999px; padding: .35rem .5rem; }

.presensi-status {
    white-space: nowrap;
}
.presensi-status .status-pill {
    border-radius: 999px !important;
    padding: .18rem .5rem;
    font-weight: 800;
    min-width: 34px;
    line-height: 1.2;
}
.btn-check + .status-h {
    color: #000;
    border-color: #ced4da;
    background: transparent;
}
.btn-check:checked + .status-h {
    background: #198754;
    border-color: #198754;
    color: #fff;
}
.btn-check + .status-i {
    color: #000;
    border-color: #ced4da;
    background: transparent;
}
.btn-check:checked + .status-i {
    background: #ffc107;
    border-color: #ffc107;
    color: #000;
}
.btn-check + .status-a {
    color: #000;
    border-color: #ced4da;
    background: transparent;
}
.btn-check:checked + .status-a {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
.btn-check + .status-s {
    color: #000;
    border-color: #ced4da;
    background: transparent;
}
.btn-check:checked + .status-s {
    background: #fd7e14;
    border-color: #fd7e14;
    color: #fff;
}