/* ============================================================
   NGT APIs DB Control — assets/app-panels.css
   Load order: 3 of 3 (see index.php <link> tags)
   Control Panel: sub-tab nav, inline edit, bulk select, column toggle panel, audit trail, DB permissions matrix, sparklines, uptime bar, session cards, DB Health tab.
   ============================================================ */

/* ── CONTROL PANEL SUB-TABS — PILL NAV STYLE ── */
.ctrl-tabs{display:flex;gap:3px;padding:0 0 20px;border-bottom:none;margin-bottom:18px;flex-wrap:wrap;position:relative}
.ctrl-tabs::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(99,102,241,.2),rgba(139,92,246,.15),transparent)}
.ctrl-tab{padding:0 16px;height:34px;border-radius:9999px;font-size:.8rem;font-weight:700;color:rgba(var(--t3-rgb,100,116,139),.8);cursor:pointer;border:1px solid transparent;background:transparent;font-family:var(--font);transition:all .18s;display:inline-flex;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden;white-space:nowrap}
.ctrl-tab .pill-circle{position:absolute;left:50%;border-radius:50%;background:rgba(99,102,241,.85);z-index:1;pointer-events:none;transform:translateX(-50%) scale(0);transition:transform .32s cubic-bezier(.22,1,.36,1)}
.ctrl-tab .tab-label{position:relative;z-index:2;transition:color .18s}
.ctrl-tab:hover:not(.active){color:var(--t1);background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.15)}
.ctrl-tab:hover:not(.active) .pill-circle{transform:translateX(-50%) scale(1.5)}
.ctrl-tab.active{background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.1));color:var(--a1);border-color:rgba(99,102,241,.3);box-shadow:0 2px 10px rgba(99,102,241,.15),inset 0 1px 0 rgba(255,255,255,.08)}
.ctrl-tab.active .tab-label{color:var(--a1)}
[data-theme="dark"] .ctrl-tab.active{background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.15));border-color:rgba(99,102,241,.4);box-shadow:0 2px 14px rgba(99,102,241,.2),inset 0 1px 0 rgba(255,255,255,.1)}

/* ── INLINE EDIT ── */
.editable-cell{cursor:pointer}
.editable-cell:hover{background:rgba(37,99,235,.05) !important;outline:1px dashed rgba(37,99,235,.3)}
[data-theme="dark"] .editable-cell:hover{background:rgba(37,99,235,.1) !important}
.inline-edit-wrap{display:flex;gap:5px;align-items:center;min-width:160px}
.inline-edit-inp{flex:1;padding:5px 8px;border:1.5px solid var(--a1);border-radius:6px;font-family:var(--mono);font-size:.82rem;background:var(--w);color:var(--t1);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
[data-theme="dark"] .inline-edit-inp{background:var(--w3);color:var(--t1)}
.inline-edit-save{background:var(--a1) !important;color:#fff !important;border:none !important}

/* ── BULK SELECT ── */
.bulk-cb{width:15px;height:15px;cursor:pointer;accent-color:var(--a1)}
.bulk-bar{display:none;align-items:center;gap:10px;padding:10px 16px;background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.06));border:1.5px solid rgba(37,99,235,.2);border-radius:var(--rs);margin-bottom:8px;flex-wrap:wrap;animation:fadeUp .2s ease}
.bulk-count{font-size:.82rem;font-weight:800;color:var(--a1)}

