/* Kachelwerk — gemeinsames Design-System für die Web-Oberfläche. Bewusst ohne Build-Schritt (kein Vite/Tailwind) — ein statisches CSS. Schriftart bewusst einheitlich Avenir auf der ganzen Seite (siehe Chat). Avenir selbst ist lizenzpflichtig und steht auf keinem freien Font-CDN — greift also nur, wenn es lokal auf dem Gerät installiert ist (z. B. viele Macs von Haus aus). Fallback: Poppins (Google Fonts, im Layout- eingebunden), geometrisch verwandt zu Avenir, frei lizenziert. */ :root{ --paper:#F2F5EF; --paper-raised:#FFFFFF; --ink:#1B231F; --muted:#5B655D; --line:#E1E7DD; --accent:#6A2662; --accent-ink:#4A1A44; --accent-soft:#F1E3EE; --warn:#8A5A16; --warn-soft:#F5E9D6; --flag:#8C2B2B; --flag-soft:#F5E1E1; --sidebar-bg:#602F69; --sidebar-ink:#F2E9EF; --sidebar-muted:#A98CA0; --sidebar-active:#3A1E38; --shadow-sm: 0 1px 2px rgba(18,32,25,.06); --shadow-md: 0 10px 30px -18px rgba(18,32,25,.35); --radius: 10px; } *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:Avenir, 'Avenir Next', 'Poppins', sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } h1,h2,h3{ font-weight:700; letter-spacing:-0.01em; margin:0; } code, .mono{ font-family:inherit; } a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; } /* --- App-Shell: dunkle Sidebar + heller Inhaltsbereich ---------------------------------- */ .app-shell{ display:flex; min-height:100vh; } .sidebar{ width:266px; flex:none; background:var(--sidebar-bg); color:var(--sidebar-ink); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:22px 14px; } .brand{ padding:6px 10px 16px; border-bottom:1px solid rgba(234,242,236,0.1); margin-bottom:18px; } .brand-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; } .brand-mark{ width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg, #A6488F, var(--accent)); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:15px; flex:none; } .brand-row strong{ font-size:16px; font-weight:700; color:var(--sidebar-ink); } .brand-sub{ display:flex; flex-direction:column; gap:1px; padding-left:2px; } .brand-sub span{ font-size:11px; color:var(--sidebar-muted); white-space:nowrap; } .nav{ display:flex; flex-direction:column; gap:2px; } .nav-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:var(--sidebar-ink); font-size:13.5px; font-weight:500; opacity:0.85; } .nav-item svg{ width:17px; height:17px; flex:none; opacity:0.85; } .nav-item:hover{ background:rgba(234,242,236,0.06); text-decoration:none; opacity:1; } .nav-item.active{ background:var(--sidebar-active); opacity:1; box-shadow:inset 2px 0 0 var(--accent); } .nav-item.disabled{ opacity:0.38; cursor:default; } .nav-item.disabled:hover{ background:none; } .nav-tag{ margin-left:auto; font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase; background:rgba(234,242,236,0.1); padding:1px 6px; border-radius:99px; } .sidebar-footer{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(234,242,236,0.1); } .sidebar-user{ font-size:12px; color:var(--sidebar-muted); padding:0 12px 8px; } .logout-btn{ width:100%; border:none; background:none; cursor:pointer; font-family:inherit; text-align:left; } /* --- Hauptbereich ------------------------------------------------------------------------ */ .main{ flex:1; min-width:0; display:flex; flex-direction:column; } .topbar{ padding:20px 32px; background:var(--paper-raised); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; position:sticky; top:0; z-index:5; } .topbar-title{ display:flex; flex-direction:column; gap:2px; } .topbar-title h1{ font-size:20px; } .topbar-title .crumb{ font-size:12px; color:var(--muted); } .topbar-title .crumb a{ color:var(--muted); } .content{ padding:28px 32px 48px; max-width:2180px; width:100%; } /* --- Bausteine ----------------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; padding:9px 16px; border-radius:8px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); transition:opacity .12s; } .btn:hover{ opacity:0.85; text-decoration:none; } .btn:disabled{ opacity:0.45; cursor:default; } .btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; } .btn-ghost{ background:transparent; } .btn-sm{ padding:6px 11px; font-size:12.5px; border-radius:6px; } .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:14px; margin-bottom:28px; } .stat-tile{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); } .stat-tile .label{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); } .stat-tile .value{ font-size:30px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; } .stat-tile .value.accent{ color:var(--accent-ink); } .stat-tile .value.flag{ color:var(--flag); } .card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .status-banner{ background:var(--accent-soft); color:var(--accent-ink); padding:11px 16px; border-radius:8px; font-size:13.5px; margin-bottom:20px; } table.runs{ width:100%; border-collapse:collapse; font-size:13.5px; } table.runs th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:600; padding:12px 16px; border-bottom:1px solid var(--line); } table.runs td{ padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle; } table.runs tr:last-child td{ border-bottom:none; } table.runs tr:hover td{ background:var(--paper); } .run-id{ font-weight:600; color:var(--accent-ink); } .run-id-sub{ font-size:11px; color:var(--muted); margin-top:2px; } .trigger-form{ display:flex; gap:8px; } .input-sm{ font-family:inherit; font-size:13.5px; padding:9px 12px; border-radius:8px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); min-width:200px; } .input-sm:focus{ outline:2px solid var(--accent); outline-offset:-1px; } .pill{ display:inline-flex; align-items:center; font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px; margin-right:4px; white-space:nowrap; } .pill-offen{ background:var(--warn-soft); color:var(--warn); } .pill-frei{ background:var(--accent-soft); color:var(--accent-ink); } .pill-fehler{ background:var(--flag-soft); color:var(--flag); } /* Klickbare Pille (z. B. Lauf löschen) — optisch identisch zu den -Pillen oben, nur mit Button-Reset (kein Rahmen/Hintergrund von der Browser-Vorlage, Zeiger-Cursor). */ .pill-btn{ border:none; font-family:inherit; cursor:pointer; } .pill-btn:hover{ filter:brightness(0.94); } /* Zentrales Bestätigungs-Popup (ersetzt natives confirm(), siehe layouts/kachelwerk.blade.php) */ .modal-overlay{ position:fixed; inset:0; background:rgba(18,32,25,0.55); display:flex; align-items:center; justify-content:center; z-index:100; } .modal-box{ background:var(--paper-raised); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:24px 28px; max-width:420px; width:calc(100% - 40px); } .modal-box p{ margin:0 0 20px; font-size:14px; line-height:1.5; } .modal-actions{ display:flex; justify-content:flex-end; gap:10px; } .empty-state{ text-align:center; padding:64px 20px; color:var(--muted); font-size:14px; } .empty-state svg{ margin-bottom:14px; opacity:0.5; } /* Apotheken-Logo-Vorschau — geteilt zwischen Übersicht und Bearbeiten-Formular */ .brand-logo-wrap{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; padding:14px; overflow:hidden; } .brand-logo{ max-width:100%; max-height:100%; object-fit:contain; display:block; } /* --- Freigabe-Grid (show.blade.php) --------------------------------------------------------- */ .thema{ margin-bottom:38px; } .thema-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; } .thema-head h2{ font-size:18px; } .thema-id{ font-size:11.5px; color:var(--muted); font-weight:400; } .thema-feedback{ display:flex; gap:10px; align-items:flex-start; background:var(--accent-soft); border:1px solid var(--accent); border-radius:8px; padding:10px 12px; margin-bottom:16px; } .thema-feedback-input{ flex:1; font-family:inherit; font-size:12.5px; border:1px solid var(--line); border-radius:6px; padding:7px 9px; resize:vertical; background:var(--paper-raised); } .thema-feedback .theme-regen-btn{ flex-shrink:0; white-space:nowrap; } .tile-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:18px; } .tile{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .15s, outline-color .15s; outline:2px solid transparent; outline-offset:-1px; display:flex; flex-direction:column; } .tile.is-approved{ outline-color:var(--accent); } .tile-thumb{ position:relative; aspect-ratio:1/1; background:#e8ece4; } .tile-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .tile-thumb.is-error{ display:flex; align-items:center; justify-content:center; background:var(--flag-soft); } .tile-error-note{ font-size:12px; color:var(--flag); padding:14px; text-align:center; } .tile-busy{ position:absolute; inset:0; background:rgba(18,32,25,0.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; } .tile-body{ padding:14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; } .tile-kunde{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; font-size:13px; font-weight:600; } .tile-kunde-id{ line-height:1.3; } .tile-status{ font-size:10px; padding:2px 7px; border-radius:4px; background:var(--accent-soft); color:var(--accent-ink); } .tile-status.offen{ background:var(--warn-soft); color:var(--warn); } .tile-feedback{ width:100%; font-family:inherit; font-size:12.5px; border:1px solid var(--line); border-radius:6px; padding:7px 9px; resize:vertical; background:var(--paper); } .tile-actions{ display:flex; gap:6px; margin-top:auto; } .tile-actions .btn{ flex:1; justify-content:center; }