.nms-plan {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.nms-plan__filters {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.nms-plan__filter {
    display: grid;
    min-width: 0;
    gap: 0.375rem;
}

.nms-plan__filter > span {
    color: rgb(55 65 81);
    font-size: 0.875rem;
    font-weight: 500;
}

.nms-plan__content {
    min-width: 0;
    transition: opacity 150ms ease;
}

.nms-plan__content.is-loading {
    opacity: 0.6;
}

.dark .nms-plan__filter > span {
    color: rgb(229 231 235);
}

.nms-gantt {
    --gantt-day-width: 4rem;
    --gantt-left-width: 28rem;
    overflow: hidden;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.875rem;
    background: white;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.nms-gantt[data-gantt-scale='week'] {
    --gantt-day-width: 8rem;
}

.nms-gantt[data-gantt-scale='month'] {
    --gantt-day-width: 9rem;
}

.nms-gantt__toolbar {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
    border-bottom: 1px solid rgb(229 231 235);
}

.nms-gantt__view-label,
.nms-gantt__legend,
.nms-gantt__legend span {
    display: flex;
    align-items: center;
}

.nms-gantt__view-label {
    gap: 0.5rem;
    color: rgb(220 38 38);
    font-size: 0.875rem;
    font-weight: 700;
}

.nms-gantt__view-label svg {
    width: 1.25rem;
    height: 1.25rem;
}

.nms-gantt__scale-switcher {
    display: inline-flex;
    flex: none;
    gap: 0.25rem;
    padding: 0.2rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.625rem;
    background: rgb(249 250 251);
}

.nms-gantt__legend {
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
    gap: 1rem;
    color: rgb(107 114 128);
    font-size: 0.75rem;
}

.nms-gantt__legend span {
    gap: 0.375rem;
}

.nms-gantt__legend i {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: var(--gantt-color);
}

.nms-gantt__scroller {
    overflow: auto;
    overscroll-behavior-inline: contain;
}

.nms-gantt__board {
    width: max-content;
    min-width: 100%;
}

.nms-gantt__row {
    display: grid;
    grid-template-columns: var(--gantt-left-width) minmax(max-content, 1fr);
}

.nms-gantt__left {
    position: sticky;
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5rem;
    align-items: center;
    border-right: 1px solid rgb(229 231 235);
    background: white;
}

.nms-gantt__header {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 5.5rem;
    border-bottom: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
}

.nms-gantt__left-header {
    z-index: 15;
    padding: 0 1rem;
    background: rgb(249 250 251);
    color: rgb(107 114 128);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nms-gantt__timeline {
    position: relative;
    width: 100%;
}

.nms-gantt__months,
.nms-gantt__days,
.nms-gantt__track {
    display: grid;
    grid-template-columns: repeat(var(--gantt-days), var(--gantt-day-width));
}

.nms-gantt__months {
    height: 2.25rem;
    align-items: center;
    border-bottom: 1px solid rgb(229 231 235);
    color: rgb(107 114 128);
    font-size: 0.75rem;
    font-weight: 600;
}

.nms-gantt__months > div {
    grid-column: span var(--gantt-span);
    height: 100%;
    padding: 0.625rem 0.75rem;
    border-right: 1px solid rgb(229 231 235);
}

.nms-gantt__days {
    height: 3.25rem;
}

.nms-gantt__days > :is(div, button) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    border-right: 1px solid rgb(229 231 235);
    color: rgb(107 114 128);
    font-size: 0.6875rem;
}

.nms-gantt__day-action {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.nms-gantt__day-action:hover,
.nms-gantt__day-action:focus-visible {
    background: rgb(254 243 199);
    color: rgb(180 83 9);
    outline: none;
}

.nms-gantt__day-action:focus-visible {
    box-shadow: inset 0 0 0 2px rgb(239 68 68);
}

.nms-gantt__days strong {
    font-size: 0.75rem;
    font-weight: 700;
}

.nms-gantt__days .is-weekend,
.nms-gantt__track > .is-weekend {
    background: rgb(249 250 251);
}

.nms-gantt__days .is-today {
    color: rgb(180 83 9);
}

.nms-gantt__days .is-today strong {
    min-width: 2rem;
    padding: 0.2rem 0.35rem;
    border-radius: 9999px;
    background: rgb(239 68 68);
    color: white;
    text-align: center;
}

.nms-gantt__summary-row,
.nms-gantt__task-row {
    min-height: 4.25rem;
    border-bottom: 1px solid rgb(229 231 235);
    color: inherit;
    text-decoration: none;
}

.nms-gantt__summary-row {
    cursor: pointer;
    background: rgb(249 250 251 / 0.75);
}

.nms-gantt__summary-row:hover .nms-gantt__left,
.nms-gantt__task-row:hover .nms-gantt__left {
    background: rgb(254 242 242);
}

.nms-gantt__summary-row .nms-gantt__left {
    background: rgb(249 250 251);
}

.nms-gantt__group-info,
.nms-gantt__task-info {
    gap: 0.75rem;
    padding: 0.625rem 1rem;
}

.nms-gantt__group-info {
    grid-template-columns: minmax(0, 1fr);
}

.nms-gantt[data-gantt-mode='compact'] .nms-gantt__left-header {
    grid-template-columns: minmax(0, 1fr);
}

.nms-gantt[data-gantt-mode='compact'] .nms-gantt__group-info {
    padding-block: 0;
}

.nms-gantt[data-gantt-mode='compact'] .nms-gantt__summary-row {
    min-height: calc(var(--gantt-lanes) * 2.75rem);
}

.nms-gantt[data-gantt-mode='compact'] .nms-gantt__track {
    grid-template-rows: repeat(var(--gantt-lanes), 2.75rem);
}

.nms-gantt[data-gantt-mode='compact'] .nms-gantt__track > i {
    min-height: 100%;
    grid-row: 1 / -1;
}

.nms-gantt[data-gantt-mode='compact'] .nms-gantt__bar {
    grid-row: var(--gantt-lane);
}

.nms-gantt__group-info > strong,
.nms-gantt__task-info > strong {
    color: rgb(75 85 99);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: right;
}

.nms-gantt__title-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.625rem;
}

.nms-gantt__title-cell > svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: rgb(156 163 175);
}

.nms-gantt__title-cell > div {
    min-width: 0;
}

.nms-gantt__title-cell a,
.nms-gantt__title-cell strong,
.nms-gantt__title-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nms-gantt__title-cell a,
.nms-gantt__title-cell strong {
    color: rgb(17 24 39);
    font-size: 0.8125rem;
    font-weight: 700;
}

.nms-gantt__title-cell a:hover {
    color: rgb(220 38 38);
}

.nms-gantt__title-cell span {
    margin-top: 0.2rem;
    color: rgb(107 114 128);
    font-size: 0.6875rem;
}

.nms-gantt__status {
    flex: none;
    padding: 0.2rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.625rem !important;
    font-weight: 700;
}

.nms-gantt__status.is-neutral {
    background: rgb(229 231 235);
    color: rgb(75 85 99);
}

.nms-gantt__status.is-warning {
    background: rgb(254 243 199);
    color: rgb(146 64 14);
}

.nms-gantt__status.is-success {
    background: rgb(220 252 231);
    color: rgb(21 128 61);
}

.nms-gantt__task-info .nms-gantt__title-cell {
    padding-left: 1.5rem;
}

.nms-gantt__title-cell .nms-gantt__position {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.nms-gantt__position i {
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: 9999px;
    background: var(--gantt-color);
}

.nms-gantt__track {
    align-items: stretch;
}

.nms-gantt__track > i {
    grid-column: var(--gantt-start);
    grid-row: 1;
    min-height: 4.25rem;
    border-right: 1px solid rgb(243 244 246);
}

.nms-gantt__track > .is-today {
    background: rgb(254 242 242);
}

.nms-gantt__bar {
    z-index: 2;
    grid-column: var(--gantt-start) / span var(--gantt-span);
    grid-row: 1;
    align-self: center;
    min-width: 1.75rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
}

.nms-gantt__bar {
    display: flex;
    height: 2.25rem;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0.25rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: 0.6rem;
    background: var(--gantt-color);
    color: white;
}

.nms-gantt__bar > strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.6875rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nms-gantt__bar.is-editable {
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: filter 150ms ease, box-shadow 150ms ease;
}

.nms-gantt__bar.is-editable:hover {
    filter: brightness(1.06);
}

.nms-gantt__bar.is-editable:focus-visible {
    outline: 2px solid rgb(239 68 68);
    outline-offset: 2px;
}

.nms-gantt__assignees {
    display: flex;
    flex: none;
    padding-right: 0.15rem;
}

.nms-gantt__avatar {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    place-items: center;
    border: 2px solid rgb(255 255 255 / 0.85);
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.9);
    color: rgb(31 41 55);
    font-size: 0.5rem;
    font-weight: 800;
}

.nms-gantt__avatar + .nms-gantt__avatar {
    margin-left: -0.45rem;
}

.nms-gantt__bar.is-point {
    width: 1.15rem;
    height: 1.15rem;
    min-width: 1.15rem;
    justify-self: center;
    padding: 0;
    border-radius: 0.2rem;
    transform: rotate(45deg);
}

.nms-gantt__no-tasks {
    display: flex;
    grid-template-columns: none;
    padding: 0.75rem 1rem 0.75rem 3.2rem;
    color: rgb(156 163 175);
    font-size: 0.75rem;
}

.nms-gantt__empty {
    display: flex;
    min-height: 14rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: rgb(107 114 128);
    text-align: center;
}

.nms-gantt__empty svg {
    width: 2.5rem;
    height: 2.5rem;
    color: rgb(239 68 68);
}

.nms-gantt__empty strong {
    color: rgb(31 41 55);
}

.nms-availability {
    display: grid;
    gap: 1rem;
}

.nms-availability__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.nms-availability__summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: rgb(249 250 251);
    color: rgb(75 85 99);
    font-size: 0.8125rem;
    font-weight: 600;
}

.nms-availability__summary-card strong {
    font-size: 1.5rem;
    line-height: 1;
}

.nms-availability__summary-card.is-available {
    border-color: rgb(167 243 208);
    background: rgb(236 253 245);
    color: rgb(4 120 87);
}

.nms-availability__summary-card.is-occupied {
    border-color: rgb(253 230 138);
    background: rgb(254 242 242);
    color: rgb(180 83 9);
}

.nms-availability__position-summary {
    display: grid;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: rgb(249 250 251);
}

.nms-availability__section-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgb(55 65 81);
    font-size: 0.8125rem;
}

