* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f5f8;
    color: #16243a;
}

.topbar {
    height: 58px;
    background: #0b2850;
    display: flex;
    align-items: center;
    padding: 0 18px;
    color: white;
}

.brand {
    display: flex;
    align-items: center;
    min-width: 220px;
    font-weight: 700;
}

.brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    margin-right: 10px;
}

.nav {
    display: flex;
    height: 100%;
    align-items: stretch;
    overflow-x: auto;
}

.nav a {
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #dbe7f7;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.nav a:hover,
.nav a.active {
    background: #173a69;
    color: white;
}

.userbox {
    margin-left: auto;
    padding-left: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.user-name {
    font-size: 13px;
    font-weight: 700;
}

.user-role {
    font-size: 11px;
    color: #aac0dd;
}

.logout {
    color: white;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid #4b6689;
    padding: 7px 10px;
    border-radius: 5px;
}

.content {
    padding: 26px;
    max-width: 1500px;
    margin: auto;
}

.page-title {
    margin: 0 0 6px;
    font-size: 27px;
}

.page-subtitle {
    margin: 0 0 24px;
    color: #69768a;
}

.cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.card {
    background: white;
    border: 1px solid #dde3ea;
    border-radius: 9px;
    padding: 20px;
}

.card-label {
    color: #6b788c;
    font-size: 13px;
}

.card-value {
    margin-top: 8px;
    font-size: 30px;
    font-weight: 700;
    color: #0b2850;
}

.panel {
    margin-top: 20px;
    background: white;
    border: 1px solid #dde3ea;
    border-radius: 9px;
    padding: 22px;
}

.module-box {
    min-height: 260px;
}

.role-badge {
    display: inline-block;
    background: #eaf2ff;
    color: #174d8c;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.pending {
    max-width: 600px;
    margin: 80px auto;
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #dde3ea;
}

@media (max-width: 1000px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .userbox .identity {
        display: none;
    }
}

.action-row {
    display: flex;
    gap: 10px;
}

.worker-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

.worker-tabs a {
    padding: 10px 15px;
    border-radius: 6px;
    background: white;
    border: 1px solid #dde3ea;
    color: #536176;
    text-decoration: none;
}

.worker-tabs a.active {
    background: #0b2850;
    color: white;
    border-color: #0b2850;
}

.worker-tabs span {
    margin-left: 6px;
    opacity: .7;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: #f7faff;
}

.worker-badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.worker-badge.internal {
    background: #e8f2ff;
    color: #18568f;
}

.worker-badge.external {
    background: #f1edff;
    color: #57409a;
}

.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 5px;
}

.status-neutral {
    background: #8b98a9;
}

.access-enabled {
    color: #17733a;
}

.access-none {
    color: #8b98a9;
}

.form-card {
    max-width: 1000px;
    background: white;
    border: 1px solid #dde3ea;
    border-radius: 9px;
    padding: 24px;
}

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

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.field small,
.muted {
    color: #7b8797;
}

.full-width {
    grid-column: 1 / -1;
}

.form-control {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #cdd6df;
    border-radius: 6px;
    background: white;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.worker-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.worker-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #0b2850;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.worker-meta {
    color: #6c7889;
}

.worker-header-status {
    margin-left: auto;
}

.worker-detail-tabs {
    display: flex;
    gap: 22px;
    margin: 24px 0 6px;
    border-bottom: 1px solid #dfe4ea;
}

.worker-detail-tabs span {
    padding: 12px 2px;
    color: #68768a;
}

.worker-detail-tabs .active {
    color: #0b2850;
    border-bottom: 3px solid #1769aa;
    font-weight: 700;
}

.worker-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.data-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f4;
}

.data-row span {
    color: #748094;
}

.compliance-placeholder {
    color: #67768a;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .form-grid,
    .worker-detail-grid {
        grid-template-columns: 1fr;
    }

    .action-row {
        flex-direction: column;
    }
}


/* WORKER_COMPLIANCE_UI */

.worker-detail-tabs a {
    padding: 12px 2px;
    color: #68768a;
    text-decoration: none;
}

.worker-detail-tabs a.active {
    color: #0b2850;
    border-bottom: 3px solid #1769aa;
    font-weight: 700;
}

.documents-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 24px 0 18px;
}

.documents-toolbar h2 {
    margin: 0 0 5px;
}

.documents-toolbar p {
    margin: 0;
    color: #6d798b;
}

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

.requirement-card {
    background: white;
    border: 1px solid #dce2e9;
    border-left-width: 5px;
    border-radius: 9px;
    padding: 20px;
}

.status-card-green {
    border-left-color: #2b9348;
}

.status-card-yellow {
    border-left-color: #e1a700;
}

.status-card-red {
    border-left-color: #d63b3b;
}

.status-card-gray {
    border-left-color: #8b98a9;
}

.requirement-card-header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
}

.requirement-card h3 {
    margin: 0;
    font-size: 19px;
}

.requirement-category {
    margin-top: 4px;
    font-size: 12px;
    color: #8290a2;
}

.status-pill {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.status-pill-green {
    background: #e7f7ec;
    color: #187239;
}

.status-pill-yellow {
    background: #fff6d8;
    color: #8d6900;
}

.status-pill-red {
    background: #fdeaea;
    color: #a52d2d;
}

.status-pill-gray {
    background: #edf0f3;
    color: #677484;
}

.requirement-reason {
    margin: 16px 0;
    color: #5f6e81;
}

.document-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.document-data div {
    padding: 9px;
    background: #f7f9fb;
    border-radius: 6px;
}

.document-data span {
    display: block;
    color: #7d8999;
    font-size: 11px;
}

.document-data strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
}

.document-files {
    margin-top: 14px;
}

.document-file {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #edf0f3;
    padding: 10px 0;
    font-size: 13px;
}

.document-file a {
    margin-left: 10px;
}

.document-present {
    color: #287846;
    font-size: 13px;
}

.requirement-actions {
    margin-top: 16px;
}

.big-status {
    font-size: 20px;
    font-weight: 700;
    margin: 12px 0;
}

.status-text-green {
    color: #23763d;
}

.status-text-yellow {
    color: #9a7300;
}

.status-text-red {
    color: #b52d2d;
}

.status-text-gray {
    color: #6f7a88;
}

.compliance-reasons {
    margin: 13px 0 20px;
    line-height: 1.6;
    color: #5c697b;
}

.status-green {
    background: #2b9348;
}

.status-yellow {
    background: #e1a700;
}

.status-red {
    background: #d63b3b;
}

.status-gray {
    background: #8b98a9;
}

.worker-status-cell {
    min-width: 220px;
}

.worker-status-cell small {
    display: block;
    margin-top: 4px;
    max-width: 270px;
    color: #7b8797;
    font-weight: normal;
}

.requirement-form-field {
    margin-bottom: 17px;
}

.field-error {
    color: #b12e2e;
    font-size: 12px;
    margin-top: 4px;
}

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

    .documents-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

.worker-edit-button {
    margin-left: 10px;
}

.audit-list {
    display: flex;
    flex-direction: column;
}

.audit-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #edf0f3;
}

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

.audit-date {
    color: #718096;
    font-size: 13px;
}

.audit-content strong {
    display: block;
    margin-bottom: 4px;
}

.audit-user {
    color: #69778a;
    font-size: 13px;
}

.audit-type {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 7px;
    background: #eef2f7;
    border-radius: 4px;
    color: #66758a;
    font-size: 10px;
}

@media (max-width: 700px) {
    .audit-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

.employment-list {
    display: flex;
    flex-direction: column;
}

.employment-record {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) minmax(220px, 1fr) 180px;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #edf0f3;
}

.employment-record:last-child {
    border-bottom: 0;
}

.employment-record h3 {
    margin: 0 0 5px;
}

.employment-secondary {
    color: #738094;
    font-size: 13px;
}

.employment-dates {
    display: flex;
    gap: 30px;
}

.employment-dates span {
    display: block;
    color: #8490a0;
    font-size: 11px;
}

.employment-dates strong {
    display: block;
    margin-top: 3px;
}

.engagement-pill {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.engagement-active {
    background: #e6f6eb;
    color: #19713a;
}

.engagement-warning {
    background: #fff4d1;
    color: #8b6700;
}

.engagement-expired {
    background: #fdeaea;
    color: #a52c2c;
}

.engagement-future {
    background: #eaf2ff;
    color: #235f9e;
}

.employment-notes {
    grid-column: 1 / -1;
    color: #6d798b;
    font-size: 13px;
    background: #f8fafc;
    padding: 10px 12px;
    border-radius: 6px;
}

@media (max-width: 900px) {
    .employment-record {
        grid-template-columns: 1fr;
    }
}

.dashboard-cards {
    margin-bottom: 20px;
}

.dashboard-stat {
    text-decoration: none;
    color: inherit;
}

a.dashboard-stat:hover {
    border-color: #a9bad0;
    box-shadow: 0 5px 14px rgba(15, 35, 71, .07);
}

.stat-note {
    margin-top: 8px;
    color: #8490a1;
    font-size: 12px;
}

.stat-critical {
    border-top: 4px solid #d63b3b;
}

.stat-critical .card-value {
    color: #b52d2d;
}

.stat-warning {
    border-top: 4px solid #e1a700;
}

.stat-warning .card-value {
    color: #947000;
}

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

.dashboard-grid + .dashboard-grid {
    margin-top: 20px;
}

.dashboard-panel {
    margin-top: 0;
    padding: 0;
    overflow: hidden;
}

.dashboard-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid #edf0f3;
}

.dashboard-panel-header h2 {
    margin: 0 0 4px;
    font-size: 18px;
}

.dashboard-panel-header p {
    margin: 0;
    color: #7a8798;
    font-size: 12px;
}

