/* ==========================================================================
   FoodTown – Master Stylesheet
   --------------------------------------------------------------------------
   1. Design tokens (CSS variables)   5. Sidebar
   2. Theme variants (data-*)         6. Topbar
   3. Base                            7. Content, cards, tables
   4. Layout shell                    8. Customizer + responsive
   RTL note: only logical properties (inline-start / inline-end) are used,
   so the same CSS works for both LTR and RTL without overrides.
   ========================================================================== */

/* 1. DESIGN TOKENS ------------------------------------------------------- */
:root {
  --font-family: "Inter", sans-serif;
  --primary: #f97316;
  --primary-rgb: 249, 115, 22;
  --sidebar-bg: #111827;
  --sidebar-color: #9ca3af;
  --sidebar-active: #ffffff;
  --topbar-bg: #ffffff;
  --topbar-color: inherit;
  --page-bg: #f6f7f9;
  --card-bg: #ffffff;
  --border-color: #e8eaee;
  --radius: 10px;
  --sidebar-w: 260px;
  --sidebar-w-mini: 76px;
  --topbar-h: 64px;
}

/* 2. THEME VARIANTS ------------------------------------------------------ */
[data-bs-theme="dark"] {
  --page-bg: #0f1420;
  --card-bg: #171d2b;
  --border-color: #262e40;
  --topbar-bg: #171d2b;
}
html[data-radius="sharp"]   { --radius: 2px; }
html[data-radius="medium"]  { --radius: 10px; }
html[data-radius="rounded"] { --radius: 18px; }

