/* =========================
   GENERAL
========================= */

* {
    box-sizing: border-box;
}


body {

    font-family: "Segoe UI", Arial, sans-serif;
    background: #f5f7fb;
    color: #333;
    margin: 0;
    padding: 25px;

}


h2 {

    color: #1f2937;
    margin-bottom: 20px;

}



/* =========================
   SEARCH & FILTER AREA
========================= */


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

    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background:white;
    margin-right:8px;

}


input:focus {

    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}



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


button {

    border:none;
    padding:9px 16px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    background:#2563eb;
    color:white;
    transition:.2s;

}


button:hover {

    background:#1d4ed8;
    transform:translateY(-1px);

}



td button {

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

}



a button {

    text-decoration:none;

}



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


table {

    width:100%;
    border-collapse:collapse;
    margin-top:25px;
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:
    0 4px 15px rgba(0,0,0,.08);

}



/* HEADER */

thead {

    background:#111827;
    color:white;

}


th {

    padding:14px 10px;
    text-align:left;
    font-size:14px;
    white-space:nowrap;

}



/* BODY */


td {

    padding:12px 10px;
    border-bottom:1px solid #e5e7eb;
    font-size:14px;
    vertical-align:top;

}



tbody tr {

    transition:.2s;

}


tbody tr:hover {

    background:#eff6ff;

}




/* Long text */

td:nth-child(5),
td:nth-child(6),
td:nth-child(7){

    max-width:250px;
    white-space:normal;

}




/* =========================
   STATUS STYLE (OPTIONAL)
========================= */


.status {

    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;

}


.status.new {

    background:#dbeafe;
    color:#1d4ed8;

}


.status.done {

    background:#dcfce7;
    color:#15803d;

}


.status.cancel {

    background:#fee2e2;
    color:#b91c1c;

}



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


@media(max-width:900px){


body{

    padding:15px;

}


table {

    display:block;
    overflow-x:auto;
    white-space:nowrap;

}


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

    width:100%;
    margin-bottom:10px;

}


button {

    width:100%;
    margin-bottom:10px;

}


}



/* =========================
   PRINT ALL ORDERS
========================= */


@media print {


body {

    background:white;
    padding:0;

}


h2,
input,
button,
a {

    display:none !important;

}



table {

    box-shadow:none;
    border:1px solid #000;

}



thead {

    background:#000 !important;
    color:#fff !important;

}



td,
th {

    border:1px solid #999;
    font-size:11px;

}


}


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


.receipt {


    width:360px;
    background:white;
    margin:20px auto;
    padding:25px;

    border:1px dashed #444;

    font-family:
    "Courier New",
    monospace;

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

}



.receipt h3 {

    text-align:center;
    margin-bottom:20px;

}



.receipt hr {

    border:none;
    border-top:1px dashed #777;
    margin:15px 0;

}



.receipt table {

    box-shadow:none;
    border-radius:0;

}


.receipt td {

    border:none;
    padding:5px;

}



@media print {


.receipt {

    width:80mm;
    box-shadow:none;
    border:none;

}


}