:root {
    --kp-premium-radius-xl: 22px;
    --kp-premium-radius-lg: 16px;
    --kp-premium-radius-md: 12px;
    --kp-premium-shadow: 0 18px 48px rgba(28, 48, 52, .08), 0 2px 10px rgba(28, 48, 52, .035);
    --kp-premium-shadow-soft: 0 10px 30px rgba(28, 48, 52, .055), 0 1px 4px rgba(28, 48, 52, .035);
    --kp-premium-line: color-mix(in srgb, var(--kp-border, #dfe7e8) 80%, transparent);
    --kp-premium-muted: color-mix(in srgb, var(--kp-text, #24363a) 62%, #fff);
    --kp-premium-soft: color-mix(in srgb, var(--kp-primary, #0b8588) 5%, #fff);
    --kp-premium-soft-strong: color-mix(in srgb, var(--kp-primary, #0b8588) 9%, #fff);
}

html {
    background: var(--kp-bg, #f4f7f7);
}

body.app-authenticated {
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--kp-primary, #0b8588) 5%, transparent) 0, transparent 28rem),
        linear-gradient(180deg, color-mix(in srgb, var(--kp-bg, #f5f7f7) 88%, #fff) 0, var(--kp-bg, #f5f7f7) 420px);
    color: var(--kp-text, #24363a);
}

.app-main {
    width: min(100%, 1760px);
    margin-inline: auto;
}

.page-head,
.settings-panel-head,
.kp-page > .page-head {
    margin-bottom: 18px;
}

.page-head h1,
.settings-panel-head h1,
.kp-page h1 {
    letter-spacing: -.035em;
    line-height: 1.08;
}

.page-head .eyebrow,
.settings-panel-head .eyebrow,
.panel-head .eyebrow,
.form-section-head .eyebrow {
    letter-spacing: .08em;
    font-weight: 800;
    text-transform: uppercase;
}

.settings-card,
.panel,
.form-card,
.table-card,
.metric-card,
.overview-panel,
.overview-settings-card,
.notification-master-card,
.empty-card {
    border: 1px solid var(--kp-premium-line) !important;
    border-radius: var(--kp-premium-radius-lg) !important;
    background: color-mix(in srgb, var(--kp-surface, #fff) 97%, transparent) !important;
    box-shadow: var(--kp-premium-shadow-soft);
}

.settings-card,
.form-card,
.panel:not(.planning-v2 *) {
    backdrop-filter: blur(10px);
}

.settings-card:hover,
.metric-card:hover,
.overview-panel:hover {
    border-color: color-mix(in srgb, var(--kp-primary, #0b8588) 18%, var(--kp-border, #dfe7e8)) !important;
}

.settings-card > h2:first-child,
.panel-head h2,
.form-section h2,
.notes-panel h2 {
    letter-spacing: -.025em;
}

.settings-section-help,
.form-help,
.field-help,
.panel-head small,
.empty-card span,
.empty-card p {
    color: var(--kp-premium-muted) !important;
    line-height: 1.55;
}

.form-card {
    padding: clamp(18px, 2.2vw, 30px) !important;
}

.form-grid {
    gap: 16px !important;
}

.form-grid label,
.form-section label,
.settings-card label:not(.check-field):not(.switch-wrap):not(.project-kind-option),
.dialog-card label {
    color: color-mix(in srgb, var(--kp-text, #24363a) 84%, #fff);
    font-weight: 700;
}

.form-grid label > input,
.form-grid label > select,
.form-grid label > textarea,
.form-section input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.form-section select,
.form-section textarea,
.settings-card input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.settings-card select,
.settings-card textarea,
.dialog-card input:not([type="checkbox"]):not([type="radio"]),
.dialog-card select,
.dialog-card textarea,
.filter-bar input,
.filter-bar select {
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--kp-border, #cfdadc) 88%, #b9c8ca) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--kp-surface, #fff) 98%, var(--kp-bg, #f5f7f7)) !important;
    color: var(--kp-text, #24363a);
    box-shadow: inset 0 1px 1px rgba(19, 42, 46, .018);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.form-grid label > input:focus,
.form-grid label > select:focus,
.form-grid label > textarea:focus,
.form-section input:focus,
.form-section select:focus,
.form-section textarea:focus,
.settings-card input:focus,
.settings-card select:focus,
.settings-card textarea:focus,
.dialog-card input:focus,
.dialog-card select:focus,
.dialog-card textarea:focus,
.filter-bar input:focus,
.filter-bar select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--kp-primary, #0b8588) 62%, #fff) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kp-primary, #0b8588) 12%, transparent) !important;
}

textarea {
    resize: vertical;
}

.check-field,
.switch-wrap,
.switch-inline {
    border-radius: 11px;
}

.check-field {
    min-height: 44px;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, var(--kp-border, #dfe7e8) 82%, transparent);
    background: color-mix(in srgb, var(--kp-bg, #f5f7f7) 52%, #fff);
}

.check-field:hover {
    border-color: color-mix(in srgb, var(--kp-primary, #0b8588) 22%, var(--kp-border, #dfe7e8));
    background: var(--kp-premium-soft);
}

.btn-primary-kp,
.kp-btn-primary {
    min-height: 42px;
    border-radius: 11px !important;
    border: 1px solid color-mix(in srgb, var(--kp-primary, #0b8588) 82%, #0a5557) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--kp-primary, #0b8588) 18%, transparent), inset 0 1px rgba(255,255,255,.18);
    font-weight: 780 !important;
    letter-spacing: -.01em;
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.btn-primary-kp:hover,
.kp-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 24px color-mix(in srgb, var(--kp-primary, #0b8588) 22%, transparent), inset 0 1px rgba(255,255,255,.2);
}

.btn-primary-kp:active,
.kp-btn-primary:active {
    transform: translateY(0);
}

.subtle-btn,
.kp-btn-ghost,
.kp-btn:not(.kp-btn-primary):not(.kp-btn-danger) {
    min-height: 40px;
    border-radius: 10px !important;
    border-color: color-mix(in srgb, var(--kp-border, #dfe7e8) 88%, #c6d1d3) !important;
    background: color-mix(in srgb, var(--kp-surface, #fff) 96%, var(--kp-bg, #f5f7f7)) !important;
    box-shadow: 0 2px 5px rgba(28, 48, 52, .025);
}

.subtle-btn:hover,
.kp-btn-ghost:hover,
.kp-btn:not(.kp-btn-primary):not(.kp-btn-danger):hover {
    background: var(--kp-premium-soft) !important;
    border-color: color-mix(in srgb, var(--kp-primary, #0b8588) 28%, var(--kp-border, #dfe7e8)) !important;
}

.danger-btn,
.danger-link {
    border-radius: 10px !important;
}

.form-actions {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--kp-premium-line);
}

.form-section {
    margin-top: 22px;
    padding: 20px !important;
    border: 1px solid var(--kp-premium-line) !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), color-mix(in srgb, var(--kp-bg, #f5f7f7) 42%, #fff));
}

.form-section-head {
    align-items: flex-start;
    margin-bottom: 16px;
}

.table-card {
    overflow: clip;
}

.data-table,
.responsive-data-table {
    margin: 0;
}

.data-table thead th,
.responsive-data-table thead th {
    background: color-mix(in srgb, var(--kp-primary, #0b8588) 5%, #f8fafa) !important;
    color: color-mix(in srgb, var(--kp-text, #24363a) 76%, #fff) !important;
    font-size: .76rem;
    letter-spacing: .035em;
    text-transform: uppercase;
    border-bottom-color: var(--kp-premium-line) !important;
}

.data-table tbody tr,
.responsive-data-table tbody tr {
    transition: background .14s ease;
}

.data-table tbody tr:hover,
.responsive-data-table tbody tr:hover {
    background: color-mix(in srgb, var(--kp-primary, #0b8588) 3.5%, #fff) !important;
}

.data-table td,
.responsive-data-table td {
    border-bottom-color: color-mix(in srgb, var(--kp-border, #dfe7e8) 67%, transparent) !important;
}

.status-pill,
.access-badge,
.role-chip,
.attention-chip {
    border-radius: 999px !important;
    font-weight: 760 !important;
    letter-spacing: -.005em;
}

.filter-bar {
    padding: 12px !important;
    border: 1px solid var(--kp-premium-line) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--kp-surface, #fff) 94%, transparent) !important;
    box-shadow: 0 5px 15px rgba(28,48,52,.035);
}

.flash {
    border-radius: 13px !important;
    box-shadow: 0 8px 22px rgba(28,48,52,.055);
    animation: kp-premium-flash-in .24s ease-out;
}

@keyframes kp-premium-flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.kp-dialog::backdrop {
    background: rgba(17, 31, 34, .32);
    backdrop-filter: blur(5px);
}

.dialog-card {
    border: 1px solid color-mix(in srgb, var(--kp-border, #dfe7e8) 82%, transparent) !important;
    border-radius: 20px !important;
    box-shadow: 0 34px 90px rgba(17,31,34,.22) !important;
}

.dialog-card > header {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--kp-premium-line);
}

.dialog-close {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
}

.empty-card,
.empty {
    color: var(--kp-premium-muted);
}

.empty-card {
    min-height: 112px;
    display: grid;
    place-content: center;
    gap: 5px;
    text-align: center;
    background: linear-gradient(145deg, rgba(255,255,255,.98), color-mix(in srgb, var(--kp-primary, #0b8588) 3%, #fff)) !important;
}

.danger-zone {
    border-color: rgba(185, 57, 57, .19) !important;
    background: linear-gradient(180deg, #fff, rgba(185, 57, 57, .025)) !important;
}


.project-kind-section {
    overflow: hidden;
}

.project-kind-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.project-kind-option {
    position: relative;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 82px;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--kp-premium-line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}

.project-kind-option:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--kp-primary, #0b8588) 28%, var(--kp-border, #dfe7e8));
    box-shadow: 0 7px 20px rgba(28,48,52,.05);
}

.project-kind-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--kp-primary, #0b8588) 48%, #fff);
    background: var(--kp-premium-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-primary, #0b8588) 8%, transparent);
}

.project-kind-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.project-kind-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--kp-primary, #0b8588) 10%, #fff);
    color: var(--kp-primary, #0b8588);
    font-weight: 850;
}

.project-kind-icon.absence {
    background: rgba(176, 112, 26, .1);
    color: #8b5b18;
}

.project-kind-option > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.project-kind-option strong {
    color: var(--kp-text, #24363a);
    font-size: .93rem;
}

.project-kind-option small {
    color: var(--kp-premium-muted);
    line-height: 1.4;
}

.project-absence-type {
    display: grid !important;
    gap: 6px;
    margin-top: 14px !important;
    max-width: 520px;
}

.project-absence-type > span {
    font-weight: 780;
}

.project-absence-type small {
    color: var(--kp-premium-muted);
    line-height: 1.45;
}

[hidden] {
    display: none !important;
}


.employee-edit-page .settings-card,
.employee-availability-card,
.availability-exceptions-card {
    overflow: hidden;
}

.employee-profile-hero {
    border-radius: 18px !important;
    box-shadow: var(--kp-premium-shadow-soft);
}

.work-pattern-details,
.work-pattern-new-details {
    box-shadow: 0 5px 16px rgba(28,48,52,.035);
}

.work-pattern-details[open],
.work-pattern-new-details[open] {
    border-color: color-mix(in srgb, var(--kp-primary, #0b8588) 22%, var(--kp-border, #dfe7e8));
}

.work-pattern-day {
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.work-pattern-day:focus-within {
    border-color: color-mix(in srgb, var(--kp-primary, #0b8588) 32%, var(--kp-border, #dfe7e8));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-primary, #0b8588) 7%, transparent);
}


.user-admin-card,
.mobile-user-card {
    border-radius: 16px !important;
    border-color: var(--kp-premium-line) !important;
    box-shadow: 0 6px 18px rgba(28,48,52,.04);
}


.notification-row,
.notification-item {
    border-radius: 14px !important;
}


.backup-history-card,
.email-policy-row,
.notification-pref-row {
    border-radius: 13px !important;
}


.kp-login-card {
    border: 1px solid color-mix(in srgb, var(--kp-border, #dfe7e8) 78%, transparent) !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 80px rgba(21, 39, 43, .14), 0 2px 8px rgba(21,39,43,.04) !important;
}

.kp-login-card input {
    min-height: 48px;
    border-radius: 12px !important;
}

@media (max-width: 900px) {
    body.app-authenticated {
        background: var(--kp-bg, #f5f7f7);
    }

    .app-main {
        width: 100%;
    }

    .settings-card,
    .panel,
    .form-card,
    .table-card,
    .metric-card,
    .overview-panel,
    .overview-settings-card {
        border-radius: 15px !important;
        box-shadow: 0 5px 17px rgba(28,48,52,.045);
    }

    .form-card {
        padding: 16px !important;
    }

    .form-section {
        margin-top: 16px;
        padding: 15px !important;
        border-radius: 13px !important;
    }

    .project-kind-options {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .project-kind-option {
        min-height: 72px;
        padding: 12px !important;
    }

    .form-actions {
        gap: 8px;
    }

    .form-actions .btn-primary-kp,
    .form-actions .kp-btn-primary {
        min-height: 46px;
    }

    .responsive-data-table tbody tr {
        border: 1px solid var(--kp-premium-line) !important;
        border-radius: 14px !important;
        background: #fff;
        box-shadow: 0 5px 16px rgba(28,48,52,.04);
    }

    .kp-dialog {
        padding: 12px;
    }

    .dialog-card {
        border-radius: 18px !important;
    }
}

@media (max-width: 560px) {
    .page-head {
        gap: 12px;
    }

    .page-head h1 {
        font-size: clamp(1.45rem, 8vw, 1.9rem) !important;
    }

    .settings-card,
    .panel,
    .form-card {
        border-radius: 13px !important;
    }

    .project-kind-option {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .project-kind-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


.notification-page-list,
.feedback-list-panel,
.actions-panel,
.backup-history-panel,
.restore-history-panel {
    overflow: hidden;
}

.notification-card,
.announcement,
.handover,
.action-item,
.feedback-card,
.team-admin-card,
.restore-option-card {
    border: 1px solid var(--kp-premium-line) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.99), color-mix(in srgb, var(--kp-primary, #0b8588) 2.2%, #fff)) !important;
    box-shadow: 0 5px 17px rgba(28,48,52,.035);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

@media (hover:hover) and (pointer:fine) {
    .notification-card:hover,
    .announcement:hover,
    .handover:hover,
    .action-item:hover,
    .feedback-card:hover,
    .team-admin-card:hover,
    .restore-option-card:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--kp-primary, #0b8588) 22%, var(--kp-border, #dfe7e8)) !important;
        box-shadow: 0 9px 26px rgba(28,48,52,.06);
    }
}

.communication-grid,
.feedback-layout,
.team-settings-layout,
.restore-center-grid {
    gap: 16px !important;
}

.notification-card-head,
.feedback-card-head,
.team-card-head,
.panel-head {
    min-width: 0;
}

.notification-card p,
.feedback-card p,
.announcement p,
.handover p,
.action-item p {
    line-height: 1.55;
}

.notification-actions,
.action-item-actions,
.feedback-admin-actions,
.team-admin-actions,
.row-actions {
    gap: 7px !important;
}

.inline-menu > summary {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--kp-premium-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(28,48,52,.04);
    cursor: pointer;
}

.inline-menu[open] > summary {
    border-color: color-mix(in srgb, var(--kp-primary, #0b8588) 30%, var(--kp-border, #dfe7e8));
    background: var(--kp-premium-soft);
}

.inline-menu > div,
.inline-menu > ul {
    border: 1px solid var(--kp-premium-line) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 20px 50px rgba(18,39,43,.16) !important;
    backdrop-filter: blur(14px);
}

.backup-metrics .metric-card {
    position: relative;
    overflow: hidden;
    min-height: 110px;
    padding: 17px !important;
}

.backup-metrics .metric-card::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    right: -38px;
    top: -40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--kp-primary, #0b8588) 5%, transparent);
    pointer-events: none;
}

.restore-option-card {
    border-radius: 15px !important;
    padding: 17px !important;
}

.restore-option-card.safe {
    border-color: color-mix(in srgb, #2f7c62 22%, var(--kp-border, #dfe7e8)) !important;
}

.production-restore-danger {
    border-radius: 15px !important;
    overflow: hidden;
}

.settings-callout,
.backup-alert,
.danger-callout,
.backup-scope-note {
    border-radius: 13px !important;
    line-height: 1.5;
}

.feedback-response,
.feedback-admin {
    border-radius: 12px !important;
}

.team-builder-card,
.team-existing-card,
.feedback-create-card,
.backup-settings-card,
.restore-center-card {
    box-shadow: var(--kp-premium-shadow-soft) !important;
}

.employee-check-list {
    border-radius: 13px !important;
    border-color: var(--kp-premium-line) !important;
    background: color-mix(in srgb, var(--kp-bg, #f5f7f7) 34%, #fff) !important;
}

.employee-check-list label {
    transition: background .13s ease;
}

.employee-check-list label:hover {
    background: var(--kp-premium-soft);
}

.work-location-count {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.kp-table-wrap,
.preview-table-wrap,
.bulk-scroll,
.backup-history-table {
    border-radius: 14px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--kp-primary, #0b8588) 22%, transparent) transparent;
}

.kp-table-wrap::-webkit-scrollbar,
.preview-table-wrap::-webkit-scrollbar,
.bulk-scroll::-webkit-scrollbar,
.backup-history-table::-webkit-scrollbar {
    height: 9px;
    width: 9px;
}

.kp-table-wrap::-webkit-scrollbar-thumb,
.preview-table-wrap::-webkit-scrollbar-thumb,
.bulk-scroll::-webkit-scrollbar-thumb,
.backup-history-table::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 99px;
    background-clip: padding-box;
    background-color: color-mix(in srgb, var(--kp-primary, #0b8588) 24%, #cdd8da);
}


@media (max-width: 700px) {
    .mobile-user-card,
    .user-admin-card,
    .notification-card,
    .feedback-card,
    .team-admin-card,
    .announcement,
    .handover,
    .action-item {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .mobile-user-card *,
    .user-admin-card *,
    .notification-card *,
    .feedback-card * {
        min-width: 0;
    }

    .mobile-user-card a[href^="mailto:"],
    .user-admin-card a[href^="mailto:"],
    .mobile-user-card .user-email,
    .user-admin-card .user-email {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .notification-card-head,
    .feedback-card-head,
    .team-card-head {
        gap: 9px !important;
    }

    .notification-actions,
    .action-item-actions,
    .feedback-admin-actions,
    .team-admin-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr));
        width: 100%;
    }

    .notification-actions > *,
    .action-item-actions > *,
    .feedback-admin-actions > *,
    .team-admin-actions > * {
        min-width: 0;
    }

    .notification-actions button,
    .notification-actions a,
    .action-item-actions button,
    .feedback-admin-actions button,
    .team-admin-actions button {
        min-height: 44px;
        justify-content: center;
    }

    .filter-bar {
        gap: 8px !important;
    }

    .table-card {
        border-radius: 13px !important;
    }
}

@media (max-width: 420px) {
    .notification-actions,
    .action-item-actions,
    .feedback-admin-actions,
    .team-admin-actions {
        grid-template-columns: 1fr;
    }
}



.overview-page .overview-hero-premium .kp-btn.overview-hero-secondary {
    border-color: rgba(255,255,255,.36) !important;
    background: rgba(255,255,255,.11) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.overview-page .overview-hero-premium .kp-btn.overview-hero-secondary:hover,
.overview-page .overview-hero-premium .kp-btn.overview-hero-secondary:focus-visible {
    border-color: rgba(255,255,255,.56) !important;
    background: rgba(255,255,255,.19) !important;
    color: #fff !important;
}

.overview-page .overview-hero-premium .kp-btn.overview-hero-primary {
    border-color: #fff !important;
    background: #fff !important;
    color: #096c71 !important;
    text-decoration: none !important;
}

.overview-page .overview-hero-premium .kp-btn.overview-hero-primary:hover,
.overview-page .overview-hero-premium .kp-btn.overview-hero-primary:focus-visible {
    background: #f3fbfa !important;
    color: #075f64 !important;
}