/* ===== CSS CUSTOM PROPERTIES (DESIGN TOKENS) ===== */

/* 
 * Comprehensive design token system for consistent styling
 * - Responsive scaling with clamp() functions
 * - Semantic color tokens for better maintainability
 * - Logical property support for internationalization
 * - Dark mode theme variants
 */
:root {
    /* Base Colors */
    --bg-color: #fff;
    --light-bg: #f5f5f5;
    --light-border: #ddd;
    --text-color: #333;
    --primary-color: #333;
    --focus-color: #4D90FE;
    --link-color: #4D90FE;
    --list-marker-color: #555;
    --header-bg: #333;
    --toggle-bg: #e0e0e0;
    --toggle-thumb: #555;
    --button-primary: #007bff;
    --button-primary-hover: #0056b3;
    --button-disabled: #ccc;
    --button-secondary-bg: #f8f9fa;
    --button-secondary-hover: #e2e6ea;
    --button-secondary-border: #dae0e5;
    --spacing-xs: clamp(4px, 1vw, 8px);
    --spacing-sm: clamp(6px, 1.5vw, 10px);
    --spacing-md: clamp(8px, 2vw, 16px);
    --spacing-lg: clamp(16px, 3vw, 24px);
    --spacing-xl: clamp(24px, 4vw, 32px);
    --spacing-xxl: clamp(32px, 5vw, 48px);
    --font-size-xs: clamp(12px, 1.8vw, 13px);

    /* Increased minimum from 10px to 12px */
    --font-size-sm: clamp(14px, 2.5vw, 16px);

    /* Increased minimum from 12px to 14px */
    --font-size-md: clamp(14px, 3vw, 16px);
    --font-size-lg: clamp(16px, 3vw, 24px);
    --font-size-xl: clamp(18px, 4vw, 28px);
    --font-size-xxl: clamp(24px, 5vw, 32px);
    --border-radius: 8px;
    --transition-speed: 0.2s;

    /* Semantic Colors - Use these for consistent theming */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #4D90FE;
    --color-primary: #6f42c1;
    --color-secondary: #6c757d;
    --color-success-light: #d4edda;
    --color-warning-light: #fff3cd;
    --color-danger-light: #f8d7da;
    --color-info-light: #cce7ff;
    --color-primary-light: #e2d9f3;
    --color-secondary-light: #e2e3e5;
    --color-neutral: #666;
    --color-neutral-light: #ccc;
    --color-neutral-dark: #333;
    --color-accent: #ff8c00;
    --color-accent-light: #ffa54f;


    /* Border Radius Scale */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-full: 50%;
    --border-radius-pill: 1.5rem;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 1000;
    --z-modal: 1001;
    --z-toast: 1002;

    /* Content Layout Variables */
    --content-min-width: 300px;
    --image-min-width: 15rem;
    --image-min-height: 6.25rem;

    /* Hover States */
    --hover-bg: #f5f5f5;
}

[data-theme="dark"] {
    --light-border: #444;
    --text-muted: #999;
    --success-bg: #1e4620;
    --success-text: #d4edda;
    --success-border: #2a6e2d;
    --error-bg: #721c24;
    --error-text: #f8d7da;
    --error-border: #9e2631;
    --warning-bg: #856404;
    --warning-text: #fff3cd;
    --warning-border: #ffeaa7;
    --hover-bg: #444;
    --accent-color: var(--focus-color);
    --accent-light: #2d5a87;
    --bg-color: #222;
    --light-bg: #2d2d2d;
    --text-color: #e0e0e0;
    --primary-color: #f0f0f0;
    --focus-color: #5D9FFF;
    --link-color: #5D9FFF;
    --list-marker-color: #aaa;
    --header-bg: #333;
    --toggle-bg: #555;
    --toggle-thumb: #e0e0e0;

    /* Dark mode semantic colors */
    --color-info-light: rgb(93 159 255 / 20%);
    --color-success-light: rgb(40 167 69 / 20%);
    --color-warning-light: rgb(255 193 7 / 20%);
    --color-danger-light: rgb(220 53 69 / 20%);
    --color-primary-light: rgb(111 66 193 / 20%);
    --color-secondary-light: rgb(108 117 125 / 20%);

    /* Dark mode modal variables */
    --modal-backdrop-color: rgb(0 0 0 / 70%);
    --modal-shadow: 0 4px 20px rgb(0 0 0 / 60%);
}

* {
    box-sizing: border-box !important;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0 auto;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    max-width: 100%
}

a {
    color: var(--link-color);
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
    width: auto;

    /* so it doesn't take the width of a flex container */
}

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

/*
BUTTON SYSTEM:
- .btn (primary button - blue)
- .btn .btn-secondary (secondary button - gray)
- .btn .btn-link (link-style button)
*/

/* Unified button base class */
.btn {
    padding: .75rem 1rem;
    min-height: 2.5rem;
    background: var(--button-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: var(--spacing-sm);
    white-space: normal;
    font-size: var(--font-size-sm);
    justify-content: center;
    transition: background-color var(--transition-speed) ease;
    text-decoration: none;
}

.btn:hover,
.btn:focus {
    background: var(--button-primary-hover);
    transform: translateY(-1px);
}

.btn:active,
.btn:focus:active {
    background: var(--button-primary-hover);
    transform: translateY(1px);
}

/* Touch device support */
@media (hover: none) and (pointer: coarse) {
    .btn:active {
        background: var(--button-primary-hover);
        transform: scale(0.98);
    }

    /* Add touch feedback to all interactive elements */
    button:active,
    .btn:active,
    a:active,
    [role="button"]:active,
    .clickable:active {
        transform: scale(0.98);
        opacity: 0.8;
        transition: transform 0.1s ease, opacity 0.1s ease;
    }

    /* List items and cards touch feedback */
    .wall-block-item:active,
    .goal-item:active,
    .list-item:active {
        background-color: var(--light-bg);
        transform: scale(0.98);
    }

    /* Tab headers touch feedback */
    .quiz-tab-header:active {
        background-color: var(--light-bg);
        transform: scale(0.98);
    }

    /* Add ripple effect for better touch feedback */
    .btn,
    button {
        position: relative;
        overflow: hidden;
    }

    .btn::after,
    button::after {
        content: '';
        position: absolute;
        top: 50%;
        inset-inline-start: 50%;
        width: 0;
        height: 0;
        border-radius: var(--border-radius-full);
        background: rgb(255 255 255 / 30%);
        transform: translate(-50%, -50%);
        transition: width 0.2s ease, height 0.2s ease;
        pointer-events: none;
    }

    .btn:active::after,
    button:active::after {
        width: 120px;
        height: 120px;
    }
}

.btn:disabled {
    background: var(--button-disabled);
    cursor: not-allowed;
    transform: none;
}

/* REMOVED: .btn-loading - unused in codebase */

/* Button variants */

/* REMOVED: .btn-primary - redundant with base .btn class which already provides primary styling */

.btn-secondary {
    background-color: var(--button-secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--light-border);
}

.btn-secondary:hover {
    background-color: var(--button-secondary-hover);
    border-color: var(--button-secondary-border);
    transform: translateY(-1px);
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--color-neutral-dark);
    border-color: var(--color-neutral);
    color: var(--text-color);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--header-bg);
}

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

.btn-danger:hover {
    background-color: var(--color-danger);
    filter: brightness(90%);
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);

    /* Increased padding for better touch targets */
    font-size: var(--font-size-sm);

    /* Increased from 12px for accessibility */
    min-width: auto;
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--link-color);
    font-weight: normal;
    text-decoration: none;
    margin: 0;
}

.btn-link:hover {
    background: none;
    text-decoration: underline;
    color: var(--button-primary-hover);
    transform: none;
}


.button-container {
    margin-bottom: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    flex-wrap: nowrap;
}

/* Reusable button row class - prevents buttons from stretching in flex containers */
.button-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* .button-row  buttons with equal width and height enhancement */
.button-row .btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: fit-content;
    align-self: stretch; /* Override .button-row .btn's flex-start to stretch to full height */
    display: flex;
}

/* Reusable button-link row class - handles mixed buttons and links with consistent alignment */
.button-link-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Ensure buttons and links in button-link rows maintain consistent styling */
.button-link-row .btn {
    flex: 0 0 auto;
    width: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
}

/* Icon button component - used by iconButtonComponent.mjs */
.icon-button-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Mobile touch target: minimum 44x44px */
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease;
}

.icon-button-container:hover,
.icon-button-container:active {
    background-color: var(--light-bg);
}

.icon-button-container a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
}

/* Component-specific visibility classes */
.loading-overlay {
    position: absolute;
    background-color: var(--bg-color);
    padding: var(--spacing-sm);
    border-radius: 5px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    text-align: center;
    z-index: 110;
    cursor: pointer;

    /* Don't apply dark mode filter to loading overlay */
    filter: none;
}

.image-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    color: var(--color-neutral);
}

/* Image error placeholder - consolidated with enhanced definition at line ~5749 */

/* Input components */
.input-with-margin {
    margin: var(--spacing-xs);
}

/* Form pair components - input-pair, checkbox-pair, select-pair */
.input-pair,
.select-pair {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.input-pair label,
.select-pair label {
    font-weight: 500;
}

.input-pair input,
.select-pair select {
    flex: 1;
}

.checkbox-pair {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* ===== Properties Component ===== */

/* Standardized properties editing sections for content editors */

/* Properties section container */
.properties-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
}

.properties-section h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    color: var(--text-color);
}

/* Property rows */
.property-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed) ease;
}

/* Changed state indicator */
.property-row[data-changed="true"] {
    background-color: var(--light-bg);
    border-left: 3px solid var(--focus-color);
    padding-left: calc(var(--spacing-sm) - 3px);
}

/* Error state */
.property-row[data-error="true"] {
    background-color: rgb(220 53 69 / 5%);
    border-left: 3px solid var(--color-danger);
    padding-left: calc(var(--spacing-sm) - 3px);
}

[data-theme="dark"] .property-row[data-error="true"] {
    background-color: rgb(220 53 69 / 15%);
}

/* Property validation error message */
.property-validation-error {
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    display: block;
}

/* Property help text */
.property-help-text {
    color: var(--color-neutral);
    font-size: var(--font-size-xs);
    font-style: italic;
    margin-top: var(--spacing-xs);
    display: table-cell;
}

/* Advanced properties section (collapsible) */
.properties-advanced-section {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
}

.properties-advanced-section summary {
    cursor: pointer;
    font-weight: 600;
    padding: var(--spacing-xs);
    user-select: none;
    list-style: none; /* Remove default arrow */
}

.properties-advanced-section summary::-webkit-details-marker {
    display: none; /* Remove default arrow in WebKit */
}

.properties-advanced-section summary::before {
    content: '▶';
    display: inline-block;
    margin-right: var(--spacing-xs);
    transition: transform var(--transition-speed) ease;
}

.properties-advanced-section[open] summary::before {
    transform: rotate(90deg);
}

.properties-advanced-section summary:hover {
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.properties-advanced-fields {
    margin-top: var(--spacing-sm);
}

/* Form pairs within properties sections */
.properties-section .input-pair,
.properties-section .checkbox-pair,
.properties-section .select-pair {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.properties-section .input-pair label,
.properties-section .select-pair label {
    min-width: 120px;
    font-weight: 500;
}

.properties-section .input-pair input,
.properties-section .select-pair select {
    flex: 1;
}

/* ===== End Properties Component ===== */

.clickable {
    cursor: pointer;
}

/* Alignment */
.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

/* Spacing */
.gap-xs {
    gap: var(--spacing-xs);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

.margin-0 {
    margin: 0;
}

.padding-0 {
    padding: 0;
}

.padding-sm {
    padding: var(--spacing-sm);
}

.padding-md {
    padding: var(--spacing-md);
}

/* Text */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.font-bold {
    font-weight: bold;
}

.font-normal {
    font-weight: normal;
}

/* Sizing */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.max-w-full {
    max-width: 100%;
}

/* ===== PAGE CONTAINER PATTERNS ===== */

/* Base page container for consistent page layout */
.page-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.page-content-wrapper {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* ===== EXTENDED BUTTON SYSTEM ===== */

/* Additional semantic button variants */
.btn-success {
    background: var(--color-success);
    color: white;
}

.btn-warning {
    background: var(--color-warning);
    color: white;
}

.btn-success:hover,
.btn-success:focus {
    background: color-mix(in srgb, var(--color-success) 85%, black);
}

.btn-warning:hover,
.btn-warning:focus {
    background: color-mix(in srgb, var(--color-warning) 85%, black);
}

/* Fallback for browsers without color-mix support */
@supports not (color: color-mix(in srgb, red, blue)) {
    .btn-success:hover,
    .btn-success:focus {
        filter: brightness(0.85);
    }

    .btn-warning:hover,
    .btn-warning:focus {
        filter: brightness(0.85);
    }
}

/* ===== TABLE SYSTEM ===== */

/* Standardized table components */
.table-container {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    overflow: hidden;
    margin: var(--spacing-md) 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.table-standard {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table-standard th {
    background-color: var(--header-bg);
    color: white;
    padding: var(--spacing-sm);
    text-align: left;
    font-weight: 600;
}

.table-standard td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--light-border);
    transition: border-color 0.3s ease;
}

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

.table-standard tr:hover {
    background-color: var(--color-info-light);
}

/* ===== FORM SYSTEM ===== */

/* Standardized form components */
.form-section {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.form-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

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

/* REMOVED: .input-search - functionality now provided by base input {} rule with width/max-width as needed */

/* Generic form section layouts */
.input-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.button-section {
    display: flex;
    justify-content: flex-start;
}

.form-label {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--text-color);
    display: block;
}

/* Inline control label - for labels that sit beside controls (e.g., "Sort by:", "Filters:") */
.control-label {
    font-weight: 600;
    color: var(--text-color);
    margin-right: var(--spacing-md);
    white-space: nowrap;
}

/* Control group - horizontal layout for label + controls */
.control-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

/* Radio button pairs - standardized form component */
.radio-pair {
    display: block;
    line-height: 1.4;
}

.radio-pair input[type="radio"] {
    margin: 0;
    margin-right: var(--spacing-xs);
    vertical-align: middle;
}

.radio-pair label {
    font-weight: normal;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    line-height: 1.2;
}

/* Inline radio pair for use within flex containers */
.radio-pair.inline {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.radio-pair.inline input[type="radio"] {
    margin-right: var(--spacing-xs);
}

.radio-pair.inline label {
    margin-bottom: 0;
}

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

ul {
    padding-inline-start: 1em;
}

/* styling for top header */
#top-header-container {
    background-color: var(--header-bg);
    color: white;
    padding: var(--spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#left-header,
#right-header {
    display: flex;
    align-items: center;
}

#menu-icon,
#user-icon {
    font-size: 24px;
    cursor: pointer;
    margin: 0 var(--spacing-sm);
}

#user-icon {
    margin-top: 6px;
}

#company-logo {
    font-size: var(--font-size-lg);
    font-weight: bold;
    margin-inline-start: var(--spacing-sm);
    padding-top: var(--spacing-xs);
    cursor: pointer;
}

#favorites-icon {
    width: 44px;
    height: 44px;
    cursor: pointer;
    margin: 0 var(--spacing-sm);
    padding: var(--spacing-sm);
    box-sizing: border-box;
}

#favorites-icon svg {
    fill: none;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#search-icon {
    /* Mobile touch target: minimum 44x44px with visual icon centered */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    color: white;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease;
}

#search-icon:hover,
#search-icon:active {
    background-color: rgb(255 255 255 / 10%);
}

#search-icon svg {
    width: 24px;
    height: 24px;
}

.header-dark-mode-toggle {
    margin: 0 var(--spacing-sm);
}

/* Favorite star base pattern - Phase 4 CSS DRY consolidation */
.favorite-star-base {
    cursor: pointer;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    color: gold;
    transition: transform var(--transition-speed);
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    justify-content: center;
}

.favorite-star-base:hover,
.favorite-star-base:active {
    transform: scale(1.2);
}

.favorite-star-base-empty {
    opacity: 0.5;
}

.favorite-star-base-empty:hover,
.favorite-star-base-empty:active {
    opacity: 0.8;
}

/* Light theme text shadow for favorite stars */
[data-theme="light"] .favorite-star-base {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/* styling for sidebar */
#sidebar {
    position: fixed;
    inset-inline-start: -250px;
    top: 0;
    width: 250px;
    max-width: 100%;
    height: 100vh;
    background-color: var(--light-bg);
    transition: inset-inline-start 0.3s ease-in-out;
    z-index: var(--z-overlay);
    display: block;
}

#sidebar.open {
    inset-inline-start: 0;
    display: block;
}

#sidebar-close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: inherit;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item:hover,
.dropdown-item:active {
    color: inherit;
    text-decoration: none;
    background-color: var(--color-neutral-light);
}

/* Disable hover effect for sidebar menu items - use keyboard-selected instead */
#sidebar .dropdown-item:hover,
#sidebar .dropdown-item:active {
    background-color: transparent;
}

.dropdown-item.keyboard-selected {
    background-color: var(--color-neutral-light);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

#action-list {
    list-style-type: none;
    padding: var(--spacing-lg);
    margin: 0;
    margin-top: var(--spacing-md);
}

.divider {
    height: 1px;
    background-color: var(--light-border);
    margin: var(--spacing-md) 0;
}

/* General input styling - can be overridden by components */
input {
    /* Design system integration */
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 12px 16px;
    line-height: 1.4;
    
    /* Enhanced behavior */
    transition: border-color var(--transition-speed) ease;
    font-family: inherit;
}

input:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 20%);
}

