/* EidosUI Button Styles - Simplified for CDN */

/* Base Button - One size that works everywhere */
.eidos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    outline: none;
    user-select: none;
}

.eidos-btn:focus-visible {
    outline: var(--border-2) solid currentColor;
    outline-offset: var(--border-2);
}

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

/* Button Variants - Using CSS Custom Properties to reduce redundancy */
.eidos-btn-primary,
.eidos-btn-secondary,
.eidos-btn-ghost,
.eidos-btn-outline,
.eidos-btn-success,
.eidos-btn-error,
.eidos-btn-cta {
    background-color: var(--btn-bg, transparent);
    color: var(--btn-color);
    border: var(--btn-border, none);
}

.eidos-btn-primary:hover,
.eidos-btn-secondary:hover,
.eidos-btn-ghost:hover,
.eidos-btn-outline:hover,
.eidos-btn-success:hover,
.eidos-btn-error:hover,
.eidos-btn-cta:hover {
    background-color: var(--btn-bg-hover);
    color: var(--btn-color-hover, var(--btn-color));
}

/* Primary Button */
.eidos-btn-primary {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-primary-foreground);
    --btn-bg-hover: var(--color-primary-hover);
}

/* Secondary Button */
.eidos-btn-secondary {
    --btn-bg: var(--color-secondary-light);
    --btn-color: var(--color-secondary-dark);
    --btn-bg-hover: var(--color-border);
}

/* Ghost Button */
.eidos-btn-ghost {
    --btn-bg: transparent;
    --btn-color: var(--color-secondary-dark);
    --btn-bg-hover: rgba(0, 0, 0, var(--opacity-5));
}

/* Outline Button */
.eidos-btn-outline {
    --btn-bg: transparent;
    --btn-border: var(--border-2) solid var(--color-primary);
    --btn-color: var(--color-primary);
    --btn-bg-hover: var(--color-primary);
    --btn-color-hover: var(--color-primary-foreground);
}

/* Success Button */
.eidos-btn-success {
    --btn-bg: var(--color-success);
    --btn-color: var(--color-success-foreground);
    --btn-bg-hover: var(--color-success-hover);
}

/* Error Button */
.eidos-btn-error {
    --btn-bg: var(--color-error);
    --btn-color: var(--color-error-foreground);
    --btn-bg-hover: var(--color-error-hover);
}

/* CTA Button */
.eidos-btn-cta {
    --btn-bg: var(--color-cta);
    --btn-color: var(--color-cta-foreground);
    --btn-bg-hover: var(--color-cta-hover);
}

.eidos-h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-md);
}

.eidos-h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    margin-bottom: calc(var(--space-sm) * 1.6);
}

.eidos-h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    margin-bottom: calc(var(--space-sm) * 1.2);
}

.eidos-h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    margin-bottom: calc(var(--space-sm) * 0.8);
}

.eidos-h5 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-relaxed);
    margin-bottom: calc(var(--space-xs) * 0.8);
}

.eidos-h6 {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-relaxed);
    margin-bottom: calc(var(--space-xs) * 0.4);
}