.alert-counter {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.alert-red {
    background: #fdeaea;
    color: #a92e2e;
}

.alert-yellow {
    background: #fff4ce;
    color: #886600;
}

.dashboard-alert-list {
    display: flex;
    flex-direction: column;
}

.dashboard-alert-row {
    display: grid;
    grid-template-columns: 18px minmax(150px, 1fr) minmax(180px, 1.4fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    color: #17263c;
    text-decoration: none;
    border-bottom: 1px solid #f0f2f5;
}

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

.dashboard-alert-row:hover {
    background: #f8fafc;
}

.dashboard-alert-person strong {
    display: block;
    font-size: 13px;
}

.dashboard-alert-person small {
    display: block;
    margin-top: 3px;
    color: #8290a1;
}

.dashboard-alert-reason {
    color: #69778a;
    font-size: 12px;
    line-height: 1.4;
}

.dashboard-arrow {
    color: #9aa6b5;
    font-size: 23px;
}

.dashboard-empty {
    padding: 26px 20px;
    color: #788596;
}

.success-empty {
    color: #247343;
}

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

@media (max-width: 650px) {
    .dashboard-alert-row {
        grid-template-columns: 16px 1fr 18px;
    }

    .dashboard-alert-reason {
        grid-column: 2 / 3;
    }
}

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

.project-card {
    display: block;
    background: white;
    border: 1px solid #dce3ea;
    border-radius: 9px;
    padding: 20px;
    color: #17263c;
    text-decoration: none;
}

.project-card:hover {
    border-color: #a8bbd2;
    box-shadow: 0 6px 18px rgba(15, 35, 71, .07);
}

.project-card-header,
.project-detail-heading,
.crew-card-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.project-card h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.project-code {
    color: #1769aa;
    font-size: 12px;
    font-weight: 700;
}

.project-status {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.status-project-planned {
    background: #eaf2ff;
    color: #235f9e;
}

.status-project-active {
    background: #e6f6eb;
    color: #19713a;
}

.status-project-on_hold {
    background: #fff4d1;
    color: #8b6700;
}

.status-project-completed,
.status-project-archived {
    background: #edf0f3;
    color: #667383;
}

.project-card-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.project-card-data div {
    background: #f8fafc;
    padding: 10px;
    border-radius: 6px;
}

.project-card-data span {
    display: block;
    color: #8793a2;
    font-size: 11px;
}

.project-card-data strong {
    display: block;
    margin-top: 3px;
}

.project-manager {
    margin-top: 16px;
    color: #718095;
    font-size: 12px;
}

.project-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.project-summary-value {
    margin-top: 7px;
    font-size: 17px;
    font-weight: 700;
}

.crew-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 16px;
}

.crew-card {
    background: white;
    border: 1px solid #dce3ea;
    border-radius: 9px;
    padding: 18px;
}

.crew-card h3 {
    margin: 0;
}

.crew-foreman {
    margin: 15px 0;
    padding: 10px;
    background: #f8fafc;
    border-radius: 6px;
}

.crew-foreman span {
    display: block;
    color: #8793a2;
    font-size: 11px;
}

.crew-foreman strong {
    display: block;
    margin-top: 3px;
}

.crew-worker-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 0;
    border-top: 1px solid #edf0f3;
    font-size: 13px;
}

.crew-worker-row small {
    color: #7c8999;
}

@media (max-width: 1000px) {
    .project-grid,
    .crew-grid {
        grid-template-columns: 1fr;
    }

    .project-summary-grid {
        grid-template-columns: 1fr;
    }
}

.timeline-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.timeline-week-title {
    padding: 9px 14px;
    background: #0b2850;
    color: white;
    border-radius: 7px;
    font-weight: 700;
}

.timeline-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin: 20px 0;
    padding: 15px;
    background: white;
    border: 1px solid #dde3ea;
    border-radius: 9px;
}

.timeline-project-form {
    min-width: 320px;
}

.timeline-project-form label {
    display: block;
    margin-bottom: 5px;
    color: #758296;
    font-size: 12px;
    font-weight: 700;
}

.timeline-navigation {
    display: flex;
    gap: 8px;
}

.timeline-project-info {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.timeline-project-info span {
    color: #778598;
}

.timeline-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dce2e9;
    border-radius: 9px;
    background: white;
}

.timeline-table {
    width: 100%;
    min-width: 1250px;
    border-collapse: collapse;
    table-layout: fixed;
}

.timeline-table th,
.timeline-table td {
    border-right: 1px solid #e7ebf0;
    border-bottom: 1px solid #e7ebf0;
}

.timeline-table th:last-child,
.timeline-table td:last-child {
    border-right: 0;
}

.timeline-table thead th {
    padding: 10px 6px;
    background: #f7f9fb;
    text-align: center;
}

.timeline-worker-column {
    width: 260px;
    text-align: left !important;
    padding-left: 15px !important;
}

.timeline-table th:not(.timeline-worker-column) {
    width: 140px;
}

.timeline-today {
    background: #eaf3ff !important;
}

.timeline-day-name {
    font-size: 12px;
    color: #657388;
    font-weight: 700;
}

.timeline-day-date {
    margin-top: 3px;
    color: #182a44;
    font-size: 14px;
}

.timeline-worker-cell {
    padding: 12px;
    vertical-align: top;
    background: #fbfcfd;
}

.timeline-worker-name {
    display: flex;
    align-items: center;
}

.timeline-worker-meta {
    margin-top: 5px;
    color: #657388;
    font-size: 11px;
    line-height: 1.4;
}

.timeline-worker-company {
    margin-top: 5px;
    color: #8a96a5;
    font-size: 11px;
}

.timeline-cell {
    position: relative;
    min-height: 110px;
    height: 110px;
    padding: 6px;
    vertical-align: top;
}

.timeline-entry {
    margin-bottom: 6px;
    padding: 7px;
    border-radius: 5px;
    border-left: 3px solid #718096;
    background: #f5f7fa;
    font-size: 11px;
}

.timeline-entry-draft {
    border-left-color: #7d8998;
}

.timeline-entry-published {
    border-left-color: #1769aa;
    background: #eef6ff;
}

.timeline-entry-completed {
    border-left-color: #29904a;
    background: #edf9f0;
}

.timeline-entry-cancelled {
    border-left-color: #c34848;
    opacity: .65;
}

.timeline-entry-title {
    font-weight: 700;
    line-height: 1.3;
}

.timeline-entry-time,
.timeline-entry-location {
    margin-top: 3px;
    color: #617086;
}

.timeline-entry-status {
    margin-top: 5px;
    color: #8a96a5;
    font-size: 9px;
    text-transform: uppercase;
}

.timeline-add {
    display: flex;
    width: 25px;
    height: 25px;
    margin: 5px auto 0;
    align-items: center;
    justify-content: center;
    border: 1px dashed #9db0c7;
    border-radius: 5px;
    color: #1769aa;
    text-decoration: none;
    font-size: 18px;
}

.timeline-add:hover {
    background: #eef6ff;
}

.timeline-locked {
    margin-top: 8px;
    text-align: center;
    cursor: help;
}

.timeline-unavailable {
    padding-top: 30px;
    text-align: center;
    color: #c1c8d0;
}

.timeline-empty {
    padding: 40px !important;
    text-align: center;
    color: #6f7c8e;
}

.timeline-assignment-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 1000px;
    margin-bottom: 18px;
}

.timeline-assignment-summary div {
    padding: 12px;
    background: white;
    border: 1px solid #dde3ea;
    border-radius: 7px;
}

.timeline-assignment-summary span {
    display: block;
    color: #8390a0;
    font-size: 11px;
}

.timeline-assignment-summary strong {
    display: block;
    margin-top: 4px;
}

.cannot-plan-card {
    max-width: 650px;
    margin: 50px auto;
    padding: 35px;
    background: white;
    border: 1px solid #f0cccc;
    border-radius: 10px;
    text-align: center;
}

.cannot-plan-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdeaea;
    color: #b42f2f;
    font-size: 30px;
    font-weight: 700;
}

.cannot-plan-reasons {
    margin: 20px 0;
    padding: 15px;
    background: #fff6f6;
    text-align: left;
    color: #8d3535;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .timeline-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .timeline-navigation {
        flex-wrap: wrap;
    }

    .timeline-project-form {
        min-width: 0;
    }

    .timeline-assignment-summary {
        grid-template-columns: 1fr 1fr;
    }
}


/* A1_TIMELINE_STYLE_V2 */

.tl-page-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.tl-scale-switch {
    display: inline-flex;
    padding: 2px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: white;
}

.tl-scale-switch a {
    padding: 5px 10px;
    border-radius: 4px;
    color: #607087;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.tl-scale-switch a.active {
    background: #e8f1ff;
    color: #155ca2;
}

.tl-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 15px;
    margin: 12px 0 8px;
    padding: 8px 10px;
    background: white;
    border: 1px solid #dde3ea;
    border-radius: 7px;
}

.tl-range-form {
    display: flex;
    align-items: end;
    gap: 7px;
}

.tl-range-form label {
    display: block;
    margin-bottom: 2px;
    color: #718096;
    font-size: 9px;
    font-weight: 700;
}

.tl-range-form input[type="date"] {
    height: 30px;
    padding: 3px 6px;
    border: 1px solid #ccd5e0;
    border-radius: 5px;
    background: white;
    font-size: 11px;
}

.tl-quick-range {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.tl-quick-range a {
    padding: 5px 8px;
    border: 1px solid #d6dde6;
    border-radius: 5px;
    color: #53647a;
    background: white;
    text-decoration: none;
    font-size: 10px;
}

.tl-quick-range a:hover {
    background: #f4f7fa;
}

.tl-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px 2px 9px;
    color: #66768a;
    font-size: 9px;
}

.tl-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tl-legend-box {
    width: 14px;
    height: 7px;
    border-radius: 2px;
    display: inline-block;
}

.tl-legend-box.project {
    background:
        repeating-linear-gradient(
            135deg,
            #16bca8 0,
            #16bca8 5px,
            #72e1d3 5px,
            #72e1d3 10px
        );
}

.tl-legend-box.vacation {
    background: #df4a4a;
}

.tl-legend-box.sick {
    background: #8e5cc7;
}

.tl-legend-box.care {
    background: #e09a25;
}

.tl-legend-box.training {
    background: #3e83c7;
}

.tl-legend-box.other {
    background: #7e8997;
}


/* główna plansza */

.tl-board {
    --tl-left-width: 285px;

    position: relative;
    width: 100%;
    max-height: 720px;
    overflow: auto;

    border: 1px solid #d9e0e8;
    border-radius: 7px;
    background: white;

    font-size: 10px;
}


/* nagłówek */

.tl-header {
    position: sticky;
    top: 0;
    z-index: 20;

    display: flex;

    min-width:
        calc(
            var(--tl-left-width)
            + var(--tl-grid-width)
        );

    background: white;
}

.tl-left-header {
    position: sticky;
    left: 0;
    z-index: 25;

    flex: 0 0 var(--tl-left-width);
    width: var(--tl-left-width);

    display: flex;
    align-items: end;

    padding: 7px 10px;

    border-right: 1px solid #d7dee7;
    border-bottom: 1px solid #d7dee7;

    background: #f7f9fb;

    color: #738196;
    font-size: 9px;
    font-weight: 700;
}

.tl-header-track {
    flex: 0 0 var(--tl-grid-width);
    width: var(--tl-grid-width);
}

.tl-month-row,
.tl-week-row,
.tl-unit-row {
    position: relative;
    width: var(--tl-grid-width);
    white-space: nowrap;
}

.tl-month-row {
    height: 22px;
    border-bottom: 1px solid #dce2e9;
    background: #f8fafc;
}

.tl-week-row {
    height: 19px;
    border-bottom: 1px solid #e2e7ed;
    background: #fafbfd;
}

.tl-header-span {
    position: absolute;
    top: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-right: 1px solid #dce2e9;

    color: #607086;
    font-size: 8px;
    font-weight: 700;
}

.tl-unit-row {
    height: 32px;

    display: flex;

    border-bottom: 1px solid #d5dde6;
}

.tl-unit {
    flex: 0 0 var(--tl-col-width);
    width: var(--tl-col-width);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-right: 1px solid #e0e5eb;

    color: #647388;

    font-size: 8px;
}

.tl-unit strong {
    margin-top: 1px;

    color: #27394f;
    font-size: 9px;
}

.tl-unit.weekend {
    background: #fff5f5;
    color: #c16b6b;
}

.tl-unit.today {
    background: #edf5ff;
    color: #145ca4;
}


/* projekt */

.tl-project-group {
    min-width:
        calc(
            var(--tl-left-width)
            + var(--tl-grid-width)
        );
}

.tl-group-row {
    display: flex;
    min-height: 31px;

    background: #f5f7fa;

    border-bottom: 1px solid #dce2e9;
}

.tl-group-row.unassigned {
    background: #f2f3f5;
}

.tl-group-left {
    position: sticky;
    left: 0;
    z-index: 10;

    flex: 0 0 var(--tl-left-width);
    width: var(--tl-left-width);

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;

    border-right: 1px solid #d7dee7;

    background: inherit;
}

.tl-group-left strong {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #26384f;
    font-size: 10px;
}

.tl-group-left small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #8491a1;
    font-size: 8px;
}

.tl-project-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border-radius: 50%;
    background: #14b7a6;
}