html[data-sidebar="light"] {
  --sidebar-bg: #ffffff;
  --sidebar-color: #6b7280;
  --sidebar-active: var(--primary);
}
html[data-topbar="dark"]        { --topbar-bg: #111827; --topbar-color: #f3f4f6; }
html[data-topbar="transparent"] { --topbar-bg: transparent; }

/* 3. BASE ---------------------------------------------------------------- */
body {
  font-family: var(--font-family);
  background: var(--page-bg);
  font-size: .9rem;
}
a { text-decoration: none; }
.text-primary { color: var(--primary) !important; }
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
}
.btn-primary:hover { filter: brightness(.92); }
.btn, .form-control, .form-select, .dropdown-menu { border-radius: calc(var(--radius) * .7); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* 4. LAYOUT SHELL -------------------------------------------------------- */
.app-main {
  margin-inline-start: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin .25s ease;
}
html[data-sidebar-style="collapsed"] .app-main { margin-inline-start: var(--sidebar-w-mini); }
html[data-layout="boxed"] body { background: var(--border-color); }
html[data-layout="boxed"] .app-wrapper {
  max-width: 1440px; margin-inline: auto; background: var(--page-bg);
  position: relative; box-shadow: 0 0 40px rgba(0, 0, 0, .08);
}
.page-content { flex: 1; padding: 1.5rem; }

/* 5. SIDEBAR ------------------------------------------------------------- */
.sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: var(--sidebar-w); background: var(--sidebar-bg);
  border-inline-end: 1px solid var(--border-color);
  display: flex; flex-direction: column; z-index: 1040;
  transition: width .25s ease, transform .25s ease;
}
.sidebar-brand {
  height: var(--topbar-h); display: flex; align-items: center; gap: .65rem;
  padding-inline: 1.25rem; color: var(--sidebar-active); font-weight: 700; font-size: 1.15rem;
}
.brand-logo {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--primary); color: #fff; border-radius: calc(var(--radius) * .8);
}
.sidebar-scroll { flex: 1; overflow-y: auto; padding: .5rem .75rem 1rem; }
.nav-label {
  padding: 1rem .75rem .4rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; color: var(--sidebar-color); opacity: .7;
}
.side-link {
  display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem;
  border-radius: calc(var(--radius) * .7); color: var(--sidebar-color);
  transition: background .2s, color .2s; white-space: nowrap;
}
.side-link i:first-child { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.side-link:hover { color: var(--sidebar-active); background: rgba(128, 128, 128, .12); }
.side-link.active { color: #fff; background: var(--primary); }
.side-link .chevron { margin-inline-start: auto; font-size: .7rem; transition: transform .2s; }
.side-link[aria-expanded="true"] .chevron { transform: rotate(90deg); }
html[dir="rtl"] .side-link .chevron { transform: scaleX(-1); }
html[dir="rtl"] .side-link[aria-expanded="true"] .chevron { transform: scaleX(-1) rotate(90deg); }
.sub-menu { list-style: none; margin: 0; padding: .15rem 0 .25rem; }
.sub-menu a {
  display: block; padding: .4rem .75rem .4rem 2.9rem; padding-inline: 2.9rem .75rem;
  color: var(--sidebar-color); font-size: .85rem; border-radius: 6px;
}
.sub-menu a:hover, .sub-menu a.active { color: var(--primary); }
.sidebar-user {
  display: flex; align-items: center; gap: .65rem; padding: .9rem 1.25rem;
  border-top: 1px solid rgba(128, 128, 128, .2); color: var(--sidebar-color);
}
.sidebar-user strong { color: var(--sidebar-active); display: block; font-size: .85rem; }

/* Collapsed desktop sidebar: icons only */
@media (min-width: 992px) {
  html[data-sidebar-style="collapsed"] .sidebar { width: var(--sidebar-w-mini); }
  html[data-sidebar-style="collapsed"] .sidebar :is(.brand-name, .link-text, .chevron, .nav-label, .sub-menu, .user-info) { display: none; }
  html[data-sidebar-style="collapsed"] .side-link { justify-content: center; }
}

/* 6. TOPBAR -------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 1020; height: var(--topbar-h);
  display: flex; align-items: center; gap: 1rem; padding-inline: 1.5rem;
  background: var(--topbar-bg); color: var(--topbar-color);
  border-bottom: 1px solid var(--border-color);
}
.icon-btn {
  position: relative; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; background: transparent; color: inherit; border-radius: 50%; font-size: 1.1rem;
}
.icon-btn:hover { background: rgba(128, 128, 128, .15); }
.icon-btn .dot {
  position: absolute; top: 6px; inset-inline-end: 6px; width: 9px; height: 9px;
  background: #ef4444; border-radius: 50%; border: 2px solid var(--topbar-bg);
}
.topbar-search { width: 300px; max-width: 100%; }  /* shrinks automatically on narrow laptops */
.notify-menu { width: min(330px, calc(100vw - 1.5rem)); } /* never wider than the screen */
.avatar {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-weight: 600; font-size: .8rem;
  background: rgba(var(--primary-rgb), .15); color: var(--primary);
}
.breadcrumb { --bs-breadcrumb-divider-color: currentColor; }

/* 7. CONTENT, CARDS, TABLES --------------------------------------------- */
.card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius); }
.card-header { background: transparent; border-bottom: 1px solid var(--border-color); padding: 1rem 1.25rem; }
.card-title { margin: 0; font-size: 1rem; font-weight: 600; }
.kpi-icon {
  width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.3rem;
  border-radius: calc(var(--radius) * .8); background: rgba(var(--primary-rgb), .12); color: var(--primary);
}
.kpi-value { font-size: 1.55rem; font-weight: 700; line-height: 1.2; }
.trend { font-size: .78rem; font-weight: 600; }
.table > :not(caption) > * > * { padding: .75rem 1.25rem; background: transparent; }
.table thead th { font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; }
.table td { white-space: nowrap; vertical-align: middle; }
.chart-box { position: relative; height: 320px; }
.table-tile { padding: .9rem; border-radius: calc(var(--radius) * .8); background: var(--page-bg); }
.table-tile .count { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.swatch-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.range-menu { min-width: 250px; }

/* 8. FOOTER + CUSTOMIZER + RESPONSIVE ----------------------------------- */
.app-footer {
  padding: 1rem 1.5rem; background: var(--card-bg); border-top: 1px solid var(--border-color);
  font-size: .82rem; color: var(--bs-secondary-color);
}
.app-footer a { color: inherit; }
.app-footer a:hover { color: var(--primary); }

.customizer-toggle {
  position: fixed; top: 40%; inset-inline-end: 0; z-index: 1030;
  width: 44px; height: 44px; display: grid; place-items: center; border: 0;
  background: var(--primary); color: #fff; font-size: 1.2rem;
  border-start-start-radius: 10px; border-end-start-radius: 10px;
}
.customizer-toggle i { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.setting-title { font-size: .78rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: var(--bs-secondary-color); }
.color-swatch input { display: none; }
.color-swatch span {
  display: inline-block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; outline: 1px solid var(--border-color);
}
.color-swatch input:checked + span { border-color: var(--card-bg); outline: 2px solid var(--primary); }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1035; }

@media (max-width: 991.98px) {
  /* Sidebar becomes an off-canvas drawer; direction-aware slide-out */
  .sidebar { width: var(--sidebar-w) !important; transform: translateX(-100%); }
  html[dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.show { transform: none !important; }
  .sidebar.show ~ .sidebar-backdrop { display: block; }
  .app-main, html[data-sidebar-style="collapsed"] .app-main { margin-inline-start: 0; }
  .topbar { padding-inline: 1rem; gap: .25rem; }
  .page-content { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 9. POS PAGE ------------------------------------------------------------ */
.pos-search { max-width: 360px; }
.pos-item {
  width: 100%; padding: .9rem; text-align: start; cursor: pointer;
  background: var(--card-bg); color: inherit;
  border: 1px solid var(--border-color); border-radius: var(--radius);
  transition: border-color .2s, transform .15s;
}
.pos-item:hover { border-color: var(--primary); }
.pos-item:active { transform: scale(.98); }
.pos-emoji {
  width: 52px; height: 52px; margin-bottom: .6rem; display: grid; place-items: center;
  font-size: 1.7rem; border-radius: calc(var(--radius) * .8); background: rgba(var(--primary-rgb), .1);
}
.pos-emoji-sm { width: 38px; height: 38px; margin: 0; font-size: 1.2rem; flex: none; }
.cart-items { max-height: 300px; overflow-y: auto; }
.cart-line + .cart-line { border-top: 1px solid var(--border-color); }
.cart-line-total { min-width: 56px; text-align: end; }
@media (min-width: 1200px) {
  .pos-cart { position: sticky; top: calc(var(--topbar-h) + 1rem); }
}

/* 10. ORDERS, RESERVATIONS, CALENDAR, TABLES ----------------------------- */
.filter-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.filter-tab .badge { margin-inline-start: .4rem; }
.rtl-flip { display: inline-block; }
html[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
.order-totals { max-width: 320px; margin-inline-start: auto; }

/* Order status timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding-inline-start: 2rem; padding-bottom: 1.1rem; }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: .55rem; top: 1.2rem; bottom: 0;
  width: 2px; background: var(--border-color);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline .tl-dot {
  position: absolute; inset-inline-start: 0; top: .1rem; width: 1.15rem; height: 1.15rem;
  display: grid; place-items: center; border-radius: 50%; font-size: .7rem; background: var(--border-color);
}
.timeline li.done .tl-dot { background: var(--bs-success); color: #fff; }
.timeline li.current .tl-dot { background: var(--primary); color: #fff; }

/* Calendar */
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays div { padding: .6rem; text-align: center; font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color); }
.cal-grid { border-top: 1px solid var(--border-color); }
.cal-cell {
  min-width: 0; min-height: 104px; padding: .4rem; display: flex; flex-direction: column; gap: .2rem;
  text-align: start; color: inherit; background: transparent; border: 0;
  border-inline-end: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
}
button.cal-cell:hover { background: rgba(var(--primary-rgb), .06); }
.cal-cell.selected { outline: 2px solid var(--primary); outline-offset: -2px; }
.cal-day { font-size: .85rem; font-weight: 600; }
.cal-cell.today .cal-day {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--primary); color: #fff;
}
.cal-chip {
  padding: .1rem .35rem; font-size: .68rem; border-radius: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; background: rgba(var(--primary-rgb), .14); color: var(--primary);
}
.cal-count {
  display: none; min-width: 20px; padding: 0 .35rem; font-size: .7rem; text-align: center;
  border-radius: 10px; background: rgba(var(--primary-rgb), .14); color: var(--primary);
}
@media (max-width: 767.98px) {
  .cal-cell { min-height: 56px; align-items: center; }
  .cal-chip, .cal-more { display: none; }
  .cal-count { display: inline-block; }
}

/* Table cards (floor status) */
.table-card {
  width: 100%; padding: .9rem; text-align: start; color: inherit; background: var(--card-bg);
  border: 1px solid var(--border-color); border-inline-start: 4px solid var(--border-color);
  border-radius: var(--radius); transition: transform .15s;
}
.table-card:hover { transform: translateY(-2px); }
.table-card.is-available { border-inline-start-color: var(--bs-success); }
.table-card.is-occupied  { border-inline-start-color: var(--bs-danger); }
.table-card.is-reserved  { border-inline-start-color: var(--bs-warning); }
.table-card.is-cleaning  { border-inline-start-color: var(--bs-info); }

/* 11. MENU + KITCHEN ----------------------------------------------------- */
.pos-emoji-lg { width: 100%; height: 150px; font-size: 3.5rem; }
.preview-img { width: 100%; height: 150px; object-fit: cover; border-radius: calc(var(--radius) * .8); }

/* Kitchen Orders board */
.ticket-age { font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color); }
.ticket-age.warn { color: var(--bs-warning-text-emphasis); }
.ticket-age.late { color: var(--bs-danger); }

/* Kitchen Display (big-screen tickets) */
#kdsWrap:fullscreen { padding: 1.5rem; overflow: auto; background: var(--page-bg); }
.kds-clock { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kds-ticket { overflow: hidden; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius); }
.kds-head { padding: .75rem 1rem; color: #fff; font-size: 1.1rem; }
.kds-timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.kds-ticket.age-ok   .kds-head { background: var(--bs-success); }
.kds-ticket.age-warn .kds-head { background: #d97706; }
.kds-ticket.age-late .kds-head { background: var(--bs-danger); }
.kds-items { font-size: 1.05rem; line-height: 1.8; }

/* 12. PROFILE PAGES (customer / employee details) ------------------------ */
.avatar-lg { width: 72px; height: 72px; font-size: 1.4rem; }

/* 13. INVENTORY SECTION -------------------------------------------------- */
.stock-bar { height: 8px; min-width: 90px; background: var(--border-color); }
.recipe-steps li { padding-block: .3rem; }

/* 14. MARKETING, SYSTEM, AUTH, DOCS -------------------------------------- */
.nav-pills { --bs-nav-pills-link-active-bg: var(--primary); }
.coupon-code { padding: .2rem .5rem; border-radius: 6px; background: rgba(var(--primary-rgb), .1); color: var(--primary); font-weight: 600; }
.notif-item.unread { background: rgba(var(--primary-rgb), .06) !important; }
.notif-item.unread strong::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-start: .5rem;
  border-radius: 50%; background: var(--primary);
}
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 440px; }
.code-block { padding: 1rem; overflow: auto; font-size: .82rem; background: var(--page-bg); border: 1px solid var(--border-color); border-radius: calc(var(--radius) * .7); }
.legal-text { max-width: 820px; }

/* 15. USER MENU ---------------------------------------------------------- */
.user-toggle { color: inherit; }
.min-w-0 { min-width: 0; }
.user-menu { min-width: 280px; overflow: hidden; }
.user-menu-head { background: rgba(var(--primary-rgb), .08); }
.user-menu .dropdown-item { padding: .55rem 1.1rem; }
.user-menu .dropdown-item:hover { color: var(--primary); background: rgba(var(--primary-rgb), .08); }
.user-menu .dropdown-item.text-danger:hover { color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .08); }
.avatar-online { position: relative; }
.avatar-online::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bs-success); border: 2px solid var(--card-bg);
}

