:root {
  --fc-theme-orange: #f78021;
}

html[data-theme="light"],
body[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
}

.theme-icon-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.theme-icon-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-icon-toggle .theme-sun,
.theme-icon-toggle .theme-moon {
  display: none;
}

html[data-theme="light"] .theme-icon-toggle .theme-moon {
  display: block;
}

html[data-theme="dark"] .theme-icon-toggle .theme-sun {
  display: block;
}

.theme-settings-card {
  display: grid;
  gap: 20px;
}

.theme-settings-copy {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.theme-settings-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(247,128,33,.10);
  color: var(--fc-theme-orange);
}

.theme-settings-copy h3 {
  margin: 0 0 5px;
}

.theme-settings-copy p {
  margin: 0;
  line-height: 1.55;
}

.theme-choice-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.theme-choice {
  width: 100%;
  min-height: 80px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid currentColor;
  border-radius: 15px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.theme-choice > .theme-choice-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(247,128,33,.10);
  color: var(--fc-theme-orange);
}

.theme-choice > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.theme-choice > span:last-child > strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
}

.theme-choice > span:last-child > span {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  opacity: .72;
}

.theme-choice.active {
  border-color: var(--fc-theme-orange);
  box-shadow: 0 0 0 3px rgba(247,128,33,.09);
}

.delivery-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.delivery-user-chip {
  min-height: 44px;
  max-width: 190px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid currentColor;
  border-radius: 11px;
}

.delivery-user-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .theme-choice-group {
    grid-template-columns: 1fr;
  }

  .theme-icon-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }

  .delivery-user-chip {
    max-width: 120px;
  }
}

@media (max-width: 430px) {
  .delivery-user-chip {
    display: none;
  }
}

/* FOODCONNECT SEMANTIC COLOR SYSTEM V1 START */
:root {
  /* Brand / action */
  --fc-primary: #f47c1e;
  --fc-primary-hover: #df6810;
  --fc-primary-soft: #fff4eb;
  --fc-primary-border: #fdba86;

  /* Success / positive */
  --fc-success: #15803d;
  --fc-success-hover: #166534;
  --fc-success-soft: #f0fdf4;
  --fc-success-border: #bbf7d0;

  /* Destructive / exit / cancel */
  --fc-danger: #dc2626;
  --fc-danger-hover: #b91c1c;
  --fc-danger-soft: #fef2f2;
  --fc-danger-border: #fecaca;

  /* Warning / pending */
  --fc-warning: #d97706;
  --fc-warning-hover: #b45309;
  --fc-warning-soft: #fffbeb;
  --fc-warning-border: #fde68a;

  /* Information / processing */
  --fc-info: #2563eb;
  --fc-info-hover: #1d4ed8;
  --fc-info-soft: #eff6ff;
  --fc-info-border: #bfdbfe;

  /* Neutral */
  --fc-neutral: #475467;
  --fc-neutral-dark: #344054;
  --fc-neutral-soft: #f8fafc;
  --fc-neutral-border: #d0d5dd;
  --fc-disabled: #98a2b3;
}

html[data-theme="dark"] {
  --fc-primary-soft: rgba(244,124,30,.12);
  --fc-primary-border: rgba(244,124,30,.34);
  --fc-success-soft: rgba(21,128,61,.14);
  --fc-success-border: rgba(74,222,128,.28);
  --fc-danger-soft: rgba(220,38,38,.13);
  --fc-danger-border: rgba(248,113,113,.30);
  --fc-warning-soft: rgba(217,119,6,.14);
  --fc-warning-border: rgba(251,191,36,.28);
  --fc-info-soft: rgba(37,99,235,.15);
  --fc-info-border: rgba(96,165,250,.30);
  --fc-neutral-soft: #20242a;
  --fc-neutral-border: #3a4048;
  --fc-neutral: #d0d5dd;
  --fc-neutral-dark: #f5f7fa;
}

