/* ============================================================
   VereinsApp – Haupt-Stylesheet
   ============================================================ */

:root {
  --accent:       #1D9E75;
  --accent-light: #E1F5EE;
  --accent-dark:  #0F6E56;
  --danger:       #E24B4A;
  --danger-light: #FCEBEB;
  --amber:        #BA7517;
  --amber-light:  #FAEEDA;
  --blue:         #378ADD;
  --blue-light:   #E6F1FB;
  --nav-w:        230px;
  --bg:           #F5F4F0;
  --card:         #FFFFFF;
  --border:       #E5E3DC;
  --text:         #1A1916;
  --muted:        #6B6963;
  --font:         'Inter', 'DM Sans', system-ui, sans-serif;
  --mono:         'JetBrains Mono', 'DM Mono', monospace;
  --radius:       10px;
  --shadow:       0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea, button { font-family: var(--font); }

/* ── LAYOUT ───────────────────────────────────────────────── */
.app-shell   { display: flex; min-height: 100vh; }
.sidebar     { width: var(--nav-w); background: var(--card); border-right: 1px solid var(--border);
               display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.main-area   { margin-left: var(--nav-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar      { background: var(--card); border-bottom: 1px solid var(--border); padding: 14px 24px;
               display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; }
.page-content{ padding: 24px; flex: 1; }

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar-logo { padding: 18px 16px 14px; border-bottom: 1px solid var(--border); }
.logo-wrap    { display: flex; align-items: center; gap: 10px; }
.logo-icon    { width: 32px; height: 32px; background: var(--accent); border-radius: 8px;
               display: flex; align-items: center; justify-content: center; color: #fff;
               font-weight: 700; font-size: 16px; flex-shrink: 0; }
.logo-name    { font-weight: 600; font-size: 14px; }
.logo-sub     { font-size: 11px; color: var(--muted); margin-top: 1px; }
.nav-section  { padding: 12px 8px 4px; }
.nav-lbl      { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .07em;
               text-transform: uppercase; padding: 0 8px; margin-bottom: 4px; }
.nav-link     { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
               font-size: 13px; color: var(--muted); cursor: pointer; margin-bottom: 1px;
               transition: background .12s, color .12s; text-decoration: none; }
.nav-link:hover  { background: var(--bg); color: var(--text); text-decoration: none; }
.nav-link.active { background: var(--accent-light); color: var(--accent-dark); font-weight: 500; }
.nav-link svg    { width: 15px; height: 15px; flex-shrink: 0; }
.nav-badge  { margin-left: auto; background: var(--accent); color: #fff; font-size: 10px;
              font-weight: 600; padding: 1px 6px; border-radius: 10px; }
.nav-badge.red { background: var(--danger); }
.sidebar-footer { margin-top: auto; padding: 12px 8px; border-top: 1px solid var(--border); }
.user-row   { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 8px; }
.avatar     { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-light);
              color: var(--accent-dark); display: flex; align-items: center; justify-content: center;
              font-size: 11px; font-weight: 700; flex-shrink: 0; }
.avatar-lg  { width: 48px; height: 48px; font-size: 18px; }
.user-name  { font-size: 13px; font-weight: 500; }
.user-role  { font-size: 11px; color: var(--muted); }

/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar-title  { font-size: 15px; font-weight: 600; flex: 1; }
.topbar-search { flex: 1; max-width: 320px; }
.topbar-search input { width: 100%; padding: 7px 12px 7px 34px; border: 1px solid var(--border);
                        border-radius: 8px; font-size: 13px; background: var(--bg); outline: none; }
.topbar-search input:focus { border-color: var(--accent); }
.search-wrap { position: relative; }
.search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
                   width: 14px; height: 14px; color: var(--muted); }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn        { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
              border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
              border: 1px solid var(--border); background: var(--card); color: var(--text);
              transition: background .12s, border-color .12s; }
.btn:hover  { background: var(--bg); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.danger  { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.danger:hover { background: #c93f3e; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn svg { width: 14px; height: 14px; }

/* ── CARDS ────────────────────────────────────────────────── */
.card        { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
               box-shadow: var(--shadow); overflow: hidden; }
.card-header { padding: 14px 18px; border-bottom: 1px solid var(--border);
               display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title  { font-size: 14px; font-weight: 600; }
.card-body   { padding: 18px; }

/* ── STATS GRID ───────────────────────────────────────────── */
.stats-grid { display: grid; gap: 14px; margin-bottom: 20px; }
.stats-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.stats-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.stats-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.stat-card   { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
               padding: 16px 18px; box-shadow: var(--shadow); }
.stat-lbl    { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.stat-val    { font-size: 26px; font-weight: 700; font-family: var(--mono); letter-spacing: -.5px; }
.stat-delta  { font-size: 12px; margin-top: 4px; }
.delta-up    { color: var(--accent); }
.delta-down  { color: var(--danger); }
.delta-neu   { color: var(--amber); }

/* ── TABLE ────────────────────────────────────────────────── */
.table-wrap  { overflow-x: auto; }
table.tbl    { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600;
               color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--border);
               text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
table.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr:hover td { background: var(--bg); }
.tbl-num    { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ── BADGES ───────────────────────────────────────────────── */
.badge      { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
              border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.badge.green  { background: #E6F4D6; color: #2F6509; }
.badge.amber  { background: var(--amber-light); color: var(--amber); }
.badge.red    { background: var(--danger-light); color: var(--danger); }
.badge.blue   { background: var(--blue-light); color: #1A5FA8; }
.badge.gray   { background: #F0EEE8; color: #5A5752; }
.badge.purple { background: #EDE9FB; color: #5B3FBE; }

/* ── FORMS ────────────────────────────────────────────────── */
.form-grid   { display: grid; gap: 14px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-group  { display: flex; flex-direction: column; gap: 5px; }
.form-label  { font-size: 12px; font-weight: 600; color: var(--muted); }
.form-input  { padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
               font-size: 13px; background: var(--card); color: var(--text); outline: none;
               transition: border-color .12s; }
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,158,117,.1); }
.form-input.error { border-color: var(--danger); }
.form-hint   { font-size: 11px; color: var(--muted); }
.form-error  { font-size: 11px; color: var(--danger); }
.form-check  { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.form-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.form-section { margin-bottom: 24px; }
.form-section-title { font-size: 13px; font-weight: 600; margin-bottom: 14px; padding-bottom: 8px;
                       border-bottom: 1px solid var(--border); color: var(--muted); text-transform: uppercase;
                       letter-spacing: .05em; font-size: 11px; }

/* ── MODAL ────────────────────────────────────────────────── */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4);
                  z-index: 200; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal       { background: var(--card); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.2);
               width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; }
.modal-header{ padding: 18px 20px; border-bottom: 1px solid var(--border);
               display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 15px; font-weight: 600; }
.modal-close { background: none; border: none; cursor: pointer; padding: 4px; color: var(--muted);
               border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-body  { padding: 20px; }
.modal-footer{ padding: 14px 20px; border-top: 1px solid var(--border);
               display: flex; justify-content: flex-end; gap: 8px; }

/* ── ALERTS ───────────────────────────────────────────────── */
.alert       { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: flex; gap: 10px; }
.alert.success { background: var(--accent-light); color: var(--accent-dark); border: 1px solid #9FD9C0; }
.alert.error   { background: var(--danger-light); color: var(--danger); border: 1px solid #F0A5A4; }
.alert.warning { background: var(--amber-light); color: var(--amber); border: 1px solid #E5C98A; }
.alert.info    { background: var(--blue-light); color: #1A5FA8; border: 1px solid #9EC8F0; }

/* ── PAGINATION ───────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 6px; padding: 14px 0; font-size: 13px; }
.pagination .page-info { color: var(--muted); margin-right: auto; }
.page-btn   { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
              background: var(--card); cursor: pointer; font-size: 12px; }
.page-btn:hover  { background: var(--bg); }
.page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── CHART BARS ───────────────────────────────────────────── */
.chart-area  { padding: 16px; }
.bar-chart   { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.bar         { flex: 1; background: var(--accent-light); border-radius: 4px 4px 0 0;
               position: relative; cursor: pointer; transition: background .12s; min-width: 0; }
.bar:hover   { background: var(--accent); }
.bar.empty   { background: var(--border); opacity: .5; }
.bar-labels  { display: flex; gap: 6px; padding-top: 6px; }
.bar-lbl     { flex: 1; text-align: center; font-size: 10px; color: var(--muted); min-width: 0; }

/* ── ACTIVITY ─────────────────────────────────────────────── */
.activity-list { }
.activity-item { display: flex; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.activity-dot.green  { background: var(--accent); }
.activity-dot.blue   { background: var(--blue); }
.activity-dot.amber  { background: var(--amber); }
.activity-dot.red    { background: var(--danger); }
.activity-text { font-size: 13px; line-height: 1.4; }
.activity-time { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── PROGRESS ─────────────────────────────────────────────── */
.progress-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.progress-fill.amber { background: var(--amber); }
.progress-fill.red   { background: var(--danger); }

/* ── TABS ─────────────────────────────────────────────────── */
.tabs        { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-btn     { padding: 10px 18px; font-size: 13px; font-weight: 500; cursor: pointer;
               border: none; background: none; color: var(--muted); border-bottom: 2px solid transparent;
               margin-bottom: -1px; transition: color .12s; }
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel   { display: none; }
.tab-panel.active { display: block; }

/* ── TOAST ────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999;
                    display: flex; flex-direction: column; gap: 8px; }
.toast       { padding: 12px 18px; border-radius: 8px; font-size: 13px; font-weight: 500;
               box-shadow: 0 4px 20px rgba(0,0,0,.15); animation: slideIn .25s ease;
               display: flex; align-items: center; gap: 10px; min-width: 260px; }
.toast.success { background: var(--accent); color: #fff; }
.toast.error   { background: var(--danger); color: #fff; }
.toast.info    { background: #1A1916; color: #fff; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── DSGVO ────────────────────────────────────────────────── */
.dsgvo-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dsgvo-item  { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
               padding: 16px 18px; box-shadow: var(--shadow); }
.dsgvo-icon  { font-size: 22px; margin-bottom: 10px; }
.dsgvo-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.dsgvo-desc  { font-size: 12px; color: var(--muted); line-height: 1.5; }
.dsgvo-status { display: flex; align-items: center; gap: 6px; margin-top: 10px;
                font-size: 12px; font-weight: 600; color: var(--accent); }
.dsgvo-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dsgvo-status.warn { color: var(--amber); }

/* ── TWO COL ──────────────────────────────────────────────── */
.grid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 12px; opacity: .4; }
.empty-state h3  { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state p   { font-size: 13px; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .stats-grid.cols-4 { grid-template-columns: repeat(2,1fr); }
  .grid-2, .dsgvo-grid { grid-template-columns: 1fr; }
  .form-grid.cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .stats-grid.cols-4, .stats-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ── LOADING SPINNER ──────────────────────────────────────── */
.spinner { width: 20px; height: 20px; border: 2px solid var(--border);
           border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.7);
                   z-index: 500; align-items: center; justify-content: center; }
.loading-overlay.show { display: flex; }