/* ===============================================================
   ZAVENTRA MUSIC GROUP — GLOBAL DESIGN SYSTEM
   Single source of truth for ALL UI components
   =============================================================== */

:root {
  --sp-0:0;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
  --section-gap:20px;--block-gap:16px;--element-gap:12px;--tight-gap:8px;--micro-gap:4px;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --text-xs:11px;--text-sm:12px;--text-base:13px;--text-md:14px;--text-lg:16px;--text-xl:18px;--text-2xl:22px;--text-3xl:30px;
  --weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;
  --leading-tight:1.2;--leading-normal:1.4;--leading-relaxed:1.5;
  --color-bg:#fff;--color-surface:#f9fafb;--color-border:#e5e7eb;--color-border-light:#f3f4f6;
  --color-text:#111827;--color-text-secondary:#6b7280;--color-text-muted:#9ca3af;
  --color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-light:#eff6ff;
  --color-success:#16a34a;--color-success-light:#f0fdf4;
  --color-warning:#f59e0b;--color-warning-light:#fffbeb;
  --color-danger:#dc2626;--color-danger-light:#fef2f2;
  --radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:12px;--radius-2xl:16px;--radius-full:9999px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);--shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.04);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.08),0 8px 10px -6px rgba(0,0,0,.04);
  --shadow-2xl:0 24px 64px rgba(0,0,0,.12);
  --transition-fast:140ms cubic-bezier(.16,1,.3,1);--transition-base:200ms cubic-bezier(.16,1,.3,1);--transition-slow:300ms cubic-bezier(.16,1,.3,1);
  --z-base:100;--z-sticky:500;--z-dropdown:1000;--z-tooltip:2000;--z-drawer:3000;--z-modal-backdrop:4000;--z-modal:4100;--z-critical:4200;--z-toast:5000;
  --input-height:42px;--input-height-sm:36px;--input-height-lg:48px;
  --btn-height:42px;--btn-height-sm:36px;--btn-height-lg:48px;
  --header-height:60px;--sidebar-width:208px;--table-row-height:48px;
  --zmg-btn-height-sm:var(--btn-height-sm);--zmg-btn-height-md:var(--btn-height);--zmg-btn-height-lg:var(--btn-height-lg);
  --zmg-btn-padding-sm:0 14px;--zmg-btn-padding-md:0 20px;--zmg-btn-padding-lg:0 28px;
  --zmg-btn-radius:var(--radius-lg);--zmg-btn-font-size:var(--text-base);--zmg-btn-font-weight:var(--weight-semibold);
  --zmg-btn-transition:all var(--transition-base);--zmg-btn-shadow-focus:0 0 0 3px rgba(37,99,235,.25);
}

/* === BOX MODEL === */
*,*::before,*::after{box-sizing:border-box!important}
html{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}
body{margin:0;font-family:var(--font-family);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;border-spacing:0;width:100%}
h1,h2,h3,h4,h5,h6,p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}

/* === TYPOGRAPHY === */
.zmg-text-xs{font-size:var(--text-xs);line-height:var(--leading-normal)}
.zmg-text-sm{font-size:var(--text-sm);line-height:var(--leading-normal)}
.zmg-text-base{font-size:var(--text-base);line-height:var(--leading-normal)}
.zmg-text-md{font-size:var(--text-md);line-height:var(--leading-normal)}
.zmg-text-lg{font-size:var(--text-lg);line-height:var(--leading-tight)}
.zmg-text-xl{font-size:var(--text-xl);line-height:var(--leading-tight)}
.zmg-text-2xl{font-size:var(--text-2xl);line-height:var(--leading-tight)}
.zmg-text-3xl{font-size:var(--text-3xl);line-height:var(--leading-tight)}

