/* ===========================================
   PREDNISOLONE.CSS - Prednisolone Calculator
   ===========================================
   
   TABLE OF CONTENTS
   -----------------
   1. Variables
   2. Prednisolone Micro-Animations
   3. Desktop Layout
   4. Typography
   5. Form Elements
   6. Preset Buttons
   7. Hospital Selection
   8. Phase Rows
   9. Buttons
   10. Card Header with Action
   11. Live Preview Panel
   12. QR Output
   13. Patient View - Schedule Table
   14. Patient View - Steroid Card
   15. Patient View - Sick Day Rules
   16. Patient View - HCP Info
   17. Patient View - Contact & Safety
   18. Validation Errors
   19. Print Styles
   20. Patient Preview Drawer (Desktop)
   21. QR Actions Redesign
   22. Sticky Panel Reset Link
   23. Mobile/Desktop Button Text & Icon Toggle
   
   =========================================== */

   :root {
       --pred-alt-day: #78716C;
       --pred-alt-day-bg: rgba(107, 114, 128, 0.08);
   }

/* -------------------------------------------
   PREDNISOLONE MICRO-ANIMATIONS
   ------------------------------------------- */

/* 1. Live Preview Empty State Breathing */
.live-preview-empty {
    animation: breathe var(--duration-breathing) ease-in-out infinite;
}

/* 2. Phase Row Entrance Animation */
.phase-row.animate-in {
    animation: fadeSlideIn var(--duration-drawer) var(--ease-out-expo) both;
}

/* 3. Inline Preview Ticker - left-to-right reveal */
.phase-inline-preview.visible {
    animation: revealLeft var(--duration-bounce) var(--ease-out-expo) both;
}

/* 4. Live Preview Table Row Stagger */
.live-preview-scroll.animate-rows .live-preview-table tbody tr {
    animation: rowFadeIn var(--duration-drawer) var(--ease-out-expo) both;
}

/* Staggered 30ms delays create a smooth visual cascade - intentional for table row entrance */
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(2) { animation-delay: 30ms; }
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(3) { animation-delay: 60ms; }
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(4) { animation-delay: 90ms; }
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(5) { animation-delay: 120ms; }
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(6) { animation-delay: 150ms; }
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(7) { animation-delay: 180ms; }
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(8) { animation-delay: 210ms; }
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(9) { animation-delay: 240ms; }
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(10) { animation-delay: 270ms; }
.live-preview-scroll.animate-rows .live-preview-table tbody tr:nth-child(n+11) { animation-delay: 300ms; }

/* 6. Preset Selection Cascade - staggered phase entrance */
.phase-row.animate-cascade:nth-of-type(1) { animation-delay: 0ms; }
.phase-row.animate-cascade:nth-of-type(2) { animation-delay: 80ms; }
.phase-row.animate-cascade:nth-of-type(3) { animation-delay: 160ms; }
.phase-row.animate-cascade:nth-of-type(4) { animation-delay: 240ms; }
.phase-row.animate-cascade:nth-of-type(5) { animation-delay: 320ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .live-preview-empty,
    .phase-row.animate-in,
    .phase-row.animate-cascade,
    .phase-inline-preview.visible,
    .live-preview-scroll.animate-rows .live-preview-table tbody tr {
        animation: none;
    }
}

/* -------------------------------------------
   DESKTOP LAYOUT
   ------------------------------------------- */
@media (min-width: 900px) {
    [data-page="prednisolone"] .page-content {
        max-width: var(--layout-medium);
    }

    .clinician-grid {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 1.25rem;
        align-items: start;
    }
    
    .input-column {
        min-width: 0;
    }
    
    .sticky-panel {
        position: sticky;
        top: var(--header-height);       /* Must clear fixed header overlay */
        align-self: start;
        max-height: calc(100vh - 6.5rem);
        overflow: hidden;
    }
    
    .clinician-grid .card {
        padding: 1rem;
    }
    
    .clinician-grid .card-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }
}