.tl-project-dot.gray {
    background: #8995a4;
}

.tl-group-track {
    flex: 0 0 var(--tl-grid-width);
    width: var(--tl-grid-width);

    background-image:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(var(--tl-col-width) - 1px),
            #e5e9ef calc(var(--tl-col-width) - 1px),
            #e5e9ef var(--tl-col-width)
        );
}


/* wiersz pracownika */

.tl-worker-row {
    display: flex;

    min-height: 46px;

    border-bottom: 1px solid #e7ebf0;
}

.tl-worker-row:hover {
    background: #fbfcfe;
}

.tl-worker-left {
    position: sticky;
    left: 0;
    z-index: 9;

    flex: 0 0 var(--tl-left-width);
    width: var(--tl-left-width);

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

    padding: 5px 7px;

    border-right: 1px solid #d7dee7;

    background: white;
}

.tl-worker-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 6px;
}

.tl-worker-main > div {
    min-width: 0;
}

.tl-worker-main strong {
    display: block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #26384d;
    font-size: 10px;
    line-height: 1.2;
}

.tl-worker-main small {
    display: block;

    max-width: 150px;
    margin-top: 2px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #8692a1;
    font-size: 8px;
}

.tl-worker-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.tl-worker-actions a {
    color: #356c9f;
    text-decoration: none;
    font-size: 8px;
    white-space: nowrap;
}

.tl-worker-actions a:hover {
    text-decoration: underline;
}


/* pole kalendarza */

.tl-track {
    position: relative;

    flex: 0 0 var(--tl-grid-width);
    width: var(--tl-grid-width);

    min-height: 46px;

    background-image:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(var(--tl-col-width) - 1px),
            #e5e9ef calc(var(--tl-col-width) - 1px),
            #e5e9ef var(--tl-col-width)
        );
}

.tl-today-line {
    position: absolute;
    top: 0;
    bottom: 0;

    z-index: 6;

    width: 2px;

    background: #1769aa;

    pointer-events: none;
}


/* przydział projektu */

.tl-project-bar {
    position: absolute;

    top: 11px;
    height: 23px;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 3px;

    overflow: hidden;

    border-radius: 3px;

    background:
        repeating-linear-gradient(
            135deg,
            #15bba7 0,
            #15bba7 7px,
            #6ce0d2 7px,
            #6ce0d2 14px
        );

    color: white;

    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.tl-project-bar span {
    padding: 0 6px;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* nieobecności są nad projektem */

.tl-absence-bar {
    position: absolute;

    top: 9px;
    height: 27px;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 4px;

    overflow: hidden;

    border-radius: 4px;

    color: white;
    text-decoration: none;

    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.tl-absence-bar span {
    padding: 0 5px;

    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-absence-vacation {
    background: #df4a4a;
}

.tl-absence-sick {
    background: #8b58c3;
}

.tl-absence-care {
    background: #dc9627;
}

.tl-absence-training {
    background: #3b82c4;
}

.tl-absence-other {
    background: #788695;
}

.tl-absence-bar:hover {
    filter: brightness(.94);
}


/* pusty timeline */

.tl-empty {
    padding: 30px;
    color: #748196;
    text-align: center;
    font-size: 11px;
}


@media (max-width: 900px) {

    .tl-board {
        --tl-left-width: 220px;
    }

    .tl-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .tl-range-form {
        flex-wrap: wrap;
    }

    .tl-worker-actions {
        display: none;
    }

    .tl-worker-main small {
        max-width: 130px;
    }
}


/* A1_TIMELINE_DRAG_PLANNER */

.tl-fast-plan {
    display: flex;
    align-items: end;
    gap: 8px;
    margin: 7px 0 10px;
    padding: 8px 10px;
    border: 1px solid #d7e0ea;
    border-radius: 7px;
    background: #f8fafc;
}

.tl-fast-plan-project {
    width: 280px;
}

.tl-fast-plan-project label {
    display: block;
    margin-bottom: 3px;
    color: #66778d;
    font-size: 9px;
    font-weight: 700;
}

.tl-fast-plan-project .form-control {
    min-height: 31px;
    padding: 4px 7px;
    font-size: 10px;
}

.tl-fast-help {
    align-self: center;
    max-width: 460px;
    margin-left: 4px;
    color: #728196;
    font-size: 9px;
    line-height: 1.4;
}

#tl-drag-toggle.active {
    border-color: #1769aa;
    background: #e8f2ff;
    color: #155d9f;
    font-weight: 700;
}

.tl-drag-mode .tl-track {
    cursor: grab;
}

.tl-drag-mode.tl-is-dragging .tl-track {
    cursor: grabbing;
    user-select: none;
}

.tl-drag-selection {
    position: absolute;
    top: 5px;
    height: 35px;
    z-index: 15;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 2px solid #1769aa;
    border-radius: 4px;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(23, 105, 170, .22) 0,
            rgba(23, 105, 170, .22) 7px,
            rgba(23, 105, 170, .08) 7px,
            rgba(23, 105, 170, .08) 14px
        );

    color: #164f80;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;

    pointer-events: none;
}

.tl-drag-selection.saving {
    opacity: .55;
}

.tl-drag-selection.saved {
    border-color: #0a9e88;

    background:
        repeating-linear-gradient(
            135deg,
            #14bba7 0,
            #14bba7 7px,
            #68dfd0 7px,
            #68dfd0 14px
        );

    color: white;
}

.tl-plan-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;

    max-width: 430px;
    padding: 10px 14px;

    border-radius: 7px;

    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;

    font-size: 11px;
    font-weight: 600;

    transition:
        opacity .15s ease,
        transform .15s ease;
}

.tl-plan-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.tl-plan-toast.ok {
    border: 1px solid #9bd9cb;
    background: #e7f8f3;
    color: #176b59;
}

.tl-plan-toast.error {
    border: 1px solid #efb1b1;
    background: #fff0f0;
    color: #9c3030;
}

@media (max-width: 900px) {
    .tl-fast-plan {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .tl-fast-plan-project {
        width: 100%;
    }

    .tl-fast-help {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }
}


/* A1_OUTLOOK_SYNC_STATUS */

.tl-outlook-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin: 7px 0;
    padding: 7px 10px;

    border: 1px solid #dbe3ec;
    border-radius: 7px;
    background: #ffffff;

    font-size: 10px;
}

.tl-outlook-status-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tl-sync-dot {
    display: inline-block;

    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;
}

.tl-sync-ok {
    background: #17a673;
}

.tl-sync-running {
    background: #e6a400;
}

.tl-sync-error {
    background: #d64545;
}

.tl-sync-idle {
    background: #9ba7b4;
}

.tl-sync-time {
    margin-left: 7px;
    color: #748294;
    font-size: 9px;
}

.tl-sync-form {
    margin: 0;
}

@media (max-width: 750px) {
    .tl-outlook-status {
        align-items: stretch;
        flex-direction: column;
    }

    .tl-outlook-status-main {
        flex-wrap: wrap;
    }
}


/* A1_INLINE_ABSENCE_MODAL */

body.tl-modal-open {
    overflow: hidden;
}

.tl-modal[hidden] {
    display: none;
}

.tl-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.tl-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(20, 32, 46, .45);
}

.tl-modal-card {
    position: relative;
    z-index: 1;

    width: min(
        480px,
        calc(100vw - 30px)
    );

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    padding: 16px;

    border-radius: 9px;

    background: #fff;

    box-shadow:
        0 18px 55px
        rgba(20, 32, 46, .28);
}

.tl-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 13px;
}

.tl-modal-title {
    color: #24364b;
    font-size: 15px;
    font-weight: 700;
}

.tl-modal-subtitle {
    margin-top: 2px;

    color: #718095;
    font-size: 10px;
}

.tl-modal-close {
    width: 29px;
    height: 29px;

    border: 0;
    border-radius: 5px;

    background: #eef2f6;

    color: #526276;

    font-size: 19px;
    line-height: 1;

    cursor: pointer;
}

.tl-modal-field {
    margin-bottom: 11px;
}

.tl-modal-field label {
    display: block;

    margin-bottom: 4px;

    color: #526276;

    font-size: 10px;
    font-weight: 700;
}

.tl-modal-date-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}

.tl-absence-source-row {
    margin-bottom: 11px;
    padding: 6px 8px;

    border-radius: 5px;

    background: #f3f6f9;

    color: #67778b;

    font-size: 9px;
}

.tl-absence-outlook-warning {
    margin-bottom: 11px;
    padding: 8px 9px;

    border: 1px solid #aed4ee;
    border-radius: 6px;

    background: #edf7fd;

    color: #245f85;

    font-size: 9px;
    line-height: 1.45;
}

.tl-modal-errors {
    margin: 8px 0;

    padding: 8px 9px;

    border: 1px solid #efb1b1;
    border-radius: 6px;

    background: #fff0f0;

    color: #9c3030;

    font-size: 10px;
}

.tl-modal-actions {
    display: flex;
    justify-content: flex-end;

    gap: 7px;

    margin-top: 13px;
}

.tl-absence-source {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 14px;
    height: 14px;

    margin-left: 4px;

    padding: 0 3px;

    border-radius: 3px;

    background:
        rgba(255, 255, 255, .78);

    color: #35475d;

    font-size: 7px;
    font-weight: 800;
}

@media (max-width: 600px) {
    .tl-modal-date-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* A1_ABSENCE_DRAG_PLANNER */

.tl-absence-fast-plan {
    display: flex;
    align-items: end;
    gap: 8px;

    margin: 7px 0 10px;
    padding: 8px 10px;

    border: 1px solid #d7e0ea;
    border-radius: 7px;

    background: #fff;
}

.tl-absence-fast-type {
    width: 190px;
}

.tl-absence-fast-type label {
    display: block;

    margin-bottom: 3px;

    color: #66778d;

    font-size: 9px;
    font-weight: 700;
}

.tl-absence-fast-type .form-control {
    min-height: 31px;

    padding: 4px 7px;

    font-size: 10px;
}

.tl-absence-fast-help {
    align-self: center;

    max-width: 440px;

    color: #728196;

    font-size: 9px;
    line-height: 1.4;
}

#tl-absence-drag-toggle.active {
    border-color: #a84848;

    background: #fff0f0;

    color: #9d3535;

    font-weight: 700;
}

.tl-absence-drag-mode .tl-track {
    cursor: crosshair;
}

.tl-absence-is-dragging {
    user-select: none;
}

.tl-absence-drag-selection {
    position: absolute;

    top: 7px;
    z-index: 25;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 31px;

    overflow: hidden;

    border: 2px solid;
    border-radius: 4px;

    white-space: nowrap;

    font-size: 8px;
    font-weight: 700;

    pointer-events: none;
}

.tl-absence-preview-vacation {
    border-color: #c54545;
    background: rgba(218, 72, 72, .72);
    color: #fff;
}

.tl-absence-preview-sick {
    border-color: #7747a8;
    background: rgba(126, 78, 174, .75);
    color: #fff;
}

.tl-absence-preview-care {
    border-color: #ca7725;
    background: rgba(227, 139, 50, .78);
    color: #fff;
}

.tl-absence-preview-training {
    border-color: #3477ad;
    background: rgba(57, 132, 191, .76);
    color: #fff;
}

.tl-absence-preview-other {
    border-color: #6b7785;
    background: rgba(112, 125, 140, .76);
    color: #fff;
}

.tl-absence-drag-selection.saving {
    opacity: .5;
}

.tl-absence-drag-selection.saved {
    opacity: 1;
}

