* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f5f6f8;
    color: #1f2937;
}

.topbar {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.page {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0;
}

.welcome {
    margin-bottom: 28px;
}

.welcome h1 {
    margin: 5px 0 8px;
    font-size: clamp(26px, 4vw, 36px);
}

.eyebrow {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.muted {
    color: #6b7280;
    line-height: 1.5;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px;
}

.dashboard-card h2 {
    margin: 7px 0;
    font-size: 20px;
}

.dashboard-card p {
    margin-bottom: 0;
    color: #6b7280;
}

.dashboard-card.important {
    border-width: 2px;
}

.card-label {
    font-size: 13px;
    font-weight: 700;
}

.login-wrapper {
    min-height: calc(100vh - 64px);
    display: grid;
    place-items: center;
    padding: 24px 0;
}

.login-card {
    width: min(420px, 100%);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px;
}

.login-card h1 {
    margin-top: 0;
}

.login-card label {
    display: block;
    margin: 18px 0 7px;
    font-weight: 600;
}

.login-card input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    padding: 10px 12px;
    font: inherit;
}

.primary-button {
    width: 100%;
    margin-top: 22px;
    min-height: 48px;

    border: 0;
    border-radius: 9px;

    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.logout-button {
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
}

.error-message {
    padding: 12px;
    border-radius: 8px;
    background: #f3f4f6;
    margin: 16px 0;
}

@media (max-width: 700px) {

    .page {
        width: min(100% - 24px, 1100px);
        padding-top: 22px;
    }

    .topbar {
        padding: 13px 16px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        padding: 18px;
    }

    .login-card {
        padding: 22px;
    }
}

.brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand span {
    font-size: 13px;
    color: #6b7280;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.main-nav a {
    color: #374151;
    text-decoration: none;
    font-weight: 600;
}

.message-card {
    max-width: 620px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px;
    margin: 40px auto;
}

.message-card h1 {
    font-size: clamp(24px, 4vw, 32px);
    margin: 8px 0 12px;
}

.primary-link {
    display: inline-block;
    margin-top: 14px;
    text-decoration: none;
    font-weight: 700;
    color: #1f2937;
}

@media (max-width: 600px) {

    .topbar {
        align-items: flex-start;
    }

    .topbar-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }

    .message-card {
        margin-top: 20px;
        padding: 20px;
    }
}


/* KED-4 — Team and availability */

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.page-heading h1,
.form-card h1 {
    margin-top: 4px;
    margin-bottom: 8px;
}

.eyebrow {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.65;
}

.page-intro,
.muted {
    opacity: 0.7;
}

.compact {
    margin-bottom: 0;
}

.page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.button-secondary {
    background: transparent;
    border: 1px solid currentColor;
}

.employee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.employee-card,
.absence-card,
.form-card,
.empty-state,
.dashboard-next-action {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    padding: 18px;
    background: white;
}

.employee-card-top,
.absence-main,
.dashboard-next-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.employee-card h2 {
    margin: 0 0 8px;
    font-size: 1.08rem;
}

.status-badge,
.absence-type {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.06);
}

.status-inactive {
    opacity: 0.55;
}

.employee-absence-preview {
    margin-top: 18px;
}

.absence-mini-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.9rem;
}

.absence-list {
    display: grid;
    gap: 12px;
}

.absence-person {
    display: block;
    margin-bottom: 6px;
}

.absence-date {
    font-weight: 700;
    white-space: nowrap;
}

.conflict-warning {
    display: grid;
    gap: 4px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid currentColor;
    border-radius: 10px;
}

.conflict-warning small {
    display: block;
}

.text-link,
.back-link {
    font-weight: 600;
}

.form-page {
    max-width: 640px;
    margin: 0 auto;
}

.form-card {
    margin-top: 18px;
}

.form-field {
    margin-bottom: 18px;
}

.form-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
}

.field-error {
    margin-top: 6px;
    font-size: 0.88rem;
    font-weight: 600;
}

.message-stack {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.notice {
    padding: 12px 14px;
    border: 1px solid currentColor;
    border-radius: 10px;
}

.dashboard-next-action {
    margin-top: 20px;
}

.dashboard-next-action p {
    margin-bottom: 0;
}


@media (max-width: 700px) {
    .page-heading,
    .employee-card-top,
    .absence-main,
    .dashboard-next-action {
        flex-direction: column;
    }

    .page-actions,
    .page-actions .button {
        width: 100%;
    }

    .employee-grid {
        grid-template-columns: 1fr;
    }

    .absence-date {
        white-space: normal;
    }

    .absence-mini-row {
        align-items: flex-start;
    }
}


/* KED-4 — Team and availability */

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.page-heading h1,
.form-card h1 {
    margin-top: 4px;
    margin-bottom: 8px;
}

.eyebrow {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.65;
}

.page-intro,
.muted {
    opacity: 0.7;
}

.compact {
    margin-bottom: 0;
}

.page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.button-secondary {
    background: transparent;
    border: 1px solid currentColor;
}

.employee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.employee-card,
.absence-card,
.form-card,
.empty-state,
.dashboard-next-action {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    padding: 18px;
    background: white;
}

.employee-card-top,
.absence-main,
.dashboard-next-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.employee-card h2 {
    margin: 0 0 8px;
    font-size: 1.08rem;
}

.status-badge,
.absence-type {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.06);
}

.status-inactive {
    opacity: 0.55;
}

.employee-absence-preview {
    margin-top: 18px;
}

.absence-mini-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.9rem;
}

.absence-list {
    display: grid;
    gap: 12px;
}

.absence-person {
    display: block;
    margin-bottom: 6px;
}

.absence-date {
    font-weight: 700;
    white-space: nowrap;
}

.conflict-warning {
    display: grid;
    gap: 4px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid currentColor;
    border-radius: 10px;
}

.conflict-warning small {
    display: block;
}

.text-link,
.back-link {
    font-weight: 600;
}

.form-page {
    max-width: 640px;
    margin: 0 auto;
}

.form-card {
    margin-top: 18px;
}

.form-field {
    margin-bottom: 18px;
}

.form-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
}

.field-error {
    margin-top: 6px;
    font-size: 0.88rem;
    font-weight: 600;
}

.message-stack {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.notice {
    padding: 12px 14px;
    border: 1px solid currentColor;
    border-radius: 10px;
}

.dashboard-next-action {
    margin-top: 20px;
}

.dashboard-next-action p {
    margin-bottom: 0;
}


@media (max-width: 700px) {
    .page-heading,
    .employee-card-top,
    .absence-main,
    .dashboard-next-action {
        flex-direction: column;
    }

    .page-actions,
    .page-actions .button {
        width: 100%;
    }

    .employee-grid {
        grid-template-columns: 1fr;
    }

    .absence-date {
        white-space: normal;
    }

    .absence-mini-row {
        align-items: flex-start;
    }
}


/* ==========================================================
   Kreutzmann Elektroanlagen — Product UI
   Modern, clear, operational, mobile friendly
   ========================================================== */

:root {
    --k-ink: #182235;
    --k-ink-soft: #2b3850;
    --k-blue: #2563d9;
    --k-blue-dark: #194cae;
    --k-blue-soft: #eaf1ff;

    --k-electric: #f4c842;
    --k-electric-soft: #fff7d7;

    --k-green: #16805f;
    --k-green-soft: #e8f7f1;

    --k-red: #c74438;
    --k-red-soft: #fff0ee;

    --k-orange: #b86a09;
    --k-orange-soft: #fff4df;

    --k-gray-25: #fbfcfe;
    --k-gray-50: #f5f7fa;
    --k-gray-100: #edf0f4;
    --k-gray-200: #dfe4ea;
    --k-gray-400: #8a95a5;
    --k-gray-600: #586579;

    --k-white: #ffffff;

    --k-shadow:
        0 8px 28px rgba(24, 34, 53, 0.08);

    --k-shadow-hover:
        0 14px 34px rgba(24, 34, 53, 0.13);

    --k-radius: 14px;
    --k-radius-lg: 18px;
}


/* Overall product */

body {
    background: var(--k-gray-50);
    color: var(--k-ink);
}

.topbar {
    background: var(--k-ink);
    color: var(--k-white);
    border-bottom: 4px solid var(--k-electric);
}

.topbar a,
.topbar button {
    color: inherit;
}

.workspace-page {
    width: 100%;
}


/* Headings */

.workspace-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 26px;
}

.workspace-heading h1 {
    margin: 4px 0 6px;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    letter-spacing: -0.035em;
    color: var(--k-ink);
}

.workspace-heading p {
    margin: 0;
    color: var(--k-gray-600);
    font-size: 1rem;
}

.workspace-kicker {
    color: var(--k-blue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.workspace-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-primary {
    background: var(--k-blue);
    color: var(--k-white);
    box-shadow: 0 5px 14px rgba(37, 99, 217, 0.2);
}

.btn-primary:hover {
    background: var(--k-blue-dark);
}

.btn-secondary {
    background: var(--k-white);
    color: var(--k-ink);
    border-color: var(--k-gray-200);
}

.btn-secondary:hover {
    border-color: var(--k-blue);
    color: var(--k-blue);
}

.btn-filter {
    background: var(--k-ink);
    color: var(--k-white);
}

.btn-plus {
    margin-right: 7px;
    color: var(--k-electric);
    font-size: 1.25rem;
}


/* Summary metrics */

.metric-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.metric-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card {
    position: relative;
    overflow: hidden;
    background: var(--k-white);
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius);
    padding: 16px 18px;
}

.metric-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--k-blue);
}

.metric-card strong {
    display: block;
    margin-top: 7px;
    font-size: 1.75rem;
    line-height: 1;
}

.metric-card small {
    display: block;
    margin-top: 6px;
    color: var(--k-gray-600);
}

.metric-label {
    color: var(--k-gray-600);
    font-size: 0.78rem;
    font-weight: 750;
}

.metric-success::before {
    background: var(--k-green);
}

.metric-warning::before {
    background: var(--k-orange);
}

.metric-danger::before {
    background: var(--k-red);
}

.metric-blue::before {
    background: var(--k-blue);
}

.metric-muted::before {
    background: var(--k-gray-400);
}


/* Filter/search panel */

.filter-panel {
    margin-bottom: 20px;
    padding: 12px;
    background: var(--k-white);
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius);
    box-shadow: 0 2px 12px rgba(24, 34, 53, 0.035);
}

.filter-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.search-field {
    position: relative;
    flex: 1 1 280px;
}

.search-field input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--k-gray-200);
    border-radius: 10px;
    background: var(--k-gray-25);
    color: var(--k-ink);
    font: inherit;
    box-sizing: border-box;
}

.search-field input:focus,
.filter-select select:focus {
    outline: 3px solid var(--k-blue-soft);
    border-color: var(--k-blue);
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--k-gray-400);
    font-size: 1.25rem;
}

.filter-select {
    min-width: 145px;
}

.filter-select label {
    display: block;
    margin: 0 0 5px 2px;
    color: var(--k-gray-600);
    font-size: 0.72rem;
    font-weight: 750;
}

.filter-select select {
    width: 100%;
    height: 44px;
    padding: 0 34px 0 11px;
    border: 1px solid var(--k-gray-200);
    border-radius: 10px;
    background: var(--k-gray-25);
    color: var(--k-ink);
    font: inherit;
}

.filter-reset {
    align-self: center;
    color: var(--k-gray-600);
    font-size: 0.85rem;
    font-weight: 700;
}

.conflict-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--k-gray-200);
    border-radius: 10px;
    background: var(--k-gray-25);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.conflict-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--k-orange);
}


/* Employees */

.employee-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.person-card {
    background: var(--k-white);
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    padding: 18px;
    box-shadow: var(--k-shadow);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease;
}

.person-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--k-shadow-hover);
    border-color: #c8d4e6;
}

.person-card-header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.person-avatar,
.small-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            var(--k-ink),
            var(--k-blue)
        );
    color: var(--k-white);
    font-weight: 800;
}

.person-avatar {
    width: 46px;
    height: 46px;
    font-size: 1.08rem;
}

.small-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.82rem;
}

.person-identity h2 {
    margin: 0 0 6px;
    font-size: 1.02rem;
}

