/*
 * SV Aurora HSRP portals – shared look.
 * Builds on bootstrap.min.css and icons.min.css only.
 * Layout and palette follow the Fast-Track proposal: light canvas, floating rounded cards, a maroon gradient menu panel,
 * pill-shaped controls and a bronze-gold call to action with a cut corner. The SV Aurora logo always sits on a white tile
 * so its own gold and charcoal stay true.
 */

/* Self-hosted (SIL Open Font License); the portals' CSP only allows fonts from the site itself. Latin-ext carries ₹. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
             unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../fonts/urbanist-latin.woff2") format("woff2");
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../fonts/urbanist-latin-ext.woff2") format("woff2");
             unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --mx-m-900: #3d0520;
  --mx-m-800: #4b0727;
  --mx-m-700: #5b0a30;
  --mx-m-600: #6a0c36;
  --mx-m-500: #820242;
  --mx-g-600: #89653a;
  --mx-g-500: #9f7b52;
  --mx-g-300: #c9a77c;
  --mx-g-100: #f6eee5;
  --mx-blush: #cdb8c2;
  --mx-blush-100: #f6ecf0;
  --mx-blush-50: #fbf7f9;
  --mx-grad-m: linear-gradient(160deg, #4b0727 0%, #5b0a30 50%, #6a0c36 100%);
  --mx-grad-g: linear-gradient(120deg, #a9865c 0%, #9f7b52 40%, #89653a 100%);
  --mx-lines: linear-gradient(118deg, transparent 0 58%, rgba(255, 255, 255, .06) 58.1%, transparent 58.35%),
              linear-gradient(32deg, transparent 0 74%, rgba(255, 255, 255, .05) 74.1%, transparent 74.35%),
              linear-gradient(152deg, transparent 0 82%, rgba(255, 255, 255, .05) 82.1%, transparent 82.3%),
              linear-gradient(64deg, transparent 0 36%, rgba(255, 255, 255, .035) 36.1%, transparent 36.3%);

  --mx-brand: var(--mx-g-500);
  --mx-brand-hover: var(--mx-g-600);
  --mx-brand-soft: var(--mx-g-100);
  --mx-brand-line: #ecdcc8;
  --mx-ink: #2a141e;

  --mx-bg: #f2f0f1;
  --mx-surface: #ffffff;
  --mx-surface-2: #fbf7f9;
  --mx-surface-3: #f5f2f4;
  --mx-border: #ebe5e8;
  --mx-border-2: #f2eef0;
  --mx-border-strong: #d9cfd4;
  --mx-text: #22181d;
  --mx-heading: #2a141e;
  --mx-muted: #7d7177;
  --mx-subtle: #a89ca2;
  --mx-input: #f5f2f4;

  --mx-accent: var(--mx-m-500);
  --mx-accent-hover: var(--mx-m-600);
  --mx-ring: rgba(106, 12, 54, 0.14);

  --mx-radius: 20px;
  --mx-radius-md: 16px;
  --mx-radius-sm: 12px;
  --mx-shadow: 0 1px 2px rgba(42, 20, 30, .04), 0 8px 24px rgba(42, 20, 30, .05);
  --mx-shadow-lg: 0 24px 64px rgba(42, 20, 30, .22);
  --mx-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mx-font-h: "Urbanist", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --mx-success: #23845a;   --mx-success-soft: #e5f3eb;
  --mx-warning: #a86a12;   --mx-warning-soft: #fbf0dc;
  --mx-danger: #b3263c;    --mx-danger-soft: #fbe7ea;
  --mx-info: #5b4fa3;      --mx-info-soft: #eeebf8;
  --mx-primary: #89653a;   --mx-primary-soft: #f6eee5;
  --mx-secondary: #554b51; --mx-secondary-soft: #eeebed;
  --mx-dark: #6a0c36;      --mx-dark-soft: #f6ecf0;

  --mx-gap: 12px;
  --mx-sidebar-w: 252px;
  --mx-sidebar-w-collapsed: 78px;
  --mx-topbar-h: 72px;
}

/* ---------- Base ---------- */
html, body { background: var(--mx-bg); }
body { font-family: var(--mx-font); font-size: 14px; line-height: 1.5; color: var(--mx-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6, .h5, .h6 { font-family: var(--mx-font-h); color: var(--mx-heading); font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--mx-accent); text-decoration: none; }
a:hover { color: var(--mx-accent-hover); text-decoration: underline; }
::selection { background: var(--mx-blush); color: var(--mx-ink); }

.text-primary { color: var(--mx-accent) !important; }
.text-muted   { color: var(--mx-muted) !important; }
.text-success { color: var(--mx-success) !important; }
.text-warning { color: var(--mx-warning) !important; }
.text-danger  { color: var(--mx-danger) !important; }
.bg-light { background-color: var(--mx-surface-3) !important; }
.fw-medium { font-weight: 500 !important; }
.font-size-13 { font-size: 13px !important; }
.font-size-16 { font-size: 16px !important; }
.font-size-18 { font-size: 18px !important; }
.font-size-20 { font-size: 20px !important; }
.font-size-24 { font-size: 24px !important; }
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }
.tile-count, .laser-no, .portal-table td, .mx-count, .badge, .pagination { font-variant-numeric: tabular-nums; }
code { color: var(--mx-m-500); }

/* ---------- Breadcrumb + page header ---------- */
/* Title + subtitle on the left; breadcrumb (and page actions) on the right, centred on the title line. */
.mx-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1.5rem; padding: 0.5rem 0 1.25rem; }
.mx-page-heading { flex: 1 1 18rem; min-width: 0; }
.mx-page-heading h4 { font-size: 1.875rem; line-height: 1.15; font-weight: 700; margin: 0 0 0.3rem; }
.mx-page-heading p { font-size: 0.875rem; }
.mx-page-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1rem; min-height: 2.2rem; }
.mx-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0.4rem 0.9rem; font-size: 0.8rem; color: var(--mx-muted); background: #fff; border: 1px solid var(--mx-border); border-radius: 99px; }
.mx-breadcrumb a { color: var(--mx-muted); }
.mx-breadcrumb a:hover { color: var(--mx-accent); }
.mx-breadcrumb i { font-size: 0.95rem; color: var(--mx-subtle); }
.mx-breadcrumb [aria-current] { color: var(--mx-heading); font-weight: 600; }
@media (max-width: 575.98px) {
  .mx-page-heading h4 { font-size: 1.5rem; }
  .mx-page-tools { justify-content: flex-start; min-height: 0; }
  .mx-breadcrumb { border-radius: 14px; }
}

