/* ==========================================================================
   Site Theme — single global stylesheet for the whole admin/restaurant app.
   Replaces style.css + admin-theme.css. Loaded once by base.html; applies
   to every page automatically since the tokens below override Bootstrap
   defaults (buttons, cards, badges, tables, tabs, list-group, modals, nav).
   Page-specific rules (order cards, stat cards, menu items, RTL, etc.) live
   in the later sections and were carried over unchanged from style.css.
   ========================================================================== */

:root{
  --at-primary:#2563eb;
  --at-primary-dark:#1d4ed8;
  --at-bg:#f6f7f9;
  --at-card-bg:#ffffff;
  --at-border:#e5e7eb;
  --at-text:#111827;
  --at-text-muted:#6b7280;
  --at-radius:0.85rem;
  --at-radius-sm:0.5rem;

  --at-role-admin-bg:#fef3c7;
  --at-role-admin-text:#92400e;
  --at-role-manager-bg:#dcfce7;
  --at-role-manager-text:#15803d;
  --at-role-user-bg:#e0e7ff;
  --at-role-user-text:#3730a3;

  --at-status-active-bg:#dcfce7;
  --at-status-active-text:#15803d;
  --at-status-inactive-bg:#f1f5f9;
  --at-status-inactive-text:#64748b;

  --bs-primary:var(--at-primary);
  --bs-primary-rgb:37,99,235;
}

body{
  background:var(--at-bg);
  color:var(--at-text);
  padding-bottom:40px;
}

/* ---------- Top navbar ---------- */
.navbar.bg-dark{
  background:#14161f !important;
}

/* ---------- Bootstrap component re-skin (applies site-wide) ---------- */
.card{
  background:var(--at-card-bg);
  border:1px solid var(--at-border);
  border-radius:var(--at-radius);
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}

.card-header{
  background:#fafbfc;
  border-bottom:1px solid var(--at-border);
}

.card-footer{
  background:#fafbfc;
  border-top:1px solid var(--at-border);
}

.btn-primary{
  background:var(--at-primary);
  border-color:var(--at-primary);
}
.btn-primary:hover,
.btn-primary:focus{
  background:var(--at-primary-dark);
  border-color:var(--at-primary-dark);
}
.btn-outline-primary{
  color:var(--at-primary);
  border-color:var(--at-primary);
}
.btn-outline-primary:hover{
  background:var(--at-primary);
  border-color:var(--at-primary);
}

