/* Responsive layouts for mechanics on phones and tablets. */
html,body,#shell,.workspace,main,#content{min-width:0;max-width:100%;}
body{overflow-x:hidden;}
main{min-width:0;}
.page-head>*,.panel,.panel-head,.toolbar,.form-grid,.table-wrap{min-width:0;}
img,svg,video,canvas{max-width:100%;}
.mechanic-workorder-list{display:grid;gap:10px;padding:12px;}
.mechanic-workorder-card{min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);}
.mechanic-workorder-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.mechanic-workorder-title>div{display:grid;gap:5px;min-width:0;}
.mechanic-workorder-title>div>span{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.04em;}
.mechanic-workorder-title>div>strong{font-size:14px;line-height:1.4;overflow-wrap:anywhere;}
.mechanic-workorder-title>.badge{flex:0 0 auto;}
.mechanic-workorder-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);}
.mechanic-workorder-card dl>div{display:grid;gap:4px;min-width:0;}
.mechanic-workorder-card dt{color:var(--muted);font-size:10px;font-weight:700;}
.mechanic-workorder-card dd{min-width:0;margin:0;font-size:12px;overflow-wrap:anywhere;}
.mechanic-workorder-card dd .mechanic-crew{margin-top:0;}
.mechanic-workorder-actions{display:flex;gap:8px;margin-top:12px;}
.mechanic-workorder-actions button{min-height:44px;width:100%;}

@media(max-width:1024px){
  .project-planning-day{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
  .project-planning-day-description,.project-day-special-safety{min-width:0;}
  .project-day-attendance-menu,.project-day-special-safety-menu{max-width:calc(100vw - 40px);}
  #dialog:has([data-safety]){width:min(920px,calc(100vw - 24px));}
}

@media(max-width:850px){
  main{padding:18px 14px;}
  .topbar{height:60px;padding:0 12px;gap:9px;}
  .topbar .searchbox{flex:1;}
  .top-actions{flex:0 0 auto;}
  .top-actions #new-work{max-width:none;white-space:nowrap;padding:10px 12px;}
  .top-actions .theme-toggle{display:inline-flex;}
  .page-head{gap:12px;}
  .page-head>.primary{flex:0 0 auto;}
  .panel{max-width:100%;}
  .panel-head{flex-wrap:wrap;}
  .toolbar{flex-wrap:wrap;}
  .toolbar select,.toolbar input{max-width:100%;}
  .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-grid>*{min-width:0;}
  input,select,textarea{max-width:100%;}
  #dialog:has([data-safety]){width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);}
  #dialog:has([data-safety]) #editor{max-height:calc(100dvh - 16px);}
  #dialog:has([data-safety]) #form-fields{min-width:0;}
  #dialog:has([data-safety]) .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .workorder-brand,.workorder-navigation,.workorder-team-summary,.safety-form,.project-workplan,.project-planning-days{min-width:0;max-width:100%;}
}

@media(max-width:600px){
  main{padding:14px 10px 24px;}
  .topbar{padding:0 9px;gap:7px;}
  .topbar #menu{width:40px;height:40px;}
  .searchbox{gap:5px;}
  .searchbox input{min-width:0;font-size:16px;}
  .top-actions{gap:4px;}
  .top-actions #new-work{max-width:48px;overflow:hidden;padding:10px 8px;font-size:0;}
  .top-actions #new-work::first-letter{font-size:14px;}
  .top-actions #new-work{font-size:0;}
  .top-actions #new-work::after{content:"+";font-size:20px;line-height:1;}
  .page-head{align-items:stretch;flex-direction:column;margin-bottom:14px;}
  .page-head h1{font-size:21px;}
  .page-head p{font-size:12px;line-height:1.5;}
  .page-head>.primary{width:100%;min-height:44px;}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .panel{border-radius:11px;}
  .panel-head{align-items:flex-start;padding:13px;}
  .panel-head>button,.panel-head>.primary{width:100%;}
  .panel>.toolbar{padding:10px 12px;}
  .form-grid,.form-grid .full{grid-template-columns:minmax(0,1fr);grid-column:1/-1;}
  .form-grid label{min-width:0;}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;min-height:42px;}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;}
  button,.primary,.secondary,.danger{touch-action:manipulation;}
  .mechanic-workorder-list{padding:10px;}
  .mechanic-workorder-card{padding:12px;}
  .mechanic-workorder-card dl{grid-template-columns:minmax(0,1fr);gap:10px;}
  .mechanic-workorder-title{flex-wrap:wrap;}
  .mechanic-workorder-title>.badge{margin-left:auto;}
  .mechanic-task{align-items:stretch;}
  .mechanic-task>div:last-child{width:100%;}
  .mechanic-task>div:last-child button{width:100%;min-height:44px;}
  .mechanic-address{align-items:flex-start;flex-wrap:wrap;}
  .mechanic-address .mechanic-navigate{margin-left:0;}
  .project-planning-day{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px;}
  .project-planning-day>*{min-width:0;}
  .project-planning-day .project-planning-important{white-space:normal;min-height:44px;}
  .project-day-attendance,.project-day-special-safety{width:100%;}
  .project-day-attendance-toggle,.project-day-special-safety-toggle{width:100%;min-height:44px;}
  .project-day-attendance-menu,.project-day-special-safety-menu{position:fixed;left:10px!important;right:10px!important;top:auto;bottom:10px;width:auto;max-width:none;max-height:min(55dvh,440px);z-index:100;background:var(--surface,#fff);}
  .project-day-attendance-menu label,.project-day-special-safety-menu label{min-height:42px;}
  .project-day-editor{min-height:100px;}
  #dialog:has([data-safety]){inset:4px;margin:auto;width:calc(100vw - 8px);max-width:calc(100vw - 8px);max-height:calc(100dvh - 8px);border-radius:12px;}
  #dialog:has([data-safety]) #editor{max-height:calc(100dvh - 8px);}
  #dialog:has([data-safety]) .dialog-head{gap:8px;padding:10px 12px;}
  #dialog:has([data-safety]) .dialog-head::after{content:"* verplicht";font-size:9px;}
  #dialog:has([data-safety]) #form-fields{gap:12px;padding:12px;}
  #dialog:has([data-safety]) #form-fields,.form-grid{grid-template-columns:minmax(0,1fr);}
  #dialog:has([data-safety]) .dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));}
  #dialog:has([data-safety]) .dialog-actions button{min-height:44px;padding:10px;}
  #dialog:has([data-safety]) .safety-form{padding:10px;}
  .workplan-incident-report{padding:11px;}
  .workplan-incident-heading{align-items:flex-start;flex-direction:column;}
  .live-connection-grid,.safety-rie,.lmra-entry .form-grid{grid-template-columns:minmax(0,1fr);}
  .table-wrap{border:0;}
  footer{padding:12px 10px;}
}

@media(max-width:380px){
  .top-actions #new-work{display:none;}
  .mechanic-workorder-title>.badge{margin-left:0;}
  .dialog-head h2{font-size:17px;}
}

/* Keep the theme control unmistakable: the icon alone was too easy to miss. */
.theme-toggle{display:inline-flex!important;width:auto;min-width:38px;gap:6px;padding:0 9px;font-size:11px;font-weight:700;white-space:nowrap;}
:root:not([data-theme="dark"]) .theme-toggle::after{content:"Donker";}
:root[data-theme="dark"] .theme-toggle::after{content:"Licht";}
@media(max-width:850px){.top-actions .theme-toggle{display:inline-flex!important;}}