/* iPad proposal setup fit + clearer Labor & Materials room workflow. */

.time-materials-page .tm-painting-type-tabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  padding:10px 18px 0;
  background:#070b10;
}
.time-materials-page .tm-painting-type-tabs>button{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:58px;
  padding:8px 10px;
  border:1px solid #334858;
  border-radius:7px;
  background:#0a1721;
  color:#dce5ea;
  text-align:left;
}
.time-materials-page .tm-painting-type-tabs>button>svg{width:20px;height:20px;color:#ff851b}
.time-materials-page .tm-painting-type-tabs>button>span{display:grid;gap:2px;min-width:0}
.time-materials-page .tm-painting-type-tabs strong{font-size:12px;color:#fff}
.time-materials-page .tm-painting-type-tabs small{overflow:hidden;color:#9fb0bc;font-size:9.5px;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}
.time-materials-page .tm-painting-type-tabs>button:hover{border-color:#ff851b;background:#18130f}
.time-materials-page .tm-painting-type-tabs>button.active{border-color:#ff851b;background:#1d160f;box-shadow:inset 0 -2px 0 #ff851b}
.time-materials-page .tm-painting-type-tabs>button:focus-visible{outline:2px solid #ffad61;outline-offset:2px}

.time-materials-page .tm-area-manager{
  display:grid;
  gap:9px;
  padding:11px 13px;
  border:1px solid #334454;
  border-radius:8px;
  background:#0b121a;
}
.time-materials-page .tm-area-manager>header{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.time-materials-page .tm-area-manager>header>div{display:grid;gap:1px}
.time-materials-page .tm-area-manager>header small{color:#ff9a3d;font-size:10.5px;font-weight:800;text-transform:uppercase}
.time-materials-page .tm-area-manager>header strong{color:#f7fbff;font-size:13px}
.time-materials-page .tm-add-area{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid #ff851b;
  border-radius:6px;
  background:#ff851b;
  color:#15100b;
  font-size:12px;
  font-weight:800;
}
.time-materials-page .tm-add-area:hover{background:#ff9b3d;border-color:#ff9b3d}
.time-materials-page .tm-add-area svg{width:15px;height:15px}
.time-materials-page .tm-area-tabs{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 3px;scrollbar-width:thin}
.time-materials-page .tm-area-tabs>button{
  display:grid;
  gap:2px;
  flex:0 0 auto;
  min-width:132px;
  min-height:46px;
  padding:7px 11px;
  border:1px solid #3c4c5b;
  border-radius:6px;
  background:#0a1017;
  color:#d9e2e8;
  text-align:left;
}
.time-materials-page .tm-area-tabs>button span{font-size:12.5px;font-weight:750}
.time-materials-page .tm-area-tabs>button small{color:#94a6b3;font-size:10px}
.time-materials-page .tm-area-tabs>button:hover{border-color:#ff851b;background:#18130f}
.time-materials-page .tm-area-tabs>button.active{border-color:#ff851b;background:#21160e;box-shadow:inset 3px 0 0 #ff851b;color:#fff}
.time-materials-page .tm-area-tabs>button.active small{color:#ffad61}

.time-materials-page .tm-area-dialog{position:fixed;z-index:1200;inset:0;display:grid;place-items:center;padding:20px}
.time-materials-page .tm-area-dialog-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(1,5,9,.78);backdrop-filter:blur(2px)}
.time-materials-page .tm-area-dialog>section{position:relative;z-index:1;width:min(470px,100%);padding:18px;border:1px solid #4b5e6e;border-radius:10px;background:#0b121a;box-shadow:0 24px 70px rgba(0,0,0,.65)}
.time-materials-page .tm-area-dialog header{position:relative!important;inset:auto!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;margin:0 0 15px!important;padding:0!important;border:0!important;background:transparent!important}
.time-materials-page .tm-area-dialog header small{color:#ff9a3d;font-size:10.5px;font-weight:800;text-transform:uppercase}
.time-materials-page .tm-area-dialog h3{margin:3px 0 2px!important;color:#fff!important;font-size:19px!important}
.time-materials-page .tm-area-dialog header p{margin:0;color:#aebdc7;font-size:12px}
.time-materials-page .tm-area-dialog header>button{display:grid;place-items:center;width:34px;height:34px;border:1px solid #465968;border-radius:6px;background:#101a23;color:#fff}
.time-materials-page .tm-area-dialog>section>label{display:grid;gap:6px;color:#d7e1e7;font-size:11px;font-weight:750;text-transform:uppercase}
.time-materials-page .tm-area-dialog input{height:42px!important;border:1px solid #526777!important;border-radius:6px!important;background:#070d13!important;color:#fff!important;padding:0 11px!important;font-size:14px!important}
.time-materials-page .tm-area-dialog input:focus{outline:2px solid #ff851b;outline-offset:1px}
.time-materials-page .tm-area-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.time-materials-page .tm-area-presets>span{flex:0 0 100%;color:#9eacb6;font-size:10.5px;text-transform:uppercase}
.time-materials-page .tm-area-presets button{min-height:30px;padding:5px 9px;border:1px solid #384a59;border-radius:999px;background:#0c1720;color:#dce5ea;font-size:11px}
.time-materials-page .tm-area-presets button:hover{border-color:#ff851b;color:#ffad61}
.time-materials-page .tm-area-dialog footer{position:relative!important;inset:auto!important;display:flex!important;justify-content:flex-end!important;gap:8px!important;margin:16px 0 0!important;padding:0!important;border:0!important;background:transparent!important}

@media (min-width:900px) and (max-width:1366px){
  #app .customer-proposal-modal{padding:24px 44px!important;align-items:center!important}
  #app .customer-proposal-dialog{width:min(1020px,calc(100vw - 88px));max-height:calc(100svh - 48px);border-radius:16px}
  #app .customer-proposal-dialog>header{grid-template-columns:54px minmax(0,1fr) 38px;gap:13px;padding:13px 22px}
  #app .customer-proposal-dialog .proposal-start-icon{width:50px;height:50px}
  #app .customer-proposal-dialog>header h2{font-size:23px}
  #app .customer-proposal-dialog>header p{font-size:13px}
  #app .customer-proposal-identity{margin:10px 22px 0;padding:9px 13px;min-height:58px}
  #app .customer-proposal-fields{padding:10px 22px 0;gap:9px 13px}
  #app .customer-proposal-fields input,#app .customer-proposal-fields select{height:40px;font-size:13px}
  #app .customer-proposal-start-method,#app .customer-proposal-modules{padding:10px 22px 0}
  #app .customer-proposal-start-method h3,#app .customer-proposal-modules h3{margin-bottom:6px;font-size:16px}
  #app .customer-proposal-start-method button{min-height:52px;padding:8px 11px}
  #app .customer-proposal-start-method button strong{font-size:13px}
  #app .customer-proposal-start-method button small{font-size:11px}
  #app .customer-proposal-modules>div:first-child p{margin-bottom:6px;font-size:12px}
  #app .customer-proposal-module-grid{gap:8px 12px}
  #app .customer-proposal-module{min-height:72px;grid-template-columns:36px minmax(0,1fr);gap:9px;padding:9px 12px;border-radius:9px}
  #app .customer-proposal-module .module-icon{width:34px;height:34px}
  #app .customer-proposal-module strong{font-size:14px}
  #app .customer-proposal-module small{font-size:11px;line-height:1.22}
  #app .customer-proposal-combine-note{margin-top:7px;padding-block:7px;font-size:11px}
  #app .customer-proposal-dialog>footer{position:sticky;bottom:0;z-index:3;margin-top:10px;padding:10px 22px;background:#081520}
  #app .customer-proposal-dialog>footer .primary{min-width:250px;min-height:42px}

  .time-materials-page .tm-workspace{grid-template-columns:minmax(0,1fr) 300px!important;gap:10px!important;padding:10px 12px 16px!important}
  .time-materials-page .tm-painting-type-tabs{gap:5px;padding:8px 12px 0}
  .time-materials-page .tm-painting-type-tabs>button{grid-template-columns:24px minmax(0,1fr);gap:6px;min-height:50px;padding:7px 8px}
  .time-materials-page .tm-painting-type-tabs>button>svg{width:17px;height:17px}
  .time-materials-page .tm-painting-type-tabs strong{font-size:11px}
  .time-materials-page .tm-painting-type-tabs small{font-size:8.5px}
  .time-materials-page .tm-main-tools{padding-top:8px}
  .time-materials-page .tm-record-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .time-materials-page .tm-record-strip .proposal-estimator-note-trigger,
  .time-materials-page .tm-record-strip .proposal-estimator-work-order{min-height:52px!important;padding:7px 9px!important}
  .time-materials-page .tm-scope-context{grid-template-columns:minmax(130px,.75fr) minmax(150px,1fr) minmax(150px,1fr) auto;gap:8px}
  .time-materials-page .tm-area-manager{padding:9px 10px}
}

@media(max-width:899px){
  .time-materials-page .tm-painting-type-tabs{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:12px}
  .time-materials-page .tm-area-manager>header{align-items:stretch!important;flex-direction:column}
  .time-materials-page .tm-add-area{width:100%}
}