/* TOPINEXUS V7 — unified visual system and anti-overlap layer */
:root{
  --ui-light-bg:#f5f2fa; --ui-light-surface:#ffffff; --ui-light-surface-2:#f0ebf7;
  --ui-light-border:#d9d0e5; --ui-light-text:#211a2d; --ui-light-muted:#675d73; --ui-light-accent:#7c3aed;
  --ui-dark-bg:#0d0916; --ui-dark-surface:#181126; --ui-dark-surface-2:#211936;
  --ui-dark-border:#3a2c52; --ui-dark-text:#f7f2ff; --ui-dark-muted:#aaa0b8; --ui-dark-accent:#a78bfa;
}
html[data-theme="light"]{
  color-scheme:light!important; background:var(--ui-light-bg)!important;
  --bg:var(--ui-light-bg)!important; --bg-soft:#eee9f5!important; --surface:var(--ui-light-surface)!important;
  --surface-2:var(--ui-light-surface-2)!important; --border:var(--ui-light-border)!important;
  --text:var(--ui-light-text)!important; --text-dim:var(--ui-light-muted)!important; --text-faint:#877c92!important;
  --accent:var(--ui-light-accent)!important;
}
html[data-theme="dark"]{
  color-scheme:dark!important; background:var(--ui-dark-bg)!important;
  --bg:var(--ui-dark-bg)!important; --bg-soft:#140e20!important; --surface:var(--ui-dark-surface)!important;
  --surface-2:var(--ui-dark-surface-2)!important; --border:var(--ui-dark-border)!important;
  --text:var(--ui-dark-text)!important; --text-dim:var(--ui-dark-muted)!important; --text-faint:#807592!important;
  --accent:var(--ui-dark-accent)!important;
}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--bg)!important;color:var(--text)!important}
/* Never let generic theme rules make normal content transparent/white-on-white. */
html[data-theme="light"] main,html[data-theme="light"] section,html[data-theme="light"] article,
html[data-theme="light"] .page,html[data-theme="light"] .panel,html[data-theme="light"] .card,
html[data-theme="light"] .modal,html[data-theme="light"] .sheet,html[data-theme="light"] .stat-card,
html[data-theme="light"] .ticket-card,html[data-theme="light"] .order-card,html[data-theme="light"] .product-card,
html[data-theme="light"] .menu-list a,html[data-theme="light"] .menu-list button{color:var(--ui-light-text)!important}
html[data-theme="dark"] main,html[data-theme="dark"] section,html[data-theme="dark"] article,
html[data-theme="dark"] .page,html[data-theme="dark"] .panel,html[data-theme="dark"] .card,
html[data-theme="dark"] .modal,html[data-theme="dark"] .sheet,html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .ticket-card,html[data-theme="dark"] .order-card,html[data-theme="dark"] .product-card,
html[data-theme="dark"] .menu-list a,html[data-theme="dark"] .menu-list button{color:var(--ui-dark-text)!important}
html[data-theme="light"] p,html[data-theme="light"] span,html[data-theme="light"] label,html[data-theme="light"] td,
html[data-theme="light"] th,html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,
html[data-theme="light"] h4,html[data-theme="light"] h5,html[data-theme="light"] h6,html[data-theme="light"] strong,
html[data-theme="light"] .inline-note,html[data-theme="light"] .sub{color:var(--ui-light-text)}
html[data-theme="dark"] p,html[data-theme="dark"] span,html[data-theme="dark"] label,html[data-theme="dark"] td,
html[data-theme="dark"] th,html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6,html[data-theme="dark"] strong,
html[data-theme="dark"] .inline-note,html[data-theme="dark"] .sub{color:var(--ui-dark-text)}
html[data-theme="light"] .muted,html[data-theme="light"] .text-muted,html[data-theme="light"] .text-dim,
html[data-theme="light"] .text-faint,html[data-theme="light"] small{color:var(--ui-light-muted)!important}
html[data-theme="dark"] .muted,html[data-theme="dark"] .text-muted,html[data-theme="dark"] .text-dim,
html[data-theme="dark"] .text-faint,html[data-theme="dark"] small{color:var(--ui-dark-muted)!important}
/* Forms: deterministic contrast in both themes. */
html[data-theme="light"] input:not([type="color"]),html[data-theme="light"] textarea,html[data-theme="light"] select,
html[data-theme="light"] [contenteditable="true"]{background:#fff!important;color:#211a2d!important;-webkit-text-fill-color:#211a2d!important;border:1px solid #cfc5dc!important;caret-color:#211a2d!important}
html[data-theme="dark"] input:not([type="color"]),html[data-theme="dark"] textarea,html[data-theme="dark"] select,
html[data-theme="dark"] [contenteditable="true"]{background:#15101f!important;color:#f7f2ff!important;-webkit-text-fill-color:#f7f2ff!important;border:1px solid #3b2d53!important;caret-color:#f7f2ff!important}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#756b82!important;-webkit-text-fill-color:#756b82!important;opacity:1!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#a99db8!important;-webkit-text-fill-color:#a99db8!important;opacity:1!important}
html[data-theme="light"] option{background:#fff!important;color:#211a2d!important}
html[data-theme="dark"] option{background:#15101f!important;color:#f7f2ff!important}
/* Preserve white text only where it is intentionally placed over an image or colored button. */
html[data-theme="light"] .slide-overlay *,html[data-theme="light"] .cat-chip span,
html[data-theme="light"] .hero-overlay *,html[data-theme="light"] .image-overlay *{color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-theme="light"] .btn:not(.secondary):not(.ghost),html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn-accent{color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Panels/cards */
html[data-theme="light"] .panel,html[data-theme="light"] .stat-card,html[data-theme="light"] .modal,
html[data-theme="light"] .sheet,html[data-theme="light"] .card,html[data-theme="light"] .box{background:#fff!important;border-color:#ddd3e8!important}
html[data-theme="dark"] .panel,html[data-theme="dark"] .stat-card,html[data-theme="dark"] .modal,
html[data-theme="dark"] .sheet,html[data-theme="dark"] .card,html[data-theme="dark"] .box{background:#181126!important;border-color:#3b2d53!important}
html[data-theme="light"] .sidebar,html[data-theme="light"] .topbar{background:#fff!important;border-color:#ddd3e8!important}
html[data-theme="dark"] .sidebar,html[data-theme="dark"] .topbar{background:#14101e!important;border-color:#34274b!important}
/* Admin: stable category rows, no compressed/overwritten controls. */
#categories-list>.panel{padding:14px!important;overflow:visible!important}
#categories-list>.panel>div{display:grid!important;grid-template-columns:86px minmax(180px,1fr) 120px minmax(145px,auto)!important;gap:14px!important;align-items:end!important}
#categories-list>.panel>div>div{min-width:0!important}
#categories-list .field, #categories-list label{min-width:0}
#categories-list input[data-cat]{display:block!important;width:100%!important;min-width:0!important;height:40px!important;line-height:40px!important;padding:0 12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#categories-list input[data-color]{width:100%!important;min-width:0!important}
#categories-list .icon-btn,#categories-list button[data-del]{height:40px!important;min-width:78px!important;white-space:nowrap!important;flex:0 0 auto!important}
#categories-list [data-img]{width:86px!important;min-width:86px!important;height:38px!important;white-space:nowrap!important}
#categories-list .panel>div>div:last-child{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;min-width:145px!important}
#categories-list .panel>div>div:last-child label{display:inline-flex!important;align-items:center!important;gap:6px!important;white-space:nowrap!important;line-height:1.2!important}
#categories-list .panel>div>div:last-child input[type="checkbox"]{width:16px!important;height:16px!important;margin:0!important;flex:0 0 16px!important}
@media(max-width:760px){
  #categories-list>.panel>div{grid-template-columns:74px minmax(0,1fr)!important;align-items:start!important}
  #categories-list>.panel>div>div:nth-child(3){grid-column:2!important}
  #categories-list>.panel>div>div:last-child{grid-column:2!important;justify-content:flex-start!important;min-width:0!important}
  #categories-list [data-img]{width:74px!important;min-width:74px!important}
}
@media(max-width:480px){
  #categories-list>.panel>div{grid-template-columns:1fr!important}
  #categories-list>.panel>div>div:nth-child(3),#categories-list>.panel>div>div:last-child{grid-column:auto!important}
  #categories-list>.panel>div>div:first-child{display:grid!important;grid-template-columns:74px 1fr!important;gap:10px!important;align-items:end!important}
  #categories-list>.panel>div>div:first-child>label,#categories-list>.panel>div>div:first-child>div{grid-column:1}
  #categories-list>.panel>div>div:first-child>button{grid-column:1}
}
/* Tables never force content to overlap. */
.data td,.data th{line-height:1.35!important;vertical-align:middle!important;word-break:normal}
.data td{white-space:normal}
.data td:last-child{white-space:nowrap}
/* Navigation items: icon, label and badge have independent boxes. */
.tn-topnav-menu a,.sidebar nav a,#side-nav a{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;line-height:1.25!important}
.tn-topnav-menu a>span:nth-child(2),#side-nav a span:last-child{position:static!important;display:block!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.tn-topnav-menu a .badge,#side-nav a .badge{margin-left:auto!important;flex:0 0 auto!important}
/* Theme control: compact, legible, classic. */
.theme-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-width:88px!important;padding:9px 12px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--surface)!important;color:var(--text)!important;box-shadow:0 6px 18px rgba(20,10,35,.08)!important;font-weight:750!important}
.theme-toggle .theme-label{position:static!important;white-space:nowrap!important;color:inherit!important}
/* Avoid accidental global text replacement/stacking inside buttons. */
button,a,.btn{line-height:1.2!important}
button>span,a>span{min-width:0}
/* Support controls: keep intentional emojis, but prevent label collisions. */
.support-main,.support-menu a,.menu-list a,.menu-list button{display:flex!important;align-items:center!important;gap:9px!important;line-height:1.25!important}
.support-menu a>span:first-child,.support-main>span:first-child{flex:0 0 auto!important;width:auto!important}
.support-menu a>span:last-child,.support-main>span:last-child{position:static!important;display:block!important;white-space:nowrap!important}
/* Classic border language */
.panel,.card,.stat-card,.box,.modal,.sheet,.ticket-card,.order-card,.product-card,.menu-list a,.menu-list button,
.icon-btn,.theme-toggle,.btn,.support-menu{border-width:1px!important}


/* ================= TOPINEXUS V8 — LAYOUT INTEGRITY ================= */
:root{
  --v8-light-bg:#f6f3fb;
  --v8-light-surface:#ffffff;
  --v8-light-surface-2:#f2edf8;
  --v8-light-border:#d8cfe5;
  --v8-light-text:#211a2d;
  --v8-light-muted:#6d6379;
  --v8-light-accent:#7c3aed;
  --v8-dark-bg:#0d0916;
  --v8-dark-surface:#181126;
  --v8-dark-surface-2:#211936;
  --v8-dark-border:#3b2d53;
  --v8-dark-text:#f7f2ff;
  --v8-dark-muted:#aaa0b8;
  --v8-dark-accent:#a78bfa;
}

/* Never allow a child control to force a panel wider than its border. */
*,*::before,*::after{box-sizing:border-box}
.panel,.card,.modal,.sheet,.stat-card,.ticket-card,.order-card,.product-card,.box,.gate-card,
.panel-head,.panel-body,.form-actions,.toolbar,.upload-row,.grid2,.field,.data,.table-wrap{min-width:0}
.panel-head>*{max-width:100%;min-width:0}
button,.btn,a.btn,input,textarea,select{max-width:100%;box-sizing:border-box}
button,.btn{overflow:hidden;text-overflow:ellipsis;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center;line-height:1.25}
.btn{min-width:0;flex:0 1 auto}
.btn.block{width:100%;max-width:100%}
.btn.sm{min-width:0;padding:8px 12px;line-height:1.2}
.icon-btn{min-width:0;max-width:100%;padding:0 10px;white-space:normal;overflow-wrap:anywhere;line-height:1.15}
.form-actions{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.form-actions .btn{flex:1 1 160px;min-width:0;width:auto}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-head h3{min-width:0;overflow-wrap:anywhere}
.upload-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.upload-row input{flex:1 1 180px;min-width:0}
.upload-row .btn{flex:0 0 auto}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar>*{min-width:0}
.field input,.field textarea,.field select{min-width:0;max-width:100%;}
.data td,.data th{overflow-wrap:anywhere}
.data td:last-child{white-space:normal}

/* A deliberate, consistent theme palette. */
html[data-theme="light"]{
  --bg:var(--v8-light-bg)!important;
  --bg-soft:#eee9f5!important;
  --surface:var(--v8-light-surface)!important;
  --surface-2:var(--v8-light-surface-2)!important;
  --border:var(--v8-light-border)!important;
  --text:var(--v8-light-text)!important;
  --text-dim:var(--v8-light-muted)!important;
  --text-faint:#8b8197!important;
  --accent:var(--v8-light-accent)!important;
}
html[data-theme="dark"]{
  --bg:var(--v8-dark-bg)!important;
  --bg-soft:#140e20!important;
  --surface:var(--v8-dark-surface)!important;
  --surface-2:var(--v8-dark-surface-2)!important;
  --border:var(--v8-dark-border)!important;
  --text:var(--v8-dark-text)!important;
  --text-dim:var(--v8-dark-muted)!important;
  --text-faint:#807592!important;
  --accent:var(--v8-dark-accent)!important;
}
html[data-theme="light"] body{background:var(--bg)!important;color:var(--text)!important}
html[data-theme="dark"] body{background:var(--bg)!important;color:var(--text)!important}
html[data-theme="light"] .panel,html[data-theme="light"] .card,html[data-theme="light"] .modal,
html[data-theme="light"] .sheet,html[data-theme="light"] .stat-card,html[data-theme="light"] .ticket-card,
html[data-theme="light"] .order-card,html[data-theme="light"] .product-card,html[data-theme="light"] .box{
  background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;
}
html[data-theme="dark"] .panel,html[data-theme="dark"] .card,html[data-theme="dark"] .modal,
html[data-theme="dark"] .sheet,html[data-theme="dark"] .stat-card,html[data-theme="dark"] .ticket-card,
html[data-theme="dark"] .order-card,html[data-theme="dark"] .product-card,html[data-theme="dark"] .box{
  background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;
}
html[data-theme="light"] input:not([type="color"]),html[data-theme="light"] textarea,html[data-theme="light"] select{
  background:#fff!important;color:#211a2d!important;-webkit-text-fill-color:#211a2d!important;
  border-color:#cfc5dc!important;caret-color:#211a2d!important;
}
html[data-theme="dark"] input:not([type="color"]),html[data-theme="dark"] textarea,html[data-theme="dark"] select{
  background:#15101f!important;color:#f7f2ff!important;-webkit-text-fill-color:#f7f2ff!important;
  border-color:#3b2d53!important;caret-color:#f7f2ff!important;
}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#746a82!important;-webkit-text-fill-color:#746a82!important;opacity:1!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#aaa0b8!important;-webkit-text-fill-color:#aaa0b8!important;opacity:1!important}
html[data-theme="light"] .btn:not(.secondary):not(.ghost),html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn-accent{background:#7c3aed!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:#7c3aed!important}
html[data-theme="dark"] .btn:not(.secondary):not(.ghost),html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn-accent{background:#8b5cf6!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:#8b5cf6!important}
html[data-theme="light"] .btn.secondary,html[data-theme="light"] .icon-btn,html[data-theme="light"] .theme-toggle{
  background:#f2edf8!important;color:#211a2d!important;-webkit-text-fill-color:#211a2d!important;border-color:#cfc5dc!important;
}
html[data-theme="dark"] .btn.secondary,html[data-theme="dark"] .icon-btn,html[data-theme="dark"] .theme-toggle{
  background:#211936!important;color:#f7f2ff!important;-webkit-text-fill-color:#f7f2ff!important;border-color:#3b2d53!important;
}
html[data-theme="light"] .field label,html[data-theme="light"] .panel-head h3,html[data-theme="light"] .panel h3,
html[data-theme="light"] .panel p,html[data-theme="light"] .panel span,html[data-theme="light"] .panel strong,
html[data-theme="light"] .panel td,html[data-theme="light"] .panel th{color:var(--text)}
html[data-theme="dark"] .field label,html[data-theme="dark"] .panel-head h3,html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .panel p,html[data-theme="dark"] .panel span,html[data-theme="dark"] .panel strong,
html[data-theme="dark"] .panel td,html[data-theme="dark"] .panel th{color:var(--text)}
html[data-theme="light"] small,html[data-theme="light"] .muted,html[data-theme="light"] .text-muted,html[data-theme="light"] .text-dim{color:var(--text-dim)!important}
html[data-theme="dark"] small,html[data-theme="dark"] .muted,html[data-theme="dark"] .text-muted,html[data-theme="dark"] .text-dim{color:var(--text-dim)!important}

/* Admin category editor: each control gets its own stable area. */
#categories-list{min-width:0}
#categories-list>.panel{padding:16px!important;overflow:visible!important}
#categories-list>.panel>div{
  display:grid!important;
  grid-template-columns:96px minmax(0,1fr) 110px minmax(150px,auto)!important;
  gap:14px!important;align-items:end!important;min-width:0!important;
}
#categories-list>.panel>div>div{min-width:0!important}
#categories-list .field{margin:0!important}
#categories-list label{display:block;min-width:0;overflow-wrap:anywhere}
#categories-list input[data-cat]{width:100%!important;min-width:0!important;height:42px!important;line-height:1.2!important;padding:0 12px!important}
#categories-list input[data-color]{width:100%!important;min-width:0!important;height:42px!important;padding:3px!important}
#categories-list [data-img]{width:96px!important;min-width:96px!important;height:42px!important;padding:8px!important}
#categories-list .panel>div>div:last-child{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;
  min-width:0!important;flex-wrap:wrap!important;
}
#categories-list .panel>div>div:last-child label{display:inline-flex!important;align-items:center!important;gap:7px!important;white-space:nowrap!important;line-height:1.2!important}
#categories-list .panel>div>div:last-child input[type="checkbox"]{width:17px!important;height:17px!important;flex:0 0 17px!important;margin:0!important}
#categories-list button[data-del]{min-width:78px!important;height:42px!important}

@media(max-width:900px){
  #categories-list>.panel>div{grid-template-columns:86px minmax(0,1fr)!important;align-items:start!important}
  #categories-list>.panel>div>div:nth-child(3),#categories-list>.panel>div>div:nth-child(4){grid-column:2!important}
  #categories-list>.panel>div>div:nth-child(4){justify-content:flex-start!important}
  #categories-list [data-img]{width:86px!important;min-width:86px!important}
}
@media(max-width:560px){
  #categories-list>.panel{padding:12px!important}
  #categories-list>.panel>div{grid-template-columns:1fr!important;gap:12px!important}
  #categories-list>.panel>div>div:nth-child(3),#categories-list>.panel>div>div:nth-child(4){grid-column:auto!important}
  #categories-list>.panel>div>div:first-child{display:grid!important;grid-template-columns:86px minmax(0,1fr)!important;gap:10px!important;align-items:end!important}
  #categories-list>.panel>div>div:first-child>label{grid-column:1/-1!important}
  #categories-list>.panel>div>div:first-child>div{grid-column:1!important}
  #categories-list>.panel>div>div:first-child>button{grid-column:2!important;width:100%!important;margin-top:0!important}
  #categories-list>.panel>div>div:last-child{justify-content:flex-start!important}
}

/* Keep every action inside its own border at small widths. */
@media(max-width:640px){
  .panel-head .btn{flex:0 1 auto;max-width:100%}
  .form-actions .btn{flex:1 1 100%;width:100%}
  .payment-admin-actions .btn,.media-actions .btn{flex:1 1 140px;min-width:0}
  .data td:last-child{white-space:normal}
}