/* Rectangle */
.barTop {
  width: 1px;
  left: calc(50% - 1px / 2 + 529.5px);
  top: 0%;
  bottom: -1974.51%;
  /* Contornos */
  background: #cccccf;
  opacity: 0.5;
  /* Contornos */
  border: 1px solid #cccccf;
  box-sizing: border-box;
  transform: rotate(90deg);
}

.descriptionDiv {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  margin: 1rem 0.5rem 1rem 0.5rem;
  background-color: #ffff;
  box-shadow: 4px 4px 18px rgba(58, 79, 135, 0.06);
  border-radius: 8px;
  padding-left: 0.8rem;
}

.descriptionDiv.default {
  justify-content: flex-start;
}

.descriptionDiv .dleft {
  display: flex;
  cursor: pointer;
  min-height: 50px;
  align-items: center;
}

    .descriptionDiv .dleft .order {
        color: var(--text-light);        
        padding:0 1rem 0 0;
        opacity: .7;
    }

    .descriptionDiv .right {
        display: none;
    }

.descriptionDiv:hover {
  justify-content: space-between;
}

.descriptionDiv:hover .dleft {
  color: #0580CE;
}

.descriptionDiv:hover .right {
  display: flex;
}

.makeStyles-contentsWithoutHeader {
  padding-top: 15px;
}

.titulos {
  font-family: "Ubuntu", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 160%;
  color: var(--text-default);
  flex: none;
  order: 0;
  flex-grow: 0;
  height: 26px;
  position: static;
  left: 0px;
  top: 0px;
  margin: 10px 0px;
}
.otimizacao .pp-expand2 > .header:not(.height) > .functions {
  width: 50%;
}

.spanExpandLeft {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
}

.spanExpandRight {
  display: flex;  
  justify-content: flex-end;
  font-size: 14px;
}

.recomendationHeader {
  font-size: 14px;
  font-weight: bold;
  padding: 12px 24px;
  font-family: "Ubuntu", sans-serif;
  line-height: 16px;
  letter-spacing: 0em;
  color:var(--text-default);
}

.recomendation {
  margin-left: 0%;
  width: 17%;
}

.quantity {
  margin-left: 8%;
}

.economy {
  margin-left: 24px;
  width: 18%;
}

.definitionText {
  color: #F29100;
  margin: 9px 0px;
  text-align: left;
  font-size: 14px;
}

.resourceName {
  width: 98%;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  position: relative;
}
.resourceName .pp-tooltip .body.left {
  justify-content: flex-start;
  z-index: 9999;
  height: 80px;
}

.capitalizeDates {
  font-family: "Ubuntu", sans-serif;
  font-style: normal;
  font-feature-settings: "tnum" on, "Inum" on;
  letter-spacing: -0.1em;
  text-transform: capitalize;
  display: flex;
  justify-content: center;
}
/* ─── AutomationReviewPanel ────────────────────────────────────────────────── */

.arp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1100;
}

.arp-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 480px;
    max-width: 96vw;
    background: #fff;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    animation: arp-slide-in 0.22s ease;
}

@keyframes arp-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Header */
.arp-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    flex-shrink: 0;
}

.arp-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.arp-pending-badge {
    background: #e65100;
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
}

.arp-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 4px;
}
.arp-close-btn:hover { color: #333; }

/* Body */
.arp-panel-body {
    flex: 1 1;
    overflow-y: auto;
    padding: 0;
}

/* ─── Lista ─────────────────────────────────────────────────────────────────── */

.arp-status-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #eee;
    background: #fafafa;
    padding: 0 8px;
    flex-wrap: wrap;
}

