/* Keep working forms compact while allowing small screens and enlarged text to scroll. */
/* Navigation stays compact on every page; short screens retain wheel, touch and keyboard access. */
#app #sideNav,#app #sideNav .nav{scrollbar-width:none!important;scrollbar-gutter:auto}
#app #sideNav::-webkit-scrollbar,#app #sideNav .nav::-webkit-scrollbar{display:none;width:0;height:0}
@media screen and (min-width:721px){
  #app #sideNav .nav{padding:2px;overflow-y:auto;overflow-x:hidden;min-height:0}
  #app #sideNav .nav button:not(.owner-restricted){flex:0 1 38px;min-height:32px!important;max-height:none;padding:4px 9px!important;white-space:normal}
}

/* Entry notices keep their content and actions in a smaller, readable panel. */
#modal .dialog:not(.receipt-dialog):has(.saraya-welcome){width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
#modal .dialog:not(.receipt-dialog):has(.saraya-welcome)>.dialog-head{padding:7px 14px;min-height:44px;font-size:16px}
#modal .dialog:not(.receipt-dialog):has(.saraya-welcome)>.dialog-head .btn{width:36px;min-height:36px;padding:3px}
#modal .dialog:not(.receipt-dialog):has(.saraya-welcome)>#modalBody{scrollbar-gutter:auto;scroll-padding-bottom:12px}
#modalBody .saraya-welcome{padding:14px 18px;text-align:center}
#modalBody .saraya-welcome .welcome-icon.saraya-logo{width:64px;height:64px;border-radius:12px}
#modalBody .saraya-welcome h2{font-size:20px;line-height:1.5;margin:8px 0 3px;overflow-wrap:anywhere}
#modalBody .saraya-welcome>p{font-size:14px;line-height:1.6;margin:3px 0 9px}
#modalBody .saraya-welcome .summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin:10px 0!important}
#modalBody .saraya-welcome .summary-grid>div{padding:7px 4px;border-radius:9px}
#modalBody .saraya-welcome .summary-grid b{font-size:22px;line-height:1.4}
#modalBody .saraya-welcome .summary-grid small{font-size:14px;line-height:1.5}
#modalBody .saraya-welcome>.note{padding:7px 10px;margin:9px 0!important;font-size:14px;line-height:1.6}
#modalBody .saraya-welcome>.btn{min-height:40px;padding:6px 12px;font-size:16px}
#app #dashboard #dashboardNoticeGrid{gap:8px!important}
#app #dashboard #dashboardNoticeGrid>:is(.dashboard-quick-alert,.cleaning-alert,.month-dashboard-alert,.departure-dashboard-alert){padding:8px 10px!important;min-height:0!important;margin:0!important;font-size:14px;line-height:1.5;gap:4px}
#app #dashboard #dashboardNoticeGrid .btn,#app #dashboard #bookingCorrectionDashboardAlert .btn{min-height:36px!important;padding:5px 10px!important;font-size:14px!important}
#app #dashboard #dashboardNoticeGrid p{margin:4px 0}
#app #dashboard #bookingCorrectionDashboardAlert{padding:8px 12px;margin-bottom:0;font-size:14px;line-height:1.5}
#app #dashboard #bookingCorrectionDashboardAlert p{margin:4px 0 7px}
@media(max-width:440px){
  #modalBody .saraya-welcome{padding:12px}
  #modalBody .saraya-welcome .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

#modal .dialog:not(.receipt-dialog):has(.booking-correction-form,.employee-permissions-form){width:min(1440px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
#modal .dialog:not(.receipt-dialog):has(.booking-correction-form,.employee-permissions-form)>.dialog-head{padding:8px 16px;min-height:44px}
#modal .dialog:not(.receipt-dialog):has(.booking-correction-form,.employee-permissions-form)>.dialog-head .btn{min-height:32px;width:34px;padding:2px}
#modal .dialog:not(.receipt-dialog):has(.booking-correction-form,.employee-permissions-form)>#modalBody{scrollbar-gutter:auto;scroll-padding-bottom:54px}
#modalBody .booking-editor-actions{padding:8px 16px 0;gap:8px}
#modalBody .booking-editor-actions .btn{min-height:32px;padding:4px 12px;font-size:14px}
#modalBody .booking-correction-form{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px 16px}
#modalBody .booking-correction-form>.note{margin:0;padding:6px 10px;font-size:14px;line-height:1.5}
.booking-correction-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
#modalBody .booking-correction-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;min-width:0;margin:0;padding:8px 12px 12px;border:1px solid #cbdad3;border-radius:12px;align-content:start}
.booking-correction-section legend{padding:0 7px;color:#17594c;font-size:16px;font-weight:700}
#modalBody .booking-correction-section .field{min-width:0;margin:0;gap:3px}
#modalBody .booking-correction-section .full{grid-column:1/-1}
#modalBody .booking-correction-section label{font-size:14px;line-height:1.4}
#modalBody .booking-correction-section :is(input,select,textarea){font-size:16px;min-height:38px;padding:6px 9px}
#modalBody .booking-correction-section textarea{min-height:84px;max-height:140px;field-sizing:fixed;resize:vertical}
#modalBody .booking-correction-section small{font-size:12px;line-height:1.45}
#modalBody #bookingCollectionSource:empty{display:none}
#modalBody .booking-correction-form>.form-actions{padding:6px 0}

#modalBody form.employee-permissions-form{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px 12px;padding:10px 14px}
#modalBody form.employee-permissions-form .field{gap:3px}
#modalBody form.employee-permissions-form .field label{font-size:14px;line-height:1.4}
#modalBody form.employee-permissions-form .field :is(input,select){min-height:36px;padding:5px 8px;font-size:14px}
#modalBody .employee-permission-groups{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 8px}
#modalBody .employee-permission-group{padding:3px 7px 6px;border-radius:8px}
#modalBody form.employee-permissions-form .employee-permission-group .checkgrid{grid-template-columns:minmax(0,1fr);gap:2px}
#modalBody form.employee-permissions-form label:has(input[type="checkbox"]){min-height:26px;padding:3px 5px;font-size:14px;line-height:1.3;gap:7px}
#modalBody form.employee-permissions-form input[type="checkbox"]{width:16px!important;min-width:16px!important;max-width:16px!important;height:16px!important;min-height:16px!important;max-height:16px!important;flex-basis:16px}
#modalBody .employee-permission-toolbar{gap:4px 10px}
#modalBody .employee-permission-toolbar .actions{gap:6px}
#modalBody .employee-permission-toolbar .btn{font-size:14px;padding:3px 8px;min-height:32px}
#modalBody .employee-permission-toolbar small{line-height:1.4}
#modalBody .employee-sensitive-permissions{margin:0;padding:4px 8px 6px;border-width:1px}
#modalBody form.employee-permissions-form .employee-sensitive-permissions .checkgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px 6px}
#modalBody .employee-sensitive-permissions small{margin:4px 0 0;line-height:1.4}
#modalBody .employee-permission-help{line-height:1.4}
#modalBody .employee-owner-only{padding:4px 8px;line-height:1.4}
#modalBody form.employee-permissions-form>.form-actions{bottom:-10px;justify-content:space-between;padding:6px 0;gap:8px}
#modalBody .employee-active-toggle{font-weight:700;color:#17594c}

#app .content:has(#payroll.active){width:100%;max-width:none;padding:12px 18px}
#app #payroll>.toolbar{margin:0 0 10px;gap:8px}
#app #payroll>.toolbar h2{margin:0;font-size:1.15rem}
#app #payroll>.cards{margin:0 0 12px;gap:12px}
#app #payroll>.cards .card{min-height:76px;padding:8px 14px}
#app #payroll>.cards .value{font-size:1.55rem;margin-top:4px;line-height:1.4}
.payroll-registers{display:grid;gap:12px}
#payroll .payroll-register{min-width:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
#payroll .payroll-register h3{margin:0;padding:8px 14px;font-size:16px;color:#17594c;border-bottom:1px solid var(--line)}
#payroll .payroll-register .tablewrap{border:0;border-radius:0;box-shadow:none;max-height:28dvh;overflow:auto}
#payroll .payroll-register table{min-width:740px;font-size:14px}
#payroll .payroll-register :is(th,td){padding:7px 10px;line-height:1.5;font-size:14px}
#payroll .payroll-register thead{position:sticky;top:0;z-index:1;background:#edf4f7}
#payroll .payroll-register .empty{padding:16px!important;color:#526573;background:#fff}
#payroll .payroll-register td:first-child{min-width:135px;font-weight:700}
#payroll .payroll-register td .btn{font-size:14px;min-height:32px;padding:3px 9px}
#payroll .payroll-register td:nth-child(2){direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.report-filter{display:grid;gap:4px;min-width:180px;color:#17594c;font-size:14px;font-weight:700}
.report-filter>.numeric-date-control{width:210px}
#reportType{min-width:220px;min-height:44px;padding:7px 12px;border:1px solid #b9cfc5;border-radius:12px;background:#fff;color:#164c40;font:inherit;font-size:16px;box-shadow:0 3px 9px #163e3010}
#reportType:focus-visible{outline:2px solid #b98a18;outline-offset:2px}

/* Reduce the distance between related booking fields, particularly on phones. */
#guestPortal .guest-form{max-width:1180px;padding:14px}
#guestPortal #guestBookingForm{gap:8px 12px;align-items:start}
#guestPortal #guestBookingForm .field{gap:3px;margin:0}
#guestPortal #guestBookingForm .field label{font-size:14px;line-height:1.4}
#guestPortal #guestBookingForm :is(input,select,textarea){font-size:16px}
#guestPortal #guestBookingForm .field :is(input,select){min-height:42px;padding:7px 9px}
#guestPortal #guestBookingForm .field textarea{min-height:54px;max-height:none}
#guestPortal #guestBookingForm .full{grid-column:1/-1}
#guestPortal #guestBookingForm .guest-whatsapp-consent{font-size:14px;line-height:1.5}
#guestPortal #guestBookingForm .form-actions{grid-column:1/-1;margin:0;padding-top:3px}
@media(max-width:1199px){
  #modalBody form.employee-permissions-form{grid-template-columns:repeat(3,minmax(0,1fr))}
  #modalBody .employee-permission-groups{grid-template-columns:repeat(3,minmax(0,1fr))}
  #modalBody form.employee-permissions-form .employee-sensitive-permissions .checkgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .booking-correction-sections{grid-template-columns:repeat(2,minmax(0,1fr))}
  .booking-correction-section:last-child{grid-column:1/-1}
}
@media(max-width:720px){
  .booking-correction-sections{grid-template-columns:minmax(0,1fr)}
  #modalBody .booking-correction-section{padding:7px 9px 10px}
  #modalBody .employee-permission-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  #modalBody form.employee-permissions-form .employee-sensitive-permissions .checkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #guestPortal .guest-body{padding:10px}
  #guestPortal .guest-form{padding:10px;border-radius:12px}
  #guestPortal .guest-form .note{margin:0 0 8px;padding:6px 8px;font-size:14px;line-height:1.5}
  #guestPortal #guestBookingForm{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #guestPortal #guestBookingForm .field:has([name="full_name"],[name="room_id"],[name="display_price"]){grid-column:1/-1}
  #app .content:has(#payroll.active){padding:10px}
  #app #payroll>.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #payroll .payroll-register .tablewrap{max-height:45dvh}
}
@media(max-width:400px){
  #modalBody .booking-correction-section{grid-template-columns:minmax(0,1fr)}
  #modalBody .employee-permission-groups{grid-template-columns:minmax(0,1fr)}
  #guestPortal #guestBookingForm .field:has([name="contact"],[name="identity_number"]){grid-column:1/-1}
}