/* File: wwwroot/css/site.css */
/* =====================================================================
   IsaMoney — personal stock portfolio tracker.
   Layered on top of Bootstrap 5.3, same structural approach as 1HR
   Portal's site.css (header/brand, widget cards, pill buttons) with its
   own finance-appropriate palette. Categorical/status colors follow the
   validated default dataviz palette (see references/palette.md) so chart
   colors and gain/loss text colors are drawn from the same source.
   ===================================================================== */

:root {
  --brand: #2a78d6;
  --brand-dark: #184f95;
  --ink: #0b0b0b;
  --ink-muted: #52514e;
  --ink-soft: #898781;
  --border: #e1e0d9;
  --page-bg: #f9f9f7;
  --card-bg: #fcfcfb;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(11, 11, 11, 0.04), 0 1px 3px rgba(11, 11, 11, 0.06);

  /* Status colors (dataviz palette, fixed — never reused for chart series) */
  --gain: #0ca30c;
  --gain-text: #006300;
  --gain-bg: rgba(12, 163, 12, 0.10);
  --loss: #d03b3b;
  --loss-bg: rgba(208, 59, 59, 0.10);

  /* Categorical palette, fixed order — used for allocation chart + badges */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
}

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--ink);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------------------------- Header ---------------------------- */
.site-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.brand {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.main-nav a {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.nav-alert-badge {
  display: inline-block;
  min-width: 1.25rem;
  margin-inline-start: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--loss);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  vertical-align: text-top;
}
.nav-alert-badge.d-none { display: none; }
.main-nav-mobile {
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 16px;
}
.main-nav-mobile a { padding: 8px 0; }
.header-actions { display: flex; align-items: center; gap: 8px; }

/* ---------------------------- Layout ---------------------------- */
.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.section-spacer { margin-bottom: 8px; }
.section-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}

/* ---------------------------- Cards ---------------------------- */
.widget-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: 0;
}

.stat-card { padding: 18px 20px; }
.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-sub {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 2px;
}

.chart-card { min-height: 300px; }
.chart-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}

.error-card { text-align: center; padding: 56px 24px; }
.error-code {
  font-size: 3rem;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 8px;
}

/* ---------------------------- Gain / loss ---------------------------- */
.text-gain { color: var(--gain-text); }
.text-loss { color: var(--loss); }
.badge-gain { background: var(--gain-bg); color: var(--gain-text); }
.badge-loss { background: var(--loss-bg); color: var(--loss); }

/* Status vocabulary (plan Section 12): every judgment is a colored badge AND an icon AND a
   text label together -- never color alone. favorable / neutral / caution / risk. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
}
.status-favorable { background: var(--gain-bg); color: var(--gain-text); }
.status-neutral { background: rgba(82, 81, 78, 0.12); color: var(--ink-muted); }
.status-caution { background: rgba(237, 161, 0, 0.18); color: #6b4a00; }
.status-risk { background: var(--loss-bg); color: var(--loss); }
.factor-list li { margin-bottom: 0.4rem; }

/* AI Assistant answers: every line is labelled Fact / Calculated / AI interpretation. Never color alone --
   each label also has an icon and text, and the AI-interpretation lines are visibly softer (dashed edge). */
.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
.ai-tag-fact { background: rgba(42, 120, 214, 0.12); color: var(--brand-dark); }
.ai-tag-calc { background: rgba(74, 58, 167, 0.12); color: var(--series-7); }
.ai-tag-ai { background: rgba(82, 81, 78, 0.10); color: var(--ink-muted); }
.ai-line { padding: 0.35rem 0; padding-inline: 0.75rem 0; margin-bottom: 0.25rem; border-inline-start: 3px solid transparent; }
.ai-tag-fact-line { border-inline-start-color: var(--brand); }
.ai-tag-calc-line { border-inline-start-color: var(--series-7); }
.ai-tag-ai-line { border-inline-start: 3px dashed var(--ink-soft); font-style: italic; }
.ai-new { box-shadow: 0 0 0 2px rgba(42, 120, 214, 0.25); }

