/* ============================================================================
 * SESTO.SENSO Portal v2 — Propostas page styles
 * ============================================================================
 * Component classes are page-scoped (.proposta-* / .propostas-*) to avoid
 * collisions with the global components.css. Reuses existing tokens.
 * ============================================================================ */

/* ---- Chip row container ---- */
.propostas-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 20px;
}

/* ---- Header summary live count emphasis ---- */
.propostas-summary-live {
  color: var(--pink);
  font-weight: 600;
}

/* ---- List + states ---- */
.propostas-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.propostas-loading,
.propostas-empty {
  padding: 48px 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-inner-top), var(--shadow-cushion);
}
.propostas-empty-error {
  color: var(--red);
  letter-spacing: .04em;
  text-transform: none;
  font-family: var(--font-body);
}

/* ============================================================================
 * Card
 * ============================================================================ */

.proposta-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-inner-top), var(--shadow-inner-bottom), var(--shadow-cushion);
  transition: transform var(--d-base) var(--ease-standard),
              box-shadow var(--d-base) var(--ease-standard);
}
.proposta-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-inner-top), var(--shadow-inner-bottom), var(--shadow-lift);
}

/* Live state: pink left accent strip + subtle glow */
.proposta-card-live {
  box-shadow:
    inset 3px 0 0 var(--pink),
    var(--shadow-inner-top), var(--shadow-inner-bottom), var(--shadow-cushion);
}
.proposta-card-live:hover {
  box-shadow:
    inset 3px 0 0 var(--pink),
    var(--shadow-inner-top), var(--shadow-inner-bottom), var(--shadow-lift);
}

/* Expired state: muted */
.proposta-card-expired {
  opacity: .78;
}
.proposta-card-expired .proposta-name {
  text-decoration: line-through;
  text-decoration-color: rgba(220, 38, 38, .4);
  text-decoration-thickness: 1.5px;
}

/* ---- Card top: identity + status ---- */
.proposta-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.proposta-identity {
  flex: 1;
  min-width: 0;
}
.proposta-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.proposta-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .03em;
  line-height: 1.1;
  color: var(--text-primary);
  text-transform: uppercase;
}
.proposta-handle {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--text-tertiary);
}
.proposta-status {
  flex-shrink: 0;
}

/* ---- Model badge (BR / INTL) ---- */
.proposta-model {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid;
  background: rgba(255, 255, 255, .5);
  flex-shrink: 0;
}
.proposta-model.br {
  color: #0F766E;
  border-color: rgba(15, 118, 110, .4);
}
.proposta-model.intl {
  color: #7C3AED;
  border-color: rgba(124, 58, 237, .4);
}

/* ============================================================================
 * Live row (only when is_live=true)
 * ============================================================================ */

.proposta-live-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(212, 23, 94, .07);
  border-left: 3px solid var(--pink);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-primary);
}
.proposta-live-text strong {
  color: var(--pink);
  font-weight: 600;
}
.proposta-live-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 0 var(--pink-glow);
  animation: proposta-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes proposta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 23, 94, .55); }
  70%  { box-shadow: 0 0 0 11px rgba(212, 23, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 23, 94, 0); }
}

/* ============================================================================
 * Meta grid (terms / sent / validity / visits)
 * ============================================================================ */

.proposta-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(40, 50, 70, .07);
}
.proposta-meta-cell {
  min-width: 0;
}
.proposta-meta-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}
.proposta-meta-val {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proposta-validity-urgent {
  color: var(--pink-dark);
  font-weight: 600;
}
.proposta-validity-expired {
  color: var(--red);
}

@media (max-width: 720px) {
  .proposta-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
 * Geo row
 * ============================================================================ */

.proposta-geo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(40, 50, 70, .07);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.proposta-geo-flag {
  font-size: 15px;
  line-height: 1;
}
.proposta-geo-city {
  color: var(--text-primary);
  font-weight: 500;
}
.proposta-geo-org {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--text-tertiary);
}
.proposta-geo-map {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pink);
  background: rgba(212, 23, 94, .08);
  text-decoration: none;
  border: 1px solid rgba(212, 23, 94, .18);
  margin-left: auto;
  transition: all var(--d-fast) var(--ease-standard);
}
.proposta-geo-map:hover {
  background: rgba(212, 23, 94, .14);
  border-color: rgba(212, 23, 94, .3);
}

/* ============================================================================
 * Actions row
 * ============================================================================ */

.proposta-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(40, 50, 70, .07);
  flex-wrap: wrap;
}
.proposta-actions .btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================================
 * Dark theme overrides
 * ============================================================================ */

[data-theme="dark"] .propostas-loading,
[data-theme="dark"] .propostas-empty {
  color: rgba(245, 242, 237, .55);
}
[data-theme="dark"] .proposta-model {
  background: rgba(0, 0, 0, .2);
}
[data-theme="dark"] .proposta-live-row {
  background: rgba(212, 23, 94, .12);
}
[data-theme="dark"] .proposta-meta-grid,
[data-theme="dark"] .proposta-geo-row,
[data-theme="dark"] .proposta-actions {
  border-color: rgba(245, 242, 237, .08);
}