/* Antonn Haircut v12 final direction: charcoal, copper, ivory. */
:root {
  --v12-ink: #12100d;
  --v12-charcoal: #1d1a16;
  --v12-panel: #262018;
  --v12-panel-soft: #32281d;
  --v12-copper: #c9823a;
  --v12-copper-light: #efb46d;
  --v12-ivory: #fff2d4;
  --v12-muted: rgba(255, 242, 212, 0.74);
  --v12-line: rgba(239, 180, 109, 0.34);
}

html,
body {
  overflow-x: hidden !important;
}

body {
  background:
    radial-gradient(circle at 20% -10%, rgba(201, 130, 58, 0.18), transparent 280px),
    linear-gradient(180deg, #17120e 0%, #211914 48%, #15110e 100%) !important;
  color: var(--v12-ivory) !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  display: block !important;
  padding: 10px !important;
  background: rgba(18, 16, 13, 0.96) !important;
  border-bottom: 1px solid var(--v12-line) !important;
  backdrop-filter: blur(14px) !important;
}

.brand,
.header-cta {
  display: none !important;
}

.nav-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  gap: 7px !important;
}

.nav-links a {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 8px 6px !important;
  border: 1px solid rgba(239, 180, 109, 0.38) !important;
  border-radius: 8px !important;
  background: rgba(255, 242, 212, 0.06) !important;
  color: var(--v12-muted) !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  box-shadow: none !important;
}

.nav-links a.active,
.nav-links a:hover {
  background: linear-gradient(180deg, var(--v12-copper-light), var(--v12-copper)) !important;
  color: #15100b !important;
  border-color: rgba(255, 242, 212, 0.44) !important;
}

.nav-links a[hidden] {
  display: none !important;
}

.booking-hero {
  min-height: 360px !important;
  padding: 24px !important;
  background:
    linear-gradient(90deg, rgba(18, 16, 13, 0.92) 0%, rgba(18, 16, 13, 0.54) 42%, rgba(18, 16, 13, 0.08) 100%),
    url("assets/antonn-hero.jpg") center center / cover no-repeat !important;
  border-bottom: 1px solid var(--v12-line) !important;
}

.booking-hero::before,
.booking-hero::after {
  display: none !important;
}

.hero-panel {
  align-items: end !important;
  width: 100% !important;
  min-height: 280px !important;
}

.section-kicker {
  border-color: var(--v12-line) !important;
  background: rgba(18, 16, 13, 0.56) !important;
  color: var(--v12-copper-light) !important;
}

.hero-logo {
  width: min(420px, 78vw) !important;
  max-width: 100% !important;
}

.hero-panel p {
  max-width: 430px !important;
  color: var(--v12-ivory) !important;
  font-size: clamp(17px, 2.4vw, 22px) !important;
  line-height: 1.35 !important;
}

.auth-section,
.booking-section {
  width: min(100%, 1120px) !important;
  padding: 26px 14px 80px !important;
}

.booking-section,
.booking-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
}

#prestations,
#date-heure,
.customer-card,
.booking-side {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: static !important;
}

#prestations[hidden],
#date-heure[hidden],
.customer-card[hidden],
.booking-side[hidden] {
  display: none !important;
}

.service-list,
.calendar-card,
.customer-card,
.side-card,
.auth-card,
.account-card,
.account-mini-card,
.account-profile,
.admin-panel,
.admin-stat-card {
  border: 1px solid var(--v12-line) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(145deg, rgba(50, 40, 29, 0.98), rgba(31, 25, 19, 0.98)) !important;
  color: var(--v12-ivory) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.32) !important;
}

.step-heading h2,
.auth-card-heading h2,
.account-heading h2,
.side-card h2,
.admin-panel h2,
.admin-stat-card strong,
.service-row h3 {
  color: var(--v12-ivory) !important;
  text-shadow: none !important;
}

.step-heading span,
.submit-button,
.choose-service,
.calendar-nav,
.logout-button,
.account-cancel-button,
.account-select-button {
  background: linear-gradient(180deg, var(--v12-copper-light), var(--v12-copper)) !important;
  color: #15100b !important;
  border-color: rgba(255, 242, 212, 0.42) !important;
  border-radius: 8px !important;
}

.service-row,
.calendar-day,
.admin-list-row {
  border-color: rgba(239, 180, 109, 0.24) !important;
  background: rgba(255, 242, 212, 0.07) !important;
}

