/*
 * Pacto application overrides — loaded after Metronic bundles.
 *
 * Override strategy:
 * 1. Use Bootstrap 5 CSS custom properties (--bs-*) for brand colors
 * 2. Match Metronic specificity for stubborn selectors
 * 3. Never use !important
 */

/*
 * Country flag emoji on Windows.
 *
 * ISO3166::Country#emoji_flag returns a Regional Indicator Symbol pair (Spain is
 * U+1F1EA U+1F1F8); turning that pair into a flag is entirely the font's job.
 * Windows' Segoe UI Emoji ships no country-flag glyphs, so Windows draws the two
 * indicator letters instead — a boxed "ES" where Linux and macOS show a flag.
 * No server-side change can fix that: the bytes we send are already identical.
 *
 * Twemoji Country Flags supplies the missing glyphs. `unicode-range` limits it to
 * flag codepoints, so it cannot affect any other text, and browsers that already
 * render flags natively never download it.
 *
 * This declaration lives here rather than in plugins.bundle.css deliberately —
 * docs/metronic.md §14 replaces that file wholesale on a Metronic upgrade, which
 * would silently drop the font and regress flags on Windows only.
 *
 * Font: https://github.com/talkjs/country-flag-emoji-polyfill (code MIT).
 * Artwork from Twemoji, CC-BY-4.0 (https://creativecommons.org/licenses/by/4.0/),
 * redistributed unmodified. See LICENSE.md beside the font file.
 */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/assets/twemoji-country-flags/TwemojiCountryFlags-468538bb.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
    U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}

/*
 * Prepend the flag font to Metronic's stack. Referencing --bs-font-sans-serif
 * rather than restating "Inter, Helvetica, sans-serif" means a Metronic upgrade
 * that changes the body font is inherited automatically; only the prepend is ours.
 */
:root {
  --bs-body-font-family: "Twemoji Country Flags", var(--bs-font-sans-serif);
}

/* Record link style for index tables — bold, colored, underline on hover */
.record-link {
  color: var(--bs-gray-900);
  font-weight: 600;
  text-decoration: none;
}

.record-link:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

/* Inter, self-hosted (MEDIUM-008): the Google Fonts stylesheet was the only
   remote origin the app loaded, and removing it is what lets the Content
   Security Policy stay tight. Variable weight files, subset like the Twemoji
   flags font above them in spirit — unicode-range scoped, swap display. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter/inter-latin-var-1f021a24.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter/inter-latin-ext-var-65edaaef.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Constrain content width on ultra-wide screens */
.app-content-max-width {
  max-width: 1400px;
}

/* Auth layout: narrow form panel so the branding image takes more space.
   The width lives here alone — the layout deliberately carries no Bootstrap
   w-lg-* utility, whose own !important would force one here too. */
@media (min-width: 992px) {
  .auth-form-panel {
    width: 40%;
    max-width: 40%;
  }
}

/* Table view list — subtle active highlight instead of Bootstrap's bright blue */
.list-group-item.table-view-item.active {
  background-color: var(--bs-gray-200);
  border-color: var(--bs-border-color);
  color: var(--bs-gray-900);
}

/* AI chat thinking animation */
.thinking-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.thinking-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--bs-gray-500);
  animation: thinking-bounce 1.4s infinite ease-in-out both;
}

.thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes thinking-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* AI assistant markdown content */
.message-markdown { font-weight: normal; }
.message-markdown p { margin-bottom: 0.5rem; }
.message-markdown p:last-child { margin-bottom: 0; }
.message-markdown ul,
.message-markdown ol { padding-left: 1.4rem; margin-bottom: 0.5rem; }
.message-markdown h1,
.message-markdown h2,
.message-markdown h3 { font-size: 1rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.35rem; }
.message-markdown code { background: var(--bs-gray-200); border-radius: 3px; padding: 0.1em 0.35em; font-size: 0.85em; }
.message-markdown pre { background: var(--bs-gray-200); border: 1px solid var(--bs-border-color); border-radius: 6px; padding: 0.75rem; overflow-x: auto; margin-bottom: 0.5rem; }
.message-markdown pre code { background: none; padding: 0; }
.message-markdown blockquote { border-left: 3px solid var(--bs-gray-300); padding-left: 0.75rem; color: var(--bs-gray-600); margin: 0.5rem 0; }
.message-markdown hr { border-color: var(--bs-border-color); margin: 0.75rem 0; }
.message-markdown a { color: var(--bs-primary); text-decoration: underline; }