@media (max-width: 900px) {
    .tl-absence-fast-plan {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .tl-absence-fast-type {
        width: 100%;
    }

    .tl-absence-fast-help {
        width: 100%;
        max-width: none;
    }
}


/* A1_TIMELINE_AVAILABILITY_GRID_V1 */

/*
 * Delikatnie zielonkawe tło = normalnie dostępny dzień.
 * Weekend = szary fragment.
 * Nieobecność = kolorowa warstwa na pełnej wysokości.
 */

.tl-track,
.tl-group-track {
    position: relative;
}


/* ---------- WIDOK DNI ---------- */

.tl-scale-day .tl-track,
.tl-scale-day .tl-group-track {
    background-color:
        rgba(36, 167, 115, .035);

    background-image:
        linear-gradient(
            to right,

            transparent 0,
            transparent var(--tl-workweek-width),

            rgba(102, 116, 132, .105)
                var(--tl-workweek-width),

            rgba(102, 116, 132, .105)
                var(--tl-week-width)
        ),

        linear-gradient(
            to right,

            transparent 0,

            transparent
                calc(var(--tl-col-width) - 1px),

            rgba(122, 139, 157, .18)
                calc(var(--tl-col-width) - 1px),

            rgba(122, 139, 157, .18)
                var(--tl-col-width)
        );

    background-size:
        var(--tl-week-width) 100%,
        var(--tl-col-width) 100%;

    background-position:
        var(--tl-week-shift) 0,
        0 0;

    background-repeat:
        repeat-x;
}


/* ---------- WIDOK TYGODNI ---------- */

/*
 * W każdej kolumnie tygodnia prawa część
 * reprezentuje sobotę + niedzielę.
 */

.tl-scale-week .tl-track,
.tl-scale-week .tl-group-track {
    background-color:
        rgba(36, 167, 115, .035);

    background-image:
        linear-gradient(
            to right,

            transparent 0,
            transparent 71.428%,

            rgba(102, 116, 132, .10)
                71.428%,

            rgba(102, 116, 132, .10)
                100%
        ),

        linear-gradient(
            to right,

            transparent 0,

            transparent
                calc(var(--tl-col-width) - 1px),

            rgba(122, 139, 157, .18)
                calc(var(--tl-col-width) - 1px),

            rgba(122, 139, 157, .18)
                var(--tl-col-width)
        );

    background-size:
        var(--tl-col-width) 100%,
        var(--tl-col-width) 100%;

    background-repeat:
        repeat-x;
}


/* ---------- NAGŁÓWEK ---------- */

.tl-unit.weekend {
    background: #edf1f4;
    color: #788594;
}

.tl-unit.today {
    background: #e9f3ff;
    color: #245f93;

    box-shadow:
        inset 0 -3px 0 #3d83bd;
}


/* ---------- DOSTĘPNOŚĆ PRACOWNIKA ---------- */

.tl-availability-zone {
    position: absolute;

    top: 0;
    bottom: 0;

    z-index: 1;

    pointer-events: none;

    border-left:
        1px solid rgba(0, 0, 0, .05);

    border-right:
        1px solid rgba(0, 0, 0, .05);
}


/* Urlop */

.tl-availability-vacation {
    background:
        rgba(214, 68, 68, .13);
}


/* Chorobowe */

.tl-availability-sick {
    background:
        rgba(126, 78, 174, .13);
}


/* Opieka */

.tl-availability-care {
    background:
        rgba(224, 135, 46, .14);
}


/* Szkolenie */

.tl-availability-training {
    background:
        rgba(55, 126, 181, .13);
}


/* Inna nieobecność */

.tl-availability-other {
    background:
        rgba(105, 117, 130, .13);
}


/*
 * Paski właściwe muszą pozostać
 * nad warstwą tła.
 */

.tl-project-bar {
    z-index: 3;
}

.tl-absence-bar {
    z-index: 4;
}

.tl-today-line {
    z-index: 6;
}


/* Status formalny nadal pozostaje niezależny od nieobecności. */

.tl-worker-status-red {
    box-shadow:
        inset 0 0 0 1px
        rgba(197, 65, 65, .08);
}



/* A1_TIMELINE_FILTERS_V1 */

.tl-filter-panel {
    display: flex;
    align-items: end;
    gap: 8px;

    margin: 8px 0;
    padding: 8px 10px;

    border: 1px solid #d7e0ea;
    border-radius: 7px;

    background: #f8fafc;
}

.tl-filter-field label {
    display: block;

    margin-bottom: 3px;

    color: #66778d;

    font-size: 9px;
    font-weight: 700;
}

.tl-filter-worker {
    width: 260px;
}

.tl-filter-project {
    width: 280px;
}

.tl-filter-panel .form-control {
    min-height: 31px;

    padding: 4px 7px;

    font-size: 10px;
}

.tl-filter-summary {
    align-self: center;

    margin-left: auto;

    padding: 5px 8px;

    border-radius: 5px;

    background: #eef3f7;

    color: #627286;

    font-size: 9px;
    font-weight: 700;

    white-space: nowrap;
}

.tl-filter-empty {
    margin: 8px 0;
    padding: 13px;

    border: 1px dashed #c9d3de;
    border-radius: 7px;

    background: #fafbfd;

    color: #748294;

    text-align: center;

    font-size: 10px;
}

.tl-project-group[hidden],
.tl-worker-row[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .tl-filter-panel {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .tl-filter-worker,
    .tl-filter-project {
        width: 100%;
    }

    .tl-filter-summary {
        width: 100%;

        margin-left: 0;

        text-align: center;
    }
}


/* A1_NOTIFICATIONS_UI_V1 */

.notification-nav-link {
    position: relative;

    display: inline-flex !important;
    align-items: center;
    gap: 5px;
}

.notification-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    border-radius: 10px;

    background: #d64040;
    color: #fff;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.notifications-page {
    max-width: 1050px;
    margin: 0 auto;
}

.notifications-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;
}

.notifications-heading h1 {
    margin: 0 0 3px;

    font-size: 22px;
}

.notifications-heading p {
    margin: 0;

    color: #718095;
    font-size: 11px;
}

.notifications-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin-bottom: 12px;
}

.notifications-filters a {
    padding: 6px 10px;

    border: 1px solid #d7e0e8;
    border-radius: 6px;

    background: #fff;

    color: #526276;

    font-size: 10px;
    font-weight: 600;

    text-decoration: none;
}

.notifications-filters a.active {
    border-color: #2e7eae;

    background: #eaf4fb;
    color: #23688f;
}

.notification-card {
    display: grid;

    grid-template-columns:
        44px 1fr;

    gap: 10px;

    margin-bottom: 7px;
    padding: 12px 14px;

    border: 1px solid #dce3ea;
    border-radius: 8px;

    background: #fff;

    cursor: pointer;

    transition:
        background .12s ease,
        border-color .12s ease;
}

.notification-card:hover {
    border-color: #bdcad6;
    background: #fbfcfd;
}

.notification-card.unread {
    border-left: 4px solid #2d83b7;

    background: #f5faff;
}

.notification-state {
    display: flex;
    justify-content: center;

    padding-top: 2px;
}

.notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    color: #fff;

    font-size: 17px;
    font-weight: 800;
}

.notification-icon.added {
    background: #1aa274;
}

.notification-icon.updated {
    background: #357fb4;
}

.notification-icon.cancelled {
    background: #d34b4b;
}

.notification-topline {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 2px;

    color: #30445b;
    font-size: 11px;
}

.notification-new-label {
    padding: 2px 5px;

    border-radius: 4px;

    background: #d94242;
    color: #fff;

    font-size: 7px;
    font-weight: 800;
}

.notification-worker {
    margin-top: 4px;

    color: #26384b;

    font-size: 14px;
    font-weight: 700;
}

.notification-period {
    margin-top: 3px;

    color: #485d73;

    font-size: 11px;
}

.notification-details {
    display: grid;
    gap: 3px;

    margin-top: 9px;

    color: #64758a;

    font-size: 9px;
}

.notification-details span {
    color: #8a97a6;
}

.notification-details strong {
    color: #526276;
}

.notification-added.unread {
    border-left-color: #1aa274;
}

.notification-updated.unread {
    border-left-color: #357fb4;
}

.notification-cancelled.unread {
    border-left-color: #d34b4b;
}

.notifications-empty {
    padding: 30px;

    border: 1px dashed #cad4de;
    border-radius: 8px;

    color: #778697;

    text-align: center;

    font-size: 11px;
}

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

    .notification-card {
        grid-template-columns:
            34px 1fr;

        padding: 10px;
    }

    .notification-icon {
        width: 25px;
        height: 25px;
    }
}


/* A1_MANUAL_ABSENCE_DELETE_V1 */

.danger-button {
    min-height: 30px;

    padding: 5px 10px;

    border: 1px solid #d44b4b;
    border-radius: 5px;

    background: #fff1f1;

    color: #b33737;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.danger-button:hover {
    background: #d94b4b;
    color: #fff;
}

.danger-button:disabled {
    opacity: .55;
    cursor: default;
}

.tl-modal-actions {
    width: 100%;
}

.tl-modal-actions-spacer {
    flex: 1;
}

.tl-absence-delete[hidden] {
    display: none !important;
}


/* A1_ABSENCE_FULLPAGE_V2 */

.absence-page {
    max-width: 1000px;
}

.absence-page-heading h1 {
    margin: 0;

    font-size: 22px;
}

.absence-worker-name {
    margin-top: 3px;

    color: #6f7f93;

    font-size: 11px;
}

.absence-back {
    margin: 17px 0 6px;
}

.absence-back a {
    font-size: 11px;
}

.absence-form-card {
    padding: 20px 22px;

    border: 1px solid #d5dee8;
    border-radius: 8px;

    background: #fff;
}

.absence-source-info {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-bottom: 13px;
    padding: 7px 9px;

    border-radius: 5px;

    background: #f2f5f8;

    color: #69798c;

    font-size: 10px;
}

.absence-source-info strong {
    color: #42566d;
}

.absence-override-label {
    padding: 2px 5px;

    border-radius: 4px;

    background: #e8f2fa;
    color: #296a96;

    font-size: 8px;
    font-weight: 700;
}

.absence-outlook-info {
    margin-bottom: 13px;
    padding: 9px 11px;

    border: 1px solid #a9cfe8;
    border-radius: 6px;

    background: #edf7fd;

    color: #285f82;

    font-size: 10px;
    line-height: 1.5;
}

.absence-delete-error {
    margin-bottom: 13px;
    padding: 9px 11px;

    border: 1px solid #e7adad;
    border-radius: 6px;

    background: #fff0f0;

    color: #a33939;

    font-size: 10px;
}

.absence-form-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px 16px;
}

.absence-field {
    margin-bottom: 14px;
}

.absence-field label {
    display: block;

    margin-bottom: 5px;

    color: #33485f;

    font-size: 10px;
    font-weight: 700;
}

.absence-notes {
    margin-top: 2px;
}

.absence-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 6px;
}

.absence-actions-spacer {
    flex: 1;
}

@media (max-width: 700px) {
    .absence-form-grid {
        grid-template-columns: 1fr;
    }
}


/* A1_USER_ACCESS_SETTINGS_V1 */

.access-settings-page {
    max-width: 1150px;
}

.access-settings-heading h1 {
    margin: 0 0 4px;
}

.access-settings-heading p {
    margin: 0 0 16px;

    color: #718095;
    font-size: 11px;
}

