/* ============================================================
   Requirements Manager — application chrome
   Built ON TOP OF onedaybi-brand.css tokens. Turns the One Day BI
   document brand into an app UI: app bar, breadcrumbs, branded
   form controls, the interview stepper, list rows and empty states.
   Prototype only — no framework, no JS required for layout.
   ============================================================ */

/* ---- App bar (persistent header) ---- */
.app-bar {
  background: var(--odbi-white);
  border-bottom: 1px solid var(--odbi-light-grey);
  box-shadow: var(--odbi-shadow);
}
.app-bar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.app-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.app-brand:hover { text-decoration: none; }
.app-brand .app-logo { height: 40px; width: auto; flex: none; }
.app-brand .app-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.app-brand .app-brand-name {
  font-family: var(--odbi-font-heading); font-weight: 700;
  color: var(--odbi-navy-dark); font-size: 0.95rem; letter-spacing: 0.3px;
}
.app-brand .app-product {
  font-family: var(--odbi-font-heading); font-weight: 700;
  color: var(--odbi-amber-dark); font-size: 0.78rem; letter-spacing: 0.4px;
  text-transform: uppercase;
}
.app-bar-spacer { flex: 1; }
.app-user { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: var(--odbi-slate-mid); }
.app-user strong { color: var(--odbi-navy); }
.app-user .app-signout {
  font-family: var(--odbi-font-heading); font-weight: 700; font-size: 0.8rem;
  color: var(--odbi-slate-mid); border: 1px solid var(--odbi-light-grey);
  background: var(--odbi-white); border-radius: var(--odbi-radius-sm);
  padding: 6px 14px; cursor: pointer; text-decoration: none;
}
.app-user .app-signout:hover { border-color: var(--odbi-amber); color: var(--odbi-amber-dark); text-decoration: none; }

/* Role ribbon under the bar — tells operator vs customer context apart */
.app-context {
  background: var(--odbi-navy-dark); color: var(--odbi-slate-light);
  font-size: 0.8rem;
}
.app-context.is-customer { background: var(--odbi-navy); }
.app-context-inner {
  max-width: 1040px; margin: 0 auto; padding: 7px 24px;
  display: flex; align-items: center; gap: 10px;
}
.app-context .app-context-chip {
  font-family: var(--odbi-font-heading); font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--odbi-amber); color: var(--odbi-navy-dark);
  padding: 2px 9px; border-radius: 999px;
}
.app-context .app-context-chip.is-acting { background: var(--odbi-blue); color: var(--odbi-white); }
.app-context a { color: var(--odbi-amber); }

/* ---- Main content column ---- */
.app-main { max-width: 1040px; margin: 0 auto; padding: 28px 24px 72px; }
.app-main.narrow { max-width: 760px; }

/* ---- Breadcrumbs ---- */
.app-crumbs { font-size: 0.85rem; color: var(--odbi-slate-mid); margin-bottom: 18px; }
.app-crumbs a { color: var(--odbi-slate-mid); }
.app-crumbs a:hover { color: var(--odbi-amber-dark); }
.app-crumbs .sep { color: var(--odbi-light-grey); margin: 0 8px; }
.app-crumbs .here { color: var(--odbi-navy); font-weight: 700; }

/* ---- Page head ---- */
.app-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 8px; flex-wrap: wrap;
}
.app-page-head h1 { margin: 0; }
.app-page-head .app-sub { color: var(--odbi-slate-mid); margin: 6px 0 0; }
.app-page-head .app-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.app-metaline { color: var(--odbi-slate-mid); font-size: 0.9rem; margin: 4px 0 24px; }
.app-metaline strong { color: var(--odbi-navy); }

/* Buttons — sizing helpers on top of brand .odbi-btn */
.odbi-btn.sm, .odbi-btn-secondary.sm { padding: 8px 18px; font-size: 0.85rem; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 24px 0; }

