/* ===========================================
   DMARD.CSS - DMARD Helper Styles
   ===========================================

   TABLE OF CONTENTS
   -----------------
   0. Dynamic Drug Color System
   1. DMARD Clinician Desktop Layout
   2. DMARD Mobile QR Container
   3. QR Actions Redesign
   4. QR Reset Button
   5. Copy Link Hover
   6. Start Date Pills
   7. DMARD Patient Mode Styles
   8. Mobile/Desktop Button Text Toggle
   9. PDF Link Card
   10. Shared Care Section
   11. Mobile Redesign
   12. Reduced Motion

   =========================================== */


/* ===========================================
   0. DYNAMIC DRUG COLOR SYSTEM
   ===========================================

   When a drug is selected, the entire UI transitions
   to that drug's color. This creates a cohesive,
   immersive experience.

   Uses unified --active-* variables from variables.css.
   Drug-specific overrides cascade from body[data-active-drug].
   =========================================== */

/* Default state - NHS Blue (no drug selected) */
[data-page="dmard"] {
    --active-color: var(--nhs-blue);
    --active-dark: var(--nhs-blue-dark);
    --active-light: rgba(0, 94, 184, 0.08);
    --active-glow: rgba(0, 94, 184, 0.35);
}

/* Drug-specific color overrides */
/* Also override --theme-primary so ::selection uses drug color */
[data-page="dmard"][data-active-drug="Methotrexate"] {
    --active-color: var(--drug-mtx);
    --active-dark: var(--drug-mtx-dark);
    --active-light: var(--drug-mtx-light);
    --active-glow: var(--drug-mtx-glow);
    --theme-primary: var(--drug-mtx);
    --theme-dark: var(--drug-mtx-dark);
}

[data-page="dmard"][data-active-drug="Sulfasalazine"] {
    --active-color: var(--drug-ssz);
    --active-dark: var(--drug-ssz-dark);
    --active-light: var(--drug-ssz-light);
    --active-glow: var(--drug-ssz-glow);
    --theme-primary: var(--drug-ssz);
    --theme-dark: var(--drug-ssz-dark);
}

[data-page="dmard"][data-active-drug="Azathioprine"] {
    --active-color: var(--drug-aza);
    --active-dark: var(--drug-aza-dark);
    --active-light: var(--drug-aza-light);
    --active-glow: var(--drug-aza-glow);
    --theme-primary: var(--drug-aza);
    --theme-dark: var(--drug-aza-dark);
}

[data-page="dmard"][data-active-drug="Leflunomide"] {
    --active-color: var(--drug-lef);
    --active-dark: var(--drug-lef-dark);
    --active-light: var(--drug-lef-light);
    --active-glow: var(--drug-lef-glow);
    --theme-primary: var(--drug-lef);
    --theme-dark: var(--drug-lef-dark);
}

[data-page="dmard"][data-active-drug="Nintedanib"] {
    --active-color: var(--drug-lef);
    --active-dark: var(--drug-lef-dark);
    --active-light: var(--drug-lef-light);
    --active-glow: var(--drug-lef-glow);
    --theme-primary: var(--drug-lef);
    --theme-dark: var(--drug-lef-dark);
}

[data-page="dmard"][data-active-drug="Mycophenolate"] {
    --active-color: var(--drug-mmf);
    --active-dark: var(--drug-mmf-dark);
    --active-light: var(--drug-mmf-light);
    --active-glow: var(--drug-mmf-glow);
    --theme-primary: var(--drug-mmf);
    --theme-dark: var(--drug-mmf-dark);
}

[data-page="dmard"][data-active-drug="Ciclosporin"] {
    --active-color: var(--drug-cic);
    --active-dark: var(--drug-cic-dark);
    --active-light: var(--drug-cic-light);
    --active-glow: var(--drug-cic-glow);
    --theme-primary: var(--drug-cic);
    --theme-dark: var(--drug-cic-dark);
}

[data-page="dmard"][data-active-drug="Tacrolimus"] {
    --active-color: var(--drug-tac);
    --active-dark: var(--drug-tac-dark);
    --active-light: var(--drug-tac-light);
    --active-glow: var(--drug-tac-glow);
    --theme-primary: var(--drug-tac);
    --theme-dark: var(--drug-tac-dark);
}

[data-page="dmard"][data-active-drug="Mercaptopurine"] {
    --active-color: var(--drug-6mp);
    --active-dark: var(--drug-6mp-dark);
    --active-light: var(--drug-6mp-light);
    --active-glow: var(--drug-6mp-glow);
    --theme-primary: var(--drug-6mp);
    --theme-dark: var(--drug-6mp-dark);
}

[data-page="dmard"][data-active-drug="Voclosporin"] {
    --active-color: var(--drug-vcs);
    --active-dark: var(--drug-vcs-dark);
    --active-light: var(--drug-vcs-light);
    --active-glow: var(--drug-vcs-glow);
    --theme-primary: var(--drug-vcs);
    --theme-dark: var(--drug-vcs-dark);
}

/* === DMARD-SPECIFIC ELEMENT OVERRIDES === */
/* These elements use the dynamic color instead of hardcoded blue */

/* Nav pill indicator - adopts drug color (yields to calc-preview for dropdown) */
[data-page="dmard"] .nav-pill-indicator:not(.calc-preview) {
    background: var(--active-color);
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
                width 280ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 200ms ease-out;
}

/* Card header icon - adopts drug color */
[data-page="dmard"] .card-header .icon {
    color: var(--active-color);
    transition: color 200ms ease-out;
}

/* Fix hover border bug - override components.css */
[data-page="dmard"] .select-btn[data-drug]:hover {
    border-color: var(--border-color);
}

/* Fix selected border - override components.css default blue, preserve left border */
[data-page="dmard"] .select-btn[data-drug].selected {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    /* border-left-color set by drug-specific rules */
}

/* Schedule button hover - neutral when no drug, drug color when selected */
[data-page="dmard"] .dmard-card:not([data-active-drug]) .select-btn[data-schedule]:hover {
    background: var(--surface-tertiary);
    border-color: var(--border-medium);
}

[data-page="dmard"] .dmard-card[data-active-drug] .select-btn[data-schedule]:hover {
    background: var(--active-light);
    border-color: var(--active-color);
}

/* Schedule button selected - neutral "pressed" state when no drug yet */
[data-page="dmard"] .dmard-card:not([data-active-drug]) .select-btn[data-schedule].selected {
    background: var(--surface-tertiary);
    border-color: var(--text-muted);
    border-width: 2px;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), var(--shadow-sm);
}

/* Schedule button selected - drug color when both selected */
[data-page="dmard"] .dmard-card[data-active-drug] .select-btn[data-schedule].selected {
    background: var(--active-color);
    border-color: var(--active-dark);
    color: white;
    box-shadow: var(--shadow-md), 0 0 0 3px var(--active-light);
}