@media (max-width: 899px) {
    .sticky-panel {
        margin-top: 1.5rem;
    }

    .clinician-grid .card-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }
}

.clinician-grid .input-column > .card:first-child {
    border-top: 3px solid var(--theme-primary);
}

/* -------------------------------------------
   TYPOGRAPHY
   ------------------------------------------- */
.phase-label {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--theme-primary);
}

.phase-inputs {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.phase-inputs input {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    font-variant-numeric: tabular-nums;
}

.schedule-table th {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
}

.schedule-table .date-cell {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
}

.schedule-table .dose-cell {
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
}

.schedule-table .tablets-cell {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.steroid-card-header h2 {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--text-on-theme);
}

.steroid-card-body {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.steroid-card-footer {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
}

.sick-day-rules h3 {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
}

.sick-day-rules p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.sick-day-rules li {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.sick-day-rules .warning-box {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
}

/* -------------------------------------------
   FORM ELEMENTS
   ------------------------------------------- */
.form-row {
    margin-bottom: 1.25rem;
}

#pred-starting-dose-row {
    scroll-margin-top: calc(var(--header-height-mobile) + env(safe-area-inset-top, 0px) + 0.5rem);
}

.form-row > label {
    display: block;
    font-size: 0.875rem; /* WCAG AAA: was 0.75rem (12px), now 14px for uppercase text */
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

.dose-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dose-group span {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

input[type="number"],
input[type="date"],
select {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 
        var(--shadow-inset),
        0 0 0 1px var(--border-color);
    transition: 
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

/* Amber-tinted inputs for prednisolone page */
[data-page="prednisolone"] input[type="number"],
[data-page="prednisolone"] input[type="date"] {
    background: #FFFBF7;
    box-shadow: 
        inset 0 1px 2px rgba(181, 71, 8, 0.04),
        0 0 0 1px rgba(181, 71, 8, 0.18);
}

@media (any-hover: hover) {
    [data-page="prednisolone"] input[type="number"]:hover,
    [data-page="prednisolone"] input[type="date"]:hover {
        background: #FFF8F2;
        box-shadow: 
            inset 0 1px 2px rgba(181, 71, 8, 0.06),
            0 0 0 1px rgba(181, 71, 8, 0.25);
    }
}

[data-page="prednisolone"] input[type="number"]:focus,
[data-page="prednisolone"] input[type="date"]:focus {
    outline: none;
    background: #FFFDFB;
    box-shadow: 
        inset 0 1px 2px rgba(181, 71, 8, 0.03),
        0 0 0 2px var(--steroid-amber);
}

/* Dark mode amber inputs */
[data-theme="dark"][data-page="prednisolone"] input[type="number"],
[data-theme="dark"][data-page="prednisolone"] input[type="date"] {
    background: var(--bg-primary);
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(247, 144, 9, 0.3);
}

@media (any-hover: hover) {
    [data-theme="dark"][data-page="prednisolone"] input[type="number"]:hover,
    [data-theme="dark"][data-page="prednisolone"] input[type="date"]:hover {
        background: #1E2428;
        box-shadow: 
            inset 0 1px 3px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(247, 144, 9, 0.4);
    }
}

[data-theme="dark"][data-page="prednisolone"] input[type="number"]:focus,
[data-theme="dark"][data-page="prednisolone"] input[type="date"]:focus {
    background: #1E2428;
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.15),
        0 0 0 2px var(--steroid-amber);
}

/* Generic input hover/focus (non-prednisolone pages) */
@media (any-hover: hover) {
    input[type="number"]:hover,
    input[type="date"]:hover,
    select:hover {
        background: var(--bg-secondary);
    }
}

input[type="number"]:focus,
input[type="date"]:focus,
select:focus {
    outline: none;
    background: var(--bg-secondary);
    box-shadow: 
        inset 0 1px 2px rgba(33, 43, 50, 0.05),
        0 0 0 2px var(--theme-primary);
}

input[type="number"] {
    width: 70px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="date"] {
    width: 150px;
    text-align: center;
}

/* Center date text in Chrome/WebKit date picker */
input[type="date"]::-webkit-datetime-edit {
    text-align: center;
    width: 100%;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    justify-content: center;
}

select {
    min-width: 100px;
    cursor: pointer;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234C6272' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    -webkit-appearance: none;
    appearance: none;
}

[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23B8C4CB' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px) {
    #page-prednisolone input[type="number"],
    #page-prednisolone input[type="date"] {
        font-size: 16px;
    }
}

/* -------------------------------------------
   PRESET BUTTONS (Pill Style)
   ------------------------------------------- */
.preset-row {
    margin-bottom: 1.25rem;
}

.preset-row label {
    display: block;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.875rem; /* WCAG AAA: was 0.75rem (12px), now 14px for uppercase text */
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.preset-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.preset-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.875rem;  /* Was 0.4rem 0.75rem - more generous */
    border: none;
    border-radius: var(--radius-pill);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.875rem;  /* Was 0.8125rem - increased for readability */
    font-weight: 600;
    cursor: pointer;
    transition: 
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
    box-shadow: inset 0 0 0 1px var(--border-color);
    white-space: nowrap;
}

@media (any-hover: hover) {
    .preset-pill:hover {
        background: var(--theme-light);
        color: var(--theme-primary);
        box-shadow: inset 0 0 0 1px var(--theme-border);
    }
}

.preset-pill.selected {
    background: var(--theme-primary);
    color: var(--text-on-theme);
    box-shadow: 0 2px 8px rgba(181, 71, 8, 0.3);
}

[data-theme="dark"] .preset-pill {
    background: var(--bg-primary);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--border-color);
}

@media (any-hover: hover) {
    [data-theme="dark"] .preset-pill:hover {
        background: var(--theme-light);
        color: var(--theme-border);
        box-shadow: inset 0 0 0 1px var(--theme-border);
    }
}

[data-theme="dark"] .preset-pill.selected {
    background: var(--theme-primary);
    color: var(--text-on-theme);
}

/* -------------------------------------------
   PHASE ROWS
   ------------------------------------------- */
.phase-row {
    background: rgba(181, 71, 8, 0.04);
    border: none;
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 0.625rem;
    scroll-margin-top: calc(var(--header-height-mobile) + env(safe-area-inset-top, 0px) + 0.5rem);
    box-shadow: inset 0 0 0 1px rgba(181, 71, 8, 0.12);
    transition: box-shadow var(--transition-fast);
}

[data-theme="dark"] .phase-row {
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-color);
}

.phase-row:focus-within {
    box-shadow: inset 0 0 0 2px var(--theme-primary);
}

.phase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.phase-inputs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Desktop: inline sentence flow using display:contents */
.phase-field {
    display: contents;
}

.field-value {
    display: contents;
}

.field-label {
    /* Inline text on desktop */
}

.field-unit {
    /* Inline text on desktop */
}

/* Desktop: bullet separators between field groups */
@media (min-width: 769px) {
    .phase-field + .phase-field::before {
        content: "•";
        margin: 0 0.35rem;
        color: var(--text-muted);
    }
}

.phase-inputs input {
    font-size: 0.875rem;
    padding: 0.35rem 0.5rem;
    background: var(--bg-elevated);
}

.phase-inputs input[type="number"] {
    width: 46px;
}

/* Mobile: compact three-column grid */
@media (max-width: 768px) {
    .phase-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
        line-height: 1.4;
    }

    .phase-field {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .field-label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        margin-left: 0.25rem;
    }

    .field-value {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .field-unit {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .phase-inputs input[type="number"] {
        width: 52px;
    }
}

/* Light mode: white inputs inside phase rows (container provides amber distinction) */
.phase-row input[type="number"] {
    background: var(--bg-elevated);
    box-shadow:
        var(--shadow-inset),
        0 0 0 1px var(--border-color);
}

@media (any-hover: hover) {
    .phase-row input[type="number"]:hover {
        background: var(--bg-surface);
        box-shadow:
            var(--shadow-inset),
            0 0 0 1px var(--text-muted);
    }
}

.phase-row input[type="number"]:focus {
    background: var(--bg-elevated);
    box-shadow:
        var(--shadow-inset),
        0 0 0 2px var(--theme-primary);
}

.remove-phase {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: 
        color var(--transition-fast),
        background var(--transition-fast);
}

@media (any-hover: hover) {
    .remove-phase:hover {
        color: var(--nhs-red);
        background: rgba(218, 41, 28, 0.1);
    }
}

/* Phase Alternate Day Options */
.phase-alt-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--theme-border);
    flex-wrap: wrap;
}

