/* Therapist area — calm cockpit UI */

:root{
  --pro-surface: rgba(255,255,255,.82);
  --pro-surface-2: rgba(255,255,255,.66);
  --pro-shadow: 0 22px 70px rgba(0,0,0,.10);
  --pro-border: rgba(0,0,0,.08);
  --pro-muted: rgba(40,40,40,.62);
}

.pro-shell{
  min-height: 100vh;
  display:flex;
}

.pro-nav{
  width: 280px;
  padding: 18px 16px;
  border-right: 1px solid var(--pro-border);
  background: var(--pro-surface-2);
  backdrop-filter: blur(10px);
}

.pro-brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none;
  margin: 6px 6px 18px 6px;
}
.pro-brand .brand-mark{ width:36px;height:36px;border-radius:12px; }
.pro-brand .brand-name{ font-weight:700; }

.pro-nav a.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  padding: 12px 12px;
  border-radius: 16px;
  margin: 6px 0;
  border: 1px solid transparent;
  color: var(--text);
  background: transparent;
}
.pro-nav a.item span.left{
  display:flex; align-items:center; gap:.55rem;
  font-weight:650;
}
.pro-nav a.item:hover{
  background: rgba(255,255,255,.85);
  border-color: var(--pro-border);
}
.pro-nav a.item.active{
  background: rgba(199,155,122,.14);
  border-color: rgba(199,155,122,.25);
}
.pro-nav .item.sub{
  padding-left: 34px;
  opacity: .92;
  font-size: .92em;
}
.pro-nav .item.sub2{
  padding-left: 54px;
  opacity: .82;
  font-size: .90em;
}

.pro-nav .item.sub2{ display:none; }

.pro-nav.profile-open .item.sub2{
  display:flex; /* or block; but your .item is probably flex */
}

.pro-nav .item.sub{ padding-left: 34px; opacity:.92; font-size:.92em; }
.pro-nav .item.sub2{ padding-left: 54px; opacity:.82; font-size:.90em; }

.pro-badge{
  font-size:.78rem;
  padding:.35rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
  color: var(--pro-muted);
}

.pro-main{
  flex:1;
  padding: 24px;
}

.pro-frame{
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--pro-border);
  background: var(--pro-surface);
  border-radius: 28px;
  box-shadow: var(--pro-shadow);
  overflow:hidden;
}

.pro-top{
  padding: 18px 18px;
  border-bottom: 1px solid var(--pro-border);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.pro-top .title h2{ margin: 0; }
.pro-top .title p{ margin-top: .35rem; }

.pro-content{
  padding: 18px;
}

.pro-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}

.pro-card{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--pro-border);
  border-radius: 22px;
  padding: 16px;
}

.pro-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.pro-list{
  margin: 10px 0 0 0;
  padding: 0;
  list-style:none;
}
.pro-list li{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.86);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pro-list .meta{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.pro-list .meta strong{
  font-size: 1rem;
}
.pro-list .meta small{
  color: var(--pro-muted);
}
.pro-actions{
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-width: 140px;
}
.pro-mini{
  display:inline-block;
  text-decoration:none;
  text-align:center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
  font-weight:650;
}
.pro-mini:hover{
  border-color: rgba(199,155,122,.45);
  box-shadow: 0 10px 26px rgba(199,155,122,.12);
  transform: translateY(-1px);
  transition: all .18s ease;
}

.pro-pill{
  display:inline-flex;
  align-items:center;
  gap: .45rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: rgba(199,155,122,.12);
  border: 1px solid rgba(199,155,122,.22);
  color: rgba(65,45,35,.9);
  font-size: .84rem;
  font-weight: 700;
}

.pro-kpis{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.pro-kpi{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.86);
  padding: 12px;
}
.pro-kpi strong{display:block}
.pro-kpi span{display:block; color: var(--pro-muted); margin-top: 2px; font-size: .9rem}

/* Responsive */
@media (max-width: 980px){
  .pro-shell{ display:block; }
  .pro-nav{
    width:auto;
    border-right: none;
    border-bottom: 1px solid var(--pro-border);
    display:flex;
    gap: 8px;
    overflow:auto;
  }
  .pro-brand{ flex:0 0 auto; margin: 6px 8px 6px 6px; }
  .pro-nav a.item{ flex:0 0 auto; margin: 6px 0; }
  .pro-main{ padding: 14px; }
  .pro-grid{ grid-template-columns: 1fr; }
  .pro-actions{ min-width: 120px; }
}
 
.week-strip{
  display:flex;
  gap:10px;
  overflow:auto;
  padding: 4px 2px 10px 2px;
  -webkit-overflow-scrolling: touch;
}
.week-day{
  flex: 0 0 auto;
  min-width: 98px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.84);
  padding: 10px 10px;
  text-decoration:none;
}
.week-day strong{display:block; font-size:.95rem}
.week-day small{display:block; margin-top:3px; color: var(--pro-muted)}
.week-day.active{
  background: rgba(199,155,122,.14);
  border-color: rgba(199,155,122,.28);
}

