body {
    font-family: 'Sarabun', system-ui, -apple-system, sans-serif;
    background: #f5f6f8;
}

.card {
    border: none;
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.stat-card .num {
    font-size: 2rem;
    font-weight: 700;
}

.stat-card a { text-decoration: none; color: inherit; }

.table-sm td, .table-sm th {
    vertical-align: middle;
}

.serial {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    letter-spacing: .5px;
}

/* ---------- QR ---------- */
.qr-box svg { width: 100%; height: auto; display: block; }

/* ---------- สติกเกอร์ QR สำหรับแปะบนสินค้า ----------
   ขนาดมาจากตัวแปร --label-w / --label-h ที่หน้าเว็บกำหนดตามที่ผู้ใช้กรอก
   ทุกอย่างข้างในวัดเป็น em ที่อิงความสูงสติกเกอร์ จึงย่อ-ขยายตามไปเองทั้งชุด */
.label-sheet {
    --label-w: 48mm;
    --label-h: 30mm;
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--label-w));
    justify-content: start;
    gap: 3mm;
    background: #fff;
    padding: 5mm;
    margin: 0 auto;
    max-width: 200mm;
}

.label {
    width: var(--label-w);
    height: var(--label-h);
    font-size: calc(var(--label-h) / 13);
    border: 1px dashed #999;
    box-sizing: border-box;
    padding: 0.5em;
    display: flex;
    gap: 0.5em;
    align-items: center;
    color: #000;
    overflow: hidden;
}

/* QR เป็นสี่เหลี่ยมจัตุรัสเสมอ — จำกัดด้วยความสูงสติกเกอร์ แต่ห้ามกินเกินครึ่งความกว้าง */
.label .qr {
    width: min(calc(var(--label-h) - 2.4mm), 48%);
    flex: 0 0 auto;
}
.label .qr svg { width: 100%; height: auto; display: block; }

.label .info { line-height: 1.3; min-width: 0; flex: 1; overflow: hidden; }
.label .info .brand-logo { height: 1.5em; width: auto; display: block; margin-bottom: 0.25em; }
/* serial ต้องอยู่บรรทัดเดียว — ถ้าตัดบรรทัดคนอ่านจะพิมพ์รหัสผิด */
.label .info .sn {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 1.08em;
    white-space: nowrap;
}
.label .info .model {
    color: #333;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- ใบรับประกัน (พิมพ์) ---------- */
.cert {
    background: #fff;
    color: #000;
    font-family: 'Sarabun', sans-serif;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 12mm;
    box-sizing: border-box;
}

.cert table { width: 100%; border-collapse: collapse; }

.cert .bordered td, .cert .bordered th {
    border: 1px solid #000;
    padding: 5px 7px;
    vertical-align: top;
}

.cert .bordered th {
    background: #f0f0f0;
    text-align: left;
    white-space: nowrap;
    width: 34mm;
    font-weight: 600;
}

.cert .head-title {
    text-align: center;
    font-weight: 700;
    font-size: 1.35rem;
    margin: 6px 0 2px;
}

.cert .shop-name { font-weight: 700; font-size: 1.15rem; }
/* โลโก้บนหัวใบ — กำหนดความสูงเป็น มม. ให้ขนาดตอนพิมพ์คงที่ไม่ขึ้นกับ DPI จอ */
.cert .cert-logo { height: 13mm; width: auto; display: block; margin-bottom: 3px; }
.cert .terms { font-size: 11px; line-height: 1.55; }
.cert .terms ol { padding-left: 18px; margin-bottom: 0; }
.cert .photo-grid { display: flex; gap: 4mm; }
.cert .photo-grid figure { flex: 1; margin: 0; text-align: center; }
.cert .photo-grid img {
    width: 100%;
    height: 42mm;
    object-fit: cover;
    border: 1px solid #999;
}
.cert .photo-grid figcaption { font-size: 10px; margin-top: 2px; }

.sign-box { text-align: center; padding-top: 26px; }
.sign-line { border-top: 1px dotted #000; margin: 0 16px; padding-top: 4px; }

.login-logo { width: 150px; max-width: 70%; height: auto; }

/* แถบเมนูพื้นดำ — ทำโลโก้เป็นขาวล้วน (invert เฉย ๆ จะเปลี่ยนแถบแดงเป็นฟ้า) */
.nav-logo {
    height: 20px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* จอแคบ พื้นที่แถบเมนูไม่พอ — เหลือชื่อร้านอย่างเดียว */
@media (max-width: 991px) {
    .nav-logo { display: none; }
}

@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    main.container { margin: 0 !important; padding: 0 !important; max-width: none; }
    .cert { box-shadow: none; margin: 0; padding: 10mm; }
    .label-sheet { padding: 0; gap: 2mm; }
    .label { border-color: #ccc; page-break-inside: avoid; }
    @page { size: A4; margin: 6mm; }
}

/* ---------- Mobile / Responsive ---------- */
/* ให้ใบรับประกันเลื่อนดูแนวนอนได้บนจอเล็ก แต่ยังคงขนาด A4 จริงตอนพิมพ์ */
.print-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

@media (max-width: 576px) {
    main.container { padding-left: 12px; padding-right: 12px; }

    .stat-card .num { font-size: 1.6rem; }

    .page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
    .page-actions .btn { flex: 1 1 auto; }

    .btn { padding-top: .5rem; padding-bottom: .5rem; }
    .form-control, .form-select { font-size: 16px; } /* กัน iOS ซูมอัตโนมัติ */
}

@media screen and (max-width: 800px) {
    .print-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
}