/* build 75: the star pattern (assets/css/menu-pattern.css) is built into this file - no @import, so the browser needs one request less before it can paint */
/* NEP ERP - Islamic star pattern for ALL menus (v3.0.0 build 17, stronger in build 40) - BY NEPTUNE UAE
   One shared file, imported by nep.css (whole ERP and every plugin) and by the three NEPTUN POS stylesheets
   (npos.css, npos-admin.css, npos-kitchen.css). A 12-point star lattice is drawn as a CSS mask, so only the SHAPE
   is fixed: the colour always comes from the theme (Settings > Look) - the accent of the rail in the dark menus,
   the accent colour everywhere else.
   Menus covered: side menu + fly-outs, top menu bar + drop-downs, user / language / "+ New" pop-ups, Ctrl+K finder,
   page tab bars of every plugin (HR, Real estate, reports ...), POS category rail, POS back-office sidebar,
   kitchen station bar and drawer.
   Tune on :root:  --menu-pat-color  --menu-pat-op  --menu-pat-op-light  --menu-pat-size    Off:  body.no-menu-pattern
   NOTE: when this file changes, raise the ?v= number (NEP_VERSION.NEP_BUILD) in the @import lines of nep.css and the three npos*.css. */
:root {
  --menu-pat-op: .24;            /* dark menus: side menu, POS rail, POS back office, kitchen */
  --menu-pat-op-light: .15;     /* light menus: drop-downs, fly-outs, pop-ups, tab bars */
  --menu-pat-size: 72px;         /* width of one tile */
  --menu-pat-h: 125px;           /* height of one tile: a WHOLE number of pixels (72 x 1.732 = 124.7). A fractional tile height made the lattice resample soft in build 74 */
  --menu-pat-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 124.71' preserveAspectRatio='none' shape-rendering='geometricPrecision'%3E%3Cpath d='M36 0L20.9 5.6L31.2 18L15.3 15.3L18 31.2L5.6 20.9L0 36L-5.6 20.9L-18 31.2L-15.3 15.3L-31.2 18L-20.9 5.6L-36 0L-20.9 -5.6L-31.2 -18L-15.3 -15.3L-18 -31.2L-5.6 -20.9L-0 -36L5.6 -20.9L18 -31.2L15.3 -15.3L31.2 -18L20.9 -5.6ZM15 4L7.2 4.1L10.9 10.9L4.1 7.2L4 15L0 8.3L-4 15L-4.1 7.2L-10.9 10.9L-7.2 4.1L-15 4L-8.3 0L-15 -4L-7.2 -4.1L-10.9 -10.9L-4.1 -7.2L-4 -15L-0 -8.3L4 -15L4.1 -7.2L10.9 -10.9L7.2 -4.1L15 -4L8.3 -0ZM15 4L20.9 5.6M10.9 10.9L15.3 15.3M4 15L5.6 20.9M-4 15L-5.6 20.9M-10.9 10.9L-15.3 15.3M-15 4L-20.9 5.6M-15 -4L-20.9 -5.6M-10.9 -10.9L-15.3 -15.3M-4 -15L-5.6 -20.9M4 -15L5.6 -20.9M10.9 -10.9L15.3 -15.3M15 -4L20.9 -5.6M40.7 23.5L37.4 23.3L36 26.2L34.6 23.3L31.3 23.5L33.1 20.8L31.3 18.1L34.6 18.3L36 15.4L37.4 18.3L40.7 18.1L38.9 20.8ZM31.2 18L31.3 18.1M0 47L-1.4 44.1L-4.7 44.3L-2.9 41.6L-4.7 38.9L-1.4 39.1L-0 36.2L1.4 39.1L4.7 38.9L2.9 41.6L4.7 44.3L1.4 44.1ZM0 36L0 36.2M108 0L92.9 5.6L103.2 18L87.3 15.3L90 31.2L77.6 20.9L72 36L66.4 20.9L54 31.2L56.7 15.3L40.8 18L51.1 5.6L36 0L51.1 -5.6L40.8 -18L56.7 -15.3L54 -31.2L66.4 -20.9L72 -36L77.6 -20.9L90 -31.2L87.3 -15.3L103.2 -18L92.9 -5.6ZM87 4L79.2 4.1L82.9 10.9L76.1 7.2L76 15L72 8.3L68 15L67.9 7.2L61.1 10.9L64.8 4.1L57 4L63.7 0L57 -4L64.8 -4.1L61.1 -10.9L67.9 -7.2L68 -15L72 -8.3L76 -15L76.1 -7.2L82.9 -10.9L79.2 -4.1L87 -4L80.3 -0ZM87 4L92.9 5.6M82.9 10.9L87.3 15.3M76 15L77.6 20.9M68 15L66.4 20.9M61.1 10.9L56.7 15.3M57 4L51.1 5.6M57 -4L51.1 -5.6M61.1 -10.9L56.7 -15.3M68 -15L66.4 -20.9M76 -15L77.6 -20.9M82.9 -10.9L87.3 -15.3M87 -4L92.9 -5.6M72 47L70.6 44.1L67.3 44.3L69.1 41.6L67.3 38.9L70.6 39.1L72 36.2L73.4 39.1L76.7 38.9L74.9 41.6L76.7 44.3L73.4 44.1ZM72 36L72 36.2M40.8 18L40.7 18.1M0 62.4L-15.1 67.9L-4.8 80.4L-20.7 77.6L-18 93.5L-30.4 83.2L-36 98.4L-41.6 83.2L-54 93.5L-51.3 77.6L-67.2 80.4L-56.9 67.9L-72 62.4L-56.9 56.8L-67.2 44.4L-51.3 47.1L-54 31.2L-41.6 41.5L-36 26.4L-30.4 41.5L-18 31.2L-20.7 47.1L-4.8 44.4L-15.1 56.8ZM-21 66.4L-28.8 66.5L-25.1 73.3L-31.9 69.5L-32 77.3L-36 70.6L-40 77.3L-40.1 69.5L-46.9 73.3L-43.2 66.5L-51 66.4L-44.3 62.4L-51 58.3L-43.2 58.2L-46.9 51.4L-40.1 55.2L-40 47.4L-36 54.1L-32 47.4L-31.9 55.2L-25.1 51.4L-28.8 58.2L-21 58.3L-27.7 62.4ZM-21 66.4L-15.1 67.9M-25.1 73.3L-20.7 77.6M-32 77.3L-30.4 83.2M-40 77.3L-41.6 83.2M-46.9 73.3L-51.3 77.6M-51 66.4L-56.9 67.9M-51 58.3L-56.9 56.8M-46.9 51.4L-51.3 47.1M-40 47.4L-41.6 41.5M-32 47.4L-30.4 41.5M-25.1 51.4L-20.7 47.1M-21 58.3L-15.1 56.8M4.7 85.8L1.4 85.6L-0 88.5L-1.4 85.6L-4.7 85.8L-2.9 83.1L-4.7 80.4L-1.4 80.6L-0 77.7L1.4 80.6L4.7 80.4L2.9 83.1ZM-4.8 80.4L-4.7 80.4M-4.8 44.4L-4.7 44.3M72 62.4L56.9 67.9L67.2 80.4L51.3 77.6L54 93.5L41.6 83.2L36 98.4L30.4 83.2L18 93.5L20.7 77.6L4.8 80.4L15.1 67.9L0 62.4L15.1 56.8L4.8 44.4L20.7 47.1L18 31.2L30.4 41.5L36 26.4L41.6 41.5L54 31.2L51.3 47.1L67.2 44.4L56.9 56.8ZM51 66.4L43.2 66.5L46.9 73.3L40.1 69.5L40 77.3L36 70.6L32 77.3L31.9 69.5L25.1 73.3L28.8 66.5L21 66.4L27.7 62.4L21 58.3L28.8 58.2L25.1 51.4L31.9 55.2L32 47.4L36 54.1L40 47.4L40.1 55.2L46.9 51.4L43.2 58.2L51 58.3L44.3 62.4ZM51 66.4L56.9 67.9M46.9 73.3L51.3 77.6M40 77.3L41.6 83.2M32 77.3L30.4 83.2M25.1 73.3L20.7 77.6M21 66.4L15.1 67.9M21 58.3L15.1 56.8M25.1 51.4L20.7 47.1M32 47.4L30.4 41.5M40 47.4L41.6 41.5M46.9 51.4L51.3 47.1M51 58.3L56.9 56.8M76.7 85.8L73.4 85.6L72 88.5L70.6 85.6L67.3 85.8L69.1 83.1L67.3 80.4L70.6 80.6L72 77.7L73.4 80.6L76.7 80.4L74.9 83.1ZM67.2 80.4L67.3 80.4M36 109.3L34.6 106.4L31.3 106.6L33.1 103.9L31.3 101.2L34.6 101.4L36 98.5L37.4 101.4L40.7 101.2L38.9 103.9L40.7 106.6L37.4 106.4ZM36 98.4L36 98.5M4.8 80.4L4.7 80.4M4.8 44.4L4.7 44.3M36 26.4L36 26.2M67.2 44.4L67.3 44.3M144 62.4L128.9 67.9L139.2 80.4L123.3 77.6L126 93.5L113.6 83.2L108 98.4L102.4 83.2L90 93.5L92.7 77.6L76.8 80.4L87.1 67.9L72 62.4L87.1 56.8L76.8 44.4L92.7 47.1L90 31.2L102.4 41.5L108 26.4L113.6 41.5L126 31.2L123.3 47.1L139.2 44.4L128.9 56.8ZM123 66.4L115.2 66.5L118.9 73.3L112.1 69.5L112 77.3L108 70.6L104 77.3L103.9 69.5L97.1 73.3L100.8 66.5L93 66.4L99.7 62.4L93 58.3L100.8 58.2L97.1 51.4L103.9 55.2L104 47.4L108 54.1L112 47.4L112.1 55.2L118.9 51.4L115.2 58.2L123 58.3L116.3 62.4ZM123 66.4L128.9 67.9M118.9 73.3L123.3 77.6M112 77.3L113.6 83.2M104 77.3L102.4 83.2M97.1 73.3L92.7 77.6M93 66.4L87.1 67.9M93 58.3L87.1 56.8M97.1 51.4L92.7 47.1M104 47.4L102.4 41.5M112 47.4L113.6 41.5M118.9 51.4L123.3 47.1M123 58.3L128.9 56.8M76.8 80.4L76.7 80.4M76.8 44.4L76.7 44.3M36 124.7L20.9 130.3L31.2 142.7L15.3 140L18 155.9L5.6 145.6L0 160.7L-5.6 145.6L-18 155.9L-15.3 140L-31.2 142.7L-20.9 130.3L-36 124.7L-20.9 119.1L-31.2 106.7L-15.3 109.4L-18 93.5L-5.6 103.8L-0 88.7L5.6 103.8L18 93.5L15.3 109.4L31.2 106.7L20.9 119.1ZM15 128.7L7.2 128.8L10.9 135.7L4.1 131.9L4 139.7L0 133L-4 139.7L-4.1 131.9L-10.9 135.7L-7.2 128.8L-15 128.7L-8.3 124.7L-15 120.7L-7.2 120.6L-10.9 113.8L-4.1 117.5L-4 109.8L-0 116.4L4 109.8L4.1 117.5L10.9 113.8L7.2 120.6L15 120.7L8.3 124.7ZM15 128.7L20.9 130.3M10.9 135.7L15.3 140M4 139.7L5.6 145.6M-4 139.7L-5.6 145.6M-10.9 135.7L-15.3 140M-15 128.7L-20.9 130.3M-15 120.7L-20.9 119.1M-10.9 113.8L-15.3 109.4M-4 109.8L-5.6 103.8M4 109.8L5.6 103.8M10.9 113.8L15.3 109.4M15 120.7L20.9 119.1M-0 88.7L-0 88.5M31.2 106.7L31.3 106.6M108 124.7L92.9 130.3L103.2 142.7L87.3 140L90 155.9L77.6 145.6L72 160.7L66.4 145.6L54 155.9L56.7 140L40.8 142.7L51.1 130.3L36 124.7L51.1 119.1L40.8 106.7L56.7 109.4L54 93.5L66.4 103.8L72 88.7L77.6 103.8L90 93.5L87.3 109.4L103.2 106.7L92.9 119.1ZM87 128.7L79.2 128.8L82.9 135.7L76.1 131.9L76 139.7L72 133L68 139.7L67.9 131.9L61.1 135.7L64.8 128.8L57 128.7L63.7 124.7L57 120.7L64.8 120.6L61.1 113.8L67.9 117.5L68 109.8L72 116.4L76 109.8L76.1 117.5L82.9 113.8L79.2 120.6L87 120.7L80.3 124.7ZM87 128.7L92.9 130.3M82.9 135.7L87.3 140M76 139.7L77.6 145.6M68 139.7L66.4 145.6M61.1 135.7L56.7 140M57 128.7L51.1 130.3M57 120.7L51.1 119.1M61.1 113.8L56.7 109.4M68 109.8L66.4 103.8M76 109.8L77.6 103.8M82.9 113.8L87.3 109.4M87 120.7L92.9 119.1M40.8 106.7L40.7 106.6M72 88.7L72 88.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* every menu surface: own stacking context, so the pattern sits between its background and its content */
.sidenav,
.np-rail,
.a-side,
.flyout,
.topnav-drop,
.popover,
.palette-box,
.topnav,
.hr-tabs,
.re-report-nav,
.nt-tabs,
.k-top,
.k-drawer-in { isolation: isolate; }
.hr-tabs, .re-report-nav, .nt-tabs, .palette-box, .np-rail, .k-top, .k-drawer-in { position: relative; }

/* the pattern layer */
.sidenav::before,
.np-rail::before,
.a-side::before,
.flyout::before,
.topnav-drop::before,
.popover::before,
.palette-box::before,
.topnav::before,
.hr-tabs::before,
.re-report-nav::before,
.nt-tabs::before,
.k-top::before,
.k-drawer-in::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: var(--menu-pat-color, var(--accent)); opacity: var(--menu-pat-op-light);
  -webkit-mask-image: var(--menu-pat-img);        mask-image: var(--menu-pat-img);
  -webkit-mask-size: var(--menu-pat-size) var(--menu-pat-h);    mask-size: var(--menu-pat-size) var(--menu-pat-h);
  -webkit-mask-repeat: repeat;                     mask-repeat: repeat;
  -webkit-mask-position: 50% 50%;                  mask-position: 50% 50%;
}

/* tall dark menus: stronger, in the rail accent colour (one mask layer only: crisper and cheaper to paint than the old fading gradient) */
.sidenav::before,
.np-rail::before,
.a-side::before {
  background: var(--menu-pat-color, var(--rail-accent, var(--accent))); opacity: var(--menu-pat-op);
}
/* kitchen screen is dark too */
.k-top::before,
.k-drawer-in::before { opacity: var(--menu-pat-op); }
.sn-collapsed .sidenav::before {
  -webkit-mask-size: 58px 100px; mask-size: 58px 100px;
}
/* drop-downs: the pattern layer stays on the box, the LIST inside scrolls (build 20 fix: long lists could not be scrolled) */
.topnav-drop { overflow: visible; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); display: flex; flex-direction: column; }
.palette-box { overflow: hidden; }
.topnav-drop > ul { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; z-index: 1; }
.popover { display: flex; flex-direction: column; max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow: visible; }
.popover > .pop-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; z-index: 1; }
.popover > .pop-title { flex: none; position: relative; z-index: 1; }
.popover:not(:has(> .pop-scroll)) { overflow-y: auto; overscroll-behavior: contain; }  /* a pop-up without the wrapper still scrolls */
.popover::before { border-radius: var(--r-lg); }
/* fly-out scrolls, so its layer is fixed to the same box */
.flyout::before { position: fixed; inset: 0; inset-inline-start: inherit; width: inherit; }

body.no-menu-pattern .sidenav::before, body.no-menu-pattern .flyout::before, body.no-menu-pattern .topnav::before,
body.no-menu-pattern .topnav-drop::before, body.no-menu-pattern .popover::before, body.no-menu-pattern .palette-box::before,
body.no-menu-pattern .hr-tabs::before, body.no-menu-pattern .re-report-nav::before, body.no-menu-pattern .nt-tabs::before,
body.no-menu-pattern .np-rail::before, body.no-menu-pattern .a-side::before, body.no-menu-pattern .k-top::before,
body.no-menu-pattern .k-drawer-in::before { display: none; }
@media print, (forced-colors: active) {
  .sidenav::before,
  .np-rail::before,
  .a-side::before,
  .flyout::before,
  .topnav-drop::before,
  .popover::before,
  .palette-box::before,
  .topnav::before,
  .hr-tabs::before,
  .re-report-nav::before,
  .nt-tabs::before,
  .k-top::before,
  .k-drawer-in::before { display: none; }
}

/* NEP ERP v1.0.0 - interface styles - BY NEPTUNE UAE
   Colours, corners and spacing come from the theme variables (see core/lib/theme.php). */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--canvas-text);
  background: var(--canvas);
  font-feature-settings: "tnum" 0;
}
[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
kbd {
  font: 500 11px/1 "IBM Plex Sans", system-ui, sans-serif;
  padding: 3px 6px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--chip); color: var(--muted);
}
:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: var(--r); }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }
.block { display: block; }
.nowrap { white-space: nowrap; }
.mono-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.link { font-weight: 500; font-size: 13px; }

/* ================= Rail ================= */
.rail {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 30;
  width: 88px; display: flex; flex-direction: column; align-items: center;
  background: var(--ink-bg, var(--ink)); color: var(--on-ink);
  padding: 14px 0 12px;
}
.rail-brand {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: var(--r-lg); margin-bottom: 14px;
  background: var(--ink-2); color: var(--accent);
}
.rail-brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; }
img.brand-mark.is-logo { width: 42px; height: 42px; object-fit: contain; }
/* v3.8.1 build 78: the planet mark cuts its N and ring gap in the colour of the tile it sits on */
.about-mark { --mark-ground: var(--ink); }
.login-mark svg, .about-mark svg { width: 100%; height: 100%; display: block; }
span.login-mark { padding: 5px; }
span.about-mark { padding: 8px; }
.rail-nav { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; overflow-y: auto; scrollbar-width: none; }
.rail-item {
  position: relative; width: 74px; padding: 10px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 0; background: transparent; color: var(--on-ink-muted);
  font-family: inherit; font-weight: 500; font-size: 11.5px; line-height: 1.2; text-align: center;
  border-radius: var(--r); cursor: pointer;
}
.rail-item i { font-size: 19px; }
.rail-item:hover { background: var(--ink-2); color: var(--on-ink); text-decoration: none; }
.rail-item.is-active, .rail-item.is-open { background: var(--ink-2); color: var(--on-ink); }
.rail-item.is-active i, .rail-item.is-open i { color: var(--rail-accent); }
.rail-item.is-active::before {
  content: ""; position: absolute; inset-inline-start: -7px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: var(--accent);
}
.rail-sign { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; color: var(--on-ink-muted); padding-top: 10px; }
.rail-sign b { font-weight: 600; letter-spacing: .02em; color: var(--on-ink); font-size: 10.5px; }

/* ================= Flyouts ================= */
.flyout {
  position: fixed; z-index: 29; inset-block: 0; inset-inline-start: 88px; width: 330px;
  background: var(--card); color: var(--text);
  border-inline-end: 1px solid var(--line);
  box-shadow: 18px 0 40px -24px rgba(10, 16, 28, .45);
  padding: 22px 14px; overflow-y: auto;
  animation: fly-in .16s ease-out;
}
[dir="rtl"] .flyout { box-shadow: -18px 0 40px -24px rgba(10, 16, 28, .45); }
@keyframes fly-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
[dir="rtl"] .flyout { animation-name: fly-in-rtl; }
@keyframes fly-in-rtl { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.flyout-head { display: flex; align-items: center; gap: 10px; padding: 0 8px 14px; color: var(--muted); }
.flyout-head h2 { font-size: 17px; color: var(--text); }
.flyout ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.flyout a { display: flex; gap: 12px; align-items: center; padding: 9px 8px; border-radius: var(--r); color: var(--text); }
.flyout a:hover, .flyout a.is-active { background: var(--hover); text-decoration: none; }
.flyout a.is-active b { color: var(--accent-deep); }
.fl-text { display: flex; flex-direction: column; min-width: 0; }
.fl-text b { font-weight: 500; }
.fl-text small { color: var(--muted); font-size: 12.5px; }

/* Coloured icon wells shared by tiles, flyouts, tables */
.well {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r); font-size: 17px;
  background: color-mix(in srgb, var(--tile, var(--accent)) 14%, var(--card));
  color: color-mix(in srgb, var(--tile, var(--accent)) 88%, var(--text));
}
.well-sm { width: 32px; height: 32px; font-size: 14px; border-radius: var(--r-sm); }

/* ================= Shell / top bar ================= */
.shell { margin-inline-start: 88px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px; background: var(--topbar-bg, var(--topbar)); color: var(--on-topbar);
  border-bottom: 1px solid var(--topbar-line);
}
.crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--on-topbar-muted); font-size: 13.5px; }
.crumbs a { color: var(--on-topbar-muted); }
.crumbs .sep { font-size: 9px; opacity: .7; }
.crumb-current { color: var(--on-topbar); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-tools { display: flex; align-items: center; gap: 8px; }
.palette-open {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px 0 12px; min-width: 230px;
  border: 1px solid var(--topbar-line); border-radius: var(--r); background: var(--topbar-soft);
  color: var(--on-topbar-muted); font: inherit; cursor: pointer;
}
.palette-open span { flex: 1; text-align: start; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px;
  border: 0; border-radius: var(--r); background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.topbar .icon-btn:hover { background: var(--topbar-soft); }
.lang-switch { margin: 0; }
.usermenu { position: relative; }
.avatar-btn { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: var(--r); }
.avatar-btn:hover { background: var(--topbar-soft); }
.avatar-btn .who { display: flex; flex-direction: column; text-align: start; line-height: 1.2; }
.avatar-btn .who small { color: var(--on-topbar-muted); font-size: 11.5px; }
.avatar-btn > i { font-size: 10px; color: var(--on-topbar-muted); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 13px;
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-lg { width: 76px; height: 76px; font-size: 26px; }
.popover {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 220px; z-index: 40;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 6px; box-shadow: 0 16px 40px -16px rgba(10, 16, 28, .35);
}
.popover a, .popover button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; background: transparent; color: var(--text); font: inherit; text-align: start;
  border-radius: var(--r-sm); cursor: pointer;
}
.popover a:hover, .popover button:hover { background: var(--hover); text-decoration: none; }
.popover i { width: 16px; color: var(--muted); }
.popover form { margin: 0; border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 4px; }

.content { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 28px 32px 40px; }
.content.is-wide { max-width: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.page-head h1 { font-size: 26px; }
.page-head p { color: var(--canvas-muted); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.app-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 32px; font-size: 12px; color: var(--canvas-muted); border-top: 1px solid var(--canvas-line);
}
.signature b { color: var(--canvas-text); font-weight: 600; letter-spacing: .03em; }

/* ================= Controls ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--r);
  border: 1px solid transparent; background: var(--accent); color: var(--on-accent);
  font-family: inherit; font-weight: 500; font-size: 14px; line-height: 1; cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--hover); filter: none; }
.btn-danger { color: var(--danger); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span:first-child { font-size: 13px; font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea, .color-pair input[data-hex] {
  width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit;
}
.field textarea { height: auto; min-height: 90px; padding: 10px 12px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.field .hint { color: var(--faint); font-size: 12px; }
.field .error { color: var(--danger); font-size: 12.5px; font-weight: 500; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.pw { position: relative; display: block; }
.pw input { padding-inline-end: 44px; }
.pw .icon-btn { position: absolute; inset-inline-end: 2px; top: 1px; color: var(--muted); }
.check-line { display: flex; align-items: center; gap: 10px; align-self: end; min-height: 40px; }
.check-line input { width: 18px; height: 18px; accent-color: var(--accent); }

.segmented { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r); background: var(--chip); border: 1px solid var(--line-2); flex-wrap: wrap; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer; font-weight: 500; color: var(--muted); }
.seg input:checked + span { background: var(--card); color: var(--accent-deep); box-shadow: 0 1px 2px rgba(10, 16, 28, .12); }
.seg input:focus-visible + span { outline: 3px solid var(--accent-ring); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge-neutral { background: var(--chip); color: var(--muted); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-accent { background: var(--accent-soft); color: var(--accent-deep); }

.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); margin-bottom: 16px; font-weight: 500; }
.notice i { margin-top: 3px; }
.notice-ok { background: var(--ok-soft); color: var(--ok); }
.notice-error { background: var(--danger-soft); color: var(--danger); }
.notice-warn { background: var(--warn-soft); color: var(--warn); }
.notice-info { background: var(--info-soft); color: var(--info); }

/* ================= Cards, forms, grids ================= */
.card { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: var(--pad) var(--pad-l); border-bottom: 1px solid var(--line-2); }
.card-head h2 { font-size: 15px; }
.form-stack { display: grid; gap: 18px; }
.form-card { padding: var(--pad-l); display: grid; gap: 18px; }
.form-card-head { display: flex; gap: 14px; align-items: flex-start; }
.form-card-head > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r); background: var(--accent-soft); color: var(--accent-deep); flex: none; }
.form-card-head h2 { font-size: 16px; }
.form-card-head p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.sticky-actions {
  position: sticky; bottom: 0; z-index: 5; padding: 14px var(--pad-l);
  background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(6px);
  border-top: 1px solid var(--canvas-line); margin: 0 calc(var(--pad-l) * -1);
}
.sticky-actions .muted { margin-inline-end: auto; color: var(--canvas-muted); }
.sticky-actions .is-unsaved { color: var(--warn); font-weight: 500; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-state > i { font-size: 34px; color: var(--faint); }
.empty-state h2 { font-size: 17px; color: var(--text); }
.empty-state p { max-width: 46ch; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.facts-wide { padding: var(--pad-l); }
.plain-list { list-style: none; margin: 0; padding: var(--pad) var(--pad-l); display: grid; gap: 2px; }
.plain-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.plain-list li:last-child { border-bottom: 0; }

/* ================= Tables and lists ================= */
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: var(--pad) var(--pad-l); margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text);
}
.field-inline { min-width: 150px; flex: 0 1 200px; }
.field-inline:first-of-type { flex: 1 1 240px; }
.filters-actions { display: flex; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; }
.table-card { overflow: hidden; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: start; font-size: 12.5px; font-weight: 600; color: var(--muted);
  padding: var(--pad-s) var(--pad); background: var(--chip); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: var(--pad) var(--pad); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr:hover td { background: var(--hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.th-sort { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.th-sort i { font-size: 10px; opacity: .45; }
.th-sort.is-active { color: var(--accent-deep); }
.th-sort.is-active i { opacity: 1; }
.th-sort:hover { text-decoration: none; color: var(--text); }
.col-actions { text-align: end; white-space: nowrap; }
.col-actions form { display: inline; }
.col-details details summary { cursor: pointer; color: var(--accent-deep); font-weight: 500; }
.col-details pre { margin: 8px 0 0; max-width: 420px; max-height: 240px; overflow: auto; font-size: 12px; background: var(--chip); padding: 8px 10px; border-radius: var(--r-sm); }
.cell-title { display: flex; align-items: center; gap: 12px; }
.cell-title div { display: flex; flex-direction: column; }
.pager { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: var(--pad-s) var(--pad); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pager-size { margin: 0; }
.pager-size label { display: flex; align-items: center; gap: 8px; }
.pager-size select { height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--text); padding: 0 6px; font: inherit; }
.pager-nav { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

/* ================= Home launcher ================= */
.launch-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 6px 0 26px; }
.launch-hello h1 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 600; letter-spacing: -0.02em; }
.launch-hello p { color: var(--canvas-muted); margin-top: 6px; }
.launch-search {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 16px; width: min(420px, 100%);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--muted);
  box-shadow: 0 1px 2px rgba(10, 16, 28, .05);
}
.launch-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.launch-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; min-width: 0; }
.launch-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.launch-body:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.launch-apps { display: grid; gap: 26px; }
.app-group h2 { font-size: 14px; font-weight: 600; color: var(--canvas-muted); display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); gap: 12px; }
.tile {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; min-height: 124px;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg);
  position: relative; overflow: hidden;
}
.tile::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: var(--tile); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
[dir="rtl"] .tile::after { transform-origin: right; }
.tile:hover { text-decoration: none; border-color: color-mix(in srgb, var(--tile) 45%, var(--line)); }
.tile:hover::after, .tile:focus-visible::after { transform: scaleX(1); }
.tile .well { margin-bottom: 10px; }
.tile b { font-weight: 600; font-size: 14.5px; }
.tile small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.launch-none { padding: 20px 0; }
.launch-side { position: sticky; top: 80px; }
.activity { list-style: none; margin: 0; padding: 6px var(--pad-l) var(--pad); }
.activity li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.activity li:last-child { border-bottom: 0; }
.activity b { font-weight: 600; }
.activity small { display: block; color: var(--faint); font-size: 12px; }

