/* Artikeldatenbank — Admin-UI (Bitrix-Reiter + Browser-Direktzugriff). Eigenständiges Stylesheet (kein Framework). Token-basiert mit Hell-/Dunkelmodus (Redesign 2026-07-15: modern & luftig, Markengrün, aufgewertete Badges/Icons). Alle Klassennamen unverändert — reines Reskin, keine Funktionsänderung. */ /* ============================ Design-Tokens ============================ */ :root { /* Flächen */ --bg: #eef1f5; --card: #ffffff; --surface-2: #f6f8fa; /* Tabellenkopf, dezente Flächen */ --border: #e4e8ee; --border-soft: #eef1f5; --row-hover: #f5f8f6; /* Text */ --text: #171a1f; --muted: #667085; /* Marke (Grüne Leuchte) */ --accent: #1a7f37; --accent-dark: #14602a; --accent-soft: #e7f4ec; --accent-fg: #ffffff; --accent-ring: rgba(26, 127, 55, .28); /* Semantik */ --red: #c02626; --red-soft: #fbeaea; --err-bg: #fdecec; --err-border: #f3c9c9; --err-text: #8a1c1c; --ok-bg: #e7f4ec; --ok-border: #bfe3cc; --ok-text: #145230; --blue-soft: #e6effc; --blue-text: #1d4f9c; --gold: #e8a413; /* Steuerelemente */ --btn-bg: #eef1f5; --btn-bg-hover: #e5e9ef; --input-bg: #ffffff; /* Form */ --radius: 14px; --radius-sm: 9px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04); --shadow-md: 0 6px 20px rgba(16,24,40,.09); --shadow-lg: 0 18px 48px rgba(16,24,40,.22); --font-head: -apple-system, "Segoe UI", Roboto, sans-serif; } /* Dunkelmodus — via (Umschalter im Header). */ :root[data-theme="dark"] { --bg: #0e1217; --card: #161b22; --surface-2: #1b222b; --border: #2a323d; --border-soft: #232a33; --row-hover: #1c2530; --text: #e6eaf0; --muted: #96a0af; --accent: #2ea043; --accent-dark: #3fb457; --accent-soft: rgba(46,160,67,.16); --accent-fg: #ffffff; --accent-ring: rgba(63,180,87,.34); --red: #f2686d; --red-soft: rgba(242,104,109,.15); --err-bg: rgba(242,104,109,.13); --err-border: rgba(242,104,109,.34); --err-text: #f6a5a8; --ok-bg: rgba(46,160,67,.13); --ok-border: rgba(46,160,67,.34); --ok-text: #7ee0a0; --blue-soft: rgba(88,150,240,.16); --blue-text: #9cc0f5; --gold: #f0b23c; --btn-bg: #232b35; --btn-bg-hover: #2b343f; --input-bg: #10151b; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 18px 48px rgba(0,0,0,.6); } /* ============================ Grundlagen ============================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } body, .card, .btn, .input, .tbl-wrap, .tab, .badge, .theme-toggle { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } ::selection { background: var(--accent-soft); } #app { max-width: none; margin: 0 auto; padding: 20px 26px 56px; } .boot-hint { color: var(--muted); padding: 32px; text-align: center; } /* ============================ Header ============================ */ .hdr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 20px; } .hdr h1 { font-family: var(--font-head); font-size: 21px; font-weight: 750; margin: 0; letter-spacing: -.01em; } .hdr .who { color: var(--muted); font-size: 13px; margin-left: auto; } .hdr .counts { color: var(--muted); font-size: 12px; width: 100%; margin-top: 2px; } /* Hell/Dunkel-Umschalter */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer; box-shadow: var(--shadow-sm); flex: 0 0 auto; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* ============================ Tabs ============================ */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; } .tab { border: none; background: none; padding: 9px 15px; font-size: 14px; cursor: pointer; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; font-weight: 650; border-radius: 8px 8px 0 0; } .tab:hover { color: var(--text); background: var(--row-hover); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); background: transparent; } /* ============================ Buttons ============================ */ .btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 640; padding: 8px 15px; background: var(--btn-bg); color: var(--text); line-height: 1.2; } .btn:hover:not(:disabled) { background: var(--btn-bg-hover); } .btn:active:not(:disabled) { transform: translateY(.5px); } .btn:disabled { opacity: .5; cursor: default; } .btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-sm); } .btn-primary:hover:not(:disabled) { background: var(--accent-dark); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover:not(:disabled) { background: var(--row-hover); border-color: var(--muted); } .btn-red { background: transparent; border-color: var(--border); color: var(--red); } .btn-red:hover:not(:disabled) { background: var(--red-soft); border-color: var(--red); } .btn-sm { font-size: 13px; padding: 5px 11px; border-radius: 7px; } /* ============================ Inputs ============================ */ .input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 14px; background: var(--input-bg); color: var(--text); font-family: inherit; } .input::placeholder { color: var(--muted); opacity: .8; } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } select.input { cursor: pointer; } textarea.input { resize: vertical; } .input-group { margin-bottom: 8px; } .input-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 650; } .row { display: flex; gap: 8px; } .row > * { flex: 1; min-width: 0; } label.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; color: var(--text); } label.check input { accent-color: var(--accent); width: 15px; height: 15px; } /* Lupe im Such-Eingabefeld (nur Text-Input der Toolbar, nicht die Selects) */ .toolbar input.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 16px; padding-left: 36px; } /* ============================ Karten / Boxen ============================ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .error-box { background: var(--err-bg); border: 1px solid var(--err-border); color: var(--err-text); border-radius: var(--radius-sm); padding: 10px 13px; margin: 8px 0; font-size: 13px; white-space: pre-wrap; } .ok-box { background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text); border-radius: var(--radius-sm); padding: 10px 13px; margin: 8px 0; font-size: 13px; white-space: pre-wrap; } /* ============================ Badges ============================ */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; border-radius: var(--radius-pill); padding: 2px 10px; background: var(--surface-2); color: var(--muted); white-space: nowrap; border: 1px solid var(--border-soft); } .badge-green { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; } .badge-muted { background: var(--surface-2); color: var(--muted); } .badge-blue { background: var(--blue-soft); color: var(--blue-text); border-color: transparent; } .muted { color: var(--muted); } .small { font-size: 12px; } /* ============================ Tabelle ============================ */ .tbl-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; } .tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 11px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; z-index: 1; font-weight: 700; } .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .tbl tbody tr { transition: background-color .12s ease; } .tbl tbody tr:hover td { background: var(--row-hover); } .tbl tr:last-child td { border-bottom: none; } .tbl tr.inactive td { opacity: .5; } .tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .tbl td.vk { font-weight: 750; } .tbl .actions { white-space: nowrap; text-align: right; } .tbl .actions .btn { margin-left: 4px; } .fav-star { font-size: 15px; } /* ============================ Modal ============================ */ .gal-light { position: fixed; inset: 0; background: rgba(12, 16, 22, .55); z-index: 50; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 8px; backdrop-filter: blur(2px); } .modal { width: 100%; max-width: 460px; margin: 0 auto; box-shadow: var(--shadow-lg); } /* ============================ Spinner ============================ */ .spinner { width: 26px; height: 26px; margin: 28px auto; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: ap-spin .8s linear infinite; } @keyframes ap-spin { to { transform: rotate(360deg); } } /* ============================ Toolbar ============================ */ .toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .toolbar .input { flex: 1; min-width: 220px; width: auto; } .bottom-pad { height: 30px; }