/* Al Areesh Projects – same layout system as the Renovate & Co. app, in Al Areesh colours:
   logo red, black ink, white surfaces on a soft warm-grey canvas, white sidebar. Mobile-first, RTL-ready (logical properties). */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/fonts/playfair-display-latin-wght-normal.woff2) format("woff2-variations"); }

:root {
  --canvas: #f6f4f2; --surface: #ffffff; --sunken: #eeebe8; --hover: #faf8f7;
  --ink: #141215; --ink2: #2e2b2f; --mute: #6f6a6c; --faint: #a6a0a2; --line: #e6e1de; --line-strong: #cfc8c5;
  /* "gold" names kept so every rule follows the brand: they now hold the Al Areesh logo red */
  --gold: #b8121a; --gold-deep: #b8121a; --gold-soft: #fbe9e9; --gold-ink: #8e0e14; --red-hover: #9c0f16;
  --ok: #1f6f4a; --ok-soft: #e2f1e8; --warn: #8a5f00; --warn-soft: #f9efd6; --bad: #b8121a; --bad-soft: #fbe9e9;
  --info: #2d5b88; --info-soft: #e7eef6; --grey-soft: #ebe7dd;
  --night: #ffffff; --night2: #fbe9e9; --night-line: #e6e1de; --night-text: #4a4549;
  /* kept for older rules: the brand accent is now gold/ink, red is only used for danger */
  --red: #b8121a; --red-d: #8e0e14; --red-soft: #fbe9e9; --bg: var(--canvas); --card: var(--surface);
  --r: 14px; --r-s: 9px;
  --shadow: 0 1px 2px rgb(10 10 12 / .05), 0 0 0 1px rgb(10 10 12 / .02);
  --shadow-raised: 0 4px 16px -4px rgb(10 10 12 / .14), 0 1px 2px rgb(10 10 12 / .05);
  --shadow-pop: 0 20px 48px -12px rgb(10 10 12 / .28), 0 2px 8px rgb(10 10 12 / .06);
  --nav-h: 64px; --top-h: 56px; --side-w: 232px;
  --font: "Plus Jakarta Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Playfair Display", "IBM Plex Sans Arabic", "Iowan Old Style", Georgia, serif;
}
html[lang="ar"] { --font: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --display: "IBM Plex Sans Arabic", "Playfair Display", Georgia, serif; }
* { box-sizing: border-box; }
html { background: #ffffff; color-scheme: light; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
body { margin: 0; min-height: 100dvh; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
::selection { background: #f6cfd0; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 6px; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, video { max-width: 100%; display: block; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- opening animation (plays once per app launch) */
#intro { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #ffffff; color: var(--ink);
  animation: intro-out .4s cubic-bezier(.65,0,.35,1) .9s forwards; }
#intro .glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(184,18,26,.07), transparent 60%); opacity: 0; animation: fade .6s ease forwards; }
#intro img { position: relative; width: min(62vw, 280px); height: auto; opacity: 0; filter: blur(10px); transform: scale(.94); animation: logo-in .5s cubic-bezier(.22,1,.36,1) forwards; }
#intro .line { position: relative; margin-top: 22px; height: 2px; width: min(30vw, 140px); background: linear-gradient(90deg, transparent, var(--red), transparent); transform: scaleX(0); animation: line .4s cubic-bezier(.22,1,.36,1) .2s forwards; }
#intro .tag { position: relative; margin-top: 16px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red); opacity: 0; transform: translateY(6px); animation: tag .35s ease .3s forwards; }
html.no-intro #intro { display: none; }
@keyframes logo-in { to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes line { to { transform: scaleX(1); } }
@keyframes tag { to { opacity: 1; transform: translateY(0); } }
@keyframes fade { to { opacity: 1; } }
@keyframes intro-out { to { opacity: 0; transform: translateY(-3%); visibility: hidden; pointer-events: none; } }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
@keyframes pop { from { transform: translateY(4px) scale(.985); opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(28px); opacity: 0; } }

/* ---------- shell: black top bar + black bottom tabs on phones, black sidebar on desktop */
.top { position: sticky; top: 0; z-index: 30; height: calc(var(--top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 16px;
  background: #fff; color: var(--ink); border-bottom: 3px solid var(--red); display: flex; align-items: center; gap: 8px; }
.top .brand { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.top .brand img { height: 46px; width: auto; }
.top .grow { flex: 1; }
.iconbtn { position: relative; width: 40px; height: 40px; border-radius: var(--r-s); border: 0; background: transparent; color: var(--night-text); display: grid; place-items: center; cursor: pointer; }
.iconbtn:hover { background: var(--sunken); color: var(--ink); }
.iconbtn svg { width: 21px; height: 21px; }
.badge { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; font-variant-numeric: tabular-nums; }
.langbtn { height: 36px; min-width: 40px; padding: 0 10px; border-radius: var(--r-s); border: 1px solid var(--night-line); background: transparent; color: var(--night-text); font-weight: 600; cursor: pointer; }
.langbtn:hover { color: var(--ink); border-color: var(--line-strong); }
.login .langbtn { border-color: var(--line-strong); color: var(--ink2); background: var(--surface); }

main { max-width: 1180px; margin: 0 auto; padding: 20px 16px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); animation: fade-in .18s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; background: rgb(255 255 255 / .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--night-line); color: var(--night-text);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; }
.nav a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--mute); font-size: 10.5px; font-weight: 500; }
.nav a svg { width: 22px; height: 22px; }
.nav a.on { color: var(--red); font-weight: 600; }
.nav a .nb { position: absolute; top: 8px; inset-inline-start: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.nav a.add span.plus { width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 4px 12px rgb(184 18 26 / .3); display: grid; place-items: center; }
.nav a.add span.plus svg { width: 18px; height: 18px; }
.nav a.add em { font-style: normal; line-height: 1; }
@media (max-width: 899px) { .nav a.add { gap: 2px; } .nav a.add span.plus { margin-top: -8px; } }
.nav .side-brand, .nav .side-foot { display: none; }
@media (min-width: 900px) {
  .top { display: none; }
  .nav { inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; width: var(--side-w); height: auto; flex-direction: column; padding: 0 12px 16px; gap: 2px;
    border-top: 0; border-inline-end: 1px solid var(--line); background: #fff; backdrop-filter: none; }
  .nav a.side-brand { display: block; height: auto; padding: 22px 8px 18px; margin-bottom: 6px; border-radius: 0; background: none; border-bottom: 1px solid var(--line); }
  .nav a.side-brand:hover { background: none; }
  .nav .side-brand img { width: 168px; height: auto; }
  .nav a { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--r-s); font-size: 14px; font-weight: 400; transition: background .15s, color .15s; }
  .nav a:not(.side-brand):hover { background: var(--sunken); color: var(--ink); }
  .nav a.on { background: var(--red-soft); color: var(--red-d); font-weight: 600; }
  .nav a.on::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; height: 24px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
  html[dir="rtl"] .nav a.on::before { border-radius: 3px 0 0 3px; }
  .nav a svg { width: 18px; height: 18px; opacity: .75; }
  .nav a.on svg { color: var(--red); opacity: 1; }
  .nav a .nb { position: static; margin-inline-start: auto; height: 18px; min-width: 20px; border-radius: 9px; font-size: 11px; }
  .nav a.add { order: 5; margin-top: auto; height: 40px; justify-content: center; gap: 8px; background: var(--red); color: #fff; font-weight: 600; font-size: 13.5px; box-shadow: 0 4px 12px -2px rgb(184 18 26 / .35); }
  .nav a.add:hover { background: var(--red-hover); color: #fff; }
  .nav a.add span.plus { width: auto; height: auto; background: none; }
  .nav a.add span.plus svg { width: 16px; height: 16px; opacity: 1; }
  .nav .side-foot { order: 6; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 8px 0; border-top: 1px solid var(--line); }
  .nav:not(:has(a.add)) .side-foot { margin-top: auto; }
  .side-foot .who { min-width: 0; flex: 1; }
  .side-foot .who b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-foot .who small { display: block; color: var(--mute); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main { margin-inline-start: var(--side-w); max-width: none; padding: 32px 40px 48px; }
  main > * { max-width: 1180px; margin-inline: auto; }
}
@media (min-width: 1500px) { main { padding-inline: 56px; } }
.avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.offline { background: var(--warn-soft); color: var(--warn); font-weight: 600; font-size: 13.5px; padding: 8px 14px; text-align: center; }
@media (min-width: 900px) { .offline { margin-inline-start: var(--side-w); } }

/* ---------- type + layout */
h1 { font-family: var(--display); font-weight: 500; font-size: 30px; margin: 2px 0 2px; letter-spacing: -.01em; line-height: 1.08; text-wrap: balance; }
@media (min-width: 900px) { h1 { font-size: 36px; } }
h2 { font-family: var(--display); font-weight: 500; font-size: 20px; margin: 0 0 12px; line-height: 1.2; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.sub { color: var(--mute); margin: 4px 0 18px; font-size: 14px; }
.muted { color: var(--mute); }
.small { font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }
.grid { display: grid; gap: 12px; }
.grid.k { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid.k { grid-template-columns: repeat(3, 1fr); } .grid.two { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1000px) { .grid.k { grid-template-columns: repeat(6, 1fr); } .grid.cards { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }
.section { margin-top: 28px; }
.section > h2 { display: flex; align-items: center; gap: 10px; }
.count { background: var(--sunken); color: var(--ink2); font-family: var(--font); font-size: 11.5px; font-weight: 600; border-radius: 20px; padding: 1px 9px; font-variant-numeric: tabular-nums; }
.gold-rule { height: 2px; width: 96px; background: linear-gradient(90deg, var(--red), transparent); }
html[dir="rtl"] .gold-rule { background: linear-gradient(270deg, var(--red), transparent); }
.login .hero .gold-rule { background: linear-gradient(90deg, #fff, transparent); }
html[dir="rtl"] .login .hero .gold-rule { background: linear-gradient(270deg, #fff, transparent); }
.rise > * { animation: rise .4s cubic-bezier(.22,1,.36,1) backwards; }
.rise > *:nth-child(2) { animation-delay: 40ms; } .rise > *:nth-child(3) { animation-delay: 80ms; } .rise > *:nth-child(4) { animation-delay: 120ms; }
.rise > *:nth-child(5) { animation-delay: 160ms; } .rise > *:nth-child(n+6) { animation-delay: 200ms; }

/* ---------- KPI tiles */
.kpi { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 13px; text-decoration: none; display: block; cursor: pointer;
  box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s, transform .15s; }
.kpi:hover { border-color: #e4b3b5; box-shadow: var(--shadow-raised); }
.kpi b { display: block; font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.kpi span { display: block; font-size: 12.5px; color: var(--mute); font-weight: 500; margin-top: 8px; }
.kpi.alert b { color: var(--bad); }
.kpi.on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.kpi.on::after { content: ""; position: absolute; inset-inline: 16px; bottom: -1px; height: 2px; background: var(--gold); border-radius: 2px; }

/* ---------- chips, pills */
.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; border-radius: 20px; padding: 0 9px; white-space: nowrap; background: var(--sunken); color: var(--ink2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.info { background: var(--info-soft); color: var(--info); }
.pill.dark { background: var(--ink); color: #fff; } .pill.demo { background: #ede7f6; color: #5b3b8c; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 8px 14px; border-radius: 22px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 500; cursor: pointer; font-size: 14px; transition: border-color .15s, background .15s; }
.chip:hover { border-color: #e4b3b5; }
.chip.on { border-color: var(--red); background: var(--red-soft); color: var(--red-d); font-weight: 600; }

/* ---------- buttons + forms */
.btn { min-height: 44px; padding: 10px 16px; border-radius: var(--r-s); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 14px; box-shadow: var(--shadow); transition: background .15s, border-color .15s; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-hover); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.dark:hover { background: var(--ink2); }
.btn.ghost { border-color: transparent; box-shadow: none; color: var(--ink2); background: transparent; }
.btn.ghost:hover { background: var(--sunken); }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.btn.block { width: 100%; }
.btn.big { min-height: 52px; font-size: 15.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }
label.f { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--ink2); }
label.f small { font-weight: 400; color: var(--mute); }
.input, select.input, textarea.input { width: 100%; min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r-s); padding: 10px 12px; background: var(--surface); font-size: 16px;
  box-shadow: inset 0 1px 1px rgb(10 10 12 / .03); transition: border-color .15s, box-shadow .15s; }
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgb(184 18 26 / .16); }
.field + .field { margin-top: 16px; }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--red); }
.err { background: var(--bad-soft); color: var(--bad); border-radius: var(--r-s); padding: 10px 12px; font-weight: 600; font-size: 14px; }
.okbox { background: var(--ok-soft); color: var(--ok); border-radius: var(--r-s); padding: 10px 12px; font-weight: 600; }
.note { background: var(--warn-soft); color: #6b4a00; border-radius: var(--r-s); padding: 10px 12px; font-size: 14px; }
.info { background: var(--info-soft); color: var(--info); border-radius: var(--r-s); padding: 10px 12px; font-size: 14px; }
.steps { counter-reset: s; }
.step { position: relative; padding-inline-start: 46px; }
.step::before { counter-increment: s; content: counter(s); position: absolute; inset-inline-start: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff;
  font-family: var(--display); font-weight: 600; display: grid; place-items: center; font-size: 15px; }

/* ---------- project cards */
.pcard { display: grid; grid-template-columns: 92px 1fr; gap: 14px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .2s, transform .2s; }
.pcard:hover { border-color: #e4b3b5; box-shadow: var(--shadow-raised); transform: translateY(-1px); }
.pcard .cover { width: 92px; height: 92px; border-radius: 10px; background: var(--sunken) center/cover no-repeat; display: grid; place-items: center; color: var(--faint); font-size: 11px; text-align: center; padding: 6px; }
.pcard .cover:empty { padding: 0; }
.pcard .cover svg { width: 26px; height: 26px; opacity: .55; }
.pcard h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.2; }
.pcard .meta { font-size: 12.5px; color: var(--mute); margin-top: 4px; }
.bar { height: 6px; background: var(--sunken); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red-d), var(--red)); border-radius: 6px; }
html[dir="rtl"] .bar i { background: linear-gradient(270deg, var(--red-d), var(--red)); }
.bar.planned { position: relative; }
.basis { font-size: 12px; color: var(--mute); margin-top: 4px; }
.flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- lists */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.item { display: flex; gap: 12px; align-items: flex-start; }
.item .grow { flex: 1; min-width: 0; }
.item a.title { font-weight: 600; text-decoration: none; }
.item a.title:hover { color: var(--gold-deep); }
.when { font-size: 12.5px; color: var(--mute); white-space: nowrap; }

/* ---------- tabs */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin: 18px -16px 16px; padding-inline: 16px; scrollbar-width: none; position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top)); background: var(--canvas); z-index: 10; padding-top: 8px; }
@media (min-width: 900px) { .tabs { top: 0; margin-inline: 0; padding-inline: 0; } }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 20px; text-decoration: none; font-weight: 500; font-size: 13.5px; color: var(--ink2); background: var(--surface); border: 1px solid var(--line); transition: border-color .15s; }
.tabs a:hover { border-color: #e4b3b5; }
.tabs a.on { background: var(--red); color: #fff; border-color: var(--red); }
.tabs a.on .count { background: #fff; color: var(--red-d); }
.tabs a .count { margin-inline-start: 6px; }

/* ---------- media */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--sunken); cursor: pointer; border: 0; padding: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.thumb:hover img { transform: scale(1.04); }
.thumb .vid { position: absolute; inset: auto 6px 6px auto; background: rgba(10,10,12,.7); color: #fff; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 6px; }
html[dir="rtl"] .thumb .vid { inset: auto auto 6px 6px; }
.thumb .sel { position: absolute; inset: 6px auto auto 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-size: 11px; text-align: center; padding: 6px; }
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ph-item figcaption { font-size: 12px; color: var(--mute); margin-top: 5px; line-height: 1.3; }

.uploads { display: grid; gap: 10px; }
.up { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.up .pv { width: 64px; height: 64px; border-radius: 8px; background: var(--sunken) center/cover; display: grid; place-items: center; font-size: 11px; color: var(--mute); overflow: hidden; }
.up .pv video { width: 100%; height: 100%; object-fit: cover; }
.up .name { font-weight: 600; font-size: 13.5px; word-break: break-all; }
.up .st { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.up .prog { height: 6px; background: var(--sunken); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.up .prog i { display: block; height: 100%; background: var(--red); transition: width .2s; }
.up.failed { border-color: var(--bad); background: #fff8f7; }
.up.done .st { color: var(--ok); }
.up.failed .st { color: var(--bad); }

/* ---------- lightbox */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(10,10,12,.96); display: flex; flex-direction: column; color: #fff; animation: fade-in .18s ease-out; }
.lb .bar2 { display: flex; gap: 8px; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
.lb .body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.lb .body img, .lb .body video { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 6px; }
.lb .body.compare { grid-template-columns: 1fr 1fr; gap: 8px; }
.lb .body.compare figure { margin: 0; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.lb .body.compare figure img { flex: 1; min-height: 0; }
.lb .meta { padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); font-size: 13.5px; color: #d6d2d3; }
.lb .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); box-shadow: none; }
.lb .btn:hover { background: rgba(255,255,255,.08); }

/* ---------- modal sheet */
.sheet-bg { position: fixed; inset: 0; z-index: 90; background: rgb(10 10 12 / .45); display: flex; align-items: flex-end; justify-content: center; animation: fade-in .18s ease-out; }
.sheet { background: var(--surface); width: 100%; max-width: 640px; max-height: 92dvh; overflow: auto; border-radius: 18px 18px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-pop); animation: sheet-in .26s cubic-bezier(.22,1,.36,1); }
@media (min-width: 700px) { .sheet-bg { align-items: center; } .sheet { border-radius: 18px; animation-name: pop; } }
.sheet h2 { margin-bottom: 14px; }

/* ---------- tables (admin/import) */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); font-weight: 600; }
.scroll-x { overflow-x: auto; }

/* ---------- login: black brand panel + parchment form */
.login { min-height: 100dvh; display: grid; background: var(--canvas); }
@media (min-width: 1000px) { .login { grid-template-columns: 1.1fr 1fr; } }
.login .hero { position: relative; overflow: hidden; background: linear-gradient(150deg, #c4151e 0%, #a10f17 55%, #7c0a10 100%); color: #fff; padding: calc(24px + env(safe-area-inset-top)) 22px 30px; }
.login .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(255,255,255,.14), transparent 55%); }
.login .hero .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); inset-inline-end: -96px; bottom: -96px; width: 420px; height: 420px; display: none; }
.login .hero .ring.r2 { inset-inline-end: -40px; bottom: -40px; width: 280px; height: 280px; border-color: rgba(255,255,255,.1); }
.login .hero > * { position: relative; }
.login .hero img { width: 170px; height: auto; }
.login .hero .claim { font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.08; margin: 24px 0 8px; }
.login .hero .lead { color: rgba(255,255,255,.86); font-size: 14px; margin: 0; max-width: 46ch; }
.login .hero .gold-rule { margin-top: 20px; }
.login .hero ul { display: none; list-style: none; padding: 0; margin: 24px 0 0; }
.login .hero li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.9); font-size: 15px; margin-top: 12px; }
.login .hero li svg { width: 20px; height: 20px; color: #fff; flex: none; opacity: .9; }
.login .hero .motto { display: none; margin: 16px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
@media (min-width: 1000px) {
  .login .hero { display: flex; flex-direction: column; justify-content: space-between; padding: 48px; }
  .login .hero .ring { display: block; }
  .login .hero img { width: 230px; }
  .login .hero .claim { font-size: 48px; margin-top: 0; }
  .login .hero ul, .login .hero .motto { display: block; }
  .login .hero li { display: flex; }
  .login .hero .gold-rule { margin-top: 32px; }
}
.login .formside { display: flex; align-items: flex-start; justify-content: center; padding: 30px 20px; }
@media (min-width: 1000px) { .login .formside { align-items: center; } }
.login .box { width: 100%; max-width: 400px; }
.login .box h1 { font-size: 30px; }
.login .tag { color: var(--mute); margin: 6px 0 22px; font-size: 14px; }
.login .box .card { padding: 22px 20px; }
.login .help { margin-top: 16px; font-size: 12.5px; color: var(--mute); }

.toast { position: fixed; inset-inline: 16px; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); z-index: 120; max-width: 480px; margin: 0 auto; background: var(--ink); color: #fff;
  border: 1px solid var(--ink); border-radius: 12px; padding: 12px 16px; font-weight: 500; font-size: 14px; box-shadow: var(--shadow-pop); animation: pop .16s ease-out; }
.toast::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff5a60; margin-inline-end: 10px; vertical-align: middle; }
.toast.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.toast.bad::before { background: #fff; }
@media (min-width: 900px) { .toast { bottom: 24px; inset-inline-start: calc(var(--side-w) + 16px); } }
.empty { text-align: center; color: var(--mute); padding: 32px 10px; }
.history li { font-size: 14px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 14.5px; }
.kv dt { color: var(--mute); font-weight: 500; } .kv dd { margin: 0; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* user-entered text keeps its own direction (English notes inside the Arabic layout and vice versa) */
.ut { unicode-bidi: plaintext; }
.filters { margin-bottom: 14px; }
.filters summary { cursor: pointer; font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface); list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters[open] summary { margin-bottom: 10px; }
.filters .row .input { max-width: 240px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .input { width: auto; min-width: 180px; min-height: 40px; padding: 6px 12px; font-size: 14px; }
@media (max-width: 899px) {
  .hide-m { display: none !important; }
  .toolbar { gap: 8px; margin-bottom: 14px; }
  .toolbar .input { flex: 1 1 140px; min-width: 0; font-size: 15px; }
  .toolbar .check { min-height: 32px; font-size: 13.5px; }
  .grid.k { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kpi { padding: 11px 11px 10px; }
  .kpi b { font-size: 27px; }
  .kpi span { font-size: 11.5px; margin-top: 6px; line-height: 1.25; }
  .pcard { grid-template-columns: 72px 1fr; gap: 12px; }
  .pcard .cover { width: 72px; height: 72px; }
  .pcard h3 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ======================================================= project page (header, main tabs, sections) */
.phead { margin-bottom: 4px; }
.back { display: inline-flex; align-items: center; gap: 2px; margin: -4px 0 10px -4px; color: var(--mute); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.back svg { width: 18px; height: 18px; }
.back:hover { color: var(--red); }
html[dir="rtl"] .back svg, html[dir="rtl"] .morelist svg, html[dir="rtl"] .calhead svg { transform: scaleX(-1); }
.phead-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pmeta { margin: 6px 0 0; color: var(--mute); font-size: 14px; }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.pstat { background: var(--surface); padding: 11px 14px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pstat > span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.pstat b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstat .pill { align-self: flex-start; }
.bar.thin { height: 4px; margin-top: 2px; }
.attn { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: var(--r-s); background: var(--bad-soft); color: var(--red-d); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.attn svg { width: 17px; height: 17px; flex: none; }
.attn:hover { background: #f8dcdc; }
@media (max-width: 640px) {
  .pstats { grid-template-columns: 1fr 1fr; }
  .phead h1 { font-size: 27px; }
}

.ptabs { position: sticky; top: calc(var(--top-h) + 3px + env(safe-area-inset-top)); z-index: 12; display: flex; gap: 4px; margin: 18px -16px 16px; padding: 8px 16px;
  background: rgb(246 244 242 / .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .ptabs { top: 0; margin-inline: 0; padding-inline: 0; padding-block: 12px 10px; } }
.ptab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: var(--ink2); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.ptab svg { width: 18px; height: 18px; opacity: .7; }
.ptab:hover { background: var(--surface); border-color: var(--line); }
.ptab.on { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 3px 10px -3px rgb(184 18 26 / .45); }
.ptab.on svg { opacity: 1; }
.ptab em { font-style: normal; font-size: 11.5px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--sunken); color: var(--ink2); font-variant-numeric: tabular-nums; }
.ptab.on em { background: rgb(255 255 255 / .22); color: #fff; }
.ptab em.hot { background: var(--red); color: #fff; }
@media (max-width: 899px) { .ptab { padding: 0 12px; font-size: 13.5px; } }
.morelist { display: flex; flex-direction: column; }
.morelist a { display: flex; align-items: center; gap: 10px; padding: 14px 4px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 15.5px; font-weight: 500; }
.morelist a:last-child { border-bottom: 0; }
.morelist a span { flex: 1; }
.morelist a em { font-style: normal; font-size: 12px; font-weight: 600; background: var(--red); color: #fff; border-radius: 10px; padding: 1px 8px; }
.morelist a svg { width: 18px; height: 18px; color: var(--faint); }
.morelist a.on { color: var(--red); }

.tabbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tabbar .chips { gap: 6px; }
.tabbar .chip { min-height: 36px; padding: 5px 14px; font-size: 13.5px; }
.chip .count { margin-inline-start: 4px; }
.chip.on .count { background: #fff; color: var(--red-d); }
.input.slim { width: auto; min-height: 36px; padding: 4px 10px; font-size: 13.5px; max-width: 220px; }
.btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.filterpanel { margin-bottom: 14px; padding: 12px; }
.filterpanel .input { width: auto; min-height: 40px; font-size: 14px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.linkbtn:hover { color: var(--red); }
.emptybox { text-align: center; padding: 40px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--r); color: var(--mute); background: rgb(255 255 255 / .5); }
.emptybox > svg { width: 34px; height: 34px; color: var(--faint); }
.emptybox p { margin: 10px auto 16px; max-width: 46ch; font-size: 14px; }

/* updates feed */
.feed { display: grid; gap: 12px; }
.upd { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.upd.old { opacity: .6; }
.upd-head { display: flex; align-items: flex-start; gap: 10px; }
.upd-head .grow { flex: 1; min-width: 0; }
.upd-head .avatar { width: 36px; height: 36px; font-size: 12.5px; background: var(--red); }
.upd-head .area { display: inline-block; margin-inline-start: 8px; font-size: 12px; font-weight: 600; color: var(--red-d); background: var(--red-soft); border-radius: 6px; padding: 1px 7px; }
.upd-text { font-size: 15px; line-height: 1.55; }
.upd .review { gap: 8px; }
.upd .review .input { flex: 1; min-width: 180px; min-height: 38px; font-size: 14px; }
.mgrid { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; grid-template-columns: repeat(3, 1fr); max-width: 560px; }
.mgrid.n1 { grid-template-columns: 1fr; max-width: 520px; }
.mgrid.n1 .thumb { aspect-ratio: 4 / 3; }
.mgrid.n2 { grid-template-columns: 1fr 1fr; }
.mgrid .thumb { border-radius: 0; }
.thumb[data-more]::after { content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center; background: rgb(20 18 21 / .55); color: #fff; font-size: 20px; font-weight: 600; }

/* photo gallery by day */
.dgroup + .dgroup { margin-top: 22px; }
.dhead { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-family: var(--display); font-weight: 500; font-size: 18px; }
.dhead span { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--mute); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
@media (max-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 3px; } .gallery .thumb { border-radius: 4px; } }

/* drawings + quotation cards */
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
@media (max-width: 640px) { .dgrid { grid-template-columns: 1fr 1fr; gap: 10px; } }
.dcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s, border-color .15s; }
.dcard:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); border-color: #e4b3b5; }
.dthumb { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--sunken); overflow: hidden; border-bottom: 1px solid var(--line); }
.dthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fileic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--faint); }
.fileic svg { width: 44px; height: 44px; }
.fileic b { font-size: 12px; letter-spacing: .08em; color: var(--mute); }
.latest, .lock { position: absolute; top: 8px; inset-inline-start: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: 3px 8px; }
.latest { background: var(--red); color: #fff; }
.lock { background: var(--ink); color: #fff; }
.dinfo { padding: 10px 12px 2px; display: grid; gap: 2px; min-width: 0; }
.dinfo b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dacts { display: flex; justify-content: flex-end; gap: 2px; padding: 0 6px 6px; }
.iconbtn.sm { width: 34px; height: 34px; color: var(--mute); }
.iconbtn.sm svg { width: 18px; height: 18px; }
.iconbtn.sm:hover { color: var(--red); background: var(--red-soft); }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-s); color: var(--mute); cursor: pointer; font-weight: 500; position: relative; }
.dropzone:hover { border-color: var(--red); color: var(--red); }
.dropzone svg { width: 26px; height: 26px; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* quotation money tiles */
.lockline { margin-bottom: 14px; }
.money { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 760px) { .money { grid-template-columns: 1fr 1fr; } .money .big { grid-column: 1 / -1; } }
.mtile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mtile span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.mtile b { font-family: var(--display); font-weight: 500; font-size: 22px; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtile.big b { font-size: 28px; }
.mtile small { color: var(--mute); font-size: 12px; }
.mtile.due b { color: var(--red); }

/* calendar */
.calwrap { display: grid; gap: 16px; }
@media (min-width: 1000px) { .calwrap { grid-template-columns: minmax(0, 420px) 1fr; align-items: start; } .calcard { position: sticky; top: 72px; } }
.calcard { padding: 14px; }
.calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calhead b { font-family: var(--display); font-weight: 500; font-size: 19px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calgrid.wd span { text-align: center; font-size: 11px; font-weight: 600; color: var(--mute); padding: 4px 0; text-transform: uppercase; }
.cday { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 14px; font-weight: 500; cursor: pointer; display: grid; place-items: center; padding: 0; font-variant-numeric: tabular-nums; transition: border-color .12s; }
.cday:hover { border-color: #e4b3b5; }
.cday.works { background: #fdf3f3; border-color: #f1d3d4; }
.cday.past { color: var(--mute); }
.cday.today { box-shadow: 0 0 0 2px rgb(184 18 26 / .45); }
.cday.sel { background: var(--red); border-color: var(--red); color: #fff; }
.cday i { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.cday u, .legend u { display: inline-block; width: 6px; height: 6px; border-radius: 50%; text-decoration: none; }
.d-upd { background: var(--info); } .d-done { background: var(--ok); } .d-due { background: #d98a00; } .d-insp { background: var(--ink); border-radius: 1px !important; transform: rotate(45deg); }
.d-works { width: 10px !important; height: 10px !important; border-radius: 3px !important; background: #fdf3f3; box-shadow: inset 0 0 0 1px #f1d3d4; }
.cday.sel u { box-shadow: 0 0 0 1.5px #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 11.5px; color: var(--mute); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.daypanel { display: grid; gap: 12px; scroll-margin-top: 70px; }
.dline { margin: 8px 0 0; font-size: 14px; }
.dline.ok { color: var(--ok); } .dline.due { color: #9a6200; }

/* project cards (lists + dashboard) */
.pcard .pbody { min-width: 0; display: flex; flex-direction: column; }
.pcard .ptop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pcard .ptop .pill { flex: none; }
.pprog { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pprog .bar { flex: 1; margin: 0; }
.pprog b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--mute); }
.attn-dot { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--warn); }
.attn-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.attn-dot.bad { color: var(--red); }
.attn-dot.ok { color: var(--ok); }

/* ======================================================= materials: lists, BOQ, orders, delivery notes */
.grid.k3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .grid.k3 { grid-template-columns: 1fr 1fr 1fr; } }
.kpi em.urg { font-style: normal; color: var(--red); font-weight: 700; }
.lrows { display: grid; gap: 8px; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.lrow:hover { border-color: #e4b3b5; box-shadow: var(--shadow-raised); }
.lrow.hot { border-inline-start: 4px solid var(--red); }
.lrow > svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
html[dir="rtl"] .lrow > svg { transform: scaleX(-1); }
.lic { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; }
.lic svg { width: 20px; height: 20px; }
.lmain { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ltop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ltop b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ltext { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boqbar { margin-bottom: 12px; gap: 8px; }
.boqbar .grow { flex: 1; }
.table.boq td, .table.boq th, .table.doc td, .table.doc th { padding: 8px 10px; }
.table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table.boq tr.sec td { background: var(--sunken); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.table.boq tr.sub td { font-weight: 600; color: var(--mute); font-size: 13px; }
.table.boq tr.editable { cursor: pointer; }
.table.boq tr.editable:hover td { background: var(--hover); }
.table.boq .cb { width: 34px; }
.table.boq .cb input { width: 18px; height: 18px; accent-color: var(--red); }
.table tfoot td { font-weight: 700; border-top: 2px solid var(--ink); }
.okc { color: var(--ok); font-weight: 600; }
.warnc { color: #9a6200; font-weight: 600; }
.lines { display: grid; gap: 8px; }
.line { display: grid; grid-template-columns: 1fr 90px 90px 36px; gap: 6px; align-items: center; position: relative; }
.line .input { min-height: 42px; font-size: 15px; }
.boqtag { position: absolute; top: -7px; inset-inline-start: 10px; font-size: 9.5px; font-weight: 700; background: var(--ink); color: #fff; border-radius: 4px; padding: 0 5px; }
@media (max-width: 520px) { .line { grid-template-columns: 1fr 70px 70px 34px; } }
.boqpick { max-height: 55vh; overflow: auto; display: grid; gap: 2px; }
.boqpick .check { align-items: flex-start; min-height: 0; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.pline { gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.nudge { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; background: var(--surface); border: 1px solid #f1d3d4; border-radius: var(--r); box-shadow: var(--shadow); }
.nudge > svg { width: 22px; height: 22px; color: var(--red); flex: none; }
.nudge .grow { flex: 1; min-width: 0; }
.nudge b { display: block; font-size: 14px; }
.nudge span { display: block; font-size: 12.5px; color: var(--mute); }

/* document "paper": on screen it is the order / delivery note itself; printing gives an A4 letterhead copy */
.paper { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow); }
.phead-print { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 3px solid var(--red); }
.phead-print img { height: 54px; width: auto; }
.phead-print > div:not(.docno) { flex: 1; min-width: 0; display: grid; }
.phead-print b { font-family: var(--display); font-weight: 600; font-size: 22px; text-transform: uppercase; letter-spacing: .04em; }
.phead-print span { font-size: 12px; color: var(--mute); }
.docno { text-align: end; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; display: grid; }
.docno small { font-weight: 500; font-size: 12px; color: var(--mute); }
.docmeta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin: 0 0 16px; }
@media (max-width: 640px) { .docmeta { grid-template-columns: 1fr; } .paper { padding: 16px; } .phead-print img { height: 40px; } .phead-print b { font-size: 17px; } }
.docmeta div { min-width: 0; }
.docmeta dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.docmeta dd { margin: 2px 0 0; font-size: 14px; }
.signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.signs div { border-top: 1px solid var(--ink); padding-top: 6px; display: grid; min-height: 54px; }
.signs span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.signs b { font-size: 13.5px; }
.boqpaper .phead-print { display: none; }

@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; }
  .nav, .top, .no-print, .offline, #intro, .toast, .ptabs, .phead, .tabbar, .boqbar, .back, .nudge { display: none !important; }
  main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .paper { border: 0; box-shadow: none; padding: 0; margin: 0; }
  .boqpaper .phead-print { display: flex; }
  .boqpaper ~ p { display: none; }
  .table { font-size: 11.5px; }
  .table thead { display: table-header-group; }
  .table tr { break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}
a.chip { text-decoration: none; display: inline-flex; align-items: center; }

/* photos & files on orders / delivery notes */
.attgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
@media (max-width: 520px) { .attgrid { grid-template-columns: 1fr 1fr; } }
.att { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.attimg { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; background: var(--sunken); cursor: pointer; }
.attimg img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.att figcaption { padding: 6px 8px 8px; display: grid; gap: 1px; min-width: 0; }
.att figcaption span { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att figcaption small { font-size: 11px; color: var(--mute); }
.attdel { position: absolute; top: 6px; inset-inline-end: 6px; background: rgb(255 255 255 / .92); }
.pickrow { display: flex; gap: 8px; flex-wrap: wrap; }
.pickbtn { flex: 1 1 180px; min-height: 52px; cursor: pointer; }
.pickbtn svg { width: 20px; height: 20px; }
.pickgrid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pick { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--sunken); }
.pick img { width: 100%; height: 100%; object-fit: cover; }
.pick .fileic svg { width: 30px; height: 30px; }
.pick button { position: absolute; top: 4px; inset-inline-end: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgb(20 18 21 / .75); color: #fff; font-size: 12px; cursor: pointer; }
.pick small { position: absolute; inset: auto 0 0 0; background: rgb(255 255 255 / .9); font-size: 10px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip { font-size: 12px; color: var(--mute); }