/* Frontend foundation reusable components (v1) */
.foundation-v1 .ff-card {
    border: 1px solid rgba(35, 78, 145, 0.14);
    border-radius: var(--ff-radius-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.95));
    box-shadow: var(--ff-shadow-sm);
    backdrop-filter: blur(8px);
}

.foundation-v1 .ff-stat-card {
    position: relative;
    border: 1px solid rgba(35, 78, 145, 0.14);
    border-radius: var(--ff-radius-lg);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 255, 0.93));
    box-shadow: var(--ff-shadow-sm);
    padding: var(--ff-space-4);
}

.foundation-v1 .ff-stat-card__label {
    display: block;
    margin-bottom: var(--ff-space-1);
    color: var(--ff-text-muted);
    font-size: var(--ff-font-size-xs);
    font-weight: var(--ff-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.foundation-v1 .ff-stat-card__value {
    display: block;
    color: #12305a;
    font-size: var(--ff-font-size-2xl);
    font-weight: var(--ff-font-weight-semibold);
    line-height: var(--ff-line-height-tight);
}

.foundation-v1 .ff-stat-card__meta {
    margin-top: var(--ff-space-2);
    color: var(--ff-text-secondary);
    font-size: var(--ff-font-size-sm);
}

.foundation-v1 .ff-card__header {
    padding: var(--ff-space-4);
    border-bottom: 1px solid var(--ff-border-subtle);
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.92), rgba(241, 247, 255, 0.84));
}

.foundation-v1 .ff-card__title {
    margin: 0;
    font-size: var(--ff-font-size-lg);
    font-weight: var(--ff-font-weight-semibold);
    color: var(--ff-text-primary);
}

.foundation-v1 .ff-card__body {
    padding: var(--ff-space-4);
}

.foundation-v1 .ff-card__footer {
    padding: var(--ff-space-3) var(--ff-space-4);
    border-top: 1px solid var(--ff-border-subtle);
    background: var(--ff-surface-subtle);
}

.foundation-v1 .ff-btn {
    min-height: var(--ff-control-height-md);
    border-radius: var(--ff-radius-md);
    font-weight: var(--ff-font-weight-semibold);
    padding-inline: 0.9rem;
}

.foundation-v1 .ff-btn--primary {
    color: var(--ff-text-inverse);
    background: var(--ff-brand-primary);
    border-color: var(--ff-brand-primary);
}

.foundation-v1 .ff-btn--primary:hover {
    color: var(--ff-text-inverse);
    background: var(--ff-brand-primary-strong);
    border-color: var(--ff-brand-primary-strong);
}

.foundation-v1 .ff-btn--soft {
    color: var(--ff-brand-primary-strong);
    background: var(--ff-brand-primary-soft);
    border-color: transparent;
}

.foundation-v1 .ff-btn--pill {
    border-radius: var(--ff-radius-pill);
}

.foundation-v1 .ff-form-control {
    min-height: var(--ff-control-height-md);
    border-radius: var(--ff-radius-md);
}

.foundation-v1 .ff-form-label {
    margin-bottom: var(--ff-space-1);
    font-size: var(--ff-font-size-xs);
    font-weight: var(--ff-font-weight-semibold);
    color: var(--ff-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.foundation-v1 .ff-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--ff-space-3);
    padding: var(--ff-space-4);
    border: 1px solid rgba(35, 78, 145, 0.12);
    border-radius: var(--ff-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 255, 0.95));
    box-shadow: var(--ff-shadow-sm);
}

.foundation-v1 .ff-form-section {
    border: 1px solid rgba(35, 78, 145, 0.12);
    border-radius: var(--ff-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 255, 0.95));
    box-shadow: var(--ff-shadow-sm);
    padding: var(--ff-space-4);
}

.foundation-v1 .ff-form-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ff-space-2);
    margin-bottom: var(--ff-space-3);
}

.foundation-v1 .ff-form-section__title {
    margin: 0;
    color: var(--ff-text-primary);
    font-size: var(--ff-font-size-lg);
    font-weight: var(--ff-font-weight-semibold);
}

.foundation-v1 .ff-form-section__subtitle {
    margin: 0;
    color: var(--ff-text-muted);
    font-size: var(--ff-font-size-sm);
}

.foundation-v1 .ff-filter-group__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ff-space-2);
    color: var(--ff-text-muted);
    font-size: var(--ff-font-size-sm);
}

.foundation-v1 .ff-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(35, 78, 145, 0.12);
    border-radius: var(--ff-radius-lg);
    background: var(--ff-surface-raised);
    box-shadow: var(--ff-shadow-sm);
}

.foundation-v1 .ff-table-card {
    border: 1px solid rgba(35, 78, 145, 0.12);
    border-radius: var(--ff-radius-lg);
    background: var(--ff-surface-raised);
    box-shadow: var(--ff-shadow-sm);
}

.foundation-v1 .ff-table-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ff-space-2);
    padding: var(--ff-space-3) var(--ff-space-4);
    border-bottom: 1px solid var(--ff-border-subtle);
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.92), rgba(241, 247, 255, 0.84));
}

