:root {
  --clr-primary: #0060ef;
  --clr-success: #2d7a2d;
  --clr-warning: #d89600;
  --clr-danger: #d9534f;
  --clr-bg: #fafafa;
  --clr-surface: #ffffff;
  --clr-border: #e0e0e0;
  --radius: .6rem;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --font-main: "Inter", system-ui, -apple-system, sans-serif;
}

.form-hint {
  font-size: 12px;
  color: var(--muted-color, var(--muted));
  margin-top: 5px;
  line-height: 1.5;
}

/* Repeatable line editor shared by the purchase and sale forms. */
.line-editor-input { height: 38px; font-size: 13px; }

.line-editor-total {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.line-editor-empty { text-align: center; color: var(--muted-color, var(--muted)); padding: 24px 12px; }

.line-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--danger, #e11d48);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.line-remove:hover { background: rgba(225, 29, 72, 0.08); border-color: var(--danger, #e11d48); }

/* ============================================================================
   Invenza POS — application styles
   Additions layered on top of the Invenza template (app.css + tailwind.css).
   ========================================================================== */

/* Accessibility ------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Tables ------------------------------------------------------------------- */
.table-wrap { width: 100%; overflow-x: auto; }

.data-table tbody td { vertical-align: middle; }

.data-table .cell-actions { width: 60px; text-align: right; }

.table-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--muted);
}

.table-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  background: var(--background);
  color: var(--muted);
}

.table-empty h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.table-empty p { font-size: 13px; }

/* Product thumbnail -------------------------------------------------------- */
.product-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--background);
}

.product-thumb-initials {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--primary);
  background: var(--primary-light);
}

.product-thumb-lg { width: 96px; height: 96px; border-radius: 4px; font-size: 26px; }

/* Forms -------------------------------------------------------------------- */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid { border-color: var(--danger); }

.field-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* --- File / image field ----------------------------------------------------
   A bare <input type="file"> gives no clue what is already stored and no way
   to clear it, so the field is a small stack: current file, replace input, and
   an inline preview of whatever the user just picked. */
.file-field { display: flex; flex-direction: column; gap: 10px; }

.file-field input[type="file"] {
  padding: 8px 10px;
  background: var(--surface, #fff);
}

.file-field-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 4px);
  background: var(--background-alt, rgba(0, 0, 0, 0.02));
}

.file-field-preview {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--background);
  flex: none;
}

.file-field-preview-new { width: 96px; height: 96px; }

.file-field-remove {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.file-field-remove:hover span { color: var(--danger); }

.file-field input.is-over { border-color: var(--primary); }

.form-required::after { content: ' *'; color: var(--danger); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--border);
}

/* Line item editor --------------------------------------------------------- */
.line-items-table { width: 100%; min-width: 720px; border-collapse: collapse; }

.line-items-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--background);
}

.line-items-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}


/* ============================================================================
   Spacing scale
   ============================================================================
   tailwind.css is a prebuilt file, generated from the classes that happened to
   be in use when it was built. Classes added to a view afterwards are simply
   absent from it, so the element renders with no margin at all and the page
   ends up with a gap that does not match its neighbours. These are the ones the
   views actually reference.

   They are declared here rather than in tailwind.css because that file is
   generated and would be overwritten by the next build.

   4px increments, matching the Tailwind scale the rest of the UI already uses.
   ========================================================================== */

.mt-0\.5 { margin-top: 2px; }
.mt-1    { margin-top: 4px; }
.mt-2    { margin-top: 8px; }
.mt-3    { margin-top: 12px; }
.mt-4    { margin-top: 16px; }
.mt-5    { margin-top: 20px; }
.mt-6    { margin-top: 24px; }
.mt-7    { margin-top: 28px; }

.mb-0\.5 { margin-bottom: 2px; }
.mb-1    { margin-bottom: 4px; }
.mb-1\.5 { margin-bottom: 6px; }
.mb-2    { margin-bottom: 8px; }
.mb-3    { margin-bottom: 12px; }
.mb-4    { margin-bottom: 16px; }
.mb-5    { margin-bottom: 20px; }
.mb-6    { margin-bottom: 24px; }

.ml-1    { margin-left: 4px; }
.ml-2    { margin-left: 8px; }
.mr-1    { margin-right: 4px; }
.mr-2    { margin-right: 8px; }

.p-2     { padding: 8px; }
.p-4     { padding: 16px; }
.p-5     { padding: 20px; }
.p-6     { padding: 24px; }

.pt-2    { padding-top: 8px; }
.pb-2    { padding-bottom: 8px; }
.pt-3    { padding-top: 12px; }
.pb-3    { padding-bottom: 12px; }
.pt-4    { padding-top: 16px; }
.pb-4    { padding-bottom: 16px; }

/* Logical inline-axis padding. The physical pr-* cannot be reused here: the
   utility that stood for it has no RTL override, so it would pad the wrong
   side of an Arabic label. */
.ps-1    { padding-left: 4px; padding-right: 4px; }
.ps-2    { padding-left: 8px; padding-right: 8px; }
.ps-3    { padding-left: 12px; padding-right: 12px; }

.gap-1    { gap: 4px; }
.gap-3    { gap: 12px; }
.gap-4    { gap: 16px; }
.gap-5    { gap: 20px; }
.gap-x-2  { column-gap: 8px; }
.gap-x-3  { column-gap: 12px; }
.gap-x-4  { column-gap: 16px; }
.gap-x-8  { column-gap: 32px; }
.gap-y-1  { row-gap: 4px; }
.gap-y-2  { row-gap: 8px; }
.gap-y-3  { row-gap: 12px; }

/* Colour utilities the prebuilt file does not carry. Each one is used in a
   status pill, where falling back to the inherited colour would make a
   "failed" badge look identical to a "paid" one. */
.text-\[var\(--text\)\]    { color: var(--text); }
.text-\[var\(--muted\)\]   { color: var(--muted); }
.text-\[var\(--primary\)\] { color: var(--primary); }
.text-\[var\(--danger\)\]  { color: var(--danger); }

/* Remaining one-off values. The error-page code and the auth logo are sized
   directly rather than through the scale, so they are declared here too. */
.p-1     { padding: 4px; }
.p-1\.5  { padding: 6px; }

.text-\[64px\]  { font-size: 64px; }
.text-\[10px\]  { font-size: 10px; }
.text-\[13px\]  { font-size: 13px; }

.shadow-\[0_4px_14px_rgba\(34\,181\,115\,0\.35\)\] {
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.text-\[var\(--success\)\] { color: var(--success); }
.border-\[var\(--border\)\] { border-color: var(--border); }

.w-\[44px\] { width: 44px; }
.h-\[44px\] { height: 44px; }

.line-items-table .form-input,
.line-items-table .form-select { height: 38px; font-size: 13px; }

.line-items-table .li-amount { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; }

.line-items-table tfoot td { font-size: 13px; border-bottom: none; padding: 6px 12px; }
.line-items-table tfoot tr.total-row td { font-size: 15px; font-weight: 700; color: var(--text); }

.totals-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}

.totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}

.totals-row span:last-child { font-weight: 600; color: var(--text); }

.totals-row.grand {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.totals-row.grand span:last-child { color: var(--primary); font-size: 18px; }


/* ============================================================================
   Header, navigation and page transitions
   ========================================================================== */

/* The action group sits at the trailing edge of the bar. The physical
   margin-left would push it the wrong way in RTL, so this uses the logical
   side: it resolves to the left edge in Arabic and to the right in English. */
#app-header .header-actions { margin-right: auto; }

/* Brand artwork -----------------------------------------------------------
   The supplied logo.png is a wide Arabic wordmark with the tagline set
   underneath it, drawn in black and grey on a transparent background. Two
   published variants exist per artwork so it stays legible on a light or a
   dark surface, and four files appear in the markup:

     logo-on-light / logo-mark-on-light   black artwork, for a light surface
     logo-on-dark  / logo-mark-on-dark    white artwork, for a dark surface

   All four are hidden by default and exactly one is shown, chosen by the
   sidebar's collapsed state and the active theme. Doing the swap in CSS means
   toggling either one costs no network round trip.

   The artwork must not be mirrored in RTL: the Arabic inside it is already
   set right-to-left, so flipping the image would spell the word backwards. */
.brand-logo {
  display: none;
  height: 39px;
  width: auto;
}

/* Expanded sidebar shows the wordmark; collapsed shows the square mark.

   The light variants are guarded by html:not(.dark). Without that guard a rule
   that only tests the collapsed state would still match under the dark theme,
   and the black and white wordmarks would render on top of each other. */
html:not(.dark) #sidebar:not(.collapsed) .brand-logo--full.brand-logo--on-light,
html:not(.dark) #sidebar.collapsed .brand-logo--mark.brand-logo--on-light {
  display: block;
}

.dark #sidebar:not(.collapsed) .brand-logo--full.brand-logo--on-dark,
.dark #sidebar.collapsed .brand-logo--mark.brand-logo--on-dark {
  display: block;
}

/* 72px when collapsed, so the mark is centred rather than pinned to the edge. */
#sidebar.collapsed .brand-logo--mark {
  height: 36px;
  width: 36px;
  margin-inline: auto;
}

/* Auth screens: the square mark only. Hidden by default so that both
   variants never occupy the page at once — as a plain .auth-logo rule would,
   which stacked the black and white artwork on top of each other.
   It sits in the brand panel's header row now, so it keeps its own column
   (flex: none) instead of the text wrapping around it, and it is sized as a
   square rather than by width alone so it aligns with the two-line identity
   block beside it. */
.auth-logo {
  display: none;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  margin: 0;
}

html:not(.dark) .auth-logo.brand-logo--on-light { display: block; }
.dark .auth-logo.brand-logo--on-dark             { display: block; }

/* Page transitions -------------------------------------------------------
   Every internal link fades the content out before the browser leaves, and
   the incoming content rises into place. Vertical only, so nothing has to be
   mirrored when the document direction changes. */
main {
  animation: pageIn 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
body.is-leaving main { opacity: 0; transform: translateY(-8px); }

/* Active menu marker ------------------------------------------------------ */
.nav-item.active::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--primary);
  border-radius: 0 4px 4px 0;
  animation: fadeIn 0.2s ease;
}

/* Keep the pressed state winning over the hover lift added in app.css. */
.btn:active:not(:disabled):not(.btn-ghost) { transform: scale(0.97); }
/* The chart hosts are sized by their wrapper, so the element ApexCharts
    mounts into has to inherit that height instead of collapsing to zero. */
.chart-container > div { height: 100%; }

/* Arabic font override — applies when HTML lang attribute is "ar".
   Sora leads the stack so digits render in Sora; it has no Arabic glyphs, so
   the Arabic text still falls through to IBM Plex Sans Arabic. */
html[lang="ar"] body, [dir="rtl"] body {font-family: var(--font-num) !important; }

/* Mobile responsive tweaks */
@media (max-width: 640px) {
  /* Content is full width; the sidebar offset is cleared in rtl.css, which
     loads after this file. */
  #main-wrapper { margin-left: 0 !important; }

  /* Header: the bar is a fixed 64px, so the children wrap rather than stack —
     a column would push the search box and the action group outside it. The
     search takes the full first row, the icon buttons share the second. */
  #app-header {
    height: auto;
    min-height: var(--header-height);
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 12px;
    gap: 8px 10px;
  }
  #app-header form.search-box {
    flex: 1 0 100%;
    max-width: none;
    order: -1;
  }
  #app-header .header-actions {
    margin: 0;
    margin-inline-start: auto;
  }

  /* A dropdown hangs off the trailing edge of its trigger. On a phone the
     header has wrapped onto two rows, so the trigger sits near the viewport
     edge and the panel spills off the opposite side. Anchoring the panel to
     the header instead — the wrapper stops being its containing block, and the
     sticky header becomes one — lets it drop straight below the bar and
     stretch across the screen, wherever the button that opened it sits. */
  #notification-dropdown-wrapper,
  #user-dropdown-wrapper { position: static; }

  #notification-dropdown,
  #user-dropdown {
    inset-inline: 12px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Collapse grids to single column */
  .page-section .grid { grid-template-columns: 1fr !important; }

  /* Card spacing */
  .card { margin-bottom: 1rem; }
}

/* Products list - bulk bar, sortable headers, product cell ------------------ */
.products-bulk {
  display: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--primary-light);
  border-bottom: 1px solid var(--border);
}
.products-bulk.is-open { display: flex; }
.products-bulk-count { font-size: 13px; font-weight: 600; color: var(--primary); }

.table-select { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}
.th-sort:hover { color: var(--primary); }
.sort-arrow { font-size: 9px; color: var(--muted); }
.th-sort.is-active .sort-arrow { color: var(--primary); }

