:root {
    --ink: #17202a;
    --muted: #667085;
    --line: #d9e2ec;
    --panel: #ffffff;
    --page: #f3f6f8;
    --blue: #0f6fb7;
    --cyan: #1aa6b7;
    --green: #188869;
    --red: #c2412f;
    --amber: #b7791f;
    --navy: #102437;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--page);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

button, input, select, textarea {
    font: inherit;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        linear-gradient(120deg, rgba(16, 36, 55, .95), rgba(15, 111, 183, .78)),
        url("https://www.maxhoessbacher.de/wp-content/uploads/2025/08/Max-Hoessbacher-IT-Service.jpg") center/cover;
}

.login-panel {
    width: min(980px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 24px;
    align-items: stretch;
}

.brand-block, .login-card, .panel, .kpi, .playbooks article, .phase-card, .profile-card {
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(217, 226, 236, .9);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(16, 36, 55, .13);
}

.brand-block {
    padding: 42px;
    color: #fff;
    background: rgba(16, 36, 55, .76);
    border-color: rgba(255, 255, 255, .18);
}

.brand-block h1 {
    margin: 10px 0 14px;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1;
}

.brand-block p { max-width: 560px; color: rgba(255, 255, 255, .86); }

.logo-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: white;
    font-weight: 800;
}

.login-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.login-facts span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; }

.login-card {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

label { display: grid; gap: 7px; color: var(--muted); font-size: 14px; }
input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
}
textarea { min-height: 94px; resize: vertical; }

button, .primary-button {
    border: 0;
    border-radius: 8px;
    padding: 11px 14px;
    background: var(--blue);
    color: white;
    font-weight: 750;
    cursor: pointer;
}

.hint, .alert { margin: 0; font-size: 13px; }
.alert { color: var(--red); }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 274px;
    padding: 22px;
    background: var(--navy);
    color: white;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sidebar-brand { display: flex; align-items: center; gap: 12px; }
.sidebar-brand span { display: block; color: rgba(255,255,255,.62); font-size: 12px; margin-top: 3px; }
.sidebar nav { display: grid; gap: 5px; }
.sidebar a, .logout-form button {
    color: rgba(255,255,255,.82);
    text-decoration: none;
    padding: 11px 12px;
    border-radius: 8px;
    background: transparent;
    text-align: left;
}
.sidebar a:hover { background: rgba(255,255,255,.08); color: #fff; }
.logout-form { margin-top: auto; }
.logout-form button { width: 100%; border: 1px solid rgba(255,255,255,.16); }

.app-main {
    margin-left: 274px;
    padding: 28px;
    display: grid;
    gap: 22px;
}

.topbar, .panel-head, .requirement-top, .table-row, .client-row, .task-row, .incident-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 30px; }
h2 { margin-bottom: 0; font-size: 20px; }
h3 { margin-bottom: 8px; font-size: 16px; }
p { color: var(--muted); line-height: 1.5; }
.eyebrow { margin-bottom: 5px; color: var(--cyan); font-size: 12px; font-weight: 800; text-transform: uppercase; }

.user-pill { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { padding: 18px; }
.kpi span, .kpi small { display: block; color: var(--muted); }
.kpi strong { display: block; font-size: 32px; margin: 6px 0; }
.kpi.danger strong { color: var(--red); }

.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 22px; }
.panel { padding: 20px; overflow: hidden; }

.client-list, .task-list { display: grid; gap: 12px; margin-top: 18px; }
.client-row, .task-row, .incident-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}
.client-row { display: grid; }
.client-row span, .task-row small { color: var(--muted); font-size: 13px; }
.row-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.risk { padding: 4px 8px; border-radius: 999px; background: #eef2f6; font-size: 12px; font-weight: 750; }
.progress { height: 7px; border-radius: 999px; background: #e8eef4; overflow: hidden; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); }

.badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: #eef2f6;
    color: #314254;
}
.badge-critical, .badge-high, .badge-early_warning_due { background: #fdecea; color: var(--red); }
.badge-medium, .badge-planned, .badge-requested, .badge-followup_due { background: #fff4db; color: var(--amber); }
.badge-low, .badge-done, .badge-approved, .badge-registered, .badge-closed { background: #e7f6f0; color: var(--green); }
.badge-in_progress, .badge-reported_72h, .badge-uploaded { background: #e7f1fb; color: var(--blue); }

.requirements-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.requirement-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    display: grid;
    gap: 10px;
}
.requirement-card p, .requirement-card small { margin: 0; color: var(--muted); }
.requirement-top span { color: var(--blue); font-weight: 800; font-size: 12px; }
.inline-form, .stack-form { display: grid; gap: 8px; }
.inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inline-form button { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; }

.onboarding-layout {
    margin-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: start;
}
.phase-board, .phase-steps, .onboarding-side, .program-groups { display: grid; gap: 12px; }
.phase-card, .profile-card { padding: 16px; box-shadow: none; }
.phase-head {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}
.phase-head span {
    display: block;
    color: var(--blue);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}
.phase-head strong { font-size: 22px; }
.progress.small { height: 9px; }
.step-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 140px minmax(150px, .7fr) 54px;
    gap: 8px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.step-row select[name="client_id"] { grid-column: 1 / -1; }
.step-row p, .program-row p { margin: 3px 0 4px; font-size: 13px; }
.step-row small, .program-row small { color: var(--muted); font-size: 12px; }
.compact-form {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}
.compact-form h3 { margin: 0 0 4px; }
.compact-form textarea { min-height: 70px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.profile-card dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; margin: 12px 0; }
.profile-card dt { color: var(--muted); font-size: 13px; }
.profile-card dd { margin: 0; font-weight: 750; }
.program-groups { margin-top: 18px; }
.program-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.program-group summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    cursor: pointer;
    background: #f8fafc;
}
.program-group summary span { color: var(--muted); font-size: 13px; }
.program-table { display: grid; }
.program-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) 90px minmax(160px, .7fr) 135px minmax(130px, .6fr) 132px minmax(140px, .7fr) 92px;
    gap: 8px;
    align-items: start;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
}

.deadline-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.deadline-grid span { padding: 8px; background: #f5f8fb; border-radius: 8px; font-size: 12px; color: var(--muted); }
.deadline-grid b { display: block; color: var(--ink); }

.table { display: grid; gap: 8px; margin-top: 18px; }
.table-row { align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.table-row span { color: var(--muted); }

.playbooks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.playbooks article { padding: 18px; }

@media (max-width: 1100px) {
    .kpi-grid, .requirements-grid, .playbooks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { grid-template-columns: 1fr; }
    .onboarding-layout { grid-template-columns: 1fr; }
    .program-row { grid-template-columns: 1fr 110px 1fr 1fr; }
}

@media (max-width: 760px) {
    .login-panel { grid-template-columns: 1fr; }
    .brand-block { padding: 28px; }
    .sidebar { position: static; width: auto; }
    .app-main { margin-left: 0; padding: 18px; }
    .kpi-grid, .requirements-grid, .playbooks, .deadline-grid { grid-template-columns: 1fr; }
    .topbar, .table-row, .task-row, .incident-row { display: grid; }
    .phase-head, .step-row, .program-row, .form-grid, .profile-card dl { grid-template-columns: 1fr; }
}