/*
 * --------------------------------------------------------------------------
 * HEART MATTERS GLOBAL THEME TOKENS — .cursor/DESIGN.md
 * --------------------------------------------------------------------------
 */
:root {
    --primary: #91B954;
    --primary-chrome: #77C043;
    --primary-dark: #6E9A3F;
    --primary-light: #77C043;
    --on-primary: #FFFFFF;
    --secondary: #30728C;
    --secondary-dark: #265A6F;
    --accent-wash: #F5CFC1;
    --surface-soft: #FAFAFA;
    --accent: #FD971F;
    --accent-2: #91B954;
    --bg: #FFFFFF;
    --bg-light: #FFFFFF;
    --text: #403A34;
    --text-light: #737373;
    --text-stone: #A9A9A9;
    --border: #E7E7E7;
    --error: #CE2C30;
    --error-deep: #991B1B;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-pill: 300px;
    --shadow-soft: none;
    --shadow-card: none;

    --font-display: "Amatic SC", cursive;
    --font-ui: "Nunito", system-ui, sans-serif;
    --font-body: "Source Serif 4", "Libre Baskerville", Georgia, serif;

    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-success: var(--accent-2);
    --bs-info: var(--secondary);
    --bs-warning: var(--accent);
    --bs-danger: var(--error);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-link-color: var(--secondary);
    --bs-link-hover-color: var(--secondary-dark);
}

.hm-theme {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);

    /* -------------------------------------------------------------------------
     * Map shared --ih-* design tokens to Heart Matters brand (DESIGN.md).
     * Used by datatable-panel, help UI, docs, and other shared components.
     * ------------------------------------------------------------------------- */

    /* Green — primary actions, focus rings, row hover */
    --ih-primary-50: #f4f8ed;
    --ih-primary-100: #e8f1db;
    --ih-primary-200: #d1e3b7;
    --ih-primary-300: #b9d593;
    --ih-primary-400: #a5c978;
    --ih-primary-500: var(--primary);
    --ih-primary-600: var(--primary-dark);
    --ih-primary-700: #5a7d33;
    --ih-primary-800: #486328;
    --ih-primary-900: #384d1f;
    --ih-primary-500-rgb: 145, 185, 84;

    /* Teal — links, info states */
    --ih-secondary-50: #eef4f6;
    --ih-secondary-100: #d9e8ed;
    --ih-secondary-200: #b3d1db;
    --ih-secondary-300: #8dbac9;
    --ih-secondary-400: #5f9db3;
    --ih-secondary-500: var(--secondary);
    --ih-secondary-600: var(--secondary-dark);
    --ih-secondary-700: #1f4858;
    --ih-secondary-800: #183a47;
    --ih-secondary-900: #122c36;
    --ih-secondary-500-rgb: 48, 114, 140;

    /* Solid emphasis — pagination, checkboxes (matches btn-primary) */
    --ih-tertiary-50: var(--ih-primary-50);
    --ih-tertiary-100: var(--ih-primary-100);
    --ih-tertiary-200: var(--ih-primary-200);
    --ih-tertiary-300: var(--ih-primary-300);
    --ih-tertiary-400: var(--ih-primary-400);
    --ih-tertiary-500: var(--primary);
    --ih-tertiary-600: var(--primary-dark);
    --ih-tertiary-700: var(--ih-primary-700);
    --ih-tertiary-800: var(--ih-primary-800);
    --ih-tertiary-900: var(--ih-primary-900);
    --ih-tertiary-500-rgb: 145, 185, 84;

    /* Warm neutrals */
    --ih-neutral-50: var(--surface-soft);
    --ih-neutral-100: #f5f5f5;
    --ih-neutral-200: var(--border);
    --ih-neutral-300: #d4d4d4;
    --ih-neutral-400: var(--text-stone);
    --ih-neutral-500: var(--text-light);
    --ih-neutral-600: #5c5c5c;
    --ih-neutral-700: var(--text);
    --ih-neutral-800: #332f2b;
    --ih-neutral-900: #1f1c1a;
    --ih-neutral-500-rgb: 115, 115, 115;

    --ih-color-text: var(--text);
    --ih-color-text-muted: var(--text-light);
    --ih-color-headline: var(--text);
    --ih-color-on-primary-solid: var(--on-primary);
    --ih-color-danger: var(--error);
    --ih-color-danger-hover: var(--error-deep);
    --ih-color-danger-rgb: 206, 44, 48;
    --ih-color-accent: var(--primary);

    --ih-surface-page: var(--surface-soft);
    --ih-surface-subtle: var(--surface-soft);
    --ih-surface-card: var(--bg-light);
    --ih-border-default: var(--border);
    --ih-border-subtle: var(--border);
    --ih-border-strong: #d4d4d4;

    --ih-font-headline: var(--font-ui);
    --ih-font-body: var(--font-ui);
    --ih-font-label: var(--font-ui);

    --ih-radius-sm: var(--radius-sm);
    --ih-radius-md: var(--radius-md);
    --ih-radius-lg: var(--radius-lg);
    --ih-radius-pill: var(--radius-pill);
    --ih-shadow-card: var(--shadow-card);
    --ih-shadow-elevated: var(--shadow-soft);

    --ih-warning-deep: #c97a0f;
    --ih-warning-subtle: rgb(253 151 31 / 0.14);
    --ih-info-deep: var(--secondary-dark);
    --ih-info-subtle: rgb(48 114 140 / 0.12);

    /* Table status badges */
    --ih-badge-active-color: var(--primary-dark);
    --ih-badge-active-bg: rgb(145 185 84 / 0.15);
    --ih-badge-inactive-color: #c97a0f;
    --ih-badge-inactive-bg: var(--ih-warning-subtle);
    --ih-badge-warning-color: var(--ih-warning-deep);
    --ih-badge-warning-bg: var(--ih-warning-subtle);
    --ih-badge-info-color: var(--secondary-dark);
    --ih-badge-info-bg: var(--ih-info-subtle);
    --ih-badge-neutral-color: var(--text-light);
    --ih-badge-neutral-bg: var(--surface-soft);
    --ih-badge-suspended-color: var(--error);
    --ih-badge-suspended-bg: rgb(206 44 48 / 0.1);
}

