/* =========================================================
   ABSENSI MODERN SOFT
   ========================================================= */

html,
body {

    min-height: 100%;

    background:
        #f4f7fb !important;

}


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color:
        #334155;

}


/* =========================================================
   AREA
   ========================================================= */

.absensi-page {

    padding:
        12px 15px 25px;

}


.absensi-card {

    max-width:
        1050px;

    margin:
        0 auto;

    background:
        #ffffff;

    border:
        0 !important;

    border-top:
        0 !important;

    border-radius:
        22px !important;

    overflow:
        hidden;

    box-shadow:
        0 10px 30px
        rgba(51,65,85,.08);

}


/* =========================================================
   HEADER
   ========================================================= */

.absensi-header {

    text-align:
        center;

    padding:
        12px 20px 10px;

}


.logo-absensi {

    display:
        block;

    max-width:
        135px;

    max-height:
        62px;

    width:
        auto;

    height:
        auto;

    margin:
        0 auto 5px;

    object-fit:
        contain;

}


.judul-absensi {

    margin:
        3px 0 4px;

    font-size:
        27px;

    line-height:
        1.15;

    font-weight:
        700;

    color:
        #30445a;

}


.tanggal-absensi {

    margin:
        0 0 4px;

    font-size:
        13px;

    color:
        #7a8795;

}


.jam-absensi {

    margin:
        0 0 2px;

    font-size:
        29px;

    line-height:
        1.1;

    font-weight:
        700;

    color:
        #30445a;

}


.status-label {

    margin:
        0;

    font-size:
        13px;

    color:
        #7a8795;

}


.status-label .fa {

    color:
        #75a5bd;

    margin-right:
        3px;

}


.status-label strong {

    color:
        #c88842;

}


/* =========================================================
   BODY
   ========================================================= */

.absensi-body {

    padding:
        0 28px 20px;

}


/* =========================================================
   INFORMASI
   ========================================================= */

.info-soft {

    margin:
        0 0 12px;

    padding:
        11px 18px;

    background:
        #edf6fc;

    border:
        1px solid
        #d7eaf5;

    border-radius:
        15px;

    color:
        #4d7185;

}


.info-title {

    margin-bottom:
        5px;

    font-size:
        13px;

    font-weight:
        700;

    text-align:
        center;

}


.info-title .fa {

    color:
        #5f9ab5;

}


.info-jadwal {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        15px;

    flex-wrap:
        wrap;

    font-size:
        12px;

}


.info-jadwal .fa {

    margin-right:
        3px;

    color:
        #6098b0;

}


.info-jadwal strong {

    color:
        #416b7e;

}


.info-divider {

    width:
        1px;

    height:
        16px;

    background:
        #bdd7e4;

}


/* =========================================================
   SCANNER - BIRU AGAK GELAP
   ========================================================= */

.scanner-box {

    margin:
        0 0 12px;

    background:
        #eef4f8;

    border:
        1px solid
        #cbdce7;

    border-radius:
        15px;

    overflow:
        hidden;

}


.scanner-header {

    padding:
        12px 18px;

    background:
        #315b78;

    border-bottom:
        1px solid
        #294f69;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;

}


.scanner-header .fa {

    color:
        #d8ebf5;

    margin-right:
        5px;

}


.scanner-body {

    padding:
        13px 17px 15px;

}


.scanner-label {

    display:
        block;

    margin:
        0 0 5px;

    color:
        #4d6576;

    font-size:
        12px;

    font-weight:
        600;

}


.scanner-label .fa {

    color:
        #4d7893;

    margin-right:
        3px;

}


#barcode {

    display:
        block;

    width:
        100%;

    height:
        48px !important;

    padding:
        4px 15px;

    border:
        1px solid
        #b9cfdd !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    color:
        #334155;

    font-size:
        18px !important;

    text-align:
        center;

    outline:
        none !important;

    box-shadow:
        none !important;

}


#barcode::placeholder {

    color:
        #9ba8b2;

}


#barcode:focus {

    border-color:
        #477b9c !important;

    box-shadow:
        0 0 0 3px
        rgba(71,123,156,.12) !important;

}


/* =========================================================
   HASIL
   ========================================================= */