/* Portfolio risk (Holdings page) */
.risk-tile {
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--page-bg);
}
.risk-tile-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable:hover { color: var(--bs-primary, #2a78d6); }
.sortable .sort-icon { margin-inline-start: 0.35rem; opacity: 0.35; font-size: 0.8em; }
.sortable[aria-sort] .sort-icon { opacity: 1; }
.risk-bar-row { display: grid; grid-template-columns: minmax(4.5rem, 9rem) 1fr 3.75rem; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; }
.risk-bar-row .progress { height: 10px; }
.risk-matrix th, .risk-matrix td { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------- Buttons / links ---------------------------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background-color 0.15s ease;
}
.btn-pill:hover { background: var(--brand-dark); color: #fff; }
.btn-pill:disabled { opacity: 0.65; }

.small-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
}
.small-link:hover { color: var(--brand-dark); }

/* ---------------------------- Tables ---------------------------- */
.table { color: var(--ink); }
.table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
  border-bottom-width: 1px;
  white-space: nowrap;
}
.table td { vertical-align: middle; }

/* ---------------------------- Footer ---------------------------- */
.site-footer {
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  padding: 20px 0;
  margin-top: 40px;
}
.site-footer p {
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 991.98px) {
  .page-content { padding: 16px 12px 32px; }
}

/* ---------------------------- News list ---------------------------- */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.news-list-full .news-item { padding: 14px 4px; }
.news-item {
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.news-item:last-child { border-bottom: none; }
.news-title {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.news-title:hover { color: var(--brand); text-decoration: underline; }
.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.news-symbol-badge {
  background: var(--series-1);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ===================== Account (Login/Register) ===================== */
.account-body {
    background: var(--page-bg, #f9f9f7);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-shell {
    width: 100%;
    max-width: 420px;
    padding: 24px;
}
.account-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 8px 30px rgba(11, 11, 11, 0.08);
}
.account-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.account-subtitle {
    color: var(--ink-soft, #52514e);
    margin-bottom: 20px;
}
.account-switch {
    margin: 20px 0 0;
    text-align: center;
    font-size: 0.9rem;
}
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: 10px;
    font-weight: 600;
}
.header-actions form {
    margin: 0;
}

/* ===================== Google sign-in button ===================== */
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    font-weight: 600;
}
.btn-google:hover {
    background: #f8f9fa;
    color: #3c4043;
}
.btn-google i {
    color: #4285F4;
}
.account-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--ink-soft, #52514e);
    font-size: 0.85rem;
    margin: 4px 0 16px;
}
.account-divider::before,
.account-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--border, #e1e0d9);
}
.account-divider span {
    padding: 0 10px;
}


/* ===================== Symbol autocomplete (Pages/Transactions/Index.cshtml) ===================== */
.symbol-suggest-wrap {
    position: relative;
}
.symbol-suggestions {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 20;
    margin-top: 2px;
    max-height: 220px;
    overflow-y: auto;
    border-radius: .375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
}
.symbol-suggest-item {
    text-align: start;
    font-size: 0.9rem;
}


/* ===================== Language (English / Arabic) ===================== */
/* Arabic gets a proper Arabic face and a little more line height. Numbers, tickers and prices stay in
   Western digits (the pages format them that way), so they use dir="ltr" runs where they sit inside text. */
html[lang="ar"] body {
    font-family: 'Noto Naskh Arabic', 'Segoe UI', Tahoma, serif;
    line-height: 1.8;
}
.lang-switch { display: inline-flex; margin: 0; }
.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--brand);
    color: #fff;
    padding: 8px 14px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { inset-inline-start: 8px; }
.account-lang { position: absolute; top: 12px; inset-inline-end: 12px; }
/* Tickers, prices, percentages and dates are always left-to-right runs, even inside Arabic text. */
.ltr-run { direction: ltr; display: inline-block; }
/* Arrows that point "onward" flip in right-to-left pages. */
html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-angle-right { transform: scaleX(-1); }

/* ---------------------------- Command Center: bell and attention list ----------------------------
   Severity is always a badge (color + icon + word) plus a colored edge on the row; the edge alone is never
   the message. Logical properties (inline-start) so the edge flips with the page direction in Arabic. */
