/* ============================================================ PFIFF – Stylesheet Themes: dark (default), mittel, hell Theme wird als data-theme Attribut auf gesetzt ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:ital,wght@0,300;0,600;1,300&display=swap'); /* ── THEME: DARK (default) ── */ html { --bg: #0f110e; --surface: #171a15; --surface2: #1e2219; --border: #2d3329; --green: #7ab648; --green-dim: #4a7028; --green-glow:#a8d96c; --text: #d4dbc8; --text-dim: #6b7560; --accent: #c8e87a; --danger: #e87a7a; --warn: #e8c87a; --row-alt: #13150f; --row-hover: #1f2518; --row-sel: #253020; --input-bg: #0f110e; } /* ── THEME: MITTEL ── */ html[data-theme="mittel"] { --bg: #1c1c1c; --surface: #262626; --surface2: #2f2f2f; --border: #3c3c3c; --green: #7ab648; --green-dim: #4a6e2a; --green-glow:#a8d96c; --text: #cecece; --text-dim: #727272; --accent: #b8d96a; --danger: #d97a7a; --warn: #d9c07a; --row-alt: #181818; --row-hover: #292929; --row-sel: #293020; --input-bg: #181818; } /* ── THEME: HELL ── */ html[data-theme="hell"] { --bg: #f2f4ee; --surface: #ffffff; --surface2: #eaede4; --border: #cdd4c4; --green: #5a9028; --green-dim: #5a9028; --green-glow:#3a6a10; --text: #252e1c; --text-dim: #6e7a62; --accent: #3a6a10; --danger: #a03030; --warn: #806820; --row-alt: #f8faf4; --row-hover: #eaf0e2; --row-sel: #d8eacc; --input-bg: #ffffff; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'DM Mono', monospace; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 13px; transition: background .2s, color .2s; } /* ============================================================ TOPBAR ============================================================ */ .topbar { display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--border); height: 48px; padding: 0 16px; position: sticky; top: 0; z-index: 100; transition: background .2s, border-color .2s; } .topbar-logo { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--accent); letter-spacing: -0.5px; margin-right: 32px; white-space: nowrap; } .topbar-logo span { color: var(--text-dim); font-weight: 300; } .nav-link { color: var(--text-dim); text-decoration: none; padding: 0 14px; height: 48px; display: flex; align-items: center; border-bottom: 2px solid transparent; transition: all .15s; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; } .nav-link:hover { color: var(--text); background: var(--surface2); } .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; } .user-pill { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 11px; color: var(--text-dim); } .user-pill strong { color: var(--green-glow); } /* ============================================================ USER DROPDOWN ============================================================ */ .user-dropdown-wrap { position: relative; } .user-pill-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 11px; color: var(--text-dim); cursor: pointer; font-family: 'DM Mono', monospace; transition: all .15s; display: flex; align-items: center; gap: 5px; } .user-pill-btn:hover { border-color: var(--green-dim); color: var(--text); } .user-pill-btn strong { color: var(--green-glow); } .user-caret { font-size: 9px; opacity: .6; } .user-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 300; overflow: hidden; } .user-menu.open { display: block; } .user-menu-item { display: block; padding: 8px 14px; color: var(--text-dim); text-decoration: none; font-size: 12px; transition: background .1s, color .1s; } .user-menu-item:hover { background: var(--surface2); color: var(--text); } .user-menu-item.active { color: var(--accent); background: var(--row-sel); } .user-menu-divider { height: 1px; background: var(--border); margin: 4px 0; } .user-menu-logout { color: var(--danger) !important; } .user-menu-logout:hover { background: rgba(232,122,122,.1) !important; } color: var(--text-dim); text-decoration: none; font-size: 11px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; transition: all .15s; } .btn-logout:hover { color: var(--danger); border-color: var(--danger); } /* ============================================================ LAYOUT ============================================================ */ .app-body { display: flex; min-height: calc(100vh - 48px); } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { width: 48px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 4px; position: sticky; top: 48px; height: calc(100vh - 48px); flex-shrink: 0; overflow: visible; transition: background .2s, border-color .2s; } .sidebar-label { font-size: 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; writing-mode: horizontal-tb; } .sidebar-divider { width: 28px; height: 1px; background: var(--border); margin: 8px 0; } .theme-btn { width: 32px; height: 32px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; transition: all .15s; position: relative; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--surface2); outline: none; } .theme-btn:hover { border-color: var(--green-dim); transform: scale(1.08); } .theme-btn.active { border-color: var(--accent); background: var(--row-sel); } /* Tooltip */ .theme-btn .tip { position: fixed; left: 56px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: 'DM Mono', monospace; font-size: 11px; padding: 4px 10px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 999; box-shadow: 2px 2px 8px rgba(0,0,0,.3); } .theme-btn:hover .tip { opacity: 1; } /* ============================================================ MAIN CONTENT ============================================================ */ .main { padding: 20px 24px; flex: 1; min-width: 0; } .page-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; } .page-title { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: var(--accent); } .page-count { color: var(--text-dim); font-size: 11px; } /* ============================================================ FILTER BAR ============================================================ */ .filter-bar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; transition: background .2s, border-color .2s; } .filter-group { display: flex; flex-direction: column; gap: 4px; } .filter-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; } .filter-input, .filter-select { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: 'DM Mono', monospace; font-size: 12px; padding: 6px 10px; border-radius: 4px; outline: none; transition: border-color .15s, background .2s; min-width: 120px; } .filter-input:focus, .filter-select:focus { border-color: var(--green-dim); } .filter-select option { background: var(--bg); } /* ============================================================ BUTTONS ============================================================ */ .btn { padding: 6px 16px; border: none; border-radius: 4px; font-family: 'DM Mono', monospace; font-size: 12px; cursor: pointer; transition: all .15s; letter-spacing: .3px; text-decoration: none; display: inline-flex; align-items: center; } .btn-primary { background: var(--green-dim); color: var(--accent); } .btn-primary:hover { background: var(--green); color: #0f110e; } .btn-secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); } .btn-secondary:hover { color: var(--text); border-color: var(--text-dim); } .btn-sm { padding: 3px 10px; font-size: 11px; } /* ============================================================ TABLE ============================================================ */ .table-wrap { border: 1px solid var(--border); border-radius: 6px; overflow: auto; transition: border-color .2s; } table { width: 100%; border-collapse: collapse; } thead { background: var(--surface); position: sticky; top: 0; z-index: 10; } th { padding: 9px 12px; text-align: left; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; } th:hover { color: var(--text); } th.sort-asc::after { content: ' ↑'; color: var(--accent); } th.sort-desc::after { content: ' ↓'; color: var(--accent); } td { padding: 7px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:nth-child(even) td { background: var(--row-alt); } tr:hover td { background: var(--row-hover) !important; } tr.selected td { background: var(--row-sel); } /* Badges */ .badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 500; } .badge-q1 { background: #1a2e10; color: #7ab648; } .badge-q2 { background: #1a1a10; color: #b0a848; } .badge-q3 { background: #2a1a10; color: #c88048; } .badge-q4 { background: #2a1010; color: #c84848; } .badge-q5 { background: #2a2010; color: #c8b048; } html[data-theme="hell"] .badge-q1 { background: #d4ecc4; color: #2a6010; } html[data-theme="hell"] .badge-q2 { background: #eceac4; color: #6a6010; } html[data-theme="hell"] .badge-q3 { background: #ecd8c4; color: #804010; } html[data-theme="hell"] .badge-q4 { background: #ecc4c4; color: #801010; } html[data-theme="hell"] .badge-q5 { background: #ece0c4; color: #806010; } html[data-theme="mittel"] .badge-q1 { background: #1a2e10; color: #7ab648; } html[data-theme="mittel"] .badge-q2 { background: #1a1a10; color: #b0a848; } html[data-theme="mittel"] .badge-q3 { background: #2a1a10; color: #c88048; } html[data-theme="mittel"] .badge-q4 { background: #2a1010; color: #c84848; } html[data-theme="mittel"] .badge-q5 { background: #2a2010; color: #c8b048; } .bestand-pos { color: var(--green-glow); } .bestand-zero { color: var(--text-dim); } .bestand-neg { color: var(--danger); } /* ============================================================ PAGINATION ============================================================ */ .pagination { display: flex; align-items: center; gap: 4px; margin-top: 12px; justify-content: flex-end; } .page-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-family: 'DM Mono', monospace; font-size: 11px; transition: all .15s; text-decoration: none; } .page-btn:hover { color: var(--text); border-color: var(--text-dim); } .page-btn.active { background: var(--green-dim); color: var(--accent); border-color: var(--green-dim); } /* ============================================================ LOGIN ============================================================ */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); background-image: radial-gradient(ellipse at 30% 50%, rgba(74,112,40,.15) 0%, transparent 60%); } .login-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 40px 48px; width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .login-logo { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; color: var(--accent); text-align: center; margin-bottom: 4px; } .login-sub { text-align: center; color: var(--text-dim); font-size: 11px; margin-bottom: 32px; letter-spacing: .5px; } .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; } .form-control { width: 100%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-family: 'DM Mono', monospace; font-size: 13px; padding: 9px 12px; border-radius: 4px; outline: none; transition: border-color .15s, background .2s; } .form-control:focus { border-color: var(--green-dim); } .btn-login { width: 100%; background: var(--green-dim); color: var(--accent); border: none; border-radius: 4px; padding: 11px; font-family: 'Fraunces', serif; font-size: 15px; cursor: pointer; transition: all .2s; margin-top: 8px; letter-spacing: .3px; } .btn-login:hover { background: var(--green); color: #0f110e; } .login-copy { text-align: center; color: var(--text-dim); font-size: 10px; margin-top: 24px; } /* ============================================================ CARDS / FORMS ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 20px 24px; margin-bottom: 16px; transition: background .2s, border-color .2s; } .card-title { font-family: 'Fraunces', serif; font-size: 14px; color: var(--accent); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .form-grid .form-group { margin-bottom: 0; } /* ============================================================ EMPTY STATE ============================================================ */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); } .empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: .4; }