/*
  Core CSS - Minimal Base Styles
  Contains only essential styles needed by all pages:
  - CSS variables
  - Reset/normalize
  - Typography basics
  - Header/navbar (shared across all pages)
  - Mobile responsiveness fixes (Feb 2026)
*/

@import url('./breakpoints.css');

:root {
  /* Brand Colors - Deep Navy & Usedfindr Lime */
  --navy-deep: #0B1129;              /* Deep Navy - for backgrounds */
  --navy-dark: #0B1129;              /* Dark Navy - for primary text */
  --royal-blue: #5B7DB8;             /* Usedfindr royal blue */
  --lime-vibrant: #1fdb00;            /* Usedfindr Lime-vibrant - for accents and CTAs */
  --lime-dark: #179c02;              /* Usedfindr lime-dark */
  --bg-pale: #F0F4F8;                /* Very pale blue-grey - replaces harsh white */
  --gradient-navy-start: #0B1129;     /* Gradient start for badges */
  --gradient-navy-end: #1E3A8A;       /* Lighter blue - gradient end for badges */
  
  /* Core Color Variables */
  --bg: var(--bg-pale);               /* Main background - very pale blue-grey */
  --surface: #ffffff;                 /* cards, header */
  --text: var(--navy-dark);           /* primary text - Dark Navy */
  --text-secondary: #6b7280;          /* secondary text - gray for muted content */
  --text-muted: #9ca3af;              /* metadata, tertiary text - lighter gray for low emphasis */
  --muted: #4B5563;                   /* secondary text - darker gray that complements navy */
  --accent: var(--lime-vibrant);      /* Usedfindr Lime-vibrant */
  --accent-hover: #6BDB00;            /* darker lime variant for hover states */
  --green-primary: var(--lime-dark);  /* Usedfindr lime-dark - primary green for gradients */
  --error: #ef4444;                   /* Error/red color for error states */
  --border: #e5e7eb;                  /* subtle borders */
  --primary: #3b82f6;                 /* Admin primary (pills, primary buttons, focus rings) */
  --text-primary: var(--text);       /* Alias for primary text */
  --bg-primary: var(--surface);      /* Alias for primary background */
  --bg-secondary: #f3f4f6;           /* Secondary background (table header, hover) */
  --discovery-log-bg: #1a1a1a;       /* Ingestion log background */
  --discovery-log-text: #00ff00;     /* Ingestion log text */
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-hover: 0 3px 6px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.10);
  --radius: 12px;
  --radius-sm: 8px;
  --container: clamp(320px, 90vw, 1600px);
  
  /* Z-Index System - Standardized layering */
  --z-base: 1;
  --z-dropdown: 100;
  --z-header: 500;
  --z-modal-backdrop: 1000;
  --z-modal-content: 1001;
  --z-toast: 2000;
  
  /* Admin Sidebar - Single Source of Truth */
  --sidebar-width-collapsed: 80px;
  --sidebar-width-expanded: 250px;
  --sidebar-header-height: 80px;
  
  /* Account Sidebar - Aligned with navbar for flush appearance */
  --navbar-height: 84px; /* Navbar fixed height aligned to bounded logo sizes */
  --account-sidebar-header-height: var(--navbar-height); /* Matches navbar height for flush alignment */
  --account-sidebar-width-collapsed: 64px;
  --account-sidebar-width-expanded: 240px;
  
  /* Account Sidebar Color Variables */
  --sidebar-bg: var(--navy-deep);              /* Deep Navy background */
  --sidebar-border: #374151;                   /* Border color */
  --sidebar-text-primary: #f9fafb;             /* Primary text color */
  --sidebar-text-secondary: #d1d5db;           /* Secondary text color */
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);  /* Hover background */
  --sidebar-active-bg: rgba(124, 252, 0, 0.15);  /* Active link background - lime green tint */
  --sidebar-text-muted: #9ca3af;               /* Muted text color */

  /* Category Icon Color Families */
  --category-family-tech-bg: #EFF6FF;
  --category-family-tech-stroke: #2563EB;
  --category-family-home-bg: #FFF7ED;
  --category-family-home-stroke: #EA580C;
  --category-family-sports-bg: #F0FDF4;
  --category-family-sports-stroke: #16A34A;
  --category-family-apparel-bg: #FAF5FF;
  --category-family-apparel-stroke: #7C3AED;
  --category-family-neutral-bg: #f3f4f6;
  --category-family-neutral-stroke: #4B5563;
}

