/* ═══════════════════════════════════════════
   Converge Components CSS — extracted from _layout.latte (Phase G)
   令牌驱动 · 组件级隔离 · 零硬编码
   ═══════════════════════════════════════════ */

/* ── Dev Mode Banner ── */
.devmode-banner{background:var(--warning);color:var(--content-primary);text-align:center;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.02em}
.devmode-banner span{opacity:.7}

/* ── Unified Toolbar ── */
.unified-toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px var(--space-4);background:var(--bg-card);border-bottom:1px solid var(--border-default);gap:var(--space-3);flex-wrap:wrap}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:6px}
.toolbar-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .12s;border:1px solid var(--border-default)}
.toolbar-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.toolbar-btn-primary:hover{background:var(--accent-hover)}
.toolbar-btn-secondary{background:var(--bg-base);color:var(--text-secondary)}
.toolbar-btn-secondary:hover{background:var(--bg-overlay);color:var(--text-primary)}
.toolbar-btn-icon{padding:5px 8px}
.toolbar-filter-tabs{display:flex;gap:2px;background:var(--bg-overlay);border-radius:6px;padding:2px}
.toolbar-filter-tab{padding:4px 12px;border:none;background:transparent;color:var(--text-secondary);font-size:11px;font-weight:500;cursor:pointer;border-radius:4px;transition:all .12s}
.toolbar-filter-tab:hover{color:var(--text-primary)}
.toolbar-filter-tab.active{background:var(--bg-card);color:var(--text-primary);font-weight:600}
.toolbar-search-wrap{position:relative;display:flex;align-items:center}
.toolbar-search-icon{position:absolute;left:8px;font-size:12px;pointer-events:none}
.toolbar-search-input{width:200px;padding:5px 10px 5px 28px;border:1px solid var(--border-default);border-radius:6px;font-size:12px;background:var(--bg-base);color:var(--text-primary)}
.toolbar-search-input:focus{outline:none;border-color:var(--accent)}
.toolbar-info{font-size:11px;color:var(--text-tertiary);white-space:nowrap}
.toolbar-actions{display:flex;align-items:center;gap:8px;padding:4px 12px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px}
.toolbar-batch-count{font-size:11px;font-weight:600;color:var(--accent)}
@media(max-width:640px){.toolbar-search-input{width:140px}}

/* ── Dashboard Cards ── */
.db-card{padding:var(--space-5);background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-lg)}

/* ── Skeleton Loading (R27) ── */
@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.skeleton{background:var(--bg-overlay);border-radius:var(--radius-sm);animation:skeleton-pulse 1.5s ease-in-out infinite}
.skeleton-row{display:flex;gap:8px;padding:8px}
.skeleton-row .sk{height:14px;border-radius:3px;background:var(--bg-overlay);animation:skeleton-pulse 1.5s ease-in-out infinite}
@media (prefers-reduced-motion: reduce) {
  .skeleton,.skeleton-row .sk,.table-skeleton,.table-skeleton-cell{animation:none}
}

/* ── Button Micro-Interactions (R28) ── */
.toolbar-btn:active, .row-action:active{transform:scale(.97);transition:transform .1s}
.status-pill{cursor:pointer;transition:all .12s}
.status-pill:active{transform:scale(.95)}

/* ── Undo Toast (R30) ── */
.undo-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 20px;background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:0 4px 24px rgba(0,0,0,.2);z-index:9999;font-size:13px;animation:toast-in .2s ease}
.undo-toast .undo-btn{color:var(--accent);font-weight:600;cursor:pointer;border:none;background:none;font-size:13px;text-decoration:underline}

/* ── Offline Banner (R33) ── */
.offline-banner{display:none;padding:6px 12px;background:var(--warning);color:#000;text-align:center;font-size:12px;font-weight:600}
.offline-banner.show{display:block}