/* === LAYOUT === */
.zmg-page{padding:var(--sp-5);max-width:1500px;margin:0 auto}
.zmg-page-header{margin-bottom:var(--section-gap)}
.zmg-page-title{font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:-0.8px;line-height:var(--leading-tight);color:var(--color-text);margin:0}
.zmg-page-subtitle{font-size:var(--text-md);color:var(--color-text-secondary);margin-top:var(--sp-1)}
.zmg-section{margin-bottom:var(--section-gap)}
.zmg-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--block-gap)}
.zmg-section-title{font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:-0.3px;margin:0}
.zmg-content-flow{display:flex;flex-direction:column;gap:var(--block-gap)}
.zmg-content-flow>.zmg-filters{order:1}
.zmg-content-flow>.zmg-search-area{order:2}
.zmg-content-flow>.zmg-content-area{order:3}

/* === SEARCH === */
.zmg-search{position:relative;display:flex;align-items:center;width:100%;height:var(--input-height);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color var(--transition-base),box-shadow var(--transition-base)}
.zmg-search:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.zmg-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--color-text-muted);pointer-events:none;flex-shrink:0}
.zmg-search-icon svg{width:16px;height:16px}
.zmg-search input{width:100%;height:100%;padding:0 14px 0 40px;border:none;background:transparent;font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--color-text);outline:none}
.zmg-search input::placeholder{color:var(--color-text-muted);font-weight:var(--weight-normal)}
.zmg-search input::-webkit-search-cancel-button,.zmg-search input::-webkit-search-decoration{-webkit-appearance:none}
.zmg-toolbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.zmg-toolbar .zmg-search{flex:1;min-width:200px}

/* === INPUT/SELECT/TEXTAREA === */
.zmg-input,.zmg-select,.zmg-textarea{width:100%;height:var(--input-height);padding:0 14px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--color-text);outline:none;transition:border-color var(--transition-base),box-shadow var(--transition-base)}
.zmg-input:focus,.zmg-select:focus,.zmg-textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.zmg-input::placeholder,.zmg-textarea::placeholder{color:var(--color-text-muted);font-weight:var(--weight-normal)}
.zmg-input:disabled,.zmg-select:disabled,.zmg-textarea:disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface)}
.zmg-select{appearance:none;background-image: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='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
.zmg-textarea{height:auto;min-height:80px;padding:12px 14px;resize:vertical}
.zmg-input-sm,.zmg-select-sm{height:var(--input-height-sm);font-size:var(--text-sm);padding:0 12px}
.zmg-form-group{display:flex;flex-direction:column;gap:var(--sp-2)}
.zmg-form-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-secondary);letter-spacing:0.2px}
.zmg-form-hint{font-size:var(--text-xs);color:var(--color-text-muted)}
.zmg-form-error{font-size:var(--text-xs);color:var(--color-danger);font-weight:var(--weight-medium)}