.foundation-v1 .ff-table-card__body {
    padding: var(--ff-space-0);
}

.foundation-v1 .ff-table {
    width: 100%;
    margin: 0;
}

.foundation-v1 .ff-table thead th {
    background: #f3f7fe;
}

.foundation-v1 .ff-table th,
.foundation-v1 .ff-table td {
    min-height: var(--ff-table-row-min-height);
    vertical-align: middle;
}

.foundation-v1 .ff-table tbody tr:hover {
    background: var(--ff-hover-overlay);
}

.foundation-v1 .ff-table--compact th,
.foundation-v1 .ff-table--compact td {
    min-height: var(--ff-density-compact-row);
    padding-block: 0.4rem;
}

.foundation-v1 .ff-table--spacious th,
.foundation-v1 .ff-table--spacious td {
    min-height: var(--ff-density-spacious-row);
}

.foundation-v1 .ff-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--ff-radius-pill);
    font-size: var(--ff-font-size-xs);
    font-weight: 700;
}

.foundation-v1 .ff-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.5rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--ff-radius-pill);
    font-size: var(--ff-font-size-xs);
    font-weight: var(--ff-font-weight-semibold);
    line-height: 1;
}

.foundation-v1 .ff-status--info {
    background: var(--ff-status-info-bg);
    color: var(--ff-status-info-fg);
}

.foundation-v1 .ff-status--success {
    background: var(--ff-status-success-bg);
    color: var(--ff-status-success-fg);
}

.foundation-v1 .ff-status--warning {
    background: var(--ff-status-warning-bg);
    color: var(--ff-status-warning-fg);
}

.foundation-v1 .ff-status--danger {
    background: var(--ff-status-danger-bg);
    color: var(--ff-status-danger-fg);
}

.foundation-v1 .ff-status--neutral {
    background: var(--ff-status-neutral-bg);
    color: var(--ff-status-neutral-fg);
}

.foundation-v1 .ff-alert {
    border-radius: var(--ff-radius-md);
    border: 1px solid transparent;
    background: var(--ff-surface-raised);
}

.foundation-v1 .ff-alert--info {
    border-color: var(--ff-status-info-bg);
    color: var(--ff-status-info-fg);
}

.foundation-v1 .ff-alert--success {
    border-color: var(--ff-status-success-bg);
    color: var(--ff-status-success-fg);
}

.foundation-v1 .ff-alert--warning {
    border-color: var(--ff-status-warning-bg);
    color: var(--ff-status-warning-fg);
}

.foundation-v1 .ff-alert--danger {
    border-color: var(--ff-status-danger-bg);
    color: var(--ff-status-danger-fg);
}

.foundation-v1 .ff-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ff-space-2);
}

body.foundation-v1:not([data-page-namespace='chat']) .ff-pagination :is(.page-link, .btn) {
    font-weight: 600;
}

body.foundation-v1:not([data-page-namespace='chat']) .ff-pagination :is(.page-item.disabled .page-link, .page-link.disabled, .btn:disabled, .btn.disabled) {
    color: #5f7697 !important;
    border-color: rgba(67, 94, 129, 0.28) !important;
    background: rgba(234, 241, 251, 0.9) !important;
    opacity: 1 !important;
}

.foundation-v1 .ff-state {
    border: 1px dashed var(--ff-border-strong);
    border-radius: var(--ff-radius-lg);
    background: var(--ff-surface-subtle);
    padding: var(--ff-space-6);
    text-align: center;
    color: var(--ff-text-muted);
}

.foundation-v1 .ff-state__title {
    margin-bottom: var(--ff-space-2);
    color: var(--ff-text-primary);
    font-size: var(--ff-font-size-lg);
}

.foundation-v1 .ff-state__text {
    margin: 0;
}

.foundation-v1 .ff-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ff-space-2);
    flex-wrap: wrap;
    padding: var(--ff-space-3) var(--ff-space-4);
    border: 1px solid rgba(35, 78, 145, 0.12);
    border-radius: var(--ff-radius-lg);
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.95), rgba(245, 250, 255, 0.92));
}

.foundation-v1 .ff-action-bar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--ff-space-2);
    flex-wrap: wrap;
}

.foundation-v1 .ff-chart-card {
    border: 1px solid rgba(35, 78, 145, 0.12);
    border-radius: var(--ff-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.95));
    box-shadow: var(--ff-shadow-sm);
}

.foundation-v1 .ff-chart-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ff-space-3);
    padding: var(--ff-space-3) var(--ff-space-4);
    border-bottom: 1px solid rgba(35, 78, 145, 0.1);
}

.foundation-v1 .ff-chart-card__canvas {
    min-height: 240px;
    padding: var(--ff-space-4);
}

.foundation-v1 .ff-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-space-3);
}

.foundation-v1 .ff-chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ff-space-2);
    color: var(--ff-text-secondary);
    font-size: var(--ff-font-size-sm);
}

.foundation-v1 .ff-chart-legend__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--ff-radius-pill);
}

.foundation-v1 .ff-chart-grid {
    stroke: var(--ff-chart-grid);
}

.foundation-v1 .ff-chart-axis {
    color: var(--ff-chart-axis);
}
