/* ======================================================================================
   THE CARD ACTION BOX — assets/css/dash-modal.css
   ======================================================================================
   ⚠ ONE BOX, ONE LOOK, WHEREVER A CARD IS WORKED (Danielle RULED 2026-09-21, option A).
   Every Done / Pause / Dismiss / Un-pause box on every list and on the dashboard is built by the
   ONE file assets/js/dashboard-actions.js. Its LOOK used to live inside assets/css/dashboard.css,
   which the action lists load and views/dashboard.php does NOT — so on the dashboard the very same
   box came out unstyled: no overlay, no centring, just a plain block appended to <body>, which is
   why pressing DONE on a task threw the note box to the BOTTOM OF THE PAGE, away from the card.
   It was never a second box. It was the same box with no clothes on.

   ⚠ SO IT LIVES HERE, ON ITS OWN, AND EVERY PAGE THAT LOADS dashboard-actions.js LOADS THIS TOO.
   The two belong together: if a screen can open the box, it must be able to draw it. Do NOT fold
   these rules back into a page-specific stylesheet.
   ====================================================================================== */

/* The overlay is FIXED and covers the viewport, so the box sits in front of the person over
   whatever they clicked — never at the end of the document. */
/* ⚠ THE BOX ALWAYS FITS THE SCREEN AND SCROLLS INSIDE ITSELF (Danielle RULED 2026-09-21). With two
   or three return lines the box grew TALLER THAN HER LAPTOP, and because the overlay centres it the
   top AND bottom were cut off — Confirm was off the screen with no way to reach it. The overlay now
   carries the gutter, the box is a flex column capped at the viewport, .dash-modal-body scrolls and
   the buttons are pinned at the foot. ⚠ `dvh` second, `vh` first: the older unit stays the fallback
   for browsers that do not know the new one, and on a phone `dvh` is the one that accounts for the
   address bar. */
