/* =========================================================
   BAGURU
   GLOBAL UNIVERSAL STYLE
   Developed by AMii
   Tema : Dark Gemerlap / Neon
   ========================================================= */


/* =========================================================
   1. VARIABEL WARNA
   ========================================================= */

:root {

    --bg-main: #020617;
    --bg-secondary: #07111f;

    --bg-card:
        rgba(8, 18, 35, .84);

    --bg-card-hover:
        rgba(12, 28, 50, .94);

    --cyan: #22d3ee;
    --blue: #38bdf8;
    --purple: #a855f7;
    --violet: #7c3aed;

    --green: #22c55e;
    --yellow: #facc15;
    --red: #ef4444;

    --text-main: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --border:
        rgba(56, 189, 248, .20);

    --shadow-blue:
        0 0 20px
        rgba(56, 189, 248, .15);

    --shadow-purple:
        0 0 25px
        rgba(168, 85, 247, .12);

    --radius: 16px;

    --font-small: 11px;
    --font-normal: 12px;
    --font-medium: 13px;
    --font-large: 16px;
}


/* =========================================================
   2. RESET UNIVERSAL
   ========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;
}


html {

    width: 100%;

    min-height: 100%;

    scroll-behavior: smooth;
}


body {

    width: 100%;

    max-width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        var(--font-normal);

    line-height: 1.5;

    color:
        var(--text-main);

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(37, 99, 235, .18),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 20%,
            rgba(124, 58, 237, .16),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(6, 182, 212, .10),
            transparent 35%
        ),

        var(--bg-main);

    overflow-x: hidden;
}


/* =========================================================
   3. ELEMEN DASAR
   ========================================================= */

img {

    display: block;

    max-width: 100%;

    height: auto;
}


button,
input,
select,
textarea {

    font-family: inherit;

    font-size: inherit;
}


button {

    cursor: pointer;
}


a {

    color:
        var(--blue);

    text-decoration: none;

    transition:
        .25s ease;
}


a:hover {

    color:
        var(--cyan);
}


/* =========================================================
   4. CONTAINER UNIVERSAL
   ========================================================= */

.container-app {

    width: 100%;

    max-width: 1200px;

    margin-left: auto;

    margin-right: auto;

    padding:
        20px;
}


/* =========================================================
   5. BACKGROUND GEMERLAP
   ========================================================= */

.gemerlap {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    overflow: hidden;

    z-index: 0;
}


.gemerlap::before,
.gemerlap::after {

    content: "";

    position: absolute;

    width: 3px;

    height: 3px;

    background: white;

    border-radius: 50%;

    box-shadow:

        100px 80px white,
        220px 160px var(--cyan),
        340px 50px white,
        470px 210px var(--blue),
        590px 100px white,
        720px 250px var(--purple),
        850px 120px white,
        980px 300px var(--cyan),
        1100px 80px white,
        1250px 200px var(--blue);

    animation:
        berkedip 3s infinite alternate;
}


.gemerlap::after {

    opacity: .45;

    animation-delay:
        1.5s;
}


@keyframes berkedip {

    from {

        opacity: .15;

        transform:
            scale(.7);
    }

    to {

        opacity: 1;

        transform:
            scale(1.4);
    }
}


/* =========================================================
   6. NAVBAR
   ========================================================= */

.navbar-app {

    position: sticky;

    top: 0;

    z-index: 100;

    width: 100%;

    padding:
        8px 15px;

    background:
        rgba(2, 6, 23, .90);

    border-bottom:
        1px solid
        var(--border);

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 5px 25px
        rgba(0, 0, 0, .35);
}


