@font-face {
    font-family: "Akkurat Mono LL TT";
    src: url("/static/fonts/AkkuratMonoLLTT-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Akkurat Mono LL TT";
    src: url("/static/fonts/AkkuratMonoLLTT-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-sans: "Akkurat Mono LL TT", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-mono: "Akkurat Mono LL TT", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --color-background: #f6f5ef;
    --color-surface: transparent;
    --color-text: #242422;
    --color-muted: #74746f;
    --color-pending: #a5a59f;
    --color-line: #deded8;
    --color-line-soft: #ecece7;
    --color-accent: #222222;
    --color-danger: #8a2f2f;
    --color-urlaub: #8fc88b;
    --color-krank: #e8d36f;
    --color-sonderfrei: #e3a0b5;
    --color-extern: #77c9c2;
    --radius: 10px;
    --space: 1rem;
    --app-menu-line: 2.0625rem;
    --app-content-line: 3.45rem;
    --app-compact-header-height: 4.5rem;
    --app-employee-compact-header-height: 3.2rem;
    --employee-name-size: 1.05rem;
    --employee-role-size: 0.8rem;
    --period-title-size: 5rem;
    --period-title-line-height: 0.78;
    --period-title-letter-spacing: -0.08em;
    --period-label-size: 0.72rem;
    --period-label-line-height: 1.25;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--color-background);
    font-family: var(--font-sans);
    color: var(--color-text);
    scroll-padding-top: var(--app-compact-header-height);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-background);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.45;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-underline-offset: 0.2em;
}

a:hover {
    color: #000;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 600;
    letter-spacing: -0.025em;
}

h2 {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 500;
}

h3 {
    margin-top: 1.8rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

h4 {
    margin-top: 1.4rem;
    font-size: 0.92rem;
    font-weight: 600;
}

hr {
    margin: 1.75rem 0;
    border: 0;
    border-top: 1px solid var(--color-line-soft);
}

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

button,
input,
select {
    min-height: 2.35rem;
}

button {
    padding: 0.45rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

button:hover {
    border-bottom-color: #9d9d96;
    background: transparent;
}

input,
select,
textarea {
    max-width: 100%;
    padding: 0.42rem 0.55rem;
    border: 0;
    border-bottom: 1px solid #d2d2cc;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
}

input[type="time"] {
    min-width: 7.5rem;
}

input[type="number"] {
    width: 6rem;
}

.app-topbar {
    display: none;
    position: sticky;
    z-index: 50;
    top: 0;
    min-height: var(--app-compact-header-height);
    max-width: 1680px;
    margin: 0 auto;
    padding: 0.45rem clamp(0.8rem, 3vw, 1.5rem);
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-background);
}

.app-topbar-brand,
.app-brand {
    text-decoration: none;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.app-topbar-person {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.employee-switch {
    min-width: 0;
}

.employee-switch-name-row {
    display: flex;
    min-width: 0;
    align-items: baseline;
}

.employee-switch-name-row .app-user-name,
.employee-switch-name-row .app-period-person-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-switch-nav {
    display: flex;
    flex: 0 0 auto;
    gap: 0.65rem;
    margin-left: 0.65rem;
    font-size: 0.95rem;
}

.employee-switch-nav a {
    color: var(--color-muted);
    text-decoration: none;
}

.employee-switch-nav a:hover,
.employee-switch-nav a:focus-visible {
    color: var(--color-text);
}

.employee-switch-picker {
    position: relative;
    flex: 0 0 auto;
    margin-left: 0.65rem;
}

.employee-switch-picker > summary {
    list-style: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.employee-switch-picker > summary::-webkit-details-marker {
    display: none;
}

.employee-switch-picker[open] > summary,
.employee-switch-picker > summary:hover,
.employee-switch-picker > summary:focus-visible {
    color: var(--color-text);
}

.employee-switch-menu {
    position: absolute;
    z-index: 10;
    top: 1.6rem;
    left: 0;
    display: grid;
    gap: 0.2rem;
    min-width: 16rem;
    max-height: 18rem;
    overflow: auto;
    padding: 0.65rem;
    border: 1px solid var(--color-line);
    border-radius: 0.8rem;
    background: var(--color-background);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.employee-switch-menu a {
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
}

.employee-switch-menu a:hover,
.employee-switch-menu a:focus-visible,
.employee-switch-menu .employee-switch-menu-active {
    color: var(--color-text);
}

.employee-switch .app-user-role,
.employee-switch .app-period-person-role {
    display: block;
}

.app-topbar-person .app-user-name,
.app-period-person-name {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--employee-name-size);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0;
}

.app-topbar-person .app-user-role,
.app-period-person-role {
    margin: 0.12rem 0 0;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--employee-role-size);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
}

.app-view-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    font-size: 0.88rem;
}

.app-view-nav > a,
.app-view-nav > span,
.app-mobile-settings > summary {
    padding: 0.4rem 0.55rem;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
}

.app-view-nav [aria-current="page"] {
    background: #e7e7e1;
    font-weight: 600;
}

.app-view-nav [aria-disabled="true"] {
    color: #9a9a94;
}

.app-mobile-settings {
    position: relative;
}

.app-mobile-settings > summary {
    cursor: pointer;
    list-style: none;
}

.app-mobile-settings > summary::-webkit-details-marker {
    display: none;
}

.app-mobile-settings-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.4rem);
    right: 0;
    width: max-content;
    min-width: 8.5rem;
    max-width: calc(100vw - 1.6rem);
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-background);
    box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
    text-align: right;
}

.app-mobile-settings-panel p {
    margin: 0;
    padding: 0.28rem 0;
    white-space: nowrap;
}

.app-mobile-settings-panel p:last-child {
    margin-bottom: 0;
}

.app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space);
    width: min(100%, 1680px);
    margin: 0 auto;
    padding: clamp(0.8rem, 3vw, 1.5rem);
}

.app-card {
    min-width: 0;
    padding: clamp(1rem, 2.2vw, 1.6rem);
    border: 0;
    border-radius: 0;
    background: var(--color-surface);
    overflow-x: auto;
}

.app-month,
.app-day {
    overflow: visible;
}

.app-settings {
    align-self: start;
}

.app-settings-header {
    padding-bottom: 1.25rem;
    border-bottom: 0;
}

.app-user {
    margin-top: 1.5rem;
}

.app-user-name {
    margin-bottom: 0.15rem;
    font-size: var(--employee-name-size);
    font-weight: 650;
}

.app-user-role,
.app-muted,
.app-placeholder p {
    color: var(--color-muted);
}

.app-user-role {
    font-family: var(--font-mono);
    font-size: var(--employee-role-size);
}

