/* =========================================================
   ZELO / SouZelo — pages.css
   Arquivo reorganizado por módulo/página
   Objetivo: facilitar manutenção sem alterar regras CSS.
   Observação: o conteúdo das regras foi preservado;
   houve reorganização estrutural e inclusão de sumário.
========================================================= */

/* =========================================================
   SUMÁRIO
   1. Bloco legado inicial e regras compartilhadas
   2. Saúde Ocupacional
   3. Barbearia
   4. Atendimentos e Agendamentos
   5. Administração / DEV / Dashboard
   6. Configurações
   7. Mensageria WhatsApp
   8. Workspace
   9. Orçamentos
========================================================= */

/* 1.1 Bloco legado inicial e regras compartilhadas */

/* 2.1 PAGE: OCCUPATIONAL HEALTH DOCUMENTS */
/* 2.2 PAGE: OCCUPATIONAL HEALTH DASHBOARD */
/* 2.3 OH DASHBOARD — FILTRO DE UNIDADE PRESTADORA */
/* 2.4 OH DASHBOARD — BLOCO DE STATS POR UNIDADE */
/* 2.5 PAGE: OH ASO RISKS */
/* 2.6 PAGE: OCCUPATIONAL HEALTH COMPANY FORM */
/* 2.7 PAGE: OCCUPATIONAL HEALTH UNIT FORM */
/* 2.8 PAGE: OCCUPATIONAL HEALTH PHYSICIAN FORM */
/* 2.9 PAGE: OCCUPATIONAL HEALTH WORKER FORM */
/* 2.10 PAGE: OCCUPATIONAL HEALTH EMPLOYMENT FORM */
/* 2.11 PAGE: OCCUPATIONAL HEALTH SERVICE TYPE FORM */
/* 2.12 PAGE: OCCUPATIONAL HEALTH ENCOUNTER FORM */
/* 2.13 PAGE: OCCUPATIONAL HEALTH DOCUMENT FORM */

/* 3.1 PAGE: BARBER DASHBOARD */
/* 3.2 PAGE: BARBER CUTS */
/* 3.3 PAGE: BARBER LOCATIONS */
/* 3.4 PAGE: BARBER CUSTOMERS */
/* 3.5 PAGE: BARBER SERVICES */
/* 3.6 PAGE: BARBER COMBOS */
/* 3.7 PAGE: BARBER PLANS */
/* 3.8 PAGE: BARBER SUBSCRIPTIONS */
/* 3.9 PAGE: BARBER PROFESSIONAL SCHEDULES */

/* 4.1 PAGE: ATENDIMENTOS */
/* 4.2 PAGE: APPOINTMENTS — calendário e painel lateral */
/* 4.3 PAGE: APPOINTMENTS FORM */
/* 4.4 PAGE: APPOINTMENTS FORM — disponibilidade por profissional */
/* 4.5 PAGE: APPOINTMENTS SETTINGS */
/* 4.6 PAGE: PUBLIC BOOKING */
/* 4.7 MOBILE / TABLET */
/* 4.8 DESKTOP */

/* 5.1 PAGE: ADMIN USERS */
/* 5.2 PAGES: DEV — Área de desenvolvedor (sidebar + layout) */
/* 5.3 PAGE: DEV — TENANT × MÓDULOS (tenant_modules.php) — parte 1 */
/* 5.4 PAGE: DEV — USUÁRIOS (users.php) */
/* 5.5 PAGE: DEV — MODULES (modules.php) */
/* 5.6 PAGE: DEV — TENANT × MÓDULOS (tenant_modules.php) — parte 2 */
/* 5.7 PAGE: DEV — USUÁRIOS (users.php) — layout de botões */
/* 5.8 PAGE: DEV — USERS — revisão de layout (v2) */
/* 5.9 PAGE: DASHBOARD — Seletor de modalidade DEV */
/* 5.10 PAGE: AUDIT LOGS */

/* 6.1 PAGE: SETTINGS COMPANY */

/* 7.1 WhatsApp manual wizard */
/* 7.2 WhatsApp manual wizard — ajustes de largura e centralização */
/* 7.3 PAGE: MESSAGING WHATSAPP TEMPLATES */
/* 7.4 messaging_whatsapp.php — refinamento da etapa de contatos */
/* 7.5 PAGE: MESSAGING WHATSAPP CAMPAIGNS */

/* 8.1 PAGE: WORKSPACE — BASE DO MÓDULO GESTÃO & PROJETOS */
/* 8.2 PAGE: WORKSPACE — LISTAGENS E FORMULÁRIOS FUNCIONAIS */
/* 8.3 PAGE: WORKSPACE — LEMBRETES E NOTAS */
/* 8.4 PAGE: WORKSPACE — NOTAS / CHECK-LIST */
/* 8.5 PAGE: WORKSPACE — LEMBRETES — RECORRÊNCIA */
/* 8.6 PAGE: WORKSPACE — KANBAN (VERSÃO COM SCROLL HORIZONTAL E COLUNAS) */
/* 8.7 PAGE: WORKSPACE — ESTRUTURAS */
/* 8.8 PAGE: WORKSPACE — ESTRUTURAS COM PREVIEW HÍBRIDO */
/* 8.9 PAGE: WORKSPACE — CONEXÕES */
/* 8.10 PAGE: WORKSPACE — ANÁLISE IA */
/* 8.11 PAGE: WORKSPACE — PROGRESSO AUTOMÁTICO + MODAL DE CONCLUSÃO */
/* 8.12 PAGE: WORKSPACE — ANÁLISE IA / HISTÓRICO COMPLETO */
/* 8.13 PAGE: WORKSPACE — STRUCTURE FORM (canvas interativo) */
/* 8.14 PAGE: WORKSPACE — STRUCTURE FORM | AJUSTES V2 */
/* 8.15 PAGE: WORKSPACE — PROGRESS BAR (projects list) */
/* 8.16 PAGE: WORKSPACE — ATIVIDADE | histórico, updates e logs */
/* 8.17 PAGE: WORKSPACE — LEMBRETES | CALENDÁRIO — parte 1 */
/* 8.18 PAGE: WORKSPACE — LEMBRETES | CALENDÁRIO — parte 2 */
/* 8.19 PAGE: WORKSPACE — LEMBRETES | AJUSTES */
/* 8.20 PAGE: WORKSPACE — LEMBRETES — LISTA (workspace_reminders) */
/* 8.21 PAGE: WORKSPACE — LISTAS (CHECKLISTS) */
/* 8.22 PAGE: WORKSPACE — ID DE ATIVIDADE, ARQUIVOS E VIEWER */
/* 8.23 workspace_projects_activities.css */
/* 8.24 dash_workspace.css */
/* 8.25 PAGE: WORKSPACE — FILE NAMING + PDF VIEWER RESPONSIVO — parte 1 */
/* 8.26 PAGE: WORKSPACE — FILE NAMING + PDF VIEWER RESPONSIVO — parte 2 */
/* 8.27 WORKSPACE — VIEWER DE PDF/VÍDEO + LOADER */
/* 8.28 WORKSPACE — VIEWER / LOADER / PROGRESSO DE UPLOAD */

/* 9.1 BASE — containers de página */
/* 9.2 SIDEBAR — grupo colapsável do módulo Orçamentos */
/* 9.3 AÇÕES DO CABEÇALHO DA PÁGINA */
/* 9.4 BOARD WRAP — contém hint e board com scroll */
/* 9.5 BOARD — scroll horizontal com colunas em flex */
/* 9.6 COLUNAS — largura fixa + altura máxima + scroll interno */
/* 9.7 CARDS — dimensionamento uniforme */
/* 9.8 RODAPÉ DO CARD — indicadores */
/* 9.9 MODAIS DO FUNIL */
/* 9.10 SEÇÕES EMPILHADAS NO MODAL DE EDIÇÃO */
/* 9.11 BANNER DE OPORTUNIDADE VINCULADA */
/* 9.12 RESPONSIVO */
/* 9.13 PROPOSTA — Linhas de itens */
/* 9.14 ITENS — campo de ajuda */
/* 9.15 LINKS internos do módulo */
/* 9.16 RESPONSIVO — proposta / links */
/* 9.17 PAGE: ORÇAMENTOS — DASHBOARD */
/* 9.18 PAGE: ORÇAMENTOS — LISTAGEM OFICIAL */

/* 10.1 PAGE: PAYMENT DASHBOARD */
/* 10.2 PAGE: PAYMENT CONFIGURAÇÕES */
/* 10.3 PAGE: PAYMENT TRANSAÇÕES */
/* 10.4 PAGE: PAYMENT TRANSAÇÃO DETALHES */
/* 10.5 PAGE: PAYMENT ASSINATURAS */
/* 10.6 PAGE: PAYMENT FORMAS DE PAGAMENTO */
/* 10.7 PAGE: PAYMENT RELATÓRIOS */
/* 10.8 PAGE: PAYMENT WEBHOOK LOGS / TÉCNICO */
/* 10.9 RESPONSIVO */

/* =========================================================
   1. BLOCO LEGADO INICIAL E REGRAS COMPARTILHADAS
========================================================= */

/* =========================================================
   ZELO / SouZelo — pages.css
   Exceções e regras específicas de páginas
========================================================= */

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

/* ── Módulo: DEV/Admin (Refatorado) ── */
.page-dev-users .gi-container{
  padding-left: 12px;
  padding-right: 12px;
}

.page-dev-users .gi-card .gi-card-body{
  padding: 14px;
}

@media (min-width: 900px){
  .page-dev-users .gi-container{
    padding-left: 18px;
    padding-right: 18px;
  }
}

.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;
}

.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);
}

.page-dev-users .dev-users-area{
  min-height: 220px;
  padding-bottom: 28px;
  display: block;
}

/* ── Módulo: Barbearia (Refatorado) ── */
.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;
}

.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;
}

.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;
}

/* ── Módulo: Notificações (Refatorado) ── */
.page-notifications .gi-container{
  width: min(980px, calc(100% - 28px));
  padding-top: 16px;
  padding-bottom: 36px;
}

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

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

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

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

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

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

.page-notifications .gi-notification-title,
.page-notifications .notif-card-title{
  font-size: 18px;
  line-height: 1.35;
}

.page-notifications .gi-notification-title{
  font-weight: 700;
}

.page-notifications .notif-card-title{
  margin: 0;
}

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

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

.page-notifications .gi-notification-message,
.page-notifications .notif-message{
  font-size: 16px;
  line-height: 1.55;
}

.page-notifications .gi-notification-message{
  margin: 0 0 12px;
}

.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-filters-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

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

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

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

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

.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;
}

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

  .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%;
  }
}

@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 .notif-meta-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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


/* ── Módulo: Appointments/Atendimentos (Refatorado) ── */

/* Formulário de Appointments */
.page-appointments-form .appt-form-grid,
.page-appointments-form .appt-form-grid-3{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.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));
  }
}

/* Listagem de Appointments */
.page-appointments .appt-list-grid{
  display: grid;
  grid-template-columns: 1fr;
  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-description{
  margin-top: 6px;
  display: grid;
  gap: 6px;
}

.page-appointments .appt-description p{
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 720px){
  .page-appointments .appt-list-grid,
  .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));
  }
}

.page-oh-documents .gi-panel,
.page-oh-document-form .gi-card,
.page-oh-documents .oh-list,
.page-oh-document-form .gi-form{
  width:100%;
}

/* =============================== 

          TELA DE LOGIN 

=============================*/

:root{
  --brand: #16a34a;
  --brand-600: #15803d;

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

  --danger-bg: rgba(239,68,68,0.12);

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

/* =========================================================
   2. SAÚDE OCUPACIONAL
========================================================= */

/* ---------------------------------------------------------
   2.1 PAGE: OCCUPATIONAL HEALTH DOCUMENTS
--------------------------------------------------------- */

/* =========================================================
   PAGE: OCCUPATIONAL HEALTH DOCUMENTS
========================================================= */
/* ── Módulo: Saúde Ocupacional (Refatorado) ── */

/* Páginas específicas OH */
.page-oh-documents .gi-panel,
.page-oh-document-form .gi-card,
.page-oh-documents .oh-list,
.page-oh-document-form .gi-form{
  width: 100%;
}

/* Ajustes específicos de página */
@media (max-width: 991px){
  .page-oh-documents .gi-form .gi-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 15px;
  }
}

/* Dashboard OH - Ações */
  text-transform:uppercase;
  letter-spacing:0.06em;
}

.page-occupational-health-dashboard .oh-action-card-header p{
  font-size:12px;
  color:#94a3b8;
  margin:3px 0 0;
}

.page-occupational-health-dashboard .oh-action-list{
  padding:8px 0;
}

.page-occupational-health-dashboard .oh-action-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  text-decoration:none;
  color:#334155;
  font-size:14px;
  font-weight:500;
  transition:background 0.12s;
  border-bottom:1px solid rgba(15,23,42,0.05);
}

.page-occupational-health-dashboard .oh-action-item:last-child{
  border-bottom:none;
}

.page-occupational-health-dashboard .oh-action-item:hover{
  background:#f8fafc;
  color:#0f172a;
}

.page-occupational-health-dashboard .oh-action-item-arrow{
  font-size:16px;
  color:#cbd5e1;
}

.page-occupational-health-dashboard .oh-action-item-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  background:#f1f5f9;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#64748b;
}

.page-occupational-health-dashboard .oh-action-item-badge.oh-badge-alert{
  background:#fef3c7;
  color:#d97706;
}

@media (max-width: 1023px){
  .page-occupational-health-dashboard .oh-metrics-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .page-occupational-health-dashboard .oh-dash-body{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:16px;
  }

  .page-occupational-health-dashboard .oh-metric-value{
    font-size:26px;
  }
}

@media (min-width: 1024px){
  .page-occupational-health-dashboard .gi-container{
    max-width:100% !important;
    width:100% !important;
    padding:24px 32px !important;
    box-sizing:border-box;
  }

  .page-occupational-health-dashboard .oh-metrics-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
  }

  .page-occupational-health-dashboard .oh-dash-body{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
    margin-top:20px;
  }
}

/* ---------------------------------------------------------
   2.3 OH DASHBOARD — FILTRO DE UNIDADE PRESTADORA
--------------------------------------------------------- */

/* =========================================================
   OH DASHBOARD — FILTRO DE UNIDADE PRESTADORA
========================================================= */

.page-occupational-health-dashboard .oh-dash-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.page-occupational-health-dashboard .oh-dash-unit-filter{
  flex-shrink:0;
}

.page-occupational-health-dashboard .oh-dash-unit-filter select.gi-input{
  min-width:220px;
  max-width:320px;
  font-size:14px;
  padding:10px 34px 10px 12px;
  height:auto;
  background-color:#fff;
  border-color:rgba(15,23,42,0.18);
  color:#334155;
}

@media (max-width:640px){
  .page-occupational-health-dashboard .oh-dash-unit-filter select.gi-input{
    min-width:0;
    width:100%;
    max-width:100%;
  }

  .page-occupational-health-dashboard .oh-dash-header{
    flex-direction:column;
    gap:10px;
  }

  .page-occupational-health-dashboard .oh-dash-unit-filter{
    width:100%;
  }
}

/* ---------------------------------------------------------
   2.4 OH DASHBOARD — BLOCO DE STATS POR UNIDADE
--------------------------------------------------------- */

/* =========================================================
   OH DASHBOARD — BLOCO DE STATS POR UNIDADE
========================================================= */

.page-occupational-health-dashboard .oh-unit-stats-block{
  margin-top:20px;
}

.page-occupational-health-dashboard .oh-unit-stats-header{
  margin-bottom:14px;
}

.page-occupational-health-dashboard .oh-unit-stats-header h2{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin:0 0 2px;
}

.page-occupational-health-dashboard .oh-unit-stats-header p{
  font-size:12px;
  color:#94a3b8;
  margin:0;
}