.dashboard-navbar {

    width: 100%;

    max-width: 1200px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.navbar-brand-app {

    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;

    color: white;

    font-size: 14px;

    font-weight: 700;
}


.navbar-brand-app span {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   7. LOGO UNIVERSAL
   ========================================================= */

.logo-app {

    display: block;

    width: 48px;

    height: 48px;

    max-width: 48px;

    max-height: 48px;

    object-fit: contain;

    flex-shrink: 0;

    filter:

        drop-shadow(
            0 0 7px
            var(--cyan)
        )

        drop-shadow(
            0 0 15px
            var(--purple)
        );
}


.login-logo {

    display: block;

    width: 70px;

    height: 70px;

    max-width: 70px;

    max-height: 70px;

    object-fit: contain;

    margin:
        0 auto 12px;

    flex-shrink: 0;
}


.dashboard-logo {

    display: block;

    width: 34px;

    height: 34px;

    max-width: 34px;

    max-height: 34px;

    object-fit: contain;

    flex-shrink: 0;

    filter:

        drop-shadow(
            0 0 5px
            var(--cyan)
        )

        drop-shadow(
            0 0 10px
            var(--purple)
        );
}


/* =========================================================
   8. JUDUL
   ========================================================= */

.page-title {

    margin:
        8px 0 4px;

    font-size:
        clamp(20px, 4vw, 30px);

    line-height: 1.15;

    font-weight: 800;

    background:

        linear-gradient(
            90deg,
            var(--blue),
            var(--purple),
            var(--cyan)
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


.page-subtitle {

    margin:
        0 0 15px;

    color:
        var(--text-muted);

    font-size:
        10px;

    line-height: 1.5;
}


/* =========================================================
   9. GARIS NEON
   ========================================================= */

.neon-line {

    width: 120px;

    height: 2px;

    margin:
        15px auto;

    border-radius: 10px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            var(--purple),
            transparent
        );

    box-shadow:
        0 0 10px
        var(--cyan);
}


/* =========================================================
   10. CARD UNIVERSAL
   ========================================================= */

.card-app {

    position: relative;

    width: 100%;

    max-width: 100%;

    padding: 16px;

    margin:
        0 0 15px;

    background:
        var(--bg-card);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    box-shadow:

        var(--shadow-blue),
        var(--shadow-purple);

    backdrop-filter:
        blur(12px);

    overflow: hidden;

    transition:
        .25s ease;
}


.card-app:hover {

    transform:
        translateY(-2px);

    background:
        var(--bg-card-hover);

    border-color:
        rgba(56, 189, 248, .35);
}


/* =========================================================
   11. CARD TITLE
   ========================================================= */

.card-title {

    margin:
        0 0 10px;

    color: white;

    font-size:
        var(--font-large);

    line-height: 1.3;

    font-weight: 700;
}


.card-title .icon {

    margin-right: 5px;
}


/* =========================================================
   12. TOMBOL
   ========================================================= */

.btn-app {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 38px;

    padding:
        8px 15px;

    border: 0;

    border-radius: 10px;

    color: white;

    background:

        linear-gradient(
            135deg,
            #0891b2,
            #2563eb,
            #7c3aed
        );

    box-shadow:

        0 0 12px
        rgba(34, 211, 238, .18);

    font-size:
        var(--font-normal);

    font-weight: 700;

    line-height: 1.2;

    cursor: pointer;

    transition:
        .25s ease;
}


.btn-app:hover {

    color: white;

    transform:
        translateY(-1px);

    box-shadow:

        0 0 18px
        rgba(34, 211, 238, .35);
}


.btn-secondary-app {

    background:
        rgba(30, 41, 59, .80);

    border:
        1px solid
        rgba(148, 163, 184, .25);

    color:
        var(--text-secondary);
}


.btn-secondary-app:hover {

    background:
        rgba(51, 65, 85, .90);

    color: white;
}


/* =========================================================
   13. LOGIN
   ========================================================= */

.login-container {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 1;

    padding:
        15px;
}


.login-card {

    width: 100%;

    max-width: 390px;

    margin: auto;

    padding:
        25px 18px;

    text-align: center;
}


.login-title {

    margin-top: 5px;

    font-size:
        clamp(20px, 6vw, 28px);
}


.login-subtitle {

    font-size: 10px;

    margin-bottom: 10px;
}


.login-form-group {

    width: 100%;

    margin-bottom: 12px;

    text-align: left;
}


.login-button {

    width: 100%;

    margin-top: 5px;
}


.login-back {

    display: inline-block;

    margin-top: 15px;

    font-size: 10px;
}


.home-description {

    max-width: 600px;

    margin:
        0 auto 20px;

    color:
        var(--text-muted);

    font-size:
        10px;

    line-height: 1.6;
}


/* =========================================================
   14. FORM
   ========================================================= */

.form-label-app {

    display: block;

    margin-bottom: 5px;

    color:
        var(--text-secondary);

    font-size:
        11px;

    font-weight: 600;
}


.form-control-app,
.form-select-app {

    display: block;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    padding:
        9px 11px;

    color: white;

    background:
        rgba(15, 23, 42, .88);

    border:
        1px solid
        rgba(148, 163, 184, .20);

    border-radius: 9px;

    outline: none;

    font-size:
        12px;

    line-height: 1.4;

    transition:
        .25s;
}


.form-control-app:focus,
.form-select-app:focus {

    border-color:
        var(--cyan);

    box-shadow:
        0 0 10px
        rgba(34, 211, 238, .16);
}


.form-control-app::placeholder {

    color:
        #64748b;
}


/* =========================================================
   15. ALERT
   ========================================================= */

.alert-app {

    width: 100%;

    padding:
        9px 11px;

    margin-bottom: 12px;

    border-radius: 9px;

    font-size:
        11px;

    line-height: 1.4;
}


.alert-info-app {

    color: #bae6fd;

    background:
        rgba(14, 165, 233, .10);

    border:
        1px solid
        rgba(14, 165, 233, .25);
}


.alert-success-app {

    color: #bbf7d0;

    background:
        rgba(34, 197, 94, .10);

    border:
        1px solid
        rgba(34, 197, 94, .25);
}


.alert-danger-app {

    color: #fecaca;

    background:
        rgba(239, 68, 68, .10);

    border:
        1px solid
        rgba(239, 68, 68, .25);
}


/* =========================================================
   16. DASHBOARD
   ========================================================= */

.dashboard-container {

    position: relative;

    z-index: 1;

    min-height: calc(100vh - 55px);
}


.dashboard-user {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

    font-size:
        10px;

    color:
        var(--text-secondary);
}


.dashboard-user span {

    max-width: 130px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.btn-logout {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        6px 9px;

    border-radius: 7px;

    background:
        rgba(239, 68, 68, .12);

    border:
        1px solid
        rgba(239, 68, 68, .25);

    color:
        #fca5a5;

    font-size:
        10px;
}


.btn-logout:hover {

    color: white;

    background:
        rgba(239, 68, 68, .25);
}


.dashboard-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;
}


.dashboard-welcome {

    margin: 0;

    color:
        var(--text-muted);

    font-size:
        10px;
}


.dashboard-role {

    padding:
        6px 9px;

    border:
        1px solid
        rgba(168, 85, 247, .30);

    border-radius: 20px;

    color:
        #d8b4fe;

    background:
        rgba(168, 85, 247, .10);

    font-size:
        9px;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   17. STATISTIK
   ========================================================= */

.stat-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 15px;
}


.stat-card {

    min-width: 0;

    padding: 14px;

    border-radius:
        var(--radius);

    background:
        var(--bg-card);

    border:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow-blue);

    transition:
        .25s;
}


.stat-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 0 20px
        rgba(56, 189, 248, .20);
}


.stat-icon {

    font-size: 21px;

    margin-bottom: 5px;
}


.stat-number {

    font-size:
        22px;

    line-height: 1.1;

    font-weight: 800;

    color: white;

    overflow-wrap: anywhere;
}


.stat-label {

    margin-top: 4px;

    color:
        var(--text-muted);

    font-size:
        10px;
}


/* =========================================================
   18. MENU DASHBOARD
   ========================================================= */

.dashboard-menu-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 15px;
}


