*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

font-family:
Segoe UI,Arial,sans-serif;

background:#f1f5f9;

color:#111827;

}



/* SIDEBAR */

.sidebar{

position:fixed;

top:0;
left:0;

width:250px;

height:100vh;

background:#0f172a;

padding:25px 15px;

z-index:1000;

transition:.3s;

}



.sidebar-header{

font-size:25px;

color:white;

margin-bottom:35px;

padding-left:10px;

}



.sidebar a{

display:block;

padding:14px;

margin-bottom:10px;

border-radius:10px;

color:white;

text-decoration:none;

font-size:16px;

}



.sidebar a:hover{

background:#2563eb;

}





/* TOPBAR */


.topbar{

height:70px;

background:white;

margin-left:250px;

display:flex;

align-items:center;

padding:0 30px;

gap:20px;

box-shadow:
0 2px 8px rgba(0,0,0,.08);

}



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


.topbar{

height:70px;

background:white;

margin-left:250px;

display:flex;

align-items:center;

padding:0 30px;

gap:20px;

box-shadow:
0 2px 8px rgba(0,0,0,.08);

}


/* tombol mobile */

.menu-btn{

display:none;

width:45px;

height:45px;

border:none;

border-radius:10px;

background:#0f172a;

color:white;

font-size:22px;

cursor:pointer;

align-items:center;

justify-content:center;

}





/* CONTENT */


.content{

margin-left:250px;

padding:30px;

}



.card{

background:white;

padding:25px;

border-radius:15px;

box-shadow:

0 5px 15px rgba(0,0,0,.08);

margin-bottom:25px;

}





/* BUTTON */


.btn{

display:inline-block;

padding:10px 16px;

border-radius:8px;

border:none;

text-decoration:none;

cursor:pointer;

}



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


.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:8px 16px;

border-radius:10px;

font-size:14px;

font-weight:500;

border:1px solid transparent;

text-decoration:none;

cursor:pointer;

transition:.25s;

}



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

.btn-success{

background:#e2e8f0;

color:#334155;

border:1px solid #cbd5e1;

}


.btn-success:hover{

background:#cbd5e1;

}




/* ===================
EDIT
=================== */

.btn-primary{


background:#e2e8f0;

color:#334155;

border:1px solid #cbd5e1;


}


.btn-primary:hover{


background:#cbd5e1;

}




/* ===================
HAPUS
=================== */

.btn-danger{


background:#eb2525;

color:white;

border:1px solid #eb2525;


}


.btn-danger:hover{


background:#eb2525;


}


/* kecilkan tombol tabel */

table .btn{


padding:7px 12px;

font-size:13px;

margin:2px;


}


/* TABLE */


.table-responsive{

overflow-x:auto;

}



table{

width:100%;

border-collapse:collapse;

}



th{

background:#0f172a;

color:white;

padding:15px;

}


td{

padding:14px;

border-bottom:1px solid #ddd;

}




.form-control{

width:100%;

padding:12px;

border-radius:8px;

border:1px solid #ddd;

margin-bottom:15px;

}




/* OVERLAY */

.overlay{

display:none;

}





/* MOBILE */

@media(max-width:768px){



.sidebar{


left:-260px;


}



.sidebar.active{

left:0;

}



.overlay.active{


display:block;

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

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

z-index:900;


}



.topbar{

margin-left:0;

height:60px;

padding:0 15px;

}



.menu-btn{

display:block;

}



.content{

margin-left:0;

padding:15px;

}



.card{

padding:15px;

}



}


.sidebar-close{

display:flex;

position:absolute;

right:-18px;

top:50%;

transform:translateY(-50%);

width:36px;

height:60px;

border:none;

border-radius:0 15px 15px 0;

background:#0f172a;

color:white;

font-size:25px;

align-items:center;

justify-content:center;

cursor:pointer;

z-index:1100;

}





@media(max-width:768px){


.sidebar-close{


display:flex;


align-items:center;


justify-content:center;


}



}

/* DASHBOARD */


.dashboard-grid{


display:grid;

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

gap:20px;

margin-bottom:25px;

}



.dashboard-grid2{


display:grid;

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

gap:20px;

}




.stat-card{


padding:25px;

border-radius:15px;

color:white;

box-shadow:
0 5px 15px rgba(0,0,0,.1);


}



.stat-card h1{

font-size:35px;

margin-top:15px;

}



/* DASHBOARD STAT CARD */