/* === BUTTONS === */
.zmg-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--btn-height);padding:0 20px;font-size:var(--text-base);font-weight:var(--weight-semibold);line-height:1;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);border:1px solid transparent;white-space:nowrap;outline:none;text-decoration:none;user-select:none}
.zmg-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.zmg-btn:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.zmg-btn:active:not(:disabled){transform:scale(.98) translateY(1px)}
.zmg-btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.zmg-btn-primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover);box-shadow:var(--shadow-sm)}
.zmg-btn-secondary{background:var(--color-bg);color:var(--color-text);border-color:var(--color-border)}
.zmg-btn-secondary:hover:not(:disabled){background:var(--color-surface);border-color:#d1d5db}
.zmg-btn-danger{background:var(--color-bg);color:var(--color-danger);border-color:#fecaca}
.zmg-btn-danger:hover:not(:disabled){background:var(--color-danger-light);border-color:#fca5a5}
.zmg-btn-ghost{background:transparent;color:var(--color-primary);border-color:transparent}
.zmg-btn-ghost:hover:not(:disabled){background:var(--color-primary-light)}
.zmg-btn-text{background:transparent;color:var(--color-primary);border-color:transparent;padding:0 12px}
.zmg-btn-text:hover:not(:disabled){background:var(--color-primary-light)}
.zmg-btn-sm{height:var(--btn-height-sm);padding:0 14px;font-size:var(--text-sm);border-radius:var(--radius-md)}
.zmg-btn-lg{height:var(--btn-height-lg);padding:0 28px;font-size:var(--text-md)}
.zmg-btn-full{width:100%}
.zmg-btn-icon{width:var(--btn-height);padding:0}
.zmg-btn-icon.zmg-btn-sm{width:var(--btn-height-sm)}

/* Legacy button compat */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--btn-height);padding:0 20px;font:var(--weight-semibold) var(--text-base)/1 var(--font-family);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);border:1px solid transparent;white-space:nowrap;outline:none;text-decoration:none;background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);box-shadow:var(--shadow-sm)}
.primary:active:not(:disabled){transform:scale(.98) translateY(1px)}
.primary:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.primary:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.secondary{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--btn-height);padding:0 20px;font:var(--weight-semibold) var(--text-base)/1 var(--font-family);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);border:1px solid transparent;white-space:nowrap;outline:none;text-decoration:none;background:var(--color-bg);color:var(--color-text);border-color:var(--color-border)}
.secondary:hover{background:var(--color-surface);border-color:#d1d5db}
.secondary:active:not(:disabled){transform:scale(.98) translateY(1px)}
.secondary:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.text-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--btn-height);padding:0 14px;font:var(--weight-semibold) var(--text-base)/1 var(--font-family);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);border:1px solid transparent;white-space:nowrap;outline:none;background:transparent;color:var(--color-primary)}
.text-btn:hover{background:var(--color-primary-light)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0}
.icon-btn:hover{background:var(--color-surface);color:var(--color-text);border-color:#d1d5db}
.icon-btn:active{transform:scale(.96)}
.icon-btn svg{width:16px;height:16px}

/* === FILTER CHIPS === */
.zmg-filters{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.zmg-filter-chip{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;user-select:none}
.zmg-filter-chip:hover{background:var(--color-surface);border-color:#d1d5db;color:var(--color-text)}
.zmg-filter-chip.active,.zmg-filter-chip.zmg-active{background:var(--color-primary);color:#fff;border-color:var(--color-primary);box-shadow:var(--shadow-xs)}
.zmg-filter-chip.active:hover,.zmg-filter-chip.zmg-active:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.zmg-filter-chip:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.25);outline:none}
.zmg-filter-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--block-gap)}

/* === TABS === */
.zmg-tabs{display:flex;align-items:center;gap:var(--sp-1);border-bottom:1px solid var(--color-border);margin-bottom:var(--block-gap);overflow-x:auto;scrollbar-width:none}
.zmg-tabs::-webkit-scrollbar{display:none}
.zmg-tab{display:inline-flex;align-items:center;gap:var(--sp-2);height:44px;padding:0 16px;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);border-bottom:2px solid transparent;cursor:pointer;transition:all var(--transition-base);white-space:nowrap;flex-shrink:0}
.zmg-tab:hover{color:var(--color-text);background:var(--color-surface)}
.zmg-tab.active,.zmg-tab.zmg-active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:var(--weight-semibold)}
.zmg-tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--radius-sm)}
.zmg-tab-count{font-size:var(--text-xs);background:var(--color-surface);padding:1px 6px;border-radius:var(--radius-full);color:var(--color-text-muted);transition:background var(--transition-fast),color var(--transition-fast)}
.zmg-tab.active .zmg-tab-count,.zmg-tab.zmg-active .zmg-tab-count{background:rgba(37,99,235,.1);color:var(--color-primary)}

/* === CARDS === */
.zmg-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}
.zmg-card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4);border-bottom:1px solid var(--color-border)}
.zmg-card-title{font-size:var(--text-lg);font-weight:var(--weight-bold);margin:0}
.zmg-card-body{padding:var(--sp-4)}
.zmg-card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-4);border-top:1px solid var(--color-border)}
.zmg-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--block-gap);margin-bottom:var(--block-gap)}
.zmg-stat-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--sp-4);display:flex;flex-direction:column;justify-content:space-between;min-height:96px;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}
.zmg-stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#d1d5db}
.zmg-stat-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.6px}
.zmg-stat-value{font-size:32px;font-weight:var(--weight-extrabold);letter-spacing:-1px;line-height:1;color:var(--color-text)}

