.rooster-summary-grid,
.rooster-page-layout,
.rooster-choice-grid,
.rooster-week-card-grid {
    display: grid;
    gap: 20px;
}

.rooster-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 24px;
}

.rooster-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 24px;
}

.rooster-choice-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    border: 1px solid #d7dee8;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    color: inherit;
}

.rooster-choice-card-alt {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
}

.rooster-choice-card h2,
.rooster-day-panel-head h2 {
    margin: 0;
}

.rooster-modal-context {
    color: #1d63d8;
    font-weight: 700;
    font-size: 0.9rem;
}

.rooster-page-layout {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
}

.rooster-main-column,
.rooster-sidebar,
.rooster-week-card-list,
.page-header-actions,
.rooster-slot-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-header-with-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.rooster-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.rooster-toolbar-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0;
    min-width: 0;
}

.rooster-toolbar-side-end {
    justify-content: flex-end;
}

.rooster-toolbar-static {
    justify-content: space-between;
}

.rooster-toolbar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    text-align: center;
}

.rooster-grid-shell,
.rooster-week-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.rooster-day-panel,
.rooster-week-card {
    display: block;
    border: 1px solid #d7dee8;
    border-radius: 16px;
    background: #fff;
    padding: 18px;
    color: inherit;
    text-decoration: none;
}

.rooster-week-card {
    background: #f9fbfd;
}

.rooster-week-card:hover,
.rooster-slot-card:hover {
    border-color: #92b5de;
    box-shadow: 0 10px 28px rgba(24, 51, 92, 0.08);
}

.rooster-week-card-top,
.week-editor-header-inline,
.rooster-day-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.week-editor-header-inline {
    width: 100%;
}

.week-editor-header-main {
    flex: 1 1 auto;
    min-width: 0;
}

.rooster-week-card-meta,
.rooster-day-panel-head p {
    margin: 6px 0 0;
    color: #607284;
}

.rooster-week-card-details {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #415466;
}

.rooster-slot-card {
    width: 100%;
    text-align: left;
    border: 1px solid #dce5f0;
    border-radius: 14px;
    background: #f8fbfe;
    padding: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rooster-slot-card-empty {
    border-style: dashed;
    color: #607284;
    align-items: flex-start;
}

.rooster-slot-card strong {
    font-size: 1rem;
}

.rooster-slot-card span {
    font-weight: 600;
}

.rooster-slot-card small {
    color: #607284;
}

.rooster-template-overview {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rooster-template-search {
    max-width: 420px;
}

.rooster-template-search-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #33475b;
}

.rooster-template-search-input {
    width: 100%;
}

.rooster-template-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rooster-template-actions {
    display: flex;
    justify-content: flex-end;
}

.rooster-template-meta {
    color: #607284;
    font-size: 0.95rem;
}

.rooster-template-list .table-card {
    overflow: hidden;
}

.rooster-template-table th:last-child,
.rooster-template-table td:last-child {
    width: 1%;
    white-space: nowrap;
}

.rooster-template-name {
    font-weight: 700;
}

.rooster-select-col {
    width: 1%;
    white-space: nowrap;
}

.rooster-editor-footer-actions,
.rooster-editor-footer-form {
    display: flex;
}

.rooster-read-day-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rooster-read-person-card {
    border: 1px solid #d7dee8;
    border-radius: 16px;
    background: #fff;
}

.rooster-read-person-card-own,
.rooster-read-week-row-own .rooster-grid-name-col {
    background: #f4f9ff;
}

.rooster-read-grid-table .rooster-read-week-row-own .rooster-grid-cell {
    background: #f4f9ff;
}

.rooster-read-person-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.rooster-read-slot-list,
.rooster-read-month-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rooster-read-slot,
.rooster-read-month-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #f8fbfe;
}

