/* =================================
   Base / Reset
================================= */
* { box-sizing: border-box; }
:root{
  --bg:#fff;
  --text:#111827;
  --muted:#6b7280;
  --primary:#111827;
  --accent:#2563eb;
  --danger:#dc2626;
  --success:#16a34a;
  --border:#e5e7eb;
  --card:#fff;
  --shadow:0 10px 25px rgba(17,24,39,.06);

  /* Fluid type scale */
  --fs-base: clamp(14px, 1.6vw, 16px);
  --fs-sm: clamp(.86rem, 1.1vw, .92rem);
  --fs-h3: clamp(1.05rem, 2vw, 1.2rem);
  --fs-h2: clamp(1.2rem, 2.6vw, 1.5rem);
  --fs-h1: clamp(1.4rem, 3.2vw, 1.9rem);
}
html, body { height: 100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0; background: var(--bg); color: var(--text);
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}

/* Utilities */
.wrap{ max-width:1100px; margin:22px auto; padding:0 18px; }
.grid-span-2{ grid-column:1 / -1; }
.help{ color:var(--muted); font-size:12px; }

/* =================================
   Topbar
================================= */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:var(--primary); color:#fff;
  gap:10px; flex-wrap:wrap;
}
.topbar a{ color:#e5e7eb; text-decoration:none; margin-right:12px; }
.topbar a:last-child{ margin-right:0; }
.topbar a:hover{ color:#fff; text-decoration:underline; }

/* =================================
   Layout & Cards
================================= */
.container{ max-width:1100px; margin:22px auto; padding:0 18px; }
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow); padding:18px; margin-bottom:18px;
}
h1,h2,h3{ margin:.2em 0 .6em; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }

/* =================================
   Actions / Toolbars
================================= */
.actions{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0;
}

/* =================================
   Tables
================================= */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap table{ min-width:820px; }

table,
.table{
  width:100%; border-collapse:collapse; background:#fff;
  border-radius:12px; overflow:hidden;
}
th, td{
  padding:11px; border-bottom:1px solid var(--border); text-align:left;
  white-space:nowrap;
}
th{ background:#f8fafc; font-weight:700; }
.table-sm th, .table-sm td { padding:8px; }
td:last-child, .actions-cell{ white-space:normal; }
.table tr:hover, table tr:hover { background:#f9fafc; }
.total-row{ font-weight:bold; background:#f3f4f6; }

/* Contextual table display limits (first N rows only) */
.table-limit-10 thead + tbody tr:nth-child(n+11),
.table-limit-10 tbody tr:nth-child(n+12) { display:none; }
.table-limit-20 thead + tbody tr:nth-child(n+21),
.table-limit-20 tbody tr:nth-child(n+22) { display:none; }
.table-limit-50 thead + tbody tr:nth-child(n+51),
.table-limit-50 tbody tr:nth-child(n+52) { display:none; }
.table-limit-100 thead + tbody tr:nth-child(n+101),
.table-limit-100 tbody tr:nth-child(n+102) { display:none; }

/* =================================
   Buttons
================================= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  cursor:pointer; transition:.2s; text-decoration:none; font-size:14px;
}
.btn:hover{ transform: translateY(-1px); }
.btn:focus{ outline:2px solid #93c5fd; outline-offset:2px; }

/* Variants (keep your existing aliases + add new) */
.btn.primary, .btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.danger,  .btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn.ghost,   .btn-ghost  { background:#fff; color:var(--text); border-color:var(--border); }
.btn.link,    .btn-link   { background:transparent; border-color:transparent; color:var(--accent); padding:0; }
.btn-secondary{ background:#334155; color:#fff; border-color:#334155; }

/* =================================
   Forms
================================= */
input, select, textarea{
  padding:9px; border:1px solid var(--border); border-radius:10px; width:100%; background:#fff;
  font: inherit; color: inherit;
}
textarea{ resize: vertical; }
.searchbar{ display:flex; gap:10px; flex-wrap:wrap; }

.inline{ display:inline-flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.actions-cell{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }

/* =================================
   Grids
================================= */
.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }

/* =================================
   Notices & Flash
================================= */
.notice{
  padding:10px; border-left:4px solid var(--success); background:#ecfdf5; border-radius:10px;
  display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap;
}
.error{
  padding:10px; border-left:4px solid var(--danger); background:#fee2e2; border-radius:10px;
}
.flash{ padding:.6rem; border-radius:.6rem; }
.bg-success{ background:#16a34a; color:#fff; }
.bg-error{ background:#ef4444; color:#fff; }
.small{ font-size:var(--fs-sm); color:var(--muted); }

/* Bold big total (fluid) */
.notice .total-amt{
  font-weight:800; font-size:clamp(1.25rem, 5vw, 2.25rem); line-height:1; margin-left:.5rem;
}

/* =================================
   Receipt
================================= */
.receipt{
  max-width:380px; margin:0 auto; background:#fff; border:1px dashed #cbd5e1;
  padding:16px; border-radius:12px;
}
.receipt .title{ font-weight:800; text-align:center; margin-bottom:6px; }
.receipt .meta{ font-size:.9em; color:#4b5563; text-align:center; margin-bottom:10px; }
.receipt th, .receipt td{ border-bottom:1px dashed #e5e7eb; }
.receipt .total{ font-size:1.2em; font-weight:800; }
.receipt .center{ text-align:center; }
.receipt .barcode{ display:flex; justify-content:center; margin-top:8px; }

/* =================================
   Footer
================================= */
footer.footer{ padding:18px; color:var(--muted); text-align:center; }

/* =================================
   Print
================================= */
@media print{
  .topbar, .btn, nav, header{ display:none !important; }
  .container, .wrap{ max-width:100%; padding:0; }
  .card{ box-shadow:none; border:0; margin:0; padding:0; }
  .receipt{ border:0; }

  /* Show all rows when printing */
  .table-limit-10 thead + tbody tr,
  .table-limit-20 thead + tbody tr,
  .table-limit-50 thead + tbody tr,
  .table-limit-100 thead + tbody tr,
  .table-limit-10 tbody tr,
  .table-limit-20 tbody tr,
  .table-limit-50 tbody tr,
  .table-limit-100 tbody tr{
    display: table-row !important;
  }
}

/* =================================
   Responsive
================================= */
/* <= 1024px */
@media (max-width:1024px){
  .container{ max-width:920px; }
  th, td{ padding:10px; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}

/* <= 900px */
@media (max-width:900px){
  .table-wrap table{ min-width:700px; }
}

/* <= 768px */
@media (max-width:768px){
  .container{ max-width:680px; padding:0 14px; }
  .card{ padding:16px; }

  table, .table{ display:block; overflow-x:auto; white-space:nowrap; border-radius:12px; }
  thead, tbody, tr{ width:100%; }
  th, td{ padding:10px; }

  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .btn{ width:auto; }
  .searchbar{ gap:8px; }
  .receipt{ max-width:100%; }
}

/* <= 680px */
@media (max-width:680px){
  .inline{ gap:.35rem; }
  .actions-cell{ gap:.35rem; }
  .table-wrap table{ min-width:640px; }
}

/* <= 480px */
@media (max-width:480px){
  .topbar{ padding:10px 14px; }
  .topbar a{ margin-right:8px; }
  .container{ margin:16px auto; padding:0 12px; }
  .card{ padding:14px; border-radius:14px; }
  th, td{ padding:9px; }
  .btn{ width:100%; }
  .notice{ gap:.25rem; }
  .notice .total-amt{ margin-left:.25rem; }
}

/* =================================
   Motion Preference
================================= */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
  .btn:hover{ transform:none; }
}