/* ==========================
   SAFETYGUNA GLOBAL THEME
   ========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


:root{

    --blue:#002b5b;
    --blue2:#004aad;
    --yellow:#ffc400;
    --white:#ffffff;
    --soft:#f5f7fb;
    --text:#17213c;

}


body{

    background:#f5f7fb;
    overflow-x:hidden;

}



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


.login-wrapper{

    width:100%;
    min-height:100vh;

    display:flex;

    background:

    linear-gradient(
        90deg,
        rgba(0,31,70,.85),
        rgba(0,31,70,.35)
    ),

    url('../img/bg-login.jpg');


    background-size:cover;
    background-position:center;

    position:relative;
    overflow:hidden;

}




/* BLUE WAVE */

.login-wrapper::after{

    content:"";

    position:absolute;

    width:120%;
    height:260px;

    bottom:-120px;
    left:-10%;

    background:var(--blue);

    border-radius:50% 50% 0 0;

    z-index:1;

}


.login-wrapper::before{

    content:"";

    position:absolute;

    width:120%;
    height:230px;

    bottom:-80px;
    left:-10%;

    background:var(--yellow);

    border-radius:50% 50% 0 0;

    z-index:0;

}






/* LEFT */

.login-left{

    flex:1;

    display:flex;

    align-items:center;

    padding-left:65px;

    padding-bottom:80px;

    color:white;

    position:relative;

    z-index:2;

}



.login-text h1{

    font-size:56px;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:10px;

}


.login-text h1 span{

    color:var(--yellow);

}



.login-text p{

    letter-spacing:4px;

    font-size:14px;

    font-weight:500;

}



.login-text .line{

    width:80px;
    height:4px;

    background:var(--yellow);

    margin:20px 0;

}



.login-text small{

    display:block;

    margin-top:25px;

    font-size:16px;

    font-weight:400;

    line-height:32px;

}


.login-text h1 span{

    color:#ffc400;

    text-shadow:
    0 5px 20px rgba(255,196,0,.35);

}





/* CARD LOGIN */


.login-card{

    width:430px;

    height:max-content;

    background:white;

    border-radius:22px;

    padding:

    45px 45px;


    margin:

    auto 120px auto 0;


    text-align:center;


    box-shadow:

    0 20px 60px rgba(0,0,0,.25);


    position:relative;

    z-index:3;


    animation:

    fadeUp .5s ease;

}





.login-logo{

    width:130px;

    margin-bottom:20px;

}




.login-card h3{

    font-weight:800;

    color:var(--text);

}



.login-card p{

    color:#667085;

    margin-bottom:30px;

}







.input-box{

    height:55px;

    border:

    1px solid #d9dee8;

    border-radius:8px;

    display:flex;

    align-items:center;

    padding:

    0 18px;

    margin-bottom:18px;

}



.input-box i{

    font-size:20px;

    color:#536079;

    margin-right:15px;

}



.input-box input{

    border:none;

    outline:none;

    width:100%;

    color:#222;

}



.input-box:focus-within{

    border-color:var(--blue2);

    box-shadow:

    0 0 0 3px rgba(0,74,173,.12);

}







.btn-login{

    width:100%;

    height:55px;

    border:none;

    border-radius:8px;

    background:

    linear-gradient(
        135deg,
        var(--blue2),
        var(--blue)
    );


    color:white;

    font-weight:700;

    font-size:17px;


    margin-top:10px;


    transition:.3s;

}



.btn-login:hover{

    transform:

    translateY(-2px);

    box-shadow:

    0 8px 20px rgba(0,43,91,.3);

}






.guest-btn{

    margin-top:25px;

    background:none;

    border:none;

    color:var(--blue2);

    font-weight:600;

}







/* ANIMATION */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

        translateY(30px);

    }


    to{

        opacity:1;

        transform:

        translateY(0);

    }

}








/* ==========================
   RESPONSIVE
   ========================== */


@media(max-width:900px){


.login-wrapper{

    flex-direction:column;

    justify-content:center;

}



.login-left{

    display:none;

}



.login-card{

    width:90%;

    margin:auto;

}


}

/* ==========================
   DASHBOARD LAYOUT
========================== */


.app-wrapper{


    min-height:100vh;


    display:flex;



    background:

    linear-gradient(

        135deg,

        #eaf5ff 0%,

        #f4f9ff 45%,

        #eef7ff 100%

    );



}

/* ===============================
   MODAL CLOSE WHITE
================================ */

.safety-modal .btn-close{
    filter: invert(1) grayscale(100%);
    opacity: .9;
}


.safety-modal .btn-close:hover{
    opacity: 1;
}


/* ===============================
   MODERN SELECT
================================ */

.safety-modal select,
.filter-card select{

    border-radius: 12px;
    border: 1px solid #d8dbe8;

    height: 45px;

    padding:
    0 15px;

    background-color:#fff;

    font-size:14px;

    transition:.25s;

}


.safety-modal select:focus,
.filter-card select:focus{

    border-color:#6c63ff;

    box-shadow:
    0 0 0 4px
    rgba(108,99,255,.15);

    outline:none;

}


/* option biar lebih lega */
.safety-modal select option{

    padding:12px;

}



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


.sidebar{

    width:270px;

    height:100vh;

    position:fixed;

    left:0;
    top:0;

    background:#002b5b;

    padding:22px 18px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:.35s ease;

    z-index:1000;

    overflow:hidden;

}



.sidebar.collapsed{

    width:85px;

}



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

.sidebar-header{

position:relative;

display:flex;
flex-direction:column;
align-items:center;

padding-top:6px;
margin-bottom:18px;

}


/* TOGGLE */

.collapse-btn{

width:100%;

display:flex;
justify-content:flex-end;

padding-right:8px;

margin-bottom:8px;

cursor:pointer;

color:#fff;

font-size:18px;

transition:.25s;

}

.collapse-btn:hover{

color:#ffc400;
transform:scale(1.1);

}

/* ==========================
   SIDEBAR LOGO
========================== */