.icon-action,
.row-action a {
    color: var(--k-blue);
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.status-success {
    background: var(--k-green-soft);
    color: var(--k-green);
}

.status-danger {
    background: var(--k-red-soft);
    color: var(--k-red);
}

.status-blue {
    background: var(--k-blue-soft);
    color: var(--k-blue);
}

.status-neutral {
    background: var(--k-gray-100);
    color: var(--k-gray-600);
}

.person-highlight {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
    padding: 11px;
    border-radius: 11px;
}

.person-highlight > div {
    display: grid;
}

.person-highlight small {
    color: var(--k-gray-600);
}

.person-highlight strong {
    margin: 1px 0;
}

.person-highlight span:not(.highlight-icon) {
    color: var(--k-gray-600);
    font-size: 0.8rem;
}

.person-highlight-success {
    background: var(--k-green-soft);
}

.person-highlight-danger {
    background: var(--k-red-soft);
}

.highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--k-white);
    font-weight: 900;
}

.person-highlight-success .highlight-icon {
    color: var(--k-green);
}

.person-highlight-danger .highlight-icon {
    color: var(--k-red);
}

.person-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--k-gray-100);
}

.person-section-title {
    margin-bottom: 8px;
    color: var(--k-gray-600);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.next-absence {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.next-absence div {
    display: grid;
    gap: 2px;
}

.next-absence span:last-child {
    color: var(--k-gray-600);
    font-size: 0.82rem;
}

.absence-dot {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--k-blue);
}

.absence-dot-vacation {
    background: var(--k-blue);
}

.absence-dot-sick {
    background: var(--k-red);
}

.absence-dot-school {
    background: var(--k-orange);
}

.person-note {
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--k-gray-50);
    color: var(--k-gray-600);
    font-size: 0.84rem;
}

.empty-inline {
    color: var(--k-gray-400);
    font-size: 0.85rem;
}


/* Absence data list */

.absence-table {
    overflow: hidden;
    background: var(--k-white);
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow);
}

.absence-table-head,
.absence-table-row {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.4fr)
        minmax(110px, 0.75fr)
        minmax(155px, 1fr)
        minmax(145px, 1fr)
        90px;
    gap: 12px;
    align-items: center;
}

.absence-table-head {
    padding: 11px 16px;
    background: var(--k-ink);
    color: #dbe4f2;
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.absence-table-row {
    position: relative;
    padding: 14px 16px;
    border-bottom: 1px solid var(--k-gray-100);
}

.absence-table-row:last-child {
    border-bottom: 0;
}

.absence-table-row:hover {
    background: #fafcff;
}

.absence-row-conflict {
    background:
        linear-gradient(
            90deg,
            var(--k-orange-soft),
            var(--k-white) 23%
        );
    border-left: 4px solid var(--k-orange);
}

.absence-row-past {
    opacity: 0.68;
}

.absence-person-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.absence-person-cell strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.absence-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--k-gray-100);
    color: var(--k-gray-600);
    font-size: 0.76rem;
    font-weight: 800;
}

.absence-badge-vacation {
    background: var(--k-blue-soft);
    color: var(--k-blue);
}

.absence-badge-sick {
    background: var(--k-red-soft);
    color: var(--k-red);
}

.absence-badge-school {
    background: var(--k-electric-soft);
    color: #795d00;
}

.absence-period {
    display: grid;
    gap: 2px;
}

.absence-period span {
    color: var(--k-gray-600);
    font-size: 0.8rem;
}

.conflict-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--k-orange);
    font-size: 0.78rem;
    font-weight: 850;
}

.conflict-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--k-orange);
    color: var(--k-white);
}

.row-action {
    text-align: right;
}

.conflict-detail {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--k-orange-soft);
    color: var(--k-ink);
}

.conflict-detail > strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
}

.conflict-assignment {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    padding: 3px 0;
    color: var(--k-gray-600);
    font-size: 0.8rem;
}


/* Pagination */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
}

.pagination-button {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--k-gray-200);
    border-radius: 9px;
    background: var(--k-white);
    color: var(--k-ink);
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

.pagination-disabled {
    opacity: 0.38;
}

.pagination-info {
    color: var(--k-gray-600);
    font-size: 0.82rem;
}


/* Messages / empty states */

.notice-stack {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.notice {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--k-gray-200);
    background: var(--k-white);
}

.notice-success {
    border-color: #bce7d6;
    background: var(--k-green-soft);
    color: var(--k-green);
}

.notice-warning {
    border-color: #f0d39d;
    background: var(--k-orange-soft);
    color: #7a4a08;
}

.friendly-empty {
    padding: 44px 20px;
    text-align: center;
    background: var(--k-white);
    border: 1px dashed var(--k-gray-200);
    border-radius: var(--k-radius-lg);
}

.friendly-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--k-blue-soft);
    color: var(--k-blue);
    font-size: 1.5rem;
    font-weight: 900;
}

.friendly-empty h2 {
    margin: 0 0 6px;
}

.friendly-empty p {
    margin: 0 0 18px;
    color: var(--k-gray-600);
}


/* Existing forms get the same product identity */

.form-card {
    border-color: var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow);
}

.form-field label {
    color: var(--k-ink);
}

.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea {
    border: 1px solid var(--k-gray-200);
    border-radius: 9px;
    padding: 10px 12px;
    background: var(--k-gray-25);
    color: var(--k-ink);
    font: inherit;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 3px solid var(--k-blue-soft);
    border-color: var(--k-blue);
}

.field-error {
    color: var(--k-red);
}


/* Mobile */

@media (max-width: 850px) {
    .metric-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-grid-modern {
        grid-template-columns: 1fr;
    }

    .absence-table-head {
        display: none;
    }

    .absence-table {
        display: grid;
        gap: 10px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .absence-table-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        border: 1px solid var(--k-gray-200);
        border-radius: var(--k-radius);
        background: var(--k-white);
        box-shadow: var(--k-shadow);
    }

    .absence-person-cell {
        grid-column: 1 / -1;
    }

    .row-action {
        text-align: left;
    }

    .conflict-detail {
        grid-column: 1 / -1;
    }
}


@media (max-width: 650px) {
    .workspace-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .workspace-actions .btn {
        width: 100%;
    }

    .metric-grid-four {
        grid-template-columns: 1fr 1fr;
    }

    .metric-card {
        padding: 13px;
    }

    .metric-card strong {
        font-size: 1.5rem;
    }

    .filter-form {
        align-items: stretch;
    }

    .search-field,
    .filter-select {
        flex: 1 1 100%;
        width: 100%;
    }

    .btn-filter {
        width: 100%;
    }

    .conflict-toggle {
        width: 100%;
        box-sizing: border-box;
    }

    .person-card-header {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .person-avatar {
        width: 42px;
        height: 42px;
    }

    .icon-action {
        grid-column: 2;
    }

    .absence-table-row {
        grid-template-columns: 1fr;
    }

    .absence-person-cell,
    .conflict-detail {
        grid-column: 1;
    }

    .pagination {
        justify-content: space-between;
        gap: 6px;
    }

    .pagination-info {
        text-align: center;
    }

    .pagination-button {
        padding: 0 9px;
    }
}


/* ==========================================================
   Accessibility / contrast guard
   White controls always use dark readable text.
   ========================================================== */

.btn-secondary,
.button-secondary,
.pagination-button {
    background: #ffffff !important;
    color: var(--k-ink) !important;
    border-color: var(--k-gray-200) !important;
}

/* Logout currently lives inside the dark topbar.
   The control is white, therefore its text must be dark. */
.topbar form button {
    background: #ffffff !important;
    color: #182235 !important;
    border: 1px solid #ffffff !important;
    border-radius: 9px;
    min-height: 38px;
    padding: 0 12px;
    font-weight: 750;
    cursor: pointer;
}

.topbar form button:hover {
    background: var(--k-electric) !important;
    color: #182235 !important;
    border-color: var(--k-electric) !important;
}

.btn-primary,
.btn-filter {
    color: #ffffff !important;
}

.btn-secondary:hover,
.button-secondary:hover,
.pagination-button:hover {
    background: var(--k-blue-soft) !important;
    color: var(--k-blue-dark) !important;
    border-color: var(--k-blue) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(37, 99, 217, 0.28);
    outline-offset: 2px;
}


/* ==========================================================
   KED-4 — Feiertage & safe destructive actions
   ========================================================== */

.holiday-next-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #f1da88;
    border-radius: var(--k-radius);
    background: var(--k-electric-soft);
}

.holiday-calendar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--k-electric);
    color: var(--k-ink);
    font-size: 1.15rem;
    font-weight: 900;
}

.holiday-next-card > div:last-child {
    display: grid;
    gap: 2px;
}

.holiday-next-card small,
.holiday-next-card span {
    color: var(--k-gray-600);
}

.holiday-next-card strong {
    font-size: 1.05rem;
}


.year-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.year-navigation > strong {
    font-size: 1.1rem;
}


.holiday-list {
    overflow: hidden;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: var(--k-white);
    box-shadow: var(--k-shadow);
}

.holiday-row {
    display: grid;
    grid-template-columns:
        58px
        minmax(0, 1fr)
        110px
        90px;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--k-gray-100);
}

.holiday-row:last-child {
    border-bottom: 0;
}

.holiday-row:hover {
    background: #fafcff;
}

.holiday-row-past {
    opacity: 0.62;
}

.holiday-date-box {
    display: grid;
    place-items: center;
    min-height: 48px;
    border-radius: 10px;
    background: var(--k-blue-soft);
    color: var(--k-blue-dark);
}

.holiday-date-box strong {
    line-height: 1;
    font-size: 1.12rem;
}

.holiday-date-box span {
    margin-top: 2px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.holiday-main {
    display: grid;
    gap: 3px;
}

.holiday-main span {
    color: var(--k-gray-600);
    font-size: 0.82rem;
}

.row-action-link {
    color: var(--k-blue-dark);
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}


/* Destructive actions */

.danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--k-gray-200);
}

.danger-zone > div {
    display: grid;
    gap: 3px;
}

.danger-zone span {
    color: var(--k-gray-600);
    font-size: 0.82rem;
}

.btn-danger-outline {
    background: #ffffff !important;
    color: var(--k-red) !important;
    border-color: #e6b1ac !important;
}

.btn-danger-outline:hover {
    background: var(--k-red-soft) !important;
    color: #9f3028 !important;
    border-color: var(--k-red) !important;
}

.btn-danger {
    background: var(--k-red) !important;
    color: #ffffff !important;
    border-color: var(--k-red) !important;
}

.btn-danger:hover {
    background: #a9342b !important;
    color: #ffffff !important;
}


.delete-page {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.delete-card {
    width: min(100%, 520px);
    padding: 28px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: var(--k-white);
    box-shadow: var(--k-shadow);
}

.delete-card h1 {
    margin: 14px 0 8px;
}

.delete-card p {
    color: var(--k-gray-600);
}

.delete-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--k-red-soft);
    color: var(--k-red);
    font-size: 1.3rem;
    font-weight: 900;
}

.delete-warning {
    margin: 18px 0;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--k-red-soft);
    color: #852a23;
    font-size: 0.88rem;
    font-weight: 700;
}

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


/* Extra contrast guard */

.btn-secondary,
.btn-danger-outline {
    background-color: #ffffff;
}

.btn-secondary,
.btn-danger-outline,
.year-navigation .btn-secondary {
    color: #182235;
}


/* Mobile */

@media (max-width: 650px) {
    .holiday-row {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .holiday-row > .status-pill,
    .holiday-row > .row-action-link {
        grid-column: 2;
    }

    .danger-zone {
        align-items: stretch;
        flex-direction: column;
    }

    .danger-zone .btn {
        width: 100%;
    }

    .form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .form-actions .btn {
        width: 100%;
    }
}


/* ==========================================================
   KED-5 — Aufträge & Baustellen
   ========================================================== */

.job-review-hint {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #ead9a2;
    border-radius: var(--k-radius);
    background: var(--k-electric-soft);
    color: var(--k-ink);
}

.job-review-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--k-electric);
    color: var(--k-ink);
    font-weight: 900;
}

.job-review-hint > div {
    display: grid;
    gap: 2px;
}

.job-review-hint span:not(.job-review-icon) {
    color: var(--k-gray-600);
    font-size: 0.82rem;
}

.job-review-hint a {
    color: var(--k-ink);
    font-size: 0.82rem;
    font-weight: 800;
}


.job-list {
    overflow: hidden;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: var(--k-white);
    box-shadow: var(--k-shadow);
}

.job-list-head,
.job-row {
    display: grid;
    grid-template-columns:
        minmax(260px, 2fr)
        minmax(115px, 0.8fr)
        minmax(130px, 0.9fr)
        minmax(130px, 0.9fr)
        78px;
    gap: 14px;
    align-items: center;
}

