/* ==========================================================================
   Techmin working area (page content, card frame, modals)
   light: Figma node 2021:4728 · dark: Figma node 2023:15973

   The mockup draws the content region as one container with
   `padding: 24px 24px 60px` holding a single bordered box: 1px frame,
   square corners, no shadow, 24px of padding inside.

   The 60px at the bottom is split here as 36px on the container plus the
   24px every card already carries (`bootstrap-extended.css` gives `.card`
   `margin-bottom: 1.5rem`). That way a page ending in a card reproduces the
   mockup exactly, and two stacked cards keep the 24px rhythm the grid uses
   everywhere else.

   The same frame is given to modals at the bottom of this file: a popup is
   the same bordered box, only floating over a backdrop.

   Everything about the frame goes through Bootstrap's own `--bs-card-*` and
   `--bs-modal-*` APIs, so the markup needs no new classes. The selectors are
   single-class (0,1,0) — the same weight `bootstrap-extended.css` uses for
   `.card` — and win on load order alone. Load this file last and do not add `!important`.
   ========================================================================== */

/* --- Light theme --- */
:root {
  --ct-gutter: 24px;
  --ct-gutter-bottom: 36px;
  --ct-card-bg: #fff;
  --ct-card-border: rgba(0, 0, 0, .2);
}

/* --- Dark theme --- */
/* The node paints the card pure #000, but every other surface this design
   system defines is #0a0a0a (table card, form field, pagination cell). A page
   showing a plain card next to a `dt-techmin` one would then carry two
   different blacks, so the shared value wins. */
[data-bs-theme="dark"] {
  --ct-card-bg: #0a0a0a;
  --ct-card-border: #262626;
}

/* --------------------------------------------------------------------------
   The content region
   `main.css` writes `.main-wrapper .main-content { padding: 1.5rem }` and
   `.main-wrapper { padding-bottom: 32px }`. Both are repeated here at the
   same specificity: the mockup keeps all of the page's padding on one
   container, so the wrapper gives its share up.
   -------------------------------------------------------------------------- */

.main-wrapper {
  padding-bottom: 0;
}

.main-wrapper .main-content {
  padding: var(--ct-gutter) var(--ct-gutter) var(--ct-gutter-bottom);
}

/* --------------------------------------------------------------------------
   The card frame
   `border` and `box-shadow` are written out because `bootstrap-extended.css`
   sets `border: 0` and a shadow on `.card` directly — setting the tokens
   alone would leave both in place.
   -------------------------------------------------------------------------- */

.card {
  --bs-card-bg: var(--ct-card-bg);
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--ct-card-border);
  --bs-card-border-radius: 0;
  --bs-card-inner-border-radius: 0;
  --bs-card-box-shadow: none;
  --bs-card-spacer-y: var(--ct-gutter);
  --bs-card-spacer-x: var(--ct-gutter);
  /* the mockup has no card header; 24px keeps a header's text on the same
     left edge as the body, and 18px is the vertical padding the table card
     header uses (17/19 in `tables-techmin.css`) */
  --bs-card-cap-padding-y: 18px;
  --bs-card-cap-padding-x: var(--ct-gutter);

  margin-bottom: var(--ct-gutter);
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: 0;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Modals
   A modal is the same surface as a card — a bordered box on the page's
   content, only floating over a backdrop — so it takes the same frame: 1px,
   square corners, palette colours. Bootstrap 5.3 declares
   `--bs-modal-box-shadow` but no rule reads it, so there is no shadow to drop.

   The tokens sit on `.modal`, which is where Bootstrap declares them;
   `.modal-content`, `.modal-header` and `.modal-footer` all read them from
   there. Single-class (0,1,0) — the same weight as Bootstrap's own block —
   winning on load order, like everything else in this file.

   The fill follows the card, not just the frame: in the light theme
   `--bs-modal-bg` already resolves to #fff, but in the dark one it resolves
   to Bootstrap's #212529, and a #262626 border on it would be invisible. The
   frame only reads on the surface the rest of the system uses.
   -------------------------------------------------------------------------- */

.modal {
  --bs-modal-bg: var(--ct-card-bg);
  --bs-modal-border-width: 1px;
  --bs-modal-border-color: var(--ct-card-border);
  --bs-modal-border-radius: 0;
  --bs-modal-inner-border-radius: 0;
  --bs-modal-header-border-color: var(--ct-card-border);
  --bs-modal-footer-border-color: var(--ct-card-border);
}