/* ==========================================================================
   CALIBRE suite: Fluent 2 theme layer (shared by ARA, Secure-RAG, CALIBRE
   Governance Fabric, CALIBRE-FATHOM and CALIBRE on Hugging Face).

   Loaded AFTER the app's own CSS. Changes appearance only: no markup,
   routes, forms or scripts depend on it. Remove the <link> to roll back.

   Token values are copied from Microsoft's @fluentui/tokens package
   (webLightTheme, npm 1.0.0-alpha.24). Icons in fluent-icons.css come from
   @fluentui/svg-icons 1.1.344 (MIT licence). This is a Fluent-style theme,
   not an official Microsoft product, and uses no Microsoft logos.
   ========================================================================== */

:root {
  /* Fluent 2 webLightTheme tokens */
  --f-brand: #0f6cbd;               /* colorBrandBackground */
  --f-brand-hover: #115ea3;         /* colorBrandBackgroundHover */
  --f-brand-pressed: #0c3b5e;       /* colorBrandBackgroundPressed */
  --f-brand-selected: #0f548c;      /* colorBrandBackgroundSelected */
  --f-brand-bg2: #ebf3fc;           /* colorBrandBackground2 */
  --f-link: #115ea3;                /* colorBrandForegroundLink */
  --f-bg1: #ffffff;                 /* colorNeutralBackground1 */
  --f-bg2: #fafafa;                 /* colorNeutralBackground2 */
  --f-bg3: #f5f5f5;                 /* colorNeutralBackground3 */
  --f-bg4: #f0f0f0;                 /* colorNeutralBackground4 */
  --f-bg5: #ebebeb;                 /* colorNeutralBackground5 */
  --f-fg1: #242424;                 /* colorNeutralForeground1 */
  --f-fg2: #424242;                 /* colorNeutralForeground2 */
  --f-fg3: #616161;                 /* colorNeutralForeground3 */
  --f-fg4: #707070;                 /* colorNeutralForeground4 */
  --f-stroke1: #d1d1d1;             /* colorNeutralStroke1 */
  --f-stroke2: #e0e0e0;             /* colorNeutralStroke2 */
  --f-stroke3: #f0f0f0;             /* colorNeutralStroke3 */
  --f-stroke-acc: #616161;          /* colorNeutralStrokeAccessible */
  --f-success: #107c10;  --f-success-fg: #0e700e; --f-success-bg: #f1faf1; --f-success-bd: #9fd89f;
  --f-warn: #da3b01;     --f-warn-fg: #bc4b09;    --f-warn-bg: #fff9f5;    --f-warn-bd: #fdcfb4;
  --f-caution: #eaa300;  --f-caution-fg: #835b00; --f-caution-bg: #fefbf4; --f-caution-bd: #f9e2ae;
  --f-danger: #d13438;   --f-danger-fg: #b10e1c;  --f-danger-bg: #fdf3f4;  --f-danger-bd: #f1bbbc;
  --f-font: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --f-mono: Consolas, 'Courier New', Courier, monospace;
  --f-r-m: 4px; --f-r-l: 6px; --f-r-xl: 8px;
  --f-shadow2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --f-shadow4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
  --f-shadow8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
  --f-ease: cubic-bezier(0.33,0,0.67,1);
  --f-header-h: 48px;

  /* Re-point the apps' existing variables to Fluent values */
  --blue: var(--f-brand);
  --dark: var(--f-fg1);
  --bg: var(--f-bg3);
  --card: var(--f-bg1);
  --line: var(--f-stroke2);
  --muted: var(--f-fg3);
  --ink: var(--f-fg1);
  --ink-soft: var(--f-fg2);
  --highlight: var(--f-bg2);
  --sev-low: var(--f-success);
  --sev-medium: var(--f-caution);
  --sev-high: var(--f-warn);
  --sev-critical: var(--f-danger);
}

