:root {
    --sirt-green: #198754;
}

body {
    background: #f5f7f9;
    color: #212529;
}

.logo-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--sirt-green);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 18px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.login-page {
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 25px rgba(0,0,0,.08);
}

.menu-link {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 13px 10px;
    border-radius: 10px;
    margin-bottom: 5px;
}

.menu-link:hover {
    background: #e9f7ef;
    color: var(--sirt-green);
}

.menu-link i {
    width: 28px;
}

.dashboard-button {
    background: white;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #212529;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: .2s;
}

.dashboard-button:hover {
    transform: translateY(-2px);
    color: var(--sirt-green);
}

.dashboard-button i {
    font-size: 24px;
    color: var(--sirt-green);
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: auto;
    border-radius: 50%;
    background: #d1e7dd;
    color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.table {
    vertical-align: middle;
}

@media (max-width: 576px) {

    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .stat-card {
        padding: 14px;
        border-radius: 13px;
    }

    .stat-card .fs-5 {
        font-size: 15px !important;
    }

    .login-card {
        padding: 22px;
    }

    h1 {
        font-size: 28px;
    }

    h3 {
        font-size: 22px;
    }

    .dashboard-button {
        padding: 16px;
    }

    .table {
        font-size: 13px;
    }

    .card-body {
        padding: 16px;
    }
}

.page-header {
    margin-bottom: 20px;
}

.public-menu-card {
    background: white;
    border-radius: 15px;
    padding: 18px 10px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    color: #212529;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: .2s;
    text-align: center;
}

.public-menu-card:hover {
    transform: translateY(-2px);
    color: #198754;
}

.public-menu-card i {
    font-size: 28px;
}

@media (max-width: 576px) {

    .public-menu-card {
        min-height: 95px;
        padding: 12px 8px;
    }

    .public-menu-card i {
        font-size: 24px;
    }

}

/* ==========================================
   STRUKTUR KEPENGURUSAN
   ========================================== */

.management-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    transition: .2s;
}

.management-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0,0,0,.08);
}

.management-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: #d1e7dd;
    color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.management-position {
    font-size: 12px;
    font-weight: 700;
    color: #198754;
    text-transform: uppercase;
}

.management-name {
    font-size: 17px;
    font-weight: 700;
    margin-top: 2px;
}

.management-wa {
    display: inline-block;
    margin-top: 5px;
    font-size: 12px;
    color: #198754;
    text-decoration: none;
}

.management-wa:hover {
    text-decoration: underline;
}

@media (max-width: 576px) {

    .management-card {
        padding: 12px;
    }

    .management-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
        font-size: 18px;
    }

    .management-name {
        font-size: 15px;
    }

}



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

.side-menu-link {

    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    padding: 14px 12px;

    margin-bottom: 4px;

    border-radius: 10px;

    text-decoration: none;

    color: #212529;

    font-size: 15px;

    transition: all .18s ease;

}


.side-menu-link i {

    width: 22px;

    text-align: center;

    font-size: 16px;

}


.side-menu-link:hover {

    background: #f0f8f4;

    color: #198754;

    transform: translateX(2px);

}


.side-menu-login {

    color: #198754;

    font-weight: 600;

}


.side-menu-login:hover {

    background: #d1e7dd;

    color: #146c43;

}


.side-menu-logout {

    color: #dc3545;

}


.side-menu-logout:hover {

    background: #f8d7da;

    color: #b02a37;

}


.side-menu-divider {

    height: 1px;

    background: #e9ecef;

    margin: 14px 4px;

}


.side-menu-footer {

    border-top: 1px solid #e9ecef;

    padding: 18px;

    margin-top: auto;

}


.offcanvas {

    width: 360px !important;

}


@media (max-width: 576px) {

    .offcanvas {

        width: 88vw !important;

        max-width: 360px;

    }

}




/* =========================================================
   STRUKTUR KEPENGURUSAN RT 04
   ========================================================= */

.management-card {

    background: #ffffff;

    border: 1px solid #e9ecef;

    border-radius: 15px;

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 14px;

    height: 100%;

    transition: .2s;

}


.management-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.08);

}


.management-icon {

    width: 52px;

    height: 52px;

    min-width: 52px;

    border-radius: 50%;

    background: #d1e7dd;

    color: #198754;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}


.management-info {

    min-width: 0;

}


.management-position {

    font-size: 12px;

    font-weight: 700;

    color: #198754;

    text-transform: uppercase;

}


.management-name {

    font-size: 17px;

    font-weight: 700;

    margin-top: 2px;

    word-break: break-word;

}


.management-wa {

    display: inline-block;

    margin-top: 5px;

    font-size: 12px;

    color: #198754;

    text-decoration: none;

}


.management-wa:hover {

    text-decoration: underline;

}


@media (max-width: 576px) {

    .management-card {

        padding: 12px;

    }


    .management-icon {

        width: 45px;

        height: 45px;

        min-width: 45px;

        font-size: 18px;

    }


    .management-name {

        font-size: 15px;

    }

}




/* ======================================================
   FOTO PENGGUNA
   ====================================================== */

.user-table-photo {

    width: 45px;

    height: 45px;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #d1e7dd;

}


.user-photo-empty {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e9ecef;

    color: #6c757d;

}


.profile-edit-photo {

    width: 180px;

    height: 180px;

    max-width: 100%;

    object-fit: cover;

    border-radius: 50%;

    border: 4px solid #d1e7dd;

}


.profile-empty {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e9ecef;

    color: #6c757d;

    font-size: 70px;

    margin-left: auto;

    margin-right: auto;

}


@media (max-width: 768px) {

    .profile-edit-photo {

        width: 140px;

        height: 140px;

    }

}




/* =========================================================
   SiRT04 - CARD TRANSPARAN BACKGROUND
   Versi final: transparansi ±50%
   ========================================================= */


/* Card statistik dashboard */
.public-stat-card,
.stat-card,
.dashboard-card {

    background: rgba(255, 255, 255, 0.50) !important;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    border: 1px solid rgba(255, 255, 255, 0.65) !important;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.12) !important;

}


