/* ==========================================================================
   SHYAM CATERERS & EVENT MANAGEMENT - COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   Supports: 320px, 375px, 390px, 414px, 480px, 768px, 820px, 1024px, 1280px, 1440px, 1920px+
   Tested for Android & iOS Touch Devices, Tablets, Laptops & Desktops
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL RESPONSIVE RESET & TOUCH UTILITIES
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

#app-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

/* Touch targets and smooth scrolling */
button, input, select, textarea, a, .nav-item, .nav-sub-item, .nav-group-header {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent iOS Safari auto-zoom on input focus by ensuring >= 16px font */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea,
  .form-control {
    font-size: 16px !important;
    min-height: 44px;
  }
}

/* Responsive Table Container Utilities */
.table-responsive,
.clean-data-table-container,
.data-table-container,
.allocation-matrix-wrap,
.labour-mgmt-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Responsive image & media wrappers */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Safe area padding helper for modern smartphones (notch / home indicator) */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* --------------------------------------------------------------------------
   2. MOBILE BACKDROP & DRAWER NAVIGATION (<= 1024px)
   -------------------------------------------------------------------------- */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 11, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 198;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile Sidebar Close Button */
.mobile-sidebar-close-btn {
  display: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-left: auto;
}

.mobile-sidebar-close-btn:hover {
  background: rgba(168, 29, 36, 0.3);
  color: #FFF;
  border-color: var(--ruby-primary);
}

/* --------------------------------------------------------------------------
   3. MOBILE BOTTOM NAVIGATION BAR (<= 768px)
   -------------------------------------------------------------------------- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(62px + var(--safe-bottom));
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle);
  z-index: 150;
  padding: 0 6px var(--safe-bottom) 6px;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45);
}

.mobile-nav-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  flex: 1;
  max-width: 76px;
}

.mobile-nav-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-btn:hover,
.mobile-nav-btn:focus {
  color: var(--gold-light);
}

.mobile-nav-btn.active {
  color: var(--gold-primary);
}

.mobile-nav-btn.active svg {
  color: var(--gold-primary);
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.5));
}

/* --------------------------------------------------------------------------
   4. MENU PLANNING MOBILE TAB SWITCHER & FLOATING ACTION BAR
   -------------------------------------------------------------------------- */
.mobile-workbench-tabs {
  display: none;
  margin-bottom: 14px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 6px;
}

.mobile-wb-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.mobile-wb-tab.active {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
  color: #0B101B;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);
}

/* Floating Selected Menu Summary Pill for Mobile */
.mobile-workbench-floating-bar {
  display: none;
  position: fixed;
  bottom: calc(72px + var(--safe-bottom));
  left: 14px;
  right: 14px;
  background: linear-gradient(135deg, #151F32 0%, #0F172A 100%);
  border: 1.5px solid var(--gold-primary);
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(212, 175, 55, 0.3);
  padding: 8px 16px 8px 20px;
  z-index: 140;
  align-items: center;
  justify-content: space-between;
  animation: slideUpFloat 0.3s ease forwards;
}

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

.mobile-wb-float-info {
  display: flex;
  flex-direction: column;
}

.mobile-wb-float-count {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--gold-light);
}

.mobile-wb-float-sub {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.mobile-wb-float-btn {
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-hover));
  color: #0B101B;
  border: none;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

/* ==========================================================================
   5. TABLET LANDSCAPE & SMALL LAPTOPS (<= 1280px)
   ========================================================================== */
@media (max-width: 1280px) {
  .top-header {
    padding: 0 20px;
  }
  .view-container {
    padding: 20px 20px;
  }
  .menu-planning-workbench {
    grid-template-columns: 200px minmax(0, 1fr) 360px;
    gap: 12px;
  }
  .metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
  .modal-container.large {
    max-width: 92vw;
  }
}

/* ==========================================================================
   6. TABLETS PORTRAIT & MEDIUM SCREENS (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Sidebar Drawer conversion */
  .sidebar {
    width: min(290px, 85vw);
    transform: translateX(-100%);
    box-shadow: none;
    z-index: 200;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 35px rgba(0, 0, 0, 0.7);
  }

  .mobile-sidebar-close-btn {
    display: flex;
  }

  /* Main wrapper expands to 100% */
  .main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Hamburger visible */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--gold-light);
  }

  /* Hide desktop collapse toggle button */
  #btn-toggle-main-sidebar {
    display: none !important;
  }

  /* View container spacing */
  .view-container {
    padding: 16px 16px;
  }

  /* Menu Planning Stack on Tablets */
  .menu-planning-workbench {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 16px;
  }

  .panel-categories-sidebar {
    position: static;
    max-height: 220px;
    height: auto;
    overflow-y: auto;
  }

  .panel-selected-menu {
    position: static;
    max-height: none;
    height: auto;
  }

  /* Order Execution Popover responsive placement */
  .order-execution-popover {
    width: min(420px, 94vw);
    right: 0;
    left: auto;
  }
}

