/*
 * PROJETO: BARBEARIA GUARARAPES
 * V22 — REVISÃO FINAL MOBILE E ENTREGA AO CLIENTE
 * Camada responsiva final. Mantém dados, Supabase e permissões existentes.
 */

:root{
  --ggr22-bg:#02060c;
  --ggr22-panel:#071421;
  --ggr22-panel-2:#0a1a2a;
  --ggr22-line:rgba(76,224,255,.21);
  --ggr22-text:#f0f8ff;
  --ggr22-muted:#9eb2c6;
  --ggr22-cyan:#51efff;
  --ggr22-gold:#f2c96f;
  --ggr22-danger:#ff9da7;
}

html{min-width:320px;overflow-x:hidden;background:var(--ggr22-bg)!important;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px;max-width:100vw;overflow-x:hidden;overscroll-behavior-x:none;background:var(--ggr22-bg)!important}
body,input,select,textarea,button{font-synthesis:none}
img,svg,canvas,video{max-width:100%}
button,a,input,select,textarea,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(81,239,255,.38)!important;outline-offset:2px!important}
.app-shell,.main-area,.content,.panel,.modal,.modal__body,.form-grid,.settings-grid,.dashboard-grid,.metric-grid,.compact-grid>*{min-width:0}
.content{max-width:100%!important}

/* Campos e controles: leitura e toque confortáveis. */
input,select,textarea{max-width:100%!important;min-height:44px!important;font-size:16px!important}
textarea{min-height:104px!important;resize:vertical}
.button,.icon-button,.text-button,.select-button,.client-access-submit,.public-booking-cta,.login-submit,.install-app__button,.client-row-open,.client-row-delete,.service-action--edit,.service-action--delete{min-height:44px!important}
.icon-button{min-width:44px!important}
.button,.select-button,.text-button{white-space:normal!important;line-height:1.25!important}

/* Superfícies finais: elimina qualquer branco herdado fora da impressão. */
.content .panel,.content .data-panel,.content .settings-card,.content .compact-card,.content .metric,
.content .team-card,.content .unit-card,.content .order-card,.content .client-info-card,
.content .client-own-card,.content .client-catalog-card,.content .finance-unit-card,
.content .report-unit-card,.content .inventory-catalog,.content .inventory-history,
.content .inventory-transfers,.modal,.premium-booking-modal,.premium-settings-modal,
.team-modal,.client-form-modal,.client-profile-modal{
  color:var(--ggr22-text)!important;
  background:linear-gradient(145deg,rgba(10,25,41,.97),rgba(4,12,21,.99))!important;
  border-color:var(--ggr22-line)!important;
}
.content [style*="background: white"],.content [style*="background:white"],.content [style*="background: #fff"],.content [style*="background:#fff"],
.modal [style*="background: white"],.modal [style*="background:white"],.modal [style*="background: #fff"],.modal [style*="background:#fff"]{
  color:var(--ggr22-text)!important;background:#091624!important;border-color:var(--ggr22-line)!important
}
.content h1,.content h2,.content h3,.content h4,.modal h1,.modal h2,.modal h3,.modal h4{overflow-wrap:anywhere;color:var(--ggr22-text)!important}
.content p,.content small,.content .muted,.modal p,.modal small{overflow-wrap:anywhere}

/* Fotos nunca cortam rostos ou a identidade principal. */
.public-professional-card .avatar img,.public-professional-card img.avatar,.avatar--photo img,.team-card img,.person-cell img{object-fit:cover!important;object-position:50% 18%!important}
.public-booking-hero{background-position:62% 34%!important}