/* === VISUAL HIERARCHY - Schedule/frequency buttons === */
/* Unselected schedule buttons recede when one is selected */
[data-page="dmard"] .dmard-card[data-active-schedule] .select-btn[data-schedule]:not(.selected),
[data-page="dmard"] .dmard-card[data-active-frequency] .select-btn[data-frequency]:not(.selected) {
    opacity: 0.55;
    transform: scale(0.98);
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[data-page="dmard"] .dmard-card[data-active-schedule] .select-btn[data-schedule]:not(.selected):hover,
[data-page="dmard"] .dmard-card[data-active-frequency] .select-btn[data-frequency]:not(.selected):hover {
    opacity: 0.85;
    transform: scale(1);
}

/* Selected schedule/frequency button - prominent with scale */
[data-page="dmard"] .dmard-card[data-active-schedule] .select-btn[data-schedule].selected,
[data-page="dmard"] .dmard-card[data-active-frequency] .select-btn[data-frequency].selected {
    transform: scale(1.02);
}

/* Primary button - Preview Patient View */
[data-page="dmard"] .btn-primary {
    background: var(--active-color);
    transition: background 200ms ease-out, transform var(--transition-fast), box-shadow var(--transition-fast);
}

@media (any-hover: hover) {
    [data-page="dmard"] .btn-primary:hover {
        background: var(--active-dark);
    }

    /* Secondary outline button hover - Copy Schedule */
    [data-page="dmard"] .btn-secondary-outline:hover {
        border-color: var(--active-color);
        background: var(--active-light);
        color: var(--active-color);
    }
}

/* Active/tap states for touch devices */
[data-page="dmard"] .btn-primary:active {
    background: var(--active-dark);
}

[data-page="dmard"] .btn-secondary-outline:active {
    border-color: var(--active-color);
    background: var(--active-light);
    color: var(--active-color);
}

/* Theme toggle - adopts drug color (desktop and mobile) */
[data-page="dmard"] .theme-toggle::before,
[data-page="dmard"] .mobile-theme-toggle::before {
    background: var(--active-color);
    transition: transform var(--duration-entrance) var(--ease-out-back),
                background-color 200ms ease-out;
}

[data-page="dmard"] .theme-toggle:hover,
[data-page="dmard"] .mobile-theme-toggle:hover {
    border-color: var(--active-color);
}

/* Page title - colored when drug selected */
[data-page="dmard"][data-active-drug] .page-title {
    color: var(--active-color);
    transition: color 200ms ease-out;
}

/* Header brand divider - adopts drug color */
[data-page="dmard"] .header-brand::before {
    background: var(--active-color);
    transition: background 200ms ease-out;
}

/* Header subtitle - adopts drug color */
[data-page="dmard"] .header-subtitle,
[data-page="dmard"] .subtitle-separator {
    color: var(--active-color);
    transition: color 200ms ease-out;
}

/* DMARD cards - both mobile and desktop */
.dmard-card {
    scroll-margin-top: 10px;             /* Reduced - header outside scroll container */
}

@media (max-width: 600px) {
    .dmard-card {
        scroll-margin-top: 10px;
    }
}

/* === DMARD CLINICIAN DESKTOP LAYOUT === */
@media (min-width: 900px) {
    [data-page="dmard"] .page-content {
        max-width: var(--layout-medium);
        padding: 3rem 2rem;
        padding-top: calc(var(--header-height) + 3rem);
        flex: 0 1 auto;
    }
    
    .clinician-mode {
        max-width: 1100px;
    }
    
    .clinician-layout {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 2rem;
        align-items: start;
    }
    
    .clinician-steps {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    
    /* Desktop section labels */
    .dmard-desktop-section-label {
        display: flex;
        align-items: center;
        font-size: 0.75rem;  /* Accessibility: min 12px for readability */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        margin: 0 0 0.75rem 0;
    }
    
    .dmard-desktop-section-label:not(:first-of-type) {
        margin-top: 0.5rem;
    }
    
    /* Desktop divider */
    .dmard-desktop-divider {
        height: 1px;
        background: var(--border-color);
        margin: 1.25rem 0 1rem 0;
    }
    
    /* First card gets accent border - uses dynamic drug color */
    .clinician-layout .clinician-steps > .card:first-child {
        border-top: 3px solid var(--active-color);
        transition: border-top-color 200ms ease-out;
    }
    
    .clinician-output {
        align-self: start;
    }
    
    .clinician-mode .card {
        padding: 1.25rem;
        margin-bottom: 0;
    }
    
    /* Card header styling for DMARD cards */
    .clinician-mode .dmard-card .card-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    
    .clinician-mode .dmard-card .card-header h2 {
        font-size: 0.95rem;
    }
    
    .clinician-mode .select-btn {
        padding: 0.875rem 1rem;
        height: 64px;
        font-size: 0.9rem;
    }

    .clinician-mode .schedule-btn,
    .clinician-mode .frequency-btn {
        height: 64px;
    }

    .clinician-mode .schedule-btn {
        padding: 0.75rem 1rem;
    }

    /* Medication grid - cleaner pyramid for 5 drugs */
    .clinician-mode .btn-grid.medications {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
        row-gap: 0.75rem;
    }

    .clinician-mode .btn-grid.medications .select-btn:nth-child(1) {
        grid-column: 1 / 3;
    }
    .clinician-mode .btn-grid.medications .select-btn:nth-child(2) {
        grid-column: 3 / 5;
    }
    .clinician-mode .btn-grid.medications .select-btn:nth-child(3) {
        grid-column: 5 / 7;
    }
    .clinician-mode .btn-grid.medications .select-btn:nth-child(4) {
        grid-column: 2 / 4;
    }
    .clinician-mode .btn-grid.medications .select-btn:nth-child(5) {
        grid-column: 4 / 6;
    }

    /* 6-drug grid - proper 3x2 layout (no pyramid) */
    .clinician-mode .btn-grid.medications:has(.select-btn:nth-child(6)) .select-btn:nth-child(4) {
        grid-column: 1 / 3;
    }
    .clinician-mode .btn-grid.medications:has(.select-btn:nth-child(6)) .select-btn:nth-child(5) {
        grid-column: 3 / 5;
    }
    .clinician-mode .btn-grid.medications:has(.select-btn:nth-child(6)) .select-btn:nth-child(6) {
        grid-column: 5 / 7;
    }

    /* QR Output Panel styles now in components.css */
}

/* -------------------------------------------
   DMARD MOBILE QR CONTAINER
   ------------------------------------------- */

/* QR container base styles */
#dmard-qr-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative; /* For overlay positioning */
}

/* Desktop QR container - hero size to match prednisolone */
@media (min-width: 901px) {
    #dmard-qr-container {
        padding: 0.875rem;
        min-height: 248px; /* 220px QR + padding */
        min-width: 248px;
    }
}

/* Mobile QR container - larger */
@media (max-width: 900px) {
    #dmard-qr-container {
        padding: 0.75rem;
        min-height: 224px; /* 200px QR + padding */
        min-width: 224px;
    }
}

/* Secondary outline button (used by prednisolone) */
.btn-secondary-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: 
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast);
}

@media (any-hover: hover) {
    .btn-secondary-outline:hover {
        border-color: var(--theme-primary);
        background: var(--theme-light);
        color: var(--theme-primary);
    }
}

.btn-secondary-outline:active {
    transform: scale(0.98);
}

.btn-secondary-outline svg {
    flex-shrink: 0;
}

/* === QR RESET ICON BUTTON (Option E) === */
[data-page="dmard"] .qr-reset-icon-btn {
    color: var(--text-muted);
    transition: color 150ms ease-out, background 150ms ease-out;
}

@media (any-hover: hover) {
    [data-page="dmard"] .qr-reset-icon-btn:hover {
        color: var(--active-color);
        background: var(--active-light);
    }
}

/* === QR SCAN LABEL === */
.qr-scan-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
    text-align: center;
}

/* === HEADER START DATE PICKER === */

.header-start-date {
    display: none;
    margin-left: auto;
}

.header-start-date.visible {
    display: block;
}

.start-date-picker {
    position: relative;
}

.start-date-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    width: 140px;
}

.start-date-trigger svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.start-date-label strong {
    color: var(--text-primary);
}