/* === TABLES === */
.zmg-table-wrap{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow-x:auto;-webkit-overflow-scrolling:touch}
.zmg-table{width:100%;border-collapse:collapse}
.zmg-table thead{position:sticky;top:0;z-index:2;background:var(--color-surface)}
.zmg-table th{padding:var(--sp-3) var(--sp-4);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.6px;text-align:left;border-bottom:1px solid var(--color-border);white-space:nowrap;background:var(--color-surface)}
.zmg-table th.sortable{cursor:pointer;user-select:none;transition:color var(--transition-fast)}
.zmg-table th.sortable:hover{color:var(--color-text)}
.zmg-table td{padding:var(--sp-3) var(--sp-4);font-size:var(--text-md);color:var(--color-text);border-bottom:1px solid var(--color-border-light);vertical-align:middle}
.zmg-table tbody tr{transition:background var(--transition-fast)}
.zmg-table tbody tr:hover{background:var(--color-surface)}
.zmg-table tbody tr:last-child td{border-bottom:none}
.zmg-table-compact th,.zmg-table-compact td{padding:var(--sp-2) var(--sp-3)}

/* === PAGINATION === */
.zmg-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-text-secondary)}
.zmg-pagination-info{font-size:var(--text-sm);color:var(--color-text-secondary)}
.zmg-pagination-btns{display:flex;align-items:center;gap:var(--sp-1)}
.zmg-page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}
.zmg-page-btn:hover{background:var(--color-surface);border-color:#d1d5db;color:var(--color-text)}
.zmg-page-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.zmg-page-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

/* === MODALS === */
.zmg-modal-overlay{position:fixed;inset:0;z-index:var(--z-modal-backdrop);background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity var(--transition-slow),visibility var(--transition-slow)}
.zmg-modal-overlay.open{opacity:1;visibility:visible}
.zmg-modal-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);width:100%;max-width:720px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;transform:scale(.96);transition:transform var(--transition-slow)}
.zmg-modal-overlay.open .zmg-modal-card{transform:scale(1)}
.zmg-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-6) var(--sp-8) var(--sp-4);border-bottom:1px solid var(--color-border)}
.zmg-modal-head-text{flex:1}
.zmg-modal-kicker{font:var(--weight-medium) 9px var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--sp-1)}
.zmg-modal-head h2{font-size:var(--text-xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);margin:0}
.zmg-modal-head p{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--sp-1)}
.zmg-modal-close{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-md);border:0;background:transparent;color:var(--color-text-muted);cursor:pointer;flex-shrink:0;transition:all var(--transition-base)}
.zmg-modal-close:hover{background:var(--color-surface);color:var(--color-text)}
.zmg-modal-body{padding:var(--sp-6) var(--sp-8);overflow-y:auto;flex:1}
.zmg-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-8) var(--sp-6);border-top:1px solid var(--color-border)}
.zmg-modal-footer-left,.zmg-modal-footer-right{display:flex;gap:var(--sp-2)}

/* === DRAWERS === */
.zmg-drawer-overlay{position:fixed;inset:0;z-index:var(--z-drawer);background:rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity var(--transition-slow),visibility var(--transition-slow)}
.zmg-drawer-overlay.open{opacity:1;visibility:visible}
.zmg-drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;z-index:calc(var(--z-drawer) + 1);background:var(--color-bg);box-shadow:-4px 0 24px rgba(0,0,0,.12);transform:translateX(100%);transition:transform var(--transition-slow);display:flex;flex-direction:column}
.zmg-drawer.open{transform:translateX(0)}
.zmg-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border);flex-shrink:0}
.zmg-drawer-header h3{font-size:var(--text-lg);font-weight:var(--weight-bold);margin:0}
.zmg-drawer-body{flex:1;overflow-y:auto;padding:var(--sp-5)}
.zmg-drawer-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--color-border);flex-shrink:0}
.zmg-drawer-wide{width:720px}