/* Critical mobile conformance rules - excludes radio/checkbox/range */
input:not([type="radio"], [type="checkbox"], [type="range"]) {
    /* iPad-compatible foundation - cannot be overridden */
    min-height: 44px !important;           /* Apple touch target minimum */
    font-size: 16px !important;            /* Prevents iOS zoom */
    box-sizing: border-box !important;     /* Consistent sizing behavior */
    
    /* Remove browser defaults - cannot be overridden */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Platform-specific touch optimizations */
@media (pointer: coarse) {
    input:not([type="radio"], [type="checkbox"], [type="range"]) {
        min-height: 48px !important;       /* Slightly larger for touch */

        /* Padding removed to allow component-specific padding (e.g., search icon space) */
    }
}

/* Specific input width overrides */
.message-input {
    width: 180px;
}

.inline-submit-input {
    display: inline;
    margin: 5px;
}

.checkbox-input {
    margin-top: 5px;
}

/* Dark mode calendar icon fix for datetime-local inputs */
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* REMOVED: .input-standard - functionality now provided by base input {} rule */

select {
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    color: var(--text-color);
    background-color: var(--bg-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

select:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 20%);
}

.numberCircle {
    font: 12px Arial, sans-serif;

    /* change font-size to scale */
    width: 1.6em;
    height: 1.6em;
    background: var(--bg-color);
    border: 0.1em solid var(--color-neutral);
    color: var(--color-neutral);
    text-align: center;
    border-radius: var(--border-radius-full);
    line-height: 1.6em;
    box-sizing: content-box;
}

/* REMOVED: #youtube-player-container - unused in codebase */

/* ===== BASE PATTERN SYSTEM ===== */

/* 
 * Core reusable patterns consolidated from Phase 1 CSS DRY analysis
 * These base classes replace 20+ duplicate implementations across pages
 * See css-dry-phase-1-analysis-results.md for detailed findings
 */

/* Section Base Pattern - Replaces 5+ identical section patterns (~200 lines saved) */
.section-base {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    transition: background-color var(--transition-speed) ease, 
                border-color var(--transition-speed) ease;
}

/* Page Header Base Pattern - Replaces 6+ identical header patterns (~150 lines saved) */
.page-header-base {
    margin: var(--spacing-sm) 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.page-title-base {
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
}

.page-separator {
    margin: calc(var(--spacing-xs) * 1.25) 0;
    height: 1px;
    width: 100%;
    background-color: var(--light-border);
}

/* Table Base Pattern - Replaces 3+ table implementations (~300 lines saved) */
.table-base {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: var(--spacing-lg);
}

.table-header-base {
    background-color: var(--light-bg);
    color: var(--text-color);
    font-weight: bold;
    padding: clamp(10px, 2.5vw, 12px);
    text-align: left;
    border-bottom: 2px solid var(--light-border);
    cursor: pointer;
    position: relative;
    transition: background-color var(--transition-speed) ease;
}

.table-cell-base {
    padding: clamp(8px, 2vw, 10px);
    border-bottom: 1px solid var(--light-border);
    text-align: left;
}

/* Mobile Card Base Pattern - Replaces 3+ mobile card transformations (~400 lines saved) */

/* Note: These styles only apply in mobile breakpoints to preserve desktop table layout */
@media (width <= 600px) {
    .mobile-card-base {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: var(--spacing-lg);
        border-radius: var(--border-radius-lg);
        box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
        background-color: var(--bg-color);
        padding: clamp(10px, 2.5vw, 12px);
        position: relative;
        border: 1px solid var(--light-border);
        transition: box-shadow var(--transition-speed) ease;
    }

    .mobile-card-base:hover {
        box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
    }
}

@media (width <= 500px) {
    /* Hide company logo on very small screens */
    #company-logo {
        font-size: var(--font-size-sm);

        /* Increased from 12px for accessibility */
        margin-inline-start: var(--spacing-xs);
    }

    /* Make header elements smaller */
    #menu-icon,
    #user-icon {
        font-size: var(--font-size-xl);
        margin: 0 var(--spacing-xs);
    }

    #favorites-icon {
        width: 20px;
        height: 20px;
        margin: -7px 5px 0;
    }

    /* Adjust dark mode toggle */
    #top-header-container .theme-switch {
        width: 2.5rem !important;
        height: 1.2rem !important;
    }

    #top-header-container .theme-switch .slider::before {
        height: 0.8rem;
        width: 0.8rem;
    }

    #top-header-container input:checked+.slider::before {
        transform: translateX(1.2rem);
    }

    /* Hide toggle label on very small screens */
    #top-header-container .toggle-label {
        display: none;
    }

    /* Ensure header doesn't overflow */
    #top-header-container {
        padding: var(--spacing-xs);
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    #youtube-player-container {
        width: fit-content;
    }


    /* Activity title responsive styles */
    .activity-title {
        width: 100%;
        margin: var(--spacing-xs) 0;
        order: -1;
    }
}

@media (width <= 250px) {
    #company-logo {
        display: none;
    }
}

/* Add a mid-size breakpoint for smoother transition */
@media (width >= 501px) and (width <= 768px) {
    #company-logo {
        font-size: var(--font-size-lg);
    }

    #top-header-container .toggle-label {
        font-size: var(--font-size-xs);
    }
}

@media (width >= 1000px) {
    body {
        width: 1000px;
    }
}

/* Allow scrolling only on outer-container */
#outer-container {
    overflow: auto;
    flex: 1;
    width: 100%;
    margin: auto;
    text-align: left;
    max-width: 1000px;
    position: relative;
    display: flex;
    flex-direction: column;
}

#content-container {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    padding: var(--spacing-md);
}

#core-page-container {
    color: var(--text-color);
    position: relative;
    min-height: 50px;
}

.horSeparator {
    margin: var(--spacing-xs) 0 var(--spacing-xs) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: gray;
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.progress-bar {
    width: 100%;
    max-width: 300px;
    height: 20px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin: var(--spacing-sm) 0;
    flex: 1;
}

[data-theme="dark"] .progress-bar {
    background-color: #444;
    border-color: rgb(255 255 255 / 20%);
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-success);
    transition: width 0.5s ease-in-out;
    width: var(--progress-width, 0%);
}

/* Progress text */
.progress-text {
    margin-left: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
    white-space: nowrap;
    font-weight: 500;
}

/* Progress bar variants for different use cases */
.progress-group-container {
    display: flex;
    align-items: center;
    min-width: 200px;
    gap: var(--spacing-xs, 4px);
}

.progress-bar-min-width {
    min-width: 150px;
}

/* Shell component styles */

.shell-footer-copyright {
    display: block;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 75%;
    color: var(--color-neutral, #999);
}

/* Small progress bar variant (used in recent progress, skills table) */
.progress-bar-small {
    width: 60px;
    height: 12px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 6px;
    overflow: hidden;
    margin: 2px 0;
}

[data-theme="dark"] .progress-bar-small {
    background-color: #555;
    border-color: rgb(255 255 255 / 20%);
}

/* Compact progress bar variant (used in metacat, goals) */
.progress-bar-compact {
    width: 100%;
    height: 8px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin: 2px 0;
}

[data-theme="dark"] .progress-bar-compact {
    background-color: rgb(255 255 255 / 10%);
    border-color: rgb(255 255 255 / 20%);
}

/* Assessment progress bar variant (display flex with text layout) */
.progress-bar-info {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

/* Flexible progress bar variant (used in goals, constrained layouts) */
.progress-bar-flexible {
    width: 100%;
    min-width: 80px;  /* Much smaller min-width for constrained spaces */
    max-width: 100%;
    height: 12px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin: 2px 0;
    flex: 1;
}

[data-theme="dark"] .progress-bar-flexible {
    background-color: #555;
    border-color: rgb(255 255 255 / 20%);
}

/* Responsive progress bar (used in metacat page) */
.progress-bar-responsive {
    width: clamp(2.5rem, 5vw, 3rem);
    height: clamp(0.75rem, 1.5vw, 1rem);
    margin: 2px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

[data-theme="dark"] .progress-bar-responsive {
    background-color: #444;
    border-color: rgb(255 255 255 / 20%);
}


/* Mobile responsive adjustments for progress bar */
@media (width <= 480px) {
    .progress-bar {
        max-width: 100%;
        min-width: 30px;
    }
}

/* ===== TEST-OUT MODE INDICATORS ===== */

/* Visual indicators for testOutMode adjusted progress */

.testout-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-xs);
}

.testout-badge {
    background-color: var(--color-success);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

[data-theme="dark"] .testout-badge {
    background-color: var(--color-success);
    color: #fff;
}

.testout-tooltip {
    /* Leverages existing modal-system-content patterns */
    padding: var(--spacing-sm);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    font-size: var(--font-size-sm);
    max-width: 250px;
    z-index: 1000;
    position: absolute;
}

[data-theme="dark"] .testout-tooltip {
    background-color: #2a2a2a;
    border-color: #555;
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}

.testout-icon {
    font-size: var(--font-size-xs);
    color: var(--color-success);
}

/* Small variant for compact displays */
.testout-badge-small {
    font-size: calc(var(--font-size-xs) - 1px);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Progress bar with testout indicator integration */
.progress-bar-container.has-testout {
    position: relative;
}

.progress-bar-container .testout-indicator {
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
}

/* ===== USER PREFERENCES STYLES ===== */

/* Styles for user preferences modal and settings */

.preference-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .preference-section {
    background-color: #2a2a2a;
    border-color: #555;
}

.preference-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.preference-label {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
}

.preference-description {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
    margin: 0;
    line-height: 1.4;
}

/* Enhanced checkbox styling */
.preference-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--light-border);
    border-radius: 3px;
    background-color: var(--bg-color);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.preference-checkbox:checked {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.preference-checkbox:checked::after {
    content: "✓";
    position: absolute;
    top: -1px;
    left: 2px;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

[data-theme="dark"] .preference-checkbox {
    border-color: #555;
    background-color: #2a2a2a;
}

[data-theme="dark"] .preference-checkbox:checked {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;

    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== VIDEO MODAL SYSTEM ===== */

/* Video container for modal video display */
.video-container {
    position: relative;
    padding: 0;
    overflow: hidden;
    background-color: #000;
}

/* Video placeholder shown while YouTube API loads */
.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #111;
    color: #fff;
}

/* Loading spinner and text */
.video-loading {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: var(--font-size-sm);
    color: rgb(255 255 255 / 80%);
}

.video-loading::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: var(--spacing-sm) auto;
    border-radius: 50%;
    border: 4px solid rgb(255 255 255 / 20%);
    border-color: rgb(255 255 255 / 20%) rgb(255 255 255 / 20%) rgb(255 255 255 / 20%) rgb(255 255 255 / 80%);
    animation: video-loading 1.2s linear infinite;
}

@keyframes video-loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Video error state */
.video-error {
    padding: var(--spacing-lg);
    text-align: center;
    background-color: #333;
    color: #fff;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

[data-theme="dark"] .video-error {
    background-color: #222;
    color: var(--text-color);
}

.video-error p {
    margin: var(--spacing-xs) 0;
}

/* Responsive video modal adjustments */
@media (width <= 480px) {
    .modal-system-container.size-large {
        width: 95vw;
    }
    
    .modal-system-footer {
        flex-direction: column;
    }
    
    .modal-system-footer .btn {
        width: 100%;
        margin: var(--spacing-xs) 0;
    }
}



.modal-content {
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: auto;
    padding: var(--spacing-sm);
    transition: background-color 0.3s ease, color 0.3s ease;
}



/* Text content */
.modal-text-content {
    margin: var(--spacing-md) var(--spacing-sm);
    line-height: 1.5;
    color: var(--text-color);
    transition: color 0.3s ease;
}


/* Force text color in all nested elements for dark mode */
[data-theme="dark"] .modal-text-content p,
[data-theme="dark"] .modal-text-content div,
[data-theme="dark"] .modal-text-content span,
[data-theme="dark"] .modal-text-content h1,
[data-theme="dark"] .modal-text-content h2,
[data-theme="dark"] .modal-text-content h3,
[data-theme="dark"] .modal-text-content h4,
[data-theme="dark"] .modal-text-content h5,
[data-theme="dark"] .modal-text-content h6,
[data-theme="dark"] .modal-text-content li {
    color: var(--text-color) !important;
}

/* Image container */
.modal-image-container {
    margin: var(--spacing-sm);
    text-align: center;
    background-color: var(--bg-color);
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    display: inline-block;
    transition: border-color 0.3s ease;
}

[data-theme="dark"] .modal-image-container {
    border-color: var(--header-bg);

    /* Keep white background for images in dark mode */
}

/* Images */
.modal-image {
    max-width: 100%;
    margin: 0;
    filter: none !important;

    /* Never apply any filter to images */
}

/* Links inside modal content */
.modal-text-content a {
    font-weight: bold;
}

[data-theme="dark"] .modal-text-content a {
    color: var(--focus-color);
}

[data-theme="dark"] .modal-text-content a:hover {
    color: var(--focus-color);
}


/* styling for prompts/messages */
.prompt-dialog {
    background-color: var(--bg-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
    color: var(--text-color);
}

[data-theme="dark"] .prompt-dialog {
    box-shadow: 0 4px 20px rgb(0 0 0 / 50%);
}

.prompt-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: var(--font-size-xl);
    color: var(--text-color);
}


.prompt-message {
    margin-bottom: 20px;
    color: var(--color-neutral);
    line-height: 1.4;
}

[data-theme="dark"] .prompt-message {
    color: var(--color-neutral-light);
}

.prompt-button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}


.prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-overlay);
}

/* ================================================
   UNIFIED MODAL SYSTEM STYLES
   Component-based modal system with consistent design
   ================================================ */

/* Modal System Root Variables */
:root {
    --modal-z-index: 1000;
    --modal-backdrop-color: rgb(0 0 0 / 50%);
    --modal-border-radius: 8px;
    --modal-padding: var(--spacing-lg);
    --modal-shadow: 0 4px 20px rgb(0 0 0 / 30%);
    --modal-max-width-small: 450px;
    --modal-max-width-medium: 600px;
    --modal-max-width-large: 800px;
    --modal-animation-duration: 0.3s;

    /* Mobile-specific modal sizing variables
     * These handle device-specific viewport adjustments for fullscreen modals
     * to prevent overlap with system UI (navigation bars, browser chrome, etc.)
     */
    --modal-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --modal-android-nav-offset: 48px; /* Portrait: Android 3-button navigation bar */
    --modal-android-nav-offset-landscape: 60px; /* Landscape: More space for nav + browser chrome */
    --modal-fullscreen-height-mobile: calc(100dvh - var(--modal-android-nav-offset) - var(--modal-safe-area-bottom));
    --modal-fullscreen-height-mobile-landscape: calc(100dvh - var(--modal-android-nav-offset-landscape) - var(--modal-safe-area-bottom));
}

/* ===== UNIFIED MODAL SYSTEM ===== */

/* ================================================
   MODAL SYSTEM - SCROLL ARCHITECTURE

   Understanding Modal Scrolling Behavior:

   The modal system uses different scroll containers depending on modal type and size.
   This layered approach prevents scroll conflicts and ensures proper mobile behavior.

   FULLSCREEN MODALS (size-fullscreen):
   -----------------------------------
   Scroll Container: .content-modal-wrapper
   - This is the ONLY scrollable element in fullscreen modals
   - .modal-system-container has overflow: hidden (prevents container scroll)
   - .modal-system-content has overflow: hidden (prevents content area scroll)
   - .content-modal-wrapper has overflow-y: auto (handles ALL scrolling)

   Why this matters:
   - Prevents double-scrolling issues on mobile devices
   - Ensures proper scroll behavior with Android navigation bars
   - Maintains header/footer visibility while content scrolls

   STANDARD MODALS (small, medium, large):
   ---------------------------------------
   Scroll Container: .modal-system-content
   - .modal-system-container has overflow: auto (handles modal scroll)
   - .modal-system-content has overflow: auto (content area can scroll)
   - .content-modal-wrapper inherits overflow behavior

   DOM Structure (Fullscreen):
   .modal-system-overlay (fixed positioning, centers modal)
     └── .modal-system-container.size-fullscreen (flex column, overflow: hidden)
           ├── .modal-system-header (flex-shrink: 0, never scrolls)
           └── .modal-system-content (flex: 1, overflow: hidden)
                 └── .content-modal-wrapper (height: 100%, overflow-y: auto) ← SCROLLS HERE
                       └── actual content (forms, text, images, etc.)

   DOM Structure (Standard Sizes):
   .modal-system-overlay (fixed positioning, centers modal)
     └── .modal-system-container (flex column, overflow: auto) ← SCROLLS HERE
           ├── .modal-system-header (flex-shrink: 0)
           └── .modal-system-content (flex: 1, overflow: auto)
                 └── .content-modal-wrapper (inherits overflow)
                       └── actual content

   Mobile Considerations:
   - 100dvh (dynamic viewport height) adjusts for mobile keyboards
   - Safe area insets prevent content from being hidden behind notches
   - Android navigation bar offset (48px portrait, 60px landscape)
   - Touch targets meet 44px minimum for accessibility

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

/*
 * Modern modal system with the following features:
 * - Size variants: small, medium, large, fullscreen
 * - Accessibility: focus management, ARIA labels, keyboard navigation
 * - Animations: fade in/out with proper state management
 * - Responsive: adapts to different screen sizes
 */

/* Modal System Overlay - Full screen backdrop */
.modal-system-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--modal-backdrop-color);
    z-index: var(--modal-z-index);
    display: flex;
    align-items: center;
    justify-content: center;

    /* Default state: invisible - JavaScript will control visibility via modal-visible class */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--modal-animation-duration) ease,
        visibility var(--modal-animation-duration) ease;
}

.modal-system-overlay.modal-visible {
    opacity: 1;
    visibility: visible;
}

/* Mobile keyboard fix: position modal from top instead of center */
@media (max-width: 768px) {
    .modal-system-overlay {
        align-items: flex-start;
        padding-top: 5vh;
        height: 100dvh; /* Dynamic viewport height adjusts for mobile keyboard */
    }
}

