:root {
  --bg: #f3f5f9; --panel: #ffffff; --text: #1d2433; --muted: #66708a; --line: #e2e6ef;
  --brand: #1d4380; --brand-d: #15325f; --brand-l: #e8eef8;
  --accent: #d7df21; --accent-d: #bcc31a;
  --side: #12264a; --side-t: #c3cde0; --side-h: #1d3661;
  --ok: #138a52; --ok-l: #e3f5ec; --warn: #b26a00; --warn-l: #fff3df; --bad: #c62f3c; --bad-l: #fde8ea; --info-l: #e8eefc; --grey-l: #eef0f4;
  --radius: 8px; --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 0; font-weight: 600; }
h2 { font-size: 15px; margin: 0 0 10px; font-weight: 600; }
h3 { font-size: 13px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* layout */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { background: var(--side); color: var(--side-t); padding: 0 0 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.logo { display: flex; align-items: center; gap: 10px; padding: 16px 18px; color: #fff; font-weight: 700; font-size: 16px; border-bottom: 1px solid #1f3150; }
.logo .mark { width: 32px; height: 32px; border-radius: 7px; background: var(--brand); display: grid; place-items: center; font-size: 13px; }
.logo small { display: block; font-weight: 400; font-size: 11px; color: var(--side-t); }
.nav-group { padding: 12px 10px 0; }
.nav-group .gt { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; color: #7c8aa5; cursor: pointer; border-radius: 6px; }
.nav-group .gt:hover { color: #c3cde0; background: rgba(255,255,255,.04); }
.nav-group .gt .chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.nav-group.collapsed .gt .chev { transform: rotate(-45deg); }
.nav-group.collapsed .gi { display: none; }
.nav-group.collapsed { padding-bottom: 0; }
.nav-tools { display: flex; justify-content: flex-end; padding: 6px 14px 0; }
.nav-tools button { background: none; border: 0; color: #7c8aa5; font-size: 11.5px; cursor: pointer; padding: 2px 4px; }
.nav-tools button:hover { color: #fff; text-decoration: underline; }
.nav-group a { display: block; color: var(--side-t); padding: 6px 10px; border-radius: 6px; font-size: 13.5px; }
.nav-group a:hover { background: var(--side-h); color: #fff; text-decoration: none; }
.nav-group a.active { background: var(--accent); color: var(--side); font-weight: 600; }
.logo img { height: 34px; width: auto; display: block; }
.side .logo { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 18px 14px; }
.side .logo img { align-self: center; }
.side .logo img { height: 50px; }
.side .logo .prod { border-left: 0; padding-left: 0; font-size: 14px; font-weight: 600; color: #fff; }
.side .logo .prod b { font-size: 17px; margin-right: 6px; letter-spacing: .01em; }
.side .logo .prod small { display: block; font-size: 12.5px; font-weight: 400; color: var(--side-t); margin-top: 2px; }
.logo .prod { border-left: 1px solid #2f4a78; padding-left: 10px; line-height: 1.2; }
.logo .prod b { color: var(--accent); font-size: 15px; }
.login .logo img { height: 46px; }
.login .logo .prod { border-left-color: var(--line); }
.login .logo .prod b { color: var(--side); }
.ph .brandlogo { height: 46px; margin-bottom: 6px; display: block; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; background: var(--panel); border-bottom: 1px solid var(--line); padding: 10px 22px; position: sticky; top: 0; z-index: 5; }
.top .sp { flex: 1; }
.top .who { font-size: 13px; color: var(--muted); }
.menu-btn { display: none; }
#view { padding: 20px 22px 40px; max-width: 1400px; width: 100%; }

.page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head .sp { flex: 1; }
.crumb { font-size: 12px; color: var(--muted); margin-bottom: 2px; }

/* controls */
button, .btn { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 7px 13px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
button:hover, .btn:hover { border-color: #c4cbd9; text-decoration: none; }
.btn-p { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-p:hover { background: var(--brand-d); border-color: var(--brand-d); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-bad { color: var(--bad); }
.btn-sm { padding: 3px 8px; font-size: 12.5px; }
button:disabled { opacity: .55; cursor: default; }
input, select, textarea { font: inherit; color: var(--text); background: #fff; border: 1px solid #cfd5e1; border-radius: 6px; padding: 7px 9px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #b7d3f3; border-color: var(--brand); }
input:disabled, select:disabled, textarea:disabled { background: #f6f7fa; color: #4a5268; }
textarea { resize: vertical; }
label.chk { display: flex; align-items: center; gap: 8px; font-weight: 400; padding-top: 6px; }
label.chk input { width: auto; }
.search { max-width: 280px; }

/* cards & grids */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.card + .card { margin-top: 16px; }
/* consistent spacing between stacked sections; cards side by side in a grid line up */
.grid > .card + .card, .grid > .card { margin-top: 0; }
.grid + .card, .card + .grid, .grid + .grid, .tbl-wrap + .card, .card + .tbl-wrap { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .l { font-size: 12px; color: var(--muted); }
.kpi .v { font-size: 22px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12px; color: var(--muted); }
.kpi.bad .v { color: var(--bad); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 16px; }
.fld label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
.fld .req { color: var(--bad); }
.fld .hint { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.fld.wide { grid-column: 1 / -1; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* tables */
.tbl-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; font-weight: 600; color: var(--muted); background: #f8f9fc; white-space: nowrap; position: sticky; top: 0; }
tbody tr:hover { background: #f7faff; }
tr.click { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 650; background: #f8f9fc; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.mini td, .mini th { padding: 6px 8px; font-size: 13px; }

/* badges */
.b { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 12px; font-weight: 500; background: var(--grey-l); color: #4a5268; white-space: nowrap; }
.b-ok { background: var(--ok-l); color: var(--ok); }
.b-warn { background: var(--warn-l); color: var(--warn); }
.b-bad { background: var(--bad-l); color: var(--bad); }
.b-info { background: var(--info-l); color: var(--brand); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.filters select, .filters input { width: auto; min-width: 140px; }

/* document editor */
.items td { padding: 5px 6px; }
.items input, .items select, .items textarea { padding: 5px 6px; }
.items .c-prod { min-width: 220px; }
.items .c-desc { min-width: 200px; }
.items .c-n { width: 82px; min-width: 82px; }
.items td.c-n input { min-width: 70px; }
.items .c-sn { min-width: 150px; }
.totals { margin-left: auto; width: 320px; max-width: 100%; }
.totals div { display: flex; justify-content: space-between; padding: 4px 0; font-variant-numeric: tabular-nums; }
.totals .grand { border-top: 2px solid var(--text); margin-top: 6px; padding-top: 8px; font-weight: 700; font-size: 16px; }
.status-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* timeline */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { padding: 8px 0 8px 14px; border-left: 2px solid var(--line); position: relative; }
.tl li::before { content: ''; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.tl .m { font-size: 12px; color: var(--muted); }

/* bars */
.bars { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding-top: 10px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 11.5px; color: var(--muted); }
.bars .bar i { display: block; width: 100%; max-width: 46px; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 2px; }
.bars .bar b { font-weight: 500; color: var(--text); font-size: 11px; margin-bottom: 3px; }

/* modal, toast, login */
.modal-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--panel); border-radius: 10px; width: 560px; max-width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.modal .mh { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal .mh h2 { margin: 0; flex: 1; }
.modal .mb { padding: 16px 18px; }
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: #1d2433; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); max-width: 380px; }
.toast.err { background: var(--bad); }
.login { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 85% 15%, rgba(215,223,33,.18), transparent 40%), linear-gradient(135deg, #0d1c38, #1d4380); padding: 16px; }
.login .card { width: 360px; max-width: 100%; padding: 28px; }
.login .logo { color: var(--text); border: 0; padding: 0 0 18px; }
.login .logo small { color: var(--muted); }
.muted { color: var(--muted); }
.right { text-align: right; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sn-list { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.result-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }

/* dropdown menu */
.menu-wrap { position: relative; }
.menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 6px; z-index: 20; min-width: 210px; }
.menu.open { display: flex; flex-direction: column; gap: 2px; }
.menu > button, .menu > a { border: 0; justify-content: flex-start; width: 100%; background: transparent; }
.menu > button:hover, .menu > a:hover { background: var(--brand-l); }

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.cal .dow { background: #f8f9fc; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.cal .day { min-height: 108px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 5px; font-size: 12px; cursor: pointer; }
.cal .day:nth-child(7n) { border-right: 0; }
.cal .day.out { background: #fafbfd; color: #a3aabb; }
.cal .day.today .dn { background: var(--brand); color: #fff; border-radius: 10px; padding: 0 6px; }
.cal .dn { font-weight: 600; display: inline-block; margin-bottom: 2px; }
.ev { display: block; border-radius: 4px; padding: 1px 5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); background: var(--brand-l); border-left: 3px solid var(--brand); }
.ev:hover { text-decoration: none; filter: brightness(.96); }
.ev.followup { background: var(--warn-l); border-color: var(--warn); }
.ev.amc { background: var(--bad-l); border-color: var(--bad); }
.ev.quote { background: var(--grey-l); border-color: #8a93a8; }
.ev.done { text-decoration: line-through; opacity: .6; }

/* pipeline board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.col { background: #eef1f6; border-radius: var(--radius); padding: 8px; min-height: 200px; }
.col.over { outline: 2px dashed var(--brand); }
.col h3 { display: flex; justify-content: space-between; margin: 2px 4px 8px; }
.opp { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow); font-size: 13px; }
.opp .v { font-weight: 600; }

/* print */
.print-page { background: #fff; max-width: 900px; margin: 0 auto; padding: 28px 32px; color: #111; font-size: 13px; }
.print-page table th { background: #f1f3f7; color: #111; position: static; }
.print-page th, .print-page td { border: 1px solid #c9ced8; padding: 5px 7px; }
.ph { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid var(--brand); padding-bottom: 12px; margin-bottom: 14px; }
.ph .co { font-size: 22px; font-weight: 700; color: var(--brand); }
.pt { text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .08em; margin: 6px 0 14px; }
.pbox { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #c9ced8; margin-bottom: 14px; }
.pbox > div { padding: 8px 10px; }
.pbox > div + div { border-left: 1px solid #c9ced8; }
.sign { text-align: right; margin-top: 40px; }
.print-page + .print-page { margin-top: 28px; border-top: 2px dashed var(--line); }
.annex table th { white-space: normal; font-size: 11px; }
.dist td, .dist th { padding: 4px 6px; }
.dist input { width: 64px; padding: 4px 5px; text-align: right; }
.dist .over { background: var(--bad-l); }
.dist .short { background: var(--warn-l); }
.dist .ok { background: var(--ok-l); }
body.printing .side, body.printing .top { display: none; }
body.printing .shell { display: block; }
body.printing #view { padding: 0; max-width: none; }
@media print {
  .no-print, #toasts { display: none !important; }
  body { background: #fff; }
  .print-page { padding: 0; max-width: none; }
  .print-page + .print-page { page-break-before: always; margin-top: 0; border-top: 0; }
  @page { margin: 12mm; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; width: 250px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; }
  .menu-btn { display: inline-flex; }
  .g2, .g3 { grid-template-columns: 1fr; }
  #view { padding: 14px 12px 40px; }
  .top { padding: 10px 12px; }
  .pbox { grid-template-columns: 1fr; }
}

/* ---------- settings (same pattern as the COMnet helpdesk) ---------- */
.set-head { margin-bottom: 16px; }
.set-head h1 { font-size: 26px; font-weight: 600; margin: 0 0 2px; }
.seg { display: inline-flex; gap: 2px; background: #f1f3f5; border-radius: 8px; padding: 4px; margin: 14px 0 6px; }
.seg a { padding: 4px 12px; border-radius: 5px; font-size: 14px; font-weight: 600; color: var(--text); }
.seg a:hover { text-decoration: none; background: rgba(255, 255, 255, .6); }
.seg a.on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .1); }
.utabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid #dee2e6; margin-top: 8px; }
.utabs a { padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--text); border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.utabs a:hover { text-decoration: none; background: #f8f9fa; }
.utabs a.on { border-bottom-color: var(--accent); }
.set-desc { margin: 12px 0 0; font-size: 13px; }
.set-card { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.set-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; text-transform: none; letter-spacing: normal; color: var(--text); }
.set-card > p.muted { margin: 0 0 12px; font-size: 13px; }
.set-card > h3 + .form-grid { margin-top: 12px; }
.set-card.callout { background: #fff4e6; border-color: #ffe8cc; color: #9a3c0b; }
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 4px 0; }
.switch.wide { grid-column: 1 / -1; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { flex: none; width: 38px; height: 20px; border-radius: 20px; background: #dee2e6; position: relative; transition: background .15s; margin-top: 1px; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { left: 21px; }
.switch input:focus-visible + .track { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch .sw-text { display: flex; flex-direction: column; font-size: 14px; }
.switch .sw-text small { color: #868e96; font-size: 12px; margin-top: 2px; }
.page-head.sub-head h2 { margin: 0; font-size: 18px; }
.page-head.sub-head { margin: -4px 0 12px; justify-content: flex-end; }

/* sign-in page: single sign-on */
.login .sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px; font-weight: 600; background: #fff; border: 1px solid #c9ced6; margin: 6px 0 2px; color: var(--text); }
.login .sso-btn:hover { background: #f8f9fa; text-decoration: none; }
.login .or { display: flex; align-items: center; gap: 10px; color: #868e96; font-size: 12px; margin: 14px 0 6px; }
.login .or::before, .login .or::after { content: ''; flex: 1; border-top: 1px solid #e2e6ef; }
.login .login-err { background: var(--bad-l); color: var(--bad); border-radius: 6px; padding: 8px 10px; font-size: 13px; margin-bottom: 10px; }

/* ---------- users (like the COMnet helpdesk) ---------- */
.btn-lime { background: var(--accent); color: #1a1a1a; border: 0; font-weight: 600; padding: 8px 16px; border-radius: 8px; }
.btn-lime:hover { background: var(--accent-d); }
.users-card { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; }
.users-tools { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid #dee2e6; flex-wrap: wrap; }
.users-tools .seg a .muted { font-weight: 400; font-size: 12px; }
.users-tbl th { font-size: 13px; font-weight: 700; color: #1a1a1a; background: #fff; }
.users-tbl td { vertical-align: middle; }
.users-tbl tbody tr { cursor: pointer; }
.users-tbl tbody tr:hover { background: #f8f9fa; }
.users-tbl tr.u-off td { opacity: .6; }
.rb { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.rb-admin { background: #f0f3c4; color: #575b09; }
.rb-manager { background: #e7f0ff; color: #1d4380; }
.rb-sales { background: #e6fcf5; color: #087f5b; }
.rb-purchase { background: #fff4e6; color: #a5470b; }
.rb-accounts { background: #f3f0ff; color: #5f3dc4; }
.rb-support { background: #f4f6d0; color: #575b09; }
.rb-hr { background: #fff0f6; color: #a61e4d; }
.rb-grey { background: #f1f3f5; color: #343a40; }
.rb-ok { background: var(--ok-l); color: var(--ok); }
.rb-warn { background: var(--warn-l); color: var(--warn); }
.rb-bad { background: var(--bad-l); color: var(--bad); }
.users-tbl .menu-wrap { position: relative; display: inline-block; }
.users-tbl .dots { border: 0; background: transparent; font-size: 18px; line-height: 1; padding: 2px 8px; }
.users-tbl .menu { position: fixed; right: auto; left: auto; top: auto; min-width: 190px; padding: 4px; border-radius: 8px; box-shadow: 0 8px 24px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.08); z-index: 1000; }
.users-tbl .menu.open { display: flex; flex-direction: column; gap: 0; }
.users-tbl .menu > a { display: block; padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--text); text-align: left; white-space: nowrap; }
.users-tbl .menu > a:hover { background: #f1f3f5; text-decoration: none; }
.users-tbl .menu > a.danger { color: var(--bad); }
.users-tbl .menu > .sep { height: 1px; background: #eef0f4; margin: 4px 0; }
details.set-card > summary { cursor: pointer; }

.emp-match { padding: 8px 0 2px; font-size: 14px; }
.master-tbl tbody tr:hover { background: #f8f9fa; }

/* sign-in card (like the helpdesk) */
.login .login-card { width: 400px; max-width: calc(100vw - 32px); border-top: 3px solid var(--accent); }
.login .login-card .form-grid { grid-template-columns: 1fr 1fr; }
.login .login-h { font-size: 22px; font-weight: 600; margin: 14px 0 2px; }
.login .login-sub { margin: 0 0 14px; font-size: 13px; }
.login .login-btn { width: 100%; justify-content: center; margin-top: 16px; padding: 10px; }
.login .small-link { font-weight: 400; font-size: 12px; }
.login .login-alt { text-align: center; font-size: 13px; margin: 14px 0 0; color: var(--muted); }
.login .login-ok { background: var(--ok-l); color: var(--ok); border-radius: 6px; padding: 12px; font-size: 14px; margin-top: 14px; line-height: 1.5; }
.login .login-err { margin-top: 10px; }
.login .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .login .login-card .form-grid { grid-template-columns: 1fr; } }
.req-card { border-left: 4px solid var(--accent); }
.req-card h3 .rb { vertical-align: middle; margin-left: 6px; }
.login .fld label.row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }

/* document trail timeline */
.tl-card { margin-bottom: 16px; }
.timeline { position: relative; padding-left: 4px; }
.tl-item { position: relative; display: flex; gap: 14px; padding: 8px 0 10px; }
.tl-item::before { content: ''; position: absolute; left: 6px; top: 22px; bottom: -8px; width: 2px; background: #e2e6ef; }
.tl-item:last-child::before { display: none; }
.tl-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c9ced6; background: #fff; margin-top: 3px; position: relative; z-index: 1; }
.tl-dot.tl-opp { border-color: var(--brand); }
.tl-dot.tl-pay { border-color: var(--ok); background: var(--ok-l); }
.tl-item.current .tl-dot { border-color: var(--accent-d); background: var(--accent); }
.tl-item.current .tl-body { background: #fbfce9; border-radius: 6px; padding: 4px 8px; margin: -4px 0 -4px -8px; }
.tl-body { flex: 1; min-width: 0; }
.tl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-no { font-weight: 700; color: #575b09; }
a.tl-no:hover { color: #3d4006; }
.tl-type { font-size: 13px; color: var(--text); }
.tl-when { font-size: 12px; color: #868e96; }
.tl-text { font-size: 14px; margin-top: 2px; }
.tl-sub { font-size: 12px; color: #868e96; margin-top: 2px; }
.timeline.folded .tl-item:not(.current):nth-child(n+5):not(:nth-last-child(-n+2)) { display: none; }

/* document page: trail in a side column */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.doc-main { min-width: 0; }
.doc-main > .card:first-child { margin-top: 0; }
.doc-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.doc-side .tl-card { padding: 12px 12px 6px; margin: 0; }
.tl-title { margin: 0; flex: 1; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--text); }
.tl-title .muted { font-weight: 400; font-size: 12px; }
.doc-side .tl-item { gap: 10px; padding: 5px 0 8px; }
.doc-side .tl-item::before { left: 5px; top: 18px; }
.doc-side .tl-dot { width: 12px; height: 12px; margin-top: 2px; }
.doc-side .tl-top { gap: 6px; }
.doc-side .tl-no { font-size: 13px; }
.doc-side .tl-top .b { font-size: 10.5px; padding: 1px 6px; }
.doc-side .tl-text { font-size: 13px; }
.doc-side .tl-sub { font-size: 11.5px; margin-top: 1px; }
.doc-side .tl-item.current .tl-body { margin: -3px -4px -3px -6px; padding: 3px 4px 3px 6px; }
@media (max-width: 1100px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-side { position: static; max-height: none; }
}
@media print { .doc-side { display: none; } .doc-layout { display: block; } }

.doc-layout + * { margin-top: 16px; }
.doc-side { max-height: none; }
.doc-layout { margin-bottom: 0; }

/* ---------- travel & expenses ---------- */
.tv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tv-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 12px 14px; color: var(--text); font-weight: 600; font-size: 14px; position: relative; }
.tv-tile:hover { border-color: var(--accent-d); text-decoration: none; box-shadow: var(--shadow); }
.tv-tile .tv-ico { font-size: 22px; }
.tv-tile .rb { position: absolute; top: 10px; right: 10px; }
.tv-svc { display: flex; flex-wrap: wrap; gap: 8px; }
.tv-svc-tile { cursor: pointer; position: relative; }
.tv-svc-tile input { position: absolute; opacity: 0; left: 0; top: 0; width: 1px; height: 1px; margin: 0; }
.tv-svc-tile span { display: inline-block; padding: 8px 16px; border: 1px solid #c9ced6; border-radius: 999px; font-weight: 600; font-size: 14px; background: #fff; }
.tv-svc-tile input:checked + span { background: var(--accent); border-color: var(--accent-d); }
.tv-svc-tile input:focus-visible + span { outline: 2px solid var(--brand); }
.tv-choice-sec { border-top: 1px solid #eef0f4; padding: 10px 0; }
.tv-crow { display: grid; grid-template-columns: 40px 1.4fr 1.4fr 110px 36px; gap: 8px; align-items: center; margin-top: 8px; }
.tv-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; font-size: 14px; }
.tv-kv > div > span { display: block; font-size: 12px; color: #868e96; }
.tv-kv > div.wide { grid-column: 1 / -1; }
.tv-osec { border-top: 1px solid #eef0f4; padding: 10px 0; }
.tv-osec:first-of-type { border-top: 0; }
.tv-osec-h { font-weight: 600; margin-bottom: 6px; }
.tv-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e2e6ef; border-radius: 8px; margin-bottom: 6px; }
.tv-opt.sel { border-color: var(--ok); background: var(--ok-l); }
.tv-opt .num { text-align: right; min-width: 110px; }
.tv-addopt { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tv-addopt input, .tv-addopt select { flex: 1; min-width: 120px; }
.tv-addopt input[type=number] { max-width: 120px; }
.tv-money > div { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.tv-money > div span { color: #66708a; }
.tv-money .tot { border-top: 1px solid #eef0f4; margin-top: 4px; padding-top: 6px; font-size: 14px; }
.tv-mini { font-size: 12.5px; padding: 2px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tv-mini .b { font-size: 10.5px; }
.tv-appr { width: 100px; text-align: right; }
.stepper { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; }
.stepper .step { flex: 1; min-width: 120px; padding: 8px 10px; font-size: 12px; font-weight: 600; background: #f1f3f5; color: #868e96; border-radius: 6px; position: relative; }
.stepper .step.done { background: #eef4d0; color: #575b09; }
.stepper .step.done::before { content: '✓ '; }
.stepper .step.current { background: var(--accent); color: #1a1a1a; }
.stepper .step.stopped { background: var(--bad-l); color: var(--bad); }
.tv-bar { display: grid; grid-template-columns: 140px 1fr 100px; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0; }
.tv-bar > div { display: flex; height: 12px; background: #f1f3f5; border-radius: 6px; overflow: hidden; }
.tv-bar i { display: block; height: 100%; }
.tv-bar i.t, .tv-key.t { background: #1d4380; }
.tv-bar i.c, .tv-key.c { background: #bcc31a; }
.tv-bar b { text-align: right; }
.tv-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin: 0 4px 0 8px; }
.tv-cols { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 10px; }
.tv-cols > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: #868e96; }
.tv-cols i { display: block; width: 100%; max-width: 36px; background: #bcc31a; border-radius: 4px 4px 0 0; }
.b-grey { background: #f1f3f5; color: #495057; }
@media (max-width: 700px) { .tv-crow { grid-template-columns: 1fr 1fr; } .tv-bar { grid-template-columns: 90px 1fr 80px; } }
@media print { .page-head .row, .tv-lineform, .stepper { display: none !important; } }

/* audit trail */
.audit-tbl td { vertical-align: top; }
.audit-tbl tbody tr { cursor: default; }
.a-changes { margin-top: 4px; font-size: 12.5px; line-height: 1.6; }
.a-field { display: inline-block; min-width: 110px; color: #66708a; }
.a-det { margin-top: 4px; font-size: 12.5px; }
.a-det summary { cursor: pointer; font-size: 12px; }
.audit-tbl tr.a-fail { background: #fff6f6; }

.btn.is-off { opacity: .45; cursor: not-allowed; pointer-events: auto; }
.btn.is-off:hover { background: inherit; text-decoration: none; }
.users-tools select, .users-tools input[type=date] { width: auto; flex: none; max-width: 200px; }
.users-tools .chk { margin: 0; }

.utabs.page-tabs { margin: -4px 0 14px; }

.tv-waiting { border-left: 4px solid var(--accent); }
.tv-waiting a { display: inline-flex; align-items: center; gap: 6px; margin: 2px 18px 2px 0; color: var(--text); font-weight: 600; }

/* deal journey */
.dj-progress { height: 8px; background: #eef0f4; border-radius: 6px; overflow: hidden; margin: 0 0 14px; }
.dj-progress i { display: block; height: 100%; background: var(--accent); }
.dj-progress.sm { height: 6px; margin: 2px 0; }
.dj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dj-card { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.dj-card.cur { border: 2px solid var(--accent-d); box-shadow: 0 0 0 3px #f4f6d0; }
.dj-card.st-done { background: #fbfdf4; }
.dj-card.st-skipped, .dj-card.st-passed { opacity: .7; }
.dj-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #eef0f4; font-size: 12px; font-weight: 700; flex: none; }
.dj-card.st-done .dj-n, .dj-step.st-done .dj-n { background: var(--accent); }
.dj-card.cur .dj-n, .dj-step.cur .dj-n { background: var(--brand); color: #fff; }
.dj-team { font-size: 12px; color: #868e96; }
.dj-detail { font-size: 13px; }
.dj-mark { font-size: 12px; color: #66708a; font-style: italic; }
.dj-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dj-chip { display: flex; flex-direction: column; min-width: 104px; padding: 8px 10px; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; color: var(--text); }
.dj-chip:hover { text-decoration: none; border-color: var(--accent-d); }
.dj-chip b { font-size: 18px; }
.dj-chip span { font-size: 12.5px; font-weight: 600; }
.dj-chip small { font-size: 11px; color: #868e96; }
.dj-chip.on { border: 2px solid var(--accent-d); background: #fbfce9; }
.dj-chip.zero { opacity: .55; }
.dj-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.dj-row .dj-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #c9ced6; flex: none; }
.dj-row.st-done .dj-dot { background: var(--accent); border-color: var(--accent-d); }
.dj-row.cur .dj-dot { background: var(--brand); border-color: var(--brand); }
.dj-row.cur { font-weight: 700; }
.dj-row.st-skipped, .dj-row.st-passed { color: #adb5bd; }
.dj-row .dj-l { flex: 1; }
.dj-row .dj-t { font-size: 11px; color: #66708a; }
.dj-compact { margin-bottom: 12px !important; }
.dj-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.dj-step { flex: 1; min-width: 92px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 8px 4px; border-radius: 8px; color: var(--text); font-size: 12px; font-weight: 600; background: #f8f9fa; }
.dj-step:hover { text-decoration: none; background: #f1f3f5; }
.dj-step small { font-weight: 400; color: #868e96; font-size: 10.5px; }
.dj-step.cur { background: #fbfce9; outline: 2px solid var(--accent-d); }
.dj-step.st-skipped, .dj-step.st-passed { opacity: .55; }

/* favourites */
.nav-group a { display: flex; align-items: center; gap: 6px; }
.nav-group a .nl { flex: 1; min-width: 0; }
.nav-group a .star { opacity: 0; font-size: 13px; line-height: 1; color: #7c8aa5; padding: 0 2px; border-radius: 4px; transition: opacity .1s; }
.nav-group a:hover .star, .nav-group a .star:focus { opacity: 1; }
.nav-group a .star:hover { color: var(--accent); }
.nav-group a .star.on { opacity: 1; color: var(--accent); }
.nav-group a.active .star.on, .nav-group a.active .star { color: var(--side); }
.nav-group:not(.fav-group) a .star.on { opacity: .55; }
.nav-group:not(.fav-group) a:hover .star.on { opacity: 1; }
.fav-group .gt span { color: var(--accent); }
.fav-group a.fav-here { background: var(--side-h); color: #fff; }

/* line-item grid: every cell lines up on one row; numbers sit right like their headings */
.items td { vertical-align: middle; }
.items th { vertical-align: bottom; }
.items input, .items select { height: 34px; box-sizing: border-box; }
.items textarea { box-sizing: border-box; line-height: 1.4; display: block; }
.items textarea[rows="1"] { height: 34px; min-height: 34px; resize: vertical; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.items textarea[rows="1"]:focus { white-space: pre-wrap; }
.items textarea:focus { overflow: auto; }
.items input[type=number], .items td.c-n select { text-align: right; text-align-last: right; font-variant-numeric: tabular-nums; }
.items input[type=number]::-webkit-inner-spin-button, .items input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.items input[type=number] { -moz-appearance: textfield; }
.items td.num { padding-right: 10px; }

/* OEM BOQ import */
.modal.wide { width: 1100px; }
.oi-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 16px; border: 2px dashed var(--line); border-radius: 10px; cursor: pointer; text-align: center; background: var(--bg); }
.oi-drop:hover, .oi-drop.over { border-color: var(--brand); background: #eef3fb; }
.oi-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.oi-head { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 12px; background: var(--bg); border-radius: 8px; }
.oi-head > div { display: flex; flex-direction: column; font-size: 13px; }
.oi-head .muted { font-size: 11.5px; }
.oi-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin: 12px 0 6px; }
.oi-opts .fld { display: flex; flex-direction: column; }
.oi-opts label.chk { padding-top: 2px; }
.oi-tbl { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.oi-tbl table { margin: 0; }
.oi-tbl td { vertical-align: top; font-size: 12.5px; }
.oi-tbl tr.off td { opacity: .4; }

.items .c-part { min-width: 150px; }
.items .c-part input { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; }
.items td.c-n input[data-k=rate] { min-width: 120px; }

/* document import */
.di-note { padding: 8px 12px; border-radius: 8px; background: #fff8e1; border: 1px solid #f3dfa2; margin-bottom: 8px; font-size: 13.5px; }
.di-note.bad { background: #fdecec; border-color: #f2c2c2; }
.src-files h3 { margin: 0 0 6px; font-size: 14px; }
.src-files .row + .row { margin-top: 4px; }

/* presales requests */
.ps-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 11px; text-align: center; margin-left: 4px; }
.ps-top { align-items: start; }
.kv td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 13.5px; }
.kv td:first-child { color: var(--muted); white-space: nowrap; width: 130px; }
.ps-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #eef3fb; color: #1d4380; font-size: 12px; margin: 1px 2px 1px 0; }
.ps-req { margin-top: 10px; padding: 10px 12px; background: var(--bg); border-radius: 8px; font-size: 13.5px; white-space: normal; }
.ps-round { margin-top: 10px; }
.ps-rh { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 6px; }
.ps-act { padding: 8px 10px; border-left: 3px solid #f0b429; background: #fffdf5; border-radius: 6px; margin-bottom: 8px; }
.ps-act.done { border-left-color: var(--ok); background: #f6fbf7; }
.ps-act.off { opacity: .55; border-left-color: #c9ced6; background: transparent; }
.ps-sum { margin: 4px 0; font-size: 13.5px; }
.ps-assign tr.off td { opacity: .55; }

.ps-newh { font-weight: 600; font-size: 13.5px; margin: 4px 0 6px; }
#ps-type .seg a { cursor: pointer; }

/* travel management overview */
.tv-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tv-kpi { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--text); }
.tv-kpi:hover { text-decoration: none; border-color: var(--brand); }
.tv-kpi .l { font-size: 12px; color: var(--muted); }
.tv-kpi .v { font-size: 22px; font-weight: 700; margin: 2px 0; }
.tv-kpi .s { font-size: 12px; color: var(--muted); line-height: 1.35; }
.tv-kpi.warn { border-left: 4px solid #f0b429; }
.tv-kpi .bad, .tv-ov .bad { color: var(--bad); font-weight: 600; }
.tv-ov .card h2 { font-size: 15px; }
.tv-ov .mini td { vertical-align: top; }
.tv-ov .mini .muted { font-size: 12px; }
.tv-empty { padding: 6px 0; }
.tv-sec { font-size: 15px; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- sign-in page ---------- */
.login { position: fixed; inset: 0; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 32px 16px;
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(215, 223, 33, .16), transparent 60%),
    radial-gradient(900px 900px at -20% 120%, rgba(255, 255, 255, .07), transparent 60%),
    radial-gradient(700px 420px at 15% 8%, rgba(70, 130, 220, .35), transparent 70%),
    linear-gradient(160deg, #0b1a36 0%, #13305f 55%, #1d4380 100%); }
.login::before, .login::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; }
.login::before { width: 820px; height: 820px; right: -260px; top: -360px; border: 1px solid rgba(255, 255, 255, .07); }
.login::after { width: 1100px; height: 1100px; left: -520px; bottom: -700px; background: rgba(255, 255, 255, .035); }
.lg-wrap { position: relative; z-index: 1; width: 440px; max-width: 100%; }
.login .login-card { width: 100%; max-width: none; padding: 30px 34px 30px; border-radius: 16px; border: 0; border-top: 5px solid var(--accent);
  box-shadow: 0 24px 60px rgba(4, 12, 30, .45); }
.lg-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.lg-logo { height: 40px; }
.lg-prod { font-size: 12px; line-height: 1.3; color: #6b7387; text-align: right; font-weight: 600; letter-spacing: .02em; }
.login .login-h { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 4px; color: #141a26; }
.login .login-sub { font-size: 14.5px; line-height: 1.5; margin: 0 0 20px; }
.login .fld label { font-weight: 700; font-size: 14px; color: #1d2433; margin-bottom: 6px; }
.login .fld .req { color: #d64545; }
.login .fld input, .login .fld select, .login .fld textarea { font-size: 15px; border-radius: 9px; border: 1px solid #c9ced6; }
.login .fld input, .login .fld select { height: 46px; padding: 0 14px; }
.login .fld textarea { padding: 10px 14px; }
.login .fld input:focus, .login .fld select:focus, .login .fld textarea:focus { border-color: #8aa4cf; box-shadow: 0 0 0 3px rgba(29, 67, 128, .14); outline: 0; }
.login .pw { position: relative; }
.login .pw input { padding-right: 46px; width: 100%; }
.login .pw .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: 0; background: none; color: #4a5268; justify-content: center; border-radius: 8px; }
.login .pw .eye:hover, .login .pw .eye.on { color: var(--side); background: #f1f3f7; }
.login .lg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 14px; }
.login .lg-row .chk { padding: 0; font-weight: 400; gap: 8px; }
.login .lg-row .chk input { width: 17px; height: 17px; }
.login .lg-row a { color: #5f6b00; font-weight: 600; }
.login .login-btn { height: 48px; font-size: 16px; font-weight: 700; border-radius: 10px; margin-top: 18px; }
.login .btn-lime.login-btn { color: #141a26; }
.login .sso-btn { height: 46px; border-radius: 10px; font-size: 15px; }
.login .or { margin: 18px 0 8px; }
.login .login-alt { margin-top: 18px; font-size: 14px; }
.login .login-alt a { font-weight: 600; }
.lg-foot { text-align: center; color: rgba(255, 255, 255, .62); font-size: 12.5px; line-height: 1.6; margin-top: 18px; }
@media (max-width: 480px) { .login .login-card { padding: 24px 20px; } .login .login-h { font-size: 26px; } .login .login-card .form-grid { grid-template-columns: 1fr; } }

/* live travel search */
.tvs-form { align-items: end; }
.tvs-res { margin-top: 10px; }
.tvs-tbl { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.tvs-tbl td { vertical-align: middle; font-size: 13px; }
.tvs-tbl .muted { font-size: 12px; }
.tvs-time { white-space: nowrap; }
.tvs-logo { width: 26px; height: 26px; object-fit: contain; }
.tvs-thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; }
.tvs-ksec { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.tvs-ksec table { margin-top: 6px; }
.tvs-kadd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tvs-kadd input { width: auto; flex: 1; min-width: 180px; }

/* button bars: everything on one line at one height, with room before the next card */
.actions { align-items: center; }
.actions > button, .actions > .btn, .actions > input, .actions > select { height: 36px; box-sizing: border-box; }
.actions > input, .actions > select { width: auto; }
.actions > label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0; }
.actions > label > input, .actions > label > select { width: auto; height: 36px; box-sizing: border-box; }
#view form > .actions:last-child { margin-bottom: 16px; }
.actions + .set-card, form + .set-card { margin-top: 16px; }

/* tabs: hover only tints the text; the selected tab is clearly marked */
.utabs a { color: #5b6476; border-bottom-width: 3px; }
.utabs a:hover { background: none; color: var(--text); }
.utabs a.on { color: var(--side); border-bottom-color: var(--accent); }

/* backup */
.bk-status { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.bk-kpi { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.bk-kpi b { font-size: 15px; }

/* ---------- sign-in page: brand panel + card ---------- */
.login { flex-direction: column; justify-content: center; gap: 22px; padding: 40px 28px 22px; }
.lg-split { position: relative; z-index: 1; width: 100%; max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 72px; align-items: center; margin: auto 0; }
.lg-brand { position: relative; color: #e8eefb; padding: 8px 0; }
.lg-brand-logo { height: 44px; margin-bottom: 26px; }
.lg-kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0b1a36; background: var(--accent); padding: 4px 10px; border-radius: 20px; }
.lg-title { font-size: 40px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 16px 0 12px; max-width: 560px; }
.lg-title span { color: var(--accent); }
.lg-tag { font-size: 16px; line-height: 1.55; color: rgba(232, 238, 251, .78); margin: 0 0 26px; max-width: 520px; }
.lg-mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 600px; }
.lg-mods li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(2px); }
.lg-mods b { display: block; color: #fff; font-size: 14.5px; }
.lg-mods small { display: block; color: rgba(232, 238, 251, .66); font-size: 12.5px; margin-top: 2px; line-height: 1.35; }
.lg-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #0b1a36; background: linear-gradient(135deg, #e4ea4a, var(--accent)); box-shadow: 0 6px 14px rgba(215, 223, 33, .22); }
.lg-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.lg-points li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(232, 238, 251, .82); }
.lg-points svg { width: 18px; height: 18px; color: var(--accent); }
/* decorative: soft rings and dots behind the brand panel */
.lg-art { position: absolute; inset: -150px -30px auto auto; width: 240px; height: 240px; pointer-events: none; z-index: -1; }
.lg-art i { position: absolute; border-radius: 50%; }
.lg-art i:nth-child(1) { inset: 0; border: 2px dashed rgba(215, 223, 33, .22); }
.lg-art i:nth-child(2) { inset: 40px; border: 1px solid rgba(255, 255, 255, .12); }
.lg-art i:nth-child(3) { width: 14px; height: 14px; top: 34px; right: 52px; background: var(--accent); box-shadow: 0 0 0 6px rgba(215, 223, 33, .18); }
.lg-art i:nth-child(4) { width: 9px; height: 9px; bottom: 50px; left: 30px; background: #7fb0ff; }
.lg-wrap { width: 100%; }
.lg-foot { margin-top: 14px; }
.lg-bottom { position: relative; z-index: 1; text-align: center; color: rgba(255, 255, 255, .5); font-size: 12.5px; }
@media (max-width: 1100px) { .lg-split { gap: 44px; grid-template-columns: minmax(0, 1fr) 420px; } .lg-title { font-size: 34px; } }
@media (max-width: 900px) {
  .login { padding: 28px 16px 18px; }
  .lg-split { grid-template-columns: 1fr; gap: 26px; max-width: 520px; }
  .lg-brand { text-align: center; padding: 0; }
  .lg-brand-logo { height: 38px; margin: 0 auto 16px; display: block; }
  .lg-title { font-size: 28px; margin: 12px auto 8px; }
  .lg-tag { font-size: 14.5px; margin: 0 auto 16px; }
  .lg-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lg-mods li { flex-direction: column; align-items: center; text-align: center; padding: 10px 6px; gap: 6px; }
  .lg-mods b { font-size: 12.5px; }
  .lg-mods small, .lg-points, .lg-art { display: none; }
  .lg-ic { width: 32px; height: 32px; }
  .lg-ic svg { width: 18px; height: 18px; }
}
@media (max-width: 520px) { .lg-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-title { font-size: 24px; } .lg-tag { display: none; } }
/* centre only when there is room (margin:auto), otherwise start at the top; phones: sign in first */
.login { justify-content: flex-start; }
@media (max-width: 900px) { .lg-wrap { order: 1; } .lg-brand { order: 2; } .lg-brand-logo { display: none; } }
/* company name above the COMnet One badge */
.lg-company { color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .01em; margin: -10px 0 12px; }
@media (max-width: 900px) { .lg-company { margin: 0 0 10px; font-size: 15px; } }

/* SLA */
.sla-lv { display: inline-block; min-width: 26px; text-align: center; padding: 1px 6px; border-radius: 6px; background: var(--side); color: #fff; font-weight: 700; font-size: 12px; }
.sla-mx td { vertical-align: top; }
.sla-part { padding: 4px 0; }
.sla-bar { height: 8px; background: #edf0f5; border-radius: 6px; overflow: hidden; margin: 6px 0 2px; }
.sla-bar i { display: block; height: 100%; border-radius: 6px; background: var(--ok); }
.sla-bar.warn i { background: #f0b429; }
.sla-bar.bad i { background: var(--bad); }
.sla-bar.pause i { background: #9aa3b5; }
/* company name beside the logo */
.lg-brandrow { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.lg-brandrow .lg-brand-logo { margin: 0; }
.lg-brandrow .lg-company { margin: 0; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .28); line-height: 1.2; }
@media (max-width: 900px) { .lg-brandrow { justify-content: center; margin-bottom: 10px; } .lg-brandrow .lg-company { border-left: 0; padding-left: 0; } }

/* forgot password without email: who can help */
.login .lg-help { background: #f4f6fb; border: 1px solid #e2e6ef; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: #3d4659; }
.login .lg-help ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.55; }
.login .lg-row a#tofg { white-space: nowrap; }

/* ticket work log: customer messages and customer-visible replies */
.tl li.tl-cust { background: #eef4ff; border-radius: 6px; }
.tl li.tl-pub { background: #f4fae6; border-radius: 6px; }

.rb-cust { background: #e7efff; color: #1d4380; }

/* customer page: overview + tabs, sections, 3-step new customer */
.cu-tabbar { margin: 0 0 14px; }
.cu-panel > .card { margin-bottom: 14px; }
.cu-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cu-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); text-align: left; }
.cu-kpi:hover { border-color: var(--brand); }
.cu-kpi span { font-size: 12px; color: var(--muted); }
.cu-kpi b { font-size: 19px; }
.cu-kpi.bad { border-left: 4px solid var(--bad); }
.cu-kpi.warn { border-left: 4px solid #f0b429; }
.cu-facts dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.cu-facts dt { color: var(--muted); }
.cu-facts dd { margin: 0; }
.cu-sec { grid-column: 1 / -1; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); padding: 10px 0 4px; }
.cu-sec[data-step="0"] { padding-top: 0; }
.cu-steps { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cu-step { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #eef1f6; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.cu-step span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 12px; }
.cu-step.on { background: var(--side); color: #fff; }
.cu-step.on span { background: var(--accent); color: #141a26; }
.cu-step.done { background: #e8f5ee; color: var(--ok); }
.cu-stepnav { display: flex; width: 100%; gap: 8px; margin-bottom: 8px; }
@media (max-width: 640px) { .cu-facts dl { grid-template-columns: 1fr; } .cu-facts dt { margin-top: 6px; } }

.preq-act { white-space: nowrap; }
.preq-act select { height: 30px; font-size: 13px; padding: 0 6px; }
@media (max-width: 1100px) { .preq-act { white-space: normal; } }


/* sign-in pages (staff + customer): helpdesk-style layout - brand in the top-left corner, card near the right edge, footer bottom-left */
@media (min-width: 901px) {
  .login { padding: 92px 56px 20px; }
  .lg-split { max-width: none; gap: 80px; grid-template-columns: minmax(0, 1fr) 440px; }
  .lg-split.pc-wide { grid-template-columns: minmax(0, 1fr) 580px; }
  .login > .lg-corner { position: absolute; top: 24px; left: 56px; margin: 0; z-index: 2; }
  .lg-bottom { align-self: stretch; text-align: left; }
}
.login > .lg-corner .lg-brand-logo { height: 40px; }
.login > .lg-corner .lg-company { color: var(--accent); font-weight: 700; font-size: 17px; }
.login > .lg-corner .lg-company small { display: block; color: rgba(232, 238, 251, .75); font-size: 12.5px; font-weight: 600; margin-top: 3px; letter-spacing: .01em; }
@media (max-width: 1100px) and (min-width: 901px) { .login { padding: 88px 32px 18px; } .login > .lg-corner { left: 32px; } .lg-split { gap: 48px; } }
@media (max-width: 900px) { .login > .lg-corner { position: static; justify-content: center; } }

/* line above the sign-in heading: plain orange capitals (as on the helpdesk) */
.lg-kicker { display: block; background: none; padding: 0; border-radius: 0; color: #ff7a3d; font-size: 13px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }

/* corner brand: one size on every sign-in page, larger logo and company name */
.login > .lg-corner { gap: 18px; }
.login > .lg-corner .lg-brand-logo { height: 54px; }
.login > .lg-corner .lg-company { font-size: 22px; padding-left: 18px; }
.login > .lg-corner .lg-company small { font-size: 14px; margin-top: 4px; }
@media (min-width: 901px) { .login { padding-top: 108px; } .login > .lg-corner { top: 26px; } }
@media (max-width: 1100px) and (min-width: 901px) { .login { padding-top: 104px; } }
@media (max-width: 900px) { .login > .lg-corner .lg-company { font-size: 18px; padding-left: 0; } }