/* =============================================================================
   Add-containers dialog (ContainerPickerDialog.razor) and the ready menu
   (ContainerOverviewPage.razor). Global stylesheet: CSS isolation did not load.
   Link it AFTER the Webflow stylesheets:
     <link href="css/picker.css" rel="stylesheet" />

   Aligned with the Softmoving UI Audit (Webflow export, 3 Nov 2026):
   * Colours use the PROPOSED token names with today's values as fallback, so
     they follow automatically once the Webflow Variables land, and look the
     same until then. No purple: the old #4b3aa8 accent is gone (audit
     decision 1, purple removal).
   * Spacing only from the scale 0, 2, 3, 5, 10, 15, 20, 30, 40px.
   * Font sizes only from 11, 12, 13, 14, 15, 18, 24, 30px. Font is inherited
     (DM Sans, audit decision 6).
   * Radius 4px default, 20px pill. Layers: 100 menu, 1000 popup.
   * Buttons use the audit's button system: the existing Webflow .button
     (primary, 11px 22px, 13px, radius 4px, zero margin) plus modifiers, inside
     a .button-row that owns all spacing.

   INTERIM: .button-row, .is-grey, .is-xsmall and the disabled state do not
   exist in Webflow yet (audit plan step 3). They are defined below, SCOPED to
   these two components so they cannot change any other page. Delete the
   "Interim button system" block once step 3 ships them globally.
   ============================================================================= */


/* ---------------------------------------------------------------------------
   Interim button system (remove after audit plan step 3)
   --------------------------------------------------------------------------- */

.picker .button-row,
.ready-menu .button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px; /* the audit's 10px button gap */
}

.picker .button.is-grey,
.ready-menu .button.is-grey {
    background: var(--color-surface-muted, #e0e0e0);
    color: var(--color-text, #00193d);
}

.picker .button.is-xsmall,
.ready-menu .button.is-xsmall {
    padding: 5px 10px;
    font-size: 11px;
}

.picker .button:disabled,
.ready-menu .button:disabled {
    opacity: .5;
    cursor: not-allowed;
}


/* ---------------------------------------------------------------------------
   Add-containers dialog
   --------------------------------------------------------------------------- */

.picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 25, 61, .35); /* --color-text navy, translucent */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* layer: popup */
}

.picker {
    background: #fff;
    color: var(--color-text, #00193d);
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 25, 61, .25);
    width: min(900px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
}

.picker-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-brand, #0e1457);
}

.picker-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    min-height: 0;
}

.picker-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border, #edf1f5);
    border-radius: 4px;
    min-height: 0;
}

.picker-list-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid var(--color-border, #edf1f5);
    font-size: 14px;
    font-weight: 700;
}

.picker-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    opacity: .7;
}

.picker-search {
    margin: 10px;
    padding: 5px 10px;
    font-size: 13px;
    color: inherit;
    border: 1px solid var(--color-surface-muted, #e0e0e0);
    border-radius: 4px;
}

.picker-rows {
    overflow-y: auto;
    height: 50vh;
}

.picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    font-size: 13px;
    cursor: pointer;
    user-select: none; /* Shift+click must not highlight text */
}

    /* The row is the click target; the checkbox only shows state. Click-through
   prevents the native toggle from drifting away from the selection. */
    .picker-row input {
        pointer-events: none;
    }

    .picker-row:hover {
        background: var(--color-page, #f5f7fd);
    }

    .picker-row.selected {
        background: color-mix(in srgb, var(--color-action, #3a66eb) 12%, #fff);
    }

    .picker-row.locked {
        cursor: not-allowed;
        opacity: .5;
    }

.picker-code {
    font-weight: 700;
}

.picker-sub {
    margin-left: auto;
    font-size: 12px;
    opacity: .7;
}

.picker-empty {
    padding: 15px 10px;
    font-size: 13px;
    opacity: .7;
}

/* > and <: grey extra-small buttons, stacked. */
.picker-moves {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

    .picker-moves .button {
        min-width: 40px;
    }

.picker-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status text takes the free space; the button row sits right. */
.picker-changes {
    margin-right: auto;
    font-size: 13px;
    opacity: .7;
}

.picker-error {
    margin-right: auto;
    font-size: 13px;
    color: #b42318;
}
/* status colour, unchanged */


/* ---------------------------------------------------------------------------
   Ready requests in the overview. The card highlight itself (moetklaar /
   staat-klaar) comes from the Webflow CSS; these are only the additions.
   --------------------------------------------------------------------------- */

/* A highlighted container that can be clicked for ready actions. */
.ready-clickable {
    cursor: pointer;
}

/* "N klaarzetten" in the left panel: the moetklaar orange (status colour). */
.ready-count {
    font-weight: 700;
    color: #b54708;
}

.div-opdrachtline.storage { align-items: center; }

/* URGENT (red): not marked, due within warehouse.readyUrgentWorkingDays or
   overdue. ONE red for the whole card: floor card, its B/M/O badge, and the
   small pool card. Webflow combo classes are full class chains, so each
   selector repeats that chain plus .urgent to outrank the orange.
   "background" (shorthand) also clears a Webflow gradient or image. */
.naam-div.lang.beschikbaar.eigen-per.ingepland.cont.moetklaar.urgent,
.naam-div.lang.beschikbaar.eigen-per.ingepland.klein.moetklaar.urgent,
.text-block-114-naam-right-small.dienst.moet-klaar.urgent {
    background: #f87171; /* clearly red, dark text stays readable */
}

/* END DATE (orange dot): due after the highlight window. Sits right in the
   card, just before the B/M/O badge. The margin rule takes over the badge's
   push to the right, so dot and badge stay together. */
.einddatum-dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 100%;
    background: #f79009;
}

    .einddatum-dot + .dienst {
        margin-left: 5px;
    }

/* Unplaced pool label: "klaarzetten · klaar op 12-11". */
.unplaced-ready {
    margin-left: 5px;
    font-size: 12px;
    opacity: .7;
}

    .unplaced-ready.urgent {
        opacity: 1;
        font-weight: 700;
        color: #d92d20;
    }

/* Small floating panel with the mark / unmark action. */
.ready-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100; /* layer: menu, below popups */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 30px));
    padding: 15px;
    background: #fff;
    color: var(--color-text, #00193d);
    border: 1px solid var(--color-border, #edf1f5);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 25, 61, .12);
}

.ready-menu-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-brand, #0e1457);
}

.ready-menu-date {
    margin-left: 5px;
    font-size: 13px;
    font-weight: 400;
    opacity: .7;
}

.ready-menu-reason {
    padding: 5px 10px;
    font-size: 13px;
    color: inherit;
    border: 1px solid var(--color-surface-muted, #e0e0e0);
    border-radius: 4px;
}