/*
Theme Name: Hars Business
Description: واجهة نظام حرص للأعمال: تسجيل الدخول، لوحة المالك، التشغيل. تطوير شركة حرص الرقمية (Hars Digital).
Author: حرص الرقمية (Hars Digital)
Author URI: https://hars.sa
Version: 0.1.0
Text Domain: hars-business-theme
Requires PHP: 8.2
*/

/* Colours, fonts and radii are defined once, in assets/hb.css (the identity); this file only lays the screens out. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 700; }
a { color: var(--blue); }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ---- hazard stripe ---- */
.stripe {
	height: 8px;
	background: repeating-linear-gradient(-45deg, var(--yellow) 0 12px, var(--navy) 12px 24px);
}

/* ---- buttons / fields ---- */
.btn {
	border: 1px solid transparent; border-radius: 12px; padding: 10px 18px; font-weight: 700;
	background: var(--navy); color: #fff; min-height: 44px;
}
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--yellow); color: var(--navy); }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.danger { background: var(--red); color: #fff; }
.btn.small { padding: 6px 12px; min-height: 36px; font-size: 14px; }
.btn.block { width: 100%; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
	width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
	padding: 11px 14px; min-height: 46px;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .btn:focus-visible {
	outline: 2px solid var(--navy); outline-offset: 1px;
}
.check { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.error-text { color: var(--red); font-size: 14px; min-height: 22px; margin: 4px 0 10px; }

/* ---- login ---- */
.login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.login__brand {
	background: var(--navy); color: #fff; position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between; padding: 48px;
	background-image:
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
		radial-gradient(circle at 70% 35%, rgba(200,180,126,.22), transparent 38%);
	background-size: 140px 100%, auto;
}
.login__logo { font-weight: 700; font-size: 20px; letter-spacing: .3px; direction: ltr; text-align: end; }
.login__car {
	position: absolute; top: 28%; inset-inline-start: 58%; width: 80px; height: 110px; border-radius: 6px;
	background: var(--hb-gold-ink); border: 2px solid var(--hb-gold-ink); box-shadow: 0 0 60px rgba(200,180,126,.35);
}
.login__car::after { content: ""; position: absolute; inset: 8px 50% 8px auto; width: 2px; background: var(--navy); }
.login__tagline { font-family: var(--display); font-size: clamp(32px, 4.4vw, 58px); line-height: 1.35; margin: 0 0 12px; }
.login__sub { color: var(--hb-rail-ink); margin: 0; }
.login__form { background: var(--bg); display: flex; flex-direction: column; }
.login__form-inner { margin: auto; width: min(420px, 88%); padding: 40px 0; }
.login__title { font-family: var(--display); font-size: 36px; margin-bottom: 4px; }
.login__lead { color: var(--muted); margin: 0 0 26px; }
.login__row { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 18px; }
.login__note {
	display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 14px;
	background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 14px;
}
.login__note i { width: 34px; height: 34px; border-radius: 10px; background: var(--yellow-soft); flex: none; }
.otp-input { text-align: center; letter-spacing: 10px; font-size: 26px; direction: ltr; }
.login__foot { padding: 18px; text-align: center; color: var(--muted); font-size: 12px; }

/* ---- app shell ---- */
.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.side {
	background: var(--navy); color: var(--hb-rail-ink); padding: 20px 14px; display: flex; flex-direction: column;
	position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side__brand { display: flex; gap: 12px; align-items: center; padding: 6px 10px 22px; color: #fff; }
.side__mark { width: 40px; height: 40px; border-radius: 10px; background: var(--yellow); color: var(--navy); font-weight: 700; display: grid; place-items: center; direction: ltr; }
.side__brand b { display: block; direction: ltr; text-align: start; }
.side__brand small { color: var(--hb-rail-ink); }
.side__group { font-size: 12px; color: var(--hb-rail-ink); padding: 16px 12px 6px; }
.nav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: inherit; text-decoration: none; margin-bottom: 2px; }
.nav:hover { background: rgba(255,255,255,.06); }
.nav.is-active { background: var(--navy-2); color: #fff; box-shadow: inset -3px 0 0 var(--yellow); }
.nav.is-off { opacity: .5; pointer-events: none; }
.nav__dot { width: 8px; height: 8px; border-radius: 3px; background: currentColor; opacity: .7; }
.nav__soon { margin-inline-start: auto; font-size: 11px; background: rgba(255,255,255,.1); border-radius: 8px; padding: 1px 8px; }
.nav__badge { margin-inline-start: auto; background: var(--yellow); color: var(--navy); border-radius: 10px; font-size: 12px; padding: 0 8px; font-weight: 700; }
.side__user { margin-top: auto; background: var(--navy-2); border-radius: 14px; padding: 12px; display: flex; gap: 10px; align-items: center; }
.side__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--navy); display: grid; place-items: center; font-weight: 700; flex: none; }
.side__user small { color: var(--hb-rail-ink); display: block; }
.side__out { margin-inline-start: auto; background: none; border: 0; color: var(--hb-rail-ink); text-decoration: underline; }

.main { padding: 22px 28px 70px; min-width: 0; }
.top { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.search { flex: 1; min-width: 200px; }
.search input { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 10px 18px; }
.pill { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 8px 16px; font-size: 14px; white-space: nowrap; }
.menu-btn { display: none; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-family: var(--display); font-size: 36px; line-height: 1.2; }
.page-head p { margin: 4px 0 0; color: var(--muted); }

.card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); padding: 18px; }
.card h2 { font-size: 18px; margin-bottom: 12px; }
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }
.kpis { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.kpi small { color: var(--muted); display: block; }
.kpi b { font-size: 34px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; line-height: 1.2; margin: 4px 0; }
.kpi b em.cur { font-size: 14px; font-style: normal; font-weight: 500; margin-inline-start: 6px; color: var(--muted); }
.kpi.dark b em.cur { color: var(--hb-rail-ink); }
.kpi.dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.kpi.dark small { color: var(--hb-rail-ink); }
.kpi .bad { color: var(--red); font-weight: 700; }
.kpi.dark .good { color: var(--hb-gold-2); }

.two { grid-template-columns: 1.1fr 1fr; align-items: start; }
.approvals { border: 2px solid var(--yellow); }
.row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.row__ico { width: 40px; height: 40px; border-radius: 10px; background: var(--yellow-soft); flex: none; }
.row__txt { flex: 1; min-width: 0; }
.row__txt b { display: block; }
.row__txt small { color: var(--muted); }
.row__end { display: flex; gap: 6px; align-items: center; }
.events li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.events { list-style: none; margin: 0; padding: 0; }
.events li:first-child { border-top: 0; }
.events time { color: var(--muted); direction: ltr; }

.depts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 16px; }
.dept { text-align: start; text-decoration: none; color: inherit; display: block; }
.dept.off { opacity: .55; }
.dept i { width: 36px; height: 36px; border-radius: 10px; display: block; margin-bottom: 14px; }
.dept b { font-size: 30px; display: block; line-height: 1.2; }
.dept small { color: var(--muted); }

.empty { color: var(--muted); text-align: center; padding: 22px 8px; }

/* ---- chips ---- */
.chip { display: inline-block; border-radius: 10px; padding: 1px 10px; font-size: 12px; font-weight: 700; }
.chip.maintenance { background: var(--blue-soft); color: var(--blue); }
.chip.installation { background: var(--yellow-soft); color: var(--hb-warn); }
.chip.supply { background: var(--green-soft); color: var(--green); }
.chip.state-free { background: var(--green-soft); color: var(--green); }
.chip.state-on_site { background: var(--yellow-soft); color: var(--hb-warn); }
.chip.state-scheduled { background: var(--blue-soft); color: var(--blue); }
.chip.urgent { background: var(--red-soft); color: var(--red); }
.chip.high { background: var(--yellow-soft); color: var(--hb-warn); }

/* ---- operations board ---- */
.tabs { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.tab { border: 0; background: none; padding: 8px 16px; border-radius: 10px; color: var(--muted); }
.tab.is-active { background: var(--navy); color: #fff; }
.tab em { font-style: normal; opacity: .65; margin-inline-start: 6px; }

.ops { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.ops__side { display: flex; flex-direction: column; gap: 16px; }
.board { display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; }
.col { background: var(--hb-raise); border-radius: var(--radius); padding: 12px; min-height: 300px; }
.col__head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 10px; }
.col__head span { color: var(--muted); }
.order {
	display: block; width: 100%; text-align: start; background: var(--card); border: 1px solid var(--line);
	border-radius: 12px; padding: 12px; margin-bottom: 10px; position: relative; overflow: hidden;
}
.order:hover { box-shadow: 0 4px 14px rgba(10,16,13,.12); }
.order.is-late { border-color: var(--red); }
.order.is-late::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 8px, var(--navy) 8px 16px); }
.order__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.order__no { color: var(--muted); font-size: 12px; direction: ltr; }
.order b { display: block; }
.order small { color: var(--muted); display: block; }
.order__foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }
.order__late { color: var(--red); font-weight: 700; }
.progress { height: 8px; background: var(--bg); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 100%; background: var(--green); }