/* ==========================================================================
   7. PHABLETS & LARGE MOBILES (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Enable Mobile Bottom Navigation Bar */
  .mobile-bottom-nav {
    display: flex;
  }

  /* Give view-container padding so bottom nav doesn't cover content */
  .view-container {
    padding: 14px 12px calc(80px + var(--safe-bottom)) 12px;
  }

  /* Header adjustments */
  .top-header {
    height: 60px;
    padding: 0 12px;
    gap: 8px;
  }

  .header-title-area {
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .page-title {
    font-size: 1.05rem;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-title span {
    font-size: 0.82rem;
    display: none; /* Hide subtitle chunk in title on mobile */
  }

  .page-subtitle {
    display: none; /* Hide long subtitle to prevent header crowding */
  }

  .header-actions {
    gap: 6px;
    flex-shrink: 0;
  }

  .btn-icon-header {
    width: 36px;
    height: 36px;
  }

  /* Compact Order Execution Launcher Button */
  .btn-order-execution-launcher {
    padding: 6px 10px;
    font-size: 0.78rem;
    gap: 5px;
  }

  .btn-order-execution-launcher span {
    display: none; /* Hide text, icon launcher only on small header */
  }

  /* Language Switcher compact */
  .btn-lang-toggle {
    padding: 5px 8px;
    font-size: 0.75rem;
  }

  /* Popover becomes full bottom sheet on mobile */
  .order-execution-popover {
    position: fixed !important;
    top: auto !important;
    bottom: calc(62px + var(--safe-bottom)) !important;
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: 100vw !important;
    border-radius: var(--radius-xl) !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85) !important;
    z-index: 1050 !important;
  }

  .oe-actions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .oe-action-tile {
    padding: 10px 4px;
  }

  .oe-icon-box {
    width: 38px;
    height: 38px;
    margin-bottom: 4px;
  }

  .oe-tile-title {
    font-size: 0.72rem;
  }

  /* Metric Cards in 2 columns on mobile */
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    margin-bottom: 16px;
  }

  .metric-card {
    padding: 12px 14px;
    border-radius: var(--radius-md);
  }

  .metric-info h4 {
    font-size: 0.72rem;
    letter-spacing: 0.3px;
  }

  .metric-value {
    font-size: 1.45rem;
  }

  .metric-icon-box {
    width: 38px;
    height: 38px;
  }

  .metric-icon-box svg {
    width: 20px;
    height: 20px;
  }

  /* Calendar Toolbar & Grid on Mobile */
  .calendar-card {
    padding: 14px;
    border-radius: var(--radius-lg);
  }

  .calendar-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .calendar-nav-group {
    justify-content: space-between;
    width: 100%;
  }

  .calendar-view-toggle {
    width: 100%;
    justify-content: center;
  }

  .calendar-view-toggle button {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    font-size: 0.78rem;
  }

  .calendar-grid-header {
    font-size: 0.72rem;
  }

  .calendar-day-cell {
    min-height: 65px !important;
    padding: 4px !important;
  }

  .calendar-day-number {
    font-size: 0.75rem;
  }

  .calendar-event-pill {
    font-size: 0.65rem;
    padding: 2px 4px;
    margin-bottom: 2px;
  }

  /* Form Layouts: strictly 1 column on mobile */
  .form-grid,
  .form-grid.three,
  .form-grid.four {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .form-group.col-span-2,
  .form-group.col-span-3,
  .form-group.col-span-4 {
    grid-column: span 1 !important;
  }

  /* Modals on Mobile: full-screen sheet with scroll */
  .modal-overlay {
    padding: 10px;
    align-items: flex-end; /* Slide up as mobile sheet */
  }

  .modal-container {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0;
  }

  .modal-container.large,
  .modal-container.small {
    max-width: 100% !important;
  }

  .modal-header {
    padding: 14px 16px;
  }

  .modal-title {
    font-size: 1.05rem;
  }

  .modal-body {
    padding: 16px 14px;
    max-height: calc(92dvh - 125px);
    overflow-y: auto;
  }

  .modal-footer {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-footer button {
    flex: 1;
    justify-content: center;
    padding: 10px 14px;
  }

  /* Filter Bars & Toolbar Controls across all views */
  .filter-bar,
  .table-controls-bar,
  .directory-toolbar,
  .events-filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .filter-bar input,
  .filter-bar select,
  .filter-search-input {
    width: 100% !important;
    max-width: 100% !important;
  }

  .filter-bar-actions,
  .toolbar-actions-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .filter-bar-actions button,
  .toolbar-actions-right button {
    flex: 1;
    min-width: 130px;
    justify-content: center;
  }

  /* Table cards wrapper */
  .clean-data-table th,
  .clean-data-table td,
  .data-table th,
  .data-table td {
    padding: 10px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  /* Menu Planning Mobile Overhaul */
  .mobile-workbench-tabs {
    display: flex;
  }

  .mobile-workbench-floating-bar {
    display: flex;
  }

  .planning-header-bar {
    padding: 14px;
  }

  .planning-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .planning-actions-right {
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }

  .planning-actions-right button {
    flex: 1;
    min-width: 110px;
    padding: 7px 10px !important;
    font-size: 0.78rem !important;
    justify-content: center;
  }

  .brief-meta {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.78rem;
  }

  /* Tab-based visibility in mobile workbench */
  .menu-planning-workbench[data-mobile-tab="catalog"] .panel-selected-menu {
    display: none !important;
  }

  .menu-planning-workbench[data-mobile-tab="selected"] .panel-categories-sidebar,
  .menu-planning-workbench[data-mobile-tab="selected"] .panel-dishes-catalog {
    display: none !important;
  }

  .menu-planning-workbench[data-mobile-tab="selected"] .panel-selected-menu {
    display: flex !important;
    width: 100% !important;
  }

  /* Dishes Grid in Catalog */
  .dishes-catalog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .dish-catalog-card {
    padding: 10px;
  }

  .dish-card-img {
    height: 90px;
  }

  .dish-card-title {
    font-size: 0.82rem;
  }

  /* Order Booking Reports Step Tabs */
  .obr-step-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .obr-step-tab {
    white-space: nowrap !important;
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  /* Allocation and Labour Tables */
  .allocation-table-card,
  .labour-mgmt-card {
    padding: 12px;
  }

  /* Notification dropdown on mobile */
  .notifications-dropdown {
    width: calc(100vw - 24px);
    right: -40px;
    max-width: 360px;
  }
}

/* ==========================================================================
   8. EXTRA SMALL PHONES & COMPACT DEVICES (<= 480px / 320px - 390px)
   ========================================================================== */
@media (max-width: 480px) {
  /* Login card on compact phone */
  #login-view {
    padding: 16px;
  }

  #login-view > div {
    padding: 24px 18px !important;
    max-width: 100% !important;
  }

  /* Top Header compact */
  .top-header {
    height: 54px;
    padding: 0 10px;
  }

  .page-title {
    font-size: 0.96rem;
  }

  /* Metrics in 1 column on extremely small devices if needed */
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  .metric-card {
    padding: 10px 12px;
  }

  .metric-value {
    font-size: 1.3rem;
  }

  .metric-icon-box {
    display: none; /* Hide icon box on ultra compact to let value breathe */
  }

  /* Order Execution launcher on extra small: icon badge only */
  .btn-order-execution-launcher {
    padding: 6px 8px;
  }

  /* Dishes Grid on ultra compact */
  .dishes-catalog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .dish-card-img {
    height: 75px;
  }

  /* Calendar cells */
  .calendar-day-cell {
    min-height: 52px !important;
    padding: 2px !important;
  }

  .calendar-day-number {
    font-size: 0.7rem;
  }

  /* Mobile bottom nav on compact phones */
  .mobile-nav-btn span {
    font-size: 0.62rem;
  }

  .mobile-nav-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Action buttons full width stack in modal footers */
  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer button {
    width: 100%;
  }
}

/* ==========================================================================
   9. DESKTOPS & LARGE SCREENS (>= 1440px - 1920px+)
   ========================================================================== */
@media (min-width: 1440px) {
  .view-container {
    max-width: 1820px;
    margin: 0 auto;
    padding: 28px 36px;
  }

  .metrics-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }

  .menu-planning-workbench {
    grid-template-columns: 260px minmax(0, 1.4fr) 460px;
    gap: 22px;
  }

  .dishes-catalog-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1920px) {
  .view-container {
    max-width: 2200px;
  }

  .dishes-catalog-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}