/* QueuePrint — Common Styles
   Used by: shop.html, adminmiloriya.html, sales.html, contact.html, legal.html, changelog.html, 404.html
   NOT used by: form.html, index.html, stickers.html (different design language)
   Load before the page's <style> block; page rules override via cascade. */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --brand:        #1a365d;   /* primary buttons, logo, links, focus rings */
  --brand-dark:   #15304f;   /* brand hover state */
  --surface:      #ffffff;   /* cards, inputs, header, modal backgrounds */
  --bg:           #f9fafb;   /* page background, btn-outline hover */
  --text:         #1f2937;   /* body copy */
  --text-muted:   #6b7280;   /* secondary labels, subheadings */
  --text-faint:   #9ca3af;   /* footer, placeholders, disabled states */
  --border:       #e5e7eb;   /* cards, inputs, dividers */
  --border-btn:   #d1d5db;   /* btn-outline border */
  --danger:       #dc2626;   /* errors, destructive actions */
  --amber:        #f59e0b;   /* amber CTA */
  --amber-dark:   #d97706;   /* amber hover */

  /* ── Shop Portal V1 tokens (--p- namespace, shop.html only) ─────────────
     Declared here so check-html.js token validation passes. shop.html
     re-declares them in its own :root block. Other pages never use --p-*. */
  --p-brand:        #0F4C81;
  --p-brand-dark:   #0a3a66;
  --p-brand-light:  #e8f0f9;
  --p-success:      #22A95A;
  --p-success-bg:   #e8f7ee;
  --p-bg:           #F8FAFC;
  --p-surface:      #ffffff;
  --p-border:       #E7EDF5;
  --p-text:         #1a2433;
  --p-text-muted:   #64748b;
  --p-text-faint:   #94a3b8;
  --p-amber:        #f59e0b;
  --p-amber-bg:     #fffbeb;
  --p-danger:       #dc2626;
  --p-danger-bg:    #fef2f2;
  --p-radius-card:  16px;
  --p-radius-btn:   10px;
  --p-radius-badge: 20px;
  --p-shadow:       0 1px 4px rgba(15,76,129,0.08);
  --p-shadow-md:    0 4px 16px rgba(15,76,129,0.12);

  /* ── Shared cross-page tokens ─────────────────────────────────────────────
     Use these instead of magic numbers. */
  --input-radius:        8px;    /* all text/tel/number/textarea inputs */
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base body ──────────────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo       { font-size: 22px; font-weight: 700; color: var(--brand); text-decoration: none; }
.header-sub { font-size: 13px; color: var(--text-muted); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 28px 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-faint);
}
footer a       { color: var(--text-faint); text-decoration: none; margin: 0 8px; }
footer a:hover { color: var(--brand); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 10px 20px;
  border-radius: 6px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none;
  font-family: inherit; transition: background 0.15s;
}
.btn-primary         { background: var(--brand); color: #fff; }
.btn-primary:hover   { background: var(--brand-dark); }
.btn-outline         { background: var(--surface); color: var(--brand); border: 1.5px solid var(--border-btn); font-weight: 500; }
.btn-outline:hover   { border-color: var(--brand); background: var(--bg); }
.btn-full            { width: 100%; padding: 11px; font-size: 15px; }
.btn-amber           { background: var(--amber); color: #fff; }
.btn-amber:hover     { background: var(--amber-dark); }
.btn-del             { background: none; border: none; color: var(--border-btn); font-size: 13px; cursor: pointer; padding: 2px 6px; }
.btn-del:hover       { color: var(--danger); }

/* ── Password toggle ─────────────────────────────────────────────────────── */
.pass-wrap           { position: relative; }
.pass-wrap--spaced   { margin-bottom: 12px; }
.pass-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-faint);
  padding: 4px; display: flex; align-items: center; justify-content: center;
}
.pass-toggle:hover   { color: var(--brand); }

/* ── Toast notification ──────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; padding: 10px 20px;
  border-radius: 6px; font-size: 13px; display: none; z-index: 200; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ── Login error ─────────────────────────────────────────────────────────── */
#login-err { color: var(--danger); font-size: 13px; margin-top: 10px; display: none; }