/* ============================================================================
   Price Tracker — Design System v2 components
   ----------------------------------------------------------------------------
   Component classes that consume the `--ptn-*` tokens (theme-next.css). They live
   in the `.ptn-*` namespace and are applied deliberately — they do NOT override
   Bootstrap or the legacy `.pt-*` classes, so existing pages are untouched.

   The identity lives here:
     • `.ptn-num` — JetBrains Mono with tabular numerals. Every figure/price uses
       it; aligned columns are the backbone of a pricing tool.
     • `.ptn-flow` accents — the EcoFlow blue (#3F68E0), used sparingly as the one
       bold cue (Boemar-monochrome base + single EcoFlow accent).
     • `.ptn-rise` / `.ptn-fall` — directional color, semantic (rise = attention).
     • `.ptn-spark` — sparkline well (the FAZ 2 signature; styled now).

   No bare element selectors — everything is opt-in via a class.
   ========================================================================== */

/* ── Figures & numerals (the signature) ──────────────────────────────────── */
.ptn-num {
  font-family: var(--ptn-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}
.ptn-num--lg { font-size: var(--ptn-fs-lg); font-weight: var(--ptn-fw-semi); }
.ptn-num--xl { font-size: var(--ptn-fs-2xl); font-weight: var(--ptn-fw-bold); }

.ptn-rise { color: var(--ptn-rise); }
.ptn-fall { color: var(--ptn-fall); }
.ptn-delta { font-family: var(--ptn-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--ptn-fw-semi); }

/* ── Eyebrow / section labels ─────────────────────────────────────────────── */
.ptn-eyebrow {
  font-family: var(--ptn-font-body);
  font-size: var(--ptn-fs-xs);
  font-weight: var(--ptn-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--ptn-tracking-caps);
  color: var(--ptn-ink-mute);
}

/* ── Display headings (Space Grotesk) ─────────────────────────────────────── */
.ptn-display {
  font-family: var(--ptn-font-display);
  font-weight: var(--ptn-fw-bold);
  letter-spacing: var(--ptn-tracking-tight);
  line-height: var(--ptn-lh-tight);
  color: var(--ptn-ink);
  margin: 0;
}
.ptn-display--xl { font-size: var(--ptn-fs-3xl); }
.ptn-display--lg { font-size: var(--ptn-fs-2xl); }
.ptn-display--md { font-size: var(--ptn-fs-xl); }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.ptn-card {
  background: var(--ptn-surface);
  border: 1px solid var(--ptn-line);
  border-radius: var(--ptn-radius-lg);
  box-shadow: var(--ptn-shadow);
}
.ptn-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ptn-space-3);
  padding: var(--ptn-space-4) var(--ptn-space-5);
  border-bottom: 1px solid var(--ptn-line);
}
.ptn-card__title {
  font-family: var(--ptn-font-display);
  font-size: var(--ptn-fs-lg); font-weight: var(--ptn-fw-semi);
  margin: 0; color: var(--ptn-ink);
}
.ptn-card__body { padding: var(--ptn-space-5); }
.ptn-card__body--flush { padding: 0; }