.day-section{
  margin-top: 14px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.86);
  overflow:hidden;
}
.day-head{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
}
.day-head .left{
  display:flex; flex-direction:column; gap:2px;
}
.day-head .left strong{font-size:1rem}
.day-head .left small{color: var(--pro-muted)}
.day-body{ padding: 12px 14px; }

.appt{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.88);
  margin-bottom: 10px;
}
.appt:last-child{margin-bottom:0}
.appt .meta{
  display:flex; flex-direction:column; gap:4px;
}
.appt .meta strong{font-size:1rem}
.appt .meta small{color: var(--pro-muted)}

.appt-tags{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:4px;
}
.appt-tag{
  font-size:.78rem;
  padding:.32rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  color: var(--pro-muted);
}

@media (max-width: 980px){
  .week-day{ min-width: 92px; }
}

/* ===== Availability overlay (tiny, minimal) ===== */
.av-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background: rgba(20,20,20,.45);
  align-items:center;
  justify-content:center;
  padding: 14px;
}
.av-backdrop.on{ display:flex; }

.av-modal{
  width: 100%;
  max-width: 520px;
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.14);
  overflow:hidden;
}
.av-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  background: rgba(255,255,255,.72);
}
.av-title{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.av-title strong{ font-size:1.05rem; }
.av-title small{ color: var(--pro-muted); }

.av-body{ padding: 14px 16px; }
.av-row{ display:flex; gap:10px; flex-wrap:wrap; }

.av-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.88);
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
  cursor:pointer;
  user-select:none;
}
.av-chip:hover{
  border-color: rgba(199,155,122,.45);
  box-shadow: 0 10px 26px rgba(199,155,122,.10);
  transform: translateY(-1px);
  transition: all .18s ease;
}
.av-chip.on{
  background: rgba(199,155,122,.14);
  border-color: rgba(199,155,122,.35);
}

.av-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 420px){
  .av-grid{ grid-template-columns: repeat(3, 1fr); }
}

.av-foot{
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  display:flex;
  gap:10px;
}
.av-foot .pro-mini{ flex:1; }

.av-hint{
  margin-top: 10px;
  color: var(--pro-muted);
  font-size: .85rem;
  line-height: 1.5;
}

/* iOS safe area */
@supports(padding: max(0px)){
  .av-backdrop{ padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}
/* Force overlay hidden unless explicitly opened */
#avBackdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
}

/* When opened */
#avBackdrop.on{
  display:flex;
}


.v-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background: rgba(20,20,20,.45);
  align-items:center;
  justify-content:center;
  padding: 14px;
}
.v-backdrop.on{ display:flex; }

.v-modal{
  width:100%;
  max-width: 560px;
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.14);
  overflow:hidden;
}
.v-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  background: rgba(255,255,255,.72);
}
.v-title{
  display:flex; flex-direction:column; gap:2px;
}
.v-title strong{ font-size:1.05rem; }
.v-title small{ color: var(--pro-muted); }