/* Marketing / public pages — DESIGN.md body-lg */
.hm-app-theme {
    font-size: 1.3125rem;
    line-height: 1.6;
}

.hm-theme h1,
.hm-theme h2,
.hm-theme h3,
.hm-theme h4,
.hm-theme h5,
.hm-theme h6,
.hm-theme .display-1,
.hm-theme .display-2,
.hm-theme .display-3,
.hm-theme .display-4,
.hm-theme .display-5,
.hm-theme .display-6 {
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--text);
}

.hm-theme .hm-display {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
}

.hm-theme a {
    color: var(--secondary);
}

.hm-theme a:hover {
    color: var(--secondary-dark);
}

.hm-theme .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-weight: 700;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hm-theme .btn:not(.btn-lg) {
    font-size: 0.875rem;
    min-height: unset;
    padding: 0.375rem 0.875rem;
}

.hm-theme .btn-lg {
    font-size: 1.125rem;
    min-height: 48px;
    padding: 14px 32px;
}

.hm-theme .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: none;
}

.hm-theme .btn-primary:hover,
.hm-theme .btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--on-primary);
}

.hm-theme .btn-secondary,
.hm-theme .btn-outline-secondary {
    background: transparent;
    border: 2px solid var(--secondary);
    color: var(--secondary);
}

.hm-theme .btn-secondary:hover,
.hm-theme .btn-secondary:focus,
.hm-theme .btn-outline-secondary:hover,
.hm-theme .btn-outline-secondary:focus {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--on-primary);
}

.hm-theme .btn-outline-primary {
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.hm-theme .btn-outline-primary:hover,
.hm-theme .btn-outline-primary:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.hm-theme .card,
.hm-theme .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
    background-color: var(--bg-light);
}

.hm-theme .form-control,
.hm-theme .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border);
    font-family: var(--font-body);
    font-size: 1rem;
    min-height: 44px;
    color: var(--text);
}

.hm-theme .form-control:focus,
.hm-theme .form-select:focus {
    border-color: var(--primary);
    border-width: 2px;
    box-shadow: none;
}

.hm-theme #alerts-wrapper .alert {
    border-radius: var(--radius-sm);
}

.hm-section-kicker {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.43;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-light);
}

.hm-data-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
    box-shadow: none;
}

.hm-data-card .card-header {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
}

.hm-data-card .card-title,
.hm-data-card h5 {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--text);
}

.hm-data-table thead th {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-light);
    border-bottom: 1px solid var(--border);
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.hm-data-table tbody td {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.35;
    vertical-align: middle;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.hm-data-table tbody .badge {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35em 0.65em;
}

.hm-data-table tbody tr:hover {
    background-color: rgb(145 185 84 / 0.06);
}

.hm-icon-action {
    color: var(--secondary);
}

.hm-icon-action--danger {
    color: var(--error);
}

.hm-metric-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
    box-shadow: none;
}

.hm-metric-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hm-metric-card__icon--primary {
    background-color: rgb(145 185 84 / 0.15);
    color: var(--primary);
}

.hm-metric-card__icon--secondary {
    background-color: rgb(48 114 140 / 0.12);
    color: var(--secondary);
}

.hm-metric-card__icon--wash {
    background-color: var(--accent-wash);
    color: var(--text);
}

.hm-metric-card__icon--warning {
    background-color: rgb(253 151 31 / 0.15);
    color: var(--accent);
}

.hm-app-theme .main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.hm-app-theme footer {
    margin: 2rem auto;
    max-width: 1280px;
    padding: 4rem 1.5rem;
    color: var(--text-light);
    font-size: 0.9375rem;
}

.hm-app-theme footer strong {
    color: var(--text);
    font-weight: 700;
}

/*
 * Enroll page
 */
.hm-enroll-page {
    background-image: url('/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hm-enroll-page .card {
    background-color: rgb(255 255 255 / 0.98);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hm-enroll-page .card-header.hm-enroll-header {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.hm-enroll-header {
    background: var(--primary-chrome);
    color: var(--on-primary);
    border: none;
}

.hm-enroll-header h2 {
    font-family: var(--font-ui);
    color: var(--on-primary);
}

.btn-enroll-reset {
    background: var(--on-primary);
    color: var(--primary-dark);
    border: 2px solid var(--on-primary);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-weight: 700;
    padding: 0.35rem 1rem;
}

.btn-enroll-reset:hover {
    background: rgb(255 255 255 / 0.9);
    color: var(--primary-dark);
    border-color: var(--on-primary);
}

.hm-enroll-steps .badge {
    padding: 0.4rem 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
}

.hm-step-current {
    background-color: var(--primary);
    color: var(--on-primary);
}

.hm-step-complete {
    background-color: var(--secondary);
    color: var(--on-primary);
}

.hm-step-pending {
    background-color: var(--surface-soft);
    color: var(--text-light);
}

/*
 * FAQ public page
 */
.faq-help-page {
    color: var(--text);
}

.faq-hero {
    background: var(--accent-wash);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
}

.faq-search-wrap {
    max-width: 700px;
    margin: 0 auto;
}

.faq-search-input {
    border-radius: var(--radius-sm);
    padding-left: 2.5rem;
    min-height: 3.3rem;
    border: 1px solid var(--border);
}

.faq-search-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-stone);
}

.faq-popular-links a {
    text-decoration: none;
    font-weight: 700;
    color: var(--secondary);
    margin-right: 0.75rem;
}

.faq-card-link {
    display: block;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
    height: 100%;
    padding: 1.1rem;
    transition: border-color 0.18s ease;
}

.faq-card-link:hover {
    border-color: var(--secondary);
}

.faq-card-link.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgb(145 185 84 / 0.2);
}

.faq-category-icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(145 185 84 / 0.15);
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.faq-support-card {
    border-radius: var(--radius-lg);
    border: none;
    background: var(--primary-chrome);
    color: var(--on-primary);
}

.faq-stat-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-light);
}

.faq-accordion .accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 0.85rem;
    background: var(--bg-light);
}

.faq-accordion .accordion-button {
    font-weight: 700;
    box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--text);
    background: var(--surface-soft);
}

/*
 * Order profile page
 */
.order-profile-page {
    max-width: 1400px;
    margin-inline: auto;
    padding: 1rem 0 2rem;
}

.order-profile-shell {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-light);
    overflow: hidden;
}

.order-profile-header {
    padding: 1.6rem 1.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--accent-wash);
}

.order-profile-kicker {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-light);
}

.order-profile-header h2 {
    font-family: var(--font-ui);
    margin: 0.4rem 0 0.5rem;
    font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
    line-height: 1.15;
}

.order-profile-subtitle {
    margin: 0;
    color: var(--text-light);
    max-width: 62ch;
}

.order-profile-content {
    padding: 1.75rem;
    background: var(--bg-light);
}

.order-profile-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
    padding: 1.2rem 1.25rem;
    height: 100%;
}

.order-profile-section-title {
    font-family: var(--font-ui);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.order-profile-section-note {
    margin: 0 0 1rem;
    color: var(--text-light);
    font-size: 0.9375rem;
}

.order-profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.order-profile-row {
    display: grid;
    grid-template-columns: minmax(8rem, 38%) 1fr;
    gap: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.order-profile-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.order-profile-label {
    font-size: 0.875rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.order-profile-value {
    color: var(--text);
    font-weight: 500;
}

.order-profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    background: var(--surface-soft);
}

.order-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.order-profile-table-wrap {
    margin: 0 -0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.order-profile-table {
    width: 100%;
    margin: 0;
    font-size: 0.9375rem;
}

.order-profile-table thead th {
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-light);
    padding: 0.7rem 0.85rem;
    white-space: nowrap;
}

.order-profile-table tbody td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.order-profile-table tbody tr:last-child td {
    border-bottom: 0;
}

.order-profile-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    font-weight: 700;
}

.order-profile-empty {
    padding: 1.25rem;
    text-align: center;
    color: var(--text-light);
    font-size: 0.9375rem;
}

@media (min-width: 992px) {
    .order-profile-side {
        position: sticky;
        top: 1rem;
    }
}

@media (max-width: 991.98px) {
    .order-profile-header,
    .order-profile-content {
        padding: 1rem;
    }

    .order-profile-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
}

@media (max-width: 768px) {
    .hm-theme {
        background: var(--bg);
    }

    .hm-enroll-page {
        background-image: url('/background.jpg');
    }

    .faq-hero {
        padding: 1.5rem 1rem;
    }
}