.attention-bell { position: relative; }
.bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--ink);
  font-size: 1.05rem;
}
.bell-btn:hover { border-color: var(--brand); color: var(--brand); }
.bell-btn:focus-visible { outline: 3px solid rgba(42, 120, 214, 0.5); outline-offset: 2px; }
.bell-count {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 1.25rem;
  padding: 1px 5px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.bell-count.d-none { display: none; }
.bell-count-critical { background: var(--loss); }
.bell-count-important { background: #b36b00; }
.bell-count-dot { min-width: 0.7rem; width: 0.7rem; height: 0.7rem; padding: 0; background: var(--brand); }

.attention-panel {
  width: min(380px, 92vw);
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.attention-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.attention-panel-body { max-height: 60vh; overflow-y: auto; }
.attention-panel-foot {
  display: block;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-weight: 600;
  text-decoration: none;
}

.att-list { list-style: none; margin: 0; padding: 0; }
.att-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-inline-start-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
}
.att-list-compact .att-item { margin-bottom: 0; border-radius: 0; border-inline-width: 0 0; border-top-width: 0; border-inline-start-width: 4px; cursor: pointer; }
.att-list-compact .att-item:hover { background: rgba(42, 120, 214, 0.06); }
.att-sev-critical { border-inline-start-color: var(--loss); }
.att-sev-important { border-inline-start-color: #b36b00; }
.att-sev-watch { border-inline-start-color: var(--ink-soft); }
.att-sev-opportunity { border-inline-start-color: var(--gain); }
.att-new .att-text { font-weight: 600; }
.att-body { min-width: 0; flex: 1 1 auto; }
.att-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.att-sev { padding: 0.2rem 0.65rem; font-size: 0.8rem; }
.att-symbol { text-decoration: none; }
.att-text { overflow-wrap: anywhere; }
.att-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; color: var(--ink-muted); font-size: 0.82rem; }
.att-dot { color: var(--ink-soft); }
.att-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.att-actions .btn { min-width: 40px; min-height: 40px; }
.text-stale { color: #8a5a00; font-weight: 600; }
@media (max-width: 575.98px) {
  .att-item { flex-direction: column; }
  .att-actions { align-self: flex-end; }
}

/* ---------------------------- Command Center: chart boxes and bottom navigation ---------------------------- */
.levels-chart, .chart-box { position: relative; height: 340px; }
@media (max-width: 575.98px) { .levels-chart, .chart-box { height: 260px; } }

.bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(11, 11, 11, 0.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a, .bottom-nav button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}
.bottom-nav i { font-size: 1.15rem; }
.bottom-nav a.active { color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
.bottom-nav a:focus-visible, .bottom-nav button:focus-visible { outline: 3px solid rgba(42, 120, 214, 0.5); outline-offset: -3px; }
@media (max-width: 991.98px) {
  body.has-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
.more-sheet { height: auto; max-height: 80vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.more-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.more-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.more-links a:hover { border-color: var(--brand); color: var(--brand); }
.more-links a.d-none { display: none; }

/* ---------------------------- Position Health and holding cards ---------------------------- */
.health-reasons { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.82rem; }
.health-reasons li { padding-inline-start: 0.9rem; position: relative; margin-bottom: 2px; color: var(--ink-muted); }
.health-reasons li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); }
.health-reasons li.health-risk::before { background: var(--loss); }
.health-reasons li.health-watch::before { background: #b36b00; }
.hold-card {
  display: block;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-decoration: none;
}
.hold-card:active { background: rgba(42, 120, 214, 0.06); }
.hold-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hold-card-symbol { display: block; font-weight: 700; font-size: 1.05rem; }
.hold-card-name { display: block; color: var(--ink-muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.hold-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; }
@media (max-width: 767.98px) { #holdingsCard { display: none !important; } }

/* Holdings table: give the Status column room so its reasons don't become a tall narrow strip. */
#holdingsTable th:nth-child(2), #holdingsTable td:nth-child(2) { min-width: 185px; }
#holdingsTable td:nth-child(2) .health-reasons { font-size: 0.78rem; }

/* Holdings table: two-line cells (main value, then a quieter detail line). */
.cell-sub { display: block; font-size: 0.78rem; font-weight: 400; color: var(--ink-muted); margin-top: 1px; }
.cell-sub.text-gain, .cell-sub.text-loss { color: inherit; }
#holdingsTable td { vertical-align: top; padding-top: 0.7rem; padding-bottom: 0.7rem; }
#holdingsTable tbody tr:hover { background: rgba(42, 120, 214, 0.04); }

/* Holdings table: fit a ~1000px card without a sideways scroll. Headers may wrap; amounts never do. */
#holdingsTable { font-size: 0.9rem; }
#holdingsTable th { white-space: normal; vertical-align: bottom; }
#holdingsTable td.text-end { white-space: nowrap; }
#holdingsTable th:first-child, #holdingsTable td:first-child { min-width: 150px; }
#holdingsTable th, #holdingsTable td { padding-inline: 0.5rem; }