/* IntelliReview — Acquire Intelligence brand styles
   Based on Brand Guide Style v1.0 (Oct 2025)
   Primary: Adriatic #155464 | Secondary: Soft Coral #FF6B5E, Acqua #46B29D
*/

:root {
  /* Primary */
  --ai-adriatic: #155464;
  --ai-adriatic-tint-1: #507F8B;
  --ai-adriatic-tint-2: #8AA9B1;
  --ai-adriatic-tint-3: #C4D4D8;
  --ai-black: #000000;
  --ai-white: #FFFFFF;

  /* Greys (per brand) */
  --ai-grey-75: #404040;
  --ai-grey-59: #696969;
  --ai-grey-25: #BFBFBF;

  /* Secondary — Soft Coral */
  --ai-coral: #FF6B5E;
  --ai-coral-tint-1: #FF9086;
  --ai-coral-tint-2: #FFB5AE;
  --ai-coral-tint-3: #FFDAD7;

  /* Secondary — Acqua (use sparingly per brand) */
  --ai-acqua: #46B29D;
  --ai-acqua-tint-1: #74C5B5;
  --ai-acqua-tint-2: #A2D9CE;
  --ai-acqua-tint-3: #D1ECE7;

  /* Steel (neutrals) */
  --ai-steel: #777776;
  --ai-steel-tint-1: #999998;
  --ai-steel-tint-2: #BBBBBA;
  --ai-steel-tint-3: #DDDDDD;

  /* Semantic */
  --ai-success: var(--ai-acqua);
  --ai-warning: var(--ai-coral-tint-1);
  --ai-danger: var(--ai-coral);
  --ai-info: var(--ai-adriatic-tint-1);

  /* Surfaces */
  --ai-bg: #F5F7F8;
  --ai-surface: #FFFFFF;
  --ai-border: var(--ai-steel-tint-3);
  --ai-text: var(--ai-black);
  --ai-text-muted: var(--ai-grey-59);

  /* Sizing */
  --ai-radius: 6px;
  --ai-radius-lg: 10px;
  --ai-shadow: 0 1px 2px rgba(21, 84, 100, 0.05), 0 1px 3px rgba(21, 84, 100, 0.04);
  --ai-shadow-md: 0 4px 12px rgba(21, 84, 100, 0.08);
}

/* Typography */
body {
  font-family: 'Proxima Nova', 'Aptos', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--ai-bg);
  color: var(--ai-text);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ai-adriatic);
}

small, .small { font-size: 0.85rem; }
.text-muted { color: var(--ai-text-muted) !important; }

/* Logo */
.ai-logo {
  height: 32px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.ai-logo-large {
  height: 56px;
  width: auto;
}

/* Topbar */
.ai-topbar {
  background: var(--ai-adriatic);
  color: var(--ai-white);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--ai-shadow);
}
.ai-topbar .ai-logo { height: 30px; filter: brightness(0) invert(1); /* show white logo */ }
.ai-topbar .ai-nav-link {
  color: rgba(255, 255, 255, 0.85);
  padding: 0.4rem 0.85rem;
  border-radius: var(--ai-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0.15rem;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.ai-topbar .ai-nav-link:hover { background: rgba(255,255,255,0.1); color: var(--ai-white); }
.ai-topbar .ai-nav-link.active { background: var(--ai-white); color: var(--ai-adriatic); }
.ai-user-badge {
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  font-weight: 600;
}
.ai-role {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--ai-radius);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
}
.ai-role-admin    { background: var(--ai-coral); color: var(--ai-white); }
.ai-role-reviewer { background: var(--ai-acqua); color: var(--ai-white); }

/* Card */
.card {
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-lg);
  box-shadow: var(--ai-shadow);
  background: var(--ai-surface);
}
.card-body { padding: 1.25rem 1.5rem; }

