/* 🎨 Supernova IT – Modernes Dashboard Style Autor: Rafael Otto Version: 1.1 – unified / stable */ /* β”œβ”€ header.main-header β”œβ”€ main.main-layout β”‚ β”œβ”€ aside.sidebar β”‚ └─ section.dashboard-content β”‚ └─ div.content-surface ← πŸ‘ˆ DAS IST DEINE SEITE β”‚ β”œβ”€ h2.page-title β”‚ β”œβ”€ table / form / cards β”‚ └─ ... └─ footer.footer */ /* ================================================== 🎨 DESIGN TOKENS ================================================== */ :root { /* Typography */ --font-main: "Inter", "Segoe UI", Tahoma, sans-serif; /* Text */ --text-main: #2e2f33; --text-muted: #6b7280; /* Base */ --bg: #f1f3f5; /* Surface system */ --surface-bg: #f6f7f8; --surface-border: #dcdfe3; --surface-radius: 10px; /* Brand */ --primary: #616168; --primary-dark: #bfc4ca; --button-colour: #bfc4ca; /* Navigation */ --nav-hover-bg: #e9ebef; --nav-active-bg: #e1e4e8; /* Sidebar */ --sidebar-hover: #e9ebef; --sidebar-active: #e1e4e8; /* Effects */ --shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* TABLE HEADER – ENTERPRISE */ --table-head-bg: #eceff3; --table-head-border: #d5d9df; --table-head-text: #4b5563; } /* ================================================== 🌐 GLOBAL RESET ================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 1px; } body { font-family: var(--font-main); background: var(--bg); color: var(--text-main); display: flex; flex-direction: column; } /* ================================================== πŸ” LOGIN – ENTERPRISE STYLE ================================================== */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); } .login-container { width: 340px; padding: 28px 32px; background: var(--surface-bg); border: 1px solid var(--surface-border); border-radius: var(--surface-radius); text-align: center; } .login-container h2 { margin-bottom: 18px; font-size: 18px; font-weight: 600; } .login-container input { width: 100%; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--surface-border); border-radius: 8px; font-size: 14px; } .login-container input:focus { outline: none; border-color: var(--primary); } .login-container button { width: 100%; margin-top: 14px; padding: 10px; font-size: 14px; font-weight: 600; background: var(--button-colour); color: #fff; border: none; border-radius: 8px; cursor: pointer; } .login-container button:hover { background: var(--primary-dark); } .login-container .error { margin-top: 12px; font-size: 13px; color: #c0392b; } /* ================================================== 🧭 HEADER ================================================== */ .main-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; height: 48px; background: var(--surface-bg); border: 0px solid var(--surface-border); border-radius: var(--surface-radius); } .main-header .logo { font-size: 12px; font-weight: 600; } .main-header .welcome { font-size: 12px; color: var(--text-muted); } .main-header nav { display: flex; gap: 6px; } .main-header nav a { padding: 6px 10px; font-size: 12px; text-decoration: none; color: var(--text-main); border-radius: 6px; } .main-header nav a:hover { background: var(--nav-hover-bg); } .main-header nav a.active { background: var(--nav-active-bg); font-weight: 600; } /* ================================================== 🧱 MAIN LAYOUT ================================================== */ .main-layout { flex: 1; display: flex; gap: 1px; padding: 1px; } /* ================================================== 🧩 SIDEBAR ================================================== */ .sidebar { width: 220px; padding: 10px; background: var(--surface-bg); border: 0px solid var(--surface-border); border-radius: var(--surface-radius); } .sidebar h3 { margin-bottom: 15px; font-size: 14px; font-weight: 600; color: var(--text-main); text-transform: uppercase; } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar li { margin-bottom: 4px; } .sidebar a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px; text-decoration: none; color: var(--text-main); } .sidebar a:hover { background: var(--sidebar-hover); } .sidebar a.active { background: var(--sidebar-active); font-weight: 600; } /* ================================================== πŸ“„ DASHBOARD CONTENT ================================================== */ .dashboard-content { flex: 1; padding: 10px; background: var(--surface-bg); border: 0px solid var(--surface-border); border-radius: var(--surface-radius); min-height: 600px; } /* ======================= πŸ“„ CONTENT SURFACE in dashboard ======================= */ .content-surface { background: var(--surface-bg); border: 0px solid var(--surface-border); border-radius: var(--surface-radius); padding: 15px; min-height: 560px; color: var(--surface-text); font-family: inherit; } /* Seitentitel */ .page-title { margin: 0 0 18px; font-size: 18px; font-weight: 600; color: var(--surface-text); } /* font1 */ .page-font1 { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; text-decoration: none; color: var(--text-main); } /* font-form */ .page-font-form { font-size: 14px; text-decoration: none; color: var(--text-main); } /* hr */ .page-hr1 { border: none; border-top: 1px solid var(--surface-border); margin-left: 0; /* πŸ‘ˆ Links ausrichten */ margin-right: auto; width: 900px; } /* hr */ .page-hr100 { border: none; border-top: 1px solid var(--surface-border); margin-left: 0; /* πŸ‘ˆ Links ausrichten */ margin-right: auto; width: 100%; } /* klein schrift */ .page-kleinschrift { font-size: 13px; color: var(--text-main); margin-top: 10px; } /* ================================================== βš“ FOOTER ================================================== */ .footer { margin: 1px; padding: 12px; background: var(--surface-bg); border: 0px solid var(--surface-border); border-radius: var(--surface-radius); text-align: center; font-size: 12px; color: var(--text-muted); } /* ======================= πŸ”Ή ICONS – TECHNISCH & DEZENT (β‰ˆ30% kleiner) ======================= */ .material-symbols-outlined { font-variation-settings: "wght" 300, "opsz" 18; /* β¬… kleiner & feiner */ font-size: 11px; /* β¬… 30% kleiner als 16px */ line-height: 1; vertical-align: middle; } .icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; /* β¬… proportional verkleinert */ min-width: 14px; /* verhindert Textspringen */ margin-right: 6px; color: var(--sidebar-muted); } /* ================================================== πŸ“± RESPONSIVE ================================================== */ @media (max-width: 900px) { .main-layout { flex-direction: column; } .sidebar { width: 100%; } } /* ======================= πŸ“Š TABLES – ENTERPRISE / SUPERnova IT ======================= */ .table-container { background: var(--card-bg); border: 1px solid var(--sidebar-border); border-radius: 10px; overflow-x: auto; overflow-y: hidden; margin-top: 12px; margin-left: 35px; } /* TABLE */ .modern-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; color: var(--text); } /* ======================= HEADER ======================= */ .modern-table thead { background: var(--table-head-bg); } .modern-table thead th { padding: 10px 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; color: var(--table-head-text); border-bottom: 1px solid var(--table-head-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ======================= BODY ======================= */ .modern-table tbody td { padding: 8px 8px; vertical-align: top; border-bottom: 1px solid rgba(0, 0, 0, 0.05); color: var(--text); word-break: break-word; } /* Zebra – extrem dezent */ .modern-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.015); } /* Hover – enterprise, kein Blau */ .modern-table tbody tr:hover { background: var(--sidebar-hover); } /* ======================= ACTION ICONS – TABLE ======================= */ .modern-table .btn-edit, .modern-table .btn-delete-table { padding: 4px 6px; border-radius: 6px; font-size: 12px; background: transparent !important; border: 1px solid var(--sidebar-border); color: var(--sidebar-muted); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* Hover – identisch zur Sidebar */ .modern-table .btn-edit:hover { background: #d7f1df !important; color: #18612e; } .modern-table .btn-delete-table:hover { background: #f3dede !important; color: #a94442; } /* ICONS selbst */ .modern-table .material-symbols-outlined { font-size: 18px; /* exakt wie Sidebar */ color: inherit; line-height: 1; } /* ======================= EMPTY / PLACEHOLDER ======================= */ .modern-table td:empty::after { content: "β€”"; color: #aaa; } /* ======================= πŸ” AJAX SEARCH ======================= */ .search-bar { display: flex; align-items: center; gap: 8px; width: 260px; padding: 6px 10px; background: var(--card-bg); border: 1px solid var(--sidebar-muted); border-radius: 8px; margin-bottom: 12px; } /* Icon links */ .search-bar .search-icon { font-size: 14px; color: var(--text); } /* Input */ .search-bar input { border: none; outline: none; background: transparent; width: 100%; font-size: 14px; color: var(--text); } /* Placeholder */ .search-bar input::placeholder { color: var(--sidebar-muted); } /* Fokus – dezenter Enterprise-Fokus */ .search-bar:focus-within { border-color: var(--primary); background: #fff; } /* ======================= 🧾 FORMS – ENTERPRISE ======================= */ .profile-form { /*max-width: 700px;*/ border: 1px solid var(--surface-border, #dcdfe3); border-radius: var(--radius); background: var(--card-bg); border-radius: var(--surface-radius); padding: 25px; margin-left: 35px; } /* 2-Spalten-Grid */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } /* Label */ .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--sidebar-muted); margin-bottom: 4px; } /* Text Inputs & Textareas */ .form-group input:not([type="checkbox"]), .form-group textarea { width: 100%; padding: 9px 10px; font-size: 14px; color: var(--text); background: #fff; border: 1px solid var(--sidebar-border); border-radius: 8px; } .form-group textarea { resize: vertical; min-height: 64px; } /* Fokus */ .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); } /* Disabled */ .form-group input:disabled { background: #f4f5f7; color: #888; } /* Action Bar */ .form-actions { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--sidebar-border); display: flex; justify-content: flex-start; } /* Checkbox Group */ .checkbox-group { padding: 10px 0; } /* Checkbox Row */ .checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer; } /* Checkbox selbst */ .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } /* Mobile */ @media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } } /* ======================= πŸ“‘ PAGINATION – ENTERPRISE ======================= */ .pagination { margin-top: 16px; display: flex; justify-content: flex-end; gap: 6px; } /* Basis */ .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; font-size: 12px; font-weight: 500; color: var(--text-main); background: var(--surface-bg); border: 1px solid var(--surface-border); border-radius: 8px; text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } /* Hover – identisch Sidebar */ .page-btn:hover { background: var(--sidebar-hover); } /* Aktiv */ .page-btn.active { background: var(--sidebar-active); font-weight: 600; border-color: var(--primary); } /* Disabled-Zustand (optional, falls spΓ€ter genutzt) */ .page-btn.disabled { opacity: 0.4; pointer-events: none; } /* Pfeile etwas dezenter */ .page-btn:first-child, .page-btn:last-child { font-size: 11px; } /* ======================= zwei columns links form recht infocard ======================= */ .customer-edit-layout { display: flex; align-items: flex-start; gap: 24px; } /* linke Spalte */ .customer-edit-main { flex: 1; max-width: 600px; } /* ======================= ℹ️ INFO CARD – ENTERPRISE ======================= */ .info-card { flex: 0 0 40%; margin-left: 55px; background: var(--surface-bg); border: 1px solid var(--surface-border); border-radius: var(--surface-radius); padding: 16px 18px; box-shadow: var(--shadow); font-size: 13px; color: var(--text-main); } /* Titel */ .info-card h4 { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--text-main); } /* Einzelne Info-Zeile */ .info-item { margin-bottom: 12px; } /* Label */ .info-item b { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2px; } /* Text */ .info-item span, .info-item div { font-size: 13px; } /* Code / technische IDs */ .info-card code { display: inline-block; padding: 3px 6px; background: #eef0f3; border: 1px solid var(--surface-border); border-radius: 6px; font-size: 12px; color: #333; } /* Trennlinie */ .info-card hr { border: none; border-top: 1px dashed var(--surface-border); margin: 14px 0; } /* Hinweis / ErklΓ€rung */ .info-hint { margin-top: 10px; font-size: 12px; color: var(--text-muted); line-height: 1.4; } /* Leerer Zustand */ .info-empty { font-size: 12px; color: var(--text-muted); } /* ======================= πŸ€– BOT TABS – ENTERPRISE ======================= */ .bot-tab-btn { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; margin-bottom: 6px; padding: 6px 10px; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--text-main); background: var(--surface-bg); border: 1px solid var(--surface-border); border-radius: 8px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* Hover – identisch zu Sidebar */ .bot-tab-btn:hover { background: var(--sidebar-hover); border-color: var(--surface-border); color: var(--text-main); } /* πŸ”₯ AKTIVER BOT – ruhig & klar */ .bot-tab-btn.active { background: var(--sidebar-active); border-color: var(--surface-border); color: var(--text-main); font-weight: 600; } /* kleine Zusatzinfos im Button */ .bot-tab-btn small { font-size: 11px; color: var(--text-muted); } /* active small */ .bot-tab-btn.active small { color: var(--text-main); } /* ---------------------------------------------------- das ist teil fΓΌr dialoge, sieht wie in whatsapp -------------------------------------------------------*/ .chat-container { display: flex; flex-direction: column; gap: 12px; max-height: 680px; overflow-y: auto; padding: 14px; background: #f4f5f7; border: 1px solid #e0e2e6; border-radius: 10px; } /* Zeile */ .chat-row { display: flex; } .chat-row.user { justify-content: flex-start; } .chat-row.assistant { justify-content: flex-end; } /* Bubble */ .chat-bubble { max-width: 75%; background: #ededed; border-radius: 12px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: background 0.15s ease, box-shadow 0.15s ease; } /* Assistant leicht dunkler */ .chat-row.assistant .chat-bubble { background: #e1e3e6; } /* Hover – sehr dezent */ .chat-bubble:hover { background: #e6e7ea; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } /* Header: Rolle + Zeit */ .chat-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 6px; color: #5f6368; } /* Rolle */ .chat-role { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } /* Zeitstempel – volle Zeit */ .chat-time { font-size: 11px; color: #7a7f87; white-space: nowrap; } /* Text */ .chat-text { font-size: 14px; line-height: 1.5; color: #2b2b2b; white-space: pre-wrap; word-break: break-word; } .chat-gap { text-align: center; font-size: 11px; color: #999; margin: 14px 0; font-style: italic; } /* ======================= πŸ”˜ LINK BUTTON – ENTERPRISE ======================= */ .btn-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--text-muted); background: #f1f3f5; border: 1px solid var(--surface-border); border-radius: 8px; cursor: pointer; box-sizing: border-box; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* Hover – wie btn-edit */ .btn-link:hover { background: var(--primary-dark); color: #fff; } /* Fokus – ruhig */ .btn-link:focus { outline: none; } /* Besuchte Links nicht einfΓ€rben */ .btn-link:visited { color: inherit; } /* ========================== βš™οΈ FUNCTIONS – ENTERPRISE ========================== */ .functions-section { margin-top: 20px; } /* Liste */ .functions-list { margin-top: 12px; max-width: 680px; } /* Einzelne Funktion */ .function-item { padding: 10px 0 12px; border-top: 1px solid var(--sidebar-border); } /* Checkbox-Zeile */ .checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; } /* Checkbox selbst */ .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } /* Funktionsname */ .function-name { user-select: none; } /* Beschreibung */ .function-desc { margin-left: 26px; margin-top: 2px; font-size: 13px; color: #666; line-height: 1.4; } /* Letzte Linie nicht doppeln */ .function-item:first-child { border-top: none; }