/*
  Owner dashboard — TRV brand rules (locked decision #8):
    ground: near-black over Dark Green #0b281b ambience (tokens.css vars)
    energy: Light Teal #8aaa9d; warnings/alerts: Terracotta #8a4b2c
    logo: strictly monochrome white — never glowed/recolored/shadowed;
          clear space = brandmark height (handled via padding)
  RTL + LTR: logical properties only; direction comes from <html dir>.
*/

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(1100px 600px at 50% -10%, var(--green-deep) 0%, transparent 65%),
    var(--ink);
  color: var(--desert);
  font-family: var(--font-sans);
  line-height: 1.5;
}

html[dir="rtl"] body {
  font-family: var(--font-arabic), var(--font-sans);
}

/* ------------------------------------------------------------ demo banner */
.demo-banner {
  background: var(--terracotta);
  color: var(--desert);
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
}

/* ----------------------------------------------------------------- topbar */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.4rem;
  border-block-end: 1px solid var(--teal-surface-deep);
}

.brandmark {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Monochrome white logo: no filter, no shadow, no recolor — ever. */
.logo {
  height: 34px;
  width: auto;
  padding: 8px; /* clear space stand-in */
}

.app-title {
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--desert);
}

.mainnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.mainnav a {
  color: var(--weathered);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
}

.mainnav a.active,
.mainnav a:hover {
  color: var(--desert);
  background: var(--teal-surface-deep);
}

.topbar-side {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-inline-start: auto;
}

.lang-toggle {
  color: var(--teal-brand);
  text-decoration: none;
  font-weight: 600;
}

.inline-form { display: inline; }

/* ---------------------------------------------------------------- content */
.content {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.4rem;
}

h1 { font-size: 1.4rem; margin-block: 0.4rem 1rem; }
h2 { font-size: 1.05rem; margin-block: 0.3rem 0.6rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card {
  background: color-mix(in srgb, var(--green-deep) 55%, var(--ink));
  border: 1px solid var(--teal-surface-deep);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}

.card-wide { grid-column: 1 / -1; }

.card a { color: var(--teal-brand); }

.bignum {
  font-size: 2.2rem;
  font-weight: 700;
  margin-block: 0.2rem;
  color: var(--teal-brand);
}

.muted { color: var(--weathered); font-size: 0.9rem; }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  direction: ltr;
  unicode-bidi: embed;
}

/* ------------------------------------------------------------------ chips */
.chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.chip-ok    { background: var(--teal-surface-deep); color: var(--teal-brand); }
.chip-warn  { background: #3d2c10; color: var(--gold); }
.chip-alert { background: #33160a; color: #d98a63; }
.chip-muted { background: #1c1c18; color: var(--weathered); }

/* Evidence-computed agent status (agents page). Reuses the chip palette
   above — muted border, brand tokens only, no new colors. */
.status-chip { border: 1px solid var(--teal-surface-deep); background: #1c1c18; color: var(--weathered); }
.status-chip[data-status="TESTED"],
.status-chip[data-status="CONNECTED"] { background: var(--teal-surface-deep); color: var(--teal-brand); }
.status-chip[data-status="IMPLEMENTED"] { background: var(--teal-surface-deep); color: var(--desert); }
.status-chip[data-status="DEGRADED"],
.status-chip[data-status="DISABLED"] { background: #33160a; color: #d98a63; }

.agent-item { display: block; }
.agent-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* ----------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; }

th, td {
  text-align: start;
  padding: 0.45rem 0.6rem;
  border-block-end: 1px solid var(--teal-surface-deep);
  font-size: 0.92rem;
}

th { color: var(--weathered); font-weight: 600; }

/* ------------------------------------------------------------------ forms */
label { display: block; margin-block-end: 0.3rem; color: var(--weathered); }

input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--teal-surface);
  background: var(--ink);
  color: var(--desert);
  margin-block-end: 0.6rem;
}

input:focus { outline: 2px solid var(--teal-brand); }

.btn {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  font-weight: 700;
}

.btn-primary { background: var(--teal-surface); color: var(--desert); }
.btn-primary:hover { background: var(--teal-brand); color: var(--ink); }
.btn-danger { background: var(--terracotta); color: var(--desert); }
.btn-ghost {
  background: transparent;
  color: var(--weathered);
  border: 1px solid var(--teal-surface-deep);
}

/* ------------------------------------------------------------- components */
.login-wrap {
  display: flex;
  justify-content: center;
  padding-block-start: 8vh;
}

.login-card { width: min(420px, 92vw); }

.error-note { color: #d98a63; font-weight: 600; }

.stepup-note { max-width: 60ch; }

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 1rem;
  margin-block: 0.6rem;
}
.kv dt { color: var(--weathered); }
.kv dd { margin: 0; }

.decide-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-block-start: 0.6rem;
}

.int-list { list-style: none; padding: 0; margin: 0.4rem 0; }
.int-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.3rem;
}

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

/* ---------------------------------------------------------- voice page */
/* Hold-to-talk (v2). Thumb-sized target, brand energy on the ring while
   recording, terracotta for errors. Works phone-first. */
.voice-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem 1rem 3rem;
  text-align: center;
}
.voice-title { margin: 0; font-size: 1.5rem; }
.voice-hint { margin: 0; opacity: 0.75; min-height: 1.5em; }
.talk-button {
  position: relative;
  width: min(62vw, 260px);
  height: min(62vw, 260px);
  border-radius: 50%;
  border: 2px solid var(--teal-brand);
  background: var(--green-deep);
  color: var(--desert);
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
  touch-action: none;              /* pointer capture, never a page scroll */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.talk-button:active { transform: scale(0.98); }
.talk-button:disabled { opacity: 0.55; cursor: progress; }
.talk-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}
.talk-button[data-state="recording"] .talk-ring {
  border-color: var(--teal-brand);
  animation: talk-pulse 1.4s ease-in-out infinite;
}
.talk-button[data-state="sending"] .talk-ring,
.talk-button[data-state="speaking"] .talk-ring {
  border-color: var(--teal-surface);
  animation: talk-pulse 2.2s ease-in-out infinite;
}
@keyframes talk-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .talk-button[data-state] .talk-ring { animation: none; }
}
.voice-transcript {
  max-width: 42rem;
  text-align: start;
  display: grid;
  gap: 0.5rem;
}
.voice-tag {
  display: inline-block;
  min-width: 4.5rem;
  opacity: 0.6;
  font-size: 0.85em;
}
.voice-error { color: var(--terracotta); margin: 0; }
.voice-note { max-width: 34rem; opacity: 0.6; font-size: 0.85rem; margin: 0; }

/* login second-factor hint */
.field-hint{font:400 12px/1.5 var(--font-sans,system-ui);color:var(--mut,#8a9);margin:4px 0 0;opacity:.7}