.product-cell-text { min-width: 0; }
.product-cell-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-cell-name:hover { color: var(--primary); }
.product-cell-sub {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-qty { font-size: 13px; font-weight: 600; color: var(--text); }
.stock-qty-unit { font-size: 11.5px; color: var(--muted); }

/* Products list - prominent search, filter chips, AJAX loading state -------- */
.products-filter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.products-search { position: relative; }
.products-search .search-icon {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  pointer-events: none;
}
.products-search-input {
  width: 100%;
  height: 46px;
  padding-inline: 48px 16px;
  border: 2px solid var(--primary);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
  outline: none;
}
.products-search-input::placeholder { color: var(--muted); }

.products-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-chip:hover { border-color: var(--primary); }
.filter-chip:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.filter-chip-label { font-weight: 600; white-space: nowrap; }
.filter-chip-select {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  max-width: 150px;
}
.filter-chip-caret { font-size: 10px; color: var(--muted); }

.filter-chip-clear {
  color: var(--danger);
  border-style: dashed;
  font-weight: 700;
  text-decoration: none;
}
.filter-chip-clear:hover { border-color: var(--danger); background: rgba(239, 68, 68, 0.06); color: var(--danger); }
.filter-chip.is-hidden { display: none; }

#products-card { transition: opacity 0.15s ease; }
#products-card.is-loading #products-tbody { opacity: 0.45; pointer-events: none; }
#products-card.is-loading .pagination,
#products-card.is-loading .th-sort { pointer-events: none; }

@media (max-width: 640px) {
  .products-search-input { height: 42px; }
  .filter-chip { flex: 1 1 auto; justify-content: space-between; }
}

/* Global 4px radius: override Tailwind rounded-* (rounded-full stays round) */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl { border-radius: 4px; }
.rounded-t, .rounded-b, .rounded-l, .rounded-r, .rounded-tl, .rounded-tr, .rounded-bl, .rounded-br,
.rounded-t-sm, .rounded-b-sm, .rounded-t-md, .rounded-b-md, .rounded-t-lg, .rounded-b-lg,
.rounded-t-xl, .rounded-b-xl { border-radius: 4px; }

/* Header search: compact by default, expands smoothly on focus */
#global-search-box {
  flex: 0 0 auto;
  width: 210px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#global-search-box:focus-within {
  width: 440px;
}

/* ------------------------------------------------------------------------- */
/* Page skeleton loader: page shell stays visible, elements shimmer while the */
/* next screen is being fetched.                                              */
/* ------------------------------------------------------------------------- */
#app-main { position: relative; }

.app-skeleton {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: var(--background);
  padding: 4px 2px;
  animation: sk-fade 0.15s ease;
  pointer-events: none;
}

.app-skeleton .sk {
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.16) 25%, rgba(148, 163, 184, 0.34) 37%, rgba(148, 163, 184, 0.16) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.3s ease infinite;
}

.app-skeleton .sk-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.app-skeleton .sk-title { width: 240px; height: 24px; }
.app-skeleton .sk-sub { width: 170px; height: 12px; }

.app-skeleton .sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.app-skeleton .sk-card { height: 106px; padding: 16px; }
.app-skeleton .sk-card::before,
.app-skeleton .sk-card::after {
  content: "";
  display: block;
  border-radius: 4px;
  background: inherit;
  background-size: 400% 100%;
  animation: inherit;
}
.app-skeleton .sk-card::before { width: 55%; height: 11px; margin-bottom: 14px; }
.app-skeleton .sk-card::after { width: 80%; height: 20px; }

.app-skeleton .sk-table { padding: 0; overflow: hidden; }
.app-skeleton .sk-table-head { height: 42px; border-bottom: 1px solid var(--border); }
.app-skeleton .sk-row {
  height: 46px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 70px 2fr 1fr 1fr 90px;
  gap: 16px;
  align-items: center;
  padding: 0 16px;
}
.app-skeleton .sk-row span { height: 11px; display: block; }

@keyframes sk-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@keyframes sk-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------------------------------------------------------------------- */
/* Morabaa POS (mrb-pos)                                                      */
/* ------------------------------------------------------------------------- */
.posx { display: flex; flex-direction: column; gap: 16px; }

.posx-toolbar {
  display: grid;
  grid-template-columns: 190px 150px minmax(240px, 1fr);
  gap: 12px;
  padding: 14px 16px;
}
.posx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.posx-field > label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
  color: var(--muted); text-transform: none;
}
.posx-control { position: relative; }
.posx-control > svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.posx-input { padding-inline-start: 38px !important; height: 42px; background: var(--surface); }
.posx-select { height: 42px; background: var(--surface); }

.posx-account { position: relative; }
.posx-chip {
  display: none; align-items: center; gap: 8px;
  margin-top: 6px; padding: 6px 10px;
  background: var(--primary-light); color: var(--primary);
  font-size: 12px; font-weight: 700; border-radius: 4px;
}
.posx-chip.is-on { display: inline-flex; }
.posx-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; }
.posx-dropdown {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 40;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); max-height: 280px; overflow: auto; display: none;
}
.posx-dropdown.is-on { display: block; }
.posx-option {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 9px 12px; border: 0; background: none; text-align: start; cursor: pointer;
  font-size: 12.5px; color: var(--text);
}
.posx-option:hover { background: var(--background); }
.posx-option small { font-size: 11px; color: var(--muted); }

.posx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px;
  align-items: start;
}
.posx-products { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.posx-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.posx-search .posx-control { flex: 1; }
.posx-hint { font-size: 11px; color: var(--muted); white-space: nowrap; }

.posx-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 10px;
}

