:root{
  --bg:#0f172a;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --danger:#dc2626;
  --danger-bg:#fee2e2;
  --warning:#d97706;
  --warning-bg:#fef3c7;
  --success:#16a34a;
  --success-bg:#dcfce7;
  --missing:#64748b;
  --missing-bg:#e2e8f0;
  --info:#0284c7;
  --shadow:0 20px 60px rgba(15, 23, 42, .16);
  --radius:22px;
  font-family:"Inter", "Noto Sans Thai", "Sarabun", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.32), transparent 35%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 42%, #eef2ff 42%, #f8fafc 100%);
  color:var(--text);
  min-height:100vh;
}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{width:min(1480px, calc(100% - 32px)); margin:0 auto; padding:28px 0 44px}
.hero{
  display:grid;
  grid-template-columns:1fr minmax(300px, 400px);
  gap:24px;
  align-items:stretch;
  color:#fff;
  padding:28px;
  border-radius:32px;
  background:linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,64,175,.82));
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero::after{
  content:"";
  position:absolute; inset:auto -90px -120px auto;
  width:320px; height:320px; border-radius:50%;
  background:rgba(255,255,255,.1);
}
.hero h1{font-size:clamp(2rem, 5vw, 4rem); line-height:1.05; margin:.35rem 0 .75rem; letter-spacing:-.05em}
.hero p{font-size:1.05rem; color:#dbeafe; max-width:760px; margin:0}
.eyebrow{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:#93c5fd; font-weight:800}
.hero__panel{z-index:1;display:grid;gap:14px;align-content:center}
.today-card,.threshold-control,.language-card{
  display:block;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  padding:18px;
  backdrop-filter:blur(10px);
}
.today-card span,.threshold-control span,.language-card span{display:block;color:#bfdbfe;font-size:.92rem;margin-bottom:8px}
.today-card strong{font-size:1.35rem}
.threshold-control div{display:flex;align-items:center;gap:8px}
.threshold-control input{width:100px;border:0;border-radius:14px;padding:12px 14px;color:#0f172a;font-weight:800;background:#fff}
.language-switcher{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lang-btn{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);color:#fff;border-radius:14px;padding:10px 12px;font-weight:900}
.lang-btn.active{background:#fff;color:#1d4ed8;border-color:#fff}
main{display:grid;gap:22px;margin-top:22px}
.kpi-grid{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:16px}
.kpi-card{background:rgba(255,255,255,.95);border:1px solid rgba(226,232,240,.9);border-radius:var(--radius);padding:20px;box-shadow:0 12px 32px rgba(15,23,42,.08)}
.kpi-card span{display:block;color:var(--muted);font-weight:800}
.kpi-card strong{display:block;font-size:2.2rem;line-height:1;margin:12px 0;color:#0f172a}
.kpi-card small{color:var(--muted)}
.kpi-card.danger strong{color:var(--danger)}
.kpi-card.warning strong{color:var(--warning)}
.kpi-card.success strong{color:var(--success)}
.kpi-card.info strong{color:var(--info)}
.panel{background:rgba(255,255,255,.96);border:1px solid rgba(226,232,240,.96);border-radius:var(--radius);padding:20px;box-shadow:0 14px 34px rgba(15,23,42,.08)}
.panel__header,.table-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.panel h2,.table-toolbar h2{margin:0;font-size:1.25rem}
.panel p,.table-toolbar p{margin:.35rem 0 0;color:var(--muted)}
.button-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn{border:1px solid var(--line);background:#fff;color:#0f172a;padding:10px 14px;border-radius:14px;font-weight:900;transition:.18s transform, .18s box-shadow, .18s background}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.1)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-dark)}
.btn.subtle{background:#f8fafc;color:#475569}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger:hover{background:#b91c1c}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px}
label span{display:block;font-size:.85rem;color:var(--muted);font-weight:800;margin-bottom:7px}
input,select{width:100%;border:1px solid var(--line);border-radius:14px;padding:11px 12px;background:#fff;color:#0f172a;outline:none}
input:focus,select:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.1)}
.dashboard-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:16px;align-items:stretch}
.graph-card{min-height:300px;display:flex;flex-direction:column;gap:18px}
.graph-heading h2{font-size:1.12rem;margin:0}
.graph-heading p{font-size:.92rem}
.donut-layout{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:center;margin:auto 0}
.donut{width:168px;height:168px;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.donut::after{content:"";position:absolute;width:106px;height:106px;background:#fff;border-radius:50%;box-shadow:0 8px 24px rgba(15,23,42,.12)}
.donut span,.donut small{position:relative;z-index:1;display:block;text-align:center}
.donut span{font-size:2rem;font-weight:950;line-height:1;color:#0f172a}
.donut small{margin-top:34px;position:absolute;color:var(--muted);font-weight:800}
.chart-legend{display:grid;gap:10px}
.legend-row{display:grid;grid-template-columns:12px 1fr auto;gap:8px 10px;align-items:center;font-size:.92rem}
.legend-row small{grid-column:2 / 4;color:var(--muted);font-weight:700;margin-top:-4px}
.legend-dot{width:12px;height:12px;border-radius:999px;display:inline-block}
.bar-chart,.slot-chart{display:grid;gap:14px;margin-top:auto}
.bar-row{display:grid;gap:8px}
.bar-row__label,.slot-row__top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.92rem}
.bar-row__label strong,.slot-row__top span{color:#334155;font-size:.86rem}
.bar-track,.stacked-track{height:15px;background:#e2e8f0;border-radius:999px;overflow:hidden;display:flex}
.bar-track span{display:block;height:100%;border-radius:999px;min-width:4px}
.stacked-track span{display:block;height:100%}
.slot-row{display:grid;gap:7px}
.slot-row small{color:var(--muted);font-weight:700}
.content-grid{display:grid;grid-template-columns:330px 1fr;gap:22px;align-items:start}
.category-summary{display:grid;gap:12px;margin-top:18px;max-height:800px;overflow:auto;padding-right:2px}
.category-item{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#f8fafc}
.category-item__top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:900}
.category-item__top small{color:var(--muted);font-weight:800}
.meter{height:9px;background:#e2e8f0;border-radius:99px;overflow:hidden}
.meter span{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#ef4444);border-radius:99px}
.table-panel{min-width:0}
.bulk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-4px 0 14px;padding:12px 14px;border:1px dashed #cbd5e1;border-radius:18px;background:#f8fafc}
.bulk-toolbar strong{display:block;font-size:.95rem}
.bulk-toolbar small{display:block;color:var(--muted);margin-top:3px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}
table{border-collapse:collapse;width:100%;min-width:1080px;background:#fff}
thead th{position:sticky;top:0;z-index:1;background:#f8fafc;color:#334155;text-align:left;font-size:.85rem;letter-spacing:.02em;padding:13px 14px;border-bottom:1px solid var(--line)}
tbody td{padding:14px;border-bottom:1px solid #eef2f7;vertical-align:top}
tbody tr:hover{background:#f8fafc}
.product-row{border-left:4px solid transparent}
.product-row:has(.lot-card.expired){border-left-color:var(--danger)}
.product-row:has(.lot-card.near):not(:has(.lot-card.expired)){border-left-color:var(--warning)}
.select-col{width:44px;text-align:center}
.select-col input{width:auto;transform:scale(1.1);accent-color:var(--primary)}
.product-name{font-weight:850;max-width:360px}
.product-name strong{display:block;line-height:1.35}
.product-name small{display:block;color:var(--muted);font-weight:700;margin-top:6px}
.lot-list{display:grid;grid-template-columns:repeat(3, minmax(190px, 1fr));gap:10px;min-width:0}
.lot-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:12px;box-shadow:0 6px 18px rgba(15,23,42,.04)}
.lot-card.expired{background:linear-gradient(180deg,#fff,#fff7f7);border-color:#fecaca}
.lot-card.near{background:linear-gradient(180deg,#fff,#fffbeb);border-color:#fde68a}
.lot-card.ok{background:linear-gradient(180deg,#fff,#f0fdf4);border-color:#bbf7d0}
.lot-card.missing{background:#f8fafc}
.lot-card__title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.lot-card__title strong{font-size:.92rem}
.lot-card__grid{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:.86rem}
.lot-card__grid span{color:var(--muted);font-weight:800}
.lot-card__grid b{text-align:right;font-weight:900;color:#0f172a}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-weight:900;font-size:.78rem;white-space:nowrap}
.badge.expired{color:var(--danger);background:var(--danger-bg)}
.badge.near{color:var(--warning);background:var(--warning-bg)}
.badge.ok{color:var(--success);background:var(--success-bg)}
.badge.missing{color:var(--missing);background:var(--missing-bg)}
.days.negative{color:var(--danger)!important;font-weight:950}
.days.warning{color:var(--warning)!important;font-weight:950}
.days.ok{color:var(--success)!important;font-weight:950}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.icon-btn,.mini-btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:7px 10px;font-weight:900}
.icon-btn{font-size:1.4rem;line-height:1;padding:6px 12px}
.mini-btn:hover,.icon-btn:hover{background:#f1f5f9}
.mini-btn.danger-text{color:var(--danger)}
.empty-state{padding:36px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:18px;margin-top:14px}
.empty-inline{padding:16px;text-align:center;color:var(--muted);background:#f8fafc;border:1px dashed var(--line);border-radius:16px;font-weight:800}
dialog{border:0;padding:0;border-radius:26px;box-shadow:var(--shadow);width:min(980px, calc(100% - 28px))}
dialog::backdrop{background:rgba(15,23,42,.62);backdrop-filter:blur(4px)}
.dialog-card{padding:22px;display:grid;gap:16px}
.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.dialog-header h2{margin:.2rem 0 0}
.lot-form-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}
.lot-fieldset{border:1px solid var(--line);border-radius:20px;padding:14px;display:grid;gap:12px;background:#f8fafc;margin:0}
.lot-fieldset legend{padding:0 8px;font-weight:950;color:#1d4ed8}
.date-selects{display:grid;grid-template-columns:.72fr 1.15fr .9fr;gap:8px}
.date-selects select{padding:10px 9px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.toast{position:fixed;right:20px;bottom:20px;background:#0f172a;color:#fff;padding:12px 16px;border-radius:16px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);transition:.2s;pointer-events:none;font-weight:900;z-index:20}
.toast.show{opacity:1;transform:translateY(0)}
@media (max-width: 1180px){
  .kpi-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:1fr}
  .donut-layout{grid-template-columns:170px 1fr}
  .content-grid{grid-template-columns:1fr}
  .side-panel{order:2}
}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr 1fr}
  .lot-form-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .app-shell{width:min(100% - 18px, 1480px);padding-top:10px}
  .hero{padding:20px;border-radius:24px}
  .kpi-grid,.filters{grid-template-columns:1fr}
  .panel__header,.table-toolbar,.bulk-toolbar{flex-direction:column}
  .button-row{justify-content:flex-start}
  .donut-layout{grid-template-columns:1fr;justify-items:center}
  .chart-legend{width:100%}
  .date-selects{grid-template-columns:1fr 1fr 1fr}
  .lot-list{grid-template-columns:1fr}
}

/* Mobile-friendly product cards and PDF preview */
.preview-dialog{width:min(1120px, calc(100% - 18px));max-height:92vh;overflow:hidden}
.preview-dialog-card{display:grid;grid-template-rows:auto auto 1fr;gap:14px;padding:18px;background:#f8fafc;max-height:92vh}
.preview-dialog-card .dialog-header{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px}
.preview-dialog-card .dialog-header p{margin:.35rem 0 0;color:var(--muted)}
.preview-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.preview-content{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:auto;padding:18px;box-shadow:0 12px 28px rgba(15,23,42,.08)}
.print-report{display:none}
.report-header{background:#0f172a;color:#fff;border-radius:18px;padding:14px 16px;margin-bottom:14px}
.report-header h1{margin:2px 0 4px;font-size:1.45rem;line-height:1.15;letter-spacing:-.02em}
.report-header p{margin:0;color:#cbd5e1;font-size:.88rem}
.report-header__top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:10px}
.report-meta{text-align:right;font-size:.78rem;color:#cbd5e1;white-space:nowrap}
.report-kpis{display:grid;grid-template-columns:repeat(5, minmax(0,1fr));gap:8px}
.report-kpi{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:8px 10px}
.report-kpi span{display:block;font-size:.68rem;color:#bfdbfe;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-kpi strong{display:block;font-size:1.12rem;margin-top:2px}
.report-body{display:grid;gap:14px}
.report-section{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff;break-inside:avoid}
.report-section h2{font-size:1.05rem;margin:0 0 10px}
.report-dashboard{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px}
.report-chart-card{border:1px solid var(--line);background:#f8fafc;border-radius:16px;padding:12px;display:grid;gap:8px}
.report-chart-card h3{margin:0;font-size:.95rem}
.report-stat-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:.86rem}
.report-mini-track{height:9px;background:#e2e8f0;border-radius:999px;overflow:hidden;grid-column:1 / -1}
.report-mini-track span{display:block;height:100%;border-radius:999px;min-width:3px}
.report-product{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff;break-inside:avoid;page-break-inside:avoid}
.report-product + .report-product{margin-top:10px}
.report-product__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:8px}
.report-product__head strong{font-size:.96rem;line-height:1.25;overflow-wrap:anywhere}
.report-product__head small{color:var(--muted);font-weight:900;white-space:nowrap}
.report-lots{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:8px}
.report-lot{border:1px solid var(--line);border-radius:12px;padding:8px;background:#f8fafc}
.report-lot.expired{border-color:#fecaca;background:#fff7f7}
.report-lot.near{border-color:#fde68a;background:#fffbeb}
.report-lot.ok{border-color:#bbf7d0;background:#f0fdf4}
.report-lot.missing{background:#f8fafc}
.report-lot__top{display:flex;justify-content:space-between;gap:6px;margin-bottom:6px;align-items:center}
.report-lot__top strong{font-size:.85rem}
.report-lot__grid{display:grid;grid-template-columns:1fr;gap:4px;font-size:.78rem}
.report-lot__grid div{display:flex;justify-content:space-between;gap:8px}
.report-lot__grid span{color:var(--muted);font-weight:800}
.report-lot__grid b{text-align:right}
.report-empty{padding:20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px;background:#f8fafc;font-weight:900}
.no-print{ }

@media (max-width: 720px){
  html, body{max-width:100%;overflow-x:hidden}
  body{background:#f8fafc}
  .app-shell{width:100%;padding:8px 10px 24px;overflow-x:hidden}
  .hero{border-radius:22px;margin:0;overflow:hidden}
  .hero h1{font-size:1.85rem;letter-spacing:-.03em}
  .hero p{font-size:.95rem}
  .panel{padding:14px;border-radius:20px}
  .kpi-grid{gap:10px}
  .kpi-card{padding:14px;border-radius:18px}
  .kpi-card strong{font-size:1.7rem;margin:8px 0}
  .dashboard-grid{gap:10px}
  .graph-card{min-height:auto}
  .table-wrap{overflow:visible;border:0;border-radius:0;background:transparent}
  table, thead, tbody, tr, td{display:block;width:100%;min-width:0!important}
  table{background:transparent;border-collapse:separate;border-spacing:0}
  thead{display:none}
  tbody{display:grid;gap:12px}
  tbody td{border-bottom:0;padding:8px 12px;vertical-align:top}
  tbody tr:hover{background:#fff}
  .product-row{position:relative;border:1px solid var(--line);border-left:5px solid #cbd5e1;border-radius:20px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.08);overflow:hidden}
  .product-row:has(.lot-card.expired){border-left-color:var(--danger)}
  .product-row:has(.lot-card.near):not(:has(.lot-card.expired)){border-left-color:var(--warning)}
  .select-col{position:absolute;top:12px;right:12px;width:auto!important;z-index:2;padding:0!important;text-align:right}
  .select-col input{transform:scale(1.2)}
  .product-name{max-width:none;padding:14px 48px 4px 12px!important}
  .product-name strong{font-size:1rem;line-height:1.32;overflow-wrap:anywhere;word-break:break-word}
  .product-name small{font-size:.82rem;margin-top:5px}
  tbody td:nth-child(3){padding-top:0!important;color:var(--muted);font-weight:900;font-size:.82rem}
  tbody td:nth-child(3)::before{content:""}
  tbody td:nth-child(4){padding-top:4px!important}
  .lot-list{display:grid;grid-template-columns:1fr!important;gap:8px;min-width:0;width:100%}
  .lot-card{padding:10px;border-radius:14px;box-shadow:none}
  .lot-card__title{margin-bottom:7px}
  .lot-card__title strong{font-size:.9rem}
  .badge{font-size:.72rem;padding:4px 8px}
  .lot-card__grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:8px;font-size:.8rem}
  .lot-metric{display:block;min-width:0}
  .lot-metric span{display:block;color:var(--muted);font-size:.72rem;font-weight:900;margin-bottom:2px}
  .lot-metric b{display:block;text-align:left!important;font-size:.83rem;line-height:1.22;overflow-wrap:anywhere}
  tbody td:nth-child(5){padding-top:0!important;padding-bottom:12px!important}
  .row-actions{justify-content:flex-start}
  .row-actions .mini-btn{flex:1;min-width:120px}
  .preview-dialog{width:100%;max-height:100dvh;border-radius:0}
  .preview-dialog-card{max-height:100dvh;border-radius:0;padding:10px}
  .preview-actions{justify-content:stretch}
  .preview-actions .btn{flex:1}
  .preview-content{padding:10px;border-radius:16px}
  .report-header__top{display:block}
  .report-meta{text-align:left;margin-top:6px;white-space:normal}
  .report-kpis{grid-template-columns:repeat(2, minmax(0,1fr))}
  .report-dashboard,.report-lots{grid-template-columns:1fr}
}

@media print{
  @page{size:A4 portrait;margin:18mm 10mm 12mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{background:#fff!important;color:#0f172a!important;min-height:0}
  body.print-mode .app-shell, body.print-mode dialog, body.print-mode .toast{display:none!important}
  body.print-mode #printReport{display:block!important}
  #printReport{font-family:"Noto Sans Thai", "Sarabun", Arial, sans-serif;font-size:10.5pt}
  #printReportHeader{position:fixed;top:0;left:0;right:0;z-index:1000;border-radius:0;margin:0;padding:8mm 10mm;background:#0f172a;color:#fff}
  #printReportBody{padding-top:42mm;display:block}
  .report-header h1{font-size:16pt;margin:0 0 2mm}
  .report-header p{font-size:8.5pt}
  .report-header__top{margin-bottom:3mm}
  .report-kpis{grid-template-columns:repeat(5, 1fr);gap:2mm}
  .report-kpi{padding:2mm;border-radius:2mm}
  .report-kpi span{font-size:7pt}.report-kpi strong{font-size:12pt}
  .report-section{box-shadow:none;border-radius:3mm;padding:4mm;margin-bottom:4mm;break-inside:avoid;page-break-inside:avoid}
  .report-dashboard{grid-template-columns:repeat(3,1fr);gap:3mm}
  .report-chart-card{border-radius:3mm;padding:3mm;break-inside:avoid}
  .report-product{border-radius:3mm;padding:3mm;margin-bottom:3mm;break-inside:avoid;page-break-inside:avoid}
  .report-lots{grid-template-columns:repeat(3,1fr);gap:2mm}
  .report-lot{border-radius:2mm;padding:2mm;break-inside:avoid}
  .badge{font-size:7.5pt;padding:1mm 2mm}
  .no-print{display:none!important}
}
.lot-metric{display:contents}
@media (max-width: 720px){.lot-metric{display:block}}

/* Compact preview report table v5 */
.report-dashboard-strip{border:1px solid var(--line);border-radius:18px;padding:12px;background:#fff;break-inside:avoid;page-break-inside:avoid}
.report-strip-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.report-strip-title h2{font-size:1.05rem;margin:0;color:#0f172a}
.report-strip-title p{margin:0;color:var(--muted);font-weight:800;font-size:.82rem;text-align:right}
.report-strip-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.report-chart-card.compact{padding:10px;border-radius:14px;gap:6px;background:#f8fafc}
.report-chart-card.compact h3{font-size:.9rem;margin:0 0 2px;color:#0f172a}
.report-chart-card.compact .report-stat-row{font-size:.76rem;gap:5px}
.report-chart-card.compact .report-mini-track{height:6px}
.report-table-section{border:1px solid var(--line);border-radius:18px;background:#fff;padding:12px;overflow:hidden}
.report-table-section h2{font-size:1.05rem;margin:0 0 10px;color:#0f172a}
.report-table-wrap{overflow:auto;border:1px solid #cbd5e1;border-radius:12px;background:#fff}
.report-table{width:100%;min-width:1040px!important;border-collapse:collapse;background:#fff;font-size:.76rem;line-height:1.25}
.report-table th,.report-table td{border:1px solid #cbd5e1;padding:6px 7px;vertical-align:top;background:#fff}
.report-table th{background:#eef2f7;color:#111827;font-weight:950;text-align:left;white-space:nowrap}
.report-table tbody tr:nth-child(even) td{background:#fafafa}
.report-table tbody tr:hover td{background:#f8fafc}
.report-no{width:34px;text-align:center!important;white-space:nowrap}
.report-name{width:24%}
.report-name strong{display:block;font-size:.86rem;line-height:1.25;overflow-wrap:anywhere;color:#111827}
.report-category{width:9%;font-weight:800;color:#475569;overflow-wrap:anywhere}
.report-total{width:72px;text-align:right;font-weight:950;white-space:nowrap}
.report-risk{width:90px;text-align:center}
.report-batch-cell{display:grid;gap:3px;border-left:4px solid #cbd5e1;padding-left:6px;min-width:0}
.report-batch-cell strong{font-size:.82rem;color:#111827;white-space:nowrap}
.report-batch-cell span{font-size:.72rem;color:#475569;white-space:nowrap}
.report-batch-cell.expired{border-left-color:var(--danger)}
.report-batch-cell.near{border-left-color:var(--warning)}
.report-batch-cell.ok{border-left-color:var(--success)}
.report-batch-cell.missing{border-left-color:var(--missing);color:#64748b}
.report-batch-cell.missing strong{color:#64748b}

@media (max-width: 720px){
  .report-strip-title{display:block}
  .report-strip-title p{text-align:left;margin-top:4px}
  .report-strip-cards{grid-template-columns:1fr}
  .report-table{min-width:920px!important;font-size:.72rem}
  .report-table th,.report-table td{padding:5px}
}

@media print{
  @page{size:A4 landscape;margin:12mm 8mm 10mm}
  #printReport{font-size:8.5pt;line-height:1.22}
  #printReportHeader{padding:6mm 8mm}
  #printReportBody{padding-top:34mm}
  .report-header{border-radius:0!important;margin:0!important}
  .report-header h1{font-size:13pt!important;margin:0 0 1mm!important}
  .report-header p{font-size:7.2pt!important}
  .report-meta{font-size:7pt!important}
  .report-kpis{grid-template-columns:repeat(5,1fr)!important;gap:1.5mm!important}
  .report-kpi{padding:1.5mm 2mm!important;border-radius:1.5mm!important}
  .report-kpi span{font-size:6.2pt!important}.report-kpi strong{font-size:10pt!important}
  .report-dashboard-strip{padding:2.4mm!important;border-radius:2mm!important;margin-bottom:2.5mm!important;break-inside:avoid;page-break-inside:avoid}
  .report-strip-title{margin-bottom:1.5mm!important}
  .report-strip-title h2{font-size:8.5pt!important}
  .report-strip-title p{font-size:6.8pt!important}
  .report-strip-cards{grid-template-columns:repeat(3,1fr)!important;gap:2mm!important}
  .report-chart-card.compact{padding:2mm!important;border-radius:2mm!important;gap:1mm!important}
  .report-chart-card.compact h3{font-size:7.3pt!important}
  .report-chart-card.compact .report-stat-row{font-size:6.2pt!important;gap:1mm!important}
  .report-chart-card.compact .report-mini-track{height:1.4mm!important}
  .report-table-section{padding:0!important;border:0!important;border-radius:0!important;overflow:visible!important}
  .report-table-section h2{font-size:9pt!important;margin:0 0 1.5mm!important}
  .report-table-wrap{overflow:visible!important;border:0!important;border-radius:0!important}
  .report-table{min-width:0!important;width:100%!important;font-size:6.6pt!important;line-height:1.18!important;table-layout:fixed!important;border-collapse:collapse!important}
  .report-table thead{display:table-header-group!important}
  .report-table tbody{display:table-row-group!important}
  .report-table tr{display:table-row!important;break-inside:avoid;page-break-inside:avoid}
  .report-table th,.report-table td{display:table-cell!important;border:0.4pt solid #b8c0cc!important;padding:1.2mm!important;vertical-align:top!important}
  .report-table th{background:#e5e7eb!important;font-size:6.5pt!important}
  .report-no{width:5mm!important}
  .report-name{width:36mm!important}
  .report-category{width:18mm!important}
  .report-total{width:16mm!important}
  .report-risk{width:18mm!important}
  .report-name strong{font-size:6.8pt!important;line-height:1.15!important}
  .report-batch-cell{gap:.6mm!important;padding-left:1.2mm!important;border-left-width:1.2mm!important}
  .report-batch-cell strong{font-size:6.4pt!important;white-space:normal!important}
  .report-batch-cell span{font-size:5.9pt!important;white-space:normal!important}
  .badge{font-size:5.8pt!important;padding:.6mm 1mm!important;white-space:normal!important}
}
@media (max-width: 720px){
  .report-table, .report-table thead, .report-table tbody, .report-table tr, .report-table th, .report-table td{display:revert;width:auto!important}
  .report-table{display:table;width:100%!important;border-collapse:collapse!important}
  .report-table thead{display:table-header-group!important}
  .report-table tbody{display:table-row-group!important}
  .report-table tr{display:table-row!important}
  .report-table th,.report-table td{display:table-cell!important}
}

/* v7 preview/PDF: phone-friendly one-row table and repeating dashboard header */
#previewReportHeader:empty,
#printReportHeader:empty{display:none!important}
.report-table-section.v7{border:1px solid var(--line);border-radius:16px;background:#fff;padding:10px;overflow:hidden}
.report-table-wrap.v7{overflow:visible;border:1px solid #cbd5e1;border-radius:10px;background:#fff}
.report-table.v7{width:100%!important;min-width:0!important;table-layout:fixed!important;border-collapse:collapse;background:#fff;font-size:.68rem;line-height:1.18}
.report-table.v7 th,.report-table.v7 td{border:1px solid #cbd5e1;padding:5px 5px;vertical-align:top;background:#fff;word-break:break-word;overflow-wrap:anywhere}
.report-table.v7 .report-repeat-head th{padding:0!important;border:0!important;background:#fff!important}
.report-table.v7 .report-column-head th{background:#0f172a;color:#fff;font-weight:950;text-align:center;white-space:normal}
.report-table.v7 .report-column-head th small{display:block;font-size:.6em;color:#bfdbfe;font-weight:800;margin-top:1px}
.report-table.v7 tbody tr:nth-child(even) td{background:#f8fafc}
.report-table.v7 .col-no{width:30px}
.report-table.v7 .col-category{width:12%}
.report-table.v7 .col-product{width:25%}
.report-table.v7 .col-date{width:12%}
.report-table.v7 .col-qty{width:5.5%}
.report-table.v7 .col-status{width:8%}
.report-table.v7 .report-no{text-align:center!important;white-space:nowrap;font-weight:900;color:#475569}
.report-table.v7 .report-category{font-weight:900;color:#334155;text-transform:uppercase}
.report-table.v7 .report-name strong{display:block;color:#111827;font-size:.76rem;line-height:1.18;overflow-wrap:anywhere}
.report-date-cell{border-left:3px solid #cbd5e1!important}
.report-date-cell strong{display:block;color:#111827;font-size:.72rem;line-height:1.15}
.report-date-cell small{display:block;color:#64748b;font-size:.58rem;line-height:1.2;margin-top:2px}
.report-date-cell.expired{border-left-color:var(--danger)!important;background:#fff7f7!important}
.report-date-cell.near{border-left-color:var(--warning)!important;background:#fffbeb!important}
.report-date-cell.ok{border-left-color:var(--success)!important;background:#f0fdf4!important}
.report-date-cell.missing{border-left-color:var(--missing)!important;color:#64748b}
.report-qty-cell{text-align:center!important;font-weight:950;white-space:nowrap}
.report-qty-cell strong{font-size:.78rem;color:#111827}
.report-risk{text-align:center!important;vertical-align:middle!important}
.report-repeat-header{background:#0f172a;color:#fff;padding:10px 12px;display:grid;gap:8px}
.report-repeat-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:7px}
.report-repeat-top h1{margin:0;font-size:1.05rem;line-height:1.1;color:#fff;letter-spacing:-.015em}
.report-repeat-top p{margin:2px 0 0;color:#cbd5e1;font-size:.68rem}
.report-repeat-meta{text-align:right;color:#dbeafe;font-size:.65rem;font-weight:800;white-space:nowrap;line-height:1.35}
.report-repeat-dashboard{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 1.8fr 1.35fr;gap:6px;align-items:stretch}
.report-tiny-kpi{border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.09);padding:5px 6px;min-width:0}
.report-tiny-kpi span{display:block;color:#bfdbfe;font-size:.55rem;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-tiny-kpi strong{display:block;color:#fff;font-size:.9rem;line-height:1.05;margin-top:1px}
.report-tiny-kpi.danger strong{color:#fecaca}.report-tiny-kpi.warning strong{color:#fed7aa}.report-tiny-kpi.success strong{color:#bbf7d0}
.report-tiny-summary{border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.09);padding:5px 6px;min-width:0}
.report-tiny-summary>strong{display:block;font-size:.58rem;color:#bfdbfe;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-tiny-summary div{display:grid;gap:2px}
.report-tiny-summary span{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:4px;align-items:center;font-size:.52rem;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-tiny-summary span i{display:inline-block;width:6px;height:6px;border-radius:999px;margin-right:3px;vertical-align:middle}
.report-tiny-summary span em{display:block;height:4px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.report-tiny-summary span u{display:block;height:100%;border-radius:999px;text-decoration:none}

@media (max-width: 720px){
  .preview-dialog{width:100%;max-width:100%;max-height:100dvh;border-radius:0}
  .preview-dialog-card{padding:6px;max-height:100dvh;border-radius:0}
  .preview-content{padding:4px;border-radius:10px;overflow-x:hidden}
  .report-table-section.v7{padding:3px;border-radius:8px;overflow:hidden}
  .report-table-wrap.v7{border-radius:6px;overflow:hidden}
  .report-table.v7{font-size:6.4px!important;line-height:1.05!important;width:100%!important;min-width:0!important;table-layout:fixed!important}
  .report-table.v7 th,.report-table.v7 td{padding:2px!important;border-width:.5px!important}
  .report-table.v7 .col-no{width:14px!important}
  .report-table.v7 .col-category{width:10%!important}
  .report-table.v7 .col-product{width:24%!important}
  .report-table.v7 .col-date{width:12.5%!important}
  .report-table.v7 .col-qty{width:5%!important}
  .report-table.v7 .col-status{width:7.5%!important}
  .report-table.v7 .report-name strong{font-size:6.7px!important;line-height:1.05!important}
  .report-date-cell{border-left-width:1.5px!important}
  .report-date-cell strong{font-size:6.5px!important;line-height:1.05!important}
  .report-date-cell small{font-size:5.2px!important;line-height:1.05!important;margin-top:1px!important}
  .report-qty-cell strong{font-size:6.5px!important}
  .badge{font-size:5.2px!important;padding:1px 2px!important;border-radius:999px!important;white-space:normal!important}
  .report-repeat-header{padding:5px!important;gap:4px!important}
  .report-repeat-top{display:block;padding-bottom:4px!important}
  .report-repeat-top h1{font-size:10px!important;line-height:1.05!important}
  .report-repeat-top p{font-size:6px!important;line-height:1.1!important}
  .report-repeat-meta{text-align:left!important;margin-top:2px;font-size:5.8px!important;white-space:normal!important;line-height:1.15!important}
  .report-repeat-dashboard{grid-template-columns:repeat(5,1fr)!important;gap:2px!important}
  .report-tiny-kpi{padding:2px!important;border-radius:4px!important}
  .report-tiny-kpi span{font-size:4.8px!important}
  .report-tiny-kpi strong{font-size:7.2px!important}
  .report-tiny-summary{grid-column:span 5;padding:2px!important;border-radius:4px!important}
  .report-tiny-summary>strong{font-size:5.5px!important;margin-bottom:1px!important}
  .report-tiny-summary div{grid-template-columns:repeat(4,1fr);gap:1px!important}
  .report-tiny-summary span{font-size:4.9px!important;grid-template-columns:minmax(0,1fr) 18px!important;gap:1px!important}
  .report-tiny-summary span em{height:2px!important}
}

@media print{
  @page{size:A4 landscape;margin:7mm 6mm 7mm}
  body.print-mode #printReportHeader{display:none!important}
  body.print-mode #printReportBody{padding-top:0!important;display:block!important}
  #printReport{font-family:"Noto Sans Thai", "Sarabun", Arial, sans-serif;font-size:7pt!important;line-height:1.12!important;color:#0f172a!important}
  .report-body{display:block!important;gap:0!important}
  .report-table-section.v7{padding:0!important;border:0!important;border-radius:0!important;overflow:visible!important;background:#fff!important}
  .report-table-wrap.v7{overflow:visible!important;border:0!important;border-radius:0!important}
  .report-table.v7{width:100%!important;min-width:0!important;table-layout:fixed!important;border-collapse:collapse!important;font-size:6.2pt!important;line-height:1.08!important;page-break-inside:auto!important}
  .report-table.v7 thead{display:table-header-group!important}
  .report-table.v7 tbody{display:table-row-group!important}
  .report-table.v7 tr{display:table-row!important;break-inside:avoid!important;page-break-inside:avoid!important}
  .report-table.v7 th,.report-table.v7 td{display:table-cell!important;border:.35pt solid #aab4c2!important;padding:.9mm!important;vertical-align:top!important;background:#fff!important}
  .report-table.v7 .report-repeat-head th{padding:0 0 1.2mm 0!important;border:0!important;background:#fff!important}
  .report-repeat-header{padding:3mm!important;gap:1.7mm!important;border-radius:0!important;background:#0f172a!important;color:#fff!important}
  .report-repeat-top{padding-bottom:1.4mm!important;gap:3mm!important}
  .report-repeat-top h1{font-size:10pt!important;margin:0!important;line-height:1.05!important}
  .report-repeat-top p{font-size:6.2pt!important;margin:.5mm 0 0!important;line-height:1.15!important}
  .report-repeat-meta{font-size:5.8pt!important;line-height:1.25!important;color:#dbeafe!important}
  .report-repeat-dashboard{grid-template-columns:repeat(5,1fr) 1.8fr 1.35fr!important;gap:1.4mm!important}
  .report-tiny-kpi{padding:1.2mm!important;border-radius:1.3mm!important}
  .report-tiny-kpi span{font-size:5pt!important}.report-tiny-kpi strong{font-size:9pt!important}
  .report-tiny-summary{padding:1.2mm!important;border-radius:1.3mm!important}
  .report-tiny-summary>strong{font-size:5.2pt!important;margin-bottom:.6mm!important}
  .report-tiny-summary span{font-size:4.6pt!important;grid-template-columns:minmax(0,1fr) 12mm!important;gap:.8mm!important}
  .report-tiny-summary span em{height:.9mm!important}
  .report-table.v7 .report-column-head th{background:#e5e7eb!important;color:#111827!important;font-size:5.7pt!important;font-weight:950!important;text-align:center!important;white-space:normal!important}
  .report-table.v7 .report-column-head th small{font-size:4.7pt!important;color:#475569!important}
  .report-table.v7 .col-no{width:5mm!important}
  .report-table.v7 .col-category{width:23mm!important}
  .report-table.v7 .col-product{width:63mm!important}
  .report-table.v7 .col-date{width:25mm!important}
  .report-table.v7 .col-qty{width:10mm!important}
  .report-table.v7 .col-status{width:18mm!important}
  .report-table.v7 .report-category{font-size:5.7pt!important;line-height:1.05!important}
  .report-table.v7 .report-name strong{font-size:6.1pt!important;line-height:1.08!important}
  .report-date-cell{border-left-width:1mm!important}
  .report-date-cell strong{font-size:5.8pt!important;line-height:1.05!important;white-space:normal!important}
  .report-date-cell small{font-size:4.9pt!important;line-height:1.05!important;white-space:normal!important}
  .report-qty-cell strong{font-size:6pt!important}
  .badge{font-size:4.8pt!important;padding:.4mm .8mm!important;white-space:normal!important}
}