.phase-alt-row label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem; /* WCAG AAA: was 0.85rem, now 14px */
    color: var(--text-secondary);
    cursor: pointer;
}

.phase-alt-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--theme-primary);
    cursor: pointer;
}

.phase-alt-options {
    display: none;
    align-items: center;
    gap: 0.35rem;
}

.phase-alt-options.visible {
    display: flex;
}

.phase-alt-options span {
    font-size: 0.875rem; /* WCAG AAA: was 0.85rem, now 14px */
    color: var(--text-secondary);
}

.phase-alt-options input[type="number"] {
    width: 45px;
    font-size: 0.875rem; /* WCAG AAA: was 0.85rem, now 14px */
    padding: 0.25rem 0.4rem;
}

/* Phase Inline Preview */
.phase-inline-preview {
    display: none;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem; /* WCAG AAA: was 0.75rem (12px), now 14px */
    color: var(--text-secondary);
    font-family: monospace;
    overflow-x: auto;
    white-space: nowrap;
}

.phase-inline-preview.visible {
    display: block;
}

.phase-inline-preview .alt-step {
    color: var(--pred-alt-day);
    font-weight: 600;
}

.phase-inline-preview .arrow {
    color: var(--text-muted);
    margin: 0 0.25rem;
}

/* -------------------------------------------
   BUTTONS
   ------------------------------------------- */
