/* MarżaBot — premium visual layer. The application logic remains in app.js. */

:root[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #090d10;
  --surface: #12191d;
  --surface-subtle: #182126;
  --text: #f1f6f3;
  --muted: #8d9b94;
  --line: #28342f;
  --brand: #5ce1ad;
  --brand-strong: #82edc3;
  --brand-soft: #153229;
  --warning: #e2a34d;
  --warning-soft: #2e2416;
  --danger: #f07c7c;
  --danger-soft: #321c20;
  --blue: #7ba9ff;
  --sidebar: #070a0c;
  --sidebar-text: #f4f8f6;
  --sidebar-muted: #829189;
  --sidebar-note: #d9e4de;
  --sidebar-note-muted: #75847c;
  --sidebar-hover: rgba(255,255,255,0.045);
  --sidebar-line: rgba(255,255,255,0.085);
  --sidebar-active: rgba(92,225,173,0.11);
  --sidebar-active-text: #7ceabb;
  --accent: #5ce1ad;
  --accent-ink: #071a13;
  --button-text: #071a13;
  --hero-start: #174a39;
  --hero-end: #0d251d;
  --hero-line: #2a6c55;
  --recommendation-text: #cad8d0;
  --input-border: #34433c;
  --input-hover: #53665d;
  --secondary-button: #222d32;
  --chart-area: rgba(92,225,173,0.075);
  --focus-ring: rgba(92,225,173,0.26);
  --lux-panel: rgba(18,25,29,0.92);
  --lux-panel-raised: rgba(23,31,36,0.96);
  --lux-sidebar: rgba(7,10,12,0.96);
  --lux-topbar: rgba(9,13,16,0.8);
  --lux-ambient: rgba(52,156,119,0.12);
  --lux-ambient-2: rgba(76,106,173,0.07);
  --lux-highlight: rgba(255,255,255,0.075);
  --shadow: 0 18px 55px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.16);
}

:root[data-theme="forest"] {
  --bg: #edf1ec;
  --surface: #f9fbf8;
  --surface-subtle: #f0f4ef;
  --text: #18221d;
  --muted: #6d7a72;
  --line: #d5ddd7;
  --brand: #147554;
  --brand-strong: #0d593f;
  --brand-soft: #dcece4;
  --sidebar: #0e1914;
  --sidebar-active: rgba(89,214,160,0.13);
  --accent: #49ca91;
  --lux-panel: rgba(249,251,248,0.94);
  --lux-panel-raised: rgba(255,255,255,0.98);
  --lux-sidebar: rgba(14,25,20,0.97);
  --lux-topbar: rgba(237,241,236,0.84);
  --lux-ambient: rgba(20,117,84,0.11);
  --lux-ambient-2: rgba(164,132,75,0.07);
  --lux-highlight: rgba(255,255,255,0.9);
  --shadow: 0 18px 48px rgba(40,62,50,0.09), 0 2px 8px rgba(40,62,50,0.05);
}

:root[data-theme="ocean"] {
  --bg: #edf2f8;
  --surface: #f8fafc;
  --surface-subtle: #eff4f9;
  --text: #172538;
  --muted: #66778d;
  --line: #d5dfeb;
  --brand: #286cca;
  --brand-strong: #174f9d;
  --brand-soft: #dce9fb;
  --sidebar: #0c1728;
  --sidebar-active: rgba(87,153,255,0.15);
  --accent: #5a9bff;
  --lux-panel: rgba(248,250,252,0.94);
  --lux-panel-raised: rgba(255,255,255,0.98);
  --lux-sidebar: rgba(12,23,40,0.97);
  --lux-topbar: rgba(237,242,248,0.84);
  --lux-ambient: rgba(40,108,202,0.12);
  --lux-ambient-2: rgba(50,171,184,0.07);
  --lux-highlight: rgba(255,255,255,0.92);
  --shadow: 0 18px 48px rgba(35,57,91,0.1), 0 2px 8px rgba(35,57,91,0.05);
}

