/*
 * Liontown ECI Isolation Tag Generator — interface theme.
 *
 * This file styles the CHROME only: header, cards, tables, forms, buttons.
 * It must never style .tag, .page, .sheetwrap or anything inside @media print
 * — that geometry is calibrated in millimetres to the Avery L7164 sheet and
 * lives inline in templates/tags/index.html.
 *
 * The look borrows from isolation signage rather than from generic web
 * chrome: heavy uppercase labelling, hazard banding, and the same wordmark
 * device that appears on the printed tag.
 */

:root {
  /* Liontown brand, carried over from the printed tag. */
  --orange:      #F59300;
  --orange-deep: #C97800;
  --navy:        #06224E;
  --navy-lift:   #0C3570;
  --navy-shade:  #041838;

  --ink:         #16191F;
  --ink-soft:    #56606E;
  --paper:       #FFFFFF;
  --field:       #ECEAE6;
  --line:        #D3D6DC;
  --line-soft:   #E6E8EC;

  --ok-bg:       #E7F4EA;
  --ok-fg:       #1E6B32;
  --no-bg:       #FDECEC;
  --no-fg:       #A11111;

  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ui);
  color: var(--ink);
  background: var(--field);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- header -- */

.appbar { background: var(--navy); color: #fff; }

.appbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* The wordmark from the printed tag: orange brackets at opposite corners.
   Screen and label carry the same device. */
.mark {
  position: relative;
  display: inline-block;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.4px;
  color: #fff;
  padding: 5px 9px;
  flex: none;
}
.mark::before,
.mark::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 10px;
}
.mark::before {
  top: 0; left: 0;
  border-top: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
}
.mark::after {
  bottom: 0; right: 0;
  border-bottom: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
}

.appbar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.62);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  padding-left: 20px;
}

.appnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.appnav a,
.appnav .linkbtn {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.appnav a:hover,
.appnav .linkbtn:hover { color: #fff; border-bottom-color: rgba(245, 147, 0, 0.5); }
.appnav a.is-current { color: #fff; border-bottom-color: var(--orange); }

.appnav .who {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: none;
  font-weight: 400;
}
.appnav .who b { color: #fff; font-weight: 700; }

.appbar form { display: inline; margin: 0; }

/* Barricade banding — the one loud element on the page. */
.hazard {
  height: 6px;
  background: repeating-linear-gradient(
    135deg,
    var(--orange) 0 14px,
    var(--navy-shade) 14px 28px
  );
}

/* ----------------------------------------------------------------- shell -- */

.wrap { max-width: 1100px; margin: 0 auto; padding: 26px 20px 64px; }
.wrap.narrow { max-width: 430px; }

h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 5px; }
.sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 20px; max-width: 70ch; }

/* ----------------------------------------------------------------- cards -- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 18px;
  margin-bottom: 16px;
}

.card h2 {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--navy);
  margin: 0 0 15px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--orange);
}

/* ---------------------------------------------------------------- tables -- */

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th, td {
  border: 1px solid var(--line-soft);
  padding: 7px 9px;
  text-align: left;
  vertical-align: middle;
}

th {
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-color: var(--navy);
}

tbody tr:nth-child(even) td { background: #FAFAFB; }
tbody tr:hover td { background: #FFF7EA; }

td.center, th.center { text-align: center; }

/* Isolation point IDs are codes. Monospace makes a wrong character visible. */
.mono, td .mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.01em; }

td input[type=text] {
  width: 100%;
  border: 1px solid transparent;
  padding: 5px 7px;
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  color: inherit;
}
td input[type=text].mono { font-family: var(--mono); }
td input[type=text]:hover { border-color: var(--line); }
td input[type=text]:focus { border-color: var(--navy); background: #fff; outline: none; }

/* ---------------------------------------------------------------- fields -- */

.meta { display: flex; flex-wrap: wrap; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label,
.formfield label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.field input,
.formfield input,
.search input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 14px;
  font-family: inherit;
  color: inherit;
  background: #fff;
}
.field input { min-width: 200px; }
.formfield { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.formfield input { width: 100%; }

.field input:focus,
.formfield input:focus,
.search input:focus,
textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(6, 34, 78, 0.12);
}

.checkline {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 7px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
}

input[type=checkbox] { accent-color: var(--navy); width: 15px; height: 15px; }

/* --------------------------------------------------------------- buttons -- */

.btn {
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 9px 17px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.35;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-deep); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--navy); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-del { background: #fff; border-color: var(--line); color: var(--no-fg); }
.btn-del:hover { border-color: var(--no-fg); }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-block { width: 100%; text-align: center; }

.linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
}
.linkbtn:hover { text-decoration: underline; }

a.plain { color: var(--navy); font-weight: 700; text-decoration: none; }
a.plain:hover { text-decoration: underline; }

/* Keyboard users must always see where they are. */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ------------------------------------------------------------ components -- */

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; align-items: center; }
.count {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-left: auto;
}
.hint { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px; max-width: 80ch; }

.printnote {
  font-size: 12px;
  color: #6B3600;
  background: #FFF6E9;
  border: 1px solid #F3D199;
  border-left: 3px solid var(--orange);
  border-radius: 3px;
  padding: 11px 13px;
  margin-top: 15px;
}
.printnote b { color: #6B3600; }

.reprintnote {
  font-size: 12px;
  color: #14401D;
  background: var(--ok-bg);
  border: 1px solid #B7DDC2;
  border-left: 3px solid var(--ok-fg);
  border-radius: 3px;
  padding: 10px 12px;
  margin: 0 0 16px;
}

.search { display: flex; gap: 8px; margin: 0 0 15px; flex-wrap: wrap; }
.search input { min-width: 250px; }

.pager { display: flex; gap: 12px; align-items: center; margin-top: 15px; font-size: 12px; color: var(--ink-soft); }
.empty { font-size: 13px; color: var(--ink-soft); padding: 12px 0; }

.pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 2px;
  padding: 3px 7px;
}
.pill-ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill-no { background: var(--no-bg); color: var(--no-fg); }

.errors {
  background: var(--no-bg);
  border: 1px solid #F2B8B8;
  border-left: 3px solid var(--no-fg);
  color: var(--no-fg);
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 0 0 14px;
}
.errors ul { margin: 0; padding-left: 18px; }

details.howto {
  margin: 0 0 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 16px;
}
details.howto summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
}

.panel {
  margin-top: 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: 3px;
  padding: 14px;
  background: #FBFBFC;
}

textarea {
  width: 100%;
  font-size: 13px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  color: inherit;
}

/* ----------------------------------------------------------- sign-in page -- */

.signin-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--navy);
}
.signin-shell .wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.signin-card {
  background: var(--paper);
  border-radius: 3px;
  padding: 30px;
  width: 100%;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  border-top: 4px solid var(--orange);
}
.signin-card h2 {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--navy);
  margin: 0 0 6px;
}
.signin-card .lede { font-size: 13px; color: var(--ink-soft); margin: 0 0 20px; }
.signin-brand { text-align: center; margin-bottom: 22px; }
.signin-brand .mark { font-size: 21px; }
.signin-note { font-size: 12px; color: var(--ink-soft); margin: 16px 0 0; }

@media (max-width: 620px) {
  .appbar-inner { gap: 12px; }
  .appbar-title { border-left: 0; padding-left: 0; width: 100%; }
  .appnav { margin-left: 0; gap: 16px; }
  .wrap { padding: 20px 14px 48px; }
}

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