/* Daruur — extras on top of Tailwind */

:root { --brand: #2563eb; }

html { -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "cv02","cv03","cv04","cv11"; }

/* Slim scrollbars */
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 99px; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.6); }

/* Touch targets stay comfortable on phones */
@media (max-width: 640px) {
  .btn, button, [role="button"], a.tap { min-height: 44px; }
  /* A cart line is a dense list: a 44px minimum would make every row twice as
     tall and hide the items the cashier is trying to check. These controls
     set their own size and stay well spaced instead. */
  .cart-line button { min-height: 0; }
}

/* Reusable component classes (plain CSS — the CDN build has no @apply) */
.card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.12);
}
.dark .card { background: #172033; border-color: rgba(255,255,255,.10); }

/* The element selector is deliberate: Tailwind's forms plugin resets
   [type="date"] and friends, and a bare .input would lose to it. */
input.input, select.select, textarea.input, .input, .select {
  width: 100%;
  min-height: 44px;
  padding: .5rem .875rem;
  border: 1px solid rgb(226 232 240);
  border-radius: .75rem;
  background: #fff;
  font-size: 1rem;              /* 16px stops iOS zooming on focus */
  line-height: 1.4;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
@media (min-width: 640px) {
  input.input, select.select, textarea.input, .input, .select { font-size: .875rem; }
}

.dark input.input, .dark select.select, .dark textarea.input, .dark .input, .dark .select {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: #e2e8f0;
}
input.input:focus, select.select:focus, textarea.input:focus, .input:focus, .select:focus {
  outline: 0; border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.2);
}

/* Native date / time pickers keep the app's look. */
input.input[type="date"],
input.input[type="time"],
input.input[type="datetime-local"],
input.input[type="month"] {
  border-radius: .75rem;
  border-color: rgb(226 232 240);
  -webkit-appearance: none;
  appearance: none;
}
.dark input.input[type="date"],
.dark input.input[type="time"] { border-color: rgba(255,255,255,.10); }

input.input::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .5; padding: 2px; border-radius: 4px;
}
input.input::-webkit-calendar-picker-indicator:hover { opacity: 1; background: rgb(241 245 249); }
.dark input.input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; }

/* The readable date that app.js writes under each picker. */
.date-hint {
  display: block; margin-top: .3rem;
  font-size: 11px; font-weight: 600; color: rgb(100 116 139);
}
.label { display:block; font-size:.75rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:rgb(100 116 139); margin-bottom:.4rem; }