.settings-info-box {
    margin-bottom: 14px;
    padding: 10px 12px;

    border: 1px solid #b9d5e8;
    border-radius: 7px;

    background: #f0f8fd;

    color: #496b83;

    font-size: 10px;
    line-height: 1.5;
}

.settings-message {
    margin-bottom: 12px;
    padding: 9px 11px;

    border-radius: 6px;

    font-size: 10px;
}

.settings-message.success {
    border: 1px solid #9cd8c9;
    background: #ecf9f5;
    color: #25705f;
}

.settings-message.error {
    border: 1px solid #e6aaaa;
    background: #fff0f0;
    color: #a03d3d;
}

.user-access-card {
    margin-bottom: 10px;
    padding: 14px;

    border: 1px solid #d7e0e8;
    border-radius: 8px;

    background: #fff;
}

.user-access-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding-bottom: 10px;
    margin-bottom: 12px;

    border-bottom: 1px solid #edf0f3;
}

.user-access-header strong {
    display: block;

    color: #293d52;
    font-size: 13px;
}

.user-access-header small {
    display: block;

    margin-top: 2px;

    color: #778699;
    font-size: 9px;
}

.access-user-status {
    padding: 3px 6px;

    border-radius: 4px;

    font-size: 8px;
    font-weight: 800;
}

.access-user-status.active {
    background: #e7f7f1;
    color: #26816a;
}

.access-user-status.inactive {
    background: #f1f2f4;
    color: #77818d;
}

.user-access-grid {
    display: grid;

    grid-template-columns:
        1fr 1.2fr 1.2fr;

    gap: 20px;
}

.user-access-grid h3 {
    margin: 0 0 10px;

    color: #41566c;

    font-size: 11px;
}

.settings-label {
    display: block;

    margin-bottom: 4px;

    color: #68788b;

    font-size: 9px;
    font-weight: 700;
}

.settings-check {
    display: flex;
    align-items: center;

    gap: 7px;

    margin: 8px 0;

    color: #4f6277;

    font-size: 10px;

    cursor: pointer;
}

.settings-check input {
    width: 15px;
    height: 15px;
}

.settings-hint {
    display: block;

    margin-top: 5px;

    color: #8a97a5;
    font-size: 8px;
    line-height: 1.4;
}

.user-access-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid #edf0f3;
}

@media (max-width: 850px) {
    .user-access-grid {
        grid-template-columns: 1fr;
    }
}


/* A1_NOTIFICATION_SCOPE_V1 */

.settings-scope-select {
    width: 100%;
    margin-top: 4px;
    margin-bottom: 6px;
}


/* A1_WORKER_ARCHIVE_V1 */

.workers-archive-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
    padding: 8px 10px;

    border: 1px solid #d9e1e8;
    border-radius: 6px;

    background: #fff;
}

.workers-archive-nav strong {
    margin-right: 6px;

    color: #344b62;
}

.workers-archive-nav span {
    color: #7a8999;

    font-size: 9px;
}

.worker-archive-toolbar {
    display: flex;
    justify-content: flex-end;

    margin-bottom: 10px;
}

.worker-archive-banner {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 10px;
    padding: 9px 11px;

    border: 1px solid #e6c484;
    border-radius: 6px;

    background: #fff8e8;

    color: #785b25;

    font-size: 10px;
}

.worker-archive-page {
    max-width: 700px;
}

.worker-archive-warning {
    margin: 15px 0;
    padding: 13px;

    border: 1px solid #e4c385;
    border-radius: 7px;

    background: #fff8e9;

    color: #725925;

    font-size: 11px;
    line-height: 1.5;
}

.worker-archive-warning p {
    margin: 6px 0 0;
}

.worker-archive-actions {
    display: flex;
    justify-content: flex-end;

    gap: 8px;

    margin-top: 18px;
}

.worker-archive-self-info {
    margin: 5px 0 0;

    color: #98702b;

    font-size: 9px;
}


/* A1_WORKER_ACCOUNT_STATUS_V1 */

.worker-account-status {
    margin-top: 12px;
    padding: 11px;

    border: 1px solid #d9e1e8;
    border-radius: 7px;

    background: #f8fafc;

    font-size: 10px;
}

.worker-account-status-head {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    font-size: 11px;
}

.account-status-dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #8594a3;
}

.account-active {
    border-color: #a6d9ca;
    background: #f0faf7;
}

.account-active .account-status-dot {
    background: #1d9b79;
}

.account-pending {
    border-color: #e5c87e;
    background: #fff9e9;
}

.account-pending .account-status-dot {
    background: #d59a19;
}

.account-missing {
    border-color: #cad4df;
    background: #f7f9fb;
}

.worker-account-row {
    display: flex;
    justify-content: space-between;

    gap: 15px;

    margin: 6px 0;

    color: #6e7d8f;
}

.worker-account-row strong {
    color: #273b50;
    text-align: right;
}

.worker-account-help {
    margin-top: 8px;

    color: #65778a;

    line-height: 1.5;
}

.worker-account-help.warning {
    color: #9b6722;
}

.worker-account-action {
    display: inline-block;

    margin-top: 11px;
    padding: 6px 9px;

    border: 1px solid #86abc8;
    border-radius: 5px;

    background: #fff;

    color: #155a8a;

    font-size: 9px;
    font-weight: 700;

    text-decoration: none;
}

.worker-account-action.primary {
    border-color: #146aa1;
    background: #146aa1;
    color: #fff;
}

.user-access-card:target {
    outline: 3px solid rgba(22, 106, 161, .20);
    border-color: #2d7cac;

    scroll-margin-top: 70px;
}


/* A1_MODULE_PERMISSIONS_UI_V1 */

.module-permissions-panel {
    margin-top: 14px;
    padding-top: 13px;

    border-top: 1px solid #edf0f3;
}

.module-permissions-panel h3 {
    margin: 0 0 3px;

    color: #41566c;
    font-size: 11px;
}

.module-permissions-panel > p {
    margin: 0 0 10px;

    color: #7b8998;
    font-size: 9px;
}

.module-permissions-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(150px, 1fr));

    gap: 7px;
}

.module-permission-check {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 34px;
    padding: 7px 9px;

    border: 1px solid #dce4eb;
    border-radius: 6px;

    background: #fafbfd;

    color: #42566c;

    font-size: 10px;
    font-weight: 600;

    cursor: pointer;
}

.module-permission-check:hover {
    background: #f2f7fb;
}

.module-permission-check input {
    width: 15px;
    height: 15px;
}

@media (max-width: 900px) {
    .module-permissions-grid {
        grid-template-columns:
            repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 560px) {
    .module-permissions-grid {
        grid-template-columns: 1fr;
    }
}


/* A1_WORKER_IMPORT_V1 */

.worker-list-filters {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #e1e7ed;
    border-radius: 8px;
    background: #fafbfd;
}

.worker-list-filters form {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(220px, 1fr)
        auto;
    gap: 12px;
    align-items: end;
}

.worker-filter-actions {
    display: flex;
    gap: 8px;
}

.company-group-row td {
    padding: 10px 12px;
    background: #f1f4f7;
    color: #334a60;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.worker-import-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.worker-import-summary > div {
    padding: 14px;
    border: 1px solid #e1e7ed;
    border-radius: 8px;
    background: #fff;
}

.worker-import-summary strong,
.worker-import-summary span {
    display: block;
}

.worker-import-summary strong {
    font-size: 22px;
}

.worker-import-summary span {
    margin-top: 3px;
    color: #718096;
    font-size: 10px;
}

.import-new {
    color: #23734d;
}

.import-error {
    display: block;
    color: #a22d2d;
}

.import-company-new {
    display: block;
    margin-top: 3px;
    color: #7a5b00;
}

.access-pending {
    color: #9a6c00;
    font-weight: 600;
}

@media (max-width: 800px) {
    .worker-list-filters form {
        grid-template-columns: 1fr;
    }

    .worker-import-summary {
        grid-template-columns: 1fr;
    }
}


/* A1_DEPARTMENT_GROUPS_V1 */

.department-group-row td {
    padding: 7px 14px 7px 28px;
    background: #f8fafc;
    border-top: 1px solid #e4e9ee;
    color: #586b7d;
}

.department-group-row span {
    margin-right: 6px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.department-group-row strong {
    font-size: 10px;
    color: #334a60;
}


.tl-department-row {
    display: flex;
    min-width: max-content;
    background: #f7f9fb;
    border-top: 1px solid #e0e6eb;
    border-bottom: 1px solid #edf1f4;
}

.tl-department-left {
    box-sizing: border-box;
    width: 300px;
    min-width: 300px;
    padding: 6px 12px 6px 24px;
}

.tl-department-left strong {
    display: block;
    color: #334a60;
    font-size: 10px;
}

.tl-department-left small {
    display: block;
    margin-top: 1px;
    color: #83909d;
    font-size: 8px;
}

.tl-department-track {
    position: relative;
    min-height: 34px;
    background: #f7f9fb;
}


/* A1_WORKER_ACCOUNT_ADMIN_ACTIONS_V1 */

.worker-account-admin-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e4e9ee;
}

.worker-account-admin-actions form {
    margin: 0;
}


/* A1_WORKER_INVITATION_ACTIONS_V1 */

.worker-invitation-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.worker-invitation-actions form {
    margin: 0;
}

/* A1_TIMEKEEPING_NN */

.tl-absence-unplanned,
.tl-legend-box.unplanned {
    background-color: #111827;

    background-image:
        linear-gradient(
            45deg,
            #b91c1c 25%,
            transparent 25%,
            transparent 75%,
            #b91c1c 75%
        ),
        linear-gradient(
            45deg,
            #b91c1c 25%,
            #111827 25%,
            #111827 75%,
            #b91c1c 75%
        );

    background-position:
        0 0,
        8px 8px;

    background-size:
        16px 16px;

    border-color: #111827;
    color: #ffffff;
}

.tl-absence-unplanned span {
    color: #ffffff;
    font-weight: 700;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85);
}



/* A1_TIMEKEEPING_DASHBOARD */

.tk-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.tk-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(130px, 1fr));
    gap: 12px;
}