/* Tabelas continuam completas, com rolagem apenas dentro do bloco. */
.data-table,.service-table,.inventory-table,.commission-table,.permission-table,.subscription-table,.security-audit-table{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.data-table__head,.data-table__row,.service-table__head,.service-table__row,.inventory-row,.commission-row,.security-audit-row{min-width:720px}
.client-table-row{min-width:0!important}

/* Modais operacionais: cabeçalho e ação final sempre alcançáveis. */
.modal-backdrop,.modal-backdrop--front,.client-profile-backdrop{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))!important;overflow:auto!important;align-items:flex-start!important;overscroll-behavior:contain}
.modal,.premium-booking-modal,.premium-settings-modal,.team-modal,.client-form-modal,.client-profile-modal{max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;overflow:auto!important}
.modal__head,.client-profile-head{position:sticky!important;top:0!important;z-index:30!important;background:rgba(5,13,23,.97)!important;backdrop-filter:blur(14px)!important}
.modal__footer{position:sticky!important;bottom:0!important;z-index:30!important;background:rgba(5,13,23,.97)!important;backdrop-filter:blur(14px)!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
.toast{left:12px!important;right:12px!important;bottom:max(14px,env(safe-area-inset-bottom))!important;max-width:none!important}

/* Caixa e início de atendimento. */
.modal--order-multiple{width:min(1040px,calc(100vw - 20px))!important}
.modal--order-multiple .order-line-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
.modal--order-multiple .order-payment-method{overflow:visible!important}
.modal--order-multiple .order-payment-method button{min-height:48px!important;font-weight:850!important}
.modal--order-multiple .order-financial-summary>*{min-width:0!important}
.checkout-submit-error{color:#ffc1c7!important;background:rgba(255,78,96,.1)!important}

/* Agenda mensal e relatório diário. */
.b21-month-overlay,.b21-daily-overlay{overscroll-behavior:contain}
.b21-month-controls select,.b21-month-controls input,.b21-month-hours input,.b21-daily-actions input{font-size:16px!important}
.b21-daily-table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}

@media(max-width:980px){
  .content{padding:16px 12px calc(34px + env(safe-area-inset-bottom))!important}
  .topbar{min-height:66px!important;padding:8px 12px!important;gap:8px!important}
  .topbar__left,.topbar__right{min-width:0!important;gap:7px!important}
  .top-search{min-width:0!important;flex:1!important}
  .top-search kbd{display:none!important}
  .unit-selector{min-width:0!important}
  .unit-selector select{max-width:150px!important}
  .user-button{max-width:168px!important}
  .user-button>div{min-width:0!important}
  .user-button strong,.user-button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .page-intro,.reports-head,.panel__head,.settings-card__head,.section-title,.finance-section-head,.security-section-head{gap:10px!important;align-items:flex-start!important;flex-wrap:wrap!important}
  .page-intro>div,.reports-head>div,.panel__head>div{min-width:0!important}
  .dashboard-grid,.metric-grid,.metrics-grid,.compact-grid,.staff-metrics,.finance-grid,.reports-grid,.security-grid,.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .premium-agenda-layout,.client-booking-layout,.public-booking-layout{grid-template-columns:1fr!important}
  .premium-agenda-side,.agenda-side{position:static!important;width:100%!important}
}

@media(max-width:680px){
  .content{padding:13px 10px calc(30px + env(safe-area-inset-bottom))!important}
  .topbar{position:sticky!important;top:0!important;z-index:80!important;padding-top:max(8px,env(safe-area-inset-top))!important}
  .top-search{display:none!important}
  .topbar__right{margin-left:auto!important}
  .notification-button{display:none!important}
  .unit-selector select{max-width:116px!important}
  .user-button{max-width:138px!important;padding:7px 9px!important}
  .user-button small{display:none!important}
  .sidebar{width:min(88vw,330px)!important;padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
  .page-intro h1,.reports-head h1{font-size:clamp(25px,8vw,32px)!important;line-height:1.05!important}
  .page-intro p,.reports-head p{font-size:12px!important;line-height:1.55!important}
  .dashboard-grid,.metric-grid,.metrics-grid,.compact-grid,.staff-metrics,.finance-grid,.reports-grid,.security-grid,.settings-grid,.form-grid,.settings-fields,.operation-settings{grid-template-columns:1fr!important}
  .metric,.compact-card,.panel,.settings-card,.team-card,.unit-card,.order-card{padding:15px!important;border-radius:16px!important}
  .panel__head,.settings-card__head{padding-bottom:12px!important}
  .table-toolbar,.inventory-toolbar,.report-filters,.finance-filters,.calendar-toolbar,.premium-agenda-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;padding:11px!important}
  .table-toolbar>*,.inventory-toolbar>*,.report-filters>*,.finance-filters>*,.calendar-toolbar>*,.premium-agenda-toolbar>*{width:100%!important;min-width:0!important}
  .table-toolbar .button,.inventory-toolbar .button,.report-filters .button,.finance-filters .button{width:100%!important}
  .button-row,.panel__actions,.settings-actions,.modal__footer,.client-profile-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:8px!important}
  .button-row .button,.panel__actions .button,.settings-actions .button,.modal__footer .button,.client-profile-actions .button{width:100%!important;justify-content:center!important}

  /* Entrada pública */
  .public-booking-page{padding-bottom:calc(22px + env(safe-area-inset-bottom))!important}
  .public-booking-header{width:calc(100% - 16px)!important;padding:9px 10px!important;gap:6px!important}
  .public-booking-header .brand-logo{min-width:0!important;transform:scale(.72)!important;transform-origin:left center!important}
  .public-booking-header>.install-app--client-entry .install-app__button,.public-booking-header>.client-access-restricted{width:auto!important;min-width:44px!important;padding:0 11px!important;font-size:9px!important}
  .public-booking-header>.install-app--client-entry .install-app__button span,.public-booking-header>.client-access-restricted span{display:none!important}
  .public-booking-hero{width:calc(100% - 16px)!important;min-height:310px!important;padding:34px 20px!important;border-radius:22px!important;background-image:linear-gradient(90deg,rgba(2,6,11,.98),rgba(3,9,16,.77)),url('/assets/barbearia-guararapes-capa-home-v17.webp')!important;background-position:64% 34%!important}
  .public-booking-hero h1{font-size:clamp(36px,12vw,52px)!important;line-height:.98!important}
  .public-booking-hero p{font-size:13px!important;line-height:1.6!important}
  .public-booking-progress{width:calc(100% - 16px)!important;overflow-x:auto!important;scrollbar-width:none}
  .public-booking-progress::-webkit-scrollbar{display:none}
  .public-booking-progress button{min-width:52px!important;min-height:48px!important}
  .public-booking-stage{width:calc(100% - 16px)!important;padding:25px 13px!important;border-radius:20px!important}
  .public-service-grid,.public-professional-grid,.public-slot-grid{grid-template-columns:1fr!important;gap:10px!important}
  .public-service-card,.public-professional-card{width:100%!important;min-width:0!important}
  .public-booking-selection,.public-booking-final-summary{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .public-booking-selection .button,.public-booking-final-summary .button{width:100%!important}

  /* PIN */
  .login-page{min-height:100dvh!important;grid-template-columns:1fr!important;overflow:auto!important}
  .login-visual{height:30dvh!important;min-height:220px!important}
  .login-visual>img{object-position:center!important}
  .login-panel{min-height:70dvh!important;padding:52px 10px calc(24px + env(safe-area-inset-bottom))!important}
  .login-box{width:100%!important;padding:25px 17px!important;border-radius:20px!important}
  .login-box h1,.login-box h2{font-size:clamp(29px,9vw,38px)!important}
  .login-back-choice{top:12px!important;right:12px!important;min-height:44px!important}

  /* Atendimento e caixa */
  .modal-backdrop,.modal-backdrop--front,.client-profile-backdrop{padding:0!important}
  .modal,.premium-booking-modal,.premium-settings-modal,.team-modal,.client-form-modal,.client-profile-modal,.modal--order-multiple{width:100%!important;max-width:100%!important;min-height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important}
  .modal__head,.client-profile-head{padding:14px 12px!important;padding-top:max(14px,env(safe-area-inset-top))!important}
  .modal__body,.client-profile-body{padding:14px 12px!important}
  .modal__footer{margin:0!important;padding:10px 12px max(10px,env(safe-area-inset-bottom))!important}
  .modal--order-multiple .order-line-grid{grid-template-columns:1fr!important}
  .modal--order-multiple .order-builder-section,.modal--order-multiple .form-grid,.modal--order-multiple .order-financial-summary>*{padding:13px!important}
  .modal--order-multiple .order-payment-method{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .modal--order-multiple .order-payment-method button{width:100%!important;min-height:52px!important}

  /* Clientes, serviços e estoque viram cards legíveis. */
  .client-table-row,.service-table__row,.inventory-row{border-radius:13px!important;margin-bottom:8px!important;padding:12px!important}
  .client-table-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:9px!important}
  .client-table-row>*{min-width:0!important}
  .client-row-actions,.service-actions{display:flex!important;gap:7px!important;flex-wrap:wrap!important;justify-content:flex-end!important}
  .service-unit-price-list{max-width:100%!important;overflow-x:auto!important}

  /* Agenda mensal */
  .b21-month-shell,.b21-daily-shell{width:100%!important;min-height:100dvh!important;margin:0!important;border-radius:0!important}
  .b21-month-head,.b21-daily-head{padding:max(13px,env(safe-area-inset-top)) 12px 13px!important}
  .b21-month-body,.b21-daily-body{padding:12px!important}
  .b21-month-calendar-wrap{padding:5px!important;overflow:hidden!important}
  .b21-month-calendar,.b21-month-week{gap:2px!important}
  .b21-month-day{min-height:62px!important;padding:5px 2px!important;align-items:center!important}
  .b21-month-day strong{font-size:16px!important}
  .b21-month-day em{font-size:7px!important}
  .b21-daily-grid{grid-template-columns:1fr!important}
  .b21-daily-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .b21-daily-actions input{grid-column:1/-1!important;width:100%!important}
  .b21-daily-actions button{width:100%!important}
  .b21-daily-launcher{right:10px!important;bottom:calc(76px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 20px)!important}
}

@media(max-width:390px){
  .public-booking-header .brand-logo{transform:scale(.64)!important;max-width:150px!important}
  .public-booking-header>.install-app--client-entry .install-app__button,.public-booking-header>.client-access-restricted{padding:0 9px!important}
  .topbar{padding-left:8px!important;padding-right:8px!important}
  .unit-selector select{max-width:92px!important}
  .user-button{max-width:112px!important}
  .b21-month-day{min-height:56px!important}
}

@media(hover:none){
  .panel:hover,.metric:hover,.compact-card:hover,.team-card:hover,.unit-card:hover,.client-catalog-card:hover,.service:hover{transform:none!important}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media print{
  html,body{overflow:visible!important;background:#fff!important}
  .b21-daily-overlay,.b21-daily-shell{max-height:none!important;overflow:visible!important}
}