.arp-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}
.arp-tab:hover { color: #333; }
.arp-tab--active { color: #333; font-weight: 600; border-bottom-color: #8C40E3; }

.arp-tab-count {
    background: #eee;
    border-radius: 8px;
    padding: 0 5px;
    font-size: 10px;
    color: #555;
}

.arp-list {
    display: flex;
    flex-direction: column;
}

.arp-item {
    padding: 12px 18px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.12s;
}
.arp-item:hover     { background: #f7f2ff; }
.arp-item--selected { background: #f0e8ff; border-left: 3px solid #8C40E3; }

.arp-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.arp-item-type {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.arp-item-status {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
}

.arp-item-resource {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arp-item-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.arp-item-cc {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
}

/* ─── Detalhe ────────────────────────────────────────────────────────────────── */

.arp-detail {
    padding: 0 0 24px;
}

.arp-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.arp-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #8C40E3;
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    flex-shrink: 0;
}
.arp-back-btn:hover { text-decoration: underline; }

.arp-detail-title {
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arp-detail-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    font-size: 13px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.arp-detail-date {
    color: #999;
    font-size: 11px;
    font-weight: 400;
}

/* Seções */
.arp-section {
    padding: 12px 18px 6px;
    border-bottom: 1px solid #f0f0f0;
}

.arp-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    margin-bottom: 8px;
}

.arp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.arp-table td {
    padding: 3px 6px;
    vertical-align: top;
}
.arp-table td:first-child {
    color: #888;
    width: 36%;
    white-space: nowrap;
}

.arp-description {
    font-size: 12px;
    color: #555;
    margin: 6px 0 0;
    line-height: 1.5;
}

.arp-schedule-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.arp-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f0e8ff;
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 11px;
    color: #6a1b9a;
}

/* JSON */
.arp-copy-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    color: #555;
}
.arp-copy-btn:hover { background: #f5f5f5; }

.arp-export-hint {
    font-size: 11px;
    color: #999;
    margin: 2px 0 0;
    line-height: 1.5;
    font-style: italic;
}

/* Ações */
.arp-actions {
    padding: 14px 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    border-top: 1px solid #eee;
    background: #fafafa;
    position: sticky;
    bottom: 0;
}

.arp-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity 0.15s;
}
.arp-btn:hover { opacity: 0.85; }

.arp-btn--approve {
    background: #2e7d32;
    color: #fff;
}

.arp-btn--apply {
    background: #8C40E3;
    color: #fff;
}

.arp-btn--danger {
    background: transparent;
    color: #c62828;
    border-color: #c62828;
}

.arp-btn--ghost {
    background: transparent;
    color: #666;
    border-color: #ccc;
}

.arp-reject-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    align-items: center;
}

.arp-reject-input {
    flex: 1 1;
    min-width: 160px;
    border: 1px solid #e0a0a0;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    outline: none;
}
.arp-reject-input:focus { border-color: #c62828; }

.arp-rejection-reason {
    font-size: 11px;
    color: #c62828;
    margin: 4px 0 0;
    width: 100%;
}

.resource-metrics-page {
    width: 100%;
    height: 100%;
}

.metrics-summary-card {
    padding: 12px 16px;
    background: #f5f5f5;
    background: var(--background-secondary, #f5f5f5);
    border-radius: 8px;
}

.metrics-summary-card h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    color: var(--text-primary, #333);
}

/* ── Cabeçalho da card de resumo com seletor de semana ── */
.metrics-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}

.metrics-header-row h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    color: var(--text-primary, #333);
}

.detail-week-select {
    font-size: 11px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 6px;
    background: #fff;
    color: #444;
    cursor: pointer;
    max-width: 160px;
}
.detail-week-select:focus { outline: none; border-color: #8C40E3; }

/* ── Campo de centro de custo no painel de automações ── */
.ha-cc-field {
    padding: 6px 14px 8px;
    border-bottom: 1px solid #f0f0f0;
}

.ha-cc-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 4px;
}

.ha-cc-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 12px;
    color: #333;
    background: #fafafa;
    box-sizing: border-box;
}
.ha-cc-input:focus { outline: none; border-color: #8C40E3; background: #fff; }

/* ── Status de resolução automática do CC ── */
.ha-cc-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
}

.ha-cc-status--resolved {
    color: #2e7d32;
    background: #e8f5e9;
}

.ha-cc-status--loading {
    color: #777;
    background: #f5f5f5;
}

.ha-cc-status--notfound {
    color: #e65100;
    background: #fff3e0;
}

@keyframes ha-spin {
    to { transform: rotate(360deg); }
}
.ha-cc-spinner {
    animation: ha-spin 0.8s linear infinite;
}

.ha-cc-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: #8C40E3;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 4px;
}
.ha-cc-edit-btn:hover { background: #f3e8fd; }

.ha-cc-resolved-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #333;
    background: #f8f8f8;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 5px 8px;
    min-height: 30px;
}

/* ── Hierarquia de centros de custo ── */
.ha-cc-hierarchy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.ha-cc-level {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fafafa;
    position: relative;
}

.ha-cc-level--direct {
    border-color: #8C40E3;
    background: #faf5ff;
}

/* Linha conectora entre níveis */
.ha-cc-level + .ha-cc-level::before {
    content: '';
    display: block;
    width: 2px;
    height: 6px;
    background: #ddd;
    position: absolute;
    top: -7px;
    left: 14px;
}

.ha-cc-level-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.ha-cc-level-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.ha-cc-level-badge--direct {
    background: #ede0fb;
    color: #6b21a8;
}

.ha-cc-level-badge--ancestor {
    background: #e0f2fe;
    color: #0369a1;
}

.ha-cc-level-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.ha-cc-level-emails {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ha-cc-email-chip {
    font-size: 11px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 6px;
    color: #444;
}

.ha-cc-level-no-users {
    font-size: 11px;
    color: #aaa;
    font-style: italic;
}

/* ── Modal de aprovação ── */
.ha-approval-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1200;
}

.ha-approval-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    background: #fff;
    border-radius: 10px;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}

