/* ============================================================
   SEB Spordiklubi – v2 Design
   SEB internet bank minimalism: white header, white sidebar,
   flat cards, tight typography, darker green (#007B40)
   All rules scoped to body.v2 — v1 is completely untouched.
   ============================================================ */

/* ── v2 Token Overrides ────────────────────────────────────── */
body.v2 {
  --v2-green:         #007B40;
  --v2-green-dark:    #005f30;
  --v2-green-bg:      #f0f7f3;
  --v2-navy:          #001F5B;
  --v2-bg:            #f5f6f8;
  --v2-surface:       #ffffff;
  --v2-border:        #e8e9eb;
  --v2-border-strong: #d0d3d8;
  --v2-text-1:        #0d0e12;
  --v2-text-2:        #555b6b;
  --v2-text-3:        #9ba3b5;
  --v2-sidebar-w:     228px;
  --v2-header-h:      56px;
  --v2-radius:        8px;
  --v2-radius-sm:     6px;
  --v2-shadow-xs:     0 1px 2px rgba(0,0,0,.05);
  --v2-shadow-sm:     0 1px 4px rgba(0,0,0,.07);
  --v2-shadow:        0 2px 8px rgba(0,0,0,.08);

  /* Override v1 tokens */
  --seb-green:        var(--v2-green);
  --seb-green-dark:   var(--v2-green-dark);
  --seb-green-light:  var(--v2-green-bg);
  --seb-navy:         var(--v2-navy);
  --primary:          var(--v2-green);
  --primary-dark:     var(--v2-green-dark);
  --primary-light:    var(--v2-green-bg);
  --bg:               var(--v2-bg);
  --surface:          var(--v2-surface);
  --border:           var(--v2-border);
  --border-strong:    var(--v2-border-strong);
  --text-1:           var(--v2-text-1);
  --text-2:           var(--v2-text-2);
  --text-3:           var(--v2-text-3);
  --radius:           var(--v2-radius);
  --radius-sm:        var(--v2-radius-sm);
  --shadow-sm:        var(--v2-shadow-sm);
  --shadow:           var(--v2-shadow);
  --total-header:     var(--v2-header-h); /* no dark navbar in v2 */

  background: var(--v2-bg);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   HEADER — white, minimal, green dot brand
   ═══════════════════════════════════════════════════════════ */
body.v2 .seb-topbar {
  height: var(--v2-header-h);
  background: var(--v2-surface);
  border-bottom: 1px solid var(--v2-border);
  box-shadow: var(--v2-shadow-xs);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  --topbar-h: var(--v2-header-h);
}

/* Desktop: brand occupies exactly the sidebar width in the topbar */
@media (min-width: 900px) {
  body.v2 .seb-topbar-inner {
    padding: 0;
    gap: 0;
    max-width: none;   /* prevent centering via margin:0 auto */
    margin: 0;
  }
  body.v2 .seb-brand {
    width: var(--v2-sidebar-w);
    min-width: var(--v2-sidebar-w);
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0 1.1rem;
    border-right: 1px solid var(--v2-border);
    height: 100%;
    display: flex !important;
    align-items: center;
    gap: .6rem;
  }
  body.v2 .v2-sidebar-brand { display: none; }
  /* Restore right padding for topbar actions */
  body.v2 .seb-topbar-right { padding-right: 1rem; }
}

/* Mobile: normal padding */
@media (max-width: 899px) {
  body.v2 .seb-topbar-inner { padding-left: 1rem; }
  body.v2 .v2-sidebar-brand { display: none; }
}

/* SEB wordmark: keep the bold black "SEB" text from v1.
   The user confirmed this is fine — we just can't use the
   official logo image. Black text on white header is clean. */
body.v2 .seb-logo-text {
  color: #000;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -.02em;
}

body.v2 .seb-brand-sep {
  background: var(--v2-border);
  height: 1.2rem;
}

body.v2 .seb-logo-text {
  line-height: 1;
}

body.v2 .seb-brand-main {
  color: var(--v2-text-1);
  font-size: .88rem;
  font-weight: 700 !important;
  letter-spacing: .01em;
  text-transform: none !important;
  line-height: 1;
}

body.v2 .seb-brand-text {
  display: flex;
  align-items: center;
}

body.v2 .topbar-icon-btn {
  color: var(--v2-text-2);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.v2 .topbar-icon-btn:hover {
  color: var(--v2-text-1);
  background: var(--v2-bg);
}

body.v2 .seb-topbar-sep {
  background: var(--v2-border);
}

body.v2 .topbar-avatar {
  width: 30px;
  height: 30px;
  font-size: .72rem;
  font-weight: 700;
  background: var(--v2-green-bg);
  color: var(--v2-green);
  border: none;
  border-radius: 50%;
}

body.v2 #topbar-username {
  color: var(--v2-text-1);
  font-size: .82rem;
  font-weight: 600;
}

body.v2 .badge-dot {
  background: var(--v2-green);
}

/* ── Online presence pill in topbar ──────────────────────── */
.v2-online-pill {
  display: none;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--v2-text-2);
  background: var(--v2-bg);
  border: 1px solid var(--v2-border);
  border-radius: 99px;
  padding: .2rem .55rem;
  white-space: nowrap;
  line-height: 1;
}
.v2-online-pill::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-green);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — white, section labels, left-border active
   ═══════════════════════════════════════════════════════════ */