.side-logo{

display:flex;
flex-direction:column;
align-items:center;

padding:10px 10px 8px;

}

.side-logo img{

width:64px;
height:64px;

object-fit:contain;

margin-bottom:8px;

transition:.25s;

}

.side-logo span{

font-size:11px;

text-align:center;

line-height:1.4;

color:#fff;

}

/* ICON COLLAPSE */

.sidebar.collapsed .collapse-btn{

justify-content:center;

padding-right:0;

}

/* MENU */

.menu-list{

    margin-top:20px;

}


.side-menu{

    height:52px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:0 18px;

    margin-bottom:12px;


    color:white;

    text-decoration:none;

    border-radius:12px;

    font-size:14px;

    font-weight:600;


    transition:.25s;

}



.side-menu i{

    font-size:21px;

    min-width:22px;

}



.side-menu:hover{

    background:rgba(255,255,255,.1);

    color:#ffc400;

}



.side-menu.active{

    color:#ffc400;

}



.side-menu.active i{

    color:#ffc400;

}







/* PROFILE */

.side-profile{


    background:

    rgba(255,255,255,.08);


    height:70px;


    border-radius:16px;


    padding:15px;


    display:flex;


    align-items:center;


    gap:12px;


    color:white;


}



.side-profile i{

    font-size:35px;

}



.side-profile b{

    font-size:13px;

}



.side-profile small{

    display:block;

    opacity:.7;

}





/* ==========================
   COLLAPSED MODE
========================== */



.sidebar.collapsed .side-logo img{

    width:45px;

}



.sidebar.collapsed span,
.sidebar.collapsed .side-logo span,
.sidebar.collapsed .side-profile div{


    opacity:0;

    width:0;

    display:none;

}




.sidebar.collapsed .side-menu{

    justify-content:center;

    padding:0;

}



.sidebar.collapsed .side-menu i{

    font-size:24px;

}




.sidebar.collapsed .side-profile{


    justify-content:center;

    padding:0;

}





.sidebar.collapsed ~ .main-content{


    margin-left:85px;


    width:calc(100% - 85px);


}



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

.accident-photo{

    border-radius:16px;

    cursor:zoom-in;

    transition:.3s;

}


.accident-photo:hover{

    transform:scale(1.03);

    box-shadow:
    0 10px 30px
    rgba(0,0,0,.25);

}

/* ============================
   PHOTO LIGHTBOX
============================ */

.zoom-box{

    background:transparent;

    border:none;

}


.zoom-box .modal-body{

    padding:0;

    text-align:center;

}


.zoom-photo{

    max-width:95vw;

    max-height:90vh;

    border-radius:18px;

    box-shadow:
    0 20px 60px
    rgba(0,0,0,.5);

}


#zoomModal{

    background:
    rgba(0,0,0,.75);

}


/* ==========================
   MAIN CONTENT
========================== */



.main-content{


    margin-left:270px;


    width:calc(100% - 270px);


    transition:

    margin-left .35s ease,
    width .35s ease;



    background:

    linear-gradient(

        135deg,

        #eaf5ff,

        #f8fbff

    );


}







/* ==========================
   TOPBAR
========================== */


.topbar{


    height:80px;


    background:white;


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:0 35px;



    box-shadow:

    0 5px 25px rgba(0,0,0,.05);



}



.page-title h4{


    margin:0;


    font-size:24px;


    font-weight:700;


    color:#001f46;


}





.top-action{


    display:flex;


    align-items:center;


    gap:25px;


}




.notif{


    position:relative;


    font-size:22px;


    color:#002b5b;


}




.notif span{


    position:absolute;


    top:-10px;


    right:-10px;


    background:#ffc400;


    color:#002b5b;


    font-size:11px;


    width:18px;


    height:18px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


}





.top-profile{


    display:flex;


    align-items:center;


    gap:12px;


}



.top-avatar{


    width:42px;


    height:42px;


    border-radius:50%;


    background:#eef3fb;


    color:#002b5b;


    display:flex;


    align-items:center;


    justify-content:center;


}




.top-profile b{


    font-size:14px;


}




.top-profile small{


    display:block;


    font-size:12px;


}




.logout-btn{


    color:#002b5b;


    font-size:22px;


}







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


.page-content{


    padding:30px;


}






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


@media(max-width:900px){


.sidebar{

    width:85px;

}



.sidebar span,
.sidebar .side-logo span,
.sidebar .side-profile div{

    display:none;

}



.main-content{

    margin-left:85px;

    width:calc(100% - 85px);

}



}


/* ==================================================
   DASHBOARD PAGE STYLE

   File:
   pages/dashboard.php

   Fungsi:
   - SHE Performance Board Compact
   - KPI Card
   - Chart
   - LTIFR & IR
================================================== */






/* ==========================
   TOP LAST ACCIDENT
========================== */


.dash-top-card{


    background:white;

    border-radius:20px;

    padding:18px 22px;


    display:flex;

    justify-content:space-between;

    align-items:center;


    box-shadow:
    0 8px 25px rgba(0,0,0,.04);


}



.last-accident{


    display:flex;

    align-items:center;

    gap:18px;


}



.big-icon{


    width:60px;

    height:60px;


    background:#002b5b;


    color:#ffc400;


    border-radius:16px;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:28px;


}



.last-accident small{


    font-size:12px;

    color:#6c7480;


}




.last-accident h2{


    margin:2px 0;


    font-size:32px;


    line-height:32px;


    font-weight:900;


    color:#002b5b;


}



.last-accident h2 span{


    font-size:15px;


}



.last-accident p{


    margin:0;


    font-size:12px;


}









/* ==========================
   FILTER + MONTH
========================== */


.top-filter-area{


    display:flex;


    flex-direction:column;


    gap:12px;


    align-items:flex-end;


}



.filter-group{


    display:flex;

    gap:10px;


}



.filter-group select{


    width:130px;

    height:36px;


    border:none;


    background:#eef5ff;


    border-radius:12px;


    padding:0 12px;


    font-size:13px;


    font-weight:700;


    color:#002b5b;


}







