/*
 * Styles shared by every theme. Built only on the --app-* tokens each theme
 * defines in its :root, pointing at its own palette -- the theme's dark-mode
 * block redefines those, so these follow it. Loaded after the theme.
 */

.text-muted { color: var(--app-muted); }
.text-secondary { color: var(--app-text-secondary); }
.surface-muted { background-color: var(--app-surface-muted); }
.button-danger { color: var(--app-danger); border: 1px solid var(--app-danger); background: transparent; }
.button-danger:hover { background: color-mix(in srgb, var(--app-danger) 10%, transparent); }
/* Beats Pico's input background, which a plain class can't. */
input.input-locked[readonly] { background-color: var(--app-surface-muted); color: var(--app-muted); }

.progress-ring-track { stroke: var(--app-border); }
.progress-ring-fill { stroke: var(--app-primary); }

/* Collection editor (Collections/form.php) */
.collection-passage-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.collection-passage-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: 4px;
    position: relative;
}

.collection-passage-item.invalid {
    border-color: var(--app-danger);
    background: color-mix(in srgb, var(--app-danger) 10%, transparent);
}

.collection-passage-item.invalid .passage-input {
    color: var(--app-danger);
    border-color: var(--app-danger);
}

.collection-passage-item.valid {
    border-color: var(--app-success);
}

.collection-passage-item.validating {
    border-color: var(--app-info);
    background: color-mix(in srgb, var(--app-info) 10%, transparent);
}

.drag-handle {
    cursor: move;
    font-weight: bold;
    color: var(--app-muted);
    user-select: none;
    padding: 0.25rem 0.5rem;
}

.drag-handle:hover {
    color: var(--app-text-secondary);
}

.passage-input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--app-border);
    border-radius: 4px;
    font-size: 1rem;
}

.passage-input:focus {
    outline: none;
    border-color: var(--app-info);
    box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--app-info) 25%, transparent);
}

.validation-icon {
    min-width: 1.5rem;
    text-align: center;
    font-size: 1.2rem;
}

.validation-icon[title*="Valid"] {
    color: var(--app-success);
}

.validation-icon[title*="Invalid"] {
    color: var(--app-danger);
}

.validation-icon[title*="Validating"] {
    color: var(--app-info);
    animation: spin 1s linear infinite;
}

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

.passage-delete {
    border: none;
    background: var(--app-danger);
    color: white;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    min-width: 2rem;
}

.passage-delete:hover {
    background: color-mix(in srgb, var(--app-danger) 85%, black);
}

.validation-message {
    position: absolute;
    left: 3rem;
    right: 3rem;
    bottom: -1.5rem;
    background: var(--app-danger);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    z-index: 10;
}

.collection-add-section {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.collection-add-section .input {
    flex: 1;
}

#collection-editor-error {
    margin-bottom: 1rem;
}

.sortable-ghost {
    opacity: 0.4;
}

.sortable-drag {
    opacity: 0.8;
}