html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  min-height: 100%;
}

/* Ensure full-height for html/body so flex sticky footer layout calculates correctly */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

body > header {
  position: sticky;
  top: 0;
  z-index: 1030;
  flex-shrink: 0;
}

body > .container {
  flex: 1 0 auto;
  padding-top: 1rem;
}

body > footer {
  flex-shrink: 0;
}

/* Unified date formatting styles */
.date-display {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-variant-numeric: tabular-nums;
}

.date-button {
  min-width: 120px;
  text-align: center;
}

.date-header {
  font-weight: 600;
}

.date-small {
  font-size: 0.875rem;
  color: #6c757d;
}

/* Date consistency for tables */
.table .formatted-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* No menu available message styling */
.alert-info {
  border-left: 4px solid #0dcaf0;
}

/* Active nav link highlight */
.navbar-nav .nav-link.active {
  font-weight: 600;
}

.alert-info .bi-info-circle-fill {
  color: #0dcaf0;
}

/* Empty state styling */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}

.empty-state .bi {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

/* Loading state for date elements */
.date-loading::before {
  content: "Loading...";
  color: #6c757d;
}

/* Responsive date display */
@media (max-width: 576px) {
  .date-button {
    min-width: 100px;
    font-size: 0.875rem;
  }

  .date-header {
    font-size: 1rem;
  }
}

/* Responsive pagination */
@media (max-width: 767.98px) {
  .pagination {
    --bs-pagination-padding-x: 0.5rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 0.8rem;
  }
}

/* Responsive tables on mobile */
@media (max-width: 767.98px) {
  .table th,
  .table td {
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
  }

  .table .btn-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
}

/* Allow dropdowns to overflow table container on mobile so menu is visible */
.table-responsive {
  overflow: visible; /* shows dropdowns instead of clipping them */
}

/* Ensure dropdown sits above other elements */
.table-responsive .dropdown-menu {
  position: absolute !important;
  z-index: 2000 !important;
}

/* Ordered menu cards - subtle styling */
.menu-card.ordered {
  position: relative;
}

.menu-card.ordered .card-body {
  position: relative;
}

/* Alternative 1: Small corner badge */
.ordered-indicator-corner {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background-color: #198754;
  border-radius: 50%;
  border: 2px solid white;
}

/* Alternative 2: Subtle left border */
.menu-card.ordered-border {
  border-left: 4px solid #198754 !important;
}

/* Alternative 3: Faded appearance */
.menu-card.ordered-faded {
  opacity: 0.7;
  filter: grayscale(0.2);
}

.menu-card.ordered-faded:hover {
  opacity: 0.7;
}

/* Alternative 4: No visual indication (clean) */
.menu-card.ordered-clean {
  /* No special styling - just disable interaction */
  pointer-events: none;
}

.menu-card.ordered-clean .card-body {
  color: #6c757d;
}

/* Alternative 5: Strikethrough text */
.menu-card.ordered-strikethrough .fw-semibold {
  text-decoration: line-through;
  color: #6c757d;
}

/* Ordered menu cards - new badge style for better visibility */
.menu-card.ordered-badge {
    position: relative;
    border: 2px solid #198754 !important;
    background-color: #f8fff9 !important;
    box-shadow: 0 2px 8px rgba(25,135,84,0.15) !important;
}

.menu-card.ordered-badge:hover {
    border-color: #198754 !important;
    background-color: #f8fff9 !important;
    transform: none;
    cursor: default;
}

.menu-card.ordered-badge .card-body {
    background-color: transparent;
    position: relative;
}


/* Ordered status badge - no longer uses absolute positioning;
   rendered inline by createMenuCard as a Bootstrap badge. */

/* Action menu (burger) styles used across index tables */
.action-menu-btn {
    background: #f1f3f5;
    border-radius: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(0,0,0,0.08);
    color: #495057;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
}
.action-menu-btn:focus { box-shadow: none; }
.action-dots {
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}
.action-dropdown-menu {
    min-width: 180px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(25, 37, 47, 0.12);
    overflow: hidden;
}
.action-dropdown-menu .dropdown-item {
    padding: 12px 16px;
    font-size: 15px;
    color: #212529;
}
.action-dropdown-menu .dropdown-item i { font-size: 1.05rem; }
.action-dropdown-menu .dropdown-divider { margin: 0; }
.action-dropdown-menu .text-danger { color: #d9534f !important; }
/* Responsive: make tab lists horizontally scrollable on small screens
   Use by adding `nav-tabs-responsive` to the tab UL (e.g. `<ul class="nav nav-tabs nav-tabs-responsive">`) */
@media (max-width: 575.98px) {
  .nav-tabs-responsive {
    display: flex;
    flex-wrap: nowrap;                 /* keep in one row */
    overflow-x: auto;                  /* allow horizontal scroll */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    padding-bottom: 0.25rem;
  }

  .nav-tabs-responsive .nav-item {
    flex: 0 0 auto;                    /* don't stretch */
  }

  .nav-tabs-responsive .nav-link {
    white-space: nowrap;               /* prevent wrapping */
    padding: 0.5rem 1rem;              /* touch target */
  }

  /* Small scrollbar styling (non-critical) */
  .nav-tabs-responsive::-webkit-scrollbar { height: 6px; }
  .nav-tabs-responsive::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 3px; }
}

/* Додати в глобальний css — дозволяє flex-елементам правильно зменшуватись */
.form-row > .col,
.row > .col,
.form-group,
.input-group,
.select-container { 
  min-width: 0;
}