.start-date-chevron {
    transition: transform var(--transition-fast);
    opacity: 0.6;
}

.start-date-picker.open .start-date-chevron {
    transform: rotate(180deg);
}

@media (any-hover: hover) {
    .start-date-trigger:hover {
        border-color: var(--theme-primary);
        color: var(--theme-primary);
    }

    .start-date-trigger:hover .start-date-label strong {
        color: var(--theme-primary);
    }

    /* DMARD-specific: use dynamic drug color (border + date only) */
    [data-page="dmard"] .start-date-trigger:hover {
        border-color: var(--active-color);
        color: var(--text-secondary);
    }

    [data-page="dmard"] .start-date-trigger:hover .start-date-label strong {
        color: var(--active-color);
    }
}

/* Dropdown */
.start-date-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 140px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.375rem;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.start-date-picker.open .start-date-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.start-date-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;  /* Was 0.8rem - increased for readability */
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

@media (any-hover: hover) {
    .start-date-option:hover {
        background: var(--bg-primary);
        color: var(--text-primary);
    }
}

.start-date-option.selected {
    background: var(--theme-light);
    color: var(--theme-primary);
    font-weight: 600;
}

/* DMARD-specific: use dynamic drug color */
[data-page="dmard"] .start-date-option.selected {
    background: var(--active-light);
    color: var(--active-color);
}

/* Custom date option */
.start-date-custom {
    position: relative;
}

.start-date-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* Improve iOS touch handling */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure Custom row doesn't intercept touches meant for input */
.start-date-custom span {
    pointer-events: none;
}

