/**
 * bridge.css - Custom overrides for legacy conflicts
 * 
 * Purpose: Hand-written CSS to fix visual conflicts between Tailwind and legacy styles
 * Scope: ALL rules scoped to .tw wrapper (Tailwind islands only)
 * Load order: LAST (after tw.css)
 * 
 * When to use:
 * - Legacy CSS bleeding into .tw islands
 * - WebForms controls that need style resets
 * - Edge cases where Tailwind utilities aren't enough
 * 
 * Pattern:
 *   .tw .my-element { property: value !important; }
 */

 /* ========================================
   Tailwind Strategy - Surgical Overrides Only
   ======================================== */

/* ========================================
   Root Font-Size Fix
   ======================================== */

/* Override legacy root font-size (~10.666px) with standard 16px base.
   This makes all rem-based Tailwind utilities calculate correctly:
   - tw-text-xs (0.75rem) = 12px instead of 8px
   - tw-text-sm (0.875rem) = 14px instead of 9.33px
   - etc. */
.tw {
  font-size: 16px;
}

/* ========================================
   Legacy CSS Neutralization
   ======================================== */

/* Remove Bootstrap normalize default margins on footer paragraphs.
   Bootstrap adds: p { margin: 0 0 10px; }
   This conflicts with Tailwind's spacing utilities in the footer. */
.tw p {
  margin: 0;
}

/* ========================================
   WebForms Control Resets
   ======================================== */

/* Reset ASP.NET button/input styles inside .tw islands */
.tw input[type="text"],
.tw input[type="password"],
.tw input[type="email"],
.tw textarea,
.tw select {
  /* Remove legacy borders/backgrounds if they conflict */
  /* Uncomment as needed: */
  /* background: white !important; */
  /* border: 1px solid #d1d5db !important; */
}

.tw input[type="submit"],
.tw input[type="button"],
.tw button {
  /* Remove legacy button styles */
  /* Uncomment as needed: */
  /* background: none !important; */
  /* border: none !important; */
  /* padding: 0 !important; */
}

/* ========================================
   Common Legacy Overrides
   ======================================== */

/* Remove default margins from legacy elements inside .tw */
.tw p,
.tw h1,
.tw h2,
.tw h3,
.tw h4,
.tw h5,
.tw h6 {
  margin: 0 !important;
  padding: 0 !important;
}

/* Fix table styles inside .tw islands */
.tw table {
  /* Uncomment if legacy table styles conflict: */
  /* border-collapse: collapse !important; */
  /* width: auto !important; */
}

/* ========================================
   Utility Classes
   ======================================== */

/* Force pointer cursor on interactive elements */
.tw .cursor-pointer,
.tw button,
.tw input[type="submit"],
.tw input[type="button"] {
  cursor: pointer;
}

/* Reset all button styles inside .tw islands */
.tw button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide legacy focus outlines, use Tailwind ring utilities instead */
.tw *:focus {
  outline: none;
}

/* ========================================
   Page-Specific Overrides
   ======================================== */

/* PropSearch.aspx - Account Dropdown (calm, compact, enterprise) */
.csMainMenu.tw,
nav.csMainMenu.tw {
  position: relative !important;
  z-index: 900 !important;
  width: auto !important;
  padding: 0 !important;
  top: auto !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* Trigger button - override all legacy styles */
.tw .js-account-toggle {
  background-color: rgba(248, 250, 252, 0.95) !important; /* slate-50 at 95% opacity */
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Trigger button initials - font sizing and optical centering */
.tw .js-account-toggle #userInitials {
  line-height: 1 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  position: relative !important;
  top: 0.5px !important; /* Optical centering adjustment for capital letters */
}

/* Compact mode - hide username and chevron when streetView is open */
.tw .js-account-toggle.js-compact-mode {
  min-width: auto !important;
  width: auto !important;
  padding-left: 0.75rem !important; /* 12px */
  padding-right: 0.75rem !important; /* 12px */
  justify-content: center !important;
}

.tw .js-account-toggle.js-compact-mode #loggedUser,
.tw .js-account-toggle.js-compact-mode .js-chevron {
  display: none !important;
}

/* Ensure username is visible - comprehensive override for legacy CSS */
.tw #loggedUser {
  display: inline !important;
  visibility: visible !important;
  color: #1f2937 !important; /* gray-800 */
  font-size: 12px !important; /* tw-text-xs */
  font-weight: 400 !important; /* tw-font-normal */
  font-style: normal !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  cursor: inherit !important;
}