/* ── Stat / KPI ───────────────────────────────────────────────────────────── */
.ptn-stat {
  position: relative; overflow: hidden;
  padding: var(--ptn-space-5);
  background: var(--ptn-surface);
  border: 1px solid var(--ptn-line);
  border-radius: var(--ptn-radius-lg);
  box-shadow: var(--ptn-shadow);
}
.ptn-stat__icon {
  width: 44px; height: 44px; border-radius: var(--ptn-radius-md);
  display: grid; place-items: center; font-size: 1.25rem;
  margin-bottom: var(--ptn-space-4);
  background: var(--ptn-flow-soft); color: var(--ptn-flow-ink);
}
.ptn-stat__value {
  font-family: var(--ptn-font-display);
  font-size: var(--ptn-fs-2xl); font-weight: var(--ptn-fw-bold);
  line-height: var(--ptn-lh-tight); color: var(--ptn-ink);
  font-variant-numeric: tabular-nums;
}
.ptn-stat__label { color: var(--ptn-ink-soft); font-size: var(--ptn-fs-sm); font-weight: var(--ptn-fw-medium); }
.ptn-stat__sub { color: var(--ptn-ink-mute); font-size: var(--ptn-fs-xs); margin-top: var(--ptn-space-1); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.ptn-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--ptn-fs-xs); font-weight: var(--ptn-fw-semi);
  padding: .2rem .55rem; border-radius: var(--ptn-radius-pill);
  line-height: 1.4; white-space: nowrap;
}
.ptn-badge--up    { background: var(--ptn-rise-soft); color: var(--ptn-rise); }
.ptn-badge--down  { background: var(--ptn-fall-soft); color: var(--ptn-fall); }
.ptn-badge--info  { background: var(--ptn-info-soft); color: var(--ptn-info); }
.ptn-badge--warn  { background: var(--ptn-warn-soft); color: var(--ptn-warn); }
.ptn-badge--off   { background: var(--ptn-surface-2); color: var(--ptn-ink-soft); }
.ptn-badge--flow  { background: var(--ptn-flow-soft); color: var(--ptn-flow-ink); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ptn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--ptn-font-body); font-size: var(--ptn-fs-sm); font-weight: var(--ptn-fw-semi);
  padding: .5rem .9rem; border-radius: var(--ptn-radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--ptn-dur) var(--ptn-ease), border-color var(--ptn-dur) var(--ptn-ease),
              color var(--ptn-dur) var(--ptn-ease), box-shadow var(--ptn-dur) var(--ptn-ease);
}
.ptn-btn:focus-visible { outline: none; box-shadow: var(--ptn-ring); }
.ptn-btn--flow { background: var(--ptn-flow); color: #fff; }
.ptn-btn--flow:hover { background: var(--ptn-flow-ink); color: #fff; }
.ptn-btn--ghost { background: transparent; color: var(--ptn-ink); border-color: var(--ptn-line-strong); }
.ptn-btn--ghost:hover { background: var(--ptn-surface-2); border-color: var(--ptn-ink-mute); }
.ptn-btn--soft { background: var(--ptn-flow-soft); color: var(--ptn-flow-ink); }
.ptn-btn--soft:hover { background: var(--ptn-flow); color: #fff; }
.ptn-btn--danger { background: transparent; color: var(--ptn-rise); border-color: var(--ptn-rise); }
.ptn-btn--danger:hover { background: var(--ptn-rise); color: #fff; }
.ptn-btn--sm { padding: .35rem .7rem; font-size: var(--ptn-fs-xs); }

/* ── Data table ───────────────────────────────────────────────────────────── */
.ptn-table { width: 100%; border-collapse: collapse; color: var(--ptn-ink); }
.ptn-table thead th {
  font-family: var(--ptn-font-body);
  font-size: var(--ptn-fs-xs); font-weight: var(--ptn-fw-semi);
  text-transform: uppercase; letter-spacing: var(--ptn-tracking-caps);
  color: var(--ptn-ink-mute); text-align: left;
  padding: var(--ptn-space-3) var(--ptn-space-4);
  border-bottom: 1px solid var(--ptn-line); white-space: nowrap;
}
.ptn-table tbody td {
  padding: var(--ptn-space-3) var(--ptn-space-4);
  border-bottom: 1px solid var(--ptn-line); vertical-align: middle;
}
.ptn-table tbody tr:last-child td { border-bottom: 0; }
.ptn-table tbody tr:hover td { background: var(--ptn-surface-2); }
.ptn-table .ptn-num { font-size: var(--ptn-fs-sm); }

/* ── Sparkline well (signature element; FAZ 2 draws the SVGs) ─────────────── */
.ptn-spark { display: inline-block; vertical-align: middle; }
.ptn-spark svg { display: block; }
.ptn-spark path.line { fill: none; stroke-width: 1.5; }
.ptn-spark path.area { stroke: none; opacity: .12; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.ptn-empty { text-align: center; padding: var(--ptn-space-7) var(--ptn-space-4); color: var(--ptn-ink-mute); }
.ptn-empty__icon { font-size: 2.25rem; display: block; margin-bottom: var(--ptn-space-3); opacity: .45; }
.ptn-empty__title { font-family: var(--ptn-font-display); font-size: var(--ptn-fs-lg); color: var(--ptn-ink); margin-bottom: var(--ptn-space-1); }

/* ── Divider ──────────────────────────────────────────────────────────────── */
.ptn-rule { height: 1px; background: var(--ptn-line); border: 0; margin: var(--ptn-space-5) 0; }

/* ── Auth (login) layout — full-screen, content_anon block ───────────────────
   EcoFlow-blue radial glows on Boemar ink. Used by auth/login.html. */
.ptn-auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--ptn-space-5);
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(63,104,224,.32), transparent 60%),
    radial-gradient(1000px 600px at 110% 110%, rgba(33,100,255,.22), transparent 55%),
    linear-gradient(160deg, var(--ptn-ink) 0%, #161A21 55%, var(--ptn-ink) 100%);
}
.ptn-auth__card { width: 100%; max-width: 420px; }
.ptn-auth__card .ptn-card { border: 1px solid rgba(255,255,255,.08); box-shadow: var(--ptn-shadow-lg); }
.ptn-auth__brand { display: flex; align-items: center; justify-content: center; gap: .7rem; color: #fff; margin-bottom: var(--ptn-space-5); }
.ptn-auth__brand .ptn-brand__mark { width: 44px; height: 44px; }
.ptn-auth__brand-name { font-family: var(--ptn-font-display); font-weight: var(--ptn-fw-bold); font-size: 1.25rem; line-height: 1.1; }
.ptn-auth__brand-sub { display: block; font-weight: var(--ptn-fw-regular); font-size: .72rem; color: var(--ptn-ink-mute); }
.ptn-auth__foot { text-align: center; color: var(--ptn-ink-mute); font-size: var(--ptn-fs-xs); margin-top: var(--ptn-space-5); }
.ptn-auth .form-control { background: #fff; color: var(--ptn-ink); border-color: var(--ptn-line); }
.ptn-auth .form-control:focus { border-color: var(--ptn-flow); box-shadow: var(--ptn-ring); }
.ptn-auth .input-group-text { background: var(--ptn-surface-2); border-color: var(--ptn-line); color: var(--ptn-ink-mute); }

/* ── Form (dealer/profile) — make bare view widgets read as form controls ──── */
.ptn-form input:not([type=checkbox]):not([type=radio]),
.ptn-form select, .ptn-form textarea {
  display: block; width: 100%; padding: .5rem .75rem; font-size: var(--ptn-fs-base);
  line-height: 1.5; color: var(--ptn-ink); background: var(--ptn-surface);
  border: 1px solid var(--ptn-line); border-radius: var(--ptn-radius-sm);
  transition: border-color var(--ptn-dur) var(--ptn-ease), box-shadow var(--ptn-dur) var(--ptn-ease);
}
.ptn-form input:not([type=checkbox]):not([type=radio]):focus,
.ptn-form select:focus, .ptn-form textarea:focus { outline: 0; border-color: var(--ptn-flow); box-shadow: var(--ptn-ring); }
.ptn-form .ptn-field-check {
  display: flex; align-items: center; gap: .15rem;
  padding: .65rem .9rem; background: var(--ptn-surface-2); border: 1px solid var(--ptn-line); border-radius: var(--ptn-radius-sm);
}
.ptn-form .ptn-field-check .form-label { margin: 0; font-weight: var(--ptn-fw-semi); cursor: pointer; }
.ptn-form .ptn-help { font-size: var(--ptn-fs-xs); color: var(--ptn-ink-mute); margin-top: .3rem; }
.ptn-form .errorlist { list-style: none; padding: 0; margin: .35rem 0 0; font-size: var(--ptn-fs-xs); color: var(--ptn-rise); font-weight: var(--ptn-fw-semi); }

/* ── Definition list (dealer detail rows) ─────────────────────────────────── */
.ptn-dlist dt { color: var(--ptn-ink-mute); font-weight: var(--ptn-fw-medium); }
.ptn-dlist dd { color: var(--ptn-ink); }

/* ============================================================================
   DataTables integration. The JS in base.html inits `table.pt-datatable` and
   injects `.pt-filter-btn` / `.pt-th-filterable` / `.pt-filter-menu`. These
   styles (ported from the retired theme.css, re-pointed at --ptn-* tokens) make
   the table + its Excel-style column-filter menu match the v2 identity.
   ========================================================================== */
.ptn-v2 .table { --bs-table-bg: transparent; margin: 0; color: var(--ptn-ink); }
.ptn-v2 .table > thead th {
  font-size: var(--ptn-fs-xs); text-transform: uppercase; letter-spacing: var(--ptn-tracking-caps);
  color: var(--ptn-ink-mute); font-weight: var(--ptn-fw-semi);
  border-bottom: 1px solid var(--ptn-line); padding: .7rem 1rem; white-space: nowrap;
}
.ptn-v2 .table > tbody td { padding: .8rem 1rem; vertical-align: middle; border-color: var(--ptn-line); }
.ptn-v2 .table-hover > tbody > tr:hover > * { background: var(--ptn-surface-2); }

.dataTables_wrapper { padding: 1rem 1.15rem .25rem; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: var(--ptn-fs-sm); color: var(--ptn-ink-soft); font-weight: var(--ptn-fw-medium);
  display: flex; align-items: center; gap: .5rem; margin: 0;
}
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter input { min-width: 220px; }
.dataTables_wrapper .dataTables_info { font-size: var(--ptn-fs-xs); color: var(--ptn-ink-mute); padding-top: 1rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: .6rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item .page-link { border-radius: 8px !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--ptn-radius-sm); border-color: var(--ptn-line); color: var(--ptn-ink);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color: var(--ptn-flow); box-shadow: var(--ptn-ring); outline: 0; }

table.pt-datatable thead th { vertical-align: middle; }
table.pt-datatable thead th.pt-th-filterable { white-space: nowrap; }

/* Column-filter toggle (funnel) button in the header */
.pt-filter-btn {
  border: 0; background: transparent; color: var(--ptn-ink-mute);
  padding: 1px 4px; margin-left: .35rem; cursor: pointer; line-height: 1;
  font-size: var(--ptn-fs-xs); border-radius: 5px; vertical-align: middle;
  transition: color var(--ptn-dur) var(--ptn-ease), background var(--ptn-dur) var(--ptn-ease);
}
.pt-filter-btn:hover { color: var(--ptn-flow); background: var(--ptn-flow-soft); }
.pt-filter-btn.active { color: var(--ptn-flow); }

/* Column-filter dropdown menu (body-appended; position:fixed) */
.pt-filter-menu {
  position: fixed; z-index: var(--ptn-z-popover); width: 250px;
  background: var(--ptn-surface); border: 1px solid var(--ptn-line);
  border-radius: var(--ptn-radius-sm); box-shadow: var(--ptn-shadow-lg);
  padding: .6rem; font-size: var(--ptn-fs-sm);
}
.pt-filter-menu .pt-fm-search { margin-bottom: .5rem; }
.pt-filter-menu .pt-fm-tools { display: flex; gap: .9rem; padding: 0 .15rem .45rem; font-size: var(--ptn-fs-xs); }
.pt-filter-menu .pt-fm-tools a { color: var(--ptn-flow); text-decoration: none; }
.pt-filter-menu .pt-fm-tools a:hover { text-decoration: underline; }
.pt-filter-menu .pt-fm-list {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--ptn-line); border-radius: 8px; padding: .25rem;
}
.pt-filter-menu .pt-fm-item {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  padding: .28rem .4rem; border-radius: 6px; cursor: pointer;
  font-weight: var(--ptn-fw-regular); color: var(--ptn-ink);
}
.pt-filter-menu .pt-fm-item:hover { background: var(--ptn-surface-2); }
.pt-filter-menu .pt-fm-item input { flex: 0 0 auto; }
.pt-filter-menu .pt-fm-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-filter-menu .pt-fm-foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .55rem; }

/* DataTables Buttons (export) — small, soft, v2-styled. */
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .buttons-collection {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--ptn-fs-xs); font-weight: var(--ptn-fw-semi);
  padding: .35rem .7rem; border-radius: var(--ptn-radius-sm);
  background: var(--ptn-surface); color: var(--ptn-ink-soft);
  border: 1px solid var(--ptn-line); box-shadow: none;
}
.dataTables_wrapper .dt-buttons .btn:hover {
  background: var(--ptn-flow-soft); color: var(--ptn-flow-ink); border-color: var(--ptn-flow-soft);
}
.dataTables_wrapper .dataTables_length select { margin: 0 .4rem; }

/* ── Palette swatch (preview helper) ──────────────────────────────────────── */
.ptn-swatch { display: flex; flex-direction: column; gap: var(--ptn-space-2); }
.ptn-swatch__chip { height: 56px; border-radius: var(--ptn-radius-md); border: 1px solid var(--ptn-line); }
.ptn-swatch__name { font-size: var(--ptn-fs-xs); color: var(--ptn-ink-soft); font-weight: var(--ptn-fw-medium); }
.ptn-swatch__hex { font-family: var(--ptn-font-mono); font-size: var(--ptn-fs-xs); color: var(--ptn-ink-mute); }

/* ============================================================================
   Layout — v2 application chrome (sidebar + topbar + main). Used by base_v2.html.
   Boemar-monochrome: a clean white sidebar with a hairline border; the single
   EcoFlow-blue accent marks the active destination. Collapses to offcanvas <992px.
   ========================================================================== */
.ptn-app { display: flex; min-height: 100vh; background: var(--ptn-paper); }

/* v2 body scope: re-point Bootstrap's tokens at the v2 palette/type so any
   Bootstrap component rendered inside base_v2 picks up Manrope + the cool
   neutral base, without touching the legacy `body{}` rule in theme.css. */
.ptn-v2 {
  background: var(--ptn-paper);
  color: var(--ptn-ink);
  font-family: var(--ptn-font-body);
  --bs-body-font-family: var(--ptn-font-body);
  --bs-body-bg: var(--ptn-paper);
  --bs-body-color: var(--ptn-ink);
  --bs-border-color: var(--ptn-line);
  --bs-primary: var(--ptn-flow);
}
.ptn-content a { color: var(--ptn-flow-ink); }

.ptn-sidebar {
  width: var(--ptn-sidebar-w); flex: 0 0 var(--ptn-sidebar-w);
  background: var(--ptn-surface); border-right: 1px solid var(--ptn-line);
  position: fixed; inset: 0 auto 0 0; z-index: var(--ptn-z-sidebar);
  display: flex; flex-direction: column;
}
.ptn-brand {
  display: flex; align-items: center; gap: .65rem;
  padding: var(--ptn-space-5) var(--ptn-space-5) var(--ptn-space-4);
  text-decoration: none;
  border-bottom: 1px solid var(--ptn-line);
}
.ptn-brand__mark {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: #fff; font-size: 1.05rem;
  background: linear-gradient(135deg, var(--ptn-flow) 0%, var(--ptn-flow-bright) 100%);
  box-shadow: 0 4px 12px var(--ptn-flow-glow);
}
.ptn-brand__name { font-family: var(--ptn-font-display); font-weight: var(--ptn-fw-bold); color: var(--ptn-ink); font-size: 1.02rem; line-height: 1.1; }
.ptn-brand__sub { display: block; font-family: var(--ptn-font-body); font-weight: var(--ptn-fw-regular); font-size: .68rem; color: var(--ptn-ink-mute); letter-spacing: .02em; }

.ptn-nav { padding: var(--ptn-space-2); overflow-y: auto; flex: 1; }
.ptn-nav__label {
  font-size: var(--ptn-fs-xs); text-transform: uppercase; letter-spacing: var(--ptn-tracking-caps);
  color: var(--ptn-ink-mute); padding: var(--ptn-space-4) var(--ptn-space-4) var(--ptn-space-2);
}
.ptn-nav__link {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; margin-bottom: .2rem; border-radius: var(--ptn-radius-sm);
  color: var(--ptn-ink); text-decoration: none; position: relative;
  font-size: var(--ptn-fs-sm); font-weight: var(--ptn-fw-medium); white-space: nowrap;
  transition: background var(--ptn-dur) var(--ptn-ease), color var(--ptn-dur) var(--ptn-ease);
}
.ptn-nav__link i { font-size: 1.05rem; width: 1.25rem; text-align: center; color: var(--ptn-ink-mute); transition: color var(--ptn-dur); }
.ptn-nav__link:hover { background: var(--ptn-surface-2); color: var(--ptn-ink); }
.ptn-nav__link:hover i { color: var(--ptn-ink-soft); }
.ptn-nav__link.is-active { background: var(--ptn-flow-soft); color: var(--ptn-flow); }
.ptn-nav__link.is-active i { color: var(--ptn-flow); }

.ptn-main { margin-left: var(--ptn-sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ptn-topbar {
  position: sticky; top: 0; z-index: var(--ptn-z-topbar);
  background: color-mix(in srgb, var(--ptn-surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ptn-line);
  display: flex; align-items: center; gap: var(--ptn-space-4);
  padding: var(--ptn-space-3) var(--ptn-space-5); min-height: var(--ptn-topbar-h);
}
.ptn-topbar__toggle { display: none; }
.ptn-topbar__title { font-family: var(--ptn-font-display); font-size: var(--ptn-fs-lg); font-weight: var(--ptn-fw-bold); margin: 0; color: var(--ptn-ink); letter-spacing: var(--ptn-tracking-tight); }
.ptn-topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--ptn-space-3); }

.ptn-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--ptn-radius-sm);
  border: 1px solid var(--ptn-line); background: var(--ptn-surface); color: var(--ptn-ink-soft);
  cursor: pointer; font-size: 1.05rem;
  transition: background var(--ptn-dur) var(--ptn-ease), color var(--ptn-dur) var(--ptn-ease), border-color var(--ptn-dur) var(--ptn-ease);
}
.ptn-iconbtn:hover { background: var(--ptn-surface-2); color: var(--ptn-ink); border-color: var(--ptn-line-strong); }
.ptn-iconbtn:focus-visible { outline: none; box-shadow: var(--ptn-ring); }
/* Hamburger toggle: hidden on desktop, shown on mobile. Two-class selector so it
   beats `.ptn-iconbtn { display: inline-flex }` without !important. */
.ptn-iconbtn.ptn-topbar__toggle { display: none; }

.ptn-user { display: flex; align-items: center; gap: .6rem; }
.ptn-user__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ptn-flow-soft); color: var(--ptn-flow-ink);
  display: grid; place-items: center; font-weight: var(--ptn-fw-bold); font-size: var(--ptn-fs-sm);
}

.ptn-content { padding: var(--ptn-space-5); flex: 1; width: 100%; }
.ptn-footer { padding: var(--ptn-space-4) var(--ptn-space-5); border-top: 1px solid var(--ptn-line); color: var(--ptn-ink-mute); font-size: var(--ptn-fs-xs); text-align: center; }

.ptn-backdrop { display: none; }

/* Page header pattern (eyebrow + display title + actions) */
.ptn-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ptn-space-4); flex-wrap: wrap; margin-bottom: var(--ptn-space-5); }
.ptn-pagehead__title { font-family: var(--ptn-font-display); font-size: var(--ptn-fs-xl); font-weight: var(--ptn-fw-bold); color: var(--ptn-ink); margin: .2rem 0 0; letter-spacing: var(--ptn-tracking-tight); }

/* "Changed today" indicator dot (product list rows whose price moved last scrape). */
.ptn-changed-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ptn-flow); margin-left: .4rem; vertical-align: middle;
  box-shadow: 0 0 0 3px var(--ptn-flow-glow);
  animation: ptn-pulse 1.8s var(--ptn-ease) infinite;
}
@keyframes ptn-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--ptn-flow-glow); } 50% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .ptn-changed-dot { animation: none; } }

/* Breadcrumb */
.ptn-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--ptn-fs-xs); color: var(--ptn-ink-mute); margin-bottom: var(--ptn-space-3); }
.ptn-breadcrumb a { color: var(--ptn-ink-mute); text-decoration: none; }
.ptn-breadcrumb a:hover { color: var(--ptn-flow); }
.ptn-breadcrumb__sep { color: var(--ptn-ink-faint); }
.ptn-breadcrumb__current { color: var(--ptn-ink-soft); font-weight: var(--ptn-fw-semi); }