.service-row p,
.slot-note,
.admin-list-row span,
.admin-list-row p,
.admin-stat-card p,
.hours dt,
.hours dd {
  color: var(--v12-muted) !important;
}

.form-row input,
.form-row select,
.form-row textarea,
input,
textarea,
select,
.check-row,
.booking-summary,
.no-slot {
  background: rgba(255, 242, 212, 0.1) !important;
  border-color: rgba(239, 180, 109, 0.34) !important;
  color: var(--v12-ivory) !important;
}

.customer-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.calendar-controls {
  display: grid !important;
  grid-template-columns: repeat(2, 44px) !important;
  gap: 8px !important;
  justify-content: start !important;
}

.calendar-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

.slot-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.no-slot,
.calendar-empty-week {
  grid-column: 1 / -1 !important;
  min-height: 84px !important;
}

.hours {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.hours div {
  display: block !important;
  padding: 13px 0 !important;
  border-color: rgba(239, 180, 109, 0.22) !important;
}

.hours dt,
.hours dd {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

.hours dd {
  margin-top: 5px !important;
  color: var(--v12-copper-light) !important;
}

.admin-dashboard {
  display: grid !important;
  gap: 18px !important;
}

.admin-stat-grid,
.admin-stat-grid-clean {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.admin-chart-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  gap: 18px !important;
}

.admin-chart-card {
  min-width: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--v12-line) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(145deg, rgba(50, 40, 29, 0.98), rgba(31, 25, 19, 0.98)) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28) !important;
}

.admin-chart-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.admin-chart-heading span {
  color: var(--v12-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.admin-chart-heading strong {
  color: var(--v12-ivory) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-align: right !important;
}

.admin-line-chart {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 190px !important;
  overflow: visible !important;
}

.admin-chart-gridline {
  fill: none !important;
  stroke: rgba(255, 242, 212, 0.13) !important;
  stroke-width: 1 !important;
}

.admin-chart-line {
  fill: none !important;
  stroke: var(--v12-copper-light) !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 8px 16px rgba(201, 130, 58, 0.28)) !important;
}

.admin-chart-dot {
  fill: var(--v12-copper-light) !important;
  stroke: #17120e !important;
  stroke-width: 2 !important;
}

.admin-line-chart text {
  fill: var(--v12-ivory) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.admin-chart-labels {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  color: var(--v12-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

.admin-bar-chart {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 14px !important;
  min-height: 226px !important;
  padding-top: 16px !important;
}

.admin-bar-item {
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-items: end !important;
  gap: 9px !important;
  min-width: 0 !important;
  height: 100% !important;
  text-align: center !important;
}

.admin-bar-item strong {
  color: var(--v12-ivory) !important;
  font-size: 18px !important;
}

.admin-bar-item i {
  display: block !important;
  width: 100% !important;
  min-height: 8px !important;
  border: 1px solid rgba(255, 242, 212, 0.2) !important;
  border-radius: 8px 8px 3px 3px !important;
  background: linear-gradient(180deg, var(--v12-copper-light), var(--v12-copper)) !important;
  box-shadow: 0 18px 28px rgba(201, 130, 58, 0.2) !important;
}

.admin-bar-item span {
  color: var(--v12-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.admin-panel-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.admin-revenue-panel,
.admin-revenue-visual,
.admin-revenue-bars,
.admin-revenue-forecast {
  display: none !important;
}

@media (max-width: 760px) {
  .booking-hero {
    min-height: 255px !important;
    padding: 14px !important;
    background:
      linear-gradient(180deg, rgba(18, 16, 13, 0.24), rgba(18, 16, 13, 0.88)),
      url("assets/antonn-hero.jpg") 62% center / cover no-repeat !important;
  }

  .hero-panel {
    min-height: 220px !important;
    align-items: end !important;
  }

  .hero-logo {
    width: min(270px, 78vw) !important;
  }

  .hero-panel p {
    max-width: 330px !important;
    font-size: 16px !important;
  }

  .admin-stat-grid,
  .admin-stat-grid-clean,
  .admin-chart-grid,
  .admin-panel-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-chart-card {
    padding: 18px 16px !important;
  }

  .admin-chart-heading {
    display: grid !important;
  }

  .admin-chart-heading strong {
    text-align: left !important;
  }
}