/* ---- drawer / modal ---- */
.scrim { position: fixed; inset: 0; background: rgba(10,16,13,.5); z-index: 50; }
.drawer {
	position: fixed; inset-block: 0; inset-inline-start: 0; width: min(560px, 100%); background: var(--bg);
	z-index: 51; overflow-y: auto; padding: 22px; box-shadow: 0 0 40px rgba(0,0,0,.25);
}
.modal {
	position: fixed; inset: 5% 0 auto; margin-inline: auto; width: min(560px, 94%); max-height: 90vh; overflow-y: auto;
	background: var(--bg); border-radius: 18px; padding: 22px; z-index: 51;
}
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sheet-head h2 { font-size: 22px; }
.close { background: var(--card); border: 1px solid var(--line); border-radius: 10px; width: 38px; height: 38px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.section { margin-top: 16px; }
.section h3 { font-size: 15px; margin-bottom: 8px; color: var(--muted); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.photos figure { margin: 0; }
.photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--hb-surface); }
.photos figcaption { font-size: 12px; color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sig { width: 100%; height: 200px; background: var(--hb-surface); border: 1px dashed var(--navy); border-radius: 12px; touch-action: none; display: block; }
.notice { background: var(--yellow-soft); border: 1px solid var(--hb-gold); border-radius: 12px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.toast {
	position: fixed; inset-block-end: 22px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 92%;
	background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 14px; z-index: 80;
}
.toast.bad { background: var(--red); }
.foot { margin-top: 30px; color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---- tables ---- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: start; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.is-click { cursor: pointer; }
.tbl tr.is-click:hover { background: var(--bg); }
.tbl select { max-width: 220px; }
.progress.mini { height: 6px; min-width: 70px; margin-top: 4px; }

/* ---- reps ---- */
.big { font-size: 32px; display: block; line-height: 1.2; margin: 4px 0; }
.visit-live { border: 2px solid var(--yellow); }
.outcomes { display: flex; flex-wrap: wrap; gap: 8px; }
.outcomes .tab { border: 1px solid var(--line); background: var(--card); }
.outcomes .tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip.ok { background: var(--green-soft); color: var(--green); }
.chip.muted { background: var(--bg); color: var(--muted); }

/* ---- finance ---- */
.modal.wide { width: min(920px, 96%); }
.chart { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; font-size: 13px; color: var(--muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; }
.agebar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--bg); margin: 14px 0 10px; }
.agebar i { display: block; height: 100%; }
.agerow { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.linkrow { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); text-align: start; padding-inline: 0; }
.linkrow:hover { background: var(--bg); }
.totals { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.totals > div { display: flex; justify-content: space-between; padding: 3px 0; }
.totals .grand { border-top: 2px solid var(--navy); margin-top: 6px; padding-top: 6px; font-size: 17px; }
.tbl.lines input { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.tbl.lines td { padding: 6px 4px; }
/* the reason a line at 0% is not taxed, under its description */
.tbl.lines .line-reason { display: grid; gap: 6px; margin-top: 8px; padding: 8px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg); }
.tbl.lines .line-reason small { color: var(--muted); }
.tbl.lines .line-reason select { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; }

/* ---- information technology ---- */
.kpi.is-link { cursor: pointer; }
.kpi.is-link:hover { border-color: var(--navy); }
.it-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.ibar { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.ibar > span { flex: 0 0 150px; font-size: 14px; }
.ibar > i { flex: 1; height: 8px; border-radius: 99px; background: var(--bg); position: relative; overflow: hidden; }
.ibar > i > b { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--navy); border-radius: 99px; }
.ibar > em { font-style: normal; font-weight: 700; min-width: 28px; text-align: end; }
.temp-pw { font: 700 22px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .08em; text-align: center; background: var(--bg); border: 1px dashed var(--navy); border-radius: 12px; padding: 14px; margin: 12px 0; user-select: all; }
.msg { background: var(--bg); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.msg small { color: var(--muted); }
.msg.mine { background: var(--blue-soft); }
.msg.internal { background: var(--yellow-soft); border: 1px solid var(--hb-gold); }
.msg.event { background: transparent; color: var(--muted); font-size: 13px; padding: 2px 4px; }
@media (max-width: 900px) { .it-grid { grid-template-columns: 1fr; } .ibar > span { flex-basis: 110px; } }

/* ---- whatsapp customers and the auto-reply ---- */
.bad-text { color: var(--red); }
.wa-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wa { display: grid; grid-template-columns: 320px minmax(0, 1fr) 280px; gap: 16px; align-items: stretch; }
.wa-list, .wa-thread { padding: 0; display: flex; flex-direction: column; height: calc(100vh - 240px); min-height: 540px; overflow: hidden; }
.wa-side { display: flex; flex-direction: column; gap: 16px; height: calc(100vh - 240px); min-height: 540px; overflow-y: auto; }
.wa-list__bar { padding: 12px; border-bottom: 1px solid var(--line); }
.wa-list__bar input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; }
.wa-items { overflow-y: auto; flex: 1; }
.wa-item { display: flex; gap: 12px; width: 100%; text-align: start; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; }
.wa-item:hover { background: var(--bg); }
.wa-item.is-active { background: var(--hb-gold-wash); box-shadow: inset -4px 0 0 var(--yellow); }
.wa-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; color: var(--navy); }
.wa-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-item__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wa-item__top time { color: var(--muted); font-size: 12px; flex: none; }
.wa-item__txt { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.wa-unread { background: var(--green); color: #fff; border-radius: 99px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 12px; font-style: normal; padding: 0 6px; }
.wa-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 1px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.wa-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wa-chip.muted { background: var(--bg); color: var(--muted); }
.wa-chip.blue { background: var(--blue-soft); color: var(--blue); }
.wa-chip.warn { background: var(--yellow-soft); color: var(--hb-warn); }
.wa-chip.bad { background: var(--red-soft); color: var(--red); }
.wa-chip.ok { background: var(--green-soft); color: var(--green); }
.wa-chip.teal { background: var(--hb-ok-bg); color: var(--hb-info); }

.wa-thread { background: var(--card); }
.wa-head { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wa-head__who { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.wa-head__who small { color: var(--muted); direction: ltr; unicode-bidi: isolate; }
.wa-head__act { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.wa-head__act .btn { display: inline-flex; gap: 6px; align-items: center; }
.wa-back { display: none; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; width: 38px; height: 38px; place-items: center; }
.wa-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--hb-raise); }
.wa-msg { max-width: 82%; border-radius: 14px; padding: 10px 14px; border: 1px solid var(--line); background: var(--hb-surface); align-self: flex-end; }
.wa-msg.out { align-self: flex-start; }
.wa-msg.menu { background: var(--yellow-soft); border-color: var(--hb-gold); }
.wa-msg.ai { background: var(--blue-soft); border-color: var(--hb-info-bg); }
.wa-msg.staff { background: var(--green-soft); border-color: var(--hb-ok-bg); }
.wa-who { display: block; font-size: 12px; margin-bottom: 2px; }
.wa-msg.menu .wa-who { color: var(--hb-warn); }
.wa-msg.ai .wa-who { color: var(--blue); }
.wa-msg.staff .wa-who { color: var(--green); }
.wa-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-meta { display: flex; gap: 8px; justify-content: flex-start; align-items: center; font-size: 12px; color: var(--muted); margin-top: 4px; }
.wa-ticks.read { color: var(--blue); }
.wa-fail { color: var(--red); font-weight: 700; }
.wa-err { color: var(--red); font-size: 13px; margin-top: 4px; }
.wa-sys { text-align: center; }
.wa-sys span { display: inline-block; background: var(--hb-line); color: var(--muted); border-radius: 99px; padding: 2px 12px; font-size: 12px; }
.wa-doc { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.wa-tpl { color: var(--muted); display: block; }
.wa-media { color: var(--muted); font-style: normal; }
.wa-compose { border-top: 1px solid var(--line); padding: 12px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.wa-compose__row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.wa-compose__row textarea, .wa-compose__row input { flex: 1 1 100%; min-width: 160px; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-height: 46px; max-height: 140px; background: var(--card); }
.wa-compose__row .btn.primary { margin-inline-start: auto; }
.wa-compose__row .btn { display: inline-flex; gap: 6px; align-items: center; }
.wa-note { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 12px; font-size: 14px; color: var(--muted); }
.wa-compose .wa-note { margin: 0; }
.wa-note.bad { background: var(--red-soft); border-color: var(--hb-bad); color: var(--red); }
.wa-note.ok { background: var(--green-soft); border-color: var(--hb-ok-bg); color: var(--green); }
.wa-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); padding: 30px; text-align: center; }
.wa-placeholder svg { width: 40px; height: 40px; opacity: .5; }

.wa-side .card h2 { font-size: 17px; }
.wa-kv { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.wa-kv span { color: var(--muted); }
.wa-kv b { text-align: end; }
.wa-sub { font-size: 14px; color: var(--muted); margin: 12px 0 4px; }
.wa-order { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14px; }
.wa-order small { color: var(--muted); }
.wa-act { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.wa-act:first-of-type { border-top: 0; }
.wa-act__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--yellow-soft); color: var(--hb-warn); }
.wa-act__ico.answer { background: var(--blue-soft); color: var(--blue); }
.wa-act__ico.staff { background: var(--green-soft); color: var(--green); }
.wa-act__ico.fault { background: var(--red-soft); color: var(--red); }
.wa-act__ico.handoff { background: var(--hb-ok-bg); color: var(--hb-info); }
.wa-act__txt b { display: block; }
.wa-act__txt small { color: var(--muted); }

/* settings screen */
.wa-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.wa-settings { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wa-cardhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.wa-cardhead small { color: var(--muted); }
.wa-switchrow { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; }
.wa-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.wa-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.wa-switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--hb-line); transition: background .15s; }
.wa-switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--hb-surface); transition: inset-inline-start .15s; }
.wa-switch input:checked + i { background: var(--green); }
.wa-switch input:checked + i::after { inset-inline-start: 21px; }
.wa-switch input:disabled { cursor: not-allowed; }
.wa-switch input:focus-visible + i { outline: 2px solid var(--navy); outline-offset: 2px; }
.wa-flow { background: var(--bg); border-radius: 12px; padding: 14px; }
.wa-flow__welcome { background: var(--card); border: 2px solid var(--yellow); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.wa-flow__welcome textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 6px; resize: vertical; background: var(--card); }
.wa-flow__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wa-opt { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.wa-opt.is-off { opacity: .6; }
.wa-opt__head { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.wa-opt > input[type="text"] { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--card); font-weight: 700; }
.wa-opt small { color: var(--muted); }
.wa-after { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.wa-hours { display: inline-flex; gap: 8px; align-items: center; }
.wa-hours input { border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; background: var(--card); }
.wa-small { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.wa-src { display: flex; padding: 6px 0; color: var(--ink); }
.wa-src.is-locked { color: var(--muted); }
.wa-src small { color: var(--muted); }
.wa-usage { margin: 14px 0 6px; }
.wa-usage > div:first-child { display: flex; justify-content: space-between; }
.wa-usage small { color: var(--muted); }
.wa-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.wa-rule { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.wa-rule:first-of-type { border-top: 0; }
.wa-rule b { display: block; }
.wa-rule small { color: var(--muted); }
.wa-rule__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.wa-rule__ico.breakdown { background: var(--red-soft); color: var(--red); }
.wa-rule__ico.discount { background: var(--yellow-soft); color: var(--hb-warn); }
.wa-rule__ico.unknown { background: var(--blue-soft); color: var(--blue); }
.wa-copy { display: flex; gap: 8px; }
.wa-copy input { flex: 1; min-width: 0; }
.wa-steps { margin: 12px 0; padding-inline-start: 20px; color: var(--muted); font-size: 14px; }
.wa-steps li { margin: 4px 0; }
.wa-tplprev { background: var(--yellow-soft); border: 1px solid var(--hb-gold); border-radius: 12px; padding: 10px 12px; margin: 8px 0; white-space: pre-wrap; }
.wa-trybar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.wa-try { height: 340px; border-radius: 12px; border: 1px solid var(--line); margin: 10px 0; flex: none; }

@media (max-width: 1100px) {
	.wa { grid-template-columns: 320px minmax(0, 1fr); }
	.wa-side { grid-column: 1 / -1; height: auto; min-height: 0; flex-direction: row; flex-wrap: wrap; overflow: visible; }
	.wa-side > * { flex: 1 1 280px; }
	.wa-settings { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.wa { grid-template-columns: 1fr; }
	.wa-list, .wa-thread { height: calc(100vh - 200px); }
	.wa.has-active .wa-list { display: none; }
	.wa:not(.has-active) .wa-thread, .wa:not(.has-active) .wa-side { display: none; }
	.wa-back { display: inline-grid; }
	.wa-msg { max-width: 92%; }
	.wa-two { grid-template-columns: 1fr; }
	.wa-head__act .btn { flex: 1; }
	body.wa-open .page-head { display: none; }
}

/* ---- accounting link ---- */
.acc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-actions .btn { display: inline-flex; gap: 8px; align-items: center; }
.acc-strip { display: flex; align-items: center; gap: 18px; padding: 16px 20px; margin-bottom: 16px; }
.acc-end { display: flex; align-items: center; gap: 12px; flex: none; }
.acc-end small { display: block; color: var(--muted); }
.acc-logo { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: var(--yellow); font-weight: 800; font-size: 15px; flex: none; }
.acc-logo.blue { background: var(--blue-soft); color: var(--blue); }
.acc-line { flex: 1; border-top: 2px dashed var(--green); opacity: .75; min-width: 24px; }
.acc-strip.bad .acc-line { border-color: var(--red); }
.acc-strip.muted .acc-line, .acc-strip.warn .acc-line { border-color: var(--hb-rail-ink); }
.acc-pill { display: inline-flex; gap: 8px; align-items: center; border-radius: 99px; padding: 8px 18px; font-weight: 700; white-space: nowrap; flex: none; }
.acc-pill.ok { background: var(--green-soft); color: var(--green); }
.acc-pill.warn { background: var(--yellow-soft); color: var(--hb-warn); }
.acc-pill.bad { background: var(--red-soft); color: var(--red); }
.acc-pill.muted { background: var(--bg); color: var(--muted); }
.acc-note { margin: -4px 0 16px; }
.acc-kpi__head { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.acc-kpi.is-bad { border-color: var(--hb-bad); }
.acc-kpi.is-bad b { color: var(--red); }
.acc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.acc-side { display: grid; gap: 16px; }
.acc-cardhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.acc-cardhead h2 { margin-bottom: 0; }
.acc-cardhead small { color: var(--muted); }
.acc-tabs .tab { padding: 5px 12px; font-size: 14px; }
.acc-tbl td { white-space: nowrap; padding-inline: 8px; }
.acc-tbl td:nth-child(2) { white-space: normal; min-width: 90px; }
.acc-tbl td:nth-child(5) { font-size: 13px; }
.acc-tbl th { padding-inline: 8px; }
.acc-tbl tr:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.acc-more { text-align: center; padding-top: 10px; }
.acc-maplist { display: flex; flex-direction: column; }
.acc-map { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: start; width: 100%; font: inherit; }
.acc-map:last-child { border-bottom: 0; }
.acc-map.is-click { cursor: pointer; }
.acc-map.is-click:hover { background: var(--bg); }
.acc-map small { color: var(--muted); }
.acc-mapfoot { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.acc-mapfoot small { color: var(--muted); }
.acc-fail { display: flex; gap: 14px; align-items: center; border: 2px solid var(--red); background: var(--card); }
.acc-fail.is-ok { border: 1px solid var(--line); }
.acc-fail__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--red-soft); color: var(--red); }
.acc-fail.is-ok .acc-fail__ico { background: var(--green-soft); color: var(--green); }
.acc-fail__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-fail__txt small { color: var(--muted); overflow-wrap: anywhere; }
.acc-fail .btn { flex: none; }
.acc-sec { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; }
.acc-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.acc-sec h3 { font-size: 17px; margin-bottom: 8px; }
.acc-group { font-size: 15px; margin: 18px 0 6px; color: var(--navy); }
.acc-field > span small { color: var(--muted); font-weight: 400; }
.acc-switch { display: flex; margin: 10px 0; }
.acc-switch--main { margin-top: 18px; padding: 12px; background: var(--bg); border-radius: 12px; }
.acc-check { padding: 4px 0; font-size: 14px; }
.acc-check.ok b { color: var(--green); }
.acc-check.bad b { color: var(--red); }
.acc-results { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; }
.acc-result { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.acc-result:last-child { border-bottom: 0; }
.acc-result:hover { background: var(--bg); }
.acc-result.is-off { opacity: .55; cursor: not-allowed; }
.acc-result b { display: block; }
.acc-result small { color: var(--muted); }
@media (max-width: 1100px) { .acc-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
	.acc-strip { flex-wrap: wrap; justify-content: center; }
	.acc-line { display: none; }
	.acc-fail { flex-wrap: wrap; }
	/* time and entry number stay one tap away, in the row's drawer */
	.acc-tbl th:nth-child(4), .acc-tbl td:nth-child(4), .acc-tbl th:nth-child(5), .acc-tbl td:nth-child(5) { display: none; }
}

/* @@ui-begin */
/* ---- shared: alert cards, status dots, avatars, toolbars, pagers, forms ---- */
.kpi.is-alert { position: relative; overflow: hidden; border-color: var(--yellow); padding-top: 26px; }
.kpi.is-alert::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 10px, var(--navy) 10px 20px); }
.kpi small + b { margin-top: 2px; }
.kpi.is-pending { border-top: 4px solid var(--yellow); }
.st { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 1px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--bg); color: var(--muted); }
.st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.st.ok { background: var(--green-soft); color: var(--green); }
.st.warn { background: var(--yellow-soft); color: var(--hb-warn); }
.st.bad { background: var(--red-soft); color: var(--red); }
.st.blue { background: var(--blue-soft); color: var(--blue); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--blue-soft); color: var(--navy); font-weight: 700; flex: none; }
.who { display: inline-flex; align-items: center; gap: 10px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar select, .toolbar input[type="search"], .toolbar input[type="text"] { padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); min-height: 40px; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; color: var(--muted); }
.ferr { color: var(--red); display: block; font-size: 13px; margin-top: 4px; }
.ferr:empty { display: none; }
.fhint { color: var(--muted); display: block; font-size: 13px; margin-top: 4px; }
.sub { color: var(--muted); font-size: 12px; }
.good-text { color: var(--green); }
.bad-text { color: var(--red); }
.warn-text { color: var(--hb-warn); }
.blue-text { color: var(--blue); }
.back-link { color: var(--muted); font-size: 14px; text-decoration: none; }
.kv dd.num { text-align: end; }
.nav.sub { padding-inline-start: 34px; font-size: 14px; color: var(--hb-rail-ink); margin-bottom: 0; }
.nav.sub .nav__dot { width: 6px; height: 6px; }
.nav.sub.is-active { background: none; color: var(--yellow); box-shadow: none; font-weight: 700; }

/* ---- lists of lines inside forms (receipts, transfers, counts, chains) ---- */
.lines { display: grid; gap: 8px; margin: 10px 0; }
.line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.line__name { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; }
.line__name small { color: var(--muted); }
.line__f { display: flex; gap: 6px; flex-wrap: wrap; flex: 2 1 240px; }
.line__f input, .line__f select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); min-height: 40px; }
.mini { flex: 1 1 90px; min-width: 0; display: block; }
.mini > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.att-try { padding: 12px 0; border-top: 1px solid var(--line); }
.att-try:first-of-type { border-top: 0; }
.att-try b { display: block; }
.att-try small { color: var(--muted); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.pickbox { position: relative; }
.pickbox > input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); min-height: 44px; }
.pick { position: absolute; inset-inline: 0; top: 100%; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-top: 4px; box-shadow: 0 8px 24px rgba(10,16,13,.14); overflow: hidden; }
.pick:empty { display: none; }
.pick__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: start; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; }
.pick__item:hover, .pick__item:focus-visible { background: var(--bg); }
.pick__item small { color: var(--muted); }
.pick__none { padding: 10px 14px; color: var(--muted); }