/* Dark mode */
[data-theme="dark"] .start-date-trigger {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .start-date-trigger:hover {
    border-color: var(--theme-primary);
    color: var(--text-secondary);
}

[data-theme="dark"] .start-date-trigger:hover .start-date-label strong {
    color: var(--text-primary);
}

[data-theme="dark"] .start-date-dropdown {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .start-date-option:hover {
    background: var(--bg-elevated);
}

[data-theme="dark"] .start-date-option.selected {
    background: rgba(0, 94, 184, 0.35);
    color: var(--nhs-light-blue);
}

/* DMARD-specific dark mode overrides - use drug color */
[data-theme="dark"][data-page="dmard"] .start-date-trigger:hover {
    border-color: var(--active-color);
    color: var(--text-secondary);
}

[data-theme="dark"][data-page="dmard"] .start-date-trigger:hover .start-date-label strong {
    color: var(--active-color);
}

[data-page="dmard"] .start-date-option:hover {
    background: var(--active-light);
}

[data-theme="dark"][data-page="dmard"] .start-date-option.selected {
    background: var(--active-light);
    color: var(--active-color);
}

/* Mobile adjustments - improved accessibility for older users */
@media (max-width: 600px) {
    .start-date-trigger {
        padding: 0.5rem 0.75rem;     /* Increased for 44px touch target */
        font-size: 0.813rem;          /* 13px - more readable */
        width: 140px;                 /* Wider for better breathing room */
    }
    
    .start-date-trigger svg {
        width: 14px;                  /* Larger icons, easier to see */
        height: 14px;
    }
    
    .start-date-dropdown {
        min-width: 150px;             /* Match trigger width */
    }
    
    .start-date-option {
        font-size: 0.875rem;          /* 14px - meets WCAG AAA */
        padding: 0.625rem 0.75rem;    /* 44px touch target height */
    }
}

/* ===================================================
   DMARD PATIENT MODE STYLES
   =================================================== */

/* Summary bar - refined minimal style */
.summary-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.125rem 0;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Dark mode: more visible divider */
[data-theme="dark"] .summary-bar {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.summary-bar .summary-item {
    white-space: nowrap;
}

.summary-bar .summary-item:not(:last-child)::after {
    content: '·';
    margin: 0 0.5rem;
    opacity: 0.4;
}

.summary-bar strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Patient mode: remove summary-bar top padding since page-content provides the gap */
body.patient-mode .summary-bar {
    padding-top: 0;
}

/* === MOBILE/DESKTOP BUTTON TEXT TOGGLE === */
.btn-icon-mobile,
.btn-text-mobile {
    display: none;
}

.btn-icon-desktop,
.btn-text-desktop {
    display: inline;
}

@media (max-width: 767px) {
    .btn-icon-mobile,
    .btn-text-mobile {
        display: inline;
    }
    
    .btn-icon-desktop,
    .btn-text-desktop {
        display: none;
    }
}

/* Schedule card */
.schedule-card .card-header {
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .schedule-card .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Print header - hidden on screen */
.schedule-print-header {
    display: none;
}

/* Schedule table - unified for patient mode and drawer preview */
.schedule-card .schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.schedule-card .schedule-table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.schedule-card .schedule-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.schedule-card .schedule-table .week-cell {
    font-weight: 600;
    color: var(--text-secondary);
    width: 35%;
}

.schedule-card .schedule-table .date-cell {
    font-weight: 700;
    color: var(--text-primary);
}

.schedule-card .schedule-table tr:last-child td {
    border-bottom: none;
}

/* Booking note */
.booking-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 1.25rem 0;
    padding: 0.75rem;
    background: var(--accent-info);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    text-wrap: balance;
}

.booking-note svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 0.125rem;
    color: var(--theme-primary);
}

/* Schedule actions - button row */
.schedule-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.schedule-actions .btn {
    flex: 1;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.schedule-actions .btn-primary {
    border-radius: var(--radius-lg);
}

.schedule-actions .btn-secondary {
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
}

.schedule-actions .btn svg {
    flex-shrink: 0;
}

/* Hover states for schedule action buttons */
@media (any-hover: hover) {
    .schedule-actions .btn-primary:hover {
        background: var(--theme-dark);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }
    
    .schedule-actions .btn-secondary:hover {
        background: var(--bg-primary);
        box-shadow: 
            0 0 0 1px var(--theme-primary),
            var(--shadow-sm);
        transform: translateY(-1px);
    }
}

/* -------------------------------------------
   PDF LINK CARD - Clean flat style
   ------------------------------------------- */
.pdf-link-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    border-left: 4px solid var(--theme-primary);
    background: var(--bg-elevated);
    transition: 
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.pdf-link-card svg {
    flex-shrink: 0;
    color: var(--theme-primary);
}

.pdf-link-content {
    flex: 1;
}

.pdf-link-title {
    font-weight: 600;
    color: var(--text-primary);
}

.pdf-link-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pdf-link-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.pdf-link-card .pdf-arrow {
    color: var(--text-muted);
    font-size: 1.25rem;
    transition: transform var(--transition-fast);
}

@media (any-hover: hover) {
    .pdf-link-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    
    .pdf-link-card:hover .pdf-arrow {
        transform: translateX(4px);
    }
}

.pdf-link-card:active {
    transform: translateY(0) scale(0.99);
}

/* -------------------------------------------
   SHARED CARE SECTION
   ------------------------------------------- */
.shared-care-section .card-header {
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .shared-care-section .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.shared-care-content p {
    margin: 0 0 1rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.shared-care-content p:last-child {
    margin-bottom: 0;
}

.shared-care-content a {
    color: var(--theme-primary);
    text-decoration: none;
}

.shared-care-content a:hover {
    text-decoration: underline;
}

.shared-care-note {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}


/* ===========================================
   PATIENT VIEW / DRAWER COLOR OVERRIDES
   Uses dynamic drug color for all accent elements
   =========================================== */

/* Schedule card top border in drawer */
[data-page="dmard"] .drawer-body .schedule-card {
    border-top-color: var(--active-color);
    transition: border-top-color 200ms ease-out;
}

/* Booking note - info icon and link */
[data-page="dmard"] .booking-note svg {
    color: var(--active-color);
    transition: color 200ms ease-out;
}

[data-page="dmard"] .booking-note a {
    color: var(--active-color);
}

/* PDF link card - border and icon */
[data-page="dmard"] .pdf-link-card {
    border-left-color: var(--active-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-left-color 200ms ease-out;
}

[data-page="dmard"] .pdf-link-card svg {
    color: var(--active-color);
    transition: color 200ms ease-out;
}

/* Shared care - email link */
[data-page="dmard"] .shared-care-content a {
    color: var(--active-color);
    transition: color 200ms ease-out;
}

/* Contact card - phone/email icons and links */
[data-page="dmard"] .contact-row svg {
    color: var(--active-color);
    transition: color 200ms ease-out;
}

@media (any-hover: hover) {
    [data-page="dmard"] .contact-row a:hover {
        color: var(--active-color);
        border-color: var(--active-color);
    }
}

/* Schedule action buttons hover - use drug color */
@media (any-hover: hover) {
    [data-page="dmard"] .schedule-actions .btn-primary:hover {
        background: var(--active-dark);
    }

    [data-page="dmard"] .schedule-actions .btn-secondary:hover {
        border-color: var(--active-color);
        color: var(--active-color);
        box-shadow: 0 0 0 1px var(--active-color), var(--shadow-sm);
    }

    /* QR code hover - use drug color */
    [data-page="dmard"] .qr-container-clickable:hover {
        border-color: var(--active-color);
        box-shadow: var(--shadow-md), 0 0 0 3px var(--active-light);
    }
}

/* QR code focus - use drug color (outside media query for keyboard nav) */
[data-page="dmard"] .qr-container-clickable:focus-visible {
    border-color: var(--active-color);
    box-shadow: var(--shadow-md), 0 0 0 3px var(--active-light);
}

/* QR code active/pressed - override animation transform */
[data-page="dmard"] .qr-output-panel .qr-container-clickable:active,
[data-page="dmard"] .dmard-mobile-card .qr-container-clickable:active,
[data-page="dmard"] .qr-output-panel .qr-container-clickable.pressing,
[data-page="dmard"] .dmard-mobile-card .qr-container-clickable.pressing {
    transform: scale(0.97);
    animation: none;
}


/* ===========================================
   MOBILE REDESIGN (below 600px)
   Compact two-card layout that fits on single screen
   =========================================== */

@media (max-width: 600px) {
    /* === CARD 1: SELECTION CARD === */

    /* First card gets accent border on mobile - uses dynamic drug color */
    .clinician-mode .dmard-card:first-child {
        border-top: 3px solid var(--active-color);
        transition: border-top-color 200ms ease-out;
    }
    
    /* Tighter card padding */
    .clinician-mode .card {
        padding: 1rem;
        margin-bottom: 0.875rem;
    }
    
    /* Compact card headers */
    .clinician-mode .dmard-card .card-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.625rem;
    }
    
    .clinician-mode .dmard-card .card-header h2 {
        font-size: 0.9rem;
    }
    
    /* Section labels for mobile */
    .dmard-mobile-section-label {
        display: flex;
        align-items: center;
        font-size: 0.75rem;           /* 12px - readable for all-caps labels */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        margin: 0 0 0.75rem 0;        /* More space before buttons */
    }
    
    .dmard-mobile-section-label:not(:first-of-type) {
        margin-top: 1.25rem;  /* Clearer visual separation between sections */
    }
    
    /* === DRUG PILLS - Compact horizontal row === */
    .clinician-mode .btn-grid.medications.mobile-compact {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.375rem;
        grid-template-columns: unset;
    }
    
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn {
        flex: 1;
        min-height: 52px;  /* Larger for older users with reduced dexterity */
        min-width: 0;
        padding: 0.625rem 0.25rem;
        font-size: 0.8rem;
        font-weight: 700;
        border-radius: var(--radius-sm);
    }
    
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn.selected {
        box-shadow: 
            0 0 0 1px var(--theme-dark),
            var(--shadow-sm),
            0 0 0 2px var(--theme-light);
        transform: scale(1.02);
    }
    
    /* === SCHEDULE BUTTONS - Inline format === */
    .clinician-mode .btn-grid.two-col.mobile-inline {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .clinician-mode .btn-grid.two-col.mobile-inline .schedule-btn {
        flex-direction: row;
        min-height: 48px;
        padding: 0.625rem 0.75rem;
        font-size: 0.813rem;          /* 13px - more comfortable for primary text */
        gap: 0;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    .clinician-mode .btn-grid.two-col.mobile-inline .schedule-btn .schedule-inline-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
        line-height: 1.2;
    }
    
    .clinician-mode .btn-grid.two-col.mobile-inline .schedule-btn .schedule-label {
        font-weight: 700;
        font-size: 0.8rem;
    }
    
    .clinician-mode .btn-grid.two-col.mobile-inline .schedule-btn .schedule-weeks {
        font-weight: 500;
        font-size: 0.75rem;           /* 12px - minimum for secondary text */
        opacity: 0.75;
    }
    
    .clinician-mode .btn-grid.two-col.mobile-inline .schedule-btn.selected .schedule-weeks {
        opacity: 0.9;
    }
    
    /* === INTEGRATED QR SECTION === */
    
    /* QR section wrapper - sits within the single card */
    .dmard-mobile-qr-section {
        position: relative;
        text-align: center;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
    }
    
    /* QR Placeholder - mobile version */
    .qr-placeholder-mobile {
        background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
        border: 2px dashed var(--border-color);
        border-radius: var(--radius-lg);
        padding: 2rem 1rem;
        color: var(--text-muted);
        font-size: 0.8rem;
        line-height: 1.4;
        animation: breathe var(--duration-breathing) ease-in-out infinite;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .qr-placeholder-mobile .qr-placeholder-icon {
        margin-bottom: 0.5rem;
        opacity: 0.35;
        animation: breatheIcon var(--duration-breathing) ease-in-out infinite;
    }
    
    .qr-placeholder-mobile .qr-placeholder-icon svg {
        width: 40px;
        height: 40px;
    }
    
    /* QR content wrapper - mobile */
    .qr-content-mobile {
        display: none;
    }

    .dmard-mobile-card.qr-ready .qr-placeholder-mobile {
        display: none;
    }

    .dmard-mobile-card.qr-ready .qr-content-mobile {
        display: block;
    }

    /* Prevent refresh icon from inheriting animation on reveal */
    .qr-content-mobile .qr-reset-icon-btn svg {
        animation: none;
    }
    .qr-content-mobile .qr-reset-icon-btn svg.icon-spin {
        animation: iconSpinOnce var(--duration-entrance) cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    
    /* Hide QR container when empty (prevents flash during drug color change) */
    #dmard-qr-container:empty {
        opacity: 0;
    }

    /* QR container - mobile */
    .dmard-mobile-qr-section #dmard-qr-container {
        padding: 0.625rem;
        margin-bottom: 0;
        min-height: 176px; /* 160px QR + padding */
        min-width: 176px;
    }
    
    /* Option E mobile: uses shared .qr-actions-grid */
    
    /* === ANIMATION STATES === */
    
    /* Reset animation for mobile QR section */
    .dmard-mobile-card.resetting .qr-content-mobile {
        opacity: 0;
        transform: scale(0.95);
        transition: opacity var(--duration-base) ease-out, transform var(--duration-base) ease-out;
    }

    .dmard-mobile-card.reset-complete .qr-placeholder-mobile {
        animation: placeholderReturn var(--transition-entrance);
    }
}


/* ===========================================
   DMARD DRUG COLOR SYSTEM
   Each drug has its own distinctive color identity
   =========================================== */

/* === DRUG BUTTON COLOR ACCENTS (Desktop) === */

/* Base drug button - subtle left border indicator */
.clinician-mode .btn-grid.medications .select-btn {
    border-left: 4px solid transparent;
    transition:
        background var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast),
        border-color var(--transition-fast),
        border-left-color var(--transition-base),
        border-left-width var(--transition-base),
        opacity var(--transition-fast);
}

/* === VISUAL HIERARCHY - Unselected buttons recede === */
/* Only apply when a drug IS selected (so initial state looks normal) */
.clinician-mode .dmard-card[data-active-drug] .btn-grid.medications .select-btn:not(.selected) {
    opacity: 0.55;
    transform: scale(0.98);
}

.clinician-mode .dmard-card[data-active-drug] .btn-grid.medications .select-btn:not(.selected):hover {
    opacity: 0.85;
    transform: scale(1);
}

/* Selected drug button - prominent with scale */
.clinician-mode .dmard-card[data-active-drug] .btn-grid.medications .select-btn.selected {
    transform: scale(1.02);
}

/* === DRUG CARD CONTENT LAYOUT (Desktop) === */
/* Matches biologics card design - name/abbrev left, route right */

@media (min-width: 900px) {
    .clinician-mode .btn-grid.medications .select-btn {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        min-height: 64px;
        padding: 0.625rem 0.75rem;
    }

    .clinician-mode .btn-grid.medications .select-btn .drug-card-content {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
    }

    .clinician-mode .btn-grid.medications .select-btn .drug-info {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        text-align: left;
    }

    .clinician-mode .btn-grid.medications .select-btn .drug-name {
        display: block;
        font-weight: 600;
        font-size: 0.95rem;
    }

    .clinician-mode .btn-grid.medications .select-btn .drug-abbrev {
        display: block;
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    .clinician-mode .btn-grid.medications .select-btn.selected .drug-abbrev {
        color: rgba(255, 255, 255, 0.7);
    }
}


/* Individual drug colors - unselected state (subtle hint) */
/* Note: Must match parent selector specificity to override base border-left */
.clinician-mode .btn-grid.medications .select-btn[data-drug="Methotrexate"] { border-left-color: rgba(91, 143, 122, 0.5); }
.clinician-mode .btn-grid.medications .select-btn[data-drug="Sulfasalazine"] { border-left-color: rgba(196, 104, 67, 0.5); }
.clinician-mode .btn-grid.medications .select-btn[data-drug="Azathioprine"] { border-left-color: rgba(136, 120, 169, 0.5); }
.clinician-mode .btn-grid.medications .select-btn[data-drug="Leflunomide"] { border-left-color: rgba(92, 122, 138, 0.5); }
.clinician-mode .btn-grid.medications .select-btn[data-drug="Nintedanib"] { border-left-color: rgba(92, 122, 138, 0.5); }
.clinician-mode .btn-grid.medications .select-btn[data-drug="Mycophenolate"] { border-left-color: rgba(168, 107, 107, 0.5); }
.clinician-mode .btn-grid.medications .select-btn[data-drug="Ciclosporin"] { border-left-color: rgba(77, 138, 134, 0.5); }
.clinician-mode .btn-grid.medications .select-btn[data-drug="Tacrolimus"] { border-left-color: rgba(155, 130, 73, 0.5); }
.clinician-mode .btn-grid.medications .select-btn[data-drug="Mercaptopurine"] { border-left-color: rgba(107, 122, 163, 0.5); }
.clinician-mode .btn-grid.medications .select-btn[data-drug="Voclosporin"] { border-left-color: rgba(139, 90, 114, 0.5); }

/* Selected state - illuminated edge effect (light catching gem facet) */
/* Uses --active-* variables which cascade from body[data-active-drug] */
/* Note: Uses [data-page] for specificity to override components.css .select-btn.selected */
[data-page="dmard"] .select-btn[data-drug].selected {
    background: var(--active-color);
    border-left-width: var(--drug-edge-width);
    border-left-color: var(--drug-edge-glow);
    color: white;
    box-shadow: var(--drug-edge-inset), var(--shadow-md), 0 0 0 3px var(--active-light);
}

/* Hover states - tint background with drug color */
@media (any-hover: hover) {
    .select-btn[data-drug="Methotrexate"]:not(.selected):hover {
        background: var(--drug-mtx-light);
        border-left-color: var(--drug-mtx);
    }
    .select-btn[data-drug="Sulfasalazine"]:not(.selected):hover {
        background: var(--drug-ssz-light);
        border-left-color: var(--drug-ssz);
    }
    .select-btn[data-drug="Azathioprine"]:not(.selected):hover {
        background: var(--drug-aza-light);
        border-left-color: var(--drug-aza);
    }
    .select-btn[data-drug="Leflunomide"]:not(.selected):hover {
        background: var(--drug-lef-light);
        border-left-color: var(--drug-lef);
    }
    .select-btn[data-drug="Nintedanib"]:not(.selected):hover {
        background: var(--drug-lef-light);
        border-left-color: var(--drug-lef);
    }
    .select-btn[data-drug="Mycophenolate"]:not(.selected):hover {
        background: var(--drug-mmf-light);
        border-left-color: var(--drug-mmf);
    }
    .select-btn[data-drug="Ciclosporin"]:not(.selected):hover {
        background: var(--drug-cic-light);
        border-left-color: var(--drug-cic);
    }
    .select-btn[data-drug="Tacrolimus"]:not(.selected):hover {
        background: var(--drug-tac-light);
        border-left-color: var(--drug-tac);
    }
    .select-btn[data-drug="Mercaptopurine"]:not(.selected):hover {
        background: var(--drug-6mp-light);
        border-left-color: var(--drug-6mp);
    }
    .select-btn[data-drug="Voclosporin"]:not(.selected):hover {
        background: var(--drug-vcs-light);
        border-left-color: var(--drug-vcs);
    }
}

/* === STEP BADGES === */
/* Numbered progression indicators next to section labels */

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    margin-right: 0.5rem;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

/* Step badge completed state - adopts drug color */
.dmard-card[data-active-drug="Methotrexate"] .step-badge--medication {
    background: var(--drug-mtx);
    color: white;
    box-shadow: 0 0 8px var(--drug-mtx-glow);
}
.dmard-card[data-active-drug="Sulfasalazine"] .step-badge--medication {
    background: var(--drug-ssz);
    color: white;
    box-shadow: 0 0 8px var(--drug-ssz-glow);
}
.dmard-card[data-active-drug="Azathioprine"] .step-badge--medication {
    background: var(--drug-aza);
    color: white;
    box-shadow: 0 0 8px var(--drug-aza-glow);
}
.dmard-card[data-active-drug="Leflunomide"] .step-badge--medication {
    background: var(--drug-lef);
    color: white;
    box-shadow: 0 0 8px var(--drug-lef-glow);
}
.dmard-card[data-active-drug="Mycophenolate"] .step-badge--medication {
    background: var(--drug-mmf);
    color: white;
    box-shadow: 0 0 8px var(--drug-mmf-glow);
}
.dmard-card[data-active-drug="Ciclosporin"] .step-badge--medication {
    background: var(--drug-cic);
    color: white;
    box-shadow: 0 0 8px var(--drug-cic-glow);
}
.dmard-card[data-active-drug="Tacrolimus"] .step-badge--medication {
    background: var(--drug-tac);
    color: white;
    box-shadow: 0 0 8px var(--drug-tac-glow);
}
.dmard-card[data-active-drug="Mercaptopurine"] .step-badge--medication {
    background: var(--drug-6mp);
    color: white;
    box-shadow: 0 0 8px var(--drug-6mp-glow);
}
.dmard-card[data-active-drug="Voclosporin"] .step-badge--medication {
    background: var(--drug-vcs);
    color: white;
    box-shadow: 0 0 8px var(--drug-vcs-glow);
}

/* Step 2 badge: subtle "selected but waiting" state when no drug yet */
.dmard-card[data-active-schedule]:not([data-active-drug]) .step-badge--schedule,
.dmard-card[data-active-frequency]:not([data-active-drug]) .step-badge--schedule {
    border-color: var(--border-medium);
    background: var(--surface-secondary);
}

/* Step 2 badge active - requires BOTH drug and (schedule OR frequency) for color bloom */
.dmard-card[data-active-drug][data-active-schedule] .step-badge--schedule,
.dmard-card[data-active-drug][data-active-frequency] .step-badge--schedule {
    background: var(--active-color);
    color: white;
    box-shadow: 0 0 8px var(--active-glow);
}


/* === SCHEDULE INFO TOOLTIP === */
/* Info button and tooltip for schedule guidance */

.schedule-info-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
    vertical-align: middle;
    overflow: visible;
}

/* Ensure parent elements don't clip tooltip */
.dmard-desktop-section-label,
.dmard-mobile-section-label {
    overflow: visible;
}

.dmard-card {
    overflow: visible;
}

/* Schedule hint - inline text button with superscript ? */
.schedule-hint {
    display: inline;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    position: relative;
}

/* Extended touch target via pseudo-element */
.schedule-hint::before {
    content: '';
    position: absolute;
    inset: -12px -8px;
}

/* Superscript ? styling */
.schedule-hint sup {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.75;
    margin-left: 2px;
    transition: color 150ms ease, opacity 150ms ease;
}

/* Dark mode: slightly more muted */
[data-theme="dark"] .schedule-hint sup {
    opacity: 0.55;
}

/* Hover - highlight the ? */
@media (any-hover: hover) {
    .schedule-hint:hover sup {
        opacity: 1;
        color: var(--active-color);
    }
}

/* Active/tap state */
.schedule-hint:active sup {
    opacity: 1;
    color: var(--active-color);
}

.schedule-info-tooltip {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    transform: translateY(-4px);
    width: 320px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 400;
    color: var(--text-secondary);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease-out,
                transform var(--duration-fast) ease-out,
                visibility var(--duration-fast);
}

/* Arrow */
.schedule-info-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 10px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--border-color);
}

.schedule-info-tooltip::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 11px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--bg-elevated);
}

.schedule-info-tooltip > span {
    display: block;
    margin: 0;
}

.schedule-info-tooltip > span + span {
    margin-top: 0.5rem;
}

.schedule-info-tooltip strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Desktop: hover to show (only on devices with true hover support) */
@media (hover: hover) {
    .schedule-info-wrapper:hover .schedule-info-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Mobile: tap to show (controlled by JS) */
@media (max-width: 600px) {
    .schedule-info-tooltip {
        position: fixed;
        top: auto;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, 50%) scale(0.95);
        width: calc(100vw - 2rem);
        max-width: 320px;
        font-size: 0.875rem;          /* 14px - accessible minimum */
        padding: 1rem;
    }

    .schedule-info-tooltip::before,
    .schedule-info-tooltip::after {
        display: none;
    }

    .schedule-info-tooltip.visible {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 50%) scale(1);
        pointer-events: auto;
    }
}