/* ---------- Cards ---------- */
.card { background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); box-shadow: var(--mx-shadow); margin-bottom: 1.25rem; }
.card-body { padding: 1.25rem 1.35rem; }
.card-title { font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: 99px; font-weight: 600; padding: 0.5rem 1.05rem; letter-spacing: 0.005em; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn:hover { text-decoration: none; }
.btn-sm { padding: 0.35rem 0.85rem; font-size: 0.8125rem; border-radius: 99px; }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 0.2rem var(--mx-ring) !important; }

/* Primary call to action: bronze gold, square with a cut corner */
.btn-primary { background: var(--mx-grad-g); border: 0; color: #fff; border-radius: 0; letter-spacing: 0.03em; padding: 0.55rem 1.4rem 0.55rem 1.15rem;
               clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%); }
.btn-primary.btn-sm { padding: 0.4rem 1.05rem 0.4rem 0.85rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active { background: var(--mx-grad-g) !important; color: #fff !important; filter: brightness(1.08); }
.btn-primary:focus, .btn-primary:focus-visible { background: var(--mx-grad-g) !important; color: #fff !important; filter: brightness(1.12); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85) !important; }
.btn-primary:disabled, .btn-primary.disabled { background: #d8d0d4; color: #fff; opacity: 1; filter: none; }

.btn-light { background: #fff; border: 1px solid var(--mx-border); color: var(--mx-heading); }
.btn-light:hover, .btn-light:focus { background: var(--mx-surface-2); border-color: var(--mx-border-strong); color: var(--mx-heading); }
.btn-dark { background: var(--mx-grad-m); border-color: transparent; color: #fff; }
.btn-dark:hover, .btn-dark:focus { background: var(--mx-grad-m); filter: brightness(1.12); color: #fff; }
.btn-success { background: var(--mx-success); border-color: var(--mx-success); }
.btn-success:hover, .btn-success:focus { background: #1c6f4b; border-color: #1c6f4b; }
.btn-danger { background: var(--mx-danger); border-color: var(--mx-danger); }
.btn-danger:hover, .btn-danger:focus { background: #951e31; border-color: #951e31; }
.btn-outline-primary { color: var(--mx-m-600); border-color: #e2cfd8; background: #fff; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background: var(--mx-grad-m) !important; border-color: transparent !important; color: #fff !important; }
.btn-outline-primary:disabled { color: var(--mx-subtle); border-color: var(--mx-border); background: #fff; }
.btn-outline-danger { color: var(--mx-danger); border-color: #f0c9cf; background: #fff; }
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active { background: var(--mx-danger-soft) !important; border-color: #f0c9cf !important; color: var(--mx-danger) !important; }
.btn-link { color: var(--mx-accent); }
.btn-link:hover { color: var(--mx-accent-hover); }
.btn-close { border-radius: 50%; background-color: var(--mx-surface-3); padding: 0.55rem; opacity: 0.7; background-size: 0.65rem; }
.btn-close:hover { opacity: 1; background-color: var(--mx-blush-100); }
.btn-close:focus { box-shadow: 0 0 0 0.2rem var(--mx-ring); }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: var(--mx-radius-sm); border: 1px solid transparent; background-color: var(--mx-input); min-height: 40px; font-size: 13.5px; font-weight: 500; color: var(--mx-text);
                              transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.form-control::placeholder { color: var(--mx-subtle); font-weight: 400; }
.form-select-sm { min-height: 34px; font-size: 12.5px; }
.form-control:focus, .form-select:focus { background-color: #fff; border-color: var(--mx-m-600); box-shadow: 0 0 0 3px var(--mx-ring); color: var(--mx-text); }
.form-control:disabled, .form-select:disabled { background-color: var(--mx-surface-3); color: var(--mx-muted); }
.form-label { font-size: 12px; font-weight: 700; color: #5a4f55; letter-spacing: 0.01em; }
.form-check-input { border-color: #c9bcc2; }
.form-check-input:checked { background-color: var(--mx-m-600); border-color: var(--mx-m-600); }
.form-check-input:focus { border-color: var(--mx-m-600); box-shadow: 0 0 0 3px var(--mx-ring); }
.input-group-text { background: var(--mx-surface-3); border-color: transparent; color: var(--mx-muted); border-radius: var(--mx-radius-sm); }

/* ---------- Tables ---------- */
.portal-table { --bs-table-hover-bg: var(--mx-blush-50); color: var(--mx-text); font-size: 13.5px; }
.portal-table th, .portal-table td { white-space: nowrap; vertical-align: middle; }
.portal-table thead.table-light th { background: #fff; color: var(--mx-muted); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid var(--mx-border); }
.portal-table > :not(caption) > * > * { padding: 0.75rem 1rem; border-bottom-color: var(--mx-border-2); }
.portal-table.table-sm > :not(caption) > * > * { padding: 0.5rem 0.85rem; }
.portal-table > :not(:first-child) { border-top: 0; }
.portal-table tbody tr:last-child td { border-bottom: 0; }
.portal-table tbody tr.cursor-pointer:hover { background-color: var(--mx-blush-50); }

/* ---------- Pagination ---------- */
.pagination { gap: 4px; }
.pagination .page-link { border: 1px solid var(--mx-border); border-radius: 99px !important; color: var(--mx-heading); background: #fff; min-width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.pagination .page-link:hover { background: var(--mx-surface-2); border-color: var(--mx-border-strong); color: var(--mx-heading); text-decoration: none; }
.pagination .page-item.active .page-link { background: var(--mx-grad-m); border-color: transparent; color: #fff; }
.pagination .page-item.disabled .page-link { color: #c9bfc4; background: #fff; }
.page-link:focus { box-shadow: 0 0 0 0.2rem var(--mx-ring); }

/* ---------- Badges ---------- */
.badge { font-weight: 700; border-radius: 99px; padding: 0.35em 0.75em; }
.badge.bg-primary { background: var(--mx-grad-g) !important; color: #fff !important; }
.badge.bg-dark { background: var(--mx-grad-m) !important; color: #fff !important; }
.badge.bg-danger { background-color: var(--mx-danger) !important; }
.badge.bg-success { background-color: var(--mx-success) !important; }
.badge.bg-light { background-color: var(--mx-surface-3) !important; color: var(--mx-text) !important; border-color: var(--mx-border) !important; }

/* Status labels: soft tinted pills */
.status-badge { display: inline-flex; align-items: center; gap: 0.4em; border-radius: 99px; font-size: 0.72rem; font-weight: 700; padding: 0.32em 0.8em; white-space: nowrap; }
.status-success   { background: var(--mx-success-soft);   color: var(--mx-success); }
.status-warning   { background: var(--mx-warning-soft);   color: var(--mx-warning); }
.status-danger    { background: var(--mx-danger-soft);    color: var(--mx-danger); }
.status-info      { background: var(--mx-info-soft);      color: var(--mx-info); }
.status-primary   { background: var(--mx-primary-soft);   color: var(--mx-primary); }
.status-secondary { background: var(--mx-secondary-soft); color: var(--mx-secondary); }
.status-dark      { background: var(--mx-dark-soft);      color: var(--mx-dark); }

/* ---------- Alerts ---------- */
.alert { border-radius: 14px; border: 1px solid transparent; }
.alert-info { background: var(--mx-g-100); border-color: var(--mx-brand-line); color: #5a3f22; }
.alert-success { background: #ecf6f0; border-color: #cfe8da; color: #165a3b; }
.alert-warning { background: #fcf4e6; border-color: #f2e0bd; color: #6b4307; }
.alert-danger { background: #fcedef; border-color: #f3ccd2; color: #7c1626; }
.alert-light { background: var(--mx-surface-2); border-color: var(--mx-border) !important; color: var(--mx-text); }
.alert .alert-link { color: inherit; }

/* ---------- Tabs (nav-pills as a segmented pill bar) ---------- */
.nav-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px; background: #fff; border: 1px solid var(--mx-border); border-radius: 99px; }
.nav-pills .nav-link { color: var(--mx-muted); background: transparent; border: 0; border-radius: 99px; padding: 0.45rem 1rem; font-weight: 600; font-size: 0.8125rem; white-space: nowrap; }
.nav-pills .nav-link:hover { color: var(--mx-heading); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background: var(--mx-grad-m); }

/* ---------- Overlays ---------- */
.modal-backdrop { background-color: #2a0c1a; }
.modal-backdrop.show { opacity: 0.5; }
.modal-content { border: 0; border-radius: 24px; box-shadow: var(--mx-shadow-lg); overflow: hidden; }
.modal-header { background: #fff; border-bottom: 1px solid var(--mx-border-2); padding: 1.1rem 1.4rem; }
.modal-title { font-size: 1.15rem; }
.modal-body { padding: 1.25rem 1.4rem; }
.modal-footer { background: #fcfafb; border-top: 1px solid var(--mx-border-2); padding: 0.9rem 1.4rem; }
@media (max-width: 575.98px) { .modal-fullscreen-sm-down .modal-content { border-radius: 0; } }
.offcanvas { box-shadow: var(--mx-shadow-lg); border: 0 !important; }
.offcanvas.offcanvas-end { top: var(--mx-gap); bottom: var(--mx-gap); right: var(--mx-gap); height: auto; border-radius: 24px; overflow: hidden; transform: translateX(calc(100% + 2 * var(--mx-gap))); }
.offcanvas-header { padding: 1.1rem 1.4rem; background: #fff; border-bottom: 1px solid var(--mx-border-2) !important; }
.offcanvas-body { padding: 1.25rem 1.4rem; }
.dropdown-menu { border: 1px solid var(--mx-border); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-lg); padding: 0.4rem; font-size: 14px; min-width: 14rem; }
.dropdown-item { border-radius: 10px; padding: 0.5rem 0.7rem; color: var(--mx-text); }
.dropdown-item:hover { background: var(--mx-surface-2); text-decoration: none; }
.dropdown-divider { border-color: var(--mx-border-2); }
.toast { border: 0 !important; border-left: 4px solid var(--mx-g-300) !important; border-radius: 14px; box-shadow: var(--mx-shadow-lg); background: var(--mx-grad-m) !important; color: #fff; }
.toast.bg-danger { border-left-color: #ff8a9a !important; }
.toast.bg-warning { border-left-color: #ffcf7a !important; }
.toast .btn-close { background-color: transparent; }

/* ---------- App shell: floating maroon menu panel, light workspace ---------- */
.mx-sidebar { position: fixed; top: var(--mx-gap); bottom: var(--mx-gap); left: var(--mx-gap); z-index: 1040; width: var(--mx-sidebar-w); display: flex; flex-direction: column;
              background: var(--mx-lines), var(--mx-grad-m); color: var(--mx-blush); border-radius: 24px; overflow: hidden; box-shadow: 0 14px 40px rgba(75, 7, 39, .25);
              transition: width .2s ease, transform .25s ease; }
.mx-sidebar-brand { flex-shrink: 0; display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1rem 0.9rem; color: #fff; overflow: hidden; }
.mx-sidebar-brand:hover { color: #fff; text-decoration: none; }
.mx-logo-tile { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.mx-logo-tile img { width: 42px; height: auto; }
.mx-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mx-brand-text strong { font-family: var(--mx-font-h); font-size: 1rem; font-weight: 700; line-height: 1.15; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-brand-text span { margin-top: 0.25rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mx-g-300); white-space: nowrap; }

.mx-side-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.25rem 0.75rem 0.75rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.mx-side-title { margin: 1rem 0.5rem 0.4rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(205, 184, 194, .75); white-space: nowrap; }
.mx-side-scroll > .mx-side-title:first-child { margin-top: 0.5rem; }
.mx-side-nav { display: flex; flex-direction: column; gap: 3px; }
.mx-side-nav a, .mx-side-nav button { position: relative; display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 6px 8px; border: 0; border-radius: 99px; background: transparent; color: #eadde3; font-weight: 600; font-size: 13.5px; white-space: nowrap; text-align: left; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.mx-side-nav a i, .mx-side-nav button i { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 1.05rem; color: #f1e5ea; }
.mx-side-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mx-side-nav a:hover, .mx-side-nav button:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.mx-side-nav a.active { background: var(--mx-grad-g); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.mx-side-nav a.active i { background: rgba(255, 255, 255, .2); color: #fff; }
.mx-side-nav .text-danger, .mx-side-nav .text-danger i { color: #ffb3bf !important; }
.mx-mobile-only { display: none; }

.mx-side-footer { flex-shrink: 0; padding: 0.75rem; }
.mx-collapse-btn { width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .08); color: #f1e5ea; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.mx-collapse-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mx-collapse-btn i { width: 1.25rem; font-size: 1.2rem; color: var(--mx-g-300); transition: transform .2s ease; }
.mx-version { margin-top: 0.55rem; text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(205, 184, 194, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-version-short { display: none; }

.mx-body { min-height: 100vh; margin-left: calc(var(--mx-sidebar-w) + 2 * var(--mx-gap)); padding-right: var(--mx-gap); display: flex; flex-direction: column; transition: margin-left .2s ease; }
.mx-backdrop { display: none; }

@media (min-width: 992px) {
  .mx-collapsed .mx-sidebar { width: var(--mx-sidebar-w-collapsed); }
  .mx-collapsed .mx-body { margin-left: calc(var(--mx-sidebar-w-collapsed) + 2 * var(--mx-gap)); }
  .mx-collapsed .mx-sidebar-brand { justify-content: center; padding: 1rem 0.5rem; }
  .mx-collapsed .mx-logo-tile { width: 44px; height: 44px; border-radius: 12px; }
  .mx-collapsed .mx-logo-tile img { width: 38px; }
  .mx-collapsed .mx-brand-text,
  .mx-collapsed .mx-side-label,
  .mx-collapsed .mx-collapse-btn span { display: none; }
  .mx-collapsed .mx-side-title { height: 1px; margin: 0.7rem 0.4rem; font-size: 0; background: rgba(255, 255, 255, .1); }
  .mx-collapsed .mx-side-nav a { justify-content: center; padding: 6px; }
  .mx-collapsed .mx-side-nav a .mx-count { position: absolute; top: 0; right: 4px; min-width: 1.05rem; height: 1.05rem; font-size: 0.6rem; padding: 0 0.25rem; }
  .mx-collapsed .mx-collapse-btn { justify-content: center; padding: 0.55rem; }
  .mx-collapsed .mx-collapse-btn i { transform: rotate(180deg); }
  .mx-collapsed .mx-version { font-size: 0.6rem; letter-spacing: 0; }
  .mx-collapsed .mx-version-full { display: none; }
  .mx-collapsed .mx-version-short { display: inline; }
}

/* Top bar: floats over the canvas and fades into it */
.mx-topbar { position: sticky; top: 0; z-index: 1030; height: var(--mx-topbar-h); display: flex; align-items: center; gap: 0.6rem; padding: var(--mx-gap) 0.5rem 0 0.25rem;
             background: linear-gradient(var(--mx-bg) 78%, rgba(242, 240, 241, 0)); }
.mx-topbar-brand { display: none; align-items: center; gap: 0.5rem; min-width: 0; color: var(--mx-heading); }
.mx-topbar-brand:hover { color: var(--mx-heading); text-decoration: none; }
.mx-topbar-brand img { height: 34px; flex-shrink: 0; padding: 3px 5px; border-radius: 10px; background: #fff; border: 1px solid var(--mx-border); }
.mx-topbar-brand strong { font-family: var(--mx-font-h); font-size: 0.95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Global search */
.mx-search { position: relative; flex: 1; max-width: 520px; display: flex; align-items: center; gap: 0.5rem; }
.mx-search-field { position: relative; flex: 1; }
.mx-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: var(--mx-muted); pointer-events: none; }
.mx-search input { width: 100%; height: 44px; padding: 0 4.5rem 0 2.6rem; border: 1px solid var(--mx-border); border-radius: 99px; background: #fff; color: var(--mx-text); font-size: 13.5px; outline: none; box-shadow: var(--mx-shadow); transition: border-color .15s ease, box-shadow .15s ease; }
.mx-search input::placeholder { color: var(--mx-subtle); }
.mx-search input:focus { border-color: var(--mx-m-600); box-shadow: 0 0 0 3px var(--mx-ring); }
.mx-search kbd { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); padding: 0.25rem 0.55rem; border: 0; border-radius: 8px; background: var(--mx-surface-3); color: var(--mx-muted); font-family: inherit; font-size: 0.68rem; font-weight: 600; box-shadow: none; pointer-events: none; }
.mx-search input:focus + kbd, .mx-search input:not(:placeholder-shown) + kbd { display: none; }
.mx-topbar .mx-search-close, .mx-topbar .mx-search-btn { display: none; }

.mx-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1050; display: none; max-height: 70vh; overflow-y: auto; padding: 0.4rem; background: #fff; border: 1px solid var(--mx-border); border-radius: var(--mx-radius); box-shadow: var(--mx-shadow-lg); }
.mx-search-results.show { display: block; }
.mx-search-head { padding: 0.4rem 0.7rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mx-muted); }
.mx-search-item { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.7rem; border: 0; border-radius: 14px; background: transparent; color: var(--mx-text); text-align: left; }
.mx-search-item:hover, .mx-search-item.active { background: var(--mx-surface-2); }
.mx-search-ico { width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mx-grad-m); color: var(--mx-g-300); }
.mx-search-main { flex: 1; min-width: 0; }
.mx-search-main strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--mx-heading); }
.mx-search-main span { display: block; font-size: 0.75rem; color: var(--mx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-search-results mark { padding: 0 1px; border-radius: 3px; background: var(--mx-brand-line); color: inherit; }
.mx-search-empty { padding: 1rem 0.65rem; text-align: center; font-size: 0.85rem; color: var(--mx-muted); }
.mx-search-all { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 0.35rem; padding: 0.55rem; border-top: 1px solid var(--mx-border-2); font-size: 0.85rem; font-weight: 700; color: var(--mx-accent); }
.mx-search-all:hover, .mx-search-all.active { background: var(--mx-surface-2); color: var(--mx-accent-hover); text-decoration: none; border-radius: 0 0 14px 14px; }

.mx-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.25rem; padding: 0 0.45rem; border-radius: 99px; background: var(--mx-m-600); color: #fff; font-size: 0.66rem; font-weight: 800; line-height: 1; }
.mx-sidebar .mx-count { margin-right: 4px; background: #fff; color: var(--mx-m-600); }
.mx-sidebar a.active .mx-count { background: #fff; color: var(--mx-g-600); }

.mx-actions { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.mx-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--mx-border); background: #fff; color: var(--mx-heading); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: var(--mx-shadow); }
.mx-icon-btn:hover { color: var(--mx-m-600); border-color: var(--mx-blush); }
.mx-divider { display: none; }
.mx-user { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--mx-border); background: #fff; border-radius: 99px; padding: 4px 12px 4px 4px; color: var(--mx-text); box-shadow: var(--mx-shadow); }
.mx-user:hover { border-color: var(--mx-blush); }
.mx-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mx-grad-m); color: #fff; font-family: var(--mx-font-h); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mx-user-name { font-weight: 700; font-size: 0.84rem; max-width: 220px; line-height: 1.2; color: var(--mx-heading); }
.mx-user-sub { font-size: 0.72rem; color: var(--mx-muted); line-height: 1.2; }

.mx-main { flex: 1; width: 100%; padding: 0.5rem 0.5rem 2rem 0.25rem; }
.mx-footer { width: 100%; padding: 0.9rem 0.5rem 1.1rem 0.25rem; color: var(--mx-muted); font-size: 0.78rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.mx-tabbar { display: none; }

@media (max-width: 991.98px) {
  :root { --mx-topbar-h: 66px; }
  .mx-sidebar { width: 280px; max-width: calc(85vw - var(--mx-gap)); transform: translateX(calc(-100% - 2 * var(--mx-gap))); box-shadow: var(--mx-shadow-lg); }
  .mx-sidebar-open .mx-sidebar { transform: translateX(0); }
  .mx-sidebar-open .mx-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(42, 12, 26, 0.5); backdrop-filter: blur(3px); }
  .mx-sidebar-open { overflow: hidden; }
  .mx-body { margin-left: 0; padding: 0 var(--mx-gap); }
  .mx-collapse-btn { display: none; }
  .mx-version { margin-top: 0; }
  .mx-mobile-only { display: block; }
  .mx-topbar { padding: var(--mx-gap) 0 0; }
  .mx-topbar-brand { display: flex; }
  .mx-search { max-width: none; }
  .mx-main { padding: 0.5rem 0 1.5rem; }
  .mx-footer { padding: 0.9rem 0 6rem; }
  .mx-tabbar { display: flex; justify-content: space-around; position: fixed; left: var(--mx-gap); right: var(--mx-gap); bottom: calc(var(--mx-gap) + env(safe-area-inset-bottom)); z-index: 1030;
               background: #fff; border: 1px solid var(--mx-border); border-radius: 22px; box-shadow: 0 10px 30px rgba(42, 20, 30, .14); padding: 0.35rem; }
  .mx-tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.4rem 0.25rem; color: var(--mx-muted); font-size: 0.7rem; font-weight: 600; border-radius: 16px; }
  .mx-tabbar a:hover { text-decoration: none; color: var(--mx-heading); }
  .mx-tabbar a i { font-size: 1.35rem; }
  .mx-tabbar a.active { color: #fff; background: var(--mx-grad-m); }
  .mx-tabbar a.active i { color: var(--mx-g-300); }
  .mx-tabbar .mx-count { position: absolute; top: 0.1rem; left: calc(50% + 0.35rem); }
  #portalToasts { bottom: 5rem !important; }
}

@media (max-width: 767.98px) {
  .mx-search { display: none; position: absolute; inset: var(--mx-gap) 0 0; z-index: 2; padding: 0; background: var(--mx-bg); }
  .mx-search-open .mx-search { display: flex; }
  .mx-search kbd { display: none; }
  .mx-search input { padding-right: 0.9rem; }
  .mx-topbar .mx-search-close, .mx-topbar .mx-search-btn { display: inline-flex; }
  .mx-search-results { left: 0; right: 0; top: calc(100% + 6px); }
  .mx-user { padding: 3px; }
}

/* ---------- Portal components ---------- */
.soft-primary   { background-color: var(--mx-primary-soft); color: var(--mx-primary); }
.soft-secondary { background-color: var(--mx-secondary-soft); color: var(--mx-secondary); }
.soft-success   { background-color: var(--mx-success-soft); color: var(--mx-success); }
.soft-info      { background-color: var(--mx-info-soft); color: var(--mx-info); }
.soft-warning   { background-color: var(--mx-warning-soft); color: var(--mx-warning); }
.soft-danger    { background-color: var(--mx-danger-soft); color: var(--mx-danger); }
.soft-dark      { background-color: var(--mx-dark-soft); color: var(--mx-dark); }

/* Summary tiles: pastel gradient cards with a white round icon */
.tile-icon { width: 2.65rem; height: 2.65rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.tile-count { font-family: var(--mx-font-h); font-size: 1.65rem; font-weight: 800; line-height: 1.1; color: var(--mx-heading); }
.status-tile { cursor: pointer; border: 0; background: linear-gradient(135deg, #f8f3ee, #f3eae0); box-shadow: none; transition: box-shadow .15s ease, transform .15s ease; }
.status-tile.tile-primary   { background: linear-gradient(135deg, #f8f3ee, #f3eae0); }
.status-tile.tile-secondary { background: linear-gradient(135deg, #f7f5f6, #eeebed); }
.status-tile.tile-dark      { background: linear-gradient(135deg, #f8eef2, #f2e2e9); }
.status-tile.tile-warning   { background: linear-gradient(135deg, #fbf4e8, #f6ead6); }
.status-tile.tile-success   { background: linear-gradient(135deg, #eef7f1, #e1f1e8); }
.status-tile.tile-danger    { background: linear-gradient(135deg, #fcefef, #f8e1e4); }
.status-tile.tile-info      { background: linear-gradient(135deg, #f2f0fa, #e9e5f6); }
.status-tile .tile-icon { background: #fff; box-shadow: 0 2px 8px rgba(42, 20, 30, .08); }
.status-tile .text-muted { color: #5f5459 !important; font-weight: 600; }
.status-tile:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(106, 12, 54, .08); }
.status-tile.active { box-shadow: 0 0 0 2px var(--mx-m-600) inset, 0 8px 22px rgba(106, 12, 54, .1); }
.status-tile.active .text-muted { color: var(--mx-m-600) !important; }

/* Plate colour dot (actual plate colours, not theme colours) */
.plate-dot { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.3rem; border-radius: 50%; border: 1px solid #cfc6ca; vertical-align: -1px; background: #adb5bd; }
.plate-dot.plate-white { background: #ffffff; }
.plate-dot.plate-yellow { background: #f1b44c; }
.plate-dot.plate-green { background: #34c38f; }
.plate-dot.plate-black { background: #343a40; }

/* Filter panels */
.portal-filters { margin: 0 0 1.1rem; padding: 0.85rem 0.7rem; background: var(--mx-surface-2); border: 1px solid var(--mx-border-2); border-radius: var(--mx-radius-md); }
.portal-filters .form-label { color: #5a4f55 !important; font-weight: 700; font-size: 0.72rem !important; }
.portal-filters .form-control, .portal-filters .form-select, .portal-filters .select2-container--default .select2-selection--single { background-color: #fff; border-color: var(--mx-border); }
.portal-filters .form-control:focus, .portal-filters .form-select:focus { border-color: var(--mx-m-600); }

/* "18 of 142 vehicles match · 2 filters" summary */
.filter-summary { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; padding: 0.35rem 0.8rem; border-radius: 999px;
                  background: var(--mx-g-100); border: 1px solid var(--mx-brand-line); color: var(--mx-ink); font-size: 0.8125rem; }
.filter-summary i { color: var(--mx-g-600); }
.filter-summary strong { font-size: 0.9rem; }
.filter-summary a { margin-left: 0.25rem; font-weight: 700; }

/* Fitment cards and laser numbers */
.fitment-card { border-top: 3px solid var(--mx-g-500) !important; }
.fitment-card.is-overdue, .fitment-card.is-reupload { border-top-color: var(--mx-danger) !important; }
.laser-box { border: 1px solid var(--mx-border); border-radius: var(--mx-radius-sm); padding: 0.5rem 0.8rem; background: var(--mx-surface-2); }
.laser-box .laser-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--mx-muted); letter-spacing: 0.08em; }
.laser-no { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; color: var(--mx-heading); }
.laser-no-lg { font-size: 1.35rem; }

/* OEM Order Summary: date rows expand into dealer rows */
.summary-table .summary-chevron { transition: transform .15s ease; color: var(--mx-muted); }
.summary-table .summary-day[aria-expanded="true"] .summary-chevron { transform: rotate(90deg); }
.summary-table .summary-dealer td { background: var(--mx-surface-2); }
.summary-table tr.collapsing { transition: none !important; height: auto !important; }

/* Android app banner (Fitment Upload) */
.app-release { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.8125rem; color: var(--mx-muted); }
.app-release > span:not(.badge):not(:first-child)::before { content: "·"; margin-right: 0.5rem; color: var(--mx-subtle); }
.app-release .app-version { color: var(--mx-text); }
.app-release .app-version strong { font-family: SFMono-Regular, Menlo, Consolas, monospace; color: var(--mx-heading); }
.app-notes { font-size: 0.8125rem; }

/* Vahan validation result dialog */
.vahan-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
              background: var(--mx-danger-soft); color: var(--mx-danger); font-size: 1.4rem; flex-shrink: 0; }
.vahan-icon.is-warning { background: var(--mx-warning-soft); color: var(--mx-warning); }
.vahan-message { border-left: 3px solid var(--mx-danger); background: var(--mx-surface-2); border-radius: var(--mx-radius-sm); padding: 0.6rem 0.85rem; font-weight: 600; color: var(--mx-heading); }
.vahan-message.is-warning { border-left-color: var(--mx-warning); }

/* Photo capture slots */
.photo-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
              min-height: 170px; border: 2px dashed var(--mx-border-strong); border-radius: var(--mx-radius-md); background: var(--mx-surface-2); color: var(--mx-muted);
              cursor: pointer; overflow: hidden; text-align: center; padding: 0.75rem; margin-bottom: 0; }
.photo-slot:hover { border-color: var(--mx-g-300); color: var(--mx-m-600); }
.photo-slot.has-photo { border-style: solid; border-color: var(--mx-success); }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot .photo-change { position: absolute; right: 0.5rem; bottom: 0.5rem; z-index: 1; }
.photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 110px; border-radius: var(--mx-radius-sm); background: var(--mx-surface-3); color: var(--mx-muted); font-size: 0.8rem; }
.photo-thumb { display: block; position: relative; border-radius: var(--mx-radius-sm); overflow: hidden; background: var(--mx-surface-3); aspect-ratio: 4 / 3; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.2rem 0.5rem; background: rgba(42, 12, 26, 0.72); color: #fff; font-size: 0.72rem; }

/* Order detail drawer: compact side panel */
.offcanvas.portal-drawer { width: 460px; max-width: calc(100vw - 2 * var(--mx-gap)); font-size: 13.5px; }
.portal-drawer .offcanvas-header { padding: 0.9rem 1.15rem; background: var(--mx-lines), var(--mx-grad-m); border-bottom: 0 !important; }
.portal-drawer .offcanvas-body { padding: 1rem 1.15rem; }
.portal-drawer .offcanvas-title { font-size: 1.1rem; color: #fff; }
.portal-drawer .offcanvas-header .btn-close { filter: invert(1) grayscale(1) brightness(2); background-color: rgba(0, 0, 0, .25); opacity: .8; }
.portal-drawer .offcanvas-header .text-muted { color: var(--mx-blush) !important; }
.portal-drawer .small, .portal-drawer small { font-size: 13px; }
.portal-drawer dl.small dt { font-size: 12.5px; }
.portal-drawer .portal-section { margin-bottom: 1.1rem; }
.portal-drawer .portal-section-title { font-size: 0.7rem; margin-bottom: 0.5rem; }
.portal-drawer .status-badge { font-size: 0.72rem; }
.portal-drawer .badge { font-size: 0.7rem; }
.portal-drawer .portal-timeline li { padding-bottom: 0.65rem; }
.portal-drawer .photo-thumb span { font-size: 0.72rem; }
.portal-drawer .btn { font-size: 0.8125rem; }
.portal-section { margin-bottom: 1.25rem; }
.portal-section-title { font-family: var(--mx-font-h); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mx-g-600); font-weight: 800; margin-bottom: 0.5rem; }

/* Vertical status timeline */
.portal-timeline { list-style: none; padding-left: 0; margin-bottom: 0; }
.portal-timeline li { position: relative; padding-left: 1.75rem; padding-bottom: 0.85rem; }
.portal-timeline li::before { content: ""; position: absolute; left: 0.4rem; top: 0.3rem; bottom: -0.3rem; width: 0; border-left: 2px dashed #e3d7dd; }
.portal-timeline li:last-child::before { display: none; }
.portal-timeline .dot { position: absolute; left: 0.05rem; top: 0.2rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #fff; border: 3px solid var(--mx-blush); }
.portal-timeline li.done .dot { background: var(--mx-m-600); border-color: var(--mx-m-600); box-shadow: 0 0 0 2px #fff inset; }
.portal-timeline li.current .dot { background: var(--mx-g-500); border-color: var(--mx-g-500); box-shadow: 0 0 0 0.25rem var(--mx-g-100); }
.portal-timeline li.failed .dot { background: var(--mx-danger); border-color: var(--mx-danger); }
.portal-timeline li.pending { color: var(--mx-subtle); }

/* Date pickers (flatpickr) */
input[data-datepicker] + .form-control {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237d7177'%3E%3Cpath d='M19 4h-2V2h-2v2H9V2H7v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1rem;
}
.flatpickr-calendar { font-family: var(--mx-font); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-lg); border: 1px solid var(--mx-border); }
.flatpickr-current-month { font-family: var(--mx-font-h); font-size: 1rem; font-weight: 700; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; }
.flatpickr-day { border-radius: 10px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--mx-surface-2); border-color: var(--mx-blush); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--mx-m-600); border-color: var(--mx-m-600); color: #fff; font-weight: 700; }
.flatpickr-day.today { border-color: var(--mx-g-500); }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--mx-g-500); border-color: var(--mx-g-500); color: #fff; }

/* Dropdowns (Select2, styled like .form-select) */
.select2-container--default .select2-selection--single { height: 40px; border: 1px solid transparent; border-radius: var(--mx-radius-sm); background: var(--mx-input); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 0.85rem; padding-right: 2rem; color: var(--mx-text); font-size: 13.5px; font-weight: 500; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--mx-subtle); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 0.5rem; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { background: #fff; border-color: var(--mx-m-600); box-shadow: 0 0 0 3px var(--mx-ring); outline: 0; }
.select2-dropdown { z-index: 1060; border-color: var(--mx-border); border-radius: var(--mx-radius-sm); box-shadow: var(--mx-shadow-lg); font-size: 13.5px; overflow: hidden; }
.select2-container--default .select2-results > .select2-results__options { max-height: 280px; }
.select2-results__option { padding: 0.45rem 0.8rem; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--mx-surface-2); color: var(--mx-m-600); }
.select2-container--default .select2-results__option--selected { background: var(--mx-blush-100); color: var(--mx-heading); font-weight: 700; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--mx-border); border-radius: 10px; padding: 0.4rem 0.6rem; outline: 0; background: var(--mx-input); }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--mx-m-600); background: #fff; }
.select2-sm .select2-selection--single { height: 34px !important; }
.select2-sm .select2-selection--single .select2-selection__rendered { line-height: 32px !important; font-size: 12.5px; }
.select2-sm .select2-selection--single .select2-selection__arrow { height: 32px !important; }

/* Track Status: order journey stepper (vertical on phones) */
.track-actions { min-width: 220px; }
.track-actions .alert { margin-bottom: 0; }
.journey { display: flex; list-style: none; padding: 0; margin: 0; }
.journey li { position: relative; flex: 1 1 0; min-width: 0; padding: 0 0.25rem; text-align: center; }
.journey li::before { content: ""; position: absolute; top: 1.05rem; left: -50%; width: 100%; height: 3px; background: #efe9ec; }
.journey li:first-child::before { display: none; }
.journey li.done::before, .journey li.current::before, .journey li.problem::before { background: var(--mx-grad-g); }
.journey .step-icon { position: relative; z-index: 1; width: 2.25rem; height: 2.25rem; margin: 0 auto 0.45rem; display: flex; align-items: center; justify-content: center;
                      border-radius: 50%; border: 0; background: #efe9ec; color: var(--mx-muted); font-size: 1.1rem; }
.journey li.done .step-icon { background: var(--mx-grad-g); color: #fff; }
.journey li.current .step-icon { background: var(--mx-grad-m); color: #fff; box-shadow: 0 0 0 0.3rem var(--mx-blush-100); }
.journey li.problem .step-icon { background: var(--mx-danger); color: #fff; box-shadow: 0 0 0 0.3rem var(--mx-danger-soft); }
.journey .step-text { display: flex; flex-direction: column; }
.journey .step-label { font-size: 0.78rem; font-weight: 700; color: var(--mx-heading); }
.journey li.pending .step-label { color: var(--mx-muted); font-weight: 500; }
.journey .step-date { font-size: 0.72rem; color: var(--mx-muted); min-height: 1em; }
@media (max-width: 767.98px) {
  .track-actions { min-width: 0; width: 100%; }
  .journey { flex-direction: column; }
  .journey li { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0; text-align: left; }
  .journey li::before { top: -50%; left: calc(1.125rem - 1.5px); width: 3px; height: 100%; }
  .journey .step-icon { margin: 0; flex-shrink: 0; }
}

/* ---------- Sign-in and other full-page messages: white story panel + maroon form panel ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--mx-gap); padding: var(--mx-gap); }
.auth-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.75rem; background: #fff; border: 1px solid var(--mx-border); border-radius: 28px; overflow: hidden; }
.auth-logo { display: flex; align-items: center; gap: 1.25rem; }
.auth-logo img { height: 140px; width: auto; }
.auth-logo span { padding: 0.35rem 0 0.35rem 1.25rem; border-left: 1px solid var(--mx-border); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mx-g-600); }
.auth-art h1 { max-width: 540px; margin: 0 0 1rem; font-size: 2.6rem; line-height: 1.08; font-weight: 600; color: #8d8288; }
.auth-art h1 b { font-weight: 700; color: var(--mx-heading); }
.auth-art p { max-width: 470px; color: var(--mx-muted); font-size: 15px; }
.auth-feat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.4rem; max-width: 520px; }
.auth-feat span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 8px; background: var(--mx-surface-2); border: 1px solid var(--mx-border); border-radius: 99px; font-weight: 600; font-size: 13px; color: var(--mx-heading); }
.auth-feat span i { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mx-grad-m); color: #fff; font-size: 0.95rem; }
.auth-foot { font-size: 12.5px; color: var(--mx-muted); }

.auth-panel { position: relative; display: flex; flex-direction: column; color: #fff; background: var(--mx-lines), var(--mx-grad-m); border-radius: 28px; overflow: hidden; }
.auth-ttl { padding: 1.6rem; text-align: center; border-bottom: 1px solid rgba(205, 184, 194, .25); font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.auth-box { width: 100%; max-width: 460px; margin: auto; padding: 2rem; }
.auth-version { padding: 1rem 1.6rem 1.25rem; text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(205, 184, 194, .75); border-top: 1px solid rgba(205, 184, 194, .15); }
.auth-help { margin-bottom: 0.35rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0; color: var(--mx-blush); }
.auth-help a { color: var(--mx-g-300); font-weight: 600; }
.auth-help a:hover { color: #fff; }
.auth-box p, .auth-box .text-muted { color: var(--mx-blush) !important; }
.auth-box h5 { color: #fff; }
.auth-box .form-label { color: var(--mx-blush); font-weight: 600; letter-spacing: 0.06em; font-size: 12.5px; }
.auth-box .form-control { height: 46px; padding: 0 2px; background: transparent; border: 0; border-bottom: 1px solid rgba(205, 184, 194, .55); border-radius: 0; color: #fff; font-size: 15px; letter-spacing: 0.03em; }
.auth-box .form-control::placeholder { color: rgba(205, 184, 194, .8); }
.auth-box .form-control:focus { background: transparent; box-shadow: none; border-bottom-color: var(--mx-g-300); color: #fff; }
.auth-box .form-control:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #5b0a30 inset; caret-color: #fff; }
.auth-box .text-danger { color: #ffb3bf !important; }
.auth-box .alert-danger { background: rgba(255, 138, 154, .14); border-color: rgba(255, 138, 154, .35); color: #ffd9df; }
.auth-box .btn-primary { min-width: 9rem; padding-top: 0.75rem; padding-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.auth-box .tile-icon { background: rgba(255, 255, 255, .1); color: var(--mx-g-300); }
.auth-box code { color: var(--mx-g-300); }
.auth-box a:not(.btn) { color: var(--mx-g-300); }
@media (max-width: 991.98px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-art { padding: 1.5rem; gap: 1rem; }
  .auth-art h1, .auth-art p, .auth-feat, .auth-foot { display: none; }
  .auth-logo img { height: 88px; }
  .auth-panel { min-height: calc(100vh - 2 * var(--mx-gap) - 120px); }
}

/* Work Queue (embossing station): production steps as a row of tabs with counts */
.queue-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.queue-step { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem; background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: 18px; color: var(--mx-text); text-decoration: none; box-shadow: var(--mx-shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.queue-step:hover { border-color: var(--mx-g-300); color: var(--mx-heading); text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(106, 12, 54, .08); }
.queue-step i { width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mx-blush-100); font-size: 1.1rem; color: var(--mx-m-600); }
.queue-step-label { font-size: 0.8125rem; font-weight: 600; color: var(--mx-muted); }
.queue-step-count { font-family: var(--mx-font-h); font-size: 1.5rem; font-weight: 800; color: var(--mx-heading); line-height: 1.15; }
.queue-step.active { background: var(--mx-lines), var(--mx-grad-m); border-color: transparent; box-shadow: 0 14px 30px rgba(75, 7, 39, .25); }
.queue-step.active i { background: rgba(255, 255, 255, .14); color: var(--mx-g-300); }
.queue-step.active .queue-step-label { color: var(--mx-blush); }
.queue-step.active .queue-step-count { color: #fff; }
.queue-check { width: 2.25rem; }
.qc-plate { border: 1px solid var(--mx-border); border-radius: var(--mx-radius-md); padding: 0.95rem; height: 100%; }
.qc-plate .form-control.is-valid { background-image: none; }

/* Printing (job cards, reports): only the page content */
.print-only { display: none; }
@media print {
  .mx-sidebar, .mx-topbar, .mx-tabbar, .mx-footer, .mx-backdrop, .mx-page-tools, .no-print, .modal, .offcanvas, #portalToasts { display: none !important; }
  .print-only { display: block !important; }
  body { background: #fff !important; }
  .mx-body { margin-left: 0 !important; padding: 0 !important; min-height: 0; }
  .mx-main { padding: 0 !important; }
  .card { box-shadow: none !important; border: 0 !important; }
  .card-body { padding: 0 !important; }
  .portal-table th, .portal-table td { padding: 0.35rem 0.5rem !important; font-size: 11px; }
  .table-responsive { overflow: visible !important; }
  a { color: inherit !important; text-decoration: none !important; }
}