/* starsmartapp Responsive System V2 + shared UI foundation - screen only */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
input,select,textarea,button{font:inherit;max-width:100%}
textarea{resize:vertical} pre,code{max-width:100%;overflow-wrap:anywhere}
.wrap,.container,.content,.page,.panel,.box,.card,.w,.c{max-width:100%}
.scroll,.table-wrap,.responsive-table,.table-responsive{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
table{max-width:100%} form{max-width:100%} fieldset{min-width:0;max-width:100%}
/* Shared UI helpers: pages may keep their own theme while gaining consistent behaviour. */
.btn,button,input[type=submit],input[type=button],input[type=reset]{cursor:pointer}
.actions,.toolbar,.button-row,.form-row,.meta,.bulkbar{gap:8px}
.ok,.success{overflow-wrap:anywhere}.err,.error,.warn,.warning{overflow-wrap:anywhere}

@media screen and (max-width:900px){
 body{font-size:14px}
 .wrap,.container,.content,.page,.w{width:auto!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;padding-left:10px!important;padding-right:10px!important}
 .grid,.filters,.filter-grid,.form-grid,.cards,.dashboard-grid{grid-template-columns:1fr!important}
 .row,.filters,.filter,.actions,.toolbar,.button-row,.form-row,.meta,.bulkbar{flex-wrap:wrap!important;max-width:100%!important}
 .row>*,.filters>*,.filter>*,.form-row>*{min-width:0}
 .panel,.box,.card,.c{max-width:100%;padding:12px!important}
 h1{font-size:24px!important;line-height:1.2} h2{font-size:21px!important;line-height:1.25} h3{font-size:18px!important;line-height:1.3}
 .btn,button,input[type=submit],input[type=button],input[type=reset]{min-height:40px}
 input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{min-height:40px}
 label{max-width:100%}
 /* V2: ordinary tables fit the viewport and may wrap. Horizontal scrolling is reserved for explicit wide wrappers/tables. */
 table:not(.table-wide):not(.wide-table){width:100%;white-space:normal}
 table:not(.table-wide):not(.wide-table) th,table:not(.table-wide):not(.wide-table) td{white-space:normal;overflow-wrap:anywhere;word-break:normal}
 .scroll table,.table-wrap table,.responsive-table table,.table-responsive table,.table.table-wide,.wide-table{white-space:nowrap}
 .scroll table th,.scroll table td,.table-wrap table th,.table-wrap table td,.responsive-table table th,.responsive-table table td,.table-responsive table th,.table-responsive table td{overflow-wrap:normal}
 table input:not([type=checkbox]):not([type=radio]){max-width:100%}
 th,td{vertical-align:middle}
 .pagination,.pages{display:flex;flex-wrap:wrap;gap:5px}.pagination a,.pagination span,.pages a,.pages span{margin:0!important}
}
@media screen and (max-width:600px){
 body{font-size:13px}
 .wrap,.container,.content,.page,.w{padding-left:7px!important;padding-right:7px!important}
 .panel,.box,.card,.c{padding:10px!important;border-radius:6px!important}
 .actions,.toolbar,.button-row{display:flex!important;gap:6px!important;align-items:stretch!important}
 .actions .btn,.toolbar .btn,.button-row .btn,.actions button,.toolbar button{width:100%!important}
 form .btn,form button[type=submit]{max-width:100%}
 .smnav-mobile-user{max-width:55vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smnav-mobile-panel{max-height:78vh!important}
 /* Compact simple tables instead of forcing a sideways swipe. */
 table:not(.table-wide):not(.wide-table) th,table:not(.table-wide):not(.wide-table) td{padding:6px!important;font-size:12px}
}
@media print{html,body{overflow:visible!important;max-width:none!important}}