/* Calm, compact spacing for everyday booking entry and calendar scanning. */
.modal{width:min(540px,calc(100vw - 32px));padding:20px}
.form-grid{gap:11px}.form-field{gap:5px}.form-field input,.form-field select{padding:9px 10px}
.modal-actions{margin-top:18px}.payment-callout{padding:13px 14px;gap:10px}
.week-calendar{grid-template-columns:68px repeat(7,minmax(76px,1fr))}.cal-cell{height:74px}.cal-time{height:74px}
.month-cell{min-height:100px}.event b,.event span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-wrap{max-width:100%;overscroll-behavior-x:contain}

@media(max-width:700px){
  .main-content{padding:16px 12px 88px}.topbar{margin-bottom:18px}.toolbar{gap:7px;margin-bottom:12px}
  .modal-backdrop{padding:12px;align-items:start;overflow:auto}.modal{width:100%;max-height:none;margin:auto 0;padding:16px}
  .modal h2{font-size:22px}.modal p{margin-bottom:14px}.form-grid{gap:9px}.form-field input,.form-field select{padding:9px 10px!important;font-size:14px!important}
  .modal-actions{gap:7px;margin-top:16px}.modal-actions button{padding:9px 10px}
  .payment-callout{padding:11px;gap:7px;font-size:12px}.payment-callout span{flex:1 1 calc(50% - 7px)!important;min-width:0}.payment-callout small{font-size:9px}.payment-callout b{font-size:15px}
  .week-calendar{grid-template-columns:48px repeat(7,68px);min-width:524px}.cal-header{padding:8px 3px}.cal-header strong{font-size:16px}.cal-time{height:68px;padding:7px 4px}.cal-cell{height:68px;padding:3px}
  .event{padding:4px;font-size:9px}.event b{font-size:9px}.event span{font-size:8px}.month-calendar{min-width:560px;padding:6px}.month-cell{min-height:82px;padding:4px}.month-events{padding-top:4px}.month-events .event{min-height:24px}
}