.dashboard-menu-card {

    display: block;

    min-width: 0;

    padding: 15px;

    background:
        var(--bg-card);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow-blue);

    color:
        var(--text-main);

    transition:
        .25s ease;
}


.dashboard-menu-card:hover {

    color: white;

    transform:
        translateY(-2px);

    border-color:
        rgba(56, 189, 248, .40);

    background:
        var(--bg-card-hover);
}


.dashboard-menu-icon {

    font-size:
        23px;

    margin-bottom: 7px;
}


.dashboard-menu-title {

    margin-bottom: 3px;

    color: white;

    font-size:
        13px;

    font-weight: 700;
}


.dashboard-menu-text {

    color:
        var(--text-muted);

    font-size:
        9px;

    line-height: 1.4;
}


/* =========================================================
   19. INFORMASI DASHBOARD
   ========================================================= */

.dashboard-info {

    padding:
        15px;
}


.dashboard-info-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding:
        8px 0;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .08);

    font-size:
        10px;
}


.dashboard-info-row:last-child {

    border-bottom: 0;
}


.dashboard-info-row span {

    color:
        var(--text-muted);
}


.dashboard-info-row strong {

    color:
        var(--text-secondary);

    text-align: right;

    overflow-wrap: anywhere;
}


/* =========================================================
   20. TABEL
   ========================================================= */

.table-wrapper {

    width: 100%;

    max-width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}


.table-app {

    width: 100%;

    border-collapse: collapse;

    color:
        var(--text-secondary);

    font-size:
        11px;
}


.table-app th {

    padding:
        9px;

    text-align: left;

    color: white;

    background:
        rgba(30, 41, 59, .80);

    border-bottom:
        1px solid
        var(--border);

    font-size:
        10px;

    white-space: nowrap;
}


.table-app td {

    padding:
        9px;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .10);

    font-size:
        10px;
}


.table-app tr:hover td {

    background:
        rgba(56, 189, 248, .04);
}


/* =========================================================
   21. STATUS
   ========================================================= */

.status {

    display: inline-block;

    padding:
        3px 7px;

    border-radius: 20px;

    font-size:
        9px;

    font-weight: 700;
}


.status-hadir {

    color: #86efac;

    background:
        rgba(34, 197, 94, .12);

    border:
        1px solid
        rgba(34, 197, 94, .30);
}


