/* =============================================================
   PlayerProfiles – app-components.css
   ALL visual design: variables, colours, components, typography
   ============================================================= */

/* ── Theme variables (dark default) ─────────────────────────── */
:root {
  --bg:           #0d1117;
  --bg-alt:       #161b22;
  --panel-bg:     #1c2128;
  --panel-alt:    #21262d;
  --border:       #30363d;
  --border-light: #21262d;
  --accent:       #58a6ff;
  --accent-hov:   #79b8ff;
  --accent-muted: #1f3d5c;
  --text:         #e6edf3;
  --text-muted:   #9aa4af;
  --text-subtle:  #8b949e;
  --green:        #3fb950;
  --lime:         #a3e635;
  --green-muted:  #1a3a22;
  --red:          #f85149;
  --red-muted:    #3d1a1a;
  --yellow:       #d29922;
  --yellow-muted: #3d2e00;
  --orange:       #db6d28;
  --orange-muted: #3d2410;
  --radius:       6px;
  --radius-lg:    10px;
  --shadow:       0 1px 4px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.18);
  --shadow-lg:    0 2px 8px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.5);
  --surface-hi:   rgba(255,255,255,.05);
  --transition:   140ms ease;
  --sidebar-w:    220px;
  --sidebar-col:  52px;
  --topbar-h:     48px;
  /* Career-plan branch palette (Plan A/B/C…), categorical, dark */
  --cp-0: #58a6ff;  /* A blue   */
  --cp-1: #bc8cff;  /* B purple */
  --cp-2: #3fb950;  /* C green  */
  --cp-3: #f0883e;  /* D orange */
  --cp-4: #f778ba;  /* E pink   */
  --cp-5: #56d4dd;  /* F cyan   */
}

[data-theme="light"] {
  --bg:           #f6f8fa;
  --bg-alt:       #ffffff;
  --panel-bg:     #ffffff;
  --panel-alt:    #f6f8fa;
  --border:       #d0d7de;
  --border-light: #e8edf2;
  --accent:       #0969da;
  --accent-hov:   #0550ae;
  --accent-muted: #ddf4ff;
  --text:         #1f2328;
  --text-muted:   #636c76;
  --text-subtle:  #6e7781;   /* darker = more readable on light panels */
  --green:        #1a7f37;
  --lime:         #4d7c0f;
  --green-muted:  #dafbe1;
  --red:          #cf222e;
  --red-muted:    #ffebe9;
  --yellow:       #9a6700;
  --yellow-muted: #fff8c5;
  --orange:       #bc4c00;
  --orange-muted: #ffe8d6;
  --shadow:       0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
  --shadow-sm:    0 1px 2px rgba(31,35,40,.06), 0 2px 6px rgba(31,35,40,.04);
  --shadow-lg:    0 3px 8px rgba(31,35,40,.07), 0 18px 48px rgba(31,35,40,.12);
  --surface-hi:   rgba(255,255,255,.85);
  /* Career-plan branch palette, categorical, light */
  --cp-0: #0969da;  /* A blue   */
  --cp-1: #8250df;  /* B purple */
  --cp-2: #1a7f37;  /* C green  */
  --cp-3: #bc4c00;  /* D orange */
  --cp-4: #bf3989;  /* E pink   */
  --cp-5: #1b7c83;  /* F teal   */
}

/* ── Kombotema "Klubbramen": djup klubbfärgad ram, varm ljus bas ──
   Vald ur mockuprunda 3 (förslag G): topbar + sidomeny i djup klubbfärg,
   ljusbeige fond och gräddvita paneler — inget grått. Klubbfärgen sätts i
   Admin → Branding och injiceras som --pp-club på :root i base.html;
   utan inställning gäller grön. Ramens toner och accenterna härleds ur
   samma färg med color-mix, så blå klubb ⇒ marin ram automatiskt. */
