/*
 * fafo-skin.css — FAFO Tracker visual language, layered over the FAS app.
 *
 * Desk surfaces layered over the FAS app: square corners, no shadows, flat
 * navy primary buttons, burgundy danger, IBM Plex display, Pipeline layout.
 * It must NOT style the header/rail/topbar. Chrome lives in brand-chrome.css
 * (navy, 3px burgundy hairline, round eagle). Loads after brand-chrome.css.
 * Token source: fafo-tracker.vercel.app design tokens (2026-09-22).
 */

/* ---- Tokens: light ---- */
:root {
  --fas-navy: #16263f;
  --fas-navy-2: #1e334f;
  --fas-burgundy: #8a1f1f;
  /* PENDING Matt (2026-10-08): page background #ECF0F6 (disk kit) vs #F6F3EE (fas-brand).
     Value below is what is live today; change ONLY this line when Matt decides. */
  --fas-page-bg: #f6f8fb;

  --app-bg: var(--fas-page-bg);
  --app-surface: #ffffff;
  --app-surface-muted: #f1f5f9;
  --app-surface-strong: #e9eef5;
  --app-border: #d7dee8;
  --app-border-strong: #d7dee8;
  --app-text: #16263f;
  --app-muted: #4b5563;
  --app-muted-soft: #667085;

  --app-primary: #16263f;
  --app-primary-hover: #1e334f;
  --app-primary-soft: rgba(22, 38, 63, 0.08);

  --app-danger: #8a1f1f;
  --app-danger-soft: rgba(138, 31, 31, 0.08);
  --app-success: #047857;
  --app-success-soft: rgba(4, 120, 87, 0.10);
  --app-warning: #b45309;
  --app-warning-soft: rgba(180, 83, 9, 0.10);

  --app-focus: rgba(22, 38, 63, 0.22);
  --app-shadow: none;
  --app-shadow-soft: none;

  --app-radius: 0px;
  --app-radius-lg: 0px;

  --app-font-display: "IBM Plex Sans", Calibri, "Liberation Sans", ui-sans-serif, system-ui, sans-serif;
  --app-font-sans: "IBM Plex Sans", Calibri, "Liberation Sans", ui-sans-serif, system-ui, sans-serif;

  --fat-signal: #1a66d1;
}

/* ---- Tokens: dark ---- */
html.dark {
  --app-bg: #070b12;
  --app-surface: #0c121c;
  --app-surface-muted: #101826;
  --app-surface-strong: #121a28;
  --app-border: #2a3850;
  --app-border-strong: #2a3850;
  --app-text: #e6edf6;
  --app-muted: #9aa8bb;
  --app-muted-soft: #8593a8;

  --app-primary: #4c9aff;
  --app-primary-hover: #6eb0ff;
  --app-primary-soft: rgba(76, 154, 255, 0.12);

  --app-danger: #c45c5c;
  --app-danger-soft: rgba(196, 92, 92, 0.12);
  --app-success: #3d9a6a;
  --app-success-soft: rgba(61, 154, 106, 0.12);
  --app-warning: #c4a056;
  --app-warning-soft: rgba(196, 160, 86, 0.12);

  --app-focus: rgba(76, 154, 255, 0.22);
  --fat-signal: #4c9aff;
}

/* ---- Flatten: no radius, no shadow ---- */
.rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl,
a.rounded-full, button.rounded-full, input.rounded-full,
select.rounded-full, span.rounded-full[class*="px-"] {
  border-radius: 0 !important;
}
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none !important; }

/* ---- Surface hexes the base theme hardcoded ---- */
html:not(.dark) .bg-white { background-color: var(--app-surface) !important; }
html:not(.dark) .bg-gray-50, html:not(.dark) .bg-gray-100 { background-color: var(--app-surface-muted) !important; }