/* Modal System Container - The actual modal */
.modal-system-container {
    background: var(--bg-color);
    border-radius: var(--modal-border-radius);
    box-shadow: var(--modal-shadow);
    max-height: 90vh;
    overflow: auto; /* Standard modals: container handles scrolling when content exceeds viewport */
    display: flex;
    flex-direction: column;
    position: relative;
    transform: scale(0.9);
    transition: transform var(--modal-animation-duration) ease,
        background-color 0.3s ease,
        border-color 0.3s ease;

    /* Fix for pointer-events inheritance issues */
    pointer-events: auto;

    /* Support for custom properties from JavaScript */
    width: var(--modal-width, 100%);
    max-width: var(--modal-max-width, var(--modal-max-width-medium));
}

/* NEW: Data-attribute based state management for modal containers */
.modal-system-overlay[data-modal-state="visible"] .modal-system-container {
    transform: scale(1);
}

.modal-system-overlay[data-modal-state="hiding"] .modal-system-container {
    transform: scale(0.9);
}

/* Modal Size Variants */
.modal-system-container.size-small {
    max-width: var(--modal-max-width-small);
    width: 100%;
}

.modal-system-container.size-medium {
    max-width: var(--modal-max-width-medium);
    width: 100%;
}

.modal-system-container.size-large {
    max-width: var(--modal-max-width-large);
    width: 100%;
}

.modal-system-container.size-fullscreen {
    width: 95vw;
    height: 95vh;
    max-width: none;
    max-height: 95vh;
    overflow: hidden; /* Fullscreen: container NEVER scrolls - .content-modal-wrapper handles all scrolling */
}

/* Ensure fullscreen modal content area fills available space */
.modal-system-container.size-fullscreen .modal-system-content {
    flex: 1 1 auto;
    min-height: 0; /* Critical for flex child to shrink */
    overflow: hidden; /* Fullscreen: content area NEVER scrolls - .content-modal-wrapper handles scrolling */
}

/* Content wrapper inside modal - this is the actual scrollable container for fullscreen modals */
.modal-system-container.size-fullscreen .content-modal-wrapper {
    height: 100%;
    overflow-y: auto; /* Fullscreen: wrapper is the ONLY scroll container - prevents mobile scroll conflicts */
    overscroll-behavior: contain; /* Prevents scroll chaining to parent elements */
}

/* Modal Header */
.modal-system-header {
    flex-shrink: 0; /* Prevent header from being compressed on mobile */
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    border-bottom: 1px solid var(--light-border);
    background-color: var(--light-bg);
    border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.modal-system-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-align: center;
    color: var(--text-color);
    padding-inline-end: 2rem;
    transition: color 0.3s ease;
}

/* Modal Content Area */
.modal-system-content {
    flex: 1 1 auto;
    padding: var(--spacing-lg);
    overflow: auto; /* Standard modals: content area can scroll. Fullscreen: overridden to 'hidden' */
    color: var(--text-color);
    transition: color 0.3s ease;
    text-align: center;
    line-height: 1.5;
}

/*
 * Content Modal Wrapper
 *
 * IMPORTANT: This wrapper is created by ContentModalComponent.mjs and sits between
 * .modal-system-content and the actual modal content (forms, text, etc.).
 *
 * Purpose:
 * - Provides a scrollable container for modal content
 * - Allows fine-grained control over padding and overflow behavior
 * - Enables different scroll behavior for different modal sizes
 *
 * DOM Structure:
 * .modal-system-overlay
 *   └── .modal-system-container
 *         ├── .modal-system-header (flex-shrink: 0)
 *         └── .modal-system-content (flex: 1, may have overflow)
 *               └── .content-modal-wrapper ← THIS ELEMENT
 *                     └── actual content (HTML string or elements)
 *
 * Note: This wrapper can be configured via ContentModalComponent options:
 * - scrollable: true/false - controls overflow behavior
 * - padding: true/false - controls default padding
 */
.content-modal-wrapper {
    /* Default: inherit overflow from parent .modal-system-content */
    /* Can be overridden to 'hidden' via JavaScript for specific use cases */
    width: 100%;
}

/* Modal Footer */
.modal-system-footer {
    flex-shrink: 0; /* Prevent footer from being compressed on mobile */
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--light-border);
    background-color: var(--light-bg);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Modal Close Button */
.modal-system-close {
    position: absolute;
    top: var(--spacing-sm);
    inset-inline-end: var(--spacing-sm);
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-color);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: color 0.3s ease, background-color 0.3s ease;
    z-index: 1;
    /* Mobile touch target: minimum 44x44px */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-system-close:hover,
.modal-system-close:active {
    color: var(--color-neutral);
    background-color: rgb(0 0 0 / 10%);
}

.modal-system-close:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

[data-theme="dark"] .modal-system-close:hover,
[data-theme="dark"] .modal-system-close:active {
    color: var(--color-neutral-light);
    background-color: rgb(255 255 255 / 10%);
}

/* Body class when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Mobile Responsive Styles */
@media (width <= 768px) {
    .modal-system-overlay {
        padding: var(--spacing-sm);

        /* Use more screen space on mobile */
        align-items: flex-start;
        padding-top: 5vh;
    }

    .modal-system-container:not(.size-fullscreen) {
        width: calc(100vw - 16px);
        max-width: none;
        margin: 0;

        /* Better mobile positioning */
        max-height: 90vh;
        position: relative;
        top: auto;
        inset-inline-start: auto;
        transform: none;
    }

    .modal-system-container.size-fullscreen {
        width: 100vw;
        /* Use custom property for device-specific viewport adjustments */
        height: var(--modal-fullscreen-height-mobile);
        border-radius: 0;
        max-height: var(--modal-fullscreen-height-mobile);
        overflow: hidden; /* Prevent modal container scroll, content area handles scrolling */
        /* Safe area padding is included in the custom property calculation */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
    }

    /* Fix positioning for fullscreen modals - align to top to maximize space */
    .modal-system-overlay:has(.modal-system-container.size-fullscreen) {
        padding-top: 0;
        align-items: flex-start; /* Start at top to avoid wasting space */
    }

    .modal-system-header,
    .modal-system-content,
    .modal-system-footer {
        padding: var(--spacing-md);
    }

    .modal-system-title {
        font-size: var(--font-size-md);
        padding-inline-end: 4rem;

        /* More space for close button on mobile - increased to prevent overlap */
    }
}

/* Small screen adjustments */
@media (width <= 480px) {
    .modal-system-overlay {
        padding: var(--spacing-xs);
        padding-top: 2vh;
    }

    .modal-system-container:not(.size-fullscreen) {
        width: calc(100vw - 8px);
        max-height: 95vh;
    }

    .modal-system-header,
    .modal-system-content,
    .modal-system-footer {
        padding: var(--spacing-sm);
    }

    .modal-system-footer {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .modal-system-footer .btn {
        width: 100%;
        min-height: 44px;

        /* Ensure touch targets */
    }
}

/* Mobile landscape - browser chrome takes more vertical space proportionally */
@media (max-width: 915px) and (orientation: landscape) {
    .modal-system-container.size-fullscreen {
        /* Landscape uses different offset for nav bar + browser chrome */
        height: var(--modal-fullscreen-height-mobile-landscape);
        max-height: var(--modal-fullscreen-height-mobile-landscape);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modal-system-container {
        border: 2px solid var(--text-color);
    }

    .modal-system-header,
    .modal-system-footer {
        border-color: var(--text-color);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .modal-system-overlay,
    .modal-system-container {
        transition: none;
    }
}

/* Focus management for accessibility */

/* Modal is announced to screen readers via aria-modal="true" attribute */

/* Dialog-specific styles */
.modal-system-container.modal-dialog {
    max-width: var(--modal-max-width-small);
}

.modal-system-container.modal-dialog .modal-system-content .dialog-message {
    margin-bottom: var(--spacing-md);
    color: var(--color-neutral);
    line-height: 1.6;
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .modal-system-container.modal-dialog .modal-system-content .dialog-message {
    color: var(--color-neutral-light);
}

.modal-system-container.modal-dialog .modal-system-footer {
    /* Match original prompt-button-container styling */
    justify-content: center;
    background-color: transparent;
    border-top: none;
    padding: var(--spacing-md);
    border-radius: 0;
    display: flex;
    gap: var(--spacing-md);
}

/* Ensure dialog buttons have consistent minimum width */
.modal-system-container.modal-dialog .modal-system-footer .btn {
    min-width: 120px;
}

/* Success dialog variant - visual indicator for success states */
.modal-system-container.modal-dialog.dialog-success .modal-system-header {
    background-color: var(--color-success-light);
    border-bottom-color: var(--color-success);
}

.modal-system-container.modal-dialog.dialog-success .modal-system-title::before {
    content: '✓ ';
    color: var(--color-success);
    font-weight: 700;
    margin-inline-end: var(--spacing-xs);
}

/* Dark mode support for success variant */
[data-theme="dark"] .modal-system-container.modal-dialog.dialog-success .modal-system-header {
    background-color: var(--success-bg);
    border-bottom-color: var(--success-border);
}

[data-theme="dark"] .modal-system-container.modal-dialog.dialog-success .modal-system-title::before {
    color: var(--success-text);
}

/* ================================================
   END UNIFIED MODAL SYSTEM STYLES
   ================================================ */

/* NOTE: Assessment recommendation overlay styles are in page-styles.css */

/* ================================================
   STANDARDIZED DATA-ATTRIBUTE STATE MANAGEMENT
   ================================================ */

/*
 * Modern CSS state management using data attributes instead of CSS classes.
 * This approach separates concerns: CSS owns display values, JavaScript controls state.
 * Follows CSS conformance standards for maintainable, scalable UI state management.
 *
 * Usage:
 * JavaScript: element.dataset.display = 'false'; // Hide element
 * JavaScript: delete element.dataset.display;    // Show element (uses natural CSS display)
 * JavaScript: element.dataset.visible = 'false'; // Hide with visibility
 * JavaScript: delete element.dataset.visible;    // Show with visibility
 */

 /* Modern data-attribute state management */
[data-visible='false'] {
    visibility: hidden !important;
}

[data-display='false'] {
    display: none !important;
}

/* Elements without these attributes use their natural CSS values */

/* DEPRECATED: Legacy state management classes - DO NOT USE IN NEW CODE */

/* Use data-visible='false' for visibility: hidden */

/* Use data-display='false' for display: none */

/* REMOVED: .hidden class - use data-display='false' instead */

/* REMOVED: .visible class - elements now use natural display values via data attributes */

/* Opacity state management - for fade effects */
[data-opacity="false"] {
    opacity: 0 !important;
}

/* Combined visibility and pointer events - for interactive hiding */
[data-interactive="false"] {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Modal-specific data-attribute state management */
[data-modal-state="hidden"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

[data-modal-state="visible"] {
    opacity: 1 !important;
    visibility: visible !important;
}

[data-modal-state="hiding"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Transform-based hiding for animations */
[data-transform-state="hidden"] {
    transform: scale(0.9) !important;
}

[data-transform-state="visible"] {
    transform: scale(1) !important;
}

/*
 * Migration helper classes - temporary support for legacy class-based state management
 * These will be removed once all components are migrated to data-attribute approach
 */
.legacy-hidden { display: none !important; }
.legacy-invisible { visibility: hidden !important; }

/* ================================================
   END STANDARDIZED DATA-ATTRIBUTE STATE MANAGEMENT
   ================================================ */

/* ================================================
   ADMIN MODAL SYSTEM EXTENSIONS
   ================================================ */

/* Admin video modal content */
.admin-video-modal-content {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
    color: var(--admin-text-color, var(--text-color));
    background: var(--bg-color);
}

/* Admin video item in modal */
.admin-video-item {
    border-bottom: 1px solid var(--admin-border-color, var(--light-border));
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

/* Remove bottom border from last video item */
.admin-video-item:last-child {
    border-bottom: none;
}

/* ================================================
   END ADMIN MODAL SYSTEM EXTENSIONS
   ================================================ */

/* ================================================
   GOALS COMPONENT STYLES
   ================================================ */


/* ================================================
   END GOALS COMPONENT STYLES
   ================================================ */

.confetti-container {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--color-danger);
    border-radius: var(--border-radius-full);
    opacity: 0;
}

@keyframes confettiAnimation {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translate(var(--x), var(--y)) rotate(720deg);
        opacity: 0;
    }
}

.hotspot {
    cursor: pointer;
    position: absolute;
    border: 2px solid var(--color-danger);
    background-color: var(--color-danger);
    box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
}

/* Question page specific styles */
.question-text,
.answer-section,
.response-section {
    font-size: var(--font-size-md);
    margin-bottom: 0.1rem;
    line-height: 1.2;
    box-sizing: border-box;

    /* Ensure padding is included in width */
    transition: width 0.3s ease;

    /* Smooth transition when width changes */
}

.question-text {
    font-weight: bold;
}

.answer-section {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.answer-option {
    display: flex;
    align-items: baseline;
    padding: 0.3rem;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s;
    cursor: pointer;
    margin-inline-start: var(--spacing-xs);
}

.answer-option:hover {
    background-color: rgb(0 0 0 / 5%);
}

.answer-option input[type="radio"] {
    margin-inline-end: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
}

.answer-option label {
    cursor: pointer;
    flex: 1;
}

.response-section {
    min-height: 3rem;
}

.response-text {
    padding: 0.5rem 0;
    font-weight: bold;
    min-height: 24px;

    /* Ensure this area has height even when empty */
    width: 100%;

    /* Take full width of its parent container */
}

/* Image wrapper for question pages */
.question-image-wrapper {
    display: block;
    margin-bottom: 1rem;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

/* Scaled question page specific styling */
[data-scaled="true"] .answer-option {
    padding: 0.75rem 0.5rem;
}

[data-scaled="true"] .answer-option input[type="radio"] {
    transform: scale(1.2);
    margin-inline-end: 1rem;
}

[data-scale-factor] .question-text {
    font-size: calc(1rem / var(--scale-factor, 1));
    margin-bottom: calc(1.5rem / var(--scale-factor, 1));
}

[data-scale-factor] .answer-option {
    padding: calc(0.5rem / var(--scale-factor, 1));
}

[data-scale-factor] .answer-option input[type="radio"] {
    transform: scale(calc(1.2 / var(--scale-factor, 1)));
    margin-inline-end: calc(0.75rem / var(--scale-factor, 1));
}

/* Make sure the buttons remain clickable at all scales */
.viewport-scaler-wrapper .answer-option {
    position: relative;
    z-index: 5;
}

/* ViewportScaler styles */
.viewport-scaler-wrapper {
    transform-origin: top left;
    width: 100%;
    position: relative;
    overflow: visible !important;
}

.viewport-scaler-wrapper * {
    max-height: none !important;
}

/* Prevent unnecessary whitespace */
.viewport-scaler-wrapper #main-container {
    margin-bottom: 0 !important;
}

.viewport-scaler-wrapper #main-container button {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* Make sure continue button doesn't add extra height */
.viewport-scaler-wrapper .btn {
    margin-bottom: 5px !important;
}


/* Dark Mode Toggle in Header Styles */
#top-header-container .theme-switch-wrapper {
    margin: 0;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

#top-header-container .toggle-label {
    margin-inline-start: 0.625rem;
    font-size: var(--font-size-sm);
    color: white;

    /* Always white for visibility against dark header */
    white-space: nowrap;
}

#top-header-container .theme-switch {
    display: inline-block;
    height: 1.5rem;
    position: relative;
    width: 3rem;
    margin: 0 var(--spacing-sm);
    vertical-align: middle;
}

#top-header-container .theme-switch input {
    display: none;
}

#top-header-container .slider {
    background-color: var(--color-neutral);
    inset: 0;
    cursor: pointer;
    position: absolute;
    transition: .4s;
    border-radius: var(--border-radius-pill);
}

#top-header-container .slider::before {
    background-color: white;
    bottom: 0.25rem;
    content: "";
    height: 1rem;
    inset-inline-start: 0.25rem;
    position: absolute;
    transition: .4s;
    width: 1rem;
    border-radius: var(--border-radius-full);
}

#top-header-container input:checked+.slider::before {
    transform: translateX(1.5rem);
}

/* Apply theme colors to main content areas */
[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] #content-container {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] #sidebar {
    background-color: var(--color-neutral-dark);
}

/* hover color for sidebar item */
[data-theme="dark"] a.dropdown-item:hover {
    background-color: black;
}

/* Disable hover effect for sidebar menu items in dark mode - use keyboard-selected instead */
[data-theme="dark"] #sidebar a.dropdown-item:hover {
    background-color: transparent;
}

/* keyboard selection for sidebar item in dark mode */
[data-theme="dark"] a.dropdown-item.keyboard-selected {
    background-color: black;
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Make sure images display correctly in dark mode */
[data-theme="dark"] img:not([data-native-dark="true"]) {
    filter: invert(1) hue-rotate(180deg);
}


/* Ensure images are not inverted in dark mode */
[data-theme="dark"] img[data-no-invert="true"] {
    filter: none !important;

    /* Override the global inversion */
}

/* Ensure theme colors are applied to rendered content */
[data-theme="dark"] #core-page-container {
    color: var(--text-color, #e0e0e0);
    background-color: var(--bg-color, #222);
}

/* Make sure all text in the rendered content gets proper colors,
   EXCEPT elements that are explicitly exempted */
[data-theme="dark"] #core-page-container *:not([data-dark-mode-exempt="true"]) {
    color: var(--text-color, #e0e0e0);
}

/* For specific elements that need explicit styling,
   also excluding exempted elements */
[data-theme="dark"] #core-page-container h1:not([data-dark-mode-exempt="true"]),
[data-theme="dark"] #core-page-container p:not([data-dark-mode-exempt="true"]),
[data-theme="dark"] #core-page-container li:not([data-dark-mode-exempt="true"]) {
    color: var(--text-color, #e0e0e0);
}

/* Ensure help links maintain proper color in dark mode */
[data-theme="dark"] #core-page-container a:not([data-dark-mode-exempt="true"]) {
    color: var(--link-color) !important;
}

[data-theme="dark"] #core-page-container a:hover {
    color: var(--button-primary-hover) !important;
}

[data-theme="light"] img[data-native-dark="true"],
:root:not([data-theme]) img[data-native-dark="true"] {
    filter: invert(1) hue-rotate(180deg);
}

