/* ===== Vintage Mansion POS — styles ===== */
/* Palette mirrors the main site (css/style.css) for brand consistency. */
:root {
  --color-bg: #16263a;
  --color-bg-deep: #0f1c2b;
  --color-teal: #28455a;
  --color-surface: #f3ead9;
  --color-text: #f1e8d6;
  --color-text-muted: #c9bda7;
  --color-ink: #1c2a38;
  --color-ink-muted: #6b6058;
  --color-gold: #d9a23b;
  --color-gold-light: #f0c777;
  --color-gold-dark: #8c5a2e;
  --color-line: rgba(241, 232, 214, 0.14);
  --color-line-light: #ddd3c0;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 14px;
  --pos-color-success: #4c8c5a;
  --pos-color-error: #c0392b;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win over any element's own `display`
   rule below (e.g. .pos-modal-overlay sets display:flex) — otherwise every
   "hidden" modal still renders, stacked on top of each other. */
[hidden] { display: none !important; }

body.pos-body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(217, 162, 59, 0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(40, 69, 90, 0.35), transparent 55%),
    var(--color-bg);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; margin: 0 0 0.4em; letter-spacing: 0.01em; }

button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

::selection { background: var(--color-gold); color: var(--color-ink); }

/* Custom scrollbars (webkit) — thin gold thumb instead of the default bar */
.pos-cart-list::-webkit-scrollbar, .pos-page::-webkit-scrollbar { width: 8px; }
.pos-cart-list::-webkit-scrollbar-track { background: transparent; }
.pos-cart-list::-webkit-scrollbar-thumb {
  background: rgba(217, 162, 59, 0.35); border-radius: 999px;
}
.pos-cart-list::-webkit-scrollbar-thumb:hover { background: rgba(217, 162, 59, 0.6); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.pos-btn {
  border: none;
  border-radius: 999px;
  padding: 0.7em 1.4em;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s var(--ease), opacity 0.15s var(--ease);
}
.pos-btn-primary {
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-ink);
  box-shadow: 0 2px 8px rgba(217, 162, 59, 0.25);
}
.pos-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(217, 162, 59, 0.35); }
.pos-btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 6px rgba(217, 162, 59, 0.25); }
.pos-btn-primary:disabled { background: #6b6258; color: #b9b0a4; cursor: not-allowed; box-shadow: none; }
.pos-btn-ghost { background: transparent; border: 1px solid var(--color-line); color: var(--color-text); }
.pos-btn-ghost:hover { border-color: var(--color-gold); color: var(--color-gold-light); background: rgba(217, 162, 59, 0.08); }
/* Modals sit on a light cream surface, not the dark page background — the
   default ghost style (light text/border) is nearly invisible there, which
   is what made the price modal's Cancel button look like it didn't exist. */
.pos-modal .pos-btn-ghost { border-color: var(--color-ink-muted); color: var(--color-ink); }
.pos-modal .pos-btn-ghost:hover { border-color: var(--color-gold-dark); color: var(--color-gold-dark); background: rgba(140, 90, 46, 0.08); }
.pos-btn-block { width: 100%; }
.pos-btn-text {
  background: none; border: none; color: var(--color-gold); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; padding: 0; transition: color 0.15s var(--ease);
}
.pos-btn-text:hover { color: var(--color-gold-light); }

.pos-empty-note { color: var(--color-text-muted); font-style: italic; }
.pos-status { font-weight: 600; animation: posFadeIn 0.25s var(--ease); }
.pos-error { color: #e8998a; font-weight: 600; }

/* Manager-only delete controls (trash-can icon), reused everywhere */
.pos-delete-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex-shrink: 0; padding: 0;
  border: 1px solid var(--color-line); border-radius: 8px;
  background: transparent; color: #e8998a;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.1s var(--ease);
}
.pos-delete-btn:hover { background: rgba(192, 57, 43, 0.15); border-color: #e8998a; color: #ff8b76; }
.pos-delete-btn:active { transform: scale(0.9); }

/* ---------- Top nav (shared across pos pages) ---------- */
.pos-nav {
  background: linear-gradient(180deg, var(--color-bg-deep), #0c1723);
  border-bottom: 1px solid var(--color-line);
  padding: 0.8rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.pos-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.pos-nav-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-left: 1.4rem;
}
.pos-nav-left { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.pos-nav-brand {
  font-family: var(--font-serif); font-weight: 700; color: var(--color-gold);
  text-decoration: none; font-size: 1.1rem; transition: color 0.15s var(--ease);
  flex-shrink: 0;
}
.pos-nav-brand:hover { color: var(--color-gold-light); }
.pos-nav-link {
  position: relative;
  color: var(--color-text-muted); text-decoration: none; font-weight: 600;
  padding-bottom: 0.2rem;
  transition: color 0.15s var(--ease);
}
.pos-nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem; height: 2px;
  background: var(--color-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s var(--ease);
}
.pos-nav-link.is-active, .pos-nav-link:hover { color: var(--color-text); }
.pos-nav-link.is-active::after, .pos-nav-link:hover::after { transform: scaleX(1); }
.pos-nav-right { display: flex; align-items: center; gap: 1rem; }
.pos-nav-employee {
  color: var(--color-text); font-weight: 600; background: rgba(217, 162, 59, 0.12);
  padding: 0.3em 0.8em; border-radius: 999px; font-size: 0.85rem;
}
.pos-nav-manager-badge {
  color: var(--color-ink); font-weight: 700; background: var(--color-gold);
  padding: 0.25em 0.7em; border-radius: 999px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
}

/* Divider between the everyday staff links and the manager-only area
   (Reconcile + the "more" dropdown) that follows it. */
.pos-nav-divider {
  width: 1px; height: 1.3rem; background: var(--color-gold); flex-shrink: 0;
}

/* "More" dropdown (Employees / Manage Vendors / Vendor Messages / Website
   Admin) -- keeps the header from turning into a wall of links; these are
   reached less often than Reconcile, which stays a plain top-level link. */
.pos-nav-more { position: relative; }
.pos-nav-more-btn {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  width: 32px; height: 28px; padding: 0; background: transparent;
  border: 1px solid var(--color-line); border-radius: 8px; cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.pos-nav-more-btn:hover, .pos-nav-more-btn[aria-expanded="true"] {
  border-color: var(--color-gold); background: rgba(217, 162, 59, 0.08);
}
.pos-nav-more-bar { display: block; width: 15px; height: 2px; background: var(--color-gold); border-radius: 2px; }
.pos-nav-more-menu {
  position: absolute; top: calc(100% + 0.6rem); left: 0; z-index: 50;
  display: flex; flex-direction: column; min-width: 190px;
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); padding: 0.4rem; gap: 0.15rem;
  animation: posFadeIn 0.15s var(--ease);
}
.pos-nav-more-link {
  color: var(--color-text-muted); text-decoration: none; font-weight: 600;
  padding: 0.55rem 0.7rem; border-radius: 6px;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.pos-nav-more-link.is-active, .pos-nav-more-link:hover {
  color: var(--color-text); background: rgba(217, 162, 59, 0.1);
}

/* Hamburger toggle (mobile only) */
.pos-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.pos-nav-toggle:hover { border-color: var(--color-gold); background: rgba(217, 162, 59, 0.08); }
.pos-nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-gold);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.pos-nav-toggle.is-open .pos-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pos-nav-toggle.is-open .pos-nav-toggle-bar:nth-child(2) { opacity: 0; }
.pos-nav-toggle.is-open .pos-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
  .pos-nav-toggle { display: flex; }
  .pos-nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    margin-top: 0.8rem;
    gap: 1rem;
    animation: posFadeIn 0.2s var(--ease);
  }
  .pos-nav-menu.is-open { display: flex; }
  .pos-nav-left { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .pos-nav-right {
    justify-content: space-between;
    width: 100%;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-line);
  }
  /* The divider is a vertical sliver in the desktop row -- turn it into a
     full-width horizontal rule once the nav stacks into a column. */
  .pos-nav-divider { width: 100%; height: 1px; }

  /* Vendor portal day rows ("Sunday, September 6, 2026 $436.00") were
     wrapping to two lines on phone-width screens, and the amount ended up
     overlapping the wrapped date text since it's vertically centered
     against the whole (now taller) row. Shrinking the type and trimming
     the side padding gives the date enough room to fit on one line at
     typical phone widths. */
  .pos-day-group summary {
    font-size: 0.85rem;
    padding: 0.75rem 0.9rem;
    gap: 0.4rem;
  }

  /* Vendor portal's per-sale table (Time / Item / Amount / Tax / Type /
     Notes) was built for a wide desktop layout and got badly cramped at
     phone widths. Scoped to #vendor-days only, so the staff-facing vendor
     admin table (which reuses these same classes, with edit controls
     vendors don't have) is untouched -- only Item and Amount stay visible
     here. */
  #vendor-days .pos-vendor-table-head,
  #vendor-days .pos-vendor-table-row {
    grid-template-columns: 1fr auto;
  }
  #vendor-days .pos-vendor-table-head > span:nth-child(1),
  #vendor-days .pos-vendor-table-row > span:nth-child(1),
  #vendor-days .pos-vendor-table-head > span:nth-child(4),
  #vendor-days .pos-vendor-table-row > span:nth-child(4),
  #vendor-days .pos-vendor-table-head > span:nth-child(5),
  #vendor-days .pos-vendor-table-row > span:nth-child(5),
  #vendor-days .pos-vendor-table-head > span:nth-child(6),
  #vendor-days .pos-vendor-table-row > span:nth-child(6) {
    display: none;
  }
  #vendor-days .pos-vendor-table-head > span:nth-child(3),
  #vendor-days .pos-vendor-table-row > span:nth-child(3) {
    text-align: right;
  }
}

