/* =========================================================
   ZELO / SouZelo — styles.css (v1 mobile-first)
   - Base + tokens
   - Layout responsivo
   - Componentes gi-* usados em demo_signup / demo_confirm
========================================================= */

:root{
  /* Brand (ZELO) */
  --brand: #16a34a;              /* verde principal */
  --brand-600: #15803d;
  --brand-700: #166534;

  /* Neutros */
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: rgba(15,23,42,0.65);
  --border: rgba(15,23,42,0.14);

  /* Estados */
  --danger: #ef4444;
  --danger-bg: rgba(239,68,68,0.12);
  --success: #22c55e;
  --success-bg: rgba(34,197,94,0.14);

  /* Controles */
  --input-bg: #ffffff;
  --input-border: rgba(15,23,42,0.18);
  --shadow: 0 10px 30px rgba(2,6,23,0.10);

  /* Radius / spacing */
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;
}

/* Dark mode (se você quiser ligar depois, basta usar body.theme-dark) */
body.theme-dark{
  --bg: #0b1220;
  --card: rgba(255,255,255,0.06);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.64);
  --border: rgba(255,255,255,0.12);
  --input-bg: rgba(255,255,255,0.06);
  --input-border: rgba(255,255,255,0.14);
  --shadow: 0 18px 45px rgba(0,0,0,0.45);
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.35;
}

a{ color: inherit; }
h1,h2,h3{ margin:0; }
p{ margin:0; }

/* Containers */
.gi-container{
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 40px;
}

.gi-container-sm{
  width: min(520px, calc(100% - 28px));
  margin: 0 auto;
  padding: 18px 0 34px;
}

/* Card */
.gi-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.gi-card-header{
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.gi-card-header h1{
  font-size: 20px;
  letter-spacing: -0.2px;
}

.gi-muted{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* Form */
.gi-form{
  padding: 14px 18px 18px;
  display: grid;
  gap: 10px;
}

.gi-label{
  font-size: 13px;
  font-weight: 600;
  color: rgba(15,23,42,0.85);
}

body.theme-dark .gi-label{
  color: rgba(255,255,255,0.82);
}

.gi-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  font-size: 16px;
}

.gi-input:focus{
  border-color: rgba(22,163,74,0.55);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
}

/* Alerts */
.gi-alert{
  margin: 14px 18px 0;
  padding: 12px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  font-size: 14px;
}

.gi-alert-danger{
  border-color: rgba(239,68,68,0.35);
  background: var(--danger-bg);
  color: var(--text);
}

.gi-alert-success{
  border-color: rgba(34,197,94,0.35);
  background: var(--success-bg);
  color: var(--text);
}

/* Buttons */
.gi-btn{
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gi-btn-block{ width: 100%; }

.gi-btn-primary{
  background: var(--brand);
  border-color: rgba(0,0,0,0.06);
  color: #fff;
}

.gi-btn-primary:hover{ background: var(--brand-600); }

.gi-btn-secondary{
  background: rgba(15,23,42,0.06);
  border-color: rgba(15,23,42,0.18);
  color: #0f172a;
}

body.theme-dark .gi-btn-secondary{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

/* Links */
.gi-link{
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: rgba(15,23,42,0.75);
  text-decoration: none;
}

.gi-link:hover{ text-decoration: underline; }

.gi-link-center{
  width: 100%;
  text-align: center;
}

/* Actions */
.gi-actions{
  padding: 14px 18px 18px;
  display: grid;
  gap: 10px;
}

/* Panel (key-values) */
.gi-panel{
  margin: 14px 18px 0;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(15,23,42,0.03);
}

body.theme-dark .gi-panel{
  background: rgba(255,255,255,0.06);
}

.gi-kv{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(15,23,42,0.14);
}

body.theme-dark .gi-kv{
  border-bottom-color: rgba(255,255,255,0.12);
}

.gi-kv:last-child{ border-bottom: 0; }

.gi-k{
  font-size: 13px;
  color: var(--muted);
}

.gi-v{
  font-size: 14px;
  font-weight: 650;
}

/* Hero */
.gi-hero{
  padding: 14px 18px 4px;
}

.gi-hero h2{
  font-size: 18px;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}

/* Page specific */
.page-demo-signup .gi-card,
.page-demo-confirm .gi-card,
.page-login .gi-card{
  margin-top: 10px;
}

/* Desktop tweaks */
@media (min-width: 900px){
  .gi-container-sm{ padding-top: 28px; padding-bottom: 54px; }
  .gi-card-header h1{ font-size: 22px; }
}
/* ================================
   Mobile: evita zoom ao focar inputs (iOS/Safari)
   - Safari dá zoom se font-size < 16px
================================= */
@media (max-width: 768px){
  input, select, textarea, button{
    font-size: 16px; /* CRÍTICO para evitar zoom */
  }

  /* mantém visual confortável no touch */
  .gi-input{
    font-size: 16px;
    line-height: 1.2;
  }
}
/* =========================================================
   MOBILE STABILITY PATCH (Safari / iOS)
   - Evita zoom
   - Evita "sambar"
   - Evita overflow lateral
========================================================= */

/* 1) Evita zoom automático */
@media (max-width: 768px){
  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }
}

/* 2) Impede scroll lateral acidental */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 3) Corrige problema clássico de 100vh no iOS */
.gi-container,
.gi-container-sm,
.page-demo-signup,
.page-demo-confirm {
  min-height: 100dvh;  /* iOS mais novo */
  min-height: 100svh;  /* fallback iOS */
  min-height: 100vh;   /* fallback geral */
}

/* 4) Garante que nada estoure a largura */
img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* 5) Suaviza comportamento ao focar */
input:focus,
select:focus,
textarea:focus {
  transform: translateZ(0);
}
/* iOS Safari: impedir zoom ao focar inputs (blindagem) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea, button,
  .gi-input {
    font-size: 16px !important;
  }
}

/* Evita “smart zoom” por layout apertado */
input, select, textarea {
  -webkit-text-size-adjust: 100%;
}
/* =========================================================
   Admin Roles UI (RBAC) — minimal additions
========================================================= */