.ha-approval-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    font-weight: 700;
    background: #fafafa;
    border-radius: 10px 10px 0 0;
}

.ha-approval-body {
    flex: 1 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ha-approval-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

.ha-approval-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ha-approval-field label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
}

.ha-approval-input {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    color: #333;
}
.ha-approval-input:focus { outline: none; border-color: #8C40E3; }

.ha-approval-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e8e8ef;
    border-radius: 8px;
    overflow: hidden;
}

.ha-approval-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f8fc;
    border-bottom: 1px solid #e8e8ef;
}

.ha-approval-summary-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
}

.ha-approval-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    background: none;
    color: #555;
}
.ha-approval-copy-btn:hover { background: #f5f5f5; }

.ha-approval-summary-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ha-summary-section {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f5;
}
.ha-summary-section:last-child { border-bottom: none; }

.ha-summary-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8C40E3;
    margin-bottom: 6px;
}

.ha-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 12px;
    color: #444;
}
.ha-summary-row > span:first-child {
    color: #888;
    font-size: 11px;
}
.ha-summary-row > strong {
    font-weight: 600;
    color: #333;
}

.ha-summary-schedule {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 2px;
    font-size: 11px;
    color: #888;
}

.ha-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ha-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f0edf8;
    color: #6b45a6;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
}

/* ─── Par automático (stop + start) ─────────────────────────────────────── */

.ha-summary-section--paired {
    background: #f0faf4;
    border-left: 3px solid #2e7d32;
    margin: 4px 0;
    border-radius: 4px;
}

.ha-paired-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 8px;
}

.ha-paired-note {
    font-size: 11px;
    color: #555;
    line-height: 1.4;
    margin-top: 6px;
    padding: 6px 8px;
    background: #e8f5e9;
    border-radius: 4px;
    border-left: 2px solid #66bb6a;
}

/* ─── Agrupamento de par stop+start na lista de sugestões ───────────────── */

.ha-suggestion-pair {
    border: 1px solid #e0e7ee;
    border-radius: 8px;
    padding: 8px;
    background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ha-pair-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ha-pair-hint {
    font-size: 10px;
    color: #777;
    line-height: 1.4;
    padding: 4px 6px;
    background: #eef6ff;
    border-radius: 4px;
    border-left: 2px solid #90caf9;
    margin: 0;
}

.ha-approval-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 18px;
    border-top: 1px solid #eee;
    background: #fafafa;
    border-radius: 0 0 10px 10px;
}

.ha-approval-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
}

.ha-approval-btn--confirm {
    background: #8C40E3;
    color: #fff;
    border: none;
}

.ha-approval-btn--pending {
    background: transparent;
    color: #e65100;
    border-color: #e65100;
}

.ha-approval-btn--cancel {
    background: transparent;
    color: #666;
    border-color: #ccc;
}

/* ── Layout grid do painel de detalhes ── */
.resource-details {
    height: 100%;
}

.resource-details-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resource-details-grid.expanded {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 8px;
    gap: 8px;
    height: calc(100vh - 172px);
    overflow: hidden;
}

/* Quando o painel de automação está aberto no modo expanded → 3 colunas */
.resource-details-grid.expanded.automation-open {
    grid-template-columns: 1fr 1fr 280px;
    grid-template-rows: 1fr 1fr;
}

/* Coluna esquerda: KPIs + Tendência */
.resource-details-grid.expanded .col-left {
    display: contents;
}

