.planning-grid {
    display: grid;
    gap: 1rem;
}

.planning-grid--2 {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

.planning-card,
.planning-panel {
    background: #fff;
    border: 1px solid #e1e8f0;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .055);
}

.planning-card {
    padding: 1.25rem;
}

.planning-card__header,
.planning-panel__header {
    align-items: center;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.planning-card__header {
    margin: -1.25rem -1.25rem 1rem;
    padding: 1rem 1.25rem;
}

.planning-card__title,
.planning-panel__header h2 {
    color: #172033;
    font-size: 1rem;
    font-weight: 950;
    margin: 0;
}

.planning-panel__header {
    min-height: 58px;
    padding: 1rem 1.25rem;
}

.planning-panel__header h2 {
    align-items: center;
    display: inline-flex;
    gap: .5rem;
}

.planning-panel__header h2 i {
    color: var(--data-brand, #0f8ec7);
    font-size: 1.1rem;
}

.planning-panel__header > a {
    color: #2f6df6;
    font-weight: 900;
    text-decoration: none;
}

.planning-panel__header--compact {
    align-items: flex-start;
}

.planning-list {
    display: grid;
    gap: .75rem;
}

.planning-item {
    align-items: center;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .9rem 1rem;
}

.planning-item__meta {
    color: #8a97ab;
    font-size: .85rem;
}

.planning-badge {
    align-items: center;
    background: #eef6ff;
    border-radius: 999px;
    color: #0ea5e9;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 700;
    gap: .35rem;
    padding: .25rem .6rem;
}

.planning-badge--success {
    background: #dcfce7;
    color: #169b63;
}

.planning-badge--warning {
    background: #fff4cc;
    color: #b7791f;
}

.planning-badge--danger {
    background: #fee2e2;
    color: #dc2626;
}

.planning-badge--muted {
    background: #f1f5f9;
    color: #64748b;
}

.planning-week {
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 180px repeat(7, minmax(120px, 1fr));
    overflow: auto;
}

.planning-week__cell {
    border-bottom: 1px solid #edf2f7;
    border-right: 1px solid #edf2f7;
    min-height: 92px;
    padding: .65rem;
}

.planning-week__head {
    background: #f8fafc;
    color: #68758a;
    font-weight: 800;
}

.planning-shift {
    background: #f8fafc;
    border-left: 4px solid var(--shift-color, #16c784);
    border-radius: 10px;
    font-size: .85rem;
    margin: .35rem 0;
    padding: .5rem;
}

.planning-shift[draggable="true"] {
    cursor: grab;
}

.planning-shift.is-dragging {
    cursor: grabbing;
    opacity: .52;
}

.planning-shift__time {
    align-items: center;
    color: #172033;
    display: flex;
    font-weight: 950;
    gap: .35rem;
}

.planning-shift__title {
    color: #53657f;
    display: block;
    font-weight: 800;
    margin-top: .15rem;
}

.planning-shift__meta {
    align-items: center;
    color: #8ba0b8;
    display: flex;
    flex-wrap: wrap;
    font-size: .74rem;
    font-weight: 800;
    gap: .45rem;
    margin-top: .35rem;
}

.planning-shift__assign {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    color: #2f6df6;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 950;
    gap: .35rem;
    margin-top: .5rem;
    min-height: 30px;
    padding: .25rem .55rem;
}

.planning-schedule-detail {
    --data-brand: #2f6df6;
    --data-brand-dark: #2458da;
}

.planning-schedule-toolbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.planning-schedule-toolbar strong,
.planning-shift-summary strong {
    color: #172033;
    display: block;
    font-weight: 950;
}

.planning-schedule-toolbar span,
.planning-shift-summary span {
    color: #8ba0b8;
    display: block;
    font-size: .84rem;
    font-weight: 800;
    margin-top: .2rem;
}

.planning-schedule-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.planning-roster {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .055);
    display: grid;
    grid-template-columns: minmax(220px, 260px) repeat(7, minmax(140px, 1fr));
    margin-top: 1rem;
    overflow: auto;
}

.planning-roster__head,
.planning-roster__employee,
.planning-roster__cell {
    border-bottom: 1px solid #eef3f8;
    border-right: 1px solid #eef3f8;
}

.planning-roster__head {
    background: #f8fafc;
    color: #73839a;
    display: grid;
    gap: .15rem;
    min-height: 72px;
    padding: .85rem .95rem;
}

.planning-roster__head strong {
    color: #25324a;
    font-size: .92rem;
    font-weight: 950;
}

.planning-roster__head span,
.planning-roster__head small {
    color: #8ba0b8;
    font-size: .74rem;
    font-weight: 850;
}

.planning-roster__employee-head {
    align-items: center;
    color: #25324a;
    font-weight: 950;
}

.planning-roster__employee {
    align-items: center;
    background: #fff;
    display: grid;
    gap: .75rem;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 116px;
    padding: .9rem .95rem;
    position: sticky;
    left: 0;
    z-index: 2;
}

.planning-roster__employee strong {
    color: #172033;
    display: block;
    font-weight: 950;
}

.planning-roster__employee span,
.planning-roster__employee small {
    color: #8ba0b8;
    display: block;
    font-size: .78rem;
    font-weight: 800;
}

.planning-roster__cell {
    background: #fff;
    min-height: 116px;
    padding: .65rem;
    transition: background .16s ease, box-shadow .16s ease;
}

.planning-roster__cell.is-drag-over {
    background: #eff6ff;
    box-shadow: inset 0 0 0 2px #7fb0ff;
}

.planning-roster__placeholder {
    align-items: center;
    border: 1px dashed #dbe4ef;
    border-radius: 9px;
    color: #a4b1c2;
    display: flex;
    font-size: .78rem;
    font-weight: 850;
    justify-content: center;
    min-height: 42px;
}

.planning-roster__leave {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #2563eb;
    display: flex;
    font-size: .76rem;
    font-weight: 950;
    gap: .35rem;
    margin-top: .4rem;
    padding: .35rem .5rem;
}

.planning-roster__empty {
    color: #8ba0b8;
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
}

.planning-unassigned-panel {
    margin-top: 1rem;
}

.planning-unassigned-list {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding: 1rem 1.25rem 1.25rem;
}

.planning-unassigned-shift {
    background: #f8fafc;
    border: 1px solid #e5edf6;
    border-radius: 12px;
    padding: .8rem;
}

.planning-unassigned-shift__footer {
    color: #8ba0b8;
    display: flex;
    font-size: .76rem;
    font-weight: 850;
    justify-content: space-between;
    margin-top: .55rem;
}

.planning-shift-summary {
    background: #f8fafc;
    border: 1px solid #e5edf6;
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
}

.planning-availability-list {
    display: grid;
    gap: .7rem;
}

.planning-availability-row {
    align-items: center;
    border: 1px solid #e5edf6;
    border-radius: 12px;
    display: grid;
    gap: .75rem;
    grid-template-columns: auto 40px minmax(0, 1fr);
    padding: .8rem;
}

.planning-availability-row.is-unavailable {
    background: #f8fafc;
    opacity: .68;
}

.planning-availability-row input {
    height: 16px;
    width: 16px;
}

.planning-availability-row strong {
    color: #172033;
    display: block;
    font-weight: 950;
}

.planning-availability-row span,
.planning-availability-row small {
    color: #8ba0b8;
    display: block;
    font-size: .78rem;
    font-weight: 800;
}

.planning-modal-host .modal {
    display: block;
}

.planning-modal-host .modal.is-hidden {
    display: none !important;
}

.planning-modal-host .modal-dialog {
    margin: 6vh auto;
    max-width: 720px;
}

.planning-modal-host .planning-confirm-modal {
    background: rgba(15, 23, 42, .36);
}

.planning-modal-host .planning-confirm-modal .modal-dialog {
    max-width: 520px;
}

.planning-modal-host .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .22);
}

.planning-modal-host .modal-header,
.planning-modal-host .modal-footer {
    border-color: #edf2f7;
}

.planning-alert-icon {
    cursor: help;
    position: relative;
}

.planning-alert-icon:hover::after,
.planning-alert-icon:focus::after {
    background: #172033;
    border-radius: 7px;
    bottom: calc(100% + 8px);
    color: #fff;
    content: attr(data-tooltip);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 850;
    left: 50%;
    line-height: 1.25;
    max-width: 260px;
    min-width: 180px;
    padding: .48rem .58rem;
    position: absolute;
    text-align: left;
    transform: translateX(-50%);
    white-space: normal;
    z-index: 30;
}

.planning-alert-modal {
    align-items: center;
    background: rgba(15, 23, 42, .42);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.5rem;
    position: fixed;
    z-index: 1080;
}

.planning-alert-modal.is-hidden {
    display: none;
}

.planning-alert-modal__dialog {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .24);
    max-width: 560px;
    overflow: hidden;
    width: min(100%, 560px);
}

.planning-alert-modal__header,
.planning-alert-modal__footer {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.15rem;
}

.planning-alert-modal__header {
    border-bottom: 1px solid #edf2f7;
}

.planning-alert-modal__footer {
    border-top: 1px solid #edf2f7;
}

.planning-alert-modal__header h2 {
    color: #172033;
    font-size: 1.05rem;
    font-weight: 950;
    margin: 0;
}

.planning-alert-modal__header p,
.planning-alert-modal__more {
    color: #66758d;
    font-size: .84rem;
    font-weight: 850;
    margin: .2rem 0 0;
}

.planning-alert-modal__body {
    padding: 1rem 1.15rem;
}

.planning-month {
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 14px;
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    overflow: hidden;
}

.planning-month__day {
    border-bottom: 1px solid #edf2f7;
    border-right: 1px solid #edf2f7;
    min-height: 120px;
    padding: .65rem;
}

.planning-weekly {
    --data-brand: #2f6df6;
    --data-brand-dark: #2458da;
}

.planning-weekly__header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.planning-weekly__controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: flex-end;
}

.planning-weekly__controls form {
    margin: 0;
}

.planning-weekly__views {
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 9px;
    display: inline-flex;
    padding: .25rem;
}

.planning-weekly__views a {
    align-items: center;
    border-radius: 7px;
    color: #506179;
    display: inline-flex;
    font-weight: 900;
    min-height: 34px;
    padding: .45rem .8rem;
    text-decoration: none;
}

.planning-weekly__views a.is-active {
    background: var(--data-brand);
    color: #fff;
}

.planning-weekly__nav {
    display: inline-flex;
}

.planning-weekly__nav .data-button {
    border-radius: 0;
    min-width: 44px;
}

.planning-employee-page {
    --data-brand: #2f6df6;
    --employee-border: #e1e8f0;
    --employee-muted: #71809a;
    max-width: 1500px;
}

.planning-employee-topbar,
.planning-employee-board__header,
.planning-employee-board__actions,
.planning-employee-nav,
.planning-employee-tabs,
.planning-employee-shift__top,
.planning-employee-side-card header,
.planning-employee-manager,
.planning-employee-hero,
.planning-employee-hero__actions,
.planning-employee-availability-legend,
.planning-employee-availability-actions,
.planning-employee-compliance-row,
.planning-change-detail__actions {
    align-items: center;
    display: flex;
}

.planning-employee-topbar,
.planning-employee-board__header {
    gap: 1rem;
    justify-content: space-between;
}

.planning-employee-hero h1 {
    color: #111827;
    font-size: 1.65rem;
    font-weight: 950;
    margin: 0;
}

.planning-employee-hero p {
    color: var(--employee-muted);
    font-size: .98rem;
    font-weight: 800;
    margin: .35rem 0 0;
}

.planning-employee-hero {
    gap: 1rem;
    justify-content: space-between;
}

.planning-employee-hero__actions {
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: flex-end;
}

.planning-employee-outline {
    border-color: var(--data-brand);
    color: var(--data-brand);
}

.planning-employee-metrics {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.planning-employee-metrics article,
.planning-employee-board,
.planning-employee-tabs,
.planning-employee-side-card {
    background: #fff;
    border: 1px solid var(--employee-border);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .055);
}

.planning-employee-metrics article {
    min-height: 108px;
    overflow: hidden;
    padding: 1.15rem 1.25rem;
    position: relative;
}

