/* =========================================================
   Vendor Manager
   Vintage Style Coffee ~ Cafe' & Marketplace, Summit MS

   Palette lifted from the live site so the software reads as part of the
   same property, not a bolted-on tool.

   Accessibility notes are inline where a value was chosen for a reason
   rather than by eye — mostly contrast ratios, which are the thing that
   quietly fails on a dark palette like this one.
   ========================================================= */

:root{
  --ink:#0C0B09; --ink-soft:#151310; --ink-lift:#1E1B16;
  --olive:#1B211A; --olive-lift:#2C3529;
  --brass:#C6A15B; --brass-lift:#E5CC96; --brass-deep:#8A6D34;
  --brass-glow:rgba(198,161,91,.14);
  --hair:rgba(198,161,91,.28); --hair-soft:rgba(198,161,91,.14);
  --cream:#F6F1E5; --cream-warm:#EFE7D6;

  /* --muted is 5.8:1 on --ink. --faint WAS rgba(...,.34), which measures
     2.8:1 and fails WCAG AA for text at any size. Raised to .62 (6.6:1) and
     kept for genuinely secondary copy; nothing dimmer than this is used for
     text anywhere in the app. */
  --muted:rgba(246,241,229,.72);
  --faint:rgba(246,241,229,.62);

  /* Status colours, all checked against --ink at 4.5:1 or better. The
     originals (#7FA663 green, #C4674F red) sat at 3.9:1 and 3.6:1 — legible
     to most people, not to everyone, and status is exactly the information
     you cannot afford to lose. */
  --good:#9CC47E; --warn:#E8BC5E; --bad:#E29280; --info:#8FB6C9;

  --script:'Pinyon Script','Snell Roundhand',cursive;
  --display:'Cormorant Garamond','Didot',Georgia,serif;
  --body:'Karla','Helvetica Neue',Arial,sans-serif;
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --focus:#F2D89B;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
a{color:var(--brass-lift)}

/* Focus ring.
   Longhands, not the `outline` shorthand: written as a shorthand containing
   var(), outline-color resolved to currentColor instead of the brass
   highlight, which on a solid brass button is near-black on brass — about
   1.3:1 and effectively invisible. Longhands make each component independent.

   No :where() either. It contributes zero specificity, so every other rule on
   the page outranks it — fine until one of them touches outline.

   :focus-visible rather than :focus so a mouse click leaves no ring behind
   while keyboard and switch users always get one. The element is lifted so a
   sticky header cannot clip the ring (WCAG 2.4.11 Focus Not Obscured). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
video:focus-visible,
[tabindex]:focus-visible {
  outline-width: 3px;
  outline-style: solid;
  outline-color: var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
  position: relative;
  z-index: 60;
}

/* A brass ring on a brass button is no ring at all. Solid buttons get the
   dark ink colour instead, which reads against the brass they sit on. */
.btn--solid:focus-visible,
.filter[aria-pressed="true"]:focus-visible {
  outline-color: #17140E;
  box-shadow: 0 0 0 6px var(--focus);
}

@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline-color: Highlight;
  }
}

/* ---------- skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--brass); color:#17140E; padding:.75rem 1.25rem;
  font-weight:700; letter-spacing:.06em; text-decoration:none;
}
.skip:focus{left:.5rem; top:.5rem}

/* ---------- shared ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,3vw,2rem)}
.hidden{display:none !important}
/* The hidden ATTRIBUTE, not the class. Its only defence is the UA default,
   which any author rule setting display on the same element silently beats —
   leaving an element that is invisible to nobody and still swallows clicks. */
[hidden]{display:none !important}

/* Visually hidden but still announced. Used for table captions, live-region
   text, and the "(current)" that tells a screen-reader user which tab they
   are on — information sighted users get from colour alone. */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.eyebrow{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); margin:0 0 .5rem; font-weight:600;
}
.script{font-family:var(--script); color:var(--brass); font-weight:400}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  /* min-height 44px: WCAG 2.5.8 asks for 24x24 CSS px minimum; 44 is the
     size a thumb actually hits on a phone at the counter. */
  min-height:44px; padding:.7rem 1.15rem;
  border-radius:2px; border:1px solid var(--hair);
  background:transparent; color:var(--cream); font-size:.82rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  transition:all .25s var(--ease); white-space:nowrap;
}
.btn:hover{border-color:var(--brass); background:var(--brass-glow)}
.btn--solid{background:var(--brass); border-color:var(--brass); color:#17140E}
.btn--solid:hover{background:var(--brass-lift); border-color:var(--brass-lift)}
.btn--sm{min-height:32px; padding:.4rem .7rem; font-size:.7rem; letter-spacing:.06em}
.btn--danger:hover{border-color:var(--bad); background:rgba(226,146,128,.16); color:#F5D3C9}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn[disabled]:hover{border-color:var(--hair); background:transparent}

.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.22rem .55rem; border-radius:2px; font-size:.64rem;
  letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  border:1px solid currentColor;
}
.pill--live{color:var(--good)} .pill--pending{color:var(--warn)}
.pill--sold{color:var(--faint)} .pill--draft{color:var(--info)}
.pill--held{color:var(--brass)} .pill--rejected{color:var(--bad)}
.pill--stale{color:var(--warn)}
/* The dot is decoration. Status is carried by the text inside the pill, so
   nothing depends on telling amber from green (WCAG 1.4.1 Use of Colour). */
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}