/* Coluna direita: CPU + Memória */
.resource-details-grid.expanded .col-right {
    display: contents;
}

.resource-details-grid.expanded .col-left .area-kpis {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: auto;
}

.resource-details-grid.expanded .col-left .area-trend {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow: hidden;
}

.resource-details-grid.expanded .col-right .heatmap-container:first-child,
.resource-details-grid.expanded .col-right .area-cpu {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
}

.resource-details-grid.expanded .col-right .heatmap-container:last-child,
.resource-details-grid.expanded .col-right .area-mem {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    overflow: hidden;
}

.resource-details-grid .area-kpis   { grid-area: kpis; }
.resource-details-grid .area-trend  { grid-area: trend; }
.resource-details-grid .area-cpu    { grid-area: cpu; }
.resource-details-grid .area-mem    { grid-area: mem; }

/* No expanded, as grid-areas genéricas não devem interferir */
.resource-details-grid.expanded .area-kpis,
.resource-details-grid.expanded .area-trend,
.resource-details-grid.expanded .area-cpu,
.resource-details-grid.expanded .area-mem {
    grid-area: unset;
}

/* Coluna de automação: ocupa as 2 linhas da 3ª coluna */
.resource-details-grid.expanded.automation-open .col-automation {
    grid-column: 3;
    grid-row: 1 / span 2;
    min-height: 0;
    overflow: hidden;
    border-left: 1px solid #eee;
    padding-left: 8px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 12px;
    gap: 12px;
}

