/* TopiNexus V9 — global layout integrity + responsive typography */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{word-break:normal;overflow-wrap:break-word}

/* Never allow controls or labels to escape their containing border. */
button,.btn,.link-btn,.notice-btn,.theme-toggle,.icon-btn,
input,textarea,select{max-width:100%;min-width:0}
button,.btn,.link-btn,.notice-btn{overflow-wrap:anywhere;word-break:normal;white-space:normal;line-height:1.25}
.btn,.link-btn,.notice-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;vertical-align:middle}
.btn{min-height:40px;height:auto;padding:9px 13px}
.btn > *,button > *{min-width:0}

/* Flex/grid children must be allowed to shrink instead of pushing text outside. */
.flex,.row,.toolbar,.form-actions,.actions,.panel-head,.panel-header,
.card-body,.card-footer,.topbar-inner,.header-icons,.notice-inner,
.upload-row,.order-actions,.payment-admin-actions,.media-actions{min-width:0}
.flex > *, .row > *, .toolbar > *, .form-actions > *, .actions > *,
.panel-head > *, .panel-header > *, .card-body > *, .card-footer > *,
.upload-row > *, .order-actions > *, .payment-admin-actions > *, .media-actions > *{min-width:0;max-width:100%}

/* Headers stay inside the viewport on phones. */
.topbar-inner{width:100%;max-width:1240px;overflow:visible}
.brand{min-width:0;max-width:38%}
.brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-icons{min-width:0;max-width:100%;overflow:visible}
.currency-switcher{min-width:0;max-width:110px}
.theme-toggle{min-width:0}
.tn-topnav-wrap{flex:0 0 auto;min-width:0}

/* Cards/panels: titles and labels wrap cleanly within the border. */
.panel,.card,.sheet,.modal,.box,.stat-card,.ticket-card,.order-card,.product-card,
.cat-chip,.payment-method,.menu-list a,.menu-list button{min-width:0;max-width:100%;overflow-wrap:anywhere}
.panel h1,.panel h2,.panel h3,.panel h4,.panel p,.panel label,
.card-name,.card-cat,.card-price,.section-head h3,.section-head a,
.cat-chip span,.field label,.notice-title,.notice-sub{min-width:0;max-width:100%;overflow-wrap:anywhere}
.cat-chip span{right:10px;max-width:calc(100% - 24px);word-break:break-word}

/* Form controls never visually exceed their parent. */
.field{min-width:0;max-width:100%}
.field input,.field textarea,.field select{width:100%;max-width:100%;min-width:0}

/* Action groups adapt rather than overflowing. */
.form-actions,.actions,.toolbar,.order-actions,.upload-row,.payment-admin-actions,.media-actions{display:flex;flex-wrap:wrap}
.form-actions .btn,.actions .btn,.toolbar .btn,.order-actions .btn,.upload-row .btn,
.payment-admin-actions .btn,.media-actions .btn{flex:0 1 auto;max-width:100%}

/* Admin/data tables: preserve borders and readable wrapping. */
.data{width:100%;table-layout:fixed}
.data th,.data td{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.data .btn{white-space:normal}

/* Quick navigation labels never overlap symbols/badges. */
.tn-topnav-menu a{min-width:0;overflow:hidden}
.tn-topnav-menu a>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-topnav-menu .badge{flex:0 0 auto}

/* Announcement stays compact and never pushes buttons off-screen. */
.tn-announcement-copy{min-width:0}
.tn-announcement-actions,.tn-announcement-link,.tn-announcement-close{flex:0 0 auto}

/* Auth pages: no white wash and no oversized text escaping cards. */
.auth-page,.auth-shell,.auth-card,.auth-brand-header,.box{min-width:0;max-width:100%}
.auth-card h1,.auth-card h2,.auth-card p,.auth-card label,.box h1,.box h2,.box h3,.box p,.box label{overflow-wrap:anywhere}

/* Phone layout: deliberately compact header so every control remains visible. */
@media(max-width:680px){
  .topbar-inner{gap:7px;padding:10px 12px}
  .brand{max-width:none;flex:0 1 auto}
  .brand-name{display:none!important}
  .header-icons{gap:5px;flex:1 1 auto;justify-content:flex-end}
  .currency-switcher{width:82px;max-width:82px;height:40px;font-size:12px;padding:0 7px}
  .theme-toggle{width:42px!important;min-width:42px!important;height:40px!important;padding:0!important;border-radius:12px!important;gap:0!important}
  .theme-toggle .theme-label{display:none!important}
  .theme-toggle .theme-icon{font-size:17px;width:20px}
  .icon-btn,.tn-topnav-toggle{width:40px!important;min-width:40px!important;height:40px!important;flex:0 0 40px}
  .track-link{display:none!important}
  .tn-topnav-menu{max-width:calc(100vw - 24px);width:190px!important}
  .btn{max-width:100%;padding:9px 12px}
  .form-actions .btn{flex:1 1 100%;width:100%}
  .toolbar .btn{flex:1 1 auto}
  .order-actions .btn{width:100%}
  .upload-row input{flex:1 1 150px}
}

@media(max-width:380px){
  .topbar-inner{gap:5px;padding-left:9px;padding-right:9px}
  .currency-switcher{width:74px;max-width:74px;font-size:11px}
  .icon-btn,.tn-topnav-toggle{width:38px!important;min-width:38px!important;height:38px!important;flex-basis:38px}
  .theme-toggle{width:38px!important;min-width:38px!important;height:38px!important}
}

/* Desktop: keep long actions inside their panels without forcing columns wider. */
@media(min-width:681px){
  .form-actions .btn,.actions .btn{max-width:100%}
  .panel-head,.panel-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
}

/* Prevent accidental CSS transforms/animations from changing measured button bounds. */
.btn:active,.icon-btn:active,.theme-toggle:active{max-width:100%}
/* Header overflow guard: the desktop control set must compress gracefully on small screens. */
@media(max-width:680px){
  .topbar-inner > .brand{flex:0 0 auto}
  .topbar-inner > .header-icons{flex:1 1 0}
  .header-icons > *{flex-shrink:1}
  .header-icons > .icon-btn,.header-icons > .tn-topnav-wrap{flex-shrink:0}
}