/* EasySadaqa Portal — flat theme layer (desktop + mobile)
   Loaded after styles.css. Same structure as the admin (1px borders, small radii,
   flat surfaces, no glow shadows, no decorative gradients) but in the portal's own
   neutral + navy/teal palette. Remove the <link> in index.html to go back. */

:root{
  --p-bg:#f6f6f5;
  --p-surface:#ffffff;
  --p-surface-2:#f4f4f3;
  --p-line:#e7e6e4;
  --p-line-strong:#d6d4d1;
  --p-text:#1c1b1a;
  --p-muted:#6f6d69;
  --p-primary:#0d346b;
  --p-primary-hover:#0a2a57;
  --p-accent:#2f8f8a;
  --p-accent-hover:#26776f;
  --p-accent-soft:rgba(47,143,138,.10);
  --p-danger-soft:rgba(220,38,38,.06);
  --p-current:rgba(13,52,107,.07);
  --p-radius:12px;
  --p-radius-sm:8px;
}
body.theme-dark{
  --p-bg:#0b1220;
  --p-surface:#111a2b;
  --p-surface-2:#152035;
  --p-line:#1f2b40;
  --p-line-strong:#2c3b55;
  --p-text:#e5ebf3;
  --p-muted:#94a3b8;
  --p-primary:#2f8f8a;
  --p-primary-hover:#38a19b;
  --p-accent:#3aa39d;
  --p-accent-hover:#46b3ad;
  --p-accent-soft:rgba(58,163,157,.14);
  --p-danger-soft:rgba(248,113,113,.07);
  --p-current:rgba(143,176,230,.09);
}


/* ── No glow shadows anywhere in the app ── */
/* The top bar keeps its original look; only its hamburger menu is restyled */
#appShell *:not(header.topbar *),
#appShell *:not(header.topbar *)::before,
#appShell *:not(header.topbar *)::after,
#appShell header.topbar .menu-dd *{
  box-shadow:none !important;
  text-shadow:none !important;
}
/* glowing orb that follows the mouse over buttons */
.ui-hover-orb{ display:none !important }
#appShell :focus-visible{
  outline:2px solid var(--p-accent);
  outline-offset:2px;
}

/* ── Page + top bar ── */
#appShell .portal-stage{
  background:var(--p-bg) !important;
}
/* iOS/Android overscroll exposes the document behind the portal. Match it to
   the page surface so swiping at the bottom never reveals a different strip. */
html:has(#appShell:not(.hidden)),
body:has(#appShell:not(.hidden)){
  background:var(--p-bg) !important;
}
/* decorative glow blobs */
#appShell .portal-stage::before,
#appShell .portal-stage::after,
#appShell .portal-settings-panel::before{
  display:none !important;
}
#appShell .portal-panel::before,
#appShell .portal-pair-card::before,
#appShell .portal-settings-card::before{
  background:none !important;
}
/* Hamburger menu */
#appShell header.topbar .menu-dd{
  border-radius:10px;
  border:1px solid var(--p-line-strong);
  background:var(--p-surface);
  box-shadow:0 8px 24px rgba(15,23,42,.10);
  padding:6px;
}
body.theme-dark #appShell header.topbar .menu-dd{ box-shadow:0 12px 32px rgba(0,0,0,.36) }
#appShell header.topbar .menu-dd .menu-item{
  border-radius:6px;
  font-weight:600;
  color:var(--p-text);
}
#appShell header.topbar .menu-dd .menu-item:hover{ background:var(--p-surface-2) }
#appShell header.topbar .menu-dd .menu-item.danger{ color:#dc2626 }
body.theme-dark #appShell header.topbar .menu-dd .menu-item.danger{ color:#f87171 }
#appShell header.topbar .menu-dd .menu-item.danger:hover{ background:var(--p-danger-soft) }
#appShell header.topbar .menu-dd .theme-icon{ border-radius:6px }
#appShell header.topbar .menu-dd .menu-sep{ background:var(--p-line) }
#appShell header.topbar .menu-dd .menu-timer{ border-radius:6px }
#appShell header.topbar .menu-dd .lang-btn,
#appShell header.topbar .menu-dd .lang-option{ border-radius:6px }

/* ── Cards / panels: white, 1px border, 12px radius ── */
#appShell .portal-panel,
#appShell .portal-stat-card,
#appShell .plan-card,
#appShell .dashboard-insight-card,
#appShell .portal-dash-card,
#appShell .mc-stats-chart-card,
#appShell .mc-web-toolbar,
#appShell .mc-web-add-grid,
#appShell .device-card,
#appShell .portal-certificate-panel,
#appShell .portal-member-panel,
#appShell .portal-settings-panel,
#appShell .portal-pair-card,
#appShell .portal-settings-card{
  background:var(--p-surface) !important;
  border:1px solid var(--p-line) !important;
  border-radius:var(--p-radius) !important;
}
/* Paid / open stat cards keep a quiet flat tint instead of a gradient */
#appShell .portal-stat-card--paid{ background:color-mix(in srgb, var(--p-accent) 6%, var(--p-surface)) !important }
#appShell .portal-stat-card--open{ background:color-mix(in srgb, #dc2626 5%, var(--p-surface)) !important }
#appShell .portal-empty-inline{ border-radius:var(--p-radius-sm) }

/* ── Pickers / selects ── */
#appShell .portal-picker-trigger,
#appShell .portal-picker-field,
#appShell .pill-select,
#appShell .psc-period{
  min-height:36px;
  border-radius:var(--p-radius-sm) !important;
  border:1px solid var(--p-line-strong) !important;
  background:var(--p-surface) !important;
  color:var(--p-text) !important;
  font-weight:600;
  letter-spacing:0;
  transform:none !important;
}
#appShell .portal-picker-trigger:hover,
#appShell .portal-picker-field:hover,
#appShell .pill-select:hover,
#appShell .psc-period:hover{
  background:var(--p-surface-2) !important;
  border-color:var(--p-muted) !important;
}
#appShell .mc-web-picker-trigger{
  min-height:40px;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#appShell .mc-web-picker-compact{
  width:auto;
  min-width:0;
  max-width:260px;
  flex:0 0 auto;
}

/* ── Search + amount fields ── */
#appShell .mc-web-search-wrap,
#appShell .mc-web-amount-shell{
  height:40px;
  border-radius:var(--p-radius-sm);
  border:1px solid var(--p-line-strong);
  background:var(--p-surface);
}
#appShell .mc-web-search-wrap:focus-within,
#appShell .mc-web-amount-shell:focus-within{
  border-color:var(--p-accent);
}
#appShell .mc-web-search{ font-size:14px; font-weight:500 }
#appShell .mc-web-amount-field{ padding-top:18px }
#appShell .mc-web-toolbar-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--p-muted);
}
#appShell .mc-web-summary{ min-height:0; font-size:13px; font-weight:600; color:var(--p-muted) }

/* ── Buttons: flat, 8px radius ── */
#appShell .btn:not(header.topbar *),
#appShell .mc-web-shell .btn,
#appShell .portal-export-btn{
  border-radius:var(--p-radius-sm) !important;
  transform:none !important;
}
#appShell .mc-web-toolbar-btn,
#appShell .mc-web-toolbar .portal-export-btn{
  min-height:40px;
  height:40px;
  padding:0 16px;
  font-size:13px;
  font-weight:700;
}
#appShell .btn:not(header.topbar *).primary,
#appShell .mc-web-shell .btn.primary,
#appShell .mc-web-save-btn{
  background:var(--p-primary) !important;
  border-color:var(--p-primary) !important;
  color:#fff !important;
}
#appShell .btn:not(header.topbar *).primary:hover,
#appShell .mc-web-save-btn:hover{ background:var(--p-primary-hover) !important }
#appShell .mc-web-add-trigger{
  background:var(--p-accent) !important;
  border-color:var(--p-accent) !important;
  color:#fff !important;
}
#appShell .mc-web-add-trigger:hover{ background:var(--p-accent-hover) !important }
#appShell .btn:not(header.topbar *).light,
#appShell .btn:not(header.topbar *).ghost,
#appShell .mc-web-shell .btn.light,
#appShell .mc-web-shell .btn.ghost,
#appShell .portal-export-btn,
#appShell #btnMemberContributionArchiveView{
  background:var(--p-surface) !important;
  border:1px solid var(--p-line-strong) !important;
  color:var(--p-text) !important;
}
#appShell .btn:not(header.topbar *).light:hover,
#appShell .btn:not(header.topbar *).ghost:hover,
#appShell .portal-export-btn:hover,
#appShell #btnMemberContributionArchiveView:hover{
  background:var(--p-surface-2) !important;
}
#appShell #btnMemberContributionArchiveView.is-active{
  background:var(--p-primary) !important;
  border-color:var(--p-primary) !important;
  color:#fff !important;
}

/* Segmented switch (Eingegangen / Nicht bezahlt) */
#appShell .mc-stats-members-switch{
  border-radius:var(--p-radius-sm);
  border:1px solid var(--p-line);
  background:var(--p-surface-2);
}
#appShell .mc-stats-members-switch .portal-auth-tab{
  border-radius:6px;
  background:transparent;
}
#appShell .mc-stats-members-switch .portal-auth-tab.active{
  background:var(--p-surface) !important;
  color:var(--p-text) !important;
  outline:1px solid var(--p-line-strong);
}

/* ── Member table ── */
#appShell .mc-web-head-row{
  background:var(--p-surface-2) !important;
  border:1px solid var(--p-line) !important;
  border-radius:var(--p-radius) var(--p-radius) 0 0 !important;
}
#appShell .mc-web-head-row::before{ display:none }
#appShell .mc-web-head-month,
#appShell .mc-web-cell{ background-image:none }
#appShell .mc-web-row{
  background:var(--p-surface);
  border-bottom:1px solid var(--p-line);
}
#appShell .mc-web-month-cell{ border-left-color:var(--p-line) }
#appShell .mc-web-month-cell.is-paid{ background:var(--p-accent-soft) }
#appShell .mc-web-month-cell.is-current,
#appShell .mc-web-month-cell.is-current.is-paid{
  background:var(--p-current);
}
#appShell .mc-payment-badge{ border-radius:5px }

/* Dropdowns and modals live outside #appShell; flatten them the same way
   (they float, so they keep one quiet shadow for depth) */
.portal-modal-card{
  background:var(--p-surface) !important;
  border:1px solid var(--p-line) !important;
  border-radius:14px !important;
  box-shadow:0 12px 32px rgba(15,23,42,.14) !important;
}
.portal-modal.theme-light .portal-modal-card,
#deviceProjectsModal.theme-light .portal-modal-card{
  background:#ffffff !important;
  border-color:#e2e8f0 !important;
}
.portal-dropdown{
  border-radius:10px;
  border:1px solid var(--p-line-strong);
  background:var(--p-surface);
  box-shadow:0 8px 24px rgba(15,23,42,.10);
}
.portal-dropdown.theme-light{ background:#fff; border-color:#cbd5e1 }
.portal-dropdown-option,
.portal-dropdown.has-custom .portal-picker-option{ border-radius:6px }

/* ── Picker window header: plain title, no coloured uppercase eyebrow ── */
.portal-picker-eyebrow{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--p-muted) !important;
}
.portal-picker-eyebrow:empty,
.portal-picker-hint:empty{ display:none }

/* ── Day calendar: flat cells instead of bordered tiles ── */
#portalPickerModal .portal-picker-cal-wday{
  text-transform:none;
  letter-spacing:0;
  font-size:12px;
  font-weight:600;
}
#portalPickerModal .portal-picker-cal-day:not([class*="is-range"]){
  border:1px solid transparent !important;
  border-radius:8px !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
#portalPickerModal .portal-picker-cal-day:not([class*="is-range"]):hover{
  background:var(--p-surface-2) !important;
  border-color:var(--p-line) !important;
}
#portalPickerModal .portal-picker-cal-day.is-emphasis:not(.is-active):not([class*="is-range"]){
  background:var(--p-accent-soft) !important;
}
#portalPickerModal .portal-picker-cal-day.is-active:not([class*="is-range"]){
  background:var(--p-primary) !important;
  border-color:var(--p-primary) !important;
  color:#fff !important;
}

/* ── Mobile: hide the Plan / Läuft ab / Status card for now ── */
@media (max-width:899px){
  #appShell .plan-card{ display:none !important }
}

/* ── Hamburger menu on mobile: full-height navy side drawer ── */
.menu-close{ display:none }
@media (max-width:899px){
  /* the header's blur would trap the fixed drawer inside the header */
  body.menu-open .topbar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  #appShell header.topbar .menu-dd,
  html[dir="rtl"] #appShell header.topbar .menu-dd{
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    left:auto;
    width:58vw;
    min-width:230px;
    max-width:340px;
    max-height:none;
    height:100vh;
    height:100dvh;
    padding:14px 12px 20px;
    border:0;
    border-radius:0;
    background:#081f45;
    color:#ffffff;
    box-shadow:0 0 0 100vmax rgba(8,15,30,.42);
    z-index:1100;
    animation:menuDrawerIn .2s ease-out;
  }
  body.theme-dark #appShell header.topbar .menu-dd{
    background:#061632;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.55);
  }
  @keyframes menuDrawerIn{
    from{ transform:translateX(100%) }
    to  { transform:translateX(0) }
  }
  /* top row: theme icon, flag, close arrow */
  #appShell header.topbar .menu-dd .menu-toprow{
    align-items:center;
    gap:8px;
    padding:0 0 12px;
  }
  #appShell header.topbar .menu-dd .menu-toprow .menu-item{ flex:0 0 auto }
  #appShell header.topbar .menu-dd .menu-theme{
    width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    justify-content:center;
    border-radius:8px;
    background:rgba(255,255,255,.16);
  }
  #appShell header.topbar .menu-dd #themeLabel,
  #appShell header.topbar .menu-dd #langToggleLabel{ display:none }
  #appShell header.topbar .menu-dd .theme-icon{
    border:0;
    background:transparent;
  }
  #appShell header.topbar .menu-dd .lang-btn{
    width:40px;
    height:40px;
    padding:0;
    justify-content:center;
    border:0;
    border-radius:8px;
    background:rgba(255,255,255,.16);
  }
  #appShell header.topbar .menu-dd .lang-btn img{ width:22px; height:15px }
  /* language list: opens inline under the icons, on the navy background */
  #appShell header.topbar .menu-dd .menu-toprow{ flex-wrap:wrap }
  #appShell header.topbar .menu-dd .lang-switch{ display:contents }
  #appShell header.topbar .menu-dd .lang-menu{
    position:static;
    order:10;
    flex:0 0 100%;
    min-width:0;
    padding:6px 0 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none !important;
  }
  #appShell header.topbar .menu-dd .lang-menu:not(.hidden){
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:4px;
  }
  #appShell header.topbar .menu-dd .lang-option{
    flex-direction:column;
    gap:4px;
    padding:8px 0;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#ffffff;
    font-size:12px;
  }
  #appShell header.topbar .menu-dd .lang-option img{ width:22px; height:15px }
  #appShell header.topbar .menu-dd .lang-option:hover,
  #appShell header.topbar .menu-dd .lang-option.active{ background:rgba(255,255,255,.12) }
  #appShell header.topbar .menu-dd .menu-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin-left:auto;
    border:0;
    border-radius:8px;
    background:rgba(255,255,255,.16);
    color:#ffffff;
    cursor:pointer;
  }
  /* icons only, no button boxes */
  #appShell header.topbar .menu-dd .menu-theme,
  #appShell header.topbar .menu-dd .lang-btn,
  #appShell header.topbar .menu-dd .menu-close{
    background:transparent !important;
    border:0 !important;
  }
  #appShell header.topbar .menu-dd .theme-icon{ color:#ffffff }
  /* the auto-logout keeps running, it just isn't shown in the drawer */
  #appShell header.topbar .menu-dd .menu-timer{ display:none }
  /* links */
  #appShell header.topbar .menu-dd .menu-sep{ background:rgba(255,255,255,.22) }
  #appShell header.topbar .menu-dd .menu-item{
    color:#ffffff;
    font-size:15px;
    padding:11px 10px;
  }
  #appShell header.topbar .menu-dd .menu-item:hover,
  #appShell header.topbar .menu-dd .menu-item:active{ background:rgba(255,255,255,.12) }
  #appShell header.topbar .menu-dd .menu-item.danger{ color:#ffe1e1 }
  body.theme-dark #appShell header.topbar .menu-dd .menu-item.danger{ color:#ffe1e1 }
  #appShell header.topbar .menu-dd .menu-item.danger:hover{ background:rgba(255,255,255,.12) }
  #appShell header.topbar .menu-dd .menu-timer{
    margin-top:10px;
    border:0;
    background:rgba(255,255,255,.12);
    color:#ffffff;
    font-size:12px;
  }
}

