/* ============================================================ admin.css – gemeinsames Admin-Design ("Die Besten 10") Wird auf allen admin-*.php Seiten NACH style.css und darkmode.css eingebunden (siehe der jeweiligen Seite). Nutzt dieselbe Dark-Mode-Mechanik wie der Rest der Seite: darkmode.js schaltet die Klasse body.dark-mode um (localStorage -> sonst prefers-color-scheme). Kein zusätzliches @media(prefers-color-scheme)-Handling hier, damit der manuelle Toggle nicht überstimmt wird. ============================================================ */ :root{ --adm-bg: #f6f5f3; --adm-surface: #ffffff; --adm-surface-2: #f3f1ec; --adm-border: #e3ded3; --adm-text: #1f1f1f; --adm-muted: #6a6966; --adm-accent: #c9a362; --adm-accent-hover: #b8924f; --adm-accent-text: #3a2c14; --adm-success: #2e7d32; --adm-success-bg: #e8f5e9; --adm-danger: #c0392b; --adm-danger-bg: #fdecea; --adm-info: #1565c0; --adm-info-bg: #e3f2fd; --adm-warn: #856404; --adm-warn-bg: #fff3cd; --adm-radius: 12px; --adm-radius-sm: 8px; --adm-nav-h: 46px; } body.dark-mode{ --adm-bg: #141414; --adm-surface: #1e1e1e; --adm-surface-2: #262626; --adm-border: #333333; --adm-text: #eeeeee; --adm-muted: #a8a8a8; --adm-accent: #c9a362; --adm-accent-hover: #d8b577; --adm-accent-text: #1a1608; --adm-success: #3fa66b; --adm-success-bg: #16301f; --adm-danger: #d9534f; --adm-danger-bg: #3a1e1e; --adm-info: #7ab8e0; --adm-info-bg: #1a2535; --adm-warn: #e0ac47; --adm-warn-bg: #3a2a00; } /* ── Grundfläche ─────────────────────────────────────────── */ body{ background:var(--adm-bg); color:var(--adm-text); } body.dark-mode{ background:var(--adm-bg) !important; color:var(--adm-text); } /* ============================================================ Topbar + Navigation (admin-nav.php) ============================================================ */ .admin-topbar{ background:var(--adm-surface); border-bottom:1px solid var(--adm-border); height:60px; display:flex; align-items:center; } .admin-topbar-inner{ width:100%; max-width:1280px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .admin-brand{ display:flex; align-items:center; gap:8px; color:var(--adm-text); font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap; } .admin-brand:hover{ color:var(--adm-accent); } .admin-brand-sep{ color:var(--adm-muted); font-weight:400; } .admin-user{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--adm-muted); flex-wrap:wrap; justify-content:flex-end; } .admin-user-name{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .admin-logout{ display:inline-flex; align-items:center; gap:6px; color:var(--adm-muted); text-decoration:none; padding:6px 12px; border-radius:var(--adm-radius-sm); border:1px solid var(--adm-border); white-space:nowrap; font-weight:600; } .admin-logout:hover{ color:var(--adm-text); border-color:var(--adm-accent); background:var(--adm-surface-2); } /* Dark-Mode-Toggle, wenn er in den Header-Slot einsortiert wird (statt als schwebender Button unten rechts, siehe darkmode.js) */ #darkModeSlot{ display:inline-flex; align-items:center; } #darkModeSlot .dark-mode-toggle{ position:static; width:30px; height:30px; border-radius:var(--adm-radius-sm); background:var(--adm-surface-2); border:1px solid var(--adm-border); color:var(--adm-muted); box-shadow:none; opacity:1; } #darkModeSlot .dark-mode-toggle:hover, #darkModeSlot .dark-mode-toggle:focus-visible{ background:var(--adm-border); color:var(--adm-text); transform:none; box-shadow:none; } #darkModeSlot .dark-mode-icon{ width:16px; height:16px; display:inline-flex; } #darkModeSlot .dark-mode-icon svg{ width:16px; height:16px; } .admin-nav-bar{ background:var(--adm-surface); border-bottom:1px solid var(--adm-border); overflow-x:auto; -webkit-overflow-scrolling:touch; position:sticky; top:0; z-index:30; scrollbar-width:thin; } .admin-nav-inner{ display:flex; max-width:1280px; margin:0 auto; padding:0 8px; } .admin-nav-bar a{ display:inline-flex; align-items:center; gap:6px; padding:12px 14px; white-space:nowrap; color:var(--adm-muted); text-decoration:none !important; font-size:13.5px; font-weight:600; border-bottom:2px solid transparent; flex-shrink:0; } .admin-nav-bar a:hover{ color:var(--adm-text); background:var(--adm-surface-2); } .admin-nav-bar a.active{ color:var(--adm-accent); border-bottom-color:var(--adm-accent); } .admin-nav-bar svg{ flex-shrink:0; } /* Seiten-Titelzeile unterhalb der Nav (ersetzt die alten großen goldenen Kopfbalken) */ .admin-page-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px; } .admin-page-title{ display:flex; align-items:center; gap:10px; margin:0; font-size:22px; color:var(--adm-text); } .admin-page-title svg{ color:var(--adm-accent); flex-shrink:0; } .admin-page-actions{ display:flex; gap:8px; flex-wrap:wrap; } /* ============================================================ Layout ============================================================ */ .admin-container{ max-width:1280px; margin:0 auto; padding:24px 20px 60px; } @media (max-width:768px){ .admin-container{ padding:16px 16px 60px; } } /* ============================================================ Karten ============================================================ */ .admin-container .card, .card{ background:var(--adm-surface); border:1px solid var(--adm-border); border-radius:var(--adm-radius); box-shadow:none; } /* Eingefärbte Hinweis-Karten (Info/Warnung) – Text bleibt in --adm-text, nur der Hintergrund/Rahmen ist eingefärbt, in beiden Modi kontraststark. */ .card-info{ background:var(--adm-info-bg); border-color:var(--adm-info); } .card-warn{ background:var(--adm-warn-bg); border-color:var(--adm-warn); } /* ============================================================ Buttons – ruhig, kein Unterstrich, einheitliche Höhe ============================================================ */ .admin-container a, .admin-topbar a, .admin-nav-bar a{ text-decoration:none; } .btn, .btn-primary, .btn-danger, .btn-success{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:38px; min-height:38px; padding:0 16px; border-radius:var(--adm-radius-sm); font-size:13.5px; font-weight:600; line-height:1; cursor:pointer; text-decoration:none !important; white-space:nowrap; transition:background .15s ease, border-color .15s ease, color .15s ease; } .btn{ background:var(--adm-surface-2); border:1px solid var(--adm-border); color:var(--adm-text); } .btn:hover{ background:var(--adm-border); } .btn.primary, .btn-primary{ background:var(--adm-accent); border:1px solid var(--adm-accent); color:var(--adm-accent-text); font-weight:700; } .btn.primary:hover, .btn-primary:hover{ background:var(--adm-accent-hover); border-color:var(--adm-accent-hover); } .btn-danger{ background:var(--adm-danger-bg); border:1px solid var(--adm-danger); color:var(--adm-danger); font-weight:700; } .btn-danger:hover{ background:var(--adm-danger); color:#fff; } .btn-success{ background:var(--adm-surface-2); border:1px solid var(--adm-border); color:var(--adm-text); } .btn-success:hover{ background:var(--adm-border); } .btn-small, .btn.btn-small{ height:32px; min-height:32px; padding:0 10px; font-size:12.5px; border-radius:6px; } .btn:disabled{ opacity:.6; cursor:not-allowed; } .btn svg{ flex-shrink:0; } /* Icon-only Aktions-Buttons (Tabellen) */ .action-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--adm-radius-sm); border:1px solid var(--adm-border); background:var(--adm-surface-2); color:var(--adm-text); text-decoration:none !important; cursor:pointer; transition:background .15s ease; } .action-btn:hover{ background:var(--adm-border); } .action-btn.pdf, .action-btn.media, .action-btn.edit{ background:var(--adm-surface-2); border-color:var(--adm-border); color:var(--adm-text); } /* ============================================================ Formulare ============================================================ */ .admin-container label{ display:block; font-size:12.5px; font-weight:600; color:var(--adm-muted); margin-bottom:6px; text-transform:none; } .admin-container input[type=text], .admin-container input[type=email], .admin-container input[type=password], .admin-container input[type=number], .admin-container input[type=search], .admin-container input:not([type]), .admin-container select{ height:40px; border-radius:var(--adm-radius-sm); border:1px solid var(--adm-border); background:var(--adm-surface); color:var(--adm-text); padding:0 12px; font-size:14px; } .admin-container textarea{ border-radius:var(--adm-radius-sm); border:1px solid var(--adm-border); background:var(--adm-surface); color:var(--adm-text); padding:10px 12px; font-size:14px; } .admin-container input:focus, .admin-container select:focus, .admin-container textarea:focus{ outline:none; border-color:var(--adm-accent); box-shadow:0 0 0 3px rgba(201,163,98,.28); } .admin-container .block{ margin-bottom:16px; } /* Filter-/Formularleisten als Karten */ .filters{ background:var(--adm-surface); border:1px solid var(--adm-border); border-radius:var(--adm-radius); padding:18px; margin-bottom:24px; } /* ============================================================ Statistik-Kacheln ============================================================ */ .stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:24px; } .stat-card{ background:var(--adm-surface); border:1px solid var(--adm-border); border-radius:var(--adm-radius); padding:18px; text-align:center; } .stat-number, .stat-num{ font-size:30px; font-weight:800; color:var(--adm-accent); line-height:1.15; } .stat-label, .stat-lbl{ color:var(--adm-muted); font-size:12.5px; margin-top:4px; text-transform:uppercase; letter-spacing:.4px; } /* ============================================================ Tabellen (gilt für alle Admin-Tabellenklassen) ============================================================ */ .admin-container table{ width:100%; border-collapse:collapse; } .admin-container th, .admin-container td{ border-color:var(--adm-border); color:var(--adm-text); } .admin-container thead th, .submissions-table th, .dl-table th, .participant-table th, .dup-table th, .audit-table th, .faq-table th, .admin-table th, .history-table th{ background:var(--adm-surface-2); color:var(--adm-muted); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; overflow:visible; text-overflow:unset; padding:10px 10px; position:sticky; top:var(--adm-nav-h); z-index:5; } .admin-container tbody tr:hover{ background:var(--adm-surface-2); } .admin-container td{ overflow:hidden; text-overflow:ellipsis; } /* Aktions-Spalten immer rechtsbündig + kompakt, kein Ellipsis */ .col-action, .actions-cell, td.actions-cell{ text-align:right; overflow:visible !important; white-space:nowrap; } .col-action > div{ justify-content:flex-end; } /* Tabellen-Wrapper: horizontales Scrollen statt Umbruch */ .card > table, .submissions-table, .dl-table, .participant-table, .faq-table, .admin-table, .dup-group > div, .history-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; } @media (max-width:768px){ .admin-container table{ font-size:12.5px; } .admin-container th, .admin-container td{ padding:8px !important; } } /* ============================================================ Badges ============================================================ */ .badge{ display:inline-block; padding:3px 8px; border-radius:4px; font-size:11px; font-weight:600; text-transform:uppercase; } .badge-kueche{ background:var(--adm-success-bg); color:var(--adm-success); } .badge-service{ background:var(--adm-info-bg); color:var(--adm-info); } .badge-active{ background:var(--adm-success-bg); color:var(--adm-success); } .badge-inactive{ background:var(--adm-danger-bg); color:var(--adm-danger); } /* ============================================================ Jahres-Tabs ============================================================ */ .year-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; } .year-tab{ padding:8px 16px; border-radius:var(--adm-radius-sm); background:var(--adm-surface-2); color:var(--adm-muted); text-decoration:none !important; font-weight:600; font-size:13.5px; border:1px solid var(--adm-border); } .year-tab:hover{ background:var(--adm-border); color:var(--adm-text); } .year-tab.active{ background:var(--adm-accent); color:var(--adm-accent-text); border-color:var(--adm-accent); } /* ============================================================ Alerts / Flash-Meldungen (vereinheitlicht) ============================================================ */ .alert-success, .success, .notice, .msg-success, .result-ok{ background:var(--adm-success-bg); border:1px solid var(--adm-success); color:var(--adm-success); padding:12px 16px; border-radius:var(--adm-radius-sm); margin-bottom:16px; } .alert-error, .error, .msg-error, .result-err{ background:var(--adm-danger-bg); border:1px solid var(--adm-danger); color:var(--adm-danger); padding:12px 16px; border-radius:var(--adm-radius-sm); margin-bottom:16px; } .result-warn{ background:var(--adm-warn-bg); border:1px solid var(--adm-warn); color:var(--adm-warn); padding:12px 16px; border-radius:var(--adm-radius-sm); margin-bottom:16px; } /* ============================================================ Login-Seite (admin.php ohne Session) ============================================================ */ .login-container{ max-width:400px; margin:80px auto; padding:0 16px; } .login-container .card{ padding:28px; } .login-brand{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:4px; color:var(--adm-accent); } /* ============================================================ Diverses ============================================================ */ .admin-container hr{ border-color:var(--adm-border); } .admin-container small{ color:var(--adm-muted); } /* ============================================================ FAQ-Verwaltung (admin-faq.php, admin-faq-edit.php) ============================================================ */ .faq-table{ background:var(--adm-surface); border:1px solid var(--adm-border); border-radius:var(--adm-radius); } /* Drag-Handle für Sortierung per Drag & Drop */ .drag-handle{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--adm-radius-sm); color:var(--adm-muted); cursor:grab; touch-action:none; } .drag-handle:hover{ background:var(--adm-surface-2); color:var(--adm-text); } .drag-handle:active{ cursor:grabbing; } .drag-handle svg{ pointer-events:none; } .sortable{ cursor:default; } .sortable.dragging{ opacity:.5; background:var(--adm-surface-2); } /* Bildvorschau-Raster (Upload-Formulare) */ .image-grid{ display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; } .image-thumb{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:6px; background:var(--adm-surface-2); border:1px solid var(--adm-border); border-radius:var(--adm-radius-sm); padding:8px; } .image-thumb img{ width:120px; height:90px; object-fit:cover; border-radius:6px; border:1px solid var(--adm-border); display:block; background:var(--adm-surface); } .image-thumb label{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--adm-danger); cursor:pointer; margin:0; text-transform:none; } .image-thumb input[type=checkbox]{ width:auto; margin:0; cursor:pointer; } .upload-hint{ color:var(--adm-muted); font-size:12.5px; margin-top:6px; display:block; } .checkbox-wrapper{ display:flex; align-items:center; gap:8px; margin:16px 0; } .checkbox-wrapper input[type=checkbox]{ width:auto; margin:0; } .checkbox-wrapper label{ margin:0; } /* ============================================================ Anmeldungen (admin-anmeldungen.php) ============================================================ */ .badge-team{ background:var(--adm-info-bg); color:var(--adm-info); } .badge-neu{ background:var(--adm-info-bg); color:var(--adm-info); } .badge-ausgewaehlt{ background:var(--adm-success-bg); color:var(--adm-success); } .badge-abgelehnt{ background:var(--adm-danger-bg); color:var(--adm-danger); } /* Einreichungs-Status je Person (admin-anmeldungen.php) */ a.badge.badge-submitted, .badge-submitted{ background:var(--adm-success-bg); color:var(--adm-success); text-decoration:none !important; cursor:pointer; } a.badge.badge-submitted:hover{ background:var(--adm-success); color:#fff; } .badge-missing{ background:var(--adm-warn-bg); color:var(--adm-warn); } .badge-none{ background:var(--adm-surface-2); color:var(--adm-muted); } /* Einreichungen ohne passende Anmeldung (E-Mail-Tippfehler-Hinweis) */ .anm-orphan-box h2{ color:var(--adm-text); } .anm-orphan-list{ list-style:none; margin:10px 0 0; padding:0; font-size:13px; } .anm-orphan-list li{ padding:6px 0; border-top:1px dashed var(--adm-border); } .anm-orphan-list li:first-child{ border-top:none; } /* Kleine Zähler-Blase im Nav-Menü (z.B. Anzahl neuer Anmeldungen) */ .nav-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--adm-danger); color:#fff; font-size:10.5px; font-weight:700; line-height:18px; margin-left:2px; } /* Definitionslisten in Detail-/Vorschau-Karten (Betrieb, Person, ...) */ .anm-dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:13.5px; } .anm-dl dt{ color:var(--adm-muted); font-weight:600; } .anm-dl dd{ margin:0; color:var(--adm-text); } .anm-eigener-betrieb{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--adm-border); font-size:13.5px; } .anm-eigener-betrieb strong{ display:block; margin-bottom:6px; color:var(--adm-muted); font-size:12px; text-transform:uppercase; letter-spacing:.4px; } /* Personen-Zeilen innerhalb einer Tabellenzelle (Listenansicht) */ .anm-person-line{ padding:4px 0; font-size:13px; } .anm-person-line + .anm-person-line{ border-top:1px dashed var(--adm-border); } /* Einwilligungs-Checkliste (Detail-Ansicht) */ .anm-consent-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px; } .anm-consent-list li{ display:flex; align-items:center; gap:8px; } .anm-consent-list svg{ flex-shrink:0; color:var(--adm-success); } /* Ergebnis-Box nach Mail-Versand (Zugang senden) */ .result-box{ padding:16px 20px; border-radius:var(--adm-radius); margin-bottom:20px; } .error-list{ list-style:none; margin:8px 0 0 0; padding:0; font-size:13px; } .error-list li{ padding:3px 0; } /* ============================================================ Ausschreibung (admin-ausschreibung.php) ============================================================ */ .aus-dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0 0 16px; font-size:14px; } .aus-dl dt{ color:var(--adm-muted); font-weight:600; } .aus-dl dd{ margin:0; color:var(--adm-text); } .aus-link-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; } .aus-link-row input[type=text]{ flex:1 1 260px; min-width:0; font-family:'Courier New', monospace; font-size:13px; background:var(--adm-surface-2); } .aus-hint{ color:var(--adm-muted); font-size:13px; margin:8px 0 0; } .aus-copied{ color:var(--adm-success); font-weight:600; font-size:13px; margin-left:4px; } /* ============================================================ Medien-Übersicht + ZIP-Status (admin-medien.php, admin-media.php) ============================================================ */ .zip-status{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .zip-status-none{ background:var(--adm-surface-2); border:1px solid var(--adm-border); color:var(--adm-muted); padding:12px 16px; border-radius:var(--adm-radius-sm); margin-bottom:16px; } .med-year-card{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:16px; } .med-year-stats{ display:flex; gap:24px; flex-wrap:wrap; font-size:13.5px; color:var(--adm-muted); } .med-year-stats strong{ color:var(--adm-text); font-size:16px; } .med-explain{ font-size:13px; color:var(--adm-muted); margin:0 0 16px; line-height:1.5; } .med-explain strong{ color:var(--adm-text); }