/* ================= RESET ================= */

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

body{
    background:#eef2f7;
    overflow-x:hidden;
}

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

.layout{
    display:flex;
    min-height:100vh;
}

/* ===================================================== */
/* ================= AUTH (LOGIN / REGISTER) =========== */
/* ===================================================== */

/* Background halaman auth */
body.auth-page{
    background:linear-gradient(135deg,#1f3c88,#2563eb,#3b82f6);
    background-size:200% 200%;
    animation:bgMove 8s ease infinite;
}

@keyframes bgMove{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}

/* Wrapper */
.auth-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:30px;
}

/* Card utama */
.auth-card{
    width:100%;
    max-width:1050px;
    background:rgba(255,255,255,0.97);
    border-radius:30px;
    box-shadow:0 30px 60px rgba(0,0,0,0.25);
    display:flex;
    overflow:hidden;
    backdrop-filter:blur(12px);
    transition:.3s ease;
}

/* ================= LEFT SIDE ================= */

.auth-left{
    flex:1;
    padding:70px 60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.auth-left h1{
    font-size:30px;
    font-weight:600;
    color:#1f3c88;
    margin-bottom:12px;
}

.auth-left p{
    font-size:14px;
    color:#666;
    margin-bottom:30px;
}

/* Form */
.auth-card .form-group{
    margin-bottom:20px;
}

.auth-card label{
    font-size:13px;
    font-weight:500;
    color:#444;
    margin-bottom:6px;
    display:block;
}

.auth-card input,
.auth-card textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:14px;
    transition:.3s ease;
    background:#f9fafb;
}

.auth-card input:focus,
.auth-card textarea:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,0.15);
    outline:none;
    background:white;
}

/* Tombol khusus auth supaya tidak bentrok global */
.auth-card .btn{
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    font-weight:600;
    cursor:pointer;
    transition:.3s ease;
    text-decoration:none;
    display:inline-block;
    text-align:center;
}

/* Primary */
.auth-card .btn-primary{
    background:linear-gradient(135deg,#1f3c88,#3b82f6);
    color:white;
}

.auth-card .btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(31,60,136,0.35);
}