/* ── Dashboard / stats cards: calmer type ── */
#appShell .psc-label{
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
  font-weight:600;
  opacity:1;
  color:var(--p-muted);
}
#appShell .psc-amount{
  font-weight:700;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
#appShell .psc-meta{
  font-size:13px;
  font-weight:500;
  opacity:1;
  color:var(--p-muted);
  gap:3px 4px;
}
#appShell .psc-trend{
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  color:var(--p-muted);
}
#appShell .psc-trend[data-trend="up"]{ color:#15803d }
#appShell .psc-trend[data-trend="down"]{ color:#dc2626 }
body.theme-dark #appShell .psc-trend[data-trend="up"]{ color:#4ade80 }
body.theme-dark #appShell .psc-trend[data-trend="down"]{ color:#f87171 }

/* ── Stat cards: comparison sits at the right of the Ø line; tighter grid ── */
#appShell .portal-stats-grid{ gap:12px !important }
#appShell .psc-meta .psc-trend{
  margin-left:auto;
  margin-top:0;
  padding-top:0;
}

/* ── Insight cards (Bester Tag, Top-Projekt, Freitags-Anteil, Aktive Tage) ── */
#appShell .dashboard-insights-grid{ gap:12px }
#appShell .dashboard-insight-card{
  min-height:0;
  padding:16px 18px;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
  background:var(--p-surface) !important;
  border:1px solid var(--p-line) !important;
  border-radius:var(--p-radius) !important;
}
#appShell .dashboard-insight-label{
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--p-muted);
}
#appShell .dashboard-insight-value{
  margin-top:6px;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
#appShell .dashboard-insight-meta{ margin-top:4px; font-size:13px; font-weight:500 }

/* ── Dashboard calendar: no dots under the days ── */
#appShell .calendar-day .cal-dot{ display:none }

/* ── Form fields everywhere: 8px corners, white, thin border ── */
#appShell .portal-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.mc-web-search):not(.mc-web-amount-input),
#appShell .portal-main select:not(.portal-native-select),
#appShell .portal-main textarea,
#appShell .portal-main .portal-date-range-trigger{
  border-radius:var(--p-radius-sm) !important;
  border:1px solid var(--p-line-strong) !important;
  background:var(--p-surface) !important;
  min-height:40px;
  height:auto;
  padding-top:9px;
  padding-bottom:9px;
  font-size:15px;
}
#appShell .portal-main input:focus,
#appShell .portal-main select:focus,
#appShell .portal-main textarea:focus{
  border-color:var(--p-accent) !important;
}

/* ── Labels: sentence case, no letter-spacing ── */
#appShell .portal-main label:not(.notify-row):not(.portal-switch):not(.portal-member-switch-row),
#appShell .portal-main .lbl,
#appShell .portal-transaction-summary-label,
#appShell .portal-member-tv-section-title-text,
#appShell .portal-certificate-asset-title,
#appShell .plan-chip-label,
#appShell .mc-web-toolbar-label{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:13px;
  font-weight:600;
  color:var(--p-muted);
}

/* ── Pill shapes -> small corners ── */
#appShell .portal-transaction-badge,
#appShell .tablet-status-badge,
#appShell .device-card-status,
#appShell .portal-dash-date-chip,
#appShell .mc-payment-badge{
  border-radius:6px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
#appShell .btn-projects,
#appShell .btn-security,
#appShell .btn-unpair,
#appShell .portal-primary-btn,
#appShell .overview-map-floating-btn,
#appShell .overview-map-search-toggle,
#appShell .overview-map-status{
  border-radius:var(--p-radius-sm) !important;
}
#appShell .portal-main .portal-auth-tabs{
  border-radius:var(--p-radius-sm) !important;
  padding:3px;
}
#appShell .portal-main .portal-auth-tab{
  border-radius:6px !important;
  min-height:36px;
}
#appShell .portal-main label.notify-row{ border-radius:var(--p-radius-sm) !important }

/* ── Transactions: one card per day, rows separated by lines (no nested boxes) ── */
#appShell .portal-transaction-day{
  background:var(--p-surface) !important;
  border:1px solid var(--p-line) !important;
  border-radius:var(--p-radius) !important;
}
#appShell .portal-transaction-day-items{ gap:0 !important }
#appShell .portal-transaction-item{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--p-line) !important;
  border-radius:0 !important;
}
#appShell .portal-transaction-summary-card,
#appShell .portal-transaction-summary > *{
  border-radius:var(--p-radius) !important;
  background:var(--p-surface) !important;
  border:1px solid var(--p-line) !important;
}

/* ── Remaining rounded boxes (TV, Spendenbescheinigung, devices, map) ── */
#appShell .portal-member-tv-card,
#appShell .portal-member-tv-pair,
#appShell .portal-certificate-asset-card,
#appShell .overview-map-shell{
  border-radius:var(--p-radius) !important;
  border:1px solid var(--p-line) !important;
  background-image:none !important;
}
#appShell .portal-member-tv-card,
#appShell .portal-member-tv-pair,
#appShell .portal-certificate-asset-card{ background-color:var(--p-surface) !important }
#appShell .portal-certificate-asset-preview,
#appShell .tablet-status-item{ border-radius:var(--p-radius-sm) !important }

/* ── Insight cards: more air inside and between (web) ── */
#appShell .dashboard-insights-grid{ gap:16px }
#appShell .dashboard-insight-card{ padding:20px 22px; min-height:118px }
#appShell .dashboard-insight-value{ margin-top:10px; line-height:1.2 }
#appShell .dashboard-insight-meta{ margin-top:8px }

/* ── Segmented switches (Logins / Mitgliedsbeiträge, Spendendatum / Zuwendungsjahr) ── */
#appShell .portal-main .portal-auth-tabs{
  background:var(--p-surface-2) !important;
  border:1px solid var(--p-line) !important;
}
#appShell .portal-main .portal-auth-tab{
  background:transparent !important;
  color:var(--p-muted) !important;
}
#appShell .portal-main .portal-auth-tab.active{
  background:var(--p-surface) !important;
  color:var(--p-text) !important;
  outline:1px solid var(--p-line-strong);
}

/* ── Settings lists (API keys, accounts) ── */
#appShell .portal-settings-list-item{
  border-radius:var(--p-radius-sm) !important;
  border:1px solid var(--p-line) !important;
  background:var(--p-surface) !important;
}
#appShell .portal-settings-danger-btn{
  border-radius:var(--p-radius-sm) !important;
  background:transparent !important;
  border:1px solid rgba(220,38,38,.45) !important;
  color:#dc2626 !important;
}
#appShell #apiDocsBox{ border-radius:var(--p-radius-sm) !important }

/* ── API panel: never wider than the screen (long curl line) ── */
#appShell #apiPanel,
#appShell #apiPanel .portal-settings-form-grid > *{ min-width:0 }
#appShell #apiPanel pre{
  max-width:100%;
  white-space:pre-wrap;
  word-break:break-all;
  overflow-wrap:anywhere;
}
#appShell #apiPanel .portal-empty-inline{ text-align:left }
@media (max-width:899px){
  #appShell #apiPanel .portal-settings-inline-head{ flex-direction:column; align-items:stretch; gap:12px }
  #appShell #apiPanel .portal-settings-inline-head .portal-settings-primary-btn{ width:100% }
  #appShell #apiPanel .portal-settings-form-grid{ grid-template-columns:1fr }
  #appShell #apiPanel .portal-settings-list-item{ flex-direction:column }
}

/* ── Windows (Passwort ändern, 2FA, member edit, export…): same fields/buttons ── */
.portal-modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.portal-modal-card select,
.portal-modal-card textarea{
  border-radius:var(--p-radius-sm) !important;
  border:1px solid var(--p-line-strong) !important;
  background:var(--p-surface) !important;
  box-shadow:none !important;
  min-height:42px;
}
.portal-modal-card input:focus,
.portal-modal-card select:focus,
.portal-modal-card textarea:focus{ border-color:var(--p-accent) !important }
.portal-modal-card .btn,
.portal-modal-card button.btn,
.portal-modal-card .portal-primary-btn{
  border-radius:var(--p-radius-sm) !important;
  box-shadow:none !important;
  background-image:none;
}
.portal-modal-card .btn.primary{
  background:var(--p-primary) !important;
  border-color:var(--p-primary) !important;
  color:#fff !important;
}
.portal-modal-card .lbl,
.portal-modal-card label:not(.notify-row){
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:600;
}
.portal-modal-card .portal-modal-title{ letter-spacing:-.01em }
.portal-modal-card .msg,
.portal-modal-card .hint,
.portal-modal-card .portal-empty-inline{ border-radius:var(--p-radius-sm) !important }

/* ── Sidebar (desktop: fixed left bar · mobile: drawer from the hamburger) ── */
.portal-sidebar-footer,
.portal-sidebar-mobile-head{ display:none }

/* shared look: icons + names, quiet active state, icon-only footer */
#appShell .portal-sidebar::before,
#appShell .portal-sidebar-brand,
#appShell .portal-sidebar-plan,
#appShell .portal-sidebar [data-portal-nav="reportes"]{ display:none !important }
#appShell .portal-sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0 !important;
  padding:0 !important;
}
#appShell .portal-sidebar-nav > *{ margin:0 !important }
#appShell .portal-sidebar .portal-nav-btn{
  width:100%;
  height:40px;
  gap:12px;
  padding:0 12px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--p-muted) !important;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  transform:none !important;
  transition:background .12s, color .12s;
}
#appShell .portal-sidebar .portal-nav-btn span{ font-size:14px; font-weight:inherit; white-space:nowrap }
#appShell .portal-sidebar .portal-nav-btn:hover{
  background:var(--p-surface-2) !important;
  color:var(--p-text) !important;
}
#appShell .portal-sidebar .portal-nav-btn.is-active{
  background:var(--p-surface-2) !important;
  color:var(--p-text) !important;
  font-weight:600;
}
#appShell .portal-sidebar .portal-nav-btn.is-active .portal-nav-icon{ color:var(--p-accent) }
body.theme-dark #appShell .portal-sidebar .portal-nav-btn.is-active,
body.theme-dark #appShell .portal-sidebar .portal-nav-btn:hover{ background:rgba(255,255,255,.06) !important }
#appShell .portal-nav-icon{ width:19px; height:19px; flex:0 0 19px; display:block }
#appShell .portal-nav-icon-wrap{ display:inline-flex }
#appShell .portal-sidebar-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--p-muted);
  cursor:pointer;
}
#appShell .portal-sidebar-icon-btn:hover{ background:var(--p-surface-2); color:var(--p-text) }
body.theme-dark #appShell .portal-sidebar-icon-btn:hover{ background:rgba(255,255,255,.06) }
#appShell .portal-sidebar-icon-btn img{ width:20px; height:14px; border-radius:2px; object-fit:cover }
#appShell .portal-sidebar-footer{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--p-line);
}
#appShell #sidebarLogout{ margin-left:auto }
#appShell .portal-sidebar{
  flex-direction:column;
  margin:0 !important;
  border:0 !important;
  border-right:1px solid var(--p-line) !important;
  border-radius:0 !important;
  background:var(--p-surface) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow-y:auto;
}

/* desktop: fixed bar under the header; header = logo far left / eye far right */
@media (min-width:900px){
  #appShell .topbar-inner{
    max-width:none !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
  #appShell #sessionCountdownTop,
  #appShell #btnMenu,
  #appShell #menuDropdown{ display:none !important }
  #appShell .portal-sidebar{
    display:flex !important;
    position:sticky;
    top:var(--es-topbar-h, 72px);
    align-self:flex-start;
    width:228px;
    flex:0 0 228px;
    height:calc(100vh - var(--es-topbar-h, 72px));
    padding:14px 10px 12px;
    z-index:30;
  }
}

/* mobile: the hamburger opens the same bar as a drawer from the left */
@media (max-width:899px){
  body.menu-open #appShell #menuDropdown{ display:none !important }
  /* let the drawer rise above the sticky header while it is open */
  body.menu-open #appShell .portal-stage{ isolation:auto !important }
  body.menu-open #appShell .portal-shell{ z-index:auto !important }
  body.menu-open #appShell .portal-sidebar{
    display:flex !important;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:74vw;
    min-width:240px;
    max-width:300px;
    height:100vh;
    height:100dvh;
    padding:12px 10px 16px;
    z-index:1100;
    box-shadow:0 0 0 100vmax rgba(15,15,15,.38) !important;
    animation:sidebarDrawerIn .2s ease-out;
  }
  body.theme-dark.menu-open #appShell .portal-sidebar{ box-shadow:0 0 0 100vmax rgba(0,0,0,.55) !important }
  @keyframes sidebarDrawerIn{
    from{ transform:translateX(-100%) }
    to  { transform:translateX(0) }
  }
  #appShell .portal-sidebar-mobile-head{
    display:flex;
    justify-content:flex-end;
    padding:0 0 8px;
  }
  #appShell .portal-sidebar .portal-nav-btn{ height:44px; font-size:15px }
  #appShell .portal-sidebar .portal-nav-btn span{ font-size:15px }
}

/* ── Same page margins everywhere: grow with the window, up to a limit ── */
#appShell .portal-page-shell{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:clamp(20px, 3vw, 40px) clamp(16px, 3.2vw, 44px) !important;
}
#appShell [data-portal-view="mitgliedsbeitraege"]{
  padding:clamp(20px, 3vw, 40px) clamp(16px, 2.4vw, 36px);
  max-width:1640px;
  margin:0 auto;
}

/* ── Sidebar: no focus ring on click; Einstellungen sub-items ── */
#appShell .portal-sidebar button:focus,
#appShell .privacy-toggle:focus{ outline:none !important }
#appShell .portal-sidebar-sub{ display:none }
#appShell .portal-sidebar [data-portal-nav="config"].is-active + .portal-sidebar-sub{
  display:flex;
  flex-direction:column;
  gap:1px;
  margin:2px 0 6px 21px !important;
  padding-left:10px;
  border-left:1px solid var(--p-line);
}
#appShell .portal-sidebar-subitem{
  display:block;
  width:100%;
  height:32px;
  padding:0 10px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--p-muted);
  font-size:13px;
  font-weight:500;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
#appShell .portal-sidebar-subitem:hover{ background:var(--p-surface-2); color:var(--p-text) }
#appShell .portal-sidebar-subitem.is-active{ color:var(--p-text); font-weight:600 }
body.theme-dark #appShell .portal-sidebar-subitem:hover{ background:rgba(255,255,255,.06) }
@media (max-width:899px){
  #appShell .portal-sidebar-subitem{ height:38px; font-size:14px }
}

