/* _content/Ayva.Dashboard/Components/DashboardSurface.razor.rz.scp.css */
/* ============================================================
   DashboardSurface component styles
   ALL values must use CSS variables from ayva-theme.css.
   NO hardcoded colors, fonts, sizes, radii, or transitions.
   ============================================================ */

/* ── Surface wrapper ─────────────────────────────────────── */

.dashboard-surface[b-kpql4mxnnv] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    min-height: 100%;
    position: relative;
    transition: var(--transition-smooth);
}

.dashboard-surface.edit-mode[b-kpql4mxnnv] {
    outline: 2px dashed var(--accent-color);
    outline-offset: -2px;
    border-radius: var(--radius-md);
    background: var(--dashboard-edit-overlay, rgba(var(--accent-color-rgb), 0.03));
}

/* ── Passive toolbar (non-edit-mode) ─────────────────────── */

.dashboard-toolbar[b-kpql4mxnnv] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

.toolbar-spacer[b-kpql4mxnnv] {
    flex: 1;
}

.btn-edit-mode[b-kpql4mxnnv] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-edit-mode:hover[b-kpql4mxnnv] {
    background: var(--surface-hover);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-edit-mode .material-icons[b-kpql4mxnnv] {
    font-size: 1rem;
}

/* ── 12-column CSS Grid ──────────────────────────────────── */

.dashboard-grid[b-kpql4mxnnv] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--dashboard-grid-gap, var(--spacing-md));
    align-items: start;
}

/* ── Widget grid cells ───────────────────────────────────── */

.widget-grid-cell[b-kpql4mxnnv] {
    min-width: 0; /* prevent overflow in narrow columns */
    transition: var(--transition-smooth);
}

.widget-grid-cell.drop-target[b-kpql4mxnnv] {
    outline: 2px dashed var(--accent-color);
    border-radius: var(--dashboard-widget-radius, var(--radius-md));
    background: rgba(var(--accent-color-rgb), 0.05);
}

/* ── Hidden widget badge (edit mode) ─────────────────────── */

.widget-hidden-hint[b-kpql4mxnnv] {
    opacity: 0.6;
}

.hidden-widget-badge[b-kpql4mxnnv] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px dashed var(--border-color);
    border-radius: var(--dashboard-widget-radius, var(--radius-md));
    background: var(--surface-glass);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.hidden-widget-badge .material-icons[b-kpql4mxnnv] {
    font-size: 1rem;
    color: var(--text-muted);
}

.btn-add-hidden[b-kpql4mxnnv] {
    margin-left: auto;
    background: none;
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-sm);
    color: var(--accent-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 2px;
    transition: var(--transition-fast);
}

.btn-add-hidden:hover[b-kpql4mxnnv] {
    background: var(--accent-color);
    color: var(--text-on-accent, #fff);
}

/* ── Empty state ─────────────────────────────────────────── */

.dashboard-empty[b-kpql4mxnnv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 200px;
    color: var(--text-muted);
    font-family: var(--font-primary);
    font-size: var(--text-md);
}

.dashboard-empty .material-icons[b-kpql4mxnnv] {
    font-size: 3rem;
    opacity: 0.4;
}

/* ── Loading state ───────────────────────────────────────── */

.dashboard-loading[b-kpql4mxnnv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 200px;
    color: var(--text-secondary);
    font-family: var(--font-primary);
}

.loading-spinner[b-kpql4mxnnv] {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin-b-kpql4mxnnv 0.8s linear infinite;
}

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

/* ── Error banner ────────────────────────────────────────── */

.dashboard-error-banner[b-kpql4mxnnv] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-error-surface, rgba(var(--color-error-rgb), 0.12));
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}

.dashboard-error-banner button[b-kpql4mxnnv] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

/* ── Responsive breakpoints ──────────────────────────────── */

@media (max-width: 768px) {
    .dashboard-grid[b-kpql4mxnnv] {
        grid-template-columns: repeat(6, 1fr);
    }

    /* On 6-column grid, clamp wide / hero / full spans */
    .widget-grid-cell[style*="span 8"][b-kpql4mxnnv],
    .widget-grid-cell[style*="span 9"][b-kpql4mxnnv],
    .widget-grid-cell[style*="span 10"][b-kpql4mxnnv],
    .widget-grid-cell[style*="span 11"][b-kpql4mxnnv],
    .widget-grid-cell[style*="span 12"][b-kpql4mxnnv] {
        grid-column: span 6 !important;
    }

    /* Medium and large also clamp */
    .widget-grid-cell[style*="span 4"][b-kpql4mxnnv],
    .widget-grid-cell[style*="span 6"][b-kpql4mxnnv] {
        grid-column: span 6 !important;
    }
}