.eidos-body {
    background-color: var(--color-background);
    color: var(--color-text);
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* Semantic HTML Elements */

/* Strong emphasis */
.eidos-strong {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* Italic emphasis */
.eidos-i {
    font-style: italic;
}

/* Small text */
.eidos-small {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Deleted text */
.eidos-del {
    text-decoration: line-through;
    color: var(--color-text-muted);
    opacity: var(--opacity-70);
}

/* Abbreviation */
.eidos-abbr {
    text-decoration: underline dotted;
    cursor: help;
    text-decoration-thickness: var(--border);
    text-underline-offset: 0.2em;
}

/* Variable */
.eidos-var {
    font-family: monospace;
    font-style: italic;
    background-color: var(--color-surface);
    padding: 0 var(--space-xs);
    border-radius: var(--radius-sm);
}

/* Summary (for details element) */
.eidos-summary {
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    user-select: none;
}

.eidos-summary:hover {
    background-color: var(--color-border);
}

/* Details */
.eidos-details {
    border: var(--border) solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.eidos-details[open] .eidos-summary {
    border-bottom: var(--border) solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.eidos-details-content {
    padding: var(--space-md);
}

/* Blockquote */
.eidos-blockquote {
    margin: var(--space-md) 0;
    padding: var(--space-md) var(--space-lg);
    border-left: var(--border-4) solid var(--color-primary);
    background-color: var(--color-surface);
    font-style: italic;
    color: var(--color-text-muted);
}

/* Citation */
.eidos-cite {
    font-style: italic;
    color: var(--color-text-muted);
}

/* Code elements */
.eidos-code {
    font-family: monospace;
    font-size: var(--font-size-sm);
    background-color: var(--color-surface);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    color: var(--color-accent);
}

/* Preformatted text */
.eidos-pre {
    font-family: monospace;
    font-size: var(--font-size-sm);
    background-color: var(--color-surface);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    line-height: var(--line-height-relaxed);
    border: var(--border) solid var(--color-border);
}

/* Keyboard input */
.eidos-kbd {
    font-family: monospace;
    font-size: var(--font-size-sm);
    background-color: var(--color-surface);
    padding: var(--space-xs) var(--space-sm);
    border: var(--border) solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    display: inline-block;
    min-width: 1.5em;
    text-align: center;
}

/* Sample output */
.eidos-samp {
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Mark/highlight */
.eidos-mark {
    background-color: var(--color-warning);
    color: var(--color-text);
    padding: 0 var(--space-xs);
    border-radius: var(--radius-sm);
}

/* Time */
.eidos-time {
    color: var(--color-text-muted);
}

/* Address */
.eidos-address {
    font-style: normal;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
}

/* Definition list */
.eidos-dl {
    margin: var(--space-md) 0;
}

.eidos-dt {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
}

.eidos-dd {
    margin-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text-muted);
}

/* Figure */
.eidos-figure {
    margin: var(--space-lg) 0;
    text-align: center;
}

.eidos-figcaption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
}

/* Horizontal rule */
.eidos-hr {
    border: none;
    border-top: var(--border) solid var(--color-border);
    margin: var(--space-xl) 0;
}

/* Table styles */
.eidos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
    background-color: var(--color-background);
}

.eidos-thead {
    background-color: var(--color-surface);
    border-bottom: var(--border-2) solid var(--color-border);
}

.eidos-tbody {
    background-color: var(--color-background);
}

.eidos-tfoot {
    background-color: var(--color-surface);
    border-top: var(--border-2) solid var(--color-border);
}

.eidos-tr {
    border-bottom: var(--border) solid var(--color-border);
    transition: background-color var(--transition-fast);
}

.eidos-tbody .eidos-tr:hover {
    background-color: var(--color-surface);
}

.eidos-tbody .eidos-tr:last-child {
    border-bottom: none;
}

.eidos-th {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.eidos-td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    color: var(--color-text);
}

/* Navigation base styles */
.eidos-navbar {
    width: 100%;
}

.eidos-navbar a {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.eidos-navbar a:hover {
    background-color: var(--color-border);
}

/* Sticky navbar */
.eidos-navbar-sticky {
    background-color: var(--color-background);
    box-shadow: var(--shadow-sm);
}

/* Mobile toggle button */
.eidos-navbar-toggle:hover {
    background-color: var(--color-border);
}

/* Mobile menu dropdown */
.eidos-navbar-mobile {
    background-color: var(--color-background);
    border-color: var(--color-border);
}

/* Mobile menu dividers */
.eidos-navbar-mobile-divider > a:not(:last-child) {
    border-bottom: var(--border) solid var(--color-border);
}

/* Underline style */
.navbar-underline a.eidos-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-primary);
}

/* Bold style */
.navbar-bold a.eidos-active {
    font-weight: 700;
    color: var(--color-primary);
}

/* Mobile menu animation */
[data-toggle] + * {
    transition: all 0.3s ease;
}

/* Mobile navigation styles */
[data-mobile-menu="true"] {
    animation: slideDown 0.2s ease-out;
}

[data-mobile-menu="true"] a {
    padding: 1rem 1.5rem;
    text-align: center;
    display: block;
    font-weight: 500;
    transition: all 0.2s ease;
}

[data-mobile-menu="true"] a:hover {
    background-color: var(--color-border);
}

@keyframes slideDown {
    from {
        transform: translateY(-0.5rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* List Styles */
.eidos-ul {
    list-style-type: disc;
    margin: var(--space-md) 0;
    padding-left: var(--space-xl);
    color: var(--color-text);
}

.eidos-ol {
    list-style-type: decimal;
    margin: var(--space-md) 0;
    padding-left: var(--space-xl);
    color: var(--color-text);
}

.eidos-li {
    margin-bottom: var(--space-xs);
    line-height: var(--line-height-relaxed);
}

/* Nested lists */
.eidos-ul .eidos-ul,
.eidos-ul .eidos-ol,
.eidos-ol .eidos-ul,
.eidos-ol .eidos-ol {
    margin: var(--space-xs) 0;
}

/* Remove bottom margin from last list item */
.eidos-li:last-child {
    margin-bottom: 0;
}

/* List item hover effect for interactive lists */
.eidos-li-interactive {
    padding: var(--space-xs) var(--space-sm);
    margin-left: calc(var(--space-xl) * -1);
    margin-right: calc(var(--space-sm) * -1);
    padding-left: var(--space-xl);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
    cursor: pointer;
}

.eidos-li-interactive:hover {
    background-color: var(--color-surface);
}

/* Tabs Component */
.eidos-tabs {
    position: relative;
}

.eidos-tabs-list {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.eidos-tab {
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
    position: relative;
    top: 1px;
}

.eidos-tab:hover {
    color: var(--color-text);
}

.eidos-tab:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.eidos-tab-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.eidos-tab-panel {
    padding: var(--space-lg) 0;
    display: none;
}

.eidos-tab-panel-active {
    display: block;
}

/* HTMX-enhanced transitions */
.eidos-tabs.htmx-swapping .eidos-tab-panel {
    opacity: 0;
    transform: translateY(-4px);
}

.eidos-tabs.htmx-settling .eidos-tab-panel {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

/* ===========================
   Form Styles
   =========================== */

/* Fieldset */
.eidos-fieldset {
    border: var(--form-fieldset-border);
    border-radius: var(--form-fieldset-radius);
    padding: var(--form-fieldset-padding);
    background-color: var(--form-fieldset-bg);
    margin-bottom: var(--space-lg);
}

.eidos-fieldset legend {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    padding: 0 var(--space-sm);
}

/* Form Group */
.eidos-form-group {
    margin-bottom: var(--space-lg);
}

/* Labels */
.eidos-label {
    display: inline-block;
    font-size: var(--form-label-font-size);
    font-weight: var(--form-label-font-weight);
    color: var(--form-label-color);
    margin-bottom: var(--form-label-margin-bottom);
}

.eidos-label-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    margin-bottom: 0;
    color: var(--form-label-color);
    font-size: var(--font-size-base);
}

/* Base Input Styles */
.eidos-input,
.eidos-textarea,
.eidos-select {
    display: block;
    width: 100%;
    padding: var(--form-input-padding-y) var(--form-input-padding-x);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--form-input-text);
    background-color: var(--form-input-bg);
    border: var(--form-input-border-width) solid var(--form-input-border-color);
    border-radius: var(--form-input-radius);
    box-shadow: var(--form-input-shadow);
    transition: all var(--transition-fast);
    outline: none;
}

.eidos-input {
    height: var(--form-input-height);
}

.eidos-textarea {
    min-height: calc(var(--form-input-height) * 2);
    resize: vertical;
}

.eidos-select {
    height: var(--form-input-height);
    cursor: pointer;
    padding-right: calc(var(--form-input-padding-x) * 2.5);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--form-input-padding-x) center;
    background-size: 16px 12px;
    appearance: none;
}

/* Input States */
.eidos-input:hover,
.eidos-textarea:hover,
.eidos-select:hover {
    border-color: var(--form-input-border-color-hover);
}

.eidos-input:focus,
.eidos-textarea:focus,
.eidos-select:focus {
    border-color: var(--form-input-border-color-focus);
    box-shadow: var(--form-input-shadow-focus);
}

.eidos-input:disabled,
.eidos-textarea:disabled,
.eidos-select:disabled {
    background-color: var(--form-input-bg-disabled);
    color: var(--form-input-text-disabled);
    cursor: not-allowed;
    opacity: var(--opacity-60);
}

.eidos-input::placeholder,
.eidos-textarea::placeholder {
    color: var(--form-input-placeholder);
    opacity: 1;
}

/* Checkbox and Radio */
.eidos-checkbox,
.eidos-radio {
    width: var(--form-checkbox-size);
    height: var(--form-checkbox-size);
    margin-right: var(--space-sm);
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    background-color: var(--form-checkbox-bg);
    border: var(--form-input-border-width) solid var(--form-checkbox-border);
}

.eidos-checkbox:checked,
.eidos-radio:checked {
    background-color: var(--form-checkbox-bg-checked);
    border-color: var(--form-checkbox-bg-checked);
}

.eidos-radio {
    border-radius: var(--radius-full);
}

/* Error States */
.eidos-input[aria-invalid="true"],
.eidos-textarea[aria-invalid="true"],
.eidos-select[aria-invalid="true"] {
    border-color: var(--form-error-border-color);
}

.eidos-input[aria-invalid="true"]:focus,
.eidos-textarea[aria-invalid="true"]:focus,
.eidos-select[aria-invalid="true"]:focus {
    border-color: var(--form-error-border-color);
    box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.1);
}

/* Error Messages */
.eidos-error {
    display: block;
    font-size: var(--form-error-font-size);
    color: var(--form-error-color);
    margin-top: var(--form-help-margin-top);
}

/* Help Text */
.eidos-help {
    display: block;
    font-size: var(--form-help-font-size);
    color: var(--form-help-color);
    margin-top: var(--form-help-margin-top);
}

/* File Input */
.eidos-file {
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.eidos-file::file-selector-button {
    padding: var(--space-xs) var(--space-sm);
    margin-right: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    border: var(--border) solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.eidos-file::file-selector-button:hover {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
}

/* Form Layout Helpers */
.eidos-form-row {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.eidos-form-col {
    flex: 1;
}

/* Input Groups */
.eidos-input-group {
    display: flex;
    align-items: stretch;
}

.eidos-input-group .eidos-input {
    border-radius: 0;
}

.eidos-input-group .eidos-input:first-child {
    border-top-left-radius: var(--form-input-radius);
    border-bottom-left-radius: var(--form-input-radius);
}

.eidos-input-group .eidos-input:last-child {
    border-top-right-radius: var(--form-input-radius);
    border-bottom-right-radius: var(--form-input-radius);
}

.eidos-input-addon {
    display: flex;
    align-items: center;
    padding: var(--form-input-padding-y) var(--form-input-padding-x);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    background-color: var(--color-surface);
    border: var(--form-input-border-width) solid var(--form-input-border-color);
}

.eidos-input-addon:first-child {
    border-right: 0;
    border-radius: var(--form-input-radius) 0 0 var(--form-input-radius);
}

.eidos-input-addon:last-child {
    border-left: 0;
    border-radius: 0 var(--form-input-radius) var(--form-input-radius) 0;
}


/* Color Input */
.eidos-input[type="color"] {
    padding: var(--space-xs);
    cursor: pointer;
}

.eidos-input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.eidos-input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: var(--radius-sm);
}

/* Date and Time Input Styling */
.eidos-input[type="date"],
.eidos-input[type="time"],
.eidos-input[type="datetime-local"],
.eidos-input[type="month"],
.eidos-input[type="week"] {
    color-scheme: light dark;
    background-color: var(--form-datetime-bg);
    color: var(--form-datetime-text);
}

/* Style the calendar/time picker icon */
.eidos-input[type="date"]::-webkit-calendar-picker-indicator,
.eidos-input[type="time"]::-webkit-calendar-picker-indicator,
.eidos-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.eidos-input[type="month"]::-webkit-calendar-picker-indicator,
.eidos-input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.8;
    filter: var(--color-scheme-filter, none);
    transition: opacity var(--transition-fast);
}

.eidos-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.eidos-input[type="time"]:hover::-webkit-calendar-picker-indicator,
.eidos-input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.eidos-input[type="month"]:hover::-webkit-calendar-picker-indicator,
.eidos-input[type="week"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Dark theme filter */
[data-theme="dark"] .eidos-input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .eidos-input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .eidos-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .eidos-input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .eidos-input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Better Select Dropdown Styling */
.eidos-select option {
    background-color: var(--color-background);
    color: var(--color-text);
    padding: var(--space-sm);
}

.eidos-select option:hover,
.eidos-select option:focus {
    background-color: var(--color-surface);
}

.eidos-select option:checked {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
}

.eidos-select option:disabled {
    color: var(--color-text-muted);
    opacity: 0.6;
}