html {
  min-height: 100%;
  font-size: 14px;
}

body {
  min-height: 100vh;
  margin: 0;
  background: #edf2f8;
  font-family: Roboto, Arial, sans-serif;
  color: #333;
}

/* Arabic uses the Cairo font */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: 'Cairo', sans-serif;
  font-weight: 400;
}

button {
  border: 0;
  background: none;
  font: inherit;
}

/* ===== Table thumbnail ===== */
.thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.thumb-empty {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #cbd5e1;
  font-size: 18px;
}

/* ===== Image load/upload control ===== */
.image-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* In Arabic (RTL) push the image panel to the far left of the page */
html[dir="rtl"] .image-panel {
  text-align: left;
}

html[dir="rtl"] .image-panel .image-upload {
  align-items: flex-end;
}

.image-preview {
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview .image-placeholder {
  display: none;
  color: #94a3b8;
  font-size: 13px;
}

.image-preview.is-empty .image-placeholder {
  display: block;
}

.image-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #10b981;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.image-upload-btn:hover {
  background: #f0fdf4;
  border-color: #10b981;
}

/* ===== Admin shell: dark left-sidebar menu ===== */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar menu styles live in sidebar.css (shared with the POS drawer). */

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding: 12px 10px 4px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-user-caret {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  color: #64748b;
}

/* User block pinned to the top of the sidebar (below the brand) */
.sidebar-user-top {
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 10px;
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.user-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #29b6f6, #0d47a1);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.user-meta strong {
  color: #fff;
  font-size: 14px;
}

.user-meta small {
  color: #94a3b8;
  font-size: 12px;
}

.app-main {
  position: relative;   /* the containing block for .topbar.over-banner */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ===== Topbar: compact SaaS header (hero on Home, slim bar + banner elsewhere) ===== */
.topbar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: #fff;
  border-bottom: 1px solid #eef1f6;
}

/* Non-hero topbar (entry/index pages): slim bar holding the branch chip and the user trigger.
   Without the min-height it collapses to nothing and the absolute-positioned trigger spills
   onto the content below. .over-banner raises this to the banner's 72px. */
.topbar:not(.has-hero) {
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  min-height: 62px;
}

/* Inside the slim non-hero bar the trigger is a normal flex item, not floating. */
.topbar:not(.has-hero) .topbar-side-end {
  position: static;
  top: auto;
  inset-inline-end: auto;
  margin-inline-start: auto;
}

/* ── The topbar laid OVER the banner ──
   Taken out of the flow and pinned to the top of .app-main, so it occupies the banner's band
   instead of adding a second bar beneath it. The banner (72px, first in the column) is what
   holds the space open — this bar matches that height and centres its controls in it, which is
   why nothing below moves.

   Transparent and borderless: the banner IS the background here. The chip, the bell and the
   user pill are the only things that paint. */
.topbar.over-banner {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 5;
  min-height: 72px;          /* .dash-banner's height — the two bands line up exactly */
  background: transparent;
  border-bottom: 0;
}

/* The chip carries a 9px top margin to clear the hero's edge; centred in the banner's band it
   would sit low, so it is dropped here. */
.topbar.over-banner .topbar-branch {
  margin-top: 0;
}

/* ----- Information banner (row 1) ----- */
.topbar-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  /* leave room on the end for the absolutely-positioned toggle + user menu */
  padding-inline-end: 340px;
  background: #fbfdff;
  border-bottom: 1px solid #f1f5f9;
}

.banner-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.banner-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .25);
}

.banner-icon svg {
  width: 19px;
  height: 19px;
}