/* ── Passwort ändern / 2FA shown inside the Einstellungen page ── */
.portal-modal.portal-modal--inline{
  position:static !important;
  inset:auto !important;
  display:block;
  margin-top:24px;
  padding:0 !important;
  background:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index:auto !important;
  animation:none !important;
}
.portal-modal.portal-modal--inline.hidden{ display:none !important }
.portal-modal.portal-modal--inline .portal-modal-card{
  width:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  transform:none !important;
  animation:none !important;
  box-shadow:none !important;
  border-radius:var(--p-radius) !important;
  padding:24px !important;
}

/* ── Entkoppeln: password confirmation inside the device card ── */
#appShell .device-unpair-confirm{
  margin-top:4px;
  padding-top:12px;
  border-top:1px solid var(--p-line);
}
#appShell .device-unpair-confirm.hidden{ display:none !important }
#appShell .device-unpair-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
#appShell .device-unpair-row input{ flex:1 1 180px; min-width:0 }
#appShell .btn-unpair-confirm,
#appShell .btn-unpair-cancel{
  height:40px;
  padding:0 14px;
  border-radius:var(--p-radius-sm);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
#appShell .btn-unpair-confirm{ border:1px solid #dc2626; background:#dc2626; color:#fff }
#appShell .btn-unpair-confirm:disabled{ opacity:.6 }
#appShell .btn-unpair-cancel{ border:1px solid var(--p-line-strong); background:var(--p-surface); color:var(--p-text) }
#appShell .device-unpair-msg{ margin-top:6px; font-size:12px; color:#dc2626 }
#appShell .device-unpair-msg:empty{ display:none }

/* ── Typography: one title style everywhere (the sidebar font), elegant numbers ── */
:root{
  --p-font:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-font-num:"Inter Tight", "Inter", system-ui, sans-serif;
}
/* page titles */
#appShell .portal-main h2.text-2xl,
#appShell .portal-main .mc-page-title{
  font-family:var(--p-font) !important;
  font-size:26px !important;
  font-weight:700 !important;
  letter-spacing:-.015em !important;
  line-height:1.2 !important;
}
/* section / card titles */
#appShell .portal-main h3,
#appShell .portal-dash-title,
#appShell .mc-stats-group-title,
#appShell .portal-modal--inline .portal-modal-title{
  font-family:var(--p-font) !important;
  font-size:16px !important;
  font-weight:600 !important;
  letter-spacing:-.005em !important;
}
@media (max-width:899px){
  #appShell .portal-main h2.text-2xl,
  #appShell .portal-main .mc-page-title{ font-size:22px !important }
  #appShell .portal-main h3,
  #appShell .portal-dash-title,
  #appShell .mc-stats-group-title{ font-size:15px !important }
}

/* numbers: amounts, counts, totals */
#appShell .psc-amount,
#appShell .dashboard-insight-value,
#appShell .portal-transaction-summary-value,
#appShell .portal-transaction-summary-value-sm,
#appShell .portal-transaction-amount,
#appShell .tx-amount,
#appShell .stat-value,
#appShell .portal-dash-total,
#appShell .mini-total-value,
#appShell .plan-chip-value,
#appShell .portal-activity-kpi-value,
#appShell .portal-activity-detail-amount,
#appShell .portal-certificate-transaction-result-amount,
#appShell .portal-member-total,
#appShell .portal-member-month-amount,
#appShell .mc-web-total-cell,
#appShell .mc-web-month-amt,
#appShell .mc-stats-members-count,
#appShell .friday-bar-value,
#appShell .portal-billing-doc-number,
#appShell [data-bind="tabletOnlineCount"],
#appShell [data-bind="tabletOfflineCount"],
#appShell [data-bind="deviceCount"]{
  font-family:var(--p-font-num) !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  font-variant-numeric:tabular-nums lining-nums;
}
#appShell .mc-web-month-amt{ font-weight:500 !important; letter-spacing:0 !important }
#appShell .psc-amount{ font-size:30px }
#appShell .portal-transaction-summary-value{ font-size:26px !important }
#appShell .portal-transaction-summary-value.portal-transaction-summary-value-sm,
#appShell .portal-transaction-summary-value-sm{ font-size:17px !important; line-height:1.3 }
#appShell .portal-transaction-day-title{
  font-family:var(--p-font-num) !important;
  font-weight:600 !important;
  color:var(--p-text) !important;
  letter-spacing:0 !important;
}
/* member cards on mobile: totals, month amounts and names in the same calmer type */
#appShell .pmm-total,
#appShell .pmm-month-amount,
#appShell .pmm-amt{
  font-family:var(--p-font-num) !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  font-variant-numeric:tabular-nums lining-nums;
}
#appShell .pmm-name{
  font-family:var(--p-font) !important;
  font-weight:600 !important;
  text-decoration:none !important;
}

/* ── Einstellungen: the sidebar lists the sections, so the card grid is hidden ── */
#appShell .portal-settings-grid{ display:none !important }

/* ── Web: content starts next to the sidebar (no big empty gap left/top) ── */
@media (min-width:900px){
  #appShell .portal-main{ padding:0 !important }
  #appShell .portal-page-shell{
    max-width:1320px !important;
    margin-left:0 !important;
    margin-right:auto !important;
    padding:24px clamp(20px, 2.6vw, 40px) 40px !important;
  }
  #appShell [data-portal-view="mitgliedsbeitraege"]{
    box-sizing:border-box;
    width:100%;
    max-width:1640px;
    min-width:0;
    margin:0;
    padding:24px clamp(20px, 2.2vw, 36px) 40px;
  }
  #appShell .portal-main{ min-width:0 }
}

/* ── Devices: no Online/Offline pill (the dot shows it); battery moves up ── */
#appShell .tablet-status-badge,
#appShell .device-card-status{ display:none !important }
#appShell .tablet-status-head-right,
#appShell .device-card-status-wrap{
  justify-content:flex-start !important;
  align-self:flex-start;
  margin-top:0 !important;
  padding-top:0 !important;
}
#appShell .device-title-row{ align-items:center }
#appShell .device-title-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 8px;
  margin-right:2px;
}

/* ── Mobile header: hamburger and eye as plain icons (no circle/box) ── */
@media (max-width:899px){
  #appShell header.topbar #btnMenu,
  #appShell header.topbar #btnSensitiveToggle{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    outline:none !important;
    backdrop-filter:none !important;
  }
}

/* ── PIN box inside the device card ── */
#appShell .device-card .portal-modal--inline{ margin-top:0 }
#appShell .device-card .portal-modal.portal-modal--inline .portal-modal-card{
  padding:12px 0 0 !important;
  border:0 !important;
  border-top:1px solid var(--p-line) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:inherit;
}
#appShell .device-card .portal-modal--inline .portal-modal-title{
  font-family:var(--p-font) !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--p-text) !important;
  margin:0 0 6px;
}
#appShell .device-card .portal-modal--inline #dsDeviceName{ display:none }
#appShell .device-card .portal-modal--inline .portal-modal-body{ padding:0 !important }
#appShell .device-card .portal-modal--inline .lbl{
  font-size:13px; font-weight:600; color:var(--p-muted) !important;
  text-transform:none !important; letter-spacing:0 !important;
}
#appShell .device-card .portal-modal--inline input{
  border-radius:var(--p-radius-sm) !important;
  border:1px solid var(--p-line-strong) !important;
  background:var(--p-surface) !important;
  color:var(--p-text) !important;
  min-height:40px;
  padding:8px 12px !important;
  font-size:15px;
}
#appShell .device-card .portal-modal--inline .portal-modal-hint{ font-size:12px; color:var(--p-muted) !important }
#appShell .device-card .portal-modal--inline .portal-modal-actions{
  display:flex;
  flex-direction:row !important;
  justify-content:flex-start;
  gap:8px;
  margin-top:12px;
  padding:0 !important;
  border:0 !important;
}
#appShell .device-card .portal-modal--inline .portal-modal-actions .btn{
  width:auto !important;
  min-height:40px;
  height:40px;
  padding:0 16px;
  border-radius:var(--p-radius-sm) !important;
  font-size:13px;
  font-weight:600;
  box-shadow:none !important;
}
#appShell .device-card .portal-modal--inline #dsSave{ background:var(--p-primary) !important; border:1px solid var(--p-primary) !important; color:#fff !important }
#appShell .device-card .portal-modal--inline #dsClose{ background:var(--p-surface) !important; border:1px solid var(--p-line-strong) !important; color:var(--p-text) !important }
#appShell .device-card .portal-modal--inline .portal-modal-actions{ align-items:center }
#appShell .device-card .portal-modal--inline .portal-modal-actions .btn{ margin:0 !important }

/* ── Batteries: same width + right-aligned digits so they line up in a column,
      and vertically centred with the device name ── */
#appShell .device-card-status-wrap,
#appShell .tablet-status-head-right{
  display:flex !important;
  flex-direction:column;
  align-items:flex-end !important;
  justify-content:center !important;
  align-self:center !important;
}
#appShell .device-card-head,
#appShell .tablet-status-head{ align-items:center !important }
#appShell .device-battery-value{
  display:inline-block;
  min-width:4ch;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ── Einstellungen sections are part of the page: no window close (X) button ── */
#appShell [data-portal-view="config"] .portal-modal--inline .portal-modal-close-x{ display:none !important }

/* ── Mein Profil: account information ── */
#appShell .portal-profile-info{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:0;
  margin:16px 0 0;
  border:1px solid var(--p-line);
  border-radius:var(--p-radius-sm);
  overflow:hidden;
}
#appShell .portal-profile-info > div{
  padding:12px 14px;
  border-bottom:1px solid var(--p-line);
  min-width:0;
}
#appShell .portal-profile-info dt{
  font-size:12px;
  font-weight:600;
  color:var(--p-muted);
  margin:0 0 3px;
}
#appShell .portal-profile-info dd{
  margin:0;
  font-size:14px;
  font-weight:500;
  color:var(--p-text);
  overflow-wrap:anywhere;
}
#appShell .portal-profile-info{ grid-template-columns:1fr }
#appShell .portal-profile-info > div:last-child{ border-bottom:0 }
@media (min-width:900px){
  #appShell .portal-profile-info{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
  #appShell .portal-profile-info > div:nth-last-child(-n+3){ border-bottom:0 }
  #appShell .portal-profile-info > div:not(:nth-child(3n+1)){ border-left:1px solid var(--p-line) }
}

/* ── Mobile: Monat / Jahr / Gerät / Projekt fill the card width (2 even columns) ── */
@media (max-width:899px){
  #appShell .portal-dash-controls{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px 12px !important;
    width:100%;
    justify-content:stretch !important;
  }
  #appShell .portal-dash-controls .control-pair{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    flex:none !important;
    align-items:stretch !important;
  }
  #appShell .portal-dash-controls .control-pair label{ text-align:left }
  #appShell .portal-dash-controls .portal-picker-field,
  #appShell .portal-dash-controls .pill-select{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

/* ── Charts: zoom reset button; transaction badges row hidden when empty ── */
#appShell .portal-dash-canvas-wrap{ position:relative }
#appShell .portal-chart-reset{
  position:absolute;
  top:4px;
  right:4px;
  z-index:2;
  height:28px;
  padding:0 10px;
  border:1px solid var(--p-line-strong);
  border-radius:6px;
  background:var(--p-surface);
  color:var(--p-text);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
#appShell .portal-chart-reset.hidden{ display:none }
#appShell .portal-dash-canvas-wrap canvas{ touch-action:pan-y }
#appShell .portal-transaction-badges:not(:has(*)){ display:none }

/* ── Mobile: the main area never grows wider than the screen (was clipped on the right) ── */
#appShell .portal-main{ min-width:0 !important }
@media (max-width:899px){
  #appShell .portal-shell{ width:100%; max-width:100vw }
  #appShell .portal-main{ width:100%; max-width:100% }
  #appShell .portal-page-shell{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
  }
}
@media (max-width:899px){
  /* chart card headers: title, legend and total stacked instead of squeezed side by side */
  #appShell .portal-dash-card-head{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }
  #appShell .portal-dash-head-right{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start !important;
    gap:6px;
  }
  #appShell .portal-dash-legend{ flex-wrap:wrap; justify-content:flex-start !important }
  #appShell .portal-dash-card-head .portal-dash-total{ text-align:left }
}

/* ── Meine Geräte: pair code ── */
#appShell .paircode-row{ gap:8px; align-items:stretch }
#appShell .paircode-value{
  flex:1 1 auto;
  height:auto;
  min-height:56px;
  justify-content:center;
  padding:10px 16px;
  border:1px solid var(--p-line-strong);
  border-radius:var(--p-radius-sm);
  background:var(--p-surface-2);
  color:var(--p-text);
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:26px;
  font-weight:600;
  letter-spacing:.28em;
  font-variant-numeric:tabular-nums;
}
body.theme-dark #appShell .paircode-value{ background:rgba(255,255,255,.04); color:var(--p-text) }
#appShell .paircode-copy{
  flex:0 0 auto;
  width:auto;
  height:auto;
  min-height:56px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  border:1px solid var(--p-line-strong);
  border-radius:var(--p-radius-sm);
  background:var(--p-surface);
  color:var(--p-text);
  font-size:13px;
  font-weight:600;
  transform:none !important;
}
#appShell .paircode-copy:hover{ background:var(--p-surface-2) }
#appShell .paircode-copy svg{ width:18px; height:18px }
#appShell .paircode-copy .paircode-copied-icon{ display:none }
#appShell .paircode-copy.copied{ border-color:#16a34a; color:#16a34a; background:rgba(22,163,74,.08) }
#appShell .paircode-copy.copied .paircode-copy-icon{ display:none }
#appShell .paircode-copy.copied .paircode-copied-icon{ display:block }

/* ── Meine Geräte: pencil as a plain icon, rename row in the new style ── */
#appShell .btn-edit-device,
body.theme-dark #appShell .btn.light.btn-edit-device{
  width:28px !important;
  height:28px !important;
  min-height:28px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:var(--p-muted) !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#appShell .btn-edit-device:hover{ background:var(--p-surface-2) !important; color:var(--p-text) !important }
#appShell .btn-edit-device .edit-svg{ width:16px; height:16px }
#appShell .btn-edit-device .btn-edit-device-label,
#appShell .btn-edit-device .edit-icon{ display:none !important }
#appShell .device-edit-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
#appShell .device-title-input{
  flex:1 1 160px;
  min-width:0;
  height:40px !important;
  min-height:40px;
  padding:0 12px !important;
  border-radius:var(--p-radius-sm) !important;
  border:1px solid var(--p-line-strong) !important;
  background:var(--p-surface) !important;
  color:var(--p-text) !important;
  font-size:15px;
}
#appShell .btn-save-device,
#appShell .btn-cancel-device{
  height:40px !important;
  padding:0 14px !important;
  border-radius:var(--p-radius-sm) !important;
  font-size:13px !important;
  font-weight:600 !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:pointer;
}
#appShell .btn-save-device{ background:var(--p-primary) !important; border:1px solid var(--p-primary) !important; color:#fff !important }
#appShell .btn-cancel-device,
body.theme-dark #appShell .btn-cancel-device{ background:var(--p-surface) !important; border:1px solid var(--p-line-strong) !important; color:var(--p-text) !important }

/* ── PIN: no extra explanation text; eye button to show the current PIN ── */
#appShell .device-card .portal-modal--inline [data-i18n="deviceAdminPinHint"]{ display:none !important }
#appShell .ds-pin-wrap{ position:relative }
#appShell .ds-pin-wrap input{ padding-right:44px !important }
#appShell .ds-pin-toggle{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--p-muted);
  cursor:pointer;
}
#appShell .ds-pin-toggle:hover{ background:var(--p-surface-2); color:var(--p-text) }
#appShell .ds-pin-toggle svg{ width:18px; height:18px }
#appShell .ds-pin-toggle .ds-eye-closed{ display:none }
#appShell .ds-pin-toggle[aria-pressed="true"] .ds-eye-open{ display:none }
#appShell .ds-pin-toggle[aria-pressed="true"] .ds-eye-closed{ display:block }
#appShell #dsAdminPin{ font-family:"JetBrains Mono", ui-monospace, monospace; letter-spacing:.12em }

