/* BeautyBook Owner Calendar Panel - Phase 3 */
.bb-owner-panel {
  font-family: 'Nunito', -apple-system, sans-serif;
  background: #f8f5f3;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: #2c1810;
}
.bb-owner-panel *, .bb-owner-panel *::before, .bb-owner-panel *::after { box-sizing: border-box; }

.bb-op-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  background: #fff;
  border-bottom: 1px solid #f0e4dc;
}
.bb-op-brand { display: flex; align-items: center; gap: 10px; font-family: 'Playfair Display', serif; font-size: 18px; }
.bb-op-logo { font-size: 22px; }
.bb-op-badge {
  background: #fdf4ef;
  color: #8b4a3a;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  margin-left: 6px;
}
.bb-op-right { display: flex; gap: 16px; align-items: center; }
.bb-op-langs { display: flex; gap: 6px; }
.bb-op-lang {
  padding: 5px 12px;
  border: 1px solid #e8c8bc;
  background: #fff;
  color: #8b4a3a;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}
.bb-op-lang.active { background: #d97757; color: #fff; border-color: #d97757; }
.bb-op-home { color: #8b4a3a; text-decoration: none; font-weight: 500; font-size: 14px; }
.bb-op-home:hover { color: #d97757; }

.bb-op-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 20px 28px;
}
.bb-op-stat {
  background: #fff;
  border-radius: 14px;
  padding: 18px 22px;
  border: 1px solid #f0e4dc;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bb-op-stat-label { font-size: 12px; color: #8b7569; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.bb-op-stat-value { font-family: 'Playfair Display', serif; font-size: 28px; color: #2c1810; font-weight: 700; }

.bb-op-staff-tabs {
  display: flex;
  gap: 6px;
  padding: 0 28px;
  overflow-x: auto;
  margin-bottom: 14px;
  scrollbar-width: thin;
}
.bb-op-staff-tab {
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #f0e4dc;
  border-radius: 20px 20px 0 0;
  border-bottom: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #8b7569;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
.bb-op-staff-tab:hover { background: #fdf4ef; color: #8b4a3a; }
.bb-op-staff-tab.active { background: #d97757; color: #fff; border-color: #d97757; }
.bb-op-staff-tab .bb-op-staff-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f5e6e0;
  color: #8b4a3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.bb-op-staff-tab.active .bb-op-staff-avatar { background: rgba(255,255,255,0.3); color: #fff; }

.bb-op-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px 16px;
  flex-wrap: wrap;
}
.bb-op-spacer { flex: 1; }
.bb-op-btn {
  padding: 9px 16px;
  border: 1px solid #e8c8bc;
  background: #fff;
  color: #8b4a3a;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.15s;
}
.bb-op-btn:hover { border-color: #d97757; color: #d97757; }
.bb-op-btn-today { background: #fdf4ef; }
.bb-op-btn-primary { background: #d97757; color: #fff; border-color: #d97757; }
.bb-op-btn-primary:hover { background: #c66746; color: #fff; }
.bb-op-btn-danger { background: #c4453c; color: #fff; border-color: #c4453c; }
.bb-op-btn-danger:hover { background: #a33129; color: #fff; }
.bb-op-week { font-weight: 700; color: #2c1810; font-size: 15px; margin: 0 10px; }

.bb-op-calendar {
  margin: 0 28px 40px;
  background: #fff;
  border: 1px solid #f0e4dc;
  border-radius: 14px;
  overflow: hidden;
}
.bb-op-cal-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  gap: 1px;
  background: #f0e4dc;
}
.bb-op-cal-head, .bb-op-cal-time {
  background: #fdf4ef;
  padding: 10px 8px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: #8b4a3a;
}
.bb-op-cal-head strong { display: block; color: #2c1810; }
.bb-op-cal-head span { font-size: 11px; font-weight: 400; color: #8b7569; }
.bb-op-cal-cell {
  background: #fff;
  min-height: 52px;
  padding: 4px 6px;
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.bb-op-cal-cell:hover { background: #fdf4ef; }
.bb-op-cal-cell.today { background: #fffaf6; }
.bb-op-cal-booking {
  background: linear-gradient(135deg, #d97757, #e89b7e);
  color: #fff;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  line-height: 1.3;
}
.bb-op-cal-booking.deposit-paid { background: linear-gradient(135deg, #5a8d5a, #7ab07a); }
.bb-op-cal-booking small { display: block; opacity: 0.85; font-weight: 400; font-size: 10px; }

.bb-op-modal {
  position: fixed;
  inset: 0;
  background: rgba(44, 24, 16, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bb-op-modal-body {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}
.bb-op-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid #f0e4dc;
}
.bb-op-modal-head h3 { margin: 0; font-family: 'Playfair Display', serif; font-size: 20px; color: #2c1810; }
.bb-op-modal-close {
  width: 30px;
  height: 30px;
  border: none;
  background: #fdf4ef;
  border-radius: 50%;
  color: #8b4a3a;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.bb-op-modal-content {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bb-op-modal-content label {
  font-size: 12px;
  font-weight: 600;
  color: #8b7569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
}
.bb-op-modal-content input, .bb-op-modal-content select {
  padding: 10px 14px;
  border: 1px solid #e8c8bc;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.bb-op-modal-content input:focus, .bb-op-modal-content select:focus {
  outline: 2px solid #d97757;
  border-color: #d97757;
}
.bb-op-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 22px;
  border-top: 1px solid #f0e4dc;
}

@media (max-width: 900px) {
  .bb-op-cal-grid { grid-template-columns: 60px repeat(7, 1fr); font-size: 10px; }
  .bb-op-stats { padding: 16px; }
  .bb-op-calendar, .bb-op-toolbar, .bb-op-staff-tabs { margin: 0 16px 16px; padding-left: 0; padding-right: 0; }
}

/* W31hours: overtime / izvanreden chas */
.bb-op-cal-time.bb-op-cal-ot{ background:#fff4e0; color:#a85b00; position:relative; }
.bb-op-cal-time.bb-op-cal-ot::after{ content:'OT'; font-size:9px; font-weight:700; margin-left:4px; color:#c47700; vertical-align:super; }
.bb-op-cal-cell.bb-op-cal-ot{ background:repeating-linear-gradient(45deg,#fff8ee,#fff8ee 8px,#fdeecf 8px,#fdeecf 16px); }

/* W32: day/week view toggle buttons */
.bb-op-viewbtn { background:#fff; color:#8b4a3a; border:1px solid #e6c9bd; }
.bb-op-viewbtn-active { background:#8b4a3a; color:#fff; border-color:#8b4a3a; }
.bb-op-cal-head .bb-op-cal-headinit { display:block; font-size:11px; color:#a07d6e; font-weight:600; }

/* W32-2C: blocked time (unavailable) */
.bb-op-cal-booking.bb-op-cal-blocked {
  background: repeating-linear-gradient(45deg, #d7d7da, #d7d7da 7px, #c5c5c9 7px, #c5c5c9 14px);
  color: #4a4a4f;
  border-left: 3px solid #9a9aa0;
  font-style: italic;
}
.bb-op-cal-booking.bb-op-cal-blocked small { color: #5c5c62; opacity: 0.9; }
.bb-op-typetoggle { display:flex; gap:6px; margin:0 0 10px; }
.bb-op-typetoggle .bb-op-tt-btn {
  flex:1; padding:7px 10px; border:1px solid #d8c9bd; border-radius:8px;
  background:#fff; color:#8b4a3a; font-weight:600; cursor:pointer; font-size:13px;
}
.bb-op-typetoggle .bb-op-tt-btn.active { background:#8b4a3a; color:#fff; border-color:#8b4a3a; }
#bb-op-endtime-row { margin-top:4px; }

.bb-op-cal-dragover{outline:2px dashed #b76e79;outline-offset:-2px;background:#fbeef0 !important;}
.bb-op-cal-dragging{opacity:.5;}
.bb-op-cal-booking[draggable="true"]{cursor:grab;}