.app-settings-nav {
    display: grid;
    gap: 0.2rem;
    margin-top: 1.5rem;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.app-settings-nav a,
.app-settings-nav span {
    min-height: var(--app-menu-line);
    padding: 0.5rem 0;
    border-bottom: 0;
    text-decoration: none;
}

.app-settings-nav a:hover {
    color: var(--color-text);
}

.app-settings-nav span {
    color: var(--color-muted);
}

.app-kicker {
    margin: 0;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--period-label-size);
    font-weight: 500;
    line-height: var(--period-label-line-height);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.app-card-header {
    display: flex;
    position: sticky;
    z-index: 30;
    top: var(--app-compact-header-height);
    isolation: isolate;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    background: var(--color-background);
}

.app-card-header > :last-child {
    margin-bottom: 0;
}

.app-card-header > div {
    width: 100%;
}

.app-period-line,
.app-period-meta-line {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.app-period-person {
    display: none;
    margin: 0 0 1.25rem;
    font-family: var(--font-mono);
}

.app-period-person-name,
.app-period-person-role {
    margin: 0;
}

.app-period-person-name {
    font-size: var(--employee-name-size);
    font-weight: 650;
}

.app-period-person-role {
    margin-top: 0.12rem;
    color: var(--color-muted);
    font-size: var(--employee-role-size);
    font-weight: 400;
}

.app-period-person-placeholder {
    visibility: hidden;
}

.app-period-meta-line {
    margin-top: 0.65rem;
    align-items: baseline;
    font-size: var(--period-label-size);
    line-height: var(--period-label-line-height);
}

.app-period-title {
    margin: 0;
    color: var(--color-text);
    font-size: var(--period-title-size);
    font-weight: 500;
    line-height: var(--period-title-line-height);
    letter-spacing: var(--period-title-letter-spacing);
    white-space: nowrap;
}

.date-dot {
    display: inline-block;
    margin-left: 0.02em;
    font-size: 0.62em;
    font-weight: 400;
    transform: translateY(0.03em);
}

.date-separator {
    font-weight: 700;
    margin-right: 5px;
    margin-left: 5px;
    transform: translateY(-7px);
}

.date-slash {
    font-weight: 700;
    margin-right: 5px;
    margin-left: 5px;
}

.app-period-nav {
    display: flex;
    gap: 0.65rem;
    margin-left: auto;
    padding: 0 0.15rem 0 1rem;
    font-size: 0.95rem;
}

.app-period-nav a {
    color: var(--color-muted);
    text-decoration: none;
}

.app-period-nav a:hover {
    color: var(--color-text);
}

.app-date-mobile {
    display: none;
}

.app-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.app-danger-zone {
    margin: 1.5rem 0 0;
    padding-top: 0;
    border-top: 0;
}

.app-danger-zone button {
    margin-left: -0.65rem;
    padding: 0.38rem 0.65rem;
    border: 0;
    border-radius: 0.5rem;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-danger-zone button:hover {
    border-color: transparent;
    background: #d96663;
    color: var(--color-text);
}

.app-alert {
    margin: 1rem 0;
    padding: 0.8rem 0.9rem;
    border-left: 3px solid #b85b5b;
    background: #fff3f2;
    color: #762828;
    font-weight: 600;
}

.app-placeholder {
    align-self: start;
}

.app-placeholder h2 {
    margin-bottom: 0.55rem;
}

.app-context-link {
    display: inline-block;
    margin-top: 0.4rem;
}

.calendar-wrap {
    max-width: 100%;
    margin: -0.25rem -0.35rem -0.4rem;
    padding: 0.25rem 0.35rem 0.4rem;
    overflow: visible;
}

.monatskalender {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(34px, 1fr));
    gap: 0.65rem 0.55rem;
    align-items: center;
    justify-items: center;
}

.tag-kreis {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tag-kreis.tag-ausgewaehlt {
    outline: 2px solid #555;
    outline-offset: 2px;
}

.status-arbeit {
    border: 1px solid #222;
    background: #222;
    color: #fff;
    font-weight: 500;
}

.status-leer {
    border: 1px solid #ddd;
    background: transparent;
    color: #aaa;
    font-weight: 400;
}

.status-leer.tag-leer-vergangen {
    color: var(--color-text);
}

.status-frei {
    border: 1px solid transparent;
    background: transparent;
    color: #c6c6c0;
    font-weight: 400;
}

.tag-kreis.status-urlaub {
    border: 0;
    border-radius: 50%;
    background: var(--color-urlaub);
    color: #1e3920;
    font-weight: 500;
}

.tag-kreis.status-halburlaub {
    border: 0;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        transparent 0 50%,
        var(--color-urlaub) 50% 100%
    );
    color: #1e3920;
    font-weight: 500;
}

.tag-kreis.status-halburlaub.status-halburlaub-rechts {
    background: linear-gradient(
        90deg,
        transparent 0 50%,
        var(--color-urlaub) 50% 100%
    );
}

.tag-kreis.status-halburlaub.status-halburlaub-links {
    background: linear-gradient(
        90deg,
        var(--color-urlaub) 0 50%,
        transparent 50% 100%
    );
}

.tag-kreis.status-krank {
    border: 0;
    border-radius: 50%;
    background: var(--color-krank);
    color: #4d4310;
    font-weight: 500;
}

.tag-kreis.status-sonderfrei {
    border: 0;
    border-radius: 50%;
    background: var(--color-sonderfrei);
    color: #542331;
    font-weight: 500;
}

.tag-kreis.status-extern {
    border: 0;
    border-radius: 50%;
    background: var(--color-extern);
    color: #153f3b;
    font-weight: 500;
}

.status-leerzelle {
    border: 1px solid transparent;
    background: transparent;
    color: transparent;
}

.status-arbeit.status-krank,
.status-arbeit.status-urlaub,
.status-arbeit.status-halburlaub,
.status-arbeit.status-sonderfrei,
.status-arbeit.status-extern {
    border: 0;
    border-radius: 50%;
}

.ausfall-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1.25rem;
    margin-left: -0.45rem;
}

.ausfall-aktionen button {
    padding: 0.38rem 0.45rem;
    border: 0;
    border-radius: 0.5rem;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ausfall-aktionen button:hover {
    background: var(--color-line-soft);
    color: var(--color-text);
}

.ausfall-aktionen button[data-ausfall-modus="urlaub"].aktiv {
    background: var(--color-urlaub);
    color: #1e3920;
}

.ausfall-aktionen button[data-ausfall-modus="krank"].aktiv {
    background: var(--color-krank);
    color: #4d4310;
}

.ausfall-aktionen button[data-ausfall-modus="sonderfrei"].aktiv {
    background: var(--color-sonderfrei);
    color: #542331;
}

.ausfall-aktionen button[data-ausfall-modus="extern"].aktiv {
    background: var(--color-extern);
    color: #153f3b;
}

.ausfall-hinweis {
    margin-top: 0.55rem;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-align: left;
}

.stempelmodus-aktiv .nicht-stempelbar {
    opacity: 0.45;
}

.app-day table:not(.monatskalender) {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.app-day table:not(.monatskalender) th,
.app-day table:not(.monatskalender) td {
    padding: 0.55rem 0.45rem;
    border: 0;
    border-bottom: 1px solid var(--color-line-soft);
    text-align: left;
    vertical-align: middle;
}

.app-day table:not(.monatskalender) th {
    color: var(--color-muted);
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-day table:not(.monatskalender) tbody tr:last-child > * {
    border-bottom-color: transparent;
}

.day-dependent-inputs {
    display: flex;
    flex-direction: column;
    margin-top: 0.65rem;
}

.day-input-section > hr {
    display: none;
}

.app-day h3 {
    margin-bottom: 0.25rem;
}

.day-input-section h3 {
    margin-top: 1.15rem;
}

.project-section h3 {
    margin-top: 0;
}

.project-section {
    order: 1;
}

.pause-section {
    order: 2;
}

.worktime-list {
    display: grid;
    gap: 0;
}

.app-day {
    --day-step-width: 1.25rem;
    --day-value-width: 3.2rem;
    --day-action-width: 0.85rem;
}

.time-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--day-step-width)
        var(--day-step-width)
        var(--day-value-width)
        var(--day-action-width)
        var(--day-action-width);
    gap: 0.22rem;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 2rem;
}

.time-row-new {
    grid-template-columns:
        minmax(0, 1fr)
        var(--day-step-width)
        var(--day-step-width)
        var(--day-value-width)
        var(--day-action-width)
        var(--day-action-width);
}

.time-row-field {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.time-row-range {
    display: grid;
    grid-template-columns: var(--day-value-width) auto var(--day-value-width);
    grid-column: 3 / 5;
    justify-self: end;
    min-height: 2rem;
    align-items: center;
    justify-content: flex-end;
    gap: 0.32rem;
    border-bottom: 1px solid var(--color-line-soft);
    font-variant-numeric: tabular-nums;
}

.time-row-input {
    width: 5.1rem;
    min-width: 0;
    min-height: 2rem;
    padding: 0.25rem 0;
    font-family: var(--font-mono);
    font-size: 0.95rem;
}

.time-row-range .time-row-input {
    width: var(--day-value-width);
    padding-right: 0;
    padding-left: 0;
    border-bottom: 0;
    appearance: none;
    text-align: right;
    text-align-last: right;
}

.time-row-range .time-row-input::-webkit-calendar-picker-indicator {
    display: none;
}

.time-row-new .time-row-input {
    width: var(--day-value-width);
}

.time-row-new > .time-row-field:nth-child(2) .time-row-input {
    text-align: right;
}

.time-row-dash {
    color: var(--color-muted);
    text-align: center;
}

.time-row-time {
    min-width: 0;
    text-align: right;
}

.time-row-static {
    display: inline-flex;
    min-width: 0;
    min-height: 2rem;
    padding: 0.25rem 0;
    align-items: right;
    border-bottom: 1px solid var(--color-line-soft);
    font-family: var(--font-mono);
    font-size: 0.95rem;
}

.time-row-static-range {
    display: grid;
    grid-template-columns: var(--day-value-width) auto var(--day-value-width);
    grid-column: 3 / 5;
    justify-self: end;
    justify-content: flex-end;
    gap: 0.32rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.time-row-static-end {
    justify-content: flex-end;
    text-align: right;
}

.time-row-readonly {
    grid-template-columns:
        minmax(0, 1fr)
        var(--day-step-width)
        var(--day-step-width)
        var(--day-value-width)
        var(--day-action-width)
        var(--day-action-width);
}

.time-row-pending .time-row-input {
    border-bottom-color: var(--color-line-soft);
    color: var(--color-pending);
}

.time-row-pending .time-row-input::-webkit-calendar-picker-indicator {
    opacity: 0.45;
}

.time-row-pending .time-row-action {
    color: var(--color-pending);
}

.time-row-label {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.time-row-actions {
    display: grid;
    grid-column: 5 / 7;
    width: calc(var(--day-action-width) * 2);
    min-width: calc(var(--day-action-width) * 2);
    justify-items: end;
    align-self: start;
}

.time-row-actions form {
    width: calc(var(--day-action-width) * 2);
    margin: 0;
}

.time-row-action,
.time-row-add {
    display: inline-flex;
    width: 2rem;
    min-height: 2rem;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    border: 0;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
}

.time-row-action:hover,
.time-row-add:hover {
    border: 0;
    color: var(--color-text);
}

.worktime-add-control {
    margin-top: 0;
}

.worktime-add-control > summary {
    display: grid;
    width: 100%;
    gap: 0.15rem;
    cursor: pointer;
    list-style: none;
}

.worktime-add-labels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2rem;
    gap: 0.65rem;
    width: 100%;
}

.worktime-add-control .time-row-add {
    justify-content: flex-start;
}

.worktime-add-control > summary::-webkit-details-marker {
    display: none;
}

.worktime-add-control[open] > summary {
    display: none;
}

.worktime-add-control[open] > .time-row {
    margin-top: 0;
}

.historical-import {
    display: flow-root;
    margin-top: 0;
}

.historical-import > h3:first-child {
    margin-top: 0.3rem;
}

.historical-import-label {
    margin: 0.75rem 0 0;
    color: var(--color-muted);
}

.pause-time-list {
    display: grid;
}

.pause-time-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--day-step-width)
        var(--day-step-width)
        var(--day-value-width)
        var(--day-action-width)
        var(--day-action-width);
    gap: 0.22rem;
    align-items: center;
    min-width: 0;
    min-height: 2rem;
    color: var(--color-text);
}

.pause-type-input,
.pause-type-text,
.pause-duration-input,
.pause-duration-static {
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    padding: 0.25rem 0;
    border: 0;
    border-bottom: 1px solid var(--color-line-soft);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1;
}

.pause-type-text {
    display: inline-flex;
    align-items: center;
}

.pause-duration-input,
.pause-duration-static {
    grid-column: 4;
    grid-row: 1;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.pause-duration-static {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

.pause-duration-input {
    text-align: right;
}

.pause-row-actions {
    display: contents;
}

.pause-row-actions form {
    display: contents;
    margin: 0;
}

.inline-action-slot {
    display: grid;
    grid-column: 5 / 7;
    grid-row: 1;
    justify-self: end;
    width: var(--day-action-width);
    min-width: var(--day-action-width);
    white-space: nowrap;
}

.inline-action-slot > *,
.inline-action-slot form,
.inline-action-slot form > button {
    grid-area: 1 / 1;
    justify-self: end;
}

.inline-action-slot form {
    display: grid;
    margin: 0;
}

.inline-action-slot [hidden],
.inline-action-slot > form[hidden] {
    display: none !important;
}

.pause-row-action {
    display: inline-flex;
    width: var(--day-action-width);
    min-height: 2rem;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
}

.pause-row-step[data-time-step^="-"] {
    grid-column: 2;
    grid-row: 1;
}

.pause-row-step[data-time-step="5"] {
    grid-column: 3;
    grid-row: 1;
}

.pause-row-clear {
    justify-self: end;
}

.pause-row-save {
    justify-self: end;
}

.pause-row-step,
.project-row-step {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.pause-time-row:hover .pause-row-step,
.pause-time-row:focus-within .pause-row-step,
.project-time-row:hover .project-row-step,
.project-time-row:focus-within .project-row-step {
    opacity: 1;
    pointer-events: auto;
}

.pause-time-row-pending .pause-row-clear,
.project-time-row-pending .project-row-delete {
    display: none !important;
}

.pause-row-action:hover {
    border: 0;
    color: var(--color-text);
}

.pause-row-action[hidden],
.pause-row-delete[hidden],
.project-row-action[hidden],
.project-row-delete[hidden] {
    display: none !important;
}

.pause-time-row-pending {
    color: var(--color-pending);
}

.pause-time-row-pending .pause-row-action {
    color: var(--color-pending);
}

.pause-add-control,
.project-add-control {
    margin-top: 0;
}

.pause-add-control > summary,
.project-add-control > summary {
    display: flex;
    min-height: 2rem;
    align-items: center;
}

.pause-add-form,
.project-add-form {
    margin-top: 0;
}

.project-time-list {
    display: grid;
}

.project-time-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--day-step-width)
        var(--day-step-width)
        var(--day-value-width)
        var(--day-action-width)
        var(--day-action-width);
    gap: 0.22rem;
    align-items: center;
    min-width: 0;
    min-height: 2rem;
    border-bottom: 0;
    color: var(--color-text);
}

.pause-time-row-readonly,
.project-time-row-readonly {
    grid-template-columns:
        minmax(0, 1fr)
        var(--day-step-width)
        var(--day-step-width)
        var(--day-value-width)
        var(--day-action-width)
        var(--day-action-width);
}

.project-code-input,
.project-code-text,
.project-duration-input,
.project-duration-static {
    min-width: 0;
    min-height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1;
}

.project-code-input {
    width: 100%;
    max-width: none;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-line-soft);
    cursor: text;
    text-transform: uppercase;
}

.project-code-text,
.project-duration-static {
    display: inline-flex;
    align-items: center;
}

.project-code-text {
    width: 100%;
    justify-content: flex-start;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-line-soft);
    text-align: left;
}

.project-duration-input,
.project-duration-static {
    grid-column: 4;
    grid-row: 1;
    width: 100%;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-line-soft);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.project-duration-static {
    justify-content: flex-end;
}

.project-duration-input {
    border-bottom-color: var(--color-line-soft);
}

.project-duration-input:focus {
    border-bottom-color: var(--color-line);
    outline: 0;
}

.project-row-leader {
    display: none;
}

.project-row-actions {
    display: contents;
}

.project-row-actions form {
    display: contents;
    margin: 0;
}

.project-row-actions .inline-action-slot form,
.pause-row-actions .inline-action-slot form {
    display: grid;
    margin: 0;
}

.project-row-action {
    display: inline-flex;
    width: var(--day-action-width);
    min-height: 2rem;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
}

.project-row-step[data-time-step^="-"] {
    grid-column: 2;
    grid-row: 1;
}

.project-row-step[data-time-step="15"] {
    grid-column: 3;
    grid-row: 1;
}

.project-row-save {
    justify-self: end;
}

.project-row-delete {
    justify-self: end;
}

.project-row-action:hover {
    border: 0;
    color: var(--color-text);
}

.project-row-action[hidden],
.project-row-delete[hidden] {
    display: none !important;
}

.project-row-action:disabled {
    color: var(--color-line);
    cursor: default;
}

.project-time-row-pending {
    color: var(--color-pending);
}

.project-time-row-pending .project-row-action {
    color: var(--color-pending);
}

.project-time-row-pending .project-row-delete,
.pause-time-row-pending .pause-row-clear {
    display: none !important;
}

.inline-action-slot > form[hidden] {
    display: none !important;
}

@media (hover: none), (pointer: coarse) {
    .pause-time-row:active .pause-row-step,
    .pause-time-row:focus-within .pause-row-step,
    .project-time-row:active .project-row-step,
    .project-time-row:focus-within .project-row-step {
        opacity: 1;
        pointer-events: auto;
    }
}

.project-time-row-historical {
    color: var(--color-text);
}

.project-add-control,
.compact-add-control {
    margin-top: 0;
}

.project-add-control > summary,
.compact-add-control > summary,
.pause-add-control > summary {
    cursor: pointer;
    list-style: none;
}

.project-add-control > summary::-webkit-details-marker,
.compact-add-control > summary::-webkit-details-marker,
.pause-add-control > summary::-webkit-details-marker {
    display: none;
}

.typewriter-plus {
    width: 2rem;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1;
}

.project-add-form {
    margin-top: 0;
}

.project-add-control > summary {
    min-height: 2rem;
    color: var(--color-muted);
}

.project-add-control > summary:hover {
    color: var(--color-text);
}

.project-add-control[open] > summary {
    display: none;
}

.project-add-control datalist {
    display: none;
}

.page-settings {
    min-width: 320px;
}

.settings-column,
.settings-empty {
    min-width: 0;
    overflow: visible;
}

.settings-hint,
.settings-migration-note {
    color: var(--color-muted);
    font-size: 0.75rem;
}

.settings-card-header {
    margin-bottom: 1.5rem;
}

.settings-title-line {
    margin-top: 0.65rem;
}

.settings-period-title {
    letter-spacing: 0rem;
    margin-top: 0.35rem;
    word-break: break-word;
}

.settings-success {
    margin: 0 0 2rem;
    color: #356c39;
    font-size: 0.8rem;
}

.settings-success-inline {
    margin: 0.65rem 0 0;
}

.settings-success[data-settings-auto-fade] {
    animation: settings-success-fade 0.6s ease 5s forwards;
}

@keyframes settings-success-fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.settings-section {
    margin-top: 2.75rem;
}

.settings-section-first {
    margin-top: 0;
}

.settings-section h2 {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.settings-section-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.25rem;
    gap: 0.5rem;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.settings-section-summary::-webkit-details-marker {
    display: none;
}

.settings-section-summary h2 {
    margin-bottom: 0;
}

.settings-details-plus,
.settings-details-minus {
    justify-self: end;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1;
}

.settings-password-details:not([open]) .settings-details-minus,
.settings-password-details[open] .settings-details-plus {
    display: none;
}

.settings-password-details[open] .settings-form {
    margin-top: 1rem;
}

.settings-form,
.settings-work-list,
.settings-pause-list {
    display: grid;
    gap: 0.65rem;
}

.settings-field {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.2fr);
    gap: 1rem;
    align-items: end;
    font-size: 0.8rem;
}

.settings-field span {
    padding-bottom: 0.4rem;
    color: var(--color-muted);
}

.settings-field input {
    width: 100%;
}

.settings-work-row {
    display: grid;
    grid-template-columns: minmax(3.8rem, 0.8fr) minmax(3.8rem, 0.8fr) minmax(9.25rem, 1.8fr) 2rem;
    gap: 0.6rem;
    align-items: center;
    min-width: 0;
    min-height: 2.25rem;
}

.settings-time-input,
.settings-duration-input {
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.settings-work-row .settings-time-input {
    min-width: 0;
    appearance: none;
}

.settings-work-row .settings-time-input::-webkit-calendar-picker-indicator {
    display: none;
}

.settings-weekdays {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    min-width: 0;
}

.settings-weekday {
    position: relative;
    cursor: pointer;
}

.settings-weekday input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.settings-weekday span {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-text);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    line-height: 1;
}

.settings-weekday input:checked + span {
    background: var(--color-text);
    color: var(--color-background);
}

.settings-weekday input:focus-visible + span {
    outline: 2px solid var(--color-muted);
    outline-offset: 2px;
}

.settings-row-action,
.settings-row-add {
    min-height: 2rem;
    padding: 0;
    border: 0;
    color: var(--color-muted);
    font-size: 1rem;
}

.settings-row-actions {
    display: grid;
    width: 2rem;
    min-width: 2rem;
    justify-self: end;
    justify-items: end;
}

.settings-row-add {
    width: 2rem;
    justify-self: start;
    text-align: left;
}

.settings-row-action {
    display: inline-flex;
    width: 2rem;
    min-height: 2rem;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    border: 0;
    color: var(--color-muted);
}

.settings-row-action:hover,
.settings-row-add:hover {
    border: 0;
    color: var(--color-text);
}

.settings-row-action[hidden] {
    display: none;
}

.settings-row-action:disabled {
    color: var(--color-line);
    cursor: default;
}

.settings-row-pending {
    color: var(--color-pending);
}

.settings-row-pending .settings-time-input,
.settings-row-pending .settings-duration-input {
    border-bottom-color: var(--color-line-soft);
    color: var(--color-pending);
}

.settings-row-pending .settings-row-action {
    color: var(--color-pending);
}

.settings-row-pending .settings-weekday span {
    border-color: var(--color-pending);
    color: var(--color-pending);
}

.settings-row-pending .settings-weekday input:checked + span {
    border-color: var(--color-pending);
    background: var(--color-pending);
    color: var(--color-background);
}

.settings-pause-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.25rem 1.25rem minmax(4.2rem, 4.8rem) 2rem;
    gap: 0.25rem;
    align-items: center;
    min-height: 2.25rem;
}

