/* OPS – Heinks GmbH design system Brand palette derived from heinks-gmbh.de logo + site CSS. Dark theme is default; switch via . */ /* ─── Dark theme (default) ─── */ :root { /* Brand (slightly brighter on dark) */ --brand: #2589e6; --brand-2: #62a8ec; --brand-dark: #0c66c7; --brand-50: #112a44; --brand-100: #163556; --accent: #f5b400; --danger: #ef5350; --danger-50: #3a1a1a; --success: #4ade80; --success-50: #163326; /* Neutrals (dark surfaces) */ --ink: #e6edf6; --ink-2: #cbd5e1; --muted: #94a3b8; --muted-2: #64748b; --border: #1f2a3d; --border-2: #2a3548; --bg: #0a1322; --card: #121d31; --card-2: #0e1828; /* subtly different surface */ --header-bg: #0e1828; --table-row-hover: #18243a; --row-stripe: #0f192b; /* Pills (dark variants) */ --pill-bg: #1d2a40; --pill-fg: var(--muted); --pill-open-bg: #3a2f12; --pill-open-fg: #f5d77a; --pill-paid-bg: #14342a; --pill-paid-fg: #6cdfa9; --pill-warn-bg: #3a2f12; --pill-warn-fg: #f5d77a; --pill-mahn1-bg: #3a2f12; --pill-mahn1-fg: #f5d77a; --pill-mahn2-bg: #3a2010; --pill-mahn2-fg: #f5a576; --pill-mahn3-bg: #3a1a1a; --pill-mahn3-fg: #f08a8a; --pill-mahn4-bg: #6d1818; --pill-mahn4-fg: #fff; /* Money colors */ --offen-fg: #f5b66c; --overdue-bg: #3a1a1a; --overdue-bg-h: #4d2020; --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.45); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); --radius: 10px; --radius-sm: 6px; } /* ─── Light theme override ─── */ html[data-theme="light"] { --brand: #004A94; --brand-2: #1E78D6; --brand-dark: #00316A; --brand-50: #e8f1fb; --brand-100: #d0e2f7; --accent: #f5b400; --danger: #c1272d; --danger-50: #fdeaea; --success: #1f8a4c; --success-50: #e7f6ec; --ink: #0f172a; --ink-2: #1e293b; --muted: #64748b; --muted-2: #94a3b8; --border: #e2e8f0; --border-2: #cbd5e1; --bg: #f4f7fb; --card: #ffffff; --card-2: #ffffff; --header-bg: #ffffff; --table-row-hover: #f8fafc; --row-stripe: #fbfcfd; --pill-bg: #eef2f7; --pill-fg: #64748b; --pill-open-bg: #fff5cf; --pill-open-fg: #855e00; --pill-paid-bg: #e7f6ec; --pill-paid-fg: #1f8a4c; --pill-warn-bg: #fff5cf; --pill-warn-fg: #855e00; --pill-mahn1-bg: #fff5cf; --pill-mahn1-fg: #855e00; --pill-mahn2-bg: #ffe0c2; --pill-mahn2-fg: #8a3a08; --pill-mahn3-bg: #fbd0d0; --pill-mahn3-fg: #862024; --pill-mahn4-bg: #7f1d1d; --pill-mahn4-fg: #fff; --offen-fg: #a06a00; --overdue-bg: #fdeaea; --overdue-bg-h: #fcd5d5; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06); --shadow-md: 0 4px 12px rgba(15, 23, 42, .08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, .14); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-dark); } /* ────────── App header / brand bar ────────── */ .app-header { background: var(--header-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 0 24px; display: flex; align-items: stretch; height: 64px; position: sticky; top: 0; z-index: 50; } .app-header .brand { display: flex; align-items: center; gap: 14px; padding-right: 28px; border-right: 1px solid var(--border); margin-right: 4px; } .app-header .brand img.logo { height: 36px; width: auto; display: block; } .app-header .brand .app-name { font-weight: 700; font-size: 13px; color: var(--brand); letter-spacing: .04em; text-transform: uppercase; } .app-header .brand .app-name small { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; } .app-header nav.tabs { display: flex; align-items: stretch; flex: 1; gap: 2px; padding-left: 8px; } .app-header nav.tabs a { display: flex; align-items: center; padding: 0 18px; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; transition: color .12s, border-color .12s, background .12s; } .app-header nav.tabs a:hover { color: var(--ink); background: var(--brand-50); } .app-header nav.tabs a.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--muted); cursor: pointer; font-size: 16px; transition: color .12s, border-color .12s, background .12s; padding: 0; } .theme-toggle:hover { color: var(--brand); border-color: var(--brand); } html[data-theme="light"] .theme-toggle .sun { display: none; } html[data-theme="light"] .theme-toggle .moon { display: inline; } .theme-toggle .moon { display: none; } .theme-toggle .sun { display: inline; } .app-header .user { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--border); } .app-header .user .role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 4px; } .app-header .user .role.admin { background: var(--accent); color: #5b4400; } .app-header .user .role.benutzer { background: var(--brand-50); color: var(--brand); } .app-header .user .role.zuordner { background: #d6f5e6; color: #0d5c30; } .app-header .user .role.buchhaltung { background: #ede4fb; color: #5b21b6; } html:not([data-theme="light"]) .app-header .user .role.zuordner { background: #163326; color: #6cdfa9; } html:not([data-theme="light"]) .app-header .user .role.buchhaltung { background: #2b1b4a; color: #c4b1f5; } .app-header .user .name { font-weight: 600; color: var(--ink); } .app-header .user a.logout { font-size: 13px; color: var(--muted); padding: 6px 10px; border-radius: var(--radius-sm); } .app-header .user a.logout:hover { color: var(--danger); background: var(--danger-50); } /* ────────── Layout ────────── */ main { padding: 22px 24px; max-width: 1600px; } .page-meta { color: var(--muted); font-size: 12px; margin-top: -8px; margin-bottom: 16px; } /* ────────── Forms / Toolbar ────────── */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; background: var(--card); padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } input:not([type]), input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=url], input[type=color], select, textarea { padding: 8px 11px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: var(--card); color: var(--ink); transition: border-color .12s, box-shadow .12s; } .toolbar input[type=text] { min-width: 280px; } .grid-form input, .grid-form select, .edit-grid input, .edit-grid select { width: 100%; min-width: 0; } .grid-form > div, .edit-grid > div { min-width: 0; } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 137, 230, .18); } /* Native select with custom chevron — readable in both themes */ select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; color: var(--ink); } select option { background: var(--card); color: var(--ink); } input[type=color] { padding: 3px; height: 38px; cursor: pointer; width: 60px; } label { font-size: 13px; color: var(--ink-2); } button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--brand); background: var(--brand); color: #fff; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-family: inherit; font-weight: 500; text-decoration: none; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; height: 38px; } button:hover, .btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); } .btn.secondary, button.secondary { background: var(--card); color: var(--brand); border-color: var(--border-2); } .btn.secondary:hover, button.secondary:hover { background: var(--brand-50); color: var(--brand-dark); border-color: var(--brand); } .btn.danger, button.danger { background: var(--danger); border-color: var(--danger); } .btn.danger:hover, button.danger:hover { background: #962023; border-color: #962023; } /* ────────── Stats cards ────────── */ .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; } .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-2); } .stat.warn::before { background: var(--accent); } .stat.danger::before { background: var(--danger); } .stat .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .stat .v { font-size: 20px; font-weight: 700; margin-top: 4px; color: var(--ink); font-variant-numeric: tabular-nums; } .stat .v.warn { color: var(--offen-fg); } .stat .v.danger { color: var(--danger); } /* ────────── Generic card ────────── */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .card h2 { margin: 0 0 16px; font-size: 15px; color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .section-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin: 22px 0 8px; } /* ────────── Messages ────────── */ .msg { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; display: flex; align-items: center; gap: 8px; } .msg.ok { background: var(--success-50); color: var(--success); border-left: 3px solid var(--success); } .msg.err { background: var(--danger-50); color: var(--danger); border-left: 3px solid var(--danger); } /* ────────── Tables ────────── */ table.data { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); font-size: 13px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } table.data th, table.data td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; } table.data tr:last-child td { border-bottom: 0; } table.data th { background: var(--row-stripe); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); user-select: none; } table.data th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } table.data th a:hover { color: var(--brand); } table.data tr:hover td { background: var(--table-row-hover); } table.data td.num { text-align: right; font-variant-numeric: tabular-nums; } table.data td.zero { color: var(--muted-2); } table.data td.offen { color: var(--offen-fg); font-weight: 600; } table.data tr.overdue td { background: var(--overdue-bg) !important; color: var(--danger); } table.data tr.overdue:hover td { background: var(--overdue-bg-h) !important; } table.data tr.overdue td.offen { color: var(--danger); } table.data tr.overdue td a.row-link { color: var(--danger); font-weight: 600; } a.row-link { color: var(--brand); text-decoration: none; font-weight: 500; } a.row-link:hover { text-decoration: underline; } /* ────────── Pills / Badges ────────── */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--pill-bg); color: var(--pill-fg); } .pill.open { background: var(--pill-open-bg); color: var(--pill-open-fg); } .pill.paid { background: var(--pill-paid-bg); color: var(--pill-paid-fg); } .pill.mahn-1 { background: var(--pill-mahn1-bg); color: var(--pill-mahn1-fg); } .pill.mahn-2 { background: var(--pill-mahn2-bg); color: var(--pill-mahn2-fg); } .pill.mahn-3 { background: var(--pill-mahn3-bg); color: var(--pill-mahn3-fg); } .pill.mahn-4 { background: var(--pill-mahn4-bg); color: var(--pill-mahn4-fg); } /* ────────── Collapsible groups ────────── */ .bl-group { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-sm); border-left: 4px solid var(--brand); } .bl-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; user-select: none; background: linear-gradient(to right, var(--brand-50), transparent 60%); transition: background .12s; } .bl-header:hover { background: linear-gradient(to right, var(--brand-100), transparent 70%); } .bl-group .chev { color: var(--muted); font-size: 12px; transition: transform .2s; } .bl-group[data-collapsed=true] .chev { transform: rotate(-90deg); } .bl-group[data-collapsed=true] .bl-body { display: none; } .bl-name { font-size: 16px; font-weight: 700; flex: 1; color: var(--brand); } .bl-stats { display: flex; gap: 18px; font-size: 12px; color: var(--muted); } .bl-stats b { color: var(--ink); font-variant-numeric: tabular-nums; } .bl-stats .offen b { color: var(--offen-fg); } .kd-block { margin: 0 18px 14px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); } .kd-block:first-of-type { margin-top: 10px; } main > .kd-block { margin: 0 0 14px; } .kd-header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--row-stripe); cursor: pointer; user-select: none; border-bottom: 1px solid var(--border); transition: background .12s; } .kd-header:hover { background: var(--table-row-hover); } .kd-block[data-collapsed=true] .kd-header { border-bottom: 0; } .kd-block[data-collapsed=true] .kd-table { display: none; } .kd-block[data-collapsed=true] .chev { transform: rotate(-90deg); } .kd-block .chev { color: var(--muted); font-size: 12px; transition: transform .2s; } .kd-kdnr { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--brand); background: var(--brand-50); padding: 4px 10px; border-radius: 6px; font-weight: 700; } .kd-name { font-weight: 600; font-size: 15px; flex: 1; color: var(--ink); } .kd-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted); } .kd-stats b { color: var(--ink); font-variant-numeric: tabular-nums; } .kd-stats .offen b { color: var(--offen-fg); } .kd-stats .mixed { background: var(--pill-mahn2-bg); color: var(--pill-mahn2-fg); padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; } .kd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--card); } .kd-table th, .kd-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .kd-table th { background: var(--row-stripe); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .kd-table th a { color: inherit; text-decoration: none; } .kd-table th a:hover { color: var(--brand); } .kd-table tr:last-child td { border-bottom: 0; } .kd-table tr.belegrow:hover td { background: var(--table-row-hover); } .kd-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .kd-table td.zero { color: var(--muted-2); } .kd-table td.offen { color: var(--offen-fg); font-weight: 600; } .kd-table tr.overdue td { background: var(--overdue-bg); color: var(--danger); } .kd-table tr.overdue:hover td { background: var(--overdue-bg-h); } .kd-table tr.overdue td.offen { color: var(--danger); } .kd-table tr.overdue td a.row-link { color: var(--danger); font-weight: 600; } /* ────────── Sub-tabs (Zuordnung: Offen / Zugeordnet) ────────── */ .subtabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .subtabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s, background .12s; } .subtabs a:hover { color: var(--ink); background: var(--brand-50); } .subtabs a.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } .subtabs a .cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; background: var(--pill-bg); color: var(--muted); border-radius: 999px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .subtabs a.active .cnt { background: var(--brand); color: #fff; } /* ────────── View toggle ────────── */ .view-toggle { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; height: 38px; } .view-toggle a { display: inline-flex; align-items: center; padding: 0 14px; font-size: 13px; text-decoration: none; color: var(--muted); background: var(--card); } .view-toggle a:hover { color: var(--ink); background: var(--brand-50); } .view-toggle a.active { background: var(--brand); color: #fff; } /* ────────── Modal ────────── */ .modal-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(3px); animation: fadeIn .15s ease-out; } .modal { background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 24px; max-width: 680px; width: 92%; max-height: 86vh; overflow: auto; box-shadow: var(--shadow-lg); } .modal h2 { margin: 0 0 6px; font-size: 19px; color: var(--brand); } .modal .subtitle { color: var(--muted); font-size: 13px; margin-bottom: 18px; } .modal table { width: 100%; border-collapse: collapse; } .modal th { background: transparent; text-transform: none; font-size: 12px; color: var(--muted); font-weight: 500; width: 140px; text-align: left; padding: 5px 8px; } .modal td { white-space: normal; font-size: 13px; padding: 5px 8px; border-bottom: 1px solid var(--border); } .modal tr:last-child td { border-bottom: 0; } .modal .close { float: right; text-decoration: none; color: var(--muted); font-size: 26px; line-height: 1; margin-top: -8px; } .modal .close:hover { color: var(--danger); } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } /* ────────── Misc ────────── */ .empty { background: var(--card); padding: 60px 20px; text-align: center; color: var(--muted); border-radius: var(--radius); border: 1px dashed var(--border-2); } footer.app-footer { padding: 24px; color: var(--muted); font-size: 12px; text-align: center; } .saved { color: var(--success); font-size: 11px; margin-left: 6px; opacity: 0; transition: opacity .3s; } .saved.show { opacity: 1; } /* ────────── User cards (users.php) ────────── */ .grid-form { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr 80px 1.2fr 140px auto; gap: 10px; align-items: end; } .user-card { display: grid; grid-template-columns: 50px 1.2fr 1fr 110px 1fr 130px auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--card); box-shadow: var(--shadow-sm); transition: box-shadow .15s; } .user-card:hover { box-shadow: var(--shadow-md); } .user-card.admin { background: var(--card-2); border-color: var(--accent); border-left-width: 3px; border-left-style: solid; } .swatch { width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } .user-card .info .name { font-weight: 600; font-size: 15px; color: var(--ink); } .user-card .info .uname { font-size: 12px; color: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; } .role-pill { font-size: 11px; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; display: inline-block; } .role-pill.admin { background: var(--accent); color: #5b4400; } .role-pill.benutzer { background: var(--brand-50); color: var(--brand-2); } .role-pill.zuordner { background: var(--success-50); color: var(--success); } .role-pill.buchhaltung { background: #ede4fb; color: #5b21b6; } html:not([data-theme="light"]) .role-pill.buchhaltung { background: #2b1b4a; color: #c4b1f5; } /* Segmented role toggle for users.php (replaces