.month-list{


    display:flex;


    gap:7px;


    flex-wrap:wrap;


    justify-content:flex-end;


}



.month-list button{


    border:none;


    height:32px;


    min-width:52px;


    border-radius:20px;


    background:#eef5ff;


    color:#002b5b;


    font-size:13px;


    font-weight:800;


}



.month-list button.active{


    background:#ffc400;


}









/* ==========================
   KPI CARD COMPACT
========================== */



.stat-grid{


    margin-top:16px;


    display:grid;


    gap:14px;


}



/* ==========================
   MAIN CARD 6 KOLOM
========================== */


.main-grid{

    grid-template-columns:
    repeat(6,1fr);

}







/* ==========================
   INJURY CARD 6 KOLOM
========================== */


.small-grid{


    display:grid;


    margin-top:16px;


    grid-template-columns:

    repeat(6,1fr);


    gap:14px;


}





.stat-card{


    background:white;


    min-height:88px;


    padding:16px 18px;


    border-radius:18px;


    display:flex;


    justify-content:space-between;


    align-items:center;


    overflow:hidden;


    box-shadow:

    0 8px 25px rgba(0,0,0,.04);


}



.stat-card small{


    display:block;


    font-size:11px;


    font-weight:700;


    color:#737b89;


    line-height:18px;


}



.stat-card h3{


    margin:5px 0 0;


    font-size:27px;


    font-weight:900;


    color:#002b5b;


}



.stat-icon{


    min-width:42px;

    width:42px;


    height:42px;


    border-radius:14px;


    background:#eef5ff;


    display:flex;


    align-items:center;


    justify-content:center;


    color:#002b5b;


    font-size:20px;


}










/* ==========================
   INCIDENT TYPE
========================== */



.type-grid{


    margin-top:16px;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);



    gap:16px;


}



.type-card{


    height:88px;


    border-radius:18px;


    background:

    linear-gradient(
        135deg,
        #002b5b,
        #004aa5
    );



    padding:16px;



    display:flex;


    align-items:center;


    justify-content:space-between;



    color:white;



    box-shadow:

    0 8px 25px rgba(0,43,91,.18);


}



.type-icon{


    width:50px;

    height:50px;


    border-radius:14px;


    background:

    rgba(255,255,255,.15);



    display:flex;


    justify-content:center;


    align-items:center;


    font-size:27px;


    color:#ffc400;


}



.type-card small{


    font-size:12px;


    font-weight:700;


}



.type-card h2{


    margin:0;


    font-size:28px;


    font-weight:900;


    color:#ffc400;


}










/* ==========================
   LTIFR IR
========================== */



.rate-grid{


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:16px;


}




.rate-card{


    height:110px;


    background:white;


    border-radius:18px;



    padding:18px;



    text-align:center;



    box-shadow:


    0 8px 25px rgba(0,0,0,.04);


}



.rate-card small{


    font-weight:900;


    color:#002b5b;


}



.rate-card h1{


    margin:5px;


    font-size:35px;


    font-weight:900;


    color:#002b5b;


}



.rate-card p{


    margin:0;


    font-size:12px;


    color:#777;


}










/* ==========================
   CHART PANEL
========================== */


.chart-row{


    align-items:stretch;


}



.panel-card{


    background:white;


    border-radius:18px;


    padding:18px;



    height:100%;



    box-shadow:

    0 8px 25px rgba(0,0,0,.04);


}



.panel-card h6{


    font-size:13px;


    font-weight:900;


    color:#002b5b;


}



.chart-panel{


    height:300px;


}



.chart-box{


    height:230px;


}



.chart-box canvas{


    width:100%!important;


    height:100%!important;


}









/* ==========================
   IMAGE PANEL
========================== */



.image-panel{


    height:auto;


    min-height:220px;


}






/* ==========================
   RESPONSIVE
========================== */



@media(max-width:1200px){



.main-grid,
.small-grid{


    grid-template-columns:

    repeat(3,1fr);


}



.type-grid{


    grid-template-columns:

    repeat(3,1fr);


}



}







@media(max-width:700px){



.dash-top-card{


    flex-direction:column;


    align-items:flex-start;


}



.top-filter-area{


    align-items:flex-start;


}



.main-grid,
.small-grid,
.rate-grid{


    grid-template-columns:

    repeat(2,1fr);


}



.type-grid{


    grid-template-columns:

    1fr;


}



}

/* ==================================================
   SAFETY INFO IMAGE
================================================== */


.image-panel{


    padding:15px;


    overflow:visible;


}



.safety-info-img{


    width:100%;


    height:auto;


    display:block;


    object-fit:contain;


    border-radius:18px;


}

/* ==================================================
   ACCIDENT REPORT PAGE STYLE

   File:
   pages/accident.php

   Fungsi:
   - Header action
   - Filter
   - Accident table
   - Modal detail/input

================================================== */



/* ==========================
   PAGE HEADER ACTION
========================== */


.page-action-card{


    background:white;


    border-radius:20px;


    padding:22px 25px;


    display:flex;


    align-items:center;


    justify-content:space-between;



    box-shadow:

    0 8px 25px rgba(0,0,0,.04);


}





.page-action-card h4{


    margin:0;


    font-weight:900;


    color:#002b5b;


}




.page-action-card p{


    margin:5px 0 0;


    color:#7b8495;


    font-size:13px;


}








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


.btn-add{


    height:45px;


    padding:0 22px;



    border:none;


    border-radius:14px;



    background:#ffc400;



    color:#002b5b;



    font-weight:800;



    display:flex;


    align-items:center;


    gap:8px;



    transition:.25s;


}




.btn-add:hover{


    transform:translateY(-2px);



    box-shadow:

    0 8px 20px rgba(255,196,0,.35);


}









/* ==========================
   FILTER
========================== */


.filter-card{


    margin-top:18px;


    background:white;


    border-radius:18px;



    padding:18px;



    display:flex;


    gap:12px;



    box-shadow:

    0 8px 25px rgba(0,0,0,.04);



}