.setup { padding: var(--pad-l); margin-bottom: 26px; border-inline-start: 4px solid var(--accent); }
.setup-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.setup-head h2 { font-size: 16px; }
.setup-head form { margin: 0; }
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 20px; }
.setup-list li { display: flex; gap: 10px; align-items: center; }
.setup-list li i { color: var(--faint); font-size: 14px; }
.setup-list li.is-done { color: var(--muted); text-decoration: line-through; }
.setup-list li.is-done i { color: var(--ok); }
.setup-list a { font-weight: 500; }

/* ================= Palette ================= */
.palette { position: fixed; inset: 0; z-index: 60; background: rgba(8, 12, 20, .45); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.palette-box { width: min(560px, 100%); background: var(--card); color: var(--text); border-radius: var(--r-xl); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); overflow: hidden; }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette-input input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
#palette-list { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow-y: auto; }
#palette-list a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r); color: var(--text); }
#palette-list a b { font-weight: 500; flex: 1; }
#palette-list a small { color: var(--faint); }
#palette-list li.is-sel a, #palette-list a:hover { background: var(--accent-soft); text-decoration: none; }
.palette-empty { padding: 14px 18px 18px; color: var(--muted); }

/* ================= Appearance ================= */
.appearance { display: grid; gap: 18px; margin-bottom: 18px; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.preset {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; text-align: start;
  border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--text);
  font-family: inherit; font-weight: 500; font-size: 13px; line-height: 1.3; cursor: pointer;
}
.preset:hover { border-color: var(--faint); }
.preset.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.preset-swatch { position: relative; display: block; height: 64px; border-radius: var(--r); overflow: hidden; }
.preset-swatch i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 22%; }
.preset-swatch em { position: absolute; top: 0; inset-inline-start: 22%; inset-inline-end: 0; height: 22%; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.preset-swatch u { position: absolute; inset-inline-start: 32%; bottom: 14%; width: 38%; height: 18%; border-radius: 4px; }
.color-pair { display: flex; gap: 8px; }
.color-pair input[type="color"] { width: 48px; height: 40px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); cursor: pointer; flex: none; }
.color-pair input[data-hex] { text-transform: uppercase; font-variant-numeric: tabular-nums; }
.logo-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.logo-box { width: 160px; height: 100px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--chip); padding: 10px; }
.logo-box img { max-height: 80px; object-fit: contain; }
.logo-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 1; }
.logo-form .hint { width: 100%; color: var(--faint); font-size: 12px; }
.logo-row > form:last-child { margin: 0; }

/* ================= Account / about ================= */
.account-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.profile-card { padding: 28px var(--pad-l); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.profile-card h2 { font-size: 18px; margin-top: 6px; }
.profile-card .facts { text-align: start; width: 100%; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.about-hero { display: flex; align-items: center; gap: 22px; padding: 26px var(--pad-l); margin-bottom: 20px; }
.about-mark { width: 72px; height: 72px; display: grid; place-items: center; border-radius: var(--r-xl); background: var(--ink); color: var(--accent); padding: 16px; }
img.about-mark { object-fit: contain; background: var(--chip); padding: 8px; }
.about-hero h2 { font-size: 30px; letter-spacing: -0.02em; }
.about-version { color: var(--muted); }
.about-sign { margin-top: 6px; font-weight: 600; letter-spacing: .08em; color: var(--accent-deep); }
.about-grid { align-items: start; }

/* ================= Sign in ================= */
.login-page { background: var(--canvas); }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 44%) 1fr; }
.login-brand {
  background: var(--ink); color: var(--on-ink); padding: 40px 48px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px; position: relative; overflow: hidden;
}
.login-brand::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  inset-inline-end: -220px; bottom: -200px; border: 70px solid var(--accent); opacity: .12;
}
/* Build 31: NEP-ERP night-sky artwork fills the panel; a soft band at the top and bottom keeps the company name and signature readable */
.login-brand.login-art { background: #0b1d4d url("../img/nep-erp-login.jpg?v=31") center 62% / cover no-repeat; }
.login-brand.login-art::before {
  width: auto; height: auto; border: 0; border-radius: 0; inset: 0; opacity: 1;
  background: linear-gradient(180deg, rgba(4, 12, 34, .72) 0, rgba(4, 12, 34, 0) 16%, rgba(4, 12, 34, 0) 90%, rgba(4, 12, 34, .7) 100%);
}
.login-art .login-brand-body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login-art .login-brand-top span, .login-art .login-sign { color: rgba(255, 255, 255, .78); }
.login-art .login-brand-top b { color: #fff; }
.login-brand-top { display: flex; align-items: center; gap: 14px; position: relative; }
.login-brand-top b { display: block; font-size: 16px; }
.login-brand-top span { color: var(--on-ink-muted); font-size: 13px; }
.login-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--ink-2); color: var(--accent); padding: 11px; }
img.login-mark { object-fit: contain; background: #fff; padding: 6px; }
.login-brand-body { position: relative; }
.login-product { font-size: clamp(54px, 7vw, 92px); font-weight: 700; letter-spacing: -0.045em; line-height: .95; color: var(--on-ink); }
.login-lede { margin-top: 18px; font-size: 17px; max-width: 30ch; color: var(--on-ink-muted); }
.login-sign { position: relative; font-size: 12px; color: var(--on-ink-muted); }
.login-sign b { color: var(--rail-accent); letter-spacing: .06em; }
.login-form-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; gap: 18px; }
.login-form { width: min(380px, 100%); display: grid; gap: 16px; color: var(--canvas-text); }
.login-form h1 { font-size: 26px; }
.login-form .field > span:first-child { color: var(--canvas-muted); }
.login-lang { margin: 0; }

/* ================= Installer ================= */
.install-page { background: var(--canvas); }
.install { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
.install-side { background: var(--ink); color: var(--on-ink); padding: 32px 26px; display: flex; flex-direction: column; gap: 30px; }
.install-brand { display: flex; align-items: center; gap: 12px; }
.install-brand b { display: block; font-size: 18px; }
.install-brand span { color: var(--on-ink-muted); font-size: 12.5px; }
.install-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; align-content: start; }
.install-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); color: var(--on-ink-muted); font-weight: 500; }
.install-steps li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ink-3); font-size: 12px; }
.install-steps li.is-current { background: var(--ink-2); color: var(--on-ink); }
.install-steps li.is-current span { border-color: var(--accent); color: var(--rail-accent); }
.install-steps li.is-done span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.install-lang { color: var(--on-ink-muted); font-size: 13px; }
.install-sign { font-size: 11.5px; letter-spacing: .08em; color: var(--rail-accent); font-weight: 600; }
.install-main { padding: 48px clamp(20px, 5vw, 64px); max-width: 900px; width: 100%; color: var(--canvas-text); }
.inst-step { display: grid; gap: 18px; }
.inst-step h1 { font-size: 28px; }
.inst-step .field > span:first-child { color: var(--canvas-muted); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checks li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r); background: var(--card); color: var(--text); border: 1px solid var(--line); }
.checks li small { margin-inline-start: auto; color: var(--faint); }
.checks .is-ok i { color: var(--ok); }
.checks .is-bad { border-color: var(--danger); }
.checks .is-bad i { color: var(--danger); }
.checks .is-warn i { color: var(--warn); }
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.acc-card { margin: 0; padding: var(--pad-l); display: grid; gap: 12px; }
.acc-card legend { font-weight: 600; font-size: 16px; padding: 0 6px; display: flex; gap: 8px; align-items: center; }
.acc-card legend i { color: var(--accent-deep); }
.acc-card p { font-size: 13px; }
.install-finished { text-align: center; padding: 30px; display: grid; gap: 10px; justify-items: center; }
.install-finished > i { font-size: 44px; color: var(--ok); }
.install-done { max-width: 520px; margin: 12vh auto; padding: 32px; display: grid; gap: 14px; }

/* ================= Density ================= */
.density-compact { font-size: 13.5px; }
.density-compact .btn { height: 34px; }
.density-compact .field input, .density-compact .field select { height: 36px; }
.density-compact .tile { min-height: 108px; padding: 13px; }

/* ================= Responsive ================= */
@media (max-width: 1100px) {
  .launch-body { grid-template-columns: minmax(0, 1fr); }
  .launch-side { position: static; }
  .palette-open span, .palette-open kbd { display: none; }
  .palette-open { min-width: 0; }
}
@media (max-width: 860px) {
  .rail { inset-block: auto 0; inset-inline: 0; width: 100%; height: 66px; flex-direction: row; padding: 0 6px; }
  .rail-brand, .rail-sign { display: none; }
  .rail-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 2px; }
  .rail-item { width: 70px; flex: none; padding: 8px 2px 6px; }
  .rail-item.is-active::before { inset-inline: 18px; top: -1px; bottom: auto; width: auto; height: 3px; }
  .flyout { inset: auto 0 66px 0; width: auto; max-height: 70vh; border-radius: var(--r-xl) var(--r-xl) 0 0; border: 1px solid var(--line); }
  .shell { margin-inline-start: 0; padding-bottom: 66px; }
  .topbar { padding: 0 14px; }
  .avatar-btn .who, .avatar-btn > i, .lang-switch span { display: none; }
  .content { padding: 20px 16px 32px; }
  .grid-2, .grid-3, .acc-grid, .account-grid { grid-template-columns: minmax(0, 1fr); }
  .page-head { flex-direction: column; align-items: flex-start; }
  .login, .install { grid-template-columns: minmax(0, 1fr); }
  .login-brand { padding: 28px 24px; }
  /* phone: a short picture panel (product name in view) so the sign-in form is on the first screen */
  .login-brand.login-art { min-height: 348px; aspect-ratio: auto; max-height: none; background-size: cover; background-position: center bottom; padding-bottom: 0; }
  /* the signature sits on its own solid band under the artwork so it never overprints the picture's own wording */
  .login-art .login-sign { position: absolute; inset-inline: 0; bottom: 0; margin: 0; padding: 9px 10px; background: rgba(4, 12, 34, .94); text-align: center; font-size: 10.5px; line-height: 1.45; white-space: nowrap; z-index: 1; }
  .login-product { font-size: 52px; }
  .install-side { padding: 20px; gap: 16px; }
  .install-steps { grid-auto-flow: column; overflow-x: auto; }
  .install-steps li { white-space: nowrap; }
  .app-foot { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .rail, .sidenav, .sn-backdrop, .topbar, .flyout, .filters, .pager, .app-foot, .page-actions { display: none !important; }
  .shell { margin: 0; }
  body { background: #fff; }
}

/* ================= Build 2: User management - BY NEPTUNE UAE ================= */
.num { text-align: end; font-variant-numeric: tabular-nums; }
.table th.num { text-align: end; }
.num-input { text-align: end; font-variant-numeric: tabular-nums; }
.table tr.is-muted td { color: var(--faint); }
.cell-link { color: var(--text); }
.cell-link:hover { text-decoration: none; }
.cell-link:hover b { color: var(--accent-deep); text-decoration: underline; }
.pad { padding: var(--pad) var(--pad-l); }
.ok-ic { color: var(--ok); }
.danger-ic { color: var(--danger); }
.linkish { border: 0; background: none; padding: 0; color: var(--accent-deep); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.is-dimmed { opacity: .5; }
.check-sm { min-height: 0; font-size: 13px; color: var(--muted); }
.check-sm input { width: 16px; height: 16px; }
.card-head h2 i { color: var(--muted); margin-inline-end: 6px; font-size: 14px; }
.form-card-head .well { width: 38px; height: 38px; }
.form-card.is-required { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }

.user-card-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.user-card-grid .profile-card { position: sticky; top: 80px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.card-actions { width: 100%; display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.card-actions form { margin: 0; }
.reset-pw summary { list-style: none; }
.reset-pw summary::-webkit-details-marker { display: none; }
.reset-pw[open] summary { margin-bottom: 10px; }
.reset-pw .form-stack { gap: 10px; text-align: start; }
.facts-cols { grid-template-columns: max-content 1fr max-content 1fr; padding: var(--pad) var(--pad-l) var(--pad-l); gap: 10px 18px; }
.notes { white-space: normal; border-top: 1px solid var(--line-2); color: var(--muted); }

.grant-form { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(110px, 1fr)) auto; gap: 12px; align-items: end; padding: var(--pad) var(--pad-l) var(--pad-l); border-top: 1px solid var(--line-2); }

.member-list { list-style: none; margin: 0; padding: var(--pad) var(--pad-l); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.member-list a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); color: var(--text); }
.member-list a:hover { background: var(--hover); text-decoration: none; }
.member-list span span { display: flex; flex-direction: column; line-height: 1.3; }
.members { margin-top: 18px; }
.org-form { margin-bottom: 18px; border-color: var(--accent); }

/* Permission matrix */
.matrix { display: grid; gap: 16px; }
.matrix-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--pad) var(--pad-l); border-bottom: 1px solid var(--line); }
.matrix-head h3 { font-size: 15px; }
.matrix-table th[scope="row"] { background: transparent; color: var(--text); font-size: 14px; font-weight: 500; padding: var(--pad-s) var(--pad); white-space: nowrap; }
.matrix-table th[scope="row"] .linkish { margin-inline-start: 10px; opacity: 0; }
.matrix-table tr:hover th[scope="row"] .linkish, .matrix-table .linkish:focus-visible { opacity: 1; }
.matrix-table td { padding: var(--pad-s) var(--pad); }
.matrix-table .c { text-align: center; width: 1%; }
.matrix-table select, .matrix-table .num-input { height: 34px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--text); font: inherit; font-size: 13px; padding: 0 8px; }
.matrix-table .num-input { width: 120px; }
.mx { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--card); cursor: pointer; color: transparent; font-size: 13px; }
.mx input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mx:hover { border-color: var(--faint); }
.mx.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mx:has(input:focus-visible) { outline: 3px solid var(--accent-ring); outline-offset: 1px; }
.mx:has(input:disabled) { cursor: not-allowed; opacity: .45; }
.mx:has(input:disabled) input { cursor: not-allowed; }
.mx.is-dev { border-style: dashed; }
.mx.demo { width: 20px; height: 20px; font-size: 10px; vertical-align: middle; cursor: default; }
.matrix-na { color: var(--faint); }
.matrix-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--canvas-muted); align-items: center; }

@media (max-width: 1100px) {
  .grant-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grant-form .grant-perm { grid-column: 1 / -1; }
  .facts-cols { grid-template-columns: max-content 1fr; }
}
@media (max-width: 860px) {
  .user-card-grid { grid-template-columns: minmax(0, 1fr); }
  .user-card-grid .profile-card { position: static; }
  .grant-form { grid-template-columns: minmax(0, 1fr); }
}

/* ================= Build 3: Accounting and fixed assets - BY NEPTUNE UAE ================= */
.inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; }
.span-2 { grid-column: span 2; }
.field-wide { flex: 2 1 320px; }
.warn-txt { color: var(--warn); font-weight: 500; }
.check-row { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.cell-input { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; }
.cell-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.new-row td { background: var(--chip); }
.well-lg { width: 76px; height: 76px; font-size: 30px; border-radius: var(--r-xl); }

/* Journal editor */
.entry-lines td { padding: 6px 8px; vertical-align: top; }
.entry-lines select, .entry-lines input { width: 100%; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; }
.entry-lines select:focus, .entry-lines input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.entry-lines .w-acc { min-width: 260px; width: 28%; }
.entry-lines .w-amt { width: 130px; }
.entry-lines .w-tax { width: 90px; }
.entry-lines tbody tr:hover td { background: transparent; }
.entry-lines tfoot td { padding: 10px 8px; border-top: 1px solid var(--line); }
.entry-summary td { font-size: 13px; }
.diff-box { display: inline-flex; gap: 8px; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 500; }
.diff-box.is-bad { background: var(--danger-soft); color: var(--danger); }
.table tr.is-tax td { color: var(--muted); font-size: 13px; background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.reverse-box summary { cursor: pointer; font-weight: 500; color: var(--danger); list-style: none; }
.entry-view { display: grid; gap: 18px; }

/* Chart of accounts */
.coa .coa-name { display: inline-block; padding-inline-start: calc(var(--depth, 0) * 22px); }
.coa tr.is-group td { font-weight: 600; background: var(--chip); }
.coa tr.is-group .coa-name i { color: var(--muted); margin-inline-end: 4px; }

/* Reports */
.report { padding-bottom: var(--pad); }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: var(--pad-l); border-bottom: 1px solid var(--line); }
.report-head > div:first-child { display: flex; gap: 12px; align-items: center; }
.report-head img { max-height: 46px; max-width: 140px; object-fit: contain; }
.report-head b { display: block; font-size: 15px; }
.report-head small { color: var(--muted); font-size: 12.5px; display: block; }
.report-title { text-align: end; }
.report-title h2 { font-size: 18px; }
.report-foot { padding: var(--pad) var(--pad-l) 0; color: var(--muted); font-size: 12.5px; }
.table tr.is-group td { font-weight: 600; background: var(--chip); color: var(--text); }
.table tr.is-sub td, .table tr.is-sub th { font-weight: 600; border-top: 1px solid var(--line); }
.table tr.is-total td { font-weight: 700; font-size: 15px; border-top: 2px solid var(--text); border-bottom: 3px double var(--text); }
.table tr.is-head td { font-size: 16px; font-weight: 700; padding-top: 18px; color: var(--accent-deep); border-bottom: 2px solid var(--line); }
.table.tb .c { text-align: center; }
.statement .st { max-width: 760px; margin: 0 auto; }
.st .st-line { padding-inline-start: 26px; }
.st .st-detail td { font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
.st .st-detail td:first-child { padding-inline-start: 46px; }
.kpis { display: flex; flex-wrap: wrap; gap: 14px; padding: var(--pad) var(--pad-l); }
.kpis > div { flex: 1 1 160px; padding: 12px 14px; border-radius: var(--r); background: var(--chip); display: flex; flex-direction: column; gap: 2px; }
.kpis span { font-size: 12.5px; color: var(--muted); }
.kpis b { font-size: 20px; font-variant-numeric: tabular-nums; }
.kpis-top { padding: 0; margin-bottom: 14px; }
.kpis-top > div { background: var(--card); border: 1px solid var(--line); }
.ct-note { margin: var(--pad) var(--pad-l) 0; }
.vat-actions { padding: var(--pad) var(--pad-l) 0; }
.vat-actions form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Periods */
.year-card { margin-bottom: 16px; }
.year-card h2 small { font-weight: 400; margin: 0 8px; }
.periods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: var(--pad) var(--pad-l) var(--pad-l); }
.period { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); }
.period.is-locked { background: var(--warn-soft); border-color: transparent; }
.period.is-closed { background: var(--chip); border-color: transparent; }
.period form { margin: 0; }

/* Fixed assets */
.asset-card .nbv { display: flex; flex-direction: column; align-items: center; margin: 10px 0 4px; }
.asset-card .nbv span { color: var(--muted); font-size: 12.5px; }
.asset-card .nbv b { font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.asset-card .nbv small { color: var(--faint); }
.asset-actions details { border-top: 1px solid var(--line-2); }
.asset-actions summary { cursor: pointer; font-weight: 500; list-style: none; }
.asset-actions summary i { color: var(--muted); width: 18px; }

/* Printed voucher */
.print-page { background: #fff; color: #111; }
.voucher { max-width: 820px; margin: 24px auto; padding: 0 20px; --card: #fff; --text: #111; --muted: #555; --line: #ccc; --line-2: #e2e2e2; --chip: #f3f3f3; }
.voucher .report-head { padding: 0 0 14px; }
.voucher-meta { display: grid; grid-template-columns: repeat(4, auto 1fr); gap: 6px 14px; margin: 16px 0; font-size: 13px; }
.voucher-meta dt { color: #555; }
.voucher-meta dd { margin: 0; }
.voucher-desc { margin-bottom: 12px; }
.voucher-table { font-size: 13px; }
.voucher-table tfoot th { border-top: 2px solid #111; }
.signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; }
.signatures div { border-top: 1px solid #111; padding-top: 6px; display: flex; flex-direction: column; font-size: 12.5px; }
.signatures span { color: #555; }
.print-sign { margin-top: 40px; font-size: 11px; color: #777; text-align: center; }

@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } .span-2 { grid-column: auto; } .report-head { flex-direction: column; } .report-title { text-align: start; } }
@media print {
  .no-print, .filters, .sticky-actions, .reverse-box { display: none !important; }
  .report, .card { border: 0 !important; box-shadow: none !important; }
  .content { padding: 0; max-width: none; }
  .table th { background: #f3f3f3 !important; }
  a { color: inherit; text-decoration: none; }
}

/* ================= Build 5: navigation - BY NEPTUNE UAE ================= */
.nav-top .shell { margin-inline-start: 0; }
.topnav {
  position: sticky; top: 60px; z-index: 19;
  background: var(--topbar-bg, var(--topbar)); color: var(--on-topbar); border-bottom: 1px solid var(--topbar-line);
}
.topnav-inner { display: flex; align-items: center; gap: 12px; padding: 0 24px; min-height: 46px; }
.topnav-modules { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; flex: none; }
.topnav-item { position: relative; }
.topnav-link {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--on-topbar-muted); font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.topnav-link:hover, .topnav-link.is-open { background: var(--topbar-soft); color: var(--on-topbar); text-decoration: none; }
.topnav-link.is-active { color: var(--on-topbar); box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--r) var(--r) 0 0; }
.topnav-link .caret { font-size: 9px; opacity: .6; transition: transform .15s ease; }
.topnav-link.is-open .caret { transform: rotate(180deg); }
.topnav-drop {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 40; min-width: 320px;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 18px 44px -18px rgba(10, 16, 28, .4); padding: 6px; animation: drop-in .12s ease-out;
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.topnav-drop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.topnav-drop a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r); color: var(--text); }
.topnav-drop a:hover, .topnav-drop a:focus-visible { background: var(--hover); text-decoration: none; outline: none; }
.topnav-drop a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-ring); }

.topnav-pins { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
.topnav-pins::-webkit-scrollbar { display: none; }
.nav-both .topnav-pins, .nav-top .topnav-pins { border-inline-start: 1px solid var(--topbar-line); padding-inline-start: 12px; }
.pins-label { color: var(--accent); font-size: 12px; flex: none; }
.pins-empty { color: var(--on-topbar-muted); font-size: 12.5px; white-space: nowrap; }
.pin {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--topbar-line); color: var(--on-topbar); font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.pin i { color: color-mix(in srgb, var(--tile) 80%, var(--on-topbar)); font-size: 12px; }
.pin:hover { background: var(--topbar-soft); text-decoration: none; border-color: color-mix(in srgb, var(--tile) 50%, var(--topbar-line)); }
.pins-edit { flex: none; margin-inline-start: auto; color: var(--on-topbar-muted); padding: 6px 8px; border-radius: var(--r-sm); }
.pins-edit:hover { background: var(--topbar-soft); color: var(--on-topbar); }

.quick { position: relative; }
.quick-btn { height: 36px; }
.quick-pop { min-width: 240px; }
.pop-title { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px 4px; }
.well-xs { width: 26px; height: 26px; font-size: 12px; border-radius: var(--r-sm); }

.page-head h1 { display: flex; align-items: center; gap: 10px; }
.pin-form { display: inline-flex; margin: 0; }
.pin-btn { border: 0; background: transparent; color: var(--faint); font-size: 17px; cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); line-height: 1; }
.pin-btn:hover { color: var(--accent); background: var(--hover); }
.pin-btn.is-on { color: var(--accent); }

.tile-wrap { position: relative; }
.tile-wrap .tile { height: 100%; }
.tile-pin { position: absolute; top: 8px; inset-inline-end: 8px; margin: 0; opacity: 0; transition: opacity .15s ease; }
.tile-wrap:hover .tile-pin, .tile-pin:focus-within, .tile-pin .is-on { opacity: 1; }
.tile-pin .pin-btn.is-on { opacity: 1; }
.tile-wrap:has(.pin-btn.is-on) .tile-pin { opacity: 1; }

.launch-quick { display: grid; gap: 14px; margin-bottom: 24px; }
.quick-row h2 { font-size: 14px; font-weight: 600; color: var(--canvas-muted); display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.quick-row h2 .link { margin-inline-start: 6px; font-size: 12.5px; }
.quick-row h2 .fa-star { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--text); font-weight: 500; font-size: 13.5px;
}
[dir="rtl"] .chip-link { padding: 6px 6px 6px 12px; }
.chip-link:hover { text-decoration: none; border-color: color-mix(in srgb, var(--tile) 45%, var(--line)); }
.chip-link .well { border-radius: 50%; }
.chip-link kbd { margin-inline-start: 2px; }

.pin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pin-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r); }
.pin-name { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.shortcut-actions { justify-content: space-between; }
.seg-wrap { flex-wrap: wrap; }

@media (max-width: 860px) {
  .topnav { top: 60px; }
  .topnav-inner { padding: 0 10px; gap: 8px; overflow-x: auto; }
  .topnav-modules { overflow-x: auto; }
  .topnav-link span { display: none; }
  .topnav-link { padding: 0 10px; }
  .topnav-drop { position: fixed; top: 112px; inset-inline: 10px; min-width: 0; max-height: 60vh; overflow-y: auto; }
  .quick-btn span { display: none; }
  .nav-top .shell { padding-bottom: 0; }
}
@media print { .topnav { display: none !important; } }
.form-note { grid-column: 1 / -1; font-size: 12.5px; }

/* ================= v2.0.0: Inventory - BY NEPTUNE UAE ================= */
.qty-in { color: var(--ok); }
.qty-out { color: var(--danger); }
.print-only { display: none; }
@media print { .print-only { display: grid !important; } }
.entry-lines [data-onhand], .entry-lines [data-diff], .entry-lines [data-amount] { padding-top: 14px; font-variant-numeric: tabular-nums; }

/* ================= v2.0.0: Purchasing - BY NEPTUNE UAE ================= */
.entry-lines [data-account] { margin-top: 6px; }
.entry-lines [data-item] + [data-account][hidden] { display: none; }
.doc-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: var(--pad) var(--pad-l) var(--pad-l); }
.doc-parties > div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.doc-parties b { font-size: 15px; }
.doc-terms { font-size: 12px; margin-top: 10px; }
.share-bar { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--chip); position: relative; vertical-align: middle; margin-inline-end: 6px; overflow: hidden; }
.share-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: var(--accent); }
select.is-locked { pointer-events: none; background: var(--chip); }
@media (max-width: 860px) { .doc-parties { grid-template-columns: minmax(0, 1fr); } }

/* ================= Document layout (v2.0.0 build 4) - BY NEPTUNE UAE ================= */
.doc-sheet-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; padding: var(--pad-l);
  border-bottom: 3px solid var(--doc-accent, var(--accent)); }
