/* ============================================================
   Wildgänse MV - app-local GLOBAL styles
   The BdP design system lives in Wildgaense.Shared
   (tokens.css / foundation.css / shell.css).
   Page-specific styles live in each component's .razor.css
   (CSS isolation). Only genuinely shared/utility styles -
   used across multiple pages, or applied to shared design
   components via Class= - belong here.
   ============================================================ */

body { background: var(--bdp-paper); }

/* ---------- Auth / public pages (shared: Login + Newsletter pages) ---------- */
.auth-card { width: min(440px, 100%); background: #fff; border: 1px solid var(--card-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.auth-brand { background: var(--bdp-pfadiblau); color: #fff; padding: 26px 28px 24px; position: relative; overflow: hidden; }
.auth-brand .ab-row { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.auth-brand .ab-badge { width: 46px; height: 46px; border-radius: 50%; background: var(--bdp-woelflingsgelb); display: grid; place-items: center; flex: none; }
.auth-brand .ab-badge img { width: 30px; height: 30px; }
.auth-brand .ab-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1; }
.auth-brand .ab-sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bdp-woelflingsgelb); font-weight: 700; margin-top: 5px; }
.auth-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 16px; }
.auth-body .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bdp-rrrot); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--fg-subtle); font-size: 12px; font-weight: 700; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--bdp-line); }
.auth-note { font-size: 13px; color: var(--fg-muted); }
.auth-status { background: var(--bdp-woelflingsgelb-hell); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--bdp-pfadiblau); }
.auth-status.error { background: var(--bdp-rrrot-hell); color: var(--bdp-rrrot-dunkel); }

/* ---------- Shared layout utilities ---------- */
/* Stat grid: shared by Übersicht, Team & Zugänge and Öffentliche Liste. */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.stat-grid.stat-3 { grid-template-columns: repeat(3, 1fr); }

/* Filter bar: shared by Mitglieder, Team & Zugänge and Öffentliche Liste. */
.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filterbar .search { width: 240px; max-width: none; }
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* Table cells: shared by Öffentliche Liste, Mitglieder and Mailing-Verlauf. */
.td-date { font-size: 13px; color: var(--fg-muted); white-space: nowrap; }

/* ChipGroup flush (margin reset): shared by Öffentliche Liste and Team & Zugänge. */
.chips-flush { margin: 0; }

/* Member name cell: shared by Mitglieder and Team & Zugänge. */
.member-name { display: flex; align-items: center; gap: 11px; }
.member-name .mn-main { min-width: 0; }
.member-name .mn-name { font-weight: 700; white-space: nowrap; }
.member-name .mn-pfadi { font-size: 12px; color: var(--fg-muted); }