/* ---- Branded form controls ---- */
.field { display: block; margin-bottom: 18px; }
.field > .field-label,
.field > label {
  display: block; font-family: var(--odbi-font-heading); font-weight: 700;
  color: var(--odbi-navy); font-size: 0.9rem; margin-bottom: 6px;
}
.field .hint { display: block; font-weight: 400; color: var(--odbi-slate-mid); font-size: 0.82rem; margin-top: 4px; }
input[type="text"], input[type="email"], input[type="password"],
select, textarea {
  width: 100%; font-family: var(--odbi-font-body); font-size: 1rem;
  color: var(--odbi-slate); background: var(--odbi-white);
  border: 1px solid var(--odbi-light-grey); border-radius: var(--odbi-radius-sm);
  padding: 10px 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--odbi-amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--odbi-slate-mid) 50%),
  linear-gradient(135deg, var(--odbi-slate-mid) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}

/* ---- Centred auth card ---- */
.auth-wrap { min-height: calc(100vh - 6px); display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.auth-card {
  width: 100%; max-width: 420px; background: var(--odbi-white);
  border: 1px solid var(--odbi-light-grey); border-top: 6px solid var(--odbi-amber);
  border-radius: var(--odbi-radius); box-shadow: var(--odbi-shadow-lg);
  padding: 36px 34px 32px;
}
.auth-card .auth-logo { display: block; height: 52px; margin: 0 auto 18px; }
.auth-card h1 { font-size: 1.4rem; text-align: center; margin-bottom: 4px; }
.auth-card .auth-tagline { text-align: center; color: var(--odbi-slate-mid); font-size: 0.9rem; margin-bottom: 26px; }
.auth-card .odbi-btn { width: 100%; text-align: center; margin-top: 8px; }
.auth-alt { text-align: center; font-size: 0.85rem; color: var(--odbi-slate-mid); margin-top: 20px; }

/* Alert / error banner */
.app-alert {
  border-left: 4px solid var(--odbi-amber-dark); background: var(--odbi-amber-tint);
  color: var(--odbi-navy); border-radius: var(--odbi-radius-sm);
  padding: 12px 16px; margin-bottom: 20px; font-size: 0.9rem;
}

/* ---- List rows (customers / requirements) ---- */
.row-list { list-style: none; padding: 0; margin: 20px 0; }
.row-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--odbi-white); border: 1px solid var(--odbi-light-grey);
  border-left: 4px solid var(--odbi-amber); border-radius: var(--odbi-radius);
  box-shadow: var(--odbi-shadow); padding: 16px 20px; margin-bottom: 12px;
  text-decoration: none; color: inherit; transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.row-item:hover { text-decoration: none; box-shadow: var(--odbi-shadow-lg); transform: translateY(-1px); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-family: var(--odbi-font-heading); font-weight: 700; color: var(--odbi-navy-dark); font-size: 1.05rem; }
.row-meta { color: var(--odbi-slate-mid); font-size: 0.85rem; margin-top: 2px; }
.row-aside { display: flex; align-items: center; gap: 14px; flex: none; }
.row-open { font-family: var(--odbi-font-heading); font-weight: 700; color: var(--odbi-amber-dark); font-size: 0.85rem; }

/* ---- Empty state ---- */
.empty {
  text-align: center; padding: 40px 24px; border: 1px dashed var(--odbi-light-grey);
  border-radius: var(--odbi-radius); background: var(--odbi-white); color: var(--odbi-slate-mid);
}
.empty h3 { color: var(--odbi-navy); margin-top: 0; }

/* ---- Definition grid (requirement / customer facts) ---- */
.fact-grid { display: grid; grid-template-columns: 160px 1fr; gap: 4px 20px; margin: 18px 0 8px; }
.fact-grid dt { font-family: var(--odbi-font-heading); font-weight: 700; color: var(--odbi-slate-mid); font-size: 0.85rem; padding: 8px 0; }
.fact-grid dd { margin: 0; padding: 8px 0; color: var(--odbi-navy); border-bottom: 1px solid var(--odbi-light-grey); }
.fact-grid dt { border-bottom: 1px solid var(--odbi-light-grey); }