* {
  box-sizing: border-box;
}

/* Touch Action - Eliminate 300ms delay on mobile */
button,
a,
.clickable,
.nav-link,
.product-card,
.modal-close,
.submit-button,
.btn-primary,
.btn-secondary,
.btn-danger {
  touch-action: manipulation;
}

/* Fix for scrollbar "jump" on pages with different content heights. */
html {
  overflow-y: scroll;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  min-height: 100%;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  color: var(--text);
  background: var(--bg-pale);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Mask the gap: fixed navy band only in viewport (100vh), width in sync with sidebar so no
   white flash during expand/collapse and no blue panel peeking out (body stays bg-pale). */
body.has-account-sidebar {
  background: var(--bg-pale);
}

body.has-account-sidebar::before {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  width: var(--account-sidebar-width-collapsed);
  height: 100vh;
  background: var(--navy-deep);
  z-index: 0;
  pointer-events: none;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.account-sidebar-expanded body.has-account-sidebar::before {
  width: var(--account-sidebar-width-expanded);
}

/* Safety net: anonymous users should never see account sidebar chrome */
.account-sidebar[data-user-logged-in="false"] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
}

/* Site chrome headers only (navbar / admin shell). In-flow semantic headers —
   e.g. Trusted Finder hero (`header.tf-header`) — must not inherit sticky bar
   positioning, z-index, or drop-shadow from this rule. */
header:not(.tf-header) {
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
  background: var(--navy-deep); /* Deep Midnight Blue #0B1129 */
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid #1E293B; /* Slightly lighter navy - separates from content */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Navigation Bar */
.navbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 24px 2px 12px; /* Minimal vertical padding for max logo; 12px left to shift logo left */
  max-width: var(--container);
  margin: 0 auto;
  height: var(--navbar-height);
  box-sizing: border-box;
  gap: 24px;
}

.nav-brand {
  flex-shrink: 0;
  padding-right: 8px; /* Extra spacing after logo */
}

.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 200ms ease;
  position: relative;
}

.brand-logo {
  height: 56px;
  max-width: 220px;
  width: auto;
  display: block;
  transition: transform 200ms ease, opacity 200ms ease, filter 200ms ease;
  /* Logo is already white with green accent; do not force invert (would kill green) */
  /* filter: brightness(0) invert(1); */
  object-fit: contain;
}

@media (min-width: 1024px) {
  .brand-logo {
    height: 64px;
    max-width: 240px;
  }
}

.brand-link:hover .brand-logo {
  opacity: 0.9;
  transform: scale(1.03);
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.15));
}

.brand-link:active .brand-logo {
  transform: scale(0.98);
}

.nav-search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 0%;
  min-width: 200px;
  max-width: 400px; /* Tame navbar search - hero search is the star on Trusted Finder */
  margin: 0;
  position: relative;
  justify-content: center;
  align-self: center;
  gap: 12px;
}

.search-container {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%;
  min-width: 0;
  border: 2px solid transparent;
  border-radius: 9999px; /* Pill shape - matches hero design language */
  background: #FFFFFF;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
}

.search-container:focus-within {
  border-color: var(--lime-vibrant);
  box-shadow: 0 0 0 3px rgba(31, 219, 0, 0.2);
}

/* Search Autofill Dropdown - sits below pill search container */
.search-dropdown {
  position: absolute;
  background: var(--surface);
  border: 2px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow-hover);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
  margin-top: 0;
  display: none;
}

.search-dropdown:not([style*="display: none"]) {
  display: block;
}

.search-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 150ms ease;
  border-bottom: 1px solid var(--border);
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover {
  background-color: rgba(124, 252, 0, 0.08);
}

.search-result:active {
  background-color: rgba(124, 252, 0, 0.12);
}

.search-result-icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1.2;
  margin-top: 2px;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.search-result-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.search-no-results {
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 16px 20px;
  border: none;
  border-radius: 9999px;
  font-size: 18px;
  background: transparent;
  color: var(--text);
  transition: none;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .search-input {
    min-width: 100%;
  }
}