.filter-card select{


    width:160px;


    height:42px;



    border:none;



    background:#eef5ff;



    border-radius:12px;



    padding:0 15px;



    color:#002b5b;



    font-weight:700;



    outline:none;


}









/* ==========================
   TABLE
========================== */


.safety-table{


    margin:0;


}




.safety-table thead{


    background:#eef5ff;



}



.safety-table th{


    color:#002b5b;



    font-size:13px;



    font-weight:900;



    padding:15px;



    border:none;


}



.safety-table td{


    padding:15px;



    vertical-align:middle;



    font-size:13px;



    border-bottom:

    1px solid #eef1f5;


}





.safety-table tbody tr{


    transition:.2s;


}




.safety-table tbody tr:hover{


    background:#f8fbff;


}








/* ==========================
   ACTION BUTTON TABLE
========================== */


.btn-icon{


    width:35px;


    height:35px;


    border:none;


    border-radius:10px;



    background:#eef5ff;



    color:#002b5b;



    display:inline-flex;


    align-items:center;


    justify-content:center;


    margin-right:5px;



    transition:.2s;


}




.btn-icon:hover{


    background:#002b5b;


    color:white;


}



.btn-icon.edit{


    background:#fff6cc;


    color:#997500;


}









/* ==========================
   MODAL
========================== */



.safety-modal{


    border:none;



    border-radius:22px;



    overflow:hidden;



}




.safety-modal .modal-header{


    background:#002b5b;



    color:white;



    padding:20px 25px;


}





.safety-modal h5{


    font-weight:800;



}





.safety-modal .modal-body{


    padding:25px;



}








/* ==========================
   EMPTY TABLE
========================== */



.text-muted{


    font-size:14px;


}









/* ==========================
   RESPONSIVE
========================== */


@media(max-width:700px){



.page-action-card{


    flex-direction:column;


    align-items:flex-start;


    gap:15px;


}




.filter-card{


    flex-direction:column;


}



.filter-card select{


    width:100%;


}



}

/* ==============================
 DETAIL ACCIDENT PREMIUM
============================== */

#detailModal .modal-xl{

max-width:1200px;

}


.detail-summary{

background:#002b5b;

color:white;

padding:20px 25px;

border-radius:22px;

display:flex;

justify-content:space-between;

align-items:center;

}


.detail-summary h4{

font-weight:900;

margin:5px 0;

}


.detail-summary p{

margin:0;

opacity:.8;

}



.incident-badge{

background:#ffc400;

color:#002b5b;

padding:10px 22px;

border-radius:20px;

font-weight:900;

}



.detail-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:12px;

margin-bottom:15px;

}


.detail-grid div,
.detail-section,
.detail-action{

background:#f4f8ff;

padding:15px;

border-radius:18px;

}



.detail-grid label,
.detail-section label,
.detail-action label,
.evidence-box label{

display:block;

font-size:12px;

font-weight:800;

color:#7a8499;

margin-bottom:8px;

}



.detail-grid b{

color:#002b5b;

}



.detail-section p,
.detail-action p{

margin:0;

font-weight:700;

}



.detail-action{

background:#fff8dd;

min-height:100px;

}



.evidence-box{

background:#f4f8ff;

padding:15px;

border-radius:22px;

height:100%;

}



/* ===============================
   DETAIL EVIDENCE PHOTO FIX
================================ */

.evidence-box{

background:#f4f8ff;

padding:15px;

border-radius:22px;

height:100%;

}


/* FOTO UTAMA */

.main-evidence{

width:100% !important;

height:230px !important;

object-fit:cover;

border-radius:18px;

cursor:zoom-in;

transition:.25s;

}


.main-evidence:hover{

transform:scale(1.02);

}


/* THUMBNAIL */

.thumb-list{

margin-top:12px;

display:flex;

gap:10px;

flex-wrap:wrap;

}


.thumb-list img{

width:70px !important;

height:70px !important;

object-fit:cover;

border-radius:12px;

cursor:pointer;

border:3px solid white;

transition:.2s;

}


.thumb-list img:hover{

transform:scale(1.08);

border-color:#ffc400;

}



/* ZOOM MODAL */

#zoomModal{

background:rgba(0,0,0,.85);

}


.zoom-image{

max-width:95vw;

max-height:90vh;

width:auto;

height:auto;

display:block;

margin:auto;

object-fit:contain;

border-radius:18px;

}





/* ===============================
   MASTER TAB FIX
================================ */

.master-tabs{

    margin-top:18px;

    display:flex;

    flex-direction:row;

    gap:12px;

    align-items:center;

    flex-wrap:wrap;

}


.master-tabs button{

    height:45px;

    padding:
    0 24px;

    border:none;

    border-radius:20px;

    background:white;

    color:#002b5b;

    font-size:14px;

    font-weight:800;

    display:flex;

    align-items:center;

    gap:8px;

    white-space:nowrap;

    box-shadow:
    0 8px 20px rgba(0,0,0,.04);

}


.master-tabs button.active{

    background:#002b5b;

    color:white;

}









/* ==================================================
   MASTER TABLE
================================================== */


.safety-table{


    margin:0;


}



.safety-table thead th{


    border:0;


    padding:

    18px;



    color:

    #002b5b;



    font-size:

    13px;



}



.safety-table tbody td{


    padding:

    18px;



    vertical-align:middle;


    font-size:

    14px;



}







/* ==================================================
   ACTION BUTTON
================================================== */


.btn-icon{


    width:34px;


    height:34px;


    border-radius:

    10px;



    border:none;



    background:

    #eef5ff;



    color:

    #00305f;



    margin:

    0 3px;



}



.btn-icon.edit{


    background:

    #fff4bf;



    color:

    #9b7500;


}







/* ==================================================
   MODAL MASTER
================================================== */


.safety-modal{


    border-radius:

    22px;


    overflow:hidden;


    border:0;


}



.safety-modal .modal-header{


    background:

    #002b5b;



    color:white;


}



.safety-modal .btn-close{


    filter:

    invert(1);


}