.blue{

background:#0f172a;

}



.yellow{

background:#0f172a;

}



.orange{

background:#0f172a;

}



.green{

background:#0f172a;

}





@media(max-width:768px){


.dashboard-grid{


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


}



.dashboard-grid2{


grid-template-columns:1fr;


}


.stat-card{


padding:15px;


}



.stat-card h1{

font-size:28px;

}


}

.sidebar{

display:flex;

flex-direction:column;

}



.menu-list{

flex:1;

}



.logout-menu{

margin-top:auto;

}



.logout-menu a{

background:#dc2626;

}



.logout-menu a:hover{

background:#b91c1c;

}


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


.action-buttons{

display:flex;

gap:12px;

align-items:center;

flex-wrap:wrap;

margin-top:20px;

}



.action-buttons .btn{

height:42px;

min-width:120px;

justify-content:center;

font-size:14px;

}




@media(max-width:768px){


.action-buttons{

width:100%;

}



.action-buttons .btn{


flex:1;

min-width:0;

}


}

.action-buttons .btn{

height:42px;

min-width:135px;

display:flex;

align-items:center;

justify-content:center;

font-size:15px;

font-weight:500;

font-family:"Segoe UI", Arial, sans-serif;

letter-spacing:0;

line-height:1;

}

/* =========================
   SERVICE TABLE MODERN
========================= */


.service-table{

    width:100%;

    table-layout:fixed;

}



/* Header & isi */

.service-table th,
.service-table td{

    text-align:center;

    vertical-align:middle;

    padding:14px 10px;

}



/* Lebar kolom */


.service-table th:nth-child(1),
.service-table td:nth-child(1){

    width:60px;

}



.service-table th:nth-child(2),
.service-table td:nth-child(2){

    width:180px;

}



.service-table th:nth-child(3),
.service-table td:nth-child(3){

    width:160px;

}



.service-table th:nth-child(4),
.service-table td:nth-child(4){

    width:180px;

}



.service-table th:nth-child(5),
.service-table td:nth-child(5){

    width:130px;

}



.service-table th:nth-child(6),
.service-table td:nth-child(6){

    width:150px;

}



.service-table th:nth-child(7),
.service-table td:nth-child(7){

    width:220px;

}



/* tombol aksi */

.table-actions{

    display:flex;

    justify-content:center;

    gap:8px;

}


.table-actions .btn{

    min-width:70px;

}





/* status */

.status{

    font-weight:500;

}

/* DETAIL SERVICE */


.detail-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}



.status-detail{

background:#e2e8f0;

color:#334155;

padding:8px 18px;

border-radius:20px;

font-weight:600;

}





.detail-grid{

display:grid;

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

gap:20px;

}





.detail-box{

background:#f8fafc;

border:1px solid #e2e8f0;

border-radius:12px;

padding:20px;

margin-bottom:20px;

}



.detail-box h3{

margin-bottom:15px;

color:#0f172a;

}




.detail-row{

display:flex;

justify-content:space-between;

padding:10px 0;

border-bottom:1px solid #e5e7eb;

}



.detail-row span{

color:#64748b;

}




.detail-text{

margin-bottom:15px;

}



.detail-text p{

margin-top:8px;

color:#334155;

}




@media(max-width:768px){


.detail-grid{

grid-template-columns:1fr;

}



.detail-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}


}

.service-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}



.service-right{

display:flex;

justify-content:flex-end;

}



.add-service{

background:#2563eb;

color:white;

height:48px;

width:95px;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

font-weight:600;

text-decoration:none;

font-size:14px;

}




.service-search{

display:flex;

gap:20px;

width:100%;

align-items:center;

}   



.service-search .form-control{

flex:1;

height:48px;

margin:0;

}



.search-btn{

height:48px;

width:95px;

background:#0f172a;

color:white;

border:none;

border-radius:12px;

cursor:pointer;

font-size:14px;

}

.service-top{

margin-bottom:25px;

}

.service-search{
    display:flex;
    gap:20px;
    width:100%;
    align-items:center;
    margin-bottom:35px;
}

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


.filter-laporan{

display:flex;

align-items:flex-end;

gap:15px;

flex-wrap:wrap;

margin-top:20px;

}



.filter-laporan label{

display:block;

font-size:14px;

margin-bottom:7px;

color:#334155;

font-weight:500;

}



.filter-laporan > div{

width:240px;

}



.filter-laporan .form-control{

height:45px;

margin:0;

}