/* Card menu dashboard */
.public-menu-card,
.menu-card {

    background: rgba(255, 255, 255, 0.50) !important;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    border: 1px solid rgba(255, 255, 255, 0.65) !important;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.12) !important;

}


/* Panel informasi / pengumuman */
.dashboard-panel,
.announcement-card,
.activity-card {

    background: rgba(255, 255, 255, 0.50) !important;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    border: 1px solid rgba(255, 255, 255, 0.65) !important;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.12) !important;

}


/* Card struktur kepengurusan */
.structure-card,
.pengurus-card {

    background: rgba(255, 255, 255, 0.50) !important;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    border: 1px solid rgba(255, 255, 255, 0.65) !important;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.12) !important;

}


/* Bootstrap card pada dashboard */
.dashboard-page .card {

    background: rgba(255, 255, 255, 0.50) !important;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

}


/* Judul utama agar tetap jelas di atas background */
.dashboard-page h1,
.dashboard-page h2,
.dashboard-page h3,
.dashboard-page h4 {

    text-shadow:
        0 1px 3px rgba(255, 255, 255, 0.85);

}


/* Teks pada card tetap kuat */
.public-stat-card,
.public-stat-card *,
.public-menu-card,
.public-menu-card *,
.dashboard-panel,
.dashboard-panel *,
.announcement-card,
.announcement-card *,
.activity-card,
.activity-card * {

    position: relative;

}


/* Saat mouse diarahkan ke card */
.public-stat-card:hover,
.public-menu-card:hover {

    background: rgba(255, 255, 255, 0.60) !important;

    transform: translateY(-2px);

    transition:
        all 0.2s ease;

}


/* Mobile */
@media (max-width: 576px) {

    .public-stat-card,
    .public-menu-card,
    .dashboard-panel,
    .announcement-card,
    .activity-card,
    .structure-card,
    .pengurus-card {

        background: rgba(255, 255, 255, 0.50) !important;

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);

    }

}


/* =========================================================
   END CARD TRANSPARAN
   ========================================================= */



/* =========================================================
   SiRT04 DARK MODE
   Pilihan hanya berlaku pada browser/user yang memilih
   ========================================================= */

html.dark-mode {
    color-scheme: dark;
}

html.dark-mode body {
    background-color: #121212 !important;
    color: #eeeeee !important;
}


/* Teks */
html.dark-mode .text-muted {
    color: #b8b8b8 !important;
}


/* Card */
html.dark-mode .card,
html.dark-mode .public-stat-card,
html.dark-mode .public-menu-card,
html.dark-mode .dashboard-panel,
html.dark-mode .announcement-card,
html.dark-mode .activity-card,
html.dark-mode .structure-card,
html.dark-mode .pengurus-card {

    background: rgba(30, 30, 30, 0.78) !important;

    color: #eeeeee !important;

    border-color: rgba(255, 255, 255, 0.12) !important;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.35) !important;
}


/* Card header */
html.dark-mode .card-header {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}


/* Card footer */
html.dark-mode .card-footer {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #eeeeee !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}


/* Tabel */
html.dark-mode table {
    color: #eeeeee !important;
}

html.dark-mode .table {
    --bs-table-color: #eeeeee;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(255,255,255,0.12);
}

html.dark-mode .table-light,
html.dark-mode .table-light th,
html.dark-mode .table-light td {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}


/* Form */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode textarea {

    background-color: #252525 !important;

    color: #ffffff !important;

    border-color: #555555 !important;
}

html.dark-mode .form-control::placeholder {
    color: #aaaaaa !important;
}

html.dark-mode .form-label {
    color: #eeeeee !important;
}


/* Input file */
html.dark-mode input[type="file"] {
    color: #eeeeee !important;
}


/* Alert */
html.dark-mode .alert {
    color: #eeeeee !important;
}


/* Dropdown */
html.dark-mode .dropdown-menu {
    background-color: #242424 !important;
    border-color: #444444 !important;
}

html.dark-mode .dropdown-item {
    color: #eeeeee !important;
}

html.dark-mode .dropdown-item:hover {
    background-color: #3a3a3a !important;
}


/* Modal */
html.dark-mode .modal-content {
    background-color: #222222 !important;
    color: #eeeeee !important;
    border-color: #444444 !important;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: #444444 !important;
}


/* Offcanvas / menu samping */
html.dark-mode .offcanvas {
    background-color: #181818 !important;
    color: #eeeeee !important;
}

html.dark-mode .offcanvas-header {
    border-bottom-color: #333333 !important;
}

html.dark-mode .side-menu-link {
    color: #eeeeee !important;
}

html.dark-mode .side-menu-link:hover {
    background-color: #2c2c2c !important;
}


/* Link */
html.dark-mode a {
    color: #7fc8ff;
}


/* Background transparan tetap terlihat */
html.dark-mode .public-stat-card,
html.dark-mode .public-menu-card {

    background: rgba(25, 25, 25, 0.68) !important;

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);
}


/* Logo tetap terlihat */
html.dark-mode img {
    image-rendering: auto;
}


/* Tombol mode */
.dark-mode-toggle {

    border: 1px solid rgba(255,255,255,0.25);

    min-width: 42px;

    height: 38px;

    border-radius: 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;
}

.dark-mode-toggle:hover {
    transform: translateY(-1px);
}


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



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

html.dark-mode .navbar.bg-success {

    background:
        rgba(18, 18, 18, 0.94) !important;

    border-bottom:
        1px solid rgba(255,255,255,0.12);

    box-shadow:
        0 2px 12px rgba(0,0,0,0.45) !important;

}


/* Tulisan SiRT04 di navbar */
html.dark-mode .navbar .navbar-brand {

    color: #ffffff !important;

}


