/*
 * WISEcode Intelligence Component Styles
 * Semantic token mappings for HTML scaffold components
 */

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-primary);
  color: var(--color-oyster-900);
  background-color: var(--color-oyster-100);
  line-height: 1.5;
}

/* App Shell */
.app-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-oyster-100);
}

/* Sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  box-shadow: var(--elevation-md);
  width: 320px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  transition: width 0.3s ease;
  z-index: 100;
  overflow: hidden;
}

.sidebar[data-state="collapsed"] {
  width: 64px;
}

/* Sidebar Expanded State - Normal width */
.sidebar-expanded {
  width: 300px;
}

/* Sidebar Collapsed State - Narrow width */
.sidebar-collapsed {
  width: 112px;
}

/* Collapsed sidebar: stack icon on top, label on bottom */
.sidebar-collapsed .nav-item-collapsible {
  flex-direction: column !important;
  padding: 0.5rem 0.25rem 0.75rem 0.25rem !important;
  gap: 0.25rem !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.sidebar-collapsed .nav-item-collapsible .nav-icon {
  margin: 0 !important;
  font-size: 1.75rem !important; /* 28px - bigger icons in collapsed mode */
}

.sidebar-collapsed .nav-item-collapsible .nav-label {
  font-size: 0.55rem !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  text-align: center !important;
}

/* Collapsed sidebar: hide user info, show only avatar */
.sidebar-collapsed .user-avatar-btn .user-info {
  display: none !important;
}

.sidebar-collapsed .user-avatar-btn {
  justify-content: center !important;
  padding: 0.5rem !important;
}

/* Collapsed sidebar: collapse button - hide label, show only icon centered */
.sidebar-collapsed .collapse-toggle-btn .nav-label {
  display: none !important;
}

.sidebar-collapsed .collapse-toggle-btn {
  justify-content: center !important;
  padding: 1rem !important;
  width: 100% !important;
  min-height: 3rem !important;
}

/* Adjust header padding when collapsed */
.sidebar-collapsed .sidebar-header-content {
  padding: 1rem 0.5rem !important;
}

.sidebar-header {
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--color-oyster-200);
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 40px;
  width: auto;
}

.logo-icon {
  height: 32px;
  width: auto;
  display: none;
}

.sidebar[data-state="collapsed"] .logo {
  display: none;
}

.sidebar[data-state="collapsed"] .logo-icon {
  display: block;
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-oyster-700);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  position: relative;
  margin-bottom: var(--spacing-xs);
}

.nav-item:hover {
  background-color: var(--color-oyster-200);
  color: var(--color-oyster-900);
}

.nav-item[data-active="true"] {
  background-color: var(--color-indigo-100);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.nav-item .material-icons {
  font-size: 20px;
  flex-shrink: 0;
}

.nav-label {
  font-size: var(--font-size-body-m);
  white-space: nowrap;
}

.sidebar[data-state="collapsed"] .nav-label {
  display: none;
}

.active-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background-color: var(--color-primary);
  border-radius: 0 2px 2px 0;
  opacity: 0;
}

.nav-item[data-active="true"] .active-indicator {
  opacity: 1;
}

/* Apply same hover effects to regular nav-item (Overview, Admin Customers) */
.nav-item:not(.bg-indigo-500):hover .material-icons {
  font-weight: 500;
}

.disabled-badge {
  margin-left: auto;
  opacity: 0.5;
}

/* Sidebar Footer */
.sidebar-footer {
  border-top: 1px solid var(--color-oyster-200);
  padding: var(--spacing-lg);
}

.collapse-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  color: var(--color-oyster-600);
  font-size: var(--font-size-body-m);
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: background-color 0.2s ease;
}

.collapse-toggle:hover {
  background-color: var(--color-oyster-100);
}

.user-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-radius: var(--radius-lg);
  background-color: var(--color-oyster-100);
}

.user-avatar .material-icons {
  font-size: 32px;
  color: var(--color-oyster-500);
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-semibold);
  color: var(--color-oyster-900);
}

.user-email {
  font-size: var(--font-size-label-s);
  color: var(--color-oyster-600);
}

.sidebar[data-state="collapsed"] .user-summary {
  flex-direction: column;
  padding: var(--spacing-sm);
}

.sidebar[data-state="collapsed"] .user-info {
  display: none;
}

/* Main Content - margin-left handled by design-system.css via body:has(.sidebar-expanded/collapsed) */
.main-content {
  flex: 1;
  transition: margin-left 0.3s ease;
}

/* Page Container */
.page-container {
  min-height: 100vh;
}

/* Page Header */
.page-header {
  padding: var(--spacing-2xl);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-oyster-300);
}

.page-header-content {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title-group {
  margin-bottom: var(--spacing-lg);
}

.page-title-with-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.page-icon {
  font-size: 32px;
  color: var(--color-primary);
}

.page-title {
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-oyster-900);
  line-height: 1.2;
}

.page-subtitle {
  font-size: var(--font-size-body-m);
  color: var(--color-oyster-600);
  margin-top: var(--spacing-sm);
  line-height: 1.5;
}

.page-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* Page States */
.page-state {
  padding: var(--spacing-3xl);
  text-align: center;
}

