:root {
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--wt-surface-alt, #f4f6f8);
    color: var(--wt-text, #17202a);
    --worktime-safe-top: env(safe-area-inset-top, 0px);
}

/* 1.0.11-r9: safe-area stays environment-driven. Android standalone Chrome
   already reserves its status bar when safe-area-inset-top is zero, so a
   synthetic minimum would create duplicate white space above app headers. */

* {
    box-sizing: border-box;
}

/* Text fields keep the form width when resized, in every client. */
textarea {
    resize: vertical;
    max-width: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.card {
    width: min(100%, 560px);
    padding: 32px;
    border: 1px solid var(--wt-info-border, #dfe5eb);
    border-radius: 18px;
    background: var(--wt-surface, #ffffff);
    box-shadow: 0 16px 48px var(--wt-shadow, rgba(23, 32, 42, 0.08));
}

.status {
    width: 14px;
    height: 14px;
    margin-bottom: 24px;
    border-radius: 50%;
}

.status--ready {
    background: var(--wt-success-solid, #16813b);
    box-shadow: 0 0 0 7px var(--wt-success-border, #e7f5eb);
}

.status--checking {
    background: var(--wt-info-solid, #3478c8);
    box-shadow: 0 0 0 7px var(--wt-info-border, #e8f1fb);
    animation: status-pulse 1.2s ease-in-out infinite alternate;
}

.status--closed {
    background: var(--wt-warning-solid, #a86b00);
    box-shadow: 0 0 0 7px var(--wt-warning-border, #fff3d6);
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--wt-muted, #66717d);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1 {
    margin: 0 0 16px;
    font-size: clamp(26px, 6vw, 36px);
    line-height: 1.1;
}

p {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
}

.identity {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--wt-success-border, #dfe9e2);
    border-radius: 14px;
    background: var(--wt-success-soft, #f5fbf7);
}

.identity__label {
    color: var(--wt-success-text, #35704a);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.identity__name {
    margin-top: 6px;
    font-size: 21px;
    font-weight: 700;
}

.identity__details {
    margin: 16px 0 0;
}

.identity__details div {
    display: grid;
    grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1fr);
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--wt-success-border, #e1ece4);
}

.identity__details dt,
.identity__details dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.identity__details dt {
    color: var(--wt-muted, #66717d);
}

.identity__details dd {
    overflow-wrap: anywhere;
    font-weight: 600;
}

.identity__details [hidden] {
    display: none !important;
}

.note {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--wt-info-border, #edf0f3);
    color: var(--wt-muted, #66717d);
    font-size: 14px;
}

.employee-picker {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--wt-info-border, #dfe5eb);
    border-radius: 14px;
    background: var(--wt-info-soft, #f8fafb);
}

.employee-picker label {
    display: block;
    margin-bottom: 8px;
    color: var(--wt-text, #37414b);
    font-size: 14px;
    font-weight: 700;
}

.employee-picker select {
    width: 100%;
    min-height: 48px;
    padding: 10px 40px 10px 12px;
    border: 1px solid var(--wt-info-border, #cbd5df);
    border-radius: 10px;
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
}

.employee-picker select:disabled {
    cursor: wait;
    opacity: 0.65;
}

.employee-picker p {
    margin-top: 10px;
    color: var(--wt-muted, #66717d);
    font-size: 13px;
}

.shift {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--wt-info-border, #dfe5eb);
    border-radius: 14px;
    background: var(--wt-info-soft, #fbfcfd);
}

.shift__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.shift__label,
.shift__intervals-title {
    color: var(--wt-muted, #66717d);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.shift__date {
    margin-top: 4px;
    font-size: 14px;
}

.shift__employee {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
}

.shift__badge {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.shift__badge--open {
    color: var(--wt-success-text, #146c35);
    background: var(--wt-success-soft, #e5f5e9);
}

.shift__badge--closed {
    color: var(--wt-muted, #66717d);
    background: var(--wt-surface-alt, #edf0f3);
}

.shift__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 14px 0;
    border-top: 1px solid var(--wt-info-border, #e8edf1);
}

.shift__summary span {
    color: var(--wt-muted, #66717d);
    font-size: 14px;
}

.shift__summary strong {
    font-size: 20px;
}

#employee-month-worked-summary:not([hidden]) {
    display: flex;
}

.operations__month-expenses {
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 14px 0;
    border-top: 1px solid var(--wt-info-border, #e8edf1);
    border-bottom: 1px solid var(--wt-info-border, #e8edf1);
}

.operations__month-expenses:not([hidden]) {
    display: flex;
}

.operations__month-expenses span {
    color: var(--wt-muted, #66717d);
    font-size: 14px;
}

.operations__month-expenses strong {
    font-size: 20px;
}

.shift__button {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-success-solid, #16813b);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.shift__button--stop {
    background: var(--wt-warning-solid, #b45f06);
}

.shift__button:active:not(:disabled) {
    transform: translateY(1px);
}

.shift__button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.shift__feedback {
    min-height: 22px;
    margin-top: 10px;
    color: var(--wt-muted, #66717d);
    font-size: 14px;
}

.shift__feedback--error {
    color: var(--wt-error-text, #9b2c2c);
}

.shift__intervals {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--wt-info-border, #e8edf1);
}

.shift__intervals ol {
    margin: 10px 0 0;
    padding-left: 24px;
}

.shift__intervals li {
    padding: 4px 0;
    color: var(--wt-text, #37414b);
    font-size: 14px;
    line-height: 1.45;
}

.shift__interval-audit {
    display: block;
    margin-top: 2px;
    color: var(--wt-muted, #66717d);
    font-size: 12px;
}

@keyframes status-pulse {
    from {
        opacity: 0.55;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    body {
        padding: 18px;
    }

    .card {
        padding: 26px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .status--checking {
        animation: none;
    }
}

.module-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 24px;
    padding: 5px;
    border-radius: 12px;
    background: var(--wt-info-soft, #edf1f4);
}

.module-tabs__button {
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    color: var(--wt-muted, #5d6873);
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.module-tabs__button--active {
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    box-shadow: 0 2px 8px var(--wt-shadow, rgba(23, 32, 42, 0.08));
}

.operations {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--wt-info-border, #dfe5eb);
    border-radius: 14px;
    background: var(--wt-info-soft, #fbfcfd);
}

.operations__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.section-label {
    color: var(--wt-muted, #66717d);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.operations__employee {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
}

.operations__month {
    margin-top: 4px;
    font-size: 14px;
}

.operations__pending {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--wt-warning-text, #765300);
    background: var(--wt-warning-soft, #fff1c7);
    font-size: 12px;
    font-weight: 700;
}

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

.operations__summary div {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--wt-info-border, #e5eaee);
    border-radius: 11px;
    background: var(--wt-surface, #ffffff);
}

.operations__summary span,
.operations__summary strong {
    display: block;
}

.operations__summary span {
    min-height: 36px;
    color: var(--wt-muted, #66717d);
    font-size: 12px;
    line-height: 1.35;
}

.operations__summary strong {
    margin-top: 7px;
    overflow-wrap: anywhere;
    font-size: 17px;
}

.operation-form {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--wt-info-border, #e8edf1);
}

.operation-form label {
    display: block;
    margin: 14px 0 7px;
    color: var(--wt-text, #37414b);
    font-size: 14px;
    font-weight: 700;
}

.operation-form input[type="text"],
.operation-form input[type="file"],
.operation-form select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--wt-info-border, #cbd5df);
    border-radius: 10px;
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
}

.operation-form input[type="file"] {
    padding: 8px;
    font-size: 13px;
}

.field-help,
.operation-form__rule {
    margin-top: 7px;
    color: var(--wt-muted, #66717d);
    font-size: 13px;
}

/* 1.0.10-r4: normal informational operation surfaces use the brand mint surface,
   while semantic neutral/disabled/cancelled greys remain unchanged elsewhere. */
.operation-form__rule {
    min-height: 40px;
    padding: 11px 12px;
    border-radius: 9px;
    background: var(--wt-success-soft, var(--brand-surface));
}

.operation-form__submit {
    width: 100%;
    min-height: 52px;
    margin-top: 14px;
    border: 0;
    border-radius: 12px;
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-info-solid, #3478c8);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.operation-form__submit:disabled {
    cursor: wait;
    opacity: 0.6;
}

.operation-form__feedback {
    min-height: 22px;
    margin-top: 10px;
    color: var(--wt-muted, #66717d);
    font-size: 14px;
}

.operation-form__feedback--error {
    color: var(--wt-error-text, #9b2c2c);
}

.operation-history {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--wt-info-border, #e8edf1);
}

.operation-history__empty {
    margin-top: 12px;
    color: var(--wt-muted, #66717d);
    font-size: 14px;
}

.operation-card {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--wt-info-border, #e2e7eb);
    border-radius: 12px;
    background: var(--wt-surface, #ffffff);
}

.operation-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.operation-card h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
}

.operation-card__meta {
    margin-top: 3px;
    color: var(--wt-muted, #77818b);
    font-size: 11px;
}

.operation-card__status {
    flex: 0 0 auto;
    max-width: 140px;
    padding: 5px 7px;
    border-radius: 999px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.operation-card__status--confirmed {
    color: var(--wt-success-text, #146c35);
    background: var(--wt-success-soft, #e5f5e9);
}

.operation-card__status--pending {
    color: var(--wt-warning-text, #765300);
    background: var(--wt-warning-soft, #fff1c7);
}

.operation-card__status--inactive {
    color: var(--wt-error-text, #7b3131);
    background: var(--wt-error-soft, #fae7e7);
}

.operation-card__amount {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 800;
}

.operation-card__details,
.operation-card__admin-note {
    margin-top: 7px;
    color: var(--wt-muted, #66717d);
    font-size: 12px;
}

.operation-card__admin-note {
    padding: 8px 9px;
    border-radius: 8px;
    color: var(--wt-error-text, #7b3131);
    background: var(--wt-error-soft, #fff3f3);
}

.operation-card__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.operation-card__photos a {
    padding: 6px 9px;
    border-radius: 8px;
    color: var(--wt-info-text, #245f9e);
    background: var(--wt-info-soft, #edf5fd);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.operation-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.operation-card__button {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--wt-info-border, #cbd5df);
    border-radius: 8px;
    color: var(--wt-text, #37414b);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.operation-card__button--confirm {
    border-color: var(--wt-success-border, #16813b);
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-success-solid, #16813b);
}

.operation-card__button--danger {
    border-color: var(--wt-error-border, #d7abab);
    color: var(--wt-error-text, #8c3030);
    background: var(--wt-error-soft, #fff8f8);
}

@media (min-width: 700px) {
    .card {
        width: min(100%, 680px);
    }
}

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

    .operations__summary span {
        min-height: 0;
    }

    .operation-card__header {
        display: block;
    }

    .operation-card__status {
        display: inline-block;
        margin-top: 8px;
    }
}

.operation-approvals {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--wt-warning-border, #ead596);
    border-radius: 12px;
    background: var(--wt-warning-soft, #fffaf0);
}

.operation-approvals .operation-card {
    border-color: var(--wt-warning-border, #eadfbf);
}

.operation-approvals--personal {
    margin-top: 0;
    margin-bottom: 20px;
}

.operation-approvals__help {
    margin-top: 6px;
    color: var(--wt-warning-text, #746943);
    font-size: 13px;
    line-height: 1.45;
}

.operation-card--approval h3 {
    padding-right: 4px;
}

/* 0.6.2: app-owned controls, document previews and modal actions. */
body.modal-open {
    overflow: hidden;
}

.native-select {
    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;
}

.select-control,
.file-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 11px 14px;
    border: 1px solid var(--wt-info-border, #cbd5df);
    border-radius: 11px;
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.select-control b {
    flex: 0 0 auto;
    color: var(--wt-muted, #5d6873);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}

.select-control:disabled,
.file-picker:disabled {
    cursor: wait;
    opacity: 0.6;
}

.file-picker {
    justify-content: center;
    border-color: var(--wt-info-border, #9db8d6);
    color: var(--wt-info-text, #245f9e);
    font-weight: 700;
}

.operation-form__rule[hidden],
.operations__summary[hidden] {
    display: none;
}

.operation-form__rule {
    min-height: 0;
}

.field-error {
    margin-top: 8px;
    color: var(--wt-error-text, #9b2c2c);
    font-size: 13px;
}

.field-group--error .file-picker {
    border-color: var(--wt-error-border, #b94a4a);
    box-shadow: 0 0 0 2px var(--wt-shadow, rgba(185, 74, 74, 0.12));
}

.file-previews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.file-preview {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--wt-info-border, #dfe5eb);
    border-radius: 10px;
    background: var(--wt-surface-alt, #f4f6f8);
}

.file-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.file-preview img[hidden],
.file-preview__placeholder[hidden] {
    display: none !important;
}

.file-preview__placeholder {
    display: grid;
    place-items: center;
    min-height: 110px;
    margin: 0;
    padding: 10px;
    color: var(--wt-muted, #64716f);
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}

.file-preview--loading .file-preview__placeholder::before {
    content: '';
    width: 20px;
    height: 20px;
    margin-bottom: 7px;
    border: 2px solid var(--wt-success-border, #c8d9d5);
    border-top-color: var(--wt-success-border, #2b7b70);
    border-radius: 50%;
    animation: file-preview-spin 0.8s linear infinite;
}

@keyframes file-preview-spin {
    to { transform: rotate(360deg); }
}

.file-preview button {
    width: 100%;
    padding: 7px 5px;
    border: 0;
    border-top: 1px solid var(--wt-info-border, #dfe5eb);
    color: var(--wt-error-text, #8c3030);
    background: var(--wt-error-soft, #fff8f8);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
}

.operation-card__photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.document-thumb {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--wt-info-border, #d9e4ef);
    border-radius: 9px;
    color: var(--wt-info-text, #245f9e);
    background: var(--wt-info-soft, #edf5fd);
    font: inherit;
    cursor: pointer;
}

.document-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--wt-surface, #ffffff);
}

.document-thumb span {
    display: block;
    padding: 6px 5px;
    font-size: 11px;
    font-weight: 700;
}

.operation-card__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.operation-card__button {
    width: 100%;
    min-height: 42px;
}

.operation-card__button--admin {
    border-color: var(--wt-info-border, #8067b2);
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-info-solid, #6f55a0);
}

.operation-approvals--admin {
    border-color: var(--wt-info-border, #cfc1e5);
    background: var(--wt-info-soft, #faf7ff);
}

.operation-approvals--admin .operation-card {
    border-color: var(--wt-info-border, #ddd2ed);
}

.app-modal[hidden] {
    display: none !important;
}

.app-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
}

.app-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: var(--wt-overlay, rgba(23, 32, 42, 0.55));
}

.app-modal__sheet {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    max-height: min(82vh, 760px);
    padding: 20px;
    overflow: auto;
    border: 1px solid var(--wt-info-border, #dfe5eb);
    border-radius: 18px;
    background: var(--wt-surface, #ffffff);
    box-shadow: 0 20px 60px var(--wt-shadow, rgba(23, 32, 42, 0.25));
}

.app-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.app-modal__header h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.25;
}

.icon-button {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: var(--wt-muted, #4f5a65);
    background: var(--wt-info-soft, #edf1f4);
    font: inherit;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.select-options {
    display: grid;
    gap: 8px;
}

.select-option {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--wt-info-border, #dfe5eb);
    border-radius: 11px;
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.select-option--selected {
    border-color: var(--wt-info-border, #3478c8);
    background: var(--wt-info-soft, #eef5fd);
    box-shadow: inset 4px 0 0 var(--wt-info-border, #3478c8);
    font-weight: 700;
}

.modal-operation-summary {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--wt-text, #37414b);
    background: var(--wt-success-soft, var(--brand-surface));
    font-size: 15px;
    font-weight: 700;
}

#operation-action-form label,
.form-label {
    display: block;
    margin: 14px 0 7px;
    color: var(--wt-text, #37414b);
    font-size: 14px;
    font-weight: 700;
}

#operation-action-form input,
#operation-action-form textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--wt-info-border, #cbd5df);
    border-radius: 10px;
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
}

#operation-action-form textarea {
    resize: vertical;
}

.choice-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.choice-buttons button {
    min-height: 46px;
    border: 1px solid var(--wt-info-border, #cbd5df);
    border-radius: 10px;
    color: var(--wt-text, #37414b);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-weight: 700;
}

.choice-buttons .choice-button--active {
    border-color: var(--wt-info-border, #3478c8);
    color: var(--wt-info-text, #245f9e);
    background: var(--wt-info-soft, #eef5fd);
}

.modal-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 9px;
    margin-top: 18px;
}

.modal-button {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--wt-info-border, #cbd5df);
    border-radius: 10px;
    color: var(--wt-text, #37414b);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.modal-button--primary {
    border-color: var(--wt-info-border, #3478c8);
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-info-solid, #3478c8);
}

.modal-button--danger {
    border-color: var(--wt-error-border, #a83939);
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-error-solid, #a83939);
}

.modal-button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.app-modal--photo .app-modal__sheet {
    max-height: 90vh;
}

.photo-modal__stage {
    position: relative;
    display: grid;
    min-height: 200px;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background: var(--wt-surface-alt, #f4f6f8);
}

#photo-modal-image {
    display: block;
    width: 100%;
    min-height: 200px;
    max-height: calc(90vh - 100px);
    object-fit: contain;
    background: var(--wt-surface-alt, #f4f6f8);
    transition: filter 0.18s ease-out, opacity 0.18s ease-out;
}

#photo-modal-image.is-preview {
    filter: blur(1px);
    opacity: 0.96;
}

#photo-modal-image[hidden] {
    display: none !important;
}

.photo-modal__loading {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 16px;
    max-width: calc(100% - 32px);
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-surface-alt, rgba(20, 28, 26, 0.74));
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
}

.photo-modal__loading[hidden] {
    display: none !important;
}

@media (min-width: 700px) {
    .app-modal {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .app-modal {
        padding: 10px;
    }

    .app-modal__sheet {
        padding: 18px 16px;
        border-radius: 16px;
    }

    .file-previews,
    .operation-card__photos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operation-card__actions,
    .modal-actions {
        grid-template-columns: 1fr;
    }
}

/* 0.6.4: Chudopal green theme, five-minute time picker and standalone admin queue. */
:root {
    --brand-green-dark: #174a44;
    --brand-green: #287568;
    --brand-green-deep: #1f6258;
    --brand-mint: #a8e3ce;
    --brand-mint-soft: #dff4ec;
    --brand-surface: #edf8f3;
    --brand-border: #bddfd2;
    --brand-text: #17232a;
    background: var(--wt-success-soft, var(--brand-surface));
    color: var(--wt-text, var(--brand-text));
}

body {
    background: var(--wt-success-soft, #edf8f3);
}

.card {
    border-color: var(--wt-success-border, #cfe5dc);
    box-shadow: 0 16px 48px var(--wt-shadow, rgba(23, 74, 68, 0.10));
}

.status--ready,
.status--checking {
    background: var(--wt-success-solid, var(--brand-green));
    box-shadow: 0 0 0 7px var(--wt-success-border, var(--brand-mint-soft));
}

.identity {
    border-color: var(--wt-success-border, var(--brand-border));
    background: var(--wt-success-soft, #f3fbf8);
}

.identity__label,
.eyebrow {
    color: var(--wt-success-text, var(--brand-green-deep));
}

.employee-picker,
.shift,
.operations {
    border-color: var(--wt-success-border, #cfe5dc);
    background: var(--wt-success-soft, #fbfefd);
}

.module-tabs {
    background: var(--wt-success-soft, #deeee8);
}

.module-tabs__button {
    color: var(--wt-success-text, #526a65);
}

.module-tabs__button--active {
    color: var(--wt-success-text, var(--brand-green-dark));
    background: var(--wt-surface, #ffffff);
    box-shadow: 0 2px 8px var(--wt-shadow, rgba(23, 74, 68, 0.12));
}

.select-control:focus-visible,
.journal-filters__search input:focus-visible,
.file-picker:focus-visible,
.operation-form input:focus-visible,
#operation-action-form input:focus-visible,
#operation-action-form textarea:focus-visible,
.shift-time__control:focus-visible,
.time-wheel__option:focus-visible,
.modal-button:focus-visible,
.operation-card__button:focus-visible {
    outline: 3px solid var(--wt-success-border, rgba(40, 117, 104, 0.22));
    outline-offset: 2px;
}

.select-control,
.file-picker,
.operation-form input[type="text"],
#operation-action-form input,
#operation-action-form textarea {
    border-color: var(--wt-success-border, #b9d5cb);
}

.select-option--selected {
    border-color: var(--wt-success-border, var(--brand-green));
    background: var(--wt-success-soft, var(--brand-surface));
    box-shadow: inset 4px 0 0 var(--wt-success-border, var(--brand-green));
}

.file-picker,
.operation-card__photos a,
.document-thumb {
    border-color: var(--wt-success-border, var(--brand-border));
    color: var(--wt-success-text, var(--brand-green-dark));
    background: var(--wt-success-soft, var(--brand-surface));
}

.operation-form__submit,
.modal-button--primary,
.operation-card__button--confirm,
.operation-card__button--admin {
    border-color: var(--wt-success-border, var(--brand-green-dark));
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-success-solid, var(--brand-green-dark));
}

.operation-form__submit:active:not(:disabled),
.modal-button--primary:active:not(:disabled),
.operation-card__button--confirm:active:not(:disabled),
.operation-card__button--admin:active:not(:disabled),
.shift__button:active:not(:disabled) {
    transform: translateY(1px);
    background: var(--wt-success-solid, #103d38);
}

.shift__button,
.shift__button--stop {
    background: var(--wt-success-solid, var(--brand-green-dark));
}

.choice-buttons .choice-button--active {
    border-color: var(--wt-success-border, var(--brand-green));
    color: var(--wt-success-text, var(--brand-green-dark));
    background: var(--wt-success-soft, var(--brand-surface));
}

.operation-approvals--admin {
    border-color: var(--wt-success-border, var(--brand-border));
    background: var(--wt-success-soft, #f1faf7);
}

.operation-approvals--admin .operation-card {
    border-color: var(--wt-success-border, #cfe5dc);
}

.operation-admin-panel {
    margin-top: 24px;
    padding: 20px;
    border-radius: 14px;
}

.operation-admin-panel__help {
    margin-top: 6px;
    color: var(--wt-muted, #667973);
    font-size: 13px;
}

.shift-time {
    margin: 4px 0 14px;
    padding: 14px;
    border: 1px solid var(--wt-success-border, #cfe5dc);
    border-radius: 12px;
    background: var(--wt-success-soft, #f1faf7);
}

.shift-time__label {
    display: block;
    margin-bottom: 7px;
    color: var(--wt-success-text, #374b46);
    font-size: 14px;
    font-weight: 700;
}

.shift-time__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 58px;
    padding: 9px 14px;
    border: 1px solid var(--wt-success-border, var(--brand-border));
    border-radius: 11px;
    color: var(--wt-text, var(--brand-text));
    background: var(--wt-surface, #ffffff);
    font: inherit;
    cursor: pointer;
}

.shift-time__control span {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.shift-time__control b {
    color: var(--wt-success-text, var(--brand-green-deep));
    font-size: 13px;
}

.shift-time__control:disabled {
    cursor: wait;
    opacity: 0.6;
}

.shift-time p {
    margin-top: 8px;
    color: var(--wt-muted, #667973);
    font-size: 12px;
}

.time-picker__selected {
    padding: 13px 16px;
    border: 1px solid var(--wt-success-border, var(--brand-border));
    border-radius: 12px;
    color: var(--wt-success-text, var(--brand-green-dark));
    background: var(--wt-success-soft, var(--brand-surface));
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.time-picker__wheels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.time-picker__caption {
    display: block;
    margin-bottom: 7px;
    color: var(--wt-muted, #667973);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.time-wheel {
    height: 238px;
    padding: 88px 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border: 1px solid var(--wt-success-border, #d7e8e2);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--wt-success-soft, #f3f8f6) 0%, var(--wt-surface, #ffffff) 32%, var(--wt-surface, #ffffff) 68%, var(--wt-success-soft, #f3f8f6) 100%);
}

.time-wheel::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.time-wheel__option {
    display: block;
    width: 100%;
    min-height: 50px;
    margin: 3px 0;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--wt-muted, #52615d);
    background: transparent;
    font: inherit;
    font-size: 21px;
    font-weight: 700;
    scroll-snap-align: center;
    cursor: pointer;
}

.time-wheel__option--selected {
    border-color: var(--wt-success-border, var(--brand-green));
    color: var(--wt-success-text, var(--brand-green-dark));
    background: var(--wt-success-soft, var(--brand-mint-soft));
    box-shadow: 0 3px 10px var(--wt-shadow, rgba(23, 74, 68, 0.12));
}

@media (max-width: 480px) {
    .time-picker__wheels {
        gap: 9px;
    }

    .time-wheel {
        height: 218px;
        padding: 78px 5px;
    }
}


/* 0.6.13: current-shift dashboard and JS-controlled time-wheel settling. */
.current-shifts-button {
    width: 100%;
    min-height: 50px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid var(--wt-success-border, var(--brand-green));
    border-radius: 12px;
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-success-solid, var(--brand-green-dark));
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.current-shifts-button[hidden] {
    display: none;
}

.current-shifts__feedback,
.current-shifts__empty {
    margin: 8px 0 0;
    color: var(--wt-muted, #65726f);
}

.current-shifts__list {
    display: grid;
    gap: 10px;
}

.current-shift-card {
    padding: 14px;
    border: 1px solid var(--wt-success-border, #cfe3dc);
    border-radius: 12px;
    background: var(--wt-success-soft, var(--brand-surface));
}

.current-shift-card h3,
.current-shift-card p {
    margin: 0;
}

.current-shift-card h3 {
    margin-bottom: 7px;
    font-size: 17px;
}

.current-shift-card p + p {
    margin-top: 5px;
}

.current-shift-card__author {
    color: var(--wt-muted, #65726f);
    font-size: 13px;
}

/* 0.6.14: administrator-only monthly ledger. */
.module-tabs--single {
    grid-template-columns: minmax(0, 1fr);
}

.module-tabs--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-tabs--three .module-tabs__button {
    padding: 7px 6px;
    font-size: 12px;
    line-height: 1.2;
}

.monthly-ledger {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--wt-success-border, #cfe3dc);
    border-radius: 14px;
    background: var(--wt-success-soft, #fbfefd);
}

.monthly-ledger__heading,
.monthly-detail__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.monthly-ledger__heading h2,
.monthly-detail__heading h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.monthly-ledger__month-control {
    width: min(100%, 220px);
}

.monthly-ledger__month-control label {
    display: block;
    margin-bottom: 6px;
    color: var(--wt-muted, #52615d);
    font-size: 12px;
    font-weight: 700;
}

.monthly-ledger__feedback,
.monthly-ledger__empty,
.monthly-detail__empty {
    margin-top: 12px;
    color: var(--wt-muted, #65726f);
    font-size: 14px;
}

.monthly-ledger__feedback--error {
    color: var(--wt-error-text, #9b2c2c);
}

.monthly-ledger__totals,
.monthly-detail__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.monthly-ledger__totals > div,
.monthly-detail__summary > div {
    padding: 13px;
    border: 1px solid var(--wt-success-border, #dbeae5);
    border-radius: 11px;
    background: var(--wt-surface, #ffffff);
}

.monthly-ledger__totals span,
.monthly-ledger__totals strong,
.monthly-detail__summary span,
.monthly-detail__summary strong {
    display: block;
}

.monthly-ledger__totals span,
.monthly-detail__summary span {
    color: var(--wt-muted, #65726f);
    font-size: 12px;
}

.monthly-ledger__totals strong,
.monthly-detail__summary strong {
    margin-top: 6px;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.monthly-ledger__employees {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.monthly-employee-card {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--wt-success-border, #dbe7e3);
    border-radius: 12px;
    color: var(--wt-text, #17232a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.monthly-employee-card--selected {
    border-color: var(--wt-success-border, var(--brand-green));
    background: var(--wt-success-soft, var(--brand-mint-soft));
    box-shadow: 0 3px 10px var(--wt-shadow, rgba(23, 74, 68, 0.1));
}

.monthly-employee-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.monthly-employee-card__top strong {
    font-size: 16px;
}

.monthly-employee-card__top b {
    flex: 0 0 auto;
    color: var(--wt-success-text, var(--brand-green-dark));
    font-size: 14px;
}

.monthly-employee-card__metrics {
    display: block;
    margin-top: 7px;
    color: var(--wt-muted, #65726f);
    font-size: 12px;
    line-height: 1.45;
}

.monthly-detail {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--wt-success-border, #dbe8e4);
}

.monthly-detail__heading p {
    margin: 5px 0 0;
    color: var(--wt-muted, #65726f);
}

.monthly-detail__operations-link,
.monthly-shift-card__edit {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--wt-success-border, var(--brand-green));
    border-radius: 9px;
    color: var(--wt-success-text, var(--brand-green-dark));
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.monthly-detail__operations-link[hidden] {
    display: none;
}

.monthly-detail__section {
    margin-top: 22px;
}

.monthly-detail__section > h3 {
    margin: 0 0 10px;
    font-size: 17px;
}

.monthly-day {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--wt-success-border, #dbe7e3);
    border-radius: 12px;
    background: var(--wt-surface, #ffffff);
}

.monthly-day__heading,
.monthly-shift-card__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.monthly-day__heading h4 {
    margin: 0;
    font-size: 15px;
}

.monthly-day__heading strong {
    color: var(--wt-success-text, var(--brand-green-dark));
    font-size: 14px;
}

.monthly-shift-card {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--wt-success-border, #edf2f0);
}

.monthly-shift-card__main strong {
    font-size: 15px;
}

.monthly-shift-card__main span {
    color: var(--wt-muted, #52615d);
    font-size: 13px;
}

.monthly-shift-card__audit {
    margin: 7px 0 0;
    color: var(--wt-muted, #65726f);
    font-size: 12px;
    line-height: 1.45;
}

.monthly-shift-card__edit {
    width: 100%;
    margin-top: 9px;
}

.shift-correction__times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#shift-correction-form label {
    display: block;
    margin: 14px 0 7px;
    color: var(--wt-text, #37414b);
    font-size: 14px;
    font-weight: 700;
}

#shift-correction-form input,
#shift-correction-form textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--wt-success-border, #cbd8d3);
    border-radius: 10px;
    color: var(--wt-text, #17232a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
}

@media (max-width: 480px) {
    .module-tabs--three .module-tabs__button {
        font-size: 11px;
    }

    .monthly-ledger__heading {
        display: block;
    }

    .monthly-detail__heading {
        display: flex;
    }

    .monthly-ledger__month-control {
        width: 100%;
        margin-top: 14px;
    }

    .monthly-ledger__totals,
    .monthly-detail__summary {
        grid-template-columns: 1fr;
    }

    .monthly-detail__operations-link {
        width: 100%;
        margin-top: 12px;
    }
}

.monthly-audit {
    margin-top: 9px;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--wt-success-soft, #f2f7f5);
}

.monthly-audit summary {
    color: var(--wt-success-text, var(--brand-green-dark));
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.monthly-audit__list p {
    margin: 8px 0 0;
    color: var(--wt-muted, #65726f);
    font-size: 11px;
    line-height: 1.45;
}

/* 0.7.0 – внутренний центр уведомлений */
.notification-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 18px 0 14px;
}

.notification-toolbar__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--wt-success-border, #b7d9d0);
    border-radius: 18px;
    background: var(--wt-success-soft, #f7fbfa);
    color: var(--wt-success-text, #174f48);
    font: inherit;
    font-weight: 750;
}

.notification-toolbar__button--unread {
    border-color: var(--wt-success-border, #2f8277);
    background: var(--wt-success-soft, #e9f6f2);
    box-shadow: 0 8px 20px var(--wt-shadow, rgba(23, 79, 72, 0.10));
}

.notification-toolbar__bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.notification-toolbar__icon {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-toolbar__badge {
    position: absolute;
    top: -8px;
    right: -12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 2px solid var(--wt-success-border, #f7fbfa);
    border-radius: 999px;
    background: var(--wt-error-solid, #cf3030);
    color: var(--wt-on-accent, #fff);
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
}

.notification-toolbar__button--unread .notification-toolbar__badge {
    border-color: var(--wt-success-border, #e9f6f2);
}

.notification-center {
    max-height: min(82vh, 760px);
}

.notification-center__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.notification-center__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 1;
    padding: 5px;
    border-radius: 16px;
    background: var(--wt-surface-alt, #edf3f1);
}

.notification-center__tab,
.notification-center__mark-all,
.notification-card__open,
.notification-card__read {
    border: 0;
    font: inherit;
}

.notification-center__tab {
    min-height: 44px;
    border-radius: 12px;
    background: transparent;
    color: var(--wt-muted, #63716f);
    font-weight: 750;
}

.notification-center__tab--active {
    background: var(--wt-surface, #fff);
    color: var(--wt-success-text, #173f3a);
    box-shadow: 0 3px 10px var(--wt-shadow, rgba(25, 68, 62, 0.10));
}

.notification-center__mark-all {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    background: transparent;
    color: var(--wt-success-text, #17645a);
    font-weight: 700;
}

.notification-center__feedback,
.notification-center__empty {
    margin: 8px 0 14px;
    color: var(--wt-muted, #6d7977);
}

.notification-center__list {
    display: grid;
    gap: 12px;
    overflow: visible;
    padding-bottom: 4px;
    touch-action: pan-y;
}

.notification-card,
.notification-card * {
    touch-action: pan-y;
}

.notification-card {
    padding: 18px;
    border: 1px solid var(--wt-success-border, #dce7e4);
    border-radius: 18px;
    background: var(--wt-surface, #fff);
}

.notification-card--unread {
    border-color: var(--wt-success-border, #78b6ab);
    background: var(--wt-success-soft, #eef9f6);
    box-shadow: inset 5px 0 0 var(--wt-success-border, #2b7b70);
}

.notification-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.notification-card__heading h3 {
    margin: 0;
    color: var(--wt-success-text, #182321);
    font-size: 19px;
    line-height: 1.25;
}

.notification-card__heading time {
    flex: 0 0 auto;
    color: var(--wt-muted, #7a8583);
    font-size: 13px;
}

.notification-card__message {
    margin: 10px 0 0;
    color: var(--wt-muted, #566461);
    line-height: 1.45;
}

.notification-card__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 14px;
}

.notification-card__open,
.notification-card__read {
    min-height: 46px;
    border-radius: 13px;
    font-weight: 750;
}

.notification-card__open {
    background: var(--wt-success-solid, #17594f);
    color: var(--wt-on-accent, #fff);
}

.notification-card__read {
    background: var(--wt-surface, #fff);
    color: var(--wt-success-text, #355d57);
    box-shadow: inset 0 0 0 1px var(--wt-success-border, #b9d2cd);
}

.operation-card--highlighted {
    outline: 3px solid var(--wt-success-border, rgba(48, 137, 123, 0.45));
    box-shadow: 0 0 0 8px var(--wt-shadow, rgba(48, 137, 123, 0.10));
}

@media (max-width: 520px) {
    .notification-toolbar__button {
        width: 100%;
        justify-content: center;
    }

    .notification-center__controls {
        align-items: stretch;
        flex-direction: column;
    }

    .notification-center__mark-all {
        width: 100%;
    }

    .notification-card__heading {
        flex-direction: column;
        gap: 5px;
    }
}

.notification-toolbar[hidden],
.notification-toolbar__badge[hidden] {
    display: none !important;
}


.browser-mode-note {
    display: grid;
    gap: 5px;
    margin-top: 20px;
    padding: 15px 17px;
    border: 1px solid var(--wt-warning-border, #d7c989);
    border-radius: 14px;
    background: var(--wt-warning-soft, #fff9df);
    color: var(--wt-warning-text, #5e552d);
}

.browser-mode-note strong {
    font-size: 15px;
}

.browser-mode-note span {
    font-size: 14px;
    line-height: 1.45;
}

.identity__logout {
    margin-top: 16px;
}

.identity__logout button {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--wt-success-border, #75a69d);
    border-radius: 12px;
    background: var(--wt-surface, #fff);
    color: var(--wt-success-text, #17594f);
    font: inherit;
    font-weight: 750;
}

.browser-read-only .operation-form {
    display: none !important;
}


/* 0.8.2: browser-specific wide layout. Telegram Mini App keeps the mobile layout. */
@media (min-width: 900px) {
    html.browser-ui body {
        display: block;
        padding: 32px;
    }

    html.browser-ui body .card {
        width: min(100%, 1180px);
        margin: 0 auto;
        padding: 34px 38px;
    }

    html.browser-ui body .identity {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
        column-gap: 28px;
        align-items: start;
    }

    html.browser-ui body .identity__label,
    html.browser-ui body .identity__name {
        grid-column: 1;
    }

    html.browser-ui body .identity__details,
    html.browser-ui body .identity__logout {
        grid-column: 2;
    }

    html.browser-ui body .identity__details {
        margin-top: 0;
    }

    html.browser-ui body .identity__logout {
        margin-top: 14px;
    }

    html.browser-ui body .module-tabs__button,
    html.browser-ui body .module-tabs--three .module-tabs__button {
        min-height: 48px;
        font-size: 14px;
    }

    html.browser-ui body .operations__summary,
    html.browser-ui body .monthly-ledger__totals,
    html.browser-ui body .monthly-detail__summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    html.browser-ui body .monthly-ledger {
        --monthly-grid-gap: 12px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: var(--monthly-grid-gap);
        align-items: start;
    }

    html.browser-ui body .monthly-ledger__heading,
    html.browser-ui body .monthly-ledger__feedback,
    html.browser-ui body .monthly-ledger__totals {
        grid-column: 1 / -1;
    }

    html.browser-ui body .monthly-ledger__employees,
    html.browser-ui body .monthly-ledger__empty {
        grid-column: 1;
    }

    html.browser-ui body .monthly-ledger__employees {
        max-height: calc(100vh - 220px);
        overflow: auto;
        padding-right: 5px;
    }

    html.browser-ui body .monthly-detail {
        grid-column: 2 / -1;
        grid-row: 4 / span 3;
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 40px);
        margin-top: 18px;
        padding: 0 4px 0 18px;
        overflow: auto;
        border-top: 0;
        border-left: 1px solid var(--wt-success-border, #dbe8e4);
    }

    html.browser-ui body .app-modal__sheet {
        width: min(100%, 720px);
    }

    html.browser-ui body .app-modal--photo .app-modal__sheet {
        width: min(100%, 920px);
    }
}


/* 0.8.3: browser interaction polish, task queue, monthly layout and document states. */
.module-panel[hidden],
.monthly-ledger[hidden] {
    display: none !important;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    padding: 0;
}

.icon-button__svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.monthly-detail-placeholder {
    margin-top: 18px;
    padding: 28px 22px;
    border: 1px dashed var(--wt-success-border, #c7ddd5);
    border-radius: 14px;
    color: var(--wt-muted, #667973);
    background: var(--wt-success-soft, #f7fbfa);
    text-align: center;
}

.monthly-detail-placeholder strong,
.monthly-detail-placeholder span {
    display: block;
}

.monthly-detail-placeholder strong {
    color: var(--wt-success-text, var(--brand-green-dark));
    font-size: 17px;
}

.monthly-detail-placeholder span {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.45;
}

.monthly-detail-placeholder[hidden] {
    display: none !important;
}

.monthly-employee-card {
    display: grid;
    grid-template-rows: auto minmax(36px, auto);
    min-height: 92px;
}

.monthly-employee-card__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.monthly-employee-card__top strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.monthly-employee-card__metrics {
    display: -webkit-box;
    min-height: 36px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.operation-approvals {
    background: linear-gradient(180deg, var(--wt-warning-soft, #fffaf0) 0%, var(--wt-warning-soft, #fffdf8) 100%);
}

.operation-approvals--personal {
    border-width: 2px;
}

#operation-approval-list,
#operation-admin-approval-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.approval-task {
    padding: 14px;
    border: 1px solid var(--wt-warning-border, #dfcf98);
    border-radius: 12px;
    background: var(--wt-surface, #ffffff);
    box-shadow: 0 4px 12px var(--wt-shadow, rgba(92, 71, 18, 0.06));
}

.approval-task__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.approval-task h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
}

.approval-task__meta,
.approval-task .operation-card__details {
    margin-top: 4px;
    color: var(--wt-muted, #756f5f);
    font-size: 12px;
}

.approval-task__amount {
    color: var(--wt-success-text, #25322f);
    font-size: 18px;
    white-space: nowrap;
}

.approval-task__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.approval-task .operation-card__photos {
    grid-template-columns: repeat(auto-fill, minmax(105px, 130px));
    gap: 8px;
    margin-top: 10px;
}

.document-thumb {
    position: relative;
}

.document-thumb img[hidden],
.document-thumb__loading[hidden] {
    display: none !important;
}

.document-thumb__loading {
    display: grid !important;
    min-height: 96px;
    place-items: center;
    padding: 10px !important;
    color: var(--wt-muted, #667973);
    background: var(--wt-surface-alt, #f1f6f4);
    font-size: 11px !important;
    line-height: 1.35;
    text-align: center;
}

.notification-card__state {
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--wt-muted, #52615d);
    background: var(--wt-surface-alt, #edf1f0);
    font-size: 11px;
    font-weight: 800;
}

.notification-card__state--pending {
    color: var(--wt-warning-text, #765300);
    background: var(--wt-warning-soft, #fff1c7);
}

.notification-card__state--confirmed {
    color: var(--wt-success-text, #146c35);
    background: var(--wt-success-soft, #e5f5e9);
}

.notification-card__state--cancelled,
.notification-card__state--returned {
    color: var(--wt-error-text, #7b3131);
    background: var(--wt-error-soft, #fae7e7);
}

.notification-card__state--corrected {
    color: var(--wt-warning-text, #72520f);
    background: var(--wt-warning-soft, #fff4d7);
}

.notification-card--resolved:not(.notification-card--unread) {
    border-color: var(--wt-border, #e2e8e6);
    background: var(--wt-surface, #f8faf9);
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    html.browser-ui body button:not(:disabled),
    html.browser-ui body [data-photo-url],
    html.browser-ui body .monthly-employee-card {
        cursor: pointer;
    }

    html.browser-ui body .module-tabs__button,
    html.browser-ui body .notification-toolbar__button,
    html.browser-ui body .select-control,
    html.browser-ui body .select-option,
    html.browser-ui body .monthly-employee-card,
    html.browser-ui body .document-thumb,
    html.browser-ui body .notification-card__open,
    html.browser-ui body .notification-card__read,
    html.browser-ui body .monthly-detail__operations-link,
    html.browser-ui body .icon-button {
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }

    @media (hover: hover) and (pointer: fine) {
html.browser-ui body .module-tabs__button:hover:not(.module-tabs__button--active),
html.browser-ui body .select-control:hover:not(:disabled),
html.browser-ui body .select-option:hover,
html.browser-ui body .notification-toolbar__button:hover,
html.browser-ui body .icon-button:hover {
        border-color: var(--wt-success-border, #7eb9ae);
        background: var(--wt-success-soft, #eef8f5);
    }
}

    @media (hover: hover) and (pointer: fine) {
html.browser-ui body .monthly-employee-card:hover,
html.browser-ui body .document-thumb:hover,
html.browser-ui body .notification-card__open:hover,
html.browser-ui body .notification-card__read:hover,
html.browser-ui body .monthly-detail__operations-link:hover {
        border-color: var(--wt-success-border, var(--brand-green));
        box-shadow: 0 6px 16px var(--wt-shadow, rgba(23, 74, 68, 0.12));
        transform: translateY(-1px);
    }
}
}

html.browser-ui body button:focus-visible,
html.browser-ui body [data-photo-url]:focus-visible,
html.browser-ui body .monthly-employee-card:focus-visible {
    outline: 3px solid var(--wt-success-border, rgba(40, 117, 104, 0.28));
    outline-offset: 3px;
}

@media (min-width: 900px) {
    html.browser-ui body .card {
        width: min(100%, 1240px);
    }

    html.browser-ui body .monthly-detail-placeholder {
        grid-column: 2 / -1;
        grid-row: 4 / span 3;
        position: sticky;
        top: 20px;
        margin-top: 18px;
    }

    html.browser-ui body .monthly-ledger__employees {
        max-height: calc(100vh - 170px);
    }

    html.browser-ui body .operation-card__photos {
        grid-template-columns: repeat(auto-fill, minmax(135px, 170px));
        gap: 10px;
    }

    html.browser-ui body .document-thumb img {
        aspect-ratio: 4 / 3;
    }
}


/* 0.8.4: aligned browser ledger, separated approval workspace and unified modal controls. */
.approval-workspace {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--wt-warning-border, #e4ca75);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--wt-warning-soft, #fff9e8) 0%, var(--wt-warning-soft, #fffdf7) 100%);
    box-shadow: 0 8px 22px var(--wt-shadow, rgba(106, 81, 16, 0.06));
}

.approval-workspace .operation-approvals {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.approval-workspace + .operations {
    margin-top: 18px;
}

.icon-button__svg {
    pointer-events: none;
}

@media (min-width: 900px) {
    html.browser-ui body .monthly-ledger__totals {
        gap: var(--monthly-grid-gap);
    }

    html.browser-ui body .monthly-ledger__employees,
    html.browser-ui body .monthly-detail {
        scrollbar-width: thin;
        scrollbar-color: var(--wt-surface-alt, #8f9996) transparent;
        scrollbar-gutter: stable;
    }

    html.browser-ui body .monthly-detail {
        border-left-color: var(--wt-success-border, #cdded8);
    }

    html.browser-ui body .app-modal {
        padding: 24px;
    }

    html.browser-ui body .app-modal--photo .app-modal__sheet {
        max-width: calc(100vw - 48px);
    }
}


/* 0.8.5: fixed selector headers, readable ledger proportions, compact approvals and cached thumbnails. */
#select-modal .app-modal__sheet {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#select-modal .app-modal__header {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--wt-success-border, #e2ebe8);
    background: var(--wt-surface, #ffffff);
}

#select-modal .select-options {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.notification-card__open--resolved {
    color: var(--wt-success-text, #315f58);
    background: var(--wt-success-soft, #f7faf9);
    box-shadow: inset 0 0 0 1px var(--wt-success-border, #b9d2cd);
}

@media (hover: hover) and (pointer: fine) {
    @media (hover: hover) and (pointer: fine) {
html.browser-ui body .notification-card__open--resolved:hover {
        color: var(--wt-success-text, #174a44);
        background: var(--wt-success-soft, #eef6f3);
    }
}
}

@media (min-width: 900px) {
    html.browser-ui body .monthly-ledger {
        grid-template-columns: minmax(320px, 34%) minmax(0, 1fr);
    }

    html.browser-ui body .monthly-ledger__employees {
        grid-column: 1;
    }

    html.browser-ui body .monthly-detail,
    html.browser-ui body .monthly-detail-placeholder {
        grid-column: 2;
    }

    html.browser-ui body .monthly-ledger__employees,
    html.browser-ui body .monthly-detail,
    html.browser-ui body #select-modal .select-options {
        scrollbar-color: var(--wt-surface-alt, #c4d2ce) transparent;
    }

    html.browser-ui body .monthly-ledger__employees::-webkit-scrollbar,
    html.browser-ui body .monthly-detail::-webkit-scrollbar,
    html.browser-ui body #select-modal .select-options::-webkit-scrollbar {
        width: 7px;
    }

    html.browser-ui body .monthly-ledger__employees::-webkit-scrollbar-thumb,
    html.browser-ui body .monthly-detail::-webkit-scrollbar-thumb,
    html.browser-ui body #select-modal .select-options::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--wt-surface-alt, #c4d2ce);
    }

    html.browser-ui body .notification-center {
        min-height: 540px;
    }

    html.browser-ui body .notification-center__list {
        max-height: 390px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
}


/* 0.8.6: reliable private thumbnails, readable audit labels and stable outline-button hover. */
@media (hover: hover) and (pointer: fine) {
    @media (hover: hover) and (pointer: fine) {
html.browser-ui body .notification-card__open:hover,
html.browser-ui body .notification-card__read:hover,
html.browser-ui body .monthly-detail__operations-link:hover {
        transform: none;
    }
}
}


/* 0.8.9: audited browser writes; progressive private photo viewer retained. */

/* 0.8.10: live monthly refresh and reliable hidden-state containers. */
.browser-mode-note[hidden],
.approval-workspace[hidden],
.operation-approvals[hidden] {
    display: none !important;
}

.expediter-payroll,
.mileage-panel {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--wt-success-border, #cfe5de);
    border-radius: 20px;
    background: var(--wt-success-soft, #f6fbf9);
}

.expediter-payroll__heading,
.mileage-panel__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.expediter-payroll__heading h2,
.mileage-panel__heading h2 {
    margin: 3px 0 0;
    font-size: 1.1rem;
}

.expediter-payroll__heading > strong {
    font-size: 1.35rem;
    color: var(--wt-success-text, #155c50);
    white-space: nowrap;
}

.expediter-payroll__grid,
.mileage-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.expediter-payroll__metric,
.mileage-summary > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
    background: var(--wt-surface, #fff);
    border: 1px solid var(--wt-success-border, #dbece6);
}

.expediter-payroll__metric span,
.mileage-summary span {
    color: var(--wt-muted, #63746f);
    font-size: .84rem;
}

.expediter-payroll__metric strong,
.mileage-summary strong {
    overflow-wrap: anywhere;
}

.document-unavailable {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--wt-warning-soft, #fff9e9);
    border: 1px solid var(--wt-warning-border, #ecdca8);
}

.check-control {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.3;
}

.check-control input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    align-self: center;
}

.check-control span {
    display: block;
    padding-top: 1px;
}

.document-unavailable textarea {
    min-height: 104px;
    margin-top: 8px;
    resize: vertical;
}

.mileage-access-note {
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: 12px;
    color: var(--wt-muted, #526862);
    background: var(--wt-surface, #ffffff);
    border: 1px solid var(--wt-success-border, #dbece6);
}

.mileage-form {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.mileage-panel__heading > span {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--wt-success-soft, #e7f5f0);
    color: var(--wt-success-text, #155c50);
    font-weight: 700;
    font-size: .82rem;
}

.mileage-summary {
    margin: 16px 0;
}

.mileage-history {
    display: grid;
    gap: 12px;
}

.mileage-card {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--wt-success-border, #d8e8e2);
    background: var(--wt-surface, #fff);
}

.mileage-card--cancelled {
    opacity: .7;
    background: var(--wt-surface-alt, #f7f7f7);
}

.mileage-card__header,
.mileage-card__route {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.mileage-card__header h3 {
    margin: 0;
    font-size: 1rem;
}

.mileage-card__header span {
    font-size: .8rem;
    font-weight: 700;
}

.mileage-card__route {
    margin: 10px 0;
    color: var(--wt-success-text, #324b44);
}

.mileage-card__route strong {
    white-space: nowrap;
}

.mileage-card__meta {
    margin: 0;
    color: var(--wt-muted, #65766f);
    font-size: .85rem;
}

.mileage-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 620px) {
    .expediter-payroll__grid,
    .mileage-summary {
        grid-template-columns: 1fr;
    }

    .expediter-payroll__heading,
    .mileage-panel__heading,
    .mileage-card__route {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* 0.8.12: expediter interface polish and visible mileage workflow. */
.expediter-payroll[hidden],
.mileage-panel[hidden],
.mileage-form[hidden],
.mileage-access-note[hidden],
.document-unavailable[hidden],
#operation-document-unavailable-reason-field[hidden],
#mileage-photo-unavailable-reason-field[hidden],
#monthly-mileage-section[hidden],
#mileage-action-values[hidden] {
    display: none !important;
}

.expediter-payroll__balance--negative,
.expediter-payroll__value--minus {
    color: var(--wt-error-text, #9c3939) !important;
}

.expediter-payroll__value--plus {
    color: var(--wt-success-text, #155c50);
}

.mileage-card .operation-card__photos {
    margin-top: 12px;
}


/* 0.8.13: stable monthly-card edges, immediate selection and administrator mileage controls. */
@media (min-width: 900px) {
    html.browser-ui body .monthly-ledger__employees {
        padding: 4px 5px 8px 4px;
        scroll-padding-block: 4px 8px;
    }
}

@media (hover: hover) and (pointer: fine) {
    @media (hover: hover) and (pointer: fine) {
html.browser-ui body .monthly-employee-card:hover {
        transform: none;
    }
}
}

/* 0.8.14: clearer mileage validation, labels and larger odometer entry. */
.mileage-form .mileage-form__odometer {
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid var(--wt-success-border, #b9d5cb);
    border-radius: 12px;
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mileage-form .mileage-form__odometer:focus-visible {
    outline: 3px solid var(--wt-success-border, rgba(40, 117, 104, 0.22));
    outline-offset: 2px;
}



/* 0.9.0: administrator month journal and employee management. */
.module-tabs--admin {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.admin-workspace {
    display: grid;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--wt-success-border, #d8e5e0);
    border-radius: 22px;
    background: var(--wt-success-soft, #f8fbfa);
}

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

.admin-workspace__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.admin-workspace__heading h2,
.admin-workspace__heading p,
.journal-day h3,
.journal-employee-group h4,
.pending-bindings h3,
.employee-admin-card h3,
.employee-admin-card p {
    margin: 0;
}

.admin-workspace__heading > div > p:last-child {
    margin-top: 6px;
    color: var(--wt-muted, #5f6f69);
    line-height: 1.45;
}


.admin-workspace__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-workspace__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.journal-new-tab {
    display: none !important;
}

html.browser-ui body .journal-new-tab {
    display: inline-flex !important;
}

.admin-primary-button,
.admin-secondary-button {
    min-height: 46px;
    padding: 11px 16px;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.admin-primary-button {
    border: 1px solid var(--wt-success-border, #287568);
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-success-solid, #287568);
}

.admin-secondary-button {
    border: 1px solid var(--wt-success-border, #b9d5cb);
    color: var(--wt-success-text, #225f55);
    background: var(--wt-surface, #ffffff);
}

.admin-primary-button:disabled,
.admin-secondary-button:disabled {
    cursor: default;
    opacity: 0.55;
}

.journal-filters {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) minmax(190px, 1.2fr) minmax(140px, 0.8fr) minmax(150px, 0.9fr) minmax(220px, 1.4fr) auto;
    align-items: end;
    gap: 12px;
}

.journal-filters label,
.admin-form > label:not(.admin-checkbox) {
    display: grid;
    gap: 7px;
    color: var(--wt-text, #40504a);
    font-size: 0.88rem;
    font-weight: 700;
}

.journal-filters select,
.journal-filters input,
.admin-form input[type="text"],
.admin-form select,
.admin-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--wt-success-border, #bfd6ce);
    border-radius: 11px;
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
}

.admin-form textarea {
    resize: vertical;
}

.admin-workspace__feedback {
    min-height: 22px;
    margin: 0;
    color: var(--wt-muted, #53645e);
}

.admin-workspace__feedback--error,
.admin-form__error {
    color: var(--wt-error-text, #a33737);
}

.admin-form__error {
    margin: 0;
    font-weight: 700;
}

.admin-workspace__empty {
    margin: 0;
    color: var(--wt-muted, #687872);
}

.journal-list {
    display: grid;
    gap: 18px;
}

.journal-day {
    overflow: hidden;
    border: 1px solid var(--wt-success-border, #cdded8);
    border-radius: 18px;
    background: var(--wt-surface, #ffffff);
}

.journal-day__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--wt-success-border, #dce8e4);
    background: var(--wt-success-soft, #eaf4f0);
}

.journal-day__heading h3 {
    font-size: 1.08rem;
}

.journal-day__heading span {
    color: var(--wt-muted, #5d716a);
    font-size: 0.82rem;
}

.journal-employee-group {
    padding: 16px 18px 18px;
}

.journal-employee-group + .journal-employee-group {
    border-top: 1px solid var(--wt-success-border, #e3ebe8);
}

.journal-employee-group h4 {
    margin-bottom: 10px;
    color: var(--wt-success-text, #215e54);
    font-size: 1rem;
}

.journal-event {
    margin: 0;
    border-radius: 12px;
    box-shadow: none;
}

.journal-event + .journal-event {
    margin-top: 8px;
}

.journal-event--shift {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--wt-success-border, #dce7e3);
    background: var(--wt-success-soft, #fbfdfc);
}

.journal-event__main {
    display: grid;
    gap: 3px;
}

.journal-event__main span {
    color: var(--wt-success-text, #27342f);
}

.journal-event__main small {
    color: var(--wt-muted, #6a7974);
    line-height: 1.4;
}

.journal-event .monthly-audit-history {
    grid-column: 1 / -1;
}

.journal-event.operation-card {
    padding: 12px 14px;
    border-color: var(--wt-success-border, #dce7e3);
}

.journal-event .operation-card__amount {
    margin: 5px 0;
    font-size: 1.08rem;
}

.pending-bindings {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--wt-success-border, #d3e3dd);
    border-radius: 16px;
    background: var(--wt-surface, #ffffff);
}

.pending-bindings__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pending-bindings__heading span {
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-success-solid, #287568);
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
}

#pending-telegram-list,
.employee-admin-list {
    display: grid;
    gap: 12px;
}

.pending-binding-card {
    display: grid;
    gap: 3px;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--wt-success-soft, #f1f7f5);
}

.pending-binding-card span {
    color: var(--wt-muted, #687872);
    font-size: 0.84rem;
}

.employee-admin-card {
    padding: 17px;
    border: 1px solid var(--wt-success-border, #cdded8);
    border-radius: 16px;
    background: var(--wt-surface, #ffffff);
}

.employee-admin-card--inactive {
    background: var(--wt-surface-alt, #f5f5f5);
    opacity: 0.88;
}

.employee-admin-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.employee-admin-card__heading p,
.employee-admin-card__telegram {
    margin-top: 4px;
    color: var(--wt-muted, #64736e);
    line-height: 1.4;
}

.admin-form {
    display: grid;
    gap: 16px;
}

.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--wt-success-text, #2e3c37);
    font-weight: 650;
}

.admin-checkbox input {
    width: 20px;
    height: 20px;
}

@media (max-width: 980px) {
    .module-tabs--admin {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-filters__search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .admin-workspace {
        padding: 16px;
        border-radius: 16px;
    }

    .admin-workspace__heading {
        display: grid;
    }

    .admin-workspace__actions {
        display: grid;
        justify-content: stretch;
    }

    .admin-workspace__heading button,
    .admin-workspace__heading a {
        width: 100%;
    }

    .journal-filters {
        grid-template-columns: 1fr;
    }

    .journal-filters__search {
        grid-column: auto;
    }

    .journal-event--shift {
        grid-template-columns: 1fr;
    }

    .journal-event--shift > button {
        justify-self: start;
    }
}

/* 0.9.2: journal readability and employee administration guidance. */
.admin-primary-button,
.admin-secondary-button,
.operation-card__button,
.admin-inline-help,
.employee-inactive summary {
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.admin-primary-button:focus-visible,
.operation-card__button--confirm:focus-visible,
.operation-card__button--admin:focus-visible {
    border-color: var(--wt-success-border, #174a44);
    background: var(--wt-success-solid, #174a44);
    box-shadow: 0 5px 14px var(--wt-shadow, rgba(23, 74, 68, 0.18));
}
@media (hover: hover) and (pointer: fine) {
.admin-primary-button:hover:not(:disabled),
.operation-card__button--confirm:hover:not(:disabled),
.operation-card__button--admin:hover:not(:disabled) {
    border-color: var(--wt-success-border, #174a44);
    background: var(--wt-success-solid, #174a44);
    box-shadow: 0 5px 14px var(--wt-shadow, rgba(23, 74, 68, 0.18));
}
}

.admin-secondary-button:focus-visible,
.admin-inline-help:focus-visible {
    border-color: var(--wt-success-border, #78b3a8);
    color: var(--wt-success-text, #174a44);
    background: var(--wt-success-soft, #eaf6f2);
    box-shadow: 0 4px 12px var(--wt-shadow, rgba(23, 74, 68, 0.12));
}
@media (hover: hover) and (pointer: fine) {
.admin-secondary-button:hover:not(:disabled),
.operation-card__button:hover:not(:disabled),
.admin-inline-help:hover {
    border-color: var(--wt-success-border, #78b3a8);
    color: var(--wt-success-text, #174a44);
    background: var(--wt-success-soft, #eaf6f2);
    box-shadow: 0 4px 12px var(--wt-shadow, rgba(23, 74, 68, 0.12));
}
}

.operation-card__button--danger:focus-visible,
.admin-secondary-button--danger:focus-visible {
    border-color: var(--wt-error-border, #b65b5b);
    color: var(--wt-error-text, #7d2020);
    background: var(--wt-error-soft, #fdeaea);
    box-shadow: 0 4px 12px var(--wt-shadow, rgba(133, 42, 42, 0.12));
}
@media (hover: hover) and (pointer: fine) {
.operation-card__button--danger:hover:not(:disabled),
.admin-secondary-button--danger:hover:not(:disabled) {
    border-color: var(--wt-error-border, #b65b5b);
    color: var(--wt-error-text, #7d2020);
    background: var(--wt-error-soft, #fdeaea);
    box-shadow: 0 4px 12px var(--wt-shadow, rgba(133, 42, 42, 0.12));
}
}

.admin-primary-button:active:not(:disabled),
.admin-secondary-button:active:not(:disabled),
.operation-card__button:active:not(:disabled),
.admin-inline-help:active {
    transform: translateY(1px);
}

.admin-secondary-button--danger {
    border-color: var(--wt-error-border, #d7abab);
    color: var(--wt-error-text, #8c3030);
    background: var(--wt-error-soft, #fff8f8);
}

.journal-filters {
    grid-template-columns: minmax(140px, 0.8fr) minmax(190px, 1.2fr) minmax(140px, 0.8fr) minmax(150px, 0.9fr) minmax(240px, 1.5fr) auto;
}

.journal-reset {
    white-space: nowrap;
}

.journal-day {
    overflow: visible;
}

.journal-day__heading {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 58px;
    justify-content: center;
    padding: 15px 86px;
    text-align: center;
    box-shadow: 0 3px 10px var(--wt-shadow, rgba(23, 74, 68, 0.08));
}

.journal-day__heading h3 {
    color: var(--wt-success-text, #174a44);
    font-size: 1.42rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.journal-day__heading span {
    position: absolute;
    right: 18px;
    color: var(--wt-success-text, #506861);
    font-size: 0.86rem;
    font-weight: 700;
}

.journal-employee-group {
    padding-top: 18px;
}

.journal-employee-group h4 {
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--wt-success-text, #174a44);
    background: var(--wt-success-soft, #f0f7f5);
    text-align: center;
    font-size: 1.18rem;
    font-weight: 820;
}

.pending-bindings__heading span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    font-size: 1.16rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pending-bindings__heading span:not(.pending-bindings__count--active) {
    color: var(--wt-success-text, #315b53);
    background: var(--wt-success-soft, #dcebe6);
}

.employee-inactive {
    overflow: visible;
    border: 1px solid var(--wt-border, #d4dcda);
    border-radius: 16px;
    background: var(--wt-surface, #f7f8f8);
}

.employee-inactive[hidden] {
    display: none;
}

.employee-inactive summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    color: var(--wt-text, #43534e);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.employee-inactive summary::-webkit-details-marker {
    display: none;
}

.employee-inactive summary::before {
    content: '▸';
    margin-right: 2px;
    transition: transform 0.15s ease;
}

.employee-inactive[open] summary::before {
    transform: rotate(90deg);
}

.employee-inactive summary span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--wt-muted, #5a6763);
    background: var(--wt-surface-alt, #e5e9e8);
    font-variant-numeric: tabular-nums;
}

.employee-inactive summary:focus-visible {
    color: var(--wt-success-text, #174a44);
    background: var(--wt-success-soft, #edf5f2);
}
@media (hover: hover) and (pointer: fine) {
.employee-inactive summary:hover {
    color: var(--wt-success-text, #174a44);
    background: var(--wt-success-soft, #edf5f2);
}
}

.employee-inactive .employee-admin-list {
    padding: 0 12px 12px;
}

.employee-admin-card__actions {
    align-items: center;
}

.employee-admin-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.admin-form__field {
    display: grid;
    gap: 7px;
}

.admin-form__label-row,
.admin-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-form__label-row > label {
    color: var(--wt-text, #40504a);
    font-size: 0.88rem;
    font-weight: 700;
}

.admin-inline-help {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--wt-success-border, #b9d5cb);
    border-radius: 9px;
    color: var(--wt-success-text, #225f55);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
}

.help-tooltip {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid var(--wt-success-border, #91bdb4);
    border-radius: 50%;
    color: var(--wt-success-text, #225f55);
    background: var(--wt-success-soft, #eef7f4);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    cursor: help;
}

.help-tooltip::after {
    position: absolute;
    right: -4px;
    bottom: calc(100% + 9px);
    z-index: 30;
    width: min(300px, calc(100vw - 48px));
    padding: 10px 12px;
    border: 1px solid var(--wt-success-border, #bad3cb);
    border-radius: 10px;
    color: var(--wt-success-text, #24332e);
    background: var(--wt-surface, #ffffff);
    box-shadow: 0 9px 28px var(--wt-shadow, rgba(23, 74, 68, 0.18));
    content: attr(data-tooltip);
    font-size: 0.8rem;
    font-weight: 550;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.help-tooltip:focus-visible::after,
.help-tooltip.is-open::after {
    opacity: 1;
    transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
.help-tooltip:hover::after {
    opacity: 1;
    transform: translateY(0);
}
}

.help-tooltip:focus-visible {
    outline: 3px solid var(--wt-success-border, rgba(40, 117, 104, 0.22));
    outline-offset: 2px;
}

.employee-telegram-status {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--wt-success-border, #d4e4df);
    border-radius: 11px;
    color: var(--wt-success-text, #30423c);
    background: var(--wt-success-soft, #f3f8f6);
    line-height: 1.45;
}

.employee-telegram-actions {
    display: grid;
    gap: 10px;
}

.employee-telegram-actions[hidden],
.employee-telegram-form[hidden] {
    display: none;
}

.employee-telegram-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.employee-telegram-action > button:first-child {
    width: 100%;
}

.employee-telegram-actions__empty,
.employee-telegram-form__title,
.role-help-intro {
    margin: 0;
    color: var(--wt-muted, #596a64);
    line-height: 1.45;
}

.employee-telegram-form {
    padding-top: 14px;
    border-top: 1px solid var(--wt-success-border, #e0e9e6);
}

.employee-telegram-form__title {
    color: var(--wt-success-text, #263b35);
    font-weight: 800;
}

.app-modal__sheet--wide {
    width: min(100%, 760px);
}

.role-help-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.role-help-card {
    padding: 15px 16px;
    border: 1px solid var(--wt-success-border, #d5e3df);
    border-radius: 13px;
    background: var(--wt-success-soft, #fbfdfc);
}

.role-help-card h3,
.role-help-card p {
    margin: 0;
}

.role-help-card h3 {
    color: var(--wt-success-text, #174a44);
    font-size: 1.08rem;
}

.role-help-card ul {
    margin: 9px 0 11px;
    padding-left: 20px;
    color: var(--wt-success-text, #35453f);
    line-height: 1.45;
}

.role-help-card__members {
    color: var(--wt-success-text, #285d54);
    font-weight: 750;
    line-height: 1.45;
}

.role-help-card__members--inactive {
    margin-top: 5px !important;
    color: var(--wt-muted, #737d79);
}

@media (max-width: 980px) {
    .journal-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-reset {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .journal-day__heading {
        min-height: 66px;
        padding: 12px 14px 27px;
    }

    .journal-day__heading h3 {
        font-size: 1.3rem;
    }

    .journal-day__heading span {
        right: 0;
        bottom: 8px;
        width: 100%;
        text-align: center;
    }

    .journal-employee-group h4 {
        font-size: 1.1rem;
    }

    .admin-checkbox-row {
        align-items: flex-start;
    }

    .employee-admin-action {
        width: 100%;
    }

    .employee-admin-action > .operation-card__button {
        flex: 1 1 auto;
    }
}

/* 0.9.3: focused employee controls and roomier administrative modals. */
.journal-employee-group h4 {
    min-height: 52px;
    padding: 13px 16px;
    border: 1px solid var(--wt-success-border, #c9dfd8);
    background: var(--wt-success-soft, #dfeee9);
    font-size: 1.28rem;
    line-height: 1.25;
    box-shadow: 0 3px 10px var(--wt-shadow, rgba(23, 74, 68, 0.07));
}

.notification-center {
    display: flex;
    flex-direction: column;
    height: min(90vh, 900px);
    height: min(90dvh, 900px);
    max-height: min(90vh, 900px);
    max-height: min(90dvh, 900px);
}

.notification-center > .app-modal__header,
.notification-center__controls,
.notification-center__feedback,
.notification-center__empty {
    flex: 0 0 auto;
}

.notification-center__list,
html.browser-ui body .notification-center__list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@media (max-width: 620px) {
    .journal-employee-group h4 {
        min-height: 48px;
        padding: 12px 14px;
        font-size: 1.2rem;
    }

    .notification-center {
        height: calc(100vh - 24px);
        height: calc(100dvh - 24px);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
}

#employee-editor-note-field[hidden] {
    display: none;
}

/* 0.9.4: complete day outlines, clearer dates and larger help marks. */
/* 0.9.5: role help uses the standard single scrolling modal sheet. */
.journal-day {
    position: relative;
    border-color: transparent;
}

.journal-day::after {
    position: absolute;
    z-index: 7;
    inset: 0;
    box-sizing: border-box;
    border: 1px solid var(--wt-success-border, #bcd3cc);
    border-radius: 18px;
    content: "";
    pointer-events: none;
}

.journal-day__heading {
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    border-bottom-color: var(--wt-success-border, #b8d2ca);
    background: linear-gradient(180deg, var(--wt-success-soft, #d5e9e3) 0%, var(--wt-success-soft, #cce3dc) 100%);
    box-shadow: 0 4px 12px var(--wt-shadow, rgba(23, 74, 68, 0.11));
}

.help-tooltip {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0 0 1px;
    font-family: Arial, sans-serif;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1;
}

#employee-role-help-modal .role-help-modal__sheet {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
}

#employee-role-help-modal .role-help-modal__header {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--wt-success-border, #e0e9e6);
    background: var(--wt-surface, #ffffff);
}

#employee-role-help-modal .role-help-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 20px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@media (max-width: 620px) {
    #employee-role-help-modal .role-help-modal__header {
        padding: 16px;
    }

    #employee-role-help-modal .role-help-modal__body {
        padding: 14px 16px 16px;
    }
}


/* 0.9.8: role-help uses a fixed header and an isolated scrolling body. */

/* 0.10.0: mileage is selected as a regular operation; employee mileage access is configurable. */
#operation-amount-field[hidden],
.operation-mileage-fields[hidden],
#employee-telegram-pending-field[hidden] {
    display: none !important;
}

.operation-mileage-fields {
    display: grid;
    gap: 10px;
}

.operation-mileage-fields .mileage-form__odometer {
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid var(--wt-success-border, #b9d5cb);
    border-radius: 12px;
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.operation-mileage-fields .mileage-form__odometer:focus-visible {
    outline: 3px solid var(--wt-success-border, rgba(40, 117, 104, 0.22));
    outline-offset: 2px;
}

/* 0.11.4: administrator shift creation in the month journal. */
.journal-heading {
    align-items: center;
}

.journal-day__actions {
    position: absolute;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.journal-day__actions span {
    position: static;
    right: auto;
    color: var(--wt-success-text, #506861);
    font-size: 0.86rem;
    font-weight: 700;
}

.journal-day__add-shift {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0 0 2px;
    border: 1px solid var(--wt-success-border, #82b6a8);
    border-radius: 999px;
    color: var(--wt-success-text, #174a44);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.journal-day__add-shift:focus-visible {
    border-color: var(--wt-success-border, #287568);
    background: var(--wt-success-soft, #f2faf7);
}
@media (hover: hover) and (pointer: fine) {
.journal-day__add-shift:hover {
    border-color: var(--wt-success-border, #287568);
    background: var(--wt-success-soft, #f2faf7);
}
}

.journal-shift-form {
    display: grid;
    gap: 14px;
    padding: 18px 20px 20px;
}

.journal-shift-form .shift-correction__times {
    margin: 0;
}

@media (max-width: 620px) {
    .journal-heading {
        align-items: stretch;
    }

    .journal-heading .admin-primary-button {
        width: 100%;
    }

    .journal-day__actions {
        right: 10px;
        bottom: 6px;
        width: auto;
    }

    .journal-day__actions span {
        width: auto;
        text-align: right;
    }

    .journal-day__add-shift {
        width: 36px;
        height: 36px;
    }
}

/* 0.11.5: consistent Mini App modals, complete journal rendering and polished shift entry. */
.journal-day__add-shift {
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 0;
}

.journal-day__add-shift svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
}

.journal-shift-modal__sheet {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
}

.journal-shift-modal__sheet > .app-modal__header {
    flex: 0 0 auto;
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--wt-success-border, #e0e9e6);
    background: var(--wt-surface, #ffffff);
}

.journal-shift-form {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 20px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.date-control {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    padding: 11px 13px;
    border: 1px solid var(--wt-success-border, #bfd6ce);
    border-radius: 11px;
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.journal-shift-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.journal-shift-time-grid > label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--wt-text, #40504a);
    font-size: 0.88rem;
    font-weight: 700;
}

.journal-shift-time-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    padding: 10px 13px;
    border: 1px solid var(--wt-success-border, #bfd6ce);
    border-radius: 11px;
    color: var(--wt-muted, #5f6f69);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.journal-shift-time-control--selected {
    color: var(--wt-success-text, #174a44);
    border-color: var(--wt-success-border, #82b6a8);
    background: var(--wt-success-soft, #f4fbf8);
}

.journal-shift-time-control svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.journal-reset {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.help-tooltip__content[hidden] {
    display: none !important;
}

.help-tooltip__content {
    flex: 0 0 100%;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--wt-success-border, #bad3cb);
    border-radius: 10px;
    color: var(--wt-success-text, #24332e);
    background: var(--wt-success-soft, #f8fcfa);
    font-size: 0.82rem;
    font-weight: 550;
    line-height: 1.45;
}

.monthly-detail__heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.monthly-detail__close {
    display: none;
}

.monthly-detail__status {
    margin: 18px 0 0;
    padding: 14px;
    border: 1px solid var(--wt-success-border, #cfe3dc);
    border-radius: 12px;
    color: var(--wt-success-text, #315f58);
    background: var(--wt-success-soft, #f2faf7);
    text-align: center;
    font-weight: 700;
}

.monthly-detail__status--error {
    border-color: var(--wt-error-border, #e3bcbc);
    color: var(--wt-error-text, #9b2c2c);
    background: var(--wt-error-soft, #fff3f2);
}

.notification-center--empty .notification-center__list {
    display: none;
}

.notification-center--empty .notification-center__empty {
    display: grid;
    flex: 1 1 auto;
    min-height: 160px;
    margin: 16px 0 0;
    padding: 24px;
    place-items: center;
    border: 1px dashed var(--wt-success-border, #c8ddd6);
    border-radius: 14px;
    color: var(--wt-muted, #65726f);
    background: var(--wt-success-soft, #f8fcfa);
    text-align: center;
}

html.app-ui body .help-tooltip::after {
    display: none;
}

html.app-ui body .admin-checkbox-row,
html.app-ui body .employee-telegram-action {
    flex-wrap: wrap;
}

html.app-ui body .app-modal {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}

html.app-ui body .app-modal__backdrop {
    display: none;
}

html.app-ui body .app-modal__sheet {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: var(--wt-surface, #ffffff);
    box-shadow: none;
}

html.app-ui body .app-modal__sheet > .app-modal__header {
    position: sticky;
    z-index: 40;
    top: 0;
    margin: -16px -16px 14px;
    padding: calc(14px + var(--worktime-safe-top)) 16px 14px;
    border-bottom: 1px solid var(--wt-success-border, #e0e9e6);
    background: var(--wt-surface, #ffffff);
}

html.app-ui body #select-modal .app-modal__sheet,
html.app-ui body #employee-role-help-modal .role-help-modal__sheet,
html.app-ui body .journal-shift-modal__sheet,
html.app-ui body .notification-center {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: 0;
}

html.app-ui body #select-modal .app-modal__header,
html.app-ui body #employee-role-help-modal .role-help-modal__header,
html.app-ui body .journal-shift-modal__sheet > .app-modal__header,
html.app-ui body .notification-center > .app-modal__header {
    position: sticky;
    z-index: 40;
    top: 0;
    margin: 0;
    padding: calc(14px + var(--worktime-safe-top)) 16px 14px;
    border-bottom: 1px solid var(--wt-success-border, #e0e9e6);
    background: var(--wt-surface, #ffffff);
}

html.app-ui body #select-modal .select-options,
html.app-ui body #employee-role-help-modal .role-help-modal__body,
html.app-ui body .journal-shift-form {
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

html.app-ui body .notification-center__controls,
html.app-ui body .notification-center__feedback,
html.app-ui body .notification-center__list,
html.app-ui body .notification-center__empty {
    margin-right: 16px;
    margin-left: 16px;
}

html.app-ui body .monthly-detail.monthly-detail--overlay {
    position: fixed;
    z-index: 950;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    background: var(--wt-surface, #ffffff);
}

html.app-ui body .monthly-detail.monthly-detail--overlay .monthly-detail__heading {
    position: sticky;
    z-index: 30;
    top: 0;
    align-items: center;
    margin: 0 -16px;
    padding: calc(14px + var(--worktime-safe-top)) 16px 14px;
    border-bottom: 1px solid var(--wt-success-border, #e0e9e6);
    background: var(--wt-surface, #ffffff);
}

html.app-ui body .monthly-detail__heading-actions {
    flex: 0 0 auto;
}

html.app-ui body .monthly-detail__operations-link {
    display: none;
}

html.app-ui body .monthly-detail__close {
    display: inline-grid;
}

@media (max-width: 620px) {
    .journal-filters .journal-reset {
        grid-column: 1 / -1;
        width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .journal-shift-time-grid {
        grid-template-columns: 1fr;
    }

    .journal-day__add-shift {
        width: 40px;
        height: 40px;
    }

    html.app-ui body .monthly-detail__heading {
        gap: 10px;
    }

    html.app-ui body .monthly-detail__heading h2 {
        font-size: 1.15rem;
    }
}

html.app-ui body .employee-telegram-action .help-tooltip__content {
    grid-column: 1 / -1;
}

/* 0.11.6: app-owned selectors, reliable nested modal stacking and stable Mini App layout. */
:root {
    --worktime-visual-height: 100dvh;
    --worktime-visual-offset-top: 0px;
}

.app-modal--stacked-under {
    pointer-events: none;
}

.app-modal--stacked-under .app-modal__sheet {
    user-select: none;
}

.app-modal__sheet {
    isolation: isolate;
}

.select-options {
    min-height: 0;
}

.select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 56px;
    padding: 13px 15px;
    border-color: var(--wt-success-border, #c8ddd6);
    color: var(--wt-text, #17232a);
    background: var(--wt-surface, #ffffff);
    line-height: 1.35;
}

.select-option__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.select-option__mark {
    display: inline-grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--wt-success-border, #a8c9bf);
    border-radius: 50%;
    color: transparent;
    background: var(--wt-success-soft, #f8fcfa);
    font-size: 1rem;
    font-weight: 900;
}

.select-option--selected {
    border-color: var(--wt-success-border, #287568);
    color: var(--wt-success-text, #174a44);
    background: var(--wt-success-soft, #edf8f3);
    box-shadow: inset 4px 0 0 var(--wt-success-border, #287568);
}

.select-option--selected .select-option__mark {
    border-color: var(--wt-success-border, #287568);
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-success-solid, #287568);
}

.select-options--months .select-option__label {
    text-transform: none;
}

.journal-filter-field,
.admin-form__field,
.payroll-app-select-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.journal-filter-field > span,
.admin-form__field-label {
    color: var(--wt-text, #40504a);
    font-size: 0.88rem;
    font-weight: 700;
}

.journal-filter-field .select-control,
.admin-form__field .select-control {
    min-width: 0;
}

.journal-filters__search input {
    height: 50px;
    min-height: 50px;
    padding: 11px 14px;
    border-color: var(--wt-success-border, #b9d5cb);
    border-radius: 11px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
}

.select-control > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.journal-day__heading {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: stretch;
    min-height: 70px;
    padding: 10px 14px;
    text-align: center;
}

.journal-day__center {
    grid-column: 2;
    display: grid;
    gap: 2px;
    justify-items: center;
    min-width: 0;
}

.journal-day__heading .journal-day__center h3 {
    margin: 0;
}

.journal-day__count {
    position: static !important;
    width: auto !important;
    color: var(--wt-success-text, #506861);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center !important;
}

.journal-day__actions {
    position: static;
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    min-width: 40px;
}

.journal-day__actions:empty {
    visibility: hidden;
}

.journal-day__add-shift {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.notification-center__controls {
    margin-top: 18px;
}

.notification-center__feedback:not(:empty) {
    margin-top: 10px;
}

.notification-center__list {
    margin-top: 12px;
    padding-bottom: 18px;
}

.notification-center--empty .notification-center__empty {
    margin-top: 12px;
    margin-bottom: 18px;
}

#employee-editor-modal .app-modal__sheet {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#employee-editor-modal .app-modal__header {
    position: relative;
    z-index: 100;
    flex: 0 0 auto;
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--wt-success-border, #e0e9e6);
    background: var(--wt-surface, #ffffff);
    box-shadow: 0 2px 10px var(--wt-shadow, rgba(23, 74, 68, 0.06));
}

#employee-editor-modal .admin-form {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 20px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 96px 180px;
}

#employee-editor-modal .app-modal__header h2,
.app-modal__header h2 {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .admin-checkbox-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 30px;
        align-items: start;
        gap: 8px 10px;
    }

    .admin-checkbox-row .admin-checkbox {
        min-width: 0;
    }

    .admin-checkbox-row .help-tooltip {
        grid-column: 2;
        justify-self: end;
        margin-top: 0;
    }

    .admin-checkbox-row .help-tooltip__content {
        grid-column: 1 / -1;
        width: 100%;
    }

    .journal-day__heading {
        min-height: 72px;
        padding: 10px 12px;
    }

    .journal-day__heading h3 {
        font-size: 1.24rem;
    }
}

html.app-ui body .app-modal {
    inset: var(--worktime-visual-offset-top) 0 auto;
    width: 100%;
    height: var(--worktime-visual-height);
}

html.app-ui body .app-modal__sheet {
    height: 100%;
    max-height: 100%;
    scroll-padding-top: 92px;
    scroll-padding-bottom: 140px;
}

html.app-ui body .app-modal__sheet > .app-modal__header {
    z-index: 100;
    margin: -16px -16px 18px;
    padding: calc(14px + var(--worktime-safe-top)) 20px 15px;
    box-shadow: 0 2px 10px var(--wt-shadow, rgba(23, 74, 68, 0.06));
}

html.app-ui body #select-modal .app-modal__sheet {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html.app-ui body #select-modal .app-modal__header,
html.app-ui body #employee-role-help-modal .role-help-modal__header,
html.app-ui body .journal-shift-modal__sheet > .app-modal__header,
html.app-ui body .notification-center > .app-modal__header {
    padding: calc(14px + var(--worktime-safe-top)) 20px 15px;
    box-shadow: 0 2px 10px var(--wt-shadow, rgba(23, 74, 68, 0.06));
}

html.app-ui body #select-modal .select-options {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 16px;
}

html.app-ui body #employee-role-help-modal .role-help-modal__body,
html.app-ui body .journal-shift-form {
    padding-top: 18px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

html.app-ui body #employee-editor-modal .app-modal__sheet {
    height: 100%;
    max-height: 100%;
}

html.app-ui body #employee-editor-modal .app-modal__header {
    padding: calc(14px + var(--worktime-safe-top)) 20px 15px;
}

html.app-ui body #employee-editor-modal .admin-form {
    padding: 18px 20px calc(32px + env(safe-area-inset-bottom, 0px));
}

html.app-ui body .notification-center__controls,
html.app-ui body .notification-center__feedback,
html.app-ui body .notification-center__list,
html.app-ui body .notification-center__empty {
    margin-right: 20px;
    margin-left: 20px;
}

html.app-ui body .notification-center__list,
html.app-ui body .notification-center__empty {
    margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

html.app-ui body .photo-modal__stage {
    margin-top: 0;
}

html.app-ui body .modal-operation-summary,
html.app-ui body .employee-telegram-status {
    margin-top: 0;
}

.native-month-input {
    display: none !important;
}

@media (max-width: 620px) {
    .journal-heading .admin-primary-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 620px) {
    .admin-workspace__heading.journal-heading {
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }
}

/* 0.11.8: hidden modal state always overrides responsive display rules. */
/* 0.11.7: compact short selectors, balanced operation status and explicit success feedback. */
.select-options,
.select-options--compact {
    align-content: start;
    grid-auto-rows: minmax(56px, auto);
}

.select-options--compact .select-option {
    min-height: 56px;
    padding-top: 13px;
    padding-bottom: 13px;
}

.success-dialog {
    align-items: center;
}

.success-dialog__sheet {
    width: min(100%, 420px);
    padding: 26px 24px 22px;
    overflow: visible;
    text-align: center;
}

.success-dialog__icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    place-items: center;
    border-radius: 50%;
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-success-solid, #287568);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.success-dialog__sheet h2 {
    margin: 0;
    color: var(--wt-text, #17232a);
    font-size: 1.45rem;
}

.success-dialog__sheet p {
    margin: 10px 0 20px;
    color: var(--wt-text, #40504a);
    font-size: 1rem;
    line-height: 1.5;
}

.success-dialog__button {
    width: 100%;
}

@media (max-width: 620px) {
    .operations__heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .operations__pending {
        justify-self: start;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    html.app-ui body .notification-center > .app-modal__header {
        box-sizing: border-box;
        margin: 0;
        padding-left: max(28px, calc(20px + env(safe-area-inset-left, 0px)));
        padding-right: max(20px, calc(16px + env(safe-area-inset-right, 0px)));
    }

    html.app-ui body .app-modal.success-dialog {
        inset: var(--worktime-visual-offset-top) 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: var(--worktime-visual-height);
        padding: 24px;
    }

    html.app-ui body .success-dialog .app-modal__backdrop {
        display: block;
        background: var(--wt-overlay, rgba(23, 32, 42, 0.55));
    }

    html.app-ui body .success-dialog .app-modal__sheet {
        width: min(100%, 420px);
        height: auto;
        max-height: none;
        padding: 26px 24px 22px;
        overflow: visible;
        border: 1px solid var(--wt-info-border, #dfe5eb);
        border-radius: 20px;
        box-shadow: 0 20px 60px var(--wt-shadow, rgba(23, 32, 42, 0.25));
    }
}

/* 0.11.9: confirmed overnight shifts, audited interval removal and focused validation. */
.shift__interval-overnight {
    display: inline-flex;
    margin: 0 0 4px 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--wt-warning-soft, #fff4cf);
    color: var(--wt-warning-text, #725600);
    font-size: 11px;
    font-weight: 800;
}

.shift__interval-actions,
.monthly-shift-card__actions,
.journal-event__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.shift__interval-action,
.monthly-shift-card__edit,
.operation-card__button {
    min-height: 40px;
}

.shift__interval-action {
    padding: 8px 12px;
    border: 1px solid var(--wt-success-border, #9fc8bf);
    border-radius: 10px;
    color: var(--wt-success-text, #14584f);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.shift__interval-action--danger,
.monthly-shift-card__edit--danger,
.operation-card__button--danger {
    border-color: var(--wt-error-border, #e1aaaa);
    color: var(--wt-error-text, #a72f32);
    background: var(--wt-error-soft, #fff7f7);
}

.journal-event__cancellation {
    margin: 10px 0 0;
    color: var(--wt-error-text, #9d3033);
    font-size: 14px;
    line-height: 1.45;
}

.modal-actions--shift-correction {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A centered confirmation has its own gutters, not fullscreen sheet insets. */
html body #shift-timing-dialog .shift-timing-dialog__sheet {
    display: flex;
    flex-direction: column;
    width: min(100%, 520px);
    height: auto;
    max-height: min(82vh, 760px);
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
}

html body #shift-timing-dialog .shift-timing-dialog__sheet > .app-modal__header {
    position: relative;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--wt-success-border, #e0e9e6);
    box-shadow: none;
}

.shift-timing-dialog__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 20px 24px;
}

.shift-timing-dialog__body > p {
    margin: 0 0 18px;
    color: var(--wt-success-text, #35443f);
    line-height: 1.55;
}

.shift-timing-dialog__details {
    display: grid;
    gap: 10px;
    margin: 0;
}

.shift-timing-dialog__details > div {
    display: grid;
    grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--wt-success-soft, #f2f7f5);
}

.shift-timing-dialog__details > div[hidden] {
    display: none;
}

.shift-timing-dialog__details dt {
    color: var(--wt-muted, #67736f);
    font-size: 13px;
    font-weight: 700;
}

.shift-timing-dialog__details dd {
    margin: 0;
    color: var(--wt-success-text, #172c27);
    font-weight: 800;
}

.shift-timing-dialog__warning {
    margin-top: 14px !important;
    padding: 12px 14px;
    border: 1px solid var(--wt-warning-border, #dfbd63);
    border-radius: 12px;
    color: var(--wt-warning-text, #745600) !important;
    background: var(--wt-warning-soft, #fff8dc);
    font-weight: 700;
}

@media (max-width: 620px) {
    .modal-actions--shift-correction {
        grid-template-columns: 1fr;
    }

    html.app-ui body .shift-timing-dialog {
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    html.app-ui body .shift-timing-dialog .app-modal__sheet {
        width: min(100%, 520px);
        height: auto;
        max-height: calc(var(--worktime-visual-height) - 40px);
        border-radius: 20px;
        box-shadow: 0 20px 60px var(--wt-shadow, rgba(23, 32, 42, 0.25));
    }

    .shift-timing-dialog__body {
        padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    }

    .shift-timing-dialog__details > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* 0.11.11: application-owned calendar, safe interval editing and polished admin layouts. */
.date-control,
.operation-action-datetime .date-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    padding: 10px 13px;
    border: 1px solid var(--wt-success-border, #bfd6ce);
    border-radius: 11px;
    color: var(--wt-muted, #5f6f69);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.date-control--selected {
    color: var(--wt-success-text, #174a44);
    border-color: var(--wt-success-border, #82b6a8);
    background: var(--wt-success-soft, #f4fbf8);
}

.date-control svg,
.journal-shift-time-control svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.date-control__icon {
    flex: 0 0 auto;
    font-size: 1rem;
}

.date-picker {
    width: min(100%, 500px);
    padding: 0;
    overflow: hidden;
}

.date-picker > .app-modal__header {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--wt-success-border, #e0e9e6);
}

.date-picker__body {
    padding: 18px 20px 20px;
}

.date-picker__navigation {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.date-picker__navigation strong {
    color: var(--wt-success-text, #174a44);
    text-align: center;
    font-size: 1.05rem;
}

.date-picker__nav {
    width: 44px;
    height: 44px;
    border: 1px solid var(--wt-success-border, #bfd6ce);
    border-radius: 50%;
    color: var(--wt-success-text, #174a44);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.date-picker__nav:disabled {
    opacity: 0.32;
    cursor: default;
}

.date-picker__weekdays,
.date-picker__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.date-picker__weekdays {
    margin-bottom: 7px;
    color: var(--wt-muted, #6b7974);
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
}

.date-picker__day,
.date-picker__blank {
    aspect-ratio: 1;
}

.date-picker__day {
    display: grid;
    place-items: center;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--wt-success-text, #24332e);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.date-picker__day:focus-visible {
    border-color: var(--wt-success-border, #9bc4b9);
    background: var(--wt-success-soft, #f1f8f5);
}
@media (hover: hover) and (pointer: fine) {
.date-picker__day:hover:not(:disabled) {
    border-color: var(--wt-success-border, #9bc4b9);
    background: var(--wt-success-soft, #f1f8f5);
}
}

.date-picker__day--today {
    border-color: var(--wt-success-border, #b7d4cb);
}

.date-picker__day--selected {
    border-color: var(--wt-success-border, #287568);
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-success-solid, #287568);
}

.date-picker__day:disabled {
    color: var(--wt-muted, #b5beb9);
    background: var(--wt-surface, #f7f9f8);
    cursor: default;
}

.operation-action-datetime {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.operation-action-datetime > .form-label {
    margin: 0;
}

.operation-action-datetime__controls {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 10px;
}

.shift-correction__time-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.shift-correction__time-field > .form-label {
    margin: 0;
}

.time-control-clear {
    justify-self: start;
    padding: 4px 0;
    border: 0;
    color: var(--wt-muted, #5c6e68);
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.shift-cancel-modal__sheet {
    display: flex;
    flex-direction: column;
    width: min(100%, 720px);
    padding: 0;
    overflow: hidden;
}

.shift-cancel-modal__sheet > .app-modal__header {
    flex: 0 0 auto;
    margin: 0;
    padding: 20px 24px;
    border-bottom: 1px solid var(--wt-success-border, #e0e9e6);
}

.shift-cancel-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    gap: 16px;
    padding: 20px 24px 24px;
}

.shift-cancel-form > .field-help,
.shift-cancel-form > label,
.shift-cancel-form > .field-error {
    margin: 0;
}

.shift-cancel-form > label {
    color: var(--wt-text, #37414b);
    font-size: 0.9rem;
    font-weight: 800;
}

.shift-cancel-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 132px;
    padding: 12px 14px;
    resize: vertical;
    border: 1px solid var(--wt-success-border, #bfd6ce);
    border-radius: 12px;
    color: var(--wt-text, #17232a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
}

.shift-cancel-modal__sheet .modal-operation-summary {
    flex: 0 0 auto;
    margin: 20px 24px 0;
}

.shift__interval-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.shift__interval-overnight {
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 3px 9px;
    align-self: flex-start;
    line-height: 1.25;
    white-space: nowrap;
}

.journal-event__main .shift__interval-overnight {
    justify-self: start;
}

.monthly-shift-card__main {
    flex-wrap: wrap;
}

.monthly-shift-card__main .shift__interval-overnight {
    order: 3;
    flex-basis: auto;
}

@media (max-width: 980px) {
    .journal-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .journal-filter-field .select-control {
        box-sizing: border-box;
        width: 100%;
        min-height: 78px;
        height: 100%;
    }

    .journal-filters__search,
    .journal-reset {
        grid-column: 1 / -1;
        width: 100%;
    }

    .journal-filters__search input {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        min-height: 78px;
    }
}

@media (max-width: 620px) {
    .journal-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .journal-filters__search,
    .journal-filters .journal-reset {
        grid-column: 1 / -1 !important;
    }

    .operation-action-datetime__controls,
    .shift-correction__times {
        grid-template-columns: 1fr;
    }

    .modal-actions--shift-correction {
        grid-template-columns: 1fr;
    }

    .modal-actions--shift-correction .shift-correction-delete {
        margin-top: 10px;
    }

    html.app-ui body #date-modal,
    html.app-ui body #time-modal {
        align-items: center;
        justify-content: center;
        padding: 18px;
    }

    html.app-ui body #date-modal .app-modal__backdrop,
    html.app-ui body #time-modal .app-modal__backdrop {
        display: block;
    }

    html.app-ui body #date-modal .app-modal__sheet,
    html.app-ui body #time-modal .app-modal__sheet {
        width: min(100%, 520px);
        height: auto;
        max-height: calc(var(--worktime-visual-height) - 36px);
        border: 1px solid var(--wt-info-border, #dfe5eb);
        border-radius: 20px;
        box-shadow: 0 20px 60px var(--wt-shadow, rgba(23, 32, 42, 0.25));
    }

    html.app-ui body #date-modal .app-modal__header,
    html.app-ui body #time-modal .app-modal__header {
        position: static;
        margin: 0;
        padding: 17px 20px;
    }

    html.app-ui body .shift-cancel-modal__sheet {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-height: 100%;
        padding: 0;
        overflow: hidden;
    }

    html.app-ui body .shift-cancel-modal__sheet > .app-modal__header {
        flex: 0 0 auto;
        margin: 0;
        padding: calc(14px + var(--worktime-safe-top)) 20px 15px;
    }

    html.app-ui body .shift-cancel-modal__sheet .modal-operation-summary {
        margin: 18px 20px 0;
    }

    html.app-ui body .shift-cancel-form {
        flex: 1 1 auto;
        min-height: 0;
        padding: 18px 20px calc(28px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }

    .shift-cancel-form textarea {
        min-height: 150px;
    }
}

/* 0.11.12: operation forms, compact current shifts and director finance. */
.operation-form textarea,
.company-purchase-form input[type="text"],
.company-purchase-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--wt-success-border, #bfcfc9);
    border-radius: 12px;
    color: var(--wt-text, #17202a);
    background: var(--wt-surface, #ffffff);
    font: inherit;
    line-height: 1.45;
}

.operation-form textarea,
.company-purchase-form textarea {
    min-height: 108px;
    resize: vertical;
}

.operation-form textarea:focus-visible,
.company-purchase-form input[type="text"]:focus-visible,
.company-purchase-form textarea:focus-visible {
    outline: 3px solid var(--wt-success-border, rgba(40, 117, 104, 0.2));
    outline-offset: 2px;
    border-color: var(--wt-success-border, #75a99f);
}

.operation-form label.check-control,
.company-purchase-form label.check-control {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--wt-text, #37414b);
    line-height: 1.35;
}

.operation-form label.check-control input,
.company-purchase-form label.check-control input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
}

.operation-form label.check-control span,
.company-purchase-form label.check-control span {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.document-unavailable > div:not([hidden]) {
    display: block;
    margin-top: 12px;
}

.document-unavailable > div > label {
    margin: 0 0 7px;
}

.document-unavailable textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 112px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--wt-warning-border, #d2c27f);
    border-radius: 12px;
    color: var(--wt-text, #17202a);
    background: var(--wt-warning-soft, #fffef9);
    font: inherit;
    line-height: 1.45;
}

.current-shifts__list {
    gap: 8px;
}

.current-shift-card {
    padding: 11px 13px;
}

.current-shift-card h3 {
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1.25;
}

.current-shift-card p {
    line-height: 1.3;
}

.current-shift-card p + p {
    margin-top: 3px;
}

.expediter-payroll__grid {
    margin-top: 15px;
}

.director-finance {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--wt-success-border, #cfe3dc);
    border-radius: 18px;
    background: var(--wt-success-soft, #f8fcfa);
}

.director-finance__heading,
.director-finance__total,
.director-month-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.director-finance__heading h2,
.director-finance__history h3,
.company-purchase-form h3 {
    margin: 3px 0 0;
}

.director-finance__heading--month {
    align-items: flex-start;
    flex-wrap: wrap;
}

.director-month-control {
    flex: 0 0 auto;
    padding: 5px;
    border: 1px solid var(--wt-success-border, #cfe3dc);
    border-radius: 12px;
    background: var(--wt-surface, #ffffff);
}

.director-month-control button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 9px;
    color: var(--wt-success-text, #155c50);
    background: var(--wt-success-soft, #edf7f3);
    font: inherit;
    font-size: 24px;
    cursor: pointer;
}

.director-month-control strong {
    min-width: 140px;
    text-align: center;
}

.director-finance__total {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--wt-success-border, #dbece6);
    border-radius: 14px;
    background: var(--wt-surface, #ffffff);
}

.director-finance__total strong {
    color: var(--wt-success-text, #155c50);
    font-size: 1.25rem;
}

.director-finance__feedback {
    min-height: 22px;
    margin: 10px 0 0;
    color: var(--wt-muted, #5c6d67);
}

.director-finance__balance-card {
    margin-top: 14px;
}

.director-finance__balance-card .expediter-payroll__heading > strong {
    margin-bottom: 4px;
}

.director-finance__history {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--wt-success-border, #dbe8e3);
}

.director-finance__history > div {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.director-purchase-card__owner {
    margin: 8px 0 0;
    color: var(--wt-muted, #52655f);
    font-size: 13px;
    font-weight: 700;
}

.company-purchase-form {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--wt-success-border, #dbe8e3);
    border-radius: 16px;
    background: var(--wt-surface, #ffffff);
}

.company-purchase-form[hidden] {
    display: none !important;
}

.company-purchase-form > label,
.company-purchase-form .form-label {
    margin-top: 7px;
    color: var(--wt-text, #37414b);
    font-size: 14px;
    font-weight: 700;
}

.company-purchase-form .document-unavailable {
    margin-top: 4px;
}

.company-purchase-form .operation-form__submit {
    background: var(--wt-success-solid, var(--brand-green-dark));
}

.company-purchase-datetime {
    margin-top: 4px;
}

@media (max-width: 620px) {
    .director-finance {
        padding: 16px;
        border-radius: 16px;
    }

    .director-finance__heading--month,
    .director-finance__total {
        align-items: stretch;
        flex-direction: column;
    }

    .director-month-control {
        width: 100%;
    }

    .director-month-control strong {
        flex: 1 1 auto;
        min-width: 0;
    }

    .company-purchase-form {
        padding: 15px;
    }
}

/* 0.11.17: privacy-aware shift summaries and UI spacing polish. */
.shift__summary {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: baseline;
    justify-content: start;
    column-gap: 16px;
}

.shift__summary[hidden] {
    display: none !important;
}

#employee-month-worked-summary:not([hidden]) {
    display: grid;
}

.shift__summary strong {
    white-space: nowrap;
}

.select-control b {
    position: relative;
    width: 20px;
    height: 20px;
    color: var(--wt-muted, #5d6873);
    font-size: 0;
    line-height: 0;
}

.select-control b::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-50%, -65%) rotate(45deg);
}

.current-shifts-button {
    margin-top: 24px;
    margin-bottom: 0;
}

#current-shifts-modal {
    --current-shifts-list-gap: 10px;
}

#current-shifts-modal .app-modal__sheet > .app-modal__header,
html.app-ui body #current-shifts-modal .app-modal__sheet > .app-modal__header {
    margin-bottom: 0;
}

.current-shifts__feedback:empty {
    display: none;
}

#current-shifts-modal .current-shifts__feedback:not(:empty),
#current-shifts-modal .current-shifts__empty:not([hidden]) {
    margin-top: var(--current-shifts-list-gap);
}

#current-shifts-modal .current-shifts__list {
    gap: var(--current-shifts-list-gap);
    margin-top: var(--current-shifts-list-gap);
}

#current-shifts-modal .current-shifts__list:empty {
    margin-top: 0;
}

.operation-form .file-picker,
.company-purchase-form .file-picker {
    margin-top: 4px;
    margin-bottom: 4px;
}

.operation-form .field-help,
.company-purchase-form .field-help {
    margin-top: 10px;
}

.operation-form .document-unavailable,
.company-purchase-form .document-unavailable {
    margin-top: 12px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    #current-shifts-modal {
        --current-shifts-list-gap: 8px;
    }
}



/* Keep the compact equal-gap summary on normal phones without introducing horizontal scroll on very narrow screens. */
@media (max-width: 384px) {
    .shift__summary {
        grid-template-columns: minmax(0, 1fr) max-content;
        column-gap: 10px;
    }
}


/* 0.11.19: aligned summaries, stable help, touch polish and camera/gallery source split. */
:root {
    --shift-summary-label-width: 152px;
    --shift-summary-row-height: 48px;
}

.shift__summary {
    display: grid;
    grid-template-columns: minmax(0, var(--shift-summary-label-width)) max-content;
    align-items: center;
    justify-content: start;
    column-gap: 12px;
    box-sizing: border-box;
    height: var(--shift-summary-row-height);
    margin-top: 0;
    padding: 9px 0;
}

#shift-day-total-summary {
    margin-top: 18px;
}

.shift__summary span {
    white-space: nowrap;
}

#employee-month-worked-summary:not([hidden]) {
    display: grid;
}

html {
    -webkit-tap-highlight-color: transparent;
}

:focus:not(:focus-visible) {
    outline: none;
}

.admin-checkbox-row,
.employee-admin-action {
    flex-wrap: wrap;
}

.employee-telegram-action .help-tooltip__content,
.employee-admin-card__actions > .help-tooltip__content {
    grid-column: 1 / -1;
    width: 100%;
}

html.browser-ui body .help-tooltip.is-open::after {
    display: none;
}

.employee-admin-card__fact,
.employee-admin-card__telegram {
    margin: 4px 0 0;
}

.file-picker-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 4px 0;
}

.operation-form .file-picker-group .file-picker,
.company-purchase-form .file-picker-group .file-picker {
    width: 100%;
    margin: 0;
}

@media (hover: hover) and (pointer: fine) {
    html.browser-ui body .file-picker--camera {
        display: none;
    }
}

@media (max-width: 384px) {
    :root {
        --shift-summary-row-height: 56px;
    }

    .shift__summary {
        grid-template-columns: minmax(0, 1fr) 124px;
        column-gap: 8px;
        padding: 6px 0;
    }

    .shift__summary span {
        white-space: normal;
    }

    .shift__summary strong {
        text-align: left;
    }
}


/* 0.11.19: anchored help, semantic employee facts and in-app camera source menu. */
.employee-admin-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
}

.employee-admin-action > .operation-card__button {
    min-width: 0;
}

.employee-admin-action > .help-tooltip {
    justify-self: end;
    margin: 0;
}

.employee-admin-card__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 14px;
    margin-top: 5px;
    color: var(--wt-muted, #61706b);
    font-size: 0.92rem;
    line-height: 1.35;
}

.employee-admin-card__fact {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 0;
    white-space: normal;
}

.employee-admin-card__fact::before {
    flex: 0 0 auto;
    align-self: center;
    width: 4px;
    height: 4px;
    content: '';
    border-radius: 50%;
    background: var(--wt-success-solid, #3e746c);
}

.photo-source-modal__sheet {
    width: min(100%, 460px);
}

.photo-source-actions {
    display: grid;
    gap: 10px;
}

.photo-source-action {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--wt-success-border, #c9ddd7);
    border-radius: 14px;
    color: var(--wt-success-text, #173e39);
    background: var(--wt-success-soft, #f7fbfa);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.photo-source-action:focus-visible {
    border-color: var(--wt-success-border, #79aa9f);
    background: var(--wt-success-soft, #eef8f5);
}
@media (hover: hover) and (pointer: fine) {
.photo-source-action:hover {
    border-color: var(--wt-success-border, #79aa9f);
    background: var(--wt-success-soft, #eef8f5);
}
}

.photo-source-action__icon {
    display: grid;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--wt-success-text, #1e6b61);
    background: var(--wt-success-soft, #e2f1ed);
    place-items: center;
}

.photo-source-action__icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.photo-source-action strong,
.photo-source-action small {
    display: block;
    min-width: 0;
}

.photo-source-action strong {
    font-size: 1rem;
}

.photo-source-action small {
    margin-top: 2px;
    color: var(--wt-muted, #6a7773);
    font-size: 0.82rem;
}

.camera-capture-modal__sheet {
    width: min(100%, 680px);
}

.camera-capture__stage {
    position: relative;
    display: grid;
    min-height: 260px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--wt-success-solid, #111917);
    place-items: center;
}

.camera-capture__stage video,
.camera-capture__stage img {
    display: block;
    width: 100%;
    max-height: min(66vh, 720px);
    object-fit: contain;
    background: var(--wt-success-solid, #111917);
}

.camera-capture__stage video[hidden],
.camera-capture__stage img[hidden] {
    display: none !important;
}

.camera-capture__status {
    position: absolute;
    inset: auto 12px 12px;
    padding: 9px 11px;
    border-radius: 10px;
    color: var(--wt-on-accent, #ffffff);
    background: var(--wt-success-solid, rgba(17, 25, 23, 0.78));
    font-size: 0.86rem;
    line-height: 1.4;
    text-align: center;
}

.camera-capture__status[hidden] {
    display: none !important;
}

.camera-capture__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.camera-capture__actions > button[hidden] {
    display: none !important;
}

.operation-form > .file-picker,
.company-purchase-form > .file-picker,
.operation-mileage-fields > .file-picker {
    width: 100%;
    max-width: 100%;
    white-space: normal;
}

@media (max-width: 620px) {
    .employee-admin-card__facts {
        gap: 7px 12px;
        font-size: 0.9rem;
    }

    .employee-admin-card__fact {
        max-width: 100%;
    }
}

html.app-ui body #photo-source-modal {
    inset: var(--worktime-visual-offset-top) 0 0;
    align-items: flex-end;
    width: 100%;
    height: var(--worktime-visual-height);
    padding: 12px;
}

html.app-ui body #photo-source-modal .app-modal__backdrop {
    display: block;
}

html.app-ui body #photo-source-modal .photo-source-modal__sheet {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: min(70vh, 560px);
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    overflow: visible;
    border: 1px solid var(--wt-success-border, #d8e4e0);
    border-radius: 20px;
    box-shadow: 0 -10px 36px var(--wt-shadow, rgba(23, 32, 42, 0.18));
}

html.app-ui body #photo-source-modal .photo-source-modal__header {
    position: static;
    margin: 0 0 8px;
    padding: 4px 4px 10px;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
}

html.app-ui body #camera-capture-modal .camera-capture-modal__sheet {
    display: flex;
    flex-direction: column;
}

html.app-ui body #camera-capture-modal .camera-capture__stage {
    flex: 1 1 auto;
    min-height: 0;
}

html.app-ui body #camera-capture-modal .camera-capture__stage video,
html.app-ui body #camera-capture-modal .camera-capture__stage img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

.employee-admin-card__heading > div {
    min-width: 0;
    flex: 1 1 auto;
}

.employee-admin-card,
.employee-admin-card__heading {
    min-width: 0;
}


/* 0.11.20: stable help rows, app-owned validation and high-quality draft photo viewing. */
.employee-admin-card__actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.employee-admin-card__actions > .operation-card__button,
.employee-admin-card__actions > .employee-admin-action {
    width: 100%;
    min-width: 0;
}

.employee-admin-card__actions > .help-tooltip__content {
    grid-column: 1 / -1;
    min-width: 0;
}

.field-control--error,
input.field-control--error,
textarea.field-control--error,
select.field-control--error,
button.field-control--error,
.select-control.field-control--error {
    border-color: var(--wt-error-border, #b94a4a) !important;
    box-shadow: 0 0 0 2px var(--wt-shadow, rgba(185, 74, 74, 0.12)) !important;
}

.file-previews--single {
    grid-template-columns: minmax(0, 180px);
}

.file-preview__open {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: zoom-in;
}

.file-preview > .file-preview__open {
    border-top: 0;
}

.file-preview__open:focus-visible {
    outline: 3px solid var(--wt-success-border, rgba(23, 74, 68, 0.28));
    outline-offset: -3px;
}

.file-preview__remove {
    width: 100%;
    padding: 7px 5px;
    border: 0;
    border-top: 1px solid var(--wt-info-border, #dfe5eb);
    color: var(--wt-error-text, #8c3030);
    background: var(--wt-error-soft, #fff8f8);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
}

.photo-modal__stage {
    touch-action: none;
}

#photo-modal-image {
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

#photo-modal-image.is-zoomed {
    cursor: grab;
}

.photo-modal__stage:active #photo-modal-image.is-zoomed {
    cursor: grabbing;
}

.photo-modal__zoom {
    display: grid;
    grid-template-columns: 1fr minmax(92px, auto) 1fr;
    gap: 8px;
    margin-top: 10px;
}

.photo-modal__zoom .modal-button {
    min-height: 42px;
    padding: 8px 12px;
}

@media (max-width: 620px) {
    .employee-admin-card__actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .employee-admin-card__actions > .help-tooltip__content {
        grid-column: 1;
    }
}


/* 0.11.21: compact shell, consistent Mini App modal spacing and photo viewer polish. */
.status[hidden] {
    display: none !important;
}

/* Keep the operations history close to the action that created it instead of leaving an empty feedback-sized gutter. */
.operation-form__feedback:empty {
    display: none;
}

.operation-form + .operation-history {
    margin-top: 14px;
    padding-top: 16px;
}

/* Mileage photo controls use the same compact vertical rhythm as nearby form controls. */
.operation-mileage-fields #mileage-photo-name {
    margin-top: 2px;
}

.operation-mileage-fields #mileage-photo-previews:empty {
    display: none;
}

.operation-mileage-fields #mileage-photo-unavailable-block {
    margin-top: 2px;
    margin-bottom: 6px;
}

.camera-capture__meta {
    margin: 8px 2px 0;
    color: var(--wt-muted, #66717d);
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: center;
}

.camera-capture__meta[hidden] {
    display: none !important;
}

/* Standard full-screen Mini App modals get one explicit content gap after their sticky header. */
html.app-ui body #employee-telegram-modal .app-modal__header + .employee-telegram-status,
html.app-ui body #operation-action-modal .app-modal__header + .modal-operation-summary,
html.app-ui body #shift-correction-modal .app-modal__header + .modal-operation-summary,
html.app-ui body #mileage-action-modal .app-modal__header + form,
html.app-ui body #camera-capture-modal .app-modal__header + .camera-capture__stage {
    margin-top: 34px;
}

/* r20: dedicated photo viewer geometry: compact Telegram header, centered document card and visible top/bottom radii. */
.app-modal--photo .app-modal__sheet {
    display: flex;
    flex-direction: column;
}

.app-modal--photo .photo-modal__stage {
    flex: 1 1 auto;
    min-height: 200px;
    margin-top: 14px;
    border-radius: 14px;
    background: var(--wt-surface-alt, #f4f6f8);
}

.app-modal--photo #photo-modal-image {
    width: auto;
    max-width: 100%;
    min-height: 0;
    max-height: 100%;
    height: auto;
    margin: auto;
    border-radius: 12px;
}

html.app-ui body #photo-modal .app-modal__sheet {
    padding-top: 0;
    overflow: hidden;
}

html.app-ui body #photo-modal .app-modal__sheet > .app-modal__header {
    flex: 0 0 auto;
    margin: 0 -16px;
    border-bottom: 0;
    box-shadow: none;
}

html.app-ui[data-worktime-telegram="1"] body #photo-modal .app-modal__sheet > .app-modal__header {
    padding-top: 14px;
}

html.app-ui body #photo-modal .app-modal__header + .photo-modal__stage {
    margin-top: 14px;
}

/* Photo zoom is gesture-driven: pinch/pan on touch, wheel/double-click on desktop. */
.photo-modal__zoom {
    display: none !important;
}

/* 0.11.22: simplified monthly/operations summaries and consistent duration presentation. */
.operations__month-expenses:not([hidden]) ~ .operation-form {
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
}

.monthly-ledger__totals > [data-monthly-metric="overall-worktime"] {
    grid-column: 1 / -1;
    padding: 18px 20px;
    border: 2px solid var(--wt-success-border, #a9d5ca);
    border-radius: 14px;
    background: var(--wt-success-soft, var(--brand-mint-soft));
    box-shadow: 0 4px 14px var(--wt-shadow, rgba(23, 74, 68, 0.08));
}

.monthly-ledger__totals > [data-monthly-metric="overall-worktime"] span {
    color: var(--wt-success-text, var(--brand-green-dark));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.monthly-ledger__totals > [data-monthly-metric="overall-worktime"] strong {
    margin-top: 7px;
    color: var(--wt-text, #17232a);
    font-size: clamp(24px, 5vw, 34px);
    line-height: 1.05;
}

.monthly-employee-card {
    grid-template-rows: auto;
    min-height: 0;
}

.monthly-employee-card__top {
    align-items: center;
}

.monthly-employee-card__metrics {
    display: none !important;
}



/* 0.11.23: permission-aware employee detail and compact mobile heading. */
.monthly-detail__heading > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.monthly-detail__heading-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.monthly-detail__summary,
.monthly-detail__section {
    margin-right: 0;
    margin-left: 0;
}

.monthly-detail__summary > [data-monthly-metric="expense-total"] {
    border-color: var(--wt-success-border, #b8d8cf);
    background: var(--wt-success-soft, #f5faf8);
}

.monthly-detail__summary > [data-monthly-metric="expense-total"] strong {
    color: var(--wt-success-text, #244f48);
}

html.app-ui body .monthly-detail.monthly-detail--overlay .monthly-detail__heading {
    align-items: flex-start;
}

html.app-ui body .monthly-detail.monthly-detail--overlay .monthly-detail__heading-actions {
    align-self: flex-start;
}

html.app-ui body .monthly-detail.monthly-detail--overlay .monthly-detail__close {
    margin-top: 0;
}


/* 0.11.24: ordered employee summary and compact Mini App journal controls. */
.monthly-detail__summary > [data-monthly-metric="worktime"],
.monthly-detail__summary > [data-monthly-metric="expense-total"] {
    border-color: var(--wt-success-border, #b8d8cf);
    background: var(--wt-success-soft, #f5faf8);
}

.monthly-detail__summary > [data-monthly-metric="worktime"] strong,
.monthly-detail__summary > [data-monthly-metric="expense-total"] strong {
    color: var(--wt-success-text, #244f48);
}

@media (max-width: 620px) {
    html.app-ui body .admin-primary-button,
    html.app-ui body .admin-secondary-button {
        min-height: 44px;
        padding: 8px 13px;
        font-size: 0.9rem;
        line-height: 1.2;
    }

    html.app-ui body .journal-heading .admin-primary-button,
    html.app-ui body .journal-filters .journal-reset {
        width: auto;
        justify-self: start;
    }

    html.app-ui body .journal-filter-field .select-control {
        min-height: 52px;
        height: auto;
        gap: 6px;
        padding: 8px 9px;
        font-size: 0.82rem;
        line-height: 1.2;
    }

    html.app-ui body .journal-filters__search input {
        height: auto;
        min-height: 52px;
        padding: 8px 9px;
        font-size: 0.82rem;
        line-height: 1.2;
    }

    html.app-ui body .journal-filter-field .select-control > span {
        overflow: hidden;
        overflow-wrap: normal;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    html.app-ui body .journal-filter-field .select-control b {
        font-size: 18px;
    }
}


/* 0.11.25: semantic employee-summary colors and coherent Mini App journal actions. */
.monthly-detail__summary > [data-monthly-metric="worktime"] {
    border: 2px solid var(--wt-success-border, #a9d5ca);
    border-radius: 14px;
    background: var(--wt-success-soft, var(--brand-mint-soft));
    box-shadow: 0 4px 14px var(--wt-shadow, rgba(23, 74, 68, 0.08));
}
.monthly-detail__summary > [data-monthly-metric="worktime"] span {
    color: var(--wt-success-text, var(--brand-green-dark));
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.monthly-detail__summary > [data-monthly-metric="worktime"] strong { color: var(--wt-text, #17232a); }
.monthly-detail__summary > [data-monthly-metric="expense-total"] {
    border: 2px solid var(--wt-error-border, #b94a4a);
    border-radius: 14px;
    background: var(--wt-error-soft, #fae7e7);
    box-shadow: 0 4px 14px var(--wt-shadow, rgba(133, 42, 42, 0.12));
}
.monthly-detail__summary > [data-monthly-metric="expense-total"] span {
    color: var(--wt-error-text, #7b3131);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.monthly-detail__summary > [data-monthly-metric="expense-total"] strong { color: var(--wt-error-text, #7b3131); }
.monthly-detail__summary > [data-monthly-metric="debit"] {
    border-color: var(--wt-error-border, #d7abab);
    background: var(--wt-error-soft, #fff3f3);
}
.monthly-detail__summary > [data-monthly-metric="debit"] span,
.monthly-detail__summary > [data-monthly-metric="debit"] strong { color: var(--wt-error-text, #7b3131); }
.monthly-detail__summary > [data-monthly-metric="credit"],
.monthly-detail__summary > [data-monthly-metric="hourly"] {
    border-color: var(--wt-success-border, var(--brand-border));
    background: var(--wt-success-soft, #f1faf7);
}
.monthly-detail__summary > [data-monthly-metric="credit"] span,
.monthly-detail__summary > [data-monthly-metric="credit"] strong,
.monthly-detail__summary > [data-monthly-metric="hourly"] span,
.monthly-detail__summary > [data-monthly-metric="hourly"] strong { color: var(--wt-success-text, var(--brand-green-dark)); }
.journal-heading { margin-bottom: 12px; }
.journal-filter-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}
.journal-filter-actions > .admin-primary-button,
.journal-filter-actions > .admin-secondary-button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 50px;
}
@media (max-width: 980px) {
    .journal-filters__search, .journal-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    html.app-ui body .journal-workspace .journal-heading { margin-bottom: 8px; }
    html.app-ui body .journal-filter-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    html.app-ui body .journal-filter-actions > .admin-primary-button,
    html.app-ui body .journal-filter-actions > .admin-secondary-button {
        width: 100%;
        min-height: 52px;
        justify-self: stretch;
        padding: 8px 9px;
        font-size: 0.82rem;
        line-height: 1.2;
    }
    html.app-ui body .journal-filter-field .select-control b {
        font-size: 0;
        line-height: 0;
    }
}

/* 0.11.25 cascade guard: legacy full-row reset rule must not split the paired action row. */
@media (max-width: 620px) {
    html.app-ui body .journal-filter-actions > .journal-add-shift,
    html.app-ui body .journal-filter-actions > .journal-reset {
        grid-column: auto !important;
        width: 100% !important;
        justify-self: stretch !important;
    }
}


/* 0.11.26: centered employee separators, unified Ostapenko balance cards,
   app-owned company-purchase selectors and aligned Mini App shift header. */
.director-finance__heading--balance {
    justify-content: center;
    text-align: center;
}

.director-finance__feedback:empty {
    display: none;
}

.director-finance__balance-card {
    margin-top: 10px;
}

.expediter-payroll__heading {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.expediter-payroll__heading > .section-label {
    margin: 0;
}

.expediter-payroll__balance-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 320px);
    min-height: 64px;
    padding: 12px 18px;
    border: 1px solid var(--wt-success-border, var(--brand-border));
    border-radius: 16px;
    background: var(--wt-success-soft, #f1faf7);
    box-shadow: 0 4px 14px var(--wt-shadow, rgba(23, 74, 68, 0.08));
}

.expediter-payroll__balance-box > strong {
    color: var(--wt-success-text, var(--brand-green-dark));
    font-size: 1.55rem;
    line-height: 1.15;
    white-space: nowrap;
}

.expediter-payroll__balance-box--negative {
    border-color: var(--wt-error-border, #d7abab);
    background: var(--wt-error-soft, #fff3f3);
    box-shadow: 0 4px 14px var(--wt-shadow, rgba(133, 42, 42, 0.08));
}

.expediter-payroll__balance-box--negative > strong {
    color: var(--wt-error-text, #9c3939);
}

.company-purchase-form > .select-control {
    width: 100%;
}

html.app-ui body #journal-shift-modal {
    box-sizing: border-box;
    padding: 0;
}

html.app-ui body #journal-shift-modal .journal-shift-modal__sheet > .app-modal__header {
    margin: 0;
    padding-right: 16px;
    padding-left: 16px;
}


/* 0.11.29: stable accounting-month controls in web and explicit month floor. */
.journal-filter-field .select-control > span {
    overflow: hidden;
    overflow-wrap: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.browser-ui body .journal-filter-field .select-control {
    box-sizing: border-box;
    height: 50px;
    min-height: 50px;
}

.director-month-control button:disabled {
    color: var(--wt-muted, #9aa7a2);
    background: var(--wt-surface-alt, #f2f5f4);
    cursor: default;
    opacity: 0.62;
}


/* 0.11.29: signed previous-month carryover in employee monthly summaries. */
.monthly-detail__summary > [data-monthly-metric="expense-total-credit"] {
    border: 2px solid var(--wt-success-border, var(--brand-green));
    border-radius: 14px;
    background: var(--wt-success-soft, var(--brand-mint-soft));
    box-shadow: 0 4px 14px var(--wt-shadow, rgba(23, 74, 68, 0.10));
}
.monthly-detail__summary > [data-monthly-metric="expense-total-credit"] span {
    color: var(--wt-success-text, var(--brand-green-dark));
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.monthly-detail__summary > [data-monthly-metric="expense-total-credit"] strong { color: var(--wt-success-text, var(--brand-green-dark)); }

.operations__month-expenses--credit span,
.operations__month-expenses--credit strong { color: var(--wt-success-text, var(--brand-green-dark)); }


/* 1.0.9-r5: Ostapenko uses the same balance-first summary hierarchy in both admin views. */
.monthly-detail__summary > [data-monthly-metric="balance"] {
    grid-column: 1 / -1;
    width: min(100%, 320px);
    justify-self: center;
    padding: 16px 18px;
    border-color: var(--wt-success-border, var(--brand-border));
    border-radius: 14px;
    background: var(--wt-success-soft, #f1faf7);
    box-shadow: 0 4px 14px var(--wt-shadow, rgba(23, 74, 68, 0.08));
    text-align: center;
}
.monthly-detail__summary > [data-monthly-metric="balance"] span {
    color: var(--wt-muted, #65726f);
    font-weight: 700;
}
.monthly-detail__summary > [data-monthly-metric="balance"] strong {
    color: var(--wt-success-text, var(--brand-green-dark));
    font-size: 22px;
}
.monthly-detail__summary > [data-monthly-metric="balance"].monthly-detail__balance--negative {
    border-color: var(--wt-error-border, #d7abab);
    background: var(--wt-error-soft, #fff3f3);
    box-shadow: 0 4px 14px var(--wt-shadow, rgba(133, 42, 42, 0.08));
}
.monthly-detail__summary > [data-monthly-metric="balance"].monthly-detail__balance--negative strong {
    color: var(--wt-error-text, #9c3939);
}

/* 1.0.10-r2: align the journal search field with the right edge of the paired action row.
   Desktop has exactly five visible filter controls; the legacy empty sixth track created
   one extra grid gap after the search field. */
@media (min-width: 981px) {
    .journal-filters {
        grid-template-columns: minmax(140px, 0.8fr) minmax(190px, 1.2fr) minmax(140px, 0.8fr) minmax(150px, 0.9fr) minmax(240px, 1.5fr);
    }
}

/* 1.0.10-r3: keep the neutral "Смена закрыта" status inside the Chudopal mint palette.
   The previous #edf0f3/#66717d pair rendered as a visibly grey block on some Windows/RDP setups. */
.shift__badge--closed {
    color: var(--wt-success-text, var(--brand-green-dark));
    background: var(--wt-success-soft, var(--brand-mint-soft));
}


/* 1.0.11-r3: current-shifts sticky header and pending Telegram cleanup UI. */
.pending-binding-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
}
.pending-binding-card__identity {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.pending-binding-card__identity span {
    overflow-wrap: anywhere;
}
.pending-binding-card__remove {
    min-height: 42px;
    padding: 9px 14px;
    white-space: nowrap;
}
html.app-ui body #current-shifts-modal .app-modal__sheet > .app-modal__header {
    top: -16px;
    margin: -16px -16px 0;
}
html.app-ui body #current-shifts-modal .current-shifts__feedback:not(:empty),
html.app-ui body #current-shifts-modal .current-shifts__empty:not([hidden]),
html.app-ui body #current-shifts-modal .current-shifts__list:not(:empty) {
    margin-top: var(--current-shifts-list-gap);
}
@media (max-width: 520px) {
    .pending-binding-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .pending-binding-card__remove {
        width: 100%;
        margin-top: 7px;
    }
}


/* 1.0.11-r4: first-party confirmation for pending Telegram dismissal. */
.pending-telegram-dismiss-modal {
    align-items: center;
}
.pending-telegram-dismiss-modal__sheet {
    width: min(100%, 460px);
    padding: 24px;
    border-color: var(--wt-success-border, var(--brand-border, #bddfd2));
    border-radius: 22px;
    box-shadow: 0 22px 60px var(--wt-shadow, rgba(23, 74, 68, 0.22));
}
.pending-telegram-dismiss-modal__sheet h2 {
    margin: 0;
    color: var(--wt-text, var(--brand-text, #17232a));
    font-size: 22px;
    line-height: 1.25;
}
.pending-telegram-dismiss-modal__identity {
    margin: 16px 0 12px;
    padding: 12px 14px;
    overflow-wrap: anywhere;
    border: 1px solid var(--wt-success-border, var(--brand-border, #bddfd2));
    border-radius: 12px;
    color: var(--wt-success-text, var(--brand-green-dark, #174a44));
    background: var(--wt-success-soft, var(--brand-surface, #edf8f3));
    font-weight: 750;
    line-height: 1.35;
}
.pending-telegram-dismiss-modal__copy {
    margin: 0;
    color: var(--wt-muted, #52635c);
    font-size: 15px;
    line-height: 1.5;
}
.pending-telegram-dismiss-modal__error {
    margin-top: 14px;
    margin-bottom: 0;
}
.pending-telegram-dismiss-modal__actions {
    margin-top: 22px;
}
html.app-ui body #pending-telegram-dismiss-modal {
    inset: var(--worktime-visual-offset-top) 0 auto;
    height: var(--worktime-visual-height);
    padding: 20px;
}
html.app-ui body #pending-telegram-dismiss-modal .pending-telegram-dismiss-modal__sheet {
    height: auto;
    max-height: min(70vh, 520px);
    padding: 24px;
    overflow: auto;
    border-radius: 22px;
}
@media (max-width: 520px) {
    .pending-telegram-dismiss-modal {
        padding: 18px;
    }
    .pending-telegram-dismiss-modal__sheet {
        padding: 22px 20px;
    }
    .pending-telegram-dismiss-modal__actions {
        grid-template-columns: 1fr 1fr;
    }
}

/* 1.0.11-r5 Offline v1 */
.offline-banner {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--wt-warning-border, #e2c668);
    border-radius: 12px;
    background: var(--wt-warning-soft, #fff7dc);
    color: var(--wt-warning-text, #775900);
    font-size: 13px;
    font-weight: 800;
}
.offline-banner--problem { border-color: var(--wt-error-border, #d7abab); background: var(--wt-error-soft, #fff3f3); color: var(--wt-error-text, #7b3131); }
.offline-banner--success { border-color: var(--wt-success-border, #bddfd2); background: var(--wt-success-soft, #f1faf7); color: var(--wt-success-text, #174a44); }
.current-shifts__snapshot { margin: 0 0 12px; color: var(--wt-muted, #65736c); font-size: 13px; font-weight: 700; }
.current-shift-card--offline-pending { border-color: var(--wt-warning-border, #e2c668); background: var(--wt-warning-soft, #fffdf3); }
.current-shift-card__pending { display: inline-flex; margin-top: 6px; padding: 4px 8px; border-radius: 999px; background: var(--wt-warning-soft, #fff7dc); color: var(--wt-warning-text, #775900); font-size: 11px; font-weight: 800; }
.offline-problems { display: grid; gap: 12px; margin-bottom: 18px; padding: 16px; border: 1px solid var(--wt-error-border, #d7abab); border-radius: 16px; background: var(--wt-error-soft, #fffafa); }
.offline-problems[hidden] { display: none !important; }
.offline-problem-card { display: grid; gap: 7px; padding: 13px 14px; border: 1px solid var(--wt-error-border, #ead1d1); border-radius: 14px; background: var(--wt-surface, #fff); }
.offline-problem-card h4, .offline-problem-card p { margin: 0; }
.offline-problem-card__meta { color: var(--wt-muted, #65736c); font-size: 13px; line-height: 1.45; }
.offline-problem-card__reason { color: var(--wt-error-text, #8d241f); font-size: 13px; font-weight: 700; }
.offline-problem-modal__copy { white-space: pre-line; line-height: 1.5; }
.offline-problem-modal__label { display: grid; gap: 7px; font-weight: 700; }
.offline-problem-modal__label textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--wt-success-border, #d7e2dc); border-radius: 13px; padding: 11px 12px; font: inherit; resize: vertical; }
.shift__feedback--pending, .operation-form__feedback--pending { color: var(--wt-warning-text, #775900); background: var(--wt-warning-soft, #fff7dc); }

/* 1.0.11-r8: compact rounded service-status badges, matching the existing
   operations status pill instead of full-width rectangular warning strips. */
.operations__pending,
.current-shift-card__pending,
.shift__feedback--pending,
.operation-form__feedback--pending,
.offline-banner--warning,
.offline-banner--success {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.shift__feedback--pending,
.operation-form__feedback--pending,
.offline-banner--warning,
.current-shift-card__pending,
.operations__pending {
    color: var(--wt-warning-text, #765300);
    background: var(--wt-warning-soft, #fff1c7);
}

.offline-banner--warning,
.offline-banner--success {
    margin: 0 0 14px;
}

.offline-banner--success {
    color: var(--wt-success-text, #174a44);
    background: var(--wt-success-soft, #e5f5e9);
}


.offline-media-repair { display: grid; gap: 9px; margin-top: 10px; padding: 12px; border: 1px solid var(--wt-error-border, #d7abab); border-radius: 13px; background: var(--wt-error-soft, #fff8f8); }
.offline-media-repair__identity { display: grid; gap: 4px; padding-bottom: 9px; border-bottom: 1px solid var(--wt-error-border, #ead1d1); }
.offline-media-repair__identity:empty { display: none; }
.offline-media-repair__title, .offline-media-repair__line { margin: 0; }
.offline-media-repair__title { color: var(--wt-text, #30363b); font-weight: 750; line-height: 1.35; }
.offline-media-repair__line { color: var(--wt-muted, #596168); line-height: 1.4; }
.offline-media-repair__label { font-weight: 650; color: var(--wt-text, #454d53); }
.offline-media-repair[hidden] { display: none !important; }
.offline-media-repair .admin-secondary-button { justify-self: start; }

/* 1.0.11-r18: hidden must override the compact pending-pill display. */
.operations__pending[hidden] {
    display: none !important;
}

/* 1.0.11-r28: canonical structural-surface normalization.
   Large layout sections inside the one real application card are no longer
   decorative mint/grey cards. Semantic state surfaces remain intentionally colored. */
:root {
    --ui-surface-main: #ffffff;
    --ui-surface-control: #ffffff;
    --ui-surface-info: #edf8f3;
    --ui-border: #dce8e4;
    --ui-divider: #e4ece9;
    --ui-text-secondary: #61706b;
    --ui-control-muted: #52615d;
    --ui-semantic-success-bg: #e5f5e9;
    --ui-semantic-warning-bg: #fff1c7;
    --ui-semantic-error-bg: #fff3f3;
    --ui-semantic-inactive-bg: #edf0f3;
}

/* Identity remains a useful grouping boundary, but not a large tinted surface. */
.identity {
    border-color: var(--wt-success-border, var(--ui-border));
    background: var(--wt-surface, var(--ui-surface-main));
    box-shadow: none;
}

/* Navigation is a row of controls, not one full-width green slab. */
.module-tabs {
    gap: 8px;
    padding: 0;
    background: transparent;
}

.module-tabs__button {
    border: 1px solid var(--wt-success-border, var(--ui-border));
    color: var(--wt-muted, var(--ui-control-muted));
    background: var(--wt-surface, var(--ui-surface-control));
}

.module-tabs__button--active {
    border-color: var(--wt-success-border, #9fc9bd);
    color: var(--wt-success-text, var(--brand-green-dark));
    background: var(--wt-surface, var(--ui-surface-control));
    box-shadow: inset 0 -3px 0 var(--wt-success-border, var(--brand-green));
}

/* Selector is normal page content. The select itself remains a white control. */
.employee-picker {
    padding: 0 0 20px;
    border: 0;
    border-bottom: 1px solid var(--wt-success-border, var(--ui-divider));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Main modules are sections of .card rather than nested tinted cards. */
.shift,
.operations,
.monthly-ledger,
.admin-workspace,
.director-finance {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.shift,
.operations,
.monthly-ledger,
.admin-workspace,
.director-finance {
    padding-top: 20px;
    border-top: 1px solid var(--wt-success-border, var(--ui-divider));
}

/* Nested functional groups keep a boundary, but use a neutral white surface. */
.expediter-payroll,
.mileage-panel {
    border-color: var(--wt-success-border, var(--ui-border));
    background: var(--wt-surface, var(--ui-surface-main));
    box-shadow: none;
}

/* Compact informational surfaces remain semantic, not structural. */
.operation-form__rule,
.modal-operation-summary {
    background: var(--wt-success-soft, var(--ui-surface-info));
}

/* One normal-state neutral family instead of mixed cold greys. */
.note,
.employee-picker p,
.shift__label,
.shift__intervals-title,
.section-label,
.current-shifts__feedback,
.current-shifts__empty {
    color: var(--wt-muted, var(--ui-text-secondary));
}

.note,
.shift__summary,
.shift__intervals,
.operation-form,
.operation-history {
    border-color: var(--wt-success-border, var(--ui-divider));
}

/* Do not create a second attention card inside the approval workspace. */
.approval-workspace .operation-approvals {
    background: transparent;
}



/* 1.0.11-r34: Graph Month must not inflate the document width.
   body is a grid and .card is a grid item (min-width:auto by default). */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.card {
    min-width: 0;
    max-width: 100%;
}

/* 1.0.11-r72: journal chooser + operation sheet match shift modal */
.journal-record-chooser-actions {
    display: grid;
    gap: 10px;
    padding: 18px 20px 20px;
}
.journal-record-chooser-actions .select-option {
    width: 100%;
    min-height: 52px;
    font-weight: 700;
}
.journal-record-chooser-cancel {
    margin-top: 6px;
    border-color: var(--wt-error-border, #d7a3a3);
    color: var(--wt-error-text, #8a3030);
    background: var(--wt-error-soft, #fff5f5);
}
html.app-ui body #journal-record-chooser,
html.app-ui body #journal-operation-modal {
    box-sizing: border-box;
    padding: 0;
}
html.app-ui body #journal-record-chooser .journal-shift-modal__sheet > .app-modal__header,
html.app-ui body #journal-operation-modal .journal-shift-modal__sheet > .app-modal__header {
    margin: 0;
    padding-right: 16px;
    padding-left: 16px;
}
/* 1.0.11-r73: journal operation fields follow operations hidden contract */
#journal-operation-scope-field[hidden],
#journal-operation-payment-field[hidden],
#journal-operation-description-field[hidden],
#journal-operation-responsible-field[hidden],
#journal-operation-comment-field[hidden],
#journal-operation-unavailable-field[hidden],
#journal-operation-unavailable-reason-field[hidden],
#journal-operation-rule[hidden] {
    display: none !important;
}

/* 1.0.11-r74 journal ops parity */
#journal-operation-photos-field[hidden],
#journal-mileage-fields[hidden],
#journal-operation-amount-field[hidden],
#journal-operation-comment-field[hidden] {
    display: none !important;
}

/* 1.0.11-r75 journal preview stable */
#journal-operation-photo-previews .file-preview,
#journal-mileage-start-photo-previews .file-preview,
#journal-mileage-end-photo-previews .file-preview {
    position: relative;
}

/* 1.0.11-r76 journal captions stable */
.file-preview__caption {
    display: block;
    padding: 6px 5px;
    border-top: 1px solid var(--wt-info-border, #dfe5eb);
    color: var(--wt-success-text, var(--brand-green-dark, #174a44));
    background: var(--wt-surface, #ffffff);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}
html.browser-ui body #journal-operation-modal {
    align-items: center;
    padding: 16px;
}
html.browser-ui body #journal-operation-modal .journal-shift-modal__sheet {
    width: min(100%, 560px);
    height: min(82vh, 760px);
    max-height: min(82vh, 760px);
}

/* 1.0.11-r78: keep journal fields at their natural height in the fixed sheet. */
#journal-operation-form {
    align-content: start;
    grid-auto-rows: max-content;
}

/* r81: durable outbox status; IDs never force horizontal scrolling. */
.direct-queue { margin: 12px 16px; padding: 12px 16px; border: 1px solid var(--wt-success-border, #cbdad7); border-radius: 12px; background: var(--wt-success-soft, #f5faf8); color: var(--wt-success-text, #194c47); }
.direct-queue summary { cursor: pointer; font-weight: 700; }
.direct-queue p, .direct-queue li { font-size: 14px; line-height: 1.5; }
.direct-queue ol { padding-left: 20px; }
.direct-queue li { padding: 10px 0; overflow-wrap: anywhere; }
.direct-queue small { display: block; }
.direct-queue button { margin-top: 8px; width: 100%; white-space: normal; }
.direct-queue[hidden] { display: none !important; }

.browser-read-only.own-offline-capture .operation-form:not([hidden]) { display: grid !important; }

/* UI standard phase 2: shared action colors; keep established control geometry. */
:root { --ui-action-bg:var(--brand-green-dark); --ui-action-hover:var(--brand-green-deep); --ui-action-text:#ffffff; --ui-danger-text:#7b3131; --ui-danger-border:#d7abab; --ui-warning-text:#775900; }
:is(.admin-secondary-button,.modal-button,.operation-card__button,.journal-record-chooser-cancel) { color: var(--wt-success-text, var(--brand-green-dark)); background: var(--wt-surface, var(--ui-surface-control)); border-color: var(--wt-success-border, var(--brand-border)); }
@media (hover: hover) and (pointer: fine) {
:is(.admin-secondary-button,.modal-button,.operation-card__button,.journal-record-chooser-cancel):hover:not(:disabled) { color: var(--wt-success-text, var(--brand-green-dark)); background: var(--wt-success-soft, var(--ui-surface-info)); border-color: var(--wt-success-border, var(--brand-green)); }
}
:is(.admin-primary-button,.shift__button,.operation-form__submit,.modal-button--primary,.operation-card__button--confirm,.operation-card__button--admin) { color: var(--wt-on-accent, var(--ui-action-text)); background: var(--wt-success-solid, var(--ui-action-bg)); border-color: var(--wt-success-border, var(--ui-action-bg)); }
:is(.admin-primary-button,.shift__button,.operation-form__submit,.modal-button--primary,.operation-card__button--confirm,.operation-card__button--admin):is(:focus-visible,:active):not(:disabled) { color: var(--wt-on-accent, var(--ui-action-text)); background: var(--wt-success-solid, var(--ui-action-hover)); border-color: var(--wt-success-border, var(--ui-action-hover)); }
@media (hover: hover) and (pointer: fine) {
:is(.admin-primary-button,.shift__button,.operation-form__submit,.modal-button--primary,.operation-card__button--confirm,.operation-card__button--admin):hover:not(:disabled) { color: var(--wt-on-accent, var(--ui-action-text)); background: var(--wt-success-solid, var(--ui-action-hover)); border-color: var(--wt-success-border, var(--ui-action-hover)); }
}
:is(.admin-secondary-button--danger,.modal-button--danger,.operation-card__button--danger) { color: var(--wt-error-text, var(--ui-danger-text)); background: var(--wt-error-soft, var(--ui-semantic-error-bg)); border-color: var(--wt-error-border, var(--ui-danger-border)); }
:is(.admin-secondary-button--danger,.modal-button--danger,.operation-card__button--danger):is(:focus-visible,:active):not(:disabled) { color: var(--wt-error-text, var(--ui-danger-text)); background: var(--wt-error-soft, var(--ui-semantic-error-bg)); border-color: var(--wt-error-border, var(--ui-danger-text)); }
@media (hover: hover) and (pointer: fine) {
:is(.admin-secondary-button--danger,.modal-button--danger,.operation-card__button--danger):hover:not(:disabled) { color: var(--wt-error-text, var(--ui-danger-text)); background: var(--wt-error-soft, var(--ui-semantic-error-bg)); border-color: var(--wt-error-border, var(--ui-danger-text)); }
}
:is(.admin-primary-button,.admin-secondary-button,.shift__button,.operation-form__submit,.modal-button,.operation-card__button,.journal-record-chooser-cancel):focus-visible { outline: 2px solid var(--wt-success-border, var(--brand-green)); outline-offset: 2px; }
:is(.admin-primary-button,.admin-secondary-button,.shift__button,.operation-form__submit,.modal-button,.operation-card__button,.journal-record-chooser-cancel):disabled { opacity:.55; cursor:not-allowed; box-shadow: none; transform:none; }
.journal-record-chooser-cancel { border-color: var(--wt-success-border, var(--brand-border)); color: var(--wt-success-text, var(--brand-green-dark)); background: var(--wt-surface, var(--ui-surface-control)); }
.offline-banner,.offline-banner--warning,.shift__feedback--pending,.operation-form__feedback--pending,.current-shift-card__pending,.operations__pending { color: var(--wt-warning-text, var(--ui-warning-text)); background: var(--wt-warning-soft, var(--ui-semantic-warning-bg)); }
.offline-banner--success { color: var(--wt-success-text, var(--brand-green-dark)); background: var(--wt-success-soft, var(--ui-semantic-success-bg)); }
.offline-banner--problem { color: var(--wt-error-text, var(--ui-danger-text)); background: var(--wt-error-soft, var(--ui-semantic-error-bg)); border-color: var(--wt-error-border, var(--ui-danger-border)); }
.direct-queue { color: var(--wt-success-text, var(--brand-green-dark)); background: var(--wt-success-soft, var(--ui-surface-info)); border-color: var(--wt-success-border, var(--ui-border)); }

/* UI standard: regular form fields; specialized selectors and uploads keep geometry. */
:root { --ui-field-radius:14px; --ui-field-padding:10px 12px; --ui-field-height:44px; }
:is(.operation-form,.company-purchase-form,.admin-form,#operation-action-form,#shift-correction-form,#shift-cancel-form,#mileage-action-form) :is(input:not([type]),input[type="text"],input[type="number"],input[type="password"],input[type="email"],input[type="tel"],textarea) { box-sizing:border-box; width:100%; min-width:0; min-height:var(--ui-field-height); padding:var(--ui-field-padding); border: 1px solid var(--wt-success-border, var(--ui-border)); border-radius: var(--ui-field-radius); color: var(--wt-text, var(--brand-text)); background: var(--wt-surface, var(--ui-surface-control)); font:inherit; }
:is(.operation-form,.company-purchase-form,.admin-form,#operation-action-form,#shift-correction-form,#shift-cancel-form,#mileage-action-form) :is(input,textarea):focus-visible { outline: 2px solid var(--wt-success-border, var(--brand-green)); outline-offset: 2px; }
:is(.operation-form,.company-purchase-form,.admin-form,#operation-action-form,#shift-correction-form,#shift-cancel-form,#mileage-action-form) :is(input,textarea):disabled { background: var(--wt-surface-alt, var(--ui-semantic-inactive-bg)); color: var(--wt-muted, var(--ui-control-muted)); cursor:not-allowed; }
.field-error,.shift__feedback--error,.operation-form__feedback--error,.monthly-ledger__feedback--error,.admin-workspace__feedback--error { color: var(--wt-error-text, var(--ui-danger-text)); }
.field-error { margin-top:8px; font-size:13px; line-height:1.4; }

/* UI standard: monthly financial cards, preserving signed metric roles and layout. */
.monthly-detail__summary > [data-monthly-metric] { padding:16px; border: 1px solid var(--wt-success-border, var(--ui-border)); border-radius: 16px; background: var(--wt-surface, var(--ui-surface-main)); box-shadow: none; }
.monthly-detail__summary > [data-monthly-metric] span { color: var(--wt-muted, var(--ui-text-secondary)); font-size:13px; font-weight:400; letter-spacing:normal; text-transform:none; }
.monthly-detail__summary > [data-monthly-metric] strong { color: var(--wt-text, var(--brand-text)); font-size:20px; font-variant-numeric:tabular-nums; }
.monthly-detail__summary > :is([data-monthly-metric="credit"],[data-monthly-metric="expense-total-credit"],[data-monthly-metric="balance"]) { background: var(--wt-success-soft, var(--ui-semantic-success-bg)); border-color: var(--wt-success-border, var(--brand-border)); }
.monthly-detail__summary > :is([data-monthly-metric="credit"],[data-monthly-metric="expense-total-credit"],[data-monthly-metric="balance"]) strong { color: var(--wt-success-text, var(--brand-green-dark)); }
.monthly-detail__summary > :is([data-monthly-metric="debit"],[data-monthly-metric="expense-total"],[data-monthly-metric="balance"].monthly-detail__balance--negative) { background: var(--wt-error-soft, var(--ui-semantic-error-bg)); border-color: var(--wt-error-border, var(--ui-danger-border)); box-shadow: none; }
.monthly-detail__summary > :is([data-monthly-metric="debit"],[data-monthly-metric="expense-total"],[data-monthly-metric="balance"].monthly-detail__balance--negative) strong { color: var(--wt-error-text, var(--ui-danger-text)); }
.expediter-payroll__balance-box { border-radius: 16px; border-color: var(--wt-success-border, var(--brand-border)); background: var(--wt-success-soft, var(--ui-semantic-success-bg)); box-shadow: none; }
.expediter-payroll__balance-box > strong { color: var(--wt-success-text, var(--brand-green-dark)); font-variant-numeric:tabular-nums; }
.expediter-payroll__balance-box--negative { border-color: var(--wt-error-border, var(--ui-danger-border)); background: var(--wt-error-soft, var(--ui-semantic-error-bg)); box-shadow: none; }
.expediter-payroll__balance-box--negative > strong { color: var(--wt-error-text, var(--ui-danger-text)); }

/* Zero is neutral; financial direction is only present for non-zero balances. */
.monthly-detail__summary > [data-monthly-metric="balance"].monthly-detail__balance--zero,
.expediter-payroll__balance-box--zero { background: var(--wt-surface, var(--ui-surface-main)); border-color: var(--wt-success-border, var(--ui-border)); box-shadow: none; }
.monthly-detail__summary > [data-monthly-metric="balance"].monthly-detail__balance--zero strong,
.expediter-payroll__balance-box--zero > strong { color: var(--wt-muted, var(--ui-control-muted)); }

/* UI standard: remaining journal, employee and notification surfaces. */
.journal-day,.employee-admin-card,.notification-card,.pending-bindings { border-color: var(--wt-success-border, var(--ui-border)); border-radius: 16px; background: var(--wt-surface, var(--ui-surface-main)); box-shadow: none; }
.employee-admin-card,.notification-card { padding:16px; }
.journal-day__heading,.journal-employee-group h4,.pending-binding-card { background: var(--wt-success-soft, var(--ui-surface-info)); border-color: var(--wt-success-border, var(--ui-divider)); color: var(--wt-success-text, var(--brand-green-dark)); }
.journal-event--shift { background: var(--wt-surface, var(--ui-surface-main)); border-color: var(--wt-success-border, var(--ui-border)); }
.journal-event__main small,.pending-binding-card span,.employee-admin-card__telegram,.notification-card__message,.notification-card__heading time,.notification-center__feedback,.notification-center__empty { color: var(--wt-muted, var(--ui-text-secondary)); }
.employee-admin-card--inactive,.employee-inactive { background: var(--wt-surface-alt, var(--ui-semantic-inactive-bg)); border-color: var(--wt-success-border, var(--ui-border)); opacity:1; }
.operation-card__status--confirmed { background: var(--wt-success-soft, var(--ui-semantic-success-bg)); color: var(--wt-success-text, var(--brand-green-dark)); }
.operation-card__status--inactive { background: var(--wt-surface-alt, var(--ui-semantic-inactive-bg)); color: var(--wt-muted, var(--ui-control-muted)); }
.notification-card--unread { background: var(--wt-success-soft, var(--ui-surface-info)); border-color: var(--wt-success-border, var(--brand-border)); box-shadow: inset 4px 0 0 var(--wt-success-border, var(--brand-green)); }
.notification-center__tab { background: var(--wt-surface, var(--ui-surface-main)); color: var(--wt-muted, var(--ui-control-muted)); }
.notification-center__tab--active { color: var(--wt-success-text, var(--brand-green-dark)); box-shadow: inset 0 -3px 0 var(--wt-success-border, var(--brand-green)); }
.notification-card__open { color: var(--wt-on-accent, var(--ui-action-text)); background: var(--wt-success-solid, var(--ui-action-bg)); }
@media (hover: hover) and (pointer: fine) {
.notification-card__open:hover:not(:disabled) { background: var(--wt-success-solid, var(--ui-action-hover)); }
}
.notification-card__read,.notification-center__mark-all { color: var(--wt-success-text, var(--brand-green-dark)); background: var(--wt-surface, var(--ui-surface-main)); border: 1px solid var(--wt-success-border, var(--brand-border)); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
.notification-card__read:hover:not(:disabled),
.notification-center__mark-all:hover:not(:disabled) { background: var(--wt-success-soft, var(--ui-surface-info)); }
}
:is(.notification-card__open,.notification-card__read,.notification-center__mark-all,.notification-center__tab):focus-visible { outline: 2px solid var(--wt-success-border, var(--brand-green)); outline-offset: 2px; }

/* Earnings are positive finance; current positive balance is the primary summary. */
.monthly-detail__summary > [data-monthly-metric="hourly"] { background: var(--wt-success-soft, var(--ui-semantic-success-bg)); border-color: var(--wt-success-border, var(--brand-border)); }
.monthly-detail__summary > [data-monthly-metric="hourly"] strong { color: var(--wt-success-text, var(--brand-green-dark)); }
.monthly-detail__summary > [data-monthly-metric="balance"]:not(.monthly-detail__balance--negative):not(.monthly-detail__balance--zero),
.expediter-payroll__balance-box:not(.expediter-payroll__balance-box--negative):not(.expediter-payroll__balance-box--zero) { background: var(--wt-success-soft, var(--brand-mint-soft)); border: 2px solid var(--wt-success-border, var(--brand-green)); }
.monthly-detail__summary > [data-monthly-metric="balance"]:not(.monthly-detail__balance--negative):not(.monthly-detail__balance--zero) strong { color: var(--wt-success-text, var(--brand-green-dark)); font-size:24px; }

/* Browser metric rows: long captions grow above bottom-aligned values. */
html.browser-ui body :is(.monthly-detail__summary,.monthly-ledger__totals,.expediter-payroll__grid,.mileage-summary,.payroll-totals,.statement-totals) > div { display:flex; flex-direction:column; gap:6px; }
html.browser-ui body :is(.monthly-detail__summary,.monthly-ledger__totals,.expediter-payroll__grid,.mileage-summary,.payroll-totals,.statement-totals) > div > strong { margin-top:auto; padding-top:0; }

/* Shared navigation glyphs, independent of font metrics. */
.date-picker__nav,.director-month-control button { display:grid; place-items:center; padding:0; }
.period-nav-icon { display:block; width:16px; height:16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Keep each sheet's scroll/safe-area contract; normalize header content gutters. */
html.app-ui body .app-modal .app-modal__header { padding-left:20px; padding-right:20px; padding-bottom:14px; }
html.app-ui body #photo-source-modal .app-modal__header { padding:4px 4px 10px; }
html.browser-ui body :is(#employee-editor-modal,#employee-role-help-modal,#journal-record-chooser,#journal-operation-modal,#journal-shift-modal,#shift-cancel-modal,#date-modal) .app-modal__header { padding:18px 20px; }

html.app-ui body :is(#journal-record-chooser,#journal-operation-modal,#journal-shift-modal) .journal-shift-modal__sheet > .app-modal__header { padding-left:20px; padding-right:20px; }

/* Director journal uses the same layout with only applicable filters */
.journal-filters > [hidden] { display: none !important; }

/* A single reader action spans the complete filter row on every viewport */
html body .journal-workspace--reader .journal-filter-actions {
    grid-template-columns: minmax(0, 1fr);
}

/* Push subscription inventory shares employee-card spacing and semantic theme tokens */
.employee-push {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--wt-success-border, var(--ui-divider));
    color: var(--wt-text, var(--ui-text-primary));
}
.employee-push summary {
    cursor: pointer;
    min-height: 44px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.employee-push summary:focus-visible {
    outline: 2px solid var(--wt-success-text, var(--brand-green-dark));
    outline-offset: 4px;
    border-radius: 4px;
}
.employee-push__status {
    display: inline-block;
    margin-inline-start: 12px;
    color: var(--wt-muted, var(--ui-text-secondary));
}
.employee-push__status--active {
    color: var(--wt-success-text, var(--brand-green-dark));
}
.employee-push .employee-push__note {
    margin: 0 0 12px;
    color: var(--wt-muted, var(--ui-text-secondary));
    font-size: 13px;
}
.employee-push__device {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid var(--wt-success-border, var(--ui-divider));
    overflow-wrap: anywhere;
    font-size: 14px;
}
.employee-push__device span {
    color: var(--wt-muted, var(--ui-text-secondary));
}
@media (max-width: 600px) {
    .employee-push__status { display: block; margin-inline-start: 0; }
}

/* Correction sheets share a stationary header and an independently scrolling body. */
.app-modal__sheet--editor {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.app-modal__sheet--editor > .app-modal__header {
    flex: 0 0 auto;
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--wt-success-border, #e0e9e6);
    background: var(--wt-surface, #ffffff);
}
.app-modal__body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 18px 20px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 18px;
}
html.app-ui body .app-modal__sheet--editor {
    padding: 0;
    overflow: hidden;
}
html.app-ui body .app-modal__sheet--editor > .app-modal__header {
    position: relative;
    margin: 0;
}
html.app-ui body .app-modal__sheet--editor > .app-modal__body {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}