/* Secondary */
.auth-card .btn-secondary{
    background:linear-gradient(135deg,#00c6ff,#0072ff);
    color:white;
}

.auth-card .btn-secondary:hover{
    transform:translateY(-3px);
}

/* Error */
.auth-card .error{
    background:#ffe5e5;
    color:#c00;
    padding:12px;
    border-radius:10px;
    margin-bottom:18px;
    font-size:13px;
}

/* ================= RIGHT SIDE ================= */

.auth-right{
    flex:1;
    background:linear-gradient(135deg,#f1f5ff,#e6ecff);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.auth-right img{
    width:80%;
    max-width:420px;
    animation:float 3.5s ease-in-out infinite;
}

@keyframes float{
    0%{ transform:translateY(0px); }
    50%{ transform:translateY(-12px); }
    100%{ transform:translateY(0px); }
}

/* Input dengan icon */

.input-icon{
    position:relative;
}

.input-icon i{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:#888;
}

.input-icon input{
    padding-left:40px !important;
}

/* Password toggle icon */

.password-wrapper{
    position:relative;
}

.password-wrapper .toggle-password{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#888;
}

/* kendaraan dynamic item */
.kendaraan-item{
    display:flex;
    gap:10px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.btn-small{
    padding:8px 14px;
    font-size:13px;
}   


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

@media(max-width:992px){

    .auth-card{
        flex-direction:column;
    }

    .auth-right{
        display:none;
    }

    .auth-left{
        padding:50px 30px;
    }
}




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

.sidebar{
    position:fixed;
    left:0;
    top:0;
    width:250px;
    height:100vh;
    overflow-y:auto;

    background:linear-gradient(180deg,#1f3c88,#2563eb,#3b82f6);
    color:white;
    padding:25px 18px;

    transition:.3s ease;
}

/* collapse */
.sidebar.hide{
    width:80px;
}

.sidebar .logo{
    font-size:20px;
    font-weight:600;
    margin-bottom:35px;
}

.sidebar ul{
    list-style:none;
}

.sidebar ul li{
    margin-bottom:8px;
}

.sidebar ul li a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:12px;
    text-decoration:none;
    color:white;
    transition:.2s;
}

.sidebar ul li a:hover{
    background:rgba(255,255,255,.15);
}

.sidebar ul li.active a{
    background:rgba(255,255,255,.25);
}

.sidebar.hide .logo,
.sidebar.hide ul li a span{
    display:none;
}

.sidebar.hide ul li a{
    justify-content:center;
}

/* ================= MAIN WRAPPER ================= */

.main-wrapper{
    margin-left:250px;
    width:calc(100% - 250px);
    transition:.3s ease;
}

/* collapse = shrink width */
.sidebar.hide + .main-wrapper{
    margin-left:80px;
    width:calc(100% - 80px);
}

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

.topbar{
    position:fixed;
    top:0;
    left:250px;
    right:0;
    height:65px;
    background:white;

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

    padding:0 25px;
    box-shadow:0 4px 15px rgba(0,0,0,.05);
    z-index:1000;
    transition:.3s;
}

.sidebar.hide ~ .main-wrapper .topbar{
    left:80px;
}

.logo-text{
    font-weight:600;
    margin:0;
}

.search-box{
    border:1px solid #ddd;
    padding:6px 10px;
    border-radius:8px;
}

/* ================= MODERN TOGGLE BUTTON ================= */

.toggle-btn-modern{
    width:42px;
    height:42px;
    border-radius:12px;
    border:none;
    background:#f3f4f6;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    cursor:pointer;
    transition:.3s ease;
}

.toggle-btn-modern:hover{
    background:#e5e7eb;
    transform:scale(1.05);
}

/* garis hamburger */
.toggle-btn-modern span{
    width:20px;
    height:2px;
    background:#111827;
    border-radius:2px;
    transition:.3s ease;
}

/* animasi saat aktif */
.toggle-btn-modern.active span:nth-child(1){
    transform:rotate(45deg) translate(4px,4px);
}

.toggle-btn-modern.active span:nth-child(2){
    opacity:0;
}

.toggle-btn-modern.active span:nth-child(3){
    transform:rotate(-45deg) translate(5px,-5px);
}

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

.topbar-right{
    display:flex;
    align-items:center;
    gap:20px;
}

/* Search Box */
.search-box{
    border:1px solid #e5e7eb;
    padding:8px 14px;
    border-radius:10px;
    background:#f9fafb;
    transition:.2s;
    width:200px;
}

.search-box:focus{
    outline:none;
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

/* Profile Dropdown */

.profile-dropdown{
    position:relative;
}

.profile-btn{
    display:flex;
    align-items:center;
    gap:8px;
    background:#f3f4f6;
    padding:8px 14px;
    border-radius:10px;
    cursor:pointer;
    transition:.2s;
}

.profile-btn:hover{
    background:#e5e7eb;
}

.dropdown-menu{
    position:absolute;
    right:0;
    top:120%;
    background:white;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    display:none;
    flex-direction:column;
    min-width:170px;
    padding:8px 0;
    z-index:1000;
}

.dropdown-menu a{
    padding:10px 15px;
    text-decoration:none;
    color:#333;
    display:flex;
    gap:10px;
    align-items:center;
    transition:.2s;
}

.dropdown-menu a:hover{
    background:#f3f4f6;
}

.dropdown-menu .logout{
    color:#dc2626;
}

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

.main-content{
    padding:70px 30px 40px 30px;
}

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

.card{
    background:white;
    padding:22px;
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    margin-bottom:20px;
}

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

.btn{
    padding:10px 20px;
    border:none;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
    color:white;
}

.btn-primary{
    background:linear-gradient(135deg,#1f3c88,#3b82f6);
}

.btn-success{
    background:linear-gradient(135deg,#16a34a,#22c55e);
}

.btn-danger{
    background:linear-gradient(135deg,#dc2626,#ef4444);
}

.btn-dark{
    background:linear-gradient(135deg,#4b5563,#111827);
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(0,0,0,.15);
}


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

.table .btn,
td .btn{
    width:auto !important;
    padding:6px 10px;
    font-size:12px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
}

.table .btn i,
td .btn i{
    font-size:12px;
}

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

.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
}

.sidebar-overlay.active{
    opacity:1;
    visibility:visible;
}

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

.approval-card{
    padding:30px;
    border-radius:18px;
}

.approval-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.approval-header h3{
    margin:0;
}

.approval-header p{
    font-size:13px;
    color:#666;
    margin-top:5px;
}

.status-badge{
    padding:6px 12px;
    font-size:12px;
    font-weight:600;
    border-radius:20px;
}

.status-badge.pending{
    background:#fff3cd;
    color:#856404;
}

/* GRID */
.approval-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

/* SECTION */
.approval-section{
    background:#f9fafb;
    padding:20px;
    border-radius:14px;
}

.approval-section h4{
    margin-bottom:15px;
    font-size:15px;
    font-weight:600;
    color:#1f3c88;
}

/* Account highlight */
.account-box{
    border:1px solid #e5e7eb;
    background:#f1f5ff;
}

.account-note{
    margin-top:10px;
    font-size:12px;
    color:#555;
    display:flex;
    align-items:center;
    gap:6px;
}

/* Actions */
.approval-actions{
    margin-top:30px;
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

/* Responsive */
@media(max-width:992px){
    .approval-grid{
        grid-template-columns:1fr;
    }
}



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

@media(max-width:992px){

    .sidebar{
        transform:translateX(-100%);
        z-index:1001;
    }

    .sidebar.active{
        transform:translateX(0);
    }

    .main-wrapper{
        /* margin-left:0 !important; */
        margin-left: 0 !important;
        width: 100% !important;
    }

    .topbar{
        left: 0 !important;
        width: 100%;
    }


    /* ====================4 Maret 2026===== */

    /* MODAL MODERN STYLE */
    .modern-modal {
        background: linear-gradient(145deg, #1e1e2f, #252542);
        color: #fff;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        backdrop-filter: blur(10px);
    }

    .modern-modal .modal-header {
        padding: 20px 25px;
    }

    .modern-modal .modal-body {
        padding: 0 25px 20px 25px;
    }

    .modern-input {
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.1);
        color: #fff;
        border-radius: 12px;
        padding: 10px 15px;
    }

    .modern-input:focus {
        background: rgba(255,255,255,0.15);
        border-color: #ffc107;
        box-shadow: 0 0 10px rgba(255,193,7,0.4);
        color: #fff;
    }

    .modal-footer .btn-warning {
        border-radius: 12px;
        font-weight: 600;
    }

    .toggle-password {
    position: absolute;
    right: 15px;
    top: 40px;
    cursor: pointer;
    color: #ffc107;
    }

    .strength-meter {
        height: 6px;
        background: rgba(255,255,255,0.1);
        border-radius: 5px;
        overflow: hidden;
    }

    #strengthBar {
        height: 100%;
        width: 0%;
        transition: 0.4s;
    }

    /* ================= FIX FULL PAGE DASHBOARD ================= */

html, body {
    height: 100%;
}

body {
    min-height: 100vh;
}

/* Pastikan wrapper benar-benar full */
.main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Konten isi dorong sampai bawah */
.main-content {
    flex: 1;
}

/* Hilangkan kemungkinan gap kanan */
.main-wrapper,
.main-content {
    width: 100%;
}

/* ====================================== */
    .seat{
        width:40px;
        height:40px;
        border:1px solid #ccc;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        margin:4px;
        border-radius:6px;
        background:#f2f2f2;
    }




}