.planning-employee-metrics article > span,
.planning-employee-side-card small,
.planning-change-detail span {
    color: #9aa8bb;
    display: block;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.planning-employee-metrics article strong {
    color: #111827;
    display: block;
    font-size: 1.55rem;
    font-weight: 950;
    margin-top: .6rem;
}

.planning-employee-metrics article b {
    color: var(--data-brand);
    display: block;
    font-size: 1.2rem;
    font-weight: 950;
    margin-top: .35rem;
}

.planning-employee-metrics article small {
    color: var(--employee-muted);
    font-size: .78rem;
    font-weight: 850;
}

.planning-employee-metrics article em {
    background: #fff1d6;
    border-radius: 999px;
    color: #f59e0b;
    font-size: .65rem;
    font-style: normal;
    font-weight: 950;
    margin-left: .45rem;
    padding: .2rem .5rem;
    text-transform: uppercase;
    vertical-align: middle;
}

.planning-employee-metrics article > i {
    color: #eaf0f8;
    font-size: 2.45rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.planning-employee-metrics .is-success {
    align-items: center;
    color: #22c55e;
    display: flex;
    gap: .55rem;
    text-transform: uppercase;
}

.planning-employee-metrics .is-success i {
    background: #dcfce7;
    border-radius: 999px;
    color: #22c55e;
    padding: .35rem;
}

.planning-employee-layout {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 300px;
}

.planning-employee-layout--single {
    grid-template-columns: 1fr;
}

.planning-employee-main {
    display: grid;
    gap: 1.5rem;
}

.planning-employee-tabs {
    justify-content: space-around;
    overflow: hidden;
}

.planning-employee-tabs a {
    border-bottom: 3px solid transparent;
    color: #6f7d95;
    flex: 1;
    font-weight: 950;
    min-height: 54px;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
}

.planning-employee-tabs a.is-active {
    border-color: var(--data-brand);
    color: var(--data-brand);
}

.planning-employee-board {
    overflow: hidden;
}

.planning-employee-board__header {
    border-bottom: 1px solid #edf2f7;
    padding: 1.35rem 1.5rem;
}

.planning-employee-board__header h2 {
    color: #111827;
    font-size: 1.15rem;
    font-weight: 950;
    margin: 0;
}

.planning-employee-board__header p {
    color: var(--employee-muted);
    font-size: .82rem;
    font-weight: 800;
    margin: .25rem 0 0;
}

.planning-employee-board__actions {
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: flex-end;
}

.planning-employee-board__actions form {
    margin: 0;
}

.planning-employee-nav {
    background: #f3f6fa;
    border-radius: 8px;
    overflow: hidden;
}

.planning-employee-nav a {
    align-items: center;
    color: #53627a;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 950;
    min-height: 38px;
    padding: .55rem .75rem;
    text-decoration: none;
}

.planning-employee-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    overflow: auto;
}

.planning-employee-day {
    border-right: 1px solid #edf2f7;
    min-height: 292px;
}

.planning-employee-day:last-child {
    border-right: 0;
}

.planning-employee-day > header {
    background: #fbfcfe;
    border-bottom: 1px solid #edf2f7;
    min-height: 70px;
    padding: .9rem;
    text-align: center;
}

.planning-employee-day > header span {
    color: #9aa8bb;
    display: block;
    font-size: .72rem;
    font-weight: 950;
}

.planning-employee-day > header strong {
    color: #111827;
    display: block;
    font-size: 1.2rem;
    font-weight: 950;
}

.planning-employee-day.is-weekend > header span,
.planning-employee-day.is-weekend > header strong {
    color: var(--data-brand);
}

.planning-employee-day__body {
    display: grid;
    gap: .7rem;
    padding: .8rem;
}

.planning-employee-shift {
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    display: grid;
    gap: .45rem;
    min-height: 132px;
    padding: .75rem;
}

.planning-employee-shift[data-tone="morning"] {
    background: #eff6ff;
    color: #1e3a8a;
}

.planning-employee-shift[data-tone="afternoon"] {
    background: #faf5ff;
    border-color: #e9d5ff;
    color: #6d28d9;
}

.planning-employee-shift[data-tone="night"] {
    background: #172033;
    border-color: #26364f;
    color: #fff;
}

.planning-employee-shift__top {
    justify-content: space-between;
}

.planning-employee-shift__top strong {
    color: inherit;
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.planning-employee-shift b {
    color: inherit;
    font-size: 1rem;
    font-weight: 950;
}

.planning-employee-shift small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.35;
}

.planning-employee-shift[data-tone="night"] small {
    color: #a5b4fc;
}

.planning-employee-interview {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    color: #065f46;
    display: grid;
    gap: .3rem;
    padding: .75rem;
    text-decoration: none;
}

.planning-employee-interview:hover {
    background: #d1fae5;
    color: #064e3b;
}

.planning-employee-interview > span {
    font-size: .66rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.planning-employee-interview strong,
.planning-employee-interview b {
    color: inherit;
    font-weight: 950;
}

.planning-employee-interview strong {
    font-size: .78rem;
}

.planning-employee-interview b {
    font-size: 1rem;
}

.planning-employee-interview small {
    color: #047857;
    font-size: .7rem;
    font-weight: 750;
    line-height: 1.35;
}

.planning-employee-action {
    background: #ffedd5;
    border-radius: 6px;
    color: #f59e0b;
    font-size: .62rem;
    font-weight: 950;
    padding: .28rem .42rem;
    text-transform: uppercase;
}

.planning-employee-check {
    align-items: center;
    background: #22c55e;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.planning-employee-availability {
    align-items: center;
    border: 1px dashed #dbe4ef;
    border-radius: 12px;
    color: #a0adbf;
    display: grid;
    font-size: .76rem;
    font-weight: 950;
    gap: .4rem;
    justify-items: center;
    min-height: 132px;
    text-transform: uppercase;
}

.planning-employee-availability i {
    font-size: 1.3rem;
}

.planning-employee-rest {
    align-items: center;
    color: #cbd5e1;
    display: flex;
    font-size: .86rem;
    font-weight: 950;
    justify-content: center;
    min-height: 132px;
    text-transform: uppercase;
}

.planning-employee-side {
    display: grid;
    gap: 1.25rem;
}

.planning-employee-side-card {
    overflow: hidden;
}

.planning-employee-side-card header {
    border-bottom: 1px solid #edf2f7;
    gap: .55rem;
    min-height: 60px;
    padding: 1rem 1.15rem;
}

.planning-employee-side-card header h2 {
    color: #111827;
    flex: 1;
    font-size: 1rem;
    font-weight: 950;
    margin: 0;
}

.planning-employee-side-card header > i {
    color: var(--data-brand);
}

.planning-employee-side-card header a {
    color: var(--data-brand);
    font-size: .72rem;
    font-weight: 950;
    text-decoration: none;
    text-transform: uppercase;
}

.planning-employee-info-row {
    display: grid;
    gap: .75rem;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 1rem 1.15rem;
}

.planning-employee-info-row > span {
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    color: #94a3b8;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.planning-employee-info-row strong {
    color: #111827;
    display: block;
    font-weight: 950;
}

.planning-employee-info-row em {
    color: #9aa8bb;
    display: block;
    font-size: .75rem;
    font-style: italic;
    font-weight: 800;
}

.planning-employee-manager {
    gap: .45rem;
}

.planning-employee-leaves {
    display: grid;
    gap: .85rem;
    padding: 1rem 1.15rem;
}

.planning-employee-leaves article {
    border-left: 3px solid #8b5cf6;
    padding-left: .9rem;
}

.planning-employee-leaves strong {
    color: #172033;
    display: block;
    font-weight: 950;
}

.planning-employee-leaves span,
.planning-employee-leaves p {
    color: #728098;
    font-size: .82rem;
    font-weight: 800;
    margin: .15rem 0 .35rem;
}

.planning-employee-help {
    background: #2563eb;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(37, 99, 235, .25);
    color: #fff;
    overflow: hidden;
    padding: 1.35rem;
    position: relative;
}

.planning-employee-help::after {
    bottom: -42px;
    color: rgba(255, 255, 255, .1);
    content: "?";
    font-size: 8rem;
    font-weight: 950;
    line-height: 1;
    position: absolute;
    right: -4px;
}

.planning-employee-help h2 {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 950;
    margin: 0 0 .7rem;
}

.planning-employee-help p {
    color: rgba(255, 255, 255, .88);
    font-weight: 800;
    line-height: 1.45;
    margin: 0 0 1.2rem;
}

.planning-employee-help a {
    align-items: center;
    background: rgba(255, 255, 255, .2);
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-weight: 950;
    gap: .5rem;
    justify-content: center;
    min-height: 42px;
    position: relative;
    text-decoration: none;
    z-index: 1;
}

.planning-employee-availability-panel {
    overflow: hidden;
}

.planning-employee-availability-legend {
    gap: 1rem;
    justify-content: flex-end;
}

.planning-employee-availability-legend span {
    align-items: center;
    color: #53627a;
    display: inline-flex;
    font-size: .8rem;
    font-weight: 900;
    gap: .35rem;
}

.planning-employee-availability-legend span::before {
    border: 2px solid #86efac;
    border-radius: 4px;
    content: "";
    height: 13px;
    width: 13px;
}

.planning-employee-availability-legend span[data-tone="unavailable"]::before {
    border-color: #fda4af;
}

.planning-employee-availability-grid {
    display: grid;
    grid-template-columns: 150px repeat(3, minmax(180px, 1fr));
}

.planning-employee-availability-grid > * {
    border-bottom: 1px solid #edf2f7;
}

.planning-employee-availability-head {
    background: #fbfcfe;
    color: #9aa8bb;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    padding: 1rem 1.15rem;
    text-transform: uppercase;
}

.planning-employee-availability-day {
    align-items: center;
    color: #111827;
    display: flex;
    font-size: 1rem;
    font-weight: 950;
    padding: 1rem 1.15rem;
}

.planning-employee-availability-choice {
    padding: .55rem;
}

.planning-employee-availability-card {
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #dbe4ef;
    border-radius: 8px;
    color: #9aa8bb;
    display: grid;
    gap: .25rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 54px;
    padding: .7rem .85rem;
    text-align: left;
    width: 100%;
}

.planning-employee-availability-card strong {
    color: inherit;
    font-size: .82rem;
    font-weight: 950;
}

.planning-employee-availability-card small {
    color: #fb7185;
    font-size: .68rem;
    font-weight: 800;
}

.planning-employee-availability-card i {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.planning-employee-availability-choice[data-state="available"] .planning-employee-availability-card {
    background: #ecfdf5;
    border-color: #86efac;
    border-style: solid;
    color: #047857;
}

.planning-employee-availability-choice[data-state="available"] .planning-employee-availability-card i {
    background: #10b981;
    color: #fff;
}

.planning-employee-availability-choice[data-state="unavailable"] .planning-employee-availability-card {
    background: #fff1f2;
    border-color: #fecdd3;
    border-style: solid;
    color: #e11d48;
}

.planning-employee-availability-choice[data-state="unavailable"] .planning-employee-availability-card i {
    background: #fb7185;
    color: #fff;
}

.planning-employee-availability-actions {
    gap: .75rem;
    justify-content: flex-end;
    padding: 1.35rem 1.5rem;
}

.planning-employee-link-action {
    align-items: center;
    color: var(--data-brand);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 950;
    gap: .35rem;
    text-decoration: none;
}

.planning-employee-exception-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1rem 1.5rem 1.35rem;
}

.planning-employee-exception-list article {
    align-items: center;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    display: grid;
    gap: .8rem;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 72px;
    padding: .8rem;
}

.planning-employee-exception-list time {
    align-items: center;
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .05);
    display: grid;
    height: 46px;
    justify-items: center;
    line-height: 1;
    width: 46px;
}

.planning-employee-exception-list time span {
    color: #ef4444;
    font-size: .62rem;
    font-weight: 950;
}

.planning-employee-exception-list time strong,
.planning-employee-exception-list article > div > strong {
    color: #111827;
    font-weight: 950;
}

.planning-employee-exception-list article > div > span,
.planning-employee-empty {
    color: #71809a;
    font-size: .82rem;
    font-weight: 800;
    margin: .15rem 0 0;
}

.planning-employee-side-body {
    padding: 1.15rem;
}

.planning-employee-compliance-row {
    justify-content: space-between;
}

.planning-employee-compliance-row span {
    color: #71809a;
    font-weight: 850;
}

.planning-employee-compliance-row strong {
    color: #111827;
    font-weight: 950;
}

.planning-employee-progress {
    background: #edf2f7;
    border-radius: 999px;
    height: 7px;
    margin: 1rem 0;
    overflow: hidden;
}

.planning-employee-progress span {
    background: #22c55e;
    border-radius: inherit;
    display: block;
    height: 100%;
}

.planning-employee-compliance p {
    color: #8a98ad;
    font-size: .78rem;
    font-style: italic;
    font-weight: 800;
    line-height: 1.45;
    margin: 0;
}

.planning-employee-rules ul {
    display: grid;
    gap: .95rem;
    list-style: none;
    margin: 0;
    padding: 1.15rem 1.25rem 1.25rem;
}

.planning-employee-rules li {
    color: #53627a;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.35;
    padding-left: 1.35rem;
    position: relative;
}

.planning-employee-rules li::before {
    border: 2px solid var(--data-brand);
    border-radius: 999px;
    content: "";
    height: 7px;
    left: 0;
    position: absolute;
    top: .35rem;
    width: 7px;
}

.planning-employee-help--purple {
    background: #7c3aed;
    box-shadow: 0 14px 34px rgba(124, 58, 237, .24);
}

.planning-employee-request-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-employee-request-metrics article {
    display: grid;
    gap: .15rem;
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 86px;
}

.planning-employee-request-metrics article > i {
    align-items: center;
    background: #eff6ff;
    border-radius: 12px;
    color: var(--data-brand);
    display: inline-flex;
    font-size: 1.6rem;
    grid-row: span 2;
    height: 48px;
    justify-content: center;
    position: static;
    width: 48px;
}

.planning-employee-request-metrics article:nth-child(2) > i {
    background: #fff7ed;
    color: #f59e0b;
}

.planning-employee-request-metrics article:nth-child(3) > i {
    background: #ecfdf5;
    color: #22c55e;
}

.planning-employee-request-metrics article strong {
    font-size: 1.45rem;
    margin: 0;
}

.planning-employee-requests-board {
    overflow: hidden;
}

.planning-employee-request-table-wrap {
    overflow: auto;
}

.planning-employee-request-table {
    border-collapse: collapse;
    min-width: 960px;
    width: 100%;
}

.planning-employee-request-table th,
.planning-employee-request-table td {
    border-bottom: 1px solid #edf2f7;
    padding: 1.15rem 1.35rem;
    text-align: left;
    vertical-align: middle;
}

.planning-employee-request-table th {
    background: #fbfcfe;
    color: #9aa8bb;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.planning-employee-request-table td {
    color: #53627a;
    font-weight: 850;
}

.planning-employee-request-table td:first-child {
    color: #65748b;
    font-size: .98rem;
    font-weight: 950;
}

.planning-employee-request-table strong {
    color: #111827;
    display: block;
    font-weight: 950;
}

.planning-employee-request-table span {
    color: #71809a;
    display: block;
    font-size: .82rem;
    font-weight: 800;
    margin-top: .15rem;
}

.planning-employee-request-type,
.planning-employee-request-status {
    border-radius: 6px;
    display: inline-flex !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    margin: 0 !important;
    padding: .25rem .45rem;
    text-transform: uppercase;
}

.planning-employee-request-type[data-tone="swap"] {
    background: #eff6ff;
    color: #2563eb;
}

.planning-employee-request-type[data-tone="time"] {
    background: #ffedd5;
    color: #f97316;
}

.planning-employee-request-type[data-tone="unavailable"] {
    background: #f3e8ff;
    color: #9333ea;
}

.planning-employee-request-status {
    align-items: center;
    background: transparent;
    gap: .45rem;
    text-transform: none;
}

.planning-employee-request-status::before {
    border-radius: 999px;
    content: "";
    height: 9px;
    width: 9px;
}

.planning-employee-request-status[data-tone="pending"] {
    color: #f59e0b;
}

.planning-employee-request-status[data-tone="pending"]::before {
    background: #f59e0b;
}

.planning-employee-request-status[data-tone="approved"] {
    color: #22c55e;
}

.planning-employee-request-status[data-tone="approved"]::before {
    background: #22c55e;
}

.planning-employee-request-status[data-tone="refused"] {
    color: #ef4444;
}

.planning-employee-request-status[data-tone="refused"]::before {
    background: #ef4444;
}

.planning-employee-request-status[data-tone="cancelled"] {
    color: #94a3b8;
}

.planning-employee-request-status[data-tone="cancelled"]::before {
    background: #cbd5e1;
}

.planning-employee-icon-action {
    align-items: center;
    background: transparent;
    border: 0;
    color: #94a3b8;
    display: inline-flex;
    font-size: 1.1rem;
    justify-content: center;
    margin-left: .55rem;
    padding: .15rem;
    text-decoration: none;
}

.planning-employee-icon-action:not(:disabled):hover {
    color: var(--data-brand);
}

.planning-employee-request-footer {
    align-items: center;
    color: #71809a;
    display: flex;
    font-size: .82rem;
    font-weight: 850;
    justify-content: space-between;
    padding: 1rem 1.35rem;
}

.planning-employee-request-footer > div {
    display: flex;
    gap: .5rem;
}

.planning-employee-request-info-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-employee-request-info {
    padding-bottom: 1.05rem;
}

.planning-employee-request-info p {
    color: #71809a;
    font-weight: 800;
    line-height: 1.5;
    margin: 0;
    padding: 0 1.25rem;
}

.planning-change-new-hero {
    display: grid;
    gap: .4rem;
}

.planning-change-new-hero a {
    color: var(--data-brand);
    font-weight: 950;
    text-decoration: none;
}

.planning-change-new-hero h1 {
    color: #111827;
    font-size: 1.85rem;
    font-weight: 950;
    margin: .5rem 0 0;
}

.planning-change-new-hero p {
    color: #71809a;
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.planning-change-new-layout {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 300px;
}

.planning-change-new-layout > main {
    display: grid;
    gap: 1.5rem;
}

.planning-change-new-card .planning-employee-board__header h2 {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.planning-change-new-body {
    display: grid;
    gap: 1.25rem;
    padding: 1.45rem;
}

.planning-change-new-label,
.planning-change-new-field > span,
.planning-change-new-fields label > span,
.planning-change-upload > span {
    color: #36445a;
    display: block;
    font-size: .86rem;
    font-weight: 950;
    margin-bottom: .55rem;
}

.planning-change-new-label span,
.planning-change-new-field b,
.planning-change-new-fields b {
    color: #ef4444;
}

.planning-change-type-grid,
.planning-change-new-fields {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-change-new-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-change-type-option input {
    position: absolute;
    opacity: 0;
}

.planning-change-type-option span {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    display: grid;
    gap: .25rem;
    min-height: 112px;
    padding: 1rem;
}

.planning-change-type-option input:checked + span {
    background: #eff6ff;
    border-color: var(--data-brand);
    box-shadow: 0 0 0 1px var(--data-brand);
}

.planning-change-type-option i {
    color: var(--data-brand);
    font-size: 1.55rem;
}

.planning-change-type-option strong {
    color: #111827;
    font-weight: 950;
}

.planning-change-type-option small {
    color: #71809a;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.25;
}

.planning-change-new-fields select,
.planning-change-new-fields input,
.planning-change-new-field select,
.planning-change-new-field input,
.planning-change-new-field textarea {
    background: #f8fafc;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    color: #36445a;
    font-weight: 850;
    min-height: 48px;
    padding: .75rem .95rem;
    width: 100%;
}

.planning-change-admin-page {
    max-width: 1440px;
}

.planning-change-admin-metrics article:nth-child(1) strong,
.planning-change-admin-metrics article:nth-child(1) > i {
    color: #f59e0b;
}

.planning-change-admin-metrics article:nth-child(2) strong,
.planning-change-admin-metrics article:nth-child(2) > i {
    color: #22c55e;
}

.planning-change-admin-metrics article:nth-child(3) strong,
.planning-change-admin-metrics article:nth-child(3) > i {
    color: #ef4444;
}

.planning-change-admin-metrics article:nth-child(4) strong,
.planning-change-admin-metrics article:nth-child(4) > i {
    color: var(--data-brand);
}

.planning-change-admin-filters {
    align-items: center;
    background: #fff;
    border: 1px solid var(--employee-border);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .045);
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(260px, 1fr) 170px 190px auto;
    padding: 1rem;
}

.planning-change-admin-filters label {
    align-items: center;
    border: 1px solid #dfe7f1;
    border-radius: 9px;
    color: #94a3b8;
    display: flex;
    gap: .6rem;
    min-height: 42px;
    padding: 0 .8rem;
}

.planning-change-admin-filters input,
.planning-change-admin-filters select {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 9px;
    color: #1f2937;
    font-weight: 850;
    min-height: 42px;
    padding: 0 .75rem;
    width: 100%;
}

.planning-change-admin-filters label input {
    border: 0;
    min-height: 38px;
    padding: 0;
}

.planning-change-admin-filters > div {
    align-items: center;
    color: #64748b;
    display: flex;
    font-weight: 850;
    gap: .55rem;
    justify-content: flex-end;
    white-space: nowrap;
}

.planning-change-admin-filters a {
    border-radius: 7px;
    color: #64748b;
    padding: .35rem .55rem;
    text-decoration: none;
}

.planning-change-admin-filters a.is-active {
    background: #eff6ff;
    color: var(--data-brand);
}

.planning-change-admin-board {
    overflow: hidden;
}

.planning-change-admin-table th,
.planning-change-admin-table td {
    padding: 1rem 1.2rem;
}

.planning-change-admin-table td:last-child {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.planning-change-admin-table td:last-child form {
    margin: 0;
}

.planning-change-admin-employee {
    align-items: center;
    display: flex;
    gap: .8rem;
}

.planning-change-admin-employee .data-avatar {
    flex: 0 0 38px;
    height: 38px;
    width: 38px;
}

.planning-change-admin-new-time {
    color: var(--data-brand) !important;
}

.planning-change-admin-action {
    align-items: center;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    display: inline-flex;
    font-size: 1.2rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.planning-change-admin-action[data-tone="refuse"] {
    background: #fff;
    color: #ef4444;
}

.planning-change-admin-action[data-tone="approve"] {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.planning-change-admin-details {
    color: #94a3b8;
    font-weight: 900;
    text-decoration: none;
}

.planning-change-admin-info-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-change-admin-note {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    color: #1d4ed8;
    padding: 1.45rem 1.6rem;
}

.planning-change-admin-note--purple {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4f46e5;
}

.planning-change-admin-note h2 {
    align-items: center;
    color: #1e3a8a;
    display: flex;
    font-size: 1.05rem;
    font-weight: 950;
    gap: .5rem;
    margin: 0 0 .65rem;
}

.planning-change-admin-note p {
    font-weight: 800;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.planning-change-admin-note a {
    color: #1e3a8a;
    font-weight: 950;
    text-decoration: none;
}

.planning-change-new-field textarea {
    min-height: 120px;
    resize: vertical;
}

.planning-change-new-field small {
    color: #9aa8bb;
    display: block;
    font-size: .74rem;
    font-style: italic;
    font-weight: 800;
    margin-top: .55rem;
}

.planning-change-new-field.is-disabled,
.planning-change-new-fields label.is-disabled {
    opacity: .55;
}

.planning-change-new-field select:disabled,
.planning-change-new-fields input:disabled {
    background: #f8fafc;
    cursor: not-allowed;
}

.planning-change-upload {
    border: 2px dashed #dbe4ef;
    border-radius: 12px;
    display: grid;
    justify-items: center;
    min-height: 142px;
    padding: 1.2rem;
    position: relative;
    text-align: center;
}

.planning-change-upload input {
    inset: 0;
    opacity: 0;
    position: absolute;
}

.planning-change-upload strong {
    color: #53627a;
    display: grid;
    font-weight: 950;
    gap: .35rem;
    justify-items: center;
}

.planning-change-upload strong i {
    color: #cbd5e1;
    font-size: 2rem;
}

.planning-change-upload small {
    color: #9aa8bb;
    font-weight: 850;
}

.planning-change-new-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
}

.planning-change-summary,
.planning-change-rules {
    background: #fff;
    border: 1px solid var(--employee-border);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .055);
}

.planning-change-rules {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
    padding: 1.25rem;
}

.planning-change-rules h2 {
    align-items: center;
    color: #f59e0b;
    display: flex;
    font-size: 1rem;
    font-weight: 950;
    gap: .45rem;
    margin: 0 0 1rem;
}

.planning-change-rules ul {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding-left: 1.1rem;
}

.planning-change-rules li {
    font-size: .83rem;
    font-weight: 800;
    line-height: 1.45;
}

.planning-change-new-help {
    background: #0f172a;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
}

.planning-change-detail__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-change-detail__grid .full {
    grid-column: 1 / -1;
}

.planning-change-detail strong {
    color: #172033;
    display: block;
    font-weight: 950;
    margin-top: .25rem;
}

.planning-change-detail small,
.planning-change-detail p {
    color: #728098;
    font-weight: 800;
    margin: .25rem 0 0;
}

.planning-change-detail__actions {
    border-top: 1px solid #edf2f7;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
}

@media (max-width: 1180px) {
    .planning-employee-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .planning-employee-layout {
        grid-template-columns: 1fr;
    }

    .planning-change-new-layout {
        grid-template-columns: 1fr;
    }

    .planning-change-admin-filters {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 780px) {
    .planning-employee-topbar,
    .planning-employee-board__header,
    .planning-employee-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .planning-employee-metrics {
        grid-template-columns: 1fr;
    }

    .planning-employee-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .planning-employee-grid {
        grid-template-columns: repeat(7, minmax(190px, 1fr));
    }

    .planning-employee-availability-grid {
        grid-template-columns: 120px repeat(3, minmax(180px, 1fr));
        overflow: auto;
    }

    .planning-employee-exception-list {
        grid-template-columns: 1fr;
    }

    .planning-change-detail__grid {
        grid-template-columns: 1fr;
    }

    .planning-employee-request-metrics,
    .planning-employee-request-info-grid,
    .planning-change-admin-filters,
    .planning-change-admin-info-grid,
    .planning-change-type-grid,
    .planning-change-new-fields {
        grid-template-columns: 1fr;
    }

    .planning-change-admin-filters > div {
        justify-content: flex-start;
    }

    .planning-employee-request-footer,
    .planning-change-new-actions {
        align-items: stretch;
        flex-direction: column;
        gap: .75rem;
    }
}

.planning-weekly__nav .data-button:first-child {
    border-radius: 9px 0 0 9px;
}

.planning-weekly__nav .data-button:last-child {
    border-radius: 0 9px 9px 0;
}

.planning-weekly__filters {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .055);
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    padding: 1.15rem;
}

.planning-weekly__filter-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.planning-weekly__filter-fields select {
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 9px;
    color: #344154;
    font-weight: 850;
    min-height: 42px;
    min-width: 230px;
    padding: .55rem 2.1rem .55rem .8rem;
}

.planning-weekly__legend {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    justify-content: flex-end;
}

.planning-weekly__legend span {
    align-items: center;
    color: #66758d;
    display: inline-flex;
    font-size: .86rem;
    font-weight: 850;
    gap: .35rem;
}

.planning-weekly__dot,
.planning-weekly__legend span::before {
    border-radius: 999px;
    content: "";
    display: inline-flex;
    height: 13px;
    width: 13px;
}

.planning-weekly__legend [data-tone="morning"]::before {
    background: #dbeafe;
    border: 1px solid #93c5fd;
}

.planning-weekly__legend [data-tone="afternoon"]::before {
    background: #f3e8ff;
    border: 1px solid #c084fc;
}

.planning-weekly__legend [data-tone="night"]::before {
    background: #344154;
}

.planning-weekly__legend [data-tone="leave"]::before {
    background: #ffedd5;
    border: 1px solid #fdba74;
}

.planning-weekly__legend [data-tone="sick"]::before {
    background: #fee2e2;
    border: 1px solid #fca5a5;
}

.planning-monthly-page {
    gap: .8rem;
    padding-top: .4rem;
}

.planning-monthly-topbar,
.planning-monthly-toolbar {
    align-items: center;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 10px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .72rem 1rem;
}

.planning-monthly-topbar {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: -.4rem -1.5rem .4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.planning-monthly-actions,
.planning-monthly-title,
.planning-monthly-nav,
.planning-monthly-filters {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.planning-monthly-actions form,
.planning-monthly-filters {
    margin: 0;
}

.planning-monthly-title h1 {
    color: #172033;
    font-size: 1.05rem;
    font-weight: 950;
    margin: 0 .55rem 0 0;
}

.planning-monthly-filters {
    justify-content: flex-end;
}

.planning-monthly-filters select {
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    color: #344154;
    font-size: .82rem;
    font-weight: 850;
    min-height: 36px;
    min-width: 158px;
    padding: .4rem 1.9rem .4rem .65rem;
}

.planning-month-table {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .045);
    overflow-x: auto;
    overflow-y: hidden;
}

.planning-month-table__header,
.planning-month-table__row {
    display: grid;
    grid-template-columns: var(--planning-month-columns);
    min-width: max-content;
}

.planning-month-table__header {
    background: #f8fafc;
    border-bottom: 1px solid #e6edf5;
    position: sticky;
    top: 0;
    z-index: 6;
}

.planning-month-table__employee-head,
.planning-month-table__head,
.planning-month-table__employee,
.planning-month-table__cell,
.planning-month-table__week-total,
.planning-month-table__month-total {
    border-right: 1px solid #edf2f7;
}

.planning-month-table__employee-head,
.planning-month-table__head {
    align-items: center;
    color: #8ba0b8;
    display: flex;
    font-size: .72rem;
    font-weight: 950;
    justify-content: center;
    min-height: 54px;
    text-transform: uppercase;
}

.planning-month-table__employee-head {
    justify-content: flex-start;
    padding: 0 1rem;
    position: sticky;
    left: 0;
    z-index: 7;
}

.planning-month-table__employee-head span {
    margin-left: .25rem;
}

.planning-month-table__head {
    flex-direction: column;
    gap: .15rem;
}

.planning-month-table__head strong {
    color: #334155;
    font-size: .84rem;
    font-weight: 950;
}

.planning-month-table__head.is-today strong {
    color: #2563eb;
}

.planning-month-table__head.is-weekend,
.planning-month-table__head--week,
.planning-month-table__head--month {
    background: #f1f5f9;
}

.planning-month-table__row {
    border-bottom: 1px solid #edf2f7;
    min-height: 78px;
}

.planning-month-table__employee {
    align-items: center;
    background: #fff;
    display: grid;
    gap: .7rem;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 78px;
    padding: .75rem 1rem;
    position: sticky;
    left: 0;
    z-index: 5;
}

.planning-month-table__employee .data-avatar {
    height: 42px;
    width: 42px;
}

.planning-month-table__employee strong {
    color: #172033;
    display: block;
    font-size: .85rem;
    font-weight: 950;
    line-height: 1.1;
}

.planning-month-table__employee span {
    color: #71829a;
    display: block;
    font-size: .73rem;
    font-weight: 850;
    margin-top: .14rem;
}

.planning-month-table__cell,
.planning-month-table__week-total,
.planning-month-table__month-total {
    background: #fff;
    min-height: 78px;
}

.planning-month-table__cell {
    align-content: start;
    display: grid;
    gap: .22rem;
    padding: .35rem .3rem;
}

.planning-month-table__cell.is-weekend,
.planning-month-table__week-total,
.planning-month-table__month-total {
    background: #f8fafc;
}

.planning-month-table__cell.is-drag-over {
    background: #eff6ff;
    box-shadow: inset 0 0 0 2px #7fb0ff;
}

.planning-month-shift {
    border-radius: 4px;
    display: grid;
    gap: .05rem;
    min-height: 34px;
    padding: .25rem .32rem;
}

.planning-month-shift[draggable="true"] {
    cursor: grab;
}

.planning-month-shift strong {
    font-size: .62rem;
    font-weight: 950;
    line-height: 1.05;
}

.planning-month-shift span {
    font-size: .58rem;
    font-weight: 900;
    line-height: 1;
}

.planning-month-empty {
    align-items: center;
    background: transparent;
    border: 1px dashed #d7e1ee;
    border-radius: 4px;
    color: #c1ccdb;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: .9rem;
    font-weight: 950;
    justify-content: center;
    min-height: 28px;
    width: 100%;
}

.planning-month-empty:hover {
    background: #f8fbff;
    border-color: #93c5fd;
    color: #2563eb;
}

.planning-month-more {
    align-items: center;
    background: #eef2ff;
    border-radius: 4px;
    color: #4f46e5;
    display: inline-flex;
    font-size: .62rem;
    font-weight: 950;
    justify-content: center;
    min-height: 20px;
}

.planning-month-shift--morning,
.planning-month-shift--published {
    background: #dbeafe;
    color: #1d4ed8;
}

.planning-month-shift--afternoon {
    background: #f3e8ff;
    color: #7e22ce;
}

.planning-month-shift--night {
    background: #182235;
    color: #fff;
}

.planning-month-shift--draft,
.planning-month-shift--modified {
    background: #ffedd5;
    color: #c2410c;
}

.planning-month-leave {
    align-items: center;
    align-self: center;
    border-radius: 0;
    display: flex;
    font-size: .58rem;
    font-weight: 950;
    justify-content: center;
    min-height: 32px;
    text-transform: uppercase;
}

.planning-month-leave--leave {
    background: #fff7ed;
    color: #f97316;
}

.planning-month-leave--sick {
    background: #fff1f2;
    color: #ef4444;
}

.planning-month-table__week-total,
.planning-month-table__month-total {
    align-items: center;
    color: #71829a;
    display: flex;
    font-size: .75rem;
    font-weight: 950;
    justify-content: center;
}

.planning-month-table__month-total.is-alert {
    color: #ef4444;
}

.planning-month-table__footer {
    align-items: center;
    background: #f8fafc;
    border-top: 1px solid #e6edf5;
    display: flex;
    justify-content: space-between;
    min-width: max-content;
    padding: .75rem 1rem;
}

.planning-month-summary {
    align-items: center;
    color: #66758d;
    display: flex;
    font-size: .8rem;
    font-weight: 850;
    gap: 1.5rem;
    justify-content: flex-end;
}

.planning-month-summary strong {
    color: #172033;
    font-weight: 950;
}

.planning-week-table {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .055);
    overflow-x: auto;
    overflow-y: hidden;
}

.planning-week-table__header,
.planning-week-table__row {
    display: grid;
    grid-template-columns: 300px repeat(7, minmax(160px, 1fr));
    min-width: 1420px;
}

.planning-week-table__body {
    overflow: visible;
    position: relative;
}

.planning-week-table__header {
    overflow: hidden;
}

.planning-week-table__row {
    border-top: 1px solid #edf2f7;
    min-height: 126px;
    position: relative;
}

.planning-week-table__service-row {
    background: #f8fafc;
    border-top: 1px solid #dfe7f1;
    display: grid;
    grid-template-columns: 300px repeat(7, minmax(160px, 1fr));
    min-width: 1420px;
}

.planning-week-table__service-name {
    align-items: center;
    color: #334155;
    display: flex;
    gap: .55rem;
    grid-column: 1 / -1;
    min-height: 42px;
    padding: .65rem 1.45rem;
}

.planning-week-table__service-name i {
    color: #2563eb;
    font-size: 1rem;
}

.planning-week-table__service-name strong {
    font-size: .9rem;
    font-weight: 950;
    text-transform: uppercase;
}

.planning-week-table__service-name span {
    color: #8ba0b8;
    font-size: .82rem;
    font-weight: 800;
}

.planning-week-table__head,
.planning-week-table__employee,
.planning-week-table__cell {
    border-right: 1px solid #edf2f7;
}

.planning-week-table__head {
    align-items: center;
    background: #f9fbfe;
    color: #97a5b8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 74px;
    padding: .65rem;
    text-align: center;
}

.planning-week-table__head span {
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.planning-week-table__head strong {
    color: #334155;
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1.15;
    margin-top: .22rem;
}

.planning-week-table__head--employee {
    align-items: flex-start;
    border-right: 2px solid #dfe7f1;
    color: #97a5b8;
    font-size: .82rem;
    font-weight: 950;
    padding-left: 1.1rem;
    text-align: left;
    text-transform: uppercase;
}

.planning-week-table__head--total {
    color: #4b5a70;
    font-size: .9rem;
    font-weight: 950;
}

.planning-week-table__employee {
    align-items: center;
    background: #fff;
    display: grid;
    gap: .75rem;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-row: 1;
    min-height: 126px;
    padding: .9rem 1.1rem;
    position: sticky;
    left: 0;
    z-index: 4;
}

.planning-week-table__employee .data-avatar {
    border-radius: 999px;
    flex-basis: 46px;
    height: 46px;
    width: 46px;
}

.planning-week-table__presence {
    background: #2fc36a;
    border: 3px solid #fff;
    border-radius: 999px;
    height: 13px;
    left: 48px;
    position: absolute;
    top: 72px;
    width: 13px;
}

.planning-week-table__employee strong {
    color: #172033;
    display: block;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.15;
}

.planning-week-table__employee span {
    color: #8ba0b8;
    display: block;
    font-size: .82rem;
    font-weight: 800;
    margin-top: .24rem;
}

.planning-week-table__cell {
    background: #fff;
    display: grid;
    gap: .35rem;
    grid-row: 1;
    min-height: 126px;
    padding: .58rem .52rem;
}

.planning-week-table__cell.is-weekend {
    background: #fbfdff;
}

.planning-week-table__cell.is-drag-over {
    background: #eff6ff;
    box-shadow: inset 0 0 0 2px #7fb0ff;
}

.planning-week-table__cell.is-covered {
    pointer-events: none;
}

.planning-week-table__row-total {
    align-items: center;
    background: #fff;
    color: #8ba0b8;
    display: flex;
    flex-direction: column;
    font-size: .82rem;
    font-weight: 850;
    gap: .16rem;
    grid-row: 1;
    justify-content: center;
    min-height: 148px;
    padding: .8rem;
    text-align: center;
}

.planning-week-table__row-total strong {
    color: #172033;
    font-size: 1.08rem;
    font-weight: 950;
}

.planning-week-table__row-total.is-alert strong,
.planning-week-table__row-total.is-alert i {
    color: #ef4444;
}

.planning-week-card,
.planning-week-empty {
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 900;
    min-height: 72px;
    padding: .55rem .65rem;
}

.planning-week-card {
    background: #eaf2ff;
    border: 1px solid #acd2ff;
    color: #215ed8;
    display: grid;
    gap: .12rem;
}

.planning-week-card[draggable="true"] {
    cursor: grab;
}

.planning-week-card.is-dragging {
    cursor: grabbing;
    opacity: .58;
}

.planning-week-card.is-locked {
    cursor: default;
}

.planning-week-card__top {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
}

.planning-week-card__top strong {
    color: #2563eb;
    font-size: .82rem;
    font-weight: 950;
}

.planning-week-card__top i {
    color: #2fc36a;
    font-size: .8rem;
}

.planning-week-card b {
    color: #17337d;
    display: block;
    font-size: .92rem;
    font-weight: 950;
    line-height: 1.15;
}

.planning-week-card em {
    align-self: end;
    background: #d9fbe4;
    border-radius: 6px;
    color: #168438;
    display: inline-flex;
    font-size: .62rem;
    font-style: normal;
    font-weight: 950;
    justify-self: start;
    line-height: 1;
    margin-top: .18rem;
    padding: .16rem .3rem;
}

.planning-week-card--afternoon {
    background: #f7edff;
    border-color: #dfc1ff;
    color: #a855f7;
}

.planning-week-card--night {
    background: #1d293d;
    border-color: #3b4a64;
    color: #e5edff;
}

.planning-week-card--night .planning-week-card__top strong,
.planning-week-card--night b {
    color: #fff;
}

.planning-week-card--night small {
    color: #9fb2ff;
}

.planning-week-card--alert {
    background: #fffbeb;
    border-color: #facc15;
    color: #a16207;
}

.planning-week-card--draft,
.planning-week-card--modified {
    background: #fff7df;
    border-color: #fbbf24;
    color: #b45309;
}

.planning-week-card--draft .planning-week-card__top strong,
.planning-week-card--modified .planning-week-card__top strong,
.planning-week-card--draft b,
.planning-week-card--modified b {
    color: #92400e;
}

.planning-week-card--draft small,
.planning-week-card--modified small {
    color: #c05621;
}

.planning-week-card--draft em,
.planning-week-card--modified em {
    background: #fef3c7;
    color: #a16207;
}

.planning-week-card small {
    color: #2f6df6;
    display: block;
    font-size: .72rem;
    font-weight: 850;
}

.planning-week-empty {
    align-items: center;
    background: #fff;
    border: 1px dashed #d7e1ee;
    color: #c1ccdb;
    display: flex;
    font-size: 1.05rem;
    justify-content: center;
    width: 100%;
}

button.planning-week-empty {
    cursor: pointer;
    font-family: inherit;
}

button.planning-week-empty:hover {
    background: #f8fbff;
    border-color: #b8d4ff;
    color: #7fa5dc;
}

.planning-week-absence {
    align-items: center;
    align-self: center;
    border-radius: 9px;
    display: flex;
    gap: .65rem;
    grid-row: 1;
    justify-content: center;
    margin: .8rem .55rem;
    min-height: 46px;
    position: relative;
    z-index: 3;
}

.planning-week-absence i,
.planning-week-absence strong {
    font-size: .82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.planning-week-absence span {
    font-size: .76rem;
    font-weight: 850;
}

.planning-week-absence--leave {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #f97316;
}

.planning-week-absence--sick {
    background: #fff1f2;
    border: 1px solid #fca5a5;
    color: #ef4444;
}

.planning-week-table__footer {
    align-items: center;
    background: #f8fafc;
    border-top: 1px solid #edf2f7;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-width: 0;
    padding: .85rem 1rem;
    width: 100%;
}

.planning-week-table__summary {
    align-items: center;
    color: #66758d;
    display: flex;
    flex-wrap: wrap;
    font-size: .85rem;
    font-weight: 850;
    gap: 1.55rem;
}

.planning-week-table__summary strong {
    color: #25324a;
    font-weight: 950;
}

.planning-week-table__actions {
    align-items: center;
    display: flex;
    gap: .55rem;
    justify-content: flex-end;
}

.planning-week-table__actions form {
    margin: 0;
}

.planning-week-table__legend {
    align-items: center;
    color: #66758d;
    display: flex;
    flex-wrap: wrap;
    font-size: .78rem;
    font-weight: 900;
    gap: .7rem 1rem;
    min-width: 0;
}

.planning-week-table__legend span {
    align-items: center;
    display: inline-flex;
    gap: .42rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.planning-week-table__legend span::before {
    border-radius: 5px;
    content: "";
    display: inline-flex;
    height: 15px;
    width: 15px;
}

.planning-week-table__legend [data-tone="published"]::before {
    background: #bfdbfe;
    border: 1px solid #93c5fd;
}

.planning-week-table__legend [data-tone="draft"]::before {
    background: #fde68a;
    border: 1px solid #facc15;
}

.planning-week-table__legend [data-tone="leave"]::before {
    background: #fed7aa;
    border: 1px solid #fdba74;
}

.planning-week-table__legend [data-tone="sick"]::before {
    background: #fecaca;
    border: 1px solid #fca5a5;
}

.planning-week-table__legend [data-tone="night"]::before {
    background: #1d293d;
    border: 1px solid #64748b;
}

.planning-week-table__legend [data-tone="conflict"]::before {
    display: none;
}

.planning-week-table__legend [data-tone="conflict"] {
    color: #64748b;
}

.planning-week-table__legend [data-tone="conflict"] i {
    color: #ef4444;
}

.planning-week-table__display {
    align-items: center;
    color: #66758d;
    display: flex;
    font-size: .94rem;
    font-weight: 850;
    gap: .4rem;
    justify-content: flex-end;
    min-width: max-content;
}

.planning-week-table__display strong {
    color: #172033;
    font-weight: 950;
}

.planning-week-table__display a {
    color: #2563eb;
    font-weight: 950;
    margin-left: .35rem;
}

.planning-week-table__display form {
    margin: 0 0 0 .75rem;
}

.planning-weekly__insights {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(260px, 1fr);
}

.planning-weekly-card {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .055);
    padding: 1.15rem;
}

.planning-weekly-card__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.planning-weekly-card__header h2 {
    align-items: center;
    color: #172033;
    display: flex;
    font-size: 1rem;
    font-weight: 950;
    gap: .5rem;
    margin: 0;
}

.planning-weekly-card__header i {
    color: var(--data-brand);
}

.planning-weekly-card__tag {
    background: #fee2e2;
    border-radius: 999px;
    color: #ef4444;
    font-size: .68rem;
    font-weight: 950;
    padding: .28rem .55rem;
}

.planning-conflict-list,
.planning-template-list {
    display: grid;
    gap: .65rem;
}

.planning-conflict-item,
.planning-template-item {
    border: 1px solid #edf2f7;
    border-radius: 9px;
    padding: .8rem .9rem;
}

.planning-conflict-item {
    background: #fff7f7;
    border-color: #ffd6d6;
}

.planning-conflict-item--warning {
    background: #fffaf0;
    border-color: #fed7aa;
}

.planning-conflict-item strong,
.planning-template-item strong {
    color: #25324a;
    display: block;
    font-weight: 950;
}

.planning-conflict-item span,
.planning-template-item span {
    color: #66758d;
    display: block;
    font-size: .78rem;
    font-weight: 850;
    margin-top: .15rem;
}

.planning-conflict-item a,
.planning-template-list > a {
    color: var(--data-brand);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 950;
    margin-top: .65rem;
    text-decoration: none;
}

.planning-template-editor {
    display: grid;
    gap: 1rem;
}

.planning-template-week {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .055);
    overflow-x: auto;
}

.planning-template-week__header,
.planning-template-week__row {
    display: grid;
    grid-template-columns: 220px repeat(7, minmax(176px, 1fr));
    min-width: 1452px;
}

.planning-template-week__header {
    background: #f8fafc;
    border-bottom: 1px solid #e6edf5;
}

.planning-template-week__head,
.planning-template-week__label,
.planning-template-week__cell {
    border-right: 1px solid #edf2f7;
}

.planning-template-week__head {
    align-items: center;
    color: #8ba0b8;
    display: flex;
    font-size: .78rem;
    font-weight: 950;
    justify-content: center;
    min-height: 58px;
    padding: .6rem;
    text-transform: uppercase;
}

.planning-template-week__head--label {
    justify-content: flex-start;
    padding-left: 1rem;
}

.planning-template-week__label {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
    padding: 1rem;
}

.planning-template-week__label strong {
    color: #172033;
    font-size: .95rem;
    font-weight: 950;
}

.planning-template-week__label span {
    color: #8ba0b8;
    font-size: .78rem;
    font-weight: 850;
    margin-top: .2rem;
}

.planning-template-week__cell {
    background: #fff;
    display: grid;
    gap: .55rem;
    min-height: 220px;
    padding: .65rem;
}

.planning-template-slot {
    background: #eaf2ff;
    border: 1px solid #acd2ff;
    border-radius: 9px;
    display: grid;
    gap: .5rem;
    padding: .65rem;
}

.planning-template-slot--new {
    background: #fff;
    border-style: dashed;
}

.planning-template-slot--new > strong {
    color: #8ba0b8;
    font-size: .78rem;
    font-weight: 950;
}

.planning-template-slot__top {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
}

.planning-template-slot__top input[type="text"] {
    color: #17337d;
    font-weight: 950;
}

.planning-template-slot__top label {
    align-items: center;
    color: #ef4444;
    display: inline-flex;
    font-size: .68rem;
    font-weight: 900;
    gap: .25rem;
    white-space: nowrap;
}

.planning-template-slot__grid {
    display: grid;
    gap: .38rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-template-slot__grid label {
    color: #66758d;
    display: grid;
    font-size: .68rem;
    font-weight: 850;
    gap: .2rem;
}

.planning-template-slot__full {
    grid-column: 1 / -1;
}

.planning-template-slot input,
.planning-template-slot select,
.planning-template-slot textarea {
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 7px;
    color: #172033;
    font-size: .76rem;
    font-weight: 850;
    min-height: 30px;
    padding: .3rem .42rem;
    width: 100%;
}

.planning-template-editor__actions {
    display: flex;
    justify-content: flex-end;
}

.planning-weekly-donut {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 174px;
}

.planning-weekly-donut__chart {
    --progress: 0%;
    align-items: center;
    background: conic-gradient(var(--data-brand) 0 var(--progress), #ff4d4f var(--progress) calc(var(--progress) + 10%), #f59e0b calc(var(--progress) + 10%) 100%);
    border-radius: 999px;
    display: flex;
    height: 150px;
    justify-content: center;
    position: relative;
    width: 150px;
}

.planning-weekly-donut__chart::after {
    background: #fff;
    border-radius: 999px;
    content: "";
    height: 94px;
    position: absolute;
    width: 94px;
}

.planning-weekly-donut__chart strong {
    color: #555;
    font-size: 1.15rem;
    font-weight: 950;
    position: relative;
    z-index: 1;
}

.planning-settings-page {
    --data-brand: #2f6df6;
    --data-brand-dark: #2458da;
    margin: 0 auto;
    max-width: 1280px;
}

.planning-settings-header {
    align-items: flex-start;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
}

.planning-settings-header h1 {
    color: #111827;
    font-size: 1.9rem;
    font-weight: 950;
    letter-spacing: 0;
    margin: .35rem 0 0;
}

.planning-settings-header p {
    color: #66758d;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.45;
    max-width: 700px;
}

.planning-settings-header__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
    padding-top: 2.65rem;
}

.planning-settings-form {
    display: block;
}

.planning-settings-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-settings-card {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .045);
    display: flex;
    flex-direction: column;
    min-height: 254px;
    padding: 1.45rem;
}

.planning-settings-card__top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.15rem;
}

.planning-settings-card__eyebrow {
    color: #9aa8ba;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.planning-settings-icon {
    align-items: center;
    border-radius: 12px;
    display: inline-flex;
    font-size: 1.25rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.planning-settings-icon--blue {
    background: #eef4ff;
    color: #2f6df6;
}

.planning-settings-icon--green {
    background: #ecfdf3;
    color: #22c55e;
}

.planning-settings-icon--red {
    background: #fff1f2;
    color: #ef4444;
}

.planning-settings-icon--purple {
    background: #faf0ff;
    color: #9333ea;
}

.planning-settings-icon--amber {
    background: #fff7e6;
    color: #f59e0b;
}

.planning-settings-icon--slate {
    background: #eef3f7;
    color: #465568;
}

.planning-settings-card h2 {
    color: #172033;
    font-size: 1.12rem;
    font-weight: 950;
    margin: 0;
}

.planning-settings-card p {
    color: #66758d;
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.35;
    margin: .75rem 0 1.3rem;
}

.planning-settings-card dl {
    background: #f8fafc;
    border-radius: 12px;
    display: grid;
    gap: .45rem;
    margin: auto 0 1.25rem;
    padding: .8rem .9rem;
}

.planning-settings-card dl div {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.planning-settings-card dt,
.planning-settings-card dd {
    font-size: .8rem;
    font-weight: 900;
    margin: 0;
}

.planning-settings-card dt {
    color: #73839a;
}

.planning-settings-card dd {
    color: #172033;
    text-align: right;
}

.planning-settings-card dd.is-success {
    color: #22c55e;
}

.planning-settings-card dd.is-danger {
    color: #ef4444;
}

.planning-settings-card__button {
    align-items: center;
    background: #f8fafc;
    border: 0;
    border-radius: 9px;
    color: #344154;
    display: inline-flex;
    font-weight: 950;
    justify-content: center;
    min-height: 42px;
    padding: .65rem 1rem;
    text-decoration: none;
    width: 100%;
}

.planning-settings-card__button--primary {
    background: var(--data-brand);
    color: #fff;
}

.planning-settings-card__button--primary:hover {
    background: var(--data-brand-dark);
    color: #fff;
}

.planning-settings-panel {
    border-top: 1px solid #edf2f7;
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
    padding-top: 1rem;
}

.planning-settings-panel[hidden] {
    display: none;
}

.planning-settings-panel label {
    color: #41516a;
    display: grid;
    font-size: .78rem;
    font-weight: 900;
    gap: .42rem;
}

.planning-settings-panel label:first-child:last-child,
.planning-settings-panel .planning-settings-check {
    grid-column: 1 / -1;
}

.planning-settings-panel input,
.planning-settings-panel select {
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    color: #172033;
    font-weight: 800;
    min-height: 38px;
    padding: .48rem .65rem;
}

.planning-settings-check {
    align-items: center;
    display: flex !important;
    flex-direction: row;
    gap: .55rem !important;
}

.planning-settings-check input {
    min-height: 16px;
    width: 16px;
}

.planning-settings-help {
    align-items: center;
    background: var(--data-brand);
    border-radius: 14px;
    color: #fff;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin-top: .75rem;
    overflow: hidden;
    padding: 2rem;
}

.planning-settings-help h2 {
    color: #fff;
    font-size: 1.45rem;
    font-weight: 950;
    margin: 0 0 .8rem;
}

.planning-settings-help p {
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.45;
    margin: 0 0 1.25rem;
    max-width: 680px;
}

.planning-settings-help > span {
    align-items: center;
    background: rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: rgba(37, 99, 235, .65);
    display: inline-flex;
    flex: 0 0 132px;
    font-size: 4rem;
    font-weight: 950;
    height: 132px;
    justify-content: center;
    width: 132px;
}

.planning-settings-help__support {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    margin-left: .45rem;
}

.planning-settings-help__support:hover {
    color: #fff;
}

.planning-config-page {
    margin: 0 auto;
    max-width: 1180px;
}

.planning-config-form {
    display: grid;
    gap: 1.4rem;
}

.planning-config-header {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr auto;
}

.planning-config-back {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    color: #41516a;
    display: inline-flex;
    font-size: 1.15rem;
    height: 44px;
    justify-content: center;
    text-decoration: none;
    width: 44px;
}

.planning-config-title {
    align-items: center;
    display: flex;
    gap: .9rem;
}

.planning-config-title h1 {
    color: #111827;
    font-size: 1.85rem;
    font-weight: 950;
    letter-spacing: 0;
    margin: 0;
}

.planning-config-title p,
.planning-config-card p {
    color: #66758d;
    font-weight: 750;
    line-height: 1.4;
    margin: .15rem 0 0;
}

.planning-config-actions {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.planning-config-layout {
    align-items: start;
    display: grid;
    gap: 1.4rem;
    grid-template-columns: minmax(0, 1fr) 340px;
}

.planning-config-layout--wide {
    grid-template-columns: minmax(0, 1fr) 330px;
}

.planning-config-main,
.planning-config-aside {
    display: grid;
    gap: 1.2rem;
}

.planning-config-card {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .04);
    display: grid;
    gap: 1rem;
    padding: 1.45rem;
}

.planning-config-card--flush {
    overflow: hidden;
    padding: 0;
}

.planning-config-card--split-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.planning-config-card--soft {
    background: #f3f7ff;
    border-color: #d6e5ff;
}

.planning-config-card--blue {
    background: #2f6df6;
    border-color: #2f6df6;
    color: #fff;
}

.planning-config-card--blue h2,
.planning-config-card--blue p,
.planning-config-card--dark h2,
.planning-config-card--dark p {
    color: inherit;
}

.planning-config-card--dark {
    background: #0f172a;
    border-color: #0f172a;
    color: #dbe7ff;
}

.planning-config-card--dashed {
    border-style: dashed;
    text-align: center;
}

.planning-config-card--sectioned {
    gap: 0;
    padding: 0;
}

.planning-config-card--sectioned h2 {
    border-bottom: 1px solid #edf2f7;
    padding: 1.35rem 1.45rem;
}

.planning-config-card__body {
    display: grid;
    gap: 1rem;
    padding: 1.45rem;
}

.planning-config-card h2 {
    align-items: center;
    color: #172033;
    display: flex;
    font-size: 1.08rem;
    font-weight: 950;
    gap: .45rem;
    margin: 0;
}

.planning-config-grid {
    display: grid;
    gap: 1rem;
}

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

.planning-config-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-config-field {
    color: #41516a;
    display: grid;
    font-size: .86rem;
    font-weight: 900;
    gap: .45rem;
}

.planning-config-field input,
.planning-config-field select,
.planning-config-field textarea {
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 9px;
    color: #172033;
    font-weight: 850;
    min-height: 46px;
    padding: .65rem .8rem;
}

.planning-config-field textarea {
    min-height: 92px;
    resize: vertical;
}

.planning-config-field small {
    color: #9aa8ba;
    font-size: .76rem;
    font-weight: 800;
}

.planning-config-field b {
    color: #ef4444;
}

.planning-segmented {
    display: grid;
    gap: .75rem;
}

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

.planning-segmented--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-segmented label,
.planning-option {
    margin: 0;
}

.planning-segmented input,
.planning-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.planning-segmented span,
.planning-option span {
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    color: #344154;
    cursor: pointer;
    display: grid;
    font-weight: 950;
    min-height: 48px;
    place-items: center;
    text-align: center;
}

.planning-segmented input:checked + span,
.planning-option input:checked + span {
    background: #eef4ff;
    border-color: #2f6df6;
    color: #2563eb;
    box-shadow: 0 0 0 1px #2f6df6 inset;
}

.planning-config-options {
    display: grid;
    gap: .75rem;
}

.planning-config-options--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-option span {
    align-items: flex-start;
    justify-items: start;
    line-height: 1.25;
    padding: 1rem;
    text-align: left;
}

.planning-option small {
    color: #72829a;
    font-size: .82rem;
    font-weight: 800;
    margin-top: .25rem;
}

.planning-toggle-row,
.planning-check {
    align-items: center;
    background: #f8fafc;
    border-radius: 10px;
    color: #344154;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0;
    padding: .85rem;
}

.planning-toggle-row small {
    color: #72829a;
    display: block;
    font-size: .8rem;
    font-style: italic;
    margin-top: .15rem;
}

.planning-toggle-row input[type="checkbox"],
.planning-check input[type="checkbox"] {
    accent-color: #2f6df6;
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
}

.planning-toggle-row--compact {
    min-height: 48px;
}

.planning-check {
    justify-content: flex-start;
}

.planning-check--boxed {
    background: #fff;
    border: 1px solid #edf2f7;
}

.planning-switch {
    cursor: pointer;
    display: inline-flex;
    margin: 0;
}

.planning-switch input {
    position: absolute;
    opacity: 0;
}

.planning-switch span {
    background: #dbe4ef;
    border-radius: 999px;
    display: inline-flex;
    height: 28px;
    padding: 3px;
    transition: background .18s ease;
    width: 52px;
}

.planning-switch span::before {
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
    content: "";
    height: 22px;
    transition: transform .18s ease;
    width: 22px;
}

.planning-switch input:checked + span {
    background: #2f6df6;
}

.planning-switch input:checked + span::before {
    transform: translateX(24px);
}

.planning-switch--button {
    background: transparent;
    border: 0;
    padding: 0;
}

.planning-config-summary {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.planning-config-summary div {
    display: flex;
    justify-content: space-between;
}

.planning-config-summary dt,
.planning-config-summary dd {
    font-size: .86rem;
    font-weight: 900;
    margin: 0;
}

.planning-config-summary dt {
    color: #72829a;
}

.planning-config-note {
    border-radius: 12px;
    font-weight: 850;
    line-height: 1.45;
    padding: 1rem 1.15rem;
}

.planning-config-note--warning {
    background: #fff8e8;
    border: 1px solid #fde6ad;
    color: #9a5a14;
}

.planning-config-note--info {
    background: #eef6ff;
    border: 1px solid #d2e6ff;
    color: #2458da;
}

.planning-settings-table {
    border-collapse: collapse;
    width: 100%;
}

.planning-settings-table th,
.planning-settings-table td {
    border-bottom: 1px solid #edf2f7;
    padding: 1rem 1.25rem;
    text-align: left;
    vertical-align: middle;
}

.planning-settings-table th {
    background: #f8fafc;
    color: #9aa8ba;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.planning-settings-table td {
    color: #344154;
    font-weight: 850;
}

.planning-settings-table td strong,
.planning-settings-table td span {
    display: block;
}

.planning-settings-table td > span,
.planning-settings-table td strong + span {
    color: #9aa8ba;
    font-size: .78rem;
}

.planning-settings-table__icon {
    color: #8aa0bb;
    font-size: 1.15rem;
    text-decoration: none;
}

.planning-pill {
    border-radius: 999px;
    display: inline-flex !important;
    font-size: .72rem !important;
    font-weight: 950;
    padding: .22rem .55rem;
    text-transform: uppercase;
}

.planning-pill--danger {
    background: #ffe7e7;
    color: #ef4444 !important;
}

.planning-pill--warning {
    background: #fff1d6;
    color: #ea580c !important;
}

.data-button--dark {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

.data-button--dark:hover {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.planning-rule-create__header {
    margin-bottom: .4rem;
}

.planning-rule-create__back {
    align-items: center;
    color: #2563eb;
    display: inline-flex;
    font-weight: 900;
    gap: .35rem;
    margin-bottom: .6rem;
    text-decoration: none;
}

.planning-rule-create__header h1 {
    color: #111827;
    font-size: 1.75rem;
    font-weight: 950;
    letter-spacing: 0;
    margin: 0;
}

.planning-rule-create__header p {
    color: #66758d;
    font-weight: 750;
    margin: .35rem 0 0;
}

.planning-rule-create__hint {
    color: #72829a;
    font-size: .86rem;
    font-style: italic;
    font-weight: 750;
    margin: 0;
}

.planning-rule-create__label {
    color: #9aa8ba;
    display: block;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .06em;
    margin-bottom: .55rem;
    text-transform: uppercase;
}

.planning-rule-create__checklist {
    background: #f8fafc;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    display: grid;
    gap: .65rem;
    padding: .85rem;
}

.planning-rule-create__checklist label,
.planning-rule-create__checklist span {
    align-items: center;
    color: #526176;
    display: flex;
    font-weight: 850;
    gap: .5rem;
    margin: 0;
}

.planning-rule-trigger-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-rule-trigger-grid label {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    color: #526176;
    display: flex;
    font-size: .78rem;
    font-weight: 800;
    gap: .45rem;
    margin: 0;
    padding: .55rem .65rem;
}

.planning-rule-create__severity {
    position: sticky;
    top: 1rem;
}

.planning-rule-severity {
    margin: 0;
}

.planning-rule-severity input {
    position: absolute;
    opacity: 0;
}

.planning-rule-severity span {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    color: #344154;
    display: flex;
    font-weight: 950;
    justify-content: space-between;
    min-height: 52px;
    padding: .8rem 1rem;
}

.planning-rule-severity span::before,
.planning-rule-severity span::after {
    border-radius: 999px;
    content: "";
    display: inline-flex;
}

.planning-rule-severity span::before {
    height: 9px;
    margin-right: .65rem;
    width: 9px;
}

.planning-rule-severity span::after {
    border: 2px solid #9aa8ba;
    height: 16px;
    margin-left: auto;
    width: 16px;
}

.planning-rule-severity input:checked + span::after {
    border: 5px solid currentColor;
}

.planning-rule-severity--info span::before {
    background: #06b6d4;
}

.planning-rule-severity--info input:checked + span {
    background: #effcff;
    border-color: #67e8f9;
    color: #0e7490;
}

.planning-rule-severity--warning span::before {
    background: #f59e0b;
}

.planning-rule-severity--warning input:checked + span {
    background: #fff7ed;
    border-color: #fb923c;
    color: #9a3412;
}

.planning-rule-severity--blocking span::before {
    background: #ef4444;
}

.planning-rule-severity--blocking input:checked + span {
    background: #fff1f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.planning-rule-create__simulation {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: rgba(15, 23, 42, .42);
    padding-left: 1.5rem;
}

.planning-rule-create__simulation h2 {
    color: rgba(15, 23, 42, .42);
}

@media (max-width: 1100px) {
    .planning-weekly__header,
    .planning-weekly__filters,
    .planning-week-table__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .planning-weekly__controls,
    .planning-weekly__legend,
    .planning-week-table__actions {
        justify-content: flex-start;
    }

    .planning-weekly__insights {
        grid-template-columns: 1fr;
    }

    .planning-settings-header {
        flex-direction: column;
    }

    .planning-settings-header__actions {
        justify-content: flex-start;
        padding-top: 0;
    }

    .planning-settings-grid {
        grid-template-columns: 1fr;
    }

    .planning-settings-help {
        align-items: flex-start;
        flex-direction: column;
    }

    .planning-config-header,
    .planning-config-layout,
    .planning-config-layout--wide {
        grid-template-columns: 1fr;
    }

    .planning-config-actions,
    .planning-config-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .planning-config-grid--2,
    .planning-config-grid--3,
    .planning-config-options--2,
    .planning-segmented--2,
    .planning-segmented--3 {
        grid-template-columns: 1fr;
    }
}

.planning-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.planning-create {
    --data-brand: #2f6df6;
    --data-brand-dark: #2458da;
}

.planning-create__layout {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1240px) minmax(270px, 300px);
}

.planning-form-card {
    overflow: hidden;
    padding: 0;
}

.planning-form-section {
    border-bottom: 1px solid #edf2f7;
    padding: 1.45rem 1.7rem;
}

.planning-section-title {
    align-items: center;
    color: #172033;
    display: flex;
    font-size: 1.05rem;
    font-weight: 950;
    gap: .7rem;
    margin: 0 0 1.35rem;
}

.planning-section-title > span {
    align-items: center;
    background: #eaf2ff;
    border-radius: 8px;
    color: #2f6df6;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.planning-section-title__accent {
    background: #f2e8ff !important;
    color: #8b5cf6 !important;
}

.planning-create__grid,
.planning-choice-grid {
    display: grid;
    gap: 1rem;
}

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

.planning-create__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-create__field {
    color: #41516a;
    display: grid;
    font-size: .82rem;
    font-weight: 850;
    gap: .55rem;
}

.planning-create__field--full {
    grid-column: 1 / -1;
}

.planning-create__field input,
.planning-create__field select,
.planning-create__field textarea {
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    color: #172033;
    font-size: .92rem;
    font-weight: 700;
    min-height: 44px;
    padding: .65rem .8rem;
    width: 100%;
}

.planning-create__field textarea {
    min-height: 82px;
    resize: vertical;
}

.planning-period-preview {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    color: #172033;
    display: flex;
    font-size: .92rem;
    font-weight: 900;
    min-height: 44px;
    padding: .65rem .8rem;
}

.planning-create__field input:focus,
.planning-create__field select:focus,
.planning-create__field textarea:focus {
    border-color: #7fb0ff;
    box-shadow: 0 0 0 3px rgba(47, 109, 246, .12);
    outline: 0;
}

.planning-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1.4rem;
}

.planning-choice-card {
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    color: #41516a;
    cursor: pointer;
    display: grid;
    gap: .35rem;
    min-height: 112px;
    padding: 1rem;
    position: relative;
}

.planning-choice-card input {
    position: absolute;
    right: .85rem;
    top: .85rem;
}

.planning-choice-card i {
    color: #91a2ba;
    font-size: 1.25rem;
}

.planning-choice-card strong {
    color: #233149;
    font-weight: 950;
    margin-top: .35rem;
}

.planning-choice-card span {
    color: #8797ad;
    font-size: .78rem;
    font-weight: 850;
}

.planning-choice-card:has(input:checked) {
    background: #eff6ff;
    border-color: #2f6df6;
    box-shadow: 0 0 0 1px rgba(47, 109, 246, .16);
}

.planning-template-box {
    align-items: center;
    background: #f8fbff;
    border: 1px dashed #c9dcf8;
    border-radius: 12px;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    padding: 1.35rem;
    transition: opacity .18s ease;
}

.planning-template-box.is-disabled {
    opacity: .62;
}

.planning-template-preview {
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .05);
    display: grid;
    gap: .65rem;
    padding: 1rem;
}

.planning-template-preview > span {
    color: #9aa9bd;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.planning-preview-strip {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.planning-preview-strip strong {
    align-items: center;
    background: #dbeafe;
    border-radius: 6px;
    color: #2563eb;
    display: flex;
    font-size: .66rem;
    font-weight: 950;
    justify-content: center;
    min-height: 44px;
    text-transform: uppercase;
}

.planning-preview-strip strong:nth-child(2) {
    background: #f1ddff;
    color: #9333ea;
}

.planning-preview-strip strong:nth-child(3) {
    background: #e0e7ff;
    color: #4f46e5;
}

.planning-preview-strip strong:nth-child(4) {
    background: #f1f5f9;
    color: #8ba0b8;
}

.planning-template-preview small {
    color: #8ba0b8;
    font-size: .74rem;
    font-weight: 750;
}

.planning-option-list {
    display: grid;
    gap: .85rem;
}

.planning-option-list label {
    align-items: center;
    color: #41516a;
    display: flex;
    font-weight: 850;
    gap: .7rem;
}

.planning-option-list input {
    height: 16px;
    width: 16px;
}

.planning-form-actions {
    align-items: center;
    background: #fff;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.35rem 1.7rem;
}

.planning-form-actions > a {
    color: #73839a;
    font-weight: 900;
    text-decoration: none;
}

.planning-form-actions > div {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: flex-end;
}

.planning-create__side {
    display: grid;
    gap: 1.2rem;
    position: sticky;
    top: 1rem;
}

.planning-summary-card {
    padding: 0;
}

.planning-summary-card h2,
.planning-tip-card h2 {
    align-items: center;
    color: #172033;
    display: flex;
    font-size: 1rem;
    font-weight: 950;
    gap: .5rem;
    margin: 0;
}

.planning-summary-card h2 {
    border-bottom: 1px solid #edf2f7;
    padding: 1rem 1.25rem;
}

.planning-summary-card h2 i {
    color: #2f6df6;
}

.planning-summary-card dl {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1.25rem;
}

.planning-summary-card dt {
    color: #9aa9bd;
    font-size: .73rem;
    font-weight: 950;
    margin-bottom: .3rem;
    text-transform: uppercase;
}

.planning-summary-card dd {
    color: #172033;
    font-weight: 950;
    margin: 0;
}

.planning-summary-card dl > div + div {
    border-top: 1px solid #edf2f7;
    padding-top: 1rem;
}

.planning-tip-card {
    background: #edf2ff;
    border: 1px solid #dbe6ff;
    border-radius: 14px;
    color: #4338ca;
    overflow: hidden;
    padding: 1.25rem;
    position: relative;
}

.planning-tip-card::after {
    background: rgba(99, 102, 241, .12);
    border-radius: 999px;
    content: "";
    height: 84px;
    position: absolute;
    right: -28px;
    top: -24px;
    width: 84px;
}

.planning-tip-card p {
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.45;
    margin: .65rem 0 0;
    position: relative;
}

.planning-dashboard {
    --data-brand: #2f6df6;
    --data-brand-dark: #1f55d9;
    --data-brand-soft: #eaf2ff;
}

.planning-dashboard__metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.planning-dashboard__layout {
    align-items: start;
    display: grid;
    gap: 1.45rem;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}

.planning-dashboard__main,
.planning-dashboard__side {
    display: grid;
    gap: 1.45rem;
}

.data-table--planning-dashboard td {
    vertical-align: middle;
}

.data-table--planning-dashboard .data-button {
    min-height: 34px;
    padding: .35rem .85rem;
}

.planning-conflict-count {
    color: #ef4444;
    font-weight: 950;
}

.planning-unassigned-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1.15rem 1.25rem;
}

.planning-unassigned-card {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5edf6;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    min-height: 92px;
    padding: 1rem;
}

.planning-unassigned-card span {
    color: #90a2bb;
    display: block;
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.planning-unassigned-card strong {
    color: #172033;
    display: block;
    font-size: 1.05rem;
    font-weight: 950;
    margin-top: .25rem;
}

.planning-unassigned-card small {
    color: #f59e0b;
    display: block;
    font-weight: 950;
    margin-top: .3rem;
    text-transform: uppercase;
}

.planning-unassigned-card .data-icon-button {
    background: #fff;
    border: 1px solid #d9e4f0;
    color: #2f6df6;
    height: 42px;
    width: 42px;
}

.planning-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.planning-legend span {
    align-items: center;
    color: #8ba0b8;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 850;
    gap: .35rem;
}

.planning-dot,
.planning-activity-dot {
    border-radius: 999px;
    display: inline-block;
}

.planning-dot {
    height: 9px;
    width: 9px;
}

.planning-dot--morning,
.planning-week-pill--morning,
.planning-activity-dot--1 {
    background: #dbeafe;
    border-left-color: #3b82f6;
}

.planning-dot--afternoon,
.planning-week-pill--afternoon,
.planning-activity-dot--2 {
    background: #f1ddff;
    border-left-color: #a855f7;
}

.planning-dot--absence,
.planning-week-pill--absence,
.planning-activity-dot--0 {
    background: #ffedd5;
    border-left-color: #fb923c;
}

.planning-week-preview {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding: 1.15rem 1.25rem 1.3rem;
}

.planning-week-preview article {
    background: #fff;
    display: grid;
    gap: .8rem;
    min-height: 142px;
}

.planning-week-preview article.is-muted {
    background: #f8fafc;
    border-radius: 8px;
    opacity: .72;
}

.planning-week-preview header {
    color: #92a4bc;
    display: grid;
    font-size: .76rem;
    font-weight: 950;
    justify-items: center;
    line-height: 1.1;
    min-height: 34px;
    text-transform: uppercase;
}

.planning-week-preview header strong {
    color: #172033;
    font-size: .9rem;
    margin-top: .15rem;
}

.planning-week-preview article > div {
    display: grid;
    gap: .35rem;
}

.planning-week-pill {
    border-left: 3px solid;
    border-radius: 6px;
    color: #475569;
    display: block;
    font-size: .72rem;
    font-weight: 900;
    min-height: 18px;
    overflow: hidden;
    padding: .2rem .45rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-week-empty {
    background: #f8fafc;
    border-radius: 6px;
    display: block;
    min-height: 18px;
}

.planning-alert-panel .planning-panel__header h2 i {
    color: #ef4444;
}

.planning-conflict-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    padding: 1.1rem 1.25rem .7rem;
}

.planning-conflict-tags span {
    align-items: center;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #c2410c;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 950;
    gap: .35rem;
    padding: .4rem .65rem;
    text-transform: uppercase;
}

.planning-conflict-tags span:nth-child(odd) {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.planning-conflict-tags .is-muted {
    background: #f8fafc;
    border-color: #e5edf6;
    color: #8ba0b8;
    text-transform: none;
}

.planning-alert-link {
    align-items: center;
    border: 1px solid #fecaca;
    border-radius: 9px;
    color: #ef4444;
    display: flex;
    font-weight: 950;
    justify-content: center;
    margin: .4rem 1.25rem 1.25rem;
    min-height: 40px;
    text-decoration: none;
}

.planning-person-list,
.planning-activity-list {
    display: grid;
    padding: .75rem 1.25rem 1.15rem;
}

.planning-person-row {
    align-items: center;
    color: inherit;
    display: grid;
    gap: .8rem;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: .75rem 0;
    text-decoration: none;
}

.planning-person-row + .planning-person-row {
    border-top: 1px solid #f1f5f9;
}

.planning-person-row strong {
    color: #334155;
    display: block;
    font-weight: 950;
}

.planning-person-row small {
    color: #8ba0b8;
    display: block;
    font-weight: 750;
}

.planning-person-row > i {
    color: #cbd5e1;
}

.planning-activity-list article {
    display: grid;
    gap: .8rem;
    grid-template-columns: 14px minmax(0, 1fr);
    padding: .75rem 0;
}

.planning-activity-list article + article {
    border-top: 1px solid #f1f5f9;
}

.planning-activity-dot {
    height: 11px;
    margin-top: .25rem;
    width: 11px;
}

.planning-activity-list strong {
    color: #334155;
    display: block;
    font-weight: 950;
}

.planning-activity-list span,
.planning-activity-list small {
    color: #8ba0b8;
    display: block;
    font-size: .82rem;
    font-weight: 750;
}

.planning-availability-admin-page {
    display: grid;
    gap: 1.25rem;
    max-width: 1500px;
}

.planning-availability-topbar,
.planning-availability-hero,
.planning-availability-actions,
.planning-availability-metrics,
.planning-availability-tabs,
.planning-availability-filters,
.planning-availability-list-card > header,
.planning-availability-status-legend,
.planning-availability-table-footer,
.planning-availability-row-actions,
.planning-availability-calendar header,
.planning-availability-employee,
.planning-availability-weekly-layout,
.planning-availability-employee-select {
    align-items: center;
    display: flex;
}

.planning-availability-topbar,
.planning-availability-hero,
.planning-availability-list-card > header,
.planning-availability-table-footer,
.planning-availability-calendar header {
    justify-content: space-between;
}

.planning-availability-hero h1 {
    color: #101828;
    font-size: 1.65rem;
    font-weight: 950;
    margin: 0 0 .25rem;
}

.planning-availability-hero p,
.planning-availability-list-card > header p {
    color: #66758d;
    font-weight: 800;
    margin: 0;
}

.planning-availability-actions,
.planning-availability-row-actions {
    gap: .6rem;
}

.planning-availability-actions form,
.planning-availability-row-actions form {
    margin: 0;
}

.planning-availability-search {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    color: #94a3b8;
    display: flex;
    gap: .4rem;
    min-width: 240px;
    padding: .45rem .7rem;
}

.planning-availability-search input {
    background: transparent;
    border: 0;
    color: #334155;
    font-weight: 800;
    outline: 0;
    width: 100%;
}

.planning-availability-metrics {
    gap: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.planning-availability-metrics article {
    align-items: center;
    background: #fff;
    border: 1px solid #e4ebf4;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    display: grid;
    gap: .2rem 1rem;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 82px;
    padding: 1rem;
}

.planning-availability-metrics article i {
    align-items: center;
    background: #eff6ff;
    border-radius: 10px;
    color: #2563eb;
    display: flex;
    font-size: 1.25rem;
    grid-row: span 2;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.planning-availability-metrics article:nth-child(1) i {
    background: #fff7ed;
    color: #f59e0b;
}

.planning-availability-metrics article:nth-child(2) i,
.planning-availability-metrics article:nth-child(4) strong {
    color: #22c55e;
}

.planning-availability-metrics article:nth-child(3) i {
    background: #fff1f2;
    color: #ef4444;
}

.planning-availability-metrics span,
.planning-availability-table th,
.planning-availability-employee-select span {
    color: #9aa8bb;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.planning-availability-metrics strong {
    color: #111827;
    font-size: 1.35rem;
    font-weight: 950;
}

.planning-availability-tabs {
    border-bottom: 1px solid #dfe7f1;
    gap: 1.6rem;
}

.planning-availability-tabs a {
    color: #66758d;
    font-weight: 900;
    padding: .6rem 0 .95rem;
    position: relative;
    text-decoration: none;
}

.planning-availability-tabs a.is-active {
    color: var(--data-brand);
}

.planning-availability-tabs a.is-active::after {
    background: var(--data-brand);
    border-radius: 999px;
    bottom: -1px;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
}

.planning-availability-tabs span {
    background: #ef4444;
    border-radius: 999px;
    color: #fff;
    font-size: .7rem;
    margin-left: .35rem;
    padding: .12rem .42rem;
}

.planning-availability-filters {
    gap: .65rem;
}

.planning-availability-filters select,
.planning-availability-filters input,
.planning-availability-employee-select select {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    color: #334155;
    font-weight: 850;
    min-height: 38px;
    padding: .45rem .75rem;
}

.planning-availability-filters a {
    color: #71809a;
    font-weight: 900;
    text-decoration: none;
}

.planning-availability-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 390px;
}

.planning-availability-list-card,
.planning-availability-calendar,
.planning-availability-month {
    background: #fff;
    border: 1px solid #e4ebf4;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

.planning-availability-list-card > header,
.planning-availability-calendar,
.planning-availability-month {
    padding: 1.2rem;
}

.planning-availability-list-card > header {
    border-bottom: 1px solid #edf2f7;
}

.planning-availability-list-card h2,
.planning-availability-calendar h2,
.planning-availability-month h2 {
    color: #111827;
    font-size: 1.05rem;
    font-weight: 950;
    margin: 0;
}

.planning-availability-status-legend {
    color: #66758d;
    font-size: .8rem;
    font-weight: 850;
    gap: .8rem;
}

.planning-availability-status-legend span::before {
    background: #22c55e;
    border-radius: 999px;
    content: "";
    display: inline-block;
    height: 8px;
    margin-right: .35rem;
    width: 8px;
}

.planning-availability-status-legend span[data-tone="submitted"]::before {
    background: #f59e0b;
}

.planning-availability-status-legend span[data-tone="refused"]::before {
    background: #ef4444;
}

.planning-availability-table-wrap {
    overflow-x: auto;
}

.planning-availability-table {
    border-collapse: collapse;
    min-width: 920px;
    width: 100%;
}

.planning-availability-table th,
.planning-availability-table td {
    border-bottom: 1px solid #edf2f7;
    padding: 1rem 1.15rem;
    text-align: left;
    vertical-align: middle;
}

.planning-availability-table td {
    color: #53627a;
    font-weight: 800;
}

.planning-availability-table strong {
    color: #111827;
    display: block;
    font-weight: 950;
}

.planning-availability-table small,
.planning-availability-table em {
    color: #71809a;
    display: block;
    font-size: .78rem;
    font-weight: 800;
}

.planning-availability-employee {
    gap: .75rem;
}

.planning-availability-type,
.planning-availability-status {
    border-radius: 999px;
    display: inline-flex;
    font-size: .7rem;
    font-weight: 950;
    line-height: 1;
    padding: .35rem .55rem;
}

.planning-availability-type[data-tone="unavailable"] {
    background: #fff1f2;
    color: #ef4444;
}

.planning-availability-type[data-tone="available"] {
    background: #eff6ff;
    color: #2563eb;
}

.planning-availability-type[data-tone="preferred"] {
    background: #f5f3ff;
    color: #8b5cf6;
}

.planning-availability-status[data-tone="approved"] {
    background: #dcfce7;
    color: #22c55e;
}

.planning-availability-status[data-tone="submitted"] {
    background: #fef3c7;
    color: #f59e0b;
}

.planning-availability-status[data-tone="refused"] {
    background: #fee2e2;
    color: #ef4444;
}

.planning-availability-status[data-tone="cancelled"] {
    background: #eef2f7;
    color: #94a3b8;
}

.planning-availability-icon-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    color: #94a3b8;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    text-decoration: none;
    width: 34px;
}

.planning-availability-icon-btn.is-approve {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.planning-availability-icon-btn.is-refuse {
    color: #ef4444;
}

.planning-availability-table-footer {
    color: #71809a;
    font-weight: 850;
    padding: 1rem 1.15rem;
}

.planning-availability-table-footer > div,
.planning-availability-side {
    display: grid;
    gap: .65rem;
}

.planning-availability-table-footer > div {
    display: flex;
}

.planning-availability-side {
    align-content: start;
}

.planning-availability-calendar-grid {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 1rem;
}

.planning-availability-calendar-grid span,
.planning-availability-calendar-grid button {
    align-items: center;
    display: flex;
    justify-content: center;
}

.planning-availability-calendar-grid span {
    color: #9aa8bb;
    font-size: .72rem;
    font-weight: 950;
}

.planning-availability-calendar-grid button {
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    color: #334155;
    font-weight: 900;
    height: 42px;
}

.planning-availability-calendar-grid button.is-active {
    border-color: var(--data-brand);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
    color: var(--data-brand);
}

.planning-availability-calendar-detail {
    margin-top: 1.2rem;
}

.planning-availability-calendar-detail article {
    align-items: center;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 10px;
    color: #ef4444;
    display: flex;
    gap: .8rem;
    margin-top: .6rem;
    padding: .85rem;
}

.planning-availability-month p {
    align-items: center;
    color: #66758d;
    display: flex;
    font-weight: 850;
    justify-content: space-between;
    margin: .75rem 0;
}

.planning-availability-month strong {
    color: #111827;
}

.planning-availability-weekly-layout {
    align-items: start;
    gap: 1.5rem;
}

.planning-availability-weekly-panel {
    flex: 1;
    min-width: 0;
}

.planning-availability-employee-select {
    gap: .6rem;
}

.planning-employee-lock-note {
    align-items: center;
    color: #f59e0b !important;
    display: inline-flex;
    gap: .35rem;
    margin-top: .45rem !important;
}

.planning-employee-availability-card:disabled,
.planning-employee-link-action.is-disabled,
.data-button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

@media (max-width: 1200px) {
    .planning-dashboard__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .planning-dashboard__layout {
        grid-template-columns: 1fr;
    }

    .planning-create__layout {
        grid-template-columns: 1fr;
    }

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

    .planning-create__side {
        position: static;
    }
}

@media (max-width: 900px) {
    .planning-grid--2,
    .planning-form-grid,
    .planning-form-grid--3,
    .planning-create__grid,
    .planning-create__grid--3,
    .planning-choice-grid,
    .planning-template-box,
    .planning-unassigned-grid,
    .planning-week-preview {
        grid-template-columns: 1fr;
    }

    .planning-week,
    .planning-month {
        grid-template-columns: 1fr;
    }

    .planning-roster {
        grid-template-columns: minmax(190px, 220px) repeat(7, minmax(130px, 1fr));
    }

    .planning-dashboard__metrics {
        grid-template-columns: 1fr;
    }

    .planning-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .planning-form-actions > div {
        justify-content: stretch;
    }

    .planning-form-actions .data-button {
        flex: 1;
    }
}