/* Screen layout only: printed forms and PDF layouts remain independent. */
@media screen {
  *,*::before,*::after{box-sizing:border-box}
  html body [hidden][hidden]{display:none!important}
  main,.wrap,.card,.hero,.grid,.row,.workspace,.top-layout,.tablewrap{min-width:0}
  .grid>*,.row>*,.workspace>*,.top-layout>*,.bottom-grid>*,.topgrid>*{min-width:0}
  input,select,textarea{min-width:0;max-width:100%}
  img,video,canvas,iframe{max-width:100%}
  @media(max-width:900px){
    header,.topbar{flex-wrap:wrap;gap:12px}
    header>*,.topbar>*,.right,.header-actions,.header-right,.head-actions,.head-right,.header-user,.brand-wrap,.top-actions{min-width:0;max-width:100%}
    .right,.header-actions,.header-right,.head-actions,.head-right,.header-user,.brand-wrap,.top-actions{flex-wrap:wrap;gap:10px}
    .section-head,.section-title,.monthcontrols,.period-controls,.month-head,.summary,.switch-row,.footer-line{flex-wrap:wrap;min-width:0;max-width:100%}
    .section-head h2,.section-title h2{min-width:0;overflow-wrap:anywhere}
    .monthcontrols>div,.period-controls>div{min-width:0;max-width:100%}
    .periodbar,.correction-grid,.correction-subgrid{min-width:0}
  }
  @media(max-width:720px){
    h1,h2,h3,p,.hint,.state,.notice,.employee,.site,.user-name,.user-copy,.access-copy,.document{overflow-wrap:anywhere}
    button,.button,.btn,header a,.monthcontrols label,.branch-line,.table-date-main{max-width:100%;white-space:normal!important;overflow-wrap:anywhere}
    .periodbar,.correction-grid,.correction-subgrid,.special-time-fields{grid-template-columns:minmax(0,1fr)}
    .monthcontrols{justify-content:flex-start}
    .monthcontrols>div{flex:1 1 110px}
    .section-head-between{align-items:flex-start}
    .section-head .btn{margin-left:0}
    dialog{max-width:calc(100vw - 24px)}
  }
  @media(max-width:900px){
    .dobo-mobile-table{display:block!important;width:100%!important;min-width:0!important;table-layout:auto!important;border-collapse:separate}
    .dobo-mobile-table thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
    .dobo-mobile-table tbody{display:block!important;width:100%}
    .dobo-mobile-table tbody tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid #dce5ec;border-radius:12px;margin:12px 0;background:#fff;overflow:hidden}
    .dobo-mobile-table tbody td{display:block!important;width:auto!important;min-width:0!important;max-width:100%;padding:10px!important;border:0!important;border-bottom:1px solid #e7edf2!important;white-space:normal!important;overflow-wrap:anywhere;font-size:14px!important;text-align:left!important;position:static!important}
    .dobo-mobile-table tbody td::before{content:attr(data-mobile-label);display:block;font-size:11px;font-weight:700;line-height:1.4;color:#536576;margin-bottom:5px}
    .dobo-mobile-table tbody td:not([data-mobile-label])::before{content:none}
    .dobo-mobile-table tbody td[colspan]{grid-column:1/-1}
    .dobo-mobile-table tbody td>*{min-width:0;max-width:100%;white-space:normal!important;overflow-wrap:anywhere}
    .dobo-mobile-table input,.dobo-mobile-table select{width:100%}
    .dobo-mobile-table .cell-actions,.dobo-mobile-table .actions{flex-wrap:wrap}
  }
  @media(max-width:380px){
    .dobo-mobile-table tbody tr{grid-template-columns:minmax(0,1fr)}
    .clock-grid,.actions{min-width:0}
  }
}