/* ==== assets/app.css ==== */
:root {
  --bg: #f4f6f9; --panel: #ffffff; --ink: #1b2430; --muted: #667085; --line: #e3e7ee;
  --brand: #0f4c81; --brand-2: #0b3a63; --brand-soft: #e8f0f8;
  --ok: #117a4b; --ok-soft: #e3f4ec; --warn: #9a5b00; --warn-soft: #fdf1dc; --bad: #b42318; --bad-soft: #fde7e5;
  --info: #3a4ed8; --info-soft: #e9ecfd; --grey-soft: #eef0f3;
  --radius: 10px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.45; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--brand-2); color: #cfe0f1; padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .logo { color: #fff; font-weight: 700; font-size: 15px; padding: 4px 10px 16px; line-height: 1.25; }
.side .logo small { display: block; font-weight: 400; color: #9fbad6; font-size: 12px; }
.side nav a { display: flex; align-items: center; justify-content: space-between; color: #cfe0f1; padding: 8px 10px; border-radius: 8px; margin-bottom: 2px; }
.side nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.side nav a.active { background: rgba(255,255,255,.16); color: #fff; }
.side nav .sec { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #86a4c3; padding: 14px 10px 4px; }
.side .count { background: var(--count, #f59e0b); color: #1b2430; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 0 7px; }
.side .me { border-top: 1px solid rgba(255,255,255,.12); margin-top: 16px; padding: 12px 10px 0; font-size: 12px; }
.side .me b { color: #fff; display: block; font-size: 13px; }
.main { padding: 22px 26px 60px; min-width: 0; }
.topbar { display: none; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .topbar { display: flex; align-items: center; gap: 10px; background: var(--brand-2); color: #fff; padding: 10px 16px; position: sticky; top: 0; z-index: 40; }
  .topbar button { background: none; border: 0; color: #fff; font-size: 22px; padding: 0 4px; cursor: pointer; }
  .main { padding: 16px 16px 60px; }
}

/* ---------- components ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; }
.card.flush { padding: 0; overflow: hidden; }
.card > .cardhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.card.flush > .cardhead { padding: 14px 16px 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: block; color: inherit; }
a.stat:hover { text-decoration: none; border-color: var(--brand); }
.stat .label { color: var(--muted); font-size: 12px; }
.stat .value { font-size: 26px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: 12px; color: var(--muted); }
.stat.bad .value { color: var(--bad); } .stat.warn .value { color: var(--warn); } .stat.ok .value { color: var(--ok); }

.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 7px 12px; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #c5ccd8; text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-2); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.danger { color: var(--bad); border-color: #f1c3be; }
.btn.danger.solid { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--grey-soft); color: #475467; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: #fafbfc; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafcff; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { white-space: nowrap; }
.tablewrap { overflow-x: auto; }
tr.click { cursor: pointer; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
input, select, textarea { font: inherit; padding: 7px 10px; border: 1px solid #cfd5df; border-radius: 8px; background: #fff; color: var(--ink); min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid #b8d2ec; border-color: var(--brand); }
.filters input[type=search] { min-width: 220px; flex: 1; max-width: 340px; }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #344054; }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.form .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 13px; }
.form .check input { margin-top: 3px; }
.hint { font-size: 12px; color: var(--muted); font-weight: 400; }

.notice { padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; background: var(--info-soft); color: #243182; }
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice.err { background: var(--bad-soft); color: var(--bad); }
.notice.warn { background: var(--warn-soft); color: var(--warn); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--brand); border-color: var(--brand); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--ink); }

dl.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }
@media (max-width: 640px) { dl.kv { grid-template-columns: 120px 1fr; } }

.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; object-fit: cover; flex: none; }
.avatar.lg { width: 84px; height: 84px; font-size: 26px; border-radius: 14px; }
.who { display: flex; align-items: center; gap: 10px; }
.who .n { font-weight: 600; }

.bar { height: 8px; background: var(--grey-soft); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); }
.bar.full > span { background: var(--bad); }

.pager { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; }

/* modal */
.modal-bg { position: fixed; inset: 0; background: rgba(16,24,40,.45); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; z-index: 100; overflow-y: auto; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 560px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal.wide { max-width: 820px; }
.modal.xwide { max-width: 1100px; }
.modal .body { min-width: 0; }
.modal .body.form { grid-template-columns: minmax(0, 1fr); }
.modal .body > * , .modal .body details { max-width: 100%; min-width: 0; }
.modal .tablewrap { overflow: auto; max-width: 100%; }
.modal header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal header h2 { margin: 0; }
.modal header button { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--muted); }
.modal .body { padding: 18px 20px; }
.modal footer { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; }
#toast div { background: #1b2430; color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow); max-width: 90vw; }
#toast div.err { background: var(--bad); }

/* attendance */
.att-grid td, .att-grid th { padding: 4px 5px; font-size: 12px; text-align: center; }
.att-grid td:first-child, .att-grid th:first-child, .att-grid td:nth-child(2), .att-grid th:nth-child(2) { text-align: left; white-space: nowrap; }
.att-grid .wk { background: #f7f7fa; }
.code { display: inline-block; min-width: 24px; border-radius: 4px; font-weight: 700; font-size: 11px; padding: 1px 3px; }
.code.present { background: var(--ok-soft); color: var(--ok); }
.code.late { background: var(--warn-soft); color: var(--warn); }
.code.absent { background: var(--bad-soft); color: var(--bad); }
.code.mc, .code.leave { background: var(--info-soft); color: var(--info); }
.code.off, .code.half { background: var(--grey-soft); color: #475467; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; border-right: 1px solid var(--line); background: #fff; padding: 5px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--brand); color: #fff; }
.seg button.on.absent { background: var(--bad); } .seg button.on.late { background: #c77700; } .seg button.on.present { background: var(--ok); }
.att-row.dirty td { background: #fffbea !important; }
.timein { width: 86px; padding: 4px 6px; }

.chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 8px; }
.chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; height: 100%; }
.chart .col .b { width: 100%; max-width: 28px; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 2px; }
.chart .col .b.abs { background: #e7a39c; }
.chart .col span { font-size: 10px; color: var(--muted); }

.approval-dots { display: flex; gap: 4px; flex-wrap: wrap; }

/* login */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; background: linear-gradient(160deg, #0b3a63, #0f4c81 60%, #1d6fa5); }
.login-card { background: #fff; border-radius: 14px; padding: 28px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-card h1 { margin-bottom: 4px; }

/* face capture */
.cam { position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; }
.cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.samples { display: flex; gap: 8px; margin-top: 8px; }
.samples img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }

@media print { .side, .topbar, .actions, .filters, .btn { display: none !important; } .shell { display: block; } .card { box-shadow: none; } }

/* daily attendance as cards on phones */
@media (max-width: 640px) {
  .att-table thead { display: none; }
  .att-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px; border-bottom: 1px solid var(--line); }
  .att-table td { border: 0; padding: 0; }
  .att-table td:nth-child(1), .att-table td:nth-child(3), .att-table td:nth-child(8) { grid-column: 1 / -1; }
  .att-table .seg { flex-wrap: wrap; }
  .att-table .timein { display: inline-block; width: 48%; }
  .att-table .timein + .timein { margin: 0 0 0 2%; }
  .att-table td:nth-child(1) { order: -2; } .att-table td:nth-child(3) { order: -1; }
  .att-table td:nth-child(4)::before { content: 'OT: '; font-size: 12px; color: var(--muted); }
  .att-table td:nth-child(5)::before { content: 'AD/AN: '; font-size: 12px; color: var(--muted); }
  .att-table td:nth-child(6)::before { content: 'Replaced by: '; font-size: 12px; color: var(--muted); }
  .att-table .seg { display: flex; width: 100%; }
  .att-table .seg button { flex: 1; padding: 8px 4px; font-size: 13px; }
  .att-table .timein { width: 100%; }
  .pagehead .actions .btn { flex: 1; justify-content: center; }
}

@media (max-width: 640px) { .hide-sm { display: none; } }

/* ---------- attendance number boxes ---------- */
.boxes { display: grid; grid-template-columns: 1fr 1fr 1.7fr .8fr 1fr; gap: 12px; margin-bottom: 16px; }
.box { background: var(--panel); border: 1.5px solid #e8864a; border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 132px; }
.box.alert { background: #fff6f2; }
.box.main { border-color: var(--brand); border-width: 2px; }
.box .bl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #344054; }
.box .bl2 { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; }
.box .bs { font-size: 11px; color: var(--muted); margin-top: auto; }
.box .big { font-size: 34px; font-weight: 700; text-align: center; margin: auto 0; font-variant-numeric: tabular-nums; }
.box .split { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
.box .split > div + div { border-left: 1.5px solid #f2c4a8; }
.frac { position: relative; height: 66px; margin: 6px auto 4px; width: 110px; font-variant-numeric: tabular-nums;
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), #2a6f97 calc(50% - 1px), #2a6f97 calc(50% + 1px), transparent calc(50% + 1px)) no-repeat center / 54px 54px; }
.frac .t { position: absolute; left: 4px; top: 4px; font-size: 22px; font-weight: 700; }
.frac .b { position: absolute; right: 4px; bottom: 2px; font-size: 18px; color: #475467; }
.box.alert .frac .t { color: var(--bad); }
.box.main .frac .t { color: var(--brand); }
@media (max-width: 1100px) { .boxes { grid-template-columns: repeat(3, 1fr); } .box.wide { grid-column: span 2; } }
@media (max-width: 640px) { .boxes { grid-template-columns: 1fr 1fr; } .box.wide, .box.main { grid-column: span 2; } }
.sumtable td.num, .sumtable th.num { text-align: center; }
.sumtable tr.total td { background: #fbe7dc; font-weight: 700; }
.sumtable th { background: #28607f; color: #fff; }
.att-table .seg { flex-wrap: nowrap; }
.att-table .seg button { padding: 5px 7px; white-space: nowrap; }
.att-table .timein { width: 124px; display: block; }
.att-table .timein + .timein { margin-top: 4px; }
.ot-sel { padding: 4px 6px; font-size: 12px; }
.ot-sel.on { background: #fff4e5; border-color: #e8864a; font-weight: 700; }
.ot-sel.need { background: #fff1f1; border-color: #dc2626; }
.shift-sel { padding: 4px 6px; font-size: 12px; }
.badge.agent { background: #f4ecff; color: #6b2fbf; }

/* monthly attendance table (management layout) */
.mtable { border-collapse: collapse; font-size: 12px; min-width: 900px; }
.mtable th, .mtable td { border: 1px solid #b9cde4; padding: 4px 3px; text-align: center; white-space: nowrap; min-width: 30px; background: #fff; color: var(--ink); }
.mtable th { font-weight: 700; background: #fff; }
.mtable th.dn { font-weight: 500; }
.mtable .lbl { text-align: center; min-width: 110px; font-weight: 500; background: #fff; position: sticky; left: 0; z-index: 1; }
.mtable .wk { background: #dde9f7; }
.mtable td.short { background: #0b2a5b; color: #fff; font-weight: 700; }
.mtable td.extra { background: #ef2b2b; color: #fff; font-weight: 700; }
.mtable .tot { background: #f3f6fa; font-weight: 700; }
.mtable tr.perf td { font-size: 11px; }
.legend { padding: 0 5px; border-radius: 3px; color: #fff; font-weight: 700; }
.legend.short { background: #0b2a5b; } .legend.extra { background: #ef2b2b; }

/* attendance checks */
.checks { margin-bottom: 16px; }
.checks summary { cursor: pointer; font-weight: 600; }
.checks .chk { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.checks .chk:first-of-type { border-top: 0; }
.chk .lvl { flex: none; }
tr.has-warn td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.warn-ico { color: var(--bad); font-weight: 700; cursor: help; }
.rbadge { display: inline-block; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 4px; background: #eef2f7; color: #475467; margin-left: 4px; }
.rbadge.RD { background: #e9ecfd; color: var(--info); } .rbadge.N { background: #1f2d44; color: #fff; } .rbadge.AL { background: #fdf1dc; color: var(--warn); }
.rcode { font-size: 11px; font-weight: 700; }
.rcode.D { color: #1d6fa5; } .rcode.N { color: #fff; background: #1f2d44; border-radius: 3px; padding: 0 2px; } .rcode.RD { color: var(--info); background: var(--info-soft); border-radius: 3px; padding: 0 2px; } .rcode.AL { color: var(--warn); }
.hosttable td.num, .hosttable th.num, .billgrid th.num { white-space: nowrap; }
.hosttable tr.tot td, .billgrid tr.tot td { font-weight: 700; background: #f4f6fa; }
.billgrid td { padding: 4px 6px; }
.hosttable td:first-child { white-space: nowrap; }
dl.kv.tight { grid-template-columns: auto 1fr; } dl.kv dd.num { text-align: right; white-space: nowrap; }
.tgrid input.tcell { width: 88px; min-width: 0; text-align: right; padding: 4px 6px; color: var(--ink, #1b2430); background: #fff; font-size: 13px; font-weight: 400; border-radius: 6px; }   /* v1.63.1: not the white text of the training badges (.tcell) */
.tgrid input.tnote { width: 220px; padding: 4px 6px; }
.tgrid td { padding: 3px 8px; }
.tgrid tr.wk td { background: #f4f7fb; }
.tgrid thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.tgrid tfoot td { position: sticky; bottom: 0; background: #f4f6fa; font-weight: 700; }
.grid.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid.g6 .stat .value { font-size: 20px; white-space: nowrap; }
@media (max-width: 1250px) { .grid.g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid.g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.g6 .stat .value { font-size: 16px; } }
.btn.ghost { background: transparent; border-style: dashed; }
dl.kv dd { min-width: 0; } dl.kv dd.num .small { white-space: normal; }
.grid.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid.g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid.g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paybox .stat .value { font-size: 20px; white-space: nowrap; }
.dpgrid th.grp { text-align: center; border-bottom: 1px solid var(--line); }
.dpgrid th.sub { font-size: 11px; font-weight: 600; color: var(--muted); }
.dpgrid input.pax { width: 70px; }
.dpgrid input.bud { width: 96px; }
.dpgrid td.amt { color: #344054; white-space: nowrap; }
.dpgrid td.over { background: #fdecec; color: var(--bad); }
.dpgrid tfoot td { white-space: nowrap; }
.dpsum td.lbl { font-weight: 700; color: var(--muted); }
.linkbtn { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 0 2px; }
.dpgrid thead tr:nth-child(2) th { top: 36px; }
.side nav .sec .ro { text-transform: none; letter-spacing: 0; font-size: 10px; background: rgba(255,255,255,.12); color: #cfe0f1; border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.acctable td, .acctable th { padding: 6px 10px; } .acctable input[type=radio] { width: 18px; height: 18px; }
.addl { font-weight: 700; color: #1a7f4b; }
.paytable td, .paytable th { white-space: nowrap; }
.paytable th.ded { background: #fdf1ec; }
.paytable input.adv { width: 86px; text-align: right; padding: 3px 6px; }
.paytable select.pm { padding: 3px 6px; }
.paytable .neg { color: var(--bad); }
.paytable thead th { position: sticky; top: 0; z-index: 1; }
.paytable tfoot td { position: sticky; bottom: 0; background: #fbe7dc; font-weight: 700; }

/* driver fuel entry */
.tgrid td.fromdrv { background: #fff8e6; }
.tgrid td.fromdrv > span { margin-right: 2px; }
.photos3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.photoslot { display: flex; flex-direction: column; gap: 6px; border: 2px dashed var(--line); border-radius: 10px; padding: 10px; cursor: pointer; text-align: center; min-height: 130px; }
.photoslot .pl { font-weight: 600; font-size: 13px; }
.photoslot .pv { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; gap: 4px; }
.photoslot .pv img { max-width: 100%; max-height: 110px; border-radius: 6px; object-fit: cover; }
.photoslot.done { border-style: solid; border-color: var(--ok, #2e7d32); }
.btn.big { padding: 12px 22px; font-size: 16px; }
@media (max-width: 640px) { .photos3 { grid-template-columns: minmax(0, 1fr); } .photoslot { min-height: 90px; flex-direction: row; align-items: center; } .photoslot .pl { flex: 1; text-align: left; } .photoslot .pv img { max-height: 70px; } }
.paytable th.er, table th.er { background: #eaf3fb; }
.paytable th.pay { background: #edf7ee; }
.paytable td.er { color: #1f5f8b; }
table th.ded { background: #fdf1ec; }

/* v1.6 automatic attendance */
.code.pending { background: #fde8e8; color: #b42318; outline: 1px dashed #b42318; }
.code.ap { background: #fff1d6; color: #9a5b00; }
.seg button.on.pending { background: #b42318; } .seg button.on.ap { background: #c77700; }
.vote { display: inline-block; font-size: 12px; padding: 2px 7px; border-radius: 10px; margin: 1px 2px 1px 0; background: var(--grey-soft); }
.vote.approved { background: var(--ok-soft); color: var(--ok); } .vote.rejected { background: var(--bad-soft); color: var(--bad); } .vote.pending { background: var(--warn-soft); color: var(--warn); }
.just { white-space: pre-wrap; background: #f7f8fa; border-left: 3px solid var(--brand); padding: 6px 10px; border-radius: 4px; margin-top: 4px; font-size: 13px; }

/* v1.7 collapsible sidebar */
.side nav .grp { margin-bottom: 2px; }
.side nav .grp > .sec { display: flex; width: 100%; align-items: center; justify-content: space-between; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; font-weight: 600; color: #e6eef7; padding: 9px 10px; border-radius: 8px; text-transform: none; letter-spacing: 0; }
.side nav .grp > .sec:hover { background: rgba(255,255,255,.08); }
.side nav .grp.here > .sec { color: #fff; }
.side nav .grp .secr { display: flex; align-items: center; gap: 6px; }
.side nav .grp .chev { font-size: 11px; color: #86a4c3; transition: transform .15s; }
.side nav .grp.open .chev { transform: rotate(90deg); }
.side nav .grp .items { display: none; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.12); margin: 0 0 6px 12px; }
.side nav .grp.open .items { display: block; }
.side nav .grp.open > .sec .secr > .count { display: none; }
.side nav .sec.plain { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #86a4c3; padding: 14px 10px 4px; }
/* monthly grid: roster plan above the actual code */
.att-grid td .rplan { font-size: 9px; line-height: 1; font-weight: 700; color: #98a2b3; margin-bottom: 1px; }
.att-grid td .rplan.N { color: #5b4bb7; } .att-grid td .rplan.RD { color: #667085; } .att-grid td .rplan.AL { color: #1b6fb3; }
.att-grid td.shiftoff { outline: 2px solid var(--bad); outline-offset: -2px; }
.att-grid tr.grp-row td { background: #eef3f9; text-align: left; padding: 6px 10px; position: sticky; left: 0; }

/* v1.8 Forecast Report tables */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chip { cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; background: #fff; color: #475467; user-select: none; }
.chip.on { color: #fff; border-color: transparent; background: #475467; }
.yr-wrap { max-height: 72vh; }
.yr-table { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.yr-table th, .yr-table td { padding: 3px 5px; white-space: nowrap; border-bottom: 1px solid #edf0f3; border-right: 1px solid #f1f3f5; text-align: center; }
.yr-table td.nm, .yr-table th.stk.s2 { text-align: left; }
.yr-table thead th { position: sticky; top: 0; z-index: 2; background: #dbe7f5; font-weight: 700; }
.yr-table thead tr.h2 th { top: 34px; font-size: 11px; }
.yr-table thead tr.tots th, .yr-table thead tr.tots td { position: sticky; top: 62px; z-index: 2; background: #1b2430; color: #fff; font-weight: 700; }
.yr-table .stk { position: sticky; z-index: 1; background: #fff; }
.yr-table thead .stk { z-index: 3; background: #dbe7f5; }
.yr-table thead tr.tots .stk { background: #1b2430; }
.yr-table .s0 { left: 0; min-width: 34px; } .yr-table .s1 { left: 34px; min-width: 84px; } .yr-table .s2 { left: 118px; min-width: 210px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.yr-table.money .s2 { left: 34px; }
.yr-table td.na { background: #f6f7f9; }
.yr-table td.tot, .yr-table th.tot { background: #fffbe8; border-left: 2px solid #e2e8f0; }
.yr-table thead tr.tots th.tot { background: #3b4656; }
.yr-table.money td { text-align: right; font-variant-numeric: tabular-nums; }
.yr-table.money td.fc, .yr-table.money th.fc { font-style: italic; color: #52606d; background: #f8fafc; }
.yr-table.money thead th.fc { background: #e8eef6; }
/* category colours (like the head-office sheet) */
.sec-al.gh, .chip.sec-al.on { background: #1a73e8; color: #fff; } .yr-table th.sec-al { background: #cfe3fb; } .yr-table td.c-al { background: #eef5fd; } .yr-table td.c-al.hit { background: #29a8e0; color: #fff; font-weight: 700; }
.sec-ab.gh, .chip.sec-ab.on { background: #e11d1d; color: #fff; } .yr-table th.sec-ab { background: #fbd0d0; } .yr-table td.c-ab { background: #fdeeee; } .yr-table td.c-ab.hit { background: #e11d1d; color: #fff; font-weight: 700; }
.sec-ul.gh, .chip.sec-ul.on { background: #ea7c1e; color: #fff; } .yr-table th.sec-ul { background: #fbe0c8; } .yr-table td.c-ul { background: #fdf2e7; } .yr-table td.c-ul.hit { background: #ea7c1e; color: #fff; font-weight: 700; }
.sec-ml.gh, .chip.sec-ml.on { background: #3fa53f; color: #fff; } .yr-table th.sec-ml { background: #d4efd0; } .yr-table td.c-ml { background: #eef8ec; } .yr-table td.c-ml.hit { background: #1ea34a; color: #fff; font-weight: 700; }
.sec-hosp.gh, .chip.sec-hosp.on { background: #f2c53d; color: #1b2430; } .yr-table th.sec-hosp { background: #fcefc2; } .yr-table td.c-hosp { background: #fffaeb; } .yr-table td.c-hosp.hit { background: #e0a800; color: #fff; font-weight: 700; }
.sec-mat.gh, .chip.sec-mat.on { background: #e94cc0; color: #fff; } .yr-table th.sec-mat { background: #f8d2ee; } .yr-table td.c-mat { background: #fdf0fa; } .yr-table td.c-mat.hit { background: #e94cc0; color: #fff; font-weight: 700; }
.sec-ol.gh, .chip.sec-ol.on { background: #7a5af8; color: #fff; } .yr-table th.sec-ol { background: #e2dcfd; } .yr-table td.c-ol { background: #f5f3ff; } .yr-table td.c-ol.hit { background: #7a5af8; color: #fff; font-weight: 700; }
.sec-ap.gh, .chip.sec-ap.on { background: #9a5b00; color: #fff; } .yr-table th.sec-ap { background: #f5e1c4; } .yr-table td.c-ap { background: #fdf6ec; } .yr-table td.c-ap.hit { background: #c77700; color: #fff; font-weight: 700; }
.yr-table td.tot.over { background: #fde2e2; color: var(--bad); }
.yr-table thead th.gh.part-basic, .yr-table thead th.gh.part-gross { background: #8fd06a; } .yr-table thead th.gh.part-ot { background: #1b2430; color: #ffd400; }
.yr-table thead th.gh.part-allowance { background: #f2c53d; } .yr-table thead th.gh.part-deductions { background: #fbd0d0; } .yr-table thead th.gh.part-net { background: #29a8e0; color: #fff; }
.yr-table thead th.gh.part-er { background: #cfe3fb; } .yr-table thead th.gh.part-cost { background: #7a5af8; color: #fff; }
/* resigned rows black, MIA / terminated red */
.yr-table tr.st-left td.inf { background: #111; color: #fff; } .yr-table tr.st-left td a { color: #fff; }
.yr-table tr.st-bad td.inf { background: #e11d1d; color: #fff; } .yr-table tr.st-bad td a { color: #fff; }
@media print { .yr-wrap { max-height: none; } .chips, #yf, #ypager { display: none; } }

/* v1.8.1 view bar, frozen columns, colours */
.yr-table td.inf, .yr-table th.inf { text-align: left; } .yr-table td.c-no, .yr-table th.c-no { text-align: center; }
.yr-table .stk-last { box-shadow: 3px 0 4px -2px rgba(16,24,40,.25); }
.yr-table thead tr.tots th.stk { background: #1b2430; }
.viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: #f5f7fa; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 13px; margin-bottom: 6px; }
.viewbar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.viewbar select { padding: 3px 6px; font-size: 13px; }
.viewbar .vb-l { font-weight: 700; color: #475467; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
.viewbar .vb-grp { display: inline-flex; align-items: center; gap: 4px; } .viewbar .vb-grp b { min-width: 36px; text-align: center; }
.vb-drop { position: relative; }
.vb-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 12px; min-width: 230px; }
.vb-menu .vb-h { font-size: 11px; text-transform: uppercase; color: #667085; margin: 6px 0 2px; font-weight: 700; }
.vb-menu .check { display: flex; gap: 6px; padding: 2px 0; font-size: 13px; }
.vb-menu .vb-months { display: grid; grid-template-columns: repeat(3, 1fr); }
.vb-menu .vb-acts { display: flex; gap: 6px; margin-top: 8px; }
.yr-table td.up { color: #b42318; font-weight: 700; background: #fff1f0 !important; }
.yr-table td.down { color: #067647; font-weight: 700; background: #ecfdf3 !important; }
.yr-table td .arw { font-size: 9px; margin-right: 2px; }
.yr-table td.plain { background: #fff !important; color: inherit !important; font-weight: 400 !important; }
.yr-table td.heat { transition: background .2s; }
@media print { .viewbar { display: none; } }
.yr-table thead th.stk, .yr-table thead tr.tots th.stk { z-index: 4; }
.yr-table tbody td.stk { z-index: 1; }
.rowacts { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
/* v1.9.2 report frame: resizable, full screen */
.yr-wrap { height: 68vh; max-height: none; resize: vertical; overflow: auto; min-height: 200px; }
#yarea:fullscreen, #yarea.yr-full { background: #f4f6f9; padding: 12px 16px; overflow: auto; }
#yarea.yr-full { position: fixed; inset: 0; z-index: 300; }
#yarea:fullscreen .yr-wrap, #yarea.yr-full .yr-wrap { height: calc(100vh - 190px) !important; resize: none; }
#yarea:fullscreen #ybox, #yarea:fullscreen > .hint, #yarea.yr-full #ybox, #yarea.yr-full > .hint { display: none; }

/* v1.11 Human Resources: worker picker */
.wpick { position: relative; }
.wpick-res { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); max-height: 260px; overflow: auto; }
.wpick-res:empty { display: none; }
.wpick-res button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 7px 10px; cursor: pointer; font: inherit; }
.wpick-res button:hover { background: var(--brand-soft); }
.form details { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.form details summary { cursor: pointer; }

/* v1.12 salary levels, value filters, colours */
.vfbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: #fffaf0; border: 1px solid #f3e1b8; border-radius: 10px; padding: 6px 10px; font-size: 13px; margin-bottom: 6px; }
.vfbar .vb-l { font-weight: 700; color: #7a5200; }
.vfrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; }
.vfrow.off { opacity: .5; }
.vfrow select, .vfrow input[type=number] { padding: 3px 6px; font-size: 13px; width: auto; }
.vfrow input[type=number] { width: 90px; }
.vfrow input[type=color], .lvrow input[type=color], .seccols input[type=color] { width: 34px; height: 26px; padding: 0 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.ylegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 2px 0; }
.ylegend .lg { display: inline-flex; align-items: center; gap: 5px; } .ylegend .lg i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.ylegend .sep { width: 1px; height: 16px; background: var(--line); }
.lvrow { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.seccols { display: flex; flex-wrap: wrap; gap: 8px 16px; } .seccols label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.yr-table td.mark { font-weight: 700; }
.dpgrid td.cf { color: #52606d; background: #f8fafc; white-space: nowrap; } .dpgrid td.av { background: #f0f7ff; white-space: nowrap; }
.dpgrid td[data-bl] { white-space: nowrap; }
/* v1.13 client / project details */
.clientform table.kv { width: 100%; } .clientform table.kv th { width: 34%; background: none; color: #344054; font-size: 13px; padding: 5px 8px 5px 0; white-space: normal; }
.clientform table.kv td { padding: 4px 0; } .clientform table.kv input, .clientform table.kv textarea { width: 100%; }
.clientform table.kv input::placeholder, .clientform table.kv textarea::placeholder { color: #b0b8c4; }
.cp-sub { padding: 12px 14px; } .cp-subhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .cp-subhead .cp-subname { font-weight: 700; font-size: 16px; width: 220px; text-transform: uppercase; }
.cp-subhead .cp-delsub { margin-left: auto; }
.cp-post { display: grid; grid-template-columns: 220px 1fr; gap: 10px; border-top: 1px solid var(--line); padding: 8px 0; }
.cp-pname { display: flex; gap: 6px; align-items: flex-start; } .cp-pname input { width: 170px; font-weight: 600; text-transform: uppercase; }
.cp-shifts { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.cp-shift { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cp-shift select { width: 165px; } .cp-shift input[type=time] { width: 135px; } .cp-shift .cp-pax { width: 80px; text-align: right; }
.cp-foot { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--line); padding-top: 8px; }
@media (max-width: 700px) { .cp-post { grid-template-columns: 1fr; } }
/* v1.13 daily attendance sheet: tidy spacing, sticky header, view bar */
.att-wrap { max-height: 76vh; overflow: auto; }
.att-wrap .att-table thead th { position: sticky; top: 0; z-index: 3; background: #fafbfc; }
.att-table td { vertical-align: middle; }
.att-table td:nth-child(6) { max-width: 230px; white-space: normal; }
.att-table td:nth-child(7) { white-space: nowrap; }
.att-table .timein { width: 92px; }
@media (max-width: 900px) { .att-wrap { max-height: none; zoom: 1 !important; } #av { display: none; } }
@media (min-width: 901px) { .att-table td:nth-child(7) .timein { display: inline-block; width: 108px; margin: 0 2px 0 0; } }
/* v1.14 framed tables on every page: the list scrolls inside its frame, header stays on top, the frame can be made taller */
.main .tablewrap.framed { max-height: 72vh; overflow: auto; resize: vertical; }
.main .tablewrap.framed > table > thead th { position: sticky; top: 0; z-index: 3; }
.main .tablewrap.framed > table > tfoot th, .main .tablewrap.framed > table > tfoot td { position: sticky; bottom: 0; z-index: 2; } .main .tablewrap.framed > table > tfoot td { background-color: #f4f6fa; }
@media (max-width: 900px) { .main .tablewrap.framed { max-height: none; resize: none; } }
@media print { .main .tablewrap.framed { max-height: none; overflow: visible; } }
/* payment method: cash denomination */
.tabs.sub { margin-top: -6px; } .tabs.sub a { font-size: 13px; }
.cashgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .cashgrid { grid-template-columns: 1fr; } }
table.denom td, table.denom th { padding: 5px 8px; white-space: nowrap; } table.denom th.nt { background: #d0d5dd; text-align: center; } table.denom td.nt { text-align: center; }
table.denom td.nt.on { background: #fde2e7; font-weight: 700; } table.denom td.bal { background: #fff7b3; font-weight: 700; } table.denom td.cent { background: #eef0f3; }
table.denom tr.grp td { background: #eef3f9; font-weight: 700; }
table.denomsum { width: 100%; } table.denomsum th, table.denomsum td { padding: 5px 10px; } table.denomsum thead th { background: #fff200; color: #111; }

/* v1.16 monthly report legend */
.mlegend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 16px 12px; font-size: 12px; color: var(--ink); align-items: center; }
.mlegend > b { width: 100%; }
.mlegend > span { display: inline-flex; align-items: center; gap: 6px; }
.lg-sw { display: inline-block; min-width: 26px; padding: 2px 5px; text-align: center; border-radius: 4px; font-size: 11px; font-weight: 700; }
.lg-sw.mt { border: 1px solid #b9cde4; background: #fff; border-radius: 2px; }
.lg-sw.mt.short { background: #0b2a5b; color: #fff; } .lg-sw.mt.extra { background: #ef2b2b; color: #fff; } .lg-sw.mt.wk { background: #dde9f7; }
.lg-sw.lg-off { outline: 2px solid var(--bad); outline-offset: -2px; background: var(--ok-soft); color: var(--ok); }
.lg-sw.lg-wk { background: #f7f7fa; border: 1px solid var(--line); }
.lg-plan { font-size: 10px; font-weight: 700; color: #98a2b3; } .lg-plan.N { color: #5b4bb7; } .lg-plan.RD { color: #667085; } .lg-plan.AL { color: #1b6fb3; }

/* v1.16 petty cash, payment requests, news */
.pcform { max-width: 1100px; }
.pc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; }
.pc-cats label { font-size: 12px; margin: 0; }
.pc-cats input { width: 100%; }
.pc-sum { display: flex; gap: 22px; flex-wrap: wrap; background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 8px 0; }
.pc-sum > div { display: flex; flex-direction: column; } .pc-sum b { font-size: 18px; }
.pc-rec { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.pc-rec img { height: 60px; width: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.pc-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2f7; border-radius: 12px; padding: 2px 4px 2px 10px; font-size: 12px; }
.pc-chip.new { background: #e7f6ec; } .pc-chip button { border: 0; background: transparent; cursor: pointer; font-size: 14px; }
.pctable th { background: #2b1a6b; color: #fff; font-size: 11px; white-space: normal; text-align: center; }
.pctable td { font-size: 12px; white-space: nowrap; }
.pc-st { display: inline-block; padding: 2px 6px; border-radius: 3px; font-weight: 700; font-size: 11px; }
.pc-st.ok { background: #1fd61f; color: #062; } .pc-st.draft { background: #eee; color: #555; }
td.pc-sr { text-align: center; font-weight: 700; }
td.pc-sr.submitted { background: #ff2a2a; color: #fff; } td.pc-sr.approved { background: #fff200; } td.pc-sr.paid { background: #fff; } td.pc-sr.rejected { background: #dbeafe; }
table.prl input { width: 100%; }
.newsbox .newslist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.news { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
.news.meeting.up { border-color: #7aa7e0; background: #f4f8fe; }
.news h3 { margin: 6px 0 4px; font-size: 15px; } .news .nb { font-size: 13px; margin: 6px 0; max-height: 160px; overflow: auto; }

/* v1.17 claims: expense lines, status colours, STAFF MIA */
.cl-lines { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.cl-line { display: grid; grid-template-columns: 110px 1fr 2fr 1fr 1fr 1fr; gap: 8px 10px; align-items: end; background: #f4f8fd; border: 1px solid #d6e3f3; border-radius: 8px; padding: 8px 10px; }
.cl-line label { margin: 0; font-size: 12px; } .cl-line input, .cl-line select { width: 100%; background: #dce9f7; }
.cl-line input:disabled, .cl-line select:disabled { background: #eef3f9; color: var(--ink); }
.cl-line .wide { grid-column: span 1; } .cl-lh { display: flex; flex-direction: column; gap: 4px; align-self: center; }
.cl-line select.need { border-color: #dc2626; background: #fff1f1; }
.cl-cat { grid-column: 2 / -1; font-size: 12px; color: #1b6fb3; font-weight: 600; }
@media (max-width: 900px) { .cl-line { grid-template-columns: 1fr 1fr; } .cl-lh { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; } }
.btn.addexp { background: #1ea7e1; color: #fff; border-color: #1590c5; font-weight: 700; box-shadow: 0 2px 6px rgba(30,167,225,.35); }
.cl-st { display: inline-block; min-width: 92px; text-align: center; padding: 3px 8px; font-weight: 700; font-size: 12px; border-radius: 3px; }
.cl-pending { background: #ff2a2a; color: #fff; } .cl-progress { background: #fff200; color: #111; } .cl-returned { background: #ff2a2a; color: #fff; outline: 2px solid #7f1d1d; }
.cl-budget { background: #cfe3ff; color: #0b3a75; } .cl-paid { background: #d8f5df; color: #0a6b2b; } .cl-draft { background: #eee; color: #555; }
td.cl-sr { text-align: center; } .cl-notes { color: #334155; }
.sctable tr.mia td { background: #000 !important; color: #fff !important; font-weight: 700; }
.sctable tr.mia .btn { color: #111; }
.cl-hist { margin-top: 10px; line-height: 1.7; }
.grid.clboxes { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.pctable td.cl-sr, .pctable td.cl-notes, .sctable td.cl-sr { white-space: normal; min-width: 140px; max-width: 230px; }
.cl-notes { font-size: 11.5px; line-height: 1.35; }
.cl-line .catw { grid-column: 2 / -1; } .cl-line .catw select { max-width: 360px; }
.cl-lh .btn { align-self: flex-start; width: auto; padding: 2px 9px; }
.modal .cl-line { grid-template-columns: 90px 1fr 1.6fr 1fr 1.1fr 1fr; }

/* ---------- v1.18 training ---------- */
.trtabs a { font-size: 13px; padding: 8px 11px; }
.trcards { margin-bottom: 12px; }
.tcell { display: inline-block; min-width: 76px; padding: 3px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center; white-space: nowrap; color: #fff; }
.tcell small { display: block; font-weight: 400; font-size: 10px; opacity: .9; }
a.tcell:hover { text-decoration: none; filter: brightness(.93); }
.tc-valid { background: #1e8e4e; }
.tc-expiring { background: #f2c230; color: #3b2f00; }
.tc-progress { background: #ea7a17; }
.tc-scheduled { background: #2f6fd6; }
.tc-expired { background: #c62828; }
.tc-missing { background: #1b1b1b; color: #ff8a80; }
.tc-na { background: #d7dbe0; color: #4b5563; }
.trlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.trlegend span { display: inline-flex; align-items: center; gap: 5px; }
.trlegend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.trbars { display: grid; gap: 6px; }
.trbar-row { display: grid; grid-template-columns: 130px 1fr 42px; gap: 8px; align-items: center; font-size: 12px; }
.trbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trbar-n { text-align: right; font-weight: 600; }
.trbar { display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: var(--grey-soft); gap: 2px; }
.trbar span { display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; min-width: 2px; }
.tb-ok { background: #1e8e4e; } .tb-soon { background: #f2c230; color: #3b2f00 !important; } .tb-inc { background: #ea7a17; } .tb-exp { background: #c62828; }
.tb-act { background: var(--brand); } .tb-fc { background: #9db8d6; } .tb-bud { background: transparent; border-top: 2px dashed var(--bad); height: 0 !important; margin-top: 5px; }
.trcols { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 10px; }
.trcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.trcol-v { font-size: 11px; color: var(--muted); }
.trcol-b { width: 70%; max-width: 34px; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 1px; }
.trcol-l { font-size: 11px; color: var(--muted); margin-top: 4px; }
.trcol-bs { position: relative; display: flex; align-items: flex-end; gap: 2px; width: 100%; justify-content: center; height: 124px; }
.trcol-bs .trcol-b { width: 40%; }
.trcol-b.act { background: var(--brand); } .trcol-b.fc { background: #9db8d6; }
.trcol-bud { position: absolute; left: 4%; right: 4%; border-top: 2px dashed var(--bad); }
.trmatrix { max-height: 70vh; }
.trmatrix thead th { position: sticky; top: 0; background: #f7f8fa; z-index: 1; }
.tmc { text-align: center; min-width: 96px; }
.odtable tr.oddep td { background: #fde7e5; }
.trfiles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.trcostrow > * { min-width: 110px; }
.trpick { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 12px; margin-bottom: 10px; }
.trpick .check { display: block; margin: 2px 0; font-size: 13px; }
.trpick-scroll { max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
@media (max-width: 800px) { .trpick { grid-template-columns: 1fr; } }
.trrep { grid-template-columns: 240px minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .trrep { grid-template-columns: 1fr; } }
.trreplist a { display: block; padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.trreplist a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.obflow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 12px; }
.obflow span { background: var(--brand-soft); color: var(--brand); padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.obflow i { color: var(--muted); font-style: normal; }
.obt { font-weight: 700; } .obt.ok { color: var(--ok); } .obt.no { color: var(--bad); }
.kv.tight dt, .kv.tight dd { padding: 2px 0; }

/* ---------- v1.20 update workers from file ---------- */
.wutable tr.wu-choose td { background: #fff8e6; }
.wutable tr.wu-none td { background: #fdf0ef; }
.wutable tr.wu-error td { background: #fde7e5; }
.wutable tr.wu-same td { color: var(--muted); }
.wutable select { max-width: 360px; }
.bad-t { color: var(--bad); font-weight: 600; }

/* ---------- v1.22 feature access per user ---------- */
.feattable tr.fsec td { background: var(--grey-soft); padding-top: 8px; }
.feattable select { min-width: 170px; }
.feattable select.featset { border-color: var(--warn); background: var(--warn-soft); font-weight: 600; }
/* v1.24 daily pass: daily record, summary each department, daily summary */
.dpwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .dpwrap { grid-template-columns: minmax(0, 1fr); } }
.dpcard { border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.dphead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dphead h2 { margin: 0; font-size: 18px; }
.dpic { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dpic svg { width: 22px; height: 22px; }
.dpic.blue { background: #3b82f6; color: #fff; }
.dpchip { background: var(--brand-soft); color: var(--brand); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dpform { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.dpform label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; margin: 0; }
.dpform input, .dpform select { background: #f6f8fb; border-radius: 10px; }
.dpform .span2 { grid-column: 1 / -1; }
@media (max-width: 520px) { .dpform { grid-template-columns: 1fr; } }
.dpbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.dpbtns .btn { justify-content: center; padding: 11px; font-size: 15px; border-radius: 10px; }
.dpsubmit { background: #3b82f6; border-color: #3b82f6; }
.dpdraft { background: #f7e3c6; border-color: #f0d3a8; color: #6b4a14; }
.dpline { display: grid; grid-template-columns: 70px repeat(5, minmax(0, 1fr)) 20px; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; font-size: 13px; }
.dpline .k { font-size: 11px; color: var(--muted); }
.dpbadge { border-radius: 10px; padding: 10px 6px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.1; }
.dpbadge .small { font-weight: 500; font-size: 10px; }
.dptot { border-radius: 8px; padding: 4px 8px; font-weight: 700; text-align: right; }
.dpline.blue .dpbadge, .dpline.blue .dptot { background: #e3edfd; color: #1d4ed8; }
.dpline.green .dpbadge, .dpline.green .dptot { background: #e0f4e7; color: #15803d; }
.dpline.purple .dpbadge, .dpline.purple .dptot { background: #ece6fb; color: #6d28d9; }
.dpline.orange .dpbadge, .dpline.orange .dptot { background: #fdeedb; color: #b45309; }
.dpline.teal .dpbadge, .dpline.teal .dptot { background: #dcf3f3; color: #0f766e; }
.dpline.pink .dpbadge, .dpline.pink .dptot { background: #fbe4ef; color: #be185d; }
@media (max-width: 560px) { .dpline { grid-template-columns: 60px repeat(3, minmax(0, 1fr)) 20px; } .dpline > div:nth-child(2), .dpline > div:nth-child(3) { display: none; } }
.dpsrow { display: flex; justify-content: space-between; align-items: center; border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; }
.dpsrow b { font-size: 15px; }
.dpsrow.blue { background: #eaf2fe; } .dpsrow.blue b { color: #1d4ed8; }
.dpsrow.green { background: #e7f6ec; } .dpsrow.green b { color: #15803d; }
.dpsrow.orange { background: #fdf1e1; } .dpsrow.orange b { color: #b45309; }
.dpsrow.purple { background: #f0ebfc; } .dpsrow.purple b { color: #6d28d9; }
.dpsrow.grey { background: #f1f3f6; }
.dpsrow.red { background: #fde8e8; } .dpsrow.red b { color: #b42318; }
tr.click { cursor: pointer; } tr.click:hover td { background: #f7f9fc; }
.dpbtns .btn.dpsubmit { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.dphead { flex-wrap: wrap; }
.pvlines { min-width: 260px; } .pvlines div { white-space: nowrap; }
/* v1.25 notifications: bell, list, pop-up settings */
.side .logo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bell { position: relative; background: rgba(255,255,255,.1); border: 0; color: #fff; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; }
.bell:hover { background: rgba(255,255,255,.2); }
.bell svg { width: 20px; height: 20px; }
.bell .bcount { position: absolute; top: -5px; right: -6px; background: #ef4444; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; text-align: center; border: 2px solid var(--brand-2); }
.topbar .bell { margin-left: auto; }
.notifpanel { position: fixed; top: 12px; left: 250px; width: 400px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); background: var(--panel); border-radius: 14px; box-shadow: 0 12px 40px rgba(16,24,40,.25); z-index: 200; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 900px) { .notifpanel { left: 12px; right: 12px; top: 58px; width: auto; } }
.nphead { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.nphead b { flex: 1; font-size: 16px; }
.nplist { overflow-y: auto; flex: 1; }
.npitem { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.npitem:hover { background: #f7f9fc; text-decoration: none; }
.npitem.unread { background: #eef4fd; }
.npitem.unread .nptitle { font-weight: 700; }
.npic { font-size: 18px; line-height: 1.2; flex: none; }
.nptext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nptitle { font-size: 13.5px; }
.npbody { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.nptime { font-size: 11.5px; color: var(--muted); }
.nppush { padding: 12px 16px; border-top: 1px solid var(--line); background: #f8fafc; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.npbtns { display: flex; gap: 6px; }
.ok-t { color: var(--ok); font-weight: 600; }
.notifybox { border: 1px solid #cfe0f5; background: #f4f8fe; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.nbhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nbhead svg { width: 16px; height: 16px; color: var(--brand); }
.nbdeps { display: flex; flex-wrap: wrap; gap: 6px; }
.nbchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer; margin: 0; font-weight: 500; }
.nbchip input { margin: 0; width: auto; }
.nbchip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nbmsg { width: 100%; }
.notifybox label.nbchip { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; margin: 0 !important; }
.notifybox .nbchip input[type=checkbox] { width: 16px !important; height: 16px; min-height: 0; padding: 0; flex: none; }
/* v1.26 company logo */
.side .logo .clogo { display: block; max-width: 150px; max-height: 64px; object-fit: contain; margin-bottom: 8px; background: #fff; border-radius: 8px; padding: 4px; }
.loginlogo { display: block; max-width: 180px; max-height: 80px; object-fit: contain; margin-bottom: 10px; }
.logobox { display: flex; gap: 14px; align-items: center; border: 1px dashed var(--line); border-radius: 10px; padding: 10px; }
.logoprev { width: 110px; height: 70px; display: flex; align-items: center; justify-content: center; background: #f7f9fc; border-radius: 8px; flex: none; }
.logoprev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mgnote { width: 100%; min-width: 90px; margin-top: 3px; font-size: 12px; padding: 3px 6px; }
.logoprev { background-color: #fff; background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%); background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
.lbg { font-size: 12.5px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lbg.ok { color: var(--ok); font-weight: 600; }
.lbg.warn { color: var(--warn); }
.lbg .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #9ca3af; vertical-align: middle; }
/* v1.27 */
.attl { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
tr.rejrow td { background: #fff5f5; }
.mmtext { white-space: pre-wrap; line-height: 1.55; }
.mmusers { max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.mmdep { margin-bottom: 8px; } .mmdh { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.mmu { display: flex !important; flex-direction: row !important; gap: 6px; align-items: center; margin: 2px 0 !important; font-weight: 400; }
.form .mmact, .mmact { display: grid !important; grid-template-columns: 22px 3fr 1.5fr 140px 22px; align-items: center; gap: 6px; margin-bottom: 6px; }
.mmact label.check { margin: 0; }
.uipresets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.uipre { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px 4px 6px; cursor: pointer; font-size: 12.5px; }
.uipre span { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.uimrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.uimrow input[data-lb] { flex: 1; min-width: 0; }
.uimbtn { display: flex; gap: 3px; }
input[type=color] { height: 38px; padding: 2px; width: 100%; cursor: pointer; }
/* v1.27.1 interface page */
.uifontprev { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.uifp { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 14px; }
.uifp.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.uilogo { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.uiprev { margin-top: 14px; }
.side .logo .cname { display: block; }
.uipane[hidden]{display:none!important}
.side .me a { color: #cfe0f1; }
/* v1.30 maintenance banner + Engineering system */
.mainwrap { min-width: 0; }
#maintbar:empty { display: none; }
#maintbar { padding: 10px 26px 0; }
.maintnote { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius, 10px); padding: 10px 14px; margin-bottom: 6px; font-size: 13px; border: 1px solid #f5c26b; background: #fff7e6; color: #7a4a00; }
.maintnote.active { border-color: #f19a9a; background: #fdecec; color: #8a1c1c; }
.maintnote .mi { font-size: 18px; line-height: 1; }
.maintnote b { color: inherit; }
.engsteps { margin: 0; padding-left: 18px; line-height: 1.7; }
.englog { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
@media (max-width: 860px) { #maintbar { padding: 10px 16px 0; } }
@media print { #maintbar { display: none; } }
.modal label.check input[type=checkbox], .modal label.check input[type=radio] { flex: none; }
.warn-t { color: var(--warn, #b45309); font-weight: 600; }
/* v1.34: department interfaces */
.pbar { padding: 0 0 10px; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.pbar select { width: 100%; background: rgba(255,255,255,.12); color: inherit; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 6px 8px; font: inherit; font-weight: 600; }
.pbar select option { color: #111; }
.pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); flex: none; }
.pdot.big { width: 16px; height: 16px; margin-right: 10px; vertical-align: 2px; border-color: #fff; box-shadow: 0 0 0 1px var(--line); }
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ptile { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius, 10px); background: var(--panel); color: var(--ink); text-decoration: none; position: relative; min-height: 58px; justify-content: center; }
.ptile:hover { border-color: var(--brand); text-decoration: none; box-shadow: var(--shadow); }
.ptile span { font-weight: 600; }
.ptile small { color: var(--muted); font-size: 11.5px; }
.ptile .count { position: absolute; top: 8px; right: 8px; }
.ptile.warn { border-color: #f5c46b; background: #fff8e6; }
.ptile.warn b { font-size: 22px; line-height: 1; color: #9a5b00; }
.pbadge { display: inline-block; margin: 6px 0 2px; padding: 3px 12px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 14px; }
.pblocks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 8px; }

/* v1.52: back button */
.backbtn { margin: 0 0 8px; }
@media print { .backbtn { display: none; } }

/* v1.53: the front page (log-in) — photos, headline, two-step log-in, partners */
.land { --land-bg: var(--side, #0b3a63); position: relative; min-height: 100vh; display: flex; flex-direction: column; color: #fff; overflow: hidden; background: var(--land-bg); }
.land.noimg { background: linear-gradient(160deg, var(--land-bg), #0f4c81 60%, #1d6fa5); }
.land-bg { position: absolute; inset: 0; z-index: 0; }
.land-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; transform: scale(1.03); }
.land-slide.on { opacity: 1; animation: landzoom 14s ease-out forwards; }
@keyframes landzoom { from { transform: scale(1.03); } to { transform: scale(1.1); } }
.land-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.30) 100%); }   /* v1.64: a lighter shade — the photo shows brighter */
.land.noimg .land-shade { display: none; }
.land-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px; }
.land-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 20px; letter-spacing: .2px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.land-brand img { height: 46px; max-width: 160px; object-fit: contain; background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px 6px; }
.land-dept { padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.land-mid { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px 40px; text-align: center; }
.land-mid h1 { font-size: clamp(30px, 5.4vw, 64px); line-height: 1.08; margin: 0 0 10px; font-weight: 800; letter-spacing: -1px; color: #fff; text-shadow: 0 3px 18px rgba(0,0,0,.45); max-width: 1000px; }
.land-sub { font-size: clamp(15px, 1.7vw, 19px); margin: 0 0 26px; opacity: .95; text-shadow: 0 1px 8px rgba(0,0,0,.5); max-width: 760px; }
.land-box { width: 100%; max-width: 470px; margin-top: 14px; }
.land-step { display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.35); background: #fff; }
.land-step#st2 { flex-direction: column; overflow: visible; background: rgba(255,255,255,.97); border-radius: 8px; padding: 12px; gap: 10px; }
.land-in { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #fff; margin: 0; }
.land-in input { border: 0; outline: 0; box-shadow: none; padding: 16px 0; font-size: 16px; width: 100%; background: transparent; color: #1b2430; }
.land-ico { font-size: 18px; opacity: .7; }
.land-go { border: 0; background: #f5c33b; color: #1b2430; font-weight: 800; font-size: 14px; letter-spacing: .5px; padding: 0 26px; cursor: pointer; min-height: 56px; }
.land-go:hover { background: #ffd24f; } .land-go:disabled { opacity: .6; cursor: wait; }
.land-row { display: flex; border: 1px solid #e3e7ee; border-radius: 6px; overflow: hidden; }
.land-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #1b2430; font-size: 15px; text-align: left; }
.land-who #lname { font-weight: 700; }
.land-chip { padding: 4px 12px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 700; }
.land-who a { margin-left: auto; font-size: 13px; color: #0f4c81; }
.land-err { margin-top: 12px; background: rgba(180,30,30,.92); color: #fff; padding: 10px 14px; border-radius: 6px; font-size: 14px; text-align: left; }
.land-partners { position: relative; z-index: 1; background: #fff; color: #1b2430; padding: 16px 20px 18px; box-shadow: 0 -6px 24px rgba(0,0,0,.12); }
.land-ptitle { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8a94a6; margin-bottom: 10px; }
.land-plist { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 40px; }
.land-p { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 80px; }
.land-p img { height: 46px; max-width: 140px; object-fit: contain; filter: grayscale(.15); transition: filter .2s, transform .2s; }
.land-p:hover img { filter: none; transform: scale(1.05); }
.land-p small { font-size: 13px; color: #4a5568; }
.land-pname { font-weight: 800; font-size: 18px; color: #0f4c81; border: 1px solid #e3e7ee; border-radius: 8px; padding: 10px 16px; }
@media (max-width: 600px) {
  .land-top { padding: 14px 16px; } .land-brand { font-size: 16px; } .land-brand img { height: 36px; }
  .land-go { padding: 0 16px; } .land-plist { gap: 12px 22px; } .land-p img { height: 34px; }
}
/* Admin → Login page */
.lpslides { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.lpslide { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #f4f6f9; }
.lpslide img { width: 100%; height: 100px; object-fit: cover; display: block; }
.lpenh { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .lpenh figure { margin: 0; } .lpenh figcaption { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.lpenh img, .lpenh canvas { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--line); }
@media (max-width: 700px) { .lpenh { grid-template-columns: 1fr; } }
.lpacts { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px; }
.lpacts .btn { margin: 0; }
.lpparts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.lppart { border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.lplogo { height: 60px; display: flex; align-items: center; justify-content: center; background: #f8f9fb; border-radius: 6px; }
.lplogo img { max-height: 52px; max-width: 90%; object-fit: contain; }
.land [hidden] { display: none !important; }

/* v1.54: logo without its box on the front page; previews of transparent logos */
.land-brand.bare img { background: none; padding: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.lpcomp { display: grid; grid-template-columns: minmax(240px, 1fr) 1.4fr; gap: 16px; align-items: center; }
@media (max-width: 760px) { .lpcomp { grid-template-columns: 1fr; } }
.lpprev.dark { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 10px; background: linear-gradient(160deg, #1d2b3a, #6a4a2a); color: #fff; font-weight: 800; }
.lpprev img { height: 46px; max-width: 160px; object-fit: contain; }
.lpprev img.plate { background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px 6px; }
.lplogo.checker { background: repeating-conic-gradient(#eef0f4 0 25%, #fff 0 50%) 50% / 14px 14px; }

/* v1.55: the logo in the middle, above the company name */
.land-mid .land-brand { flex-direction: column; gap: 10px; font-size: clamp(17px, 2vw, 24px); letter-spacing: .6px; margin-bottom: 22px; text-align: center; }
.land-mid .land-brand img { height: clamp(70px, 11vw, 120px); max-width: min(360px, 80vw); padding: 8px 12px; border-radius: 12px; }
.land-mid .land-brand.bare img { padding: 0; }
.land-top { min-height: 56px; }
@media (max-width: 600px) { .land-mid .land-brand { margin-bottom: 14px; } }

/* v1.56: close the menu on a phone — ◀ next to it, or tap the page beside it */
.sideclose, .sidebg { display: none; }
@media (max-width: 860px) {
  .side.open ~ .sidebg { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 49; }
  .side.open ~ .sideclose { display: flex; align-items: center; justify-content: center; position: fixed; top: 12px; left: 268px; z-index: 51;
    width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: var(--brand-2, #0b3a63); font-size: 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
}
@media print { .sideclose, .sidebg { display: none !important; } }

/* v1.57: the first column of the month grids (Date / day / present / OT … — dashboard, Operation) stays frozen while scrolling sideways,
   header included, on phones too (the date cells scroll underneath it) */
.mtable th.lbl, .mtable td.lbl { position: sticky; left: 0; z-index: 4; background: #fff; box-shadow: 2px 0 0 #b9cde4, 6px 0 8px -6px rgba(0,0,0,.25); }
.main .tablewrap.framed > table.mtable > thead th.lbl { z-index: 6; }
.mtable thead th.lbl { font-weight: 700; }
.mtable tbody td { position: relative; z-index: 0; }
.mtable tbody td.lbl { z-index: 4; }
@media (max-width: 600px) { .mtable .lbl { min-width: 92px; max-width: 110px; white-space: normal; font-size: 11px; } }

/* v1.58: smartphone layout (Engineering system → Phone layout) — only on a phone-size screen */
.phonebar { display: none; }
@media (max-width: 860px) {
  html.pf-small .main, html.pf-small .modal, html.pf-small .side nav { zoom: .92; }
  html.pf-large .main, html.pf-large .modal, html.pf-large .side nav { zoom: 1.1; }
  html.pf-xlarge .main, html.pf-xlarge .modal, html.pf-xlarge .side nav { zoom: 1.22; }
  html.ps-compact .main .card { padding: 10px; margin-bottom: 10px; } html.ps-compact th, html.ps-compact td { padding: 5px 7px; }
  html.ps-compact .main { padding: 10px; } html.ps-compact .stat { padding: 8px 10px; }
  html.ps-roomy .main .card { padding: 20px; margin-bottom: 18px; } html.ps-roomy th, html.ps-roomy td { padding: 12px 14px; }
  html.ps-roomy .btn { padding: 10px 14px; } html.ps-roomy input, html.ps-roomy select, html.ps-roomy textarea { padding: 10px 12px; }
  /* tables as cards */
  html.pcards table.tcards thead { display: none; }
  html.pcards table.tcards, html.pcards table.tcards tbody, html.pcards table.tcards tfoot, html.pcards table.tcards tr { display: block; width: 100%; }
  html.pcards table.tcards tr { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; padding: 6px 12px; box-shadow: var(--shadow); }
  html.pcards table.tcards td { display: block; border: 0 !important; padding: 5px 0 !important; text-align: right; min-height: 26px; white-space: normal; overflow: hidden; }
  html.pcards table.tcards td::before { content: attr(data-l); float: left; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; max-width: 42%; margin-right: 12px; padding-top: 2px; }
  html.pcards table.tcards td > .who, html.pcards table.tcards td > .actions { justify-content: flex-end; }
  html.pcards table.tcards td[data-l=""] { text-align: left; }
  html.pcards table.tcards td[data-l=""]::before { display: none; }
  html.pcards table.tcards td:first-child { font-weight: 600; }
  html.pcards .card.flush:has(table.tcards) { background: transparent; box-shadow: none; border: 0; }
  html.pcards .tablewrap:has(table.tcards) { overflow: visible; max-height: none !important; padding: 0 2px; }
  /* bottom menu bar */
  html.has-pbar .phonebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(16,24,40,.08);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  html.has-pbar .phonebar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; color: var(--muted); text-decoration: none; font-size: 11px; position: relative; border-radius: 10px; min-width: 0; }
  html.has-pbar .phonebar a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html.has-pbar .phonebar a svg { width: 22px; height: 22px; }
  html.has-pbar .phonebar a.on { color: var(--brand); background: var(--brand-soft); font-weight: 700; }
  html.has-pbar .phonebar a i { position: absolute; top: 1px; left: 55%; background: var(--count, #f59e0b); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 5px; line-height: 16px; }
  html.has-pbar .mainwrap { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  html.has-pbar #toast { bottom: 84px; }
}
/* the setting page: phone preview */
.phprev { width: 390px; max-width: 100%; height: 760px; border: 10px solid #1f2937; border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.phprev iframe { width: 100%; height: 100%; border: 0; display: block; }
.phgrid { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .phgrid { grid-template-columns: 1fr; } }
.phitems td { padding: 4px 6px; } .phitems select, .phitems input { width: 100%; }
.phsecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }

/* v1.61 — the menu across the top (Admin → Interface → Layout → Menu position). Phones keep the ☰ side menu. */
@media (min-width: 861px) {
  body.navtop .shell { display: block; }
  body.navtop .side { position: sticky; top: 0; z-index: 45; height: auto; overflow: visible; padding: 8px 18px 4px; display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; box-shadow: 0 1px 6px rgba(0,0,0,.18); }
  body.navtop .side .logo { padding: 0; flex: 0 0 auto; align-items: center; display: flex; gap: 10px; }
  body.navtop .side .logo .clogo { max-height: 40px !important; margin: 0 !important; }
  body.navtop .side .logo > span { display: flex !important; align-items: center; gap: 10px; }
  body.navtop .side .logo .cname { font-size: 14px; white-space: nowrap; }
  body.navtop .side .logo small { font-size: 11px; }
  body.navtop .side .bell { width: 32px; height: 32px; }
  body.navtop .side .pbar { padding: 0; flex: 0 0 auto; }
  body.navtop .side .pbar select { width: auto; max-width: 230px; padding: 4px 8px; }
  body.navtop .side nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; flex: 0 0 100%; order: 10; min-width: 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 4px; margin: 2px -6px 0; }
  body.navtop .side nav > a { margin: 0; padding: 7px 10px !important; white-space: nowrap; gap: 6px; }
  body.navtop .side nav .sec.plain { display: none; }
  body.navtop .side nav .grp { position: relative; margin: 0; }
  body.navtop .side nav .grp > .sec { width: auto; white-space: nowrap; padding: 7px 10px; border-radius: 8px; gap: 6px; text-transform: none; letter-spacing: 0; }
  body.navtop .side nav .grp .chev { transform: rotate(90deg); font-size: 9px; }
  body.navtop .side nav .grp.here > .sec { background: rgba(255,255,255,.14); }
  body.navtop .side nav .grp .items { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 240px; max-width: 340px; max-height: 72vh; overflow-y: auto;
    background: var(--brand-2); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 6px; margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
  body.navtop .side nav .grp .items a { white-space: normal; }
  body.navtop .side nav .grp.open .items { display: block; }
  body.navtop .side nav .grp.open > .sec .secr > .count { display: inline; }
  /* v1.65.1: the list's place is set when it opens (navTopPlace), so it never goes off the window */
  body.navtop .side .me { order: 5; border: 0; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
  body.navtop .side .me b { display: inline; }
  body.navtop .side .me > div { margin-top: 0 !important; }
  body.navtop .main { max-width: 1700px; margin: 0 auto; }
}
@media (max-width: 900px) { .lhlgrid { grid-template-columns: 1fr !important; } }

/* v1.63: Admin → Users → access rights grid */
.frbar { display: flex; gap: 6px; margin-bottom: 6px; } .frbar input { flex: 1; min-width: 0; }
.frwrap { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
table.frgrid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.frgrid th, .frgrid td { border: 1px solid #e3e7ee; padding: 3px 6px; text-align: center; }
.frgrid thead th { position: sticky; top: 0; background: #f4f6f9; z-index: 2; font-weight: 600; } .frgrid thead tr:nth-child(2) th { top: 24px; }
.frgrid th.frc { cursor: pointer; } .frgrid th.frc:hover { text-decoration: underline; }
.frgrid .frdesc { text-align: left; min-width: 240px; } .frgrid thead .frdesc { vertical-align: bottom; }
.frgrid td.en { background: #fffbd1; } .frgrid td.rp { background: #d9fbe0; } .frgrid thead th.en { background: #fff6b0; } .frgrid thead th.rp { background: #c4f5cf; }
.frgrid td input[type=checkbox] { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.frgrid tr.frgrp td { text-align: left; background: #f4f6f9; font-weight: 600; cursor: pointer; } .frgrid .frtog { font-family: monospace; margin-right: 4px; }
.frgrid tr.frrow { cursor: pointer; } .frgrid tr.frsel td, .frgrid tr.frgrp.frsel td { background: #0f62c4 !important; color: #fff; } .frgrid tr.frsel td .small { color: #dbe8ff; }
.frgrid .frdot { color: var(--warn, #d97706); } .frgrid tr.frsel .frdot { color: #ffd54d; }
.frfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

/* v1.69.1: show / hide the password */
.pweye-wrap { position: relative; display: block; }
.pweye-wrap input { width: 100%; padding-right: 44px; }
.pweye { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border: 0; background: transparent; color: #6b7686; cursor: pointer; border-radius: 8px; padding: 0; }
.pweye:hover, .pweye.on { color: var(--brand); }
.pweye:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pweye-wrap .pweye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.land-in .pweye { margin-right: -8px; }
/* v1.70: Forgot password? */
.land-forgot { margin-top: 10px; text-align: right; }
.land-forgot a { color: #fff; font-size: 14px; text-shadow: 0 1px 6px rgba(0,0,0,.6); text-decoration: underline; }
#lfp, #lrs { background: rgba(255,255,255,.97); border-radius: 8px; padding: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 10px; }
#lfp[hidden], #lrs[hidden] { display: none; }
.land-note { margin: 0; color: #4a5568; font-size: 14px; text-align: left; }
.land-ok { background: #e7f6ec; color: #17603a; padding: 10px 14px; border-radius: 6px; font-size: 14px; text-align: left; }
.land-err.ok { background: rgba(23,96,58,.92); }
#lfp .land-err, #lrs .land-err { margin-top: 0; }
/* v1.71: Admin → Users → landlord units */
.llunits { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin-top: 6px; }
.llh { border-bottom: 1px dashed var(--line); padding: 4px 0; } .llh:last-child { border-bottom: 0; }
.llul { display: flex; flex-wrap: wrap; gap: 2px 14px; padding-left: 24px; }

/* ==== operation/style.css ==== */
/* Operation (v1.46): TBA slots in the roster — open places with no worker yet */
.tbac { color: #b45309; font-weight: 700; }
td .tbac { font-size: 10px; margin-left: 2px; }
tr.tbarow td { background: #fff8eb; }
.mtable th.today { outline: 2px solid var(--brand, #0f4c81); outline-offset: -2px; }
.placesel { max-width: 200px; font-size: 12px; padding: 3px 6px; }

/* ==== station/style.css ==== */
/* Station (v1.50) */
.stncard h2 a { color: inherit; text-decoration: none; }
.stndepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin-bottom: 8px; }
.stndepts .chk, label.chk { display: flex; align-items: center; gap: 6px; font-weight: normal; }
.stnpick { max-height: 300px; overflow: auto; border: 1px solid var(--line, #ddd); border-radius: 6px; }
.stnday input[type=time] { width: 105px; padding: 3px 6px; }
.stnday select { padding: 3px 6px; font-size: 13px; }
.stnday input[data-f=remarks] { min-width: 140px; padding: 3px 6px; }
.stnday tr.stnot td { background: rgba(255, 196, 0, .07); }
.stnros td.stncell { cursor: pointer; text-align: center; min-width: 26px; }
.stnros td.stncell:hover { outline: 2px solid var(--primary, #1d6fa5); outline-offset: -2px; }
.stnros td.chg { background: #fff3c4; }
.stnros th.ph, .stnros td.ph { background: rgba(214, 64, 64, .08); }
.stnros tr.cov td { font-size: 12px; color: var(--muted, #667); text-align: center; }
.stnros tr.cov td.lbl { text-align: left; white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* v1.51: shifts of a station */
.stnshifts { width: 100%; margin: 4px 0; } .stnshifts td { padding: 3px 6px; } .stnshifts input { padding: 4px 6px; }
.rcode.stns0 { color: #1d6fa5; } .rcode.stns1 { color: #fff; background: #1f2d44; border-radius: 3px; padding: 0 2px; }
.rcode.stns2 { color: #fff; background: #0e7c66; border-radius: 3px; padding: 0 2px; } .rcode.stns3 { color: #fff; background: #8a4fbf; border-radius: 3px; padding: 0 2px; }
.rcode.stns4 { color: #fff; background: #b4541c; border-radius: 3px; padding: 0 2px; } .rcode.stns5 { color: #fff; background: #5a6b7a; border-radius: 3px; padding: 0 2px; }

/* ==== manpower/style.css ==== */
/* v1.59: worker photos (bulk upload, white background) */
.wpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; max-height: 58vh; overflow: auto; padding: 2px; }
.wpcard { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 5px; background: var(--card, #fff); }
.wpcard.miss { border-color: var(--bad, #c33); }
.wpcard.done { opacity: .6; }
.wpimgs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-items: center; }
.wpimgs img, .wpimgs canvas { width: 100%; height: 120px; object-fit: contain; background: #eee; border-radius: 4px; }
.wpimgs canvas { background: #fff; border: 1px solid var(--line, #ddd); }
.wpname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpcard select { width: 100%; font-size: 13px; padding: 4px 6px; }
.wpctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wpctl input[type=range] { width: 90px; vertical-align: middle; }
.wpone { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wpone img, .wpone canvas { width: 100%; max-height: 50vh; object-fit: contain; border: 1px solid var(--line, #ddd); border-radius: 6px; background: #eee; }
.wpone canvas { background: #fff; }

/* ==== hr/style.css ==== */
/* v1.61: training price at each provider */
.trprices { width: 100%; margin: 4px 0; } .trprices td { padding: 3px 4px; } .trprices select, .trprices input { width: 100%; padding: 5px 8px; }

/* ==== logistics/style.css ==== */
/* v1.51: Daily pass — summary cards (phone and computer) */
.dps2 { min-width: 0; }
.dpsec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 2px 12px; }
.dpsec h2 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.15; }
.dpsec + #dplines, .dpsec + #dpsum { margin-bottom: 26px; }
.dpchip2 { background: #fbe4ec; color: #9d174d; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dpmono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; font-weight: 700; letter-spacing: -.2px; }
.dpbox { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow); }
.dprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; font-size: 16px; }
.dprow + .dprow { border-top: 1px solid var(--line); }
.dprow b { font-size: 17px; white-space: nowrap; }
.dprow.dptb { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.dprow.dpline2 { border-top: 1px solid var(--line); }
.dptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px 14px; }
.dptile { background: #f3f1ee; border-radius: 10px; padding: 9px 12px; min-width: 0; }
.dptile .k { font-size: 13px; color: var(--muted); }
.dptile .v { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.dptile .s { font-size: 11px; color: var(--muted); }
.dpbal { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--brand); color: #fff; border-radius: 16px; padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.dpbal .t { font-size: 18px; font-weight: 800; } .dpbal .s { font-size: 12px; opacity: .85; }
.dpbal .v { font-size: 26px; white-space: nowrap; }
.dpbal.neg { background: var(--bad); }
.dpdeps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.dpdep { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); cursor: pointer; position: relative; }
.dpdep-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; }
.dpdep-b { width: 46px; height: 46px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: none; }
.dpdep-n { flex: 1; font-size: 17px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.dpdep-t { text-align: right; } .dpdep-t .k { font-size: 11px; color: var(--muted); letter-spacing: .5px; }
.dpdep-t .v { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; font-weight: 700; font-size: 19px; white-space: nowrap; }
.dpdep-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.dpdep.blue .dpdep-b { background: #e3edfd; color: #1d4ed8; } .dpdep.blue .dpdep-t .v { color: #1d4ed8; }
.dpdep.green .dpdep-b { background: #e0f4e7; color: #15803d; } .dpdep.green .dpdep-t .v { color: #15803d; }
.dpdep.purple .dpdep-b { background: #ece6fb; color: #6d28d9; } .dpdep.purple .dpdep-t .v { color: #6d28d9; }
.dpdep.orange .dpdep-b { background: #fdeedb; color: #b45309; } .dpdep.orange .dpdep-t .v { color: #b45309; }
.dpdep.teal .dpdep-b { background: #dcf3f3; color: #0f766e; } .dpdep.teal .dpdep-t .v { color: #0f766e; }
.dpdep.pink .dpdep-b { background: #fbe4ef; color: #be185d; } .dpdep.pink .dpdep-t .v { color: #be185d; }
@media (max-width: 640px) {
  .dpsec h2 { font-size: 20px; }
  .dprow { padding: 14px 16px; font-size: 15px; } .dptiles { padding: 0 16px 14px; }
  .dpbal .v { font-size: 24px; }
}
/* v1.59: landlord — My units */
.llgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-bottom: 14px; }
.llgrid > .card { margin-bottom: 0; }
.llhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.llocc { text-align: center; background: var(--bg); border-radius: 10px; padding: 6px 12px; min-width: 76px; line-height: 1.1; }
.llocc b { font-size: 24px; } .llocc span { color: var(--muted); font-size: 14px; } .llocc small { display: block; color: var(--muted); font-size: 11px; }
.llocc.over { background: #fdecea; } .llocc.over b { color: var(--bad); }
.llwho { margin: 8px 0 10px; } .llwho summary { cursor: pointer; margin-bottom: 6px; }
.lltbl { width: 100%; font-size: 13px; } .lltbl td, .lltbl th { padding: 4px 8px; }
@media (max-width: 600px) { .llgrid { grid-template-columns: 1fr; } }

/* ==== finance/style.css ==== */
/* v1.33: Security money (from the stand-alone Security Money app) */
.smwho { position: relative; margin-bottom: 6px; }
.smpick { display: grid; border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; background: #fff; max-height: 220px; overflow: auto; }
.smpick:empty { display: none; }
.smpick a { padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.smpick a:last-child { border-bottom: 0; }
.smpick a:hover { background: #eef6ff; text-decoration: none; }
.smwhoinfo { margin-top: 6px; font-size: 13px; }
.fgridwrap { max-height: 70vh; overflow: auto; }
table.fgrid { font-size: 12.5px; }
table.fgrid th, table.fgrid td { white-space: nowrap; padding: 6px 8px; }
table.fgrid thead th { position: sticky; top: 0; background: #f4f7fa; z-index: 1; }
table.fgrid thead tr:nth-child(2) th { top: 31px; }
table.fgrid th.yr { text-align: center; background: #0b3a63; color: #fff; letter-spacing: .1em; }
table.fgrid th.blank { background: #fff; }
table.fgrid tfoot td { position: sticky; bottom: 0; background: #eaf0f6; border-top: 2px solid #0b3a63; }
.fcv { color: #1d4ed8; font-style: italic; }
.curm { background: #fff8e6 !important; }
.wdgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; align-items: end; }
.wdgrid .wdwide { grid-column: span 2; }
.wdgrid input.ro { background: #f6f8fb; border-style: dashed; color: #111; font-weight: 600; }
.wdbal input.ro { font-size: 16px; text-align: right; }
input.ro.neg { color: #b91c1c; }
.wdsep { border-top: 1px dashed #b8c2cf; margin: 12px 0; }
.wdline { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px 16px; align-items: end; padding: 6px 0; border-bottom: 1px dotted #e3e7ee; }
@media (max-width: 640px) { .wdgrid { grid-template-columns: 1fr; } .wdgrid .wdwide { grid-column: auto; } .wdline { grid-template-columns: 1fr 1fr auto; } }
/* forecast sheet: grid lines, frozen columns, zoom */
.fgtools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zoomctl { display: inline-flex; gap: 2px; }
.zoomctl .btn { min-width: 34px; justify-content: center; }
table.fgrid.gl th, table.fgrid.gl td { border: 1px solid #d3dae3; }
table.fgrid { border-collapse: separate; border-spacing: 0; }
table.fgrid .fzc { position: sticky; z-index: 2; background: #fff; }
table.fgrid tbody tr:nth-child(even) .fzc { background: #fafbfd; }
table.fgrid thead .fzc { z-index: 4; background: #f4f7fa; }
table.fgrid thead tr:first-child .fzc { background: #fff; }
table.fgrid tfoot .fzc { z-index: 4; background: #eaf0f6; }
table.fgrid .fzlast { box-shadow: 3px 0 4px -2px rgba(15, 40, 70, .25); }
table.fgrid tbody tr:hover td { background: #eef5ff; }
.fgrid th.yr .yrl{position:sticky;left:6px;display:inline-block}
@media print { .fgridwrap { max-height: none; overflow: visible; } }

/* ==== security/style.css ==== */
/* Security money (v1.69): the styles of the stand-alone system that the Hub does not have */
details.trmore, details.trfold {margin: 10px 0;}
details.trmore > summary, details.trfold > summary {cursor: pointer; font-weight: 600; font-size: 13px; color: var(--brand); padding: 6px 0;}
details.trfold {border: 1px solid var(--line); border-radius: 8px; padding: 2px 12px 8px;}
.todos {display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.todo {display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,#0b3a63,#1d5f99);color:#fff!important;text-decoration:none;box-shadow:0 4px 14px rgba(11,58,99,.18);flex:1;min-width:230px}
.todo b {font-size:26px;line-height:1}
.todo span {font-size:13.5px;opacity:.95}
.todo.soft {background:#fff;color:#0b3a63!important;border:1px solid #d6e2ef;box-shadow:none}
.dashgrid {grid-template-columns:repeat(auto-fit,minmax(min(100%,470px),1fr));gap:14px;margin-top:4px}
.dashgrid .card {margin:0}
.wfchart svg {width:100%;height:auto;display:block}
.wfchart .gl {stroke:#e5e9f0;stroke-width:1}
.wfchart .ax {font-size:11px;fill:#6b7280}
.wflg {display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#4b5563;margin:2px 0 6px 46px}
.wflg i {display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.wflg i.ln {height:3px;width:16px;vertical-align:3px}
.hbars {display:flex;flex-direction:column;gap:7px}
.hb {display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;gap:8px;align-items:center;font-size:13px}
.hb .hl {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .ht {height:12px;background:#f1f4f8;border-radius:6px;overflow:hidden}
.hb .ht i {display:block;height:100%;border-radius:6px}
.hb .hv {text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hb .hv small {display:block;color:#6b7280;font-size:11px}
.bvasum {display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;margin-top:6px}
.selbar {position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin:0 0 10px;background:#0b3a63;color:#fff;border-radius:10px}
.selbar a {color:#cfe0f1}
.wfdots {display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px}
.wfdots i {width:9px;height:9px;border-radius:50%;background:#d1d5db}
.wfdots i.on {background:#10b981}
.wfdots i.x {background:#ef4444}
.wftable td {vertical-align:top}
.wftable input[type=checkbox] {width:17px;height:17px}
.timeline {display:flex;gap:0;margin:14px 0 6px;flex-wrap:wrap}
.timeline .tl {flex:1;min-width:150px;display:flex;gap:8px;position:relative;padding-right:10px}
.timeline .tl>i {flex:none;width:14px;height:14px;border-radius:50%;background:#e5e7eb;border:2px solid #d1d5db;margin-top:2px}
.timeline .tl.on>i {background:#10b981;border-color:#059669}
.timeline .tl.x>i {background:#ef4444;border-color:#dc2626}
.flow {display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.flow span {padding:5px 10px;border-radius:20px;background:#f1f4f8;font-size:12.5px;color:#6b7280}
.flow span.on {background:#d1fae5;color:#065f46;font-weight:700}
.colsdlg {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.colsdlg>div {display:flex;flex-direction:column;gap:2px}
.colsdlg b {margin-bottom:4px}
table.fgrid .ytdc {background:#eef3f9}
table.bedit td {padding:2px}
table.bedit input.bc {width:86px;padding:5px 6px;text-align:right;font-variant-numeric:tabular-nums;border:1px solid #e5e9f0;border-radius:6px;font-size:13px}
table.bedit input.bc:focus {border-color:#1d5f99;outline:none;background:#f5f9ff}
table.bvat .act {color:#b45309;font-size:.88em}
.kindsel {display:flex;gap:16px;margin:0 0 10px}
.kindsel label {display:flex;align-items:center;gap:6px;font-weight:600}
@media (max-width:700px) {
  .colsdlg {grid-template-columns:1fr}
  .todo {min-width:100%}
  .hb {grid-template-columns:38% 1fr auto}
}
.selbar[hidden] {display:none}
.dashgrid {align-items:start}
.wfchart {max-width:980px;margin:0 auto}
.wfchart svg {max-height:320px}
table.bedit td:first-child,table.bedit th:first-child,table.bvat td:first-child,table.bvat th:first-child {position:sticky;left:0;background:#fff;z-index:1;box-shadow:2px 0 0 #e5e9f0}
table.bedit tfoot td:first-child,table.bvat tfoot td:first-child {background:#eef3f9}
tr.smtotal td {background: #eef2f7; border-top: 2px solid var(--brand, #0b3a63); padding-top: 10px; padding-bottom: 10px;}
.smfilters {background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 14px; display: grid; gap: 10px;}
.smf-row {display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
.smf-row input[type=search] {flex: 1 1 320px; min-width: 220px;}
.smf-row select {flex: 0 1 auto;}
.smf-period {padding-top: 10px; border-top: 1px dashed var(--line);}
.smf-lbl {font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px;}
.smf-range {display: inline-flex; align-items: center; gap: 6px; color: var(--muted);}
.smf-range input {padding: 5px 8px;}
.smf-tools {padding-top: 10px; border-top: 1px dashed var(--line);}
.smmonth {display: inline-flex; align-items: center; gap: 4px;}
.smmonth input {padding: 5px 8px;}
.smmonth .btn.sm {padding: 4px 10px; font-size: 15px; line-height: 1;}
.smhead {align-items: flex-end !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--line); margin-bottom: 0 !important;}
.smsum {display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; color: var(--muted);}
.smsum b {color: var(--ink); font-variant-numeric: tabular-nums;}
.smsum select {padding: 4px 8px; font-size: 12px;}
.dot {display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px;}
.dot.in {background: var(--ok);}
.dot.out {background: #d97706;}
.smin {color: var(--ok);}
.smout {color: var(--warn);}
table.smtx td {vertical-align: top; padding-top: 11px; padding-bottom: 11px;}
table.smtx td.nw, td.nw {white-space: nowrap;}
table.smtx .mono {font-family: ui-monospace, Consolas, monospace; font-size: 11px;}
table.smtx tbody tr:hover td {background: #f8fafc;}
table.smtx tr.isvoid td {opacity: .55;}
table.smtx tr.isvoid td b, table.smtx tr.isvoid td .clamp {text-decoration: line-through;}
.smstaff {min-width: 150px; max-width: 230px;}
.smstaff div {color: #475467; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.smdet {min-width: 200px; max-width: 340px;}
.smdet .clamp {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #344054;}
.smdet .clamp.long {cursor: pointer; position: relative;}
.smdet .clamp.long:not(.open)::after {content: 'more ▾'; position: absolute; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 35%); padding-left: 22px; color: var(--brand); font-weight: 600;}
.smdet .clamp.open {-webkit-line-clamp: unset; display: block;}
.smpager {display: flex; justify-content: center; align-items: center; gap: 4px; padding: 12px; border-top: 1px solid var(--line); flex-wrap: wrap;}
.smpager .btn[disabled] {opacity: .4; cursor: default;}
.smmon tr.clickable {cursor: pointer;}
.smmon tr.clickable:hover td {background: var(--brand-soft);}
.smmon tr.sel td {background: #fff7e6;}
.smbar {position: relative; height: 14px; display: grid; gap: 2px;}
.smbar i {display: block; height: 6px; border-radius: 3px; min-width: 0;}
.smbar i.in {background: #34a37a;}
.smbar i.out {background: #e6a23c;}
@media (max-width: 720px) {
  .smf-range {width: 100%;}
}
table.fgrid thead tr.yrrow th.blank {background: #fff; border-color: #fff; border-bottom-color: #d3dae3;}
table.smsortable th.srt {cursor: pointer; user-select: none;}
table.smsortable th.srt:hover {color: var(--brand); background: var(--brand-soft);}
table.smsortable th.srt i {font-style: normal; font-size: 10px; margin-left: 4px; opacity: .35;}
table.smsortable th.srt.on {color: var(--brand);}
table.smsortable th.srt.on i {opacity: 1;}
.negbal {color: var(--bad) !important; font-weight: 700;}
.smframe {height: 360px; min-height: 160px; max-height: 85vh; overflow: auto; resize: vertical; border-top: 1px solid var(--line);}
.smframe table {border-collapse: separate; border-spacing: 0;}
.smframe thead th {position: sticky; top: 0; z-index: 2; background: #f4f6fa; box-shadow: inset 0 -1px 0 var(--line);}
.smframe tfoot td {position: sticky; bottom: 0; z-index: 2; background: #eef2f7 !important; box-shadow: inset 0 2px 0 var(--brand, #0b3a63);}
.smframe::-webkit-resizer {background: linear-gradient(135deg, transparent 50%, #94a3b8 50%, #94a3b8 60%, transparent 60%, transparent 70%, #94a3b8 70%, #94a3b8 80%, transparent 80%);}

/* ==== permit/style.css ==== */
/* Permit renewal (v1.70): the styles of the stand-alone system that the Hub does not have */
.pos {color:#047857}
table.rnlines td {padding:4px 6px}
table.rnlines input {width:100%}
table.rnlines td:last-child input {text-align:right;max-width:130px}
.pboard .cardhead {flex-wrap: wrap; gap: 8px;}
.pbf {display: flex; gap: 8px; align-items: center; flex-wrap: wrap;}
.pbf select {min-width: 170px;}
.pbwrap {display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: start;}
.pbgrid {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;}
.pbm, .pbo {border: 1px solid var(--c, #111827); border-radius: 4px; overflow: hidden; background: #fff; text-align: center; font-variant-numeric: tabular-nums;}
.pbo {--c: #111827;}
.pbh {background: var(--c); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .3px; padding: 4px 2px;}
.pbo .pbh {font-size: 18px; padding: 10px 2px;}
.pbr {display: grid; grid-template-columns: 1fr 1fr; font-size: 11px;}
.pbr > * {padding: 3px 2px; border-right: 1px solid var(--c); border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, #fff);}
.pbr > *:last-child {border-right: 0;}
.pbr.pbn > * {font-size: 15px; padding: 8px 2px; color: inherit; text-decoration: none; background: color-mix(in srgb, var(--c) 7%, #fff);}
.pbr.pbn > a:hover {background: color-mix(in srgb, var(--c) 18%, #fff);}
.pbr.big > * {font-size: 26px; padding: 22px 2px;}
.pbt {display: block; padding: 4px 2px; font-weight: 600; font-size: 13px; color: inherit; text-decoration: none; background: color-mix(in srgb, var(--c) 12%, #fff);}
.pbt.big {font-size: 24px; padding: 12px 2px;}
.pbbar {height: 6px; background: #fde2e2; margin: 8px 10px 4px; border-radius: 3px; overflow: hidden;}
.pbbar i {display: block; height: 100%; background: #16a34a;}
.pboard .center, .pmwrap .center {text-align: center; padding: 0 6px 8px;}
.pbcards {display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; margin-top: 16px; align-items: start;}
.pbtab table {width: 100%; border-collapse: collapse; font-size: 13px;}
.pbtab th, .pbtab td {border: 1px dashed #d6d9de; padding: 4px 8px;}
.pbtab th {background: #f3f4f6; text-align: left;}
.pbtab th.num {text-align: right;}
.pbtab th.pbred {background: #e5495b; color: #fff; text-align: center;}
.pbtab a {color: inherit;}
.pbmini {height: 3px; background: #eef2f7; margin-top: 3px;}
.pbmini i {display: block; height: 100%; background: #ef8a2e;}
@media (max-width: 1100px) {
  .pbgrid {grid-template-columns: repeat(4, minmax(0, 1fr));}
}
@media (max-width: 760px) {
  .pbwrap {grid-template-columns: 1fr;}
  .pbgrid {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .pbcards {grid-template-columns: 1fr;}
}
.pbtab {min-width: 0; overflow-x: auto;}
@media (max-width: 420px) {
  .pbgrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
.pbmini.g i {background: #16a34a;}
@media (min-width: 1000px) {
  .pbtab.wide {grid-column: span 2;}
}
.orsearch {display: flex; flex-direction: column; gap: 2px; margin: -4px 0 6px;}
.orsearch button {text-align: left; border: 1px solid #e3e7ec; background: #fff; border-radius: 6px; padding: 6px 9px; cursor: pointer;}
.orsearch button:hover {background: #fbebe3; border-color: #b4441b;}
.orw {border: 1px solid #f0d3c5; background: #fff8f4; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px;}
.orw3 {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.orw3 div {background: #fff; border: 1px solid #f0d3c5; border-radius: 6px; padding: 6px 9px;}
.orw3 span {display: block; font-size: 11px; color: #6b7280;}
.orw3 b {font-size: 16px;}
.ortab {width: 100%; border-collapse: collapse; font-size: 13px;}
.ortab th, .ortab td {border-bottom: 1px solid #eef0f3; padding: 5px 7px; text-align: left;}
.ortab th.num, .ortab td.num {text-align: right;}
.ortab th {background: #f6f7f9;}
.pos {color: #15803d;}
.pmbar {display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px;}
.pmyears, .pmtog {display: flex; border: 1px solid #d6dbe2; border-radius: 8px; overflow: hidden;}
.pmyears button, .pmtog button {border: 0; background: #fff; padding: 6px 13px; cursor: pointer; font: inherit; font-weight: 600; color: #4b5563;}
.pmyears button + button, .pmtog button + button {border-left: 1px solid #d6dbe2;}
.pmyears button.on {background: #b4441b; color: #fff;}
.pmtog button.on {background: #0b3a63; color: #fff;}
.pmtog {margin-left: auto;}
.pmcards {display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0;}
.pmc {background: #fff; border: 1px solid #e3e7ec; border-radius: 10px; padding: 10px 13px; border-top: 4px solid #0b3a63;}
.pmc span {display: block; font-size: 12px; color: #6b7280;}
.pmc b {display: block; font-size: 19px; margin: 2px 0; font-variant-numeric: tabular-nums;}
.pmc small {color: #6b7280; font-size: 11.5px;}
.pmc.early {border-top-color: #16a34a;}
.pmc.same {border-top-color: #2563eb;}
.pmc.late {border-top-color: #ea8a0c;}
.pmwrap {overflow: hidden;}
.pm thead th.ytd {background: #072a48;}
.pm .pmcorner {text-align: left; font-weight: 600; font-size: 11.5px; background: #072a48; min-width: 150px;}
.pmcov td {background: #f8fafc; font-size: 11px; color: #4b5563; text-align: center;}
.pmcov td:first-child {text-align: left; font-weight: 600;}
.pmring {--p: 0; width: 16px; height: 16px; border-radius: 50%; display: inline-block; vertical-align: -3px; margin-right: 4px; background: conic-gradient(#16a34a calc(var(--p) * 1%), #e5e7eb 0); position: relative;}
.pmring i {position: absolute; inset: 4px; background: #f8fafc; border-radius: 50%;}
.pmcell {--a: 0;}
.pmcell.has {cursor: pointer; font-weight: 700;}
.pmcell.has:hover {outline: 2px solid #111827; outline-offset: -2px;}
.pmcell.early.has {background: rgba(22, 163, 74, var(--a));}
.pmcell.same.has {background: rgba(37, 99, 235, var(--a));}
.pmcell.late.has {background: rgba(234, 138, 12, var(--a));}
.pmcell.same {box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);}
.pmcell small {display: block; font-size: 10px; font-weight: 500; opacity: .75;}
.pm td.ytd {background: #f1f5f9; font-weight: 700;}
.pm tr.pmtot th, .pm tr.pmtot td {background: #0b3a63; color: #fff; font-weight: 800; border-bottom: 0;}
.pm tr.pmtot td.ytd {background: #072a48;}
.pmleg {display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 14px; font-size: 12px; border-top: 1px solid #eef0f3;}
.pmleg i {display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px;}
.pmleg i.early {background: #16a34a;}
.pmleg i.same {background: #2563eb;}
.pmleg i.late {background: #ea8a0c;}

/* ==== office/style.css ==== */
/* Office module (v1.31): editors for documents, spreadsheets and presentations */
.ofbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ofbar .actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.oftitle { font-size: 18px; font-weight: 700; border: 1px solid transparent; background: transparent; padding: 4px 8px; border-radius: 6px; min-width: 240px; flex: 1; max-width: 520px; color: var(--ink); }
.oftitle:hover, .oftitle:focus { border-color: var(--line); background: var(--panel); outline: none; }
.odtools { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; margin-bottom: 10px; box-shadow: var(--shadow); }
.odtools select { padding: 4px 6px; font-size: 13px; height: 30px; width: auto; }
.odb { border: 1px solid transparent; background: transparent; color: var(--ink); min-width: 30px; height: 30px; padding: 0 7px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.odb:hover { background: var(--bg); border-color: var(--line); }
.odb.on { background: var(--brand-soft, #e8f0f8); border-color: var(--brand); }
.odcol input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.odsep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.odwrap { background: #e9ecf1; padding: 24px 10px 60px; border-radius: 8px; overflow-x: auto; }
.odpage { background: #fff; color: #111; width: 794px; max-width: 100%; min-height: 1123px; margin: 0 auto; padding: 76px 76px 90px; box-shadow: 0 2px 10px rgba(0,0,0,.18); font-family: Calibri, Arial, sans-serif; font-size: 11pt; line-height: 1.45; outline: none; box-sizing: border-box; }
.odpage p { margin: 0 0 6pt; } .odpage h1 { font-size: 18pt; color: #1f3864; margin: 12pt 0 6pt; } .odpage h2 { font-size: 15pt; color: #2f5496; margin: 10pt 0 6pt; } .odpage h3 { font-size: 13pt; color: #2f5496; margin: 8pt 0 4pt; }
.odpage table { border-collapse: collapse; width: 100%; margin: 6pt 0; } .odpage td, .odpage th { border: 1px solid #999; padding: 4px 6px; vertical-align: top; min-width: 30px; } .odpage th { background: #eef2f7; text-align: left; }
.odpage img { max-width: 100%; height: auto; cursor: pointer; } .odpage blockquote { margin: 0 0 6pt 2em; color: #444; border-left: 3px solid #ccc; padding-left: 10px; }
.odpage hr.pagebreak { border: 0; border-top: 2px dashed #9aa5b5; margin: 18px -76px; position: relative; overflow: visible; }
.odpage hr.pagebreak::after { content: 'page break'; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); background: #fff; color: #9aa5b5; font-size: 11px; padding: 0 6px; }
.odpage pre { background: #f6f8fa; padding: 8px; border-radius: 4px; font-size: 10pt; white-space: pre-wrap; }
@media (max-width: 860px) { .odpage { padding: 28px 20px; min-height: 600px; } .odpage hr.pagebreak { margin: 18px -20px; } }
/* spreadsheet */
.osfx { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .osfx b { min-width: 70px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; font-size: 13px; }
.osfx input { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.osgrid { overflow: auto; max-height: 66vh; border: 1px solid var(--line); border-radius: 6px 6px 0 0; background: #fff; outline: none; }
.ostable { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; color: #111; width: max-content; }
.ostable th { position: sticky; top: 0; background: #f1f3f6; color: #555; font-weight: 600; text-align: center; border-right: 1px solid #dde1e7; border-bottom: 1px solid #c9ced6; padding: 3px 0; z-index: 2; user-select: none; cursor: pointer; }
.ostable tbody th { position: sticky; left: 0; z-index: 1; border-bottom: 1px solid #e3e6eb; } .ostable .oscorner { left: 0; z-index: 3; }
.ostable td { border-right: 1px solid #e3e6eb; border-bottom: 1px solid #e3e6eb; padding: 2px 5px; height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: cell; }
.ostable td.sel { background-color: rgba(15, 76, 129, .10) !important; } .ostable td.cur { outline: 2px solid var(--brand); outline-offset: -2px; } .ostable td.oserr { color: #c00; }
.ostable td .osedit { width: 100%; border: 0; outline: none; padding: 0; font: inherit; background: #fff; height: 20px; }
.ostabs { display: flex; gap: 2px; background: #f1f3f6; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; padding: 3px; flex-wrap: wrap; }
.ostab { border: 1px solid transparent; background: transparent; padding: 4px 12px; border-radius: 4px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); } .ostab.on { background: #fff; border-color: var(--line); font-weight: 600; color: var(--brand); }
/* presentation */
.opwrap { display: grid; grid-template-columns: 172px 1fr; gap: 14px; align-items: start; }
.opthumbs { max-height: 76vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.opthumb { position: relative; padding-left: 16px; cursor: pointer; } .opthumb > span { position: absolute; left: 0; top: 2px; font-size: 11px; color: var(--muted); }
.opthumb .opslide { border: 2px solid var(--line); border-radius: 4px; pointer-events: none; } .opthumb.on .opslide { border-color: var(--brand); }
.opmain { min-width: 0; } .opmain textarea { width: 100%; margin-top: 4px; }
.opslide { position: relative; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.15); margin-bottom: 10px; line-height: 1.25; }
.opf { position: absolute; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; outline: none; box-sizing: border-box; padding: 2px 4px; }
.opf[contenteditable]:hover, .opf[contenteditable]:focus { outline: 1px dashed rgba(127,127,127,.7); }
.opf[contenteditable]:empty::before { content: attr(data-ph); opacity: .45; }
.opbody[contenteditable] { line-height: 1.5; }
.opimg { position: absolute; display: flex; align-items: center; justify-content: center; } .opimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.opimg span { border: 2px dashed rgba(127,127,127,.6); border-radius: 6px; padding: 30px; color: inherit; opacity: .6; cursor: pointer; font-size: 14px; }
.opshow { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.opshow .opslide { box-shadow: none; margin: 0; } .opshow .opcount { position: fixed; right: 14px; bottom: 10px; color: #aaa; font-size: 12px; }
@media (max-width: 860px) { .opwrap { grid-template-columns: 1fr; } .opthumbs { flex-direction: row; overflow-x: auto; max-height: none; } .opthumb { flex: none; } }
@media print { .ofbar, .odtools { display: none !important; } .odwrap { background: none; padding: 0; } .odpage { box-shadow: none; width: auto; padding: 0; } }
.odtools label.opl { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; font-weight: 500; }
.odtools label.opl select { width: auto; margin: 0; }
.odtools label.opl input[type=color] { width: 30px; height: 26px; padding: 1px; margin: 0; border: 1px solid var(--line); border-radius: 5px; background: none; cursor: pointer; }
.odtools select { width: auto; max-width: 190px; }
/* v1.32: letters on the company letterhead */
.odlh { position: relative; margin: 0 auto; max-width: 100%; }
.odlh .lh-header, .odlh .lh-footer, .odlh .lh-anc { z-index: 2; pointer-events: none; }
.odlh .odpage.odletter { max-width: none; margin: 0; position: relative; z-index: 1; background: #fff; }
.odlh .odpage.odletter { background: transparent; }
.odlh::before { content: ''; position: absolute; inset: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); z-index: 0; }
.odlh .odpage.odletter { box-shadow: none; }
.odref { position: absolute; z-index: 2; font-family: Calibri, Arial, sans-serif; font-size: 11pt; color: #111; }
@media (max-width: 860px) { .odlh { width: 210mm !important; } .odwrap { overflow-x: auto; } }

/* v1.40: Word extras — track changes, comments, find bar, word count, tables without lines */
.odpage ins { color: #1a7f37; text-decoration: underline; text-decoration-color: #1a7f37; background: #e6f4ea; }
.odpage del { color: #b42318; text-decoration: line-through; background: #fdecea; }
.odpage span.odcm { background: #fff3bf; border-bottom: 2px solid #f5c33b; cursor: pointer; }
.odpage .odflash { outline: 3px solid #f5c33b; }
.odpage table.nob td, .odpage table.nob th { border: 1px dashed #e3e7ee; }
.odfind { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; position: sticky; top: 0; z-index: 5; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.odfind.hidden { display: none; } .odfind input[type=text], .odfind input:not([type]) { width: 180px; padding: 5px 8px; }
.odstatus { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #55606e; max-width: 794px; margin: 6px auto 0; padding: 4px 8px; }
.odrv { border-bottom: 1px solid var(--line); padding: 8px 0; } .odrv ins { color: #1a7f37; } .odrv del { color: #b42318; }
.odcmmsg { border-left: 3px solid #f5c33b; padding: 4px 8px; margin: 0 0 6px; background: #fffbea; }
.odb.on { background: #dbe7f5; }

/* v1.40: Excel extras — filter buttons, charts, colour rules */
.ostable td.osfh { position: relative; padding-right: 20px; }
.osfbtn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border: 1px solid #c9ced6; background: #fff; border-radius: 3px; font-size: 10px; line-height: 14px; width: 16px; height: 16px; padding: 0; cursor: pointer; color: #333; }
.osfbtn.on { background: #0f4c81; color: #fff; border-color: #0f4c81; }
.oscharts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.oschart { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; flex: 1 1 520px; max-width: 640px; }
.oschead { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .oschbody { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.oslegend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #374151; margin-top: 4px; } .oslegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.osrule { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); } .osrsw { padding: 1px 8px; border-radius: 4px; border: 1px solid var(--line); font-size: 12px; }
.odcmchip { position: absolute; z-index: 50; font-size: 12px; padding: 3px 8px; border-radius: 6px; border: 1px solid #f5c33b; background: #fffbea; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.odcmchip.hidden { display: none; }

/* ==== mail/style.css ==== */
/* Mail module */
.mlwrap { display: grid; grid-template-columns: 200px minmax(280px, 380px) 1fr; gap: 12px; align-items: start; }
.mlwrap > .card { margin-bottom: 0; }
.mlside { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.mlfolders { display: flex; flex-direction: column; gap: 2px; }
.mlf { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; }
.mlf:hover { background: var(--bg); }
.mlf.on { background: var(--brand); color: #fff; }
.mlf .count { background: var(--brand); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; }
.mlf.on .count { background: #fff; color: var(--brand); }
.mllist { min-height: 300px; overflow: hidden; }
.mlbar { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
.mlbar input[type=search] { flex: 1; min-width: 120px; }
.mlbulk { display: flex; gap: 6px; align-items: center; padding: 8px 10px; background: var(--bg); border-bottom: 1px solid var(--line); flex-wrap: wrap; font-size: 13px; }
.mlrow { display: flex; gap: 6px; align-items: flex-start; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.mlrow:hover { background: var(--bg); }
.mlrow.on { background: #e8eefc; box-shadow: inset 3px 0 0 var(--brand); }
.mlrow.unread .mlfrom, .mlrow.unread .mlsubj { font-weight: 700; }
.mlrow input { margin-top: 2px; }
.mlstar { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; color: #999; }
.mlstar.on { color: #e3a008; }
.mlmain { flex: 1; min-width: 0; }
.mltop { display: flex; justify-content: space-between; gap: 6px; }
.mlfrom, .mlsubj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mldate { color: var(--muted); white-space: nowrap; font-size: 12px; }
.mlsubj { color: var(--ink); }
.mlrow:not(.unread) .mlsubj { color: var(--muted); }
.mlpager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 8px 10px; }
.mlread { min-height: 300px; }
.mltools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.mlback { display: none; }
.mlh { margin: 4px 0 8px; font-size: 19px; word-break: break-word; }
.mlmeta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mlto { margin: 4px 0 8px; word-break: break-word; }
.mlatts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mlatt { border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: var(--bg); font-size: 13px; }
.mlimgs { background: #fff8e1; border: 1px solid #f5d77a; border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.mlframe { width: 100%; height: calc(100vh - 330px); min-height: 360px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.mlconnect { max-width: 360px; padding: 16px; }
.mltb { display: flex; gap: 4px; flex-wrap: wrap; }
.mled { min-height: 220px; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
.mled:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.mled p { margin: 0 0 6px; }
#mlfsize.err { color: var(--bad); font-weight: 600; }
.mlusers { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin-top: 6px; }
.mluser { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding: 2px 0; }
@media (max-width: 1100px) { .mlwrap { grid-template-columns: 180px 1fr; } .mlread { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .mlwrap { grid-template-columns: 1fr; }
  .mlside { position: static; }
  .mlwrap.reading .mlside, .mlwrap.reading .mllist { display: none; }
  .mlwrap:not(.reading) .mlread { display: none; }
  .mlback { display: inline-block; }
  .mlframe { height: 65vh; }
}
/* v1.1: tabs, calendar, contacts, settings */
.mltabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 10px; border-bottom: 1px solid var(--line); }
.mltabs a { padding: 8px 14px; color: var(--ink); text-decoration: none; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 14px; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.mltabs a:hover { background: var(--bg); }
.mltabs a.on { background: var(--panel); border-color: var(--line); color: var(--brand); }
.mltabs .mltadm { margin-left: auto; font-weight: 500; color: var(--muted); }
.mldst { margin-right: auto; align-self: center; }
.mcbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mcnav { display: flex; gap: 6px; align-items: center; } .mcnav b { font-size: 17px; margin-left: 6px; }
.mccals { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.mccal { display: inline-flex; align-items: center; gap: 6px; }
.mcdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mcgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.mchd { padding: 6px; font-size: 12px; font-weight: 700; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.mcday { min-height: 96px; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mcday:hover { background: var(--bg); }
.mcday.out { background: #fafbfc; } .mcday.out .mcn { color: #b0b7c3; }
.mcn { font-size: 12px; font-weight: 600; align-self: flex-end; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; }
.mcday.today .mcn { background: var(--brand); color: #fff; }
.mcev { border: 0; text-align: left; font: inherit; font-size: 12px; padding: 1px 5px; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--c) 14%, #fff); color: #1d2433; border-left: 3px solid var(--c); max-width: 100%; }
.mcev.all { background: var(--c); color: #fff; }
.mct { color: var(--muted); font-variant-numeric: tabular-nums; } .mcev.all .mct { color: #fff; }
.mcmore { border: 0; background: none; color: var(--brand); font-size: 12px; text-align: left; cursor: pointer; padding: 0 4px; }
.mclday { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mclday.today .mcldate { color: var(--brand); font-weight: 700; }
.mcldate { font-weight: 600; font-size: 14px; }
.mclrow { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; } .mclrow .mcev { max-width: 60%; }
.mcdel { display: flex; gap: 6px; margin-top: 6px; }
.mbwrap { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 12px; align-items: start; }
.mbwrap > .card { margin-bottom: 0; }
.mbrow { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.mbrow:hover { background: var(--bg); } .mbrow.on { background: #e8eefc; box-shadow: inset 3px 0 0 var(--brand); }
.mbav { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.mbav.big { width: 52px; height: 52px; font-size: 22px; }
.mbhead { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.mbfields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mlsigbox { margin-bottom: 12px; } .mlsiged { min-height: 80px; margin-top: 4px; }
.mptrust { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mptrust a { text-decoration: none; margin-left: 4px; }
@media (max-width: 760px) {
  .mbwrap { grid-template-columns: 1fr; }
  .mcday { min-height: 64px; } .mcev { font-size: 10px; padding: 0 3px; } .mct { display: none; }
  .mclday { grid-template-columns: 1fr; gap: 4px; }
  .mltabs a { padding: 7px 9px; font-size: 13px; } .mltabs .mltadm { margin-left: 0; }
}
.mbbk { font-size: 10px; font-weight: 500; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
/* v1.4: company footer, print */
.mlfootbox { margin-top: 2px; }
.mlfootpv { border: 1px dashed var(--line); border-radius: 6px; padding: 4px 10px 10px; background: #fff; margin-top: 4px; pointer-events: none; overflow-x: auto; }
.mlfootpv.off { opacity: .35; filter: grayscale(1); }
.mlfootpv table { width: auto !important; margin: 0; border: 0; box-shadow: none; background: none; }
.mlfootpv td, .mlfootpv th, .mlfootpv tr { padding: 0; border-bottom: 0; background: none; }
.mlfootpv tr:hover td { background: none; }
/* v1.5: footer layout (admin) */
.mffwrap { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.mffh { margin: 14px 0 4px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.mffrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; }
.mffrow > span { width: 70px; font-size: 13px; font-weight: 600; }
.mffrow input[type=range] { flex: 1; min-width: 120px; }
.mffrow b { min-width: 46px; font-size: 13px; font-variant-numeric: tabular-nums; }
.mffrow input[type=color] { width: 40px; height: 30px; padding: 2px; }
.mfflogo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 6px; }
.mffprev { position: sticky; top: 8px; }
.mffmail { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #1d2433; }
.mlfootpv.nob { border: 0; padding: 0; }
@media (max-width: 900px) { .mffwrap { grid-template-columns: 1fr; } .mffprev { position: static; } }