/* ======================================================================
   Motyw „Dubai” — wygląd na wzór szablonu Cuba (Pixelstrap), układ Dubai.
   Warstwa nad app.css i aurora.css: zmienia tokeny i skórkę, nie strukturę stron.
   Jasny domyślnie; ciemny z przełącznika (data-theme="dark").
   Kolor główny = --brand (BRAND_ACCENT wdrożenia, domyślnie fiolet Cuby #7366ff).
   ====================================================================== */

:root {
  --font: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Rubik", "Segoe UI", system-ui, sans-serif;
  --primary: var(--brand);
  --primary-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --secondary: #838383;
  --grad-hero: linear-gradient(103.75deg, #33b1ee -13.9%, var(--brand) 79.68%);
  --radius: 8px;
  --radius-lg: 15px;
  --radius-float: 12px;
  --sidebar-w: 255px;
  --topbar-h: 76px;
  --card-shadow: 0 9px 20px rgba(46, 35, 94, .07);
  font-family: var(--font);
}

/* ---------- jasny (domyślny) ---------- */
:root:not([data-theme="dark"]) {
  --accent: var(--brand);
  --accent-soft: color-mix(in srgb, var(--brand) 11%, transparent);
  --bg: #f7f8f9;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: #f9f9fb;
  --surface-3: #eef0f4;
  --border: #e9edf1;
  --border-strong: #dde2e8;
  --text: #242934; --text-2: #52526c; --muted: #75758a;
  --signal: #3e9b34; --amber: #b87800; --coral: #e0392d;
  --won: #3e9b34; --won-soft: #dcf1da;
  --lost: #e0392d; --lost-soft: #ffe8e6;
  --warn: #b87800; --warn-soft: #fff4dd;
  --info: #1d86c2; --info-soft: #d5f5fe;
  --shadow-sm: var(--card-shadow);
  --shadow: var(--card-shadow);
  --shadow-lg: 0 18px 50px rgba(39, 32, 120, .16);
  --aurora-opacity: 0;
  color-scheme: light;
}
/* ---------- ciemny (Cuba dark) ---------- */
:root[data-theme="dark"] {
  --accent: color-mix(in srgb, var(--brand) 72%, #fff);
  --accent-soft: color-mix(in srgb, var(--brand) 22%, transparent);
  --bg: #1d1e26;
  --surface: #262932;
  --surface-solid: #262932;
  --surface-2: #2c303b;
  --surface-3: #323846;
  --border: #374558;
  --border-strong: #46566d;
  --text: #eef0f6; --text-2: #c2c8d4; --muted: #98a6ad;
  --signal: #65c15c; --amber: #ffb829; --coral: #fc564a;
  --won: #65c15c; --won-soft: color-mix(in srgb, #65c15c 18%, transparent);
  --lost: #fc564a; --lost-soft: color-mix(in srgb, #fc564a 18%, transparent);
  --warn: #ffb829; --warn-soft: color-mix(in srgb, #ffb829 16%, transparent);
  --info: #40b8f5; --info-soft: color-mix(in srgb, #40b8f5 16%, transparent);
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .45);
  --aurora-opacity: 0;
  color-scheme: dark;
}
:root:not([data-theme="dark"]) .theme-light { display: none; }
:root:not([data-theme="dark"]) .theme-dark { display: inline; }
:root[data-theme="dark"] .theme-light { display: inline; }
:root[data-theme="dark"] .theme-dark { display: none; }

/* ---------- podstawy: bez zorzy, gęstość i krój jak w Cuba ---------- */
.app::before, .auth::before { display: none; }
body { background: var(--bg); font-family: var(--font); font-size: 14px; color: var(--text); letter-spacing: .1px; }
h1, h2, h3, .display { font-family: var(--font-display); font-stretch: 100%; letter-spacing: 0; }
h1 { font-size: 24px; font-weight: 600; line-height: 1.25; }
h2 { font-size: 17px; font-weight: 600; color: var(--text); }
h3 { font-weight: 600; }
.head p, .lede { color: var(--muted); font-size: 14px; }
a { color: var(--primary); }
:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }

/* ---------- menu boczne ---------- */
.sidebar { background: var(--surface); border-right: 0; box-shadow: 0 0 11px rgba(69, 110, 243, .13); overflow-x: hidden; }
.sidebar nav { overflow-x: hidden; }
:root[data-theme="dark"] .sidebar { box-shadow: none; border-right: 1px solid var(--border); }
.brand { min-height: var(--topbar-h); padding: 0 1.2rem; border-bottom: 1px solid var(--border); margin-bottom: .6rem; }
.logo { background: var(--grad-hero); border-radius: 50%; font-family: var(--font); font-weight: 700; font-stretch: 100%; }
.brand-name { font-family: var(--font); font-weight: 600; font-stretch: 100%; font-size: 1.15rem; letter-spacing: .3px; }
.nav-group { margin-top: .4rem; }
.nav-label { font-family: var(--font); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text); opacity: .75; padding: .9rem 1.2rem .45rem; }
.nav-item { margin: 1px .6rem; padding: .62rem .9rem; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-2);
  position: relative; letter-spacing: .3px; }
.nav-item .i { color: var(--muted); stroke-width: 1.8; }
.nav-item:hover { background: var(--accent-soft); color: var(--primary); text-decoration: none; }
.nav-item:hover .i { color: var(--primary); }
.nav-item.active { background: var(--accent-soft); color: var(--primary); font-weight: 600; box-shadow: none; }
.nav-item.active .i { color: var(--primary); }
.nav-item.active::after { content: ""; position: absolute; right: -.6rem; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px;
  background: var(--primary); }
.collapse-btn { color: var(--muted); }