.nms-availability__section-heading svg {
    width: 1rem;
    height: 1rem;
    color: rgb(220 38 38);
}

.nms-availability__position-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.nms-availability__position-card {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgb(167 243 208);
    border-radius: 0.625rem;
    background: white;
}

.nms-availability__position-card > span {
    overflow: hidden;
    color: rgb(55 65 81);
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nms-availability__position-card > div {
    display: flex;
    flex: none;
    align-items: baseline;
    gap: 0.25rem;
    color: rgb(4 120 87);
}

.nms-availability__position-card strong {
    font-size: 1rem;
}

.nms-availability__position-card.is-unavailable {
    border-color: rgb(229 231 235);
}

.nms-availability__position-card.is-unavailable > div {
    color: rgb(107 114 128);
}

.nms-availability__workers {
    display: grid;
    gap: 0.625rem;
}

.nms-availability__worker {
    display: grid;
    grid-template-columns: auto minmax(10rem, 1fr) minmax(10rem, 1.2fr) minmax(11rem, 1.3fr);
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: white;
}

.nms-availability__worker.is-available {
    border-color: rgb(167 243 208);
    background: rgb(248 255 252);
}

.nms-availability__avatar {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgb(239 68 68);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
}

.nms-availability__identity,
.nms-availability__state {
    display: grid;
    min-width: 0;
    gap: 0.3rem;
}

.nms-availability__identity strong {
    overflow: hidden;
    color: rgb(17 24 39);
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nms-availability__identity span,
.nms-availability__state > span {
    color: rgb(107 114 128);
    font-size: 0.75rem;
}

.nms-availability__identity span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.nms-availability__identity svg {
    width: 0.875rem;
    height: 0.875rem;
}

.nms-availability__positions {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.nms-availability__state {
    justify-items: start;
}

.dark .nms-gantt {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(17 24 39);
}

.dark .nms-gantt__toolbar,
.dark .nms-gantt__header,
.dark .nms-gantt__summary-row,
.dark .nms-gantt__summary-row .nms-gantt__left,
.dark .nms-gantt__left-header {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(31 41 55);
}

.dark .nms-gantt__scale-switcher {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(17 24 39);
}

.dark .nms-gantt__left {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(17 24 39);
}

.dark .nms-gantt__summary-row,
.dark .nms-gantt__task-row,
.dark .nms-gantt__months,
.dark .nms-gantt__months > div,
.dark .nms-gantt__days > :is(div, button) {
    border-color: rgb(255 255 255 / 0.1);
}

.dark .nms-gantt__day-action:hover,
.dark .nms-gantt__day-action:focus-visible {
    background: rgb(69 50 18);
}

.dark .nms-gantt__title-cell a,
.dark .nms-gantt__title-cell strong,
.dark .nms-gantt__empty strong {
    color: white;
}

.dark .nms-gantt__track > i {
    border-color: rgb(255 255 255 / 0.06);
}

.dark .nms-gantt__days .is-weekend,
.dark .nms-gantt__track > .is-weekend {
    background: rgb(255 255 255 / 0.025);
}

.dark .nms-gantt__track > .is-today {
    background: rgb(239 68 68 / 0.07);
}

.dark .nms-gantt__summary-row:hover .nms-gantt__left,
.dark .nms-gantt__task-row:hover .nms-gantt__left {
    background: rgb(69 50 18);
}

.dark .nms-availability__summary-card,
.dark .nms-availability__position-summary,
.dark .nms-availability__position-card,
.dark .nms-availability__worker {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(17 24 39);
}

.dark .nms-availability__summary-card.is-available,
.dark .nms-availability__worker.is-available {
    border-color: rgb(16 185 129 / 0.35);
    background: rgb(6 78 59 / 0.18);
}

.dark .nms-availability__summary-card.is-occupied {
    border-color: rgb(239 68 68 / 0.35);
    background: rgb(120 53 15 / 0.18);
}

.dark .nms-availability__identity strong {
    color: white;
}

.dark .nms-availability__section-heading,
.dark .nms-availability__position-card > span {
    color: rgb(229 231 235);
}

@media (max-width: 768px) {
    .nms-plan__filters {
        grid-template-columns: 1fr;
    }

    .nms-gantt {
        --gantt-left-width: 19rem;
        --gantt-day-width: 3.5rem;
    }

    .nms-gantt[data-gantt-scale='week'] {
        --gantt-day-width: 7rem;
    }

    .nms-gantt[data-gantt-scale='month'] {
        --gantt-day-width: 8rem;
    }

    .nms-gantt__toolbar {
        flex-wrap: wrap;
        padding-block: 0.5rem;
    }

    .nms-gantt__legend {
        display: none;
    }

    .nms-gantt__status {
        display: none !important;
    }

    .nms-availability__summary {
        grid-template-columns: 1fr;
    }

    .nms-availability__position-grid {
        grid-template-columns: 1fr;
    }

    .nms-availability__worker {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .nms-availability__positions,
    .nms-availability__state {
        grid-column: 1 / -1;
    }
}

@media (min-width: 769px) and (max-width: 1280px) {
    .nms-plan__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}