/* Base Styles */
:root {
    /* Primary Colors */
    --primary-color: #3B82F6;
    --primary-dark: #1D4ED8;
    --primary-light: #DBEAFE;
    --primary-hover: #2563EB;

    /* Secondary Colors */
    --secondary-color: #6B7280;
    --secondary-hover: #D1D5DB;

    /* Success Colors */
    --success-color: #10B981;
    --success-light: #D1FAE5;
    --success-hover: #059669;

    /* Warning Colors */
    --warning-color: #F59E0B;
    --warning-light: #FEF3C7;

    /* Danger Colors */
    --danger-color: #EF4444;
    --danger-light: #FEE2E2;
    --danger-hover: #DC2626;

    /* Gray Scale */
    --light-gray: #F9FAFB;
    --lighter-gray: #F8FAFC;
    --medium-gray: #E5E7EB;
    --medium-gray-2: #D1D5DB;
    --gray: #9CA3AF;
    --dark-gray: #374151;

    /* Text Colors */
    --text-color: #1F2937;
    --text-light: #6B7280;
    --text-dark: #111827;

    /* Blue Tints */
    --blue-50: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-600: #2563EB;
    --blue-800: #1E40AF;

    /* Additional Semantic Colors */
    --red-600: #DC2626;
    --red-700: #B91C1C;
    --red-200: #FFB3B3;
    --green-600: #16A34A;
    --green-700: #065F46;
    --green-200: #A3F9DB;
    --cyan-600: #0891B2;
    --yellow-500: #EAB308;
    --yellow-700: #92400E;
    --yellow-200: #FFD599;
    --purple-500: #A855F7;
    --emerald-500: #10B981;
    --gray-100: #F3F4F6;
    --gray-400: #9CA3AF;

    /* Dark Backgrounds for Info Boxes */
    --dark-blue-bg: #173052;
    --dark-blue-text: #A8CEFF;
    --dark-yellow-bg: #3A2900;
    --dark-green-bg: #0A372A;
    --dark-red-bg: #3B1A1A;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.5);
    --shadow-focus-subtle: 0 0 0 3px rgba(59, 130, 246, 0.25);
    --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-checkbox: 0 0 3px rgba(0, 0, 0, 0.1);

    /* Border Radius */
    --border-radius-sm: 0.25rem;
    --border-radius: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-full: 50%;

    /* Transitions */
    --transition: all 0.2s ease-in-out;
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;

    /* Layout */
    --container-width: 1200px;
    --header-height: 60px;
    --footer-height: 40px;

    /* Spacing System */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 2.5rem;   /* 40px */

    /* Typography System */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 2rem;       /* 32px */

    /* Line Heights */
    --line-height-tight: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Button Sizes */
    --btn-padding-sm: 0.5rem 0.75rem;
    --btn-padding-md: 0.6rem 1.2rem;
    --btn-padding-lg: 1rem 1.5rem;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: var(--line-height-relaxed);
    color: var(--text-color);
    background-color: var(--light-gray);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75em;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-dark);
}

h1 {
    font-size: var(--font-size-3xl);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

p {
    margin-bottom: 1.2rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

ul, ol {
    margin-left: 1.5rem;
    margin-bottom: 1.2rem;
}

li {
    margin-bottom: 0.5rem;
}

/* Accessibility */
.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;
}

/* Layout */
#main-nav {
    background-color: var(--dark-gray);
    color: white;
    padding: 0 1.5rem;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-left, .nav-right {
    display: flex;
    align-items: center;
}

.nav-right {
    gap: 1.2rem;
}

.nav-button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.nav-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-button:focus {
    outline: 2px solid rgba(255, 255, 255, 0.3);
    outline-offset: 2px;
}

.icon {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    vertical-align: middle;
}

#main-container {
    max-width: var(--container-width);
    width: 100%;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
    flex-grow: 1;
}

footer {
    background-color: var(--dark-gray);
    color: white;
    text-align: center;
    padding: 0.75rem;
    font-size: 0.75rem;
    min-height: var(--footer-height);
    margin-top: auto;
}

footer p {
    margin-bottom: 0.5rem; /* Reduced line spacing for footer paragraphs */
}

/* Progress Bar and Steps */
.progress-wrapper {
    margin: 0.5rem auto 1.5rem;
    max-width: var(--container-width);
    width:100%;
    padding: 0 1.5rem;
}

.progress-container {
    width: 100%;
    height: 0.5rem;
    background-color: var(--medium-gray);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: var(--border-radius-sm);
    transition: width 0.5s ease;
}

.progress-text {
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Progress Steps - Improved Version */
.progress-steps {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0 2rem;
    position: relative;
    padding: 0 10px; /* Add padding to prevent edge overflow */
}

.progress-step {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--medium-gray);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    position: relative;
    z-index: 2;
    border: 2px solid transparent; /* Add border for better visibility */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); /* Add halo effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.progress-step.active {
    background-color: var(--primary-color);
    color: white;
    transform: scale(1.1); /* Make active step slightly larger */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

.progress-step.completed {
    background-color: var(--success-color);
    color: white;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3);
    line-height: 0;
    font-size: 1.5rem;
    padding-top: 0.15rem;
}

.progress-step.clickable {
    cursor: pointer;
}

.progress-step.clickable:hover {
    transform: scale(1.1);
}

.progress-label {
    position: absolute;
    bottom: -24px; 
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-color);
    white-space: normal; 
    font-weight: 500;
    width: max-content;
    max-width: 140px; 
    padding: 0 4px;
    overflow: visible;
    text-overflow: unset;
    z-index: 3;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--medium-gray);
    transform: translateY(-50%);
    z-index: 1;
}

/* Language Selector */
.language-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.75rem;
    color: white;
    font-size: 0.875rem;
}

/* Hide language selector for experiment (German only) */
.language-selector.hidden-for-experiment {
    display: none !important;
}

#language-select {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition);
}

#language-select:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#language-select:focus {
    outline: 2px solid rgba(255, 255, 255, 0.3);
    outline-offset: 2px;
    border-color: transparent;
}

#language-select option {
    background-color: var(--dark-gray);
    color: white;
}

/* Content Sections */
.content-section {
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow);
    padding: 1.75rem;
    margin-bottom: 2rem;
    transition: var(--transition);
    border: 1px solid var(--medium-gray);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-title {
    border-bottom: 1px solid var(--medium-gray);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-dark);
}

/* Help Icon */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: white;
    font-size: 0.8rem;
    margin-left: 0.5rem;
    cursor: help;
    transition: var(--transition);
}

.help-icon:hover {
    background-color: var(--primary-color);
    transform: scale(1.1);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    padding: var(--btn-padding-md);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
    gap: var(--spacing-sm);
}