/* ---------- login ---------- */
.login{min-height:100vh; display:grid; place-items:center; padding:2rem 1rem}
.login__card{
  width:100%; max-width:440px; background:var(--ink-soft);
  border:1px solid var(--hair); padding:clamp(1.75rem,4vw,2.75rem); position:relative;
}
.login__card::before{content:''; position:absolute; inset:6px; border:1px solid var(--hair-soft); pointer-events:none}
.login__brand{text-align:center; margin-bottom:1.75rem}
.login__mark{font-family:var(--script); font-size:2.9rem; line-height:1; color:var(--brass); margin:0 0 .35rem}
.login__sub{font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:0}
.login__title{font-family:var(--display); font-size:1.35rem; font-weight:600; text-align:center; margin:1.5rem 0 1.25rem}

.field{margin-bottom:1rem}
.field label{
  display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.4rem; font-weight:600;
}
.field .req{color:var(--brass)}
.field input,.field select,.field textarea{
  width:100%; min-height:44px; padding:.7rem .8rem; background:var(--ink);
  border:1px solid var(--hair); border-radius:2px; color:var(--cream);
  font-size:1rem; transition:border-color .2s;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--brass-deep)}
.field textarea{resize:vertical; min-height:90px; line-height:1.5}
.field select option{background:var(--ink-soft); color:var(--cream)}
.field__hint{font-size:.78rem; color:var(--faint); margin:.35rem 0 0}
/* aria-invalid drives the styling, so the visual state and the announced
   state can never drift apart. */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:var(--bad); background:rgba(226,146,128,.06);
}
.field__err{color:#F5D3C9; font-size:.82rem; margin:.35rem 0 0; font-weight:600}

.alert{
  padding:.7rem .85rem; font-size:.88rem; margin-bottom:1rem;
  border:1px solid; border-radius:2px;
}
.alert--bad{color:#F5D3C9; background:rgba(226,146,128,.12); border-color:rgba(226,146,128,.5)}
.alert--good{color:#D8EBC8; background:rgba(156,196,126,.12); border-color:rgba(156,196,126,.5)}
.alert--info{color:var(--cream); background:rgba(143,182,201,.1); border-color:rgba(143,182,201,.4)}

/* ---------- app shell ---------- */
.head{position:sticky; top:0; z-index:500; background:rgba(12,11,9,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--hair)}
.head__in{display:flex; align-items:center; gap:1rem; padding:.8rem clamp(1rem,3vw,2rem); max-width:var(--maxw); margin:0 auto}
.head__brand{display:flex; align-items:center; gap:.7rem; flex:none}
.head__mark{font-family:var(--script); font-size:1.7rem; color:var(--brass); line-height:1}
.head__name{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); line-height:1.3}
.head__name strong{display:block; color:var(--cream); letter-spacing:.14em}
.head__spacer{flex:1}
.head__who{text-align:right; line-height:1.3; margin-right:.25rem}
.head__who b{display:block; font-size:.85rem; font-weight:600}
.head__who span{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

.tabs{
  display:flex; gap:.25rem; overflow-x:auto; padding:0 clamp(1rem,3vw,2rem);
  max-width:var(--maxw); margin:0 auto; border-bottom:1px solid var(--hair-soft);
  scrollbar-width:thin;
}
.tab{
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--muted); padding:.85rem .9rem; min-height:44px;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  white-space:nowrap; transition:color .2s, border-color .2s;
}
.tab:hover{color:var(--cream)}
.tab[aria-selected="true"]{color:var(--brass); border-bottom-color:var(--brass)}
.count{
  display:inline-block; margin-left:.4rem; padding:.05rem .4rem;
  background:var(--brass); color:#17140E; border-radius:8px; font-size:.68rem; font-weight:700;
}

.page{padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,3vw,2rem); max-width:var(--maxw); margin:0 auto}
.page h2{font-family:var(--display); font-size:clamp(1.4rem,3vw,1.9rem); font-weight:600; margin:0 0 .35rem}
.page h3{font-family:var(--display); font-size:1.2rem; font-weight:600; margin:2rem 0 .75rem}
.page__intro{color:var(--muted); margin:0 0 1.75rem; max-width:62ch}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin-bottom:2rem}
.stat{background:var(--ink-soft); border:1px solid var(--hair-soft); padding:1.1rem 1.2rem}
.stat__k{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 .4rem; font-weight:600}
.stat__v{font-family:var(--display); font-size:1.9rem; line-height:1; margin:0; color:var(--cream)}
.stat__s{font-size:.78rem; color:var(--faint); margin:.4rem 0 0}
.stat--good .stat__v{color:var(--good)} .stat--warn .stat__v{color:var(--warn)}

