/* SHABAB PROPERTY 360 — NEXUS look (same family as HR PRO 2.6 "NEXUS Night" / "NEXUS Light"): deep navy + gold, faint grid background,
   gold side-menu pill with dark ink (WCAG AA), glass-edge cards. Loaded after app.css; only changes colours / shapes, never layout.
   Light / dark: "auto" follows the phone / PC, the 🌓 button in the menu forces one. Print stays white. */
:root {
  --nx-bg: #f4f1ea; --nx-bg2: #ece6d8; --nx-card: #ffffff; --nx-ink: #0b1f4a; --nx-muted: #5a6785; --nx-line: #e3dccb;
  --nx-primary: #0b1f4a; --nx-primary2: #16306b; --nx-primaryInk: #ffffff; --nx-accent: #8a6a1f; --nx-gold: #c9a24a;
  --nx-side: #0b1f4a; --nx-side2: #071637; --nx-sideInk: #e3e8ee; --nx-sideMute: #aab8c5; --nx-grid: rgba(11, 31, 74, 0.05);
  --bg: var(--nx-bg); --card: var(--nx-card); --ink: var(--nx-ink); --muted: var(--nx-muted); --line: var(--nx-line); --soft: #f8f5ee;
  --blue: #16306b; --navy: #0b1f4a; --gold: #c9a24a; --chip: #ece6d8;
  --red: #c81e1e; --red-bg: #fbecea; --amber: #a14a07; --amber-bg: #fff3df; --green: #047857; --green-bg: #e6f3ea;
  --shadow: 0 1px 2px rgba(11, 38, 58, 0.05), 0 8px 24px rgba(11, 38, 58, 0.07); --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nx-bg: #06122b; --nx-bg2: #0a1d44; --nx-card: #0f1c38; --nx-ink: #eef2fb; --nx-muted: #a7b6d3; --nx-line: #22345c;
    --nx-primary: #d9ae4e; --nx-primary2: #e8c56b; --nx-primaryInk: #1c1300; --nx-accent: #d9ae4e; --nx-gold: #d9ae4e;
    --nx-side: #040d22; --nx-side2: #06122b; --nx-sideInk: #e3e8ee; --nx-sideMute: #aab8c5; --nx-grid: rgba(169, 184, 214, 0.06);
    --bg: var(--nx-bg); --card: var(--nx-card); --ink: var(--nx-ink); --muted: var(--nx-muted); --line: var(--nx-line); --soft: #13244a;
    --blue: #e8c56b; --navy: #0b2a6f; --gold: #d9ae4e; --chip: #1a2c55;
    --red: #f87171; --red-bg: #3b171a; --amber: #fbbf24; --amber-bg: #3a2a10; --green: #34d399; --green-bg: #0f2e1c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --nx-bg: #06122b; --nx-bg2: #0a1d44; --nx-card: #0f1c38; --nx-ink: #eef2fb; --nx-muted: #a7b6d3; --nx-line: #22345c;
  --nx-primary: #d9ae4e; --nx-primary2: #e8c56b; --nx-primaryInk: #1c1300; --nx-accent: #d9ae4e; --nx-gold: #d9ae4e;
  --nx-side: #040d22; --nx-side2: #06122b; --nx-sideInk: #e3e8ee; --nx-sideMute: #aab8c5; --nx-grid: rgba(169, 184, 214, 0.06);
  --bg: var(--nx-bg); --card: var(--nx-card); --ink: var(--nx-ink); --muted: var(--nx-muted); --line: var(--nx-line); --soft: #13244a;
  --blue: #e8c56b; --navy: #0b2a6f; --gold: #d9ae4e; --chip: #1a2c55;
  --red: #f87171; --red-bg: #3b171a; --amber: #fbbf24; --amber-bg: #3a2a10; --green: #34d399; --green-bg: #0f2e1c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.4); color-scheme: dark;
}
html { background: var(--nx-bg); }
body { min-height: 100vh; background: linear-gradient(160deg, var(--nx-bg) 0%, var(--nx-bg2) 100%) fixed; font-family: "Segoe UI", "Noto Sans Arabic", "Tahoma", system-ui, -apple-system, Roboto, Arial, sans-serif; }
@media screen {
  body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(to right, var(--nx-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--nx-grid) 1px, transparent 1px);
    background-size: 115px 115px; background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(140% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.25) 100%); mask-image: radial-gradient(140% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.25) 100%); }
  #app { position: relative; z-index: 1; }
}
a { color: var(--nx-accent); }
/* top bar */
.top { background: linear-gradient(90deg, #040d22, #0b1f4a 55%, #0b2a6f); border-bottom: 1px solid var(--nx-gold); box-shadow: 0 6px 24px rgba(4, 13, 34, 0.25); }
.top .brand b { letter-spacing: 0.1em; }
.top .brand small { color: #c7d2ea; }
.top .tbtn { background: rgba(217, 174, 78, 0.12); border-color: rgba(217, 174, 78, 0.35); }
.brand .mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: linear-gradient(145deg, #e8c56b, #b8862a); color: #1c1300; font-weight: 800; font-size: 12px; letter-spacing: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
/* side menu: navy with gold */
.side { background: linear-gradient(180deg, var(--nx-side), var(--nx-side2)); border-right: 1px solid rgba(217, 174, 78, 0.22); color: var(--nx-sideInk); }
.side a { color: var(--nx-sideInk); font-weight: 500; }
.side a:hover, .side a:focus-visible { background: rgba(217, 174, 78, 0.12); }
.side a.on { background: linear-gradient(90deg, #e8c56b, #d9ae4e); color: #1c1300; font-weight: 700; box-shadow: 0 2px 12px rgba(217, 174, 78, 0.25); }
.side h4, .side p.muted, .side .grp { color: var(--nx-sideMute); }
.side .grp { margin: 14px 12px 4px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: #d9ae4e; opacity: 0.9; }
.side .grp:first-child { margin-top: 2px; }
.side select.field { background: rgba(255, 255, 255, 0.06); color: var(--nx-sideInk); border-color: rgba(217, 174, 78, 0.3); }
.side select.field option { color: #0b1f4a; }
.side .badge { background: #f87171; color: #1c1300; }
/* buttons: NEXUS primary (navy in light, gold in dark) */
.btn { background: var(--nx-primary); color: var(--nx-primaryInk); border-radius: 11px; }
.btn.ghost { background: transparent; color: var(--nx-ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--nx-gold); }
.btn.gold { background: linear-gradient(180deg, #e8c56b, #c8962a); color: #1c1300; }
.btn.green { background: #047857; color: #fff; }
.btn.red { background: #b42318; color: #fff; }
.btn.amber { background: #a14a07; color: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--nx-gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.25); }
/* cards + numbers */
.card { border-radius: 16px; border-top: 2px solid rgba(180, 138, 44, 0.35); backdrop-filter: saturate(1.1); }
.kpi { border-radius: 14px; }
.kpi::before { background: var(--nx-gold); }
.kpi.red::before { background: var(--red); } .kpi.green::before { background: var(--green); } .kpi.blue::before { background: #3b82f6; }
.chip { background: var(--chip); color: var(--nx-ink); }
.chip.cc { background: #0b1f4a; color: #f4e3b5; border-color: var(--nx-gold); }
table.t th { color: var(--muted); }
table.t tbody tr:hover td, table.t tr[data-href]:hover td { background: rgba(201, 162, 74, 0.07); }
.bar i { background: linear-gradient(90deg, #c9a24a, #e8c56b); }
.chart .b1 { fill: #c9a24a; }
.hbar .trk i { background: linear-gradient(90deg, #c9a24a, #e8c56b); }
.ring circle.fg { stroke: var(--nx-gold); }
.banner { background: linear-gradient(90deg, rgba(201, 162, 74, 0.18), rgba(201, 162, 74, 0.06)); border-color: rgba(201, 162, 74, 0.4); color: var(--ink); }
.bottom { background: var(--card); border-top: 1px solid rgba(201, 162, 74, 0.35); }
.bottom button b { color: var(--nx-accent); }
.landing2 { background: radial-gradient(1100px 560px at 12% -10%, rgba(217, 174, 78, 0.22) 0%, transparent 60%), linear-gradient(160deg, #06122b, #0a1d44 65%, #040d22); }
.landing2 .box { border-top: 3px solid var(--nx-gold); }
.toast { background: #0b1f4a; color: #f4e3b5; border: 1px solid var(--nx-gold); }
/* brand head on the log-in page (text logo: the name comes from lib/product.js) */
.p360-head { text-align: center; margin: 4px 0 14px; }
.p360-head .mark { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(145deg, #e8c56b, #b8862a); color: #1c1300; font-weight: 900; font-size: 22px; box-shadow: 0 10px 30px rgba(217, 174, 78, 0.35); }
.p360-head .nm { font-size: 20px; font-weight: 800; letter-spacing: 0.12em; color: var(--ink); }
.p360-head .tag { font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; }
/* password eye (every password box) */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-inline-end: 46px !important; width: 100%; }
.pw-eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0; }
.pw-eye:hover, .pw-eye:focus-visible { background: rgba(201, 162, 74, 0.15); color: var(--ink); outline: none; }
.pw-eye svg { width: 20px; height: 20px; }
/* in-app question box (replaces the browser confirm / prompt / alert) */
.modal .box.ask { max-width: 460px; }
.modal .box.ask p.q { font-size: 15px; margin: 6px 0 4px; white-space: pre-line; }
/* rent pages */
.st { display: inline-flex; align-items: center; border-radius: 99px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; background: var(--chip); color: var(--ink); }
.st.ok { background: var(--green-bg); color: var(--green); } .st.bad { background: var(--red-bg); color: var(--red); } .st.warn { background: var(--amber-bg); color: var(--amber); }
.st.info { background: rgba(59, 130, 246, 0.14); color: #2563eb; } .st.mute { background: var(--soft); color: var(--muted); border: 1px dashed var(--line); }
:root[data-theme="dark"] .st.info { color: #7cc4f5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st.info { color: #7cc4f5; } }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.money.red { color: var(--red); font-weight: 700; } .money.green { color: var(--green); }
.twocol { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .twocol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; }
.sum > span:nth-child(odd) { color: var(--muted); }
.sum > span:nth-child(even) { text-align: end; font-weight: 700; }
.sum .tot { border-top: 1px solid var(--line); padding-top: 6px; font-size: 15.5px; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chips-row button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.chips-row button.on { background: linear-gradient(90deg, #e8c56b, #d9ae4e); color: #1c1300; border-color: transparent; font-weight: 700; }
.alist { list-style: none; margin: 0; padding: 0; }
.alist li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.alist li:last-child { border-bottom: 0; }
.alist .lv { width: 10px; height: 10px; border-radius: 99px; margin-top: 6px; flex: none; background: #3b82f6; }
.alist .lv.bad { background: var(--red); } .alist .lv.warn { background: var(--amber); }
.alist b { display: block; } .alist span { font-size: 12.5px; color: var(--muted); }
.vbars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 6px 2px 0; }
.vbars .c { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; min-width: 0; height: 100%; }
.vbars .pair { display: flex; gap: 2px; align-items: flex-end; width: 100%; justify-content: center; height: 100%; }
.vbars i { display: block; width: 42%; border-radius: 4px 4px 0 0; min-height: 2px; }
.vbars i.b { background: rgba(122, 140, 180, 0.45); } .vbars i.g { background: linear-gradient(180deg, #e8c56b, #c9a24a); }
.vbars small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.legend2 { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend2 i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; }
.legend2 i.b { background: rgba(122, 140, 180, 0.45); } .legend2 i.g { background: #c9a24a; }
.agebar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); }
.agebar i { display: block; height: 100%; }
.agebar i.a1 { background: #fbbf24; } .agebar i.a2 { background: #f59e0b; } .agebar i.a3 { background: #ea580c; } .agebar i.a4 { background: #b91c1c; }
.receipt { max-width: 720px; margin: 0 auto; }
.receipt .rhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 2px solid var(--nx-gold); padding-bottom: 10px; margin-bottom: 10px; }
.receipt .rhead h2 { margin: 0; font-size: 20px; }
.receipt .big { font-size: 26px; font-weight: 800; }
.receipt .bil { color: var(--muted); font-size: 12.5px; }
.planpick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.planpick button { text-align: start; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 14px; padding: 12px; cursor: pointer; }
.planpick button.on { border: 2px solid var(--nx-gold); box-shadow: 0 6px 20px rgba(201, 162, 74, 0.2); }
.planpick b { display: block; font-size: 15px; } .planpick small { color: var(--muted); }
.checks td.okc { color: var(--green); font-weight: 700; } .checks td.bad { color: var(--red); font-weight: 700; }
/* RTL (Arabic): the phone menu slides in from the right; money stays left-to-right */
[dir="rtl"] .side { border-right: 0; border-left: 1px solid rgba(217, 174, 78, 0.22); }
@media (max-width: 899px) {
  [dir="rtl"] .side { left: auto; right: 0; transform: translateX(105%); }
  [dir="rtl"] .side.open { transform: none; }
}
[dir="rtl"] .kpi::before { left: auto; right: 0; }
[dir="rtl"] .sum > span:nth-child(even) { text-align: left; }
@media print {
  body { background: #fff !important; }
  body::before { display: none !important; }
  .card { border-top: 1px solid #ccc; }
  .receipt .rhead { border-color: #b8862a; }
}
.rstrip .kpis .kpi .v { font-size: 16px; }
.rstrip .kpi .v .money { font-size: 15.5px; }
/* money KPIs: 6 across on wide screens so 7-digit amounts fit (1,082,534.835) */
@media (min-width: 1200px) { .kpis.mk { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpis.mk .kpi .v { font-size: 17px; }
.receipt .sum { grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); }
.receipt .sum > span:nth-child(even) { word-break: break-word; }
@media (max-width: 640px) { .receipt .big { font-size: 20px; } .receipt .rhead h2 { font-size: 17px; } .receipt .mono.big { font-size: 18px; } }
@media (max-width: 640px) { span.hide-phone { display: none; } }
/* date boxes day first (dd/mm/yyyy) on a month-first browser — see web/date-dmy.js (same as HR PRO 2.6.2). The real value is unchanged. */
html.sbdmy input[type="date"]:not(:focus) {
  position: relative;
}
html.sbdmy input[type="date"]:not(:focus)::-webkit-datetime-edit {
  color: transparent;
}
html.sbdmy input[type="date"]:not(:focus)::before {
  content: attr(data-dmy);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: inherit;
  padding-inline-end: 0;
  direction: ltr;
  unicode-bidi: isolate;
  pointer-events: none;
  white-space: nowrap;
}
html.sbdmy[dir="rtl"] input[type="date"]:not(:focus)::before {
  justify-content: flex-start; /* Arabic: the calendar button sits on the right, so the date text starts on the left */
  padding-inline-start: 0;
  padding-left: 12px;
}
html.sbdmy input[type="date"].sbdmy-empty:not(:focus)::before {
  opacity: 0.55;
}

/* period picker: two date boxes + quick buttons fit on one line (EN + AR) */
#pf, #pt { max-width: 180px; }