/* ===============================
   kpc DESIGN SYSTEM
   Inspired by PT Kereta Api Indonesia
=============================== */

:root{

    /* ================= BRAND ================= */
    --kpc-black:#000000;
    --kpc-red:#dc0000;
    --kpc-orange:#ff6f00;
    --kpc-green:#2e7d32;
    --kpc-purple:#4d006c;
    --kpc-yellow:#cad600;
    --kpc-melawan:#616161;
    /* ================= SEMANTIC ================= */
    --primary: var(--kpc-black);
    --secondary: var(--kpc-red);

    --success:#2e7d32;
    --danger:#c62828;
    --warning:#ff6f00;

    /* ================= UI ================= */
    --dark:#0b1f3a;
    --muted:#6b7280;
    --bg:#f4f4f4;
    --card:#f2f2f2;
    --border:#e5e7eb;

    /* ================= TOKENS ================= */
    --radius:17px;
    --shadow:0 4px 14px rgba(0,0,0,0.10);
    --transition:.2s ease;
}

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

*{
    box-sizing:border-box;
}

html{
    font-size:17px;
}

body{
    margin:0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:var(--bg);
    color:#111;
}
/* ===============================
   POS ITEM (SUPER COMPACT)
=============================== */

.pos-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    padding:6px 8px;
    margin-bottom:5px;

    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;

    transition:.15s ease;
}

.pos-item:hover{
    background:#f9fafb;
}

/* kiri */
.pos-info{
    flex:1;
    overflow:hidden;
}

/* nama */
.pos-name{
    font-size:12px;
    font-weight:600;

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

/* qty */
.pos-meta{
    font-size:11px;
    color:var(--muted);
}

/* tombol delete */
.pos-delete{
    width:22px;
    height:22px;

    border-radius:6px;
    border:none;
    background:#ffe5e5;
    color:#c62828;

    font-size:12px;
    cursor:pointer;

    flex-shrink:0;
}

.pos-delete:hover{
    background:#ffcdd2;
}
.item-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:6px;
    margin-bottom:6px;
}

.item-content{
    flex:1;
    min-width:0; /* 🔥 penting biar tidak overflow */
}

/* tombol delete */
.del-item-btn{
    flex-shrink:0;
    border:none;
    background:none;
    color:#c62828;
    cursor:pointer;
    font-size:14px;
}
/* ===============================
   LOGIN POPUP CENTER (FINAL CLEAN)
=============================== */

/* overlay */
.login-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(6px);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999;
}

/* container */
.login-container{
    width:370px;
    background:var(--card);
    padding:30px 26px;
    border-radius:var(--radius);
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
    text-align:center;
    border-top:4px solid var(--kpc-red);
    animation:popupFade .35s ease;
}

/* animasi */
@keyframes popupFade{
    from{
        opacity:0;
        transform:translateY(20px) scale(0.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* logo */
/* ===============================
   LOGIN LOGO FIX
=============================== */

.login-container img{
    width:200px;              /* 🔥 lebih besar */
    max-width:90%;            /* aman di HP */
    margin:0 auto 18px;
    display:block;

    transform:scale(1.05);    /* sedikit boost visual */
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.2));
}

/* title */
.login-container h2{
    margin:4px 0 4px;
    font-size:20px;
}

/* subtitle */
.login-container p{
    margin-bottom:14px;
    font-size:13px;
    color:var(--muted);
}

/* input group */
.input-group{
    position:relative;
    margin-top:12px;
}

.input-group input{
    width:100%;
    padding:11px;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:14px;
    outline:none;
}

.input-group label{
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:12px;
    color:#666;
    transition:.2s;
    background:#fff;
    padding:0 4px;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
    top:-6px;
    font-size:10px;
    color:var(--kpc-black);
}

/* eye icon */
.eye{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
}

/* ✅ LOGIN BUTTON FIX */
.login-container button{
    width:100%;
    margin-top:16px;
    padding:12px;
    background:linear-gradient(135deg, var(--kpc-black), var(--kpc-red));
    color:#fff;
    border:none;
    border-radius:8px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.login-container button:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(0,0,0,0.2);
}

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

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 7px;
    margin-bottom: 6px;
    background: linear-gradient(90deg, var(--kpc-black), #f5f5f5);
    color: #070d1e;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.header-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.header-left img{
    height:50px;
}

.header-right{
    font-size:13px;
    opacity:0.9;
}

.header h2{
    margin:0;
    font-size:18px;
}
/* ===============================
   TABLE (PRO CARD FIX - CLEAN)
=============================== */

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px; /* jarak antar order */
    background:var(--card);
}