.primary {
    color: white;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.secondary {
    color: var(--text-color);
    background-color: var(--medium-gray);
    border-color: var(--medium-gray);
}

.secondary:hover {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.secondary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.success {
    color: white;
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.success:hover {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.success:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.danger {
    color: white;
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.danger:hover {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

.btn:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Button Size Variants */
.btn-sm {
    padding: var(--btn-padding-sm);
    font-size: var(--font-size-sm);
}

.btn-md {
    padding: var(--btn-padding-md);
    font-size: var(--font-size-base);
}

.btn-lg {
    padding: var(--btn-padding-lg);
    font-size: var(--font-size-lg);
}

.button-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.center-button {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.button-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Forms */
.form-group {
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
    border: 1px solid var(--medium-gray);
}

.form-item {
    margin-bottom: 1.25rem;
}

.form-item:last-child {
    margin-bottom: 0;
}

.form-item label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-dark);
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
    background-color: white;
    background-clip: padding-box;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus-subtle);
}

input::placeholder,
textarea::placeholder {
    color: var(--gray);
}

.checkbox-item,
.radio-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.9rem;
    padding: 0.5rem 0; /* Add vertical padding for better tap targets */
}

.checkbox-item:last-child,
.radio-item:last-child {
    margin-bottom: 0;
}

.checkbox-item input,
.radio-item input {
    margin-top: 0.25rem; /* Better vertical alignment */
    margin-right: 0.75rem;
    flex-shrink: 0;
    min-width: 1rem;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0.75rem 0;
}

.small-text {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin-top: var(--spacing-sm);
}

.required-indicator {
    color: var(--danger-color);
    /* margin-left: 4px; /* Can be removed if using gap */
}

/* Intervention Options - Card-based Radio Buttons */
.intervention-options-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.intervention-option-card {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    background-color: white;
    border: 2px solid var(--medium-gray);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
}

.intervention-option-card:hover {
    border-color: var(--primary-color);
    background-color: var(--lighter-gray);
    box-shadow: var(--shadow-card);
}

.intervention-option-card input[type="radio"],
.intervention-option-card input[type="checkbox"] {
    margin-top: 0.25rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
    cursor: pointer;
    width: 1.25rem;
    height: 1.25rem;
}

.intervention-option-card input[type="radio"]:checked,
.intervention-option-card input[type="checkbox"]:checked {
    accent-color: var(--primary-color);
}

.intervention-option-card:has(input[type="radio"]:checked),
.intervention-option-card:has(input[type="checkbox"]:checked) {
    border-color: var(--primary-color);
    background-color: var(--blue-50);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Intervention section styling for multiple selections - Minimal divider design */
.intervention-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--medium-gray);
}

.intervention-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.intervention-option-text {
    flex: 1;
    line-height: 1.6;
    color: var(--text-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.intervention-type-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-dark);
}

/* Wrapper for label and required indicator */
.label-with-indicator {
  display: flex;        /* Arrange label and span in a row */
  align-items: baseline; /* Align their text baselines */
  gap: 4px;             /* Add a small space between them (adjust as needed) */
  margin-bottom: 0.5rem; /* Maintain the original bottom margin */
}

/* Prevent the label inside the wrapper from being block */
.label-with-indicator label {
   display: inline; /* Or auto */
   margin-bottom: 0; /* Remove margin, as the wrapper handles it */
}

/* Custom checkboxes and radio buttons - improved */
input[type="checkbox"],
input[type="radio"] {
    min-width: 1.5rem; /* Increased from 1.3rem for better touch accessibility (24px) */
    min-height: 1.5rem; /* Increased from 1.3rem for better touch accessibility (24px) */
    cursor: pointer;
    border: 2px solid var(--medium-gray); /* Thicker border */
    background-color: white;
    position: relative;
    display: inline-block;
    transition: var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: var(--shadow-checkbox); /* Add shadow for depth */
}

input[type="checkbox"] {
    border-radius: var(--border-radius-sm); /* Slightly rounded corners */
}

input[type="radio"] {
    border-radius: var(--border-radius-full);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus-subtle); /* Highlight when checked */
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus); /* Stronger focus effect */
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.4rem;
    height: 0.75rem;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.6rem; /* Slightly larger for bigger radio button */
    height: 0.6rem; /* Slightly larger for bigger radio button */
    border-radius: 50%;
    background-color: white;
}

/* Info Boxes */
.info-box,
.warning-box,
.success-box,
.danger-box,
.notice-box {
    padding: 1.25rem;
    margin: 1.5rem 0;
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
}

.info-box {
    background-color: var(--blue-50);
    border-left: 4px solid var(--primary-color);
    color: var(--blue-800);
}

.warning-box {
    background-color: var(--warning-light);
    border-left: 4px solid var(--warning-color);
    color: var(--yellow-700);
}

.success-box {
    background-color: var(--success-light);
    border-left: 4px solid var(--success-color);
    color: var(--green-700);
}

.danger-box {
    background-color: var(--danger-light);
    border-left: 4px solid var(--danger-color);
    color: var(--red-700);
}

.notice-box {
    background-color: var(--gray-100);
    border-left: 4px solid var(--secondary-color);
    color: var(--dark-gray);
}

.info-box strong,
.warning-box strong,
.success-box strong,
.danger-box strong,
.notice-box strong {
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

/* List styles in info boxes - ensure ul and ol have identical spacing */
.info-box ul,
.info-box ol,
.warning-box ul,
.warning-box ol,
.success-box ul,
.success-box ol,
.danger-box ul,
.danger-box ol,
.notice-box ul,
.notice-box ol {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
}

.info-box li,
.warning-box li,
.success-box li,
.danger-box li,
.notice-box li {
    margin-bottom: 0.4rem;
}

/* De-biasing Section */
.statistics-box {
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--medium-gray);
}

.statistics-box h3 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: var(--text-dark);
    font-weight: 600;
}

.statistics-box h3:first-child {
    margin-top: 0;
}

/* Domain Selection */
.domain-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.domain-column {
    display: flex;
    flex-direction: column;
    min-width: 250px; 
}

