/* =========================================================
   mcsg QR SESSION ULTRA PREMIUM
   ICHIBAN POS STYLE
   CLEAN • MODERN • RESPONSIVE (PRODUCTION READY)
========================================================= */

:root{

    /* ================= BRAND ================= */
    --kai-blue:#001c7d;
    --kai-dark:#000;
    --kai-red:#e53935;
    --kai-orange:#ff5722;
    --kai-green:#2e7d32;
    --kai-purple:#4d006c;
    --kai-white:#fff;
    --kai-lblue:#4c869c;
    --kai-gold:#d0aa00;
    --kai-yellow:#fefff5;
    --kai-grey:#f8fafc;
    --kai-dgrey:#e8e8e8;
    --kai-border:#e5e7eb;
        --kai-white:#fff;
        --kai-fgreen:#8bc34a;
        --kai-lgreen: #d1e7dd;
    --kai-muted:#64748b;

    /* ================= UI ================= */
    --radius:22px;
    --shadow:0 8px 30px rgba(0,0,0,.06);
    --transition:.2s ease;

    
 .alert-warning
Specificity: (0,1,0)
 {
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
    --bs-alert-link-color: var(--bs-warning-text-emphasis);
}   
    
    
}

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

.mcsg-wrapper{
    width:100%;
    max-width:999px;
    margin:auto;
    padding:17px;
    box-sizing:border-box;
}

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

.mcsg-card,
.mcsg-table-wrapper{
    width:100%;
    background:var(--kai-white);
    border-radius: var(--radius);
    border:0px solid var(--kai-border);
    box-shadow:var(--shadow);
    overflow:hidden;
}

/* card accent */
.mcsg-card{
    margin-bottom:28px;
    border-top:3px solid var(--kai-red);
}

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

.mcsg-header{
    position:relative;
    padding:9px;
    text-align: center;
    border-radius:var(--radius);
    border-right: 3px solid var(--kai-red);
    border-left: 3px solid var(--kai-red);
    background:linear-gradient(135deg, var(--kai-dark), var(--kai-red));
    color:#fff;
    overflow:hidden;
}

/* glow effect */
.mcsg-header::before{
    content:"";
    position:absolute;
    top:-40px;
    right:-40px;
    width:220px;
    height:220px;
    border-radius:var(--radius);
    background:radial-gradient(rgba(255,255,255,.14), transparent 70%);
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.mcsg-title{
    font-size:17px;
    font-weight:600;
    line-height:1.2;
    margin-bottom:8px;
    letter-spacing:-1px;
}

.mcsg-subtitle{
    max-width:550px;
    font-size:12px;
    line-height:1.2;
    opacity:.92;
}

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

.mcsg-info{
    display:flex;
    flex-wrap:wrap;
    gap:120px;
    margin-top:22px;
}

.mcsg-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:33px;
    padding:0 9px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.12);
    border:0px solid rgba(255,255,255,.16);
    backdrop-filter:blur(10px);
    font-size:14px;
    font-weight:400;
    color:#fff;
    transition:var(--transition);
}

.mcsg-badge:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.18);
}

/* =========================================================
   BODY
========================================================= */
body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height)
1.5
;
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--kai-dgrey);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
.mcsg-body{
    padding:40px;
    background:var(--kai-white);
}

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

.mcsg-group{
    margin-bottom:22px;
}

.mcsg-label{
    display:block;
    margin-bottom:7px;
    font-size:17px;
    font-weight:700;
    color:#1e293b;
}

.mcsg-input{
    width:100%;
    height:40px;
    padding:0 17px;
    border:5px solid #dbe1e8;
    border-radius:var(--radius);
    font-size:15px;
    color:#111827;
    transition:var(--transition);
    box-sizing:border-box;
}

.mcsg-input::placeholder{
    color:#94a3b8;
}

.mcsg-input:focus{
    outline:none;
    border-color:var(--kai-red);
    box-shadow:0 0 0 4px rgba(255,87,34,.10);
}

.mcsg-textarea{
    min-height:66px;
    padding-top:17px;
    resize:vertical;
}

/* =========================================================
   BUTTON PRIMARY
========================================================= */

.mcsg-btn{
    width:100%;
    height:40px;
    border:none;
    border-radius:var(--radius);
    background:var(--kai-dark);
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    border-left:3px solid var(--kai-red);
    border-right:3px solid var(--kai-red);
    transition:var(--transition);
    box-shadow:0 8px 20px rgba(255,87,34,.18);
}

.mcsg-btn:hover{
    transform:translateY(-2px);
    opacity:.96;
}

.mcsg-btn:active{
    transform:scale(.99);
}

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

.mcsg-table-responsive{
    width:100%;
    overflow-x:auto;
}

.mcsg-table{
    width:100%;
    min-width:900px;
    border-radius: 17px;
    border-collapse:collapse;
}

.mcsg-table thead{
    background:linear-gradient(135deg, var(--kai-dgrey), var(--kai-dgrey));
}

.mcsg-table th{
    text-align: center;
    padding:7px;
    color:var(--kai-dark);
    font-size:17px;
    font-weight:600;
    white-space:nowrap;
}


.mcsg-table td{
    padding:18px 22px;
    border-bottom:1px solid #f1f5f9;
    font-size:14px;
    color:#1e293b;
    text-align: center;
}

