/* Styling ported from design/podglad-ui.html (ADR-006). Token values must stay
   in sync with the reference's :root and Theme/StockAppTheme.cs. Real client
   pages use these classes directly (plain tables/cards) for the reference's
   density; MudBlazor supplies inputs, buttons, layout and snackbars. */
:root {
    --bg: #0B0E14;
    --surface: #12161F;
    --surface-2: #181D28;
    --surface-hover: #1D2330;
    --border: #232A38;
    --text: #E7ECF3;
    --text-dim: #8A94A6;
    --text-faint: #5C6577;
    --accent: #2DD4BF;
    --accent-dim: #12433D;
    --up: #22C55E;
    --up-dim: #123222;
    --down: #F0555A;
    --down-dim: #3A1518;
    --warn: #F0A93E;
    --warn-dim: #3A2A10;
    --info: #4A9EFF;
    --info-dim: #122A44;
    --gray: #6B7688;
    --gray-dim: #242A36;
    --radius: 10px;
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
}

.mud-appbar { z-index: 1300; }
.app-topbar { border-bottom: 1px solid var(--border); }
.app-sidebar { border-right: 1px solid var(--border); }

/* MudPaper used as a card: flat surface + hairline border. */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-popover):not(.mud-snackbar) {
    border: 1px solid var(--border);
    box-shadow: none;
}

.mud-table-head .mud-table-cell { color: var(--text-dim); font-size: .75rem; font-weight: 600; }
.mud-table-cell { font-variant-numeric: tabular-nums; }

.num { font-variant-numeric: tabular-nums; }
.right { text-align: right !important; }

/* page headings */
h1.page-h1 { font-size: 20px; margin: 0 0 4px; font-weight: 700; }
p.page-lead { color: var(--text-dim); font-size: 13px; margin: 0 0 20px; }

