/* Urban Panthera Branding Studio - External CSS v15 FULL - FIXED VIEWS DROPDOWN */
/* Path: /demos/property-operations/demo-studio/assets/css/branding-studio.css */
/* Fixes horizontal scroll that hid Views dropdown */

/* === Site Header - Sticky Top 0, Hides on Scroll === */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10001 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e0e0e0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s ease !important;
  will-change: transform !important;
}
body.is-scrolled .site-header {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html {
  scroll-padding-top: 116px !important;
  transition: scroll-padding-top 0.35s ease !important;
}
body.is-scrolled {
  scroll-padding-top: 56px !important;
}

/* === Ops Wrapper === */
#ops-wrapper {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  background: #F8FAFC !important;
  overflow: visible !important;
  padding-top: 0 !important;
}

/* === Ops Topbar - Demo Header === */
#ops-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e0e0e0 !important;
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 60px !important;
  width: 100% !important;
  z-index: 10000 !important;
  padding: 0 !important;
  display: block !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05) !important;
  transition: top 0.35s cubic-bezier(.4,0,.2,1), z-index 0s, box-shadow 0.25s ease !important;
  will-change: top !important;
  overflow: visible !important;
}
body.is-scrolled #ops-topbar {
  top: 0 !important;
  z-index: 10002 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.05) !important;
}
#ops-topbar-inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}
#ops-topbar-left {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
#ops-prop-name {
  color: #0a0a0a !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 280px !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  line-height: 1.2 !important;
}
#ops-role-badge {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: #0a0a0a !important;
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
}

/* === Ops Topbar Actions - NO OVERFLOW CLIP === */
#ops-topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  position: relative !important;
}
.ops-views-wrap{
  position: relative !important;
  display: inline-flex !important;
  overflow: visible !important;
}
.ops-views-btn{
  background:linear-gradient(135deg,#0F172A 0%,#1E293B 100%)!important;
  color:#fff!important;border:1px solid #0F172A!important;border-radius:8px!important;
  padding:.5rem .9rem!important;font-size:.8rem!important;font-weight:700!important;
  display:inline-flex!important;align-items:center!important;gap:.4rem!important;
  cursor:pointer!important;height:36px!important;white-space:nowrap!important;
}
#ops-views-dropdown{
  position:absolute!important;top:calc(100% + 10px)!important;right:0!important;left:auto!important;
  background:#fff!important;border:1.5px solid #E2E8F0!important;border-radius:14px!important;
  box-shadow:0 20px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08)!important;min-width:240px!important;
  padding:.5rem!important;display:none!important;z-index:99999!important;overflow:visible!important;
}
#ops-views-dropdown.is-open{display:block!important}
.ops-view-item{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:.7rem .9rem!important;border-radius:10px!important;color:#0F172A!important;
  text-decoration:none!important;font-size:.85rem!important;font-weight:600!important;
  transition:background .15s!important;
}
.ops-view-item:hover{background:#F8FAFC!important}
.ops-view-item.is-active{background:#0F172A!important;color:#fff!important}
.ops-view-item small{color:#94A3B8!important;font-size:.7rem!important}
.ops-view-item.is-active small{color:#CBD5E1!important}

#ops-topbar-actions .btn-secondary {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #ffffff !important;
  color: #0F172A !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  height:36px !important;
  box-sizing:border-box !important;
}
#ops-topbar-actions .btn-secondary:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}
#ops-branding-btn.btn-secondary {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: #0a0a0a !important;
  font-weight: 700 !important;
}
#ops-branding-btn.btn-secondary:hover {
  background: #1E293B !important;
}

/* === Branding Drawer & Backdrop === */
#branding-drawer-backdrop {
  position: fixed !important;
  right: 0 !important;
  top: 116px !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: calc(100vh - 116px) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 9998 !important;
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}
#branding-drawer-backdrop.is-visible {
  display: block !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
