/* CIAR 2026 brand system — Complaint Agent */
@font-face { font-family: "Butler"; src: url("/fonts/butler-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Butler"; src: url("/fonts/butler-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("/fonts/raleway-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("/fonts/raleway-semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("/fonts/raleway-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --gold: #e4bf80;
  --night: #171b20;
  --slate: #1b3344;
  --slate-deep: #152630;
  --white: #fff;
  --grey: #c4cfda;
  --grey-dim: #91a1af;
  --line: rgba(228, 191, 128, .28);
  --line-soft: rgba(196, 207, 218, .14);
  --surface: rgba(23, 27, 32, .78);
  --surface-soft: rgba(255, 255, 255, .055);
  --ink: var(--white);
  --muted: var(--grey);
  --paper: var(--night);
  --orange: var(--gold);
  --blue: #90b7d0;
  --green: #7fc5ad;
  --red: #f09a96;
  --mint: rgba(127, 197, 173, .12);
  --dark: var(--night);
  --shadow: 0 22px 60px rgba(0, 0, 0, .24);
}

* { scrollbar-color: rgba(228, 191, 128, .55) rgba(255, 255, 255, .04); }
body {
  color: var(--white);
  background: linear-gradient(135deg, var(--night) 0%, var(--slate) 100%);
  font-family: "Raleway", Arial, Helvetica, sans-serif;
}
button, textarea, input, select { border-radius: 0; font: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible,
a:focus-visible, label:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, .metric strong { font-family: "Butler", Georgia, serif; }
h3, h4, strong, button, label { font-family: "Raleway", Arial, sans-serif; }
p, li, td, th, input, textarea, select { letter-spacing: .005em; }
.hidden { display: none !important; }
.muted, .small, .privacy-note, .panel-head span, .assistant-message p,
.history-subject, .task-card p, .case-card p { color: var(--grey); }
.small, .privacy-note, .panel-head span, .intake-meta { font-size: 12px; }

.brand-logo { display: block; width: 104px; height: 54px; object-fit: contain; }
.public-brand, .app-brand, .brand-lockup { display: flex; align-items: center; gap: 14px; }
.public-brand strong, .app-brand strong {
  color: var(--white); font-size: 15px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}

.login-shell {
  display: block; min-height: 100vh; padding: 34px 38px;
  background: radial-gradient(circle at 78% 18%, rgba(228, 191, 128, .10), transparent 34%),
    linear-gradient(135deg, var(--night) 0%, var(--slate) 100%);
  border-top: 2px solid var(--gold);
}
.login-page { width: min(1180px, 100%); min-height: calc(100vh - 70px); margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto; }
.public-brand { justify-content: space-between; padding-bottom: 40px; }
.theme-toggle {
  width: 42px; min-height: 42px; padding: 9px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .045); color: var(--grey);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); background: rgba(228, 191, 128, .08); }
.theme-toggle-icon { width: 18px; color: var(--gold); font-size: 19px; line-height: 1; text-align: center; }
.sidebar-foot .theme-toggle { margin-bottom: 18px; }
.login-card {
  position: relative; align-self: center; width: min(760px, 100%); margin: 20px auto 70px;
  padding: 54px 52px 50px; overflow: hidden; border: 1px solid var(--line); border-radius: 2px;
  background: rgba(23, 27, 32, .72); color: var(--white); box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.login-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--gold); }
.eyebrow { margin: 0; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.login-card h1 {
  max-width: 650px; margin: 22px 0 14px; color: var(--white); font-size: clamp(46px, 6vw, 72px);
  font-weight: 400; line-height: .96; letter-spacing: -.025em;
}
.login-intro { max-width: 590px; margin: 0; color: var(--grey); font-size: 17px; line-height: 1.65; }
.login-action {
  min-height: 58px; margin-top: 76px; padding: 10px 12px; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; background: var(--white); border-left: 4px solid var(--gold);
}
.login-action .primary { width: 100%; justify-content: space-between; }
.login-card .error { margin: 14px 0 0; color: #ffc0bd; }
.public-footer {
  padding: 26px 0 10px; border-top: 1px solid var(--line); display: flex; justify-content: space-between;
  gap: 24px; color: var(--grey); font-size: 12px;
}

.app {
  grid-template-columns: 260px 1fr;
  background: radial-gradient(circle at 88% 4%, rgba(228, 191, 128, .07), transparent 28%),
    linear-gradient(135deg, var(--night), var(--slate));
}
.sidebar {
  background: rgba(18, 24, 29, .9); padding: 30px 20px;
  border-right: 1px solid var(--line); backdrop-filter: blur(18px);
}
.app-brand { margin: 0 8px 42px; }
.app-brand .brand-logo { width: 86px; height: 44px; }
.app-brand strong { font-size: 12px; }
.sidebar nav { gap: 5px; }
.nav-item {
  min-height: 52px; padding: 14px 12px; border: 1px solid transparent; border-radius: 0;
  color: var(--grey); font-size: 14px; font-weight: 600;
}
.nav-item:hover { color: var(--white); border-color: var(--line-soft); background: var(--surface-soft); }
.nav-item.active {
  padding-left: 9px; color: var(--white);
  background: linear-gradient(90deg, rgba(228, 191, 128, .14), rgba(228, 191, 128, .025));
  border-color: var(--line-soft); border-left: 3px solid var(--gold);
}
.nav-item span, .nav-item.active span { color: var(--gold); }
.sidebar-foot { border-top-color: var(--line); color: var(--grey); }
.user-chip > span { border-radius: 0; background: var(--gold); color: var(--night); }
.user-chip strong { color: var(--white); }
.user-chip small, .text-button { color: var(--grey); }
.text-button:hover { color: var(--gold); }

main { background: transparent; }
.view { color: var(--white); }
.topbar {
  min-height: 112px; padding: 28px 44px 24px; background: rgba(23, 27, 32, .7);
  border-top: 2px solid var(--gold); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px);
}
.topbar h2 {
  margin-top: 7px; color: var(--white); font-size: clamp(32px, 3vw, 46px);
  font-weight: 400; letter-spacing: -.02em;
}
.status-pill, .severity, .task-state, .case-state, .employment-status,
.intake-count, .nav-badge { border-radius: 0; }
.status-pill { background: rgba(228, 191, 128, .12); color: var(--gold); border-color: var(--gold); }

.conversation, .composer-wrap { width: min(1040px, calc(100% - 64px)); }
.conversation { padding-top: 34px; }
.assistant-message {
  max-width: none; padding: 22px; border: 1px solid var(--line);
  background: rgba(27, 51, 68, .58);
}
.spark { border-radius: 0; background: var(--gold); color: var(--night); }
.assistant-message strong { color: var(--white); }
.assistant-message p { line-height: 1.65; }

.composer, .analysis-card, .panel, .metric, .history-list, .file-chip,
.intake-panel, .intake-card, .case-card, .task-card, .task-summary > div,
.empty-tasks, .weekly-case, .duplicate-item, .response-status, .duplicate-warning {
  border-radius: 0; border-color: var(--line); background: var(--surface); color: var(--white);
  box-shadow: none; backdrop-filter: blur(12px);
}
.composer { box-shadow: var(--shadow); }
.composer textarea, .search, .task-controls select, .task-controls input,
.intake-actions select, .case-search {
  background: rgba(255, 255, 255, .07); border-color: var(--line); color: var(--white);
}
textarea::placeholder, input::placeholder { color: var(--grey-dim); opacity: 1; }
select option { background: var(--slate-deep); color: var(--white); }
.composer-actions, .history-row, .panel-head, .intake-card + .intake-card { border-color: var(--line-soft); }
.attach { color: var(--grey); }
.attach:hover { color: var(--gold); }

.primary, .secondary {
  min-height: 42px; border-radius: 0; display: inline-flex; align-items: center; gap: 16px; font-weight: 700;
}
.primary { background: var(--gold); color: var(--night); border-color: var(--gold); }
.primary:hover { background: #f1d09a; color: var(--night); }
.primary:disabled { background: rgba(228, 191, 128, .32); color: var(--grey); }
.secondary { background: transparent; border-color: var(--gold); color: var(--white); }
.secondary:hover { background: rgba(228, 191, 128, .10); color: var(--gold); }

.analysis-card { padding: 24px; }
.analysis-card h3, .panel-head h3, .intake-head h3, .task-card h4, .case-card h4 { color: var(--white); }
.analysis-card p, .analysis-card li, .panel p, .panel li, .intake-card p,
.case-card p, .task-card p { color: var(--grey); line-height: 1.55; }
.draft-box {
  border-radius: 0; background: rgba(255, 255, 255, .055);
  border-left: 3px solid var(--gold); color: var(--white);
}
.severity.high { background: rgba(240, 154, 150, .16); color: #ffc0bd; }
.severity.medium { background: rgba(228, 191, 128, .16); color: var(--gold); }
.severity.low { background: rgba(127, 197, 173, .14); color: #a8ddca; }
.qa-banner { background: rgba(144, 183, 208, .12); border-color: #90b7d0; color: var(--white); }

.report-body, .history-wrap { padding: 32px 44px 54px; }
.metric, .panel { padding: 22px; }
.metric strong { color: var(--gold); font-size: 34px; font-weight: 400; }
.metric span, .panel-head span { color: var(--grey); }
.panel-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bar { border-radius: 0; background: rgba(255, 255, 255, .08); }
.bar i { border-radius: 0; background: var(--gold); }
.finding { border-left-color: var(--gold); }
.signal, .history-list, .history-row { border-color: var(--line); }
.signal { border-radius: 0; background: rgba(255, 255, 255, .035); }
.filter-group { border-radius: 0; background: rgba(255, 255, 255, .07); }
.task-filter, .case-filter { border-radius: 0; color: var(--grey); }
.task-filter.active, .case-filter.active { background: var(--gold); color: var(--night); box-shadow: none; }
.task-card, .case-card, .intake-card { border-left-color: var(--gold); }
.intake-panel { border-color: var(--line); }
.intake-count, .nav-badge { background: var(--gold); color: var(--night); }
.live-report-panel { border-top-color: var(--gold); }
.toast { border-radius: 0; background: var(--gold); color: var(--night); }
.task-card.overdue { border-left-color: var(--red); }
.task-state.overdue { background: rgba(240, 154, 150, .16); color: #ffc0bd; }
.task-state.upcoming, .case-state.open { background: rgba(144, 183, 208, .14); color: #b9d9eb; }
.task-state.completed, .case-state.closed { background: rgba(127, 197, 173, .14); color: #a8ddca; }
.case-state.qa { background: rgba(169, 152, 218, .16); color: #d6c9f2; }
.history-row:hover, .intake-card:hover, .case-card:hover { background: rgba(255, 255, 255, .075); }
canvas { filter: saturate(.78) brightness(1.15); }

/* Light mode keeps the dark gradient as a brand anchor in the navigation, while
   shifting the working area to a brighter, low-glare operational canvas. */
html[data-theme="light"] body {
  color: var(--night);
  background: linear-gradient(135deg, #ffffff 0%, #eef3f6 58%, #e3ebf0 100%);
}
html[data-theme="light"] .login-shell {
  background: radial-gradient(circle at 78% 18%, rgba(228, 191, 128, .18), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #eef3f6 100%);
}
html[data-theme="light"] .public-brand strong,
html[data-theme="light"] .public-footer { color: #536575; }
html[data-theme="light"] .public-brand .theme-toggle {
  background: rgba(255, 255, 255, .82); border-color: rgba(27, 51, 68, .22); color: var(--night);
}
html[data-theme="light"] .login-card {
  background: rgba(255, 255, 255, .94); color: var(--night); border-color: rgba(27, 51, 68, .18);
  box-shadow: 0 22px 60px rgba(23, 27, 32, .12);
}
html[data-theme="light"] .login-card h1 { color: var(--night); }
html[data-theme="light"] .login-intro { color: #536575; }
html[data-theme="light"] .public-footer { border-top-color: rgba(27, 51, 68, .18); }
html[data-theme="light"] .app {
  background: radial-gradient(circle at 88% 4%, rgba(228, 191, 128, .15), transparent 28%),
    linear-gradient(135deg, #ffffff, #e7eef2);
}
html[data-theme="light"] main { color: var(--night); }
html[data-theme="light"] .view { color: var(--night); }
html[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, .88); border-bottom-color: rgba(27, 51, 68, .18);
  box-shadow: 0 8px 28px rgba(23, 27, 32, .05);
}
html[data-theme="light"] .topbar h2 { color: var(--night); }
html[data-theme="light"] .status-pill { background: rgba(228, 191, 128, .22); color: #76551d; }
html[data-theme="light"] .assistant-message {
  background: rgba(220, 230, 236, .82); border-color: rgba(27, 51, 68, .18);
}
html[data-theme="light"] .assistant-message strong,
html[data-theme="light"] .analysis-card h3,
html[data-theme="light"] .panel-head h3,
html[data-theme="light"] .intake-head h3,
html[data-theme="light"] .task-card h4,
html[data-theme="light"] .case-card h4 { color: var(--night); }
html[data-theme="light"] .muted,
html[data-theme="light"] .small,
html[data-theme="light"] .privacy-note,
html[data-theme="light"] .panel-head span,
html[data-theme="light"] .assistant-message p,
html[data-theme="light"] .history-subject,
html[data-theme="light"] .task-card p,
html[data-theme="light"] .case-card p,
html[data-theme="light"] .analysis-card p,
html[data-theme="light"] .analysis-card li,
html[data-theme="light"] .panel p,
html[data-theme="light"] .panel li,
html[data-theme="light"] .intake-card p { color: #536575; }
html[data-theme="light"] .composer,
html[data-theme="light"] .analysis-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .metric,
html[data-theme="light"] .history-list,
html[data-theme="light"] .file-chip,
html[data-theme="light"] .intake-panel,
html[data-theme="light"] .intake-card,
html[data-theme="light"] .case-card,
html[data-theme="light"] .task-card,
html[data-theme="light"] .task-summary > div,
html[data-theme="light"] .empty-tasks,
html[data-theme="light"] .weekly-case,
html[data-theme="light"] .duplicate-item,
html[data-theme="light"] .response-status,
html[data-theme="light"] .duplicate-warning {
  background: rgba(255, 255, 255, .92); color: var(--night); border-color: rgba(27, 51, 68, .18);
  box-shadow: 0 12px 34px rgba(23, 27, 32, .07);
}
html[data-theme="light"] .composer textarea,
html[data-theme="light"] .search,
html[data-theme="light"] .task-controls select,
html[data-theme="light"] .task-controls input,
html[data-theme="light"] .intake-actions select,
html[data-theme="light"] .case-search {
  background: #fff; border-color: rgba(27, 51, 68, .24); color: var(--night);
}
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] input::placeholder { color: #6b7d8b; }
html[data-theme="light"] select option { background: #fff; color: var(--night); }
html[data-theme="light"] .composer-actions,
html[data-theme="light"] .history-row,
html[data-theme="light"] .panel-head,
html[data-theme="light"] .intake-card + .intake-card { border-color: rgba(27, 51, 68, .13); }
html[data-theme="light"] .attach { color: #536575; }
html[data-theme="light"] .secondary { color: var(--night); }
html[data-theme="light"] .draft-box { background: #f1f5f7; color: var(--night); }
html[data-theme="light"] .qa-banner { background: rgba(144, 183, 208, .16); color: var(--night); }
html[data-theme="light"] .metric span,
html[data-theme="light"] .panel-head span { color: #536575; }
html[data-theme="light"] .bar { background: rgba(27, 51, 68, .09); }
html[data-theme="light"] .signal { background: rgba(27, 51, 68, .045); border-color: rgba(27, 51, 68, .16); }
html[data-theme="light"] .filter-group { background: rgba(27, 51, 68, .07); }
html[data-theme="light"] .task-filter,
html[data-theme="light"] .case-filter { color: #536575; }
html[data-theme="light"] .history-row:hover,
html[data-theme="light"] .intake-card:hover,
html[data-theme="light"] .case-card:hover { background: #f4f7f9; }
html[data-theme="light"] .task-state.overdue { color: #9a3733; }
html[data-theme="light"] .task-state.upcoming,
html[data-theme="light"] .case-state.open { color: #315f78; }
html[data-theme="light"] .task-state.completed,
html[data-theme="light"] .case-state.closed { color: #27634f; }
html[data-theme="light"] .case-state.qa { color: #59478c; }
html[data-theme="light"] canvas { filter: saturate(.9); }

@media (max-width: 900px) {
  .app { grid-template-columns: 92px 1fr; }
  .app-brand { justify-content: center; margin-left: 0; margin-right: 0; }
  .app-brand strong { display: none; }
  .app-brand .brand-logo { width: 62px; height: 36px; }
  .sidebar-foot .theme-toggle { margin-left: auto; margin-right: auto; }
  .topbar, .report-body, .history-wrap { padding-left: 26px; padding-right: 26px; }
}
@media (max-width: 620px) {
  .login-shell { padding: 20px; }
  .login-page { min-height: calc(100vh - 42px); }
  .public-brand { padding-bottom: 20px; }
  .public-brand .brand-logo { width: 88px; height: 46px; }
  .login-card { margin: 10px 0 34px; padding: 38px 26px 30px; }
  .login-card h1 { font-size: 44px; }
  .login-intro { font-size: 15px; }
  .login-action { margin-top: 44px; align-items: stretch; flex-direction: column; }
  .public-footer { align-items: flex-start; flex-direction: column; }
  .sidebar { background: rgba(18, 24, 29, .97); border-top: 1px solid var(--line); }
  .conversation, .composer-wrap { width: calc(100% - 28px); }
  .topbar { min-height: 94px; }
  .topbar h2 { font-size: 32px; }
}