.v2-sidebar {
  display: none;
  position: fixed;
  top: var(--v2-header-h);
  left: 0;
  bottom: 0;
  width: var(--v2-sidebar-w);
  background: var(--v2-surface);
  border-right: 1px solid var(--v2-border);
  z-index: 100;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.v2-sidebar::-webkit-scrollbar { display: none; }

.v2-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: var(--v2-header-h);
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--v2-border);
  flex-shrink: 0;
}

.v2-sidebar-nav {
  flex: 1;
  padding: .75rem 0;
  display: flex;
  flex-direction: column;
}

/* Section group labels injected by v2-layout.js */
.v2-nav-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  padding: 1rem 1.1rem .3rem;
  margin-top: .25rem;
}
.v2-nav-group-label:first-child {
  margin-top: 0;
  padding-top: .75rem;
}

.v2-nav-divider {
  height: 1px;
  background: var(--v2-border);
  margin: .5rem 0;
}

.v2-nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.1rem;
  color: var(--v2-text-2);
  font-size: .83rem;
  font-weight: 500;
  transition: background .1s, color .1s;
  border-left: 3px solid transparent;
  text-decoration: none;
  cursor: pointer;
}

.v2-nav-item i {
  width: 15px;
  text-align: center;
  font-size: .78rem;
  flex-shrink: 0;
  opacity: .65;
}

.v2-nav-item:hover {
  background: var(--v2-bg);
  color: var(--v2-text-1);
}
.v2-nav-item:hover i { opacity: .9; }

.v2-nav-item.active {
  background: var(--v2-green-bg);
  color: var(--v2-green);
  font-weight: 600;
  border-left-color: var(--v2-green);
}
.v2-nav-item.active i { opacity: 1; }

/* Sidebar footer: user info */
.v2-sidebar-footer {
  padding: .75rem;
  border-top: 1px solid var(--v2-border);
}

.v2-sidebar-user {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .6rem;
  border-radius: var(--v2-radius-sm);
  cursor: pointer;
  transition: background .1s;
}
.v2-sidebar-user:hover { background: var(--v2-bg); }

.v2-sidebar-user .topbar-avatar {
  width: 32px;
  height: 32px;
  font-size: .75rem;
  flex-shrink: 0;
}

.v2-sidebar-user-info { overflow: hidden; }

.v2-sidebar-user-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--v2-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-sidebar-user-role {
  font-size: .68rem;
  color: var(--v2-text-3);
  margin-top: .05rem;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT OFFSETS
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  body.v2 .v2-sidebar { display: flex; }

  body.v2 .seb-navbar { display: none !important; }
  body.v2 .hamburger  { display: none !important; }

  body.v2 .main-content {
    margin-top: var(--v2-header-h) !important;
    margin-left: var(--v2-sidebar-w) !important;
    padding-bottom: 3rem;
  }

  body.v2 .bottom-nav { display: none !important; }

  body.v2 .back-fab {
    left: calc(var(--v2-sidebar-w) + 1.25rem);
    bottom: 1.5rem;
  }

  body.v2 .notification-panel {
    top: calc(var(--v2-header-h) + .5rem);
  }

  body.v2 .update-banner {
    top: var(--v2-header-h);
  }

  body.v2 #v2-online-pill-desktop { display: flex; }
  body.v2 #v2-online-pill-mobile  { display: none !important; }
}