/* ==================================================
   FORM
================================================== */


.safety-modal input,

.safety-modal select{


    height:45px;


    border-radius:

    14px;



    border:

    1px solid #dbe3ef;



}





.safety-modal input:focus,

.safety-modal select:focus{


    box-shadow:

    0 0 0 4px rgba(0,74,153,.15);



    border-color:

    #004a99;


}








/* =====================================
   FIX SELECT DROPDOWN TEXT
===================================== */

.form-control,
.form-select,
select,
select option{

    color:#222 !important;

}


select option{

    background:#fff !important;

}


/* =====================================
   FIX ALL SELECT SAFETYGUNA
===================================== */

select,
select.form-control,
.safety-modal select,
.safety-modal .form-control{

    color:#212529 !important;

    -webkit-text-fill-color:#212529 !important;

    background-color:#fff !important;

}


select option{

    color:#212529 !important;

    background:#ffffff !important;

}


/* ==================================================
   SAFETYGUNA
   INJURY CONSEQUENCE MATRIX CARD
================================================== */


.injury-matrix-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:14px;

    margin-top:15px;

    margin-bottom:15px;

}





.injury-matrix-card{

    min-height:125px;

    border-radius:18px;

    padding:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.10);

    overflow:hidden;

    position:relative;

}





.injury-matrix-card small{

    font-size:12px;

    font-weight:800;

    letter-spacing:.2px;

}





.injury-matrix-card h3{

    font-size:34px;

    font-weight:900;

    margin:

    8px 0;

}





.injury-matrix-card p{

    margin:0;

    font-size:12px;

    line-height:1.4;

    font-weight:600;

}





.injury-matrix-card p span{

    font-size:13px;

    font-weight:900;

}





.injury-icon{

    width:45px;

    height:45px;

    border-radius:16px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:

    rgba(255,255,255,.35);


    font-size:22px;

}









/* ==================================================
   MATRIX LEVEL COLOR
   KIRI PARAH -> KANAN AMAN
================================================== */


/* Fatality / Catastrophic */
.injury-critical{

    background:
    linear-gradient(
        135deg,
        #8b0000,
        #d00000
    );

    color:white;

}






/* Permanent Disability / Major */
.injury-major{


    background:
    linear-gradient(
        135deg,
        #d00000,
        #ff3030
    );


    color:white;


}







/* Serious */
.injury-serious{


    background:
    linear-gradient(
        135deg,
        #ff5c00,
        #ff9500
    );


    color:white;


}







/* Moderate */
.injury-moderate{


    background:
    linear-gradient(
        135deg,
        #ffc400,
        #ffdd33
    );


    color:#222;


}








/* Minor */
.injury-minor{


    background:
    linear-gradient(
        135deg,
        #fff200,
        #ffff66
    );


    color:#222;


}








/* Negligible / Safe */
.injury-safe{


    background:
    linear-gradient(
        135deg,
        #52b788,
        #95d65a
    );


    color:#073b1a;


}








/* ICON COLOR FIX */

.injury-critical .injury-icon,
.injury-major .injury-icon,
.injury-serious .injury-icon{


    color:white;


}










/* ==================================================
   RESPONSIVE
================================================== */


@media(max-width:1200px){


    .injury-matrix-grid{


        grid-template-columns:

        repeat(3,1fr);


    }


}






@media(max-width:768px){


    .injury-matrix-grid{


        grid-template-columns:

        repeat(2,1fr);


    }


}







@media(max-width:480px){


    .injury-matrix-grid{


        grid-template-columns:

        1fr;


    }


}

/* =====================================
   SAFETYGUNA PREMIUM SELECT
===================================== */

select,
.form-select{

    height:38px;
    min-width:130px;

    padding:
    0 40px 0 18px;

    border:none;

    border-radius:20px;

    background:
    #eef5ff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='%23002b5b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E")
    no-repeat;

    background-position:
    right 16px center;


    color:#002b5b;

    font-size:13px;

    font-weight:800;


    appearance:none;
    -webkit-appearance:none;


    cursor:pointer;


    box-shadow:
    inset 0 0 0 1px rgba(0,43,91,.04);


    transition:
    all .25s ease;

}



/* HOVER */
select:hover,
.form-select:hover{

    background-color:#e5f0ff;

    transform:
    translateY(-1px);

}



/* FOCUS */
select:focus,
.form-select:focus{


    outline:none;


    background-color:white;


    box-shadow:

    0 0 0 3px rgba(255,196,0,.35),
    inset 0 0 0 2px #ffc400;


}




/* OPTION */
select option{


    background:white;

    color:#002b5b;

    font-size:14px;

    font-weight:700;

}



.filter-group select{

    height:38px !important;

    border:none !important;

    border-radius:20px !important;

    background-color:#eef5ff !important;

    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='%23002b5b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;

    background-repeat:no-repeat !important;

    background-position:right 15px center !important;

    appearance:none;
    -webkit-appearance:none;

    color:#002b5b !important;

    font-weight:800;

    padding:0 38px 0 18px;

    box-shadow:
    inset 0 0 0 1px rgba(0,43,91,.04);

}



/* pas hover */
.filter-group select:hover{

    background-color:#e4efff !important;

}



/* pas klik */
.filter-group select:focus{

    outline:none;

    background-color:#fff !important;


    box-shadow:

    0 0 0 3px rgba(255,196,0,.30),
    inset 0 0 0 2px #ffc400;

}

/* DETAIL ACCIDENT */

#detailModal .modal-xl{

max-width:1100px;

}


#detailModal label{

font-size:12px;

color:#6c757d;

font-weight:700;

}


#detailModal h6{

font-size:14px;

font-weight:800;

color:#002b5b;

}



.injury-detail-box{

background:#fff3cd;

border-radius:18px;

padding:18px;

}



.detail-text{

background:#f4f8ff;

padding:14px;

border-radius:15px;

font-weight:600;

min-height:50px;

}



.photo-panel{

background:#f4f8ff;

border-radius:20px;

padding:15px;

min-height:400px;

display:flex;

flex-direction:column;

gap:12px;

}