.hasil-absensi {

    padding:
        16px;

    border-radius:
        15px !important;

    border:
        1px solid transparent !important;

    text-align:
        center;

}


.hasil-success {

    background:
        #eef9f2 !important;

    border-color:
        #d8eddf !important;

    color:
        #47725a !important;

}


.hasil-warning {

    background:
        #fff8e9 !important;

    border-color:
        #f2e5c8 !important;

    color:
        #7b663f !important;

}


.hasil-danger {

    background:
        #fff1f2 !important;

    border-color:
        #f3d7d9 !important;

    color:
        #99585d !important;

}


.hasil-icon {

    width:
        45px;

    height:
        45px;

    margin:
        0 auto 7px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        19px;

}


.hasil-success .hasil-icon {

    background:
        #cfe9d7;

    color:
        #4b8760;

}


.hasil-warning .hasil-icon {

    background:
        #f4dfb1;

    color:
        #94743d;

}


.hasil-danger .hasil-icon {

    background:
        #f1c8cc;

    color:
        #a55b61;

}


.hasil-jenis {

    margin:
        0 0 3px;

    font-size:
        13px;

    font-weight:
        700;

}


.hasil-nama {

    margin:
        0 0 3px;

    font-size:
        23px;

    font-weight:
        700;

}


.hasil-identitas,
.hasil-kelas {

    margin:
        0 0 4px;

    font-size:
        13px;

}


.foto-hasil {

    min-width:
        400px;

    height:
        auto;

    margin:
        8px auto;

    border-radius:
        13px !important;

    object-fit:
        cover;

    border:
        3px solid
        rgba(255,255,255,.9);

}


.hasil-pesan {

    margin:
        7px 0 3px;

    font-size:
        16px;

    font-weight:
        700;

}


.hasil-waktu,
.hasil-wa {

    margin:
        3px 0 0;

    font-size:
        12px;

}


.hasil-wa {

    font-weight:
        600;

}


.hasil-wa .fa {

    margin-right:
        3px;

}


.hasil-wa.ok {

    color:
        #4b8760;

}


.hasil-wa.fail {

    color:
        #a55b61;

}


/* =========================================================
   HILANGKAN GARIS BIRU ADMINLTE
   ========================================================= */

.box,
.box-primary,
.box-warning,

/* =========================================================
   ABSENSI - FINAL CLEAN THEME
   Satu bidang warna: page + card + header + body + footer
   Tidak ada override/dobel untuk elemen absensi.
   ========================================================= */

:root {
    --absensi-teal: #239f91;
    --absensi-teal-light: #66c7b8;
    --absensi-mint: #b9e4dc;
    --absensi-lavender: #d7d0e5;
    --absensi-page: #dceeea;
    --absensi-text: #315f68;
    --absensi-text-soft: #557b82;
    --absensi-border: rgba(72, 160, 151, .28);
}


/* =========================================================
   PAGE
   ========================================================= */

html,
body {
    min-height: 100%;
    background:
        linear-gradient(
            135deg,
            #d7eee9 0%,
            #e5eef1 48%,
            #e6ddeb 100%
        ) !important;
}

.absensi-page {
    position: relative !important;
    min-height: 100vh !important;
    padding: 12px 15px 24px !important;
    box-sizing: border-box !important;
    background:
        linear-gradient(
            135deg,
            #d7eee9 0%,
            #cbe8e2 32%,
            #dbe8ec 62%,
            #e4dbea 100%
        ) !important;
    overflow: hidden !important;
}


/* Ornamen page sangat lembut */

.absensi-page::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    left: -250px;
    top: -190px;
    border: 75px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    pointer-events: none;
}

.absensi-page::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -290px;
    bottom: -270px;
    border: 85px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    pointer-events: none;
}


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

.absensi-page .absensi-card {
    position: relative !important;
    z-index: 2 !important;

    max-width: 1050px !important;
    margin: 0 auto !important;

    overflow: hidden !important;
    isolation: isolate !important;

    /*
       SATU GRADIENT UNTUK SELURUH CARD.
       Header/body/footer dibuat transparan agar
       tidak muncul garis atau batas warna.
    */
    background:
        linear-gradient(
            135deg,
            #75cdbc 0%,
            #a4dcd2 25%,
            #c9e4df 48%,
            #d9d7e7 72%,
            #b8d8e1 100%
        ) !important;

    border: 1px solid rgba(76, 161, 153, .30) !important;
    border-radius: 22px !important;

    box-shadow:
        0 15px 38px rgba(57, 111, 116, .16) !important;
}