/* ── COL TOGGLE PANEL ── */
.col-toggle-panel{background:var(--w);border:1.5px solid var(--border);border-radius:14px;box-shadow:var(--sh3);width:240px;position:absolute;right:16px;z-index:100;animation:popIn .18s ease}
[data-theme="dark"] .col-toggle-panel{background:var(--w3)}
.ctp-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.ctp-list{max-height:260px;overflow-y:auto;padding:8px}
.ctp-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:.8rem;color:var(--t2);font-weight:600;transition:background .12s}
.ctp-item:hover{background:var(--w3)}
.ctp-item input{accent-color:var(--a1);width:14px;height:14px}
/* auto-refresh active */
.ar-btn.active{background:var(--a1) !important;color:#fff !important;border-color:var(--a1) !important}

/* ── AUDIT TRAIL ── */
.audit-head{display:flex;gap:0;background:var(--w3);border-bottom:1px solid var(--border);padding:8px 22px;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--t4)}
.audit-head span{flex:1}
.audit-row{display:flex;gap:0;padding:10px 22px;border-bottom:1px solid var(--border);font-size:.8rem;transition:background .12s}
.audit-row:hover{background:var(--w3)}
.audit-ts{flex:1;color:var(--t3);font-family:var(--mono);font-size:.74rem}
.audit-user{flex:1;font-weight:700;color:var(--t2)}
.audit-col{flex:1;color:var(--a1);font-weight:700}
.audit-diff{flex:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.audit-old{color:var(--danger);text-decoration:line-through;font-family:var(--mono);font-size:.75rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-new{color:var(--success);font-family:var(--mono);font-size:.75rem;font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-arrow{color:var(--t4);font-weight:900}

/* ── DB PERMS MATRIX ── */
.dbp-wrap{overflow-x:auto}
.dbp-cell{display:flex;gap:10px;align-items:center}
.dbp-cell label{display:flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;color:var(--t3);cursor:pointer}
.dbp-cell input{accent-color:var(--a1);width:13px;height:13px}

/* ── SPARKLINE ── */
.dsc-sparkline{display:block;width:100%;height:36px;margin-top:4px}

/* ── CTRL PANEL PANEL WRAPPER ── */
.ctrl-panel{animation:fadeUp .2s ease}

/* ── SPARKLINE ── */
.dsc-sparkline{display:block;width:100%;height:40px;border-radius:6px}

/* ── UPTIME BAR ── */
.upt-bar{display:flex;gap:2px;align-items:center;height:18px;flex-wrap:nowrap;overflow:hidden;border-radius:4px}
.upt-block{flex:1;height:100%;border-radius:2px;transition:opacity .15s;cursor:default;min-width:4px}
.upt-block:hover{opacity:.7}
.upt-online{background:#10b981}
.upt-offline{background:#ef4444}
.upt-unknown{background:var(--border2)}
.upt-shimmer{width:100%;height:18px;border-radius:4px;background:linear-gradient(90deg,var(--sk-base) 25%,var(--sk-shine) 50%,var(--sk-base) 75%);background-size:400% 100%;animation:skeletonPulse 1.4s ease infinite}

/* ══════════════════════════════
   PRO USER CARD
══════════════════════════════ */
.user-card-pro{background:var(--w);border:1.5px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--sh1);transition:all .2s;animation:fadeUp .3s ease both;display:flex;flex-direction:column}
.user-card-pro:hover{box-shadow:var(--sh2);border-color:var(--border2);transform:translateY(-2px)}
[data-theme="dark"] .user-card-pro{background:var(--w);border-color:var(--border)}

/* Header */
.ucp-header{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(124,58,237,.04));border-bottom:1px solid var(--border);position:relative}
[data-theme="dark"] .ucp-header{background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(124,58,237,.07))}
.ucp-av{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.82rem;font-weight:900;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.ucp-info{flex:1;min-width:0}
.ucp-name{font-size:.92rem;font-weight:900;color:var(--t1);letter-spacing:-.3px}
.ucp-meta{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--t4);font-weight:600;margin-top:2px;flex-wrap:wrap}
.ucp-dot{color:var(--border2)}
.ucp-role{background:var(--w3);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.ucp-status-badge{padding:2px 8px;border-radius:20px;font-size:.65rem;font-weight:800}
.ucp-online{background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.25)}
.ucp-offline{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
/* Action buttons */
.ucp-actions{display:flex;gap:4px;align-items:center;flex-shrink:0}
.ucp-act-btn{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--border);background:var(--w3);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all .15s}
.ucp-act-btn:hover{background:var(--w4);color:var(--t1);transform:translateY(-1px)}
.ucp-act-danger:hover{background:rgba(239,68,68,.12) !important;border-color:rgba(239,68,68,.3) !important;color:#ef4444 !important}

/* Password row */
.ucp-pw-row{display:flex;align-items:center;gap:7px;padding:8px 16px;background:var(--w3);border-bottom:1px solid var(--border);font-family:var(--mono);font-size:.73rem;color:var(--t3)}
.ucp-pw-row .pw-val{flex:1;color:var(--t2)}

/* Mini toggle — per-user IP restriction switch */
.mini-tgl{width:34px;height:18px;background:var(--w4);border-radius:18px;cursor:pointer;position:relative;transition:all .2s;border:1.5px solid var(--border);flex-shrink:0}
.mini-tgl.on{background:var(--a1);border-color:var(--a1)}
.mini-tgl::after{content:'';position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;top:1.5px;left:1.5px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mini-tgl.on::after{transform:translateX(16px)}
.ucp-ip-row{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--w3);border-bottom:1px solid var(--border);font-size:.72rem;color:var(--t3)}
.ucp-ip-row .ucp-ip-lbl{font-weight:700;color:var(--t4);flex-shrink:0}
.ucp-ip-row .ucp-ip-state{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Sections */
.ucc-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.ucc-section:last-child{border-bottom:none}
.ucc-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.ucc-section-lbl{font-size:.63rem;font-weight:800;color:var(--t4);text-transform:uppercase;letter-spacing:.8px}
/* Tab toggle pills */
.ucc-tab-toggle{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:.72rem;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--w3);color:var(--t3);transition:all .15s;user-select:none}
.ucc-tab-toggle input{display:none}
.ucc-tab-toggle.on{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.3);color:var(--a1)}
.ucc-tab-toggle:hover{border-color:var(--a1);color:var(--a1)}
/* DB list */
.ucc-db-list{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:220px;overflow-y:auto}
.ucc-db-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;transition:background .12s}
.ucc-db-row:hover{background:var(--w3)}
.ucc-db-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ucc-db-name{flex:1;font-size:.76rem;font-weight:700;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* R/W/D perm toggles */
.ucc-perm-toggle{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:6px;font-size:.67rem;font-weight:800;cursor:pointer;border:1.5px solid var(--border);background:var(--w3);color:var(--t4);transition:all .15s;user-select:none}
.ucc-perm-toggle input{display:none}
.ucc-r.on{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.35);color:var(--a1)}
.ucc-w.on{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.35);color:#f59e0b}
.ucc-d.on{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);color:#ef4444}
.ucc-perm-toggle:hover{border-color:currentColor;opacity:.85}
/* Quick action pills */
.uca-pill{padding:2px 8px;border-radius:20px;font-size:.62rem;font-weight:800;cursor:pointer;border:1px solid var(--border);background:var(--w3);color:var(--t3);transition:all .15s;font-family:var(--font)}
.uca-pill:hover{background:var(--w4);color:var(--t1)}
.uca-pill-blue{color:var(--a1);border-color:rgba(37,99,235,.3);background:rgba(37,99,235,.08)}
.uca-pill-amber{color:#f59e0b;border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.08)}
.uca-pill-red{color:#ef4444;border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.08)}
/* Perm badge */
.ucc-perm-badge{font-size:.65rem;font-weight:800;padding:2px 8px;border-radius:20px;background:rgba(37,99,235,.09);color:var(--a1);border:1px solid rgba(37,99,235,.2)}

/* ── SESSION CARDS ── */
.session-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--w);border:1.5px solid var(--border);border-radius:12px;transition:all .15s}
.session-row:hover{border-color:var(--border2);box-shadow:var(--sh1)}
.session-me{border-color:rgba(37,99,235,.3);background:rgba(37,99,235,.04)}
[data-theme="dark"] .session-me{background:rgba(37,99,235,.08)}
.session-avatar{width:36px;height:36px;border-radius:10px;background:var(--g1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:900;flex-shrink:0}
.session-info{flex:1;min-width:0}
.session-name{font-size:.85rem;font-weight:800;color:var(--t1);display:flex;align-items:center;gap:7px}
.session-meta{font-size:.72rem;color:var(--t4);margin-top:2px;font-family:var(--mono)}
.session-you{font-size:.58rem;font-weight:900;padding:1px 7px;border-radius:20px;background:rgba(37,99,235,.12);color:var(--a1);border:1px solid rgba(37,99,235,.25);text-transform:uppercase;letter-spacing:.5px}

/* ════════════════════════════════════════
   BACKUP PANEL
════════════════════════════════════════ */
.backup-panel{padding:4px 0}
/* Backup sections */
.bkp-section{background:var(--w);border:1.5px solid var(--border);border-radius:16px;padding:20px 22px;box-shadow:var(--sh1)}
.bkp-section-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.bkp-section-title{font-size:.9rem;font-weight:800;color:var(--t1);display:flex;align-items:center;gap:7px}
.bkp-section-sub{font-size:.73rem;color:var(--t4);margin-top:3px}
/* Backup DB card grid */
.backup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:4px}
.bk-card{background:var(--w2);border:1.5px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,box-shadow .2s}
.bk-card:hover{border-color:rgba(99,102,241,.3);box-shadow:0 4px 16px rgba(99,102,241,.08)}
.bk-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bk-name{font-size:.9rem;font-weight:800;color:var(--t1)}
.bk-db-name{font-size:.7rem;color:var(--t3);font-family:var(--mono);margin-top:-6px}
.bk-status{font-size:.62rem;font-weight:800;letter-spacing:.4px;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.bk-online{background:rgba(16,185,129,.1);color:#10b981;border:1px solid rgba(16,185,129,.25)}
.bk-offline{background:rgba(239,68,68,.08);color:#ef4444;border:1px solid rgba(239,68,68,.18)}
.bk-meta{display:flex;gap:12px;font-size:.72rem;color:var(--t3);flex-wrap:wrap}
.bk-actions{display:flex;gap:8px;margin-top:4px}
.bk-dl-btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 10px;border-radius:9px;font-size:.74rem;cursor:pointer;transition:all .18s}
.bk-dl-btn:hover:not(:disabled){background:rgba(16,185,129,.2)!important;box-shadow:0 2px 10px rgba(16,185,129,.15)}
.bk-dl-btn:disabled{opacity:.38;cursor:not-allowed}

/* ── DB HEALTH TAB ── */
.dbh-wrap{padding:4px 0;display:flex;flex-direction:column;gap:14px}
.dbh-banner{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:10px;font-size:.8rem;font-weight:700;border:1.5px solid var(--border);background:var(--w2);color:var(--t2);transition:all .3s}
.dbh-banner-ok{background:rgba(16,185,129,.07);border-color:rgba(16,185,129,.3);color:#10b981}
.dbh-banner-err{background:var(--dbg);border-color:var(--dborder);color:var(--danger)}
.dbh-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dbh-btn-warn{background:rgba(245,158,11,.1);border:1.5px solid rgba(245,158,11,.3);color:#f59e0b;font-weight:800}
.dbh-btn-warn:hover{background:rgba(245,158,11,.2)}
.dbh-btn-blue{background:rgba(37,99,235,.1);border:1.5px solid rgba(37,99,235,.25);color:var(--a1);font-weight:800}
.dbh-btn-blue:hover{background:rgba(37,99,235,.18)}
.dbh-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.dbh-stat-card{background:var(--w);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;align-items:flex-start;gap:10px;box-shadow:var(--sh1);transition:box-shadow .18s}
.dbh-stat-card:hover{box-shadow:var(--sh2)}
.dbh-stat-icon{font-size:1.2rem;line-height:1;margin-top:1px}
.dbh-stat-body{flex:1;min-width:0}
.dbh-stat-label{font-size:.65rem;font-weight:800;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.dbh-stat-val{font-size:.88rem;color:var(--t1);margin-bottom:2px;line-height:1.3}
.dbh-stat-sub{font-size:.68rem;color:var(--t3);font-family:var(--mono)}
.dbh-badge{font-size:.72rem;font-weight:800;padding:2px 7px;border-radius:20px;border:1px solid;display:inline-block}
.dbh-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.72rem;color:var(--t3);font-family:var(--mono);padding:6px 10px;background:var(--w2);border-radius:8px;border:1px solid var(--border)}
.dbh-section{background:var(--w);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--sh1)}
.dbh-section-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1.5px solid var(--border);background:var(--w2)}
.dbh-section-title{display:flex;align-items:center;gap:7px;font-size:.83rem;font-weight:900;color:var(--t1)}
.dbh-section-sub{font-size:.72rem;color:var(--t4);font-weight:700}
.dbh-tbl-wrap{overflow-x:auto}
.dbh-tbl{width:100%;border-collapse:collapse;font-size:.77rem}
.dbh-tbl thead tr{background:var(--w2)}
.dbh-tbl th{padding:8px 12px;text-align:left;font-size:.65rem;font-weight:800;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;border-bottom:1.5px solid var(--border);white-space:nowrap}
.dbh-tbl tbody tr{border-bottom:1px solid var(--border);transition:background .13s}
.dbh-tbl tbody tr:hover{background:var(--w2)}
.dbh-tbl td{padding:8px 12px;color:var(--t2);vertical-align:middle}
.dbh-tbl-name{font-weight:700;color:var(--t1);font-family:var(--mono);font-size:.78rem}
.dbh-eng-badge{font-size:.65rem;font-weight:800;padding:2px 7px;border-radius:20px;background:rgba(99,102,241,.1);color:var(--a2);border:1px solid rgba(99,102,241,.2)}
.dbh-row-actions{display:flex;align-items:center;gap:5px;white-space:nowrap}
.dbh-fmt-sel{font-size:.7rem!important;padding:3px 6px!important}
.dbh-exp-btn{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#10b981;font-size:.7rem;padding:4px 9px;font-weight:800}
.dbh-exp-btn:hover{background:rgba(16,185,129,.2)}
.dbh-clr-btn{background:var(--dbg);border:1px solid var(--dborder);color:var(--danger);font-size:.7rem;padding:4px 9px;font-weight:800}
.dbh-clr-btn:hover{background:rgba(239,68,68,.15)}
[data-theme="dark"] .dbh-stat-card{background:var(--w3)}
[data-theme="dark"] .dbh-section{background:var(--w)}
[data-theme="dark"] .dbh-section-hdr{background:var(--w3)}
[data-theme="dark"] .dbh-tbl thead tr{background:var(--w3)}

/* ══════════════════════════════════════════════════════════════
   PRO UI UPGRADE PACK — sliding pill nav, OLED theme, sidebar
   scroll fade, footer bar, section accents, direction-aware view
   transitions. Appended here (app-panels.css loads last of the 3
   CSS files) so it has final cascade say, mirroring the single-
   file app.css approach used on the non-split build. All additive
   — nothing in app-base.css / app-components.css is touched.
   ══════════════════════════════════════════════════════════════ */

/* ── brand easing (standardized motion curve) ── */
:root{--ease-brand:cubic-bezier(.4,0,.2,1);--ease-spring:cubic-bezier(.22,1,.36,1)}

/* ── 1. SLIDING PILL NAV (topbar tabs) ── */
.tab-pill-bg{position:absolute;top:50%;height:calc(100% - 12px);transform:translateY(-50%);background:var(--g1);border-radius:10px;opacity:.13;pointer-events:none;transition:left .32s var(--ease-spring),width .32s var(--ease-spring),opacity .2s;z-index:0}
[data-theme="dark"] .tab-pill-bg{opacity:.22}
.tabs .tab{position:relative;z-index:1}
.tab-indicator{opacity:.9}

/* ── 2. LOGO IDLE SHIMMER ── */
.logo-icon{position:relative;overflow:hidden}
.logo-icon::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.55) 52%,transparent 70%);background-size:220% 100%;background-position:150% 0;animation:logoShine 5.5s ease-in-out infinite;pointer-events:none}
@keyframes logoShine{0%,55%{background-position:150% 0}100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.logo-icon::after{animation:none;display:none}}

/* ── 3. CLOCK — tabular nums + shift-state dot (absolute dot, does NOT
   touch .dc-zone's existing column flex layout) ── */
.dc-time,.sb-clock{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:.2px}
.dc-zone{position:relative}
.dc-zone::before{content:'';position:absolute;top:-2px;right:-7px;width:5px;height:5px;border-radius:50%;background:var(--t4);transition:background .3s}
.dc-zone.dc-day::before{background:var(--a5);box-shadow:0 0 6px rgba(245,158,11,.6)}
.dc-zone.dc-night::before{background:var(--a3);box-shadow:0 0 6px rgba(14,165,233,.6);animation:dotPing 3s ease-in-out infinite}

/* ── 4. USER AVATAR RING (matches role badge glow) ── */
.user-chip{transition:box-shadow .2s var(--ease-brand)}
.user-av{position:relative}
.user-av::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--a1);opacity:.35;transition:border-color .2s,opacity .2s}
.role-badge.rb-super + .user-chip .user-av::after{border-color:var(--a5);opacity:.6;box-shadow:0 0 10px rgba(245,158,11,.3)}

