/* ==========================================================================
   Biznesnetwork — Carbon-inspired design system
   IBM Plex typography · Carbon Gray + brand red · functional, terminal-grade
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Brand */
  --brand:        #da1e28;   /* Biznesnetwork red == Carbon red-60 */
  --brand-hover:  #b81922;
  --brand-active: #a01620;
  --brand-light:  #fff1f1;   /* red-10 tint */

  /* Carbon gray scale */
  --gray-10:  #f4f4f4;
  --gray-20:  #e0e0e0;
  --gray-30:  #c6c6c6;
  --gray-40:  #a8a8a8;
  --gray-50:  #8d8d8d;
  --gray-60:  #6f6f6f;
  --gray-70:  #525252;
  --gray-80:  #393939;
  --gray-90:  #262626;
  --gray-100: #161616;

  /* Semantic */
  --bg:           #ffffff;
  --bg-subtle:    #f4f4f4;
  --bg-raised:    #ffffff;
  --layer:        #ffffff;
  --field:        #f4f4f4;
  --border-subtle:#e0e0e0;
  --border-strong:#8d8d8d;
  --text:         #161616;
  --text-secondary:#525252;
  --text-helper:  #6f6f6f;
  --text-on-color:#ffffff;
  --link:         #0f62fe;   /* Carbon blue-60 */
  --link-hover:   #0043ce;

  /* Direction (up/down) */
  --up:        #198038;   /* green-60 */
  --up-bg:     #defbe6;   /* green-10 */
  --down:      #da1e28;   /* red-60 */
  --down-bg:   #fff1f1;   /* red-10 */
  --flat:      #6f6f6f;

  /* Header / shell */
  --header-bg:  #161616;
  --header-fg:  #f4f4f4;
  --header-h:   48px;
  --ticker-h:   36px;

  /* Type */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --font-serif:'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* Spacing (Carbon scale) */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 8px;  --sp-4: 12px;
  --sp-5: 16px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px;

  --radius: 0;          /* Carbon is square; small radius used sparingly */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
  --shadow-2: 0 2px 6px rgba(0,0,0,.12);
  --max-w: 1584px;      /* Carbon max grid */
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-subtle);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-weight: 600; line-height: 1.25; margin: 0 0 var(--sp-4); letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.0625rem; }
p { margin: 0 0 var(--sp-4); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-helper); }
.tiny { font-size: .75rem; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-5); }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); z-index: 100; background: #fff; padding: var(--sp-3); }