.settings-pause-name {
    font-size: 0.85rem;
}

.settings-duration-input {
    text-align: right;
}

.settings-pause-step {
    width: 1.25rem;
    min-width: 1.25rem;
    justify-content: flex-end;
}

.settings-pause-row .settings-row-actions {
    grid-column: 5;
}

.settings-hint,
.settings-migration-note {
    margin: 0.4rem 0 0;
}

.settings-migration-note code {
    overflow-wrap: anywhere;
}

.settings-submit {
    width: max-content;
    margin-top: 0.5rem;
    padding: 0.35rem 0;
    border: 0;
    border-bottom: 1px solid var(--color-muted);
    border-radius: 0;
    color: var(--color-muted);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.settings-submit:hover {
    border-bottom-color: var(--color-text);
    color: var(--color-text);
}

.settings-submit:disabled {
    border-bottom-color: var(--color-line);
    color: var(--color-line);
    cursor: default;
}

.page-login {
    min-width: 320px;
}

.login-shell {
    min-height: 100vh;
}

.login-card,
.login-empty {
    min-width: 0;
    overflow: visible;
}

.login-card {
    padding-top: calc(clamp(1rem, 2.2vw, 1.6rem) + 3.5875rem);
}

.login-empty {
    min-height: 0;
    padding: 0;
}

.login-card-header {
    margin-bottom: 2rem;
}

.login-period-title {
    letter-spacing: 0rem;
    margin-top: 0.35rem;
    transform: translateX(-5px);
}

.login-form {
    width: min(100%, 21rem);
    gap: 1rem;
}

.login-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
}