.rooster-read-slot-action,
.rooster-read-month-item-action {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.rooster-read-slot-action:hover,
.rooster-read-slot-action:focus-visible,
.rooster-read-month-item-action:hover,
.rooster-read-month-item-action:focus-visible {
    border-color: #92b5de;
    background: #eef6ff;
    box-shadow: 0 8px 18px rgba(24, 51, 92, 0.08);
    transform: translateY(-1px);
}

.rooster-read-slot span,
.rooster-read-month-item span {
    color: #607284;
    font-size: 0.9rem;
}

.rooster-read-grid-table .rooster-grid-cell {
    background: #fff;
}

.rooster-read-grid-shift {
    cursor: default;
}

.rooster-read-grid-table .rooster-read-grid-shift:not(.rooster-read-grid-shift-own) {
    cursor: default;
}

.rooster-read-grid-table .rooster-read-grid-shift:not(.rooster-read-grid-shift-own):hover,
.rooster-read-grid-table .rooster-read-grid-shift:not(.rooster-read-grid-shift-own):focus-visible {
    border-color: #d6e2ef;
    background: #f8fbfe;
    box-shadow: none;
    transform: none;
}

.rooster-read-grid-shift-own {
    border-color: #9fc2ea;
    background: #eef6ff;
    font: inherit;
    color: inherit;
    appearance: none;
    cursor: pointer;
}

.rooster-read-grid-table .rooster-read-grid-shift-own:hover,
.rooster-read-grid-table .rooster-read-grid-shift-own:focus-visible {
    border-color: #92b5de;
    background: #e7f2ff;
    box-shadow: 0 8px 18px rgba(24, 51, 92, 0.08);
    transform: translateY(-1px);
}

.rooster-read-empty-cell {
    color: #94a3b8;
    font-weight: 700;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rooster-read-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.rooster-read-month-weekday {
    font-weight: 700;
    color: #607284;
    text-transform: lowercase;
}

.rooster-read-month-cell {
    min-height: 140px;
    padding: 10px;
    border: 1px solid #d7dee8;
    border-radius: 14px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rooster-read-month-cell.is-outside {
    background: #f8fafc;
    color: #94a3b8;
}

.rooster-read-month-cell.is-today {
    border-color: #9fc2ea;
    box-shadow: inset 0 0 0 1px rgba(29, 99, 216, 0.08);
}

.rooster-read-month-day-number {
    font-weight: 700;
}

.rooster-read-actions-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rooster-read-actions-context {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rooster-read-actions-context label {
    font-weight: 700;
}

.rooster-read-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.rooster-read-action-card {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    appearance: none;
    border: 1px solid #d7dee8;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.rooster-read-action-card:hover,
.rooster-read-action-card:focus-visible {
    border-color: #92b5de;
    box-shadow: 0 10px 24px rgba(24, 51, 92, 0.08);
    transform: translateY(-1px);
}

.rooster-read-action-card span {
    color: #607284;
}

.rooster-editor-footer-actions {
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

@media (max-width: 1080px) {
    .rooster-page-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .page-header-with-actions,
    .rooster-toolbar,
    .rooster-day-panel-head,
    .rooster-week-card-top,
    .week-editor-header-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-actions {
        width: 100%;
    }
}
.rooster-grid-table-wrap {
    overflow: auto;
    border: 1px solid #d7dee8;
    border-radius: 18px;
    background: #fff;
}

.rooster-grid-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    table-layout: fixed;
}

.rooster-grid-table th,
.rooster-grid-table td {
    border: 1px solid #e4ebf3;
    vertical-align: top;
}

.rooster-grid-table th {
    background: #f7fafc;
    padding: 14px 10px;
    text-align: center;
}

.rooster-grid-name-col {
    width: 210px;
    min-width: 210px;
    padding: 14px;
    background: #fbfdff;
}

.rooster-grid-head-day {
    font-weight: 700;
    text-transform: lowercase;
}

.rooster-grid-head-date,
.rooster-grid-person-meta {
    color: #607284;
    font-size: 0.92rem;
}

.rooster-grid-head-hours {
    margin-top: 10px;
    padding: 10px 8px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.rooster-grid-head-hours-success {
    background: #edf9f0;
    color: #2c7a43;
}

.rooster-grid-head-hours-warning {
    background: #fff6ea;
    color: #8b5c1b;
}

.rooster-grid-head-hours-danger {
    background: #fff1f0;
    color: #a3342b;
}

.rooster-grid-head-hours-celebration {
    background: #fff7d8;
    color: #8a6400;
}

.rooster-grid-person-name {
    font-weight: 700;
}

.rooster-grid-cell {
    width: 150px;
    padding: 8px;
    background: #fff;
    transition: background-color 0.18s ease;
}

.rooster-grid-cell-empty {
    cursor: pointer;
}

.rooster-grid-cell-inner,
.rooster-grid-shifts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rooster-grid-cell-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}

.rooster-grid-cell-inner {
    min-height: 92px;
    justify-content: flex-start;
}

.rooster-grid-empty-action,
.rooster-grid-add-extra,
.rooster-grid-shift {
    width: 100%;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
}

.rooster-grid-empty-action {
    min-height: 92px;
    border: 1px dashed transparent;
    background: transparent;
    color: #1d63d8;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.rooster-grid-empty-action span {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.rooster-grid-cell-empty:hover,
.rooster-grid-cell-empty:focus-within {
    background: #f4f9ff;
}

.rooster-grid-cell-empty:hover .rooster-grid-empty-action,
.rooster-grid-cell-empty:focus-within .rooster-grid-empty-action {
    border-color: #9fc2ea;
    background: #eef6ff;
    box-shadow: inset 0 0 0 1px rgba(29, 99, 216, 0.04);
}

.rooster-grid-cell-empty:hover .rooster-grid-empty-action span,
.rooster-grid-cell-empty:focus-within .rooster-grid-empty-action span {
    opacity: 1;
    transform: translateY(0);
}

.rooster-grid-shift {
    border: 1px solid #d6e2ef;
    background: #f8fbfe;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.rooster-grid-shift:hover,
.rooster-grid-shift:focus-visible {
    border-color: #92b5de;
    background: #eef6ff;
    box-shadow: 0 8px 18px rgba(24, 51, 92, 0.08);
    transform: translateY(-1px);
}

.rooster-grid-shift span,
.rooster-grid-add-extra {
    color: #607284;
}

.rooster-grid-shift-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.rooster-grid-shift-signal-warning {
    border-color: #f2c48c;
    background: #fff6ea;
}

.rooster-grid-shift-signal-warning:hover,
.rooster-grid-shift-signal-warning:focus-visible {
    border-color: #e5ae62;
    background: #fff1dd;
}

.rooster-grid-shift-signal-danger {
    border-color: #efb4af;
    background: #fff1f0;
}

.rooster-grid-shift-signal-danger:hover,
.rooster-grid-shift-signal-danger:focus-visible {
    border-color: #e28980;
    background: #ffe7e5;
}

.rooster-grid-shift-signal-info {
    border-color: #b8d2f2;
    background: #eef6ff;
}

.rooster-grid-shift-signal-celebration {
    border-color: #e7cb62;
    background: #fff7d8;
}

.rooster-grid-signal {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}

.rooster-grid-signal-warning {
    background: #fff6ea;
    color: #8b5c1b;
}

.rooster-grid-signal-danger {
    background: #ffd9d5;
    color: #a3342b;
}

.rooster-grid-signal-info {
    background: #dcebff;
    color: #1f63d8;
}

.rooster-grid-signal-celebration {
    background: #ffe98e;
    color: #785600;
}

.rooster-grid-add-extra {
    border: 1px dashed #d6e2ef;
    background: #fff;
}

.rooster-day-toggle-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.rooster-day-toggle {
    display: block;
    border: 1px solid #c9d7e7;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.rooster-day-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rooster-day-toggle span {
    display: block;
    padding: 10px 0;
    text-align: center;
    font-weight: 700;
    text-transform: lowercase;
    background: #fff;
}

.rooster-day-toggle.is-active span,
.rooster-day-toggle input:checked + span {
    background: #1d63d8;
    color: #fff;
}

.rooster-direct-modal-shell .form-help {
    color: #607284;
    font-size: 0.92rem;
    margin-top: 4px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.rooster-direct-modal-form,
.rooster-direct-meta-grid,
.rooster-direct-shift-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rooster-direct-modal-shell.form-card {
    padding: 18px;
}

.rooster-direct-static-field {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #d7dee8;
    border-radius: 12px;
    background: #f8fbfe;
    font-weight: 600;
}

.rooster-direct-inline-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.rooster-direct-context-title {
    margin: 0 0 8px;
    color: #1d63d8;
    font-weight: 700;
    font-size: 1rem;
}

.rooster-direct-inline-label {
    font-weight: 700;
    font-size: 0.98rem;
}

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

.rooster-direct-shifts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rooster-direct-shift-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 112px auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    border: 1px solid #d7dee8;
    border-radius: 14px;
    background: #f8fbfe;
}

.rooster-direct-shift-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rooster-direct-shift-field-time {
    padding: 10px;
    border: 1px solid #dbe6f2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.rooster-direct-shift-field-break {
    padding: 10px;
    border: 1px solid #dbe6f2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    align-self: stretch;
    justify-content: space-between;
}

.rooster-direct-time-control {
    display: grid;
    grid-template-columns: minmax(96px, 1.2fr) 68px 68px;
    gap: 10px;
    align-items: end;
}

.rooster-direct-time-input {
    min-width: 0;
}

.rooster-direct-time-part {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.rooster-direct-time-meta {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #607284;
    text-transform: uppercase;
}

.rooster-direct-time-part-manual {
    position: relative;
}

.rooster-direct-time-part:not(.rooster-direct-time-part-manual) {
    position: relative;
}

.rooster-direct-time-part:not(.rooster-direct-time-part-manual)::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 24px;
    bottom: 2px;
    width: 1px;
    background: #e2eaf3;
}

.rooster-direct-time-select {
    min-width: 0;
}

.verlof-request-time-control {
    grid-template-columns: 78px 68px 68px;
    justify-content: start;
}

.verlof-request-time-control .rooster-direct-time-input {
    width: 78px;
    max-width: 78px;
    padding-inline: 10px;
}

.rooster-direct-shift-field label {
    font-weight: 700;
    font-size: 0.95rem;
}

.rooster-direct-shift-actions {
    display: flex;
    justify-content: flex-end;
    align-self: stretch;
    align-items: flex-end;
    padding-top: 0;
}

.rooster-direct-shift-actions.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

.rooster-direct-modal-shell .form-input,
.rooster-direct-modal-shell .form-select {
    min-height: 40px;
    padding: 8px 11px;
    font-size: 0.95rem;
}

.rooster-direct-modal-shell .button {
    padding: 10px 16px;
    font-size: 0.95rem;
}

.rooster-week-picker {
    position: relative;
    display: flex;
    align-items: center;
}

.rooster-week-picker-input {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.rooster-week-picker-button {
    min-width: 52px;
    padding-inline: 0;
    justify-content: center;
}

@media (max-width: 720px) {
    .rooster-toolbar-side {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }

    .rooster-direct-shifts-head {
        flex-direction: column;
        align-items: stretch;
    }

    .rooster-direct-inline-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .rooster-direct-shift-row {
        grid-template-columns: 1fr;
    }

    .rooster-direct-time-control {
        grid-template-columns: 1fr;
    }

    .rooster-direct-shift-actions {
        justify-content: stretch;
    }

    .rooster-read-month-grid {
        grid-template-columns: 1fr;
    }

    .rooster-read-month-weekday {
        display: none;
    }

    .rooster-read-month-cell {
        min-height: 0;
    }
}