/* ===== D&D Sanctum — Component Styles ===== */
/* Herbruikbare UI componenten */

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: var(--text-bright);
}

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

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

.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-ghost {
    color: var(--text-secondary);
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

/* --- Cards --- */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.card-elevated {
    background: var(--bg-elevated);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- Form Elements --- */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- Header --- */
.header-logo {
    font-family: var(--font-display), serif;
    font-size: var(--text-lg);
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.header-logo:hover {
    color: var(--accent-hover);
}

.header-spacer {
    flex: 1;
}

/* --- Navigation --- */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-xs) var(--space-sm);
    color: var(--text-dim);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
    text-decoration: none;
}

.nav-item:hover,
.nav-item.active {
    color: var(--accent);
}

/* --- Textarea --- */
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    resize: vertical;
    min-height: 60px;
}

textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* --- Command Palette --- */
.palette-overlay {
    position: fixed; inset: 0;
    background: var(--bg-overlay);
    z-index: var(--z-modal);
    display: flex; justify-content: center;
    padding-top: 15vh;
}

.palette {
    width: 100%; max-width: 560px; max-height: 60vh;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.palette-input {
    width: 100%; padding: var(--space-md) var(--space-lg);
    background: transparent; border: none; border-bottom: 1px solid var(--border);
    font-size: var(--text-lg); color: var(--text-primary);
}
.palette-input:focus { outline: none; box-shadow: none; }

.palette-results { overflow-y: auto; flex: 1; }

.palette-result {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg); cursor: pointer;
    transition: background var(--transition-fast);
}
.palette-result:hover, .palette-result.selected { background: var(--bg-elevated); }

.palette-icon { font-size: var(--text-lg); width: 24px; text-align: center; }
.palette-info { flex: 1; display: flex; flex-direction: column; }
.palette-name { font-weight: 600; font-size: var(--text-sm); }
.palette-detail { font-size: var(--text-xs); color: var(--text-dim); }
.palette-type { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; padding: 2px 6px; background: var(--bg-base); border-radius: var(--radius-sm); }

.palette-footer {
    display: flex; gap: var(--space-lg); padding: var(--space-sm) var(--space-lg);
    border-top: 1px solid var(--border); font-size: var(--text-xs);
}

.palette-toast {
    position: fixed; bottom: var(--space-lg); right: var(--space-lg);
    z-index: var(--z-toast); max-width: 400px;
    padding: var(--space-md); animation: flash 0.3s ease;
}
.palette-toast-header { display: flex; justify-content: space-between; margin-bottom: var(--space-sm); }
.palette-toast-close { position: absolute; top: var(--space-sm); right: var(--space-sm); }

/* --- Small Button Variant --- */
.btn-sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}