/* Platform-wide card component. `.global-card` is the canonical opaque panel — the
   single surface treatment for any dashboard block, form section, list, or
   detail pane. Converge on it; glass is allow-list only (see the styleguide).

   It carries chrome only (fill, hairline border, card radius, resting shadow)
   and the flex-column structure a card container needs, so it stands alone —
   no Bootstrap `.card` required. Content goes in the usual slots, which main.css
   already skins with bare `.card-header` / `.card-body` rules:

       <div class="global-card">
         <div class="card-header">Bookings</div>
         <div class="card-body">…</div>
       </div>

   Because it holds no padding of its own, migrating a hand-rolled `.card` panel
   onto `.global-card` is a near-mechanical class swap — since the card-adoption
   sweep the chrome is identical, corner included: both ride --radius-card. */

/* ── Canonical component ── the locked recipe: white fill, one hairline border,
   the 8px card radius, and the resting --shadow-sm lift. */
.global-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}

/* A list that ends the card keeps the card's bottom corners — a flush list
   is square, and its last row's fill painted over the card's radius (the
   profile's Files card, Nick, 09-03). Bootstrap's own last-child rule hands
   the list's radius on to that row. */
.global-card > .list-group:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* ── Variants ── each collapses a recipe that today is hand-rolled in feature
   CSS across many one-off `*-card` classes. */

/* --flat: border only, no resting shadow — for panels that sit flush inside
   another surface where a lift would double up (e.g. the profile card). */
.global-card--flat {
    box-shadow: none;
}

/* --elevated: a floating, borderless shell with a heavier shadow — for a
   standalone hero surface that isn't nested in a dashboard grid (the public
   booking-form shell, the embedded feed card). */
.global-card--elevated {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

/* --accent: a brand-colored 3px left rail marking an attention / status card
   (a pending bill, a deposit, a flagged payment). Rides on top of the hairline
   border, so the other three sides stay neutral. Declared AFTER --elevated on
   purpose: --elevated paints all four borders transparent via the border-color
   shorthand, and this longhand re-colors the left rail — keep the order so the
   two compose (a floating card can still carry a status rail). */
.global-card--accent {
    border-left-width: 3px;
    border-left-color: var(--color-action);
}

/* --clickable: the whole card is a target. Cursor + a hover lift; pair it with
   a real link/button for keyboard access (the card itself is not focusable). */
.global-card--clickable {
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.global-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* An elevated card already rests at --shadow-lg, so the plain --clickable hover
   (--shadow-md, smaller) would visibly SHRINK its shadow. Hold the large shadow
   for the combination — the translateY lift alone carries the hover feedback. */
.global-card--elevated.global-card--clickable:hover {
    box-shadow: var(--shadow-lg);
}