/* ===========================================================================
   OTENEX QR — interface styles

   Direction: an instrument, not a marketing page. The logo's own logic drives
   it — a black ring holding a red centre, with the red used sparingly and
   never as a wash. Chrome is brand black; the worksurface is paper, so QR
   previews are judged against the white they'll be printed on.

   Signature motif: the QR finder pattern. Every printed code reference in the
   interface wears corner brackets, echoing the three squares the scanner
   actually looks for.

   Both themes are defined below. Light is the default; dark follows the
   system unless the person has chosen, and their choice wins from then on.
   =========================================================================== */

/* --- Brand constants: identical in both themes --------------------------- */
:root {
  --red:      #ED1C24;
  --ink:      #1A1A1A;

  --ui:   'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --r:    3px;          /* engineering drawings don't have soft corners */
  --rail: 236px;
  --gap:  20px;
}

/* --- Light theme --------------------------------------------------------- */
:root,
[data-theme="light"] {
  --bg:          #F4F2EE;
  --surface:     #FFFFFF;
  --surface-2:   #FAF9F7;
  --line:        #E2DFD9;

  --text:        #1A1A1A;
  --muted:       #6B6B6B;

  --accent:      #ED1C24;
  --accent-hover:#C8141B;
  --accent-soft: rgba(237, 28, 36, 0.08);
  --on-accent:   #FFFFFF;

  /* Chrome is brand black in light mode — the ring around the worksurface */
  --chrome:      #1A1A1A;
  --chrome-2:    #262626;
  --chrome-line: #333333;
  --on-chrome:   #EDEBE7;
  --on-chrome-2: #9A9A9A;

  --ok:    #1F7A45;
  --warn:  #8A5A00;
  --danger:#C8141B;

  --shadow: 0 1px 2px rgba(0,0,0,.04);
  --logo-lockup: url('/img/lockup-light.png');   /* on dark chrome */
  --logo-onlight: url('/img/lockup-color.png');
}

/* --- Dark theme ---------------------------------------------------------- */
[data-theme="dark"] {
  --bg:          #111111;
  --surface:     #1A1A1A;
  --surface-2:   #202020;
  --line:        #2E2E2E;

  --text:        #EDEBE7;
  --muted:       #9A9A9A;

  /* Brand red is too dense against near-black for text and hover states, so
     the accent lifts here. The resting colour stays exactly on brand. */
  --accent:      #ED1C24;
  --accent-hover:#FF3B42;
  --accent-soft: rgba(237, 28, 36, 0.14);
  --on-accent:   #FFFFFF;

  --chrome:      #0C0C0C;
  --chrome-2:    #1A1A1A;
  --chrome-line: #282828;
  --on-chrome:   #EDEBE7;
  --on-chrome-2: #8A8A8A;

  --ok:    #4CAF7D;
  --warn:  #D19A2E;
  --danger:#FF5A61;

  --shadow: none;
  --logo-lockup: url('/img/lockup-light.png');
  --logo-onlight: url('/img/lockup-light.png');
}

/* System preference applies only until an explicit choice is stored. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #111111; --surface: #1A1A1A; --surface-2: #202020; --line: #2E2E2E;
    --text: #EDEBE7; --muted: #9A9A9A;
    --accent-hover: #FF3B42; --accent-soft: rgba(237,28,36,.14);
    --chrome: #0C0C0C; --chrome-2: #1A1A1A; --chrome-line: #282828;
    --on-chrome: #EDEBE7; --on-chrome-2: #8A8A8A;
    --ok: #4CAF7D; --warn: #D19A2E; --danger: #FF5A61;
    --shadow: none; --logo-onlight: url('/img/lockup-light.png');
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ui);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Logo ---------------------------------------------------------------- */
.logo      { display: block; height: 26px; width: auto; }
.logo-mark { display: block; height: 34px; width: auto; }

/* The wordmark has a black-ink version and a paper-ink version. Which one
   shows follows data-theme, so it tracks the manual toggle and not only the
   system preference. */
.logo-ondark  { display: none; }
[data-theme="dark"] .logo-onlight { display: none; }
[data-theme="dark"] .logo-ondark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo-onlight { display: none; }
  :root:not([data-theme]) .logo-ondark  { display: block; }
}

