/* ============================================================================
   MAIN CSS ENTRY POINT
   ============================================================================
   This file imports all modular CSS files in the correct order.
   Import order matters for CSS specificity!
   ============================================================================ */

/* 1. Variables and Theme System (must be first) */
@import url('/styles/variables.css');

/* 2. Base Styles (reset, typography, backgrounds) */
@import url('/styles/base/reset.css');
@import url('/styles/base/typography.css');
@import url('/styles/base/backgrounds.css');

/* 3. Utility Classes */
@import url('/styles/utilities/visibility.css');
@import url('/styles/utilities/animations.css');
@import url('/styles/utilities/admin.css');

/* 4. Layout */
@import url('/styles/layout/app-shell.css');
@import url('/styles/layout/navigation.css');
@import url('/styles/layout/tabs.css');
@import url('/styles/layout/sections.css');

/* 5. Components */
@import url('/styles/components/cookie-consent.css');
@import url('/styles/components/spinners.css');
@import url('/styles/components/buttons.css');
@import url('/styles/components/cards.css');
@import url('/styles/components/modals.css');
@import url('/styles/components/edit-container-modal.css');
@import url('/styles/components/edit-bundle-modal.css');
@import url('/styles/components/edit-slab-modal.css');
@import url('/styles/components/detail-modal-shared.css');
@import url('/styles/components/tables.css');
@import url('/styles/components/forms.css');
@import url('/styles/components/toggles.css');
@import url('/styles/components/badges.css');
@import url('/styles/components/notifications.css');
@import url('/js/personnel/personnel.css');
@import url('/js/suppliers/upload-invoice.css');
@import url('/js/shared/entity-cards.css');
@import url('/js/shared/image-upload.css');
@import url('/styles/components/data-display.css');
@import url('/js/core/global-search.css');

/* 6. Features */
@import url('/js/dashboard/dashboard.css');
@import url('/js/settings/settings.css');
@import url('/js/inventory/inventory.css');
@import url('/js/inventory/modals/add-inventory.css');
@import url('/js/pages/public-site.css');
@import url('/js/client-portal/client-portal.css');
@import url('/js/locations/modals/map-editor.css');
@import url('/js/inventory/slabs.css');
@import url('/js/materials/stone-types/stone-types.css');
@import url('/js/locations/rooms.css');
@import url('/js/core/auth.css');
@import url('/js/notifications/notifications.css');
@import url('/js/notifications/operations-actions.css');
@import url('/js/notifications/delivery-tracking.css');
@import url('/js/notifications/move-requests.css');
@import url('/js/personnel/location-assignment.css');
@import url('/js/modals/move-request-modal.css');
@import url('/js/pages/safety-waiver.css');
@import url('/js/clients/clients.css');
@import url('/js/quotes-invoices/quotes-invoices.css');
@import url('/js/shared/calculator.css');
@import url('/js/reports/reports.css');
@import url('/js/activity/activity.css');
@import url('/js/kiosk/kiosk-page.css');
@import url('/styles/components/calendar.css');

/* 7. Lists feature */
@import url('/js/lists/lists.css');
@import url('/js/shared/spreadsheet-view.css');

/* 8. Responsive Overrides (must be last to override all above) */
@import url('/styles/utilities/responsive.css');

/* 9. Accessibility Overrides (must be after everything else to guarantee focus-visible wins) */
@import url('/styles/base/accessibility.css');

/* ── Card Image Overlay (material & bundle image lightbox) ─────────────────── */
.card-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.card-image-overlay.hidden {
  display: none;
}

.card-image-back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s;
}

.card-image-back-btn:hover {
  background: rgba(0, 0, 0, 0.88);
}

.card-image-overlay-img {
  width: min(90vw, 900px);
  max-height: 85vh;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}