/* === STATUS PILLS === */
.zmg-pill,.status-pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;font-size:var(--text-xs);font-weight:var(--weight-semibold);border-radius:var(--radius-full);white-space:nowrap;line-height:1}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;font-size:var(--text-xs);font-weight:var(--weight-semibold);border-radius:var(--radius-full);white-space:nowrap;line-height:1}

/* === EMPTY/LOADING/ERROR STATES === */
.zmg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-12) var(--sp-6);text-align:center;color:var(--color-text-secondary)}
.zmg-empty-icon{width:48px;height:48px;margin-bottom:var(--sp-4);color:var(--color-text-muted);opacity:.5}
.zmg-empty-title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--color-text);margin-bottom:var(--sp-2)}
.zmg-empty-desc{font-size:var(--text-md);color:var(--color-text-secondary);max-width:400px;margin-bottom:var(--sp-5)}

.zmg-loading{display:flex;align-items:center;justify-content:center;padding:var(--sp-12) var(--sp-6);color:var(--color-text-secondary);font-size:var(--text-md)}
.zmg-spinner{width:24px;height:24px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:zmgSpin .6s linear infinite}
@keyframes zmgSpin{to{transform:rotate(360deg)}}

.zmg-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-12) var(--sp-6);text-align:center}
.zmg-error-icon{width:48px;height:48px;margin-bottom:var(--sp-4);color:var(--color-danger)}
.zmg-error-title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--color-text);margin-bottom:var(--sp-2)}
.zmg-error-desc{font-size:var(--text-md);color:var(--color-text-secondary);max-width:400px;margin-bottom:var(--sp-5)}

/* === SKELETON === */
.zmg-skel{background:linear-gradient(90deg,var(--color-surface) 25%,var(--color-border) 50%,var(--color-surface) 75%);background-size:200% 100%;animation:zmgShimmer 1.5s infinite;border-radius:var(--radius-md)}
.zmg-skel-text{height:14px;margin-bottom:var(--sp-2)}
.zmg-skel-text.short{width:40%}
.zmg-skel-text.medium{width:65%}
.zmg-skel-text.long{width:90%}
.zmg-skel-circle{width:40px;height:40px;border-radius:50%}
.zmg-skel-rect{height:80px;border-radius:var(--radius-lg)}
.zmg-skel-card{height:180px;border-radius:var(--radius-xl);margin-bottom:var(--block-gap)}
.zmg-skel-row{height:var(--table-row-height);border-radius:var(--radius-md);margin-bottom:var(--tight-gap)}
.zmg-skel-chart{height:240px;border-radius:var(--radius-xl);margin-bottom:var(--block-gap)}
@keyframes zmgShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* === ALERTS === */
.zmg-alert{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:var(--leading-relaxed)}
.zmg-alert-info{background:var(--color-primary-light);color:var(--color-primary);border:1px solid rgba(37,99,235,.2)}
.zmg-alert-success{background:var(--color-success-light);color:var(--color-success);border:1px solid rgba(22,163,74,.2)}
.zmg-alert-warning{background:var(--color-warning-light);color:#92400e;border:1px solid rgba(245,158,11,.2)}
.zmg-alert-danger{background:var(--color-danger-light);color:var(--color-danger);border:1px solid rgba(220,38,38,.2)}
.zmg-alert-title{font-weight:var(--weight-semibold);margin-bottom:var(--micro-gap)}

/* === RESPONSIVE === */
@media(max-width:1366px){.zmg-page{padding:var(--sp-4)}}
@media(max-width:1024px){
  .zmg-stat-grid{grid-template-columns:repeat(2,1fr)}
  .zmg-page{padding:var(--sp-4)}
  .zmg-card-header{flex-wrap:wrap;gap:var(--sp-3)}
}
@media(max-width:768px){
  .zmg-page{padding:var(--sp-3)}
  .zmg-page-title{font-size:var(--text-2xl)}
  .zmg-stat-grid{grid-template-columns:1fr;gap:var(--tight-gap)}
  .zmg-toolbar{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
  .zmg-toolbar .zmg-search{min-width:100%}
  .zmg-tabs{gap:0;padding-bottom:2px}
  .zmg-tab{padding:0 12px;font-size:var(--text-xs);height:40px}
  .zmg-modal-overlay{padding:var(--sp-3);align-items:flex-end}
  .zmg-modal-card{max-width:100%;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;max-height:88vh;transform:translateY(100%)}
  .zmg-modal-overlay.open .zmg-modal-card{transform:translateY(0)}
  .zmg-drawer{width:100%;max-width:100%}
  .zmg-filter-row{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:var(--sp-2)}
  .zmg-table th,.zmg-table td{padding:10px 12px;font-size:var(--text-sm)}
  .zmg-btn{height:var(--btn-height-sm);padding:0 14px}
  .zmg-pagination{flex-direction:column;gap:var(--sp-2);align-items:center}
}
@media(max-width:480px){
  .zmg-page{padding:var(--sp-2)}
  .zmg-page-title{font-size:var(--text-xl)}
  .zmg-modal-overlay{padding:0}
  .zmg-modal-card{border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;max-height:92vh}
  .zmg-btn{width:100%}
  .zmg-toolbar .zmg-btn{width:auto}
}

/* === SCROLL LOCK === */
body.zmg-scroll-locked{overflow:hidden!important}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* === GLOBAL OVERRIDES FOR EXISTING COMPONENTS === */
/* Force consistent height on all search inputs */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]) {
  height: var(--input-height) !important;
  padding: 0 14px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-bg) !important;
  font-size: var(--text-md) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--color-text) !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base) !important;
}