.posx-product {
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px 12px; text-align: start; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  min-height: 126px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.posx-product:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.posx-product:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.posx-product:active { transform: translateY(0); }
.posx-product.is-out { cursor: not-allowed; box-shadow: none; border-style: dashed; }
.posx-product.is-out:hover { border-color: var(--border); transform: none; box-shadow: none; }
.posx-product.is-out .posx-product-name,
.posx-product.is-out .posx-product-meta,
.posx-product.is-out .posx-product-foot { opacity: .45; }

.posx-product-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
.posx-product-name {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 39px;
}
.posx-stock {
  flex: 0 0 auto; min-width: 31px; padding: 2px 8px;
  font-family: var(--font-num); font-size: 11.5px; font-weight: 800;
  text-align: center; border-radius: 999px; border: 1px solid transparent;
}
.posx-stock.badge-success { background: #DCFCE7; color: #15803D; border-color: rgba(21, 128, 61, .35); }
.posx-stock.badge-warning { background: #FEF3C7; color: #B45309; border-color: rgba(180, 83, 9, .35); }
.posx-stock.badge-danger  { background: #FEE2E2; color: #B91C1C; border-color: rgba(185, 28, 28, .35); }
.dark .posx-stock.badge-success { background: #14532D; color: #4ADE80; border-color: rgba(74, 222, 128, .35); }
.dark .posx-stock.badge-warning { background: #451A03; color: #FCD34D; border-color: rgba(252, 211, 77, .35); }
.dark .posx-stock.badge-danger  { background: #450A0A; color: #F87171; border-color: rgba(248, 113, 113, .35); }
.posx-product-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: auto; }
.posx-product-code {
  max-width: 100%; padding: 1px 6px;
  font-size: 10px; color: var(--muted);
  background: var(--background); border: 1px solid var(--border); border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.posx-product-place {
  max-width: 100%; padding: 1px 6px;
  font-size: 10px; font-weight: 600; color: #1D4ED8;
  background: rgba(37, 99, 235, .08); border: 1px solid rgba(37, 99, 235, .3); border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dark .posx-product-place { color: #93C5FD; background: rgba(59, 130, 246, .14); border-color: rgba(147, 197, 253, .35); }
.posx-product-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-top: 7px; border-top: 1px dashed var(--border);
}
.posx-product-label { font-size: 10px; color: var(--muted); }
.posx-product-price { font-family: var(--font-num); font-size: 14.5px; font-weight: 800; color: var(--primary); white-space: nowrap; }
.posx-empty {
  grid-column: 1 / -1; padding: 40px 16px; text-align: center;
  color: var(--muted); font-size: 12.5px; background: var(--surface);
  border: 1px dashed var(--border);
}

.posx-cart {
  padding: 0; display: flex; flex-direction: column;
  position: sticky; top: calc(var(--header-height) + 16px);
  max-height: calc(100vh - var(--header-height) - 32px);
}
.posx-cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.posx-cart-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.posx-count {
  min-width: 24px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 20px;
}
.posx-lines { flex: 1; overflow: auto; min-height: 130px; }
.posx-line { padding: 10px 16px; border-bottom: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
.posx-line-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.posx-line-name { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.5; }
.posx-line-price { font-size: 11px; color: var(--muted); margin-top: 2px; }
.posx-line-x {
  border: 0; background: none; color: var(--danger); cursor: pointer; font-size: 18px; line-height: 1;
  padding: 0 2px; flex-shrink: 0;
}
.posx-line-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.posx-steps { display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--surface); }
.posx-step {
  width: 28px; height: 30px; border: 0; background: none; cursor: pointer;
  color: var(--primary); font-size: 16px; font-weight: 700; line-height: 1;
}
.posx-step:hover { background: var(--background); }
.posx-qty {
  width: 46px; height: 30px; border: 0; border-inline: 1px solid var(--border);
  text-align: center; font-family: var(--font-num); font-size: 12.5px; color: var(--text); background: transparent;
}
.posx-qty:focus { outline: none; background: var(--background); }
.posx-line-total { font-family: var(--font-num); font-size: 13.5px; font-weight: 800; color: var(--text); }

.posx-summary { padding: 14px 16px 16px; border-top: 1px solid var(--border); background: var(--subtle-bg); }
.posx-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.posx-total-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.posx-total {
  font-family: var(--font-num); font-size: 26px; font-weight: 800; color: var(--primary);
  letter-spacing: -.5px; line-height: 1.2;
}
.posx-paid { display: grid; grid-template-columns: 1fr 120px; gap: 8px; align-items: center; margin: 12px 0 8px; }
.posx-paid-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.posx-paid label { font-size: 12px; color: var(--muted); font-weight: 600; }
.posx-paid-full {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; font-family: inherit;
  color: var(--primary); background: rgba(37, 99, 235, .08);
  border: 1px solid rgba(37, 99, 235, .3);
  transition: background .15s ease, border-color .15s ease;
}
.posx-paid-full:hover { background: rgba(37, 99, 235, .16); border-color: rgba(37, 99, 235, .55); }
.posx-paid-full:active { transform: translateY(1px); }
.posx-paid-full:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
.dark .posx-paid-full { color: #93C5FD; background: rgba(59, 130, 246, .14); border-color: rgba(147, 197, 253, .35); }
.posx-paid input { height: 40px; text-align: center; font-family: var(--font-num); font-weight: 700; }
.posx-change {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; color: var(--muted); margin-bottom: 12px;
}
.posx-change strong { font-family: var(--font-num); font-size: 14px; color: var(--success); }
.posx-change.is-negative strong { color: var(--danger); }
.posx-save { width: 100%; height: 46px; font-size: 15px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.posx-save[disabled] { opacity: .65; cursor: not-allowed; }

.posx-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  z-index: 90; min-width: 260px; max-width: min(520px, calc(100vw - 32px));
  padding: 12px 16px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-inline-start: 4px solid var(--success);
  box-shadow: var(--shadow-lg); font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.posx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.posx-toast.is-error { border-inline-start-color: var(--danger); }
.posx-toast a { color: var(--primary); font-weight: 700; text-decoration: none; }

@media (max-width: 1100px) {
  .posx-layout { grid-template-columns: 1fr; }
  .posx-cart { position: static; max-height: none; }
}
@media (max-width: 780px) {
  .posx-toolbar { grid-template-columns: 1fr 1fr; }
  .posx-account { grid-column: 1 / -1; }
  .posx-hint { display: none; }
}

/* Reports: print layout hides the shell and keeps charts/tables readable. */
@media print {
  #sidebar, #app-header, .app-footer, .no-print, .page-header-actions, #notification-dropdown-wrapper { display: none !important; }
  html, body { background: #fff !important; }
  main { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  .table-wrap { max-height: none !important; overflow: visible !important; }
  thead { display: table-header-group; }
  .app-skeleton { display: none !important; }
}

/* ------------------------------------------------------------------------- */
/* In-table AJAX loading (search + pagination without a page reload)          */
/* ------------------------------------------------------------------------- */
[data-ajax-table] { position: relative; }

[data-ajax-table].is-loading .table-wrap,
[data-ajax-table].is-loading .table-footer { opacity: .35; pointer-events: none; transition: opacity .15s ease; }

.ajax-table-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.ajax-skel-row {
  height: 38px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(148,163,184,.14) 25%, rgba(148,163,184,.32) 37%, rgba(148,163,184,.14) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.25s ease infinite;
}

.ajax-table-note {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ------------------------------------------------------------------------- */
/* Purchase invoice form (mrb-purchases/create)                               */
/* ------------------------------------------------------------------------- */
.invx { display: flex; flex-direction: column; gap: 16px; }

.invx-filter { padding: 12px 16px; }
.invx-filter form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
@media (max-width: 780px) { .invx-filter form { grid-template-columns: 1fr; } }

.invx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: stretch; }
.invx-layout > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.invx-layout .invx-top { margin-bottom: 0; }
.invx-layout .invx-items { flex: 1; display: flex; flex-direction: column; }
.invx-layout .invx-table-wrap { flex: 1; }
@media (max-width: 1100px) { .invx-layout { grid-template-columns: 1fr; } .invx-summary { position: static !important; } }

.invx-top { padding: 16px; margin-bottom: 16px; }
.invx-top .grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 900px) { .invx-top .grid { grid-template-columns: 1fr; } }

.invx-items { padding: 0; overflow: hidden; }
.invx-items-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.invx-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.invx-count {
  min-width: 24px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-size: 11.5px; font-weight: 700; border-radius: 20px;
}
.invx-table-wrap { overflow-x: auto; }
/* Header and rows share one grid template, so every label sits exactly over its field */
.invx-grid { min-width: 760px; }
.invx-grid-head,
.invx-line {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 96px 130px 110px 120px 50px;
  align-items: center;
}
.invx-grid-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--background); border-bottom: 1px solid var(--border);
}
.invx-grid-head .invx-cell {
  padding: 10px 8px; font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-align: center; white-space: nowrap;
}
.invx-grid-head .invx-item-cell { text-align: start; }
.invx-line { border-bottom: 1px dashed var(--border); }
.invx-line:nth-child(even) { background: var(--subtle-bg); }
.invx-line:hover { background: var(--primary-light); }
.invx-line.invx-flash { animation: invx-flash .8s ease; }
.invx-cell { min-width: 0; padding: 8px; text-align: center; }
.invx-line .invx-cell + .invx-cell { border-inline-start: 1px solid var(--border); }
.invx-line .invx-item-cell { text-align: start; }
.invx-line .form-select { text-align: start; }
.invx-line .form-input { height: 38px; background: var(--surface); }
.invx-line input[type="number"] { text-align: center; font-family: var(--font-num); }
.invx-grid .invx-no { color: var(--muted); font-size: 12px; }
.invx-total-cell { font-family: var(--font-num); font-weight: 700; font-size: 13px; white-space: nowrap; }
.invx-no { width: 34px; text-align: center; color: var(--muted); font-size: 12px; }
.invx-total-cell { font-family: var(--font-num); font-weight: 700; font-size: 13px; white-space: nowrap; }
.invx-del {
  border: 0; background: none; color: var(--danger); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px;
}
.invx-del:hover { opacity: .75; }

.invx-add {
  width: 100%; padding: 11px; border: 0; border-top: 1px dashed var(--border);
  background: transparent; color: var(--primary); font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
}
.invx-add:hover { background: var(--background); }

/* Invoice summary presented like a printed invoice sheet */
.invx-summary {
  padding: 0; position: static; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background-color: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 24px 48px -30px rgba(15, 23, 42, .45);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(148, 163, 184, .09) 27px 28px);
}
.invx-paper-head { padding: 14px 16px 12px; border-bottom: 2px dashed var(--border); text-align: center; }
.invx-paper-brand {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--muted); text-transform: uppercase;
}
.invx-paper-brand span { display: inline-flex; align-items: center; gap: 5px; }
.invx-paper-tag {
  border: 1px dashed var(--muted); color: var(--muted); border-radius: 3px;
  padding: 1px 6px; letter-spacing: 0; font-size: 9.5px; text-transform: none;
}
.invx-paper-title { margin: 8px 0 4px; font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.invx-paper-meta { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--muted); font-family: var(--font-num); }
.invx-paper-dot { opacity: .55; }
.invx-paper-customer {
  margin-top: 9px; padding-top: 8px; border-top: 1px dotted var(--border);
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text);
}
.invx-summary-body { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.invx-paper-lines {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 12px;
  border: 1px dashed var(--border); border-radius: 6px; background: rgba(148, 163, 184, .06);
}
.invx-paper-lines .invx-row { padding: 5px 0; border-bottom: 1px dotted var(--border); }
.invx-paper-lines .invx-row:last-child { border-bottom: 0; }
.invx-paper .invx-grand {
  margin-top: 2px; padding: 10px 12px; align-items: center;
  border: 2px solid var(--primary); border-radius: 6px; background: var(--primary-light);
}
.invx-paper .invx-grand strong { font-size: 26px; }
.invx-paper-pay { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.invx-paper .invx-remain { border-style: dashed; background: transparent; }
.invx-paper-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border);
  display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted);
}
.invx-paper-sign { letter-spacing: .1em; }
.invx-paper-actions { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1100px) { .invx-summary { height: auto; } }
@media (max-width: 860px) {
  .invx-paper-title { font-size: 17px; }
  .invx-paper .invx-grand strong { font-size: 22px; }
  .invx-paper-head, .invx-summary-body { padding-inline: 12px; }
}

/* ------------------------------------------------------------------------- */
/* Invoice review page (mrb-sales-create/preview)                             */
/* ------------------------------------------------------------------------- */
.prevx-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.prevx-step {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  font-size: 12px; color: var(--muted);
}
.prevx-step.is-done { color: var(--success); border-color: rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .07); }
.prevx-step.is-active { color: var(--primary); border-color: var(--primary); background: var(--primary-light); font-weight: 700; }

.prevx-draft {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 10px 14px; font-size: 12.5px; color: var(--text);
  border: 1px solid rgba(37, 99, 235, .28); border-inline-start: 4px solid var(--primary);
  border-radius: 8px; background: var(--primary-light);
}

.prevx-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.prevx-main .prevx-items { flex: 1; }
.prevx-main .prevx-items .invx-table-wrap { flex: 1; }
.prevx-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; padding: 16px; }
.prevx-party { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.prevx-party-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
}
.prevx-party-value { font-size: 13.5px; font-weight: 700; color: var(--text); word-break: break-word; }
.prevx-party-sub { font-size: 11px; color: var(--muted); font-family: var(--font-num); }

.prevx-items { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.prevx-items-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.prevx-items-units { margin-inline-start: auto; font-size: 11.5px; color: var(--muted); font-family: var(--font-num); }
/* Compact, scroll-free item table on the review page */
.invx-grid.prevx-grid { min-width: 0; }
.prevx-items .invx-table-wrap { overflow-x: hidden; }

@media (min-width: 861px) {
  .prevx-grid .invx-grid-head,
  .prevx-grid .invx-line { grid-template-columns: 32px minmax(0, 1fr) 60px 60px 84px 60px 96px; }
  .prevx-grid .invx-grid-head .invx-cell { padding: 8px 5px; font-size: 10.5px; }
  .prevx-grid .invx-cell { padding: 6px 5px; font-size: 11.5px; }
  .prevx-grid .invx-no { font-size: 10.5px; }
  .prevx-grid .prevx-line-total { font-size: 12px; }
  .prevx-grid .badge { padding: 1px 6px; font-size: 10px; }
}

.prevx-item-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-weight: 600; font-size: 11.5px; line-height: 1.55;
}
.prevx-item-code { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); font-family: var(--font-num); }
.prevx-line-total { font-family: var(--font-num); font-weight: 700; }
.invx-line.is-short { background: rgba(220, 38, 38, .06); }
.invx-line.is-short .prevx-line-total { color: var(--danger); }

.prevx-total-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--subtle-bg);
  font-size: 12.5px; font-weight: 700;
}
.prevx-total-row strong { font-family: var(--font-num); font-size: 15px; }
.prevx-total-row small { font-weight: 500; color: var(--muted); }

