/* KBS Real Estate v1.1 - calm, large, with real depth. Mobile first. Light theme (dark theme later). */
:root {
  --navy: #1d3557; --navy-2: #27477a; --navy-3: #3a5f96; --navy-deep: #142642;
  --gold: #c9a227; --gold-2: #e0b93a; --gold-soft: #fbf4dc;
  --bg: #eef1f6; --bg-2: #e3e8f0; --card: #ffffff; --card-2: #f7f9fc;
  --text: #15202b; --muted: #5f6b7a; --line: #dfe4ec;
  --ok: #176f41; --ok-bg: #e3f4ea; --warn: #9a6400; --warn-bg: #fff3d6; --bad: #b3261e; --bad-bg: #fde5e3; --info: #1f5fbf; --info-bg: #e5eefb;
  --radius: 18px; --radius-sm: 12px;
  --sh-ambient: 0 1px 2px rgba(21,32,43,.05), 0 2px 6px rgba(21,32,43,.05);
  --sh-key: 0 10px 24px -10px rgba(29,53,87,.28);
  --sh-lift: 0 2px 4px rgba(21,32,43,.06), 0 18px 36px -12px rgba(29,53,87,.38);
  --inner: inset 0 1px 0 rgba(255,255,255,.95);
  --fs: 18px; --fs-data: 20px;
  --font: "Manrope", "Inter", "Segoe UI", -apple-system, "Helvetica Neue", Tahoma, "Noto Sans", "Cairo", "Noto Sans Arabic", Arial, sans-serif;
  --font-ar: "Cairo", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  /* tile accents */
  --ac-buildings: #2b6cb0; --ac-tenants: #0f8a7a; --ac-contracts: #5a4fcf; --ac-cheques: #b8860b; --ac-receipts: #1b7f4b; --ac-invoices: #8e44ad;
  --ac-renewals: #d9731a; --ac-reports: #3a5f96; --ac-import: #0e7490; --ac-settings: #5f6b7a; --ac-confirm: #c77d0a; --ac-reconcile: #15803d;
}
html[data-ts="large"] { --fs: 20px; --fs-data: 22px; }
html[data-ts="xlarge"] { --fs: 22px; --fs-data: 24px; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); background: radial-gradient(1200px 600px at 20% -10%, #ffffff 0%, var(--bg) 60%); color: var(--text); font-size: var(--fs); line-height: 1.5; -webkit-text-size-adjust: 100%; min-height: 100vh; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .4rem; color: var(--navy); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; }
h1 { font-size: 1.6em; } h2 { font-size: 1.2em; } h3 { font-size: 1.05em; }
.ar { direction: rtl; unicode-bidi: embed; font-family: var(--font-ar); }
.muted { color: var(--muted); } .small { font-size: .88em; } .nowrap { white-space: nowrap; } .right { text-align: right; } .center { text-align: center; }
.num, .n, .kpi .n, td.num { font-variant-numeric: tabular-nums; }

/* ---------- shell */
.topbar { position: sticky; top: 0; z-index: 20; background: linear-gradient(90deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-2) 100%); color: #fff; display: flex; align-items: center; gap: .8rem; padding: .55rem 1rem; box-shadow: 0 4px 18px rgba(20,38,66,.35), inset 0 -1px 0 rgba(255,255,255,.08); }
.topbar .brand { display: flex; align-items: center; gap: .65rem; color: #fff; font-weight: 800; font-size: 1.05em; letter-spacing: -.01em; }
.topbar .brand img { height: 38px; width: auto; background: #fff; border-radius: 9px; padding: 3px 6px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.topbar .brand small { display: block; font-weight: 500; font-size: .74em; color: #f3dd8a; }
.topbar .spacer { flex: 1; }
.topbar .tb { color: #fff; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .65rem; border-radius: 12px; background: rgba(255,255,255,.1); font-size: .9em; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); border: 0; font-family: inherit; cursor: pointer; }
.topbar .tb:hover { background: rgba(255,255,255,.2); text-decoration: none; }
.topbar .tb svg { width: 24px; height: 24px; }
.topbar .tb .dot { position: absolute; top: -4px; right: -2px; background: var(--bad); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; font-size: .7em; display: flex; align-items: center; justify-content: center; padding: 0 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.layout { display: flex; min-height: calc(100vh - 56px); }
.rail { width: 116px; flex: 0 0 116px; background: linear-gradient(180deg, #ffffff, #f4f6fa); border-right: 1px solid var(--line); padding: .8rem .5rem; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; box-shadow: 4px 0 18px -12px rgba(29,53,87,.25); }
.rail a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .3rem; border-radius: 14px; color: var(--navy); font-size: .78em; text-align: center; margin-bottom: .3rem; line-height: 1.2; transition: background .12s, transform .12s; }
.rail a svg { width: 30px; height: 30px; }
.rail a .ar { font-size: .85em; color: var(--muted); }
.rail a:hover { background: var(--bg); text-decoration: none; transform: translateY(-1px); }
.rail a.active { background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff; box-shadow: var(--sh-key), inset 0 1px 0 rgba(255,255,255,.18); }
.rail a.active .ar { color: #d9e2f1; }
.content { flex: 1; min-width: 0; padding: 1.2rem 1.5rem 4rem; }
.tabbar { display: none; }
@media (max-width: 900px) {
  .rail { display: none; }
  .content { padding: .9rem .9rem 6.2rem; }
  .topbar { padding: .45rem .7rem; }
  .topbar .brand span { white-space: nowrap; }
  .topbar .brand small, .topbar .tb span.lbl { display: none; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); z-index: 20; box-shadow: 0 -8px 24px rgba(20,38,66,.14); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 0 .45rem; color: var(--muted); font-size: .72em; position: relative; }
  .tabbar a svg { width: 26px; height: 26px; }
  .tabbar a.active { color: var(--navy); font-weight: 800; }
  .tabbar a.active::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
}

/* ---------- tiles */
.group-h { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 .6rem; color: var(--muted); font-size: .82em; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.group-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tiles { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); margin-bottom: 1.3rem; }
.tile { --ac: var(--navy-3); background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%); border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius); padding: 1.05rem .8rem .95rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; color: var(--navy); box-shadow: var(--sh-ambient), var(--sh-key), var(--inner); transition: transform .14s ease, box-shadow .14s ease; position: relative; min-height: 150px; justify-content: center; }
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); pointer-events: none; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-ambient), var(--sh-lift), var(--inner); text-decoration: none; }
.tile:active { transform: translateY(1px); box-shadow: var(--sh-ambient), var(--inner); }
.tile .ico-badge { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ac) 14%, #fff); box-shadow: inset 0 2px 4px rgba(255,255,255,.9), 0 4px 10px -4px color-mix(in srgb, var(--ac) 45%, transparent); }
.tile .ico-badge svg { width: 36px; height: 36px; color: var(--ac); }
.tile .lbl { font-weight: 800; font-size: .98em; line-height: 1.15; }
.tile .ar { color: var(--muted); font-size: .82em; }
.tile .count { position: absolute; top: 9px; right: 10px; background: var(--ac); color: #fff; border-radius: 999px; padding: .08rem .6rem; font-size: .78em; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.tile .count.warn { background: var(--warn); } .tile .count.bad { background: var(--bad); } .tile .count.ok { background: var(--ok); }
.tile[data-accent="buildings"] { --ac: var(--ac-buildings); } .tile[data-accent="tenants"] { --ac: var(--ac-tenants); } .tile[data-accent="contracts"] { --ac: var(--ac-contracts); }
.tile[data-accent="cheques"] { --ac: var(--ac-cheques); } .tile[data-accent="receipts"] { --ac: var(--ac-receipts); } .tile[data-accent="invoices"] { --ac: var(--ac-invoices); }
.tile[data-accent="renewals"] { --ac: var(--ac-renewals); } .tile[data-accent="reports"] { --ac: var(--ac-reports); } .tile[data-accent="import"] { --ac: var(--ac-import); }
.tile[data-accent="settings"] { --ac: var(--ac-settings); } .tile[data-accent="confirm"] { --ac: var(--ac-confirm); } .tile[data-accent="reconcile"] { --ac: var(--ac-reconcile); }

/* ---------- KPI cards */
.kpis { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 1.3rem; }
.kpi { --ac: var(--navy-3); background: linear-gradient(180deg, #ffffff, #f7f9fc); border-radius: var(--radius); padding: .95rem 1.05rem .9rem; box-shadow: var(--sh-ambient), var(--sh-key), var(--inner); display: block; color: var(--text); position: relative; overflow: hidden; transition: transform .14s, box-shadow .14s; border: 1px solid rgba(255,255,255,.9); }
.kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 80%, #fff), var(--ac)); }
.kpi:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sh-ambient), var(--sh-lift), var(--inner); }
.kpi .n { font-size: 1.65em; font-weight: 800; color: var(--navy); line-height: 1.1; letter-spacing: -.02em; }
.kpi .n small { font-size: .55em; color: var(--muted); font-weight: 700; margin-right: .2em; }
.kpi .l { color: var(--muted); font-size: .85em; margin-top: .2rem; font-weight: 600; }
.kpi .sub { font-size: .8em; color: var(--muted); }
.kpi.ok { --ac: var(--ok); } .kpi.warn { --ac: var(--warn); background: linear-gradient(180deg, #fffdf6, #fff6e2); } .kpi.bad { --ac: var(--bad); background: linear-gradient(180deg, #fff9f8, #fdeeec); } .kpi.info { --ac: var(--info); }

/* ---------- cards & layout */
.page-head { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.card { background: var(--card); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--sh-ambient), var(--sh-key), var(--inner); border: 1px solid rgba(255,255,255,.9); }
.card > h2 { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.card > h2 .actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.stack { display: grid; gap: .9rem; }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff; border: 1px solid var(--navy-deep); border-radius: 13px; padding: .65rem 1.15rem; font-size: 1em; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.2; font-family: inherit; min-height: 48px; box-shadow: 0 2px 0 var(--navy-deep), 0 8px 16px -8px rgba(29,53,87,.6), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .08s, box-shadow .08s, filter .12s; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--navy-deep), 0 4px 8px -6px rgba(29,53,87,.6), inset 0 1px 0 rgba(255,255,255,.18); }
.btn svg { width: 20px; height: 20px; }
.btn.gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-color: #9c7d1c; color: #1d2430; box-shadow: 0 2px 0 #9c7d1c, 0 8px 16px -8px rgba(201,162,39,.7), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.gold:active { box-shadow: 0 0 0 #9c7d1c, inset 0 1px 0 rgba(255,255,255,.4); }
.btn.light { background: linear-gradient(180deg, #ffffff, #f3f5f9); color: var(--navy); border: 1px solid #c6cfdc; box-shadow: 0 2px 0 #c6cfdc, 0 6px 12px -8px rgba(29,53,87,.3), inset 0 1px 0 #fff; }
.btn.light:active { box-shadow: 0 0 0 #c6cfdc, inset 0 1px 0 #fff; }
.btn.danger { background: linear-gradient(180deg, #ffffff, #fff4f3); color: var(--bad); border: 1px solid #e9b8b3; box-shadow: 0 2px 0 #e9b8b3, inset 0 1px 0 #fff; }
.btn.danger:active { box-shadow: 0 0 0 #e9b8b3; }
.btn.ok { background: linear-gradient(180deg, #23995b, var(--ok)); border-color: #14603a; box-shadow: 0 2px 0 #14603a, 0 8px 16px -8px rgba(27,127,75,.6), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.wa { background: linear-gradient(180deg, #2fd16b, #1fb85a); border-color: #178a43; color: #fff; box-shadow: 0 2px 0 #178a43, 0 8px 16px -8px rgba(31,184,90,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.sm { min-height: 42px; padding: .4rem .85rem; font-size: .9em; border-radius: 11px; }
.btn.block { width: 100%; }
button.linklike { background: none; border: 0; color: var(--info); cursor: pointer; padding: 0; font: inherit; }

/* ---------- badges / status chips */
.badge { display: inline-flex; align-items: center; gap: .35em; padding: .2rem .65rem; border-radius: 999px; font-size: .78em; font-weight: 800; background: #e6eaf1; color: var(--navy); white-space: nowrap; line-height: 1.4; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.badge::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; opacity: .85; }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--info); } .badge.gold { background: var(--gold-soft); color: #7a5d05; } .badge.gray { background: #eceff3; color: var(--muted); }
.grade { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4em; height: 2.4em; border-radius: 50%; font-weight: 800; color: #fff; background: #6b7684; box-shadow: 0 3px 8px -3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.grade.ok { background: var(--ok); } .grade.warn { background: #8a5a00; } .grade.bad { background: var(--bad); }

/* ---------- tables (collapse to cards on phones) */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-data); }
th, td { padding: .6rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #f3f5f9; color: var(--muted); font-weight: 800; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; }
tbody tr:nth-child(even) td { background: #fafbfd; }
tbody tr:hover td { background: #f1f5fb; }
td.num, th.num { text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
tfoot td { font-weight: 800; background: #f3f5f9; }
td .actions { display: flex; gap: .3rem; flex-wrap: wrap; }
@media (max-width: 700px) {
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr { background: linear-gradient(180deg, #fff, #f7f9fc); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; margin-bottom: .75rem; padding: .5rem .7rem; box-shadow: var(--sh-ambient), var(--sh-key), var(--inner); }
  table.responsive tbody tr:nth-child(even) td, table.responsive tbody tr:hover td { background: transparent; }
  table.responsive td { border: 0; padding: .3rem 0; display: flex; justify-content: space-between; gap: .8rem; text-align: right; }
  table.responsive td::before { content: attr(data-label); color: var(--muted); font-size: .78em; font-weight: 800; text-align: left; flex: 0 0 40%; text-transform: uppercase; letter-spacing: .04em; }
  table.responsive td.full { display: block; text-align: left; } table.responsive td.full::before { display: none; }
  table.responsive td .actions { justify-content: flex-end; }
  table.responsive tfoot { display: block; }
}

/* ---------- forms */
.row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.row.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
label { display: block; font-size: .88em; color: var(--muted); margin-bottom: .25rem; font-weight: 700; }
label .ar { color: #6f7986; font-weight: 500; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], input[type=password], input[type=url], input[type=search], input[type=file], select, textarea {
  width: 100%; padding: .65rem .8rem; border: 1px solid #c3cbd7; border-radius: 13px; font: inherit; font-size: var(--fs-data); background: #fff; color: var(--text); min-height: 50px; box-shadow: inset 0 2px 4px rgba(21,32,43,.06), 0 1px 0 #fff;
}
textarea { min-height: 110px; resize: vertical; }
textarea.terms { min-height: 320px; font-size: .95em; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(31,95,191,.28); border-color: var(--info); }
.form-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; padding-top: .4rem; }
.check { display: flex; align-items: center; gap: .6rem; font-size: 1em; color: var(--text); font-weight: 600; }
.check input { width: 24px; height: 24px; min-height: 0; accent-color: var(--navy); }
.hint { font-size: .82em; color: var(--muted); margin-top: .25rem; }
.inline-form { display: inline; }
.inline-form select { width: auto; min-height: 42px; padding: .3rem .5rem; font-size: .9em; }
.searchbox { display: flex; gap: .5rem; align-items: center; }
.searchbox input { flex: 1; }

.flash { padding: .85rem 1.05rem; border-radius: 13px; margin-bottom: .9rem; background: var(--ok-bg); color: #145c32; border: 1px solid #b9e4c8; font-weight: 700; box-shadow: var(--sh-ambient); }
.flash.error { background: var(--bad-bg); color: #7d1f16; border-color: #f0b7b0; }
.alert { padding: .85rem 1.05rem; border-radius: 13px; margin-bottom: .9rem; border: 1px solid; box-shadow: var(--sh-ambient); }
.alert.warn { background: linear-gradient(180deg, #fffaf0, var(--warn-bg)); border-color: #f0c070; color: #6b4604; } .alert.bad { background: linear-gradient(180deg, #fff6f5, var(--bad-bg)); border-color: #f0a090; color: #7d1f16; }
.alert.info { background: linear-gradient(180deg, #f3f7fe, var(--info-bg)); border-color: #bcd3f5; color: #1b3f73; } .alert.ok { background: linear-gradient(180deg, #f0faf4, var(--ok-bg)); border-color: #b9e4c8; color: #145c32; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
dl.kv dt { color: var(--muted); font-weight: 600; } dl.kv dd { margin: 0; }
@media (max-width: 500px) { dl.kv { grid-template-columns: 1fr; gap: .1rem; } dl.kv dt { font-size: .8em; margin-top: .4rem; } }

.docs { display: flex; flex-wrap: wrap; gap: .6rem; }
.doc { border: 1px solid var(--line); border-radius: 13px; padding: .5rem .7rem; font-size: .9em; background: linear-gradient(180deg, #fff, #f7f9fc); display: flex; gap: .6rem; align-items: center; box-shadow: var(--sh-ambient); }
.doc img { height: 56px; width: 56px; object-fit: cover; border-radius: 9px; }
pre.msg { white-space: pre-wrap; background: #fafbfd; border: 1px solid var(--line); border-radius: 13px; padding: 1rem; font-family: inherit; font-size: 1em; box-shadow: inset 0 2px 4px rgba(21,32,43,.05); }
.empty { color: var(--muted); padding: 1.2rem 0; text-align: center; }
.steps { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.steps span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-size: .85em; color: var(--muted); }
.steps span.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { background: linear-gradient(180deg, #fff, #f3f5f9); border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; color: var(--navy); font-weight: 700; box-shadow: var(--sh-ambient); }
.tabs a.on { background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff; border-color: var(--navy-deep); box-shadow: var(--sh-key); }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(238,241,246,0), var(--bg) 30%); padding: .8rem 0 .4rem; }
@media (max-width: 900px) { .sticky-actions { bottom: 64px; } }
.login-wrap { max-width: 460px; margin: 6vh auto; }
.login-wrap .brandbox { text-align: center; margin-bottom: 1.2rem; }
.login-wrap .brandbox img { height: 76px; filter: drop-shadow(0 6px 10px rgba(29,53,87,.2)); }
.login-wrap .card { box-shadow: var(--sh-ambient), var(--sh-lift), var(--inner); }
.calc .bigpct { font-size: 2.4em; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.chip { display: inline-block; background: linear-gradient(180deg, #fff, #f3f5f9); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .75rem; margin: .15rem; font-size: .85em; box-shadow: var(--sh-ambient); }
.progress { height: 10px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--ok); }

/* v1.2.1 departments & permissions */
.matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.matrix{min-width:720px}
table.matrix th,table.matrix td{text-align:center;padding:.35rem .3rem}
table.matrix td:first-child,table.matrix th:first-child{text-align:left}
select.lvl{min-height:44px;font-weight:600;border-width:2px;border-radius:12px;padding:.3rem .5rem;width:100%;max-width:150px}
select.lvl-none{background:#f1f1f1;color:#777;border-color:#ddd}
select.lvl-view{background:#e7f0fb;color:#1f4e8c;border-color:#9dbce6}
select.lvl-edit{background:#e5f5ec;color:#1a6b3f;border-color:#8fd0ac}
select.lvl-approve{background:#fbf1d6;color:#7a5a00;border-color:#e2c164}
.dept-pick td{vertical-align:middle}

/* required-documents checklist */
table.checklist tr.st-missing td:first-child{border-left:4px solid #c0392b}
table.checklist tr.st-expired td:first-child{border-left:4px solid #c0392b}
table.checklist tr.st-expiring td:first-child{border-left:4px solid #d9a400}
table.checklist tr.st-received td:first-child{border-left:4px solid #2e9e5b}
table.checklist tr.st-generate td:first-child{border-left:4px solid #2b6cb0}
details.inline-details{display:inline-block}
details.inline-details summary{list-style:none;cursor:pointer}

/* v1.2.2 layout fixes: nothing may sit under the bottom nav, no horizontal scroll, no overlapping chips */
.content{padding-bottom:4rem}
@media (max-width:900px){.content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.tabbar{z-index:30}}
.page-head h1{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem}
.page-head .muted{line-height:1.9}
.page-head .grade,.card h2 .grade{min-width:1.9em;height:1.9em;font-size:.85em;margin:0 .15em}
.badge{vertical-align:middle}
.grade{vertical-align:middle}
.card,.grid-2>*,.row>*,.kpis>*,.tiles>*,.content{min-width:0}
.card{overflow-wrap:anywhere}
table.responsive td.empty{display:none}
@media (min-width:701px){table.responsive td.empty{display:table-cell}}
input[type=file]{max-width:100%;min-width:0;width:100%}
table.checklist{table-layout:fixed}
table.checklist th.col-doc{width:38%}table.checklist th.col-when{width:9%}table.checklist th.col-status{width:12%}table.checklist th.col-exp{width:11%}table.checklist th.col-act{width:30%}
@media (max-width:700px){table.checklist{table-layout:auto}}
table.checklist .row{grid-template-columns:1fr;gap:.3rem}
table.checklist .row input[type=file]{font-size:.82em}
table.checklist .src{display:block}
table.checklist td{overflow-wrap:anywhere}
.home-tables{grid-template-columns:1fr}
@media (min-width:1500px){.home-tables{grid-template-columns:1fr 1fr}}
.home-tables th:first-child,.home-tables td:first-child{white-space:nowrap}
@media (max-width:700px){.home-tables th:first-child,.home-tables td:first-child{white-space:normal}}
@media (max-width:480px){.topbar{gap:.4rem;padding:.45rem .55rem}.topbar .brand span{display:none}.topbar .brand img{height:34px}.topbar .tb{padding:.4rem .5rem}.topbar .tb svg{width:22px;height:22px}}
.alert.licence{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:center;padding:.6rem .9rem}
@media (max-width:700px){h1{font-size:1.45em}h1 .ar{font-size:.8em}}
table.timeline{table-layout:fixed}
table.timeline td:first-child{width:6em}
table.timeline td:nth-child(2){width:8em}
table.timeline td:last-child{width:5em}
@media (max-width:1100px){table.timeline{table-layout:auto}}
@media (max-width:700px){table.timeline td:first-child,table.timeline td:nth-child(2),table.timeline td:last-child{width:auto}}

/* v1.2.2 compact Home lists */
.hlists{display:grid;gap:.8rem;grid-template-columns:1fr}
@media (min-width:1100px){.hlists{grid-template-columns:1fr 1fr}}
.hlist{padding:.6rem .9rem;margin-bottom:0}
.hlist summary{display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;font-weight:800;color:var(--navy);min-height:44px}
.hlist summary::-webkit-details-marker{display:none}
.hlist summary .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hlist summary .chev{transition:transform .15s;color:var(--muted)}
.hlist[open] summary .chev{transform:rotate(180deg)}
.hlist .lines{list-style:none;margin:.4rem 0 0;padding:0}
.hlist .lines li{display:grid;grid-template-columns:5.6em minmax(0,1.3fr) minmax(0,1fr) auto;gap:.5rem;align-items:center;padding:.35rem 0;border-top:1px solid var(--line);font-size:.92em;min-height:36px}
.hlist .lines li>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hlist .lines .d{color:var(--muted);font-variant-numeric:tabular-nums}
.hlist .lines .u{color:var(--muted);font-size:.9em}
.hlist .lines .a{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.hlist .seeall{display:inline-block;margin-top:.4rem;font-weight:700;font-size:.9em}
@media (max-width:700px){.hlist .lines li{grid-template-columns:5.9em minmax(0,1fr) auto;font-size:.88em}.hlist .lines .u{display:none}.hlist summary .t{white-space:normal;line-height:1.25}}
/* wide tables scroll inside their card on tablets; the page itself never scrolls sideways */
.card{overflow-x:auto}
@media (max-width:1100px){table.checklist{table-layout:auto}}
/* phone: KPI cards two per row and smaller, so Home fits in about two screens */
@media (max-width:700px){.kpis{grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.9rem}.kpi{padding:.55rem .65rem .5rem}.kpi .n{font-size:1.2em}.kpi .n small{font-size:.6em}.kpi .l{font-size:.74em;margin-top:.1rem;line-height:1.2}.kpi .sub{display:none}.tiles{gap:.6rem}.tile{padding:.7rem .5rem .6rem}.tile .ico-badge{width:48px;height:48px}.tile .ico-badge svg{width:28px;height:28px}.group-h{margin:.4rem 0 .4rem}}
@media (max-width:700px){.tiles{grid-template-columns:repeat(3,1fr);gap:.5rem}.tile{padding:.6rem .3rem .5rem}.tile .lbl{font-size:.86em}.tile .ar{font-size:.74em}.tile .count{top:6px;right:6px;padding:.05rem .45rem;font-size:.72em}}
@media (max-width:700px){.hlist summary .t .ar{display:block;font-size:.78em;font-weight:500}}
.diff{font-size:.85em;line-height:1.5;margin-top:.2rem}.diff .new{color:var(--ok);font-weight:700}.diff s{opacity:.8}
th{white-space:nowrap}
td.gaps{max-width:460px}td.gaps .badge{white-space:normal;text-align:left}
@media (max-width:700px){th{white-space:normal}}
/* tables keep their natural cell widths (the card scrolls sideways instead): 'anywhere' wrapping squeezed columns so nowrap cells spilled into their neighbours */
.card td,.card th{overflow-wrap:normal;word-break:normal}
.card td.full{overflow-wrap:anywhere}
/* two-column cards only when each column has room for a table */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr))}

/* ===== v1.3 usability: spacing scale, two columns max, labels above values, wizard, More menu, back, breadcrumbs ===== */
:root{--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-6:1.5rem}
.row,.row.wide{grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-6)}
@media (max-width:700px){.row,.row.wide{grid-template-columns:1fr;gap:var(--sp-3)}}
.row>*{min-width:0}
dl.kv{grid-template-columns:1fr;gap:var(--sp-1) 0}
dl.kv dt{font-size:.82em;text-transform:uppercase;letter-spacing:.03em;margin-top:var(--sp-3)}
dl.kv dd{margin:0 0 var(--sp-1)}
@media (min-width:701px){dl.kv{grid-template-columns:1fr 1fr;column-gap:var(--sp-6)}dl.kv dt{margin-top:var(--sp-2)}}
.card{padding:var(--sp-4) var(--sp-6)}
@media (max-width:700px){.card{padding:var(--sp-4) var(--sp-4)}}
.card>h2{margin-bottom:var(--sp-3)}
.page-head{gap:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4)}
.page-head .back{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:800;padding:0 .7rem;box-shadow:var(--sh-ambient)}
.page-head .back:hover{text-decoration:none;background:var(--bg)}
.crumbs{font-size:.85em;color:var(--muted);margin:-.2rem 0 var(--sp-3);display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--muted)}.crumbs span.sep{opacity:.6}
@media (max-width:700px){.crumbs{display:none}}
details.more{position:relative;display:inline-block}
details.more>summary{list-style:none;cursor:pointer}
details.more>summary::-webkit-details-marker{display:none}
.more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lift);padding:.4rem;display:flex;flex-direction:column;gap:.3rem;min-width:220px}
.more-menu .btn,.more-menu form .btn{width:100%;justify-content:flex-start}
.more-menu form{margin:0}
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-4);color:var(--muted);background:linear-gradient(180deg,#fff,#f7f9fc);border:1px dashed var(--line);border-radius:14px}
.empty .btn{margin-top:var(--sp-1)}
.field-error{color:var(--bad);font-size:.85em;margin-top:.25rem;font-weight:600}
input.invalid,select.invalid,textarea.invalid{border-color:var(--bad);box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.draftbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}
.wiz-hidden{display:none !important}
.wiz-bar{margin:0 0 var(--sp-4)}
.wiz-steps{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.4rem}
.wiz-steps span{font-size:.85em;padding:.3rem .7rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);cursor:pointer;min-height:36px;display:inline-flex;align-items:center}
.wiz-steps span.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:800}
.wiz-steps span.done{background:var(--ok-bg);color:var(--ok);border-color:#b9e4c8}
.wiz-track{height:8px;border-radius:999px;background:#dfe4ec;overflow:hidden}
.wiz-fill{height:100%;background:linear-gradient(90deg,var(--gold-2),var(--gold));transition:width .2s}
.wiz-nav{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;padding-top:.6rem}
@media (max-width:700px){.wiz-nav{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(238,241,246,0),var(--bg) 30%);padding:.7rem 0 .4rem}.wiz-nav .btn{flex:1;justify-content:center}.wiz-steps span{font-size:.78em;padding:.25rem .55rem}}
.wiz-summary dl.kv{grid-template-columns:1fr 1fr}
@media (max-width:700px){.wiz-summary dl.kv{grid-template-columns:1fr}}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=password],input[type=url],input[type=search],select,textarea{min-height:48px}
.btn,.tile,.kpi,.tb,.tabbar a,.rail a{min-height:44px}
.kpi .n{white-space:nowrap;overflow:hidden;text-overflow:clip}

/* ===== v1.3 phone shell: bars pinned at all times, iOS safe areas, no white band on overscroll ===== */
:root{--bar-h:58px;--tab-h:60px;--sat:0px;--sab:0px;--inset-top:max(env(safe-area-inset-top),var(--sat));--inset-bottom:max(env(safe-area-inset-bottom),var(--sab))}
html{background:var(--navy-deep);overscroll-behavior-y:none;min-height:100%}
body{overscroll-behavior-y:none;min-height:100dvh}
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:calc(.55rem + var(--inset-top));min-height:calc(var(--bar-h) + var(--inset-top))}
.layout{padding-top:calc(var(--bar-h) + var(--inset-top));min-height:100dvh}
.rail{top:calc(var(--bar-h) + var(--inset-top));height:calc(100dvh - var(--bar-h) - var(--inset-top))}
@media (max-width:900px){
  .topbar{padding-top:calc(.45rem + var(--inset-top))}
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;height:calc(var(--tab-h) + var(--inset-bottom));padding:0 0 var(--inset-bottom);z-index:50}
  .tabbar a{min-width:0;overflow:hidden;white-space:nowrap;justify-content:center;padding:.35rem .1rem .3rem}
  .tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .content{padding-bottom:calc(var(--tab-h) + var(--inset-bottom) + 40px)}
  .sticky-actions{bottom:calc(var(--tab-h) + var(--inset-bottom))}
  .wiz-nav{bottom:calc(var(--tab-h) + var(--inset-bottom))}
}
.topbar .tb .dot{top:-6px;right:-6px;min-width:20px;height:20px;font-size:.62em;line-height:1}
html[data-ts="large"] .topbar .tb .dot,html[data-ts="xlarge"] .topbar .tb .dot{font-size:.55em}