/* === ESTABLISHED MODE TOOLTIP - RISK TIERS === */
/* Timeline progression display for monitoring frequencies */

.schedule-info-tooltip .risk-tier {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-color);
}

.schedule-info-tooltip .risk-tier:first-child {
    padding-top: 0;
}

.schedule-info-tooltip .risk-tier:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.risk-tier__header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.risk-tier__label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

/* Risk level color accents */
.risk-tier--high .risk-tier__label {
    color: var(--error, #c53030);
}

.risk-tier--medium .risk-tier__label {
    color: var(--warning, #b7791f);
}

.risk-tier--low .risk-tier__label {
    color: var(--nhs-green, #007F3B);
}

.risk-tier__flow {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
}

.flow-arrow {
    color: var(--text-tertiary, var(--text-muted));
    margin: 0 0.125rem;
    font-weight: 400;
}

.flow-note {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
    font-style: italic;
}

.risk-tier__criteria {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.risk-tier__timing {
    font-size: 0.6875rem;
    color: var(--text-tertiary, var(--text-muted));
    margin: 0.25rem 0 0;
    font-style: italic;
}

/* Wider tooltip for established mode content */
.schedule-info-tooltip:has(.risk-tier) {
    width: 340px;
}

@media (max-width: 600px) {
    .schedule-info-tooltip:has(.risk-tier) {
        max-width: 340px;
    }
}

/* === CARD BORDER COLOR TRANSITIONS === */
/* Card border adopts drug color when selected */

.clinician-mode .dmard-card {
    transition: border-top-color var(--transition-base);
}

.clinician-mode .dmard-card[data-active-drug="Methotrexate"] {
    border-top-color: var(--drug-mtx);
}
.clinician-mode .dmard-card[data-active-drug="Sulfasalazine"] {
    border-top-color: var(--drug-ssz);
}
.clinician-mode .dmard-card[data-active-drug="Azathioprine"] {
    border-top-color: var(--drug-aza);
}
.clinician-mode .dmard-card[data-active-drug="Leflunomide"],
.clinician-mode .dmard-card[data-active-drug="Nintedanib"] {
    border-top-color: var(--drug-lef);
}
.clinician-mode .dmard-card[data-active-drug="Mycophenolate"] {
    border-top-color: var(--drug-mmf);
}
.clinician-mode .dmard-card[data-active-drug="Ciclosporin"] {
    border-top-color: var(--drug-cic);
}
.clinician-mode .dmard-card[data-active-drug="Tacrolimus"] {
    border-top-color: var(--drug-tac);
}
.clinician-mode .dmard-card[data-active-drug="Mercaptopurine"] {
    border-top-color: var(--drug-6mp);
}
.clinician-mode .dmard-card[data-active-drug="Voclosporin"] {
    border-top-color: var(--drug-vcs);
}


/* === QR PANEL COLOR SYSTEM === */
/* QR code itself takes drug color; panel stays neutral for cleaner look */

.qr-output-panel {
    transition: box-shadow var(--transition-base);
}

/* QR Container glow in drug color */
.qr-output-panel.qr-ready[data-active-drug="Methotrexate"] #dmard-qr-container {
    box-shadow: var(--shadow-sm), 0 0 20px var(--drug-mtx-glow);
}
.qr-output-panel.qr-ready[data-active-drug="Sulfasalazine"] #dmard-qr-container {
    box-shadow: var(--shadow-sm), 0 0 20px var(--drug-ssz-glow);
}
.qr-output-panel.qr-ready[data-active-drug="Azathioprine"] #dmard-qr-container {
    box-shadow: var(--shadow-sm), 0 0 20px var(--drug-aza-glow);
}
.qr-output-panel.qr-ready[data-active-drug="Leflunomide"] #dmard-qr-container,
.qr-output-panel.qr-ready[data-active-drug="Nintedanib"] #dmard-qr-container {
    box-shadow: var(--shadow-sm), 0 0 20px var(--drug-lef-glow);
}
.qr-output-panel.qr-ready[data-active-drug="Mycophenolate"] #dmard-qr-container {
    box-shadow: var(--shadow-sm), 0 0 20px var(--drug-mmf-glow);
}
.qr-output-panel.qr-ready[data-active-drug="Ciclosporin"] #dmard-qr-container {
    box-shadow: var(--shadow-sm), 0 0 20px var(--drug-cic-glow);
}
.qr-output-panel.qr-ready[data-active-drug="Tacrolimus"] #dmard-qr-container {
    box-shadow: var(--shadow-sm), 0 0 20px var(--drug-tac-glow);
}
.qr-output-panel.qr-ready[data-active-drug="Mercaptopurine"] #dmard-qr-container {
    box-shadow: var(--shadow-sm), 0 0 20px var(--drug-6mp-glow);
}
.qr-output-panel.qr-ready[data-active-drug="Voclosporin"] #dmard-qr-container {
    box-shadow: var(--shadow-sm), 0 0 20px var(--drug-vcs-glow);
}