/* ---------- Typography (Fluent type ramp: 12/16, 14/20, 16/22, 20/28, 24/32) */
* { font-family: var(--f-font); }
html, body { background: var(--f-bg3); color: var(--f-fg1); font-size: 14px; line-height: 20px;
  -webkit-font-smoothing: antialiased; }
code, pre, kbd, .mono, .recent .id { font-family: var(--f-mono) !important; }
a { color: var(--f-link); }
a:hover { color: var(--f-brand-pressed); }
:focus-visible { outline: 2px solid #000; outline-offset: 1px; border-radius: var(--f-r-m); }

/* ---------- App header (Microsoft 365 style suite bar) */
header.topbar {
  background: var(--f-brand); color: #fff; min-height: var(--f-header-h);
  padding: 0 16px 0 12px; align-items: center; gap: 16px; box-shadow: none;
  position: sticky; top: 0; z-index: 20;
}
header.topbar > div:first-of-type, header.topbar > .brand { display: flex; align-items: center; gap: 0; min-width: 0; }
header.topbar h1 { font-size: 16px; line-height: 22px; font-weight: 600; display: flex; align-items: center; white-space: nowrap; }
header.topbar h1 + p { margin: 0 0 0 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.4);
  font-size: 13px; line-height: 18px; opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.topbar .meta { font-size: 12px; line-height: 16px; opacity: 1; padding: 6px 0; }
header.topbar .meta span { opacity: 0.85 !important; }
header.topbar a { color: #fff; }
.logo { width: 20px !important; height: 20px !important; margin-right: 12px !important; border-radius: 0 !important;
  background: #fff !important; -webkit-mask: var(--f-icon-waffle) center / 20px no-repeat; mask: var(--f-icon-waffle) center / 20px no-repeat; }

/* ---------- Navigation pane (Windows NavigationView, left mode) */
.shell { min-height: calc(100vh - var(--f-header-h)); }
nav.leftnav {
  width: 260px; background: var(--f-bg2); border-right: 1px solid var(--f-stroke2); padding: 8px 4px;
  position: sticky; top: var(--f-header-h); align-self: flex-start; height: calc(100vh - var(--f-header-h)); overflow-y: auto;
}
nav.leftnav .lbl { text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 16px; font-weight: 600;
  color: var(--f-fg3); padding: 14px 12px 4px; }
nav.leftnav a {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 36px; margin: 2px 0;
  padding: 6px 12px; border: 0 !important; border-radius: var(--f-r-m); font-size: 14px; line-height: 20px;
  color: var(--f-fg2); transition: background 0.1s var(--f-ease);
}
nav.leftnav a:hover { background: var(--f-bg5); color: var(--f-fg1); text-decoration: none; }
nav.leftnav a:active { background: var(--f-bg4); }
nav.leftnav a.active { background: var(--f-bg5); color: var(--f-fg1); font-weight: 600; }
nav.leftnav a.active::after {   /* Windows 11 selection pill */
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px;
  border-radius: 2px; background: var(--f-brand);
}
nav.leftnav > a::before {
  content: ""; flex: 0 0 20px; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ico) center / 20px no-repeat; mask: var(--ico) center / 20px no-repeat;
}
nav.leftnav > a.active::before { background: var(--f-brand); }
nav.leftnav hr { border-top-color: var(--f-stroke2); margin: 8px 8px; }
.leftnav .footer-apps { border-top: 1px solid var(--f-stroke2) !important; margin: 12px 8px 0 !important; padding: 12px 4px !important;
  font-size: 12px !important; line-height: 22px !important; color: var(--f-fg3) !important; }
.leftnav .footer-apps b { font-weight: 600; color: var(--f-fg3); }
.leftnav .footer-apps a { display: inline !important; min-height: 0; padding: 0 !important; margin: 0; color: var(--f-link) !important;
  font-size: 12px !important; background: none !important; }
.leftnav .footer-apps a:hover { text-decoration: underline; }

/* ---------- Content canvas */
main { padding: 20px 32px 32px; background: var(--f-bg3); }
h2.page { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--f-fg1); margin: 4px 0 4px; }
.lead { font-size: 14px; line-height: 20px; color: var(--f-fg2); }

/* ---------- Cards (Fluent Card: white surface, shadow4, 8px radius) */
.card, .usecase, .finding, .kpi {
  background: var(--f-bg1); border: 1px solid transparent; border-radius: var(--f-r-xl); box-shadow: var(--f-shadow4);
}
.card { padding: 16px 20px; margin: 12px 0; }
.card h2 { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--f-fg1); margin: 0 0 8px; }
.card h3 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--f-fg1); }
.kpi { padding: 12px 16px; text-align: left; }
.kpi .num { font-size: 28px; line-height: 36px; font-weight: 600; color: var(--f-fg1); }
.kpi .lbl { font-size: 12px; line-height: 16px; color: var(--f-fg3); margin-top: 2px; }
.usecase .title, .finding h4, .alt h4 { color: var(--f-fg1); font-weight: 600; }
.alt { background: var(--f-bg2); border-color: var(--f-stroke2); border-radius: var(--f-r-xl); }