.page-state[hidden] {
  display: none;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-oyster-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-container,
.empty-container {
  max-width: 400px;
  margin: 0 auto;
}

.error-icon,
.empty-icon {
  font-size: 64px;
  margin-bottom: var(--spacing-lg);
}

.error-icon {
  color: var(--color-danger-500);
}

.empty-icon {
  color: var(--color-oyster-400);
}

.retry-button {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

/* Page Content */
.page-content {
  padding: var(--spacing-2xl);
  max-width: 1200px;
  margin: 0 auto;
}

/* Buttons */
.primary-action-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  box-shadow: var(--elevation-sm);
  transition: all 0.2s ease;
}

.primary-action-button:hover {
  background-color: var(--color-indigo-600);
  box-shadow: var(--elevation-md);
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: color 0.2s ease;
}

.text-button:hover {
  color: var(--color-indigo-600);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: var(--color-oyster-600);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-button:hover {
  background-color: var(--color-oyster-100);
  color: var(--color-oyster-900);
}

/* Cards */
.feature-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow: var(--elevation-md);
  transition: box-shadow 0.2s ease;
}

.feature-card:hover {
  box-shadow: var(--elevation-lg);
}

.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

.feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-indigo-100);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.feature-icon .material-icons {
  font-size: 28px;
  color: var(--color-primary);
}

.feature-title {
  font-size: var(--font-size-title-s);
  font-weight: var(--font-weight-bold);
  color: var(--color-oyster-900);
  margin-bottom: var(--spacing-md);
}

.feature-description {
  font-size: var(--font-size-body-m);
  color: var(--color-oyster-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.feature-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: color 0.2s ease;
}

.action-link:hover {
  color: var(--color-indigo-600);
}

.action-link[data-disabled="true"] {
  color: var(--color-oyster-400);
  pointer-events: none;
}

/* Overlays */
.drawer-container,
.bottom-sheet-container {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}

.drawer-container[data-state="open"],
.bottom-sheet-container[data-state="open"] {
  display: block;
}

.drawer-backdrop,
.bottom-sheet-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Drawer */
.drawer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 480px;
  background-color: var(--color-white);
  box-shadow: var(--elevation-2xl);
  display: flex;
  flex-direction: column;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--color-oyster-200);
}

.drawer-title {
  font-size: var(--font-size-title-l);
  font-weight: var(--font-weight-bold);
  color: var(--color-oyster-900);
}

.drawer-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-oyster-600);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.drawer-close:hover {
  background-color: var(--color-oyster-100);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xl);
}

.drawer-footer {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  border-top: 1px solid var(--color-oyster-200);
}

.drawer-action-primary,
.drawer-action-secondary {
  flex: 1;
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.drawer-action-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
}

.drawer-action-secondary {
  background-color: transparent;
  color: var(--color-oyster-700);
  border: 1px solid var(--color-oyster-300);
}

/* Bottom Sheet */
.bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  background-color: var(--color-white);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  box-shadow: var(--elevation-2xl);
  display: flex;
  flex-direction: column;
}

.bottom-sheet-handle {
  padding: var(--spacing-md);
  display: flex;
  justify-content: center;
}

.handle-bar {
  width: 40px;
  height: 4px;
  background-color: var(--color-oyster-300);
  border-radius: 2px;
}

.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--color-oyster-200);
}

.bottom-sheet-title {
  font-size: var(--font-size-title-m);
  font-weight: var(--font-weight-bold);
  color: var(--color-oyster-900);
}

.bottom-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xl);
}

.bottom-sheet-footer {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  border-top: 1px solid var(--color-oyster-200);
}

/* Material Icons */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

/* ── Product showcase band (light surfaces) ─────────────────────────────────────
   One of exactly two blessed band patterns for presenting a product photo big.
   Used by the Product Details / spec-sheet pane header and the product gallery card;
   the other pattern is the dark verification hero (see IngredientsVerificationPanel).
   Adding a third band geometry per call site is how this codebase previously ended up
   with 22 different product-image treatments — reuse one of the two instead.

   Pair with <FoodImage Size="FoodImageSize.Fill" />. Clean white, no border on the
   image, generous padding: most packaging is shot on white, so the letterbox seam
   disappears and the photo reads as native to the card. A blurred-photo backdrop is
   deliberately NOT used here — that is a dark-surface idiom that only works because a
   heavy scrim hides the blur mud; on a light card it reads as a washed-out smudge.

   Fixed ratio rather than intrinsic height: card geometry stays stable across products
   (a tall label must not shove the name and category below the fold) and PDF layout
   stays deterministic. Ratio rather than a pixel height so it scales with the column. */
.food-showcase {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 420px;
  box-sizing: border-box;
  /* Proportional, not a flat 16px. This band is used at very different widths (a ~500px
     detail pane and a ~220px gallery card), and a fixed inset spends a sixth of a small
     card's width on padding, which compounds with the white margin many pack shots already
     carry and leaves the product looking lost. Percentage padding resolves against the
     band's own width, so small cards stay tight and large ones still breathe. */
  padding: clamp(8px, 3.5%, 18px);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}