/* Celebratory QR reveal animation */
@keyframes qrRevealCelebrate {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    60% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.qr-output-panel.qr-ready #dmard-qr-container {
    animation: qrRevealCelebrate 350ms var(--ease-out-back);
}


/* === MOBILE QR COLOR SYSTEM === */
@media (max-width: 600px) {
    /* Mobile QR container glow */
    .dmard-mobile-card.qr-ready[data-active-drug="Methotrexate"] #dmard-qr-container {
        box-shadow: var(--shadow-sm), 0 0 16px var(--drug-mtx-glow);
        animation: qrRevealCelebrate 350ms var(--ease-out-back);
    }
    .dmard-mobile-card.qr-ready[data-active-drug="Sulfasalazine"] #dmard-qr-container {
        box-shadow: var(--shadow-sm), 0 0 16px var(--drug-ssz-glow);
        animation: qrRevealCelebrate 350ms var(--ease-out-back);
    }
    .dmard-mobile-card.qr-ready[data-active-drug="Azathioprine"] #dmard-qr-container {
        box-shadow: var(--shadow-sm), 0 0 16px var(--drug-aza-glow);
        animation: qrRevealCelebrate 350ms var(--ease-out-back);
    }
    .dmard-mobile-card.qr-ready[data-active-drug="Leflunomide"] #dmard-qr-container,
    .dmard-mobile-card.qr-ready[data-active-drug="Nintedanib"] #dmard-qr-container {
        box-shadow: var(--shadow-sm), 0 0 16px var(--drug-lef-glow);
        animation: qrRevealCelebrate 350ms var(--ease-out-back);
    }
    .dmard-mobile-card.qr-ready[data-active-drug="Mycophenolate"] #dmard-qr-container {
        box-shadow: var(--shadow-sm), 0 0 16px var(--drug-mmf-glow);
        animation: qrRevealCelebrate 350ms var(--ease-out-back);
    }
    .dmard-mobile-card.qr-ready[data-active-drug="Ciclosporin"] #dmard-qr-container {
        box-shadow: var(--shadow-sm), 0 0 16px var(--drug-cic-glow);
        animation: qrRevealCelebrate 350ms var(--ease-out-back);
    }
    .dmard-mobile-card.qr-ready[data-active-drug="Tacrolimus"] #dmard-qr-container {
        box-shadow: var(--shadow-sm), 0 0 16px var(--drug-tac-glow);
        animation: qrRevealCelebrate 350ms var(--ease-out-back);
    }
    .dmard-mobile-card.qr-ready[data-active-drug="Mercaptopurine"] #dmard-qr-container {
        box-shadow: var(--shadow-sm), 0 0 16px var(--drug-6mp-glow);
        animation: qrRevealCelebrate 350ms var(--ease-out-back);
    }
    .dmard-mobile-card.qr-ready[data-active-drug="Voclosporin"] #dmard-qr-container {
        box-shadow: var(--shadow-sm), 0 0 16px var(--drug-vcs-glow);
        animation: qrRevealCelebrate 350ms var(--ease-out-back);
    }

    /* Mobile tap depression - needs ID specificity to override animation */
    .dmard-mobile-card #dmard-qr-container:active,
    .dmard-mobile-card #dmard-qr-container.pressing {
        transform: scale(0.97);
        animation: none;
    }
}


