/**
 * FinchBridge global UI polish — tighter typography, colourful controls.
 * Loaded after design-system.css and style.css.
 */

/* ---- App shell: refined base scale ---- */
body.vds-has-shell,
body.vb-has-shell {
    font-size: var(--font-body);
    line-height: var(--line-height-body);
    background: linear-gradient(180deg, #FAFBFF 0%, var(--background) 12rem);
}

body.vds-has-shell .vb-main-content {
    padding: var(--space-5) var(--space-5) var(--space-8);
}

@media (min-width: 992px) {
    body.vds-has-shell .vb-main-content {
        padding: var(--space-6) var(--space-6) var(--space-10);
    }
}

/* ---- Bootstrap buttons inside app (communication tiles, etc.) ---- */
.vds-has-shell .btn {
    font-size: var(--font-button);
    font-weight: var(--weight-semibold);
    padding: 0.375rem 0.75rem;
    min-height: 2rem;
    border-radius: var(--radius-sm);
    border-width: 1px;
    line-height: 1.25;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.vds-has-shell .btn-lg {
    font-size: var(--font-small);
    padding: 0.4375rem 0.875rem;
    min-height: 2.25rem;
}

.vds-has-shell .btn-sm {
    font-size: var(--font-caption);
    padding: 0.25rem 0.625rem;
    min-height: 1.875rem;
}

.vds-has-shell .btn-primary,
.vds-has-shell .btn-finchbridge,
.vds-has-shell .btn-primary.btn-finchbridge {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-color: transparent;
    color: var(--text-inverse);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.vds-has-shell .btn-primary:hover,
.vds-has-shell .btn-finchbridge:hover,
.vds-has-shell .btn-primary.btn-finchbridge:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--secondary-hover) 100%);
    border-color: transparent;
    color: var(--text-inverse);
    transform: translateY(-1px);
}

.vds-has-shell .btn-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--accent-teal) 100%);
    border-color: transparent;
    color: var(--text-inverse);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.22);
}

.vds-has-shell .btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--accent-rose) 100%);
    border-color: transparent;
    color: var(--text-inverse);
}

.vds-has-shell .btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, #FB923C 100%);
    border-color: transparent;
    color: #1E293B;
}

.vds-has-shell .btn-info {
    background: linear-gradient(135deg, var(--info) 0%, var(--accent-sky) 100%);
    border-color: transparent;
    color: var(--text-inverse);
}

.vds-has-shell .btn-outline-primary,
.vds-has-shell .btn-outline-finchbridge {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    background: var(--surface);
}

.vds-has-shell .btn-outline-primary:hover,
.vds-has-shell .btn-outline-finchbridge:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-hover);
}

.vds-has-shell .btn-secondary {
    background: linear-gradient(135deg, #64748B 0%, #475569 100%);
    border-color: transparent;
    color: var(--text-inverse);
}

/* ---- Forms: compact, professional ---- */
.vds-has-shell .form-control,
.vds-has-shell .form-select {
    min-height: 2.25rem;
    font-size: var(--font-body);
    padding: 0.4375rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
}

.vds-has-shell .form-label,
.vds-has-shell .vds-label {
    font-size: var(--font-label);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
}

/* ---- Sidebar nav: colourful active states ---- */
.vds-has-shell .vb-nav-link {
    font-size: var(--font-small);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
}

.vds-has-shell .vb-nav-link.is-active,
.vds-has-shell .vb-nav-link.active {
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--secondary-soft) 100%);
    color: var(--primary);
    font-weight: var(--weight-semibold);
}

.vds-has-shell .vb-nav-link:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

/* ---- Cards & stats ---- */
.vds-has-shell .vds-card {
    border-color: color-mix(in srgb, var(--border) 80%, var(--primary-soft));
}

.vds-has-shell .vds-stats-card {
    border-radius: var(--radius-md);
}

.vds-has-shell .vds-stats-card__value {
    font-size: 1.375rem;
}

.vds-has-shell .vds-stats-card__label {
    font-size: var(--font-caption);
}

/* ---- Tables ---- */
.vds-has-shell .vds-table th {
    font-size: var(--font-caption);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.vds-has-shell .vds-table td {
    font-size: var(--font-small);
}

/* ---- Badges ---- */
.vds-has-shell .vds-badge,
.vds-has-shell .badge {
    font-size: var(--font-caption);
    font-weight: var(--weight-semibold);
    padding: 0.2em 0.55em;
    border-radius: var(--radius-full);
}

.vds-has-shell .badge.bg-primary,
.vds-has-shell .vds-badge--primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}

.vds-has-shell .badge.bg-success,
.vds-has-shell .vds-badge--success {
    background: linear-gradient(135deg, var(--success), var(--accent-teal)) !important;
}

/* ---- Quick actions on dashboards ---- */
.vds-has-shell .vds-quick-action__icon {
    font-size: 1.375rem;
}

.vds-has-shell .vds-quick-action__title {
    font-size: var(--font-small);
}

.vds-has-shell .vds-dashboard-card__title {
    font-size: var(--font-section-title);
}

/* ---- Alerts ---- */
.vds-has-shell .vds-alert,
.vds-has-shell .alert {
    font-size: var(--font-small);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.vds-has-shell .alert-success,
.vds-has-shell .vds-alert--success {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: #065F46;
}

.vds-has-shell .alert-danger,
.vds-has-shell .vds-alert--danger {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: #991B1B;
}

.vds-has-shell .alert-warning,
.vds-has-shell .vds-alert--warning {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: #92400E;
}

.vds-has-shell .alert-info,
.vds-has-shell .vds-alert--info {
    background: var(--info-soft);
    border-color: var(--info-border);
    color: #075985;
}

/* ---- Auth pages (register, etc.) ---- */
body.auth-page .vds-auth__submit,
body.auth-page .vds-btn--primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.22);
}

body.auth-page .vds-btn--secondary {
    background: linear-gradient(135deg, #64748B 0%, #475569 100%);
    border-color: transparent;
    color: var(--text-inverse);
}

body.auth-page .vds-btn--success {
    background: linear-gradient(135deg, var(--success) 0%, var(--accent-teal) 100%);
    border-color: transparent;
}

/* ---- Bridge Media: compact, colourful controls ---- */
.bridge-media-page .bm-search-input,
.bridge-media-page .bm-context-select {
    min-height: 2.375rem;
    font-size: 0.9375rem;
    border-radius: 0.75rem;
}

.bridge-media-page .bm-search-suggestion {
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
}

.bridge-media-page .bm-video-card__actions .vds-btn {
    min-height: 2.125rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 0.625rem;
}

.bridge-media-page .bm-video-card__actions .vds-btn--primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-color: transparent;
}

.bridge-media-page .bm-video-card__actions .vds-btn--danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--accent-rose) 100%);
    border-color: transparent;
    color: #fff;
}

.bridge-media-page .bm-media-results__pagination-btn,
.bridge-media-page .bm-search-pagination__btn {
    min-height: 2.25rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    border-radius: 0.625rem;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    color: var(--primary);
}

.bridge-media-page .bm-media-results__pagination-btn:hover:not(:disabled),
.bridge-media-page .bm-media-results__pagination-btn:focus-visible:not(:disabled),
.bridge-media-page .bm-search-pagination__btn:hover:not(:disabled),
.bridge-media-page .bm-search-pagination__btn:focus-visible:not(:disabled) {
    background: var(--primary-soft);
    border-color: var(--primary);
}

.bridge-media-page .bm-context-bar__inner {
    padding: 1rem 1.25rem;
}