/* ============================================
   Operra Design Components V2
   ============================================
   Component library built on design-system.css tokens.
   Cards, badges, buttons, stats, inputs, utilities.
   ============================================ */

/* ============================================
   Card Component — Unified
   ============================================ */
.op-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.op-card:hover {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-sm);
}
.op-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.op-card-title {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.op-card-subtitle {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ============================================
   Badge Component — Unified
   ============================================ */
.op-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1.4;
}
.op-badge-primary { background: var(--accent-primary-subtle); color: var(--accent-primary-hover); }
.op-badge-success { background: var(--accent-success-subtle); color: var(--accent-success); }
.op-badge-warning { background: var(--accent-warning-subtle); color: var(--accent-warning); }
.op-badge-danger { background: var(--accent-danger-subtle); color: var(--accent-danger); }
.op-badge-info { background: var(--accent-info-subtle); color: var(--accent-info); }
.op-badge-neutral { background: var(--bg-hover); color: var(--text-secondary); }

/* ============================================
   Button Component — Refined
   ============================================ */
.op-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1.4;
}
.op-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.op-btn-primary {
    background: var(--accent-primary);
    color: #fff;
}
.op-btn-primary:hover:not(:disabled) {
    background: var(--accent-primary-hover);
}
.op-btn-secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.op-btn-secondary:hover:not(:disabled) {
    background: var(--bg-active);
    border-color: var(--text-muted);
}
.op-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}
.op-btn-ghost:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.op-btn-danger {
    background: var(--accent-danger-subtle);
    color: var(--accent-danger);
    border-color: transparent;
}
.op-btn-danger:hover:not(:disabled) {
    background: var(--accent-danger);
    color: #fff;
}
.op-btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}
.op-btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
}
.op-btn-icon {
    padding: var(--space-2);
    width: 32px;
    height: 32px;
}

/* ============================================
   KPI Stat Card
   ============================================ */
.op-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-width: 140px;
}
.op-stat-value {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
}
.op-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--font-medium);
}
.op-stat-trend {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}
.op-stat-trend.up { color: var(--accent-success); }
.op-stat-trend.down { color: var(--accent-danger); }

/* ============================================
   Empty State
   ============================================ */
.op-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-8);
    text-align: center;
}
.op-empty-icon {
    font-size: var(--text-4xl);
    color: var(--text-muted);
    opacity: 0.5;
}
.op-empty-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.op-empty-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    max-width: 360px;
    line-height: var(--leading-relaxed);
}

/* ============================================
   Input Component — Refined
   ============================================ */
.op-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.op-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-subtle);
}
.op-input::placeholder {
    color: var(--text-muted);
}

/* ============================================
   Utility Classes
   ============================================ */
.op-flex { display: flex; }
.op-flex-col { display: flex; flex-direction: column; }
.op-items-center { align-items: center; }
.op-justify-between { justify-content: space-between; }
.op-gap-1 { gap: var(--space-1); }
.op-gap-2 { gap: var(--space-2); }
.op-gap-3 { gap: var(--space-3); }
.op-gap-4 { gap: var(--space-4); }
.op-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================
   V2 Component Overrides — Structural changes
   ============================================
   These use !important to override style.css
   declarations for the same selectors.
   ============================================ */

/* ---- Sidebar: same bg as main content, seamless ---- */
.sidebar {
    background: var(--bg-primary) !important;
    border-right: 1px solid var(--border-light) !important;
    width: 240px !important;
}

.sidebar-header {
    padding: var(--space-4) var(--space-4) var(--space-3) !important;
    border-bottom: none !important;
}

.logo-icon {
    width: 32px !important;
    height: 32px !important;
    background: var(--accent-primary) !important;
    border-radius: var(--radius-md) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.logo-text {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* ---- Session info: compact card ---- */
.sidebar-session {
    padding: var(--space-2) var(--space-4) !important;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin: 0 var(--space-3) var(--space-2);
}

.session-info {
    padding: 2px 0 !important;
    font-size: 0.7rem !important;
    opacity: 0.7;
}

.session-info label {
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.session-info span {
    font-size: 0.7rem !important;
    font-family: var(--font-mono) !important;
}

/* ---- Sidebar divider ---- */
.sidebar-divider {
    background: var(--border-light) !important;
    margin: var(--space-2) var(--space-4) !important;
    opacity: 0.5;
}

/* ---- Nav section titles ---- */
.sidebar-nav .nav-section-title {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    padding: var(--space-3) var(--space-3) var(--space-1) !important;
}

/* ---- Sidebar nav ---- */
.sidebar-nav {
    padding: 0 var(--space-2) !important;
}

/* ---- Nav buttons V2 — left accent bar ---- */
.nav-btn {
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-sm) !important;
    font-weight: 400 !important;
    padding: 6px var(--space-3) !important;
    color: var(--text-secondary) !important;
    border-left: 2px solid transparent !important;
    margin-bottom: 1px !important;
}

.nav-btn svg {
    opacity: 0.5;
    width: 16px !important;
    height: 16px !important;
}

.nav-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.nav-btn:hover svg {
    opacity: 0.9;
}

.nav-btn.active {
    background: var(--accent-primary-subtle) !important;
    color: var(--accent-primary-hover) !important;
    border-left-color: var(--accent-primary) !important;
    font-weight: 500 !important;
}

.nav-btn.active svg {
    opacity: 1;
    color: var(--accent-primary) !important;
    stroke: var(--accent-primary) !important;
}

/* ---- Settings ---- */
.sidebar-settings {
    padding: var(--space-2) var(--space-4) !important;
    border-bottom: 1px solid var(--border-light) !important;
    background: transparent !important;
}

.setting-item label {
    font-size: 0.65rem !important;
}

.sidebar-footer {
    padding: var(--space-2) var(--space-3) !important;
    border-top: 1px solid var(--border-light) !important;
}

/* ---- Theme toggle: pill ---- */
.theme-buttons {
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-full) !important;
    padding: 2px !important;
    display: inline-flex !important;
    gap: 0 !important;
}

.theme-btn {
    border-radius: var(--radius-full) !important;
    padding: 4px 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
}

.theme-btn.active,
.theme-btn[data-active="true"] {
    background: var(--accent-primary) !important;
    color: white !important;
}

/* ---- Shell header: frosted glass ---- */
.shell-header {
    background: rgba(9, 9, 11, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border-light) !important;
    height: 44px !important;
}

/* ---- Main content ---- */
.main-content {
    background: var(--bg-primary) !important;
}

/* ---- Badges ---- */
.badge {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-full) !important;
    font-weight: 500 !important;
}

/* ---- Inputs ---- */
input, select, textarea {
    font-family: var(--font-sans) !important;
}

.sidebar-search input {
    background: var(--bg-secondary) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-md) !important;
}

.sidebar-search input:focus {
    border-color: var(--accent-primary) !important;
    background: var(--bg-tertiary) !important;
}

/* ---- Modals: frosted glass ---- */
.modal {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.modal-content {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-xl) !important;
}

/* ---- Chat messages ---- */
.message {
    border-radius: var(--radius-lg) !important;
}