/* ========================================== Armature — Admin Surfaces ========================================== v0.25.0: Surface lifecycle management UI. ========================================== */ .admin-surface-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .admin-surface-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--bg-secondary); } .admin-surface-row:hover { background: var(--bg-hover); } .admin-surface-info { flex: 1; min-width: 0; } .admin-surface-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .admin-surface-name { font-size: 14px; font-weight: 600; color: var(--text); } .admin-surface-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.3px; } .admin-surface-badge--core { background: var(--accent-dim); color: var(--accent); } .admin-surface-badge--extension { background: var(--purple-dim); color: var(--purple); } .admin-surface-badge--required { background: var(--bg-raised); color: var(--text-3); } .admin-surface-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-3); } .admin-surface-id { font-family: var(--mono); font-size: 11px; } .admin-surface-route { font-family: var(--mono); font-size: 11px; color: var(--text-3); } .admin-surface-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Toggle switch */ .admin-surface-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .admin-surface-toggle--locked { opacity: 0.5; cursor: not-allowed; } .admin-surface-toggle input[type="checkbox"] { width: 36px; height: 20px; appearance: none; -webkit-appearance: none; background: var(--bg-raised); border-radius: var(--radius-lg); position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .admin-surface-toggle input[type="checkbox"]:checked { background: var(--accent); } .admin-surface-toggle input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.2s; } .admin-surface-toggle input[type="checkbox"]:checked::after { transform: translateX(16px); } .admin-surface-toggle input[type="checkbox"]:disabled { cursor: not-allowed; } .admin-surface-toggle-label { font-size: 12px; color: var(--text-2); min-width: 56px; } /* ── Admin Dashboard (v0.33.0) ───────────── */ .dashboard-provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .dashboard-provider-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .dashboard-db-pool { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .dashboard-pool-bar { height: 8px; background: var(--bg-raised); border-radius: var(--radius-sm); overflow: hidden; } .dashboard-pool-fill { height: 100%; background: var(--accent); border-radius: var(--radius-sm); transition: width 0.3s ease; } .dashboard-errors { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .dashboard-error-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--bg-secondary); font-size: 12px; }