/* ============================================
   SIDEBAR LAYOUT - ZERO GAP DESIGN
   
   ARCHITECTURE:
   - Full-width fixed header bar at top
   - Fixed sidebar overlays left portion of header
   - Main content area below header with margin-left for sidebar
   - This eliminates ANY possibility of gaps
   ============================================ */

:root {
  /* COMPACT SIDEBAR MODE - icons with small text labels */
  --sidebar-width: 80px;
  --sidebar-width-collapsed: 80px;
  --header-height: 64px;
  --header-z: 40;
  --sidebar-z: 50;
  --mobile-overlay-z: 52; /* Between header (50) and mobile sidebar (55) */
  --mobile-sidebar-z: 55;
}

/* ============================================
   FULL-WIDTH HEADER - Fixed at top, spans entire screen
   ============================================ */
.info-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  z-index: var(--header-z);
  display: flex;
  align-items: center;
}

.info-header-content {
  width: 100%;
  height: 100%;
  padding: 0 24px;
  padding-left: calc(80px + 24px); /* Always use compact sidebar width */
  display: flex;
  align-items: center;
  justify-content: center; /* Center the content */
  transition: padding-left 0.3s ease;
  position: relative; /* For absolute positioning of left/right sections */
}

/* Left section - contains mobile logo and menu button */
.header-left-section {
  position: absolute;
  left: calc(80px + 16px); /* After sidebar */
  top: 50%;
  transform: translateY(-50%);
  display: none; /* Hidden on desktop - sidebar has the logo */
  align-items: center;
  gap: 12px;
}

/* Mobile logo - hidden on desktop, shown on mobile */
.header-mobile-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Center section - contains page title */
.info-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center; /* Center the title */
}

/* Alias for backward compatibility */
.info-header-center h1 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
  text-align: center;
}

.info-header-content h1 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
  text-align: center;
}

.header-right-section {
  display: flex;
  align-items: center;
  gap: 16px;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.header-save-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #16a34a;
}

.header-notification-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

.header-notification-btn:hover {
  background: #f3f4f6;
}

/* Mobile menu button (hamburger) - hidden by default, shown on mobile */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-menu-btn svg {
  width: 20px;
  height: 20px;
}

.mobile-menu-btn:hover {
  background: #e5e7eb;
}

/* Sidebar close button (X) - hidden by default, shown on mobile */
.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.sidebar-close-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.sidebar-close-btn svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   SIDEBAR - Fixed, overlays header on left side
   COMPACT MODE - Icons with small text labels
   ============================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80px; /* Compact width for icon + label */
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  z-index: var(--sidebar-z);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.3s ease, transform 0.3s ease;
}

.sidebar.collapsed {
  width: 80px;
}

/* COMPACT MODE: Hide full logo text, show abbreviated or hide */
.sidebar .sidebar-logo-text {
  display: none !important;
}

/* COMPACT MODE: Show labels as small bold text below icons */
.sidebar .sidebar-label {
  display: block !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 72px !important;
  color: inherit !important;
}

/* COMPACT MODE: Hide user details and section labels */
.sidebar .sidebar-user-details,
.sidebar .sidebar-section-label {
  display: none !important;
}

/* COMPACT MODE: Hide badges in compact view */
.sidebar .sidebar-badge {
  display: none !important;
}

/* COMPACT MODE: Center header content */
.sidebar .sidebar-header {
  padding: 0 8px !important;
  justify-content: center !important;
}

/* Sidebar Logo Image - consistent 40x40 size */
.sidebar-logo-img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

/* COMPACT MODE: Stack icon and label vertically */
.sidebar .sidebar-menu-item,
.sidebar .sidebar-item {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px !important;
  gap: 2px !important;
  min-height: 56px !important;
}

/* COMPACT MODE: Center user info */
.sidebar .sidebar-user-info {
  justify-content: center !important;
  padding: 8px !important;
}

/* COMPACT MODE: Remove flex-1 behavior, allow label to show */
.sidebar .sidebar-item .flex-1 {
  flex: none !important;
}

/* Sidebar header */
.sidebar-header {
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  background: #ffffff;
}

.sidebar.collapsed .sidebar-header {
  padding: 0 12px;
  justify-content: center;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  text-decoration: none;
}

.sidebar.collapsed .sidebar-logo-text {
  display: none;
}

/* Navigation */
.sidebar-nav {
  padding: 16px 8px;
  flex: 1;
}

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 8px;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  min-height: 44px;
  cursor: pointer;
  position: relative;
}

