/* ═══════════════════════════════════════════════════════════════════════════
   Check-in pre-signature checklist dialog (DtCheckInChecklist) — mw-cic-*

   MitDir-only confirmation tiles shown before the signature: parking/camping
   ticket handover and the works-until-takedown departure date. A ticked tile
   lights up with the edge-glow + tail-corner recipe in the SUCCESS color
   (confirmation = green). Recipe: docs/plans/mitware-theme/edge-glow-and-tail-corner.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dialog sizing ── */

@media (min-width: 600px) {
    .mud-dialog.mw-cic-dlg {
        min-width: 460px;
        max-width: 560px;
    }
}

/* ── Header (avatar + name), mirrors the handout dialog head ── */

.mw-cic-head {
    display: flex;
    align-items: center;
    gap: 13px;
}

.mw-cic-pav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--mud-palette-surface);
    background: var(--mud-palette-primary);
}

/* ── Body ── */

.mw-cic-body-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mw-cic-intro {
    margin: 0 2px 2px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
}

/* ── Confirmation tile ── */

.mw-cic-item {
    --mw-cic-c: var(--mud-palette-success);
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    cursor: pointer;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    transition: border-color .15s, top .12s, background .2s;
    user-select: none;
}

/* NOTE: The hover lift uses `top` (the tile is already position: relative), NOT `transform`.
   A non-none transform would make this tile the containing block for the takedown tile's
   PickerVariant.Dialog calendar (a position: fixed popup that renders in-place, not portaled),
   clipping the calendar to the tile and flickering as hover toggles at its edge. `top` lifts
   without establishing a fixed-descendant containing block. */
.mw-cic-item:hover {
    border-color: var(--mud-palette-lines-inputs);
    top: -1px;
}

/* Confirmed = edge glow + tail corner (4-layer recipe from the theme doc), success-tinted. */
.mw-cic-item--on {
    border: 1.5px solid transparent;
    border-top-left-radius: 4px;
    top: 0;
    background:
        linear-gradient(
            color-mix(in srgb, var(--mw-cic-c) 7%, var(--mud-palette-surface)),
            color-mix(in srgb, var(--mw-cic-c) 7%, var(--mud-palette-surface))) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            color-mix(in srgb, var(--mw-cic-c) 80%, transparent) 0%,
            color-mix(in srgb, var(--mw-cic-c) 45%, transparent) 40%,
            transparent 72%) border-box,
        linear-gradient(var(--mud-palette-lines-default), var(--mud-palette-lines-default)) border-box;
    box-shadow: -3px 2px 9px -8px color-mix(in srgb, var(--mw-cic-c) 65%, transparent);
}

/* Leading check indicator (visual only; the tile itself is the toggle). */
.mw-cic-check {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-disabled);
    transition: color .2s;
}

.mw-cic-check .mud-icon-root {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.mw-cic-item--on .mw-cic-check {
    color: var(--mw-cic-c);
}

/* Category icon tile. */
.mw-cic-tile {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    transition: .2s;
}

.mw-cic-tile .mud-icon-root {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.mw-cic-item--on .mw-cic-tile {
    color: var(--mud-palette-surface);
    background: var(--mw-cic-c);
}

/* Text block. */
.mw-cic-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mw-cic-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.mw-cic-sub {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .05em;
    color: var(--mud-palette-text-disabled);
    margin-top: 2px;
}

.mw-cic-item--on .mw-cic-sub {
    color: color-mix(in srgb, var(--mw-cic-c) 80%, var(--mud-palette-text-primary));
}

/* Editable departure date — swallows clicks so editing never toggles the tile. */
.mw-cic-date {
    margin-top: 4px;
    cursor: default;
}

.mw-cic-datepicker {
    max-width: 230px;
}

/* Disabled tile — the takedown tile once "does not work during takedown" is ticked. */
.mw-cic-item--disabled {
    pointer-events: none;
    opacity: .5;
}

/* ── Opt-out checkbox under the takedown tile ── */

.mw-cic-optout {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 2px 0 6px;
    padding: 4px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    user-select: none;
    transition: color .15s;
}

.mw-cic-optout:hover {
    color: var(--mud-palette-text-primary);
}

/* Real checkbox kept for accessibility, visually replaced by the MudIcon glyph. */
.mw-cic-optout-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.mw-cic-optout .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--mud-palette-text-disabled);
    transition: color .15s;
}

.mw-cic-optout--on {
    color: var(--mud-palette-text-primary);
}

.mw-cic-optout--on .mud-icon-root {
    color: var(--mud-palette-warning);
}