/* AI assistant markdown tables */
.message-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  overflow-x: auto;
  display: block;
}

.message-markdown thead th {
  background: var(--bs-gray-200);
  color: var(--bs-gray-700);
  font-weight: 600;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 2px solid var(--bs-border-color);
  white-space: nowrap;
}

.message-markdown tbody tr:nth-child(even) {
  background: var(--bs-gray-100);
}

.message-markdown tbody td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--bs-border-color);
  vertical-align: top;
}

/* AI panel slide transition — mirrors sidebar's transition timing */
.table-col-transition {
  transition: all 0.3s ease-in-out;
}

.table-panel-col {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.table-panel-col--visible {
  max-width: 25%;
  opacity: 1;
  overflow: visible;
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}

/* Suppress transitions on initial page load. Compound selectors match the
   two elements table-panel-toggle applies the class to, at higher
   specificity than the transition rules they silence — no !important. */
.table-panel-col.no-transition,
.table-col-transition.no-transition {
  transition: none;
}

/* ===== Operations Hub — dark futuristic theme ===== */

/* Dark background for the entire content area when the hub page is loaded */
#kt_app_main:has(.ohub) {
  background: #0a0e27;
}

#kt_app_main:has(.ohub) .app-toolbar {
  background: #0a0e27;
}

#kt_app_main:has(.ohub) .page-heading {
  color: rgba(255, 255, 255, 0.95);
}

#kt_app_main:has(.ohub) .breadcrumb-item.text-muted,
#kt_app_main:has(.ohub) .text-muted.text-hover-primary {
  color: rgba(180, 195, 220, 0.65);
}

#kt_app_main:has(.ohub) #kt_app_footer {
  background: #0a0e27;
  border-top-color: rgba(0, 210, 255, 0.1);
}

#kt_app_main:has(.ohub) #kt_app_footer .text-gray-800 {
  color: rgba(180, 195, 220, 0.5);
}

.ohub {
  --ohub-bg: #0a0e27;
  --ohub-card-bg: rgba(15, 20, 50, 0.85);
  --ohub-card-border: rgba(0, 210, 255, 0.15);
  --ohub-accent: #00d2ff;
  --ohub-accent-green: #00e676;
  --ohub-text: rgba(255, 255, 255, 0.95);
  --ohub-text-muted: rgba(180, 195, 220, 0.65);
  --ohub-separator: rgba(0, 210, 255, 0.12);
}

.ohub-title {
  color: var(--ohub-text);
  font-size: 1.75rem;
  letter-spacing: 0.5px;
}

.ohub-subtitle {
  color: var(--ohub-accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.ohub-text-light { color: var(--ohub-text); }
.ohub-text-muted { color: var(--ohub-text-muted); }
.ohub-text-accent { color: var(--ohub-accent); }
.ohub-text-success { color: var(--ohub-accent-green); }

.ohub-kpi-card {
  background: var(--ohub-card-bg);
  border: 1px solid var(--ohub-card-border);
  border-radius: 8px;
}

.ohub-kpi-label {
  color: var(--ohub-text-muted);
}

.ohub-kpi-value {
  color: var(--ohub-text);
  font-size: 2.5rem;
  line-height: 1.1;
}

.ohub-card {
  background: var(--ohub-card-bg);
  border: 1px solid var(--ohub-card-border);
  border-radius: 10px;
  padding: 1.25rem;
}

.ohub-card-header {
  color: var(--ohub-text);
}

.ohub-dots {
  color: var(--ohub-text-muted);
  font-size: 1.5rem;
  letter-spacing: 2px;
  cursor: pointer;
}

.ohub-agent-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(0, 210, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ohub-bid-row {
  border-bottom: 1px solid var(--ohub-separator);
}

.ohub-bid-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ohub-score-badge {
  display: inline-block;
  background: rgba(0, 210, 255, 0.15);
  color: var(--ohub-accent);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 4px;
}

.ohub-map-card {
  background: var(--ohub-bg);
  border: 1px solid var(--ohub-card-border);
  overflow: hidden;
}

.ohub-highlight-box {
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}

.ohub-separator {
  border-color: var(--ohub-separator);
}

.ohub-profit-box {
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.2);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  color: var(--ohub-accent-green);
}

.ohub-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.ohub-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ohub-accent), var(--ohub-accent-green));
}

.ohub-table {
  color: var(--ohub-text-muted);
}

