:root {--bg-color:#222228;--card-bg:#2d2d35;--border-color:#3f3f4a;--text-primary:#f0f0f2;--text-muted:#848496;--accent:#3d3d45;--font-mono:'JetBrains Mono', monospace;} * {margin:0;padding:0;box-sizing:border-box;} body {background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-mono);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;} body::before {content:'';position:absolute;width:40vw;height:40vw;background:radial-gradient(circle, rgba(255,255,255,0.02) 0%, rgba(12,12,14,0) 70%);top:50%;left:50%;transform:translate(-50%, -50%);z-index:1;pointer-events:none;} .h1-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;} .login-container {position:relative;display:flex;justify-content:center;align-items:center;width:100%;z-index:2;} .login-button {position:absolute;background-color:var(--card-bg);color:var(--text-primary);font-family:var(--font-mono);font-size:1.1rem;padding:1rem 3rem;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;box-shadow:0 4px 20px rgba(0, 0, 0, 0.4);transition:all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);opacity:1;visibility:visible;transform:translateY(0) scale(1);letter-spacing:0.1em;text-transform:uppercase;} .login-button:hover {background-color:#1a1a1d;border-color:var(--accent);transform:translateY(-2px) scale(1);box-shadow:0 8px 30px rgba(0, 0, 0, 0.6);} .login-button:active {transform:translateY(1px) scale(0.98);} .login-button.hidden {opacity:0;visibility:hidden;transform:translateY(-10px) scale(0.95);pointer-events:none;} .password-form {position:absolute;display:flex;flex-direction:column;gap:1rem;width:280px;opacity:0;visibility:hidden;transform:translateY(15px) scale(0.95);transition:all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);background-color:var(--card-bg);padding:2rem;border-radius:12px;border:1px solid var(--border-color);box-shadow:0 10px 40px rgba(0, 0, 0, 0.6);} .password-form.visible {opacity:1;visibility:visible;transform:translateY(0) scale(1);} .password-input {background:transparent;border:none;border-bottom:2px solid var(--border-color);color:var(--text-primary);font-family:var(--font-mono);font-size:1rem;padding:0.8rem 0.5rem;text-align:center;letter-spacing:0.2em;outline:none;transition:border-color 0.3s ease;} .password-input::placeholder {color:var(--text-muted);letter-spacing:normal;font-size:0.9rem;} .password-input:focus {border-bottom-color:var(--text-primary);} .submit-button {background-color:var(--text-primary);color:var(--bg-color);font-family:var(--font-mono);font-size:1rem;font-weight:bold;padding:0.8rem;border:none;border-radius:6px;cursor:pointer;margin-top:0.5rem;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.05em;} .submit-button:hover {background-color:#ffffff;transform:translateY(-2px);box-shadow:0 4px 15px rgba(255, 255, 255, 0.1);} .submit-button:active {transform:translateY(0);} .table-container {width:95vw;max-width:1600px;margin:2rem auto;max-height:75vh;overflow:auto;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 10px 40px rgba(0, 0, 0, 0.6);position:relative;z-index:2;} .data-table {width:100%;border-collapse:separate;border-spacing:0;min-width:1800px;} .data-table th, .data-table td {padding:0.6rem 1.2rem;text-align:left;border-bottom:1px solid var(--border-color);white-space:nowrap;} .data-table th {background-color:#2a2a30;color:var(--text-primary);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;font-size:0.85rem;position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--border-color);} .data-table td {color:var(--text-muted);font-size:0.95rem;transition:color 0.2s ease;} .data-table tbody tr {transition:background-color 0.2s ease;} .data-table tbody tr:hover {background-color:rgba(255, 255, 255, 0.03);} .data-table tbody tr:hover td {color:var(--text-primary);} .trunc-col {max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:all 0.2s ease;} .trunc-col:hover {background-color:rgba(255, 255, 255, 0.05);} .trunc-col.expanded {max-width:500px;white-space:normal;word-break:break-word;background-color:#2b2b33;box-shadow:inset 0 0 10px rgba(0,0,0,0.3);} .action-bar {text-align:center;margin-top:1rem;padding-bottom:1.5rem;} .table-title {display:inline-block;min-width:150px;min-height:1.2rem;} .table-title:empty::before {content:"Titel eingeben...";color:rgba(255, 255, 255, 0.7);font-style:italic;cursor:text;pointer-events:none;} .add-row-btn {background-color:var(--bg-color, #2b2b33) !important;color:var(--text-muted) !important;border:1px solid var(--border-color);border-radius:50% !important;width:60px !important;height:60px !important;min-width:60px !important;min-height:60px !important;padding:0 !important;box-sizing:border-box !important;cursor:pointer;transition:all 0.3s ease;display:flex;justify-content:center;align-items:center;margin:0 auto;box-shadow:0 4px 15px rgba(0, 0, 0, 0.4);} .add-row-btn:hover {color:var(--text-primary);border-color:var(--text-primary);background-color:rgba(255, 255, 255, 0.05);transform:scale(1.1);box-shadow:0 6px 20px rgba(0, 0, 0, 0.6);} .add-row-btn:active {transform:scale(0.95);} .data-table tbody td.editable-cell:focus {outline:none;background-color:rgba(255, 255, 255, 0.12) !important;color:#fff !important;box-shadow:inset 0 0 10px rgba(0,0,0,0.5) !important;} .row-delayed td {background-color:rgba(220, 53, 69, 0.15) !important;} .row-shipped td {background-color:rgba(255, 193, 7, 0.15) !important;} .row-completed td {background-color:rgba(40, 167, 69, 0.12) !important;} .data-table tbody tr.row-delayed:hover td {background-color:rgba(220, 53, 69, 0.20) !important;} .data-table tbody tr.row-shipped:hover td {background-color:rgba(255, 193, 7, 0.20) !important;} .data-table tbody tr.row-completed:hover td {background-color:rgba(40, 167, 69, 0.18) !important;} .status-select {background:#1c1c21;color:var(--text-primary);border:1px solid var(--border-color);padding:0.4rem;border-radius:6px;font-family:inherit;font-size:0.85rem;cursor:pointer;outline:none;transition:all 0.2s ease;} .status-select:focus, .status-select:hover {border-color:var(--text-primary);} .data-table {counter-reset:rowNum;} .data-table tbody tr:not(.deleted-row) {counter-increment:rowNum;} .row-number-cell::before {content:counter(rowNum);color:var(--text-muted);font-weight:bold;font-size:0.85rem;} .row-number-cell {text-align:center;background-color:rgba(0, 0, 0, 0.2) !important;user-select:none;pointer-events:none;} .readonly-cell {background-color:rgba(255, 255, 255, 0.02) !important;cursor:default;color:var(--text-muted) !important;} .readonly-cell:hover {background-color:rgba(255, 255, 255, 0.04) !important;} .name-select option {background-color:var(--bg-color);color:var(--text-primary);} body.trash-mode .data-table tbody tr:not(.deleted-row) {display:none !important;} body.trash-mode .data-table tbody tr.deleted-row {display:table-row !important;} body.trash-mode .data-table tbody tr.deleted-row td {background-color:rgba(220, 53, 69, 0.08) !important;opacity:0.85;} body.trash-mode .add-row-btn {display:none !important;} body.trash-mode .del-import-btn {display:none !important;} body.trash-mode .dashboard-widgets {display:none !important;} .empty-trash-btn {display:none !important;} body.trash-mode .empty-trash-btn {display:inline-block !important;} .data-table td:nth-child(3), .data-table td:nth-child(7), .data-table td:nth-child(9), .data-table td:nth-child(10), .data-table td:nth-child(11), .data-table td:nth-child(12), .data-table td:nth-child(13), .data-table td:nth-child(14), .data-table td:nth-child(15) {text-align:right;padding-right:1.5rem;} .summary-container {width:max-content;max-width:100%;margin:0 0 3rem 1rem;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 10px 40px rgba(0, 0, 0, 0.6);overflow:hidden;} table.summary-table.data-table {min-width:300px;background-color:transparent;} table.summary-table.data-table th, table.summary-table.data-table td {padding:0.6rem 1.2rem;} table.summary-table.data-table th {background-color:#2a2a30;} table.summary-table.data-table tr {cursor:default;}