.job-list-head {
    padding: 11px 16px;
    background: var(--k-ink);
    color: #dbe4f2;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.job-row {
    padding: 14px 16px;
    border-bottom: 1px solid var(--k-gray-100);
    transition: background 0.15s ease;
}

.job-row:last-child {
    border-bottom: 0;
}

.job-row:hover {
    background: #fafcff;
}


.job-main-cell {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
}

.job-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--k-electric-soft);
    color: var(--k-ink);
}

.job-main-cell > div:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.job-title-link {
    overflow: hidden;
    color: var(--k-ink);
    font-weight: 800;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-title-link:hover {
    color: var(--k-blue);
}

.job-customer {
    overflow: hidden;
    color: var(--k-gray-600);
    font-size: 0.82rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-address {
    overflow: hidden;
    color: var(--k-gray-400);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.job-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
}

.job-status-unset {
    background: var(--k-electric-soft);
    color: #695000;
}

.job-status-new {
    background: var(--k-gray-100);
    color: var(--k-ink-soft);
}

.job-status-scheduled {
    background: var(--k-blue-soft);
    color: var(--k-blue-dark);
}

.job-status-progress {
    background: #e7f1ff;
    color: #1253a8;
}

.job-status-finished {
    background: var(--k-orange-soft);
    color: #784405;
}

.job-status-invoiced {
    background: var(--k-green-soft);
    color: var(--k-green);
}

.job-status-large {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.78rem;
}


.job-date-cell {
    display: grid;
    gap: 2px;
}

.job-date-cell span {
    color: var(--k-gray-600);
    font-size: 0.78rem;
}


.job-team-cell {
    display: grid;
    gap: 4px;
}

.job-team-cell small {
    color: var(--k-gray-400);
}

.job-team-avatars {
    display: flex;
    align-items: center;
}

.job-team-avatar,
.job-team-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    margin-left: -5px;
    border: 2px solid var(--k-white);
    border-radius: 50%;
    background: var(--k-ink);
    color: var(--k-white);
    font-size: 0.68rem;
    font-weight: 800;
}

.job-team-avatar:first-child {
    margin-left: 0;
}

.job-team-more {
    background: var(--k-gray-100);
    color: var(--k-gray-600);
}


/* Job form */

.job-form-page {
    width: min(100%, 900px);
    margin: 0 auto;
}

.job-form-card {
    margin-top: 18px;
    padding: 24px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: var(--k-white);
    box-shadow: var(--k-shadow);
}

.job-form-card > h1 {
    margin: 5px 0 8px;
}

.job-form-section {
    margin-top: 25px;
    padding-top: 22px;
    border-top: 1px solid var(--k-gray-100);
}

.job-form-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.job-form-section-heading > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: var(--k-ink);
    color: var(--k-electric);
    font-size: 0.78rem;
    font-weight: 900;
}

.job-form-section-heading > div {
    display: grid;
    gap: 2px;
}

.job-form-section-heading small {
    color: var(--k-gray-600);
}

.job-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.job-location-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0 16px;
}

.sticky-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--k-gray-100);
}


/* Job detail */

.job-detail-notices {
    margin-top: 14px;
}

.job-detail-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 22px;
    margin-top: 18px;
    margin-bottom: 22px;
}

.job-detail-hero h1 {
    margin: 4px 0;
    max-width: 780px;
    overflow-wrap: anywhere;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    letter-spacing: -0.035em;
}

.job-detail-customer {
    margin: 0;
    color: var(--k-gray-600);
    font-size: 1rem;
}

.job-detail-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.job-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
    gap: 16px;
    align-items: start;
}

.job-detail-main,
.job-detail-sidebar {
    display: grid;
    gap: 14px;
}

.detail-card {
    padding: 18px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: var(--k-white);
    box-shadow: 0 3px 16px rgba(24, 34, 53, 0.055);
}

.detail-card-heading,
.detail-card-heading-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-card-heading {
    margin-bottom: 14px;
}

.detail-heading-between {
    justify-content: space-between;
}

.detail-card-heading > div:not(.detail-card-heading-inner),
.detail-card-heading-inner > div {
    display: grid;
    gap: 1px;
}

.detail-card-heading small {
    color: var(--k-gray-600);
    font-size: 0.72rem;
}

.detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--k-blue-soft);
    color: var(--k-blue-dark);
    font-weight: 900;
}

.detail-address {
    display: grid;
    gap: 3px;
    margin-bottom: 14px;
    overflow-wrap: anywhere;
}

.detail-address span {
    color: var(--k-gray-600);
}

.navigation-button {
    width: fit-content;
}

.detail-value-large {
    font-size: 1.15rem;
    font-weight: 800;
}

.detail-value-large span {
    color: var(--k-gray-600);
}

.detail-note {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.detail-empty {
    padding: 13px;
    border-radius: 10px;
    background: var(--k-gray-50);
    color: var(--k-gray-600);
    font-size: 0.88rem;
}

.detail-empty-action {
    display: grid;
    gap: 3px;
}

.detail-empty-action strong {
    color: var(--k-ink);
}

.detail-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--k-gray-100);
    color: var(--k-gray-600);
    font-size: 0.76rem;
    font-weight: 800;
}


.job-assignment-list {
    display: grid;
}

.job-assignment-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--k-gray-100);
}

.job-assignment-row:last-child {
    border-bottom: 0;
}

.job-assignment-row > div:nth-child(2) {
    display: grid;
    gap: 2px;
}

.job-assignment-row span,
.job-assignment-row small {
    color: var(--k-gray-600);
    font-size: 0.78rem;
}

.detail-more-hint {
    margin-top: 10px;
    color: var(--k-gray-400);
    font-size: 0.78rem;
}


.status-quick-field {
    margin-bottom: 9px;
}

.status-save-button {
    width: 100%;
}

.finished-reminder {
    display: grid;
    gap: 3px;
    margin-top: 14px;
    padding: 11px;
    border-radius: 10px;
    background: var(--k-orange-soft);
    color: var(--k-ink);
}

.finished-reminder span {
    color: #785423;
    font-size: 0.8rem;
    line-height: 1.4;
}


.detail-meta-list {
    display: grid;
    gap: 10px;
}

.detail-meta-list > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.detail-meta-list span {
    color: var(--k-gray-600);
    font-size: 0.8rem;
}

.detail-meta-list strong {
    max-width: 60%;
    text-align: right;
    overflow-wrap: anywhere;
    font-size: 0.82rem;
}


/* Keep all light buttons readable */

.job-detail-layout .btn-secondary,
.job-form-page .btn-secondary,
.navigation-button {
    background: #ffffff !important;
    color: #182235 !important;
}


/* Responsive */

@media (max-width: 950px) {
    .job-list-head {
        display: none;
    }

    .job-list {
        display: grid;
        gap: 10px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .job-row {
        grid-template-columns: 1fr 1fr;
        border: 1px solid var(--k-gray-200);
        border-radius: var(--k-radius);
        background: var(--k-white);
        box-shadow: var(--k-shadow);
    }

    .job-main-cell {
        grid-column: 1 / -1;
    }

    .job-row .row-action {
        text-align: left;
    }

    .job-detail-layout {
        grid-template-columns: 1fr;
    }

    .job-detail-sidebar {
        grid-row: 1;
    }
}


@media (max-width: 650px) {
    .job-review-hint {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .job-review-hint > a {
        grid-column: 2;
    }

    .job-row {
        grid-template-columns: 1fr;
    }

    .job-main-cell {
        grid-column: 1;
    }

    .job-title-link,
    .job-customer,
    .job-address {
        white-space: normal;
        overflow: visible;
    }

    .job-form-card {
        padding: 18px 14px;
    }

    .job-form-grid,
    .job-location-grid {
        grid-template-columns: 1fr;
    }

    .sticky-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sticky-form-actions .btn {
        width: 100%;
    }

    .job-detail-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .job-detail-hero-actions {
        justify-content: space-between;
    }

    .job-detail-hero-actions .btn {
        flex: 1;
    }

    .navigation-button {
        width: 100%;
    }

    .job-assignment-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .job-assignment-row > small {
        grid-column: 2;
    }

    .detail-meta-list > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .detail-meta-list strong {
        max-width: 100%;
        text-align: left;
    }
}


/* ==========================================================
   KED-6 — Weekly deployment planner
   ========================================================== */

.planner-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
}

.planner-week-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--k-gray-200);
    border-radius: 10px;
    background: #ffffff;
    color: #182235;
    font-size: 1.1rem;
    font-weight: 900;
    text-decoration: none;
}

.planner-week-button:hover {
    border-color: var(--k-blue);
    color: var(--k-blue-dark);
}

.planner-week-title {
    display: grid;
    min-width: 210px;
    text-align: center;
}

.planner-week-title small {
    color: var(--k-gray-600);
}

.planner-week-title strong {
    font-size: 1.05rem;
}

.planner-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planner-conflict-banner {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #eab4ae;
    border-radius: var(--k-radius);
    background: var(--k-red-soft);
}

.planner-conflict-banner > span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--k-red);
    color: #ffffff;
    font-weight: 900;
}

.planner-conflict-banner > div {
    display: grid;
    gap: 2px;
}

.planner-conflict-banner small {
    color: #7d433d;
}


/* Desktop board */

.planner-desktop {
    overflow-x: auto;
    padding-bottom: 8px;
}

.planner-board {
    min-width: 1180px;
    overflow: hidden;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: var(--k-white);
    box-shadow: var(--k-shadow);
}

.planner-board-head,
.planner-board-row {
    display: grid;
    grid-template-columns:
        180px
        repeat(7, minmax(135px, 1fr));
}

.planner-board-head {
    background: var(--k-ink);
    color: #ffffff;
}

.planner-employee-head,
.planner-day-head {
    padding: 11px;
    border-right: 1px solid rgba(255,255,255,0.09);
}

.planner-employee-head {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.planner-day-head {
    display: grid;
    gap: 1px;
    text-align: center;
}

.planner-day-head span {
    color: #aebbd0;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.planner-day-head strong {
    font-size: 0.9rem;
}

.planner-day-head small {
    color: #aebbd0;
    font-size: 0.66rem;
}

.planner-day-today {
    background: var(--k-blue-dark);
    box-shadow:
        inset 0 -4px 0 var(--k-electric);
}

.planner-day-weekend {
    background-color: rgba(255,255,255,0.035);
}


.planner-board-row {
    min-height: 122px;
    border-bottom: 1px solid var(--k-gray-100);
}

.planner-board-row:last-child {
    border-bottom: 0;
}

.planner-employee-cell {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px;
    border-right: 1px solid var(--k-gray-100);
    background: #fbfcfe;
}

.planner-employee-cell > div:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.planner-employee-cell strong {
    overflow-wrap: anywhere;
    font-size: 0.84rem;
}

.planner-employee-cell span {
    color: var(--k-green);
    font-size: 0.7rem;
}


.planner-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 7px;
    border-right: 1px solid var(--k-gray-100);
    background: #ffffff;
}

.planner-cell:last-child {
    border-right: 0;
}

.planner-cell:hover {
    background: #f9fbff;
}

.planner-cell-today {
    background: #f7faff;
}

.planner-cell-weekend {
    background: #fafafa;
}

.planner-cell-unavailable {
    background:
        repeating-linear-gradient(
            -45deg,
            #fafafa,
            #fafafa 7px,
            #f3f4f6 7px,
            #f3f4f6 14px
        );
}

.planner-cell-conflict {
    background: var(--k-red-soft);
    box-shadow:
        inset 3px 0 0 var(--k-red);
}

.planner-absence-label {
    width: fit-content;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--k-gray-200);
    color: var(--k-gray-600);
    font-size: 0.65rem;
    font-weight: 800;
}


.planner-assignment {
    display: grid;
    gap: 2px;
    padding: 7px;
    border-left: 3px solid var(--k-blue);
    border-radius: 8px;
    background: var(--k-blue-soft);
    color: var(--k-ink);
    text-decoration: none;
}

.planner-assignment:hover {
    background: #dfeaff;
}

.planner-assignment-conflict {
    border-left-color: var(--k-red);
    background: #ffffff;
}

.planner-assignment-time {
    color: var(--k-blue-dark);
    font-size: 0.66rem;
    font-weight: 850;
}

.planner-assignment strong {
    overflow-wrap: anywhere;
    font-size: 0.74rem;
    line-height: 1.25;
}

.planner-assignment small {
    overflow-wrap: anywhere;
    color: var(--k-gray-600);
    font-size: 0.66rem;
}


