/* Shared visual system. Loaded after the existing stylesheets. */
:root {
  --ui-space-1: .5rem;
  --ui-space-2: .875rem;
  --ui-space-3: 1.25rem;
  --ui-space-4: 1.5rem;
  --ui-radius: 16px;
}

html { scroll-padding-top: 1rem; }
body { min-width: 320px; }
button, input, select, textarea { font: inherit; }
.shell { width: 100%; max-width: 1480px; }
.topbar { padding-inline: clamp(1rem, 2vw, 2rem); }
.card, .stats > article { border-radius: var(--ui-radius); }
.card-title { padding: var(--ui-space-3) var(--ui-space-4); }
.card-title > div { min-width: 0; }
.card-title h2 { line-height: 1.25; }
.page-head h1 { text-wrap: balance; }
.page-head p { max-width: 78ch; }
.button, button { line-height: 1.3; }
.button:focus-visible, button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.shell,
.page-head > *,
.management-grid > *,
.settings-grid > *,
.stats > article,
.card,
.card-title > * {
  min-width: 0;
}

.stats > article {
  padding: clamp(1rem, 1.45vw, 1.35rem);
}

.stats article > strong {
  white-space: nowrap !important;
  overflow-wrap: normal;
  font-size: clamp(1.45rem, 1.8vw, 2rem) !important;
  line-height: 1.13;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}

.stats article > span {
  display: block;
  white-space: normal !important;
  overflow-wrap: break-word;
  line-height: 1.34;
  margin-top: .22rem;
}

.stats article > small,
.stats article .trend {
  display: block;
  overflow-wrap: break-word;
  line-height: 1.36;
  margin-top: .45rem;
}

.card-title {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .45rem 1rem;
}

.card-title h2,
.card-title span,
.card-title p {
  overflow-wrap: break-word;
  line-height: 1.35;
}

.seller-card dl div { gap: .8rem; }
.seller-card dt,
.seller-card dd { min-width: 0; overflow-wrap: break-word; }
.seller-card dd { text-align: right; }

.rank-row { min-width: 0; gap: .75rem; }
.rank-row > span,
.rank-row > strong,
.rank-row small { min-width: 0; overflow-wrap: break-word; }
.rank-row > strong { text-align: right; }

.data-table,
.purchase-line-table { max-width: 100%; }
.data-table > div > *,
.purchase-line > span { min-width: 0; overflow-wrap: break-word; }

.management-tabs { scrollbar-gutter: auto; }
.management-tabs a { line-height: 1.3; }

/* Dense management tables keep their own scroll region where columns require it. */
.data-table { overflow-x: auto; }
.data-table > div { min-width: 850px; gap: .75rem; padding: .72rem .85rem; line-height: 1.4; }
.purchase-line-table { overflow-x: hidden; font-size: .76rem; }
.purchase-line-head, .purchase-line { min-width: 0; }
.purchase-line-head { font-size: .68rem; }
.purchase-line-head > *, .purchase-line > span { min-width: 0; padding: .7rem .45rem; line-height: 1.35; }
.purchase-line-head > * { overflow-wrap: break-word; }
.purchase-line > span { overflow-wrap: break-word; }
.purchase-line > span:nth-child(2) { overflow-wrap: anywhere; }
.purchase-line b { line-height: 1.32; }
.purchase-line small { line-height: 1.3; }
.purchase-line:nth-child(even) { background: #f7fbfa; }

/* Agenda: one aligned action row, with a consistent interior gutter. */
.agent-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
  align-items: center;
  gap: var(--ui-space-3) var(--ui-space-4);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.agent-entry > div:first-child { min-width: 0; }
.agent-entry > div:first-child p:not(.eyebrow) { max-width: 57ch; line-height: 1.5; }
.agent-entry > .agent-entry-actions {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: .65rem;
  width: 100%;
}
.agent-entry-actions form { display: flex; flex-direction: column; min-width: 0; }
.agent-entry-actions .agent-entry-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 4.25rem;
  padding: .75rem .65rem;
  text-align: center;
  text-wrap: balance;
}
.agent-entry-routine { grid-column: 1 / -1; margin: 0 !important; padding-top: .9rem; border-top: 1px solid var(--line); }
.agent-access-summary .table-wrap { padding: 0 var(--ui-space-4) var(--ui-space-3); overflow-x: auto; }
.agent-access-summary table { width: 100%; border-collapse: collapse; }
.agent-access-summary th, .agent-access-summary td { padding: .65rem .75rem; text-align: left; vertical-align: top; }
.agent-access-summary tbody tr + tr { border-top: 1px solid var(--line); }
.table-wrap { display: block; max-width: 100%; overflow-x: auto; }
.table-wrap table { border-collapse: collapse; }

