/* Perfect finmart — colours sampled in sRGB from the supplied, unaltered logo.
   Financial warning/success colours retain their semantic meaning. */
:root {
  --brand-indigo: #292d78;
  --brand-indigo-deep: #20235e;
  --brand-red: #d9232a;
  --brand-red-hover: #ba1720;
  --brand-wash: #f0f1fb;
  --brand-border: #d7daef;
  --ink: #242748;
  --muted: #646881;
  --line: #e0e2ed;
  --bg: #f7f8fc;
  --nav: var(--brand-indigo);
  --teal: var(--brand-indigo); /* Legacy component token; no teal brand accents. */
  --soft: var(--brand-wash);
  --red: #b71f2b;
  --blue: var(--brand-indigo);
  --shadow: 0 5px 22px #292d7808;
}

/* Identity: original image, original aspect ratio, no recolouring or redrawing. */
.brand {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 5px 7px 11px;
  margin: 0 0 23px;
  color: var(--brand-indigo);
  background: #fff;
  border-radius: 9px;
  border: 1px solid #ffffff80;
}
.brand-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.brand-caption { font-size: 9px; font-weight: 750; letter-spacing: 2px; margin-top: 1px; }
.sidebar { background: var(--brand-indigo); color: #e6e8ff; }
.sidebar .brand { margin: 0 0 16px; }
.nav-label { color: #c5c9ef; }
.nav-btn { color: #e6e8ff; border-left: 3px solid transparent; padding-left: 9px; }
.nav-btn:hover { background: #ffffff15; color: #fff; }
.nav-btn.active { background: #fff; color: var(--brand-indigo); border-left-color: var(--brand-red); font-weight: 650; }
.nav-num { background: #ffffff25; }
.sidebar-bottom { border-top-color: #ffffff30; }
.sidebar .avatar { background: #ffffff20; color: #fff; }
.sidebar .meta { color: #d0d4f5; }
.avatar { background: var(--brand-wash); color: var(--brand-indigo); }
.topbar { border-top: 3px solid var(--brand-red); }
.topbar .eyebrow { color: var(--brand-indigo); }
.topbar .status { color: var(--brand-indigo); background: var(--brand-wash); border-color: var(--brand-border); }

/* Primary action red, navigation and data emphasis indigo. */
.btn { background: var(--brand-red); border-color: var(--brand-red); }
.btn:hover:not(:disabled) { background: var(--brand-red-hover); border-color: var(--brand-red-hover); }
.btn.secondary { background: #fff; color: var(--brand-indigo); border-color: var(--brand-border); }
.btn.secondary:hover:not(:disabled) { background: var(--brand-wash); border-color: #a4a9d0; }
.btn.ghost { background: transparent; color: var(--muted); border-color: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--brand-wash); color: var(--brand-indigo); border-color: transparent; }
.btn.danger { background: #fff1f2; color: var(--red); border-color: #edc4c9; }
.btn.danger:hover:not(:disabled) { background: #ffe6e9; border-color: #d29ca4; }
.link-btn, a { color: var(--brand-indigo); }
.link-btn:hover, a:hover { text-decoration: underline; text-underline-offset: 3px; }
.positive { color: #107c60; }
.scope-bar { background: var(--brand-wash); border-color: var(--brand-border); border-left: 3px solid var(--brand-red); }
.scope-bar strong { color: var(--brand-indigo); }
.bucket:hover { border-color: #989ed0; }
.bucket.selected { border-color: var(--brand-indigo); background: var(--brand-wash); }
.bucket .bar { background: #e8eaf5; }
.bucket .bar i { background: var(--brand-indigo); }
.bucket .bucket-count { color: var(--brand-indigo); }
.metric:hover, .metric.active { background: var(--brand-wash); }
.metric-value { color: var(--brand-indigo); }
.panel-head { border-bottom-color: var(--line); }
th { color: #575d81; background: #f5f6fb; }
td { border-top-color: #eeeef5; }
tr:hover td { background: #fafaff; }
.pill { background: #eef0f8; color: #565c7d; }
.pill.Attention, .pill.blue { background: #eeeffb; color: var(--brand-indigo); }
.notice:not(.warn) { background: #f1f2fb; border-color: var(--brand-border); color: #454977; }
.ai-summary { background: var(--brand-wash); border-left-color: var(--brand-indigo); }
.advisor { background: var(--brand-indigo-deep); }
.advisor-head { border-bottom-color: #ffffff25; border-top: 3px solid var(--brand-red); }
.advisor-head .eyebrow { color: #e0e3ff; }
.advisor-head p, .advice p { color: #d5d9f4; }
.advice { border-bottom-color: #ffffff25; }
.advice .step { color: #ffb8bc; }
.advisor-foot { color: #c4caec; }
.cycle-day { background: var(--brand-wash); color: var(--brand-indigo); }
.cycle-bar { background: #eeeff7; }
.cycle-bar i { background: #737bba; }
.event { border-left-color: var(--brand-border); }
.event:before { background: var(--brand-indigo); }
.tabs .tab.active { color: var(--brand-indigo); border-bottom-color: var(--brand-red); }
.import-box { border-color: #b9bedf; background: #fafaff; }
#toast { background: var(--brand-indigo-deep); box-shadow: 0 8px 30px #292d7826; }
dialog { box-shadow: 0 24px 90px #20235e33; }
dialog::backdrop { background: #15173777; }

/* Admin MIS uses the same system; matrix better/worse/review states are unchanged. */
.cmp-kpi { border-top-color: var(--brand-red); }
.cmp-kpi > strong { color: var(--brand-indigo); }
.cmp-actions > button { background: var(--brand-wash); border-color: var(--brand-border); }
.cmp-actions strong, .cmp-control-grid strong { color: var(--brand-indigo); }
.cmp-control-grid > button:hover { background: var(--brand-wash); }
.cmp-cell:hover { outline-color: var(--brand-indigo); }
.cmp-bridge:last-of-type { border-top-color: var(--brand-indigo); }
.cmp-ai { border-color: var(--brand-border); }
.cmp-ai .panel-head, .cmp-evidence { background: var(--brand-wash); }
.cmp-ai .eyebrow { color: var(--brand-indigo); }
.cmp-evidence { border-left-color: var(--brand-red); }
.cmp-concentration { background: #fafaff; }

/* A branded, readable sign-in screen; no reliance on downloaded fonts. */
.login { background: #fff; }
.login-story { position: relative; background: linear-gradient(145deg, var(--brand-indigo-deep), var(--brand-indigo)); }
.login-story::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--brand-red); }
.login-story .brand { width: min(300px, 100%); margin-bottom: 48px; }
.login-story p { color: #d9ddf5; }
.login-line span { border-color: #a0a7d560; color: #eef0ff; }
.login-form h2 { color: var(--brand-indigo); }
.login-form .eyebrow { color: var(--brand-red); }
.field input, .field select, .field textarea { border-color: #cdd1e4; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #747ac2;
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .sidebar .brand { width: 170px; margin: 0 0 12px; padding: 2px 5px 7px; }
  .brand-caption { font-size: 8px; letter-spacing: 1.5px; }
  .sidebar .nav-btn { padding-right: 13px; }
}
@media (max-width: 600px) {
  .login-story .brand { width: 220px; margin-bottom: 24px; }
  .login-story { padding: 26px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
.case-segments { margin: 0 0 20px; }
.more-case-filters { margin-top: 10px; font-size: 13px; }
.more-case-filters summary { cursor: pointer; color: var(--brand-indigo); width: fit-content; padding: 4px 0; }
.more-case-filters .chips { margin-top: 10px; }
.work-instruction { margin: 16px 0; }
.work-instruction > div { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 12px; margin: 10px 0; }
.work-instruction dt { color: var(--brand-indigo); font-weight: 700; }
.work-instruction dd { margin: 0; line-height: 1.55; }