/* === MOBILE DRUG COLOR DOTS === */
@media (max-width: 600px) {
    /* Color indicator dot above each abbreviation */
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn {
        position: relative;
        padding-top: 1.125rem; /* Make room for dot */
    }

    .clinician-mode .btn-grid.medications.mobile-compact .select-btn::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        opacity: 0.7;
        transition:
            opacity var(--transition-fast),
            transform var(--transition-fast),
            box-shadow var(--transition-fast);
    }

    /* Drug-specific dot colors */
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn[data-drug="Methotrexate"]::before {
        background: var(--drug-mtx);
    }
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn[data-drug="Sulfasalazine"]::before {
        background: var(--drug-ssz);
    }
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn[data-drug="Azathioprine"]::before {
        background: var(--drug-aza);
    }
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn[data-drug="Leflunomide"]::before {
        background: var(--drug-lef);
    }
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn[data-drug="Mycophenolate"]::before {
        background: var(--drug-mmf);
    }
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn[data-drug="Ciclosporin"]::before {
        background: var(--drug-cic);
    }
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn[data-drug="Tacrolimus"]::before {
        background: var(--drug-tac);
    }
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn[data-drug="Mercaptopurine"]::before {
        background: var(--drug-6mp);
    }
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn[data-drug="Voclosporin"]::before {
        background: var(--drug-vcs);
    }

    /* Selected state - larger, glowing dot with drug color */
    /* Uses --active-* variables from body[data-active-drug] */
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn.selected::before {
        display: block;
        opacity: 1;
        transform: translateX(-50%) scale(1.4);
        background: white;
        box-shadow: 0 0 8px var(--active-color);
    }

    /* Override base mobile selected styles with drug colors */
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn[data-drug].selected {
        background: var(--active-color);
        box-shadow: 0 0 0 2px var(--active-light), var(--shadow-sm);
    }

    /* === MOBILE VISUAL HIERARCHY === */
    /* Unselected drug pills recede when one is selected */
    .clinician-mode .dmard-mobile-card[data-active-drug] .btn-grid.medications.mobile-compact .select-btn:not(.selected) {
        opacity: 0.5;
        transform: scale(0.96);
    }

    .clinician-mode .dmard-mobile-card[data-active-drug] .btn-grid.medications.mobile-compact .select-btn:not(.selected):active {
        opacity: 0.8;
        transform: scale(0.98);
    }

    /* Selected drug pill - prominent */
    .clinician-mode .dmard-mobile-card[data-active-drug] .btn-grid.medications.mobile-compact .select-btn.selected {
        transform: scale(1.02);
    }

    /* Unselected schedule/frequency buttons recede on mobile */
    .dmard-mobile-card[data-active-schedule] .select-btn[data-schedule]:not(.selected),
    .dmard-mobile-card[data-active-frequency] .select-btn[data-frequency]:not(.selected) {
        opacity: 0.5;
        transform: scale(0.96);
    }

    .dmard-mobile-card[data-active-schedule] .select-btn[data-schedule].selected,
    .dmard-mobile-card[data-active-frequency] .select-btn[data-frequency].selected {
        transform: scale(1.02);
    }
}


/* ===========================================
   MODE TOGGLE - Lightweight Inline Text Style
   Inline toggle for switching between induction and maintenance schedules
   =========================================== */

.mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.mode-toggle button {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem 0;
    position: relative;
    transition: color 0.2s ease;
}

.mode-toggle button:hover {
    color: var(--text-primary);
}

.mode-toggle button.active {
    color: var(--text-primary);
    font-weight: 600;
}

.mode-toggle button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--active-color, var(--accent));
    border-radius: 1px;
}

.mode-separator {
    color: var(--text-muted);
    font-size: 0.75rem;
    user-select: none;
    opacity: 0.5;
}


/* ===========================================
   MODE CONTENT PANELS
   Show/hide content based on mode selection
   =========================================== */

.mode-content {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.mode-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    height: auto;
    overflow: visible;
    visibility: visible;
    padding-top: 4px;
    margin-top: -4px;
}


/* ===========================================
   FREQUENCY GRID (Established Mode)
   3-column grid for frequency + duration toggle
   =========================================== */

/* 3-column frequency grid */
.btn-grid.frequency-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 0.5rem;
}

/* Frequency button - simple label only */
.frequency-btn {
    min-height: 48px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.9375rem;
}

/* Duration row: centered inline phrase */
.duration-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
}

/* Duration options container - centered with unit suffix */
.duration-options {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* "for" prefix and "months" suffix */
.duration-prefix,
.duration-unit {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
}

.duration-prefix {
    margin-right: 0.375rem;
}

.duration-unit {
    margin-left: 0.25rem;
}

/* Duration button - lightweight text style with underline */
.duration-btn {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.375rem 0.625rem;
    position: relative;
    transition: color 0.2s ease;
}

.duration-btn:hover {
    color: var(--text-primary);
}

.duration-btn.selected {
    color: var(--text-primary);
    font-weight: 700;
}

.duration-btn.selected::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background: var(--active-color, var(--accent));
    border-radius: 1px;
}

.duration-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

.duration-separator {
    color: var(--text-muted);
    font-size: 0.75rem;
    user-select: none;
    opacity: 0.4;
}

/* Entire duration row disabled until frequency selected */
.duration-row.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Frequency button hover - use drug color when available */
[data-page="dmard"] .dmard-card:not([data-active-drug]) .select-btn[data-frequency]:hover {
    background: var(--surface-tertiary);
    border-color: var(--border-medium);
}

[data-page="dmard"] .dmard-card[data-active-drug] .select-btn[data-frequency]:hover {
    background: var(--active-light);
    border-color: var(--active-color);
}

/* Frequency button selected - neutral "pressed" state when no drug yet */
[data-page="dmard"] .dmard-card:not([data-active-drug]) .select-btn[data-frequency].selected {
    background: var(--surface-tertiary);
    border-color: var(--text-muted);
    border-width: 2px;
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), var(--shadow-sm);
}

/* Frequency button selected - drug color when both selected */
[data-page="dmard"] .dmard-card[data-active-drug] .select-btn[data-frequency].selected {
    background: var(--active-color);
    border-color: var(--active-dark);
    color: white;
    box-shadow: var(--shadow-md), 0 0 0 3px var(--active-light);
}

/* Mobile frequency grid adjustments */
@media (max-width: 600px) {
    .btn-grid.frequency-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .clinician-mode .frequency-btn {
        padding: 0.5rem 0.375rem;
        min-height: 44px;
        font-size: 0.8125rem;
    }

    .duration-row {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
    }

    .duration-btn {
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem;
    }

    .duration-prefix,
    .duration-unit {
        font-size: 0.875rem;
    }
}


/* ===========================================
   PROGRESSIVE DISCLOSURE
   Schedule section hidden/disabled until drug selected
   =========================================== */

/* === DESKTOP: Grey out schedule section until drug selected === */
@media (min-width: 901px) {
    /* Schedule section (label + content) - greyed out initially */
    .clinician-mode .dmard-card:not([data-active-drug]) .dmard-desktop-section-label:nth-of-type(2),
    .clinician-mode .dmard-card:not([data-active-drug]) .mode-content {
        opacity: 0.4;
        pointer-events: none;
        transition: opacity 0.3s ease-out;
    }

    /* Enable when drug selected */
    .clinician-mode .dmard-card[data-active-drug] .dmard-desktop-section-label:nth-of-type(2),
    .clinician-mode .dmard-card[data-active-drug] .mode-content.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Divider also fades */
    .clinician-mode .dmard-card:not([data-active-drug]) .dmard-desktop-divider {
        opacity: 0.3;
        transition: opacity 0.3s ease-out;
    }

    .clinician-mode .dmard-card[data-active-drug] .dmard-desktop-divider {
        opacity: 1;
    }
}

/* === MOBILE: Hide schedule section until drug selected === */
@media (max-width: 600px) {
    /* Schedule section label - hidden initially */
    .dmard-mobile-card:not([data-active-drug]) .dmard-mobile-section-label:nth-of-type(2) {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin: 0;
        transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.1s ease-out,
                    margin 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Schedule content panels - hidden initially */
    .dmard-mobile-card:not([data-active-drug]) .mode-content {
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden;
        transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.1s ease-out,
                    margin 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                    padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Reveal section label when drug selected */
    .dmard-mobile-card[data-active-drug] .dmard-mobile-section-label:nth-of-type(2) {
        max-height: 50px;
        opacity: 1;
        overflow: visible;
        margin-top: 1.25rem;
        margin-bottom: 0.75rem;
    }

    /* Reveal active content panel when drug selected */
    .dmard-mobile-card[data-active-drug] .mode-content.active {
        max-height: 300px !important;
        opacity: 1 !important;
        overflow: visible !important;
        visibility: visible;
        padding-top: 4px !important;
        margin-top: -4px !important;
    }
}


/* === RESPECT REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .qr-placeholder,
    .qr-placeholder-icon,
    .qr-placeholder-mobile,
    .qr-placeholder-mobile .qr-placeholder-icon,
    .select-btn.just-selected,
    .qr-output-panel.qr-ready #dmard-qr-container,
    .dmard-mobile-card.qr-ready #dmard-qr-container {
        animation: none !important;
    }

    /* Remove glows in reduced motion */
    .qr-output-panel.qr-ready[data-active-drug] #dmard-qr-container,
    .dmard-mobile-card.qr-ready[data-active-drug] #dmard-qr-container {
        box-shadow: var(--shadow-sm) !important;
    }

    .step-badge,
    .clinician-mode .btn-grid.medications.mobile-compact .select-btn::before {
        transition: none !important;
        box-shadow: none !important;
    }

    /* Mode content - no fade/rise animation */
    .mode-content {
        transition: none !important;
        transform: none !important;
    }

    /* Progressive disclosure - instant show/hide */
    .dmard-mobile-card:not([data-active-drug]) .dmard-mobile-section-label:nth-of-type(2),
    .dmard-mobile-card:not([data-active-drug]) .mode-content {
        transition: none !important;
    }

    .clinician-mode .dmard-card:not([data-active-drug]) .dmard-desktop-section-label:nth-of-type(2),
    .clinician-mode .dmard-card:not([data-active-drug]) .mode-content,
    .clinician-mode .dmard-card:not([data-active-drug]) .dmard-desktop-divider {
        transition: none !important;
    }

    /* Visual hierarchy - no scale/opacity animations */
    .clinician-mode .dmard-card[data-active-drug] .btn-grid.medications .select-btn,
    .dmard-card[data-active-schedule] .select-btn[data-schedule],
    .dmard-card[data-active-frequency] .select-btn[data-frequency],
    .dmard-mobile-card[data-active-drug] .btn-grid.medications.mobile-compact .select-btn {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}