.tk-summary-card {
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tk-summary-card span {
    font-size: 13px;
    color: #667085;
}

.tk-summary-card strong {
    font-size: 28px;
    color: #101828;
}

.tk-summary-card.tk-green {
    border-top: 4px solid #15803d;
}

.tk-summary-card.tk-yellow {
    border-top: 4px solid #d97706;
}

.tk-summary-card.tk-red {
    border-top: 4px solid #b91c1c;
}

.tk-summary-card.tk-gray {
    border-top: 4px solid #667085;
}

.tk-own-card,
.tk-table-card {
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-radius: 14px;
}

.tk-own-card {
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.tk-card-label {
    display: block;
    color: #667085;
    font-size: 12px;
    margin-bottom: 4px;
}

.tk-table-heading {
    padding: 18px 20px 12px;
}

.tk-table-heading h2 {
    margin: 0 0 4px;
}

.tk-table-heading p {
    margin: 0;
    color: #667085;
}

.tk-table-scroll {
    overflow-x: auto;
}

.tk-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.tk-table th,
.tk-table td {
    padding: 12px 14px;
    text-align: left;
    border-top: 1px solid #eaecf0;
    vertical-align: middle;
}

.tk-table th {
    font-size: 12px;
    color: #667085;
    font-weight: 700;
    background: #f8fafc;
}

.tk-table td {
    font-size: 14px;
}

.tk-table td small {
    display: block;
    margin-top: 3px;
    color: #667085;
}

.tk-status,
.tk-absence {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.tk-status-present {
    background: #dcfce7;
    color: #166534;
}

.tk-status-late {
    background: #fef3c7;
    color: #92400e;
}

.tk-status-absent {
    background: #fee2e2;
    color: #991b1b;
}

.tk-status-missing {
    background: #f2f4f7;
    color: #475467;
}

.tk-absence {
    background: #eef2ff;
    color: #3730a3;
}

.tk-absence-nn {
    color: #ffffff;

    background-color: #111827;

    background-image:
        linear-gradient(
            45deg,
            #b91c1c 25%,
            transparent 25%,
            transparent 75%,
            #b91c1c 75%
        ),
        linear-gradient(
            45deg,
            #b91c1c 25%,
            #111827 25%,
            #111827 75%,
            #b91c1c 75%
        );

    background-position:
        0 0,
        6px 6px;

    background-size:
        12px 12px;
}

.tk-muted {
    color: #98a2b3;
}

@media (max-width: 900px) {
    .tk-summary-grid {
        grid-template-columns:
            repeat(2, minmax(130px, 1fr));
    }

    .tk-own-card {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* A1_TIMEKEEPING_SELF_ATTENDANCE */

.tk-message {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.tk-message-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.tk-message-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.tk-own-card-expanded {
    display: block;
}

.tk-own-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tk-self-actions {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.tk-action-card {
    border: 1px solid #d9dee7;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
}

.tk-action-card > strong {
    font-size: 16px;
    color: #101828;
}

.tk-action-card > span,
.tk-action-card label {
    font-size: 12px;
    color: #667085;
}

.tk-action-card input,
.tk-action-card select,
.tk-action-card textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 9px 10px;
    font: inherit;
    background: #ffffff;
}

.tk-action-card textarea {
    resize: vertical;
}

.tk-action-present {
    border-top: 4px solid #15803d;
}

.tk-action-late {
    border-top: 4px solid #d97706;
}

.tk-action-absent {
    border-top: 4px solid #b91c1c;
}

.tk-action-button {
    margin-top: auto;
    border: 0;
    border-radius: 8px;
    padding: 10px 12px;
    font-weight: 700;
    cursor: pointer;
    background: #0b2a4a;
    color: #ffffff;
}

.tk-action-button:hover {
    filter: brightness(1.08);
}

.tk-submitted-info {
    margin-top: 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}

.tk-submitted-info span,
.tk-submitted-info small {
    color: #667085;
}

@media (max-width: 900px) {
    .tk-self-actions {
        grid-template-columns: 1fr;
    }

    .tk-own-status-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* A1_TIMEKEEPING_MANAGER_ACTIONS */

.tk-manager-actions {
    min-width: 190px;
}

.tk-manager-actions form {
    margin: 0;
}

.tk-manager-button {
    border: 0;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.tk-manager-verify {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #7dd3fc;
}

.tk-manager-nn {
    background: #111827;
    color: #ffffff;
    border: 1px solid #b91c1c;
}

.tk-manager-button:hover {
    filter: brightness(0.96);
}

.tk-nn-form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tk-nn-form input {
    width: 115px;
    min-width: 0;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 11px;
}

.tk-manager-done {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 700;
}

.tk-manager-done-nn {
    background: #111827;
    color: #ffffff;
    border: 1px solid #b91c1c;
}

@media (max-width: 900px) {
    .tk-nn-form {
        align-items: stretch;
        flex-direction: column;
    }

    .tk-nn-form input {
        width: 100%;
    }
}



/* A1_TIMEKEEPING_BULK */

.tk-bulk-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.tk-bulk-back {
    display: inline-block;
    margin-bottom: 8px;
    color: #475467;
    text-decoration: none;
    font-size: 13px;
}

.tk-bulk-open {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.tk-bulk-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tk-bulk-settings {
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-radius: 14px;
    padding: 16px;
    display: grid;
    grid-template-columns:
        150px
        minmax(220px, 1fr)
        120px
        120px
        minmax(180px, 1fr)
        auto;
    gap: 12px;
    align-items: end;
}

.tk-bulk-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tk-bulk-field label {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.tk-bulk-field input,
.tk-bulk-field select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 9px 10px;
    background: #ffffff;
    font: inherit;
}

.tk-bulk-summary {
    display: grid;
    grid-template-columns:
        repeat(7, minmax(110px, 1fr));
    gap: 10px;
}

.tk-bulk-summary > div {
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    padding: 12px;
}

.tk-bulk-summary span {
    display: block;
    font-size: 11px;
    color: #667085;
    margin-bottom: 4px;
}

.tk-bulk-summary strong {
    font-size: 14px;
    color: #101828;
}

.tk-bulk-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.tk-bulk-row-blocked {
    opacity: 0.65;
    background: #f8fafc;
}

.tk-bulk-status {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
}

.tk-bulk-ready {
    background: #dcfce7;
    color: #166534;
}

.tk-bulk-review {
    background: #fef3c7;
    color: #92400e;
}

.tk-bulk-blocked {
    background: #fee2e2;
    color: #991b1b;
}

.tk-bulk-save {
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.tk-bulk-save span {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .tk-bulk-settings {
        grid-template-columns:
            repeat(2, minmax(180px, 1fr));
    }

    .tk-bulk-summary {
        grid-template-columns:
            repeat(3, minmax(110px, 1fr));
    }
}

@media (max-width: 700px) {
    .tk-bulk-settings,
    .tk-bulk-summary {
        grid-template-columns: 1fr;
    }

    .tk-bulk-save {
        align-items: stretch;
        flex-direction: column;
    }
}


/* ==========================================================
   A1_TIMEKEEPING_BULK_MONTH_GRID_V1
   ========================================================== */

.tk-month-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 30px;
}

.tk-month-page-heading h1 {
    margin: 4px 0 4px;
    color: #13233d;
    font-size: 30px;
    line-height: 1.15;
}

.tk-month-page-heading p {
    margin: 0;
    color: #66758d;
    font-size: 14px;
}

.tk-month-back {
    color: #52637b;
    font-size: 13px;
    text-decoration: none;
}

.tk-month-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tk-month-card {
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    box-shadow:
        0 2px 8px rgba(15, 35, 65, 0.035);
}

.tk-month-top {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        340px;
    gap: 14px;
}

.tk-month-settings {
    padding: 20px;
}

.tk-month-summary {
    padding: 20px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f5f9ff 100%
        );
}

.tk-month-section-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tk-month-section-title h2 {
    margin: 0;
    color: #13233d;
    font-size: 18px;
}

.tk-month-section-title p {
    margin: 3px 0 0;
    color: #75839a;
    font-size: 12px;
}

.tk-month-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f2ff;
    color: #0969e8;
    font-size: 21px;
    font-weight: 800;
}

.tk-month-info {
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: 18px;
}

.tk-month-fields {
    margin-top: 20px;
    display: grid;
    grid-template-columns:
        minmax(150px, .8fr)
        minmax(150px, .8fr)
        minmax(260px, 1.5fr);
    gap: 13px 14px;
}

.tk-month-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tk-month-field label {
    color: #53647e;
    font-size: 12px;
    font-weight: 700;
}

.tk-month-field input,
.tk-month-field select,
.tk-month-readonly {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    border: 1px solid #cfd9e7;
    border-radius: 8px;
    padding: 9px 11px;
    background: #ffffff;
    color: #16243a;
    font: inherit;
}

.tk-month-readonly {
    display: flex;
    align-items: center;
    background: #f6f8fb;
}

.tk-month-notes {
    grid-column: span 2;
}

.tk-month-settings-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.tk-month-btn {
    min-height: 40px;
    border-radius: 8px;
    padding: 9px 17px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        opacity .12s ease;
}

.tk-month-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.tk-month-btn-primary {
    border: 1px solid #0969e8;
    background:
        linear-gradient(
            180deg,
            #1976f3 0%,
            #0864df 100%
        );
    color: #ffffff;
    box-shadow:
        0 5px 12px rgba(9, 105, 232, .18);
}

.tk-month-btn-primary:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.tk-month-btn-outline {
    border: 1px solid #1670ec;
    background: #ffffff;
    color: #0969e8;
}

.tk-month-btn-secondary {
    border: 1px solid #d3dce8;
    background: #f5f8fc;
    color: #334765;
}

.tk-month-btn-small {
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #d3dce8;
    background: #ffffff;
    color: #465873;
    font-size: 11px;
}

.tk-month-summary-data {
    margin-top: 18px;
    display: grid;
    gap: 11px;
}

.tk-month-summary-data > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    align-items: start;
}

.tk-month-summary-data span {
    color: #65758c;
    font-size: 12px;
}

.tk-month-summary-data strong {
    color: #16243a;
    font-size: 12px;
    text-align: right;
}

.tk-month-summary-tiles {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #dbe7f4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tk-month-summary-tile {
    border-radius: 9px;
    padding: 10px;
    background: #edf5ff;
}

.tk-month-summary-tile:nth-child(2) {
    background: #f2f0ff;
}

.tk-month-summary-tile:nth-child(3) {
    background: #eefaf3;
}

.tk-month-summary-tile:nth-child(4) {
    background: #fff8e9;
}

.tk-month-summary-tile span {
    display: block;
    margin-bottom: 4px;
    color: #66758d;
    font-size: 10px;
}

.tk-month-summary-tile strong {
    color: #13233d;
    font-size: 16px;
}

.tk-month-summary-empty {
    margin-top: 20px;
    border: 1px dashed #ccd8e8;
    border-radius: 9px;
    padding: 22px 15px;
    color: #718097;
    text-align: center;
    font-size: 12px;
}

.tk-month-message {
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 600;
}

.tk-month-success {
    border: 1px solid #b9e6ca;
    background: #effaf3;
    color: #17683b;
}

.tk-month-error {
    border: 1px solid #f1bcbc;
    background: #fff3f3;
    color: #a22b2b;
}


/* GRID */

.tk-month-grid-card {
    overflow: hidden;
}

.tk-month-grid-heading {
    padding: 16px 18px 13px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid #e1e7f0;
}

.tk-month-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    color: #65758c;
    font-size: 10px;
}

.tk-month-legend > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tk-month-legend-box {
    min-width: 31px;
    min-height: 25px;
    padding: 0 5px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 9px;
    font-weight: 800;
}

.tk-month-legend-hours {
    background: #2f80ed;
    color: #ffffff;
}

.tk-month-legend-vacation {
    border: 1px solid #f1b75c;
    background: #fff1da;
    color: #d06b00;
}

.tk-month-legend-sick {
    border: 1px solid #a88ae5;
    background: #f0e9ff;
    color: #6b43b9;
}

.tk-month-legend-nn {
    border: 1px solid #111827;
    background:
        repeating-linear-gradient(
            135deg,
            #111827 0,
            #111827 5px,
            #b91c1c 5px,
            #b91c1c 8px
        );
    color: #ffffff;
}

.tk-month-legend-empty {
    border: 1px solid #d9e1ec;
    background: #f7f9fc;
    color: #718096;
}

.tk-month-range-bar {
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #fafcff;
    border-bottom: 1px solid #e1e7f0;
}

.tk-month-range-bar strong {
    color: #182942;
    font-size: 14px;
}

.tk-month-range-bar span {
    margin-left: 12px;
    color: #75839a;
    font-size: 10px;
}

.tk-month-grid-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.tk-month-grid {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 11px;
}

.tk-month-grid th,
.tk-month-grid td {
    height: 44px;
    padding: 0;
    box-sizing: border-box;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.tk-month-grid thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8fafd;
    color: #52637d;
}

.tk-month-sticky {
    position: sticky;
    left: 0;
    z-index: 7;
}

.tk-month-grid thead .tk-month-sticky {
    z-index: 9;
}

.tk-month-worker-column,
.tk-month-worker,
.tk-month-total-title {
    width: 230px;
    min-width: 230px;
    max-width: 230px;
    background: #ffffff;
}

.tk-month-worker-header {
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tk-month-worker-header input,
.tk-worker-selector {
    width: 17px;
    height: 17px;
}

.tk-month-day-header,
.tk-month-cell,
.tk-month-day-total {
    width: 51px;
    min-width: 51px;
    max-width: 51px;
}

.tk-month-total-header,
.tk-month-row-total,
.tk-month-grand-total {
    width: 85px;
    min-width: 85px;
    max-width: 85px;
}

.tk-month-day-header span {
    display: block;
    color: #293d5b;
    font-weight: 800;
}

.tk-month-day-header small {
    display: block;
    margin-top: 2px;
    color: #8390a4;
    font-size: 9px;
}

.tk-month-weekend {
    background: #f0f3f7 !important;
}

.tk-month-today {
    box-shadow:
        inset 0 -3px 0 #2580ef;
}

.tk-month-worker {
    padding: 0 10px !important;
    text-align: left !important;
}

.tk-month-worker-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tk-month-avatar {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f1ff;
    color: #2467b7;
    font-size: 10px;
    font-weight: 800;
}

.tk-month-worker-text {
    min-width: 0;
}

.tk-month-worker-text strong {
    display: block;
    overflow: hidden;
    color: #172941;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
}

.tk-month-worker-text small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #7a879a;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 9px;
}

.tk-month-cell {
    background: #ffffff;
}

.tk-month-cell-content {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    margin: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #6d7a8e;
    font-size: 10px;
    font-weight: 700;
}

.tk-month-cell-picker {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.tk-month-cell-picker input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tk-month-cell-available:hover
.tk-month-cell-content {
    background: #edf5ff;
    color: #1266d5;
}

.tk-month-cell-selected
.tk-month-cell-content,
.tk-month-cell-hours
.tk-month-cell-content {
    background:
        linear-gradient(
            180deg,
            #4190f4 0%,
            #2679e6 100%
        );
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.14);
}

.tk-month-cell-vacation
.tk-month-cell-content {
    border: 1px solid #f0b760;
    background: #fff2dc;
    color: #ce6b00;
}

.tk-month-cell-sick
.tk-month-cell-content {
    border: 1px solid #aa8de3;
    background: #f1eaff;
    color: #6945ad;
}

.tk-month-cell-nn
.tk-month-cell-content {
    border: 1px solid #111827;
    background:
        repeating-linear-gradient(
            135deg,
            #111827 0,
            #111827 5px,
            #b91c1c 5px,
            #b91c1c 8px
        );
    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0,0,0,.8);
}

.tk-month-cell-absence
.tk-month-cell-content {
    border: 1px solid #cbd4df;
    background: #eef2f6;
    color: #536273;
}

.tk-month-cell-unassigned
.tk-month-cell-content {
    background: #f2f4f7;
    color: #a0a8b4;
}

.tk-month-cell-conflict {
    outline: 2px solid #d92d20;
}

.tk-month-row-total,
.tk-month-day-total,
.tk-month-grand-total {
    background: #f8fafc;
    color: #172941;
    font-weight: 800;
}

.tk-month-total-row td {
    height: 42px;
    background: #f7f9fc;
}

.tk-month-total-title {
    color: #1b2c45;
    font-weight: 900;
    text-align: center !important;
}

.tk-month-no-workers {
    height: 90px !important;
    padding: 20px !important;
    color: #76849a;
}


/* SAVE BAR */

.tk-month-save-bar {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.tk-month-save-info {
    display: flex;
    align-items: center;
    gap: 11px;
}

.tk-month-save-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f2ff;
    color: #0969e8;
    font-family: Georgia, serif;
    font-weight: 800;
}

.tk-month-save-info strong {
    display: block;
    color: #182942;
    font-size: 12px;
}

.tk-month-save-info span {
    display: block;
    margin-top: 2px;
    color: #748197;
    font-size: 10px;
}


/* RESPONSIVE */

@media (max-width: 1150px) {

    .tk-month-top {
        grid-template-columns: 1fr;
    }

    .tk-month-summary {
        order: 2;
    }

    .tk-month-fields {
        grid-template-columns:
            repeat(
                2,
                minmax(160px, 1fr)
            );
    }

    .tk-month-project-field,
    .tk-month-notes {
        grid-column: span 2;
    }

    .tk-month-grid-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tk-month-legend {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {

    .tk-month-fields {
        grid-template-columns: 1fr;
    }

    .tk-month-project-field,
    .tk-month-notes {
        grid-column: auto;
    }

    .tk-month-settings-actions,
    .tk-month-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .tk-month-settings-actions
    .tk-month-btn,
    .tk-month-save-bar
    .tk-month-btn {
        width: 100%;
    }

    .tk-month-worker-column,
    .tk-month-worker,
    .tk-month-total-title {
        width: 190px;
        min-width: 190px;
        max-width: 190px;
    }
}


/* A1_TIMEKEEPING_DAY_SELECT_V1 */

.tk-day-selector-wrap {
    width: 100%;
    height: 100%;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
}

.tk-day-selector {
    width: 14px;
    height: 14px;
    margin: 0 0 2px;
    accent-color: #1670ec;
    cursor: pointer;
}

.tk-day-selector:disabled {
    opacity: .25;
    cursor: default;
}

.tk-day-number {
    display: block;
    color: #293d5b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.tk-day-selector-wrap small {
    color: #8390a4;
    font-size: 9px;
    line-height: 1;
}

.tk-month-day-header {
    height: 58px !important;
}


/* ==========================================================
   A1_TIMEKEEPING_SELECTED_VS_SAVED_V1
   ========================================================== */

/* ZAZNACZONE DO ZAPISU */
.tk-month-cell-selected
.tk-month-cell-content {
    border: 2px solid #2f80ed;
    background: #e8f3ff;
    color: #1267d6;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.7);
}

/* JUŻ ZAPISANE */
.tk-month-cell-hours
.tk-month-cell-content {
    border: 1px solid #1769cf;
    background:
        linear-gradient(
            180deg,
            #3989ee 0%,
            #1d6fd8 100%
        );
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18);
}

/* LEGENDA - DO ZAPISU */
.tk-month-legend-selected {
    border: 2px solid #2f80ed;
    background: #e8f3ff;
    color: #1267d6;
}

/* LEGENDA - ZAPISANE */
.tk-month-legend-hours {
    border: 1px solid #1769cf;
    background:
        linear-gradient(
            180deg,
            #3989ee 0%,
            #1d6fd8 100%
        );
    color: #ffffff;
}


/* NAWIGACJA MIESIĄCA */

.tk-month-range-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.tk-month-navigation {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tk-month-current-label {
    min-width: 125px;
    color: #182942;
    text-align: center;
    white-space: nowrap;
}

.tk-month-nav-btn {
    width: 34px;
    min-width: 34px;
    padding-left: 0;
    padding-right: 0;
    font-size: 20px;
    line-height: 1;
}

.tk-month-range-stats {
    margin-left: 0 !important;
    white-space: nowrap;
}


@media (max-width: 900px) {

    .tk-month-range-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .tk-month-range-left {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}


/* ==========================================================
   A1_TIMEKEEPING_ENTRY_EDIT_MODAL_V1
   ========================================================== */

.tk-time-edit-trigger {
    width: 100%;
    min-width: 0;
    font: inherit;
    cursor: pointer;
}

.tk-time-edit-trigger:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

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

.tk-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tk-edit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 24, 43, .58);
    backdrop-filter: blur(2px);
}

.tk-edit-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 24px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 28px 80px rgba(15, 31, 52, .28);
}

.tk-edit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e6ebf1;
}

.tk-edit-header small {
    display: block;
    margin-bottom: 3px;
    color: #6c7a8d;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.tk-edit-header h2 {
    margin: 0;
    color: #172942;
    font-size: 22px;
}

.tk-edit-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #f1f4f8;
    color: #526075;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.tk-edit-person {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px 12px;
    margin: 18px 0;
}

.tk-edit-person strong {
    color: #172942;
    font-size: 17px;
}

.tk-edit-person span {
    color: #315a91;
    font-weight: 700;
}

.tk-edit-person small {
    flex-basis: 100%;
    color: #738095;
}

.tk-edit-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.tk-edit-times label,
.tk-edit-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tk-edit-times span,
.tk-edit-notes > span {
    color: #33455e;
    font-size: 13px;
    font-weight: 700;
}

.tk-edit-times input,
.tk-edit-notes textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccd5e0;
    border-radius: 10px;
    background: #ffffff;
    color: #172942;
    font: inherit;
}

.tk-edit-times input {
    height: 44px;
    padding: 0 12px;
}

.tk-edit-notes {
    margin-top: 14px;
}

.tk-edit-notes textarea {
    padding: 11px 12px;
    resize: vertical;
}

.tk-edit-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.tk-edit-summary > div {
    padding: 12px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f7f9fc;
}

.tk-edit-summary span,
.tk-edit-summary strong {
    display: block;
}

.tk-edit-summary span {
    margin-bottom: 4px;
    color: #758297;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.tk-edit-summary strong {
    color: #172942;
    font-size: 14px;
}

.tk-edit-summary-total {
    border-color: #bcd6f7 !important;
    background: #eef6ff !important;
}

.tk-edit-calculation-info {
    margin: 12px 0 0;
    color: #748196;
    font-size: 12px;
    line-height: 1.45;
}

.tk-edit-error {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #efb4b4;
    border-radius: 9px;
    background: #fff1f1;
    color: #a62f2f;
    font-size: 13px;
}

.tk-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e6ebf1;
}

