/* Layout-only refinements. Keep operational behaviour in app.js. */
html,body{max-width:100%;overflow-x:hidden}
.workspace,.page,.card,.table-wrap,.toolbar,.page-header>div{min-width:0}
.page{width:100%}
.toolbar>*{max-width:100%}
.toolbar select{flex:0 1 auto}
.toolbar .search{width:min(420px,100%)}
.table-wrap{max-width:100%;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.modal{width:min(820px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
.modal-body{max-height:calc(100dvh - 98px);overscroll-behavior:contain}
.modal-head h2{min-width:0;overflow-wrap:anywhere}
.dialog-actions{flex-wrap:wrap}
.drag-session-board{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.certificate-layout,.dashboard-grid,.stats-grid{min-width:0}
.certificate-preview{max-width:100%}
.page-header h1,.page-header p,.section-title h2,.card h2,.card h3,.button{overflow-wrap:anywhere}
.page-header>div:last-child{min-width:0}

@media(max-width:900px){
  .page{padding:22px 18px}
  .page-header{align-items:flex-start}
  .page-header>div:last-child{display:flex;flex-wrap:wrap;gap:8px}
  .topbar{padding-inline:18px}
  .topbar-actions{min-width:0}
  .context-picker{min-width:0;flex:1}
  .context-picker select{width:min(340px,100%)}
  .dashboard-grid{grid-template-columns:1fr}
}

@media(max-width:760px){
  .topbar{height:auto;min-height:62px;gap:8px;padding-block:8px}
  .context-picker select{padding:9px 28px 9px 9px;font-size:.82rem}
  .page{padding:18px 12px}
  .page-header{gap:12px;margin-bottom:18px}
  .page-header h1{font-size:clamp(1.7rem,8vw,2.2rem)}
  .page-header{width:100%}
  .page-header>div{width:100%}
  .page-header>div:last-child{display:block}
  .card{padding:15px}
  .toolbar{align-items:stretch}
  .toolbar>*{flex:1 1 150px}
  .toolbar .button{width:auto}
  .form-grid{gap:0}
  .modal{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:12px}
  .modal-head{padding:15px 16px}
  .modal-body{padding:15px 16px;max-height:calc(100dvh - 73px)}
  .dialog-actions{position:sticky;bottom:-15px;margin:14px -16px -15px;padding:12px 16px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);z-index:2}
  .dialog-actions .button{flex:1 1 130px}
  .session-heading{align-items:flex-start;flex-direction:column;gap:4px}
  .start-list-version-picker{width:100%;flex-wrap:wrap}
  .start-list-version-picker select{width:100%;min-width:0}
  .drag-session-dropzone{max-height:none}
  .toast-region{inset:8px 8px auto}
  .toast{width:100%}
  .section-title{align-items:flex-start;gap:10px;flex-wrap:wrap}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .stat-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px}
  .stat-card strong{grid-column:2;grid-row:1/3;margin:0}
  .stat-card small{grid-column:1/-1}
  .auth-panel{padding:24px 18px}
  .auth-visual{padding:24px 18px}
  .upload-zone{padding:24px 14px}
}
.dashboard-stats-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.dashboard-stats-grid .stat-card{
  min-width:0;
  padding:14px 16px;
}
.dashboard-stats-grid .stat-card strong{
  font-size:clamp(1.6rem,2.5vw,2.2rem);
}
.compact-button{
  min-height:34px;
  padding:7px 11px;
  white-space:nowrap;
}
.table-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.table-actions .button{
  min-height:34px;
  padding:7px 11px;
  white-space:nowrap;
}
.media-price-settings-grid{
  display:grid;
  gap:14px;
  margin-top:16px;
}
.media-price-settings-card{
  min-width:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface,#fff);
}
.media-price-settings-card h3{
  margin:0 0 12px;
}
.media-price-settings-card .form-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 12px;
}
.media-price-settings-card input{
  width:100%;
  min-width:0;
}
@media(max-width:1100px){
  .dashboard-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px){
  .dashboard-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .media-price-settings-card .form-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .dashboard-stats-grid{grid-template-columns:1fr;}
}