.prevx-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; line-height: 1.8; }
.prevx-alert.is-danger { border-color: rgba(220, 38, 38, .3); border-inline-start: 4px solid var(--danger); background: rgba(220, 38, 38, .05); }
.prevx-alert.is-warning { border-color: rgba(217, 119, 6, .35); border-inline-start: 4px solid #D97706; background: rgba(217, 119, 6, .06); }
.prevx-alert.is-warning strong { color: #B45309; }
.prevx-alert strong { color: var(--danger); }

.prevx-note { padding: 9px 10px; border: 1px dashed var(--border); border-radius: 6px; font-size: 12px; background: rgba(148, 163, 184, .05); }
.prevx-actions { display: flex; flex-direction: column; gap: 8px; }
.prevx-actions form { margin: 0; }
.prevx-cancel {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px; border: 0; background: none; color: var(--muted);
  font-size: 12px; cursor: pointer;
}
.prevx-cancel:hover { color: var(--danger); }

@media (max-width: 860px) {
  .prevx-steps { gap: 6px; }
  .prevx-step { padding: 5px 10px; font-size: 11.5px; }
  .prevx-party { align-items: center; }
}
.invx-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; color: var(--muted); gap: 8px; }
.invx-row strong { font-family: var(--font-num); color: var(--text); }
.invx-grand { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); padding-top: 10px; }
.invx-grand span { font-size: 12px; color: var(--muted); }
.invx-grand strong { font-size: 24px; font-family: var(--font-num); color: var(--primary); letter-spacing: -.5px; }
.invx-remain { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--border); padding: 8px 10px; font-size: 12px; color: var(--muted); }
.invx-remain strong { font-family: var(--font-num); font-size: 14px; color: var(--success); }
.invx-remain.is-negative strong { color: var(--danger); }
.invx-save { width: 100%; height: 44px; font-weight: 700; }
.invx-hint { font-size: 11px; color: var(--muted); line-height: 1.7; }

