/* Gestão Nova - Estilo Fiel ao Salesforce Mockup */

.gestao-viewport-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 20px !important;
  color: #1E2022 !important;
}

/* HEADER COMPONENT */
.gestao-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.gestao-title-area {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.gestao-back-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1E2022 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
}

.gestao-title-h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #1E2022 !important;
  margin: 0 !important;
}

.gestao-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.gestao-filter-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5c6370 !important;
  cursor: pointer !important;
}

.gestao-create-btn {
  background: #191B1F !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border-radius: 99px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* TOP CONTAINERS (METRICS) */
.gestao-top-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 20px !important;
  width: 100% !important;
}

.gestao-glass-container {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 10px 30px rgba(0, 119, 182, 0.06) !important;
  padding: 24px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.gestao-metrics-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}

.gestao-metric-subcard {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.gsm-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748B !important;
}

.gsm-value {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

/* TIMELINE 3-COLUMN GRID - PERFECTLY ALIGNED */
.gsm-timeline-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding-top: 20px !important;
  margin-top: 16px !important;
}

.gsm-timeline-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.gsm-timeline-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.gsm-month-name {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748B !important;
}

.gsm-month-pct {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #94A3B8 !important;
}

.gsm-progress-track {
  width: 100% !important;
  height: 8px !important;
  background: rgba(15, 23, 42, 0.05) !important;
  border-radius: 99px !important;
  position: relative !important;
  overflow: hidden !important;
}

.gsm-progress-fill {
  height: 100% !important;
  border-radius: 99px !important;
  transition: width 0.4s ease !important;
}

.gsm-progress-fill.striped {
  background: repeating-linear-gradient(
    45deg,
    #FF7A00,
    #FF7A00 6px,
    #1E2022 6px,
    #1E2022 12px
  ) !important;
}

.gsm-progress-fill.solid {
  background: #FF7A00 !important;
  box-shadow: 0 2px 6px rgba(255, 122, 0, 0.2) !important;
}

.gsm-avatars-row {
  display: flex !important;
  align-items: center !important;
}

.gsm-avatar-circle {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid #FFFFFF !important;
  margin-left: -6px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  color: #FFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0284C7 !important;
}

.gsm-avatar-circle:first-child {
  margin-left: 0 !important;
}

/* RIGHT METRIC CONTAINER */
.gestao-right-glass-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* WEEKLY BAR CHART */
.gsm-weekly-chart-container {
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  margin-top: 14px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.01) !important;
}

.gsm-weekly-bars {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  height: 70px !important;
  gap: 12px !important;
}

.gsm-weekly-bar-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
}

.gsm-weekly-bar-track {
  width: 100% !important;
  height: 48px !important;
  background: rgba(15, 23, 42, 0.05) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
  transition: background 0.2s ease !important;
}

.gsm-weekly-bar-track:hover {
  background: rgba(15, 23, 42, 0.08) !important;
}

.gsm-weekly-bar-fill {
  width: 100% !important;
  background: #94A3B8 !important;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.gsm-weekly-bar-fill.highlight {
  background: #FF7A00 !important;
  box-shadow: 0 2px 8px rgba(255, 122, 0, 0.3) !important;
}

.gsm-weekly-bar-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #64748B !important;
}

/* FILTERS SECTION */
.gestao-filters-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.01) !important;
}

.gsm-filters-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.gsm-filters-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1E2022 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.gsm-filter-badge {
  background: #191B1F !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gsm-filter-select {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  outline: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.gsm-search-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.gsm-search-input {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px !important;
  padding: 8px 12px 8px 32px !important;
  font-size: 12px !important;
  color: #334155 !important;
  outline: none !important;
  width: 220px !important;
}

.gsm-search-icon {
  position: absolute !important;
  left: 10px !important;
  color: #94A3B8 !important;
  width: 14px !important;
  height: 14px !important;
}

/* BOTTOM CONTAINER: BLACK CARD */
.gestao-dark-card {
  background: #191B1F !important;
  border-radius: 28px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.gestao-dark-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-bottom: 16px !important;
}

.gdc-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

/* SEGMENTED TAB SELECTORS */
.gdc-tabs-row {
  display: flex !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  gap: 4px !important;
}

.gdc-tab-btn {
  border-radius: 10px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #94A3B8 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.gdc-tab-btn.active {
  background: #FF7A00 !important;
  color: #FFFFFF !important;
}

/* SPLIT PANEL GRID */
.gestao-split-panel-grid {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: 20px !important;
  width: 100% !important;
}

/* LEFT PANEL (TICKET LIST) */
.gsm-left-list-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.gsm-list-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.gsm-list-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.gsm-list-card.selected {
  background: rgba(94, 130, 255, 0.15) !important;
  border: 1px solid rgba(94, 130, 255, 0.3) !important;
}

.gsm-card-left-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.gsm-card-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #0284C7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255,255,255,0.1) !important;
}

.gsm-card-texts {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.gsm-card-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

.gsm-card-subtitle {
  font-size: 10px !important;
  color: #94A3B8 !important;
}

.gsm-card-right-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
}

.gsm-card-status-pill {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
}

.gsm-card-status-pill.unsent {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #E2E8F0 !important;
}

.gsm-card-status-pill.viewed {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}

.gsm-list-card.selected .gsm-card-status-pill {
  background: #FFFFFF !important;
  color: #191B1F !important;
}

.gsm-card-value {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

/* RIGHT PANEL (DETAILS PANEL) */
.gsm-right-details-col {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.gdet-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-bottom: 16px !important;
}

.gdet-id-badge {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.gdet-status-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #E2E8F0 !important;
  text-transform: uppercase !important;
}

.gdet-company-area {
  text-align: right !important;
}

.gdet-company-lbl {
  font-size: 10px !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

.gdet-company-name {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  justify-content: flex-end !important;
}

/* GRID OF 4 SUB-CARDS */
.gdet-subcards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.gdet-subcard {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 80px !important;
}

.gdet-subcard.dashed {
  border: 1px dashed rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.gdet-subcard-val {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

.gdet-subcard-lbl {
  font-size: 9px !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* FOOTER ROW DETAILS */
.gdet-footer-details {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 16px !important;
  margin-top: auto !important;
}

.gdet-summary-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.gdet-summary-lbl {
  font-size: 9px !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

.gdet-summary-val {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

/* ACTION BUTTONS */
.gdet-actions-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.gdet-circle-action-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94A3B8 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.gdet-circle-action-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

.gdet-payout-btn {
  background: #FF7A00 !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 10px 20px !important;
  border-radius: 99px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.25) !important;
  text-transform: uppercase !important;
}

/* MINI BAR CHART FOR METRIC CARDS */
.gsm-mini-bar-chart {
  display: flex !important;
  align-items: flex-end !important;
  gap: 4px !important;
  height: 32px !important;
  margin-bottom: 2px !important;
}

.gsm-chart-bar {
  width: 6px !important;
  background: #CBD5E1 !important;
  border-radius: 4px !important;
}

.gsm-chart-bar.highlight {
  background: #FF7A00 !important;
}

/* RESPONSIVE LAYOUTS */
@media (max-width: 1200px) {
  .gestao-top-grid {
    grid-template-columns: 1fr !important;
  }
  .gestao-split-panel-grid {
    grid-template-columns: 1fr !important;
  }
}