/* ══════════════════════════════════════════════════════════
   ZAVENTRA MUSIC GROUP — ADMIN CONSOLE STYLESHEET
   Enterprise Theme & Global Component Styling
   ══════════════════════════════════════════════════════════ */


/* ── Zaventra Admin — Design System Additions ────────────
   Builds on styles.css / loading.css / portal-additions.css.
   Only admin-specific enterprise widgets live here. */

:root {
  --adm-accent: #2563eb;
  --adm-accent-hover: #1d4ed8;
  --adm-accent-soft: #eff6ff;
  --adm-border: #e5e7eb;
  --adm-text: #111827;
  --adm-muted: #6b7280;
  --adm-faint: #9ca3af;
  --adm-success: #16a34a;
  --adm-warning: #f59e0b;
  --adm-danger: #ef4444;
  --adm-radius: 12px;
  --adm-card-radius: 12px;
  --adm-hover: #f5f7fb;
}

/* App shell uses the shared .app/.sidebar-acc from styles.css.
   Force light sidebar surface consistent with design system. */
.app aside{background:#1e293b}
#content{padding-bottom:32px}

/* ── Welcome Header ────────────────────────────────────── */
.adm-welcome{margin-bottom:16px}
.adm-welcome h1{font-size:30px;font-weight:700;letter-spacing:-.8px;line-height:1.2;margin:0 0 8px}
.adm-welcome p{color:var(--adm-muted);font-size:12px;margin:0}
.adm-welcome .adm-workspace{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font:500 10px 'DM Mono';letter-spacing:.8px;text-transform:uppercase;color:var(--adm-accent)}
.adm-welcome .adm-workspace .dot{width:5px;height:5px;border-radius:50%;background:var(--adm-success);box-shadow:0 0 0 3px rgba(22,163,74,.14)}

/* ── Stat Cards (4/2/1 responsive) ────────────────────── */
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.adm-stat{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:16px;height:96px;overflow:hidden;transition:box-shadow .2s ease;display:flex;flex-direction:column;justify-content:space-between}
.adm-stat:hover{box-shadow:0 2px 12px rgba(0,0,0,.05)}
.adm-stat .stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.adm-stat .stat-label{font:600 11px 'DM Mono';letter-spacing:.6px;color:var(--muted)}
.adm-stat .stat-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center}
.adm-stat .stat-icon .lucide-icon{width:16px;height:16px}
.adm-stat .stat-icon.blue{background:#eff6ff;color:#2563eb}
.adm-stat .stat-icon.green{background:#ecfdf5;color:#16a34a}
.adm-stat .stat-icon.orange{background:#fff7ed;color:#f59e0b}
.adm-stat .stat-icon.purple{background:#f5f3ff;color:#8b5cf6}
.adm-stat .stat-value{font-size:32px;font-weight:800;letter-spacing:-1px;line-height:1}
.adm-stat .stat-change{font-size:12px;color:var(--muted);margin-top:0}
.adm-stat .stat-change.good{color:var(--adm-success)}
.adm-stat .stat-change.warn{color:var(--adm-warning)}

/* ── Section titles ────────────────────────────────────── */
.adm-section{margin:16px 0 12px;display:flex;align-items:center;justify-content:space-between}
.adm-section h3{font-size:16px;font-weight:700;letter-spacing:-.3px;margin:0}
.adm-link,.adm-section .adm-link,.adm-card-head .adm-link{font:600 10px 'DM Mono';letter-spacing:.6px;text-transform:uppercase;color:var(--adm-accent);cursor:pointer;background:none;border:none;padding:0}
.adm-link:hover,.adm-section .adm-link:hover,.adm-card-head .adm-link:hover{color:var(--adm-accent-hover)}

/* ── Cards / grids ─────────────────────────────────────── */
.adm-grid{display:grid;gap:16px;margin-bottom:16px}
.adm-grid-2{grid-template-columns:1fr 1fr}
.adm-grid-3{grid-template-columns:repeat(3,1fr)}
.adm-card{border:1px solid var(--line);background:var(--panel);border-radius:12px;overflow:hidden}
.adm-card .adm-card-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.adm-card .adm-card-head h4{font-size:13px;font-weight:700;margin:0;letter-spacing:-.2px}
.adm-card .adm-card-head .tag{font:500 10px 'DM Mono';color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.adm-card .adm-card-body{padding:6px 16px 16px}

/* ── Tables (enterprise) ───────────────────────────────── */
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{text-align:left;padding:8px 12px;font:600 11px 'DM Mono';letter-spacing:.6px;color:var(--muted);text-transform:uppercase;background:var(--panel2);border-bottom:1px solid var(--line);white-space:nowrap;height:40px}.adm-table td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle;height:44px}
.adm-table tr:last-child td{border-bottom:none}
.adm-table tbody tr{transition:background .15s}
.adm-table tbody tr:hover{background:#fafbfd}
.adm-table .name-cell{font-weight:700;font-size:13px}
.adm-table .sub-cell{font-size:11px;color:var(--muted)}
.adm-table .num{font:500 12px 'DM Mono';color:var(--adm-accent)}

/* ── Pills (pastel, blue era) ──────────────────────────── */
.adm-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font:600 11px 'DM Mono';letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.adm-pill .pill-dot{width:5px;height:5px;border-radius:50%}
.adm-pill.green{background:#dcfce7;color:#15803d}.adm-pill.green .pill-dot{background:#16a34a}
.adm-pill.blue{background:#dbeafe;color:#1d4ed8}.adm-pill.blue .pill-dot{background:#2563eb}
.adm-pill.orange{background:#fef3c7;color:#b45309}.adm-pill.orange .pill-dot{background:#f59e0b}
.adm-pill.red{background:#fee2e2;color:#b91c1c}.adm-pill.red .pill-dot{background:#ef4444}
.adm-pill.purple{background:#ede9fe;color:#6d28d9}.adm-pill.purple .pill-dot{background:#8b5cf6}
.adm-pill.gray{background:#f3f4f6;color:#4b5563}.adm-pill.gray .pill-dot{background:#9ca3af}

/* ── Action buttons (mini) ─────────────────────────────── */
.adm-act{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);font:600 12px/1 Manrope;cursor:pointer;transition:all .15s;height:34px}
.adm-act:hover{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}
.adm-act svg{width:14px;height:14px}
.adm-act.approve{border-color:#bbf7d0;color:#15803d}.adm-act.approve:hover{background:#f0fdf4}
.adm-act.reject{border-color:#fecaca;color:#b91c1c}.adm-act.reject:hover{background:#fef2f2}
.adm-act.ghost{border-color:transparent;color:var(--muted)}.adm-act.ghost:hover{background:#f3f4f6;color:var(--text)}
.adm-act.primary{border-color:#1d4ed8;background:#1d4ed8;color:#fff}.adm-act.primary:hover{background:#1e40af;border-color:#1e40af;color:#fff}

/* ── Modal form fields (admin console) ─────────────────── */
#zmgModal .field{display:grid;gap:8px}
#zmgModal .field label{font:700 11px Manrope;color:#111827;letter-spacing:.2px}
#zmgModal .field input,#zmgModal .field select,#zmgModal .field textarea{height:42px;border:1px solid #e5e7eb;border-radius:10px;padding:0 14px;font:500 13px Manrope;color:#111827;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
#zmgModal .field textarea{height:auto;padding:10px 14px;resize:vertical}
#zmgModal .field input:focus,#zmgModal .field select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* ── Quick Actions grid ────────────────────────────────── */
.adm-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.adm-qa{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;text-align:left}
.adm-qa:hover{border-color:#bfdbfe;background:#eff6ff;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.adm-qa .qa-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:#eff6ff;color:#2563eb}
.adm-qa .qa-icon svg{width:14px;height:14px}
.adm-qa .qa-label{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-qa .qa-sub{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Platform Health badges ────────────────────────────── */
.adm-health{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;padding:16px;align-items:stretch}
.adm-h-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;height:100%}
.adm-h-item .h-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.adm-h-item .h-icon svg{width:15px;height:15px}
.adm-h-item .h-icon.green{background:#ecfdf5;color:#16a34a}
.adm-h-item .h-icon.orange{background:#fff7ed;color:#f59e0b}
.adm-h-item .h-icon.red{background:#fef2f2;color:#ef4444}
.adm-h-item .h-name{font-size:12px;font-weight:700}
.adm-h-item .h-status{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:1px}
.adm-h-item .h-status .h-dot{width:6px;height:6px;border-radius:50%}
.adm-h-item .h-status .h-dot.green{background:#16a34a}.adm-h-item .h-status .h-dot.orange{background:#f59e0b}.adm-h-item .h-status .h-dot.red{background:#ef4444}

/* ── Overview stat tiles ───────────────────────────────── */
.adm-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.adm-ov{padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;height:100%}
.adm-ov .ov-label{font:600 11px 'DM Mono';letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.adm-ov .ov-value{font-size:20px;font-weight:800;letter-spacing:-.5px}
.adm-ov .ov-sub{font-size:11px;color:var(--muted);margin-top:2px}
.adm-ov .ov-value.good{color:var(--adm-success)}
.adm-ov .ov-value.warn{color:var(--adm-warning)}
.adm-ov .ov-value.danger{color:var(--adm-danger)}
.adm-ov .ov-value.accent{color:var(--adm-accent)}

/* ── Activity rows ─────────────────────────────────────── */
.adm-activity{padding:4px 16px}
.adm-act-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.adm-act-row:last-child{border-bottom:none}
.adm-act-ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.adm-act-ico svg{width:13px;height:13px}
.adm-act-ico.blue{background:#eff6ff;color:#2563eb}
.adm-act-ico.green{background:#ecfdf5;color:#16a34a}
.adm-act-ico.orange{background:#fff7ed;color:#f59e0b}
.adm-act-ico.red{background:#fef2f2;color:#ef4444}
.adm-act-ico.purple{background:#f5f3ff;color:#8b5cf6}
.adm-act-row .act-txt{flex:1;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-act-row .act-txt b{font-weight:700}
.adm-act-row .act-time{font:500 10px 'DM Mono';color:var(--muted);margin-top:1px}

/* ── Empty / loading / error states ────────────────────── */
.adm-empty{text-align:center;padding:36px 20px;color:var(--muted)}
.adm-empty .adm-empty-ico{width:40px;height:40px;border-radius:10px;background:var(--panel2);display:grid;place-items:center;margin:0 auto 8px;color:var(--muted)}
.adm-empty .adm-empty-ico svg{width:20px;height:20px}
.adm-empty h5{font-size:13px;font-weight:700;color:var(--text);margin:0 0 2px}
.adm-empty p{font-size:12px;margin:0}

.adm-error{text-align:center;padding:36px 20px}
.adm-error .adm-err-ico{width:44px;height:44px;border-radius:12px;background:#fef2f2;color:#ef4444;display:grid;place-items:center;margin:0 auto 10px}
.adm-error .adm-err-ico svg{width:22px;height:22px}
.adm-error h5{font-size:14px;font-weight:800;margin:0 0 4px}
.adm-error p{font-size:12px;color:var(--muted);margin:0 0 14px}

.adm-skels{padding:16px;display:flex;flex-direction:column;gap:10px}
.adm-skel{height:14px;border-radius:7px;background:linear-gradient(90deg,#f3f4f6 25%,#e9ebef 50%,#f3f4f6 75%);background-size:200% 100%;animation:admShimmer 1.4s infinite}
.adm-skel.w60{width:60%}.adm-skel.w40{width:40%}.adm-skel.w80{width:80%}
.adm-skel.row{height:36px;border-radius:8px}
@keyframes admShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ═══════════════════════════════════════════════════════════
   CATALOG TOOLBAR + PAGINATION + TABLE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */
.adm-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.adm-search-wrap{position:relative;flex:1;min-width:200px;max-width:360px}
.adm-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--adm-muted);pointer-events:none}.adm-search{width:100%;height:40px;padding:8px 12px 8px 32px;border:1px solid #e5e7eb;border-radius:8px;font:500 13px Manrope;background:#fff;color:var(--adm-text);outline:none;transition:border-color .15s,color .15s}.adm-search:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.1);color:#111827}.adm-filter{height:36px;padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font:500 13px Manrope;background:#fff;color:var(--adm-text);cursor:pointer;outline:none;transition:border-color .15s;min-width:100px}
.cat-art{width:40px;height:40px;border-radius:8px;overflow:hidden;flex-shrink:0}
.cat-type-badge{font:500 11px 'DM Mono';padding:2px 8px;border-radius:6px;background:var(--panel2);color:var(--adm-muted);text-transform:uppercase;letter-spacing:.4px}
.adm-pagination{display:flex;align-items:center;justify-content:space-between;padding:14px 0;flex-wrap:wrap;gap:8px}.pag-info{font:500 12px Manrope;color:var(--muted)}.pag-btns{display:flex;gap:2px;align-items:center}.pag-btn{height:32px;min-width:32px;padding:0 6px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;font:500 12px Manrope;color:#374151;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.pag-btn:hover:not(:disabled){border-color:#93c5fd;color:#2563eb;background:#f0f4ff}.pag-btn.active{background:#2563eb;color:#fff;border-color:#2563eb}.pag-btn:disabled{opacity:.35;cursor:default}.pag-dots{padding:0 4px;color:var(--muted);font-size:12px;min-width:32px;text-align:center;font:500 12px Manrope}

/* ═══════════════════════════════════════════════════════════
   RIGHT-SIDE DRAWER
   ═══════════════════════════════════════════════════════════ */
.adm-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:100;opacity:0;transition:opacity .25s;pointer-events:none}
.adm-drawer-overlay.open{opacity:1;pointer-events:auto}
.adm-drawer{position:fixed;top:0;right:0;bottom:0;width:720px;max-width:100vw;background:#fff;z-index:101;transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.1)}
.adm-drawer.open{transform:translateX(0)}
.adm-drawer-wide{width:780px}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--adm-border);flex-shrink:0;background:#fff}
.drawer-header-info{display:flex;align-items:center;gap:14px;min-width:0}
.drawer-art{width:48px;height:48px;border-radius:10px;flex-shrink:0;background:#e5e7eb}
.drawer-header h3{font-size:16px;font-weight:800;margin:0;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-sub{font-size:12px;color:var(--adm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.drawer-close{width:32px;height:32px;border:none;background:none;font-size:18px;color:var(--muted);cursor:pointer;border-radius:6px;display:grid;place-items:center;transition:all .15s;padding:4px}.drawer-close:hover{background:#f3f4f6;color:#111827}.drawer-body{flex:1;overflow-y:auto;padding:20px}
.drawer-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--adm-border);background:#fff;flex-shrink:0}
.drawer-loading{padding:24px}

/* Drawer sections */
.drawer-section{margin-bottom:20px}
.drawer-section h4{font-size:12px;font-weight:800;letter-spacing:-.2px;margin:0 0 10px;color:var(--adm-text);text-transform:uppercase;letter-spacing:.4px}
.drawer-cover-lg{width:100%;max-width:320px;border-radius:12px;margin-bottom:12px;display:block}
.audio-player-wrap{margin-bottom:12px}
.audio-player{width:100%;height:40px;border-radius:8px}
.video-preview-placeholder{width:100%;height:200px;border-radius:12px;background:var(--panel2);display:grid;place-items:center;color:var(--adm-muted)}

/* Meta grid */
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.meta-item{display:flex;flex-direction:column;gap:2px}
.meta-item span{font:500 10px 'DM Mono';letter-spacing:.6px;color:var(--adm-muted);text-transform:uppercase}
.meta-item b{font-size:12px;font-weight:600;color:var(--adm-text)}

/* Checklist */
.checklist{display:grid;gap:8px}
.check-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--adm-border);border-radius:10px;font-size:12px;font-weight:600;color:var(--adm-text);cursor:pointer;transition:background .15s,border-color .15s}
.check-item:hover{background:var(--adm-hover)}
.check-item input{width:18px;height:18px;accent-color:var(--adm-accent);cursor:pointer;flex-shrink:0}
.check-item:has(input:checked){background:#eff6ff;border-color:#bfdbfe;color:var(--adm-accent)}

/* Drawer textarea */
.drawer-textarea{width:100%;min-height:80px;padding:12px;border:1px solid var(--adm-border);border-radius:10px;font:500 13px 'Manrope',sans-serif;color:var(--adm-text);resize:vertical;outline:none;transition:border-color .2s}
.drawer-textarea:focus{border-color:var(--adm-accent)}

/* Download links */
.download-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.dl-link{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--adm-border);border-radius:8px;font:600 11px 'DM Mono';color:var(--adm-accent);text-decoration:none;transition:background .15s}
.dl-link:hover{background:var(--adm-accent-soft)}

/* Distribution decision */
.dist-decision{display:grid;gap:8px;margin-bottom:12px}
.dist-option{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--adm-border);border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.dist-option:hover{background:var(--adm-hover)}
.dist-option:has(input:checked){background:#eff6ff;border-color:#bfdbfe;color:var(--adm-accent)}
.dist-option input{width:18px;height:18px;accent-color:var(--adm-accent)}

/* Detail alerts */
.detail-alert{padding:12px 16px;border-radius:10px;font-size:12px;line-height:1.5;margin-bottom:14px}
.detail-alert b{font-weight:700}
.detail-alert-red{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.detail-alert-orange{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.detail-alert-blue{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
.detail-status-banner{margin-bottom:14px}

/* Store grid */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}.store-item{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border:1px solid var(--adm-border);border-radius:10px;border-bottom:1px solid #f3f4f6;font:500 13px Manrope;gap:10px}.store-name{font-size:12px;font-weight:600;color:#111827;font:700 13px Manrope}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:20px}
.timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--adm-border)}
.tl-item{display:flex;gap:14px;position:relative;padding:10px 0}
.tl-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:2px solid #fff;position:relative;z-index:1;margin-left:-28px;margin-top:2px}
.tl-dot.green{background:var(--adm-success)}
.tl-dot.red{background:var(--adm-danger)}
.tl-dot.blue{background:var(--adm-accent)}
.tl-dot.gray{background:var(--adm-muted)}
.tl-content{flex:1;min-width:0}
.tl-action{font-size:12px;font-weight:700;color:var(--adm-text)}
.tl-meta{font-size:11px;color:var(--adm-muted);margin-top:2px}
.tl-notes{font-size:12px;color:var(--adm-text);margin-top:4px;padding:8px 12px;background:var(--panel2);border-radius:8px}
.tl-failures{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.tl-fail{font-size:12px;color:var(--adm-danger)}
.muted{color:var(--adm-muted);font-size:12px}

/* ═══════════════════════════════════════════════════════════
   REVIEW WIZARD — ENTERPRISE MODAL
   ═══════════════════════════════════════════════════════════ */
.rw-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:grid;place-items:center;opacity:0;transition:opacity .2s;pointer-events:none}
.rw-modal-overlay.open{opacity:1;pointer-events:auto}.rw-modal{width:100%;max-width:100vw;height:100vh;max-height:100vh;background:#fff;border-radius:0;display:flex;flex-direction:column;overflow:hidden;transform:scale(.97);transition:transform .2s;box-shadow:0 25px 80px rgba(0,0,0,.3)}
.rw-modal-overlay.open .rw-modal{transform:scale(1)}

/* Header */
.rw-header{display:flex;align-items:center;gap:20px;padding:16px 24px;border-bottom:1px solid var(--adm-border);background:#fff;flex-shrink:0}.rw-cover{width:56px;height:56px;border-radius:14px;flex-shrink:0;background:#e5e7eb;background-size:cover;background-position:center}.rw-header-info{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.rw-hf{display:flex;flex-direction:column;gap:1px;min-width:0}
.rw-hf-label{font:500 10px 'DM Mono';letter-spacing:.5px;color:var(--adm-muted);text-transform:uppercase}.rw-hf-value{font:600 13px 'Manrope',sans-serif;color:var(--adm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.rw-close{width:36px;height:36px;border:none;background:transparent;font-size:20px;color:var(--adm-muted);cursor:pointer;border-radius:10px;display:grid;place-items:center;transition:all .15s;flex-shrink:0}
.rw-close:hover{background:var(--adm-hover);color:var(--adm-text)}

/* Stepper */
.rw-stepper{display:flex;align-items:center;padding:10px 24px;gap:0;border-bottom:1px solid var(--adm-border);background:#fff;flex-shrink:0}
.rw-step{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.rw-step:hover{background:var(--adm-hover)}
.rw-step.active{background:#eff6ff;color:var(--adm-accent)}
.rw-step.done{color:var(--adm-success)}
.rw-step.future{opacity:.4;cursor:default}
.rw-step-num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px 'DM Mono';border:2px solid var(--adm-border);color:var(--adm-muted);flex-shrink:0}
.rw-step.active .rw-step-num{border-color:var(--adm-accent);color:var(--adm-accent);background:#eff6ff}
.rw-step.done .rw-step-num{border-color:var(--adm-success);color:#fff;background:var(--adm-success)}
.rw-step-label{font:600 12px 'Manrope',sans-serif;color:var(--adm-text)}
.rw-step.active .rw-step-label{color:var(--adm-accent)}
.rw-step.done .rw-step-label{color:var(--adm-success)}

/* Body */
.rw-body{flex:1;overflow-y:auto;padding:24px;scroll-behavior:smooth}

/* Footer */
.rw-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-top:1px solid var(--adm-border);background:#fff;flex-shrink:0}
.rw-footer-left{display:flex;align-items:center;gap:12px}
.rw-check-count{font:600 12px 'DM Mono';color:var(--adm-muted)}
.rw-footer-right{display:flex;gap:8px;align-items:center}

/* Buttons */
.rw-btn{height:38px;padding:0 18px;border:none;border-radius:10px;font:700 13px 'Manrope',sans-serif;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rw-btn:disabled{opacity:.35;cursor:not-allowed}
.rw-btn-primary{background:var(--adm-accent);color:#fff}
.rw-btn-primary:hover:not(:disabled){background:#2563eb}
.rw-btn-ghost{background:transparent;color:var(--adm-text);border:1px solid var(--adm-border)}
.rw-btn-ghost:hover:not(:disabled){background:var(--adm-hover)}
.rw-btn-approve{background:var(--adm-success);color:#fff}
.rw-btn-approve:hover:not(:disabled){background:#16a34a}
.rw-btn-reject{background:#fff;color:var(--adm-danger);border:1px solid #fecaca}
.rw-btn-reject:hover:not(:disabled){background:#fef2f2;border-color:#f87171}
.rw-btn-reject:disabled{border-color:var(--adm-border);color:var(--adm-muted)}

/* Table layout */
.rw-tbl{width:100%;border-collapse:collapse;border:1px solid var(--adm-border);border-radius:12px;overflow:hidden}
.rw-tbl tr{border-bottom:1px solid var(--adm-border)}
.rw-tbl tr:last-child{border-bottom:none}
.rw-tbl td{padding:10px 16px;font:500 13px 'Manrope',sans-serif;color:var(--adm-text);vertical-align:middle}.rw-tbl td:first-child{font:600 12px 'Manrope',sans-serif;color:var(--adm-muted);width:140px;white-space:nowrap}

/* Single checkbox */
.rw-check-row{margin-top:16px}
.rw-single-check{display:flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--adm-border);border-radius:10px;font:600 13px 'Manrope',sans-serif;color:var(--adm-text);cursor:pointer;transition:all .15s;user-select:none}
.rw-single-check:hover{background:var(--adm-hover)}
.rw-single-check input{width:18px;height:18px;accent-color:var(--adm-accent);cursor:pointer;flex-shrink:0}
.rw-single-check:has(input:checked){background:#eff6ff;border-color:#bfdbfe}
.rw-single-check:has(input:checked) span:last-child{color:var(--adm-accent)}

/* Audio player */
.rw-player{border-radius:12px;overflow:hidden;background:#f8fafc;border:1px solid var(--adm-border);padding:16px;margin-bottom:16px}
.rw-audio-player{width:100%;height:44px;border-radius:8px}
.rw-waveform{height:56px;background:linear-gradient(135deg,#e0e7ff 0%,#c7d2fe 50%,#a5b4fc 100%);border-radius:8px;margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.rw-waveform::after{content:'Waveform';font:500 11px 'DM Mono';color:var(--adm-muted);letter-spacing:.5px}

/* Artwork */
.rw-art-wrap{position:relative;cursor:pointer;border-radius:12px;overflow:hidden;display:inline-block}
.rw-art-img{width:100%;max-width:500px;display:block;border-radius:12px}
.rw-art-overlay{position:absolute;bottom:10px;left:10px;display:flex;gap:6px;opacity:0;transition:opacity .2s}
.rw-art-wrap:hover .rw-art-overlay{opacity:1}
.rw-art-btn{padding:5px 12px;border-radius:8px;background:rgba(0,0,0,.7);color:#fff;font:600 11px 'Manrope',sans-serif;text-decoration:none;border:none;cursor:pointer}
.rw-art-btn:hover{background:rgba(0,0,0,.9)}
.rw-zoom-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:200;display:grid;place-items:center;cursor:zoom-out}
.rw-zoom-overlay img{max-width:90vw;max-height:90vh;border-radius:8px;object-fit:contain}
.rw-zoom-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:20px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.rw-zoom-close:hover{background:rgba(255,255,255,.3)}

/* Video */
.rw-vid-wrap{border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9;max-width:600px}
.rw-vid-player,.rw-vid-embed{width:100%;height:100%;border:none;display:block}

/* Summary */
.rw-summary{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.rw-sum-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:8px;border:1px solid var(--adm-border)}
.rw-sum-row.pass{background:#f0fdf4;border-color:#bbf7d0}
.rw-sum-row.fail{background:#fef2f2;border-color:#fecaca}
.rw-sum-icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0;color:#fff}
.rw-sum-row.pass .rw-sum-icon{background:var(--adm-success)}
.rw-sum-row.fail .rw-sum-icon{background:var(--adm-danger)}
.rw-sum-name{font:600 13px 'Manrope',sans-serif;flex:1}
.rw-sum-badge{font:700 10px 'DM Mono';padding:2px 8px;border-radius:6px;text-transform:uppercase}
.rw-sum-badge.pass{background:#dcfce7;color:#166534}
.rw-sum-badge.fail{background:#fee2e2;color:#991b1b}

/* Downloads */
.rw-dl-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.rw-dl-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border:1px solid var(--adm-border);border-radius:8px;font:600 12px 'Manrope',sans-serif;color:var(--adm-accent);text-decoration:none;transition:all .15s}
.rw-dl-btn:hover{background:var(--adm-accent-soft);border-color:var(--adm-accent)}

/* Textarea */
.rw-textarea{width:100%;min-height:72px;padding:12px;border:1px solid var(--adm-border);border-radius:10px;font:500 13px 'Manrope',sans-serif;color:var(--adm-text);resize:vertical;outline:none;transition:border-color .2s}
.rw-textarea:focus{border-color:var(--adm-accent)}
.rw-text-hint{font:500 11px 'Manrope',sans-serif;margin-top:4px}
.rw-text-error{color:var(--adm-danger)}
.rw-text-ok{color:var(--adm-success)}

/* Empty */
.rw-empty{padding:40px;text-align:center;color:var(--adm-muted);font-size:13px;background:var(--panel2);border-radius:12px}

/* YouTube publish */
.rw-yt-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel2);border-radius:8px;margin-bottom:8px}
.rw-yt-label{font:600 12px 'Manrope',sans-serif;color:var(--adm-muted);min-width:140px;flex-shrink:0}
.rw-yt-val{font:500 13px 'Manrope',sans-serif;color:var(--adm-text)}

/* Responsive */
@media(max-width:1100px){
}
@media(max-width:700px){
  .rw-modal{border-radius:0}
  .rw-cover{width:48px;height:48px;border-radius:10px}
  .rw-header{flex-wrap:wrap;gap:12px}
  .rw-header-info{flex-direction:column;align-items:flex-start}
  .rw-hf-value{max-width:100%}
  .rw-stepper{overflow-x:auto}
  .rw-art-img{max-width:100%}
  .rw-vid-wrap{max-width:100%}
  .rw-tbl td:first-child{width:120px;font-size:11px}
}

/* ══════════════════════════════════════════════════════════
   ZMG ADMIN SIDEBAR — ENTERPRISE IMPLEMENTATION
   216px fixed · white logo · equal button sizes · normalized spacing
   ══════════════════════════════════════════════════════════ */
#zmgSidebar,
aside#zmgSidebar {
  width: 260px !important;
  height: 100vh !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  background: #0f172a !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 60 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

#zmgSidebar .brand,
aside#zmgSidebar .brand {
  flex: 0 0 auto !important;
  height: 68px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 0 0 6px 0 !important;
  box-sizing: border-box !important;
}

#zmgSidebar .brand img,
aside#zmgSidebar .brand img,
#zmgSidebar .brand .theme-logo {
  width: auto !important;
  height: 38px !important;
  max-height: 42px !important;
  max-width: 175px !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
}

#zmgSidebar .zmg-admin-nav,
#sidebar.zmg-admin-nav,
#zmgSidebar nav#sidebar {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  padding: 4px 8px 30px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  margin: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* ── Hide scrollbar completely (no visible line/track/thumb/buttons) ── */
#zmgSidebar .zmg-admin-nav::-webkit-scrollbar,
#sidebar.zmg-admin-nav::-webkit-scrollbar,
#zmgSidebar nav#sidebar::-webkit-scrollbar,
#zmgSidebar::-webkit-scrollbar,
aside#zmgSidebar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

#zmgSidebar .zmg-admin-nav::-webkit-scrollbar-track,
#sidebar.zmg-admin-nav::-webkit-scrollbar-track,
#zmgSidebar .zmg-admin-nav::-webkit-scrollbar-thumb,
#sidebar.zmg-admin-nav::-webkit-scrollbar-thumb,
#zmgSidebar .zmg-admin-nav::-webkit-scrollbar-button,
#sidebar.zmg-admin-nav::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

#zmgSidebar .nav-group,
#sidebar .nav-group {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── All Navigation Items: Identical, uniform dimensions ── */
#zmgSidebar .nav-item,
#sidebar .nav-item,
aside .zmg-admin-nav .nav-item {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  font-family: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.1px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-align: left !important;
  position: relative !important;
  user-select: none !important;
  white-space: nowrap !important;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease !important;
  flex-shrink: 0 !important;
}

#zmgSidebar .nav-item:hover,
#sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
}

#zmgSidebar .nav-item.active,
#sidebar .nav-item.active {
  background: rgba(37, 99, 235, 0.18) !important;
  color: #60a5fa !important;
  font-weight: 600 !important;
}

#zmgSidebar .nav-item.active::before,
#sidebar .nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  height: auto !important;
  transform: none !important;
  width: 3.5px !important;
  border-radius: 0 4px 4px 0 !important;
  background: #3b82f6 !important;
}

#zmgSidebar .nav-item .nav-icon,
#sidebar .nav-item .nav-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #0f172a !important;
  transition: color 0.14s ease !important;
}

#zmgSidebar .nav-item:hover .nav-icon,
#sidebar .nav-item:hover .nav-icon {
  color: #000000 !important;
}

#zmgSidebar .nav-item.active .nav-icon,
#sidebar .nav-item.active .nav-icon {
  color: #1d4ed8 !important;
}

#zmgSidebar .nav-item .nav-icon svg,
#sidebar .nav-item .nav-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

#zmgSidebar .nav-chevron,
#sidebar .nav-chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 0 auto !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, color 0.2s ease !important;
}

#zmgSidebar .nav-item:hover .nav-chevron,
#sidebar .nav-item:hover .nav-chevron {
  color: rgba(255, 255, 255, 0.85) !important;
}

#zmgSidebar .nav-group.expanded .nav-chevron,
#sidebar .nav-group.expanded .nav-chevron {
  transform: rotate(90deg) !important;
  color: #60a5fa !important;
}

/* ── Submenus: Zero phantom gap when closed ── */
#zmgSidebar .nav-group:not(.expanded) .nav-children,
#sidebar .nav-group:not(.expanded) .nav-children {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#zmgSidebar .nav-group.expanded .nav-children,
#sidebar .nav-group.expanded .nav-children {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 2px 0 3px 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#zmgSidebar .nav-children-inner,
#sidebar .nav-children-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Submenu items: clean aligned nested styling ── */
#zmgSidebar .nav-child,
#sidebar .nav-child {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  padding: 0 12px 0 36px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-family: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.1px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-align: left !important;
  position: relative !important;
  user-select: none !important;
  white-space: nowrap !important;
  transition: background 0.14s ease, color 0.14s ease !important;
  flex-shrink: 0 !important;
}

#zmgSidebar .nav-child::before,
#sidebar .nav-child::before {
  content: '' !important;
  position: absolute !important;
  left: 21px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.25) !important;
  transition: background 0.14s ease, transform 0.14s ease !important;
}

#zmgSidebar .nav-child:hover,
#sidebar .nav-child:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

#zmgSidebar .nav-child:hover::before,
#sidebar .nav-child:hover::before {
  background: #60a5fa !important;
  transform: translateY(-50%) scale(1.2) !important;
}

#zmgSidebar .nav-child.active,
#sidebar .nav-child.active {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  font-weight: 600 !important;
}

#zmgSidebar .nav-child.active::before,
#sidebar .nav-child.active::before {
  background: #3b82f6 !important;
  transform: translateY(-50%) scale(1.4) !important;
}

#zmgSidebar .nav-item:focus-visible,
#zmgSidebar .nav-child:focus-visible {
  outline: 2px solid #3b82f6 !important;
  outline-offset: -1px !important;
}

/* ── Header profile (top-right, existing popup design unchanged) ── */
.app header .profile-wrap{position:relative;display:flex;align-items:center}
.app header .profile-button{height:40px;min-width:42px;width:42px;padding:0;border:1px solid #e5e7eb;border-radius:50%;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.app header .profile-button:hover{border-color:#2563eb;background:#eff6ff}
.app header .profile-button .header-avatar{width:36px;height:36px;border-radius:9999px;object-fit:cover;display:block}
.app header .profile-button .pd-initials{width:36px;height:36px;border-radius:9999px;display:flex;align-items:center;justify-content:center;background:#2563eb;color:#fff;font:700 12px 'Manrope',sans-serif;text-transform:uppercase}

/* ── Main content offset (216px sidebar) ── */
.app main{margin-left:216px;width:calc(100% - 260px);padding:20px 20px 40px;max-width:1500px}

/* ── Responsive ── */
@media(max-width:900px){
  #zmgSidebar, aside#zmgSidebar{width: 260px !important}
  .app main{margin-left: 260px !important;width:calc(100% - 260px) !important}
}
@media(min-width:2560px){
  #zmgSidebar, aside#zmgSidebar{width: 260px !important}
}


.adm-table tr{height:56px}

/* Format Icons — 20×20, Lucide outline, 2px stroke, black */
.fmt-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,opacity .15s ease;flex-shrink:0;color:#1f2937;line-height:0}
.fmt-icon:hover{transform:scale(1.05);opacity:.9}
.fmt-icon svg{width:24px;height:24px;stroke-width:2;fill:none;stroke:currentColor}
.fmt-icon img{width:24px;height:24px;display:block}

/* Status Icons — 20×20, same design language */
.sts-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,opacity .15s ease;flex-shrink:0;color:#1f2937}
.sts-icon:hover{transform:scale(1.05);opacity:.9}
.sts-icon svg{width:20px;height:20px;stroke-width:2;fill:none;stroke:currentColor}

/* ===== TOOLTIP PORTAL (JS-driven, never clipped) ===== */

/* Cover Art */
.cat-art{width:40px;height:40px;border-radius:8px;overflow:hidden;flex-shrink:0;position:relative;background:#f3f4f6}
.cat-art-img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease}
.cat-art-img.loading{opacity:0}
.cat-art-img.loaded{opacity:1}
.cat-art-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font:700 14px Manrope;color:#fff;border-radius:8px}

/* Title Cell */
.title-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat-title{color:#2563eb;cursor:pointer;text-decoration:none;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease}
.cat-title:hover{text-decoration:underline;color:#1d4ed8}
.row-archived .cat-title{color:var(--muted);cursor:default;pointer-events:none}
.row-archived .cat-title:hover{text-decoration:none}

/* Artist / Label — single line ellipsis */
.cell-gray{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.cell-label{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:160px}

/* CAT# — no wrap */
.cell-mono{font:500 12px 'DM Mono';color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* Date */
.cell-date{font:500 12px Manrope;color:var(--muted);white-space:nowrap}
.cell-date.pending-date{color:#F4A100;font-weight:600}

/* Tracks */
.cell-tracks{font:500 12px Manrope;color:var(--muted);text-align:center}

/* Promotion */
.promo-link{color:#2563eb;cursor:pointer;font:600 12px Manrope;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;transition:all .15s ease;white-space:nowrap}
.promo-link:hover{background:#eff6ff;color:#1d4ed8;transform:scale(1.02)}
.promo-link svg{width:14px;height:14px;stroke-width:2}

/* Territories & Stores — button-like cards */
.terr-store-cells{display:flex;flex-direction:column;gap:4px}
.terr-card,.str-card{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .15s ease;font:500 12px Manrope;background:#fff}
.terr-card:hover{background:#f0f4ff;border-color:#93c5fd;box-shadow:0 1px 4px rgba(37,99,235,.1)}
.str-card:hover{background:#f0f4ff;border-color:#93c5fd;box-shadow:0 1px 4px rgba(37,99,235,.1)}
.str-disabled{opacity:.45;cursor:default;border-style:dashed}
.str-disabled:hover{background:#fff;border-color:#e5e7eb;box-shadow:none}
.terr-icon,.str-icon{color:var(--muted);flex-shrink:0;display:inline-flex;align-items:center}
.terr-icon svg,.str-icon svg{width:13px;height:13px;stroke-width:2}
.terr-val,.str-val{white-space:nowrap}

/* ===== DRAWER SYSTEM ===== */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:9998;opacity:0;pointer-events:none;transition:opacity .25s}
.drawer-overlay.open{opacity:1;pointer-events:auto}.drawer-panel{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:100%;background:#fff;z-index:9999;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.12)}
.drawer-panel.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #ececec;flex-shrink:0}
.drawer-head h3{font:700 15px Manrope;margin:0;color:#111827}

/* Drawer Sections */
.drawer-section{margin-bottom:24px}
.drawer-section-title{font:700 13px Manrope;color:#111827;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #ececec}
.drawer-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}

/* Release Header */
.drawer-release-header{display:flex;gap:16px}
.drawer-cover{width:120px;height:120px;border-radius:12px;overflow:hidden;flex-shrink:0}
.drawer-cover-img{width:100%;height:100%;object-fit:cover;display:block}
.drawer-release-info{flex:1;min-width:0}
.drawer-release-title{font:700 18px Manrope;margin:0 0 12px;color:#111827}
.drawer-release-meta{display:flex;flex-direction:column;gap:6px}
.drawer-meta-row{display:flex;gap:8px;font:500 13px Manrope}
.drawer-meta-label{color:var(--muted);min-width:100px;flex-shrink:0}
.drawer-meta-val{color:#111827;font-weight:600}

/* Drawer Tracks */
.drawer-tracks{display:flex;flex-direction:column;gap:1px}
.drawer-track{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #f3f4f6;font:500 13px Manrope}
.track-num{width:24px;height:24px;border-radius:50%;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font:600 11px 'DM Mono';color:var(--muted);flex-shrink:0}
.track-title{flex:1;font-weight:600;color:#111827}
.track-artist{color:var(--muted);font-size:12px}
.track-duration{color:var(--muted);font:500 12px 'DM Mono'}

/* Drawer Grid */
.drawer-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drawer-stat-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border:1px solid #ececec;border-radius:10px;cursor:pointer;transition:all .15s;text-align:center}
.drawer-stat-card:hover{background:#f0f4ff;border-color:#bfdbfe}
.dsc-icon{color:#2563eb}
.dsc-val{font:700 14px Manrope;color:#111827}
.dsc-sub{font:500 11px Manrope;color:var(--muted)}

/* Drawer Meta Grid */
.drawer-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drawer-meta-item{display:flex;flex-direction:column;gap:2px;padding:8px;background:#fafafa;border-radius:6px}
.drawer-meta-item .drawer-meta-label{font:600 10px 'DM Mono';color:var(--muted);text-transform:uppercase;letter-spacing:.5px;min-width:0}
.drawer-meta-item .drawer-meta-val{font:500 13px Manrope;color:#111827}

/* Timeline */
.drawer-timeline{display:flex;flex-direction:column;gap:0}
.timeline-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #f3f4f6}
.timeline-dot{width:8px;height:8px;border-radius:50%;background:#2563eb;flex-shrink:0;margin-top:5px}
.timeline-content{display:flex;flex-direction:column;gap:2px}
.timeline-action{font:600 12px Manrope;color:#111827}
.timeline-time{font:500 11px Manrope;color:var(--muted)}
.timeline-user{font:500 11px Manrope;color:var(--muted)}

/* Activity */
.drawer-activity{display:flex;flex-direction:column;gap:0}
.act-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f3f4f6;font:500 12px Manrope}
.act-action{font-weight:600;color:#111827}
.act-time{color:var(--muted)}
.act-user{color:var(--muted)}

/* Comments */
.drawer-comments{display:flex;flex-direction:column;gap:8px}
.comment-item{padding:10px;background:#fafafa;border-radius:8px}
.comment-head{display:flex;justify-content:space-between;margin-bottom:4px}
.comment-user{font:600 12px Manrope;color:#111827}
.comment-time{font:500 11px Manrope;color:var(--muted)}
.comment-body{font:500 13px Manrope;color:#374151}

/* Territories Grid */
.territories-grid{display:flex;flex-wrap:wrap;gap:6px}
.territory-chip{padding:4px 10px;border:1px solid #ececec;border-radius:6px;font:500 12px Manrope;color:#374151;background:#fafafa}

/* DSP List */
.dsp-list{display:flex;flex-direction:column;gap:1px}
.dsp-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f3f4f6;font:500 13px Manrope}
.dsp-name{color:#111827}
.dsp-status{font:600 11px Manrope;padding:2px 8px;border-radius:4px}
.dsp-active{background:#dcfce7;color:#15803d}

/* Stores Grid */
.stores-grid{display:flex;flex-direction:column;gap:1px}
.store-status{display:flex;align-items:center;gap:4px;font:600 11px Manrope;padding:2px 8px;border-radius:4px}
.store-delivered{background:#dcfce7;color:#15803d}
.store-pending{background:#fef3c7;color:#d97706}
.store-removed{background:#fee2e2;color:#dc2626}

/* Promotion Empty */
.promo-empty{text-align:center;padding:40px 20px;color:var(--muted)}
.promo-empty-icon{margin-bottom:12px;color:var(--muted)}

/* Pagination */
.adm-pagination-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;flex-wrap:wrap;gap:12px}
.pag-right{display:flex;align-items:center;gap:16px}
.pag-rows{font:500 12px Manrope;color:var(--muted);display:flex;align-items:center;gap:6px}
.pag-select{padding:4px 8px;border:1px solid #ececec;border-radius:6px;font:500 12px Manrope;background:#fff;cursor:pointer;transition:border-color .15s}
.pag-select:hover{border-color:#93c5fd}

/* ===== EMPTY STATE ===== */
.cat-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}
.cat-empty-icon{margin-bottom:16px;color:#d1d5db}
.cat-empty-icon svg{width:48px;height:48px;stroke-width:1.5}
.cat-empty-state h3{font:700 16px Manrope;color:#111827;margin:0 0 8px}
.cat-empty-state p{font:500 13px Manrope;color:var(--muted);margin:0 0 16px;max-width:320px}
.cat-empty-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#2563eb;color:#fff;border:none;border-radius:8px;font:600 13px Manrope;cursor:pointer;transition:all .15s ease}
.cat-empty-btn:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 2px 8px rgba(37,99,235,.25)}

/* ===== LOADING SKELETON ===== */
.skeleton-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f3f4f6}
.skeleton-block{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== TOOLBAR ===== */
.adm-toolbar{display:flex;align-items:center;gap:10px;padding:0 0 14px;flex-wrap:wrap}
.adm-search-wrap .adm-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex;align-items:center}
.adm-filter:hover{border-color:#93c5fd}
.adm-filter:focus{border-color:#2563eb;outline:none}

/* ===== RESPONSIVE & TABLE LAYOUT ===== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  box-sizing: border-box;
}

/* Desktop layout for Admin tables (>= 1025px): 100% fit without horizontal scrollbar */
@media (min-width: 1025px) {
  .table-wrap {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
  }

  .adm-table.cat-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .adm-table.cat-table .col-format { width: 4% !important; min-width: 0 !important; max-width: 4% !important; text-align: center !important; }
  .adm-table.cat-table .col-status { width: 4% !important; min-width: 0 !important; max-width: 4% !important; text-align: center !important; }
  .adm-table.cat-table .col-cover { width: 5% !important; min-width: 0 !important; max-width: 5% !important; }
  .adm-table.cat-table .col-title { width: 24% !important; min-width: 0 !important; max-width: 24% !important; }
  .adm-table.cat-table .col-label { width: 12% !important; min-width: 0 !important; max-width: 12% !important; }
  .adm-table.cat-table .col-date { width: 13% !important; min-width: 0 !important; max-width: 13% !important; }
  .adm-table.cat-table .col-tracks { width: 6% !important; min-width: 0 !important; max-width: 6% !important; text-align: center !important; }
  .adm-table.cat-table .col-cat { width: 11% !important; min-width: 0 !important; max-width: 11% !important; }
  .adm-table.cat-table .col-promo { width: 7% !important; min-width: 0 !important; max-width: 7% !important; text-align: center !important; }
  .adm-table.cat-table .col-terr { width: 14% !important; min-width: 0 !important; max-width: 14% !important; }

  .adm-table.cat-table .cat-title {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
  }

  .adm-table.cat-table .cell-gray,
  .adm-table.cat-table .sub-cell {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
  }

  .adm-table.cat-table .cell-label {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
    line-height: 1.3 !important;
  }

  .adm-table.cat-table .cell-date {
    white-space: normal !important;
    word-break: break-word !important;
    display: block !important;
    line-height: 1.35 !important;
  }

  .adm-table.cat-table .cell-mono {
    white-space: normal !important;
    word-break: break-all !important;
    display: block !important;
  }
}

/* Tablet & Mobile layout (<= 1024px): horizontal scrolling preserved, ALL columns visible */
@media (max-width: 1024px) {
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .adm-table.cat-table {
    min-width: 880px !important;
    table-layout: auto !important;
  }

  .col-label, .col-date, .col-tracks, .col-cat, .col-promo {
    display: table-cell !important;
  }
}

@media (max-width: 768px) {
  .col-label, .col-date, .col-tracks, .col-cat, .col-promo {
    display: table-cell !important;
  }
  .drawer-release-header { flex-direction: column; }
  .drawer-cover { width: 100%; height: 160px; }
  .drawer-grid-2 { grid-template-columns: 1fr; }
  .drawer-meta-grid { grid-template-columns: 1fr; }
}

/* ===== Delivery drawers (territories & stores popups) ===== */
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#374151;font:600 12px Manrope;padding:8px 14px;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.btn-secondary:hover{border-color:#c7d2fe;color:#4f46e5}
.delivery-group-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;background:#eef2ff;color:#4f46e5;font:700 11px Manrope}
.drawer-section-sub{margin:6px 0 0;font:500 12px Manrope;color:#6b7280}
.delivery-loading{display:flex;flex-direction:column}
.territory-flag{font-size:14px;line-height:1}
.store-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.store-filter-chip{padding:4px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#4b5563;font:600 11px Manrope;cursor:pointer;transition:all .15s ease}
.store-filter-chip:hover{border-color:#c7d2fe;color:#4f46e5}
.store-filter-chip.active{background:#4f46e5;border-color:#4f46e5;color:#fff}
.store-copy-row{margin:0 0 10px}
.store-logo{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#f3f4f6;color:#6b7280;flex-shrink:0}
.store-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.store-platform{font:500 11px Manrope;color:#6b7280;margin-top:1px}
.store-link{display:inline-flex;align-items:center;gap:4px;font:600 11px Manrope;color:#4f46e5;text-decoration:none;white-space:nowrap}
.store-link:hover{text-decoration:underline}

/* Table scroll container (all catalog tables) */
.table-wrap{overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch}


/* ══════════════════════════════════════════════════════════
   ZAVENTRA ADMIN PANEL SIDEBAR — SPECIFICATION SPEC
   ══════════════════════════════════════════════════════════ */

#zmgSidebar,
aside#zmgSidebar {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 100vh !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 100 !important;
  background: #0f172a !important; /* Premium Dark Navy */
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#zmgSidebar .brand,
aside#zmgSidebar .brand {
  flex: 0 0 68px !important;
  height: 68px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #0f172a !important;
}

#zmgSidebar .brand img,
aside#zmgSidebar .brand img,
#zmgSidebar .brand .theme-logo {
  width: auto !important;
  height: 38px !important;
  max-height: 40px !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
}

#zmgSidebar .zmg-admin-nav,
#sidebar.zmg-admin-nav,
#zmgSidebar nav#sidebar {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  padding: 14px 12px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#zmgSidebar .zmg-admin-nav::-webkit-scrollbar,
#sidebar.zmg-admin-nav::-webkit-scrollbar,
#zmgSidebar nav#sidebar::-webkit-scrollbar,
#zmgSidebar::-webkit-scrollbar,
aside#zmgSidebar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ── Section Spacing (Subtle Grouping) ── */
.sidebar-nav-group {
  display: contents !important;
}

.sidebar-nav-group-spacer {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
}

/* ── Accordion & Items ── */
.nav-accordion {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

#zmgSidebar .nav-item,
#sidebar .nav-item,
aside .zmg-admin-nav .nav-item {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  font-family: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.1px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-align: left !important;
  position: relative !important;
  user-select: none !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  flex-shrink: 0 !important;
}

#zmgSidebar .nav-item:hover,
#sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
}

/* Active state for direct item */
#zmgSidebar .nav-item.direct.active,
#sidebar .nav-item.direct.active {
  background: rgba(37, 99, 235, 0.18) !important;
  color: #60a5fa !important;
  font-weight: 600 !important;
}

#zmgSidebar .nav-item.direct.active::before,
#sidebar .nav-item.direct.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  height: auto !important;
  transform: none !important;
  width: 3.5px !important;
  border-radius: 0 4px 4px 0 !important;
  background: #3b82f6 !important;
}

/* Highlight parent item when its subpage is active */
#zmgSidebar .nav-item.parent-active,
#sidebar .nav-item.parent-active {
  color: #ffffff !important;
  font-weight: 600 !important;
}

#zmgSidebar .nav-item .nav-icon,
#sidebar .nav-item .nav-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #0f172a !important;
  transition: color 0.15s ease !important;
}

#zmgSidebar .nav-item:hover .nav-icon,
#sidebar .nav-item:hover .nav-icon {
  color: #000000 !important;
}

#zmgSidebar .nav-item.direct.active .nav-icon,
#sidebar .nav-item.direct.active .nav-icon,
#zmgSidebar .nav-item.parent-active .nav-icon,
#sidebar .nav-item.parent-active .nav-icon {
  color: #1d4ed8 !important;
}

#zmgSidebar .nav-item .nav-icon svg,
#sidebar .nav-item .nav-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

#zmgSidebar .nav-label {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Chevron */
#zmgSidebar .nav-chevron,
#sidebar .nav-chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 0 auto !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease !important;
}

#zmgSidebar .nav-item:hover .nav-chevron,
#sidebar .nav-item:hover .nav-chevron {
  color: rgba(255, 255, 255, 0.85) !important;
}

#zmgSidebar .nav-accordion.expanded .nav-chevron,
#sidebar .nav-accordion.expanded .nav-chevron {
  transform: rotate(90deg) !important;
  color: #60a5fa !important;
}

/* Submenu container inside sidebar */
#zmgSidebar .nav-accordion:not(.expanded) .nav-children,
#sidebar .nav-accordion:not(.expanded) .nav-children {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#zmgSidebar .nav-accordion.expanded .nav-children,
#sidebar .nav-accordion.expanded .nav-children {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 2px 0 4px 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  animation: admSubmenuFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes admSubmenuFade {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

#zmgSidebar .nav-children-inner,
#sidebar .nav-children-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Submenu items */
#zmgSidebar .nav-child,
#sidebar .nav-child {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  padding: 0 12px 0 38px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-family: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.1px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-align: left !important;
  position: relative !important;
  user-select: none !important;
  white-space: nowrap !important;
  transition: background 0.14s ease, color 0.14s ease !important;
  flex-shrink: 0 !important;
}

#zmgSidebar .nav-child::before,
#sidebar .nav-child::before {
  content: '' !important;
  position: absolute !important;
  left: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.25) !important;
  transition: background 0.14s ease, transform 0.14s ease !important;
}

#zmgSidebar .nav-child:hover,
#sidebar .nav-child:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

#zmgSidebar .nav-child:hover::before,
#sidebar .nav-child:hover::before {
  background: #60a5fa !important;
  transform: translateY(-50%) scale(1.2) !important;
}

#zmgSidebar .nav-child.active,
#sidebar .nav-child.active {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  font-weight: 600 !important;
}

#zmgSidebar .nav-child.active::before,
#sidebar .nav-child.active::before {
  background: #3b82f6 !important;
  transform: translateY(-50%) scale(1.4) !important;
}

/* ── Bottom Admin Profile Area ── */
.sidebar-bottom {
  flex: 0 0 auto !important;
  padding: 12px 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #0b1120 !important;
  position: relative !important;
}

.sidebar-profile-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  user-select: none !important;
}

.sidebar-profile-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.sp-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font: 700 12px/32px 'Manrope', sans-serif !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.sp-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sp-name {
  font: 600 12.5px 'Manrope', sans-serif !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sp-role {
  font: 500 10.5px 'Manrope', sans-serif !important;
  color: rgba(255, 255, 255, 0.45) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sp-chevron {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.15s ease !important;
}

.sidebar-profile-card[aria-expanded="true"] .sp-chevron {
  transform: rotate(180deg) !important;
  color: #60a5fa !important;
}

/* Profile Popover */
.sidebar-profile-popover {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 12px !important;
  right: 12px !important;
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  z-index: 200 !important;
  animation: admPopUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-profile-popover.hidden {
  display: none !important;
}

@keyframes admPopUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.sp-item {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font: 500 12.5px 'Manrope', sans-serif !important;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

.sp-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.sp-item.sp-logout:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

.sp-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 3px 0 !important;
}

/* ── Main content offset ── */
.app main {
  margin-left: 260px !important;
  width: calc(100% - 260px) !important;
  padding: 20px 24px 40px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media(max-width:1024px){
  #zmgSidebar, aside#zmgSidebar { width: 240px !important; }
  .app main { margin-left: 240px !important; width: calc(100% - 240px) !important; }
}


/* Popover buttons with icons */
.sp-item {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  height: 34px !important;
  border-radius: 6px !important;
  font: 500 12.5px 'Manrope', sans-serif !important;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

.sp-item .sp-ico {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.sp-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.sp-item:hover .sp-ico {
  color: #ffffff !important;
}

.sp-item.sp-logout:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

.sp-item.sp-logout:hover .sp-ico {
  color: #f87171 !important;
}

/* ── Active navigation indicator: straight, vertical, fully aligned ── */
#zmgSidebar .nav-item.active::before,
#sidebar .nav-item.active::before,
#zmgSidebar .nav-item.direct.active::before,
#sidebar .nav-item.direct.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  height: auto !important;
  width: 3.5px !important;
  transform: none !important;
  border-radius: 0 3px 3px 0 !important;
  background: #3b82f6 !important;
}



/* ═══════════════════════════════════════════════════════════════
   ADMIN OVERVIEW OPERATIONAL DASHBOARD (Action Center)
   ═══════════════════════════════════════════════════════════════ */

.ov-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 0 22px 0;
  flex-wrap: wrap;
}
.ov-header-left h1 {
  font: 700 24px/1.2 'Manrope', sans-serif;
  color: #0f172a;
  margin: 0 0 5px 0;
  letter-spacing: -0.4px;
}
.ov-header-left p {
  font: 500 13px 'Manrope', sans-serif;
  color: #64748b;
  margin: 0;
}
.ov-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ov-search-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
.ov-search-box input {
  box-sizing: border-box !important;
  height: 38px !important;
  width: 240px !important;
  padding: 0 14px 0 38px !important;
  border-radius: 9px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  font: 500 13px 'Manrope', sans-serif !important;
  color: #0f172a !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}
.ov-search-box input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
  width: 280px !important;
}
.ov-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  z-index: 2 !important;
}
.ov-search-kbd {
  display: none !important;
}
.ov-btn-icon {
  height: 38px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}
.ov-btn-icon:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}
.ov-notif-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px #ffffff;
}
.ov-date-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font: 600 12px 'DM Mono', monospace;
  color: #475569;
}

.ov-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ov-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 13px 'Manrope', sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #0f172a;
  margin: 0;
}
.ov-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
  display: inline-block;
}
.ov-section-link {
  font: 600 12px 'Manrope', sans-serif;
  color: #2563eb;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ov-section-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.ov-attention-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 1200px) {
  .ov-attention-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ov-attention-grid { grid-template-columns: 1fr; }
}

.ov-att-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  text-decoration: none;
}
.ov-att-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  transform: translateY(-1px);
}
.ov-att-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ov-att-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ov-att-icon.red { background: #fee2e2; color: #ef4444; }
.ov-att-icon.blue { background: #dbeafe; color: #2563eb; }
.ov-att-icon.purple { background: #f3e8ff; color: #9333ea; }
.ov-att-icon.amber { background: #fef3c7; color: #d97706; }
.ov-att-icon.green { background: #dcfce7; color: #16a34a; }
.ov-att-icon.rose { background: #ffe4e6; color: #e11d48; }
.ov-att-icon.sky { background: #e0f2fe; color: #0284c7; }
.ov-att-icon.indigo { background: #ede9fe; color: #6366f1; }

.ov-att-meta {
  display: flex;
  flex-direction: column;
}
.ov-att-title {
  font: 600 12.5px 'Manrope', sans-serif;
  color: #0f172a;
  margin-bottom: 2px;
}
.ov-att-count {
  font: 700 20px 'Manrope', sans-serif;
  color: #0f172a;
  line-height: 1.1;
}
.ov-att-sub {
  font: 500 11px 'Manrope', sans-serif;
  color: #64748b;
  margin-top: 2px;
}
.ov-att-arrow {
  color: #94a3b8;
  font-size: 16px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.ov-att-card:hover .ov-att-arrow {
  color: #2563eb;
  transform: translateX(3px);
}

.ov-kpi-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ov-range-pills {
  display: flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
}
.ov-range-pill {
  all: unset;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  font: 600 11px 'DM Mono', monospace;
  color: #64748b;
  transition: all 0.12s ease;
}
.ov-range-pill:hover {
  color: #0f172a;
}
.ov-range-pill.active {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.ov-kpi-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
@media (max-width: 1400px) {
  .ov-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .ov-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.ov-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ov-kpi-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.ov-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ov-kpi-label {
  font: 600 11px 'Manrope', sans-serif;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-kpi-badge {
  color: #94a3b8;
  display: flex;
  align-items: center;
}
.ov-kpi-val {
  font: 700 19px 'Manrope', sans-serif;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 3px;
}
.ov-kpi-sub {
  font: 500 11px 'Manrope', sans-serif;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.25fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1200px) {
  .ov-charts-grid { grid-template-columns: 1fr; }
}
.ov-chart-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.ov-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ov-chart-title {
  font: 700 13.5px 'Manrope', sans-serif;
  color: #0f172a;
  margin: 0;
}
.ov-chart-tag {
  font: 600 10.5px 'DM Mono', monospace;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}
.ov-chart-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  position: relative;
}

.ov-bars-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 170px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
  gap: 12px;
}
.ov-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
  cursor: pointer;
}
.ov-bar-num {
  font: 700 12px 'DM Mono', monospace;
  color: #0f172a;
}
.ov-bar-track {
  width: 100%;
  max-width: 44px;
  border-radius: 6px 6px 2px 2px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ov-bar-col:hover .ov-bar-track {
  opacity: 0.85;
  transform: scaleY(1.02);
}
.ov-bar-lbl {
  font: 600 10.5px 'Manrope', sans-serif;
  color: #64748b;
  text-align: center;
}

.ov-svg-chart {
  width: 100%;
  height: 170px;
  overflow: visible;
}
.ov-chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  font: 500 11px 'Manrope', sans-serif;
  color: #64748b;
}
.ov-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.ov-queue-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}
.ov-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.ov-queue-title {
  font: 700 14px 'Manrope', sans-serif;
  color: #0f172a;
  margin: 0;
}
.ov-queue-table {
  width: 100%;
  border-collapse: collapse;
}
.ov-queue-table th {
  text-align: left;
  padding: 10px 18px;
  font: 600 11px 'DM Mono', monospace;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.ov-queue-table td {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  font: 500 12.5px 'Manrope', sans-serif;
  color: #334155;
  vertical-align: middle;
}
.ov-queue-table tr:last-child td {
  border-bottom: none;
}
.ov-queue-table tr:hover td {
  background: #f8fafc;
}
.ov-prio-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font: 700 10.5px 'Manrope', sans-serif;
}
.ov-prio-pill.high { background: #fee2e2; color: #dc2626; }
.ov-prio-pill.medium { background: #fef3c7; color: #d97706; }
.ov-prio-pill.low { background: #e0f2fe; color: #0284c7; }

.ov-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11.5px 'Manrope', sans-serif;
  color: #475569;
}
.ov-act-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 6px;
  font: 600 11.5px 'Manrope', sans-serif;
  transition: all 0.12s ease;
  box-sizing: border-box;
}
.ov-act-btn.primary {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}
.ov-act-btn.primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.ov-act-btn.neutral {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}
.ov-act-btn.neutral:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}


/* ==========================================================================
   RELEASES — ALL RELEASES REDESIGN (Zaventra Enterprise Baseline)
   ========================================================================== */

.rel-page-wrap {
  padding: 0 0 32px 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Header */
.rel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.rel-title-group h1 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}
.rel-title-group p {
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
}
.rel-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rel-btn-advanced {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #2563eb;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.rel-btn-advanced:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1d4ed8;
}
.rel-btn-export {
  background: #2563eb;
  border: 1px solid #2563eb;
  color: #ffffff;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}
.rel-btn-export:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

/* Status Tabs */
.rel-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rel-tab-pill {
  padding: 7px 18px;
  border-radius: 9999px;
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  transition: all 0.15s ease;
  outline: none;
}
.rel-tab-pill:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.rel-tab-pill.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

/* Search bar */
.rel-search-container {
  position: relative;
  margin-bottom: 16px;
  width: 100%;
}
.rel-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  z-index: 2;
}
.rel-search-icon svg {
  width: 18px;
  height: 18px;
  stroke: #94a3b8;
}
.rel-search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 46px !important;
  padding: 0 42px 0 48px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.rel-search-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}
.rel-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.rel-search-clear:hover {
  color: #0f172a;
  background: #f1f5f9;
}
.rel-search-clear.visible {
  display: flex;
}

/* Active Filters */
.rel-active-filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rel-active-filters-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rel-active-label {
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
}
.rel-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
}
.rel-active-tag-close {
  cursor: pointer;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1;
  border: none;
  background: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.rel-active-tag-close:hover {
  color: #ef4444;
}
.rel-active-clear-all {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: none;
  margin-left: 4px;
}
.rel-active-clear-all:hover {
  text-decoration: underline;
}
.rel-active-count {
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;
}

/* Bulk Toolbar */
.rel-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.rel-bulk-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rel-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
  cursor: pointer;
}
.rel-select-count {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-right: 4px;
}
.rel-bulk-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.rel-bulk-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.rel-bulk-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.rel-bulk-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rel-select-dropdown {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  outline: none;
}
.rel-select-dropdown:hover {
  border-color: #cbd5e1;
}

/* Table Card */
.rel-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.rel-table-scroll {
  overflow-x: auto;
}
.rel-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  text-align: left;
}
.rel-table th {
  background: #f8fafc;
  padding: 10px 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  user-select: none;
}
.rel-table th.sortable {
  cursor: pointer;
}
.rel-table th.sortable:hover {
  color: #0f172a;
  background: #f1f5f9;
}
.rel-table th .sort-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  opacity: 0.4;
  vertical-align: middle;
}
.rel-table th.sortable.active .sort-icon {
  opacity: 1;
  color: #2563eb;
}
.rel-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
  font-size: 12.5px;
}
.rel-table th:first-child, .rel-table td:first-child {
  padding-left: 14px;
}
.rel-table th:last-child, .rel-table td:last-child {
  padding-right: 14px;
}
.rel-table tr:hover td {
  background: #fafbfc;
}
.rel-table tr:last-child td {
  border-bottom: none;
}

/* Table Cells */
.rel-cell-release {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rel-artwork-thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f1f5f9;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.rel-artwork-fallback {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.rel-title-block {
  min-width: 0;
}
.rel-main-title {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.rel-sub-title {
  font-family: 'DM Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.rel-qc-badge {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.rel-date-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rel-date-top {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
}
.rel-date-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
}

/* Status Badges */
.rel-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-family: 'Manrope', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.rel-status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rel-status-blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.rel-status-blue .dot {
  background: #2563eb;
}
.rel-status-amber {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}
.rel-status-amber .dot {
  background: #d97706;
}
.rel-status-green {
  background: #ecfdf5;
  color: #10b981;
  border: 1px solid #a7f3d0;
}
.rel-status-green .dot {
  background: #10b981;
}
.rel-status-red {
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fecaca;
}
.rel-status-red .dot {
  background: #ef4444;
}
.rel-status-yellow {
  background: #fefce8;
  color: #ca8a04;
  border: 1px solid #fef08a;
}
.rel-status-yellow .dot {
  background: #ca8a04;
}
.rel-status-slate {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.rel-status-slate .dot {
  background: #64748b;
}

/* Action Buttons */
.rel-actions-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.rel-btn-review {
  padding: 6px 16px;
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.rel-btn-review:hover {
  background: #1d4ed8;
}
.rel-btn-view {
  padding: 6px 16px;
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rel-btn-view:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.rel-btn-more {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}
.rel-btn-more:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Pagination */
.rel-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}
.rel-page-info {
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;
}
.rel-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rel-page-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.rel-page-btn:hover:not(:disabled):not(.active) {
  background: #f1f5f9;
  color: #0f172a;
}
.rel-page-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.rel-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Advanced Filter Drawer */
.rel-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.rel-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}
.rel-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 90vw;
  background: #ffffff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.rel-drawer-overlay.open .rel-drawer {
  transform: translateX(0);
}
.rel-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
}
.rel-drawer-header h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.rel-drawer-close {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rel-drawer-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.rel-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rel-drawer-body::-webkit-scrollbar {
  width: 6px;
}
.rel-drawer-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.rel-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rel-form-label {
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rel-form-input, .rel-form-select {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  background: #ffffff;
  box-sizing: border-box;
}
.rel-form-input:focus, .rel-form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.rel-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rel-range-sep {
  color: #94a3b8;
  font-size: 12px;
}
.rel-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

/* Export Modal */
.rel-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rel-modal-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 520px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: relModalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes relModalPop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.rel-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
}
.rel-modal-header h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.rel-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rel-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.rel-radio-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.rel-radio-card {
  flex: 1;
  min-width: 100px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  transition: all 0.15s ease;
}
.rel-radio-card.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.rel-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fafbfc;
}
.rel-field-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
}


/* ═══════════════════════════════════════════════════════════════════
   Zaventra Music Group — Rights Manager Production Styles
   Exact visual baseline matching media_1790759506763.png
   ═══════════════════════════════════════════════════════════════════ */

.rights-page-wrap {
  padding: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* 1. Header */
.rights-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.rights-title-group h1 {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.4px;
}
.rights-title-group p {
  font-size: 13.5px;
  color: #64748b;
  margin: 4px 0 0;
}

.rights-upload-dropdown-wrap {
  position: relative;
}
.rights-btn-upload {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}
.rights-btn-upload:hover {
  background: #1d4ed8;
}

.rights-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 190px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  z-index: 50;
  padding: 4px;
}
.rights-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}
.rights-menu-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* 2. Summary Cards */
.rights-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.rights-card-stat {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.rights-card-stat:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.rights-card-stat.active-stat {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.rcs-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.rcs-blue { background: #eff6ff; color: #2563eb; }
.rcs-amber { background: #fffbeb; color: #f59e0b; }
.rcs-green { background: #f0fdf4; color: #16a34a; }
.rcs-red { background: #fef2f2; color: #ef4444; }

.rcs-info {
  display: flex;
  flex-direction: column;
}
.rcs-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}
.rcs-value {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin-top: 2px;
  letter-spacing: -0.3px;
}

/* 3. Status Tabs */
.rights-tabs-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.rights-tab-pill {
  border-radius: 20px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  transition: all 0.15s ease;
}
.rights-tab-pill:hover {
  border-color: #cbd5e1;
  color: #0f172a;
}
.rights-tab-pill.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

/* 4. Search bar */
.rights-search-container {
  position: relative;
  margin-bottom: 16px;
  width: 100%;
}
.rights-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  z-index: 2;
}
.rights-search-icon svg {
  width: 18px;
  height: 18px;
  stroke: #94a3b8;
}
.rights-search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 46px !important;
  padding: 0 42px 0 48px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.rights-search-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}
.rights-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: #f1f5f9;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.rights-search-clear.visible {
  display: flex;
}

/* 5. Toolbar */
.rights-bulk-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}
.rights-bulk-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rights-selected-count {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-right: 6px;
}
.rights-btn-bulk {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rights-btn-bulk:not(:disabled):hover {
  background: #f8fafc;
  color: #0f172a;
}
.rights-btn-proc:not(:disabled) {
  color: #16a34a;
  border-color: #bbf7d0;
}
.rights-btn-rej:not(:disabled) {
  color: #dc2626;
  border-color: #fecaca;
}
.rights-btn-bulk:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rights-bulk-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rights-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.rights-toolbar-select {
  height: 34px;
  padding: 0 30px 0 12px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all 0.15s ease;
}
.rights-toolbar-select:hover {
  border-color: #cbd5e1;
  background-color: #f8fafc;
}
.rights-toolbar-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* 6. Table */
.rights-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.rights-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rights-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
  font-family: 'Manrope', sans-serif;
}
.rights-table th {
  padding: 10px 8px;
  background: #fafafa;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.rights-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #0f172a;
  font-size: 12.5px;
}
.rights-table th:first-child, .rights-table td:first-child {
  padding-left: 14px;
}
.rights-table th:last-child, .rights-table td:last-child {
  padding-right: 14px;
}
.rights-table-row:hover {
  background: #f8fafc;
}
.rights-table-row.row-selected {
  background: #f0f7ff;
}

/* Checkbox styling */
.rights-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.rights-checkbox-wrap input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}

/* Column specifics */
.col-check { width: 36px; padding-right: 0 !important; }
.rights-req-id-text {
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
}
.rights-req-id-text:hover {
  color: #2563eb;
  text-decoration: underline;
}

.rights-platform-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}
.plat-ico {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}
.plat-yt {
  fill: #ff0000;
}
.plat-meta {
  fill: #0081fb;
}
.plat-others {
  stroke: #64748b;
}
.rights-type-badge {
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}

.rights-release-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rights-art-thumb {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
  flex-shrink: 0;
}
.rights-art-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rights-release-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rights-rel-title {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.rights-rel-cat {
  font-size: 11.5px;
  color: #64748b;
  font-family: 'DM Mono', monospace;
  margin-top: 1px;
}

.rights-artist-text {
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.rights-video-link {
  background: transparent;
  border: none;
  color: #2563eb;
  font-weight: 600;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}
.rights-video-link:hover {
  text-decoration: underline;
}
.rights-dash {
  color: #94a3b8;
  font-size: 14px;
}

.rights-date-text {
  color: #475569;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Status Pills */
.rights-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.status-pending { background: #eff6ff; color: #2563eb; }
.status-conflicts { background: #fffbeb; color: #d97706; }
.status-processed { background: #f0fdf4; color: #16a34a; }
.status-rejected { background: #fef2f2; color: #dc2626; }

/* Table Actions */
.rights-actions-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rights-btn-action {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.rights-btn-review {
  background: #2563eb;
  color: #ffffff;
  border: none;
}
.rights-btn-review:hover {
  background: #1d4ed8;
}
.rights-btn-view {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.rights-btn-view:hover {
  background: #f8fafc;
  color: #0f172a;
}

.rights-more-menu-wrap {
  position: relative;
}
.rights-btn-dot {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.rights-btn-dot:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.rights-row-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 175px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  z-index: 40;
  padding: 4px;
}
.rights-dd-item {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  text-align: left;
  cursor: pointer;
}
.rights-dd-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* 7. Pagination Footer */
.rights-pagination-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  font-size: 13px;
  color: #64748b;
}
.rights-pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rights-page-btn {
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.rights-page-btn:hover:not(:disabled) {
  background: #f8fafc;
  color: #0f172a;
}
.rights-page-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}
.rights-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rights-page-dots {
  padding: 0 6px;
  color: #94a3b8;
}

/* Modals & Drawers */
.rights-modal-overlay,
.rights-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rights-drawer-overlay {
  justify-content: flex-end;
}
.rights-modal-overlay.hidden,
.rights-drawer-overlay.hidden {
  display: none !important;
}

.rights-modal-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rights-upload-modal-card { max-width: 720px; }
.rights-confirm-modal { max-width: 480px; }
.rights-video-modal-card { max-width: 640px; }

.rights-modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rights-modal-header h3 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.rights-modal-sub {
  font-size: 12.5px;
  color: #64748b;
  margin: 2px 0 0;
}
.rights-modal-close,
.rights-drawer-close {
  background: transparent;
  border: none;
  font-size: 16px;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.rights-modal-close:hover,
.rights-drawer-close:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.rights-modal-body {
  padding: 24px;
  overflow-y: auto;
}
.rights-modal-footer {
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  background: #fafafa;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Drawer specifics */
.rights-drawer-card {
  width: 100%;
  max-width: 580px;
  height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  animation: slideInRight 0.25s ease-out;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.rights-drawer-header {
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rdh-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rdh-id {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}
.rights-drawer-body {
  padding: 20px 24px;
  flex: 1;
  overflow-y: auto;
}
.rights-drawer-footer {
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  background: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rights-footer-left,
.rights-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Detail Card Sections inside Drawer */
.rights-detail-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.rdc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px;
}
.rdc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}
.rdc-cell {
  display: flex;
  flex-direction: column;
}
.rdc-k {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}
.rdc-v {
  font-size: 13px;
  color: #0f172a;
  margin-top: 2px;
}

.rights-rel-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rrd-art {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}
.rrd-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.rrd-artist {
  font-size: 12.5px;
  color: #64748b;
}

/* Conflict banner */
.rights-conflict-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 18px;
}
.rcb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b45309;
  font-size: 14px;
  margin-bottom: 6px;
}
.rcb-desc {
  font-size: 12.5px;
  color: #92400e;
  margin: 0 0 10px;
}
.rcb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  font-size: 12px;
}
.rcb-k { color: #78350f; font-weight: 600; }
.rcb-v { color: #1e293b; font-weight: 500; }
.rcb-actions {
  margin-top: 12px;
}
.rights-btn-resolve-conflict {
  background: #d97706;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rights-btn-resolve-conflict:hover {
  background: #b45309;
}

/* Forms in Modals */
.rights-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.rights-form-group {
  display: flex;
  flex-direction: column;
}
.rights-form-group.span-2 {
  grid-column: span 2;
}
.rights-form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}
.rights-form-input,
.rights-form-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: #0f172a;
  outline: none;
}
.rights-form-input:focus,
.rights-form-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.rights-file-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background: #fafafa;
  transition: all 0.15s ease;
}
.rights-file-dropzone:hover {
  border-color: #3b82f6;
  background: #f0f7ff;
}
.rights-browse-link {
  color: #2563eb;
  font-weight: 600;
  text-decoration: underline;
}
.rights-drop-hint {
  font-size: 11px;
  color: #94a3b8;
  display: block;
  margin-top: 4px;
}
.rights-file-selected {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
}

/* Buttons */
.rights-btn-submit,
.rights-btn-primary {
  background: #2563eb;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.rights-btn-cancel,
.rights-btn-subtle {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.rights-btn-danger {
  background: #dc2626;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

/* Audit timeline */
.rights-audit-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  padding-left: 14px;
  border-left: 2px solid #e2e8f0;
  margin-left: 6px;
}
.rights-audit-item {
  position: relative;
}
.rai-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #ffffff;
}
.rai-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.rai-action { font-weight: 700; color: #0f172a; }
.rai-time { color: #94a3b8; font-size: 11px; }
.rai-user { font-size: 12px; color: #475569; margin-top: 2px; }
.rai-note { font-size: 12px; color: #64748b; background: #f8fafc; padding: 4px 8px; border-radius: 4px; margin-top: 4px; }

/* Empty state */
.rights-empty-state {
  text-align: center;
  padding: 48px 20px !important;
  color: #64748b;
}
.rights-btn-clear-search,
.rights-btn-retry {
  background: #2563eb;
  color: #ffffff;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
}

/* Skeletons */
.rights-skel-box {
  background: #f1f5f9;
  border-radius: 4px;
  animation: rightsPulse 1.2s ease-in-out infinite;
}
@keyframes rightsPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ==========================================================================
   ZAVENTRA ADMIN PANEL — ACCOUNT MANAGEMENT SUITE
   1. Profile  |  2. Team (RBAC)  |  3. Settings (Personal Admin Settings)
   ========================================================================== */

/* Common Page Wrap */
.acct-page-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 16px 0 40px 0;
  box-sizing: border-box;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}
.acct-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-top: 4px;
}
.acct-title-group h1 {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
}
.acct-title-group p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
.acct-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Common Card */
.acct-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.acct-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.acct-card-head h2, .acct-card-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

/* Read-only Data Grid */
.acct-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px 28px;
}
.acct-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acct-info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}
.acct-info-val {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.acct-readonly-badge {
  font-size: 10px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Forms */
.acct-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}
.acct-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acct-field.full {
  grid-column: span 2;
}
.acct-field label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.acct-input, .acct-select {
  height: 40px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.acct-input:focus, .acct-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.acct-input[readonly], .acct-input:disabled {
  background: #f8fafc;
  color: #64748b;
  cursor: not-allowed;
  border-color: #e2e8f0;
}
.acct-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
}

/* Primary and Ghost Buttons */
.acct-btn-primary {
  height: 38px;
  padding: 0 18px;
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}
.acct-btn-primary:hover {
  background: #1d4ed8;
}
.acct-btn-ghost {
  height: 38px;
  padding: 0 16px;
  background: transparent;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
.acct-btn-ghost:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}
.acct-btn-danger {
  height: 38px;
  padding: 0 16px;
  background: #ef4444;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.acct-btn-danger:hover {
  background: #dc2626;
}

/* Status Badge */
.acct-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
}
.acct-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.acct-badge-active {
  background: #eff6ff;
  color: #2563eb;
}
.acct-badge-active .acct-badge-dot {
  background: #2563eb;
}
.acct-badge-pending {
  background: #fef3c7;
  color: #d97706;
}
.acct-badge-pending .acct-badge-dot {
  background: #d97706;
}
.acct-badge-suspended {
  background: #fee2e2;
  color: #ef4444;
}
.acct-badge-suspended .acct-badge-dot {
  background: #ef4444;
}

/* ── TEAM SUMMARY CARDS ── */
.team-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.team-stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.team-stat-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.06);
}
.team-stat-card.active {
  border-color: #2563eb;
  background: #f0f7ff;
}
.team-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 8px;
}
.team-stat-val {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

/* ── TEAM CONTROLS ROW ── */
.team-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.team-tabs {
  display: inline-flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
  gap: 4px;
}
.team-tab {
  padding: 6px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #64748b;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.team-tab:hover {
  color: #0f172a;
}
.team-tab.active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}
.team-search-box {
  position: relative;
  width: 260px;
}
.team-search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.team-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  font-family: inherit;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  box-sizing: border-box;
}
.team-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ── TEAM TABLE ── */
.team-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.team-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
.team-table th {
  padding: 10px 12px;
  background: #fafafa;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.team-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #0f172a;
}
.team-table th:first-child, .team-table td:first-child {
  padding-left: 16px;
}
.team-table th:last-child, .team-table td:last-child {
  padding-right: 16px;
  text-align: right;
}
.team-table tr:hover td {
  background: #f8fafc;
}
.team-member-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.team-initials-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.team-member-name {
  font-weight: 700;
  color: #0f172a;
}
.team-member-title {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 1px;
}
.team-action-trigger {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  color: #64748b;
}
.team-action-trigger:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Action Dropdown Menu */
.team-menu-popover {
  position: absolute;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  min-width: 170px;
  z-index: 50;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.team-menu-item {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  text-align: left;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-menu-item:hover {
  background: #f8fafc;
  color: #0f172a;
}
.team-menu-item.danger {
  color: #ef4444;
}
.team-menu-item.danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* ── SETTINGS PAGE ── */
.settings-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: flex-start;
}
.settings-nav {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.settings-nav-item:hover {
  background: #f8fafc;
  color: #0f172a;
}
.settings-nav-item.active {
  background: #2563eb;
  color: #ffffff;
}
.settings-nav-item.active svg {
  color: #ffffff;
}

/* Toggle Switch & Settings Rows */
.settings-toggle-group {
  display: flex;
  flex-direction: column;
}
.settings-toggle-row, .acct-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 20px;
}
.settings-toggle-row:last-child, .acct-toggle-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.settings-toggle-info, .acct-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-toggle-title, .acct-toggle-info h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.settings-toggle-desc, .acct-toggle-info p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}
.acct-btn-secondary {
  height: 36px;
  padding: 0 16px;
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.acct-btn-secondary:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}
.acct-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.acct-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.acct-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  transition: .2s;
  border-radius: 24px;
}
.acct-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;
}
.acct-switch input:checked + .acct-slider {
  background-color: #2563eb;
}
.acct-switch input:checked + .acct-slider:before {
  transform: translateX(20px);
}

/* Security Sessions & History */
.security-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
}
.security-item-row:last-child {
  border-bottom: none;
}
.sec-device-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  color: #475569;
  flex-shrink: 0;
}
.sec-item-details h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
}
.sec-item-details p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

/* ── ADD TEAM MEMBER (/team/new) MODULE ── */
.team-new-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: flex-start;
}
.team-new-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.team-new-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 20px;
}
.role-type-segmented {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
  width: fit-content;
  margin-bottom: 16px;
}
.role-type-option {
  display: flex;
  cursor: pointer;
}
.role-type-option input {
  display: none;
}
.role-type-pill {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  transition: all 0.15s ease;
  user-select: none;
}
.role-type-option input:checked + .role-type-pill {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.perm-builder-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.perm-builder-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.perm-module-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}
.perm-module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.perm-module-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0f172a;
  margin: 0;
}
.perm-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 14px 16px;
}
.perm-item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #334155;
  cursor: pointer;
  user-select: none;
}
.perm-item-label.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.perm-item-label input[type="checkbox"] {
  accent-color: #2563eb;
  cursor: pointer;
}
.perm-code {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace, ui-monospace;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 4px;
}
.perm-locked-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fee2e2;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
}
.perm-counter-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-left: 8px;
}
.perm-mode-banner {
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.perm-mode-banner svg {
  color: #2563eb;
  flex-shrink: 0;
}
.team-new-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}
.team-new-audit-note {
  font-size: 12.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.team-new-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 900px) {
  .team-new-layout {
    grid-template-columns: 1fr;
  }
  .team-new-side {
    position: static;
  }
  .team-new-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .team-new-buttons {
    justify-content: flex-end;
  }
}
.summary-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
.summary-stat-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.summary-stat-label {
  color: #64748b;
  font-weight: 500;
}
.summary-stat-val {
  color: #0f172a;
  font-weight: 700;
}

/* Modal and Drawers */
.acct-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.acct-modal {
  background: #ffffff;
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: modalScale 0.15s ease-out;
}
@keyframes modalScale {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.acct-modal-head {
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.acct-modal-head h3 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.acct-modal-body {
  padding: 24px;
  max-height: 80vh;
  overflow-y: auto;
}
.acct-modal-foot {
  padding: 16px 24px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Permission Matrix */
.perm-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.perm-module-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
}
.perm-module-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}
.perm-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #334155;
  padding: 4px 0;
  cursor: pointer;
}
.perm-check-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: #2563eb;
}

/* Responsive */
@media (max-width: 1024px) {
  .team-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .settings-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .team-summary-grid {
    grid-template-columns: 1fr;
  }
  .acct-form-grid {
    grid-template-columns: 1fr;
  }
  .acct-field.full {
    grid-column: span 1;
  }
  .team-controls-row {
    flex-direction: column;
    align-items: stretch;
  }
  .team-search-box {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   PLATFORM USERS MODULE (/admin#/users)
   ══════════════════════════════════════════════════════════════ */
.usr-page-wrap {
  padding: 20px 0 40px;
  max-width: 1440px;
  margin: 0 auto;
}

.usr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

.usr-header-left h1 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}

.usr-header-left p {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
}

.usr-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Summary Stat Cards */
.usr-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.usr-stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.usr-stat-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.usr-stat-card.active {
  border-color: #2563eb;
  background: #f8faff;
  box-shadow: 0 0 0 1px #2563eb;
}

.usr-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.usr-stat-count {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  font-family: 'DM Mono', monospace, sans-serif;
}

.usr-stat-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.usr-stat-indicator.total { background: #64748b; }
.usr-stat-indicator.active { background: #16a34a; }
.usr-stat-indicator.pending { background: #f59e0b; }
.usr-stat-indicator.suspended { background: #ef4444; }

/* Filter Tabs & Controls Row */
.usr-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.usr-tabs-wrap {
  display: flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
}

.usr-tab-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.usr-tab-btn:hover {
  color: #0f172a;
}

.usr-tab-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.usr-tab-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #475569;
}

.usr-tab-btn.active .usr-tab-count {
  background: #eff6ff;
  color: #2563eb;
}

.usr-tools-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.usr-search-input-wrap {
  position: relative;
  min-width: 240px;
  max-width: 340px;
  flex: 1;
}

.usr-search-input-wrap svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.usr-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.usr-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.usr-adv-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.usr-adv-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

.usr-adv-badge {
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 9999px;
  font-weight: 700;
}

/* Active Filter Chips */
.usr-chips-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.usr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #334155;
  font-weight: 500;
}

.usr-chip-close {
  cursor: pointer;
  color: #94a3b8;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
}

.usr-chip-close:hover {
  color: #ef4444;
}

.usr-chips-clear {
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 6px;
}

.usr-chips-clear:hover {
  text-decoration: underline;
}

/* Bulk Actions Toolbar */
.usr-bulk-bar {
  background: #1e293b;
  color: #ffffff;
  border-radius: 8px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
  animation: fadeIn 0.15s ease-out;
}

.usr-bulk-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
}

.usr-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.usr-bulk-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.usr-bulk-btn.light {
  background: #334155;
  color: #ffffff;
}
.usr-bulk-btn.light:hover {
  background: #475569;
}

.usr-bulk-btn.danger {
  background: #ef4444;
  color: #ffffff;
}
.usr-bulk-btn.danger:hover {
  background: #dc2626;
}

.usr-bulk-btn.success {
  background: #16a34a;
  color: #ffffff;
}
.usr-bulk-btn.success:hover {
  background: #15803d;
}

/* Table Card & Elements */
.usr-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.usr-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.usr-table th {
  background: #f8fafc;
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.usr-table td {
  padding: 13px 16px;
  font-size: 13px;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.usr-table tr:hover td {
  background: #fbfcfe;
}

.usr-table tr:last-child td {
  border-bottom: none;
}

/* User cell */
.usr-cell-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.usr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  border: 1px solid #dbeafe;
}

.usr-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.usr-name-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.usr-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usr-code-badge {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: #64748b;
  letter-spacing: -0.02em;
}

/* Badges */
.usr-type-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.usr-type-pill.master { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; font-weight: 700; }
.usr-type-pill.standard { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; font-weight: 600; }
.usr-type-pill.advance { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; font-weight: 600; }

.usr-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
}

.usr-status-pill.active { background: #dcfce7; color: #15803d; }
.usr-status-pill.pending { background: #fef3c7; color: #b45309; }
.usr-status-pill.suspended { background: #fee2e2; color: #b91c1c; }

.usr-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.usr-status-pill.active .usr-status-dot { background: #16a34a; }
.usr-status-pill.pending .usr-status-dot { background: #f59e0b; }
.usr-status-pill.suspended .usr-status-dot { background: #ef4444; }

/* Action Buttons */
.usr-actions-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.usr-btn-view {
  height: 28px;
  padding: 0 10px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.usr-btn-view:hover {
  background: #dbeafe;
  color: #1d4ed8;
}

.usr-btn-dots {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.usr-btn-dots:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
}

/* Pagination Footer */
.usr-pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
  font-size: 12.5px;
  color: #64748b;
  flex-wrap: wrap;
  gap: 12px;
}

.usr-page-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.usr-page-btn {
  padding: 5px 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.usr-page-btn:hover:not(:disabled) {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

.usr-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Slide-over Filter Drawer */
.usr-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9998;
  display: flex;
  justify-content: flex-end;
  animation: fadeIn 0.15s ease-out;
}

.usr-drawer {
  width: 380px;
  max-width: 90vw;
  height: 100%;
  background: #ffffff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  animation: slideDrawer 0.2s ease-out;
}

@keyframes slideDrawer {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.usr-drawer-head {
  padding: 18px 24px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.usr-drawer-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.usr-drawer-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.usr-drawer-foot {
  padding: 16px 24px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.usr-filter-group label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.usr-filter-select, .usr-filter-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  box-sizing: border-box;
}

.usr-filter-select:focus, .usr-filter-input:focus {
  border-color: #2563eb;
  outline: none;
}

@media (max-width: 1024px) {
  .usr-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .usr-summary-grid {
    grid-template-columns: 1fr;
  }
  .usr-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .usr-controls-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .usr-tools-right {
    flex-direction: column;
    align-items: stretch;
  }
  .usr-search-input-wrap {
    max-width: 100%;
  }
}




/* ===== Subtle Modal Overlay for Admin Modal System ===== */
#zmgModal .zmg-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  background: rgba(15, 23, 42, 0.28) !important;
  backdrop-filter: blur(1px) !important;
  -webkit-backdrop-filter: blur(1px) !important;
  z-index: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN LABELS REDESIGN & VERIFICATION DRAWER
   ═══════════════════════════════════════════════════════════════ */
.lab-page-wrap {
  padding: 16px 0 32px;
}
.lab-header {
  margin-bottom: 20px;
}
.lab-header h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 4px;
  color: #0f172a;
}
.lab-header p {
  color: #64748b;
  font-size: 13px;
  margin: 0;
}
.lab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.lab-search-wrap {
  position: relative;
  flex: 1;
  max-width: 460px;
}
.lab-search-input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lab-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.lab-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.lab-filter-select {
  height: 40px;
  padding: 0 32px 0 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat calc(100% - 10px) center;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  outline: none;
  cursor: pointer;
  appearance: none;
}
.lab-card {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.lab-table-wrap {
  overflow-x: auto;
  width: 100%;
}
.lab-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
.lab-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.lab-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
}
.lab-table tr:hover td {
  background: #f8fafc;
}
.lab-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lab-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.lab-ref-badge {
  font-family: 'DM Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  background: #f1f5f9;
  color: #334155;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}
.lab-lin-badge {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: #64748b;
}
.lab-verify-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  background: #2563eb;
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.lab-verify-btn:hover {
  background: #1d4ed8;
}
.lab-view-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: #f1f5f9;
  color: #334155;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background .15s;
}
.lab-view-btn:hover {
  background: #e2e8f0;
}

/* Slide-over Drawer */
.lab-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
  animation: labFadeIn .2s ease;
}
.lab-drawer {
  width: 540px;
  max-width: 92vw;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  animation: labSlideIn .25s ease;
}
@keyframes labFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes labSlideIn {
  from { transform: translateX(100%); } to { transform: translateX(0); }
}
.lab-drawer-head {
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lab-drawer-title-area {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lab-drawer-close {
  background: none;
  border: none;
  font-size: 22px;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
.lab-drawer-close:hover {
  color: #0f172a;
  background: #f1f5f9;
}
.lab-drawer-tabs {
  display: flex;
  padding: 0 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
.lab-drawer-tab {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.lab-drawer-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}
.lab-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.lab-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: #f8fafc;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-bottom: 20px;
}
.lab-info-item label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.lab-info-item span {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.lab-checklist-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  margin-bottom: 20px;
}
.lab-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
}
.lab-checklist-item:last-child {
  border-bottom: none;
}
.lab-check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.lab-doc-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  margin-bottom: 10px;
}
.lab-doc-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #0f172a;
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.lab-doc-download-btn:hover {
  background: #1e293b;
}
.lab-drawer-foot {
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

/* ═════════════════════════════════════════════════════════════════════════
   BRANDS MANAGEMENT & CREATE API APPLICATION DRAWER STYLES
   ═════════════════════════════════════════════════════════════════════════ */
.brand-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
  animation: labFadeIn .2s ease;
}
.brand-drawer {
  width: 580px;
  max-width: 95vw;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 28px rgba(0,0,0,0.14);
  animation: labSlideIn .25s ease;
}
.brand-drawer-head {
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}
.brand-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.brand-drawer-foot {
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
}
.brand-selected-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 20px;
}
.brand-metric-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.brand-metric-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.brand-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.brand-metric-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.brand-metric-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
.brand-metric-badge.pass {
  background: #dcfce7;
  color: #15803d;
}
.brand-metric-badge.fail {
  background: #fee2e2;
  color: #b91c1c;
}
.brand-metric-values {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.brand-metric-val {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}
.brand-metric-target {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}
.brand-metric-note {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 4px;
}
.brand-result-banner {
  border-radius: 10px;
  padding: 16px;
  margin: 18px 0;
  display: flex;
  gap: 12px;
}
.brand-result-banner.pass {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.brand-result-banner.fail {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.brand-override-box {
  background: #fefce8;
  border: 1px solid #fef08a;
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px;
}
.brand-cred-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.brand-cred-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.brand-cred-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: .5px;
}
.brand-cred-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  word-break: break-all;
  background: #ffffff;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}