.pos-page { max-width: 1300px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; animation: posFadeIn 0.3s var(--ease); }
.pos-page-sub { color: var(--color-text-muted); margin-top: -0.6rem; margin-bottom: 1.5rem; }
.pos-screen-title {
  color: var(--color-text);
  position: relative;
  padding-bottom: 0.3em;
}
.pos-screen-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px;
  background: var(--color-gold); border-radius: 999px;
}

/* ---------- Login / PIN screen ---------- */
.pos-login-body {
  display: flex; align-items: center; justify-content: center;
  animation: posFadeIn 0.35s var(--ease);
}
.pos-login-card {
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius);
  padding: 2.5rem;
  width: min(360px, 90vw);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.4) inset;
  animation: posPopIn 0.35s var(--ease);
}
.pos-login-card h1 { font-size: 1.4rem; color: var(--color-ink); }
.pos-login-sub { color: var(--color-ink-muted); margin-bottom: 1.2rem; }
.pos-login-secondary-action { display: block; text-align: center; margin-top: 0.9rem; }
.pos-pin-display {
  font-size: 2rem;
  letter-spacing: 0.4rem;
  min-height: 2.6rem;
  margin-bottom: 0.6rem;
  font-weight: 700;
  color: var(--color-gold-dark);
}

.pos-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 1rem 0;
}
.pos-key {
  padding: 0.9rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  border: 1px solid var(--color-line-light);
  border-radius: 10px;
  background: #fff;
  color: var(--color-ink);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background-color 0.12s var(--ease), color 0.12s var(--ease);
  box-shadow: 0 1px 2px rgba(28, 42, 56, 0.08);
}
.pos-key:hover { border-color: var(--color-gold); box-shadow: 0 4px 10px rgba(28, 42, 56, 0.12); transform: translateY(-1px); }
.pos-key:active { background: var(--color-gold); color: #fff; transform: translateY(0) scale(0.96); }
.pos-key-clear, .pos-key-back { background: var(--color-teal); color: #fff; border-color: var(--color-teal); }
.pos-key-clear:hover, .pos-key-back:hover { background: #345d78; }

/* ---------- Main POS sale screen ---------- */
.pos-main-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  padding: 1.5rem;
  align-items: start;
  animation: posFadeIn 0.3s var(--ease);
}
.pos-vendor-panel { min-width: 0; }
.pos-vendor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .pos-main-layout { grid-template-columns: 1fr; }
  .pos-vendor-grid { grid-template-columns: repeat(2, 1fr); }
}
.pos-vendor-card {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 1.4rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 700;
  min-height: 110px;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.pos-vendor-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(217, 162, 59, 0.25);
}
.pos-vendor-card:active { transform: translateY(-1px); }
.pos-vendor-card-number {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  background: #000;
  border-radius: 999px;
  padding: 0.1em 0.7em;
  transition: background-color 0.18s var(--ease);
}
.pos-vendor-card:hover .pos-vendor-card-number { background: #262626; }
.pos-vendor-card-name { font-family: var(--font-sans); font-size: 1.25rem; text-align: center; }
/* Vendor #NN badge embedded inside an otherwise-serif h1 (vendor detail
   title) -- keeps the vendor's name in the page's usual serif style while
   the number itself renders sans-serif, matching every other number on the
   Vendor Pages / vendor portal views (amounts, dates, card badges). */
.pos-vendor-number-inline { font-family: var(--font-sans); }
.pos-quick-sale-row { display: flex; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.pos-quick-sale-card {
  flex: 0 1 200px; min-height: 70px; padding: 1rem 1.2rem;
  border-style: dashed; border-color: var(--color-line);
}
.pos-quick-sale-card:hover { border-style: solid; }

.pos-cart-panel {
  background: var(--color-bg-deep);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.2rem;
  position: sticky;
  top: 1rem;
  margin-top: 3.7rem; /* aligns panel top with the vendor cards, below the "Select a Vendor" title */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.pos-cart-title { color: var(--color-text); }
.pos-cart-list { overflow-y: auto; flex: 1; margin-bottom: 0.8rem; }
.pos-cart-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--color-line);
  border-radius: 8px;
  transition: background-color 0.15s var(--ease);
  animation: posRowIn 0.25s var(--ease);
}
.pos-cart-row:hover { background: rgba(241, 232, 214, 0.05); }
.pos-cart-row-vendor { font-weight: 700; font-size: 0.85rem; color: var(--color-gold); }
.pos-cart-row-payment { font-weight: 400; color: var(--color-text-muted); margin-left: 0.4em; }
.pos-cart-row-item { margin: 0.15em 0; }
.pos-cart-row-qty { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.pos-qty-btn {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid var(--color-line); background: transparent; color: var(--color-text);
  font-size: 1rem; line-height: 1;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
}
.pos-qty-btn:hover { border-color: var(--color-gold); color: var(--color-gold-light); }
.pos-qty-btn:active { transform: scale(0.9); }
.pos-cart-row-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.pos-cart-row-amount { font-weight: 700; }
.pos-cart-row-edit, .pos-cart-row-delete {
  background: none; border: none; color: var(--color-text-muted); font-size: 0.8rem; padding: 0;
  transition: color 0.15s var(--ease);
}
.pos-cart-row-edit:hover { color: var(--color-gold-light); }
.pos-cart-row-delete { color: #e8998a; font-size: 1.1rem; }
.pos-cart-row-delete:hover { color: #ff8b76; }
.pos-cart-footer { border-top: 1px solid var(--color-line); padding-top: 0.8rem; }
.pos-cart-total-row { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 700; margin-bottom: 0.8rem; }
.pos-cart-total-row span:last-child { color: var(--color-gold); }

/* ---------- Modals ---------- */
.pos-modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 28, 43, 0.75);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  padding: 1rem;
  animation: posFadeIn 0.18s var(--ease);
}
.pos-modal {
  background: var(--color-surface); color: var(--color-ink);
  border-radius: var(--radius); padding: 2rem; width: min(420px, 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  animation: posPopIn 0.22s var(--ease);
}
.pos-modal h3 { color: var(--color-ink); }
.pos-modal-vendor { font-weight: 700; color: var(--color-gold-dark); margin-bottom: 0.2rem; }
.pos-modal-amount-recap { font-weight: 600; margin-bottom: 0.8rem; color: var(--color-ink-muted); }
.pos-amount-display { font-size: 2.4rem; font-weight: 700; text-align: center; margin: 0.6rem 0 1rem; }
.pos-keypad-amount { margin: 0 0 1rem; }
.pos-field-label { display: block; font-weight: 600; font-size: 0.85rem; margin: 0.7rem 0 0.3rem; }
.pos-text-input {
  width: 100%; padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid var(--color-line-light);
  font-size: 1rem; margin-bottom: 0.3rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pos-text-input:focus {
  outline: none; border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(217, 162, 59, 0.2);
}

/* Password field with a show/hide eye toggle (vendor portal login / set-password) */
.pos-password-field { position: relative; }
.pos-password-field .pos-text-input { padding-right: 2.6rem; }
.pos-password-toggle {
  position: absolute; right: 0.4rem; top: 0; bottom: 0.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; margin: auto 0; padding: 0; border: none; background: transparent;
  color: var(--color-ink-muted);
  transition: color 0.15s var(--ease);
}
.pos-password-toggle:hover { color: var(--color-gold-dark); }

.pos-modal-actions { display: flex; justify-content: space-between; margin-top: 1.2rem; gap: 0.6rem; }
.pos-payment-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.5rem; }
.pos-payment-btn {
  border: 1px solid var(--color-line-light); border-radius: 10px; background: #fff; color: var(--color-ink);
  padding: 1rem 0.4rem; font-weight: 700; font-size: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; align-items: center;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.pos-payment-btn span { font-size: 0.7rem; font-weight: 500; }
.pos-payment-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); }
.pos-payment-btn.is-selected, .pos-payment-btn:hover {
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold));
  color: #fff; border-color: var(--color-gold);
}

/* ---------- Vendor pages ---------- */
.pos-vendor-detail-header { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pos-month-group { margin-bottom: 1.6rem; }
.pos-month-group summary {
  display: flex; justify-content: flex-start; align-items: center; cursor: pointer; list-style: none;
  padding: 0.5rem 0; margin-bottom: 0.9rem;
  font-family: var(--font-sans); font-weight: 700; font-size: 1.2rem; color: var(--color-gold);
  border-bottom: 2px solid var(--color-line);
  transition: border-color 0.15s var(--ease);
}
.pos-month-group summary:hover { border-color: var(--color-gold); }
.pos-month-group summary::-webkit-details-marker { display: none; }
.pos-month-group summary::after {
  content: "›"; margin-left: 0.8rem; font-size: 1.3rem;
  transform: rotate(90deg); transition: transform 0.2s var(--ease);
}
.pos-month-group[open] summary::after { transform: rotate(-90deg); }
.pos-month-total { color: var(--color-text); font-family: var(--font-sans); font-size: 1.05rem; margin-left: auto; }
.pos-day-group {
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: var(--radius);
  margin-bottom: 0.8rem; overflow: hidden;
  transition: box-shadow 0.15s var(--ease);
}
.pos-day-group[open] { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.pos-day-group summary {
  padding: 0.9rem 1.2rem; display: flex; justify-content: flex-start; align-items: center; cursor: pointer; font-weight: 700;
  list-style: none;
  transition: background-color 0.15s var(--ease);
}
.pos-day-group summary:hover { background: rgba(217, 162, 59, 0.06); }
.pos-day-group summary::-webkit-details-marker { display: none; }
.pos-day-group summary::after {
  content: "›"; margin-left: 0.8rem; font-size: 1.3rem; color: var(--color-gold);
  transform: rotate(90deg); transition: transform 0.2s var(--ease);
}
.pos-day-group[open] summary::after { transform: rotate(-90deg); }
.pos-day-total { color: var(--color-gold); margin-left: auto; }
.pos-vendor-table { padding: 0 1.2rem 1rem; }
.pos-vendor-table-head, .pos-vendor-table-row {
  display: grid; grid-template-columns: 90px 1.6fr 100px 90px 90px 1.5fr; gap: 0.6rem; align-items: center;
  padding: 0.5rem 0; border-bottom: 1px solid var(--color-line);
}
.pos-vendor-table.has-actions .pos-vendor-table-head,
.pos-vendor-table.has-actions .pos-vendor-table-row {
  grid-template-columns: 90px 1.6fr 100px 90px 90px 1.3fr 110px;
}
.pos-vendor-table-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; }
.pos-move-vendor-btn { font-size: 0.82rem; white-space: nowrap; }
.pos-move-vendor-picker {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem;
  background: rgba(217, 162, 59, 0.06); border: 1px solid rgba(217, 162, 59, 0.25); border-radius: 6px;
  padding: 0.5rem 0.7rem; margin: 0.3rem 0 0.4rem; font-size: 0.85rem; color: var(--color-text-muted);
}
.pos-move-vendor-picker .pos-move-vendor-select { width: auto; flex: 0 1 220px; padding: 0.3rem 0.5rem; }
.pos-vendor-table-row { transition: background-color 0.15s var(--ease); border-radius: 6px; }
.pos-vendor-table-row:hover { background: rgba(241, 232, 214, 0.04); }
.pos-vendor-table-head { color: var(--color-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--color-line); }
.pos-editable-item-name, .pos-editable-price {
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;
  transition: color 0.15s var(--ease);
}
.pos-editable-item-name:hover, .pos-editable-price:hover { color: var(--color-gold-dark); }
.pos-notes-input {
  width: 100%; background: transparent; border: 1px solid var(--color-line); border-radius: 6px;
  color: var(--color-text); padding: 0.3rem 0.5rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pos-notes-input:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(217, 162, 59, 0.15); }
.pos-refund-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.1em 0.6em; margin-left: 0.4em;
}
.pos-refund-badge-full { background: rgba(192, 57, 43, 0.2); color: #e8998a; }
.pos-refund-badge-partial { background: rgba(217, 162, 59, 0.2); color: var(--color-gold); }
.pos-comp-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.1em 0.6em; margin-left: 0.4em;
  background: rgba(94, 158, 122, 0.2); color: #8fd6ab;
}
.pos-whole-sale-comp { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pos-whole-sale-comp-select { padding: 0.5rem; border-radius: 6px; border: 1px solid var(--color-line-light); min-width: 220px; }

/* ---------- Transactions page ---------- */
.pos-filters {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 1.2rem;
  background: var(--color-bg-deep); border: 1px solid var(--color-line); padding: 1rem; border-radius: var(--radius);
}
.pos-filters label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--color-text-muted); gap: 0.3rem; }
.pos-filters input, .pos-filters select {
  padding: 0.5rem; border-radius: 6px; border: 1px solid var(--color-line-light);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pos-filters input:focus, .pos-filters select:focus {
  outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(217, 162, 59, 0.2);
}
.pos-transaction-card {
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: var(--radius);
  margin-bottom: 0.8rem; overflow: hidden;
  transition: box-shadow 0.15s var(--ease);
}
.pos-transaction-card[open] { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.pos-transaction-card summary {
  padding: 1rem 1.2rem; display: flex; justify-content: flex-start; align-items: center; cursor: pointer; list-style: none; gap: 1rem;
  transition: background-color 0.15s var(--ease);
}
.pos-transaction-card summary:hover { background: rgba(217, 162, 59, 0.06); }
.pos-transaction-card summary::-webkit-details-marker { display: none; }
.pos-transaction-card summary::after {
  content: "›"; font-size: 1.3rem; color: var(--color-gold); flex-shrink: 0;
  transform: rotate(90deg); transition: transform 0.2s var(--ease);
}
.pos-transaction-card[open] summary::after { transform: rotate(-90deg); }
.pos-transaction-summary-main, .pos-transaction-summary-side { display: flex; flex-direction: column; gap: 0.2rem; }
.pos-transaction-summary-side { text-align: right; margin-left: auto; }
.pos-transaction-vendors { font-weight: 700; }
.pos-transaction-employee, .pos-transaction-when { color: var(--color-text-muted); font-size: 0.85rem; }
.pos-transaction-total { font-weight: 700; color: var(--color-gold); font-size: 1.1rem; }
.pos-transaction-body { padding: 0 1.2rem 1.2rem; animation: posFadeIn 0.2s var(--ease); }
.pos-transaction-body-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.pos-delete-transaction-btn { color: #e8998a; }
.pos-delete-transaction-btn:hover { border-color: #e8998a; color: #ff8b76; background: rgba(192, 57, 43, 0.08); }
.pos-transaction-item-row {
  background: rgba(241, 232, 214, 0.05); border: 1px solid transparent; border-radius: 10px; padding: 0.8rem; margin-bottom: 0.7rem;
  transition: border-color 0.15s var(--ease);
}
.pos-transaction-item-row:hover { border-color: var(--color-line); }
.pos-ti-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.6rem 1rem; }
.pos-ti-grid label { font-size: 0.75rem; color: var(--color-text-muted); display: block; }
.pos-ti-meta { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.85rem; color: var(--color-text-muted); flex-wrap: wrap; }
.pos-ti-actions { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
.pos-transaction-item-row-new { border-style: dashed; border-color: var(--color-gold); background: rgba(217, 162, 59, 0.05); }
.pos-ti-new-note { font-size: 0.78rem; color: var(--color-text-muted); margin: 0.5rem 0 0; }
.pos-transaction-datetime-edit {
  border: 1px dashed var(--color-gold); border-radius: 10px; background: rgba(217, 162, 59, 0.05);
  padding: 0.8rem; margin-bottom: 0.8rem;
}

/* ---------- Sell screen: backdate-this-sale (manager) ---------- */
.pos-backdate-details {
  margin: 0 0 0.9rem; border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden;
  background: rgba(241, 232, 214, 0.02); transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.pos-backdate-details summary {
  cursor: pointer; padding: 0.6rem 0.9rem; font-weight: 700; font-size: 0.85rem; color: var(--color-gold);
  list-style: none; display: flex; align-items: center; gap: 0.5rem;
}
.pos-backdate-details summary::-webkit-details-marker { display: none; }
.pos-backdate-details summary::before { content: "▸"; transition: transform 0.15s var(--ease); }
.pos-backdate-details[open] summary::before { transform: rotate(90deg); }
.pos-backdate-details[open] { border-color: var(--color-gold); background: rgba(217, 162, 59, 0.08); }
.pos-backdate-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem 1rem;
  padding: 0 0.9rem 0.7rem;
}
.pos-backdate-fields label { font-size: 0.75rem; color: var(--color-text-muted); display: block; }
.pos-backdate-note { font-size: 0.78rem; color: var(--color-text-muted); padding: 0 0.9rem 0.9rem; margin: 0; }

/* ---------- Manager admin pages (Employees / Manage Vendors) ---------- */
.pos-admin-add-card {
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 1.2rem; margin-bottom: 1.5rem;
}
.pos-admin-add-card h2 { font-size: 1.1rem; }
.pos-admin-add-grid, .pos-admin-row-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem 1rem; margin-bottom: 1rem;
}
.pos-admin-add-grid label, .pos-admin-row-grid label {
  font-size: 0.75rem; color: var(--color-text-muted); display: block;
}
.pos-inline-checkbox {
  display: flex !important; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--color-text) !important;
  align-self: end; padding-bottom: 0.4rem;
}
.pos-inline-checkbox input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-gold); }
.pos-color-input {
  width: 100%; height: 2.4rem; padding: 0.2rem; border-radius: 8px; border: 1px solid var(--color-line-light);
  background: #fff; cursor: pointer;
}
.pos-admin-list { display: flex; flex-direction: column; gap: 0.8rem; }
.pos-admin-row {
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.1rem;
  transition: border-color 0.15s var(--ease);
}
.pos-admin-row:hover { border-color: rgba(217, 162, 59, 0.35); }
.pos-admin-row-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pos-admin-row .v-preview { padding: 0.8rem 1rem; min-height: auto; flex-direction: row; gap: 0.6rem; }
.pos-admin-row .v-preview:hover { transform: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }

