/* assets/css/user.css */

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

body{
    background:#f4f7fb;
}

/* APP */

.mobile-app{

    width:100%;

    max-width:1600px;

    margin:auto;

    padding:25px 20px 120px;
}

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

.modern-header{

    position:relative;

    border-radius:35px;

    padding:28px;

    overflow:hidden;

    margin-bottom:30px;

    background:
    linear-gradient(
        135deg,
        #2436f5,
        #4f46e5,
        #7c3aed
    );

    box-shadow:
    0 20px 40px rgba(79,70,229,0.25);
}

.header-content{

    position:relative;

    z-index:2;

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

.profile-area{

    display:flex;
    align-items:center;

    gap:18px;
}

.profile-image{

    width:75px;
    height:75px;

    border-radius:25px;

    overflow:hidden;

    border:
    3px solid rgba(255,255,255,0.2);

    display:block;

    text-decoration:none;
}

.profile-image img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.profile-info small{

    color:rgba(255,255,255,0.8);

    font-size:13px;
}

.profile-info h2{

    color:white;

    font-size:26px;

    margin:5px 0;
}

.profile-detail{

    display:flex;
    align-items:center;

    gap:10px;
}

.profile-detail span{

    color:rgba(255,255,255,0.9);

    font-size:14px;
}

/* =========================
   SUMMARY
========================= */

.summary-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:30px;
}

.summary-card{

    border-radius:28px;

    padding:25px;

    color:white;

    min-height:140px;

    box-shadow:
    0 15px 25px rgba(0,0,0,0.08);

    transition:0.3s;
}

.summary-card:hover{

    transform:
    translateY(-4px);

}

.summary-card span{

    opacity:0.8;

    font-size:14px;
}

.summary-card h2{

    margin-top:15px;

    font-size:28px;

    line-height:1.3;
}

/* COLORS */