.tw #userInitials,
.tw #menuUserInitials,
.tw #menuUserName {
  display: inline !important;
  visibility: visible !important;
}

/* Scrollbar styling */
.tw .js-account-dropdown {
  background-color: rgba(248, 250, 252, 1) !important; /* slate-50 at 100% opacity */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.tw .js-account-dropdown::-webkit-scrollbar {
  width: 5px;
}

.tw .js-account-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.tw .js-account-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* Force dropdown menu item text to 12px */
.tw .js-account-dropdown .js-menu-item span,
.tw .js-account-dropdown .js-submenu-item span,
.tw .js-account-dropdown .js-menu-item-logout span {
  font-size: 12px !important;
}

/* Force dropdown menu icons to 12px to match text size */
.tw .js-account-dropdown .js-menu-item i,
.tw .js-account-dropdown .js-submenu-item i,
.tw .js-account-dropdown .js-menu-item-logout i {
  font-size: 12px !important;
}

/* Force POPIA chevron to 10px (slightly smaller for hierarchy) */
.tw .js-account-dropdown .js-popia-chevron {
  font-size: 10px !important;
}

/* Property Panel V2 - Force action button icons to explicit sizes */
.tw .js-v2-valuations-toggle i,
.tw .js-v2-vicinity i,
.tw .js-v2-documents-toggle i,
.tw .js-v2-update-toggle i {
  font-size: 14px !important;
}

/* Property Panel V2 - Force dropdown menu icons to explicit sizes */
.tw .js-v2-valuations-dropdown i,
.tw .js-v2-documents-dropdown i,
.tw .js-v2-update-dropdown i {
  font-size: 11px !important;
}

/* Property Panel V2 - Force dropdown menu text to explicit sizes */
.tw .js-v2-valuations-dropdown span,
.tw .js-v2-documents-dropdown span,
.tw .js-v2-update-dropdown span {
  font-size: 12px !important;
}

/* Announcements - blue pill badge using standard menu item structure */
.tw .js-menu-item-announcement {
  background: #dbeafe !important; /* blue-100 */
  display: inline-flex !important; /* Make pill only as wide as content */
  text-decoration: none !important;
}

.tw .js-menu-item-announcement:hover {
  background: #bfdbfe !important; /* blue-200 */
  text-decoration: none !important;
}

.tw .js-menu-item-announcement i,
.tw .js-menu-item-announcement span {
  color: #1e40af !important; /* blue-800 for pill */
  font-weight: 500 !important;
}

/* Logout hover warning */
.tw .js-menu-item-logout:hover i,
.tw .js-menu-item-logout:hover span {
  color: #dc2626 !important; /* red-600 */
}

/* Admin items hover - burnt orange */
.tw .js-menu-item-admin:hover i,
.tw .js-menu-item-admin:hover span {
  color: #c2410c !important; /* orange-700, burnt orange */
}

/* Section dividers - ensure visibility */
.tw .js-account-dropdown > div[class*="tw-border-t"] {
  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: #cbd5e1 !important; /* slate-300 */
  margin-top: 0rem !important; /* 0px */
  margin-bottom: 0rem !important; /* 0px */
  width: 75% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ========================================
   Additional Utility Overrides
   ======================================== */

/* Add any additional overrides below as needed */