/* ---- inventory ---- */
.inv-grid { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); align-items: start; }
.inv-side { align-content: start; }
.inv-ico { background: var(--blue-soft); }
.qtot { display: flex; align-items: center; gap: 10px; }
.qtot b { min-width: 34px; }
.qbar { width: 56px; height: 6px; border-radius: 99px; background: var(--bg); position: relative; overflow: hidden; display: inline-block; }
.qbar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--navy); border-radius: 99px; display: block; }
.qtot.is-low b { color: var(--red); }
.qtot.is-low .qbar i { background: repeating-linear-gradient(-45deg, var(--yellow) 0 6px, var(--navy) 6px 12px); }
.tbl th { vertical-align: bottom; }
.tbl td .sub { margin-top: 2px; }
.tbl.rows td:first-child { min-width: 170px; }
.tbl.rows th { white-space: normal; }
.tbl td.num { white-space: nowrap; }

/* ---- attendance ---- */
.att-alert { border: 2px solid var(--red); }
.checkin__btn { min-height: 56px; font-size: 18px; margin-top: 14px; }
.checkin__note, .checkin__done { margin: 10px 0 0; color: var(--muted); }
.checkin__done b { font-size: 34px; color: var(--ink); }
.me-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

/* ---- payroll ---- */
.pay-steps { padding: 14px 18px; margin-bottom: 16px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; align-items: center; }
.step { flex: 1; display: flex; gap: 10px; align-items: center; min-width: 0; }
.step:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--line); margin-inline: 4px; min-width: 16px; }
.step.is-done:not(:last-child)::after { background: var(--green); }
.step__dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--muted); font-weight: 700; flex: none; }
.step.is-done .step__dot { background: var(--green); color: #fff; }
.step.is-current .step__dot { background: var(--yellow); color: var(--navy); }
.step b { display: block; white-space: nowrap; }
.step small { color: var(--muted); display: block; }
.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 16px; align-items: start; }
.pay-sum { background: var(--navy); color: #fff; border-color: var(--navy); }
.pay-sum small { color: var(--hb-rail-ink); }
.pay-sum > b { font-size: 38px; display: flex; align-items: baseline; gap: 8px; line-height: 1.2; margin: 4px 0 12px; }
.pay-sum > b em.cur { font-size: 14px; font-style: normal; font-weight: 500; color: var(--hb-rail-ink); }
.pay-sum__row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.14); }
.notes-scroll { max-height: 380px; overflow-y: auto; }
.warn-ico { background: var(--yellow-soft); color: var(--hb-warn); display: grid; place-items: center; font-weight: 700; }
.slip__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.slip__net { border-top: 2px solid var(--navy); border-bottom: 0; font-size: 17px; margin-top: 4px; }