:root[data-theme="violet"] {
  --bg: #f1eef6;
  --surface: #fbf9fd;
  --surface-subtle: #f4f0f8;
  --text: #292139;
  --muted: #776c86;
  --line: #e0d9e8;
  --brand: #7052c8;
  --brand-strong: #5336a9;
  --brand-soft: #e6def7;
  --sidebar: #171222;
  --sidebar-active: rgba(167,132,255,0.14);
  --accent: #a686ff;
  --lux-panel: rgba(251,249,253,0.94);
  --lux-panel-raised: rgba(255,255,255,0.98);
  --lux-sidebar: rgba(23,18,34,0.97);
  --lux-topbar: rgba(241,238,246,0.84);
  --lux-ambient: rgba(112,82,200,0.11);
  --lux-ambient-2: rgba(194,85,168,0.07);
  --lux-highlight: rgba(255,255,255,0.9);
  --shadow: 0 18px 48px rgba(61,43,86,0.1), 0 2px 8px rgba(61,43,86,0.05);
}

* { scrollbar-color: var(--input-border) transparent; }

body {
  background:
    radial-gradient(circle at 18% 0%, var(--lux-ambient), transparent 31rem),
    radial-gradient(circle at 92% 8%, var(--lux-ambient-2), transparent 28rem),
    var(--bg);
  font-family: "Segoe UI Variable", "Aptos", Inter, ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.006em;
}

button, input, select { letter-spacing: inherit; }

.app-shell {
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  padding: 26px 18px 20px;
  background: var(--lux-sidebar);
  border-right: 1px solid var(--sidebar-line);
  box-shadow: 18px 0 48px rgba(0,0,0,0.08);
  backdrop-filter: blur(20px);
}

.brand {
  gap: 12px;
  padding: 0 8px 30px;
  font-size: 18px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 13px;
  background: transparent;
  box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 16%, transparent);
}
.brand-mark img { width: 100%; height: 100%; display: block; }

.brand-copy { display: grid; gap: 1px; }
.brand-copy > span { font-weight: 760; letter-spacing: -0.035em; }
.brand-copy small { color: var(--sidebar-note-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }

.main-nav { gap: 5px; }
.nav-section-label {
  margin: 18px 12px 5px;
  color: var(--sidebar-note-muted);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-section-label:first-child { margin-top: 0; }

.nav-item {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--sidebar-muted);
  font-size: 13px;
  font-weight: 590;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.nav-item:hover {
  transform: translateX(2px);
  border-color: var(--sidebar-line);
  background: var(--sidebar-hover);
}

.nav-item.is-active {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: linear-gradient(90deg, var(--sidebar-active), transparent 130%);
  color: var(--sidebar-active-text);
  box-shadow: inset 3px 0 0 var(--accent), 0 10px 26px rgba(0,0,0,0.08);
}

.nav-item > span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-size: 13px;
}

.nav-badge {
  min-width: 20px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
  background: color-mix(in srgb, var(--danger) 20%, transparent);
  color: var(--danger);
  font-size: 9px;
}

.sidebar-note {
  padding: 13px;
  border-color: var(--sidebar-line);
  border-radius: 14px;
  background: rgba(255,255,255,0.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.main-content {
  padding: 34px clamp(24px, 4vw, 64px) 70px;
}

.topbar {
  margin-bottom: 34px;
  align-items: flex-end;
}

.topbar h1 {
  margin-top: 4px;
  font-size: clamp(32px, 3.5vw, 46px);
  font-weight: 690;
  line-height: 1.02;
  letter-spacing: -0.052em;
}

.eyebrow {
  color: var(--brand);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.16em;
}

.topbar-actions { display: flex; align-items: center; gap: 12px; }
.system-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.system-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 11%, transparent), 0 0 16px color-mix(in srgb, var(--brand) 50%, transparent);
}

.button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 720;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  border-color: color-mix(in srgb, var(--brand) 72%, transparent);
  background: linear-gradient(135deg, var(--accent), var(--brand));
  color: var(--accent-ink);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 18%, transparent), inset 0 1px 0 rgba(255,255,255,0.35);
}
.button-primary:hover { background: linear-gradient(135deg, var(--brand-strong), var(--brand)); }
.button-secondary {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-subtle) 84%, transparent);
}
.button-secondary:hover { border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); }