.doc-letterhead { display: flex; gap: 14px; align-items: flex-start; }
.doc-letterhead.is-center { flex-direction: column; align-items: center; text-align: center; grid-column: 1 / -1; }
.doc-logo { max-height: 64px; max-width: 180px; object-fit: contain; }
.doc-company { display: flex; flex-direction: column; gap: 2px; }
.doc-company b { font-size: 17px; }
.doc-company small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.doc-title { text-align: end; }
.doc-letterhead.is-center + .doc-title { text-align: center; grid-column: 1 / -1; }
.doc-title h2 { font-size: 22px; letter-spacing: .02em; color: var(--doc-accent, var(--accent)); margin-bottom: 8px; text-transform: uppercase; }
[dir="rtl"] .doc-title h2 { text-transform: none; }
.doc-title dl { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 3px 12px; font-size: 13px; margin: 0; }
.doc-letterhead.is-center + .doc-title dl { justify-content: center; }
.doc-title dt { color: var(--muted); }
.doc-title dd { margin: 0; font-weight: 600; }
.doc-sheet-foot { display: grid; gap: 14px; padding: var(--pad) var(--pad-l) var(--pad-l); }
.doc-terms-box, .doc-bank { font-size: 12.5px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; }
.doc-terms-box p { margin: 4px 0 0; color: var(--muted); white-space: normal; }
.doc-bank dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0 0; }
.doc-bank dt { color: var(--muted); }
.doc-bank dd { margin: 0; }
.print-footer { display: none; }
.doc-layout-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.doc-preview-wrap { position: sticky; top: 120px; }
.doc-preview { overflow: hidden; font-size: 13px; }
.doc-preview-body { display: grid; gap: 8px; padding: 16px var(--pad-l); }
.doc-preview-body span { height: 10px; border-radius: 4px; background: var(--chip); }
.doc-preview-body span:nth-child(2) { width: 80%; } .doc-preview-body span:nth-child(3) { width: 55%; }
.doc-preview-footer { border-top: 1px solid var(--line); padding: 8px var(--pad-l); font-size: 11px; color: var(--muted); text-align: center; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin: 12px 0; }
.terms-type { border-top: 1px solid var(--line-2); padding: 10px 0; }
.terms-type summary { cursor: pointer; }
.terms-type .grid-2 { margin-top: 10px; }
@media (max-width: 1100px) { .doc-layout-grid { grid-template-columns: minmax(0, 1fr); } .doc-preview-wrap { position: static; } }
@media (max-width: 700px) { .doc-sheet-head { grid-template-columns: minmax(0, 1fr); } .doc-title { text-align: start; } .doc-title dl { justify-content: start; } }
@media print {
  .print-footer { display: flex !important; position: fixed; bottom: 0; inset-inline: 0; justify-content: space-between; gap: 12px;
    font-size: 9pt; color: #555; border-top: 1px solid #ccc; padding-top: 4px; background: #fff; }
  .print-sign { white-space: nowrap; }
  .doc-sheet-head { border-bottom-color: var(--doc-accent, #333); }
  .doc-layout-grid > form { display: none; }
}

/* ================= Password meter (v2.0.0 build 4) - BY NEPTUNE UAE ================= */
.pwd-meter { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; margin-top: 6px; }
.pwd-bar { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.pwd-bar span { display: block; height: 100%; width: 0; background: var(--danger); transition: width .2s ease, background .2s ease; }
.pwd-meter[data-score="2"] .pwd-bar span { background: var(--warn, #C8921A); }
.pwd-meter[data-score="3"] .pwd-bar span, .pwd-meter[data-score="4"] .pwd-bar span { background: var(--ok); }
.pwd-label { font-size: 12px; min-width: 60px; text-align: end; }
.pwd-rules { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.pwd-rules li::before { content: "\2715"; margin-inline-end: 5px; color: var(--danger); font-weight: 700; }
.pwd-rules li.is-ok { color: var(--text); }
.pwd-rules li.is-ok::before { content: "\2713"; color: var(--ok); }

/* ================= v2.0.0 build 4: Sales - BY NEPTUNE UAE ================= */
.entry-lines .w-pct { width: 90px; }
.tax-lines td, .tax-lines th { white-space: nowrap; }
.tax-lines td:nth-child(2) { white-space: normal; min-width: 180px; }
@media print { .tax-lines { font-size: 9.5pt; } }

/* Plugins: action sits next to the status so it is always visible - BY NEPTUNE UAE */
.plugin-status { white-space: nowrap; }
.plugin-action { display: inline-flex; margin: 0 0 0 10px; vertical-align: middle; }
[dir="rtl"] .plugin-action { margin: 0 10px 0 0; }
.cell-title small { max-width: 520px; white-space: normal; }
@media (max-width: 860px) { .plugin-status { white-space: normal; } .plugin-action { display: flex; margin: 8px 0 0; } }

/* ================= Download PDF: same look as print (v2.0.0 build 6) - BY NEPTUNE UAE ================= */
body.is-pdf { background: #fff; }
body.is-pdf main { width: 1040px; max-width: none; background: #fff; }
body.is-pdf .rail, body.is-pdf .sidenav, body.is-pdf .topbar, body.is-pdf .topnav, body.is-pdf .flyout, body.is-pdf .filters, body.is-pdf .pager, body.is-pdf .app-foot,
body.is-pdf .page-actions, body.is-pdf .no-print, body.is-pdf .sticky-actions, body.is-pdf .reverse-box, body.is-pdf .pin-form, body.is-pdf .flash,
body.is-pdf .notice, body.is-pdf .breadcrumbs, body.is-pdf .col-actions > * { display: none !important; }
body.is-pdf .print-only { display: grid !important; }
body.is-pdf .report, body.is-pdf .card { border: 0 !important; box-shadow: none !important; }
body.is-pdf .table th { background: #f3f3f3 !important; }
body.is-pdf a { color: inherit; text-decoration: none; }
body.is-pdf .content { padding: 0; max-width: none; }
.field-link { font-size: 12px; font-weight: 500; margin-inline-start: 8px; white-space: nowrap; }
.field-link i { font-size: 10px; }
@media print { .btn .fa-file-pdf { display: none; } }

/* ================= Contacts (v2.0.0 build 7) - BY NEPTUNE UAE ================= */
.role-card { border-inline-start: 4px solid var(--line); transition: border-color .15s ease; }
.role-card.is-on { border-inline-start-color: var(--accent); }
.role-toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.role-toggle input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.role-toggle > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.role-card:not(.is-on) .role-terms { display: none; }
.role-terms { margin-top: 16px; }
.role-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.kpis-inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 var(--pad-l) var(--pad); }
.kpis-inline > div { display: flex; flex-direction: column; }
.kpis-inline span { font-size: 12px; color: var(--muted); }
.kpis-inline b { font-size: 17px; }
@media (max-width: 700px) { .kpis-inline { grid-template-columns: minmax(0, 1fr); } }

/* Home: modules waiting to be installed (v2.0.0 build 8) - BY NEPTUNE UAE */
.modules-waiting { margin-bottom: 20px; border-inline-start: 4px solid var(--warn, #C8921A); }
.waiting-list { list-style: none; margin: 0; padding: 0 var(--pad-l) var(--pad); display: grid; gap: 8px; }
.waiting-list li { display: flex; align-items: center; gap: 12px; }
.waiting-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.waiting-list form { margin: 0; }

/* ================= Print sheet: every document, report and list as a clean A4 page (v2.0.0 build 8) - BY NEPTUNE UAE ================= */
body.print-mode { background: #e9ecef; margin: 0; color: #1d2530; font-size: 12px; line-height: 1.45; }
.print-mode .sheet { --doc-accent: #1C7ED6; box-sizing: border-box; width: 794px; min-height: 1123px; margin: 16px auto; padding: 38px 42px 30px; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.08); display: flex; flex-direction: column; }
.print-mode .sheet > * { flex: none; }
.print-mode .sheet-foot { margin-top: auto; }
/* nothing interactive on paper */
.print-mode .sheet form, .print-mode .sheet button, .print-mode .sheet .btn, .print-mode .sheet details, .print-mode .no-print, .print-mode .filters, .print-mode .pager,
.print-mode .notice, .print-mode .role-actions, .print-mode .col-actions, .print-mode .kpis-top, .print-mode .page-head, .print-mode .modules-waiting,
.print-mode .launch-quick, .print-mode .pin-btn, .print-mode .share-bar, .print-mode .empty-state .btn { display: none !important; }
.print-mode .print-only { display: block !important; }
/* flatten screen cards */
.print-mode .card, .print-mode .table-card, .print-mode .report { border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; margin: 0 0 14px !important; padding: 0 !important; overflow: visible !important; }
.print-mode .entry-view, .print-mode .user-card-grid, .print-mode .form-stack { display: block !important; }
.print-mode .table-wrap { overflow: visible !important; }
.print-mode .pad { padding: 6px 0 !important; }
.print-mode .card-head { padding: 0 0 6px !important; border: 0 !important; }
.print-mode .card-head h2 { font-size: 13px; }
/* page header used by reports and lists; documents bring their own */
.print-mode .sheet-auto-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 2.5px solid var(--doc-accent); }
.print-mode .sheet:has(.doc-sheet-head) .sheet-auto-head, .print-mode .sheet:has(.report-head) .sheet-auto-head { display: none; }
.print-mode .sheet-title { text-align: end; }
.print-mode .sheet-title h1 { font-size: 19px; margin: 0 0 2px; color: var(--doc-accent); }
.print-mode .sheet-title p { margin: 0; color: #5b6573; font-size: 11px; max-width: 320px; }
.print-mode .sheet-title small { color: #5b6573; }
/* document header */
.print-mode .doc-sheet-head { padding: 0 0 14px !important; margin-bottom: 16px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border-bottom: 2.5px solid var(--doc-accent); }
.print-mode .doc-logo { max-height: 62px; max-width: 170px; }
.print-mode .doc-company b { font-size: 16px; }
.print-mode .doc-company small { font-size: 10.5px; color: #5b6573; }
.print-mode .doc-title h2 { font-size: 21px; margin-bottom: 8px; }
.print-mode .doc-title dl { font-size: 11.5px; gap: 2px 12px; }
.print-mode .report-head { padding: 0 0 12px !important; margin-bottom: 14px; border-bottom: 2.5px solid var(--doc-accent); }
/* parties */
.print-mode .doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 !important; margin: 0 0 16px; }
.print-mode .doc-parties > div { border: 1px solid #d9dee5; border-radius: 6px; padding: 10px 12px; background: #fafbfc; font-size: 11.5px; gap: 1px; }
.print-mode .doc-parties > div.no-print { display: none !important; }
.print-mode .doc-parties:has(> div.no-print) { grid-template-columns: 1fr 1fr; }
.print-mode .doc-parties small.muted { text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; color: #7a8391; margin-bottom: 2px; }
[dir="rtl"] .print-mode .doc-parties small.muted { text-transform: none; letter-spacing: 0; }
.print-mode .doc-parties b { font-size: 13px; }
.print-mode .facts { font-size: 11.5px; }
.print-mode .facts-cols { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 3px 12px; padding: 0 !important; }
.print-mode .facts dt { color: #5b6573; }
.print-mode .facts dd { margin: 0; font-weight: 500; }
/* tables */
.print-mode .table { width: 100%; border-collapse: collapse; font-size: 11px; }
.print-mode .table thead th { background: var(--doc-accent-soft, #eef3fa) !important; color: #1d2530 !important; font-weight: 700; font-size: 10.5px;
  text-transform: none; letter-spacing: 0; padding: 7px 8px !important; border-bottom: 1.5px solid var(--doc-accent) !important; border-top: 0 !important; white-space: nowrap; }
.print-mode .table tbody td { padding: 6px 8px !important; border-bottom: 1px solid #e6e9ee !important; vertical-align: top; background: #fff !important; }
.print-mode .table tbody tr:nth-child(even) td { background: #fbfcfd !important; }
.print-mode .table tfoot th, .print-mode .table tfoot td { background: #fff !important; border: 0 !important; padding: 4px 8px !important; font-weight: 500; color: #3c4653; font-size: 11.5px; }
.print-mode .table tfoot th:first-child { text-align: end; }
.print-mode .table tfoot tr.is-total th { border-top: 1.5px solid #1d2530 !important; font-size: 13px; font-weight: 800; color: #1d2530; padding-top: 7px !important; }
.print-mode .table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.print-mode .table small.block { font-size: 10px; }
.print-mode tr { page-break-inside: avoid; break-inside: avoid; }
.print-mode a { color: inherit; text-decoration: none; }
.print-mode .badge { border: 1px solid #ccd2da; background: #fff !important; color: #3c4653 !important; }
/* terms, bank, signatures */
.print-mode .doc-sheet-foot { padding: 6px 0 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.print-mode .doc-sheet-foot .signatures { grid-column: 1 / -1; }
.print-mode .doc-terms-box, .print-mode .doc-bank { font-size: 10.5px; border: 1px solid #d9dee5; border-radius: 6px; padding: 8px 10px; }
.print-mode .signatures { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.print-mode .signatures > div { display: flex; flex-direction: column-reverse; gap: 4px; border-top: 1px solid #1d2530; padding-top: 5px; font-size: 10.5px; }
.print-mode .signatures span { color: #5b6573; }
.print-mode .sheet-foot { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #d9dee5; padding-top: 6px; margin-top: 24px; font-size: 9.5px; color: #7a8391; }
.print-mode .print-footer { display: none !important; }
@media print {
  body.print-mode { background: #fff; }
  .print-mode .sheet { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
}

/* html2canvas cannot read color-mix(): plain colours on the sheet - BY NEPTUNE UAE */
.print-mode .well { background: #f1f3f6 !important; color: #3c4653 !important; }
.print-mode .table tr.is-tax td { background: #f7f8fa !important; }

/* New item dialog (v2.0.0 build 8) - BY NEPTUNE UAE */
dialog.quick-item { border: 0; border-radius: var(--r-lg); padding: 0; width: min(560px, 94vw); box-shadow: 0 24px 60px -20px rgba(10,16,28,.45); background: var(--card); color: var(--text); }
dialog.quick-item::backdrop { background: rgba(12, 18, 28, .45); }
dialog.quick-item form { padding: 20px 22px; display: grid; gap: 14px; }
dialog.quick-item header h2 { font-size: 17px; margin: 0 0 4px; }
dialog.quick-item footer { display: flex; justify-content: flex-end; gap: 8px; }
.cash-strip { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 16px; color: var(--text); }
.cash-strip:hover { text-decoration: none; border-color: var(--accent); }
.cash-strip > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.cash-strip b { font-size: 20px; }

/* ================= New item dialog, redesigned (v2.0.0 build 9) - BY NEPTUNE UAE ================= */
dialog.quick-item { border: 0; border-radius: 16px; padding: 0; width: min(620px, 94vw); max-height: 92vh; overflow: hidden;
  box-shadow: 0 30px 80px -24px rgba(10,16,28,.55); background: var(--card); color: var(--text); }
dialog.quick-item[open] { display: flex; flex-direction: column; animation: qi-in .16s ease-out; }
@keyframes qi-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
dialog.quick-item::backdrop { background: rgba(12,18,28,.5); backdrop-filter: blur(2px); }
dialog.quick-item form { display: flex; flex-direction: column; min-height: 0; padding: 0; gap: 0; }
.qi-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.qi-head > div { flex: 1; }
.qi-head h2 { font-size: 18px; margin: 0 0 3px; }
.qi-head p { margin: 0; color: var(--muted); font-size: 13px; }
.qi-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; }
.qi-x:hover { background: var(--hover); color: var(--text); }
.qi-body { padding: 18px 22px; overflow-y: auto; display: grid; gap: 12px; }
.qi-types { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qi-types legend { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; padding: 0; }
.qi-type { position: relative; cursor: pointer; }
.qi-type input { position: absolute; opacity: 0; inset: 0; }
.qi-type span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .12s, background .12s; }
.qi-type i { font-size: 18px; color: var(--muted); }
.qi-type b { font-size: 13.5px; }
.qi-type small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.qi-type input:checked + span { border-color: var(--accent); background: var(--accent-soft, var(--hover)); }
.qi-type input:checked + span i { color: var(--accent); }
.qi-type input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }
.qi-section { margin: 4px 0 -4px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.qi-section small { font-weight: 400; color: var(--muted); }
.qi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.qi-grid .qi-wide { grid-column: 1 / -1; }
.qi-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--canvas); }
@media (max-width: 560px) { .qi-types, .qi-grid { grid-template-columns: 1fr; } }
.proforma-note { font-size: 12.5px; color: var(--muted); border-inline-start: 3px solid var(--accent); margin: 0 var(--pad-l) var(--pad); padding: 6px 10px !important; background: var(--hover); border-radius: 6px; }
.print-mode .proforma-note { margin: 0 0 14px !important; background: #f6f7f9 !important; border-inline-start-color: var(--doc-accent); }

/* PDF build: the sheet is exactly as tall as its content (no A4 min-height), so no blank last page - BY NEPTUNE UAE */
body.print-mode[data-pdf="1"] { background: #fff; }
body.print-mode[data-pdf="1"] .sheet { min-height: 0; margin: 0; box-shadow: none; padding: 0 40px 6px; }
body.print-mode[data-pdf="1"] .sheet > :last-child { margin-bottom: 0 !important; }
body.print-mode[data-pdf="1"] .sheet-foot { margin-top: 18px; }
@media print { .print-mode .sheet > :last-child { margin-bottom: 0 !important; } .print-mode .sheet { display: block; } }

/* ================= NEPTUN POS screen (v2.0.0 build 12) - BY NEPTUNE UAE ================= */
body.pos-mode { margin: 0; background: var(--canvas); color: var(--text); overflow: hidden; }
.pos { height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: 64px minmax(0, 1fr); }
.pos-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--ink); color: var(--on-ink, #fff); }
.pos-exit { display: flex; align-items: center; } .pos-exit svg, .pos-exit img { height: 36px; width: auto; }
.pos-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 140px; } .pos-id small { opacity: .75; font-size: 12px; }
.pos-search { flex: 1; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); border-radius: 12px; padding: 0 14px; height: 42px; }
.pos-search input { flex: 1; background: transparent; border: 0; color: #fff; font-size: 16px; outline: none; }
.pos-search input::placeholder { color: rgba(255,255,255,.65); }
.pos-search input.is-miss { animation: pos-shake .3s; }
@keyframes pos-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pos-btn { display: inline-flex; align-items: center; gap: 8px; color: #fff; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.1); font-size: 13.5px; }
.pos-btn:hover { background: rgba(255,255,255,.2); text-decoration: none; }
.pos-products { display: flex; flex-direction: column; min-height: 0; padding: 12px 14px; gap: 12px; }
.pos-cats { display: flex; gap: 8px; overflow-x: auto; flex: none; padding-bottom: 2px; }
.pos-cats button { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.pos-cats button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pos-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; }
.pos-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 104px; padding: 12px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--card); color: var(--text); text-align: start; font: inherit; cursor: pointer; transition: transform .06s, border-color .12s; }
.pos-item:hover { border-color: var(--accent); } .pos-item:active { transform: scale(.97); }
.pos-item b { font-size: 14px; line-height: 1.25; } .pos-item small { color: var(--muted); font-size: 11.5px; }
.pos-price { margin-top: auto; font-weight: 800; font-size: 16px; color: var(--accent); }
.pos-stock { position: absolute; top: 8px; inset-inline-end: 10px; font-size: 11px; color: var(--muted); }
.pos-item.is-low { opacity: .6; } .pos-item.is-low .pos-stock { color: var(--danger); }
.pos-empty { color: var(--muted); text-align: center; padding: 30px 10px; list-style: none; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pos-empty i { font-size: 28px; opacity: .5; }
.pos-cart { display: flex; flex-direction: column; min-height: 0; background: var(--card); border-inline-start: 1px solid var(--line); }
.pos-customer { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pos-customer select { flex: 1; }
.pos-lines { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.pos-lines > li[data-i] { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.pos-line-top { display: flex; justify-content: space-between; gap: 10px; } .pos-line-top span { font-weight: 700; white-space: nowrap; }
.pos-line-ctl { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pos-line-ctl button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--canvas); color: var(--text); cursor: pointer; }
.pos-line-ctl input { width: 64px; height: 30px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.pos-line-ctl label input { width: 70px; }
.pos-line-ctl .pos-del { margin-inline-start: auto; color: var(--danger); }
.pos-totals { padding: 12px 14px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.pos-totals > div { display: flex; justify-content: space-between; }
.pos-grand { font-size: 22px; padding-top: 6px; border-top: 1px dashed var(--line); } .pos-grand b { font-weight: 800; }
.pos-actions { display: flex; gap: 10px; padding: 0 14px 14px; }
.pos-clear { width: 58px; border: 1px solid var(--line); background: var(--canvas); color: var(--danger); border-radius: 14px; font-size: 18px; cursor: pointer; }
.pos-pay { flex: 1; height: 58px; border: 0; border-radius: 14px; background: var(--ok, #0E8A6A); color: #fff; font: inherit; font-size: 19px; font-weight: 800; cursor: pointer; }
.pos-pay:disabled { opacity: .45; cursor: not-allowed; }
dialog.pos-dialog { border: 0; border-radius: 18px; padding: 0; width: min(520px, 94vw); background: var(--card); color: var(--text); box-shadow: 0 30px 80px -24px rgba(10,16,28,.55); }
dialog.pos-dialog::backdrop { background: rgba(12,18,28,.55); }
.pos-dialog form { display: flex; flex-direction: column; }
.pos-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.pos-dialog header h2 { margin: 0; font-size: 19px; } .pos-dialog header h2 b { color: var(--accent); }
.pos-paybody { padding: 18px 20px; display: grid; gap: 12px; }
.pos-big { font-size: 26px !important; height: 56px; font-weight: 700; }
.pos-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pos-quick button { height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); color: var(--text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.pos-quick button:hover { border-color: var(--accent); }
.pos-change { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--canvas); font-size: 16px; }
.pos-change b { font-size: 24px; }
.pos-change-big b { font-size: 34px; color: var(--ok, #0E8A6A); }
.pos-done { padding: 26px 20px 10px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.pos-done > i { font-size: 54px; color: var(--ok, #0E8A6A); } .pos-done h3 { margin: 0; font-size: 22px; }
.pos-dialog footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { body.pos-mode { overflow: auto; } .pos { height: auto; min-height: 100vh; grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .pos-grid { max-height: 50vh; } .pos-id small, .pos-btn span { display: none; } }

/* 80 mm receipt */
body.receipt-mode { margin: 0; background: #eceff3; font-size: 12px; color: #111; }
.receipt { width: 76mm; margin: 12px auto; padding: 4mm; background: #fff; font-family: "Courier New", ui-monospace, monospace; }
.receipt header { text-align: center; display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.receipt header img { max-height: 40px; max-width: 60mm; margin: 0 auto 4px; object-fit: contain; filter: grayscale(1); }
.receipt header b { font-size: 14px; }
.receipt h1 { font-size: 14px; margin: 6px 0 0; border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 3px 0; letter-spacing: .08em; }
.rc-meta { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin: 0 0 6px; } .rc-meta dd { margin: 0; text-align: end; }
.rc-lines, .rc-totals { width: 100%; border-collapse: collapse; }
.rc-lines td { padding: 1px 0; } .rc-lines td:last-child, .rc-totals td:last-child { text-align: end; white-space: nowrap; }
.rc-sub td { color: #333; padding-bottom: 4px; }
.rc-totals { border-top: 1px dashed #000; margin-top: 4px; } .rc-totals td { padding: 2px 0; }
.rc-grand td { font-size: 15px; font-weight: 800; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.receipt footer { text-align: center; margin-top: 10px; border-top: 1px dashed #000; padding-top: 6px; } .receipt footer p { margin: 2px 0; } .receipt footer small { color: #555; }
.rc-actions { text-align: center; margin-top: 10px; } .rc-actions button { padding: 8px 18px; font: inherit; cursor: pointer; }
@media print { @page { size: 80mm auto; margin: 0; } body.receipt-mode { background: #fff; } .receipt { margin: 0; width: 72mm; padding: 3mm; } .rc-actions { display: none; } }

/* NEPTUN POS 1.1.0 tools - BY NEPTUNE UAE */
.pos-mini { border: 1px solid var(--line); background: var(--canvas); color: var(--text); border-radius: 10px; width: 38px; height: 38px; cursor: pointer; flex: none; }
.pos-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 14px 10px; }
.pos-tools button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas);
  color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.pos-tools button i { font-size: 15px; color: var(--accent); }
.pos-tools button:hover { border-color: var(--accent); }
.pos-tools button[hidden] { display: none; }
.pos-tool header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pos-tool header h2 { margin: 0; font-size: 18px; }
.pos-toolbody { padding: 16px 20px; display: grid; gap: 12px; max-height: 70vh; overflow-y: auto; }
.pos-toolbody footer { display: flex; justify-content: flex-end; }
.pos-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pos-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; }
.pos-list li > span { flex: 1; display: flex; flex-direction: column; } .pos-list small { color: var(--muted); }
.pos-find { display: flex; gap: 8px; } .pos-find input { flex: 1; height: 44px; font-size: 16px; }
.pos-rettable input { width: 80px; }

/* ================= CRM (v2.0.0 build 13) - BY NEPTUNE UAE ================= */
.crm-board { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.crm-col { background: var(--hover); border-radius: 14px; padding: 10px; min-height: 240px; border-top: 4px solid var(--tile); transition: background .12s; }
.crm-col.is-over { background: var(--accent-soft, var(--chip)); }
.crm-col header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 2px 4px 10px; }
.crm-col header small { width: 100%; color: var(--muted); font-size: 11.5px; }
.crm-count { background: var(--card); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; }
.crm-cards { display: grid; gap: 8px; min-height: 60px; }
.crm-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--text); cursor: grab; }
.crm-card:hover { text-decoration: none; border-color: var(--tile, var(--accent)); }
.crm-card.is-drag { opacity: .5; }
.crm-card small { color: var(--muted); }
.crm-card-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-top: 4px; }
.crm-value { font-weight: 700; }
.crm-next { font-size: 11.5px; color: var(--muted); } .crm-next.is-late { color: var(--danger); font-weight: 600; }
.crm-stage { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: var(--tile); }
.crm-stagebar { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-step { border: 1.5px solid var(--line); background: var(--card); color: var(--text); padding: 7px 14px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.crm-step.is-on { background: var(--tile); border-color: var(--tile); color: #fff; }
.crm-lost { margin-top: 10px; } .crm-lost summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.crm-actform { display: grid; gap: 10px; border-bottom: 1px solid var(--line); }
.crm-timeline { list-style: none; margin: 0; padding: 6px 0; }
.crm-timeline li { display: flex; gap: 12px; align-items: flex-start; padding: 10px var(--pad-l); border-bottom: 1px solid var(--line-2); }
.crm-timeline li > div { flex: 1; display: flex; flex-direction: column; gap: 2px; } .crm-timeline p { margin: 4px 0 0; }
.crm-timeline li.is-done { opacity: .6; } .crm-timeline li.is-done b { text-decoration: line-through; }
.crm-timeline li.is-late .well { background: var(--danger-soft); color: var(--danger); }

/* ---------- Human resources and payroll (v3.0.0) - BY NEPTUNE UAE ---------- */
.hr-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--chip); border-radius: var(--r); }
.hr-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-sm); color: var(--muted); font-weight: 500; text-decoration: none; }
.hr-tabs a:hover { color: var(--text); background: var(--hover); }
.hr-tabs a.is-on { background: var(--card); color: var(--accent-deep); box-shadow: 0 1px 2px rgba(10, 16, 28, .12); }
.content > .hr-tabs { margin-bottom: 16px; }
.hr-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.hr-sub { font-size: 14px; margin: 18px 0 8px; color: var(--muted); }
.hr-mini { width: 76px !important; min-width: 0; display: inline-block; }
.hr-score { min-width: 64px; }
.hr-slip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hr-net { display: flex; justify-content: space-between; align-items: center; padding: var(--pad) var(--pad-l); border: 2px solid var(--accent); }
.hr-net span { font-weight: 600; color: var(--muted); }
.hr-net b { font-size: 24px; font-variant-numeric: tabular-nums; }
.hr-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.hr-bar-cell { width: 55%; }
.hr-bar { display: block; height: 10px; border-radius: 6px; background: var(--accent); min-width: 3px; }
.hr-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; counter-reset: st; flex-wrap: wrap; }
.hr-steps li { flex: 1 1 120px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--chip); color: var(--muted); font-size: 13px; counter-increment: st; }
.hr-steps li::before { content: counter(st) ". "; font-weight: 700; }
.hr-steps li.is-done { background: var(--accent-soft); color: var(--accent-deep); }
.hr-steps li.is-on { background: var(--accent); color: #fff; font-weight: 600; }
.hr-text h3 { font-size: 14px; margin: 14px 0 4px; }
.hr-text p { margin: 0 0 8px; }
.hr-status { width: 100%; margin-top: 12px; text-align: start; }
.hr-status summary { cursor: pointer; color: var(--accent-deep); font-weight: 500; }
@media (max-width: 900px) { .hr-slip-grid, .hr-dash { grid-template-columns: minmax(0, 1fr); } }
.print-mode .hr-slip-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
.print-mode .hr-net { border: 2px solid var(--doc-accent) !important; padding: 8px 12px !important; margin-bottom: 14px !important; }
.print-mode .hr-steps, .print-mode .hr-tabs { display: none !important; }

/* ---- v3.0.0 build 2: Documents and Warranty - BY NEPTUNE UAE ---- */
.kpis > a { flex: 1 1 160px; padding: 12px 14px; border-radius: var(--r); background: var(--chip); display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.kpis-top > a { background: var(--card); border: 1px solid var(--line); }
.kpis > a:hover { border-color: var(--accent); }
.kpis > a b { color: var(--text); }
.hr-tabs a b { font-size: 12px; padding: 1px 7px; border-radius: 10px; background: var(--chip); }
details > summary { cursor: pointer; color: var(--accent-deep); font-weight: 500; padding: 8px var(--pad-l); }
@media print { .no-print { display: none !important; } }

/* ---- v3.0.0 build 3: Fleet - BY NEPTUNE UAE ---- */
.fl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.fl-card { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.fl-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.fl-photo { height: 140px; display: flex; align-items: center; justify-content: center; background: var(--chip); font-size: 44px; color: var(--muted); }
.fl-photo img { width: 100%; height: 100%; object-fit: cover; }
.fl-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.fl-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; margin-top: 4px; }
.fl-meta i { color: var(--muted); }
.fl-hero { width: 100%; max-height: 190px; object-fit: cover; border-radius: var(--r); margin-bottom: 8px; }
.fl-inline > summary { padding: 4px 8px; }
.fl-inline[open] { position: relative; }

/* ---- v3.0.0 build 6: Projects (Gantt) - BY NEPTUNE UAE ---- */
.prj-gantt { overflow-x: auto; padding: 4px 0 10px; }
.prj-g-head, .prj-g-row { display: grid; grid-template-columns: minmax(180px, 28%) 1fr; min-width: 720px; align-items: center; }
.prj-g-head { border-bottom: 1px solid var(--line); height: 26px; }
.prj-g-scale, .prj-g-track { position: relative; height: 100%; }
.prj-g-scale i { position: absolute; top: 4px; font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; border-inline-start: 1px solid var(--line); padding-inline-start: 4px; }
.prj-g-row { height: 30px; border-bottom: 1px dashed var(--line); }
.prj-g-row.is-summary .prj-g-name { font-weight: 600; }
.prj-g-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prj-g-track { height: 30px; }
.prj-g-bar { position: absolute; top: 8px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--c, #1E40AF) 30%, transparent); overflow: hidden; }
.prj-g-bar b { display: block; height: 100%; background: var(--c, #1E40AF); }
.prj-g-bar.is-late { outline: 2px solid #C53030; }
.prj-g-row.is-summary .prj-g-bar { height: 8px; top: 11px; border-radius: 2px; }
.prj-g-base { position: absolute; top: 23px; height: 3px; background: var(--muted); opacity: .55; border-radius: 2px; }
.prj-g-ms { position: absolute; top: 8px; width: 13px; height: 13px; background: #D69E2E; transform: translateX(-6px) rotate(45deg); }
[dir="rtl"] .prj-g-ms { transform: translateX(6px) rotate(45deg); }
.prj-g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #C53030; opacity: .7; }
.prj-key { display: inline-block; width: 18px; vertical-align: middle; }
.prj-key-base { height: 3px; background: var(--muted); }
.prj-key-today { height: 12px; width: 2px; background: #C53030; }

/* ================= v3.0.0 build 8: side menu (sections > apps > pages) - BY NEPTUNE UAE ================= */
:root { --sn-w: 264px; --sn-w-fold: 76px; }
.sidenav {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 30; width: var(--sn-w);
  display: flex; flex-direction: column; background: var(--ink-bg, var(--ink)); color: var(--on-ink);
  border-inline-end: 1px solid var(--ink-3); transition: width .18s ease;
}
.shell { margin-inline-start: var(--sn-w); transition: margin .18s ease; }
.nav-top .shell { margin-inline-start: 0; }
.sn-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 14px 14px 16px; border-bottom: 1px solid var(--ink-3); }
.sn-logo { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--on-ink); }
.sn-logo:hover { text-decoration: none; }
.sn-logo .brand-mark { width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--ink-2); color: var(--rail-accent); padding: 2px; }
.sn-logo img.brand-mark.is-logo { background: #fff; padding: 3px; }
.sn-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sn-name b { font-size: 15.5px; letter-spacing: .08em; font-weight: 700; }
.sn-name small { font-size: 11px; color: var(--on-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.sn-toggle { flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--on-ink-muted); cursor: pointer; font-size: 15px; }
.sn-toggle:hover { background: var(--ink-2); color: var(--on-ink); }
.sn-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 16px; scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
.sn-sec + .sn-sec { margin-top: 6px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--ink-3) 70%, transparent); }
.sn-sec-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px 6px;
  border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-muted);
}
[dir="rtl"] .sn-sec-head { letter-spacing: 0; font-size: 12px; }
.sn-sec-head i { font-size: 9px; transition: transform .15s; }
.sn-sec.is-closed .sn-sec-head i { transform: rotate(-90deg); }
[dir="rtl"] .sn-sec.is-closed .sn-sec-head i { transform: rotate(90deg); }
.sn-sec.is-closed .sn-apps { display: none; }
.sn-apps, .sn-sub { list-style: none; margin: 0; padding: 0; }
.sn-app-btn {
  position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 1px 0;
  border: 0; border-radius: 9px; background: none; color: var(--on-ink); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.25; cursor: pointer; text-align: start;
}
.sn-app-btn:hover { background: var(--ink-2); }
.sn-ic { width: 20px; text-align: center; font-size: 15.5px; color: var(--on-ink-muted); flex: none; }
.sn-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-caret { font-size: 9px; color: var(--on-ink-muted); transition: transform .15s; }
.sn-app.is-open > .sn-app-btn .sn-caret { transform: rotate(180deg); }
.sn-app.is-active > .sn-app-btn { background: color-mix(in srgb, var(--accent) 26%, var(--ink)); color: #fff; }
.sn-app.is-active > .sn-app-btn .sn-ic { color: var(--rail-accent); }
.sn-app.is-active > .sn-app-btn::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: -10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rail-accent); }
.sn-sub { display: none; margin: 2px 0 6px; padding-inline-start: 22px; }
.sn-app.is-open > .sn-sub { display: block; }
.sn-sub a {
  position: relative; display: block; padding: 6px 10px 6px 20px; border-radius: 7px; font-size: 13.2px; color: var(--on-ink-muted);
  border-inline-start: 1px solid var(--ink-3); border-radius: 0 7px 7px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[dir="rtl"] .sn-sub a { padding: 6px 20px 6px 10px; border-radius: 7px 0 0 7px; }
.sn-sub a:hover { color: var(--on-ink); background: var(--ink-2); text-decoration: none; }
.sn-sub a.is-active { color: #fff; font-weight: 500; border-inline-start: 2px solid var(--rail-accent); background: var(--ink-2); }
.sn-sign { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--ink-3); color: var(--on-ink-muted); }
.sn-sign-mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--ink-2); color: var(--rail-accent); font-size: 13px; }
.sn-sign .sn-name b { font-size: 11.5px; letter-spacing: .04em; color: var(--on-ink); }
.sn-sign .sn-name small { font-size: 10.5px; letter-spacing: .08em; color: var(--rail-accent); }
.sn-open, .sn-backdrop { display: none; }
.rail { display: none; }

/* folded to icons */
.sn-collapsed .sidenav { width: var(--sn-w-fold); }
.sn-collapsed .shell { margin-inline-start: var(--sn-w-fold); }
.sn-collapsed .sn-brand { flex-direction: column; padding: 14px 8px; }
.sn-collapsed .sn-name, .sn-collapsed .sn-label, .sn-collapsed .sn-caret, .sn-collapsed .sn-sub, .sn-collapsed .sn-sec-head span { display: none !important; }
.sn-collapsed .sn-sec-head { justify-content: center; padding: 6px 0; }
.sn-collapsed .sn-sec-head i { display: none; }
.sn-collapsed .sn-sec-head::after { content: ""; width: 22px; height: 1px; background: var(--ink-3); }
.sn-collapsed .sn-sec + .sn-sec { border-top: 0; }
.sn-collapsed .sn-sec.is-closed .sn-apps { display: block; }
.sn-collapsed .sn-scroll { padding: 8px; }
.sn-collapsed .sn-app-btn { justify-content: center; padding: 11px 0; }
.sn-collapsed .sn-ic { font-size: 17px; }
.sn-collapsed .sn-sign { justify-content: center; padding: 12px 0; }
.flyout { inset-inline-start: var(--sn-w-fold); }

/* phones and small tablets: off-canvas menu */
@media (max-width: 900px) {
  .shell, .sn-collapsed .shell { margin-inline-start: 0; padding-bottom: 0; }
  .sidenav, .sn-collapsed .sidenav { width: min(300px, 86vw); transform: translateX(-100%); transition: transform .2s ease; }
  [dir="rtl"] .sidenav { transform: translateX(100%); }
  .sn-mobile-open .sidenav { transform: none; }
  .sn-mobile-open .sn-backdrop { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(8, 14, 26, .45); }
  .sn-open { display: inline-flex; }
  .sn-collapsed .sn-name, .sn-collapsed .sn-label, .sn-collapsed .sn-caret, .sn-collapsed .sn-sec-head span { display: initial !important; }
  .sn-toggle { display: none; }
}

/* ================= v3.0.0 build 8: My Work Space dashboard - BY NEPTUNE UAE ================= */
.dash-hero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 28px 30px 26px; margin-bottom: 18px; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 55%, var(--ink)) 0%, var(--ink) 58%);
  box-shadow: 0 18px 40px -28px rgba(10, 20, 40, .6);
}
.dash-hero-text { position: relative; z-index: 1; }
.dash-eyebrow { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--rail-accent); font-weight: 600; margin-bottom: 6px; }
[dir="rtl"] .dash-eyebrow { letter-spacing: 0; }
.dash-hero h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; margin-bottom: 6px; }
.dash-hero p { color: rgba(255, 255, 255, .78); }
.dash-hero p b { color: #fff; font-weight: 600; }
.dash-hero-tools { position: relative; z-index: 1; }
.dash-search { display: flex; align-items: center; gap: 10px; height: 42px; min-width: min(360px, 80vw); padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .8); }
.dash-search input { flex: 1; border: 0; background: none; color: #fff; font: inherit; outline: none; }
.dash-search input::placeholder { color: rgba(255, 255, 255, .6); }
.dash-search kbd { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; }
.dash-skyline { position: absolute; inset-inline-end: 0; bottom: 0; width: min(520px, 60%); height: 150px; color: #fff; opacity: .07; pointer-events: none; }
[dir="rtl"] .dash-skyline { transform: scaleX(-1); }

.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.dash-kpi {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; min-height: 132px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.dash-kpi::before { content: ""; position: absolute; inset-inline-start: 16px; top: 0; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tone); }
.dash-kpi:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 28px -22px rgba(10, 20, 40, .5); border-color: color-mix(in srgb, var(--tone) 40%, var(--line)); }
.dash-kpi-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--muted); }
.dash-kpi-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 13%, var(--card)); color: var(--tone); font-size: 15px; }
.dash-kpi-val { font-size: 22px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dash-kpi-val small { font-size: 12px; font-weight: 500; color: var(--muted); }
.dash-kpi-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; position: relative; z-index: 1; }
.dash-delta { font-weight: 600; }
.dash-delta.is-up { color: #0E8A6A; }
.dash-delta.is-down { color: #DC2626; }
.dash-spark { position: absolute; inset-inline-end: 12px; top: 18px; width: 38%; height: 38px; }
[dir="rtl"] .dash-spark { transform: scaleX(-1); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.dash-main, .dash-side { display: grid; gap: 18px; min-width: 0; }
.dash-card { margin: 0; }
.dash-card .card-head h2 { font-size: 16px; }
.dash-legend { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.lg-bar { width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 35%, var(--card)); }
.lg-line { width: 16px; height: 3px; border-radius: 2px; background: var(--accent-deep); margin-inline-start: 6px; }
.dash-trend { display: grid; grid-template-columns: minmax(0, 520px) minmax(150px, 1fr); gap: 24px; padding: 0 18px 14px; align-items: center; }
.dash-chart { width: 100%; height: auto; max-height: 150px; }
.dash-chart .grid { stroke: var(--line); stroke-width: 1; }
.dash-chart .ax { font-size: 12px; fill: var(--muted); }
.dash-chart .bar { fill: color-mix(in srgb, var(--accent) 32%, var(--card)); }
.dash-chart .bar:hover { fill: color-mix(in srgb, var(--accent) 55%, var(--card)); }
.dash-chart .line { fill: none; stroke: var(--accent-deep); stroke-width: 2; stroke-linejoin: round; }
.dash-chart .dot { fill: var(--card); stroke: var(--accent-deep); stroke-width: 2; }
[dir="rtl"] .dash-chart { direction: ltr; }
.dash-trend-side { display: grid; gap: 10px; border-inline-start: 1px solid var(--line); padding-inline-start: 16px; }
.dash-trend-side div { display: flex; flex-direction: column; }
.dash-trend-side b { font-size: 16px; font-variant-numeric: tabular-nums; }

.dash-tasks { list-style: none; margin: 0; padding: 4px 10px 10px; }
.dash-tasks li + li { border-top: 1px solid var(--line); }
.dash-tasks a, .dash-wait { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: var(--r); color: var(--text); }
.dash-tasks a:hover { background: var(--hover); text-decoration: none; }
.dash-task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-task-text b { font-weight: 500; font-size: 14px; }
.dash-task-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-more { border: 0; background: none; cursor: pointer; font: inherit; color: var(--accent-deep); }
.dash-clear { display: flex; align-items: center; gap: 10px; padding: 16px 20px 20px; color: #0E8A6A; font-weight: 500; }

.dash-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; padding: 4px 18px 18px; }
.dash-quick a { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); color: var(--text); font-weight: 500; font-size: 13.5px; }
.dash-quick a:hover { border-color: color-mix(in srgb, var(--tile) 45%, var(--line)); background: color-mix(in srgb, var(--tile) 5%, var(--card)); text-decoration: none; }

.dash-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 4px 18px 18px; }
.dash-ops a { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); color: var(--text); }
.dash-ops a:hover { border-color: color-mix(in srgb, var(--tile) 45%, var(--line)); text-decoration: none; }
.dash-op-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.dash-ops b { font-size: 21px; font-variant-numeric: tabular-nums; }
.dash-ops .link { margin-top: 6px; font-size: 12.5px; }

.dash-activity { list-style: none; margin: 0; padding: 4px 16px 14px; }
.dash-activity li { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.dash-activity li + li { border-top: 1px solid var(--line); }
.dash-activity .dash-task-text b { font-size: 13.5px; }

.dash-apps { margin-top: 26px; }
.dash-apps-head h2 { font-size: 18px; margin-bottom: 10px; }
.dash-apps-sec { margin-bottom: 16px; }
.dash-apps-sec h3 { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 8px; }
[dir="rtl"] .dash-apps-sec h3 { letter-spacing: 0; font-size: 12.5px; }
.dash-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dash-app { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text); height: 100%; }
.dash-app:hover { text-decoration: none; border-color: color-mix(in srgb, var(--tile) 45%, var(--line)); box-shadow: 0 10px 22px -18px rgba(10, 20, 40, .45); }
.dash-app > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dash-app small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1180px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-side { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 720px) {
  .dash-hero { padding: 22px 18px; }
  .dash-trend { grid-template-columns: 1fr; }
  .dash-trend-side { border: 0; padding: 0; grid-template-columns: repeat(3, 1fr); }
  .dash-spark { display: none; }
}

/* ================= v3.0.0 build 9: back button, next steps, copy - BY NEPTUNE UAE ================= */
.page-title { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.back-btn {
  flex: none; width: 38px; height: 38px; margin-top: 1px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 14px; transition: border-color .15s, background .15s;
}
.back-btn:hover { text-decoration: none; border-color: var(--accent); color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.next-steps {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 16px; padding: 10px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent) 5%, var(--card));
}
.next-title { font-weight: 600; font-size: 13.5px; margin-inline-end: 6px; color: var(--accent-deep); }
.copy-banner { border-style: dashed; }
@media print { .back-btn, .next-steps { display: none !important; } }

/* ================= v3.0.0 build 9: Business intelligence dashboards - BY NEPTUNE UAE ================= */
.bi-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bi-w { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.bi-s { grid-column: span 3; }
.bi-m { grid-column: span 6; }
.bi-l { grid-column: span 12; }
.bi-body { padding: 4px 18px 16px; flex: 1; }
.bi-kpi b { display: block; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bi-kpi b small { font-size: 13px; color: var(--muted); font-weight: 500; }
.bi-kpi .dash-delta { font-size: 13px; }
.bi-empty { padding: 18px 4px; color: var(--muted); }
.bi-chart { width: 100%; height: auto; direction: ltr; }
.bi-chart .grid { stroke: var(--line); }
.bi-chart .ax { font-size: 11px; fill: var(--muted); }
.bi-chart .bar { fill: color-mix(in srgb, var(--accent) 45%, var(--card)); }
.bi-chart .bar.neg { fill: #F87171; }
.bi-chart .bar:hover { fill: var(--accent); }
.bi-chart .line { fill: none; stroke: var(--accent-deep); stroke-width: 2; }
.bi-chart .dot { fill: var(--card); stroke: var(--accent-deep); stroke-width: 2; }
.bi-donut { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.bi-donut svg { width: 150px; height: 150px; flex: none; }
.bi-dt { font-size: 15px; font-weight: 600; fill: var(--text); }
.bi-ds { font-size: 9px; fill: var(--muted); }
.bi-donut ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; display: grid; gap: 5px; font-size: 13px; }
.bi-donut li { display: flex; align-items: center; gap: 8px; }
.bi-donut li span { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bi-donut li em { flex: 1; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-tools { display: flex; gap: 2px; }
.bi-edit { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px 12px; border-top: 1px dashed var(--line); }
.bi-edit input { flex: 1; min-width: 120px; }
@media (max-width: 1100px) { .bi-s { grid-column: span 6; } .bi-m { grid-column: span 12; } }
@media (max-width: 640px) { .bi-s, .bi-m, .bi-l { grid-column: span 12; } }

/* ================= v3.0.0 build 10: Haulage + responsive pass for phones and tablets - BY NEPTUNE UAE ================= */
.hl-bill-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.hl-bill-grid .is-selected td { background: var(--chip); }
.span-3 { grid-column: span 3; }
.check-grid { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hl-slip .facts dd { overflow-wrap: anywhere; }

/* Everything that can be wide scrolls inside itself, never the page */
.shell, .content, .card, .form-stack, .hr-dash, .dash-main, .dash-side { min-width: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, svg, canvas, video { max-width: 100%; }
.page-title h1 { overflow-wrap: anywhere; }

/* Tablets with the side menu open */
@media (max-width: 1180px) and (min-width: 901px) {
  :root { --sn-w: 236px; }
  .content { padding: 24px 22px 36px; }
  .hl-bill-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Phones and small tablets */
@media (max-width: 900px) {
  body { overflow-x: clip; }
  .topbar { height: 56px; padding: 0 8px; gap: 6px; }
  .crumbs { flex: 1; gap: 6px; }
  .crumbs > a, .crumbs > .sep, .crumbs > span:not(.crumb-current) { display: none; }
  .crumb-current { font-size: 15px; font-weight: 600; }
  .topbar-tools { gap: 2px; flex: none; }
  .quick-btn span, .palette-open span, .palette-open kbd, .lang-switch span, .avatar-btn .who, .avatar-btn > i { display: none !important; }
  .palette-open { min-width: 0; width: 38px; padding: 0; justify-content: center; border: 0; background: transparent; color: inherit; }
  .quick-btn { width: 38px; padding: 0; justify-content: center; }
  .avatar-btn { padding: 2px; }
  .avatar { width: 32px; height: 32px; }
  .popover { position: fixed; top: 60px; inset-inline: 10px; min-width: 0; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); }
  .flyout { display: none !important; }
  .content { padding: 16px 12px calc(28px + env(safe-area-inset-bottom)); }
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
  .page-head h1 { font-size: 21px; }
  .page-title { gap: 10px; }
  .back-btn { width: 36px; height: 36px; }
  /* phone: action buttons sit two per row in a grid (a wrapping flex row was measured as two rows tall and left a blank gap);
     the main action, forms and a lone last button take the full width */
  .page-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .page-actions > * { min-width: 0; flex: none; }
  .page-actions > .btn, .page-actions > a.btn { justify-content: center; }
  .page-actions > .btn-primary, .page-actions > form, .page-actions > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-actions > form { display: flex; gap: 8px; }
  .page-actions > form .btn { flex: 1 1 0; justify-content: center; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .span-2, .span-3 { grid-column: auto; }
  .hr-dash, .hl-bill-grid, .user-card-grid, .acc-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hr-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hr-tabs::-webkit-scrollbar { display: none; }
  .hr-tabs a { flex: none; white-space: nowrap; }
  .filters { gap: 10px; }
  .filters .field-inline { flex: 1 1 140px; min-width: 0; }
  .filters .field-inline input, .filters .field-inline select { width: 100%; }
  .filters-actions { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
  .table th, .table td { padding: 9px 10px; }
  .kpis-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-actions { flex-wrap: wrap; }
  .sticky-actions { position: sticky; bottom: 0; z-index: 5; margin-inline: -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--canvas); border-top: 1px solid var(--line); }
  .next-steps .btn { flex: 1 1 auto; justify-content: center; }
  .dash-hero { padding: 20px 16px; border-radius: var(--r-lg); }
  .dash-hero h1 { font-size: 22px; }
  .dash-hero-tools, .dash-search { width: 100%; min-width: 0; }
  .dash-skyline { opacity: .05; width: 70%; }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dash-kpi { min-height: 0; padding: 12px; }
  .dash-kpi-val { font-size: 18px; }
  .dash-kpi-head { font-size: 12px; gap: 8px; }
  .dash-kpi-ic { width: 28px; height: 28px; font-size: 13px; }
  .dash-quick, .dash-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 12px 14px; }
  .dash-apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-trend { padding: 4px 12px 14px; }
  .dash-tasks { padding: 4px 4px 8px; }
  .dash-tasks a .badge { display: none; }
  .bi-grid { gap: 12px; }
  .sn-app-btn { padding: 11px 10px; }
  .sn-sub a { padding-block: 9px; }
}
@media (max-width: 560px) {
  input, select, textarea { font-size: 16px; }
  .form-actions .btn, .form-actions button { flex: 1 1 100%; justify-content: center; }
  .kpis-top, .dash-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .facts-cols, .facts { grid-template-columns: minmax(0, 1fr) !important; }
  .facts dt { margin-top: 6px; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .table { font-size: 13.5px; }
  .bi-donut { flex-direction: column; align-items: stretch; }
  .bi-donut svg { margin: 0 auto; }
}

/* ===================== build 13 - NEPTUNE link in the signature, Real estate 1.1.0 dashboard and reports - BY NEPTUNE UAE ===================== */
.nep-site { color: inherit; font-weight: 700; letter-spacing: .04em; text-decoration: none; border-bottom: 1px dotted currentColor; }
.nep-site:hover { color: var(--accent); border-bottom-style: solid; }
.sn-name em { font-style: normal; font-weight: 500; opacity: .7; font-size: .85em; }
.re-dash { display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
.re-dash-side, .re-dash-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.re-box { padding: 14px 16px; }
.re-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.re-box-head h2 { font-size: 15px; margin: 0; display: flex; align-items: center; gap: 8px; }
.re-box-head h2 small { color: var(--muted); font-weight: 500; }
.re-box-head select { padding: 6px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; }
.re-search { margin: 0 0 8px; }
.re-search-row { display: flex; gap: 6px; }
.re-search-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--text); font: inherit; }
.re-search-grid { display: grid; grid-template-columns: 1fr 2fr 1.4fr auto; gap: 8px; margin-top: 10px; align-items: end; }
.re-search-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.re-search-grid input { padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--text); font: inherit; }
.re-search-btns { display: flex; gap: 6px; }
.re-wa { color: #25D366; }
.re-tree details { margin: 2px 0; }
.re-tree summary { cursor: pointer; padding: 5px 4px; font-weight: 600; display: flex; gap: 8px; align-items: center; list-style: none; }
.re-tree summary::-webkit-details-marker { display: none; }
.re-tree summary i { color: #D69E2E; }
.re-tree ul { list-style: none; margin: 0 0 6px; padding-inline-start: 26px; border-inline-start: 1px dashed var(--line); margin-inline-start: 10px; }
.re-tree li a { display: block; padding: 3px 6px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 13.5px; }
.re-tree li a:hover { background: var(--chip); color: var(--accent); }
.re-ring { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.re-ring svg { width: 170px; height: 170px; }
.re-ring-l { font-size: 9px; fill: var(--muted); }
.re-ring-n { font-size: 18px; font-weight: 700; fill: var(--text); }
.re-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; font-size: 13px; }
.re-legend li { display: flex; align-items: center; gap: 8px; }
.re-legend li b { margin-inline-start: auto; }
.re-legend span { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.re-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.re-tile { position: relative; display: flex; flex-direction: column; min-height: 104px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--c); color: #fff; text-decoration: none; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transition: transform .12s, box-shadow .12s; }
.re-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); color: #fff; }
.re-tile-label { font-size: 13px; font-weight: 600; opacity: .95; padding-inline-end: 34px; line-height: 1.3; }
.re-tile-ic { position: absolute; inset-inline-end: 12px; top: 12px; font-size: 22px; opacity: .55; }
.re-tile-num { font-size: 30px; font-weight: 700; line-height: 1.1; margin-top: auto; }
.re-tile-amt { font-size: 12px; opacity: .9; }
.re-income { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.re-inc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.re-inc { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-lg); color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.re-inc:hover { color: #fff; filter: brightness(1.05); }
.re-inc small { font-size: 12.5px; opacity: .92; }
.re-inc b { font-size: 18px; }
.re-inc i { position: absolute; inset-inline-end: 12px; bottom: 12px; font-size: 22px; opacity: .45; }
.re-inc-lines { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 12px 0 0; font-size: 13px; }
.re-inc-lines dt { color: var(--muted); }
.re-inc-lines dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.re-quarters { padding: 14px 16px; display: flex; flex-direction: column; }
.re-q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.re-q { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--chip); }
.re-q small { color: var(--muted); font-weight: 600; }
.re-q small span { font-weight: 400; }
.re-q b { font-size: 17px; font-variant-numeric: tabular-nums; }
.re-q em { font-style: normal; font-size: 12px; color: var(--muted); }
.re-q em.up { color: #2F9E62; }
.re-q em.down { color: #D64545; }
.re-q-sub { font-size: 11.5px; color: var(--muted); }
.re-q-total { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; font-weight: 600; }
.re-q-total b { font-size: 18px; }
.re-report-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.re-report-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; font-size: 13px; }
.re-report-nav a i { color: var(--tile); }
.re-report-nav a.is-on { background: var(--tile); border-color: var(--tile); color: #fff; }
.re-report-nav a.is-on i { color: #fff; }
.re-report-tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.re-filters { flex-wrap: wrap; }
.re-report .table th, .re-report .table td { white-space: nowrap; }
.re-report .table td:nth-child(n) { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.table-compact th, .table-compact td { padding: 6px 9px; font-size: 13px; }
.re-group th { background: var(--chip); text-align: start; font-weight: 700; padding-top: 10px; }
.re-subtotal td { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--chip) 60%, transparent); }
.print-only { display: none; }
@media (max-width: 1100px) {
  .re-dash { grid-template-columns: 1fr; }
  .re-dash-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .re-income { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .re-search-grid { grid-template-columns: 1fr 1fr; }
  .re-inc-grid, .re-q-grid { grid-template-columns: 1fr; }
  .re-tile-num { font-size: 24px; }
}
@media print {
  .print-only { display: block; }
  .re-tile, .re-inc { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .re-report .table td:nth-child(n) { white-space: normal; max-width: none; }
}

/* =====================================================================================================
   NEP ERP v3.0.0 build 14 - Tier standard: Platinum, Gold and Silver.
   Dashboard tiles, tab bars, report hubs and summary strips in every plugin share one look:
   metallic gradients, 3D relief, a press animation with ripple on click, and a colour change on the active one.
   Platinum = headline figures, Gold = money and collections, Silver = operations and follow-up.
   BY NEPTUNE UAE
   ===================================================================================================== */
:root {
  --pt-1: #fbfcfe; --pt-2: #e3e8ef; --pt-3: #c5cdd8; --pt-4: #f1f4f8; --pt-5: #aab4c2; --pt-ink: #1d2734; --pt-dim: #4f5d70; --pt-glow: rgba(150, 175, 210, .55);
  --au-1: color-mix(in srgb, var(--ink) 62%, var(--on-ink)); --au-2: color-mix(in srgb, var(--ink) 80%, var(--on-ink)); --au-3: var(--ink);
  --au-4: color-mix(in srgb, var(--ink) 72%, var(--on-ink)); --au-5: color-mix(in srgb, var(--ink) 82%, #000);
  --au-ink: var(--on-ink); --au-dim: color-mix(in srgb, var(--on-ink) 82%, var(--ink)); --au-glow: color-mix(in srgb, var(--ink) 55%, transparent);
  /* build 18: the blue tier is now the SIDE MENU colour (--ink from Settings > Look), so it changes with the theme */
  --ag-1: #f6f7f8; --ag-2: #d7d9dc; --ag-3: #a7abb1; --ag-4: #e9eaec; --ag-5: #858a91; --ag-ink: #1f2328; --ag-dim: #4b5058; --ag-glow: rgba(140, 146, 155, .5);
  --tier-active: linear-gradient(150deg, #1b2a44 0%, #0e1729 60%, #1d2d4a 100%);
}
.nt-tier-platinum { --m1: var(--pt-1); --m2: var(--pt-2); --m3: var(--pt-3); --m4: var(--pt-4); --m5: var(--pt-5); --m-ink: var(--pt-ink); --m-dim: var(--pt-dim); --m-glow: var(--pt-glow); --m-hi: #ffffff; --m-active-txt: #e8eef7; }
.nt-tier-gold { --m1: var(--au-1); --m2: var(--au-2); --m3: var(--au-3); --m4: var(--au-4); --m5: var(--au-5); --m-ink: var(--au-ink); --m-dim: var(--au-dim); --m-glow: var(--au-glow); --m-hi: rgba(255, 255, 255, .45); --m-active-txt: #d6e4f3; }
.nt-tier-silver { --m1: var(--ag-1); --m2: var(--ag-2); --m3: var(--ag-3); --m4: var(--ag-4); --m5: var(--ag-5); --m-ink: var(--ag-ink); --m-dim: var(--ag-dim); --m-glow: var(--ag-glow); --m-hi: #ffffff; --m-active-txt: #d5d9de; }
.nt-metal {
  background: linear-gradient(135deg, var(--m1) 0%, var(--m2) 28%, var(--m3) 52%, var(--m4) 74%, var(--m5) 100%);
  background-size: 180% 180%; color: var(--m-ink);
}

/* ---------- tier board (dashboard sections) ---------- */
.nt-board { display: grid; gap: 18px; margin-bottom: 18px; }
.nt-section { position: relative; padding: 14px 14px 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10, 16, 28, .04); }
.nt-section-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; flex-wrap: wrap; }
.nt-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(0, 0, 0, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(0, 0, 0, .12); }
.nt-chip i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: rgba(255, 255, 255, .55); color: var(--m-ink); }
[dir="rtl"] .nt-chip { letter-spacing: 0; padding: 4px 6px 4px 12px; }
.nt-section-head h2 { font-size: 15px; font-weight: 600; margin: 0; }
.nt-section-head small { color: var(--muted); font-size: 12.5px; }
.nt-section-head .nt-count { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.nt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; perspective: 900px; }
.nt-section-platinum .nt-tiles { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }

/* ---------- the tile ---------- */
.nt-tile {
  position: relative; display: flex; flex-direction: column; min-height: 112px; padding: 13px 14px 12px; border-radius: 14px; overflow: hidden; isolation: isolate;
  text-decoration: none; border: 1px solid rgba(0, 0, 0, .14); transform-style: preserve-3d; transform: translateZ(0);
  box-shadow: inset 0 1px 0 var(--m-hi), inset 0 -3px 0 rgba(0, 0, 0, .10), inset 0 0 0 1px rgba(255, 255, 255, .25), 0 1px 0 rgba(0, 0, 0, .06), 0 8px 16px -10px rgba(10, 18, 34, .45);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, background-position .6s ease, color .25s ease, filter .2s ease;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
.nt-tile::before { /* top gloss */
  content: ""; position: absolute; inset: 0 0 52% 0; z-index: -1; border-radius: 14px 14px 40% 40% / 14px 14px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0)); pointer-events: none;
}
.nt-tile::after { /* sheen sweep */
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 38%; inset-inline-start: -60%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-18deg); opacity: 0;
}
.nt-tile:hover { color: var(--m-ink); text-decoration: none; transform: translateY(-4px) rotateX(5deg); background-position: 100% 100%;
  box-shadow: inset 0 1px 0 var(--m-hi), inset 0 -3px 0 rgba(0, 0, 0, .12), 0 2px 0 rgba(0, 0, 0, .05), 0 18px 26px -14px rgba(10, 18, 34, .55), 0 0 0 3px var(--m-glow); }
.nt-tile:hover::after { animation: nt-sheen .9s ease forwards; }
.nt-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring), 0 10px 20px -12px rgba(10, 18, 34, .5); }
.nt-tile.is-pressed, .nt-tile:active { transform: translateY(1px) scale(.975); transition-duration: .08s;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .28), inset 0 -1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .15); }
.nt-label { position: relative; z-index: 1; font-size: 12.8px; font-weight: 600; line-height: 1.3; padding-inline-end: 38px; color: var(--m-dim); }
.nt-ic { position: absolute; z-index: 1; top: 11px; inset-inline-end: 11px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px;
  color: var(--m-ink); background: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .15)); border: 1px solid rgba(0, 0, 0, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 5px -2px rgba(0, 0, 0, .3); transition: transform .3s ease; }
.nt-tile:hover .nt-ic { transform: translateZ(18px) rotate(-6deg) scale(1.06); }
.nt-num { position: relative; z-index: 1; margin-top: auto; font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.nt-section-platinum .nt-num { font-size: 31px; }
.nt-amt { position: relative; z-index: 1; font-size: 12px; font-weight: 600; color: var(--m-dim); font-variant-numeric: tabular-nums; margin-top: 2px; }
.nt-sub { position: relative; z-index: 1; font-size: 11.5px; color: var(--m-dim); opacity: .9; margin-top: 1px; }
.nt-tile.is-warn .nt-num { color: #9b1c1c; }
.nt-bar { position: relative; z-index: 1; height: 5px; border-radius: 5px; margin-top: 7px; background: rgba(0, 0, 0, .12); overflow: hidden; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .18); }
.nt-bar > span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, rgba(255, 255, 255, .9), var(--m-ink)); }

/* active tile: the colour changes to deep navy with the metal's own tone */
.nt-tile.is-active {
  background: var(--tier-active); color: var(--m-active-txt); border-color: var(--m3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 2px var(--m3), 0 0 22px -2px var(--m-glow), 0 14px 24px -14px rgba(0, 0, 0, .7);
}
.nt-tile.is-active::before { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); }
.nt-tile.is-active .nt-label, .nt-tile.is-active .nt-amt, .nt-tile.is-active .nt-sub { color: var(--m-active-txt); opacity: .92; }
.nt-tile.is-active .nt-num { color: transparent; background: linear-gradient(135deg, var(--m1), var(--m2) 40%, var(--m4) 70%, var(--m3)); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.nt-tile.is-active .nt-ic { background: linear-gradient(135deg, var(--m1), var(--m3)); color: var(--m-ink); border-color: transparent; }
.nt-tile.is-active .nt-bar { background: rgba(255, 255, 255, .15); }
.nt-tile.is-active .nt-bar > span { background: linear-gradient(90deg, var(--m1), var(--m3)); }
.nt-tile.is-active:hover { color: var(--m-active-txt); }

/* ripple */
.nt-ripple { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .55; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 70%);
  animation: nt-ripple .6s ease-out forwards; }
@keyframes nt-ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes nt-sheen { 0% { inset-inline-start: -60%; opacity: 0; } 20% { opacity: 1; } 100% { inset-inline-start: 130%; opacity: 0; } }
@keyframes nt-in { from { opacity: 0; transform: translateY(8px) rotateX(-8deg); } to { opacity: 1; transform: none; } }
.nt-tiles > .nt-tile { animation: nt-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.nt-tiles > .nt-tile:nth-child(2) { animation-delay: .03s; } .nt-tiles > .nt-tile:nth-child(3) { animation-delay: .06s; } .nt-tiles > .nt-tile:nth-child(4) { animation-delay: .09s; }
.nt-tiles > .nt-tile:nth-child(5) { animation-delay: .12s; } .nt-tiles > .nt-tile:nth-child(6) { animation-delay: .15s; } .nt-tiles > .nt-tile:nth-child(n+7) { animation-delay: .18s; }

/* ---------- tab bars everywhere: silver tabs, platinum on hover, gold when active ---------- */
.hr-tabs, .re-report-nav, .nt-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 14px; background: linear-gradient(180deg, var(--chip), color-mix(in srgb, var(--chip) 70%, var(--line)));
  border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(10, 16, 28, .08);
}
.hr-tabs a, .re-report-nav a, .nt-tabs a {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--ag-ink); border: 1px solid rgba(0, 0, 0, .13);
  background: linear-gradient(135deg, var(--ag-1) 0%, var(--ag-2) 45%, var(--ag-4) 75%, var(--ag-3) 100%); background-size: 160% 160%;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .09), 0 1px 2px rgba(10, 16, 28, .12);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, background-position .45s ease, color .2s ease;
}
.hr-tabs a i, .re-report-nav a i, .nt-tabs a i { color: var(--ag-dim); transition: transform .25s ease, color .2s ease; }
.hr-tabs a:hover, .re-report-nav a:hover, .nt-tabs a:hover {
  color: var(--pt-ink); text-decoration: none; transform: translateY(-2px);
  background: linear-gradient(135deg, var(--pt-1) 0%, var(--pt-2) 40%, var(--pt-4) 70%, var(--pt-3) 100%); background-position: 100% 100%;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .08), 0 8px 14px -8px rgba(10, 18, 34, .45), 0 0 0 2px var(--pt-glow);
}
.hr-tabs a:hover i, .re-report-nav a:hover i, .nt-tabs a:hover i { transform: rotate(-8deg) scale(1.1); color: var(--pt-dim); }
.hr-tabs a:active, .re-report-nav a:active, .nt-tabs a:active, .hr-tabs a.is-pressed, .re-report-nav a.is-pressed, .nt-tabs a.is-pressed {
  transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25); transition-duration: .08s; }
.hr-tabs a.is-on, .re-report-nav a.is-on, .nt-tabs a.is-on {
  color: var(--au-ink); border-color: rgba(20, 32, 46, .55);
  background: linear-gradient(135deg, var(--au-1) 0%, var(--au-2) 30%, var(--au-3) 58%, var(--au-4) 80%, var(--au-5) 100%); background-size: 180% 180%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(15, 24, 36, .22), 0 6px 14px -6px rgba(61, 81, 104, .6), 0 0 0 2px var(--au-glow);
  animation: nt-gold-breathe 3.2s ease-in-out infinite;
}
.hr-tabs a.is-on i, .re-report-nav a.is-on i, .nt-tabs a.is-on i { color: var(--au-ink); }
.hr-tabs a b { background: rgba(255, 255, 255, .6); color: inherit; }
@keyframes nt-gold-breathe { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }

/* segmented choices follow the same rule */
.segmented { background: linear-gradient(180deg, var(--chip), color-mix(in srgb, var(--chip) 70%, var(--line))); box-shadow: inset 0 1px 2px rgba(10, 16, 28, .08); }
.seg span { transition: background .2s, color .2s, box-shadow .2s, transform .15s; }
.seg span:hover { background: linear-gradient(135deg, var(--pt-1), var(--pt-2) 50%, var(--pt-3)); color: var(--pt-ink); }
.seg input:checked + span { color: var(--au-ink); background: linear-gradient(135deg, var(--au-1) 0%, var(--au-2) 35%, var(--au-3) 65%, var(--au-4) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(15, 24, 36, .2), 0 3px 8px -3px rgba(61, 81, 104, .55); }

/* summary strips on every page (.kpis-top) take the silver standard; data-tier picks another metal */
.kpis-top > div, .kpis-top > a {
  position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, .12) !important; color: var(--ag-ink);
  background: linear-gradient(135deg, var(--ag-1) 0%, var(--ag-2) 35%, var(--ag-4) 72%, var(--ag-3) 100%) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .08), 0 6px 12px -9px rgba(10, 18, 34, .45);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}
.kpis-top > :first-child { color: var(--pt-ink); background: linear-gradient(135deg, var(--pt-1) 0%, var(--pt-2) 30%, var(--pt-3) 55%, var(--pt-4) 78%, var(--pt-5) 100%) !important; }
.kpis-top > [data-tier="gold"] { color: var(--au-ink); background: linear-gradient(135deg, var(--au-1) 0%, var(--au-2) 30%, var(--au-3) 55%, var(--au-4) 78%, var(--au-5) 100%) !important; }
.kpis-top > [data-tier="platinum"] { color: var(--pt-ink); background: linear-gradient(135deg, var(--pt-1) 0%, var(--pt-2) 30%, var(--pt-3) 55%, var(--pt-4) 78%, var(--pt-5) 100%) !important; }
.kpis-top > [data-tier="silver"] { color: var(--ag-ink); background: linear-gradient(135deg, var(--ag-1) 0%, var(--ag-2) 35%, var(--ag-4) 72%, var(--ag-3) 100%) !important; }
.kpis-top > * span { color: inherit; opacity: .78; font-weight: 600; }
.kpis-top > * b { color: inherit !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.kpis-top > * b.warn-txt { color: #9b1c1c !important; }
.kpis-top > a:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 14px 20px -12px rgba(10, 18, 34, .55), 0 0 0 2px var(--pt-glow); text-decoration: none; }
.kpis-top > a:active { transform: translateY(1px) scale(.98); }

/* ---------- report kit (the real estate reporting standard for every plugin) ---------- */
.rk-hub { display: grid; gap: 8px; margin-bottom: 14px; }
.rk-hub-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rk-hub-row .nt-chip { min-width: 112px; justify-content: flex-start; }
.rk-hub-row .nt-tabs { flex: 1; padding: 4px; }
.rk-viewbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.rk-viewbar select { height: 32px; font-size: 12.5px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); }
.rk-viewbar label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.rk-views { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--chip); border: 1px solid var(--line); }
.rk-views a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.rk-views a:hover { color: var(--pt-ink); background: linear-gradient(135deg, var(--pt-1), var(--pt-2) 60%, var(--pt-3)); text-decoration: none; }
.rk-views a.is-on { color: var(--au-ink); background: linear-gradient(135deg, var(--au-1), var(--au-2) 40%, var(--au-3) 75%, var(--au-4)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px -2px rgba(61, 81, 104, .6); }
.rk-presets { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.rk-presets a { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; background: var(--card); }
.rk-presets a:hover { color: var(--pt-ink); border-color: var(--pt-3); background: linear-gradient(135deg, var(--pt-1), var(--pt-2)); text-decoration: none; }
.rk-presets a.is-on { color: var(--au-ink); border-color: var(--au-3); background: linear-gradient(135deg, var(--au-1), var(--au-2) 60%, var(--au-4)); }
.rk-pivot td.num { position: relative; }
.rk-pivot td.rk-heat { background: color-mix(in srgb, var(--au-2) calc(var(--heat, 0) * 70%), transparent); }
.rk-pivot th.rk-rowh { text-align: start; font-weight: 600; background: var(--chip); position: sticky; inset-inline-start: 0; z-index: 1; }
.rk-pivot tfoot th, .rk-pivot td.rk-tot { font-weight: 700; background: color-mix(in srgb, var(--pt-2) 55%, transparent); }
.rk-chart { display: grid; gap: 7px; padding: var(--pad) var(--pad-l); }
.rk-chart-row { display: grid; grid-template-columns: minmax(120px, 240px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; }
.rk-chart-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-chart-track { height: 20px; border-radius: 7px; background: var(--chip); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); }
.rk-chart-fill { height: 100%; border-radius: 7px; min-width: 2px; background: linear-gradient(180deg, var(--au-1), var(--au-2) 35%, var(--au-3) 70%, var(--au-5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transform-origin: left center; animation: rk-grow .7s cubic-bezier(.2, .8, .2, 1) both; }
[dir="rtl"] .rk-chart-fill { transform-origin: right center; }
.rk-chart-row:nth-child(n+4) .rk-chart-fill { background: linear-gradient(180deg, var(--pt-1), var(--pt-2) 35%, var(--pt-3) 70%, var(--pt-5)); }
.rk-chart-row:nth-child(n+9) .rk-chart-fill { background: linear-gradient(180deg, var(--ag-1), var(--ag-2) 35%, var(--ag-3) 70%, var(--ag-5)); }
.rk-chart-row b { font-variant-numeric: tabular-nums; min-width: 120px; text-align: end; }
.rk-chart-row small { color: var(--muted); margin-inline-start: 6px; font-weight: 500; }
@keyframes rk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rk-note { margin: -4px 0 12px; }
.rk-report-tiles .tile { position: relative; }

/* trend chart on dashboards */
.nt-trend { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding: 14px var(--pad-l) 6px; }
.nt-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; height: 100%; justify-content: flex-end; }
.nt-trend-bar { width: 100%; max-width: 38px; border-radius: 7px 7px 3px 3px; min-height: 2px; background: linear-gradient(180deg, var(--au-1), var(--au-2) 30%, var(--au-3) 70%, var(--au-5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 8px -5px rgba(38, 54, 74, .6); transform-origin: bottom; animation: nt-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.nt-trend-col.is-alt .nt-trend-bar { background: linear-gradient(180deg, var(--pt-1), var(--pt-2) 30%, var(--pt-3) 70%, var(--pt-5)); }
.nt-trend-col small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.nt-trend-col em { font-style: normal; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes nt-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 640px) {
  .nt-tiles, .nt-section-platinum .nt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .nt-tile { min-height: 98px; padding: 11px; }
  .nt-num, .nt-section-platinum .nt-num { font-size: 22px; }
  .nt-ic { width: 28px; height: 28px; font-size: 13px; }
  .rk-chart-row { grid-template-columns: minmax(80px, 120px) minmax(0, 1fr); }
  .rk-chart-row b { grid-column: 1 / -1; text-align: start; }
  .rk-hub-row .nt-chip { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nt-tile, .nt-tiles > .nt-tile, .hr-tabs a.is-on, .re-report-nav a.is-on, .nt-tabs a.is-on, .rk-chart-fill, .nt-trend-bar { animation: none !important; transition: none !important; }
}
@media print {
  .nt-tile, .nt-chip, .kpis-top > *, .rk-chart-fill, .nt-trend-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; animation: none !important; }
  .nt-tile::after { display: none; }
  .rk-viewbar, .rk-hub, .rk-presets { display: none !important; }
}

/* build 15: section and report-group headers show the category name in the metal colour (no tier words) */
.nt-chip { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 700; padding: 6px 14px 6px 7px; }
[dir="rtl"] .nt-chip { padding: 6px 7px 6px 14px; }
.nt-chip i { width: 24px; height: 24px; font-size: 11px; }
.rk-hub-row .nt-chip { min-width: 170px; font-size: 12.5px; }

/* build 16: the former gold tier is now #3D5168 (deep slate blue) - still gradient, shining and animated.
   Light text and icons so everything reads on the darker metal. */
.nt-tier-gold.nt-metal { color: #fff; }
.nt-tile.nt-tier-gold .nt-num { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.nt-tile.nt-tier-gold::before { background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0)); }
.nt-tile.nt-tier-gold::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%); }
.nt-tile.nt-tier-gold .nt-ic { color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06)); border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px -2px rgba(0, 0, 0, .45); }
.nt-tile.nt-tier-gold.is-warn .nt-num { color: #ffc9c9; }
.nt-tile.nt-tier-gold .nt-bar { background: rgba(255, 255, 255, .18); }
.nt-tile.nt-tier-gold .nt-bar > span { background: linear-gradient(90deg, #dce7f3, #ffffff); }
.nt-chip.nt-tier-gold i { background: rgba(255, 255, 255, .2); color: #fff; }
.nt-tile.nt-tier-gold { animation: nt-in .45s cubic-bezier(.2, .8, .2, 1) both, nt-slate-shine 6s ease-in-out 1s infinite; }
@keyframes nt-slate-shine { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
/* active tile of this tier: the colour changes to near-black navy with an ice-blue edge and glow */
.nt-tile.nt-tier-gold.is-active { background: linear-gradient(150deg, #0d1624 0%, #172334 55%, #0b1320 100%); border-color: #9fb4cc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 2px #7891ae, 0 0 24px -2px rgba(120, 160, 205, .65), 0 14px 24px -14px rgba(0, 0, 0, .7); }
.nt-tile.nt-tier-gold.is-active .nt-num { background: linear-gradient(135deg, #e6eef8, #9fb4cc 50%, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpis-top > [data-tier="gold"] span, .kpis-top > [data-tier="gold"] b { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.hr-tabs a.is-on, .re-report-nav a.is-on, .nt-tabs a.is-on, .rk-views a.is-on, .rk-presets a.is-on, .seg input:checked + span { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.rk-views a.is-on i, .hr-tabs a.is-on b { color: #fff; }
.hr-tabs a.is-on b { background: rgba(255, 255, 255, .2); }
.rk-pivot td.rk-heat { background: color-mix(in srgb, #7891ae calc(var(--heat, 0) * 55%), transparent); }
@media (prefers-reduced-motion: reduce) { .nt-tile.nt-tier-gold { animation: none !important; } }

/* ===== build 18: the blue tier follows the side menu colour and moves slowly =====
   Colour: --au-1..5 above are mixed from --ink / --on-ink (the side menu colour and its text), so every blue tab, tile,
   segmented choice, chart bar and trend bar changes with the theme. Same gradient, shine, breathing and ripple as before.
   Speed: tune these on :root (bigger = slower). */
:root {
  --au-breathe: 12s;   /* active tab: gradient breathing loop        (was 3.2s) */
  --au-shine: 18s;     /* blue tile: gradient shine loop              (was 6s)   */
  --au-sheen: 2.2s;    /* blue tile: light sweep on hover             (was .9s)  */
  --au-ripple: 1.3s;   /* ripple on click                             (was .6s)  */
  --au-glide: 1.2s;    /* colour glide on hover / change              (was .45-.6s) */
  --au-grow: 1.4s;     /* blue chart / trend bars growing in          (was .7s)  */
  --au-edge: color-mix(in srgb, var(--ink) 70%, #000);
  --au-shadow: color-mix(in srgb, var(--ink) 60%, transparent);
}
.hr-tabs a.is-on, .re-report-nav a.is-on, .nt-tabs a.is-on {
  border-color: var(--au-edge);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--au-ink) 45%, transparent), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 6px 14px -6px var(--au-shadow), 0 0 0 2px var(--au-glow);
  animation: nt-gold-breathe var(--au-breathe) ease-in-out infinite;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, background-position var(--au-glide) ease, color .2s ease;
}
.rk-views a.is-on { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--au-ink) 45%, transparent), 0 2px 6px -2px var(--au-shadow); }
.seg input:checked + span { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--au-ink) 45%, transparent), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 3px 8px -3px var(--au-shadow); }
.hr-tabs a.is-on, .re-report-nav a.is-on, .nt-tabs a.is-on, .rk-views a.is-on, .rk-presets a.is-on, .seg input:checked + span,
.hr-tabs a.is-on i, .re-report-nav a.is-on i, .nt-tabs a.is-on i, .rk-views a.is-on i, .hr-tabs a.is-on b { color: var(--au-ink); }
.hr-tabs a.is-on b { background: color-mix(in srgb, var(--au-ink) 20%, transparent); }
.rk-pivot td.rk-heat { background: color-mix(in srgb, var(--au-4) calc(var(--heat, 0) * 55%), transparent); }
.kpis-top > [data-tier="gold"] span, .kpis-top > [data-tier="gold"] b { color: var(--au-ink) !important; }
.nt-tier-gold.nt-metal { color: var(--au-ink); }
/* blue tiles */
.nt-tile.nt-tier-gold { transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, background-position var(--au-glide) ease, color .25s ease, filter .2s ease;
  animation: nt-in .45s cubic-bezier(.2, .8, .2, 1) both, nt-slate-shine var(--au-shine) ease-in-out 1s infinite; }
.nt-tile.nt-tier-gold:hover::after { animation-duration: var(--au-sheen); }
.nt-tile.nt-tier-gold::after { background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--au-ink) 38%, transparent) 50%, transparent 100%); }
.nt-tile.nt-tier-gold::before { background: linear-gradient(180deg, color-mix(in srgb, var(--au-ink) 26%, transparent), transparent); }
.nt-tile.nt-tier-gold .nt-ic { color: var(--au-ink); background: linear-gradient(160deg, color-mix(in srgb, var(--au-ink) 28%, transparent), color-mix(in srgb, var(--au-ink) 6%, transparent)); border-color: color-mix(in srgb, var(--au-ink) 22%, transparent); }
.nt-chip.nt-tier-gold i { background: color-mix(in srgb, var(--au-ink) 20%, transparent); color: var(--au-ink); }
.nt-tile.nt-tier-gold .nt-bar { background: color-mix(in srgb, var(--au-ink) 18%, transparent); }
.nt-tile.nt-tier-gold .nt-bar > span { background: linear-gradient(90deg, var(--au-dim), var(--au-ink)); }
/* active blue tile: a deeper shade of the side menu colour, edge and glow in the menu accent colour */
.nt-tile.nt-tier-gold.is-active { background: linear-gradient(150deg, color-mix(in srgb, var(--ink) 55%, #000) 0%, color-mix(in srgb, var(--ink) 82%, #000) 55%, color-mix(in srgb, var(--ink) 50%, #000) 100%); border-color: var(--rail-accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--au-ink) 12%, transparent), 0 0 0 2px var(--rail-accent), 0 0 24px -2px color-mix(in srgb, var(--rail-accent) 65%, transparent), 0 14px 24px -14px rgba(0, 0, 0, .7); }
.nt-tile.nt-tier-gold.is-active .nt-num { background: linear-gradient(135deg, var(--au-ink), var(--rail-accent) 50%, var(--au-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* slow ripple and slow bar growth for the blue items */
.nt-tier-gold .nt-ripple, .hr-tabs a.is-on .nt-ripple, .re-report-nav a.is-on .nt-ripple, .nt-tabs a.is-on .nt-ripple { animation-duration: var(--au-ripple); }
.rk-chart-fill { animation-duration: var(--au-grow); }
.nt-trend-bar { animation-duration: var(--au-grow); }
.rk-chart-fill, .nt-trend-bar { background: linear-gradient(180deg, var(--au-1), var(--au-2) 35%, var(--au-3) 70%, var(--au-5)); }
.rk-chart-row:nth-child(n+4) .rk-chart-fill, .nt-trend-col.is-alt .nt-trend-bar { background: linear-gradient(180deg, var(--pt-1), var(--pt-2) 35%, var(--pt-3) 70%, var(--pt-5)); }
.rk-chart-row:nth-child(n+9) .rk-chart-fill { background: linear-gradient(180deg, var(--ag-1), var(--ag-2) 35%, var(--ag-3) 70%, var(--ag-5)); }
@media (prefers-reduced-motion: reduce) { .nt-tile.nt-tier-gold, .hr-tabs a.is-on, .re-report-nav a.is-on, .nt-tabs a.is-on { animation: none !important; } }

/* ================= build 20: responsive polish for phones, tablets and landscape - BY NEPTUNE UAE =================
   Found by rendering the shell, lists, forms, tabs, tiles and KPI strips at 320 to 1280 px wide in a headless browser. */
/* touch screens: comfortable targets everywhere (the same on every plugin) */
@media (pointer: coarse), (max-width: 900px) {
  .icon-btn, .sn-open, .back-btn, .pin-btn { min-width: 40px; min-height: 40px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .field input, .field select, .field textarea, .filters input, .filters select { min-height: 42px; }
  .sn-sub a, .popover a, .popover button, .topnav-drop a { min-height: 42px; display: flex; align-items: center; }
  .pager-nav .btn { min-width: 44px; justify-content: center; }
}
@media (max-width: 900px) {
  /* every tab / pill bar scrolls sideways in ONE row instead of wrapping into a tall block (this overrides the later desktop rules) */
  .hr-tabs, .nt-tabs, .re-report-nav, .rk-presets, .rk-views {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; max-width: 100%;
  }
  .hr-tabs::-webkit-scrollbar, .nt-tabs::-webkit-scrollbar, .re-report-nav::-webkit-scrollbar, .rk-presets::-webkit-scrollbar { display: none; }
  .hr-tabs > a, .nt-tabs > a, .re-report-nav > a, .rk-presets > a, .rk-views > a { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .rk-views { display: flex; }
  /* big numbers shrink to fit their box instead of being cut off */
  .kpis-top > * { min-width: 0; }
  .kpis-top > * b { font-size: clamp(15px, 4.8vw, 20px) !important; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
  .nt-tile .nt-num { font-size: clamp(15px, 4.8vw, 22px); max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
  .nt-tile .nt-lbl, .nt-tile .nt-sub { overflow-wrap: anywhere; }
  .dash-kpi-val { font-size: clamp(15px, 4.6vw, 18px); overflow-wrap: anywhere; }
  /* wide tables: smooth touch scrolling with a soft edge so it is clear there is more to see */
  .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%;
    background: linear-gradient(to right, var(--card) 30%, transparent) left center / 28px 100% no-repeat local,
                linear-gradient(to left, var(--card) 30%, transparent) right center / 28px 100% no-repeat local,
                radial-gradient(farthest-side at 0 50%, rgba(10, 20, 40, .18), transparent) left center / 10px 100% no-repeat scroll,
                radial-gradient(farthest-side at 100% 50%, rgba(10, 20, 40, .18), transparent) right center / 10px 100% no-repeat scroll; }
  .table th, .table td { vertical-align: top; }
  .table td.nowrap, .table th.nowrap { white-space: nowrap; }
  /* use the real visible height on phones (address bar / keyboard) */
  .sidenav { height: 100dvh; }
  .popover, .topnav-drop { max-height: calc(100dvh - 80px); }
  dialog.quick-item, dialog.pos-dialog { max-height: 92dvh; width: min(94vw, 620px); }
  .palette { padding: 8dvh 10px 10px; }
  .palette-box { max-height: 84dvh; overflow-y: auto; }
  /* notches and rounded corners in landscape */
  .content, .topbar, .app-foot { padding-inline-start: max(12px, env(safe-area-inset-left)); padding-inline-end: max(12px, env(safe-area-inset-right)); }
  .page-head h1 { overflow-wrap: anywhere; }
  .card-head h2 { min-width: 0; overflow-wrap: anywhere; }
  .facts dd, .facts dt { overflow-wrap: anywhere; }
  .filters .field-inline { flex: 1 1 calc(50% - 10px); }
  .filters .field-inline:first-child { flex-basis: 100%; }
  .pager { flex-wrap: wrap; gap: 10px; justify-content: space-between; }
  .pager-nav { margin-inline-start: auto; }
  .app-foot { flex-wrap: wrap; gap: 4px 12px; }
  img, svg, video, canvas { max-width: 100%; }
}
@media (max-width: 560px) {
  .nt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nt-tile { padding: 12px; }
  .kpis-top { gap: 10px; }
  .grid-4, .grid-3, .grid-2 { gap: 12px; }
  .sticky-actions { flex-wrap: wrap; }
  .sticky-actions .muted { flex-basis: 100%; }
  .sticky-actions .btn { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 339px) {
  .login-art .login-sign { white-space: normal; font-size: 10px; }
  .login-brand.login-art { min-height: 372px; }
  .nt-tiles, .kpis-top { grid-template-columns: minmax(0, 1fr); }
  .crumb-current { font-size: 14px; }
  .topbar-tools .lang-switch { display: none; }
}
/* phones turned sideways: short screens */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { height: 48px; }
  .sidenav .sn-sign { display: none; }
  dialog.quick-item, dialog.pos-dialog { max-height: 96dvh; }
  .palette { padding-top: 3dvh; }
}

/* ===== build 20: FIX - top menu / "side + top" menu made the page width grow (about 2000 px) =====
   The module row could not wrap or shrink, so with many modules it pushed the whole page wider.
   Now the modules wrap onto a second row, the shortcuts take their own row if needed, and drop-downs stay on screen. */
.shell { min-width: 0; max-width: 100%; }
.topnav { overflow-x: clip; max-width: 100%; }
@media (min-width: 901px) {
  .topnav-inner { flex-wrap: wrap; row-gap: 2px; padding-block: 2px; }
  .topnav-modules { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 0; }
  .topnav-pins { flex: 1 1 260px; }
}
.topnav-drop { max-width: min(420px, calc(100vw - 16px)); }
.topnav-drop.is-end { inset-inline-start: auto; inset-inline-end: 0; }
.topnav-link { min-width: 0; }
.pins-empty { white-space: normal; }
@media (max-width: 900px) {
  .topnav-inner { flex-wrap: nowrap; }
  .topnav-modules { flex-wrap: nowrap; }
  .topnav-drop { max-width: none; }
  .topnav-drop.is-end { inset-inline: 10px; }
}
@media (max-width: 900px) { .topnav-link { min-width: 44px; justify-content: center; } .pin { height: 36px; } .pins-edit { min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; } }

/* build 20: scrolling lists in pop-ups */
.pop-scroll::-webkit-scrollbar, .topnav-drop > ul::-webkit-scrollbar { width: 8px; }
.pop-scroll::-webkit-scrollbar-thumb, .topnav-drop > ul::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
dialog.pos-dialog { max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }

/* ------------------------------------------------------------------ Real estate 1.3.0: unit file (build 23) */
.danger-txt { color: var(--danger); }
.re-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: var(--pad) var(--pad-l) var(--pad-l); }
.re-gallery figure { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.re-gallery img { width: 100%; height: 110px; object-fit: cover; display: block; }
.re-gallery .re-pdf { height: 110px; display: grid; place-items: center; font-size: 40px; color: var(--danger); background: var(--chip); }
.re-gallery figcaption { display: flex; gap: 6px; align-items: center; padding: 6px 8px; font-size: 12px; color: var(--muted); min-width: 0; }
.re-gallery figcaption b { color: var(--text); }
.re-gallery figcaption button { margin-inline-start: auto; background: none; border: 0; cursor: pointer; padding: 2px 4px; color: var(--danger); }
.re-thumb { width: 52px; }
.re-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-sm); display: block; }
.re-cond-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.re-bars { display: flex; flex-direction: column; gap: 8px; }
.re-bars > div { display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.re-bars i { display: block; height: 10px; border-radius: 5px; background: var(--chip); position: relative; overflow: hidden; }
.re-bars i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: linear-gradient(90deg, var(--au-3, var(--accent)), var(--accent)); border-radius: 5px; }
.re-bars b { font-variant-numeric: tabular-nums; }
.re-worse td { background: var(--danger-soft); }
.re-pair { display: flex; gap: 6px; } .re-pair input { min-width: 0; }
.re-steps { display: flex; flex-wrap: wrap; gap: 0; padding: var(--pad) var(--pad-l); list-style: none; margin: 0; counter-reset: st; }
.re-steps li { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; text-align: center; position: relative; font-size: 12px; color: var(--muted); padding-top: 30px; }
.re-steps li::before { counter-increment: st; content: counter(st); position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--muted); font-weight: 600; z-index: 1; }
[dir="rtl"] .re-steps li::before { transform: translateX(50%); }
.re-steps li::after { content: ""; position: absolute; top: 11px; inset-inline-start: 50%; width: 100%; height: 2px; background: var(--line); }
.re-steps li:last-child::after { display: none; }
.re-steps li.is-done { color: var(--text); } .re-steps li.is-done::before { background: var(--ok); color: #fff; } .re-steps li.is-done::after { background: var(--ok); }
.re-steps li.is-now { color: var(--text); font-weight: 600; } .re-steps li.is-now::before { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.sign-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.sign-boxes > div { border-top: 1px solid var(--line); padding-top: 6px; min-height: 60px; font-size: 12px; color: var(--muted); margin-top: 40px; }
@media screen { .sign-boxes { display: none; } }
@media (max-width: 640px) { .re-bars > div { grid-template-columns: 1fr auto; } .re-bars i { grid-column: 1 / -1; grid-row: 2; } }
.ok-txt { color: var(--ok); }
.kpis > a { flex: 1 1 160px; padding: 12px 14px; border-radius: var(--r); background: var(--chip); display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.kpis-top > a { background: var(--card); border: 1px solid var(--line); }
.kpis > a:hover { border-color: var(--accent); text-decoration: none; }
.re-items-table { min-width: 760px; }
.re-items-table td:nth-child(2) { min-width: 170px; }
.re-items-table td:last-child { white-space: nowrap; }

/* ===== build 24: tabs are solid colours with 3D relief - no gradients (tabs only; tiles and summary strips keep their metal) =====
   Tab bars (.hr-tabs, .re-report-nav, .nt-tabs), report view / period buttons (.rk-views, .rk-presets) and segmented choices (.seg).
   Idle = solid silver, hover = solid platinum (lifts), active = the solid side menu colour; each tab stands on a darker ledge and
   presses down when clicked. Tune with --tab-idle, --tab-hover, --tab-on, --tab-ledge. */
:root {
  --tab-idle: #e4e6e9;
  --tab-idle-edge: #b9bdc3;
  --tab-hover: #eef2f7;
  --tab-hover-edge: #aab4c2;
  --tab-on: var(--ink);
  --tab-on-edge: color-mix(in srgb, var(--ink) 62%, #000);
  --tab-on-fg: var(--on-ink);
  --tab-ledge: 3px;
}
.hr-tabs, .re-report-nav, .nt-tabs, .segmented { background: var(--chip) !important; background-image: none !important; }
.hr-tabs a, .re-report-nav a, .nt-tabs a {
  background: var(--tab-idle) !important; background-image: none !important; animation: none !important;
  border: 1px solid var(--tab-idle-edge); color: var(--tab-idle-fg, var(--ag-ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(0, 0, 0, .06), 0 var(--tab-ledge) 0 var(--tab-idle-edge), 0 calc(var(--tab-ledge) + 3px) 6px -2px rgba(10, 18, 34, .28);
  margin-bottom: var(--tab-ledge); transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
.hr-tabs a:hover, .re-report-nav a:hover, .nt-tabs a:hover {
  background: var(--tab-hover) !important; color: var(--tab-hover-fg, var(--pt-ink)); border-color: var(--tab-hover-edge); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .05), 0 calc(var(--tab-ledge) + 1px) 0 var(--tab-hover-edge), 0 calc(var(--tab-ledge) + 6px) 10px -3px rgba(10, 18, 34, .32);
}
.hr-tabs a:active, .re-report-nav a:active, .nt-tabs a:active, .hr-tabs a.is-pressed, .re-report-nav a.is-pressed, .nt-tabs a.is-pressed {
  transform: translateY(var(--tab-ledge)) !important; transition-duration: .06s;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18), 0 0 0 var(--tab-idle-edge) !important;
}
.hr-tabs a.is-on, .re-report-nav a.is-on, .nt-tabs a.is-on {
  background: var(--tab-on) !important; color: var(--tab-on-fg, var(--on-ink)) !important; border-color: var(--tab-on-edge); text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tab-on-fg, var(--on-ink)) 30%, transparent), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 var(--tab-ledge) 0 var(--tab-on-edge), 0 calc(var(--tab-ledge) + 4px) 8px -2px var(--au-shadow);
}
.hr-tabs a.is-on:hover, .re-report-nav a.is-on:hover, .nt-tabs a.is-on:hover { transform: translateY(-1px); }
.hr-tabs a.is-on i, .re-report-nav a.is-on i, .nt-tabs a.is-on i, .hr-tabs a.is-on b { color: var(--tab-on-fg, var(--on-ink)) !important; }
/* report views, period presets and segmented choices: same solid 3D look, smaller ledge */
.rk-views a, .rk-presets a, .seg span { transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease; }
.rk-views a:hover, .rk-presets a:hover, .seg span:hover {
  background: var(--tab-hover) !important; background-image: none !important; color: var(--tab-hover-fg, var(--pt-ink)); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--tab-hover-edge), 0 4px 6px -2px rgba(10, 18, 34, .25);
}
.rk-views a.is-on, .rk-presets a.is-on, .seg input:checked + span {
  background: var(--tab-on) !important; background-image: none !important; color: var(--tab-on-fg, var(--on-ink)) !important; border-color: var(--tab-on-edge);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tab-on-fg, var(--on-ink)) 30%, transparent), 0 2px 0 var(--tab-on-edge), 0 4px 6px -2px var(--au-shadow) !important;
}
.rk-views a:active, .rk-presets a:active, .seg span:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2) !important; }
.rk-views a.is-on i { color: var(--tab-on-fg, var(--on-ink)) !important; }
@media (prefers-reduced-motion: reduce) { .hr-tabs a, .re-report-nav a, .nt-tabs a, .rk-views a, .rk-presets a, .seg span { transition: none !important; } }
@media print { .hr-tabs a, .re-report-nav a, .nt-tabs a { box-shadow: none !important; } }

/* ===== build 25: no gradients anywhere - solid colours with 3D relief throughout the system =====
   Dashboard tiles, section chips, icon wells, summary strips (.kpis-top), report hub tiles, chart and trend bars,
   progress bars and the income cards now use one solid colour per tier, standing on a darker ledge with a light top
   edge and a soft drop shadow; they lift on hover and press down when clicked. The tabs got the same treatment in build 24.
   Tier colours: platinum = light steel, money (blue) = the side menu colour, silver = light grey. Tune --solid-* and --ledge. */
:root {
  --solid-pt: #e6ebf2; --solid-pt-edge: #aab4c2;
  --solid-ag: #dcdee1; --solid-ag-edge: #a7abb1;
  --solid-au: var(--ink); --solid-au-edge: color-mix(in srgb, var(--ink) 60%, #000);
  --solid-active: color-mix(in srgb, var(--ink) 55%, #000); --solid-active-edge: color-mix(in srgb, var(--ink) 35%, #000);
  --ledge: 4px;
}
.nt-tier-platinum { --m-solid: var(--solid-pt); --m-edge: var(--solid-pt-edge); }
.nt-tier-gold { --m-solid: var(--solid-au); --m-edge: var(--solid-au-edge); }
.nt-tier-silver { --m-solid: var(--solid-ag); --m-edge: var(--solid-ag-edge); }

/* every metal surface: one solid colour */
.nt-metal, .nt-tile, .nt-chip, .nt-tile.nt-tier-gold { background: var(--m-solid, var(--solid-ag)) !important; background-image: none !important; background-size: auto !important; }
.nt-tile, .nt-tile.nt-tier-gold, .nt-tiles > .nt-tile { animation: nt-in .45s cubic-bezier(.2, .8, .2, 1) both !important; }
.nt-tile::before, .nt-tile::after, .nt-tile.nt-tier-gold::before, .nt-tile.nt-tier-gold::after { display: none !important; }

/* the tile: raised on a ledge */
.nt-tile {
  border: 1px solid var(--m-edge, var(--solid-ag-edge)); margin-bottom: var(--ledge);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent), inset 0 -1px 0 rgba(0, 0, 0, .08),
    0 var(--ledge) 0 var(--m-edge, var(--solid-ag-edge)), 0 calc(var(--ledge) + 6px) 12px -4px rgba(10, 18, 34, .35) !important;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, background-color .25s ease, color .25s ease !important;
}
.nt-tile.nt-tier-gold { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-ink) 28%, transparent), inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 var(--ledge) 0 var(--m-edge), 0 calc(var(--ledge) + 6px) 12px -4px var(--au-shadow, rgba(10, 18, 34, .4)) !important; }
.nt-tile:hover { transform: translateY(-3px) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 75%, transparent), inset 0 -1px 0 rgba(0, 0, 0, .08),
    0 calc(var(--ledge) + 2px) 0 var(--m-edge, var(--solid-ag-edge)), 0 calc(var(--ledge) + 12px) 18px -6px rgba(10, 18, 34, .42) !important; }
.nt-tile.is-pressed, .nt-tile:active { transform: translateY(var(--ledge)) !important; transition-duration: .06s !important;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .22), 0 0 0 var(--m-edge, var(--solid-ag-edge)) !important; }
.nt-tile:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring), 0 var(--ledge) 0 var(--m-edge, var(--solid-ag-edge)) !important; }

/* active tile: a solid deeper shade of the side menu colour */
.nt-tile.is-active, .nt-tile.nt-tier-gold.is-active { background: var(--solid-active) !important; color: var(--on-ink); border-color: var(--rail-accent, var(--solid-active-edge));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-ink) 18%, transparent), 0 var(--ledge) 0 var(--solid-active-edge), 0 0 0 2px var(--rail-accent, var(--solid-active-edge)),
    0 calc(var(--ledge) + 8px) 16px -6px rgba(0, 0, 0, .55) !important; }
.nt-tile.is-active .nt-num, .nt-tile.nt-tier-gold.is-active .nt-num { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; color: var(--on-ink) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.nt-tile.is-active .nt-label, .nt-tile.is-active .nt-amt, .nt-tile.is-active .nt-sub { color: color-mix(in srgb, var(--on-ink) 85%, transparent) !important; }

/* icon wells, chips and bars: solid */
.nt-ic, .nt-tile.nt-tier-gold .nt-ic { background: color-mix(in srgb, #fff 55%, var(--m-solid, #fff)) !important; background-image: none !important; color: var(--m-ink);
  border: 1px solid var(--m-edge, rgba(0, 0, 0, .12)); box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--m-edge, rgba(0, 0, 0, .15)) !important; }
.nt-tile.nt-tier-gold .nt-ic { background: color-mix(in srgb, var(--on-ink) 16%, var(--ink)) !important; color: var(--on-ink); border-color: color-mix(in srgb, var(--on-ink) 25%, var(--ink));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-ink) 30%, transparent), 0 2px 0 var(--solid-au-edge) !important; }
.nt-tile.is-active .nt-ic { background: var(--on-ink) !important; color: var(--ink) !important; border-color: transparent; }
.nt-chip { border: 1px solid var(--m-edge, rgba(0, 0, 0, .15)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent), 0 3px 0 var(--m-edge, rgba(0, 0, 0, .15)), 0 5px 8px -3px rgba(10, 18, 34, .3) !important; margin-bottom: 3px; }
.nt-chip.nt-tier-gold { color: var(--on-ink); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-ink) 28%, transparent), 0 3px 0 var(--solid-au-edge), 0 5px 8px -3px var(--au-shadow) !important; }
.nt-chip i, .nt-chip.nt-tier-gold i { background: color-mix(in srgb, #fff 45%, var(--m-solid, #fff)) !important; }
.nt-chip.nt-tier-gold i { background: color-mix(in srgb, var(--on-ink) 18%, var(--ink)) !important; color: var(--on-ink); }
.nt-num { text-shadow: none; }
.nt-tile.nt-tier-gold .nt-num, .nt-tile.nt-tier-gold .nt-label, .nt-tile.nt-tier-gold .nt-amt, .nt-tile.nt-tier-gold .nt-sub { color: var(--on-ink); }
.nt-tile.is-warn .nt-num { color: #9b1c1c; } .nt-tile.nt-tier-gold.is-warn .nt-num { color: #ffb4b4; }
.nt-bar > span, .nt-tile.nt-tier-gold .nt-bar > span, .nt-tile.is-active .nt-bar > span { background: var(--m-ink) !important; background-image: none !important; }
.nt-tile.nt-tier-gold .nt-bar > span, .nt-tile.is-active .nt-bar > span { background: var(--on-ink) !important; }

/* summary strips on every page */
.kpis-top > div, .kpis-top > a, .kpis-top > :first-child, .kpis-top > [data-tier="silver"] {
  background: var(--solid-ag) !important; background-image: none !important; color: var(--ag-ink); border: 1px solid var(--solid-ag-edge) !important; margin-bottom: var(--ledge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 var(--ledge) 0 var(--solid-ag-edge), 0 calc(var(--ledge) + 5px) 10px -4px rgba(10, 18, 34, .3) !important; }
.kpis-top > :first-child, .kpis-top > [data-tier="platinum"] { background: var(--solid-pt) !important; color: var(--pt-ink); border-color: var(--solid-pt-edge) !important;
  box-shadow: inset 0 1px 0 #fff, 0 var(--ledge) 0 var(--solid-pt-edge), 0 calc(var(--ledge) + 5px) 10px -4px rgba(10, 18, 34, .3) !important; }
.kpis-top > [data-tier="gold"] { background: var(--solid-au) !important; color: var(--on-ink); border-color: var(--solid-au-edge) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-ink) 28%, transparent), 0 var(--ledge) 0 var(--solid-au-edge), 0 calc(var(--ledge) + 5px) 10px -4px var(--au-shadow) !important; }
.kpis-top > a:hover { transform: translateY(-2px); }
.kpis-top > a:active { transform: translateY(var(--ledge)); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .2) !important; }

/* tab bar and segmented containers */
.hr-tabs, .re-report-nav, .nt-tabs, .segmented { background: var(--chip) !important; }

/* report charts and dashboard trend bars: solid bars with a small 3D edge */
.rk-chart-fill, .nt-trend-bar { background: var(--solid-au) !important; background-image: none !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-ink) 30%, transparent), inset -3px 0 0 var(--solid-au-edge) !important; }
.rk-chart-row:nth-child(n+4) .rk-chart-fill, .nt-trend-col.is-alt .nt-trend-bar { background: var(--solid-pt-edge) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset -3px 0 0 color-mix(in srgb, var(--solid-pt-edge) 70%, #000) !important; }
.rk-chart-row:nth-child(n+9) .rk-chart-fill { background: var(--solid-ag-edge) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset -3px 0 0 color-mix(in srgb, var(--solid-ag-edge) 70%, #000) !important; }
.nt-trend-bar { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-ink) 30%, transparent), inset 0 -3px 0 var(--solid-au-edge) !important; }

/* real estate: income cards, cost bars */
.re-inc { background: var(--c2) !important; border: 1px solid color-mix(in srgb, var(--c2) 65%, #000); margin-bottom: var(--ledge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 var(--ledge) 0 color-mix(in srgb, var(--c2) 60%, #000), 0 calc(var(--ledge) + 5px) 10px -4px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.re-inc:hover { transform: translateY(-2px); }
.re-inc:active { transform: translateY(var(--ledge)); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25); }
.re-bars i::after { background: var(--solid-au) !important; }
.tier-active { background: var(--solid-active); }
@media (prefers-reduced-motion: reduce) { .nt-tile, .kpis-top > a, .re-inc { transition: none !important; animation: none !important; } }
@media print { .nt-tile, .kpis-top > div, .kpis-top > a, .nt-chip, .re-inc { box-shadow: none !important; margin-bottom: 0; } }
.dash-hero { background: var(--ink) !important; border: 1px solid color-mix(in srgb, var(--ink) 60%, #000);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-ink) 20%, transparent), 0 var(--ledge) 0 color-mix(in srgb, var(--ink) 55%, #000), 0 18px 30px -22px rgba(10, 20, 40, .6) !important; margin-bottom: calc(18px + var(--ledge)); }

/* ===== Hotel management 1.0.0 (build 29) - BY NEPTUNE UAE ===== */
.htl-bdate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--line-2); }
.htl-bdate.is-late { background: var(--warn-soft); color: var(--warn); }
.htl-bdate .btn { margin-inline-start: auto; }
.htl-switch select { min-width: 140px; }
.htl-plan-wrap { overflow-x: auto; }
.htl-plan { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.htl-plan th, .htl-plan td { padding: 4px 6px; text-align: center; white-space: nowrap; min-width: 46px; border-inline-end: 1px solid var(--line-2); }
.htl-plan .htl-plan-room { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--card); text-align: start; min-width: 150px; white-space: normal; }
.htl-plan thead th { position: sticky; top: 0; z-index: 1; background: var(--card); }
.htl-plan thead .htl-plan-room { z-index: 3; }
.htl-plan .is-today { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.htl-plan .is-weekend { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.htl-plan .htl-total > * { background: var(--chip); font-weight: 600; }
.htl-bar { border-radius: 6px; padding: 3px 6px !important; text-align: start !important; overflow: hidden; text-overflow: ellipsis; max-width: 1px; }
.htl-legend .htl-bar, .htl-legend .htl-ooo { display: inline-block; max-width: none; padding: 2px 8px; margin-inline-end: 6px; border-radius: 6px; font-size: 12px; }
.htl-bar a { color: inherit; font-weight: 600; text-decoration: none; }
.htl-st-confirmed { background: var(--info-soft); color: var(--info); }
.htl-st-tentative, .htl-st-waitlist, .htl-st-enquiry { background: var(--warn-soft); color: var(--warn); }
.htl-st-in_house { background: var(--ok-soft); color: var(--ok); }
.htl-st-checked_out { background: var(--chip); color: var(--muted); }
.htl-ooo { background: repeating-linear-gradient(45deg, var(--danger-soft), var(--danger-soft) 4px, transparent 4px, transparent 8px); color: var(--danger); }
.htl-free { position: relative; }
.htl-add { display: block; color: var(--muted); text-decoration: none; opacity: 0; }
.htl-free:hover .htl-add, .htl-add:focus { opacity: 1; color: var(--accent); }
.htl-avail td.num, .htl-avail td { font-variant-numeric: tabular-nums; }
.htl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.htl-dot.htl-hk-clean { background: var(--info); } .htl-dot.htl-hk-dirty { background: var(--danger); } .htl-dot.htl-hk-inspected { background: var(--ok); } .htl-dot.htl-hk-pickup { background: var(--warn); }
.htl-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin: 14px 0; }
.htl-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); border-inline-start: 5px solid var(--muted); cursor: pointer; }
.htl-tile input[type=checkbox] { position: absolute; top: 8px; inset-inline-end: 8px; }
.htl-tile-no { font-size: 18px; font-weight: 700; color: var(--text); text-decoration: none; }
.htl-tile-st { font-size: 12px; font-weight: 600; }
.htl-tile-fo { font-size: 12px; color: var(--muted); }
.htl-tile.htl-hk-clean { border-inline-start-color: var(--info); } .htl-tile.htl-hk-clean .htl-tile-st { color: var(--info); }
.htl-tile.htl-hk-dirty { border-inline-start-color: var(--danger); } .htl-tile.htl-hk-dirty .htl-tile-st { color: var(--danger); }
.htl-tile.htl-hk-inspected { border-inline-start-color: var(--ok); } .htl-tile.htl-hk-inspected .htl-tile-st { color: var(--ok); }
.htl-tile.htl-hk-pickup { border-inline-start-color: var(--warn); } .htl-tile.htl-hk-pickup .htl-tile-st { color: var(--warn); }
.htl-tile.is-ooo { background: repeating-linear-gradient(45deg, var(--danger-soft), var(--danger-soft) 6px, var(--card) 6px, var(--card) 12px); }
.htl-sheet { break-inside: avoid; page-break-inside: avoid; }
.htl-outlets { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.htl-outlet h3 { margin: 0 0 6px; font-size: 15px; }
.htl-roster .htl-cell { min-width: 92px; padding: 3px 4px; font-size: 12px; }
.htl-leave { background: var(--warn-soft); }
@media print { .htl-sheet { page-break-after: always; } .htl-plan .htl-plan-room, .htl-plan thead th { position: static; } .htl-add { display: none; } }
@media (max-width: 640px) { .htl-board { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .htl-bdate .btn { margin-inline-start: 0; } }
/* Hotel management 1.1.0: getting started steps and process map - BY NEPTUNE UAE */
.span-4 { grid-column: 1 / -1; }
.htl-steps { margin-bottom: 16px; }
.htl-steps-bar { height: 6px; margin: 0 16px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.htl-steps-bar span { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.htl-step-list { list-style: none; margin: 0; padding: 8px 16px 14px; display: grid; gap: 4px; }
.htl-step-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: var(--r); }
.htl-step-list li p { margin: 2px 0; font-size: 13px; }
.htl-step-list li a b { color: var(--text); }
.htl-step-list li.is-next { background: color-mix(in srgb, var(--accent) 8%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.htl-step-list li.is-done { opacity: .7; }
.htl-step-no { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--chip); color: var(--muted); }
.htl-step-list li.is-next .htl-step-no { background: var(--accent); color: #fff; }
.htl-step-list li.is-done .htl-step-no { background: var(--ok-soft); color: var(--ok); }
.htl-flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.htl-flow-step { position: relative; padding: 14px 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--tile, var(--accent)); }
.htl-flow-step h3 { margin: 0 0 4px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.htl-flow-step h3 i { color: var(--tile, var(--accent)); }
.htl-flow-step ul { margin: 8px 0 0; padding-inline-start: 18px; font-size: 13px; }
.htl-flow-step li { margin: 3px 0; }
.htl-flow-no { position: absolute; top: 10px; inset-inline-end: 12px; font-size: 12px; color: var(--muted); font-weight: 700; }
@media (max-width: 640px) { .htl-step-list li { grid-template-columns: 30px minmax(0, 1fr); } .htl-step-list li > .btn { grid-column: 2; justify-self: start; } }

/* ===== Build 33: standard setup wizard (setup kit) and data import (import kit) - BY NEPTUNE UAE ===== */
.su-card { margin-bottom: 16px; }
.su-bar { height: 6px; margin: 0 16px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.su-bar span { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width .4s ease; }
.su-list { list-style: none; margin: 0; padding: 8px 16px 14px; display: grid; gap: 4px; }
.su-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: var(--r); }
.su-list li p { margin: 2px 0; font-size: 13px; }
.su-list li a b { color: var(--text); }
.su-list li.is-next { background: color-mix(in srgb, var(--accent) 8%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.su-list li.is-done { opacity: .72; }
.su-no { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--chip); color: var(--muted); }
.su-list li.is-next .su-no { background: var(--accent); color: #fff; }
.su-list li.is-done .su-no { background: var(--ok-soft); color: var(--ok); }
.su-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.su-overview { margin-bottom: 16px; }
.su-overview-head h2 { margin: 0 0 4px; }
.su-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.su-app { position: relative; display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; border-top: 4px solid var(--tile); }
.su-app > i { color: var(--tile); font-size: 18px; }
.su-app small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.su-app.is-on { outline: 2px solid var(--tile); }
.su-app.is-ready { background: color-mix(in srgb, var(--ok) 5%, var(--card)); }
.su-app-no { position: absolute; top: 8px; inset-inline-end: 10px; font-size: 11px; font-weight: 700; color: var(--muted); }
.su-app-bar { height: 4px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.su-app-bar span { display: block; height: 100%; background: var(--tile); }
.su-import-order { columns: 3 220px; margin: 8px 0 0; padding-inline-start: 22px; }
.su-import-order li { margin: 4px 0; break-inside: avoid; }
.su-howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: su; }
.su-howto li { counter-increment: su; display: grid; gap: 4px; padding-inline-start: 40px; position: relative; }
.su-howto li::before { content: counter(su); position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.su-howto span { color: var(--muted); font-size: 13px; }
.su-steps { list-style: none; display: flex; gap: 8px; margin: 0 0 16px; padding: 0; flex-wrap: wrap; }
.su-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--chip); color: var(--muted); font-weight: 600; font-size: 13px; }
.su-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--card); }
.su-steps li.is-on { background: var(--accent); color: #fff; }
.su-steps li.is-on span { color: var(--accent); }
.su-steps li.is-done { color: var(--ok); background: var(--ok-soft); }
.su-tips { margin: 8px 0; padding-inline-start: 18px; font-size: 13px; }
.su-tips li { margin: 4px 0; }
tr.is-warn td { background: var(--warn-soft); }
@media (max-width: 640px) { .su-list li { grid-template-columns: 30px minmax(0, 1fr); } .su-acts { grid-column: 2; justify-content: flex-start; } }

/* ===== Build 38: four-panel dashboard charts (revenue, invoices, purchases, income and expenses) - BY NEPTUNE UAE ===== */
.dash-panels { --c1: var(--accent-deep); --c2: #2FA7A0; --c3: #8B3A7F; --c4: color-mix(in srgb, var(--accent) 42%, var(--card)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dpn { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.dpn .card-head h2 { font-size: 15px; }
.dpn .dash-legend { flex-wrap: wrap; justify-content: flex-end; gap: 6px; font-size: 12px; }
.dpn .lg { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-inline-start: 6px; }
.dpn .lg1 { background: var(--c1); } .dpn .lg2 { background: var(--c2); } .dpn .lg3 { background: var(--c3); } .dpn .lg4 { background: var(--c4); }
.dpn .lg-line.lg3 { height: 3px; width: 14px; border-radius: 2px; }
.dpn-sub { font-size: 12.5px; }
.dpn-body { padding: 10px 14px 2px; }
.dpn-chart { width: 100%; height: auto; max-height: 190px; display: block; }
[dir="rtl"] .dpn-chart { direction: ltr; }
.dpn-chart .grid { stroke: var(--line-2); stroke-width: 1; }
.dpn-chart .ax { font-size: 11px; fill: var(--muted); }
.dpn-chart .b1 { fill: var(--c1); } .dpn-chart .b2 { fill: var(--c2); } .dpn-chart .b3 { fill: var(--c3); } .dpn-chart .b4 { fill: var(--c4); }
.dpn-chart rect:hover { opacity: .8; }
.dpn-chart .ln { fill: none; stroke: var(--c3); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dpn-chart .dt { fill: var(--card); stroke: var(--c3); stroke-width: 2; }
.dpn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px 18px 14px; margin-top: auto; border-top: 1px solid var(--line-2); }
.dpn-stats div { display: flex; flex-direction: column; min-width: 0; padding-top: 10px; }
.dpn-stats small { font-size: 12px; }
.dpn-stats b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpn-stats b.neg { color: #DC2626; }
.dpn-gauges { display: flex; justify-content: space-around; gap: 10px; padding: 16px 14px 6px; }
.dpn-gauge { display: grid; justify-items: center; gap: 4px; text-align: center; }
.dpn-gauge svg { width: 84px; height: 84px; }
.dpn-gauge .g-bg { fill: none; stroke: var(--line-2); stroke-width: 9; }
.dpn-gauge .g-fg { fill: none; stroke-width: 9; stroke-linecap: round; }
.dpn-gauge .g1 { stroke: var(--c1); } .dpn-gauge .g2 { stroke: var(--c2); } .dpn-gauge .g3 { stroke: var(--c3); }
.dpn-gauge text { font-size: 17px; font-weight: 600; fill: var(--text); }
.dpn-gauge small { font-size: 12px; color: var(--muted); }
.dpn-rows { display: grid; gap: 9px; padding: 10px 18px 16px; margin-top: auto; }
.dpn-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 54px; align-items: center; gap: 10px; font-size: 13px; }
.dpn-row .track { display: block; height: 9px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.dpn-row .fill { display: block; height: 100%; border-radius: 6px; }
.dpn-row .fill.b1 { background: var(--c1); } .dpn-row .fill.b2 { background: var(--c2); } .dpn-row .fill.b3 { background: var(--c3); } .dpn-row .fill.b4 { background: var(--c4); }
.dpn-row b { text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .dash-panels { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .dpn-stats { grid-template-columns: 1fr 1fr; } .dpn-row { grid-template-columns: 90px minmax(0, 1fr) 48px; } }

/* ===== Build 40: menu transparency slider (0 to 5%) (Appearance) - BY NEPTUNE UAE ===== */
.range-pair { display: flex; align-items: center; gap: 14px; }
.range-pair input[type="range"] { flex: 1; accent-color: var(--accent); height: 28px; cursor: pointer; }
.range-pair output { min-width: 44px; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.range-field { margin-top: 6px; }

/* ===== Build 41: BI horizontal bars, legend, gauge and ready-made dashboards ===== */
.bi-hbars { display: grid; gap: 9px; padding: 4px 2px; }
.bi-hrow { display: grid; grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.bi-hrow em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-hrow .track { display: block; height: 10px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.bi-hrow .fill { display: block; height: 100%; border-radius: 6px; background: var(--accent-deep); }
.bi-hrow .fill.neg { background: #DC2626; }
.bi-hrow b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bi-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.bi-legend li { display: flex; align-items: center; gap: 6px; }
.bi-legend span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bi-chart .line { fill: none; stroke: var(--accent-deep); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.bi-chart .dot { fill: var(--card); stroke-width: 2; }
.bi-gauge { display: flex; justify-content: center; padding: 2px 0; }
.bi-gauge svg { width: 132px; height: 132px; }
.bi-gauge .g-bg { fill: none; stroke: var(--line-2); stroke-width: 11; }
.bi-gauge .g-fg { fill: none; stroke: var(--accent-deep); stroke-width: 11; stroke-linecap: round; }
.bi-gauge text { font-size: 21px; font-weight: 600; fill: var(--text); }
.bi-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 4px 4px 6px; }
.bi-tpl { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.bi-tpl small { flex: 1; font-size: 12.5px; line-height: 1.45; }
.bi-tpl .btn { align-self: flex-start; margin-top: 4px; }

/* ===== Build 42: drag handle, drag state and chart links ===== */
.drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 28px; margin-inline-end: 6px; border-radius: 8px; color: var(--faint, var(--muted)); cursor: grab; touch-action: none; user-select: none; vertical-align: middle; opacity: .55; transition: opacity .15s, background .15s, color .15s; }
.drag-handle:hover, .drag-handle:focus-visible { opacity: 1; background: var(--line-2); color: var(--text); outline: none; }
.drag-handle:active { cursor: grabbing; }
.is-sorting { opacity: .6; outline: 2px dashed var(--accent); outline-offset: 3px; transform: scale(.995); }
.is-sorting-box { user-select: none; cursor: grabbing; }
.bi-w .card-head h2 a, .dpn .card-head h2 a { color: inherit; text-decoration: none; }
.bi-w .card-head h2 a:hover, .dpn .card-head h2 a:hover { color: var(--accent-deep); text-decoration: underline; }
.bi-open, .dpn-open { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); font-size: 13px; text-decoration: none; }
.bi-open:hover, .dpn-open:hover { background: var(--line-2); color: var(--accent-deep); text-decoration: none; }
.dash-kpi .drag-handle { position: absolute; inset-inline-end: 8px; top: 8px; z-index: 2; margin: 0; opacity: 0; }
.dash-kpi:hover .drag-handle, .dash-kpi .drag-handle:focus-visible { opacity: .8; }
@media (hover: none) { .dash-kpi .drag-handle { opacity: .5; } }

/* ===== Build 43: change, add and remove home page charts ===== */
.dpn-edit { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer; vertical-align: middle; }
.dpn-edit:hover, .dpn-edit:focus-visible { background: var(--line-2); color: var(--accent-deep); outline: none; }
.dpn-bi-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dpn-bi .bi-kpi b { font-size: 34px; }
.dpn-add { margin: 12px 0 0; }
.panel-dialog { width: min(520px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: 20px 22px; background: var(--card); color: var(--text); box-shadow: 0 30px 70px -30px rgba(10, 20, 40, .55); }
.panel-dialog::backdrop { background: rgba(10, 16, 28, .45); }
.panel-dialog h3 { margin: 0 0 4px; font-size: 17px; }
.panel-dialog .form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.panel-dialog select { width: 100%; }

/* ===== Build 44: swappable key-figure cards ===== */
.dash-kpi .dpn-edit { position: absolute; inset-inline-end: 36px; top: 8px; z-index: 2; opacity: 0; }
.dash-kpi:hover .dpn-edit, .dash-kpi .dpn-edit:focus-visible { opacity: .85; }
@media (hover: none) { .dash-kpi .dpn-edit { opacity: .55; } }
.dash-kpi-bi .dash-kpi-bibody { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dash-kpi-bi .bi-kpi b { font-size: 26px; }
.dash-kpi-bi .bi-gauge svg { width: 78px; height: 78px; }
.dash-kpi-bi .bi-gauge text { font-size: 19px; }
.dash-kpi-add { align-items: center; justify-content: center; flex-direction: row; gap: 8px; border-style: dashed; color: var(--muted); font: inherit; cursor: pointer; background: transparent; }
.dash-kpi-add:hover { color: var(--accent-deep); border-color: var(--accent); }
.dash-kpi-add::before { display: none; }

/* ===== Build 45: remove buttons ===== */
.dpn-remove { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; vertical-align: middle; }
.dpn-remove:hover, .dpn-remove:focus-visible { background: color-mix(in srgb, #DC2626 14%, transparent); color: #DC2626; outline: none; }
.dash-kpi .dpn-remove { position: absolute; inset-inline-end: 62px; top: 8px; z-index: 2; opacity: 0; }
.dash-kpi:hover .dpn-remove, .dash-kpi .dpn-remove:focus-visible { opacity: .85; }
@media (hover: none) { .dash-kpi .dpn-remove { opacity: .55; } }
.dpn-restore { margin: 10px 0 0; }
.dash-kpis + .dpn-restore { margin: -6px 0 16px; }

/* ---------- Medical laboratory (v3.0.0 build 46) BY NEPTUNE UAE ---------- */
.lab-tube { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lab-tube i { width: 10px; height: 18px; border-radius: 3px 3px 5px 5px; background: linear-gradient(var(--cap) 0 38%, #e5e7eb 38% 100%); border: 1px solid rgba(0,0,0,.2); flex: none; }
.lab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--chip, var(--accent)); background: color-mix(in srgb, var(--chip, var(--accent)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--chip, var(--accent)) 30%, transparent); }
.lab-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--chip, var(--accent)); vertical-align: middle; }
.lab-row-crit td { background: var(--danger-soft); }
.lab-row-warn td { background: var(--warn-soft); }
.lab-row-first td { border-top: 2px solid var(--line); }
.lab-results .lab-res-input { width: 110px; font-weight: 600; }
.lab-results select, .lab-results textarea { max-width: 220px; }
.lab-val b { font-size: 15px; }
.lab-flag-H, .lab-flag-L, .lab-flag-A { color: var(--warn); font-weight: 700; }
.lab-flag-HH, .lab-flag-LL { color: var(--danger); font-weight: 700; }
.lab-abn td:nth-child(2) b, .lab-abn td:nth-child(5) b { color: var(--danger); }
.lab-scan .lab-scan-in { font-size: 20px; padding: 10px 14px; letter-spacing: .04em; }
.lab-route { padding: 16px; }
.lab-route-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.lab-route-code { font-size: 22px; font-weight: 700; }
.lab-bins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lab-bin { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r); border: 2px solid var(--chip); background: color-mix(in srgb, var(--chip) 8%, var(--card)); }
.lab-bin b { font-size: 26px; color: var(--chip); line-height: 1.1; }
.lab-bin small { color: var(--muted); }
.lab-picked { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: var(--r); background: var(--ok-soft); color: var(--ok); margin-top: 8px; }
.lab-billto { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lab-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lab-dept { border: 1px solid var(--line); border-top: 3px solid var(--chip); border-radius: var(--r); padding: 8px 12px 10px; margin: 0; }
.lab-dept legend { font-weight: 700; font-size: 13px; color: var(--chip); padding: 0 6px; }
.lab-test { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13px; cursor: pointer; }
.lab-test input { accent-color: var(--accent); }
.lab-panel-row td { font-weight: 600; background: var(--accent-soft); }
.lab-in-panel td:first-child, .lab-in-panel td:nth-child(2) { padding-inline-start: 26px; }
.lab-cumul td, .lab-cumul th { white-space: nowrap; }
.lab-idcheck .form-card-head h2 { font-size: 20px; }
.lab-draw td:first-child { font-weight: 700; }
.lab-hl7 { max-height: 360px; overflow: auto; font-size: 12px; background: var(--bg, #f8fafc); padding: 10px; border-radius: var(--r); white-space: pre-wrap; word-break: break-all; }
.lab-crit-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lab-crit-form input:not([type=checkbox]), .lab-crit-form select { max-width: 170px; }
.lab-micro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 12px; }
.lab-micro-grid fieldset { margin: 0; }
.lab-lj { width: 100%; height: auto; font-size: 11px; }
.lab-lj text { fill: var(--muted); }
.lab-lj line { stroke-width: 1; }
.lab-lj-m { stroke: var(--ok); stroke-width: 1.5 !important; }
.lab-lj-s1 { stroke: var(--line); stroke-dasharray: 3 3; }
.lab-lj-s2 { stroke: var(--warn); stroke-dasharray: 5 3; }
.lab-lj-s3 { stroke: var(--danger); }
.lab-lj-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.lab-lj-pt { fill: var(--accent); stroke: var(--card); stroke-width: 1.5; }
.lab-lj-pt.is-warn { fill: var(--warn); }
.lab-lj-pt.is-reject { fill: var(--danger); }
.lab-lj-pt.is-excl { fill: var(--faint, #aaa); }
.lab-report-head { border-bottom: 1px solid var(--line); }
.lab-report-dept { margin: 18px var(--pad-l, 20px) 6px; padding: 4px 10px; font-size: 14px; border-inline-start: 4px solid var(--chip); background: color-mix(in srgb, var(--chip) 8%, transparent); }
.lab-report-table { margin: 0 var(--pad-l, 20px); width: calc(100% - 2 * var(--pad-l, 20px)); }
.lab-report-panel td { background: var(--accent-soft); }
.lab-report-cmt td { font-size: 13px; color: var(--muted); border-top: 0; }
.lab-report-text { white-space: pre-wrap; font-weight: 400; font-size: 13px; }
.lab-ast { margin-top: 6px; max-width: 520px; }
.lab-signers { display: flex; flex-wrap: wrap; gap: 30px; margin: 16px 0 8px; }
.lab-signers > div { min-width: 180px; padding-top: 26px; border-top: 1px solid var(--text); }
.lab-std li { margin: 4px 0; }
@media print {
  .lab-row-crit td, .lab-row-warn td { background: none !important; }
  .lab-report-table { width: 100%; margin: 0; }
  .lab-report-dept { margin: 12px 0 4px; }
  .lab-tube i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 720px) {
  .lab-results .lab-res-input { width: 80px; }
  .lab-signers { gap: 16px; }
}

/* ===================================================================== Medical center (build 48) BY NEPTUNE UAE */
.clc-banner { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 10px 14px; margin: 0 0 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); }
.clc-banner-main strong { font-size: 16px; }
.clc-allergy { color: var(--danger); font-weight: 600; }
.clc-qno { display: inline-block; min-width: 3.2em; padding: 2px 6px; border-radius: var(--r-sm, 6px); background: var(--accent-soft); color: var(--accent-deep, var(--accent)); text-align: center; letter-spacing: .5px; }
.clc-find-list { list-style: none; margin: 4px 0 0; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.clc-find-list li + li { border-top: 1px solid var(--line); }
.clc-find-list button { display: block; width: 100%; padding: 8px 12px; text-align: start; background: none; border: 0; cursor: pointer; color: var(--text); }
.clc-find-list button:hover, .clc-find-list button:focus { background: var(--accent-soft); }
.clc-slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.clc-slot { padding: 5px 10px; border-radius: var(--r-sm, 6px); border: 1px solid var(--line); background: var(--card); color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer; }
.clc-slot.is-free { border-color: var(--ok); color: var(--ok); }
.clc-slot.is-taken { color: var(--muted); text-decoration: line-through; }
.clc-slot.is-blocked { color: var(--faint, #aaa); background: repeating-linear-gradient(45deg, transparent 0 6px, var(--line) 6px 7px); }
.clc-slot.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-ink, #fff); text-decoration: none; }
.clc-cal-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.clc-cal-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; background: var(--accent); }
.clc-cal { display: grid; grid-template-columns: repeat(var(--cols), minmax(170px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.clc-cal-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.clc-cal-col.is-today { border-color: var(--accent); }
.clc-cal-col header { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--line); border-top: 4px solid var(--chip, var(--accent)); position: sticky; top: 0; background: var(--card); }
.clc-cal-slot { display: flex; gap: 6px; align-items: flex-start; padding: 4px 8px; min-height: 30px; border-bottom: 1px dashed var(--line); font-size: 13px; }
.clc-cal-slot.is-past { opacity: .6; }
.clc-cal-slot.is-blocked { background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--line) 60%, transparent) 6px 7px); }
.clc-cal-slot.is-extra { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.clc-cal-time { flex: 0 0 3em; color: var(--muted); font-variant-numeric: tabular-nums; }
.clc-cal-appt { flex: 1; display: block; padding: 2px 6px; border-radius: var(--r-sm, 6px); color: var(--text); text-decoration: none; border-inline-start: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.clc-cal-appt + .clc-cal-appt { margin-top: 3px; }
.clc-cal-free { color: var(--muted); text-decoration: none; font-size: 12px; opacity: 0; }
.clc-cal-slot:hover .clc-cal-free, .clc-cal-free:focus { opacity: 1; }
.is-booked.clc-cal-appt, .clc-cal-key.is-booked { --accent: #2563EB; }
.is-confirmed.clc-cal-appt, .clc-cal-key.is-confirmed { --accent: #7C3AED; }
.is-arrived.clc-cal-appt, .clc-cal-key.is-arrived { --accent: #D97706; }
.is-completed.clc-cal-appt, .clc-cal-key.is-completed { --accent: #15803D; }
.is-no_show.clc-cal-appt, .clc-cal-key.is-no_show { --accent: #DC2626; }
.is-cancelled.clc-cal-appt, .clc-cal-key.is-cancelled { --accent: #94A3B8; }
.clc-cal-key.is-booked, .clc-cal-key.is-confirmed, .clc-cal-key.is-arrived, .clc-cal-key.is-completed, .clc-cal-key.is-no_show, .clc-cal-key.is-cancelled { background: var(--accent); }
.clc-consult { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.clc-consult-main > .card + .card { margin-top: 14px; }
.clc-consult-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.clc-consult-side h3 { margin: 0 0 8px; font-size: 14px; }
.clc-consult-side p { margin: 4px 0; }
.clc-doc .lab-signers { margin-top: 30px; }
.clc-cert-body { font-size: 15px; line-height: 1.7; }
.clc-cert-text { white-space: pre-wrap; margin: 12px 0; }
.clc-rx-table td { vertical-align: top; }
body.clc-tv { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #0B1F2A; color: #E6F4F1; font-family: inherit; }
.clc-tv-head, .clc-tv-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; font-size: 26px; background: #0F766E; }
.clc-tv-foot { font-size: 13px; background: transparent; color: #8FB5AE; justify-content: center; }
.clc-tv-foot a { color: inherit; }
.clc-tv-main { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; padding: 24px 28px; }
.clc-tv-main h2 { margin: 0 0 14px; font-size: 22px; color: #8FB5AE; text-transform: uppercase; letter-spacing: 1px; }
.clc-tv-call { display: flex; align-items: center; gap: 22px; padding: 14px 18px; margin-bottom: 12px; border-radius: 14px; background: #12303D; }
.clc-tv-call b { font-size: 56px; min-width: 3.2em; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.clc-tv-call span { font-size: 24px; }
.clc-tv-call.is-new { background: #0F766E; animation: clc-pulse 2s ease-in-out 3; }
.clc-tv-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; margin-bottom: 8px; border-radius: 10px; background: #12303D; font-size: 22px; }
.clc-tv-row b { letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.clc-tv-empty { font-size: 24px; color: #8FB5AE; }
@keyframes clc-pulse { 50% { transform: scale(1.03); } }
@media (max-width: 980px) {
  .clc-consult { grid-template-columns: 1fr; }
  .clc-consult-side { position: static; }
  .clc-tv-main { grid-template-columns: 1fr; }
}
@media print {
  .clc-banner { border: 0; padding: 0; }
  .clc-cal-free { display: none; }
}

/* Multi-choice list filter (build 55): pick a vendor's places one by one, or several at once */
.filters .multi-pick { min-width: 190px; max-width: 280px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: inherit; font: inherit; }
.filters .multi-pick option { padding: 2px 6px; border-radius: 4px; }
.filters .multi-pick option:checked { background: var(--accent-soft, var(--chip)); font-weight: 600; }

/* Logistics dashboard (build 55): period switch and the share bars on the ranked lists */
.lg-periods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.lg-periods a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; background: var(--card); }
.lg-periods a:hover { color: var(--text); border-color: var(--accent); }
.lg-periods a.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lg-share { display: block; height: 5px; margin-top: 5px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.lg-share > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); opacity: .75; }

/* =====================================================================
   Wide tables and small screens (build 56)
   A report with twenty columns does not fit any screen, so it is read sideways: the wrapper
   scrolls on its own, the first column stays in place, the edges fade to show there is more,
   and the printed copy is laid out to fit the paper instead of running off it.
   BY NEPTUNE UAE
   ===================================================================== */
.shell, .content, .card, .table-card, section, main { min-width: 0; }
.table-wrap {
  overflow-x: auto; overflow-y: hidden; max-width: 100%;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: var(--chip); border-radius: 999px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--chip); }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* the fade at each edge appears only while there is something past it */
.table-wide {
  background-image:
    linear-gradient(to right, var(--card) 30%, rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--card) 30%, rgba(0, 0, 0, 0)),
    linear-gradient(to right, rgba(15, 23, 42, .14), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(15, 23, 42, .14), rgba(0, 0, 0, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table-wide::after {
  content: attr(data-hint); display: none;
}
/* first column stays put while the rest scrolls under it */
.table-sticky-1 th:first-child, .table-sticky-1 td:first-child {
  position: sticky; inset-inline-start: 0; z-index: 2;
  background: var(--card); box-shadow: 1px 0 0 var(--line-2);
}
.table-sticky-1 thead th:first-child { background: var(--chip); z-index: 3; }
.table-sticky-1 tbody tr:hover td:first-child { background: var(--hover); }
.table-sticky-1 tfoot td:first-child, .table-sticky-1 tr.is-total td:first-child { background: var(--chip); }
.table-compact th, .table-compact td { padding: var(--pad-s) var(--pad); }
/* one line per load: a wide report is read by scrolling sideways, not by letting every cell wrap into four lines */
.table-sticky-1 td { white-space: nowrap; }
.table-sticky-1 td.wrap, .table-sticky-1 td .col-details { white-space: normal; }

/* the A4 preview on screen gets the same treatment as paper */
.print-mode .table-sticky-1 th:first-child, .print-mode .table-sticky-1 td:first-child { position: static; box-shadow: none; background: transparent; }
.print-mode .table-wide { background-image: none; }
.print-mode .table-compact { table-layout: auto; width: 100%; max-width: 100%; font-size: 8.2pt; }
.print-mode .table-compact th, .print-mode .table-compact td { white-space: normal !important; overflow-wrap: break-word; padding: 2px 4px; vertical-align: top; }
.print-mode .table-compact th.num, .print-mode .table-compact td.num, .print-mode .table-compact .mono-num, .print-mode .table-compact td.nowrap { overflow-wrap: normal; word-break: keep-all; }
.print-mode .table-compact .col-extra { display: none !important; }
.print-mode .print-only-note { display: block; font-size: 8.4pt; color: var(--muted); margin: 4px 0 0; }
.print-mode .table-wide { overflow: visible; }
.print-mode .table-compact .th-sort i { display: none; }

/* ---- phones and small tablets: what build 20's pass did not cover ---- */
@media (max-width: 900px) {
  .table-compact { font-size: 13px; }
  .filters .multi-pick { max-width: none; width: 100%; min-width: 0; }
  .form-actions { flex-wrap: wrap; }
  .form-actions > .btn, .form-actions > a.btn, .form-actions > button { flex: 1 1 auto; justify-content: center; }
  .lg-periods a { padding: 6px 11px; font-size: 12.5px; }
  .lg-periods { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lg-periods a { flex: none; white-space: nowrap; }
  .table-sideways { padding: var(--pad-s) var(--pad); }
}
@media (max-width: 560px) {
  /* a frozen column on a 360 px screen leaves no room for the rest: let the whole row scroll */
  .table-sticky-1 th:first-child, .table-sticky-1 td:first-child { position: static; box-shadow: none; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  textarea, input, select { max-width: 100%; }
}

/* ---- on paper: fit the page instead of running off it ---- */
@media print {
  .table-wrap { overflow: visible !important; max-width: none; background-image: none; }
  .table-sticky-1 th:first-child, .table-sticky-1 td:first-child { position: static; box-shadow: none; background: transparent; }
  /* a wide report is laid out to the width of the sheet: the columns past the twelfth are left off
     (the CSV carries them), names and places break where they must, and a figure never does */
  .table-compact { table-layout: auto; width: 100%; max-width: 100%; font-size: 8pt; }
  .table-compact th, .table-compact td { white-space: normal !important; overflow-wrap: break-word; padding: 2px 4px; vertical-align: top; }
  .table-compact th.num, .table-compact td.num, .table-compact .mono-num, .table-compact td.nowrap { overflow-wrap: normal; word-break: keep-all; }
  .table-compact .col-extra { display: none !important; }
  .print-only-note { display: block !important; font-size: 8pt; color: #555; margin: 4px 0 0; }
  .table-compact .th-sort i { display: none; }
  .table-compact .mono-num, .table-compact .num { font-variant-numeric: tabular-nums; }
  .table-wide { page-break-inside: auto; }
  .table-wide thead { display: table-header-group; }
  .table-wide tr { page-break-inside: avoid; }
}
.table-sideways { display: flex; align-items: center; gap: 8px; margin: 0; padding: var(--pad-s) var(--pad-l); border-top: 1px solid var(--line-2); color: var(--muted); font-size: 12.5px; }
.table-sideways i { color: var(--accent); }
.print-only-note { display: none; }

/* ---------- Roles per user (v3.1.0 build 57) - BY NEPTUNE UAE ---------- */
.role-picker { display: block; }
.role-picker > span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.role-picker.is-dimmed { opacity: .5; }
.role-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; margin-top: 8px; }
.role-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); }
.role-row.is-on { border-color: var(--accent); background: var(--accent-soft, rgba(53, 99, 233, .06)); }
.role-row .check-line { margin: 0; }
.role-row .role-main { font-size: 12px; white-space: nowrap; }
.role-row .role-main span { font-size: 12px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Batches and expiry (v3.1.0 build 57) - BY NEPTUNE UAE ---------- */
.entry-lines input.batch-in { min-width: 90px; }
.entry-lines input[type="date"] { min-width: 132px; }
.entry-lines .is-dimmed { opacity: .45; }
.entry-lines select[data-batch-pick] { min-width: 180px; }
.exp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }
.exp-dot.is-expired { background: #C53030; }
.exp-dot.is-critical { background: #DD6B20; }
.exp-dot.is-warning { background: #D69E2E; }
.exp-dot.is-ok { background: #2F855A; }
tr.is-expired td { background: rgba(197, 48, 48, .06); }
tr.is-critical td { background: rgba(221, 107, 32, .06); }

/* ---------- Approvals: full document details (v3.1.0 build 57) - BY NEPTUNE UAE ---------- */
.apv-detail { padding: 0 0 4px; }
.apv-detail .apv-facts { padding: 12px 16px 4px; }
.apv-detail .notes { padding: 8px 16px 12px; color: var(--muted); }
.apv-lines { font-size: 13px; }
.apv-detail-row > td { background: var(--bg-soft, #F7F8FA); padding: 0; }
.apv-detail-row .table-wrap { margin: 0; }

/* ---------- Material requests (v3.1.0 build 57) - BY NEPTUNE UAE ---------- */
.meter { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: var(--line, #E2E5EA); overflow: hidden; vertical-align: middle; }
.meter > span { display: block; height: 100%; background: var(--ok, #2F855A); border-radius: 4px; }
.req-qline { display: flex; gap: 6px; align-items: baseline; }
.req-short { color: var(--danger, #C53030); font-weight: 600; }
.entry-lines td[data-availability] { white-space: nowrap; }

/* =====================================================================
   Nothing wider than the window (v3.2.0 build 68) - BY NEPTUNE UAE
   A report center carries a long toolbar in its card head: the view
   switch, rows, columns and measure. The head was a flex row that could
   not wrap, so on a narrow screen it pushed the card - and with it the
   whole page - past the edge of the window, and the only way to reach
   the rest was to drag the page itself sideways. Now every head and
   toolbar wraps, every flex child may shrink, and the page is clipped at
   its own width so a stray wide element can never slide the layout. A
   wide table still scrolls sideways inside its own frame, which is where
   the scrolling belongs.
   ===================================================================== */
.card-head, .page-head { flex-wrap: wrap; }
.card-head > *, .page-head > *, .rk-viewbar, .rk-viewbar label, .filters > *, .card-head h2 { min-width: 0; }
.card-head h2, .page-head h1 { overflow-wrap: anywhere; }
.rk-viewbar select { max-width: 100%; }
/* overflow-x: clip, not hidden: clip does not make a scroll container, so the sticky top bar and the sticky first column keep working */
.shell, .content { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) { .shell { overflow-x: hidden; } }
/* a table always scrolls inside its own frame, never by moving the page */
.table-wrap { max-width: 100%; }
.table-card > .table-wrap, .card > .table-wrap { width: 100%; }
/* long text in a narrow cell breaks instead of stretching the row */
.table td .col-details, .table td small, .facts dd { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .rk-viewbar { width: 100%; }
  .rk-viewbar label { flex: 1 1 140px; }
  .rk-viewbar select { width: 100%; }
}

/* =================================================================
   Page header image and watermark on printed documents (v3.2.0 build 68)
   BY NEPTUNE UAE
   ================================================================= */
.doc-headerband { padding: 0 var(--pad-l); margin-bottom: 4px; }
.doc-headerband img { display: block; width: 100%; height: var(--doc-head-h, 22mm); object-fit: contain;
  object-position: var(--doc-head-pos, 50%) center; opacity: var(--doc-head-op, 1); }
.print-mode .doc-headerband { padding: 0; margin-bottom: 8px; }

/* The watermark sits behind the page; on paper it repeats on every sheet */
.doc-watermark { display: none; }
.doc-watermark img { width: var(--wm-size, 60%); max-width: 60%; height: auto; opacity: var(--wm-op, .08);
  transform: rotate(var(--wm-rot, 0deg)); }
.print-mode .doc-watermark { display: flex; position: fixed; inset: 0; align-items: center; justify-content: center;
  z-index: 0; pointer-events: none; }
.print-mode .doc-watermark img { max-width: 100%; }
.print-mode .sheet { position: relative; z-index: 1; }
@media print { .print-mode .doc-watermark { display: flex !important; } }

/* The watermark behind the preview card in Document layout */
.doc-preview.has-wm { position: relative; }
.doc-preview.has-wm::before { content: ""; position: absolute; inset: 0; background-image: var(--wm-img); background-repeat: no-repeat;
  background-position: center; background-size: var(--wm-size, 60%) auto; opacity: var(--wm-op, .08);
  transform: rotate(var(--wm-rot, 0deg)); pointer-events: none; }
.doc-preview.has-wm > * { position: relative; }

/* Image upload rows (page header image, watermark) */
.img-pick { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: center; margin: 12px 0; }
.img-box { display: flex; align-items: center; justify-content: center; min-height: 86px; padding: 10px; border: 1px dashed var(--line);
  border-radius: var(--r); background: var(--chip); }
.img-box.is-wide { min-height: 70px; }
.img-box img { max-width: 100%; max-height: 90px; object-fit: contain; }
.img-pick-fields { display: grid; gap: 8px; }
@media (max-width: 760px) { .img-pick { grid-template-columns: minmax(0, 1fr); } }

/* Document designer: the preview column (v3.2.0 build 68) - BY NEPTUNE UAE */
.doc-preview-wrap .doc-preview-table { width: 100%; border-collapse: collapse; margin-top: 14px; background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.doc-preview-wrap .doc-preview-table .num { text-align: end; font-variant-numeric: tabular-nums; }
.doc-preview-wrap .doc-preview-table th, .doc-preview-wrap .doc-preview-table td { text-align: start; }
.doc-preview-wrap .small { font-size: 12px; margin-top: 6px; }
.reset-design { margin-top: 14px; }
.doc-preview-wrap .color-field input[type="color"] { inline-size: 34px; }

/* =================================================================
   Sourcing: requests for quotation, the comparison sheet, the
   evaluation and supply agreements (v3.2.0 build 68) - BY NEPTUNE UAE
   ================================================================= */
/* small number boxes used in the quotation and numbering grids */
.num-s { inline-size: 5.5rem; text-align: end; }
.num-m { inline-size: 8rem; text-align: end; }

/* a form that sits on one line inside a table cell or a toolbar */
.inline-form, .form-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.form-inline .field { margin: 0; }

/* the comparison sheet: one column per supplier, the best cell marked */
.compare-sheet th, .compare-sheet td { vertical-align: top; }
.compare-sheet .is-best { background: var(--ok-soft); }
.compare-sheet .is-best b { color: var(--ok); }
.compare-sheet tfoot th { background: var(--chip); }
.compare-sheet small.block { font-weight: 400; }

.invite-form { display: grid; gap: 10px; justify-items: start; }
.invite-form select[multiple] { min-inline-size: 280px; }

@media print {
  .compare-sheet .is-best { background: #eef7f1 !important; }
  .compare-sheet { font-size: 10pt; }
}

/* The buying process, drawn as one strip across every page of it (v3.2.0 build 68) - BY NEPTUNE UAE */
.proc-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.proc-step { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--card); color: var(--text); min-width: 0; flex: 1 1 150px; position: relative; }
.proc-step:hover { border-color: var(--accent); text-decoration: none; }
.proc-step.is-now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.proc-no { display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%;
  background: var(--chip); color: var(--muted); font-size: 12px; font-weight: 700; flex: none; }
.proc-step.is-now .proc-no { background: var(--accent); color: var(--on-accent); }
.proc-text { display: flex; flex-direction: column; min-width: 0; }
.proc-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-text small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-count { margin-inline-start: auto; background: var(--accent-soft); color: var(--accent-deep);
  border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; flex: none; }
@media (max-width: 900px) { .proc-text small { display: none; } .proc-step { flex: 1 1 120px; } }

/* Choosing who to ask for a quotation (v3.2.0 build 68) - BY NEPTUNE UAE */
.sup-pick { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; background: var(--card); }
.sup-pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sup-pick-head b { font-size: 14px; }
.sup-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 36px; min-inline-size: min(280px, 70vw);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); color: var(--muted); }
.sup-search input { flex: 1; border: 0; background: none; outline: none; font: inherit; color: var(--text); }
.sup-list { list-style: none; margin: 0; padding: 0; max-block-size: 290px; overflow-y: auto;
  border: 1px solid var(--line-2); border-radius: var(--r); }
.sup-list li + li { border-top: 1px solid var(--line-2); }
.sup-list label { display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; }
.sup-list label:hover { background: var(--hover); }
.sup-list input[type="checkbox"] { flex: none; }
.sup-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sup-main b { font-size: 13.5px; }
.sup-why { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; text-align: end; }
.sup-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 700px) { .sup-list label { flex-wrap: wrap; } .sup-why { justify-content: flex-start; } }

/* =====================================================================================================
   NEP ERP v3.3.0 build 69 - modern layer - BY NEPTUNE UAE
   One calm, consistent finish for the whole system: softer surfaces, one shadow scale, a single-row top menu,
   touch-sized controls, list tables that become cards on phones, and no charts or summary strips on phones
   (a phone shows what you need to act). Colours still come from the theme variables (Appearance).
   ===================================================================================================== */
:root {
  --menu-pat-op: .10;
  --menu-pat-op-light: .05;
  --elev-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03);
  --elev-2: 0 8px 20px -10px rgba(15, 23, 42, .22), 0 1px 3px rgba(15, 23, 42, .06);
  --elev-pop: 0 22px 50px -18px rgba(8, 14, 26, .5), 0 2px 8px rgba(8, 14, 26, .12);
  --focus-ring: 0 0 0 3px var(--accent-ring);
  --tap: 44px;
  --topbar-h: 60px;
}
html { scroll-padding-top: calc(var(--topbar-h) + 56px); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
::selection { background: var(--accent-ring); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- shell, top bar, pop-ups ---------- */
.topbar { box-shadow: var(--elev-1); gap: 12px; }
.topbar-tools { gap: 6px; }
.palette-open { border-radius: 999px; padding-inline: 14px 8px; transition: border-color .15s, background-color .15s; }
.palette-open:hover { border-color: var(--accent); }
.icon-btn { transition: background-color .15s; }
.popover, .topnav-drop, .palette-box, .flyout { box-shadow: var(--elev-pop); border-color: var(--line); }
.popover { border-radius: var(--r-lg); }
.palette { backdrop-filter: blur(3px); }
.palette-box { border: 1px solid var(--line); }
#palette-list a { padding-block: 8px; }

/* ---------- top menu: one row of apps that scrolls sideways, drop-downs placed by the script ---------- */
.topnav { overflow: visible; }
.topnav-inner { flex-wrap: nowrap !important; gap: 14px; padding: 0 20px; min-height: 46px; }
.topnav-modules { flex: 0 1 auto; max-width: 64%; min-width: 0; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 5px 2px; }
.topnav-modules::-webkit-scrollbar { display: none; }
.topnav-item { flex: none; }
.topnav-link { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 999px; transition: background-color .15s, color .15s; }
.topnav-link.is-active { background: var(--topbar-soft); color: var(--on-topbar); box-shadow: inset 0 0 0 1px var(--topbar-line); border-radius: 999px; }
.topnav-link.is-active i:first-child { color: var(--accent); }
.topnav-drop { position: fixed !important; inset-inline-start: auto; inset-inline-end: auto; top: 0; z-index: 60; min-width: 300px; max-width: min(430px, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain; animation: drop-in .12s ease-out; }
.topnav-drop a.is-active { background: var(--hover); }
.topnav-drop a.is-active b { color: var(--accent-deep); }
.menu-failed { padding: 10px 12px; color: var(--muted); font-size: 13px; list-style: none; }
.topnav-pins { flex: 1 1 0; }
.nav-both .topnav-pins, .nav-top .topnav-pins { border-inline-start: 1px solid var(--topbar-line); padding-inline-start: 14px; }
.pin { transition: background-color .15s, border-color .15s; }

/* ---------- surfaces ---------- */
.card, .filters, .form-card, .nt-section { border-color: var(--line-2); box-shadow: var(--elev-1); }
.card-head { border-bottom-color: var(--line-2); }
.page-head h1 { font-size: 25px; font-weight: 650; letter-spacing: -.015em; }
.page-head p { font-size: 14px; line-height: 1.45; max-width: 78ch; }
.notice { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-weight: 500; }
.badge { font-weight: 600; letter-spacing: .005em; }
.empty-state { padding-block: 56px; }
.empty-state > i { font-size: 38px; opacity: .8; }

/* ---------- buttons and fields ---------- */
.btn { font-weight: 600; box-shadow: var(--elev-1); transition: background-color .15s, border-color .15s, box-shadow .15s, transform .06s; }
.btn:hover { filter: none; background: color-mix(in srgb, var(--accent) 86%, #000); color: var(--on-accent); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-ghost, .btn.btn-ghost { background: var(--card); color: var(--text); box-shadow: none; }
.btn-ghost:hover, .btn.btn-ghost:hover { background: var(--hover); color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.btn-danger, .btn.btn-danger { color: var(--danger); }
.btn.btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.field input, .field select, .field textarea, .color-pair input[data-hex] { background: var(--input-bg, var(--card)); transition: border-color .15s, box-shadow .15s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.field > span:first-child { letter-spacing: .005em; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.seg input:checked + span { box-shadow: var(--elev-1); }

/* ---------- tables ---------- */
.table td { font-variant-numeric: tabular-nums; }
.table th { font-size: 12px; letter-spacing: .015em; }
.table tbody tr { transition: background-color .1s; }
.table tbody tr:hover td { background: var(--hover); }
.table-card { box-shadow: var(--elev-1); }
.pager { background: var(--card); }

/* ---------- phones: lists become cards ---------- */
.tbl-label { display: none; }
@media (max-width: 700px) {
  table.tbl-cards, table.tbl-cards tbody, table.tbl-cards tfoot { display: block; width: 100%; }
  table.tbl-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.tbl-cards tr { display: block; padding: 10px 14px 8px; border-bottom: 1px solid var(--line-2); }
  table.tbl-cards tbody tr:last-child { border-bottom: 0; }
  table.tbl-cards td, table.tbl-cards th { display: block; position: relative; padding: 5px 0 5px 40% !important; border: 0 !important; background: none !important; text-align: start; min-width: 0; min-height: 28px; overflow-wrap: anywhere; white-space: normal; }
  [dir="rtl"] table.tbl-cards td, [dir="rtl"] table.tbl-cards th { padding: 5px 40% 5px 0 !important; }
  table.tbl-cards td::before { content: attr(data-label); position: absolute; inset-inline-start: 0; top: 7px; width: 36%; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
  table.tbl-cards td:first-child { padding: 2px 0 8px !important; font-weight: 600; font-size: 15px; }
  table.tbl-cards td:first-child::before { display: none; }
  table.tbl-cards td:empty, table.tbl-cards td[data-label=""]::before { display: none; }
  table.tbl-cards td[colspan] { padding: 8px 0 !important; text-align: center; }
  table.tbl-cards td[colspan]::before { display: none; }
  table.tbl-cards td.col-actions, table.tbl-cards td:last-child:has(> .btn, > a.btn, > form) { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 10px 0 2px !important; margin-top: 4px; border-top: 1px dashed var(--line-2) !important; }
  table.tbl-cards td.col-actions::before { display: none; }
  table.tbl-cards tbody tr:hover td { background: none !important; }
  table.tbl-cards tfoot tr { background: var(--chip); }
  .table-card:has(table.tbl-cards) .table-wrap { overflow: visible; }
}

/* ---------- phones: no charts, no summary strips - only what is needed to act ---------- */
@media (max-width: 700px) {
  .kpis-top, .kpis, .kpis-inline, .dash-kpis, .dash-panels, .dpn-add, .dash-trend, .dash-skyline, .dash-spark, .dash-legend,
  .rk-chart, .re-bars, .re-income, .nt-board .nt-trend, .dpn-chart, .dpn-gauges, .bi-donut, .hr-kpis, .doc-kpis, .proc-strip .proc-count { display: none !important; }
  .keep-mobile, .keep-mobile.kpis, .keep-mobile.kpis-top { display: revert !important; }
}

/* ---------- touch ---------- */
@media (pointer: coarse), (max-width: 900px) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .icon-btn { min-width: 40px; min-height: 40px; justify-content: center; }
  .field input, .field select { min-height: 42px; }
  .sn-app-btn, .sn-sub a { min-height: 42px; }
}
/* phone home: what you act on first (attention items, quick actions, shortcuts); setup list, operations and activity feed step aside */
@media (max-width: 700px) {
  .setup-list, .setup-head .muted, .dash-card:has(.dash-ops), .dash-card:has(.dash-activity), .dash-eyebrow + h1 + p small { display: none !important; }
  .setup-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .setup-head h2 { font-size: 16px; }
  .dash-grid { gap: 14px; }
  .dash-apps-grid { gap: 8px; }
  .dash-app small, .dash-app .dash-app-sub { display: none; }
  /* quick actions and the application launcher: two compact tiles per row, names may wrap to two lines */
  .dash-quick { gap: 8px; }
  .dash-quick a { gap: 8px; padding: 10px; font-size: 13px; line-height: 1.25; min-width: 0; min-height: 48px; }
  .dash-quick a > span:last-child, .dash-app > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .dash-app { gap: 9px; padding: 10px; min-width: 0; font-size: 13px; line-height: 1.25; }
  .dash-app .well, .dash-quick .well { flex: none; }
}
@media (max-width: 700px) {
  .field input, .field select, .field textarea { font-size: 16px; }
  .field input, .field select { height: 44px; }
  .btn { height: 44px; }
  .btn-sm { height: 38px; }
  .card-head { padding: 12px 14px; }
  .form-card { padding: 16px 14px; }
  .filters { padding: 12px; }
  .content { padding-inline: 12px; }
  .topnav { position: static; }
  .topnav-modules { display: none; }
  .topnav-inner { padding: 0 10px; min-height: 42px; }
  .nav-both .topnav-pins, .nav-top .topnav-pins { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 56px; }
  .topnav { top: var(--topbar-h); }
}

/* segmented choices: the hidden radio must never take the width of the page */
.seg { position: relative; }
.seg input { width: 1px; height: 1px; margin: 0; padding: 0; border: 0; inset-inline-start: 0; top: 0; }

/* ===== v3.3.0 build 69: Appearance page (presets, tab colours, preview) ===== */
.form-card-head h2 .badge { margin-inline-start: 10px; vertical-align: middle; font-size: 11px; }
.form-card-head > .btn { margin-inline-start: auto; flex: none; }
.form-card-head > .tab-sample { margin-inline-start: auto; flex: none; }
.tabcolor-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tabcolor-row input[type="color"] { width: 52px; height: 40px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); cursor: pointer; flex: none; }
.tabcolor .hint { display: block; margin-top: 6px; }
.ap-sample-body { display: grid; gap: 14px; }
.ap-sample-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ap-sample-body .nt-tabs { align-self: start; justify-self: start; max-width: 100%; }
.ap-sample input[readonly] { pointer-events: none; }
@media (max-width: 700px) {
  .form-card-head > .btn, .form-card-head > .tab-sample { margin-inline-start: 0; }
  .form-card-head { flex-wrap: wrap; }
}

/* ===== v3.3.0 build 69: Backups page ===== */
.bk-daily, .bk-manual { margin-bottom: 18px; }
.bk-daily + .table-card, .table-card + .bk-manual { margin-bottom: 18px; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.bk-chip {
  font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer; color: var(--tab-idle-fg, var(--ag-ink));
  background: var(--tab-idle); border: 1px solid var(--tab-idle-edge); box-shadow: 0 2px 0 var(--tab-idle-edge); margin-bottom: 2px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.bk-chip:hover { background: var(--tab-hover); transform: translateY(-1px); }
.bk-chip:active { transform: translateY(2px); box-shadow: none; }
.bk-chip.is-on { background: var(--tab-on); color: var(--tab-on-fg, var(--on-ink)); border-color: var(--tab-on-edge); box-shadow: 0 2px 0 var(--tab-on-edge); }
.bk-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 14px 0; }
.bk-status > div { background: var(--chip); border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.bk-status span { display: block; font-size: 12px; color: var(--muted); }
.bk-status strong { display: block; font-size: 15px; margin-top: 2px; overflow-wrap: anywhere; }
.bk-notes { margin: 12px 0; padding-inline-start: 20px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.bk-inline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.bk-inline .check-line { min-height: 0; }
.bk-restore { margin: 18px 0 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.bk-daily .notice { margin: 0 0 14px; }
@media (max-width: 700px) {
  .bk-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-inline .btn { width: 100%; }
}

/* a solid danger button (without .btn-ghost) is red with white text; the ghost one keeps red text on the page colour */
.btn.btn-danger:not(.btn-ghost) { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.btn-danger:not(.btn-ghost):hover { background: var(--danger); color: #fff; filter: brightness(1.08); }
.btn.btn-danger:not(.btn-ghost) i { color: inherit; }
.table th.col-actions { text-align: end; }

/* ================= Email (v3.4.0 build 70) - BY NEPTUNE UAE ================= */
.mail-dlg .qi-body { gap: 12px; }
.mail-dlg textarea { min-height: 84px; resize: vertical; }
.mail-dlg .hint, .hint { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.mail-preview { display: block; width: 100%; height: 520px; border: 1px solid var(--line); border-radius: var(--r); background: #EEF0F3; }
.mail-text { margin: 0; padding: 14px; background: var(--chip); border-radius: var(--r); white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.6 var(--font-mono, ui-monospace, monospace); }
.code-area { font: 13px/1.55 var(--font-mono, ui-monospace, monospace); min-height: 260px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--chip); color: var(--text); border-radius: 999px; padding: 4px 10px; font: 12px var(--font-mono, ui-monospace, monospace); cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.sub-h { margin: 14px 0 2px; font-size: 13px; font-weight: 700; color: var(--text); }
details.more { margin: 4px 0; border: 1px solid var(--line-2); border-radius: var(--r); }
details.more > summary { padding: 8px 12px; }
details.more > div, details.more > label { margin: 0 12px 12px; }
.lang-switch { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sent-strip { margin: 0 0 12px; }
td.col-actions form.inline-form { display: inline-flex; }
.form-card > form.inline-form { display: flex; align-items: flex-end; gap: 12px; }
.form-card > form.inline-form .field { flex: 1 1 220px; min-width: 0; }
@media (max-width: 700px) {
  .form-card > form.inline-form .field { flex: 1 1 100%; }
  .form-card > form.inline-form .btn { width: 100%; justify-content: center; }
  .mail-preview { height: 420px; }
  .mail-dlg { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; margin: 0; }
  .mail-dlg .qi-grid { grid-template-columns: 1fr; }
}

/* ================= E-signature (v3.4.0 build 70) - BY NEPTUNE UAE ================= */
details.more > form { margin: 0 12px 12px; }
.esign-signer { align-items: end; }
.sign-page { background: var(--canvas); color: var(--canvas-text); min-height: 100vh; display: flex; flex-direction: column; }
.sign-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line); }
.sign-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sign-brand .login-mark { width: 42px; height: 42px; padding: 9px; flex: none; }
.sign-brand > div { display: grid; min-width: 0; }
.sign-brand b, .sign-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sign-brand span { color: var(--muted); font-size: 12px; }
.sign-main { width: 100%; max-width: 940px; margin: 0 auto; padding: 20px 16px 8px; display: grid; gap: 16px; flex: 1; align-content: start; }
.sign-card { padding: 22px; display: grid; gap: 14px; }
.sign-card h1 { font-size: 22px; overflow-wrap: anywhere; }
.sign-card h2 { font-size: 17px; }
.sign-narrow { max-width: 560px; margin: 24px auto 0; width: 100%; }
.sign-notice { margin: 0; }
.sign-foot { padding: 14px 16px 22px; text-align: center; color: var(--muted); font-size: 12px; }
.sign-docbar { display: flex; flex-wrap: wrap; gap: 8px; }
.well-note { background: var(--chip); border-radius: var(--r); padding: 12px 14px; overflow-wrap: anywhere; }
.esign-frame { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.esign-padwrap { border: 1px dashed var(--muted); border-radius: var(--r); background: #fff; }
.esign-pad { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; }
.esign-preview { min-height: 74px; padding: 10px 14px; border-bottom: 2px solid var(--canvas-text); font: 36px/1.4 "Segoe Script", "Lucida Handwriting", "Brush Script MT", "Snell Roundhand", cursive; overflow-wrap: anywhere; background: #fff; border-radius: var(--r) var(--r) 0 0; color: #16202E; }
.esign-typed { font: 26px/1.3 "Segoe Script", "Lucida Handwriting", "Brush Script MT", "Snell Roundhand", cursive; color: #16202E; overflow-wrap: anywhere; }
.esign-sigimg { display: block; width: auto; height: auto; max-width: min(220px, 100%); max-height: 70px; object-fit: contain; background: #fff; }
.esign-hash { font: 12px/1.5 var(--font-mono, ui-monospace, monospace); overflow-wrap: anywhere; word-break: break-all; }
.esign-note { font-size: 12px; }
.esign-agree { align-items: flex-start; }
.esign-agree input { margin-top: 3px; flex: none; }
.esign-decline { margin-top: 6px; }
.esign-cert { gap: 12px; }
.esign-cert-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.esign-cert-head h2 { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .sign-top { padding: 10px 12px; }
  .sign-main { padding: 12px 12px 4px; gap: 12px; }
  .sign-card { padding: 16px 14px; }
  .sign-card h1 { font-size: 19px; }
  .esign-frame { height: 56vh; min-height: 320px; }
  .esign-preview { font-size: 30px; }
  .sign-docbar .btn { flex: 1 1 100%; justify-content: center; }
  .esign-cert-head { flex-direction: column; }
}
@media print {
  .sign-top, .sign-foot, .sign-docbar, .no-print { display: none !important; }
  .sign-page { background: #fff; }
  .sign-main { max-width: none; padding: 0; }
  .esign-frame { display: none; }
}

/* ================= WhatsApp (v3.5.0 build 71) - BY NEPTUNE UAE ================= */
:root { --wa: #0F7B43; --wa-ink: #FFFFFF; }
.btn-wa, .btn.btn-wa { background: var(--wa); color: var(--wa-ink); border-color: var(--wa); }
.btn-wa:hover { filter: brightness(1.1); }
.btn-wa i { font-size: 1.15em; }
.text-danger { color: var(--danger); }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.wa-bubble { margin: 0; padding: 12px 14px; max-width: 560px; background: var(--ok-soft); color: var(--text); border: 1px solid var(--line); border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.6; }
[dir="rtl"] .wa-bubble { border-radius: var(--r-lg) 4px var(--r-lg) var(--r-lg); }
.wa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
.wa-send .wa-bubble { max-width: 100%; }
.wa-meta { border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px; display: grid; gap: 12px; }
.wa-meta h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.wa-metatext { max-width: 100%; }
.wa-vars { margin: 0; padding-inline-start: 22px; display: grid; gap: 4px; }
.wa-vars code { font-size: 12px; }
.wa-contact { display: grid; gap: 12px; }
.wa-contact[hidden], [data-for-channel][hidden] { display: none !important; }
.wa-note { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) {
  .wa-actions .btn { flex: 1 1 100%; justify-content: center; }
  .wa-bubble { max-width: 100%; }
  .sr-narrow { display: none; }
}
.esign-signer { display: grid; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); align-items: start; }
.esign-signer[hidden] { display: none; }
.segmented { max-width: 100%; }


/* ---- Help and wiki button (build 73): flat colours only ---- */
.helpmenu { position: relative; }
.help-pop { min-width: 320px; max-width: min(420px, 94vw); }
.help-pop .pop-scroll { max-height: min(76vh, 560px); overflow-y: auto; }
.help-pop .help-main { font-weight: 600; background: var(--hover); }
.help-pop .help-n { font-weight: 600; background: var(--hover); border-radius: 99px; padding: 0 7px; margin-inline-start: 4px; }
.help-pop .help-txn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.help-pop .help-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.help-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; line-height: 1.5; padding: 0 8px; border-radius: 99px; border: 1px solid var(--line-2); }
.help-chip i { width: auto; font-size: 11px; }
.help-chip.is-on { background: #E3F4EC; color: #0E6B4A; border-color: #BFE3D1; }
.help-chip.is-on i { color: #0E8A6A; }
.help-chip.is-off { background: #EEF1F4; color: #5E6E7E; }
.help-chip.is-off i { color: #8795A3; }
.help-pop form.help-search { display: flex; gap: 6px; border-top: 0; margin: 4px 8px; padding: 0; }
.help-pop form.help-search input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px; background: var(--card); color: var(--text); }
.help-pop form.help-search button { width: 36px; justify-content: center; border: 1px solid var(--line-2); border-radius: 8px; }
@media (max-width: 720px) { .helpmenu .quick-btn span { display: none; } }

/* ---------- v4.0.0 build 81: licence ---------- */
.licence-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.licence-limit { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.licence-limit b { display: block; }
.licence-limit .meter { display: block; width: 100%; margin-top: 6px; }
.licence-limit.is-over { border-color: var(--danger); }
.licence-plugins { display: flex; flex-wrap: wrap; gap: 8px; }
.licence-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--chip); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; }
.licence-chip.is-off { color: var(--faint); }
.licence-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; border: 0; margin: 0; }
.licence-pick legend { font-weight: 600; padding: 0 0 6px; }
.licence-reason { font-size: 15px; margin: 0; }
.licence-banner a { margin-inline-start: 6px; font-weight: 600; text-decoration: underline; }
@media (max-width: 640px) {
  /* phone: only what is needed to act - status, reason, limits, the buttons; the plugin chips stay on larger screens */
  .licence-plugins, .licence-plugins + p { display: none; }
  .licence-limits { grid-template-columns: 1fr; }
}
.licence-limit.is-off { opacity: .65; }