/* ── Mitgliedsbeiträge: Eingegangen (green) / Offen (red) cards — plain surface, border in the amount's colour ── */
#appShell .portal-stat-card--paid{
  background:var(--p-surface) !important;
  border-color:#166534 !important;
}
#appShell .portal-stat-card--open{
  background:var(--p-surface) !important;
  border-color:#991b1b !important;
}
body.theme-dark #appShell .portal-stat-card--paid{ border-color:#4ade80 !important }
body.theme-dark #appShell .portal-stat-card--open{ border-color:#f87171 !important }
#appShell .portal-stat-card--paid .psc-label{ color:#15803d !important }
#appShell .portal-stat-card--paid .psc-amount{ color:#166534 !important }
#appShell .portal-stat-card--open .psc-label{ color:#b91c1c !important }
#appShell .portal-stat-card--open .psc-amount{ color:#991b1b !important }
body.theme-dark #appShell .portal-stat-card--paid .psc-label,
body.theme-dark #appShell .portal-stat-card--paid .psc-amount{ color:#4ade80 !important }
body.theme-dark #appShell .portal-stat-card--open .psc-label,
body.theme-dark #appShell .portal-stat-card--open .psc-amount{ color:#f87171 !important }

/* ── Mobile Mitgliedsbeiträge: minimal side margins; member cards sit directly on the page ── */
@media (max-width:899px){
  #appShell [data-portal-view="mitgliedsbeitraege"]{ padding-left:10px !important; padding-right:10px !important }
  #appShell .portal-member-page.portal-member-mobile-page{ padding-left:0 !important; padding-right:0 !important }
  #appShell .portal-member-mobile-surface{
    padding-left:0 !important;
    padding-right:0 !important;
    border:0 !important;
    background:transparent !important;
  }
  #appShell .portal-member-row.pmm-card{ padding-left:12px !important; padding-right:12px !important }
}
#appShell .device-card .btn.light.btn-edit-device,
body.theme-dark #appShell .device-card .btn.light.btn-edit-device{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  width:28px !important;
  height:28px !important;
  padding:0 !important;
  color:var(--p-muted) !important;
}
#appShell .device-card .btn.light.btn-edit-device:hover{ background:var(--p-surface-2) !important; color:var(--p-text) !important }
#appShell .device-card .btn-edit-device[aria-expanded="true"]{ display:none !important }
#appShell .paircode-row{ max-width:480px }

/* Keep the generated pair code readable without dominating the mobile card. */
@media (max-width:640px){
  #appShell .paircode-row{ gap:6px; max-width:none }
  #appShell .paircode-value{
    min-height:46px;
    padding:8px 10px;
    border-radius:12px;
    font-size:20px;
    letter-spacing:.16em;
  }
  #appShell .paircode-copy{
    min-height:46px;
    width:46px;
    padding:0;
    justify-content:center;
    border-radius:12px;
  }
}

/* ── Member search (desktop + mobile): one clean field, no box-in-box ── */
#appShell .portal-member-mobile-search-wrap,
#appShell .mc-web-toolbar .mc-web-search-wrap{
  display:flex !important;
  align-items:center;
  gap:8px;
  height:44px !important;
  padding:0 12px !important;
  border:1px solid var(--p-line-strong) !important;
  border-radius:var(--p-radius-sm) !important;
  background:var(--p-surface) !important;
  box-shadow:none !important;
}
#appShell .portal-member-mobile-search-wrap:focus-within,
#appShell .mc-web-toolbar .mc-web-search-wrap:focus-within{ border-color:var(--p-accent) !important }
#appShell .portal-member-mobile-search-wrap svg,
#appShell .mc-web-toolbar .mc-web-search-icon{
  position:static !important;
  flex:0 0 18px;
  width:18px;
  height:18px;
  color:var(--p-muted) !important;
}
#appShell #memberContributionSearchMobile,
#appShell .mc-web-search{
  flex:1 1 auto;
  min-width:0;
  height:100% !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:15px !important;
  font-weight:500 !important;
  color:var(--p-text) !important;
}
#appShell #memberContributionSearchMobile::placeholder,
#appShell .mc-web-search::placeholder{ color:var(--p-muted) !important; opacity:1 }

/* ── easySadaqa TV: plain section titles (no coloured bar, no uppercase) ── */
#appShell .portal-member-tv-section-title{
  color:var(--p-text) !important;
  font-family:var(--p-font) !important;
  font-size:14px !important;
  font-weight:600 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  border-top-color:var(--p-line) !important;
}
#appShell .portal-member-tv-section-title::before{ display:none !important; content:none !important }
body.theme-dark #appShell .portal-member-tv-section-title{ color:var(--p-text) !important }

/* ── Signature / logo / stamp boxes (Spendenbescheinigung + Einstellungen) ── */
#appShell .portal-certificate-asset-card{
  padding:16px !important;
  text-align:left !important;
  align-items:stretch !important;
}
#appShell .portal-certificate-asset-title{
  font-family:var(--p-font) !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--p-text) !important;
  text-align:left !important;
}
#appShell .portal-certificate-asset-note{
  font-size:12px !important;
  color:var(--p-muted) !important;
  text-align:left !important;
}
#appShell .portal-certificate-asset-preview{
  border:1px dashed var(--p-line-strong) !important;
  background:var(--p-surface-2) !important;
  border-radius:var(--p-radius-sm) !important;
}
#appShell .portal-certificate-asset-actions{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px !important;
}
#appShell .portal-certificate-asset-actions .btn{
  flex:0 0 auto !important;
  width:auto !important;
  min-height:38px !important;
  height:38px;
  padding:0 14px !important;
  font-size:13px !important;
  font-weight:600 !important;
}

/* signature drawing window */
.portal-signature-modal-card .portal-signature-stage-wrap{
  border:1px solid var(--p-line-strong) !important;
  border-radius:var(--p-radius-sm) !important;
  background:#ffffff !important;
  box-shadow:none !important;
}
.portal-signature-modal-card .portal-signature-actions{
  display:flex !important;
  flex-direction:row !important;
  gap:8px !important;
  justify-content:flex-end;
}
.portal-signature-modal-card .portal-signature-actions .btn{
  width:auto !important;
  flex:0 0 auto !important;
  min-height:40px;
  padding:0 16px !important;
  border-radius:var(--p-radius-sm) !important;
  font-size:13px !important;
  font-weight:600 !important;
}
.portal-signature-modal-card .portal-signature-actions .btn.light{
  background:var(--p-surface) !important;
  border:1px solid var(--p-line-strong) !important;
  color:var(--p-text) !important;
}

/* ── Vertrag & Rechnungen ── */
#appShell .portal-billing-list{ display:flex; flex-direction:column; gap:0 }
#appShell .portal-billing-doc-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 !important;
  padding:14px 4px !important;
  border:0 !important;
  border-top:1px solid var(--p-line) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#appShell .portal-billing-list > .portal-billing-doc-row:first-child,
#appShell .portal-billing-month-list > .portal-billing-doc-row:first-child{ border-top:0 !important }
#appShell .portal-billing-doc-row.is-open{ background:var(--p-surface-2) !important; border-radius:var(--p-radius-sm) !important; padding-left:10px !important; padding-right:10px !important }
#appShell .portal-billing-doc-number{
  font-family:var(--p-font-num) !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--p-text) !important;
  letter-spacing:0 !important;
}
#appShell .portal-billing-doc-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
#appShell .portal-billing-doc-meta{
  display:flex;
  flex-wrap:wrap;
  gap:2px 14px;
  margin-top:4px;
  font-size:13px !important;
  color:var(--p-muted) !important;
}
#appShell .portal-billing-status{
  border-radius:6px !important;
  padding:2px 8px !important;
  font-size:12px !important;
  font-weight:600 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
#appShell .portal-billing-status.is-paid{ background:rgba(22,163,74,.10) !important; color:#15803d !important; border:0 !important }
#appShell .portal-billing-status.is-open{ background:rgba(217,119,6,.10) !important; color:#b45309 !important; border:0 !important }
#appShell .portal-billing-month-group + .portal-billing-month-group{ margin-top:14px }
#appShell .portal-billing-month-title{
  margin:0 0 4px !important;
  font-family:var(--p-font) !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--p-muted) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
#appShell .portal-billing-actions{ display:flex; gap:8px; flex:0 0 auto; flex-wrap:nowrap }
#appShell .portal-billing-actions .portal-billing-btn{
  width:auto !important;
  min-height:36px !important;
  height:36px;
  padding:0 14px !important;
  border-radius:var(--p-radius-sm) !important;
  font-size:13px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
#appShell .portal-billing-actions .btn.secondary{
  background:var(--p-surface) !important;
  border:1px solid var(--p-line-strong) !important;
  color:var(--p-text) !important;
}
#appShell .portal-billing-actions .portal-billing-sign-btn{
  background:var(--p-primary) !important;
  border:1px solid var(--p-primary) !important;
  color:#fff !important;
}
/* inline viewer under the clicked document */
#appShell .portal-billing-viewer.is-inline{
  margin:4px 0 12px !important;
  padding:14px !important;
  border:1px solid var(--p-line) !important;
  border-radius:var(--p-radius) !important;
  background:var(--p-surface) !important;
}
#appShell .portal-billing-signature-canvas{
  border:1px solid var(--p-line-strong) !important;
  border-radius:var(--p-radius-sm) !important;
  background:#fff !important;
}
#appShell .portal-billing-signature-actions{ display:flex; gap:8px; justify-content:flex-end }
#appShell .portal-billing-signature-actions .btn{ width:auto !important; min-height:40px; padding:0 16px !important; border-radius:var(--p-radius-sm) !important; font-size:13px !important; font-weight:600 !important }
@media (max-width:899px){
  #appShell .portal-billing-doc-row{ flex-direction:column; align-items:stretch; gap:10px }
  #appShell .portal-billing-actions{ flex-wrap:wrap }
  #appShell .portal-billing-actions .portal-billing-btn{ flex:1 1 0 }
  #appShell [data-portal-view="billing"] .portal-page-head .btn{ width:auto !important; align-self:flex-start }
}
/* inline viewer: the row above already shows number, status and Download */
html body #appShell .portal-billing-viewer.is-inline .portal-billing-viewer-head{ display:none !important }
#appShell .portal-billing-viewer.is-inline #billingPdfFrame{ margin-top:0 !important }

/* ── Completed donations: "+" amounts in green (money in) ── */
#appShell .portal-transaction-amount.is-positive,
#appShell .portal-certificate-transaction-result-amount.is-positive{ color:#15803d !important }
body.theme-dark #appShell .portal-transaction-amount.is-positive,
body.theme-dark #appShell .portal-certificate-transaction-result-amount.is-positive{ color:#4ade80 !important }

/* ── Failed / cancelled transactions: status as plain text on the left (no badge) ── */
#appShell .portal-transaction-status-text{
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  color:#b91c1c;
}
body.theme-dark #appShell .portal-transaction-status-text{ color:#f87171 }

/* ── Transactions: rows aligned with the day title (no extra side padding inside the day card) ── */
#appShell :is(.portal-transaction-day,.portal-dash-tx-list) .portal-transaction-item{ padding:12px 0 !important }
@media (max-width:899px){
  #appShell .portal-transaction-day{ padding:14px !important }
}

/* ── Transaktionen → Export: step 1 asks "Alle / Nur erfolgreiche", step 2 the format ── */
@keyframes txExportCardIn{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
#transactionsExportModal:not(.hidden) .portal-modal-card{ animation:txExportCardIn .26s cubic-bezier(.2,.8,.2,1) }
/* mobile: unfolds in the page right under the Export button */
@keyframes txExportUnfold{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
#transactionsExportModal.tx-export-inline{ margin-top:12px !important }
#transactionsExportModal.tx-export-inline .portal-modal-card{
  padding:16px !important;
  border:1px solid var(--p-line) !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
#transactionsExportModal.tx-export-inline:not(.hidden) .portal-modal-card{
  animation:txExportUnfold .22s cubic-bezier(.2,.8,.2,1) !important;
}
@media (prefers-reduced-motion:reduce){
  #transactionsExportModal .portal-modal-card{ animation:none !important }
}
#transactionsExportModal .tx-export-step{ display:grid; gap:10px }
#transactionsExportModal .tx-export-step.hidden,
#transactionsExportModal .portal-modal-actions.hidden{ display:none !important }
#transactionsExportModal .tx-export-question{ font-size:14px; color:var(--p-muted); margin-bottom:2px }
#transactionsExportModal .tx-export-choice{
  display:grid;
  gap:2px;
  width:100%;
  padding:14px 16px;
  text-align:left;
  border:1px solid var(--p-line);
  border-radius:12px;
  background:var(--p-surface);
  color:var(--p-text);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease, background .15s ease;
}
#transactionsExportModal .tx-export-choice:hover,
#transactionsExportModal .tx-export-choice:focus-visible{
  border-color:var(--p-accent);
  background:color-mix(in srgb,var(--p-accent) 6%,var(--p-surface));
  outline:none;
}
#transactionsExportModal .tx-export-choice:active{ background:color-mix(in srgb,var(--p-text) 5%,var(--p-surface)) }
#transactionsExportModal .tx-export-choice-title{ font-size:15px; font-weight:600 }
#transactionsExportModal .tx-export-choice-sub{ font-size:12.5px; color:var(--p-muted) }
#transactionsExportModal .tx-export-back{
  display:inline-flex;
  align-items:center;
  gap:4px;
  width:max-content;
  padding:4px 6px 4px 0;
  border:0;
  background:none;
  color:var(--p-muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
#transactionsExportModal .tx-export-back:hover{ color:var(--p-text) }
#transactionsExportModal.tx-export-inline .portal-modal-title{ color:var(--p-text) !important; font-size:16px !important }
#transactionsExportModal.tx-export-inline .portal-modal-close-x{ color:var(--p-muted) !important; background:transparent !important; border:0 !important }
#transactionsExportModal .tx-export-choice.hidden{ display:none !important }
#transactionsExportModal .tx-export-step .msg{ margin-top:2px }

/* ── Projekte & Beiträge: opens inside the device card (like the PIN box), flat new look ── */
#appShell .device-card #deviceProjectsModal.portal-modal--inline .portal-modal-card{
  width:100% !important;
  max-width:none !important;
  max-height:none !important;
  padding:12px 0 0 !important;
  border:0 !important;
  border-top:1px solid var(--p-line) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#appShell .device-card #deviceProjectsModal .portal-modal-body{ padding:0 !important; overflow:visible !important; max-height:none !important }
#appShell .device-card #deviceProjectsModal #dpDeviceName{ display:none }
/* tabs: underline instead of navy pills */
#appShell #deviceProjectsModal .dp-tabs{
  display:flex !important;
  gap:4px !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  border-bottom:1px solid var(--p-line) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#appShell #deviceProjectsModal .dp-tabs .btn{
  flex:0 0 auto !important;
  width:auto !important;
  min-height:0 !important;
  height:auto !important;
  padding:8px 12px !important;
  margin:0 0 -1px !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:var(--p-muted) !important;
  font-size:14px !important;
  font-weight:600 !important;
}
#appShell #deviceProjectsModal .dp-tabs .btn.tab-active{
  color:var(--p-text) !important;
  border-bottom-color:var(--p-accent) !important;
}
/* panel head: label + "+ Neu" */
#appShell #deviceProjectsModal .dp-panel{ margin-top:10px !important }
#appShell #deviceProjectsModal .dp-panel-head{ margin-bottom:4px }
#appShell #deviceProjectsModal .dp-panel-head .portal-modal-hint{ font-size:12px; color:var(--p-muted) !important }
#appShell #deviceProjectsModal .dp-add-btn{
  min-height:32px !important;
  height:32px !important;
  padding:0 12px !important;
  border:1px solid var(--p-line-strong) !important;
  border-radius:var(--p-radius-sm) !important;
  background:var(--p-surface) !important;
  background-image:none !important;
  box-shadow:none !important;
  color:var(--p-text) !important;
  font-size:13px !important;
  font-weight:600 !important;
}
/* each project / contribution: flat block separated by a line */
#appShell #deviceProjectsModal .dp-stack{ display:grid; gap:0 !important }
#appShell #deviceProjectsModal .dp-item{
  margin:0 !important;
  padding:12px 0 !important;
  border:0 !important;
  border-top:1px solid var(--p-line) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#appShell #deviceProjectsModal .dp-item:first-child{ border-top:0 !important; padding-top:4px !important }