[data-theme="combo"] {
  --pp-club:      #2e7d4f;   /* fallback — admin-injektionen på :root vinner */
  /* Baston: fondens ton (Admin → Branding). Fond, paneler, kanter och textens
     värme härleds ur den — brunare ton ⇒ brunare neutraler rakt igenom. */
  --pp-tone:      #e9dcc6;   /* ljusbrun standard */
  --bg:           var(--pp-tone);
  --bg-alt:       color-mix(in srgb, var(--pp-tone) 55%, #ffffff);
  --panel-bg:     color-mix(in srgb, var(--pp-tone) 28%, #fffdf8);
  --panel-alt:    color-mix(in srgb, var(--pp-tone) 62%, #fffdf8);
  --border:       color-mix(in srgb, var(--pp-tone) 78%, #8d7752);
  --border-light: color-mix(in srgb, var(--pp-tone) 88%, #8d7752);
  --accent:       var(--pp-club);
  --accent-hov:   color-mix(in srgb, var(--pp-club) 80%, #23211a);
  --accent-muted: color-mix(in srgb, var(--pp-club) 15%, #fbf7ef);
  --text:         color-mix(in srgb, var(--pp-tone) 10%, #241c11);
  --text-muted:   color-mix(in srgb, var(--pp-tone) 22%, #61503c);
  --text-subtle:  color-mix(in srgb, var(--pp-tone) 22%, #695742);
  --green:        #2e7d4f;
  --lime:         #6b8e23;
  --green-muted:  #e3eedb;
  --red:          #c03a2e;
  --red-muted:    #f7e3df;
  --yellow:       #8a6116;
  --yellow-muted: #f5ecd1;
  --orange:       #b35a1f;
  --orange-muted: #f6e6d7;
  --shadow:       0 1px 3px rgba(90,80,55,.16), 0 6px 18px rgba(90,80,55,.12);
  --shadow-sm:    0 1px 2px rgba(90,80,55,.12), 0 2px 6px rgba(90,80,55,.08);
  --shadow-lg:    0 3px 8px rgba(90,80,55,.14), 0 18px 48px rgba(60,52,35,.24);
  --surface-hi:   rgba(255,255,255,.8);
  --cp-0: #2b62a8; --cp-1: #8250df; --cp-2: #2e7d4f;
  --cp-3: #bc4c00; --cp-4: #bf3989; --cp-5: #1b7c83;
}
/* Ramen: djup klubbfärg (30 % klubb mot nästan-svart) med ljusa ramtokens
   scopeade på topbar/sidomeny — allt inuti ärver rätt färger. */
[data-theme="combo"] #topbar {
  background: color-mix(in srgb, var(--pp-club) 30%, #131512);
  border-bottom-color: color-mix(in srgb, var(--pp-club) 42%, #131512);
}
[data-theme="combo"] #sidebar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pp-club) 37%, #131512) 0%,
    color-mix(in srgb, var(--pp-club) 28%, #131512) 220px);
  border-right-color: color-mix(in srgb, var(--pp-club) 42%, #131512);
}
[data-theme="combo"] #topbar, [data-theme="combo"] #sidebar {
  --text:         color-mix(in srgb, var(--pp-club) 10%, #f0f1ec);
  --text-muted:   color-mix(in srgb, var(--pp-club) 16%, #aab1a6);
  --text-subtle:  color-mix(in srgb, var(--pp-club) 16%, #9aa196);
  --accent:       color-mix(in srgb, var(--pp-club) 50%, #eef4ec);
  --accent-hov:   color-mix(in srgb, var(--pp-club) 38%, #ffffff);
  --accent-muted: color-mix(in srgb, var(--pp-club) 42%, #131512);
  --panel-bg:     color-mix(in srgb, var(--pp-club) 42%, #191c17);
  --panel-alt:    color-mix(in srgb, var(--pp-club) 48%, #191c17);
  --bg-alt:       color-mix(in srgb, var(--pp-club) 34%, #131512);
  --border:       color-mix(in srgb, var(--pp-club) 46%, #161814);
  --border-light: color-mix(in srgb, var(--pp-club) 38%, #161814);
  --surface-hi:   rgba(255,255,255,.05);
  color: var(--text);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; }

/* ── Ambient background (floodlight blue top, faint pitch green low) ── */
html { background: var(--bg); }
body {
  background:
    radial-gradient(1100px 540px at 80% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    radial-gradient(900px 640px at -10% 110%, color-mix(in srgb, var(--green) 6%, transparent), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

/* ── Topbar visual ───────────────────────────────────────────── */
#topbar {
  background: color-mix(in srgb, var(--panel-bg) 80%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--surface-hi), var(--shadow-sm);
}
.app-logo    { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.app-logo .accent { color: var(--accent); }
.topbar-username  { font-size: .875rem; color: var(--text-muted); }
.topbar-lang { font-size: .75rem; font-weight: 700; letter-spacing: .04em; }

/* Textzoom-reglage. Fasta px — själva kontrollen ska inte växa med zoomen. */
.topbar-zoom { display: flex; align-items: center; gap: 4px; }
.topbar-zoom-a { background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.topbar-zoom-a:hover { color: var(--text); background: var(--panel-alt); }
.topbar-zoom-sm { font-size: 11px; }
.topbar-zoom-lg { font-size: 16px; }
.topbar-zoom input[type="range"] { width: 88px; accent-color: var(--accent); cursor: pointer; }

/* ── Sidebar visual ──────────────────────────────────────────── */
#sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-alt) 96%, var(--accent)) 0%, var(--bg-alt) 220px);
  border-right: 1px solid var(--border);
}
.sidebar-nav li a {
  color: var(--text-muted); border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), transform var(--transition); text-decoration: none;
}
.sidebar-nav li a:hover  { background: var(--panel-bg);     color: var(--text); transform: translateX(2px); }
.sidebar-nav li.active a {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-label { font-size: .875rem; font-weight: 500; }
.sidebar-section {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-subtle);
}

/* ── Typography ──────────────────────────────────────────────── */
.pp-page-title    { font-size: 1.2rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.pp-section-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); margin-bottom: .6rem; }
.pp-label         { font-size: .8rem; font-weight: 500; color: var(--text-muted); display: block; margin-bottom: .3rem; }
.pp-text-muted    { color: var(--text-muted);  font-size: .875rem; }
.pp-text-subtle   { color: var(--text-subtle); font-size: .8rem;   }
.pp-text-warn     { color: var(--yellow); }
.pp-link          { color: var(--accent); }
.pp-link:hover    { color: var(--accent-hov); text-decoration: underline; }

/* shared client-side filter/sort (pp-sortfilter.js) */
.sf-hidden   { display: none !important; }
.sf-sortable { cursor: pointer; user-select: none; }
.sf-arrow    { display: inline-block; width: 1em; }

/* ── Panel ───────────────────────────────────────────────────── */
.nc-panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 94%, #fff) 0%, var(--panel-bg) 120px);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem;
  box-shadow: inset 0 1px 0 var(--surface-hi), var(--shadow-sm);
}
.pp-panel-sm    { padding: .875rem 1rem; }
.pp-panel-title { font-size: .95rem; font-weight: 600; color: var(--text); margin-bottom: .875rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }

/* ── Buttons ─────────────────────────────────────────────────── */
.nc-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; font-size: .875rem; font-family: inherit; font-weight: 500;
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.4;
  transition: background var(--transition), border-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.nc-btn:disabled { opacity: .5; cursor: not-allowed; }
.nc-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.nc-btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent));
  color: #fff; border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 3px rgba(0,0,0,.25);
}
.nc-btn-primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-hov) 84%, #fff), var(--accent-hov));
  border-color: var(--accent-hov); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.pp-btn-secondary       { background: var(--panel-alt);  color: var(--text);       border-color: var(--border); }
.pp-btn-secondary:hover { background: var(--panel-bg);   border-color: var(--accent); color: var(--accent); }
.pp-btn-ghost           { background: transparent;       color: var(--text-muted); }
.pp-btn-ghost:hover     { background: var(--panel-alt);  color: var(--text); }
.nc-btn-danger          { background: var(--red-muted);  color: var(--red);        border-color: var(--red); }
.nc-btn-danger:hover    { background: var(--red);        color: #fff; }
.nc-btn-sm   { padding: .3rem .65rem;  font-size: .8rem; }
.pp-btn-lg   { padding: .65rem 1.2rem; font-size: 1rem; }
.pp-btn-icon { padding: .4rem; }
.pp-btn-full { width: 100%; justify-content: center; }
.pp-toggle-btn        { background: transparent; color: var(--text-muted); border-color: var(--border); }
.pp-toggle-btn:hover  { color: var(--text); border-color: var(--accent); }
.pp-toggle-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── iOS-style switch ────────────────────────────────────────── */
.nc-switch       { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.nc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.nc-switch-track { position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 22px; background: var(--panel-alt); border: 1px solid var(--border); transition: background var(--transition), border-color var(--transition); }
.pp-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform var(--transition), background var(--transition); }
.nc-switch input:checked + .nc-switch-track { background: var(--green-muted); border-color: var(--green); }
.nc-switch input:checked + .nc-switch-track .pp-switch-thumb { transform: translateX(16px); background: var(--green); }
.pp-switch-label { font-size: .85rem; color: var(--text-muted); }
.nc-switch input:checked ~ .pp-switch-label { color: var(--text); }

/* ── Badges ──────────────────────────────────────────────────── */
.nc-badge {
  display: inline-flex; align-items: center; padding: .2rem .55rem;
  border-radius: 20px; font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
}
.nc-badge-blue   { background: var(--accent-muted); color: var(--accent);     }
.nc-badge-green  { background: var(--green-muted);  color: var(--green);      }
.pp-badge-red    { background: var(--red-muted);    color: var(--red);        }
.pp-badge-yellow { background: var(--yellow-muted); color: var(--yellow);     }
.pp-badge-gray   { background: var(--panel-alt);    color: var(--text-muted); }

/* ── Inputs ──────────────────────────────────────────────────── */
.nc-input, .nc-select, .nc-textarea {
  width: 100%; padding: .5rem .75rem; font-size: .875rem; font-family: inherit;
  color: var(--text); background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.nc-input:focus, .nc-select:focus, .nc-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,.12); }
.nc-textarea { resize: vertical; min-height: 80px; }
.nc-select   { appearance: none; cursor: pointer; }

/* ── Datumintervall-slider (pp-daterange.js) ─────────────────────
   Dubbelhandtag på ett spår: från-datum + till-datum, datumchips på
   sidorna. rem-baserad (textzoomen); mobil tar full radbredd. */
.pp-dr { display: flex; align-items: center; gap: .5rem;
  min-width: 15rem; flex: 1 1 15rem; max-width: 28rem; }
.pp-dr-val { font-size: .72rem; font-weight: 700; color: var(--text-muted);
  white-space: nowrap; min-width: 3.6rem; text-align: center;
  background: var(--panel-alt); border: 1px solid var(--border-light);
  border-radius: 999px; padding: .14rem .5rem; }
.pp-dr-track { position: relative; flex: 1; height: 1.4rem; min-width: 6rem; }
.pp-dr-track::before { content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: .28rem; transform: translateY(-50%);
  background: var(--border); border-radius: 999px; }
.pp-dr-fill { position: absolute; top: 50%; height: .28rem;
  transform: translateY(-50%); background: var(--accent); border-radius: 999px; }
.pp-dr-track input[type="range"] { position: absolute; inset: 0; width: 100%;
  height: 1.4rem; margin: 0; -webkit-appearance: none; appearance: none;
  background: none; pointer-events: none; z-index: 2; }
.pp-dr-track input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
.pp-dr-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  pointer-events: auto; width: .95rem; height: .95rem; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-alt);
  box-shadow: var(--shadow-sm); cursor: grab; }
.pp-dr-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: .95rem; height: .95rem; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-alt);
  box-shadow: var(--shadow-sm); cursor: grab; }
.pp-dr-track input.pp-dr-top { z-index: 3; }
@media (max-width: 640px) { .pp-dr { min-width: 100%; max-width: none; } }

/* ── Form ────────────────────────────────────────────────────── */
.pp-form-group              { margin-bottom: 1rem; }
.pp-form-row                { display: flex; gap: 1rem; }
.pp-form-row .pp-form-group { flex: 1; }

/* ── Table ───────────────────────────────────────────────────── */
.pp-table-wrap { overflow-x: auto; }
.nc-table      { width: 100%; border-collapse: collapse; font-size: .875rem; }
.nc-table th {
  text-align: left; padding: .55rem 1rem; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle);
  border-bottom: 1px solid var(--border); background: var(--bg);
}
.nc-table td { padding: .7rem 1rem; color: var(--text); border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.nc-table tr:last-child td  { border-bottom: none; }
.nc-table tbody tr:hover td { background: var(--panel-alt); }

/* ── Stat card ───────────────────────────────────────────────── */
.nc-stat       { display: flex; flex-direction: column; gap: .2rem; }
.nc-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1; }
.nc-stat-label { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

/* ── Flash messages ──────────────────────────────────────────── */
.pp-flash { padding: .75rem 1rem; border-radius: var(--radius); font-size: .875rem; margin-bottom: .875rem; border: 1px solid; }
.pp-flash-error   { background: var(--red-muted);    color: var(--red);    border-color: var(--red);    }
.pp-flash-success { background: var(--green-muted);  color: var(--green);  border-color: var(--green);  }
.pp-flash-warning { background: var(--yellow-muted); color: var(--yellow); border-color: var(--yellow); }
.pp-flash-info    { background: var(--accent-muted); color: var(--accent); border-color: var(--accent); }

/* ── Divider / Empty ─────────────────────────────────────────── */
.pp-divider    { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.pp-empty      { text-align: center; padding: 3rem 1rem; color: var(--text-muted); font-size: .875rem; }
.pp-empty-icon { font-size: 2.5rem; opacity: .3; margin-bottom: .75rem; }

/* ── Card header ─────────────────────────────────────────────── */
.pp-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; }

/* Team badge: coloured pill with the team's short_name (e.g. "P17"), used on
   desktop and mobile everywhere a team is shown. Colour = team.color. */
.pp-team-badge {
  display: inline-block; font-size: .68rem; font-weight: 700; color: #fff;
  padding: .1rem .45rem; border-radius: 20px; white-space: nowrap; line-height: 1.5;
}

/* ── Nav card ────────────────────────────────────────────────── */
.pp-nav-card {
  background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1rem 1.25rem; color: var(--text); text-decoration: none;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pp-nav-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.pp-nav-card-icon  { background: var(--accent-muted); color: var(--accent); border-radius: var(--radius); }
.pp-nav-card-title { font-size: .9rem;  font-weight: 600; color: var(--text); }
.pp-nav-card-desc  { font-size: .78rem; color: var(--text-muted); }

/* ── Misc ────────────────────────────────────────────────────── */
.pp-dot        { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.nc-glow-blue  { box-shadow: 0 0 14px rgba(88,166,255,.3); }
.nc-glow-green { box-shadow: 0 0 14px rgba(63,185,80,.3);  }
.nc-glow-red   { box-shadow: 0 0 14px rgba(248,81,73,.3);  }

/* ── Delete badge button ─────────────────────────────────────── */
.pp-btn-delete {
  display: inline-flex; align-items: center; padding: .22rem .6rem; border-radius: 20px;
  font-size: .75rem; font-weight: 600; background: var(--red-muted); color: var(--red);
  border: 1px solid var(--red); cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.pp-btn-delete:hover { background: var(--red); color: #fff; }

/* ── Generic modal ───────────────────────────────────────────── */
.pp-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 500; display: none; align-items: center; justify-content: center; padding: 1rem; }
.pp-modal-overlay.active { display: flex; animation: pp-fade .16s ease; }
.nc-modal { background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--surface-hi), var(--shadow-lg); width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; }
.pp-modal-overlay.active .nc-modal { animation: pp-pop .2s cubic-bezier(.2,.8,.3,1.1) both; }
.pp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
.pp-modal-title  { font-size: 1rem; font-weight: 600; color: var(--text); }
.nc-modal-body   { padding: 1.5rem; }
.pp-modal-footer { display: flex; justify-content: flex-end; gap: .75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) { .pp-form-row { flex-direction: column; } }

/* ── List items ──────────────────────────────────────────────── */
.pp-list      { display: flex; flex-direction: column; gap: .4rem; }
.pp-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .85rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-alt) 95%, #fff), var(--panel-alt));
  color: var(--text); text-decoration: none;
  transition: border-color var(--transition), background var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.pp-list-item:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm), 0 8px 20px -10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.pp-list-item-title { font-size: .9rem;  font-weight: 500; color: var(--text); }
.pp-list-item-sub   { font-size: .78rem; color: var(--text-muted); }

/* ── Tabs ────────────────────────────────────────────────────── */
.nc-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.nc-tab, .pp-subtab {
  padding: .55rem .9rem; font-size: .875rem; font-weight: 500; font-family: inherit;
  background: transparent; color: var(--text-muted); border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.nc-tab:hover, .pp-subtab:hover  { color: var(--text); }
.nc-tab.active, .pp-subtab.active {
  color: var(--accent); border-bottom-color: var(--accent);
  box-shadow: 0 12px 20px -14px color-mix(in srgb, var(--accent) 85%, transparent);
}

/* ── Placeholder box ─────────────────────────────────────────── */
.pp-placeholder {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--text-subtle); font-size: .85rem;
}

/* ── Foot selector ───────────────────────────────────────────── */
.pp-foot-btn {
  padding: .5rem 1.1rem; font-size: .875rem; font-weight: 600; font-family: inherit;
  background: var(--panel-alt); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pp-foot-btn:hover  { border-color: var(--green); color: var(--text); }
.pp-foot-btn.active { background: var(--green-muted); color: var(--green); border-color: var(--green); }

/* ── Dropzone ────────────────────────────────────────────────── */
.nc-dropzone {
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center;
  border: 2px dashed var(--border); border-radius: var(--radius);
  color: var(--text-muted); cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.nc-dropzone:hover    { border-color: var(--accent); color: var(--text); }
.nc-dropzone.dragover { border-color: var(--accent); background: var(--accent-muted); color: var(--accent); }

/* ── Stat chips ──────────────────────────────────────────────── */
.pp-stat-chip     { display: inline-flex; flex-direction: column; gap: .1rem; padding: .5rem .8rem; border-radius: var(--radius); background: var(--panel-alt); border: 1px solid var(--border); }
.pp-stat-chip-val { font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.pp-stat-chip-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

/* ── Table footer ────────────────────────────────────────────── */
.nc-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); color: var(--text); }

/* ── Card icons ──────────────────────────────────────────────── */
.pp-card-icon   { display: inline-block; width: 11px; height: 15px; border-radius: 2px; vertical-align: -2px; }
.pp-card-yellow { background: #facc15; }
.pp-card-red    { background: var(--red); }

/* ── Match minutes accent (lime) ─────────────────────────────── */
.nc-table td.pp-match-min { color: #a3e635; font-weight: 600; }

/* ── Stat chip icons ─────────────────────────────────────────── */
.pp-chip-ico      { display: inline-flex; vertical-align: -2px; }
.pp-chip-ico svg  { width: 14px; height: 14px; }
.pp-ico-acc       { color: var(--accent); }
.pp-ico-green     { color: var(--green); }
.pp-ico-lime      { color: #a3e635; }
.pp-ico-muted     { color: var(--text-muted); }
.pp-stat-chip-val.pp-lime { color: #a3e635; }

/* ── Logo thumbnail ──────────────────────────────────────────── */
.pp-logo-thumb {
  width: 34px; height: 34px; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: #fff; border: 1px solid var(--border);
}
.pp-logo-thumb img       { max-width: 30px; max-height: 30px; object-fit: contain; }
.pp-logo-thumb.is-empty  { background: var(--panel-alt); color: var(--text-muted); font-size: .9rem; }

/* ── Mobile: compact tables + modals ─────────────────────────── */
@media (max-width: 768px) {
  .nc-table { font-size: .82rem; }
  .nc-table th, .nc-table td { padding: .5rem .55rem; }
  /* many-tab bars (player detail ~12, admin 8) would run off-screen: let the
     bar scroll horizontally instead of forcing the whole page wider */
  .nc-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nc-tabs::-webkit-scrollbar { display: none; }
  .nc-tab, .pp-subtab { white-space: nowrap; flex-shrink: 0; }
  .nc-modal-body   { padding: 1rem; }
  .pp-modal-header { padding: .85rem 1rem; }
  .pp-modal-footer { padding: .85rem 1rem; }
}

/* ── Segment control ─────────────────────────────────────────── */
.pp-segment     { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pp-segment-btn { padding: .4rem .9rem; font-size: .82rem; font-weight: 600; font-family: inherit; background: var(--panel-alt); color: var(--text-muted); border: none; border-right: 1px solid var(--border); cursor: pointer; transition: background var(--transition), color var(--transition); }
.pp-segment-btn:last-child { border-right: none; }
.pp-segment-btn:hover  { color: var(--text); }
.pp-segment-btn.active { background: var(--accent); color: #fff; }

/* ── Collection card ─────────────────────────────────────────── */
.pp-coll-card {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .8rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-alt) 93%, #fff), var(--panel-alt));
  box-shadow: inset 0 1px 0 var(--surface-hi);
  color: var(--text); cursor: pointer;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pp-coll-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--surface-hi), var(--shadow-sm),
              0 8px 20px -10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.pp-coll-card-name  { font-size: .9rem; font-weight: 500; }
.pp-coll-card-count { font-size: .72rem; color: var(--text-muted); background: var(--panel-bg); border: 1px solid var(--border); border-radius: 20px; padding: .1rem .5rem; }

/* ── Month chips ─────────────────────────────────────────────── */
.pp-month-chip       { padding: .25rem .6rem; font-size: .75rem; font-family: inherit; background: var(--panel-alt); color: var(--text-muted); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.pp-month-chip:hover { color: var(--text); border-color: var(--accent); }
.pp-month-chip.active{ background: var(--accent); border-color: var(--accent); color: #fff; }

/* Make the hidden attribute win over component display rules */
[hidden] { display: none !important; }

/* Shared tag on collection cards */
.pp-share-tag { font-size: .6rem; padding: .05rem .4rem; margin-left: .35rem; vertical-align: middle; }

/* Cover card visuals */
.pp-pos-badge {
  font-size: .8rem; font-weight: 700; letter-spacing: .03em; padding: .2rem .6rem; border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.pp-shirt          { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.pp-cover-clublogo { height: 30px; width: auto; margin-left: auto; }
.pp-club-logo      { height: 18px; width: auto; }
.pp-field-edit     { background: none; border: none; padding: .2rem; color: var(--text-muted); cursor: pointer; display: inline-flex; border-radius: var(--radius); flex-shrink: 0; }
.pp-field-edit:hover { color: var(--accent); background: var(--panel-alt); }
.pp-foot-btn       { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .7rem; }
.pp-foot-btn[data-foot="right"] .pp-foot-svg { transform: scaleX(-1); }
.pp-foot-cap       { font-size: .65rem; font-weight: 700; }
.pp-week-day       { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .4rem .2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-alt); }
.pp-week-day.today {
  border-color: var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--panel-alt)), var(--panel-alt));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent);
}
.pp-week-dow       { font-size: .62rem; text-transform: uppercase; color: var(--text-muted); }
.pp-week-date      { font-size: 1rem; font-weight: 700; color: var(--text); }
/* clickable day → shows that day's activity below the strip */
button.pp-week-day { font: inherit; cursor: pointer; width: 100%; position: relative; transition: border-color .12s, background .12s; }
button.pp-week-day:hover { border-color: var(--accent); }
.pp-week-day.sel   { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-alt)); }
.pp-week-day.has-act .pp-week-date { color: var(--accent); }
.pp-week-dot       { position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.pp-week-detail    { margin-top: .5rem; font-size: .8rem; color: var(--text-muted); }
.pp-week-act       { padding: .25rem 0; border-top: 1px solid var(--border-light); }
.pp-week-act:first-child { border-top: none; }
.pp-week-act sup   { font-size: .6rem; opacity: .8; }
.pp-collapse-caret { color: var(--text-muted); transition: transform var(--transition); }
.pp-collapse-head.collapsed .pp-collapse-caret { transform: rotate(-90deg); }

/* Stat tiles (were missing) */
.pp-stat-grid     { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: .4rem; }
.pp-stat-tile {
  display: flex; flex-direction: column; gap: .1rem; padding: .45rem .55rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-alt) 93%, #fff), var(--panel-alt));
  box-shadow: inset 0 1px 0 var(--surface-hi);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.pp-stat-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: inset 0 1px 0 var(--surface-hi), var(--shadow-sm);
}
.pp-stat-num      { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.pp-stat-num.lime { color: #a3e635; }
.pp-stat-cap      { font-size: .6rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }

/* ── Player thumbnail (avatar) ─────────────────────────────── */
.player-thumb {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel);
}
.player-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Team logo in topbar */
.topbar-team-logo { height: 28px; width: auto; margin-left: .6rem; }

/* ── Online-räknaren i topbaren (admin) + modalen (pp-online.js) ── */
.topbar-online { display: inline-flex; align-items: center; gap: .3rem; margin-left: .7rem;
  font-size: .72rem; font-weight: 700; font-family: inherit; color: var(--text-muted);
  background: var(--panel-alt); border: 1px solid var(--border-light);
  border-radius: 999px; padding: .22rem .6rem; cursor: pointer;
  transition: border-color var(--transition), color var(--transition); }
.topbar-online:hover { border-color: var(--accent); color: var(--text); }
.topbar-online b { color: var(--text); font-weight: 800; }
.topbar-online-sep { color: var(--text-subtle); }
.topbar-online-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green);
  animation: pp-online-pulse 2.4s ease-out infinite; }
@keyframes pp-online-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70%  { box-shadow: 0 0 0 .35rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 620px) { .topbar-online-lbl { display: none; } }
.pp-online-body { padding: 1rem 1.25rem; }
.pp-online-group { font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-subtle); margin: .7rem 0 .3rem; }
.pp-online-group:first-child { margin-top: 0; }
.pp-online-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; padding: .3rem 0; border-bottom: 1px solid var(--border-light);
  font-size: .85rem; }
.pp-online-row:last-child { border-bottom: none; }
.pp-online-ago { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── SIQPie donut interactivity (ported from SIQ, droppable at lift-in) ── */
.siqpie-slice { transition: opacity .15s ease, transform .15s ease; }
svg.siq-pie:hover .siqpie-slice { opacity: .42; }
svg.siq-pie:hover .siqpie-slice:hover { opacity: 1; }
.siqpie-slice:hover { transform: translate(var(--dx, 0px), var(--dy, 0px)); }
svg.siqpie-clickable .siqpie-slice { cursor: pointer; }
.siqpie-hole { fill: var(--panel-alt); }
.siqpie-cval { fill: var(--text); font: 700 13px inherit; }
.siqpie-clbl { fill: var(--text-muted); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
@keyframes siqpie-pop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
.siqpie-anim { animation: siqpie-pop .45s cubic-bezier(.2,.7,.3,1) both; transform-box: view-box; transform-origin: 100px 60px; }
.siqpie-tip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--panel-alt); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 9px; font: 600 12px inherit; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.4); opacity: 0; transition: opacity .12s ease;
}
.siqpie-tip.on { opacity: 1; }
.siqpie-tip-pct { color: var(--text-muted); font-weight: 500; }

/* ── Development-area rating dots + legend ── */
.pp-dev-dot {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel-alt);
  color: var(--text-muted); font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pp-dev-dot:hover { border-color: var(--accent); }
.pp-dev-dot.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pp-dev-clear {
  width: 22px; height: 22px; margin-left: .25rem; padding: 0;
  border: none; background: none; color: var(--text-subtle);
  font-size: .85rem; line-height: 1; cursor: pointer;
}
.pp-dev-clear:hover { color: var(--red); }
.pp-dev-clear.is-hidden { visibility: hidden; }
.pp-dev-legend-item { font-size: .8rem; color: var(--text-muted); }
.pp-dev-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ── Progress bar (goal progress etc.) ── */
.pp-progress {
  display: inline-block; flex: 1; min-width: 60px; height: 8px;
  border-radius: 4px; background: var(--panel-alt);
  border: 1px solid var(--border); overflow: hidden; vertical-align: middle;
}
.pp-progress-fill {
  display: block; height: 100%; width: 0;
  border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--lime));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: width .15s ease;
}
.pp-goal-prog-slider { accent-color: var(--accent); }
.pp-goal-prog-val { font-size: .8rem; color: var(--text-muted); min-width: 2.6rem; text-align: right; }

/* Forms builder badges */
.pp-form-badge-scale { color: var(--accent); background: var(--accent-muted); border-color: var(--accent); }
.pp-form-badge-sent  { color: var(--text-muted); background: var(--panel-alt); }
.pp-form-badge-sub   { color: var(--lime); background: var(--panel-alt); }

/* Forms results heat scale 1-5 (low -> high) */
.pp-heat-1 { background: rgba(248,113,113,.28); }
.pp-heat-2 { background: rgba(251,146,60,.24); }
.pp-heat-3 { background: rgba(251,191,36,.20); }
.pp-heat-4 { background: rgba(163,230,53,.20); }
.pp-heat-5 { background: rgba(52,211,153,.26); }

/* --- Training load GPS heatmap (SVG pitch) --- */
.tl-hm-turf { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.tl-hm-cell { fill: var(--accent); }
.tl-hm-line rect, .tl-hm-line line, .tl-hm-line circle {
  fill: none;
  stroke: var(--text-muted);
  stroke-opacity: 0.55;
  stroke-width: 0.35;
}
.tl-hm-line .tl-hm-spot { fill: var(--text-muted); fill-opacity: 0.55; stroke: none; }
.tl-hm-tip {
  position: absolute; z-index: 30; pointer-events: none;
  background: var(--panel-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 8px; font-size: .72rem; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.tl-hm-tip b { font-weight: 700; }
.tl-hm-toggle .active { border-color: var(--accent); color: var(--accent); }

/* --- Load tab bar charts (pp-loadbars.js) --- */
.tl-chart svg      { cursor: crosshair; }
.ppb-bar           { transition: opacity .1s ease, filter .1s ease; }
.ppb-bar.is-hover  { opacity: 1; filter: brightness(1.25); }
.ppb-tip {
  position: absolute; z-index: 30; pointer-events: none;
  display: flex; align-items: baseline; gap: .45rem;
  background: var(--panel-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 9px; font-size: .74rem; white-space: nowrap;
  box-shadow: var(--shadow);
}
.ppb-tip b         { font-weight: 700; font-variant-numeric: tabular-nums; }
.ppb-tip-date      { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ppb-tip-type      { color: var(--text-subtle); font-size: .68rem; }
.ppb-tip-match     { color: #f0883e; font-size: .64rem; font-weight: 800; letter-spacing: .05em; }
.tl-dot-match      { background: #f0883e; }
.tl-zoom-hint      { flex: 1; text-align: center; }
.tl-acwr-legend    { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: .5rem; }
.tl-acwr-legend .pp-dot { width: 7px; height: 7px; margin-left: .35rem; }
.nc-table tr.tl-row-match td { background: color-mix(in srgb, #f0883e 7%, transparent); }
.tl-badge-match    { background: color-mix(in srgb, #f0883e 18%, transparent); color: #f0883e; }

/* --- Quadrant scatter tooltip (scatter.js, ported from SIQ) --- */
.siqsc-tip {
  position: absolute; z-index: 30; pointer-events: none;
  background: var(--panel-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 9px; font-size: .74rem; line-height: 1.5; white-space: nowrap;
  box-shadow: var(--shadow);
}
.siqsc-tip b { font-weight: 700; }

/* ── ACWR badge (cover + shared) ─────────────────────────────── */
.pp-acwr-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .6rem; border-radius: 20px; cursor: pointer;
  font-family: inherit; border: 1px solid var(--az, var(--green));
  color: var(--az, var(--green));
  background: color-mix(in srgb, var(--az, var(--green)) 12%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--az, var(--green)) 22%, transparent);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.pp-acwr-badge:hover {
  background: color-mix(in srgb, var(--az, var(--green)) 22%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--az, var(--green)) 40%, transparent);
}
.pp-acwr-ok      { --az: var(--green); }
.pp-acwr-caution { --az: var(--yellow); }
.pp-acwr-risk    { --az: var(--red); animation: pp-acwr-pulse 2.2s ease-in-out infinite; }
.pp-acwr-val { font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-acwr-lbl { font-size: .6rem; font-weight: 700; letter-spacing: .08em; opacity: .85; }
@keyframes pp-acwr-pulse {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--az) 22%, transparent); }
  50%      { box-shadow: 0 0 18px color-mix(in srgb, var(--az) 50%, transparent); }
}

/* ── Motion primitives (depth pass) ──────────────────────────── */
@keyframes pp-fade    { from { opacity: 0; } }
@keyframes pp-pop     { from { opacity: 0; transform: scale(.96) translateY(8px); } }
@keyframes pp-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Flash messages slide in */
.pp-flash { animation: pp-fade-up .3s ease both; box-shadow: var(--shadow-sm); }

/* Animerad bock på spara-knappar (pp-save-tick.js): liten grön badge som
   fjädrar in vid knappens övre högra hörn, ritar bocken och lyfter sedan ut —
   knappen själv täcks aldrig, så inga bakgrundsgissningar behövs */
.pp-tick { position: fixed; z-index: 10000; width: 20px; height: 20px;
  border-radius: 50%; background: #16a34a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3); pointer-events: none;
  animation: pp-tick-in .18s cubic-bezier(.2, .8, .3, 1.35) both,
             pp-tick-out .3s ease-in .75s forwards; }
.pp-tick svg { width: 12px; height: 12px; }
.pp-tick path { fill: none; stroke: currentColor; stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: pp-tick-draw .25s ease-out .1s forwards; }
@keyframes pp-tick-in   { from { transform: scale(.3); opacity: 0; } }
@keyframes pp-tick-out  { to { transform: scale(.8) translateY(-6px); opacity: 0; } }
@keyframes pp-tick-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}