/* Ikon hamburger */
html.dark-mode .navbar .btn-outline-light {

    color: #ffffff !important;

    border-color:
        rgba(255,255,255,0.35) !important;

}


/* Tombol dark mode */
html.dark-mode .navbar .dark-mode-toggle {

    background:
        rgba(255,255,255,0.08) !important;

    color:
        #ffffff !important;

    border-color:
        rgba(255,255,255,0.30) !important;

}


/* Hover tombol navbar */
html.dark-mode .navbar .dark-mode-toggle:hover {

    background:
        rgba(255,255,255,0.16) !important;

}


/* Logo navbar */
html.dark-mode .navbar img {

    background:
        #ffffff !important;

    border:
        1px solid rgba(255,255,255,0.35);

}


/* =========================================================
   END DARK MODE NAVBAR
   ========================================================= */



/* =========================================================
   SiRT04 GLASS UI
   Navbar + Menu Samping Transparan
   ========================================================= */


/* ---------------------------------------------------------
   NAVBAR GLASS
   --------------------------------------------------------- */

.navbar.bg-success {

    background:
        rgba(25, 135, 84, 0.78) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid rgba(255,255,255,0.22);

    box-shadow:
        0 4px 18px rgba(0,0,0,0.18) !important;

}


/* Dark Mode Navbar */

html.dark-mode .navbar.bg-success {

    background:
        rgba(15, 15, 15, 0.72) !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid rgba(255,255,255,0.14);

}


/* ---------------------------------------------------------
   MENU SAMPING GLASS
   --------------------------------------------------------- */

.offcanvas {

    background:
        rgba(20, 20, 20, 0.72) !important;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    border-right:
        1px solid rgba(255,255,255,0.18) !important;

    box-shadow:
        8px 0 30px rgba(0,0,0,0.25);

}


/* Header menu */

.offcanvas-header {

    background:
        rgba(25, 135, 84, 0.72) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid rgba(255,255,255,0.18) !important;

}


/* Dark Mode header menu */

html.dark-mode .offcanvas-header {

    background:
        rgba(15, 15, 15, 0.70) !important;

}


/* Isi menu */

.offcanvas-body {

    background:
        rgba(15, 15, 15, 0.48);

}


/* Link menu */

.offcanvas .side-menu-link {

    background:
        rgba(255,255,255,0.055);

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius:
        10px;

    margin-bottom:
        6px;

    color:
        #ffffff !important;

    transition:
        all 0.2s ease;

}


/* Hover menu */

.offcanvas .side-menu-link:hover {

    background:
        rgba(255,255,255,0.15);

    border-color:
        rgba(255,255,255,0.20);

    transform:
        translateX(2px);

}


/* Menu aktif */

.offcanvas .side-menu-link.active {

    background:
        rgba(25,135,84,0.55);

}


/* Divider */

.offcanvas .side-menu-divider {

    border-top:
        1px solid rgba(255,255,255,0.25) !important;

}


/* Footer menu */

.offcanvas .side-menu-footer {

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

}


/* ---------------------------------------------------------
   BACKDROP
   --------------------------------------------------------- */

.offcanvas-backdrop.show {

    opacity:
        0.48 !important;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

}


/* ---------------------------------------------------------
   TOMBOL CLOSE
   --------------------------------------------------------- */

.offcanvas .btn-close {

    filter:
        invert(1);

    opacity:
        0.85;

}


/* ---------------------------------------------------------
   LOGO NAVBAR
   --------------------------------------------------------- */

.navbar .navbar-brand img {

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.92);

    padding:
        2px;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.20);

}


/* ---------------------------------------------------------
   DARK MODE BODY
   --------------------------------------------------------- */

html.dark-mode .offcanvas-body {

    background:
        rgba(10,10,10,0.55);

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 576px) {

    .offcanvas {

        background:
            rgba(18,18,18,0.76) !important;

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

    }

    .navbar.bg-success {

        background:
            rgba(25,135,84,0.76) !important;

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);

    }

}


/* =========================================================
   END GLASS UI
   ========================================================= */



/* =========================================================
   SiRT04 FINAL GLASS THEME
   Transparan, background tetap terlihat
   Dark Mode dibuat lebih terang
   ========================================================= */


/* =========================================================
   NAVBAR MODE ORI
   ========================================================= */

.navbar.bg-success {

    background:
        rgba(25, 135, 84, 0.62) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    border-bottom:
        1px solid rgba(255,255,255,0.20) !important;

    box-shadow:
        0 3px 15px rgba(0,0,0,0.15) !important;

}


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

html.dark-mode .navbar.bg-success {

    background:
        rgba(25, 35, 45, 0.58) !important;

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

    border-bottom:
        1px solid rgba(255,255,255,0.16) !important;

    box-shadow:
        0 3px 15px rgba(0,0,0,0.22) !important;

}


/* =========================================================
   MENU SAMPING MODE ORI
   ========================================================= */

.offcanvas {

    background:
        rgba(25, 35, 35, 0.48) !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    border-right:
        1px solid rgba(255,255,255,0.20) !important;

    box-shadow:
        6px 0 25px rgba(0,0,0,0.20) !important;

}


/* Header menu Mode Ori */

.offcanvas-header {

    background:
        rgba(25, 135, 84, 0.60) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    border-bottom:
        1px solid rgba(255,255,255,0.18) !important;

}


/* =========================================================
   MENU DARK MODE
   Tidak dibuat hitam pekat
   ========================================================= */

html.dark-mode .offcanvas {

    background:
        rgba(35, 45, 55, 0.52) !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    border-right:
        1px solid rgba(255,255,255,0.18) !important;

    box-shadow:
        6px 0 25px rgba(0,0,0,0.28) !important;

}


/* Header menu Dark Mode */

html.dark-mode .offcanvas-header {

    background:
        rgba(30, 50, 65, 0.58) !important;

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

}


/* Isi menu */

.offcanvas-body {

    background:
        rgba(20, 30, 30, 0.25) !important;

}


/* Dark Mode isi menu */