.search-input:focus {
  outline: none;
}

.search-button {
  position: relative;
  background: transparent;
  border: none;
  border-left: none;
  border-radius: 0 9999px 9999px 0;
  padding: 0 20px;
  color: #475569; /* Dark gray icon - stands out in white pill */
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  min-width: 56px;
}

.search-button:hover {
  background: rgba(71, 85, 105, 0.08);
  color: #334155;
}

.search-button:active {
  background: rgba(71, 85, 105, 0.12);
  color: #334155;
}

.search-container:focus-within .search-button {
  background: rgba(31, 219, 0, 0.08);
  color: var(--navy-dark);
}

.nav-links {
  display: flex;
  align-items: center;
  flex-shrink: 1; /* Allow nav-links to shrink if needed */
  flex-wrap: nowrap; /* Prevent wrapping to keep compact */
  gap: 4px; /* Reduced gap between buttons */
  min-width: 0; /* Allow shrinking below content size */
  margin-left: auto; /* Push to the right */
}

.nav-link {
  color: #F1F5F9; /* White / very light gray - visible on dark navbar */
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  padding: 12px 16px; /* Increased for 44px touch target */
  min-height: 44px;
  border-radius: 9999px; /* Pill shape */
  transition: color 200ms ease, background-color 200ms ease;
  white-space: nowrap;
  min-width: fit-content;
  flex-shrink: 1;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  display: flex;
  align-items: center;
}

.nav-link:hover {
  color: var(--lime-vibrant); /* Vibrant lime glow on hover */
  background-color: transparent;
}

/* Add Item keeps its gradient on hover (overrides nav-link transparent hover) */
.nav-link.add-item-btn:hover {
  background: linear-gradient(120deg, var(--lime-vibrant) 0%, var(--lime-dark) 100%);
  color: #FFFFFF;
}

/* Glass button style for active/current page link (e.g. Trusted Finder) */
.nav-link.active {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.1); /* Low-opacity white - glass effect */
  font-weight: 600;
  font-size: 13px;
  max-width: 120px;
  border: none;
}

.nav-link.active:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Brighten on hover */
  color: #FFFFFF;
}

/* Navbar Sign Out button - match nav links (readable on dark navbar) */
.navbar-signout-btn {
  background: transparent !important;
  color: #F1F5F9;
  border: none;
  cursor: pointer;
  font: inherit;
  appearance: none;
}

.navbar-signout-btn:hover {
  color: var(--lime-vibrant);
  background-color: transparent !important;
}

/* Profile dropdown in navbar (logged-in) */
.nav-profile-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-profile-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: #F1F5F9;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms ease, background-color 200ms ease;
}

.nav-profile-trigger:hover {
  color: var(--lime-vibrant);
  background-color: rgba(255, 255, 255, 0.08);
}

.nav-profile-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.nav-profile-label {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  z-index: 100;
  padding: 4px 0;
}

.nav-profile-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-profile-dropdown-item:hover {
  background: var(--bg-pale);
  color: var(--accent);
}

.nav-profile-signout {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
  color: var(--error);
}

.nav-profile-signout:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--error);
}

/* Layout - main grows to push footer to bottom when content is short */
main {
  max-width: var(--container);
  margin: 1.5rem auto 4rem;
  padding: 0 20px;
  flex: 1 0 auto;
}

/* Footer - dark sandwich, anchored at bottom (flex-shrink: 0 for sticky-footer layout) */
.site-footer {
  background: #0f172a;
  border-top: 1px solid #1e293b;
  padding: 32px 0;
  margin-top: 64px;
  color: #94a3b8;
  flex-shrink: 0;
}

.footer-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 14px;
  transition: color 200ms ease;
}

.footer-links a:hover {
  color: var(--lime-vibrant);
}

/* Legal Section (for simple pages like about, privacy, terms) */
.legal-section {
  max-width: var(--container);
  margin: 32px auto 64px;
  padding: 0 20px;
}

.legal-container {
  max-width: 800px;
  margin: 0 auto;
}

.legal-header {
  margin-bottom: 32px;
  text-align: center;
}