.domain-list {
    list-style: none;
    margin: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.domain-button {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 1rem;
    background-color: white;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: var(--transition-base);
    font-weight: 500;
    color: var(--text-dark);
    box-shadow: var(--shadow-sm);
}

.domain-button:hover {
    background-color: var(--light-gray);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.domain-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.domain-button.domain-completed {
    border-left: 4px solid var(--success-color);
    background-color: rgba(16, 185, 129, 0.05);
}

.domain-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.domain-column-header h3 {
    margin-bottom: 0;
    font-size: 1.15rem;
}

.completion-count {
    font-size: 0.85rem;
    color: var(--text-light);
    background-color: var(--medium-gray);
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius-sm);
}

.domain-completion-bar {
    height: 0.5rem;
    background-color: var(--medium-gray);
    border-radius: var(--border-radius-sm);
    margin: 0.75rem 0 1.25rem 0;
    overflow: hidden;
}

.domain-completion-progress {
    height: 100%;
    background-color: var(--success-color);
    width: 0%; 
    transition: width 0.5s ease;
}

.domain-completion-summary {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.domain-button .completion-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.5rem;
}

/* Domain Navigation */
.domain-navigation {
    display: flex;
    flex-direction: column;
    margin: 1.5rem 0;
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    border: 1px solid var(--medium-gray);
}

.domain-navigation-title {
    margin-bottom: 1rem;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 600;
}

.domain-progress-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* Changed from 6 to 7 */
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.domain-progress-title {
    grid-column: 1 / -1;
    font-weight: 600;
    margin: 0.5rem 0;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.domain-progress-button {
    padding: 0.5rem;
    background-color: white;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    text-align: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    font-weight: 500;
}

.domain-progress-button:hover {
    background-color: var(--light-gray);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.domain-progress-button.completed {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: var(--success-color);
}

.domain-progress-button.current {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: var(--primary-color);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.domain-progress-button::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.domain-progress-button.completed::after {
    background-color: var(--success-color);
}

.domain-next-recommendations {
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-top: 1.5rem;
    border: 1px solid var(--medium-gray);
}

.domain-next-recommendations h4 {
    margin-bottom: 1rem;
    color: var(--text-dark);
    font-size: 1.1rem;
}

.recommended-domains {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.recommended-domain-button {
    background-color: white;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-base);
    font-weight: 500;
}

.recommended-domain-button:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Domain Notes */
/* Domain Notes Section */
.domain-notes-section {
    margin: 2rem 0;
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    border: 1px solid var(--medium-gray);
}

.domain-notes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.domain-note-item {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--medium-gray);
    box-shadow: var(--shadow-sm);
}

.domain-note-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--medium-gray);
}

.domain-note-content {
    margin-top: 0.75rem;
}

.item-comments-summary {
    margin-top: 1.5rem;
}

/* Make responsive for mobile */
@media (max-width: 768px) {
    .domain-notes-grid {
        grid-template-columns: 1fr;
    }
}

/* Enhance recommended domains with priority highlighting */
.recommended-domain-button[data-priority="high"] {
    border-width: 2px;
    background-color: rgba(59, 130, 246, 0.1);
    position: relative;
}

.recommended-domain-button[data-priority="high"]:after {
    content: "★";
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--primary-color);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Flag Info Box */
.flag-info-box {
    background-color: rgba(243, 244, 246, 0.5);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid var(--medium-gray);
}

.domain-specific-flag-header {
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.domain-specific-flag-text {
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-color);
}

.flag-explanation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 1rem;
    gap: 1rem;
}

.flag-row {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
}

.flag-row .flag {
    margin-right: 0.75rem;
}

.domain-specific-flag-info {
    margin-bottom: 1.5rem;
}

/* Domain Items */
.domain-items {
    margin-bottom: 2rem;
}

.domain-subcategory {
    margin-bottom: 2.5rem;
}

.subcategory-title {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--medium-gray);
    font-weight: 600;
}

.domain-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--medium-gray);
}

.domain-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.item-content {
    flex: 1;
    margin-right: 1rem;
}

.item-text {
    margin-bottom: 0.5rem;
}

.item-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.flag-container {
    min-width: 120px;
    display: flex;
    justify-content: flex-end;
}

/* Flag Selector */
.flag-selector {
    display: flex;
    gap: 0.6rem;
}

.flag {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-base);
    position: relative;
    /* Button reset for accessibility */
    padding: 0;
    margin: 0;
    font: inherit;
    outline: none;
}

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

.flag:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-sm);
}

.flag.green {
    background-color: var(--success-color);
}

.flag.yellow {
    background-color: var(--warning-color);
}

.flag.red {
    background-color: var(--danger-color);
}

.flag.neutral {
    background-color: var(--medium-gray);
    border: 2px solid var(--gray-400);
}

.flag.selected {
    border: 2px solid black;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.flag.has-comment {
    position: relative;
}

.flag.has-comment::after {
    content: '💬';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.9rem;
    background-color: white;
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

/* Hexagon Visualization */
.hexagon-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.hexagon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--medium-gray);
}

.hexagon-wrapper h3 {
    margin-bottom: 1.25rem;
    text-align: center;
}

.hexagon-container {
    position: relative;
    width: 100%;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 300px;
    margin-bottom: 1rem;
}

.hexagon-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.6rem 1rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 100;
    max-width: min(250px, calc(100vw - 20px));
    white-space: normal;
    box-shadow: var(--shadow-md);
}

/* Risk and Protection Summary */
.risk-summary-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    border: 1px solid var(--medium-gray);
}

.domains-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.domains-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.domains-list li {
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.high-risk {
    background-color: var(--danger-light);
    border-left: 3px solid var(--danger-color);
    color: var(--red-700);
}

.medium-risk {
    background-color: var(--warning-light);
    border-left: 3px solid var(--warning-color);
    color: var(--yellow-700);
}

.low-risk {
    background-color: var(--success-light);
    border-left: 3px solid var(--success-color);
    color: var(--green-700);
}

.high-protection {
    background-color: var(--success-light);
    border-left: 3px solid var(--success-color);
    color: var(--green-700);
}

.medium-protection {
    background-color: var(--warning-light);
    border-left: 3px solid var(--warning-color);
    color: var(--yellow-700);
}

.low-protection {
    background-color: var(--danger-light);
    border-left: 3px solid var(--danger-color);
    color: var(--red-700);
}

/* Styles for the overall RAR warning on results page */
#overall-rar-warning {
    padding: 1rem;
    margin-bottom: 1.5rem; /* Space below the warning */
    border-radius: var(--border-radius);
    border: 1px solid transparent; /* Base border */
}

#overall-rar-warning h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.2rem; /* Slightly larger title */
}

#overall-rar-warning p {
    margin-bottom: 0.5rem; /* Small margin for readability between paragraphs */
}

/* Apply danger/warning/info styles */
#overall-rar-warning.danger-box {
    background-color: var(--danger-light);
    border-color: var(--danger-color);
    color: var(--red-700);
}

#overall-rar-warning.warning-box {
    background-color: var(--warning-light);
    border-color: var(--warning-color);
    color: var(--yellow-700);
}

#overall-rar-warning.info-box {
    background-color: var(--blue-50);
    border-color: var(--primary-color);
    color: var(--blue-800);
}

/* Dark mode adjustments for overall RAR warning */
body.dark-mode #overall-rar-warning.danger-box {
    background-color: var(--dark-red-bg);
    border-color: var(--danger-color);
    color: var(--red-200);
}

body.dark-mode #overall-rar-warning.warning-box {
    background-color: var(--dark-yellow-bg);
    border-color: var(--warning-color);
    color: var(--yellow-200);
}

body.dark-mode #overall-rar-warning.info-box {
    background-color: var(--dark-blue-bg);
    border-color: var(--primary-color);
    color: var(--dark-blue-text);
}

/* Styles for RAR selected points list */
.rar-selected-points {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
    margin-bottom: 0;
}

.rar-selected-points ul {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}

.rar-selected-points li {
    margin-bottom: 0.25rem;
}

/* Modal */
#file-management, .modal-dialog, .item-comment-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Higher z-index */
    animation: fadeIn 0.2s ease;
}