/* ---- Buttons: flat navy primary; danger stays FAS burgundy ---- */
button[class*="bg-blue-"], button[class*="bg-green-"], button[class*="bg-emerald-"],
button[class*="bg-gray-600"], button[class*="bg-gray-700"],
button[class*="bg-gray-800"], a[class*="bg-blue-"], a[class*="bg-green-"],
a[class*="bg-emerald-"], a[class*="bg-gray-600"],
a[class*="bg-gray-700"], a[class*="bg-gray-800"], .home-button {
  background: var(--app-primary) !important;
  border: 1px solid var(--app-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
button[class*="bg-blue-"]:hover, a[class*="bg-blue-"]:hover, .home-button:hover,
button[class*="bg-gray-700"]:hover, a[class*="bg-gray-700"]:hover {
  background: var(--app-primary-hover) !important;
}
button[class*="bg-red-"], a[class*="bg-red-"],
button.app-button--danger, a.app-button--danger,
html.dark button[class*="bg-red-"]:not(.app-button--danger),
html.dark a[class*="bg-red-"]:not(.app-button--danger),
html.dark button.app-button--danger, html.dark a.app-button--danger {
  background: var(--fas-burgundy) !important;
  border: 1px solid var(--fas-burgundy) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
button[class*="bg-red-"]:hover, a[class*="bg-red-"]:hover,
button.app-button--danger:hover, a.app-button--danger:hover,
html.dark button[class*="bg-red-"]:not(.app-button--danger):hover,
html.dark a[class*="bg-red-"]:not(.app-button--danger):hover,
html.dark button.app-button--danger:hover, html.dark a.app-button--danger:hover {
  background: var(--fas-burgundy) !important;
  border-color: var(--fas-burgundy) !important;
}
.home-button--secondary {
  background: transparent !important;
  border: 1px solid var(--app-border) !important;
  color: var(--app-text) !important;
}
.home-button--secondary:hover { background: var(--app-primary-soft) !important; color: var(--app-text) !important; }

/* ---- Links / kickers pick up the FAFO signal blue ---- */
html:not(.dark) a.call-link, html:not(.dark) .desk-empty a,
html:not(.dark) .app-search-hit:hover, .signal-link { color: var(--fat-signal) !important; }
.desk-kicker, .home-kicker, .calls-kicker { color: var(--app-muted-soft) !important; }

/* ---- Type: display face becomes IBM Plex Sans (no Archivo) ---- */
h1, h2, h3, h4, h5, h6,
.app-brand-name, .desk-headline, .home-shell h1,
.calls-title, .call-title, .claim-title, .team-title {
  font-family: var(--app-font-display) !important;
  letter-spacing: -0.01em;
}

/* ---- Streamlined nav: collapsible "More" group ---- */
.app-rail-more{ margin:0; display:block; }
.app-rail-more > summary.app-rail-more-summary{ list-style:none; cursor:pointer; }
.app-rail-more > summary.app-rail-more-summary::-webkit-details-marker{ display:none; }
.app-rail-more > summary.app-rail-more-summary::after{ content:""; width:8px; height:8px; margin-left:auto; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.55; transition:transform .15s ease; }
.app-rail-more[open] > summary.app-rail-more-summary::after{ transform:rotate(225deg); }
.app-rail-more .app-nav-link{ padding-left:1.5rem !important; }

/* Pipeline: movements first, using the shared FAFO surfaces and tokens. */
.pipeline-page { min-width: 0; color: var(--app-text); }
.app-main .pipeline-page h2, html.dark .app-main .pipeline-page h2 { font-size: 1.25rem; font-weight: 600; color: var(--app-text) !important; }
.pipeline-page { --app-action-fill: var(--fas-navy); --app-action-hover: var(--fas-navy-2); }
.pipeline-feed .app-grid-surface { display: block !important; }
.pipeline-feed { margin-bottom: 1.5rem; }
.pipeline-toolbar { align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding: 1.25rem; border-bottom: 1px solid var(--app-border); }
.pipeline-toolbar p, .pipeline-meta, .pipeline-movement time { color: var(--app-muted); font-size: .8125rem; }
.pipeline-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.pipeline-filters label { display: block; font-size: .8125rem; margin-bottom: .25rem; }
.pipeline-filters select { background: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border); padding: .5rem; max-width: 100%; }
.pipeline-page a:focus-visible, .pipeline-page button:focus-visible, .pipeline-page select:focus-visible { outline: 2px solid var(--fat-signal); outline-offset: 3px; }
.pipeline-movements { list-style: none; margin: 0; padding: 0; }
.pipeline-movement { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(7rem, .45fr); gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--app-border); overflow-wrap: anywhere; }
.pipeline-movement:last-child { border-bottom: 0; }
.pipeline-movement:hover { background: var(--app-surface-muted); }
.pipeline-movement p { margin: .2rem 0 0; }
.pipeline-page a { color: var(--fat-signal); }
.pipeline-page .app-grid-button { background: var(--app-primary); color: #fff; }
.pipeline-creditor { font-weight: 600; }
.pipeline-movement time { text-align: right; }
.pipeline-empty { padding: 1.25rem; color: var(--app-muted); }
.pipeline-pagination { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; padding: .75rem 1.25rem; border-top: 1px solid var(--app-border); font-size: .8125rem; }
.pipeline-pagination > div { display: flex; gap: .5rem; }
.pipeline-today { margin-bottom: 1.5rem; }
.pipeline-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0 0 .75rem; }
.pipeline-kpis > a, .pipeline-kpis > div { background: var(--app-surface); border: 1px solid var(--app-border); color: inherit; display: block; min-height: 44px; padding: 1rem; text-decoration: none; }
.pipeline-kpis > a:hover { border-color: var(--fas-burgundy, #6b1d2a); }
.pipeline-kpis b { color: var(--fas-navy, #16263f); display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.pipeline-kpis span { color: var(--app-muted); display: block; font-size: .75rem; font-weight: 600; letter-spacing: .04em; margin-top: .35rem; text-transform: uppercase; }
.pipeline-kpis small { color: var(--app-muted); display: block; font-size: .78rem; margin-top: .15rem; }
.pipeline-cta { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.25rem; }
.pipeline-cta .app-grid-button { min-height: 44px; }
#pipeline-focus { scroll-margin-top: 5rem; }
.pipeline-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin: .75rem 0; }
.pipeline-stats > div { background: var(--app-surface); border: 1px solid var(--app-border); padding: 1rem; }
.pipeline-stats dt { font-size: .75rem; }
.pipeline-stats dd { font-size: 1.75rem; font-weight: 600; margin: .25rem 0 0; }
.pipeline-page table { table-layout: fixed; }
.pipeline-page th, .pipeline-page td { padding: .75rem; overflow-wrap: anywhere; white-space: normal; }
.pipeline-page .rounded-full { border-radius: 0; }
#stage-claims { scroll-margin-top: 5rem; }
@media (max-width: 1023px) {
  .pipeline-page td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 10rem; font-weight: 400; color: var(--app-muted); }
  .pipeline-page th, .pipeline-page td { width: 100%; }
}
@media (max-width: 640px) {
  .pipeline-movement, .pipeline-stats, .pipeline-kpis { grid-template-columns: minmax(0, 1fr); }
  .pipeline-movement { gap: .5rem; }
  .pipeline-movement time { text-align: left; }
  .pipeline-filters, .pipeline-filters > div, .pipeline-filters select { width: 100%; }
  .pipeline-page th, .pipeline-page td { padding: .4rem .2rem; font-size: .75rem; }
  .pipeline-page .p-6 { padding: .75rem; }
}