.filter-laporan .sampai{

width:auto;

padding-bottom:12px;

font-weight:600;

}





.filter-laporan .search-btn{

height:45px;

width:110px;

border-radius:10px;

}





/* ===============================
   LAPORAN DETAIL TRANSAKSI
================================ */


.report-table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

}



/* HEADER */

.report-table th{

    background:#0f172a;

    color:white;

    padding:15px 10px;

    text-align:center;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

}



/* ISI */

.report-table td{

    padding:14px 10px;

    color:#334155;

    text-align:center;

    vertical-align:middle;

    border-bottom:1px solid #e2e8f0;

    white-space:nowrap;

}





/* No */

.report-table th:nth-child(1),
.report-table td:nth-child(1){

    width:60px;

}



/* Customer */

.report-table th:nth-child(2),
.report-table td:nth-child(2){

    width:180px;

    text-align:left;

}



/* No HP */

.report-table th:nth-child(3),
.report-table td:nth-child(3){

    width:150px;

}



/* HP */

.report-table th:nth-child(4),
.report-table td:nth-child(4){

    width:180px;

}



/* Status */

.report-table th:nth-child(5),
.report-table td:nth-child(5){

    width:120px;

}



/* Total */

.report-table th:nth-child(6),
.report-table td:nth-child(6){

    width:150px;

    text-align:center;

}



/* Sisa */

.report-table th:nth-child(7),
.report-table td:nth-child(7){

    width:150px;

    text-align:center;

}




.report-table tbody tr:hover{

    background:#f8fafc;

}



/* MOBILE */

@media(max-width:768px){


.report-table{

    min-width:900px;

}


}

/* ===========================
SERVICE TABLE FINAL
=========================== */


.service-table{

width:100%;

border-collapse:collapse;

background:transparent;

}



.service-table th{

background:#0f172a;

color:white;

padding:15px;

text-align:center;

font-weight:600;

}



.service-table td{

padding:15px;

border-bottom:1px solid #e2e8f0;

text-align:center;

vertical-align:middle;

}



/* AKSI */

.service-table th:last-child,
.service-table td:last-child{

width:230px;

}



.table-actions{

display:flex;

justify-content:center;

align-items:center;

gap:8px;

}



.table-actions .btn{

height:38px;

padding:0 15px;

font-size:14px;

white-space:nowrap;

}



/* jangan ada tabel putih */

.service-table-box{

background:transparent;

}


.table-responsive{

background:transparent;

box-shadow:none;

}

/* =================================
   FIX TOMBOL SIDEBAR KHUSUS MOBILE
================================= */

/* Sembunyikan tombol di desktop */
.sidebar-close {
    display: none !important;
}

/* Tampilkan tombol hanya di HP */
@media (max-width: 768px) {

    .sidebar-close {
        display: flex !important;

        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: auto !important;

        width: 36px;
        height: 55px;

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

        background: #0f172a;
        color: white;

        border: none;
        border-radius: 0 12px 12px 0;

        font-size: 22px;
        cursor: pointer;

        transform: none !important;
        z-index: 1200;
    }

    .sidebar {
        left: -260px;
    }

    .sidebar.active {
        left: 0;
    }
}

/* ========================================
   TOMBOL SIDEBAR MODEL HANDLE KHUSUS HP
======================================== */

/* Desktop: tombol disembunyikan */
.sidebar-close {
    display: none !important;
}