.planner-add-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    margin-top: auto;
    border: 1px dashed var(--k-gray-200);
    border-radius: 7px;
    color: var(--k-gray-400);
    text-decoration: none;
    font-weight: 800;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.planner-cell:hover .planner-add-cell,
.planner-add-cell:focus {
    opacity: 1;
}

.planner-add-cell:hover {
    border-color: var(--k-blue);
    background: var(--k-blue-soft);
    color: var(--k-blue);
}


/* Mobile planner */

.planner-mobile {
    display: none;
}

.planner-mobile-day {
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: var(--k-white);
    box-shadow: var(--k-shadow);
}

.planner-mobile-day-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--k-ink);
    color: #ffffff;
}

.planner-mobile-day-head > div {
    display: grid;
}

.planner-mobile-day-head span {
    color: #c0cbda;
    font-size: 0.78rem;
}

.planner-mobile-today {
    border-bottom: 4px solid var(--k-electric);
}

.holiday-chip {
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--k-electric) !important;
    color: var(--k-ink) !important;
    font-size: 0.68rem !important;
    font-weight: 800;
}

.planner-mobile-employee {
    padding: 13px;
    border-bottom: 1px solid var(--k-gray-100);
}

.planner-mobile-employee:last-child {
    border-bottom: 0;
}

.planner-mobile-person {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.planner-mobile-person > strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mobile-unavailable {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--k-red-soft);
    color: var(--k-red);
    font-size: 0.68rem;
    font-weight: 800;
}

.planner-mobile-assignment {
    display: grid;
    gap: 2px;
    margin-bottom: 6px;
    padding: 9px 10px;
    border-left: 3px solid var(--k-blue);
    border-radius: 9px;
    background: var(--k-blue-soft);
    color: var(--k-ink);
    text-decoration: none;
}

.planner-mobile-assignment > span,
.planner-mobile-assignment > small {
    color: var(--k-gray-600);
    font-size: 0.75rem;
}

.planner-mobile-conflict {
    border-left-color: var(--k-red);
    background: var(--k-red-soft);
}

.planner-mobile-empty {
    color: var(--k-gray-400);
    font-size: 0.8rem;
}

.planner-mobile-add {
    display: inline-flex;
    margin-top: 7px;
    color: var(--k-blue);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}


/* Assignment form */

.assignment-form-page {
    width: min(100%, 720px);
    margin: 0 auto;
}

.assignment-form-card {
    margin-top: 18px;
    padding: 24px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: var(--k-white);
    box-shadow: var(--k-shadow);
}

.assignment-form-card h1 {
    margin: 5px 0 8px;
}

.assignment-primary-grid,
.assignment-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.job-select-search {
    position: relative;
    margin-bottom: 8px;
}

.job-select-search span {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: var(--k-gray-400);
}

.job-select-search input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px 9px 39px;
    border: 1px solid var(--k-gray-200);
    border-radius: 9px;
    background: var(--k-gray-25);
    color: var(--k-ink);
    font: inherit;
}

.job-select-search input:focus {
    outline: 3px solid var(--k-blue-soft);
    border-color: var(--k-blue);
}

.assignment-more {
    margin: 20px 0;
    padding: 12px 14px;
    border: 1px solid var(--k-gray-200);
    border-radius: 10px;
    background: var(--k-gray-25);
}

.assignment-more summary {
    cursor: pointer;
    color: var(--k-blue-dark);
    font-weight: 800;
}

.assignment-more[open] summary {
    margin-bottom: 14px;
}

.conflict-override {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    padding: 11px;
    border-radius: 9px;
    background: var(--k-orange-soft);
}

.conflict-override input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--k-orange);
}

.conflict-override label {
    display: grid;
    gap: 2px;
}

.conflict-override span {
    color: #785423;
    font-size: 0.78rem;
}

.planner-form-warning {
    display: grid;
    gap: 4px;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid #eab4ae;
    border-radius: 10px;
    background: var(--k-red-soft);
    color: #7d3029;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* Contrast guarantee */

.planner-week-button,
.assignment-form-card .btn-secondary {
    background: #ffffff !important;
    color: #182235 !important;
}


@media (max-width: 760px) {
    .planner-desktop {
        display: none;
    }

    .planner-mobile {
        display: block;
    }

    .planner-metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .assignment-primary-grid,
    .assignment-time-grid {
        grid-template-columns: 1fr;
    }

    .assignment-form-card {
        padding: 18px 14px;
    }
}


@media (max-width: 480px) {
    .planner-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .planner-metrics .metric-card:last-child {
        grid-column: 1 / -1;
    }

    .planner-week-title {
        min-width: 0;
        flex: 1;
    }
}


/* ==========================================================
   KED-7 — Employee mobile read-only experience
   Optimized for field use / smartphone
   ========================================================== */

.employee-mobile-shell {
    width: min(100%, 720px);
    margin: 0 auto;
    color: var(--k-ink);
}


/* Header */

.employee-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    padding: 20px;
    border-radius: var(--k-radius-lg);
    background:
        linear-gradient(
            135deg,
            var(--k-ink),
            #233653
        );
    color: #ffffff;
    box-shadow: var(--k-shadow);
}

.employee-kicker {
    margin-bottom: 3px;
    color: var(--k-electric);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.employee-app-header h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.55rem, 7vw, 2.2rem);
}

.employee-app-header p {
    margin: 4px 0 0;
    color: #c6d0df;
}

.employee-avatar-large {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    height: 54px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    background: var(--k-blue);
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 900;
}


/* Section heading */

.employee-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.employee-section-heading > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.employee-section-heading strong {
    font-size: 1rem;
}

.employee-section-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--k-green);
}

.employee-dot-blue {
    background: var(--k-blue);
}

.employee-dot-yellow {
    background: var(--k-electric);
}

.employee-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--k-blue-soft);
    color: var(--k-blue-dark);
    font-size: 0.75rem;
    font-weight: 850;
}

.employee-week-range {
    color: var(--k-gray-600);
    font-size: 0.78rem;
}


/* Today */

.employee-today,
.employee-week-section,
.employee-upcoming-section {
    margin-bottom: 25px;
}

.employee-today-list {
    display: grid;
    gap: 12px;
}

.employee-job-card {
    overflow: hidden;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: #ffffff;
    box-shadow: var(--k-shadow);
}

.employee-job-card-today {
    border-top: 4px solid var(--k-blue);
}

.employee-job-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px 0;
}

.employee-job-time {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.employee-job-time strong {
    font-size: 1.13rem;
}

.employee-job-time span {
    color: var(--k-gray-600);
    font-size: 0.85rem;
}

.employee-live-chip {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--k-green-soft);
    color: var(--k-green);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}


.employee-job-main {
    padding: 13px 15px 15px;
}

.employee-job-main h2 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 1.25rem;
    line-height: 1.25;
}

.employee-customer {
    margin-top: 4px;
    color: var(--k-gray-600);
    font-weight: 650;
}

.employee-address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 11px;
    border-radius: 10px;
    background: var(--k-gray-50);
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.employee-address-icon {
    flex: 0 0 auto;
    color: var(--k-blue);
    font-weight: 900;
}

.employee-task-preview {
    display: grid;
    gap: 2px;
    margin-top: 12px;
}

.employee-task-preview span {
    color: var(--k-gray-600);
    font-size: 0.72rem;
}

.employee-task-preview strong {
    overflow-wrap: anywhere;
}


.employee-job-actions {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr;
    gap: 8px;
    padding: 12px 15px 15px;
    border-top: 1px solid var(--k-gray-100);
}

.employee-action-primary,
.employee-action-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    border-radius: 11px;
    font-weight: 850;
    text-decoration: none;
}

.employee-action-primary {
    background: var(--k-blue);
    color: #ffffff !important;
}

.employee-action-primary:hover {
    background: var(--k-blue-dark);
    color: #ffffff !important;
}

.employee-action-secondary {
    border: 1px solid var(--k-gray-200);
    background: #ffffff;
    color: #182235 !important;
}

.employee-action-secondary:hover {
    border-color: var(--k-blue);
    background: var(--k-blue-soft);
    color: var(--k-blue-dark) !important;
}


/* No work / absence */

.employee-free-day,
.employee-day-off {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #c3e5d7;
    border-radius: var(--k-radius);
    background: var(--k-green-soft);
}

.employee-free-check,
.employee-day-off-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--k-green);
    font-size: 1rem;
    font-weight: 900;
}

.employee-free-day > div:last-child,
.employee-day-off > div:last-child {
    display: grid;
    gap: 3px;
}

.employee-free-day span,
.employee-day-off span {
    color: #48695d;
    font-size: 0.82rem;
}

.employee-day-off {
    margin-bottom: 10px;
    border-color: #ead9a2;
    background: var(--k-electric-soft);
}

.employee-day-off .employee-day-off-icon {
    color: #8a6500;
}

.employee-day-off span {
    color: #705c23;
}

.employee-day-off-holiday {
    background: #fff9e6;
}


/* Week */

.employee-week-list {
    overflow: hidden;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: #ffffff;
    box-shadow: var(--k-shadow);
}

.employee-week-day {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    border-bottom: 1px solid var(--k-gray-100);
}

.employee-week-day:last-child {
    border-bottom: 0;
}

.employee-week-day-today {
    background: #f7faff;
    box-shadow:
        inset 4px 0 0 var(--k-blue);
}

.employee-week-date {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 11px 6px;
    border-right: 1px solid var(--k-gray-100);
    background: var(--k-gray-50);
}

.employee-week-date span {
    color: var(--k-gray-600);
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
}

.employee-week-date strong {
    margin-top: 1px;
    font-size: 1.1rem;
}

.employee-week-content {
    display: grid;
    gap: 6px;
    padding: 9px;
}

.employee-week-assignment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 9px;
    border-radius: 9px;
    background: var(--k-blue-soft);
    color: var(--k-ink);
    text-decoration: none;
}

.employee-week-assignment > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.employee-week-assignment strong,
.employee-week-assignment span {
    overflow-wrap: anywhere;
}

.employee-week-assignment strong {
    font-size: 0.83rem;
}

.employee-week-assignment span {
    color: var(--k-gray-600);
    font-size: 0.73rem;
}

.employee-week-assignment time {
    flex: 0 0 auto;
    color: var(--k-blue-dark);
    font-size: 0.78rem;
    font-weight: 850;
}

.employee-week-absence {
    display: grid;
    gap: 2px;
    padding: 8px 9px;
    border-radius: 8px;
    background: var(--k-electric-soft);
}

.employee-week-absence strong {
    font-size: 0.8rem;
}

.employee-week-absence span {
    color: #705c23;
    font-size: 0.7rem;
}

.employee-week-empty {
    align-self: center;
    color: var(--k-gray-400);
    font-size: 0.78rem;
}


/* Upcoming */

.employee-upcoming-list {
    display: grid;
    gap: 8px;
}

.employee-upcoming-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--k-gray-200);
    border-radius: 12px;
    background: #ffffff;
    color: var(--k-ink);
    text-decoration: none;
}

.employee-upcoming-card:hover {
    border-color: #cad6e6;
    background: #fafcff;
}

.employee-upcoming-date {
    display: grid;
    justify-items: center;
}

.employee-upcoming-date span {
    color: var(--k-gray-600);
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
}

.employee-upcoming-date strong {
    margin-top: 2px;
    font-size: 0.85rem;
}

.employee-upcoming-main {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.employee-upcoming-main strong,
.employee-upcoming-main span,
.employee-upcoming-main small {
    overflow-wrap: anywhere;
}

.employee-upcoming-main strong {
    font-size: 0.86rem;
}

.employee-upcoming-main span {
    color: var(--k-gray-600);
    font-size: 0.76rem;
}

.employee-upcoming-main small {
    color: var(--k-gray-400);
    font-size: 0.72rem;
}

.employee-upcoming-time {
    color: var(--k-blue-dark);
    font-size: 0.8rem;
    font-weight: 850;
}


/* Refresh note */

.employee-refresh-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 26px 0;
    padding: 11px;
    border-radius: 10px;
    background: var(--k-gray-100);
    color: var(--k-gray-600);
}

.employee-refresh-note > span {
    font-weight: 900;
}

.employee-refresh-note p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
}


/* Employee detail */

.employee-back-link,
.employee-back-bottom {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    color: var(--k-blue-dark);
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
}

.employee-detail-hero {
    display: flex;
    align-items: stretch;
    gap: 9px;
    margin: 12px 0 20px;
}

.employee-detail-date,
.employee-detail-time {
    display: grid;
    flex: 1;
    padding: 13px;
    border-radius: 12px;
    background: var(--k-ink);
    color: #ffffff;
}