input[type="search"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
}

input::placeholder {
  color: var(--color-text-muted) !important;
  font-weight: var(--weight-normal) !important;
}

/* Force consistent select */
select {
  height: var(--input-height) !important;
  padding: 0 36px 0 14px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-bg) !important;
  font-size: var(--text-md) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--color-text) !important;
  appearance: none !important;
  background-image: 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='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
}

select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
}

/* Force consistent textarea */
textarea {
  min-height: 80px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-bg) !important;
  font-size: var(--text-md) !important;
  color: var(--color-text) !important;
  resize: vertical !important;
}

textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
}

/* Force consistent tables */
table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

th {
  padding: var(--sp-3) var(--sp-4) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--color-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--color-border) !important;
  white-space: nowrap !important;
  background: var(--color-surface) !important;
}

td {
  padding: var(--sp-3) var(--sp-4) !important;
  font-size: var(--text-md) !important;
  color: var(--color-text) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  vertical-align: middle !important;
}

tbody tr {
  transition: background var(--transition-fast) !important;
}

tbody tr:hover {
  background: var(--color-surface) !important;
}

tbody tr:last-child td {
  border-bottom: none !important;
}

/* Force consistent card */
.card,
.adm-card {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--sp-4) !important;
}

/* Force consistent status pills */
.status-pill,
.pill {
  display: inline-flex !important;
  align-items: center !important;
  height: 26px !important;
  padding: 0 10px !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold) !important;
  border-radius: var(--radius-full) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Force consistent pagination */
.adm-pagination {
  width: 100% !important;
  margin-top: 16px !important;
}

.adm-pagination-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding: 12px 0 4px !important;
}

.pag-info {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary, #6b7280) !important;
  white-space: nowrap !important;
}

