#app .workspace>header,#shell .workspace>header,body[data-admin]>header{position:fixed!important;top:0;left:0;right:0;z-index:70;box-sizing:border-box;min-height:76px;box-shadow:0 2px 12px #00000009;display:flex;align-items:center;flex-wrap:wrap}#app .workspace,#shell .workspace{padding-top:94px!important}body[data-admin]{padding-top:94px}#app main,#shell main{padding-bottom:24px!important}.bottomNav{display:none!important}body{padding-bottom:0!important}.clock220{margin-right:auto;font-size:12px;color:#777;white-space:nowrap}.version220{padding:10px;font-size:12px;color:#777}#notice220,#toast{position:fixed!important;bottom:22px!important;left:22px!important;right:auto!important;top:auto!important;transform:none!important;z-index:300;max-width:min(370px,calc(100vw - 44px));background:#25242a;color:white;border-radius:12px;box-shadow:0 8px 30px #0003;padding:14px 20px;font:14px/1.7 OneKasbUI,Tahoma,sans-serif;box-sizing:border-box}#message{position:fixed;bottom:22px;left:22px;z-index:300;max-width:360px}#sidebar nav details,#shell nav details{padding:5px 0}nav summary{padding:12px;cursor:pointer;color:#960018;font-weight:bold}.formRow220{padding:14px;border:1px solid #ddd;border-radius:10px;margin:12px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.formRow220 .actions{grid-column:1/-1}#formFields220 input[type=checkbox]{width:auto}#import220 input,#import220 select{display:block;width:100%;margin:6px 0 14px}#notice220[hidden],#toast[hidden]{display:none!important}@media(max-width:600px){.clock220{font-size:11px}header #breadcrumb{display:none}header{gap:8px!important}#profileLink{padding:4px!important}.formRow220{grid-template-columns:1fr}#app .workspace,#shell .workspace{padding-top:104px!important}body[data-admin]{padding-top:104px}#sidebar,#officeDrawer,#shell>aside{padding-bottom:40px!important}}

footer{padding-bottom:24px!important}