/* --- Signature: finder-pattern brackets around any printed code ---------- */
.code-ref {
  font-family: var(--mono);
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  /* Never inherit uppercasing from a parent: the printed code is lowercase
     and someone may have to type it off a label. */
  text-transform: none;
  position: relative; display: inline-block;
  padding: 3px 10px; color: var(--text);
}
.code-ref::before, .code-ref::after {
  content: ''; position: absolute; width: 6px; height: 6px;
  border: 1.5px solid var(--accent);
}
.code-ref::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.code-ref::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.code-ref.on-chrome { color: var(--on-chrome); }

/* --- App shell ----------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail); flex: 0 0 var(--rail);
  background: var(--chrome); color: var(--on-chrome);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--chrome-line);
}
.rail-head { padding: 20px; border-bottom: 1px solid var(--chrome-line); }
.rail-head .logo { height: 24px; }
.rail-org {
  font-family: var(--mono); font-size: 11px; color: var(--on-chrome-2);
  margin-top: 8px; letter-spacing: .04em;
}

.rail-nav { padding: 14px 12px; flex: 1; }
.rail-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px;
  color: var(--on-chrome-2); border-radius: var(--r);
  font-size: 14px; font-weight: 500; text-decoration: none;
  border-left: 2px solid transparent;
}
.rail-nav a:hover { background: var(--chrome-2); color: var(--on-chrome); text-decoration: none; }
.rail-nav a.on { background: var(--chrome-2); color: var(--on-chrome); border-left-color: var(--accent); }

.rail-foot { padding: 14px 20px; border-top: 1px solid var(--chrome-line); font-size: 13px; }
.rail-foot .who { color: var(--on-chrome); font-weight: 500; }
.rail-foot .role {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--on-chrome-2); margin-top: 2px;
}
.rail-actions { display: flex; gap: 6px; margin-top: 10px; }
.rail-actions button {
  background: none; border: 1px solid var(--chrome-line);
  color: var(--on-chrome-2); font-family: var(--ui); font-size: 12px;
  padding: 5px 10px; border-radius: var(--r); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.rail-actions button:hover { border-color: var(--accent); color: var(--on-chrome); }

.main { flex: 1; min-width: 0; }
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 16px 28px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.eyebrow {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); margin-bottom: 3px;
}
.content { padding: 24px 28px 60px; max-width: 1240px; }

/* --- Theme toggle -------------------------------------------------------- */
.theme-toggle {
  background: none; border: 1px solid var(--line); color: var(--muted);
  width: 34px; height: 34px; border-radius: var(--r); cursor: pointer;
  display: inline-grid; place-items: center; padding: 0; flex: none;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--text); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }
[data-theme="dark"] .theme-toggle .sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .moon { display: block; }
  :root:not([data-theme]) .theme-toggle .sun  { display: none; }
}
.rail-actions .theme-toggle { border-color: var(--chrome-line); color: var(--on-chrome-2); width: 30px; height: 30px; }
.rail-actions .theme-toggle:hover { border-color: var(--accent); color: var(--on-chrome); }

/* --- Controls ------------------------------------------------------------ */
.btn {
  font-family: var(--ui); font-size: 14px; font-weight: 500;
  padding: 9px 16px; border-radius: var(--r); cursor: pointer;
  border: 1px solid transparent; background: var(--accent); color: var(--on-accent);
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--text); color: var(--text); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn.block { width: 100%; justify-content: center; padding: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

label.fld { display: block; margin-bottom: 14px; }
label.fld > span {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 5px; letter-spacing: .02em;
}
input[type=text], input[type=url], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=datetime-local], input[type=file],
select, textarea {
  width: 100%; font-family: var(--ui); font-size: 14px;
  padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); color: var(--text);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 90px; resize: vertical; font-family: var(--ui); }
input.mono, .mono { font-family: var(--mono); }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
input[type=color] {
  width: 100%; height: 36px; padding: 2px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); cursor: pointer;
}
input[type=range] { accent-color: var(--accent); }
input[type=checkbox] { accent-color: var(--accent); }
.dropzone { border: 1px dashed var(--line); padding: 14px; background: var(--surface-2); }