/* ---------- pasek górny ---------- */
.topbar { min-height: var(--topbar-h); background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0; box-shadow: 0 4px 40px rgba(39, 32, 120, .08); }
:root[data-theme="dark"] .topbar { box-shadow: none; border-bottom: 1px solid var(--border); }
.search-trigger { background: var(--bg); border: 1px solid transparent; border-radius: 8px; color: var(--muted); min-width: 320px; }
.search-trigger:hover { border-color: var(--border-strong); background: var(--bg); }
.icon-btn { background: transparent; border: 0; border-radius: 50%; color: var(--text); }
.icon-btn:hover { background: var(--accent-soft); color: var(--primary); }
.avatar { background: var(--accent-soft); color: var(--primary); font-weight: 600; }
.bell-count { background: #fc564a; color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.menu-panel, .palette { background: var(--surface-solid); border: 0; border-radius: var(--radius-float); box-shadow: var(--shadow-lg); }
.palette::backdrop { background: rgba(36, 41, 52, .45); backdrop-filter: blur(2px); }

/* ---------- treść: pas tytułu strony i karty ---------- */
.content { max-width: none; padding: 1.6rem 1.9rem 3rem; }
.head { align-items: center; margin-bottom: 1.6rem; }
.head h1 { margin: 0; }
.card, .glass, .hero-stats { background: var(--surface); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .glass, :root[data-theme="dark"] .hero-stats { border: 1px solid var(--border); }
.card > h2:first-child, .card > .row-between:first-child h2 { font-size: 17px; margin-bottom: 1rem; }
.empty { color: var(--muted); }

/* ---------- przyciski i pola ---------- */
.btn { border-radius: 6px; background: var(--primary); color: #fff; font-weight: 500; font-size: 14px; letter-spacing: .3px;
  border: 1px solid var(--primary); padding: .5rem 1.1rem; }
.btn:hover { background: color-mix(in srgb, var(--brand) 88%, #000); border-color: color-mix(in srgb, var(--brand) 88%, #000); }
.btn.small { padding: .3rem .75rem; font-size: 13px; }
.btn.ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.danger { background: #fc564a; border-color: #fc564a; }
input, select, textarea { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text);
  font-family: var(--font); font-size: 14px; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--surface-2); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
label { font-weight: 500; }
.chip-filter.on, .pill.on { background: var(--primary); border-color: var(--primary); }

/* ---------- etykiety stanu: pigułki z jasnym tłem jak w Cuba ---------- */
.badge, .tag2 { display: inline-flex; align-items: center; gap: .35rem; border-radius: 5px; padding: .3rem .65rem; font-size: 12px;
  font-weight: 600; letter-spacing: .3px; background: var(--surface-3); color: var(--text-2); border: 0; }
.badge::before, .tag2::before { display: none; }
.badge.status-won, .badge.status-rfq, .badge.inv-booked, .badge.inv-approved, .badge.wf-done, .tag2.ok { background: var(--won-soft); color: var(--won); }
.badge.status-lost, .badge.status-error, .badge.inv-rejected, .badge.wf-cancelled, .tag2.bad { background: var(--lost-soft); color: var(--lost); }
.badge.status-verify, .badge.status-new, .badge.inv-new, .tag2.warn { background: var(--warn-soft); color: var(--warn); }
.badge.status-thread, .badge.status-known, .badge.inv-review, .badge.wf-active, .tag2.info { background: var(--info-soft); color: var(--info); }
.badge.status-open { background: var(--accent-soft); color: var(--primary); }

/* ---------- tabele ---------- */
table.list { border-collapse: collapse; }
table.list thead th, th { background: transparent; color: var(--text); font-size: 13.5px; font-weight: 500; text-transform: none;
  border-bottom: 1px solid var(--border); }
table.list td, table.list th { padding: .8rem .9rem; }
table.list tbody tr:hover { background: var(--surface-2); }
td { border-bottom-color: var(--border); }

/* ---------- komunikaty ---------- */
.toast { border-radius: 8px; background: var(--surface-solid); border: 0; box-shadow: var(--shadow-lg), inset 4px 0 0 #65c15c; }
.toast.error { box-shadow: var(--shadow-lg), inset 4px 0 0 #fc564a; }
.notice { background: var(--accent-soft); border: 0; border-radius: 8px; color: var(--text); }
.notice.warn { background: var(--warn-soft); }

/* ---------- ekran „Dziś”: karta powitalna z gradientem jak w Dubai ---------- */
.hero { background: var(--grad-hero); color: #fff; border-radius: var(--radius-lg); padding: 1.8rem 2rem; box-shadow: var(--shadow);
  margin: 0 0 1.6rem; align-items: center; }
.hero h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; font-stretch: 100%;
  line-height: 1.15; letter-spacing: 0; color: #fff; }
.hero .lede, .hero .eyebrow { color: rgba(255, 255, 255, .88); }
.hero a { color: #fff; }
.hero-stats { box-shadow: 0 9px 20px rgba(24, 18, 80, .18); color: var(--text); }
.hero-stats .stat strong, .hero-stats .stat .sub { color: var(--text); }
.hero-stats .stat small { color: var(--muted); }
.hero-stats .stat + .stat { border-left-color: var(--border); }
.stat strong { font-family: var(--font-display); font-stretch: 100%; font-weight: 600; font-size: 22px; }
.stat small { color: var(--muted); }
.bars span.has, .ring { --signal: var(--brand); }
.bars span.has { background: var(--brand); }
.q-item[aria-current="true"] { box-shadow: inset 3px 0 0 var(--brand); }
.seg button[aria-pressed="true"] { background: var(--primary); color: #fff; }

/* ---------- wykresy, paski, kanban ---------- */
.bar div, .pj-bar > span { background: var(--grad-hero); }
.column { border-top: 0; background: var(--surface-2); border-radius: var(--radius-lg); padding: .7rem; }
.deal { border: 0; border-radius: 10px; box-shadow: var(--shadow); }

/* ---------- logowanie ---------- */
.auth { background: var(--bg); }
.auth-card { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* ======================================================================
   Pulpit w układzie Dubai: karta powitalna + kafelki KPI, wykres sprzedaży, licznik celu
   ====================================================================== */
.db-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem; margin-bottom: 1.4rem; }
.db-top .hero { margin: 0; display: flex; align-items: center; min-height: 100%; }
.hero-foot { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.hero-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .55); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; }
a.hero-pill:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.kpi-tile { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 1rem; row-gap: .25rem; align-items: center; padding: 1.15rem 1.25rem; color: var(--text); text-decoration: none;
  position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; --tone: var(--brand); }
a.kpi-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(46, 35, 94, .11); }
.kpi-tile.tone-success { --tone: #54ba4a; }
.kpi-tile.tone-warning { --tone: #ffaa05; }
.kpi-tile.tone-info { --tone: #40b8f5; }
.kpi-tile::after { content: ""; position: absolute; right: -28px; top: -28px; width: 110px; height: 110px; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 7%, transparent); pointer-events: none; }
.kpi-ring { grid-row: span 2; --p: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--tone) calc(var(--p) * 1%), color-mix(in srgb, var(--tone) 14%, transparent) 0); }
.kpi-ring > span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface);
  color: var(--tone); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--tone) 10%, var(--surface)); }
.kpi-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.kpi-text strong { font-size: 21px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-text small { color: var(--muted); font-size: 13px; }
.kpi-trend { align-self: start; font-size: 12px; font-weight: 600; padding: .2rem .5rem; border-radius: 5px; white-space: nowrap; }
.kpi-trend.up { color: var(--won); background: var(--won-soft); }
.kpi-trend.down { color: var(--lost); background: var(--lost-soft); }
.kpi-sub { grid-column: 2 / 4; font-size: 12px; color: var(--muted); }

.db-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 1.25rem; margin-bottom: 1.4rem; }
.db-row > .card { margin: 0; }
.sales-head { gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sales-totals { display: flex; gap: .6rem; }
.sales-totals span { display: flex; flex-direction: column; padding: .45rem .8rem; border-radius: 8px; background: var(--surface-2); }
.sales-totals b { font-size: 16px; font-weight: 600; }
.sales-totals small { font-size: 12px; color: var(--muted); }
.sales-chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; height: 260px; }
.sales-grid { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 1.4rem; font-size: 11.5px;
  color: var(--muted); text-align: right; }
.sales-bars { display: flex; align-items: flex-end; gap: clamp(4px, 1.4vw, 18px); padding-bottom: 1.4rem; position: relative;
  background: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px calc((100% - 1.4rem) / 4)); }
.sales-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.sales-stack { width: min(26px, 70%); min-height: 3px; border-radius: 6px 6px 2px 2px; display: flex; align-items: flex-end;
  background: color-mix(in srgb, var(--brand) 32%, transparent); overflow: hidden; transition: filter .15s; }
.sales-stack i { display: block; width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; }
.sales-col:hover .sales-stack { filter: brightness(1.08) saturate(1.1); }
.sales-col small { position: absolute; bottom: -1.35rem; font-size: 12px; color: var(--muted); }
.sales-legend { display: flex; gap: 1.2rem; font-size: 12.5px; color: var(--muted); margin-top: .4rem; }
.sales-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.l-sale { background: color-mix(in srgb, var(--brand) 32%, transparent); }
.l-margin { background: var(--brand); }

.target-card { display: flex; flex-direction: column; }
.gauge { position: relative; width: min(260px, 100%); margin: 1rem auto .4rem; }
.gauge svg { width: 100%; display: block; }
.gauge .g-track, .gauge .g-fill { fill: none; stroke-width: 16; stroke-linecap: round; }
.gauge .g-track { stroke: var(--surface-3); }
.gauge .g-fill { stroke: var(--brand); transition: stroke-dasharray .8s var(--ease, ease); }
.gauge-num { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; }
.gauge-num b { font-size: 30px; font-weight: 600; line-height: 1; }
.gauge-num small { color: var(--muted); font-size: 12.5px; margin-top: .25rem; }
.target-msg { text-align: center; color: var(--text-2); font-size: 13.5px; margin: .6rem auto 1rem; max-width: 34ch; }
.target-stats { display: flex; justify-content: space-around; gap: .5rem; border-top: 1px solid var(--border); padding-top: .9rem; margin-top: auto; }
.target-stats span { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.target-stats small { color: var(--muted); font-size: 12.5px; }
.target-stats b { font-size: 15px; font-weight: 600; }

@media (max-width: 1200px) { .db-top, .db-row { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } .sales-totals { width: 100%; } }
.sales-empty { margin: -150px auto 110px; max-width: 46ch; text-align: center; color: var(--muted); font-size: 13.5px; position: relative; background: var(--surface); padding: .6rem 1rem; border-radius: 8px; }