/* ============================================================
   🏛️ ARCHGIG ENTERPRISE BESPOKE DESIGN SYSTEM (crm.archgig.com)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap');

/* 1. True SaaS App Shell Root Lock (Zero Window Scroll) */
html,
body,
#__nuxt,
div.font-\[\'Lato\'\],
div.min-h-screen {
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body, html, * {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2, h3, h4, .font-heading, .feature-container-title, th {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.015em !important;
}

/* Remove any accidental top bar line */
body::before, html::before, .top-border-accent {
  display: none !important;
  height: 0 !important;
}

/* 2. Global Main Feature Background */
.bg-light-feature,
div[class*="bg-light-feature"],
.bg-light-feature-body,
main,
div.min-h-screen {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
}

/* 3. Fixed Topbar Navbar Header (62px Pinned at Top) */
.sticky-nav:not(.second-bar):not(.feature-slot *),
div[class*="sm:bg-white"][class*="sticky-nav"]:not(.second-bar),
header:not(.el-dialog__header):not(.feature-slot *),
nav.top-bar {
  position: fixed !important;
  top: 0 !important;
  left: 60px !important;
  right: 0 !important;
  width: calc(100vw - 60px) !important;
  max-width: calc(100vw - 60px) !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  padding: 0 !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
}

/* Inner flex container taking 100% full width and pushing buttons to top right */
.sticky-nav:not(.second-bar):not(.feature-slot *) > div,
header:not(.el-dialog__header):not(.feature-slot *) > div,
nav.top-bar > div {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* Push right action buttons group all the way to the top right */
.sticky-nav:not(.second-bar):not(.feature-slot *) div[class*="space-x-2 items-center"],
header:not(.el-dialog__header):not(.feature-slot *) div[class*="space-x-2 items-center"],
nav.top-bar div[class*="space-x-2 items-center"] {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 639px) {
  div.bg-light-purple.sm\:bg-white.border-b,
  div[class*="sm:bg-white"][class*="border-b"]:not(.feature-slot *):not(.el-drawer *):not(#dialerInputRef),
  header:not(.el-dialog__header):not(.feature-slot *),
  nav.top-bar {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* Right Column Outer Container */
div.relative.bg-light-feature,
div[class*="bg-light-feature"][class*="w-full"] {
  margin-left: 60px !important;
  width: calc(100vw - 60px) !important;
  max-width: calc(100vw - 60px) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (max-width: 639px) {
  div.relative.bg-light-feature,
  div[class*="bg-light-feature"][class*="w-full"] {
    margin-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* Isolated Scrolling Body Viewport */
.feature-slot,
div.feature-slot,
main.feature-slot {
  margin-top: 62px !important;
  height: calc(100vh - 62px) !important;
  max-height: calc(100vh - 62px) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  scrollbar-gutter: stable !important;
  box-sizing: border-box !important;
  position: relative !important;
}

@media (max-width: 639px) {
  .feature-slot,
  div.feature-slot,
  main.feature-slot {
    height: calc(100vh - 62px - 56px) !important;
    max-height: calc(100vh - 62px - 56px) !important;
    margin-bottom: 56px !important;
  }
}

/* Topbar Page Title ('Home', 'Call Histories', etc.) */
h2[class*="font-bold"],
h2[class*="text-lg"],
h2[class*="2xl:text-2xl"],
h2[class*="sm:text-light-purple"],
h2.dark:text-white,
div[class*="justify-between"] h2 {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
}

/* 4. Topbar Right Action Icons & Buttons */
div[class*="space-x-2 items-center"] button:not(.navbar-avatar-btn):not([ref_key="profileTabButton"] *),
div[class*="space-x-2 items-center"] .el-button:not(.navbar-avatar-btn):not([ref_key="profileTabButton"] *),
div[class*="space-x-2 items-center"] div[class*="relative"]:not([ref_key="profileTabButton"]):not([class*="profileTabButton"]) > button,
div[class*="space-x-2 items-center"] .box-item button {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #334155 !important;
  padding: 6px 10px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

div[class*="space-x-2 items-center"] button:not(.navbar-avatar-btn):not([ref_key="profileTabButton"] *):hover,
div[class*="space-x-2 items-center"] .el-button:not(.navbar-avatar-btn):not([ref_key="profileTabButton"] *):hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0ea5e9 !important;
}

div[class*="space-x-2 items-center"] svg,
div[class*="space-x-2 items-center"] img:not([ref_key="profileTabButton"] *):not(.navbar-avatar-btn *) {
  opacity: 1 !important;
  filter: none !important;
  color: #334155 !important;
  width: 18px !important;
  height: 18px !important;
}

/* 4.1 SMS Icon Fix in Topbar (Never pure white/invisible) */
.sticky-nav:not(.second-bar) img[src*="sms-histories"],
div[class*="space-x-2 items-center"] img[src*="sms-histories"],
.sticky-nav:not(.second-bar) button[class*="navbar-sms-btn"] img {
  filter: brightness(0) !important;
  opacity: 0.85 !important;
  width: 19px !important;
  height: 19px !important;
  display: block !important;
}

/* 4.2 Hide stray mobile 3-dots SVG next to avatar on desktop */
@media (min-width: 640px) {
  .sticky-nav:not(.second-bar) button svg.sm\:hidden,
  .sticky-nav:not(.second-bar) button:has(img) svg,
  div[class*="space-x-2 items-center"] button:has(img) svg {
    display: none !important;
  }
}

/* 4. Action Buttons Normalization (All buttons have uniform rounded rectangle design) */
div[class*="space-x-2 items-center"] button:not([class*="navbar-avatar-btn"]):not(:has(img[alt*="Profile"])):not(:has(img[src*="avatar"])):not(:has(img[src*="profile"])),
div[class*="space-x-2 items-center"] .el-button,
div[class*="space-x-2 items-center"] .box-item button {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #334155 !important;
  padding: 6px 10px !important;
  width: 42px !important;
  height: 36px !important;
  min-width: 42px !important;
  min-height: 36px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Action button icons inside buttons: clean 18px icons, zero border, zero circular distortion */
div[class*="space-x-2 items-center"] button:not(:has(img[alt*="Profile"])):not(:has(img[src*="avatar"])) img,
div[class*="space-x-2 items-center"] button:not(:has(img[alt*="Profile"])):not(:has(img[src*="avatar"])) a img {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  display: block !important;
}

/* 5. ONLY the profile avatar button is circular */
div[ref_key="profileTabButton"],
div[class*="profileTabButton"],
.profile-tab-container,
.sticky-nav:not(.second-bar) div[class*="space-x-2 items-center"] > div:last-child,
header:not(.el-dialog__header):not(.feature-slot *) div[class*="items-center"] > div:last-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  margin-left: 8px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

div[ref_key="profileTabButton"] button,
button.navbar-avatar-btn,
.profile-tab-container button,
div[class*="profileTabButton"] button,
.sticky-nav:not(.second-bar) div[class*="space-x-2 items-center"] > div:last-child button,
.sticky-nav:not(.second-bar) button:has(img[alt*="Profile"]),
.sticky-nav:not(.second-bar) button:has(img[src*="avatar"]) {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  overflow: visible !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sticky-nav:not(.second-bar) div[class*="space-x-2 items-center"] > div:last-child button img,
.sticky-nav:not(.second-bar) button:has(img[alt*="Profile"]) img,
.sticky-nav:not(.second-bar) button:has(img[src*="avatar"]) img {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  border: 2px solid #cbd5e1 !important;
  object-fit: cover !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  display: block !important;
}

.ag-avatar-status-dot {
  position: absolute !important;
  bottom: 0px !important;
  right: 0px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  background: #10b981 !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  z-index: 20 !important;
  pointer-events: none !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4) !important;
}

div[ref_key="profileTabButton"] button:hover,
button.navbar-avatar-btn:hover {
  transform: scale(1.06) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Avatar Image (36px perfect circular avatar) */
div[ref_key="profileTabButton"] img,
button.navbar-avatar-btn img,
.profile-tab-container img,
header:not(.el-dialog__header):not(.feature-slot *) div[class*="items-center"] > div:last-child button img {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
  background: #0f172a !important;
  margin: 0 !important;
}

/* Status Light Pin (Bottom-Right of Avatar Circle) */
.navbar-status-badge,
span.navbar-status-badge,
span[class*="navbar-status-badge"] {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  position: absolute !important;
  bottom: 0px !important;
  right: 0px !important;
  z-index: 50 !important;
  display: block !important;
  background-color: #22c55e !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4), 0 2px 4px rgba(0,0,0,0.15) !important;
  pointer-events: none !important;
}

span.navbar-status-badge.bg-green-600,
span.navbar-status-badge[class*="green"] {
  background-color: #22c55e !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4), 0 2px 4px rgba(0,0,0,0.15) !important;
}

span.navbar-status-badge.bg-red-600,
span.navbar-status-badge[class*="red"] {
  background-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4), 0 2px 4px rgba(0,0,0,0.15) !important;
}

/* Hide 3-dots icons in the topbar header profile avatar button only */
div[ref_key="profileTabButton"] svg,
.profile-tab-container svg,
.navbar-avatar-btn svg,
header div[class*="items-center"] > div:last-child button svg,
.sticky-nav:not(.second-bar) svg[name="hr-ellipsis"],
.sticky-nav:not(.second-bar) svg[name="vr-ellipsis"] {
  display: none !important;
}

/* Navbar SMS Button */
.navbar-sms-btn,
button.navbar-sms-btn,
button[title="Send SMS"],
button[title*="SMS"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
}

.navbar-sms-btn svg,
button[title="Send SMS"] svg,
button[title*="SMS"] svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #0f172a !important;
  color: #0f172a !important;
  fill: none !important;
  display: block !important;
  opacity: 1 !important;
}

/* Permanently Hide Old Standalone Status Button */
div.box-item:has([content*="active status"]),
div.box-item:has([content*="Active status"]),
.el-tooltip__trigger:has([class*="p-[5px]"][class*="rounded-full"]) {
  display: none !important;
}


/* 6. Notification Badges */
.bg-red-500,
span[class*="bg-red-500"],
span[class*="top-[-8px]"] {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45) !important;
  padding: 1px 6px !important;
}

/* 7. Left Vertical Sidebar */
div[class*="sm:min-h-[100vh]"][class*="z-[99999]"]:has(.sidebar),
div[class*="sm:w-[3.75rem]"]:has(.sidebar),
div.font-\[\'Lato\'\] > div.flex > div:first-child:has(.sidebar),
aside:not(.feature-slot *),
nav.sidebar:not(.feature-slot *),
div.sidebar-container:not(.feature-slot *) {
  background: #0B132B !important;
  background-color: #0B132B !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
}

/* Sidebar Icon Image & SVG Styling */
img.side-icon-img,
.side-icon img,
div[class*="side-icon"] img,
.bg-light-purple-bar img {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  filter: brightness(0) invert(0.68) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.side-icon:hover img,
div[class*="side-icon"]:hover img,
.bg-light-purple-bar a:hover img,
.bg-light-purple-bar button:hover img {
  filter: brightness(0) invert(0.75) sepia(1) saturate(5) hue-rotate(160deg) drop-shadow(0 0 6px rgba(56, 189, 248, 0.6)) !important;
  transform: scale(1.12) !important;
}

.router-link-active img.side-icon-img,
.router-link-exact-active img.side-icon-img,
.router-link-active .side-icon img,
.router-link-exact-active .side-icon img {
  filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
  transform: scale(1.05) !important;
}

.sidebar svg,
div[class*="sm:w-[3.75rem]"] svg,
aside:not(.feature-slot *) svg,
nav.sidebar svg {
  width: 20px !important;
  height: 20px !important;
  color: #94a3b8 !important;
  stroke-width: 1.8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar a:hover svg,
.sidebar button:hover svg {
  color: #38bdf8 !important;
  transform: scale(1.1) !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6)) !important;
}

.sidebar a:hover,
.sidebar button:hover {
  color: #38bdf8 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.sidebar a.router-link-active,
.sidebar button.active,
.sidebar div.active,
.sidebar .router-link-exact-active {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4) !important;
  border-radius: 12px !important;
}

.sidebar a.router-link-active svg,
.sidebar .router-link-exact-active svg {
  color: #ffffff !important;
}

div.logo {
  background: linear-gradient(135deg, #0ea5e9, #2563eb, #4f46e5) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* ============================================================
   📊 8. CALL HISTORIES & GLOBAL EXECUTIVE DATA TABLES (12PX COMPACT)
   ============================================================ */

/* Disable Broken Fixed Overlays */
.el-table__fixed,
.el-table__fixed-right,
.el-table__fixed-header-wrapper,
.el-table__fixed-body-wrapper,
.el-table__fixed-right-patch,
div[class*="el-table__fixed"],
.modern-el-table .el-table__fixed-right,
.el-table .el-table__fixed-right,
.modern-el-table .el-table__fixed,
.el-table .el-table__fixed {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Table Wrapper Card */
.el-table,
.table-container,
div[class*="TableContainer"] {
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.04) !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
}

/* Executive Deep Navy / Indigo Modern Table Header */
.el-table th.table-header,
.el-table th.el-table__cell,
.el-table thead th,
.el-table__header-wrapper th.el-table__cell,
.el-table__header th,
.modern-el-table th,
table thead th {
  background: #1e1b4b !important;
  background-color: #1e1b4b !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 2px solid #4f46e5 !important;
  border-top: none !important;
  padding: 8px 6px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.el-table th.el-table__cell .cell,
.el-table thead th .cell {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 4px !important;
}

/* Table Body Rows */
.el-table__row,
table tbody tr {
  background-color: #ffffff !important;
  transition: background-color 0.15s ease !important;
}

.el-table__row:hover > td.el-table__cell,
table tbody tr:hover > td {
  background-color: #f8fafc !important;
}

/* Table Cells - Compact Enterprise Standard */
.el-table td.el-table__cell,
.el-table tbody td {
  border-bottom: 1px solid #f1f5f9 !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 6px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.el-table td.el-table__cell .cell {
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
  min-height: 24px !important;
  padding: 0 4px !important;
}

/* ID Column */
.el-table td.el-table__cell:first-child,
.el-table td.el-table__cell:first-child .cell {
  font-weight: 700 !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

/* Customer Name & Phone */
.el-table td.el-table__cell p,
.el-table td.el-table__cell span,
.el-table td.el-table__cell a {
  font-size: 12px !important;
}

/* Call Time Sub-text (10px) */
.call-time,
p.call-time,
div[class*="space-y-1"] p {
  font-size: 10px !important;
  color: #64748b !important;
  line-height: 1.25 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Duration Column */
.el-table td[class*="duration"] p,
.el-table td[class*="duration"] .cell {
  font-variant-numeric: tabular-nums !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', monospace !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #334155 !important;
  white-space: nowrap !important;
}

/* Status Badges */
div[class*="first-letter:uppercase"],
div[class*="border dark:border-light-purple-bar"] {
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 2px 10px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  text-transform: capitalize !important;
  min-width: 80px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Finished / Success -> Emerald Green */
div[class*="first-letter:uppercase"]:has([content*="Finished"]),
div[class*="first-letter:uppercase"]:has([content*="finished"]),
div[class*="first-letter:uppercase"]:has([content*="Answered"]),
div[class*="first-letter:uppercase"]:has([content*="answered"]),
div[class*="first-letter:uppercase"]:has([content*="success"]),
.status-finished, .status-answered {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
}

/* Initiated / Ongoing -> Sky Blue */
div[class*="first-letter:uppercase"]:has([content*="Initiated"]),
div[class*="first-letter:uppercase"]:has([content*="initiated"]),
div[class*="first-letter:uppercase"]:has([content*="Ongoing"]),
div[class*="first-letter:uppercase"]:has([content*="ongoing"]),
.status-initiated, .status-ongoing {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #7dd3fc !important;
}

/* Hungup / Missed / Failed -> Rose Red */
div[class*="first-letter:uppercase"]:has([content*="Hungup"]),
div[class*="first-letter:uppercase"]:has([content*="hungup"]),
div[class*="first-letter:uppercase"]:has([content*="Missed"]),
div[class*="first-letter:uppercase"]:has([content*="missed"]),
div[class*="first-letter:uppercase"]:has([content*="Failed"]),
div[class*="first-letter:uppercase"]:has([content*="failed"]),
div[class*="first-letter:uppercase"]:has([content*="rejected"]),
.status-hungup, .status-missed, .status-failed {
  background: #ffe4e6 !important;
  color: #be123c !important;
  border: 1px solid #fda4af !important;
}

/* Queue / Waiting -> Warm Amber */
div[class*="first-letter:uppercase"]:has([content*="Queue"]),
div[class*="first-letter:uppercase"]:has([content*="queue"]),
div[class*="first-letter:uppercase"]:has([content*="timeout"]) {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fcd34d !important;
}

/* 9. Audio Play Button (Royal Blue Circular Button) */
button[class*="play"],
div[class*="PlayButton"] button,
.el-table td button:has(svg):not(.el-dropdown *):not([class*="border-[#C0BFDB]"]) {
  background: #2563eb !important;
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

button[class*="play"]:hover,
div[class*="PlayButton"] button:hover {
  background: #1d4ed8 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4) !important;
}

button[class*="play"] svg,
div[class*="PlayButton"] button svg {
  fill: #ffffff !important;
  color: #ffffff !important;
  width: 12px !important;
  height: 12px !important;
}

/* 10. Quick Call & Quick SMS Action Buttons */
div[class*="border-[#C0BFDB]"][class*="rounded-full"] {
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  border-radius: 50% !important;
  padding: 4px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
}

div[class*="border-[#C0BFDB]"][class*="rounded-full"]:hover {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  transform: scale(1.1) !important;
}

div[class*="border-[#C0BFDB]"][class*="rounded-full"] svg path {
  stroke: #2563eb !important;
}

/* 11. Right 3-Dots Action Button */
div[class*="ActionButton"] button,
button:has(svg[name="ellipsis"]),
.el-dropdown > button.el-button,
.el-dropdown button,
.el-table td .el-dropdown button,
.el-table td .el-dropdown .el-button {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  padding: 4px 8px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

div[class*="ActionButton"] button:hover,
.el-dropdown button:hover,
.el-table td .el-dropdown button:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

/* 12. CRM Leads Table 'View' Buttons */
.modern-el-table .el-button--primary,
.el-table td button.el-button--primary,
button.el-button--primary {
  background: #2563eb !important;
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 5px 16px !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

/* 13. Top Filter Switch & Pagination */
.el-switch.is-checked .el-switch__core {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

div[class*="PagButton"] button,
button[class*="PagButton"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
}

/* 14. Right Side Sticky Vertical Tabs */
div.fixed[class*="right-0"]:has(div.SideStickyDrop),
div.fixed[class*="right-0"]:has(div.SideStickyPair),
div[class*="SideStickyDrop"],
div[class*="SideStickyPair"] {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  color: #38bdf8 !important;
  box-shadow: -2px 4px 16px rgba(15, 23, 42, 0.25) !important;
  border-left: 1px solid rgba(56, 189, 248, 0.4) !important;
  font-weight: 700 !important;
}

/* Headset Button (Bottom Right) */
button[class*="rounded-full"][class*="bg-light-purple"],
div[class*="p-3"][class*="rounded-full"][class*="bg-light-purple"] {
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5) !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}


/* ============================================================
   🧭 ARCHGIG ULTRA-SLEEK SIDEBAR & DARK NAVY GLASSMORPHISM DRAWER
   ============================================================ */
div[class*="sm:min-h-[100vh]"][class*="z-[99999]"]:has(.sidebar),
div[class*="sm:w-[3.75rem]"]:has(.sidebar),
div.font-\[\'Lato\'\] > div.flex > div:first-child:has(.sidebar),
aside:not(.feature-slot *),
nav.sidebar:not(.feature-slot *),
div.sidebar-container:not(.feature-slot *) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  background: #0B132B !important;
  background-color: #0B132B !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  z-index: 100000 !important;
  box-sizing: border-box !important;
}

.sidebar {
  position: relative !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  padding: 6px 0 !important;
  gap: 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
  z-index: 100000 !important;
}

.sidebar::-webkit-scrollbar,
div[class*="sm:min-h-[100vh]"]::-webkit-scrollbar {
  width: 0px !important;
  display: none !important;
}

.sidebar img,
.sidebar img[src*="logo"],
.sidebar img[alt="ArchGig"],
.sidebar > div:first-child img,
.sidebar > a:first-child img,
.sidebar > img {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  margin: 4px auto 8px auto !important;
  object-fit: contain !important;
  display: block !important;
}

.sidebar > div:first-child,
.sidebar > a:first-child {
  width: 100% !important;
  max-width: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Primary Sidebar Icon Trigger Button */
.side-icon,
.sidebar > div > .side-icon,
.sidebar > .side-icon,
.sidebar a[class*="side-icon"] {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 9px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 2px auto !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: visible !important;
}

.side-icon:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.side-icon.router-link-active,
.side-icon.router-link-exact-active {
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
}

.side-icon img,
div[class*="side-icon"] img,
.side-icon img.side-icon-img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block !important;
  object-fit: contain !important;
}

/* Tooltip / Flyout Drawer Parent Wrapper */
.side-icon > div[class*="scale-0"],
div[class*="group-hover:scale-100"],
.side-icon > div:last-child:not(.side-icon-img):not(svg) {
  position: absolute !important;
  left: 48px !important;
  top: -4px !important;
  z-index: 9999999 !important;
  pointer-events: none !important;
  overflow: visible !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease !important;
}

/* Open when hovered OR when clicked (.is-drawer-open) */
.side-icon:hover > div[class*="scale-0"],
.side-icon:hover div[class*="group-hover:scale-100"],
.side-icon.is-drawer-open > div[class*="scale-0"],
.side-icon.is-drawer-open div[class*="group-hover:scale-100"],
.side-icon.is-drawer-open > div:first-child > div:last-child,
.side-icon.is-drawer-open > div:last-child,
.side-icon:focus-within > div[class*="scale-0"],
.side-icon:focus-within div[class*="group-hover:scale-100"] {
  transform: scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.side-icon.is-drawer-open,
.side-icon:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.side-icon.is-drawer-open {
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25) !important;
}

/* ============================================================
   🌌 DARK NAVY GLASSMORPHISM FLYOUT SUBMENU DRAWER
   ============================================================ */
.side-icon-tooltip {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 9999999 !important;
  background: #0B132B !important;
  background-color: #0B132B !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 3px solid #38BDF8 !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: 12px 18px 40px rgba(0, 0, 0, 0.7), 4px 4px 16px rgba(0, 0, 0, 0.4) !important;
  min-width: 220px !important;
  width: max-content !important;
  max-width: 320px !important;
  max-height: calc(100vh - 60px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 8px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  pointer-events: auto !important;
}

/* Invisible Hover Bridge to eliminate cursor dropouts */
.side-icon-tooltip::before {
  content: "" !important;
  position: absolute !important;
  left: -20px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 25px !important;
  background: transparent !important;
  pointer-events: auto !important;
}

/* Sleek Scrollbar for Long Drawer Menus */
.side-icon-tooltip::-webkit-scrollbar {
  width: 4px !important;
}
.side-icon-tooltip::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03) !important;
}
.side-icon-tooltip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
}
.side-icon-tooltip::-webkit-scrollbar-thumb:hover {
  background: #38BDF8 !important;
}

/* Submenu Items Flex Container */
.side-icon-tooltip .flex.flex-col,
.side-icon-tooltip div[class*="flex-col"] {
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Submenu Links & Actions */
.side-icon-tooltip a,
.side-icon-tooltip button,
.side-icon-tooltip div > a,
.side-icon-tooltip div > div > a {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  margin: 1px 0 !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  color: #E2E8F0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transition: all 0.15s ease-in-out !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.side-icon-tooltip a:hover,
.side-icon-tooltip button:hover,
.side-icon-tooltip div > a:hover,
.side-icon-tooltip div > div > a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #38BDF8 !important;
  transform: translateX(4px) !important;
}

.side-icon-tooltip a.router-link-active,
.side-icon-tooltip a.router-link-exact-active,
.side-icon-tooltip div.router-link-active > a {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #38BDF8 !important;
  font-weight: 600 !important;
  border-left: 2px solid #38BDF8 !important;
  border-radius: 0 7px 7px 0 !important;
}

/* Single-Item Tooltips (Home, Roles, Settings) */
.side-icon:not(:has(a)) .side-icon-tooltip:not(:has(a)) {
  min-width: auto !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

/* ============================================================
   💬 LIVE CHAT / SUPPORT AGENT BUTTON (Bottom Right - Enabled)
   ============================================================ */
div[class*="fixed"][class*="z-[100]"],
div[class*="fixed"][class*="bottom-"][class*="right-"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 99999 !important;
}

button[class*="rounded-full"][class*="bg-light-purple"],
div[class*="p-3"][class*="rounded-full"][class*="bg-light-purple"],
div[class*="bg-light-purple-bar"][class*="rounded-full"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.45) !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

button[class*="rounded-full"][class*="bg-light-purple"]:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.6) !important;
}

/* ============================================================
   🚫 PERMANENTLY HIDE ONLY RIGHT-SIDE DIALER & SMS VERTICAL TABS
   ============================================================ */
.dialer-button,
.sms-button,
button.dialer-button,
button.sms-button,
button[class*="dialer-button"],
button[class*="sms-button"],
div[class*="dialer-button"],
div[class*="sms-button"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  z-index: -9999 !important;
}


/* ============================================================
   💎 HIGH CONTRAST TOPBAR ACTION ICONS & NAVBAR BUTTONS
   ============================================================ */
div[class*="space-x-2 items-center"] button,
div[class*="space-x-2 items-center"] .el-button,
div[class*="space-x-2 items-center"] div[class*="relative"] > button,
div[class*="space-x-2 items-center"] .box-item button,
header button,
nav.top-bar button {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  padding: 6px 10px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

div[class*="space-x-2 items-center"] button:hover,
header button:hover {
  background: #f1f5f9 !important;
  border-color: #0ea5e9 !important;
  color: #0ea5e9 !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* Force crystal clear visibility on all navbar icons & images (SMS, Messages, Tickets, Calls, Followups) */
div[class*="space-x-2 items-center"] img,
div[class*="space-x-2 items-center"] svg,
header img,
header svg,
nav.top-bar img,
nav.top-bar svg {
  opacity: 1 !important;
  visibility: visible !important;
  color: #0f172a !important;
  stroke: #0f172a !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block !important;
}

div[class*="space-x-2 items-center"] img[src*="sms"],
div[class*="space-x-2 items-center"] img[src*="histories"],
.navbar-sms-btn img {
  filter: brightness(0) saturate(100%) !important;
  -webkit-filter: brightness(0) saturate(100%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 20px !important;
  height: 20px !important;
}

div[class*="space-x-2 items-center"] img[src*="new_messages"],
div[class*="space-x-2 items-center"] img[src*="tickets"],
div[class*="space-x-2 items-center"] img[src*="due_tasks"],
div[class*="space-x-2 items-center"] img[src*="unhandled-calls"] {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 20px !important;
  height: 20px !important;
}

/* Ensure mobile quick action buttons (SMS, Dialer) display cleanly on all screens */
div[class*="space-x-2 items-center"] > button,
div[class*="space-x-2 items-center"] > .el-button,
.navbar-sms-btn,
.navbar-dialer-btn,
button.navbar-sms-btn,
button.navbar-dialer-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease !important;
}

.navbar-sms-btn:hover,
.navbar-dialer-btn:hover {
  background: #f1f5f9 !important;
  border-color: #0ea5e9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25) !important;
}

.navbar-sms-btn img,
.navbar-dialer-btn svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* ============================================================ */
/* 🚀 FIX MY LEADS DASHBOARD CARDS & PREVENT HORIZONTAL BLOWOUT */
/* ============================================================ */
html, body, main, .feature-slot, .feature-main-card, .feature-main-section {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.el-table, .modern-el-table, .el-table__inner-wrapper {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Responsive modern grid for My Leads cards */
div[class*="grid-cols-2"][class*="sm:grid-cols-3"],
.feature-container-title + div > .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Card styling */
div[class*="grid-cols-2"][class*="sm:grid-cols-3"] > div,
.feature-container-title + div > .grid > div {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

div[class*="grid-cols-2"][class*="sm:grid-cols-3"] > div:hover,
.feature-container-title + div > .grid > div:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
}

div[class*="grid-cols-2"][class*="sm:grid-cols-3"] p.text-3xl,
.feature-container-title + div > .grid p.text-3xl {
  font-size: 26px !important;
  margin: 4px 0 !important;
  font-weight: 800 !important;
}

div[class*="grid-cols-2"][class*="sm:grid-cols-3"] p.text-md,
.feature-container-title + div > .grid p.text-md {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  opacity: 0.8 !important;
}

/* ============================================================ */
/* 👻 HIDE GHOST SECOND-BAR & FIX MY LEADS OVERLAP CROPPING    */
/* ============================================================ */
/* Nuxt has .second-bar { display: flex !important; } which overrides inline display: none */
.second-bar[style*="display: none"],
.second-bar[style*="display:none"],
.second-bar:has(button.hidden:only-child),
.second-bar:not(:has(button:not(.hidden):not(.invisible))) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Clean spacing and crisp typography for My Leads title */
.feature-container-title {
  margin-bottom: 12px !important;
}

.feature-container-title h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================ */
/* 🌐 ARCHGIG WEBSITE BUILDER SLIDE-OUT STUDIO DRAWER          */
/* ============================================================ */
#ag-website-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 999998 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#ag-website-drawer-backdrop.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#ag-website-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 88vw !important;
  max-width: 1720px !important;
  background: #ffffff !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3) !important;
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s ease !important;
  border-left: 1px solid #e2e8f0 !important;
}

#ag-website-drawer.is-open {
  transform: translateX(0) !important;
}

#ag-website-drawer.is-fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  border-left: none !important;
}

.ag-drawer-header {
  height: 62px !important;
  min-height: 62px !important;
  padding: 0 20px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  gap: 16px !important;
}

.ag-drawer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 220px !important;
}

.ag-drawer-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
}

.ag-drawer-tab-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.ag-drawer-tab-btn:hover, .ag-drawer-tab-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}

.ag-drawer-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ag-drawer-icon-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ag-drawer-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

.ag-drawer-close-btn {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}

.ag-drawer-close-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

.ag-drawer-body {
  flex: 1 !important;
  width: 100% !important;
  height: calc(100% - 62px) !important;
  position: relative !important;
  background: #f8fafc !important;
}

.ag-drawer-iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

/* Sidebar Website item */
.sidebar-website-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  border: none !important;
  margin: 4px 0 !important;
}

.sidebar-website-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

.sidebar-website-btn svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
  transition: all 0.2s ease !important;
}

.sidebar-website-btn:hover svg {
  stroke: #60a5fa !important;
  transform: scale(1.1) !important;
}

.sidebar-website-btn .side-icon-tooltip {
  position: absolute !important;
  left: 54px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: scale(0.9) translateX(-6px) !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  z-index: 99999 !important;
}

.sidebar-website-btn:hover .side-icon-tooltip {
  opacity: 1 !important;
  transform: scale(1) translateX(0) !important;
}

/* ==========================================================================
   SIP / WebRTC Topbar Status Indicator & Multi-Tab Coordination
   ========================================================================== */

/* The topbar SIP phone button container */
.ag-sip-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* 1. CONNECTED (Active Tab) - Solid Green with Glow */
.ag-sip-btn.is-connected,
button:has(svg.is-sip-connected) {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25) !important;
}

.ag-sip-btn.is-connected:hover,
button:has(svg.is-sip-connected):hover {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: rgba(16, 185, 129, 0.8) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4) !important;
  transform: scale(1.05) !important;
}

svg.is-sip-connected,
.ag-sip-btn.is-connected svg,
button:has(svg.is-sip-connected) svg {
  color: #10b981 !important;
  fill: #10b981 !important;
  filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.4)) !important;
  transition: all 0.2s ease !important;
}

/* 2. STANDBY (Active in another tab) - Amber Yellow */
.ag-sip-btn.is-standby,
button:has(svg.is-sip-standby) {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

.ag-sip-btn.is-standby:hover,
button:has(svg.is-sip-standby):hover {
  background: rgba(245, 158, 11, 0.22) !important;
  border-color: rgba(245, 158, 11, 0.75) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35) !important;
  transform: scale(1.05) !important;
}

svg.is-sip-standby,
.ag-sip-btn.is-standby svg,
button:has(svg.is-sip-standby) svg {
  color: #f59e0b !important;
  fill: #f59e0b !important;
  filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.3)) !important;
  transition: all 0.2s ease !important;
}

/* 3. DISCONNECTED / FAILED - Red / Slate */
.ag-sip-btn.is-disconnected,
button:has(svg.is-sip-disconnected) {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.ag-sip-btn.is-disconnected:hover,
button:has(svg.is-sip-disconnected):hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
}

svg.is-sip-disconnected,
.ag-sip-btn.is-disconnected svg,
button:has(svg.is-sip-disconnected) svg {
  color: #ef4444 !important;
  fill: #ef4444 !important;
  transition: all 0.2s ease !important;
}

/* 4. IN CALL - Pulsing Cyan */
.ag-sip-btn.is-incall,
button:has(svg.is-sip-incall) {
  background: rgba(6, 182, 212, 0.18) !important;
  border: 1.5px solid #06b6d4 !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.4) !important;
  animation: ag-call-pulse 1.2s infinite ease-in-out !important;
}

svg.is-sip-incall,
.ag-sip-btn.is-incall svg,
button:has(svg.is-sip-incall) svg {
  color: #06b6d4 !important;
  fill: #06b6d4 !important;
}

/* Pulse Dot on the SIP Button */
.ag-sip-pulse-dot {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  border: 1.5px solid #ffffff !important;
  pointer-events: none !important;
  z-index: 30 !important;
}

.ag-sip-pulse-dot.is-green {
  background-color: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
  animation: ag-pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.ag-sip-pulse-dot.is-yellow {
  background-color: #f59e0b !important;
  box-shadow: 0 0 6px #f59e0b !important;
}

.ag-sip-pulse-dot.is-red {
  background-color: #ef4444 !important;
  box-shadow: 0 0 6px #ef4444 !important;
}

.ag-sip-pulse-dot.is-cyan {
  background-color: #06b6d4 !important;
  box-shadow: 0 0 8px #06b6d4 !important;
  animation: ag-pulse-glow 1s infinite !important;
}

@keyframes ag-pulse-glow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.75;
  }
}

@keyframes ag-call-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(6, 182, 212, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
  }
}

/* Floating notice if call is active in another tab */
.ag-remote-call-banner {
  position: fixed !important;
  top: 72px !important;
  right: 24px !important;
  z-index: 9999 !important;
  background: rgba(15, 23, 42, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(6, 182, 212, 0.5) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(6, 182, 212, 0.25) !important;
  color: #ffffff !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  animation: ag-slide-in-banner 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes ag-slide-in-banner {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   📞 ARCHGIG PREMIUM DIALER & FLOATING KEYPAD (PREMIUM DEEP NAVY/INDIGO)
   ============================================================ */

/* Drawer Backdrop: Transparent, Non-dimming, Instant Click-to-Dismiss (Smartcomm Fluid Style) */
div[class*="bg-gray-500"][class*="fixed"]:has(#dialerInputRef),
div[class*="bg-gray-500 bg-opacity-50"]:has(#dialerInputRef),
div.fixed.top-0:has(#dialerInputRef),
div:has(> div > div.feature-container:has(#dialerInputRef)) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  z-index: 100005 !important;
}

/* Right Slide-out Drawer Container */
div[ref="editDrawer"]:has(#dialerInputRef),
div.feature-container:has(#dialerInputRef),
div[class*="w-[400px]"]:has(#dialerInputRef) {
  width: 380px !important;
  max-width: 92vw !important;
  background: rgba(248, 250, 252, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2) !important;
  border-left: 1px solid rgba(226, 232, 240, 0.8) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 100010 !important;
}

/* Hide Redundant Drawer Top Bar ("DIALER" Header + Duplicate Close Button) */
div.feature-container:has(#dialerInputRef) div[class*="dark:bg-dark-blue bg-white p-5 absolute"],
div[ref="editDrawer"]:has(#dialerInputRef) div[class*="absolute w-full left-0 top-0"],
div.feature-container:has(#dialerInputRef) > div:first-child:not(:has(#dialerInputRef)),
div.feature-container:has(#dialerInputRef) div[class*="dark:bg-dark-blue"][class*="uppercase"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Inner Scroll/Padding Container */
div[class*="max-h-[90vh] overflow-auto"]:has(#dialerInputRef),
div.feature-container:has(#dialerInputRef) div[class*="overflow-auto"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin-top: 0 !important;
  padding: 24px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Main Dialer Card (Rounded Outer Border) */
div[data-v-72c7f766].border.rounded-2xl,
div:has(> #dialerInputRef).border,
div.border:has(#dialerInputRef) {
  width: 100% !important;
  max-width: 310px !important;
  min-width: 280px !important;
  margin: auto !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Dialer Header (ArchGig Deep Navy to Indigo Gradient) */
div[data-v-72c7f766].bg-light-purple,
div:has(> #dialerInputRef):not(input) {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 105px !important;
  background: linear-gradient(135deg, #0B132B 0%, #1c2541 55%, #3b82f6 100%) !important;
  background-color: #0B132B !important;
  border-radius: 24px 24px 0 0 !important;
  border-bottom: none !important;
  border-right: none !important;
  border-left: none !important;
  padding: 30px 18px 22px 18px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}

/* Dialer Input Box */
#dialerInputRef,
input#dialerInputRef,
[data-v-72c7f766] input#dialerInputRef {
  flex: 1 !important;
  width: 100% !important;
  max-width: 220px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: 1.5px !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  -moz-appearance: textfield !important;
}

#dialerInputRef::-webkit-outer-spin-button,
#dialerInputRef::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

#dialerInputRef:focus {
  border-bottom-color: #38bdf8 !important;
  box-shadow: 0 2px 0 0 rgba(56, 189, 248, 0.5) !important;
}

#dialerInputRef::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

/* One-Click Backspace / Delete Button (⌫) */
.ag-dialer-backspace-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin-left: 8px !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.ag-dialer-backspace-btn:hover {
  background: rgba(239, 68, 68, 0.35) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #fca5a5 !important;
  transform: scale(1.08) !important;
}

.ag-dialer-backspace-btn:active {
  transform: scale(0.92) !important;
  background: rgba(239, 68, 68, 0.5) !important;
}

.ag-dialer-backspace-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Dedicated Close (✕) Button directly on the Dialer Card Navy Header */
.ag-dialer-close-btn {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  outline: none !important;
  padding: 0 !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 35 !important;
  user-select: none !important;
}

.ag-dialer-close-btn:hover {
  background: rgba(239, 68, 68, 0.9) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

.ag-dialer-close-btn:active {
  transform: scale(0.95) !important;
}

.ag-dialer-close-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Dialer Keypad Body */
div[data-v-72c7f766].rounded-t-none.rounded-2xl,
div:has(> div.grid-cols-3) {
  width: 100% !important;
  background: #ffffff !important;
  padding: 24px 18px 24px 18px !important;
  border-radius: 0 0 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

/* 3x4 Grid of Dialpad Buttons */
div[data-v-72c7f766] .grid.grid-cols-3 {
  width: 100% !important;
  max-width: 260px !important;
  gap: 12px !important;
  justify-items: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

/* Dialpad Number Buttons */
div[data-v-72c7f766] .grid.grid-cols-3 button {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  border-radius: 50% !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  line-height: 1 !important;
}

div[data-v-72c7f766] .grid.grid-cols-3 button:hover {
  background: #f1f5f9 !important;
  border-color: #3b82f6 !important;
  color: #2563eb !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18) !important;
}

div[data-v-72c7f766] .grid.grid-cols-3 button:active {
  background: #e2e8f0 !important;
  transform: scale(0.95) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Green Outbound Call Button */
div[data-v-72c7f766] button.bg-green-500,
div[data-v-72c7f766] button:has(svg):not(.grid *) {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

div[data-v-72c7f766] button.bg-green-500:hover,
div[data-v-72c7f766] button:has(svg):not(.grid *):hover {
  transform: scale(1.1) translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.6) !important;
}

div[data-v-72c7f766] button.bg-green-500:active,
div[data-v-72c7f766] button:has(svg):not(.grid *):active {
  transform: scale(0.95) !important;
}

div[data-v-72c7f766] button.bg-green-500 svg,
div[data-v-72c7f766] button:has(svg):not(.grid *) svg {
  width: 24px !important;
  height: 24px !important;
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* ============================================================
   ✨ SLEEK MODERN 6PX SLIM SCROLLBAR (ZERO HORIZONTAL SHIFT)
   ============================================================ */
* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent !important;
}

::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4) !important;
  border-radius: 9999px !important;
  transition: background-color 0.2s ease !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.7) !important;
}

::-webkit-scrollbar-corner {
  background: transparent !important;
}

.feature-slot::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

.feature-slot::-webkit-scrollbar-track {
  background: transparent !important;
}

.feature-slot::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 9999px !important;
}

.feature-slot::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* ============================================================
   📌 UNIFIED SECOND BAR & TOOLBAR BUTTONS DESIGN SYSTEM
   Standard 32px Height, 8px Radius, Single-Line, Enterprise SaaS
   ============================================================ */

/* 1. Second Bar Container */
.second-bar,
.second-bar.sticky-nav,
.feature-slot .second-bar,
div.second-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* 2. Second Bar Sub-Sections (Left & Right) */
.second-bar__section,
.second-bar-right,
.second-bar-left-edit-options,
.second-bar-left-sorting-options,
.second-bar > div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  max-height: 48px !important;
}

/* 3. Global Strict Rule for ALL Toolbar Buttons */
.second-bar button,
.second-bar .second-bar__section button,
.second-bar-right button,
.second-bar button.shadow,
.second-bar .form-nav-button,
#ag-save-default-btn,
#ag-reset-all-btn,
#ag-meta-sync-trigger-btn,
#ag-filter-presets-group button {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Prevent text wrapping inside button spans/labels */
.second-bar button *,
.second-bar .second-bar__section button *,
.second-bar-right button *,
#ag-save-default-btn *,
#ag-reset-all-btn * {
  white-space: nowrap !important;
}

.second-bar button span,
.second-bar .second-bar__section button span,
.second-bar-right button span,
#ag-save-default-btn span,
#ag-reset-all-btn span {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* 4. Action Buttons (Bulk Insert, Send SMS, WhatsApp Campaign, etc.) */
.second-bar-right button:not(:has(svg:only-child)),
.second-bar .second-bar__section:last-child button:not(:has(svg:only-child)),
.second-bar button:has(span.text-light-sec-purple),
.second-bar button.shadow {
  background: #ffffff !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: #4f46e5 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.second-bar-right button:not(:has(svg:only-child)):hover,
.second-bar .second-bar__section:last-child button:not(:has(svg:only-child)):hover,
.second-bar button:has(span.text-light-sec-purple):hover,
.second-bar button.shadow:hover {
  background: #f5f3ff !important;
  border-color: #6366f1 !important;
  color: #4338ca !important;
  box-shadow: 0 2px 5px rgba(99, 102, 241, 0.15) !important;
  transform: translateY(-0.5px) !important;
}

.second-bar-right button:not(:has(svg:only-child)):active,
.second-bar button.shadow:active {
  transform: translateY(0.5px) !important;
}

/* 5. Icon-Only Toolbar Buttons (View Switchers, Download/Export, Filter Trigger) */
.second-bar button:has(> svg:only-child),
.second-bar button:has(> .el-icon:only-child),
.second-bar .second-bar__section > div > button:has(svg:only-child),
.second-bar-right button:has(svg:only-child),
.second-bar button.p-1,
.second-bar button.p-2,
.second-bar button:has(svg.w-5),
.second-bar button:has(svg.w-4) {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.second-bar button:has(> svg:only-child):hover,
.second-bar-right button:has(svg:only-child):hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* 6. Filter Badge Trigger Button */
.second-bar .el-badge,
.second-bar .el-badge__content {
  line-height: 1 !important;
}

.second-bar .el-badge button,
.second-bar button:has(.el-badge) {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

/* 7. Input Fields in Second-Bar (Search Input) */
.second-bar .el-input,
.second-bar .el-input__wrapper {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  box-sizing: border-box !important;
  line-height: 32px !important;
}

.second-bar .el-input__inner {
  height: 30px !important;
  font-size: 12.5px !important;
  line-height: 30px !important;
}

/* 8. Switches in Second-Bar (For me / All) */
.second-bar .el-switch {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 9. Filter Preset Group (#ag-filter-presets-group) */
#ag-filter-presets-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
}

#ag-save-default-btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

#ag-save-default-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

#ag-reset-all-btn {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

#ag-reset-all-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* 10. Sync Meta Leads Trigger Button */
#ag-meta-sync-trigger-btn {
  background: linear-gradient(135deg, #1877f2 0%, #0d6efd 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 1px 3px rgba(24, 119, 242, 0.3) !important;
}

#ag-meta-sync-trigger-btn:hover {
  transform: translateY(-0.5px) !important;
  box-shadow: 0 3px 8px rgba(24, 119, 242, 0.45) !important;
}

#ag-meta-sync-trigger-btn svg {
  width: 14px !important;
  height: 14px !important;
  margin-right: 5px !important;
}

/* ============================================================
   🪟 GLOBAL ELEMENT PLUS MODALS & DIALOGS (ELEVATED ABOVE TOPBAR)
   ============================================================ */

/* 1. All Overlays for Dialogs & Modals (Elevated above topbar 99999) */
.el-overlay,
.el-overlay:has(.el-dialog),
.el-overlay-dialog,
div.el-overlay {
  z-index: 100020 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  background-color: rgba(15, 23, 42, 0.45) !important;
}

/* 2. Dialog Modal Box */
.el-dialog {
  z-index: 100025 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

/* 3. Top Margin / Clearance: Ensure dialogs never touch top edge or get covered */
.el-dialog,
.el-dialog[style*="top: 0"],
.el-dialog[style*="top:0"] {
  margin-top: 76px !important;
}

.el-dialog.is-fullscreen {
  margin-top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* 4. Dialog Header (Clean, Premium, High Contrast Title & Visible Close Button) */
.el-dialog__header,
header.el-dialog__header {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 54px !important;
  max-height: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.el-dialog__title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
}

/* Dialog Close Button (✕) */
.el-dialog__headerbtn,
button.el-dialog__headerbtn {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  outline: none !important;
}

.el-dialog__headerbtn:hover {
  background: #fee2e2 !important;
  border-color: #fecaca !important;
}

.el-dialog__headerbtn .el-dialog__close {
  color: #64748b !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transition: color 0.15s ease !important;
}

.el-dialog__headerbtn:hover .el-dialog__close {
  color: #ef4444 !important;
}

/* 5. Dialog Body */
.el-dialog__body {
  padding: 20px !important;
  color: #334155 !important;
  font-size: 13px !important;
}

/* 6. Audio Player inside Recording Dialog */
.el-dialog__body audio {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 30px !important;
  outline: none !important;
  display: block !important;
}

/* 7. Message Box / Alert / Confirm Overlays */
.el-message-box__wrapper,
.el-message-box {
  z-index: 100030 !important;
  border-radius: 16px !important;
}

/* 8. Element Plus Tooltips & Dropdowns & Select Popovers */
.el-popper {
  z-index: 100040 !important;
}




/* ============================================================
   🔄 AUTO-UPDATE TOAST NOTIFICATION
   ============================================================ */
.archgig-update-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2147483647;
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
  color: #ffffff;
  border: 1px solid rgba(139, 92, 246, 0.45);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 20px rgba(124, 58, 237, 0.25);
  border-radius: 16px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  animation: agSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ag-toast-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ag-toast-icon {
  font-size: 24px;
  animation: agPulse 1.5s infinite;
}

.ag-toast-title {
  font-weight: 700;
  font-size: 14px;
  color: #f8fafc;
}

.ag-toast-desc {
  font-size: 12px;
  color: #cbd5e1;
}

.ag-toast-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: agSpin 0.8s linear infinite;
  margin-left: 6px;
}

@keyframes agSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes agSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   🐞 BUG FINDER & CRASH HUD DIAGNOSTIC PANEL
   ============================================================ */
.archgig-bug-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100002;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.archgig-bug-btn:hover {
  transform: scale(1.1);
  background: #1e293b;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.archgig-bug-btn.has-errors {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  animation: agErrorPulse 1.8s infinite;
}

@keyframes agErrorPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

.ag-bug-icon {
  font-size: 20px;
}

.ag-bug-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f172a;
}

.archgig-crash-hud {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
}

.archgig-crash-hud.hidden {
  display: none !important;
}

.ag-hud-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
}

.ag-hud-panel {
  position: relative;
  width: 92%;
  max-width: 820px;
  max-height: 85vh;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif;
  animation: agModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes agModalIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.ag-hud-header {
  padding: 18px 24px;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ag-hud-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ag-hud-header-icon {
  font-size: 26px;
}

.ag-hud-header-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.ag-hud-header-subtitle {
  font-size: 12px;
  color: #94a3b8;
}

.ag-hud-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ag-hud-close-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s ease;
}

.ag-hud-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ag-hud-body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f8fafc;
}

.ag-hud-health-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ag-hud-health-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ag-hud-health-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 4px;
}

.ag-hud-health-val {
  font-size: 13.5px;
}

.ag-hud-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ag-hud-btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ag-hud-btn-primary {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff;
}

.ag-hud-btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.ag-hud-btn-secondary {
  background: #ffffff;
  color: #475569;
  border-color: #cbd5e1;
}

.ag-hud-btn-secondary:hover {
  background: #f1f5f9;
}

.ag-hud-btn-danger {
  background: #dc2626;
  color: #ffffff;
}

.ag-hud-btn-danger:hover {
  background: #b91c1c;
}

.ag-hud-hint {
  margin-left: auto;
  font-size: 12px;
  color: #64748b;
}

.ag-hud-logs-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}

.ag-hud-logs-heading {
  padding: 10px 16px;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
}

.ag-hud-logs-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ag-hud-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 16px;
  color: #10b981;
  font-weight: 600;
  font-size: 14px;
  gap: 8px;
}

.ag-hud-empty-icon {
  font-size: 32px;
}

.ag-hud-error-item {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 12px 14px;
}

.ag-hud-error-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ag-hud-error-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ag-hud-error-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.ag-hud-error-msg {
  font-size: 13px;
  font-weight: 700;
  color: #991b1b;
}

.ag-hud-error-count {
  background: #7f1d1d;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
}

.ag-hud-error-time {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

.ag-hud-error-loc {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  font-family: monospace;
}

.ag-hud-error-stack {
  margin-top: 8px;
  padding: 8px 10px;
  background: #1e1b4b;
  color: #f1f5f9;
  border-radius: 6px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-x: auto;
  max-height: 120px;
  line-height: 1.4;
}

.ag-hud-error-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.ag-hud-mini-copy-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ag-hud-mini-copy-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* ============================================================
   💎 ARCHGIG TRUE CENTERED POPUP MODAL (EDIT & CREATE FORMS)
   ============================================================ */

/* 1. Fullscreen Centered Backdrop Overlay */
div[class*="fixed"][class*="z-[9999]"]:not(.none):not([style*="display: none"]),
div[class*="fixed"][class*="z-[190]"]:not(.none):not([style*="display: none"]) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15, 23, 42, 0.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 99999 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

div.none,
.none {
  display: none !important;
}

/* 2. Floating Centered Modal Card */
div[ref="editDrawer"],
div.feature-container[class*="z-[500]"],
div.feature-container[class*="rounded-2xl"] {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: auto !important;
  width: 100% !important;
  max-width: 820px !important;
  height: auto !important;
  max-height: 90vh !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  animation: archgigModalPopup 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes archgigModalPopup {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 3. Sticky Top Header */
div[class*="dark:text-white"][class*="sticky top-0"],
div[class*="sticky top-0"][class*="border-b"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background: #ffffff !important;
  padding: 18px 24px 14px 24px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin: 0 !important;
}

/* 4. Modal Close Button in Top Right */
button.form-nav-button[class*="absolute top-3.5 right-3.5"],
button.form-nav-button[class*="absolute top-0 left-0"],
button.form-nav-button[class*="absolute top-0 right-0"] {
  position: absolute !important;
  top: 14px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 50 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

button.form-nav-button[class*="absolute top-3.5 right-3.5"]:hover,
button.form-nav-button[class*="absolute top-0 left-0"]:hover,
button.form-nav-button[class*="absolute top-0 right-0"]:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
  transform: rotate(90deg);
}

/* 5. Scrollable Body Content (Zero Crop, Smooth Scroll) */
.archgig-modal-scroll,
div[class*="max-h-[85vh]"][class*="overflow-y-auto"],
div[class*="max-h-[90vh]"][class*="overflow-auto"] {
  flex: 1 1 auto !important;
  max-height: calc(90vh - 130px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
}

/* Custom Scrollbar for Modal Body */
.archgig-modal-scroll::-webkit-scrollbar,
div[class*="max-h-[85vh]"][class*="overflow-y-auto"]::-webkit-scrollbar,
div[class*="max-h-[90vh]"][class*="overflow-auto"]::-webkit-scrollbar {
  width: 6px !important;
}
.archgig-modal-scroll::-webkit-scrollbar-track,
div[class*="max-h-[85vh]"][class*="overflow-y-auto"]::-webkit-scrollbar-track,
div[class*="max-h-[90vh]"][class*="overflow-auto"]::-webkit-scrollbar-track {
  background: #f8fafc !important;
  border-radius: 4px !important;
}
.archgig-modal-scroll::-webkit-scrollbar-thumb,
div[class*="max-h-[85vh]"][class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
div[class*="max-h-[90vh]"][class*="overflow-auto"]::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 4px !important;
}
.archgig-modal-scroll::-webkit-scrollbar-thumb:hover,
div[class*="max-h-[85vh]"][class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover,
div[class*="max-h-[90vh]"][class*="overflow-auto"]::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* 6. Sticky Action Footer */
div.feature-filter-submit:not(.feature-filter *),
div.ao:not(.feature-filter *),
div.yt:not(.feature-filter *) {
  position: sticky !important;
  bottom: -20px !important;
  z-index: 40 !important;
  background: #ffffff !important;
  padding: 14px 0 6px 0 !important;
  margin-top: 20px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

div.feature-filter-submit:not(.feature-filter *) button,
div.feature-filter-submit:not(.feature-filter *) button.form-nav-button {
  min-width: 100px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* 7. Products Page Modal Modernization */
.archgig-modal-scroll {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.archgig-modal-scroll::-webkit-scrollbar {
  width: 6px;
}
.archgig-modal-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}