.status-izin {

    color: #fde047;

    background:
        rgba(250, 204, 21, .12);

    border:
        1px solid
        rgba(250, 204, 21, .30);
}


.status-sakit {

    color: #fca5a5;

    background:
        rgba(239, 68, 68, .12);

    border:
        1px solid
        rgba(239, 68, 68, .30);
}


/* =========================================================
   22. FOOTER
   ========================================================= */

.footer-app {

    width: 100%;

    padding:
        18px 10px;

    text-align: center;

    color:
        #64748b;

    font-size:
        9px;

    line-height: 1.6;

    letter-spacing:
        .3px;
}


/* =========================================================
   23. UTILITAS WARNA
   ========================================================= */

.text-neon {

    color:
        var(--cyan);
}


.text-purple {

    color:
        var(--purple);
}


.text-success {

    color:
        var(--green);
}


.text-warning {

    color:
        var(--yellow);
}


.text-danger {

    color:
        var(--red);
}


.glow {

    text-shadow:

        0 0 8px
        currentColor,

        0 0 18px
        currentColor;
}


/* =========================================================
   24. RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 900px) {

    .container-app {

        padding:
            15px;
    }


    .stat-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dashboard-menu-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   25. RESPONSIVE HP
   ========================================================= */

@media (max-width: 600px) {

    body {

        font-size:
            11px;
    }


    .container-app {

        padding:
            10px;
    }


    .navbar-app {

        padding:
            7px 9px;
    }


    .dashboard-navbar {

        gap: 6px;
    }


    .navbar-brand-app {

        font-size:
            12px;

        gap: 5px;
    }


    .dashboard-logo {

        width: 30px;

        height: 30px;

        max-width: 30px;

        max-height: 30px;
    }


    .dashboard-user {

        font-size:
            9px;

        gap: 5px;
    }


    .dashboard-user span {

        max-width: 75px;
    }


    .btn-logout {

        padding:
            5px 7px;

        font-size:
            9px;
    }


    .dashboard-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }


    .page-title {

        font-size:
            21px;
    }


    .page-subtitle {

        font-size:
            9px;
    }


    .stat-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }


    .stat-card {

        padding:
            11px;
    }


    .stat-icon {

        font-size:
            18px;
    }


    .stat-number {

        font-size:
            19px;
    }


    .stat-label {

        font-size:
            9px;
    }


    .dashboard-menu-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }


    .dashboard-menu-card {

        padding:
            11px;
    }


    .dashboard-menu-icon {

        font-size:
            19px;
    }


    .dashboard-menu-title {

        font-size:
            11px;
    }


    .dashboard-menu-text {

        font-size:
            8px;
    }


    .card-app {

        padding:
            13px;

        border-radius:
            13px;
    }


    .card-title {

        font-size:
            14px;
    }


    .login-container {

        padding:
            10px;
    }


    .login-card {

        max-width:
            100%;

        padding:
            20px 14px;
    }


    .login-logo {

        width:
            65px;

        height:
            65px;

        max-width:
            65px;

        max-height:
            65px;
    }


    .login-title {

        font-size:
            21px;
    }


    .login-subtitle {

        font-size:
            9px;
    }


    .home-description {

        font-size:
            9px;

        line-height:
            1.5;
    }


    .form-label-app {

        font-size:
            10px;
    }


    .form-control-app,
    .form-select-app {

        padding:
            8px 10px;

        font-size:
            11px;
    }


    .btn-app {

        min-height:
            36px;

        padding:
            8px 12px;

        font-size:
            11px;
    }


    .alert-app {

        font-size:
            10px;
    }


    .dashboard-info-row {

        font-size:
            9px;
    }


    .footer-app {

        font-size:
            8px;
    }

}


/* =========================================================
   26. HP SANGAT KECIL
   ========================================================= */

@media (max-width: 380px) {

    .container-app {

        padding:
            8px;
    }


    .dashboard-user span {

        display: none;
    }


    .stat-grid,
    .dashboard-menu-grid {

        gap: 6px;
    }


    .stat-card,
    .dashboard-menu-card {

        padding:
            9px;
    }


    .login-card {

        padding:
            18px 12px;
    }

}


/* =========================================================
   27. MENCEGAH ELEMEN MELEBAR
   ========================================================= */

.container-app,
.card-app,
.login-card,
.stat-card,
.dashboard-menu-card,
.dashboard-info,
form,
input,
select,
textarea,
button {

    max-width: 100%;
}


input,
select,
textarea {

    overflow: hidden;
}


/* =========================================================
   28. PRINT
   ========================================================= */

@media print {

    .gemerlap,
    .navbar-app {

        display: none !important;
    }


    body {

        background: white;

        color: black;
    }


    .card-app,
    .stat-card,
    .dashboard-menu-card {

        box-shadow: none;

        border:
            1px solid #ddd;
    }

}