.mcsg-table tbody tr:hover{
    background:#f8fafc;
}

/* =========================================================
   STATUS BADGE
========================================================= */

.mcsg-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 17px;
    border-radius: 12px;
    font-size:14px;
    font-weight:400;
}

.mcsg-status.active{
    background:var(--kai-lgreen);
   
    color:var(--kai-fgreen);}
.mcsg-status.ordered{
    background:var(--kai-fgreen);

    color:#fff;}
.mcsg-status.finished{
    background:var(--kai-dgrey);

    color:var(--kai-red);}

/* =========================================================
   ACTION BUTTONS (CENTER VERSION)
========================================================= */

.mcsg-actions{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    /* 🔥 INI YANG DITAMBAH */
    justify-content: center;   /* center horizontal */
    align-items: center;
    width: 100%;
}

/* BUTTON STYLE */
.mcsg-btn-success,
.mcsg-btn-ordered,
.mcsg-btn-danger{
    height: 33px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;

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

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

/* COLORS */
.mcsg-btn-success { 
    background:var(--kai-dgrey); 

    color:var(--kai-red); }
    
.mcsg-btn-ordered {
    background:var(--kai-dark); 

    color:var(--kai-white); }
.mcsg-btn-danger  { 
    background:var(--kai-red); 

    color:var(--kai-white); }


/* HOVER */
.mcsg-btn-success:hover,
.mcsg-btn-ordered:hover,
.mcsg-btn-danger:hover{
    transform: translateY(-1px);
    opacity: .95;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.mcsg-empty{
    padding:60px 20px;
    text-align:center;
    color:var(--kai-muted);
    font-size:15px;
}

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

@media (max-width:768px){

    .mcsg-wrapper{
        padding:12px;
    }

    .mcsg-card,
    .mcsg-table-wrapper{
        border-radius:var(--radius);
    }

    .mcsg-header{
        padding:17px;
    }

    .mcsg-title{
        font-size:17px;
    }

    .mcsg-subtitle{
        font-size:13px;
    }

    .mcsg-info{
        gap:8px;
    }

    .mcsg-badge{
        height:33px;
        padding:0 12px;
        font-size:13px;
    }

    .mcsg-body{
        padding:20px;
    }

    .mcsg-input{
        height:50px;
        font-size:14px;
    }

    .mcsg-btn{
        height:50px;
        font-size:15px;
    }

    .mcsg-table th,
    .mcsg-table td{
        text-align: center;
        padding:12px;
        font-size:13px;
    }
}

@media print {

    /* =========================
       HIDE ALL EXCEPT PRINT AREA
    ========================= */
    body * {
        visibility: hidden !important;
    }

    /* =========================
       PRINT AREA ONLY
    ========================= */
    .mcsg-qr-print,
    .mcsg-qr-print * {
        visibility: visible !important;
    }

    /* =========================
       FIX 58MM THERMAL LAYOUT
    ========================= */
    .mcsg-qr-print {
        position: fixed;
        top: 0;
        left: 0;

        width: 58mm;          /* FIX thermal paper width */
        max-width: 58mm;

        margin: 0;
        padding: 0;
        background: #fff;

        text-align: center;

        /* hilangkan transform center (biar tidak blur & double render issue) */
        transform: none !important;
    }

    /* =========================
       QR IMAGE SIZE CONTROL
    ========================= */
    .mcsg-print-image {
        width: 45mm;          /* ideal QR size untuk 58mm */
        height: 45mm;

        max-width: 45mm;

        margin: 0 auto;

        object-fit: contain;

        image-rendering: pixelated;
        display: block;
    }

    /* =========================
       OPTIONAL: REMOVE GAP ISSUE
    ========================= */
    img {
        page-break-inside: avoid;
    }
}
element.style {
    background: var(--kai-green);
    color: #fff;
    padding: 6px 10px;
    border-radius: 17px;
    text-decoration: none;
}

/* =========================================================
   SPACING FIX (LOGO / HEADER / TABLE GAP)
========================================================= */

/* jarak antara logo area & card header */
.header{
    margin-bottom: 14px;
}

/* jarak bawah card header ke form */
.mcsg-header{
    margin-bottom: 18px;
}

/* jarak antara form card dan table */
.mcsg-card{
    margin-bottom: 28px;
}

/* tambahan jarak khusus table wrapper */
.mcsg-table-wrapper{
    margin-top: 17px;
}

.mcsg-table-header{
    margin: 40;
    font-family: var(--bs-body-font-family);
    font-size: 17px;
    font-weight: 700px !important;
    border-top-radius:var(--radius);

    line-height: var(--bs-body-line-height) 1.9;
    color: var(--bs-body-color);
    text-align: center;
    background: linear-gradient(135deg, var(--kai-dgrey), var(--kai-dgrey));
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   DISABLED BUTTON
========================================================= */

.mcsg-btn-disabled{

    height:33px;
    padding:0 12px;

    border:none;
    border-radius:12px;

    background:var(--kai-dgrey);
    color:var(--kai-red)6;

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

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

    cursor:not-allowed;
    opacity:.8;
}

.alert-warning {
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--kai-orange);
    border: var(--bs-alert-border);
    border-radius: 7px;
    position: relative;
}