/**
 * 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: var(--background);
}

/* Shell content padding lives in design-system.css (--shell-gutter). Do not redeclare here. */

/* ---- Bootstrap buttons inside app (communication tiles, etc.) ---- */
.vds-has-shell .btn {
    font-size: var(--font-button);
    font-weight: var(--weight-semibold);
    padding: 0.5rem 1rem;
    min-height: 2.5rem;
    border-radius: var(--radius-lg);
    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.6rem 1.2rem;
    min-height: 2.85rem;
}

.vds-has-shell .btn-sm {
    font-size: var(--font-caption);
    padding: 0.35rem 0.75rem;
    min-height: 2.1rem;
    border-radius: var(--radius-md);
}

.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: var(--text-primary);
}

.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, var(--text-muted) 0%, var(--text-secondary) 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: solid active pill (screenshot language) ---- */
.vds-has-shell .vb-nav-link {
    font-size: 0.95rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--nav-radius);
}

.vds-has-shell .vb-nav-link.is-active,
.vds-has-shell .vb-nav-link.active {
    background: var(--nav-active-bg) !important;
    color: var(--nav-active-text) !important;
    font-weight: var(--weight-semibold);
    box-shadow: 0 8px 20px rgba(91, 63, 196, 0.22);
}

.vds-has-shell .vb-nav-link.is-active i,
.vds-has-shell .vb-nav-link.active i {
    color: var(--nav-active-icon) !important;
}

.vds-has-shell .vb-nav-link:hover:not(.is-active):not(.active):not(.vb-nav-link--logout) {
    background: var(--nav-hover-bg);
    color: var(--nav-hover-text);
}

.vds-has-shell .vb-nav-link:hover:not(.is-active):not(.active):not(.vb-nav-link--logout) i {
    color: var(--primary);
}

/* ---- Cards & stats ---- */
.vds-has-shell .vds-card {
    border-color: var(--border);
    border-radius: var(--radius-panel, 0.5rem);
}

.vds-has-shell .vds-stats-card {
    border-radius: var(--radius-panel, 0.5rem);
}

.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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--badge-min-height);
    font-size: var(--badge-font-size);
    font-weight: var(--weight-semibold);
    line-height: var(--badge-line-height);
    padding: var(--badge-pad-y) var(--badge-pad-x);
    border-radius: var(--radius-full);
    white-space: nowrap;
    vertical-align: middle;
}

/* Gradients must set inverse text — design-system mid-tones on solid fills are unreadable. */
.vds-has-shell .badge.bg-primary,
.vds-has-shell .vds-badge--primary,
.vds-has-shell .vds-badge--admin,
.vds-has-shell .vds-badge--patient {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: var(--text-inverse) !important;
}

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

.vds-has-shell .badge.bg-danger,
.vds-has-shell .vds-badge--danger,
.vds-has-shell .vds-badge--inactive {
    background: linear-gradient(135deg, var(--danger), var(--accent-rose)) !important;
    color: var(--text-inverse) !important;
}

.vds-has-shell .badge.bg-warning,
.vds-has-shell .vds-badge--warning,
.vds-has-shell .vds-badge--pending {
    background: linear-gradient(135deg, var(--warning), #FB923C) !important;
    color: var(--text-primary) !important;
}

.vds-has-shell .badge.bg-info,
.vds-has-shell .vds-badge--info,
.vds-has-shell .vds-badge--therapist {
    background: linear-gradient(135deg, var(--info), var(--accent-sky)) !important;
    color: var(--text-inverse) !important;
}

.vds-has-shell .badge.bg-secondary,
.vds-has-shell .vds-badge--neutral {
    background: var(--text-secondary) !important;
    color: var(--text-inverse) !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: var(--success-on-soft);
}

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

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

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

/* ---- 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;
    color: var(--text-inverse);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.22);
}

body.auth-page .vds-btn--secondary {
    background: linear-gradient(135deg, var(--text-muted) 0%, var(--text-secondary) 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;
    color: var(--text-inverse);
}

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

.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: var(--font-small);
    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;
    color: var(--text-inverse);
}

.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: var(--text-inverse);
}

.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: var(--font-small);
    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;
}

/* ---- Platform / Centre Admin multi-section cards ---- */
.vds-admin-settings__section.vds-card {
    padding: 0;
    overflow: hidden;
}

.vds-admin-settings__section.vds-card > .vds-card__header,
.vds-admin-settings__section.vds-card > .vds-admin-settings__header {
    padding: var(--space-4) var(--space-5) 0;
    margin-bottom: 0;
    border-bottom: none;
}

.vds-admin-settings__section.vds-card > .vds-card__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.vds-admin-settings__footer {
    margin-top: var(--space-4);
}