/* ---- App header (Carbon UI Shell) -------------------------------------- */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg); color: var(--header-fg);
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid var(--gray-80);
}
.app-header .container { display: flex; align-items: center; gap: var(--sp-5); max-width: none; }
.app-brand { display: flex; align-items: center; gap: var(--sp-3); height: 100%; }
.app-brand img { height: 26px; width: auto; }
.app-nav { display: flex; align-items: stretch; height: var(--header-h); gap: 0; margin-left: var(--sp-3); }
.app-nav a {
  display: flex; align-items: center; padding: 0 var(--sp-5);
  color: var(--gray-30); font-size: .875rem; height: 100%;
  border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap;
}
.app-nav a:hover { background: var(--gray-90); color: #fff; }
.app-nav a.active { color: #fff; border-bottom-color: var(--brand); }
.app-header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.header-btn {
  background: transparent; border: none; color: var(--gray-30);
  height: var(--header-h); padding: 0 var(--sp-4); cursor: pointer; font-size: .875rem;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.header-btn:hover { background: var(--gray-90); color: #fff; }
.nav-toggle { display: none; }

/* ---- Ticker tape -------------------------------------------------------- */
.ticker {
  background: var(--gray-100); color: var(--gray-10);
  height: var(--ticker-h); overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid var(--gray-80); position: relative;
}
.ticker-track { display: inline-flex; align-items: center; height: var(--ticker-h);
  animation: ticker-scroll 60s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-5); font-size: .8125rem; border-right: 1px solid var(--gray-80); }
.ticker-item .sym { color: var(--gray-40); font-weight: 600; }
.ticker-item .val { font-family: var(--font-mono); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---- Direction colours -------------------------------------------------- */
.is-up   { color: var(--up); }
.is-down { color: var(--down); }
.is-flat { color: var(--flat); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 2px;
  font-size: .75rem; font-weight: 600; font-family: var(--font-mono); }
.chip.is-up   { background: var(--up-bg);   color: var(--up); }
.chip.is-down { background: var(--down-bg); color: var(--down); }
.chip.is-flat { background: var(--gray-10); color: var(--flat); }
.arrow::before { font-size: .7em; }
.is-up .arrow::before, .arrow.is-up::before   { content: '▲ '; }
.is-down .arrow::before, .arrow.is-down::before { content: '▼ '; }

/* ---- Buttons (Carbon) --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-size: .875rem; line-height: 1.2;
  padding: 11px var(--sp-5) 11px var(--sp-4); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .11s ease;
  min-height: 40px;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); color:#fff; }
.btn-secondary { background: var(--gray-80); color: #fff; }
.btn-secondary:hover { background: var(--gray-70); }
.btn-tertiary { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-tertiary:hover { background: var(--brand); color: #fff; }
.btn-ghost { background: transparent; color: var(--link); padding-left: var(--sp-4); }
.btn-ghost:hover { background: var(--gray-10); }
.btn-sm { min-height: 32px; padding: 6px var(--sp-4); font-size: .8125rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---- Tags --------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 20px;
  padding: 0 var(--sp-3); border-radius: 12px; font-size: .75rem; font-weight: 500;
  background: var(--gray-20); color: var(--gray-90); white-space: nowrap;
}
.tag-red    { background: #ffd7d9; color: #a2191f; }
.tag-green  { background: #a7f0ba; color: #0e6027; }
.tag-blue   { background: #d0e2ff; color: #0043ce; }
.tag-gray   { background: var(--gray-20); color: var(--gray-80); }
.tag-purple { background: #e8daff; color: #6929c4; }
.tag-teal   { background: #9ef0f0; color: #005d5d; }
.tag-outline{ background: transparent; border: 1px solid var(--border-strong); }

/* ---- Tiles / cards ------------------------------------------------------ */
.tile {
  background: var(--layer); border: 1px solid var(--border-subtle);
  padding: var(--sp-5); position: relative;
}
.tile-clickable { transition: border-color .11s, box-shadow .11s; color: var(--text); }
.tile-clickable:hover { border-color: var(--brand); box-shadow: var(--shadow-1); text-decoration: none; color: var(--text); }
.tile h3 a { color: var(--text); }
a.tile-clickable, a.tile-clickable:hover { color: var(--text); }
.flag-img { height: auto; border: 1px solid rgba(0,0,0,.12); border-radius: 2px; vertical-align: middle; display: inline-block; }

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .label { font-size: .75rem; color: var(--text-helper); text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat .value.sm { font-size: 1.125rem; }
.stat .sub { font-size: .8125rem; }

/* ---- Grid --------------------------------------------------------------- */
.grid { display: grid; gap: 1px; background: var(--border-subtle); }
.grid.gap { gap: var(--sp-4); background: transparent; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }
.span-2 { grid-column: span 2; }
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); align-items: start; }

/* ---- Data table (Carbon) ----------------------------------------------- */
.table-wrap { background: var(--layer); border: 1px solid var(--border-subtle); overflow-x: auto; }
.table-toolbar {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--layer); border-bottom: 1px solid var(--border-subtle);
}
.table-toolbar h3 { margin: 0; font-size: .9375rem; }
.table-toolbar .spacer { margin-left: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .8125rem; }
table.data thead th {
  text-align: left; background: var(--layer); color: var(--text);
  font-weight: 600; padding: 12px var(--sp-4); border-bottom: 1px solid var(--gray-30);
  white-space: nowrap; position: sticky; top: 0;
}
table.data thead th.num, table.data td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.data tbody td { padding: 11px var(--sp-4); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
table.data tbody tr:hover { background: var(--gray-10); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .sym { font-weight: 600; }
table.data .name { color: var(--text-secondary); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: var(--gray-10); }
th.sortable::after { content: '↕'; color: var(--gray-40); margin-left: 6px; font-size: .85em; }
th.sort-asc::after { content: '↑'; color: var(--brand); }
th.sort-desc::after { content: '↓'; color: var(--brand); }

/* ---- Search / inputs ---------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-size: .75rem; color: var(--text-secondary); }
.input, .select, .search input {
  width: 100%; height: 40px; padding: 0 var(--sp-4);
  background: var(--field); border: none; border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-sans); font-size: .875rem; color: var(--text);
}
.input:focus, .select:focus, .search input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gray-70) 50%), linear-gradient(135deg, var(--gray-70) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.search { position: relative; }
.search input { padding-left: var(--sp-8); }
.search::before { content: '🔍'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .85rem; opacity: .6; }

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end;
  background: var(--layer); border: 1px solid var(--border-subtle); padding: var(--sp-4); }
.filter-bar .field { min-width: 160px; flex: 1; }

/* ---- Pagination --------------------------------------------------------- */
.pagination { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; padding: var(--sp-5) 0; }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); background: var(--layer); color: var(--text); padding: 0 8px;
}
.pagination a:hover { border-color: var(--brand); text-decoration: none; }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }
.pagination .disabled { color: var(--gray-40); pointer-events: none; }

/* ---- Breadcrumbs -------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: .8125rem; padding: var(--sp-4) 0; color: var(--text-helper); }
.breadcrumb a { color: var(--link); }
.breadcrumb .sep { color: var(--gray-40); }

/* ---- Notifications ------------------------------------------------------ */
.notice { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-left: 3px solid var(--gray-50);
  background: var(--layer); border: 1px solid var(--border-subtle); border-left-width: 3px; font-size: .8125rem; }
.notice-info   { border-left-color: var(--link);  background: #edf5ff; }
.notice-warn   { border-left-color: #f1c21b; background: #fcf4d6; }
.notice-success{ border-left-color: var(--up);    background: var(--up-bg); }
.notice-error  { border-left-color: var(--down);  background: var(--down-bg); }
.notice strong { display: block; }

/* ---- Section headers ---------------------------------------------------- */
.section { margin: var(--sp-7) 0; }
.section-head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.section-head h2 { margin: 0; }
.section-head .more { margin-left: auto; font-size: .8125rem; }
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); font-weight: 600; margin-bottom: var(--sp-2); }

/* ---- Hero / dashboard banner ------------------------------------------- */
.hero { background: var(--gray-100); color: #fff; padding: var(--sp-7) 0; }
.hero h1 { color: #fff; font-size: 2rem; max-width: 22ch; }
.hero p { color: var(--gray-30); max-width: 60ch; }
.hero .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--gray-80); margin-top: var(--sp-5); border: 1px solid var(--gray-80); }
.hero .kpi { background: var(--gray-100); padding: var(--sp-4); }
.hero .kpi .label { color: var(--gray-40); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.hero .kpi .value { font-family: var(--font-mono); font-size: 1.375rem; color: #fff; }

/* ---- Market mini-cards -------------------------------------------------- */
.market-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.market-card .flag { font-size: 1.5rem; line-height: 1; }
.market-card .head { display: flex; align-items: center; gap: var(--sp-3); }
.market-card .exch { font-weight: 600; }
.market-card .country { font-size: .75rem; color: var(--text-helper); }
.market-card .index-val { font-family: var(--font-mono); font-size: 1.5rem; }

/* ---- Converter (cedirates-style) --------------------------------------- */
.converter { background: var(--layer); border: 1px solid var(--border-subtle); }
.converter-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-3); align-items: end; padding: var(--sp-5); }
.converter .swap { height: 40px; width: 40px; border: 1px solid var(--border-strong); background: var(--field);
  cursor: pointer; font-size: 1.1rem; align-self: end; }
.converter .swap:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.converter-result { background: var(--gray-100); color: #fff; padding: var(--sp-5); }
.converter-result .big { font-family: var(--font-mono); font-size: 2rem; }
.converter-result .rate { color: var(--gray-30); font-size: .8125rem; }

/* ---- Skeleton loading --------------------------------------------------- */
.skeleton { background: linear-gradient(90deg, var(--gray-10) 25%, var(--gray-20) 37%, var(--gray-10) 63%);
  background-size: 400% 100%; animation: skl 1.4s ease infinite; border-radius: 2px; height: 1em; }
@keyframes skl { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---- Footer ------------------------------------------------------------- */
.app-footer { background: var(--gray-100); color: var(--gray-30); margin-top: var(--sp-9); padding: var(--sp-8) 0 var(--sp-6); }
.app-footer a { color: var(--gray-30); }
.app-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--sp-6); }
.footer-grid h4 { color: #fff; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; font-size: .8125rem; line-height: 2; }
.footer-bottom { border-top: 1px solid var(--gray-80); margin-top: var(--sp-6); padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; font-size: .75rem; color: var(--gray-50); }

/* ---- Data source / timestamp meta -------------------------------------- */
.data-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: .75rem; color: var(--text-helper); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--up); }
.dot.live { background: var(--up); box-shadow: 0 0 0 0 rgba(25,128,56,.5); animation: pulse 2s infinite; }
.dot.delayed { background: #f1c21b; }
.dot.snapshot { background: var(--gray-50); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(25,128,56,.5);} 70%{ box-shadow: 0 0 0 6px rgba(25,128,56,0);} 100%{ box-shadow:0 0 0 0 rgba(25,128,56,0);} }