.v-body{ padding: 14px 16px; }
.v-foot{
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  display:flex;
  gap:10px;
}
.v-foot .pro-mini{ flex:1; }

.v-field label{ display:block; margin-bottom:6px; }
.v-field input{
  width:100%;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  font-size:16px;
}
.v-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px){
  .v-row{ grid-template-columns: 1fr; }
}

/* ===== Visio room (therapist) ===== */
.call-shell{
  min-height: 100vh;
  display:flex;
}
.call-main{
  flex: 1;
  display:flex;
  flex-direction:column;
}
.call-top{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.call-stage{
  flex: 1;
  padding: 14px;
  display:flex;
  gap: 12px;
}
.call-video{
  flex: 1;
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  box-shadow: 0 22px 70px rgba(0,0,0,.08);
  position:relative;
  overflow:hidden;
}
.call-video .label{
  position:absolute;
  top:12px; left:12px;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  font-weight:700;
  color: rgba(40,40,40,.72);
}
.call-pip{
  position:absolute;
  right: 12px;
  bottom: 12px;
  width: 170px;
  height: 120px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color: rgba(40,40,40,.65);
}
.call-controls{
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.call-btn{
  min-width: 120px;
  text-align:center;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  font-weight:800;
  cursor:pointer;
}
.call-btn:hover{
  border-color: rgba(199,155,122,.45);
  box-shadow: 0 10px 26px rgba(199,155,122,.12);
  transform: translateY(-1px);
  transition: all .18s ease;
}
.call-end{
  background: rgba(180,40,40,.10);
  border-color: rgba(180,40,40,.22);
}
.call-side{
  width: 360px;
  padding: 14px;
  border-left: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
}
@media (max-width: 980px){
  .call-shell{ display:block; }
  .call-side{ width:auto; border-left:none; border-top:1px solid rgba(0,0,0,.08); }
  .call-pip{ width: 140px; height: 100px; }
}
@media (max-width:820px){
  .week-grid{
    grid-auto-flow:row;
    grid-auto-columns:unset;
    grid-template-columns:1fr;
    overflow-x:visible;
    scroll-snap-type:none;
  }
  .day-col{ min-width:unset; }
}
.week-grid{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px, 1fr);
  grid-template-columns:unset;
  gap:10px;
  overflow-x:auto;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}

.day-col{
  scroll-snap-align:start;
  min-width:220px;
}
.day-head{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding:2px 2px 8px 2px;
  border-bottom:1px solid rgba(0,0,0,.08);
  margin-bottom:8px;
}
.day-title{ font-weight:700; }
.day-empty{ padding:10px 6px; opacity:.75; }
.day-slots{ display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.slot-row{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px 10px;
  background:rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  
}
.rec-steps{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.rec-step{
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.75);
  border-radius:999px;
  padding:8px 12px;
  font-weight:650;
  cursor:pointer;
}
.rec-step.on{
  border-color:rgba(199,155,122,.6);
  background:rgba(199,155,122,.14);
}
.rec-pane{ padding-top:2px; }
.chip-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .7rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.78);
  text-decoration:none;
  color:inherit;
  font-weight:650;
}
.chip.on{
  border-color:rgba(199,155,122,.65);
  background:rgba(199,155,122,.14);
}
.input{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.92);
  border-radius:14px;
  padding:10px 12px;
  font-size:16px;
}
.block-row{
  display:flex;
  gap:.6rem;
  align-items:flex-end;
  flex-wrap:wrap;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.86);
  border-radius:16px;
  padding:10px 10px;
}
.rule-row{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  justify-content:space-between;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.86);
  border-radius:16px;
  padding:12px 12px;
  margin-bottom:10px;
}
@media (max-width:1200px){
  .week-grid{ grid-template-columns:repeat(3, minmax(180px, 1fr)); }
}
@media (max-width:820px){
  .week-grid{ grid-template-columns:repeat(1, minmax(180px, 1fr)); }
}
.block-row{
  display:flex;
  gap:.6rem;
  align-items:flex-end;
  flex-wrap:wrap;
}

