/* Shoelace + Tailwind Integration */
:root {
    /* Map colors to Shoelace CSS variables for primary theme */
    --sl-color-primary-50: #eff6ff;
    --sl-color-primary-100: #dbeafe;
    --sl-color-primary-200: #bfdbfe;
    --sl-color-primary-300: #93c5fd;
    --sl-color-primary-400: #60a5fa;
    --sl-color-primary-500: #3b82f6;
    --sl-color-primary-600: #2563eb;
    --sl-color-primary-700: #1d4ed8;
    --sl-color-primary-800: #1e40af;
    --sl-color-primary-900: #1e3a8a;
    
    /* Map spacing to match existing Tailwind design */
    --sl-spacing-small: 0.5rem;
    --sl-spacing-medium: 1rem;
    --sl-spacing-large: 1.5rem;
    --sl-spacing-x-large: 2rem;
    
    /* Border radius to match existing styles */
    --sl-border-radius-small: 0.25rem;
    --sl-border-radius-medium: 0.5rem;
    --sl-border-radius-large: 1rem;
    --sl-border-radius-x-large: 1.5rem;
    --sl-border-radius-circle: 9999px;
    
    /* Input sizing to match existing forms */
    --sl-input-height-small: 36px;
    --sl-input-height-medium: 44px;
    --sl-input-height-large: 52px;
    --sl-input-font-size-small: 0.875rem;
    --sl-input-font-size-medium: 1rem;
    --sl-input-font-size-large: 1.125rem;
    
    /* Font family to match existing design */
    --sl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Focus ring colors */
    --sl-focus-ring-color: var(--sl-color-primary-600);
    --sl-focus-ring-alpha: 30%;
}

/* Ensure Shoelace components work with Tailwind utilities */
sl-button {
    display: inline-flex;
}

sl-card {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Remove default margins that might conflict with Tailwind spacing */
sl-card::part(header),
sl-card::part(body),
sl-card::part(footer) {
    margin: 0;
}

/* HTMX loading states for Shoelace buttons */
sl-button.htmx-request sl-spinner {
    display: inline-block;
}

sl-button:not(.htmx-request) sl-spinner {
    display: none;
}

/* Style for HTMX indicators in Shoelace components */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Ensure Shoelace form elements align with existing form styles */
sl-input::part(base),
sl-select::part(base),
sl-textarea::part(base) {
    width: 100%;
}

/* Match existing button styles */
sl-button[variant="primary"]::part(base) {
    background-color: var(--sl-color-primary-600);
    border-color: var(--sl-color-primary-600);
    color: white;
}

sl-button[variant="primary"]::part(base):hover {
    background-color: var(--sl-color-primary-700);
    border-color: var(--sl-color-primary-700);
}

/* Alert auto-hide animation */
sl-alert[auto-hide] {
    animation: fadeOut 0.3s ease-in-out forwards;
    animation-delay: 4.7s;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Table styling for Shoelace-enhanced tables */
.sl-table {
    width: 100%;
    border-collapse: collapse;
}

.sl-table th {
    text-align: left;
    font-weight: 600;
    padding: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
}

.sl-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.sl-table tbody tr:hover {
    background-color: #f9fafb;
}

/* Validation feedback styles */
.validation-feedback {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc2626;
}

.validation-feedback.valid {
    color: #16a34a;
}

/* Dialog backdrop blur */
sl-dialog::part(overlay) {
    backdrop-filter: blur(3px);
}

/* Responsive utilities for Shoelace components */
@media (max-width: 768px) {
    sl-dialog::part(panel) {
        max-width: 90vw;
    }
    
    sl-card {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* Fix for Shoelace icons in buttons */
sl-button sl-icon {
    vertical-align: middle;
}

/* Spinner size variants */
sl-spinner[size="small"] {
    --indicator-track-width: 2px;
    height: 16px;
    width: 16px;
}

sl-spinner[size="medium"] {
    --indicator-track-width: 3px;
    height: 32px;
    width: 32px;
}

sl-spinner[size="large"] {
    --indicator-track-width: 4px;
    height: 48px;
    width: 48px;
}

/* Form action buttons alignment */
.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Ensure proper spacing for nested Shoelace components */
sl-card sl-card {
    margin-top: 1rem;
}

/* Custom tag colors to match existing badge styles */
sl-tag[variant="primary"] {
    --sl-color-primary-600: #2563eb;
}

sl-tag[variant="success"] {
    --sl-color-success-600: #16a34a;
}

sl-tag[variant="warning"] {
    --sl-color-warning-600: #d97706;
}

sl-tag[variant="danger"] {
    --sl-color-danger-600: #dc2626;
}

/* Dropdown menu styling */
sl-dropdown sl-menu {
    min-width: 200px;
}

/* Input group styling for search bars */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-group sl-input {
    flex: 1;
}

/* Utility classes for Shoelace components */
.sl-rounded-full {
    --sl-border-radius-medium: var(--sl-border-radius-circle);
}

.sl-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Fix for multi-select height */
sl-select[multiple]::part(tags) {
    max-height: 120px;
    overflow-y: auto;
}

/* Pagination button group styling */
.table-pagination sl-button-group {
    margin-top: 1rem;
}

/* Sort button styling in tables */
.sort-button {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    font-weight: inherit;
}

.sort-button:hover {
    color: var(--sl-color-primary-600);
}

.sort-button sl-icon {
    font-size: 0.875rem;
}