/* ---------- Buttons (Fluent Button: 32px, 4px radius, semibold 14px) */
.btn, button.btn, input[type=submit].btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 5px 12px; border-radius: var(--f-r-m); border: 1px solid transparent;
  background: var(--f-brand); color: #fff !important; font-size: 14px; line-height: 20px; font-weight: 600;
  box-shadow: none; filter: none; transition: background 0.1s var(--f-ease); text-decoration: none;
}
.btn:hover { background: var(--f-brand-hover); filter: none; text-decoration: none; }
.btn:active { background: var(--f-brand-pressed); }
.btn.ghost, .btn.secondary {
  background: var(--f-bg1); color: var(--f-fg1) !important; border: 1px solid var(--f-stroke1);
}
.btn.ghost:hover, .btn.secondary:hover { background: var(--f-bg1); border-color: #c7c7c7; color: var(--f-fg1) !important; filter: none;
  box-shadow: inset 0 0 0 9999px var(--f-bg3); }
.btn.ghost:active, .btn.secondary:active { box-shadow: inset 0 0 0 9999px var(--f-bg5); }
.btn.danger { background: var(--f-danger); }
.btn.danger:hover { background: #bc2f32; }
.btn[disabled], button[disabled], .btn.disabled {
  background: var(--f-bg4) !important; color: #bdbdbd !important; border-color: var(--f-stroke2) !important;
  opacity: 1; filter: none; cursor: not-allowed;
}
button:not(.btn), input[type=submit]:not(.btn), input[type=button]:not(.btn) {
  font-family: var(--f-font); font-size: 14px; min-height: 32px; padding: 5px 12px; border-radius: var(--f-r-m);
  border: 1px solid var(--f-stroke1); background: var(--f-bg1); color: var(--f-fg1); font-weight: 600; cursor: pointer;
}
button:not(.btn):hover, input[type=submit]:not(.btn):hover { background: var(--f-bg3); }

/* ---------- Form controls (Fluent Input: accessible bottom stroke, brand focus underline) */
label { font-size: 14px; line-height: 20px; color: var(--f-fg1); font-weight: 400; margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=number], input[type=password], input[type=url], input[type=date],
input[type=search], input:not([type]), textarea, select {
  font-family: var(--f-font); font-size: 14px; line-height: 20px; color: var(--f-fg1); background: var(--f-bg1);
  border: 1px solid var(--f-stroke1); border-bottom-color: var(--f-stroke-acc); border-radius: var(--f-r-m);
  padding: 5px 10px; min-height: 32px; outline: none; transition: border-color 0.1s var(--f-ease), box-shadow 0.1s var(--f-ease);
}
input:hover, textarea:hover, select:hover { border-color: #c7c7c7; border-bottom-color: #575757; }
input:focus, textarea:focus, select:focus { border-bottom-color: var(--f-brand); box-shadow: inset 0 -1px 0 0 var(--f-brand); }
input[type=checkbox], input[type=radio] { accent-color: var(--f-brand); width: 16px; height: 16px; vertical-align: -3px; }
input[type=file] { font-family: var(--f-font); font-size: 14px; }
input[type=file]::file-selector-button { font-family: var(--f-font); font-weight: 600; font-size: 14px; margin-right: 10px;
  min-height: 32px; padding: 5px 12px; border-radius: var(--f-r-m); border: 1px solid var(--f-stroke1); background: var(--f-bg1); color: var(--f-fg1); cursor: pointer; }
textarea { padding: 8px 10px; }

/* ---------- Tables (Fluent DataGrid: horizontal rules only) */
table { font-size: 14px; line-height: 20px; background: var(--f-bg1); border-collapse: collapse; }
th, td { border: 0; border-bottom: 1px solid var(--f-stroke2); padding: 8px 12px; }
thead th, tr > th:first-child:only-child { background: var(--f-bg1); }
th { background: var(--f-bg1); color: var(--f-fg1); font-weight: 600; }
thead th { border-bottom: 1px solid var(--f-stroke1); }
tbody th { font-weight: 600; color: var(--f-fg2); }
tbody tr:hover { background: var(--f-bg3); }
.card table { box-shadow: none; }
main > table, main > div > table { border-radius: var(--f-r-xl); box-shadow: var(--f-shadow4); overflow: hidden; }

/* ---------- Badges (Fluent Badge: filled, circular) and tags */
.badge { border-radius: 9999px; padding: 2px 8px; font-size: 12px; line-height: 16px; font-weight: 600; }
.badge.Medium, .badge.Moderate, .badge.potentially_applicable, .badge.Partially,
.badge.status-running, .badge.status-understanding, .badge.status-queued, .badge.status-red_team { background: var(--f-caution); color: #242424; }
.badge.Inherent, .badge.neutral, .badge.not_enough_information, .badge.NA { background: var(--f-fg3); }
.pill, .conf, .st { border-radius: 9999px; }
.pill { background: var(--f-bg1); border-color: var(--f-stroke1); color: var(--f-fg2); font-size: 12px; line-height: 16px; padding: 2px 8px; }

/* ---------- Message bars (Fluent MessageBar) */
.banner { position: relative; border-radius: var(--f-r-m); padding: 8px 12px 8px 40px; font-size: 14px; line-height: 20px;
  margin: 0 0 12px; border: 1px solid; }
.banner::before { content: ""; position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--f-icon-info) center / 16px no-repeat; mask: var(--f-icon-info) center / 16px no-repeat; }
.banner b { font-weight: 600; }
.banner.warn { background: var(--f-warn-bg); border-color: var(--f-warn-bd); color: var(--f-fg1); }
.banner.warn::before { background: var(--f-warn-fg); -webkit-mask-image: var(--f-icon-warning); mask-image: var(--f-icon-warning); }
.banner.err { background: var(--f-danger-bg); border-color: var(--f-danger-bd); color: var(--f-fg1); }
.banner.err::before { background: var(--f-danger-fg); -webkit-mask-image: var(--f-icon-error); mask-image: var(--f-icon-error); }
.banner.ok { background: var(--f-success-bg); border-color: var(--f-success-bd); color: var(--f-fg1); }
.banner.ok::before { background: var(--f-success-fg); -webkit-mask-image: var(--f-icon-success); mask-image: var(--f-icon-success); }
.banner.info, .banner:not(.warn):not(.err):not(.ok) { background: var(--f-bg1); border-color: var(--f-stroke2); }
.help { background: var(--f-brand-bg2); border-left: 3px solid var(--f-brand); border-radius: var(--f-r-m); color: var(--f-fg1); }

/* ---------- Decision banner and status colours */
.decision-banner { border-radius: var(--f-r-xl); box-shadow: var(--f-shadow4); }
.decision-banner .label { letter-spacing: 0; font-size: 12px; font-weight: 600; opacity: 0.95; }
.decision-banner .verdict { font-size: 24px; line-height: 32px; font-weight: 600; }
.decision-banner.APPROVE_WITH_CONDITIONS { background: #0e700e; }
.decision-banner.REQUIRES_REMEDIATION { background: var(--f-caution); color: #242424; }
.decision-banner.PENDING { background: var(--f-fg3); }
.heat td.cell { border-radius: var(--f-r-m); }
.heat td.cell.Low { background: #359b35; } .heat td.cell.Medium { background: var(--f-caution); color: #242424; }
.heat td.cell.High { background: var(--f-warn); } .heat td.cell.Critical { background: var(--f-danger); }
.st-in_scope, .st-not_found, .st-High, .st-Critical { background: var(--f-danger-bg); color: var(--f-danger-fg); }
.st-needs_legal_review, .st-unclear, .st-Medium, .st-planned { background: var(--f-caution-bg); color: var(--f-caution-fg); }
.st-not_in_scope, .st-evidenced, .st-Low, .st-verified { background: var(--f-success-bg); color: var(--f-success-fg); }
.st-not_applicable, .st-implemented, .st-Eliminated { background: var(--f-brand-bg2); color: var(--f-brand-selected); }
.st-missing { background: var(--f-bg4); color: var(--f-fg2); }

/* ---------- Section tabs (Fluent TabList, subtle) */
.subnav { background: var(--f-bg3); border-bottom: 1px solid var(--f-stroke2); gap: 2px; top: var(--f-header-h); }
.subnav a { background: transparent; border: 0; border-radius: var(--f-r-m); color: var(--f-fg2); font-size: 14px; line-height: 20px; padding: 6px 10px; }
.subnav a:hover { background: var(--f-bg5); color: var(--f-fg1); text-decoration: none; }
.sample-links a { border-radius: var(--f-r-m); border-color: var(--f-stroke1); }

/* ---------- Misc */
.gauge { background: var(--f-bg5); border-radius: 9999px; }
.spinner { border-color: var(--f-stroke2); border-top-color: var(--f-brand); }
pre, pre.json { background: var(--f-bg2); border: 1px solid var(--f-stroke2); border-radius: var(--f-r-m); color: var(--f-fg1); }
details > summary { color: var(--f-link); }
.muted, .small { color: var(--f-fg3); }
.note { color: var(--f-fg3); font-style: normal; font-size: 12px; line-height: 16px; }
.recent li { border-bottom-color: var(--f-stroke2); font-size: 14px; }
.chain { border-left-color: var(--f-stroke1); }
hr { border: 0; border-top: 1px solid var(--f-stroke2); }

/* ---------- Small screens: hamburger like Windows NavigationView minimal mode */
@media (max-width: 900px) {
  header.topbar { padding: 4px 8px; justify-content: flex-start; gap: 4px; flex-wrap: nowrap; }
  header.topbar h1 { font-size: 16px; }
  header.topbar h1 + p { display: none; }
  .navbtn { background: transparent !important; border: 0 !important; border-radius: var(--f-r-m) !important; color: #fff !important;
    font-size: 0 !important; min-height: 40px; min-width: 40px; padding: 0 !important; justify-content: center; }
  .navbtn::before { content: ""; width: 20px; height: 20px; background: #fff;
    -webkit-mask: var(--f-icon-menu) center / 20px no-repeat; mask: var(--f-icon-menu) center / 20px no-repeat; }
  .navbtn:hover { background: rgba(255,255,255,0.12) !important; }
  nav.leftnav { position: static; height: auto; width: auto; border-right: 0; box-shadow: var(--f-shadow8); }
  main { padding: 16px 12px !important; }
  .subnav { top: 0; }
}
@media print {
  header.topbar { position: static; }
  .card, .kpi, .finding, .decision-banner { box-shadow: none; border: 1px solid var(--f-stroke2); }
}

/* ---------- Fixes found in visual check */
.decision-banner .small, .decision-banner .muted { color: inherit; }
input:not([type]) { width: 100%; }