html.dark-mode .offcanvas-body {

    background:
        rgba(25, 35, 45, 0.28) !important;

}


/* =========================================================
   LINK MENU
   ========================================================= */

.offcanvas .side-menu-link {

    background:
        rgba(255,255,255,0.055) !important;

    border:
        1px solid rgba(255,255,255,0.08) !important;

    border-radius:
        9px;

    color:
        #ffffff !important;

    margin-bottom:
        5px;

}


.offcanvas .side-menu-link:hover {

    background:
        rgba(255,255,255,0.14) !important;

    border-color:
        rgba(255,255,255,0.20) !important;

}


/* =========================================================
   CARD MODE ORI
   ========================================================= */

.public-stat-card,
.public-menu-card {

    background:
        rgba(255,255,255,0.54) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    border:
        1px solid rgba(255,255,255,0.48) !important;

    box-shadow:
        0 4px 16px rgba(0,0,0,0.12) !important;

}


/* =========================================================
   CARD DARK MODE
   Lebih terang dan transparan
   ========================================================= */

html.dark-mode .public-stat-card,
html.dark-mode .public-menu-card {

    background:
        rgba(55,65,75,0.48) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    border:
        1px solid rgba(255,255,255,0.18) !important;

    box-shadow:
        0 4px 16px rgba(0,0,0,0.20) !important;

}


/* =========================================================
   PANEL INFORMASI & AGENDA
   ========================================================= */

html.dark-mode .card {

    background:
        rgba(45,55,65,0.50) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    border-color:
        rgba(255,255,255,0.16) !important;

}


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

html.dark-mode body,
html.dark-mode .card,
html.dark-mode .public-stat-card,
html.dark-mode .public-menu-card {

    color:
        #f4f4f4 !important;

}


html.dark-mode .text-muted {

    color:
        rgba(255,255,255,0.76) !important;

}


/* =========================================================
   JUDUL DASHBOARD
   ========================================================= */

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {

    color:
        #ffffff !important;

}


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

.dark-mode-toggle {

    background:
        rgba(255,255,255,0.10) !important;

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

    border:
        1px solid rgba(255,255,255,0.28) !important;

}


/* =========================================================
   BACKDROP MENU
   ========================================================= */

.offcanvas-backdrop.show {

    opacity:
        0.30 !important;

}


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

@media (max-width: 576px) {

    .navbar.bg-success {

        background:
            rgba(25,135,84,0.60) !important;

    }


    html.dark-mode .navbar.bg-success {

        background:
            rgba(30,45,55,0.58) !important;

    }


    .offcanvas {

        background:
            rgba(25,35,35,0.50) !important;

    }


    html.dark-mode .offcanvas {

        background:
            rgba(35,45,55,0.54) !important;

    }


    html.dark-mode .public-stat-card,
    html.dark-mode .public-menu-card {

        background:
            rgba(55,65,75,0.50) !important;

    }

}


/* =========================================================
   END FINAL GLASS THEME
   ========================================================= */



/* =========================================================
   SiRT04 FINAL CARD UNIFICATION
   Semua card dashboard menggunakan glass yang sama
   ========================================================= */


/* ---------------------------------------------------------
   CARD DASHBOARD MODE ORI
   --------------------------------------------------------- */

.public-stat-card,
.public-menu-card {

    background:
        rgba(255,255,255,0.54) !important;

    backdrop-filter:
        blur(7px) !important;

    -webkit-backdrop-filter:
        blur(7px) !important;

    border:
        1px solid rgba(255,255,255,0.48) !important;

    box-shadow:
        0 4px 16px rgba(0,0,0,0.12) !important;

}


/* ---------------------------------------------------------
   SEMUA CARD DASHBOARD DARK MODE
   ATAS = BAWAH
   --------------------------------------------------------- */

html.dark-mode .public-stat-card,
html.dark-mode .public-menu-card,
html.dark-mode .public-stat-card.card,
html.dark-mode .public-menu-card.card {

    background:
        rgba(55,65,75,0.48) !important;

    backdrop-filter:
        blur(7px) !important;

    -webkit-backdrop-filter:
        blur(7px) !important;

    border:
        1px solid rgba(255,255,255,0.18) !important;

    box-shadow:
        0 4px 16px rgba(0,0,0,0.20) !important;

    color:
        #ffffff !important;

}


/* ---------------------------------------------------------
   PAKSA BAGIAN CARD DATA ATAS
   Supaya aturan .card lama tidak menimpa
   --------------------------------------------------------- */

html.dark-mode .public-stat-card .card-body,
html.dark-mode .public-menu-card .card-body {

    background:
        transparent !important;

    color:
        #ffffff !important;

}


/* ---------------------------------------------------------
   TEKS CARD
   --------------------------------------------------------- */

html.dark-mode .public-stat-card *,
html.dark-mode .public-menu-card * {

    color:
        inherit;

}


/* Nilai uang dibuat lebih tegas */

html.dark-mode .public-stat-card strong,
html.dark-mode .public-stat-card b {

    color:
        #ffffff !important;

}


/* ---------------------------------------------------------
   IKON CARD TETAP MENGGUNAKAN WARNA ASLINYA
   --------------------------------------------------------- */

html.dark-mode .public-stat-card .text-success,
html.dark-mode .public-menu-card .text-success {

    color:
        #20c997 !important;

}

html.dark-mode .public-stat-card .text-primary,
html.dark-mode .public-menu-card .text-primary {

    color:
        #0d6efd !important;

}

html.dark-mode .public-stat-card .text-danger,
html.dark-mode .public-menu-card .text-danger {

    color:
        #ff4d5f !important;

}

html.dark-mode .public-stat-card .text-warning,
html.dark-mode .public-menu-card .text-warning {

    color:
        #ffc107 !important;

}

html.dark-mode .public-stat-card .text-info,
html.dark-mode .public-menu-card .text-info {

    color:
        #00c7e8 !important;

}