/* --- Surfaces ------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card-head {
  padding: 13px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-head h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.card-body { padding: 18px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: var(--r); padding: 14px 16px;
}
.stat .n { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.1; }
.stat .k {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); margin-top: 4px;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  font-weight: 500; padding: 9px 14px; border-bottom: 1px solid var(--line);
}
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
tr.linked { cursor: pointer; }

.pill {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em; padding: 3px 7px;
  border-radius: 2px; border: 1px solid;
}
.pill.active  { color: var(--ok);     border-color: currentColor; background: transparent; }
.pill.paused  { color: var(--warn);   border-color: currentColor; background: transparent; }
.pill.expired,
.pill.blocked { color: var(--danger); border-color: currentColor; background: var(--accent-soft); }
.pill.type    { color: var(--muted);  border-color: var(--line);  background: var(--surface-2); }

.empty { text-align: center; padding: 56px 24px; }
.empty h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.empty p { color: var(--muted); margin: 0 0 18px; font-size: 14px; }

.notice { padding: 11px 14px; border-radius: var(--r); font-size: 13px; margin-bottom: 16px; border: 1px solid; }
.notice.err  { color: var(--danger); border-color: currentColor; background: var(--accent-soft); }
.notice.warn { color: var(--warn);   border-color: currentColor; background: transparent; }
.notice.ok   { color: var(--ok);     border-color: currentColor; background: transparent; }

/* --- Editor -------------------------------------------------------------- */
.editor { display: grid; grid-template-columns: 1fr 340px; gap: var(--gap); align-items: start; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 14px; font-family: var(--ui); font-size: 13px; font-weight: 500;
  color: var(--muted); cursor: pointer;
}
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.panel { display: none; }
.panel.on { display: block; }

.preview-rail { position: sticky; top: 84px; }
.preview-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px; text-align: center; box-shadow: var(--shadow);
}
/* The preview always sits on white, whatever the theme. A code is judged
   against the paper it gets printed on, not against the interface. */
.preview-plate { background: #FFFFFF; border-radius: var(--r); padding: 14px; display: block; }
#qr-preview { display: block; }
/* The instance is built at 1000px so downloads are print-resolution; the
   on-screen copy is scaled down by CSS rather than by regenerating it. */
#qr-preview canvas, #qr-preview svg {
  display: block; width: 100% !important; height: auto !important; max-width: 100%;
}

.scan-url {
  font-family: var(--mono); font-size: 12px; word-break: break-all;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 9px 11px; border-radius: var(--r); margin-top: 14px; text-align: left;
}

.shape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.shape-grid button {
  aspect-ratio: 1; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r); cursor: pointer; display: grid; place-items: center;
  padding: 8px; color: var(--text);
}
.shape-grid button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); color: var(--accent); }
.shape-grid svg { width: 100%; height: 100%; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bar-track { height: 5px; background: var(--line); border-radius: 2px; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }

/* --- Scan-side pages (what the public sees) ------------------------------ */
.scan-wrap { max-width: 460px; margin: 0 auto; padding: 40px 22px 60px; }
.scan-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px; box-shadow: var(--shadow);
}
.scan-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.scan-brand .logo { height: 24px; }
.scan-title { font-size: 21px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
.scan-sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.kv {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.kv:last-of-type { border-bottom: 0; }
.kv span:first-child { color: var(--muted); font-size: 13px; }
.kv span:last-child { font-family: var(--mono); text-align: right; word-break: break-all; }

/* --- Auth ---------------------------------------------------------------- */
.auth-page { min-height: 100vh; display: grid; place-items: center; background: var(--chrome); padding: 24px; }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: var(--r); padding: 32px; }
.auth-card .logo { height: 28px; margin: 0 auto 6px; }
.auth-tag {
  text-align: center; font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px;
}
.auth-theme { position: fixed; top: 18px; right: 18px; }
.auth-theme .theme-toggle { border-color: var(--chrome-line); color: var(--on-chrome-2); }

/* --- Responsive: this has to work on a phone, in a warehouse ------------- */
@media (max-width: 900px) {
  .editor { grid-template-columns: 1fr; }
  .preview-rail { position: static; order: -1; }
  .shell { flex-direction: column; }
  .rail {
    width: 100%; flex: none; height: auto; position: static;
    flex-direction: row; align-items: center; justify-content: space-between; padding: 0 12px;
  }
  .rail-head { border-bottom: 0; padding: 12px 6px; }
  .rail-head .logo { height: 20px; }
  .rail-org { display: none; }
  .rail-nav { display: flex; gap: 2px; padding: 0; overflow-x: auto; flex: 1; }
  .rail-nav a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; padding: 8px 10px; }
  .rail-nav a.on { border-left: 0; border-bottom-color: var(--accent); }
  .rail-foot { border-top: 0; padding: 8px; }
  .rail-foot .who, .rail-foot .role { display: none; }
  .rail-actions { margin-top: 0; }
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
  .hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}