/* Anova Portal — brand styles.
   Palette and type carried over from the Anova Translator theme.
   Web fonts are not loaded: the CSP is self-only, so the stack prefers the brand
   faces when the machine has them and falls back to system UI fonts otherwise.
   DEBT: self-host Montserrat/Open Sans + add font-src to the CSP if brand type
   needs to be guaranteed. */

:root {
  --charcoal: #3a3a3a;
  --coral: #e85c4a;
  --coral-dark: #d04a38;
  --teal: #4ecdc4;
  --teal-dark: #3bb3ab;
  --amber: #f7931e;
  --light: #f4f4f4;
  --mid: #9b9b9b;
  --white: #fff;
  --danger: #c0392b;
  --ok: #2e7d32;

  --heading: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
  --body: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--charcoal);
  background: var(--light);
  line-height: 1.55;
}

h1, h2, h3, .brand { font-family: var(--heading); font-weight: 700; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
a { color: var(--coral); }

/* ---------------------------------------------------------------- layout -- */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.5rem;
  background: var(--charcoal); color: var(--white);
  border-bottom: 3px solid var(--teal);
}
.topbar .brand { color: var(--white); font-size: 1.1rem; margin: 0; letter-spacing: .3px; }
.topbar .brand span { color: var(--teal); }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.topbar nav a { color: var(--light); text-decoration: none; }
.topbar nav a:hover { color: var(--teal); }

main { max-width: 1100px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }
.page-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.page-head p { color: var(--mid); margin: 0; }

footer {
  max-width: 1100px; margin: 0 auto; padding: 1.25rem 1.5rem 2.5rem;
  border-top: 2px solid var(--teal); color: var(--mid); font-size: .8rem;
}

/* ----------------------------------------------------------------- cards -- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }

.card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem;
}
.card h3 { margin: 0; font-size: 1.02rem; }
.card p { margin: 0; font-size: .88rem; color: #5a5a5a; }
.card .meta { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--mid); }
.card.disabled { opacity: .68; }

.tag {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  background: rgba(78, 205, 196, .16); color: #1d7d76; font-size: .72rem; font-weight: 600;
}
.tag.soon { background: rgba(247, 147, 30, .18); color: #9a5b04; }
.tag.active { background: #e8f5e9; color: var(--ok); }
.tag.locked, .tag.disabled { background: #fdecea; color: var(--danger); }
.tag.unverified { background: rgba(247, 147, 30, .18); color: #9a5b04; }

/* ---------------------------------------------------------------- panels -- */
.panel { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1.25rem; }
.stat-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.stat { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1.2rem; min-width: 150px; }
.stat .value { font-family: var(--heading); font-size: 1.5rem; font-weight: 700; }
.stat .label { font-size: .76rem; color: var(--mid); text-transform: uppercase; letter-spacing: .5px; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stats .stat { display: flex; flex-direction: column; }
.stats .stat strong { font-family: var(--heading); font-size: 1.5rem; }
.stats .stat span { font-size: .76rem; color: var(--mid); text-transform: uppercase; letter-spacing: .5px; }

/* ----------------------------------------------------------------- forms -- */
.auth-wrap { max-width: 420px; margin: 4rem auto; padding: 0 1.25rem; }
.auth-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; }
.auth-card h1 { margin-bottom: .25rem; }
.auth-card .sub { color: var(--mid); font-size: .9rem; margin: 0 0 1.25rem; }

label { display: block; font-size: .82rem; font-weight: 600; margin: .8rem 0 .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select {
  width: 100%; padding: .55rem .65rem; font: inherit; font-size: .92rem;
  border: 1px solid #d5d5d5; border-radius: var(--radius); background: var(--white);
}
input:focus, select:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }

button, .btn {
  font-family: var(--heading); font-weight: 600; font-size: .9rem;
  padding: .55rem 1.1rem; border: 0; border-radius: var(--radius);
  background: var(--coral); color: var(--white); cursor: pointer;
}
button:hover { background: var(--coral-dark); }
button.secondary { background: var(--teal); }
button.secondary:hover { background: var(--teal-dark); }
button.ghost { background: transparent; color: var(--charcoal); border: 1px solid #d5d5d5; }
button.small { padding: .3rem .65rem; font-size: .8rem; }
button[disabled] { opacity: .5; cursor: not-allowed; }
button.full { width: 100%; margin-top: 1.1rem; }
button.danger { background: var(--danger); }
button.danger:hover { background: #96271c; }

.row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.ref-block { margin: 1rem 0; border: 1px solid #e0e0e0; border-radius: var(--radius); padding: .5rem .9rem; }
.ref-block summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--charcoal); }
.export-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.export-row input { width: auto; max-width: 180px; }

label.checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
label.checkbox input { width: auto; }
input[type=file] { width: 100%; padding: .5rem 0; font-size: .9rem; }
.muted { color: var(--mid); font-size: .9rem; }
.panel h2 { margin-top: 0; }
.panel h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }

.switch { margin-top: 1rem; font-size: .85rem; text-align: center; color: var(--mid); }
.switch button { background: none; color: var(--coral); padding: 0; font-size: .85rem; }
.switch button:hover { background: none; text-decoration: underline; }

/* --------------------------------------------------------------- messages -- */
.msg { padding: .6rem .8rem; border-radius: var(--radius); font-size: .86rem; margin-top: 1rem; }
.msg.error { background: #fdecea; color: var(--danger); }
.msg.ok { background: #e8f5e9; color: var(--ok); }
.msg:empty { display: none; }

/* ---------------------------------------------------------------- tables -- */
.table-wrap {
  overflow-x: auto; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .5rem 1rem; margin-bottom: 1.75rem;
}
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #ececec; }
th { font-family: var(--heading); font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; color: var(--mid); }
tbody tr:hover { background: #fafafa; }
td.actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.pill { padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.pill.on { background: #e8f5e9; color: var(--ok); }
.pill.off { background: #fdecea; color: var(--danger); }
.pill.admin { background: rgba(232, 92, 74, .14); color: var(--coral-dark); }