/* Wall UI Specific Styles */

/* Wall container styles */
.wall {
    box-sizing: border-box;
}

/* Category page wall container - ensure proper spacing and prevent overlaps */
.category-page-wall-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: var(--spacing-lg) 0;

    /* Increased margin for better separation */
    padding: var(--spacing-xs);

    /* Add padding to prevent edge clipping */
    overflow: visible;

    /* Allow recent indicators to show */
    position: relative;

    /* Proper positioning context */
}

.wall-instructions {
    margin: var(--spacing-xs);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--text-color-secondary, var(--text-color));
    text-align: left;
}

/* Wall sphere styling improvements */
.wall-sphere-interactive {
    cursor: pointer;
    pointer-events: auto;
    margin: 0;
}

.wall-sphere-icon-mode {
    border: none;
}

.wall-block-overflow-visible {
    overflow: visible !important;
}

.wall-full-mode {
    width: fit-content;
    max-width: min(500px, calc(100vw - 2 * var(--spacing-lg)));

    /* Ensure wall fits within viewport */
    text-align: center;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-md) auto;

    /* Add vertical margin and center horizontally */
    padding: var(--spacing-sm);
    position: relative;

    /* Ensure proper positioning context */
    overflow: visible !important;
}

/* Sphere color classes - using background colors from original inline styles */
.sphere-red {
    background-color: var(--color-danger-light);
}

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

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

/* Wall items hover behavior */
.wall-item-hover {
    color: var(--color-accent) !important;

    /* Orange color for hover state */
}

/* Recent item indicators */
.recent-item {
    color: var(--color-danger) !important;
}

.recent-indicator {
    font-size: var(--font-size-xs);
    color: var(--focus-color);
    font-style: italic;
    margin: 0 var(--spacing-xs) var(--spacing-xs) var(--spacing-xs);
}

/* Recent sphere indicator */
.recent-sphere {
    position: relative;
}

.recent-sphere::after {
    content: '';
    position: absolute;
    top: -2px;

    /* Reduced from -4px to prevent header overlap */
    right: -2px;

    /* Reduced from -4px to stay within bounds */
    width: 6px;

    /* Slightly smaller to fit better */
    height: 6px;

    /* Slightly smaller to fit better */
    background-color: var(--color-danger);
    border-radius: var(--border-radius-full);
    border: 1px solid var(--bg-color);

    /* Add white border for better visibility */
    z-index: 10;

    /* Ensure it appears above other elements */

    /*  animation: pulse 2s infinite; */
}

/* Pulse animation for recent indicator */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(255 0 0 / 70%);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgb(255 0 0 / 0%);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(255 0 0 / 0%);
    }
}

/* Dark mode support for recent sphere indicator */
[data-theme="dark"] .recent-sphere::after {
    background-color: var(--color-danger);
    box-shadow: 0 0 0 0 rgb(255 85 85 / 70%);
}

/* Activity rows styling */
.act-row {
    margin: var(--spacing-xs) var(--spacing-xs) 0 0;
    display: flex;
}

.act-row-left {
    display: inline-block;
    width: 45px;
    height: 19px;
}

.act-row-right {
    display: inline-block;
    max-width: 75%;
    vertical-align: top;
}

/* List block items - consolidated with modern definition at line ~4297 */

/* List sphere container */
.list-sphere-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* List title styling */
.list-title {
    margin-inline-end: var(--spacing-sm);
}

/* Wall block items */
.wall-block-item {
    overflow: visible;

    /* Allow recent sphere indicators to show */
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    transition: color 0.2s ease;
}

.wall-block-item.small-text {
    font-size: var(--font-size-xs) !important;

    /* Increased from 8px for accessibility */
}

.wall-block-item.medium-text {
    font-size: var(--font-size-sm) !important;

    /* Increased from 10px for accessibility */
}

/* Wall sphere items */
.wall-sphere {
    transition: color 0.2s ease;
}

/* Wall row styling to prevent overflow */
.wall [row-id] {
    overflow: visible;

    /* Allow recent indicators to show */
    width: 100%;
    max-width: 100%;

    /* Prevent row overflow */
}

/* Wall block row styling */
.wall [block-row] {
    overflow: visible;

    /* Allow recent indicators to show */
    flex-wrap: wrap;

    /* Allow wrapping for many activities */
    gap: var(--spacing-xs);

    /* Add consistent spacing between activities */
}

/* Mini and icon mode wall styling */
.wall-mini-mode,
.wall-icon-mode {
    overflow: visible !important;

    /* Always allow indicators to show in mini modes */
    max-width: 100% !important;

    /* Prevent container overflow */
    margin: var(--spacing-xs) auto !important;

    /* Ensure proper centering and spacing */
}

/* Icon mode specific adjustments */
.wall-icon-mode {
    margin: var(--spacing-xs) auto var(--spacing-sm) auto !important;

    /* Extra bottom margin for touch hints */
}

/* Remove gap spacing for mini and icon modes to restore original tight layout */
.wall-mini-mode [block-row],
.wall-icon-mode [block-row] {
    gap: 0 !important;

    /* Remove gap to match original layout */
}

/* Mobile adjustments for wall components */
@media (width <= 768px) {
    .category-page-wall-container {
        margin: var(--spacing-md) var(--spacing-xs);

        /* Reduce horizontal margin on mobile */
        padding: var(--spacing-xs);

        /* Ensure adequate padding */
    }

    .wall-full-mode {
        max-width: calc(100vw - 2 * var(--spacing-md));

        /* More conservative width on mobile */
        margin: var(--spacing-sm) auto;

        /* Smaller vertical margins on mobile */
    }

    .wall [block-row] {
        gap: calc(var(--spacing-xs) * 0.5);

        /* Smaller gaps on mobile for better fit */
    }
}

/* Connected items hover behavior using data attributes */
[data-wall-item-id]:hover,
[data-wall-item-id]:hover~[data-wall-item-id],
[data-wall-item-id]:hover+[data-wall-item-id] {
    color: var(--color-accent);
}

/* Support for dark mode */
[data-theme="dark"] .wall-full-mode {
    border-color: var(--header-bg);
}

[data-theme="dark"] .wall-item-hover {
    color: var(--color-accent) !important;

    /* Brighter orange for dark mode */
}

[data-theme="dark"] .list-block-item {
    border-color: var(--header-bg);
}

/* Ensure active state is distinguishable in dark mode */
[data-theme="dark"] .sphere-red {
    background-color: var(--color-danger);
}

[data-theme="dark"] .sphere-green {
    background-color: var(--color-success);
}

[data-theme="dark"] .sphere-yellow {
    background-color: var(--color-warning);
}

/* Accessibility improvements */
:focus {
    outline: 0.125rem solid var(--focus-color);
    outline-offset: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Activity title styles */
.activity-title {
    cursor: pointer;
    transition: color 0.2s ease;
    margin: 0 var(--spacing-xs);
    font-weight: normal;
    flex-grow: 1;
}

.activity-title:hover,
.activity-title.wall-item-hover {
    color: var(--color-accent);

    /* Orange color for hover state */
    text-decoration: underline;
}

/* Ensure dark mode compatibility */
[data-theme="dark"] .activity-title:hover,
[data-theme="dark"] .activity-title.wall-item-hover {
    color: var(--color-accent-light);

    /* Lighter orange for dark mode */
}


/* Account modal content - remove positioning conflicts */
.account-modal-content {
    position: static !important;
    transform: none !important;
    width: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* Hotspot modal content - enable proper scrolling */
.hotspot-modal-content {
    width: 100%;
    max-height: 70vh;
    overflow: hidden auto;
    padding: var(--spacing-lg);

    /* Remove positioning conflicts */
    position: static !important;
    transform: none !important;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Ensure hotspot images don't break layout */
.hotspot-modal-content .hotspot-image-container {
    margin-bottom: 1rem;
    text-align: center;
}

.hotspot-modal-content .hotspot-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Hotspot text content styling */
.hotspot-modal-content .hotspot-text-content {
    margin-top: 1rem;
    line-height: 1.5;
}

/* BREADCRUMB COMPONENT STYLES */
.breadcrumb-container {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--light-border);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--text-color);
}

.breadcrumb-item:not(:last-child)::after {
    content: "›";
    margin-inline: var(--spacing-xs) var(--spacing-xs);
    color: var(--text-color);
    opacity: 0.6;
    font-size: var(--font-size-md);
}

.breadcrumb-link {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.breadcrumb-current {
    font-weight: bold;
    color: var(--text-color);
    padding: var(--spacing-xs) var(--spacing-xs);
}

/* Dark theme adjustments */
[data-theme="dark"] .breadcrumb-container {
    background-color: var(--light-bg);
    border-color: var(--light-border);
}

[data-theme="dark"] .breadcrumb-item {
    color: var(--text-color);
}

/* Responsive design */
@media (width <= 768px) {
    .breadcrumb-container {
        padding: var(--spacing-sm);
    }

    .breadcrumb-list {
        font-size: var(--font-size-xs);
    }

    .breadcrumb-link,
    .breadcrumb-current {
        padding: var(--spacing-xs);
    }
}

/* ===== HIDDEN OBJECT VISUAL INDICATORS ===== */

/* Visual styling for content objects marked as hidden from standard users */

/* Hidden object indicator banner for editor interfaces */
.object-hidden-indicator {
    background-color: var(--color-warning-light);
    border-left: 4px solid var(--color-warning);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.object-hidden-indicator::before {
    content: "🙈";
    font-size: var(--font-size-lg);
}

/* Hidden breadcrumb items */
.breadcrumb-item.hidden {
    opacity: 0.6;
    font-style: italic;
    background-color: var(--color-warning-light);
    border: 1px dashed var(--color-warning);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: 0 var(--spacing-xs);
}

.breadcrumb-item.hidden::after {
    content: " (hidden)";
    font-size: 0.9em;
    color: var(--color-warning);
    font-weight: 500;
}

/* ===== Enhanced Breadcrumbs for Hierarchy Management ===== */

/* Used in manage-content and in-context editors for parent reassignment */
.enhanced-breadcrumbs {
    padding: 8px 12px;
    background: var(--light-bg, #f5f5f5);
    border-radius: 6px;
    border: 1px solid var(--light-border, #ddd);
    margin-bottom: 8px;
}

.enhanced-breadcrumbs .breadcrumb-trail {
    display: flex;
    flex-flow: row wrap;
    gap: 6px;
    align-items: center;
}

.enhanced-breadcrumbs .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-speed, 0.2s);
    color: var(--primary-color, #007bff);
    text-decoration: underline;
    border: 1px solid transparent;
}

.enhanced-breadcrumbs .breadcrumb-item:hover:not(.current) {
    background-color: var(--button-secondary-hover, #e2e6ea);
    border-color: var(--light-border, #ddd);
}

.enhanced-breadcrumbs .breadcrumb-item.missing {
    font-style: italic;
    opacity: 0.8;
    color: var(--primary-color, #007bff);
    text-decoration: underline;
    border: 1px dashed var(--light-border, #ddd);
    cursor: pointer;
}

.enhanced-breadcrumbs .breadcrumb-item.missing:hover {
    background-color: var(--color-success-light, #d4edda);
    border-color: var(--color-success, #28a745);
    opacity: 1;
}

.enhanced-breadcrumbs .breadcrumb-item.current {
    color: white;
    cursor: default;
    font-weight: bold;
    text-decoration: none;
}

.enhanced-breadcrumbs .breadcrumb-item.hidden {
    opacity: 0.6;
    font-style: italic;
    background-color: var(--color-warning-light, #fff3cd);
    border: 1px dashed var(--color-warning, #ffc107);
}

.enhanced-breadcrumbs .breadcrumb-item.hidden:hover {
    background-color: var(--color-warning, #ffc107);
    opacity: 0.8;
}

.enhanced-breadcrumbs .breadcrumb-icon {
    font-size: var(--font-size-sm);
    line-height: 1;
}

.enhanced-breadcrumbs .breadcrumb-text {
    font-size: var(--font-size-sm, 14px);
    white-space: nowrap;
}

/* ===== Context Menu (used by enhanced breadcrumbs) ===== */
.breadcrumb-context-menu,
.context-menu {
    background: var(--bg-color, #fff);
    border: 1px solid var(--light-border, #ddd);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    overflow: hidden;
    min-width: 200px;
    z-index: 10000;
}

.context-menu-content {
    padding: 4px 0;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color var(--transition-speed, 0.2s);
    color: var(--text-color, #333);
    font-size: var(--font-size-sm, 14px);
}

.context-menu-item:hover {
    background-color: var(--button-secondary-hover, #e2e6ea);
}

.context-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background-color: transparent;
}

.menu-icon {
    font-size: var(--font-size-sm);
    line-height: 1;
}

.menu-text {
    flex: 1;
}

/* Dark theme adjustments for enhanced breadcrumbs and context menu */
[data-theme="dark"] .enhanced-breadcrumbs {
    background: var(--light-bg);
    border-color: var(--light-border);
}

[data-theme="dark"] .enhanced-breadcrumbs .breadcrumb-item {
    color: var(--primary-color, #4dabf7);
}

[data-theme="dark"] .enhanced-breadcrumbs .breadcrumb-item:hover:not(.current) {
    background-color: rgb(255 255 255 / 10%);
    border-color: var(--light-border);
}

[data-theme="dark"] .enhanced-breadcrumbs .breadcrumb-item.missing {
    color: var(--primary-color, #4dabf7);
    border-color: var(--light-border);
}

[data-theme="dark"] .enhanced-breadcrumbs .breadcrumb-item.missing:hover {
    background-color: rgb(40 167 69 / 30%);
    border-color: var(--color-success);
}

[data-theme="dark"] .enhanced-breadcrumbs .breadcrumb-item.hidden {
    background-color: rgb(255 193 7 / 20%);
    border-color: var(--color-warning);
}

[data-theme="dark"] .enhanced-breadcrumbs .breadcrumb-item.hidden:hover {
    background-color: rgb(255 193 7 / 30%);
}

[data-theme="dark"] .context-menu,
[data-theme="dark"] .breadcrumb-context-menu {
    background: var(--bg-color);
    border-color: var(--light-border);
    box-shadow: 0 4px 12px rgb(0 0 0 / 50%);
}

[data-theme="dark"] .context-menu-item {
    color: var(--text-color);
}

[data-theme="dark"] .context-menu-item:hover {
    background-color: rgb(255 255 255 / 10%);
}

/* Hidden object indicators in lists and content areas */
.content-item.hidden {
    opacity: 0.7;
    background-color: var(--color-warning-light);
    border-left: 3px solid var(--color-warning);
}

.content-item.hidden .content-title::after {
    content: " 🙈";
    opacity: 0.7;
    font-size: 0.9em;
}

/* Dark theme adjustments for hidden object indicators */
[data-theme="dark"] .object-hidden-indicator {
    background-color: rgb(255 193 7 / 20%);
    border-left-color: var(--color-warning);
    color: var(--text-color);
}

[data-theme="dark"] .breadcrumb-item.hidden {
    background-color: rgb(255 193 7 / 20%);
    border-color: var(--color-warning);
}

[data-theme="dark"] .content-item.hidden {
    background-color: rgb(255 193 7 / 15%);
    border-left-color: var(--color-warning);
}

/* Hidden status tooltips */
.hidden-status-tooltip {
    position: relative;
    cursor: help;
}

.hidden-status-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-color);
    color: var(--bg-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed), visibility var(--transition-speed);
    z-index: 1000;
}

.hidden-status-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ===== NAVIGATION HISTORY STYLES ===== */

/* Base styles for history button */
.nav-history-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2rem, 32px);
    height: clamp(28px, 2rem, 32px);
    border-radius: var(--border-radius-full);
    background: transparent;
    padding: 0;
    color: white;
    cursor: pointer;
    margin: 0 var(--spacing-sm);
    transition: background-color var(--transition-speed) ease;
    position: relative;
}

.nav-history-button:hover {
    background-color: rgb(255 255 255 / 10%);
}

.nav-history-button svg {
    width: clamp(18px, 1.5rem, 22px);
    height: clamp(18px, 1.5rem, 22px);
    fill: white;

    /* White for dark header */
}

/* Tooltip styling */
.nav-tooltip {
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(0 0 0 / 80%);
    color: white;
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    z-index: var(--z-toast);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed), visibility var(--transition-speed);
    pointer-events: none;
}

.nav-tooltip.tooltip-visible {
    opacity: 1;
    visibility: visible;
}

.nav-history-button:hover .nav-tooltip {
    opacity: 1;
    visibility: visible;
}

/* History popup (triggered by back button hover) */
.nav-history-popup {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--spacing-sm);
    width: clamp(220px, 30vw, 250px);
    max-height: clamp(250px, 40vh, 300px);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    z-index: var(--z-dropdown);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .nav-history-popup {
    background-color: var(--light-bg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}

.nav-history-popup-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
    border-bottom: 1px solid var(--light-border);
}


.nav-history-empty {
    padding: var(--spacing-lg) var(--spacing-lg);
    text-align: center;
    font-style: italic;
    color: var(--text-color);
    opacity: 0.6;
}

/* History panel (full screen) */
.nav-history-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(280px, 40vw, 350px);
    background-color: var(--bg-color);
    box-shadow: -2px 0 10px rgb(0 0 0 / 15%);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-inline-start: 1px solid var(--light-border);
}

.nav-history-panel.panel-visible {
    transform: translateX(0);
}

/* Navigation history panel visibility via data attributes */

/* Panel sliding is controlled by adding/removing 'panel-visible' class */

[data-theme="dark"] .nav-history-panel {
    background-color: var(--light-bg);
    box-shadow: -2px 0 10px rgb(0 0 0 / 30%);
}

.nav-history-panel-overlay {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 50%);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-history-panel-overlay.overlay-visible {
    opacity: 1;
    visibility: visible;
}

/* Navigation history panel overlay visibility via data attributes */

.nav-history-panel-header {
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--light-border);
}

.nav-history-panel-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-history-panel-title {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--text-color);
}

.nav-history-panel-close {
    background: none;
    border: none;
    font-size: clamp(18px, 1.5rem, 22px);
    color: var(--text-color);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-speed);
    width: 44px;
    height: 44px;
}

.nav-history-panel-close:hover {
    background-color: var(--light-bg);
}

.nav-history-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* History panel items */
.nav-history-panel-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--light-border);
    cursor: pointer;
    transition: background-color var(--transition-speed);
    text-decoration: none;
    color: inherit;
}

.nav-history-panel-item:hover {
    background-color: var(--light-bg);
}

.nav-history-panel-item:last-child {
    border-bottom: none;
}

.nav-history-panel-item-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    flex-shrink: 0;
}

.nav-history-panel-item-icon.activity {
    background-color: var(--color-success);
    color: white;
}

.nav-history-panel-item-icon.lesson {
    background-color: var(--color-warning);
    color: white;
}

.nav-history-panel-item-icon.category {
    background-color: var(--color-info);
    color: white;
}

.nav-history-panel-item-icon.metacat {
    background-color: var(--primary-color);
    color: white;
}

.nav-history-panel-item-icon.quiz,
.nav-history-panel-item-icon.quiz-item {
    background-color: var(--color-info);
    color: white;
}

.nav-history-panel-item-details {
    flex: 1;
    min-width: 0;
}

/* Make history panel titles look like standard links */
.nav-history-panel-item-title {
    font-size: var(--font-size-md);
    color: var(--focus-color);
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-decoration: none;
    transition: color var(--transition-speed), text-decoration var(--transition-speed);
}

.nav-history-panel-item-time {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.6;
}

.nav-history-panel-clear {
    color: var(--focus-color);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: color var(--transition-speed), text-decoration var(--transition-speed);
}

.nav-history-panel-clear:hover {
    color: var(--focus-hover);
    text-decoration: underline;
}

.nav-history-panel-item:hover .nav-history-panel-item-title {
    color: var(--focus-hover);
    text-decoration: underline;
}

/* Responsive adjustments */
@media (width <= 768px) {
    .nav-history-panel {
        width: calc(100vw - 16px);
        max-width: 280px;
    }
}


/* ===== PAGE SUBHEADER STYLES ===== */

/* Page Subheader */
.page-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: clamp(65px, 8vh, 75px);
    flex-wrap: nowrap !important;
    font-size: clamp(0.5rem, 3vw, 1rem);
    position: relative;

    /* Ensure proper positioning context */
}

/* Context group (left side) */
.context-group {
    display: flex;
    align-items: center;
    margin-inline-end: var(--spacing-md);
    min-width: 0;
    flex: 1;
    overflow: visible;

    /* Allow wall to show properly */
    position: relative;

    /* Proper positioning context for absolute children */
}

/* Current activity highlight */
.current-activity {
    position: relative;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    z-index: 10;
}

/* Path display */
.path-display {
    display: flex;
    align-items: center;
    margin-inline-start: var(--spacing-sm);

    /* Normal margin now that wall is inline-flex */
    overflow: hidden;
    min-width: 0;
    flex: 1;
}

.path-separator {
    margin: 0 var(--spacing-sm);
    color: var(--text-color);
    opacity: 0.6;
    flex-shrink: 0;
}

.title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    max-width: clamp(300px, 50vw, 500px);
    min-width: 0;
    flex: 1;
}

/* Navigation group (right side) */
.navigation-group {
    display: flex;
    align-items: center;
    margin-inline-start: auto;

    /* margin-inline-start: 0; Remove auto margin since edit-page-container handles it */
    flex-shrink: 0;
    white-space: nowrap;
}

.page-indicator {
    margin: 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
    white-space: nowrap;
}

/* Navigation buttons */
.nav-button {
    display: flex;
    align-items: center;
    background: none;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all var(--transition-speed) ease;
    color: var(--text-color);
    min-height: 44px;
}

.nav-button:hover:not(:disabled) {
    background-color: var(--light-bg);
    border-color: var(--light-border);
    transform: translateY(-1px);
}

.nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--text-color);
}

.nav-button.prev {
    margin-inline-end: var(--spacing-sm);
}

.nav-button.next {
    margin-left: var(--spacing-sm);
}

.nav-icon {
    font-size: clamp(14px, 1.2rem, 16px);
}

.prev .nav-icon {
    margin-inline-end: var(--spacing-xs);
}

.next .nav-icon {
    margin-inline-start: var(--spacing-xs);
}

/* Context title clickable */
.context-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(80px, 15vw, 120px);
}

/* Enhanced wall interaction styles */
.wall-container-icon-mode {
    position: relative;
    display: inline-flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    transform-origin: left top;
    overflow: visible !important;
}

/* Wall container flexbox layout */
.wall-with-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);

    /* Reduce padding when expanded */
}

