/* ==========================================================
   Xplorfy Overrides (Condensed)
   ========================================================== */

/* ------------------------------
   Numeric grid gutters (gy-N / gx-N)
   The template markup uses gutter classes from its numeric spacing scale
   (e.g. gy-24, gx-24), but those utilities are never generated — Bootstrap
   only ships gy-0..5 — so rows had no vertical spacing between wrapped cards.
   Define the ones the markup relies on as real flex gaps.
------------------------------ */
.row.gy-24 { row-gap: 24px; }
.row.gy-16 { row-gap: 16px; }
.row.gy-32 { row-gap: 32px; }

/* ------------------------------
   Icons inside centered table cells
   <iconify-icon> computes as display:inline with width:auto, so it stretches across
   the cell and the glyph sits at the left even though the cell is text-align:center.
   Making it inline-block shrinks it to the icon so the cell centering takes effect.
------------------------------ */
td.text-center iconify-icon,
th.text-center iconify-icon { display: inline-block; }

/* ------------------------------
   Global: Placeholder text color
   Applies to all inputs site-wide.
   --neutral-400 = #9CA3AF (light, subtle, de-emphasized)
------------------------------ */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--neutral-400) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] select::placeholder {
    color: var(--neutral-500) !important;
}

/* ------------------------------
   Date input format hint (mm/dd/yyyy)
   Browser renders this via webkit datetime-edit pseudo-elements,
   not ::placeholder. Styled to match neutral-200 site-wide.
   --neutral-300 = #D1D5DB
------------------------------ */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--neutral-300);
}

/* ------------------------------
   Layout: Sticky footer fix
------------------------------ */
.dashboard-main {
    flex-wrap: nowrap !important;
    min-height: 100vh;
}

.dashboard-main-body {
    flex: 1 1 auto;
    width: 100%;
}

.d-footer {
    margin-top: auto;
    width: 100%;
}

.footer, footer {
    bottom: auto;
}
/* guard against absolute/footer rules */

/* ------------------------------
   Tables: Header style + rounded corners
------------------------------ */
.table thead th {
    background: #3D0BA0;
    color: #fff;
    font-weight: 600;
    border-bottom: 0;
    vertical-align: middle;
}

/* Lookup/master-data pages: neutral light-grey header */
.lookup-table thead th {
    background: #F5F6FA !important;
    color: #111827 !important;
    border-bottom: 1px solid #d1d5db !important;
}

.table thead tr th:first-child {
    border-top-left-radius: 8px;
}

.table thead tr th:last-child {
    border-top-right-radius: 8px;
}

/* ------------------------------
   Modals: Shared theme plumbing
   Apply theme by adding one of:
   .modal-edit  (Success)
   .modal-add   (Primary)
   .modal-delete(Error)
------------------------------ */
.modal-edit, .modal-add, .modal-delete {
    --xp-theme: #000;
    --xp-theme-700: #000;
    --tt-shadow: rgba(0,0,0,.25);
}

.modal-edit {
    --xp-theme: #16A34A;
    --xp-theme-700: #15803D;
    --tt-shadow: rgba(22,163,74,.25);
}

.modal-add {
    --xp-theme: #3D0BA0;
    --xp-theme-700: #340989;
    --tt-shadow: rgba(61,11,160,.25);
}