.btn {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--duration-base) ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--theme-primary);
    color: var(--text-on-theme);
}

@media (any-hover: hover) {
    .btn-primary:hover {
        filter: brightness(1.1);
        box-shadow: var(--shadow-md);
    }
}

.btn-add {
    background: none;
    border: 2px dashed var(--border-color);
    color: var(--text-muted);
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.875rem;
    font-size: 0.85rem;
}

@media (any-hover: hover) {
    .btn-add:hover {
        border-color: var(--text-muted);
        color: var(--text-secondary);
    }
}

.btn-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* -------------------------------------------
   CARD HEADER WITH ACTION
   ------------------------------------------- */
.card-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.card-header-action {
    padding: 0.25rem 0.625rem;
    font-size: 0.813rem; /* WCAG AAA: was 0.75rem (12px), now 13px for interactive elements */
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

@media (any-hover: hover) {
    .card-header-action:hover {
        color: var(--nhs-red);
        background: rgba(218, 41, 28, 0.1);
    }
}

/* -------------------------------------------
   LIVE PREVIEW PANEL
   ------------------------------------------- */
.live-preview {
    text-align: left;
}

.live-preview-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.live-preview-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.live-preview-header .icon {
    width: 20px;
    height: 20px;
    color: var(--theme-primary);
}

.live-preview-header .qr-reset-icon-btn {
    margin-left: auto;
}

.live-preview-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

.live-preview-generate {
    width: 100%;
    margin-top: 0.75rem;
    border-radius: var(--radius-lg);
}

.live-preview-generate:disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
    border: 2px dashed var(--border-color);
}

.live-preview-scroll {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.live-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;  /* Was 0.85rem - increased to match other panels */
}

