/* ==========================================================================
   PH CORE Main — ph-core-main.css
   PH CORE-specific overrides, business tokens, Bootstrap integration
   Loaded LAST — highest cascade priority over ph-core.css et al.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUSINESS TOKENS — D-17
   ProHall-specific status and channel color tokens
   -------------------------------------------------------------------------- */
:root {
  /* Atendimento / communication status colors */
  --ph-status-whatsapp:   #25D366;  /* WhatsApp green */
  --ph-status-email:      #3B82F6;  /* Email blue */
  --ph-status-instagram:  #E1306C;  /* Instagram pink */

  /* Dashboard category colors */
  --ph-color-comex:       #0EA5E9;  /* COMEX — sky blue */
  --ph-color-nacional:    #F59E0B;  /* Nacional — amber */
}

/* --------------------------------------------------------------------------
   BOOTSTRAP OVERRIDE — .btn-primary → purple (D-12)
   Maps Bootstrap's CSS variable hooks to PH CORE purple tokens
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg:                  var(--ph-primary-600);
  --bs-btn-border-color:        var(--ph-primary-600);
  --bs-btn-hover-bg:            var(--ph-primary-700);
  --bs-btn-hover-border-color:  var(--ph-primary-700);
  --bs-btn-active-bg:           var(--ph-primary-800);
  --bs-btn-active-border-color: var(--ph-primary-800);
}

/* --------------------------------------------------------------------------
   IA TOPBAR TRIGGER — purple pill button
   Replaces legacy blue #2363EB from custom.css
   -------------------------------------------------------------------------- */
.ia-topbar-trigger {
  background:   var(--ph-primary-600) !important;
  border-color: var(--ph-primary-600) !important;
  color:        #ffffff !important;
  box-shadow:   0 2px 8px rgba(124, 58, 237, 0.35) !important;
}

.ia-topbar-trigger:hover {
  background:   var(--ph-primary-700) !important;
  border-color: var(--ph-primary-700) !important;
  box-shadow:   0 4px 12px rgba(124, 58, 237, 0.45) !important;
}

/* --------------------------------------------------------------------------
   PAGE CONTENT CONTAINER
   Preserves content padding from old custom.css for .page-content context
   -------------------------------------------------------------------------- */
.page-content > .container-fluid {
  max-width:     1480px;
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  16px;
  padding-right: 16px;
}

/* --------------------------------------------------------------------------
   ProHall Business Tokens — Channel + Status colors
   Values sourced from assets/css/custom.css lines ~2720-2818 (marketplace)
   and from module conventions (status). Available as var(--ph-channel-*)
   and var(--ph-status-*) to all PH CORE views.
   -------------------------------------------------------------------------- */
:root {
  /* Marketplace channel colors */
  --ph-channel-shopify:      #95BF47;  /* Shopify green */
  --ph-channel-mercadolivre: #FFE600;  /* Mercado Livre yellow */
  --ph-channel-shopee:       #EE4D2D;  /* Shopee orange-red */
  --ph-channel-tiktok:       #111111;  /* TikTok near-black */
  --ph-channel-amazon:       #FF9900;  /* Amazon orange */
  --ph-channel-magalu:       #0086FF;  /* Magazine Luiza blue */
  --ph-channel-belezanaweb:  #7C3AED;  /* Beleza na Web (matches --ph-primary-600) */
  --ph-channel-b2b:          #1F2937;  /* B2B slate */
}

/* --------------------------------------------------------------------------
   TOPBAR HELPER CLASSES — inline-topbar children
   Complement inline-topbar/inline-actions from ph-core-layout.css
   -------------------------------------------------------------------------- */

/* IA trigger pill button base */
.btn-ia-topbar {
  display: inline-flex;
  align-items: center;
  gap: var(--ph-space-2);
  padding: 6px 14px;
  border-radius: var(--ph-radius-full);
  border: 1px solid transparent;
  font-size: var(--ph-text-sm);
  font-weight: var(--ph-font-medium);
  font-family: var(--ph-font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--ph-transition-colors);
}

/* Vertical divider between user info sections */
.topbar-divider {
  width: 1px;
  height: 24px;
  background: var(--ph-border);
  flex-shrink: 0;
  margin: 0 var(--ph-space-2);
}

/* Circle icon button (calendar, etc.) */
.topbar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--ph-radius-full);
  background: var(--ph-surface);
  border: 1px solid var(--ph-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-gray-600);
  text-decoration: none;
  transition: var(--ph-transition-colors);
  box-shadow: var(--ph-shadow-xs);
  flex-shrink: 0;
}
.topbar-icon-btn:hover {
  background: var(--ph-gray-50);
  color: var(--ph-gray-800);
  text-decoration: none;
}

/* User name + role text */
.topbar-user-name {
  display: block;
  font-size: var(--ph-text-sm);
  font-weight: var(--ph-font-semibold);
  color: var(--ph-text);
  line-height: 1.25;
}
.topbar-user-role {
  display: block;
  font-size: var(--ph-text-xs);
  color: var(--ph-text-muted);
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   LEGACY WRAPPER SHIM — views not yet migrated still have .page-wrapper
   and an inner .page-content inside the shell's .page-content.
   This prevents double padding / double overflow-y from compressing content.
   -------------------------------------------------------------------------- */
.page-content .page-wrapper {
  margin: 0;
  padding: 0;
}
.page-content .page-content {
  padding: 0;
  overflow: visible;
  flex: none;
}

/* --------------------------------------------------------------------------
   APP-FORM-SHELL-COL — remove 66% width cap in new slim-sidebar layout
   Old sidebar was ~240px; new sidebar is 48px so content area is much wider.
   The 1600px media query in custom.css now makes pages look too narrow.
   Affects 39 views (meus-dados, configurações, RH forms, tecnologia pages…)
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .app-form-shell-col {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}