@media (max-width: 1199px) {
  .purchase-line-head { display: none; }
  .purchase-line { width: calc(100% - 1.4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .7rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: .78rem; }
  .purchase-line > span { border-bottom: 1px solid var(--line); }
}

@media (max-width: 1020px) {
  .agent-entry { grid-template-columns: minmax(0, 1fr); }
  .agent-entry > .agent-entry-actions { grid-column: 1; grid-row: auto; }
}

.card details > summary:focus-visible,
.management-tabs a:focus-visible,
.button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.card p, .card li { overflow-wrap: break-word; }

@media (max-width: 1100px) {
  .topbar { height: auto; min-height: 68px; display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-block: .55rem; }
  .topbar .brand { flex: 0 1 auto; margin-right: auto; }
  .topbar .user-menu { flex: 0 0 auto; margin-left: 0; }
  .topbar nav { order: 3; flex: 1 1 100%; width: 100%; height: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { flex: 0 0 auto; }
  .management-tabs { flex-wrap: wrap; overflow-x: visible; }
}

@media (max-width: 700px) {
  .shell { padding-inline: 1rem; }
  .topbar { padding-inline: 1rem; }
  .page-head { align-items: flex-start; flex-wrap: wrap; }
  .stats,
  .management-kpis,
  .portfolio-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .card-title { padding: 1rem; }
  .rank-row { margin-inline: .55rem !important; }
  .agent-entry > .agent-entry-actions { grid-template-columns: 1fr; }
  .agent-entry-actions .agent-entry-button { min-height: 3.2rem; }
  .agent-access-summary .table-wrap { padding-inline: .75rem; }
  .settings-calendar { min-width: 0; overflow: hidden; }
  .settings-calendar .calendar-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .settings-calendar .calendar-day { min-width: 0; min-height: 4.2rem; padding: .25rem; gap: 2px; }
  .settings-calendar .calendar-day small { font-size: .6rem; letter-spacing: -.04em; white-space: nowrap; }
}

@media (max-width: 420px) {
  .stats,
  .management-kpis,
  .portfolio-kpis { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Gestão: one rhythm for the KPI groups, regardless of the number of cards. */
.management-tabs ~ .stats {
  gap: 1rem !important;
  margin-block: 1.1rem 1.35rem;
}
.management-tabs ~ .stats > article,
.next-week-summary .stats > article {
  min-height: 9rem;
  padding: clamp(1.1rem, 1.5vw, 1.55rem) !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.management-tabs ~ .stats > article > strong,
.next-week-summary .stats > article > strong {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.management-tabs ~ .stats > article > small,
.management-tabs ~ .stats > article .trend { margin-top: .45rem !important; }

/* The learning cards use the same interior gutter as their headings. */
.management-tabs ~ .management-two > .card:not(.form-card) > .learning-row,
.learning-list-card > .learning-row,
.management-tabs ~ .management-two > .card:not(.form-card) > .empty,
.learning-list-card > .empty {
  margin-inline: 1.25rem;
  padding: 1rem 0;
  line-height: 1.5;
}
.management-tabs ~ .management-two > .card:not(.form-card) > .learning-row > * { min-width: 0; }
.management-tabs ~ .management-two > .card:not(.form-card) > .learning-row span,
.management-tabs ~ .management-two > .card:not(.form-card) > .learning-row small {
  display: block;
  overflow-wrap: anywhere;
}
.management-tabs ~ .management-two > .card:not(.form-card) > .learning-row small { margin-top: .25rem; }

/* Before/after evidence is scanned in two distinct panels. */
.experiment-report { margin-top: 1.5rem; }
.experiment-report .experiment-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.25rem;
}
.experiment-report .experiment-groups > article {
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbfa;
}
.experiment-report .experiment-groups h3 { margin: 0 0 1rem; line-height: 1.25; }
.experiment-report .experiment-groups p { margin: .85rem 0; line-height: 1.55; }
.experiment-report .experiment-groups p:last-child { margin-bottom: 0; }
.experiment-report > p,
.experiment-report > small {
  display: block;
  margin: 0 1.25rem 1rem;
  line-height: 1.55;
}
.experiment-report > p { padding: 1rem 1.15rem; border-radius: 10px; background: #eaf3ef; }
.experiment-report > small { color: var(--muted); }

@media (min-width: 1200px) {
  .management-tabs ~ .stats:not(.executive-overview-kpis):not(.crm-overview-kpis) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .management-tabs ~ .stats:has(> article:nth-child(5)):not(:has(> article:nth-child(6))) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .management-tabs ~ .stats.executive-overview-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) {
  .experiment-report .experiment-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .management-tabs ~ .stats > article,
  .next-week-summary .stats > article { min-height: 7.5rem; }
  .experiment-report .experiment-groups { padding: .9rem; }
  .experiment-report .experiment-groups > article { padding: 1rem; }
}