.live-preview-table th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    background: var(--bg-primary);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.875rem; /* WCAG AAA: was 0.75rem (12px), now 14px for uppercase text */
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
    z-index: 1;
}

.live-preview-table td {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-color);
}

.live-preview-table .date-cell {
    font-weight: 600;
    color: var(--text-secondary);
}

.live-preview-table .dose-cell {
    font-weight: 700;
    color: var(--theme-primary);
}

.live-preview-table .stop-row .dose-cell {
    color: var(--nhs-green);
}

.live-preview-table .alt-day-row .dose-cell {
    color: var(--pred-alt-day);
}

.live-preview-table .continue-row {
    background: var(--theme-light);
}

/* -------------------------------------------
   QR OUTPUT
   ------------------------------------------- */
.qr-output-card {
    text-align: center;
    position: relative;
}

/* Use opacity for smooth transitions instead of display */
.qr-output-card .live-preview {
    opacity: 1;
    transform: scale(1);
    transition: opacity var(--duration-drawer) ease-out, transform var(--duration-drawer) ease-out;
}

.qr-ready .live-preview {
    opacity: 0;
    transform: scale(0.95);
    position: absolute;
    pointer-events: none;
    width: 100%;
}

/* QR content: mobile uses display none/block to avoid rendering artifacts */
.pred-qr-content {
    display: none;
}

.qr-ready .pred-qr-content {
    display: block;
}

/* QR container pop animation on reveal */
@keyframes qrRevealCelebrate {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* === QR SCAN LABEL === */
.qr-scan-label {
    font-size: 0.875rem; /* WCAG AAA: was 0.75rem (12px), now 14px for uppercase text */
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem 0;
    text-align: center;
}

/* Desktop: use opacity/transform for smooth transitions */
@media (min-width: 900px) {
    .pred-qr-content {
        display: block;
        opacity: 0;
        transform: scale(0.95);
        position: absolute;
        pointer-events: none;
        transition: opacity var(--duration-drawer) ease-out, transform var(--duration-drawer) ease-out;
        width: 100%;
    }

    .qr-ready .pred-qr-content {
        opacity: 1;
        transform: scale(1);
        position: relative;
        pointer-events: auto;
    }
}

/* Reset animation - QR content fades/scales out (desktop only) */
@media (min-width: 900px) {
    .qr-output-card.resetting .pred-qr-content {
        opacity: 0;
        transform: scale(0.9);
        transition: opacity var(--duration-base) ease-out, transform var(--duration-base) ease-out;
    }
}

/* After reset complete - live preview animates back in */
.qr-output-card.reset-complete .live-preview {
    animation: livePreviewReturn var(--duration-entrance) var(--ease-out-expo);
}

@keyframes livePreviewReturn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pred-qr-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 0.875rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 0.875rem;
    border: 1px solid var(--border-color);
    min-height: 228px; /* 200px QR + padding - prevents collapse on regeneration */
    min-width: 228px;
}

@media (min-width: 900px) {
    .pred-qr-container {
        min-height: 248px; /* 220px QR + padding for desktop */
        min-width: 248px;
    }
}