.page-occupational-health-dashboard .oh-unit-stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media (min-width:640px){
  .page-occupational-health-dashboard .oh-unit-stats-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (min-width:1024px){
  .page-occupational-health-dashboard .oh-unit-stats-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

.page-occupational-health-dashboard .oh-unit-stat-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:10px;
  padding:16px 18px;
  text-decoration:none;
  color:inherit;
  transition:background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.10s;
}

.page-occupational-health-dashboard .oh-unit-stat-card:hover{
  background:#f8fafc;
  border-color:rgba(15,23,42,0.16);
  box-shadow:0 6px 18px rgba(15,23,42,0.08);
  transform:translateY(-1px);
}

.page-occupational-health-dashboard .oh-unit-stat-card.has-open{
  border-color:rgba(217,119,6,0.35);
  background:#fffbeb;
}

.page-occupational-health-dashboard .oh-unit-stat-card.has-open:hover{
  border-color:rgba(217,119,6,0.55);
  background:#fef9ec;
}

.page-occupational-health-dashboard .oh-unit-stat-name{
  font-size:14px;
  font-weight:700;
  color:#0f172a;
  line-height:1.3;
}

.page-occupational-health-dashboard .oh-unit-stat-company{
  font-size:12px;
  color:#94a3b8;
  margin-top:-6px;
}

.page-occupational-health-dashboard .oh-unit-stat-numbers{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.page-occupational-health-dashboard .oh-unit-stat-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.page-occupational-health-dashboard .oh-unit-stat-value{
  font-size:22px;
  font-weight:800;
  color:#0f172a;
  line-height:1;
}

.page-occupational-health-dashboard .oh-unit-stat-label{
  font-size:11px;
  color:#94a3b8;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.page-occupational-health-dashboard .oh-unit-stat-item.is-alert .oh-unit-stat-value{
  color:#d97706;
}

.page-occupational-health-dashboard .oh-unit-stat-item.is-alert .oh-unit-stat-label{
  color:#d97706;
}

/* ---------------------------------------------------------
   2.5 PAGE: OH ASO RISKS
--------------------------------------------------------- */

/* =========================================================
   PAGE: OH ASO RISKS
========================================================= */

.page-oh-aso-risks .oh-section-card{
  border:1px solid rgba(15,23,42,0.10);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}

.page-oh-aso-risks .oh-section-card-header{
  padding:16px 20px 12px;
  border-bottom:1px solid rgba(15,23,42,0.07);
}

.page-oh-aso-risks .oh-section-card-header h2{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

.page-oh-aso-risks .oh-section-card-header p{
  font-size:12px;
  color:#94a3b8;
  margin:3px 0 0;
}

.page-oh-aso-risks .oh-section-card-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.page-oh-aso-risks .oh-form-contents{
  display:contents;
}

.page-oh-aso-risks .oh-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.page-oh-aso-risks .oh-field .gi-input{
  width:100%;
  box-sizing:border-box;
}

.page-oh-aso-risks .oh-required{
  color:#e11d48;
}

.page-oh-aso-risks .oh-textarea{
  width:100%;
  box-sizing:border-box;
  resize:vertical;
}

.page-oh-aso-risks .oh-status-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background:#f8fafc;
  border-radius:8px;
  border:1px solid rgba(15,23,42,0.08);
}

.page-oh-aso-risks .oh-status-box-title{
  font-size:13px;
  font-weight:600;
  color:#334155;
}

.page-oh-aso-risks .oh-checkline-reset{
  margin:0;
}

.page-oh-aso-risks .oh-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

.page-oh-aso-risks .oh-pill-active{
  background:#dcfce7;
  color:#166534;
}

.page-oh-aso-risks .oh-pill-inactive{
  background:#f1f5f9;
  color:#64748b;
}

.page-oh-aso-risks .oh-agent-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  background:#f1f5f9;
  color:#334155;
  white-space:nowrap;
}

.page-oh-aso-risks .oh-th-order{
  width:50px;
  text-align:center;
}

.page-oh-aso-risks .oh-empty-cell{
  text-align:center;
  padding:32px 12px;
  color:#94a3b8;
  font-size:14px;
}

.page-oh-aso-risks .oh-risk-name{
  font-weight:600;
  color:#0f172a;
}

.page-oh-aso-risks .oh-risk-details{
  color:#64748b;
  font-size:13px;
}

.page-oh-aso-risks .oh-sort-order{
  text-align:center;
  color:#94a3b8;
}

@media (max-width: 1023px){
  .page-oh-aso-risks .oh-page{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .page-oh-aso-risks .oh-form-footer{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .page-oh-aso-risks .oh-g2,
  .page-oh-aso-risks .oh-g3{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .page-oh-aso-risks .oh-table-wrap{
    overflow-x:auto;
  }
}

@media (min-width: 1024px){
  .page-oh-aso-risks .gi-container{
    max-width:100% !important;
    width:100% !important;
    padding:24px 32px !important;
    box-sizing:border-box;
  }

  .page-oh-aso-risks .oh-page{
    display:grid;
    grid-template-columns:400px 1fr;
    gap:20px;
    align-items:start;
  }

  .page-oh-aso-risks .oh-col-form{
    grid-column:1;
    grid-row:1;
    position:sticky;
    top:24px;
  }

  .page-oh-aso-risks .oh-col-list{
    grid-column:2;
    grid-row:1;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .page-oh-aso-risks .oh-g2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 20px;
  }

  .page-oh-aso-risks .oh-g3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:14px 20px;
  }

  .page-oh-aso-risks .oh-agent-row{
    display:grid;
    grid-template-columns:1fr 100px;
    gap:14px 20px;
  }

  .page-oh-aso-risks .oh-form-footer{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .page-oh-aso-risks .oh-filter-row{
    display:grid;
    grid-template-columns:1fr 160px 160px;
    gap:14px 16px;
    align-items:end;
  }

  .page-oh-aso-risks .oh-filter-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding-top:4px;
  }

  .page-oh-aso-risks .oh-table-wrap{
    width:100%;
    overflow-x:auto;
  }

  .page-oh-aso-risks .oh-table{
    width:100%;
    border-collapse:collapse;
  }

  .page-oh-aso-risks .oh-table thead th{
    padding:10px 12px;
    text-align:left;
    font-size:12px;
    font-weight:700;
    color:#64748b;
    border-bottom:1px solid rgba(15,23,42,0.10);
    white-space:nowrap;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }

  .page-oh-aso-risks .oh-table tbody td{
    padding:12px 12px;
    border-bottom:1px solid rgba(15,23,42,0.06);
    vertical-align:middle;
    font-size:14px;
  }

  .page-oh-aso-risks .oh-table tbody tr:last-child td{
    border-bottom:none;
  }

  .page-oh-aso-risks .oh-table tbody tr:hover{
    background:rgba(15,23,42,0.02);
  }

  .page-oh-aso-risks .oh-col-actions{
    width:1%;
    white-space:nowrap;
  }

  .page-oh-aso-risks .oh-row-actions{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .page-oh-aso-risks .oh-row-actions form{
    display:contents;
  }
}

/* ---------------------------------------------------------
   2.6 PAGE: OCCUPATIONAL HEALTH COMPANY FORM
--------------------------------------------------------- */

/* =========================================================
   PAGE: OCCUPATIONAL HEALTH COMPANY FORM
========================================================= */

.page-oh-company-form .oh-section-card{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.page-oh-company-form .oh-section-card-header{
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.07);
}

.page-oh-company-form .oh-section-card-header h2{
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.page-oh-company-form .oh-section-card-header p{
  font-size: 12px;
  color: #94a3b8;
  margin: 3px 0 0;
}

.page-oh-company-form .oh-section-card-body{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-oh-company-form .oh-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-oh-company-form .oh-field .gi-input{
  width: 100%;
  box-sizing: border-box;
}

.page-oh-company-form .oh-required{
  color: #e11d48;
}

.page-oh-company-form .oh-notes-textarea{
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.page-oh-company-form .oh-checkline-reset{
  margin: 0;
}

@media (max-width: 1023px){
  .page-oh-company-form .oh-form-page{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .page-oh-company-form .oh-form-footer{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .page-oh-company-form .oh-fields-grid-2,
  .page-oh-company-form .oh-fields-grid-3{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

@media (min-width: 1024px){
  .page-oh-company-form .gi-container{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  .page-oh-company-form .oh-form-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
    align-items: start;
  }

  .page-oh-company-form .oh-card-identificacao{
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-company-form .oh-card-identificacao .oh-section-card-body{
    flex: 1;
  }

  .page-oh-company-form .oh-card-documentos{
    grid-column: 2;
    grid-row: 1;
  }

  .page-oh-company-form .oh-card-contato{
    grid-column: 2;
    grid-row: 2;
  }

  .page-oh-company-form .oh-card-observacoes{
    grid-column: 1 / -1;
  }

  .page-oh-company-form .oh-form-footer{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
  }

  .page-oh-company-form .oh-form-footer .gi-btn-primary{
    min-width: 180px;
  }

  .page-oh-company-form .oh-fields-grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
  }

  .page-oh-company-form .oh-fields-grid-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px 20px;
  }

  .page-oh-company-form .oh-field-full{
    grid-column: 1 / -1;
  }

  .page-oh-company-form .oh-obs-row{
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 20px;
    align-items: start;
  }

  .page-oh-company-form .oh-obs-row > .oh-field{
    align-self: start;
  }

  .page-oh-company-form .oh-obs-status{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid rgba(15,23,42,0.08);
    height: fit-content;
    align-self: start;
    margin-top: 22px;
  }

  .page-oh-company-form .oh-obs-status-title{
    font-size: 12px;
    font-weight: 700;
    color: #334155;
  }
}

/* ---------------------------------------------------------
   2.7 PAGE: OCCUPATIONAL HEALTH UNIT FORM
--------------------------------------------------------- */

/* =========================================================
   PAGE: OCCUPATIONAL HEALTH UNIT FORM
========================================================= */

@media (min-width: 1024px){
  .page-oh-unit-form .gi-container{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  .page-oh-unit-form .oh-form-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }

  .page-oh-unit-form .oh-card-identificacao{
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-unit-form .oh-card-identificacao .oh-section-card-body{
    flex: 1;
  }

  .page-oh-unit-form .oh-card-endereco{
    grid-column: 2;
    grid-row: 1;
  }

  .page-oh-unit-form .oh-card-contato{
    grid-column: 1 / -1;
  }

  .page-oh-unit-form .oh-form-footer{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
  }

  .page-oh-unit-form .oh-form-footer .gi-btn-primary{
    min-width: 180px;
  }
}

/* ---------------------------------------------------------
   2.8 PAGE: OCCUPATIONAL HEALTH PHYSICIAN FORM
--------------------------------------------------------- */

/* =========================================================
   PAGE: OCCUPATIONAL HEALTH PHYSICIAN FORM
========================================================= */

@media (min-width: 1024px){
  .page-oh-physician-form .gi-container{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  .page-oh-physician-form .oh-form-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }

  .page-oh-physician-form .oh-card-medico{
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-physician-form .oh-card-medico .oh-section-card-body{
    flex: 1;
  }

  .page-oh-physician-form .oh-card-empresa{
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-physician-form .oh-card-empresa .oh-section-card-body{
    flex: 1;
  }

  .page-oh-physician-form .oh-form-footer{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
  }

  .page-oh-physician-form .oh-form-footer .gi-btn-primary{
    min-width: 180px;
  }
}

/* ---------------------------------------------------------
   2.9 PAGE: OCCUPATIONAL HEALTH WORKER FORM
--------------------------------------------------------- */

/* =========================================================
   PAGE: OCCUPATIONAL HEALTH WORKER FORM
========================================================= */

@media (min-width: 1024px){
  .page-oh-worker-form .gi-container{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  .page-oh-worker-form .oh-form-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }

  .page-oh-worker-form .oh-card-pessoal{
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-worker-form .oh-card-pessoal .oh-section-card-body{
    flex: 1;
  }

  .page-oh-worker-form .oh-card-docs{
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-worker-form .oh-card-docs .oh-section-card-body{
    flex: 1;
  }

  .page-oh-worker-form .oh-card-vinculo{
    grid-column: 1 / -1;
  }

  .page-oh-worker-form .oh-form-footer{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
  }

  .page-oh-worker-form .oh-form-footer .gi-btn-primary{
    min-width: 180px;
  }
}

/* ---------------------------------------------------------
   2.10 PAGE: OCCUPATIONAL HEALTH EMPLOYMENT FORM
--------------------------------------------------------- */

/* =========================================================
   PAGE: OCCUPATIONAL HEALTH EMPLOYMENT FORM
========================================================= */

@media (min-width: 1024px){
  .page-oh-employment-form .gi-container{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  .page-oh-employment-form .oh-form-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }

  .page-oh-employment-form .oh-card-vinculo{
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-employment-form .oh-card-vinculo .oh-section-card-body{
    flex: 1;
  }

  .page-oh-employment-form .oh-card-funcao{
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-employment-form .oh-card-funcao .oh-section-card-body{
    flex: 1;
  }

  .page-oh-employment-form .oh-card-periodo{
    grid-column: 1 / -1;
  }

  .page-oh-employment-form .oh-form-footer{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
  }

  .page-oh-employment-form .oh-form-footer .gi-btn-primary{
    min-width: 180px;
  }
}

/* ---------------------------------------------------------
   2.11 PAGE: OCCUPATIONAL HEALTH SERVICE TYPE FORM
--------------------------------------------------------- */

/* =========================================================
   PAGE: OCCUPATIONAL HEALTH SERVICE TYPE FORM
========================================================= */

@media (min-width: 1024px){
  .page-oh-service-type-form .gi-container{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  .page-oh-service-type-form .oh-form-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }

  .page-oh-service-type-form .oh-card-identificacao{
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-service-type-form .oh-card-identificacao .oh-section-card-body{
    flex: 1;
  }

  .page-oh-service-type-form .oh-card-configuracoes{
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-service-type-form .oh-card-configuracoes .oh-section-card-body{
    flex: 1;
  }

  .page-oh-service-type-form .oh-form-footer{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
  }

  .page-oh-service-type-form .oh-form-footer .gi-btn-primary{
    min-width: 220px;
  }
}

/* ---------------------------------------------------------
   2.12 PAGE: OCCUPATIONAL HEALTH ENCOUNTER FORM
--------------------------------------------------------- */

/* =========================================================
   PAGE: OCCUPATIONAL HEALTH ENCOUNTER FORM
========================================================= */

.page-oh-encounter-form .oh-notes-textarea{
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

@media (max-width: 1023px){
  .page-oh-encounter-form .oh-form-page{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .page-oh-encounter-form .oh-form-footer{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .page-oh-encounter-form .oh-g2,
  .page-oh-encounter-form .oh-g3{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

@media (min-width: 1024px){
  .page-oh-encounter-form .gi-container{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  .page-oh-encounter-form .oh-form-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }

  .page-oh-encounter-form .oh-card-atendimento{
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-encounter-form .oh-card-atendimento .oh-section-card-body{
    flex: 1;
  }

  .page-oh-encounter-form .oh-card-localizacao{
    grid-column: 2;
    grid-row: 1;
  }

  .page-oh-encounter-form .oh-card-profissionais{
    grid-column: 2;
    grid-row: 2;
  }

  .page-oh-encounter-form .oh-card-observacoes{
    grid-column: 1 / -1;
  }

  .page-oh-encounter-form .oh-form-footer{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
  }

  .page-oh-encounter-form .oh-form-footer .gi-btn-primary{
    min-width: 180px;
  }

  .page-oh-encounter-form .oh-g2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
  }

  .page-oh-encounter-form .oh-g3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px 20px;
  }
}

/* ---------------------------------------------------------
   2.13 PAGE: OCCUPATIONAL HEALTH DOCUMENT FORM
--------------------------------------------------------- */

/* =========================================================
   PAGE: OCCUPATIONAL HEALTH DOCUMENT FORM
========================================================= */

@media (max-width: 1023px){
  .page-oh-document-form .oh-form-page{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .page-oh-document-form .oh-form-footer{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .page-oh-document-form .oh-g2,
  .page-oh-document-form .oh-g3{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

@media (min-width: 1024px){
  .page-oh-document-form .gi-container{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  .page-oh-document-form .oh-form-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }

  .page-oh-document-form .oh-card-documento{
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-document-form .oh-card-documento .oh-section-card-body{
    flex: 1;
  }

  .page-oh-document-form .oh-card-emissao{
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-oh-document-form .oh-card-emissao .oh-section-card-body{
    flex: 1;
  }

  .page-oh-document-form .oh-card-payload{
    grid-column: 1 / -1;
  }

  .page-oh-document-form .oh-form-footer{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
  }

  .page-oh-document-form .oh-form-footer .gi-btn-primary{
    min-width: 180px;
  }
}

/* =========================================================
   3. BARBEARIA
========================================================= */

/* ---------------------------------------------------------
   3.1 PAGE: BARBER DASHBOARD
--------------------------------------------------------- */

/* =========================================================
   PAGE: BARBER DASHBOARD
========================================================= */

.page-barber-dashboard .oh-dash-header{
  margin-bottom:20px;
}

.page-barber-dashboard .oh-dash-header h1{
  font-size:22px;
  font-weight:700;
  color:#0f172a;
  margin:0 0 4px;
}

.page-barber-dashboard .oh-dash-header p{
  font-size:13px;
  color:#94a3b8;
  margin:0;
}

.page-barber-dashboard .oh-metric-card{
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:10px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.page-barber-dashboard .oh-metric-label{
  font-size:12px;
  font-weight:600;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

.page-barber-dashboard .oh-metric-value{
  font-size:32px;
  font-weight:800;
  color:#0f172a;
  line-height:1;
}

.page-barber-dashboard .oh-metric-sub{
  font-size:12px;
  color:#94a3b8;
  margin-top:2px;
}

.page-barber-dashboard .oh-metric-card.oh-metric-alert .oh-metric-value{
  color:#d97706;
}

.page-barber-dashboard .oh-metric-card.oh-metric-today .oh-metric-value{
  color:#0ea5e9;
}

.page-barber-dashboard .oh-metric-card.oh-metric-success .oh-metric-value{
  color:#16a34a;
}

.page-barber-dashboard .oh-action-card{
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:10px;
  overflow:hidden;
}

.page-barber-dashboard .oh-action-card-header{
  padding:14px 18px 10px;
  border-bottom:1px solid rgba(15,23,42,0.07);
}

.page-barber-dashboard .oh-action-card-header h2{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

.page-barber-dashboard .oh-action-card-header p{
  font-size:12px;
  color:#94a3b8;
  margin:3px 0 0;
}

.page-barber-dashboard .oh-action-list{
  padding:8px 0;
}

.page-barber-dashboard .oh-action-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  text-decoration:none;
  color:#334155;
  font-size:14px;
  font-weight:500;
  transition:background 0.12s;
  border-bottom:1px solid rgba(15,23,42,0.05);
}

.page-barber-dashboard .oh-action-item:last-child{
  border-bottom:none;
}

.page-barber-dashboard .oh-action-item:hover{
  background:#f8fafc;
  color:#0f172a;
}

.page-barber-dashboard .oh-action-item-arrow{
  font-size:16px;
  color:#cbd5e1;
}

.page-barber-dashboard .oh-action-item-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  background:#f1f5f9;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#64748b;
}

.page-barber-dashboard .barber-last-cuts-card{
  margin-top:20px;
}

@media (max-width: 1023px){
  .page-barber-dashboard .oh-metrics-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .page-barber-dashboard .oh-dash-body{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:16px;
  }

  .page-barber-dashboard .oh-metric-value{
    font-size:26px;
  }

  .page-barber-dashboard .barber-last-cuts-card{
    margin-top:14px;
  }
}

@media (min-width: 1024px){
  .page-barber-dashboard .gi-container{
    max-width:100% !important;
    width:100% !important;
    padding:24px 32px !important;
    box-sizing:border-box;
  }

  .page-barber-dashboard .oh-metrics-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
  }

  .page-barber-dashboard .oh-dash-body{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
    margin-top:20px;
  }
}

/* ---------------------------------------------------------
   3.2 PAGE: BARBER CUTS
--------------------------------------------------------- */

/* =========================================================
   PAGE: BARBER CUTS
   Apenas overrides exclusivos desta página.
   O padrão estrutural (gi-filter-header, gi-panel-form,
   gi-picker-teleport etc.) está em components.css.
========================================================= */

/* Painéis de item (serviço / combo / plano) — span total */
.page-barber-cuts .gi-panel-item{
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: 1 / -1;
}

.page-barber-cuts .gi-panel-item.gi-panel-item-hidden{
  display: none;
}

/* Modal de pendência cadastral */
.page-barber-cuts .bcc-modal{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.page-barber-cuts .bcc-modal.is-open{
  display: flex;
}

.page-barber-cuts .bcc-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.page-barber-cuts .bcc-modal-dialog{
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.page-barber-cuts .bcc-modal-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.page-barber-cuts .bcc-modal-title{
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.page-barber-cuts .bcc-modal-subtitle{
  margin: 6px 0 0;
  color: var(--muted, #64748b);
  font-size: .95rem;
}

.page-barber-cuts .bcc-modal-close{
  flex: 0 0 auto;
}

.page-barber-cuts .bcc-modal-body{
  padding: 20px;
}

.page-barber-cuts .bcc-modal-pending-list{
  margin: 0 0 16px;
  padding-left: 18px;
  color: var(--muted, #475569);
}

.page-barber-cuts .bcc-modal-form{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.page-barber-cuts .bcc-modal-form .gi-panel-field-full{
  grid-column: 1 / -1;
}

.page-barber-cuts .bcc-modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px 20px;
}

.page-barber-cuts .bcc-customer-pending-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .82rem;
  color: #9a3412;
}

.page-barber-cuts .bcc-customer-pending-badge::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  flex: 0 0 8px;
}

/* ── Responsivo ── */
@media (max-width: 1023px){
  .page-barber-cuts .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }

  .page-barber-cuts .bcc-modal{
    padding: 12px;
  }

  .page-barber-cuts .bcc-modal-dialog{
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 16px;
  }

  .page-barber-cuts .bcc-modal-form{
    grid-template-columns: 1fr;
  }

  .page-barber-cuts .bcc-modal-actions{
    flex-direction: column-reverse;
  }

  .page-barber-cuts .bcc-modal-actions .gi-btn{
    width: 100%;
  }
}

@media (min-width: 1024px){
  .page-barber-cuts .gi-container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  /* Form em 3 colunas no desktop */
  .page-barber-cuts .gi-panel-form{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1440px){
  /* 4 colunas em telas largas */
  .page-barber-cuts .gi-panel-form{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------------
   3.3 PAGE: BARBER LOCATIONS
--------------------------------------------------------- */

/* =========================================================
   PAGE: BARBER LOCATIONS
   Estilos exclusivos da página de unidades de atendimento.
   Estrutura base herdada de components.css e utilities.css.
========================================================= */
 
/* ── Container fluido com padding responsivo ── */
.page-barber-locations .gi-container-fluid{
  padding: 20px 16px 40px;
}
 
@media (min-width: 1024px){
  .page-barber-locations .gi-container-fluid{
    padding: 28px 32px 48px;
  }
}
 
/* ── Cabeçalho da página ── */
.page-barber-locations .bbl-page-header{
  margin-bottom: 0;
}
 
/* ── Asterisco de obrigatoriedade ── */
.bbl-required{
  color: var(--danger);
  font-weight: 700;
}
 
/* ── Corpo do formulário: padding interno ── */
.page-barber-locations .bbl-form-body{
  padding: 18px 18px 4px;
  gap: 16px;
}
 
/* ── Grid de colaboradores: checkboxes ── */
.bbl-users-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
 
@media (min-width: 640px){
  .bbl-users-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
 
@media (min-width: 1024px){
  .bbl-users-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}
 
/* ── Item de colaborador: label-checkbox estilizado ── */
.bbl-user-check{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--input-bg);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
 
.bbl-user-check:hover{
  background: rgba(22, 163, 74, 0.05);
  border-color: rgba(22, 163, 74, 0.28);
}
 
.bbl-user-check.is-checked{
  background: rgba(22, 163, 74, 0.10);
  border-color: rgba(22, 163, 74, 0.40);
}
 
.bbl-user-check input[type="checkbox"]{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
 
.bbl-user-check-name{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
/* ── Toggle de status (checkbox inline) ── */
.bbl-toggle-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-md);
  background: var(--input-bg);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  min-height: 48px;
}
 
.bbl-toggle-label input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
}
 
/* ── Endereço na tabela: texto compacto ── */
.bbl-address-text{
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
 
/* ── Lista de colaboradores na célula da tabela ── */
.bbl-colabs-list{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
 
.bbl-colabs-list .gi-pill{
  margin-left: 0;
}
 
/* ── Botão de perigo (excluir) ── */
.bbl-btn-danger{
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.22);
  color: var(--danger);
}
 
.bbl-btn-danger:hover{
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.38);
}
 
/* ── Tabela: oculta no mobile, visível no desktop ── */
.bbl-table-card{
  display: none;
}
 
@media (min-width: 768px){
  .bbl-table-card{
    display: block;
  }
}
 
/* ── Cards mobile: ocultos no desktop ── */
.bbl-mobile-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
@media (min-width: 768px){
  .bbl-mobile-list{
    display: none;
  }
}
 
/* ── Card mobile: layout interno ── */
.bbl-mobile-card{
  padding: 14px;
}
 
.bbl-mobile-card-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
 
.bbl-mobile-card-info{
  min-width: 0;
  flex: 1 1 auto;
}
 
/* ── Ações do card mobile: grid de botões ── */
.bbl-mobile-actions{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
/* Evita qualquer estouro horizontal dentro da página */
.page-barber-locations,
.page-barber-locations .gi-content-shell,
.page-barber-locations .gi-container-fluid,
.page-barber-locations .gi-card,
.page-barber-locations .gi-form,
.page-barber-locations .gi-form-section,
.page-barber-locations .gi-panel-field,
.page-barber-locations .oh-g2,
.page-barber-locations .oh-g3,
.page-barber-locations .bbl-mobile-list,
.page-barber-locations .bbl-mobile-card{
  min-width: 0;
  max-width: 100%;
}

/* Garante que borda/sombra não pareçam cortadas no mobile */
@media (max-width: 767px){
  .page-barber-locations .gi-container-fluid{
    padding: 16px 12px 32px;
  }

  .page-barber-locations .gi-card{
    width: 100%;
  }

  .page-barber-locations .bbl-form-body{
    padding: 16px 14px 4px;
  }

  .page-barber-locations .gi-card-header,
  .page-barber-locations .gi-actions{
    padding-left: 14px;
    padding-right: 14px;
  }

  .page-barber-locations .gi-alert{
    margin-left: 0;
    margin-right: 0;
  }

  .page-barber-locations .bbl-mobile-card{
    width: 100%;
  }

  .page-barber-locations .bbl-mobile-card-top,
  .page-barber-locations .bbl-mobile-card-info{
    min-width: 0;
  }

  .page-barber-locations .gi-title,
  .page-barber-locations .gi-sub,
  .page-barber-locations .bbl-user-check-name{
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
}

/* ---------------------------------------------------------
   3.4 PAGE: BARBER CUSTOMERS
--------------------------------------------------------- */

/* =========================================================
   PAGE: BARBER CUSTOMERS
   Apenas overrides exclusivos desta página.
   O padrão estrutural (gi-filter-header, gi-panel-form,
   gi-picker-teleport etc.) está em components.css.
========================================================= */

/* Campo status: só visível no modo edição (JS remove is-hidden) */
.page-barber-customers .bcu-status-field{
  /* sem regras extras — display controlado por is-hidden */
}

/* Linha em edição: destaque verde na tabela */
.page-barber-customers .gi-table-row.gi-table-row-editing td{
  background: rgba(22, 163, 74, 0.06);
}
.page-barber-customers .gi-table-row.gi-table-row-editing td:first-child{
  border-left: 3px solid var(--brand);
}

/* Card mobile em edição */
.page-barber-customers .gi-mobile-card.gi-mobile-card-editing{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

/* Mobile: 3 ações em grid */
.page-barber-customers .bcu-mobile-actions{
  grid-template-columns: 1fr 1fr 1fr;
}

/* ── Responsivo ── */
@media (max-width: 1023px){
  .page-barber-customers .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }
}

@media (min-width: 1024px){
  .page-barber-customers .gi-container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  /* Form em 2 colunas no desktop */
  .page-barber-customers .gi-panel-form{
    grid-template-columns: repeat(2, 1fr);
  }

  /* Status e ações ocupam linha inteira */
  .page-barber-customers .bcu-status-field,
  .page-barber-customers .gi-panel-actions{
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px){
  /* 4 campos em linha; status volta a ocupar 1 célula */
  .page-barber-customers .gi-panel-form{
    grid-template-columns: repeat(4, 1fr);
  }

  .page-barber-customers .bcu-status-field{
    grid-column: auto;
  }

  .page-barber-customers .gi-panel-actions{
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------
   3.5 PAGE: BARBER SERVICES
--------------------------------------------------------- */

/* =========================================================
   PAGE: BARBER SERVICES
   Apenas overrides exclusivos desta página.
   O padrão estrutural (gi-filter-header, gi-panel-form,
   gi-picker-teleport etc.) está em components.css.
========================================================= */

/* Campo status: só visível no modo edição */
.page-barber-services .bs-status-field{
  /* display controlado por is-hidden via JS */
}

/* Linha em edição: destaque verde na tabela */
.page-barber-services .bs-table-row.gi-table-row-editing td{
  background: rgba(22, 163, 74, 0.06);
}
.page-barber-services .bs-table-row.gi-table-row-editing td:first-child{
  border-left: 3px solid var(--brand);
}

/* Card mobile em edição */
.page-barber-services .bs-mobile-card.gi-table-row-editing{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

/* Mobile: botão único ocupa linha toda */
.page-barber-services .oh-mobile-card-actions{
  grid-template-columns: 1fr;
}

/* ── Responsivo ── */
@media (max-width: 1023px){
  .page-barber-services .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }
}

@media (min-width: 1024px){
  .page-barber-services .gi-container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  /* Form: nome ocupa mais espaço, preço e duração dividem o resto */
  .page-barber-services .gi-panel-form{
    grid-template-columns: 2fr 1fr 1fr;
  }

  .page-barber-services .bs-status-field,
  .page-barber-services .gi-panel-actions{
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px){
  /* Com status visível: nome + preço + duração + status em linha */
  .page-barber-services .gi-panel-form{
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .page-barber-services .bs-status-field{
    grid-column: auto;
  }

  .page-barber-services .gi-panel-actions{
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------
   3.6 PAGE: BARBER COMBOS
--------------------------------------------------------- */

/* =========================================================
   PAGE: BARBER COMBOS
   Apenas overrides exclusivos desta página.
   O padrão estrutural (gi-filter-header, gi-panel-form,
   gi-picker-teleport etc.) está em components.css.
========================================================= */

/* Campo status: só visível no modo edição */
.page-barber-combos .bc-status-field{
  /* display controlado por is-hidden via JS */
}

/* Seção de itens do combo: só visível no modo edição */
.page-barber-combos .bc-items-section{
  /* display controlado por is-hidden via JS */
}

/* Cabeçalho da seção de itens */
.page-barber-combos .bc-items-header{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px 10px;
}

.page-barber-combos .bc-items-title{
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.page-barber-combos .bc-items-hint{
  font-size: 13px;
}

/* Linha em edição: destaque verde na tabela */
.page-barber-combos .bc-table-row.gi-table-row-editing td{
  background: rgba(22, 163, 74, 0.06);
}
.page-barber-combos .bc-table-row.gi-table-row-editing td:first-child{
  border-left: 3px solid var(--brand);
}

/* Card mobile em edição */
.page-barber-combos .bc-mobile-card.gi-table-row-editing{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

/* Mobile: botão único ocupa linha toda */
.page-barber-combos .oh-mobile-card-actions{
  grid-template-columns: 1fr;
}

/* ── Responsivo ── */
@media (max-width: 1023px){
  .page-barber-combos .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }
}

@media (min-width: 1024px){
  .page-barber-combos .gi-container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  /* Nome + preço lado a lado */
  .page-barber-combos .gi-panel-form{
    grid-template-columns: 2fr 1fr;
  }

  .page-barber-combos .bc-status-field,
  .page-barber-combos .gi-panel-actions{
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px){
  /* Com status visível: nome + preço + status em linha */
  .page-barber-combos .gi-panel-form{
    grid-template-columns: 2fr 1fr 1fr;
  }

  .page-barber-combos .bc-status-field{
    grid-column: auto;
  }

  .page-barber-combos .gi-panel-actions{
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------
   3.7 PAGE: BARBER PLANS
--------------------------------------------------------- */

/* =========================================================
   PAGE: BARBER PLANS
   Apenas overrides exclusivos desta página.
   O padrão estrutural (gi-filter-header, gi-panel-form,
   gi-picker-teleport etc.) está em components.css.
========================================================= */

/* Campo status: só visível no modo edição */
.page-barber-plans .bp-status-field{
  /* display controlado por is-hidden via JS */
}

/* Campo cortes inclusos: só visível para tipo monthly_pack */
.page-barber-plans .bp-included-field{
  /* display controlado por syncIncludedVisibility() via JS */
}

/* Linha em edição: destaque verde na tabela */
.page-barber-plans .bp-table-row.gi-table-row-editing td{
  background: rgba(22, 163, 74, 0.06);
}
.page-barber-plans .bp-table-row.gi-table-row-editing td:first-child{
  border-left: 3px solid var(--brand);
}

/* Card mobile em edição */
.page-barber-plans .bp-mobile-card.gi-table-row-editing{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

/* Mobile: botão único ocupa linha toda */
.page-barber-plans .oh-mobile-card-actions{
  grid-template-columns: 1fr;
}

/* ── Responsivo ── */
@media (max-width: 1023px){
  .page-barber-plans .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }
}

@media (min-width: 1024px){
  .page-barber-plans .gi-container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  /* Nome + tipo + preço + cortes em 4 colunas */
  .page-barber-plans .gi-panel-form{
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  /* Benefícios, status e ações ocupam linha inteira */
  .page-barber-plans .gi-panel-field-full,
  .page-barber-plans .bp-status-field,
  .page-barber-plans .gi-panel-actions{
    grid-column: 1 / -1;
  }
}

@media (min-width: 1440px){
  /* Mantém 4 colunas, sem mudança */
  .page-barber-plans .gi-panel-form{
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* ---------------------------------------------------------
   3.8 PAGE: BARBER SUBSCRIPTIONS
--------------------------------------------------------- */

/* =========================================================
   PAGE: BARBER SUBSCRIPTIONS
   Apenas overrides exclusivos desta página.
========================================================= */

/* Grid: resumo da assinatura + gerenciar lado a lado no desktop */
.page-barber-subscriptions .bs-management-grid{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Títulos de painel (substituem inline font-weight:900) */
.page-barber-subscriptions .bs-panel-title{
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}

.page-barber-subscriptions .bs-panel-meta{
  margin-top: 2px;
}

/* Ações de pausar/cancelar */
.page-barber-subscriptions .bs-sub-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 18px;
}

.page-barber-subscriptions .bs-sub-actions form{
  width: 100%;
}

/* Grid de indicadores do ciclo */
.page-barber-subscriptions .bs-cycle-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.page-barber-subscriptions .bs-cycle-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-barber-subscriptions .bs-cycle-item strong{
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

/* ── Responsivo ── */
@media (max-width: 1023px){
  .page-barber-subscriptions .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }

  .page-barber-subscriptions .bs-cycle-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px){
  .page-barber-subscriptions .gi-container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  /* Dois cards lado a lado: resumo (fixo) + gerenciar (cresce) */
  .page-barber-subscriptions .bs-management-grid{
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    align-items: start;
  }
}

@media (min-width: 1280px){
  .page-barber-subscriptions .bs-management-grid{
    grid-template-columns: 400px 1fr;
  }
}

/* ---------------------------------------------------------
   3.9 PAGE: BARBER PROFESSIONAL SCHEDULES
--------------------------------------------------------- */

/* =========================================================
   PAGE: BARBER PROFESSIONAL SCHEDULES
   Refinos de layout para nova jornada, edição e listagem.
========================================================= */

.page-barber-professional-schedules .bps-page-grid{
  display:grid;
  gap:16px;
}

.page-barber-professional-schedules .bps-form-grid,
.page-barber-professional-schedules .bps-time-grid,
.page-barber-professional-schedules .bps-filter-row,
.page-barber-professional-schedules .bps-filter-grid{
  min-width:0;
}

.page-barber-professional-schedules .bps-form-grid > div,
.page-barber-professional-schedules .bps-time-grid > div,
.page-barber-professional-schedules .bps-filter-grid > div,
.page-barber-professional-schedules .bps-edit-grid > div{
  min-width:0;
}

.page-barber-professional-schedules .bps-form-grid .gi-input,
.page-barber-professional-schedules .bps-form-grid select,
.page-barber-professional-schedules .bps-form-grid input,
.page-barber-professional-schedules .bps-time-grid .gi-input,
.page-barber-professional-schedules .bps-time-grid select,
.page-barber-professional-schedules .bps-time-grid input,
.page-barber-professional-schedules .bps-filter-grid .gi-input,
.page-barber-professional-schedules .bps-filter-grid select,
.page-barber-professional-schedules .bps-filter-grid input{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.page-barber-professional-schedules .bps-form-card,
.page-barber-professional-schedules .bps-list-card{
  overflow:hidden;
}

.page-barber-professional-schedules .bps-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px 16px;
  align-items:end;
}

.page-barber-professional-schedules .bps-time-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px 16px;
}

.page-barber-professional-schedules .bps-status-field,
.page-barber-professional-schedules .bps-edit-active{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-self:stretch;
}

.page-barber-professional-schedules .bps-status-field .gi-label,
.page-barber-professional-schedules .bps-edit-active .gi-label{
  margin-bottom:8px;
}

.page-barber-professional-schedules .bps-status-toggle{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--input-border);
  border-radius:var(--r-md);
  background:var(--input-bg);
  box-sizing:border-box;
}

.page-barber-professional-schedules .bps-checkline-alone{
  width:100%;
  min-height:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0;
  padding:0;
}

.page-barber-professional-schedules .bps-checkline-alone input[type="checkbox"]{
  flex:0 0 auto;
  margin:0;
  width:18px;
  height:18px;
}

.page-barber-professional-schedules .bps-checkline-alone span{
  flex:1 1 auto;
  min-width:0;
  display:block;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
}

.page-barber-professional-schedules .bps-weekday-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.page-barber-professional-schedules .bps-weekday-item{
  min-height:46px;
  justify-content:center;
  border:1px solid var(--line, #d9dee7);
  border-radius:14px;
  padding:0 12px;
}

.page-barber-professional-schedules .bps-form-note{
  margin-top:8px;
}

.page-barber-professional-schedules .bps-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:16px;
}

.page-barber-professional-schedules .bps-form-actions .gi-btn{
  min-width:160px;
}

.page-barber-professional-schedules .bps-filter-row{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:end;
}

.page-barber-professional-schedules .bps-filter-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px 16px;
  align-items:end;
}

.page-barber-professional-schedules .bps-filter-form .bps-form-actions{
  justify-content:flex-start;
  align-items:end;
  margin-top:0;
  padding:0;
}

.page-barber-professional-schedules .bps-filter-form .bps-form-actions .gi-btn,
.page-barber-professional-schedules .bps-filter-form .bps-form-actions a{
  min-width:150px;
}

.page-barber-professional-schedules .bps-filter-actions{
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:flex-start;
  align-self:end;
  padding-bottom:0;
}

.page-barber-professional-schedules .bps-list-card .gi-table td:last-child,
.page-barber-professional-schedules .bps-list-card .gi-table th:last-child{
  width:220px;
}

.page-barber-professional-schedules .bps-row-actions{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
}

.page-barber-professional-schedules .bps-row-actions form{
  margin:0;
}

.page-barber-professional-schedules .bps-row-actions .gi-btn,
.page-barber-professional-schedules .bps-row-actions form .gi-btn{
  min-width:104px;
  width:auto;
  justify-content:center;
}

.page-barber-professional-schedules .bps-form-card .gi-card-header + .gi-form{
  margin-top:2px;
}

.page-barber-professional-schedules input[type="time"].gi-input,
.page-barber-professional-schedules input[type="date"].gi-input,
.page-barber-professional-schedules input[type="datetime-local"].gi-input{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  box-sizing:border-box;
  padding-right:10px;
  -webkit-appearance:none;
  appearance:none;
}

@media (max-width: 767px){
  .page-barber-professional-schedules .gi-container-fluid{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .page-barber-professional-schedules .bps-form-actions .gi-btn,
  .page-barber-professional-schedules .bps-form-actions a,
  .page-barber-professional-schedules .bps-filter-actions .gi-btn,
  .page-barber-professional-schedules .bps-filter-actions a{
    width:100%;
    min-width:0;
  }

  .page-barber-professional-schedules .bps-row-actions{
    flex-wrap:wrap;
  }

  .page-barber-professional-schedules .bps-row-actions .gi-btn,
  .page-barber-professional-schedules .bps-row-actions form .gi-btn{
    min-width:0;
    width:100%;
  }
}

/* Tablet */
@media (min-width: 768px){
  .page-barber-professional-schedules .bps-weekday-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .page-barber-professional-schedules .bps-time-grid.bps-time-grid-four{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .page-barber-professional-schedules .bps-filter-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* Desktop */
@media (min-width: 1100px){
  .page-barber-professional-schedules .bps-form-card .bps-form-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .page-barber-professional-schedules .bps-time-grid.bps-time-grid-four{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .page-barber-professional-schedules .bps-weekday-grid{
    grid-template-columns:repeat(7, minmax(0,1fr));
  }

  .page-barber-professional-schedules .bps-edit-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
    align-items:end;
  }

  .page-barber-professional-schedules .bps-edit-grid .bps-edit-active{
    grid-column:3 / 4;
  }

  .page-barber-professional-schedules .bps-filter-form .bps-filter-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    align-items:end;
  }

  .page-barber-professional-schedules .bps-filter-form .bps-filter-grid{
    grid-template-columns:repeat(2, minmax(280px, 420px));
    align-items:end;
  }

  .page-barber-professional-schedules .bps-filter-actions{
    align-self:end;
    margin-bottom:0;
    white-space:nowrap;
  }
}

/* Desktop largo */
@media (min-width: 1440px){
  .page-barber-professional-schedules .bps-list-card .gi-table td:last-child,
  .page-barber-professional-schedules .bps-list-card .gi-table th:last-child{
    width:240px;
  }
}

/* =========================================================
   4. ATENDIMENTOS E AGENDAMENTOS
========================================================= */

/* ---------------------------------------------------------
   4.1 PAGE: ATENDIMENTOS
--------------------------------------------------------- */

/* =========================================================
   PAGE: ATENDIMENTOS
   Apenas overrides exclusivos desta página.
========================================================= */

/* Badge de escopo no cabeçalho */
.page-attendances .atd-scope-badge{
  flex-shrink: 0;
}

/* Bloco de filtro por cliente */
.page-attendances .atd-filter-customer{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 4px 18px 16px;
}

/* Campo de busca ocupa a largura disponível */
.page-attendances .atd-filter-customer .oh-filter-field-grow{
  flex: 1 1 200px;
  min-width: 0;
}

/* Input de pesquisa: altura e fonte confortáveis */
.page-attendances .atd-filter-customer .gi-input{
  width: 100%;
  min-height: 44px;
  font-size: 15px;
  box-sizing: border-box;
}

/* Botão Aplicar alinhado ao input */
.page-attendances .atd-filter-customer .gi-btn{
  flex-shrink: 0;
  align-self: flex-end;
  min-height: 44px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Grupo de botões de preset */
.page-attendances .atd-preset-group{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Botões de preset: tamanho mínimo tátil e altura uniforme */
.page-attendances .atd-preset-group .gi-btn{
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  white-space: nowrap;
}

/* Filtros de preset */
.page-attendances .atd-filter-presets{
  padding: 0 18px 14px;
}

/* Formulário de datas customizadas */
.page-attendances .atd-custom-form{
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

/* ── Responsivo ── */
@media (max-width: 1023px){
  .page-attendances .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }

  /* Filtro de cliente: campo + botão na mesma linha */
  .page-attendances .atd-filter-customer{
    padding-left: 14px;
    padding-right: 14px;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px;
  }

  .page-attendances .atd-filter-customer .oh-filter-field-grow{
    flex: 1 1 0;
    min-width: 0;
  }

  .page-attendances .atd-filter-customer .oh-filter-actions{
    flex-shrink: 0;
  }

  .page-attendances .atd-filter-customer .gi-btn{
    flex-shrink: 0;
    align-self: flex-end;
    min-height: 44px;
    padding: 0 16px;
    white-space: nowrap;
  }

  /* Presets: grid 2x2 — todos os botões com largura igual */
  .page-attendances .atd-filter-presets{
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 14px;
  }

  .page-attendances .atd-preset-group{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .page-attendances .atd-preset-group .gi-btn{
    min-height: 42px;
    padding: 0 8px;
    font-size: 14px;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
  }
}

@media (min-width: 1024px){
  .page-attendances .gi-container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  .page-attendances .atd-filter-customer{
    flex-wrap: nowrap;
    align-items: flex-end;
  }
}

/* ---------------------------------------------------------
   4.2 PAGE: APPOINTMENTS — calendário e painel lateral
--------------------------------------------------------- */

/* =========================================================
   PAGE: APPOINTMENTS — calendário e painel lateral
========================================================= */

/* ── Calendário de Appointments ── */
.page-appointments .appt-header-row2{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.page-appointments .appt-header-row2-label{
  font-size: 13px;
  color: var(--muted);
}

.page-appointments .appt-cal-wrap{
  padding: 16px;
}

.page-appointments .appt-cal-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.page-appointments .appt-cal-nav-title{
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  text-align: center;
}

.page-appointments .appt-cal-nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.page-appointments .appt-cal-nav-btn:hover{
  background: rgba(15,23,42,.05);
  border-color: rgba(15,23,42,.2);
}

.page-appointments .appt-cal-nav-btn svg{
  width: 16px;
  height: 16px;
}

.page-appointments .appt-cal-today-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}

.page-appointments .appt-cal-today-btn:hover{
  background: rgba(15,23,42,.05);
}

.page-appointments .appt-cal-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.page-appointments .appt-cal-dow{
  background: rgba(15,23,42,.03);
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
}

body.theme-dark .page-appointments .appt-cal-dow{
  background: rgba(255,255,255,.04);
}

.page-appointments .appt-cal-day{
  background: var(--card);
  padding: 6px;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background .14s;
  position: relative;
}

.page-appointments .appt-cal-day.is-other-month{
  background: rgba(15,23,42,.015);
}

body.theme-dark .page-appointments .appt-cal-day.is-other-month{
  background: rgba(255,255,255,.02);
}

.page-appointments .appt-cal-day.has-appts{
  cursor: pointer;
}

.page-appointments .appt-cal-day.has-appts:hover{
  background: rgba(37,99,235,.06);
}

.page-appointments .appt-cal-day.is-today .appt-cal-day-num{
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-weight: 800;
}

.page-appointments .appt-cal-day-num{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-appointments .appt-cal-day.is-other-month .appt-cal-day-num{
  color: var(--muted);
  opacity: .45;
}

.page-appointments .appt-cal-event{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  cursor: pointer;
}

.page-appointments .appt-cal-event.s-scheduled{
  background: rgba(99,102,241,.10);
  color: #4338ca;
}

.page-appointments .appt-cal-event.s-confirmed{
  background: rgba(59,130,246,.12);
  color: #1d4ed8;
}

.page-appointments .appt-cal-event.s-completed{
  background: rgba(34,197,94,.14);
  color: #15803d;
}

.page-appointments .appt-cal-event.s-cancelled{
  background: rgba(239,68,68,.10);
  color: #b91c1c;
  text-decoration: line-through;
}

.page-appointments .appt-cal-event.s-no-show{
  background: rgba(245,158,11,.12);
  color: #b45309;
}

body.theme-dark .page-appointments .appt-cal-event.s-scheduled{ color: #a5b4fc; }
body.theme-dark .page-appointments .appt-cal-event.s-confirmed{ color: #93c5fd; }
body.theme-dark .page-appointments .appt-cal-event.s-completed{ color: #4ade80; }
body.theme-dark .page-appointments .appt-cal-event.s-cancelled{ color: #f87171; }
body.theme-dark .page-appointments .appt-cal-event.s-no-show{ color: #fbbf24; }

.page-appointments .appt-cal-event-time{
  opacity: .70;
  flex-shrink: 0;
  font-weight: 500;
  font-size: 10px;
}

.page-appointments .appt-cal-more{
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  padding: 1px 5px;
  cursor: pointer;
}

.page-appointments .appt-cal-more:hover{
  color: var(--brand);
}

.page-appointments .appt-cal-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0 2px;
  font-size: 11px;
}

.page-appointments .appt-cal-legend-item{
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}

.page-appointments .appt-cal-legend-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.page-appointments .appt-cal-detail{
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(15,23,42,.12);
  z-index: 200;
  flex-direction: column;
  overflow: hidden;
}

.page-appointments .appt-cal-detail.is-open{
  display: flex;
}

.page-appointments .appt-cal-backdrop{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.32);
  z-index: 199;
}

.page-appointments .appt-cal-backdrop.is-open{
  display: block;
}

.page-appointments .appt-cal-detail-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.page-appointments .appt-cal-detail-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
}

.page-appointments .appt-cal-detail-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background .14s;
}

.page-appointments .appt-cal-detail-close:hover{
  background: rgba(15,23,42,.06);
}

.page-appointments .appt-cal-detail-close svg{
  width: 16px;
  height: 16px;
}

.page-appointments .appt-cal-detail-body{
  flex: 1;
  overflow-y:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.page-appointments .appt-cal-dc{
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:12px;
  background:rgba(15,23,42,.02);
  display:flex;
  flex-direction:column;
  gap:6px;
}

body.theme-dark .page-appointments .appt-cal-dc{
  background:rgba(255,255,255,.04);
}

.page-appointments .appt-cal-dc.s-confirmed{ border-color:rgba(59,130,246,.28); }
.page-appointments .appt-cal-dc.s-completed{ border-color:rgba(34,197,94,.28); }
.page-appointments .appt-cal-dc.s-cancelled{ border-color:rgba(239,68,68,.22); }
.page-appointments .appt-cal-dc.s-no-show{ border-color:rgba(245,158,11,.25); }

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

.page-appointments .appt-cal-dc-title{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  line-height:1.3;
}

.page-appointments .appt-cal-dc-time{
  font-size:12px;
  color:var(--muted);
  flex-shrink:0;
  white-space:nowrap;
}

.page-appointments .appt-cal-dc-meta{
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
}

.page-appointments .appt-cal-dc-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding-top:4px;
}

.page-appointments .appt-cal-dc-actions .gi-btn{
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
}

.page-appointments .appt-cal-empty{
  text-align:center;
  padding:32px 16px;
  color:var(--muted);
  font-size:13px;
}

@media (max-width: 640px){
  .page-appointments .appt-cal-day{
    min-height:58px;
    padding:4px;
  }

  .page-appointments .appt-cal-day-num{
    font-size:12px;
    width:22px;
    height:22px;
  }

  .page-appointments .appt-cal-event{
    font-size:10px;
    padding:1px 4px;
  }

  .page-appointments .appt-cal-event-time{
    display:none;
  }

  .page-appointments .appt-cal-dow{
    font-size:10px;
    padding:6px 2px;
  }

  .page-appointments .appt-cal-nav-title{
    font-size:14px;
  }

  .page-appointments .appt-cal-detail{
    width:100vw;
  }

  .page-appointments .appt-cal-legend{
    gap:8px;
    font-size:10px;
  }
}

@media (max-width: 380px){
  .page-appointments .appt-cal-event-label{
    display:none;
  }

  .page-appointments .appt-cal-event::before{
    content:'●';
    font-size:9px;
  }
}

/* ---------------------------------------------------------
   4.3 PAGE: APPOINTMENTS FORM
--------------------------------------------------------- */

/* =========================================================
   PAGE: APPOINTMENTS FORM
   Layout: espelha o padrão do molde (occupational_health_company_form)
   — coluna esquerda maior com dados principais
   — coluna direita com cards menores empilhados (data + notificações)
   — faixas completas: item agendável (condicional), origem, rodapé
   O padrão de cada card (oh-section-card, oh-field, oh-fields-grid-*,
   oh-form-footer, oh-notes-textarea, oh-date-input, gi-checkline etc.)
   está em components.css.
========================================================= */

/* ── Grid raiz: mobile = coluna única ── */
.page-appointments-form .oh-form-page{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

/* Wrapper da coluna direita: empilha seus cards internamente */
.page-appointments-form .appt-col-right{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Campos readonly de preview do item herdado */
.page-appointments-form .appt-readonly-field{
  background: rgba(15,23,42,0.03);
  color: var(--muted);
  cursor: default;
}
body.theme-dark .page-appointments-form .appt-readonly-field{
  background: rgba(255,255,255,0.05);
}

/* ── Desktop: 2 colunas, coluna esquerda mais larga ── */
@media (min-width: 1024px){
  .page-appointments-form .oh-form-page{
    grid-template-columns: 3fr 2fr;
    gap: 20px;
  }

  /* Faixas completas ocupam as 2 colunas */
  .page-appointments-form .appt-col-full{
    grid-column: 1 / -1;
  }

  /* Coluna esquerda: cresce para preencher a altura da direita */
  .page-appointments-form .appt-col-left{
    align-self: stretch;
  }

  /* Coluna direita: estica para ocupar toda a altura disponível */
  .page-appointments-form .appt-col-right{
    align-self: stretch;
  }

  /* oh-form-footer: botões lado a lado */
  .page-appointments-form .oh-form-footer{
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}

/* ── Desktop largo: proporções um pouco mais equilibradas ── */
@media (min-width: 1440px){
  .page-appointments-form .oh-form-page{
    grid-template-columns: 5fr 3fr;
  }
}

/* PAGE: APPOINTMENTS FORM — disponibilidade de profissionais */
.page-appointments-form .appt-availability-box{
  border: 1px dashed rgba(148,163,184,.45);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(15,23,42,.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.theme-dark .page-appointments-form .appt-availability-box{
  background: rgba(255,255,255,.03);
}

.page-appointments-form .appt-availability-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.page-appointments-form .appt-availability-badge{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(59,130,246,.12);
  color: var(--text);
}

.page-appointments-form .appt-availability-note{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

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

.page-appointments-form .appt-slot-btn{
  border: 1px solid rgba(148,163,184,.4);
  background: var(--card, #fff);
  border-radius: 12px;
  padding: 10px 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.page-appointments-form .appt-slot-btn:hover{
  transform: translateY(-1px);
}

.page-appointments-form .appt-slot-btn.is-selected{
  border-color: rgba(59,130,246,.85);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

.page-appointments-form .appt-slot-empty{
  grid-column: 1 / -1;
  padding: 12px;
  border-radius: 12px;
  background: rgba(148,163,184,.08);
  color: var(--muted);
  font-size: 13px;
}

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

/* ---------------------------------------------------------
   4.4 PAGE: APPOINTMENTS FORM — disponibilidade por profissional
--------------------------------------------------------- */

/* =========================================================
   PAGE: APPOINTMENTS FORM — disponibilidade por profissional
========================================================= */
.page-appointments-form .appt-availability-box{
  border: 1px dashed rgba(148,163,184,.45);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(15,23,42,.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.theme-dark .page-appointments-form .appt-availability-box{
  background: rgba(255,255,255,.03);
}
.page-appointments-form .appt-availability-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.page-appointments-form .appt-availability-badge{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(59,130,246,.12);
  color: var(--text);
}
.page-appointments-form .appt-availability-note{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.page-appointments-form .appt-slot-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.page-appointments-form .appt-slot-btn{
  border: 1px solid rgba(148,163,184,.4);
  background: var(--card, #fff);
  border-radius: 12px;
  padding: 10px 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-appointments-form .appt-slot-btn:hover{
  transform: translateY(-1px);
}
.page-appointments-form .appt-slot-btn.is-selected{
  border-color: rgba(59,130,246,.85);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}
.page-appointments-form .appt-slot-empty{
  grid-column: 1 / -1;
  padding: 12px;
  border-radius: 12px;
  background: rgba(148,163,184,.08);
  color: var(--muted);
  font-size: 13px;
}
@media (max-width: 640px){
  .page-appointments-form .appt-slot-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------
   4.5 PAGE: APPOINTMENTS SETTINGS
--------------------------------------------------------- */

/* =========================================================
   PAGE: APPOINTMENTS SETTINGS
   Configurações gerais + jornadas por unidade com fallback do tenant.
========================================================= */

.page-appointments-settings .aps-page-grid{
  display:grid;
  gap:16px;
}

.page-appointments-settings .aps-form-grid,
.page-appointments-settings .aps-time-grid,
.page-appointments-settings .aps-filter-row,
.page-appointments-settings .aps-filter-grid{
  min-width:0;
}

.page-appointments-settings .aps-form-grid > div,
.page-appointments-settings .aps-time-grid > div,
.page-appointments-settings .aps-filter-grid > div{
  min-width:0;
}

.page-appointments-settings .aps-form-grid .gi-input,
.page-appointments-settings .aps-form-grid select,
.page-appointments-settings .aps-form-grid input,
.page-appointments-settings .aps-time-grid .gi-input,
.page-appointments-settings .aps-time-grid select,
.page-appointments-settings .aps-time-grid input,
.page-appointments-settings .aps-filter-grid .gi-input,
.page-appointments-settings .aps-filter-grid select,
.page-appointments-settings .aps-filter-grid input{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.page-appointments-settings .aps-form-card,
.page-appointments-settings .aps-list-card{
  overflow:hidden;
}

.page-appointments-settings .aps-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px 16px;
  align-items:end;
}

.page-appointments-settings .aps-time-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px 16px;
}

.page-appointments-settings .aps-status-field{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-self:stretch;
}

.page-appointments-settings .aps-status-field .gi-label{
  margin-bottom:8px;
}

.page-appointments-settings .aps-status-toggle{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--input-border);
  border-radius:var(--r-md);
  background:var(--input-bg);
  box-sizing:border-box;
}

.page-appointments-settings .aps-checkline-alone{
  width:100%;
  min-height:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0;
  padding:0;
}

.page-appointments-settings .aps-checkline-alone input[type="checkbox"]{
  flex:0 0 auto;
  margin:0;
  width:18px;
  height:18px;
}

.page-appointments-settings .aps-checkline-alone span{
  flex:1 1 auto;
  min-width:0;
  display:block;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
}

.page-appointments-settings .aps-day-box{
  display:grid;
  gap:10px;
}

.page-appointments-settings .aps-weekday-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.page-appointments-settings .aps-weekday-item{
  min-height:46px;
  justify-content:center;
  border:1px solid var(--line, #d9dee7);
  border-radius:14px;
  padding:0 12px;
}

.page-appointments-settings .aps-public-options-box{
  gap: 12px;
}

.page-appointments-settings .aps-public-options-grid{
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-appointments-settings .aps-public-option-item{
  min-height: auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 14px;
  text-align: left;
}

.page-appointments-settings .aps-public-option-item input[type="checkbox"]{
  flex: 0 0 auto;
  margin-top: 2px;
}

.page-appointments-settings .aps-public-option-item span{
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-appointments-settings .aps-public-options-box + .gi-panel-field-full{
  min-width: 0;
}

.page-appointments-settings .gi-kv{
  min-width: 0;
}

.page-appointments-settings .gi-kv .gi-v,
.page-appointments-settings .gi-kv .gi-v a{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 768px){
  .page-appointments-settings .aps-public-options-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (min-width: 1100px){
  .page-appointments-settings .aps-public-options-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

.page-appointments-settings .aps-form-note{
  margin-top:8px;
}

.page-appointments-settings .aps-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:16px;
}

.page-appointments-settings .aps-form-actions .gi-btn{
  min-width:180px;
}

.page-appointments-settings .aps-filter-row{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:end;
}

.page-appointments-settings .aps-filter-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px 16px;
  align-items:end;
}

.page-appointments-settings .aps-filter-form .aps-form-actions{
  justify-content:flex-start;
  align-items:end;
  margin-top:0;
  padding:0;
}

.page-appointments-settings .aps-filter-form .aps-form-actions .gi-btn,
.page-appointments-settings .aps-filter-form .aps-form-actions a{
  min-width:150px;
}

.page-appointments-settings .aps-filter-actions{
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:flex-start;
  align-self:end;
  padding-bottom:0;
}

.page-appointments-settings .aps-list-card .gi-table{
  width:100%;
  table-layout:fixed;
}

.page-appointments-settings .aps-list-card .gi-table th,
.page-appointments-settings .aps-list-card .gi-table td{
  text-align:center;
  vertical-align:middle;
}

.page-appointments-settings .aps-list-card .gi-table td{
  padding-top:18px;
  padding-bottom:18px;
}

.page-appointments-settings .aps-list-card .gi-table td:last-child,
.page-appointments-settings .aps-list-card .gi-table th:last-child{
  width:260px;
}

.page-appointments-settings .aps-row-actions{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  width:100%;
}

.page-appointments-settings .aps-row-actions form{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-appointments-settings .aps-row-actions .gi-btn,
.page-appointments-settings .aps-row-actions form .gi-btn{
  min-width:104px;
  width:104px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}

.page-appointments-settings input[type="time"].gi-input,
.page-appointments-settings input[type="date"].gi-input,
.page-appointments-settings input[type="datetime-local"].gi-input{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  box-sizing:border-box;
  padding-right:10px;
  -webkit-appearance:none;
  appearance:none;
}

@media (max-width: 767px){
  .page-appointments-settings .gi-container-fluid{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .page-appointments-settings .aps-form-actions .gi-btn,
  .page-appointments-settings .aps-form-actions a,
  .page-appointments-settings .aps-filter-actions .gi-btn,
  .page-appointments-settings .aps-filter-actions a{
    width:100%;
    min-width:0;
  }

  .page-appointments-settings .aps-list-card .gi-table th,
  .page-appointments-settings .aps-list-card .gi-table td{
    text-align:center;
    vertical-align:middle;
  }

  .page-appointments-settings .aps-row-actions{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    gap:10px;
  }

  .page-appointments-settings .aps-row-actions form{
    width:100%;
    display:flex;
    justify-content:center;
  }

  .page-appointments-settings .aps-row-actions .gi-btn,
  .page-appointments-settings .aps-row-actions form .gi-btn{
    min-width:0;
    width:min(180px, 100%);
  }
}

@media (min-width: 768px){
  .page-appointments-settings .aps-weekday-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .page-appointments-settings .aps-time-grid.aps-time-grid-two{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .page-appointments-settings .aps-time-grid.aps-time-grid-four,
  .page-appointments-settings .aps-filter-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (min-width: 1100px){
  .page-appointments-settings .aps-form-card .aps-form-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .page-appointments-settings .aps-time-grid.aps-time-grid-four{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .page-appointments-settings .aps-weekday-grid{
    grid-template-columns:repeat(7, minmax(0,1fr));
  }

  .page-appointments-settings .aps-filter-form .aps-filter-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    align-items:end;
  }

  .page-appointments-settings .aps-filter-form .aps-filter-grid{
    grid-template-columns:repeat(2, minmax(280px, 420px));
    align-items:end;
  }

  .page-appointments-settings .aps-filter-actions{
    align-self:end;
    margin-bottom:0;
    white-space:nowrap;
  }
}

@media (min-width: 1440px){
  .page-appointments-settings .aps-list-card .gi-table td:last-child,
  .page-appointments-settings .aps-list-card .gi-table th:last-child{
    width:280px;
  }
}

/* ---------------------------------------------------------
   4.6 PAGE: PUBLIC BOOKING
--------------------------------------------------------- */

/* =========================================================
   PAGE: PUBLIC BOOKING
   Ajuste do desktop mantendo o mobile otimizado
   No pages.css: SUBSTITUIR todo o bloco existente de
   .page-public-booking até o fim do último @media dessa página.
========================================================= */

.page-public-booking{
  background:
    radial-gradient(circle at top, rgba(22,163,74,0.08), transparent 32%),
    var(--bg);
}

/* Desktop amplo sem alterar a lógica visual já aprovada */
@media (min-width: 1100px){
  .page-public-booking .gi-container.gi-container-fluid{
    width: min(1880px, calc(100% - 40px)) !important;
    max-width: 1880px !important;
    padding: 24px 20px 40px !important;
  }
}

.page-public-booking .gi-card + .gi-card,
.page-public-booking .gi-card + .gi-alert,
.page-public-booking .gi-alert + .gi-card{
  margin-top: 12px;
}

.page-public-booking .gi-filter-header{
  align-items: flex-start;
}

.page-public-booking .gi-filter-header-text{
  width: 100%;
}

.page-public-booking .public-booking-logo{
  display: block;
  max-height: 64px;
  width: auto;
  max-width: min(220px, 100%);
  object-fit: contain;
}

.page-public-booking .gi-card{
  overflow: visible;
}

.page-public-booking .gi-panel{
  background: rgba(15,23,42,0.025);
}

body.theme-dark .page-public-booking .gi-panel{
  background: rgba(255,255,255,0.05);
}

.page-public-booking .gi-panel-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 16px;
  padding: 12px;
}

.page-public-booking .gi-panel-form > .gi-panel{
  margin: 0;
  padding: 8px;
}

.page-public-booking .gi-panel-field{
  min-width: 0;
}

.page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field{
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

.page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field .gi-label{
  margin-bottom: 4px;
}

.page-public-booking #pbSlotsMessage{
  min-height: 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.page-public-booking .gi-actions{
  margin: 0;
  padding: 0;
}

.page-public-booking .public-booking-actions,
.page-public-booking .gi-actions .gi-btn{
  width: 100%;
}

.page-public-booking .pb-availability-box{
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  background: rgba(15,23,42,0.03);
}

.page-public-booking .appt-availability-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.page-public-booking .appt-availability-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(22,163,74,0.10);
  border: 1px solid rgba(22,163,74,0.18);
  color: var(--brand-700);
}

.page-public-booking .appt-availability-note{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.page-public-booking .appt-slot-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.page-public-booking .appt-slot-btn{
  appearance: none;
  border: 1px solid rgba(15,23,42,0.12);
  background: #fff;
  color: var(--text);
  border-radius: 12px;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}

.page-public-booking .appt-slot-btn:hover{
  border-color: rgba(22,163,74,0.34);
  background: rgba(22,163,74,0.05);
}

.page-public-booking .appt-slot-btn.is-selected{
  border-color: rgba(22,163,74,0.60);
  background: rgba(22,163,74,0.12);
  color: var(--brand-700);
}

.page-public-booking .appt-slot-empty{
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15,23,42,0.04);
  color: var(--muted);
  font-size: 13px;
}

/* ---------------------------------------------------------
   4.7 MOBILE / TABLET
--------------------------------------------------------- */

/* =========================================================
   MOBILE / TABLET
   Melhor aproveitamento lateral sem mexer no desktop
========================================================= */
@media (max-width: 899px){
  .page-public-booking .gi-container.gi-container-fluid{
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 10px 24px !important;
  }

  .page-public-booking .gi-card{
    border-radius: 18px;
  }

  .page-public-booking .gi-card-header{
    padding: 18px 14px 12px;
  }

  .page-public-booking .gi-card-header h1,
  .page-public-booking .gi-card-header h2{
    margin-bottom: 6px;
  }

  .page-public-booking .gi-panel{
    margin-left: 0;
    margin-right: 0;
    padding: 10px;
    border-radius: 14px;
  }

  .page-public-booking .gi-panel-form{
    padding: 10px;
    gap: 12px;
  }

  .page-public-booking .gi-panel-form > .gi-panel{
    padding: 0;
    background: transparent;
    border: 0;
  }

  .page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field{
    padding: 10px;
    border-radius: 14px;
  }

  .page-public-booking .gi-input,
  .page-public-booking select.gi-input,
  .page-public-booking input.gi-input{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .page-public-booking .public-booking-field-slot{
    padding-bottom: 12px;
  }

  .page-public-booking .pb-availability-box{
    padding: 10px;
    border-radius: 14px;
  }

  .page-public-booking .appt-slot-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .page-public-booking .appt-slot-btn{
    min-height: 42px;
    padding: 9px 8px;
    font-size: 13px;
    border-radius: 10px;
  }

  .page-public-booking .public-booking-actions{
    margin-top: 4px;
  }

  .page-public-booking .gi-actions .gi-btn,
  .page-public-booking .public-booking-actions .gi-btn{
    min-height: 46px;
  }
}

/* ---------------------------------------------------------
   4.8 DESKTOP
--------------------------------------------------------- */

/* =========================================================
   DESKTOP
========================================================= */
@media (min-width: 900px){
  .page-public-booking .gi-panel-form{
    display: block;
    padding: 18px;
  }

  .page-public-booking .gi-panel-form > .gi-panel{
    width: 100%;
    margin: 0;
    padding: 18px;
    border-radius: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 18px;
    align-items: start;
    grid-auto-flow: row dense;
  }

  .page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field,
  .page-public-booking .gi-panel-form > .gi-panel > .gi-actions{
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field{
    padding: 14px;
    border-radius: 16px;
  }

  .page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field:nth-of-type(1){
    grid-column: span 2;
  }

  .page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field:nth-of-type(5),
  .page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field.gi-panel-field-full,
  .page-public-booking .gi-panel-form > .gi-panel > .gi-actions,
  .page-public-booking .gi-panel-form > .gi-panel > .public-booking-actions{
    grid-column: 1 / -1;
  }

  .page-public-booking .pb-availability-box{
    width: 100%;
    margin-top: 10px;
    padding: 14px;
    border-radius: 16px;
  }

  .page-public-booking .appt-slot-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .page-public-booking .gi-actions{
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .page-public-booking .gi-actions .gi-btn{
    width: 100%;
    min-height: 48px;
  }
}

@media (min-width: 1280px){
  .page-public-booking .gi-panel-form > .gi-panel{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field:nth-of-type(1){
    grid-column: span 2;
  }

  .page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field:nth-of-type(5){
    grid-column: span 2;
  }

  .page-public-booking .gi-panel-form > .gi-panel > .gi-panel-field.gi-panel-field-full,
  .page-public-booking .gi-panel-form > .gi-panel > .gi-actions,
  .page-public-booking .gi-panel-form > .gi-panel > .public-booking-actions{
    grid-column: 1 / -1;
  }

  .page-public-booking .appt-slot-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1600px){
  .page-public-booking .gi-panel-form > .gi-panel{
    padding: 20px;
    gap: 18px 20px;
  }

  .page-public-booking .appt-slot-grid{
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* =========================================================
   5. ADMINISTRAÇÃO / DEV / DASHBOARD
========================================================= */

/* ---------------------------------------------------------
   5.1 PAGE: ADMIN USERS
--------------------------------------------------------- */

/* =========================================================
   PAGE: ADMIN USERS
   Apenas overrides exclusivos desta página.
   O padrão estrutural (gi-filter-header, gi-panel-form,
   oh-filter-card, oh-data-table, oh-mobile-list, gi-perm-grid
   etc.) está em components.css.
========================================================= */

/* Corpo interno de cada item de permissão (overrides DEV) */
.page-admin-users .au-perm-body{
  display: grid;
  gap: 8px;
}

/* Lista de usuários: texto quebrável (mesmo padrão das outras páginas barber) */
.page-admin-users .oh-mobile-card{
  flex-wrap: wrap;
  align-items: flex-start;
}

.page-admin-users .oh-mobile-card-main{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------------
   5.2 PAGES: DEV — Área de desenvolvedor (sidebar + layout)
--------------------------------------------------------- */

/* =========================================================
   PAGES: DEV — Área de desenvolvedor (sidebar + layout)
   Estilos que eram inline em tenants.php, mais regras
   compartilhadas entre as 5 páginas DEV.
========================================================= */

/* ── Filtros de tenants (dev/tenants.php) ── */
.page-dev-tenants .dev-filters{
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  margin-top: 12px;
  min-height: 220px;
}

.page-dev-tenants .dev-filters .gi-picker{
  position: relative;
}

.page-dev-tenants .dev-filters .gi-picker-list{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  max-height: 260px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.10);
}

@media (max-height: 720px){
  .page-dev-tenants .dev-filters .gi-picker-list{ max-height: 200px; }
  .page-dev-tenants .dev-filters{ min-height: 200px; }
}

/* ── Layout: gi-container dentro do gi-content-shell ── */
/* As páginas DEV usam gi-content-shell + gi-container juntos.
   O gi-content-shell já é flex:1, então o container apenas
   precisa não ter min-height 100vh (que causaria overflow). */
.page-dev-tenants .gi-content-shell.gi-container,
.page-dev-modules .gi-content-shell.gi-container,
.page-dev-mod-perms .gi-content-shell.gi-container,
.page-dev-tenant-modules .gi-content-shell.gi-container,
.page-dev-users .gi-content-shell.gi-container{
  min-height: 0;
  padding-top: 20px;
  padding-bottom: 40px;
}

/* ── Botão "ghost" (usado em modules.php) ── */
.gi-btn-ghost{
  background: transparent;
  border-color: rgba(15,23,42,0.14);
  color: var(--muted);
}

.gi-btn-ghost:hover{
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.20);
}

body.theme-dark .gi-btn-ghost{
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.60);
}

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

/* ---------------------------------------------------------
   5.3 PAGE: DEV — TENANT × MÓDULOS (tenant_modules.php) — PARTE 1
--------------------------------------------------------- */

/* =========================================================
   PAGE: DEV — TENANT × MÓDULOS (tenant_modules.php)
========================================================= */

.page-dev-tenant-modules .dev-filters{
  min-height: 170px;
}

.page-dev-tenant-modules .tm-actions .gi-btn,
.page-dev-tenant-modules .tm-actions form{
  width: 100%;
}

.page-dev-tenant-modules .tm-actions form > .gi-btn{
  width: 100%;
  display: block;
}

.page-dev-tenant-modules .tm-module-fields{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}

.page-dev-tenant-modules .tm-module-fields .gi-grid-2{
  align-items: start;
}

.page-dev-tenant-modules .tm-module-fields .gi-grid-2 > div{
  min-width: 0;
}

.page-dev-tenant-modules input[type="datetime-local"].gi-input,
.page-dev-tenant-modules input[type="number"].gi-input,
.page-dev-tenant-modules select.gi-input,
.page-dev-tenant-modules input[type="text"].gi-input{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.page-dev-tenant-modules input[type="datetime-local"].gi-input{
  appearance: none;
  -webkit-appearance: none;
  min-height: 48px;
  padding: 12px 14px;
  text-align: left;
}

.page-dev-tenant-modules .tm-checkline{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.page-dev-tenant-modules .tm-checkline input[type="checkbox"]{
  flex: 0 0 auto;
}

.page-dev-tenant-modules .tm-module-stack{
  display: grid;
  gap: 14px;
}

.page-dev-tenant-modules .tm-module-card .gi-card-body{
  padding: 18px;
}

.page-dev-tenant-modules .tm-module-card .gi-row{
  gap: 12px;
  align-items: flex-start;
}

.page-dev-tenant-modules .tm-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.page-dev-tenant-modules .tm-tenant-selected .gi-card-body{
  padding: 18px;
}

.page-dev-tenant-modules .tm-tenant-selected .gi-row{
  gap: 12px;
  align-items: flex-start;
}

@media (max-width: 640px){
  .page-dev-tenant-modules input[type="datetime-local"].gi-input{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---------------------------------------------------------
   5.4 PAGE: DEV — USUÁRIOS (users.php)
--------------------------------------------------------- */

/* =========================================================
   PAGE: DEV — USUÁRIOS (users.php)
========================================================= */

.page-dev-users .dev-filters{
  min-height: 170px;
}

.page-dev-users .gi-actions .gi-dev-tenant-toggle{
  width: 100%;
  display: block;
}

.page-dev-users .gi-actions form.gi-dev-tenant-toggle-form{
  width: 100%;
}

.page-dev-users .gi-actions form.gi-dev-tenant-toggle-form > button{
  width: 100%;
  display: block;
}

.page-dev-users .gi-tenant-status-form{
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.page-dev-users .gi-tenant-status-form .gi-tenant-status-field{
  flex: 1 1 220px;
  min-width: 220px;
}

.page-dev-users .gi-tenant-status-form .gi-tenant-status-actions{
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  gap: 10px;
}

.page-dev-users .gi-tenant-status-form .gi-tenant-status-actions .gi-btn{
  width: 100%;
}

@media (min-width: 680px){
  .page-dev-users .gi-tenant-status-form .gi-tenant-status-actions{
    width: auto;
  }

  .page-dev-users .gi-tenant-status-form .gi-tenant-status-actions .gi-btn{
    width: auto;
  }
}

/* ---------------------------------------------------------
   5.5 PAGE: DEV — MODULES (modules.php)
--------------------------------------------------------- */

/* =========================================================
   PAGE: DEV — MODULES (modules.php)
   Padrão barber_customers: container-fluid, tabela desktop,
   cards mobile, painel colapsável.
========================================================= */

.page-dev-modules .gi-container-fluid{
  max-width: 100% !important;
  width: 100%;
  padding: 20px 24px 40px !important;
  box-sizing: border-box;
}

.page-dev-modules .mod-form-panel{
  margin-top: 0;
}

/* Painel form: 2 colunas no desktop, descrição ocupa linha inteira */
@media (min-width: 1024px){
  .page-dev-modules .gi-panel-form{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px){
  .page-dev-modules .gi-panel-form{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tabela desktop */
@media (min-width: 992px){
  .page-dev-modules .oh-mobile-list{ display: none; }
}

@media (max-width: 991px){
  .page-dev-modules .oh-desktop-table{ display: none; }
  .page-dev-modules .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }
}

/* ---------------------------------------------------------
   5.6 PAGE: DEV — TENANT × MÓDULOS (tenant_modules.php) — PARTE 2
--------------------------------------------------------- */

/* =========================================================
   PAGE: DEV — TENANT × MÓDULOS (tenant_modules.php)
   Padrão barber_customers: container-fluid, tabela desktop,
   cards mobile.
========================================================= */

.page-dev-tenant-modules .gi-container-fluid{
  max-width: 100% !important;
  width: 100%;
  padding: 20px 24px 40px !important;
  box-sizing: border-box;
}

/* Input compacto dentro da tabela */
.gi-input-sm{
  padding: 8px 10px;
  font-size: 14px;
  border-radius: var(--r-sm);
  min-width: 0;
  width: 100%;
}

.page-dev-tenant-modules .tm-form-actions{
  padding: 14px 18px 18px;
}

/* Tabela desktop */
@media (min-width: 992px){
  .page-dev-tenant-modules .oh-mobile-list{ display: none; }

  .page-dev-tenant-modules .oh-data-table select.gi-input-sm,
  .page-dev-tenant-modules .oh-data-table input.gi-input-sm{
    min-width: 110px;
  }
}

@media (max-width: 991px){
  .page-dev-tenant-modules .oh-desktop-table{ display: none; }
  .page-dev-tenant-modules .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }

  .page-dev-tenant-modules .tm-form-actions{
    padding: 14px;
  }
}

/* ---------------------------------------------------------
   5.7 PAGE: DEV — USUÁRIOS (users.php) — layout de botões
--------------------------------------------------------- */

/* =========================================================
   PAGE: DEV — USUÁRIOS (users.php) — layout de botões
========================================================= */

/* Container geral das ações do topo */
.page-dev-users .dev-users-top-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px 18px;
}

/* Grade de ações rápidas: 2 colunas no mobile, 4 no desktop */
.page-dev-users .dev-users-quick-actions{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.page-dev-users .dev-users-quick-actions .gi-btn,
.page-dev-users .dev-users-quick-actions form,
.page-dev-users .dev-users-quick-actions form .gi-btn{
  width: 100%;
}

@media (min-width: 680px){
  .page-dev-users .dev-users-quick-actions{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Botões inferiores (salvar permissões + limpar usuário) */
.page-dev-users .dev-users-bottom-actions{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px 18px 18px;
}

.page-dev-users .dev-users-bottom-actions .gi-btn{
  width: 100%;
  justify-content: center;
}

@media (max-width: 640px){
  .page-dev-users .dev-users-bottom-actions{
    grid-template-columns: 1fr;
  }

  .page-dev-users .dev-users-quick-actions{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Fix: picker dropdown não deve ser cortado pelo overflow:hidden do gi-card ── */
.page-dev-tenant-modules .tm-filter-card{
  overflow: visible;
}

.page-dev-tenant-modules .tm-filter-card .gi-picker-list{
  z-index: 60;
}

/* ---------------------------------------------------------
   5.8 PAGE: DEV — USERS — revisão de layout (v2)
--------------------------------------------------------- */

/* =========================================================
   PAGE: DEV — USERS — revisão de layout (v2)
   - gi-btn-danger-soft: vermelho suave
   - dev-users-top-actions: status form + toggle
   - dev-users-filter-row: filtro + toggle no desktop
   - padding interno nas seções (espaçamento lateral)
   - dev-users-bottom-actions: grid 2 col
========================================================= */

/* Botão vermelho suave (Desativar tenant) */
.gi-btn-danger-soft{
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.30);
  color: #b91c1c;
}

.gi-btn-danger-soft:hover{
  background: rgba(239,68,68,0.16);
  border-color: rgba(239,68,68,0.42);
  color: #991b1b;
}

body.theme-dark .gi-btn-danger-soft{
  background: rgba(239,68,68,0.14);
  border-color: rgba(239,68,68,0.28);
  color: #fca5a5;
}

/* ── Padding lateral nas seções do card (users.php) ── */
.page-dev-users .gi-card-header,
.page-dev-users .dev-users-top-actions,
.page-dev-users .dev-users-filter-row,
.page-dev-users .dev-users-area,
.page-dev-users .dev-filters{
  padding-left: 18px;
  padding-right: 18px;
}

.page-dev-users .gi-card-header{
  padding-top: 18px;
  padding-bottom: 12px;
}

.page-dev-users .dev-users-top-actions{
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Garante que o gi-tenant-status-form ocupa toda a largura */
.page-dev-users .gi-tenant-status-form{
  width: 100%;
}

/* Formulário Desativar/Ativar — largura total no mobile */
.page-dev-users .gi-dev-tenant-toggle-form{
  width: 100%;
}

.page-dev-users .gi-dev-tenant-toggle-form .gi-btn{
  width: 100%;
}

/* ── Filtro de usuário ── */
.page-dev-users .dev-users-filter-row{
  padding-top: 14px;
  padding-bottom: 14px;
}

.page-dev-users .dev-users-filter-field{
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Picker: overflow visible para dropdown não ser cortado */
.page-dev-users .dev-users-picker-wrap{
  position: relative;
  overflow: visible;
}

/* ── Área de conteúdo de usuários ── */
.page-dev-users .dev-users-area{
  padding-top: 14px;
  padding-bottom: 18px;
}

/* ── Botões inferiores ── */
.page-dev-users .dev-users-bottom-actions{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px 18px 18px;
}

.page-dev-users .dev-users-bottom-actions .gi-btn{
  width: 100%;
  justify-content: center;
}

/* ── Padding lateral nas seções do card (tenants.php) ── */
.page-dev-tenants .gi-card-header,
.page-dev-tenants .dev-filters,
.page-dev-tenants .gi-table-wrap{
  padding-left: 18px;
  padding-right: 18px;
}

/* ── Padding lateral nas seções dos outros cards DEV ── */
.page-dev-modules .gi-card-header,
.page-dev-mod-perms .gi-card-header,
.page-dev-tenant-modules .gi-card-header{
  padding-left: 18px;
  padding-right: 18px;
}

/* ── Desktop (>=900px) ── */
@media (min-width: 900px){
  /* Status form: campos em linha */
  .page-dev-users .dev-users-top-actions{
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
  }

  .page-dev-users .gi-tenant-status-form{
    flex: 1 1 auto;
  }

  /* No desktop o toggle no topo some — aparece só na filter-row */
  .page-dev-users .dev-users-top-actions .gi-dev-tenant-toggle-form{
    display: none;
  }

  /* Filtro de usuário: campo + botão toggle lado a lado */
  .page-dev-users .dev-users-filter-row{
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .page-dev-users .dev-users-filter-field{
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Botão toggle visível ao lado do campo no desktop —
     margin-top empurra para alinhar com o input (label ~18px + gap ~4px) */
  .page-dev-users .dev-users-filter-toggle{
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    margin-top: 15px;
  }

  .page-dev-users .dev-users-filter-toggle .gi-dev-tenant-toggle-form{
    width: auto;
  }

  .page-dev-users .dev-users-filter-toggle .gi-btn{
    white-space: nowrap;
    width: auto;
    height: 48px;
  }
}

/* ── Mobile (<900px): toggle no filtro fica oculto, já existe no topo ── */
@media (max-width: 899px){
  .page-dev-users .dev-users-filter-toggle{
    display: none;
  }
}

@media (max-width: 640px){
  .page-dev-users .dev-users-bottom-actions{
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   5.9 PAGE: DASHBOARD — Seletor de modalidade DEV
--------------------------------------------------------- */

/* =========================================================
   PAGE: DASHBOARD — Seletor de modalidade DEV
   Ocupa apenas .gi-content-shell (sem topbar/sidebar).
   Usa os tokens do sistema (--bg, --card, --text, --border…).
========================================================= */
 
/* Preenche exatamente o espaço do gi-content-shell */
.page-dashboard .dev-selector{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 72px); /* desconta a topbar */
  padding: 40px 24px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
 
/* Grade de pontos sutil sobre --bg */
.page-dashboard .dev-selector-grid-bg{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  opacity: 0.6;
}
 
/* Cabeçalho */
.page-dashboard .dev-selector-header{
  text-align: center;
  margin-bottom: 48px;
  position: relative;
  z-index: 1;
}
 
/* Badge "Modo desenvolvedor" */
.page-dashboard .dev-selector-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(22,163,74,0.12);
  border: 1px solid rgba(22,163,74,0.30);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
 
.page-dashboard .dev-selector-badge-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  animation: dev-badge-pulse 2s ease-in-out infinite;
}
 
@keyframes dev-badge-pulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.4; transform: scale(0.7); }
}
 
/* Título */
.page-dashboard .dev-selector-title{
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
 
.page-dashboard .dev-selector-title span{
  color: var(--brand);
}
 
/* Subtítulo */
.page-dashboard .dev-selector-subtitle{
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}
 
/* Grid de módulos */
.page-dashboard .dev-modules-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 190px));
  gap: 16px;
  justify-content: center;
  position: relative;
  z-index: 1;
  max-width: 860px;
  width: 100%;
}
 
/* Card-botão de cada módulo */
.page-dashboard .dev-module-btn{
  appearance: none;
  aspect-ratio: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  padding: 24px 16px;
  box-shadow: var(--shadow);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.22s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  font-family: inherit;
}
 
/* Brilho interno no hover via pseudo-elemento */
.page-dashboard .dev-module-btn::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
 
.page-dashboard .dev-module-btn:hover{
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(2,6,23,0.14);
}
 
.page-dashboard .dev-module-btn:hover::before{
  opacity: 1;
}
 
.page-dashboard .dev-module-btn:active{
  transform: translateY(-2px) scale(0.99);
}
 
/* ── Módulo: Barbearia ── */
.page-dashboard .dev-module-btn[data-module="barber"]{
  --dev-accent: #f59e0b;
  --dev-accent-rgb: 245, 158, 11;
}
 
.page-dashboard .dev-module-btn[data-module="barber"]::before{
  background: radial-gradient(circle at 50% 0%, rgba(245,158,11,0.12) 0%, transparent 70%);
}
 
.page-dashboard .dev-module-btn[data-module="barber"]:hover{
  border-color: rgba(245,158,11,0.40);
}
 
/* ── Módulo: Saúde Ocupacional ── */
.page-dashboard .dev-module-btn[data-module="occupational_health"]{
  --dev-accent: #0891b2;
  --dev-accent-rgb: 8, 145, 178;
}
 
.page-dashboard .dev-module-btn[data-module="occupational_health"]::before{
  background: radial-gradient(circle at 50% 0%, rgba(8,145,178,0.12) 0%, transparent 70%);
}
 
.page-dashboard .dev-module-btn[data-module="occupational_health"]:hover{
  border-color: rgba(8,145,178,0.40);
}
 
/* Ícone: caixa com borda colorida usando border do sistema */
.page-dashboard .dev-module-icon{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
 
.page-dashboard .dev-module-btn:hover .dev-module-icon{
  transform: scale(1.1);
  border-color: rgba(var(--dev-accent-rgb, 22 163 74), 0.45);
}
 
.page-dashboard .dev-module-icon svg{
  width: 28px;
  height: 28px;
  display: block;
}
 
/* Nome do módulo */
.page-dashboard .dev-module-name{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
 
/* Chave técnica do módulo */
.page-dashboard .dev-module-key{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dev-accent, var(--brand));
  opacity: 0.75;
}
 
/* Rodapé do seletor */
.page-dashboard .dev-selector-footer{
  margin-top: 40px;
  font-size: 12px;
  color: var(--muted);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.6;
}
 
.page-dashboard .dev-selector-footer::before,
.page-dashboard .dev-selector-footer::after{
  content: '';
  display: block;
  height: 1px;
  width: 40px;
  background: var(--border);
}
 
/* ── Responsividade ── */
@media (max-width: 480px){
  .page-dashboard .dev-modules-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
 
  .page-dashboard .dev-module-btn{
    border-radius: 16px;
    gap: 10px;
    padding: 18px 12px;
  }
 
  .page-dashboard .dev-module-icon{
    width: 52px;
    height: 52px;
  }
 
  .page-dashboard .dev-selector-header{
    margin-bottom: 32px;
  }
}
 
@media (min-width: 481px) and (max-width: 720px){
  .page-dashboard .dev-modules-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
 
@media (min-width: 721px){
  .page-dashboard .dev-modules-grid{
    grid-template-columns: repeat(auto-fit, minmax(160px, 190px));
  }
}

/* ---------------------------------------------------------
   5.10 PAGE: AUDIT LOGS
--------------------------------------------------------- */

/* =========================================================
   PAGE: AUDIT LOGS
========================================================= */

.page-audit-logs .gi-container-fluid{
  max-width: 100% !important;
  width: 100% !important;
  padding: 24px 32px !important;
  box-sizing: border-box;
}

.page-audit-logs .audit-logs-summary-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(22,163,74,0.20);
  background: rgba(22,163,74,0.08);
  color: #166534;
  font-size: 13px;
  font-weight: 700;
}

.page-audit-logs .audit-logs-datetime{
  font-weight: 600;
  white-space: nowrap;
}

.page-audit-logs .audit-logs-table th:nth-child(2),
.page-audit-logs .audit-logs-table td:nth-child(2),
.page-audit-logs .audit-logs-table th:nth-child(4),
.page-audit-logs .audit-logs-table td:nth-child(4),
.page-audit-logs .audit-logs-table th:nth-child(6),
.page-audit-logs .audit-logs-table td:nth-child(6){
  white-space: nowrap;
}

.page-audit-logs .audit-logs-details{
  width: 100%;
}

.page-audit-logs .audit-logs-details-summary{
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(15,23,42,0.04);
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.page-audit-logs .audit-logs-details-summary::-webkit-details-marker{
  display: none;
}

.page-audit-logs .audit-logs-details-body{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

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

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

.page-audit-logs .audit-logs-meta-item strong{
  font-size: 12px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.page-audit-logs .audit-logs-meta-item span{
  font-size: 14px;
  color: #0f172a;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-audit-logs .audit-logs-meta-item-full{
  grid-column: 1 / -1;
}

.page-audit-logs .audit-logs-json-panel{
  margin: 0;
}

.page-audit-logs .audit-logs-json-title{
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.page-audit-logs .audit-logs-json-pre{
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.page-audit-logs .audit-logs-mobile-summary{
  margin-top: 10px;
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
}

.page-audit-logs .audit-logs-pagination{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-audit-logs .audit-logs-pagination-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 1023px){
  .page-audit-logs .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }

  .page-audit-logs .audit-logs-summary-pill{
    width: 100%;
  }

  .page-audit-logs .audit-logs-meta-grid{
    grid-template-columns: 1fr;
  }

  .page-audit-logs .audit-logs-pagination-actions,
  .page-audit-logs .audit-logs-pagination-actions .gi-btn{
    width: 100%;
  }

  .page-audit-logs .audit-logs-mobile-list{
    padding-top: 12px;
  }

  .page-audit-logs .audit-logs-details-mobile .audit-logs-details-summary{
    width: 100%;
  }
}

/* =========================================================
   6. CONFIGURAÇÕES
========================================================= */

/* ---------------------------------------------------------
   6.1 PAGE: SETTINGS COMPANY
--------------------------------------------------------- */

/* =========================================================
   PAGE: SETTINGS COMPANY
========================================================= */

.page-settings-company .gi-container{
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.page-settings-company .sc-company-hero{
  margin-bottom: 14px;
}

.page-settings-company .sc-company-summary{
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-settings-company .sc-company-brand{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.page-settings-company .sc-company-logo-box{
  width: 78px;
  height: 78px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 78px;
}

.page-settings-company .sc-company-logo,
.page-settings-company .sc-company-logo-preview{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.page-settings-company .sc-company-logo-placeholder{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,0.55);
}

.page-settings-company .sc-company-brand-text{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-settings-company .sc-company-brand-text strong{
  font-size: 18px;
  line-height: 1.2;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.page-settings-company .sc-company-brand-text span{
  color: rgba(15,23,42,0.65);
  overflow-wrap: anywhere;
}

.page-settings-company .sc-company-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-settings-company .sc-company-grid{
  align-items: start;
}

.page-settings-company .sc-company-fields{
  display: grid;
  gap: 14px;
  padding: 0 18px;
}

.page-settings-company .sc-company-field{
  min-width: 0;
}

.page-settings-company .sc-company-upload{
  padding: 0 18px 4px;
}

.page-settings-company .sc-company-upload-head{
  margin-bottom: 12px;
}

.page-settings-company .sc-company-section-title{
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.page-settings-company .sc-company-logo-panel{
  margin-top: 0;
}

.page-settings-company .sc-company-logo-current,
.page-settings-company .sc-company-logo-empty{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-settings-company .sc-company-logo-preview{
  max-width: 220px;
  max-height: 120px;
}

.page-settings-company .sc-company-file-wrap{
  margin-top: 12px;
}

.page-settings-company .sc-company-actions{
  padding-top: 12px;
}

.page-settings-company .sc-company-info-list{
  padding-bottom: 4px;
}

.page-settings-company .sc-company-note{
  margin-top: 0;
}

@media (min-width: 1024px){
  .page-settings-company .gi-container{
    padding: 24px 32px !important;
  }

  .page-settings-company .sc-company-summary{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .page-settings-company .sc-company-fields{
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }

  .page-settings-company .sc-company-actions{
    display: flex;
    justify-content: flex-start;
    gap: 10px;
  }

  .page-settings-company .sc-company-actions .gi-btn{
    min-width: 180px;
  }
}

/* =========================================================
   7. MENSAGERIA WHATSAPP
========================================================= */

/* ---------------------------------------------------------
   7.1 WhatsApp manual wizard
--------------------------------------------------------- */

/* =========================================================
   WhatsApp manual wizard
========================================================= */

/* =========================================================
   7.1 WHATSAPP/MENSAGERIA - Componentes base em components.css
   Apenas overrides específicos de página aqui
========================================================= */

/* ---------------------------------------------------------
   7.2 WhatsApp Connect & QR - Layout específico
--------------------------------------------------------- */

.page-messaging-whatsapp-connect .gi-container,
.page-messaging-whatsapp-qr .gi-container{
  width: min(100%, 100vw);
  max-width: 100%;
}

.page-messaging-whatsapp-connect .wa-connect-header,
.page-messaging-whatsapp-qr .wa-qr-header{
  text-align: center;
}

.page-messaging-whatsapp-connect .wa-connect-header h1,
.page-messaging-whatsapp-qr .wa-qr-header h1{
  width: 100%;
  margin: 0;
}

.page-messaging-whatsapp-connect .wa-connect-header .gi-muted,
.page-messaging-whatsapp-qr .wa-qr-header .gi-muted{
  width: 100%;
  margin: 8px 0 0;
  text-align: center;
}

.page-messaging-whatsapp-connect .wa-connect-status-center{
  width: 100%;
  margin: 14px auto 18px;
  text-align: center;
}

.page-messaging-whatsapp-connect .wa-connect-grid .gi-btn,
.page-messaging-whatsapp-qr .wa-qr-actions .gi-btn{
  width: 100%;
}

.page-messaging-whatsapp-qr #statusLine,
.page-messaging-whatsapp-qr #qrTimerLine{
  text-align: center;
}

@media (min-width: 900px){
  .page-messaging-whatsapp-connect .gi-container,
  .page-messaging-whatsapp-qr .gi-container{
    max-width: none;
    padding-left: clamp(20px, 3vw, 36px);
    padding-right: clamp(20px, 3vw, 36px);
  }

  .page-messaging-whatsapp-connect .wa-manual-wizard,
  .page-messaging-whatsapp-connect .wa-connect-card,
  .page-messaging-whatsapp-qr .wa-manual-wizard,
  .page-messaging-whatsapp-qr .wa-qr-card{
    width: 100%;
    max-width: none;
  }

  .page-messaging-whatsapp-connect .wa-connect-card .gi-card-header,
  .page-messaging-whatsapp-qr .wa-qr-card .gi-card-header{
    padding-left: clamp(18px, 2.4vw, 28px);
    padding-right: clamp(18px, 2.4vw, 28px);
  }

  .page-messaging-whatsapp-connect .wa-connect-panel,
  .page-messaging-whatsapp-qr .wa-qr-wrap{
    padding-left: clamp(18px, 2.4vw, 28px);
    padding-right: clamp(18px, 2.4vw, 28px);
  }

  .page-messaging-whatsapp-connect .wa-connect-status-center{
    max-width: none;
  }
}

/* ---------------------------------------------------------
   7.3 WhatsApp Templates - Layout específico
--------------------------------------------------------- */

.page-messaging-whatsapp-templates .mtpl-header-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.page-messaging-whatsapp-templates .mtpl-checkline{
  min-height: 44px;
  align-items: center;
}

.page-messaging-whatsapp-templates .mtpl-form-panel.is-hidden{
  display: none;
}

.page-messaging-whatsapp-templates .mtpl-placeholder-panel{
  margin: 0;
}

.page-messaging-whatsapp-templates .mtpl-message-field{
  min-height: 220px;
}

.page-messaging-whatsapp-templates .mtpl-help{
  padding: 0 18px 18px;
}

.page-messaging-whatsapp-templates .mtpl-badge-stack{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.page-messaging-whatsapp-templates .mtpl-body-preview{
  white-space: normal;
  line-height: 1.45;
  word-break: break-word;
}

.page-messaging-whatsapp-templates .mtpl-readonly-note{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

.page-messaging-whatsapp-templates .mtpl-mobile-actions{
  grid-template-columns: 1fr;
}

.page-messaging-whatsapp-templates .mtpl-list-card .oh-data-table td,
.page-messaging-whatsapp-templates .mtpl-list-card .oh-data-table th{
  vertical-align: top;
}

.page-messaging-whatsapp-templates .gi-table-row.gi-table-row-editing td{
  background: rgba(22, 163, 74, 0.06);
}

.page-messaging-whatsapp-templates .gi-table-row.gi-table-row-editing td:first-child{
  border-left: 3px solid var(--brand);
}

.page-messaging-whatsapp-templates .gi-mobile-card.gi-mobile-card-editing{
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

.page-messaging-whatsapp-templates .wa-manual-wizard{
  width: 100%;
}

@media (max-width: 1023px){
  .page-messaging-whatsapp-templates .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }

  .page-messaging-whatsapp-templates .mtpl-header-actions{
    width: 100%;
  }

  .page-messaging-whatsapp-templates .mtpl-header-actions .gi-btn{
    flex: 1 1 100%;
  }
}

@media (min-width: 1024px){
  .page-messaging-whatsapp-templates .gi-container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 32px !important;
    box-sizing: border-box;
  }

  .page-messaging-whatsapp-templates .wa-manual-wizard,
  .page-messaging-whatsapp-templates .mtpl-summary-card,
  .page-messaging-whatsapp-templates .mtpl-form-panel,
  .page-messaging-whatsapp-templates .mtpl-list-card{
    width: 100%;
    max-width: none;
  }

  .page-messaging-whatsapp-templates .mtpl-panel-form{
    grid-template-columns: 1fr 1fr;
  }

  .page-messaging-whatsapp-templates .mtpl-panel-actions,
  .page-messaging-whatsapp-templates .mtpl-placeholder-panel,
  .page-messaging-whatsapp-templates .mtpl-message-field{
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px){
  .page-messaging-whatsapp-templates .mtpl-panel-form{
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------
   7.4 WhatsApp Contacts - Layout específico
--------------------------------------------------------- */

/* (Componentes base em components.css) */

@media (min-width: 900px){
  .page-messaging-whatsapp .wa-send-inline-actions{
    grid-template-columns: auto auto 1fr;
    gap: 12px;
  }

  .page-messaging-whatsapp .wa-send-inline-actions .gi-muted{
    justify-self: end;
    text-align: right;
  }

  .page-messaging-whatsapp .wa-send-contacts-list{
    gap: 10px;
  }

  .page-messaging-whatsapp .wa-send-contacts-list .wa-checkbox-item{
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
  }
}

/* ---------------------------------------------------------
   7.5 WhatsApp Campaigns - Layout específico
--------------------------------------------------------- */

.page-messaging-whatsapp-campaigns .gi-container-fluid{
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.page-messaging-whatsapp-campaigns .wa-campaigns-list-card,
.page-messaging-whatsapp-campaigns .wa-campaign-details-card{
  margin-top: 16px;
}

.page-messaging-whatsapp-campaigns .wa-campaign-mobile-actions{
  grid-template-columns: 1fr;
}

.page-messaging-whatsapp-campaigns .wa-campaigns-filter-actions{
  align-self: flex-end;
}

.page-messaging-whatsapp-campaigns .wa-campaign-items-filter-panel,
.page-messaging-whatsapp-campaigns .wa-campaign-snapshot-panel{
  margin-top: 16px;
}

.page-messaging-whatsapp-campaigns .wa-campaigns-table .gi-table-row-editing td{
  background: rgba(22, 163, 74, 0.06);
}

.page-messaging-whatsapp-campaigns .wa-campaigns-table .gi-table-row-editing td:first-child{
  border-left: 3px solid var(--brand);
}

@media (max-width: 1023px){
  .page-messaging-whatsapp-campaigns .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }

  .page-messaging-whatsapp-campaigns .wa-campaign-pagination{
    align-items: stretch;
  }

  .page-messaging-whatsapp-campaigns .wa-campaign-pagination .wa-campaign-inline,
  .page-messaging-whatsapp-campaigns .wa-campaign-detail-actions{
    width: 100%;
  }

  .page-messaging-whatsapp-campaigns .wa-campaign-pagination .gi-btn,
  .page-messaging-whatsapp-campaigns .wa-campaign-detail-actions .gi-btn,
  .page-messaging-whatsapp-campaigns .wa-campaign-inline .gi-btn{
    width: 100%;
  }
}

@media (min-width: 1024px){
  .page-messaging-whatsapp-campaigns .gi-container-fluid{
    padding: 24px 32px !important;
  }

  .page-messaging-whatsapp-campaigns .wa-campaigns-filter-form .oh-filter-field-grow{
    min-width: 320px;
  }
}

@media (min-width: 1360px){
  .page-messaging-whatsapp-campaigns .wa-campaigns-filter-form .oh-filter-field-grow{
    min-width: 420px;
  }
}

/* ---------------------------------------------------------
   7.6 WhatsApp Automations - Layout específico
--------------------------------------------------------- */
.page-messaging-whatsapp-automations .mwa-inline-alert{
  margin-bottom:12px;
}

.page-messaging-whatsapp-automations .mwa-alert-actions{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.page-messaging-whatsapp-automations .mwa-filter-actions,
.page-messaging-whatsapp-automations .mwa-panel-actions,
.page-messaging-whatsapp-automations .mwa-mobile-actions,
.page-messaging-whatsapp-automations .mwa-detail-actions,
.page-messaging-whatsapp-automations .mwa-pagination-actions,
.page-messaging-whatsapp-automations .mwa-row-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.page-messaging-whatsapp-automations .mwa-form-panel.is-hidden{
  display:none;
}

.page-messaging-whatsapp-automations .mwa-form-panel,
.page-messaging-whatsapp-automations .mwa-detail-card{
  overflow:visible;
}

.page-messaging-whatsapp-automations .mwa-automation-form{
  display:grid;
  grid-template-columns:1fr;
  gap:14px 16px;
}

.page-messaging-whatsapp-automations .mwa-field-span-2,
.page-messaging-whatsapp-automations .mwa-field-span-3{
  grid-column:1 / -1;
}

.page-messaging-whatsapp-automations .mwa-inline-check{
  min-height:48px;
  align-items:center;
  margin-top:0;
}

.page-messaging-whatsapp-automations .mwa-inline-check .gi-muted{
  margin-top:0;
}

.page-messaging-whatsapp-automations .wa-date-fix{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  display:block;
  -webkit-appearance:none;
  appearance:none;
}

.page-messaging-whatsapp-automations input[type="date"].wa-date-fix,
.page-messaging-whatsapp-automations input[type="time"].wa-date-fix,
.page-messaging-whatsapp-automations input[type="datetime-local"].wa-date-fix{
  min-height:48px;
  padding-right:14px;
}

.page-messaging-whatsapp-automations .mwa-check-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.page-messaging-whatsapp-automations .mwa-check-panel{
  width:100%;
  box-sizing:border-box;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  padding:14px 16px;
  margin:0;
  text-align:left;
  min-height:58px;
}

.page-messaging-whatsapp-automations .mwa-check-panel span{
  display:block;
  line-height:1.35;
  flex:1 1 auto;
}

.page-messaging-whatsapp-automations .mwa-check-panel input[type="checkbox"]{
  margin:0;
  flex:0 0 auto;
}

.page-messaging-whatsapp-automations .mwa-check-panel.mwa-check-panel-highlight{
  border-color:rgba(59,130,246,.24);
  background:rgba(59,130,246,.06);
}

.page-messaging-whatsapp-automations .mwa-table-wrap{
  margin-top:0;
}

.page-messaging-whatsapp-automations .mwa-run-status{
  margin-top:6px;
}

.page-messaging-whatsapp-automations .mwa-origin-stack{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}

.page-messaging-whatsapp-automations .mwa-origin-stack.is-main{
  justify-content:flex-start;
  margin-top:6px;
}

.page-messaging-whatsapp-automations .mwa-summary-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.page-messaging-whatsapp-automations .mwa-summary-grid span,
.page-messaging-whatsapp-automations .mwa-summary-grid strong{
  display:block;
}

.page-messaging-whatsapp-automations .mwa-summary-grid strong{
  margin-top:4px;
}

.page-messaging-whatsapp-automations .mwa-summary-textarea{
  resize:vertical;
}

.page-messaging-whatsapp-automations .mwa-detail-actions{
  margin-top:14px;
}

.page-messaging-whatsapp-automations .mwa-inline-form{
  margin:0;
}

@media (min-width: 768px){
  .page-messaging-whatsapp-automations .mwa-automation-form{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .page-messaging-whatsapp-automations .mwa-check-grid,
  .page-messaging-whatsapp-automations .mwa-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px){
  .page-messaging-whatsapp-automations .gi-container-fluid{
    max-width:100% !important;
    width:100% !important;
    padding:24px 32px !important;
    box-sizing:border-box;
  }

  .page-messaging-whatsapp-automations .mwa-automation-form{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .page-messaging-whatsapp-automations .mwa-check-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .page-messaging-whatsapp-automations .mwa-summary-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .page-messaging-whatsapp-automations .mwa-pagination-panel{
    flex-direction:column;
    align-items:stretch;
  }
}

@media (max-width: 768px){
  .page-messaging-whatsapp-automations .gi-container-fluid{
    padding:16px 14px 32px !important;
  }

  .page-messaging-whatsapp-automations .mwa-filter-actions,
  .page-messaging-whatsapp-automations .mwa-panel-actions,
  .page-messaging-whatsapp-automations .mwa-mobile-actions,
  .page-messaging-whatsapp-automations .mwa-detail-actions,
  .page-messaging-whatsapp-automations .mwa-pagination-actions{
    flex-direction:column;
  }

  .page-messaging-whatsapp-automations .mwa-filter-actions > *,
  .page-messaging-whatsapp-automations .mwa-panel-actions > *,
  .page-messaging-whatsapp-automations .mwa-mobile-actions > *,
  .page-messaging-whatsapp-automations .mwa-detail-actions > *,
  .page-messaging-whatsapp-automations .mwa-pagination-actions > *{
    width:100%;
  }
}
.page-messaging-whatsapp-automation-runs .mwa-runs-header-actions,
.page-messaging-whatsapp-automation-runs .mwa-runs-filter-actions,
.page-messaging-whatsapp-automation-runs .mwa-runs-pagination-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-field,
.page-messaging-whatsapp-automation-runs .mwa-runs-field-grow {
  min-width: 0;
}

.page-messaging-whatsapp-automation-runs .wa-date-fix {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: block;
  -webkit-appearance: none;
  appearance: none;
}

.page-messaging-whatsapp-automation-runs input[type="date"].wa-date-fix {
  min-height: 48px;
  padding-right: 14px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-inline-form {
  margin-top: 14px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-summary-grid,
.page-messaging-whatsapp-automation-runs .mwa-runs-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-meta-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-messaging-whatsapp-automation-runs .mwa-runs-summary-grid span,
.page-messaging-whatsapp-automation-runs .mwa-runs-summary-grid strong,
.page-messaging-whatsapp-automation-runs .mwa-runs-meta-grid span,
.page-messaging-whatsapp-automation-runs .mwa-runs-meta-grid strong {
  display: block;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-summary-grid strong,
.page-messaging-whatsapp-automation-runs .mwa-runs-meta-grid strong {
  margin-top: 4px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: start;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-item,
.page-messaging-whatsapp-automation-runs .mwa-runs-run-item {
  text-decoration: none;
  align-items: flex-start;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-item-head,
.page-messaging-whatsapp-automation-runs .mwa-runs-detail-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-detail-title-row {
  margin-bottom: 14px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-empty {
  padding: 14px 18px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-pagination-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-summary-textarea {
  resize: vertical;
  margin-top: 8px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-spacing-top {
  margin-top: 12px;
}

.page-messaging-whatsapp-automation-runs .mwa-runs-spacing-top-xs {
  margin-top: 6px;
}

@media (max-width: 1180px) {
  .page-messaging-whatsapp-automation-runs .mwa-runs-layout,
  .page-messaging-whatsapp-automation-runs .mwa-runs-filter-grid,
  .page-messaging-whatsapp-automation-runs .mwa-runs-summary-grid,
  .page-messaging-whatsapp-automation-runs .mwa-runs-meta-grid,
  .page-messaging-whatsapp-automation-runs .mwa-runs-meta-grid-compact {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .page-messaging-whatsapp-automation-runs .mwa-runs-layout,
  .page-messaging-whatsapp-automation-runs .mwa-runs-filter-grid,
  .page-messaging-whatsapp-automation-runs .mwa-runs-summary-grid,
  .page-messaging-whatsapp-automation-runs .mwa-runs-meta-grid,
  .page-messaging-whatsapp-automation-runs .mwa-runs-meta-grid-compact {
    grid-template-columns: 1fr;
  }

  .page-messaging-whatsapp-automation-runs .mwa-runs-filter-actions,
  .page-messaging-whatsapp-automation-runs .mwa-runs-pagination-panel,
  .page-messaging-whatsapp-automation-runs .mwa-runs-pagination-actions,
  .page-messaging-whatsapp-automation-runs .mwa-runs-item-head,
  .page-messaging-whatsapp-automation-runs .mwa-runs-detail-title-row {
    flex-direction: column;
    align-items: stretch;
  }

  .page-messaging-whatsapp-automation-runs .mwa-runs-filter-actions > *,
  .page-messaging-whatsapp-automation-runs .mwa-runs-pagination-actions > * {
    width: 100%;
  }
}

/* =========================================================
   8. WORKSPACE
========================================================= */

/* ---------------------------------------------------------
   8.1 PAGE: WORKSPACE — BASE DO MÓDULO GESTÃO & PROJETOS
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — BASE DO MÓDULO GESTÃO & PROJETOS
========================================================= */

.page-workspace-dashboard .gi-container-fluid,
.page-workspace-projects .gi-container-fluid,
.page-workspace-kanban .gi-container-fluid,
.page-workspace-activities .gi-container-fluid,
.page-workspace-reminders .gi-container-fluid,
.page-workspace-notes .gi-container-fluid,
.page-workspace-structures .gi-container-fluid,
.page-workspace-ai .gi-container-fluid,
.page-workspace-connections .gi-container-fluid,
.page-workspace-form .gi-container-fluid{
  max-width: 100% !important;
  width: 100% !important;
  padding: 24px 32px !important;
  box-sizing: border-box;
}

@media (max-width: 1023px){
  .page-workspace-dashboard .gi-container-fluid,
  .page-workspace-projects .gi-container-fluid,
  .page-workspace-kanban .gi-container-fluid,
  .page-workspace-activities .gi-container-fluid,
  .page-workspace-reminders .gi-container-fluid,
  .page-workspace-notes .gi-container-fluid,
  .page-workspace-structures .gi-container-fluid,
  .page-workspace-ai .gi-container-fluid,
  .page-workspace-connections .gi-container-fluid,
  .page-workspace-form .gi-container-fluid{
    padding: 16px 14px 32px !important;
  }
}

.ws-page-card{
  width: 100%;
}

.ws-dash-header{
  margin-bottom: 20px;
}

.ws-dash-header h1{
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
}

.ws-dash-header p{
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

.ws-dash-metrics{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.ws-metric-card{
  padding: 18px 20px;
}

.ws-metric-label{
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ws-metric-value{
  margin-top: 6px;
  font-size: 30px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.ws-dash-grid,
.ws-two-col{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.ws-action-list{
  padding: 8px 0;
}

.ws-action-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  text-decoration: none;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  transition: background .12s;
  border-bottom: 1px solid rgba(15,23,42,0.05);
}

.ws-action-item:last-child{
  border-bottom: none;
}

.ws-action-item:hover{
  background: #f8fafc;
  color: #0f172a;
}

.ws-action-arrow{
  color: #cbd5e1;
  font-size: 16px;
}

.ws-filter-form{
  padding: 14px 18px 18px;
  display: grid;
  grid-template-columns: 1.4fr .8fr auto;
  gap: 12px;
  align-items: end;
}

.ws-filter-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ws-project-filter-form{
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, .75fr) minmax(180px, .75fr) auto;
}

.ws-sort-toolbar{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ws-sort-toolbar-inline{
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ws-sort-toolbar-label{
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
}

.ws-sort-toolbar-scroll{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.ws-sort-chip{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
}

.ws-sort-chip:hover{
  border-color: rgba(37,99,235,.35);
  background: #f8fbff;
  color: #1d4ed8;
}

.ws-sort-chip.is-active{
  border-color: rgba(37,99,235,.42);
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.08);
}

.ws-sort-chip span{
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.ws-sort-toolbar-mobile{
  display: none;
  justify-content: flex-start;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 2px;
}

.ws-sort-toolbar-desktop{
  display: flex;
}

/* (Componentes Kanban em components.css) */

.ws-calendar-shell{
  padding: 18px;
}

.ws-calendar-placeholder,
.ws-structure-stage{
  min-height: 320px;
  border: 1px dashed rgba(148,163,184,.45);
  border-radius: 14px;
  background: rgba(15,23,42,.02);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: #64748b;
}

@media (max-width: 1279px){
  .ws-dash-grid,
  .ws-two-col{
    grid-template-columns: 1fr 1fr;
  }

  .ws-dash-metrics{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px){
  .ws-dash-grid,
  .ws-two-col,
  .ws-dash-metrics,
  .ws-filter-form{
    grid-template-columns: 1fr;
  }

  .ws-filter-actions{
    display: grid;
    grid-template-columns: 1fr;
  }

  .ws-filter-actions .gi-btn{
    width: 100%;
  }
}

/* ---------------------------------------------------------
   8.2 PAGE: WORKSPACE — LISTAGENS E FORMULÁRIOS FUNCIONAIS
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — LISTAGENS E FORMULÁRIOS FUNCIONAIS
========================================================= */

.ws-list-card{
  margin-top: 18px;
}

.ws-desktop-table{
  display: block;
}

.ws-mobile-list{
  display: none;
  gap: 12px;
  padding: 12px;
}

.ws-mobile-card{
  width: 100%;
}

.ws-mobile-card-body{
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ws-mobile-card-top{
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ws-mobile-card-main{
  min-width: 0;
}

.ws-mobile-meta{
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: #334155;
}

.ws-mobile-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ws-row-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.ws-inline-form{
  margin: 0;
}

.ws-icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  line-height: 1;
}

.ws-icon-btn svg{
  display: block;
  width: 16px;
  height: 16px;
}

.ws-icon-btn-danger:hover,
.ws-icon-btn-danger:focus{
  color: #b42318;
}

.page-workspace-activities .gi-alert,
.page-workspace-projects .gi-alert{
  margin-bottom: 16px;
}

.ws-project-name-wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ws-project-toggle-placeholder{
  width: 34px;
  min-width: 34px;
  height: 34px;
}

.ws-project-toggle-btn{
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(148,163,184,.30);
  border-radius: 10px;
  background: #fff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: all .18s ease;
}

.ws-project-toggle-btn:hover{
  border-color: rgba(37,99,235,.35);
  color: #1d4ed8;
  background: #f8fbff;
}

.ws-project-toggle-btn.is-expanded{
  border-color: rgba(37,99,235,.45);
  color: #1d4ed8;
  background: rgba(37,99,235,.08);
}

.ws-expand-chevron{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease;
  line-height: 1;
}

.ws-project-toggle-btn.is-expanded .ws-expand-chevron{
  transform: rotate(180deg);
}

.ws-toggle-count-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #3b82f6;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15,23,42,.18);
}

.ws-project-mobile-title-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ws-acts-panel-row{
  background: #f8fafc;
}

.ws-acts-panel-cell{
  padding: 0 !important;
}

.ws-acts-panel{
  padding: 14px 16px 16px;
}

.ws-acts-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ws-acts-panel-title-wrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 14px;
}

.ws-acts-panel-btns{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ws-acts-inner-table{
  margin-top: 4px;
}

.ws-acts-empty-msg{
  margin: 6px 0 0;
}

.ws-mob-acts-panel{
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(15,23,42,.08);
  display: grid;
  gap: 10px;
}

.ws-mob-acts-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ws-mob-acts-title{
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.ws-mob-act-item{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 8px;
  background: #fff;
}

.ws-mob-act-top{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-form-grid{
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: end;
}

.ws-col-full{
  grid-column: 1 / -1;
}

.ws-form-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.ws-check-wrap{
  display: flex;
  align-items: flex-end;
  min-height: 48px;
}

.ws-filter-form-4{
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
}

@media (max-width: 991px){
  .ws-desktop-table{
    display: none;
  }

  .ws-mobile-list{
    display: grid;
  }
}

@media (max-width: 767px){
  .ws-form-grid,
  .ws-filter-form-4{
    grid-template-columns: 1fr;
  }

  .ws-form-actions{
    display: grid;
    grid-template-columns: 1fr;
  }

  .ws-form-actions .gi-btn{
    width: 100%;
  }

  .ws-check-wrap{
    min-height: auto;
  }

  .ws-mobile-actions{
    gap: 10px;
  }

  .ws-icon-btn{
    min-width: 40px;
    width: 40px;
    height: 40px;
  }

  .ws-project-toggle-btn{
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  .ws-project-toggle-placeholder{
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  .ws-acts-panel{
    padding: 12px;
  }

  .ws-acts-panel-btns{
    width: 100%;
  }

  .ws-acts-panel-btns .gi-btn{
    flex: 1 1 100%;
  }
}

@media (max-width: 1180px){
  .ws-project-filter-form{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ws-sort-toolbar-inline,
  .ws-project-filter-actions{
    justify-content: flex-start;
  }
}

@media (max-width: 767px){
  .ws-project-filter-form{
    grid-template-columns: 1fr;
  }

  .ws-sort-toolbar-desktop{
    display: none;
  }

  .ws-sort-toolbar-mobile{
    display: flex;
  }

  .ws-sort-chip{
    min-height: 36px;
    padding: 0 13px;
    font-size: 12px;
  }

  .ws-project-filter-actions{
    justify-content: stretch;
  }
}
/* ---------------------------------------------------------
   8.3 PAGE: WORKSPACE — LEMBRETES E NOTAS
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — LEMBRETES E NOTAS
========================================================= */

.ws-filter-form-3{
  grid-template-columns: 1.4fr 1fr 1fr;
}

.ws-notes-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

.ws-note-card{
  width: 100%;
}

.ws-note-card-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ws-note-card-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ws-note-card-title-wrap{
  min-width: 0;
}

.ws-note-card-content{
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ws-note-card-meta{
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
}

@media (max-width: 1279px){
  .ws-notes-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .ws-filter-form-3,
  .ws-notes-grid{
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   8.3 PAGE: WORKSPACE — LEMBRETES E NOTAS
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — LEMBRETES E NOTAS
========================================================= */

.ws-filter-form-3{
  grid-template-columns: 1.4fr 1fr 1fr;
}

.ws-notes-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

.ws-note-card{
  width: 100%;
}

.ws-note-card-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ws-note-card-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ws-note-card-title-wrap{
  min-width: 0;
}

.ws-note-card-content{
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ws-note-card-meta{
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
}

@media (max-width: 1279px){
  .ws-notes-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .ws-filter-form-3,
  .ws-notes-grid{
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   8.4 PAGE: WORKSPACE — NOTAS / CHECK-LIST
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — NOTAS / CHECK-LIST
   ADICIONAR abaixo da seção "LEMBRETES E NOTAS"
========================================================= */

.ws-content-block[hidden]{
  display: none !important;
}

.ws-checklist-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

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

.ws-checklist-item{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:12px;
  background:rgba(15,23,42,0.02);
}

.ws-checklist-item-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  min-width:22px;
  height:22px;
  margin:0;
}

.ws-checklist-item-check input{
  width:18px;
  height:18px;
  margin:0;
}

.ws-note-checklist-preview{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ws-note-checklist-summary{
  font-size:13px;
  color:#475569;
}

.ws-note-checklist-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ws-note-checklist-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  line-height:1.45;
  color:#334155;
}

.ws-note-checklist-list li.is-done{
  color:#64748b;
  text-decoration:line-through;
}

.ws-note-checklist-mark{
  flex:0 0 auto;
  line-height:1.2;
}

.ws-note-checklist-more{
  font-size:13px;
  color:#64748b;
}

@media (max-width: 767px){
  .ws-checklist-item{
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .ws-checklist-item-check{
    justify-content:flex-start;
    width:auto;
    height:auto;
  }

  .ws-checklist-item .gi-btn{
    width:100%;
  }

  .ws-checklist-head{
    flex-direction:column;
    align-items:stretch;
  }

  .ws-checklist-head .gi-btn{
    width:100%;
  }
}

/* ---------------------------------------------------------
   8.5 PAGE: WORKSPACE — LEMBRETES — RECORRÊNCIA
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — LEMBRETES — RECORRÊNCIA
   Adicionar após o bloco "LEMBRETES E NOTAS" existente
========================================================= */

/* ── Toggle row (Dia inteiro + Recorrente) ── */
.ws-checks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

/* ── Fieldset de recorrência ── */
.ws-recurrence-fieldset {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  padding: 20px 20px 16px;
  background: rgba(15, 23, 42, 0.025);
  margin-top: 4px;
}

.ws-recurrence-fieldset[hidden] {
  display: none !important;
}

.ws-recurrence-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #475569;
  padding: 0 4px;
}

.ws-recurrence-legend-icon {
  font-size: 16px;
  line-height: 1;
  color: #6366f1;
}

/* ── Grid interno de campos de recorrência ── */
.ws-recurrence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* ── Label de unidade inline ── */
.ws-rec-interval-unit {
  font-weight: 400;
  color: #64748b;
  margin-left: 4px;
}

/* ── Sub-blocos condicionais ── */
.ws-rec-sub-block {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ws-rec-sub-block[hidden] {
  display: none !important;
}

/* ── Chips de dias da semana ── */
.ws-weekdays-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ws-weekday-chip {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  user-select: none;
}

.ws-weekday-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ws-weekday-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid rgba(15, 23, 42, 0.15);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background: #fff;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ws-weekday-chip input[type="checkbox"]:checked + span {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.ws-weekday-chip:hover span {
  border-color: #6366f1;
  color: #6366f1;
}

.ws-weekday-chip input[type="checkbox"]:checked:hover + span {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

/* ── Bloco de término ── */
.ws-rec-end-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ws-rec-end-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.ws-rec-end-fields {
  margin-top: 14px;
}

.ws-rec-end-fields > div[hidden] {
  display: none !important;
}

/* ── Campo readonly (audit) ── */
.gi-input-readonly {
  background: rgba(15, 23, 42, 0.03);
  color: #64748b;
  cursor: default;
  pointer-events: none;
}

/* ── Texto de ajuda inline ── */
.gi-help {
  font-size: 12px;
  color: #94a3b8;
  margin: 4px 0 0;
}

/* ── Responsividade ── */
@media (max-width: 1023px) {
  .ws-recurrence-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ws-recurrence-fieldset {
    padding: 14px 12px 12px;
  }

  .ws-checks-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ws-weekdays-row {
    gap: 6px;
  }

  .ws-weekday-chip span {
    min-width: 38px;
    height: 34px;
    font-size: 12px;
    padding: 0 8px;
  }

  .ws-rec-end-row {
    flex-direction: column;
    gap: 10px;
  }
}


/* ---------------------------------------------------------
   8.6 PAGE: WORKSPACE — KANBAN (VERSÃO COM SCROLL HORIZONTAL E COLUNAS)
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — KANBAN (VERSÃO COM SCROLL HORIZONTAL E COLUNAS)

   INSTRUÇÕES:
   Localize no seu pages.css o bloco que começa com:
       "PAGE: WORKSPACE — DASHBOARD REAL E KANBAN FUNCIONAL"
   e substitua INTEGRALMENTE as regras abaixo pelo conteúdo
   deste arquivo. Não há necessidade de alterar nenhum outro
   arquivo CSS.
========================================================= */

/* ── Dashboard list ── */
.ws-dash-list{
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
}

.ws-dash-list-item{
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 12px;
  padding: 12px 12px;
  background: rgba(15,23,42,0.02);
}

.ws-dash-list-main{
  min-width: 0;
}

/* ── Filtro kanban ── */
.ws-filter-form-kanban{
  grid-template-columns: 1fr auto;
}

/* Mobile: kanban filter form */
@media (max-width: 767px){
  .ws-filter-form-kanban{
    grid-template-columns: 1fr;
  }

  .ws-filter-form-kanban .ws-filter-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* "Nova atividade" ocupa linha inteira */
  .ws-filter-form-kanban .ws-filter-actions .gi-btn:last-child{
    grid-column: 1 / -1;
  }
}

/* (Componentes Kanban em components.css) */

/* ---------------------------------------------------------
   8.7 PAGE: WORKSPACE — ESTRUTURAS
--------------------------------------------------------- */

/* (Componentes Estruturas em components.css) */

/* ---------------------------------------------------------
   8.9 PAGE: WORKSPACE — CONEXÕES
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — CONEXÕES
========================================================= */

.ws-connection-json{
  min-height: 280px;
}

.ws-connection-json-help{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.ws-connection-helper{
  margin: 0;
}

.ws-connection-helper-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ws-connection-section{
  display: block;
}

.ws-connection-section.is-hidden,
.ws-connection-section[hidden]{
  display: none !important;
}

.ws-section-card{
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(15,23,42,0.02);
  padding: 14px;
}

body.theme-dark .ws-section-card{
  background: rgba(255,255,255,0.04);
}

.ws-section-head{
  margin-bottom: 12px;
}

.ws-section-head h2{
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.ws-section-head .gi-muted{
  margin-top: 6px;
}

.ws-form-grid-inner{
  gap: 12px;
}

.ws-field-help{
  margin-top: 6px;
}

.ws-json-toggle{
  margin-top: 0;
}

.ws-json-block{
  display: block;
}

.ws-inline-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ws-inline-actions .gi-btn{
  min-width: 180px;
}

.ws-openai-meta{
  margin: 0;
}

.ws-openai-meta-title{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.ws-openai-meta-row{
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.ws-ajax-feedback{
  margin-bottom: 0;
}

@media (min-width: 768px){
  .ws-section-card{
    padding: 16px;
  }
}

@media (max-width: 767px){
  .ws-connection-json{
    min-height: 220px;
  }

  .ws-section-card{
    padding: 12px;
  }

  .ws-section-head h2{
    font-size: 15px;
  }

  .ws-connection-helper-title{
    font-size: 13px;
  }

  .ws-inline-actions{
    flex-direction: column;
  }

  .ws-inline-actions .gi-btn{
    width: 100%;
    min-width: 0;
  }
}
.ws-provider-title{
  font-size: 14px;
  font-weight: 700;
}

.ws-target-wrap{
  max-width: 320px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ws-health-sub{
  margin-top: 6px;
  line-height: 1.4;
}

.ws-mobile-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ws-mobile-meta{
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.ws-mobile-meta strong{
  color: var(--text);
}

@media (max-width: 767px){
  .ws-target-wrap{
    max-width: 100%;
  }
}
.ws-provider-title{
  font-size: 14px;
  font-weight: 700;
}

.ws-target-wrap{
  max-width: 320px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ws-health-sub{
  margin-top: 6px;
  line-height: 1.4;
}

.ws-mobile-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ws-mobile-meta{
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.ws-mobile-meta strong{
  color: var(--text);
}

.ws-btn-danger{
  border-color: rgba(239,68,68,0.28);
  background: rgba(239,68,68,0.10);
  color: var(--text);
}

.ws-btn-danger:hover{
  background: rgba(239,68,68,0.16);
}

.ws-mobile-delete-form,
.ws-mobile-delete-form .gi-btn{
  width: 100%;
}

@media (max-width: 767px){
  .ws-target-wrap{
    max-width: 100%;
  }
}

/* ---------------------------------------------------------
   8.10 PAGE: WORKSPACE — ANÁLISE IA
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — ANÁLISE IA
========================================================= */

.ws-ai-form-grid{
  display:grid;
  gap:14px;
}

.ws-ai-field-span-2{
  grid-column:1 / -1;
}

.ws-ai-target-fields .gi-muted{
  margin-top:6px;
}

.ws-ai-result-panel{
  margin-top:16px;
}

.ws-ai-result-text{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:inherit;
  font-size:14px;
  line-height:1.65;
  color:#334155;
}

.ws-ai-context-panel{
  margin-top:16px;
}

.ws-ai-history-snippet{
  white-space:pre-wrap;
}

.ws-ai-meta-grid{
  display:grid;
  gap:10px;
  margin-bottom:14px;
}

@media (min-width: 900px){
  .ws-ai-meta-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .ws-ai-result-text{
    font-size:13px;
  }
}

/* ---------------------------------------------------------
   8.11 PAGE: WORKSPACE — PROGRESSO AUTOMÁTICO + MODAL DE CONCLUSÃO
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — PROGRESSO AUTOMÁTICO + MODAL DE CONCLUSÃO
   Adicionar ao final do bloco do módulo Workspace no pages.css
========================================================= */

.ws-field-help{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.ws-project-complete-modal{
  width: min(760px, calc(100vw - 24px));
  max-width: 760px;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 24px 70px rgba(15,23,42,0.22);
}

.ws-project-complete-modal::backdrop{
  background: rgba(15,23,42,0.56);
}

.ws-project-complete-head{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(22,163,74,0.12) 0%, rgba(22,163,74,0.04) 100%);
}

.ws-project-complete-head h2{
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.15;
  color: #0f172a;
}

.ws-project-complete-head p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
}

.ws-project-complete-icon{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #166534;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(22,163,74,0.22);
}

.ws-project-complete-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 22px 0;
}

.ws-project-complete-item{
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  background: rgba(15,23,42,0.02);
}

.ws-project-complete-item strong{
  font-size: 16px;
  line-height: 1.4;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.ws-project-complete-item-full{
  grid-column: 1 / -1;
}

.ws-project-complete-label{
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ws-project-complete-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 22px 22px;
}

@media (max-width: 767px){
  .ws-project-complete-head{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .ws-project-complete-grid{
    grid-template-columns: 1fr;
  }

  .ws-project-complete-item-full{
    grid-column: auto;
  }

  .ws-project-complete-actions{
    justify-content: stretch;
  }

  .ws-project-complete-actions .gi-btn{
    width: 100%;
  }
}

/* ---------------------------------------------------------
   8.12 PAGE: WORKSPACE — ANÁLISE IA / HISTÓRICO COMPLETO
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — ANÁLISE IA / HISTÓRICO COMPLETO
   Adicionar ao final do bloco do módulo Workspace no pages.css
========================================================= */

.ws-ai-layout{
  align-items:start;
}

@media (min-width: 1280px){
  .page-workspace-ai .ws-ai-layout{
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, .95fr);
    gap: 20px;
  }

  .page-workspace-ai .ws-ai-layout > .ws-page-card{
    min-width: 0;
  }

  .page-workspace-ai .ws-ai-layout > .ws-page-card:last-child{
    position: sticky;
    top: 18px;
    align-self: start;
  }

  .page-workspace-ai .ws-ai-form-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: start;
  }

  .page-workspace-ai .ws-ai-form-grid > .ws-ai-field-span-2{
    grid-column: 1 / -1;
  }
}

.ws-ai-history-list{
  display:grid;
  gap:14px;
  padding:16px;
}

.ws-ai-history-item{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  background:#fff;
  padding:16px;
  display:grid;
  gap:14px;
  box-shadow:0 6px 18px rgba(15,23,42,0.04);
}

.ws-ai-history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.ws-ai-history-title-wrap{
  min-width:0;
}

.ws-ai-history-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.ws-ai-history-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 16px;
}

.ws-ai-history-block{
  display:grid;
  gap:6px;
  min-width:0;
}

.ws-ai-history-block strong{
  font-size:13px;
  font-weight:800;
  color:#0f172a;
}

.ws-ai-history-text,
.ws-ai-history-snippet{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ws-ai-history-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.ws-ai-dialog{
  width:min(980px, calc(100vw - 24px));
  max-width:980px;
  border:0;
  border-radius:18px;
  padding:0;
  background:#fff;
  color:#0f172a;
  box-shadow:0 24px 70px rgba(15,23,42,0.22);
}

.ws-ai-dialog::backdrop{
  background:rgba(15,23,42,0.56);
}

.ws-ai-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(15,23,42,0.08);
  background:linear-gradient(180deg, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.03) 100%);
}

.ws-ai-dialog-head-main{
  min-width:0;
}

.ws-ai-dialog-head h3{
  margin:0 0 4px;
  font-size:20px;
  line-height:1.2;
  color:#0f172a;
}

.ws-ai-dialog-head p{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#64748b;
}

.ws-ai-dialog-body{
  padding:18px 20px 20px;
  display:grid;
  gap:16px;
}

.ws-ai-dialog-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 14px;
}

.ws-ai-dialog-section{
  display:grid;
  gap:8px;
}

.ws-ai-dialog-section strong{
  font-size:13px;
  font-weight:800;
  color:#0f172a;
}

.ws-ai-dialog-text{
  font-size:14px;
  line-height:1.65;
  color:#334155;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ws-ai-dialog-result{
  margin:0;
  padding:14px;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  background:rgba(15,23,42,0.02);
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  font-family:inherit;
  font-size:14px;
  line-height:1.7;
  color:#334155;
  max-height:60vh;
  overflow:auto;
}

@media (max-width: 991px){
  .ws-ai-history-grid,
  .ws-ai-dialog-meta{
    grid-template-columns:1fr;
  }
}

@media (max-width: 767px){
  .ws-ai-history-list{
    padding:12px;
  }

  .ws-ai-history-item{
    padding:14px;
  }

  .ws-ai-history-actions{
    justify-content:stretch;
  }

  .ws-ai-history-actions .gi-btn{
    width:100%;
  }

  .ws-ai-dialog{
    width:min(100vw - 16px, 980px);
    border-radius:16px;
  }

  .ws-ai-dialog-head{
    flex-direction:column;
    align-items:stretch;
  }

  .ws-ai-dialog-close{
    width:100%;
  }

  .ws-ai-dialog-body{
    padding:16px;
  }

  .ws-ai-dialog-result{
    font-size:13px;
    max-height:55vh;
  }
}

/* ---------------------------------------------------------
   8.13 PAGE: WORKSPACE — STRUCTURE FORM (canvas interativo)
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — STRUCTURE FORM (canvas interativo)
   ADICIONAR ao final de pages.css
========================================================= */

/* ── Layout principal ── */
.page-workspace-structure-form .wsf-main{
  display: grid;
  gap: 18px;
  padding-top: 18px;
  padding-bottom: 48px;
}

/* ── Header card ── */
.wsf-header-card .gi-card-header,
.wsf-header-inner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Metadados ── */
.wsf-meta-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px 16px;
  padding: 16px 18px 18px;
}

.wsf-meta-span{
  grid-column: 1 / -1;
}

.wsf-meta-check{
  display: flex;
  align-items: center;
}

.wsf-required{
  color: var(--danger);
  margin-left: 2px;
}

/* ── Painel IA ── */
.wsf-ai-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  user-select: none;
  border-bottom: none;
}

.wsf-ai-header:focus{
  outline: 2px solid rgba(22,163,74,0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

.wsf-ai-header-left{
  display: flex;
  align-items: center;
  gap: 14px;
}

.wsf-ai-icon{
  font-size: 20px;
  color: #7c3aed;
  flex: 0 0 auto;
}

.wsf-ai-chevron{
  font-size: 18px;
  color: var(--muted);
  transition: transform .2s ease;
}

.wsf-ai-body{
  padding: 0 18px 18px;
}

.wsf-ai-no-conn{
  margin: 14px 0 0;
}

.wsf-ai-form-grid{
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.wsf-ai-span{
  grid-column: 1 / -1;
}

.wsf-ai-brief-area{
  min-height: 90px;
  resize: vertical;
}

.wsf-ai-ref-hint{
  margin-bottom: 8px;
}

.wsf-ai-ref-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(15,23,42,0.02);
}

.wsf-ai-ref-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background .14s;
}

.wsf-ai-ref-item:hover{
  background: rgba(22,163,74,0.08);
}

.wsf-ai-ref-item input{
  margin: 0;
  flex: 0 0 auto;
}

.wsf-ref-pill{
  font-size: 11px;
  padding: 2px 7px;
  margin-left: auto;
}

.wsf-ai-actions-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.wsf-ai-result{
  margin-top: 14px;
  border: 1px solid rgba(124,58,237,0.22);
  border-radius: var(--r-md);
  background: rgba(124,58,237,0.04);
  overflow: hidden;
}

.wsf-ai-result-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(124,58,237,0.14);
  font-size: 13px;
  font-weight: 700;
  color: #4c1d95;
}

.wsf-ai-result-body{
  padding: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
}

/* ── Canvas card ── */
.wsf-canvas-card{
  overflow: hidden;
}

.wsf-canvas-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}

.wsf-canvas-toolbar{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.wsf-canvas-shell{
  display: flex;
  height: 540px;
  overflow: hidden;
}

/* ── Paleta ── */
.wsf-palette{
  width: 160px;
  min-width: 160px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px;
  background: rgba(15,23,42,0.02);
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,.15) transparent;
}

.wsf-palette::-webkit-scrollbar{ width: 4px; }
.wsf-palette::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.15); border-radius: 4px; }

.wsf-palette-title{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 6px 6px 2px;
}

.wsf-palette-group-title{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(15,23,42,0.38);
  padding: 8px 6px 2px;
}

.wsf-palette-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 10px;
  font-size: 13px;
  cursor: grab;
  border: 1px solid transparent;
  transition: background .14s, border-color .14s, transform .1s;
  user-select: none;
  color: var(--text);
  text-decoration: none;
}

.wsf-palette-item:hover{
  background: rgba(22,163,74,0.08);
  border-color: rgba(22,163,74,0.18);
  transform: translateX(2px);
}

.wsf-palette-item:active{
  cursor: grabbing;
  transform: scale(.96);
}

.wsf-palette-import-label{
  cursor: pointer;
}

.wsf-pnode{
  width: 22px;
  text-align: center;
  font-size: 14px;
  flex: 0 0 22px;
}

.wsf-pnode-start     { color: #16a34a; }
.wsf-pnode-end       { color: #dc2626; }
.wsf-pnode-decision  { color: #d97706; }
.wsf-pnode-checkpoint{ color: #2563eb; }
.wsf-pnode-step      { color: #475569; }
.wsf-pnode-note      { color: #7c3aed; }
.wsf-pnode-phase     { color: #0891b2; }
.wsf-pnode-import    { color: #0891b2; }

.wsf-palette-sep{
  height: 1px;
  background: var(--border);
  margin: 8px 6px;
}

.wsf-palette-phases-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Canvas viewport ── */
.wsf-canvas-wrap{
  
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background: #f1f5f9;
  background-image:
    radial-gradient(circle, rgba(15,23,42,0.14) 1px, transparent 1px);
  background-size: 24px 24px;
  cursor: default;
}

body.theme-dark .wsf-canvas-wrap{
  background-color: #0f172a;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
}

.wsf-canvas-wrap.wsf-panning{
  cursor: grabbing;
}

.wsf-canvas-viewport{
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.wsf-canvas-svg{
  position: absolute;
  top: 0; left: 0;
  width: 4000px;
  height: 3000px;
  pointer-events: none;
  overflow: visible;
}

.wsf-canvas-svg.wsf-connecting{
  pointer-events: all;
  cursor: crosshair;
}

.wsf-canvas-nodes{
  position: absolute;
  top: 0; left: 0;
  width: 4000px;
  height: 3000px;
  pointer-events: none;
}

/* ── Nodes ── */
.wsf-node{
  position: absolute;
  width: 200px;
  min-height: 74px;
  background: #ffffff;
  border: 2px solid var(--node-color, #475569);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(15,23,42,0.12), 0 0 0 0 rgba(22,163,74,0);
  cursor: grab;
  pointer-events: all;
  user-select: none;
  transition: box-shadow .18s, transform .1s;
  display: flex;
  flex-direction: column;
}

.wsf-node:hover{
  box-shadow: 0 8px 28px rgba(15,23,42,0.18), 0 0 0 3px color-mix(in srgb, var(--node-color, #475569) 22%, transparent);
}

.wsf-node-dragging{
  cursor: grabbing !important;
  transform: scale(1.03) rotate(1deg);
  z-index: 1000;
  box-shadow: 0 16px 40px rgba(15,23,42,0.22);
}

.wsf-node-type-start .wsf-node-header  { background: rgba(22,163,74,0.10);  }
.wsf-node-type-end .wsf-node-header    { background: rgba(220,38,38,0.10);  }
.wsf-node-type-decision .wsf-node-header{ background: rgba(217,119,6,0.10); }
.wsf-node-type-checkpoint .wsf-node-header{ background: rgba(37,99,235,0.10); }
.wsf-node-type-note .wsf-node-header   { background: rgba(124,58,237,0.10); }
.wsf-node-type-phase_marker .wsf-node-header{ background: rgba(8,145,178,0.10); }

.wsf-node-header{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px 7px;
  border-radius: 12px 12px 0 0;
  min-height: 38px;
}

.wsf-node-icon{
  font-size: 14px;
  color: var(--node-color);
  flex: 0 0 16px;
}

.wsf-node-label{
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.wsf-node-edit-btn{
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 7px;
  background: rgba(15,23,42,0.05);
  color: #475569;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  transition: background .14s;
  pointer-events: all;
}

.wsf-node-edit-btn:hover{
  background: rgba(22,163,74,0.14);
  border-color: rgba(22,163,74,0.30);
  color: #15803d;
}

.wsf-node-phase-tag{
  font-size: 10px;
  color: #64748b;
  padding: 2px 10px 0;
  font-style: italic;
}

.wsf-node-desc{
  font-size: 11px;
  color: #64748b;
  padding: 3px 10px 6px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsf-node-ports{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 6px;
  margin-top: auto;
  pointer-events: all;
}

.wsf-port{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--node-color, #475569);
  background: #fff;
  cursor: crosshair;
  transition: background .14s, transform .1s;
  pointer-events: all;
}

.wsf-port:hover{
  background: var(--node-color, #475569);
  transform: scale(1.3);
}

.wsf-port-out:hover{
  cursor: crosshair;
}

/* ── Links SVG ── */
.wsf-link-path{
  fill: none;
  stroke: #94a3b8;
  stroke-width: 2;
  marker-end: url(#wsf-arrow);
  transition: stroke .14s;
}

.wsf-link-group:hover .wsf-link-path{
  stroke: #16a34a;
  stroke-width: 2.5;
}

.wsf-link-hit{
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  cursor: pointer;
  pointer-events: stroke;
}

.wsf-link-temp{
  fill: none;
  stroke: #16a34a;
  stroke-width: 2;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

.wsf-link-label-text{
  font-size: 11px;
  fill: #64748b;
  text-anchor: middle;
  pointer-events: none;
  font-family: inherit;
}

.wsf-arrow-marker{
  fill: #94a3b8;
}

.wsf-arrow-marker-hover{
  fill: #16a34a;
}

.wsf-canvas-paste-hint{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(22,163,74,0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  padding: 10px 18px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(22,163,74,0.28);
  z-index: 20;
  max-width: calc(100% - 32px);
}

@media (max-width: 767px){
  .wsf-canvas-paste-hint{
    bottom: 14px;
    max-width: calc(100% - 20px);
    padding: 9px 14px;
    font-size: 12px;
    white-space: normal;
    text-align: center;
    border-radius: 16px;
  }
}

@keyframes wsf-paste-pop{
  0%   { opacity:0; transform: translateX(-50%) translateY(8px) scale(.92); }
  15%  { opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
  80%  { opacity:1; }
  100% { opacity:0; }
}

.wsf-paste-anim{
  animation: wsf-paste-pop 2.2s ease forwards;
}

/* ── Fases ── */
.wsf-phases-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.wsf-phases-list{
  padding: 12px 18px 16px;
  display: grid;
  gap: 12px;
}

.wsf-phases-empty{
  padding: 4px 0;
}

.wsf-phase-row{
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  background: rgba(15,23,42,0.02);
}

.wsf-phase-row-fields{
  display: grid;
  grid-template-columns: minmax(120px,.7fr) minmax(160px,1fr) minmax(140px,.7fr) auto;
  gap: 10px;
  align-items: end;
}

.wsf-phase-actions-col{
  display: flex;
  align-items: flex-end;
}

/* ── JSON ── */
.wsf-json-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.wsf-json-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wsf-json-body{
  padding: 12px 18px 16px;
}

.wsf-json-textarea{
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  font-size: 12px;
  min-height: 240px;
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* ── Salvar bar ── */
.wsf-save-bar{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 4px;
  padding-bottom: 8px;
}

/* ── Modais ── */
.wsf-node-dialog,
.wsf-link-dialog{
  width: min(520px, calc(100vw - 24px));
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 24px 70px rgba(15,23,42,0.22);
}

.wsf-node-dialog::backdrop,
.wsf-link-dialog::backdrop{
  background: rgba(15,23,42,0.52);
}

.wsf-node-dialog-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(15,23,42,0.04) 0%, transparent 100%);
}

.wsf-node-dialog-head h3{
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.wsf-node-dialog-body{
  padding: 16px 18px;
}

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

.wsf-nd-span{
  grid-column: 1 / -1;
}

.wsf-node-dialog-foot{
  display: flex;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(15,23,42,0.08);
  flex-wrap: wrap;
}

.wsf-btn-danger{
  color: var(--danger) !important;
  border-color: rgba(239,68,68,0.28) !important;
  margin-left: auto;
}

.wsf-btn-danger:hover{
  background: rgba(239,68,68,0.08) !important;
}

/* ── Checkline ── */
.gi-checkline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 4px;
}

/* ── Responsivo ── */
@media (max-width: 1024px){
  .wsf-canvas-shell{
    height: 480px;
  }
}

@media (max-width: 768px){
  .wsf-meta-grid{
    grid-template-columns: 1fr;
  }

  .wsf-canvas-shell{
    flex-direction: column;
    height: auto;
  }

  .wsf-palette{
    width: 100%;
    min-width: 0;
    height: 90px;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px;
    align-items: center;
    gap: 6px;
  }

  .wsf-palette-title,
  .wsf-palette-group-title,
  .wsf-palette-sep{
    display: none;
  }

  .wsf-palette-item{
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .wsf-palette-phases-list{
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .wsf-canvas-wrap{
    height: 380px;
  }

  .wsf-phase-row-fields{
    grid-template-columns: 1fr 1fr;
  }

  .wsf-phase-actions-col{
    grid-column: 1 / -1;
  }

  .wsf-ai-ref-grid{
    grid-template-columns: 1fr 1fr;
    max-height: 220px;
  }

  .wsf-node-dialog-grid{
    grid-template-columns: 1fr;
  }

  .wsf-canvas-header{
    flex-direction: column;
    gap: 10px;
  }

  .wsf-canvas-toolbar{
    width: 100%;
    justify-content: flex-end;
  }

  .wsf-save-bar{
    flex-direction: column;
  }

  .wsf-save-bar .gi-btn{
    width: 100%;
  }

  .wsf-json-header{
    flex-direction: column;
    align-items: flex-start;
  }

  .wsf-ai-actions-row{
    flex-direction: column;
    align-items: stretch;
  }

  .wsf-ai-actions-row .gi-btn{
    width: 100%;
  }
}

@media (max-width: 480px){
  .wsf-canvas-wrap{
    height: 300px;
  }
}

/* ---------------------------------------------------------
   8.14 PAGE: WORKSPACE — STRUCTURE FORM | AJUSTES V2
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — STRUCTURE FORM | AJUSTES V2
========================================================= */

.page-workspace-structure-form .gi-container.gi-container-fluid.wsf-main{
  max-width: 100% !important;
  width: 100% !important;
  padding: 18px 20px 44px !important;
  box-sizing: border-box;
}

.page-workspace-structure-form .ws-page-card{
  width: 100%;
  min-width: 0;
}

.page-workspace-structure-form .wsf-canvas-card{
  overflow: hidden;
}

.page-workspace-structure-form .wsf-canvas-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.page-workspace-structure-form .wsf-canvas-toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-workspace-structure-form .wsf-canvas-shell{
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  min-height: 68vh;
}

.page-workspace-structure-form .wsf-palette{
  border-right: 1px solid var(--border);
  padding: 12px 10px;
  min-width: 0;
  overflow-y: auto;
}

.page-workspace-structure-form .wsf-canvas-wrap{
  min-width: 0;
  min-height: 68vh;
  height: clamp(560px, 72vh, 920px);
}

.page-workspace-structure-form .wsf-canvas-viewport{
  width: 6400px;
  height: 4200px;
}

.page-workspace-structure-form .wsf-canvas-svg,
.page-workspace-structure-form .wsf-canvas-nodes{
  width: 6400px;
  height: 4200px;
}

.page-workspace-structure-form .wsf-phases-card{
  order: 10;
}

.page-workspace-structure-form .wsf-phases-list{
  padding: 14px 18px 18px;
}

.page-workspace-structure-form .wsf-phase-row{
  background: var(--card);
}

.page-workspace-structure-form .wsf-json-toggle{
  cursor: pointer;
  user-select: none;
}

.page-workspace-structure-form .wsf-json-toggle:focus{
  outline: 2px solid rgba(22,163,74,.35);
  outline-offset: 2px;
}

.page-workspace-structure-form .wsf-json-head-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-workspace-structure-form .wsf-json-chevron{
  font-size: 18px;
  color: var(--muted);
  transition: transform .18s ease;
}

.page-workspace-structure-form .wsf-json-body.is-hidden,
.page-workspace-structure-form .wsf-ai-body.is-hidden{
  display: none;
}

.page-workspace-structure-form .wsf-json-textarea{
  min-height: 280px;
}

.page-workspace-structure-form .wsf-node{
  z-index: 2;
}

.page-workspace-structure-form .wsf-link-group{
  pointer-events: all;
}

.page-workspace-structure-form .wsf-canvas-card:fullscreen{
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border: 0;
  background: var(--card);
}

.page-workspace-structure-form .wsf-canvas-card:fullscreen .wsf-canvas-shell{
  min-height: calc(100vh - 78px);
  height: calc(100vh - 78px);
}

.page-workspace-structure-form .wsf-canvas-card:fullscreen .wsf-canvas-wrap{
  min-height: 100%;
  height: 100%;
}

@media (min-width: 1200px){
  .page-workspace-structure-form .gi-container.gi-container-fluid.wsf-main{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .page-workspace-structure-form .wsf-meta-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-workspace-structure-form .wsf-meta-span{
    grid-column: 1 / -1;
  }

  .page-workspace-structure-form .wsf-main{
    gap: 20px;
  }

  .page-workspace-structure-form .wsf-phases-card{
    width: 100%;
  }

  .page-workspace-structure-form .wsf-phase-row-fields{
    grid-template-columns: minmax(180px,.9fr) minmax(260px,1.4fr) minmax(180px,.8fr) auto;
  }
}

@media (max-width: 1023px){
  .page-workspace-structure-form .gi-container.gi-container-fluid.wsf-main{
    padding: 14px 14px 34px !important;
  }

  .page-workspace-structure-form .wsf-meta-grid{
    grid-template-columns: 1fr;
  }

  .page-workspace-structure-form .wsf-canvas-shell{
    grid-template-columns: 1fr;
  }

  .page-workspace-structure-form .wsf-palette{
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: none;
  }

  .page-workspace-structure-form .wsf-canvas-wrap{
    min-height: 58vh;
    height: 58vh;
  }

  .page-workspace-structure-form .wsf-phase-row-fields{
    grid-template-columns: 1fr;
  }

  .page-workspace-structure-form .wsf-json-actions{
    width: 100%;
  }

  .page-workspace-structure-form .wsf-json-actions .gi-btn{
    flex: 1 1 auto;
  }
}
/* ---------------------------------------------------------
   8.15 PAGE: WORKSPACE — PROGRESS BAR (projects list)
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — PROGRESS BAR (projects list)
   ADICIONAR ao final do bloco do módulo Workspace no pages.css
========================================================= */

.ws-progress{
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ws-progress-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ws-progress-label{
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ws-progress-value{
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

.ws-progress-bar{
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148,163,184,0.22);
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.08);
}

.ws-progress-fill{
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width .35s ease;
  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
}

.ws-progress.is-low .ws-progress-fill{
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.ws-progress.is-medium .ws-progress-fill{
  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
}

.ws-progress.is-high .ws-progress-fill{
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.ws-progress.is-complete .ws-progress-fill{
  background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
}

.ws-progress-sub{
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.ws-progress-cell{
  min-width: 180px;
}

.ws-mobile-progress{
  margin-top: 4px;
}

@media (max-width: 991px){
  .ws-progress-cell{
    min-width: 0;
  }
}

@media (max-width: 767px){
  .ws-progress{
    gap: 7px;
  }

  .ws-progress-head{
    gap: 8px;
  }

  .ws-progress-label{
    font-size: 11px;
  }

  .ws-progress-value{
    font-size: 12px;
  }

  .ws-progress-bar{
    height: 9px;
  }

  .ws-progress-sub{
    font-size: 11px;
  }
}
/* ---------------------------------------------------------
   8.16 PAGE: WORKSPACE — ATIVIDADE | histórico, updates e logs
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — ATIVIDADE | histórico, updates e logs
   ADICIONAR ao final do bloco do módulo Workspace no pages.css
========================================================= */

.ws-activity-history{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.ws-activity-history-card{
  width:100%;
}

.ws-activity-history-body{
  padding:16px;
  display:grid;
  gap:16px;
}

.ws-activity-update-form{
  display:grid;
  gap:12px;
}

.ws-activity-update-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.ws-activity-timeline{
  display:grid;
  gap:12px;
}

.ws-activity-item{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  background:#fff;
  padding:14px;
  display:grid;
  gap:8px;
}

.ws-activity-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.ws-activity-item-title{
  font-size:14px;
  font-weight:700;
  color:#0f172a;
}

.ws-activity-item-time{
  font-size:11px;
  color:#64748b;
  white-space:nowrap;
}

.ws-activity-item-text{
  font-size:14px;
  line-height:1.55;
  color:#334155;
  white-space:pre-wrap;
  word-break:break-word;
}

.ws-activity-log-list{
  display:grid;
  gap:10px;
}

.ws-activity-log-item{
  border-left:3px solid rgba(37,99,235,0.24);
  background:rgba(15,23,42,0.02);
  border-radius:10px;
  padding:10px 12px;
  display:grid;
  gap:4px;
}

.ws-activity-log-message{
  font-size:13px;
  color:#334155;
  line-height:1.45;
}

.ws-activity-log-time{
  font-size:11px;
  color:#64748b;
}

.ws-kanban-modal{
  width:min(920px, calc(100vw - 24px));
  max-width:920px;
  border:0;
  border-radius:18px;
  padding:0;
  background:#fff;
  color:#0f172a;
  box-shadow:0 24px 70px rgba(15,23,42,0.22);
  overflow-x:hidden;
}

.ws-kanban-modal::backdrop{
  background:rgba(15,23,42,0.56);
}

.ws-kanban-modal-head{
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(15,23,42,0.08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.ws-kanban-modal-body{
  padding:18px 20px 20px;
  display:grid;
  gap:16px;
  overflow-x:hidden;
}

.ws-kanban-modal-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 16px;
}

.ws-kanban-modal-span{
  grid-column:1 / -1;
}

.ws-kanban-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 767px){
  .ws-activity-update-actions,
  .ws-kanban-modal-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .ws-activity-update-actions .gi-btn,
  .ws-kanban-modal-actions .gi-btn{
    width:100%;
  }

  .ws-kanban-modal{
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    border-radius: 14px;
    margin: 8px auto;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .ws-kanban-modal-head{
    padding: 14px 16px 12px;
    overflow: hidden;
  }

  .ws-kanban-modal-body{
    padding: 14px 16px 16px;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Todos os containers internos respeitam a largura */
  .ws-kanban-modal *{
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Exceto elementos que precisam de largura específica */
  .ws-kanban-modal input,
  .ws-kanban-modal textarea,
  .ws-kanban-modal select{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Bloco de atualizações: sem altura limitada, flui normalmente */
  .ws-activity-timeline{
    max-height: none;
    overflow-y: visible;
  }

  /* Logs: sem altura limitada */
  .ws-activity-log-list{
    max-height: none;
    overflow-y: visible;
  }

  /* Cards de histórico: padding menor */
  .ws-activity-history-body{
    padding: 12px;
  }

  .ws-activity-item{
    padding: 12px;
  }

  .ws-activity-item-text{
    font-size: 13px;
  }

  .ws-kanban-modal-grid{
    grid-template-columns:1fr;
  }

  /* Garantir que inputs não transbordem no grid */
  .ws-kanban-modal-grid > div{
    min-width: 0;
  }

  .ws-kanban-modal-grid .gi-input{
    width: 100%;
    box-sizing: border-box;
  }

  .ws-activity-item-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .ws-activity-item-time{
    white-space:normal;
  }
}


/* ---------------------------------------------------------
   8.17 PAGE: WORKSPACE — CHECKLISTS EM ATIVIDADES
--------------------------------------------------------- */

/* ── Kanban modal: item de checklist ──────────────────── */
.ws-modal-checklist-item{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.ws-modal-checklist-item-label{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  flex:1 1 0% !important;
  min-width:0 !important;
  max-width:100% !important;
  align-items:flex-start !important;
  cursor:pointer;
  overflow:hidden;
}

.ws-modal-checklist-item-label input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  flex-shrink:0 !important;
  margin:0 !important;
  margin-top:6px !important;
  accent-color:#16a34a;
}

.ws-modal-checklist-item-label .ws-cl-item-label-input{
  flex:1 1 0% !important;
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
  resize:none !important;
  overflow-wrap:break-word !important;
  word-break:break-word !important;
  box-sizing:border-box !important;
}

/* Garantir que o item de checklist da atividade também não transborde */
.ws-checklist-edit-item{
  overflow:hidden;
  max-width:100% !important;
  box-sizing:border-box !important;
}

.ws-checklist-edit-item-main{
  overflow:hidden;
  min-width:0 !important;
}

@media (max-width: 767px){
  /* Checklist: garantir que não transborde */
  .ws-modal-checklist-item,
  .ws-checklist-edit-item{
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .ws-modal-checklist-item-label .ws-cl-item-label-input,
  .ws-checklist-edit-item-main .ws-checklist-item-input{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Badge de ID: menor em mobile */
  .ws-checklist-item-seq{
    font-size: 9px;
    min-width: 18px;
    padding: 0 3px;
  }

  /* Toolbar do checklist no modal: botão "Excluir lista" não empurra */
  .ws-checklist-editor-toolbar{
    flex-wrap: wrap;
  }

  .ws-checklist-editor-toolbar .gi-btn{
    flex-shrink: 1;
    min-width: 0;
  }

  /* Garantir que o collapse não transborde */
  .ws-checklist-collapse,
  .ws-modal-checklist-block{
    max-width: 100%;
    overflow: hidden;
  }
}

.ws-checklist-editor,
.ws-checklist-section-body{
  display:grid;
  gap:14px;
}

.ws-checklist-editor{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  background:#fff;
  padding:16px;
}

.ws-checklist-editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.ws-checklist-editor-add{
  display:grid;
  gap:10px;
}

.ws-checklist-editor-add-row,
.ws-checklist-item-add-row,
.ws-checklist-editor-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
}

.ws-checklist-editor-add-row .gi-input,
.ws-checklist-item-add-row .gi-input,
.ws-checklist-editor-toolbar .gi-input{
  flex:1 1 auto;
  min-width:0;
}

.ws-checklist-editor-list{
  display:grid;
  gap:14px;
}

.ws-checklist-edit-block{
  display:grid;
  gap:0;
}

.ws-checklist-collapse{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  background:#fafafa;
  overflow:hidden;
  min-width:0;
  max-width:100%;
}

.ws-checklist-collapse[open]{
  background:#fff;
}

.ws-checklist-collapse-summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ws-checklist-collapse-summary::-webkit-details-marker{
  display:none;
}

.ws-checklist-collapse-title-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  width:100%;
  min-width:0;
}

.ws-checklist-collapse-title-id{
  flex-shrink:0;
  font-size:13px;
  font-weight:800;
  color:#94a3b8;
  min-width:18px;
}

.ws-checklist-collapse-title{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
  min-width:0;
}

.ws-checklist-collapse-progress-label{
  font-size:12px;
  font-weight:700;
  color:#64748b;
  white-space:nowrap;
  flex-shrink:0;
  margin-left:auto;
}

.ws-checklist-collapse-body{
  border-top:1px solid rgba(15,23,42,0.06);
  padding:12px 14px 14px;
  display:grid;
  gap:12px;
  overflow-x:hidden;
  min-width:0;
}

.ws-checklist-collapse-progress{
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(148,163,184,0.18);
  overflow:hidden;
}

.ws-checklist-collapse-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  transition:width .22s ease;
}

.ws-checklist-edit-items,
.ws-checklist-collapse-items,
.ws-modal-checklist-items{
  display:grid;
  gap:12px;
  overflow-x:hidden;
  min-width:0;
}

.ws-checklist-edit-item{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:flex-start !important;
  width:100% !important;
}

/* Badge de ID sequencial do item */
.ws-checklist-item-seq{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  min-width:20px;
  height:20px;
  padding:0 4px;
  border-radius:6px;
  background:rgba(15,23,42,0.07);
  color:#64748b;
  font-size:10px;
  font-weight:700;
  line-height:1;
  margin-top:9px;
  user-select:none;
}

/* Botão × de excluir item */
.ws-checklist-item-remove-icon{
  flex-shrink:0 !important;
  align-self:flex-start !important;
  width:28px !important;
  min-width:28px !important;
  height:28px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:16px !important;
  line-height:1 !important;
  border:1px solid rgba(239,68,68,0.30) !important;
  color:#dc2626 !important;
  background:#fff !important;
  border-radius:8px !important;
  margin-top:4px;
}

.ws-checklist-item-remove-icon:hover{
  background:rgba(239,68,68,0.08) !important;
  border-color:rgba(239,68,68,0.50) !important;
  color:#b91c1c !important;
}

.ws-checklist-edit-item-main{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  align-items:flex-start !important;
}

/* Forçar que label não quebre */
label.ws-checklist-edit-item-main{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
}

/* Suporte a subgrid (navegadores modernos) */
@supports (grid-template-columns: subgrid) {
  .ws-checklist-edit-item-main{
    grid-template-columns:subgrid !important;
    grid-column:1 / -1 !important;
  }
}

.ws-checklist-edit-item-main input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  accent-color:#16a34a;
  flex-shrink:0 !important;
  margin:0 !important;
  display:inline-block !important;
}

.ws-checklist-item-input{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  resize:none !important;
  overflow-wrap:break-word !important;
  word-wrap:break-word !important;
  box-sizing:border-box !important;
  flex:1 1 auto !important;
  display:inline-block !important;
}

.ws-checklist-edit-item .ws-checklist-item-remove,
.ws-checklist-edit-item .gi-btn{
  white-space:nowrap !important;
  flex-shrink:0 !important;
  align-self:flex-start !important;
  display:inline-block !important;
}

.ws-checklist-item-input{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  resize:none !important;
  overflow-wrap:break-word !important;
  word-wrap:break-word !important;
  box-sizing:border-box !important;
}

.ws-checklist-edit-item textarea,
.ws-checklist-item-input textarea{
  resize:none !important;
  overflow-wrap:break-word;
  word-wrap:break-word;
  white-space:pre-wrap;
}

.ws-checklist-edit-item input.ws-checklist-item-input,
.ws-checklist-edit-item-main input.ws-checklist-item-input,
.ws-checklist-edit-item-main .gi-input.ws-checklist-item-input{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

.ws-checklist-edit-item .ws-checklist-item-remove,
.ws-checklist-edit-item .gi-btn{
  white-space:nowrap !important;
  flex-shrink:0 !important;
  align-self:flex-start !important;
}

.ws-checklist-edit-item-main input[type="checkbox"]{
  align-self:flex-start !important;
  margin-top:2px !important;
}

.ws-checklist-edit-item-main .ws-checklist-item-input,
.ws-checklist-edit-item-main .gi-input{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:100% !important;
}

.ws-checklist-collapse-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  color:#334155;
  line-height:1.45;
}

.ws-checklist-collapse-item-mark{
  flex-shrink:0;
  color:#16a34a;
  font-weight:800;
  line-height:1.3;
}

.ws-checklist-collapse-item.is-checked .ws-checklist-collapse-item-text{
  text-decoration:line-through;
  color:#94a3b8;
}

.ws-checklist-section{
  margin-top:18px;
}

.ws-activities-table{
  table-layout:fixed;
}

@media (max-width: 767px){
  .ws-checklist-editor{
    padding:14px;
  }

  .ws-checklist-editor-add-row,
  .ws-checklist-item-add-row,
  .ws-checklist-editor-toolbar{
    flex-wrap:wrap;
  }

  .ws-checklist-editor-add-row .gi-btn,
  .ws-checklist-item-add-row .gi-btn,
  .ws-checklist-editor-toolbar .gi-btn{
    width:100%;
  }

  .ws-checklist-edit-item{
    flex-direction:column !important;
    gap:10px !important;
  }

  .ws-checklist-edit-item-main{
    width:100% !important;
  }

  .ws-checklist-edit-item .gi-btn{
    width:100%;
  }

  .ws-checklist-collapse-summary{
    align-items:flex-start;
  }

  .ws-checklist-collapse-title-wrap{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ---------------------------------------------------------
   8.18-8.19 PAGE: WORKSPACE — LEMBRETES | CALENDÁRIO
--------------------------------------------------------- */
/* (Componentes Calendar em components.css) */

/* ---------------------------------------------------------
   8.20 PAGE: WORKSPACE — LEMBRETES | AJUSTES
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — LEMBRETES | AJUSTES
   Adicionar ao final do bloco atual da página
========================================================= */

.ws-reminders-year-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:32px !important;
}

.ws-reminders-year-month-card{
  min-width:0;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.ws-reminders-year-month-title{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-decoration:none;
  font-size:16px;
  font-weight:800;
  color:#0f172a;
  padding:0;
  margin:0;
}

.ws-reminders-year-dow-row{
  display:grid !important;
  grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
  gap:4px !important;
  padding:0;
}

.ws-reminders-year-dow{
  text-align:center;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  color:#64748b;
  padding:4px 0;
  letter-spacing:.02em;
}

.ws-reminders-year-month-grid{
  display:grid !important;
  grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
  gap:4px !important;
  padding:0;
}

.ws-reminders-year-day{
  min-height:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:11px;
  font-weight:600;
  color:#334155;
  background:rgba(15,23,42,0.04);
  border-radius:4px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, transform .12s ease;
  position:relative;
}

.ws-reminders-year-day:hover{
  background:rgba(22,163,74,0.12);
  color:#0f172a;
  transform:scale(1.08);
}

.ws-reminders-year-day.is-other-month{
  color:#cbd5e1;
  background:transparent;
}

.ws-reminders-year-day.is-today{
  background:#2563eb;
  color:#fff;
  font-weight:800;
}

.ws-reminders-year-day.is-holiday{
  background:rgba(239,68,68,0.15);
  color:#dc2626;
  font-weight:700;
}

.ws-reminders-year-day.has-items{
  background:rgba(245,158,11,0.08);
  color:#0f172a;
  font-weight:800;
  border:1px solid rgba(245,158,11,0.35);
}

.ws-reminders-year-day.has-items:hover{
  background:rgba(245,158,11,0.15);
  border-color:rgba(245,158,11,0.5);
}

.ws-reminders-year-day.is-today.has-items{
  background:#2563eb;
  color:#fff;
  border:1px solid rgba(251,191,36,0.6);
  box-shadow:0 0 0 1px rgba(251,191,36,0.2);
}

.ws-reminders-year-day.has-items::after{
  content:'';
  position:absolute;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  height:4px;
  border-radius:999px;
  background:#f59e0b;
}

/* ── Dia com lembrete concluído (done) ── */
.ws-reminders-year-day.has-done{
  background:rgba(34,197,94,0.08);
  border:1px solid rgba(34,197,94,0.45);
  color:#166534;
  font-weight:800;
}

.ws-reminders-year-day.has-done:hover{
  background:rgba(34,197,94,0.15);
  border-color:rgba(34,197,94,0.65);
}

.ws-reminders-year-day.has-done::after{
  background:#22c55e;
}

.ws-reminders-year-day.is-today.has-done{
  background:#2563eb;
  color:#fff;
  border:1px solid rgba(34,197,94,0.8);
  box-shadow:0 0 0 1px rgba(34,197,94,0.3);
}

@media (max-width: 1279px){
  .ws-reminders-year-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:28px !important;
  }
}

@media (max-width: 991px){
  .ws-reminders-year-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:24px !important;
  }
  
  .ws-reminders-year-month-title{
    font-size:15px;
  }
  
  .ws-reminders-year-day{
    min-height:28px;
    height:28px;
    font-size:10px;
  }
}

@media (max-width: 767px){
  .ws-reminders-year-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  
  .ws-reminders-year-month-title{
    font-size:14px;
  }
  
  .ws-reminders-year-dow{
    font-size:9px;
    padding:3px 0;
  }
  
  .ws-reminders-year-month-grid{
    gap:3px !important;
  }

  .ws-reminders-year-day{
    min-height:26px;
    height:26px;
    font-size:10px;
    border-radius:3px;
  }
}

/* ---------------------------------------------------------
   8.21 PAGE: WORKSPACE — LEMBRETES — LISTA (workspace_reminders)
--------------------------------------------------------- */

/* =========================================================
   PAGE: WORKSPACE — LEMBRETES — LISTA (workspace_reminders)
   Adicionar ao pages.css após o bloco de recorrência
========================================================= */

/* ── Filtro colapsável ─────────────────────────────────── */
.ws-filter-card {
  padding: 0;
  overflow: hidden;
}

.ws-filter-summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card);
  transition: background 0.15s ease;
}

.ws-filter-summary::-webkit-details-marker {
  display: none;
}

.ws-filter-summary:hover {
  background: rgba(15, 23, 42, 0.03);
}

.ws-filter-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ws-filter-chevron {
  font-size: 18px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.ws-filter-card[open] .ws-filter-chevron {
  transform: rotate(180deg);
}

.ws-filter-body {
  padding: 0 18px 18px;
}

/* ── Botão de toggle de ocorrências ──────────────────────── */
.ws-reminder-toggle-btn{
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(148,163,184,.30);
  border-radius: 10px;
  background: #fff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: all .18s ease;
}

.ws-reminder-toggle-btn:hover{
  border-color: rgba(37,99,235,.35);
  color: #1d4ed8;
  background: #f8fbff;
}

.ws-reminder-toggle-btn.is-expanded{
  border-color: rgba(37,99,235,.45);
  color: #1d4ed8;
  background: rgba(37,99,235,.08);
}

.ws-reminder-toggle-btn .ws-expand-chevron{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease;
  line-height: 1;
}

.ws-reminder-toggle-btn.is-expanded .ws-expand-chevron{
  transform: rotate(180deg);
}

.ws-reminder-toggle-placeholder{
  display: inline-block;
  width: 34px;
  min-width: 34px;
  height: 34px;
}

/* ── Wrapper do nome do lembrete ──────────────────────── */
.ws-reminder-name-wrap{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* ── Badge de recorrência ──────────────────────── */
.ws-rec-badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(139,92,246,0.10);
  border: 1px solid rgba(139,92,246,0.25);
  color: #7c3aed;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  margin-left: 6px;
}

/* ── Painel de ocorrências ──────────────────────── */
.ws-occs-panel-row{
  background: #f8fafc;
}

.ws-occs-panel-cell{
  padding: 0 !important;
}

.ws-occs-panel{
  padding: 18px;
  display: grid;
  gap: 14px;
}

.ws-occs-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.ws-acts-panel-title-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.ws-acts-panel-title-wrap svg{
  flex-shrink: 0;
  color: #94a3b8;
}

.ws-acts-panel-btns{
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-acts-inner-table{
  margin: 0;
}

/* ── Botões com ícone ──────────────────────── */
.gi-btn-icon{
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gi-btn-icon svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.gi-btn-danger{
  background: #fff;
  border-color: rgba(239,68,68,0.30);
  color: #dc2626;
}

.gi-btn-danger:hover{
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.45);
  color: #b91c1c;
}

/* ── Responsivo ──────────────────────── */
@media (max-width: 767px){
  .ws-reminder-toggle-btn{
    width: 32px;
    min-width: 32px;
    height: 32px;
  }
  
  .ws-reminder-toggle-placeholder{
    width: 32px;
    min-width: 32px;
    height: 32px;
  }
  
  .ws-occs-panel{
    padding: 14px;
  }
}


/* ── Lista de lembretes ─────────────────────────────────── */
.ws-reminders-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.ws-reminders-week-card{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  padding:10px;
  display:grid;
  gap:6px;
  cursor:pointer;
  transition:border-color .14s ease, box-shadow .14s ease;
}

.ws-reminders-week-card:hover{
  border-color:rgba(22,163,74,0.26);
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
}

.ws-reminders-week-card.s-scheduled{
  background:rgba(245,158,11,0.06);
}

.ws-reminders-week-card.s-sent{
  background:rgba(34,197,94,0.06);
}

.ws-reminders-week-card.s-dismissed{
  background:rgba(59,130,246,0.06);
}

.ws-reminders-week-card.s-cancelled{
  background:rgba(239,68,68,0.06);
}

.ws-reminders-week-card-time{
  font-size:12px;
  font-weight:800;
  color:#0f172a;
}

.ws-reminders-week-card-title{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  line-height:1.4;
}

.ws-reminders-week-card-meta{
  font-size:12px;
  color:#64748b;
  line-height:1.4;
}

.ws-reminders-day-view{
  display:grid;
  gap:14px;
}

.ws-reminders-day-view-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.ws-reminders-day-list{
  display:grid;
  gap:12px;
}

.ws-reminders-day-card{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  background:#fff;
  padding:14px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:flex-start;
  cursor:pointer;
  transition:border-color .14s ease, box-shadow .14s ease;
}

.ws-reminders-day-card:hover{
  border-color:rgba(22,163,74,0.26);
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
}

.ws-reminders-day-card.s-scheduled{
  background:rgba(245,158,11,0.04);
}

.ws-reminders-day-card.s-sent{
  background:rgba(34,197,94,0.04);
}

.ws-reminders-day-card.s-dismissed{
  background:rgba(59,130,246,0.04);
}

.ws-reminders-day-card.s-cancelled{
  background:rgba(239,68,68,0.04);
}

.ws-reminders-day-card.s-done{
  background:rgba(34,197,94,0.06);
  border-color:rgba(34,197,94,0.35);
}

.ws-reminders-day-card-main{
  min-width:0;
  display:grid;
  gap:8px;
}

.ws-reminders-day-card-title{
  font-size:15px;
  font-weight:800;
  color:#0f172a;
  line-height:1.4;
}

.ws-reminders-day-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:13px;
  color:#64748b;
}

.ws-reminders-day-card-desc{
  font-size:13px;
  color:#334155;
  line-height:1.55;
  word-break:break-word;
}

.ws-reminders-day-card-side{
  display:grid;
  gap:8px;
  justify-items:end;
}

.ws-reminders-empty-state{
  min-height:90px;
}

.ws-reminders-legend{
  padding:0 16px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.ws-reminders-legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#475569;
}

.ws-reminders-legend-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
}

.ws-reminders-legend-dot.is-scheduled{ background:#f59e0b; }
.ws-reminders-legend-dot.is-sent{ background:#22c55e; }
.ws-reminders-legend-dot.is-dismissed{ background:#3b82f6; }
.ws-reminders-legend-dot.is-cancelled{ background:#ef4444; }

.ws-reminders-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.52);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:160;
}

.ws-reminders-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

.ws-reminders-detail{
  position:fixed;
  top:0;
  right:0;
  width:min(560px, calc(100vw - 16px));
  height:100dvh;
  height:100svh;
  height:100vh;
  background:#fff;
  box-shadow:-18px 0 42px rgba(15,23,42,0.18);
  transform:translateX(104%);
  transition:transform .2s ease;
  z-index:170;
  display:flex;
  flex-direction:column;
}

.ws-reminders-detail.is-open{
  transform:translateX(0);
}

.ws-reminders-detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px;
  border-bottom:1px solid rgba(15,23,42,0.08);
}

.ws-reminders-detail-title{
  font-size:18px;
  font-weight:800;
  color:#0f172a;
}

.ws-reminders-detail-close{
  width:40px;
  height:40px;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.ws-reminders-detail-body{
  padding:18px;
  overflow:auto;
  display:grid;
  gap:16px;
}

.ws-reminders-detail-block{
  display:grid;
  gap:10px;
}

.ws-reminders-detail-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

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

.ws-reminders-detail-item{
  display:grid;
  gap:6px;
}

.ws-reminders-detail-item strong{
  font-size:12px;
  font-weight:800;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.ws-reminders-detail-item span{
  font-size:14px;
  color:#0f172a;
  line-height:1.45;
}

.ws-reminders-detail-item-full{
  grid-column:1 / -1;
}

.ws-reminders-detail-text{
  font-size:14px;
  line-height:1.65;
  color:#334155;
  white-space:pre-wrap;
  word-break:break-word;
}

/* ── Checkbox de conclusão ──────────────────────── */
.ws-col-checkbox{
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

.ws-reminder-done-checkbox{
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #22c55e;
}

.ws-reminder-done-checkbox:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.ws-col-actions{
  width: 1%;
  white-space: nowrap;
}

.ws-reminders-detail-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.ws-reminders-detail-list-card{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:10px;
  cursor:pointer;
  transition:border-color .14s ease, box-shadow .14s ease;
}

.ws-reminders-detail-list-card:hover{
  border-color:rgba(22,163,74,0.26);
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
}

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

.ws-reminders-detail-list-title{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
}

.ws-reminders-detail-list-time{
  font-size:12px;
  color:#64748b;
  white-space:nowrap;
}

.ws-reminders-detail-list-meta{
  display:grid;
  gap:6px;
  font-size:13px;
  color:#475569;
}

@media (max-width: 1279px){
  .ws-reminders-week-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 991px){
  .ws-reminders-month-grid{
    gap:8px;
  }

  .ws-reminders-day{
    min-height:120px;
    padding:8px;
  }

  .ws-reminders-week-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ws-reminders-detail-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 767px){
  .ws-reminders-topbar{
    padding:0 14px 14px;
  }

  .ws-reminders-topbar-main{
    display:grid;
    grid-template-columns:1fr;
  }

  .ws-reminders-view-toggle{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }

  .ws-reminders-view-btn{
    min-width:0;
    width:100%;
  }

  .ws-reminders-calendar-head{
    padding:14px 14px 10px;
  }

  .ws-reminders-calendar-body{
    padding:12px;
  }

  .ws-reminders-month-grid{
    grid-template-columns:1fr;
  }

  .ws-reminders-dow{
    display:none;
  }

  .ws-reminders-day{
    min-height:auto;
  }

  .ws-reminders-week-grid{
    grid-template-columns:1fr;
  }

  .ws-reminders-day-card{
    grid-template-columns:1fr;
  }

  .ws-reminders-day-card-side{
    justify-items:start;
  }

  .ws-reminders-legend{
    padding:0 12px 14px;
  }

  .ws-reminders-detail{
    width:100vw;
    max-width:none;
  }

  .ws-reminders-detail-list-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .ws-reminders-detail-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .ws-reminders-detail-actions .gi-btn{
    width:100%;
  }
}

/* ---------------------------------------------------------
   8.19 PAGE: WORKSPACE - LEMBRETES | CALENDÁRIO
--------------------------------------------------------- */
/* (Componentes Calendar já extraídos para components.css) */

/* ---------------------------------------------------------
   8.20 PAGE: WORKSPACE — LEMBRETES | AJUSTES
--------------------------------------------------------- */

.ws-clf-tcard {
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  user-select: none;
}
.ws-clf-tcard:hover {
  border-color: rgba(22,163,74,0.30);
  background: rgba(22,163,74,0.03);
  box-shadow: 0 4px 12px rgba(22,163,74,0.07);
}
.ws-clf-tcard.is-selected {
  border-color: #16a34a;
  background: rgba(22,163,74,0.06);
  box-shadow: 0 4px 14px rgba(22,163,74,0.12);
}

.ws-clf-tcard-checkbox {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}

.ws-clf-tcard-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(15,23,42,0.05);
  color: #475569;
  transition: background 0.14s ease, color 0.14s ease;
}
.ws-clf-tcard-icon svg { width: 16px; height: 16px; display: block; }
.ws-clf-tcard.is-selected .ws-clf-tcard-icon { background: rgba(22,163,74,0.14); color: #15803d; }

.ws-clf-tcard-info {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ws-clf-tcard-label { font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.ws-clf-tcard-desc  { font-size: 11px; color: #64748b; line-height: 1.45; overflow-wrap: anywhere; }
.ws-clf-tcard-count { font-size: 11px; font-weight: 600; color: #94a3b8; margin-top: 2px; }
.ws-clf-tcard.is-selected .ws-clf-tcard-count { color: #16a34a; }

.ws-clf-tcard-check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(15,23,42,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: transparent;
  margin-top: 2px;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.ws-clf-tcard-check svg { width: 11px; height: 11px; display: block; }
.ws-clf-tcard.is-selected .ws-clf-tcard-check {
  background: #16a34a; border-color: #16a34a; color: #fff;
}

.ws-clf-template-summary { font-size: 12px; min-height: 18px; padding-top: 2px; }

/* ════════════════════════════════════════════════════════
   COLUNA DE ITENS — CABEÇALHO COM CONTADOR GLOBAL
════════════════════════════════════════════════════════ */
.ws-clf-items-col {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ws-clf-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ws-clf-section-label-items {
  border-bottom: none;
  padding-bottom: 0;
  flex: 1 1 auto;
}

/* ── Contador global interativo ── */
.ws-clf-global-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1.5px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  user-select: none;
}

.ws-clf-counter-done  { color: #0f172a; font-size: 15px; font-weight: 800; }
.ws-clf-counter-sep   { color: #94a3b8; font-size: 13px; }
.ws-clf-counter-total { color: #64748b; font-size: 14px; }
.ws-clf-counter-label { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 2px; }

.ws-clf-counter-pct {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15,23,42,0.07);
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Estado: 100% concluído */
.ws-clf-global-counter.is-complete {
  border-color: rgba(22,163,74,0.35);
  background: rgba(22,163,74,0.07);
  color: #15803d;
}
.ws-clf-global-counter.is-complete .ws-clf-counter-done,
.ws-clf-global-counter.is-complete .ws-clf-counter-total { color: #15803d; }
.ws-clf-global-counter.is-complete .ws-clf-counter-pct {
  background: rgba(22,163,74,0.18);
  color: #15803d;
}

/* ── Formulário de adicionar item ── */
.ws-clf-add-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ws-clf-add-input { flex: 1 1 auto; min-width: 0; }
.ws-clf-add-btn   { flex: 0 0 auto; white-space: nowrap; }
.ws-clf-new-hint  { margin: 0; }
.ws-clf-empty-items { margin: 0; }

/* ════════════════════════════════════════════════════════
   SEÇÕES DE ITENS (agrupamento por template_group)
════════════════════════════════════════════════════════ */
.ws-clf-section {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(15,23,42,0.09);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s ease;
}


.ws-clf-section.is-collapsed .ws-clf-sec-bar-wrap,
.ws-clf-section.is-collapsed .ws-clf-sec-list {
  display: none;
}

/* Cabeçalho da seção */
.ws-clf-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(15,23,42,0.025);
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.14s ease;
  color: #0f172a;
}
.ws-clf-sec-head:hover { background: rgba(15,23,42,0.045); }
.ws-clf-sec-head[aria-expanded="true"]  { border-bottom: 1px solid rgba(15,23,42,0.07); }
.ws-clf-sec-head.is-collapsed { border-bottom: none; }

.ws-clf-sec-name {
  font-size: 13px;
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-clf-sec-counter {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Badge ✓ quando seção 100% concluída */
.ws-clf-sec-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ws-clf-sec-badge.is-hidden { display: none; }

.ws-clf-sec-arrow {
  width: 15px; height: 15px;
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform 0.18s ease;
}
.ws-clf-sec-head[aria-expanded="true"]  .ws-clf-sec-arrow { transform: rotate(0deg); }
.ws-clf-sec-head.is-collapsed           .ws-clf-sec-arrow { transform: rotate(-90deg); }

/* Barra de progresso da seção */
.ws-clf-sec-bar-wrap {
  height: 3px;
  background: rgba(15,23,42,0.07);
  overflow: hidden;
}
.ws-clf-sec-bar-fill {
  height: 100%;
  background: var(--brand, #16a34a);
  border-radius: 0 2px 2px 0;
  transition: width 0.35s ease, background 0.25s ease;
  min-width: 0;
}
.ws-clf-sec-bar-fill.is-complete {
  background: #16a34a;
  border-radius: 0;
}

/* Lista de itens dentro da seção */
.ws-clf-sec-list {
  list-style: none;
  margin: 0;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* ════════════════════════════════════════════════════════
   ITEM DE CHECKLIST
════════════════════════════════════════════════════════ */
.ws-cl-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(15,23,42,0.09);
  border-radius: 12px;
  background: #fff;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease,
    opacity 0.28s ease,
    transform 0.28s ease;
}
.ws-cl-item:hover {
  border-color: rgba(15,23,42,0.16);
  box-shadow: 0 4px 12px rgba(15,23,42,0.05);
}
.ws-cl-item.is-done {
  background: rgba(34,197,94,0.05);
  border-color: rgba(34,197,94,0.22);
}
.ws-cl-item.is-cancelled {
  background: rgba(239,68,68,0.04);
  border-color: rgba(239,68,68,0.14);
  opacity: 0.70;
}

/* Animação de saída ao remover */
.ws-cl-item-removing {
  opacity: 0 !important;
  transform: translateX(18px) !important;
  pointer-events: none;
}

/* ── Checkbox ── */
.ws-cl-checkbox {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(15,23,42,0.24);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
  padding: 0;
  margin-top: 1px;
}
.ws-cl-checkbox:hover { border-color: #16a34a; background: rgba(22,163,74,0.07); }
.ws-cl-checkbox.is-checked { border-color: #16a34a; background: #16a34a; color: #fff; }
.ws-cl-checkbox.is-loading { opacity: 0.55; cursor: wait; }

.ws-cl-check-icon {
  width: 13px; height: 13px; display: block;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.ws-cl-checkbox.is-checked .ws-cl-check-icon { opacity: 1; }

/* ── Corpo do item ── */
.ws-cl-item-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ws-cl-item-title {
  font-size: 14px; font-weight: 600; color: #0f172a;
  line-height: 1.4; overflow-wrap: anywhere; word-break: break-word;
  transition: color 0.14s ease;
}
.ws-cl-item.is-done .ws-cl-item-title { text-decoration: line-through; color: #64748b; }

.ws-cl-item-desc {
  font-size: 13px; color: #475569; line-height: 1.5;
  overflow-wrap: anywhere; word-break: break-word;
}

.ws-cl-item-meta {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 2px;
}
.ws-cl-item-meta-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: rgba(15,23,42,0.06); color: #475569;
  white-space: nowrap;
}
.ws-cl-tag-urgent { background: rgba(239,68,68,0.12);  color: #b91c1c; }
.ws-cl-tag-high   { background: rgba(245,158,11,0.12); color: #92400e; }
.ws-cl-tag-medium { background: rgba(59,130,246,0.10); color: #1d4ed8; }
.ws-cl-tag-low    { background: rgba(15,23,42,0.06);   color: #475569; }

/* ── Botão remover ── */
.ws-cl-item-remove-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
  padding: 0;
  flex-shrink: 0;
  margin-top: 1px;
}
.ws-cl-item-remove-btn:hover {
  color: #ef4444;
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.22);
}
.ws-cl-item-remove-btn svg { width: 13px; height: 13px; display: block; }

/* ════════════════════════════════════════════════════════
   MODAL DE CONCLUSÃO — mesmo padrão do Kanban
   (ws-project-complete-* já deve existir em pages.css;
    se não existir, este bloco o define)
════════════════════════════════════════════════════════ */
.ws-project-complete-modal,
.ws-checklist-complete-modal {
  border: none;
  border-radius: 20px;
  padding: 0;
  width: min(480px, calc(100vw - 32px));
  box-shadow: 0 24px 60px rgba(2,6,23,0.22);
  overflow: hidden;
}

.ws-project-complete-modal::backdrop,
.ws-checklist-complete-modal::backdrop {
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(2px);
}

.ws-project-complete-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 18px;
  background: linear-gradient(135deg, rgba(22,163,74,0.10) 0%, rgba(34,197,94,0.06) 100%);
  border-bottom: 1px solid rgba(22,163,74,0.14);
}

.ws-project-complete-icon {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(22,163,74,0.30);
}

.ws-project-complete-head h2 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
}

.ws-project-complete-head p {
  font-size: 13px;
  color: #475569;
  margin: 0;
}

.ws-project-complete-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(15,23,42,0.08);
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.ws-project-complete-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: #fff;
}

.ws-project-complete-item-full {
  grid-column: 1 / -1;
}

.ws-project-complete-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

.ws-project-complete-item strong {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

.ws-project-complete-item-full strong {
  font-size: 15px;
  font-weight: 700;
}

.ws-project-complete-actions {
  padding: 16px 20px;
  display: flex;
  justify-content: flex-end;
  background: #fff;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVIDADE
════════════════════════════════════════════════════════ */

@media (max-width: 1599px) {
  .ws-clf-shell { grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr); }
}

@media (max-width: 1279px) {
  .ws-clf-shell { grid-template-columns: 1fr; }
  .ws-clf-vdivider { height: 1px; width: auto; margin: 0; }
  .ws-clf-meta-col, .ws-clf-items-col { padding: 16px 18px 18px; }
  .ws-clf-tgroup-grid { grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); }
}

@media (max-width: 991px) {
  .page-workspace-checklists .ws-filter-form.ws-filter-form-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .page-workspace-checklists .ws-filter-form.ws-filter-form-4 { grid-template-columns: 1fr; }
  .ws-cl-filter-actions { flex-direction: column; }
  .ws-cl-filter-actions .gi-btn { width: 100%; }

  .ws-clf-meta-col, .ws-clf-items-col { padding: 14px 14px 16px; }
  .ws-clf-fields-grid { grid-template-columns: 1fr; }
  .ws-clf-form-actions { flex-direction: column; }
  .ws-clf-form-actions .gi-btn { width: 100%; }

  .ws-clf-add-row { flex-direction: column; align-items: stretch; }
  .ws-clf-add-btn { width: 100%; }

  .ws-clf-tgroup-grid { grid-template-columns: 1fr; }

  .ws-clf-card-header { flex-direction: column; align-items: flex-start; }
  .ws-clf-delete-form .gi-btn, .ws-cl-btn-danger { width: 100%; }

  .ws-cl-item { padding: 10px 10px; }
  .ws-cl-item-title { font-size: 13px; }

  .ws-clf-items-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ws-clf-global-counter { align-self: stretch; justify-content: center; }

  .ws-clf-section-label { flex-direction: column; align-items: flex-start; gap: 3px; }

  .ws-project-complete-grid { grid-template-columns: 1fr; }

  .ws-mobile-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ws-mobile-actions .gi-btn,
  .ws-mobile-actions form,
  .ws-mobile-actions form .gi-btn { width: 100%; }
}

/* ---------------------------------------------------------
   8.23-8.25 PAGE: WORKSPACE — ATIVIDADES, ARQUIVOS & DASHBOARD
--------------------------------------------------------- */
/* (Componentes Activity, Files & Dashboard em components.css) */

/* Estilos específicos da página */
.ws-files-section .gi-card-header{
  align-items: flex-start;
}

.ws-col-id{
  width: 64px;
  text-align: center;
  white-space: nowrap;
}

.ws-mobile-card-title-row{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.ws-form-header-id{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ws-kanban-card-title-row{
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ws-kanban-modal-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ws-btn-danger{
  border-color: rgba(239,68,68,0.28);
  background: rgba(239,68,68,0.08);
  color: #b91c1c;
}

.ws-btn-danger:hover{
  background: rgba(239,68,68,0.16);
}

.ws-project-name-wrap{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ws-project-mobile-title-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

@media (max-width: 767px){
  .ws-form-header-id{
    gap: 8px;
  }
}

/* ---------------------------------------------------------
   8.26 PAGE: WORKSPACE — FILE VIEWER
--------------------------------------------------------- */
/* (Componentes File Viewer em components.css) */

/* ---------------------------------------------------------
   8.27 PAGE: WORKSPACE — FILE VIEWER (CONTINUAÇÃO)
--------------------------------------------------------- */
/* (Componentes File Viewer em components.css) */

/* ---------------------------------------------------------
   8.28 & 8.29 WORKSPACE — FILE VIEWER (LOADER & UPLOAD)
--------------------------------------------------------- */
/* (Componentes File Viewer em components.css) */

/* Estilos específicos da página */
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.orc-dash-hero-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.orc-dash-kpis{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}

.orc-dash-kpis-money{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.orc-kpi-card{
  padding:16px 18px;
}

.orc-kpi-label{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}

.orc-kpi-value{
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-0.3px;
  color:var(--text);
}

.orc-kpi-value.is-money{
  font-size:24px;
}

.orc-dash-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}

.orc-dash-list{
  display:flex;
  flex-direction:column;
}

.orc-dash-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-top:1px solid var(--border);
}

.orc-dash-list-row.is-block{
  align-items:flex-start;
}

.orc-dash-list-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.orc-dash-list-main.is-block{
  flex:1 1 auto;
}

.orc-dash-list-main strong{
  color:var(--text);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.orc-dash-list-main span{
  font-size:13px;
  color:var(--muted);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.orc-dash-list-side{
  flex:0 0 auto;
  font-weight:700;
  color:var(--text);
  text-align:right;
}

.orc-dash-list-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.orc-dash-card-footer{
  padding:14px 18px 18px;
}

.orc-dash-shortcuts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 18px 18px;
}

@media (max-width: 1279px){
  .orc-dash-kpis{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .orc-dash-kpis-money{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .orc-dash-kpis,
  .orc-dash-kpis-money,
  .orc-dash-grid{
    grid-template-columns:1fr;
  }

  .orc-dash-hero-actions,
  .orc-dash-list-actions,
  .orc-dash-shortcuts{
    width:100%;
  }

  .orc-dash-hero-actions .gi-btn,
  .orc-dash-list-actions .gi-btn,
  .orc-dash-shortcuts .gi-btn{
    width:100%;
  }

  .orc-dash-list-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .orc-dash-list-side{
    text-align:left;
  }
}

/* =========================================================
   9. ORÇAMENTOS — MÓDULO COMPLETO
   Bloco unificado com correção de responsividade do funil,
   scrollbar horizontal, zoom, dashboard, listagens,
   formulários, propostas, modelos e contatos.
========================================================= */

/* ---------------------------------------------------------
   9.1 BASE — containers de página
--------------------------------------------------------- */

.page-orcamentos-itens .gi-container-fluid,
.page-orcamentos-propostas .gi-container-fluid,
.page-orcamentos-funil .gi-container-fluid,
.page-orcamentos-oportunidades .gi-container-fluid,
.page-orcamentos-contatos .gi-container-fluid,
.page-orcamentos-form .gi-container-fluid {
  max-width: 100%;
  width: 100%;
  padding: 24px 32px;
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 1023px) {
  .page-orcamentos-itens .gi-container-fluid,
  .page-orcamentos-propostas .gi-container-fluid,
  .page-orcamentos-funil .gi-container-fluid,
  .page-orcamentos-oportunidades .gi-container-fluid,
  .page-orcamentos-contatos .gi-container-fluid,
  .page-orcamentos-form .gi-container-fluid {
    padding: 16px 14px 32px;
  }
}

/* ---------------------------------------------------------
   9.2 SIDEBAR — grupo colapsável do módulo Orçamentos
--------------------------------------------------------- */

.orc-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.orc-sidebar-group-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 11px 12px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
  color: #0f172a;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.orc-sidebar-group-toggle:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.06);
}

.orc-sidebar-group-toggle.is-active {
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
}

.orc-sidebar-group-arrow {
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.orc-sidebar-group-toggle[aria-expanded="true"] .orc-sidebar-group-arrow {
  transform: rotate(180deg);
}

.orc-sidebar-sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
}

.orc-sidebar-sub.is-open {
  display: flex;
}

.orc-sidebar-sub .gi-sidebar-link {
  font-size: 13.5px;
  min-height: 40px;
  padding: 9px 12px;
}

/* ---------------------------------------------------------
   9.3 AÇÕES DO CABEÇALHO DA PÁGINA
--------------------------------------------------------- */

.orc-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 16px;
}

@media (max-width: 767px) {
  .orc-page-actions {
    flex-direction: column;
  }

  .orc-page-actions .gi-btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------
   9.4 FUNIL — estrutura geral / estabilidade
--------------------------------------------------------- */

/* =========================================================
   9.5 ORÇAMENTOS FUNIL - Componentes base em components.css
   Apenas overrides específicos de página aqui
========================================================= */

.page-orcamentos-funil .gi-content-shell{
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100dvh;
  overflow-x: auto !important;
}

.page-orcamentos-funil .gi-content-shell main{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.page-orcamentos-funil .ws-page-card:first-of-type{
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
}

.page-orcamentos-funil .ws-page-card:last-child{
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.page-orcamentos-funil .ws-page-card:last-child.gi-card{
  overflow: visible;
}

.page-orcamentos-funil .orc-funil-board-wrap{
  flex: 1 1 auto;
  min-height: 200px;
  min-width: 0;
  width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 16px;
}

.page-orcamentos-funil .gi-card-header,
.page-orcamentos-funil .ws-page-head,
.page-orcamentos-funil .ws-page-head-text,
.page-orcamentos-funil .ws-filter-form,
.page-orcamentos-funil .ws-filter-form > div,
.page-orcamentos-funil .ws-filter-row,
.page-orcamentos-funil .ws-filter-field{
  min-width: 0;
}

.page-orcamentos-funil .gi-card-header h1,
.page-orcamentos-funil .gi-card-header p,
.page-orcamentos-funil .ws-page-head h1,
.page-orcamentos-funil .ws-page-head p{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-orcamentos-funil .ws-filter-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Scroll Hint ── */
.orc-funil-scroll-hint{
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(37, 99, 235, 0.92);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.30);
  animation: orc-hint-pulse 2s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.orc-funil-scroll-hint.is-visible{
  opacity: 1;
}

@keyframes orc-hint-pulse{
  0%, 100%{ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.30); }
  50%{ box-shadow: 0 4px 20px rgba(37, 99, 235, 0.50); }
}

@keyframes orc-hint-arrow{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(4px); }
}

/* ── Garantir scrollbar visível no desktop ── */
@media (min-width: 768px){
  .page-orcamentos-funil .orc-funil-board-wrap{
    overflow-x: scroll !important;
  }

  .page-orcamentos-funil .orc-funil-board-wrap::-webkit-scrollbar{
    height: 14px;
  }

  .page-orcamentos-funil .orc-funil-board-wrap::-webkit-scrollbar-track{
    background: rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    margin: 0 18px;
  }

  .page-orcamentos-funil .orc-funil-board-wrap::-webkit-scrollbar-thumb{
    background: rgba(15, 23, 42, 0.25);
    border-radius: 10px;
    border: 3px solid rgba(15, 23, 42, 0.06);
  }

  .page-orcamentos-funil .orc-funil-board-wrap::-webkit-scrollbar-thumb:hover{
    background: rgba(15, 23, 42, 0.35);
  }
}

/* ---------------------------------------------------------
   9.16 RESPONSIVO + CORREÇÕES DE ZOOM/SCROLL DO FUNIL
--------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {
  .page-orcamentos-funil .gi-container-fluid {
    padding: 18px 18px 28px;
  }

  .orc-funil-board {
    gap: 14px;
    padding: 14px;
  }

  .orc-funil-column {
    flex: 0 0 260px;
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    max-height: calc(100dvh - 260px);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page-orcamentos-funil .gi-container-fluid {
    padding: 16px 14px 28px;
  }

  .page-orcamentos-funil .ws-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .orc-funil-board {
    gap: 12px;
    padding: 12px;
  }

  .orc-funil-column {
    flex: 0 0 248px;
    width: 248px;
    min-width: 248px;
    max-width: 248px;
    max-height: calc(100dvh - 240px);
  }
}

@media (max-width: 980px){
  .page-orcamentos-funil .gi-content-shell{
    overflow-x: auto !important;
  }

  .page-orcamentos-funil .ws-filter-form.ws-filter-form-4{
    grid-template-columns: 1fr;
  }

  .page-orcamentos-funil .ws-filter-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .page-orcamentos-funil .ws-filter-actions .gi-btn:last-child{
    grid-column: 1 / -1;
  }

  .page-orcamentos-funil .orc-funil-board-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .page-orcamentos-funil .orc-funil-board{
    padding: 12px;
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .page-orcamentos-funil .gi-container-fluid {
    padding: 14px 12px 24px;
  }

  .page-orcamentos-funil .gi-card-header {
    padding-bottom: 12px;
  }

  .page-orcamentos-funil .ws-filter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-orcamentos-funil .ws-filter-actions,
  .page-orcamentos-funil .ws-filter-actions .gi-btn {
    width: 100%;
  }

  .orc-funil-board-wrap {
    padding-bottom: 8px;
  }

  .orc-funil-board {
    padding: 10px;
    gap: 10px;
  }

  .orc-funil-column {
    flex: 0 0 calc(100vw - 44px);
    width: calc(100vw - 44px);
    min-width: calc(100vw - 44px);
    max-width: calc(100vw - 44px);
    min-height: 300px;
    max-height: calc(100dvh - 210px);
  }

  .orc-funil-scroll-hint {
    top: auto;
    bottom: calc(100% + 8px);
    right: 50%;
    transform: translateX(50%);
  }

  .orc-funil-card-actions {
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------
   9.6 Documento de Proposta - PDF
--------------------------------------------------------- */

.orc-pdf-doc{
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07);
  overflow: hidden;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.5;
}

.orc-pdf-toolbar {
  max-width: 860px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.orc-pdf-toolbar-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.orc-pdf-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.orc-pdf-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.orc-pdf-btn:hover {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.25);
}

.orc-pdf-btn-primary {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

.orc-pdf-btn-primary:hover {
  background: #15803d;
  border-color: #15803d;
}

.orc-pdf-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 2px solid #16a34a;
  background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
  flex-wrap: wrap;
}

.orc-pdf-company-name {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.orc-pdf-company-doc {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
}

.orc-pdf-badge {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.orc-pdf-badge-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #16a34a;
}

.orc-pdf-badge-num {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.orc-pdf-badge-status {
  font-size: 11px;
  color: #64748b;
}

.orc-pdf-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  padding: 16px 24px 4px;
  line-height: 1.3;
}

.orc-pdf-description {
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
  padding: 8px 24px 12px;
  border-left: 3px solid #16a34a;
  margin: 0 24px 4px;
  background: rgba(22, 163, 74, 0.03);
  border-radius: 0 6px 6px 0;
}

.orc-pdf-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 24px;
}

.orc-pdf-info-block {
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
}

.orc-pdf-info-block-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  margin-bottom: 8px;
}

.orc-pdf-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  align-items: baseline;
  margin-bottom: 5px;
}

.orc-pdf-info-row:last-child {
  margin-bottom: 0;
}

.orc-pdf-info-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.orc-pdf-info-value {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.orc-pdf-section-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 0 24px 8px;
}

.orc-pdf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 0 0 4px;
}

.orc-pdf-table thead tr {
  background: #f1f5f9;
}

.orc-pdf-table th {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}

.orc-pdf-table td {
  padding: 8px 12px;
  color: #0f172a;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  vertical-align: top;
}

.orc-pdf-table tbody tr:last-child td {
  border-bottom: none;
}

.orc-pdf-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.orc-pdf-table .total-col {
  font-weight: 700;
}

.orc-pdf-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 8px 24px 16px;
  gap: 4px;
}

.orc-pdf-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-width: 280px;
  padding: 5px 10px;
  font-size: 13px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.orc-pdf-total-row:last-child {
  border-bottom: none;
}

.orc-pdf-total-final {
  background: #dcfce7;
  border-radius: 6px;
  padding: 7px 10px;
}

.orc-pdf-total-label {
  color: #475569;
  font-weight: 600;
}

.orc-pdf-total-val {
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.orc-pdf-total-final .orc-pdf-total-label {
  color: #14532d;
  font-weight: 700;
}

.orc-pdf-total-final .orc-pdf-total-val {
  color: #15803d;
  font-size: 15px;
  font-weight: 800;
}

.orc-pdf-notes {
  margin: 0 24px 16px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 8px;
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
}

.orc-pdf-notes-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  margin-bottom: 6px;
}

.orc-pdf-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: #f8fafc;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  flex-wrap: wrap;
}

.orc-pdf-footer-left {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.5;
}

.orc-pdf-footer-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.orc-pdf-sign-line {
  width: 160px;
  height: 1px;
  background: #cbd5e1;
}

.orc-pdf-sign-label {
  font-size: 10px;
  color: #94a3b8;
}

.orc-funil-preview-modal-body .orc-pdf-doc {
  max-width: 100%;
  box-shadow: none;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .orc-pdf-info-grid {
    grid-template-columns: 1fr;
  }

  .orc-pdf-header {
    flex-direction: column;
  }

  .orc-pdf-badge {
    align-items: flex-start;
    text-align: left;
  }

  .orc-pdf-total-row {
    min-width: 0;
    width: 100%;
  }

  .orc-pdf-totals {
    align-items: stretch;
  }
}

/* ---------------------------------------------------------
   9.16 RESPONSIVO + CORREÇÕES DE ZOOM/SCROLL DO FUNIL
--------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {
  .page-orcamentos-funil .gi-container-fluid {
    padding: 18px 18px 28px;
  }

  .orc-funil-board {
    gap: 14px;
    padding: 14px;
  }

  .orc-funil-column {
    flex: 0 0 260px;
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    max-height: calc(100dvh - 260px);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page-orcamentos-funil .gi-container-fluid {
    padding: 16px 14px 28px;
  }

  .page-orcamentos-funil .ws-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .orc-funil-board {
    gap: 12px;
    padding: 12px;
  }

  .orc-funil-column {
    flex: 0 0 248px;
    width: 248px;
    min-width: 248px;
    max-width: 248px;
    max-height: calc(100dvh - 240px);
  }
}

@media (max-width: 767px) {
  .page-orcamentos-funil .gi-container-fluid {
    padding: 14px 12px 24px;
  }

  .page-orcamentos-funil .gi-card-header {
    padding-bottom: 12px;
  }

  .page-orcamentos-funil .ws-filter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-orcamentos-funil .ws-filter-actions,
  .page-orcamentos-funil .ws-filter-actions .gi-btn {
    width: 100%;
  }

  .orc-funil-board-wrap {
    padding-bottom: 8px;
  }

  .orc-funil-board {
    padding: 10px;
    gap: 10px;
  }

  .orc-funil-column {
    flex: 0 0 calc(100vw - 44px);
    width: calc(100vw - 44px);
    min-width: calc(100vw - 44px);
    max-width: calc(100vw - 44px);
    min-height: 300px;
    max-height: calc(100dvh - 210px);
  }

  .orc-funil-scroll-hint {
    top: auto;
    bottom: calc(100% + 8px);
    right: 50%;
    transform: translateX(50%);
  }

  .orc-funil-card-actions {
    flex-wrap: wrap;
  }

  .orc-funil-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 24px);
    border-radius: 12px;
  }

  .orc-funil-modal-head {
    padding: 16px 16px 12px;
  }

  .orc-funil-modal-body {
    padding: 14px;
    gap: 12px;
  }

  .orc-funil-modal-grid {
    grid-template-columns: 1fr;
  }

  .orc-funil-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .orc-funil-modal-actions .gi-btn {
    width: 100%;
  }

  .orc-funil-modal-section-body {
    padding: 12px 14px 14px;
  }

  .orc-funil-proposta-preview-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    margin: auto 0 0;
  }

  .orc-funil-proposta-preview-header {
    padding: 12px 14px;
  }

  .orc-funil-proposta-preview-actions .gi-btn {
    font-size: 13px;
    padding: 7px 10px;
  }
}


/* ---------------------------------------------------------
   9.17 PROPOSTA — Linhas de itens
--------------------------------------------------------- */

.orc-linhas-table {
  width: 100%;
}

.orc-linhas-add-row {
  margin-top: 10px;
}

.orc-linhas-total-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 12px 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 14px;
}

.orc-total-label {
  color: #64748b;
  font-weight: 600;
}

.orc-total-value {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.orc-discount-select {
  width: 150px;
}

.orc-discount-input {
  width: 110px;
}

/* ---------------------------------------------------------
   9.18 ITENS — campo de ajuda
--------------------------------------------------------- */

.orc-field-help {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}

/* ---------------------------------------------------------
   9.19 LINKS internos do módulo
--------------------------------------------------------- */

.orc-link {
  color: #2563eb;
  text-decoration: none;
}

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

/* ---------------------------------------------------------
   9.20 RESPONSIVO — proposta / links
--------------------------------------------------------- */

@media (max-width: 767px) {
  .orc-linhas-total-row {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 12px;
  }

  .orc-discount-select,
  .orc-discount-input {
    width: 100%;
  }

  .orc-op-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ---------------------------------------------------------
   9.21 PAGE: ORÇAMENTOS — DASHBOARD
--------------------------------------------------------- */

.page-orcamentos-dashboard .gi-container-fluid{
  max-width: 100%;
  width: 100%;
  padding: 24px 32px;
  box-sizing: border-box;
}

@media (max-width: 1023px){
  .page-orcamentos-dashboard .gi-container-fluid{
    padding: 16px 14px 32px;
  }
}

.orc-dash-hero{
  margin-bottom: 12px;
}

.orc-dash-hero-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.orc-dash-hero-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.orc-dash-kpis{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}

.orc-dash-kpis-money{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.orc-kpi-card{
  padding:16px 18px;
}

.orc-kpi-label{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}

.orc-kpi-value{
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-0.3px;
  color:var(--text);
}

.orc-kpi-value.is-money{
  font-size:24px;
}

.orc-dash-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}

.orc-dash-list{
  display:flex;
  flex-direction:column;
}

.orc-dash-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-top:1px solid var(--border);
}

.orc-dash-list-row.is-block{
  align-items:flex-start;
}

.orc-dash-list-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.orc-dash-list-main.is-block{
  flex:1 1 auto;
}

.orc-dash-list-main strong{
  color:var(--text);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.orc-dash-list-main span{
  font-size:13px;
  color:var(--muted);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.orc-dash-list-side{
  flex:0 0 auto;
  font-weight:700;
  color:var(--text);
  text-align:right;
}

.orc-dash-list-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.orc-dash-card-footer{
  padding:14px 18px 18px;
}

.orc-dash-shortcuts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 18px 18px;
}

@media (max-width: 1279px){
  .orc-dash-kpis{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .orc-dash-kpis-money{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .orc-dash-kpis,
  .orc-dash-kpis-money,
  .orc-dash-grid{
    grid-template-columns:1fr;
  }

  .orc-dash-hero-actions,
  .orc-dash-list-actions,
  .orc-dash-shortcuts{
    width:100%;
  }

  .orc-dash-hero-actions .gi-btn,
  .orc-dash-list-actions .gi-btn,
  .orc-dash-shortcuts .gi-btn{
    width:100%;
  }

  .orc-dash-list-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .orc-dash-list-side{
    text-align:left;
  }
}

/* ---------------------------------------------------------
   9.22 PAGE: ORÇAMENTOS — LISTAGEM OFICIAL
--------------------------------------------------------- */

.page-orcamentos .gi-container-fluid{
  max-width: 100%;
  width: 100%;
  padding: 24px 32px;
  box-sizing: border-box;
}

.orc-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.orc-page-head-text{
  min-width:0;
}

.orc-page-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.orc-filter-form{
  display:grid;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(180px, 1fr)) auto;
  gap:12px;
  align-items:end;
}

.orc-filter-actions .gi-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.orc-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin:12px 0;
}

.orc-summary-card{
  padding:16px 18px;
}

.orc-summary-label{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}

.orc-summary-value{
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-0.3px;
  color:var(--text);
}

.orc-summary-value.is-money{
  font-size:24px;
}

.orc-table-wrap{
  width:100%;
  overflow:auto;
}

.orc-table{
  width:100%;
  min-width:1080px;
  border-collapse:separate;
  border-spacing:0;
}

.orc-table th,
.orc-table td{
  padding:14px 16px;
  border-top:1px solid var(--border);
  vertical-align:top;
  text-align:left;
}

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

.orc-table td.is-actions,
.orc-table th.is-actions{
  width:1%;
  white-space:nowrap;
}

.orc-cell-main,
.orc-cell-sub{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.orc-cell-main strong,
.orc-cell-sub strong{
  color:var(--text);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.orc-cell-main span,
.orc-cell-sub span{
  font-size:13px;
  color:var(--muted);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.orc-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  border:1px solid transparent;
}

.orc-status-pill.status-draft{
  background:rgba(100,116,139,0.12);
  color:#475569;
  border-color:rgba(100,116,139,0.18);
}

.orc-status-pill.status-sent{
  background:rgba(245,158,11,0.14);
  color:#b45309;
  border-color:rgba(245,158,11,0.22);
}

.orc-status-pill.status-accepted{
  background:rgba(34,197,94,0.14);
  color:#166534;
  border-color:rgba(34,197,94,0.22);
}

.orc-status-pill.status-rejected{
  background:rgba(239,68,68,0.12);
  color:#b91c1c;
  border-color:rgba(239,68,68,0.2);
}

.orc-status-pill.status-expired{
  background:rgba(59,130,246,0.12);
  color:#1d4ed8;
  border-color:rgba(59,130,246,0.18);
}

.orc-row-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.orc-inline-form{
  display:inline;
}

.orc-mobile-list{
  display:none;
}

.orc-pagination{
  padding:16px 18px 18px;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.orc-pagination-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.orc-mobile-card{
  display:grid;
  gap:12px;
}

.orc-mobile-card + .orc-mobile-card{
  margin-top:10px;
}

.orc-mobile-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.orc-mobile-card-main{
  display:grid;
  gap:4px;
  min-width:0;
}

.orc-mobile-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.orc-mobile-item{
  display:grid;
  gap:4px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(15,23,42,0.02);
}

.orc-mobile-item strong{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
}

.orc-mobile-item span{
  color:var(--text);
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media (max-width: 1279px){
  .orc-filter-form{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .orc-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .page-orcamentos .gi-container-fluid{
    padding:16px 14px 32px;
  }

  .orc-filter-form,
  .orc-summary-grid,
  .orc-mobile-grid{
    grid-template-columns:1fr;
  }

  .orc-page-head-actions,
  .orc-page-head-actions .gi-btn,
  .orc-filter-actions .gi-actions,
  .orc-filter-actions .gi-actions .gi-btn,
  .orc-row-actions,
  .orc-row-actions .gi-btn,
  .orc-pagination-actions,
  .orc-pagination-actions .gi-btn{
    width:100%;
  }

  .orc-table-wrap{
    display:none;
  }

  .orc-mobile-list{
    display:block;
    padding:0 14px 14px;
  }
}

/* =========================================================
   9.23 - ORÇAMENTOS — OPORTUNIDADE / FUNIL / INTEGRAÇÃO
========================================================= */

.orc-lost-reason-wrap.is-hidden {
  display: none;
}

/* =========================================================
   ORÇAMENTOS — AJUSTES ESPECÍFICOS
   Páginas:
   /Orcamentos/orcamentos_modelos_proposta.php
   /Orcamentos/orcamentos_modelo_proposta_form.php
========================================================= */

.page-orcamentos-modelos .gi-container-fluid,
.page-orcamentos-modelo-form .gi-container-fluid {
  max-width: 100%;
  width: 100%;
  padding: 24px 32px;
  box-sizing: border-box;
}

.orc-models-card,
.orc-model-form-card {
  overflow: hidden;
}

.orc-section-body {
  padding: 18px 18px 20px;
}

.orc-section-body-tight {
  padding-bottom: 0;
}

.orc-empty-state {
  padding: 18px;
  border-radius: 14px;
}

.orc-filter-form-models {
  display: grid;
  grid-template-columns: minmax(320px, 2.2fr) minmax(180px, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.orc-filter-form-models .orc-filter-field,
.orc-filter-form-models .orc-filter-actions-wrap {
  min-width: 0;
}

.orc-filter-actions-wrap {
  display: grid;
  gap: 8px;
}

.orc-filter-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.orc-table-models {
  min-width: 980px;
}

.orc-table-models th.is-id,
.orc-table-models td.is-id {
  width: 72px;
  text-align: center;
}

.orc-mobile-card-model {
  padding: 14px;
}

.orc-model-form-body {
  padding-top: 20px;
}

.orc-model-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.orc-form-block {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.orc-form-block-main {
  grid-column: 1;
}

.orc-form-block-side {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: sticky;
  top: 18px;
}

.orc-form-block-head {
  display: grid;
  gap: 4px;
}

.orc-form-block-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  color: #0f172a;
}

.orc-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.orc-model-textarea {
  min-height: 180px;
  resize: vertical;
}

.orc-token-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.orc-token-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.orc-check-group {
  display: grid;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.orc-checkline-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: auto;
}

.orc-checkline-block span {
  color: #334155;
  font-weight: 600;
}

.orc-form-actions-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 2px 2px 0;
}

@media (max-width: 1180px) {
  .orc-filter-form-models {
    grid-template-columns: 1.6fr 1fr;
  }

  .orc-filter-actions-wrap {
    grid-column: 1 / -1;
  }

  .orc-model-form-grid {
    grid-template-columns: 1fr;
  }

  .orc-form-block-main,
  .orc-form-block-side,
  .orc-form-actions-row {
    grid-column: 1;
    grid-row: auto;
  }

  .orc-form-block-side {
    position: static;
  }
}

@media (max-width: 767px) {
  .page-orcamentos-modelos .gi-container-fluid,
  .page-orcamentos-modelo-form .gi-container-fluid {
    padding: 16px 14px 32px;
  }

  .orc-section-body {
    padding: 14px;
  }

  .orc-filter-form-models,
  .orc-form-grid-2 {
    grid-template-columns: 1fr;
  }

  .orc-page-head-actions,
  .orc-page-head-actions .gi-btn,
  .orc-filter-actions-bar,
  .orc-filter-actions-bar .gi-btn,
  .orc-form-actions-row,
  .orc-form-actions-row .gi-btn {
    width: 100%;
  }

  .orc-form-block {
    padding: 14px;
    border-radius: 14px;
  }

  .orc-model-textarea {
    min-height: 150px;
  }
}

/* =========================================================
   ORÇAMENTOS — AJUSTES ESPECÍFICOS
   Páginas:
   - /Orcamentos/orcamentos.php
   - /Orcamentos/orcamento_form.php
========================================================= */

.page-orcamentos .gi-container-fluid,
.page-orcamentos-form .gi-container-fluid {
  width: 100%;
  max-width: 100%;
  padding: 24px 28px 36px;
  box-sizing: border-box;
}

.orc-page-card,
.orc-form-page-card {
  overflow: hidden;
}

.orc-card-header-block {
  padding: 16px 18px;
}

.orc-card-body,
.orc-form-body,
.orc-form-banner-wrap,
.orc-card-alert {
  padding-left: 18px;
  padding-right: 18px;
}

.orc-card-body {
  padding-top: 18px;
  padding-bottom: 18px;
}

.orc-card-body-no-top {
  padding-top: 0;
}

.orc-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.orc-page-head-text {
  min-width: 0;
}

.orc-page-head-text h1,
.orc-page-head-text h2 {
  margin: 0 0 4px;
}

.orc-page-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.orc-filter-card-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: end;
}

.orc-filter-fields {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(160px, 1fr));
  gap: 14px;
}

.orc-filter-field {
  min-width: 0;
}

.orc-filter-submit-area {
  display: grid;
  gap: 8px;
  align-self: end;
}

.orc-filter-submit-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.orc-filter-submit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.orc-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.orc-summary-card {
  padding: 16px 18px;
}

.orc-summary-label {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.orc-summary-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.orc-summary-value.is-money {
  font-size: 20px;
}

.orc-table-wrap {
  width: 100%;
  overflow: auto;
}

.orc-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
}

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

.orc-table th {
  background: rgba(15, 23, 42, 0.03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.orc-table td.is-actions,
.orc-table th.is-actions {
  width: 1%;
  white-space: nowrap;
}

.orc-cell-main,
.orc-cell-sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.orc-cell-main strong,
.orc-cell-sub strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.orc-cell-main span,
.orc-cell-sub span {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.orc-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.orc-row-actions.is-vertical {
  flex-direction: column;
  align-items: stretch;
}

.orc-inline-form {
  display: inline;
}

.orc-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
  white-space: nowrap;
}

.orc-status-pill.status-draft {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.18);
}

.orc-status-pill.status-sent {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.18);
}

.orc-status-pill.status-accepted {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.18);
}

.orc-status-pill.status-rejected,
.orc-status-pill.status-expired {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.16);
}

.gi-btn-danger-soft {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.18);
  color: #b91c1c;
}

.gi-btn-danger-soft:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.24);
}

.orc-mobile-list {
  display: none;
}

.orc-mobile-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}

.orc-mobile-card + .orc-mobile-card {
  margin-top: 10px;
}

.orc-mobile-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.orc-mobile-card-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.orc-mobile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.orc-mobile-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.02);
}

.orc-mobile-item strong {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.orc-pagination {
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
}

.orc-pagination-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.orc-form-banner-wrap {
  padding-top: 18px;
}

.orc-op-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.orc-op-banner-label {
  font-weight: 700;
  color: #1d4ed8;
}

.orc-op-banner-title {
  font-weight: 700;
  color: var(--text);
}

.orc-op-banner-contato,
.orc-op-banner-sep {
  color: var(--muted);
}

.orc-form-body {
  padding-top: 18px;
  padding-bottom: 18px;
}

.orc-form-layout {
  display: grid;
  gap: 16px;
}

.orc-form-section {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  padding: 18px;
}

.orc-form-section-head {
  margin-bottom: 14px;
}

.orc-form-section-head h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.orc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.orc-form-grid-main {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.orc-field {
  min-width: 0;
}

.orc-field.col-span-2 {
  grid-column: span 2;
}

.orc-items-desktop,
.orc-table-wrap-inner {
  width: 100%;
}

.orc-linhas-table {
  width: 100%;
}

.orc-linhas-add-row {
  margin-top: 12px;
}

.orc-linhas-total-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.orc-total-control-group {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.orc-discount-select {
  width: 170px;
}

.orc-discount-input {
  width: 120px;
}

.orc-total-summary {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.orc-total-box {
  min-width: 150px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.02);
  display: grid;
  gap: 4px;
}

.orc-total-box.is-final {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.14);
}

.orc-total-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.orc-total-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.orc-check-inline {
  margin-bottom: 0;
}

.orc-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.orc-items-mobile {
  display: none;
}

.orc-mobile-line-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.02);
}

.orc-mobile-line-card + .orc-mobile-line-card {
  margin-top: 10px;
}

.orc-mobile-line-head {
  margin-bottom: 10px;
}

.orc-mobile-line-grid {
  display: grid;
  gap: 10px;
}

.orc-mobile-line-field {
  display: grid;
  gap: 6px;
}

.orc-mobile-line-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.orc-mobile-line-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.orc-mobile-line-total span {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1279px) {
  .orc-filter-card-form,
  .orc-filter-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .orc-filter-submit-area {
    grid-column: 1 / -1;
  }

  .orc-filter-submit-actions {
    justify-content: flex-start;
  }

  .orc-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .page-orcamentos .gi-container-fluid,
  .page-orcamentos-form .gi-container-fluid {
    padding: 14px 12px 28px;
  }

  .orc-card-header-block,
  .orc-card-body,
  .orc-form-body,
  .orc-form-banner-wrap,
  .orc-card-alert {
    padding-left: 12px;
    padding-right: 12px;
  }

  .orc-page-head-actions,
  .orc-page-head-actions .gi-btn,
  .orc-filter-submit-actions,
  .orc-filter-submit-actions .gi-btn,
  .orc-form-actions,
  .orc-form-actions .gi-btn,
  .orc-row-actions,
  .orc-row-actions .gi-btn,
  .orc-pagination-actions,
  .orc-pagination-actions .gi-btn,
  .orc-total-control-group,
  .orc-total-control-group .gi-input,
  .orc-linhas-add-row .gi-btn {
    width: 100%;
  }

  .orc-filter-card-form,
  .orc-filter-fields,
  .orc-summary-grid,
  .orc-mobile-grid,
  .orc-form-grid,
  .orc-form-grid-main {
    grid-template-columns: 1fr;
  }

  .orc-table-wrap,
  .orc-items-desktop {
    display: none;
  }

  .orc-mobile-list,
  .orc-items-mobile {
    display: block;
  }

  .orc-form-section {
    padding: 14px;
    border-radius: 16px;
  }

  .orc-field.col-span-2 {
    grid-column: auto;
  }

  .orc-op-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .orc-linhas-total-row {
    align-items: stretch;
  }

  .orc-total-box {
    min-width: 0;
  }
}

/* Lista de orçamentos — ações em ícones no mesmo padrão de oportunidades */
.orc-table-orcamentos th,
.orc-table-orcamentos td {
  text-align: center;
  vertical-align: middle;
}

.orc-table-orcamentos td.is-main,
.orc-table-orcamentos .orc-cell-main,
.orc-table-orcamentos .orc-cell-sub {
  align-items: center;
}

.orc-table-orcamentos .orc-cell-main span,
.orc-table-orcamentos .orc-cell-sub span {
  text-align: center;
}

.orc-table-orcamentos .is-actions {
  width: 116px;
  min-width: 116px;
}

.orc-row-actions-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.orc-row-actions-icons .orc-inline-form {
  display: inline-flex;
  margin: 0;
}

.orc-icon-action {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #fff;
  color: #111827;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  cursor: pointer;
  padding: 0;
}

.orc-icon-action:hover {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.22);
  color: #000;
  box-shadow: none;
}

.orc-icon-action:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.24);
  outline-offset: 2px;
}

.orc-icon-action.is-danger,
.orc-icon-action.is-danger:hover,
.orc-icon-action.is-accent,
.orc-icon-action.is-accent:hover {
  color: #111827;
  border-color: rgba(15, 23, 42, 0.12);
  background: #fff;
}

.orc-row-actions-icons svg,
.orc-icon-action svg {
  width: 15px;
  height: 15px;
  display: block;
}

@media (max-width: 767px) {
  .orc-mobile-list .orc-row-actions-icons {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Ajuste de estabilidade visual dos ícones de ação */
.orc-row-actions-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.orc-row-actions-icons .orc-inline-form {
  display: inline-flex;
  margin: 0;
}

.orc-icon-action {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box;
}

.orc-icon-action > svg,
.orc-icon-action svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  flex: 0 0 15px;
  display: block;
}

/* Lista de orçamentos — tipografia compacta igual à lista de oportunidades */
.orc-table-orcamentos thead th {
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.orc-table-orcamentos tbody td {
  font-size: 13px;
  line-height: 1.3;
}

.orc-table-orcamentos th,
.orc-table-orcamentos td {
  padding: 10px 10px;
}

.orc-table-orcamentos .orc-cell-main strong,
.orc-table-orcamentos .orc-cell-sub strong,
.orc-table-orcamentos td > strong {
  font-size: 13px;
  line-height: 1.25;
}

.orc-table-orcamentos .orc-cell-main span,
.orc-table-orcamentos .orc-cell-sub span,
.orc-table-orcamentos td span,
.orc-table-orcamentos td {
  font-size: 12px;
}

.orc-table-orcamentos .is-actions {
  width: 96px;
  min-width: 96px;
}

@media (max-width: 1480px) {
  .orc-table-orcamentos thead th,
  .orc-table-orcamentos tbody td,
  .orc-table-orcamentos .orc-cell-main strong,
  .orc-table-orcamentos .orc-cell-sub strong {
    font-size: 12px;
  }

  .orc-table-orcamentos .orc-cell-main span,
  .orc-table-orcamentos .orc-cell-sub span {
    font-size: 11px;
  }

  .orc-table-orcamentos th,
  .orc-table-orcamentos td {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Orçamentos — Contatos: tabela centralizada + ações por ícones */
.page-orcamentos-contatos .gi-container-fluid{
  max-width: 100%;
  width: 100%;
  padding: 24px 28px 36px;
  box-sizing: border-box;
}

.orc-table-contatos th,
.orc-table-contatos td{
  text-align: center;
  vertical-align: middle;
}

.orc-table-contatos td.is-commercial-format,
.orc-table-contatos th:nth-child(4){
  text-align: left;
}

.orc-table-contatos .orc-cell-main,
.orc-table-contatos .orc-cell-sub{
  align-items: center;
}

.orc-table-contatos .orc-cell-main strong,
.orc-table-contatos .orc-cell-main span,
.orc-table-contatos .orc-cell-sub strong,
.orc-table-contatos .orc-cell-sub span{
  text-align: center;
}

.orc-table-contatos td.is-commercial-format .orc-cell-main,
.orc-table-contatos td.is-commercial-format .orc-cell-sub{
  align-items: flex-start;
}

.orc-table-contatos td.is-commercial-format .orc-cell-main strong,
.orc-table-contatos td.is-commercial-format .orc-cell-main span,
.orc-table-contatos td.is-commercial-format .orc-cell-sub strong,
.orc-table-contatos td.is-commercial-format .orc-cell-sub span{
  text-align: left;
}

.orc-table-contatos .is-actions{
  width: 96px;
  min-width: 96px;
}

@media (max-width: 767px){
  .page-orcamentos-contatos .gi-container-fluid{
    padding: 16px 14px 28px;
  }

  .page-orcamentos-contatos .orc-row-actions-icons{
    width: 100%;
    justify-content: flex-start;
  }
}


/* =========================================================
   ORÇAMENTOS — Modal de pré-visualização (formato PDF)
   Adicionar ao final do bloco CSS de orçamentos,
   após o último @media da seção .page-orcamentos-contatos
========================================================= */

body.orc-preview-modal-open {
  overflow: hidden;
}

.orc-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
}

.orc-preview-modal[hidden] {
  display: none;
}

.orc-preview-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  cursor: pointer;
}

.orc-preview-modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: #f1f5f9;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.orc-preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.orc-preview-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  flex: 1 1 0;
}

.orc-preview-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.orc-preview-modal-body {
  overflow-y: auto;
  padding: 20px 20px 32px;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  color: #0f172a;
  line-height: 1.4;
}

.orc-preview-modal-body *,
.orc-preview-modal-body *::before,
.orc-preview-modal-body *::after {
  box-sizing: border-box;
}

/* Documento */
.orc-preview-modal-body .pdf-doc {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

/* Cabeçalho do documento */
.orc-preview-modal-body .pdf-doc-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 24px 14px;
  border-bottom: 2px solid #16a34a;
  background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
}

.orc-preview-modal-body .pdf-doc-head-logo-area {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.orc-preview-modal-body .pdf-doc-head-kicker {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #16a34a;
  margin-bottom: 6px;
}

.orc-preview-modal-body .pdf-doc-head-logo-img {
  display: block;
  max-height: 80px;
  max-width: 240px;
  object-fit: contain;
}

.orc-preview-modal-body .pdf-doc-head-company {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.orc-preview-modal-body .pdf-doc-head-doc {
  margin-top: 3px;
  font-size: 11px;
  color: #64748b;
}

.orc-preview-modal-body .pdf-doc-head-meta {
  text-align: right;
  display: grid;
  gap: 2px;
}

.orc-preview-modal-body .pdf-doc-head-meta-num {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.orc-preview-modal-body .pdf-doc-head-meta-date { font-size: 11px; color: #64748b; }
.orc-preview-modal-body .pdf-doc-head-meta-date strong { color: #0f172a; font-weight: 600; }

/* Corpo */
.orc-preview-modal-body .pdf-body { padding: 0 24px; }

.orc-preview-modal-body .pdf-section {
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  padding: 12px 0;
}

.orc-preview-modal-body .pdf-section:last-of-type { border-bottom: none; }

.orc-preview-modal-body .pdf-section-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  margin-bottom: 8px;
}

/* Título */
.orc-preview-modal-body .pdf-title-block h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.orc-preview-modal-body .pdf-title-desc {
  font-size: 12px;
  color: #334155;
  line-height: 1.5;
  padding: 8px 12px;
  background: rgba(22, 163, 74, 0.04);
  border-left: 3px solid #16a34a;
  border-radius: 0 6px 6px 0;
}

/* Informações */
.orc-preview-modal-body .pdf-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.orc-preview-modal-body .pdf-info-card {
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
}

.orc-preview-modal-body .pdf-info-card-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  margin-bottom: 7px;
}

.orc-preview-modal-body .pdf-info-row {
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 5px;
  align-items: baseline;
}

.orc-preview-modal-body .pdf-info-row:last-child { margin-bottom: 0; }

.orc-preview-modal-body .pdf-info-row-lbl {
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.orc-preview-modal-body .pdf-info-row-lbl::after { content: ':'; }
.orc-preview-modal-body .pdf-info-row-val { font-size: 12px; font-weight: 600; color: #0f172a; }

/* Tabela */
.orc-preview-modal-body .pdf-table-wrap {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  overflow: hidden;
  overflow-x: auto;
}

.orc-preview-modal-body .pdf-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.orc-preview-modal-body .pdf-table thead tr { background: #f1f5f9; }

.orc-preview-modal-body .pdf-table th {
  padding: 7px 10px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}

.orc-preview-modal-body .pdf-table td {
  padding: 7px 10px;
  font-size: 12px;
  color: #0f172a;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  vertical-align: top;
}

.orc-preview-modal-body .pdf-table tbody tr:last-child td { border-bottom: none; }
.orc-preview-modal-body .pdf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orc-preview-modal-body .pdf-table .fw  { font-weight: 700; }
.orc-preview-modal-body .pdf-table td .item-code { font-size: 10px; font-weight: 700; color: #64748b; margin-bottom: 1px; }

/* Pagamento + Totais */
.orc-preview-modal-body .pdf-totals-payment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-top: 10px;
}

.orc-preview-modal-body .pdf-payment-block { display: flex; flex-direction: column; }

.orc-preview-modal-body .pdf-payment-block-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  margin-bottom: 6px;
}

.orc-preview-modal-body .pdf-payment-text {
  flex: 1;
  font-size: 12px;
  color: #334155;
  line-height: 1.5;
  padding: 9px 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
}

.orc-preview-modal-body .pdf-totals { display: flex; flex-direction: column; justify-content: flex-end; }

.orc-preview-modal-body .pdf-totals-box {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.orc-preview-modal-body .pdf-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.orc-preview-modal-body .pdf-total-row:last-child { border-bottom: none; }
.orc-preview-modal-body .pdf-total-row.is-final { background: #dcfce7; color: #14532d; padding: 9px 12px; }
.orc-preview-modal-body .pdf-total-row.is-final span   { font-weight: 700; font-size: 13px; }
.orc-preview-modal-body .pdf-total-row.is-final strong { font-size: 16px; font-weight: 800; color: #15803d; }
.orc-preview-modal-body .pdf-total-row .discount-val   { color: #dc2626; font-weight: 700; }

/* Observações */
.orc-preview-modal-body .pdf-notes {
  font-size: 12px;
  color: #334155;
  line-height: 1.55;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 8px;
}

/* Rodapé do documento */
.orc-preview-modal-body .pdf-footer {
  padding: 9px 24px;
  background: #f8fafc;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.orc-preview-modal-body .pdf-footer-text,
.orc-preview-modal-body .pdf-footer-id { font-size: 10px; color: #94a3b8; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------
   Responsividade do modal
------------------------------------------------------- */
@media (max-width: 767px) {
  .orc-preview-modal {
    padding: 0;
    align-items: flex-end;
  }

  .orc-preview-modal-box {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
  }

  .orc-preview-modal-header { padding: 12px 14px; }

  .orc-preview-modal-header-actions .gi-btn {
    font-size: 13px;
    padding: 7px 10px;
  }

  .orc-preview-modal-body { padding: 14px 12px 28px; }

  .orc-preview-modal-body .pdf-doc-head { grid-template-columns: 1fr; }
  .orc-preview-modal-body .pdf-doc-head-meta { text-align: left; }
  .orc-preview-modal-body .pdf-body { padding: 0 14px; }

  .orc-preview-modal-body .pdf-info-grid,
  .orc-preview-modal-body .pdf-totals-payment-row { grid-template-columns: 1fr; }

  .orc-preview-modal-body .pdf-footer { padding: 10px 14px; }
}

/* Ajustes específicos: /Orcamentos/orcamentos_oportunidades.php e /Orcamentos/orcamentos_oportunidade_form.php */

.page-orcamentos-oportunidades .gi-container-fluid,
.page-orcamentos-form .gi-container-fluid {
  max-width: 100%;
  width: 100%;
  padding: 24px 28px 36px;
  box-sizing: border-box;
}

.orc-page-card {
  overflow: hidden;
}

.orc-card-body {
  padding: 18px 18px 20px;
}

.orc-filter-form-opps {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) repeat(2, minmax(210px, 1fr)) auto;
  gap: 14px;
  align-items: end;
}

.orc-filter-field,
.orc-filter-actions-block {
  min-width: 0;
}

.orc-filter-field.is-search {
  min-width: 0;
}

.orc-filter-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.orc-table-opps td,
.orc-table-opps th {
  vertical-align: top;
}

.orc-btn-soft-danger {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}

.orc-btn-soft-danger:hover {
  background: #ffe4e6 !important;
  border-color: #fda4af !important;
}

.orc-form-layout {
  display: grid;
  gap: 14px;
}

.orc-inner-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 18px;
  background: #fff;
}

.orc-inner-card-head {
  margin-bottom: 16px;
}

.orc-inner-card-head h2 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.2;
}

.orc-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.orc-col-span-2 {
  grid-column: 1 / -1;
}

.page-orcamentos-form .gi-input,
.page-orcamentos-form .gi-textarea-lg {
  width: 100%;
}

.page-orcamentos-form .gi-textarea-lg {
  min-height: 132px;
}

.orc-form-actions-card {
  padding-top: 14px;
}

.orc-form-actions-top {
  margin-bottom: 12px;
}

.orc-row-actions-form {
  align-items: center;
}

@media (max-width: 1279px) {
  .orc-filter-form-opps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .orc-filter-actions-block {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .page-orcamentos-oportunidades .gi-container-fluid,
  .page-orcamentos-form .gi-container-fluid {
    padding: 16px 14px 28px;
  }

  .orc-card-body,
  .orc-inner-card {
    padding: 14px;
  }

  .orc-filter-form-opps,
  .orc-form-grid-2 {
    grid-template-columns: 1fr;
  }

  .orc-col-span-2,
  .orc-filter-actions-block {
    grid-column: auto;
  }

  .orc-filter-actions-row,
  .orc-filter-actions-row .gi-btn,
  .orc-row-actions-form,
  .orc-row-actions-form .gi-btn {
    width: 100%;
  }
}


/* Ajuste de estabilidade visual dos ícones de ação */
.orc-row-actions-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.orc-row-actions-icons .orc-inline-form {
  display: inline-flex;
  margin: 0;
}

.orc-icon-action {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box;
}

.orc-icon-action > svg,
.orc-icon-action svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  flex: 0 0 15px;
  display: block;
}


/* ── Mobile: funil de vendas ── */
@media (max-width: 767px){
  /* Filtros: um por linha */
  .page-orcamentos-funil .ws-filter-form.ws-filter-form-4{
    grid-template-columns: 1fr;
  }

  .page-orcamentos-funil .ws-filter-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .page-orcamentos-funil .ws-filter-actions .gi-btn:last-child{
    grid-column: 1 / -1;
  }

  /* Colunas do funil: quase full-width com snap */
  .page-orcamentos-funil .orc-funil-board-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .page-orcamentos-funil .orc-funil-board{
    padding: 12px;
    gap: 10px;
  }
}

/* ── Funil de vendas: fix de scroll horizontal ──────────────
   Em mobile (max-width: 980px), o layout.css define
   .gi-content-shell { overflow-x: visible } o que impede
   o scroll horizontal do board-wrap. Sobrescrevemos aqui.
─────────────────────────────────────────────────────────── */
.page-orcamentos-funil .gi-content-shell{
  overflow-x: auto !important;
}

@media (max-width: 980px){
  .page-orcamentos-funil .ws-filter-form.ws-filter-form-4{
    grid-template-columns: 1fr;
  }

  .page-orcamentos-funil .ws-filter-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .page-orcamentos-funil .ws-filter-actions .gi-btn:last-child{
    grid-column: 1 / -1;
  }

  .page-orcamentos-funil .orc-funil-board-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .page-orcamentos-funil .orc-funil-board{
    padding: 12px;
    gap: 10px;
  }
}
/* =========================================================
   10. PAGAMENTOS
   Páginas:
   - /Pagamentos/payment_dashboard.php
   - /Pagamentos/payment_configuracoes.php
   - /Pagamentos/payment_transacoes.php
   - /Pagamentos/payment_transacao_detalhes.php
   - /Pagamentos/payment_assinaturas.php
   - /Pagamentos/payment_formas_pagamento.php
   - /Pagamentos/payment_relatorios.php
   - /Pagamentos/payment_webhook_logs.php
   - /Pagamentos/payment_webhook_testes.php
========================================================= */

/* ---------------------------------------------------------
   10.1 BASE COMPARTILHADA
--------------------------------------------------------- */

.page-payment-dashboard .gi-container-fluid,
.page-payment-configuracoes .gi-container-fluid,
.page-payment-transacoes .gi-container-fluid,
.page-payment-transacao-detalhes .gi-container-fluid,
.page-payment-assinaturas .gi-container-fluid,
.page-payment-formas-pagamento .gi-container-fluid,
.page-payment-relatorios .gi-container-fluid,
.page-payment-webhook-logs .gi-container-fluid,
.page-payment-webhook-testes .gi-container-fluid{
  max-width: 100%;
  width: 100%;
  padding: 24px 28px 36px;
  box-sizing: border-box;
}

.pay-page-card{
  overflow: hidden;
}

.pay-card-body{
  padding: 18px 18px 20px;
}

.pay-page-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.pay-page-head-text{
  min-width: 0;
}

.pay-page-head-text h1,
.pay-page-head-text h2{
  margin: 0 0 4px;
}

.pay-page-head-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pay-page-head-actions .gi-btn{
  min-height: 42px;
}

.pay-alert-gap,
.pay-card-gap{
  margin-top: 12px;
}

.pay-inner-card{
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  padding: 18px;
  background: var(--card);
  overflow: hidden;
}

.pay-inner-card-head{
  margin-bottom: 16px;
}

.pay-inner-card-head h2{
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.2;
}

.pay-inner-card-head .gi-muted{
  margin-top: 0;
}

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

.pay-dash-list{
  display: flex;
  flex-direction: column;
}

.pay-dash-kpis{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.pay-dash-kpis-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pay-kpi-card{
  padding: 16px 18px;
  border-radius: 18px;
}

.pay-kpi-label{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.pay-kpi-value{
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.pay-kpi-value-money{
  font-size: 24px;
}

.pay-summary-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.pay-summary-item{
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15,23,42,0.02);
  min-width: 0;
}

body.theme-dark .pay-summary-item{
  background: rgba(255,255,255,0.04);
}

.pay-summary-item strong{
  color: var(--text);
  font-size: 13px;
}

.pay-summary-item span{
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 14px;
}

.pay-form-layout{
  display: grid;
  gap: 12px;
}

.pay-form-grid-2,
.pay-form-grid-3,
.pay-toggle-grid{
  display: grid;
  gap: 14px 16px;
}

.pay-form-grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pay-form-grid-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pay-toggle-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pay-col-span-2{
  grid-column: span 2;
}

.pay-col-span-3{
  grid-column: 1 / -1;
}

.pay-row-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pay-row-actions-form{
  padding-top: 4px;
}

.pay-row-actions form{
  margin: 0;
}

.pay-row-actions .gi-btn,
.pay-row-actions form .gi-btn{
  min-height: 40px;
}

.pay-inline-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pay-inline-pills .gi-pill{
  margin-left: 0;
}

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

.pay-table{
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

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

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

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

.pay-table tr:hover td{
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-table tr:hover td{
  background: rgba(255,255,255,0.04);
}

.pay-table .is-main{
  min-width: 260px;
}

.pay-table .is-actions{
  white-space: nowrap;
  width: 1%;
}

.pay-table-main{
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pay-table-main strong{
  color: var(--text);
  overflow-wrap: anywhere;
}

.pay-table-main span{
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.pay-meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--muted);
}

.pay-mobile-list{
  display: none;
  gap: 12px;
}

.pay-mobile-card{
  padding: 14px;
  border-radius: 16px;
}

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

.pay-mobile-card-main{
  min-width: 0;
  display: grid;
  gap: 4px;
}

.pay-mobile-card-main strong{
  color: var(--text);
  overflow-wrap: anywhere;
}

.pay-mobile-card-main span{
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.pay-mobile-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.pay-mobile-item{
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-mobile-item{
  background: rgba(255,255,255,0.04);
}

.pay-mobile-item strong{
  font-size: 12px;
  color: var(--text);
}

.pay-mobile-item span{
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pay-mobile-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.pay-mobile-actions .gi-btn,
.pay-mobile-actions form,
.pay-mobile-actions form .gi-btn{
  width: 100%;
}

.pay-empty{
  padding: 18px;
}

.pay-empty .gi-muted{
  margin-top: 0;
}

/* ---------------------------------------------------------
   10.2 DASHBOARD / CONFIGURAÇÕES
--------------------------------------------------------- */

.page-payment-dashboard .pay-dash-list .gi-list-item{
  align-items: center;
}

.page-payment-configuracoes .pay-toggle-grid .pay-summary-item{
  min-height: 100%;
}

.page-payment-configuracoes .pay-mobile-actions{
  grid-template-columns: 1fr;
}


/* ---------------------------------------------------------
   10.2.1 CONFIGURAÇÕES — Modal de detalhes
--------------------------------------------------------- */
/* ── Modal de detalhes de configuração ── */
.pay-cfg-dialog{
  width: min(560px, calc(100vw - 24px));
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(15,23,42,0.22);
}

.pay-cfg-dialog::backdrop{
  background: rgba(15,23,42,0.52);
}

/* Cabeçalho do modal */
.pay-cfg-dialog-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(22,163,74,0.07) 0%, rgba(22,163,74,0.02) 100%);
}

.pay-cfg-dialog-head-main{
  min-width: 0;
}

.pay-cfg-dialog-title{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.pay-cfg-dialog-title h3{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.2px;
}

.pay-cfg-dialog-head-main > p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.pay-cfg-dialog-close{
  flex-shrink: 0;
}

/* Corpo do modal */
.pay-cfg-dialog-body{
  padding: 18px 20px 22px;
  display: grid;
  gap: 16px;
}

/* Grid 2 colunas para os dados resumidos */
.pay-cfg-dialog-meta{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Divisor entre seções */
.pay-cfg-dialog-divider{
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* Seção de ações dentro do modal */
.pay-cfg-dialog-section{
  display: grid;
  gap: 10px;
}

.pay-cfg-dialog-section-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Botões de ação em linha (flex, wrap) */
.pay-cfg-dialog-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pay-cfg-dialog-actions form{
  margin: 0;
}

/* Defaults em grid 3 colunas para equilibrar os 3 botões */
.pay-cfg-dialog-actions-defaults{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pay-cfg-dialog-actions-defaults form,
.pay-cfg-dialog-actions-defaults form .gi-btn{
  width: 100%;
}

/* ── Responsividade mobile do formulário ── */
@media (max-width: 768px){
  .pay-form-grid-2,
  .pay-form-grid-3{
    grid-template-columns: 1fr;
  }

  .pay-toggle-grid{
    grid-template-columns: 1fr 1fr;
  }

  .pay-col-span-2{
    grid-column: span 1;
  }

  /* Modal em mobile: cabeçalho empilhado */
  .pay-cfg-dialog{
    width: min(100vw - 16px, 560px);
    border-radius: 16px;
  }

  .pay-cfg-dialog-head{
    flex-direction: column;
    align-items: stretch;
  }

  .pay-cfg-dialog-close{
    width: 100%;
  }

  .pay-cfg-dialog-body{
    padding: 16px;
  }

  /* Defaults em mobile: 1 coluna */
  .pay-cfg-dialog-actions-defaults{
    grid-template-columns: 1fr;
  }

  /* Card mobile com botão único ocupando largura total */
  .page-payment-configuracoes .pay-mobile-actions{
    grid-template-columns: 1fr;
  }
}

/* ── Exibição tabela vs cards mobile ── */
@media (max-width: 767px){
  .pay-table-wrap{
    display: none;
  }
  .pay-mobile-list{
    display: grid;
    padding: 14px;
  }
}

@media (min-width: 768px){
  .pay-mobile-list{
    display: none;
  }
}

/* Coluna Ações: tamanho mínimo apenas para o botão */
.page-payment-configuracoes .pay-table .is-actions{
  white-space: nowrap;
  width: 1%;
}


/* =========================================================

/* =========================================================
   PAGAMENTOS — Ajustes Asaas / credenciais / cobrança gateway
========================================================= */

.pay-field-help{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.pay-gateway-guide{
  display: grid;
  gap: 12px;
}

.pay-gateway-panel{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15,23,42,0.025);
  padding: 14px;
  display: grid;
  gap: 8px;
}

body.theme-dark .pay-gateway-panel{
  background: rgba(255,255,255,0.045);
}

.pay-gateway-panel strong{
  font-size: 14px;
  color: var(--text);
}

.pay-gateway-panel p{
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.pay-link-list{
  margin: 2px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.pay-link-list code,
.pay-asaas-info code{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pay-credential-current-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.pay-credential-current,
.pay-reference-card{
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-credential-current,
body.theme-dark .pay-reference-card{
  background: rgba(255,255,255,0.04);
}

.pay-credential-current strong,
.pay-reference-card strong{
  font-size: 12px;
  color: var(--text);
}

.pay-credential-current span,
.pay-reference-card span{
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pay-asaas-info{
  display: grid;
  gap: 8px;
}

.pay-reference-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pay-reference-grid .gi-btn{
  width: 100%;
}

.pay-pix-box{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(15,23,42,0.02);
  display: grid;
  gap: 12px;
}

body.theme-dark .pay-pix-box{
  background: rgba(255,255,255,0.04);
}

.pay-pix-box .pay-inner-card-head{
  margin-bottom: 0;
}

.pay-pix-box h3{
  margin: 0 0 4px;
  font-size: 17px;
}

.pay-pix-image-wrap{
  display: flex;
  justify-content: center;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--card);
}

.pay-pix-image{
  width: min(260px, 100%);
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.pay-copy-block{
  min-height: 110px;
}

@media (max-width: 991px){
  .pay-credential-current-grid,
  .pay-reference-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px){
  .pay-gateway-panel,
  .pay-pix-box{
    padding: 12px;
  }

  .pay-pix-image{
    width: min(220px, 100%);
  }
}


/* =========================================================
   PAGAMENTOS — Transações: criação recolhida + fatura em modal
========================================================= */

.pay-create-card.is-hidden{
  display: none !important;
}

.pay-action-icons{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.pay-action-icon{
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.pay-invoice-modals{
  display: contents;
}

body.pay-modal-open{
  overflow: hidden;
}

.pay-invoice-dialog{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 14px;
  border: 0;
  background: rgba(15, 23, 42, 0.58);
  color: var(--text);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.pay-invoice-dialog.is-open{
  display: flex;
}

.pay-invoice-dialog[hidden]{
  display: none !important;
}

.pay-invoice-modal{
  width: min(920px, 100%);
  max-height: calc(100dvh - 28px);
  max-height: calc(100svh - 28px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pay-invoice-modal-head,
.pay-invoice-modal-actions{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.pay-invoice-modal-head h2{
  margin: 0;
  font-size: 20px;
}

.pay-invoice-modal-body{
  padding: 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.pay-invoice-modal-body-frame{
  padding: 0;
  min-height: min(72dvh, 720px);
  min-height: min(72svh, 720px);
  background: rgba(15,23,42,0.03);
}

.pay-invoice-frame{
  display: block;
  width: 100%;
  min-height: min(72dvh, 720px);
  min-height: min(72svh, 720px);
  height: min(72dvh, 720px);
  height: min(72svh, 720px);
  border: 0;
  background: #fff;
}

.pay-invoice-print-area{
  display: grid;
  gap: 16px;
}

.pay-invoice-brand{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}

.pay-invoice-brand h2{
  margin: 0 0 4px;
  font-size: 24px;
}

.pay-invoice-data-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pay-invoice-data-item{
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-invoice-data-item{
  background: rgba(255,255,255,0.04);
}

.pay-invoice-data-item strong{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.pay-invoice-data-item span{
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pay-invoice-payment-box{
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-invoice-payment-box{
  background: rgba(255,255,255,0.04);
}

.pay-invoice-payment-box h3{
  margin: 0;
  font-size: 18px;
}

.pay-invoice-modal-actions{
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

@media (max-width: 767px){
  .pay-action-icons{
    width: 100%;
  }

  .pay-action-icon{
    flex: 1 1 44px;
    width: auto;
  }

  .pay-invoice-modal-head,
  .pay-invoice-modal-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .pay-invoice-modal-actions .gi-btn{
    width: 100%;
  }

  .pay-invoice-data-grid{
    grid-template-columns: 1fr;
  }

  .pay-invoice-brand{
    flex-direction: column;
  }
}

@media (min-width: 768px) and (max-width: 1023px){
  .pay-invoice-data-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pay-invoice-modal-actions .pay-action-icon{
  flex: 0 0 42px;
}

.pay-invoice-modal-actions .pay-action-icon[disabled]{
  opacity: .6;
  cursor: wait;
}

@media (max-width: 767px){
  .pay-invoice-modal-actions{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
  }

  .pay-invoice-modal-actions .pay-action-icon{
    width: 100%;
    min-width: 0;
    flex: initial;
  }
}

/* =========================================================
   PAGAMENTOS — Configurações recolhidas + fatura visual
========================================================= */

.pay-config-form.is-hidden{
  display: none !important;
}

.pay-invoice-doc{
  background: var(--card);
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(15,23,42,.08);
  overflow: hidden;
  display: block;
}

body.theme-dark .pay-invoice-doc{
  border-color: rgba(255,255,255,.12);
}

.pay-invoice-doc-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 24px 14px;
  border-bottom: 2px solid var(--brand);
  background: linear-gradient(135deg, rgba(248,250,252,.94) 0%, rgba(240,253,244,.96) 100%);
}

body.theme-dark .pay-invoice-doc-head{
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(22,163,74,.11) 100%);
}

.pay-invoice-doc-logo-area{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.pay-invoice-doc-kicker{
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand);
  margin-bottom: 6px;
}

.pay-invoice-doc-logo-img{
  display: block;
  max-width: 220px;
  max-height: 76px;
  object-fit: contain;
}

.pay-invoice-doc-company{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.pay-invoice-doc-company-doc{
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

.pay-invoice-doc-meta{
  text-align: right;
  display: grid;
  gap: 5px;
  min-width: 180px;
}

.pay-invoice-doc-number{
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.pay-invoice-doc-date{
  font-size: 12px;
  color: var(--muted);
}

.pay-invoice-doc-body{
  padding: 0 24px 18px;
}

.pay-invoice-doc-section{
  padding: 14px 0;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

body.theme-dark .pay-invoice-doc-section{
  border-bottom-color: rgba(255,255,255,.10);
}

.pay-invoice-doc-section:last-child{
  border-bottom: 0;
}

.pay-invoice-doc-section-label{
  font-size: 10px;
  font-weight: 900;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.pay-invoice-doc-title-block h2{
  margin: 0 0 5px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
}

.pay-invoice-doc-title-block p{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.pay-invoice-doc-info-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.pay-invoice-doc-info-card{
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 10px;
  padding: 9px 11px;
  background: rgba(248,250,252,.9);
  min-width: 0;
}

body.theme-dark .pay-invoice-doc-info-card{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

.pay-invoice-doc-info-title{
  font-size: 10px;
  font-weight: 900;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.pay-invoice-doc-info-row{
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 0;
  border-top: 1px dashed rgba(15,23,42,.12);
}

body.theme-dark .pay-invoice-doc-info-row{
  border-top-color: rgba(255,255,255,.11);
}

.pay-invoice-doc-info-row:first-of-type{
  border-top: 0;
}

.pay-invoice-doc-info-row span{
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
}

.pay-invoice-doc-info-row strong{
  font-size: 12px;
  color: var(--text);
  font-weight: 700;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.pay-invoice-doc-payment-box{
  border-radius: 12px;
}

.pay-invoice-doc-footer{
  padding: 10px 24px 13px;
  border-top: 1px solid rgba(15,23,42,.08);
  font-size: 11px;
  color: var(--muted);
  background: rgba(248,250,252,.9);
}

body.theme-dark .pay-invoice-doc-footer{
  border-top-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

@media (max-width: 767px){
  .pay-invoice-doc-head{
    grid-template-columns: 1fr;
    padding: 14px 16px 12px;
  }

  .pay-invoice-doc-meta{
    text-align: left;
    min-width: 0;
  }

  .pay-invoice-doc-body{
    padding: 0 16px 14px;
  }

  .pay-invoice-doc-info-grid{
    grid-template-columns: 1fr;
  }

  .pay-invoice-doc-info-row{
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .pay-invoice-doc-footer{
    padding-left: 16px;
    padding-right: 16px;
  }

  .pay-invoice-doc-logo-img{
    max-width: 190px;
    max-height: 66px;
  }
}

   10.3 TRANSAÇÕES
--------------------------------------------------------- */

.page-payment-transacoes .pay-filter-card,
.page-payment-transacoes .pay-create-card,
.page-payment-transacoes .pay-list-card{
  overflow: hidden;
}

.pay-table-transactions{
  min-width: 1380px;
}

/* ---------------------------------------------------------
   10.4 DETALHES DA TRANSAÇÃO
--------------------------------------------------------- */

.pay-event-list{
  display: grid;
  gap: 12px;
}

.pay-event-item{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-event-item{
  background: rgba(255,255,255,0.04);
}

.pay-event-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pay-event-head strong{
  color: var(--text);
}

.pay-event-head span{
  color: var(--muted);
  font-size: 13px;
}

.pay-event-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--muted);
}

.pay-event-payload{
  min-height: 100px;
}

.pay-code-block{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   10.5 ASSINATURAS
--------------------------------------------------------- */

.pay-table-subscriptions{
  min-width: 1260px;
}

.page-payment-assinaturas .pay-mobile-actions{
  grid-template-columns: 1fr;
}

/* ---------------------------------------------------------
   10.6 FORMAS DE PAGAMENTO
--------------------------------------------------------- */

.pay-table-methods{
  min-width: 1240px;
}

.pay-method-badge-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pay-method-badge-row .gi-pill{
  margin-left: 0;
}

.page-payment-formas-pagamento .pay-mobile-actions{
  grid-template-columns: 1fr;
}

/* ---------------------------------------------------------
   10.7 RELATÓRIOS
--------------------------------------------------------- */

.pay-table-reports{
  min-width: 860px;
}

.page-payment-relatorios .pay-dash-grid{
  align-items: start;
}


/* =========================================================
   PAGAMENTOS — Webhook logs em modal
========================================================= */

.pay-webhook-log-modals{
  display: contents;
}

.pay-webhook-dialog{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 14px;
  border: 0;
  background: rgba(15, 23, 42, 0.58);
  color: var(--text);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.pay-webhook-dialog.is-open{
  display: flex;
}

.pay-webhook-dialog[hidden]{
  display: none !important;
}

.pay-webhook-modal{
  width: min(980px, 100%);
  max-height: calc(100dvh - 28px);
  max-height: calc(100svh - 28px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pay-webhook-modal-head,
.pay-webhook-modal-actions{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.pay-webhook-modal-head h2{
  margin: 0;
  font-size: 20px;
}

.pay-webhook-modal-body{
  padding: 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.pay-webhook-modal-actions{
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.pay-code-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pay-code-col{
  min-width: 0;
}

@media (max-width: 767px){
  .pay-webhook-modal-head,
  .pay-webhook-modal-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .pay-webhook-modal-actions .gi-btn{
    width: 100%;
  }

  .pay-code-grid{
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   10.8 WEBHOOK LOGS / TESTES
--------------------------------------------------------- */

.pay-table-webhooks{
  min-width: 1100px;
}

.page-payment-webhook-testes .pay-mobile-actions{
  grid-template-columns: 1fr;
}

/* ---------------------------------------------------------
   10.9 RESPONSIVO
--------------------------------------------------------- */

@media (max-width: 1279px){
  .pay-dash-kpis{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pay-dash-kpis-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pay-dash-grid,
  .pay-form-grid-3{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px){
  .pay-form-grid-2,
  .pay-toggle-grid,
  .pay-summary-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pay-col-span-2,
  .pay-col-span-3{
    grid-column: auto;
  }
}

@media (max-width: 767px){
  .page-payment-dashboard .gi-container-fluid,
  .page-payment-configuracoes .gi-container-fluid,
  .page-payment-transacoes .gi-container-fluid,
  .page-payment-transacao-detalhes .gi-container-fluid,
  .page-payment-assinaturas .gi-container-fluid,
  .page-payment-formas-pagamento .gi-container-fluid,
  .page-payment-relatorios .gi-container-fluid,
  .page-payment-webhook-logs .gi-container-fluid,
  .page-payment-webhook-testes .gi-container-fluid{
    padding: 16px 14px 28px;
  }

  .pay-card-body,
  .pay-inner-card,
  .pay-kpi-card{
    padding: 14px;
  }

  .pay-dash-kpis,
  .pay-dash-kpis-3,
  .pay-dash-grid,
  .pay-form-grid-2,
  .pay-form-grid-3,
  .pay-toggle-grid,
  .pay-summary-grid,
  .pay-mobile-grid{
    grid-template-columns: 1fr;
  }

  .pay-page-head-actions,
  .pay-page-head-actions .gi-btn,
  .pay-row-actions,
  .pay-row-actions .gi-btn,
  .pay-row-actions form,
  .pay-row-actions form .gi-btn{
    width: 100%;
  }

  .pay-mobile-actions{
    grid-template-columns: 1fr;
  }

  .pay-table-wrap{
    display: none;
  }

  .pay-mobile-list{
    display: grid;
  }

  .pay-kpi-value{
    font-size: 24px;
  }

  .pay-kpi-value-money{
    font-size: 22px;
  }

  .pay-inner-card-head h2{
    font-size: 18px;
  }

  .pay-event-head,
  .pay-page-head{
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================
   PAGAMENTOS — Transações com faturas vinculadas colapsáveis
========================================================= */

.pay-tx-name-wrap,
.pay-tx-mobile-title-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}

.pay-tx-toggle-placeholder{
  width:34px;
  min-width:34px;
  height:34px;
}

.pay-tx-toggle-btn{
  position:relative;
  width:34px;
  min-width:34px;
  height:34px;
  border:1px solid rgba(148,163,184,.30);
  border-radius:10px;
  background:#fff;
  color:#475569;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.pay-tx-toggle-btn:hover{
  border-color:rgba(37,99,235,.35);
  color:#1d4ed8;
  background:#f8fbff;
}

.pay-tx-toggle-btn.is-expanded{
  border-color:rgba(37,99,235,.45);
  color:#1d4ed8;
  background:rgba(37,99,235,.08);
}

.pay-expand-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease;
  line-height:1;
}

.pay-tx-toggle-btn.is-expanded .pay-expand-chevron{
  transform:rotate(180deg);
}

.pay-toggle-count-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#3b82f6;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:18px;
  text-align:center;
  box-shadow:0 2px 8px rgba(15,23,42,.18);
}

.pay-linked-hint{
  font-weight:800;
  color:#1d4ed8 !important;
}

.pay-transaction-row.is-expanded td{
  background:rgba(37,99,235,.035);
}

.pay-tx-children-row{
  background:#f8fafc;
}

.pay-tx-children-cell{
  padding:0 !important;
}

.pay-tx-children-panel{
  padding:14px 16px 16px;
}

.pay-tx-children-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.pay-tx-children-panel-title-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#334155;
  font-size:14px;
}

.pay-tx-children-inner-table{
  min-width:980px;
  margin-top:4px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  overflow:hidden;
}

.pay-mobile-child-panel{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(15,23,42,.08);
  display:grid;
  gap:10px;
}

.pay-mobile-child-header,
.pay-mobile-child-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.pay-mobile-child-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:12px;
  display:grid;
  gap:8px;
  background:#fff;
}

body.theme-dark .pay-tx-toggle-btn,
body.theme-dark .pay-mobile-child-card{
  background:rgba(255,255,255,.06);
}

body.theme-dark .pay-tx-children-row{
  background:rgba(255,255,255,.04);
}

@media (max-width:767px){
  .pay-tx-toggle-btn,
  .pay-tx-toggle-placeholder{
    width:36px;
    min-width:36px;
    height:36px;
  }

  .pay-tx-mobile-title-row{
    width:100%;
  }

  .pay-tx-children-panel{
    padding:12px;
  }
}

/* Pagamentos — detalhes da transação (cartão) */
.pay-card-form-panel{
  margin-bottom:14px;
}

.pay-card-form-note{
  margin:0 0 12px;
}

/* =========================================================
   PAGAMENTOS — complementos para cartão e assinaturas
========================================================= */

.pay-card-form-panel{
  margin-bottom: 14px;
}

.pay-card-form-note{
  margin: 0 0 12px;
}

.pay-table-subscriptions{
  min-width: 1440px;
}

.page-payment-assinaturas .pay-mobile-actions{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.page-payment-assinaturas .pay-mobile-actions .pay-row-actions{
  width: 100%;
  justify-content: flex-start;
}

.page-payment-assinaturas .pay-mobile-actions form{
  width: auto;
}

.page-payment-assinaturas .pay-mobile-actions .pay-action-icon,
.page-payment-assinaturas .pay-mobile-actions form .pay-action-icon{
  width: 40px;
  min-width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

@media (max-width: 720px){
  .page-payment-assinaturas .pay-mobile-actions .pay-row-actions{
    justify-content: stretch;
  }
}

.pay-btn-danger-soft,
.gi-btn.pay-btn-danger-soft,
.pay-action-icon.pay-btn-danger-soft{
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.20);
  color: #991b1b;
}

.pay-btn-danger-soft:hover,
.gi-btn.pay-btn-danger-soft:hover,
.pay-action-icon.pay-btn-danger-soft:hover{
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
  color: #7f1d1d;
}

/* =========================================================
   PAGAMENTOS — Dashboard com indicadores operacionais
   Onde colocar: adicionar ao final do bloco 10 (Pagamentos) do pages.css.
========================================================= */

.page-payment-dashboard .pay-card-body{
  display: grid;
  gap: 14px;
}

.pay-dashboard-hero{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(22,163,74,0.18);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(22,163,74,0.10), rgba(59,130,246,0.06));
}

.pay-dashboard-hero-main{
  min-width: 0;
  display: grid;
  gap: 6px;
}

.pay-dashboard-eyebrow{
  font-size: 12px;
  font-weight: 900;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pay-dashboard-hero h2{
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--text);
}

.pay-dashboard-hero p{
  max-width: 780px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.pay-dashboard-score{
  flex: 0 0 150px;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
}

.pay-dashboard-score strong{
  font-size: 26px;
  line-height: 1;
  color: var(--text);
}

.pay-dashboard-score span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pay-dashboard-score.is-success{
  border-color: rgba(34,197,94,0.28);
  background: rgba(34,197,94,0.10);
}

.pay-dashboard-score.is-warning{
  border-color: rgba(245,158,11,0.30);
  background: rgba(245,158,11,0.10);
}

.pay-dashboard-score.is-danger{
  border-color: rgba(239,68,68,0.24);
  background: rgba(239,68,68,0.08);
}

.pay-dash-kpis-dashboard{
  margin-bottom: 0;
}

.pay-kpi-card{
  position: relative;
}

.pay-kpi-card-success{
  border-color: rgba(34,197,94,0.26);
}

.pay-kpi-card-info{
  border-color: rgba(59,130,246,0.22);
}

.pay-kpi-card-warning{
  border-color: rgba(245,158,11,0.30);
}

.pay-kpi-card-neutral{
  border-color: rgba(15,23,42,0.10);
}

.pay-kpi-sub{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.pay-dashboard-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 14px;
  align-items: start;
}

.pay-dashboard-main,
.pay-dashboard-side{
  min-width: 0;
  display: grid;
  gap: 14px;
}

.pay-status-board{
  display: grid;
  gap: 10px;
}

.pay-status-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 35%);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-status-row{
  background: rgba(255,255,255,0.04);
}

.pay-status-row-main{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pay-status-row-main strong{
  font-size: 14px;
  color: var(--text);
}

.pay-status-row-main span{
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pay-status-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.08);
  overflow: hidden;
}

body.theme-dark .pay-status-bar{
  background: rgba(255,255,255,0.10);
}

.pay-status-bar span{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(100,116,139,0.55);
}

.pay-status-row.is-success .pay-status-bar span{ background: rgba(34,197,94,0.72); }
.pay-status-row.is-warning .pay-status-bar span{ background: rgba(245,158,11,0.72); }
.pay-status-row.is-danger .pay-status-bar span{ background: rgba(239,68,68,0.62); }
.pay-status-row.is-muted .pay-status-bar span{ background: rgba(100,116,139,0.55); }

.pay-status-bar .is-pct-0{ width: 3%; }
.pay-status-bar .is-pct-10{ width: 10%; }
.pay-status-bar .is-pct-20{ width: 20%; }
.pay-status-bar .is-pct-30{ width: 30%; }
.pay-status-bar .is-pct-40{ width: 40%; }
.pay-status-bar .is-pct-50{ width: 50%; }
.pay-status-bar .is-pct-60{ width: 60%; }
.pay-status-bar .is-pct-70{ width: 70%; }
.pay-status-bar .is-pct-80{ width: 80%; }
.pay-status-bar .is-pct-90{ width: 90%; }
.pay-status-bar .is-pct-100{ width: 100%; }

.pay-dashboard-table{
  min-width: 1080px;
}

.pay-dashboard-table-wrap{
  border: 1px solid var(--border);
  border-radius: 14px;
}

.pay-health-list{
  display: grid;
  gap: 10px;
}

.pay-health-item{
  display: grid;
  grid-template-columns: 12px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-health-item{
  background: rgba(255,255,255,0.04);
}

.pay-health-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  background: rgba(100,116,139,0.55);
}

.pay-health-item div{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pay-health-item strong{
  font-size: 13px;
  color: var(--text);
}

.pay-health-item span{
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pay-health-item.is-success .pay-health-dot{ background: #22c55e; }
.pay-health-item.is-warning .pay-health-dot{ background: #f59e0b; }
.pay-health-item.is-danger .pay-health-dot{ background: #ef4444; }

.pay-summary-grid-compact{
  grid-template-columns: 1fr;
  gap: 10px;
}

.pay-dashboard-actions{
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.pay-dashboard-actions .gi-btn{
  justify-content: center;
}

.pay-dashboard-bottom-grid{
  align-items: start;
}

.pay-dashboard-gateway-list{
  display: grid;
  gap: 10px;
}

.pay-dashboard-gateway-card{
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-dashboard-gateway-card{
  background: rgba(255,255,255,0.04);
}

.pay-dashboard-gateway-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.pay-dashboard-gateway-head strong{
  color: var(--text);
}

.pay-dashboard-gateway-head span,
.pay-dashboard-gateway-meta,
.pay-dashboard-gateway-money{
  font-size: 12px;
  color: var(--muted);
}

.pay-dashboard-gateway-meta{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pay-dashboard-gateway-money{
  margin-top: 8px;
  font-weight: 800;
  color: var(--text);
}

.pay-dashboard-upcoming-list{
  display: grid;
  gap: 10px;
}

.pay-dashboard-upcoming-card{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-dashboard-upcoming-card{
  background: rgba(255,255,255,0.04);
}

.pay-dashboard-upcoming-card:hover{
  border-color: rgba(22,163,74,0.35);
  background: rgba(22,163,74,0.05);
}

.pay-dashboard-upcoming-card div{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pay-dashboard-upcoming-card div:last-child{
  text-align: right;
}

.pay-dashboard-upcoming-card strong{
  color: var(--text);
  overflow-wrap: anywhere;
}

.pay-dashboard-upcoming-card span{
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px){
  .pay-dashboard-layout{
    grid-template-columns: 1fr;
  }

  .pay-summary-grid-compact{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .pay-dashboard-hero{
    flex-direction: column;
  }

  .pay-dashboard-score{
    flex: 0 0 auto;
    min-height: 110px;
  }

  .pay-status-row{
    grid-template-columns: 1fr;
  }

  .pay-dashboard-upcoming-card{
    grid-template-columns: 1fr;
  }

  .pay-dashboard-upcoming-card div:last-child{
    text-align: left;
  }
}

@media (max-width: 640px){
  .pay-dashboard-hero h2{
    font-size: 23px;
  }

  .pay-summary-grid-compact{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PAGAMENTOS — Relatórios analíticos
========================================================= */

.page-payment-relatorios .pay-report-body{
  display: grid;
  gap: 14px;
}

.pay-report-hero{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(22,163,74,0.18);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(22,163,74,0.10), rgba(59,130,246,0.06));
}

.pay-report-hero-main{
  min-width: 0;
  display: grid;
  gap: 6px;
}

.pay-report-eyebrow{
  font-size: 12px;
  font-weight: 900;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pay-report-hero h2{
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--text);
}

.pay-report-hero p{
  max-width: 820px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.pay-report-score{
  flex: 0 0 150px;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
}

.pay-report-score strong{
  font-size: 26px;
  line-height: 1;
  color: var(--text);
}

.pay-report-score span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pay-report-score.is-success{
  border-color: rgba(34,197,94,0.28);
  background: rgba(34,197,94,0.10);
}

.pay-report-score.is-warning{
  border-color: rgba(245,158,11,0.30);
  background: rgba(245,158,11,0.10);
}

.pay-report-filter-card{
  overflow: visible;
}

.pay-report-filter-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 18px 18px;
  align-items: end;
}

.pay-report-filter-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.pay-report-filter-actions .gi-btn{
  min-width: 120px;
}

.pay-report-kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pay-report-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 14px;
  align-items: start;
}

.pay-report-main,
.pay-report-side{
  min-width: 0;
  display: grid;
  gap: 14px;
}

.pay-report-grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.pay-report-table-wrap{
  border: 1px solid var(--border);
  border-radius: 14px;
}

.pay-report-table{
  min-width: 860px;
}

.pay-report-table-wide{
  min-width: 1100px;
}

.pay-report-table .is-main{
  min-width: 260px;
}

.pay-report-muted-line{
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.pay-report-month-chart{
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
}

.pay-report-month-row{
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 230px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-report-month-row{
  background: rgba(255,255,255,0.04);
}

.pay-report-month-label{
  display: grid;
  gap: 3px;
}

.pay-report-month-label strong{
  font-size: 14px;
  color: var(--text);
}

.pay-report-month-label span,
.pay-report-month-values span{
  font-size: 12px;
  color: var(--muted);
}

.pay-report-bars{
  display: grid;
  gap: 5px;
}

.pay-report-bar,
.pay-report-status-bar{
  height: 9px;
  border-radius: 999px;
  background: rgba(15,23,42,0.08);
  overflow: hidden;
}

body.theme-dark .pay-report-bar,
body.theme-dark .pay-report-status-bar{
  background: rgba(255,255,255,0.10);
}

.pay-report-bar span,
.pay-report-status-bar span{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(100,116,139,0.55);
}

.pay-report-bar.is-success span,
.pay-report-status-row.is-success .pay-report-status-bar span{
  background: rgba(34,197,94,0.72);
}

.pay-report-bar.is-warning span,
.pay-report-status-row.is-warning .pay-report-status-bar span{
  background: rgba(245,158,11,0.72);
}

.pay-report-bar.is-danger span,
.pay-report-status-row.is-danger .pay-report-status-bar span{
  background: rgba(239,68,68,0.62);
}

.pay-report-month-values{
  display: grid;
  gap: 3px;
  text-align: right;
}

.pay-report-status-board{
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
}

.pay-report-status-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 34%);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15,23,42,0.02);
}

body.theme-dark .pay-report-status-row{
  background: rgba(255,255,255,0.04);
}

.pay-report-status-row.is-success{
  border-color: rgba(34,197,94,0.24);
}

.pay-report-status-row.is-warning{
  border-color: rgba(245,158,11,0.28);
}

.pay-report-status-row.is-danger{
  border-color: rgba(239,68,68,0.22);
}

.pay-report-status-main{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pay-report-status-main strong{
  font-size: 14px;
  color: var(--text);
}

.pay-report-status-main span,
.pay-report-status-meta span{
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pay-report-status-meta{
  display: grid;
  gap: 3px;
  text-align: right;
}

.pay-report-mini-list{
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
}

.pay-report-mini-item{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15,23,42,0.02);
  color: inherit;
  text-decoration: none;
}

body.theme-dark .pay-report-mini-item{
  background: rgba(255,255,255,0.04);
}

.pay-report-mini-item div{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pay-report-mini-item strong{
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.pay-report-mini-item > strong{
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.pay-report-mini-item span{
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pay-report-mini-link:hover{
  border-color: rgba(22,163,74,0.30);
  background: rgba(22,163,74,0.05);
}

.pay-report-bar .is-pct-0,
.pay-report-status-bar .is-pct-0{ width: 3%; }
.pay-report-bar .is-pct-10,
.pay-report-status-bar .is-pct-10{ width: 10%; }
.pay-report-bar .is-pct-20,
.pay-report-status-bar .is-pct-20{ width: 20%; }
.pay-report-bar .is-pct-30,
.pay-report-status-bar .is-pct-30{ width: 30%; }
.pay-report-bar .is-pct-40,
.pay-report-status-bar .is-pct-40{ width: 40%; }
.pay-report-bar .is-pct-50,
.pay-report-status-bar .is-pct-50{ width: 50%; }
.pay-report-bar .is-pct-60,
.pay-report-status-bar .is-pct-60{ width: 60%; }
.pay-report-bar .is-pct-70,
.pay-report-status-bar .is-pct-70{ width: 70%; }
.pay-report-bar .is-pct-80,
.pay-report-status-bar .is-pct-80{ width: 80%; }
.pay-report-bar .is-pct-90,
.pay-report-status-bar .is-pct-90{ width: 90%; }
.pay-report-bar .is-pct-100,
.pay-report-status-bar .is-pct-100{ width: 100%; }

@media (max-width: 1280px){
  .pay-report-filter-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pay-report-kpi-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pay-report-layout{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px){
  .pay-report-hero{
    flex-direction: column;
  }

  .pay-report-score{
    flex: 0 0 auto;
    min-height: 118px;
  }

  .pay-report-filter-grid,
  .pay-report-kpi-grid,
  .pay-report-grid-2{
    grid-template-columns: 1fr;
  }

  .pay-report-month-row{
    grid-template-columns: 1fr;
  }

  .pay-report-month-values{
    text-align: left;
  }

  .pay-report-status-row{
    grid-template-columns: 1fr;
  }

  .pay-report-status-meta{
    text-align: left;
  }

  .pay-report-filter-actions .gi-btn{
    width: 100%;
  }
}