body.tk-modal-open {
    overflow: hidden;
}

@media (max-width: 620px) {

    .tk-edit-modal {
        padding: 10px;
        align-items: flex-end;
    }

    .tk-edit-dialog {
        width: 100%;
        max-height: 92vh;
        padding: 19px;
        border-radius: 18px 18px 8px 8px;
    }

    .tk-edit-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* A1_TIMEKEEPING_EDIT_TRIGGER_CLICK_FIX_V1 */

.tk-time-edit-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.tk-month-cell-hours
.tk-time-edit-trigger {
    cursor: pointer !important;
}

.tk-month-cell-hours
.tk-time-edit-trigger:hover {
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.55),
        0 2px 5px rgba(20,80,150,.18);
}


/* ==========================================================
   A1_TIMEKEEPING_APPROVAL_FLOW_V1
   ========================================================== */

.tk-edit-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 16px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.tk-edit-status-row > span {
    color: #6f7d91;
    font-size: 12px;
    font-weight: 700;
}

.tk-edit-status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.tk-edit-status-draft {
    background: #edf4ff;
    color: #2368bb;
}

.tk-edit-status-submitted {
    background: #fff5d9;
    color: #8a5b00;
}

.tk-edit-status-approved {
    background: #e7f7ee;
    color: #197344;
}

.tk-edit-status-rejected {
    background: #fdeaea;
    color: #a93636;
}

.tk-edit-actions {
    align-items: center;
    justify-content: space-between;
}

.tk-edit-actions-primary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.tk-edit-btn-success {
    border-color: #188653 !important;
    background: #188653 !important;
    color: #ffffff !important;
}

.tk-edit-btn-danger {
    border-color: #c44242 !important;
    background: #ffffff !important;
    color: #b33131 !important;
}