.employee-detail-date span,
.employee-detail-time span {
    color: #bac6d6;
    font-size: 0.7rem;
}

.employee-detail-date strong,
.employee-detail-time strong {
    margin-top: 2px;
}

.employee-detail-time {
    background: var(--k-blue);
}


.employee-detail-job {
    margin-bottom: 18px;
}

.employee-detail-job h1 {
    margin: 4px 0;
    overflow-wrap: anywhere;
    font-size: clamp(1.55rem, 7vw, 2.25rem);
    line-height: 1.2;
}

.employee-detail-job p {
    margin: 0;
    color: var(--k-gray-600);
}


.employee-detail-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--k-gray-200);
    border-radius: 12px;
    background: #ffffff;
}

.employee-detail-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 37px;
    height: 37px;
    border-radius: 10px;
    background: var(--k-blue-soft);
    color: var(--k-blue-dark);
    font-weight: 900;
}

.employee-icon-yellow {
    background: var(--k-electric-soft);
    color: #806000;
}

.employee-detail-card-content {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.employee-detail-card-content small {
    color: var(--k-gray-600);
}

.employee-detail-card-content strong,
.employee-detail-card-content span {
    overflow-wrap: anywhere;
}

.employee-detail-card-content span {
    color: var(--k-gray-600);
}


.employee-navigation-big {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    margin: 10px 0 18px;
    padding: 10px 13px;
    border-radius: 12px;
    background: var(--k-blue);
    color: #ffffff !important;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(37,99,217,0.22);
}

.employee-navigation-big > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,0.15);
}

.employee-navigation-big > div {
    display: grid;
}

.employee-navigation-big small {
    color: #d8e4ff;
}

.employee-navigation-big > span:last-child {
    font-size: 1.1rem;
    font-weight: 900;
}


.employee-note-card {
    margin: 10px 0;
    padding: 14px;
    border-radius: 12px;
    background: var(--k-electric-soft);
}

.employee-note-card small {
    color: #79632d;
    font-weight: 800;
}

.employee-note-card p {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
    line-height: 1.55;
}


.employee-simple-info {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 13px;
    border-radius: 10px;
    background: var(--k-gray-100);
    color: var(--k-gray-600);
}

.employee-simple-info > span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--k-blue);
    font-weight: 900;
}

.employee-simple-info p {
    margin: 2px 0 0;
    font-size: 0.82rem;
}

.employee-back-bottom {
    margin-top: 18px;
}


/* Account not linked */

.employee-setup-state {
    margin: 30px auto;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: #ffffff;
    box-shadow: var(--k-shadow);
}

.employee-setup-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 13px;
    border-radius: 16px;
    background: var(--k-electric-soft);
    font-size: 1.45rem;
}

.employee-setup-state h1 {
    margin: 0 0 8px;
}

.employee-setup-state p {
    color: var(--k-gray-600);
}

.employee-help-text {
    font-weight: 750;
}


/* Very small phones */

@media (max-width: 430px) {
    .employee-mobile-shell {
        width: 100%;
    }

    .employee-app-header {
        padding: 17px 15px;
    }

    .employee-avatar-large {
        flex-basis: 46px;
        height: 46px;
    }

    .employee-job-actions {
        grid-template-columns: 1fr;
    }

    .employee-action-primary,
    .employee-action-secondary {
        width: 100%;
    }

    .employee-upcoming-card {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .employee-upcoming-time {
        grid-column: 2;
    }

    .employee-detail-hero {
        flex-direction: column;
    }
}


/* ==========================================================
   KED-8 — Billing control / Noch abzurechnen
   ========================================================== */

.btn-billing {
    background: var(--k-electric) !important;
    color: #182235 !important;
    border-color: #ddbd43 !important;
}

.btn-billing:hover {
    background: #e9bc24 !important;
    color: #182235 !important;
}

.billing-button-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    margin-right: 7px;
    padding: 0 6px;
    border-radius: 999px;
    background: #182235;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
}


.billing-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.billing-summary-card {
    padding: 16px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius);
    background: #ffffff;
}

.billing-summary-card > span {
    color: var(--k-gray-600);
    font-size: 0.76rem;
    font-weight: 800;
}

.billing-summary-card > strong {
    display: block;
    margin-top: 6px;
    font-size: 1.7rem;
}

.billing-summary-card > small {
    color: var(--k-gray-600);
}

.billing-summary-main {
    border-color: #e2c856;
    background: var(--k-electric-soft);
}

.billing-summary-warning {
    border-color: #e7b1ab;
    background: var(--k-red-soft);
}


.billing-list {
    display: grid;
    gap: 10px;
}

.billing-card {
    display: grid;
    grid-template-columns:
        78px
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(24,34,53,0.06);
}

.billing-age {
    display: flex;
    align-items: center;
    gap: 7px;
}

.billing-age > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    font-weight: 900;
}

.billing-age-normal {
    background: var(--k-green-soft);
    color: var(--k-green);
}

.billing-age-warning {
    background: var(--k-orange-soft);
    color: var(--k-orange);
}

.billing-age-danger {
    background: var(--k-red-soft);
    color: var(--k-red);
}

.billing-age > div {
    display: grid;
}

.billing-age strong {
    font-size: 1.05rem;
}

.billing-age small {
    color: var(--k-gray-600);
    font-size: 0.68rem;
}


.billing-main {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.billing-title {
    overflow-wrap: anywhere;
    color: var(--k-ink);
    font-size: 1rem;
    font-weight: 850;
    text-decoration: none;
}

.billing-title:hover {
    color: var(--k-blue);
}

.billing-customer {
    color: var(--k-gray-600);
    font-size: 0.84rem;
}

.billing-address {
    overflow-wrap: anywhere;
    color: var(--k-gray-400);
    font-size: 0.78rem;
}

.billing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 7px;
}

.billing-meta > span,
.billing-team {
    color: var(--k-gray-600);
    font-size: 0.75rem;
}

.billing-team {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.billing-actions {
    display: grid;
    gap: 7px;
    min-width: 170px;
}

.btn-success {
    background: var(--k-green) !important;
    color: #ffffff !important;
    border-color: var(--k-green) !important;
}

.btn-success:hover {
    background: #106c50 !important;
    color: #ffffff !important;
}


.billing-empty {
    padding: 50px 20px;
    text-align: center;
    border: 1px solid #c3e5d7;
    border-radius: var(--k-radius-lg);
    background: var(--k-green-soft);
}

.billing-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--k-green);
    font-size: 1.4rem;
    font-weight: 900;
}

.billing-empty h2 {
    margin: 0 0 6px;
}

.billing-empty p {
    margin: 0;
    color: #48695d;
}


/* Explicit confirmation */

.billing-confirm-page {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.billing-confirm-card {
    width: min(100%, 600px);
    padding: 26px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: #ffffff;
    box-shadow: var(--k-shadow);
}

.billing-confirm-icon,
.billing-reopen-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 13px;
    border-radius: 14px;
    background: var(--k-green-soft);
    color: var(--k-green);
    font-size: 1.3rem;
    font-weight: 900;
}

.billing-reopen-icon {
    background: var(--k-blue-soft);
    color: var(--k-blue);
}

.billing-confirm-card h1 {
    margin: 5px 0 15px;
}

.billing-confirm-job {
    display: grid;
    gap: 3px;
    padding: 13px;
    border-radius: 10px;
    background: var(--k-gray-50);
}

.billing-confirm-job span {
    color: var(--k-gray-600);
}

.billing-confirm-steps {
    display: grid;
    gap: 8px;
    margin: 18px 0;
}

.billing-confirm-steps > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.billing-confirm-steps span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--k-ink);
    color: var(--k-electric);
    font-size: 0.75rem;
    font-weight: 900;
}

.billing-confirm-steps p {
    margin: 0;
}

.billing-confirm-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid #b9dfd1;
    border-radius: 10px;
    background: var(--k-green-soft);
    cursor: pointer;
}

.billing-confirm-checkbox input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--k-green);
}

.billing-confirm-checkbox > span {
    display: grid;
    gap: 3px;
}

.billing-confirm-checkbox small {
    color: #48695d;
}

.billing-confirm-actions {
    margin-top: 18px;
}

.billing-reopen-explanation {
    margin: 18px 0;
    padding: 12px;
    border-radius: 10px;
    background: var(--k-blue-soft);
}


/* Job detail billing state */

.finished-reminder-strong {
    border: 1px solid #e3c655;
    background: var(--k-electric-soft);
}

.finished-reminder-strong small {
    margin-top: 5px;
    color: #765f20;
}

.status-main-action {
    width: 100%;
    margin-top: 12px;
}

.billing-reopen-link {
    display: block;
    margin-top: 12px;
    text-align: center;
    color: var(--k-gray-600);
    font-size: 0.78rem;
    font-weight: 700;
}

.invoiced-confirmed-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--k-green-soft);
}

.invoiced-confirmed-card > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--k-green);
    font-weight: 900;
}

.invoiced-confirmed-card > div {
    display: grid;
    gap: 2px;
}

.invoiced-confirmed-card small {
    color: #48695d;
}

.status-help {
    margin-top: 10px;
    color: var(--k-gray-600);
    font-size: 0.78rem;
    line-height: 1.45;
}


/* Dashboard billing attention */

.dashboard-billing-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 16px;
    border-radius: var(--k-radius-lg);
}

.dashboard-billing-open {
    border: 1px solid #e2c856;
    background: var(--k-electric-soft);
}

.dashboard-billing-clear {
    border: 1px solid #c3e5d7;
    background: var(--k-green-soft);
}

.dashboard-billing-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--k-ink);
    color: var(--k-electric);
    font-size: 1.2rem;
    font-weight: 900;
}

.dashboard-billing-main {
    display: grid;
    gap: 2px;
}

.dashboard-billing-main > span {
    color: var(--k-gray-600);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.dashboard-billing-main p {
    margin: 0;
    color: var(--k-gray-600);
    font-size: 0.82rem;
}


/* Mobile */

@media (max-width: 760px) {
    .billing-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .billing-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .billing-age {
        padding-bottom: 9px;
        border-bottom: 1px solid var(--k-gray-100);
    }

    .billing-actions {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .billing-actions .btn {
        width: 100%;
    }

    .dashboard-billing-card {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .dashboard-billing-card > .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}


@media (max-width: 430px) {
    .billing-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .billing-confirm-card {
        padding: 19px 14px;
    }

    .billing-confirm-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   KED-9 — Lars owner dashboard
   Calm, operational, action-first
   ========================================================== */

.owner-dashboard {
    width: 100%;
}

.owner-dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.owner-dashboard-hero h1 {
    margin: 4px 0;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    letter-spacing: -0.04em;
}

.owner-dashboard-hero p {
    margin: 0;
    color: var(--k-gray-600);
}

.owner-dashboard-hero-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}


/* Attention first */

.owner-attention-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 15px;
    border-radius: var(--k-radius-lg);
}

.owner-attention-danger {
    border: 1px solid #e5aaa4;
    background: var(--k-red-soft);
}

.owner-attention-billing {
    border: 1px solid #e1c756;
    background: var(--k-electric-soft);
}

.owner-attention-warning {
    border: 1px solid #ebd49d;
    background: var(--k-orange-soft);
}

.owner-attention-success {
    border: 1px solid #bfe2d4;
    background: var(--k-green-soft);
}

.owner-attention-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--k-ink);
    color: var(--k-electric);
    font-size: 1.25rem;
    font-weight: 900;
}

.owner-attention-main {
    display: grid;
    gap: 2px;
}

.owner-attention-main > span {
    color: var(--k-gray-600);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.owner-attention-main > strong {
    font-size: 1.03rem;
}

.owner-attention-main p {
    margin: 0;
    color: var(--k-gray-600);
    font-size: 0.82rem;
}


/* Holiday */

.dashboard-holiday-banner {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
    padding: 11px 13px;
    border: 1px solid #ead99b;
    border-radius: 11px;
    background: #fff9e7;
}

.dashboard-holiday-banner > div:first-child {
    font-size: 1.2rem;
}

.dashboard-holiday-banner > div:last-child {
    display: grid;
    gap: 2px;
}

.dashboard-holiday-banner span {
    color: var(--k-gray-600);
    font-size: 0.8rem;
}


/* Main number cards */

.dashboard-number-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.dashboard-number-card {
    display: grid;
    gap: 3px;
    padding: 14px 15px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius);
    background: #ffffff;
    color: var(--k-ink);
    text-decoration: none;
    box-shadow: 0 3px 14px rgba(24,34,53,0.04);
}

