/* ============================================================================
   DCA Suite Theme 2.0 – theme.css
   Desktop: klassische Top-Navigation (Standard: dunkel wie Original)
   Mobile:  Bottom App-Bar
   Header-Stile: 'dark' (Standard), 'light', 'colored'
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 15px; line-height: 1.6;
    color: #111827; background: #f9fafb;
}
body.dca-mobile { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dca, #e67e22); }

:root {
    --dca:       #e67e22;
    --dca-dark:  #c0590a;
    --nav-h:     60px;
    --bar-h:     64px;
    /* Header-Farben: Standard = dunkel (wie Original) */
    --nav-bg:    #111827;
    --nav-text:  rgba(255,255,255,0.75);
    --nav-text-active: #ffffff;
    --nav-logo:  var(--dca);
    --nav-border: rgba(255,255,255,0.08);
    --nav-hover-bg: rgba(255,255,255,0.06);
}

/* ── Header-Stil: Light ─────────────────────────────────────────────────────── */
body.dca-header-light {
    --nav-bg:           #ffffff;
    --nav-text:         #6b7280;
    --nav-text-active:  #111827;
    --nav-logo:         var(--dca);
    --nav-border:       #e5e7eb;
    --nav-hover-bg:     #f3f4f6;
}
/* ── Header-Stil: Vereinsfarbe ──────────────────────────────────────────────── */
body.dca-header-colored {
    --nav-bg:           var(--dca);
    --nav-text:         rgba(255,255,255,0.8);
    --nav-text-active:  #ffffff;
    --nav-logo:         #ffffff;
    --nav-border:       rgba(255,255,255,0.2);
    --nav-hover-bg:     rgba(255,255,255,0.12);
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOP-NAVIGATION (Desktop)
   ══════════════════════════════════════════════════════════════════════════════ */
.dca-topnav {
    position: sticky; top: 0; z-index: 200;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 1px 8px rgba(0,0,0,.12);
    height: var(--nav-h);
}
.dca-topnav-inner {
    max-width: 1200px; margin: 0 auto;
    height: 100%;
    display: flex; align-items: center;
    gap: 2px; padding: 0 28px;
}

/* Brand / Logo */
.dca-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; margin-right: 28px; flex-shrink: 0;
}
.dca-brand-logo { height: 34px; width: auto; border-radius: 6px; object-fit: contain; }
.dca-brand-name { font-size: 18px; font-weight: 800; color: var(--nav-logo); white-space: nowrap; }
/* "DCA.intern"-Stil: Hauptname + farbiger Punkt + Zusatz */
.dca-brand-name strong { color: var(--nav-logo); }
.dca-brand-name span   { color: var(--dca); }

/* Nav Links */
.dca-topnav-link {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 8px;
    text-decoration: none;
    font-size: 14px; font-weight: 500;
    color: var(--nav-text);
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.dca-topnav-link:hover  { background: var(--nav-hover-bg); color: var(--nav-text-active); }
.dca-topnav-link.active { color: var(--dca); background: var(--nav-hover-bg); }
body.dca-header-colored .dca-topnav-link.active { color: #fff; background: rgba(255,255,255,.18); }

/* Rechte Icons-Gruppe */
.dca-topnav-actions {
    margin-left: auto;
    display: flex; align-items: center; gap: 4px;
}
.dca-topnav-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; color: var(--nav-text);
    font-size: 18px; transition: background .12s, color .12s;
    position: relative;
}
.dca-topnav-icon:hover { background: var(--nav-hover-bg); color: var(--nav-text-active); }

/* Notification Badge */
.dca-notif-badge {
    position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444;
}

/* Avatar-Button */
.dca-topnav-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--dca);
    color: #fff; font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,.2);
    margin-left: 4px; flex-shrink: 0;
    transition: transform .12s;
}
.dca-topnav-avatar:hover { transform: scale(1.05); }

/* Divider zwischen Nav und Aktionen */
.dca-topnav-sep {
    width: 1px; height: 24px;
    background: var(--nav-border);
    margin: 0 8px; flex-shrink: 0;
}