.page.is-active { animation: premium-reveal 260ms ease-out both; }
@keyframes premium-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.stats-grid { gap: 12px; }

.stat-card, .panel, .table-card, .result-hero, .recommendation-card, .alert-item {
  border-color: var(--line);
  background: linear-gradient(155deg, var(--lux-highlight) -70%, transparent 24%), var(--lux-panel);
  box-shadow: var(--shadow), inset 0 1px 0 var(--lux-highlight);
}

.stat-card {
  position: relative;
  min-height: 142px;
  overflow: hidden;
  padding: 23px;
  border-radius: 17px;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 23px;
  width: 42px;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: var(--brand);
  box-shadow: 0 0 18px color-mix(in srgb, var(--brand) 44%, transparent);
}
.stat-card::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -46px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  filter: blur(2px);
}
.stat-card span { font-size: 11px; font-weight: 610; letter-spacing: 0.01em; }
.stat-card strong { margin: auto 0 5px; padding-top: 22px; font-size: 31px; font-weight: 680; letter-spacing: -0.045em; }
.stat-card small { font-size: 10px; }

.recommendation-card {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  padding: 22px 24px;
  border-color: color-mix(in srgb, var(--warning) 32%, var(--line));
  background:
    radial-gradient(circle at 92% -40%, color-mix(in srgb, var(--warning) 18%, transparent), transparent 40%),
    linear-gradient(115deg, color-mix(in srgb, var(--warning-soft) 90%, var(--surface)), var(--lux-panel));
}
.recommendation-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--warning) 82%, white), var(--warning));
  color: color-mix(in srgb, var(--warning) 18%, black);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--warning) 20%, transparent);
}
.recommendation-card h2 { margin-top: 5px; font-size: 16px; font-weight: 680; letter-spacing: -0.02em; }

.dashboard-grid { gap: 12px; margin-top: 12px; grid-template-columns: minmax(0, 1.65fr) minmax(310px, 0.72fr); }
.panel { padding: 24px; border-radius: 18px; }
.panel-heading h2, .page-toolbar h2, .result-panel h2 { font-size: 16px; font-weight: 690; letter-spacing: -0.02em; }
.panel-heading p, .page-toolbar p { margin-top: 5px; font-size: 11px; }
.pill { border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); background: color-mix(in srgb, var(--brand-soft) 80%, transparent); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; }

.forecast-chart { margin-top: 20px; }
.forecast-chart .grid { stroke: color-mix(in srgb, var(--line) 76%, transparent); }
.forecast-chart .revenue-path, .forecast-chart .profit-path { filter: drop-shadow(0 5px 8px color-mix(in srgb, currentColor 16%, transparent)); }
.chart-legend { margin-top: 8px; }

.ranking-row { padding: 15px 2px; transition: padding 150ms ease, background 150ms ease; }
.ranking-row:hover { padding-inline: 8px; background: color-mix(in srgb, var(--brand) 4%, transparent); }
.ranking-row strong { font-size: 12px; }

.page-toolbar { margin-bottom: 18px; }
.select-label, .field, .compact-field { font-size: 11px; font-weight: 640; }

select, input {
  min-height: 43px;
  border-color: var(--input-border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-subtle) 84%, transparent);
  box-shadow: inset 0 1px 0 var(--lux-highlight);
}
input:focus, select:focus { box-shadow: 0 0 0 3px var(--focus-ring), inset 0 1px 0 var(--lux-highlight); }

.table-card { border-radius: 18px; }
th { padding-block: 13px; background: color-mix(in srgb, var(--surface-subtle) 72%, transparent); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
td { padding-block: 17px; }
tbody tr { transition: background 140ms ease; }
tbody tr:hover { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.icon-button { border-color: var(--line); border-radius: 9px; background: transparent; font-size: 10px; font-weight: 650; }

.calculator-layout { gap: 12px; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.62fr); }
.form-grid { gap: 15px; }
.vat-settings { border-color: var(--line); }
.result-hero {
  padding: 27px;
  border-radius: 19px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255,255,255,0.16), transparent 33%),
    linear-gradient(145deg, var(--hero-start), var(--hero-end));
}
.result-hero strong { font-size: 44px; font-weight: 680; }
.result-status { border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); }