.modal-content, .item-comment-content {
    background-color: white;
    padding: 2rem;
    border-radius: var(--border-radius-md);
    width: 90%;
    max-width: 800px; /* Increased max-width for help modal */
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-lg);
    animation: scaleIn 0.2s ease;
    z-index: 10000; /* Even higher z-index */
}

/* Specific styling for help modal content */
#help-dialog .modal-content {
    max-width: 800px; /* Use the increased width */
}

/* Help dialog specific styles */
.help-sections, .help-flags, .help-contacts, .help-references {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--medium-gray);
}
.help-references:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.help-flags .flag-row {
    justify-content: flex-start;
}

.help-contacts ul, .apa-references-list {
    list-style: none;
    margin-left: 0;
    padding-left: 0; /* Remove default padding */
}

.apa-references-list li {
    padding-left: 2em; /* Indent subsequent lines */
    text-indent: -2em; /* Create hanging indent */
    margin-bottom: 0.75rem; /* Space between references */
    line-height: 1.5; /* Improve readability */
}

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

.close-button {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--secondary-color);
    transition: color var(--transition-base);
    background: none;
    border: none;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 10001; /* Highest z-index for close button */
}

.close-button:hover {
    color: var(--danger-color);
    background-color: var(--light-gray);
}

/* File Management Sections */
.file-management-section {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: var(--background-color);
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
}

.file-management-section:last-child {
    margin-bottom: 0;
}

.file-management-section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.file-management-section-description {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.file-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--light-gray);
}

.file-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* File Import Styling */
.file-import-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.file-input-hidden {
    /* Visually hide the input but keep it accessible */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.file-input-label {
    /* Style the label like a button */
    display: inline-block; /* Needed for proper styling */
    cursor: pointer;
    /* Inherits .btn and .secondary styles */
}

.file-chosen-text {
    font-style: italic;
    color: var(--text-light);
    flex-grow: 1; /* Allow it to take available space */
    min-width: 150px; /* Ensure some minimum space */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.input-group {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: center;
}

.input-group label {
    flex-shrink: 0;
    font-weight: 500;
}

#saved-assessments-list {
    max-height: 250px;
    overflow-y: auto;
    margin-top: 1rem;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
}

.saved-assessment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--medium-gray);
    background-color: white;
    transition: background-color var(--transition-base);
}

.saved-assessment-item:hover {
    background-color: var(--light-gray);
}

.saved-assessment-item:last-child {
    border-bottom: none;
}

.saved-assessment-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.saved-assessment-buttons .btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}

/* Batch operations */
.batch-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--light-blue);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    flex-wrap: wrap;
}

.batch-selection-info {
    font-weight: 600;
    color: var(--primary-color);
}

.batch-action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.batch-action-buttons .btn.small {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}

.saved-assessment-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.saved-assessment-info input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

.saved-assessment-info > div {
    flex: 1;
}

.saved-assessment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Help dialog specific styles */
.help-sections, .help-flags, .help-contacts, .help-references {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--medium-gray);
}
.help-references:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.help-flags .flag-row {
    justify-content: flex-start;
}

.help-contacts ul, .apa-references-list {
    list-style: none;
    margin-left: 0;
    padding-left: 0; /* Remove default padding */
}

.apa-references-list li {
    padding-left: 2em; /* Indent subsequent lines */
    text-indent: -2em; /* Create hanging indent */
    margin-bottom: 0.75rem; /* Space between references */
    line-height: 1.5; /* Improve readability */
}

/* Item comments */
.item-comment-button {
    background: none;
    border: none;
    color: var(--secondary-color);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding: 0.4rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.item-comment-button:hover {
    color: var(--primary-color);
    background-color: var(--light-gray);
}

.item-comment-button .icon {
    font-size: 1.1rem;
    margin-right: 0;
}

.comment-highlight {
    border-left: 3px solid var(--primary-color);
    background-color: var(--blue-50);
    padding: 1rem;
    margin-bottom: 1.25rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.domain-item-comments {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--text-light);
    margin-top: 0.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--medium-gray);
    background-color: var(--light-gray);
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-sm);
}

.domain-comments-summary {
    margin-top: 2rem;
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    border: 1px solid var(--medium-gray);
}

.domain-comments-summary h4 {
    color: var(--text-dark);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--medium-gray);
    padding-bottom: 0.5rem;
}

.domain-comments-item {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--medium-gray);
}

.domain-comments-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.domain-comments-item .item-text {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.domain-comments-item .comment-text {
    font-style: italic;
    padding-left: 1rem;
    border-left: 2px solid var(--medium-gray);
    color: var(--text-color);
}

.domain-comments-textarea {
    position: relative;
}

.domain-comments-textarea .character-count {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-light);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
}

/* Styling for Comments on Results Page (e.g., Print Preview) */
#results-item-comments .print-item-comments {
    margin-bottom: 1.5rem; /* Add space between different item sections */
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--medium-gray); /* Separate sections visually */
}

#results-item-comments .print-item-comments:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

#results-item-comments .print-item-comment .item-text {
    margin-bottom: 0.75rem; /* Space between item text and comment */
}

#results-item-comments .print-item-comment .comment-text {
    background-color: var(--blue-50); /* Use a subtle background like info boxes */
    border-left: 3px solid var(--primary-color); /* Add a distinct left border */
    padding: 0.75rem 1rem; /* Add internal padding */
    margin-left: 1rem; /* Indent the comment slightly */
    font-style: italic; /* Differentiate comment text */
    font-size: 0.95rem; /* Slightly smaller font */
    color: var(--blue-800); /* Use a color consistent with the info-box style */
    border-radius: var(--border-radius-sm); /* Add slight rounding */
}

/* Dark mode adjustments for results page comments */
body.dark-mode #results-item-comments .print-item-comments {
    border-bottom-color: #444444;
}

body.dark-mode #results-item-comments .print-item-comment .comment-text {
    background-color: var(--dark-blue-bg); /* Dark mode info box background */
    border-left-color: var(--primary-color);
    color: var(--dark-blue-text); /* Dark mode info box text color */
}


/* Enhanced Comment Fields */
.domain-comments-textarea textarea,
#other-risk-factors-textarea, 
#other-protection-factors-textarea {
    min-height: 100px; 
    border-width: 1px;
    resize: vertical; 
}

.domain-comments-textarea textarea:focus,
#other-risk-factors-textarea:focus,
#other-protection-factors-textarea:focus {
     border-color: var(--primary-color);
     box-shadow: var(--shadow-focus-subtle);
}

/* Interpretation Guide Toggle */
.interpretation-guide-container {
    margin: 1.75rem 0;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.toggle-interpretation {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--light-gray);
    margin: 0;
    transition: background-color var(--transition-base);
}

.toggle-interpretation:hover {
    background-color: var(--medium-gray);
}

.toggle-icon {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    transition: transform var(--transition-base);
}

