/**
 * Anamnessor — Shared Styles
 * Institutional medical aesthetic · Inter + Playfair Display
 * Common CSS for all pages (admin, player, doctor, institution, referrer)
 */

/* ═══════════════════════════════════════════════════════════
   CSS RESET & BASE
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES (Design System)
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Anamnessor Palette Platinum ── */
    --navy: #0A1B24;
    --porcelain: #F5F4F2;
    --surface: #FFFFFF;
    --graphite: #0F1316;
    /* ── Oro: DOS roles, no uno ──────────────────────────────────────────────
       #B8973D está elegido para fondo oscuro y ahí funciona (4,87:1 sobre navy #11304B).
       Sobre superficie clara NO es legible: 2,65:1 sobre marfil #faf9f7 y 2,79:1 sobre
       blanco, muy por debajo del 4,5:1 de WCAG AA. Como se usaba como color de TEXTO en
       superficies claras, el dato que más vende —la especialidad del cirujano— era lo
       menos legible de la pantalla. Auditoría de diseño 2026-07-25.
         --gold / --elite-gold  → filetes, bordes, iconos y texto SOBRE NAVY
         --gold-ink             → texto dorado sobre superficie CLARA (5,62:1)
         --gold-on-gold-text    → texto sobre relleno dorado (6,69:1, antes blanco a 2,79:1) */
    --gold: #B8973D;
    --elite-gold: #B8973D;
    --gold-ink: #7A6118;
    --gold-on-gold-text: #0F1316;
    --action: #2A4663;
    --action-hover: #223B56;
    --action-active: #1E344D;
    --border: rgba(0,0,0,0.08);
    --divider: rgba(0,0,0,0.06);
    --focus: rgba(42, 70, 99, 0.35);
    --teal: var(--action);

    /* ── Legacy palette aliases ── */
    --anamnessor-navy: var(--navy);
    --anamnessor-background: var(--porcelain);
    --anamnessor-surface: var(--surface);
    --anamnessor-graphite: var(--graphite);
    --anamnessor-teal: var(--action);
    --anamnessor-gold: var(--gold);
    --anamnessor-slate: #56626B;

    /* ── Brand Tokens (mapped from palette) ── */
    --primary-deep: var(--navy);
    --primary-slate: #56626B;
    --accent-premium: var(--action);
    --bg-light: var(--porcelain);
    --action-cyan: var(--action);
    --system-error: #A94442;

    /* ── Shadows (layered) ── */
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.04);
    --shadow-md: 0 10px 25px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
    --gold-line: 1px solid rgba(184,151,61,0.35);

    /* ── Semantic Aliases ── */
    --bg: var(--porcelain);
    --surface-2: #EDE9E3;
    --text: var(--graphite);
    --text-muted: var(--anamnessor-slate);
    --accent: var(--action);
    --accent-glow: rgba(42,70,99,0.10);
    --success: #12706C;
    --warning: #A35A05;
    --error: #A94442;
    --deep-teal: var(--action-hover);
    --signal-teal: var(--action);
    --graphite: #0F1316;

    /* Additional (player-specific) */
    --pain-low: #1C8E8A;
    --pain-mid: #D97706;
    --pain-high: #A94442;
}

/* ═══════════════════════════════════════════════════════════
   BODY & LAYOUT
   ═══════════════════════════════════════════════════════════ */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--porcelain);
    color: var(--graphite);
    min-height: 100vh;
    line-height: 1.6;
}

a {
    color: var(--action);
    transition: color 0.25s ease;
}

a:hover {
    color: var(--action-active);
}

a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */

nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--navy);
    color: var(--porcelain);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a {
    color: rgba(245,244,242,0.85);
    transition: color 0.25s ease;
}

nav a:hover {
    color: #FFFFFF;
}

