/* MK Detailing V221 — MOBILE VIEWPORT / SAFE AREA / FUNCTIONAL CONTROLS
   Cel: dostępne przyciski zamykania/cofania na iOS/Android, bez wchodzenia pod notch/status bar,
   jedna naturalna oś przewijania strony oraz bezpieczne pełnoekranowe dialogi na małych ekranach.
   Plik nie zmienia logiki przycisków, logowania, Finansów ani danych. */

:root{
  --mk-safe-top: env(safe-area-inset-top, 0px);
  --mk-safe-right: env(safe-area-inset-right, 0px);
  --mk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mk-safe-left: env(safe-area-inset-left, 0px);
}

html,body{max-width:100%;}
html{-webkit-text-size-adjust:100%;}
body{min-height:100dvh;overflow-x:hidden;}

@media screen and (max-width:820px){
  /* Jeden pionowy scroll strony. Nie tworzymy dodatkowego scrollera dla głównego panelu. */
  html:not(.md-lock):not(.mini-booking-lock),
  body:not(.md-lock):not(.mini-booking-lock):not(.sidebar-open){
    overflow-y:auto;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .ops-main,.dashboard-shell,.admin-tab-panel.active,.app-shell,.app-main,.app-view,.panel-shell{
    max-width:100%;min-width:0;overflow-x:hidden;
  }
  html.mk-app-top-level,html.mk-app-top-level body:not(.sidebar-open){
    height:auto!important;min-height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior-y:auto!important;-webkit-overflow-scrolling:touch!important;
  }
  html.mk-app-top-level .ops-app,html.mk-app-top-level .ops-main,html.mk-app-top-level .dashboard-shell,
  html.mk-app-top-level .admin-tab-panel.active{
    height:auto!important;max-height:none!important;overflow-y:visible!important;
  }

  /* Minimalny, pewny obszar dotyku dla kontrolek funkcyjnych. */
  :is(.dialog-close,.round-close,.mk-task-dialog-close,.mk-ui-settings-close,.mk-help-close,
      .finance-lock-close-v185,.staff-module-close-v181,.md-close,.mini-booking-close,
      .package-modal-close,.service-modal-close,.account-benefits-close,.mk-app-site-dialog-close,
      .photo-modal-close,.video-modal-close,#mk-return-to-app,.client-mobile-back,
      .ops-menu-toggle,.ops-notification-button){
    box-sizing:border-box!important;min-width:44px!important;min-height:44px!important;
    width:44px!important;height:44px!important;display:grid!important;place-items:center!important;
    flex:0 0 44px!important;line-height:1!important;-webkit-tap-highlight-color:transparent;
    touch-action:manipulation;z-index:10050;
  }
  .panel-button,.button,.calendar-icon-button,.calendar-today-button,.admin-tabs button{
    min-height:44px;touch-action:manipulation;
  }

  /* PANEL ADMIN / PRACOWNIK: status bar/notch nigdy nie przykrywa topbara. */
  .ops-topbar{
    box-sizing:border-box!important;
    padding-top:max(8px,var(--mk-safe-top))!important;
    padding-right:max(9px,var(--mk-safe-right))!important;
    padding-left:max(9px,var(--mk-safe-left))!important;
  }
  html.mk-inside-pwa .ops-topbar{
    height:calc(58px + var(--mk-safe-top))!important;
    min-height:calc(58px + var(--mk-safe-top))!important;
    padding-top:var(--mk-safe-top)!important;
  }
  html.mk-inside-pwa .ops-v98 .dashboard-shell{
    padding-top:calc(68px + var(--mk-safe-top))!important;
    padding-left:max(12px,var(--mk-safe-left))!important;
    padding-right:max(12px,var(--mk-safe-right))!important;
    padding-bottom:calc(28px + var(--mk-safe-bottom))!important;
  }
  #mk-return-to-app{position:relative!important;inset:auto!important;}

  /* KAŻDY panel-dialog (w tym „Załóż kartę klienta”): pełny bezpieczny ekran na telefonie. */
  dialog.panel-dialog{
    box-sizing:border-box!important;
    width:100vw!important;max-width:100vw!important;
    height:100dvh!important;max-height:100dvh!important;
    margin:0!important;inset:0!important;
    border-radius:0!important;border-left:0!important;border-right:0!important;
    padding:12px max(14px,var(--mk-safe-right)) calc(22px + var(--mk-safe-bottom)) max(14px,var(--mk-safe-left))!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;
  }
  dialog.panel-dialog .dialog-close{
    position:sticky!important;float:none!important;
    top:max(6px,var(--mk-safe-top))!important;
    right:auto!important;left:auto!important;
    margin:0 0 10px auto!important;
    background:rgba(21,21,29,.97)!important;
    box-shadow:0 5px 18px rgba(0,0,0,.35)!important;
  }
  dialog.panel-dialog .panel-form,
  dialog.panel-dialog form,
  dialog.panel-dialog>div{max-width:100%;min-width:0;}
  dialog.panel-dialog .dialog-actions{padding-bottom:max(2px,var(--mk-safe-bottom));}

  /* Karta klienta — krzyżyk pozostaje zawsze pod paskiem baterii, również podczas scrolla. */
  #client-card-form-dialog .dialog-close{
    top:max(8px,var(--mk-safe-top))!important;
    z-index:12000!important;
  }

  /* Dialogi APP klienta. */
  dialog.app-dialog{
    box-sizing:border-box!important;width:100vw!important;max-width:100vw!important;
    height:100dvh!important;max-height:100dvh!important;margin:0!important;inset:0!important;
    border-radius:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;
  }
  .app-dialog .dialog-close-row{
    position:sticky!important;top:0!important;z-index:100!important;height:calc(56px + var(--mk-safe-top))!important;
    box-sizing:border-box!important;align-items:flex-end!important;
    padding:var(--mk-safe-top) max(10px,var(--mk-safe-right)) 6px max(10px,var(--mk-safe-left))!important;
    background:linear-gradient(#0b0b11 72%,rgba(11,11,17,0))!important;
  }
  .app-dialog .round-close{margin-left:auto!important;background:rgba(21,21,29,.98)!important;}
  .app-dialog .dialog-body{
    padding:10px max(16px,var(--mk-safe-right)) calc(24px + var(--mk-safe-bottom)) max(16px,var(--mk-safe-left))!important;
  }

  /* Ustawienia / zadania / pomoc — pełny viewport i nagłówek pod safe area. */
  dialog.mk-task-dialog,dialog.mk-ui-settings-dialog,dialog.mk-help-dialog{
    box-sizing:border-box!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;
    margin:0!important;inset:0!important;border-radius:0!important;overflow:hidden!important;
  }
  .mk-task-dialog-shell,.mk-ui-settings-card,.mk-help-card{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;
    overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;
    padding-bottom:calc(22px + var(--mk-safe-bottom))!important;
  }
  .mk-task-dialog-head,.mk-ui-settings-head,.mk-help-head{
    position:sticky!important;top:0!important;z-index:20!important;
    padding-top:max(12px,var(--mk-safe-top))!important;
    padding-right:max(12px,var(--mk-safe-right))!important;
    padding-left:max(12px,var(--mk-safe-left))!important;
    background:rgba(9,10,15,.98)!important;
  }

  /* PIN Finansów: mały dialog może zostać centralny, ale zawsze mieści się w bezpiecznym obszarze. */
  dialog.finance-lock-dialog-v185{
    box-sizing:border-box!important;
    width:min(430px,calc(100vw - var(--mk-safe-left) - var(--mk-safe-right) - 20px))!important;
    max-height:calc(100dvh - var(--mk-safe-top) - var(--mk-safe-bottom) - 20px)!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;
  }
  .finance-lock-dialog-v185 form{padding-top:24px!important;padding-bottom:calc(24px + var(--mk-safe-bottom))!important;}
  .finance-lock-close-v185{top:14px!important;right:max(14px,var(--mk-safe-right))!important;}

  /* Mini Detailer / formularz Mini. */
  .mini-detailer-shell{height:100dvh!important;max-height:100dvh!important;}
  .md-topbar{
    box-sizing:border-box!important;
    padding-top:calc(10px + var(--mk-safe-top))!important;
    padding-right:max(12px,var(--mk-safe-right))!important;
    padding-left:max(12px,var(--mk-safe-left))!important;
  }
  .md-top-actions{flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:7px!important;}
  .md-top-back{min-height:44px!important;touch-action:manipulation;}
  .md-stage{padding-bottom:calc(24px + var(--mk-safe-bottom))!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;}
  .mini-booking-shell{height:100dvh!important;max-height:100dvh!important;}
  .mini-booking-header{
    box-sizing:border-box!important;top:0!important;
    padding-top:calc(12px + var(--mk-safe-top))!important;
    padding-right:max(12px,var(--mk-safe-right))!important;
    padding-left:max(12px,var(--mk-safe-left))!important;
  }
  .mini-booking-body{padding-bottom:calc(28px + var(--mk-safe-bottom))!important;-webkit-overflow-scrolling:touch!important;}

  /* Publiczne modale: górna krawędź zawsze poniżej notcha/status bara. */
  .package-modal,.service-modal,.account-benefits-modal,.photo-modal,.video-modal{
    box-sizing:border-box!important;
    padding-top:calc(var(--mk-safe-top) + 8px)!important;
    padding-right:max(8px,var(--mk-safe-right))!important;
    padding-bottom:calc(var(--mk-safe-bottom) + 8px)!important;
    padding-left:max(8px,var(--mk-safe-left))!important;
  }
  .package-modal-dialog,.service-modal-dialog,.account-benefits-dialog{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    max-height:calc(100dvh - var(--mk-safe-top) - var(--mk-safe-bottom) - 16px)!important;
    overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;
  }
  .package-modal-close,.service-modal-close{
    position:sticky!important;top:0!important;margin-left:auto!important;margin-right:0!important;z-index:12000!important;
  }
  .account-benefits-close,.mk-app-site-dialog-close{
    top:calc(var(--mk-safe-top) + 10px)!important;right:max(10px,var(--mk-safe-right))!important;z-index:12000!important;
  }
  .mk-app-site-dialog{
    box-sizing:border-box!important;width:100vw!important;max-width:100vw!important;max-height:100dvh!important;margin:0!important;
    padding:calc(var(--mk-safe-top) + 8px) max(8px,var(--mk-safe-right)) calc(var(--mk-safe-bottom) + 8px) max(8px,var(--mk-safe-left))!important;
    overflow:hidden!important;
  }
  .mk-app-site-dialog-card{box-sizing:border-box!important;width:100%!important;max-height:calc(100dvh - var(--mk-safe-top) - var(--mk-safe-bottom) - 16px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;}

  /* Galerie / filmy — krzyżyk jest przyklejony do bezpiecznego rogu ekranu, nie nad materiałem. */
  .photo-modal-close,.video-modal-close{
    position:fixed!important;top:calc(var(--mk-safe-top) + 10px)!important;right:calc(var(--mk-safe-right) + 10px)!important;
    margin:0!important;z-index:13000!important;background:rgba(17,17,25,.96)!important;
  }
  .photo-modal-dialog,.video-modal-dialog{max-width:100%!important;max-height:100%!important;}
  .photo-modal-dialog{height:calc(100dvh - var(--mk-safe-top) - var(--mk-safe-bottom) - 20px)!important;}

  /* Cofanie w panelu klienta — przycisk nie znika pod nagłówkiem. */
  .client-mobile-back{
    position:relative!important;top:auto!important;left:auto!important;margin:0!important;
    border-radius:13px!important;z-index:20!important;
  }
  .panel-back{display:inline-flex!important;align-items:center!important;min-height:44px!important;padding:8px 4px!important;}

  /* Dolne akcje i formularze nie wpadają pod home indicator. */
  .dialog-actions,.service-modal-actions,.package-modal-actions,.account-benefits-actions,.card-actions{
    padding-bottom:max(0px,var(--mk-safe-bottom));
  }
}

@media screen and (max-width:390px){
  .ops-topbar-left,.ops-topbar-right{gap:5px!important;}
  .panel-button,.button{max-width:100%;white-space:normal;}
  .dialog-actions{gap:8px!important;}
}

@media screen and (orientation:landscape) and (max-height:520px){
  dialog.panel-dialog,dialog.app-dialog,dialog.mk-task-dialog,dialog.mk-ui-settings-dialog,dialog.mk-help-dialog{
    padding-left:max(14px,var(--mk-safe-left))!important;padding-right:max(14px,var(--mk-safe-right))!important;
  }
  .ops-topbar{padding-left:max(9px,var(--mk-safe-left))!important;padding-right:max(9px,var(--mk-safe-right))!important;}
}