/* ============================================================================
   CARDS
   Consolidated from theme.css (vendor) and theme-override.css (app). Both
   sources' card rules are deleted; this file is the single owner of `.card` and
   its parts and variants.

   LOAD ORDER (required): after bootstrap.min.css and theme.css. Every
   surface, border and shadow here reads a token, so the light theme is
   entirely a matter of what tokens.css resolves them to.

   NOT owned here: `.stat-card` / `.stat-icon` / `.empty-state`.

   Non-obvious cascade facts preserved from the old files, because they are what
   renders today:
     - `.card .card-header` / `.card .card-body` / `.card .card-footer` (vendor,
       2 classes) out-specify the app's bare `.card-header` etc. (1 class). The
       vendor padding and the transparent header/footer fills therefore win, and
       the app's `--surface-2` header fill and `1.5rem` paddings only apply to a
       part used outside a `.card`.
     - `.card .card-header:first-child` flattens the header radius to 0, so the
       12px top radius only shows on a non-first header.
   `!important` is kept only where load-bearing; each survivor is commented.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/* Only bites on `.card-light` used without `.card` — the `.card` block below
   replaces both values. */
.card,
.card-light {
    border-radius: 5px;
    margin-bottom: 30px;
}

/* Same: overridden by `.card` when the two classes are combined. */
.card-round {
    border-radius: 5px;
}

.card {
    /* The card's gutter, named once here because four things line up on it: the
       header's side padding, the body's padding, and `.card-flush` / `.card-row`
       which cancel and re-match it. Literals in four places would drift and
       leave a row a few pixels off the title above it. */
    --card-pad: 1.25rem;
    flex: 1 1 0;
    overflow-x: auto;
    /* !important beats bootstrap's `.card { background-color: #fff }` and the
       vendor `body[data-background-color="dark"] .card` (2 classes). */
    background: var(--bg-surface) !important;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    transition: all 0.2s ease;
    margin: 0;
}

/* A `.card` nested inside a filled container is an item, not a sheet — the
   accordion rows the site-detail panel builds are each a `.card` inside a
   fieldset. Left on the sheet tone they take the same fill as the fieldset
   and disappear, so they step to whichever of the two mid rungs their
   container is not. The old translucent fill hid this by compositing over
   whatever it landed on; a flat fill has to be told.

   The `:not()` guards matter: these selectors carry a class plus an element
   and would otherwise outrank the single-class variant rules below,
   repainting a `.card-section` or `.card-inset` that sits inside a fieldset. */
fieldset .card:not(.card-section):not(.card-inset) {
    background: var(--bg-raise) !important;
}

/* ...and when the fieldset itself is already on --bg-raise (inside a card),
   the rows go the other way, back to the sheet. Either way they contrast. */
.card fieldset .card:not(.card-section):not(.card-inset),
.card-section .card:not(.card-section):not(.card-inset),
.card-inset .card:not(.card-section):not(.card-inset) {
    background: var(--bg-surface) !important;
}

/* The JS sizes this card's body to fill the viewport and scrolls it, so the
   card itself must never scroll. Needed explicitly: `overflow-x: auto` above
   forces the computed `overflow-y` to `auto` too, and a stray pixel of
   overflow then paints a second vertical scrollbar alongside the body's. */
.auto-resize-height-card {
    overflow-y: hidden;
}

.card.full-height {
    height: calc(100% - 30px);
}

.gutters-0 .card {
    margin-bottom: 0;
}

.gutters-sm .card {
    margin-bottom: 1rem;
}

/* ----------------------------------------------------------------------------
   Parts
   -------------------------------------------------------------------------- */

.card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-normal);
    border-radius: 12px 12px 0 0;
    padding: 1.25rem 1.5rem;
    color: var(--text-primary);
    font-weight: 600;
}

.card-body {
    overflow: auto;
    padding: 1.5rem;
}

.card-footer {
    background: var(--surface-1);
    border-top: 1px solid var(--border-normal);
    border-radius: 0 0 12px 12px;
    padding: 1rem 1.5rem;
}

/* Vendor part rules: 2 classes, so these out-specify the block above whenever
   the part is actually inside a card — which is the normal case. */
.card .card-header,
.card-light .card-header {
    /* Side gutter matches the body's, so a title lines up with the rows under it. */
    padding: 1rem var(--card-pad);
    /* Flat: a header is told from the body by its seam, not by a fill. The
       card's own fill already separates it from whatever it sits in, so a
       banded header spends a second step to say something already said. */
    background-color: transparent;
    /* !important beats bootstrap's `.card-header` border-bottom. */
    border-bottom: 1px solid var(--border-normal) !important;
}

/* Opt out of the seam. Bootstrap's `.border-0` is a single class and loses to
   the !important above, so restate it here at matching specificity: a header
   that is only a quiet label needs no rule under it. */
.card .card-header.border-0,
.card-light .card-header.border-0 {
    border-bottom: 0 !important;
}

.card .card-header:first-child,
.card-light .card-header:first-child {
    border-radius: 0;
}

.card .card-body,
.card-light .card-body {
    padding: var(--card-pad);
}