/* ---------------------------------------------------------
   HOVER SEMUA CARD SAMA
   --------------------------------------------------------- */

html.dark-mode .public-stat-card:hover,
html.dark-mode .public-menu-card:hover {

    background:
        rgba(65,75,85,0.52) !important;

    border-color:
        rgba(255,255,255,0.24) !important;

    transform:
        translateY(-1px);

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 576px) {

    html.dark-mode .public-stat-card,
    html.dark-mode .public-menu-card,
    html.dark-mode .public-stat-card.card,
    html.dark-mode .public-menu-card.card {

        background:
            rgba(55,65,75,0.48) !important;

        backdrop-filter:
            blur(7px) !important;

        -webkit-backdrop-filter:
            blur(7px) !important;

    }

}


/* =========================================================
   END CARD UNIFICATION
   ========================================================= */



/* =========================================================
   SiRT04
   UNIFIED GLASS CARD SYSTEM
   SEMUA PANEL HARUS SAMA
   ========================================================= */


/* =========================================================
   MODE ORI / LIGHT
   ========================================================= */

.public-stat-card,
.public-menu-card,
.dashboard-info-card,
.dashboard-agenda-card,
#informasi,
#agenda,
.card {

    background:
        rgba(255,255,255,0.48) !important;

    backdrop-filter:
        blur(8px) !important;

    -webkit-backdrop-filter:
        blur(8px) !important;

    border:
        1px solid rgba(255,255,255,0.42) !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.14) !important;

}


/* =========================================================
   MODE DARK
   SEMUA PANEL SAMA
   ========================================================= */

html.dark-mode .public-stat-card,
html.dark-mode .public-menu-card,
html.dark-mode .dashboard-info-card,
html.dark-mode .dashboard-agenda-card,
html.dark-mode #informasi,
html.dark-mode #agenda,
html.dark-mode .card {

    background:
        rgba(45,55,65,0.50) !important;

    backdrop-filter:
        blur(8px) !important;

    -webkit-backdrop-filter:
        blur(8px) !important;

    border:
        1px solid rgba(255,255,255,0.18) !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.22) !important;

    color:
        #ffffff !important;

}


/* =========================================================
   CARD BODY TRANSPARAN
   Supaya tidak ada lapisan warna berbeda
   ========================================================= */

.public-stat-card .card-body,
.public-menu-card .card-body,
.dashboard-info-card .card-body,
.dashboard-agenda-card .card-body,
.card .card-body {

    background:
        transparent !important;

}


/* =========================================================
   HEADER PANEL
   INFORMASI + AGENDA
   ========================================================= */

.card-header {

    background:
        rgba(255,255,255,0.10) !important;

    backdrop-filter:
        blur(6px) !important;

    -webkit-backdrop-filter:
        blur(6px) !important;

    border-bottom:
        1px solid rgba(255,255,255,0.20) !important;

}


/* Dark header */

html.dark-mode .card-header {

    background:
        rgba(255,255,255,0.07) !important;

    border-bottom:
        1px solid rgba(255,255,255,0.16) !important;

    color:
        #ffffff !important;

}


/* =========================================================
   SEMUA TEKS DARK MODE
   ========================================================= */

html.dark-mode .public-stat-card,
html.dark-mode .public-menu-card,
html.dark-mode .card,
html.dark-mode .card-header,
html.dark-mode .card-body {

    color:
        #ffffff !important;

}


/* Jangan ubah warna ikon */

html.dark-mode .fa-wallet {
    color: #20c997 !important;
}

html.dark-mode .fa-arrow-down {
    color: #0d6efd !important;
}

html.dark-mode .fa-arrow-up {
    color: #ff4d5f !important;
}

html.dark-mode .fa-folder-open {
    color: #ffc107 !important;
}

html.dark-mode .fa-file-circle-exclamation {
    color: #ff4055 !important;
}

html.dark-mode .fa-calendar-days {
    color: #0d6efd !important;
}

html.dark-mode .fa-circle-info {
    color: #00c7e8 !important;
}


/* =========================================================
   GARIS PEMISAH
   ========================================================= */

html.dark-mode hr {

    border-color:
        rgba(255,255,255,0.18) !important;

    opacity:
        1 !important;

}


/* =========================================================
   LINK
   ========================================================= */

html.dark-mode .card a {

    color:
        #ffffff !important;

}


/* =========================================================
   HOVER
   SEMUA PANEL SAMA
   ========================================================= */

.public-stat-card:hover,
.public-menu-card:hover,
.dashboard-info-card:hover,
.dashboard-agenda-card:hover {

    background:
        rgba(255,255,255,0.56) !important;

}


html.dark-mode .public-stat-card:hover,
html.dark-mode .public-menu-card:hover,
html.dark-mode .dashboard-info-card:hover,
html.dark-mode .dashboard-agenda-card:hover {

    background:
        rgba(55,65,75,0.56) !important;

}


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

@media (max-width: 576px) {

    .public-stat-card,
    .public-menu-card,
    .dashboard-info-card,
    .dashboard-agenda-card,
    #informasi,
    #agenda,
    .card {

        background:
            rgba(255,255,255,0.48) !important;

        backdrop-filter:
            blur(8px) !important;

        -webkit-backdrop-filter:
            blur(8px) !important;

    }


    html.dark-mode .public-stat-card,
    html.dark-mode .public-menu-card,
    html.dark-mode .dashboard-info-card,
    html.dark-mode .dashboard-agenda-card,
    html.dark-mode #informasi,
    html.dark-mode #agenda,
    html.dark-mode .card {

        background:
            rgba(45,55,65,0.50) !important;

        backdrop-filter:
            blur(8px) !important;

        -webkit-backdrop-filter:
            blur(8px) !important;

    }

}


/* =========================================================
   END UNIFIED GLASS
   ========================================================= */



/* =========================================================
   DARK MODE - BACKGROUND SAJA
   Jangan mengubah card / menu / panel
   ========================================================= */

