/* ==========================================================================
   Xclinics design tokens — single source of truth for colours and sizing.
   Loaded by _Layout, _LayoutBlank, Login, Branch/Select, etc.
   Change a value here and every screen follows.
   ========================================================================== */
:root {
    /* Brand */
    --xc-primary: #015294;
    --xc-primary-dark: #013a6b;
    --xc-primary-light: #0271c9;
    --xc-primary-accent: #0a58ca;
    --xc-gradient: linear-gradient(135deg, var(--xc-primary) 0%, var(--xc-primary-accent) 100%);

    /* Surfaces & text */
    --xc-bg: #f5f7fa;
    --xc-surface: #ffffff;
    --xc-surface-alt: #f8f9fa;
    --xc-hover: #f0f4ff;
    --xc-border: #e9ecef;
    --xc-heading: #2d3748;
    --xc-text: #495057;
    --xc-muted: #6c757d;
    --xc-faint: #9ca3af;

    /* Status */
    --xc-success: #10b981;
    --xc-warning: #f59e0b;
    --xc-danger: #ef4444;
    --xc-info: #06b6d4;

    /* Shape & motion */
    --xc-radius: 8px;
    --xc-radius-lg: 12px;
    --xc-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    --xc-transition: all 0.3s ease;
    --xc-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* App shell */
    --sidebar-width: 195px;
    --sidebar-collapsed: 52px;
    --header-height: 58px;

    /* Bootstrap hooks */
    --bs-primary: var(--xc-primary);
    --bs-primary-rgb: 1, 82, 148;
    --bs-link-color: var(--xc-primary);
    --bs-link-color-rgb: 1, 82, 148;
    --bs-link-hover-color: var(--xc-primary-dark);
    --bs-root-font-size: 14px;
    --bs-body-font-size: 1rem;
    --bs-body-font-family: var(--xc-font);

    /* Legacy aliases — existing views still reference these names */
    --primary-blue: var(--xc-primary);
    --primary-dark: var(--xc-primary-dark);
    --primary-light: var(--xc-primary-light);
    --primary-color: var(--xc-primary);
    --sidebar-bg: var(--xc-surface);
    --sidebar-hover: var(--xc-hover);
    --transition: var(--xc-transition);
}

html {
    font-size: 14px;
}

body {
    font-family: var(--xc-font);
    background: var(--xc-bg);
    overflow-x: hidden;
}

/* Bootstrap primary components follow the brand colour */
.btn-primary {
    --bs-btn-bg: var(--xc-primary);
    --bs-btn-border-color: var(--xc-primary);
    --bs-btn-hover-bg: var(--xc-primary-dark);
    --bs-btn-hover-border-color: var(--xc-primary-dark);
    --bs-btn-active-bg: var(--xc-primary-dark);
    --bs-btn-active-border-color: var(--xc-primary-dark);
    --bs-btn-disabled-bg: var(--xc-primary);
    --bs-btn-disabled-border-color: var(--xc-primary);
    --bs-btn-focus-shadow-rgb: 1, 82, 148;
}

.btn-outline-primary {
    --bs-btn-color: var(--xc-primary);
    --bs-btn-border-color: var(--xc-primary);
    --bs-btn-hover-bg: var(--xc-primary);
    --bs-btn-hover-border-color: var(--xc-primary);
    --bs-btn-active-bg: var(--xc-primary);
    --bs-btn-active-border-color: var(--xc-primary);
    --bs-btn-disabled-color: var(--xc-primary);
    --bs-btn-disabled-border-color: var(--xc-primary);
    --bs-btn-focus-shadow-rgb: 1, 82, 148;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--xc-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(1, 82, 148, 0.2);
}

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