.dashboard-number-card:hover {
    border-color: #c4d2e5;
    box-shadow: var(--k-shadow);
}

.dashboard-number-card > span {
    color: var(--k-gray-600);
    font-size: 0.74rem;
    font-weight: 750;
}

.dashboard-number-card > strong {
    font-size: 1.7rem;
    line-height: 1.1;
}

.dashboard-number-card > small {
    color: var(--k-gray-500, #758195);
    font-size: 0.72rem;
}

.dashboard-number-danger {
    border-color: #e6b0aa;
    background: var(--k-red-soft);
}

.dashboard-number-billing {
    border-color: #e1c756;
    background: var(--k-electric-soft);
}


/* Main layout */

.owner-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
    gap: 14px;
    align-items: start;
}

.owner-dashboard-main,
.owner-dashboard-side {
    display: grid;
    gap: 14px;
}

.dashboard-panel {
    padding: 16px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: #ffffff;
    box-shadow: 0 3px 16px rgba(24,34,53,0.05);
}

.dashboard-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.dashboard-panel-heading > div {
    display: grid;
    gap: 1px;
}

.dashboard-panel-heading span {
    color: var(--k-gray-600);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.dashboard-panel-heading h2 {
    margin: 0;
    font-size: 1.02rem;
}

.dashboard-panel-heading > a,
.dashboard-text-link {
    color: var(--k-blue-dark);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-side-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--k-gray-100);
    color: var(--k-ink);
    font-size: 0.78rem;
}


/* Today's assignments */

.dashboard-assignment-list {
    display: grid;
}

.dashboard-assignment {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.8fr)
        minmax(200px, 1.4fr)
        auto;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--k-gray-100);
}

.dashboard-assignment:last-child {
    border-bottom: 0;
}

.dashboard-assignment-conflict {
    margin: 3px -8px;
    padding: 10px 8px;
    border: 1px solid #e6b0aa;
    border-radius: 10px;
    background: var(--k-red-soft);
}

.dashboard-assignment-person {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dashboard-assignment-person > div:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.dashboard-assignment-person strong {
    overflow-wrap: anywhere;
    font-size: 0.83rem;
}

.dashboard-assignment-person span {
    color: var(--k-gray-600);
    font-size: 0.73rem;
}

.dashboard-assignment-job {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.dashboard-assignment-job a,
.dashboard-assignment-job strong {
    overflow-wrap: anywhere;
    color: var(--k-ink);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-assignment-job a:hover {
    color: var(--k-blue);
}

.dashboard-assignment-job span,
.dashboard-assignment-job small {
    overflow-wrap: anywhere;
    color: var(--k-gray-600);
    font-size: 0.72rem;
}

.dashboard-assignment-edit {
    color: var(--k-blue-dark);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}


/* Current jobs */

.dashboard-current-jobs {
    display: grid;
}

.dashboard-current-job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--k-gray-100);
    color: var(--k-ink);
    text-decoration: none;
}

.dashboard-current-job:last-child {
    border-bottom: 0;
}

.dashboard-current-job > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.dashboard-current-job > div strong,
.dashboard-current-job > div span {
    overflow-wrap: anywhere;
}

.dashboard-current-job > div strong {
    font-size: 0.83rem;
}

.dashboard-current-job > div span {
    color: var(--k-gray-600);
    font-size: 0.72rem;
}


/* Billing panel */

.dashboard-billing-panel-open {
    border-color: #dfc452;
    background:
        linear-gradient(
            180deg,
            var(--k-electric-soft),
            #ffffff 42%
        );
}

.dashboard-billing-preview {
    display: grid;
    margin-bottom: 12px;
}

.dashboard-billing-preview > a {
    display: grid;
    gap: 1px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(24,34,53,0.08);
    color: var(--k-ink);
    text-decoration: none;
}

.dashboard-billing-preview > a:last-child {
    border-bottom: 0;
}

.dashboard-billing-preview strong,
.dashboard-billing-preview span,
.dashboard-billing-preview small {
    overflow-wrap: anywhere;
}

.dashboard-billing-preview strong {
    font-size: 0.82rem;
}

.dashboard-billing-preview span,
.dashboard-billing-preview small {
    color: var(--k-gray-600);
    font-size: 0.7rem;
}

.dashboard-full-button {
    width: 100%;
}


/* Absences */

.dashboard-absence-list {
    display: grid;
    margin-bottom: 10px;
}

.dashboard-absence {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid var(--k-gray-100);
}

.dashboard-absence:last-child {
    border-bottom: 0;
}

.dashboard-absence > div {
    display: grid;
    gap: 2px;
}

.dashboard-absence strong {
    overflow-wrap: anywhere;
    font-size: 0.82rem;
}

.dashboard-absence > div span {
    color: var(--k-gray-600);
    font-size: 0.72rem;
}

.dashboard-conflict-label {
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--k-red-soft);
    color: var(--k-red) !important;
    font-size: 0.67rem !important;
    font-weight: 850;
}


/* Job status */

.dashboard-status-list {
    display: grid;
}

.dashboard-status-list > a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--k-gray-100);
    color: var(--k-ink);
    text-decoration: none;
}

.dashboard-status-list > a:last-child {
    border-bottom: 0;
}

.dashboard-status-list span {
    color: var(--k-gray-600);
    font-size: 0.79rem;
}

.dashboard-status-list strong {
    font-size: 0.84rem;
}


/* Calm states */

.dashboard-calm-state {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border-radius: 10px;
    background: var(--k-green-soft);
}

.dashboard-calm-state > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 29px;
    height: 29px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--k-green);
    font-weight: 900;
}

.dashboard-calm-state p {
    margin: 0;
    color: #48695d;
    font-size: 0.8rem;
}

.dashboard-calm-state > a {
    margin-left: auto;
    color: var(--k-green);
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-calm-state.compact {
    padding: 10px;
}


/* Quick actions */

.dashboard-quick-actions {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-lg);
    background: #ffffff;
}

.dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.dashboard-quick-grid > a {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 11px;
    border: 1px solid var(--k-gray-200);
    border-radius: 11px;
    background: var(--k-gray-25);
    color: var(--k-ink);
    text-decoration: none;
}

.dashboard-quick-grid > a:hover {
    border-color: var(--k-blue);
    background: var(--k-blue-soft);
}

.dashboard-quick-grid > a > span {
    display: flex;
    grid-row: 1 / 3;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--k-ink);
    color: var(--k-electric);
    font-weight: 900;
}

.dashboard-quick-grid strong {
    font-size: 0.8rem;
}

.dashboard-quick-grid small {
    color: var(--k-gray-600);
    font-size: 0.68rem;
}


/* Critical contrast guard */

.owner-dashboard .btn-secondary {
    background: #ffffff !important;
    color: #182235 !important;
}

.owner-dashboard .btn-danger {
    background: var(--k-red) !important;
    color: #ffffff !important;
}

.owner-dashboard .btn-billing {
    background: var(--k-electric) !important;
    color: #182235 !important;
}


/* Tablet */