/* Live suggestions for the invoice forms */
.invx-field { position: relative; }
.invx-suggest {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 45;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); max-height: 300px; overflow: auto; display: none;
}
.invx-suggest.is-on { display: block; }
.invx-option {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 8px 12px; border: 0; background: none; text-align: start; cursor: pointer;
  font-size: 12.5px; color: var(--text);
}
.invx-option:hover { background: var(--background); }
.invx-option small { font-size: 11px; color: var(--muted); }
.invx-option .price { font-family: var(--font-num); font-weight: 700; color: var(--primary); }
.invx-option.is-active { background: var(--primary-light); }

/* Searchable account field (replaces the old <select>) */
.invx-account-field .form-input { padding-inline-end: 34px; background-image: none; }
.invx-account-field::after {
  content: ""; position: absolute; inset-inline-end: 12px; top: 50%; width: 13px; height: 13px;
  transform: translateY(-50%); pointer-events: none; opacity: .5;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.2-3.2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.2-3.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.invx-field.is-selected .form-input { border-color: var(--success); box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }

/* Searchable item cell inside every line */
.invx-item-pick { position: relative; display: flex; align-items: center; min-width: 0; }
.invx-item-pick .form-input { padding-inline-end: 30px; }
.invx-item-pick.is-selected .invx-item-search { border-color: var(--success); box-shadow: 0 0 0 3px rgba(22, 163, 74, .1); }
.invx-item-clear {
  position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer;
}
.invx-item-clear[hidden] { display: none; }
.invx-item-clear:hover { background: var(--background); color: var(--danger); }

/* Row suggestions are rendered in a fixed layer so the table cannot clip them */
.invx-floating { position: fixed; inset: auto; z-index: 1200; box-shadow: var(--shadow-lg); }
.invx-suggest-empty { padding: 12px; font-size: 12px; color: var(--muted); }
.invx-flash { animation: invx-flash .8s ease; }
@keyframes invx-flash { 0% { background: var(--primary-light); } 100% { background: transparent; } }

/* ------------------------------------------------------------------------- */
/* Invoice lines: clearer columns, sticky head, stacked cards on mobile       */
/* ------------------------------------------------------------------------- */
.invx-items-head { flex-wrap: wrap; row-gap: 10px; }
.invx-items-title-wrap { display: flex; align-items: center; gap: 10px; }
.invx-items-search { position: relative; flex: 1 1 260px; max-width: 420px; min-width: 200px; }
.invx-items-search .form-input { height: 38px; background: var(--background); }

.invx-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 4px; color: var(--danger);
}
.invx-del:hover { background: #FEE2E2; opacity: 1; }

.invx-items-note {
  padding: 9px 16px; border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--muted); background: var(--surface);
}

@media (max-width: 860px) {
  .invx-grid { min-width: 0; }
  .invx-grid-head { display: none; }
  #invx-rows, .invx-rows { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  .invx-line {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); background: var(--surface); padding: 4px 10px;
  }
  .invx-cell {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 7px 0; border-inline-start: 0 !important; border-bottom: 1px dashed var(--border);
    text-align: start;
  }
  .invx-cell:last-child { border-bottom: 0; }
  .invx-cell::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--muted); }
  .invx-cell[data-label=""]::before { display: none; }
  .invx-no { flex-direction: row; align-items: center; gap: 6px; }
  .invx-total-cell { text-align: start; }
  .invx-del-cell { align-items: flex-end; }
}

/* ============================================
   Sales invoice: quick customer + stock badges
   ============================================ */

.invx-account-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.invx-account-row .invx-account-input {
  flex: 1 1 auto;
  min-width: 0;
}

.invx-quick-account {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Out-of-stock suggestion: visible, but not selectable. */
.invx-option.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

.invx-option.is-disabled * {
  pointer-events: none;
}

.invx-stock.is-out {
  color: #B91C1C;
  font-weight: 700;
}

.invx-stock.is-low {
  color: #B45309;
  font-weight: 700;
}

.invx-stock.is-elsewhere {
  color: #0F766E;
  font-weight: 700;
}

.dark .invx-stock.is-out { color: #FCA5A5; }
.dark .invx-stock.is-low { color: #FCD34D; }

/* Quick customer modal */
.invx-modal[hidden] { display: none; }

.invx-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.invx-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
}

.invx-modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #DDE6ED);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .28);
}

.invx-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.invx-modal-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}

.invx-modal-x {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #6B7280);
}

.invx-modal-error {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #FEE2E2;
  color: #B91C1C;
  font-size: 13px;
}

.invx-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

body.invx-modal-open { overflow: hidden; }


/* ============================================
   Thermal print popup (mrb-bills/show)
   One card per showroom: a printer icon tinted by reachability, the showroom
   name and number, and a check / cross once that showroom's print finishes.
   ============================================ */