.modal-delete {
    --xp-theme: #DC2626;
    --xp-theme-700: #B91C1C;
    --tt-shadow: rgba(220,38,38,.25);
}

    /* Header bar */
    .modal-edit .modal-header,
    .modal-add .modal-header,
    .modal-delete .modal-header {
        background: var(--xp-theme);
        color: #fff;
        border-bottom: 0;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

        .modal-edit .modal-header .modal-title,
        .modal-add .modal-header .modal-title,
        .modal-delete .modal-header .modal-title {
            color: #fff;
        }

        .modal-edit .modal-header .btn-close,
        .modal-add .modal-header .btn-close,
        .modal-delete .modal-header .btn-close {
            filter: invert(1);
            opacity: .9;
        }

            .modal-edit .modal-header .btn-close:hover,
            .modal-add .modal-header .btn-close:hover,
            .modal-delete .modal-header .btn-close:hover {
                opacity: 1;
            }

    /* Primary action button (Save/Add/Delete) */
    .modal-edit .modal-footer .btn-primary,
    .modal-add .modal-footer .btn-primary,
    .modal-delete .modal-footer .btn-primary,
    .modal-delete .modal-footer .btn-danger {
        background: var(--xp-theme);
        border-color: var(--xp-theme);
        color: #fff;
    }

        .modal-edit .modal-footer .btn-primary:hover,
        .modal-add .modal-footer .btn-primary:hover,
        .modal-delete .modal-footer .btn-primary:hover,
        .modal-delete .modal-footer .btn-danger:hover {
            background: var(--xp-theme-700);
            border-color: var(--xp-theme-700);
            color: #fff;
        }

        .modal-edit .modal-footer .btn-primary:focus,
        .modal-edit .modal-footer .btn-primary:active,
        .modal-add .modal-footer .btn-primary:focus,
        .modal-add .modal-footer .btn-primary:active,
        .modal-delete .modal-footer .btn-primary:focus,
        .modal-delete .modal-footer .btn-primary:active,
        .modal-delete .modal-footer .btn-danger:focus,
        .modal-delete .modal-footer .btn-danger:active {
            background: var(--xp-theme-700);
            border-color: var(--xp-theme-700);
            box-shadow: 0 0 0 .2rem var(--tt-shadow);
        }

    /* Toggle / switch (Bootstrap: .form-check-input) */
    .modal-edit .form-check-input,
    .modal-add .form-check-input,
    .modal-delete .form-check-input {
        transition: background-color .2s ease, border-color .2s ease;
    }

        .modal-edit .form-check-input:checked,
        .modal-add .form-check-input:checked,
        .modal-delete .form-check-input:checked {
            background: var(--xp-theme);
            border-color: var(--xp-theme);
        }

        .modal-edit .form-check-input:focus,
        .modal-add .form-check-input:focus,
        .modal-delete .form-check-input:focus {
            border-color: var(--xp-theme);
            box-shadow: 0 0 0 .2rem var(--tt-shadow);
        }
        /* Optional label emphasis when checked */
        .modal-edit .form-check-input:checked + .form-check-label,
        .modal-add .form-check-input:checked + .form-check-label {
            color: var(--xp-theme);
            font-weight: 600;
        }

/* ------------------------------
   Toggle Switches: Flex alignment standard
   Overrides Bootstrap's float/padding-left approach with a clean flex
   layout so the pill and its label are always vertically centred.
   Applies to every .form-check.form-switch site-wide (modals, forms,
   settings pages — any context).
------------------------------ */
.form-check.form-switch {
    display: flex;
    align-items: center;
    gap: 12px;           /* "Golden Gap" between pill and label text  */
    padding-left: 0;     /* remove Bootstrap's 2.5em left-pad offset  */
    margin-bottom: 0;    /* prevent stray bottom space below the block */
}

    .form-check.form-switch .form-check-input {
        float: none;         /* flex items ignore float; explicit reset     */
        margin-left: 0;      /* cancel Bootstrap's -2.5em positioning hack  */
        margin-top: 0;       /* cancel Bootstrap's .25em top nudge          */
        flex-shrink: 0;      /* keep the pill at its intrinsic 2em size     */
    }

    .form-check.form-switch .form-check-label {
        margin-bottom: 0;    /* prevent label "riding high" above pill      */
        line-height: normal; /* normalise multi-line label rhythm           */
        padding-top: 0;
    }

/* ------------------------------
   Lookups: Form select polish
------------------------------ */
.form-select {
    padding-right: 2.5rem;
    background-position: right .85rem center;
    background-size: 12px 12px;
    min-height: 42px;
}

    .form-select.radius-8 {
        border-radius: 8px;
    }

/* ------------------------------
   Debug (REMOVE in production)
------------------------------ */
/* body{ outline:5px solid magenta !important; } */


/* ------------------------------
   Sidebar: Submenu contextual icons
   Replaces .ri-circle-fill colored-dot bullets with small
   monochromatic iconify-icon glyphs that inherit the link color.
------------------------------ */
.sidebar-submenu .submenu-icon {
    font-size: 15px;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.65;
    vertical-align: middle;
    margin-right: 10px;
}

/* Submenu layout: reduce default left indent (SASS default: 24px / 44px at 3xl) */
.sidebar-menu .sidebar-submenu {
    padding-inline-start: 8px !important;
}

/* Submenu links: explicit flex so icon + text are always vertically centered on one line */
.sidebar-submenu li a {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap;
}

/* Sidebar menu text wrapping fix */
.sidebar-menu li a span {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.3;
}

.sidebar-menu li a {
    overflow: visible !important;
}


/* 3rd-level submenu (e.g., Settings > Data Management > Lookups) */
.sidebar .sidebar-submenu .sidebar-submenu {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Indent the "Lookups" expandable (blue) menu item slightly */
.sidebar .sidebar-submenu > li > a[data-bs-toggle="collapse"] {
    padding-left: 10px !important;
}

/* Indent everything under Lookups a bit more (clean hierarchy) */
.sidebar .sidebar-submenu .sidebar-submenu > li > a {
    padding-left: 20px !important; /* 10px parent + 10px child */
}

    /* Remove any reserved icon / bullet space on 3rd-level links */
    .sidebar .sidebar-submenu .sidebar-submenu > li > a::before,
    .sidebar .sidebar-submenu .sidebar-submenu > li > a::after {
        display: none !important;
        content: none !important;
    }

/* === Global Toast Notification === */
/* Force the toast itself to be centered, regardless of other template CSS */
#globalToast {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 99999 !important;
}
.toast {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    min-width: 420px;
    max-width: 520px;
    padding: 20px 24px;
    border-radius: 12px;
    font-size: 1.1rem;
    line-height: 1.5;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    z-index: 9999;
    animation: slideIn .25s ease-out;
}

    .toast strong {
        display: block;
        font-size: 1.25rem;
        margin-bottom: 6px;
    }

.toast-success {
    background: #16A34A;
    color: #fff;
}

.toast-error {
    background: #DC2626;
    color: #fff;
}

/* ------------------------------
   Grid: Affiliate link product image thumbnail
------------------------------ */
.affiliate-img-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--neutral-200);
    display: block;
    margin: 0 auto;
}

