/* Spam Email Detection System — interface styles.
   The three model colours match the figures in Chapter Four so that the
   application and the written report read as one piece of work. */

:root {
  --ink: #1f2328;
  --muted: #5b6570;
  --line: #dfe3e8;
  --surface: #ffffff;
  --canvas: #f6f7f9;

  --rf: #2f5c99;      /* Random Forest  */
  --svm: #c2410c;     /* Support Vector Machine */
  --bert: #0e8c7a;    /* BERT */

  --spam: #b42318;
  --spam-bg: #fef3f2;
  --legit: #067647;
  --legit-bg: #ecfdf3;
  --warn: #b54708;
  --warn-bg: #fffaeb;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

/* ----------------------------------------------------------------- navbar */
.app-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.navbar-brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--rf); color: #fff;
  font-size: .85rem; font-weight: 700; letter-spacing: .02em;
}
.brand-text { font-size: 1.02rem; color: var(--ink); }
.nav-link { color: var(--muted); font-size: .95rem; }
.nav-link.active, .nav-link:hover { color: var(--ink); }
.nav-user { font-size: .9rem; color: var(--muted); }

/* ------------------------------------------------------------------ cards */
.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  padding: .85rem 1.15rem;
}
.section-title { font-size: 1.05rem; font-weight: 600; margin-bottom: .1rem; }
.section-sub { color: var(--muted); font-size: .88rem; }

/* ------------------------------------------------------------- stat tiles */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  height: 100%;
}
.stat-label {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: .3rem;
}
.stat-value { font-size: 1.9rem; font-weight: 650; line-height: 1.1; }
.stat-note { font-size: .82rem; color: var(--muted); margin-top: .25rem; }

/* ---------------------------------------------------------- verdict badges */
.verdict {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .6rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.verdict-spam { background: var(--spam-bg); color: var(--spam); }
.verdict-legit { background: var(--legit-bg); color: var(--legit); }
.verdict .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.verdict-hero {
  border-radius: 12px; padding: 1.4rem 1.6rem;
  border: 1px solid transparent;
}
.verdict-hero.spam { background: var(--spam-bg); border-color: #fecdca; }
.verdict-hero.legit { background: var(--legit-bg); border-color: #abefc6; }
.verdict-hero h2 { font-size: 1.6rem; font-weight: 680; margin: 0; }
.verdict-hero.spam h2 { color: var(--spam); }
.verdict-hero.legit h2 { color: var(--legit); }

/* --------------------------------------------------------- model panels */
.model-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); padding: 1.1rem 1.15rem; height: 100%;
  border-top: 3px solid var(--line);
}
.model-card.rf { border-top-color: var(--rf); }
.model-card.svm { border-top-color: var(--svm); }
.model-card.bert { border-top-color: var(--bert); }
.model-name { font-weight: 600; font-size: .95rem; margin-bottom: .1rem; }
.model-kind { font-size: .78rem; color: var(--muted); margin-bottom: .75rem; }

.meter { height: 7px; border-radius: 999px; background: #eef0f3; overflow: hidden; margin-top: .6rem; }
.meter > span { display: block; height: 100%; border-radius: 999px; }
.meter.rf > span { background: var(--rf); }
.meter.svm > span { background: var(--svm); }
.meter.bert > span { background: var(--bert); }
.meter-label { font-size: .78rem; color: var(--muted); margin-top: .35rem; }

.chip-rf { color: var(--rf); }
.chip-svm { color: var(--svm); }
.chip-bert { color: var(--bert); }

/* --------------------------------------------------------------- notices */
.notice {
  border-radius: 10px; padding: .8rem 1rem; font-size: .9rem;
  border: 1px solid transparent;
}
.notice-warn { background: var(--warn-bg); border-color: #fedf89; color: var(--warn); }
.notice-info { background: #eff8ff; border-color: #b2ddff; color: #175cd3; }

/* ---------------------------------------------------------------- tables */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
}
.table td { vertical-align: middle; font-size: .92rem; border-color: #eef0f3; }
.table-hover tbody tr:hover { background: #fafbfc; }
.mono { font-variant-numeric: tabular-nums; }

.subject-cell { font-weight: 550; }
.preview-cell { color: var(--muted); font-size: .85rem; }

/* ---------------------------------------------------------------- footer */
.app-footer {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 1.3rem 0;
  color: var(--muted);
  font-size: .9rem;
  margin-top: 2rem;
}

/* ------------------------------------------------------------------ misc */
.auth-wrap { max-width: 430px; margin: 3rem auto; }
.form-control:focus { border-color: var(--rf); box-shadow: 0 0 0 3px rgba(47, 92, 153, .12); }
.btn-primary { background: var(--rf); border-color: var(--rf); }
.btn-primary:hover, .btn-primary:focus { background: #274c80; border-color: #274c80; }
.email-body {
  white-space: pre-wrap; word-break: break-word;
  background: #fafbfc; border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem; font-size: .9rem; max-height: 460px; overflow-y: auto;
}
.example-btn { font-size: .82rem; text-align: left; }
.tt { font-size: .8rem; color: var(--muted); }