/*
 * FretWork — Operational App Theme 2026
 *
 * Logic Pro-inspired: warm charcoal, dense controls, system font,
 * pure gray hierarchy — no accent color in app chrome.
 *
 * Linked at end of <head> in every operational page so it wins the
 * cascade over each page's embedded <style> block.
 * NOT linked from marketing pages — those stay unchanged.
 */

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Surfaces — warm charcoal */
  --void:     #1c1c1c;
  --surface:  #252525;
  --lifted:   #2e2e2e;
  --obsidian: #222222;
  --aged:     #2a2a2a;

  /* Borders — transparent */
  --border:  rgba(0,0,0,0.5);
  --border2: rgba(255,255,255,0.07);

  /* Text — warm grays */
  --ivory: #e2e2e2;
  --ink2:  #a8a8a8;
  --ink3:  #888888;
  --muted: #6a6a6a;

  /* Pure gray accent — no amber in the app.
     Selection, totals, active states read from weight and size, not hue. */
  --brass:  #e2e2e2;
  --brass2: #a8a8a8;

  /* Shape */
  --radius: 3px;

  /* System font replaces DM Sans for chrome */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Topbar height — referenced in layout calcs */
  --topbar-h: 34px;
}


/* ── Base ───────────────────────────────────────────────────────────────────── */
html, body { font-family: var(--font-ui); }


/* ── Topbar and dependent layouts ─────────────────────────────────────────── */
.topbar       { height: var(--topbar-h); }
.admin-layout { min-height: calc(100vh - var(--topbar-h)); }
.sidebar      { top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); }
.pos-layout   { height: calc(100vh - var(--topbar-h)); }


/* ── Wordmark: medium gray in the app — brand color stays on marketing pages */
.wordmark      { font-family: var(--font-ui); font-size: 12px; color: var(--ink2); }
.wordmark span { color: inherit; }
.shop-nm       { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.01em; }


/* ── Nav tabs ─────────────────────────────────────────────────────────────── */
.tab {
  font-family:    var(--font-ui);
  font-size:      12px;
  letter-spacing: 0.01em;
  text-transform: none;
  padding:        0 11px;
}
.tab-div { margin: 8px 3px; }


/* ── Icon buttons ─────────────────────────────────────────────────────────── */
.btn-icon { height: 24px; font-size: 11px; padding: 0 6px; border-radius: var(--radius); }


/* ── Form controls: 36px → 24px, system font ─────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="time"],
input[type="url"],
select {
  height:      24px;
  padding:     0 7px;
  font-size:   12px;
  font-family: var(--font-ui);
}
textarea {
  padding:     5px 7px;
  font-size:   12px;
  font-family: var(--font-ui);
}


/* ── Labels ───────────────────────────────────────────────────────────────── */
label {
  font-family:    var(--font-ui);
  font-size:      11px;
  letter-spacing: 0.01em;
  text-transform: none;
  color:          var(--muted);
}


/* ── Buttons: compact, system font, gray fills ─────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-ghost {
  height:         26px;
  font-size:      12px;
  font-family:    var(--font-ui);
  letter-spacing: 0.02em;
  text-transform: none;
  padding:        0 10px;
  border-radius:  var(--radius);
}

/* Primary: solid mid-gray fill, white text — no amber */
.btn-primary {
  background:       #3a3a3a;
  border:           1px solid rgba(0,0,0,0.6);
  border-top-color: rgba(255,255,255,0.08);
  color:            #e2e2e2;
}
.btn-primary:hover:not(:disabled) { background: #454545; }
.btn-primary:disabled             { background: var(--aged); color: var(--muted); border-color: var(--border); }

.btn-secondary {
  background:       var(--aged);
  border:           1px solid rgba(0,0,0,0.5);
  border-top-color: rgba(255,255,255,0.06);
  color:            var(--ink2);
}
.btn-secondary:hover { color: var(--ivory); }

.btn-ghost {
  color:            var(--ink2);
  border:           1px solid rgba(0,0,0,0.45);
  border-top-color: rgba(255,255,255,0.05);
}
.btn-ghost:hover { color: var(--ivory); }


/* ── Transitions: specific properties only, fast ─────────────────────────── */
/* Replaces the blanket `transition: all 0.2s ease` pattern.
   Only color-adjacent properties animate; layout never does. */
.tab, .sidebar-item,
.btn-primary, .btn-secondary, .btn-ghost, .btn-icon, .btn-scan, .btn-danger-sm,
input, select, textarea,
.svc-row, .product-card, .shop-row, .shop-card {
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}


/* ── Panel seam radius: 0 on structural layout elements ─────────────────── */
/* Corner radius belongs on floating elements (cards, modals, buttons).
   Panels forming the page structure shouldn't round at their shared edges. */
.topbar,
.sidebar,
.product-panel,
.cart-panel,
.pos-layout > div,
.admin-layout > div,
.svc-table-wrap {
  border-radius: 0;
}

/* Cards and overlays keep their radius */
.card, .scan-box, .confirm-box, .stripe-box { border-radius: var(--radius); }


/* ── DM Mono audit: decorative uses → system font ────────────────────────── */
/* Monospace is kept only for genuine data: ticket numbers, prices, serial
   numbers, UPC codes, timestamps. Label and heading use → system font. */
.version-tag,
.plan-name, .plan-sub,
.page-title, .page-sub,
.modal-title, .modal-sub,
.filter-label, .filter-sel,
.svc-cat-hdr, .svc-cat-toggle, .svc-cat-label,
.editor-title, .editor-meta,
.summary-label,
.tax-cell-label,
.svc-item-name,
.ac-item-sub,
.labor-btn,
.msg,
.empty,
.sidebar-label,
.card-title,
.info-text {
  font-family:    var(--font-ui);
  letter-spacing: 0.01em;
  text-transform: none;
}


/* ── Badge pattern: replace pills with dot + text ─────────────────────────── */
/* Role badges in the techs table */
.role-badge {
  background:     none;
  border:         none;
  padding:        0;
  border-radius:  0;
  font-family:    var(--font-ui);
  font-size:      12px;
  letter-spacing: 0;
  text-transform: none;
}
.role-badge::before {
  content:        '';
  display:        inline-block;
  width:          5px;
  height:         5px;
  border-radius:  50%;
  margin-right:   5px;
  vertical-align: middle;
  position:       relative;
  top:            -1px;
}
.role-owner         { color: var(--ivory); }
.role-owner::before { background: var(--ivory); }
.role-tech          { color: var(--muted); }
.role-tech::before  { background: var(--muted); }

/* Version tag: plain text, no pill */
.version-tag {
  border:         none;
  padding:        0;
  border-radius:  0;
  background:     none;
  font-size:      11px;
  color:          var(--muted);
}


/* ── Admin sidebar ────────────────────────────────────────────────────────── */
.sidebar-item {
  font-family:    var(--font-ui);
  font-size:      12px;
  letter-spacing: 0.01em;
  text-transform: none;
  height:         30px;
}
.sidebar-section { margin-bottom: 1rem; }


/* ── Toast ────────────────────────────────────────────────────────────────── */
#toast { font-family: var(--font-ui); font-size: 12px; border-radius: var(--radius); }