.photo-panel img{

width:100%;

height:180px;

object-fit:cover;

border-radius:15px;

cursor:pointer;

transition:.2s;

}


.photo-panel img:hover{

transform:scale(1.03);

}



.zoom-image{

width:100%;

max-height:90vh;

object-fit:contain;

border-radius:20px;

}

/* DETAIL TOP INFO */


.detail-item{

background:#f4f8ff;

border-radius:15px;

padding:12px 15px;

height:100%;

}


.detail-item label{

font-size:11px !important;

color:#7a8499 !important;

font-weight:800;

}


.detail-item h6{

margin-top:5px;

font-size:14px !important;

line-height:1.3;

color:#002b5b;

}


/* ============================
   EDIT FOTO PREVIEW
============================ */

.edit-photo-list{

display:flex;

gap:12px;

margin-top:15px;

flex-wrap:wrap;

}


.edit-photo-item{

position:relative;

}


.edit-photo-item img{

width:90px !important;

height:90px !important;

object-fit:cover;

border-radius:15px;

}


.edit-photo-item button{

position:absolute;

top:-8px;

right:-8px;

width:28px;

height:28px;

border:none;

border-radius:50%;

background:#dc3545;

color:white;

}

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

/* FILTER + FORMULA */

.performance-note{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

}

.performance-note .filter-group{

    display:flex;
    align-items:center;
    gap:10px;

    flex:0 0 250px;
    width:250px;

    margin-right:18px; /* tambah jarak ke formula */

}

.filter-year{

    width:105px !important;

}

.filter-plant{

    width:135px !important;

}

.rate-formula{

    flex:1;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    min-width:0;

}

.rate-formula>div{

    display:flex;
    align-items:center;

    gap:8px;

    min-width:0;

    padding:8px 12px;

    background:#eef5ff;

    border-radius:12px;

}

.rate-formula>div i{

    width:24px;
    height:24px;
    min-width:24px;

    border-radius:8px;

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

    font-size:12px;

    background:#fff;

    color:#ffb300;

}

.rate-formula span{

    display:flex;
    flex-direction:column;

    min-width:0;

    overflow:hidden;

    font-size:9px;

    line-height:1.2;

    color:#444;

}

.rate-formula span b{

    font-size:11px;

    font-weight:800;

    color:#002b5b;

    margin-bottom:2px;

}

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

.header-action{

    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:12px;

    flex-shrink:0;

}

.btn-export{

    border:none;

    background:#16a34a;

    color:#fff;

    height:46px;

    padding:0 22px;

    border-radius:14px;

    font-weight:800;

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

    gap:8px;

    white-space:nowrap;

}

.btn-export:hover{

    background:#15803d;

}

/* ==================================================
   ACCIDENT FILTER
================================================== */

.accident-filter{

    align-items:center;

}

.accident-filter .filter-group{

    display:flex;

    gap:12px;

}

/* ==================================================
   TOTAL CASE CARD
================================================== */

.stat-card.total-case-card{

    background:linear-gradient(135deg,#0b5ed7,#4a90ff);

}

.stat-card.total-case-card small{

    color:rgba(255,255,255,.85);

}

.stat-card.total-case-card h3{

    color:#fff;

}

.stat-card.total-case-card .stat-icon{

    background:rgba(255,255,255,.18);

    color:#fff;

}

/* ==================================================
   RATE CARD
================================================== */

.rate-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

}

.rate-card{

    background:#fff;

    border-radius:18px;

    min-height:130px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:18px 20px;

}

.rate-card small{

    display:block;

    font-size:14px;

    font-weight:700;

    color:#0d3b73;

    margin-bottom:8px;

}

.rate-card h1{

    margin:0;

    font-size:46px;

    font-weight:800;

    line-height:1;

    color:#0d3b73;

}

.rate-card p{

    margin-top:10px;

    margin-bottom:0;

    font-size:13px;

    color:#666;

}

/* ==================================================
   RESPONSIVE
================================================== */