/* Management mobile layout — 2.4 / mobile1 */
#shell, #shell .workspace, #shell main, #shell .page,
#shell .chartGrid, #shell .chartGrid > *, #shell .panel,
#shell .filters, #shell .cards, #shell .cards > *,
#dialogFields, #editForm, #dialog .permissions,
body[data-admin="true"] main, body[data-admin="true"] main > * {
  min-width:0; max-width:100%;
}
#shell .chartGrid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
#shell .tableWrap, body[data-admin="true"] .tableWrap{min-width:0;max-width:100%}
#shell .panel, #shell .card, #dialogFields, body[data-admin="true"] .card{overflow-wrap:anywhere}
#shell .workspace>header #adminName{min-width:0;overflow-wrap:anywhere}
#shell .workspace>header>div{display:flex;flex-wrap:wrap;gap:6px}
#dialog{overflow-y:auto;overscroll-behavior:contain}
#dialog fieldset{min-width:0;max-width:100%}
#dialog textarea{width:100%;max-width:100%;box-sizing:border-box}
#shell .workspace{padding-top:var(--management-header-height,104px)!important}
body[data-admin="true"]{padding-top:var(--management-header-height,104px)!important}
@media(max-width:1000px){#shell .chartGrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
 #shell main,body[data-admin="true"] main{padding:14px!important}
 #shell .panel{padding:16px}
 #shell .cards,#shell .builderGrid,#shell .formGrid,#shell .permissions{grid-template-columns:minmax(0,1fr)!important}
 #shell .filters{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px}
 #shell .filters label{min-width:0;width:100%}
 #shell .presets{display:flex;flex-wrap:wrap;gap:8px}
 #shell .presets button{flex:1;min-height:44px;padding:8px}
 #shell .heading{gap:10px;align-items:flex-start}
 #shell .heading>div{min-width:0;width:100%}
 #shell .heading>button{max-width:100%;white-space:normal}
 #shell .workspace>header{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto;gap:8px!important;padding:10px 12px!important}
 #shell #sideToggle{grid-column:1;grid-row:1}
 #shell #adminName{grid-column:2;grid-row:1;font-size:13px;line-height:1.6}
 #shell .workspace>header>div{grid-column:3;grid-row:1;gap:5px}
 #shell .workspace>header>div button{min-height:44px;padding:8px;font-size:12px}
 #shell .workspace>header .clock220{grid-column:2/-1;grid-row:2;margin:0;white-space:normal;font-size:11px}
 #shell .asideFoot{display:grid!important}
 #shell .ringWrap{grid-template-columns:minmax(0,1fr);gap:14px}
 #shell .ringLegend{min-width:0}
 #shell .ringLegend>div{flex-wrap:wrap;min-width:0}
 #shell .ringLegend span{min-width:0}
 #shell .barLabel{flex-wrap:wrap;overflow-wrap:anywhere}
 #dialog{width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:90dvh;padding:16px;margin:auto}
 #dialog .formGrid,#dialog .permissions{grid-template-columns:minmax(0,1fr)!important}
 #dialog .heading{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:8px}
 #dialog .heading h2{min-width:0;font-size:18px}
 #dialog #closeDialog{flex-shrink:0;min-width:44px;min-height:44px}
 #shell input,#shell select,#shell textarea,#dialog input,#dialog select,#dialog textarea{min-width:0;max-width:100%;font-size:16px}
 #shell .actions button,#dialog button{min-height:44px;white-space:normal}
 #productionFrame{display:block;max-width:100%;height:calc(100dvh - 145px)!important;min-height:480px}
 body[data-admin="true"] .filters{grid-template-columns:minmax(0,1fr)!important}
 body[data-admin="true"] .searchWide{grid-column:auto!important}
 body[data-admin="true"] .pager{flex-wrap:wrap}
 body[data-admin="true"] header{gap:8px!important;padding:10px 12px!important}
 body[data-admin="true"] .signatureOptions{grid-template-columns:minmax(0,1fr)}
 /* Keep the real table DOM so search, actions and bulk selection still work. */
 .managementMobile .tableWrap table{display:block;min-width:0!important;width:100%;border-collapse:separate}
 .managementMobile .tableWrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .managementMobile .tableWrap tbody{display:grid;gap:14px;width:100%}
 .managementMobile .tableWrap tr{display:block;width:100%;padding:10px 12px;border:1px solid #e5e5ea;border-radius:12px;background:#fff}
 .managementMobile .tableWrap td{display:block;width:100%;padding:8px 0;text-align:right;overflow-wrap:anywhere;white-space:normal;border-bottom:1px solid #f0f0f3}
 .managementMobile .tableWrap td:last-child{border:0}
 .managementMobile .tableWrap td:before{content:attr(data-label);display:block;color:#73737c;font-size:11px;margin-bottom:3px}
 .managementMobile .tableWrap td[data-label=""]:before{display:none}
 .managementMobile .tableWrap td button{min-height:44px;max-width:100%;white-space:normal;margin:3px;padding:8px 12px}
 .managementMobile .tableWrap td input[type=checkbox]{width:22px;height:22px}
}

/* 2.4.24 — keep fixed header inside the content column */
@media(min-width:1101px){#shell .workspace>header{right:282px!important;left:0!important}}
@media(min-width:901px) and (max-width:1100px){#shell .workspace>header{right:250px!important;left:0!important}}
@media(max-width:900px){#shell .workspace>header{right:0!important;left:0!important}}
#adminHeader .clock220{margin:0!important}
#notice220[data-type="error"],#toast[data-type="error"]{border-left:4px solid #e5484d}#notice220[data-type="success"],#toast[data-type="success"]{border-left:4px solid #38a169}#notice220[data-type="info"],#toast[data-type="info"]{border-left:4px solid #960018}.toast220Show{animation:toast220In .18s ease-out}@keyframes toast220In{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}