/* Reduced spacing when expanded */
.wall-container-icon-mode.expanded .wall-with-button,
.wall-container-icon-mode:hover .wall-with-button {
    gap: 0;
}

/* Counter-scale the wall margins to eliminate gap when expanded */
.wall-container-icon-mode.expanded .wall,
.wall-container-icon-mode:hover .wall {
    margin-bottom: 0 !important;

    /* Counter the scaled bottom margin that creates the gap */
}

/* Back to Wall button styles */
.back-to-wall-button {
    background: var(--focus-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) ease,
        visibility var(--transition-speed) ease,
        background-color var(--transition-speed) ease;
}

.back-to-wall-button.button-visible {
    opacity: 1;
    visibility: visible;
}

.back-to-wall-button:hover {
    background: var(--button-primary-hover);
}

/* Wall wrapper positioning styles - legacy class, now using inline styles */
.wall-wrapper-positioned {
    position: absolute;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    z-index: 5;
    transform-origin: left top;
}

/* Desktop hover behavior */
@media (hover: hover) {
    .wall-container-icon-mode:hover {
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(3.0);

        /* Scale from top-left origin */
        box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
        z-index: 100;
        background-color: var(--bg-color);
        border-radius: var(--border-radius-sm);
        padding: calc(var(--spacing-xs) * 0.5);
    }

    .wall-container-icon-mode:hover .back-to-wall-button {
        display: block;
        opacity: 1;
        visibility: visible;

        /* Counter-scale the button to maintain original size but make it wider */
        transform: scale(0.5);
        min-width: 80%;
    }
}

/* Mobile/touch expanded state */
.wall-container-icon-mode.expanded {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(3.0);

    /* Scale from top-left origin */
    box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
    z-index: 100;
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    padding: calc(var(--spacing-xs) * 0.5);
}

.wall-container-icon-mode.expanded .back-to-wall-button {
    display: block;
    opacity: 1;
    visibility: visible;

    /* Counter-scale the button to maintain original size but make it wider */
    transform: scale(0.5);
    min-width: 80%;
}

/* Touch interaction hint */
.wall-touch-hint {
    position: absolute;
    bottom: -20px;
    left: 0;
    transform: none;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    background-color: var(--light-bg);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
    pointer-events: none;
    border: 1px solid var(--light-border);
}

.wall-container-icon-mode.show-hint .wall-touch-hint {
    opacity: 1;
}


/* Wall component row and structure styles */
.wall-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wall-row-title {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
}

.wall-block-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: auto;
    overflow: visible;
}

.wall-block-row.small-mode {
    height: 100%;
}

/* Wall block item layout styles */
.wall-block-item.sphere-mode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 2px;
    overflow: visible;
}

.wall-block-item.block-mode {
    cursor: pointer;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    border-right: 0;
    border-top: 0;
    display: inline-block;
}

.wall-block-item.float-left {
    float: left;
}

.wall-block-item.float-right {
    float: right;
}

/* Wall sphere size controls */
.wall-sphere.fixed-size {
    min-width: var(--sphere-size);
    min-height: var(--sphere-size);
    max-width: var(--sphere-size);
    max-height: var(--sphere-size);
    width: var(--sphere-size);
    height: var(--sphere-size);
}

/* List sphere styles */
.list-sphere {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* REMOVED: Duplicate .act-row definitions - using original definition at line 2713 */

.list-block-item {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    font-weight: bold;
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease;
}

.list-block-item:hover {
    background-color: var(--focus-color);
    color: white;
}

/* Current activity sphere highlight styles */
.current-activity-sphere {
    position: relative;
    z-index: 2;
}

.current-activity-sphere::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--focus-color);
    z-index: -1;
    box-sizing: content-box;
}

.current-activity-sphere {
    box-shadow: 0 0 6px rgb(77 144 254 / 50%);
    background-color: rgb(0 0 0 / 10%) !important;
}

[data-theme="dark"] .current-activity-sphere::before {
    border-color: var(--focus-color);
}

[data-theme="dark"] .current-activity-sphere {
    box-shadow: 0 0 6px rgb(93 159 255 / 50%);
    background-color: rgb(255 255 255 / 10%) !important;
}

/* Wall overflow and positioning styles */
.wall-block-item {
    overflow: visible !important;
}

.wall-container-icon-mode .wall-sphere {
    cursor: pointer !important;
}

.wall-container-icon-mode .wall-sphere:hover {
    transform: scale(1.2);
    z-index: 200;
}

.wall-container-icon-mode .current-activity-sphere {
    z-index: 20;
}

/* Responsive design */
@media (width <= 768px) {
    .page-subheader {
        justify-content: space-between;
        gap: var(--spacing-sm);
    }

    .context-group,
    .navigation-group {
        margin: 0;
    }

    .title-text {
        max-width: clamp(200px, 40vw, 300px);
    }

    .page-indicator {
        margin: 0 var(--spacing-sm);
    }
}

@media (width <= 576px) {
    .prev-next-text {
        display: none;
    }

    .wall-text {
        display: none;
    }

    .context-link {
        max-width: clamp(60px, 12vw, 100px);
    }

    .title-text {
        max-width: clamp(150px, 30vw, 200px);
    }

    .page-indicator {
        margin: 0 var(--spacing-xs);
        font-size: var(--font-size-xs);
    }

    .nav-button {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Extra small screens */
@media (width <= 400px) {
    .page-indicator {
        font-size: var(--font-size-xs);
        margin: 0 var(--spacing-xs);
    }

    .nav-button {
        padding: var(--spacing-xs);
        min-width: 44px;
    }

    .context-link {
        max-width: clamp(50px, 10vw, 80px);
    }

    .title-text {
        max-width: clamp(100px, 25vw, 150px);
    }

    /* Hide "Page" text on very small screens to save space */
    .page-text {
        display: none;
    }
}

/* ===== SEARCH COMPONENT STYLES ===== */

/* Search component wrapper */
.search-component-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    outline: none;
}

/* Search component input - more specific selector to override general input styles */
.search-component-wrapper .search-component-input {
    width: 100%;
    padding-left: 3rem;        /* Space for search icon */
    border: none;              /* Wrapper provides border */
    background-color: transparent;

    /* All other styling inherited from base input {} rule */
}

.search-component-wrapper:focus-within {
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 20%);
}

.search-component-wrapper .search-component-input:focus {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search-component-wrapper .search-component-input::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

/* Search component icon */
.search-component-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.6;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.search-component-icon svg {
    width: 16px;
    height: 16px;
}

/* Search component clear button */
.search-component-clear {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color);
    opacity: 0.6;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.search-component-clear:hover {
    opacity: 1;
    background-color: var(--light-bg);
}

.search-component-clear svg {
    width: 16px;
    height: 16px;
}

/* Removed .hidden class rule - visibility should be controlled via data attributes in JavaScript */

/* Search component loading spinner */
.search-component-loading {
    position: absolute;
    right: var(--spacing-md);

    /* Position on the right side */
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    animation: search-loading-spin 1s linear infinite;
}

/* Removed .search-component-loading--visible and .search-component-loading--hidden classes */

/* Loading state visibility is now controlled via data-display attribute in JavaScript */

.search-component-loading svg {
    width: 16px;
    height: 16px;
}

@keyframes search-loading-spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Dark theme support for search component */
[data-theme="dark"] .search-component-wrapper {
    background-color: var(--bg-color);
    border-color: var(--light-border);
}

[data-theme="dark"] .search-component-wrapper .search-component-input {
    background-color: transparent;
    color: var(--text-color);
}

[data-theme="dark"] .search-component-wrapper:focus-within {
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(93 159 255 / 20%);
}

[data-theme="dark"] .search-component-wrapper .search-component-input::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

[data-theme="dark"] .search-component-icon {
    color: var(--text-color);
}

[data-theme="dark"] .search-component-clear {
    color: var(--text-color);
}

[data-theme="dark"] .search-component-clear:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .search-component-loading {
    color: var(--text-color);
}

/* ===== Search Input Component Styles ===== */

/* Search input container and components */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: var(--spacing-md, 1rem);
}

.search-input {
    flex: 1;
    padding-right: 40px;    /* Space for search icon */

    /* All other styling inherited from base input {} rule */
}

