/* ================================================================
   DISPENSA PLANEJADA — LAYOUT
   Grid, Header, Main, Footer, Responsividade (Mobile-First)
   ================================================================ */

/* ================================================================
   HEADER
   ================================================================ */
.header {
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700), #0d9488);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg);
}

.header-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.header-brand h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.header-brand h1 .brand-icon {
  font-size: var(--font-size-2xl);
}

.header-brand p {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: #ffffff;
  font-weight: var(--font-weight-medium);
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ================================================================
   MAIN
   ================================================================ */
.main {
  flex: 1;
  padding-block: var(--space-8);
}
.main > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* ================================================================
   SECTIONS
   ================================================================ */
.section-creator {
  /* Barra de busca / criador de lista */
}

.filters-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.filters-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filters-row > .select,
.filters-row > .input-group {
  width: 100%;
  min-width: 0;
}

.filters-bar .select {
  width: auto;
  min-width: 0;
}

.search-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.search-input-group {
  flex: 1;
  position: relative;
}

.add-row {
  display: flex;
  gap: var(--space-2);
}
.add-row .select {
  width: auto;
  min-width: 90px;
}
.add-row .btn {
  flex: 1;
  min-width: 0;
}

/* ================================================================
   RESULTS SECTION
   ================================================================ */
.section-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Stores Grid (3 colunas) */
.stores-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.store-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.store-card .store-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.store-card .store-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.store-card .store-price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
}
.store-card .store-price.is-best {
  color: var(--color-primary-600);
}

/* Multi-loja split */
.multi-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.split-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-summary .label {
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

.split-stores {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.split-store-card .split-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.split-store-card .split-store-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.split-store-card .split-store-total {
  font-weight: var(--font-weight-extrabold);
  color: var(--color-accent-600);
}

.split-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.split-items li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.split-items li .item-cost {
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
}

/* Comparativo best indicator */
.best-indicator {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-warning-600);
}
.diff-indicator {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-error-500);
}

/* ================================================================
   CHECKLIST SECTION
   ================================================================ */
.section-checklist {
  scroll-margin-top: var(--space-4);
}

.checklist-progress {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-600);
}

.checklist-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.footer p + p {
  margin-top: var(--space-1);
}

/* ================================================================
   CTA ROW (Calcular + disclaimer)
   ================================================================ */
.cta-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.cta-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* ================================================================
   LIST HEADER
   ================================================================ */
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ================================================================
   HIDDEN UTILITY
   ================================================================ */
.hidden { display: none !important; }

/* ================================================================
   RESPONSIVE: TABLET (≥640px)
   ================================================================ */
@media (min-width: 640px) {
  .filters-row {
    flex-direction: row;
  }

  .filters-row > .select {
    width: auto;
    min-width: 180px;
  }

  .stores-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .multi-split {
    grid-template-columns: 1fr 1fr;
  }

  .search-row {
    flex-direction: row;
  }

  .cta-row {
    flex-direction: row;
    align-items: center;
  }

  .table .col-mobile-hidden {
    display: table-cell;
  }
}

/* ================================================================
   RESPONSIVE: DESKTOP (≥768px)
   ================================================================ */
@media (min-width: 768px) {
  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-8);
  }

  .header-brand h1 {
    font-size: var(--font-size-4xl);
  }

  .filters-bar {
    flex-direction: column;
  }

  .filters-row {
    width: 100%;
  }

  .search-row {
    width: 100%;
  }
}

@media (max-width: 639px) {
  .header-brand h1 {
    font-size: var(--font-size-2xl);
  }

  .header-brand p {
    line-height: var(--line-height-tight);
  }

  .results-header,
  .list-header {
    align-items: stretch;
    flex-direction: column;
  }

  .list-header > div {
    flex-wrap: wrap;
  }

  .list-header > div .btn,
  .list-header > div .btn-danger-text {
    flex: 1;
    min-height: 40px;
  }

  /* Mobile: Stack suggestion items vertically and hide meta for two-line layout */
  .dropdown-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .dropdown-item .item-meta {
    display: none;
  }
}

/* ================================================================
   RESPONSIVE: HIDE ON MOBILE
   ================================================================ */
.col-mobile-hidden {
  display: none;
}
@media (min-width: 640px) {
  .col-mobile-hidden {
    display: table-cell;
  }
}

@media (max-width: 639px) {
  .table thead {
    display: none;
  }

  .table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .table tbody tr > td:first-child {
    grid-column: 1 / -1;
    padding-bottom: var(--space-2);
  }

  .table tbody tr > td:nth-child(2),
  .table tbody tr > td:nth-child(4) {
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
  }

  .table tbody tr > td:nth-child(2) {
    grid-column: 2;
  }

  .table tbody tr > td:nth-child(4) {
    grid-column: 3;
  }

  .table .product-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
  }

  .table .mobile-best-price {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-primary-700);
    font-size: var(--font-size-sm);
  }

  .table .mobile-best-price strong {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-extrabold);
  }
}