/*body{font-family:Segoe UI,Arial;background:#f5f6fa;color:#222}
.container{max-width:900px;margin:20px auto}
.card{background:#fff;padding:16px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.06);margin-bottom:12px}
.header-card{display:flex;justify-content:space-between}
.header-card label{display:block;margin-bottom:6px}
.items-card table{width:100%;border-collapse:collapse}
.items-card th, .items-card td{border-bottom:1px solid #eee;padding:8px;text-align:left}
.total{font-weight:700;font-size:1.2em;text-align:right}
.actions-card{display:flex;align-items:center;gap:12px}
.qr{margin-left:16px}
input,select{padding:6px;border-radius:4px;border:1px solid #ccc}
button{padding:8px 12px;border-radius:6px;border:none;background:#2f7dff;color:#fff}*/

body {
    font-family: 'Segoe UI', Arial;
    background: #eef2f7;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1000px;
    margin: auto;
    background: #eef2f7;
}

h1 {
    margin-bottom: 20px;
    font-size: 26px;
    color: #2f7dff;
    letter-spacing: 0.5px;
}

.card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    margin-bottom: 18px;
}

/* Header Grid Layout */
.header-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

    .header-card label {
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
    }

input, select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Item Table */
.items-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.items-card th {
    background: #f3f6fb;
    padding: 12px;
    border-bottom: 2px solid #e2e6eb;
    text-align: left;
    font-weight: 700;
}

.items-card td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.items-card input {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #bbb;
    font-size: 15px;
}

#addRow {
    margin-top: 12px;
    padding: 12px 16px;
    background: #2f7dff;
    border-radius: 8px;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
}

    #addRow:hover {
        background: #1869f2;
    }

/* Totals */
.totals-card {
    font-size: 18px;
    text-align: right;
    line-height: 2.2em;
}

.total {
    font-size: 22px;
    font-weight: bold;
    color: #2f7dff;
}

/* Save Button */
.actions-card {
    text-align: right;
}

#saveBtn {
    background: #1fbe7c;
    padding: 14px 22px;
    border-radius: 10px;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: 0.2s;
}

    #saveBtn:hover {
        background: #16a56b;
    }

#btnPrintImage {
    background: #E7DEAF;
    padding: 14px 22px;
    border-radius: 10px;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: 0.2s;
}

    #btnPrintImage:hover {
        background: #D7C097;
    }


/* Remove button inside table */
button.remove {
    background: #ff6767;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
}

button.remove:hover {
    background: #ff4747;
}

/* QR area */
.qr img {
    margin-top: 10px;
    width: 160px;
}

.qr {
    text-align: center;
}

.img-header {
    text-align: center;
}

input,
select,
textarea {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

input[type="date"] {
    height: 44px;
    line-height: 44px;
}