.alert-list { gap: 10px; }
.alert-item {
  padding: 19px 20px;
  border-radius: 17px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.08), inset 0 1px 0 var(--lux-highlight);
  transition: transform 150ms ease, border-color 150ms ease;
}
.alert-item:hover { transform: translateY(-2px); }
.alert-item.critical, .alert-item.warning, .alert-item.info { border-left-width: 2px; }
.alert-marker { border: 1px solid var(--line); background: var(--surface-subtle); }
.alert-level { border: 1px solid var(--line); background: transparent; font-size: 8px; letter-spacing: 0.09em; }
.alert-copy h2 { font-size: 15px; }

.import-layout, .report-grid { gap: 12px; }
.import-dropzone {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--input-border));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-subtle) 76%, transparent);
}
.import-icon { background: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 12%, transparent); }

.simulator-controls { padding-top: 22px; border-top: 1px solid var(--line); }
.range-field input { min-height: auto; box-shadow: none; }
.highlight-card { background: linear-gradient(145deg, color-mix(in srgb, var(--brand-soft) 82%, transparent), var(--lux-panel)); }

.report-header { margin-bottom: 22px; }
.report-header h2 { font-size: 24px; letter-spacing: -0.035em; }
.profit-bar-track { height: 7px; background: color-mix(in srgb, var(--line) 52%, transparent); }
.profit-bar-track i { background: linear-gradient(90deg, var(--brand), var(--accent)); box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 18%, transparent); }

.settings-grid { gap: 12px; }
.settings-panel { min-height: 100%; }
.settings-switch { border-color: var(--line); }
.theme-card {
  border-color: var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-subtle) 74%, transparent);
  transition: transform 150ms ease, border-color 150ms ease;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--focus-ring), 0 14px 28px color-mix(in srgb, var(--brand) 8%, transparent); }
.settings-save-bar { border-radius: 16px; background: var(--lux-panel-raised); }
.data-actions { border-color: var(--line); }

.toast {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--lux-panel-raised);
  color: var(--text);
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 238px minmax(0, 1fr); }
  .main-content { padding-inline: 28px; }
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; padding: 15px 16px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; }
  .brand { padding: 0; }
  .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .brand-copy small { display: none; }
  .main-nav { width: 100%; order: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .nav-section-label { display: none; }
  .nav-item { width: auto; justify-content: center; padding: 9px 7px; font-size: 10px; }
  .nav-item:hover { transform: none; }
  .nav-item.is-active { box-shadow: inset 0 -2px 0 var(--accent); }
  .nav-item > span { display: none; }
  .sidebar-note { display: none; }
  .main-content { padding: 26px 18px 56px; }
  .topbar { margin-bottom: 26px; }
  .topbar h1 { font-size: 34px; }
  .dashboard-grid, .calculator-layout, .import-layout, .report-grid, .settings-grid { grid-template-columns: 1fr; }
  .calculator-result { position: static; grid-template-columns: 1fr 1fr; }
  .settings-data-panel { grid-column: auto; }
}

@media (max-width: 640px) {
  .main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { align-items: flex-end; }
  .topbar h1 { font-size: 29px; }
  .system-state { display: none; }
  .topbar-actions .button { min-height: 39px; padding-inline: 12px; }
  .stats-grid, .alerts-stats, .simulator-stats { grid-template-columns: 1fr; }
  .stat-card { min-height: 126px; }
  .calculator-result { grid-template-columns: 1fr; }
  .panel { padding: 19px; }
  .recommendation-card { padding: 18px; }
  .alert-item { grid-template-columns: auto minmax(0, 1fr); }
  .alert-impact { grid-column: 1 / -1; padding-left: 52px; text-align: left; }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-actions { grid-template-columns: 1fr; }
  .settings-save-bar { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .page.is-active { animation: none; }
  .nav-item, .button, .alert-item, .theme-card, .ranking-row { transition: none; }
}