.dash-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 16px; box-sizing: border-box; }
/* ⚠ EVERY BOX IS THIS BOX (R272, 2026-10-05) — in front of the black strip (z-index 1000), so the overlay is 1100. */
.dash-modal { position: relative; background: #fff; border-radius: 10px; padding: 0; width: 340px; max-width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.25);
  display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
/* The × at the top (R272). It presses the box's own Cancel / Close (assets/js/house.js), so leaving by it is leaving
   by the word. The body keeps clear of it. */
.dash-modal-x { position: absolute; top: 6px; right: 8px; z-index: 1; width: 30px; height: 30px; border: 0; border-radius: 6px;
  background: transparent; color: #64748b; font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0; }
.dash-modal-x:hover, .dash-modal-x:focus-visible { background: #f1f5f9; color: #0f172a; }
.dash-modal-head { flex: 0 0 auto; padding: 16px 44px 0 20px; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.dash-modal-head + .dash-modal-body { padding-top: 10px; }
.dash-modal-wide { width: 440px; }
.dash-modal-xl { width: 720px; }
.dash-modal-full { width: 1280px; }   /* a page-sized form (the recipe box) */
/* A page's own box whose form holds both the fields and the buttons: the form takes the box's column, so the fields
   scroll in .dash-modal-body and the buttons stay pinned at the foot, exactly as in the card box. */
.dash-modal-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; margin: 0; }
/* ⚠ `min-height:0` IS LOAD-BEARING: a flex item's default minimum is its content, so without it the
   body refuses to shrink and the box grows past the viewport exactly as before. */
.dash-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 4px; }
.dash-modal-label { font-size: .9rem; color: #334155; margin-bottom: 10px; }
.dash-modal-date { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem; box-sizing: border-box; }
.dash-modal-note { width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: .95rem; box-sizing: border-box; resize: vertical; }
.dash-modal-count { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem; box-sizing: border-box; }
.dash-modal-reason { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: .95rem; box-sizing: border-box; }
/* Pinned at the foot, outside the scroll area, so Confirm is always reachable. */
.dash-modal-btns { flex: 0 0 auto; display: flex; gap: 8px; justify-content: flex-end; margin-top: 0;
  padding: 12px 20px 16px; background: #fff; border-radius: 0 0 10px 10px; }
.dash-modal-body + .dash-modal-btns { border-top: 1px solid #e2e8f0; }
/* ⚠ THE REFUSAL SITS BETWEEN THE SCROLLING BODY AND THE BUTTONS, so it can never be scrolled out of
   sight — her ruling is that the box stays open and SAYS WHY. */
.dash-modal-error { flex: 0 0 auto; margin: 10px 20px 0; padding: 9px 11px; border-radius: 6px;
  background: #fee2e2; border: 1px solid #ef4444; color: #991b1b; font-size: .88rem; font-weight: 600; }

/* The box's buttons are the ONE button set (R270) — assets/css/house.css, loaded on every page by includes/header.php.
   Their own copy that lived here is gone. */

/* ⚠ WHAT THE SAVE DID, LEFT STANDING UNTIL SHE CLOSES IT (Danielle RULED 2026-09-21). The server
   builds a real sentence — "64 unused packaging went back into stock." — and the box used to throw
   it away on arrival. Green, readable, and it waits: never a flash, never a timer. */
.dash-modal-done { font-size: .95rem; line-height: 1.45; color: #065f46; background: #ecfdf5; border: 1px solid #10b981; border-radius: 6px; padding: 11px 13px; }

/* ======================================================================================
   "HOW MANY SHOULD GO BACK?" — THE RETURN LINES (Danielle RULED 2026-09-21)
   ⚠ THE QUESTION IS A SENTENCE, NOT A COLUMN. It used to sit in a `flex:1` span beside the number
   field, and `flex:1` means a flex-basis of ZERO — so in a 340px box the question shrank to its
   longest word and read one or two words per line. It now gets the full width and the field goes
   under it, which cannot break at any width.
   ====================================================================================== */
.dash-modal-returns { margin-top: 12px; border-top: 1px solid #e2e8f0; padding-top: 8px; }
.dash-returns-intro { margin-bottom: 2px; }
.dash-return-row { padding: 6px 0; }
.dash-return-row + .dash-return-row { border-top: 1px dotted #e2e8f0; }
.dash-return-used { font-size: .86rem; line-height: 1.3; font-weight: 600; color: #334155; overflow-wrap: anywhere; }
/* ⚠ THE FIELD COMES BACK BESIDE THE QUESTION TO SAVE A LINE'S HEIGHT — BUT WITH A REAL BASIS, WHICH
   IS THE WHOLE DIFFERENCE (2026-09-21). The version she found unreadable used `flex:1`, and `flex:1`
   means a basis of ZERO: the question could shrink all the way to its longest word and came out one
   or two words per line. `flex: 1 1 15rem` means "start at 15rem, and if there is not room for that
   AND the field, wrap the field onto its own line instead of squeezing me". The question is never
   narrower than 15rem, at any width, in any box. ⚠ Do NOT replace this basis with 0 or `auto`. */
.dash-return-ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 2px; }
.dash-return-q { flex: 1 1 15rem; min-width: 0; font-size: .9rem; line-height: 1.35; color: #334155; overflow-wrap: anywhere; }
.dash-return-line { flex: 0 0 auto; width: 92px; max-width: 100%; padding: 6px 8px; border: 1px solid #cbd5e1;
  border-radius: 6px; font-size: 1rem; box-sizing: border-box; }
.dash-return-msg { flex: 1 1 100%; display: block; color: #991b1b; font-size: .8rem; font-weight: 600;
  line-height: 1.3; margin-top: 1px; overflow-wrap: anywhere; }

/* ======================================================================================
   THE CARD, SHOWN IN THE BOX — Danielle RULED 2026-09-22
   ======================================================================================
   ⚠ An ACTION ITEMS line on the dashboard opens ITS OWN CARD here. The card's markup is the
   server's (DashboardRenderer), identical to the one the action-list page draws — but the
   dashboard does NOT load the action lists' stylesheet, so without these rules the card came out
   as bare browser defaults inside a properly drawn box. Same lesson as the box itself: if a screen
   can open it, it must be able to draw it. Do NOT fix this by loading dashboard.css on the
   dashboard — that stylesheet also restyles the page around it.
   ⚠ Everything here is SCOPED INSIDE .dash-modal, so the action lists (which bring their own
   card styling) are untouched.
   ====================================================================================== */
.dash-modal .dash-section { margin: 0; }
.dash-modal .dash-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; background: #fff; }
.dash-modal .dash-card + .dash-card { margin-top: 10px; }
.dash-modal .dash-card-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; justify-content: space-between; }
.dash-modal .dash-title { font-size: 1rem; font-weight: 700; color: #0f172a; line-height: 1.35; overflow-wrap: anywhere; }
.dash-modal .dash-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.dash-modal .dash-badge { font-size: .74rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
.dash-modal .dash-badge.tone-warn { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.dash-modal .dash-badge.tone-danger { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.dash-modal .dash-badge.tone-info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.dash-modal .dash-sub { font-size: .82rem; color: #64748b; margin-top: 3px; }
.dash-modal .dash-notice { font-size: .87rem; line-height: 1.45; color: #334155; background: #f8fafc;
  border: 1px solid #e2e8f0; border-left: 3px solid #94a3b8; border-radius: 4px; padding: 8px 10px; margin-top: 9px; }
/* The named things the card counts — label above value, so a long name never squeezes its figure. */
.dash-modal .dash-meta { margin: 10px 0 0; padding: 0; font-size: .85rem; }
.dash-modal .dash-meta dt { font-weight: 600; color: #0f172a; margin-top: 6px; overflow-wrap: anywhere; }
.dash-modal .dash-meta dd { margin: 0; color: #475569; overflow-wrap: anywhere; }
.dash-modal .dash-meta a { color: #1d4ed8; }
/* The card's own buttons. They scroll with the card; the box's Close stays pinned below. Their look is the ONE
   button set (R270, assets/css/house.css). */
.dash-modal .dash-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* The line that opens a card: a button that reads as the list row it replaced, not as a control. */
.db-open-card { background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left;
  color: #1d4ed8; font-weight: 600; font-size: .93rem; cursor: pointer; text-decoration: none; }
.db-open-card:hover, .db-open-card:focus-visible { text-decoration: underline; }

/* The tick list, inside the box. ⚠ Same rules as assets/css/dashboard.css, scoped — the dashboard
   shows a card in this box and does not load that file. Keep the two in step. */
.dash-modal .dash-checklist { margin-top: 10px; border-top: 1px solid #e2e8f0; padding-top: 8px; }
.dash-modal .dash-check-row { display: flex; gap: 9px; align-items: flex-start; padding: 7px 2px; cursor: pointer; }
.dash-modal .dash-check-row + .dash-check-row { border-top: 1px dotted #e2e8f0; }
.dash-modal .dash-check-row:hover { background: #f8fafc; }
.dash-modal .dash-check { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; }
.dash-modal .dash-check-text { display: block; min-width: 0; }
.dash-modal .dash-check-label { display: block; font-size: .9rem; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.dash-modal .dash-check-sub { display: block; font-size: .8rem; line-height: 1.4; color: #64748b; overflow-wrap: anywhere; }
/* The group heading, inside the box. ⚠ Same rules as assets/css/dashboard.css — keep the two in step. */
.dash-modal .dash-check-group { margin: 12px 0 2px; padding: 6px 8px; border-radius: 5px; background: #f1f5f9;
  border-left: 3px solid #94a3b8; font-size: .85rem; font-weight: 700; color: #0f172a;
  line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.dash-modal .dash-check-row + .dash-check-group { margin-top: 16px; }

/* The card open in the box was handled somewhere else (Danielle RULED 2026-09-23): the box stays and says so. */
.dash-modal .dash-live-handled { margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; background: #eff6ff;
  border: 1px solid #93c5fd; color: #1e3a8a; font-size: .9rem; font-weight: 600; }

/* ======================================================================================
   THE "NEW" MARK (Danielle RULED 2026-09-23) — "new, open me", NOT an alarm.
   ⚠ BLUE, never red: red on this system means something is wrong (the daily-run box, a count that could
   not be worked out). This is an invitation. Lives here because every page that draws a card loads this
   file — the action lists, and the dashboard's box.
   ====================================================================================== */
.dash-new-mark { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 1px 4px 1px 8px;
  border-radius: 999px; background: #2563eb; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; vertical-align: middle; }
.dash-seen-btn { border: 0; border-radius: 999px; background: #fff; color: #1d4ed8; font-size: .7rem; font-weight: 700;
  padding: 1px 7px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.dash-seen-btn:hover { background: #dbeafe; }
/* Inside the dashboard's box, opening the card already counted as seeing it — no button to press. */
.dash-card-overlay .dash-seen-btn { display: none; }
.dash-card-overlay .dash-new-mark { padding-right: 8px; }
/* A row or a named item that is new or changed since this person last opened the card. */
.dash-check-row.dash-row-new { background: #eff6ff; box-shadow: inset 3px 0 0 #3b82f6; border-radius: 4px; }
.dash-meta dt.dash-meta-new, .dash-meta dd.dash-meta-new { background: #eff6ff; }
.dash-row-new-tag { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 999px; background: #dbeafe;
  color: #1d4ed8; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px; }

/* A refusal written by assets/js/box-refusal.js sits between a card box's body and its buttons; inside the card box it
   keeps the body's side margins (the box itself has no padding). Look pass, 2026-10-05. */
.dash-modal > .box-refusal { margin-left: 20px; margin-right: 20px; margin-bottom: 4px; }