/* Medico brand accent themes — works with Bootstrap 5 color modes */
:root,
[data-medico-theme="medico"] {
    --medico-blue: #1565C0;
    --medico-blue-dark: #0D47A1;
    --medico-teal: #009688;
    --medico-teal-dark: #00796B;
    --medico-gradient: linear-gradient(135deg, #1565C0 0%, #009688 100%);
}

[data-medico-theme="clinical"] {
    --medico-blue: #0ea5e9;
    --medico-blue-dark: #0284c7;
    --medico-teal: #0369a1;
    --medico-teal-dark: #075985;
    --medico-gradient: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
}

[data-medico-theme="care"] {
    --medico-blue: #059669;
    --medico-blue-dark: #047857;
    --medico-teal: #10b981;
    --medico-teal-dark: #059669;
    --medico-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

[data-medico-theme="imaging"] {
    --medico-blue: #0d9488;
    --medico-blue-dark: #0f766e;
    --medico-teal: #14b8a6;
    --medico-teal-dark: #0d9488;
    --medico-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
}

[data-medico-theme="corporate"] {
    --medico-blue: #4f46e5;
    --medico-blue-dark: #4338ca;
    --medico-teal: #6366f1;
    --medico-teal-dark: #4f46e5;
    --medico-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
}

/* Bootswatch skins inherit Bootstrap variables; map Medico tokens to BS primary where possible */
[data-medico-theme^="bootswatch-"],
[data-medico-theme="minty"],
[data-medico-theme="flatly"],
[data-medico-theme="litera"],
[data-medico-theme="pulse"],
[data-medico-theme="sandstone"],
[data-medico-theme="darkly"] {
    --medico-blue: var(--bs-primary, #375a7f);
    --medico-blue-dark: var(--bs-primary, #375a7f);
    --medico-teal: var(--bs-success, #00bc8c);
    --medico-teal-dark: var(--bs-success, #00bc8c);
    --medico-gradient: linear-gradient(135deg, var(--medico-blue) 0%, var(--medico-teal) 100%);
}

[data-medico-theme="minty"] { --medico-blue: #78c2ad; --medico-teal: #56cc9d; --medico-blue-dark: #5fb89d; --medico-teal-dark: #3bb78a; }
[data-medico-theme="flatly"] { --medico-blue: #2c3e50; --medico-teal: #18bc9c; --medico-blue-dark: #1a252f; --medico-teal-dark: #128f76; }
[data-medico-theme="litera"] { --medico-blue: #4582ec; --medico-teal: #3fb618; --medico-blue-dark: #2e6bd4; --medico-teal-dark: #339913; }
[data-medico-theme="pulse"] { --medico-blue: #593196; --medico-teal: #a871bd; --medico-blue-dark: #44247a; --medico-teal-dark: #8f5bad; }
[data-medico-theme="sandstone"] { --medico-blue: #325d88; --medico-teal: #93c54b; --medico-blue-dark: #244662; --medico-teal-dark: #7aa83a; }
[data-medico-theme="darkly"] { --medico-blue: #375a7f; --medico-teal: #00bc8c; --medico-blue-dark: #28415b; --medico-teal-dark: #009670; }

/* Theme picker UI */
.theme-picker-menu {
    width: min(320px, 92vw);
    padding: 0.75rem;
}

.theme-picker-section {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0.5rem 0 0.35rem;
}

.theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.theme-swatch-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: transparent;
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
    text-align: left;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.theme-swatch-btn:hover,
.theme-swatch-btn.is-active {
    border-color: var(--medico-blue);
    box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.15);
}

.theme-swatch-colors {
    display: flex;
    flex-shrink: 0;
}

.theme-swatch-colors span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.theme-swatch-colors span + span {
    margin-left: -5px;
}

.theme-mode-toggle {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.theme-mode-toggle .btn {
    flex: 1;
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
}

[data-bs-theme="dark"] .theme-swatch-btn {
    border-color: #334155;
}

[data-bs-theme="dark"] .theme-swatch-btn.is-active {
    border-color: var(--medico-teal);
}