/* ---------------------------------------------------------
   PRIMARY FOODCONNECT ACTIONS = ORANGE
--------------------------------------------------------- */
:is(
  .primary-btn,
  .primary-button,
  .checkout-button,
  .place-order-button,
  .partner-apply-button,
  .assignment-submit-btn,
  .qr-scanner-start-btn,
  .register-another-button,
  .staff-login-btn,
  .settings-save-btn,
  .settings-logo-upload-btn,
  .settings-hours-copy-btn,
  .analytics-primary-btn,
  .inventory-clear-button:not(:disabled),
  .restock-save-btn,
  .product-add-btn,
  .add-to-cart,
  #confirmProductAddToCart,
  #regenerateStaffAccessCode,
  #saveProductBtn,
  #updateProductBtn,
  #saveAddonBtn,
  #saveUserBtn,
  #updateUserBtn,
  #submitButton
) {
  background: var(--fc-primary) !important;
  border-color: var(--fc-primary) !important;
  color: #fff !important;
}

:is(
  .primary-btn,
  .primary-button,
  .checkout-button,
  .place-order-button,
  .partner-apply-button,
  .assignment-submit-btn,
  .qr-scanner-start-btn,
  .register-another-button,
  .staff-login-btn,
  .settings-save-btn,
  .settings-logo-upload-btn,
  .settings-hours-copy-btn,
  .analytics-primary-btn,
  .restock-save-btn,
  .product-add-btn,
  .add-to-cart,
  #confirmProductAddToCart,
  #regenerateStaffAccessCode
):hover:not(:disabled) {
  background: var(--fc-primary-hover) !important;
  border-color: var(--fc-primary-hover) !important;
  color: #fff !important;
}

/* Active navigation / selected controls = orange brand state */
:is(
  .nav-item.active,
  .status-filter.active,
  .filter-btn.active,
  .customer-order-filter.active,
  .notification-filter-btn.active,
  .product-management-tab.active,
  .theme-choice.active
) {
  border-color: var(--fc-primary) !important;
}

.nav-item.active,
.status-filter.active,
.filter-btn.active,
.customer-order-filter.active,
.product-management-tab.active {
  background: var(--fc-primary) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   DESTRUCTIVE / EXIT / CANCEL = RED
--------------------------------------------------------- */
:is(
  .logout-btn,
  .logout-button,
  .danger-dropdown-btn,
  .danger-btn,
  .delete-btn,
  .image-remove-btn,
  .logo-remove-button,
  .settings-logo-remove-btn,
  .clear-cart-button,
  .clear-completed-orders-button,
  .confirm-cancel-order-button,
  .confirm-cancel-order-btn,
  .status-action-btn.cancel-btn,
  #markCancelledBtn,
  #confirmCancelOrderBtn,
  #confirmCustomerCancelBtn,
  #confirmDeactivateBtn,
  #openDeactivateBtn,
  #logoutSettingsBtn,
  #adminLogoutButton,
  #logoutButton,
  #logoutBtn
) {
  background: var(--fc-danger) !important;
  border-color: var(--fc-danger) !important;
  color: #fff !important;
}

:is(
  .logout-btn,
  .logout-button,
  .danger-dropdown-btn,
  .danger-btn,
  .delete-btn,
  .image-remove-btn,
  .logo-remove-button,
  .settings-logo-remove-btn,
  .clear-cart-button,
  .clear-completed-orders-button,
  .confirm-cancel-order-button,
  .confirm-cancel-order-btn,
  .status-action-btn.cancel-btn,
  #confirmDeactivateBtn,
  #openDeactivateBtn,
  #logoutSettingsBtn,
  #adminLogoutButton,
  #logoutButton,
  #logoutBtn
):hover:not(:disabled) {
  background: var(--fc-danger-hover) !important;
  border-color: var(--fc-danger-hover) !important;
  color: #fff !important;
}

/* Explicit Cancel buttons requested as red. */
:is(
  #cancelBtn,
  #cancelDeactivateBtn,
  #confirmCancelBtn,
  #cancelAssignRiderBtn,
  #cancelAddProductBtn,
  #cancelAddonBtn,
  #cancelEditProductBtn,
  #cancelRestockBtn
) {
  background: var(--fc-danger) !important;
  border-color: var(--fc-danger) !important;
  color: #fff !important;
}

/* Staff-row destructive secondary buttons */
#usersList .action-btn.secondary {
  background: var(--fc-danger-soft) !important;
  border: 1px solid var(--fc-danger-border) !important;
  color: var(--fc-danger) !important;
}
#usersList .action-btn.secondary:hover:not(:disabled) {
  background: var(--fc-danger) !important;
  border-color: var(--fc-danger) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   SUCCESS / POSITIVE = GREEN
