/* V0.8 — High-fidelity GalaxyAccess visual-system study.
   Salon Standar Pro branding/content, GalaxyAccess-like color, type, proportions, chrome and component styling. */
:root{
  --gx-pink-left:#e287a5;
  --gx-pink-mid:#dc96b3;
  --gx-purple:#b492b9;
  --gx-blue:#5384c3;
  --gx-action:#e987a5;
  --gx-action-strong:#e87898;
  --gx-action-dark:#d95f83;
  --gx-panel:#fbf5f7;
  --gx-shell:#f7dce5;
  --gx-white:#ffffff;
  --gx-text:#222326;
  --gx-muted:#77777c;
  --gx-line:#eda5bb;
  --gx-softline:#eadfe4;
  --gx-blue-soft:#eefaff;
  --gx-selected:#ead9e4;
  --gx-shadow:0 3px 10px rgba(63,39,55,.12);
  --gx-header:82px;
}

html,body{font-family:'Quicksand','Avenir Next','Helvetica Neue',Arial,sans-serif!important;background:var(--gx-shell)!important;color:var(--gx-text)!important;font-size:15px!important;font-weight:500}
button,input,select,textarea{font-family:'Quicksand','Avenir Next','Helvetica Neue',Arial,sans-serif!important}
h1,h2,h3,h4,.metric strong{font-family:'Quicksand','Avenir Next','Helvetica Neue',Arial,sans-serif!important;color:var(--gx-text)!important;font-weight:600!important}
.eyebrow,.page-kicker{font-family:'Quicksand',sans-serif!important;letter-spacing:.02em!important;text-transform:none!important;color:#d86d8c!important;font-size:12px!important;font-weight:600!important}

/* Main application header: same visual proportion as the reference POS */
.topbar.galaxy-main-header{
  height:var(--gx-header)!important;
  min-height:var(--gx-header)!important;
  display:flex!important;
  align-items:stretch!important;
  padding:0!important;
  background:linear-gradient(90deg,var(--gx-pink-left) 0%,var(--gx-pink-mid) 40%,var(--gx-purple) 67%,var(--gx-blue) 100%)!important;
  border:0!important;
  box-shadow:none!important;
  position:sticky!important;
  top:0!important;
  z-index:50!important;
}
.brand-button{
  flex:0 0 112px!important;
  width:112px!important;
  height:82px!important;
  margin:0!important;
  padding:7px 9px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.brand-logo{width:88px!important;height:66px!important;object-fit:contain!important;filter:brightness(0) invert(1)!important;opacity:.96!important}
.ops-nav{
  height:82px!important;
  position:static!important;
  flex:0 1 auto!important;
  display:flex!important;
  align-items:stretch!important;
  gap:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  overflow-x:auto!important;
}
.op-btn{
  min-width:112px!important;
  height:82px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:7px 10px!important;
  font-weight:500!important;
  box-shadow:none!important;
}
.op-btn:hover{background:rgba(255,255,255,.10)!important;color:#fff!important}
.op-btn.active{background:rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:none!important}
.op-btn.active:after{display:none!important}
.op-btn svg{width:27px!important;height:27px!important;stroke-width:1.85!important;color:#fff!important}
.op-btn span{font-size:15px!important;line-height:1!important;text-transform:none!important;letter-spacing:0!important;font-weight:500!important;white-space:nowrap!important}
.topbar-spacer{flex:1 1 20px!important;min-width:4px!important}
.clock-card{
  flex:0 0 94px!important;
  height:72px!important;
  margin:5px 8px 5px 5px!important;
  padding:6px 8px!important;
  border-radius:10px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  background:linear-gradient(180deg,#f07ea2 0%,#e3a0ba 47%,#b8b2d5 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important;
  color:white!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  place-items:center!important;
  line-height:1.05!important;
}
.clock-card strong{color:#fff!important;font-size:16px!important;font-weight:700!important}
.clock-card span{color:#fff!important;font-size:15px!important;font-weight:500!important}
.salon-identity{
  flex:0 0 250px!important;
  margin:0!important;
  padding:13px 5px 8px 8px!important;
  line-height:1.18!important;
  display:block!important;
  align-self:stretch!important;
}
.salon-identity strong{display:block!important;color:#fff!important;font-size:17px!important;letter-spacing:.06em!important;font-weight:500!important;margin:0 0 4px!important}
.salon-identity span{display:block!important;color:rgba(255,255,255,.88)!important;font-size:11.5px!important;line-height:1.25!important;letter-spacing:.04em!important;margin:0!important;text-transform:none!important}
.menu-trigger{flex:0 0 48px!important;width:48px!important;height:82px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;display:grid!important;align-content:center!important;gap:5px!important}
.menu-trigger span{width:25px!important;height:2px!important;background:#fff!important;border-radius:0!important}
.location-select,.live-pill,.user-pill{display:none!important}

/* Galaxy pages do not use a separate marketing-style title bar */
.pagebar{display:none!important}
.content{padding:14px 14px 18px!important;background:var(--gx-shell)!important;min-height:calc(100vh - var(--gx-header))!important}

/* Buttons */
.btn{
  min-height:40px!important;
  height:auto!important;
  padding:7px 14px!important;
  border-radius:7px!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:600!important;
  box-shadow:0 2px 5px rgba(88,41,61,.11)!important;
  letter-spacing:0!important;
}
.btn.primary{background:var(--gx-action-strong)!important;color:#fff!important;border:1px solid #e47797!important}
.btn.primary:hover{background:#de6c8f!important}
.btn.secondary{background:var(--gx-action)!important;color:#fff!important;border:1px solid #dd7897!important}
.btn.subtle{background:#fff!important;color:#27282b!important;border:1px solid #e6dce1!important}
.btn.subtle:hover{background:#fff4f7!important;border-color:#e899b0!important}
.btn.danger{background:#fff!important;color:#d95c7d!important;border:1px solid #e995ac!important}

/* Screen chrome and work areas */
.status-strip,.command-panel,.card,.table-shell,.payroll-sheet,.employee-rail,.calendar-modern,.calendar-shell{
  background:var(--gx-panel)!important;
  border:1px solid rgba(255,255,255,.65)!important;
  border-radius:11px!important;
  box-shadow:var(--gx-shadow)!important;
}
.status-strip{margin-bottom:12px!important;overflow:hidden!important}
.status-stat{background:rgba(255,255,255,.56)!important;border-right:1px solid var(--gx-softline)!important;padding:10px 17px!important}
.status-stat span{color:#77767b!important;font-size:11px!important;letter-spacing:0!important;text-transform:none!important}
.status-stat strong{color:#27282b!important;font-size:15px!important;font-weight:700!important}
.command-grid{gap:13px!important;min-height:calc(100vh - 118px)!important}
.command-panel{overflow:hidden!important}
.panel-head{
  min-height:50px!important;
  height:50px!important;
  padding:8px 13px!important;
  background:linear-gradient(90deg,#ee829f 0%,#e493ad 52%,#d9a0b7 100%)!important;
  border:0!important;
}
.panel-head h3{color:#fff!important;font-size:18px!important;line-height:1!important;font-weight:500!important;text-transform:uppercase!important}
.panel-head small{display:none!important}
.panel-head .btn{min-height:34px!important;padding:5px 10px!important;background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.3)!important;color:#fff!important;box-shadow:none!important}
.panel-body{padding:10px 12px!important;background:var(--gx-panel)!important}
.panel-foot{padding:9px 12px!important;background:var(--gx-panel)!important;border-top:1px solid #efe5e9!important}
.empty-state{color:#1f2023!important;font-size:16px!important}
.empty-icon{width:52px!important;height:52px!important;border-radius:12px!important;background:#ef6f4d!important;color:#fff!important}
.queue-card,.tech-card,.ticket-card{min-height:58px!important;padding:9px 8px!important;border-bottom:1px solid #eee3e8!important}
.queue-card strong,.tech-meta strong,.ticket-card strong{font-size:15px!important;color:#25262a!important;font-weight:600!important}
.meta,.tech-meta span,.queue-card .meta,.ticket-card .meta{font-size:12px!important;color:#74747a!important}
.avatar-sm{border-radius:50%!important;background:#e99ab2!important;color:#fff!important}
.turn-pill{border-radius:7px!important;background:#f0e5ea!important;color:#303035!important;border:1px solid #e2d8de!important;font-size:15px!important}

/* Inputs, dropdowns and segmented controls */
.select,.field input,.field select,.field textarea,.search-box{
  min-height:42px!important;
  border-radius:7px!important;
  border:1px solid #ec9db5!important;
  background:rgba(255,255,255,.16)!important;
  color:#26272a!important;
  padding:8px 11px!important;
  font-size:15px!important;
  font-weight:500!important;
  box-shadow:none!important;
}
.search-box{border-width:0 0 1px 0!important;border-radius:0!important;background:transparent!important}
.select:focus,.field input:focus,.field select:focus,.field textarea:focus,.search-box:focus{border-color:#e76f93!important;box-shadow:0 0 0 2px rgba(235,121,153,.10)!important}
.field label,.field>span{font-size:12px!important;color:#37373b!important;font-weight:500!important}
.segmented,.ticket-tabs{background:#f2edf0!important;border:0!important;border-radius:7px!important;padding:0!important;overflow:hidden!important}
.segmented button,.ticket-tabs button{min-height:40px!important;border-radius:0!important;padding:7px 17px!important;font-size:15px!important;font-weight:500!important;color:#b7b0b5!important;background:transparent!important;box-shadow:none!important}
.segmented button.active,.ticket-tabs button.active{background:#e981a1!important;color:#fff!important;box-shadow:none!important}

/* Tables */
.table-shell{overflow:hidden!important}
.table-toolbar{min-height:64px!important;padding:10px 12px!important;background:var(--gx-panel)!important;border-bottom:1px solid #f0a5ba!important;gap:9px!important}
.table{font-size:15px!important}
.table th,.table td{height:56px!important;padding:10px 14px!important;border-bottom:1px solid #eddde4!important;font-size:15px!important;font-weight:500!important;color:#27282b!important}
.table th{height:54px!important;background:#f8dfe7!important;color:#242528!important;font-size:15px!important;text-transform:none!important;letter-spacing:0!important;font-weight:700!important;position:sticky!important;top:0!important}
.table tbody tr:nth-child(even){background:rgba(255,255,255,.08)!important}
.table tbody tr:hover{background:#fcecf1!important}
.table .avatar-sm{width:34px!important;height:34px!important;font-size:12px!important}
.ticket-history{gap:0!important}.ticket-detail{background:#fff!important;border-left:1px solid #eadde3!important}

/* Calendar */
.calendar-modern,.calendar-shell{border-radius:9px!important;background:#fff!important;overflow:hidden!important}
.calendar-header>div{height:66px!important;background:#f8f8f9!important;border-color:#d8d8db!important}
.tech-head{background:#cfeffd!important;color:#303238!important;font-size:15px!important;font-weight:700!important}
.time-gutter{background:#fff!important;border-color:#dadadd!important}
.time-label{font-size:13px!important;color:#626267!important;font-weight:600!important}
.tech-day{background:repeating-linear-gradient(to bottom,#fff 0,#fff 21px,#e8e8ea 22px)!important;border-color:#dadadd!important}
.tech-day:before{background:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,#d6d6d9 44px)!important}
.cal-event{border-radius:0!important;box-shadow:none!important;padding:5px 7px!important;color:#fff!important;font-size:13px!important;border-left:0!important}
.cal-event strong{color:#fff!important;font-size:13px!important;font-weight:700!important}
.cal-event.tech1{background:#d9272b!important;border-left:0!important}
.cal-event.tech2{background:#27669e!important;border-left:0!important}
.cal-event.block{background:#9d9da1!important;border-left:0!important;color:#fff!important}
.cal-event.pending{background:#e07891!important;border-left:0!important;color:#fff!important}
.week-grid,.month-grid{background:var(--gx-panel)!important}.day-card,.month-day{border:1px solid #ebbac8!important;border-radius:7px!important;background:#fff9fb!important}

/* Employee/profile/payroll tabs and sheets */
.tabs{gap:0!important;border-bottom:0!important;margin:0 0 14px!important;background:transparent!important}
.tabs button{padding:10px 17px!important;color:#343438!important;font-size:16px!important;font-weight:500!important;border-bottom:2px solid transparent!important}
.tabs button.active{color:#ec6087!important;border-bottom-color:#ec6087!important;background:transparent!important}
.employee-layout{gap:12px!important}.employee-rail button{min-height:56px!important;font-size:15px!important;border-bottom-color:#eadde3!important}.employee-rail button.active,.employee-rail button:hover{background:#d1cdd1!important;color:#2b2b2f!important}
.payroll-sheet{padding:20px 28px!important;background:#fff!important}.payroll-row{font-size:15px!important;border-bottom:0!important;padding:5px 0!important}.payroll-row.section{border-bottom:2px solid #1d1d1f!important;margin-top:5px!important}.payroll-row.total{border-top:2px solid #1d1d1f!important;font-size:16px!important}

/* Switches */
.toggle{border:0!important;background:transparent!important;border-radius:0!important;padding:10px 4px!important;font-size:15px!important}
.switch{width:38px!important;height:22px!important;background:#c7cbce!important}
.switch.on{background:#ec668c!important}

/* Drawer, exactly the plain white operational menu feel */
.drawer-shade{background:rgba(28,28,31,.62)!important;backdrop-filter:none!important}
.sidebar{width:min(410px,88vw)!important;padding:14px 18px!important;background:#fff!important;border-left:0!important;box-shadow:-3px 0 18px rgba(0,0,0,.13)!important}
.drawer-head{padding:5px 4px 11px!important;border-bottom:1px solid #ededee!important}.drawer-head .page-kicker{display:none!important}.drawer-head strong{font-size:14px!important;color:#66666b!important}
.drawer-close{width:34px!important;height:34px!important;border-radius:50%!important;background:#f0f0f1!important;color:#222!important}
.drawer-group{padding:6px 0 9px!important;border-bottom:1px solid #ededee!important}.drawer-title{font-size:15px!important;letter-spacing:0!important;color:#292a2e!important;font-weight:700!important;padding:9px 8px 5px!important}
.nav-btn{min-height:50px!important;border-radius:0!important;padding:9px 10px!important;font-size:17px!important;color:#202125!important;gap:13px!important}.nav-btn svg{width:23px!important;height:23px!important;color:#1e1f22!important}.nav-btn:hover,.nav-btn.active{background:#f8eef2!important;color:#202125!important}.nav-btn .lock-mark{background:#f1f1f2!important;border-radius:4px!important;color:#696970!important;font-size:10px!important}

/* Modals/popups */
.modal-backdrop{background:rgba(37,34,37,.55)!important;backdrop-filter:none!important}
.modal{background:linear-gradient(135deg,#f9dfe7 0%,#f8e1e7 52%,#e7e5f6 100%)!important;border:0!important;border-radius:10px!important;box-shadow:0 8px 30px rgba(29,20,27,.25)!important;padding:18px 20px!important;color:#27282b!important}
.modal.large{width:min(1180px,96vw)!important}
.modal-head{margin:-18px -20px 15px!important;padding:12px 20px!important;background:linear-gradient(90deg,#df83a4 0%,#c293b7 60%,#7690c6 100%)!important;border:0!important;border-radius:10px 10px 0 0!important;min-height:58px!important}.modal-head h2{color:#fff!important;font-size:20px!important;font-weight:600!important}.modal-head .eyebrow{color:rgba(255,255,255,.82)!important}.close{background:rgba(255,255,255,.24)!important;color:#fff!important;border-radius:7px!important;width:38px!important;height:38px!important}
.modal .actions{margin:16px -20px -18px!important;padding:12px 20px!important;border-top:1px solid rgba(231,139,166,.35)!important;background:rgba(255,255,255,.20)!important;border-radius:0 0 10px 10px!important}
.quick-card{border:1px solid #eca3b8!important;border-radius:7px!important;background:rgba(255,255,255,.35)!important;font-size:14px!important}.quick-card:hover{background:#fff1f5!important;border-color:#e67798!important}
.notice{border:0!important;border-radius:6px!important;background:#eefaff!important;color:#33363a!important;font-size:13px!important;padding:10px 12px!important}

/* Lock screen uses the same pink -> blue identity */
.lock-screen{background:linear-gradient(120deg,#f5d4df 0%,#e7adc1 43%,#8da4d2 100%)!important}
.lock-card{border-radius:11px!important;background:rgba(255,255,255,.95)!important;border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 8px 30px rgba(66,38,52,.19)!important;padding:32px!important}
.lock-card h1{font-family:'Quicksand',sans-serif!important;font-size:29px!important;font-weight:600!important}.lock-logo{width:170px!important}.pin-input{border:1px solid #e899b1!important;border-radius:7px!important;font-size:20px!important}

/* Public booking + kiosk in matching Galaxy surface language */
.booking-body{background:linear-gradient(120deg,#f6dbe4 0%,#f1dbe5 55%,#e2e6f6 100%)!important}
.booking-header{background:linear-gradient(90deg,var(--gx-pink-left),var(--gx-purple),var(--gx-blue))!important;border:0!important;border-radius:0!important}.booking-header img{filter:brightness(0) invert(1)!important;background:transparent!important;padding:0!important}
.booking-card,.kiosk .card{background:var(--gx-panel)!important;border:1px solid rgba(255,255,255,.65)!important;border-radius:10px!important;box-shadow:var(--gx-shadow)!important}
.booking-card h1,.kiosk h1{font-family:'Quicksand',sans-serif!important;font-weight:600!important;color:#292a2e!important}
.booking-steps .step-dot{height:4px!important;border-radius:0!important;background:#e8c4cf!important}.booking-steps .step-dot.active{background:#e87898!important}.option,.time-btn{border:1px solid #eca3b8!important;border-radius:7px!important;background:rgba(255,255,255,.5)!important}.option.selected,.time-btn:hover{background:#f9e5eb!important;border-color:#e87898!important}

/* Responsive: preserve Galaxy-like density rather than changing into cards too early */
@media(max-width:1200px){
  .op-btn{min-width:92px!important}.op-btn span{font-size:13px!important}.salon-identity{flex-basis:200px!important}.salon-identity span{font-size:10px!important}
}
@media(max-width:900px){
  .salon-identity{display:none!important}.clock-card{margin-right:5px!important}.op-btn{min-width:82px!important}.brand-button{flex-basis:92px!important;width:92px!important}.brand-logo{width:74px!important}
}
@media(max-width:760px){
  :root{--gx-header:74px}
  .topbar.galaxy-main-header{height:74px!important;min-height:74px!important}
  .brand-button{height:74px!important;flex-basis:80px!important;width:80px!important}.brand-logo{width:66px!important;height:56px!important}
  .ops-nav{height:74px!important}.op-btn{height:74px!important;min-width:72px!important;padding:5px 7px!important}.op-btn svg{width:23px!important;height:23px!important}.op-btn span{font-size:11px!important}
  .clock-card{display:none!important}.menu-trigger{height:74px!important;width:42px!important;flex-basis:42px!important}
  .content{padding:9px!important}.command-grid{min-height:0!important}.table th,.table td{font-size:13px!important;padding:8px!important;height:48px!important}.btn{font-size:13px!important;min-height:36px!important}
}