.search-icon {
    position: absolute;
    right: var(--spacing-sm, 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-color-muted, #6c757d);
    font-size: var(--font-size-md, 1rem);
    padding: var(--spacing-xs, 0.25rem);
    border-radius: var(--border-radius-sm, 4px);
    transition: color 0.2s, background-color 0.2s;
}

.search-icon:hover {
    color: var(--text-color, #333);
    background-color: var(--hover-color, #f8f9fa);
}

.search-spinner {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color, #e9ecef);
    border-top: 2px solid var(--primary-color, #007bff);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.2s;
}

.search-spinner.active {
    opacity: 1;
}

@keyframes spin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes popup-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -55%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes overlay-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Dark theme support for search input */
[data-theme="dark"] .search-input {
    background-color: var(--input-background, #2d3748);
    border-color: var(--border-color, #4a5568);
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-input:focus {
    border-color: var(--focus-color, #4299e1);
    box-shadow: 0 0 0 2px rgb(66 153 225 / 25%);
}

[data-theme="dark"] .search-icon {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-icon:hover {
    color: var(--text-color, #e2e8f0);
    background-color: var(--hover-color, #4a5568);
}

[data-theme="dark"] .search-spinner {
    border-color: var(--border-color, #4a5568);
    border-top-color: var(--primary-color, #4299e1);
}

/* ===== Search Modal Base Styles ===== */

/* Base search modal styles for overlay and popup */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    z-index: 999;
    backdrop-filter: blur(2px);
    animation: overlay-fade 0.2s ease-out;
    touch-action: none;
}

.search-results-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    background-color: var(--background-color, #fff);
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    animation: popup-fade-in 0.25s ease-out;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.search-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md, 1rem);
    border-bottom: 1px solid var(--border-color, #e9ecef);
    background-color: var(--background-color, #fff);
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: var(--spacing-md, 1rem);
    margin-top: calc(-1 * var(--spacing-md, 1rem));
    padding-top: var(--spacing-md, 1rem);
}

.search-popup-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: 600;
    color: var(--text-color, #333);
}

.search-close-button {
    background: none;
    border: none;
    font-size: var(--font-size-xl, 1.5rem);
    cursor: pointer;
    color: var(--text-color-muted, #6c757d);
    padding: var(--spacing-xs, 0.25rem);
    line-height: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm, 4px);
}

.search-close-button:hover {
    background-color: var(--hover-color, #f8f9fa);
    color: var(--text-color, #333);
}

.search-results-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md, 1rem);
}

.search-result-item {
    padding: var(--spacing-md, 1rem);
    border-bottom: 1px solid var(--border-color, #e9ecef);
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: var(--hover-color, #f8f9fa);
}

.search-result-item:focus {
    outline: 2px solid var(--focus-color, #007bff);
    outline-offset: -2px;
    background-color: var(--focus-background, #e3f2fd);
}

.search-result-item[aria-selected="true"] {
    background-color: var(--selected-color, #e3f2fd);
    border-left: 3px solid var(--primary-color, #007bff);
}

.search-result-type {
    display: inline-block;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    border-radius: var(--border-radius-sm, 4px);
    margin-bottom: var(--spacing-xs, 0.25rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-result-type.type-page {
    background-color: #e3f2fd;
    color: #1976d2;
}

.search-result-type.type-activity {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.search-result-type.type-lesson {
    background-color: #e8f5e8;
    color: #388e3c;
}

.search-result-type.type-category {
    background-color: #fff3e0;
    color: #f57c00;
}

.search-result-type.type-metacat {
    background-color: #fce4ec;
    color: #c2185b;
}

.search-result-title {
    font-size: var(--font-size-md, 1rem);
    font-weight: 600;
    margin-bottom: var(--spacing-xs, 0.25rem);
    color: var(--text-color, #333);
}

.search-result-path {
    font-size: var(--font-size-sm);
    color: var(--color-neutral, #666);
    margin-bottom: var(--spacing-xs);
    font-style: italic;
}

[data-theme="dark"] .search-result-path {
    color: #aaa;
}

.search-result-content {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-color-secondary, #555);
    line-height: 1.4;
}

.search-highlight {
    background-color: var(--highlight-color, #fff3cd);
    color: var(--highlight-text-color, #856404);
    padding: 0 2px;
    border-radius: 2px;
}

.search-no-results {
    text-align: center;
    padding: var(--spacing-lg, 2rem);
    color: var(--text-color-muted, #6c757d);
}

.search-no-results h3 {
    margin-bottom: var(--spacing-md, 1rem);
    color: var(--text-color, #333);
}

.search-results-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg, 2rem);
    color: var(--text-color-muted, #6c757d);
}

.search-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #e9ecef);
    border-top: 3px solid var(--primary-color, #007bff);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md, 1rem);
}

.search-loading-text {
    font-size: var(--font-size-md, 1rem);
    text-align: center;
}

.search-load-more {
    width: 100%;
    padding: var(--spacing-md, 1rem);
    background-color: var(--surface-color, #f8f9fa);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: var(--border-radius-sm, 4px);
    color: var(--text-color, #333);
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: var(--spacing-md, 1rem);
}

.search-load-more:hover {
    background-color: var(--hover-color, #e9ecef);
}

.search-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark theme support for search modal */
[data-theme="dark"] .search-overlay {
    background-color: rgb(0 0 0 / 70%);
}

[data-theme="dark"] .search-results-popup {
    background-color: var(--background-color, #2d3748);
}

[data-theme="dark"] .search-popup-header {
    background-color: var(--background-color, #2d3748);
    border-bottom-color: var(--border-color, #4a5568);
}

[data-theme="dark"] .search-popup-title {
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-close-button {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-close-button:hover {
    background-color: var(--hover-color, #4a5568);
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-result-item {
    border-bottom-color: var(--border-color, #4a5568);
}

[data-theme="dark"] .search-result-item:hover {
    background-color: var(--hover-color, #4a5568);
}

[data-theme="dark"] .search-result-item:focus {
    background-color: var(--focus-background, #2d3748);
}

[data-theme="dark"] .search-result-item[aria-selected="true"] {
    background-color: var(--selected-color, #2d3748);
}

[data-theme="dark"] .search-result-title {
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-result-path {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-result-content {
    color: var(--text-color-secondary, #cbd5e0);
}

[data-theme="dark"] .search-highlight {
    background-color: var(--highlight-color, #744210);
    color: var(--highlight-text-color, #faf089);
}

[data-theme="dark"] .search-no-results {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-no-results h3 {
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-load-more {
    background-color: var(--surface-color, #1a202c);
    border-color: var(--border-color, #4a5568);
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-load-more:hover {
    background-color: var(--hover-color, #4a5568);
}

[data-theme="dark"] .search-results-loading {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-loading-spinner {
    border-color: var(--border-color, #4a5568);
    border-top-color: var(--primary-color, #4299e1);
}

[data-theme="dark"] .search-loading-text {
    color: var(--text-color-muted, #a0aec0);
}

/* Cursor styles for search processing */
html.searching,
html.searching * {
    cursor: wait !important;
}

html.searching body,
html.searching div,
html.searching a,
html.searching button,
html.searching input,
html.searching select,
html.searching textarea {
    cursor: wait !important;
}

html.searching ::selection {
    background: transparent;
}

html.searching input,
html.searching textarea {
    caret-color: transparent !important;
}

html.searching .search-container *,
html.searching .skills-table * {
    cursor: wait !important;
}

#search-cursor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    cursor: wait !important;
    background-color: transparent;
}

/* ===== Goals Search Modal Styles ===== */

.search-result-item-with-goal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
}

.search-result-content-goals {
    flex: 1;
    min-width: 0;

    /* Allow text to truncate */
}

.goals-search-button-area {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    min-width: clamp(120px, 15vw, 160px);
}

.goal-status-indicator {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.goal-status-indicator.is-goal {
    background-color: var(--color-success-light, #d4edda);
    color: var(--color-success, #28a745);
    border: 1px solid var(--color-success, #28a745);
}

.goal-status-indicator.not-goal {
    background-color: var(--color-secondary-light, #e2e3e5);
    color: var(--color-secondary, #6c757d);
    border: 1px solid var(--color-secondary, #6c757d);
}

[data-theme="dark"] .goal-status-indicator.is-goal {
    background-color: rgb(40 167 69 / 20%);
    color: #4caf50;
    border-color: #4caf50;
}

[data-theme="dark"] .goal-status-indicator.not-goal {
    background-color: rgb(108 117 125 / 20%);
    color: #aaa;
    border-color: #777;
}

/* Goal action buttons - enhanced from standardized button patterns */
.goal-action-button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-speed, 0.2s) ease;
    text-align: center;
    white-space: nowrap;

    /* Enhanced from .btn patterns */
}

.goal-action-button.add-goal {
    background-color: var(--color-success, #28a745);
    color: white;
    border: 2px solid var(--color-success, #28a745);
}

.goal-action-button.add-goal:hover {
    background-color: var(--color-success-hover, #218838);
    border-color: var(--color-success-dark, #1e7e34);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.goal-action-button.remove-goal {
    background-color: var(--color-danger, #dc3545);
    color: white;
    border: 2px solid var(--color-danger, #dc3545);
}

.goal-action-button.remove-goal:hover {
    background-color: var(--color-danger-hover, #c82333);
    border-color: var(--color-danger-dark, #bd2130);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.goal-action-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Goal Progress Page specific styles - CSS conformance fixes */
.goal-path-info {
    margin-bottom: var(--spacing-md);
    opacity: 0.8;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.goal-delete-button {
    margin-top: var(--spacing-md);
    margin-right: auto; /* Push to left */
}

.goal-settings-link {
    margin-left: var(--spacing-sm);
}

.goal-progress-segment {
    width: var(--segment-width, 0%);
}

.goal-progress-legend {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.goal-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.goal-color-indicator {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--indicator-color, #ccc);
}

.goal-notification-info {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
    color: var(--text-color);
}

.goal-notification-actions {
    margin-top: var(--spacing-md);
}

/* Navigation button - enhanced from .btn .btn-link pattern */
.navigate-button {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--button-secondary-bg, #f8f9fa);
    color: var(--text-color);
    border: 1px solid var(--button-secondary-border, #dae0e5);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-speed, 0.2s) ease;
    text-align: center;
    white-space: nowrap;

    /* Enhanced from .btn .btn-link patterns */
}

.navigate-button:hover {
    background-color: var(--button-secondary-hover, #e2e6ea);
    border-color: #c3c8cd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

[data-theme="dark"] .navigate-button {
    background-color: #444;
    color: #fff;
    border-color: #666;
}

[data-theme="dark"] .navigate-button:hover {
    background-color: #555;
    border-color: #777;
}

.content-type-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    padding: 0.2rem 0.4rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    background-color: var(--color-info-light, #cce7ff);
    color: var(--color-info, #06c);
    border: 1px solid var(--color-info, #06c);
}

[data-theme="dark"] .content-type-badge {
    background-color: rgb(93 159 255 / 20%);
    color: #5d9fff;
    border-color: #5d9fff;
}

/* Responsive adjustments for goals search modal using clamp() */
@media (width <= 768px) {
    .search-result-item-with-goal {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .goals-search-button-area {
        flex-direction: row;
        justify-content: space-between;
        min-width: auto;
    }

    .goal-action-button,
    .navigate-button {
        flex: 1;
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* ===== EDIT PAGE LINK COMPONENT ===== */

/* 
/* NOTE: This is an exception because the the editing CSS files don't load until the link is clicked
 * In-context editing link component with dropdown support for admin/provider users
 * - Single-mode edit button for JSON-only editing
 * - Multi-mode dropdown for visual + JSON editing options
 * - Positioned as floating edit link over content
 */

.edit-page-icon {
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.edit-page-text {
    font-size: inherit;
    line-height: 1;
    font-weight: 500;
}

/* Multi-mode dropdown styles */
.edit-page-dropdown {
    position: relative;
    display: inline-block;
}

.edit-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.edit-dropdown-arrow {
    font-size: 10px;
    margin-left: var(--spacing-xs);
    transition: transform var(--transition-speed) ease;
}

.edit-dropdown-toggle[aria-expanded="true"] .edit-dropdown-arrow {
    transform: rotate(180deg);
}

.edit-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    z-index: calc(var(--z-dropdown) + 1);
    margin-top: var(--spacing-xs);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-speed) ease;
}

.edit-dropdown-menu.dropdown-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quiz-edit-dropdown-menu {
    bottom: calc(100% + 10px);
    top: auto;
}

/* Ensure dropdown appears above page subheader elements */
.edit-page-container .edit-dropdown-menu {
    z-index: 20;
}

.edit-dropdown-menu.edit-dropdown-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.edit-dropdown-item {
    display: block;
    width: 100%;
    padding: var(--spacing-sm);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
    border-radius: 0;
}

.edit-dropdown-item:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.edit-dropdown-item:last-child {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.edit-dropdown-item:hover {
    background: var(--button-secondary-hover);
}

.edit-mode-label {
    display: block;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 2px;
}

.edit-mode-description {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    line-height: 1.3;
}

/* Dark mode support */
[data-theme="dark"] .edit-dropdown-menu {
    background: var(--color-neutral-dark);
    border-color: var(--color-neutral);
}

[data-theme="dark"] .edit-dropdown-item:hover {
    background: var(--header-bg);
}

[data-theme="dark"] .edit-mode-label {
    color: var(--text-color);
}

[data-theme="dark"] .edit-mode-description {
    color: var(--color-neutral-light);
}

/* Edit page link in page subheader */
.edit-page-container .edit-page-link-container {
    position: static;
    top: auto;
    right: auto;
    z-index: var(--z-dropdown);
}

.edit-page-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentcolor;
}

/* Responsive adjustments */
@media (width <= 768px) {
    .page-subheader {
        justify-content: space-between;
        gap: var(--spacing-sm);
    }

    .context-group,
    .navigation-group {
        margin: 0;
    }

    .edit-page-container {
        margin-inline-end: var(--spacing-sm);
    }

    .title-text {
        max-width: clamp(200px, 40vw, 300px);
    }

    .page-indicator {
        margin: 0 var(--spacing-sm);
    }

    .edit-page-link-container {
        top: var(--spacing-xs, 6px);
        right: var(--spacing-xs, 6px);
    }
}

/* ================================
   SECTION - HELP LINK COMPONENT
   ================================ */

.help-link-small {
    font-size: var(--font-size-xs);
}

.help-link-inline {
    font-size: inherit;
    font-weight: normal;
}

.help-link-form {
    font-size: var(--font-size-xs);
    color: var(--text-color-muted);
}

.help-link-form:hover {
    color: var(--link-hover-color);
}

/* ================================
   SECTION - TEST-OUT MODE TOGGLE COMPONENT
   ================================ */

.testout-toggle-component {
    display: flex;
    justify-content: center;
    align-items: center;
}

.testout-toggle-checkbox-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.testout-toggle-checkbox {
    margin: 0;
    cursor: pointer;
}

.testout-toggle-label {
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.testout-toggle-help-link {
    margin-left: var(--spacing-xs);
}

/* Page header variant */
.testout-toggle-page-header {
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-md) 0;
}

[data-theme="dark"] .testout-toggle-page-header {
    background-color: rgb(255 255 255 / 5%);
}

/* Form variant */
.testout-toggle-form {
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--light-border);
    margin-top: var(--spacing-md);
}

.testout-toggle-form .testout-toggle-label {
    font-size: var(--font-size-sm);
}

/* Compact variant */
.testout-toggle-compact {
    padding: var(--spacing-xs);
}

.testout-toggle-compact .testout-toggle-label {
    font-size: var(--font-size-xs);
    font-weight: normal;
}

.testout-toggle-compact .testout-toggle-checkbox-container {
    gap: var(--spacing-xs);
}

/* Songlist variant */
.testout-toggle-songlist {
    justify-content: flex-start; /* Left justify instead of center */
    padding: 0;
    margin: var(--spacing-sm) 0;

    /* No background - inherits from parent */
}

.testout-toggle-songlist .testout-toggle-label {
    font-size: var(--font-size-sm);
    opacity: 0.8; /* Slightly muted */
}

/* ===== ASSESSMENT RESULTS STYLING ===== */

/* Enhanced styling for Assessment UI - Phase 6b testOutMode implementation */

/* Assessment completion stats with enhanced structure */
.assessment-completion-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

/* Primary score display - "X out of Y correct" messaging */
.assessment-score-display {
    text-align: center;
    padding: var(--spacing-lg);
    background-color: var(--color-info);
    color: white;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.assessment-primary-score {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.assessment-primary-score strong {
    font-weight: 700;
}

/* Detail stats section */
.assessment-detail-stats {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.assessment-detail-stats p {
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.assessment-detail-stats p:first-child {
    margin-top: 0;
}

.assessment-detail-stats p:last-child {
    margin-bottom: 0;
}

/* Dark theme support for assessment results */
[data-theme="dark"] .assessment-score-display {
    background-color: var(--focus-color);
    color: white;
}

[data-theme="dark"] .assessment-detail-stats {
    background-color: var(--header-bg);
    border-color: var(--primary-color);
    color: var(--text-color);
}

[data-theme="dark"] .assessment-detail-stats p {
    color: var(--text-color);
}

/* ===== LOADING COMPONENT STYLES ===== */

/* Standardized loading component replacing inline styles */
.loading-container {
    position: absolute;
    top: var(--loading-top, 100px);
    left: var(--loading-left, 100px);
    z-index: var(--loading-z-index, 110);
    cursor: pointer;
    background-color: var(--bg-color);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    text-align: center;
    filter: none; /* Prevent dark mode filter */
    transition: opacity var(--transition-speed) ease,
                visibility var(--transition-speed) ease;
}

/* Loading container visibility via data attributes */

.loading-container.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-gif {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.loading-text {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    font-weight: 600;
}

/* Dark theme support for loading component */
[data-theme="dark"] .loading-container {
    background-color: var(--light-bg);
    box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
}

/* ===== IMAGE COMPONENT STYLES ===== */

/* Standardized image component replacing inline styles */
.image-wrapper {
    display: flex;
    justify-content: var(--justify-content, flex-start);
    align-items: flex-start;
    width: var(--wrapper-width, 100%);
    padding: var(--wrapper-padding, 0);
    box-sizing: border-box;
}

.image-wrapper img {
    background-color: var(--image-bg-color, transparent);
    opacity: var(--image-opacity, 1);
    max-width: var(--image-max-width, 100%);
    height: var(--image-height, auto);
    object-fit: var(--image-object-fit, contain);
    transition: opacity var(--transition-speed) ease;
}

.image-loading-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    transition: opacity var(--transition-speed) ease,
                visibility var(--transition-speed) ease;
}

/* Image loading placeholder visibility via data attributes */

.image-loading-placeholder.hidden {
    opacity: 0;
    visibility: hidden;
}

.image-error-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    color: var(--color-danger);
    background-color: var(--color-danger-light);
    border: 1px dashed var(--color-danger);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    text-align: center;
}

.image-gallery {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    transition: transform var(--transition-speed) ease;
}

.gallery-item:hover {
    transform: translateY(-2px);
}

/* Dark theme support for image components */
[data-theme="dark"] .image-error-placeholder {
    background-color: rgb(220 53 69 / 20%);
    border-color: var(--color-danger);
}

/* ===== QUIZ CONFIGURATION STYLES ===== */

/* Standardized quiz configuration replacing inline styles */
.quiz-info-text {
    margin-top: var(--spacing-md);
    font-style: italic;
    opacity: 0.7;
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
}

.quiz-disabled-option {
    opacity: 0.6;
    font-style: italic;
}

.quiz-disabled-option .radio-label {
    opacity: 0.6;
    font-style: italic;
}


.quiz-toggle-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.quiz-toggle-label {
    margin-left: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.quiz-toggle-label.summary-view {
    font-size: var(--font-size-xs);
}

.quiz-toggle-row.expanded-view {
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-md);
    margin-left: var(--spacing-sm);
}

.quiz-ratio-container {
    margin-top: var(--spacing-md);
}

.quiz-ratio-radio-container {
    margin-bottom: var(--spacing-sm);
}

.quiz-auto-ratio-container {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.quiz-custom-ratio-container {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-sm);
}

.quiz-custom-ratio-container.disabled {
    opacity: 0.5;
}

.quiz-custom-radio-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.quiz-slider-container {
    display: flex;
    align-items: center;
    margin-left: var(--spacing-lg);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.quiz-ratio-value {
    min-width: 3rem;
    text-align: center;
    font-weight: bold;
}

.quiz-ratio-slider {
    flex: 1;
    margin: 0 var(--spacing-sm);
}

.quiz-ratio-description {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin-left: var(--spacing-lg);
}


.quiz-column-full-width {
    width: 100%;
}

/* ===== PROGRESS COMPONENT STYLES ===== */

/* Standardized progress display replacing inline styles */
.confidence-container {
    margin: var(--spacing-sm);
}

.confidence-container.narrow-mode {
    display: block;
}

.confidence-container.wide-mode {
    display: inline;
}

.progress-sphere {
    cursor: pointer;
    transition: outline var(--transition-speed) ease;
}

.progress-sphere.selected {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    cursor: default;
    pointer-events: none;
}

/* Progress bar state management */
.progress-bar-fill.empty {
    width: 0%;
}

.progress-bar-fill.full {
    width: 100%;
}

/* Chart link visibility states */

/* Removed .chart-link.has-progress/.no-progress and .clear-progress-link.has-progress/.no-progress classes */

/* Link visibility is now controlled via data-display attribute in JavaScript */

/* ===== CLERK UI STYLES ===== */

/* Standardized Clerk authentication UI replacing inline styles */
.clerk-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    z-index: var(--z-modal);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Clerk sign-in container - used by authMod.showClerkLogin() */
.clerk-sign-in-container {
    margin: auto;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Clerk verification code container - used by authMod.showClerkLogin() */
.clerk-verification-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    width: 100%;
    max-width: 400px;
    margin: auto;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Mobile keyboard fix for Clerk modals */
@media (max-width: 768px) {
    .clerk-modal-overlay {
        align-items: flex-start;
        padding-top: 5vh;
        height: 100dvh;
    }

    .clerk-sign-in-container,
    .clerk-verification-container {
        align-items: flex-start;
        padding-top: 5vh;
    }
}

.clerk-container {
    position: relative;
    background: var(--bg-color);
    border-radius: var(--border-radius);
    margin: var(--spacing-md);
    box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
    max-width: 480px;
    width: 100%;
}

.clerk-close-button {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--text-color);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease;
    z-index: 20;
}

.clerk-close-button:hover {
    background-color: var(--light-bg) !important;
}

[data-theme="dark"] .clerk-container {
    box-shadow: 0 4px 20px rgb(0 0 0 / 60%);
}

/* Ensure consistent dark mode backgrounds for Clerk internal elements */
[data-theme="dark"] .cl-rootBox,
[data-theme="dark"] .cl-card,
[data-theme="dark"] .cl-cardBox,
[data-theme="dark"] .cl-main,
[data-theme="dark"] .cl-modalContent {
    background-color: #2d2d2d !important;
}

[data-theme="dark"] .cl-internal-b3fm6y {
    background-color: #1a1a1a !important;
}

/* ===== CHART COMPONENTS ===== */

/* Chart styles using design tokens and responsive patterns */
.chart-page-container,
.chart-modal-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Full page container */
.chart-page-container {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Modal container */
.chart-modal-container {
    position: relative;
    max-height: 80vh;
    max-width: 800px;
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chart-content-wrapper {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.chart-header {
    margin: var(--spacing-sm) 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
}

.chart-link {
    color: var(--focus-color);
    text-decoration: none;
    margin-inline: var(--spacing-xs) var(--spacing-xs);
}

.chart-link:hover {
    text-decoration: underline;
}

.chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.chart-container {
    width: 100%;
    max-width: 800px;
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    padding: var(--spacing-sm);
}

[data-theme="dark"] .chart-container {
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}

.chart-display {
    position: relative;
    min-height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chart-info {
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
}

[data-theme="dark"] .chart-info {
    background-color: var(--light-bg);
}

.chart-canvas {
    max-height: 50vh;
}

.chart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
}

.chart-table th, 
.chart-table td {
    padding: var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--light-border);
}

[data-theme="dark"] .chart-table th, 
[data-theme="dark"] .chart-table td {
    border-color: var(--light-border);
}

.chart-table th {
    background-color: var(--light-bg);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

[data-theme="dark"] .chart-table th {
    background-color: var(--light-bg);
    color: var(--text-color);
}

.chart-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.chart-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .chart-tab {
    background-color: var(--light-bg);
    border-color: var(--light-border);
}

.chart-tab.active {
    background-color: var(--focus-color);
    color: white;
    border-color: var(--focus-color);
}

.chart-loading {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-color);
    font-size: var(--font-size-md);
}

.chart-empty-message {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-color);
    font-style: italic;
    font-size: var(--font-size-md);
}

/* Footer */
.chart-footer {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    margin-top: auto;
}

/* Close button for modal view */
.chart-close-button {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: transparent;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius-full);
    transition: background-color var(--transition-speed) ease;
    min-height: 44px;
    min-width: 44px;
}

.chart-close-button:hover {
    background-color: rgb(0 0 0 / 10%);
}

[data-theme="dark"] .chart-close-button:hover {
    background-color: rgb(255 255 255 / 10%);
}

/* Status indicators */
.status-sphere {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-full);
    margin: 0 var(--spacing-xs);
    font-weight: bold;
    font-family: system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at 30% 30%, var(--sphere-color-light, #f0f0f0), var(--sphere-color-dark, #e0e0e0));
    box-shadow: 0 calc(var(--sphere-size, 24px) / 12) calc(var(--sphere-size, 24px) / 6) rgb(0 0 0 / 20%);
    color: var(--sphere-text-color, var(--text-color));
    transition: all var(--transition-speed) ease;
}

/* Size variants */
.status-sphere-small {
    --sphere-size: 16px;

    width: var(--sphere-size);
    height: var(--sphere-size);
    font-size: var(--font-size-xs);
}

.status-sphere-medium {
    --sphere-size: 24px;

    width: var(--sphere-size);
    height: var(--sphere-size);
    font-size: var(--font-size-sm);
}

.status-sphere-large {
    --sphere-size: 32px;

    width: var(--sphere-size);
    height: var(--sphere-size);
    font-size: var(--font-size-md);
}

.status-sphere-custom {
    width: var(--sphere-size, 24px);
    height: var(--sphere-size, 24px);
    font-size: calc(var(--sphere-size, 24px) * 0.4);
}

/* Data table styles */
.data-table-container {
    width: 100%;
    overflow-x: auto;
}

/* BPM chart container */
.bpm-chart-container {
    margin-top: var(--spacing-lg);
}

.chart-bpm-title {
    font-size: var(--font-size-md);
    color: var(--text-color);
    margin: 0 0 var(--spacing-md) 0;
}

.chart-table-container {
    margin-top: var(--spacing-md);
}

/* REMOVED: .chart-data-table - empty ruleset (uses base .chart-table styles) */

/* Responsive adjustments */
@media (width <= 768px) {
    .chart-display {
        min-height: 250px;
    }
    
    .chart-modal-container {
        max-width: 95%;
        max-height: 85vh;
    }
}

@media (width <= 576px) {
    .chart-display {
        min-height: 200px;
    }
    
    .chart-tabs {
        flex-direction: column;
    }
    
    .chart-tab {
        border-radius: var(--border-radius-sm);
    }
}

.chart-generic-container {
    margin: 0;
    position: relative;
}

.chart-title-no-margin {
    margin-top: 0;
}

.chart-show-more-link {
    margin-top: var(--spacing-md);
    display: block;
}

/* Color variants */
.status-sphere-red {
    --sphere-color-light: #ff6b6b;
    --sphere-color-dark: #c23616;
    --sphere-text-color: white;
}

.status-sphere-yellow {
    --sphere-color-light: #ffeb3b;
    --sphere-color-dark: #fbc02d;
    --sphere-text-color: black;
}

.status-sphere-green {
    --sphere-color-light: #5adfb0;
    --sphere-color-dark: #26ae60;
    --sphere-text-color: white;
}

.status-sphere-white {
    --sphere-color-light: #fff;
    --sphere-color-dark: #f0f0f0;
    --sphere-text-color: black;

    border: 1px solid var(--light-border);
}

/* ===== FLASHCARD PAGE STYLES ===== */

/* Flashcard-specific styles following design token standards */

.flashcard-main-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md);
    color: var(--text-color);
    line-height: 1.5;
}

.flashcard-title {
    font-size: var(--font-size-xl);
    font-weight: bold;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color);
}

.flashcard-question {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.flashcard-question p {
    margin-top: 0;
}

.flashcard-image-container {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.flashcard-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.flashcard-answer {
    background-color: var(--bg-color);
    border: 2px solid var(--color-info);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.flashcard-answer p {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.flashcard-answer p:last-child {
    margin-bottom: 0;
}

.flashcard-show-answer {
    display: block;
    margin: var(--spacing-lg) auto;
    min-height: 44px; /* Mobile touch target */
    min-width: 120px;
    font-size: var(--font-size-md);
    font-weight: bold;
}

.flashcard-self-reporting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.flashcard-progress-label {
    font-size: var(--font-size-md);
    color: var(--text-color);
    margin-right: var(--spacing-sm);
    cursor: pointer;
}

.flashcard-buttons {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.flashcard-continue-button {
    min-height: 44px; /* Mobile touch target */
    min-width: 120px;
}

/* Responsive design for smaller screens */
@media (width <= 600px) {
    .flashcard-main-container {
        padding: var(--spacing-sm);
    }

    .flashcard-question {
        font-size: var(--font-size-md);
        padding: var(--spacing-sm);
    }

    .flashcard-title {
        font-size: var(--font-size-lg);
    }

    .flashcard-self-reporting {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .flashcard-progress-label {
        margin-bottom: var(--spacing-xs);
        margin-right: 0;
    }
}

/* ================================
   RESPONSIVE LAYOUT UTILITIES
   ================================ */

/* HTML Page Main Content Layout */
.html-page-main-content {
    display: flex;
    flex-direction: column;
}

.html-page-main-content .html-page-images {
    order: -1; /* Always keep images at top */
}

.html-page-main-content .html-page-content {
    order: 0;
}

/* Prevent reordering during resize */
@media (width <= 768px) {
    .html-page-main-content {
        flex-direction: column !important;
    }

    .html-page-main-content .html-page-images {
        order: -1 !important;
    }
}

/* Responsive Layout Styles */
.responsive-layout-container {
  position: relative;
  box-sizing: border-box;
}

.responsive-layout-container * {
  box-sizing: border-box;
}

.responsive-content-wrapper {
  position: relative;
}

.responsive-section {
  position: relative;
}

/* Utility classes */
.flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.flex-row {
  display: flex;
  flex-flow: row wrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-grow {
  flex: 1 1 auto;
}

.flex-shrink {
  flex: 0 1 auto;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.responsive-width {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.responsive-height {
  height: auto;
  max-height: 100vh;
}

/* Page-specific styles */

[data-page-type="question"] .answer-option {
  cursor: pointer;
  transition: background-color 0.2s;
}

[data-page-type="question"] .answer-option:hover {
  background-color: rgb(0 0 0 / 5%);
}

/* Media queries */
@media (width <= 768px) {
  .sm-stack {
    flex-direction: column !important;
  }

  .sm-hide {
    display: none !important;
  }

  .sm-full-width {
    width: 100% !important;
  }
}

/* ===== IMAGE INSERTION MODAL STYLES ===== */

/*
 * Comprehensive image styling for multiple images in HTML content.
 * Supports both WYSIWYG editor image insertion and Markdown image syntax.
 *
 * Architecture:
 * - Content images: Embedded in pageObj.pageData.main.mainHTML
 * - Primary image: Single featured image in pageObj.pageData.image (separate system)
 *
 * Dark Mode Support: Automatic via CSS variables
 * Mobile Support: Responsive max-width and touch-friendly modal interactions
 * Accessibility: Focus states, ARIA support in modal component
 */

/* Content images - embedded in HTML content via WYSIWYG or Markdown */
.content-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-md) 0;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

/* Inline images - smaller images within text */
.content-image.inline {
    display: inline-block;
    margin: 0 var(--spacing-xs);
    vertical-align: middle;
    max-height: 2em;
}

/* Image insertion modal form
 * Two-tab interface: Upload (with drag-and-drop) and URL input
 * Used by: imageInsertionModal.mjs component
 * Integration: PageEditor.mjs WYSIWYG toolbar button
 */
.image-insertion-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 400px;
}

/* Tab buttons
 * Active state uses --focus-color for consistent theme integration
 * Hover state uses --light-bg for subtle feedback
 */
.image-insertion-tabs {
    display: flex;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--light-border);
    margin-bottom: var(--spacing-md);
}

.image-insertion-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
}

.image-insertion-tab:hover {
    background: var(--light-bg);
}

.image-insertion-tab.active {
    border-bottom-color: var(--focus-color);
    color: var(--focus-color);
}

/* Upload tab
 * Features: File upload with drag-and-drop support
 * Validation: Type (JPEG, PNG, GIF, WebP, SVG) and size (5MB limit)
 * Output: Base64 data URL for embedding in HTML
 */
.image-insertion-upload-tab {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Drag-and-drop zone with visual feedback states */
.image-insertion-drop-zone {
    border: 2px dashed var(--light-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    background: var(--light-bg);
    transition: all var(--transition-speed) ease;
    cursor: pointer;
}

.image-insertion-drop-zone:hover {
    border-color: var(--focus-color);
    background: var(--bg-color);
}

.image-insertion-drop-zone.drag-over {
    border-color: var(--focus-color);
    background: var(--color-info-light);
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.drop-zone-icon {
    font-size: var(--font-size-xxl);
    margin: 0;
}

.drop-zone-text {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
}

.drop-zone-or {
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
    margin: 0;
}

.drop-zone-hint {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin: var(--spacing-sm) 0 0 0;
    line-height: 1.4;
}

.drop-zone-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-danger-light);
    border-radius: var(--border-radius-sm);
}

/* URL tab */
.image-insertion-url-tab {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Shared fields */
.image-insertion-shared-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.form-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: var(--spacing-xs);
}

.form-input {
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-md);
    background: var(--bg-color);
    color: var(--text-color);
    transition: border-color var(--transition-speed) ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--focus-color);
}

/* Preview section */
.image-insertion-preview {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--light-bg);
    border-radius: var(--border-radius-sm);
    text-align: center;
}

.preview-title {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    margin: 0 0 var(--spacing-md) 0;
}

.preview-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.preview-img-container img {
    max-width: 100%;
    max-height: 300px;
    height: auto;
    border-radius: var(--border-radius-sm);
}

.preview-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Buttons */
.image-insertion-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--light-border);
}

/* Responsive adjustments
 * Mobile optimization: Reduced heights and padding for smaller screens
 * Touch targets: All interactive elements maintain 44px minimum (set in base styles)
 */
@media (width <= 768px) {
    .image-insertion-form {
        min-height: 300px;
    }

    .image-insertion-drop-zone {
        padding: var(--spacing-md);
    }

    .preview-img-container {
        min-height: 150px;
    }

    .preview-img-container img {
        max-height: 200px;
    }
}

/* ===== CATEGORY IN-CONTEXT EDITING STYLES ===== */

/* Edit page button container for category pages */
.category-edit-page-container {
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-md);
}

/* Edit content wrapper - contains properties and lessons sections */
.category-edit-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* Edit Mode Banner - Sticky header indicating edit mode is active */
.category-edit-banner {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--bg-color);
    border-bottom: 2px solid var(--focus-color);
    padding: var(--spacing-md);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.edit-mode-indicator {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--focus-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Edit actions - Bottom action buttons */
.category-edit-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--light-border);
}

/* DEPRECATED Phase 3: Right-aligned action buttons (replaced by saveControlsComponent)
.category-edit-actions-right {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}
*/

/* REMOVED: .category-delete-btn - empty ruleset (btn-danger class already provides styling) */

/* Category Properties Section - Collapsible sections for editing */
.category-properties-section {
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
}

.category-properties-section h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    color: var(--text-color);
}


/* Advanced Properties - Collapsible details section */
.category-advanced-properties {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
}

.category-advanced-properties summary {
    cursor: pointer;
    font-weight: 600;
    padding: var(--spacing-sm);
    user-select: none;
    font-size: var(--font-size-md);
    color: var(--text-color);
    min-height: 44px;
    display: flex;
    align-items: center;
    list-style: none; /* Remove default marker */
}

/* Hide default details marker */
.category-advanced-properties summary::-webkit-details-marker {
    display: none;
}

/* Add custom dropdown arrow */
.category-advanced-properties summary::before {
    content: '▶';
    display: inline-block;
    margin-right: var(--spacing-sm);
    transition: transform var(--transition-speed);
}

.category-advanced-properties[open] summary::before {
    transform: rotate(90deg);
}

.category-advanced-properties summary:hover {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
}

.category-advanced-properties[open] summary {
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--light-border);
}

/* Category Lessons Section */
.category-lessons-section {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.category-lessons-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.category-lessons-section h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-color);
}

.lesson-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Lessons List */
.lessons-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Individual Lesson Item */
.lesson-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    cursor: move;
    transition: all var(--transition-speed) ease;
    min-height: 44px;
}

.lesson-item:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
}

.lesson-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.lesson-item.drag-over {
    border-color: var(--focus-color);
    background-color: var(--color-info-light);
    border-width: 2px;
}

.drag-handle {
    font-size: var(--font-size-lg);
    color: var(--color-neutral);
    cursor: grab;
    user-select: none;
    padding: var(--spacing-xs);
}

.drag-handle:active {
    cursor: grabbing;
}

.lesson-title {
    flex: 1;
    font-size: var(--font-size-md);
    color: var(--text-color);
}

.lesson-context-label {
    font-size: var(--font-size-xs);
    color: var(--color-info);
    font-weight: 600;
    margin-left: var(--spacing-xs);
}

.lesson-item-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Empty state for lessons */
.lessons-list .empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-neutral);
    background-color: var(--light-bg);
    border: 1px dashed var(--light-border);
    border-radius: var(--border-radius);
    margin: 0;
    font-size: var(--font-size-md);
}

.lessons-empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-neutral);
    background-color: var(--light-bg);
    border: 1px dashed var(--light-border);
    border-radius: var(--border-radius);
}

.lessons-empty-state p {
    margin: 0;
    font-size: var(--font-size-md);
}

/* Drag active state */
.lessons-list.drag-active {
    min-height: 100px;
}

/* Lesson item container (lesson + activities) */
.lesson-item-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--spacing-sm);
}

/* Lesson expand/collapse toggle */
.lesson-expand-toggle {
    background: none;
    border: none;
    padding: 0 var(--spacing-xs);
    cursor: pointer;
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    line-height: 1;
    transition: color 0.15s ease, transform 0.15s ease;
    min-width: 24px;
    text-align: center;
}

.lesson-expand-toggle:hover {
    color: var(--focus-color);
}

.lesson-expand-toggle[data-expanded="true"] {
    color: var(--focus-color);
}

.lesson-expand-spacer {
    display: inline-block;
    width: 24px;
    min-width: 24px;
}

/* Activities container - visible by default, hide with data-display="false" if needed */
.lesson-activities-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding-left: calc(var(--spacing-xl) + var(--spacing-md));
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
    background-color: var(--light-bg);
    border-left: 2px solid var(--light-border);
    margin-left: var(--spacing-md);
}

/* Individual activity item */
.activity-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.activity-item:hover {
    border-color: var(--focus-color);
    background-color: var(--light-bg);
}

.activity-title {
    flex: 1;
    color: var(--text-color);
}

.activity-context-label {
    font-size: var(--font-size-xs);
    color: var(--color-info);
    font-weight: 600;
    margin-left: var(--spacing-xs);
}

/* Visibility control via data attributes */
.category-lessons-section[data-display="false"],
.category-advanced-properties[data-display="false"],
.category-properties-section[data-display="false"] {
    display: none;
}


/* Loading state during save */
.category-edit-banner[data-saving="true"] {
    opacity: 0.7;
    pointer-events: none;
}

.category-edit-banner[data-saving="true"]::after {
    content: " (Saving...)";
    font-size: var(--font-size-sm);
    color: var(--color-info);
    margin-left: var(--spacing-sm);
}

/* Responsive adjustments for mobile */
@media (width <= 768px) {
    .category-edit-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .edit-mode-actions {
        justify-content: stretch;
    }

    .edit-mode-actions button {
        flex: 1;
    }


    .category-lessons-section .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .lesson-actions {
        flex-direction: column;
    }

    .lesson-actions button {
        width: 100%;
    }

    .activity-actions {
        flex-direction: column;
    }

    .activity-actions button {
        width: 100%;
    }
}

/* ===== LESSON PAGE STYLES ===== */

/* Lesson page wrapper */
.lesson-page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* Lesson page header */
.lesson-page-header {
    margin-bottom: var(--spacing-xl);
}

.lesson-page-title {
    font-size: var(--font-size-xxl);
    color: var(--text-color);
    margin: 0 0 var(--spacing-sm) 0;
}

.lesson-page-breadcrumb {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    margin-top: var(--spacing-sm);
}

.breadcrumb-link {
    color: var(--link-color);
    text-decoration: none;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 var(--spacing-xs);
    color: var(--color-muted);
}

/* Lesson page info */
.lesson-page-info {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xl);
}

.info-item {
    display: flex;
    gap: var(--spacing-sm);
}

.info-label {
    font-weight: 600;
    color: var(--text-color);
}

.info-value {
    color: var(--color-muted);
}

/* Activities section */
.lesson-page-activities {
    margin-top: var(--spacing-xl);
}

.lesson-page-section-heading {
    font-size: var(--font-size-xl);
    color: var(--text-color);
    margin: 0 0 var(--spacing-lg) 0;
    border-bottom: 2px solid var(--light-border);
    padding-bottom: var(--spacing-sm);
}

.lesson-activities-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.lesson-activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    min-height: 44px;
}

.lesson-activity-item:hover {
    background-color: var(--bg-color);
    border-color: var(--focus-color);
}

.lesson-activity-link {
    color: var(--link-color);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: 500;
}

.lesson-activity-link:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

.lesson-activity-pages {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

/* Empty state */
.lesson-page-empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

/* Error page */
.lesson-page-error {
    max-width: 600px;
    margin: var(--spacing-xxl) auto;
    padding: var(--spacing-xl);
    text-align: center;
    background-color: var(--color-danger-light);
    border-radius: var(--border-radius);
}

.lesson-page-error h2 {
    color: var(--color-danger);
    margin-bottom: var(--spacing-md);
}

.lesson-page-error p {
    color: var(--text-color);
    margin-bottom: var(--spacing-lg);
}

/* Responsive adjustments */
@media (width <= 768px) {
    .lesson-page-wrapper {
        padding: var(--spacing-md);
    }

    .lesson-page-title {
        font-size: var(--font-size-xl);
    }

    .lesson-page-info {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .lesson-activity-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}

/* ===== LESSON IN-CONTEXT EDITING STYLES ===== */

/* Lesson Edit Mode Banner - Sticky header indicating edit mode is active */
.lesson-edit-banner {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--bg-color);
    border-bottom: 2px solid var(--focus-color);
    padding: var(--spacing-md);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

/* Edit content wrapper - contains properties and activities sections */
.lesson-edit-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* Edit actions - Bottom action buttons */
.lesson-edit-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--light-border);
}

/* DEPRECATED Phase 3: Right-aligned action buttons (replaced by saveControlsComponent)
.lesson-edit-actions-right {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}
*/

/* Lesson Properties Section */
.lesson-properties-section {
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
}

.lesson-properties-section h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    color: var(--text-color);
}

/* Lesson property inputs */
.lesson-property-input {
    min-height: 44px;
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    width: 100%;
    transition: border-color 0.15s ease;
}

.lesson-property-input:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    border-color: var(--focus-color);
}

.lesson-property-input.property-changed {
    border-color: var(--color-success);
    background-color: var(--color-success-light);
}

/* Advanced Properties - Collapsible details section */
.lesson-advanced-properties {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
}

.lesson-advanced-properties summary {
    cursor: pointer;
    font-weight: 600;
    padding: var(--spacing-sm);
    user-select: none;
    font-size: var(--font-size-md);
    color: var(--text-color);
    min-height: 44px;
    display: flex;
    align-items: center;
}

.lesson-advanced-properties summary:hover {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
}

/* Lesson Activities Section */
.lesson-activities-section {
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.lesson-activities-section h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    color: var(--text-color);
}

.lesson-activities-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
}

.activity-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Activities list */
.activities-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.activity-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    cursor: move;
    min-height: 44px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.activity-item:hover {
    border-color: var(--focus-color);
    background-color: var(--light-bg);
}

.activity-item.dragging {
    opacity: 0.5;
}

.activity-item.drag-over {
    border-color: var(--focus-color);
    border-width: 2px;
    background-color: var(--color-info-light);
}

.drag-handle {
    cursor: grab;
    color: var(--color-muted);
    user-select: none;
    padding: var(--spacing-xs);
}

.drag-handle:active {
    cursor: grabbing;
}

.activity-item-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-left: auto;
}

/* Empty state */
.lesson-activities-section .empty-state {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
}

/* Checkbox row for hidden property */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.checkbox-row label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    min-height: 44px;
}

.checkbox-row input[type="checkbox"] {
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
}

/* Property help text */
.property-help {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    margin-top: var(--spacing-xs);
}

/* Responsive adjustments for lesson editing */
@media (width <= 768px) {
    .lesson-edit-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .lesson-edit-actions-right {
        width: 100%;
        flex-direction: column;
    }

    .lesson-edit-actions-right button {
        width: 100%;
    }

    .lesson-activities-section .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .activity-actions {
        flex-direction: column;
    }

    .activity-actions button {
        width: 100%;
    }
}

/* ===== ACTIVITY PAGE STYLES ===== */

/* Activity Page Wrapper - Main container for activity display */
.activity-page-wrapper {
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

/* Activity Page Header */
.activity-page-header {
    margin-bottom: var(--spacing-lg);
}

.activity-page-title {
    font-size: var(--font-size-xxl);
    color: var(--text-color);
    margin: 0 0 var(--spacing-sm) 0;
}

.activity-page-breadcrumb {
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
    margin-bottom: var(--spacing-md);
}

.activity-page-breadcrumb a {
    color: var(--link-color);
    text-decoration: none;
}

.activity-page-breadcrumb .breadcrumb-separator {
    margin: 0 var(--spacing-xs);
    color: var(--color-muted);
}

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

/* Activity Page Info Section */
.activity-page-info {
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.activity-page-info p {
    margin: var(--spacing-sm) 0;
    color: var(--color-neutral);
}

/* Activity Pages Section */
.activity-page-pages {
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.activity-page-section-heading {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    margin: 0 0 var(--spacing-md) 0;
}

.activity-pages-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.activity-page-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.activity-page-item:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
}

.activity-page-link {
    color: var(--link-color);
    text-decoration: none;
    flex: 1;
}

.activity-page-link:hover {
    text-decoration: underline;
}

.activity-page-empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
}

.activity-page-error {
    padding: var(--spacing-lg);
    background-color: var(--color-error-light);
    border-radius: var(--border-radius);
    color: var(--color-error);
}

/* ===== ACTIVITY IN-CONTEXT EDITING STYLES ===== */

/* Activity Edit Mode Banner - Sticky header indicating edit mode is active */
.activity-edit-banner {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--bg-color);
    border-bottom: 2px solid var(--focus-color);
    padding: var(--spacing-md);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

/* Edit Mode Indicator */
.activity-edit-banner .edit-mode-indicator {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--focus-color);
    margin-bottom: var(--spacing-sm);
}

/* Edit Actions Container */
.activity-edit-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

/* DEPRECATED Phase 3: Right-aligned action buttons (replaced by saveControlsComponent)
.activity-edit-actions-right {
    display: flex;
    gap: var(--spacing-sm);
}
*/

.activity-delete-btn {
    margin-right: auto;
}

/* Phase 3: Save Controls Container - Used across all editors (category, lesson, activity) */
.save-controls-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Edit Content Wrapper - Contains properties and pages sections */
.activity-edit-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* Activity Properties Section */
.activity-properties-section {
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.activity-properties-section h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    color: var(--text-color);
}

.activity-property-input {
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--font-size-base);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-color);
    color: var(--text-color);
}

.activity-property-input:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px var(--focus-shadow);
}

/* Advanced Properties Toggle */
.activity-advanced-properties {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
}

.activity-advanced-properties summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-color);
    user-select: none;
    padding: var(--spacing-xs);
}

.activity-advanced-properties summary:hover {
    color: var(--focus-color);
}

/* Activity Pages Section */
.activity-pages-section {
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.activity-pages-section h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    color: var(--text-color);
}

.activity-pages-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
}

.activity-pages-section .section-header h3 {
    margin: 0;
}

.activity-pages-section .page-count {
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
    margin-left: var(--spacing-sm);
}

/* Page Items in Editor */
.activity-pages-section .page-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    margin-bottom: var(--spacing-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: grab;
    min-height: 44px;
}

.activity-pages-section .page-item:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
}

.activity-pages-section .page-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.activity-pages-section .page-item.drag-over {
    border-color: var(--focus-color);
    border-width: 2px;
    background-color: var(--color-info-light);
}

.activity-pages-section .page-item-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Page Actions Buttons */
.page-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.page-actions button {
    min-width: 140px;
}

/* Empty State for Pages */
.activity-pages-section .empty-state {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
}

/* Loading state during save */
.activity-edit-banner[data-saving="true"] {
    opacity: 0.7;
    pointer-events: none;
}

.activity-edit-banner[data-saving="true"]::after {
    content: " (Saving...)";
    font-size: var(--font-size-sm);
    color: var(--color-info);
    margin-left: var(--spacing-sm);
}

/* Responsive adjustments for mobile */
@media (width <= 768px) {
    .activity-page-wrapper {
        padding: var(--spacing-md);
    }

    .activity-edit-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .activity-edit-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .activity-edit-actions-right {
        flex-direction: column;
    }

    .activity-edit-actions button {
        width: 100%;
    }

    .activity-pages-section .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions {
        flex-direction: column;
    }

    .page-actions button {
        width: 100%;
        min-width: 0;
    }

    .activity-pages-section .page-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .activity-pages-section .page-item-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ===== GENERIC ERROR AND VALIDATION PATTERNS ===== */

/* Reusable error and validation components for all pages */

/* Error container - for general error displays */
.error-container {
    text-align: center;
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) auto;
    max-width: 600px;
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.error-container h2 {
    color: var(--color-danger);
    margin-bottom: var(--spacing-md);
}

.error-details {
    font-family: 'Courier New', monospace;
    background-color: var(--light-bg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin: var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Validation errors - for form validation displays */
.validation-errors {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-left: 4px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
}

.validation-errors h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-danger);
    font-size: var(--font-size-md);
    font-weight: 600;
}

.validation-errors ul {
    margin: 0;
    padding-left: var(--spacing-lg);
    list-style-type: disc;
}

.validation-errors li {
    color: var(--color-danger);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.validation-errors li:last-child {
    margin-bottom: 0;
}

/* ===== ORGANIZE CONTENT PAGE STYLES ===== */

/* Tree view for hierarchical content organization */

.tree-controls {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-md);
}

.content-tree {
    margin-top: var(--spacing-lg);
}

.tree-node {
    margin-bottom: var(--spacing-sm);
}

.tree-node-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.tree-node-header:hover {
    background-color: var(--light-bg);
}

/* Node actions should be pushed to the right */
.tree-node-header .node-actions {
    margin-left: auto;
}

.tree-node-ubercat > .tree-node-header {
    border-left: 4px solid #4D90FE;
    font-weight: 600;
}

.tree-node-metacat > .tree-node-header {
    border-left: 4px solid #28a745;
    padding-left: calc(var(--spacing-lg) + var(--spacing-md));
}

.tree-node-category > .tree-node-header {
    border-left: 4px solid #17a2b8;
    padding-left: calc(var(--spacing-xl) + var(--spacing-md));
}

.dropdown-arrow {
    cursor: pointer;
    user-select: none;
    min-width: 1.5rem;
    text-align: center;
    transition: transform var(--transition-speed);
}

.dropdown-arrow.expanded {
    transform: rotate(0deg);
}

.dropdown-arrow.no-children {
    visibility: hidden;
}

.node-icon {
    font-size: var(--font-size-lg);
}

.node-title {
    flex: 1;
    font-size: var(--font-size-md);
}

.node-count {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.hidden-badge {
    background-color: var(--color-warning);
    color: #333;
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.node-actions {
    display: flex;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity var(--transition-speed);
}

.tree-node-header:hover .node-actions {
    opacity: 1;
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    color: var(--text-color, #333);
    transition: background-color var(--transition-speed);
}

.btn-icon.add-metacat {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1;
}

.btn-icon.add-category {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1;
}

.btn-icon:hover {
    background-color: var(--hover-bg, #e0e0e0);
}

.btn-icon:active {
    transform: scale(0.95);
}

.tree-node-children {
    margin-left: var(--spacing-lg);
    margin-top: var(--spacing-xs);
}

.tree-empty {
    text-align: center;
    padding: var(--spacing-xxl);
    color: var(--text-secondary);
}

.tree-empty-hint {
    font-size: var(--font-size-sm);
    color: var(--text-muted, #999);
    margin-top: var(--spacing-sm);
}

.tree-error {
    padding: var(--spacing-lg);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-md);
    color: var(--color-danger);
}

/* Dark mode support */
[data-theme="dark"] .tree-node-header:hover {
    background-color: var(--hover-bg, #444);
}

[data-theme="dark"] .btn-icon {
    color: var(--dark-text, #e0e0e0);
}

[data-theme="dark"] .node-actions .btn-icon {
    color: var(--dark-text, #e0e0e0);
    background-color: rgb(255 255 255 / 10%);
    filter: brightness(1.3) contrast(1.1);
}

[data-theme="dark"] .btn-icon.add-metacat {
    color: #fff;
    font-weight: 900;
}

[data-theme="dark"] .btn-icon.add-category {
    color: #fff;
    font-weight: 900;
}

[data-theme="dark"] .btn-icon:hover {
    background-color: var(--hover-bg, #555);
}

/* Hidden items styling */
.tree-node-hidden {
    opacity: 0.6;
}

.tree-node-hidden > .tree-node-header {
    background-color: var(--color-warning-light);
    font-style: italic;
}

.btn-active {
    background-color: var(--button-primary);
    color: white;
}

.btn-active:hover {
    background-color: var(--button-primary-hover);
}

/* Dark mode support for hidden items */
[data-theme="dark"] .tree-node-hidden > .tree-node-header {
    background-color: rgb(255 193 7 / 20%);
}

/* ===== DRAG AND DROP STYLES ===== */

/* Visual feedback for drag-and-drop operations */

/* Dragging state */
.tree-node.dragging {
    opacity: 0.4;
    cursor: move;
}

/* Draggable nodes cursor */
.tree-node[draggable="true"] {
    cursor: grab;
}

.tree-node[draggable="true"]:active {
    cursor: grabbing;
}

/* Valid drop target */
.tree-node.drop-target-valid {
    background-color: rgb(76 175 80 / 10%);
    border: 2px dashed #4caf50;
    border-radius: var(--border-radius-md);
}

/* Invalid drop target */
.tree-node.drop-target-invalid {
    background-color: rgb(244 67 54 / 10%);
    border: 2px dashed #f44336;
    border-radius: var(--border-radius-md);
}

/* Dark mode support for drag-and-drop */
[data-theme="dark"] .tree-node.drop-target-valid {
    background-color: rgb(76 175 80 / 20%);
}

[data-theme="dark"] .tree-node.drop-target-invalid {
    background-color: rgb(244 67 54 / 20%);
}

/* ===== OWNERSHIP TAG STYLES ===== */

/* Tags for indicating content ownership (PUBLIC, TEAM, PERSONAL) */

.ownership-tag {
    display: inline-block;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 8px;
    vertical-align: middle;
}

/* Size variants */
.ownership-tag-small {
    padding: 2px 6px;
    font-size: 10px;
}

.ownership-tag-medium {
    padding: 2px 8px;
    font-size: 11px;
}

.ownership-tag-large {
    padding: 4px 10px;
    font-size: 12px;
}

/* Ownership type colors */
.ownership-tag-public {
    background-color: #e3f2fd;
    color: #1976d2;
}

.ownership-tag-team {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.ownership-tag-personal {
    background-color: #fff3e0;
    color: #f57c00;
}

.ownership-tag-system {
    background-color: #e8f5e9;
    color: #388e3c;
}

/* Icon styling */
.ownership-tag-icon {
    display: inline;
    font-size: 0.9em;
}

/* Dark mode support for ownership tags */
[data-theme="dark"] .ownership-tag-public {
    background-color: rgb(25 118 210 / 20%);
    color: #90caf9;
}

[data-theme="dark"] .ownership-tag-team {
    background-color: rgb(123 31 162 / 20%);
    color: #ce93d8;
}

[data-theme="dark"] .ownership-tag-personal {
    background-color: rgb(245 124 0 / 20%);
    color: #ffb74d;
}

[data-theme="dark"] .ownership-tag-system {
    background-color: rgb(56 142 60 / 20%);
    color: #81c784;
}

/* ===== OWNERSHIP SELECTOR STYLES ===== */

/* UI for selecting content ownership during creation */

.ownership-selector {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}

.ownership-selector-type {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.ownership-radio-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    font-weight: 500;
}

.ownership-radio-label input[type="radio"] {
    cursor: pointer;
}

.ownership-radio-label input[type="radio"]:disabled {
    cursor: not-allowed;
}

.ownership-selector-team {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.ownership-team-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 500;
}

.ownership-team-dropdown {
    flex: 1;
    max-width: 300px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.ownership-team-dropdown:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark mode support */
[data-theme="dark"] .ownership-selector {
    background-color: var(--bg-tertiary);
}

/* ===== OWNERSHIP DROPDOWN STYLES ===== */

/* UI for viewing and changing content ownership */

.ownership-dropdown-container {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.ownership-dropdown-label {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.ownership-dropdown {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.ownership-dropdown:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-secondary);
}

.ownership-dropdown:hover:not(:disabled) {
    border-color: var(--primary-color);
}

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

/* Ubercat header ownership dropdown positioning (Manage Content page) */
.ubercat-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Push ownership dropdown to the right, before the caret */
.ubercat-ownership-dropdown {
    margin-left: auto;
}

/* Ensure caret stays at the very end */
.ubercat-header .section-toggle-caret {
    margin-left: 0;
}

/* Tree node ownership dropdown positioning (Organize Content page) */
.tree-node-ownership-dropdown {
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-xs);
}