.login-field span {
    padding-bottom: 0;
}

.login-alert {
    width: min(100%, 21rem);
    margin-bottom: 1.4rem;
}

.login-submit {
    justify-self: start;
}

.admin-shell,
.admin-employee-list,
.admin-employee-detail,
.admin-contract-list,
.admin-contract-detail,
.admin-project-list,
.admin-project-detail {
    min-width: 0;
}

.admin-column-header {
    margin-bottom: 1.5rem;
}

.admin-period-title {
    font-size: 2.65rem;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: uppercase;
}

.admin-title-line {
    margin-top: 0;
}

.admin-person-list,
.admin-former-list {
    display: grid;
    gap: 0.15rem;
}

.admin-person-row,
.admin-list-add,
.admin-former-toggle {
    min-height: 2rem;
    padding: 0.35rem 0;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-decoration: none;
}

.admin-person-row {
    display: flex;
    align-items: center;
}

.admin-person-row-selected {
    width: max-content;
    max-width: 100%;
    margin-left: -0.35rem;
    padding-right: 0.35rem;
    padding-left: 0.35rem;
    border-radius: 0.4rem;
    background: var(--color-text);
    color: var(--color-background);
}

.admin-person-row-selected:hover {
    color: var(--color-background);
}

.admin-list-add {
    width: 2rem;
    color: var(--color-muted);
    font-size: 1rem;
}