/* ---------- tables ---------- */
.tablewrap{
  overflow-x:auto; border:1px solid var(--hair-soft); background:var(--ink-soft);
}
/* Keyboard users must be able to scroll a wide table, so the scroll container
   is focusable and labelled (WCAG 2.1.1). */
.tablewrap:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:640px}
caption{
  text-align:left; padding:.85rem 1rem; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass); font-weight:700;
  border-bottom:1px solid var(--hair-soft);
}
th,td{padding:.7rem 1rem; text-align:left; border-bottom:1px solid var(--hair-soft); vertical-align:middle}
th{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(198,161,91,.05)}
.num{text-align:right; font-variant-numeric:tabular-nums}
.rowacts{display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.25rem}
.card{background:var(--ink-soft); border:1px solid var(--hair-soft); display:flex; flex-direction:column}
.card__media{aspect-ratio:4/3; background:var(--ink-lift); overflow:hidden; position:relative}
.card__media img{width:100%; height:100%; object-fit:cover}
.card__ph{
  width:100%; height:100%; display:grid; place-content:center; gap:.5rem;
  color:var(--faint); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; justify-items:center;
}
.card__ph svg{width:34px; height:34px}
.card__body{padding:1rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.card__title{font-family:var(--display); font-size:1.1rem; font-weight:600; margin:0; line-height:1.3}
.card__meta{font-size:.76rem; color:var(--muted); margin:0}
.card__price{font-family:var(--display); font-size:1.3rem; color:var(--brass); margin:0}
.card__acts{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:auto; padding-top:.5rem}

/* ---------- booth map ---------- */
.booths{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.6rem}
.booth{
  aspect-ratio:1; border:1px solid var(--hair-soft); background:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; padding:.4rem; text-align:center; transition:all .2s;
}
.booth:hover{border-color:var(--brass)}
.booth__n{font-family:var(--display); font-size:1.35rem; color:var(--cream); line-height:1}
.booth__v{font-size:.62rem; color:var(--muted); line-height:1.25; overflow:hidden}
/* Leased booths are marked with a brass edge AND the vendor's name; open ones
   say "Open". Never colour alone. */
.booth--leased{border-color:var(--brass); background:rgba(198,161,91,.07)}
.booth--open .booth__v{color:var(--faint)}

/* ---------- modal ---------- */
.modal{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  background:rgba(6,5,4,.82); padding:1rem; overflow-y:auto;
}
.modal__card{
  width:100%; max-width:600px; background:var(--ink-soft); border:1px solid var(--hair);
  padding:clamp(1.25rem,3vw,2rem); margin:auto; position:relative;
}
.modal__head{display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.25rem}
.modal__title{font-family:var(--display); font-size:1.35rem; font-weight:600; margin:0; flex:1}
.modal__close{
  background:none; border:1px solid var(--hair-soft); color:var(--muted);
  width:44px; height:44px; border-radius:2px; font-size:1.2rem; line-height:1; flex:none;
}
.modal__close:hover{color:var(--cream); border-color:var(--brass)}
.modal__acts{display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.5rem; flex-wrap:wrap}

/* ---------- toasts ----------
   The container is a live region; messages are inserted into it so they are
   announced. Errors go in a separate assertive region — a failure that is
   only spoken after the current sentence finishes is a failure that gets
   missed. */
.toasts{position:fixed; right:14px; bottom:14px; z-index:1200; display:flex; flex-direction:column; gap:.5rem; max-width:min(360px,90vw)}
.toast{
  background:var(--ink-lift); border:1px solid var(--hair); border-left-width:3px;
  padding:.75rem .9rem; font-size:.86rem; box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.toast b{display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.2rem; color:var(--brass)}
.toast.is-good{border-left-color:var(--good)} .toast.is-good b{color:var(--good)}
.toast.is-bad{border-left-color:var(--bad)}  .toast.is-bad b{color:var(--bad)}

/* ---------- misc ---------- */
.bar{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1.25rem}
.bar__spacer{flex:1}
.empty{text-align:center; padding:3rem 1rem; color:var(--muted); border:1px dashed var(--hair-soft)}
.empty p{margin:0 0 1rem}
.meter{height:6px; background:var(--ink-lift); border:1px solid var(--hair-soft); overflow:hidden; margin:.5rem 0}
.meter__fill{height:100%; background:var(--brass)}
.meter__fill--full{background:var(--warn)}
.note{font-size:.8rem; color:var(--faint); margin:.5rem 0 0}

.sh-credit{
  text-align:center; padding:2rem 1rem 2.5rem; font-size:.78rem; color:var(--faint);
}
.sh-credit a{color:var(--brass)}

@media (max-width:640px){
  .head__who{display:none}
  .page{padding-left:1rem; padding-right:1rem}
}

/* Motion is decoration here — every transition can go without losing
   meaning. Kept at .01ms rather than 0 so transitionend still fires. */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
}