@media (max-width: 768px) { .dca-topnav { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE HEADER
   ══════════════════════════════════════════════════════════════════════════════ */
.dca-mobile-header {
    display: none;
    position: sticky; top: 0; z-index: 200;
    background: var(--nav-bg);
    color: var(--nav-text-active);
    height: var(--nav-h);
    align-items: center;
    padding: 0 16px; gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.dca-mobile-header-logo { height: 28px; width: auto; border-radius: 5px; object-fit: contain; }
.dca-mobile-header-title { font-size: 16px; font-weight: 800; color: var(--nav-logo); flex: 1; }
.dca-mobile-header-sub { font-size: 12px; color: var(--nav-text); }
@media (max-width: 768px) { .dca-mobile-header { display: flex; } }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM APP-BAR
   ══════════════════════════════════════════════════════════════════════════════ */
.dca-bottombar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: #fff; border-top: 1.5px solid #e5e7eb;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    height: calc(var(--bar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
}
.dca-bottombar-inner { height: var(--bar-h); display: flex; align-items: stretch; }
.dca-bottombar-link {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; color: #9ca3af;
    font-size: 10px; font-weight: 600; letter-spacing: .3px;
    padding: 6px 4px; min-width: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s;
}
.dca-bottombar-link-icon { font-size: 22px; line-height: 1; }
.dca-bottombar-link.active { color: var(--dca); }
.dca-bottombar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
@media (max-width: 768px) { .dca-bottombar { display: block; } }

/* ══════════════════════════════════════════════════════════════════════════════
   "MEHR" ÜBERLAUF-MENÜ (mobile Bottom-Bar)
   ══════════════════════════════════════════════════════════════════════════════ */
.dca-bottombar-more { background: none; border: none; cursor: pointer; }
.dca-more-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(17, 24, 39, .45);
    display: flex; align-items: flex-end; justify-content: center;
}
.dca-more-sheet {
    width: 100%; max-width: 560px;
    background: #fff; border-radius: 20px 20px 0 0;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(0,0,0,.15);
    animation: dcaMoreSlideUp .18s ease-out;
}
@keyframes dcaMoreSlideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.dca-more-handle { width: 36px; height: 4px; border-radius: 2px; background: #e5e7eb; margin: 8px auto 16px; }
.dca-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; padding-bottom: 8px; }
.dca-more-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-decoration: none; color: #374151;
    -webkit-tap-highlight-color: transparent;
}
.dca-more-item-icon {
    width: 52px; height: 52px; border-radius: 16px;
    background: #f3f4f6; color: var(--dca);
    display: flex; align-items: center; justify-content: center;
}
.dca-more-item-label { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.25; }

