/* ============================================================
   ui-theme.css — Reusable themed CSS classes for UI elements
   All colors reference CSS custom properties set by Themes.js
   
   Usage: Replace inline styles with these classes, e.g.
   Before: style="background: #1a2a2e; border: 1px solid #18484a; ..."
   After:  class="ui-panel"
   ============================================================ */

/* --- Surfaces / Containers --- */

.ui-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    color: var(--ui-text);
}

.ui-card {
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-border-faint);
    border-radius: 6px;
    color: var(--ui-text);
}

.ui-overlay {
    background: var(--ui-overlay);
}

/* --- Inputs --- */

.ui-input {
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    width: 100%;
}

.ui-input:focus {
    border-color: var(--ui-border-accent);
}

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

.ui-textarea {
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    width: 100%;
    resize: vertical;
    font-family: inherit;
}

.ui-textarea:focus {
    border-color: var(--ui-border-accent);
}

.ui-textarea::placeholder {
    color: var(--ui-text-dim);
}

/* --- Buttons --- */

.ui-btn {
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: opacity 0.15s;
}

.ui-btn:hover {
    opacity: 0.85;
}

.ui-btn-primary {
    background: var(--ui-primary);
    color: var(--ui-text-bright);
    border: 1px solid var(--ui-border-accent);
}

.ui-btn-primary-strong {
    background: var(--ui-primary-strong);
    color: var(--ui-text-bright);
    border: 1px solid var(--ui-border-accent);
}

.ui-btn-danger {
    background: rgba(255, 80, 80, 0.3);
    color: var(--ui-danger);
    border: 1px solid rgba(255, 80, 80, 0.3);
}

.ui-btn-danger:hover {
    background: rgba(255, 80, 80, 0.45);
}

.ui-btn-success {
    background: var(--ui-success);
    color: var(--ui-accent-teal);
    border: 1px solid var(--ui-border-accent);
}

.ui-btn-neutral {
    background: var(--ui-neutral);
    color: var(--ui-text-muted);
    border: 1px solid var(--ui-neutral);
}

/* --- Tabs --- */

.ui-tab {
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s;
}

.ui-tab-active {
    background: var(--ui-tab-active);
    color: var(--ui-text-bright);
    border-color: var(--ui-border-accent);
}

.ui-tab-inactive {
    background: var(--ui-tab-inactive);
    color: var(--ui-text-muted);
}

.ui-tab-inactive:hover {
    background: var(--ui-surface-hover);
    color: var(--ui-text);
}

/* --- Text --- */

.ui-text {
    color: var(--ui-text);
}

.ui-text-bright {
    color: var(--ui-text-bright);
}

.ui-text-muted {
    color: var(--ui-text-muted);
}

.ui-text-dim {
    color: var(--ui-text-dim);
}

.ui-text-accent {
    color: var(--ui-accent);
}

.ui-text-teal {
    color: var(--ui-accent-teal);
}

.ui-text-danger {
    color: var(--ui-danger);
}

/* --- Chat-specific --- */

.ui-msg-own {
    background: var(--ui-primary);
    border-radius: 12px 12px 4px 12px;
}

.ui-msg-other {
    background: var(--ui-card-bg);
    border-radius: 12px 12px 12px 4px;
}

/* --- Dialogs / Modals --- */

.ui-dialog {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    color: var(--ui-text);
    box-shadow: 0 8px 32px var(--ui-shadow);
    padding: 20px;
}

.ui-dialog-header {
    color: var(--ui-text-bright);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}

/* --- Context menus --- */

.ui-menu {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--ui-shadow);
    color: var(--ui-text);
    overflow: hidden;
}

.ui-menu-item {
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.12s;
    color: var(--ui-text);
}

.ui-menu-item:hover {
    background: var(--ui-surface-hover);
}

.ui-menu-item-danger {
    color: var(--ui-danger);
}

.ui-menu-item-danger:hover {
    background: rgba(255, 80, 80, 0.15);
}

.ui-menu-divider {
    border-top: 1px solid var(--ui-border-faint);
    margin: 4px 0;
}

/* --- Badges / Tags --- */

.ui-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: var(--ui-primary-light);
    color: var(--ui-text-muted);
    border: 1px solid var(--ui-border-faint);
}

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

/* --- Indicators --- */

.ui-indicator {
    background: var(--ui-primary-light);
    border-left: 3px solid var(--ui-accent-teal);
    border-radius: 4px;
    padding: 6px 10px;
    color: var(--ui-text-muted);
    font-size: 12px;
}

/* --- Scrollbar theming --- */

.ui-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.ui-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.ui-scrollbar::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 3px;
}

.ui-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--ui-border-accent);
}

/* --- Highlight (search) --- */

.ui-highlight {
    background: var(--ui-highlight);
    border-radius: 2px;
    padding: 0 2px;
}

/* --- Tooltip --- */

.ui-tooltip {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    box-shadow: 0 4px 12px var(--ui-shadow);
    padding: 6px 10px;
    font-size: 12px;
}