/* Nordic Barbearia — camada de layout do app, construída sobre os tokens/classes do Modernist (ver modernist.css).
   Mobile-first: os blocos sem media query abaixo são a base para telas pequenas;
   `min-width: 640px` e `min-width: 900px` vão progressivamente para telas maiores. */

body { min-height: 100vh; }

a.link-quiet { color: var(--color-text); }
a.link-quiet:hover { color: var(--color-accent); }

/* — app header (logo + tabs + identidade do usuário) — */
.app-header {
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: var(--space-2);
}
.app-header .tabs-scroll {
  display: flex; align-items: center; gap: var(--space-4);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto; min-width: 0;
}
.app-header .brand-mark { height: 32px; width: 32px; object-fit: cover; flex: none; }
.app-header .app-title { font-family: var(--font-heading); font-weight: 800; font-size: 15px; white-space: nowrap; }
.app-header .tab-link {
  background: none; border: none; cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  padding: 10px 2px; color: var(--color-text); white-space: nowrap; flex: none;
  border-bottom: 2px solid transparent;
  min-height: 44px; display: inline-flex; align-items: center;
}
.app-header .tab-link:hover { color: var(--color-accent); }
.app-header .tab-link.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.app-header .identity {
  margin-left: 0; width: 100%; order: 99;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-top: var(--space-2); border-top: 1px solid var(--color-divider);
}
.app-header .identity span.user-name { font-size: 13px; }

@media (min-width: 640px) {
  .app-header { flex-wrap: nowrap; }
  .app-header .brand-mark { height: 36px; width: 36px; }
  .app-header .identity {
    margin-left: auto; width: auto; order: 0;
    padding-top: 0; border-top: none;
  }
}

/* — page shell — */
.page { padding: var(--space-6) var(--space-4); max-width: 1100px; margin: 0 auto; }
.page-narrow { max-width: 900px; }
.page-header { margin-bottom: var(--space-5); }
.page-header h2 { margin: 0; }
.page-header p { color: color-mix(in srgb, var(--color-text) 60%, transparent); font-size: 14px; margin-top: var(--space-1); }

@media (min-width: 640px) {
  .page { padding: var(--space-8) var(--space-6); }
  .page-header { margin-bottom: var(--space-6); }
}