/* "Scrape running" pill — shown on the dashboard while a scrape is active. */
.ptn-scrape-pill {
  display: none; align-items: center; gap: .5rem;
  font-size: var(--ptn-fs-xs); font-weight: var(--ptn-fw-semi); color: var(--ptn-flow-ink);
  background: var(--ptn-flow-soft); border: 1px solid var(--ptn-flow-glow);
  padding: .3rem .7rem; border-radius: var(--ptn-radius-pill); margin-bottom: var(--ptn-space-3);
}
.ptn-scrape-pill.is-on { display: inline-flex; }
.ptn-scrape-pill .spinner {
  width: 12px; height: 12px; border: 2px solid var(--ptn-flow-glow); border-top-color: var(--ptn-flow);
  border-radius: 50%; animation: ptn-spin .8s linear infinite;
}
@keyframes ptn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptn-scrape-pill .spinner { animation: none; } }

/* Toast (scrape completion etc.) — fixed bottom-right, auto-dismiss. */
.ptn-toast-stack { position: fixed; right: var(--ptn-space-5); bottom: var(--ptn-space-5); z-index: var(--ptn-z-toast); display: flex; flex-direction: column; gap: .5rem; max-width: min(92vw, 380px); }
.ptn-toast {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--ptn-surface); border: 1px solid var(--ptn-line); border-left: 3px solid var(--ptn-flow);
  border-radius: var(--ptn-radius-md); box-shadow: var(--ptn-shadow-lg);
  padding: .8rem 1rem; font-size: var(--ptn-fs-sm); color: var(--ptn-ink);
  animation: ptn-toast-in var(--ptn-dur) var(--ptn-ease);
}
.ptn-toast.is-failed { border-left-color: var(--ptn-rise); }
.ptn-toast__icon { font-size: 1.1rem; line-height: 1.3; }
.ptn-toast__body { flex: 1; }
.ptn-toast__title { font-weight: var(--ptn-fw-semi); color: var(--ptn-ink); }
.ptn-toast__sub { color: var(--ptn-ink-mute); font-size: var(--ptn-fs-xs); margin-top: .1rem; }
.ptn-toast__close { background: none; border: 0; color: var(--ptn-ink-mute); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; }
.ptn-toast__close:hover { color: var(--ptn-ink); }
@keyframes ptn-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Bayi × Ürün price heatmap. Sticky first column (product) + dealer columns;
   cell colour = dealer price vs EcoFlow (under=green / over=red / equal=neutral). */