/* ------------------------------
   Hero panels: ensure hero content scrolls under the sticky navbar (z-index 2)
   The hero background overlays use position:absolute inside overflow:hidden
   containers — keep them below the navbar layer.
------------------------------ */
.hpf-hero-wrapper,
.tt-hero-countdown,
.tt-hero-bg-img,
.hpf-hero-banner {
    isolation: isolate;
    z-index: 1;
    position: relative;
}

/* ------------------------------
   Hike Status badge — Success Green
------------------------------ */
.hike-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: .75rem;
    font-weight: 600;
    background: #DAF0E1;
    color: #45B369;
    border: 1px solid #B5E1C3;
}
.hike-status-badge.status-inactive {
    background: #F3F4F6;
    color: #6B7280;
    border-color: #D1D5DB;
}

/* ⚠️ Double @ required in .cshtml */
@@keyframes slideIn {
    from {
        transform: translate(-50%, -45%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* ── Global Toast Notifications ────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}
.tt-toast {
    min-width: 280px;
    max-width: 480px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.45;
    color: #fff;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.tt-toast.tt-toast-visible {
    opacity: 1;
    transform: translateY(0);
}
.tt-toast-success { background: #16A34A; }
.tt-toast-error   { background: #DC2626; }
.tt-toast-warning { background: #D97706; }
.tt-toast-info    { background: #2563EB; }

/* ─────────────────────────────────────────────────────────────────────────
   CONTRAST SAFETY NET — dark-background cards
   The global rule `.card .card-body { color: var(--text-secondary-light) }`
   sets a dark grey directly on .card-body, which OVERRIDES the inline
   `color:#fff` that dark/gradient banner cards put on the outer .card. Child
   text without its own explicit colour then inherits dark grey and becomes
   unreadable on the dark background (e.g. the "Platform Administration"
   eyebrow on the dashboard Welcome banner). When a card opts into a light
   text colour inline, propagate it to the body/header/title and neutralise
   the dark text-colour utilities inside it.
   ───────────────────────────────────────────────────────────────────────── */
/* Selectors are constrained to the `color` PROPERTY (preceded by a space, a
   semicolon, or the start of the attribute) so they never match the substring
   inside `background-color:#fff` / `border-color:#fff` — which would wrongly
   whiten text on a light card. */
.card[style^="color:#fff"] .card-body,
.card[style*=" color:#fff"] .card-body,
.card[style*=";color:#fff"] .card-body,
.card[style*=" color: #fff"] .card-body,
.card[style*=";color: #fff"] .card-body,
.card[style^="color:#ffffff"] .card-body,
.card[style*=" color:#ffffff"] .card-body,
.card[style*=" color: #ffffff"] .card-body,
.card[style^="color:white"] .card-body,
.card[style*=" color:white"] .card-body,
.card[style*=";color:white"] .card-body,
.card[style*=" color: white"] .card-body,
.card[style^="color:#fff"] .card-header,
.card[style*=" color:#fff"] .card-header,
.card[style*=";color:#fff"] .card-header,
.card[style*=" color: #fff"] .card-header,
.card[style^="color:#fff"] .card-title,
.card[style*=" color:#fff"] .card-title,
.card[style*=";color:#fff"] .card-title,
.card[style*=" color: #fff"] .card-title {
    color: #fff;
}
.card[style^="color:#fff"] .text-secondary-light,
.card[style*=" color:#fff"] .text-secondary-light,
.card[style*=";color:#fff"] .text-secondary-light,
.card[style*=" color: #fff"] .text-secondary-light,
.card[style^="color:#fff"] .text-primary-light,
.card[style*=" color:#fff"] .text-primary-light,
.card[style*=";color:#fff"] .text-primary-light,
.card[style*=" color: #fff"] .text-primary-light,
.card[style*=" color:white"] .text-secondary-light,
.card[style*=";color:white"] .text-secondary-light,
.card[style*=" color:white"] .text-primary-light,
.card[style*=";color:white"] .text-primary-light {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   LEFT-LINE ACCENT (colored glowing left-edge bar on stat/KPI cards)
   The base template's `.card` is `position: initial`, so the absolutely-
   positioned `.left-line::before` would not anchor to the card. Establish a
   positioning context, and add a few colour variants beyond the four the
   template ships (primary / lilac / success / warning).
   ───────────────────────────────────────────────────────────────────────── */
.card.left-line { position: relative; }

/* Full-height left rail (override the template's short 44px pill) — spans the
   whole card and follows its 8px rounded corners on the left edge. */
.card.left-line::before {
    top: 0;
    bottom: 0;
    height: auto;
    left: 0;
    border-radius: 8px 0 0 8px;
}

.line-bg-danger::before {
    background-color: var(--danger-main);
    box-shadow: 2px 1px 7px 0px rgba(239, 74, 0, 0.55);
}
.line-bg-info::before {
    background-color: var(--info-main);
    box-shadow: 2px 1px 7px 0px rgba(20, 75, 214, 0.55);
}
.line-bg-cyan::before {
    background-color: var(--cyan);
    box-shadow: 2px 1px 7px 0px rgba(0, 184, 242, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────
   FOLDER TABS (Profile / Organization Details) — file-folder tab metaphor
   adapted from the sibling app: the active tab turns white and merges into the
   content panel below with a brand-blue top accent. Unlike the sibling's
   single-row horizontal scroll, this strip WRAPS so all tabs stay visible.
   Works for both <a href="?tab="> tabs and Bootstrap toggle buttons (the
   `.active` class is styled the same either way).
   ───────────────────────────────────────────────────────────────────────── */
.xf-folder-tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 12px 16px 0;
    background-color: #edf0f4;
    border: 1px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
    border-radius: 12px 12px 0 0;
}
.xf-folder-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    color: var(--text-primary-light);
    background: #e2e6ea;
    border: 1px solid #c8cdd3;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: -2px;                /* overlap the strip's bottom border */
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.xf-folder-tab:hover {
    background: #d3d8de;
    color: var(--text-primary-light);
    text-decoration: none;
}
.xf-folder-tab.active {
    background: #ffffff;
    color: var(--primary-600);
    font-weight: 700;
    border-color: #dee2e6;
    border-top: 3px solid var(--primary-600);
    padding-top: 7px;                    /* compensate for the thicker top border */
}
.xf-folder-tab iconify-icon { font-size: 1rem; }
.xf-folder-content {
    padding: 24px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 12px 12px;
}

/* ── Sidebar menu icons in brand purple (menu text keeps its own color) ────── */
.sidebar .sidebar-menu .menu-icon,
.sidebar .sidebar-submenu .submenu-icon {
    color: #8252E9;
}
/* Active / open (brand-filled) items keep white icons for contrast. */
.sidebar .active-page .menu-icon,
.sidebar .active-page .submenu-icon,
.sidebar .dropdown-open > a .menu-icon {
    color: #fff;
}

/* ── Stat / KPI card standard ──────────────────────────────────────────────
   The canonical metric-card look (icon + uppercase label header, value below,
   optional subtext). Apply .stat-card to the card and the sub-classes to the
   inner elements. IMPORTANT: the label/value MUST be non-heading elements
   (<span>/<div>) — Xplorfy sets `h1-h6 { font-size: var(--hN) !important }`,
   which overrides any size on an <h4>/<h5>. See Style.Spec.md §7.14. */
.stat-card { border-radius: 10px; }
.stat-card .card-body { padding: .8rem 1.1rem; }
.stat-card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.stat-card-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.stat-card-label { font-size: 1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary-light); }
.stat-card-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--text-primary-light); }
.stat-card-sub { font-size: .875rem; color: var(--text-secondary-light); margin: .25rem 0 0; }

/* ── Grid Actions-column icons — BARE ICONS, NO BACKGROUND CHIP ────────────
   STANDARD (see Style.Spec.md §7.4 "Grid Actions Column — Icon Standard"):
   Actions-column icons are bare, color-coded glyphs. They must NEVER render a
   tinted circle/pill/chip behind the icon.

   Canonical markup for new pages:
       <a class="xf-action-icon text-success-main" title="Edit"> <iconify-icon .../> </a>

   The second selector below neutralises the LEGACY chip signature
   `.w-32-px.h-32-px.rounded-circle.d-inline-flex` that ~111 existing grid pages
   still use, so no per-page markup edits are required. That 4-class combination
   is used exclusively by action icons — avatars, status dots and category icons
   use different sizes (w-12/w-14/w-40/w-44/w-48) and `d-flex`/`flex-shrink-0`,
   so they are deliberately NOT matched here.

   Icon COLOUR is preserved (the `text-*` utility on the element still applies) —
   only the background/border/shadow is stripped. */
.xf-action-icon,
.w-32-px.h-32-px.rounded-circle.d-inline-flex,
td .btn.btn-light.radius-8.p-1 {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    /* Preserve a 32x32 hit target for touch/accessibility. */
    width: 2rem !important;
    height: 2rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    font-size: 1.125rem;                 /* 18px glyph — larger now the chip is gone */
    text-decoration: none;
    transition: opacity .15s linear, transform .15s linear;
}

/* Hover / focus affordance: keep the colour, dim + nudge so it still reads as
   clickable now that the chip no longer provides the affordance. Interactive
   elements only — several grids use a bare <span> for a disabled/no-op action. */
a.xf-action-icon, button.xf-action-icon,
a.w-32-px.h-32-px.rounded-circle.d-inline-flex,
button.w-32-px.h-32-px.rounded-circle.d-inline-flex,
td a.btn.btn-light.radius-8.p-1,
td button.btn.btn-light.radius-8.p-1 { cursor: pointer; }

a.xf-action-icon:hover, button.xf-action-icon:hover,
a.w-32-px.h-32-px.rounded-circle.d-inline-flex:hover,
button.w-32-px.h-32-px.rounded-circle.d-inline-flex:hover,
td a.btn.btn-light.radius-8.p-1:hover,
td button.btn.btn-light.radius-8.p-1:hover {
    background-color: transparent !important;
    opacity: .6;
    transform: scale(1.12);
}

/* Keyboard accessibility: the chip used to imply a focus target; supply a ring. */
.xf-action-icon:focus-visible,
.w-32-px.h-32-px.rounded-circle.d-inline-flex:focus-visible,
td .btn.btn-light.radius-8.p-1:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
    border-radius: 50%;
    box-shadow: none !important;
}

/* Disabled / not-permitted action icons opt out of the hover affordance. */
.xf-action-icon[aria-disabled="true"]:hover,
.xf-action-icon.disabled:hover,
.xf-action-icon:disabled:hover {
    opacity: .55;
    transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Integration setup-guide panel  (Settings > Integrations > <vendor>)
   ══════════════════════════════════════════════════════════════════════════
   Standard treatment for the right-hand "Setup Guide" helper panel on every
   integration configuration page. Gives the panel a 4px brand-blue left accent
   bar plus a tinted background that fades out to the right, so the guide reads
   as supporting/instructional content distinct from the config form on the
   left. Apply to the .card element itself:

       <div class="card radius-16 mb-24 integration-guide-card">

   EVERY integration page's setup-guide panel must carry this class -- do not
   re-implement it with per-page inline styles. See Style.Spec.md section 7.15. */
.integration-guide-card {
    border-left: 4px solid var(--primary-600);
    background-image: linear-gradient(90deg,
        rgba(72, 127, 255, .10) 0%,
        rgba(72, 127, 255, .04) 32%,
        rgba(72, 127, 255, 0) 65%);
    background-repeat: no-repeat;
}

/* Dark mode: lift the tint slightly so it stays visible on the dark surface. */
[data-theme="dark"] .integration-guide-card {
    background-image: linear-gradient(90deg,
        rgba(72, 127, 255, .18) 0%,
        rgba(72, 127, 255, .07) 32%,
        rgba(72, 127, 255, 0) 65%);
}