/* ══════════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════════════════════════════════════════════ */
.dca-main { min-height: calc(100vh - var(--nav-h) - 60px); }
.dca-content-wrap { max-width: 1080px; margin: 0 auto; padding: 32px 24px 48px; }
@media (max-width: 768px) { .dca-content-wrap { padding: 20px 16px 32px; } }
body.elementor-page .dca-content-wrap { max-width: none; padding: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */
.dca-footer {
    background: var(--nav-bg); border-top: 1px solid var(--nav-border);
    padding: 18px 28px; text-align: center;
    font-size: 13px; color: var(--nav-text);
}
.dca-footer a { color: var(--nav-text); text-decoration: none; }
.dca-footer a:hover { color: var(--dca); }
@media (max-width: 768px) {
    .dca-footer { margin-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
}

/* Login-Seite */
.dca-login-page .dca-topnav,
.dca-login-page .dca-mobile-header,
.dca-login-page .dca-bottombar,
.dca-login-page .dca-footer { display: none !important; }
.dca-login-page .dca-main {
    min-height: 100vh; display: flex;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
}
.dca-login-page body { padding-bottom: 0 !important; }

/* WP Admin Bar */
.admin-bar .dca-topnav { top: 32px; }
.admin-bar .dca-mobile-header { top: 46px; }
@media (max-width: 782px) { .admin-bar .dca-mobile-header { top: 46px; } }
@media (max-width: 600px)  { .admin-bar .dca-mobile-header { top: 0; } }

/* Utilities */
.dca-only-mobile  { display: none !important; }
.dca-only-desktop { display: block !important; }
@media (max-width: 768px) {
    .dca-only-mobile  { display: block !important; }
    .dca-only-desktop { display: none !important; }
}

/* ─── Notification Dropdown ─────────────────────────────────────────────────── */
.dca-notif-wrap { position:relative; display:inline-flex; }
.dca-topnav-icon { position:relative; }
.dca-notif-badge {
  position:absolute; top:-5px; right:-5px;
  width:18px; height:18px; border-radius:50%;
  background:#ef4444; color:#fff;
  font-size:10px; font-weight:800; line-height:18px;
  text-align:center; pointer-events:none;
  border:2px solid #111827;
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.dca-notif-dropdown {
  position:absolute; top:calc(100% + 12px); right:-8px;
  width:320px; background:#fff; border:1.5px solid #e5e7eb;
  border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.15);
  z-index:9999; overflow:hidden;
}
.dca-notif-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #f3f4f6;
  font-size:13px; font-weight:700; color:#111827;
}
.dca-notif-mark-all {
  font-size:11px; font-weight:600; color:#9ca3af;
  background:none; border:none; cursor:pointer; padding:0;
}
.dca-notif-mark-all:hover { color:var(--dca,#e67e22); }
.dca-notif-list { max-height:280px; overflow-y:auto; }
.dca-notif-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-bottom:1px solid #f9fafb;
  text-decoration:none; transition:background .12s; color:#374151;
}
.dca-notif-item:hover { background:#f9fafb; }
.dca-notif-item.unread { background:#fffbeb; border-left:3px solid var(--dca,#e67e22); }
.dca-notif-icon { flex-shrink:0; margin-top:2px; opacity:.7; }
.dca-notif-title { font-size:13px; color:#374151; line-height:1.4; font-weight:500; }
.dca-notif-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--dca,#e67e22); flex-shrink:0; margin-top:4px;
}
.dca-notif-dot.read { background:#e5e7eb; }
.dca-notif-text { font-size:13px; color:#374151; line-height:1.4; flex:1; }
.dca-notif-time { font-size:11px; color:#9ca3af; margin-top:3px; display:block; }
.dca-notif-footer {
  display:block; text-align:center; padding:12px;
  font-size:13px; font-weight:600; color:var(--dca,#e67e22);
  border-top:1px solid #f3f4f6; text-decoration:none;
}
.dca-notif-footer:hover { background:#f9fafb; }

/* ─── Frontend-Admin Panel ───────────────────────────────────────────────────── */
.dca-fa-panel {
  position:fixed; top:0; right:0; bottom:0; z-index:9998;
  width:340px; background:#fff; box-shadow:-4px 0 32px rgba(0,0,0,.15);
  transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.dca-fa-loading {
  text-align:center; padding:40px 20px; color:#9ca3af; font-size:13px;
}
.dca-fa-toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:#111827; color:#fff; padding:10px 18px; border-radius:10px;
  font-size:13px; font-weight:600; z-index:99999;
  box-shadow:0 4px 16px rgba(0,0,0,.2); white-space:nowrap;
  animation:fadeInUp .2s ease;
}
.dca-fa-toast.err { background:#ef4444; }
@keyframes fadeInUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.dca-fa-panel.open { transform:translateX(0); }
.dca-fa-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9997;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.dca-fa-overlay.open { opacity:1; pointer-events:auto; }
.dca-fa-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid #f3f4f6; flex-shrink:0;
}
.dca-fa-head-title { font-size:15px; font-weight:800; color:#111827; }
.dca-fa-close {
  width:32px; height:32px; border-radius:8px; background:#f3f4f6;
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; color:#6b7280;
}
.dca-fa-close:hover { background:#e5e7eb; }
.dca-fa-body { flex:1; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; }
.dca-fa-section { margin-bottom:20px; }
.dca-fa-section-title {
  font-size:10.5px; font-weight:700; color:#9ca3af;
  text-transform:uppercase; letter-spacing:.8px; margin-bottom:8px;
}
.dca-fa-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:10px;
  text-decoration:none; color:#374151; font-size:13.5px; font-weight:500;
  transition:background .12s; border:none; background:none; cursor:pointer;
  width:100%; text-align:left; font-family:inherit;
}
.dca-fa-link:hover { background:#f6f7f9; color:#111827; }
.dca-fa-link svg { flex-shrink:0; }

/* ─── MOBILE HEADER ──────────────────────────────────────────────────────── */
.dca-mob {
  display: none;
  position: sticky; top: 0; z-index: 500;
  background: var(--topbar-bg, #1e293b);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 12px rgba(0,0,0,.2);
}
.dca-mob-inner {
  display: flex; align-items: center;
  height: 58px; padding: 0 14px; gap: 8px;
}
.dca-mob-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex: 1; min-width: 0;
}
.dca-mob-logo {
  height: 28px; width: auto; flex-shrink: 0;
  border-radius: 6px;
}
.dca-mob-logo-fallback {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dca-mob-orgname {
  font-size: 16px; font-weight: 800;
  color: #fff; letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dca-mob-actions {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.dca-mob-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.7);
  transition: background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.dca-mob-btn:hover, .dca-mob-btn:active {
  background: rgba(255,255,255,.1); color: #fff;
}
.dca-mob-btn--admin { color: rgba(255,255,255,.55); }
.dca-mob-badge {
  position: absolute; top: 5px; right: 5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #ef4444; color: #fff;
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--topbar-bg, #1e293b);
  pointer-events: none; line-height: 1;
}
.dca-mob-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  color: #fff; text-decoration: none;
  flex-shrink: 0; margin-left: 2px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
  transition: box-shadow .12s;
}
.dca-mob-avatar:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
/* Mobile Notif-Dropdown */
.dca-mob-notif-dropdown {
  position: fixed; top: 58px; left: 0; right: 0;
  border-radius: 0 0 16px 16px;
  border-left: none; border-right: none;
  border-top: 1px solid rgba(255,255,255,.05);
  z-index: 499;
}
/* Responsive */
@media (max-width: 768px) {
  .dca-mob { display: block !important; }
  .dca-topnav { display: none !important; }
  .dca-main { padding-top: 0 !important; }
  /* Desktop-Dropdown verstecken */
  .dca-notif-dropdown:not(.dca-mob-notif-dropdown) { display: none !important; }
}