#appShell #deviceProjectsModal .dp-item .row{ gap:10px !important; margin:0 0 8px !important }
#appShell #deviceProjectsModal .dp-item .lbl{
  display:block;
  margin:0 0 4px;
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--p-muted) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
#appShell #deviceProjectsModal :is(input.input,textarea.input){
  width:100%;
  min-height:40px;
  padding:8px 12px !important;
  border:1px solid var(--p-line-strong) !important;
  border-radius:var(--p-radius-sm) !important;
  background:var(--p-surface) !important;
  color:var(--p-text) !important;
  box-shadow:none !important;
  font-size:15px;
}
#appShell #deviceProjectsModal textarea.input{ min-height:80px; resize:vertical }
#appShell #deviceProjectsModal .dp-item-head{ align-items:flex-end !important; flex-wrap:nowrap !important }
#appShell #deviceProjectsModal .dp-item-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; padding-bottom:6px }
#appShell #deviceProjectsModal .dp-del{
  min-height:0 !important;
  height:auto !important;
  padding:4px 2px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#b42318 !important;
  font-size:13px !important;
  font-weight:600 !important;
}
#appShell #deviceProjectsModal .dp-del:disabled{ color:var(--p-muted) !important; opacity:.5 }
/* switch in the theme accent */
#appShell #deviceProjectsModal .dp-switch{ box-shadow:none !important }
#appShell #deviceProjectsModal .dp-switch.is-on{ background:var(--p-accent) !important; border-color:var(--p-accent) !important }
/* actions like the PIN box */
#appShell .device-card #deviceProjectsModal .portal-modal-actions{
  display:flex;
  flex-direction:row !important;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  margin-top:4px;
  padding:12px 0 0 !important;
  border:0 !important;
  border-top:1px solid var(--p-line) !important;
  background:transparent !important;
}
#appShell .device-card #deviceProjectsModal .portal-modal-actions .btn{
  width:auto !important;
  min-height:40px;
  height:40px;
  margin:0 !important;
  padding:0 16px !important;
  border-radius:var(--p-radius-sm) !important;
  font-size:13px !important;
  font-weight:600 !important;
  box-shadow:none !important;
  background-image:none !important;
}
#appShell .device-card #deviceProjectsModal #dpSave{ background:var(--p-primary) !important; border:1px solid var(--p-primary) !important; color:#fff !important }
#appShell .device-card #deviceProjectsModal #dpClose{ background:var(--p-surface) !important; border:1px solid var(--p-line-strong) !important; color:var(--p-text) !important }
#appShell #deviceProjectsModal .dp-item-main{ min-width:0 !important }
#appShell #deviceProjectsModal .dp-switch:not(.is-on){ background:var(--p-line-strong) !important; border-color:var(--p-line-strong) !important }
#appShell #deviceProjectsModal .dp-del{ white-space:nowrap }
@media (max-width:640px){
  #appShell #deviceProjectsModal .dp-item-head{ flex-wrap:wrap !important }
  #appShell #deviceProjectsModal .dp-item-main{ flex:1 1 100% !important }
  #appShell #deviceProjectsModal .dp-item-actions{ width:100%; justify-content:space-between; padding-bottom:0 }
}

/* Login tools stay interactive but look like a plain icon and flag. */
#loginScreen .auth-card-tools .auth-theme-btn,
#loginScreen .auth-card-tools .lang-btn{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#loginScreen .auth-card-tools .auth-theme-btn:hover,
#loginScreen .auth-card-tools .lang-btn:hover,
#loginScreen .auth-card-tools .lang-btn.active{
  background:transparent !important;
  border-color:transparent !important;
}
#loginScreen .auth-card-tools .lang-btn img{
  width:22px;
  height:15px;
  border-radius:2px;
}
#loginScreen .auth-card-tools .auth-theme-btn:focus-visible,
#loginScreen .auth-card-tools .lang-btn:focus-visible{
  outline:2px solid var(--p-accent);
  outline-offset:3px;
}
#loginScreen .auth-card-tools .auth-theme-btn{ overflow:visible !important }
#loginScreen .auth-card-tools .auth-theme-icon{
  width:22px;
  height:22px;
  min-width:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
#loginScreen .auth-card-tools .auth-theme-icon img{
  box-sizing:border-box;
  width:22px;
  height:22px;
  padding:2px;
  object-fit:contain;
}

/* Transactions: date matches the Overview chip; daily context stays compact. */
#appShell .portal-transaction-day-head{ align-items:center }
#appShell .portal-transaction-day-title.portal-dash-date-chip{
  margin:0;
  font-size:12px;
  padding:5px 10px;
}
#appShell .portal-transaction-day-meta{
  font-size:12px;
  font-weight:600;
  color:var(--p-muted);
}
@media (max-width:640px){
  #appShell .portal-transaction-day-head{ align-items:flex-start }
  #appShell .portal-transaction-day-meta{ font-size:11px; line-height:1.45 }
}

/* Mobile pair-code copy action: icon only, so its label cannot be truncated. */
@media (max-width:640px){
  #appShell .paircode-copy{ gap:0 }
  #appShell .paircode-copy > span[data-i18n="copyLabel"]{ display:none }
}

/* Device project tabs are plain underlined tabs, without the generic button glow. */
#appShell #deviceProjectsModal .dp-tabs .btn{
  isolation:auto;
  overflow:visible;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transform:none !important;
}
#appShell #deviceProjectsModal .dp-tabs .btn::before{
  content:none !important;
  box-shadow:none !important;
}
#appShell #deviceProjectsModal .dp-tabs .btn .ui-hover-orb{ display:none !important }

/* Shared busy layer for generating PDFs, exports and e-mails. */
.portal-loading-overlay{
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  align-content:center;
  gap:16px;
  overflow:hidden;
  color:#f8fbff;
  background:
    radial-gradient(circle at 50% 42%, rgba(47,143,138,.30), transparent 25%),
    radial-gradient(circle at 20% 85%, rgba(32,94,166,.28), transparent 38%),
    linear-gradient(145deg, rgba(7,23,49,.96), rgba(10,42,77,.97));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  opacity:1;
  transition:opacity .22s ease, visibility .22s ease;
}
.portal-loading-overlay.hidden{
  display:grid !important;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.portal-loading-glow{
  position:absolute;
  width:min(76vw,460px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,202,190,.24), transparent 68%);
  filter:blur(12px);
  animation:portalLoadingGlow 2.6s ease-in-out infinite;
}
.portal-loading-spinner{
  position:relative;
  z-index:1;
  width:94px;
  height:94px;
}
.portal-loading-orbit{
  position:absolute;
  inset:0;
  width:94px;
  height:94px;
  border:2px solid rgba(255,255,255,.14);
  border-top-color:#75e1d4;
  border-right-color:#8ebcf4;
  border-radius:50%;
  animation:portalLoadingSpin 1.1s linear infinite;
}
.portal-loading-orbit::after,
.portal-loading-orbit span{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,255,255,.14);
  border-bottom-color:#75e1d4;
  border-radius:50%;
}
.portal-loading-orbit span{ animation:portalLoadingSpin 1.7s linear infinite reverse }
.portal-loading-mark{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:48px;
  height:48px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.20);
}
.portal-loading-mark img{ width:34px; height:34px; object-fit:contain }
.portal-loading-text{
  position:relative;
  z-index:1;
  max-width:min(82vw,360px);
  text-align:center;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  color:rgba(248,251,255,.88);
}
@keyframes portalLoadingSpin{ to{ transform:rotate(360deg) } }
@keyframes portalLoadingGlow{ 50%{ transform:scale(1.13); opacity:.72 } }
@media (prefers-reduced-motion:reduce){
  .portal-loading-glow,
  .portal-loading-orbit,
  .portal-loading-orbit span{ animation:none }
}


/* ── Einstellungen like the app: list of expandable cards ── */
#appShell .portal-settings-grid.portal-settings-acc-list{
  display:flex !important;
  flex-direction:column;
  gap:12px;
  max-width:760px;
}
#appShell .portal-settings-acc{
  border:1px solid var(--p-line);
  border-radius:var(--p-radius);
  background:var(--p-surface);
  overflow:hidden;
  transition:border-color .15s ease;
}
#appShell .portal-settings-acc.hidden{ display:none !important }
#appShell .portal-settings-acc.is-open{ border-color:#3a9c9c }
#appShell .portal-settings-acc > .portal-settings-card{
  display:flex !important;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:0 !important;
  padding:16px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
#appShell .portal-settings-acc > .portal-settings-card::before,
#appShell .portal-settings-acc > .portal-settings-card::after{ display:none !important }
#appShell .portal-settings-acc-icon{
  flex-shrink:0;
  width:42px; height:42px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#3a9c9c;
  background:var(--p-surface-2, rgba(13,52,107,.04));
  border:1px solid var(--p-line);
}
#appShell .portal-settings-acc-text{ flex:1 1 auto; min-width:0 }
#appShell .portal-settings-acc-text > div:first-child{ font-size:15.5px !important; font-weight:700 !important }
#appShell .portal-settings-acc-text > div + div{ font-size:12.5px !important; line-height:1.45; margin-top:2px !important }
#appShell .portal-settings-acc-chevron{
  flex-shrink:0;
  display:inline-flex;
  color:var(--p-muted);
  transition:transform .2s ease;
}
#appShell .portal-settings-acc.is-open .portal-settings-acc-chevron{ transform:rotate(180deg) }
#appShell .portal-settings-card--locked .portal-settings-acc-chevron{ opacity:.4 }

/* the opened section sits inside the card, under a divider */
#appShell .portal-settings-acc > .portal-settings-panel,
#appShell .portal-settings-acc > .portal-modal.portal-modal--inline{
  margin:0 !important;
  border:0 !important;
  border-top:1px solid var(--p-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:16px !important;
}
#appShell .portal-settings-acc > .portal-settings-panel::before{ display:none !important }
#appShell .portal-settings-acc > .portal-modal--inline .portal-modal-card{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
/* the card already shows title and hint */
#appShell .portal-settings-acc > .portal-settings-panel > .text-sm.font-semibold:first-child,
#appShell .portal-settings-acc > .portal-settings-panel > .text-sm.font-semibold:first-child + .text-xs,
#appShell .portal-settings-acc .portal-settings-inline-head > div:first-child,
#appShell .portal-settings-acc .portal-modal-title,
#appShell .portal-settings-acc .portal-modal-close-x{ display:none !important }
#appShell .portal-settings-acc .portal-settings-panel > .text-sm.font-semibold:first-child + .text-xs + *{ margin-top:0 !important }
#appShell .portal-settings-acc .portal-settings-inline-head{ justify-content:flex-start }

/* Login-Verlauf / Änderungsverlauf: each card is its own tab; entries as small cards like the app */
#appShell .portal-settings-acc .portal-activity-tabs{ display:none !important }
#appShell .portal-settings-acc #activityLogsList{ display:grid; gap:10px }
#appShell .portal-settings-acc #activityLogsList .portal-settings-list-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 !important;
  padding:12px 14px !important;
  border:1px solid var(--p-line) !important;
  border-radius:var(--p-radius-sm, 12px) !important;
  background:var(--p-surface-2) !important;
}
#appShell .portal-settings-acc #activityLogsList .portal-settings-list-title{ font-weight:700 }
#appShell .portal-settings-acc #activityLogsList .portal-settings-list-meta{
  flex-shrink:0;
  font-size:12px;
  color:var(--p-muted);
  text-align:right;
  white-space:nowrap;
}
@media (max-width:640px){
  #appShell .portal-settings-acc #activityLogsList .portal-settings-list-item{ flex-direction:column; gap:6px }
  #appShell .portal-settings-acc #activityLogsList .portal-settings-list-meta{ text-align:left }
}
/* Team-Überblick compact like the app: 2×2 numbers, no repeated top-user box */
#appShell .portal-settings-acc .portal-activity-summary-shell{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#appShell .portal-settings-acc .portal-activity-summary-top{ display:none !important }
#appShell .portal-settings-acc .portal-activity-kpis{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:8px !important;
}
#appShell .portal-settings-acc .portal-activity-kpi{
  padding:12px !important;
  border-radius:var(--p-radius-sm, 12px) !important;
  border:1px solid var(--p-line) !important;
  background:var(--p-surface-2) !important;
  box-shadow:none !important;
  min-height:0 !important;
}
#appShell .portal-settings-acc .portal-activity-kpi-label{ font-size:11.5px !important; letter-spacing:.02em !important; text-transform:none !important }
#appShell .portal-settings-acc .portal-activity-kpi-value{ font-size:18px !important; margin-top:4px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#appShell .portal-settings-acc .portal-activity-kpi-meta{ font-size:11.5px !important }
#appShell .portal-settings-acc .portal-activity-compare-card{
  margin-top:10px !important;
  padding:12px !important;
  border-radius:var(--p-radius-sm, 12px) !important;
  border:1px solid var(--p-line) !important;
  background:var(--p-surface-2) !important;
  box-shadow:none !important;
}
#appShell .portal-settings-acc .portal-activity-filters{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:12px !important }
#appShell .portal-settings-acc .portal-activity-filters > .portal-transaction-filter-search,
#appShell .portal-settings-acc .portal-activity-filters > .portal-transaction-filter-full{ grid-column:1/-1 }
body.theme-dark #appShell .portal-settings-acc input[type="time"]{ color-scheme:dark }
/* Ranking: position badge (gold / silver / bronze), name, counts and a thin bar */
#appShell .portal-activity-compare-hint{ font-size:12.5px; color:var(--p-muted); margin:2px 0 10px }
#appShell .portal-activity-compare-item{
  display:grid !important;
  grid-template-columns:28px minmax(0, 1fr);
  column-gap:12px;
  align-items:start;
}
#appShell .portal-activity-compare-item > :not(.portal-activity-rank-pos){ grid-column:2 }
#appShell .portal-activity-rank-pos{
  grid-row:1 / span 3;
  width:28px; height:28px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
  color:var(--p-text);
  background:var(--p-surface);
  border:1px solid var(--p-line-strong, var(--p-line));
}
#appShell .portal-activity-rank-pos.is-medal{ color:#fff; border-color:transparent }
#appShell .portal-activity-rank-pos.is-medal-1{ background:#d4a017 }
#appShell .portal-activity-rank-pos.is-medal-2{ background:#9aa5b1 }
#appShell .portal-activity-rank-pos.is-medal-3{ background:#c47a3a }
#appShell .portal-settings-acc .portal-activity-compare-list{ display:grid; gap:12px }
#appShell .portal-settings-acc .portal-activity-compare-item{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#appShell .portal-settings-acc .portal-activity-compare-bar{ height:6px !important; margin:6px 0 4px !important }
#appShell .portal-settings-acc .portal-activity-compare-bar span{ background:#3a9c9c !important }
#appShell .portal-settings-acc .portal-activity-compare-pill{ padding:2px 8px !important; font-size:11.5px !important }