@media (max-width: 980px) {
    .owner-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .owner-dashboard-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .owner-dashboard-side > .dashboard-panel:last-child {
        grid-column: 1 / -1;
    }

    .dashboard-number-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* Phone */

@media (max-width: 680px) {
    .owner-dashboard-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .owner-dashboard-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .owner-dashboard-hero-actions .btn {
        width: 100%;
    }

    .owner-attention-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .owner-attention-card > .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .dashboard-number-grid {
        grid-template-columns: 1fr 1fr;
    }

    .owner-dashboard-side {
        grid-template-columns: 1fr;
    }

    .owner-dashboard-side > .dashboard-panel:last-child {
        grid-column: auto;
    }

    .dashboard-assignment {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .dashboard-assignment-edit {
        min-height: 38px;
        display: flex;
        align-items: center;
    }

    .dashboard-quick-grid {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 430px) {
    .dashboard-number-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-number-card {
        padding: 12px;
    }

    .dashboard-number-card > strong {
        font-size: 1.45rem;
    }

    .dashboard-quick-grid {
        grid-template-columns: 1fr;
    }

    .owner-dashboard-hero-actions {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   KED-10 — Mobile application shell
   App-like owner navigation
   ========================================================== */

.mobile-owner-shell {
    display: none;
}


@media (max-width: 680px) {

    /*
     * Replace desktop website navigation with
     * a compact app bar + bottom navigation.
     */

    body {
        padding-top: 64px;
        padding-bottom:
            calc(
                76px
                + env(safe-area-inset-bottom)
            );
    }

    body.mobile-drawer-open {
        overflow: hidden;
    }

    .topbar {
        display: none !important;
    }

    .mobile-owner-shell {
        display: block;
    }


    /* --------------------------------------
       Top app bar
       -------------------------------------- */

    .mobile-appbar {
        position: fixed;
        z-index: 950;
        top: 0;
        left: 0;
        right: 0;

        display: grid;
        grid-template-columns:
            44px
            minmax(0, 1fr)
            44px;
        align-items: center;

        min-height: 64px;
        padding:
            8px
            12px;

        border-bottom:
            3px solid
            var(--k-electric);

        background: var(--k-ink);
    }

    .mobile-appbar-menu,
    .mobile-appbar-alert {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        padding: 0;

        border: 0;
        border-radius: 12px;

        background:
            rgba(255,255,255,0.08);

        color: #ffffff;

        text-decoration: none;

        cursor: pointer;
    }

    .mobile-appbar-menu svg {
        width: 23px;
        height: 23px;
    }

    .mobile-appbar-alert {
        color: var(--k-electric);
        font-size: 1rem;
        font-weight: 900;
    }

    .mobile-appbar-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        min-width: 0;

        color: #ffffff;
        text-decoration: none;
    }

    .mobile-appbar-brand > span:last-child {
        display: grid;
        min-width: 0;
        gap: 1px;
    }

    .mobile-appbar-brand strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 0.88rem;
        line-height: 1.05;
    }

    .mobile-appbar-brand small {
        color: #aeb8c8;
        font-size: 0.63rem;
        line-height: 1.05;
    }

    .mobile-brand-mark {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 28px;
        height: 28px;

        border-radius: 8px;

        background: var(--k-electric);
        color: #182235;

        font-size: 0.8rem;
    }


    /* --------------------------------------
       Bottom navigation
       -------------------------------------- */

    .mobile-bottom-navigation {
        position: fixed;
        z-index: 950;

        left: 0;
        right: 0;
        bottom: 0;

        display: grid;
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        min-height:
            calc(
                68px
                + env(safe-area-inset-bottom)
            );

        padding:
            5px
            7px
            calc(
                5px
                + env(safe-area-inset-bottom)
            );

        border-top:
            1px solid
            #dfe4ec;

        background:
            rgba(
                255,
                255,
                255,
                0.97
            );

        box-shadow:
            0 -8px 24px
            rgba(
                24,
                34,
                53,
                0.08
            );
    }

    .mobile-bottom-navigation > a,
    .mobile-bottom-navigation > button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

        min-width: 0;
        min-height: 54px;

        padding: 4px;

        border: 0;
        border-radius: 12px;

        background: transparent;
        color: #657083;

        font: inherit;
        font-size: 0.64rem;
        font-weight: 750;

        text-decoration: none;

        cursor: pointer;
    }

    .mobile-bottom-navigation svg {
        width: 23px;
        height: 23px;
    }

    .mobile-bottom-navigation > a.is-active,
    .mobile-bottom-navigation > button.is-active {
        background:
            var(--k-blue-soft);

        color:
            var(--k-blue-dark);
    }

    .mobile-bottom-navigation > a.is-active span,
    .mobile-bottom-navigation > button.is-active span {
        font-weight: 900;
    }


    /* --------------------------------------
       Drawer
       -------------------------------------- */

    .mobile-drawer-backdrop {
        position: fixed;
        z-index: 970;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        padding: 0;
        border: 0;

        opacity: 0;
        visibility: hidden;

        background:
            rgba(
                10,
                17,
                29,
                0.48
            );

        transition:
            opacity 160ms ease,
            visibility 160ms ease;
    }

    .mobile-owner-drawer {
        position: fixed;
        z-index: 980;

        top: 0;
        left: 0;
        bottom: 0;

        display: flex;
        flex-direction: column;

        width: min(
            84vw,
            330px
        );

        padding:
            18px
            15px
            calc(
                18px
                + env(safe-area-inset-bottom)
            );

        transform:
            translateX(-105%);

        overflow-y: auto;

        background: #ffffff;

        box-shadow:
            15px 0 45px
            rgba(
                13,
                24,
                42,
                0.2
            );

        transition:
            transform 190ms ease;
    }

    .mobile-drawer-is-open
    .mobile-drawer-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .mobile-drawer-is-open
    .mobile-owner-drawer {
        transform:
            translateX(0);
    }

    .mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 12px;

        padding:
            5px
            3px
            16px;

        border-bottom:
            1px solid
            var(--k-gray-200);
    }

    .mobile-drawer-head > div {
        display: grid;
        gap: 2px;
    }

    .mobile-drawer-kicker {
        color: var(--k-blue);
        font-size: 0.63rem;
        font-weight: 900;
        letter-spacing: 0.09em;
    }

    .mobile-drawer-head strong {
        color: var(--k-ink);
        font-size: 1.05rem;
    }

    .mobile-drawer-head > button {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        border:
            1px solid
            var(--k-gray-200);

        border-radius: 12px;

        background: #ffffff;
        color: var(--k-ink);

        font-size: 1.5rem;

        cursor: pointer;
    }


    .mobile-drawer-navigation {
        display: grid;
        gap: 4px;

        padding: 13px 0;
    }

    .mobile-drawer-label {
        margin:
            12px
            8px
            4px;

        color: #7a8595;

        font-size: 0.62rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .mobile-drawer-navigation > a {
        display: grid;
        grid-template-columns:
            38px
            minmax(0,1fr);
        align-items: center;

        min-height: 48px;
        padding:
            5px
            9px;

        border-radius: 11px;

        color: var(--k-ink);

        font-size: 0.83rem;
        font-weight: 780;

        text-decoration: none;
    }

    .mobile-drawer-navigation > a:active {
        background:
            var(--k-blue-soft);
    }

    .mobile-drawer-navigation > a > span {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 34px;
        height: 34px;

        border-radius: 9px;

        background:
            var(--k-gray-100);

        color:
            var(--k-ink);

        font-weight: 900;
    }


    /* Account / logout */

    .mobile-drawer-account {
        margin-top: auto;

        padding-top: 14px;

        border-top:
            1px solid
            var(--k-gray-200);
    }

    .mobile-drawer-account form,
    .mobile-drawer-account a {
        width: 100%;
    }

    .mobile-drawer-account button,
    .mobile-drawer-account a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 46px;

        border:
            1px solid
            var(--k-gray-200);

        border-radius: 11px;

        background: #ffffff !important;
        color: var(--k-ink) !important;

        font-size: 0.8rem;
        font-weight: 800;

        text-decoration: none;
    }


    /*
     * Dashboard now starts naturally below the
     * mobile app bar.
     */

    .page {
        padding-top: 18px;
    }
}


@media (
    prefers-reduced-motion: reduce
) {
    .mobile-owner-drawer,
    .mobile-drawer-backdrop {
        transition: none !important;
    }
}


/* ==========================================================
   KED-10 — Mobile shell final device hardening
   ========================================================== */

@media (max-width: 680px) {

    /*
     * Respect iPhone notch / Dynamic Island when the
     * application is opened from Safari or Home Screen.
     */

    body {
        padding-top:
            calc(
                64px
                + env(safe-area-inset-top)
            );

        padding-bottom:
            calc(
                76px
                + env(safe-area-inset-bottom)
            );
    }

    .mobile-appbar {
        min-height:
            calc(
                64px
                + env(safe-area-inset-top)
            );

        padding:
            calc(
                8px
                + env(safe-area-inset-top)
            )
            12px
            8px;
    }

    .mobile-owner-drawer {
        padding:
            calc(
                18px
                + env(safe-area-inset-top)
            )
            15px
            calc(
                18px
                + env(safe-area-inset-bottom)
            );
    }


    /*
     * Important screens must never disappear underneath
     * the bottom application navigation.
     */

    main.page {
        min-width: 0;
        overflow-x: hidden;
    }


    /*
     * Every bottom navigation target should remain
     * comfortably usable with one thumb.
     */

    .mobile-bottom-navigation > a,
    .mobile-bottom-navigation > button {
        min-height: 56px;
        -webkit-tap-highlight-color: transparent;
    }


    /*
     * Avoid accidental selection while Lars is quickly
     * tapping app navigation.
     */

    .mobile-appbar-menu,
    .mobile-appbar-alert,
    .mobile-bottom-navigation > a,
    .mobile-bottom-navigation > button {
        user-select: none;
        -webkit-user-select: none;
    }


    /*
     * Clear keyboard focus remains available even though
     * mouse/touch focus is visually calm.
     */

    .mobile-appbar button:focus-visible,
    .mobile-appbar a:focus-visible,
    .mobile-bottom-navigation a:focus-visible,
    .mobile-bottom-navigation button:focus-visible,
    .mobile-owner-drawer a:focus-visible,
    .mobile-owner-drawer button:focus-visible {
        outline: 3px solid var(--k-electric);
        outline-offset: 2px;
    }


    /*
     * Long German labels must never force horizontal scroll.
     */

    .mobile-owner-drawer,
    .mobile-drawer-navigation,
    .mobile-drawer-navigation > a,
    .mobile-appbar-brand,
    .mobile-bottom-navigation {
        min-width: 0;
    }

    .mobile-drawer-navigation > a {
        overflow-wrap: anywhere;
    }
}


/* ==========================================================
   KED-10 — Owner mobile navigation refinement
   ========================================================== */

@media (max-width: 680px) {

    /*
     * Owner app shell rules must never change the
     * employee mobile experience.
     */

    body:not(.has-mobile-owner-shell) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body:not(.has-mobile-owner-shell) .topbar {
        display: flex !important;
    }


    /*
     * On Lars's phone these actions already live in
     * bottom navigation / drawer. Avoid duplication.
     */

    body.has-mobile-owner-shell
    .owner-dashboard-hero-actions {
        display: none !important;
    }


    /*
     * A green "everything is fine" state requires
     * no forced action.
     */

    body.has-mobile-owner-shell
    .owner-attention-success {
        grid-template-columns:
            42px
            minmax(0, 1fr) !important;
    }

    body.has-mobile-owner-shell
    .owner-attention-success > .btn {
        display: none !important;
    }


    /*
     * Persistent billing attention.
     */

    .mobile-appbar-alert {
        position: relative;
    }

    .mobile-billing-badge {
        position: absolute;
        top: -4px;
        right: -4px;

        display: flex;
        align-items: center;
        justify-content: center;

        min-width: 20px;
        height: 20px;
        padding: 0 5px;

        border:
            2px solid
            var(--k-ink);

        border-radius: 999px;

        background: #d94135;
        color: #ffffff;

        font-size: 0.61rem;
        font-weight: 900;
        line-height: 1;
    }


    /*
     * Billing count inside drawer.
     */

    .mobile-drawer-navigation
    > .mobile-drawer-billing-link {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            auto;
    }

    .mobile-drawer-badge {
        display: flex;
        align-items: center;
        justify-content: center;

        min-width: 26px;
        height: 26px;
        padding: 0 7px;

        border-radius: 999px;

        background:
            var(--k-electric);

        color: #182235;

        font-size: 0.7rem;
        font-weight: 900;
    }
}


/* ==========================================================
   KED-10 — Planner customer-quality pass
   ========================================================== */


/* ----------------------------------------------------------
   Desktop: fit the complete Monday–Sunday week
   ---------------------------------------------------------- */

@media (min-width: 761px) {

    .planner-desktop {
        overflow-x: visible;
    }

    .planner-board {
        width: 100%;
        min-width: 0;
    }

    .planner-board-head,
    .planner-board-row {
        grid-template-columns:
            minmax(145px, 1.15fr)
            repeat(
                7,
                minmax(0, 1fr)
            );
    }

    .planner-employee-head,
    .planner-day-head {
        min-width: 0;
        padding:
            10px
            6px;
    }

    .planner-day-head {
        text-align: center;
    }

    .planner-cell {
        min-width: 0;
        padding: 6px;
    }

    /*
     * Adding work must not depend completely
     * on knowing there is a hover action.
     */

    .planner-add-cell {
        opacity: 0.35;
    }

    .planner-cell:hover
    .planner-add-cell,
    .planner-add-cell:focus-visible {
        opacity: 1;
    }

    .planner-assignment {
        min-width: 0;
    }

    .planner-assignment strong,
    .planner-assignment small {
        overflow-wrap: anywhere;
    }
}


/* ----------------------------------------------------------
   Mobile planner
   ---------------------------------------------------------- */

@media (max-width: 680px) {

    /*
     * Three useful numbers in one compact row.
     * Do not spend half a phone screen on statistics.
     */

    .planner-metrics {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap: 6px !important;
        margin-bottom: 12px;
    }

    .planner-metrics .metric-card {
        min-height: 72px;
        padding:
            10px
            8px !important;
    }

    .planner-metrics .metric-label {
        font-size: 0.61rem;
        line-height: 1.15;
    }

    .planner-metrics .metric-card strong {
        margin-top: 2px;
        font-size: 1.28rem;
        line-height: 1.05;
    }

    .planner-metrics .metric-card small {
        font-size: 0.65rem;
    }

    .planner-metrics
    .metric-card:last-child {
        grid-column: auto !important;
    }


    /*
     * Day selector — mobile-app behavior.
     */

    .planner-mobile-tabs {
        position: sticky;
        z-index: 30;

        top:
            calc(
                64px
                + env(safe-area-inset-top)
            );

        display: grid;
        grid-template-columns:
            repeat(
                7,
                minmax(0, 1fr)
            );

        gap: 4px;

        margin:
            0
            0
            10px;

        padding:
            7px
            4px;

        border:
            1px solid
            var(--k-gray-200);

        border-radius: 13px;

        background:
            rgba(
                255,
                255,
                255,
                0.97
            );

        box-shadow:
            0 5px 16px
            rgba(
                24,
                34,
                53,
                0.06
            );
    }

    .planner-mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        min-width: 0;
        min-height: 53px;

        padding:
            5px
            2px;

        border: 0;
        border-radius: 10px;

        background: transparent;
        color: #687386;

        font: inherit;

        cursor: pointer;
    }

    .planner-mobile-tab > span {
        font-size: 0.59rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .planner-mobile-tab > strong {
        margin-top: 2px;

        color: var(--k-ink);

        font-size: 0.86rem;
        line-height: 1;
    }

    .planner-mobile-tab > small {
        margin-top: 3px;

        color: var(--k-blue-dark);

        font-size: 0.52rem;
        font-weight: 900;
    }

    .planner-mobile-tab.is-active {
        background:
            var(--k-blue-soft);

        color:
            var(--k-blue-dark);
    }

    .planner-mobile-tab.is-active > strong {
        color:
            var(--k-blue-dark);
    }

    .planner-mobile-tab.is-today {
        box-shadow:
            inset 0 -3px 0
            var(--k-electric);
    }

    .planner-mobile-tab:focus-visible {
        outline:
            3px solid
            var(--k-electric);

        outline-offset: 2px;
    }


    /*
     * Exactly one day visible at a time.
     */

    .planner-mobile-day {
        margin-bottom: 10px;
        box-shadow:
            0 3px 16px
            rgba(
                24,
                34,
                53,
                0.05
            );
    }

    .planner-mobile-day[hidden] {
        display: none !important;
    }

    .planner-mobile-day-head {
        padding:
            11px
            13px;
    }

    .planner-mobile-day-head strong {
        font-size: 0.92rem;
    }

    .planner-mobile-day-head span {
        font-size: 0.68rem;
    }


    /*
     * One obvious primary action per day.
     */

    .planner-mobile-day-actions {
        padding:
            10px
            11px
            0;
    }

    .planner-mobile-day-actions
    .btn {
        width: 100%;
        min-height: 44px;
    }


    .planner-mobile-day-body {
        padding:
            10px
            11px
            12px;
    }


    /*
     * Empty day should look deliberate,
     * not like missing data.
     */

    .planner-mobile-empty-state {
        display: flex;
        align-items: center;
        gap: 9px;

        padding:
            11px;

        border-radius: 10px;

        background:
            var(--k-green-soft);
    }

    .planner-mobile-empty-state > div:first-child {
        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 30px;
        width: 30px;
        height: 30px;

        border-radius: 50%;

        background: #ffffff;
        color: var(--k-green);

        font-weight: 900;
    }

    .planner-mobile-empty-state > div:last-child {
        display: grid;
        gap: 2px;
    }

    .planner-mobile-empty-state strong {
        color: var(--k-ink);
        font-size: 0.78rem;
    }

    .planner-mobile-empty-state span {
        color: #527067;
        font-size: 0.69rem;
        line-height: 1.35;
    }

    /*
     * Hide empty-state as soon as the day contains
     * an assignment or an absence.
     */

    .planner-mobile-day-body:has(
        .planner-mobile-employee
    )
    .planner-mobile-empty-state {
        display: none;
    }


    /*
     * Only relevant employees appear:
     * assignments, absence or conflict.
     */

    .planner-mobile-employee {
        padding:
            0
            0
            12px;

        border-bottom:
            1px solid
            var(--k-gray-100);
    }

    .planner-mobile-employee
    + .planner-mobile-employee {
        padding-top: 12px;
    }

    .planner-mobile-employee:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .planner-mobile-person {
        margin-bottom: 7px;
    }

    .planner-mobile-employee-conflict {
        margin:
            0
            -4px;

        padding:
            8px
            4px
            12px;

        border-radius: 10px;

        background:
            var(--k-red-soft);
    }

    .mobile-unavailable-danger {
        background: #ffffff;
        color: var(--k-red);
    }


    /*
     * Absence information.
     */

    .planner-mobile-absence {
        display: grid;
        gap: 2px;

        margin-bottom: 7px;

        padding:
            8px
            9px;

        border-radius: 9px;

        background:
            #f4f5f7;
    }

    .planner-mobile-absence strong {
        color: var(--k-ink);
        font-size: 0.75rem;
    }

    .planner-mobile-absence span {
        color: var(--k-gray-600);
        font-size: 0.68rem;
    }

    .planner-mobile-absence-danger {
        border:
            1px solid
            #e3aaa4;

        background: #ffffff;
    }

    .planner-mobile-absence-danger strong {
        color: var(--k-red);
    }


    /*
     * Assignment card:
     * time → site → customer → address → note.
     */

    .planner-mobile-assignment {
        display: grid;

        gap: 3px;

        margin-bottom: 7px;

        padding:
            11px;

        border:
            1px solid
            #cddaf0;

        border-left:
            4px solid
            var(--k-blue);

        border-radius: 11px;

        background:
            var(--k-blue-soft);

        color: var(--k-ink);
    }

    .planner-mobile-assignment-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;

        margin-bottom: 3px;
    }

    .planner-mobile-time {
        color:
            var(--k-blue-dark);

        font-size: 0.78rem;
    }

    .planner-mobile-assignment-top > span {
        color: var(--k-gray-600);
        font-size: 0.62rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .planner-mobile-site {
        overflow-wrap: anywhere;

        color: var(--k-ink);

        font-size: 0.9rem;
        line-height: 1.25;
    }

    .planner-mobile-customer {
        overflow-wrap: anywhere;

        color: var(--k-gray-600);

        font-size: 0.74rem;
    }

    .planner-mobile-address {
        overflow-wrap: anywhere;

        margin-top: 3px;

        color: #4f5d70;

        font-size: 0.71rem;
        line-height: 1.35;
    }

    .planner-mobile-note {
        overflow-wrap: anywhere;

        margin-top: 5px;
        padding-top: 6px;

        border-top:
            1px solid
            rgba(
                24,
                34,
                53,
                0.1
            );

        color: var(--k-gray-600);

        font-size: 0.7rem;
        line-height: 1.4;
    }


    /*
     * Two obvious next actions.
     */

    .planner-mobile-assignment-actions {
        display: grid;
        grid-template-columns:
            1fr
            1fr;

        gap: 6px;

        margin-top: 8px;
    }

    .planner-mobile-assignment-actions
    > a {
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 38px;

        padding:
            6px
            8px;

        border:
            1px solid
            #bdcae0;

        border-radius: 8px;

        background: #ffffff;
        color: var(--k-ink);

        font-size: 0.68rem;
        font-weight: 850;

        text-align: center;
        text-decoration: none;
    }

    .planner-mobile-assignment-actions
    > a:first-child {
        border-color:
            var(--k-blue);

        background:
            var(--k-blue);

        color: #ffffff;
    }

    .planner-mobile-conflict {
        border-color: #dfaaa4;
        border-left-color: var(--k-red);
        background: #ffffff;
    }
}


/* ==========================================================
   KED-10 — Auftrag search-first mobile workflow
   ========================================================== */

@media (max-width: 680px) {

    /*
     * Searching is Lars's primary task once many jobs exist.
     * Put it before dashboard-style statistics.
     */

    .job-workspace {
        display: flex;
        flex-direction: column;
    }

    .job-workspace > .workspace-heading {
        order: 1;
    }

    .job-workspace > .filter-panel {
        order: 2;
    }

    .job-workspace > .metric-grid {
        order: 3;
    }

    .job-workspace > .job-review-hint {
        order: 4;
    }

    .job-workspace > .job-list {
        order: 5;
    }

    .job-workspace > .pagination {
        order: 6;
    }


    /*
     * Search should visually feel like the main control.
     */

    .job-workspace .filter-panel {
        margin-top: 2px;
        margin-bottom: 12px;
    }

    .job-workspace .search-field input {
        min-height: 48px;
        font-size: 16px;
    }


    /*
     * Advanced filters stay available without occupying
     * most of the initial phone screen.
     */

    .job-workspace
    .filter-form
    .filter-select {
        display: none;
    }

    .job-workspace
    .filter-form.mobile-filter-open
    .filter-select {
        display: block;
    }

    .mobile-job-filter-toggle {
        min-height: 44px;

        border:
            1px solid
            var(--k-gray-200);

        border-radius: 10px;

        background: #ffffff;
        color: var(--k-ink);

        font: inherit;
        font-size: 0.78rem;
        font-weight: 850;

        cursor: pointer;
    }

    .mobile-job-filter-toggle.is-active {
        border-color: var(--k-blue);
        background: var(--k-blue-soft);
        color: var(--k-blue-dark);
    }

    .mobile-job-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-width: 20px;
        height: 20px;

        margin-left: 5px;
        padding: 0 5px;

        border-radius: 999px;

        background: var(--k-blue);
        color: #ffffff;

        font-size: 0.62rem;
        font-weight: 900;
    }

    .job-workspace
    .filter-form
    .btn-filter {
        min-height: 44px;
    }

    /*
     * Four counts remain useful, but should not dominate.
     */

    .job-workspace > .metric-grid {
        gap: 7px;
        margin-bottom: 10px;
    }

    .job-workspace
    .metric-card {
        min-height: 82px;
        padding: 11px !important;
    }

    .job-workspace
    .metric-card strong {
        font-size: 1.35rem;
    }


    /*
     * Imported-data warning remains visible but calmer
     * after search, rather than blocking search.
     */

    .job-workspace
    .job-review-hint {
        margin-bottom: 12px;
    }
}