.block-col{
  flex:1 1 160px;
  min-width:160px;
}

.block-actions{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
}

.block-row select.input{
  max-width:100%;
}

@media (max-width:520px){
  .block-col{
    flex:1 1 100%;
    min-width:unset;
  }
  .block-actions{
    width:100%;
    justify-content:flex-end;
    padding-top:4px;
  }
}
.slot-row.booked{
  border-color: rgba(199,155,122,.45);
  background: rgba(199,155,122,.14);
}
.slot-row.booked .small{
  opacity: .9 !important;
}
.slot-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.22rem .5rem;
  border-radius:999px;
  border:1px solid rgba(199,155,122,.35);
  background: rgba(255,255,255,.7);
  font-weight:650;
  font-size:.85rem;
}
.slot-row.booked{
  border-color: rgba(199,155,122,.55);
  background: rgba(199,155,122,.14);
}

.book-left{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  flex:1 1 auto;
  min-width:180px;
}

.book-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.book-status{
  display:inline-flex;
  align-items:center;
  padding:.22rem .55rem;
  border-radius:999px;
  border:1px solid rgba(199,155,122,.45);
  background: rgba(255,255,255,.72);
  font-weight:700;
  font-size:.82rem;
  white-space:nowrap;
}

.book-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}

.book-patient{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.25rem .5rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  font-weight:650;
}

.book-avatar{
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(199,155,122,.35);
  background: rgba(255,255,255,.85);
  font-size:.8rem;
  font-weight:800;
}

.book-actions{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.book-actions .pro-mini{
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  padding:6px 10px;
  background: rgba(255,255,255,.7);
  text-decoration:none;
}

@media (max-width:520px){
  .slot-row.booked{
    flex-direction:column;
    align-items:stretch;
  }
  .book-top{
    justify-content:space-between;
  }
  .book-actions{
    justify-content:flex-start;
  }
}
.slot-row{
  flex-wrap:wrap;
}

.book-actions{
  width:100%;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:.45rem;
}

.book-actions .pro-mini{
  white-space:nowrap;
}

@media (max-width:900px){
  .slot-row.booked{
    flex-direction:column;
    align-items:stretch;
  }
  .book-actions{
    justify-content:flex-start;
  }
}
.book-actions .pro-mini{ padding:6px 8px; }
.slot-row.booked{
  border-color: rgba(199,155,122,.55);
  background: rgba(199,155,122,.14);
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  min-height: 96px;
}

.book-main{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.book-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.book-status{
  display:inline-flex;
  align-items:center;
  padding:.22rem .55rem;
  border-radius:999px;
  border:1px solid rgba(199,155,122,.45);
  background: rgba(255,255,255,.75);
  font-weight:750;
  font-size:.82rem;
  text-decoration:none;
  white-space:nowrap;
}

.book-patient-name{
  font-weight:750;
  letter-spacing:.1px;
}

.book-actions{
  margin-top:.55rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.book-actions .pro-mini{
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  padding:6px 10px;
  background: rgba(255,255,255,.7);
  text-decoration:none;
  white-space:nowrap;
}

@media (max-width:520px){
  .book-actions{
    justify-content:flex-start;
  }
}
.book-status-confirmed{
  border-color: rgba(34,155,92,.35);
  background: rgba(34,155,92,.14);
}

.book-status-pending{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.14);
}
.book-mode{
  font-weight:600;
  opacity:.85;
}
.week-nav{
  display:flex;
  align-items:center;
  justify-content:space-between; /* best UX for prev/today/next */
  gap:10px;
  width:100%;
  margin-top:8px;
}

.week-nav a{
  white-space:nowrap;
}

.week-nav a:nth-child(2){
  margin: 0 auto; /* keeps “Cette semaine” centered */
}