@media (max-width: 899px) {
  body.v2 .v2-sidebar { display: none !important; }

  /* Switch topbar from desktop to mobile layout at v2 breakpoint */
  body.v2 .seb-topbar-right    { display: none !important; }
  body.v2 .mobile-topbar-actions { display: flex !important; }
  body.v2 .hamburger            { display: flex !important; }

  body.v2 #v2-online-pill-mobile  { display: flex; }
  body.v2 #v2-online-pill-desktop { display: none !important; }

  body.v2 .main-content {
    margin-top: var(--v2-header-h) !important;
    margin-left: 0 !important;
  }

  /* Keep mobile bottom nav */
  body.v2 .bottom-nav {
    display: flex;
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-border);
    box-shadow: none;
  }

  body.v2 .bottom-nav-item { color: var(--v2-text-3); }
  body.v2 .bottom-nav-item.active { color: var(--v2-green); }

  body.v2 .seb-navbar { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE CONTENT
   ═══════════════════════════════════════════════════════════ */
body.v2 .page-content {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.75rem;
}

@media (max-width: 899px) {
  body.v2 .page-content {
    padding: 1.25rem 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════ */
body.v2 .page-header {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

body.v2 .page-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--v2-text-1);
  line-height: 1.2;
}

body.v2 .page-subtitle {
  font-size: .8rem;
  color: var(--v2-text-3);
  margin-top: .2rem;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════
   SECTION TITLE
   ═══════════════════════════════════════════════════════════ */
body.v2 .section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  margin-bottom: .65rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
body.v2 .section-title:first-child,
body.v2 .section-title[style*="margin-top:0"] { margin-top: 0; }
body.v2 .section-title i { font-size: 9px; }

/* ═══════════════════════════════════════════════════════════
   WELCOME BANNER  →  simple greeting row
   ═══════════════════════════════════════════════════════════ */
body.v2 .welcome-banner {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.5rem;
  color: var(--v2-text-1);
}

body.v2 .welcome-banner h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--v2-text-1);
}

body.v2 .welcome-banner p {
  font-size: .82rem;
  color: var(--v2-text-2);
  margin-top: .2rem;
}

body.v2 .welcome-banner a { color: var(--v2-green); }

/* ═══════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════ */
body.v2 .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 2rem;
}

@media (max-width: 899px) {
  body.v2 .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 1.25rem;
  }
}

body.v2 .stat-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--v2-shadow-xs);
  transition: border-color .12s, box-shadow .12s;
}

body.v2 .stat-card:hover {
  border-color: var(--v2-border-strong);
  box-shadow: var(--v2-shadow-sm);
}

/* Icon: move beside number */
body.v2 .stat-card .stat-icon {
  display: none; /* hide icon, let numbers speak */
}

body.v2 .stat-card .stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  margin-bottom: .4rem;
}

body.v2 .stat-card .stat-value {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--v2-text-1);
  line-height: 1;
}

body.v2 .stat-card.primary .stat-value {
  color: var(--v2-green);
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD GRID
   ═══════════════════════════════════════════════════════════ */
body.v2 .dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  column-gap: 1.75rem;
  row-gap: 0.5rem;
  align-items: start;
}

@media (max-width: 899px) {
  body.v2 .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */
body.v2 .card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  box-shadow: var(--v2-shadow-xs);
}
body.v2 .card .table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

body.v2 .card-hover:hover,
body.v2 .card.card-hover:hover {
  border-color: var(--v2-border-strong);
  box-shadow: var(--v2-shadow-sm);
}

body.v2 .card-header {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--v2-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.v2 .card-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--v2-text-1);
}

body.v2 .card-body {
  padding: 1rem 1.1rem;
}

/* ═══════════════════════════════════════════════════════════
   EVENT CARDS
   ═══════════════════════════════════════════════════════════ */
body.v2 .event-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  box-shadow: var(--v2-shadow-xs);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}

body.v2 .event-card:hover {
  border-color: var(--v2-border-strong);
  box-shadow: var(--v2-shadow-sm);
}

