/* MyFoods Final Contrast Layout Fix */

:root {
  --mf-deep: #123D34;
  --mf-deep-2: #0F342D;
  --mf-green: #2F7D46;
  --mf-sage: #7FA691;
  --mf-bg: #F7F2EA;
  --mf-surface: #FFFFFF;
  --mf-text: #1F2328;
  --mf-muted: #5F6864;
  --mf-border: #D8CCBF;
  --mf-border-soft: #E7DDD2;
  --mf-slate: #27415A;
  --mf-copper: #D3542A;
  --mf-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Global readable text */
body,
body *,
button,
input,
select,
textarea {
  font-family: var(--mf-font) !important;
}

.admin-main,
.business-main,
.portal-main,
.dashboard-main,
.main-content,
.admin-content,
.business-content {
  background: var(--mf-bg) !important;
  color: var(--mf-text) !important;
}

/* Admin and Business sidebar must be dark and readable */
.admin-sidebar,
.business-sidebar,
.portal-sidebar,
.sidebar {
  background: linear-gradient(180deg, var(--mf-deep) 0%, var(--mf-deep-2) 100%) !important;
  color: rgba(255,255,255,.88) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

.admin-sidebar *,
.business-sidebar *,
.portal-sidebar *,
.sidebar * {
  color: inherit !important;
}

.admin-sidebar .brand,
.business-sidebar .brand,
.portal-sidebar .brand,
.sidebar .brand {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  padding: 18px 16px !important;
  overflow: visible !important;
}

.admin-sidebar .brand img,
.business-sidebar .brand img,
.portal-sidebar .brand img,
.sidebar .brand img,
.admin-sidebar .logo img,
.business-sidebar .logo img,
.portal-sidebar .logo img,
.sidebar .logo img {
  content: url("/assets/brand/myfoods-logo-tricolor.svg") !important;
  display: block !important;
  width: 166px !important;
  max-width: calc(100% - 4px) !important;
  height: auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(231,221,210,.9) !important;
  border-radius: 13px !important;
  padding: 7px 9px !important;
  box-sizing: border-box !important;
}

.admin-sidebar h1,
.admin-sidebar h2,
.admin-sidebar h3,
.admin-sidebar h4,
.admin-sidebar .section-title,
.admin-sidebar .nav-section,
.admin-sidebar .label,
.business-sidebar h1,
.business-sidebar h2,
.business-sidebar h3,
.business-sidebar h4,
.business-sidebar .section-title,
.business-sidebar .nav-section,
.business-sidebar .label,
.portal-sidebar h1,
.portal-sidebar h2,
.portal-sidebar h3,
.portal-sidebar h4,
.portal-sidebar .section-title,
.portal-sidebar .nav-section,
.portal-sidebar .label,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar .section-title,
.sidebar .nav-section,
.sidebar .label {
  color: rgba(255,255,255,.58) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 800 !important;
}

.admin-sidebar a,
.admin-sidebar button,
.admin-sidebar .nav-item,
.admin-sidebar .sidebar-item,
.business-sidebar a,
.business-sidebar button,
.business-sidebar .nav-item,
.business-sidebar .sidebar-item,
.portal-sidebar a,
.portal-sidebar button,
.portal-sidebar .nav-item,
.portal-sidebar .sidebar-item,
.sidebar a,
.sidebar button,
.sidebar .nav-item,
.sidebar .sidebar-item {
  color: rgba(255,255,255,.86) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  font-weight: 720 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.admin-sidebar a:hover,
.admin-sidebar button:hover,
.admin-sidebar .nav-item:hover,
.business-sidebar a:hover,
.business-sidebar button:hover,
.business-sidebar .nav-item:hover,
.portal-sidebar a:hover,
.portal-sidebar button:hover,
.portal-sidebar .nav-item:hover,
.sidebar a:hover,
.sidebar button:hover,
.sidebar .nav-item:hover {
  background: rgba(255,255,255,.10) !important;
  color: #FFFFFF !important;
}

.admin-sidebar a.active,
.admin-sidebar button.active,
.admin-sidebar .nav-item.active,
.admin-sidebar [aria-current="page"],
.business-sidebar a.active,
.business-sidebar button.active,
.business-sidebar .nav-item.active,
.business-sidebar [aria-current="page"],
.portal-sidebar a.active,
.portal-sidebar button.active,
.portal-sidebar .nav-item.active,
.portal-sidebar [aria-current="page"],
.sidebar a.active,
.sidebar button.active,
.sidebar .nav-item.active,
.sidebar [aria-current="page"] {
  background: rgba(255,255,255,.16) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.14) !important;
}

.admin-sidebar .badge,
.admin-sidebar .count,
.business-sidebar .badge,
.business-sidebar .count,
.portal-sidebar .badge,
.portal-sidebar .count,
.sidebar .badge,
.sidebar .count {
  background: rgba(255,255,255,.90) !important;
  color: var(--mf-deep) !important;
  border: 0 !important;
  font-weight: 850 !important;
}

/* Business name status in sidebar */
.business-sidebar .business-name,
.business-sidebar .restaurant-name,
.business-sidebar .current-business,
.admin-sidebar .business-name,
.admin-sidebar .current-business {
  color: #FFFFFF !important;
  font-weight: 850 !important;
}

.business-sidebar .status,
.business-sidebar .status-active,
.business-sidebar .muted,
.admin-sidebar .status,
.admin-sidebar .status-active,
.admin-sidebar .muted {
  color: rgba(255,255,255,.72) !important;
}

/* Admin header alignment */
.admin-main header,
.admin-main .admin-header,
.admin-main .admin-topbar,
.admin-main .content-header,
.admin-main .page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  min-height: 72px !important;
  padding: 18px 24px !important;
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid var(--mf-border-soft) !important;
  color: var(--mf-text) !important;
  box-sizing: border-box !important;
}

.admin-main header h1,
.admin-main .admin-header h1,
.admin-main .admin-topbar h1,
.admin-main .content-header h1,
.admin-main .page-header h1 {
  flex: 1 1 280px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--mf-text) !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

.admin-main .admin-user,
.admin-main .user-area,
.admin-main .header-user,
.admin-main .identity,
.admin-main #adminIdentity {
  flex: 0 1 auto !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: var(--mf-text) !important;
}