.printer-box {
  margin: 8px;
  padding: 8px;
  border: 1px solid var(--border, #DDE6ED);
  border-radius: 8px;
  background: var(--surface, #fff);
}

.thermal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border: 1px solid var(--border, #DDE6ED);
  border-radius: 12px;
  background: var(--surface, #fff);
  text-align: center;
}

.thermal-card-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(217, 106, 106, .12);
  color: var(--danger, #D96A6A);
}

.thermal-card.is-online .thermal-card-icon {
  background: rgba(62, 155, 114, .12);
  color: var(--success, #3E9B72);
}

.thermal-card.is-offline .thermal-card-icon {
  background: rgba(217, 106, 106, .12);
  color: var(--danger, #D96A6A);
}

.thermal-card.is-busy .thermal-card-icon {
  animation: thermal-card-pulse 1.1s ease-in-out infinite;
}

/* The result of this showroom's print, drawn on the icon. */
.thermal-card-mark {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -6px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
}

.thermal-card-mark:not(:empty) { display: flex; }

.thermal-card.is-done .thermal-card-mark   { background: var(--success, #3E9B72); }
.thermal-card.is-failed .thermal-card-mark { background: var(--danger, #D96A6A); }

.thermal-card.is-done   { border-color: var(--success, #3E9B72); }
.thermal-card.is-failed { border-color: var(--danger, #D96A6A); }

.thermal-card-store {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.thermal-card-number {
  font-size: 11px;
  color: var(--muted, #6B7280);
  font-variant-numeric: tabular-nums;
}

@keyframes thermal-card-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.thermal-print-summary {
  margin-top: 12px;
  min-height: 18px;
  font-size: 12px;
  color: var(--muted, #6B7280);
}

.thermal-print-summary.is-done  { color: var(--success, #3E9B72); font-weight: 700; }
.thermal-print-summary.is-error { color: var(--danger, #D96A6A); font-weight: 700; }

.thermal-print-empty {
  grid-column: 1 / -1;
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #6B7280);
}


/* Quotations table: keep the row actions on a single line. */
.quotations-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.quotations-actions .btn {
  flex: 0 0 auto;
}


/* ============================================
   Quotation review (quotations/show)
   ============================================ */

.qview-hero {
  display: flex;
  gap: 24px;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.qview-hero-main { flex: 1 1 360px; min-width: 240px; }

.qview-hero-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.qview-number {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--text);
}

.qview-customer {
  font-size: 16px;
  font-weight: 700;
  margin-top: 10px;
  color: var(--text);
}

.qview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

.qview-meta strong { color: var(--text); font-weight: 600; }

.qview-hero-total {
  min-width: 220px;
  border-inline-start: 1px dashed var(--border);
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.qview-total-label { font-size: 12px; color: var(--muted); }

.qview-total-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

.qview-total-value small {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-inline-start: 4px;
}

.qview-badges { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .qview-hero-total {
    width: 100%;
    border-inline-start: 0;
    border-top: 1px dashed var(--border);
    padding-inline-start: 0;
    padding-top: 12px;
  }
}

/* Alerts ---------------------------------------------------------------- */
.qview-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.9;
}

.qview-alert-danger {
  background: rgba(220, 38, 38, .05);
  border-color: rgba(220, 38, 38, .25);
  border-inline-start: 4px solid var(--danger);
}

/* ---------- printer accordion ---------- */
.printer-accordion {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, .6rem);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.printer-accordion:hover { box-shadow: var(--shadow-md); }

.printer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem .6rem;
  cursor: pointer;
  user-select: none;
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
}

.printer-summary:focus { outline: 2px solid var(--clr-primary); outline-offset: 2px; }

.printer-thumb {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.printer-icon {
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
}
.printer-card-icon { margin-right: .8rem; }
.printer-icon-success { color: var(--clr-success); }
.printer-icon-warning { color: var(--clr-warning); }
.printer-icon-danger { color: var(--clr-danger); }
/* badge-prefixed variants for icon */
.printer-icon-badge-success { color: var(--clr-success); }
.printer-icon-badge-danger { color: var(--clr-danger); }
.printer-icon-badge-warning { color: var(--clr-danger); }
.printer-icon-badge-gray { color: #6b7280; }
.printer-store {
  font-weight: 600;
  font-size: .9rem;
  color: #333;
}

.printer-badge {
  padding: .1rem .4rem;
  border-radius: .4rem;
  font-size: .75rem;
  font-weight: 500;
  text-transform: capitalize;
}
.badge-success   { background: rgba(45,122,45,.12); color: var(--clr-success); }
.badge-warning   { background: rgba(216,150,0,.12); color: var(--clr-warning); }
.badge-danger    { background: rgba(217,83,79,.12); color: var(--clr-danger); }
.badge-gray      { background: rgba(100,100,100,.08); color: #666; }

.printer-box {
  margin: .2rem 0;
  padding: .3rem;
}
.printer-box dl {
  display: grid;
  gap: .3rem;
}

/* ---------- printers page: cards, bulk form, spacing ---------- */
.printer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
}

.printer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  border-top: 1px solid var(--clr-border);
}

.connected-count {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--clr-surface);
}

.printer-filter select {
  min-width: 130px;
  padding: .3rem .45rem;
  border: 1px solid var(--clr-border);
  border-radius: .4rem;
  background: var(--clr-surface);
  font-size: .78rem;
}

.printer-accordion {
  min-width: 0;
}

.printer-summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .55rem .75rem;
  line-height: 1.35;
}

.printer-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 10px;
  background: rgba(15, 23, 42, .05);
}

.printer-card-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.printer-card-store,
.printer-card-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.printer-card-store {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1f2937;
}

.printer-card-name {
  font-size: .75rem;
  line-height: 1.4;
  color: #6b7280;
}

.printer-card-state {
  flex: 0 0 auto;
  margin-inline-start: auto;
  white-space: nowrap;
}

.printer-card-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .5rem .75rem;
  margin: 0 0 .75rem;
  min-width: 0;
}

.printer-card-meta dt {
  margin: 0 0 2px;
  font-size: .7rem;
  line-height: 1.4;
  color: #6b7280;
}

.printer-card-meta dd {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.printer-card-meta dd.mono {
  direction: ltr;
  text-align: start;
  font-variant-numeric: tabular-nums;
}

.printer-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .5rem;
}

.printer-settings {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--clr-border);
}

.printer-settings > summary {
  padding: .25rem 0;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}

.printer-settings-body {
  display: grid;
  gap: .6rem;
  padding-top: .5rem;
}

.printer-field {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.printer-field label {
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
  color: #6b7280;
}

.printer-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .4rem;
  min-width: 0;
}

.printer-field-row > input,
.printer-field-row > .form-input {
  flex: 1 1 120px;
  min-width: 0;
}

.printer-field-row > .printer-field {
  flex: 1 1 120px;
}

.printer-accordion .printer-box {
  margin: 0;
  padding: .65rem .75rem .75rem;
  border: 0;
  border-top: 1px solid var(--clr-border);
  border-radius: 0;
  background: transparent;
}

.bulk-settings > summary {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .9rem;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  border-top: 1px solid var(--clr-border);
}

.bulk-form {
  padding: .75rem .9rem;
}

.bulk-table td,
.bulk-table th {
  padding: .35rem .45rem;
  vertical-align: middle;
}

.bulk-table .form-input {
  min-width: 0;
}

.bulk-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: .6rem;
}

@media (max-width: 520px) {
  .printer-grid {
    grid-template-columns: 1fr;
  }

  .printer-summary {
    gap: .45rem;
    padding: .5rem .55rem;
  }

  .printer-card-state {
    font-size: .65rem;
  }

  .bulk-table th:nth-child(3),
  .bulk-table td:nth-child(3) {
    width: 90px;
  }
}


.qview-alert-warning {
  background: rgba(217, 119, 6, .06);
  border-color: rgba(217, 119, 6, .28);
  border-inline-start: 4px solid #D97706;
}

.qview-alert-icon { flex: 0 0 auto; color: var(--danger); padding-top: 1px; }
.qview-alert-warning .qview-alert-icon { color: #B45309; }

.qview-alert-body strong { display: block; margin-bottom: 4px; }
.qview-alert-body p { margin: 6px 0; }
.qview-alert-list { margin: 10px 0 0; padding-inline-start: 18px; }
.qview-alert-list li { margin-bottom: 5px; }
.qview-alert-hint { color: var(--muted); font-size: 12.5px; margin-top: 8px !important; }

/* Layout ---------------------------------------------------------------- */
.qview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.qview-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.qview-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 84px;
}

@media (max-width: 1024px) {
  .qview-grid { grid-template-columns: 1fr; }
  .qview-side { position: static; order: -1; }
}

/* Items ----------------------------------------------------------------- */
.qview-items-card .card-header {
  padding: 16px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}

.qview-items td { padding-top: 13px; padding-bottom: 13px; }

.qview-items tr.is-short td { background: rgba(220, 38, 38, .045); }
.dark .qview-items tr.is-short td { background: rgba(248, 113, 113, .08); }

.qview-presence { display: flex; flex-wrap: wrap; gap: 5px; }

.qview-place {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--background);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
  white-space: nowrap;
}

.qview-place b { color: var(--text); font-weight: 700; direction: ltr; }

.qview-place-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

.qview-place.is-current {
  background: rgba(16, 185, 129, .09);
  border-color: rgba(16, 185, 129, .45);
  color: #047857;
}

.qview-place.is-empty { border-style: dashed; opacity: .75; }
.qview-place.is-empty b { color: var(--danger); }

.dark .qview-place.is-current { color: #6EE7B7; }

/* Action panel ---------------------------------------------------------- */
.qview-actions { display: flex; flex-direction: column; gap: 14px; }
.qview-actions .card-header { margin-bottom: 0; }
.qview-actions form { margin: 0; }

.qview-action-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}

.qview-action-stack .btn { width: 100%; justify-content: center; }

.qview-return { margin-top: 0; }

.qview-return summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.qview-return summary::-webkit-details-marker { display: none; }

.qview-return[open] summary { margin-bottom: 10px; }

.qview-return form {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}

.qview-danger-zone {
  border-top: 1px dashed var(--border);
  margin-top: 4px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qview-danger-zone form { margin: 0; }
.qview-danger-zone .btn { justify-content: flex-start; padding-inline: 4px; }

/* Timeline -------------------------------------------------------------- */
.qview-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qview-timeline-item {
  display: flex;
  gap: 10px;
  position: relative;
  padding-inline-start: 4px;
}

.qview-timeline-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 8px;
  top: 16px;
  bottom: -14px;
  width: 1px;
  background: var(--border);
}

.qview-timeline-item:last-child::before { display: none; }

.qview-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 5px;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

.qview-event { min-width: 0; }

.qview-event-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

.qview-event-head time { font-size: 11.5px; color: var(--muted); }

.qview-event-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}


/* Notes ------------------------------------------------------------------ */
.qview-note {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.qview-note-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--muted);
  margin-bottom: 6px;
}

.qview-note-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.95;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.qview-note-review {
  background: rgba(217, 119, 6, .05);
  border-color: rgba(217, 119, 6, .28);
  border-inline-start: 3px solid #D97706;
}

.qview-alert-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.95;
}


/* ---------- printers page: job queue ---------- */
.job-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--clr-border);
}

.job-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 210px;
  max-width: 300px;
  margin: 0;
  color: #6b7280;
}

.job-search > svg {
  position: absolute;
  inset-inline-start: .55rem;
  pointer-events: none;
}

.job-search-input {
  width: 100%;
  height: 32px;
  padding-inline-start: 1.9rem;
  font-size: .8rem;
}

.job-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

.job-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .55rem;
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  background: var(--clr-surface);
  font-size: .74rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.job-chip:hover { border-color: var(--clr-primary); color: var(--clr-primary); }

.job-chip.is-active {
  border-color: var(--clr-primary);
  background: rgba(0, 96, 239, .08);
  color: var(--clr-primary);
}

.job-chip-count {
  min-width: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
}

.job-chip.is-active .job-chip-count { background: rgba(0, 96, 239, .14); }

.job-hint {
  margin-inline-start: auto;
  font-size: .72rem;
  color: #6b7280;
  white-space: nowrap;
}

.job-table tbody td { padding-top: .45rem; padding-bottom: .45rem; }

.job-row[hidden],
.job-detail[hidden],
[data-job-empty][hidden] { display: none; }

.job-row.status-failed { background: rgba(217, 83, 79, .04); }
.job-row.status-printing { background: rgba(0, 96, 239, .04); }

.job-id-cell { white-space: nowrap; }

.job-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-inline-end: .3rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  vertical-align: middle;
}

.job-toggle:hover { background: rgba(15, 23, 42, .07); color: #111827; }

.job-caret {
  width: 0;
  height: 0;
  border-inline-start: 5px solid currentColor;
  border-block-start: 4px solid transparent;
  border-block-end: 4px solid transparent;
  transition: transform .15s;
}

html[dir="rtl"] .job-caret { transform: rotate(180deg); }
.job-row.is-open .job-caret { transform: rotate(90deg); }
html[dir="rtl"] .job-row.is-open .job-caret { transform: rotate(-90deg); }

.job-id {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: #6b7280;
}

.job-subject { min-width: 0; }

.job-store {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .45rem;
  margin-top: 1px;
  font-size: .72rem;
  line-height: 1.35;
  color: #6b7280;
}

.job-meta > span + span::before {
  content: '•';
  margin-inline-end: .4rem;
  color: #9ca3af;
}

.job-time {
  white-space: nowrap;
  font-size: .76rem;
  color: #4b5563;
}

.job-attempts { font-variant-numeric: tabular-nums; }

.job-error-dot {
  display: inline-flex;
  align-items: center;
  margin-inline-start: .3rem;
  color: var(--clr-danger);
  vertical-align: middle;
}

.job-detail > td {
  padding: 0;
  border-top: 0;
  background: var(--clr-bg);
}

.job-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem 1rem;
  margin: 0;
  padding: .65rem .9rem .7rem;
  padding-inline-start: 2.1rem;
}

.job-detail-grid dt {
  margin-bottom: 2px;
  font-size: .68rem;
  color: #6b7280;
}

.job-detail-grid dd {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.job-detail-wide { grid-column: 1 / -1; }

.job-detail-error {
  color: var(--clr-danger);
  white-space: pre-wrap;
}

.job-no-match {
  padding: 2rem 1rem;
  text-align: center;
  font-size: .82rem;
  color: #6b7280;
}

@media (max-width: 640px) {
  .job-hint { display: none; }

  .job-search { max-width: none; }
}