.legal-header h1 {
  margin: 0 0 8px;
  font-size: 32px;
  color: var(--text);
  font-weight: 700;
}

.legal-intro {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}

.legal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

.legal-content h2 {
  margin: 32px 0 16px;
  font-size: 24px;
  color: var(--text);
  font-weight: 700;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  margin: 0 0 16px;
  line-height: 1.6;
  color: var(--text);
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.legal-content li {
  margin-bottom: 8px;
  line-height: 1.6;
  color: var(--text);
}

.contact-info {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-top: 24px;
}

.contact-info p {
  margin: 0;
  line-height: 1.8;
}

/* Responsive Navigation */
@media (max-width: 1400px) {
  .nav-search {
    min-width: 200px; /* Responsive width for smaller screens */
  }
  
  .nav-links {
    gap: 4px; /* Tighter spacing */
  }
  
  .nav-link {
    font-size: 12px;
    padding: 6px 8px;
    max-width: 90px;
  }
  
  .add-item-btn {
    padding: 6px 8px;
    font-size: 12px;
  }
}

@media (max-width: 1200px) {
  .nav-search {
    min-width: 300px;
  }
  
  .nav-links {
    gap: 3px; /* Even tighter spacing */
  }
  
  .nav-link {
    font-size: 12px;
    padding: 5px 6px;
    max-width: 80px;
  }
  
  .add-item-btn {
    padding: 5px 8px;
    font-size: 12px;
  }
  
  /* Hide less critical buttons on medium screens */
  .nav-link[data-nav="search"],
  .nav-link[data-nav="categories"] {
    display: none;
  }
}

/* Mobile Hamburger Menu */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #F1F5F9;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background-color 200ms ease;
  touch-action: manipulation;
}

.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop, 1000);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(320px, 85vw);
  height: 100%;
  background: var(--navy-deep);
  z-index: var(--z-modal-content, 1001);
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
}

.mobile-menu-drawer.is-open {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #F1F5F9;
  margin: 0;
}

.mobile-menu-close {
  background: none;
  border: none;
  color: #F1F5F9;
  font-size: 28px;
  cursor: pointer;
  padding: 8px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background-color 200ms ease;
  touch-action: manipulation;
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-menu-nav .nav-link,
.mobile-menu-nav .add-item-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 14px 16px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  margin: 0;
  max-width: none;
  color: #F1F5F9;
  text-align: left;
}

.mobile-menu-nav .nav-link:hover,
.mobile-menu-nav .add-item-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--lime-vibrant);
}

.mobile-menu-nav .add-item-btn:hover {
  background: linear-gradient(120deg, var(--lime-vibrant) 0%, var(--lime-dark) 100%);
  color: #FFFFFF;
}

/* Body scroll lock when mobile menu is open */
body.mobile-menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Ensure mobile menu is above account sidebar */
.mobile-menu-drawer {
  z-index: calc(var(--z-modal-content, 1001) + 1);
}

.mobile-menu-overlay {
  z-index: calc(var(--z-modal-backdrop, 1000) + 1);
}

