/* BarberDesk v0.3.1.3 – Contrast & UI Polish
   Loaded after v0.3.1.2 and intentionally overrides its visual rules. */

html[data-industry="hair_salon"],
body.business-hair-salon{
  --bd-bg:#151515;
  --bd-surface:#211f1c;
  --bd-surface-2:#2b2824;
  --bd-surface-3:#342f29;
  --bd-line:#51483d;
  --bd-cream:#f4ede2;
  --bd-cream-2:#e7dccd;
  --bd-text-dark:#211e1a;
  --bd-text-muted-dark:#62594f;
  --bd-muted:#c8bcad;
  --bd-gold:#c99752;
  --bd-gold-dark:#8f642f;
  --bd-gold-soft:#ead8bd;
  --bd-green:#2f8f62;
}

/* ---------- Global readability on dark BarberDesk shell ---------- */
body.business-hair-salon,
html[data-industry="hair_salon"] body{
  background:var(--bd-bg)!important;
  color:var(--bd-cream)!important;
}

body.business-hair-salon .sidebar,
html[data-industry="hair_salon"] .sidebar{
  background:linear-gradient(180deg,#11100f,#181614)!important;
  color:var(--bd-cream)!important;
}

body.business-hair-salon .nav-item,
html[data-industry="hair_salon"] .nav-item{
  color:var(--bd-cream-2)!important;
}
body.business-hair-salon .nav-item.active,
body.business-hair-salon .nav-item:hover,
html[data-industry="hair_salon"] .nav-item.active,
html[data-industry="hair_salon"] .nav-item:hover{
  background:#30291f!important;
  color:#fff8ed!important;
}

body.business-hair-salon .topbar,
html[data-industry="hair_salon"] .topbar{
  background:#211f1c!important;
  color:var(--bd-cream)!important;
}

/* ---------- Main headings / page header ---------- */
body.business-hair-salon main h1,
body.business-hair-salon main h2,
body.business-hair-salon main h3,
body.business-hair-salon .page-title,
html[data-industry="hair_salon"] main h1,
html[data-industry="hair_salon"] main h2,
html[data-industry="hair_salon"] main h3,
html[data-industry="hair_salon"] .page-title{
  color:var(--bd-cream)!important;
}

body.business-hair-salon .page-head,
body.business-hair-salon .page-header,
html[data-industry="hair_salon"] .page-head,
html[data-industry="hair_salon"] .page-header{
  color:var(--bd-text-dark)!important;
}
body.business-hair-salon .page-head h1,
body.business-hair-salon .page-head h2,
body.business-hair-salon .page-header h1,
body.business-hair-salon .page-header h2,
html[data-industry="hair_salon"] .page-head h1,
html[data-industry="hair_salon"] .page-head h2,
html[data-industry="hair_salon"] .page-header h1,
html[data-industry="hair_salon"] .page-header h2{
  color:var(--bd-text-dark)!important;
}
body.business-hair-salon .page-head p,
body.business-hair-salon .page-header p,
html[data-industry="hair_salon"] .page-head p,
html[data-industry="hair_salon"] .page-header p{
  color:var(--bd-text-muted-dark)!important;
}

/* ---------- Cards / panels ---------- */
body.business-hair-salon .card,
body.business-hair-salon .panel,
body.business-hair-salon .booking-card,
html[data-industry="hair_salon"] .card,
html[data-industry="hair_salon"] .panel,
html[data-industry="hair_salon"] .booking-card{
  background:var(--bd-surface)!important;
  border-color:var(--bd-line)!important;
  color:var(--bd-cream)!important;
  border-radius:7px!important;
}
body.business-hair-salon .card p,
body.business-hair-salon .panel p,
html[data-industry="hair_salon"] .card p,
html[data-industry="hair_salon"] .panel p{
  color:var(--bd-muted)!important;
}

/* White result / information surfaces must use dark text */
body.business-hair-salon .customer-record,
body.business-hair-salon .empty-state,
body.business-hair-salon .white-card,
html[data-industry="hair_salon"] .customer-record,
html[data-industry="hair_salon"] .empty-state,
html[data-industry="hair_salon"] .white-card{
  color:var(--bd-text-dark)!important;
}
body.business-hair-salon .customer-record *,
body.business-hair-salon .empty-state *,
body.business-hair-salon .white-card *,
html[data-industry="hair_salon"] .customer-record *,
html[data-industry="hair_salon"] .empty-state *,
html[data-industry="hair_salon"] .white-card *{
  color:inherit;
}

/* ---------- Inputs ---------- */
body.business-hair-salon input,
body.business-hair-salon select,
body.business-hair-salon textarea,
html[data-industry="hair_salon"] input,
html[data-industry="hair_salon"] select,
html[data-industry="hair_salon"] textarea{
  background:#2a2723!important;
  border-color:#5b5145!important;
  color:#fff8ed!important;
}
body.business-hair-salon input::placeholder,
body.business-hair-salon textarea::placeholder,
html[data-industry="hair_salon"] input::placeholder,
html[data-industry="hair_salon"] textarea::placeholder{
  color:#b8ac9c!important;
  opacity:1!important;
}

/* ---------- Buttons: remove GroomDesk green/blue from BarberDesk ---------- */
body.business-hair-salon button.primary,
body.business-hair-salon .primary,
body.business-hair-salon .btn-primary,
html[data-industry="hair_salon"] button.primary,
html[data-industry="hair_salon"] .primary,
html[data-industry="hair_salon"] .btn-primary{
  background:var(--bd-gold)!important;
  border-color:var(--bd-gold)!important;
  color:#18130e!important;
  font-weight:800!important;
  border-radius:6px!important;
}
body.business-hair-salon button.secondary,
body.business-hair-salon .secondary,
body.business-hair-salon .btn-secondary,
html[data-industry="hair_salon"] button.secondary,
html[data-industry="hair_salon"] .secondary,
html[data-industry="hair_salon"] .btn-secondary{
  background:#302c27!important;
  border-color:#62584b!important;
  color:#fff8ed!important;
  border-radius:6px!important;
}

/* Known action buttons that otherwise inherit GroomDesk colors */
body.business-hair-salon .guide-link,
html[data-industry="hair_salon"] .guide-link{
  background:var(--bd-gold-soft)!important;
  color:#3b2917!important;
  border:1px solid #d2ad78!important;
  border-radius:6px!important;
  font-weight:800!important;
}

/* ---------- Onboarding / help modal: highest priority contrast fix ---------- */
body.business-hair-salon .guide-modal,
body.business-hair-salon .guide-dialog,
body.business-hair-salon .onboarding-modal,
body.business-hair-salon [class*="guide"][role="dialog"],
html[data-industry="hair_salon"] .guide-modal,
html[data-industry="hair_salon"] .guide-dialog,
html[data-industry="hair_salon"] .onboarding-modal,
html[data-industry="hair_salon"] [class*="guide"][role="dialog"]{
  background:#f8f4ed!important;
  color:var(--bd-text-dark)!important;
  border:1px solid #a89479!important;
  border-radius:8px!important;
}

/* Generic dialog fallback; keeps modal readable even if class names change */
body.business-hair-salon dialog,
html[data-industry="hair_salon"] dialog{
  background:#f8f4ed!important;
  color:var(--bd-text-dark)!important;
  border:1px solid #a89479!important;
  border-radius:8px!important;
}
body.business-hair-salon dialog h1,
body.business-hair-salon dialog h2,
body.business-hair-salon dialog h3,
body.business-hair-salon dialog p,
body.business-hair-salon dialog strong,
body.business-hair-salon dialog label,
html[data-industry="hair_salon"] dialog h1,
html[data-industry="hair_salon"] dialog h2,
html[data-industry="hair_salon"] dialog h3,
html[data-industry="hair_salon"] dialog p,
html[data-industry="hair_salon"] dialog strong,
html[data-industry="hair_salon"] dialog label{
  color:var(--bd-text-dark)!important;
}

body.business-hair-salon .guide-kicker,
body.business-hair-salon .guide-eyebrow,
html[data-industry="hair_salon"] .guide-kicker,
html[data-industry="hair_salon"] .guide-eyebrow{
  color:#5b5146!important;
  letter-spacing:.04em!important;
}

body.business-hair-salon .guide-title,
body.business-hair-salon .guide-modal h1,
body.business-hair-salon .guide-modal h2,
body.business-hair-salon .guide-dialog h1,
body.business-hair-salon .guide-dialog h2,
html[data-industry="hair_salon"] .guide-title,
html[data-industry="hair_salon"] .guide-modal h1,
html[data-industry="hair_salon"] .guide-modal h2,
html[data-industry="hair_salon"] .guide-dialog h1,
html[data-industry="hair_salon"] .guide-dialog h2{
  color:#171411!important;
}

body.business-hair-salon .guide-body,
body.business-hair-salon .guide-body p,
body.business-hair-salon .guide-modal p,
body.business-hair-salon .guide-dialog p,
html[data-industry="hair_salon"] .guide-body,
html[data-industry="hair_salon"] .guide-body p,
html[data-industry="hair_salon"] .guide-modal p,
html[data-industry="hair_salon"] .guide-dialog p{
  color:#332d27!important;
}

body.business-hair-salon .guide-step,
body.business-hair-salon .guide-counter,
body.business-hair-salon [class*="guide"][class*="count"],
html[data-industry="hair_salon"] .guide-step,
html[data-industry="hair_salon"] .guide-counter,
html[data-industry="hair_salon"] [class*="guide"][class*="count"]{
  background:#ead8bd!important;
  color:#3b2917!important;
  border-color:#d4b07b!important;
  font-weight:900!important;
}

body.business-hair-salon .guide-tip,
html[data-industry="hair_salon"] .guide-tip{
  background:#332d27!important;
  color:#fff8ed!important;
  border-left:4px solid var(--bd-gold)!important;
  border-radius:4px!important;
}
body.business-hair-salon .guide-tip *,
html[data-industry="hair_salon"] .guide-tip *{
  color:#fff8ed!important;
}

body.business-hair-salon .guide-help,
body.business-hair-salon .guide-stop,
body.business-hair-salon a[class*="guide"],
html[data-industry="hair_salon"] .guide-help,
html[data-industry="hair_salon"] .guide-stop,
html[data-industry="hair_salon"] a[class*="guide"]{
  color:#5c4934!important;
  text-decoration-color:#8c7559!important;
}

/* Modal navigation */
body.business-hair-salon .guide-next,
html[data-industry="hair_salon"] .guide-next{
  background:var(--bd-gold)!important;
  color:#18130e!important;
  border:1px solid var(--bd-gold)!important;
  font-weight:900!important;
}
body.business-hair-salon .guide-back,
html[data-industry="hair_salon"] .guide-back{
  background:#332d27!important;
  color:#fff8ed!important;
  border:1px solid #332d27!important;
  font-weight:800!important;
}

/* ---------- Test tenant banner ---------- */
body.business-hair-salon .test-banner,
body.business-hair-salon .beta-banner,
html[data-industry="hair_salon"] .test-banner,
html[data-industry="hair_salon"] .beta-banner{
  background:#fff7e8!important;
  color:#4a3824!important;
  border-color:#c99752!important;
}
body.business-hair-salon .test-banner *,
body.business-hair-salon .beta-banner *,
html[data-industry="hair_salon"] .test-banner *,
html[data-industry="hair_salon"] .beta-banner *{
  color:inherit!important;
}

/* ---------- Breadcrumbs / muted text ---------- */
body.business-hair-salon .breadcrumb,
body.business-hair-salon .breadcrumbs,
html[data-industry="hair_salon"] .breadcrumb,
html[data-industry="hair_salon"] .breadcrumbs{
  color:#665d53!important;
}