/* ---- contracts ---- */
.ct-link { color: var(--blue); text-decoration: none; }

@media (max-width: 1100px) {
	.inv-grid, .pay-grid { grid-template-columns: 1fr; }
	.me-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.me-grid { grid-template-columns: 1fr; }
	.steps { flex-direction: column; align-items: stretch; gap: 14px; }
	.step:not(:last-child)::after { display: none; }
	.step b { white-space: normal; }
	.pay-sum > b { font-size: 30px; }
	/* a table of rows becomes a list of small cards: every cell names its column */
	.tbl.rows thead { display: none; }
	.tbl.rows, .tbl.rows tbody { display: block; }
	.tbl.rows tr { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--card); }
	.tbl.rows td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0; text-align: end; }
	.tbl.rows td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: start; flex: none; }
	.tbl.rows td:empty, .tbl.rows td.zero { display: none; }
	.kpi.is-alert { padding-top: 24px; }
}
@media print {
	.side, .top, .foot, .toolbar, .actions, .menu-btn, .toast, .scrim, .drawer, .modal, .pager, .nav { display: none !important; }
	.app { display: block; }
	.main { padding: 0; }
	body { background: var(--hb-surface); }
	.card { break-inside: avoid; box-shadow: none; }
	.pay-sum { background: var(--hb-surface); color: #000; border: 1px solid #000; }
	.pay-sum small, .pay-sum > b em.cur { color: #333; }
	.pay-sum__row { border-color: #999; }
}

/* @@ui-end */
/* Inbox: direct messages */
.dm { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; align-items: start; }
.dm-side { padding: 8px; max-height: 72vh; overflow-y: auto; }
.dm-list { display: flex; flex-direction: column; gap: 4px; }
.dm-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: start; background: transparent; border: 0; border-radius: 10px; padding: 10px; cursor: pointer; font: inherit; color: var(--ink); }
.dm-row:hover { background: var(--bg); }
.dm-row.is-active { background: var(--blue-soft); }
.dm-row.is-unread b { font-weight: 800; }
.dm-row__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.dm-row__top time { font-size: 12px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.dm-row__dept { font-size: 12px; color: var(--muted); }
.dm-row__prev { display: flex; align-items: center; gap: 6px; }
.dm-row__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--muted); }
.dm-row.is-unread .dm-row__txt { color: var(--ink); font-weight: 700; }
.dm-badge { background: var(--navy); color: #fff; border-radius: 999px; min-width: 22px; padding: 0 7px; text-align: center; font-size: 12px; line-height: 22px; }
.dm-pane { min-height: 360px; display: flex; flex-direction: column; gap: 8px; }
.dm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-head__who { flex: 1; display: flex; flex-direction: column; min-width: 120px; }
.dm-head__who small { color: var(--muted); }
.dm-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.dm-back { display: none; }
.dm-private { margin: 0; }
.dm-msgs { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; min-height: 160px; overflow-y: auto; padding: 4px 2px; }
.dm-msg { max-width: 82%; }
.dm-msg.is-mine { align-self: flex-end; }
.dm-msg.is-deleted { align-self: flex-start; color: var(--muted); font-size: 13px; padding: 4px 8px; display: flex; gap: 8px; align-items: baseline; }
.dm-msg.is-deleted.is-mine { align-self: flex-end; }
.dm-file { margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dm-compose { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dm-compose textarea { width: 100%; min-height: 64px; resize: vertical; }
.dm-attach { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dm-chosen { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-people { max-height: 50vh; overflow-y: auto; margin-top: 8px; }
@media (max-width: 760px) {
	.dm { grid-template-columns: 1fr; }
	.dm.has-sel .dm-side { display: none; }
	.dm:not(.has-sel) .dm-pane { display: none; }
	.dm-back { display: inline-flex; }
	.dm-msg { max-width: 94%; }
}
/* @@i18n-begin: language switch, and the left-to-right (English) overrides.
   The rest of the sheet already uses logical properties (inset-inline, text-align: start/end). */
.lang-switch, .side__out { white-space: nowrap; }
.login__foot .lang-switch { display: block; margin: 0 auto 10px; }
[dir="ltr"] { --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Thmanyah Sans", "Noto Sans Arabic", sans-serif; }
[dir="ltr"] .nav.is-active { box-shadow: inset 3px 0 0 var(--yellow); }
[dir="ltr"] .wa-item.is-active { box-shadow: inset 4px 0 0 var(--yellow); }
[dir="ltr"] .login__car::after { inset: 8px auto 8px 50%; }
/* @@i18n-end */

/* ---- responsive ---- */
@media (max-width: 1100px) {
	.kpis { grid-template-columns: repeat(2, 1fr); }
	.two, .ops { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
	.login { grid-template-columns: 1fr; }
	.login__brand { min-height: 200px; padding: 24px; }
	.login__car, .login__tagline, .login__sub { display: none; }
	.app { grid-template-columns: 1fr; }
	/* The drawer hangs on the reading-start edge (right in Arabic) and slides off that side. */
	.side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 270px; z-index: 40; transform: translateX(100%); transition: transform .2s; }
	[dir="ltr"] .side { transform: translateX(-100%); }
	.side.is-open { transform: none; }
	.menu-btn { display: inline-block; }
	.main { padding: 14px 14px 60px; }
	.board { grid-template-columns: repeat(4, 80%); scroll-snap-type: x mandatory; }
	.col { scroll-snap-align: center; }
	.page-head h1 { font-size: 28px; }
}
@media (max-width: 520px) {
	.kpis { grid-template-columns: 1fr 1fr; }
	.kpi b { font-size: 24px; }
	.kv { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Internal messages and notification bell ---- */
.bell-wrap { position: relative; }
.bell { position: relative; padding: 6px 12px; font-size: 18px; line-height: 1.2; }
.bell__badge { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red, var(--hb-bad)); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.bell__badge[hidden] { display: none; }
.notif { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: min(380px, 92vw); max-height: 70vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(13, 33, 55, .18); z-index: 60; padding: 8px; }
.notif__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; }
.notif__item { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: start; background: transparent; border: 0; border-radius: 10px; padding: 10px; cursor: pointer; font: inherit; color: var(--ink); }
.notif__item:hover { background: var(--bg); }
.notif__item.is-unread { background: var(--yellow-soft); font-weight: 700; }
.notif__item time { font-size: 12px; color: var(--muted); font-weight: 400; }
.thread__list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding: 4px 2px; }
.msg { background: var(--bg); border-radius: 12px; padding: 8px 12px; max-width: 92%; align-self: flex-start; }
.msg.is-mine { background: var(--yellow-soft); align-self: flex-end; }
.msg.is-internal { border: 1px dashed var(--muted); }
.msg__head { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 4px; flex-wrap: wrap; }
.msg__head b { color: var(--ink); }
.msg__tag { background: var(--navy); color: #fff; border-radius: 8px; padding: 1px 8px; }
.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.thread__form { margin-top: 10px; }
.thread__form textarea { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; resize: vertical; }
.thread__bar { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
	.notif { position: fixed; top: 64px; inset-inline: 12px; width: auto; }
}

/* document language picker beside the print/download buttons */
select.doclang{height:36px;padding:0 10px;border:1px solid var(--hb-line);border-radius:8px;background:var(--hb-surface);color:var(--ink);font:inherit;font-size:13px}

/* HR policies: the text as written, line breaks kept */
.policy-text { white-space: pre-wrap; word-break: break-word; font: inherit; line-height: 1.8; background: var(--bg, var(--hb-raise)); border: 1px solid var(--line, var(--hb-line)); border-radius: 12px; padding: 12px 14px; margin: 10px 0; max-height: 50vh; overflow: auto; }

/* Roles and permissions matrix */
.rolemx th.c, .rolemx td.c { text-align: center; }
.rolemx td.c input { width: 18px; height: 18px; cursor: pointer; }
.rolemx td.c input:disabled { cursor: not-allowed; }
.rolemx td.is-diff { background: var(--yellow-soft); box-shadow: inset 0 0 0 1px var(--yellow); }

/* ---- General ledger ---- */
.lg-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 16px; }
.lg-kpis .kpi b { font-size: 28px; }
.kpi.is-bad { border-color: var(--hb-bad); }
.kpi.is-bad b { color: var(--red); }
.lg-toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.lg-toolbar .btn { margin-bottom: 16px; }
.lg-grow { flex: 1; min-width: 180px; }
.lg-grow2 { flex: 2; min-width: 220px; }
.lg-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.lg-filters .field { margin-bottom: 0; min-width: 130px; flex: 1; }
.lg-filters .btn, .lg-filters .check { margin-bottom: 2px; }
.lg-mine { min-height: 46px; }
.lg-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.lg-sub { color: var(--muted); font-size: 12px; font-weight: 400; display: block; }
.lg-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lg-name { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg-lock { color: var(--muted); flex: none; }
.lg-memo { display: inline-block; max-width: 340px; overflow-wrap: anywhere; }
.st.muted { background: var(--bg); color: var(--muted); }
.tbl tr.lg-group td { background: var(--hb-raise); }
.tbl tr.lg-total td { font-weight: 700; border-top: 2px solid var(--navy); background: var(--hb-raise); }
.tbl tr.lg-retained td { font-style: italic; }
.tbl tr.lg-bad td { background: var(--red-soft); }
.lg-export { display: inline-flex; gap: 6px; }
.lg-two { display: grid; grid-template-columns: 180px 1fr; gap: 12px; }
.lg-rec .tbl td { vertical-align: top; }

/* searchable choice */
.lg-pick { position: relative; }
.lg-pick > input { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; min-height: 46px; }
.lg-pick > input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.lg-pop { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 60; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(10,16,13,.18); max-height: 260px; overflow-y: auto; }
.lg-pop[hidden] { display: none; }
.lg-pop__opt { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); font: inherit; color: var(--ink); }
.lg-pop__opt:last-child { border-bottom: 0; }
.lg-pop__opt:hover, .lg-pop__opt.is-on { background: var(--blue-soft); }
.lg-pop__opt small { display: block; color: var(--muted); }
.lg-pop__none { padding: 12px 14px; color: var(--muted); }

/* journal editor */
.modal.wide { overflow: visible; max-height: none; }
.modal.wide form { max-height: calc(90vh - 90px); overflow-y: auto; padding-bottom: 6px; padding-inline-end: 4px; }
.lg-lines { margin: 6px 0 4px; }
.lg-line { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) 44px; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--line); }
.lg-line--head { color: var(--muted); font-size: 13px; padding-bottom: 4px; }
.lg-line input { width: 100%; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; min-height: 42px; }
.lg-line input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.lg-line__amt input { text-align: end; }
.lg-line label > span { display: none; }
.lg-line__acct { display: grid; gap: 6px; min-width: 0; }
.lg-party { display: grid; gap: 4px; }
.lg-party:empty { display: none; }
.lg-sum { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin: 10px 0 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.lg-sum__state { margin-inline-start: auto; font-weight: 700; padding: 3px 14px; border-radius: 99px; }
.lg-sum__state.ok { background: var(--green-soft); color: var(--green); }
.lg-sum__state.bad { background: var(--red-soft); color: var(--red); }
.btn[hidden] { display: none; }
@media (max-width: 760px) {
	.lg-line { grid-template-columns: 1fr 1fr; padding: 10px 0; }
	.lg-line--head { display: none; }
	.lg-line__acct, .lg-line__desc { grid-column: 1 / -1; }
	.lg-line label > span { display: block; font-size: 12px; color: var(--muted); }
	.lg-line__rm { grid-column: 1 / -1; }
	.lg-two { grid-template-columns: 1fr; }
	.lg-memo { max-width: none; }
	.lg-filters .field { min-width: 100%; }
	.modal.wide { inset-block-start: 2%; }
}

/* ---- Purchasing ---- */
.pu-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 16px; }
.pu-kpis .kpi b { font-size: 26px; }
.pu-kpis .kpi.is-bad { border-color: var(--hb-bad); }
.pu-kpis .kpi.is-bad b { color: var(--red); }
.pu-toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.pu-toolbar .btn { margin-bottom: 16px; }
.pu-grow { flex: 1; min-width: 180px; }
.pu-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.pu-filters .field { margin-bottom: 0; min-width: 140px; flex: 1; }
.pu-filters .btn, .pu-filters .check { margin-bottom: 2px; }
.pu-mine { min-height: 46px; }
.pu-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.pu-sub { color: var(--muted); font-size: 12px; font-weight: 400; display: block; }
.pu-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pu-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pu-inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.pu-inline .field { margin-bottom: 0; min-width: 180px; }
.pu-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tbl tr.pu-total td { font-weight: 700; border-top: 2px solid var(--navy); background: var(--hb-raise); }
.tbl tr.pu-bad td { background: var(--red-soft); }

/* searchable choice */
.pu-pick { position: relative; }
.pu-pick > input { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; min-height: 46px; }
.pu-pick > input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.pu-pop { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 60; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(10,16,13,.18); max-height: 260px; overflow-y: auto; }
.pu-pop[hidden] { display: none; }
.pu-pop__opt { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); font: inherit; color: var(--ink); }
.pu-pop__opt:last-child { border-bottom: 0; }
.pu-pop__opt:hover, .pu-pop__opt.is-on { background: var(--blue-soft); }
.pu-pop__opt small { display: block; color: var(--muted); }
.pu-pop__none { padding: 12px 14px; color: var(--muted); }

/* order editor and quantity forms */
.modal.pu-wide { overflow: visible; max-height: none; width: min(900px, 96%); }
.drawer.pu-drawer { width: min(780px, 100%); }
.pu-line--head { color: var(--muted); font-size: 13px; padding-block: 2px; border-bottom: 1px solid var(--line); }
.pu-line--head span { display: block !important; }
.modal.pu-wide form { max-height: calc(90vh - 90px); overflow-y: auto; padding-bottom: 6px; padding-inline-end: 4px; }
.pu-lines { margin: 6px 0 4px; }
.pu-line { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.1fr) 44px; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pu-line__item { display: grid; gap: 6px; min-width: 0; }
.pu-line input { width: 100%; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; min-height: 42px; }
.pu-line input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.pu-line label > span, .pu-line__sum > small { display: none; }
.pu-line__sum { display: flex; align-items: center; min-height: 42px; }
.pu-line__total { font-weight: 700; }
.pu-sum { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin: 10px 0 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.pu-sum__state { margin-inline-start: auto; font-weight: 700; padding: 3px 14px; border-radius: 99px; }
.pu-sum__state.bad { background: var(--red-soft); color: var(--red); }
.pu-sum__state.warn { background: var(--yellow-soft); color: var(--hb-warn); }
@media (max-width: 760px) {
	.pu-two { grid-template-columns: 1fr; }
	.pu-line { grid-template-columns: 1fr 1fr; padding: 10px 0; }
	.pu-line--head { display: none; }
	.pu-line__item { grid-column: 1 / -1; }
	.pu-line label > span, .pu-line__sum > small { display: block; font-size: 12px; color: var(--muted); }
	.pu-line__sum { flex-direction: column; align-items: flex-start; }
	.pu-line__rm { grid-column: 1 / -1; }
	.pu-filters .field { min-width: 100%; }
	.modal.pu-wide { inset-block-start: 2%; }
}
/* @@purchasing-css-end */




/* ---- Sales (assets/app.js block @@sales) ---- */
.sl-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sl-kpis .kpi { text-align: start; cursor: pointer; font: inherit; color: inherit; }
.sl-kpis .kpi.is-on { outline: 2px solid var(--navy); outline-offset: -2px; }
.sl-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.sl-filters .field { margin-bottom: 0; min-width: 150px; }
.sl-filters .btn { margin-bottom: 2px; }
.sl-grow { flex: 1; min-width: 200px; }
.sl-totals { margin-top: 10px; }
.sl-sub { display: block; color: var(--muted); font-size: 12px; }
.sl-terms { white-space: pre-wrap; margin: 0; }
.sl-group td { background: var(--hb-raise); font-weight: 700; }
.sl-events { list-style: none; margin: 0; padding: 0; }
.sl-events li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sl-events li:last-child { border-bottom: 0; }
.sl-events small { display: block; color: var(--muted); }
.sl-noterow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sl-noterow input[type="text"] { flex: 1; min-width: 200px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-height: 44px; }
.sl-btnend { display: flex; align-items: flex-end; padding-bottom: 16px; }

/* forms */
.sl-form { display: block; }
.sl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sl-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sl-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sl-lbl { display: block; color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.sl-seg { margin-bottom: 12px; }
.sl-check { align-self: end; min-height: 46px; }
.sl-spec { margin: 10px 0; }
.sl-spec h3, .sl-form .section h3 { margin: 0 0 8px; }
.sl-pkg { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; color: var(--ink); }
.sl-pkg small { display: block; color: var(--muted); }
.sl-settings { max-width: 560px; }

/* searchable choice */
.sl-pick { position: relative; }
.sl-pick > input { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; min-height: 46px; }
.sl-pick > input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.sl-pop { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 60; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(10,16,13,.14); max-height: 280px; overflow: auto; }
.sl-pop[hidden] { display: none; }
.sl-pop__opt { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); font: inherit; color: var(--ink); }
.sl-pop__opt:last-child { border-bottom: 0; }
.sl-pop__opt:hover, .sl-pop__opt.is-on { background: var(--blue-soft); }
.sl-pop__opt small { display: block; color: var(--muted); }
.sl-pop__none { padding: 12px 14px; color: var(--muted); }

/* lines */
.sl-lines { margin: 6px 0 4px; }
.sl-line { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.2fr) 44px; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sl-line--pkg { grid-template-columns: minmax(0, 3fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.2fr) 44px; }
.sl-line--pl { grid-template-columns: minmax(0, 4fr) minmax(0, 1.4fr) 44px; }
.sl-line--head { color: var(--muted); font-size: 13px; padding-bottom: 4px; border-bottom-width: 2px; }
.sl-line input, .sl-line select { width: 100%; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; min-height: 42px; }
.sl-line input:focus, .sl-line select:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.sl-line label > span { display: none; }
.sl-line__desc { display: grid; gap: 4px; min-width: 0; }
.sl-line__tot { text-align: end; padding-top: 10px; font-weight: 700; }
.sl-line__group { background: var(--hb-raise); font-weight: 700; padding: 6px 10px; border-radius: 8px; margin-top: 8px; }
.sl-line .ferr { grid-column: 1 / -1; }
.sl-sum { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin: 10px 0 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.sl-sum__total { font-size: 18px; margin-inline-start: auto; }

/* payment schedule */
.sl-ms__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1.2fr) 44px; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sl-ms__row input, .sl-ms__row select { width: 100%; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; min-height: 42px; }
.sl-ms__row label > span { display: none; }
.sl-ms__amt { padding-top: 10px; text-align: end; }
.sl-ms__row .ferr { grid-column: 1 / -1; }
.sl-ms__sum { margin-top: 6px; font-weight: 700; }
.sl-ms__sum.ok { color: var(--green); }
.sl-ms__sum.bad { color: var(--red); }

@media (max-width: 760px) {
	.sl-two, .sl-three, .sl-four { grid-template-columns: 1fr; }
	.sl-line, .sl-line--pkg, .sl-line--pl { grid-template-columns: 1fr 1fr; padding: 10px 0; }
	.sl-line--head { display: none; }
	.sl-line__desc { grid-column: 1 / -1; }
	.sl-line label > span, .sl-ms__row label > span { display: block; font-size: 12px; color: var(--muted); }
	.sl-line__rm { grid-column: 1 / -1; }
	.sl-ms__row { grid-template-columns: 1fr 1fr; }
	.sl-ms__row label:nth-child(2) { grid-column: 1 / -1; }
	.sl-sum__total { margin-inline-start: 0; }
	.sl-filters .field { min-width: 100%; }
	.sl-noterow input[type="text"] { min-width: 100%; }
}

/* the path of a sale: quotation -> order -> work -> invoice */
.sl-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sl-step { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; text-align: start; }
.sl-step small { display: block; color: var(--muted); font-size: 12px; }
.sl-step b { display: block; overflow-wrap: anywhere; font-size: 14px; }
.sl-step.done { border-color: var(--green); background: var(--green-soft); }
.sl-step.todo b { color: var(--muted); font-weight: 400; }
.sl-step.is-link { cursor: pointer; }
.sl-kpis--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
	.sl-chain { grid-template-columns: 1fr 1fr; }
	.sl-kpis--3 { grid-template-columns: 1fr; }
}
/* follow-up and commissions */
.sl-quote { background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; margin: 6px 0 10px; white-space: pre-wrap; }
.tbl tr.sl-total td { font-weight: 700; border-top: 2px solid var(--navy); background: var(--hb-raise); }
.tbl tr.sl-bad td { background: var(--red-soft); }
/* analytics */
.sl-files { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.sl-funnel { display: grid; gap: 12px; margin-top: 8px; }
.sl-funnel__row { display: grid; grid-template-columns: minmax(130px, 200px) 1fr minmax(120px, 190px); gap: 12px; align-items: center; }
.sl-funnel__name { font-weight: 600; }
.sl-funnel__bar { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; height: 16px; overflow: hidden; }
.sl-funnel__bar i { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.sl-funnel__n { display: grid; text-align: end; }
.sl-funnel__n small { color: var(--muted); }
@media (max-width: 640px) {
	.sl-funnel__row { grid-template-columns: 1fr; gap: 4px; }
	.sl-funnel__n { text-align: start; grid-auto-flow: column; justify-content: start; gap: 12px; align-items: baseline; }
}
/* ---- end Sales ---- */
/* ---- Banking ---- */
.bk-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 16px; }
.bk-kpis .kpi b { font-size: 26px; }
.bk-kpis .kpi.is-warn { border-color: var(--hb-gold); }
.bk-toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.bk-toolbar .btn { margin-bottom: 16px; }
.bk-grow { flex: 1; min-width: 40px; }
.bk-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.bk-filters .field { margin-bottom: 0; min-width: 160px; }
.bk-filters .btn { margin-bottom: 2px; }
.bk-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.bk-sub { color: var(--muted); font-size: 12px; font-weight: 400; display: block; }
.bk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.bk-inline .field { margin-bottom: 0; min-width: 180px; }
.bk-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.bk-list { margin: 8px 0 0; padding-inline-start: 20px; }
.bk-list li { margin: 4px 0; }
.bk-amt.is-in { color: var(--green); }
.bk-amt.is-out { color: var(--red); }

/* cash count grid */
.modal.bk-wide { width: min(640px, 96%); }
.modal.bk-wide form { max-height: calc(90vh - 90px); overflow-y: auto; padding-inline-end: 4px; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.bk-den { display: grid; grid-template-columns: 44px 1fr; gap: 4px 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.bk-den input { width: 100%; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-height: 36px; }
.bk-den input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.bk-den .num:last-child { grid-column: 1 / -1; text-align: end; }
.bk-den-total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--blue-soft); }

/* matching */
.bk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.bk-cols table input[type="checkbox"], .bk-amb input, .bk-cand input { width: 18px; height: 18px; }
.bk-sum { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin: 12px 0 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.bk-sum .btn { margin-inline-start: auto; }
.bk-even { color: var(--green); }
.bk-off { color: var(--red); }
.bk-amb { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.bk-amb:last-child { border-bottom: 0; }
.bk-amb__line { font-weight: 600; }
.bk-cand { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }

/* reconciliation */
table.bk-recon { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
table.bk-recon td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
table.bk-recon td.num { text-align: end; white-space: nowrap; }
table.bk-recon tr.bk-sub-total td { background: var(--hb-raise); border-top: 1px solid var(--navy); }
table.bk-recon tr.bk-even td, table.bk-recon tr.bk-off td { font-weight: 700; border-top: 2px solid var(--navy); }
table.bk-recon tr.bk-even td { color: var(--green); }
table.bk-recon tr.bk-off td { color: var(--red); background: var(--red-soft); }
table.bk-recon input { width: 160px; max-width: 100%; text-align: end; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 40px; }
.notice.ok { background: var(--green-soft); border-color: var(--hb-ok); }
@media (max-width: 760px) {
	.bk-two, .bk-cols { grid-template-columns: 1fr; }
	.bk-filters .field { min-width: 100%; }
	.bk-sum .btn { margin-inline-start: 0; }
}
/* @@banking-css-end */
/* ---- Cost centers ---- */
.cc-toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.cc-toolbar .field { margin-bottom: 0; min-width: 120px; }
.cc-state { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.cc-grow { flex: 1; min-width: 20px; }
.cc-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cc-export { display: inline-flex; gap: 6px; align-items: center; }
.cc-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.cc-filters .field { margin-bottom: 0; min-width: 130px; }
.cc-filters .check { margin-bottom: 8px; }
.cc-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.cc-sub { color: var(--muted); font-size: 12px; font-weight: 400; }
.cc-scope { margin: 0 0 8px; font-weight: 600; }
.cc-totals { margin: 12px 0 0; }
.cc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-list { margin: 8px 0 0; padding-inline-start: 20px; }
.cc-list li { margin: 6px 0; }
.cc-label { display: block; font-size: 13px; color: var(--muted); margin: 8px 0 6px; }
.cc-amt.is-good { color: var(--green); }
.cc-amt.is-bad { color: var(--red); }
.cc-bad { color: var(--red); margin-inline-start: 12px; font-size: 13px; }
tr.cc-total td { font-weight: 700; background: var(--hb-raise); border-top: 1px solid var(--line); }
tr.cc-sub-row td { color: var(--ink); }
.modal.cc-wide { width: min(680px, 96%); }
.modal.cc-wide form { max-height: calc(90vh - 90px); overflow-y: auto; padding-inline-end: 4px; }
.cc-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cc-month { display: grid; gap: 2px; }
.cc-month > span { font-size: 12px; color: var(--muted); }
.cc-month input { width: 100%; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-height: 38px; text-align: end; }
.cc-month input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.cc-sum { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin: 12px 0 4px; border-radius: 10px; background: var(--blue-soft); }
.cc-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border-radius: 8px; background: var(--blue-soft); color: var(--navy); font-size: 11px; }
.cc-linecc { display: grid; gap: 2px; }
.cc-linecc > span { font-size: 12px; color: var(--muted); }
.cc-linecc select { width: 100%; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; min-height: 38px; }
@media (max-width: 760px) {
	.cc-two { grid-template-columns: 1fr; }
	.cc-months { grid-template-columns: repeat(3, 1fr); }
	.cc-filters .field { min-width: 100%; }
}
/* @@costcenters-css-end */
/* @@crm-css-begin */
.crm-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.crm-kpis .kpi b { font-size: 26px; }
.crm-toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.crm-toolbar > input[type="search"] { flex: 1 1 220px; min-width: 0; }
.crm-toolbar select, .crm-toolbar input { min-height: 40px; }
.crm-toolbar .field { margin-bottom: 0; min-width: 130px; }
.crm-range { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.crm-range .field { margin-bottom: 0; }
.crm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crm-h3 { font-size: 15px; margin: 18px 0 8px; color: var(--navy); }
.crm-h3 small { color: var(--muted); font-weight: 400; }
.crm-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.crm-sub { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.crm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.crm-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.crm-inline select { min-height: 38px; }
.crm-acts { margin: 14px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.crm-anchor { margin: 0 0 12px; color: var(--muted); }
.crm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.crm-list > li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--card); }
.crm-list > li.is-click { cursor: pointer; }
.crm-list > li.is-click:hover { background: var(--bg); }
.crm-list > li .num { margin-inline-start: auto; }
.crm-act { cursor: pointer; }
.crm-act:hover { background: var(--bg); }
.crm-act.is-done, .crm-act.is-cancelled { opacity: .65; }
.crm-act.is-late { border-color: var(--hb-bad); background: var(--hb-bad-bg); }
.crm-act__k { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.crm-act__t { display: grid; min-width: 0; flex: 1 1 160px; }
.crm-act__t small { color: var(--muted); }
.crm-act__d { color: var(--muted); font-size: 13px; }
.crm-story { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.crm-story li { border-inline-start: 3px solid var(--line); padding: 2px 10px; }
.crm-story small { display: block; color: var(--muted); }
.crm-quote { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crm-quoteform { display: grid; gap: 4px; }
/* funnel bars */
.crm-bars { display: grid; gap: 8px; }
.crm-bar { display: grid; grid-template-columns: 120px 1fr 54px 110px 90px; gap: 10px; align-items: center; }
.crm-bar__name { font-weight: 700; }
.crm-bar__track { background: var(--bg); border-radius: 8px; height: 16px; overflow: hidden; }
.crm-bar__track i { display: block; height: 100%; background: var(--yellow); border-radius: 8px; min-width: 2px; }
.crm-bar__n, .crm-bar__v { text-align: end; }
.crm-bar__w.is-bad { color: var(--red); font-size: 12px; }
.crm-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.crm-flow li { background: var(--bg); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.crm-flow b { font-size: 24px; }
.crm-flow small { color: var(--muted); }
/* the board */
.crm-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.crm-col { flex: 0 0 250px; background: var(--bg); border-radius: 14px; padding: 10px; display: grid; gap: 8px; }
.crm-col header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.crm-col header small { color: var(--muted); }
.crm-col--won { background: var(--green-soft); }
.crm-col--lost { background: var(--red-soft); }
.crm-card { text-align: start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 2px; font: inherit; color: inherit; cursor: pointer; }
.crm-card:hover { border-color: var(--yellow); }
.crm-card.is-late { border-color: var(--hb-bad); }
.crm-card span, .crm-card small { color: var(--muted); font-size: 13px; }
.crm-card__amt { color: var(--ink) !important; font-weight: 700; }
/* the calendar */
.crm-cal__head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.crm-cal__head b { flex: 1; text-align: center; font-size: 17px; }
.crm-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.crm-cal__wd { text-align: center; color: var(--muted); font-size: 12px; padding: 4px 0; }
.crm-cal__day { position: relative; min-height: 76px; text-align: start; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: grid; align-content: start; gap: 2px; font: inherit; color: inherit; cursor: pointer; }
.crm-cal__day:hover { border-color: var(--yellow); }
.crm-cal__day.is-today b { background: var(--yellow); border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.crm-cal__day.is-sel { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; }
.crm-cal__day.has-late { border-color: var(--hb-bad); }
.crm-cal__n { position: absolute; bottom: 5px; inset-inline-end: 6px; background: var(--blue-soft); color: var(--blue); border-radius: 10px; font-size: 11px; padding: 0 6px; }
.crm-cal__e { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* conversion bars in reports */
.crm-pct { display: inline-grid; grid-template-columns: 70px auto; gap: 8px; align-items: center; }
.crm-pct i { display: block; height: 8px; background: var(--green); border-radius: 6px; max-width: 70px; }
.tbl tr.tot td { font-weight: 700; background: var(--bg); }
@media (max-width: 760px) {
	.crm-two { grid-template-columns: 1fr; }
	.crm-bar { grid-template-columns: 1fr 50px; }
	.crm-bar__track { grid-column: 1 / -1; order: 3; }
	.crm-bar__v, .crm-bar__w { text-align: start; }
	.crm-col { flex-basis: 78vw; }
	.crm-cal__day { min-height: 54px; padding: 4px; }
	.crm-cal__e { display: none; }
	.crm-toolbar .field, .crm-toolbar select { flex: 1 1 140px; }
}
/* @@crm-css-end */
/* @@projects-css-begin */
.prj-bar { display: inline-block; vertical-align: middle; width: 90px; height: 8px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.prj-bar i { display: block; height: 100%; background: var(--green); border-radius: 6px; }
.prj-bar.warn i { background: var(--yellow); }
.prj-bar.over i { background: var(--red); }
.prj-prog { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prj-prog small { color: var(--muted); }
.prj-prog--wide { display: flex; margin: 10px 0 14px; }
.prj-prog--wide .prj-bar { flex: 1; max-width: 360px; width: auto; }
.prj-money { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 12px; }
.prj-money .kpi b { font-size: 24px; }
.kpi.is-ok b { color: var(--green); }
.kpi.is-warn { border-color: var(--hb-gold); }
.kpi.is-warn b { color: var(--hb-warn); }
.prj-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.prj-chip { display: inline-flex; gap: 6px; align-items: center; background: var(--blue-soft); color: var(--navy); border-radius: 14px; padding: 3px 6px 3px 12px; font-size: 13px; }
.prj-chip__x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; padding: 0 6px; }
.prj-chip__x:hover { color: var(--red); }
.tbl td select { min-height: 34px; padding: 2px 6px; }
.tbl td .field { margin: 0; }
.crm-range input[type="text"], .crm-range input[type="number"] { min-width: 110px; }
@media (max-width: 760px) {
	.prj-bar { width: 70px; }
}
/* @@projects-css-end */
/* @@maintenance-css-begin */
.mt-kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.mt-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.mt-row > span { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.mt-row > b { font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.mt-left.is-warn { color: var(--hb-warn); font-weight: 600; }
.mt-left.is-bad { color: var(--red); font-weight: 600; }
.mt-pick { display: grid; gap: 6px; }
.mt-eqpick { display: grid; gap: 8px; max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.mt-eqpick .check { color: var(--ink); }
.mt-list { display: grid; gap: 10px; }
.mt-visit { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.mt-visit.is-late { border-color: var(--red); }
.mt-visit__head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.mt-visit__head b { font-size: 15px; }
.mt-visit__meta { color: var(--muted); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; }
.mt-visit__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-visit__acts .btn { min-height: 44px; }
.mt-check { display: grid; gap: 8px; }
.mt-check__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mt-check__row .seg { display: inline-flex; gap: 4px; }
.mt-check__row .seg button { min-width: 52px; min-height: 40px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; font: inherit; cursor: pointer; }
.mt-check__row .seg button.is-on.ok { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.mt-check__row .seg button.is-on.bad { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.mt-bar { display: inline-flex; width: 140px; max-width: 40%; height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; vertical-align: middle; }
.mt-bar > i { display: block; height: 100%; background: var(--muted); }
.mt-bar > i.ok { background: var(--green); }
.mt-bar > i.bad { background: var(--red); }
.mt-bar > i.warn { background: var(--hb-gold); }
.mt-bar > i.blue { background: var(--blue); }
.mt-agerow { display: grid; grid-template-columns: 170px 1fr auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mt-agerow .mt-bar { width: 100%; max-width: none; }
.mt-late { color: var(--red); }
tr.is-late td { background: var(--red-soft); }
.mt-exports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.mt-export { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mt-slas { display: flex; flex-direction: column; gap: 2px; }
.mt-bill { display: grid; gap: 8px; }
.mt-bill__head, .mt-bill__row { display: grid; grid-template-columns: 130px 1fr 80px 100px 36px; gap: 8px; align-items: center; }
.mt-bill__head { color: var(--muted); font-size: 12px; margin-top: 8px; }
.mt-sla { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.mt-sla.is-bad { color: var(--red); font-weight: 600; }
.mt-sla.is-warn { color: var(--hb-warn); font-weight: 600; }
@media (max-width: 760px) {
	.mt-kvs { grid-template-columns: 1fr; }
	.mt-eqpick { max-height: 180px; }
	.mt-check__row { grid-template-columns: 1fr; }
	.mt-agerow { grid-template-columns: 1fr auto; }
	.mt-agerow .mt-bar { grid-column: 1 / -1; order: 3; }
	.mt-exports { grid-template-columns: 1fr; }
	.mt-bill__head { display: none; }
	.mt-bill__row { grid-template-columns: 1fr 1fr; }
	.mt-bill__row > input:nth-child(2) { grid-column: 1 / -1; }
}
/* @@maintenance-css-end */
/* ---- AFQ (assets, fleet, quality) ---- */
.afq-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.afq-export { display: inline-flex; gap: 6px; align-items: center; }
.afq-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.afq-filters .field { margin-bottom: 0; min-width: 150px; }
.afq-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.afq-three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.afq-sum { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin: 10px 0; border-radius: 10px; background: var(--blue-soft); }
.afq-sum:empty { display: none; }
.afq-sum .is-good { color: var(--green); }
.afq-sum .is-bad { color: var(--red); }
.afq-note { color: var(--muted); font-size: 13px; margin: 8px 0; }
.afq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; margin-bottom: 12px; }
.afq-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.afq-kv > span { color: var(--muted); font-size: 13px; }
.modal.afq-wide { width: min(720px, 96%); }
.modal.afq-wide form, .modal.afq-wide .afq-scroll { max-height: calc(90vh - 90px); overflow-y: auto; padding-inline-end: 4px; }
tr.afq-total td { font-weight: 700; background: var(--hb-raise); border-top: 1px solid var(--line); }
.afq-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.afq-doc { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.afq-doc small { color: var(--muted); }
.afq-docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 14px; }
.afq-item { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--card); }
.afq-item.is-fail { border-color: var(--red); }
.afq-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.afq-choices .btn.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.afq-choices .btn.is-on.pass { background: var(--green); border-color: var(--green); }
.afq-choices .btn.is-on.fail { background: var(--red); border-color: var(--red); }
.afq-photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.afq-photos img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.afq-tpl-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
@media (max-width: 760px) {
	.afq-two, .afq-three, .afq-grid, .afq-docs { grid-template-columns: 1fr; }
	.afq-filters .field { min-width: 100%; }
	.afq-tpl-item { grid-template-columns: 1fr auto; }
}
/* @@afq-css-end */

/* @@pwa-begin: installable web app (PWA) and phone readiness */
/* the notch and home bar (viewport-fit=cover in index.php) */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.drawer { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
.modal { max-height: calc(90vh - env(safe-area-inset-bottom)); }
.toast { inset-block-end: calc(22px + env(safe-area-inset-bottom)); }
@media (max-width: 860px) {
	.main { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
	.side { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}
/* no accidental zoom when a field is focused on iOS (needs 16px or more) */
@media (max-width: 860px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
}
/* thumb-sized targets on touch screens */
@media (pointer: coarse) {
	.btn, .btn.small, .nav, .nav.sub, .lang-switch, .tab { min-height: 44px; }
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select { min-height: 44px !important; } /* beats the per-screen 34-42px rules */
	input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
	.side__out { min-height: 44px; min-width: 44px; }
	.close, .wa-back { width: 44px; height: 44px; }
	.mt-check__row .seg button { min-height: 44px; }
}
/* signature and photo areas: the finger draws, the page does not scroll or zoom */
canvas { touch-action: none; max-width: 100%; }
html.is-standalone body { overscroll-behavior-y: contain; }

/* install banner, install help, offline strip */
.pwa-banner { position: fixed; inset-inline: 12px; inset-block-end: calc(12px + env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--navy); color: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 28px rgba(0,0,0,.3); max-width: 520px; margin-inline: auto; }
.pwa-banner__txt { flex: 1 1 200px; font-size: 15px; line-height: 1.5; }
.pwa-modal { position: fixed; inset: 0; z-index: 90; background: rgba(10,16,13,.6); display: grid; place-items: center; padding: 14px; overflow-y: auto; }
.pwa-card { background: var(--card); color: var(--ink); border-radius: 18px; padding: 20px; width: min(520px, 100%); max-height: 100%; overflow-y: auto; }
.pwa-card h2 { margin: 0 0 6px; font-size: 20px; }
.pwa-card h3 { margin: 16px 0 4px; font-size: 16px; }
.pwa-steps { margin: 4px 0; padding-inline-start: 22px; line-height: 1.8; }
.pwa-note { font-size: 13px; color: var(--muted); line-height: 1.7; }
.pwa-link { margin: 10px 0 14px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pwa-offline { position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 95; background: var(--red); color: #fff; text-align: center; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; font-size: 14px; }
/* @@pwa-end */

/* ---- grouped sidebar (nav) ---- */
.side__sec { margin-top: 4px; }
.side__sechead { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; min-height: 40px; border-radius: 10px; color: var(--hb-rail-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.side__sechead:hover { background: rgba(255,255,255,.05); color: #fff; }
.side__sechead:focus-visible, .nav:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.side__chev { width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; margin-inline-end: 4px; flex: none; }
.side__sechead[aria-expanded="true"] .side__chev { transform: rotate(-135deg); }
.side__list { padding-inline-start: 6px; }
.side__list[hidden] { display: none; }
.side__bare { margin-bottom: 4px; }
.install-btn { min-width: 44px; }

/* ---- favourites (nav) ---- */
.nav-row { position: relative; margin-bottom: 2px; }
.nav-row .nav { margin-bottom: 0; padding-inline-end: 34px; }
.nav__star { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--hb-rail-ink); font-size: 16px; line-height: 1; padding: 6px; cursor: pointer; opacity: 0; }
.nav-row:hover .nav__star, .nav__star[aria-pressed="true"], .nav__star:focus-visible { opacity: 1; }
.nav__star[aria-pressed="true"] { color: var(--yellow); }
.fav-btn { min-width: 44px; font-size: 18px; line-height: 1; }
.fav-btn[aria-pressed="true"] { color: var(--hb-warn); }
@media (hover: none) { .nav__star { display: none; } }

/* ---- command palette ---- */
.cmdk-btn { min-width: 44px; }
.cmdk__shade { position: fixed; inset: 0; z-index: 90; background: rgba(10,16,13,.45); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 14px 0; }
.cmdk { width: min(640px, 100%); background: var(--card); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; }
.cmdk__input { border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font-size: 17px; outline: none; background: transparent; width: 100%; }
.cmdk__status { padding: 0 18px; min-height: 0; color: var(--muted); font-size: 13px; }
.cmdk__status:not(:empty) { padding: 8px 18px; }
.cmdk__list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.cmdk__group { padding: 10px 12px 4px; font-size: 12px; color: var(--muted); font-weight: 700; }
.cmdk__row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; cursor: pointer; min-height: 44px; }
.cmdk__row.is-sel { background: var(--yellow-soft); box-shadow: inset 3px 0 0 var(--yellow); }
[dir="rtl"] .cmdk__row.is-sel { box-shadow: inset -3px 0 0 var(--yellow); }
.cmdk__title { font-weight: 600; }
.cmdk__sub { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__tag { margin-inline-start: auto; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 1px 8px; }
.cmdk__hint { padding: 8px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; direction: ltr; text-align: center; }

/* ---- decisions centre ---- */
.dec-list { display: grid; gap: 8px; }
.dec-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; }
.dec-main { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.dec-kind { font-size: 12px; color: var(--muted); }
.dec-amount { font-weight: 700; }
.dec-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dec-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; margin-bottom: 14px; text-decoration: none; color: inherit; background: var(--yellow-soft); border: 1px solid var(--yellow); }
.dec-card span { color: var(--muted); font-size: 14px; }

/* ---- phone bottom bar ---- */
.tabbar { display: none; }
@media (max-width: 768px) {
	.tabbar { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 35; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(10,16,13,.08); }
	.tab-item { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; color: var(--muted); text-decoration: none; background: none; border: 0; font: inherit; font-size: 11px; cursor: pointer; }
	.tab-item.is-active { color: var(--navy); font-weight: 700; box-shadow: inset 0 3px 0 var(--yellow); }
	.tab-item:focus-visible { outline: 2px solid var(--yellow); outline-offset: -3px; }
	.tab-ico { font-size: 20px; line-height: 1; }
	.tab-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px; }
	.main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
	.toast { inset-block-end: calc(76px + env(safe-area-inset-bottom)); }
	.pwa-banner { inset-block-end: calc(68px + env(safe-area-inset-bottom)); }
}
@media print { .tabbar { display: none !important; } }
.dec-more { display: block; text-align: center; padding: 10px; color: var(--navy); font-weight: 700; text-decoration: none; }