#branding-drawer.is-open ~ #branding-drawer-backdrop,
body:has(#branding-drawer.is-open) #branding-drawer-backdrop {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
#branding-drawer {
  position: fixed !important;
  right: 0 !important;
  top: 116px !important;
  width: 400px !important;
  max-width: 92vw !important;
  height: calc(100vh - 116px) !important;
  background: #fff !important;
  border-left: 1.5px solid #E2E8F0 !important;
  z-index: 9999 !important;
  transform: translateX(100%) !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -10px 0 30px rgba(15,23,42,.15), -2px 0 0 rgba(226,232,240,0.8) !important;
}
body.is-scrolled #branding-drawer {
  top: 56px !important;
  height: calc(100vh - 56px) !important;
}
body.is-scrolled #branding-drawer-backdrop {
  top: 56px !important;
  height: calc(100vh - 56px) !important;
}
#branding-drawer.is-open {
  transform: translateX(0) !important;
}
#branding-drawer, #branding-drawer * {
  font-family: 'Inter', system-ui, sans-serif !important;
}
#branding-drawer h3 { color: #0F172A !important; }
#branding-drawer label { color: #0F172A !important; font-weight: 700 !important; }
#branding-drawer input, #branding-drawer select { background: #fff !important; border: 1.5px solid #E2E8F0 !important; color: #0F172A !important; }

/* === Inspect Mode === */
body.branding-inspect-active * {
  cursor: crosshair !important;
}
body.branding-inspect-active #branding-drawer,
body.branding-inspect-active #branding-drawer * {
  cursor: auto !important;
}
.branding-field-highlight {
  animation: branding-pulse 1.2s ease-in-out 3;
  outline: 2px solid #0EA5E9 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(14,165,233,0.15) !important;
  border-radius: 8px;
}
@keyframes branding-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(14,165,233,0.15); }
  50% { box-shadow: 0 0 0 12px rgba(14,165,233,0.25); }
}
#branding-inspect-info {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #fff;
  border: 1.5px solid #334155;
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
  display: none;
  margin-bottom: 12px;
}
#branding-inspect-info.is-visible {
  display: block;
  animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.branding-inspect-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(14,165,233,0.2);
  border: 1px solid rgba(14,165,233,0.3);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  margin: 2px;
  cursor: pointer;
}
.branding-inspect-badge:hover {
  background: rgba(14,165,233,0.35);
}
#branding-inspect-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F1F5F9;
  border: 1.5px solid #E2E8F0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
#branding-inspect-toggle.is-active {
  background: #0EA5E9;
  color: #fff;
  border-color: #0EA5E9;
  box-shadow: 0 0 0 4px rgba(14,165,233,0.15);
}
#branding-inspect-overlay {
  position: fixed;
  pointer-events: none;
  z-index: 1098;
  border: 2px solid #0EA5E9;
  background: rgba(14,165,233,0.12);
  display: none;
  border-radius: 4px;
}
#branding-inspect-tooltip {
  position: fixed;
  z-index: 1102;
  background: #0F172A;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-family: monospace;
  display: none;
  pointer-events: none;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* === Responsive === */
@media (max-width: 900px) {
  #ops-topbar { top: 56px !important; }
  #ops-topbar-inner {
    padding: 8px 12px !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  #ops-prop-name { max-width: 140px !important; font-size: .9rem !important; }
  #ops-topbar-actions {
    gap: 6px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
  #ops-topbar-actions .btn-secondary {
    font-size: .75rem !important;
    padding: 6px 10px !important;
    height: 32px !important;
  }
  .ops-views-btn { height: 32px !important; font-size: .75rem !important; padding: .4rem .7rem !important; }
  #ops-views-dropdown {
    position: fixed !important;
    top: auto !important;
    right: 12px !important;
    left: 12px !important;
    min-width: auto !important;
    width: auto !important;
    max-width: 320px !important;
    margin-left: auto !important;
  }
  #branding-drawer { width: 100% !important; max-width: 100vw !important; }
}
@media (max-width: 600px) {
  #ops-topbar-inner { flex-direction: column !important; align-items: stretch !important; }
  #ops-topbar-left { justify-content: space-between !important; width: 100% !important; }
  #ops-topbar-actions { justify-content: flex-start !important; overflow: visible !important; flex-wrap: wrap !important; }
}