/* Shift rules — eligibility rendering, obligation editor/progress, submission controls,
   shift module (mw-sm-*).
   Sections: shift module (mw-sm-*), shift template eligibility states,
   obligations editor (mw-sob-*), obligation progress (mw-sop-*),
   eligibility manage dialog (mw-ser-*), submission controls (mw-ssc-*). */

/* NOTE: === Shift module (mw-sm-*) === */

.mw-sm-root {
    border-radius: var(--mud-default-borderradius);
}

.mw-sm-locked {
    background: var(--mud-palette-background-gray);
}

.mw-sm-shifts {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 12px;
}

/* One team section: its obligation-card header followed by that team's shift cards. */
.mw-sm-team {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* NOTE: === Shift display card (mw-sd-*) — shares the obligation card language (mw-sop-*) === */

.mw-sd-card {
    /* Team accent — Mud primary by default; later driven by the team's picked color. */
    --mw-sd-accent: var(--mud-palette-primary);
    width: 100%;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mw-sd-accent);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    /* Three columns: identity (3/12) · time + checks (6/12) · note (3/12). */
    display: grid;
    grid-template-columns: 3fr 6fr 3fr;
    align-items: stretch;
}

.mw-sd-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    min-width: 0;
}

.mw-sd-col + .mw-sd-col {
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* Column 1: index + position + area. */
.mw-sd-idline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mw-sd-index {
    flex: none;
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    padding: 3px 8px;
    border-radius: 999px;
}

.mw-sd-pos {
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-sd-mrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    min-width: 0;
}

.mw-sd-mval {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column 2: time over the side-by-side check-in / check-out cells. */
.mw-sd-time {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mw-sd-time-val {
    font-size: 0.84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mw-sd-checks {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.mw-sd-check {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 8px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
    text-align: center;
}

.mw-sd-check-done {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
}

.mw-sd-check-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.mw-sd-check-done .mw-sd-check-label {
    color: var(--mud-palette-success);
}

/* Column 3: the shift's note, filling the card height (or a muted placeholder when there is none). */
.mw-sd-col-note {
    justify-content: stretch;
}

.mw-sd-note {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
}

.mw-sd-note-icon {
    color: var(--mud-palette-warning);
}

.mw-sd-note-txt {
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.mw-sd-note-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--mud-palette-text-disabled);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* NOTE: === Account page — larger card text (scoped to .mw-account-shifts) ===
   The shift cards (mw-sd-*) and obligation cards (mw-sop-*) are shared across the
   shift planner and dialogs at their compact sizes; on the account page they read
   as primary content, so bump every text element to at least 1.125rem. Desktop only
   (md and up) — on mobile the cards keep their original compact sizes. */
@media (min-width: 960px) {
    .mw-account-shifts .mw-sd-card,
    .mw-account-shifts .mw-sop-team {
        line-height: 1.75;
    }

    .mw-account-shifts .mw-sd-pos,
    .mw-account-shifts .mw-sd-mval,
    .mw-account-shifts .mw-sd-time-val,
    .mw-account-shifts .mw-sd-mrow,
    .mw-account-shifts .mw-sd-note-txt,
    .mw-account-shifts .mw-sd-check-label,
    .mw-account-shifts .mw-sop-team-name,
    .mw-account-shifts .mw-sop-team-summary,
    .mw-account-shifts .mw-sop-ob-name,
    .mw-account-shifts .mw-sop-ob-count,
    .mw-account-shifts .mw-sop-sev {
        font-size: 1.125rem;
    }
}

/* NOTE: === Shift template eligibility states (context styles on .mw-shift-template) === */

/* Rule color strip — inset bar on the leading edge, color from --mw-shift-rule-color */
.mw-shift-rule-colored .mw-shift-template {
    box-shadow: inset 4px 0 0 0 var(--mw-shift-rule-color);
}

/* Error severity — the user cannot take this shift */
.mw-shift-elig-blocked .mw-shift-template {
    filter: grayscale(0.85);
    opacity: 0.55;
    cursor: not-allowed;
}

/* Warning severity — takeable, but prominently flagged */
.mw-shift-elig-warning .mw-shift-template {
    outline: 2px dashed var(--mud-palette-warning);
    outline-offset: -2px;
}

/* Hint severity — icon only, no surface change */

/* NOTE: === Obligation progress (mw-sop-*) — per-team cards === */

.mw-sop-root {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0;
}

/* Team card with a leading accent rail (defaults to Mud primary). */
.mw-sop-team {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

.mw-sop-team-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.mw-sop-team-sym {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}

.mw-sop-team-meta {
    flex: 1;
    min-width: 0;
}

.mw-sop-team-name {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-sop-team-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.mw-sop-team-summary.mw-sop-all-done {
    color: var(--mud-palette-success);
}

.mw-sop-done-icon {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
}

/* Clickable team head (panel: the header toggles the team's shift plan). */
.mw-sop-team-head--clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.mw-sop-team-head--clickable:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Trailing show / hide state glyph on a clickable head. */
.mw-sop-team-state {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-secondary);
}

/* Open-obligation summary (panel, where met obligations are hidden) — warning tint. */
.mw-sop-team-summary.mw-sop-open {
    color: var(--mud-palette-warning);
}

/* Greyed team — not currently shown in the scheduler (panel). */
.mw-sop-team--hidden {
    opacity: 0.5;
    filter: grayscale(0.55);
}

/* Obligation rows */
.mw-sop-obs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 12px 12px;
}

.mw-sop-ob {
    --mw-sop-sev: var(--mud-palette-info);
    --mw-sop-sym: var(--mud-palette-primary);
    --mw-sop-over-w: 0%;
}

.mw-sop-ob-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mw-sop-ob-sym {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--mud-default-borderradius);
    color: var(--mw-sop-sym);
    background: color-mix(in srgb, var(--mw-sop-sym) 15%, transparent);
}

.mw-sop-ob-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 500;
}

.mw-sop-ob-count {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* The bar: severity color until fulfilled, then green; error + hatch when over the cap. */
.mw-sop-bar {
    position: relative;
    height: 8px;
    margin-top: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 16%, transparent);
    overflow: hidden;
}

.mw-sop-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--mw-sop-sev);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mw-sop-ob.mw-sop-ok .mw-sop-fill {
    background: var(--mud-palette-success);
}

.mw-sop-ob.mw-sop-over .mw-sop-fill {
    background: var(--mud-palette-error);
}

.mw-sop-ob.mw-sop-over .mw-sop-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--mw-sop-over-w);
    background: repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in srgb, #000 28%, transparent) 3px 6px);
}