/* ── 5. OLED / TRUE-BLACK THEME VARIANT ── */
.oled-toggle{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border);background:var(--w3);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:.65rem;transition:all .2s;flex-shrink:0}
[data-theme="dark"] .oled-toggle{display:inline-flex}
.oled-toggle:hover{border-color:var(--a1)}
.oled-toggle[aria-pressed="true"]{background:#000;border-color:var(--a1);box-shadow:0 0 0 2px rgba(37,99,235,.25)}
[data-theme="dark"][data-oled="1"]{--w:#000;--w2:#000;--w3:#0a0a0a;--w4:#121212;--w5:#181818;--border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.04)}
[data-theme="dark"][data-oled="1"] body{background:#000}
[data-theme="dark"][data-oled="1"] .topbar{background:rgba(0,0,0,.97)}
[data-theme="dark"][data-oled="1"] .sidebar{background:#000;border-color:rgba(255,255,255,.05)}

/* ── 6. SMOOTH THEME TRANSITION (glow / accent surfaces) ──
   Scoped to elements with NO pre-existing `transition` shorthand, so
   this never clobbers functional transitions (sidebar width collapse,
   card hover-lift, dsc's !important all-transition, load-panel, etc). ── */
.topbar,.mc,.search-hero,.r-group,.sum-bar,.pager,.tbl-outer,table.dt,.tbl-toolbar,.log-head{transition:background .32s var(--ease-brand),border-color .32s var(--ease-brand),box-shadow .32s var(--ease-brand)}

/* ── 7. SIDEBAR — status dot for 'error' state (previously invisible) ── */
.sbi-dot.error{background:var(--danger);box-shadow:0 0 0 2px rgba(239,68,68,.25),0 0 8px rgba(239,68,68,.5);animation:errPulse 1.6s ease-in-out infinite}
@keyframes errPulse{0%,100%{opacity:1}50%{opacity:.45}}
.sbi-tag.off{opacity:.75}

/* ── 8. SIDEBAR SCROLL FADE (pure CSS mask, no JS/scroll listeners) ── */
.db-list{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}

/* ── 9. SIDEBAR BOTTOM GROUP SEPARATION (this build's sb-clock-wrap
   already has border-top — we only add a soft glow on top of it) ── */
.sb-clock-wrap{position:relative}
.sb-clock-wrap::after{content:'';position:absolute;top:-1px;left:10px;right:10px;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.35) 20%,rgba(99,102,241,.35) 80%,transparent);pointer-events:none}

/* ── 10. PAGE FOOTER BAR ── */
.app-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 20px;border-top:1px solid var(--border);background:var(--w);font-size:.71rem;color:var(--t4);flex-wrap:wrap;font-family:var(--mono)}
.app-footer .af-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.app-footer .af-item{display:flex;align-items:center;gap:5px}
.app-footer .af-dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0;box-shadow:0 0 6px rgba(16,185,129,.5)}
.app-footer .af-dot.warn{background:var(--warn);box-shadow:0 0 6px rgba(245,158,11,.5)}
.app-footer .af-dot.bad{background:var(--danger);box-shadow:0 0 6px rgba(239,68,68,.5)}
.app-footer .af-ver{opacity:.65}
.app-footer a{color:var(--t3);text-decoration:none}
.app-footer a:hover{color:var(--a1)}
[data-theme="dark"] .app-footer{background:var(--w)}

