/*
 * IntelliSee surface elevation.
 *
 * Refines Bootstrap .card and the .macc-card primitive so panels lift off
 * the dark canvas with a subtle 1px top highlight + soft drop shadow,
 * instead of relying on a single hairline border. Adds an opt-in
 * .macc-card--interactive modifier for cards that respond to hover/focus.
 *
 * All values come from canonical tokens in 01-tokens.css. Pages that set
 * their own card surfaces remain authoritative — these defaults only
 * apply where Bootstrap's vanilla .card would otherwise show through.
 */

@layer components {

    /* ----- Bootstrap .card bridge ----------------------------------- */
    /* Bootstrap's .card normally inherits a flat surface. Map it onto the
       canonical card tokens so every card across the app picks up the
       refined elevation in one place. */
    .card {
        background-color: var(--macc-card-bg);
        border: 1px solid var(--macc-card-border);
        border-radius: var(--macc-radius-panel);
        box-shadow: var(--macc-card-shadow);
        color: var(--macc-text);
    }

    .card-header,
    .card-footer {
        background-color: transparent;
        border-color: var(--macc-card-border);
    }

    /* ----- macc-card primitive -------------------------------------- */
    /* Drop-in panel for new views. Composes the canonical surface and
       opts into hover lift via the --interactive modifier. */
    .macc-card {
        background-color: var(--macc-card-bg);
        border: 1px solid var(--macc-card-border);
        border-radius: var(--macc-radius-panel);
        box-shadow: var(--macc-card-shadow);
        color: var(--macc-text);
        padding: 1.25rem;
        transition:
            box-shadow 160ms ease,
            border-color 160ms ease,
            transform 160ms ease;
    }

    .macc-card--flush {
        padding: 0;
    }

    .macc-card--quiet {
        box-shadow: var(--macc-elevation-flat);
    }

    /* Interactive variant — only applies when the card is a real link/
       button surface. Keeps static cards calm. */
    .macc-card--interactive {
        cursor: pointer;
    }

    .macc-card--interactive:hover,
    .macc-card--interactive:focus-visible {
        border-color: var(--macc-border-strong);
        box-shadow: var(--macc-elevation-card-hover);
        transform: translateY(-1px);
    }

    .macc-card--interactive:focus-visible {
        outline: 2px solid var(--macc-focus-border);
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
        .macc-card,
        .macc-card--interactive:hover,
        .macc-card--interactive:focus-visible {
            transition: none;
            transform: none;
        }
    }

    /* ----- Card header / body / footer (composable) ----------------- */
    .macc-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--macc-card-border);
        margin-bottom: 0.75rem;
    }

    .macc-card__title {
        font-size: var(--macc-text-h4);
        line-height: var(--macc-line-height-heading);
        font-weight: var(--macc-font-weight-strong);
        color: var(--macc-text);
        margin: 0;
    }

    .macc-card__subtitle {
        font-size: var(--macc-text-small);
        color: var(--macc-text-secondary, var(--macc-text-muted));
        margin: 0;
    }

    .macc-card__footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--macc-card-border);
        margin-top: 0.75rem;
    }

    /* ----- Panel surface (lighter than card, for nested groups) ----- */
    /* Use inside cards to group related controls without competing with
       the parent card's elevation. */
    .macc-panel {
        background-color: var(--macc-surface-2);
        border: 1px solid var(--macc-border-subtle);
        border-radius: var(--macc-radius-md);
        padding: 0.75rem 1rem;
    }
}