/* =====================================================
   ORDER SYSTEM CSS
   Desktop + Tablet + Mobile Responsive
===================================================== */


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

* {
    box-sizing: border-box;
}


body {

    margin:0;
    padding:25px;

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

    background:#f3f4f6;
    color:#1f2937;

}


/* =====================
   TITLE
===================== */

h2 {

    margin-bottom:20px;
    color:#111827;

}



/* =====================
   FILTER AREA
===================== */


input[type="text"],
input[type="date"] {

    height:40px;

    padding:0 12px;

    border:1px solid #d1d5db;

    border-radius:8px;

    background:white;

    font-size:14px;

    margin:5px;

}


input:focus {

    outline:none;

    border-color:#2563eb;

    box-shadow:
    0 0 0 3px rgba(37,99,235,.15);

}



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


button {

    background:#2563eb;

    color:white;

    border:none;

    padding:9px 15px;

    border-radius:8px;

    cursor:pointer;

    font-size:14px;

    margin:3px;

    transition:.2s;

}


button:hover {

    background:#1d4ed8;

}



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


.table-container {

    width:100%;

    overflow-x:auto;

}



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


table {

    width:100%;

    border-collapse:collapse;

    background:white;

    margin-top:20px;

    border-radius:12px;

    overflow:hidden;

    box-shadow:
    0 4px 15px rgba(0,0,0,.08);

}



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


thead {

    background:#111827;

    color:white;

}


th {

    padding:12px;

    font-size:13px;

    text-align:left;

    white-space:nowrap;

}



/* =====================
   BODY
===================== */


td {

    padding:10px 12px;

    border-bottom:
    1px solid #e5e7eb;

    font-size:13px;

    vertical-align:top;

}


/* Hover */

tbody tr:hover {

    background:#eff6ff;

}



/* =====================
   COMPACT COLUMNS
===================== */


/* Default small */

th,
td {

    width:1%;

}



/* No transaksi */

th:nth-child(2),
td:nth-child(2){

    min-width:120px;

}



/* Nama */

th:nth-child(3),
td:nth-child(3){

    min-width:130px;

}



/* Telefon */

th:nth-child(4),
td:nth-child(4){

    min-width:110px;

}



/* Pesanan panjang */

th:nth-child(5),
td:nth-child(5),

th:nth-child(6),
td:nth-child(6),

th:nth-child(7),
td:nth-child(7){

    width:auto;

    min-width:80px;

    max-width:280px;

    white-space:normal;

    word-break:break-word;

}



/* Tarikh */

th:nth-child(8),
td:nth-child(8){

    min-width:130px;

    white-space:nowrap;

}



/* Promo */

th:nth-child(9),
td:nth-child(9){

    min-width:80px;

}



/* Action */

th:last-child,
td:last-child{

    min-width:120px;

    white-space:nowrap;

}



/* =====================
   EMPTY DATA
===================== */


td:empty::before {

    content:"-";

    color:#9ca3af;

}



/* =====================
   RECEIPT
===================== */


.receipt {

    width:360px;

    max-width:100%;

    margin:20px auto;

    background:white;

    padding:25px;

    border:
    1px dashed #555;

    font-family:
    "Courier New",
    monospace;

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

}



.receipt h3 {

    text-align:center;

}



.receipt hr {

    border:none;

    border-top:
    1px dashed #999;

    margin:15px 0;

}



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


@media(max-width:768px){


body {

    padding:15px;

}



/* filter */

input[type="text"],
input[type="date"] {

    width:100%;

    margin-bottom:8px;

}



button {

    width:100%;

}



/* Convert table to card */


table,
thead,
tbody,
th,
td,
tr {

    display:block;

}



thead {

    display:none;

}



table {

    background:none;

    box-shadow:none;

}



tbody tr {

    background:white;

    margin-bottom:15px;

    border-radius:12px;

    padding:10px;

    box-shadow:
    0 3px 10px rgba(0,0,0,.08);

}



tbody td {


    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    width:100%;

    max-width:none;

    border:none;

    border-bottom:
    1px solid #eee;

    padding:10px 5px;

    white-space:normal;

}



tbody td:last-child {

    border:none;

}



tbody td::before {


    content:
    attr(data-label);


    font-weight:600;

    color:#374151;

    width:40%;


}



}


/* =====================
   PRINT
===================== */


@media print {


body {

    background:white;

    padding:0;

}



button,
input,
a {

    display:none!important;

}



table {

    box-shadow:none;

}



thead {

    display:table-header-group;

}



th {

    background:black!important;

    color:white!important;

}



td,
th {

    font-size:11px;

    border:1px solid #999;

}


}