/* Final layout contract for the internal portal.
   This file intentionally contains presentation rules only. */
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;margin:0;overflow-x:hidden}
#app,.app-shell,.workspace,.page,.page>*,.card,.table-wrap,.toolbar,.page-header,.section-title{min-width:0;max-width:100%}
img,svg,canvas,video,iframe{max-width:100%;height:auto}

/* Keep controls inside their containers at every desktop width. */
.topbar,.toolbar,.page-header,.section-title,.dialog-actions,.table-actions,.start-list-commandbar-actions{flex-wrap:wrap}
.topbar>*,.toolbar>*,.page-header>*,.section-title>*,.dialog-actions>*,.table-actions>*{min-width:0}
input,select,textarea,.button{max-width:100%}
.button{white-space:normal;text-align:center;line-height:1.2}
.page{width:100%;padding-inline:clamp(14px,2.2vw,30px)}

/* Tables fit the workspace instead of creating a page-level horizontal bar. */
.table-wrap{width:100%;overflow-x:hidden}
.data-table{width:100%;min-width:0!important;table-layout:fixed}
.data-table th,.data-table td{min-width:0!important;white-space:normal;overflow-wrap:anywhere;word-break:normal}
.data-table th{line-height:1.2}
.data-table td>*,.data-table th>*{max-width:100%}
.table-actions{display:flex;align-items:center;gap:6px}
.table-actions .button{min-height:32px;padding:6px 9px;font-size:.75rem}

/* Dense operational headers stay readable without oversized empty space. */
.page-header{align-items:flex-start}
.page-header>div:last-child{display:flex;gap:8px;justify-content:flex-end}
.stats-grid,.dashboard-grid,.certificate-layout,.drag-session-board{min-width:0}
.stat-card{min-width:0}
.modal,.confirm-dialog{max-width:calc(100vw - 20px)}

@media(max-width:1050px){
  .page-header>div:last-child{width:100%;justify-content:flex-start}
  .toolbar .search{flex:1 1 260px;min-width:min(260px,100%)}
}

@media(max-width:760px){
  .page{padding:18px 12px}
  .topbar{height:auto;min-height:62px;padding:8px 12px}
  .context-picker{flex:1 1 190px}
  .context-picker select{width:100%}
  .page-header{gap:12px;margin-bottom:18px}
  .page-header>div,.page-header>div:last-child{width:100%}
  .page-header>div:last-child .button{flex:1 1 145px}
  .toolbar{align-items:stretch}
  .toolbar>*{flex:1 1 150px}
  .toolbar .search{min-width:0;width:100%}
  .card{padding:15px}
  .modal{width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}
  .modal-body{max-height:calc(100dvh - 72px)}
  .dialog-actions .button{flex:1 1 130px}
  .data-table{font-size:.72rem}
  .data-table th,.data-table td{padding:7px 4px}
}

@media(max-width:430px){
  .page{padding-inline:10px}
  .card{padding:13px}
  .page-header h1{font-size:clamp(1.65rem,9vw,2.1rem)}
  .page-header>div:last-child .button,.toolbar .button{flex-basis:100%}
  .stats-grid{grid-template-columns:1fr}
}

@media print{
  html,body,.workspace,.page{overflow:visible!important;max-width:none!important}
  .page{padding:0}
}