.appts{
  padding:120px 1rem 4rem;
  min-height:100vh;
  background:rgba(0,0,0,.6);
  display:flex;
  justify-content:center;
}

.wrap{width:100%;max-width:1120px}

.panel{
border-radius: 18px;
    padding: 1.25rem 1.4rem 1.1rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(rgba(25, 15, 39, 0.959), rgb(25, 15, 39)), url(../imgs/blendycity.png);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: transform .25s ease, box-shadow .25s ease;
}

.panelHead{
  padding:18px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.titleRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.panelHead h1{
  margin:0;
  font-size:2.1rem;
  letter-spacing:.2px;
}

.sub{
  margin-top:6px;
  color:rgba(255,255,255,.75);
  font-weight:600;
  font-size:.95rem;
}

.quickActions{display:flex;gap:10px;flex-wrap:wrap}

.controls{
  margin-top:14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.segmented{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
  padding:6px;
      border: none; 

  border-radius:999px;
}

.tab{
  height:42px;
  border-radius:999px;
    background: #7d17d146;
    border: none; 
     color:#fff;
  padding:0 14px;
  font-weight:800;
  cursor:pointer;
}

.tab.active{
    background: #9617d1d7;
}

.rightControls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.field{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  height:44px;
  border-radius:14px;
      background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
  padding:0 12px;
  min-width:260px;
}

.field.compact{min-width:200px}

.field i{
  color:rgba(255,255,255,.75);
  font-size:.95rem;
}

.field input{
  width:100%;
  outline:none;
  border:0;
  background:transparent;
  color:#fff;
  font-weight:700;
  font-family:Poppins,system-ui;
}

.field input::placeholder{color:rgba(255,255,255,.55)}

.field select{
  width:100%;
  outline:none;
  border:0;
  background:transparent;
  color:#fff;
  font-weight:800;
  font-family:Poppins,system-ui;
  appearance:none;
}

.notices{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.notice{min-height:20px;font-weight:900}
.notice.err{color:#ffb4b4}
.notice.ok{color:#b7ffcf}

.summaryRow{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
    background: #7d17d146;

  font-weight:900;
  color:#fff;
}

.pill i{color:rgba(255,255,255,.75)}
.pill.subtle{color:rgba(255,255,255,.82)}

.list{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.dayGroup{display:flex;flex-direction:column;gap:10px}
.dayHeader{
  padding:6px 8px;
  color:rgba(255,255,255,.82);
  font-weight:900;
  letter-spacing:.2px;
}

.dayCards{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.apptCard{
  width:100%;
    background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
  border-radius:18px;
  padding:14px;
  cursor:pointer;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
}

.apptCard:hover{
  transform:translateY(-1px);
opacity: 0.8;
}

.apptTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.apptTitle{
  font-weight:900;
  font-size:1.05rem;
  text-align: left;
}

.apptWhen{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.75);
  font-weight:800;
}

.apptWhen i{opacity:.9}

.badge{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,.25);
  font-weight:900;
  white-space:nowrap;
}

.badge.toneBad{border-color:rgba(255,77,77,.45);color:#ffb4b4}
.badge.toneOk{border-color:rgba(119,255,191,.30);color:#b7ffcf}
.badge.toneWarn{border-color:rgba(255,213,102,.35);color:#ffe2a3}
.badge.toneInfo{border-color:rgba(140,180,255,.30);color:#cfe0ff}

.apptMeta{
  margin-top:10px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.metaItem{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  background:rgba(0,0,0,.20);
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  color:rgba(255,255,255,.90);
}

.metaItem i{color:rgba(255,255,255,.75)}

.svcBox{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border:none;
  background:rgba(0,0,0,.18);
  border-radius:16px;
  padding:10px;
}

.svcLine{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.86);
  font-weight:800;
}

.svcLine i{color:rgba(255,255,255,.70)}
.svcMore{color:rgba(255,255,255,.65);font-weight:900}

.apptActions{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.finePrint{
  color:rgba(255,255,255,.62);
  font-weight:800;
  font-size:.92rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:44px;
  padding:0 14px;
  border-radius:14px;
border: none;  background:rgba(0,0,0,.30);
  color:#fff;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}

.btn:hover{border-color:rgba(255,255,255,.18)}

.btnPrimary{
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
}

.btnPrimary:hover{opacity: 0.8;}

.btnGhost{
  background:rgba(0,0,0,.25);
}

.btnDanger{
  border-color:rgba(255,77,77,.40);
  background:rgba(255,77,77,.12);
}

.btnDanger:hover{border-color:rgba(255,77,77,.60)}

.empty{
  padding:26px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  border:none;
  border-radius:18px;
  background:rgba(0,0,0,.18);
}

.emptyIcon{
  width:54px;height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:rgba(0,0,0,.22);
  font-size:1.3rem;
}

.emptyH{font-weight:900;font-size:1.15rem}
.emptyP{color:rgba(255,255,255,.70);font-weight:700;max-width:560px}
.emptyActions{margin-top:6px}

.skeleton{
  border-radius:18px;
  padding:14px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.skRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.skRow.end{justify-content:flex-end}
.skLine{height:12px;border-radius:999px;background:rgba(255,255,255,.10)}
.skPill{width:110px;height:30px;border-radius:999px;background:rgba(255,255,255,.08)}
.skBtn{width:160px;height:40px;border-radius:14px;background:rgba(255,255,255,.08)}
.w25{width:25%}
.w40{width:40%}
.w55{width:55%}
.w60{width:60%}
.w70{width:70%}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.60);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
}

.modal.open{display:flex}

.modalCard{
 border-radius: 18px;
    padding: 1.25rem 1.4rem 1.1rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(rgba(25, 15, 39, 0.959), rgb(25, 15, 39)), url(../imgs/blendycity.png);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: transform .25s ease, box-shadow .25s ease;
}

.modalHead{
  padding:14px 14px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
/* INPUTS */
.field{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}

.modalKicker{
  text-align: left;
  color:rgba(255,255,255,.70);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:.78rem;
}

.modalH{
  margin-top:6px;
  font-weight:900;
  font-size:1.2rem;
}

.iconBtn{
  width:44px;height:44px;
  border-radius:14px;
  border:none;
  background:rgba(0,0,0,.30);
  color:#fff;
  cursor:pointer;
}

.modalBody{padding:14px}
.detailGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.detail{
  border:none;
  background:rgba(0,0,0,.22);
  border-radius:16px;
  padding:12px;
}

.dk{color:rgba(255,255,255,.68);font-weight:900;font-size:.85rem}
.dv{margin-top:6px;color:#fff;font-weight:800;line-height:1.35}

.modalActions{
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

@media (min-width: 760px){
  .panelHead{padding:20px 18px 14px}
  .list{padding:16px}
  .detailGrid{grid-template-columns:1fr 1fr}
}

@media (max-width: 520px){
  .panelHead h1{font-size:1.75rem}
  .field{min-width:100%}
  .field.compact{min-width:100%}
  .apptActions{justify-content:flex-start}
}
.barberRow{
  display:flex;
  align-items:center;
  gap:12px;
}

.barberAvatar{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.15);
}

.barberMeta{
  display:flex;
  flex-direction:column;
}

.barberName{
  font-weight:900;
}

.barberSub{
  font-size:.85rem;
  color:rgba(255,255,255,.7);
  font-weight:700;
}
.dropdown {
  cursor:pointer;
}

.dropdownValue {
  flex:1;
  font-weight:800;
  color:#fff;
  user-select:none;
}

.caret {
  font-size:.75rem;
  opacity:.7;
  pointer-events:none;
}

.dropdownMenu {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:#29183f;
  border-radius:14px;
  padding:6px;
  display:none;
  flex-direction:column;
  gap:4px;
  z-index:50;
  filter: drop-shadow(0px 10px 20px rgba(0,0,0,.45));
}

.dropdown.open .dropdownMenu {
  display:flex;
}

.dropdownItem {
  padding:10px 12px;
  border-radius:10px;
  font-weight:800;
  color:#fff;
}

.dropdownItem:hover {
  background:#9617d1d7;
}