@media (max-width: 768px) {
  /* CRITICAL: Hide the ::before pseudo-element that creates the grey bar on mobile */
  body.has-account-sidebar::before,
  html.account-sidebar-expanded body.has-account-sidebar::before {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
  }
  
  .mobile-menu-toggle {
    display: flex;
    order: 2;
    margin-left: auto;
    margin-right: 8px;
  }
  
  .navbar {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 12px;
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Hide desktop nav links on mobile - consolidate into sidebar */
  .nav-links {
    display: none !important;
  }
  
  .nav-search {
    order: 3;
    flex: 1 1 auto;
    margin: 0;
    max-width: none;
    min-width: 0;
  }
  
  .brand-logo {
    height: 80px;
  }
  
  .mobile-menu-overlay {
    display: block;
  }
  
  .mobile-menu-drawer {
    display: block;
  }
  
  .nav-link {
    font-size: 14px;
    padding: 6px 12px;
  }
  
  /* Ensure hamburger button is visible and properly positioned */
  .mobile-menu-toggle {
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .navbar {
    padding: 10px 12px;
  }
  
  .nav-search {
    min-width: 100%;
  }

  .search-input {
    font-size: 14px;
    padding: 10px 14px;
    padding-right: 44px;
    min-width: 100%;
  }

  /* Remove sidebar spacer band on mobile - sidebar is overlay-only and shouldn't reserve space */
  body.has-account-sidebar::before {
    width: 0 !important;
    display: none !important;
  }
  
  .search-button {
    padding: 6px;
  }
  
  .search-button svg {
    width: 14px;
    height: 14px;
  }
  
  .brand-logo {
    height: 72px;
  }
  
  /* Ensure mobile menu drawer doesn't exceed viewport on small screens */
  .mobile-menu-drawer {
    width: min(320px, 90vw);
  }
  
  /* Compact mobile menu header on small screens */
  .mobile-menu-header {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  .mobile-menu-title {
    font-size: 1rem;
  }
}

/* ==================== UTILITY CLASSES ==================== */
/* CSP-compliant utility classes to replace inline styles */

/* Cursor utilities */
.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* Display utilities */
.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

.d-inline-block {
  display: inline-block;
}

.d-block {
  display: block;
}

/* Flexbox utilities */
.flex-column {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

/* Gap utilities */
.gap-4 {
  gap: 4px;
}

.gap-8 {
  gap: 8px;
}

.gap-12 {
  gap: 12px;
}

.gap-16 {
  gap: 16px;
}

/* Padding utilities */
.p-4 {
  padding: 4px;
}

.p-8 {
  padding: 8px;
}

.p-12 {
  padding: 12px;
}

.p-16 {
  padding: 16px;
}

.p-40 {
  padding: 40px;
}

.px-8 {
  padding-left: 8px;
  padding-right: 8px;
}

.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}

.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Margin utilities */
.m-0 {
  margin: 0;
}

.mb-4 {
  margin-bottom: 4px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-32 {
  margin-top: 32px;
}

.mr-12 {
  margin-right: 12px;
}

/* Font weight utilities */
.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

/* Font size utilities */
.fs-075 {
  font-size: 0.75rem;
}

.fs-0813 {
  font-size: 0.8125rem;
}

.fs-0875 {
  font-size: 0.875rem;
}

/* Text alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Border radius utilities */
.rounded-4 {
  border-radius: 4px;
}

.rounded-8 {
  border-radius: 8px;
}

.rounded-50 {
  border-radius: 50%;
}

/* Width/height utilities */
.w-40 {
  width: 40px;
}

.h-40 {
  height: 40px;
}

.w-100 {
  width: 100%;
}

/* Position utilities */
.position-absolute {
  position: absolute;
}

.position-relative {
  position: relative;
}

/* Opacity utilities */
.opacity-50 {
  opacity: 0.5;
}

.opacity-100 {
  opacity: 1;
}

/* Transition utilities */
.transition-all {
  transition: all 0.2s ease;
}

.transition-bg {
  transition: background 0.2s ease;
}

/* Object fit utilities */
.object-cover {
  object-fit: cover;
}

/* Loading spinner animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.spinner-lg {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

/* Background utilities */
.bg-secondary {
  background: var(--background-secondary);
}

.bg-error {
  background: var(--error, #ef4444);
}

/* Color utilities */
.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--muted);
}

.text-error {
  color: var(--error, #ef4444);
}

.text-success {
  color: #10b981;
}

/* Border utilities */
.border {
  border: 1px solid var(--border);
}

.border-bottom {
  border-bottom: 1px solid var(--border);
}

.border-bottom-2 {
  border-bottom: 2px solid var(--border);
}

/* Font family utilities */
.font-mono {
  font-family: 'Courier New', monospace;
}

/* Font size utilities - additional */
.fs-11 {
  font-size: 1.1rem;
}

/* Hidden/display utilities */
[data-hidden="true"] {
  display: none !important;
}

[data-modal-hidden="true"] {
  display: none !important;
}

/* Activity item styles */
.activity-item {
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.activity-item.unread {
  background: var(--background-secondary);
  border-left: 3px solid var(--primary);
}

.activity-icon {
  background: var(--background-secondary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 12px;
}

.activity-details {
  flex: 1;
}

.activity-title {
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

.activity-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}