.gi-topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gi-topbar-title{
  font-weight: 800;
  letter-spacing: -0.2px;
}

.gi-topbar-actions{
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.gi-divider{
  height: 1px;
  background: var(--border);
  margin: 10px 18px;
}

/* Layout 2 colunas (vira 1 no mobile) */
.gi-grid-2{
  display: grid;
  gap: 14px;
}
@media (min-width: 900px){
  .gi-grid-2{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Lista */
.gi-list{ padding: 6px 0 14px; }
.gi-list-item{
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
}
.gi-list-item:first-child{ border-top: 0; }
.gi-list-title{ font-weight: 800; }
.gi-list-actions{ display:flex; align-items:center; gap:8px; }

/* Pill */
.gi-pill{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.78);
  margin-left: 8px;
}
body.theme-dark .gi-pill{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
}

/* Grid de permissões */
.gi-perm-grid{
  display: grid;
  gap: 10px;
}
@media (min-width: 900px){
  .gi-perm-grid{
    grid-template-columns: 1fr 1fr;
  }
}
.gi-perm-item{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(15,23,42,0.02);
}
body.theme-dark .gi-perm-item{
  background: rgba(255,255,255,0.06);
}
.gi-perm-item input[type="checkbox"]{
  margin-top: 3px;
  width: 18px;
  height: 18px;
}
.gi-perm-key{
  font-weight: 800;
  font-size: 13px;
}
select.gi-input{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,0.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(1em + 4px),
    calc(100% - 13px) calc(1em + 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
body.theme-dark select.gi-input{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.55) 50%, transparent 50%);
}
/* =========================================================
   TOPBAR: menu do usuário (sem inline)
========================================================= */

.gi-topbar-actions{
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.gi-user-menu{
  position: relative;
}

.gi-user-menu > summary{
  list-style: none;
  cursor: pointer;
}

.gi-user-menu > summary::-webkit-details-marker{
  display: none;
}

.gi-user-dropdown{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 10px;
  z-index: 50;
}

.gi-user-dropdown .gi-muted{
  margin: 0 0 10px;
}

/* =========================================================
   DEV UI: tabelas + linhas de formulário (sem inline)
========================================================= */

.gi-table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
}

.gi-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px; /* leitura no mobile com scroll horizontal */
}

.gi-table th,
.gi-table td{
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 14px;
}

.gi-table th{
  font-size: 12px;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(15,23,42,0.02);
}

body.theme-dark .gi-table th{
  background: rgba(255,255,255,0.06);
}

.gi-table tr:hover td{
  background: rgba(15,23,42,0.02);
}
body.theme-dark .gi-table tr:hover td{
  background: rgba(255,255,255,0.04);
}

.gi-title{
  font-weight: 800;
  letter-spacing: -0.2px;
}

.gi-sub{
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* Linha de filtros/ações (sem style="") */
.gi-form-row{
  padding: 14px 18px 18px;
  display: grid;
  gap: 10px;
}

@media (min-width: 900px){
  .gi-form-row{
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.gi-form-row-3{
  padding: 14px 18px 18px;
  display: grid;
  gap: 10px;
}

@media (min-width: 900px){
  .gi-form-row-3{
    grid-template-columns: 1fr auto auto;
    align-items: end;
  }
}

.gi-inline{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.gi-btn-sm{
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 12px;
}

/* Pills de status simples */
.gi-pill-success{
  background: rgba(34,197,94,0.16);
  border: 1px solid rgba(34,197,94,0.30);
  color: rgba(15,23,42,0.86);
}
body.theme-dark .gi-pill-success{ color: rgba(255,255,255,0.90); }

.gi-pill-danger{
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.28);
  color: rgba(15,23,42,0.86);
}
body.theme-dark .gi-pill-danger{ color: rgba(255,255,255,0.90); }

.gi-pill-muted{
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.72);
}
body.theme-dark .gi-pill-muted{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.80);
}
/* =========================================================
   DEV / Usuários — ajustes mobile (evitar corte + dar respiro)
   Escopo: apenas .page-dev-users
========================================================= */
.page-dev-users .gi-container{
  padding-left: 12px;
  padding-right: 12px;
}

/* garante respiro dentro do card */
.page-dev-users .gi-card .gi-card-body{
  padding: 14px;
}

/* linha de layout: permitir quebrar no mobile */
.page-dev-users .gi-row{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;              /* <<< importante no celular */
}

/* colunas */
.page-dev-users .gi-col{
  min-width: 0;                 /* <<< permite quebrar texto dentro */
  flex: 1 1 240px;              /* ocupa e quebra se precisar */
}

.page-dev-users .gi-col-actions{
  flex: 0 0 auto;
  width: 100%;                  /* botão vai pra linha de baixo no mobile */
  display: flex;
  justify-content: flex-start;
}

/* textos longos: quebrar em qualquer caso */
.page-dev-users .gi-title,
.page-dev-users .gi-sub{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* se tiver algum "inline" que estoura, deixe quebrar também */
.page-dev-users .gi-inline{
  flex-wrap: wrap;
  gap: 10px;
}

/* desktop/tablet: volta a ficar lado a lado */
@media (min-width: 900px){
  .page-dev-users .gi-container{
    padding-left: 18px;
    padding-right: 18px;
  }
  .page-dev-users .gi-col-actions{
    width: auto;
    justify-content: flex-end;
  }
}
/* Card do usuário selecionado (em edição) */
.page-dev-users .gi-card.gi-card-active{
  border: 2px solid var(--brand);
  box-shadow: 0 10px 26px rgba(22,163,74,0.18);
  position: relative;
}



/* opcional: dar uma “subida” leve */
.page-dev-users .gi-card.gi-card-active{
  transform: translateY(-1px);
}
/* =========================================================
   DEV Tenants — filtro de segmento (mais visual, tipo tabs)
   - "Todos" com estilo diferente
========================================================= */
.page-dev-tenants .gi-filter-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 12px 0 14px;
}

/* botão base */
.page-dev-tenants .gi-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(15,23,42,0.06);
  color: #0f172a;
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  box-shadow: 0 6px 16px rgba(15,23,42,0.08);
  transition: transform .06s ease, box-shadow .12s ease;
}

.page-dev-tenants .gi-chip:active{
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(15,23,42,0.08);
}

/* ativo (segmento selecionado) */
.page-dev-tenants .gi-chip.is-active{
  border-color: rgba(22,163,74,0.55);
  background: rgba(22,163,74,0.14);
  color: #14532d;
}

/* ✅ "Desativar tenant" com destaque, porém vermelho mais suave */
.page-dev-users .gi-actions .gi-btn.gi-btn-danger-strong{
  background: #ef4444;   /* vermelho mais leve */
  border-color: #ef4444;
  color: #fff;
}

.page-dev-users .gi-actions .gi-btn.gi-btn-danger-strong:hover{
  background: #dc2626;   /* um pouco mais forte no hover */
  border-color: #dc2626;
}

.page-dev-users .gi-actions .gi-btn.gi-btn-danger-strong:active{
  background: #b91c1c;   /* mais forte ao clicar */
  border-color: #b91c1c;
}

/* ====== DIFERENCIAL DO "Todos" ======
   (primeiro chip do container, já que "Todos" é o primeiro no PHP) */
.page-dev-tenants .gi-filter-chips .gi-chip:first-child{
  border-color: rgba(59,130,246,0.55);
  background: rgba(59,130,246,0.12);
  color: #1e3a8a;
}

/* quando "Todos" estiver ativo, deixa ainda mais destacado */
.page-dev-tenants .gi-filter-chips .gi-chip:first-child.is-active{
  border-color: rgba(59,130,246,0.75);
  background: rgba(59,130,246,0.18);
  box-shadow: 0 10px 22px rgba(59,130,246,0.18);
}
/* =========================================================
   BARBEARIA — UX polish (listas / ações / filtros)
   - Remove dependência de inline styles
   - Melhora responsividade (ações quebram no mobile)
========================================================= */

/* Checkbox line (substitui labels com style="...") */
.gi-checkline{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.gi-checkline input[type="checkbox"]{
  width: 18px;
  height: 18px;
}
.gi-checkline .gi-muted{
  margin-top: 0;         /* evita “desalinhado” */
  font-weight: 800;
}

/* List items: quebrar bem no mobile */
.page-barber-customers .gi-list-item,
.page-barber-plans .gi-list-item,
.page-barber-services .gi-list-item,
.page-barber-combos .gi-list-item{
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Texto: permitir quebra (email/telefone grande) */
.page-barber-customers .gi-list-main,
.page-barber-plans .gi-list-main,
.page-barber-services .gi-list-main,
.page-barber-combos .gi-list-main{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Ações: no mobile vai pra baixo e vira grid */
.page-barber-customers .gi-list-actions,
.page-barber-plans .gi-list-actions,
.page-barber-services .gi-list-actions,
.page-barber-combos .gi-list-actions{
  width: 100%;
  display: grid;
  gap: 8px;
}

/* Desktop: volta a ser inline */
@media (min-width: 900px){
  .page-barber-customers .gi-list-actions,
  .page-barber-plans .gi-list-actions,
  .page-barber-services .gi-list-actions,
  .page-barber-combos .gi-list-actions{
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
/* =========================================================
   PATCH: respiro no final do card
   - evita que o último .gi-panel encoste no final
   - melhora UX em telas mobile
========================================================= */
.gi-card > .gi-panel:last-child{
  margin-bottom: 18px;
}

/* (opcional) se você usa .gi-actions como último bloco em alguns cards */
.gi-card > .gi-actions:last-child{
  padding-bottom: 18px;
}

/* (opcional) caso tenha textos simples como último elemento dentro do card */
.gi-card > .gi-muted:last-child{
  margin-bottom: 18px;
}
/* =========================================================
   PATCH: respiro no final do card
   - evita que o último .gi-panel encoste no final
   - melhora UX em telas mobile
========================================================= */
.gi-card > .gi-panel:last-child{
  margin-bottom: 18px;
}

/* (opcional) se você usa .gi-actions como último bloco em alguns cards */
.gi-card > .gi-actions:last-child{
  padding-bottom: 18px;
}

/* (opcional) caso tenha textos simples como último elemento dentro do card */
.gi-card > .gi-muted:last-child{
  margin-bottom: 18px;
}
/* =========================================================
   Autocomplete / Picker (mobile-first) + helpers
========================================================= */
.is-hidden{ display:none !important; }

.gi-checkline{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

/* Picker (busca de cliente) */
.gi-picker{
  position: relative;
}

.gi-picker-list{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gi-picker-item{
  padding: 12px 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.gi-picker-item:first-child{ border-top: 0; }

.gi-picker-item:hover{
  background: rgba(15,23,42,0.04);
}
body.theme-dark .gi-picker-item:hover{
  background: rgba(255,255,255,0.06);
}

.gi-picker-title{
  font-weight: 900;
  font-size: 14px;
  display:flex;
  align-items:center;
  gap:8px;
}

.gi-picker-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.gi-picker-empty{
  padding: 12px 12px;
  color: var(--muted);
  font-size: 13px;
}
/* =========================================
   Barber Combos — versão estável
========================================= */

.page-barber-combos .gi-perm-grid .gi-perm-item.gi-combo-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  gap:10px !important;
}

/* Cabeçalho empilhado */
.page-barber-combos .gi-perm-grid .gi-perm-item.gi-combo-item .gi-combo-head{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  margin:0 !important;
}

/* Quantidade central */
.page-barber-combos .gi-perm-grid .gi-perm-item.gi-combo-item .gi-combo-qty{
  display:grid !important;
  gap:6px !important;
  justify-items:center !important;
  width:100% !important;
}

.page-barber-combos .gi-perm-grid .gi-perm-item.gi-combo-item .gi-combo-qty .gi-input{
  max-width:180px !important;
  text-align:center !important;
}
/* ✅ Dá “corpo” para o bloco abaixo do filtro (onde aparece a msg/usuário) */
.page-dev-users .dev-users-area{
  min-height: 220px;        /* aumenta o comprimento do bloco */
  padding-bottom: 28px;     /* garante espaço sobrando embaixo do texto */
  display: block;
}
/* =========================================================
   Notifications UI
========================================================= */

.page-notifications .gi-wrap{
  padding: 16px;
}

.page-notifications .gi-title{
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.3;
}

.page-notifications .gi-card + .gi-card,
.page-notifications .gi-card + .gi-list-cards,
.page-notifications .gi-list-cards + .gi-card{
  margin-top: 16px;
}

.page-notifications .gi-card-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.page-notifications .gi-card-header-stack{
  margin-bottom: 10px;
}

.page-notifications .gi-grid{
  display: grid;
  gap: 12px;
}

.page-notifications .gi-grid-3{
  grid-template-columns: 1fr;
}

.page-notifications .gi-field{
  min-width: 0;
}

.page-notifications .gi-label{
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.page-notifications .gi-label-hidden{
  visibility: hidden;
}

.page-notifications .gi-input{
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  box-sizing: border-box;
}

.page-notifications .gi-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.page-notifications .gi-actions-wrap{
  margin-top: 12px;
}

.page-notifications .gi-filters{
  margin-top: 14px;
}

.page-notifications .gi-empty{
  font-size: 16px;
  color: #666;
}

.page-notifications .gi-notification-card.is-unread{
  border-width: 2px;
}

.page-notifications .gi-notification-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.page-notifications .gi-notification-title{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.page-notifications .gi-notification-type{
  margin-top: 4px;
  font-size: 14px;
}

.page-notifications .gi-notification-body{
  margin-top: 4px;
}

.page-notifications .gi-notification-message{
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
}

.page-notifications .gi-meta-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.page-notifications .gi-meta-item{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-notifications .gi-pill-warning{
  background: #fff4d6;
}

.page-notifications .gi-pill-success{
  background: #e8f7ea;
}

.page-notifications .gi-alert{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  font-size: 16px;
}

.page-notifications .gi-alert-error{
  background: #fdecec;
}

.page-notifications .gi-alert-success{
  background: #ebf8ee;
}

.page-notifications .gi-form-inline{
  margin: 0;
}

@media (min-width: 768px){
  .page-notifications .gi-grid-3{
    grid-template-columns: minmax(0, 1.5fr) minmax(180px, .7fr) auto;
    align-items: end;
  }

  .page-notifications .gi-meta-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* =========================================================
   Appointments Form
========================================================= */

.page-appointments-form .appt-form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-appointments-form .appt-checks{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-appointments-form .appt-section-head{
  padding-bottom: 8px;
}

.page-appointments-form .appt-section-title{
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

@media (min-width: 720px){
  .page-appointments-form .appt-form-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* =========================================================
   Appointments List
========================================================= */

.page-appointments .appt-list-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.page-appointments .appt-cards{
  display:grid;
  gap:16px;
  margin-top:16px;
}

.page-appointments .appt-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.page-appointments .appt-card-title{
  font-size:18px;
  line-height:1.35;
}

.page-appointments .appt-meta-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.page-appointments .appt-meta-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.page-appointments .appt-meta-item strong{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.page-appointments .appt-description{
  margin-top:6px;
  display:grid;
  gap:6px;
}

.page-appointments .appt-description p{
  font-size:16px;
  line-height:1.5;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.page-appointments .appt-list-empty-card{
  margin-top:16px;
}

@media (min-width: 720px){
  .page-appointments .appt-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .page-appointments .appt-meta-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px){
  .page-appointments .appt-list-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
/* =========================================================
   TOPBAR — ajuste mobile-first melhor distribuído
========================================================= */

.gi-topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
  padding: 10px 12px;
}

.gi-topbar-main{
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.gi-topbar-title{
  font-weight: 800;
  letter-spacing: -0.2px;
  font-size: 20px;
  line-height: 1.25;
}

.gi-topbar-actions{
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}

.gi-topbar-btn{
  min-height: 44px;
  font-size: 16px;
  max-width: 100%;
}

.gi-notif-btn{
  position: relative;
}

.gi-notif-badge,
.gi-badge.gi-notif-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.gi-user-menu{
  position: relative;
  max-width: 100%;
}

.gi-user-menu > summary{
  list-style: none;
  cursor: pointer;
  max-width: 100%;
}

.gi-user-menu > summary::-webkit-details-marker{
  display: none;
}

.gi-user-dropdown{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  max-width: min(92vw, 320px);
  padding: 10px;
  z-index: 50;
}

.gi-user-dropdown .gi-muted{
  margin: 0 0 10px;
}

@media (max-width: 768px){
  .gi-topbar-actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .gi-topbar-actions .gi-user-menu{
    grid-column: 1 / -1;
  }

  .gi-topbar-actions .gi-user-menu > summary{
    width: 100%;
    justify-content: center;
  }

  .gi-topbar-actions > .gi-btn,
  .gi-topbar-actions > a.gi-btn{
    width: 100%;
  }

  .gi-user-dropdown{
    left: 0;
    right: 0;
    min-width: 0;
    max-width: none;
  }
}

@media (min-width: 900px){
  .gi-topbar{
    padding: 10px 16px;
  }

  .gi-topbar-main{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .gi-topbar-title{
    font-size: 18px;
  }

  .gi-topbar-actions{
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}
/* =========================================================
   Notifications UI — alinhado ao padrão ZELO
========================================================= */

.page-notifications .gi-container{
  width: min(980px, calc(100% - 28px));
  padding-top: 16px;
  padding-bottom: 36px;
}

.page-notifications .gi-card + .gi-card,
.page-notifications .gi-card + .notif-cards,
.page-notifications .notif-cards + .gi-card{
  margin-top: 16px;
}

.page-notifications .gi-title{
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
}

.page-notifications .notif-header-main{
  min-width: 0;
}

.page-notifications .notif-header-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.page-notifications .notif-filters-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-notifications .notif-filter-actions{
  padding-top: 4px;
}

.page-notifications .notif-empty-card{
  margin-top: 16px;
}

.page-notifications .notif-cards{
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.page-notifications .gi-notification-card.is-unread{
  border-width: 2px;
}

.page-notifications .notif-card-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.page-notifications .notif-card-title-wrap{
  min-width: 0;
}

.page-notifications .notif-card-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-notifications .notif-message{
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-notifications .notif-meta-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-notifications .notif-meta-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.page-notifications .notif-meta-item strong{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-notifications .notif-inline-form{
  width: 100%;
}

.page-notifications .gi-pill-warning{
  background: #fff4d6;
}

.page-notifications .gi-pill-success{
  background: #e8f7ea;
}

@media (max-width: 768px){
  .page-notifications .gi-card-header{
    display: grid;
    gap: 12px;
  }

  .page-notifications .notif-header-actions{
    justify-content: stretch;
  }

  .page-notifications .notif-header-actions .gi-form-inline,
  .page-notifications .notif-header-actions .gi-btn{
    width: 100%;
  }

  .page-notifications .notif-card-top{
    display: grid;
    gap: 10px;
  }
}

@media (min-width: 768px){
  .page-notifications .notif-filters-grid{
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.65fr);
  }

  .page-notifications .notif-meta-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* =========================================================
   Appointments Form — itens agendáveis
========================================================= */

.page-appointments-form .appt-form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-appointments-form .appt-form-grid-3{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-appointments-form .appt-checks{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-appointments-form .appt-section-head{
  padding-bottom: 8px;
}

.page-appointments-form .appt-section-title{
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

@media (min-width: 720px){
  .page-appointments-form .appt-form-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-appointments-form .appt-form-grid-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.oh-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.oh-summary-label{
  font-size:13px;
  color:var(--muted, #64748b);
  margin-bottom:6px;
}

.oh-summary-value{
  font-size:24px;
  font-weight:700;
  line-height:1.1;
}

.gi-actions-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.oh-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.oh-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.oh-list-main{
  min-width:0;
  flex:1 1 auto;
}

.oh-list-title{
  font-weight:700;
  word-break:break-word;
}

.oh-list-badges{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.gi-inline-form{
  display:inline-flex;
}

.gi-textarea-lg{
  resize:vertical;
  min-height:140px;
  max-width:100%;
}

@media (max-width: 720px){
  .oh-summary-grid{
    grid-template-columns:1fr;
  }

  .oh-list-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .oh-list-badges{
    width:100%;
  }

  .gi-inline-form{
    width:100%;
  }

  .gi-inline-form .gi-btn{
    width:100%;
  }
}
.gi-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.gi-form-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.gi-form-section-title{
  font-size:14px;
  font-weight:700;
  color:var(--text, #0f172a);
}

.gi-checkline-wrap{
  display:flex;
  align-items:flex-end;
}

@media (max-width: 720px){
  .gi-grid-3{
    grid-template-columns:1fr;
  }

  .gi-checkline-wrap{
    align-items:flex-start;
  }
}
.oh-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.oh-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.oh-meta-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.gi-textarea-code{
  min-height:220px;
  resize:vertical;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space:pre;
}

@media (max-width: 720px){
  .oh-meta-grid{
    grid-template-columns:1fr;
  }
}
.page-oh-documents .gi-panel,
.page-oh-document-form .gi-card{
  width:100%;
}

.page-oh-documents .oh-list,
.page-oh-document-form .gi-form{
  width:100%;
}
.appt-card-oh{
  border-color:rgba(14,116,144,.22);
}

.gi-pill-oh{
  background:rgba(14,116,144,.10);
  border:1px solid rgba(14,116,144,.18);
}

.gi-pill-info{
  background:rgba(59,130,246,.10);
  border:1px solid rgba(59,130,246,.18);
}

.gi-pill-warning{
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.18);
}

.gi-pill-danger{
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.18);
}