.purple{

    background:
    linear-gradient(135deg,#7c3aed,#4f46e5);
}

.orange{

    background:
    linear-gradient(135deg,#ff914d,#ff6b00);
}

.blue{

    background:
    linear-gradient(135deg,#0ea5e9,#2563eb);
}

.green{

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

/* =========================
   SECTION
========================= */

.section-title{

    margin-bottom:18px;
}

.section-title h3{

    font-size:24px;
}

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

.cicilan-list{

    display:flex;
    flex-direction:column;

    gap:18px;
}

.cicilan-card{

    background:white;

    border-radius:28px;

    padding:22px;

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

    transition:0.3s;
}

.cicilan-card:hover{

    transform:
    translateY(-3px);

}

/* TOP */

.card-top{

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

    gap:15px;

    margin-bottom:20px;
}

.card-top h3{

    font-size:20px;

    color:#111827;
}

/* DETAIL */

.card-detail{

    display:grid;

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

    gap:15px;

    margin-bottom:18px;
}

.card-detail small{

    color:#6b7280;

    font-size:12px;
}

.card-detail p{

    margin-top:6px;

    font-size:15px;

    font-weight:bold;

    color:#111827;
}

/* FOOTER */

.card-footer{

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

    padding-top:15px;

    border-top:
    1px solid #f1f5f9;
}

.card-footer span{

    font-size:13px;

    color:#6b7280;

    display:flex;
    align-items:center;

    gap:8px;
}

/* STATUS */

.status{

    display:inline-block !important;

    padding:6px 14px !important;

    border-radius:20px !important;

    font-size:13px !important;

    font-weight:600 !important;

    line-height:1.2 !important;

    width:auto !important;

    min-width:auto !important;

    height:auto !important;

    overflow:visible !important;

    white-space:normal !important;

    color:#111827 !important;

    text-align:center !important;

}
.status.pending{

    background:#2e02f1 !important;
    color:#ffffff !important;

}

.status.warning{

    background:#0058db !important;
    color:#ffffff !important;

}

.status.success{

    background:#dcfce7 !important;
    color:#16a34a !important;

}

.status.late{

    background:#fee2e2 !important;
    color:#dc2626 !important;

}


.status.info{

    background: #ffbb00;
    color: #a05500;

}

/* =========================
   NAVBAR
========================= */

.bottom-nav{

    position:fixed;

    bottom:0;
    left:0;

    width:100%;

    background:white;

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

    padding:
    15px 0
    calc(15px + env(safe-area-inset-bottom));

    border-top:
    1px solid #eee;

    z-index:999;
}

.nav-item{

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

    text-decoration:none;

    color:#999;

    font-size:12px;

    transition:0.3s;
}

.nav-item i{

    font-size:20px;

    margin-bottom:5px;
}

.nav-item.active{

    color:#2436f5;
}

/* =========================
   TOGGLE
========================= */

.theme-toggle{

    position:fixed;

    top:20px;
    right:20px;

    width:55px;
    height:55px;

    border-radius:20px;

    background:white;

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

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

    cursor:pointer;

    z-index:9999;

    font-size:22px;

    color:#2436f5;

    transition:0.3s;
}

/* =========================
   DARK MODE
========================= */

body.dark-mode{

    background:#0f172a;
}

body.dark-mode .mobile-app{

    background:#0f172a;
}

body.dark-mode .cicilan-card{

    background:#111827;
}

body.dark-mode .card-top h3{

    color:white;
}

body.dark-mode .card-detail p{

    color:white;
}

body.dark-mode .card-detail small{

    color:#9ca3af;
}

body.dark-mode .card-footer{

    border-color:#1f2937;
}

body.dark-mode .card-footer span{

    color:#9ca3af;
}

body.dark-mode .bottom-nav{

    background:#111827;

    border-top:
    1px solid #1f2937;
}

body.dark-mode .nav-item{

    color:#9ca3af;
}

body.dark-mode .nav-item.active{

    color:white;
}

body.dark-mode .section-title h3{

    color:white;
}

body.dark-mode .theme-toggle{

    background:#1e293b;

    color:#facc15;
}

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

@media(max-width:768px){

    .summary-grid{

        grid-template-columns:1fr;
    }

    .card-detail{

        grid-template-columns:1fr;
    }

    .card-top{

        flex-direction:column;
        align-items:flex-start;
    }

}

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

@media(min-width:1200px){

    .mobile-app{

        padding:
        35px 40px 140px;
    }

    .summary-grid{

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

    .cicilan-list{

        display:grid;

        grid-template-columns:
        repeat(auto-fit,minmax(350px,1fr));

        gap:22px;
    }

}

/* RED */

.red{

    background:
    linear-gradient(135deg,#ef4444,#dc2626);
}

/* LOGOUT */

.logout-card{

    text-decoration:none;

    display:block;
}

.logout-card h2{

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

/* LOGOUT NAV */

.logout-nav{

    color:#ef4444 !important;
}

body.dark-mode .logout-nav{

    color:#f87171 !important;
}

.theme-toggle{

    position:fixed;

    top:20px;
    right:20px;

    width:55px;
    height:55px;

    border-radius:20px;

    background:white;

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

    box-shadow:
    0 10px 20px rgba(0,0,0,0.08);

    cursor:grab;

    z-index:9999;

    font-size:22px;

    color:#2436f5;

    user-select:none;

    touch-action:none;

}

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

.table-card{

    background:white;

    border-radius:30px;

    padding:20px;

    margin-top:20px;

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

.table-responsive{
    overflow-x:auto;
}

.cicilan-table{

    width:100%;

    border-collapse:collapse;

    min-width:700px;
}

.cicilan-table thead th{

    text-align:left;

    padding:18px;

    background:#f8fafc;

    color:#6b7280;

    font-size:13px;
}

.cicilan-table tbody td{

    padding:18px;

    border-bottom:
    1px solid #f1f5f9;

    font-size:14px;
}

/* STATUS */

.status{

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:bold;
}

.pending{

    background:#fef3c7;

    color:#d97706;
}

.success{

    background:#dcfce7;

    color:#16a34a;
}

/* DARKMODE */

body.dark-mode .table-card{
    background:#111827;
}

body.dark-mode .cicilan-table thead th{

    background:#1f2937;

    color:#d1d5db;
}

body.dark-mode .cicilan-table tbody td{

    color:white;

    border-color:#1f2937;
}

/* MOBILE */

@media(max-width:768px){

    .cicilan-table{

        min-width:100%;
    }

    .cicilan-table,
    .cicilan-table thead,
    .cicilan-table tbody,
    .cicilan-table tr,
    .cicilan-table td,
    .cicilan-table th{

        display:block;
    }

    .cicilan-table thead{
        display:none;
    }

    .cicilan-table tr{

        background:#f8fafc;

        border-radius:20px;

        padding:15px;

        margin-bottom:15px;
    }

    .cicilan-table td{

        display:flex;

        justify-content:space-between;

        gap:15px;

        padding:10px 0;

        border:none;
    }

    .cicilan-table td::before{

        content:attr(data-label);

        font-weight:bold;

        color:#6b7280;
    }

    body.dark-mode .cicilan-table tr{
        background:#1f2937;
    }
}

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

.table-filter{

    display:grid;

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

    gap:15px;

    margin-bottom:20px;
}

/* BOX */

.filter-box{

    height:58px;

    background:white;

    border-radius:20px;

    display:flex;

    align-items:center;

    padding:0 18px;

    box-shadow:
    0 10px 20px rgba(0,0,0,0.05);

    transition:0.3s;
}

.filter-box:focus-within{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(79,70,229,0.12);
}

/* ICON */

.filter-box i{

    color:#4f46e5;

    font-size:18px;
}

/* INPUT */

.filter-box input,
.filter-box select{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:none;

    padding:0 14px;

    font-size:14px;
}

/* DARKMODE */

body.dark-mode .filter-box{

    background:#111827;
}

body.dark-mode .filter-box input,
body.dark-mode .filter-box select{

    color:white;
}

/* MOBILE */

@media(max-width:768px){

    .table-filter{

        grid-template-columns:1fr;
    }

}

/* =========================
   PENGAJUAN CICILAN
========================= */

.pengajuan-card{

    background:white;

    border-radius:30px;

    padding:25px;

    margin-bottom:25px;

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

/* TITLE */

.pengajuan-title{
    margin-bottom:25px;
}

.pengajuan-title h3{

    font-size:24px;
}

.pengajuan-title p{

    color:#777;

    margin-top:5px;
}

/* FORM */

.pengajuan-form{

    display:grid;

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

    gap:18px;
}

/* GROUP */

.form-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;
}

/* INPUT */

.input-modern{

    height:58px;

    background:#f8fafc;

    border-radius:18px;

    display:flex;

    align-items:center;

    padding:0 18px;

    border:2px solid transparent;

    transition:0.3s;
}

.input-modern:focus-within{

    border-color:#4f46e5;

    background:white;

    box-shadow:
    0 10px 20px rgba(79,70,229,0.08);
}

.input-modern i{

    color:#4f46e5;

    font-size:18px;
}

.input-modern input{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:none;

    padding:0 14px;

    font-size:14px;
}

/* BUTTON */

.submit-btn{

    grid-column:span 2;

    height:60px;

    border:none;

    border-radius:20px;

    background:
    linear-gradient(135deg,#2436f5,#7c3aed);

    color:white;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    box-shadow:
    0 15px 25px rgba(79,70,229,0.25);
}

.submit-btn:hover{

    transform:translateY(-3px);
}

/* DARKMODE */

body.dark-mode .pengajuan-card{

    background:#111827;
}

body.dark-mode .pengajuan-title p,
body.dark-mode .form-group label{

    color:#d1d5db;
}

body.dark-mode .input-modern{

    background:#1f2937;
}

body.dark-mode .input-modern input{

    color:white;
}

/* MOBILE */

@media(max-width:768px){

    .pengajuan-form{

        grid-template-columns:1fr;
    }

    .submit-btn{

        grid-column:span 1;
    }

}

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

.action-group{

    display:flex;

    gap:10px;

    flex-wrap:wrap;
}

.pay-btn{

    border:none;

    height:42px;

    padding:0 16px;

    border-radius:14px;

    cursor:pointer;

    color:white;

    font-size:13px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:8px;

    transition:0.3s;
}

.pay-btn:hover{

    transform:translateY(-2px);
}

/* SALDO */

.saldo-btn{

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

/* TRANSFER */

.transfer-btn{

    background:
    linear-gradient(135deg,#2563eb,#1d4ed8);
}

/* TEXT */

.paid-text{

    color:#16a34a;

    font-weight:bold;

    font-size:13px;
}

/* MOBILE */

@media(max-width:768px){

    .action-group{

        justify-content:flex-end;
    }

}

.late{

    background:#fee2e2 !important;

    color:#dc2626 !important;
}

/* PREVIEW CICILAN */

.cicilan-preview{

    margin-top:12px;

    padding:14px 18px;

    border-radius:18px;

    background:#eef2ff;

    color:#2436f5;

    font-size:14px;

    font-weight:600;
}

.cicilan-preview span{

    font-size:18px;

    font-weight:bold;
}

/* DARKMODE */

body.dark-mode .cicilan-preview{

    background:#1e293b;

    color:#c7d2fe;
}

/* REKENING */

.rekening-box{

    background:#f8fafc;

    border-radius:20px;

    padding:18px;

    font-size:14px;

    line-height:1.8;

    border:2px dashed #dbeafe;

}

/* UPLOAD */

.upload-box{

    width:100%;

    min-height:140px;

    border:2px dashed #cbd5e1;

    border-radius:24px;

    background:#f8fafc;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:12px;

    cursor:pointer;

    transition:0.3s;

    padding:20px;

}

.upload-box:hover{

    border-color:#4f46e5;

    background:#eef2ff;

}

.upload-box i{

    font-size:40px;

    color:#4f46e5;

    line-height:1;

}

.upload-box span{

    font-size:15px;

    font-weight:600;

    color:#475569;

}

.upload-box input{

    display:none;

}

/* DARKMODE */

body.dark-mode .rekening-box,
body.dark-mode .upload-box{

    background:#1f2937;

    border-color:#374151;

    color:white;
}

.lihat-bukti{

    display:inline-block;
    padding:6px 12px;
    background:#2563eb;
    color:#fff;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
    font-weight:600;

}

.lihat-bukti:hover{

    opacity:.9;

}

.pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:20px;

    flex-wrap:wrap;

}

.page-btn{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#e2e8f0;

    color:#111827;

    text-decoration:none;

    font-weight:600;

}

.page-btn.active{

    background:#4f46e5;

    color:#fff;

}

.status.warning{

    background: #fef3c7;
    color: #d97706;

}

.history-card{
    background:#fff;
    border-radius:16px;
    padding:16px;
    margin-bottom:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.history-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.history-top h4{
    font-size:15px;
    margin:0;
}

.success-badge{
    min-width:70px;
    height:36px;
    padding:0 14px;

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

    background:#dcfce7;
    color:#16a34a;

    border-radius:999px;

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

    white-space:nowrap;
}

.success-badge.topup{
    background:#dbeafe;
    color:#2563eb;
}

.success-badge.saldo{
    background:#dcfce7;
    color:#16a34a;
}

.history-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.history-bottom b{
    color:#2563eb;
}

.history-bottom small{
    color:#777;
}

/* =========================
   TOPUP PAGE FIX MOBILE
========================= */

.topup-page{

    max-width:480px !important;

    margin:auto !important;

    padding:20px 14px 120px !important;

}

.topup-page .modern-header{

    border-radius:24px !important;

    padding:22px !important;

}

.topup-page .profile-info h2{

    font-size:24px !important;

}

.topup-page .pengajuan-card{

    border-radius:24px !important;

    padding:18px !important;

}

.topup-page .pengajuan-form{

    display:flex !important;

    flex-direction:column !important;

    gap:16px !important;

}

.topup-page .form-group{

    width:100% !important;

}

.topup-page .input-modern{

    width:100% !important;

}

.topup-page .input-modern input,
.topup-page .input-modern select{

    width:100% !important;

}

.topup-page .submit-btn{

    width:100% !important;

}