/* ==========================================================
   KED-10 — Auftrag → Planung fast path
   ========================================================== */

.job-mobile-actions {
    display: none;
}


@media (max-width: 680px) {

    /*
     * Leave room above the global bottom navigation.
     */

    body.has-mobile-owner-shell
    .job-mobile-actions {
        position: sticky;

        bottom:
            calc(
                68px
                + env(safe-area-inset-bottom)
            );

        z-index: 40;

        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 7px;

        margin-top: 16px;
        padding:
            9px;

        border:
            1px solid
            var(--k-gray-200);

        border-radius: 13px;

        background:
            rgba(
                255,
                255,
                255,
                0.97
            );

        box-shadow:
            0 -5px 20px
            rgba(
                24,
                34,
                53,
                0.08
            );
    }


    .job-mobile-plan {
        display: grid;
        grid-template-columns:
            34px
            minmax(0, 1fr);

        align-items: center;

        gap: 8px;

        min-height: 48px;

        padding:
            6px
            10px;

        border-radius: 10px;

        background:
            var(--k-blue);

        color: #ffffff;

        text-decoration: none;
    }

    .job-mobile-plan > span:first-child {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 32px;
        height: 32px;

        border-radius: 8px;

        background:
            rgba(
                255,
                255,
                255,
                0.16
            );

        font-size: 1.1rem;
        font-weight: 900;
    }

    .job-mobile-plan > span:last-child {
        display: grid;
        min-width: 0;
        gap: 1px;
    }

    .job-mobile-plan strong {
        color: #ffffff;
        font-size: 0.78rem;
    }

    .job-mobile-plan small {
        color:
            rgba(
                255,
                255,
                255,
                0.78
            );

        font-size: 0.62rem;
    }


    .job-mobile-edit {
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 48px;

        padding:
            7px
            12px;

        border:
            1px solid
            var(--k-gray-200);

        border-radius: 10px;

        background: #ffffff;
        color: var(--k-ink);

        font-size: 0.73rem;
        font-weight: 850;

        text-decoration: none;
    }
}


/* ==========================================================
   KED-11 — Planner at-a-glance location
   ========================================================== */

@media (min-width: 761px) {
    .planner-desktop-address {
        display: block;
        margin-top: 3px;

        overflow-wrap: anywhere;

        color: var(--k-gray-600);
        font-size: 0.64rem;
        line-height: 1.25;
    }
}


/* ==========================================================
   KED-28 — assignment move / drag and drop
   ========================================================== */

@media (min-width: 769px) {
    .planner-assignment[draggable="true"] {
        cursor: grab;
    }

    .planner-assignment[draggable="true"]:active {
        cursor: grabbing;
    }

    .planner-assignment.is-dragging {
        opacity: 0.45;
    }

    .planner-assignment.is-saving {
        opacity: 0.55;
        pointer-events: none;
    }

    .planner-cell.is-drop-target {
        outline: 2px dashed currentColor;
        outline-offset: -4px;
    }
}

.planner-mobile-move {
    width: 100%;
}

.planner-mobile-move summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.planner-mobile-move form {
    display: grid;
    gap: 10px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--border-color, #d8e2e8);
    border-radius: 10px;
}

.planner-mobile-move label {
    display: grid;
    gap: 6px;
    font-weight: 600;
}

.planner-mobile-move input[type="date"] {
    min-height: 44px;
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    font: inherit;
}


/* KED-29 — copy existing assignment */

.planner-copy-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 768px) {
    .planner-copy-link {
        min-height: 44px;
    }
}


/* KED-30 — delete cancelled Auftrag safely */

.job-delete-page {
    max-width: 760px;
}

.job-delete-card {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 16px;
    background: var(--surface-color, #fff);
}

.job-delete-customer {
    margin-top: -8px;
}

.job-delete-warning,
.job-delete-assignment-warning {
    margin-top: 20px;
    padding: 16px;
    border-radius: 12px;
}

.job-delete-warning {
    border: 1px solid #d7a4a4;
}

.job-delete-assignment-warning {
    border: 1px solid var(--border-color, #ddd);
}

.job-delete-assignment-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.job-delete-assignment-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.job-delete-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.job-mobile-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    text-decoration: none;
}

@media (max-width: 768px) {
    .job-delete-card {
        padding: 18px;
    }

    .job-delete-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .job-delete-form .btn {
        width: 100%;
        min-height: 48px;
    }
}


/* KED-31 — flexible assignment move */

.planner-desktop-move {
    margin-top: 4px;
    font-size: 0.85rem;
}

.planner-desktop-move > summary {
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.planner-desktop-move form,
.planner-mobile-move form {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.planner-desktop-move label,
.planner-mobile-move label {
    display: grid;
    gap: 4px;
}

.planner-desktop-move select,
.planner-desktop-move input,
.planner-mobile-move select,
.planner-mobile-move input {
    width: 100%;
    min-height: 40px;
}

@media (max-width: 768px) {
    .planner-mobile-move select,
    .planner-mobile-move input,
    .planner-mobile-move button {
        min-height: 46px;
    }
}


/* KED-32 — mobile per-day assignment count */

@media (max-width: 760px) {

    .planner-mobile-tab {
        position: relative;
    }

    .planner-mobile-tab-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-width: 18px;
        height: 18px;

        margin-top: 4px;
        padding: 0 5px;

        border-radius: 999px;

        background: var(--k-blue);
        color: #ffffff;

        font-size: 0.62rem;
        font-weight: 900;
        line-height: 1;
    }

    .planner-mobile-tab.has-assignments:not(.is-active) {
        background: #f6f9ff;
    }

    .planner-mobile-tab.has-assignments:not(.is-active)
    > strong {
        color: var(--k-blue-dark);
    }

    .planner-mobile-tab.is-active
    .planner-mobile-tab-count {
        background: var(--k-blue-dark);
    }
}