/* =====================================================================
   GaliVue V5.1.154 — TABLET DIALOG + ACTION CONSISTENCY

   Presentation-only owner for user-facing modal/action surfaces.
   Scope: tablet 701–1100px, plus a neutral branded focus treatment for
   modal controls at every size. Runtime, workflow and backend logic untouched.
   ===================================================================== */

/* Keep keyboard focus visible, but remove the browser-blue treatment that can
   look like an accidental selected state inside GaliVue dialogs. */
.modal-layer :is(button,[role="button"],input,select,textarea):focus:not(:focus-visible){
  outline:none!important;
}
.modal-layer :is(button,[role="button"],input,select,textarea):focus-visible{
  outline:2px solid #9bc51d!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px rgba(155,197,29,.16)!important;
}
.modal-layer .icon:focus-visible,
.modal-layer .icon-button:focus-visible{
  border-radius:999px!important;
}

@media (min-width:701px) and (max-width:1100px){
  /* Compact decision dialogs: consistent tablet geometry and no viewport spill. */
  #confirmDialog .confirm-panel,
  #clientMessageDialog .client-message-panel,
  #notificationPreferencesDialog .notification-preferences-panel,
  #photographerReviewDialog .photographer-review-panel,
  #deliveryIntroDialog .delivery-intro-panel{
    width:min(680px,calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
    max-height:calc(100dvh - 32px)!important;
    overflow:auto!important;
    box-sizing:border-box!important;
  }

  /* Modal headers must never squeeze the title under the close button. */
  .modal-layer .dialog-head,
  #clientPortalDialog .client-portal-studio-head{
    min-width:0!important;
    gap:14px!important;
  }
  .modal-layer .dialog-head>div,
  #clientPortalDialog .client-portal-studio-head>div{
    min-width:0!important;
    max-width:100%!important;
  }
  .modal-layer .dialog-head :is(h2,h3,p,strong),
  #clientPortalDialog .client-portal-studio-head :is(h2,h3,p,strong){
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  .modal-layer .dialog-head>.icon,
  #clientPortalDialog .client-portal-studio-head>.icon{
    flex:0 0 auto!important;
  }

  /* Decision/action rows use the approved phone hierarchy on tablet too.
     Hidden optional actions cannot leave empty columns. */
  :is(
    #clientMessageDialog .client-message-actions,
    #notificationPreferencesDialog .notification-actions,
    #profileDialog .notification-actions,
    #photographerReviewDialog .review-actions,
    #deliveryIntroDialog .delivery-intro-actions,
    #selectionReceivedDialog .selection-next-actions,
    #selectionReceivedDialog .selection-download-actions,
    #billingHistoryDialog .billing-statement-actions,
    #planUsageDialog .plan-usage-actions,
    #planUsageDialog .plan-confirm-actions,
    #finalDeliveryDialog .final-matched-actions
  ){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
  }

  :is(
    #clientMessageDialog .client-message-actions,
    #notificationPreferencesDialog .notification-actions,
    #profileDialog .notification-actions,
    #photographerReviewDialog .review-actions,
    #deliveryIntroDialog .delivery-intro-actions,
    #selectionReceivedDialog .selection-next-actions,
    #selectionReceivedDialog .selection-download-actions,
    #billingHistoryDialog .billing-statement-actions,
    #planUsageDialog .plan-usage-actions,
    #planUsageDialog .plan-confirm-actions,
    #finalDeliveryDialog .final-matched-actions
  ) > :is(button,a,.button,.primary,.secondary,.primary-small,.danger-outline,.danger-primary):not(.hidden){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    box-sizing:border-box!important;
    justify-self:stretch!important;
  }

  :is(
    #clientMessageDialog .client-message-actions,
    #notificationPreferencesDialog .notification-actions,
    #profileDialog .notification-actions,
    #photographerReviewDialog .review-actions,
    #deliveryIntroDialog .delivery-intro-actions,
    #selectionReceivedDialog .selection-next-actions,
    #selectionReceivedDialog .selection-download-actions,
    #billingHistoryDialog .billing-statement-actions,
    #planUsageDialog .plan-usage-actions,
    #planUsageDialog .plan-confirm-actions,
    #finalDeliveryDialog .final-matched-actions
  ) > .hidden{
    display:none!important;
  }

  /* Billing controls were desktop-flex until a much smaller breakpoint.
     Give tablet a deliberate two-column filter layout, then full-width Apply. */
  #billingHistoryDialog .billing-history-tools{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    align-items:end!important;
  }
  #billingHistoryDialog .billing-history-tools label{
    min-width:0!important;
    width:100%!important;
  }
  #billingHistoryDialog #billingHistoryApply{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
  }

  /* Plan-change confirmation cards: avoid four squeezed columns on tablet. */
  #planUsageDialog .plan-confirm-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  /* Profile/account cards: keep controls inside the panel instead of squeezing. */
  #profileDialog .profile-photographer-id,
  #profileDialog .profile-billing-history-card{
    min-width:0!important;
    flex-wrap:wrap!important;
  }
  #profileDialog .profile-photographer-id>div,
  #profileDialog .profile-billing-history-card>div{
    min-width:0!important;
    flex:1 1 320px!important;
  }

  /* Selection/final delivery action labels can be long in FR/ES/DE. */
  :is(#selectionReceivedDialog,#finalDeliveryDialog,#planUsageDialog,#billingHistoryDialog)
  button:not(.icon):not(.icon-button){
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
}