/* ---- Prose (blog / pages) ---------------------------------------------- */
.prose { max-width: 72ch; font-size: .9375rem; line-height: 1.7; }
.prose h2 { margin-top: var(--sp-7); }
.prose img { margin: var(--sp-5) 0; border: 1px solid var(--border-subtle); }
.prose blockquote { border-left: 3px solid var(--brand); margin: var(--sp-5) 0; padding-left: var(--sp-5); color: var(--text-secondary); }
.prose code { font-family: var(--font-mono); background: var(--gray-10); padding: 1px 4px; }

/* ---- Article cards ------------------------------------------------------ */
.article-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.article-card .meta { font-size: .75rem; color: var(--text-helper); display: flex; gap: var(--sp-3); }
.article-card h3 { margin: 0; font-size: 1rem; }

/* ---- Ad slots ----------------------------------------------------------- */
.ad-slot { margin: var(--sp-6) auto; text-align: center; max-width: 970px; overflow: hidden; }
.ad-slot .ad-label { display: block; font-size: .625rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-40); margin-bottom: 4px; }
.ad-slot ins { display: block; min-height: 90px; background: transparent; }
.container > .ad-slot { margin-left: 0; margin-right: 0; }

/* ---- Utilities ---------------------------------------------------------- */
.flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-5); }
.wrap { flex-wrap: wrap; } .mt-4 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-5); }
.hidden { display: none; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1056px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .dash-grid { grid-template-columns: 1fr; }
  .cols-4, .hero .kpis { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .app-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; background: var(--gray-100); height: auto; }
  .app-nav.open { display: flex; }
  .app-nav a { height: 48px; border-bottom: 1px solid var(--gray-80); }
  .app-nav a.active { border-bottom-color: var(--gray-80); border-left: 3px solid var(--brand); }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 580px) {
  .cols-2, .cols-3, .cols-4, .cols-6, .hero .kpis, .footer-grid { grid-template-columns: 1fr; }
  .converter-row { grid-template-columns: 1fr; }
  .converter .swap { width: 100%; }
  h1 { font-size: 1.5rem; } .hero h1 { font-size: 1.6rem; }
}