/* ===============================
   HEADER WRAPPER FIX (IMPORTANT)
=============================== */

thead tr{
    background:#e1e1e1;
}

/* HEADER CELL */
th{
    position:sticky;
    top:0;
    z-index:10;

    background:#e1e1e1;
    color:#000;

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

/* ===============================
   HEADER RADIUS FIX (PROPER WAY)
=============================== */

/* kiri */
thead tr th:first-child{
    border-top-left-radius:17px;
}

/* kanan */
thead tr th:last-child{
    border-top-right-radius:17px;
}

/* ===============================
   ROW AS CARD (FIXED PRO WAY)
=============================== */

tbody tr td{
    background:#fff;
    padding:6px 8px;
    font-size:12px;
    line-height:1.2;

    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

/* kiri card */
tbody tr td:first-child{
    border-left:1px solid var(--border);
    border-top-left-radius:14px;
    border-bottom-left-radius:14px;
}

/* kanan card */
tbody tr td:last-child{
    border-right:1px solid var(--border);
    border-top-right-radius:14px;
    border-bottom-right-radius:14px;
}

/* ===============================
   HOVER EFFECT
=============================== */

tbody tr:hover td{
    background:#f9fafb;
}
/* ===============================
   PRODUCT COLUMN (PRO SCROLL)
=============================== */

/* kolom utama */
td:nth-child(6){
    width: 370px;        /* 🔥 FIX: kasih width tetap */
    min-width: 300px;    /* biar tidak shrink */
    max-width: 500px;    /* optional */
    vertical-align: top;
}

/* wrapper isi produk (WAJIB biar scroll rapi) */
td:nth-child(6){
    vertical-align: top;
}

td:nth-child(6) .item-content{
    max-height: 180px;
    overflow-y: auto;
    padding-right: 6px;
}
/* item produk */
td:nth-child(6) .product{
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 6px;
    background: #fff;
    text-align: center;
}

/* gambar biar konsisten */
td:nth-child(6) img{
    max-width: 70px;
    max-height: 70px;
    object-fit: cover;
}

/* nama produk */
td:nth-child(6) span{
    display: block;
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 3px;
}

/* qty + price */
td:nth-child(6) .price{
    font-size: 11px;
    color: #666;
}

.product{
    display:flex;
    align-items:flex-start;
    gap:10px;

    min-width:0; /* 🔥 WAJIB */
}

.product span{
    flex:1;
    min-width:0;
}
/* ===============================
   NUMBER COLUMN CENTER
=============================== */

td:nth-child(7),
td:nth-child(8){
    text-align:center;
    vertical-align:middle;
    font-weight:600;
}

/* ===============================
   REMOVE DOUBLE PADDING BUG
=============================== */

tr td{
    padding-top:6px;
    padding-bottom:6px;
}

/* ===============================
   ACTION COLUMN (PRO VERSION)
=============================== */

/* kolom */
.action-col{
    width:130px;
    min-width:120px;
    max-width:140px;
    text-align:center;
    vertical-align:top;
    padding:9px 8px;
}

/* status */
.action-col .status{
    min-width:auto;
    display:inline-block;
    padding:4px 8px;
    font-size:11px;
    margin-bottom:6px;
}

/* form */
.action-col form{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:6px;
}
.action-col select{
    width:100%;
    font-size:11px;
    padding:4px;
    margin-bottom:4px;
}

.action-col .btn{
    width:auto;
    min-width:50px;
    margin-top:2px;
}

.action-form select{
    font-size:10px;
    padding:3px;
}

.status{
    font-size:10px;
    padding:3px 6px;
}
.order-updated td{
    background:#e3f2fd !important;
    transition:0.4s ease;
}
/* ===============================
   BUTTON SYSTEM OVERRIDE (SAFE)
=============================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    padding:6px 10px;
    font-size:12px;
    font-weight:700;

    border-radius:8px;
    border:none;
    cursor:pointer;

    transition:var(--transition);
    text-decoration:none;
}

/* PRIMARY (UPDATE / ACTION UTAMA) */
.btn-primary,
.btn-update{
    background:var(--primary);
    color:#fff;
}
.btn-primary:hover{
    background:#111;
}

/* SECONDARY (PRINT / NEUTRAL ACTION) */
.btn-secondary,
.btn-print{
    background:var(--kpc-melawan);
    color:#fff;
}

/* DANGER (DELETE / CANCEL) */
.btn-danger,
.btn-kasir{
    background:var(--kpc-red);
    color:#fff;
}

/* HOVER GLOBAL */
.btn:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.btn i{
    font-size:14px;
}

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

.action-buttons{
    display:flex;
    justify-content:center;
    gap:4px;
}

/* biar rata */
.action-buttons .btn{
    flex:1;
}

/* ===============================
   SAFETY (ANTI OVERFLOW)
=============================== */

.action-col *{
    max-width:100%;
    box-sizing:border-box;
}
@media (max-width:768px){

    /* ================= WRAPPER ================= */
    .table-wrapper{
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;

        position:relative;
            scroll-snap-type:x mandatory;
    }

    /* ================= TABLE ================= */
    table{
        min-width:1000px; /* 🔥 sedikit lebih stabil untuk POS */
    }

    /* ================= TEXT ================= */
    td, th{
        white-space:nowrap;
        font-size:12px;
    }

    /* ================= SCROLL HINT ================= */
    .table-wrapper::after{
        content:"";
        position:absolute;
        right:0;
        top:0;
        width:25px;
        height:100%;
        pointer-events:none;

        background:linear-gradient(to left, rgba(0,0,0,0.08), transparent);
    }
}

td:first-child, th:first-child {
    position: sticky;
    left: 0;
    background: #e4e5e8;
    z-index: 5;
}

/* ===============================
   STATUS BADGES
=============================== */

.status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:4px 10px;
    font-size:12px;
    font-weight:700;

    border-radius:999px;
    min-width:90px;
}

.status-pending{background:var(--kpc-yellow);color:#f2f2f2;}
.status-confirmed{background:var(--kpc-orange);color:#f2f2f2;}
.status-paid{background:var(--kpc-green);color:#f2f2f2;}
.status-shipped{background:var(--kpc-purple);color:#f2f2f2;}
.status-cancelled{background:#ffebee;color:#c62828;}
.status-refunded{background:#f5f5f5;color:#37474f;}
/* ===============================
   BUTTON SYSTEM PRO (POS CLEAN)
=============================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

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

    padding:6px 10px;
    border-radius:10px;

    cursor:pointer;
    transition:all .18s ease;

    border:1px solid transparent;
    text-decoration:none;

    user-select:none;
}

/* ================= PRIMARY ================= */
.btn-update{
    background:var(--primary);
    color:#f2f2f2;
    box-shadow:0 2px 6px rgba(0,0,0,0.12);
}

.btn-update:hover{
    transform:translateY(-1px);
    background:#0b0b0b;
    box-shadow:0 6px 14px rgba(0,0,0,0.18);
}

/* ================= PRINT ================= */
.btn-print{
    background:var(--kpc-melawan);
    color:#f2f2f2;
}

.btn-print:hover{
    background:var(--kpc-black);
    transform:translateY(-1px);
}

/* ================= KASIR ================= */
.btn-kasir{
    background:var(--kpc-red);
    color:#f2f2f2;
}

.btn-kasir:hover{
    filter:brightness(0.9);
    transform:translateY(-1px);
}

/* ================= DISABLED STATE ================= */
.btn:disabled{
    opacity:0.5;
    cursor:not-allowed;
    transform:none;
}
/* ===============================
   FILTER FORM (PRO CLEAN)
=============================== */

.filter-form{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;

    margin:10px 0 14px;
    padding:8px 10px;

    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.04);

    font-size:12px; /* 🔥 kecilkan base */
}

/* label text (Filter:) */
.filter-form{
    color:#555;
    font-size:12px;
}

/* input & select */
.filter-form input,
.filter-form select{
    height:30px;              /* 🔥 compact */
    padding:4px 8px;
    font-size:12px;

    border:1px solid var(--border);
    border-radius:8px;

    outline:none;
    background:#fff;

    transition:var(--transition);
}

/* focus smooth */
.filter-form input:focus,
.filter-form select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(0,0,0,0.06);
}

/* button inside filter */
.filter-form button{
    height:30px;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;

    border-radius:8px;
}
/* ===============================
   PRODUCT POS PRO
=============================== */

.product{
    display:flex;
    align-items:center;
    gap:10px;

    min-width:0;
}

/* ================= IMAGE ================= */
.product img{
    width:52px;
    height:52px;

    object-fit:cover;
    border-radius:10px;

    flex-shrink:0;

    border:1px solid #eaeaea;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

/* ================= TEXT WRAPPER ================= */

.product span{
    font-size:12px;
    font-weight:600;
    line-height:1.3;

    min-width:0;

    display:-webkit-box;
    -webkit-box-orient:vertical;

    /* 🔥 POS OPTIMAL */
    -webkit-line-clamp:2;

    overflow:hidden;
    word-break:break-word;
}

/* ================= PRICE ================= */

.product .price{
    font-size:11px;
    color:#666;
    margin-top:2px;
}
/* ================= ITEM ROW FIX ================= */

.item-row{
    display:flex;
    justify-content:space-between;
    gap:6px;
    margin-bottom:6px;
}

/* ===============================
   NEW ORDER NOTIFICATION (PRO CLEAN)
=============================== */

/* base highlight (soft, elegan) */
.order-new-soft td{
    background:linear-gradient(90deg,#fff7e6 0%,#ffffff 100%) !important;
    border-left:4px solid #ff9800;
    transition:background 0.6s ease, border-color 0.6s ease;
}

/* pulse effect (sekali, subtle, premium feel) */
.order-new{
    animation:newOrderPulse 1.8s ease-out;
}

/* fade out otomatis (biar tidak nempel terus) */
.order-new-soft.fade-out td{
    background:#ffffff !important;
    border-left-color:transparent;
}

/* ===============================
   ANIMATION
=============================== */

@keyframes newOrderPulse{
    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(255,152,0,0.35);
    }
    40%{
        transform:scale(1.01);
        box-shadow:0 0 0 6px rgba(255,152,0,0.12);
    }
    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(255,152,0,0);
    }
}
/* ===============================
   ROW COLOR BY STATUS (FINAL PRO CLEAN)
=============================== */

tr[class^="row-status-"] td{
    transition:all .25s ease;
}

/* ================= KITCHEN ================= */

/* ⏳ Tunggu */
.row-status-u td{
    background:#fff8e1;
    border-left:4px solid #ffc107;
}

/* ✅ Confirmed */
.row-status-c td{
    background:#fff3e0;
    border-left:4px solid #ff9800;
}

/* ================= KASIR ================= */

/* 💰 Paid */
.row-status-p td{
    background:#e8f5e9;
    border-left:4px solid #2e7d32;
}

/* 🍽️ Siap Antar */
.row-status-s td{
    background:#ede7f6;
    border-left:4px solid #673ab7;
}

/* ================= FINAL ================= */

/* ❌ Cancel */
.row-status-x td{
    background:#ffebee;
    border-left:4px solid #c62828;
    opacity:.85;
}

/* ↩️ Refund */
.row-status-r td{
    background:#f5f5f5;
    border-left:4px solid #607d8b;
    opacity:.85;
}