/*
 * VMS adapter for fps-theme.css (pilot: Queue Admin console, manage_base.html).
 * Load AFTER fps-theme.css.
 *
 * 1. Bootstrap Icons (bi) in the FPS shell — the theme styles Tabler Icons (ti).
 * 2. Queue-specific bits of the old shell restyled for the light FPS rail.
 * 3. RTL (Arabic): fps-theme.css uses physical left/right; mirror the parts
 *    the shell and generic Bootstrap controls actually use.
 */

/* --- 0. Queue status colours (one source; status_style.py mirrors these) --
   Waiting = amber, Called = brand violet, Serving = brand indigo, Hold = slate. */
:root {
  --sq-status-waiting: #f59e0b;
  --sq-status-called: #6d5fd6;
  --sq-status-called-bg: #f4f2fd;
  --sq-status-serving: var(--fps-brand-primary);
  --sq-status-serving-bg: #eeedf7;
  --sq-status-hold: #64748b;
}

/* Templates mark "Called" with bg-info and "Serving" with bg-primary. */
.badge.queue-status-badge.bg-info,
.card-header.queue-card-header.bg-info {
  background-color: var(--sq-status-called) !important;
  color: #fff !important;
}

.badge.queue-status-badge.bg-info i,
.card-header.queue-card-header.bg-info i {
  color: #fff !important;
}

.badge.queue-status-badge.bg-primary {
  background-color: var(--sq-status-serving) !important;
}

.queue-list-item.is-called {
  border-inline-start-color: var(--sq-status-called);
  background: var(--sq-status-called-bg);
}

.queue-list-item.is-serving {
  border-inline-start-color: var(--sq-status-serving);
  background: var(--sq-status-serving-bg);
}

.queue-list-item.is-hold {
  border-inline-start-color: var(--sq-status-hold);
}

/* --- 1. Bootstrap Icons in the FPS shell -------------------------------- */
.fps-nav-link .bi {
  flex: 0 0 auto;
  font-size: 1.05rem;
  color: #6b7382;
}

.fps-nav-link:hover .bi,
.fps-nav-link.is-active .bi {
  color: var(--fps-brand-primary);
}

.fps-icon-btn .bi {
  line-height: 1;
}

/* fps-theme hides the skip link at left:-9999px. In RTL that widens the
   scrollable area and the browser opens the page scrolled into blank space,
   so clip it in place instead (visible again on keyboard focus). */
