/**
 * BCSS Base Theme
 *
 * Shared Bootstrap component overrides used by all BCSS themes.
 * This file contains common button, badge, alert, card, form, pagination,
 * dropdown, table, and footer styles that are identical across all themes.
 *
 * Individual theme files (bcss-theme.css, nycwm-theme.css, practisphere-theme.css)
 * should:
 * 1. Import this base theme
 * 2. Define their :root CSS variable overrides
 * 3. Add product-specific component styles
 *
 * SESSION-FRONTEND-QUALITY: CSS Theme Consolidation (~250 lines extracted)
 */

/* ===== Shared Admin Sidebar Variables ===== */
/* DES-025: Sidebar variables intentionally kept in base-theme.css as shared defaults for all themes */
:root {
    --sidebar-bg: var(--bcss-color-2);
    --sidebar-text: var(--white);
    --sidebar-hover-bg: var(--bcss-color-1-accessible);
    --sidebar-active-bg: var(--bcss-color-1-accessible);
    --sidebar-border: #2d3a45;
    --accent-dark: var(--bcss-color-5); /* ACC-D01: #735D43 provides 5.86:1 contrast with white */

    /* Navbar toggler SVG icons (encoded, RES-022) */
    --theme-toggler-svg-light: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(55, 65, 81, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --theme-toggler-svg-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(209, 213, 219, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== Bootstrap Component Overrides (WCAG AA Compliance) ===== */

/* A11Y-004 - P0: Fix .text-muted contrast (Bootstrap default #6c757d = 4.54:1 fails WCAG AA 4.5:1) */
.text-muted {
    color: var(--gray-700) !important;  /* #495057 = 7.0:1 contrast on white */
}

[data-theme="dark"] .text-muted {
    color: var(--bcss-text-muted) !important;  /* VIS-J11: 8.69:1 contrast on dark bg (was --gray-400 #585858 ~2.5:1) */
}

/* ===== Button Variants ===== */
.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--white);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    /* DES-017: text-decoration: underline is MedSpa-only brand differentiation (DES-C01), not shared */
}

.btn-primary:active {
    background-color: var(--primary-active);
    border-color: var(--primary-active);
}

.btn:active {
    transform: translateY(0);
    transition: transform 0.1s ease-out;
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: var(--white);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
}

/* ===== Accent Button ===== */
/* ACC-D01/D02: Use --accent-dark (#735D43) for 5.86:1 WCAG AA contrast with white text */
.btn-accent {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--white);
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* ===== Badge Variants ===== */
.badge-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.badge-secondary {
    background-color: var(--secondary-color);
    color: var(--white);
}

/* ACC-D06/D07: Use --accent-dark (#735D43) for 5.86:1 WCAG AA contrast with white text */
.badge-accent,
.badge-highlight {
    background-color: var(--accent-dark);
    color: var(--white);
}

/* ===== Alert Variants ===== */
.alert-primary {
    background-color: var(--primary-lightest);
    border-color: var(--primary-light);
    color: var(--primary-active);
}

/* ===== Card Enhancements ===== */
.card-primary {
    border-color: var(--primary-color);
}

.card-primary .card-header {
    background-color: var(--primary-color);
    border-bottom: none;
    color: var(--white);
}

.card {
    border: none; /* VIS-V24: Intentional design decision - cards use box-shadow instead of border for elevation */
}

/* VIS-V24: Subtle border in dark mode for card definition */
[data-theme="dark"] .card {
    border: 1px solid var(--card-border);
}

.card:focus-within {
    box-shadow: var(--shadow);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    transform: translateY(-1px);
}

/* ===== Progress Bar ===== */
.progress-bar {
    background-color: var(--primary-color);
}

/* ===== Pagination ===== */
.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination .page-link {
    color: var(--primary-color);
}

.pagination .page-link:hover {
    color: var(--primary-hover);
}

/* ===== Form Controls ===== */
.form-control {
    border-color: var(--input-border);
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-switch .form-check-input:checked {
    background-color: var(--primary-color);
}

/* ===== Dropdowns ===== */
.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--primary-color);
    color: var(--white);
}

/* ===== Tables ===== */
.table-hover tbody tr:hover {
    background-color: var(--primary-lightest);
}

/* ===== Calendar/Scheduling ===== */
.fc-event {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.fc-event-urgent {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.fc-today {
    background-color: var(--primary-lightest) !important;
}

/* ===== Footer ===== */
.footer-accent {
    color: var(--footer-accent);
}

/* ===== Logo/Branding ===== */
.navbar-brand,
.sidebar-brand {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
}

.sidebar-brand {
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--white);
    padding: var(--spacing-lg);
    text-align: center;
}

/* ===== App Navbar (for patient/practitioner apps) ===== */
/* VIS-V25: .app-navbar requires dark --nav-bg; ensure color uses --nav-text */
.app-navbar {
    background-color: var(--nav-bg);
    color: var(--nav-text);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link {
    color: var(--nav-text); /* VIS-V25: Use --nav-text instead of hardcoded --white for theme flexibility */
}

.app-navbar .nav-link:hover {
    background-color: var(--nav-hover-bg);
}

/* ===== Common Icon Utilities ===== */
.icon-patient {
    color: var(--primary-color);
}

.icon-urgent {
    color: var(--danger-color);
}

/* DES-H-ICON: Semantic icon color utility classes (Phase 10 — Category H) */
.icon-primary {
    color: var(--primary-color);
}

.icon-secondary {
    color: var(--secondary-color);
}

.icon-accent {
    color: var(--accent-color);
}

.icon-success {
    color: var(--success-color);
}

.icon-warning {
    color: var(--warning-color);
}

.icon-danger {
    color: var(--danger-color);
}

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

/* ===== Status Badges (shared) ===== */
.badge-active {
    background-color: var(--success-color);
    color: var(--white);
}

/* DES-H37 P2: Use CSS variable for badge text color */
.badge-pending {
    background-color: var(--warning-color);
    color: var(--gray-900);
}

.badge-inactive {
    background-color: var(--gray-600);
    color: var(--white);
}

.badge-urgent {
    background-color: var(--danger-color);
    color: var(--white);
}

/* ===== Card Accent Borders ===== */
.card-patient {
    border-left: 4px solid var(--primary-color);
}

.card-urgent {
    border-left: 4px solid var(--danger-color);
}

/* ===== Navbar Toggler Icon Contrast (RES-022) ===== */
.navbar-toggler {
    border-color: var(--gray-600); /* WCAG AA compliant border */
}

.navbar-toggler:focus {
    box-shadow: var(--shadow-focus);
}

.navbar-toggler-icon {
    /* Use custom SVG icon with better contrast */
    background-image: var(--theme-toggler-svg-light);
}

/* Dark mode toggler icon */
[data-theme="dark"] .navbar-toggler-icon {
    background-image: var(--theme-toggler-svg-dark);
}