@media (max-width: 640px) {
    .dashboard-grid[b-kpql4mxnnv] {
        grid-template-columns: 1fr;
    }

    .widget-grid-cell[b-kpql4mxnnv] {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}
/* _content/Ayva.Dashboard/Components/EditModeToolbar.razor.rz.scp.css */
/* ============================================================
   EditModeToolbar styles — all CSS variables, no hardcoded values.
   ============================================================ */

/* ── Toolbar wrapper ─────────────────────────────────────── */

.edit-toolbar[b-jzqls2u4jg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-elevated, var(--bg-secondary));
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 1px rgba(var(--accent-color-rgb), 0.2),
                var(--shadow-sm);
    flex-wrap: wrap;
    position: sticky;
    top: var(--spacing-sm);
    z-index: 50;
}

/* ── Sections ────────────────────────────────────────────── */

.toolbar-section[b-jzqls2u4jg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.toolbar-left[b-jzqls2u4jg] {
    flex: 1;
    min-width: 0;
}

.toolbar-right[b-jzqls2u4jg] {
    flex-shrink: 0;
}

.toolbar-divider[b-jzqls2u4jg] {
    width: 1px;
    height: 1.5rem;
    background: var(--border-color);
}

.toolbar-label[b-jzqls2u4jg] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.toolbar-icon[b-jzqls2u4jg] {
    font-size: 1.1rem;
}

/* ── Layout select ───────────────────────────────────────── */

.layout-select[b-jzqls2u4jg] {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-glass);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    max-width: 180px;
}

.layout-select:hover[b-jzqls2u4jg],
.layout-select:focus[b-jzqls2u4jg] {
    border-color: var(--accent-color);
    outline: none;
}

/* ── Save-As row ─────────────────────────────────────────── */

.save-as-row[b-jzqls2u4jg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.save-as-input[b-jzqls2u4jg] {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-sm);
    background: var(--surface-glass);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    width: 160px;
    transition: var(--transition-fast);
}

.save-as-input:focus[b-jzqls2u4jg] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.3);
}

/* ── Toolbar buttons ─────────────────────────────────────── */

.btn-toolbar[b-jzqls2u4jg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.btn-toolbar:disabled[b-jzqls2u4jg] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-toolbar .material-icons[b-jzqls2u4jg] {
    font-size: 1rem;
}

.btn-primary[b-jzqls2u4jg] {
    background: var(--accent-color);
    color: var(--text-on-accent, #fff);
    border-color: var(--accent-color);
}

.btn-primary:hover:not(:disabled)[b-jzqls2u4jg] {
    filter: brightness(1.1);
}

.btn-secondary[b-jzqls2u4jg] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-jzqls2u4jg] {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--border-color-hover, var(--accent-color));
}

.btn-warning[b-jzqls2u4jg] {
    background: transparent;
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.btn-warning:hover:not(:disabled)[b-jzqls2u4jg] {
    background: var(--color-warning-surface, rgba(var(--color-warning-rgb), 0.12));
}

.btn-danger[b-jzqls2u4jg] {
    background: transparent;
    color: var(--color-error);
    border-color: var(--color-error);
}

.btn-danger:hover:not(:disabled)[b-jzqls2u4jg] {
    background: var(--color-error-surface, rgba(var(--color-error-rgb), 0.1));
}

/* ── Saving spinner ──────────────────────────────────────── */

.btn-spinner[b-jzqls2u4jg] {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-overlay-dark);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-jzqls2u4jg 0.8s linear infinite;
}

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

/* ── Delete confirmation banner ──────────────────────────── */

.delete-confirm-banner[b-jzqls2u4jg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-error-surface, rgba(var(--color-error-rgb), 0.1));
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--color-error);
    flex-wrap: wrap;
    animation: slideDown-b-jzqls2u4jg var(--transition-fast) ease;
}