.sidebar-menu-item:hover {
  background: #f3f4f6;
  color: #111827;
}

.sidebar-menu-item.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 500;
}

.sidebar-menu-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar.collapsed .sidebar-label {
  display: none;
}

.sidebar.collapsed .sidebar-menu-item {
  justify-content: center;
  padding: 10px;
}

/* Tooltips for collapsed state */
.sidebar.collapsed .sidebar-menu-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  background: #111827;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 100;
}

/* Footer */
.sidebar-footer {
  padding: 16px 8px;
  border-top: 1px solid #e5e7eb;
  margin-top: auto;
}

.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f9fafb;
}

.sidebar.collapsed .sidebar-user-info {
  justify-content: center;
  padding: 10px;
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.sidebar.collapsed .sidebar-user-details {
  display: none;
}

.sidebar-user-name {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.sidebar-user-email {
  font-size: 12px;
  color: #6b7280;
}

/* ============================================
   MAIN CONTENT WRAPPER
   ALWAYS USES COLLAPSED SIDEBAR WIDTH
   ============================================ */
.sidebar-main-content {
  min-height: 100vh;
  margin-left: 80px; /* Always use compact sidebar width */
  padding-top: var(--header-height);
  transition: margin-left 0.3s ease;
  overflow-y: auto; /* Allow vertical scrolling for content pages */
  overflow-x: hidden; /* Prevent horizontal scrollbar */
  box-sizing: border-box;
}

.sidebar-main-content.collapsed {
  margin-left: 80px;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.main-content-area {
  padding: 24px;
  min-height: calc(100vh - var(--header-height));
  background: #f3f4f6;
  /* Content scrolling */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Full-height layout for builder pages (no padding, no scroll) */
.main-content-area.builder-layout {
  padding: 0;
  height: calc(100vh - var(--header-height));
  min-height: calc(100vh - var(--header-height));
  max-height: calc(100vh - var(--header-height));
  overflow: hidden !important; /* CRITICAL: Prevent page scrollbar */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Builder container - fills entire space */
.main-content-area.builder-layout .proposal-builder-container,
.main-content-area.builder-layout .estimator-builder-container,
.main-content-area.builder-layout .ai-builder-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* Important for flex children to shrink */
}

/* Builder top action bar - fixed height, no scroll */
.main-content-area.builder-layout .proposal-builder-container > .bg-white.border-b,
.main-content-area.builder-layout .estimator-builder-container > .bg-white.border-b {
  flex-shrink: 0;
}

/* Builder split panel layout - fills remaining space */
.main-content-area.builder-layout .builder-split-panels {
  flex: 1;
  min-height: 0; /* Important for flex children to shrink */
  display: flex;
  flex-direction: row;
}

/* Builder panels - scroll independently */
.main-content-area.builder-layout .builder-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Ensure inner content fills panel width */
.main-content-area.builder-layout .builder-panel > div {
  width: 100%;
}

/* Responsive: stack panels on mobile */
@media (max-width: 1023px) {
  .main-content-area.builder-layout .builder-split-panels {
    flex-direction: column;
  }
  
  .main-content-area.builder-layout .builder-panel {
    height: 100%;
  }
  
  .main-content-area.builder-layout .builder-panel:not(.active) {
    display: none;
  }
  
  .main-content-area.builder-layout .builder-panel.active {
    display: flex;
    flex-direction: column;
  }
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile: < 768px */
@media (max-width: 767px) {
  :root {
    --sidebar-width: 80px;
  }
  
  .sidebar {
    transform: translateX(-100%);
    z-index: var(--mobile-sidebar-z);
    /* CRITICAL FIX: Disable pointer events when sidebar is hidden off-screen */
    /* This prevents the invisible sidebar from blocking clicks on the header */
    pointer-events: none;
    width: 80px; /* Keep compact width on mobile too */
  }
  
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    /* Re-enable pointer events when sidebar is visible */
    pointer-events: auto;
  }
  
  /* Show close button inside sidebar on mobile */
  .sidebar-close-btn {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Adjust sidebar header for mobile - center the X button */
  .sidebar.mobile-open .sidebar-header {
    justify-content: center !important;
    padding: 0 12px !important;
  }
  
  /* Hide logo in sidebar when open on mobile - only show X */
  .sidebar.mobile-open .sidebar-logo-img {
    display: none !important;
  }
  
  .sidebar-main-content {
    margin-left: 0;
  }
  
  .info-header-content {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  /* Left section - show on mobile */
  .header-left-section {
    display: flex;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    gap: 12px;
  }
  
  /* Mobile logo in header - same 40x40 size */
  .header-mobile-logo {
    display: flex;
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Show hamburger button in header on mobile - same 40x40 size */
  .mobile-menu-btn {
    display: flex;
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Right section positioning on mobile */
  .header-right-section {
    right: 16px;
  }
  
  .info-header-content h1,
  .info-header-center h1 {
    font-size: 16px;
  }
  
  .main-content-area {
    padding: 16px;
  }
}

/* Tablet: 768px - 1023px - Compact sidebar */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --sidebar-width: 80px;
  }
  
  .info-header-content h1 {
    font-size: 16px;
  }
  
  .main-content-area {
    padding: 16px;
  }
}

/* Small laptop: 1024px - 1279px - Compact sidebar */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --sidebar-width: 80px;
  }
  
  .info-header-content h1 {
    font-size: 16px;
  }
}

/* Standard laptop: 1280px - 1439px - Compact sidebar */
@media (min-width: 1280px) and (max-width: 1439px) {
  :root {
    --sidebar-width: 80px;
  }
}

/* Large laptop: 1440px - 1599px - Compact sidebar */
@media (min-width: 1440px) and (max-width: 1599px) {
  :root {
    --sidebar-width: 80px;
  }
}

/* Desktop: 1600px - 1919px - Compact sidebar */
@media (min-width: 1600px) and (max-width: 1919px) {
  :root {
    --sidebar-width: 80px;
  }
  
  .main-content-area {
    padding: 32px;
  }
}

/* Large desktop: 1920px - 2559px - Compact sidebar */
@media (min-width: 1920px) and (max-width: 2559px) {
  :root {
    --sidebar-width: 80px;
  }
  
  .main-content-area {
    padding: 40px;
  }
}

/* Ultra-wide: 2560px+ (4K monitors, ultra-wide displays) - Compact sidebar */
@media (min-width: 2560px) {
  :root {
    --sidebar-width: 80px;
  }
  
  .main-content-area {
    padding: 48px 64px;
    /* Center content with max-width on ultra-wide screens */
    max-width: 2200px;
    margin: 0 auto;
  }
  
  .info-header-content {
    max-width: calc(2200px + 80px + 128px);
    margin: 0 auto;
  }
}

/* Super ultra-wide: 3440px+ (ultra-wide curved monitors) - Compact sidebar */
@media (min-width: 3440px) {
  :root {
    --sidebar-width: 80px;
  }
  
  .main-content-area {
    padding: 56px 80px;
    max-width: 2600px;
  }
  
  .info-header-content {
    max-width: calc(2600px + 80px + 160px);
  }
}

/* ============================================
   RESPONSIVE HEADER & CONTENT ADJUSTMENTS
   Hide logo text sooner, extend header sooner
   ============================================ */

/* Medium screens and awkward zones - All use collapsed sidebar now */
/* These media queries are simplified since sidebar is always 64px */

/* ============================================
   BUTTON TEXT OVERFLOW PREVENTION
   ============================================ */

/* All buttons - prevent text overflow */
button,
a.bg-blue-600,
a.bg-green-600,
a.bg-gray-600,
.btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Action buttons in builder pages */
#btn-export-pdf,
#btn-print,
#btn-fullscreen,
#btn-submit-estimate-approval,
#btn-proposal-pdf,
#btn-proposal-print,
#btn-proposal-fullscreen,
#btn-submit-for-approval {
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
}

/* Submit for Approval button - responsive text */
#btn-submit-estimate-approval span,
#btn-submit-for-approval span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On smaller screens, use shorter button text */
@media (max-width: 1279px) {
  #btn-submit-estimate-approval,
  #btn-submit-for-approval {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Ultra-compact button text on very small builder widths */
@media (max-width: 500px) {
  #btn-submit-estimate-approval span::after,
  #btn-submit-for-approval span::after {
    content: none;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

body.ai-sidebar-open .sidebar-main-content {
  /* Floating popup - no layout change */
}

.sidebar.sidebar-locked {
  opacity: 0.85;
}

/* Touch devices */
@media (pointer: coarse) {
  .sidebar-menu-item {
    min-height: 48px;
    padding: 12px 14px;
  }
  
  .mobile-menu-btn,
  .header-notification-btn {
    min-width: 48px;
    min-height: 48px;
  }
}

/* Print */
@media print {
  .sidebar,
  .mobile-menu-btn,
  .info-header {
    display: none !important;
  }
  
  .sidebar-main-content {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-main-content,
  .info-header-content {
    transition: none;
  }
}