--------------------------------------------------------- */
:is(
  .status-badge.completed,
  .status-badge.picked_up_by_customer,
  .customer-order-status.completed,
  .customer-order-status.picked-up-by-customer,
  .customer-order-status.picked_up_by_customer,
  .status-approved,
  .activity-log-action-badge.success,
  .application-review-message.success,
  .dashboard-message.success,
  .platform-users-message.success,
  .activity-logs-message.success,
  .inline-status.success,
  .verification-file-status.success,
  .status-message.success
) {
  color: var(--fc-success) !important;
  background: var(--fc-success-soft) !important;
  border-color: var(--fc-success-border) !important;
}

/* Owner semantic positive states */
:is(
  .status-pill.active,
  .availability-badge,
  .inventory-status-available,
  .settings-status-card.is-open,
  .addon-card-status.available
) {
  color: var(--fc-success) !important;
}

/* ---------------------------------------------------------
   WARNING / PENDING = AMBER
--------------------------------------------------------- */
:is(
  .status-badge.pending,
  .customer-order-status.waiting_for_qr,
  .customer-order-status.waiting_for_payment,
  .status-submitted,
  .status-needs_changes,
  .activity-log-action-badge.warning,
) {
  color: var(--fc-warning) !important;
  background: var(--fc-warning-soft) !important;
  border-color: var(--fc-warning-border) !important;
}

/* ---------------------------------------------------------
   INFO / IN PROGRESS = BLUE
--------------------------------------------------------- */
:is(
  .status-badge.preparing,
  .status-badge.ready,
  .status-badge.assigned,
  .status-badge.out_for_delivery,
  .status-badge.out-for-delivery,
  .customer-order-status.order-received,
  .customer-order-status.order_received,
  .customer-order-status.preparing,
  .customer-order-status.out-for-delivery,
  .customer-order-status.out_for_delivery,
  .status-draft,
  .status-email_pending
) {
  color: var(--fc-info) !important;
  background: var(--fc-info-soft) !important;
  border-color: var(--fc-info-border) !important;
}

/* ---------------------------------------------------------
   FAILED / REJECTED / CANCELLED = RED SEMANTIC BADGE
--------------------------------------------------------- */
:is(
  .status-badge.cancelled,
  .customer-order-status.cancelled,
  .customer-order-status.canceled,
  .status-rejected,
  .activity-log-action-badge.danger,
  .status-message.error,
  .status-message.danger
) {
  color: var(--fc-danger) !important;
  background: var(--fc-danger-soft) !important;
  border-color: var(--fc-danger-border) !important;
}

/* ---------------------------------------------------------
   NEUTRAL / NAVIGATION / DISMISS = GRAY
   Back, Close, Keep Order, Copy, Clear Filters are NOT errors.
--------------------------------------------------------- */
:is(
  .secondary-btn,
  .secondary-button,
  .portal-secondary-btn,
  .secondary-checkout-button,
  .back-button,
  .assignment-back-btn,
  .qr-scanner-close-btn,
  .cancel-modal-btn,
  .close-modal-btn,
  .close-btn,
  .staff-close-btn,
  .restock-close-btn,
  .activity-clear-btn,
  #copyStaffAccessCode,
  #backCustomerCancelModal
) {
  background: var(--fc-neutral-soft) !important;
  border-color: var(--fc-neutral-border) !important;
  color: var(--fc-neutral-dark) !important;
}