.banner-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.banner-text strong {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.banner-text small {
  font-size: 12.5px;
  color: #64748b;
}

/* ----- Banner stat chips (index pages) ----- */
.banner-stats {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline-start: auto;
}

.stat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-chip-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.stat-chip-icon svg {
  width: 18px;
  height: 18px;
}

.stat-chip-blue   { background: #eff4ff; color: #2563eb; }
.stat-chip-green  { background: #e7f7ef; color: #16a34a; }
.stat-chip-amber  { background: #fef6e7; color: #d97706; }
.stat-chip-violet { background: #f5effe; color: #8b3fe0; }

.stat-chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.stat-chip-text small {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

.stat-chip-text strong {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

/* ----- Home hero banner (big, Home/Index only) ----- */
.topbar-hero {
  position: relative;
  overflow: hidden;
  padding: 22px 26px;
  padding-inline-end: 340px;
  color: #fff;
  background-color: #0a1628;
  background-image:
    linear-gradient(to right, rgba(0, 82, 204, 0.20) 0%, rgba(0, 82, 204, 0.10) 45%, transparent 100%),
    url('/images/banner_dashboard.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}

/* RTL: mirrored composition — heading on the right, POS terminal on the left
   (uses a horizontally-flipped background so the product never sits under the text) */
html[dir="rtl"] .topbar-hero {
  background-image:
    linear-gradient(to left, rgba(0, 82, 204, 0.20) 0%, rgba(0, 82, 204, 0.10) 45%, transparent 100%),
    url('/images/banner_dashboard.png');
  background-position: center, center;
  padding-block: 26px;
}

/* Contain the Arabic heading block in the center-right with breathing space */
html[dir="rtl"] .hero-content {
  max-width: 560px;
  margin-inline-start: 0;
}

html[dir="rtl"] .hero-title {
  line-height: 1.25;
}

html[dir="rtl"] .hero-features {
  gap: 10px 14px;
}

.hero-content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* The logo plate at the head of the dashboard banner. Cream, because the mark carries its own
   cream background and a white plate would show a seam around it; the gold hairline is the
   band along the logo's own bottom edge. */
.hero-logo {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 14px;
  background: #fffada;
  box-shadow:
    0 0 0 1px rgba(237, 200, 34, .6),
    0 10px 26px rgba(0, 0, 0, .34);
}

.hero-logo img {
  display: block;
  width: auto;
  height: 44px;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .72);
}

.hero-title {
  margin: 2px 0 4px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: #fff;
}

.hero-subtitle {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .78);
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.hero-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.hero-feature-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #fff;
}

.hero-feature-icon svg {
  width: 17px;
  height: 17px;
}

.hero-fi-blue  { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.hero-fi-green { background: linear-gradient(135deg, #34d399, #10b981); }
.hero-fi-amber { background: linear-gradient(135deg, #fbbf24, #f59e0b); }

.hero-feature-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.hero-feature-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.hero-feature-text small {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .68);
}

/* Over a dark backdrop — the hero on Home, the banner everywhere else — the user pill switches
   to light styling. Resting state is a translucent pill so the white username/role text stays
   legible (it previously kept the light gradient → white-on-white). The branch chip and the
   bell need no counterpart: they are already glass cards built for exactly this. */
.topbar.has-hero .user-trigger,
.topbar.over-banner .user-trigger {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: none;
}

.topbar.has-hero .user-trigger .user-meta strong,
.topbar.over-banner .user-trigger .user-meta strong {
  color: #fff;
}

.topbar.has-hero .user-trigger .user-meta small,
.topbar.over-banner .user-trigger .user-meta small {
  color: rgba(255, 255, 255, .72);
}

.topbar.has-hero .user-caret,
.topbar.over-banner .user-caret {
  color: rgba(255, 255, 255, .8);
}

.topbar.has-hero .user-trigger:hover,
.topbar.has-hero .user-trigger[aria-expanded="true"],
.topbar.over-banner .user-trigger:hover,
.topbar.over-banner .user-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: none;
}

/* The white avatar circle needs a touch more presence on the banner than on a white bar. */
.topbar.over-banner .user-avatar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

/* User menu floats into the banner's end corner regardless of DOM order */
.topbar-side {
  display: flex;
  align-items: center;
  min-width: 0;
}

.topbar-side-end {
  position: absolute;
  top: 9px;
  inset-inline-end: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Branch chip ──
   The branch the signed-in user is working, on the topbar's start side. Wears the same glass
   card as the bell and the user pill, so it reads as part of the strip rather than a label
   dropped onto it. Read-only: it names the account's branch, it does not switch it. */
.topbar-branch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  min-width: 0;
  /* 9px matches .topbar-side-end's offset, so the chip and the user pill sit on one line. */
  margin: 9px 0 0;
  margin-inline-start: 16px;
  padding: 8px 14px;
  border-radius: 12px;
  color: #12314f;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
  font-size: 13.5px;
  font-weight: 700;
}

.topbar-branch svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #3b82f6;
}

/* A long branch name must not push the strip wider than the bar. */
.topbar-branch-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Pending print-agent requests bell ──
   Sits beside the user menu and wears the same glass card, so the topbar stays one strip of
   controls rather than a button stuck next to it. */
.topbar-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #12314f;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}

.topbar-bell:hover { background: rgba(255, 255, 255, .92); transform: translateY(-1px); }
.topbar-bell svg { width: 19px; height: 19px; }

/* Something is waiting: the bell itself goes amber, so the state reads even at a glance that
   misses the badge. */
.topbar-bell.has-pending { color: #b45309; }

.topbar-bell-badge {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(229, 72, 77, .45);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) { .topbar-bell { transition: none; } }

/* On the home hero, pin the user pill to the top-right corner of the banner,
   aligned to the hero's padding so it isn't cramped against the edge. */
.topbar.has-hero .topbar-side-end {
  top: 18px;
  inset-inline-end: 22px;
}

/* ----- User profile trigger ----- */
.user-menu {
  position: relative;
}

/* ── The POS header's account card, brought to the shell so the two headers no longer wear two
   different user menus: a compact rectangular card, not the rounded pill this used to be.
   The pill's 46px avatar and 50px radius made the topbar's tallest object out of the one
   control that says the least.

   The POS bar is dark and this one is light, so the colours are the light equivalents of that
   card's — a hairline border over an almost-white fill — while every measurement (radius,
   paddings, avatar, type sizes) is the POS's. ── */
.user-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid #e7ecf2;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.user-trigger:hover,
.user-trigger[aria-expanded="true"] {
  background: #eef2f7;
  border-color: #d8e0ea;
}

.user-trigger .user-avatar {
  width: 26px;
  height: 26px;
  font-size: 12px;
  background: linear-gradient(135deg, #29b6f6, #0d47a1);
}

.user-trigger .user-meta {
  align-items: flex-start;
  text-align: start;
  min-width: 0;
  overflow: hidden;
}

.user-trigger .user-meta strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-trigger .user-meta small {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-caret {
  width: 12px;
  height: 12px;
  color: #94a3b8;
  transition: transform .2s ease;
}

.user-trigger[aria-expanded="true"] .user-caret {
  transform: rotate(180deg);
}

/* ----- Glassmorphism dropdown ----- */
/* The POS panel: compact and solid. The glass version read as a pane of frosted glass floating
   over the page — handsome over the POS's photo-less grid, muddy over a dashboard with cards
   showing through it — and at 266px with roomy rows it was a panel far larger than the three
   short entries it holds. */
.user-dropdown {
  display: block;            /* kept in flow so it can animate open/close */
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 8px;
  min-width: 232px;
  padding: 6px;
  border: 1px solid #e7ecf2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(2, 6, 23, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  transition: opacity .18s ease, transform .22s cubic-bezier(.16, 1, .3, 1), visibility .22s;
  pointer-events: none;
}

html[dir="rtl"] .user-dropdown {
  transform-origin: top left;
}

.user-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.user-dropdown-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 8px;
}

.user-avatar-lg {
  width: 34px;
  height: 34px;
  font-size: 14px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.user-dropdown-head .user-meta strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.user-dropdown-head .user-meta small {
  color: #64748b;
  font-size: 11.5px;
}

.user-dropdown .dropdown-divider {
  margin: 5px 4px;
  border-top: 1px solid #eef1f6;
}

.user-dropdown .dropdown-label {
  padding: 4px 10px 3px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.user-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 9px;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  transition: background .14s ease, color .14s ease;
}

.user-dropdown .dropdown-item svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #94a3b8;
  transition: color .14s ease;
}

/* No indent-on-hover: the POS menu highlights in place, and a row that slides sideways under
   the pointer is the kind of motion a till operator taps past, not toward. */
.user-dropdown .dropdown-item:hover,
.user-dropdown .dropdown-item:focus {
  background: rgba(37, 99, 235, .09);
  color: #1d4ed8;
}

.user-dropdown .dropdown-item:hover svg,
.user-dropdown .dropdown-item:focus svg {
  color: #2563eb;
}

/* Language options */
.lang-option .flag {
  font-size: 15px;
  line-height: 1;
}

.lang-option .check {
  width: 14px;
  height: 14px;
  margin-inline-start: auto;
  color: #2563eb;
  opacity: 0;
  transition: opacity .14s ease;
}

.lang-option.active {
  color: #1d4ed8;
  font-weight: 600;
}

.lang-option.active .check {
  opacity: 1;
}

/* Logout (danger) */
.user-dropdown .dropdown-item-danger {
  color: #dc2626;
}

.user-dropdown .dropdown-item-danger svg {
  color: #f87171;
}

.user-dropdown .dropdown-item-danger:hover,
.user-dropdown .dropdown-item-danger:focus {
  background: rgba(220, 38, 38, .09);
  color: #b91c1c;
}

.user-dropdown .dropdown-item-danger:hover svg,
.user-dropdown .dropdown-item-danger:focus svg {
  color: #dc2626;
}

.content {
  flex: 1;
  padding: 16px 22px;
}

/* Stat chips need room — hide them before the banner gets crowded */
@media (max-width: 1100px) {
  .banner-stats {
    display: none;
  }
}

@media (max-width: 768px) {
  .sidebar {
    flex-basis: 72px;
    width: 72px;
    padding: 18px 10px;
  }

  .brand-text,
  .sidebar-nav .nav-item span,
  .sidebar-search,
  .sidebar-section {
    display: none;
  }

  .sidebar-nav .nav-item {
    justify-content: center;
  }

  .topbar-banner {
    padding: 9px 14px;
    padding-inline-end: 230px;
  }

  .topbar-hero {
    padding: 18px 16px;
    padding-inline-end: 230px;
  }

  .hero-title {
    font-size: 23px;
  }

  .hero-logo img {
    height: 38px;
  }

}

/* Phone: compact user trigger + tighter banner reserve */
@media (max-width: 575px) {
  .topbar-banner {
    padding-inline-end: 116px;
  }

  .topbar-hero {
    padding: 16px 14px;
    padding-inline-end: 116px;
  }

  .hero-title {
    font-size: 20px;
  }

  .hero-logo {
    margin-bottom: 8px;
    padding: 5px 8px;
  }

  .hero-logo img {
    height: 30px;
  }

  .hero-features {
    gap: 8px;
  }

  .hero-feature-text small {
    display: none;
  }

  .banner-text small {
    display: none;
  }

  .user-trigger {
    gap: 0;
    padding: 6px;
  }

  .user-trigger .user-meta {
    display: none;
  }

  .user-dropdown {
    min-width: 240px;
  }
}


/* ===== Name fields on the data-entry screens: a soft tint so the field
   reads as "the name" at a glance (shared by all Upsert forms) ===== */
input.name-field {
  background-color: #fff8e1 !important;   /* light warm cream */
}

/* ===== DataTables design (reference: clean admin table) ===== */
.dataTables_wrapper {
  --dt-accent: #2563eb;
  --dt-accent-soft: #eff4ff;
  --dt-border: #eef1f6;
  --dt-muted: #94a3b8;
}

/* Top toolbar: search on the start side */
.dt-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.dt-toolbar-start {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dt-toolbar-end {
  margin-inline-start: auto;
}

/* ----- Advanced Search button + collapsible filter panel ----- */
.adv-search-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  color: #334155;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.adv-search-btn svg {
  width: 16px;
  height: 16px;
  color: #64748b;
  transition: color .14s ease;
}

.adv-search-btn:hover {
  border-color: #bcd0ff;
  background: #f8faff;
  color: #1d4ed8;
}

.adv-search-btn.active {
  border-color: #2563eb;
  background: #eff4ff;
  color: #1d4ed8;
}

.adv-search-btn.active svg {
  color: #2563eb;
}

/* Active-filter count bubble on the filter button */
.adv-fbadge {
  position: absolute;
  top: -7px;
  inset-inline-start: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
}

.adv-fbadge.on {
  display: inline-flex;
}

.adv-panel {
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transition: max-height .26s ease, opacity .2s ease, margin-top .26s ease;
}

.adv-panel.open {
  max-height: 760px;
  margin-top: 2px;
  margin-bottom: 14px;
  opacity: 1;
}

.adv-box {
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #eef1f6;
  border-radius: 14px;
}

/* Desktop: multiple columns; mobile: single column (auto-fit) */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.adv-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.adv-field label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.adv-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eef1f6;
}

.dataTables_wrapper .dataTables_filter {
  margin: 0;
  font-size: 14px;
}

.dataTables_wrapper .dataTables_filter label {
  display: block;
  margin: 0;
}

/* Embed a magnifier icon inside the search field */
.dataTables_wrapper .dataTables_filter input {
  width: 320px;
  max-width: 70vw;
  margin: 0;
  padding: 10px 16px 10px 42px;
  border: 1px solid var(--dt-border);
  border-radius: 12px;
  background-color: #f7f9fc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 15px center;
  color: #334155;
  font: inherit;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

html[dir="rtl"] .dataTables_wrapper .dataTables_filter input {
  padding: 10px 42px 10px 16px;
  background-position: right 15px center;
}

.dataTables_wrapper .dataTables_filter input::placeholder {
  color: #a8b3c4;
}

.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--dt-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Table surface */
.dataTables_wrapper table.dataTable {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 !important;
}

.dataTables_wrapper table.dataTable thead th {
  padding: 10px 16px;
  border-top: 0;
  border-bottom: 1px solid var(--dt-border);
  background: #f8fafc;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.dataTables_wrapper table.dataTable tbody td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--dt-border);
  vertical-align: middle;
  color: #475569;
  font-size: 14px;
}

.dataTables_wrapper table.dataTable tbody tr {
  transition: background .12s;
}

.dataTables_wrapper table.dataTable tbody tr:hover {
  background: #f8faff;
}

.dataTables_wrapper table.dataTable tbody tr:last-child td {
  border-bottom: 0;
}

/* Sort arrows: keep subtle */
.dataTables_wrapper table.dataTable thead th.sorting:before,
.dataTables_wrapper table.dataTable thead th.sorting:after,
.dataTables_wrapper table.dataTable thead th.sorting_asc:after,
.dataTables_wrapper table.dataTable thead th.sorting_desc:after {
  opacity: .3;
}

/* Bottom footer: info (start) + pagination & length (end) */
.dt-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--dt-border);
}

.dt-footer-end {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.dataTables_wrapper .dataTables_info {
  padding: 0;
  color: var(--dt-muted);
  font-size: 13.5px;
}

/* "10 / page" length control */
.dataTables_wrapper .dataTables_length {
  margin: 0;
  font-size: 13.5px;
}

.dataTables_wrapper .dataTables_length label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--dt-muted);
  font-weight: 500;
}

.dataTables_wrapper .dataTables_length select {
  padding: 8px 12px;
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  background: #fff;
  color: #475569;
  font: inherit;
  cursor: pointer;
}

.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: var(--dt-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Rounded numbered pagination (blue active) */
.dataTables_wrapper .dataTables_paginate {
  margin: 0;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  gap: 6px;
  margin: 0;
}

.dataTables_wrapper .dataTables_paginate .page-link {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--dt-border);
  border-radius: 9px;
  background: #fff;
  color: #475569;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  transition: all .12s;
}

.dataTables_wrapper .dataTables_paginate .page-link:hover {
  border-color: var(--dt-accent);
  background: var(--dt-accent-soft);
  color: var(--dt-accent);
  z-index: 1;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  border-color: var(--dt-accent);
  background: var(--dt-accent);
  color: #fff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .3);
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  color: #cbd5e1;
  background: #f9fafc;
  border-color: var(--dt-border);
  cursor: not-allowed;
}

.dataTables_wrapper .dataTables_paginate .page-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

@media (max-width: 575px) {
  .dt-toolbar,
  .dt-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .dt-footer-end {
    justify-content: space-between;
    margin-inline-start: 0;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    max-width: none;
  }
}

/* ===== DataTable cell components (avatar, pills, status, actions) ===== */

/* Avatar + two-line cell */
.dt-user {
  display: flex;
  align-items: center;
  gap: 11px;
}

.dt-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef2f7;
  border: 1px solid #e2e8f0;
}

.dt-avatar-fallback {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  border-color: transparent;
}

.dt-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.dt-user-name {
  color: #1e293b;
  font-weight: 600;
}

.dt-user-sub {
  color: #94a3b8;
  font-size: 12.5px;
}

/* Square thumbnail (non-avatar grids) */
.dt-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.dt-thumb-empty {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #cbd5e1;
  font-size: 18px;
}

.dt-code {
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

/* Soft pill badge (roles, groups, branches) */
.dt-pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.dt-pill-blue   { background: #eff4ff; color: #2563eb; }
.dt-pill-indigo { background: #eef0ff; color: #5b54e8; }
.dt-pill-violet { background: #f5effe; color: #8b3fe0; }
.dt-pill-amber  { background: #fef6e7; color: #b7791f; }
.dt-pill-teal   { background: #e7faf4; color: #0d9488; }
.dt-pill-rose   { background: #fdeef2; color: #c81e5b; }
.dt-pill-gray   { background: #f1f5f9; color: #64748b; }

/* Status badge with leading dot */
.dt-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

.dt-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.dt-status-on  { background: #e7f7ef; color: #15803d; }
.dt-status-off { background: #fdecec; color: #dc2626; }

/* Icon action buttons */
.dt-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dt-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.dt-icon-btn svg {
  width: 17px;
  height: 17px;
}

.dt-icon-edit:hover {
  background: var(--dt-accent-soft);
  color: var(--dt-accent);
}

.dt-icon-del:hover {
  background: #fdecec;
  color: #dc2626;
}

/* ----- Dashboard Banner (entry & index pages) ----- */
.dash-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 72px;
  background-color: #0a1628;
  background-image:
    linear-gradient(to right, rgba(0, 82, 204, 0.15), rgba(0, 82, 204, 0.08), transparent),
    url('/images/banner_dashboard.png');
  background-size: cover, cover;
  background-position: center, center;
  border-bottom: 1px solid rgba(0, 82, 204, 0.18);
  box-shadow: 0 2px 8px rgba(0, 20, 60, 0.12);
  flex-shrink: 0;
}

/* Company block — glassmorphism card */
.dash-company {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 20, 80, 0.10);
}
.dash-company-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 3px;
  line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.dash-company-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.80);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* User block */

/* ---- Shift Management modal ---- */
.shift-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; }
.shift-modal .modal-header { padding: 24px 28px 18px; border-bottom: 1px solid #eef0f4 !important; }
.shift-modal .modal-body { padding: 22px 28px; display: flex; flex-direction: column; gap: 14px; }
.shift-modal .modal-footer { padding: 18px 28px 24px; border-top: 1px solid #eef0f4 !important; }
.shift-head { display: flex; align-items: flex-start; gap: 16px; }
.shift-title { margin: 0 0 4px; font-size: 26px; font-weight: 800; color: #0f1b33; }
.shift-subtitle { margin: 0; color: #6b7280; font-size: 15px; }
.shift-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
    border-radius: 14px; flex: 0 0 auto; }
.shift-ico svg { width: 26px; height: 26px; }
.shift-ico-blue { background: #e8f0fe; color: #2563eb; }
.shift-ico-green { background: #e7f6ec; color: #16a34a; }
.shift-ico-purple { background: #f0eafe; color: #7c3aed; }
.shift-code-sm { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: #6b7280; }
.shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shift-row { display: flex; align-items: center; gap: 16px; background: #f7f8fa; border-radius: 14px; padding: 16px 18px; min-width: 0; }
.shift-row-text { display: flex; flex-direction: column; }
.shift-row-text small { color: #6b7280; font-size: 14px; }
.shift-row-text strong { color: #0f1b33; font-size: 20px; font-weight: 700; }
.shift-badge { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 12px; font-weight: 700; font-size: 15px; }
.shift-badge svg { width: 18px; height: 18px; }
.shift-badge-blue { background: #e8f0fe; color: #2563eb; }
.shift-badge-purple { background: #f0eafe; color: #7c3aed; }
.shift-modal .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; border-radius: 12px; }

/* ---- Delivery page popups (pilot final/temp account, assign salesman) ----
   Match the page's dense 12-14px typography instead of Bootstrap's larger defaults,
   and soften the heavy pure-black bold text. */
#finalAccountModal .modal-body,
#tempCloseModal .modal-body,
#assignSalesmanModal .modal-body { font-size: 12.5px; color: #374151; }

#finalAccountModal .modal-title,
#tempCloseModal .modal-title,
#assignSalesmanModal .modal-title { font-size: 16px; font-weight: 700; color: #0f1b33; }

#finalAccountModal .form-label,
#tempCloseModal .form-label,
#assignSalesmanModal .form-label { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 2px; }

#finalAccountModal .form-control, #finalAccountModal .form-select,
#tempCloseModal .form-control, #tempCloseModal .form-select,
#assignSalesmanModal .form-control, #assignSalesmanModal .form-select { font-size: 12.5px; }

#finalAccountModal .table,
#tempCloseModal .table,
#assignSalesmanModal .table { font-size: 12px; }

#finalAccountModal .fw-bold,
#tempCloseModal .fw-bold,
#assignSalesmanModal .fw-bold { font-weight: 600 !important; color: #0f1b33; }

/* ── Temp pilot account modal — dashboard design ────────────────── */
#tempCloseModal .tc-head-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; background: #f59e0b; color: #fff; flex: 0 0 auto; }
#tempCloseModal .tc-subtitle { font-size: 11.5px; color: #6b7280; }

#tempCloseModal .tc-show-btn { background: #3730a3; border-color: #3730a3; color: #fff; font-weight: 600; }
#tempCloseModal .tc-show-btn:hover,
#tempCloseModal .tc-show-btn:focus { background: #312e81; border-color: #312e81; color: #fff; }

/* Live "marked as settled" chip */
#tempCloseModal .tc-chip { display: inline-block; font-size: 11.5px; font-weight: 600; color: #16a34a;
    background: #e7f6ec; border: 1px solid #cdebd7; border-radius: 999px; padding: 5px 12px; }

/* Invoice rows: seq badge, temp-no badge, settled/checked highlighting */
#tempCloseModal .tc-seq { display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 7px; background: #eef2ff; color: #4338ca;
    font-weight: 700; font-size: 11px; }
#tempCloseModal .tc-tempno { display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 7px; background: #f3f4f6; color: #9ca3af;
    font-weight: 700; font-size: 11px; }
#tempCloseModal .tc-tempno.on { background: #eef2ff; color: #4338ca; }
#tempCloseModal .tc-settled td,
#tempCloseModal .tc-checked td { background: #f2faf5; }
#tempCloseModal .tc-settled td:first-child,
#tempCloseModal .tc-checked td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
[dir="rtl"] #tempCloseModal .tc-settled td:first-child,
[dir="rtl"] #tempCloseModal .tc-checked td:first-child { box-shadow: inset -3px 0 0 #16a34a; }
#tempCloseModal .tc-settled .tc-seq,
#tempCloseModal .tc-checked .tc-seq { background: #e7f6ec; color: #16a34a; }
#tempCloseModal .tc-settled td.fw-bold,
#tempCloseModal .tc-checked td.fw-bold { color: #16a34a; }

/* Totals panels: settled (green) and unsettled (amber) with solid net bars */
#tempCloseModal .tc-panel { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; }
#tempCloseModal .tc-panel-s { background: #f2faf5; border-color: #d3ecd9; }
#tempCloseModal .tc-panel-u { background: #fdf8ec; border-color: #f3e5c3; }
#tempCloseModal .tc-panel-head { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 10px 12px; }
#tempCloseModal .tc-panel-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; color: #fff; flex: 0 0 auto; }
#tempCloseModal .tc-panel-s .tc-panel-ico { background: #16a34a; }
#tempCloseModal .tc-panel-u .tc-panel-ico { background: #f59e0b; }
#tempCloseModal .tc-count-chip { margin-inline-start: auto; font-size: 11px; font-weight: 700; color: #fff;
    border-radius: 999px; padding: 3px 10px; }
#tempCloseModal .tc-panel-s .tc-count-chip { background: #16a34a; }
#tempCloseModal .tc-panel-u .tc-count-chip { background: #f59e0b; }
#tempCloseModal .tc-panel-row { display: flex; justify-content: space-between; padding: 6px 12px; }
#tempCloseModal .tc-panel-net { display: flex; justify-content: space-between; align-items: center;
    margin-top: auto; padding: 10px 12px; font-weight: 800; color: #fff; font-size: 14px; }
#tempCloseModal .tc-panel-s .tc-panel-net { background: #16a34a; }
#tempCloseModal .tc-panel-u .tc-panel-net { background: #d97706; }

/* Footer summary values */
#tempCloseModal .tc-foot-val { font-size: 15px; font-weight: 800; color: #0f1b33; }
#tempCloseModal .tc-foot-val.tc-foot-s { color: #16a34a; }
#tempCloseModal .tc-foot-val.tc-foot-u { color: #d97706; }

/* ── Open shifts list modal — clean rows: avatar, orders chip, cancel button ── */
#openShiftsListModal .modal-content { border: 0; border-radius: 16px; }
#openShiftsListModal .modal-header { padding: 14px 20px; }
#openShiftsListModal .modal-title { font-size: 16px; font-weight: 800; color: #0f1b33; }
#openShiftsListModal .osl-title-ico { display: inline-flex; color: #2563eb; }
#openShiftsListModal .osl-count { display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 9px; border-radius: 999px;
    background: #e8f0fe; color: #2563eb; font-weight: 700; font-size: 12.5px; }
#openShiftsListModal .modal-body { font-size: 12.5px; color: #374151; }

/* Table scroll area: fixed height with an always-visible, clearly-colored scrollbar */
#openShiftsListModal .osl-scroll { max-height: 300px; overflow-y: scroll; overflow-x: auto;
    scrollbar-width: thin; scrollbar-color: #94a3b8 #e5e9f0; }
#openShiftsListModal .osl-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
#openShiftsListModal .osl-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px;
    border: 2px solid #e5e9f0; }
#openShiftsListModal .osl-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }
#openShiftsListModal .osl-scroll::-webkit-scrollbar-track { background: #e5e9f0; }

#openShiftsListModal .osl-table { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
#openShiftsListModal .osl-table thead th { position: sticky; top: 0; z-index: 1; background: #fff;
    font-weight: 600; color: #6b7280; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid #eef1f6; }
#openShiftsListModal .osl-table td { padding: 5px 10px; border-bottom: 1px solid #f1f4f9; vertical-align: middle; }
#openShiftsListModal .osl-avatar { display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 11px; margin-inline-end: 6px; }
#openShiftsListModal .osl-orders { display: inline-flex; align-items: center; gap: 4px;
    background: #e8f0fe; color: #2563eb; border-radius: 999px; padding: 2px 8px; font-weight: 700; font-size: 11.5px; }
#openShiftsListModal .osl-bal-pos { color: #16a34a; }
#openShiftsListModal .osl-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 120px;
    color: #dc2626;
    background: #fff;
    border: 1px solid #f3c1c1;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    justify-content: center;
    white-space: nowrap;
}
#openShiftsListModal .osl-cancel-btn:hover:not(:disabled) { background: #fef2f2; border-color: #dc2626; }
#openShiftsListModal .osl-cancel-btn:disabled { opacity: .5; }
#openShiftsListModal .modal-footer .btn { font-size: 13px; }

/* ── Open pilot shift modal ──────────────────────────────────────── */
#openShiftModal .modal-title { font-size: 16px; font-weight: 700; color: #0f1b33; }
#openShiftModal .modal-body { font-size: 12.5px; color: #374151; }
#openShiftModal .form-label { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 2px; }
#openShiftModal .form-control, #openShiftModal .form-select { font-size: 12.5px; }
#openShiftModal .os-head-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; background: #16a34a; color: #fff; flex: 0 0 auto; }
#openShiftModal .modal-footer .btn { font-size: 13px; }

/* ── Final pilot account modal — dashboard design ───────────────── */

/* Fit-to-viewport: the dialog is a full-height centered stage; the modal itself is a
   fixed-height flex column (header / toolbar / cards / invoices / totals / footer).
   Only the invoice list (.scrollwrap) scrolls — the page never scrolls. */
#finalAccountModal .modal-dialog { height: 100vh; max-height: 100vh; width: 100%; max-width: 1360px;
    margin: 0 auto; padding: 14px; display: flex; align-items: center; justify-content: center; }
#finalAccountModal .modal-content { height: calc(100vh - 28px); max-height: calc(100vh - 28px);
    display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: 18px; }
#finalAccountModal .modal-header { flex: 0 0 auto; padding: 11px 20px; }
#finalAccountModal .modal-body { flex: 1 1 auto; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: 8px; padding: 9px 20px 14px; }
#finalAccountModal .fa-toolbar,
#finalAccountModal #faError,
#finalAccountModal .fa-cards,
#finalAccountModal .fa-bottom { flex: 0 0 auto; }
#finalAccountModal .fa-invoices { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#finalAccountModal .fa-invoices > :not(.scrollwrap) { flex: 0 0 auto; }
#finalAccountModal .scrollwrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

#finalAccountModal .fa-rep-select { min-width: 240px; }

/* Bottom row (right→left in RTL): settlement totals · hours card · net-due + buttons card */
#finalAccountModal .fa-bottom { display: flex; align-items: stretch; gap: 12px; }
#finalAccountModal .fa-bottom .fa-totals { flex: 1 1 auto; min-width: 0; max-width: 620px; }
#finalAccountModal .fa-hours-card { flex: 0 0 230px; background: #fff; padding: 12px 14px;
    display: flex; flex-direction: column; justify-content: center; gap: 6px; }
#finalAccountModal .fa-hours-card .form-control { font-size: 16px; font-weight: 800;
    font-variant-numeric: tabular-nums; border-color: #c7d2fe; }
#finalAccountModal .fa-hours-card .input-group-text { border-color: #c7d2fe; background: #f8fafc; }
#finalAccountModal .fa-close-card { flex: 1 1 360px; background: #fff; padding: 12px 14px;
    display: flex; flex-direction: column; justify-content: center; gap: 10px; }
#finalAccountModal .fa-close-card .btn { font-size: 13px; font-weight: 600; }
#finalAccountModal .fa-due-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

#finalAccountModal .modal-title { font-size: 18px; }

#finalAccountModal .fa-head-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; background: #4338ca; color: #fff; flex: 0 0 auto; }
#finalAccountModal .fa-subtitle { font-size: 11.5px; color: #6b7280; }

#finalAccountModal .fa-show-btn { background: #3730a3; border-color: #3730a3; color: #fff; font-weight: 600; }
#finalAccountModal .fa-show-btn:hover,
#finalAccountModal .fa-show-btn:focus { background: #312e81; border-color: #312e81; color: #fff; }

/* Stat cards: due (filled indigo), received (green), remaining (amber), initial (slate) —
   icon sits at the inline-start (right in RTL) with the text beside it */
#finalAccountModal .fa-card { display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    border: 1px solid #e5e7eb; border-radius: 14px;
    padding: 9px 12px; height: 100%; background: #fff; box-shadow: 0 2px 10px rgba(15, 27, 51, .05); }
#finalAccountModal .fa-card-text { min-width: 0; }
#finalAccountModal .fa-card-title { font-size: 11.5px; color: #6b7280; }
#finalAccountModal .fa-card-val { font-size: 18px; font-weight: 800; color: #0f1b33; }
#finalAccountModal .fa-card-val small { font-size: 10px; color: #9ca3af; font-weight: 600; }
#finalAccountModal .fa-card-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; background: #f3f4f6; color: #6b7280; flex: 0 0 auto; }
#finalAccountModal .fa-card-recv .fa-card-val { color: #16a34a; }
#finalAccountModal .fa-card-recv .fa-card-ico { background: #e7f6ec; color: #16a34a; }
#finalAccountModal .fa-card-rem .fa-card-val { color: #d97706; }
#finalAccountModal .fa-card-rem .fa-card-ico { background: #fdf1d9; color: #d97706; }
#finalAccountModal .fa-card-due { background: #4338ca; border-color: #4338ca; }
#finalAccountModal .fa-card-due .fa-card-title { color: #c7d2fe; }
#finalAccountModal .fa-card-due .fa-card-val { color: #fff; }
#finalAccountModal .fa-card-due .fa-card-val small { color: #c7d2fe; }
#finalAccountModal .fa-card-due .fa-card-sub { font-size: 10.5px; color: #c7d2fe; }
#finalAccountModal .fa-card-due .fa-card-ico { background: rgba(255,255,255,.18); color: #fff; }

/* Section containers (invoice list, settlement totals): rounded + soft shadow */
#finalAccountModal .fa-section { border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(15, 27, 51, .05); }

/* All numbers in the modal line up vertically (tabular figures, thousands separators) */
#finalAccountModal .table,
#finalAccountModal .fa-card-val,
#finalAccountModal .fa-due-val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Invoice table: fixed layout (colgroup sets every width; address is the only flexible
   column and truncates), roomy cells, light row dividers, sticky header */
#finalAccountModal .fa-inv-table { table-layout: fixed; width: 100%; font-size: 11.5px; }
#finalAccountModal .fa-inv-table th,
#finalAccountModal .fa-inv-table td { padding: 7px 10px; vertical-align: middle; }
#finalAccountModal .fa-inv-table td { border-bottom: 1px solid #EFF2F9; }
#finalAccountModal .fa-inv-table .fa-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#finalAccountModal .fa-inv-table thead th { position: sticky; top: 0; z-index: 1; background: #F7F9FD; }

/* Invoice list: seq badge, status pills, settled rows */
#finalAccountModal .fa-seq { display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 7px; background: #eef2ff; color: #4338ca;
    font-weight: 700; font-size: 11px; }
#finalAccountModal .fa-pill { display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
#finalAccountModal .fa-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#finalAccountModal .fa-pill-recv { background: #e7f6ec; color: #16a34a; }
#finalAccountModal .fa-pill-rem { background: #fdf1d9; color: #b45309; }
#finalAccountModal .fa-settled td { background: #f2faf5; }
#finalAccountModal .fa-settled td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
[dir="rtl"] #finalAccountModal .fa-settled td:first-child { box-shadow: inset -3px 0 0 #16a34a; }
#finalAccountModal .fa-paid-time { color: #16a34a; font-weight: 600; }

/* Settlement totals: green/amber value columns, dark grand row */
#finalAccountModal .fa-totals-table { font-size: 12.5px; }
#finalAccountModal .fa-totals-table th,
#finalAccountModal .fa-totals-table td { padding: 7px 16px; vertical-align: middle; }
#finalAccountModal .fa-totals-table tbody th { text-align: start; }
#finalAccountModal .fa-c-recv { color: #16a34a; font-weight: 600; }
#finalAccountModal .fa-c-rem { color: #d97706; font-weight: 600; }
#finalAccountModal .fa-grand th, #finalAccountModal .fa-grand td { background: #1e2a44; color: #fff; }
#finalAccountModal .fa-grand td.fa-c-recv { color: #4ade80; }
#finalAccountModal .fa-grand td.fa-c-rem { color: #fbbf24; }

/* Footer: net due to close */
#finalAccountModal .fa-due-val { font-size: 18px; font-weight: 800; color: #4338ca; }

#tempCloseModal .modal-footer .btn,
#assignSalesmanModal .modal-footer .btn { font-size: 13px; }

/* ---- Record-status toggle (.status-switch) ----
   Reusable "نشط / Active" switch for the entry screens' card headers (sub groups,
   and later: items, main groups, customers, tables). Pure CSS over a REAL
   checkbox: the input keeps its asp-for binding and posts exactly as before —
   visually hidden but focusable, so Space toggles it and focus-visible draws a
   ring. RTL-first (knob starts on the right); [dir="ltr"] flips it for the
   English UI. Colors: #16a34a active / #cbd5e1 idle. */
.status-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* The checkbox itself: invisible but still in the page (never display:none),
   so it keeps keyboard focus, Space toggling, and form association. */
.status-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* Track */
.status-switch .status-track {
    position: relative;
    flex: none;
    width: 42px;
    height: 22px;
    border-radius: 11px;
    background: #cbd5e1;
    transition: background-color .2s ease, box-shadow .2s ease;
}

/* Knob — RTL: rests on the right, travels 42 - 16 - (2×3) = 20px leftwards */
.status-switch .status-track::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
    transition: transform .2s ease;
}

.status-switch input:checked ~ .status-track { background: #16a34a; }
.status-switch input:checked ~ .status-track::after { transform: translateX(-20px); }

/* LTR pages (English UI): knob rests on the left and travels rightwards */
[dir="ltr"] .status-switch .status-track::after { right: auto; left: 3px; }
[dir="ltr"] .status-switch input:checked ~ .status-track::after { transform: translateX(20px); }

/* Keyboard focus ring (mouse clicks stay clean) */
.status-switch input:focus-visible ~ .status-track {
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .25);
}

/* Label text: quiet gray when idle, green + semi-bold when active */
.status-switch .status-text {
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    transition: color .2s ease;
}

.status-switch input:checked ~ .status-text {
    color: #16a34a;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .status-switch .status-track,
    .status-switch .status-track::after,
    .status-switch .status-text { transition: none !important; }
}

/* ---- Filled-filter highlight ----
   Paired with the wiring at the end of site.js: a filter input/select holding a
   value gets a soft amber tint so active filters stand out from empty ones. */
.sgx-fgrid input.has-value,
.sgx-fgrid select.has-value,
.sgx-search input.has-value,
.adv-grid input.has-value,
.adv-grid select.has-value {
    background-color: #fff8e1;
    border-color: #ecd9a0;
}
.sgx-fgrid input.has-value:focus,
.sgx-search input.has-value:focus,
.adv-grid input.has-value:focus {
    background-color: #fffdf4;
}