/* Business header */
.business-main header,
.business-main .business-header,
.business-main .business-topbar,
.business-main .content-header,
.business-main .page-header {
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid var(--mf-border-soft) !important;
  color: var(--mf-text) !important;
  padding: 18px 24px !important;
}

.business-main header h1,
.business-main .business-header h1,
.business-main .business-topbar h1,
.business-main .content-header h1,
.business-main .page-header h1 {
  color: var(--mf-text) !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

/* Tabs and section nav readable */
.admin-main .tabs,
.admin-main .tabbar,
.admin-main .section-tabs,
.business-main .tabs,
.business-main .tabbar,
.business-main .section-tabs {
  background: rgba(255,255,255,.76) !important;
  border: 1px solid var(--mf-border-soft) !important;
  border-radius: 18px !important;
  padding: 6px !important;
}

.admin-main .tabs button,
.admin-main .tabbar button,
.admin-main .section-tabs button,
.admin-main .tab,
.business-main .tabs button,
.business-main .tabbar button,
.business-main .section-tabs button,
.business-main .tab {
  color: var(--mf-slate) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-weight: 760 !important;
  opacity: 1 !important;
}

.admin-main .tabs button.active,
.admin-main .tabbar button.active,
.admin-main .section-tabs button.active,
.admin-main .tab.active,
.business-main .tabs button.active,
.business-main .tabbar button.active,
.business-main .section-tabs button.active,
.business-main .tab.active {
  color: var(--mf-deep) !important;
  background: #FFFFFF !important;
  border-color: var(--mf-border-soft) !important;
  box-shadow: 0 6px 16px rgba(31,35,40,.06) !important;
}

/* Cards and forms */
.admin-card,
.business-card,
.dashboard-card,
.panel,
.section-card,
.kpi-card,
.stat-card,
.settings-card,
.profile-card,
.menu-card,
.order-card,
.cms-card,
.media-card,
.empty-state {
  background: #FFFFFF !important;
  border: 1px solid var(--mf-border-soft) !important;
  color: var(--mf-text) !important;
  box-shadow: 0 10px 28px rgba(31,35,40,.06) !important;
}

.admin-card h1,
.admin-card h2,
.admin-card h3,
.business-card h1,
.business-card h2,
.business-card h3,
.dashboard-card h1,
.dashboard-card h2,
.dashboard-card h3,
.panel h1,
.panel h2,
.panel h3,
.section-card h1,
.section-card h2,
.section-card h3 {
  color: var(--mf-text) !important;
  font-weight: 700 !important;
}

/* Admin tables must not clip action buttons */
.admin-table-wrap,
.table-wrap,
.data-table-wrap,
.admin-main .table-container,
.business-main .table-container {
  overflow-x: auto !important;
  overflow-y: visible !important;
  background: #FFFFFF !important;
  border: 1px solid var(--mf-border-soft) !important;
  border-radius: 22px !important;
}

.admin-table,
.data-table,
.admin-main table,
.business-main table {
  min-width: 980px !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.admin-main th,
.admin-main td,
.business-main th,
.business-main td {
  color: var(--mf-text) !important;
  vertical-align: middle !important;
}

.admin-main th,
.business-main th {
  color: var(--mf-slate) !important;
  background: rgba(247,242,234,.78) !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.admin-main td:last-child,
.business-main td:last-child {
  min-width: 150px !important;
  width: 170px !important;
}

.admin-actions,
.row-actions,
.table-actions,
.actions-cell,
.admin-main td:last-child,
.business-main td:last-child {
  overflow: visible !important;
}

.admin-actions,
.row-actions,
.table-actions,
.actions-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.admin-actions button,
.row-actions button,
.table-actions button,
.actions-cell button,
.admin-main td:last-child button,
.business-main td:last-child button {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  max-width: 140px !important;
}

/* Markup compatibility for existing portal shells */
.sidebar-logo {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  padding: 18px 16px !important;
  overflow: visible !important;
}

.sidebar-logo img,
.brand-logo-img {
  content: url("/assets/brand/myfoods-logo-tricolor.svg") !important;
  display: block !important;
  width: 166px !important;
  max-width: calc(100% - 4px) !important;
  height: auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(231,221,210,.9) !important;
  border-radius: 13px !important;
  padding: 7px 9px !important;
  box-sizing: border-box !important;
}

.admin-business-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  background: #FFFFFF !important;
  border: 1px solid var(--mf-border-soft) !important;
  border-radius: 22px !important;
}

.admin-business-table-wrap table {
  min-width: 980px !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.admin-business-table-wrap td:last-child {
  min-width: 150px !important;
  width: 170px !important;
  overflow: visible !important;
}

.business-sidebar .brand,
.business-sidebar .logo,
.business-sidebar .brand-logo {
  display: grid !important;
  gap: 6px !important;
  align-items: start !important;
  justify-items: start !important;
}

.business-sidebar .brand img,
.business-sidebar .logo img,
.business-sidebar .brand-logo img,
.business-sidebar .brand-logo-img {
  content: url("/assets/brand/myfoods-logo-tricolor.svg") !important;
  display: block !important;
  width: 166px !important;
  max-width: 166px !important;
  height: auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(231,221,210,.9) !important;
  border-radius: 13px !important;
  padding: 7px 9px !important;
  box-sizing: border-box !important;
}

.business-sidebar .brand svg,
.business-sidebar .logo svg,
.business-sidebar .brand-logo svg {
  display: none !important;
}

.business-sidebar .brand .brand-subtitle,
.business-sidebar .brand .subtitle,
.business-sidebar .brand small,
.business-sidebar .brand span:not(:has(img)),
.business-sidebar .logo .brand-subtitle,
.business-sidebar .logo .subtitle,
.business-sidebar .logo small {
  color: rgba(255,255,255,.72) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}

.business-sidebar .brand .brand-subtitle::after,
.business-sidebar .brand .subtitle::after,
.business-sidebar .brand small::after {
  content: "" !important;
}

.mf-business-portal .sidebar-logo {
  display: grid !important;
  gap: 6px !important;
  align-items: start !important;
  justify-items: start !important;
}

.mf-business-portal .sidebar-logo svg,
.mf-business-portal .sidebar-logo .brand-mark-img {
  display: none !important;
}

.mf-business-portal .sidebar-logo .brand-logo-img {
  content: url("/assets/brand/myfoods-logo-tricolor.svg") !important;
  display: block !important;
  width: 166px !important;
  max-width: 166px !important;
  height: auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(231,221,210,.9) !important;
  border-radius: 13px !important;
  padding: 7px 9px !important;
  box-sizing: border-box !important;
}

.mf-business-portal .sidebar-logo .brand-subtitle,
.mf-business-portal .sidebar-logo .logo-sub,
.mf-business-portal .sidebar-logo small {
  color: rgba(255,255,255,.72) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}

.mf-business-portal .sidebar-logo .portal-brand-name {
  display: none !important;
}

/* Toast must not cover center content */
.toast,
#toast,
.toast.show,
.notification,
.portal-toast {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 99999 !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  background: var(--mf-deep) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgba(31,35,40,.24) !important;
  font-weight: 760 !important;
}

/* Footer readable and lighter */
footer,
.site-footer {
  background: #F3EEE6 !important;
  color: var(--mf-text) !important;
  border-top: 1px solid var(--mf-border-soft) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer .footer-title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .footer-title {
  color: var(--mf-slate) !important;
  font-weight: 850 !important;
  opacity: 1 !important;
}

footer a,
.site-footer a {
  color: var(--mf-deep) !important;
  opacity: 1 !important;
}

.footer-note,
.footer-bottom,
.site-footer-bottom {
  color: var(--mf-muted) !important;
  font-size: 0 !important;
  border-top: 1px solid var(--mf-border-soft) !important;
}

.footer-note::before,
.footer-bottom::before,
.site-footer-bottom::before {
  content: "\00A9 MyFoods.ch" !important;
  font-size: 14px !important;
  color: var(--mf-muted) !important;
}

/* Restaurant cards consistent sans typography */
.restaurant-card,
.restaurant-card *,
.business-card,
.business-card *,
.admin-card,
.admin-card * {
  font-family: var(--mf-font) !important;
}

.restaurant-name,
.restaurant-card h2,
.restaurant-card h3 {
  font-family: var(--mf-font) !important;
  font-weight: 780 !important;
  letter-spacing: -0.02em !important;
  color: var(--mf-text) !important;
}

/* Mobile */
@media (max-width: 760px) {
  .admin-shell,
  .business-shell,
  .portal-shell {
    display: block !important;
  }

  .admin-sidebar,
  .business-sidebar,
  .portal-sidebar,
  .sidebar {
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
  }

  .admin-sidebar nav,
  .business-sidebar nav,
  .portal-sidebar nav,
  .sidebar nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .admin-sidebar a,
  .business-sidebar a,
  .portal-sidebar a,
  .sidebar a,
  .admin-sidebar button,
  .business-sidebar button,
  .portal-sidebar button,
  .sidebar button {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    white-space: nowrap !important;
  }

  .admin-main header,
  .admin-main .admin-header,
  .admin-main .admin-topbar,
  .business-main header,
  .business-main .business-header,
  .business-main .business-topbar {
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .admin-table,
  .data-table,
  .admin-main table,
  .business-main table {
    min-width: 760px !important;
  }

  .toast,
  #toast,
  .toast.show,
  .notification,
  .portal-toast {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    width: auto !important;
    max-width: none !important;
  }
}