/* ── 11. PER-SECTION ACCENT TINT ── */
.main{transition:background .35s var(--ease-brand)}
[data-section="search"] .main{background:linear-gradient(180deg,rgba(14,165,233,.035),transparent 220px)}
[data-section="dbs"] .main{background:linear-gradient(180deg,rgba(16,185,129,.035),transparent 220px)}
[data-section="ctrl"] .main{background:linear-gradient(180deg,rgba(245,158,11,.035),transparent 220px)}
[data-section="home"] .main{background:linear-gradient(180deg,rgba(37,99,235,.03),transparent 220px)}

/* ── 12. DIRECTION-AWARE VIEW TRANSITIONS ──
   NOTE: this build's .view has display:none/flex toggling via a
   different mechanism than the legacy build (app-components.css
   uses display:none base + presumably .active sets display:flex
   elsewhere) — we only touch the animation property, never display,
   so the show/hide logic already in this codebase is untouched. ── */
.view.active{animation:viewInR .28s var(--ease-spring) both}
.view.active.dir-l{animation:viewInL .28s var(--ease-spring) both}
@keyframes viewInR{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@keyframes viewInL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.view.active,.view.active.dir-l{animation:fadeUp .15s ease both}}

/* ── 13. HOME GRID SKELETON CARDS (loading state) ── */
.dsc-skel{background:var(--w);border:1.5px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--sh1);contain:content}
.dsc-skel .sk-cell{margin-bottom:8px}