.card .card-footer,
.card-light .card-footer {
    background-color: transparent;
    line-height: 30px;
    /* !important beats bootstrap's `.card-footer` border-top. */
    border-top: 1px solid var(--border-normal) !important;
    font-size: 13px;
}

.card .card-footer hr,
.card-light .card-footer hr {
    margin-top: 5px;
    margin-bottom: 5px;
}

.card .card-footer .legend,
.card-light .card-footer .legend {
    display: inline-block;
}

.card .separator-solid,
.card-light .separator-solid {
    border-top: 1px solid var(--border-normal);
    margin: 15px 0;
}

/* ----------------------------------------------------------------------------
   Card header — the title row

   Bootstrap's own parts, modified. There is no second vocabulary: the header is
   `.card-header`, its title is `.card-title`, the line under it is
   `.card-subtitle`. Two additions only, both suffix-style like `.btn-sm`:

     .card-header.border-0   drop the seam — Bootstrap's utility, already
                             restated below for specificity. Use it when the
                             body is a list: the list's own first hairline is
                             already the line, and a seam on top is a double
                             rule. Keep the seam for anything else, e.g. a field
                             grid with no borders of its own to do the job.
     .card-title-sm          the small uppercase title, for a page of several
                             cards where the headers should recede.
   -------------------------------------------------------------------------- */

/* The row itself is `d-flex align-items-center gap-3` in the markup, the way the
   32 card headers that already needed a row do it. Deliberately NOT baked into
   `.card-header`: nine headers in the app stack a title over a description as
   plain siblings, and flexing them all would turn those into side-by-side
   columns. The utilities stay where Bootstrap put them.

   Add `min-width: 0` to the title block wherever its text should truncate rather
   than push the actions out of the row. */

/* The quiet title. Two classes so it beats the responsive `.card .card-title`
   rule at the foot of this file, which is also two and would otherwise win
   below 992px and put the size back to 18px. */
