/* ============================================================================
   RMK shared component primitives — spec 023 (design-rollout-admin).
   Token-consuming building blocks (from design-tokens.css / MASTER.md
   §Component Conventions) that replace the legacy .irx-container / .boxis /
   inline-style chrome. NO hardcoded palette hex — only var(--token).

   These are the reusable vocabulary the admin (023) and public (024) rollouts
   apply page by page. Loaded globally in index.html after design-tokens.css.
   ============================================================================ */

/* --- Page wrapper: bounded admin content width + page padding --- */
.rmk-page {
    max-width: var(--content-max-admin);
    margin: 0 auto;
    padding: var(--space-6);
    font-family: var(--font-body);
    color: var(--color-text);
}

/* --- Panel: replaces .irx-container. Cream surface with a soft navy-tinted
   shadow (MASTER §Modals). Flex column so children stretch full-width, matching
   the legacy container behaviour without the `* { width:100% }` hack. --- */
.rmk-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--color-cream-50);
    border: 1px solid var(--color-cream-200);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(20, 42, 69, 0.10);
    padding: var(--space-4);
    margin: var(--space-2) 0;
}

/* --- Card: replaces .boxis (was grey #e9ecef). Cream surface panel. --- */
.rmk-card {
    background-color: var(--color-cream-100);
    border: 1px solid var(--color-cream-200);
    border-radius: 6px;
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

/* --- Toolbar: flex row of controls (search / filter / add) above a grid. --- */
.rmk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.rmk-toolbar__spacer { flex: 1 1 auto; }

/* --- Headings: Cormorant Garamond, navy, type scale (MASTER §Typography). --- */
.rmk-heading {
    font-family: var(--font-heading);
    color: var(--color-navy-700);
    font-weight: 600;
    line-height: var(--leading-heading-tight);
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xl);
}
.rmk-heading--lg { font-size: var(--text-3xl); line-height: var(--leading-heading); }
.rmk-heading--sm { font-size: var(--text-xl); }

/* Section header bar inside a panel (replaces the legacy centered .irx-container h5). */
.rmk-panel-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-xl);
    color: var(--color-cream-50);
    background-color: var(--color-navy-700);
    border-radius: 4px;
    padding: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4);
    text-align: center;
}

/* --- Badge: replaces BlazorStrap BSBadge. Default is navy/cream for WCAG AA on the
   small xs text (~12:1); brass is an opt-in accent variant (use on larger labels —
   cream-on-brass is ~3:1, borderline for tiny text). --- */
.rmk-badge {
    display: inline-block;
    background-color: var(--color-navy-700);
    color: var(--color-cream-50);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    line-height: 1.4;
}
.rmk-badge--brass { background-color: var(--color-brass-500); }
.rmk-badge--muted { background-color: var(--color-brass-700); }

.rmk-muted { color: var(--color-text-muted); }

/* --- Layout utilities (global, not scoped — they must reach content rendered inside
   Telerik templates, where Blazor scoped CSS does not reliably apply). Values match the
   legacy inline-style layouts they replace, so the layout is preserved. --- */
.rmk-row { display: flex; flex-direction: row; }
.rmk-row-spread { display: flex; flex-direction: row; justify-content: space-between; width: 100%; }
.rmk-center { display: flex; justify-content: center; }
.rmk-hint { font-size: var(--text-sm); color: var(--color-text-muted); }       /* was font-size:small; color:gray */
.rmk-hint-right { text-align: right; font-size: var(--text-sm); color: var(--color-text-muted); } /* was color:red help note */

/* --- Buttons (MASTER §Component Conventions). Plain-HTML button vocabulary for
   admin pages; Telerik buttons keep their own (theme) styling. --- */
.rmk-btn {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.55rem 1.1rem;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--motion-easing-standard),
                border-color var(--motion-fast) var(--motion-easing-standard);
}
.rmk-btn--primary {
    background-color: var(--color-navy-700);
    color: var(--color-cream-50);
    border-bottom: 2px solid transparent;
}
.rmk-btn--primary:hover { border-bottom-color: var(--color-brass-500); }
.rmk-btn--secondary {
    background-color: var(--color-cream-50);
    color: var(--color-navy-700);
    border-color: var(--color-navy-700);
}
.rmk-btn--secondary:hover { background-color: var(--color-cream-100); }
.rmk-btn--danger {
    background-color: var(--color-cream-50);
    color: var(--color-error);
    border-color: var(--color-error);
}