/* ── Login-Verlauf / Änderungsverlauf: same layout as the app (ActivityLog.tsx) ── */
#appShell .es-act-metrics{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px }
#appShell .es-act-metric{ border:1px solid var(--p-line); border-radius:12px; padding:12px; background:var(--p-surface-2) }
#appShell .es-act-metric-label{ font-size:12px; font-weight:600; color:var(--p-muted) }
#appShell .es-act-metric-value{ font-family:var(--p-font-num); font-size:18px; font-weight:700; color:var(--p-text); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#appShell .es-act-rank{ margin-top:14px; border:1px solid var(--p-line); border-radius:12px; padding:14px; background:var(--p-surface-2) }
#appShell .es-act-rank-title{ font-size:15px; font-weight:700; color:var(--p-text) }
#appShell .es-act-rank-list{ display:grid; gap:12px; margin-top:12px }
#appShell .es-act-rank-item{ display:flex; gap:12px; align-items:flex-start }
#appShell .es-act-rank-pos{ flex-shrink:0; width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--p-text); background:var(--p-surface); border:1px solid var(--p-line-strong, var(--p-line)) }
#appShell .es-act-rank-pos.is-medal{ color:#fff; border-color:transparent }
#appShell .es-act-rank-main{ flex:1 1 auto; min-width:0 }
#appShell .es-act-rank-head{ display:flex; align-items:baseline; gap:8px }
#appShell .es-act-rank-head .es-act-title{ flex:1 1 auto }
#appShell .es-act-rank-value{ flex-shrink:0; font-size:13px; font-weight:700; color:#3a9c9c }
#appShell .es-act-rank-track{ height:6px; border-radius:3px; background:var(--p-line); margin:6px 0 4px; overflow:hidden }
#appShell .es-act-rank-track span{ display:block; height:100%; border-radius:3px; background:#3a9c9c }
#appShell .es-act-rank-meta{ display:flex; gap:12px; margin-top:2px; font-size:12.5px; font-weight:600 }
#appShell .es-act-title{ font-size:14px; font-weight:700; color:var(--p-text); min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
#appShell .es-act-sub{ font-size:12.5px; color:var(--p-muted); margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
#appShell .es-act-empty{ text-align:center; font-size:13.5px; color:var(--p-muted); margin-top:18px }
#appShell #activityLogsList{ display:grid; gap:10px }
#appShell .es-act-row{ display:flex; align-items:center; gap:12px; border:1px solid var(--p-line); border-radius:12px; padding:12px; background:var(--p-surface-2) }
#appShell .es-act-row-icon{ flex-shrink:0; width:32px; height:32px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:#3a9c9c; background:var(--p-surface); border:1px solid var(--p-line) }
#appShell .es-act-row-main{ flex:1 1 auto; min-width:0 }
#appShell .es-act-time{ flex-shrink:0; font-size:12px; font-weight:500; color:var(--p-muted); text-align:right }
#appShell .es-act-change{ border:1px solid var(--p-line); border-radius:12px; padding:12px; background:var(--p-surface-2) }
#appShell .es-act-change-head{ display:flex; align-items:center; gap:8px }
#appShell .es-act-change-head .es-act-title{ flex:1 1 auto }
#appShell .es-act-badge{ flex-shrink:0; border-radius:999px; padding:3px 9px; font-size:11px; font-weight:700; color:#3a9c9c; background:var(--p-surface); border:1px solid #3a9c9c }
#appShell .es-act-details{ display:grid; gap:6px; margin-top:8px }
#appShell .es-act-chip-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px }
#appShell .es-act-detail{ font-size:12.5px; color:var(--p-text) }
#appShell .es-act-status{ display:inline-flex; align-items:center; gap:5px; border:1px solid; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:600 }
#appShell .es-act-dot{ width:7px; height:7px; border-radius:999px }
/* filters like the app: search with a magnifier, period; no time fields or labels */
#appShell .portal-settings-acc .portal-activity-filters > div:not(.portal-transaction-filter-search):not(.portal-transaction-filter-full){ display:none !important }
#appShell .portal-settings-acc .portal-transaction-filter-search > label{ display:none !important }
#appShell .portal-settings-acc #activityLogsSearch{
  padding-left:42px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:14px center !important;
}

/* Dark theme: these inputs already use color-scheme:dark, which draws a light clock/calendar icon.
   The older invert() filter turned it dark again, so drop it. */
body.theme-dark #appShell input[type="time"],
body.theme-dark #appShell input[type="date"]{ color-scheme:dark }
body.theme-dark #appShell input[type="time"]::-webkit-calendar-picker-indicator,
body.theme-dark #appShell input[type="date"]::-webkit-calendar-picker-indicator{ filter:none !important; opacity:.85 }

/* Verlauf / Ranking on phones: grid children may shrink below their content, long names and
   e-mails are cut with "…" instead of pushing the card wider than the screen. */
#appShell .portal-settings-acc,
#appShell .portal-settings-acc > .portal-settings-panel,
#appShell #activityLogsSummary,
#appShell #activityLogsList{ min-width:0; max-width:100% }
#appShell .es-act-rank-list,
#appShell #activityLogsList,
#appShell .es-act-metrics{ grid-template-columns:minmax(0, 1fr) }
#appShell .es-act-metrics{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
#appShell .es-act-rank-list > *,
#appShell #activityLogsList > *,
#appShell .es-act-metrics > *,
#appShell .es-act-rank-main,
#appShell .es-act-row-main{ min-width:0; max-width:100% }
#appShell .es-act-rank-head{ min-width:0 }
#appShell .es-act-rank-head .es-act-title{ min-width:0; flex:1 1 0 }
#appShell .es-act-sub,
#appShell .es-act-title{ display:block; max-width:100% }
#appShell .es-act-change-head .es-act-title{ flex:1 1 0; min-width:0 }
#appShell .es-act-chip-row,
#appShell .es-act-detail{ min-width:0; overflow-wrap:anywhere }
#appShell .es-act-rank,
#appShell .es-act-change,
#appShell .es-act-row{ overflow:hidden }