.admin-former-list {
    margin-top: 1.2rem;
}

.admin-person-row-former,
.admin-former-toggle {
    color: var(--color-muted);
}

.admin-contract-people {
    display: grid;
    gap: 0.15rem;
}

.admin-contract-person {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    min-height: 2rem;
    align-items: center;
    padding: 0.35rem 0;
    font-size: 0.82rem;
}

.admin-contract-person-name {
    min-width: 0;
    color: var(--color-text);
    text-decoration: none;
}

.admin-contract-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.admin-contract-dot {
    display: block;
    width: 0.78rem;
    height: 0.78rem;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: transparent;
}

.admin-contract-dot-aktuell {
    border-color: var(--color-text);
    background: var(--color-text);
}

.admin-contract-dot-vergangen {
    border-color: var(--color-text);
}

.admin-contract-dot-zukuenftig {
    border-color: var(--color-muted);
}

.admin-contract-dot-selected {
    outline: 1px solid var(--color-text);
    outline-offset: 3px;
}

.admin-contract-former-list {
    gap: 0.15rem;
}

.admin-contract-person-former,
.admin-contract-person-former .admin-contract-person-name {
    color: var(--color-muted);
}

.admin-contract-person-former .admin-contract-dot-aktuell {
    border-color: var(--color-muted);
    background: var(--color-muted);
}

.admin-projects,
.admin-proposal-list {
    display: grid;
    gap: 0.15rem;
}

.admin-project-row {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 0.45rem;
    min-height: 2rem;
    align-items: center;
    padding: 0.35rem 0;
    color: var(--color-text);
    font-size: 0.82rem;
    text-decoration: none;
}

.admin-project-code {
    letter-spacing: 0.05em;
}

.admin-project-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-project-row-former,
.admin-project-row-former:not(.admin-person-row-selected) {
    color: var(--color-muted);
}

.admin-project-row.admin-person-row-selected,
.admin-proposal-row.admin-person-row-selected {
    width: auto;
    color: var(--color-background);
}

.admin-proposal-section {
    margin-top: 2.75rem;
}

.admin-proposal-section h2,
.admin-proposal-detail h2 {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.admin-proposal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    min-height: 2rem;
    align-items: center;
    padding: 0.35rem 0;
    color: var(--color-muted);
    font-size: 0.76rem;
    text-decoration: none;
}

.admin-project-code-input,
.admin-country-code-input {
    text-transform: uppercase;
}

.admin-proposal-actions {
    display: grid;
    gap: 0.55rem;
    margin-top: 2.5rem;
}