/* — date pager — */
.date-pager { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.date-pager .date-label { font-family: var(--font-heading); font-weight: 800; font-size: 14px; }
.date-pager .filter { width: 100%; }

/* — pagination — */
.pagination { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.pagination .pagination-label { font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.pagination .is-disabled { opacity: .35; pointer-events: none; }

@media (min-width: 640px) {
  .date-pager { gap: var(--space-4); flex-wrap: nowrap; }
  .date-pager .date-label { font-size: 15px; }
  .date-pager .filter { margin-left: auto; width: 220px; }
}

/* — summary cards row — */
.summary { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.summary .card { min-width: 0; }
.summary .card .stat { font-family: var(--font-heading); font-weight: 800; font-size: 28px; color: var(--color-accent-700); }

@media (min-width: 640px) {
  .summary { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
  .summary .card { min-width: 160px; flex: initial; }
  .summary .card .stat { font-size: 32px; }
}

/* — empty state — */
.empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.empty-state .icon { font-size: 2.2rem; margin-bottom: var(--space-2); }

/* — status tags — */
.tag-cancelled { opacity: 0.55; }

/* — tables: pequena viola a semântica de tabela de propósito (mantém thead/tbody como o
   navegador já renderiza) mas vira uma faixa com scroll horizontal em telas estreitas
   em vez de espremer colunas ou vazar da viewport. */
.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
.table thead, .table tbody { display: table; width: 100%; }

@media (min-width: 900px) {
  .table { display: table; overflow-x: visible; white-space: normal; }
  .table thead, .table tbody { display: table-header-group; width: auto; }
  .table tbody { display: table-row-group; }
}

/* — row actions inside tables — */
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions form { display: inline; }
.row-actions .btn { font-size: 12px; padding: 5px 10px; }

/* — seletor segmentado usado como links (período, agrupamento, filtros) —
   Antes o estado ativo só existia dentro de .auth-shell, e o Dia/Semana/Mês do
   faturamento não mostrava qual opção estava escolhida. */
a.seg-opt { text-decoration: none; }
.seg-opt.is-active { background: var(--color-accent); color: var(--color-bg); }

/* — período do dono (faturamento e assinaturas) — */
.period-picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: var(--space-6); }
.period-picker .seg { flex-wrap: wrap; }
.period-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.period-custom label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.period-custom .input { width: auto; }
.period-label { width: 100%; margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — auth screens — */
.auth-shell { max-width: 420px; margin: var(--space-8) auto; padding: 0 var(--space-4); }
.auth-shell h2 { margin-bottom: var(--space-6); }
.auth-shell .seg { width: 100%; margin-bottom: var(--space-7, 28px); text-decoration: none; }
.auth-shell .seg-opt { flex: 1; justify-content: center; text-decoration: none; min-height: 44px; }
.auth-shell .seg-opt.is-active { background: var(--color-accent); color: var(--color-bg); }
.auth-shell .seg-opt:not(.is-active):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.auth-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-error {
  background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
  color: var(--color-accent-800); padding: var(--space-2) var(--space-3);
  font-size: 13px; margin-bottom: var(--space-4);
}
.auth-footnote { margin-top: var(--space-4); font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.field-errors { color: var(--color-accent-700); font-size: 12px; margin: calc(var(--space-4) * -1) 0 var(--space-3); }

@media (min-width: 640px) {
  .auth-shell { margin: 64px auto; padding: 0 var(--space-6); }
}

/* — touch targets — */
.btn { min-height: 40px; }
.input { min-height: 44px; }

/* — client dashboard — */
.tile-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.tile { flex: 1; cursor: pointer; padding: var(--space-6); text-decoration: none; color: inherit; }
.tile .card-title { font-size: 20px; }

.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); max-width: 480px; margin-bottom: var(--space-5); }
.slot-grid form { display: contents; }
.slot-grid .btn { justify-content: center; }

.appt-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }
.appt-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.appt-row .when { font-family: var(--font-heading); font-weight: 800; font-size: 14px; }
.appt-row .what { margin-top: 2px; }
.appt-list.is-history { opacity: 0.7; }

@media (min-width: 640px) {
  .tile-grid { flex-direction: row; }
  .slot-grid { grid-template-columns: repeat(4, 1fr); }
  .appt-row { flex-direction: row; align-items: center; justify-content: space-between; }
}

.section-label {
  margin: 0 0 var(--space-3);
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.alert {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  border-left: 3px solid var(--color-neutral-500);
  background: var(--color-neutral-100);
  font-size: 14px;
}
.alert-error { border-left-color: var(--color-accent-600); background: var(--color-accent-100); }
.alert-success { border-left-color: var(--color-neutral-700); }

.cancel-closed {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* Assinaturas */
.plan-grid { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.plan-card { display: flex; flex-direction: column; gap: var(--space-2); }
.plan-card.is-current { border-color: var(--color-accent); }
.plan-price { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: var(--color-accent-700); }
.plan-price span { font-size: 13px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.plan-card .btn { margin-top: var(--space-2); }

.quota-card { margin-bottom: var(--space-6); }
.quota-figure { font-family: var(--font-heading); font-weight: 800; font-size: 30px; color: var(--color-accent-700); }
.quota-figure span { font-size: 13px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.quota-banner {
  display: block; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
  background: var(--color-accent-100); border-left: 3px solid var(--color-accent);
  font-size: 14px; text-decoration: none; color: var(--color-text);
}

@media (min-width: 640px) {
  .plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .plan-grid { grid-template-columns: repeat(4, 1fr); }
}