.tk-edit-reject-panel[hidden] {
    display: none !important;
}

.tk-edit-reject-panel {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #efc3c3;
    border-radius: 11px;
    background: #fff7f7;
}

.tk-edit-reject-panel label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tk-edit-reject-panel label > span {
    color: #923737;
    font-size: 13px;
    font-weight: 800;
}

.tk-edit-reject-panel textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d9b4b4;
    border-radius: 9px;
    background: #ffffff;
    font: inherit;
    resize: vertical;
}

.tk-edit-reject-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

@media (max-width: 620px) {
    .tk-edit-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .tk-edit-actions-primary {
        flex-direction: column;
    }

    .tk-edit-actions-primary .tk-month-btn,
    .tk-edit-actions > .tk-month-btn {
        width: 100%;
    }

    .tk-edit-reject-actions {
        flex-direction: column;
    }
}


/* ==========================================================
   A1_TIMEKEEPING_MONTHLY_REMINDER_V1
   ========================================================== */

.tk-monthly-reminders {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.tk-monthly-reminder {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #f0c36d;
    border-radius: 12px;
    background: #fff9eb;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.tk-monthly-reminder-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f3a712;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
}

.tk-monthly-reminder-content {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.tk-monthly-reminder-label {
    color: #9a6400;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tk-monthly-reminder-content strong {
    color: #372800;
    font-size: 15px;
}

.tk-monthly-reminder-content small {
    color: #745d25;
    font-size: 12px;
}

.tk-monthly-reminder-action {
    flex: 0 0 auto;
}

.tk-monthly-reminder-action .tk-action-button {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .tk-monthly-reminder {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tk-monthly-reminder-action {
        width: 100%;
        padding-left: 52px;
    }

    .tk-monthly-reminder-action .tk-action-button {
        width: 100%;
    }
}


/* ==========================================================
   A1_TIMEKEEPING_PERIOD_REVIEW_V1
   ========================================================== */

.tk-period-review-modal[hidden] {
    display: none;
}

.tk-period-review-modal {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.tk-period-review-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
}

.tk-period-review-dialog {
    position: relative;
    z-index: 1;
    width: min(920px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.tk-period-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.tk-period-review-header small {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tk-period-review-header h2 {
    margin: 0;
    color: #0f172a;
}

.tk-period-review-project {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.tk-period-review-project strong {
    color: #0f172a;
}

.tk-period-review-project span {
    color: #64748b;
}

.tk-period-review-summary {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 20px 24px;
}

.tk-period-review-summary > div {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

.tk-period-review-summary span,
.tk-period-review-summary small {
    display: block;
    color: #64748b;
    font-size: 11px;
}

.tk-period-review-summary strong {
    display: block;
    margin: 4px 0;
    color: #0f172a;
    font-size: 20px;
}

.tk-period-result {
    margin: 0 24px 18px;
    padding: 13px 15px;
    border-radius: 10px;
    font-weight: 700;
}

.tk-period-result-ok {
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #166534;
}

.tk-period-result-blocked {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.tk-period-review-section {
    margin: 0 24px 18px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.tk-period-review-section h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 14px;
}

.tk-period-review-list {
    margin: 0;
    padding-left: 20px;
}

.tk-period-review-list li + li {
    margin-top: 6px;
}

.tk-period-list-danger {
    color: #991b1b;
}

.tk-period-list-warning {
    color: #92400e;
}

.tk-period-detail-list {
    display: grid;
    gap: 7px;
}

.tk-period-detail-item {
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        auto
        minmax(220px, 1fr);
    gap: 12px;
    align-items: center;
    padding: 9px 11px;
    border-radius: 8px;
    background: #f8fafc;
}

.tk-period-detail-item strong {
    color: #0f172a;
}

.tk-period-detail-item span,
.tk-period-detail-item small {
    color: #64748b;
}

.tk-period-review-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

.tk-period-review-footer
.tk-month-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 800px) {
    .tk-period-review-modal {
        padding: 10px;
    }

    .tk-period-review-dialog {
        max-height: calc(100vh - 20px);
    }

    .tk-period-review-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .tk-period-detail-item {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .tk-period-review-project {
        flex-direction: column;
        gap: 4px;
    }

    .tk-period-review-footer {
        flex-direction: column-reverse;
    }

    .tk-period-review-footer
    .tk-month-btn {
        width: 100%;
    }
}

/* ===== Early exit / wcześniejsze wyjście ===== */

.tk-early-exit-own {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.tk-early-exit-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.tk-early-exit-form {
    display: grid;
    gap: 10px;
    max-width: 520px;
}

.tk-early-exit-form input,
.tk-early-exit-form textarea,
.tk-early-exit-reject-form input {
    width: 100%;
    box-sizing: border-box;
}

.tk-early-exit-pending {
    margin-bottom: 24px;
}

.tk-early-exit-list {
    display: grid;
    gap: 12px;
}

.tk-early-exit-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.tk-early-exit-info {
    display: grid;
    gap: 4px;
}

.tk-early-exit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.tk-early-exit-reject-form {
    display: flex;
    gap: 8px;
}

@media (max-width: 800px) {
    .tk-early-exit-item,
    .tk-early-exit-reject-form {
        flex-direction: column;
    }

    .tk-early-exit-actions {
        width: 100%;
    }
}

/* ===== MOJA EWIDENCJA ===== */

.my-tk-page {
    display: grid;
    gap: 18px;
}

.my-tk-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.my-tk-month-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.my-tk-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #d7e1ee;
    border-radius: 9px;
    text-decoration: none;
    font-size: 24px;
}

.my-tk-worker-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.my-tk-avatar {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e7f0ff;
    font-size: 20px;
    font-weight: 700;
}

.my-tk-readonly {
    margin-left: auto;
    padding: 7px 12px;
    border-radius: 999px;
    background: #edf2f7;
    font-size: 13px;
    font-weight: 600;
}

.my-tk-summary {
    display: grid;
    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );
    gap: 12px;
}

.my-tk-summary-card {
    padding: 17px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.my-tk-summary-card span,
.my-tk-summary-card small {
    display: block;
}

.my-tk-summary-card strong {
    display: block;
    margin-top: 6px;
    font-size: 21px;
}

.my-tk-future {
    background: #f8fafc;
}

.my-tk-info {
    padding: 14px 16px;
    background: #eef6ff;
    border: 1px solid #cfe2ff;
    border-radius: 10px;
}

.my-tk-table-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.my-tk-table-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
}

@media (max-width: 1200px) {
    .my-tk-summary {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 760px) {
    .my-tk-heading,
    .my-tk-worker-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .my-tk-readonly {
        margin-left: 0;
    }

    .my-tk-summary {
        grid-template-columns:
            1fr 1fr;
    }
}


/* =========================================================
   A1E AI — CANONICAL UI V5
   Jedyna definicja stylów A1E AI.
   ========================================================= */

#a1e-ai-root {
    width: 0;
    height: 0;
}

.a1e-ai-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10000;

    min-width: 128px;
    height: 58px;
    padding: 0 18px 0 9px;

    border: 0;
    border-radius: 29px;

    background: #0c2850;
    color: #ffffff;

    box-shadow: 0 10px 30px rgba(12, 40, 80, .28);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

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

.a1e-ai-launcher:hover {
    background: #123765;
}

.a1e-ai-launcher-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    border-radius: 50%;

    background: #ffffff;
    color: #0c2850;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 800;
}

.a1e-ai-launcher-label {
    white-space: nowrap;
}

.a1e-ai-panel {
    position: fixed;
    right: 24px;
    bottom: 96px;

    z-index: 10001;

    width: min(420px, calc(100vw - 32px));
    height: min(640px, calc(100vh - 120px));

    box-sizing: border-box;

    display: none;

    background: #ffffff;
    color: #17253a;

    border: 1px solid #d8e0e9;
    border-radius: 20px;

    box-shadow:
        0 22px 60px rgba(15, 34, 61, .24);

    overflow: hidden;
}

.a1e-ai-panel.open {
    display: grid;

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto
        auto;
}

.a1e-ai-header {
    min-height: 72px;
    padding: 12px 14px;

    background: #0c2850;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.a1e-ai-brand {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;
}

.a1e-ai-brand-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    object-fit: contain;

    box-sizing: border-box;

    border-radius: 10px;

    background: #ffffff;
    padding: 4px;
}

.a1e-ai-brand > div {
    min-width: 0;
}

.a1e-ai-brand strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
}

.a1e-ai-brand span {
    display: block;
    margin-top: 3px;

    font-size: 11px;
    line-height: 1.2;

    opacity: .82;
}

.a1e-ai-header-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 6px;
}

.a1e-ai-header-button {
    height: 34px;
    padding: 0 9px;

    border: 1px solid rgba(255,255,255,.24);
    border-radius: 9px;

    background: rgba(255,255,255,.10);
    color: #ffffff;

    font: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.a1e-ai-header-button:hover {
    background: rgba(255,255,255,.20);
}

.a1e-ai-header-button:disabled {
    opacity: .5;
    cursor: default;
}

.a1e-ai-close {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.12);
    color: #ffffff;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}

.a1e-ai-close:hover {
    background: rgba(255,255,255,.20);
}

.a1e-ai-messages {
    min-height: 0;

    overflow-y: auto;

    padding: 18px;

    background: #f5f7fa;
}

.a1e-ai-message {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 14px;
}

.a1e-ai-message.user {
    justify-content: flex-end;
}

.a1e-ai-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    border-radius: 50%;

    background: #0c2850;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-weight: 800;
}

.a1e-ai-bubble {
    max-width: 82%;

    box-sizing: border-box;

    padding: 12px 14px;

    background: #ffffff;
    color: #17253a;

    border: 1px solid #dde4ec;
    border-radius: 6px 16px 16px 16px;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    line-height: 1.45;
    font-size: 14px;
}

.a1e-ai-message.user .a1e-ai-bubble {
    background: #0c2850;
    color: #ffffff;

    border-color: #0c2850;
    border-radius: 16px 6px 16px 16px;
}

.a1e-ai-security-note {
    padding: 8px 14px;

    border-top: 1px solid #e1e6ec;

    background: #f9fafc;
    color: #657083;

    font-size: 10px;
    line-height: 1.35;
}

.a1e-ai-form {
    padding: 11px;

    border-top: 1px solid #e1e6ec;

    background: #ffffff;

    display: flex;
    align-items: flex-end;

    gap: 8px;
}

.a1e-ai-input {
    flex: 1;

    min-width: 0;
    min-height: 44px;
    max-height: 120px;

    box-sizing: border-box;

    resize: vertical;

    border: 1px solid #cfd8e3;
    border-radius: 12px;

    padding: 10px 12px;

    background: #ffffff;
    color: #17253a;

    font: inherit;
    font-size: 14px;
}

.a1e-ai-send {
    height: 44px;

    padding: 0 15px;

    border: 0;
    border-radius: 12px;

    background: #0c2850;
    color: #ffffff;

    font: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.a1e-ai-send:disabled {
    opacity: .55;
}

@media (max-width: 640px) {

    .a1e-ai-launcher {
        right: 14px;
        bottom: 14px;

        width: 58px;
        min-width: 58px;

        padding: 0 9px;
    }

    .a1e-ai-launcher-label {
        display: none;
    }

    .a1e-ai-panel {
        top: 74px;
        right: 10px;
        bottom: 82px;
        left: 10px;

        width: auto;
        height: auto;
    }

    .a1e-ai-brand span {
        display: none;
    }

    .a1e-ai-header-button {
        padding: 0 6px;
        font-size: 9px;
    }
}