nav a.active {
    color: var(--gold);
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #96803A;
    cursor: pointer;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.user-info {
    font-size: 0.8438rem;
    color: rgba(245,244,242,0.85);
    text-align: right;
}

.user-info strong {
    color: #FFFFFF;
    margin-right: 8px;
}

/* ═══════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   ═══════════════════════════════════════════════════════════ */

.lang-switcher {
    position: relative;
}

.lang-current {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(245,244,242,0.8);
    padding: 6px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.35s ease;
    border-radius: 6px;
}

.lang-current:hover {
    border-color: rgba(255,255,255,0.3);
    color: #FFFFFF;
}

.lang-menu {
    display: none;
    position: absolute;
    top: 110%;
    right: 0;
    background: var(--navy);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    overflow: hidden;
    z-index: 200;
    min-width: 56px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.lang-menu.open {
    display: flex;
    flex-direction: column;
}

.lang-menu button {
    background: none;
    border: none;
    color: rgba(245,244,242,0.7);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    cursor: pointer;
    letter-spacing: 1px;
    padding: 8px 14px;
    text-align: center;
    transition: all 0.35s ease;
}

.lang-menu button:hover {
    background: rgba(42,70,99,0.15);
    color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

.btn-logout {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(245,244,242,0.85);
    font-size: 0.7813rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.35s ease;
    border-radius: 6px;
}

.btn-logout:hover {
    border-color: rgba(255,255,255,0.5);
    color: #FFFFFF;
}

.btn-secondary {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.7813rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.35s ease;
    border-radius: 6px;
}

.btn-secondary:hover {
    border-color: var(--action);
    color: var(--action);
}

.btn-primary {
    padding: 10px 18px;
    background: var(--action);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 0.8438rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.35s ease;
}

.btn-primary:hover {
    background: var(--action-hover);
    color: #FFFFFF;
    transform: translateY(-1px);
}

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

.btn-primary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   CONTAINER & TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

.container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px;
}

h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--anamnessor-navy);
}

h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--anamnessor-navy);
}

h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.subtitle {
    color: var(--text-muted);
    margin-bottom: 40px;
}

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted, #56626B);
    margin-bottom: 6px;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

/* Stitch — underline-only inputs and selects, boxed textarea */
.form-group input,
.form-group select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease;
}
.form-group select {
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356626B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 14px;
    padding-right: 1.75rem;
    -webkit-appearance: none;
    appearance: none;
}
.form-group textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease;
    resize: vertical;
    min-height: 100px;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-bottom-color: var(--elite-gold, #B8973D);
    box-shadow: none;
}
.form-group textarea:focus {
    outline: none;
    border-color: var(--elite-gold, #B8973D);
    box-shadow: none;
}

.form-group small {
    display: block;
    margin-top: 6px;
    font-size: 0.7188rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    text-align: left;
    padding: 18px 14px;
    font-size: 0.7188rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

tbody td {
    padding: 18px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 0.8438rem;
}

tbody tr {
    transition: background 0.2s;
}

tbody tr:hover {
    background: rgba(0,0,0,0.02);
}

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 6px;
    border: 1px solid transparent;
}

.badge-pending {
    background: rgba(184,151,61,0.15);
    color: var(--anamnessor-gold);
    border-color: rgba(184,151,61,0.25);
}

.badge-active,
.badge-in-review {
    background: rgba(42,70,99,0.1);
    color: var(--action);
    border-color: rgba(42,70,99,0.25);
}

.badge-delivered,
.badge-completed {
    background: rgba(42,70,99,0.1);
    color: var(--action);
    border-color: rgba(42,70,99,0.25);
}

.badge-revoked {
    background: rgba(169,68,66,0.1);
    color: #A94442;
    border-color: rgba(169,68,66,0.25);
}

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11,31,42,0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    overflow-y: auto;
    padding: 40px 20px;
}

.modal-overlay.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-width: 900px;
    width: 100%;
    padding: 44px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.modal-header h2 {
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.35s ease;
}

.modal-close:hover {
    color: var(--accent);
}

.modal-footer {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: var(--gold-line);
}

/* ═══════════════════════════════════════════════════════════
   CARDS & SURFACES
   ═══════════════════════════════════════════════════════════ */

.card {
    background: var(--anamnessor-surface);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 28px;
    transition: all 0.35s ease;
    box-shadow:
        0 4px 10px rgba(0,0,0,0.04),
        0 1px 3px rgba(0,0,0,0.03);
}

.card:hover {
    border-color: rgba(0,0,0,0.12);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px;
    margin-bottom: 36px;
    box-shadow: var(--shadow-sm);
}