.ohub-table thead th {
  color: var(--ohub-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--ohub-separator);
}

.ohub-table tbody tr {
  border-bottom: 1px solid var(--ohub-separator);
}

.ohub-table tbody td {
  border-bottom: 1px solid var(--ohub-separator);
}

.ohub-tier-badge {
  font-weight: 700;
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.ohub-tier-warning {
  background: rgba(255, 199, 0, 0.12);
  color: #ffc700;
}

.ohub-tier-secondary {
  background: rgba(180, 195, 220, 0.12);
  color: #b4c3dc;
}

.ohub-tier-info {
  background: rgba(205, 127, 50, 0.12);
  color: #cd7f32;
}

/* intl-tel-input — fits the vendor widget to Metronic's form controls.
   The library wraps the <input> in a .iti element that is inline-block by
   default, which collapses inside a Bootstrap column. */
.iti {
  width: 100%;
}

/* The country button sits inside the input, so its background must follow the
   field rather than the page — otherwise it stays white in dark mode. */
.iti__country-container .iti__selected-country {
  background-color: transparent;
  border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}

/* The widget paints its dropdown from its own variables — a white
   --iti-country-selector-bg, a grey border, a black hover — which is what left
   the country list white in dark mode (PACTO-30). Pointing those at Metronic's
   tokens themes the list in both modes; the earlier rule here targeted
   .iti__dropdown-content, a class this version of the widget does not render. */
:root {
  --iti-country-selector-bg: var(--bs-body-bg);
  --iti-border-color: var(--bs-border-color);
  --iti-hover-color: var(--bs-gray-100);
  --iti-icon-color: var(--bs-gray-600);
}

.iti__country-selector {
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
}

.iti__dial-code {
  color: var(--bs-gray-600);
}

.iti__search-input {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--bs-border-color);
}

/* ==========================================================================
   Help articles
   ========================================================================== */

/* A value the reader has to reproduce exactly — the connector address, the name
   to type beside it. Set apart from the prose so it is obvious where the value
   starts and ends; monospaced so a 1 cannot be read as an l; selectable in one
   click; and free to wrap mid-string so a long address cannot push the card
   sideways on a phone. Named rather than a run of utility classes because every
   article needs the same treatment and it should not drift between them. */
.help-code {
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-gray-900);
  display: inline-block;
  font-family: var(--bs-font-monospace);
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0.5rem 0.85rem;
  user-select: all;
}

/* A screenshot of a step. Bounded so a full-width capture cannot overflow the
   card, and framed so it reads as a picture of another program rather than as
   part of this page. */
.help-screenshot {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  display: block;
  max-width: 100%;
  height: auto;
}

/* Operation form (PACTO-10): the checklist rail stays in view while the
   sections scroll, below the fixed header; a section is the jump target of a
   rail heading, so it lands below the header too. The chevron turns with the
   section controller's collapsed value, which Stimulus reflects as an attribute. */
.operation-rail {
  position: sticky;
  top: calc(var(--bs-app-header-height, 0px) + 1.5rem);
  /* A rail taller than the window scrolls inside itself; pinned as a whole,
     its buttons would be out of reach until the page bottom. */
  max-height: calc(100vh - var(--bs-app-header-height, 0px) - 3rem);
  overflow-y: auto;
}

.operation-section {
  scroll-margin-top: calc(var(--bs-app-header-height, 0px) + 1rem);
}

.operation-section-head {
  cursor: pointer;
}

/* A folded section is its header alone. The header carries pt-6 above the
   number, and the body under it is hidden, so nothing balanced that padding
   at the bottom: the text sat nearer the card's bottom edge than its top
   (PACTO-62). The same 1.5rem below, folded only — opened, the header stays
   flush against the body as before. */
.operation-section[data-operation-section-collapsed-value="true"] .operation-section-head {
  padding-bottom: 1.5rem;
}

.operation-chevron {
  transition: transform 0.15s;
}

.operation-section[data-operation-section-collapsed-value="true"] .operation-chevron {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .operation-chevron {
    transition: none;
  }
}

/* Two-factor setup (PACTO-5): the QR is shown at the size rqrcode drew it —
   it carries no viewBox, so a CSS width would clip it, not scale it — with a
   white ground in dark mode so a phone camera reads it. The backup codes stay
   legible at a glance. */
.qr-code svg {
  display: block;
  background: #fff;
  border-radius: 0.475rem;
}

.backup-codes code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}