/* ===== Booking Ops Panel — overrides поверх Tabler ===== */

:root {
  --bop-demo-bg: #fff4e6;
  --bop-demo-border: #f7c98b;
  --bop-demo-text: #a15c00;
}

/* Плашка "демо-данные" на live-виджетах */
.bop-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bop-demo-text);
  background: var(--bop-demo-bg);
  border: 1px solid var(--bop-demo-border);
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}
.bop-demo-badge svg { width: 12px; height: 12px; }

.bop-demo-note {
  font-size: 12px;
  color: var(--tblr-secondary-color, #6c757d);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

/* Card header с плашкой демо справа */
.bop-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Статус-точка (для мониторинга, live-индикаторов) */
.bop-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.bop-dot-green { background: #2fb344; box-shadow: 0 0 0 3px rgba(47,179,68,.15); }
.bop-dot-yellow { background: #f76707; box-shadow: 0 0 0 3px rgba(247,103,7,.15); }
.bop-dot-red { background: #d63939; box-shadow: 0 0 0 3px rgba(214,57,57,.15); }
.bop-dot-gray { background: #adb5bd; box-shadow: 0 0 0 3px rgba(173,181,189,.15); }

.bop-dot-pulse {
  animation: bop-pulse 1.8s ease-in-out infinite;
}
@keyframes bop-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Skeleton loaders */
.bop-skel {
  position: relative;
  overflow: hidden;
  background: #eef0f2;
  border-radius: 6px;
  color: transparent !important;
}
.bop-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-100%);
  animation: bop-shimmer 1.3s infinite;
}
@keyframes bop-shimmer {
  100% { transform: translateX(100%); }
}
.bop-skel-text { height: 14px; width: 100%; margin: 3px 0; }
.bop-skel-title { height: 20px; width: 60%; margin-bottom: 8px; }
.bop-skel-avatar { width: 36px; height: 36px; border-radius: 50%; }
.bop-skel-row { height: 48px; width: 100%; }

/* Sidebar active state helper (проставляется layout.js) */
.navbar-vertical .nav-link.active {
  font-weight: 600;
}

/* Приоритетные события — левая полоса */
.bop-priority {
  border-left: 3px solid #d63939;
}

/* Wizard steps */
.bop-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bop-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: #eef0f2;
  color: #6c757d;
  flex-shrink: 0;
}
.bop-step.is-active .bop-step-circle {
  background: #206bc4;
  color: #fff;
}
.bop-step.is-done .bop-step-circle {
  background: #2fb344;
  color: #fff;
}
.bop-step-label {
  font-size: 13px;
  color: #6c757d;
}
.bop-step.is-active .bop-step-label {
  color: #182433;
  font-weight: 600;
}

/* Empty state */
.bop-empty {
  text-align: center;
  padding: 48px 24px;
  color: #6c757d;
}
.bop-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: .5;
}

/* Login screen mock */
.bop-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f6fa;
}


/* Оверрайды поверх Tabler — общие для всех страниц Booking Ops */

.bop-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}

.bop-demo-badge{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#a16207;
  background:#fef3c7;
  border:1px solid #fde68a;
  border-radius:100px;
  padding:.1rem .55rem;
  white-space:nowrap;
}

/* Статус-точки */
.bop-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.bop-dot-green{ background:#2fb344; }
.bop-dot-yellow{ background:#f76707; }
.bop-dot-red{ background:#d63939; }
.bop-dot-blue{ background:#4263eb; }
.bop-dot-gray{ background:#98a2b3; }
.bop-dot-pulse{
  box-shadow:0 0 0 0 rgba(247,103,7,.5);
  animation:bop-pulse 1.8s infinite;
}
@keyframes bop-pulse{
  0%{ box-shadow:0 0 0 0 rgba(247,103,7,.45); }
  70%{ box-shadow:0 0 0 8px rgba(247,103,7,0); }
  100%{ box-shadow:0 0 0 0 rgba(247,103,7,0); }
}

/* Skeleton-загрузка */
.bop-skel{
  background:linear-gradient(90deg,#eef0f2 25%,#e3e6ea 37%,#eef0f2 63%);
  background-size:400% 100%;
  animation:bop-shimmer 1.4s ease infinite;
  border-radius:6px;
}
.bop-skel-row{ height:16px; width:100%; }
.bop-skel-row.w-60{ width:60%; }
.bop-skel-row.w-40{ width:40%; }
@keyframes bop-shimmer{
  0%{ background-position:100% 50%; }
  100%{ background-position:0 50%; }
}

.bop-priority:last-child{ border-bottom:0 !important; }

.bop-empty{
  padding:2rem 1rem;
  text-align:center;
  color:var(--tblr-secondary-color, #6c7a91);
}

/* Статусы клиента — бейджи */
.bop-status-new{ background:#e7f1ff; color:#2c5cc5; }
.bop-status-auth{ background:#e6f8ea; color:#1f8a37; }
.bop-status-mon{ background:#fff4e5; color:#b25e02; }
.bop-status-done{ background:#e6f8ea; color:#1f8a37; }

/* Маска пароля/карты */
.bop-mask{ letter-spacing:.15em; }

/* Wizard steps */
.bop-step{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--tblr-secondary-color,#6c7a91);
}
.bop-step.active{ color:var(--tblr-primary,#206bc4); font-weight:600; }
.bop-step .bop-step-num{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #d7dbe0;
  font-size:.8rem;
}
.bop-step.active .bop-step-num{
  border-color:var(--tblr-primary,#206bc4);
  background:var(--tblr-primary,#206bc4);
  color:#fff;
}
.bop-step.done .bop-step-num{
  border-color:#2fb344; background:#2fb344; color:#fff;
}