.card .card-title-sm,
.card-light .card-title-sm {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    /* Tighter than `.card-title`'s 1.6, which at 12px leaves a slack row. */
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
   Rows that reach the card's edges
   -------------------------------------------------------------------------- */

/* A list or table under a section head whose row hairlines should run the full
   width of the card rather than stopping inside the body's padding.

   The padding is named on `.card-body` above so these can cancel it exactly;
   change it there and the pull-out follows. The fallbacks are load-bearing: a
   value that resolved to nothing would silently drop the pull-out instead of
   failing visibly, so a row rendered outside a card still behaves. */
.card-flush {
    margin-left: calc(-1 * var(--card-pad, 1.25rem));
    margin-right: calc(-1 * var(--card-pad, 1.25rem));
}

/* As the body's last child it takes the bottom edge too, so it now paints over
   the card's rounded corners and has to carry the radius and clip its own rows.
   Kept off `.card` itself, which several pages need to leave scrollable or
   overflow-visible. */
.card-flush:last-child {
    margin-bottom: calc(-1 * var(--card-pad, 1.25rem));
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

/* A row inside a `.card-flush`, indented back to the card's own gutter so its
   text lines up under the section title while its hairline still runs the full
   width. Rows carrying their own padding (Bootstrap's `.list-group-item`)
   already land there and don't need this. */
.card-row {
    padding-left: var(--card-pad, 1.25rem);
    padding-right: var(--card-pad, 1.25rem);
}

/* ----------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.card-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
}

.card-title a,
.card-title a:hover,
.card-title a:focus {
    color: #2A2F5B;
    text-decoration: none;
}

.card-subtitle {
    /* Bootstrap sets `margin-top: -.375rem` to tuck the subtitle under a title
       that has bottom margin. `.card-title` above has none, so that pull would
       overlap the two lines — a small positive gap instead. */
    margin-top: 2px;
    /* Muted, not tertiary: this line explains the title, so it has to sit below
       it in the hierarchy rather than beside it. */
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Under the quiet title the subtitle scales down with it — 14px beneath a 12px
   uppercase title reads as the louder of the two, which is backwards. */
.card-title-sm + .card-subtitle {
    font-size: 12px;
}

.card-text {
    color: var(--text-secondary);
}

.card-category {
    margin-top: 8px;
    font-size: 14px;
    color: #8d9498;
    margin-bottom: 0;
    word-break: normal;
}

body[data-background-color="dark"] .card-title,
body[data-background-color="dark"] .card-title a,
body[data-background-color="dark"] .card-title a:hover,
body[data-background-color="dark"] .card-title a:focus {
    color: #fff;
}

body[data-background-color="dark"] .card-category {
    color: #8b92a9;
}

/* ----------------------------------------------------------------------------
   Colour variants
   One shared fill rule; each variant supplies only its own surface, as a
   token so both themes resolve it. Borders are listed per-variant because
   their !important-ness differs.
   -------------------------------------------------------------------------- */

.card-light,
.card-light2,
.card-dark,
.card-section,
.card-inset {
    /* !important beats the `.card` fill above at equal specificity. */
    background: var(--card-surface) !important;
}

/* A section inside a card: one step down the container ramp. Nothing about it
   is depth-aware — a section is `--bg-mid` whether it sits at depth one or
   depth five, which is what stops fills accumulating as they nest. */
.card-section {
    --card-surface: var(--bg-mid);
    border: 1px solid var(--border-normal) !important;
}

/* Two steps down: content you look into rather than at — a log, a transcript,
   an embedded editor. The deepest fill in the set; nothing nests below it. */
.card-inset {
    --card-surface: var(--bg-inset);
    border: 1px solid var(--border-normal) !important;
}

.card-light {
    --card-surface: var(--surface-1);
    /* !important beats the `.card` border at equal specificity. */
    border: 1px solid var(--border-subtle) !important;
}

.card-light2 {
    --card-surface: var(--card-light2-bg);
    /* Deliberately NOT !important: the `.card` border above is the one that
       carries the theme, and this variant defers to it. */
    border: 1px solid var(--border-normal);
}

.card-dark {
    --card-surface: var(--card-dark-bg);
    /* !important beats the vendor `.card-dark { border: 0 !important }`. */
    border: 1px solid var(--border-emphasis) !important;
}

.card-dark .card-header {
    /* Beats `.card .card-header`'s !important border at equal specificity. */
    border-bottom: 1px solid var(--border-emphasis) !important;
}

/* Section and inset headers stay flat like every other card header — the fill
   difference against the parent card is already doing the separating. */
.card-section .card-header,
.card-inset .card-header {
    border-bottom: 1px solid var(--border-normal) !important;
}

.card-section .card-body,
.card-inset .card-body {
    color: var(--text-secondary);
}

.card-danger {
    color: #ffffff;
    background: var(--color-red) !important;
    border: 0 !important;
}

.card-dark,
.card-danger {
    color: #ffffff;
}

.card-dark .card-category,
.card-danger .card-category,
.card-dark .card-title,
.card-danger .card-title,
.card-dark label,
.card-danger label {
    color: #ffffff;
}

.card-dark .icon-big > i,
.card-danger .icon-big > i {
    color: #ffffff !important;
}

.card-danger .card-header {
    /* Vendor: an emphasis card carries no header seam. */
    border-bottom: transparent !important;
}

.card-dark .card-footer,
.card-danger .card-footer {
    border-top: transparent !important;
}

body[data-background-color="dark"] .card-danger,
body[data-background-color="dark"] .card-danger .card-title,
body[data-background-color="dark"] .card-danger .card-category {
    color: #fff;
}

/* ----------------------------------------------------------------------------
   Hover lift
   -------------------------------------------------------------------------- */

.card-hover:hover {
    /* !important beats the `.card` fill at equal specificity. */
    background: var(--card-hover-bg) !important;
}

/* ----------------------------------------------------------------------------
   Card stats
   -------------------------------------------------------------------------- */

.card-stats .card-body {
    /* Beats `.card .card-body`'s 1.25rem at equal specificity — but the two are
       tied, so !important is what makes this deterministic. */
    padding: 15px !important;
}

.card-stats .card-title {
    margin-bottom: 0 !important;
}

.card-stats .card-category {
    margin-top: 0;
}

.card-stats .col-icon {
    width: 65px;
    height: 65px;
    margin-left: 15px;
}

.card-stats .icon-big {
    width: 100%;
    height: 100%;
    font-size: 2.2em;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-stats .icon-big.icon-secondary,
.card-stats .icon-big.icon-success,
.card-stats .icon-big.icon-info,
.card-stats .icon-big.icon-warning {
    border-radius: 5px;
    background: var(--card-stat-icon-bg);
}

.card-stats .icon-big.icon-secondary i,
.card-stats .icon-big.icon-success i,
.card-stats .icon-big.icon-info i,
.card-stats .icon-big.icon-warning i {
    color: #ffffff !important;
}

.card-stats .icon-big.icon-secondary {
    --card-stat-icon-bg: var(--color-purple);
}

.card-stats .icon-big.icon-success {
    --card-stat-icon-bg: #31CE36;
}

.card-stats .icon-big.icon-warning {
    --card-stat-icon-bg: #FFAD46;
}

.card-stats .icon-big.icon-info {
    --card-stat-icon-bg: #48ABF7;
}

.card-stats .icon-big.round {
    border-radius: 50% !important;
}

.card-stats .col-stats {
    align-items: center;
    display: flex;
    padding-left: 15px;
}

/* ----------------------------------------------------------------------------
   Accordion cards
   -------------------------------------------------------------------------- */

.accordion .card {
    /* !important throughout beats the `.card` block above, which is more
       specific in source order but not in weight. */
    border-radius: 5px !important;
    background: #f7f7f7 !important;
    color: #2A2F5B !important;
    border: 0;
    box-shadow: none;
}

.accordion .card > .card-header {
    border: 0 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    border-radius: 0 !important;
}

.accordion .card .card-body {
    border-top: 1px solid #ebebeb;
    padding: 30px;
}

/* ----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
    .card .card-title {
        font-size: 18px;
    }
}