/* ── Gold divider (premium separator) ── */
.gold-divider {
    border: none;
    border-top: 1px solid rgba(184,151,61,0.35);
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */

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

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

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

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

.text-error {
    color: var(--error);
}

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.mb-4 { margin-bottom: 32px !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mt-4 { margin-top: 32px !important; }

/* Shadow utility classes */
.shadow-soft { box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.shadow-medium { box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.shadow-deep { box-shadow: 0 20px 60px rgba(0,0,0,0.12); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    nav {
        padding: 12px 16px;
    }

    .container {
        padding: 20px;
    }

    h1 {
        font-size: 2rem;
    }

    .modal {
        padding: 24px;
    }

    table {
        font-size: 0.8438rem;
    }

    thead th,
    tbody td {
        padding: 12px 8px;
    }
}

@media (max-width: 480px) {
    nav {
        flex-direction: column;
        gap: 16px;
    }

    .nav-right {
        width: 100%;
        justify-content: space-between;
    }

    h1 {
        font-size: 1.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   UX/UI ENHANCEMENTS (Feb 2026)
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   BREADCRUMBS (2.4 Navigation)
   ─────────────────────────────────────────────────────────── */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 0.8438rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.breadcrumb-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus {
    color: var(--accent);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--border);
    user-select: none;
}

.breadcrumb-current {
    color: var(--text);
    font-weight: 500;
}

/* ───────────────────────────────────────────────────────────
   FORM PROGRESS INDICATOR (2.5 Forms)
   ─────────────────────────────────────────────────────────── */

.form-progress {
    background: var(--surface);
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 32px;
    border: 1px solid var(--border);
}

.progress-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 80px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.progress-step.active,
.progress-step.completed {
    opacity: 1;
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--anamnessor-background);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8438rem;
    transition: all 0.35s ease;
}

.progress-step.active .step-number {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.progress-step.completed .step-number {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.progress-step.completed .step-number::before {
    content: '\2713';
}

.step-label {
    font-size: 0.7188rem;
    text-align: center;
    color: var(--text-muted);
}

.progress-step.active .step-label {
    color: var(--text);
    font-weight: 500;
}

.step-connector {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 -8px;
    margin-top: -24px;
}

.progress-step.completed ~ .step-connector {
    background: var(--success);
}

/* ───────────────────────────────────────────────────────────
   TOOLTIPS (2.5 Forms)
   ─────────────────────────────────────────────────────────── */

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-glow);
    color: var(--accent);
    font-size: 0.7188rem;
    font-weight: 600;
    cursor: help;
    margin-left: 6px;
    border: 1px solid var(--accent);
    transition: all 0.35s ease;
}

.tooltip-icon:hover,
.tooltip-icon:focus {
    background: var(--accent);
    color: white;
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.tooltip-bubble {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.7813rem;
    color: var(--text);
    max-width: 250px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.35s ease;
    pointer-events: none;
    margin-top: 8px;
    box-shadow: var(--shadow-md);
}

.tooltip-bubble.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tooltip-bubble::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--accent);
}

/* ───────────────────────────────────────────────────────────
   INLINE VALIDATION (2.5 Forms)
   ─────────────────────────────────────────────────────────── */

.field-error {
    color: var(--error);
    font-size: 0.7813rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.field-error::before {
    content: '\26A0';
}

input.error,
textarea.error,
select.error {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px rgba(169, 68, 66, 0.1) !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--action);
    box-shadow: 0 0 0 3px var(--focus);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────
   ENHANCED RESPONSIVE (2.3 Responsive Design)
   ─────────────────────────────────────────────────────────── */

/* Fix: Form inputs overflowing viewport on mobile */
@media (max-width: 768px) {
    .form-group input,
    .form-group textarea,
    .form-group select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Fix: Tables with horizontal scroll */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -20px;
        padding: 0 20px;
    }

    table {
        min-width: 600px;
    }

    /* Fix: Chat panel overflow */
    .chat-panel,
    .chat-messages {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fix: Modal on mobile */
    .modal {
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Better padding for small screens */
    .container {
        padding: 16px;
    }

    /* Stack cards on mobile */
    .stats-grid,
    .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ───────────────────────────────────────────────────────────
   ACCESSIBILITY (2.6 A11Y)
   ─────────────────────────────────────────────────────────── */

/* Fix: WCAG AA contrast for badges */
.badge-pending {
    background: rgba(184,151,61,0.15);
    color: var(--anamnessor-gold);
    font-weight: 600;
}

.badge-active {
    background: rgba(42,70,99,0.12);
    color: var(--action);
    font-weight: 600;
}

.badge-completed {
    background: rgba(42,70,99,0.12);
    color: var(--action);
    font-weight: 600;
}

/* Fix: Visible focus states for keyboard navigation */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* Better focus for language dropdown */
.lang-switcher:focus-within .lang-menu {
    display: block;
}

.lang-menu button:focus {
    background: var(--accent-glow);
}

/* ARIA labels for icon-only buttons (applied in HTML) */
button[aria-label],
a[aria-label] {
    position: relative;
}

/* Back to dashboard link (reusable across all role pages) */
.back-to-dashboard {
    display: inline-block;
    color: var(--action);
    font-size: 0.8438rem;
    cursor: pointer;
    letter-spacing: 0.5px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-decoration: none;
}

.back-to-dashboard:hover {
    text-decoration: underline;
}

.back-to-dashboard-bottom {
    display: block;
    margin-top: 32px;
    padding-top: 24px;
    border-top: var(--gold-line);
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border: rgba(0, 0, 0, 0.3);
    }

    button, .btn-primary, .btn-secondary {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ───────────────────────────────────────────────────────────
   DRAFT AUTO-SAVE INDICATOR
   ─────────────────────────────────────────────────────────── */

.draft-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(184,151,61,0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13.5px;
    z-index: 1000;
    opacity: 0.7;
    transition: opacity 0.3s;
    box-shadow: var(--shadow-md);
}

.draft-indicator:hover {
    opacity: 1;
}

/* ───────────────────────────────────────────────────────────
   TABLE RESPONSIVE ENHANCEMENTS
   ─────────────────────────────────────────────────────────── */

.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .table-container {
        margin: 0 -16px;
        padding: 0 16px;
    }

    /* Make tables stack on very small screens if preferred */
    table.stack-mobile {
        display: block;
    }

    table.stack-mobile thead {
        display: none;
    }

    table.stack-mobile tbody,
    table.stack-mobile tr,
    table.stack-mobile td {
        display: block;
        width: 100%;
    }

    table.stack-mobile tr {
        margin-bottom: 16px;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 12px;
    }

    table.stack-mobile td {
        text-align: left;
        padding: 8px 0;
        border: none;
    }

    table.stack-mobile td::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: var(--text-muted);
    }
}

/* ═══════════════════════════════════════════════════
   CASE VIEW — Shared styles for buildCaseViewHTML()
   Used across: player, doctor, admin, institution
   ═══════════════════════════════════════════════════ */

.ch-field { margin-bottom: 20px; }
.ch-field:last-child { margin-bottom: 0; }
.ch-field .ch-label {
    display: block;
    font-size: 0.7188rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--text-muted);
}
.ch-field .ch-value {
    width: 100%;
    padding: 12px 16px;
    background: var(--anamnessor-background);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.6;
    white-space: pre-wrap;
    min-height: 48px;
}
.ch-field .ch-value.empty {
    color: var(--text-muted);
    font-style: italic;
}
.ch-field .ch-value.highlight {
    border-color: var(--action);
    background: rgba(42,70,99,0.04);
}
.ch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.ch-grid-item .ch-label {
    display: block;
    font-size: 0.7188rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ch-grid-item .ch-val {
    display: block;
    color: var(--text);
    font-size: 0.8438rem;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .ch-grid { grid-template-columns: 1fr; }
}

/* Assignment status badges */
.badge-pending { background: rgba(184,151,61,0.15); color: var(--anamnessor-gold); border-color: rgba(184,151,61,0.25); }
.badge-in_progress, .badge-progress { background: rgba(42,70,99,0.1); color: var(--action); border-color: rgba(42,70,99,0.25); }
.badge-submitted { background: rgba(42,70,99,0.1); color: var(--action); border-color: rgba(42,70,99,0.25); }

/* ── Elite Gold Accents ── */
.doctor-name-gold { color: var(--gold-ink, #7A6118); }
.text-elite-gold { color: var(--gold-ink, #7A6118); }

/* ── Gold Hierarchy: dividers, title accents, premium badges ── */
.section-divider {
    border: none;
    border-top: 1px solid rgba(184,151,61,0.35);
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    margin-top: 8px;
    background: var(--elite-gold);
}

.badge-premium {
    background: rgba(184,151,61,0.12);
    color: var(--gold-ink, #7A6118);
    border: 1px solid rgba(184,151,61,0.35);
}