.pag-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.pag-rows {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary, #6b7280) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.pag-select {
  height: 34px !important;
  padding: 0 28px 0 10px !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 8px !important;
  background-color: var(--color-bg, #fff) !important;
  color: var(--color-text, #111827) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  outline: none !important;
  appearance: none !important;
  background-image: 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='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.pagination-btns,
.adm-pagination .pag-btns,
.cat-page-controls {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.pagination-btns button,
.adm-pagination .pag-btn,
.cat-page-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary, #374151) !important;
  background: var(--color-bg, #fff) !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  white-space: nowrap !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.pagination-btns button:hover:not(:disabled),
.adm-pagination .pag-btn:hover:not(:disabled),
.cat-page-btn:hover:not(:disabled) {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.pagination-btns button.active,
.adm-pagination .pag-btn.active,
.cat-page-btn.active {
  background: #3b82f6 !important;
  color: #fff !important;
  border-color: #3b82f6 !important;
  font-weight: 700 !important;
  cursor: default !important;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.25) !important;
}

.pagination-btns button:disabled,
.pagination-btns button[disabled],
.adm-pagination .pag-btn:disabled,
.adm-pagination .pag-btn[disabled],
.cat-page-btn:disabled,
.cat-page-btn[disabled] {
  opacity: 0.45 !important;
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Force consistent empty states */
.empty-state,
.adm-empty,
.cat-empty,
.yt-empty-state,
.artists-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--sp-12) var(--sp-6) !important;
  text-align: center !important;
  color: var(--color-text-secondary) !important;
}

/* Force consistent spinners */
.spinner,
.zmg-spinner {
  width: 24px !important;
  height: 24px !important;
  border: 3px solid var(--color-border) !important;
  border-top-color: var(--color-primary) !important;
  border-radius: 50% !important;
  animation: zmgSpin .6s linear infinite !important;
}

/* Spacing utilities */
.zmg-mt-0 { margin-top: 0 !important; }
.zmg-mt-1 { margin-top: var(--sp-1) !important; }
.zmg-mt-2 { margin-top: var(--sp-2) !important; }
.zmg-mt-3 { margin-top: var(--sp-3) !important; }
.zmg-mt-4 { margin-top: var(--sp-4) !important; }
.zmg-mt-5 { margin-top: var(--sp-5) !important; }
.zmg-mt-6 { margin-top: var(--sp-6) !important; }
.zmg-mb-0 { margin-bottom: 0 !important; }
.zmg-mb-1 { margin-bottom: var(--sp-1) !important; }
.zmg-mb-2 { margin-bottom: var(--sp-2) !important; }
.zmg-mb-3 { margin-bottom: var(--sp-3) !important; }
.zmg-mb-4 { margin-bottom: var(--sp-4) !important; }
.zmg-mb-5 { margin-bottom: var(--sp-5) !important; }
.zmg-mb-6 { margin-bottom: var(--sp-6) !important; }
.zmg-gap-1 { gap: var(--sp-1) !important; }
.zmg-gap-2 { gap: var(--sp-2) !important; }
.zmg-gap-3 { gap: var(--sp-3) !important; }
.zmg-gap-4 { gap: var(--sp-4) !important; }
.zmg-gap-5 { gap: var(--sp-5) !important; }
.zmg-gap-6 { gap: var(--sp-6) !important; }

/* === ROBUST GLOBAL OVERLAY SYSTEM === */
/* Ensures ALL modals, drawers, and backdrops cover the FULL viewport */
/* regardless of parent constraints, stacking contexts, or overflow */

/* Modal containers - must be direct children of body */
#zmgModal,
#modal,
.zmg-modal-overlay,
.zmg-portal,
.zmg-drawer-overlay,
.zmg-drawer,
.adm-drawer-overlay,
.adm-drawer,
.artist-drawer-overlay,
.artist-drawer,
.drawer-overlay,
.drawer-panel,
.dr-wrap,
.dr-overlay,
.dr-panel,
.rw-modal-overlay,
.rw-modal,
.se-modal,
.logout-overlay,
#detailOverlay,
#detailDrawer,
#distOverlay,
#distDrawer {
  position: fixed !important;
}

/* Full viewport coverage for all backdrops/overlays */
#modal,
.zmg-modal-overlay,
.zmg-portal,
.zmg-drawer-overlay,
.adm-drawer-overlay,
.artist-drawer-overlay,
.drawer-overlay,
.dr-wrap,
.dr-overlay,
.rw-modal-overlay,
.se-modal,
.logout-overlay,
#detailOverlay,
#distOverlay {
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* #zmgModal: fixed full-viewport overlay with padding for centering */
#zmgModal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
  z-index: var(--z-modal) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: transparent !important;
}
#zmgModal .zmg-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-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;
}
#zmgModal .zmg-modal-card {
  position: relative !important;
  z-index: 1 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.12) !important;
  width: 100% !important;
  max-width: 720px !important;
  max-height: calc(100vh - 48px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
#zmgModal .zmg-modal-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 24px 32px !important;
}