.fps-skip-link {
  top: 0.5rem;
  left: 0.5rem;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.fps-skip-link:focus {
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  overflow: visible;
  clip-path: none;
}

/* fps-theme sets --bs-offcanvas-width; Tabler reads the --tblr- variable. */
.fps-app-offcanvas {
  --tblr-offcanvas-width: min(20rem, 92vw);
}

/* --- 2. Queue shell pieces ---------------------------------------------- */
.fps-brand-logo.sq-brand-logo {
  height: 2.6rem;
}

.sq-sidebar-role {
  display: block;
  padding: 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a74a8;
}

.fps-nav-link .sq-nav-text {
  flex: 1 1 auto;
  min-width: 0;
}

.sq-dept-counts {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.25rem;
  margin-inline-start: auto;
}

.sq-dept-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.sq-dept-count.is-waiting {
  background: #fbbf24;
  color: #78350f;
}

.sq-dept-count.is-progress {
  background: #7dd3fc;
  color: #0c4a6e;
}

.fps-topbar .lang-switch-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.fps-topbar .lang-switch-btn:hover,
.fps-topbar .lang-switch-btn:focus {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.sq-page-header {
  margin-bottom: 1.35rem;
}

.sq-page-pretitle {
  color: var(--fps-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sq-page-title {
  margin: 0;
  font-family: var(--fps-font-display);
  font-size: var(--tblr-font-size-h1);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.sq-dept-count.is-leftover {
  background: #f59e0b;
  color: #78350f;
}

/* Flash messages (includes/fps_flash.html). */
.messages {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.messages li {
  margin: 0 0 0.5rem;
}

/* Stronger body text in coloured alerts (Tabler defaults can be too light). */
.alert-success,
.alert-info {
  color: #0f172a !important;
}

.alert-warning {
  color: #422006 !important;
}

.alert-danger {
  color: #450a0a !important;
}

/* Portal top-bar links (base.html, desktop). */
.fps-topnav {
  align-items: center;
  gap: 0.15rem;
  margin-inline-start: 1rem;
}

.fps-topnav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.6rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.fps-topnav-link:hover,
.fps-topnav-link:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Weekday toggles on Check-in hours (VMS + queue forms). */
.sq-weekday-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  background: #f8fafc;
}

@media (min-width: 576px) {
  .sq-weekday-checkboxes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sq-weekday-checkboxes .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-height: 1.75rem;
  padding-inline-start: 0;
}

.sq-weekday-checkboxes .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

.sq-weekday-checkboxes .form-check-label {
  line-height: 1.3;
  cursor: pointer;
}

.sq-flow-tip {
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

.sq-flow-tip:hover {
  color: inherit;
  opacity: 0.85;
}

/* VMS dashboard stat cards (formerly admin-dashboard.css). The accent sits on
   the reading-start edge, so it mirrors in Arabic. */
.card-stats {
  border-inline-start: 4px solid var(--fps-brand-primary);
}

.card-stats .card-body {
  padding: 1.5rem;
}

.card-stats .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fps-ink);
  line-height: 1;
}

.card-stats .stat-label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fps-muted);
}

.card-stats .stat-icon {
  font-size: 2.5rem;
  color: var(--fps-brand-primary);
  opacity: 0.8;
}

/* Print: drop the app chrome, keep only the page content (e.g. visit receipts). */
@media print {
  body.page-app {
    background: #fff;
  }

  .fps-app-body {
    display: block;
  }

  .fps-main {
    max-width: none;
    padding: 0;
  }
}

/* Tom Select dropdowns must float above sibling fields and modals' content. */
.ts-wrapper.dropdown-active {
  position: relative;
  z-index: 1080;
}

.ts-dropdown {
  z-index: 1080;
}

/* --- 3. RTL ------------------------------------------------------------- */
html[dir="rtl"] .fps-rail {
  border-right: 0;
  border-left: 2px solid var(--fps-rail-edge);
}

html[dir="rtl"] .fps-topbar-inner {
  padding: 0 1.1rem 0 1rem;
}

@media (min-width: 992px) {
  html[dir="rtl"] .fps-topbar-inner {
    padding-left: 1.5rem;
    padding-right: 1.25rem;
  }
}

html[dir="rtl"] .fps-user-chip {
  padding: 0.2rem 0.2rem 0.2rem 0.55rem;
}

html[dir="rtl"] .fps-nav-link.is-active {
  box-shadow: inset -3px 0 0 var(--fps-brand-primary), 0 1px 3px rgba(40, 36, 122, 0.12);
}

html[dir="rtl"] .fps-skip-link {
  left: auto;
  right: 0.5rem;
}

/* Mobile menu: slide in from the right in RTL (Tabler ships an LTR build). */
html[dir="rtl"] .fps-app-offcanvas.offcanvas-start {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: var(--tblr-offcanvas-border-width, 1px) solid var(--tblr-offcanvas-border-color, var(--fps-line));
  transform: translateX(100%);
}

html[dir="rtl"] .fps-app-offcanvas.offcanvas-start.showing,
html[dir="rtl"] .fps-app-offcanvas.offcanvas-start.show:not(.hiding) {
  transform: none;
}

html[dir="rtl"] .fps-app-offcanvas .offcanvas-header .btn-close {
  margin: 0 auto 0 0;
}

html[dir="rtl"] .page-app .ts-wrapper.form-select {
  background-position: left 0.85rem center !important;
}

html[dir="rtl"] .page-app .ts-wrapper.single .ts-control,
html[dir="rtl"] .page-app .ts-wrapper.form-select .ts-control,
html[dir="rtl"] .page-app .ts-wrapper.form-select.single.input-active .ts-control {
  padding-left: 2.6rem !important;
  padding-right: var(--fps-control-pad-x) !important;
}

/* Confirmation checkbox (reception ID check): must stand out clearly, so it gets a
   dark brand outline, a tinted brand box, and a green fill once ticked. */
body .fps-confirm-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  background: #f1f0fb !important;
  border: 2px solid var(--fps-brand-primary, #28247a) !important;
}
body .fps-confirm-check:has(.form-check-input:checked) {
  background: #e9f7ee !important;
  border-color: #2fb344 !important;
}
body .fps-confirm-check input.form-check-input {
  float: none;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  border: 2.5px solid var(--fps-brand-primary, #28247a);
  border-radius: 0.4rem;
  background-color: #fff;
  box-shadow: none;
  opacity: 1;
  cursor: pointer;
}
body .fps-confirm-check input.form-check-input:checked {
  background-color: #2fb344;
  border-color: #2fb344;
}
body .fps-confirm-check input.form-check-input:focus-visible {
  box-shadow: var(--fps-focus-ring);
}
body .fps-confirm-check .form-check-label {
  cursor: pointer;
  color: var(--fps-brand-primary, #28247a);
}