.ptn-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ptn-fs-sm); }
.ptn-matrix thead th {
  position: sticky; top: 0; background: var(--ptn-surface); z-index: 3;
  padding: .6rem .75rem; border-bottom: 1px solid var(--ptn-line);
  font-size: var(--ptn-fs-xs); text-transform: uppercase; letter-spacing: var(--ptn-tracking-caps);
  color: var(--ptn-ink-mute); font-weight: var(--ptn-fw-semi); white-space: nowrap; text-align: right;
}
.ptn-matrix thead th.ptn-matrix__corner { text-align: left; }
.ptn-matrix thead th.ptn-matrix__dealer { min-width: 110px; }
.ptn-matrix td { padding: .55rem .75rem; border-bottom: 1px solid var(--ptn-line); }
/* Sticky product column (first) so it stays visible while scrolling dealers. */
.ptn-matrix .ptn-matrix__product,
.ptn-matrix .ptn-matrix__corner {
  position: sticky; left: 0; z-index: 2; background: var(--ptn-surface); text-align: left;
  border-right: 1px solid var(--ptn-line); min-width: 200px;
}
.ptn-matrix tbody tr:hover .ptn-matrix__product { background: var(--ptn-surface-2); }
.ptn-matrix-cell { text-align: right; }
.ptn-matrix-cell--under { background: var(--ptn-fall-soft); color: var(--ptn-fall); font-weight: var(--ptn-fw-semi); }
.ptn-matrix-cell--over { background: var(--ptn-rise-soft); color: var(--ptn-rise); }
.ptn-matrix-cell--equal { color: var(--ptn-ink-soft); }
.ptn-matrix-cell--none { color: var(--ptn-ink-faint); }

@media (max-width: 991.98px) {
  .ptn-sidebar { transform: translateX(-100%); transition: transform var(--ptn-dur-slow) var(--ptn-ease); }
  .ptn-app.ptn-sidebar-open .ptn-sidebar { transform: translateX(0); }
  .ptn-main { margin-left: 0; }
  .ptn-iconbtn.ptn-topbar__toggle { display: inline-flex; }
  .ptn-app.ptn-sidebar-open .ptn-backdrop { display: block; position: fixed; inset: 0; z-index: var(--ptn-z-overlay); background: rgba(14, 17, 22, .45); }
}