.mw-sop-ob-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.mw-sop-sev {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mw-sop-sev);
}

.mw-sop-ob.mw-sop-ok .mw-sop-sev {
    color: var(--mud-palette-success);
}

.mw-sop-ob.mw-sop-over .mw-sop-sev {
    color: var(--mud-palette-error);
}

/* NOTE: === Submission controls (mw-ssc-*) === */

.mw-ssc-root {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.mw-ssc-submitted {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--mud-default-borderradius);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
}

.mw-ssc-submitted-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

.mw-ssc-submitted-label {
    font-size: 0.8rem;
    font-weight: 500;
}

.mw-ssc-submitted-time {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.mw-ssc-explainer {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* NOTE: === Obligations editor (mw-sob-*) === */

.mw-sob-row {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 8px;
    margin-bottom: 8px;
}

/* Top control row: severity + min/max + delete (label sits on its own line below). */
.mw-sob-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mw-sob-sev {
    width: 150px;
    flex-shrink: 0;
}

.mw-sob-top .mw-sob-count {
    width: 96px;
    flex-shrink: 0;
}

.mw-sob-del {
    margin-left: auto;
}

.mw-sob-label {
    margin-bottom: 6px;
}

.mw-sob-filter {
    margin-top: 4px;
}

.mw-sob-filter-caption {
    display: block;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.mw-sob-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.mw-sob-filter-row > :first-child {
    flex: 1;
    min-width: 0;
}

.mw-sob-always {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mw-sob-always-label {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* NOTE: === Team obligations picker (mw-obp-*) and single-obligation fields (mw-obf-*) === */

.mw-obp-root {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mw-obp-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 8px;
    margin-bottom: 4px;
}

.mw-obp-card-head,
.mw-obp-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.mw-obp-attach {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 8px;
}

.mw-obp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

/* NOTE: === Eligibility rule management (mw-ser-*) === */

.mw-ser-rule {
    background: var(--mud-palette-background-gray);
}

.mw-ser-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mw-ser-head .mw-ser-name {
    flex: 1;
}

.mw-ser-filter-caption {
    display: block;
    margin: 8px 0 4px;
    color: var(--mud-palette-text-secondary);
}

.mw-ser-delete {
    display: flex;
    justify-content: flex-end;
}

/* Color dot in rule pickers and menus */
.mw-ser-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    margin-right: 6px;
    vertical-align: middle;
}

/* NOTE: === Shared rule identity fields (mw-rif-*) === */

.mw-rif-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mw-rif-head .mw-rif-name {
    flex: 1;
    min-width: 0;
}

/* Obligation min/max row (mw-obf-*) */
.mw-obf-counts {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.mw-obf-counts .mw-sob-count {
    width: 96px;
    flex-shrink: 0;
}

/* NOTE: === Single eligibility rule fields (mw-erf-*) === */

.mw-erf-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mw-erf-head .mw-erf-name {
    flex: 1;
}

.mw-erf-filter-caption {
    display: block;
    margin: 8px 0 4px;
    color: var(--mud-palette-text-secondary);
}

/* NOTE: === Rules test page (mw-rt-*) === */

.mw-rt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .mw-rt-grid {
        grid-template-columns: 1fr;
    }
}

.mw-rt-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mw-rt-shift-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 6px;
}

.mw-rt-shift-row.mw-rt-blocked {
    filter: grayscale(0.5);
    opacity: 0.7;
}

.mw-rt-shift-verdict {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.mw-rt-shift-msg {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-rt-role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mw-rt-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1400px) {
    .mw-rt-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

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