/* Oyma components. Black / white / orange dominate; flat surfaces, thin #DDD borders, no gradients. */
body { font-family: var(--oyma-font); background: #fff; color: #000; font-weight: 400; }
h1, h2, h3, h4, h5, h6, .fw-heading { font-weight: 700; }
.ltr, bdi.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; font-variant-numeric: tabular-nums; }
.amount, .table td.num, .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) { color: var(--oyma-accessible-orange); }
a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; } /* orange links are 3.0:1 on white: underline is the non-color cue */
a:not(.btn):hover { color: #000; }
.text-decoration-none, a.oy-chip, a.oy-cat, .oy-side a.item { text-decoration: none !important; }
:focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; }
.text-orange { color: var(--oyma-accessible-orange) !important; }
.text-muted, .text-secondary { color: var(--oyma-gray-700) !important; }

/* Header / footer */
.oy-header, .oy-header .navbar { background: #000 !important; color: #fff; --bs-navbar-color: #fff; --bs-navbar-hover-color: #FF7900; --bs-navbar-active-color: #FF7900; }
.oy-header .navbar-toggler { border-color: #fff; }
.oy-header .navbar-brand { font-weight: 800; font-size: 1.6rem; color: #fff; letter-spacing: 0; }
.oy-header .nav-link { color: #fff; font-weight: 600; }
.oy-header .nav-link:hover, .oy-header .nav-link.active { color: var(--oyma-brand-orange); }
.oy-collab { display: flex; align-items: center; gap: .5rem; color: #CCC; font-size: .8rem; padding-inline: .75rem; border-inline-start: 1px solid #595959; }
.oy-collab img { height: 36px; width: auto; display: block; }
.oy-orange-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--oyma-brand-orange); color: #fff; font: 700 .62rem/1 Arial, sans-serif; letter-spacing: 0; direction: ltr; }
.oy-demo-bar { background: #000; color: #fff; font-size: .8rem; text-align: center; padding: .35rem 1rem; border-bottom: 1px solid #595959; }
.oy-demo-bar b { color: var(--oyma-brand-orange); }
.oy-footer { background: #000; color: #ddd; margin-top: 4rem; padding: 2.5rem 0 1.5rem; }
.oy-footer a { color: #fff; }
.oy-footer .oy-logo-clear { padding: 9px; display: inline-block; }
.oy-footer img { height: 40px; display: block; }
.oy-footer small, .oy-footer .muted { color: #CCC; }

/* Surfaces */
.oy-card { background: #fff; border: 1px solid var(--oyma-gray-200); border-radius: 0; }
.oy-card .oy-card-h { padding: .85rem 1.1rem; border-bottom: 1px solid var(--oyma-gray-200); font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.oy-card .oy-card-b { padding: 1.1rem; }
.oy-card.hoverable { transition: border-color .15s; }
.oy-card.hoverable:hover { border-color: #000; }
.oy-accent-top { border-top: 4px solid var(--oyma-brand-orange); }
.oy-section { padding: 2.5rem 0; }
.oy-section-title { font-weight: 800; font-size: 1.5rem; margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.oy-section-title a { font-size: .95rem; font-weight: 600; }
.oy-hero { border-bottom: 1px solid var(--oyma-gray-200); padding: 2.5rem 0 2rem; }
.oy-hero h1 { font-weight: 800; font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
.oy-hero h1 em { font-style: normal; color: var(--oyma-accessible-orange); }
.oy-kpi { border: 1px solid var(--oyma-gray-200); padding: 1rem 1.1rem; background: #fff; height: 100%; }
.oy-kpi .v { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.oy-kpi .l { color: var(--oyma-gray-700); font-size: .85rem; }
.oy-kpi.accent { border-inline-start: 4px solid var(--oyma-brand-orange); }

/* Badges: functional colors only */
.oy-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; font-size: .78rem; font-weight: 700; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; }
.oy-badge-neutral { background: var(--oyma-gray-100); color: #000; border-color: var(--oyma-gray-300); }
.oy-badge-success { background: var(--oyma-success); color: #000; }
.oy-badge-info { background: var(--oyma-info); color: #000; } /* black on #527EDB = 5.4:1 (white would be 3.9:1) */
.oy-badge-warning { background: var(--oyma-warning); color: #000; }
.oy-badge-danger { background: var(--oyma-danger); color: #fff; }
.oy-badge-orange { background: var(--oyma-brand-orange); color: #000; }
.oy-badge-dark { background: #000; color: #fff; }
.oy-badge-verified { background: #000; color: #fff; }
.oy-badge-verified i { color: var(--oyma-brand-orange); }
.oy-stars { color: var(--oyma-accessible-orange); white-space: nowrap; }

/* Illustrative placeholder tiles (supporting colors, flat) */
.oy-ph { aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; color: #000; background: var(--oyma-gray-100); border-bottom: 1px solid var(--oyma-gray-200); position: relative; }
.oy-ph i { font-size: 2.2rem; }
.oy-ph span { font-size: .68rem; color: var(--oyma-gray-700); }
.oy-ph[style*="--h:24"] { background: #FFE4CC; } .oy-ph[style*="--h:30"] { background: #DCF1FA; } .oy-ph[style*="--h:36"] { background: #DDF3E8; }
.oy-ph[style*="--h:18"] { background: #EBE1F7; } .oy-ph[style*="--h:40"] { background: #FFF3B8; } .oy-ph[style*="--h:28"] { background: #FFE9F8; }
.oy-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid var(--oyma-gray-300); background: #fff; font-weight: 600; font-size: .9rem; color: #000 !important; text-decoration: none; }
.oy-chip:hover { border-color: #000; }
.oy-chip i { font-size: 1.1rem; }
.oy-cat { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .5rem; border: 1px solid var(--oyma-gray-200); text-decoration: none; color: #000 !important; font-weight: 700; text-align: center; height: 100%; }
.oy-cat i { font-size: 1.8rem; width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; }
.oy-cat:hover { border-color: #000; }

/* Journey strip */
.oy-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: s; }
.oy-step { position: relative; padding: 1rem .75rem; border: 1px solid var(--oyma-gray-200); margin-inline-end: -1px; text-align: center; background: #fff; }
.oy-step .n { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; background: var(--oyma-brand-orange); color: #000; font-weight: 800; margin-bottom: .5rem; }
.oy-step b { display: block; }
.oy-step small { color: var(--oyma-gray-700); }
@media (max-width: 767.98px) { .oy-steps { grid-template-columns: 1fr; } .oy-step { text-align: start; display: flex; gap: .75rem; align-items: center; margin: 0 0 -1px; } .oy-step .n { margin: 0; flex: none; } }

/* Timeline */
.oy-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.oy-timeline li { position: relative; padding: 0 1.9rem .95rem 0; }
.oy-timeline li::before { content: ""; position: absolute; inset-inline-start: auto; right: .55rem; top: .3rem; bottom: -.3rem; width: 2px; background: var(--oyma-gray-200); }
.oy-timeline li:last-child::before { display: none; }
.oy-timeline li::after { content: ""; position: absolute; right: .2rem; top: .3rem; width: 1rem; height: 1rem; background: #fff; border: 3px solid var(--oyma-gray-600); border-radius: 50%; }
.oy-timeline li.t-success::after { border-color: var(--oyma-success); } .oy-timeline li.t-danger::after { border-color: var(--oyma-danger); }
.oy-timeline li.t-orange::after { border-color: var(--oyma-brand-orange); } .oy-timeline li.t-info::after { border-color: var(--oyma-info); }
.oy-timeline .tm { color: var(--oyma-gray-700); font-size: .8rem; }
.oy-progress { height: .6rem; background: var(--oyma-gray-100); border: 1px solid var(--oyma-gray-300); }
.oy-progress > div { height: 100%; background: var(--oyma-brand-orange); }

/* Workspace shell */
.oy-shell { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; padding-top: .5rem; }
.oy-side { border: 1px solid var(--oyma-gray-200); align-self: start; position: sticky; top: 1rem; background: #fff; }
.oy-side .who { padding: 1rem; border-bottom: 1px solid var(--oyma-gray-200); }
.oy-side a.item { display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem; color: #000 !important; text-decoration: none; font-weight: 600; border-inline-start: 4px solid transparent; }
.oy-side a.item:hover { background: var(--oyma-gray-100); }
.oy-side a.item.active { border-inline-start-color: var(--oyma-brand-orange); background: var(--oyma-gray-100); }
.oy-side .grp { padding: .6rem 1rem .2rem; font-size: .72rem; color: var(--oyma-gray-700); font-weight: 700; }
@media (max-width: 991.98px) { .oy-shell { grid-template-columns: 1fr; } .oy-side { position: static; display: none; } .oy-side.show { display: block; } }
.oy-mobile-nav { display: none; }
@media (max-width: 991.98px) { .oy-mobile-nav { display: block; } }

/* Tables, forms, misc */
.table { --bs-table-bg: #fff; font-variant-numeric: tabular-nums; }
.table > thead th { white-space: nowrap; font-size: .85rem; }
.oy-filter { border: 1px solid var(--oyma-gray-200); padding: 1rem; background: #fff; }
.oy-empty { text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--oyma-gray-300); color: var(--oyma-gray-700); }
.oy-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; }
.oy-sim { border: 1px solid #000; border-inline-start: 4px solid var(--oyma-brand-orange); padding: .75rem 1rem; background: #fff; font-size: .9rem; }
.oy-waterfall { border: 1px solid #000; }
.oy-waterfall .row-l { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 1rem; border-bottom: 1px solid var(--oyma-gray-200); }
.oy-waterfall .row-l:last-child { border-bottom: 0; }
.oy-waterfall .row-l.total { font-weight: 800; background: var(--oyma-gray-100); }
.oy-waterfall .row-l.net { background: #000; color: #fff; font-weight: 800; }
.oy-waterfall .row-l.net .amount { color: var(--oyma-brand-orange); }
.oy-quote-card.best { border: 2px solid #000; }
.oy-sticky-actions { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--oyma-gray-200); padding: .75rem 0; z-index: 5; }
.btn-primary { color: #000 !important; }
.skip-link { position: absolute; right: -999px; top: 0; background: #fff; color: #000; padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { right: 0; }
.oy-demo-pick button { text-align: start; }
@media print { .oy-header, .oy-footer, .oy-demo-bar, .oy-side { display: none !important; } }

/* Placeholder variants */
.oy-ph-sm { aspect-ratio: 21/9; }
.oy-ph-sm span { display: none; }
.oy-ph-icon { aspect-ratio: 1; width: 3.4rem; border: 0; }
.oy-ph-icon span { display: none; }
.oy-ph-icon i { font-size: 1.6rem; }
.min-w-0 { min-width: 0; }

/* Link treatment on dark surfaces / navigation */
.oy-header a, .oy-header a:hover { text-decoration: none !important; }
.oy-footer a { color: #fff !important; }
.oy-footer a:hover { color: var(--oyma-brand-orange) !important; }
.breadcrumb a, .navbar a { text-decoration: none; }

/* ---- QA fixes ---- */
/* 6. breathing room between header and page title on every page */
main#main { padding-top: 1.75rem; }
.oy-shell > div > h1:first-child, .oy-shell > div > .d-flex:first-child { margin-top: .25rem; }
.oy-mobile-nav { margin-top: 0 !important; }
/* 1. header user menu: short org name */
.oy-usr { display: inline-block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* 10. compact Orange mark in the mobile header */
.oy-collab-mini { display: inline-flex; align-items: center; margin-inline-start: .6rem; padding-inline-start: .6rem; border-inline-start: 1px solid #595959; }
.oy-collab-mini img { height: 32px; width: auto; display: block; }
@media (max-width: 575.98px) { .oy-header .navbar-brand { font-size: 1.35rem; margin-inline-end: 0; } .oy-demo-bar { font-size: .72rem; } }
/* 2. tables below 576px become stacked cards (labels injected by oyma.js) */
@media (max-width: 575.98px) {
  .table-responsive > .table:not(.no-stack) { display: block; }
  .table-responsive > .table:not(.no-stack) thead { display: none; }
  .table-responsive > .table:not(.no-stack) tbody { display: block; }
  .table-responsive > .table:not(.no-stack) tr { display: block; border: 1px solid var(--oyma-gray-200); margin: .6rem; padding: .35rem .75rem; background: #fff; }
  .table-responsive > .table:not(.no-stack) td { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border: 0; padding: .4rem 0; text-align: start; white-space: normal; max-width: 100%; }
  .table-responsive > .table:not(.no-stack) td::before { content: attr(data-label); flex: none; font-weight: 700; color: var(--oyma-gray-700); font-size: .8rem; }
  .table-responsive > .table:not(.no-stack) td:not([data-label])::before, .table-responsive > .table:not(.no-stack) td[data-label=""]::before { content: none; }
  .table-responsive > .table:not(.no-stack) td > * { text-align: end; }
  .oy-card .table-responsive { overflow-x: visible; }
}
/* QA round 2 */
.ltr, bdi.ltr { white-space: nowrap; }
.oy-kpi .v { white-space: nowrap; }
@media (max-width: 575.98px) { .oy-kpi { padding: .8rem .75rem; } .oy-kpi .v { font-size: 1.2rem; } .oy-kpi .l { font-size: .78rem; } }