/* ---- Interview / pipeline stepper ---- */
.stepper { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 28px; list-style: none; padding: 0; }
.stepper li {
  flex: 1; min-width: 96px; text-align: center; position: relative;
  font-family: var(--odbi-font-heading); font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--odbi-slate-mid); padding: 10px 6px 0;
}
.stepper li::before {
  content: ""; display: block; height: 4px; border-radius: 2px;
  background: var(--odbi-light-grey); margin-bottom: 8px;
}
.stepper li.done { color: var(--odbi-slate); }
.stepper li.done::before { background: var(--odbi-amber); }
.stepper li.active { color: var(--odbi-amber-dark); }
.stepper li.active::before { background: var(--odbi-amber); box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }

/* ---- Guided-question blocks ---- */
.q-block {
  background: var(--odbi-white); border: 1px solid var(--odbi-light-grey);
  border-left: 4px solid var(--odbi-amber); border-radius: var(--odbi-radius);
  box-shadow: var(--odbi-shadow); padding: 18px 22px; margin-bottom: 16px;
}
.q-block .q-label { font-family: var(--odbi-font-heading); font-weight: 700; color: var(--odbi-amber-dark); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; }
.q-block .q-text { font-family: var(--odbi-font-heading); font-weight: 700; color: var(--odbi-navy-dark); font-size: 1.05rem; margin: 4px 0 12px; }
.q-options { list-style: none; padding: 0; margin: 0 0 10px; }
.q-options li { margin-bottom: 8px; }
.q-options label {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--odbi-light-grey); border-radius: var(--odbi-radius-sm);
  cursor: pointer; font-family: var(--odbi-font-body); font-weight: 400; color: var(--odbi-slate);
}
.q-options input:checked + span,
.q-options label:has(input:checked) { border-color: var(--odbi-amber); }
.q-options label:hover { border-color: var(--odbi-amber); }
.q-rec { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--odbi-amber-dark); font-family: var(--odbi-font-heading); text-transform: uppercase; }

/* ---- Document / summary field blocks ---- */
.doc-field {
  padding: 14px 0; border-bottom: 1px solid var(--odbi-light-grey);
}
.doc-field:last-child { border-bottom: none; }
.doc-field .doc-flabel { font-family: var(--odbi-font-heading); font-weight: 700; color: var(--odbi-navy-dark); }
.doc-field .doc-open {
  color: var(--odbi-slate-mid); font-style: italic;
}
.doc-field.is-open .doc-flabel::after {
  content: "Open"; margin-left: 8px; font-size: 0.68rem; font-style: normal;
  vertical-align: middle; background: var(--odbi-amber-tint); color: var(--odbi-amber-dark);
  padding: 1px 8px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}
.doc-meta { color: var(--odbi-slate-mid); font-size: 0.82rem; margin-top: 3px; }

/* Decision bar (approve / go deeper) */
.decision-bar {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  background: var(--odbi-navy-dark); border-radius: var(--odbi-radius);
  padding: 20px 24px; margin-top: 8px;
}
.decision-bar .decision-copy { flex: 1; min-width: 220px; color: var(--odbi-slate-light); font-size: 0.9rem; }
.decision-bar .decision-copy strong { color: var(--odbi-white); }

/* Timeline for versions */
.vtimeline { list-style: none; padding: 0; margin: 20px 0; }
.vtimeline li {
  position: relative; padding: 0 0 20px 28px; border-left: 2px solid var(--odbi-light-grey); margin-left: 6px;
}
.vtimeline li::before {
  content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--odbi-light-grey); border: 3px solid var(--odbi-off-white);
}
.vtimeline li.current::before { background: var(--odbi-amber); }
.vtimeline li:last-child { border-left-color: transparent; }
.v-head { font-family: var(--odbi-font-heading); font-weight: 700; color: var(--odbi-navy-dark); }
.v-meta { color: var(--odbi-slate-mid); font-size: 0.83rem; margin: 2px 0 6px; }

/* Prototype-only banner so reviewers know this is static */
.proto-banner {
  background: var(--odbi-blue-tint); color: var(--odbi-navy); text-align: center;
  font-size: 0.8rem; padding: 6px 16px; border-bottom: 1px solid #c7dbfb;
}
.proto-banner a { color: var(--odbi-blue); font-weight: 700; }

@media (max-width: 640px) {
  .fact-grid { grid-template-columns: 1fr; }
  .app-page-head { flex-direction: column; }
  .stepper li { min-width: 72px; font-size: 0.62rem; }
}