.admin-proposal-action > summary,
.admin-proposal-actions button {
    width: max-content;
    max-width: 100%;
    padding: 0.25rem 0;
    border: 0;
    color: var(--color-muted);
    background: transparent;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

.admin-proposal-action > summary {
    cursor: pointer;
    list-style: none;
}

.admin-proposal-action > summary::-webkit-details-marker {
    display: none;
}

.admin-proposal-action > summary:hover,
.admin-proposal-action[open] > summary,
.admin-proposal-actions button:hover {
    color: var(--color-text);
}

.admin-proposal-action form {
    display: grid;
    gap: 0.55rem;
    margin: 0.7rem 0 1.25rem;
}

.admin-proposal-confirmation {
    margin: 0.35rem 0;
    color: var(--color-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.admin-proposal-submit {
    cursor: pointer;
}

.admin-proposal-action-reject .admin-proposal-submit:hover {
    color: var(--color-danger);
}

.project-time-row-rejected {
    color: var(--color-muted);
}

.admin-former-toggle {
    width: max-content;
    max-width: 100%;
    margin-top: 1rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-detail-form,
.admin-special-add form {
    display: grid;
    gap: 0.45rem;
}

.admin-field-row,
.admin-readonly-row {
    display: grid;
    grid-template-columns: minmax(8.5rem, 1fr) minmax(0, 1.2fr);
    gap: 0.75rem;
    min-height: 2.2rem;
    align-items: end;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.admin-field-row > span,
.admin-readonly-row > span:first-child {
    padding-bottom: 0.35rem;
    color: var(--color-muted);
}

.admin-field-row input,
.admin-field-row select,
.admin-field-row textarea {
    width: 100%;
    min-width: 0;
}

.admin-field-row textarea {
    resize: vertical;
}

.admin-checkbox-row {
    align-items: center;
}

.admin-checkbox-row > span {
    padding-bottom: 0;
}

.admin-checkbox-row input {
    width: 1.1rem;
    min-height: 1.1rem;
    justify-self: end;
}

.admin-save-action,
.admin-special-row button {
    width: 2rem;
    min-height: 2rem;
    margin-top: 0.35rem;
    padding: 0;
    justify-self: end;
    border: 0;
    color: var(--color-muted);
    font-size: 1rem;
}

.admin-save-action[hidden] {
    display: none;
}

.admin-save-action:disabled {
    color: var(--color-line);
    cursor: default;
}

.admin-form-pending .admin-field-row input,
.admin-form-pending .admin-field-row select,
.admin-form-pending .admin-save-action {
    color: var(--color-pending);
}

.admin-login-section,
.admin-special-section,
.admin-contract-schedule {
    margin-top: 2.75rem;
}

.admin-login-section h2,
.admin-special-section h2,
.admin-contract-schedule h2 {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.admin-weekday-row {
    display: grid;
    grid-template-columns: minmax(8.5rem, 1fr) minmax(0, 1.2fr);
    gap: 0.75rem;
    min-height: 2rem;
    align-items: center;
    font-size: 0.8rem;
}

.admin-weekday-row > span {
    color: var(--color-muted);
}

.admin-weekday-row input {
    width: 5.5rem;
    min-width: 0;
    justify-self: end;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.admin-weekday-row input:disabled {
    color: var(--color-muted);
}

.admin-readonly-row > span:last-child {
    padding-bottom: 0.35rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.admin-special-list {
    display: grid;
    gap: 0.35rem;
}

.admin-special-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, auto) 2rem;
    gap: 0.6rem;
    min-height: 2rem;
    align-items: center;
    font-size: 0.75rem;
}

.admin-special-row form {
    margin: 0;
}

.admin-special-row button {
    margin: 0;
}

.admin-special-row-inactive {
    color: var(--color-muted);
}

.admin-special-add {
    margin-top: 0.6rem;
}

.admin-special-add > summary {
    width: 2rem;
    min-height: 2rem;
    color: var(--color-muted);
    cursor: pointer;
    list-style: none;
}

.admin-special-add > summary::-webkit-details-marker {
    display: none;
}

.admin-special-add[open] > summary {
    margin-bottom: 0.5rem;
}

.app-year {
    min-width: 0;
    overflow: visible;
}

.app-year-kicker {
    color: var(--color-muted);
}

.year-compact-message {
    display: none;
    max-width: 30rem;
    color: var(--color-muted);
}

.year-compact-message p {
    margin-bottom: 0.5rem;
}

.year-overview {
    --year-summary-width: 15.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.52rem;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.year-overview-head,
.year-month-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 2.75rem minmax(0, 1fr) minmax(9.5rem, var(--year-summary-width));
    gap: 0.75rem;
    align-items: center;
}

.year-overview-head {
    color: var(--color-muted);
    font-size: 0.65rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.year-month-row {
    min-height: 1.35rem;
}

.year-month-link {
    color: var(--color-muted);
    text-decoration: none;
    letter-spacing: 0.04em;
}

.year-month-link:hover {
    color: var(--color-text);
}

.year-days {
    display: grid;
    grid-template-columns: repeat(42, minmax(0, 1fr));
    align-items: center;
    min-width: 0;
}

.year-day-point {
    display: block;
    width: 9px;
    height: 9px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    justify-self: center;
    background: transparent;
    text-decoration: none;
}

.year-day-point:focus-visible {
    outline: 1px solid var(--color-text);
    outline-offset: 2px;
}

.jahr-status-arbeit {
    border-color: var(--color-text);
    background: var(--color-text);
}

.jahr-status-leer-vergangen {
    border-color: var(--color-text);
}

.jahr-status-hell {
    border-color: var(--color-line);
}

.jahr-status-ausserhalb-vertrag {
    border-color: #fff;
    background: #fff;
}

.jahr-status-platzhalter {
    visibility: hidden;
}

.jahr-status-urlaub {
    border-color: var(--color-urlaub);
    background: var(--color-urlaub);
}

.jahr-status-krank {
    border-color: var(--color-krank);
    background: var(--color-krank);
}

.jahr-status-extra {
    border-color: var(--color-sonderfrei);
    background: var(--color-sonderfrei);
}

.jahr-status-zivil {
    border-color: var(--color-extern);
    background: var(--color-extern);
}

.year-summary,
.year-summary-labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(3.4rem, 1fr));
    gap: 0.65rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.year-summary-future span:last-child {
    color: var(--color-line);
}

.year-summary-row .year-days {
    display: block;
    color: var(--color-muted);
    text-align: right;
}

.year-total-summary {
    display: grid;
    gap: 0.35rem;
    grid-column: 1 / -1;
    justify-self: end;
    width: min(100%, var(--year-summary-width));
    margin-top: 0.9rem;
    padding-top: 0.2rem;
    font-variant-numeric: tabular-nums;
    transform: translateX(30px);
}

.year-total-item {
    color: var(--color-text);
}

.year-total-item-total {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-line);
}

.year-total-item-total + .year-total-item {
    margin-top: 8px;
}

.year-total-item > summary,
.year-total-static {
    display: grid;
    grid-template-columns: minmax(6.75rem, 1fr) minmax(4.5rem, auto) 1.25rem;
    gap: 0.55rem;
    align-items: center;
    min-height: 1.35rem;
    list-style: none;
}

.year-total-static {
    grid-template-columns: minmax(6.75rem, 1fr) minmax(4.5rem, auto) 1.25rem;
}

.year-total-item > summary {
    cursor: pointer;
}

.year-total-item > summary::-webkit-details-marker {
    display: none;
}

.year-total-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    letter-spacing: 0.04em;
}

.year-total-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 1px solid var(--color-text);
    border-radius: 50%;
    background: var(--color-text);
    flex: 0 0 auto;
}

.year-total-value {
    text-align: right;
    white-space: nowrap;
}

.year-total-toggle::before {
    content: "+";
    color: var(--color-muted);
}

.year-total-item[open] .year-total-toggle::before {
    content: "−";
}

.year-total-details {
    display: grid;
    grid-template-columns: minmax(6.75rem, 1fr) minmax(4.5rem, auto) 1.25rem;
    gap: 0.22rem 0.55rem;
    margin: 0.25rem 0 0.55rem 0;
    color: var(--color-muted);
}

.year-total-details span:nth-child(3n + 1) {
    padding-left: calc(9px + 0.45rem);
}

.year-total-details span:nth-child(3n + 2) {
    color: var(--color-text);
    text-align: right;
    white-space: nowrap;
}

.year-total-item-krank .year-total-dot {
    border-color: var(--color-krank);
    background: var(--color-krank);
}

.year-total-item-urlaub .year-total-dot {
    border-color: var(--color-urlaub);
    background: var(--color-urlaub);
}

.year-total-item-sonderurlaub .year-total-dot {
    border-color: var(--color-sonderfrei);
    background: var(--color-sonderfrei);
}

.year-total-item-zivil .year-total-dot {
    border-color: var(--color-extern);
    background: var(--color-extern);
}

.year-corrections {
    grid-column: 1 / -1;
    justify-self: end;
    width: min(100%, var(--year-summary-width));
    margin-top: 0.85rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--color-line);
    transform: translateX(30px);
}

.year-corrections > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.25rem;
    gap: 0.55rem;
    align-items: center;
    min-height: 1.35rem;
    color: var(--color-muted);
    cursor: pointer;
    list-style: none;
}

.year-corrections > summary::-webkit-details-marker {
    display: none;
}

.year-corrections-toggle::before {
    content: "+";
}

.year-corrections[open] .year-corrections-toggle::before {
    content: "−";
}

.year-corrections-body {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.35rem;
}

.year-corrections-body .admin-detail-form {
    margin-top: 0.65rem;
}

.year-correction-row {
    display: grid;
    grid-template-columns: minmax(6.75rem, 1fr) minmax(4.5rem, auto) 1.25rem;
    gap: 0.55rem;
    align-items: center;
    min-height: 1.35rem;
    color: var(--color-muted);
}

.year-correction-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.year-correction-label input {
    min-width: 0;
    width: 100%;
}

.year-correction-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    color: var(--color-text);
    text-align: right;
    white-space: nowrap;
}