html.dark-mode body {

    background-color: transparent !important;

}


/*
   Background tetap terang dan terlihat jelas.
   Tidak mengubah warna card.
*/

html.dark-mode::before {

    opacity: 0.80 !important;

}


/* Jangan beri overlay gelap tambahan */

html.dark-mode body::before {

    opacity: 0.80 !important;

}


/* =========================================================
   END BACKGROUND ONLY
   ========================================================= */



/* =========================================================
   SiRT04 FINAL
   SAMAKAN STAT CARD DENGAN MENU CARD
   ========================================================= */


/* =========================================================
   MODE ORI
   ========================================================= */

.stat-card,
.public-menu-card {

    background:
        rgba(255,255,255,0.48) !important;

    backdrop-filter:
        blur(8px) !important;

    -webkit-backdrop-filter:
        blur(8px) !important;

    border:
        1px solid rgba(255,255,255,0.42) !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.14) !important;

}


/* =========================================================
   MODE DARK
   STAT CARD = MENU CARD
   ========================================================= */

html.dark-mode .stat-card,
html.dark-mode .public-menu-card {

    background:
        rgba(45,55,65,0.50) !important;

    backdrop-filter:
        blur(8px) !important;

    -webkit-backdrop-filter:
        blur(8px) !important;

    border:
        1px solid rgba(255,255,255,0.18) !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.20) !important;

    color:
        #ffffff !important;

}


/* =========================================================
   ISI STAT CARD TRANSPARAN
   ========================================================= */

.stat-card > *,
.public-menu-card > * {

    background:
        transparent !important;

}


/* =========================================================
   TEKS STAT CARD
   ========================================================= */

html.dark-mode .stat-card .small,
html.dark-mode .stat-card .fw-bold {

    color:
        #ffffff !important;

}


/* =========================================================
   ICON STAT CARD
   WARNA ICON TETAP
   ========================================================= */

html.dark-mode .stat-card .text-success {
    color: #20c997 !important;
}

html.dark-mode .stat-card .text-primary {
    color: #0d6efd !important;
}

html.dark-mode .stat-card .text-danger {
    color: #ff4d5f !important;
}

html.dark-mode .stat-card .text-warning {
    color: #ffc107 !important;
}


/* =========================================================
   HOVER SAMA
   ========================================================= */

.stat-card:hover,
.public-menu-card:hover {

    background:
        rgba(255,255,255,0.54) !important;

}


html.dark-mode .stat-card:hover,
html.dark-mode .public-menu-card:hover {

    background:
        rgba(50,60,70,0.54) !important;

}


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

@media (max-width: 576px) {

    .stat-card,
    .public-menu-card {

        background:
            rgba(255,255,255,0.48) !important;

        backdrop-filter:
            blur(8px) !important;

        -webkit-backdrop-filter:
            blur(8px) !important;

    }


    html.dark-mode .stat-card,
    html.dark-mode .public-menu-card {

        background:
            rgba(45,55,65,0.50) !important;

        backdrop-filter:
            blur(8px) !important;

        -webkit-backdrop-filter:
            blur(8px) !important;

    }

}


/* =========================================================
   END STAT CARD FIX
   ========================================================= */



/* =========================================================
   SiRT04 - FOTO PENGURUS DASHBOARD
   ========================================================= */

.management-card {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;

    background: rgba(255,255,255,0.50) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;

    border: 1px solid rgba(255,255,255,0.55) !important;

    border-radius: 14px !important;

    padding: 14px !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.15) !important;

    min-height: 110px;
}


/* FOTO */

.management-photo {
    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    border: 3px solid rgba(255,255,255,0.90) !important;

    box-shadow:
        0 3px 12px rgba(0,0,0,0.25) !important;

    display: block !important;
}


/* ICON JIKA BELUM ADA FOTO */

.management-icon {
    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(25,135,84,0.15) !important;

    color: #198754 !important;

    overflow: hidden !important;
}


/* INFO PENGURUS */

.management-info {
    flex: 1 !important;

    min-width: 0 !important;
}


.management-position {
    font-size: 0.78rem !important;

    font-weight: 700 !important;

    color: #198754 !important;

    text-transform: uppercase;

    margin-bottom: 5px !important;
}


.management-name {
    font-size: 1.05rem !important;

    font-weight: 700 !important;

    color: #222222 !important;

    line-height: 1.3 !important;

    word-break: break-word;
}


/* =========================================================
   DARK MODE
   FOTO TETAP JELAS, CARD TETAP TRANSPARAN
   ========================================================= */

html.dark-mode .management-card {

    background:
        rgba(45,55,65,0.50) !important;

    border:
        1px solid rgba(255,255,255,0.28) !important;

    color: #ffffff !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.20) !important;
}


html.dark-mode .management-name {

    color: #ffffff !important;

}


html.dark-mode .management-position {

    color: #52d99a !important;

}


html.dark-mode .management-icon {

    background:
        rgba(25,135,84,0.20) !important;

    color: #52d99a !important;
}


/* Foto jangan digelapkan oleh dark mode */

html.dark-mode .management-photo {

    opacity: 1 !important;

    filter: none !important;

}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 576px) {

    .management-card {

        min-height: 95px;

        padding: 10px !important;

        gap: 12px !important;

    }


    .management-photo,
    .management-icon {

        width: 68px !important;
        height: 68px !important;

        min-width: 68px !important;
        min-height: 68px !important;

    }


    .management-name {

        font-size: 0.95rem !important;

    }


    .management-position {

        font-size: 0.70rem !important;

    }

}



/* =========================================================
   ADMIN DASHBOARD
   SEMUA MENU CARD = GLASS TRANSPARAN
   ========================================================= */

.dashboard-button {

    background:
        rgba(255,255,255,0.48) !important;

    backdrop-filter:
        blur(8px) !important;

    -webkit-backdrop-filter:
        blur(8px) !important;

    border:
        1px solid rgba(255,255,255,0.42) !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,0.16) !important;

    color:
        #ffffff !important;

}


/* DARK MODE */

html.dark-mode .dashboard-button {

    background:
        rgba(45,55,65,0.50) !important;

    backdrop-filter:
        blur(8px) !important;

    -webkit-backdrop-filter:
        blur(8px) !important;

    border:
        1px solid rgba(255,255,255,0.18) !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,0.22) !important;

    color:
        #ffffff !important;

}


/* HOVER */

.dashboard-button:hover {

    background:
        rgba(255,255,255,0.54) !important;

}

html.dark-mode .dashboard-button:hover {

    background:
        rgba(50,60,70,0.54) !important;

}


/* ICON DAN ISI TETAP TRANSPARAN */

.dashboard-button i,
.dashboard-button span {

    background:
        transparent !important;

}


/* MOBILE */

@media (max-width:576px) {

    .dashboard-button {

        background:
            rgba(255,255,255,0.48) !important;

        backdrop-filter:
            blur(8px) !important;

        -webkit-backdrop-filter:
            blur(8px) !important;

    }

    html.dark-mode .dashboard-button {

        background:
            rgba(45,55,65,0.50) !important;

    }

}



/* =========================================================
   LOGIN PAGE - GLASS UI SiRT04
   ========================================================= */

.login-card {

    width: 100%;
    max-width: 420px;

    background:
        rgba(255,255,255,0.48) !important;

    backdrop-filter:
        blur(10px) !important;

    -webkit-backdrop-filter:
        blur(10px) !important;

    border:
        1px solid rgba(255,255,255,0.48) !important;

    border-radius:
        20px !important;

    padding:
        30px !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.18) !important;

}


/* =========================================================
   DARK MODE
   Transparan, jangan terlalu gelap
   ========================================================= */

html.dark-mode .login-card {

    background:
        rgba(45,55,65,0.50) !important;

    backdrop-filter:
        blur(10px) !important;

    -webkit-backdrop-filter:
        blur(10px) !important;

    border:
        1px solid rgba(255,255,255,0.20) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.24) !important;

    color:
        #ffffff !important;

}


/* =========================================================
   TEKS LOGIN
   ========================================================= */

html.dark-mode .login-card h2,
html.dark-mode .login-card label {

    color:
        #ffffff !important;

}


html.dark-mode .login-card .text-muted {

    color:
        rgba(255,255,255,0.78) !important;

}


/* =========================================================
   INPUT LOGIN
   ========================================================= */

.login-card .form-control {

    background:
        rgba(255,255,255,0.72) !important;

    border:
        1px solid rgba(255,255,255,0.45) !important;

    backdrop-filter:
        blur(6px) !important;

    -webkit-backdrop-filter:
        blur(6px) !important;

}


html.dark-mode .login-card .form-control {

    background:
        rgba(20,25,30,0.42) !important;

    color:
        #ffffff !important;

    border:
        1px solid rgba(255,255,255,0.20) !important;

}


html.dark-mode .login-card .form-control::placeholder {

    color:
        rgba(255,255,255,0.65) !important;

}


/* =========================================================
   LOGO LOGIN
   ========================================================= */

.login-logo-wrap {

    width:
        130px;

    height:
        130px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,0.55);

    border:
        2px solid rgba(255,255,255,0.72);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    overflow:
        hidden;

    box-shadow:
        0 8px 22px rgba(0,0,0,0.16);

}


.login-logo {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    padding:
        5px;

}


.login-logo-fallback {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #ffffff;

    background:
        rgba(25,135,84,0.85);

    font-size:
        48px;

}


/* DARK LOGO */

html.dark-mode .login-logo-wrap {

    background:
        rgba(45,55,65,0.42);

    border:
        2px solid rgba(255,255,255,0.22);

    box-shadow:
        0 8px 22px rgba(0,0,0,0.22);

}


html.dark-mode .login-logo-fallback {

    background:
        rgba(25,135,84,0.72);

}


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

.login-card .btn-success {

    box-shadow:
        0 5px 15px rgba(0,0,0,0.14);

}


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

@media (max-width:576px) {

    .login-card {

        padding:
            24px !important;

        border-radius:
            20px !important;

    }

    .login-logo-wrap {

        width:
            120px;

        height:
            120px;

    }

}


/* =========================================================
   WHATSAPP QR RESPONSIVE
   ========================================================= */

.wa-qr-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,.10);
}

.wa-qr-image {
    display: block;
    width: 300px;
    height: 300px;
    max-width: 75vw;
    max-height: 75vw;
    object-fit: contain;
}

@media (max-width: 576px) {

    .wa-qr-box {
        padding: 10px;
        border-radius: 12px;
    }

    .wa-qr-image {
        width: 260px;
        height: 260px;
        max-width: 78vw;
        max-height: 78vw;
    }

}

html.dark-mode .wa-qr-box {
    background: #ffffff !important;
    border-color: rgba(255,255,255,.25);
}



/* =========================================================
   SiRT04 - STANDARD LEBAR HALAMAN
   Menyamakan Dashboard, Keuangan, Laporan, User dan Admin
   ========================================================= */

main .sirt-page-shell {
    width: 100% !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 14px !important;
    padding-right: 14px !important;

    box-sizing: border-box !important;
}


/* Semua row di halaman menggunakan lebar penuh */

.sirt-page-shell > .row,
.sirt-page-shell .row {
    width: 100%;
}


/* Card utama mengikuti lebar container */

.sirt-page-shell > .card,
.sirt-page-shell > form > .card {
    width: 100%;
    max-width: none !important;
}


/* Mencegah card/form tertentu menyempit sendiri */

.sirt-page-shell .card {
    box-sizing: border-box;
}


/* Tabel tetap aman dan tidak keluar layar */

.sirt-page-shell .table-responsive {
    width: 100%;
}


/* Form yang sebelumnya dibatasi max-width */

.sirt-page-shell form {
    max-width: none;
}


/* Desktop */

@media (min-width: 1200px) {

    main .sirt-page-shell {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

}


/* Tablet */

@media (max-width: 991.98px) {

    main .sirt-page-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

}


/* HP */

@media (max-width: 576px) {

    main .sirt-page-shell {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

}


/* =========================================================
   SIRT04 DATA WARGA
   CARD MENGIKUTI CARD GLOBAL SiRT04
   ========================================================= */

/* Light Mode */
.data-warga-card {
    background: rgba(255,255,255,0.48) !important;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    border: 1px solid rgba(255,255,255,0.42) !important;

    border-radius: 0.75rem !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.14) !important;

    color: #212529;

    overflow: hidden;

    margin-bottom: 1rem;
}


/* Dark Mode */
html.dark-mode .data-warga-card {
    background:
        rgba(45,55,65,0.50) !important;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    border:
        1px solid rgba(255,255,255,0.18) !important;

    border-radius:
        0.75rem !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.22) !important;

    color:
        rgba(255,255,255,0.92) !important;

    overflow:
        hidden;
}


/* Isi card */
.data-warga-card > * {
    position: relative;
}


/* Judul di dalam card */
html.dark-mode .data-warga-card h1,
html.dark-mode .data-warga-card h2,
html.dark-mode .data-warga-card h3,
html.dark-mode .data-warga-card h4,
html.dark-mode .data-warga-card h5,
html.dark-mode .data-warga-card h6 {
    color:
        #ffffff !important;
}


/* Teks */
html.dark-mode .data-warga-card p,
html.dark-mode .data-warga-card span,
html.dark-mode .data-warga-card label,
html.dark-mode .data-warga-card small,
html.dark-mode .data-warga-card strong {
    color:
        rgba(255,255,255,0.88) !important;
}


/* Keterangan */
html.dark-mode .data-warga-card .text-muted,
html.dark-mode .data-warga-card .muted {
    color:
        rgba(255,255,255,0.62) !important;
}


/* Input */
html.dark-mode .data-warga-card .form-control,
html.dark-mode .data-warga-card .form-select,
html.dark-mode .data-warga-card textarea,
html.dark-mode .data-warga-card input {
    background:
        rgba(20,25,30,0.72) !important;

    color:
        #ffffff !important;

    border:
        1px solid rgba(255,255,255,0.20) !important;
}


/* Placeholder */
html.dark-mode .data-warga-card input::placeholder,
html.dark-mode .data-warga-card textarea::placeholder {
    color:
        rgba(255,255,255,0.55) !important;
}


/* File input */
html.dark-mode .data-warga-card input[type="file"] {
    background:
        rgba(20,25,30,0.72) !important;

    color:
        rgba(255,255,255,0.82) !important;
}


/* Tabel */
html.dark-mode .data-warga-card table {
    color:
        #ffffff !important;

    --bs-table-bg:
        transparent;

    --bs-table-color:
        #ffffff;

    --bs-table-border-color:
        rgba(255,255,255,0.12);
}


/* Header tabel */
html.dark-mode .data-warga-card th {
    background:
        rgba(255,255,255,0.07) !important;

    color:
        #ffffff !important;

    border-color:
        rgba(255,255,255,0.16) !important;
}


/* Isi tabel */
html.dark-mode .data-warga-card td {
    color:
        rgba(255,255,255,0.88) !important;

    border-color:
        rgba(255,255,255,0.12) !important;
}


/* Hover card */
html.dark-mode .data-warga-card:hover {
    background:
        rgba(55,65,75,0.56) !important;

    border-color:
        rgba(255,255,255,0.24) !important;
}


/* =========================================================
   CARD REVIEW OCR
   ========================================================= */

.review-card {
    background:
        rgba(255,255,255,0.48) !important;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    border:
        1px solid rgba(255,255,255,0.42) !important;

    border-radius:
        0.75rem !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.14) !important;
}


html.dark-mode .review-card {
    background:
        rgba(45,55,65,0.50) !important;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    border:
        1px solid rgba(255,255,255,0.18) !important;

    border-radius:
        0.75rem !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.22) !important;

    color:
        rgba(255,255,255,0.92) !important;
}


html.dark-mode .review-card h1,
html.dark-mode .review-card h2,
html.dark-mode .review-card h3,
html.dark-mode .review-card h4,
html.dark-mode .review-card h5 {
    color:
        #ffffff !important;
}


html.dark-mode .review-card p,
html.dark-mode .review-card label,
html.dark-mode .review-card span,
html.dark-mode .review-card small {
    color:
        rgba(255,255,255,0.88) !important;
}


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

.dw-camera-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 14px 0;
}


.dw-camera-btn,
.dw-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 42px;

    padding: 9px 18px;

    border-radius: 0.5rem;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;
}


.dw-camera-btn {
    background:
        #198754 !important;

    color:
        #ffffff !important;

    border:
        1px solid rgba(25,135,84,0.9);
}


.dw-file-btn {
    background:
        rgba(255,255,255,0.08) !important;

    color:
        inherit !important;

    border:
        1px solid rgba(255,255,255,0.18);
}


html.dark-mode .dw-file-btn {
    background:
        rgba(255,255,255,0.08) !important;

    color:
        #ffffff !important;

    border:
        1px solid rgba(255,255,255,0.20);
}


.dw-camera-input,
.dw-file-input {
    display: none !important;
}


.dw-selected-file {
    margin-top: 8px;

    padding: 7px 10px;

    border-radius: 6px;

    text-align: center;

    font-size: 13px;

    background:
        rgba(255,255,255,0.06);

    color:
        inherit;

    min-height: 20px;
}


html.dark-mode .dw-selected-file {
    background:
        rgba(255,255,255,0.06);

    color:
        rgba(255,255,255,0.82) !important;
}


@media (max-width: 600px) {

    .dw-camera-buttons {
        flex-direction: column;
    }

    .dw-camera-btn,
    .dw-file-btn {
        width: 100%;
    }
}