@keyframes slideDown-b-jzqls2u4jg {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.delete-confirm-banner .material-icons[b-jzqls2u4jg] {
    flex-shrink: 0;
}

.delete-confirm-banner span:nth-child(2)[b-jzqls2u4jg] {
    flex: 1;
    color: var(--text-primary);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 640px) {
    .edit-toolbar[b-jzqls2u4jg] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-right[b-jzqls2u4jg] {
        justify-content: flex-end;
    }
}
/* _content/Ayva.Dashboard/Components/WidgetHost.razor.rz.scp.css */
/* ============================================================
   WidgetHost component styles — glassmorphism card chrome.
   All values use CSS variables. No hardcoded colors/sizes.
   ============================================================ */

/* ── Card wrapper ─────────────────────────────────────────── */

.widget-card[b-s8tpuocjuj] {
    display: flex;
    flex-direction: column;
    border-radius: var(--dashboard-widget-radius, var(--radius-md));
    border: 1px solid var(--border-color);
    background: var(--surface-glass);
    backdrop-filter: blur(var(--glass-blur, 12px));
    overflow: hidden;
    height: 100%;
    transition: var(--transition-smooth);
    position: relative;
}

.widget-card.editable[b-s8tpuocjuj] {
    border-color: var(--border-color-subtle, var(--border-color));
    cursor: default;
}

.widget-card.editable:hover[b-s8tpuocjuj] {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-sm);
}

.widget-card.dragging[b-s8tpuocjuj] {
    opacity: 0.55;
    box-shadow: var(--shadow-lg);
    transform: scale(0.98);
}

/* ── Header ──────────────────────────────────────────────── */

.widget-header[b-s8tpuocjuj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    min-height: 2.5rem;
    background: var(--surface-overlay, var(--color-overlay-light));
    flex-shrink: 0;
}

.drag-handle[b-s8tpuocjuj] {
    cursor: grab;
    color: var(--text-muted);
    font-size: 1.1rem;
    user-select: none;
    transition: var(--transition-fast);
}

.drag-handle:hover[b-s8tpuocjuj] {
    color: var(--accent-color);
}

.drag-handle:active[b-s8tpuocjuj] {
    cursor: grabbing;
}