/* Ornamen geometris menyatu dengan card */

.absensi-page .absensi-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;

    background-image:
        linear-gradient(
            45deg,
            transparent 47%,
            rgba(255, 255, 255, .09) 48%,
            rgba(255, 255, 255, .09) 50%,
            transparent 51%
        ),
        linear-gradient(
            -45deg,
            transparent 47%,
            rgba(55, 155, 147, .055) 48%,
            rgba(55, 155, 147, .055) 50%,
            transparent 51%
        );

    background-size: 72px 72px;
    opacity: .65;
    pointer-events: none;
}

.absensi-page .absensi-card::after {
    content: "";
    position: absolute;
    z-index: 0;

    width: 330px;
    height: 330px;
    right: -170px;
    bottom: -180px;

    border: 70px solid rgba(255, 255, 255, .10);
    border-radius: 50%;

    pointer-events: none;
}


/* Semua isi berada di atas ornamen */

.absensi-page .absensi-card > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
   Header TIDAK menjadi kotak terpisah.
   Warnanya transparan dan mengikuti card utama.
   ========================================================= */

.absensi-page .absensi-card .absensi-header {
    position: relative !important;
    z-index: 3 !important;

    padding: 18px 15px 16px !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: #315965 !important;
}


/* Cahaya lembut pada area header */

.absensi-page .absensi-card .absensi-header::before {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;
    left: -125px;
    top: -180px;

    border-radius: 50%;
    background: rgba(255, 255, 255, .18);

    pointer-events: none;
}

.absensi-page .absensi-card .absensi-header::after {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;
    right: -150px;
    top: -180px;

    border-radius: 50%;
    background: rgba(219, 205, 232, .15);

    pointer-events: none;
}


/* Teks header */

.absensi-page .absensi-card .absensi-header > * {
    position: relative;
    z-index: 3;
}

.absensi-page .absensi-card .absensi-header h1,
.absensi-page .absensi-card .absensi-header h2,
.absensi-page .absensi-card .absensi-header h3,
.absensi-page .absensi-card .absensi-header .judul,
.absensi-page .absensi-card .absensi-header .title {
    color: #315665 !important;
    opacity: 1 !important;
}

.absensi-page .absensi-card .absensi-header .tanggal,
.absensi-page .absensi-card .absensi-header .date,
.absensi-page .absensi-card .absensi-header .subjudul {
    color: #557b82 !important;
    opacity: 1 !important;
}