/* ── Vertrag / Rechnung: full-screen document viewer (same design as the app's PdfViewer) ── */
body.es-doc-open{ overflow:hidden }
.es-doc-viewer{
  position:fixed !important; inset:0; z-index:9000;
  display:flex !important; flex-direction:column;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:var(--p-bg, #f4f4f3) !important;
  font-family:var(--p-font, Inter, system-ui, sans-serif);
  animation:es-doc-in .22s ease-out;
}
.es-doc-viewer.hidden{ display:none !important }
@keyframes es-doc-in{ from{ transform:translateY(24px); opacity:0 } to{ transform:none; opacity:1 } }
.es-doc-head{
  display:flex; align-items:center; gap:12px; padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--p-surface, #fff); border-bottom:1px solid var(--p-line, #e5e7eb);
}
.es-doc-round{
  flex-shrink:0; width:40px; height:40px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--p-line, #e5e7eb); background:transparent; color:var(--p-text, #0f172a); cursor:pointer;
}
.es-doc-round:hover{ background:var(--p-surface-2, #f4f4f3) }
.es-doc-titles{ flex:1 1 auto; min-width:0 }
.es-doc-title{ font-size:16px; font-weight:700; color:var(--p-text, #0f172a); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.es-doc-subrow{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:3px }
.es-doc-sub{ font-size:12.5px; color:var(--p-muted, #64748b) }
.es-doc-badge{ display:inline-flex; align-items:center; gap:5px; border:1px solid; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:600 }
.es-doc-badge.hidden{ display:none }
.es-doc-badge.is-good{ color:#2e9e6b; border-color:#2e9e6b }
.es-doc-badge.is-open{ color:#d97706; border-color:#d97706 }
.es-doc-dot{ width:6px; height:6px; border-radius:999px; background:currentColor }
.es-doc-stage{ position:relative; flex:1 1 auto; min-height:0; background:#e9edf2 }
body.theme-dark .es-doc-stage{ background:#0b1220 }
.es-doc-pages{
  position:absolute !important; inset:0; overflow:auto !important; -webkit-overflow-scrolling:touch;
  display:flex !important; flex-direction:column; align-items:center; gap:14px;
  padding:16px 12px 90px !important; margin:0 !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; max-height:none !important; height:auto !important;
}
.es-doc-pages canvas.portal-billing-pdf-page{
  display:block; max-width:min(900px, 100%); height:auto !important; background:#fff; border-radius:6px;
  box-shadow:0 1px 2px rgba(15,23,42,.10), 0 12px 32px rgba(15,23,42,.14);
}
body.theme-dark .es-doc-pages canvas.portal-billing-pdf-page{ box-shadow:0 12px 32px rgba(0,0,0,.45) }
.es-doc-pages .portal-billing-pdf-loading,
.es-doc-pages .portal-billing-pdf-fallback{ margin-top:40px; color:var(--p-muted, #64748b); text-align:center }
.es-doc-pill{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); pointer-events:none;
  padding:7px 14px; border-radius:999px; background:rgba(15,23,42,.78); color:#fff; font-size:12.5px; font-weight:600;
}
.es-doc-pill.hidden{ display:none }
.es-doc-sign{
  position:absolute !important; left:12px; right:12px; bottom:12px; z-index:2; max-width:640px; margin:0 auto !important;
  max-height:calc(100% - 24px); overflow:auto; padding:16px !important; border-radius:18px !important;
  background:var(--p-surface, #fff) !important; border:1px solid var(--p-line, #e5e7eb) !important;
  box-shadow:0 -10px 40px rgba(15,23,42,.22) !important;
}
.es-doc-sign.hidden{ display:none !important }
.es-doc-sign .portal-billing-signature-canvas{ width:100%; height:auto; aspect-ratio:960/300; background:#fff; border:1px dashed var(--p-line-strong, #cbd5e1); border-radius:12px; touch-action:none }
.es-doc-sign .portal-billing-signature-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.es-doc-sign .portal-billing-signature-actions .btn{ flex:1 1 auto }
.es-doc-bar{
  padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--p-surface, #fff); border-top:1px solid var(--p-line, #e5e7eb);
  display:grid; gap:10px; max-width:100%;
}
.es-doc-bar-row{ display:grid; grid-template-columns:1.2fr 1fr; gap:10px }
@media (min-width: 900px){ .es-doc-bar{ grid-template-columns:minmax(0,1fr); justify-items:stretch } .es-doc-bar > *{ width:min(640px, 100%); justify-self:center } }
.es-doc-btn{
  height:46px; border-radius:12px; border:1px solid var(--p-line-strong, #cbd5e1); background:transparent; color:var(--p-text, #0f172a);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14.5px; font-weight:700; cursor:pointer;
}
.es-doc-btn:hover{ background:var(--p-surface-2, #f4f4f3) }
.es-doc-btn:disabled{ opacity:.55; cursor:default }
.es-doc-btn svg{ width:18px; height:18px; flex-shrink:0 }
.es-doc-btn.is-primary{ height:50px; border-color:transparent; background:#2f8f8a; color:#fff }
.es-doc-btn.is-primary:hover{ background:#277a76 }
.es-doc-btn.hidden{ display:none }
.es-doc-msg{ font-size:12.5px; color:#dc2626 }
.es-doc-msg:empty{ display:none }
.es-doc-round:focus{ outline:none }
.es-doc-round:focus-visible,
.es-doc-btn:focus-visible{ outline:2px solid #2f8f8a; outline-offset:2px }

/* ── Mobile parity with the EasySadaqa app (2026-10-16) ── */
/* Selects: the field rule above sets `background` with !important, which also removed the
   chevron; put it back (the padding-right for it was already reserved). */
#appShell .portal-main select:not(.portal-native-select):not([multiple]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 16px center !important;
  background-size:12px 8px !important;
  padding-right:40px !important;
}
body.theme-dark #appShell .portal-main select:not(.portal-native-select):not([multiple]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23cbd5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
@media (max-width: 640px){
  /* Projekte: share stays on the right of the name, like the app. */
  #appShell .project-stat-head{ grid-template-columns:auto minmax(0, 1fr) auto }
  #appShell .project-stat-share{ grid-column:auto; justify-self:end; padding-left:0 }
  /* Meine Geräte: "Projekte verwalten" full width, PIN and Entkoppeln side by side. */
  #appShell .device-card-actions{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px !important; width:100% }
  #appShell .device-card-actions > button{ width:100%; min-height:38px; display:inline-flex; align-items:center; justify-content:center; text-align:center; margin:0 !important }
  #appShell .device-card-actions .btn-projects{ grid-column:1 / -1; background:rgba(43,136,130,.10) !important; border:1px solid rgba(43,136,130,.38) !important; color:#1f736e !important }
  #appShell .device-card-actions .btn-security{ background:var(--p-surface) !important; color:#1d4ea8 !important }
  #appShell .device-card-actions .btn-unpair{ background:var(--p-surface) !important; border:1px solid rgba(225,29,72,.32) !important; color:#be123c !important }
  body.theme-dark #appShell .device-card-actions .btn-projects{ background:rgba(43,136,130,.18) !important; color:#9ddeda !important }
  body.theme-dark #appShell .device-card-actions .btn-security{ color:#a9c4ff !important }
  body.theme-dark #appShell .device-card-actions .btn-unpair{ color:#fb7185 !important }
}

/* ── Splash like the app: navy, the logo draws itself, teal loading line + tagline at the bottom ── */
.es-splash{ position:fixed !important; inset:0; z-index:9500 !important; background:#071320 !important; padding:24px; flex-direction:column; transition:opacity .45s ease, visibility .45s ease !important }
.es-splash.is-hidden{ opacity:0; visibility:hidden }
.es-splash.is-hidden .es-splash-logo{ transform:translateY(-20px) scale(.94) }
.es-splash-logo{ display:block; width:236px; aspect-ratio:4096/3640; transform:translateY(-20px); transition:transform .45s ease-in; user-select:none }
.es-splash-logo svg{ display:block; width:100%; height:100% }
.es-splash-foot{ position:absolute; left:24px; right:24px; bottom:calc(44px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:18px; opacity:0; animation:es-splash-foot .42s ease 1.5s forwards }
.es-splash-track{ width:112px; height:2px; border-radius:1px; background:rgba(255,255,255,.10); overflow:hidden }
.es-splash-track span{ display:block; width:34px; height:2px; border-radius:1px; background:#42B4B3; animation:es-splash-sweep 1.15s cubic-bezier(.65,0,.35,1) infinite }
.es-splash-tagline{ color:#8eb4c6; font:500 12.5px/1.4 Inter, system-ui, sans-serif; letter-spacing:.4px; text-align:center }
.es-splash-tagline strong{ color:#c4dee9; font-weight:600 }
@keyframes es-splash-sweep{ from{ transform:translateX(-34px) } to{ transform:translateX(112px) } }
@keyframes es-splash-foot{ to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .es-splash-foot{ animation:none; opacity:1 } .es-splash-track span{ animation:none } }

/* ── Header: the splash logo (mark draws itself) + the logo's own wordmark ── */
/* Sizes match the old PNG logo and text (measured on the visible ink, the PNG had padding).
   The wordmark box has room above the "d" and below "y"/"q" (viewBox 890 high), so no letter is cut. */
#appShell .topbar-brand .es-hdr-mark{ display:block; flex-shrink:0; height:40px; aspect-ratio:1732/1413; margin:0 6px 0 4px }
#appShell .topbar-brand .es-hdr-word{ display:block; height:19.5px; aspect-ratio:3945/890; margin:1px 0 0 }
#appShell .topbar-brand .es-hdr-mark svg,
#appShell .topbar-brand .es-hdr-word svg{ display:block; width:100%; height:100% }
@media (max-width: 640px){
  #appShell .topbar-brand .es-hdr-mark{ height:24px; margin:0 6px 0 5px }
  #appShell .topbar-brand .es-hdr-word{ height:21.7px; margin:0 }
}

/* ── Einstellungen: Support / Rechtliche Informationen link rows ── */
#appShell .es-link-list{ display:grid; gap:8px }
#appShell .es-link-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--p-line, #e5e7eb); border-radius:var(--p-radius-sm, 8px); background:var(--p-surface-2, #f8fafc); color:var(--p-text, #0f172a); text-decoration:none; transition:background .15s ease, border-color .15s ease }
#appShell .es-link-row:hover{ border-color:var(--p-accent, #2f8f8a); background:var(--p-surface, #fff) }
#appShell .es-link-icon{ flex-shrink:0; width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(43,136,130,.12); color:var(--p-accent, #2f8f8a) }
#appShell .es-link-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px }
#appShell .es-link-title{ font-size:14px; font-weight:600; color:var(--p-text, #0f172a) }
#appShell .es-link-sub{ font-size:12.5px; color:var(--p-muted, #64748b); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#appShell .es-link-ext{ flex-shrink:0; color:var(--p-muted, #64748b) }

/* ── Transaktionen filters like the app: on the page (no card), device | project | status in one row,
      period + time window (von – bis in one field) below. Scoped to .es-tx-* so the Verlauf filters keep their look. ── */
#appShell .portal-transactions-layout.es-tx-layout{ grid-template-columns:minmax(0, 1fr); gap:18px }
#appShell .es-tx-filters{ min-width:0 }
#appShell .es-tx-grid{ display:flex !important; flex-direction:column; gap:12px }
#appShell .es-tx-row3{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(0, .8fr); gap:10px }
#appShell .es-tx-row2{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px }
#appShell .es-tx-grid label{ margin:0 0 6px !important; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--p-muted, #64748b) !important }
#appShell .portal-main .es-tx-row3 select:not(.portal-native-select):not([multiple]){ min-height:44px !important; font-size:14px !important; padding-left:12px !important; padding-right:32px !important; background-position:right 12px center !important; text-overflow:ellipsis; white-space:nowrap; overflow:hidden }
#appShell .es-tx-row2 .portal-date-range-trigger{ width:100%; min-height:44px; font-size:14px }
#appShell .es-tx-time-pair{ display:flex; align-items:center; gap:4px; min-height:44px; padding:0 10px; border:1px solid var(--p-line-strong, #cbd5e1); border-radius:var(--p-radius-sm, 8px); background:var(--p-surface, #fff); color:var(--p-text, #0f172a) }
#appShell .es-tx-time-pair:focus-within{ border-color:var(--p-accent, #2f8f8a) }
#appShell .es-tx-time-icon{ flex-shrink:0; color:var(--p-muted, #64748b) }
#appShell .portal-main .es-tx-time-pair input[type="time"]:not(.x1):not(.x2):not(.x3):not(.x4):not(.x5):not(.x6){ flex:1 1 0; min-width:0; width:auto !important; min-height:0 !important; height:40px !important; padding:0 2px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; font-size:14px !important; text-align:center }
#appShell .es-tx-time-pair input[type="time"]::-webkit-calendar-picker-indicator{ display:none }
#appShell .es-tx-time-sep{ color:var(--p-muted, #64748b); font-weight:600 }
@media (max-width: 640px){
  #appShell .portal-main .es-tx-row3 select:not(.portal-native-select):not([multiple]){ font-size:13px !important; padding-left:10px !important; padding-right:26px !important; background-position:right 9px center !important }
}
@media (max-width: 380px){
  #appShell .es-tx-row3{ gap:8px }
  #appShell .portal-main .es-tx-row3 select:not(.portal-native-select):not([multiple]){ font-size:12.5px !important; padding-left:9px !important; padding-right:22px !important; background-position:right 8px center !important; background-size:10px 7px !important }
}

/* ── Transaktionen rows like the app: time left, transaction number right, amount below ── */
#appShell .es-tx-item .portal-transaction-badges:empty{ display:none }
#appShell .es-tx-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0 }
#appShell .es-tx-top .portal-transaction-time{ margin-top:0; flex-shrink:0 }
#appShell .es-tx-number{ min-width:0; font-size:12px; color:var(--p-muted, #607084); font-variant-numeric:tabular-nums; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right }
#appShell .es-tx-amount{ display:block; margin-top:6px }
#appShell .es-tx-amount-row .es-tx-amount{ margin-top:0 }
#appShell .portal-transaction-item.is-failed .es-tx-number{ opacity:.6 }

/* ── Transaktionen summary on phones: Transaktionen | Gesamtbetrag side by side, last one full width ── */
@media (max-width: 1024px){
  #appShell .portal-transactions-summary{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px }
  #appShell .portal-transactions-summary > :nth-child(3){ grid-column:1 / -1 }
  #appShell .portal-transactions-summary .portal-transaction-summary-value{ font-size:clamp(20px, 6vw, 28px); overflow-wrap:anywhere }
}

/* Dashboard › Terminal-Status: rename a tablet right in the list (as in the app) */
#appShell .tablet-rename-btn{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-left:2px; border:0; border-radius:var(--p-radius-sm); background:transparent; color:var(--p-muted); cursor:pointer; flex-shrink:0 }
#appShell .tablet-rename-btn:hover{ background:var(--p-surface-2); color:var(--p-text) }
#appShell .tablet-rename-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; margin-top:10px }
#appShell .tablet-rename-row .device-title-input{ flex:1 1 100% }
#appShell .tablet-rename-row .btn-save-device, #appShell .tablet-rename-row .btn-cancel-device{ flex:1 1 0 }
#appShell .tablet-status-item .tablet-status-head-main{ min-width:0; flex:1 }

/* Einstellungen › Geräte: list first, then "Neues Gerät verbinden" as a plain section */
#appShell .portal-pair-card.portal-pair-card--settings{ padding:18px 0 0 !important; border:0 !important; border-top:1px solid var(--p-line) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important }
#appShell .portal-pair-card.portal-pair-card--settings::before{ display:none !important }
#appShell #devicesSettingsPanel .device-card{ background:var(--p-surface-2) !important }

/* Konten: role picker (Admin / Designer / Sammler / Individuell) and the sections an account may open */
#appShell .portal-role-section, .portal-modal .portal-role-section{ margin-top:16px }
.portal-role-picker{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px }
@media (max-width:520px){ .portal-role-picker{ grid-template-columns:repeat(2,1fr) } }
.portal-role-option{ min-height:44px; padding:8px 10px; border-radius:var(--p-radius-sm,10px); border:1px solid var(--p-line-strong,#d6d4d1); background:var(--p-surface,#fff); color:var(--p-text,#111); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s,border-color .15s,color .15s }
.portal-role-option.is-on{ border-color:var(--p-accent,#2f8f8a); background:color-mix(in srgb, var(--p-accent,#2f8f8a) 10%, var(--p-surface,#fff)); color:var(--p-accent,#2f8f8a) }
.portal-role-hint{ margin:8px 0 0; font-size:12.5px; line-height:18px; color:var(--p-muted,#6f6d69) }
.portal-account-perms{ margin-top:14px }
.portal-account-perms.hidden{ display:none }
.portal-perm-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }
.portal-perm-chip{ display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 13px 0 9px; border-radius:999px; border:1px solid var(--p-line-strong,#d6d4d1); background:var(--p-surface,#fff); color:var(--p-text,#111); font-size:13px; font-weight:600; cursor:pointer }
.portal-perm-chip:disabled{ opacity:.6; cursor:default }
.portal-perm-check{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--p-line-strong,#d6d4d1); color:transparent }
.portal-perm-chip.is-on{ border-color:var(--p-accent,#2f8f8a); background:color-mix(in srgb, var(--p-accent,#2f8f8a) 10%, var(--p-surface,#fff)); color:var(--p-accent,#2f8f8a) }
.portal-perm-chip.is-on .portal-perm-check{ background:var(--p-accent,#2f8f8a); border-color:var(--p-accent,#2f8f8a); color:#fff }
/* "Einladung senden" lost its gradient to the modal button reset above (white text on nothing) */
#accountModal .portal-account-modal-save{ background:var(--p-primary) !important; color:#fff !important }
#accountModal .portal-account-modal-save:hover{ background:var(--p-primary-hover, var(--p-primary)) !important }
/* Role and sections need the room: the body scrolls, the button stays below it */
#accountModal .portal-modal-card{ max-height:92vh }
#accountModal .portal-modal-body{ max-height:none; flex:1 1 auto; min-height:0 }

/* Projekte (dashboard): total, one bar split by share, then a plain ledger. Mirrors the app. */
#projectStatsList.proj-ledger{ display:block }
.proj-total{ font-size:24px; font-weight:700; letter-spacing:-.3px; font-variant-numeric:tabular-nums; color:var(--p-text, #0b1220) }
.proj-stack{ display:flex; gap:2px; height:8px; margin-top:12px; border-radius:4px; overflow:hidden; background:rgba(13,52,107,.08) }
.proj-seg{ display:block; min-width:0 }
.proj-list{ margin-top:8px }
.proj-row{ display:flex; align-items:flex-start; gap:12px; padding:12px 0 }
.proj-row + .proj-row{ border-top:1px solid #e7e6e4 }
.proj-key{ flex:none; width:8px; height:8px; margin-top:7px; border-radius:2px }
.proj-main{ flex:1 1 auto; min-width:0 }
.proj-name{ font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--p-text, #0b1220) }
.proj-figs{ flex:none; text-align:right }
.proj-amount{ font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--p-text, #0b1220) }
.proj-meta{ margin-top:2px; font-size:12.5px; color:#6f6d69 }
.proj-c0{ background:#0d346b } .proj-c1{ background:#2b8882 } .proj-c2{ background:#5a7fb5 }
.proj-c3{ background:#7cc0ba } .proj-c4{ background:#a8b8d2 } .proj-c5{ background:#c9dcd9 }
body.theme-dark .proj-stack{ background:rgba(255,255,255,.08) }
body.theme-dark .proj-row + .proj-row{ border-top-color:#1f2b40 }
body.theme-dark .proj-total, body.theme-dark .proj-name, body.theme-dark .proj-amount{ color:#eef2f7 }
body.theme-dark .proj-meta{ color:#94a3b8 }
body.theme-dark .proj-c0{ background:#8fb2ea } body.theme-dark .proj-c1{ background:#4fb8b0 } body.theme-dark .proj-c2{ background:#5d7fb8 }
body.theme-dark .proj-c3{ background:#2f7f79 } body.theme-dark .proj-c4{ background:#56657f } body.theme-dark .proj-c5{ background:#3b5a59 }

/* Dashboard › Terminal-Status: offline / not-charging tablets always, the rest behind the toggle. */
#appShell .tablet-status-allok{ display:flex; align-items:center; gap:10px; padding:2px 4px; font-size:13px; font-weight:500; color:var(--p-muted) }
#appShell .tablet-status-toggle{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:40px; margin-top:4px; border:1px solid var(--p-line); border-radius:var(--p-radius-sm); background:transparent; color:var(--p-text); font-size:12.5px; font-weight:700; cursor:pointer; transition:background .16s }
#appShell .tablet-status-toggle:hover{ background:var(--p-surface-2) }
#appShell .tablet-status-toggle svg{ transition:transform .2s }
#appShell .tablet-status-toggle.is-open svg{ transform:rotate(180deg) }
/* Dashboard insights: only Bester Tag and Freitag-Anteil, always next to each other. */
#appShell .dashboard-insights-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important }
@media (max-width: 640px){
  #appShell .dashboard-insight-card{ padding:16px !important; min-width:0 }
  #appShell .dashboard-insight-value{ font-size:20px !important; overflow-wrap:anywhere }
}
/* Language picker: flag in front of the language's name. */
.portal-dropdown-option.has-icon{ display:flex; align-items:center; gap:12px }
.portal-dropdown-option-icon{ width:24px; height:16px; flex:0 0 auto; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(15,23,42,.08) }

/* ── Right to left (Arabic) ── */
/* Letter spacing pulls Arabic letters apart (Safari breaks the joins), so none at all. */
html[dir="rtl"] #appShell *{ letter-spacing:0 !important }
/* Picker buttons and selects: the chevron sits on the left, so the room for it does too. */
html[dir="rtl"] #appShell .portal-picker-trigger,
html[dir="rtl"] #appShell .portal-picker-field,
html[dir="rtl"] #appShell .mc-web-picker-trigger{ padding-left:40px !important; padding-right:16px !important; text-align:right }
html[dir="rtl"] #appShell .psc-period{ padding-left:28px !important; padding-right:11px !important }
html[dir="rtl"] #appShell .portal-picker-trigger::after,
html[dir="rtl"] #appShell .portal-picker-field::after{ left:14px !important; right:auto !important }
html[dir="rtl"] #appShell .psc-period::after{ left:10px !important; right:auto !important }
html[dir="rtl"] #appShell select:not([multiple]):not(.portal-native-select){ background-position:left 12px center !important; padding-left:32px !important; padding-right:12px !important; text-align:right }
html[dir="rtl"] .portal-dropdown-option{ text-align:right }
/* Insight cards and KPI lines read from the right, figures included. */
html[dir="rtl"] #appShell .dashboard-insight-card{ text-align:right }
/* Charts draw their labels with the canvas' direction: keep figures as "0,9 €". */
html[dir="rtl"] #appShell canvas{ direction:ltr }

/* Mitgliedsbeiträge: the period buttons wrap instead of pushing the six stat blocks past the screen edge. */
#appShell .mc-stats-row{ grid-template-columns:minmax(0, 1fr) !important }
#appShell .mc-stats-group, #appShell .mc-stats-group-head, #appShell .mc-stats-grid{ min-width:0 }
#appShell .mc-stats-group-triggers{ flex-wrap:wrap; min-width:0; max-width:100% }
#appShell .mc-stats-group-triggers .portal-picker-trigger{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Member month strip: fade the edges with a mask instead of a coloured overlay, which showed as a
   band over the first and last month (above all in dark mode, where its colour missed the card). */
#appShell .pmm-strip-wrap::before, #appShell .pmm-strip-wrap::after{ display:none !important }
#appShell .pmm-strip{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 18px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 18px), transparent 100%);
}

/* Brand loader (same as the app's BrandLoader): teal arc spinning around the pulsing mark. */
.es-brand-loader{ min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px }
.es-brand-loader-ring{ position:relative; width:84px; height:84px; display:flex; align-items:center; justify-content:center }
.es-brand-loader-ring svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.es-brand-loader-track{ fill:none; stroke:var(--p-line, #e7e6e4); stroke-width:4 }
.es-brand-loader-arc{ fill:none; stroke:#2b8882; stroke-width:4; stroke-linecap:round; stroke-dasharray:70 252; transform-origin:42px 42px; animation:es-brand-spin 1.1s linear infinite }
.es-brand-loader-mark{ width:42px; height:42px; display:block; animation:es-brand-pulse 1.4s ease-in-out infinite }
.es-brand-loader-mark svg{ width:100%; height:100%; display:block }
.es-brand-loader-label{ color:var(--p-muted, #6f6d69); font-size:13px; font-weight:500 }
@keyframes es-brand-spin{ to{ transform:rotate(360deg) } }
@keyframes es-brand-pulse{ 0%,100%{ transform:scale(.92) } 50%{ transform:scale(1.06) } }
@media (prefers-reduced-motion: reduce){ .es-brand-loader-arc, .es-brand-loader-mark{ animation:none } }

/* Spendenbescheinigung: long labels (Spanish, French …) on the date-mode tabs wrap instead of
   widening the form grid past the phone's edge. */
@media (max-width: 640px){
  .portal-certificate-form-grid,
  #donationCreatePanel .portal-certificate-form-grid,
  .portal-certificate-dynamic-fields .portal-certificate-form-grid,
  .portal-certificate-toggle-grid,
  .portal-certificate-assets,
  .portal-certificate-history-filters,
  .portal-member-create-grid,
  .portal-member-toolbar-grid,
  .portal-member-edit-grid,
  .portal-member-edit-toggles,
  .portal-member-months-grid{ grid-template-columns:minmax(0, 1fr) }
}
#appShell .portal-certificate-form-grid > *{ min-width:0 }
#appShell .portal-certificate-date-mode{ min-width:0; max-width:100% }
#appShell .portal-certificate-date-mode .portal-auth-tab{ min-width:0; white-space:normal; line-height:1.2; text-align:center }
/* Dashboard columns: never wider than the phone (a 1fr column grows with its widest content). */
@media (max-width: 899px){
  #appShell .dashboard-web-top, #appShell .dashboard-web-bottom, #appShell .dashboard-insights-grid{ grid-template-columns:minmax(0, 1fr) }
  #appShell .dashboard-insights-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important }
  #appShell .dashboard-web-top > *, #appShell .dashboard-web-bottom > *{ min-width:0 }
}
/* Password: the strength bar is enough; the five rule chips (length, upper, lower, number …) are gone. */
.password-strength-checks{ display:none !important }

/* Fields on focus: the accent border drawn inside the field (no outer glow that the card clips
   left and right, no lift). The viewport's maximum-scale=1 keeps iOS from zooming in on a tapped field. */
#appShell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
#appShell select:focus,
#appShell textarea:focus,
.portal-modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
.portal-modal-card select:focus,
.portal-modal-card textarea:focus{
  box-shadow:inset 0 0 0 1px var(--p-accent, #2f8f8a) !important;
  border-color:var(--p-accent, #2f8f8a) !important;
  transform:none !important;
  outline:none !important;
}
/* Map popups in the portal's current look (also in the app's map: mobile/src/components/deviceMapCss.ts). */
.maplibregl-popup-content { padding: 0 !important; border-radius: 12px !important; border: 1px solid var(--p-line, #e7e6e4); background: var(--p-surface, #fff) !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 12px 32px rgba(15,23,42,.16); overflow: hidden; font-family: var(--p-font, "Inter", system-ui, sans-serif); }
body.theme-dark .maplibregl-popup-content { border-color: var(--p-line, #1f2b40); background: var(--p-surface, #111a2b) !important; box-shadow: 0 16px 40px rgba(2,6,23,.5); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--p-surface, #fff) !important; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--p-surface, #fff) !important; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--p-surface, #fff) !important; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--p-surface, #fff) !important; }
.maplibregl-popup-close-button { top: 8px !important; right: 8px !important; width: 28px; height: 28px; border: 0 !important; border-radius: 8px !important; background: transparent !important; outline: none; box-shadow: none !important; }
.maplibregl-popup-close-button:hover { background: var(--p-surface-2, #f4f4f3) !important; }
.maplibregl-popup-close-button:focus, .maplibregl-popup-close-button:focus-visible { outline: none !important; box-shadow: none !important; }
html[dir="rtl"] .maplibregl-popup-close-button { right: auto !important; left: 8px !important; }
.overview-map-popup { min-width: 0 !important; width: 288px; max-width: 100%; box-sizing: border-box; padding: 14px 16px 6px !important; }
.overview-map-popup-title { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding-right: 32px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--p-text, #1c1b1a) !important; overflow-wrap: anywhere; }
html[dir="rtl"] .overview-map-popup-title { padding-right: 0 !important; padding-left: 32px !important; }
.overview-map-popup-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #22c55e; }
.overview-map-popup-dot.is-unplugged { background: #f97316; }
.overview-map-popup-dot.is-offline { background: #94a3b8; }
.overview-map-popup-dot.is-blocked { background: #dc2626; }
.overview-map-popup-sub { margin-top: 2px; font-size: 12.5px; color: var(--p-muted, #6f6d69); overflow-wrap: anywhere; }
.overview-map-popup-rows { margin-top: 10px; }
.overview-map-popup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--p-line, #e7e6e4); font-size: 13px; }
.overview-map-popup-row > span:first-child { color: var(--p-muted, #6f6d69); white-space: nowrap; }
.overview-map-popup-row > b { white-space: nowrap; font-weight: 600; color: var(--p-text, #1c1b1a); text-align: end; font-variant-numeric: tabular-nums; }
.overview-map-popup .device-battery-badge { padding: 5px 9px; font-size: 12px; box-shadow: none; }
.overview-map-popup-group-list { display: block !important; margin-top: 10px !important; max-height: 260px; overflow-y: auto; }
.overview-map-popup-group-item { padding: 9px 0 !important; border-top: 1px solid var(--p-line, #e7e6e4) !important; }
.overview-map-popup-group-head { display: flex; align-items: center !important; justify-content: space-between; gap: 10px; }
.overview-map-popup-group-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 600 !important; color: var(--p-text, #1c1b1a) !important; overflow-wrap: anywhere; }
.overview-map-popup-group-meta { margin-top: 3px !important; padding-inline-start: 16px; font-size: 12px !important; color: var(--p-muted, #6f6d69) !important; }

/* ── Mitgliedsbeiträge → Export: the same step cards as Transaktionen (format → download / print) ── */

#memberContributionExportModal:not(.hidden) .portal-modal-card{ animation:txExportCardIn .26s cubic-bezier(.2,.8,.2,1) }
/* mobile: unfolds in the page right under the Export button */

#memberContributionExportModal.tx-export-inline{ margin-top:12px !important }
#memberContributionExportModal.tx-export-inline .portal-modal-card{
  padding:16px !important;
  border:1px solid var(--p-line) !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
#memberContributionExportModal.tx-export-inline:not(.hidden) .portal-modal-card{
  animation:txExportUnfold .22s cubic-bezier(.2,.8,.2,1) !important;
}
@media (prefers-reduced-motion:reduce){
  #memberContributionExportModal .portal-modal-card{ animation:none !important }
}
#memberContributionExportModal .tx-export-step{ display:grid; gap:10px }
#memberContributionExportModal .tx-export-step.hidden,
#memberContributionExportModal .portal-modal-actions.hidden{ display:none !important }
#memberContributionExportModal .tx-export-question{ font-size:14px; color:var(--p-muted); margin-bottom:2px }
#memberContributionExportModal .tx-export-choice{
  display:grid;
  gap:2px;
  width:100%;
  padding:14px 16px;
  text-align:left;
  border:1px solid var(--p-line);
  border-radius:12px;
  background:var(--p-surface);
  color:var(--p-text);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease, background .15s ease;
}
#memberContributionExportModal .tx-export-choice:hover,
#memberContributionExportModal .tx-export-choice:focus-visible{
  border-color:var(--p-accent);
  background:color-mix(in srgb,var(--p-accent) 6%,var(--p-surface));
  outline:none;
}
#memberContributionExportModal .tx-export-choice:active{ background:color-mix(in srgb,var(--p-text) 5%,var(--p-surface)) }
#memberContributionExportModal .tx-export-choice-title{ font-size:15px; font-weight:600 }
#memberContributionExportModal .tx-export-choice-sub{ font-size:12.5px; color:var(--p-muted) }
#memberContributionExportModal .tx-export-back{
  display:inline-flex;
  align-items:center;
  gap:4px;
  width:max-content;
  padding:4px 6px 4px 0;
  border:0;
  background:none;
  color:var(--p-muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
#memberContributionExportModal .tx-export-back:hover{ color:var(--p-text) }
#memberContributionExportModal.tx-export-inline .portal-modal-title{ color:var(--p-text) !important; font-size:16px !important }
#memberContributionExportModal.tx-export-inline .portal-modal-close-x{ color:var(--p-muted) !important; background:transparent !important; border:0 !important }
#memberContributionExportModal .tx-export-choice.hidden{ display:none !important }
#memberContributionExportModal .tx-export-step .msg{ margin-top:2px }

/* ── Battery as in the app (components/Battery.tsx) ── */
.es-batt { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; color: #14a38b; font-weight: 700; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.es-batt.is-low { color: #f43f5e; }
.es-batt.is-unknown { color: var(--p-muted, #6f6d69); }
.es-batt svg { width: 23px; height: 12px; flex-shrink: 0; overflow: visible; }
.es-batt.is-charging svg { animation: esBattPulse 1.3s ease-in-out infinite; transform-origin: center; }
.es-batt.is-charging .es-batt-fill { animation: esBattFill 1.3s ease-in-out infinite; }
@keyframes esBattPulse { 50% { transform: scale(.82); } }
@keyframes esBattFill { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .es-batt.is-charging svg, .es-batt.is-charging .es-batt-fill { animation: none; } }

/* ── Einstellungen › Geräte: the app's device card ── */
#appShell #kioskList .es-dev { display: block !important; padding: 14px 16px !important; border-radius: 12px !important; border: 1px solid var(--p-line) !important; background: var(--p-surface) !important; box-shadow: none !important; }
#appShell #kioskList .es-dev + .es-dev { margin-top: 10px; }
#appShell #kioskList .es-dev-head { display: flex; align-items: flex-start; gap: 10px; }
#appShell #kioskList .es-dev-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex-shrink: 0; background: #f43f5e; }
#appShell #kioskList .es-dev-dot.is-online { background: #22c55e; }
#appShell #kioskList .es-dev-main { flex: 1; min-width: 0; }
#appShell #kioskList .es-dev-name-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
#appShell #kioskList .es-dev-name-row.hidden { display: none; }
#appShell #kioskList .es-dev-name { font-size: 15px; font-weight: 700; color: var(--p-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#appShell #kioskList .es-dev-pencil { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--p-muted); cursor: pointer; flex-shrink: 0; }
#appShell #kioskList .es-dev-pencil:hover { background: var(--p-surface-2); color: var(--p-text); }
#appShell #kioskList .es-dev-serial { margin-top: 2px; font-size: 12.5px; color: var(--p-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#appShell #kioskList .es-dev .es-batt { margin-top: 3px; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-screen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; padding-left: 18px; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-screen-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #14a38b; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-screen-state.is-off { color: #f43f5e; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-wake { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--p-line, rgba(15,23,42,.14)); background: transparent; color: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-wake-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--p-line, rgba(15,23,42,.1)); }
#appShell :is(#kioskList, .td-screen-row) .es-dev-wake.is-needed { border-color: #14a38b; color: #14a38b; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-wake.is-needed .es-dev-wake-ico { background: #14a38b; color: #fff; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-wake:disabled { opacity: .55; cursor: default; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-wake.is-off-action .es-dev-wake-ico { background: rgba(244,63,94,.12); color: #e11d48; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-wake-msg { font-size: 12px; color: var(--p-muted, #6f6d69); }
html[dir="rtl"] #appShell :is(#kioskList, .td-screen-row) .es-dev-screen { padding-left: 0; padding-right: 18px; }
#appShell #kioskList .es-dev-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-left: 18px; }
#appShell #kioskList .es-dev-seen { font-size: 12.5px; color: var(--p-muted); }
#appShell #kioskList .es-dev-unpair { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: none; color: #f43f5e; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#appShell #kioskList .es-dev-unpair:hover { text-decoration: underline; }
#appShell #kioskList .es-dev-edit { margin-top: 2px; }
#appShell #kioskList .es-dev-edit.hidden, #appShell #kioskList .es-dev-unpair-box.hidden { display: none !important; }
#appShell #kioskList .es-dev-edit .device-title-input, #appShell #kioskList .es-dev-input { display: block; width: 100%; height: 42px; box-sizing: border-box; padding: 0 12px; border-radius: 8px; border: 1px solid var(--p-line-strong); background: var(--p-surface-2); color: var(--p-text); font-size: 14px; }
#appShell #kioskList .es-dev-unpair-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--p-line); }
#appShell #kioskList .es-dev-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--p-muted); }
#appShell #kioskList .es-dev-btns { display: flex; gap: 8px; margin-top: 10px; }
#appShell #kioskList .es-btn { flex: 1; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; font-size: 13.5px; font-weight: 600; cursor: pointer; }
#appShell #kioskList .es-btn-primary { background: var(--p-accent); color: #fff; }
#appShell #kioskList .es-btn-danger { background: #e11d48; color: #fff; }
#appShell #kioskList .es-btn-outline { background: transparent; border-color: var(--p-line-strong); color: var(--p-text); }
#appShell #kioskList .es-btn:disabled { opacity: .55; cursor: default; }
#appShell #kioskList .device-unpair-msg:not(:empty) { margin-top: 8px; font-size: 12.5px; color: #f43f5e; }
html[dir="rtl"] #appShell #kioskList .es-dev-foot { padding-left: 0; padding-right: 18px; }

/* Fields and search boxes in the portal font (Inter, as in the app); Manrope looked widely spaced on iPhone. */
#appShell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
#appShell textarea, #appShell select, #appShell .portal-picker-trigger{ font-family:var(--p-font) !important; letter-spacing:normal }
#appShell input::placeholder, #appShell textarea::placeholder{ font-family:var(--p-font); letter-spacing:normal }

/* Meine Geräte: the Ein / Aus button centred under the terminal in front. */
#appShell .td-screen-row { display: flex; justify-content: center; margin-top: 6px; }
#appShell .td-screen-row .es-dev-screen { margin-top: 0; padding-left: 0; justify-content: center; }
/* Meine Geräte: Bildschirm ein / aus as the first tag (left of Admin-PIN). */
#appShell .td-screen-slot { display: contents; }
#appShell .td-bar .es-dev-wake-chip { gap: 6px; padding: 0 12px 0 4px; font-size: 13px; }
#appShell .td-bar .es-dev-wake-chip .es-dev-wake-ico { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--p-line, rgba(15,23,42,.1)); }
#appShell .td-bar .es-dev-wake-chip.is-needed { border-color: #14a38b; color: #14a38b; }
#appShell .td-bar .es-dev-wake-chip.is-needed .es-dev-wake-ico { background: #14a38b; color: #fff; }
#appShell .td-bar .es-dev-wake-chip.is-off-action .es-dev-wake-ico { background: rgba(244,63,94,.12); color: #e11d48; }
#appShell .td-bar .es-dev-wake-chip:disabled { opacity: .55; cursor: default; }
html[dir="rtl"] #appShell .td-bar .es-dev-wake-chip { padding: 0 4px 0 12px; }
#appShell .td-screen-row:empty, #appShell .td-screen-row .es-dev-screen:not(:has(.es-dev-pin)):has(.es-dev-wake-msg:empty) { display: none; }

/* Bildschirm aus: the terminal's Admin-PIN, asked for below the button. */
#appShell :is(#kioskList, .td-screen-row) .es-dev-pin { display: flex; align-items: center; gap: 8px; flex-basis: 100%; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-pin-input { width: 170px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--p-line-strong, #d6d4d1); background: var(--p-surface, #fff); color: inherit; font-size: 14px; letter-spacing: .2em; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-pin-input::placeholder { letter-spacing: normal; font-size: 12.5px; }
/* Ausschalten next to the PIN: pale red, full red once the PIN is typed. */
#appShell :is(#kioskList, .td-screen-row) .es-dev-pin-ok { height: 34px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(244,63,94,.12); color: #e11d48; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-pin-ok.is-ready { background: #e11d48; color: #fff; }
#appShell :is(#kioskList, .td-screen-row) .es-dev-pin-ok:disabled { opacity: .55; cursor: default; }

/* ── Certificate logo: pinch / Ctrl + wheel resizes the header logo box (settings.logoScale) ── */
#appShell .portal-certificate-asset-preview.is-logo-scalable{ position:relative; justify-content:flex-start; min-height:138px; touch-action:pan-y; background:#fff !important; user-select:none; -webkit-user-select:none }
.portal-certificate-asset-preview .portal-cert-logo-box{ flex:0 0 auto; border:1px dashed rgba(15,23,42,.18); border-radius:4px }
.portal-certificate-asset-preview .portal-cert-logo-box img{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none }
.portal-certificate-asset-preview .portal-cert-logo-pill{ position:absolute; right:8px; bottom:8px; padding:3px 8px; border-radius:999px; background:rgba(15,23,42,.72); color:#fff; font-size:11px; font-weight:600; pointer-events:none }
.portal-cert-logo-hint{ margin-top:6px }