/* Drawer chrome: shared by Mitglieder and Team & Zugänge. */
.drawer-head { position: relative; background: var(--bdp-pfadiblau); padding: 20px 24px 22px; overflow: hidden; flex: 0 0 auto; }
.drawer-head .dh-bar { display: flex; justify-content: space-between; position: relative; z-index: 2; }
/* on the blue drawer header, ghost buttons render in white */
.drawer-head .dh-btn.btn-ghost { color: #fff; }
.drawer-head .dh-btn.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.drawer-head .dh-icon { border: 2px solid rgba(255, 255, 255, .4); }
.drawer-head .dh-back .i { transform: rotate(180deg); }
.drawer-head .dh-id { display: flex; align-items: center; gap: 16px; margin-top: 18px; position: relative; z-index: 2; }
.drawer-head h2 { color: #fff; font-size: 26px; line-height: 1.05; }
.drawer-head .dh-pfadi { font-family: var(--font-accent); color: var(--bdp-woelflingsgelb); font-size: 20px; margin-top: 2px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 24px 28px; }
.drawer-foot { padding: 14px 24px; border-top: 1px solid var(--bdp-line); display: flex; gap: 10px; justify-content: flex-end; flex: 0 0 auto; background: var(--bdp-paper); }
.drawer-form-head { padding: 18px 24px; border-bottom: 1px solid var(--bdp-line); display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* Form layout helpers: shared by Mitglieder, Mailing composer and Newsletter forms. */
.form-col { display: flex; flex-direction: column; gap: 16px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-sep { height: 1px; background: var(--bdp-line); margin: 2px 0; }
.form-sec { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bdp-rrrot); }

/* Newsletter icon: shared by all public Newsletter pages. */
.nl-icon { width: 64px; height: 64px; border-radius: 99px; display: flex; align-items: center; justify-content: center; }
.nl-icon .i { width: 30px; height: 30px; color: var(--bdp-pfadiblau); }
.nl-bg-yellow { background: var(--bdp-woelflingsgelb); }
.nl-bg-green { background: var(--bdp-lagerplatzgruen); }
.nl-bg-red { background: var(--bdp-rrrot-hell); }

/* Centered auth/newsletter bodies + headings (shared by Login + Newsletter pages). */
.auth-center { text-align: center; align-items: center; }
.auth-center-pad { text-align: center; align-items: center; padding-top: 30px; }
.auth-note-center { display: flex; align-items: center; gap: 8px; justify-content: center; }
.nl-title { font-size: 24px; color: var(--bdp-pfadiblau); }
.nl-marks { font-size: 24px; color: var(--bdp-rrrot); }
.nl-strong { color: var(--bdp-pfadiblau); }

/* ---------- Tweaks applied to shared design components via Class= ---------- */
/* These land on the rendered element of Btn/Tag, so they stay global rather
   than in a page's scoped CSS (which could not reach into the child component). */
.role-count { margin-left: auto; }
.perm-tag { border-color: var(--bdp-line); }
.select-auto { width: auto; min-width: 170px; }
.chiprow-mb16 { margin-bottom: 16px; }
.avatar-ring { box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
/* These override the shared TagComponent's own colours. Its base `.tag` rule is scoped
   (`.tag[b-xxx]`, specificity 0,2,0) and loads after app.css, so a plain class would lose -
   `!important` is needed to win the cascade and actually recolour the chip. */
.tag-on-blue { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border-color: transparent !important; }
.tag-leiter { background: var(--bdp-waldgruen) !important; color: #fff !important; border-color: var(--bdp-waldgruen) !important; }
.tag-foerder { background: var(--bdp-internationalerabend) !important; color: #fff !important; border-color: var(--bdp-internationalerabend) !important; }
.nl-submit { justify-content: center; padding: 13px; }
.send-field { margin: 14px 0 18px; }
.field-gap { gap: 10px; }
.check-consent { align-items: flex-start; font-weight: 400; font-size: 12.5px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.send-btn { flex: 1; justify-content: center; }

/* ---------- Mitgliedschaften (Editor) ---------- */
.membership-block { gap: 12px; margin: 4px 0 10px 26px; padding-left: 14px; border-left: 2px solid var(--bdp-line); }
.membership-status { font-size: 13px; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; }
.td-muted { color: var(--fg-subtle); }

/* ---------- Mailing cards & lists (shared across all mailing sub-pages) ---------- */
.seg-bar { margin-bottom: 18px; }
.seg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.seg-card { overflow: hidden; }
.seg-card .seg-mail { flex: 1; justify-content: center; }
.card-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card-title { font-size: 17px; margin-bottom: 4px; }
.card-rule { font-size: 12.5px; color: var(--fg-muted); margin-bottom: 14px; min-height: 34px; }
.count-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }
.count-num { font-family: var(--font-display); font-weight: 900; font-size: 30px; color: var(--bdp-pfadiblau); }
.count-label { font-size: 13px; font-weight: 700; }
.card-actions { display: flex; gap: 8px; }

/* Segment-Editor (Listen & Segmente) */
.seg-edit { display: flex; flex-direction: column; gap: 14px; }
.seg-edit-title { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--bdp-pfadiblau); margin: 0; }
.seg-edit-count { display: flex; align-items: baseline; gap: 8px; }
.seg-edit-count .count-num { color: var(--bdp-waldgruen); font-size: 26px; }
.seg-edit-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Bausteine-Editor */
.bs-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.bs-edit { display: flex; flex-direction: column; gap: 16px; }
.bs-edit-head { display: flex; flex-direction: column; gap: 8px; }
.bs-edit-title { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--bdp-pfadiblau); margin: 0; }
.bs-mjml { font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace; font-size: 13px; min-height: 180px; }
.bs-vars { display: flex; flex-direction: column; gap: 8px; }
.bs-var-row { display: grid; grid-template-columns: 1fr 1fr 130px 1fr auto; gap: 8px; align-items: center; }
.bs-edit-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Medien */
.med-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.med-upload { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--bdp-pfadiblau); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.med-hint { font-size: 13px; }
.med-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.med-card { display: flex; flex-direction: column; gap: 6px; }
.med-img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bdp-line); }
.med-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.med-meta { font-size: 12px; color: var(--fg-muted); }

/* Segment-Regel-Baukasten */
.rb { display: flex; flex-direction: column; gap: 10px; }
.rb-mode { display: inline-flex; gap: 4px; background: var(--bdp-line); border-radius: 999px; padding: 3px; width: fit-content; }
.rb-mode button { border: none; background: none; padding: 6px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--fg-muted); }
.rb-mode button.on { background: #fff; color: var(--bdp-pfadiblau); }
.rb-rows { display: flex; flex-direction: column; gap: 8px; }
.rb-row { display: grid; grid-template-columns: 1.4fr 1.2fr 1.4fr auto; gap: 8px; align-items: center; }
.rb-add { display: flex; align-items: center; gap: 10px; }
.rb-comb { max-width: 220px; }
.rb-text { font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace; font-size: 13px; min-height: 70px; }
.rb-err { margin: 0; }

/* Personalisierungs-Chips (Composer-Inspektor) */
.token-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -2px 0 4px; }
.token-hint { font-size: 11.5px; color: var(--fg-subtle); font-weight: 700; }
.token-chip { border: 1px solid var(--bdp-line); background: #fff; color: var(--bdp-pfadiblau); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.token-chip:hover { background: rgba(14, 66, 120, .06); }

/* Asset-Picker */
.asset-picker { display: flex; flex-direction: column; gap: 10px; }
.asset-current { display: flex; align-items: center; gap: 10px; }
.asset-current-img { max-width: 120px; max-height: 80px; border-radius: 8px; border: 1px solid var(--bdp-line); }
.asset-clear { background: none; border: none; color: var(--bdp-rrrot); font-weight: 700; font-size: 13px; cursor: pointer; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.asset-thumb { padding: 0; border: 2px solid var(--bdp-line); border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff; aspect-ratio: 1; }
.asset-thumb.sel { border-color: var(--bdp-pfadiblau); }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .stat-grid.stat-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } }