/**
 * Repario Design System — Cards
 *
 * Standardized card components for the App Shell.
 *
 * Usage:
 *   <div class="rep-card">
 *     <div class="rep-card-header">
 *       <span class="material-symbols-outlined rep-card-icon">settings</span>
 *       <h3 class="rep-card-title">Title</h3>
 *     </div>
 *     <div class="rep-card-body">…</div>
 *   </div>
 *
 * Depends on: tokens.css
 * @package Repario_SaaS
 */

/* ── Base Card ─────────────────────────────────────────────────────────── */

.rep-card {
    background: var(--rep-card-bg);
    border: 1px solid var(--rep-card-border);
    border-radius: var(--rep-radius-xl);
    box-shadow: var(--rep-card-shadow);
    overflow: hidden;
}

/* ── Card Header ───────────────────────────────────────────────────────── */

.rep-card-header {
    display: flex;
    align-items: center;
    gap: var(--rep-space-2);
    padding: var(--rep-space-4) var(--rep-space-5);
    border-bottom: 1px solid var(--rep-border-default);
}

.rep-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rep-space-4) var(--rep-space-5);
    border-bottom: 1px solid var(--rep-border-default);
}

.rep-card-icon {
    color: var(--rep-color-primary-base);
    font-size: 20px;
}

.rep-card-title {
    font-size: var(--rep-font-size-base);
    font-weight: var(--rep-font-weight-bold);
    color: var(--rep-text-primary);
    margin: 0;
}

/* ── Card Body ─────────────────────────────────────────────────────────── */

.rep-card-body {
    padding: var(--rep-space-5);
}

/* ── Card Footer ───────────────────────────────────────────────────────── */

.rep-card-footer {
    padding: var(--rep-space-4) var(--rep-space-5);
    border-top: 1px solid var(--rep-border-default);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rep-space-3);
}