.widget-icon[b-s8tpuocjuj] {
    font-size: 1rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.widget-title[b-s8tpuocjuj] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* ── Header action area ──────────────────────────────────── */

.widget-actions[b-s8tpuocjuj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: auto;
    flex-shrink: 0;
}

.btn-icon[b-s8tpuocjuj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.btn-icon:hover[b-s8tpuocjuj] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.btn-icon .material-icons[b-s8tpuocjuj] {
    font-size: 1rem;
}

.btn-icon .material-icons.active-icon[b-s8tpuocjuj] {
    color: var(--accent-color);
}

.btn-remove:hover[b-s8tpuocjuj] {
    color: var(--color-error);
    background: var(--color-error-surface, rgba(var(--color-error-rgb), 0.1));
}

/* ── Size picker ─────────────────────────────────────────── */

.size-picker[b-s8tpuocjuj] {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.size-btn[b-s8tpuocjuj] {
    padding: 2px 5px;
    background: none;
    border: none;
    border-right: 1px solid var(--border-color);
    cursor: pointer;
    font-size: var(--text-xs, 0.7rem);
    font-family: var(--font-primary);
    color: var(--text-muted);
    transition: var(--transition-fast);
    line-height: 1.4;
}

.size-btn:last-child[b-s8tpuocjuj] {
    border-right: none;
}

.size-btn:hover[b-s8tpuocjuj] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.size-btn.active[b-s8tpuocjuj] {
    background: var(--accent-color);
    color: var(--text-on-accent, #fff);
}

/* ── Widget body ─────────────────────────────────────────── */

.widget-body[b-s8tpuocjuj] {
    flex: 1;
    overflow: auto;
    position: relative;
}

/* ── Error state ─────────────────────────────────────────── */

.widget-error[b-s8tpuocjuj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    color: var(--color-warning);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}

.widget-error .material-icons[b-s8tpuocjuj] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.widget-error strong[b-s8tpuocjuj] {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.widget-error p[b-s8tpuocjuj] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-xs, 0.75rem);
}

/* ── Settings flyout ─────────────────────────────────────── */

.widget-settings-flyout[b-s8tpuocjuj] {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(200px, 70%, 320px);
    height: 100%;
    background: var(--surface-elevated, var(--bg-secondary));
    border-left: 1px solid var(--border-color);
    z-index: 10;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    animation: slideInRight-b-s8tpuocjuj var(--transition-fast) ease;
}

@keyframes slideInRight-b-s8tpuocjuj {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.settings-header[b-s8tpuocjuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.settings-body[b-s8tpuocjuj] {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
}

.settings-error[b-s8tpuocjuj] {
    color: var(--color-error);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}
/* _content/Ayva.Dashboard/Components/WidgetPicker.razor.rz.scp.css */
/* ============================================================
   WidgetPicker modal styles — all CSS variables, no hardcoded values.
   ============================================================ */

/* ── Modal overlay ───────────────────────────────────────── */

.picker-overlay[b-ohhal28uwi] {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg, rgba(0,0,0,0.6));
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-ohhal28uwi var(--transition-fast) ease;
}

@keyframes fadeIn-b-ohhal28uwi {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal dialog ────────────────────────────────────────── */

.picker-modal[b-ohhal28uwi] {
    width: min(640px, 90vw);
    max-height: 80vh;
    background: var(--surface-elevated, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-b-ohhal28uwi var(--transition-smooth) ease;
}

@keyframes slideUp-b-ohhal28uwi {
    from { transform: translateY(1rem); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Header ──────────────────────────────────────────────── */

.picker-header[b-ohhal28uwi] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.picker-header .material-icons[b-ohhal28uwi] {
    color: var(--accent-color);
    font-size: 1.3rem;
}

.picker-title[b-ohhal28uwi] {
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.btn-close[b-ohhal28uwi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.btn-close:hover[b-ohhal28uwi] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.btn-close .material-icons[b-ohhal28uwi] {
    font-size: 1rem;
    color: inherit;
}

/* ── Category tabs ───────────────────────────────────────── */

.picker-tabs[b-ohhal28uwi] {
    display: flex;
    gap: 2px;
    padding: var(--spacing-xs) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    flex-shrink: 0;
}

.picker-tab[b-ohhal28uwi] {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    transition: var(--transition-fast);
}

.picker-tab:hover[b-ohhal28uwi] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.picker-tab.active[b-ohhal28uwi] {
    background: var(--accent-color);
    color: var(--text-on-accent, #fff);
    border-color: var(--accent-color);
}

/* ── Widget grid ─────────────────────────────────────────── */

.picker-grid[b-ohhal28uwi] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    overflow-y: auto;
    flex: 1;
}

/* ── Widget card row ─────────────────────────────────────── */

.picker-widget-card[b-ohhal28uwi] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-glass);
    transition: var(--transition-fast);
}

.picker-widget-card:hover[b-ohhal28uwi] {
    border-color: var(--accent-color);
    background: var(--surface-hover);
}

.picker-widget-icon[b-ohhal28uwi] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--surface-overlay, rgba(var(--accent-color-rgb), 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.picker-widget-icon .material-icons[b-ohhal28uwi] {
    color: var(--accent-color);
    font-size: 1.25rem;
}

.picker-widget-info[b-ohhal28uwi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.picker-widget-title[b-ohhal28uwi] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.picker-widget-desc[b-ohhal28uwi] {
    font-family: var(--font-primary);
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-widget-meta[b-ohhal28uwi] {
    font-family: var(--font-primary);
    font-size: var(--text-xs, 0.75rem);
    color: var(--accent-color);
    opacity: 0.8;
}

.btn-add-widget[b-ohhal28uwi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent-color);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.btn-add-widget:hover[b-ohhal28uwi] {
    background: var(--accent-color);
    color: var(--text-on-accent, #fff);
}

.btn-add-widget .material-icons[b-ohhal28uwi] {
    font-size: 1rem;
}

/* ── Empty state ─────────────────────────────────────────── */

.picker-empty[b-ohhal28uwi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl, 2rem);
    color: var(--text-muted);
    font-family: var(--font-primary);
    font-size: var(--text-md);
    text-align: center;
}

.picker-empty .material-icons[b-ohhal28uwi] {
    font-size: 2.5rem;
    color: var(--color-success);
}