.interpretation-guide-content {
    padding: 1.5rem;
    background-color: white;
    border-top: 1px solid var(--medium-gray);
}

.interpretation-scale {
    display: flex;
    flex-direction: column;
    margin-top: 1.25rem;
    gap: 0.75rem;
}

.interpretation-scale h4 {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

.scale-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.75rem;
}

.scale-row .scale-label {
    width: 3rem;
    font-weight: 600;
    text-align: center;
    font-size: 0.9rem;
}

.scale-row .scale-bar {
    flex-grow: 1;
    height: 0.75rem;
    border-radius: var(--border-radius-sm);
    margin: 0 0.75rem;
}

.scale-row .scale-description {
    flex: 1;
    font-size: 0.9rem;
}

.scale-bar.risk-high {
    background-color: var(--danger-color);
}

.scale-bar.risk-medium {
    background-color: var(--warning-color);
}

.scale-bar.risk-low {
    background-color: var(--success-color);
}

.scale-bar.protection-high {
    background-color: var(--success-color);
}

.scale-bar.protection-medium {
    background-color: var(--warning-color);
}

.scale-bar.protection-low {
    background-color: var(--danger-color);
}

.interpretation-notes {
    margin-top: 1.25rem;
    font-style: italic;
    font-size: 0.9rem;
    padding: 0.75rem;
    background-color: white;
    border-radius: var(--border-radius-sm);
    border-left: 2px solid var(--medium-gray);
}

/* Updated Interpretation Guide Styles */
.interpretation-colors {
    margin-bottom: 1.25rem;
}

.interpretation-colors h4 {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

.color-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.75rem;
}

.color-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.color-swatch.risk-red,
.color-swatch.protection-red {
    background-color: var(--danger-color);
}

.color-swatch.risk-orange, /* Assuming orange maps to yellow flag */
.color-swatch.protection-orange {
    background-color: var(--warning-color);
}

.color-swatch.risk-green,
.color-swatch.protection-green {
    background-color: var(--success-color);
}

.color-swatch.grey {
    background-color: var(--medium-gray);
}

body.dark-mode .color-swatch {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Domain Recommendations */
.domain-recommendations {
    margin: 2rem 0;
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    border: 1px solid var(--medium-gray);
}

.domain-recommendations h3 {
    color: var(--text-dark);
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--medium-gray);
    padding-bottom: 0.5rem;
}

.domain-recommendation-item {
    display: flex;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--medium-gray);
}

.domain-recommendation-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.domain-recommendation-indicator {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    margin-right: 1rem;
    margin-top: 0.25rem;
}

.domain-recommendation-indicator.high-risk {
    background-color: var(--danger-color);
}

.domain-recommendation-indicator.medium-risk {
    background-color: var(--warning-color);
}

.domain-recommendation-indicator.low-protection {
    background-color: var(--danger-color);
}

.domain-recommendation-content {
    flex: 1;
}

.domain-recommendation-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.domain-recommendation-description {
    font-size: 0.95rem;
}

.domain-interaction-note {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--blue-50);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    color: var(--blue-800);
}

/* RAR Interpretation */
.rar-interpretation-container {
    margin: 1.75rem 0;
}

.rar-details-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Force 2 columns */
    gap: 1.25rem; 
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin: 1.75rem 0;
    border: 1px solid var(--medium-gray);
}

.rar-area-details {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    width: 100%; 
    border: 1px solid var(--medium-gray);
}

.rar-area-details h4 {
    color: var(--text-dark);
    border-bottom: 1px solid var(--medium-gray);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.rar-area-details ul {
    margin-top: 0.75rem;
    margin-left: 1.5rem;
}

.rar-area-details .warning-text {
    color: var(--danger-color);
    font-weight: 500;
}

/* RAR Progress Visualization */
.rar-progress-bar {
    display: flex;
    margin: 1.75rem 0;
    gap: 0.75rem;
}

.rar-progress-segment {
    flex: 1;
    height: 0.9rem;
    background-color: var(--medium-gray);
    border-radius: var(--border-radius-sm);
    position: relative;
    transition: background-color var(--transition-slow);
}

.rar-progress-segment.active {
    background-color: var(--danger-color);
}

.rar-progress-segment-tooltip {
    position: absolute;
    top: -2.75rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--dark-gray);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    white-space: nowrap;
    display: none;
    z-index: 10;
    box-shadow: var(--shadow-sm);
}

.rar-progress-segment:hover .rar-progress-segment-tooltip {
    display: block;
}

.rar-progress-segment::after {
    content: '';
    position: absolute;
    bottom: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--secondary-color);
}

/* Notification */
.notification {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    padding: 0.9rem 1.5rem;
    border-radius: var(--border-radius);
    background-color: white;
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(0);
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notification.success {
    background-color: var(--success-color);
    color: white;
}

.notification.error {
    background-color: var(--danger-color);
    color: white;
}

.notification.info {
    background-color: var(--primary-color);
    color: white;
}

/* Dark Mode Toggle */
#dark-mode-toggle {
    display: flex;
    align-items: center;
    order: 99;
    margin-left: auto;
}

/* Dark Mode Styles */
body.dark-mode {
    /* Base color palette adjustments */
    --light-gray: #1a1a1a;
    --medium-gray: #333333;
    --dark-gray: #111111;
    --text-color: #e1e1e1;
    --text-light: #a0a0a0;
    --text-dark: #ffffff;
    --primary-color: #5b9aff; /* Lighter blue for better visibility */
    --primary-dark: #3d7ee6;
    --primary-light: #173b6c;
    --secondary-color: #8b96a7;
    --success-color: #2dd4a5; /* Lighter green */
    --success-light: #1a3a2d;
    --warning-color: #ffb84d; /* Lighter amber */
    --warning-light: #3a2d18;
    --danger-color: #ff6b6b; /* Lighter red */
    --danger-light: #3a1a1a;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    background-color: #121212;
}

/* Core UI elements */
body.dark-mode .content-section,
body.dark-mode .modal-content,
body.dark-mode .item-comment-content,
body.dark-mode .hexagon-wrapper,
body.dark-mode .domain-navigation,
body.dark-mode .domain-next-recommendations,
body.dark-mode .flag-info-box,
body.dark-mode .domain-comments-summary,
body.dark-mode .domain-recommendations,
body.dark-mode .risk-summary-section,
body.dark-mode .domain-notes-section,
body.dark-mode .rar-details-container,
body.dark-mode .interpretation-guide {
    background-color: #1e1e1e;
    border-color: #333333;
    box-shadow: var(--shadow);
}

/* Form elements */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-group {
    background-color: #2d2d2d;
    color: #e1e1e1;
    border-color: #444444;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #777777;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus-subtle);
}

/* Checkboxes & Radio buttons */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
    background-color: #2d2d2d;
    border-color: #555555;
}