.year-correction-value input {
    width: 4.5rem;
    text-align: right;
}

.year-correction-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 0.2rem;
}

.year-correction-actions button {
    min-width: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-family: var(--font-mono);
}

.year-correction-actions button:hover {
    color: var(--color-text);
}

.year-correction-quick-form label {
    display: grid;
    grid-template-columns: minmax(6.75rem, 1fr) minmax(4.5rem, auto) 1.25rem;
    gap: 0.55rem;
    align-items: center;
    min-height: 1.35rem;
    color: var(--color-muted);
}

.year-correction-quick-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    grid-column: 2;
}

.year-correction-unit {
    color: var(--color-muted);
}

.year-correction-quick-value input {
    width: 4.5rem;
    text-align: right;
}

.year-correction-quick-form [data-save-button] {
    justify-self: end;
    min-width: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-family: var(--font-mono);
}

@media (max-width: 420px) {
    .project-code-input {
        max-width: none;
    }

    .project-duration-input,
    .project-duration-static {
        width: 100%;
    }

    .settings-work-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2rem;
        gap: 0.45rem;
    }

    .settings-weekdays {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .settings-row-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .settings-field {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .admin-field-row,
    .admin-readonly-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .admin-checkbox-row {
        grid-template-columns: minmax(0, 1fr) 2rem;
    }

    .admin-special-row {
        grid-template-columns: minmax(0, 1fr) 2rem;
    }

    .admin-special-row > span:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
        color: var(--color-muted);
    }
}

@media (min-width: 720px) {
    .app-month,
    .app-day {
        border-left: 1px solid var(--color-line);
    }

    .app-day > h3:first-of-type {
        margin-top: 2.25rem;
    }

    .historical-import > h3:first-child {
        margin-top: 0.75rem;
    }
}

@media (min-width: 1050px) {
    .app-shell {
        grid-template-columns:
            minmax(170px, 220px)
            minmax(0, 1fr)
            minmax(0, 1fr);
        padding-top: 0;
    }

    .app-settings {
        position: sticky;
        top: 1.5rem;
    }

    .app-settings-header {
        display: none;
    }

    .app-period-person {
        display: block;
    }

    .app-month .app-period-person {
        transform: translateY(-15px);
    }

    .app-year .app-period-person {
        transform: translateY(-15px);
    }

    .app-settings-nav {
        margin-top: clamp(7rem, calc(2.7rem + 6.24vw), 9.35rem);
        transform: none;
    }

    .app-day > h3:first-of-type {
        margin-top: 2.15rem;
    }

    .historical-import > h3:first-child {
        margin-top: 0.75rem;
    }

    .app-month > .app-card-header,
    .app-day > .app-card-header {
        top: 0;
        margin-bottom: 1.5rem;
        padding-top: 0.5rem;
    }

    .app-shell-year .app-year {
        grid-column: 2 / 4;
        border-left: 1px solid var(--color-line);
    }

    .app-year > .app-card-header {
        top: 0;
        margin-bottom: 0.5rem;
        padding-top: 0.5rem;
    }
}

@media (min-width: 720px) and (max-width: 1049px) {
    .app-topbar {
        display: flex;
        padding-right: calc(clamp(0.8rem, 3vw, 1.5rem) + clamp(1rem, 2.2vw, 1.6rem));
        padding-left: calc(clamp(0.8rem, 3vw, 1.5rem) + clamp(1rem, 2.2vw, 1.6rem));
    }

    .app-shell {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding-top: 0.75rem;
    }


    .app-day > h3:first-of-type {
        margin-top: 1.75rem;
    }

    .app-card {
        padding-top: 1rem;
    }

    .page-month .app-shell,
    .page-day .app-shell,
    .page-settings .app-shell,
    .page-admin .app-shell {
        padding-top: 0;
        row-gap: 2rem;
    }

    .page-day .app-shell {
        transform: translateY(8px);
    }

    .page-month .app-shell > .app-topbar,
    .page-day .app-shell > .app-topbar,
    .page-settings .app-shell > .app-topbar,
    .page-admin .app-shell > .app-topbar {
        grid-column: 1 / -1;
        width: 100%;
        min-height: var(--app-employee-compact-header-height);
        padding: 0.45rem clamp(1rem, 2.2vw, 1.6rem);
    }

    .page-month .app-card-header,
    .page-day .app-card-header,
    .page-settings .app-card-header,
    .page-admin .app-card-header {
        top: var(--app-employee-compact-header-height);
    }

    .app-settings {
        display: none;
    }

    .app-month {
        border-left: 0;
    }

    .app-shell-year {
        grid-template-columns: minmax(0, 1fr);
    }

    .year-overview-head,
    .year-month-row {
        grid-template-columns: 2.5rem minmax(0, 1fr) minmax(12.5rem, 15.5rem);
        gap: 0.5rem;
    }

    .year-day-point {
        width: 8px;
        height: 8px;
    }

    .page-month .app-topbar-person,
    .page-day .app-topbar-person,
    .page-year .app-topbar-person,
    .page-settings .app-topbar-person,
    .page-admin .app-topbar-person {
        transform: translateY(12px);
    }

    .page-month .app-topbar-person .app-user-role,
    .page-day .app-topbar-person .app-user-role,
    .page-year .app-topbar-person .app-user-role,
    .page-settings .app-topbar-person .app-user-role,
    .page-admin .app-topbar-person .app-user-role {
        margin-top: 0.22rem;
    }


}