/* 16. MESSAGES ----------------------------------------------------------- */
.list-group { --bs-list-group-active-bg: var(--primary); --bs-list-group-active-border-color: var(--primary); }
.chat-list { max-height: 520px; overflow-y: auto; }
.chat-body { height: 380px; padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; }
.chat-msg {
  max-width: 78%; padding: .55rem .8rem; border-radius: var(--radius);
  background: var(--page-bg); border: 1px solid var(--border-color);
}
.chat-msg small { display: block; margin-top: .15rem; font-size: .7rem; opacity: .65; }
.chat-msg.mine { margin-inline-start: auto; background: var(--primary); border-color: var(--primary); color: #fff; }
@media (min-width: 768px) { .border-end-md { border-inline-end: 1px solid var(--border-color); } }

/* 17. SMALL-PHONE FIXES ---------------------------------------------------- */
@media (max-width: 575.98px) {
  .card-body.d-flex.align-items-center.gap-3 { flex-wrap: wrap; }  /* icon above the number when there is no room beside it */
  .kpi-value { font-size: 1.3rem; overflow-wrap: anywhere; }
}

/* The floating button would cover page content on small screens; the palette icon in the topbar does the same job */
@media (max-width: 991.98px) { .customizer-toggle { display: none; } }

/* 18. THEME COLOUR EVERYWHERE ---------------------------------------------
   Bootstrap ships blue links, pagination, focus rings and accordions. These
   rules point them at --primary so the theme colour applies to every control. */
:root {
  --bs-link-color-rgb: var(--primary-rgb);
  --bs-link-hover-color-rgb: var(--primary-rgb);
  --bs-focus-ring-color: rgba(var(--primary-rgb), .25);
}
.pagination {
  --bs-pagination-color: var(--primary);
  --bs-pagination-hover-color: var(--primary);
  --bs-pagination-focus-color: var(--primary);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .2);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: rgba(var(--primary-rgb), .6);
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .18);
}
.accordion {
  --bs-accordion-active-bg: rgba(var(--primary-rgb), .08);
  --bs-accordion-active-color: var(--primary);
  --bs-accordion-btn-focus-border-color: rgba(var(--primary-rgb), .6);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .18);
}
.dropdown-menu { --bs-dropdown-link-active-bg: var(--primary); }
.btn-primary { --bs-btn-focus-shadow-rgb: var(--primary-rgb); }

code { color: var(--primary); }  /* inline code follows the theme colour instead of Bootstrap's pink */