/* ---------- Contacts directory ---------- */
.pos-contacts-section-title { margin-top: 1.5rem; color: var(--color-gold); font-size: 1.1rem; }
.pos-contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 0.5rem; }
.pos-contact-card {
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
.pos-contact-card:hover { transform: translateY(-2px); border-color: var(--color-gold); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
.pos-contact-info { min-width: 0; }
.pos-contact-name { font-weight: 700; }
.pos-contact-sub { color: var(--color-text-muted); font-size: 0.8rem; }
.pos-contact-tap-hint {
  flex-shrink: 0; font-size: 1.3rem; color: var(--color-gold);
  transition: transform 0.15s var(--ease);
}
.pos-contact-tap-hint::after { content: "›"; }
.pos-contact-card:hover .pos-contact-tap-hint { transform: translateX(3px); }
.pos-contact-modal-details { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
.pos-contact-modal-row { display: flex; flex-direction: column; gap: 0.2rem; }
.pos-contact-modal-label {
  font-size: 0.75rem; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.pos-contact-modal-link { color: var(--color-gold-dark); font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.pos-contact-modal-link:hover { text-decoration: underline; }

/* ---------- Square reconciliation ---------- */
.pos-reconcile-summary { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0; }
.pos-reconcile-card {
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 180px; flex: 1;
}
.pos-reconcile-card-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.pos-reconcile-card-value { font-size: 1.6rem; font-weight: 700; font-family: var(--font-sans); }
.pos-reconcile-card-sub { font-size: 0.8rem; color: var(--color-text-muted); }
.pos-reconcile-diff-ok .pos-reconcile-card-value { color: var(--color-gold); }
.pos-reconcile-diff-bad .pos-reconcile-card-value { color: #e8998a; }
.pos-reconcile-env-badge {
  align-self: center; font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px;
  background: rgba(120, 200, 140, 0.15); color: #7fcf9a; border: 1px solid rgba(120, 200, 140, 0.35);
}
.pos-reconcile-env-badge.pos-reconcile-env-sandbox {
  background: rgba(217, 162, 59, 0.15); color: var(--color-gold); border-color: rgba(217, 162, 59, 0.35);
}
.pos-reconcile-window-input { width: 4.5rem; }
.pos-reconcile-results { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.pos-reconcile-section {
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden;
}
.pos-reconcile-section summary {
  cursor: pointer; padding: 0.9rem 1.1rem; font-weight: 700; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.pos-reconcile-section summary::-webkit-details-marker { display: none; }
.pos-reconcile-section summary::after { content: "▸"; color: var(--color-text-muted); transition: transform 0.15s var(--ease); }
.pos-reconcile-section[open] summary::after { transform: rotate(90deg); }
.pos-reconcile-section-mismatch summary { color: #e8998a; }
.pos-reconcile-section-warning summary { color: var(--color-gold); }
.pos-reconcile-section-ok summary { color: var(--color-text-muted); }
.pos-reconcile-section-body { padding: 0 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.pos-reconcile-match-card {
  background: rgba(241, 232, 214, 0.03); border: 1px solid var(--color-line); border-radius: 8px;
  padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem;
}
.pos-reconcile-match-card.pos-reconcile-match-bad { border-color: rgba(232, 153, 138, 0.5); background: rgba(232, 153, 138, 0.08); }
.pos-reconcile-match-title { font-weight: 700; }
.pos-reconcile-match-detail-row { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--color-text-muted); font-size: 0.85rem; }
.pos-reconcile-match-detail-row strong { color: var(--color-text); font-weight: 600; }
.pos-reconcile-diff-amount-bad { color: #e8998a; font-weight: 700; }
.pos-reconcile-diff-amount-ok { color: var(--color-gold); font-weight: 700; }
.pos-reconcile-receipt-link { color: var(--color-gold); text-decoration: underline; text-underline-offset: 2px; }
.pos-reconcile-receipt-link:hover { color: var(--color-gold-light); }
.pos-reconcile-orphan-label { font-weight: 600; font-size: 0.85rem; display: block; }
.pos-reconcile-orphan-label.is-whole { color: #e8998a; }
.pos-reconcile-orphan-label.is-single { color: var(--color-gold); }
.pos-reconcile-orphan-detail { font-size: 0.8rem; color: var(--color-text-muted); display: block; }
.pos-reconcile-order-details { margin-top: 0.2rem; }
.pos-reconcile-order-details summary {
  cursor: pointer; font-size: 0.8rem; color: var(--color-gold); font-weight: 600; list-style: none;
}
.pos-reconcile-order-details summary::-webkit-details-marker { display: none; }
.pos-reconcile-order-details summary::before { content: "▸ "; }
.pos-reconcile-order-details[open] summary::before { content: "▾ "; }
.pos-reconcile-order-details summary:hover { color: var(--color-gold-light); }
.pos-reconcile-order-details-body {
  margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.6rem 0.8rem; background: rgba(0, 0, 0, 0.15); border-radius: 6px;
}
.pos-reconcile-order-item-row { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.82rem; color: var(--color-text-muted); }
.pos-reconcile-order-item-row.is-highlighted {
  color: var(--color-text); font-weight: 700; background: rgba(217, 162, 59, 0.14);
  border-radius: 4px; padding: 0.2rem 0.4rem; margin: -0.2rem -0.4rem;
}
.pos-reconcile-order-item-flag {
  font-size: 0.68rem; color: var(--color-gold); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; margin-left: 0.3rem;
}
.pos-reconcile-order-item-tax { color: var(--color-text-muted); font-weight: 400; font-size: 0.78rem; }
.pos-reconcile-order-item-time { color: var(--color-text-muted); font-weight: 400; font-size: 0.78rem; margin-left: 0.4rem; }

/* ---------- Animations ---------- */
@keyframes posFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes posPopIn {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes posRowIn {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Square reconciliation: month overview + reconcile marks ---------- */
.pos-reconcile-month-block {
  margin: 1rem 0 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--color-line);
}
.pos-reconcile-month-label {
  font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; margin-bottom: 0.5rem;
}
.pos-reconcile-calendar-block { margin-top: 1rem; }
.pos-reconcile-calendar {
  display: grid; grid-template-columns: repeat(7, minmax(2.2rem, 1fr)); gap: 0.35rem;
  max-width: 420px;
}
.pos-reconcile-calendar-weekday {
  text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.03em; padding-bottom: 0.15rem;
}
.pos-reconcile-calendar-cell {
  position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--color-line); border-radius: 8px;
  background: var(--color-bg-deep); color: var(--color-text); font-family: var(--font-sans);
  font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), transform 0.1s var(--ease);
}
.pos-reconcile-calendar-cell.is-empty { background: transparent; border-color: transparent; }
button.pos-reconcile-calendar-cell:not(:disabled):hover {
  border-color: var(--color-gold); background: rgba(217, 162, 59, 0.1); transform: translateY(-1px);
}
button.pos-reconcile-calendar-cell:not(:disabled):active { transform: translateY(0); }
.pos-reconcile-calendar-cell.is-future { color: var(--color-text-muted); opacity: 0.4; cursor: default; }
.pos-reconcile-calendar-cell.is-today { border-color: var(--color-gold); box-shadow: 0 0 0 1px var(--color-gold) inset; }
.pos-reconcile-calendar-cell.has-error:not(.is-future) { border-color: rgba(232, 153, 138, 0.6); }
.pos-reconcile-calendar-badge {
  position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: #e8998a; box-shadow: 0 0 0 2px var(--color-bg-deep);
}
.pos-reconcile-mark-btn, .pos-reconcile-unmark-btn {
  align-self: flex-start; margin-top: 0.2rem; font-size: 0.78rem; font-weight: 700; padding: 0.35rem 0.7rem;
  border-radius: 6px; cursor: pointer; border: 1px solid var(--color-line); background: transparent; color: var(--color-text-muted);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}
.pos-reconcile-mark-btn:hover:not(:disabled) { border-color: var(--color-gold); color: var(--color-gold-light); background: rgba(217, 162, 59, 0.08); }
.pos-reconcile-mark-btn:disabled, .pos-reconcile-unmark-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pos-reconcile-unmark-btn { border-color: rgba(127, 207, 154, 0.4); color: #7fcf9a; }
.pos-reconcile-unmark-btn:hover:not(:disabled) { border-color: #7fcf9a; background: rgba(127, 207, 154, 0.1); }
.pos-reconcile-section-reconciled summary { color: #7fcf9a; }
.pos-reconcile-reconciled-note { font-size: 0.78rem; color: var(--color-text-muted); }

/* ---------- Report an error (vendor portal) / Vendor Messages (manager) ---------- */
.pos-report-error-textarea { resize: vertical; min-height: 90px; font-family: inherit; }
.pos-vendor-message-text { white-space: pre-wrap; margin: 0.4rem 0; color: var(--color-text); }

/* ---------- Vendor portal: printable / PDF sales record ---------- */
.pos-print-only { display: none; }
.pos-month-toolbar { display: flex; justify-content: flex-end; margin: -0.5rem 0 0.6rem; }
.pos-month-print-btn { font-size: 0.8rem; padding: 0.35rem 0.85rem; }

@media print {
  .pos-no-print { display: none !important; }
  .pos-print-only { display: block !important; }
  @page { size: letter; margin: 0.6in; }
  html, body.pos-body {
    background: #fff !important; background-image: none !important; min-height: 0;
  }
  .pos-page { max-width: none; margin: 0; padding: 0; }
}

.print-page {
  background: #fff; color: #1a1a1a; font-family: var(--font-sans), Arial, sans-serif;
  page-break-after: always;
}
.print-page:last-child { page-break-after: auto; }
.print-page-header { margin-bottom: 0.5rem; border-bottom: 2px solid #1a1a1a; padding-bottom: 0.4rem; }
.print-page-title { font-family: var(--font-serif), Georgia, serif; font-weight: 700; font-size: 1.15rem; color: #1a1a1a; }
.print-page-vendor { font-size: 0.95rem; font-weight: 600; margin-top: 0.1rem; color: #1a1a1a; }
.print-page-meta { font-size: 0.75rem; color: #555; margin-top: 0.1rem; }
.print-sales-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.print-sales-table th, .print-sales-table td { padding: 4px 6px; border-bottom: 1px solid #ccc; text-align: left; vertical-align: top; }
.print-sales-table thead th { text-transform: uppercase; font-size: 8pt; letter-spacing: 0.03em; color: #444; border-bottom: 1.5px solid #1a1a1a; }
.print-col-amount { text-align: right; white-space: nowrap; }
.print-sales-table tbody tr { page-break-inside: avoid; break-inside: avoid; }
.print-day-break td {
  font-weight: 700; background: #ececec; border-bottom: 1.5px solid #1a1a1a; padding-top: 8px; padding-bottom: 6px; color: #1a1a1a;
}
.print-day-break-total { font-weight: 400; color: #555; margin-left: 0.6em; }

/* ---------- Manage Vendors: payout settings dropdown ---------- */
.pos-admin-payout-details {
  margin: 0.9rem 0; border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden;
  background: rgba(241, 232, 214, 0.02);
}
.pos-admin-payout-details summary {
  cursor: pointer; padding: 0.6rem 0.9rem; font-weight: 700; font-size: 0.85rem; color: var(--color-gold);
  list-style: none; display: flex; align-items: center; gap: 0.5rem;
}
.pos-admin-payout-details summary::-webkit-details-marker { display: none; }
.pos-admin-payout-details summary::before { content: "▸"; transition: transform 0.15s var(--ease); }
.pos-admin-payout-details[open] summary::before { transform: rotate(90deg); }
.pos-admin-payout-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem 1rem;
  padding: 0 0.9rem 0.9rem;
}
.pos-admin-payout-grid label {
  font-size: 0.75rem; color: var(--color-text-muted); display: block;
}
.pos-admin-payout-note {
  font-size: 0.78rem; color: var(--color-text-muted); padding: 0 0.9rem 0.9rem; margin: 0;
}

/* ---------- Vendor portal: payout breakdown + split-view tabs ---------- */
.pos-vendor-view-tabs { display: flex; gap: 0.6rem; margin-bottom: 1.2rem; }
.pos-vendor-view-tab {
  padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--color-line); background: transparent;
  color: var(--color-text-muted); font-weight: 600; cursor: pointer; transition: all 0.15s var(--ease);
}
.pos-vendor-view-tab:hover { border-color: var(--color-gold); color: var(--color-gold-light); }
.pos-vendor-view-tab.is-active { background: var(--color-gold); border-color: var(--color-gold); color: #1c1206; }
.pos-vendor-payout {
  background: rgba(217, 162, 59, 0.05); border: 1px solid rgba(217, 162, 59, 0.25); border-radius: 8px;
  padding: 0.8rem 1rem; margin: 0 0 0.8rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.pos-vendor-payout-title {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  color: var(--color-gold); margin-bottom: 0.2rem;
}
.pos-vendor-payout-row { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--color-text-muted); }
.pos-vendor-payout-row span:last-child { color: var(--color-text); font-weight: 600; }
.pos-vendor-payout-net {
  border-top: 1px solid rgba(217, 162, 59, 0.3); margin-top: 0.3rem; padding-top: 0.5rem;
  font-size: 1.05rem; font-weight: 700;
}
.pos-vendor-payout-net span { color: var(--color-text) !important; }
.pos-vendor-payout-net span:last-child { color: var(--color-gold) !important; }

/* A month whose item-level detail has been archived/purged for storage --
   summary total + payout breakdown only, no day list, no print button. */
.pos-month-group-archived summary { opacity: 0.75; }
.pos-vendor-archived-note {
  font-size: 0.8rem; color: var(--color-text-muted); font-style: italic;
  margin: 0 0 0.6rem; padding: 0 0.1rem;
}

/* ---------- Vendor portal: printed monthly report cover page ---------- */
.print-cover-page {
  /* Was 9in -- cutting it that close to a full Letter page (9.8in usable
     at the 0.6in @page margin declared below) relied on every print
     pipeline honoring that exact margin. Several mobile browsers'
     print/AirPrint paths don't -- they apply their own (larger) margins
     regardless of @page -- so the cover page quietly overflowed onto a
     second, mostly-blank page on phones while fitting fine on desktop.
     7in leaves enough slack to fit safely either way. */
  display: flex; align-items: center; justify-content: center; min-height: 7in;
}
.print-cover-inner { width: 100%; max-width: 5.5in; margin: 0 auto; text-align: center; }
.print-cover-title { font-family: var(--font-serif), Georgia, serif; font-size: 1.9rem; font-weight: 700; color: #1a1a1a; }
.print-cover-subtitle { font-size: 1rem; color: #555; margin-top: 0.2rem; margin-bottom: 1.8rem; }
.print-cover-vendor { font-size: 1.3rem; font-weight: 700; color: #1a1a1a; }
.print-cover-month { font-size: 1rem; color: #444; margin-bottom: 1.8rem; }
.print-cover-breakdown { border: 1.5px solid #1a1a1a; border-radius: 4px; padding: 1.2rem 1.6rem; text-align: left; }
.print-cover-breakdown-title {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: #444;
  margin-bottom: 0.6rem; text-align: center;
}
.print-cover-row { display: flex; justify-content: space-between; font-size: 1rem; padding: 0.35rem 0; border-bottom: 1px solid #ddd; color: #333; }
.print-cover-row span:last-child { font-weight: 600; color: #1a1a1a; }
.print-cover-net { border-top: 2px solid #1a1a1a; border-bottom: none; margin-top: 0.5rem; padding-top: 0.8rem; font-size: 1.3rem; font-weight: 700; }
.print-cover-net span { color: #1a1a1a !important; }
.print-cover-meta { margin-top: 1.8rem; font-size: 0.75rem; color: #777; text-align: center; }

/* ---------- Vendor portal: manager "View as Vendor" preview banner ---------- */
.pos-preview-banner {
  background: rgba(217, 162, 59, 0.14);
  border-bottom: 1px solid var(--color-gold-dark);
  color: var(--color-gold-light);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.6rem 1rem;
}

/* ---------- Reports (vendor totals, ranked most to least) ---------- */
.pos-report-archive-note {
  font-size: 0.82rem; color: var(--color-gold); background: rgba(217, 162, 59, 0.08);
  border: 1px solid rgba(217, 162, 59, 0.3); border-radius: 8px; padding: 0.6rem 0.9rem; margin: 0 0 1rem;
}
.pos-report-results { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.pos-report-list { display: flex; flex-direction: column; gap: 0.6rem; }
.pos-report-row {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 0.7rem 1rem; animation: posRowIn 0.2s var(--ease);
}
.pos-report-row.is-top { border-color: rgba(217, 162, 59, 0.5); background: rgba(217, 162, 59, 0.06); }
.pos-report-rank {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem;
  background: rgba(241, 232, 214, 0.08); color: var(--color-text-muted);
}
.pos-report-row.is-top .pos-report-rank { background: var(--color-gold); color: var(--color-ink); }
.pos-report-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.pos-report-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.pos-report-vendor-name { font-weight: 700; }
.pos-report-vendor-total { font-family: var(--font-sans); font-weight: 700; color: var(--color-gold); white-space: nowrap; }
.pos-report-vendor-sub { font-size: 0.78rem; color: var(--color-text-muted); }
.pos-report-day-section {
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden;
}
.pos-report-day-section summary {
  cursor: pointer; padding: 0.9rem 1.1rem; font-weight: 700; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.pos-report-day-section summary::-webkit-details-marker { display: none; }
.pos-report-day-section summary::before { content: "▸ "; color: var(--color-text-muted); }
.pos-report-day-section[open] summary::before { content: "▾ "; }
.pos-report-day-total { color: var(--color-gold); font-family: var(--font-sans); }
.pos-report-day-body { padding: 0 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }

/* ---------- Reports: charts (plain SVG, no library) ----------
   Colors below are the categorical set from the dataviz skill's reference
   palette (dark-mode steps), re-validated with scripts/validate_palette.js
   against this app's own dark surface (--color-bg-deep, #0f1c2b) rather
   than assumed -- all six checks pass on that exact surface. "Other" is a
   muted neutral (not a 9th generated hue) reusing the disabled-button gray
   already in this file. This app has no light mode, so these are the only
   values needed (no @media swap). */
.pos-report-charts {
  display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 1.4rem;
  --chart-series-1: #3987e5;
  --chart-series-2: #d95926;
  --chart-series-3: #199e70;
  --chart-series-4: #c98500;
  --chart-series-5: #d55181;
  --chart-other: #6b6258;
}
.pos-report-chart-card {
  background: var(--color-bg-deep); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 1rem 1.2rem 0.8rem; flex: 1 1 380px; min-width: 280px;
}
.pos-report-chart-title {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  color: var(--color-text-muted); margin-bottom: 0.6rem;
}
.pos-report-chart-body { position: relative; }
.pos-chart-donut-svg { width: 100%; height: auto; overflow: visible; display: block; }
.pos-chart-tooltip {
  position: absolute; pointer-events: none; background: var(--color-ink); color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: 8px; padding: 0.45rem 0.65rem; font-size: 0.78rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); z-index: 5; white-space: nowrap; transform: translate(-50%, -100%);
}
.pos-chart-tooltip-value { font-weight: 700; color: var(--color-text); display: block; font-size: 0.88rem; }
.pos-chart-tooltip-label { color: var(--color-text-muted); display: block; font-size: 0.72rem; }
.pos-chart-donut-seg { transition: opacity 0.12s var(--ease), stroke-width 0.12s var(--ease); cursor: pointer; }
.pos-chart-donut-seg.is-dim { opacity: 0.35; }
.pos-chart-donut-seg.is-hovered { stroke-width: 32; }
.pos-chart-donut-total { fill: var(--color-text); font-weight: 700; font-family: var(--font-sans); font-size: 15px; }
.pos-chart-donut-total-label {
  fill: var(--color-text-muted); font-size: 9px; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.03em;
}
.pos-report-split-layout { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pos-report-split-layout .pos-chart-donut-svg { max-width: 180px; flex: 0 0 auto; }
.pos-report-legend { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 160px; }
.pos-report-legend-row {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; cursor: pointer;
  padding: 0.2rem 0.35rem; border-radius: 6px; transition: background 0.12s var(--ease);
}
.pos-report-legend-row:hover, .pos-report-legend-row.is-hovered { background: rgba(241, 232, 214, 0.07); }
.pos-report-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.pos-report-legend-name {
  flex: 1; color: var(--color-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos-report-legend-value { color: var(--color-text-muted); white-space: nowrap; }