body.dark-mode input[type="checkbox"]:checked,
body.dark-mode input[type="radio"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Intervention Options - Dark Mode */
body.dark-mode .intervention-option-card {
    background-color: #2d2d2d;
    border-color: #444444;
}

body.dark-mode .intervention-option-card:hover {
    border-color: var(--primary-color);
    background-color: #3a3a3a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .intervention-option-card:has(input[type="radio"]:checked),
body.dark-mode .intervention-option-card:has(input[type="checkbox"]:checked) {
    border-color: var(--primary-color);
    background-color: var(--dark-blue-bg);
    box-shadow: 0 0 0 3px rgba(91, 154, 255, 0.15);
}

body.dark-mode .intervention-section {
    border-bottom-color: #444444;
}

body.dark-mode .intervention-option-text {
    color: #e1e1e1;
}

body.dark-mode .intervention-type-label {
    color: #e1e1e1;
}

/* Buttons */
body.dark-mode .btn.primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .btn.primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

body.dark-mode .btn.secondary {
    background-color: #3a3a3a;
    border-color: #3a3a3a;
    color: #e1e1e1;
}

body.dark-mode .btn.secondary:hover {
    background-color: #4a4a4a;
    border-color: #4a4a4a;
}

body.dark-mode .btn.success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

body.dark-mode .btn.danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

/* Icons and smaller UI elements */
body.dark-mode .close-button {
    color: #a0a0a0;
}

body.dark-mode .close-button:hover {
    color: #ffffff;
    background-color: #333333;
}

/* Information boxes */
body.dark-mode .info-box {
    background-color: #173052;
    border-left-color: var(--primary-color);
    color: #a8ceff;
}

body.dark-mode .warning-box {
    background-color: #3a2900;
    border-left-color: var(--warning-color);
    color: #ffd599;
}

body.dark-mode .success-box {
    background-color: #0a372a;
    border-left-color: var(--success-color);
    color: #a3f9db;
}

body.dark-mode .danger-box {
    background-color: #3b1a1a;
    border-left-color: var(--danger-color);
    color: #ffb3b3;
}

body.dark-mode .notice-box {
    background-color: #292929;
    border-left-color: var(--secondary-color);
    color: #d0d0d0;
}

/* Statistics box */
body.dark-mode .statistics-box {
    background-color: #232323;
    border-color: #444444;
}

/* Domain elements */
body.dark-mode .domain-button {
    background-color: #252525;
    border-color: #444444;
    color: #e1e1e1;
}

body.dark-mode .domain-button:hover {
    background-color: #333333;
    border-color: var(--primary-color);
}

body.dark-mode .domain-button.domain-completed {
    border-left-color: var(--success-color);
    background-color: rgba(45, 212, 165, 0.1);
}

body.dark-mode .domain-progress-button {
    background-color: #252525;
    border-color: #444444;
}

body.dark-mode .domain-progress-button:hover {
    background-color: #333333;
    border-color: var(--primary-color);
}

body.dark-mode .domain-progress-button.completed {
    background-color: rgba(45, 212, 165, 0.15);
    border-color: var(--success-color);
}

body.dark-mode .domain-progress-button.current {
    background-color: rgba(91, 154, 255, 0.15);
    border-color: var(--primary-color);
}

body.dark-mode .recommended-domain-button {
    background-color: #252525;
    border-color: var(--primary-color);
    color: #e1e1e1;
}

body.dark-mode .recommended-domain-button:hover {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* Progress steps */
body.dark-mode .progress-step {
    background-color: #333333;
    color: #e1e1e1;
    box-shadow: 0 0 0 4px rgba(30, 30, 30, 0.5);
}

body.dark-mode .progress-step.active {
    background-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

body.dark-mode .progress-step.completed {
    background-color: var(--success-color);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3);
}

body.dark-mode .progress-steps::before {
    background-color: #333333;
}

body.dark-mode .progress-label {
    color: #e1e1e1;
}

/* Domain items */
body.dark-mode .domain-item {
    border-bottom-color: #333333;
}

body.dark-mode .subcategory-title {
    border-bottom-color: #333333;
}

body.dark-mode .domain-item-comments {
    background-color: #252525;
    border-left-color: #444444;
    color: #a0a0a0;
}

/* Domain notes */
body.dark-mode .domain-note-item {
    background-color: #252525;
    border-color: #444444;
}

body.dark-mode .domain-note-title {
    border-bottom-color: #444444;
}

/* Flags */
body.dark-mode .flag.neutral {
    background-color: #3a3a3a;
    border-color: #555555;
}

body.dark-mode .flag.selected {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

body.dark-mode .flag.has-comment::after {
    background-color: #252525;
}

/* Comments */
body.dark-mode .comment-highlight {
    background-color: #173052;
    border-left-color: var(--primary-color);
}

/* Results and domain summaries */
body.dark-mode .domains-list li {
    border-left-color: #555555;
}

body.dark-mode .high-risk {
    background-color: #3b1a1a;
    border-left-color: var(--danger-color);
    color: #ffb3b3;
}

body.dark-mode .medium-risk {
    background-color: #3a2900;
    border-left-color: var(--warning-color);
    color: #ffd599;
}

body.dark-mode .low-risk {
    background-color: #0a372a;
    border-left-color: var(--success-color);
    color: #a3f9db;
}

body.dark-mode .high-protection {
    background-color: #0a372a;
    border-left-color: var(--success-color);
    color: #a3f9db;
}

body.dark-mode .medium-protection {
    background-color: #3a2900;
    border-left-color: var(--warning-color);
    color: #ffd599;
}

body.dark-mode .low-protection {
    background-color: #3b1a1a;
    border-left-color: var(--danger-color);
    color: #ffb3b3;
}

/* Interpretation guide */
body.dark-mode .scale-bar.risk-high,
body.dark-mode .scale-bar.protection-low {
    background-color: var(--danger-color);
}

body.dark-mode .scale-bar.risk-medium,
body.dark-mode .scale-bar.protection-medium {
    background-color: var(--warning-color);
}

body.dark-mode .scale-bar.risk-low,
body.dark-mode .scale-bar.protection-high {
    background-color: var(--success-color);
}

body.dark-mode .interpretation-notes {
    background-color: #1a1a1a;
    border-left-color: #444444;
}

body.dark-mode .intervention-explanation {
    background-color: #173052;
    border-left-color: var(--primary-color);
    color: #a8ceff;
}

/* Saved assessments */
body.dark-mode #saved-assessments-list {
    border-color: #444444;
}

body.dark-mode .saved-assessment-item {
    background-color: #252525;
    border-bottom-color: #333333;
}

body.dark-mode .saved-assessment-item:hover {
    background-color: #333333;
}

body.dark-mode .batch-actions-bar {
    background: #1e3a5f;
    border-color: #4a90e2;
}

body.dark-mode .batch-selection-info {
    color: #87ceeb;
}

/* Progress bars */
body.dark-mode .progress-container {
    background-color: #333333;
}

body.dark-mode .domain-completion-bar {
    background-color: #333333;
}

body.dark-mode .rar-progress-segment {
    background-color: #333333;
}

body.dark-mode .rar-progress-segment-tooltip {
    background-color: #252525;
    color: #e1e1e1;
}

/* Notifications */
body.dark-mode .notification {
    background-color: #252525;
    color: #e1e1e1;
    box-shadow: var(--shadow-lg);
}

/* Tables */
body.dark-mode table {
    border-color: #444444;
}

body.dark-mode th {
    background-color: #252525;
    color: #e1e1e1;
    border-color: #444444;
}

body.dark-mode td {
    border-color: #444444;
}

body.dark-mode .row-alternate {
    background-color: #232323;
}

/* Domain recommendations */
body.dark-mode .domain-recommendation-indicator.high-risk,
body.dark-mode .domain-recommendation-indicator.low-protection {
    background-color: var(--danger-color);
}

body.dark-mode .domain-recommendation-indicator.medium-risk {
    background-color: var(--warning-color);
}

body.dark-mode .domain-interaction-note {
    background-color: #173052;
    border-left-color: var(--primary-color);
    color: #a8ceff;
}

/* Help dialog */
body.dark-mode .help-sections,
body.dark-mode .help-flags,
body.dark-mode .help-contacts {
    background-color: #232323;
    border: 1px solid #444444;
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

/* SVG elements for hexagon charts */
body.dark-mode .hexagon-container svg text {
    fill: #e1e1e1;
}

body.dark-mode .hexagon-container svg line,
body.dark-mode .hexagon-container svg polygon[fill="none"] {
    stroke: #444444;
}

body.dark-mode .hexagon-tooltip {
    background-color: rgba(40, 40, 40, 0.9);
    color: #ffffff;
}

/* RAR sections */
body.dark-mode .rar-area-details {
    background-color: #252525;
    border-color: #444444;
}

body.dark-mode .rar-area-details h4 {
    border-bottom-color: #444444;
}

body.dark-mode .rar-progress-segment.active {
    background-color: var(--danger-color);
}

body.dark-mode .warning-text {
    color: var(--danger-color);
}

/* The most important style: make hidden elements actually hidden */
.hidden {
    display: none !important;
}


/* Print Styles - IMPROVED VERSION */
@media print {
    body {
        background-color: white;
        font-size: 11pt;
        color: black;
        margin: 0;
        padding: 0;
    }
    
    nav, footer, .button-group, #file-management, .progress-wrapper, 
    .no-print, .domain-navigation, .print-only,
    .interpretation-guide, .close-button {
        display: none !important;
    }
    
    #main-container {
        padding: 0;
        max-width: none;
        margin: 0;
    }
    
    .content-section {
        box-shadow: none;
        border: none;
        padding: 0;
        margin-bottom: 1cm;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
        color: black;
    }
    
    h1 { font-size: 16pt; }
    h2 { font-size: 14pt; }
    h3 { font-size: 12pt; }
    
    p, blockquote, ul, ol, dl, table {
        page-break-inside: avoid;
        orphans: 3;
        widows: 3;
    }
    
    img, figure {
        page-break-inside: avoid;
        max-width: 100% !important;
    }
    
    /* IMPROVED HEXAGON LAYOUT */
    .hexagon-summary-grid {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5cm;
        margin: 0.5cm 0;
        page-break-inside: avoid;
        flex-wrap: nowrap;
    }
    
    .hexagon-container {
        height: auto;
        min-width: auto;
    }
    
    .print-hexagon {
        height: 4.5cm;
        width: 4.5cm;
        page-break-inside: avoid;
    }
    
    .print-hexagon svg {
        max-width: 100%;
        max-height: 100%;
    }
    
    /* Better font sizes for print */
    .print-hexagon svg text {
        font-size: 8pt !important;
    }
    
    /* Make risk/protection titles clearer */
    .hexagon-summary-grid h3 {
        text-align: center;
        font-size: 12pt;
        margin-bottom: 0.3cm;
    }
    
    /* Make sure the report sections don't break inside */
    .report-section, .report-summary, .report-details, .report-intervention {
        page-break-inside: avoid;
        margin-bottom: 1cm;
        break-inside: avoid;
    }
    
    /* More compact domain items in print */
    .domain-item {
        margin-bottom: 0.5cm;
        padding-bottom: 0.5cm;
    }
    
    /* Better flags for print */
    .flag-indicator {
        display: inline-block;
        width: 8pt;
        height: 8pt;
        border-radius: 50%;
        margin-right: 3pt;
    }
    
    .flag-green { background-color: var(--success-color); }
    .flag-yellow { background-color: var(--warning-color); }
    .flag-red { background-color: var(--danger-color); }
    
    /* Force background colors and borders to print */
    .high-risk, .medium-risk, .low-risk,
    .high-protection, .medium-protection, .low-protection {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* Make header and footer tidy */
    .report-header {
        text-align: center;
        margin-bottom: 1cm;
        padding-bottom: 0.3cm;
        border-bottom: 1pt solid #ccc;
    }
    
    .report-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 15cm;
        margin: 0 auto;
    }
    
    .report-footer {
        margin-top: 1cm;
        padding-top: 0.3cm;
        border-top: 1pt solid #ccc;
        font-size: 9pt;
        color: #666;
        text-align: center;
    }

    a {
        color: black;
        text-decoration: underline;
    }
    
    .page-break {
        page-break-before: always;
    }
    
    @page {
        margin: 1.5cm;
        size: portrait;
    }
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    :root {
        --container-width: 100%;
    }
    
    .hexagon-grid, 
    .domain-grid,
    .domains-summary,
    .rar-details-container {
        grid-template-columns: 1fr;
    }
    
    .hexagon-wrapper {
        margin-bottom: 1.5rem;
    }
}

/* Burger menu - hidden on desktop */
.burger-menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    /* Show burger menu button */
    .burger-menu-toggle {
        display: flex;
    }

    /* Main nav layout on mobile */
    #main-nav {
        padding: 0 0.75rem;
        display: flex;
        gap: 0.5rem;
        align-items: center;
        justify-content: space-between;
    }

    .nav-left {
        flex-shrink: 0;
    }

    /* Center area with keep-visible buttons */
    #domain-button.keep-visible,
    #results-button.keep-visible {
        display: flex !important;
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
        flex-shrink: 0;
    }

    /* Push burger menu to the right */
    .burger-menu-toggle {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Hide nav-right by default on mobile */
    .nav-right {
        position: fixed;
        top: var(--header-height);
        right: 0;
        background-color: var(--dark-gray);
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        box-shadow: var(--shadow);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 99;
        width: 250px;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }

    /* Show nav-right when menu is open */
    .nav-right.mobile-menu-open {
        transform: translateX(0);
    }

    /* Hide the relevant button in the burger menu (it's in the nav bar) */
    .nav-right .nav-button.keep-visible {
        display: none !important;
    }

    /* Keep nav buttons visible in the menu */
    .nav-right .nav-button {
        width: 100%;
        justify-content: flex-start;
        padding: 0.75rem;
        margin: 0.25rem 0;
    }

    /* Show text in mobile menu */
    .nav-right .nav-button span:not(.icon) {
        display: inline;
        margin-left: 0.5rem;
    }

    /* Language selector in mobile menu */
    .nav-right .language-selector {
        width: 100%;
        margin: 0.5rem 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-right .language-selector span {
        display: block;
        margin-bottom: 0.5rem;
    }

    .nav-right .language-selector select {
        width: 100%;
    }

    /* Fix for nav buttons on mobile */
    .nav-button {
        padding: 0.5rem;
        min-width: 40px;
        justify-content: center;
    }

    /* Keep text visible for keep-visible buttons */
    .nav-button.keep-visible span:not(.icon) {
        display: inline;
        margin-left: 0.25rem;
        font-size: 0.875rem;
    }

    .icon {
        font-size: 1.4rem;
        margin: 0;
        display: block;
    }

    .domain-progress-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .button-group {
        flex-direction: column;
    }
    
    .button-row {
        width: 100%;
    }
    
    .button-row .btn {
        flex: 1;
    }
    
    .item-comment-button span {
        display: none;
    }
    
    .modal-content, .item-comment-content {
        padding: 1.5rem;
        width: 95%;
    }
    
    .close-button {
        right: 1rem;
        top: 1rem;
    }
    
    /* Mobile progress steps improvement */
    .progress-steps {
        margin-bottom: 1.5rem; /* Reduce margin */
    }
    
    .progress-step {
        width: 1.5rem; /* Slightly larger for better tapping */
        height: 1.5rem;
        font-size: 0.7rem; /* Show small numbers */
    }
    
    .progress-label {
        display: none; /* Hide all labels by default */
    }
    
    .progress-step.active {
        transform: scale(1.2); /* Make active step more noticeable */
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
    }
    
    /* Show only active step label */
    .progress-step.active .progress-label {
        display: block;
        width: auto;
        font-size: 0.65rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        bottom: -20px;
    }
}

@media (max-width: 480px) {
    #main-container {
        padding: 0 1rem;
    }
    
    .content-section {
        padding: 1.25rem;
    }
    
    .form-group,
    .statistics-box,
    .flag-info-box,
    .domain-next-recommendations,
    .domain-recommendations,
    .risk-summary-section,
    .rar-details-container,
    .domain-comments-summary {
        padding: 1rem;
    }
    
    .domain-item {
        flex-direction: column;
    }
    
    .flag-container {
        margin-top: 0.75rem;
        justify-content: flex-start;
    }
    
    .radio-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .scale-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .scale-row .scale-bar {
        width: 100%;
        margin: 0.25rem 0;
    }
    
    footer p {
        margin-bottom: 0; /* Remove margin for small screens */
        line-height: 1.3; /* Tighter line height */
        font-size: 0.7rem; /* Smaller font */
    }
}

/* Accessibility Improvements */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    z-index: 1001;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Enhanced Animations */
.btn, .domain-button, .domain-progress-button, .flag, .recommended-domain-button {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Footnote Styles */
.footnote-trigger {
    text-decoration: underline dotted;
    cursor: help;
    position: relative; /* Needed for tooltip positioning */
    color: var(--primary-color); /* Make it stand out slightly */
}

body.dark-mode .footnote-trigger {
    color: var(--primary-color); /* Ensure visibility in dark mode */
}

.footnote-tooltip {
    /* Core Appearance & Sizing */
    display: block; /* Ensure block behavior */
    background-color: var(--dark-gray);
    color: white;
    padding: 0.6rem 1rem;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: normal; /* Allow text wrapping */
    max-width: min(600px, calc(100vw - 20px)); /* Responsive width, max 600px or viewport minus margins */
    box-shadow: var(--shadow-md);
    z-index: 1010; /* Ensure it's above most elements */
    overflow: hidden; /* Keep for safety to contain text */

    /* State & Transitions (JS sets inline styles for visibility/position) */
    position: fixed; /* Match JS behavior */
    opacity: 0; /* Initial state: hidden */
    visibility: hidden; /* Initial state: hidden */
    pointer-events: none; /* Prevent interaction when hidden */
    transition: opacity 0.2s ease, visibility 0.2s ease; /* Animate fade */

    /* Initial off-screen position (JS will override this when showing) */
    top: -9999px;
    left: -9999px;
}

/* Dark Mode Styles */
body.dark-mode .footnote-tooltip {
    background-color: var(--gray-100);
    color: var(--dark-gray);
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
}

/* Show tooltip on hover (or via JS class) */
.footnote-trigger:hover .footnote-tooltip,
.footnote-trigger.show-tooltip .footnote-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}

/* Mobile optimizations for footnote tooltips */
@media (max-width: 768px) {
    .footnote-tooltip {
        width: calc(100vw - 20px);
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Accordion Styles */
.accordion-container {
    margin-top: 1.5rem;
}

.accordion-item {
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.accordion-header {
    background-color: var(--light-gray);
    color: var(--text-dark);
    cursor: pointer;
    padding: 1rem 1.25rem;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background-color var(--transition-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header:hover {
    background-color: var(--medium-gray);
}

.accordion-header::after {
    content: '+'; /* Indicator for collapsed state */
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--secondary-color);
    transition: transform var(--transition-base);
}

.accordion-header.active::after {
    content: '−';
}

.accordion-content {
    padding: 0 1.5rem; 
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.accordion-content.active {
    padding: 1.5rem;
    max-height: 1000px;
    border-top: 1px solid var(--medium-gray);
    max-height: 400px;
    overflow-y: auto;
}

/* Dark Mode Accordion Styles */
body.dark-mode .accordion-item {
    border-color: #444444;
}

body.dark-mode .accordion-header {
    background-color: #2d2d2d;
    color: #e1e1e1;
}

body.dark-mode .accordion-header:hover {
    background-color: #3a3a3a;
}

body.dark-mode .accordion-header::after {
    color: #8b96a7;
}

body.dark-mode .accordion-content {
    background-color: #1e1e1e;
}

body.dark-mode .accordion-content.active {
    border-top-color: #444444;
}


/* Add this rule to preserve paragraph formatting */
[data-i18n="results_intervention_description"] {
    white-space: pre-line;
}

[data-i18n="uncertainty_documentation_text"] {
    white-space: pre-line;
}

/* Loading Indicator Styles */
.loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--light-gray);
    padding: 2rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.loading-indicator.visible {
    opacity: 1;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--medium-gray);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-message {
    margin: 0;
    color: var(--text-color);
    font-size: 0.95rem;
    text-align: center;
}

/* Dark mode support for loading indicator */
body.dark-mode .loading-indicator {
    background: #2a2a2a;
    color: var(--text-light);
}

body.dark-mode .loading-spinner {
    border-color: #444;
    border-top-color: var(--primary-color);
}

/* Inline loading indicator (for containers) */
.loading-indicator:not([data-loading-id="global"]) {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
}

body.dark-mode .loading-indicator:not([data-loading-id="global"]) {
    background: rgba(42, 42, 42, 0.95);
}