/* Table: turn into stacked cards on small screens (never when printing) */
@media screen and (max-width: 767px) {
  /* The whole table becomes a block so no column can stretch it wider
     than the screen — that used to squeeze the cards into a corner. */
  table.responsive,
  table.responsive tbody,
  table.responsive tfoot { display: block; width: 100%; }

  table.responsive thead { display: none; }

  table.responsive tbody tr,
  table.responsive tfoot tr {
    display: block; padding: 14px; border-radius: 16px; margin-bottom: 10px;
    border: 1px solid rgb(226 232 240); background: #fff;
  }
  .dark table.responsive tbody tr,
  .dark table.responsive tfoot tr { background: #172033; border-color: rgba(255,255,255,.08); }

  /* The totals row reads as a summary card. */
  table.responsive tfoot tr {
    background: rgb(248 250 252); border-color: rgb(203 213 225);
    margin-bottom: 0;
  }
  .dark table.responsive tfoot tr { background: rgba(255,255,255,.04); }

  table.responsive tbody td,
  table.responsive tfoot td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 6px 0; border: 0; text-align: right; width: 100%;
  }
  table.responsive tbody td::before,
  table.responsive tfoot td::before {
    content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: rgb(100 116 139); text-align: left; flex: none;
  }
  table.responsive tbody td[data-label=""]::before,
  table.responsive tfoot td[data-label=""]::before { content: none; }

  /* The first cell is the card's title row, so it drops the label prefix. */
  table.responsive tbody td:first-child {
    justify-content: flex-start; text-align: left;
    padding: 0 0 10px; margin-bottom: 8px; font-weight: 600;
    border-bottom: 1px solid rgb(241 245 249);
  }
  .dark table.responsive tbody td:first-child { border-color: rgba(255,255,255,.07); }
  table.responsive tbody td:first-child::before { content: none; }

  /* A trailing actions cell becomes the card footer. */
  table.responsive tbody td:last-child[data-label=""] {
    justify-content: flex-end;
    padding: 10px 0 0; margin-top: 8px;
    border-top: 1px solid rgb(241 245 249);
  }
  .dark table.responsive tbody td:last-child[data-label=""] { border-color: rgba(255,255,255,.07); }

  /* Columns marked hide-mobile drop out of the card entirely. */
  table.responsive thead th.hide-mobile,
  table.responsive tbody td.hide-mobile,
  table.responsive tfoot td.hide-mobile { display: none; }

  /* Cells that carry no label and no content just add blank space. */
  table.responsive tbody td:empty,
  table.responsive tfoot td:empty { display: none; }

  /* Row actions sit in the last cell — keep them tappable (44px minimum).
     On a narrow card the buttons wrap under the label instead of stretching
     the table wider than the screen. */
  table.responsive tbody td:last-child { flex-wrap: wrap; }
  table.responsive tbody td:last-child > div {
    gap: 2px; flex-wrap: wrap; justify-content: flex-end; min-width: 0;
  }
  table.responsive tbody td:last-child a,
  table.responsive tbody td:last-child button,
  table.responsive tbody td:last-child form > button {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ---------------- Modal / popup ---------------- */
.modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal[hidden] { display: none; }
@media (min-width: 640px) { .modal { align-items: center; padding: 1rem; } }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}

.modal-panel {
  position: relative; width: 100%; max-width: 32rem;
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: inherit;
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .35);
  opacity: 0; transform: translateY(28px);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), opacity .22s ease;
}
.dark .modal-panel { background: #172033; }
.modal-panel.is-wide { max-width: 44rem; }
@media (min-width: 640px) {
  .modal-panel { border-radius: 1rem; transform: translateY(14px) scale(.97); }
}

.modal.is-open .modal-backdrop { opacity: 1; }
.modal.is-open .modal-panel { opacity: 1; transform: none; }

/* The form owns the column so only the body scrolls */
.modal-panel > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

.modal-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.15rem 1.5rem; background: inherit;
  border-bottom: 1px solid rgb(241 245 249);
}
.dark .modal-head { border-color: rgba(255, 255, 255, .07); }
.modal-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.25rem 1.5rem;
}
.modal-foot {
  flex: 0 0 auto;
  display: flex; gap: .5rem; justify-content: flex-end;
  padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
  background: inherit; border-top: 1px solid rgb(241 245 249);
}
.dark .modal-foot { border-color: rgba(255, 255, 255, .07); }

/* Drag handle shown on phones */
.modal-grip { display: block; width: 40px; height: 4px; border-radius: 99px;
  background: rgb(203 213 225); margin: .6rem auto -.3rem; }
@media (min-width: 640px) { .modal-grip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-panel { transition: none; }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, rgba(148,163,184,.12) 25%, rgba(148,163,184,.25) 37%, rgba(148,163,184,.12) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 10px;
}
@keyframes shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* Toast entrance */
.toast-in { animation: toastIn .25s cubic-bezier(.16,1,.3,1); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.97) } to { opacity: 1; transform: none } }

/* Greeting banner: gentle entrance, no snap. The blobs breathe slowly so the
   panel never feels static, but stay subtle enough to not distract. */
.banner-greet {
  animation: bannerIn .5s cubic-bezier(.16,1,.3,1);
}
@keyframes bannerIn { from { opacity: 0; transform: translateY(8px) scale(.99) } to { opacity: 1; transform: none } }
.banner-greet > div:first-child { animation: float 9s ease-in-out infinite; }
.banner-greet > div:nth-child(2) { animation: float 11s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-14px, 10px) } }
@media (prefers-reduced-motion: reduce) {
  .banner-greet, .banner-greet > div:first-child, .banner-greet > div:nth-child(2) { animation: none; }
}

/* Accordion */
.acc-body { transition: max-height .25s ease; }

/* ---------------- Print ---------------- */
@media print {
  body { background: #fff !important; }
  .no-print, aside, header, footer, nav, #toasts { display: none !important; }
  .print-area { box-shadow: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; }
  main { padding: 0 !important; }
  .lg\:pl-\[270px\] { padding-left: 0 !important; }
  @page { margin: 12mm; }
}

/* Thermal receipt sizing */
.thermal { width: 80mm; font-family: "Courier New", monospace; font-size: 12px; }
.thermal.mm58 { width: 58mm; font-size: 11px; }
@media print {
  @page thermal { size: 80mm auto; margin: 0; }
  .thermal { width: 100%; }
}