/* =========================================================
   BarberDesk v0.5 – Urban Barbershop UI
   Real application design layer
   ========================================================= */
:root{
  --bd50-bg:#0f0f0f;
  --bd50-bg-2:#151515;
  --bd50-panel:#191919;
  --bd50-panel-2:#1f1d1a;
  --bd50-panel-3:#27231f;
  --bd50-border:#3a3228;
  --bd50-border-soft:#2b2722;
  --bd50-gold:#d39a3a;
  --bd50-gold-2:#b77e25;
  --bd50-gold-soft:#e8c277;
  --bd50-cream:#f4eee4;
  --bd50-muted:#aaa196;
  --bd50-muted-2:#81786f;
  --bd50-green:#36c76d;
  --bd50-danger:#c95748;
  --bd50-radius:8px;
}

/* App shell */
html[data-industry="hair_salon"] body,
body.business-hair-salon{
  background:var(--bd50-bg)!important;
  color:var(--bd50-cream)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

/* Sidebar */
body.business-hair-salon .sidebar,
html[data-industry="hair_salon"] .sidebar{
  background:linear-gradient(180deg,#0c0c0c 0%,#111 100%)!important;
  border-right:1px solid var(--bd50-border-soft)!important;
  box-shadow:none!important;
}
body.business-hair-salon .brand,
html[data-industry="hair_salon"] .brand{
  padding-bottom:18px!important;
  border-bottom:1px solid var(--bd50-border-soft)!important;
}
body.business-hair-salon .brand strong,
html[data-industry="hair_salon"] .brand strong{
  color:#fffaf2!important;
  font-size:22px!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
}
body.business-hair-salon .brand span,
html[data-industry="hair_salon"] .brand span{
  color:var(--bd50-muted)!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
}
body.business-hair-salon .brand-mark,
html[data-industry="hair_salon"] .brand-mark{
  border-radius:6px!important;
  background:linear-gradient(180deg,#d39a3a,#b77e25)!important;
  color:#16120d!important;
  box-shadow:none!important;
}

body.business-hair-salon .nav-item,
html[data-industry="hair_salon"] .nav-item{
  color:#e1d9cf!important;
  border-radius:6px!important;
  margin:3px 8px!important;
  min-height:42px!important;
  font-weight:650!important;
}
body.business-hair-salon .nav-item:hover,
html[data-industry="hair_salon"] .nav-item:hover{
  background:#1b1916!important;
  color:#fff7ea!important;
}
body.business-hair-salon .nav-item.active,
html[data-industry="hair_salon"] .nav-item.active{
  background:linear-gradient(90deg,#2f261a 0%,#201c17 100%)!important;
  color:var(--bd50-gold-soft)!important;
  box-shadow:inset 3px 0 0 var(--bd50-gold)!important;
}

/* top bar */
body.business-hair-salon .topbar,
html[data-industry="hair_salon"] .topbar{
  background:#141414!important;
  border-bottom:1px solid var(--bd50-border-soft)!important;
  color:var(--bd50-cream)!important;
  min-height:78px!important;
}
body.business-hair-salon .topbar select,
body.business-hair-salon .topbar input,
html[data-industry="hair_salon"] .topbar select,
html[data-industry="hair_salon"] .topbar input{
  background:#1c1a18!important;
  color:#fff9f0!important;
  border:1px solid var(--bd50-border)!important;
  border-radius:6px!important;
}
body.business-hair-salon .language-switch button,
html[data-industry="hair_salon"] .language-switch button{
  border-radius:6px!important;
}
body.business-hair-salon .language-switch button.active,
html[data-industry="hair_salon"] .language-switch button.active{
  background:#171717!important;
  color:var(--bd50-gold-soft)!important;
  border-color:var(--bd50-gold-2)!important;
}

/* top actions */
body.business-hair-salon .topbar button,
html[data-industry="hair_salon"] .topbar button{
  border-radius:6px!important;
  box-shadow:none!important;
}
body.business-hair-salon .topbar .primary,
html[data-industry="hair_salon"] .topbar .primary{
  background:linear-gradient(180deg,#d8a249,#bc8129)!important;
  color:#17120d!important;
  border:1px solid #c88e34!important;
}
body.business-hair-salon .online-badge,
html[data-industry="hair_salon"] .online-badge{
  background:#102a1b!important;
  border:1px solid #1e6639!important;
  color:#5bea8d!important;
  border-radius:999px!important;
}

/* Test tenant banner – thin and integrated */
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{
  min-height:46px!important;
  padding:8px 14px!important;
  margin:14px 18px 0!important;
  background:#181714!important;
  border:1px solid #77551e!important;
  border-radius:8px!important;
  color:#c9b896!important;
  box-shadow:none!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;
}
body.business-hair-salon .test-banner .badge,
body.business-hair-salon .beta-banner .badge,
html[data-industry="hair_salon"] .test-banner .badge,
html[data-industry="hair_salon"] .beta-banner .badge{
  background:#2b241a!important;
  color:var(--bd50-gold-soft)!important;
  border:1px solid #72511c!important;
  border-radius:999px!important;
  padding:5px 10px!important;
}

/* Compact page board / header */
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{
  margin:16px 18px!important;
  padding:18px 20px!important;
  min-height:unset!important;
  background:linear-gradient(180deg,#1a1a1a,#171717)!important;
  border:1px solid var(--bd50-border)!important;
  border-radius:8px!important;
  color:var(--bd50-cream)!important;
  box-shadow:none!important;
}
body.business-hair-salon .page-head h1,
body.business-hair-salon .page-header h1,
html[data-industry="hair_salon"] .page-head h1,
html[data-industry="hair_salon"] .page-header h1{
  margin:0!important;
  color:var(--bd50-gold-soft)!important;
  font-size:28px!important;
  line-height:1.1!important;
  font-weight:850!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{
  margin:6px 0 0!important;
  color:#d8d0c5!important;
  font-size:14px!important;
}
body.business-hair-salon .page-head .icon,
body.business-hair-salon .page-header .icon,
html[data-industry="hair_salon"] .page-head .icon,
html[data-industry="hair_salon"] .page-header .icon{
  width:46px!important;
  height:46px!important;
  border-radius:7px!important;
  background:#30271b!important;
  color:var(--bd50-gold)!important;
}

/* breadcrumb */
body.business-hair-salon .breadcrumb,
body.business-hair-salon .breadcrumbs,
html[data-industry="hair_salon"] .breadcrumb,
html[data-industry="hair_salon"] .breadcrumbs{
  color:#d1c5b5!important;
}
body.business-hair-salon .breadcrumb strong,
body.business-hair-salon .breadcrumbs strong,
html[data-industry="hair_salon"] .breadcrumb strong,
html[data-industry="hair_salon"] .breadcrumbs strong{
  color:var(--bd50-gold-soft)!important;
}

/* Main area */
body.business-hair-salon .view,
html[data-industry="hair_salon"] .view{
  background:var(--bd50-bg)!important;
}

/* Search row */
body.business-hair-salon .search-bar,
body.business-hair-salon .search-box,
html[data-industry="hair_salon"] .search-bar,
html[data-industry="hair_salon"] .search-box{
  background:#141414!important;
  border:1px solid var(--bd50-border)!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
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:#1b1917!important;
  color:#fff9f0!important;
  border:1px solid #4a4035!important;
  border-radius:6px!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:#94897d!important;
  opacity:1!important;
}

/* action cards */
body.business-hair-salon .toolbar,
body.business-hair-salon .action-row,
html[data-industry="hair_salon"] .toolbar,
html[data-industry="hair_salon"] .action-row{
  gap:14px!important;
}
body.business-hair-salon .primary,
body.business-hair-salon button.primary,
body.business-hair-salon .btn-primary,
html[data-industry="hair_salon"] .primary,
html[data-industry="hair_salon"] button.primary,
html[data-industry="hair_salon"] .btn-primary{
  background:linear-gradient(180deg,#d7a047,#bd812a)!important;
  color:#18120d!important;
  border:1px solid #cb9238!important;
  border-radius:6px!important;
  box-shadow:none!important;
  font-weight:850!important;
}
body.business-hair-salon .secondary,
body.business-hair-salon button.secondary,
body.business-hair-salon .btn-secondary,
html[data-industry="hair_salon"] .secondary,
html[data-industry="hair_salon"] button.secondary,
html[data-industry="hair_salon"] .btn-secondary{
  background:#191817!important;
  color:var(--bd50-gold-soft)!important;
  border:1px solid #564735!important;
  border-radius:6px!important;
  box-shadow:none!important;
  font-weight:750!important;
}

/* cards & tables */
body.business-hair-salon .card,
body.business-hair-salon .panel,
body.business-hair-salon .booking-card,
body.business-hair-salon .customer-record,
body.business-hair-salon .stat-card,
html[data-industry="hair_salon"] .card,
html[data-industry="hair_salon"] .panel,
html[data-industry="hair_salon"] .booking-card,
html[data-industry="hair_salon"] .customer-record,
html[data-industry="hair_salon"] .stat-card{
  background:linear-gradient(180deg,#1a1a1a,#171717)!important;
  color:var(--bd50-cream)!important;
  border:1px solid var(--bd50-border)!important;
  border-radius:8px!important;
  box-shadow:none!important;
}

/* Empty state */
body.business-hair-salon .empty-state,
html[data-industry="hair_salon"] .empty-state{
  background:#151515!important;
  border:1px solid var(--bd50-border)!important;
  border-radius:8px!important;
  color:#e9dfd2!important;
}
body.business-hair-salon .empty-state h2,
body.business-hair-salon .empty-state h3,
html[data-industry="hair_salon"] .empty-state h2,
html[data-industry="hair_salon"] .empty-state h3{
  color:var(--bd50-gold)!important;
}
body.business-hair-salon .empty-state p,
html[data-industry="hair_salon"] .empty-state p{
  color:#e9dfd2!important;
}

/* Calendar */
body.business-hair-salon .calendar-grid,
body.business-hair-salon .week-grid,
body.business-hair-salon .day-grid,
html[data-industry="hair_salon"] .calendar-grid,
html[data-industry="hair_salon"] .week-grid,
html[data-industry="hair_salon"] .day-grid{
  background:#121212!important;
  border-color:var(--bd50-border)!important;
}
body.business-hair-salon .calendar-cell,
body.business-hair-salon .week-cell,
body.business-hair-salon .time-slot,
html[data-industry="hair_salon"] .calendar-cell,
html[data-industry="hair_salon"] .week-cell,
html[data-industry="hair_salon"] .time-slot{
  background:#171717!important;
  border-color:#2f2923!important;
  color:#efe6da!important;
}
body.business-hair-salon .booking-block,
body.business-hair-salon .appointment-block,
html[data-industry="hair_salon"] .booking-block,
html[data-industry="hair_salon"] .appointment-block{
  background:#2b241c!important;
  border:1px solid #6e5228!important;
  border-left:4px solid var(--bd50-gold)!important;
  border-radius:6px!important;
  color:#fff4e4!important;
}

/* employee emphasis */
body.business-hair-salon .employee-chip,
body.business-hair-salon .staff-chip,
html[data-industry="hair_salon"] .employee-chip,
html[data-industry="hair_salon"] .staff-chip{
  background:#201d19!important;
  border:1px solid #4b3e2f!important;
  color:#f6eadb!important;
}
body.business-hair-salon .employee-avatar,
body.business-hair-salon .staff-avatar,
html[data-industry="hair_salon"] .employee-avatar,
html[data-industry="hair_salon"] .staff-avatar{
  border:2px solid var(--bd50-gold)!important;
}

/* dialogs – keep contrast from v0.3.1.3 */
body.business-hair-salon dialog,
html[data-industry="hair_salon"] dialog{
  background:#f7f2ea!important;
  color:#1f1c18!important;
  border:1px solid #9d8461!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,
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{
  color:#1f1c18!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(--bd50-gold)!important;
  border-radius:4px!important;
}
body.business-hair-salon .guide-next,
html[data-industry="hair_salon"] .guide-next{
  background:linear-gradient(180deg,#d7a047,#bd812a)!important;
  color:#17120d!important;
  border:1px solid #c88d33!important;
}
body.business-hair-salon .guide-back,
html[data-industry="hair_salon"] .guide-back{
  background:#302b25!important;
  color:#fff8ed!important;
  border:1px solid #302b25!important;
}

/* footer/version */
body.business-hair-salon .sidebar::after,
html[data-industry="hair_salon"] .sidebar::after{
  content:"BarberDesk v0.5";
  display:block;
  margin:18px 16px 14px;
  padding-top:14px;
  border-top:1px solid #5b431f;
  color:var(--bd50-gold)!important;
  font-size:12px;
  font-weight:800;
}