/* But explicit red Cancel IDs override the generic secondary rule. */
:is(
  #cancelBtn,
  #cancelDeactivateBtn,
  #confirmCancelBtn,
  #cancelAssignRiderBtn,
  #cancelAddProductBtn,
  #cancelAddonBtn,
  #cancelEditProductBtn,
  #cancelRestockBtn
) {
  background: var(--fc-danger) !important;
  border-color: var(--fc-danger) !important;
  color: #fff !important;
}

/* Disabled = gray, regardless of semantic color. */
button:disabled,
.button:disabled,
.btn:disabled,
.primary-btn:disabled,
.primary-button:disabled,
.secondary-btn:disabled,
.secondary-button:disabled {
  background: var(--fc-neutral-soft) !important;
  border-color: var(--fc-neutral-border) !important;
  color: var(--fc-disabled) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Focus ring: consistent across the product. */
:is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(244,124,30,.24) !important;
  outline-offset: 2px;
}

/* FOODCONNECT SEMANTIC COLOR SYSTEM V1 END */

/* FOODCONNECT SEMANTIC DISABLED ACTION POLISH START */

/*
  Disabled destructive actions are NEUTRAL, not black and not red.
  Red communicates that an action can actually destroy something.
*/

html[data-theme="light"] body[data-fc-page="owner"]
#usersTableBody .action-btn.secondary:disabled {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #9ca3af !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

html[data-theme="dark"] body[data-fc-page="owner"]
#usersTableBody .action-btn.secondary:disabled {
  background: #23272d !important;
  border-color: #343a43 !important;
  color: #6b7280 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Enabled destructive Delete = red */
body[data-fc-page="owner"]
#usersTableBody .action-btn.secondary:not(:disabled) {
  background: var(--fc-danger) !important;
  border-color: var(--fc-danger) !important;
  color: #ffffff !important;
}

body[data-fc-page="owner"]
#usersTableBody .action-btn.secondary:not(:disabled):hover {
  background: var(--fc-danger-hover) !important;
  border-color: var(--fc-danger-hover) !important;
  color: #ffffff !important;
}

/* FOODCONNECT SEMANTIC DISABLED ACTION POLISH END */

/* FoodConnect official brand logo standard */
img[src*="logofoodconnect-Photoroom.png"] {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
}

/* Keep the logo balanced in smaller navigation areas */
.sidebar img[src*="logofoodconnect-Photoroom.png"],
.admin-sidebar img[src*="logofoodconnect-Photoroom.png"] {
    width: 42px;
    height: 42px;
}

.footer img[src*="logofoodconnect-Photoroom.png"] {
    width: 45px;
    height: 45px;
}

/* =========================================================
   CART DISABLED ACTION TEXT CONTRAST FIX - 2026-09-12
   Keep the existing cart layout, button backgrounds, and
   disabled behavior. Only force readable white text/icons.
========================================================= */
body[data-fc-page="customer-cart"] .checkout-button:disabled,
body[data-fc-page="customer-cart"] .clear-cart-button:disabled,
body[data-fc-page="customer-cart"] .checkout-button:disabled :is(span, i),
body[data-fc-page="customer-cart"] .clear-cart-button:disabled :is(span, i) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* =========================================================
   OWNER DASHBOARD INVENTORY SUMMARY DOT FIX
   Keep status dots solid instead of badge-soft backgrounds.
========================================================= */
body[data-fc-page="owner"] .inventory-status-warning {
  background: #f5b400 !important;
  border-color: #f5b400 !important;
  color: #f5b400 !important;
}

body[data-fc-page="owner"] .inventory-status-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}