/* Custom Styles for Trysoro Clone App */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body {
  font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Glassmorphism helpers */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.7);
}


/* Sidebar Profile Left Alignment — profile footer only (not site switcher) */
aside #sidebar-user-profile-btn,
nav #sidebar-user-profile-btn,
aside .border-t button,
nav .border-t button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  padding: 8px 12px !important;
}

aside #sidebar-user-profile-btn > div,
nav #sidebar-user-profile-btn > div,
aside .border-t button > div,
nav .border-t button > div {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: left !important;
}

aside #sidebar-user-profile-btn .flex-col,
nav #sidebar-user-profile-btn .flex-col,
aside .border-t button .flex-col,
nav .border-t button .flex-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
}

aside #sidebar-user-profile-btn p,
nav #sidebar-user-profile-btn p,
aside .border-t button p,
nav .border-t button p {
  text-align: left !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Modern Sidebar Profile Popover Dropdown */
#sidebar-profile-dropdown-menu {
  position: fixed !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  color: #09090b !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  padding: 6px !important;
  min-width: 240px !important;
  max-width: 280px !important;
  font-family: inherit !important;
  animation: profilePopIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes profilePopIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.profile-popover-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px 10px 10px !important;
  border-bottom: 1px solid #f4f4f5 !important;
  margin-bottom: 4px !important;
}

.profile-popover-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 9999px !important;
  background-color: rgba(124, 58, 237, 0.1) !important;
  color: #7c3aed !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.profile-popover-details {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 !important;
  text-align: left !important;
}

.profile-popover-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #09090b !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.profile-popover-email {
  font-size: 11px !important;
  color: #71717a !important;
  line-height: 1.3 !important;
  margin: 2px 0 0 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.profile-popover-signout-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #ef4444 !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
}

.profile-popover-signout-btn:hover {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
}

.profile-popover-signout-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
}