@media (max-width: 719px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overscroll-behavior-x: none;
    }

    .app-topbar {
        display: flex;
        align-items: flex-start;
        padding-right: 1.75rem;
        padding-left: 1.75rem;
    }

    .app-topbar-brand {
        padding-top: 0.4rem;
    }

    .app-view-nav {
        flex-wrap: wrap;
    }

    .app-day > h3:first-of-type {
        margin-top: 1.75rem;
    }

    .app-shell {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.75rem;
        padding-bottom: 1rem;
        overflow-x: hidden;
    }

    .page-month .app-shell,
    .page-day .app-shell,
    .page-settings .app-shell,
    .page-admin .app-shell {
        padding-top: 0.25rem;
        row-gap: 1.6rem;
    }

    .page-month .app-shell > .app-topbar,
    .page-day .app-shell > .app-topbar,
    .page-settings .app-shell > .app-topbar,
    .page-admin .app-shell > .app-topbar {
        grid-column: 1 / -1;
        width: 100%;
        min-height: var(--app-employee-compact-header-height);
        padding: 0.45rem 1rem;
    }

    .page-month .app-card-header,
    .page-day .app-card-header,
    .page-settings .app-card-header,
    .page-admin .app-card-header {
        top: var(--app-employee-compact-header-height);
    }

    .page-month .app-card-header,
    .page-day .app-card-header {
        position: static;
        top: auto;
    }

    .app-card {
        padding: 1rem;
        border-radius: 0;
        overflow-x: hidden;
    }

    .app-settings,
    .page-month .app-day,
    .page-day .app-month,
    .page-settings .settings-empty {
        display: none;
    }

    .app-card-header {
        display: block;
    }

    .app-date-desktop {
        display: none;
    }

    .app-date-mobile {
        display: inline;
    }

    .app-period-title {
        letter-spacing: -0.08em;
        white-space: nowrap;
    }

    .tag-kreis {
        width: 34px;
        height: 34px;
    }

    .page-month .calendar-wrap,
    .page-day .calendar-wrap {
        overflow: visible;
    }

    .page-month .monatskalender {
        gap: 0.5rem 0.38rem;
        grid-template-columns: repeat(7, minmax(30px, 1fr));
    }

    .page-day .app-day {
        --day-step-width: 1.05rem;
        --day-value-width: 3rem;
        --day-action-width: 1.65rem;
    }

    .page-day .pause-time-row,
    .page-day .pause-time-row-readonly,
    .page-day .project-time-row,
    .page-day .project-time-row-readonly {
        grid-template-columns:
            minmax(0, 1fr)
            var(--day-step-width)
            var(--day-step-width)
            var(--day-value-width)
            var(--day-action-width);
        column-gap: 0.18rem;
        width: 100%;
        max-width: 100%;
    }

    .page-day .worktime-list .time-row {
        display: grid;
        grid-template-columns: minmax(0, max-content) 2.75rem;
        gap: 0.35rem 0.5rem;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .page-day .worktime-list .time-row-range,
    .page-day .worktime-list .time-row-static-range {
        display: grid;
        grid-column: 1 / 2;
        grid-row: 1;
        grid-template-columns: 3.2rem 0.75rem 3.2rem;
        gap: 0.25rem;
        width: 7.4rem;
        max-width: 100%;
        min-width: 0;
        justify-self: start;
        justify-content: start;
    }

    .page-day .worktime-list .time-row-range .time-row-input {
        width: 3.2rem;
        inline-size: 3.2rem;
        max-width: 3.2rem;
        max-inline-size: 3.2rem;
        min-width: 0;
        min-inline-size: 0;
        font-size: 0.9rem;
    }

    .page-day .worktime-list .time-row-actions {
        display: grid;
        grid-column: 2 / 3;
        grid-row: 1;
        width: 2.75rem;
        min-width: 2.75rem;
        justify-items: start;
        align-self: center;
    }

    .page-day .worktime-list .time-row-actions form {
        width: 2.75rem;
    }

    .page-day .pause-duration-input,
    .page-day .pause-duration-static,
    .page-day .project-duration-input,
    .page-day .project-duration-static {
        grid-column: 4;
        width: var(--day-value-width);
        min-width: 0;
        justify-self: end;
    }

    .page-day .inline-action-slot {
        grid-column: 5;
        width: var(--day-action-width);
        min-width: var(--day-action-width);
        justify-items: end;
    }

    .page-day .time-row-action,
    .page-day .pause-row-action,
    .page-day .project-row-action {
        width: var(--day-action-width);
        min-width: var(--day-action-width);
        min-height: 2rem;
        justify-content: flex-end;
    }

    .page-day .time-row-action {
        width: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.5rem;
        justify-content: flex-end;
    }

    .page-day .pause-row-step,
    .page-day .project-row-step {
        justify-content: center;
    }

    .page-day .pause-time-row,
    .page-day .project-time-row {
        overflow: visible;
        white-space: nowrap;
    }

    .page-day .app-period-nav a {
        display: inline-flex;
        min-width: 2rem;
        min-height: 2rem;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
    }

    .page-day .pause-type-text,
    .page-day .project-code-text,
    .page-day .project-code-input,
    .page-day .pause-type-input {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-day table:not(.monatskalender) {
        min-width: 0;
    }

    .page-year .year-overview {
        display: none;
    }

    .page-year .year-compact-message {
        display: block;
    }

    .page-month .app-topbar-person,
    .page-day .app-topbar-person,
    .page-year .app-topbar-person,
    .page-settings .app-topbar-person,
    .page-admin .app-topbar-person {
        transform: translateY(12px);
    }

    .page-month .app-topbar-person .app-user-role,
    .page-day .app-topbar-person .app-user-role,
    .page-year .app-topbar-person .app-user-role,
    .page-settings .app-topbar-person .app-user-role,
    .page-admin .app-topbar-person .app-user-role {
        margin-top: 0.22rem;
    }

    .page-month .app-topbar-person .app-period-person-role,
    .page-day .app-topbar-person .app-period-person-role,
    .page-year .app-topbar-person .app-period-person-role,
    .page-settings .app-topbar-person .app-period-person-role,
    .page-admin .app-topbar-person .app-period-person-role {
        margin-top: 0.22rem;
    }

}

@media (max-width: 1099px) {
    .page-month .app-view-nav,
    .page-day .app-view-nav,
    .page-settings .app-view-nav,
    .page-admin .app-view-nav {
        transform: translateY(8px);
    }
}