.copy-notes-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    border: 2px solid var(--border-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

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

.copy-notes-btn:active {
    border-color: var(--theme-primary);
    background: var(--theme-light);
}

.copy-notes-btn svg {
    width: 16px;
    height: 16px;
}

/* -------------------------------------------
   PATIENT VIEW - SCHEDULE TABLE
   ------------------------------------------- */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

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

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

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

.date-cell {
    font-weight: 600;
    white-space: nowrap;
}

.dose-cell {
    font-weight: 700;
    color: var(--theme-primary);
}

.tablets-cell {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stop-row {
    background: var(--nhs-green-light);
}

.stop-row .dose-cell {
    color: var(--nhs-green);
}

.continue-row {
    background: var(--theme-light);
}

.alt-day-row {
    background: var(--pred-alt-day-bg);
}

.alt-day-row .dose-cell {
    color: var(--pred-alt-day);
}

.print-btn-large {
    width: 100%;
    padding: 1rem;
    font-size: 1.05rem;
    margin-top: 1rem;
    background: var(--theme-primary);
    color: var(--text-on-theme);
    border-radius: var(--radius-lg);
}

.schedule-print-header {
    display: none;
}

/* -------------------------------------------
   PATIENT VIEW - STEROID CARD
   ------------------------------------------- */
.steroid-card {
    background: linear-gradient(135deg, var(--steroid-amber), var(--steroid-amber-dark));
    color: var(--text-on-theme);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.steroid-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.steroid-card-header .warning-icon {
    background: white;
    color: var(--steroid-amber);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.steroid-card-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.steroid-card-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-on-theme);
}

.steroid-card-body p {
    margin: 0 0 0.6rem;
}

.steroid-card-body p:last-child {
    margin-bottom: 0;
}

.steroid-card-footer {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.25);
    font-size: 0.8rem;
    opacity: 0.9;
}

.steroid-card-footer a {
    color: var(--text-on-theme);
    text-decoration: underline;
}

/* -------------------------------------------
   PATIENT VIEW - SICK DAY RULES
   ------------------------------------------- */
.sick-day-rules {
    background: #FEE4E2;
    border: 2px solid var(--nhs-red);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

[data-theme="dark"] .sick-day-rules {
    background: rgba(218, 41, 28, 0.15);
}

.sick-day-rules h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: var(--nhs-red);
    font-size: 1rem;
}

.sick-day-rules p {
    margin: 0 0 0.6rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.sick-day-rules ul {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.sick-day-rules li {
    margin-bottom: 0.4rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.sick-day-rules .warning-box {
    background: var(--nhs-red);
    color: var(--text-on-theme);
    padding: 0.6rem 0.875rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* -------------------------------------------
   PATIENT VIEW - HCP INFO
   ------------------------------------------- */
.hcp-info {
    margin-top: 1.25rem;
    background: var(--accent-info);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.hcp-info summary {
    padding: 0.875rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hcp-info summary::-webkit-details-marker {
    display: none;
}

.hcp-info summary::before {
    content: '\25B6';
    font-size: 0.75rem; /* WCAG AAA: was 0.7rem (11.2px), now 12px minimum */
    transition: transform var(--duration-base);
}

.hcp-info[open] summary::before {
    transform: rotate(90deg);
}

.hcp-info .hcp-content {
    padding: 0 1rem 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}

.hcp-info .hcp-content p {
    margin: 0.75rem 0;
}

.hcp-info .hcp-content ul {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.hcp-info .hcp-content li {
    margin-bottom: 0.3rem;
    color: var(--text-primary);
}

.hcp-info .hcp-link {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.hcp-info .hcp-link a {
    color: var(--theme-primary);
}

/* -------------------------------------------
   PATIENT VIEW - CONTACT & SAFETY
   ------------------------------------------- */
.btn-save-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

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

.btn-save-contact svg {
    width: 20px;
    height: 20px;
}

.two-col {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 700px) {
    .two-col {
        grid-template-columns: 1fr 1fr;
    }
}

.safety-info-section {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.safety-info-section .section-header {
    margin-bottom: 1rem;
}

.safety-info-section .section-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

[data-page="prednisolone"] .contact-card-section {
    margin-top: 0;
}

/* -------------------------------------------
   VALIDATION ERRORS
   ------------------------------------------- */
.validation-error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #FEF2F2;
    border: 2px solid #EF4444;
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    animation: shake var(--duration-entrance) ease-out;
}

[data-theme="dark"] .validation-error {
    background: rgba(239, 68, 68, 0.15);
}

.validation-error-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.validation-error-message {
    flex: 1;
    color: #991B1B;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.4;
}

[data-theme="dark"] .validation-error-message {
    color: #FCA5A5;
}

.validation-error-close {
    background: none;
    border: none;
    color: #991B1B;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
}

@media (any-hover: hover) {
    .validation-error-close:hover {
        opacity: 1;
    }
}

[data-theme="dark"] .validation-error-close {
    color: #FCA5A5;
}

.validation-highlight {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
    animation: pulse-error 1s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes pulse-error {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.1); }
}

/* -------------------------------------------
   PRINT STYLES
   ------------------------------------------- */
@media print {
    .btn-save-contact,
    .print-btn-large {
        display: none !important;
    }
    
    .steroid-card,
    .sick-day-rules {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    
    .schedule-print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid var(--steroid-amber);
        padding-bottom: 1rem;
    }
    
    .schedule-print-header h1 {
        font-size: 1.4rem;
        color: var(--steroid-amber);
        margin: 0 0 0.25rem;
    }
    
    .schedule-print-header p {
        margin: 0;
        color: var(--text-secondary);
    }
    
    .safety-info-section {
        page-break-before: always;
        padding-top: 1rem;
    }
    
    .safety-info-section .section-header {
        text-align: center;
        border-bottom: 2px solid var(--steroid-amber);
        padding-bottom: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .safety-info-section .section-header h2 {
        color: var(--steroid-amber);
    }
}

/* -------------------------------------------
   PATIENT PREVIEW DRAWER (Desktop) - Prednisolone-specific
   ------------------------------------------- */

/* Safety section adjustments for drawer */
.drawer-body .safety-info-section {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.drawer-body .safety-info-section .section-header {
    margin-bottom: 1rem;
}

.drawer-body .safety-info-section .section-header h2 {
    font-size: 1rem;
}

.drawer-body .two-col {
    gap: 1rem;
}

.drawer-body .steroid-card,
.drawer-body .sick-day-rules {
    margin-bottom: 0;
}

.drawer-body .hcp-info {
    margin-top: 1rem;
}

/* === QR ACTIONS REDESIGN (Option E) === */
/* Note: Main .pred-qr-content styles are in QR OUTPUT section above */
.pred-qr-content {
    text-align: center;
}

.qr-ready .pred-qr-content {
    /* Inherits opacity/transform from main styles */
}

.pred-qr-container {
    background: white;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    position: relative; /* For overlay positioning */
    /* min-height/min-width set in earlier rule with desktop media query */
}

/* Option E: Uses shared .qr-actions-grid class */

#page-prednisolone .copy-notes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#page-prednisolone .copy-notes-btn svg {
    flex-shrink: 0;
}

/* === QR RESET ICON BUTTON (Option E) === */
#page-prednisolone .qr-reset-icon-btn {
    color: var(--text-muted);
}

@media (any-hover: hover) {
    #page-prednisolone .qr-reset-icon-btn:hover {
        color: var(--steroid-amber);
        background: var(--steroid-amber-light);
    }
}

/* -------------------------------------------
   STICKY PANEL RESET LINK
   ------------------------------------------- */
#page-prednisolone .sticky-panel .card-header-action {
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    transition: 
        border-color var(--transition-fast),
        color var(--transition-fast),
        background var(--transition-fast);
}

@media (any-hover: hover) {
    #page-prednisolone .sticky-panel .card-header-action:hover {
        border-color: var(--theme-primary);
        color: var(--theme-primary);
        background: var(--theme-light);
    }
}

[data-theme="dark"] #page-prednisolone .sticky-panel .card-header-action {
    background: var(--bg-elevated);
}

@media (any-hover: hover) {
    [data-theme="dark"] #page-prednisolone .sticky-panel .card-header-action:hover {
        background: var(--bg-secondary);
        border-color: var(--steroid-amber-border);
        color: var(--steroid-amber-border);
    }
}

@media (max-width: 899px) {
    #page-prednisolone .sticky-panel .card-header-action {
        display: none;
    }
}

/* -------------------------------------------
   MOBILE/DESKTOP BUTTON TEXT & ICON 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;
    }
}