/* ================================================================
   Unavoidable CRM — UI fix v2: collapsed sidebar + responsive layer
   High-specificity selectors to win against boutique.css /
   rebrand-app.css which use html body aside.sidebar patterns.
   ================================================================ */

/* ---------- 0. Hide mobile hamburger on desktop by default ---------- */
.mobile-menu-toggle { display: none !important; }

/* ---------- 1. Collapsed sidebar (desktop icon-only rail) ---------- */
html body aside.sidebar.collapsed,
.sidebar.collapsed {
  width: 68px !important;
  padding: 0 !important;
}

html body aside.sidebar.collapsed .sidebar-header,
.sidebar.collapsed .sidebar-header {
  padding: 14px 0 8px !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
html body aside.sidebar.collapsed .logo-mark,
.sidebar.collapsed .logo-mark {
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body aside.sidebar.collapsed .logo-mark img,
html body aside.sidebar.collapsed .logo-mark svg {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
}
html body aside.sidebar.collapsed .logo-text,
.sidebar.collapsed .logo-text { display: none !important; }

html body aside.sidebar.collapsed .sidebar-toggle,
.sidebar.collapsed .sidebar-toggle {
  position: static !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  transition: background .15s;
}
html body aside.sidebar.collapsed .sidebar-toggle:hover {
  background: rgba(255,255,255,0.1) !important;
}
html body aside.sidebar.collapsed .sidebar-toggle svg {
  width: 14px !important;
  height: 14px !important;
  transform: rotate(180deg);
}

html body aside.sidebar.collapsed .company-switcher,
.sidebar.collapsed .company-switcher { display: none !important; }
html body aside.sidebar.collapsed .nav-cat,
.sidebar.collapsed .nav-cat { display: none !important; }

html body aside.sidebar.collapsed .sidebar-nav,
.sidebar.collapsed .sidebar-nav {
  padding: 8px 0 !important;
  gap: 2px !important;
}

html body aside.sidebar.collapsed .nav-item,
html body aside.sidebar.collapsed a.nav-item,
html body aside.sidebar.collapsed .nav-item.active,
html body aside.sidebar.collapsed a.nav-item[aria-current],
.sidebar.collapsed .nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
html body aside.sidebar.collapsed .nav-item .nav-icon,
.sidebar.collapsed .nav-item .nav-icon {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  flex: 0 0 auto !important;
}
html body aside.sidebar.collapsed .nav-item .nav-icon svg,
.sidebar.collapsed .nav-item .nav-icon svg {
  width: 18px !important;
  height: 18px !important;
}

/* Tooltip: the .nav-label becomes a floating pill on hover */
html body aside.sidebar.collapsed .nav-item .nav-label,
.sidebar.collapsed .nav-item .nav-label {
  display: block !important;
  position: absolute !important;
  left: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(6px) !important;
  margin-left: 4px !important;
  padding: 6px 12px !important;
  background: #1a1a2e !important;
  color: #f5f3ff !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity .12s, transform .12s;
  z-index: 1000 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  border: 1px solid rgba(139,92,246,0.2);
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
}
html body aside.sidebar.collapsed .nav-item:hover .nav-label,
.sidebar.collapsed .nav-item:hover .nav-label {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

html body aside.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .sidebar-footer {
  padding: 12px 0 !important;
  border-top: 1px solid rgba(139,92,246,0.12);
  justify-content: center !important;
}
html body aside.sidebar.collapsed .user-card,
.sidebar.collapsed .user-card {
  justify-content: center !important;
  padding: 0 !important;
}
html body aside.sidebar.collapsed .user-info,
.sidebar.collapsed .user-info { display: none !important; }
html body aside.sidebar.collapsed .logout-btn,
.sidebar.collapsed .logout-btn { display: none !important; }
html body aside.sidebar.collapsed .user-avatar,
.sidebar.collapsed .user-avatar { margin: 0 auto !important; }

/* Active state highlight in collapsed mode */
html body aside.sidebar.collapsed .nav-item.active {
  background: rgba(139,92,246,0.15) !important;
  border-left: 3px solid #7C3AED !important;
}


/* ---------- 2. Mobile drawer + hamburger ( < 768px ) ---------- */
@media (max-width: 767px) {
  html body aside.sidebar,
  .sidebar {
    width: 260px !important;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
    z-index: 200;
  }
  html body aside.sidebar.mobile-open,
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
  }
  .sidebar .sidebar-toggle { display: none !important; }
  html body aside.sidebar.collapsed,
  .sidebar.collapsed {
    transform: translateX(-100%);
    width: 260px !important;
    padding: 0 !important;
  }
  html body aside.sidebar.collapsed.mobile-open,
  .sidebar.collapsed.mobile-open {
    transform: translateX(0);
    width: 260px !important;
  }
  /* When drawer is open on mobile, force expanded layout */
  .sidebar.mobile-open .nav-label,
  .sidebar.mobile-open .logo-text,
  .sidebar.mobile-open .company-switcher,
  .sidebar.mobile-open .user-info,
  .sidebar.mobile-open .nav-cat {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  .sidebar.mobile-open .nav-item {
    justify-content: flex-start !important;
    padding: 8px 16px !important;
    height: auto !important;
    min-height: 40px !important;
  }
  .sidebar.mobile-open .nav-item .nav-label {
    margin-left: 12px !important;
    color: rgba(245,243,255,0.9) !important;
    font-weight: 500 !important;
  }

  /* Backdrop */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150;
    animation: uifix-fade .18s ease;
  }
  @keyframes uifix-fade { from { opacity: 0; } to { opacity: 1; } }

  /* Main content full-width */
  main.page-content,
  .page-content,
  .app-body,
  .app-main { padding-left: 0 !important; margin-left: 0 !important; }

  /* Topbar accommodates hamburger */
  header.topbar,
  .topbar {
    padding-left: 56px !important;
    z-index: 100;
  }

  /* Mobile hamburger button (visible on mobile only) */
  .mobile-menu-toggle {
    position: fixed !important;
    top: 14px !important;
    left: 12px !important;
    z-index: 210 !important;
    width: 40px !important;
    height: 40px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 0 !important;
  }
  .mobile-menu-toggle svg { width: 20px; height: 20px; stroke: #1a1a2e; }
  .mobile-menu-toggle:hover { background: #f8f8fb !important; }

  /* Topbar right-side compression */
  .topbar-right .top-search,
  .topbar-right .search-input,
  .topbar-right input[type="search"],
  .topbar input[type="search"],
  .topbar .search-bar { display: none !important; }
  .topbar-right { gap: 8px; }

  /* Content padding compresses */
  main.page-content > *,
  .page-content > * { padding-left: 16px; padding-right: 16px; }

  /* Grids: 1 column on mobile */
  .stat-grid, .stats-grid, .cards-grid, .grid-3, .grid-4, .grid-2,
  .kpi-grid, .metric-grid, [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
  }

  /* Tables become horizontally scrollable */
  .table-wrap, .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data-table, table.contacts-table, table.list-table, table.cmp-table {
    display: block; overflow-x: auto; white-space: nowrap; min-width: 100%;
  }

  /* Reduce padding on cards + panels */
  .card, .panel, .kpi-card, .stat-card, section > .container {
    padding: 16px !important;
  }

  /* Footer stacks */
  footer .footer-inner,
  .footer-inner,
  .site-footer .footer-cols { grid-template-columns: 1fr !important; text-align: left; }

  /* Buttons wrap to full width in narrow rows */
  .btn-row, .action-row, .cta-row { flex-wrap: wrap; }
  .btn-row .btn, .action-row .btn { flex: 1 1 auto; }

  /* Forms — inputs go full-width */
  .form-row, .form-grid { grid-template-columns: 1fr !important; }
  input, select, textarea { max-width: 100%; box-sizing: border-box; }

  /* Modals fit viewport */
  .modal, .modal-content, .dialog {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    width: auto !important;
    margin: 12px !important;
    overflow-y: auto;
  }
}


/* ---------- 3. Tablet compact ( 768–1023px ) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  html body aside.sidebar,
  .sidebar { width: 68px !important; }

  html body aside.sidebar:not(.mobile-open) .nav-label,
  html body aside.sidebar:not(.mobile-open) .logo-text,
  html body aside.sidebar:not(.mobile-open) .company-switcher,
  html body aside.sidebar:not(.mobile-open) .user-info,
  html body aside.sidebar:not(.mobile-open) .nav-cat {
    display: none !important;
  }
  html body aside.sidebar:not(.mobile-open) .nav-item {
    justify-content: center !important;
    padding: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    width: 100% !important;
  }
  html body aside.sidebar:not(.mobile-open) .nav-item .nav-icon {
    margin: 0 !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    flex: 0 0 auto !important;
  }

  /* Tooltip on tablet */
  html body aside.sidebar:not(.mobile-open) .nav-item .nav-label {
    display: block !important;
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(6px) !important;
    margin-left: 4px !important;
    padding: 6px 12px !important;
    background: #1a1a2e !important;
    color: #f5f3ff !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0;
    transition: opacity .12s, transform .12s;
    z-index: 1000 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    border: 1px solid rgba(139,92,246,0.2);
    width: auto !important;
    height: auto !important;
  }
  html body aside.sidebar:not(.mobile-open) .nav-item:hover .nav-label {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
  }

  /* Hide desktop toggle on tablet */
  .sidebar-toggle { display: none !important; }

  /* Main content accommodates 68px sidebar */
  main.page-content, .page-content { padding-left: 68px !important; }

  /* Grid layouts adjust */
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4, .stat-grid, .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Topbar tweaks */
  .topbar-right .top-search { max-width: 220px; }
}


/* ---------- 4. Overflow prevention across all sizes ---------- */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* Long words (URLs, emails) wrap */
.contact-email, .affiliate-link, .breakable {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ---------- 5. Hide unclassed brand text inside logo-mark in collapsed rail ---------- */
html body aside.sidebar.collapsed .logo-mark > span,
.sidebar.collapsed .logo-mark > span { display: none !important; }

/* Also hide toggle chevron floating in body-space (originally positioned absolutely) */
html body aside.sidebar.collapsed .sidebar-toggle-floating { display: none !important; }


/* Hide brand text link when sidebar is collapsed */
html body aside.sidebar.collapsed .brand-textlogo span,
html body aside.sidebar.collapsed .brand-textlogo,
.sidebar.collapsed .brand-textlogo span,
.sidebar.collapsed .brand-textlogo {
  display: none !important;
}