/* Buttons */
.btn { font-weight: 600; border-radius: var(--ai-radius); letter-spacing: 0.01em; }
.btn-primary { background: var(--ai-adriatic); border-color: var(--ai-adriatic); }
.btn-primary:hover, .btn-primary:focus { background: #0e3e4a; border-color: #0e3e4a; }
.btn-outline-primary { color: var(--ai-adriatic); border-color: var(--ai-adriatic); }
.btn-outline-primary:hover { background: var(--ai-adriatic); border-color: var(--ai-adriatic); color: var(--ai-white); }

.btn-success { background: var(--ai-acqua); border-color: var(--ai-acqua); color: var(--ai-white); }
.btn-success:hover { background: #389c89; border-color: #389c89; color: var(--ai-white); }

.btn-danger { background: var(--ai-coral); border-color: var(--ai-coral); }
.btn-danger:hover { background: #e85a4d; border-color: #e85a4d; }

.btn-warning { background: var(--ai-coral-tint-1); border-color: var(--ai-coral-tint-1); color: var(--ai-adriatic); }
.btn-warning:hover { background: var(--ai-coral); border-color: var(--ai-coral); color: var(--ai-white); }

.btn-secondary, .btn-outline-secondary { color: var(--ai-grey-59); border-color: var(--ai-steel-tint-2); background: var(--ai-white); }
.btn-secondary:hover, .btn-outline-secondary:hover { background: var(--ai-steel-tint-3); color: var(--ai-grey-75); border-color: var(--ai-steel-tint-1); }

/* Form controls */
.form-control, .form-select {
  border-radius: var(--ai-radius);
  border: 1px solid var(--ai-steel-tint-2);
  font-size: 0.9rem;
  color: var(--ai-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ai-adriatic);
  box-shadow: 0 0 0 3px rgba(21, 84, 100, 0.12);
  outline: none;
}
.form-label { font-weight: 600; color: var(--ai-grey-75); font-size: 0.85rem; }

/* Tiers — keep distinctive but on-brand */
.tier-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--ai-radius);
  font-weight: 700;
  font-size: 0.75rem;
  font-family: 'Proxima Nova', sans-serif;
  letter-spacing: 0.04em;
}
.tier-4 { background: var(--ai-coral); color: var(--ai-white); }
.tier-3 { background: var(--ai-coral-tint-1); color: var(--ai-white); }
.tier-2 { background: var(--ai-coral-tint-3); color: var(--ai-adriatic); }
.tier-1 { background: var(--ai-acqua-tint-3); color: var(--ai-adriatic); }
.tier-0 { background: var(--ai-steel-tint-3); color: var(--ai-grey-75); }

/* Badges (general) */
.badge { font-weight: 600; padding: 4px 8px; border-radius: var(--ai-radius); letter-spacing: 0.02em; }
.bg-secondary { background: var(--ai-steel) !important; color: var(--ai-white); }
.bg-info      { background: var(--ai-adriatic-tint-1) !important; color: var(--ai-white); }
.bg-warning   { background: var(--ai-coral-tint-1) !important; color: var(--ai-adriatic); }
.bg-danger    { background: var(--ai-coral) !important; color: var(--ai-white); }
.bg-success   { background: var(--ai-acqua) !important; color: var(--ai-white); }
.bg-dark      { background: var(--ai-adriatic) !important; color: var(--ai-white); }
.bg-primary   { background: var(--ai-adriatic) !important; color: var(--ai-white); }
.bg-light     { background: var(--ai-bg) !important; color: var(--ai-grey-75); }
.text-success { color: var(--ai-acqua) !important; font-weight: 600; }
.text-danger  { color: var(--ai-coral) !important; font-weight: 600; }
.text-warning { color: #c2533f !important; font-weight: 600; }

/* Stats card */
.stat-card { text-align: center; padding: 1.25rem 0.75rem; }
.stat-card .num { font-size: 2rem; font-weight: 800; color: var(--ai-adriatic); line-height: 1; margin-bottom: 0.4rem; }
.stat-card .lbl { font-size: 0.7rem; color: var(--ai-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.stat-card.tier4 .num { color: var(--ai-coral); }
.stat-card.tier3 .num { color: var(--ai-coral-tint-1); }

/* Tables */
.table { color: var(--ai-text); }
.table thead th { background: var(--ai-adriatic); color: var(--ai-white); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; border: none; padding: 0.6rem 0.75rem; }
.table tbody td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--ai-border); }
.table-hover tbody tr:hover { background: var(--ai-bg); }

/* Login shell */
.ai-login-shell {
  max-width: 440px;
  margin: 5rem auto;
}
.ai-login-card {
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-lg);
  overflow: hidden;
  background: var(--ai-surface);
  box-shadow: var(--ai-shadow-md);
}
.ai-login-header {
  background: var(--ai-adriatic);
  padding: 2rem 2rem 1.5rem;
  text-align: center;
}
.ai-login-header .ai-logo { height: 44px; filter: brightness(0) invert(1); }
.ai-login-header .tagline { color: rgba(255,255,255,0.8); font-size: 0.85rem; margin-top: 0.6rem; font-weight: 500; }
.ai-login-body { padding: 1.75rem 2rem 2rem; }

/* Individual form card */
.individual-form {
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  transition: border-left-color 0.2s;
  border-left: 4px solid var(--ai-steel-tint-2);
}
.individual-form.unsaved { border-left-color: var(--ai-coral-tint-1); background: #FFFCFB; }
.individual-form.saved   { border-left-color: var(--ai-acqua); background: #F6FCFA; }

/* Data-type checklist */
.dt-group {
  background: var(--ai-bg);
  border-radius: var(--ai-radius);
  padding: 0.75rem 1rem 0.5rem;
  margin-bottom: 0.75rem;
}
.dt-group h6 {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--ai-grey-59);
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
  font-weight: 700;
}
.yn-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--ai-steel-tint-3);
}
.yn-row:last-child { border-bottom: none; }
.yn-row label.lbl { flex: 1; margin: 0; font-size: 0.88rem; color: var(--ai-text); cursor: help; }
.yn-row .form-check-inline { margin: 0; }
.yn-row .form-check-input:checked {
  background-color: var(--ai-adriatic);
  border-color: var(--ai-adriatic);
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.page-header h2, .page-header h4 { margin: 0; color: var(--ai-adriatic); font-weight: 700; }

/* Empty / done state */
.ai-empty-state {
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-lg);
  text-align: center;
  padding: 4rem 2rem;
}
.ai-empty-state i { font-size: 3rem; color: var(--ai-acqua); }
.ai-empty-state h4 { color: var(--ai-adriatic); margin-top: 1rem; }