.metrics-section-label {
    font-size: clamp(10px, 0.75vw, 12px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    color: var(--text-secondary, #888);
    margin: 8px 0 4px 0;
}

.metrics-section-label:first-of-type {
    margin-top: 0;
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: transparent;
    border-radius: 4px;
    min-width: 0;
}

.metric-label {
    font-size: clamp(11px, 0.85vw, 14px);
    font-weight: 400;
    color: #666;
    color: var(--text-secondary, #666);
    margin-bottom: 2px;
    white-space: nowrap;
    text-align: center;
    text-transform: none;
}

.metric-value {
    font-size: clamp(13px, 1.1vw, 18px);
    font-weight: 500;
    color: #333;
    color: var(--text-primary, #333);
}

.metric-value.cpu {
    color: #3498db;
    color: var(--color-cpu, #3498db);
}

.metric-value.memory {
    color: #9b59b6;
    color: var(--color-memory, #9b59b6);
}

.metric-value.p95 {
    color: #e74c3c;
    color: var(--color-p95, #e74c3c);
}

.metrics-summary-card h3 {
    font-size: clamp(12px, 0.9vw, 15px);
}

.metric-info-value {
    font-size: clamp(12px, 0.85vw, 14px);
    font-weight: 400;
    color: #333;
    color: var(--text-primary, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.heatmap-title {
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
    color: var(--text-primary, #333);
}

.heatmap-container {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* No modo expandido, gráficos preenchem a célula do grid */
.resource-details-grid.expanded .heatmap-container {
    display: flex;
    flex-direction: column;
}

.resource-details-grid.expanded .heatmap-container > div:last-child {
    flex: 1 1;
    min-height: 0;
}

.metrics-info-rows {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
    border-top: 1px solid #eee;
    border-top: 1px solid var(--border-color, #eee);
    padding-top: 10px;
    margin-top: 1rem;
}

.metrics-info-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(50% - 8px);
}

.metrics-info-row .metric-label {
    margin-bottom: 0;
    white-space: nowrap;
    text-align: left;
}

.provider-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.provider-badge.aws {
    background: #ff9900;
    color: #232f3e;
}

.provider-badge.azure {
    background: #0078d4;
    color: #fff;
}

.provider-badge.oci {
    background: #c74634;
    color: #fff;
}

.resource-details {
    padding: 16px;
    background: #f8f9fa;
}

.resource-details .metrics-summary-card {
    background: #fff;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.resource-details .metrics-summary-card h3 {
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.resource-details .heatmap-container {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 0;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.resource-details .heatmap-title {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    margin-bottom: 12px;
}

/* Badges de Eficiência */
.efficiency-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    min-width: 90px;
}

.efficiency-badge.status-underutilized {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.efficiency-badge.status-low {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.efficiency-badge.status-normal {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.efficiency-badge.status-high {
    background: #fce4ec;
    color: #c2185b;
    border: 1px solid #f48fb1;
}

.efficiency-badge.status-overutilized {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* KPIs Row */
.kpi-row {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    height: 100%;
    align-items: center;
    justify-content: space-around;
}

.kpi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 140px;
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.kpi-value.cpu {
    color: #3498db;
}

.kpi-value.memory {
    color: #9b59b6;
}

.kpi-value.warning {
    color: #e65100;
}

.kpi-value.danger {
    color: #c62828;
}

.kpi-label {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Provider Badges */
.provider-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.provider-badge.aws {
    background: #ff9900;
    color: #232f3e;
}

.provider-badge.azure {
    background: #0078d4;
    color: white;
}

.provider-badge.oci {
    background: #f80000;
    color: white;
}

/* Mock Mode Badge */
.mock-mode-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 8px 8px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Professional Table Styles */
.resource-metrics-page .lc-infinite-table {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.resource-metrics-page .lc-infinite-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.resource-metrics-page .lc-infinite-table td {
    vertical-align: middle;
}

.resource-metrics-page .lc-infinite-table tr:hover {
    background: #f1f3f5;
    cursor: pointer;
}

/* Responsive KPIs */
@media (max-width: 1200px) {
    .kpi-row {
        flex-wrap: wrap;
    }
    .kpi-card {
        min-width: 120px;
        flex: 1 1 auto;
    }
}

/* Card Active/Fade States */
.card-active {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.card-fade {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.card-fade:hover {
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════
   Heatmap Automation — Painel embutido (inline) dentro do SideModal
═══════════════════════════════════════════════════════════════════ */

/* Container do painel inline */
.ha-inline-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
}

/* Header compacto do painel inline */
.ha-inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.ha-inline-header .ha-panel-title {
    font-size: 12px;
}

/* Body do painel inline: ocupa todo o espaço restante com scroll */
.ha-inline-body {
    flex: 1 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* No modo collapsed, o painel inline aparece como bloco abaixo dos outros */
.resource-details-grid:not(.expanded) .ha-inline-panel {
    border: 1.5px solid #e0d0f7;
    border-radius: 8px;
    max-height: 480px;
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   Heatmap Automation — Botão trigger no header do SideModal
═══════════════════════════════════════════════════════════════════ */

.ha-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 16px;
    border: 1.5px solid #8C40E3;
    background: transparent;
    color: #8C40E3;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
}

.ha-trigger-btn:hover {
    background: #8C40E3;
    color: #fff;
}

/* Estado ativo — painel aberto */
.ha-trigger-btn--active {
    background: #8C40E3;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   Heatmap Automation — Overlay e Painel lateral
═══════════════════════════════════════════════════════════════════ */

.ha-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 2000;
    animation: haFadeIn 0.18s ease;
}

.ha-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 95vw;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.14);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    animation: haSlideIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes haFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes haSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ─── Header ─────────────────────────────────────────────────────── */

.ha-panel-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.ha-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.ha-panel-resource {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
    overflow: hidden;
}

.ha-panel-resource-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1;
}

.ha-panel-resource-type {
    background: #f0f0f0;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    color: #666;
    flex-shrink: 0;
}

.ha-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #888;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}
.ha-close-btn:hover { background: #f0f0f0; color: #333; }

/* ─── Body ───────────────────────────────────────────────────────── */

.ha-panel-body {
    flex: 1 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ─── Resumo da análise ──────────────────────────────────────────── */

.ha-analysis-summary {
    background: #f5f0fc;
    border: 1px solid #d6b8f7;
    border-radius: 8px;
    padding: 10px 12px;
}

.ha-analysis-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #333;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ha-analysis-text {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

.ha-pattern-label {
    font-size: 12px;
    font-weight: 600;
}

/* ─── Lista de sugestões ─────────────────────────────────────────── */

.ha-suggestions-title {
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
}

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

/* ─── Card de sugestão ───────────────────────────────────────────── */

.ha-suggestion-card {
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fff;
}

.ha-suggestion-card:hover {
    border-color: #b39ddb;
    box-shadow: 0 2px 10px rgba(140, 64, 227, 0.1);
}

.ha-suggestion-card--selected {
    border-color: #8C40E3 !important;
    box-shadow: 0 0 0 2px rgba(140, 64, 227, 0.18) !important;
}

.ha-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ha-card-type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ha-card-type-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ha-confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
}

.ha-card-idle-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #888;
    margin-left: auto;
}

.ha-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #222;
}

.ha-card-description {
    font-size: 11.5px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 8px 0;
}

.ha-card-schedule {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #777;
    margin-bottom: 10px;
}

.ha-day-chip {
    background: #f0f0f0;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 10.5px;
    color: #444;
}

.ha-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 16px;
    border: 1.5px solid currentColor;
    background: transparent;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-top: 2px;
}

.ha-apply-btn:hover {
    filter: brightness(0.9);
    background: rgba(0,0,0,0.05);
}

/* ─── Preview de dias da semana ──────────────────────────────────── */

.ha-weekdays-preview {
    background: #f9f6ff;
    border: 1px solid #d6b8f7;
    border-radius: 8px;
    padding: 10px 12px;
}

.ha-weekdays-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #8C40E3;
    margin-bottom: 8px;
}

.ha-weekdays-grid {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ha-weekday-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 28px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    background: #e8e8e8;
    color: #888;
    border: 1.5px solid transparent;
}

.ha-weekday-cell--active {
    background: #8C40E3;
    color: #fff;
    border-color: #7034c0;
}

.ha-weekdays-actions {
    display: flex;
    justify-content: flex-end;
}

.ha-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 18px;
    border: none;
    background: #8C40E3;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.ha-create-btn:hover { background: #7034c0; }

/* ─── Estados vazios ─────────────────────────────────────────────── */

.ha-no-suggestions,
.ha-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 16px;
    text-align: center;
    color: #666;
    font-size: 12.5px;
    line-height: 1.6;
}

/* ─── Footer ─────────────────────────────────────────────────────── */

.ha-panel-footer {
    padding: 10px 16px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafafa;
}

.ha-footer-note {
    flex: 1 1;
    font-size: 10.5px;
    color: #999;
    line-height: 1.4;
}

.ha-footer-close {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: 14px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 11.5px;
    cursor: pointer;
    color: #555;
}

.ha-footer-close:hover { background: #f0f0f0; }

.kpi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 16px;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
}

.kpi-label {
    font-size: 0.875rem;
    color: #666;
    margin-top: 8px;
}

.status-cell {
    display: flex;
    align-items: center;
}

.detail-modal {
    padding: 16px;
}

.detail-modal p {
    margin: 8px 0;
}

.invoice-details {
    margin-top: 16px;
    border-top: 1px solid #eee;
    padding-top: 16px;
}

.invoice-details h4 {
    margin-bottom: 12px;
}

.invoice-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.invoice-item:last-child {
    border-bottom: none;
}

/* Animação de rotação para loading */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin-animation {
    animation: spin 1s linear infinite;
}

/* Animação de cursor piscando */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.cursor-blink {
    animation: blink 1s infinite;
}

/* Estilos para resultado da análise IA */
.ai-analysis-result {
    font-size: 14px;
}

.ai-analysis-result table {
    font-size: 13px;
}

.ai-analysis-result code {
    font-family: 'Consolas', 'Monaco', monospace;
}

.invoice-cost-analysis {
    height: 100%;
    width: 100%;
}

.invoice-cost-analysis .summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 12px;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0 8px;
}

.invoice-cost-analysis .summary-card {
    background: #fff;
    background: var(--color-surface, #fff);
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border: 1px solid var(--color-border, #e0e0e0);
}

.invoice-cost-analysis .summary-card .label {
    font-size: 11px;
    color: #666;
    color: var(--color-text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.invoice-cost-analysis .summary-card .value {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    color: var(--color-text-primary, #333);
}

.invoice-cost-analysis .summary-card .value.positive {
    color: #2e7d32;
    color: var(--color-success, #2e7d32);
}

.invoice-cost-analysis .summary-card .value.info {
    color: #1565c0;
    color: var(--color-info, #1565c0);
}

.invoice-cost-analysis .summary-card .sub-value {
    font-size: 11px;
    color: #888;
    color: var(--color-text-secondary, #888);
    margin-top: 2px;
}

.invoice-cost-analysis .fonte-badge {
    display: inline-block;
    background: #e3f2fd;
    background: var(--color-primary-light, #e3f2fd);
    color: #1565c0;
    color: var(--color-primary, #1565c0);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.invoice-cost-analysis .cell-currency {
    text-align: right;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.invoice-cost-analysis .cell-factor {
    text-align: right;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    color: #666;
    color: var(--color-text-secondary, #666);
}