/**
 * Component styles for the file explorer.
 * This file contains shared component styles that are used across the application.
 */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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

.btn-primary:hover:not(:disabled) {
    background-color: var(--accent-hover);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--surface-hover);
    border-color: var(--text-tertiary);
}

.btn-ghost {
    background-color: transparent;
    color: var(--text-secondary);
    border: none;
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

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

.btn-danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--error) 85%, black);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
}

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

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
}

.btn-icon.btn-sm {
    width: 24px;
    height: 24px;
}

.btn-icon.btn-lg {
    width: 40px;
    height: 40px;
}

/* Inputs */
.input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--background);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-surface);
}

.input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.input::placeholder {
    color: var(--text-tertiary);
}

.input-sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
}

.input-lg {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-md);
}

/* Form groups */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.form-group .input-hint {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.form-group.error .input {
    border-color: var(--error);
}

.form-group.error .error-message {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--error);
}

/* Checkboxes and Radio Buttons */
.checkbox-container,
.radio-container {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
    cursor: pointer;
}

.checkbox-input,
.radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
}

.checkbox-custom,
.radio-custom {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: var(--space-sm);
    border: 1px solid var(--border);
    background-color: var(--background);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.checkbox-custom {
    border-radius: var(--radius-sm);
}

.radio-custom {
    border-radius: var(--radius-circle);
}

.checkbox-input:checked ~ .checkbox-label .checkbox-custom {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
}

.radio-input:checked ~ .radio-label .radio-custom {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 4px var(--background);
    background-color: var(--accent);
}

.checkbox-input:focus ~ .checkbox-label .checkbox-custom,
.radio-input:focus ~ .radio-label .radio-custom {
    box-shadow: 0 0 0 2px var(--accent-surface);
}

.checkbox-input:disabled ~ .checkbox-label,
.radio-input:disabled ~ .radio-label {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Select Input */
.select-container {
    position: relative;
}

.select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    padding-right: calc(var(--space-lg) + 16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--background);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    appearance: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-surface);
}

.select-container::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--space-md);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    color: var(--text-tertiary);
}

.select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Toggle Switch */
.toggle-container {
    display: inline-flex;
    align-items: center;
}

.toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border);
    transition: background-color var(--transition-fast);
    border-radius: 20px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: var(--background);
    transition: transform var(--transition-fast);
    border-radius: 50%;
}

.toggle input:checked + .toggle-slider {
    background-color: var(--accent);
}

.toggle input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px var(--accent-surface);
}

.toggle-label {
    margin-left: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* Cards */
.card {
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.card-interactive {
    cursor: pointer;
}

.card-interactive:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
}

.card-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.card-subtitle {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.card-body {
    padding: var(--space-lg);
}

.card-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.badge-primary {
    background-color: var(--accent-surface);
    color: var(--accent);
}

.badge-error {
    background-color: color-mix(in srgb, var(--error) 15%, transparent);
    color: var(--error);
}

.badge-success {
    background-color: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success);
}

.badge-warning {
    background-color: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--warning);
}

.badge-info {
    background-color: color-mix(in srgb, var(--info) 15%, transparent);
    color: var(--info);
}

/* Tooltips */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-content {
    visibility: hidden;
    position: absolute;
    z-index: var(--z-index-tooltip);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--text-primary);
    color: var(--background);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: var(--text-primary) transparent transparent transparent;
}

.tooltip:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* Progress Bars */
.progress {
    width: 100%;
    height: 8px;
    background-color: var(--background-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: var(--accent);
    transition: width var(--transition-normal);
}

.progress-indeterminate .progress-bar {
    width: 30%;
    background-color: var(--accent);
    animation: indeterminate 1.5s infinite ease-in-out;
}

@keyframes indeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

/* Alerts */
.alert {
    display: flex;
    align-items: flex-start;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.alert-icon {
    flex-shrink: 0;
    margin-right: var(--space-md);
    width: 20px;
    height: 20px;
}

.alert-content {
    flex-grow: 1;
}

.alert-title {
    margin: 0 0 var(--space-xs) 0;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.alert-message {
    margin: 0;
    font-size: var(--font-size-sm);
}

.alert-info {
    background-color: color-mix(in srgb, var(--info) 10%, transparent);
    border-left: 4px solid var(--info);
}

.alert-info .alert-title {
    color: var(--info);
}

.alert-success {
    background-color: color-mix(in srgb, var(--success) 10%, transparent);
    border-left: 4px solid var(--success);
}

.alert-success .alert-title {
    color: var(--success);
}

.alert-warning {
    background-color: color-mix(in srgb, var(--warning) 10%, transparent);
    border-left: 4px solid var(--warning);
}

.alert-warning .alert-title {
    color: var(--warning);
}

.alert-error {
    background-color: color-mix(in srgb, var(--error) 10%, transparent);
    border-left: 4px solid var(--error);
}

.alert-error .alert-title {
    color: var(--error);
}

/* Spinners */
.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--background-tertiary);
    border-radius: 50%;
    border-top-color: var(--accent);
    animation: spin 1s ease-in-out infinite;
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 4px;
}

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

/* Lists */
.list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border);
}

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

.list-item-interactive {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.list-item-interactive:hover {
    background-color: var(--surface-hover);
}

.theme-dark .icon {
    filter: invert();
}

/* Add these missing icon classes to your CSS files */

/* File type icons */
.icon-file {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3C/svg%3E");
}

.icon-folder {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-pdf {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.icon-document {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cline x1='10' y1='9' x2='8' y2='9'%3E%3C/line%3E%3C/svg%3E");
}

.icon-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E");
}

.icon-video {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'%3E%3C/polygon%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'%3E%3C/rect%3E%3C/svg%3E");
}

.icon-audio {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'%3E%3C/polygon%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'%3E%3C/path%3E%3C/svg%3E");
}

.icon-code {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'%3E%3C/polyline%3E%3Cpolyline points='8 6 2 12 8 18'%3E%3C/polyline%3E%3C/svg%3E");
}

.icon-archive {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'%3E%3C/polyline%3E%3Crect x='1' y='3' width='22' height='5'%3E%3C/rect%3E%3Cline x1='10' y1='12' x2='14' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

.icon-spreadsheet {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cpath d='M8 13h2'%3E%3C/path%3E%3Cpath d='M14 13h2'%3E%3C/path%3E%3Cpath d='M8 17h2'%3E%3C/path%3E%3Cpath d='M14 17h2'%3E%3C/path%3E%3C/svg%3E");
}

.icon-presentation {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E");
}

/* Trash icon (alternative to delete) */
.icon-trash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

/* All icons should have this base styling */
.icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}