/* Hour chart */
.hour-bar { display: inline-block; background: var(--ai-adriatic); vertical-align: bottom; margin: 0 1px; min-width: 14px; transition: background 0.2s; border-radius: 2px 2px 0 0; }
.hour-bar:hover { background: var(--ai-coral); }
.hour-label { display: inline-block; width: 14px; text-align: center; font-size: 0.7rem; color: var(--ai-text-muted); margin: 0 1px; }

/* Tooltips (Bootstrap defaults but recolored) */
.tooltip-inner {
  background: var(--ai-adriatic);
  color: var(--ai-white);
  font-size: 0.8rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--ai-radius);
  max-width: 280px;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--ai-adriatic); }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--ai-adriatic); }
.tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--ai-adriatic); }
.tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--ai-adriatic); }

/* Help icon for inline tooltips */
.ai-help {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  background: var(--ai-steel-tint-2);
  color: var(--ai-white);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: help;
  margin-left: 0.25rem;
  font-style: normal;
}
.ai-help:hover { background: var(--ai-adriatic); }

/* AI JSON debug */
pre.ai-json {
  background: var(--ai-adriatic);
  color: var(--ai-acqua-tint-3);
  padding: 1rem;
  border-radius: var(--ai-radius);
  font-size: 0.8rem;
  max-height: 400px;
  overflow: auto;
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
}

/* Password meter / errors */
.pw-policy { font-size: 0.78rem; color: var(--ai-text-muted); margin-top: 0.35rem; }
.pw-errors { color: var(--ai-coral); font-size: 0.82rem; margin-top: 0.35rem; line-height: 1.45; }

/* Source files PII summary */
.individual-card {
  background: var(--ai-bg);
  border-left: 3px solid var(--ai-adriatic-tint-1);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.5rem;
  border-radius: var(--ai-radius);
  font-size: 0.85rem;
}

/* Loading skeleton-ish */
.ai-loading { color: var(--ai-text-muted); font-style: italic; padding: 1rem; }

/* Mobile niceties */
@media (max-width: 768px) {
  .ai-topbar { flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 1rem; }
  .ai-topbar .ai-nav-link { font-size: 0.85rem; padding: 0.3rem 0.6rem; }
}

/* QA #19: at narrow widths (≤ iPhone SE 375px) stack the Yes/No checklist
   label above its radio pair so neither gets squeezed or wraps awkwardly. */
@media (max-width: 480px) {
  .yn-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .yn-row label.lbl { width: 100%; }
}

/* Brand callout — Eliminate, Automate, Reallocate™ (footer) */
.ai-footer {
  text-align: center;
  padding: 1.75rem 1.5rem 1.5rem;
  font-size: 0.85rem;
  color: var(--ai-text-muted);
  border-top: 1px solid var(--ai-border);
  margin-top: 2.5rem;
  background: var(--ai-surface);
}
.ai-footer-logo {
  display: block;
  margin: 0 auto 0.75rem;
  height: 32px;
  width: auto;
  opacity: 0.85;
}
.ai-footer-tagline {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.ai-footer-tagline strong { color: var(--ai-adriatic); font-weight: 700; }