/* grids */
.grid { display: grid; gap: 14px; }
.g-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2 { grid-template-columns: 1.4fr 1fr; }
.g-2-even { grid-template-columns: 1fr 1fr; }
.g-div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .g-2, .g-2-even, .g-div { grid-template-columns: 1fr; }
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    min-width: 0;
}
.card h3 { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.card .hint { font-size: 11.5px; color: var(--text-faint); margin-top: -8px; margin-bottom: 12px; }

.kpi-label { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.kpi-value { font-size: 24px; font-weight: 700; letter-spacing: -.2px; }
.kpi-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }

/* tables */
table.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dt thead th {
    text-align: left; color: var(--text-faint); font-weight: 600; font-size: 11px;
    letter-spacing: .3px; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.dt tbody td {
    padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: middle;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt tbody tr:hover { background: var(--surface-hover); }
table.dt th.right, table.dt td.right { text-align: right; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.table-scroll table.dt th:first-child,
.table-scroll table.dt td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface);
    box-shadow: 2px 0 4px rgba(0, 0, 0, .25);
}
.table-scroll table.dt tbody tr:hover td:first-child { background: var(--surface-hover); }

.ticker-cell { display: flex; flex-direction: column; }
.ticker-cell a, .ticker-link { color: var(--text); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.ticker-cell a:hover, .ticker-link:hover { color: var(--accent); }
.ticker-cell span { font-size: 11px; color: var(--text-faint); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.up { color: var(--up); }
.down { color: var(--down); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.na { color: var(--text-faint); font-style: italic; }

/* badges */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 700;
    border: 1px solid transparent; white-space: nowrap;
}
.badge.score-hi { background: var(--up-dim); color: var(--up); border-color: #1E4A2E; }
.badge.score-mid-hi { background: var(--info-dim); color: var(--info); border-color: #1E3A5A; }
.badge.score-mid { background: var(--warn-dim); color: var(--warn); border-color: #5A431A; }
.badge.score-lo { background: var(--down-dim); color: var(--down); border-color: #5A1E22; }
.badge.score-na { background: var(--gray-dim); color: var(--gray); border-color: #333B4A; }
.badge.low-confidence { border-style: dashed; opacity: .8; }

.rec {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
}
.rec-kup { background: var(--up-dim); color: var(--up); border: 1px solid #1E4A2E; }
.rec-obserwuj { background: var(--info-dim); color: var(--info); border: 1px solid #1E3A5A; }
.rec-trzymaj { background: var(--warn-dim); color: var(--warn); border: 1px solid #5A431A; }
.rec-czekaj { background: var(--gray-dim); color: #AEB6C4; border: 1px solid #333B4A; }
.rec-unikaj { background: var(--down-dim); color: var(--down); border: 1px solid #5A1E22; }

.chip {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 100px;
    font-size: 10.5px; font-weight: 600; background: var(--surface-2); color: var(--text-dim);
    border: 1px solid var(--border); white-space: nowrap;
}

/* data status (freshness/coverage) chips */
.status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px;
    font-size: 10px; font-weight: 800; letter-spacing: .4px; white-space: nowrap; border: 1px solid transparent; }
.status-live { background: var(--up-dim); color: var(--up); border-color: #1E4A2E; }
.status-delayed { background: var(--info-dim); color: var(--info); border-color: #1E3A5A; }
.status-eod { background: var(--gray-dim); color: #AEB6C4; border-color: #333B4A; }
.status-current { background: var(--accent-dim); color: var(--accent); border-color: #1D5A52; }
.status-stale, .status-limited { background: var(--warn-dim); color: var(--warn); border-color: #5A431A; }
.status-insufficient, .status-missing { background: var(--down-dim); color: var(--down); border-color: #5A1E22; }

/* alerts */
.alert {
    display: flex; gap: 10px; padding: 12px 14px; border-radius: 9px; font-size: 13px;
    border: 1px solid transparent; align-items: flex-start;
}
.alert.info { background: var(--info-dim); border-color: #1E3A5A; color: #BFE0FF; }
.alert.warn { background: var(--warn-dim); border-color: #5A431A; color: #F5DDA8; }
.alert.success { background: var(--up-dim); border-color: #1E4A2E; color: #B9EFC7; }
.alert.error { background: var(--down-dim); border-color: #5A1E22; color: #FFC7C9; }
.alert.neutral { background: var(--surface-2); border-color: var(--border); color: var(--text-dim); }
.alert b { color: inherit; }

.section-title { font-size: 13.5px; font-weight: 600; margin: 26px 0 12px; color: var(--text); }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-dim); }
.kv .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.score-block { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.score-block .top { display: flex; justify-content: space-between; align-items: center; }
.score-block .title { font-size: 12px; color: var(--text-dim); }
.score-block .val { font-size: 26px; font-weight: 800; }
.score-block .rationale { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; line-height: 1.45; }
.bar-track { height: 6px; background: #232A38; border-radius: 100px; overflow: hidden; margin-top: 6px; }
.bar-fill { height: 100%; border-radius: 100px; }

.pill-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.pill-tab {
    padding: 7px 13px; border-radius: 100px; font-size: 12.5px; font-weight: 600;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer;
}
.pill-tab:hover { color: var(--text); }
.pill-tab.active { background: var(--accent-dim); border-color: #1D5A52; color: var(--accent); }

.company-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.company-head .price { font-size: 28px; font-weight: 800; text-align: right; }
.meta-line { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.empty-state { text-align: center; padding: 36px 16px; color: var(--text-dim); }
.empty-state h2 { color: var(--text); font-size: 18px; margin: 0 0 8px; }

.disclaimer { color: var(--text-faint); font-size: 11px; margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border); }

.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; }

@media (max-width: 600px) {
    .card { padding: 13px 14px; border-radius: 9px; }
    .kpi-value { font-size: 20px; }
    .company-head .price { text-align: left; font-size: 24px; }
}

/* ---- UI/UX pass (2026-10-02): explanations, sections, progressive disclosure, focus ---- */

/* small "i" next to a term; the explanation is a tooltip (hover or keyboard focus) */
.info-tip {
    display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 4px;
    border-radius: 50%; border: 1px solid var(--border); color: var(--text-faint); font-size: 10px; font-weight: 700;
    font-style: normal; cursor: help; vertical-align: middle; background: transparent; padding: 0; line-height: 1;
}
.info-tip:hover, .info-tip:focus-visible { color: var(--accent); border-color: #1D5A52; }

/* numbered page sections on the company page */
.section-head { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 4px; flex-wrap: wrap; }
.section-head .no { color: var(--accent); font-weight: 800; font-size: 13px; }
.section-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.section-lead { color: var(--text-dim); font-size: 12.5px; margin: 0 0 12px; max-width: 900px; }

/* expandable "Jak to liczymy?" / "Źródło danych" blocks */
details.more { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
details.more > summary {
    cursor: pointer; color: var(--text-dim); font-size: 12px; font-weight: 600; list-style: none; user-select: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "▸ "; color: var(--text-faint); }
details.more[open] > summary::before { content: "▾ "; }
details.more > summary:hover { color: var(--text); }
details.more .more-body { margin-top: 8px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* positive / negative factor lists inside score blocks */
.factors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; font-size: 11.5px; }
.factors ul { margin: 2px 0 0; padding-left: 16px; color: var(--text-dim); }
.factors .h-pos { color: var(--up); font-weight: 700; }
.factors .h-neg { color: var(--down); font-weight: 700; }
@media (max-width: 600px) { .factors { grid-template-columns: 1fr; } }

/* availability chips in the company header */
.avail { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.avail .chip.ok { color: var(--accent); border-color: #1D5A52; background: var(--accent-dim); }
.avail .chip.missing { color: var(--text-faint); }

/* attention lists on the dashboard */
.att-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.att-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.att-list li:last-child { border-bottom: none; }
.att-list .why { color: var(--text-faint); font-size: 12px; text-align: right; }

/* pill tabs are real buttons (keyboard) */
button.pill-tab { font-family: inherit; line-height: 1.2; }

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible, .pill-tab:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

.btn-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Sign-in and account (ADR-014) ===== */
.auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; background: radial-gradient(1200px 500px at 50% -10%, #12302C 0%, var(--bg) 60%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.auth-card {
    width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 28px 26px 22px;
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-logo {
    width: 38px; height: 38px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-dim); color: var(--accent); font-weight: 800; font-size: 14px; letter-spacing: .5px;
}
.auth-title { font-size: 17px; font-weight: 700; }
.auth-sub { font-size: 12px; color: var(--text-dim); }
.auth-h1 { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-form label { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; }
.auth-form input {
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
    padding: 10px 12px; font: inherit; font-size: 14px; outline: none;
}
.auth-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, .15); }
.auth-submit {
    margin-top: 16px; background: var(--accent); color: var(--bg); border: 0; border-radius: 8px;
    padding: 11px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.auth-submit:hover { filter: brightness(1.08); }
.auth-submit:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.auth-note { font-size: 11.5px; color: var(--text-faint); margin: 16px 0 0; text-align: center; }

.user-menu { display: flex; align-items: center; gap: 12px; font-size: 12.5px; min-width: 0; }
.user-name { color: var(--text-dim); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 11px; }
.user-link {
    background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12.5px;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.user-link:hover { text-decoration: underline; }
.user-logout-form { display: inline; margin: 0; }
@media (max-width: 700px) {
    .user-name, .user-role { display: none; }
}