/* Wipe the sport-colour background tint */
body.v2 .event-card[style*="background"] {
  background: var(--v2-surface) !important;
}

body.v2 .event-card.event-card-today {
  border-color: var(--v2-green);
  border-left-width: 3px;
}

/* Thinner stripe */
body.v2 .event-stripe {
  width: 3px !important;
  border-radius: 0;
}

body.v2 .event-card-body {
  padding: .8rem 1rem;
}

body.v2 .event-date-box {
  background: var(--v2-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  min-width: 42px;
}

body.v2 .event-date-day {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--v2-text-1);
}

body.v2 .event-date-month {
  font-size: .6rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}

body.v2 .event-title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--v2-text-1);
  margin-bottom: .25rem;
}

body.v2 .event-meta {
  font-size: .75rem;
  color: var(--v2-text-2);
  gap: .65rem;
}

body.v2 .participants-bar {
  height: 2px;
  background: var(--v2-border);
  border-radius: 99px;
  margin-top: .5rem;
}

body.v2 .participants-fill {
  background: var(--v2-green);
  border-radius: 99px;
}

/* ═══════════════════════════════════════════════════════════
   NEWS CARDS
   ═══════════════════════════════════════════════════════════ */
body.v2 .news-card,
body.v2 .card.card-hover {
  border-radius: var(--v2-radius);
  border: 1px solid var(--v2-border);
  box-shadow: var(--v2-shadow-xs);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
body.v2 .btn {
  border-radius: var(--v2-radius-sm);
  font-size: .8rem;
  font-weight: 600;
  padding: .45rem .9rem;
  transition: background .12s, border-color .12s, box-shadow .12s;
}

body.v2 .btn-primary,
body.v2 .btn-seb {
  background: var(--v2-green);
  border-color: var(--v2-green);
  color: #fff;
}
body.v2 .btn-primary:hover,
body.v2 .btn-seb:hover {
  background: var(--v2-green-dark);
  border-color: var(--v2-green-dark);
}

body.v2 .btn-secondary {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border-strong);
  color: var(--v2-text-1);
}
body.v2 .btn-secondary:hover {
  background: var(--v2-bg);
}

body.v2 .btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--v2-text-2);
}
body.v2 .btn-ghost:hover {
  background: var(--v2-bg);
  color: var(--v2-text-1);
}

body.v2 .btn-sm {
  font-size: .75rem;
  padding: .3rem .7rem;
}
body.v2 .btn-xs {
  font-size: .7rem;
  padding: .18rem .5rem;
}

body.v2 .btn-full { width: 100%; }

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
body.v2 .badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 99px;
  padding: .18rem .55rem;
}

body.v2 .badge-success  { background: var(--v2-green-bg); color: var(--v2-green); }
body.v2 .badge-danger   { background: #fdeaea; color: #b91c1c; }
body.v2 .badge-warning  { background: #fff8e6; color: #92600a; }
body.v2 .badge-neutral  { background: var(--v2-bg); color: var(--v2-text-2); }
body.v2 .badge-info     { background: #e0effa; color: #005a99; }

body.v2 .countdown-badge {
  background: var(--v2-bg);
  color: var(--v2-text-2);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  padding: .1rem .45rem;
}
body.v2 .countdown-badge.today,
body.v2 .countdown-badge.soon {
  background: var(--v2-green-bg);
  color: var(--v2-green);
}

/* ═══════════════════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════════════════ */
body.v2 .form-input,
body.v2 .form-textarea,
body.v2 .form-select {
  border-radius: var(--v2-radius-sm);
  border-color: var(--v2-border-strong);
  font-size: .85rem;
}
body.v2 .form-input:focus,
body.v2 .form-textarea:focus,
body.v2 .form-select:focus {
  border-color: var(--v2-green);
  box-shadow: 0 0 0 3px rgba(0,123,64,.1);
  outline: none;
}

body.v2 .form-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--v2-text-2);
}

body.v2 .form-hint {
  font-size: .72rem;
  color: var(--v2-text-3);
}

/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
body.v2 .tabs {
  border-bottom: 1px solid var(--v2-border);
  margin-bottom: 1.25rem;
}

body.v2 .tab-btn {
  font-size: .8rem;
  font-weight: 600;
  padding: .6rem 1rem;
  color: var(--v2-text-2);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
}
body.v2 .tab-btn.active {
  color: var(--v2-green);
  border-bottom-color: var(--v2-green);
}
body.v2 .tab-btn:hover:not(.active) {
  color: var(--v2-text-1);
  background: var(--v2-bg);
}

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */
body.v2 .table-container,
body.v2 .table-wrap {
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  overflow: hidden;
}

body.v2 .data-table {
  font-size: .8rem;
}

body.v2 .data-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  background: var(--v2-bg);
  border-bottom: 1px solid var(--v2-border);
  padding: .65rem 1rem;
}