@media(max-width:1200px){

    .performance-note{

        flex-direction:column;

        align-items:stretch;

    }

    .performance-note .filter-group{

        width:100%;

        flex:none;

    }

    .rate-formula{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .header-action{

        width:100%;

        justify-content:flex-start;

        flex-wrap:wrap;

    }

    .performance-note{

        flex-direction:column;

        align-items:stretch;

    }

    .performance-note .filter-group{

        width:100%;

        flex-direction:column;

    }

    .filter-year,

    .filter-plant{

        width:100% !important;

    }

    .rate-formula{

        grid-template-columns:1fr;

    }

}


/* ============================================================
   SAFETYGUNA - FINAL MOBILE RESPONSIVE
   ============================================================ */

/* ============================================================
   DESKTOP DEFAULT
   ============================================================ */

.mobile-menu-btn{
    display:none;
}

.mobile-menu-overlay{
    display:none;
}


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

@media (max-width: 768px){

    /* ========================================================
       BASIC
       ======================================================== */

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    body{
        background:#f4f8ff;
    }

    .app-wrapper{
        width:100%;
        min-height:100vh;
        display:block;
    }


    /* ========================================================
       SIDEBAR OFF-CANVAS
       ======================================================== */

    .sidebar{
        display:flex !important;

        width:280px !important;
        height:100vh;

        position:fixed;
        top:0;
        left:-285px !important;

        padding:22px 18px;

        z-index:1200;

        transition:
            left .3s ease,
            box-shadow .3s ease;

        box-shadow:none;

        overflow-y:auto;
        overflow-x:hidden;
    }


    .sidebar.collapsed{
        width:280px !important;
        left:-285px !important;
    }


    .sidebar.mobile-open,
    .sidebar.collapsed.mobile-open{
        left:0 !important;
        width:280px !important;

        box-shadow:
            12px 0 35px rgba(0,0,0,.20);
    }


    /* Tampilkan kembali isi sidebar */

    .sidebar.mobile-open span,
    .sidebar.mobile-open .side-logo span,
    .sidebar.mobile-open .side-profile div{
        display:block !important;
        opacity:1 !important;
        width:auto !important;
    }


    .sidebar.mobile-open .side-logo img{
        width:64px !important;
        height:64px !important;
    }


    .sidebar.mobile-open .side-menu{
        justify-content:flex-start !important;
        padding:0 18px !important;

        height:52px;
        margin-bottom:10px;
        gap:18px;
        border-radius:13px;
    }


    .sidebar.mobile-open .side-menu i{
        font-size:21px !important;
    }


    .sidebar.mobile-open .side-profile{
        height:70px;
    }


    /* Tombol collapse desktop tidak diperlukan di HP */

    .sidebar .collapse-btn{
        display:none !important;
    }


    /* ========================================================
       OVERLAY
       ======================================================== */

    .mobile-menu-overlay{
        display:block;

        position:fixed;
        inset:0;

        background:rgba(0,20,45,.45);

        backdrop-filter:blur(2px);

        z-index:1100;

        opacity:0;
        visibility:hidden;

        pointer-events:none;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }


    .mobile-menu-overlay.active{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }


    /* ========================================================
       MAIN CONTENT
       ======================================================== */

    .main-content,
    .sidebar.collapsed ~ .main-content{
        margin-left:0 !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }


    /* ========================================================
       TOPBAR
       ======================================================== */

    .topbar{
        width:100%;
        height:64px;

        padding:0 14px;

        display:flex;
        align-items:center;
        justify-content:space-between;

        background:#fff;

        position:sticky;
        top:0;

        z-index:1000;

        box-shadow:
            0 3px 15px rgba(0,43,91,.06);
    }


    .page-title{
        display:flex;
        align-items:center;

        min-width:0;
        flex:1;
    }


    .page-title h4{
        margin:0;

        font-size:19px;
        line-height:1.2;

        font-weight:800;
        color:#002b5b;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }


    /* ========================================================
       HAMBURGER
       ======================================================== */

    .mobile-menu-btn{
        width:40px;
        height:40px;

        min-width:40px;

        margin-right:10px;

        border:none;
        border-radius:12px;

        background:#eef5ff;
        color:#002b5b;

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

        font-size:21px;

        cursor:pointer;

        transition:
            transform .2s ease,
            background .2s ease;
    }


    .mobile-menu-btn:hover{
        background:#e1edff;
    }


    .mobile-menu-btn:active{
        transform:scale(.94);
    }


    /* ========================================================
       TOP ACTION
       ======================================================== */

    .top-action{
        display:flex;
        align-items:center;

        flex-shrink:0;

        gap:10px;
    }


    .notif{
        font-size:20px;
    }


    .top-profile{
        gap:0;
    }


    .top-profile > div:not(.top-avatar),
    .top-profile b,
    .top-profile small{
        display:none !important;
    }


    .top-avatar{
        width:36px;
        height:36px;

        font-size:15px;
    }


    .logout-btn{
        font-size:20px;
    }


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

    .page-content{
        width:100%;

        padding:
            14px 14px 30px;

        overflow:hidden;
    }


    #dashboardApp{
        width:100%;
        max-width:100%;
        min-width:0;
    }


    /* ========================================================
       BOOTSTRAP ROW FIX
       ======================================================== */

    .page-content > .row,
    #dashboardApp > .row{
        width:100%;

        margin-left:0 !important;
        margin-right:0 !important;
    }


    .page-content > .row > [class*="col-"],
    #dashboardApp > .row > [class*="col-"]{
        padding-left:0 !important;
        padding-right:0 !important;
    }


    /* ========================================================
       DASHBOARD TOP
       ======================================================== */

    .dash-top-card{
        width:100%;

        padding:16px;

        border-radius:18px;

        display:flex;
        flex-direction:column;

        align-items:stretch;

        gap:18px;

        box-shadow:
            0 6px 20px rgba(0,43,91,.05);
    }


    .last-accident{
        width:100%;

        display:flex;
        align-items:center;

        gap:14px;
    }


    .big-icon{
        width:55px;
        height:55px;
        min-width:55px;

        border-radius:15px;

        font-size:24px;
    }


    .last-accident small{
        font-size:11px;
    }


    .last-accident h2{
        margin:2px 0;

        font-size:28px;
        line-height:30px;
    }


    .last-accident h2 span{
        font-size:13px;
    }


    .last-accident p{
        font-size:11px;
        line-height:1.5;
    }


    /* ========================================================
       DASHBOARD FILTER
       ======================================================== */

    .top-filter-area{
        width:100%;

        display:flex;
        flex-direction:column;

        align-items:stretch !important;

        gap:12px;
    }


    .filter-group{
        width:100%;

        display:grid;

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

        gap:8px;
    }


    .filter-group select,
    .filter-year,
    .filter-plant{
        width:100% !important;
        min-width:0 !important;

        height:40px !important;

        padding:
            0 34px 0 14px !important;

        font-size:12px !important;

        border-radius:20px !important;

        background-position:
            right 12px center !important;
    }


    /* ========================================================
       MONTH
       ======================================================== */

    .month-list{
        width:100%;

        display:grid !important;

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

        gap:7px;

        justify-content:initial;
    }


    .month-list button{
        width:100%;

        min-width:0;

        height:34px;

        padding:0 4px;

        font-size:11px;

        border-radius:17px;
    }


    .month-list button.active{
        background:#ffc400;
        color:#002b5b;

        box-shadow:
            0 4px 12px rgba(255,196,0,.25);
    }


    /* ========================================================
       KPI
       ======================================================== */

    .stat-grid,
    .main-grid,
    .small-grid{
        width:100%;

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

        gap:10px;

        margin-top:12px;
    }


    .stat-card{
        width:100%;
        min-width:0;

        min-height:100px;

        padding:14px;

        border-radius:17px;

        gap:8px;
    }


    .stat-card small{
        font-size:10px;
        line-height:15px;
    }


    .stat-card h3{
        margin-top:4px;

        font-size:25px;
        line-height:28px;
    }


    .stat-icon{
        width:38px;
        height:38px;
        min-width:38px;

        border-radius:12px;

        font-size:17px;
    }


    /* ========================================================
       INJURY MATRIX
       ======================================================== */

    .injury-matrix-grid{
        width:100%;

        display:grid !important;

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

        gap:10px;

        margin-top:12px;
        margin-bottom:12px;
    }


    .injury-matrix-card{
        width:100%;
        min-width:0;

        min-height:125px;

        padding:14px;

        border-radius:17px;

        align-items:center;

        gap:6px;
    }


    .injury-matrix-card small{
        display:block;

        font-size:10px;
        line-height:15px;

        overflow-wrap:anywhere;
    }


    .injury-matrix-card h3{
        margin:5px 0;

        font-size:28px;
        line-height:30px;
    }


    .injury-matrix-card p{
        font-size:10px;
        line-height:14px;
    }


    .injury-matrix-card p span{
        font-size:11px;
    }


    .injury-icon{
        width:38px;
        height:38px;
        min-width:38px;

        border-radius:12px;

        font-size:18px;
    }


    /* ========================================================
       INCIDENT TYPE
       ======================================================== */

    .type-grid{
        width:100%;

        display:grid;

        grid-template-columns:1fr !important;

        gap:10px;

        margin-top:12px;
    }


    .type-card{
        width:100%;

        height:82px;

        padding:14px;

        border-radius:17px;
    }


    .type-icon{
        width:46px;
        height:46px;

        font-size:23px;
    }


    .type-card h2{
        font-size:25px;
    }


    /* ========================================================
       LTIFR / IR / SR
       ======================================================== */

    .rate-grid{
        width:100%;

        display:grid;

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

        gap:10px !important;
    }


    .rate-card{
        width:100%;

        height:auto;
        min-height:110px;

        padding:15px 10px;

        border-radius:17px;
    }


    .rate-card h1{
        margin:4px;

        font-size:29px;
    }


    .rate-card p{
        font-size:10px;
        line-height:15px;
    }


    .rate-card:nth-child(3){
        grid-column:1 / -1;
    }


    /* ========================================================
       CHART
       ======================================================== */

    .chart-row{
        width:100%;

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

        display:flex;

        flex-direction:column;

        gap:12px;
    }


    .chart-row > [class*="col-"]{
        width:100% !important;
        max-width:100% !important;

        flex:0 0 100% !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }


    .panel-card{
        width:100%;

        padding:15px;

        border-radius:17px;
    }


    .chart-panel{
        width:100%;

        height:280px;
    }


    .chart-box{
        width:100%;

        height:220px;

        position:relative;
    }


    .chart-box canvas{
        width:100% !important;
        max-width:100% !important;

        height:100% !important;
    }


    .panel-card h6{
        font-size:12px;

        line-height:18px;

        margin-bottom:10px;
    }


    .chart-empty{
        position:absolute;

        inset:0;

        display:flex;

        flex-direction:column;

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

        gap:8px;

        color:#9aa5b5;

        font-size:13px;
        font-weight:600;

        text-align:center;
    }


    .chart-empty i{
        font-size:30px;
        opacity:.5;
    }


    /* ========================================================
       SAFETY INFO
       ======================================================== */

    .image-panel{
        width:100%;

        min-height:0;

        padding:10px;

        border-radius:17px;

        overflow:hidden;
    }


    .safety-info-img{
        width:100%;
        height:auto;

        display:block;

        border-radius:13px;
    }


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

    .page-action-card{
        width:100%;

        flex-direction:column;

        align-items:flex-start;

        gap:15px;
    }


    .page-action-card .btn-add{
        width:100%;
        justify-content:center;
    }


    .filter-card{
        width:100%;

        flex-direction:column;

        gap:10px;
    }


    .filter-card select{
        width:100% !important;
    }


    /* Table tidak merusak layout HP */

    .safety-table{
        min-width:700px;
    }


    .table-responsive{
        width:100%;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;
    }


    /* ========================================================
       DETAIL MODAL
       ======================================================== */

    #detailModal .modal-xl{
        max-width:none;
        width:calc(100% - 20px);

        margin:10px auto;
    }


    .detail-summary{
        padding:16px;

        border-radius:17px;

        flex-direction:column;

        align-items:flex-start;

        gap:12px;
    }


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


    .photo-panel{
        min-height:0;
    }


    /* ========================================================
       MASTER
       ======================================================== */

    .master-tabs{
        width:100%;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:4px;

        -webkit-overflow-scrolling:touch;
    }


    .master-tabs button{
        flex:0 0 auto;
    }


    /* ========================================================
       PERFORMANCE
       ======================================================== */

    .performance-note{
        flex-direction:column;

        align-items:stretch;

        gap:12px;
    }


    .performance-note .filter-group{
        width:100%;

        flex:none;

        margin-right:0;
    }


    .rate-formula{
        grid-template-columns:1fr;
    }


    .header-action{
        width:100%;

        justify-content:flex-start;

        flex-wrap:wrap;
    }

}


/* ============================================================
   HP SANGAT KECIL
   ============================================================ */

@media (max-width: 380px){

    .page-content{
        padding:
            12px 10px 25px;
    }


    .topbar{
        padding:
            0 12px;
    }


    .page-title h4{
        font-size:17px;
    }


    .top-action{
        gap:8px;
    }


    .mobile-menu-btn{
        width:38px;
        height:38px;
        min-width:38px;

        margin-right:8px;
    }


    .dash-top-card{
        padding:14px;
    }


    .month-list{
        gap:6px;
    }


    .month-list button{
        font-size:10px;
    }


    .stat-card{
        padding:12px;
    }


    .stat-card h3{
        font-size:23px;
    }


    .stat-icon{
        width:34px;
        height:34px;

        min-width:34px;

        font-size:15px;
    }


    .injury-matrix-card{
        padding:12px;

        min-height:120px;
    }


    .injury-icon{
        width:34px;
        height:34px;

        min-width:34px;
    }


    .detail-grid{
        grid-template-columns:1fr;
    }

}