/* =========================
   RESET
========================= */
*{
    box-sizing:border-box;
}

body.body-user{
    margin:20px auto 0 auto;
    max-width:400px;
    padding:0;
    background:linear-gradient(135deg,#00c6ff,#0072ff);
    font-family:'Segoe UI',sans-serif;
}

/* =========================
   TEXT
========================= */
.text-gradient-blue{
    background:linear-gradient(135deg,#00c6ff,#0072ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;
}

.text-gradient-blue.active{
    color:#ffffff;
}

/* =========================
   WRAPPER
========================= */
.wrapper{
    min-height:100dvh;
    display:flex;
    justify-content:center;
    padding:10px 0 80px 0;
}

.login-container{
    width:100%;
    max-width:100%;
    overflow-y:auto;
}

/* =========================
   LOGO
========================= */
.logo-wrapper{
    text-align:center;
    margin-bottom:-60px;
    position:relative;
    z-index:10;
}

.logo-outer{
    width:130px;
    height:130px;
    margin:auto;
    background:#f5f5f5;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

.logo-inner{
    width:100px;
    height:100px;
    background:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.logo-inner img{
    max-width:90px;
}

/* =========================
   BOX
========================= */
.login-box1{
    padding:80px 25px 20px 25px;
    border-radius:15px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    overflow:visible;
    position:relative;
}

.login-box2{
    padding:20px;
    border-radius:15px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    overflow:visible;
    position:relative;
}

/* =========================
   MAP
========================= */
#map{
    height:180px;
    border-radius:10px;
    margin-bottom:10px;
}

#alamat_otomatis{
    font-size:13px;
    margin-bottom:15px;
}

/* =========================
   TITLE
========================= */
.login-title{
    text-align:center;
    font-weight:bold;
    font-size:26px;
    margin-bottom:20px;
    background:linear-gradient(135deg,#00c6ff,#0072ff);
    -webkit-background-clip:text;
    color:transparent;
}

/* =========================
   MENU
========================= */
.menu-card{
    height:70px;
    border-radius:12px;
    background:#f5f5f5;
    font-weight:600;
    font-size:16px;
    cursor:pointer;
    transition:0.3s;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
}

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

.menu-card.visit{
    border-top:4px solid #28a745;
}

.menu-card.izin{
    border-top:4px solid #ffc107;
}

.menu-card.active{
    background:linear-gradient(135deg,#00c6ff,#0072ff);
    color:#fff;
    transform:translateY(-2px);
}

/* =========================
   FORM
========================= */
.form-section{
    display:none;
    margin-top:20px;
    animation:fadeIn 0.3s ease-in-out;
}

.form-group{
    margin-bottom:15px;
}

.form-control,
.custom-select-style{
    width:100%;
    height:46px;
    padding:0 14px;
    border:1px solid #dcdcdc;
    border-radius:10px;
    font-size:14px;
    background-color:#fff;
    outline:none;
    transition:all 0.3s ease;
}

textarea.form-control{
    resize:none;
    height:auto;
    min-height:100px;
    padding:12px;
}

.form-control:focus,
.custom-select-style:focus{
    border-color:#0072ff;
    box-shadow:0 0 0 3px rgba(0,114,255,0.12);
}

/* =========================
   UPLOAD
========================= */
.upload-box{
    width:180px;
    border:2px dashed #ccc;
    border-radius:10px;
    cursor:pointer;
    margin:10px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.upload-box img{
    width:100%;
    height:100%;
    object-fit:cover;
}

input[type="file"]{
    display:none;
}

/* =========================
   BUTTON
========================= */
button[type="submit"]{
    width:100%;
    border-radius:10px;
    padding:12px;
    font-weight:600;
    margin-top:10px;
}

/* =========================
   ANIMATION
========================= */
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================
   FOOTER
========================= */
.footer-menu{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:70px;
    background:#ffffff;
    display:flex;
    justify-content:space-around;
    align-items:center;
    box-shadow:0 -2px 15px rgba(0,0,0,0.1);
    z-index:1000;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
}

.footer-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#888;
    cursor:pointer;
    transition:0.3s;
    flex:1;
}

.footer-item i{
    font-size:20px;
    margin-bottom:4px;
}

.footer-item span{
    font-size:12px;
    font-weight:500;
}

.footer-item.active{
    color:#0072ff;
}

/* =========================
   CARD
========================= */
.flex{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
}

.card{
    background:white;
    margin:15px;
    padding:15px;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.time-box{
    width:48%;
    background:#f1f5f9;
    padding:15px;
    border-radius:15px;
    text-align:center;
}

.time-box2{
    width:48%;
}

.time{
    font-size:24px;
    font-weight:bold;
    color:#2563eb;
}

.status{
    font-size:15px;
    margin-top:5px;
    padding:5px;
    border-radius:10px;
    width:100%;
}

.status.blue{
    background:#dae9fe;
    color:#2563eb;
}

.status.green{
    background:#d1fae5;
    color:#065f46;
}

.status.gray{
    background:#e5e7eb;
    color:#374151;
}

.status.orange{
    background:#f5dc98;
    color:#f3b421;
}

/* =========================
   HOME MENU
========================= */
.home-menu{
    width:24%;
    background:#f1f5f9;
    padding:10px;
    border-radius:15px;
    text-align:center;
    color:#2563eb;
    cursor:pointer;
}

.home-menu-icon{
    font-size:20px;
    margin-bottom:5px;
}

.home-menu-tittle{
    font-size:7px;
    font-weight:bold;
}

/* =========================
   STORE INFO
========================= */
.nama-toko{
    font-size:20px;
    font-weight:bold;
}

.status-visited{
    font-size:15px;
    font-weight:bold;
}

.nama-area{
    font-size:15px;
}

.alamat-toko{
    font-size:12px;
}

/* =========================
   FLOAT BUTTON
========================= */
.footer-extra-button{
    position:fixed;
    bottom:65px;
    left:50%;
    transform:translateX(-50%);
    width:40px;
    height:40px;
    border-radius:50% 50% 0 0;
    background:linear-gradient(135deg,#00c6ff,#0072ff);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    cursor:pointer;
    z-index:1100;
    border:4px solid #fff;
}

.footer-extra-button i{
    margin:0;
}

/* =========================
   TABLE
========================= */
table,
tr,
td,
.table-responsive{
    overflow:visible !important;
}

/* =========================
   ERROR TOOLTIP
========================= */
.form-group-custom{
    position:relative;
    width:100%;
    overflow:visible !important;
}

.tooltip-error{
    position:absolute;
    top:calc(100% + 5px);
    left:0;
    background:#dc3545;
    color:#fff;
    padding:6px 10px;
    border-radius:6px;
    font-size:11px;
    font-weight:600;
    line-height:1.3;
    white-space:nowrap;
    z-index:999999;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
}

.tooltip-error::before{
    content:"";
    position:absolute;
    top:-6px;
    left:15px;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid #dc3545;
}

.error-input{
    border:2px solid #dc3545 !important;
    background-color:#fff5f5 !important;
}

/* =========================
   FILTER
========================= */
.filter-wrapper{
    border:1px solid #ddd;
    border-radius:10px;
    overflow:visible;
    background:#fff;
    margin-bottom:20px;
    position:relative;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.filter-header{
    background:linear-gradient(to bottom,#4facfe 0%,#0072ff 100%);
    color:white;
    padding:12px;
    text-align:center;
    font-weight:bold;
    font-size:14px;
    letter-spacing:1px;
    border-radius:10px 10px 0 0;
}

.filter-body{
    padding:20px;
    background:#fff;
}

.filter-row{
    display:flex;
    gap:15px;
    align-items:flex-end;
}

/* KOLOM */
.filter-col{
    flex:1;
}

/* KOLOM ACTION */
.filter-col-action{
    width:180px;
    min-width:180px;
}

/* LABEL */
.filter-label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#333;
    text-align:center;
}

/* INPUT GROUP */
.custom-input-group{
    display:flex;
    align-items:stretch;
    width:100%;
}

/* ICON */
.input-icon-box{
    width:46px;
    min-width:46px;
    height:46px;

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

    background:#f5f5f5;
    border:1px solid #dcdcdc;
    border-right:none;

    border-radius:10px 0 0 10px;

    color:#666;
    font-size:16px;
}

/* INPUT */
.custom-input-date,
.custom-input-select{
    width:100%;
    height:46px;

    border:1px solid #dcdcdc;
    border-radius:0 10px 10px 0;

    padding:0 14px;

    font-size:14px;
    background:#fff;
    color:#444;

    outline:none;
    transition:0.3s;
}

.custom-input-date:focus,
.custom-input-select:focus{
    border-color:#0072ff;
    box-shadow:0 0 0 3px rgba(0,114,255,0.12);
}

/* BUTTON */
.btn-search-custom{
    width:100%;
    height:46px;

    border:none;
    border-radius:10px;

    background:linear-gradient(to bottom,#ff9800 0%,#f57c00 100%);
    color:#fff;

    font-size:15px;
    font-weight:700;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    cursor:pointer;
    transition:0.3s;

    margin:0 !important;
}

.btn-search-custom:hover{
    transform:translateY(-1px);
    box-shadow:0 5px 12px rgba(0,0,0,0.15);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:768px){

    .filter-row{
        flex-direction:column;
        align-items:stretch;
    }

    .filter-col,
    .filter-col-action{
        width:100%;
        min-width:100%;
    }

    .filter-label{
        text-align:left;
    }
}