body.v2 .data-table td {
  border-bottom: 1px solid var(--v2-border);
  padding: .6rem 1rem;
  color: var(--v2-text-1);
}

body.v2 .data-table tr:last-child td { border-bottom: none; }
body.v2 .data-table tbody tr:hover td { background: var(--v2-bg); }

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
body.v2 .modal {
  border-radius: var(--v2-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
}

body.v2 .modal-header {
  border-bottom: 1px solid var(--v2-border);
  padding: 1rem 1.25rem;
}

body.v2 .modal-header h3 {
  font-size: .95rem;
  font-weight: 700;
}

body.v2 .modal-footer {
  border-top: 1px solid var(--v2-border);
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
body.v2 .empty-state {
  color: var(--v2-text-3);
  background: var(--v2-bg);
  border: 1px dashed var(--v2-border-strong);
  border-radius: var(--v2-radius);
}

body.v2 .empty-state i {
  color: var(--v2-text-3);
  opacity: .5;
}

/* ═══════════════════════════════════════════════════════════
   GRIDS
   ═══════════════════════════════════════════════════════════ */
body.v2 .grid-3,
body.v2 .grid-2 {
  gap: 10px;
}

/* Tournament card in grid */
body.v2 .tournament-card {
  border-radius: var(--v2-radius);
  border: 1px solid var(--v2-border);
  box-shadow: var(--v2-shadow-xs);
}

/* ═══════════════════════════════════════════════════════════
   CALENDAR
   ═══════════════════════════════════════════════════════════ */
body.v2 .calendar-grid {
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  background: var(--v2-surface);
}

body.v2 .calendar-day {
  font-size: .8rem;
  border-radius: var(--v2-radius-sm);
}

body.v2 .calendar-day.today {
  background: var(--v2-green);
  color: #fff;
}

body.v2 .calendar-day.has-event::after {
  background: var(--v2-green);
  width: 4px;
  height: 4px;
}

body.v2 .calendar-day.selected {
  outline: 2px solid var(--v2-green);
}

/* ═══════════════════════════════════════════════════════════
   ANNOUNCEMENTS & BANNERS
   ═══════════════════════════════════════════════════════════ */
body.v2 .site-announcement {
  border-radius: var(--v2-radius-sm);
  font-size: .82rem;
  margin-bottom: 1rem;
}

body.v2 .no-sports-banner {
  border-radius: var(--v2-radius-sm);
  font-size: .82rem;
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATION PANEL
   ═══════════════════════════════════════════════════════════ */
body.v2 .notification-panel {
  border-radius: var(--v2-radius);
  border: 1px solid var(--v2-border);
  box-shadow: var(--v2-shadow);
}

body.v2 .notif-panel-header {
  border-bottom: 1px solid var(--v2-border);
  font-size: .82rem;
  font-weight: 700;
}

body.v2 .notif-item {
  font-size: .8rem;
  border-bottom: 1px solid var(--v2-border);
}

body.v2 .notif-item:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD
   ═══════════════════════════════════════════════════════════ */
body.v2 .leaderboard-row {
  font-size: .82rem;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR AVATAR (member chips, leaderboard etc)
   ═══════════════════════════════════════════════════════════ */
body.v2 .sidebar-avatar {
  background: var(--v2-text-2);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   PARTICIPANT CHIP
   ═══════════════════════════════════════════════════════════ */
body.v2 .participant-chip {
  background: var(--v2-bg);
  border: 1px solid var(--v2-border);
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 500;
  padding: .15rem .55rem;
  color: var(--v2-text-1);
}

/* ═══════════════════════════════════════════════════════════
   FEED TICKER
   ═══════════════════════════════════════════════════════════ */
body.v2 .feed-ticker-wrap {
  border-radius: 0 0 var(--v2-radius) var(--v2-radius);
}

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
body.v2 .toast {
  border-radius: var(--v2-radius-sm);
  font-size: .82rem;
  box-shadow: var(--v2-shadow);
}

/* ═══════════════════════════════════════════════════════════
   BACK FAB
   ═══════════════════════════════════════════════════════════ */
body.v2 .back-fab {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  color: var(--v2-text-1);
  box-shadow: var(--v2-shadow);
  border-radius: 50%;
}
body.v2 .back-fab:hover {
  background: var(--v2-bg);
}

/* ═══════════════════════════════════════════════════════════
   UPDATE BANNER
   ═══════════════════════════════════════════════════════════ */
body.v2 .update-banner {
  font-size: .82rem;
}

/* ═══════════════════════════════════════════════════════════
   AUTH PAGE — subtle tweaks only
   ═══════════════════════════════════════════════════════════ */
body.v2 .auth-topbar {
  height: var(--v2-header-h);
}

body.v2 .auth-card {
  border-radius: var(--v2-radius);
  box-shadow: var(--v2-shadow);
}

body.v2 .auth-tab.active {
  color: var(--v2-green);
  border-bottom-color: var(--v2-green);
}

/* ═══════════════════════════════════════════════════════════
   PWA INSTALL BANNER
   ═══════════════════════════════════════════════════════════ */
#install-banner {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--v2-radius, 12px);
  box-shadow: var(--v2-shadow, 0 8px 32px rgba(0,0,0,.15));
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 8000;
  white-space: nowrap;
}
@media (max-width: 480px) {
  #install-banner { bottom: 5rem; left: 1rem; right: 1rem; transform: none; white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════
   SESSION EXPIRED MODAL
   ═══════════════════════════════════════════════════════════ */
#session-expired-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1.5rem;
}
.session-expired-box {
  background: var(--surface, #fff);
  border-radius: var(--v2-radius, 12px);
  box-shadow: var(--v2-shadow, 0 8px 32px rgba(0,0,0,.18));
  padding: 2.5rem 2rem;
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.session-expired-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.4rem;
  color: var(--v2-green, #007B40);
}
.session-expired-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-1, #111);
  margin-bottom: .5rem;
}
.session-expired-msg {
  font-size: .875rem;
  color: var(--text-2, #555);
  margin-bottom: 1.75rem;
  line-height: 1.5;
}

/* Hide side-info panel when there isn't room for it next to the card */
@media (max-width: 860px) {
  body.v2 .auth-side-info { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PROFILE — stat cards row
   ═══════════════════════════════════════════════════════════ */
body.v2 .profile-stats .stat-card {
  padding: .9rem 1rem;
}

/* ═══════════════════════════════════════════════════════════
   MISC OVERRIDES
   ═══════════════════════════════════════════════════════════ */
/* Remove blue top bar from v1 seb-navbar (already hidden but belt+braces) */
body.v2 .seb-navbar { display: none !important; }

/* Hamburger: only on mobile */
@media (min-width: 900px) {
  body.v2 .hamburger { display: none !important; }
}
body.v2 .hamburger {
  color: var(--v2-text-1);
}

/* Drawer stays unchanged — it's the mobile fallback */

/* ═══════════════════════════════════════════════════════════
   PERFECTIONIST FIXES
   ═══════════════════════════════════════════════════════════ */

/* 1. Brand separator: keep the 1px vert bar between "SEB" and
      "Spordiklubi" — it matches the v1 header look the user wants. */

/* 2. Profile button was orange (#e8620a) in v1 — jarring on the
      white v2 header. Revert to neutral gray. */
body.v2 #profile-btn,
body.v2 #profile-btn-m {
  color: var(--v2-text-2);
}
body.v2 #profile-btn:hover,
body.v2 #profile-btn-m:hover {
  color: var(--v2-text-1);
  background: var(--v2-bg);
}

/* 3. Welcome banner: v1 layout is display:flex (row) which puts h2
      and p side-by-side. Switch to column so they stack properly.
      Also clear the min-height ghost and add a bottom separator. */
body.v2 .welcome-banner {
  flex-direction: column;
  align-items: flex-start;
  min-height: auto;
  padding: 0 0 1.25rem 0;
  margin-bottom: 1.25rem;
  overflow: visible;
  border-bottom: 1px solid var(--v2-border);
}

/* Online counter moved to topbar — hide it from the welcome banner */
body.v2 .welcome-banner > div {
  display: none !important;
}

/* 4. Profile header gradient is completely off-brand for v2.
      Replace with clean white surface card. */
body.v2 .profile-header {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  box-shadow: var(--v2-shadow-xs);
  color: var(--v2-text-1);
}
body.v2 .profile-header h2 { color: var(--v2-text-1); }
body.v2 .profile-header p  { color: var(--v2-text-2); opacity: 1; }
body.v2 .profile-avatar-lg {
  background: var(--v2-green-bg);
  color: var(--v2-green);
  border-color: var(--v2-border);
}
body.v2 .sport-tag {
  background: var(--v2-bg);
  color: var(--v2-text-2);
}

/* 5. Tournament card/hero colorful gradient banners are inconsistent
      with the minimal design. Flatten to neutral. */
body.v2 .tournament-card-banner,
body.v2 .tournament-hero-banner {
  background: var(--v2-bg) !important;
  border-bottom: 1px solid var(--v2-border);
}
body.v2 .tournament-card-banner::after,
body.v2 .tournament-hero-banner::after {
  display: none;
}

/* 6. Remove hover lift transforms — flat design signals hover via
      border/shadow only, not physical lift. */
body.v2 .event-card:hover,
body.v2 .card.card-hover:hover,
body.v2 .card-hover:hover,
body.v2 .tournament-card:hover,
body.v2 .news-card:hover,
body.v2 .equipment-card:hover,
body.v2 .sport-type-card:hover,
body.v2 .sport-select-card:hover {
  transform: none !important;
}

/* 7. Notification panel: v1 anchors at topbar+navbar=108px.
      Override unconditionally for the 56px v2 header. */
body.v2 .notification-panel {
  top: calc(var(--v2-header-h) + .5rem);
}

/* 8. Mobile page-content: add safe-area-inset-bottom so content
      is never hidden behind the iPhone home indicator. */
@media (max-width: 899px) {
  body.v2 .page-content {
    padding-bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 1rem);
  }
}

/* 9. Member card hover: v1 reveals a top border on hover.
      Remove the dated animation. */
body.v2 .member-card:hover {
  border-top: none;
}
body.v2 .member-card {
  border: 1px solid var(--v2-border);
  box-shadow: var(--v2-shadow-xs);
  border-radius: var(--v2-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 480px) {
  body.v2 .member-card { padding: .75rem .5rem; }
  body.v2 .member-avatar { width: 42px; height: 42px; font-size: 1rem; }
}

/* 10. App footer: v1 has 5rem bottom padding designed for the
       mobile bottom-nav. On v2 desktop (sidebar) that's dead space. */
@media (min-width: 900px) {
  body.v2 .app-footer {
    padding-bottom: 1.5rem;
  }
}

/* 11. Surface-2 token: v1 value is #F7F9FB. Set explicitly so
       card-footer, modal-footer etc. get a clean near-white. */
body.v2 { --surface-2: #fafbfc; }

/* 12. Stat card: reset border-left from the v1 .primary variant. */
body.v2 .stat-card { border-left-width: 1px; }

/* 13. Detail hero: ensure v2 green accent and consistent radius. */
body.v2 .detail-hero {
  border-left-color: var(--v2-green);
  border-radius: var(--v2-radius);
  box-shadow: var(--v2-shadow-xs);
}

/* 14. Calendar today cell: ensure white text on filled circle. */
body.v2 .calendar-day.today { color: #fff; }

/* 15. Avatars: v1 uses navy. Switch to green-bg for v2 coherence. */
body.v2 .member-avatar,
body.v2 .news-author-avatar,
body.v2 .comment-avatar,
body.v2 .round-num {
  background: var(--v2-green-bg);
  color: var(--v2-green);
  line-height: 1;
}

/* 16. Filter chips: pill shape for v2. */
body.v2 .filter-chip {
  border-radius: 999px;
  font-size: .77rem;
}

/* 17. Drawer active item: ensure darker green matches v2. */
body.v2 .drawer-item.active {
  background: var(--v2-green);
}