.nav-tabs{
  border-bottom:1px solid var(--at-border);
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav-tabs::-webkit-scrollbar{ display:none; }
.nav-tabs .nav-link{
  flex:0 0 auto;
  white-space:nowrap;
  color:var(--at-text-muted);
  font-weight:500;
  border:none;
  border-bottom:2px solid transparent;
  border-radius:0;
}
.nav-tabs .nav-link:hover{
  color:var(--at-text);
  border-color:var(--at-border);
}
.nav-tabs .nav-link.active{
  color:var(--at-primary);
  background:transparent;
  border-color:var(--at-primary);
}

.list-group-item{
  border-color:var(--at-border);
}
.list-group-item-action.active{
  background:var(--at-primary);
  border-color:var(--at-primary);
  color:#fff;
}

.table{
  color:var(--at-text);
}
.table thead th{
  color:var(--at-text-muted);
  font-size:0.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.02em;
  border-bottom:1px solid var(--at-border);
}
.table > :not(caption) > * > *{
  border-bottom-color:var(--at-border);
}

.modal-content{
  border-radius:var(--at-radius);
  border:none;
}
.modal-header{
  border-bottom:1px solid var(--at-border);
}
.modal-footer{
  border-top:1px solid var(--at-border);
}

.badge.bg-purple{ background:#7c3aed !important; color:#fff; }

.pagination{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
.pagination::-webkit-scrollbar{ display:none; }
.page-link{
  color:var(--at-primary);
}
.page-item.active .page-link{
  background:var(--at-primary);
  border-color:var(--at-primary);
}

/* ---------- Generic page header (used by every page's top bar) ---------- */
.at-page-header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.75rem;
  margin-bottom:1.25rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--at-border);
}
.at-page-header h2,
.at-page-header h4{
  margin:0 0 0.15rem 0;
  font-weight:700;
}
.at-page-header h5{
  color:var(--at-text-muted);
  font-weight:500;
}
.at-page-header p{
  margin:0;
  color:var(--at-text-muted);
  font-size:0.9rem;
}

/* ---------- App shell / sidebar (Users admin screen, editor tabs) ---------- */
.at-shell{
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
}

.at-sidebar,
.at-editor-sidebar .editor-tabs{
  background:var(--at-card-bg);
  border:1px solid var(--at-border);
  border-radius:var(--at-radius);
  padding:0.75rem;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

.at-sidebar{
  width:240px;
  flex:0 0 240px;
  position:sticky;
  top:1rem;
}

.at-sidebar .at-nav-link{
  display:flex;
  align-items:center;
  gap:0.65rem;
  padding:0.65rem 0.85rem;
  border-radius:var(--at-radius-sm);
  color:var(--at-text);
  text-decoration:none;
  font-weight:500;
  font-size:0.925rem;
  transition:background 0.15s ease, color 0.15s ease;
}

.at-sidebar .at-nav-link i,
.at-sidebar .at-nav-link .at-nav-icon{
  width:1.1rem;
  text-align:center;
  color:var(--at-text-muted);
  flex-shrink:0;
}

.at-sidebar .at-nav-link:hover{
  background:#f1f5f9;
}

.at-sidebar .at-nav-link.active{
  background:var(--at-primary);
  color:#fff;
}

.at-sidebar .at-nav-link.active i,
.at-sidebar .at-nav-link.active .at-nav-icon{
  color:#fff;
}

.at-sidebar-footer{
  margin-top:auto;
  padding-top:0.75rem;
  border-top:1px solid var(--at-border);
  font-size:0.75rem;
  color:var(--at-text-muted);
}

.at-sidebar-footer .at-brand{
  display:flex;
  align-items:center;
  gap:0.4rem;
  font-weight:600;
  color:var(--at-text);
  margin-bottom:0.35rem;
}

.at-sidebar-footer .at-brand-dot{
  width:0.55rem;
  height:0.55rem;
  border-radius:50%;
  background:var(--at-primary);
  flex-shrink:0;
}

.at-main{
  flex:1 1 auto;
  min-width:0;
}

/* Restaurant editor vertical tab list — restyled to match .at-sidebar without
   touching the markup (class stays "list-group editor-tabs"). */
.editor-tabs{
  border:1px solid var(--at-border);
  border-radius:var(--at-radius);
  overflow:hidden;
  background:var(--at-card-bg);
}
.editor-tabs .list-group-item{
  border:none;
  border-bottom:1px solid var(--at-border);
  padding:0.65rem 0.85rem;
  font-weight:500;
  font-size:0.925rem;
  color:var(--at-text);
}
.editor-tabs .list-group-item:last-child{ border-bottom:none; }
.editor-tabs .list-group-item:hover{ background:#f1f5f9; }
.editor-tabs .list-group-item.active{
  background:var(--at-primary);
  border-color:var(--at-primary);
  color:#fff;
}
.editor-tabs .list-group-item.text-danger.active{ color:#fff !important; }

@media (max-width: 767.98px) {
  .editor-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }
  .editor-tabs .list-group-item {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    border-radius: 0 !important;
    border-bottom: none !important;
  }
}

/* ---------- Cards / tables (Users admin screen) ---------- */
.at-filter-bar{
  background:var(--at-card-bg);
  border:1px solid var(--at-border);
  border-radius:var(--at-radius);
  padding:0.9rem;
  margin-bottom:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.65rem;
  align-items:flex-end;
}

.at-filter-bar .at-filter-field{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

.at-filter-bar label{
  font-size:0.75rem;
  color:var(--at-text-muted);
  font-weight:600;
}

.at-table-card{
  background:var(--at-card-bg);
  border:1px solid var(--at-border);
  border-radius:var(--at-radius);
  overflow:hidden;
}

table.at-table{
  width:100%;
  margin:0;
  border-collapse:collapse;
}

table.at-table th{
  background:#fafbfc;
  padding:0.75rem 1rem;
  white-space:nowrap;
}

table.at-table td{
  padding:0.85rem 1rem;
  vertical-align:middle;
  font-size:0.9rem;
}

table.at-table tr.at-row:hover{ background:#fafbfc; }
table.at-table tr.at-row-detail{ background:#fafbfc; }
table.at-table tr.at-row-detail > td{ padding:1rem 1.25rem 1.25rem 1rem; }

/* ---------- Avatars ---------- */
.at-avatar{
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.85rem;
  color:#fff;
  flex-shrink:0;
}

.at-avatar-lg{ width:3rem; height:3rem; font-size:1.05rem; }

.at-user-cell{ display:flex; align-items:center; gap:0.75rem; }
.at-user-cell .at-user-meta strong{ display:flex; align-items:center; gap:0.45rem; font-size:0.9rem; }
.at-user-cell .at-user-meta .at-user-email{ color:var(--at-text-muted); font-size:0.8rem; }

/* ---------- Badges (Users admin screen role/status pills) ---------- */
.at-badge{
  display:inline-flex;
  align-items:center;
  padding:0.2rem 0.6rem;
  border-radius:999px;
  font-size:0.72rem;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
}

.at-badge-admin{ background:var(--at-role-admin-bg); color:var(--at-role-admin-text); }
.at-badge-manager{ background:var(--at-role-manager-bg); color:var(--at-role-manager-text); }
.at-badge-user{ background:var(--at-role-user-bg); color:var(--at-role-user-text); }
.at-badge-active{ background:var(--at-status-active-bg); color:var(--at-status-active-text); }
.at-badge-inactive{ background:var(--at-status-inactive-bg); color:var(--at-status-inactive-text); }

/* ---------- Icon buttons (view/edit/delete) ---------- */
.at-icon-btn{
  width:2.05rem;
  height:2.05rem;
  border-radius:var(--at-radius-sm);
  border:1px solid var(--at-border);
  background:#fff;
  color:var(--at-text-muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.at-icon-btn:hover{ background:#f1f5f9; color:var(--at-text); }
.at-icon-btn.at-icon-btn-danger:hover{ background:#fef2f2; color:#dc2626; border-color:#fecaca; }

.at-row-toggle{
  border:none;
  background:transparent;
  color:var(--at-text-muted);
  transition:transform 0.15s ease;
  width:1.75rem;
  height:1.75rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--at-radius-sm);
}

.at-row-toggle:hover{ background:#f1f5f9; }
.at-row-toggle.expanded{ transform:rotate(90deg); }

/* ---------- Detail panel (expanded row) ---------- */
.at-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width: 767px){ .at-detail-grid{ grid-template-columns:1fr; } }

.at-detail-block h6{
  font-size:0.78rem;
  font-weight:700;
  color:var(--at-text-muted);
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin-bottom:0.5rem;
}

.at-chip-list{ display:flex; flex-wrap:wrap; gap:0.4rem; }

.at-chip{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  background:#fff;
  border:1px solid var(--at-border);
  border-radius:999px;
  padding:0.3rem 0.7rem 0.3rem 0.4rem;
  font-size:0.82rem;
}

.at-managed-user{
  display:flex;
  align-items:center;
  gap:0.6rem;
  background:#fff;
  border:1px solid var(--at-border);
  border-radius:var(--at-radius-sm);
  padding:0.5rem 0.65rem;
  margin-bottom:0.4rem;
}
.at-managed-user .at-avatar{ width:1.9rem; height:1.9rem; font-size:0.7rem; }

/* ---------- Modal sub-sections ---------- */
.at-modal .modal-body{ padding:1.4rem; }
.at-section-title{
  font-weight:700;
  font-size:0.95rem;
  margin-bottom:0.85rem;
  padding-bottom:0.6rem;
  border-bottom:1px solid var(--at-border);
}

.at-modal-user-header{ display:flex; align-items:center; gap:0.85rem; margin-bottom:1.4rem; }
.at-modal-user-header .at-user-title{ display:flex; align-items:center; gap:0.5rem; font-weight:700; }
.at-hint{ font-size:0.78rem; color:var(--at-text-muted); margin-top:0.3rem; }

/* ---------- Role picker ---------- */
.at-role-picker{ position:relative; }

.at-role-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
  padding:0.55rem 0.85rem;
  border:1px solid #ced4da;
  border-radius:var(--at-radius-sm);
  background:#fff;
  cursor:pointer;
  font-size:0.9rem;
}

.at-role-trigger:focus,
.at-role-trigger.open{
  border-color:var(--at-primary);
  box-shadow:0 0 0 0.2rem rgba(37,99,235,0.15);
}

.at-role-option-label{ display:flex; align-items:center; gap:0.55rem; }

.at-role-icon{
  width:1.9rem;
  height:1.9rem;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:0.85rem;
}

.at-role-icon-admin{ background:var(--at-role-admin-bg); color:var(--at-role-admin-text); }
.at-role-icon-manager{ background:var(--at-role-manager-bg); color:var(--at-role-manager-text); }
.at-role-icon-user{ background:var(--at-role-user-bg); color:var(--at-role-user-text); }

.at-role-menu{
  position:absolute;
  z-index:20;
  top:calc(100% + 0.35rem);
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--at-border);
  border-radius:var(--at-radius-sm);
  box-shadow:0 12px 28px rgba(15,23,42,0.12);
  padding:0.35rem;
  display:none;
}

.at-role-menu.open{ display:block; }

.at-role-item{
  display:flex;
  align-items:center;
  gap:0.65rem;
  padding:0.55rem 0.6rem;
  border-radius:var(--at-radius-sm);
  cursor:pointer;
}

.at-role-item:hover,
.at-role-item.active{ background:#eff4ff; }
.at-role-item .at-role-copy strong{ display:block; font-size:0.88rem; }
.at-role-item .at-role-copy span{ font-size:0.76rem; color:var(--at-text-muted); }

/* ---------- Shuttle (restaurant assignment) ---------- */
.at-shuttle{ display:grid; grid-template-columns:1fr auto 1fr; gap:0.75rem; align-items:center; }
@media (max-width: 640px){
  .at-shuttle{ grid-template-columns:1fr; }
  .at-shuttle-controls{ flex-direction:row; justify-content:center; }
}

.at-shuttle-panel{
  border:1px solid var(--at-border);
  border-radius:var(--at-radius-sm);
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.at-shuttle-panel-header{ padding:0.5rem 0.7rem; border-bottom:1px solid var(--at-border); }

.at-shuttle-search{
  width:100%;
  border:1px solid var(--at-border);
  border-radius:var(--at-radius-sm);
  padding:0.35rem 0.6rem;
  font-size:0.85rem;
}

.at-shuttle-list{ list-style:none; margin:0; padding:0.35rem; height:210px; overflow-y:auto; }

.at-shuttle-list .at-shuttle-item{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.4rem 0.5rem;
  border-radius:var(--at-radius-sm);
  cursor:pointer;
  font-size:0.87rem;
}

.at-shuttle-list .at-shuttle-item:hover{ background:#f1f5f9; }
.at-shuttle-list .at-shuttle-item.selected{ background:#eff4ff; }

.at-shuttle-controls{ display:flex; flex-direction:column; gap:0.4rem; }

.at-shuttle-empty{
  height:210px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--at-text-muted);
  font-size:0.85rem;
  gap:0.5rem;
}

.at-shuttle-selected-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.4rem 0.5rem;
  border-radius:var(--at-radius-sm);
  font-size:0.87rem;
}

.at-shuttle-selected-item:hover{ background:#f8fafc; }
.at-shuttle-selected-item button{ border:none; background:transparent; color:var(--at-text-muted); line-height:1; }
.at-shuttle-selected-item button:hover{ color:#dc2626; }

/* ---------- Activity log ---------- */
.at-activity-toolbar{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:1rem; }
.at-activity-toolbar > *{ flex:1 1 160px; }
.at-activity-toolbar .at-btn-fixed{ flex:0 0 auto; }

/* From/To date-label pairs stay together at a fixed width instead of a lone
   date input stretching to fill the whole row in the activity toolbar. */
.at-activity-toolbar .um-activity-date-group{
  display:flex;
  align-items:center;
  gap:0.4rem;
  flex:0 1 auto;
}
.um-activity-date-group input[type=date]{ width:150px; flex:0 0 150px; }

.at-details-pill{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  background:#f1f5f9;
  border-radius:var(--at-radius-sm);
  padding:0.25rem 0.5rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:0.76rem;
  color:var(--at-text-muted);
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:default;
}

/* ---------- Pagination (Users admin screen variant) ---------- */
.at-pagination-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  padding:0.9rem 1rem;
  color:var(--at-text-muted);
  font-size:0.85rem;
}

.at-pagination{ display:flex; gap:0.3rem; }

.at-pagination button{
  min-width:2.1rem;
  height:2.1rem;
  border:1px solid var(--at-border);
  background:#fff;
  border-radius:var(--at-radius-sm);
  font-size:0.85rem;
  color:var(--at-text);
}

.at-pagination button.active{ background:var(--at-primary); border-color:var(--at-primary); color:#fff; }
.at-pagination button:disabled{ opacity:0.4; }

/* ---------- Restaurant grid cards (Restaurants tab) ---------- */
.at-restaurant-card{ border:1px solid var(--at-border); border-radius:var(--at-radius); overflow:hidden; }
.at-restaurant-card .card-body{ padding:1.1rem; }
.at-restaurant-card .card-footer{ background:#fafbfc; border-top:1px solid var(--at-border); }
/* ---------- Restaurant card action buttons (light-tint pill style) ---------- */
.at-action-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;
  font-weight:600;
  border:1px solid transparent;
  border-radius:10px;
}
.at-action-btn i{ font-size:0.95rem; }

.at-action-orders{ background:#eff6ff; color:#1d4ed8; border-color:#dbeafe; }
.at-action-orders:hover{ background:#dbeafe; }

.at-action-chatlogs{ background:#eef2ff; color:#4338ca; border-color:#e0e7ff; }
.at-action-chatlogs:hover{ background:#e0e7ff; }

.at-action-analytics{ background:#f0fdf4; color:#15803d; border-color:#dcfce7; }
.at-action-analytics:hover{ background:#dcfce7; }

.at-action-blocked{ background:#fff7ed; color:#c2410c; border-color:#ffedd5; }
.at-action-blocked:hover{ background:#ffedd5; }

.at-action-edit{ background:#faf5ff; color:#7e22ce; border-color:#f3e8ff; }
.at-action-edit:hover{ background:#f3e8ff; }

.at-action-delete{ background:#fef2f2; color:#b91c1c; border-color:#fee2e2; }
.at-action-delete:hover{ background:#fee2e2; }

/* ---------- Chatbot toggle button — light pill, not a solid CTA ---------- */
.chatbot-toggle-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  font-weight:600;
  border-radius:10px;
  padding:0.6rem 1rem;
  margin-top:auto;
}
.chatbot-toggle-btn.state-on{
  background:#f0fdf4;
  color:#15803d;
  border:1px solid #dcfce7;
}
.chatbot-toggle-btn.state-on:hover{ background:#dcfce7; }
.chatbot-toggle-btn.state-off{
  background:#fef2f2;
  color:#b91c1c;
  border:1px solid #fee2e2;
}
.chatbot-toggle-btn.state-off:hover{ background:#fee2e2; }

.chatbot-toggle-btn .status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}

/* ==========================================================================
   Carried over from the original style.css — page-specific rules that don't
   depend on the theme tokens above (RTL support, order/monitoring/menu/editor
   page layouts). Left functionally identical; colors flow from the tokens
   and component overrides above wherever the original used bg/border colors
   that Bootstrap also emits (e.g. .card, .badge).
   ========================================================================== */

/* RTL Support */
[dir="rtl"] .ms-auto { margin-left: unset !important; margin-right: auto !important; }
[dir="rtl"] .me-3 { margin-right: unset !important; margin-left: 1rem !important; }
[dir="rtl"] .me-2 { margin-right: unset !important; margin-left: 0.5rem !important; }
[dir="rtl"] .me-1 { margin-right: unset !important; margin-left: 0.25rem !important; }
[dir="rtl"] .ms-1 { margin-left: unset !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-left: unset !important; margin-right: 0.5rem !important; }
[dir="rtl"] .text-end { text-align: left !important; }
[dir="rtl"] .text-start { text-align: right !important; }
@media (min-width: 992px) {
  [dir="rtl"] .navbar-nav { flex-direction: row-reverse; }
}
[dir="rtl"] .list-group { text-align: right; }
[dir="rtl"] .order-card { border-left: none; border-right: 5px solid #ccc; }
[dir="rtl"] .order-card.status-pending { border-right-color: #ffc107; border-left-color: transparent; }
[dir="rtl"] .order-card.status-in-progress { border-right-color: #0dcaf0; border-left-color: transparent; }
[dir="rtl"] .order-card.status-done { border-right-color: #198754; border-left-color: transparent; }
[dir="rtl"] .order-card.status-cant-do { border-right-color: #dc3545; border-left-color: transparent; }
[dir="rtl"] .order-card.status-out-for-delivery { border-right-color: #6f42c1; border-left-color: transparent; }
[dir="rtl"] .order-card.status-ready-for-pickup { border-right-color: #20c997; border-left-color: transparent; }
[dir="rtl"] .order-card.status-scheduled { border-right-color: #fd7e14; border-left-color: transparent; }
[dir="rtl"] .stat-card.highlight { border-left: none; border-right: 4px solid #0d6efd; }
[dir="rtl"] .stat-card.success { border-left: none; border-right: 4px solid #198754; }
[dir="rtl"] .stat-card.warning { border-left: none; border-right: 4px solid #ffc107; }
[dir="rtl"] .stat-card.info { border-left: none; border-right: 4px solid #0dcaf0; }
[dir="rtl"] .chat-bubble.user { margin-left: unset; margin-right: auto; border-bottom-right-radius: 12px; border-bottom-left-radius: 4px; }
[dir="rtl"] .chat-bubble.assistant { margin-right: unset; margin-left: auto; border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; }
/* RTL: mirror the modal close (X) button to the left; the LTR Bootstrap build
   pins it right via physical margin-left:auto, so override it explicitly. */
[dir="rtl"] .modal-header .btn-close { margin: -0.5rem auto -0.5rem -0.5rem !important; }
[dir="rtl"] .flex-shrink-0 { margin-left: unset; }
[dir="rtl"] .overflow-hidden { margin-right: unset; margin-left: 0.5rem; }

.channel-card .card-body > .d-flex {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.channel-card .channel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.channel-card .channel-actions .btn {
  margin-right: 0 !important;
}
@media (max-width: 575.98px) {
  .channel-card .card-body > .d-flex {
    flex-direction: column;
    align-items: stretch;
  }
  .channel-card .channel-actions {
    width: 100%;
  }
  .channel-card .channel-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Orders page — mobile */
.orders-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

@media (max-width: 480px) {
  .modal-when-strip { flex-direction: column; gap: 10px; }
  .modal-when-col-time { border-left: none !important; padding-left: 0 !important; margin-left: 0 !important; }
}

/* Menu items grid — defensive fix for very narrow phones */
.menu-items-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

@media (max-width: 575.98px) {
  .stat-card .stat-value { font-size: 1.4rem; }
  .chat-bubble { max-width: 90%; }
}

/* Menu group tabs */
.menu-group-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.menu-group-tab {
  padding: 0.4rem 1rem;
  border-radius: 20px;
  border: 1px solid var(--at-border);
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.menu-group-tab:hover { background: #e9ecef; }
.menu-group-tab.active { background: var(--at-primary); color: #fff; border-color: var(--at-primary); }
.menu-group-tab .badge { font-size: 0.7rem; }

/* Chatbot status badges on restaurant selection cards */
.badge.chatbot-on { background: #198754; color: #fff; font-size: 0.75rem; }
.badge.chatbot-off { background: #dc3545; color: #fff; font-size: 0.75rem; }
.badge.chatbot-locked { background: #6c757d; color: #fff; font-size: 0.75rem; }

/* Menu item cards */
.menu-item-card {
  border-radius: 8px;
  transition: all 0.2s;
}
.menu-item-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.menu-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
}

/* Sold-out item cards */
.sold-out-card {
  opacity: 0.75;
  border-color: var(--at-border) !important;
  background: #f8f9fa;
}
.sold-out-img {
  filter: grayscale(80%);
}

/* Loading spinner */
.loading-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 0;
}
.spinner-border {
  width: 3rem;
  height: 3rem;
}

/* Orders page — order cards */
.order-card {
  border-left: 5px solid #ccc;
  transition: box-shadow 0.15s ease;
}
.order-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.order-card.status-pending { border-left-color: #ffc107; }
.order-card.status-in-progress { border-left-color: #0dcaf0; }
.order-card.status-done { border-left-color: #198754; }
.order-card.status-cant-do { border-left-color: #dc3545; }
.order-card.status-out-for-delivery { border-left-color: #6f42c1; }
.order-card.status-ready-for-pickup { border-left-color: #20c997; }
.order-card.status-scheduled { border-left-color: #fd7e14; }
.order-card.status-scheduled.due-today { border-left-color: #dc3545; }

.order-card .card-body {
  padding: 0.9rem 1rem;
}
.order-card .order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.order-card .order-id { font-weight: 700; font-size: 0.95rem; }
.order-card .order-time { font-size: 0.8rem; color: var(--at-text-muted); }
.order-card .order-customer { font-size: 0.9rem; color: var(--at-text); }
.order-card .order-items-preview {
  margin: 0.5rem 0;
  font-size: 0.85rem;
}
.order-card .order-item-row {
  display: flex;
  justify-content: space-between;
  padding: 0.15rem 0;
}
.order-card .order-item-addition {
  display: block;
  font-size: 0.78rem;
  color: var(--at-text-muted);
  margin-left: 0.75rem;
}
.order-card .order-item-comment {
  display: block;
  font-size: 0.78rem;
  color: var(--at-text-muted);
  margin-left: 0.75rem;
}
.order-card .order-items-more {
  font-size: 0.8rem;
  color: var(--at-primary);
  cursor: pointer;
}
.order-card .order-items-more:hover { text-decoration: underline; }

.order-card .order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--at-border);
}
.order-card .order-total { font-weight: 700; color: #198754; }
.order-card .delivery-info {
  font-size: 0.82rem;
  color: var(--at-text-muted);
  margin: 0.3rem 0;
}

.order-card .order-actions {
  margin-top: 0.6rem;
}
.order-card .order-actions .btn { font-size: 0.85rem; }

/* Prominent pickup/delivery indicator near the top of the card */
.fulfillment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0.2rem 0;
}
.fulfillment-badge.fulfillment-pickup { color: var(--at-primary); }
.fulfillment-badge.fulfillment-delivery { color: #6f42c1; }
.fulfillment-badge i { font-size: 1rem; }

.modal-fulfillment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}
.modal-fulfillment-badge i { font-size: 1.05rem; }

.prep-time-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.prep-time-row .chip {
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  border: 1px solid var(--at-border);
  background: #fff;
  cursor: pointer;
  font-size: 0.82rem;
}
.prep-time-row .chip.active {
  background: var(--at-primary);
  color: #fff;
  border-color: var(--at-primary);
}
.prep-time-row .custom-input {
  width: 3.2rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-sm);
  font-size: 0.82rem;
}

.empty-tab {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--at-text-muted);
  font-size: 0.95rem;
}

.scheduled-due-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #c2410c;
  border-radius: var(--at-radius-sm);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.scheduled-due-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  grid-column: 1 / -1;
}
.scheduled-due-divider .line {
  flex: 1;
  height: 1px;
  background: #fca5a5;
}
.scheduled-due-divider .label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #dc2626;
  letter-spacing: 0.05em;
}

.orders-grid,
.menu-items-grid {
  display: grid;
  gap: 1rem;
}

/* Monitoring page — stat cards */
.stat-card {
  border-left: 4px solid var(--at-border);
}
.stat-card .stat-value {
  font-size: 1.7rem;
  font-weight: 700;
}
.stat-card .stat-label {
  font-size: 0.8rem;
  color: var(--at-text-muted);
}
.stat-card.highlight { border-left-color: var(--at-primary); }
.stat-card.success { border-left-color: #198754; }
.stat-card.warning { border-left-color: #ffc107; }
.stat-card.info { border-left-color: #0dcaf0; }

.payment-badge-pending { background: #ffc107; color: #000; }
.payment-badge-due { background: #fd7e14; color: #fff; }
.payment-badge-paid { background: #198754; color: #fff; }
.payment-badge-overdue { background: #dc3545; color: #fff; }
.payment-badge-waived { background: #6c757d; color: #fff; }

/* Monitoring page — chat log conversation bubbles */
.chat-bubble {
  max-width: 75%;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}
.chat-bubble.user {
  background: #e3f2fd;
  color: var(--at-text);
  margin-right: auto;
  border-bottom-left-radius: 4px;
}
.chat-bubble.assistant {
  background: #f1f5f9;
  color: var(--at-text);
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.chat-bubble .chat-time {
  font-size: 0.68rem;
  opacity: 0.7;
  margin-top: 0.2rem;
}

/* ==========================================================================
   Responsive / mobile-friendly tweaks.
   Makes the fixed desktop shell (sidebar + main) collapse gracefully on
   phones/tablets and lets wide data tables scroll horizontally instead of
   crushing or clipping their columns. Kept at the end so it overrides the
   desktop rules above. Bootstrap already handles the navbar collapse, modals,
   grids and the editor-tabs horizontal strip, so we only patch the gaps.
   ========================================================================== */

/* Keep page-header action buttons (Back / Orders / Monitoring / Add …) tidy
   and wrapping instead of overflowing on narrow screens. */
.at-page-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  align-items:center;
}

/* Wide data tables (Users, Activity Log, Proxies) scroll horizontally on
   tablets/phones instead of getting squashed by the fixed column widths. */
@media (max-width: 991.98px){
  .at-table-card{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .at-table-card table.at-table{
    min-width:720px;
  }
}

/* App shell (Admin dashboard, Manager "Select restaurant"): stack the fixed
   sidebar above the content and turn it into a swipeable horizontal tab bar
   (mirrors how the restaurant-editor tabs already behave on mobile). */
@media (max-width: 991.98px){
  .at-shell{
    flex-direction:column;
    align-items:stretch;
  }
  .at-main{
    width:100%;
  }
  .at-sidebar{
    width:100%;
    flex:none;
    position:static;               /* stop sticky in the stacked layout */
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0.5rem;
    margin-bottom:1rem;
  }
  .at-sidebar::-webkit-scrollbar{ display:none; }
  .at-sidebar .at-nav-link{
    flex:0 0 auto;
    white-space:nowrap;
    text-align:center;
  }
  /* The version footer doesn't fit in the horizontal tab strip; hide it on
     small screens (inline style set by JS is overridden via !important). */
  .at-sidebar .at-sidebar-footer{ display:none !important; }
}


/* Users manager — permissions picker: indent dependent permissions so a
   "Manage X" row reads as dependent on its "View X" base row above it. */
.um-perm-dependent{
  margin-left:1.5rem;
  padding-left:0.75rem;
  border-left:2px solid var(--at-border, #e9ecef);
}
.um-perm-arrow{
  margin-right:0.3rem;
  color:#adb5bd;
  font-weight:600;
}
.um-perm-requires{
  color:#adb5bd;
  font-size:.75rem;
  margin:2px 0 0 1.15rem;
  line-height:1.2;
}
/* Read-only delivery areas (view permission only) — gray out the fields. */
.delivery-area-editor-grid .dae-readonly{
  background-color:#f1f3f5 !important;
  color:#6c757d;
  cursor:default;
}
.delivery-area-editor-grid .dae-readonly::placeholder{ color:#adb5bd; }