/* Drawers - full height, attached to viewport edge */
.zmg-drawer,
.adm-drawer,
.artist-drawer,
.drawer-panel,
.dr-panel {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 520px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
}

/* Wide drawer variant */
.adm-drawer-wide {
  width: 780px !important;
}

/* Modal cards - centered in viewport */
#zmgModal .zmg-modal-card,
#modal .modal-card,
.zmg-modal-card,
.zmg-portal-dialog,
.zmg-portal-modal {
  position: relative !important;
  z-index: 1 !important;
  margin: auto !important;
}

/* Modal overlay backgrounds - full viewport */
#modal .modal-overlay,
.zmg-portal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Prevent body scroll when any overlay is open */
body.zmg-scroll-locked,
body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Ensure overlays escape all stacking contexts */
#zmgModal,
#modal,
.zmg-modal-overlay,
.zmg-portal,
.zmg-drawer-overlay,
.zmg-drawer,
.adm-drawer-overlay,
.adm-drawer,
.artist-drawer-overlay,
.artist-drawer,
.drawer-overlay,
.drawer-panel,
.dr-wrap,
.dr-overlay,
.dr-panel,
.rw-modal-overlay,
.rw-modal,
.se-modal,
.logout-overlay,
#detailOverlay,
#detailDrawer,
#distOverlay,
#distDrawer {
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  isolation: auto !important;
  contain: none !important;
  perspective: none !important;
  will-change: auto !important;
}

/* Re-apply backdrop-filter only on the actual backdrop elements */
#modal .modal-overlay,
.zmg-portal-backdrop,
.zmg-modal-overlay,
.rw-modal-overlay {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Re-apply transform only on modal cards for animation */
#zmgModal .zmg-modal-card,
#modal .modal-card,
.zmg-modal-card {
  transform: scale(.96) !important;
}
#zmgModal.open .zmg-modal-card,
#modal.open .modal-card,
.zmg-modal-overlay.open .zmg-modal-card {
  transform: scale(1) !important;
}

/* Drawer animation transforms */
.zmg-drawer,
.adm-drawer,
.artist-drawer,
.drawer-panel,
.dr-panel {
  transform: translateX(100%) !important;
}
.zmg-drawer.open,
.adm-drawer.open,
.artist-drawer.open,
.drawer-panel.open,
.dr-panel.open,
.dr-wrap.dr-open .dr-panel {
  transform: translateX(0) !important;
}

/* YouTube drawer wrapper */
.dr-wrap {
  inset: 0 !important;
}
.dr-wrap .dr-overlay {
  position: fixed !important;
  inset: 0 !important;
}

/* Analytics modals inside #content */
.analytics-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}
.analytics-modal-box {
  position: relative !important;
  z-index: 1 !important;
  margin: auto !important;
}

/* Catalog filter drawer */
.cat-filter-drawer {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: var(--z-drawer) !important;
}
.cat-filter-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.cat-filter-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 380px !important;
  max-width: 90vw !important;
  z-index: 1 !important;
}

/* Upload modal */
.upload-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* Analytics report / advanced-search drawers (rendered inside #content) */
.analytics-drawer{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
  z-index: var(--z-drawer) !important;
}
.analytics-drawer-overlay{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,.35) !important;
}
.analytics-drawer-panel{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 520px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  background: #fff !important;
  box-shadow: -12px 0 40px rgba(0,0,0,.16) !important;
  z-index: calc(var(--z-drawer) + 1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.analytics-drawer-body{
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}