@media (max-width: 768px) {

    /* Sidebar tertutup */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -250px !important;

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

        overflow: visible !important;
        z-index: 1000 !important;

        transition: left 0.3s ease !important;
    }

    /* Sidebar terbuka */
    .sidebar.active {
        left: 0 !important;
    }

    /* Pegangan di tepi sidebar */
    .sidebar-close {
        display: flex !important;

        position: absolute !important;
        top: 50% !important;
        right: -18px !important;
        left: auto !important;

        width: 36px !important;
        height: 60px !important;

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

        transform: translateY(-50%) !important;

        background: #0f172a !important;
        color: #ffffff !important;

        border: none !important;
        border-radius: 0 14px 14px 0 !important;

        font-size: 22px !important;
        font-weight: bold !important;

        cursor: pointer !important;
        z-index: 1200 !important;
    }

    /* Overlay */
    .overlay {
        display: none;

        position: fixed;
        inset: 0;

        background: rgba(0, 0, 0, 0.5);
        z-index: 900;
    }

    .overlay.active {
        display: block;
    }

    .topbar,
    .content {
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {

    .sidebar {
        overflow: visible !important;
    }

    .sidebar-close {
        width: 42px !important;
        height: 58px !important;

        padding: 0 !important;
        line-height: 1 !important;

        font-size: 24px !important;
        text-align: center !important;

        transition: right 0.3s ease !important;
    }

    /* Saat sidebar tertutup, geser tombol agar panah terlihat penuh */
    .sidebar:not(.active) .sidebar-close {
        right: -38px !important;
    }

    /* Saat sidebar terbuka, tombol menempel di tepi sidebar */
    .sidebar.active .sidebar-close {
        right: -20px !important;
    }
}

/* Hilangkan kotak putih halaman user */
.user-table-card {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Beri jarak tombol tambah dengan tabel */
.user-table-card .btn {
    margin-bottom: 20px;
}

/* Pastikan tabel tidak memiliki latar putih */
.user-table-card table,
.user-table-card tbody,
.user-table-card td {
    background: transparent;
}



.detail-description {
    max-width: 70%;
    text-align: right;
    line-height: normal;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ==========================
   HALAMAN LOGIN
========================== */

.login-page {
    min-height: 100vh;
    margin: 0;

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

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #172554 100%
        );

    font-family: "Segoe UI", Arial, sans-serif;
}

.login-container {
    width: 100%;
    max-width: 410px;
}

.login-card {
    width: 100%;

    background: #ffffff;

    padding: 38px 32px;

    border-radius: 20px;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.25);

    text-align: center;
}

.login-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 18px;

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

    border-radius: 18px;

    background: #e2e8f0;

    font-size: 34px;
}

.login-card h1 {
    margin: 0 0 8px;

    color: #0f172a;

    font-size: 28px;
}

.login-subtitle {
    margin-bottom: 28px;

    color: #64748b;

    font-size: 14px;
    line-height: 1.5;
}

.login-alert {
    margin-bottom: 20px;
    padding: 12px 14px;

    background: #fee2e2;
    color: #b91c1c;

    border: 1px solid #fecaca;
    border-radius: 10px;

    font-size: 14px;
    text-align: left;
}

.login-form-group {
    margin-bottom: 20px;
    text-align: left;
}

.login-form-group label {
    display: block;

    margin-bottom: 8px;

    color: #334155;

    font-size: 14px;
    font-weight: 600;
}

.login-input {
    width: 100%;
    height: 48px;

    padding: 0 14px;

    background: #f8fafc;
    color: #0f172a;

    border: 1px solid #cbd5e1;
    border-radius: 10px;

    outline: none;

    font-size: 15px;

    transition: 0.2s;
}

.login-input:focus {
    background: #ffffff;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}

.password-wrapper {
    position: relative;
}

.password-wrapper .login-input {
    padding-right: 52px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 8px;

    transform: translateY(-50%);

    width: 38px;
    height: 38px;

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

    background: transparent;

    border: none;
    border-radius: 8px;

    cursor: pointer;

    font-size: 17px;
}

.password-toggle:hover {
    background: #e2e8f0;
}

.login-button {
    width: 100%;
    height: 48px;

    margin-top: 4px;

    background: #2563eb;
    color: #ffffff;

    border: none;
    border-radius: 10px;

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

    cursor: pointer;

    transition: 0.2s;
}

.login-button:hover {
    background: #1d4ed8;
}

.login-button:active {
    transform: scale(0.99);
}

.login-footer {
    margin-top: 25px;
    margin-bottom: 0;

    color: #94a3b8;

    font-size: 13px;
}

/* Tampilan HP */
@media (max-width: 480px) {

    .login-page {
        padding: 15px;
    }

    .login-card {
        padding: 30px 22px;
        border-radius: 16px;
    }

    .login-card h1 {
        font-size: 25px;
    }
}

/* ==========================
   STATUS SERVICE
========================== */

.status-badge{
    display:inline-block;
    padding:7px 16px;
    border-radius:20px;
    font-size:14px;
    font-weight:600;
    text-align:center;
}

.status-menunggu{
    background:#FEF3C7;
    color:#92400E;
}

.status-sparepart{
    background:#FFEDD5;
    color:#C2410C;
}

.status-proses{
    background:#DBEAFE;
    color:#1D4ED8;
}

.status-selesai{
    background:#DCFCE7;
    color:#166534;
}

.status-diambil{
    background:#E5E7EB;
    color:#374151;
}