.absensi-page .absensi-card .absensi-header .jam,
.absensi-page .absensi-card .absensi-header .clock,
.absensi-page .absensi-card .absensi-header .time {
    color: #315665 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

.absensi-page .absensi-card .absensi-header .status-jam,
.absensi-page .absensi-card .absensi-header .status {
    color: #557b82 !important;
}

.absensi-page .absensi-card .absensi-header .status-masuk {
    color: #178b7d !important;
    font-weight: 700 !important;
}

.absensi-page .absensi-card .absensi-header .status-pulang,
.absensi-page .absensi-card .absensi-header .status-terlambat {
    color: #c27b32 !important;
    font-weight: 700 !important;
}

.absensi-page .absensi-card .absensi-header .multiuser,
.absensi-page .absensi-card .absensi-header .multiuser-info,
.absensi-page .absensi-card .absensi-header .system-info {
    color: #487178 !important;
    font-weight: 600 !important;
}

.absensi-page .absensi-card .absensi-header .multiuser .fa,
.absensi-page .absensi-card .absensi-header .multiuser-info .fa,
.absensi-page .absensi-card .absensi-header .system-info .fa {
    color: #159b91 !important;
}


/* =========================================================
   BODY
   Transparan agar gradient card terus mengalir.
   ========================================================= */

.absensi-page .absensi-card .absensi-body {
    position: relative !important;
    z-index: 3 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   BOX INFORMASI
   Sangat soft, bukan putih keras.
   ========================================================= */

.absensi-page .absensi-card .info-soft {
    background:
        rgba(239, 250, 247, .72) !important;

    border:
        1px solid rgba(91, 171, 162, .24) !important;

    border-radius: 16px !important;

    box-shadow:
        0 4px 12px rgba(49, 118, 111, .055) !important;

    color: #48747b !important;
    opacity: 1 !important;
}

.absensi-page .absensi-card .info-soft *,
.absensi-page .absensi-card .info-soft span,
.absensi-page .absensi-card .info-soft div,
.absensi-page .absensi-card .info-soft p {
    color: #48747b !important;
    opacity: 1 !important;
}

.absensi-page .absensi-card .info-soft strong {
    color: #2f6470 !important;
    font-weight: 700 !important;
}

.absensi-page .absensi-card .info-soft .fa {
    color: #19958e !important;
}


/* =========================================================
   SCANNER BOX
   Putih tetap dipertahankan hanya di area scanner.
   ========================================================= */

.absensi-page .absensi-card .scanner-box {
    position: relative !important;
    z-index: 4 !important;

    background:
        rgba(255, 255, 255, .88) !important;

    border:
        1px solid rgba(92, 165, 160, .28) !important;

    border-radius: 16px !important;

    box-shadow:
        0 5px 16px rgba(40, 107, 103, .075) !important;

    overflow: hidden !important;
}


/* Header scanner */

.absensi-page .absensi-card .scanner-header {
    background:
        linear-gradient(
            135deg,
            #16988d 0%,
            #16a49e 52%,
            #20a6b4 100%
        ) !important;

    border: 0 !important;
    border-bottom: 0 !important;

    color: #ffffff !important;
}

.absensi-page .absensi-card .scanner-header *,
.absensi-page .absensi-card .scanner-header .fa {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* Label scanner */

.absensi-page .absensi-card .scanner-label {
    color: #46747b !important;
    opacity: 1 !important;
}

.absensi-page .absensi-card .scanner-label .fa {
    color: #159d94 !important;
}


/* =========================================================
   INPUT BARCODE
   Tetap putih seperti permintaan.
   ========================================================= */

.absensi-page .absensi-card #barcode,
.absensi-page .absensi-card .scanner-box #barcode,
.absensi-page .absensi-card .scanner-box input.form-control {
    width: 100% !important;
    background: #ffffff !important;
    color: #315f68 !important;

    border:
        1px solid #71c8c0 !important;

    border-radius:
        12px !important;

    outline: none !important;

    box-shadow:
        0 0 0 2px rgba(113, 200, 192, .10) !important;
}

.absensi-page .absensi-card #barcode::placeholder {
    color: #8b9da1 !important;
    opacity: 1 !important;
}

.absensi-page .absensi-card #barcode:focus,
.absensi-page .absensi-card .scanner-box #barcode:focus,
.absensi-page .absensi-card .scanner-box input.form-control:focus {
    border-color: #42afa5 !important;

    box-shadow:
        0 0 0 3px rgba(66, 175, 165, .16) !important;
}


/* =========================================================
   KETERANGAN SCANNER
   Kecil + tepat di tengah.
   ========================================================= */

.absensi-page .absensi-card .scanner-standby,
.absensi-page .absensi-card .scanner-focus-info,
.absensi-page .absensi-card .scanner-info {
    display: flex !important;

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

    width: calc(100% - 24px) !important;

    margin-left: auto !important;
    margin-right: auto !important;
	margin-top:5px; !important

    text-align: center !important;

    color: #5a858a !important;

    font-size: 10px !important;
    line-height: 1.3 !important;

    opacity: 1 !important;
}

.absensi-page .absensi-card .scanner-standby *,
.absensi-page .absensi-card .scanner-focus-info *,
.absensi-page .absensi-card .scanner-info * {
    color: #5a858a !important;
    font-size: 10px !important;
    opacity: 1 !important;
}

.absensi-page .absensi-card .scanner-standby strong,
.absensi-page .absensi-card .scanner-focus-info strong,
.absensi-page .absensi-card .scanner-info strong {
    color: #356c73 !important;
    font-weight: 700 !important;
}

.absensi-page .absensi-card .scanner-standby .fa,
.absensi-page .absensi-card .scanner-focus-info .fa,
.absensi-page .absensi-card .scanner-info .fa {
    color: #159d94 !important;
    font-size: 10px !important;
    margin-right: 4px !important;
}


/* =========================================================
   HASIL ABSENSI
   ========================================================= */

.absensi-page .absensi-card .hasil-absensi {
    border-radius: 16px !important;
}

.absensi-page .absensi-card .hasil-success {
    background: rgba(237, 249, 242, .95) !important;
    border-color: #c3e3ce !important;
    color: #47745a !important;
}

.absensi-page .absensi-card .hasil-warning {
    background: rgba(255, 248, 232, .95) !important;
    border-color: #efd79e !important;
    color: #806a32 !important;
}

.absensi-page .absensi-card .hasil-danger {
    background: rgba(255, 241, 241, .95) !important;
    border-color: #ecc5c5 !important;
    color: #a65e70 !important;
}

.absensi-page .absensi-card .hasil-info {
    background: rgba(237, 247, 253, .95) !important;
    border-color: #c5dfed !important;
    color: #587697 !important;
}


/* =========================================================
   FOTO HASIL
   ========================================================= */

.absensi-page .absensi-card .foto-hasil {
    width: 400px !important;
    /*min-width: 225px !important;*/
    height: auto !important;
    /*max-width: 90vw !important;*/

    object-fit: contain !important;

    border-radius: 14px !important;

    box-shadow:
        0 6px 18px rgba(71, 105, 120, .14) !important;
}


/* =========================================================
   FOOTER
   TRANSPARAN = MENYATU DENGAN GRADIENT CARD
   ========================================================= */

.absensi-page .absensi-card .absensi-footer,
.absensi-page .absensi-card .absensi-footer-content,
.absensi-page .absensi-card .modern-footer,
.absensi-page .absensi-card .modern-footer-copy,
.absensi-page .absensi-card .modern-footer-container,
.absensi-page .absensi-card .modern-footer-inner {
    position: relative !important;
    z-index: 3 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    box-shadow: none !important;
	margin-bottom:10px !important;
    color: #64868c !important;
}

.absensi-page .absensi-card .absensi-footer-main {
    color: #64868c !important;
}

.absensi-page .absensi-card .absensi-footer-main strong {
    color: #39777f !important;
}

.absensi-page .absensi-card .absensi-footer-sub {
    color: #719398 !important;
}

.absensi-page .absensi-card .absensi-footer .fa {
    color: #2b9ba7 !important;
}


/* =========================================================
   FONT AWESOME
   ========================================================= */

.absensi-page .absensi-card i.fa,
.absensi-page .absensi-card i.fas,
.absensi-page .absensi-card i.far,
.absensi-page .absensi-card i.fab {
    font-family: FontAwesome !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* =========================================================
   HILANGKAN SEMUA GARIS PEMBATAS INTERNAL
   ========================================================= */

.absensi-page .absensi-card .absensi-header,
.absensi-page .absensi-card .absensi-body,
.absensi-page .absensi-card .absensi-footer,
.absensi-page .absensi-card .absensi-footer-content,
.absensi-page .absensi-card .modern-footer,
.absensi-page .absensi-card .modern-footer-copy,
.absensi-page .absensi-card .modern-footer-container,
.absensi-page .absensi-card .modern-footer-inner {
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
}


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

@media (max-width: 767px) {

    .absensi-page {
        padding: 8px !important;
    }

    .absensi-page .absensi-card {
        border-radius: 18px !important;
    }

    .absensi-page .absensi-card .absensi-header {
        padding: 14px 12px 13px !important;
    }

    .absensi-page .absensi-card .absensi-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 14px !important;
    }

    .absensi-page .absensi-card .info-soft,
    .absensi-page .absensi-card .scanner-box {
        border-radius: 14px !important;
    }

    .absensi-page .absensi-card .scanner-standby,
    .absensi-page .absensi-card .scanner-focus-info,
    .absensi-page .absensi-card .scanner-info {
        font-size: 9px !important;
    }

    .absensi-page .absensi-card .scanner-standby *,
    .absensi-page .absensi-card .scanner-focus-info *,
    .absensi-page .absensi-card .scanner-info * {
        font-size: 9px !important;
    }

    .absensi-page .absensi-card .foto-hasil {
        width: 400px !important;
        /*min-width: 225px !important;*/
    }
}