:root {
  /* Atyab brand: plum #522B3A with warm earth neutrals */
  --maroon: #522B3A; --maroon-2: #6A3A4C; --plum-deep: #45232F;
  --accent: #A3778A; --accent-soft: #F3EBEE; --accent-tint: #E7D9DF; --accent-ink: #522B3A;
  --bg: #F5F1ED; --surface: #FFFFFF; --soft: #F8F4F1; --soft-2: #EFE8E3; --line: #E0D6D0; --line-2: #ECE5E0;
  --ink: #2B1A21; --muted: #6E5A61; --on-maroon: #F7EFE6; --locked: #F7F3F0;
  --side-w: 248px;
  --crit: #C62828; --crit-bg: #FDECEA;
  --high: #D9660A; --high-bg: #FEF1E6;
  --med: #E0B000; --med-bg: #FFF8DB; --med-ink: #5C4700;
  --low: #2E7D32; --low-bg: #E8F5E9;
  --none: #A9A0A4; --none-bg: #F4F1EE;
  --radius: 10px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "Segoe UI", Calibri, Arial, system-ui, sans-serif; }
a { color: var(--maroon); }
h1, h2, h3 { margin: 0; color: var(--maroon); text-wrap: balance; }
h1 { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; letter-spacing: .01em; }
h2 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
h3 { font-size: 15px; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.block { display: block; }
.nowrap { white-space: nowrap; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Sidebar (desktop) / top bar (phone) */
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); background: var(--maroon); color: var(--on-maroon); display: flex; flex-direction: column; gap: 22px; padding: 30px 18px 20px; z-index: 10; overflow-y: auto; }
.side-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; color: inherit; text-decoration: none; text-align: center; padding-bottom: 22px; border-bottom: 1px solid rgba(247,239,230,.16); }
.side-logo { width: 120px; height: auto; display: block; }
.side-app { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.side-app small { font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: none; opacity: .72; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 9px; color: var(--on-maroon); text-decoration: none; font-weight: 600; opacity: .86; }
.side-nav a:hover { background: rgba(247,239,230,.08); opacity: 1; }
.side-nav a.on { background: var(--on-maroon); color: var(--maroon); opacity: 1; }
.side-nav svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-nav .badge { margin-left: auto; }
.side-new { margin: 0; }
.side-user { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(247,239,230,.16); display: flex; flex-direction: column; gap: 8px; }
.side-links { display: flex; gap: 16px; align-items: center; }
.side-links form { margin: 0; }
.badge { background: var(--crit); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 800; padding: 1px 7px; line-height: 1.5; }
.who-name { display: flex; flex-direction: column; line-height: 1.25; font-weight: 600; font-size: 14px; }
.who-name small { font-size: 12px; opacity: .72; font-weight: 400; }
.who-link, .linkbtn { color: var(--on-maroon); font-size: 13.5px; opacity: .9; }
.linkbtn { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
body.has-side .page { margin-left: var(--side-w); max-width: none; padding-inline: clamp(16px, 3vw, 40px); }
body.has-side .page > * { max-width: 1240px; width: 100%; margin-inline: auto; }

/* Layout */
.page { max-width: 1280px; margin: 0 auto; padding: 22px 16px 64px; display: flex; flex-direction: column; gap: 16px; }
.head, .mr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.card.flush { padding: 0; }
.card.narrow { max-width: 480px; width: 100%; }
.card.center { margin: 40px auto; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.grid-2.wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.row-end { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
form.inline { display: inline; margin: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 14.5px; border-radius: 8px; border: 1px solid transparent; padding: 8px 15px; min-height: 40px; cursor: pointer; text-decoration: none; color: var(--ink); background: var(--surface); }
.btn-primary { background: var(--maroon); color: var(--on-maroon); }
.btn-primary:hover { background: var(--plum-deep); }
.btn-light { background: var(--on-maroon); color: var(--maroon); }
.btn-light:hover { background: #fff; }
.btn-ghost { border-color: var(--line); background: var(--surface); }
.btn-ghost:hover { background: var(--soft); }
.btn-sm { min-height: 32px; padding: 4px 11px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-danger-ghost { color: var(--crit); border-color: #E7B8B3; background: var(--surface); }
.btn-danger-ghost:hover { background: var(--crit-bg); }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer; color: var(--muted); }
.icon-btn:hover { color: var(--ink); background: var(--soft); }
.icon-btn.danger:hover { color: var(--crit); border-color: var(--crit); }
.push-right { margin-left: auto; }

/* Flash */
.flashes { display: flex; flex-direction: column; gap: 6px; }
.flash { padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.flash-success { background: var(--low-bg); border-color: #C3DCC6; }
.flash-error { background: var(--crit-bg); border-color: #EBC5C1; color: #7E2323; }
.flash-info { background: var(--med-bg); border-color: #EAD9A7; }
.view-only { margin: 0; padding: 9px 14px; border-radius: 8px; background: var(--soft); border-left: 4px solid var(--accent); font-size: 14px; }
.notice { background: var(--med-bg); border-radius: 8px; padding: 9px 14px; margin: 0; font-size: 14px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--accent); }
.kpi b { display: block; font-size: 24px; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.25; margin-top: 3px; }
.dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.dot svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dot-maroon { background: var(--maroon); color: var(--on-maroon); }
.dot-crit { background: var(--crit-bg); color: var(--crit); }
.dot-high { background: var(--high-bg); color: var(--high); }
.dot-low { background: var(--low-bg); color: var(--low); }
.dot-soft { background: var(--accent-soft); color: var(--maroon); }
.dot-done { background: var(--accent-tint); color: var(--maroon); }

/* Pipeline */
.pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pipeline a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; padding: 12px; border-radius: 8px; background: var(--soft); text-decoration: none; color: inherit; border: 1px solid transparent; height: 100%; }
.pipeline a:hover { border-color: var(--accent); }
.pl-n { grid-row: 1 / span 3; width: 26px; height: 26px; border-radius: 50%; background: var(--maroon); color: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; }
.pl-count { font-size: 24px; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-label { font-weight: 700; font-size: 13.5px; }
.pl-who { font-size: 12px; color: var(--muted); }
.stage-closed a { background: var(--low-bg); }
.stage-closed .pl-n { background: var(--low); }

/* Rows lists */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li { border-top: 1px solid var(--line-2); }
.row-link { display: flex; align-items: center; gap: 10px; padding: 9px 4px; text-decoration: none; color: inherit; }
.row-link:hover { background: var(--soft); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pills and badges */
.pill { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; background: var(--none-bg); color: var(--muted); }
.pill-critical { color: var(--crit); background: var(--crit-bg); }
.pill-high { color: var(--high); background: var(--high-bg); }
.pill-medium { color: var(--med-ink); background: var(--med-bg); }
.pill-low { color: var(--low); background: var(--low-bg); }
.pill.solid.pill-critical { background: var(--crit); color: #fff; }
.pill.solid.pill-high { background: var(--high); color: #fff; }
.pill.solid.pill-medium { background: var(--med); color: var(--med-ink); }
.pill.solid.pill-low { background: var(--low); color: #fff; }
.stage-badge { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; white-space: nowrap; background: var(--soft-2); color: var(--ink); }
.st-draft { background: #ECEAF3; color: #4A4268; }
.st-scope, .st-work { background: #E6F0F7; color: #1F5378; }
.st-approval { background: var(--accent-tint); color: var(--maroon); }
.st-review { background: #F1E7DC; color: #6B4A2E; }
.st-closed { background: var(--low-bg); color: var(--low); }
.cnt { display: inline-block; min-width: 26px; text-align: center; font-weight: 800; border-radius: 6px; padding: 1px 6px; }
.cnt-critical { background: var(--crit); color: #fff; }
.cnt-high { background: var(--high); color: #fff; }
.cnt-medium { background: var(--med); color: var(--med-ink); }
.cnt-low { background: var(--low); color: #fff; }

/* Activity */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.activity li:last-child { border-bottom: 0; }
.act-time { color: var(--muted); white-space: nowrap; min-width: 128px; font-variant-numeric: tabular-nums; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--soft); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.list { min-width: 900px; }
.card.flush table.list th:first-child, .card.flush table.list td:first-child { padding-left: 16px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--soft); }
tr.stripe-critical td:first-child { box-shadow: inset 4px 0 0 var(--crit); }
tr.stripe-high td:first-child { box-shadow: inset 4px 0 0 var(--high); }
tr.stripe-medium td:first-child { box-shadow: inset 4px 0 0 var(--med); }
tr.stripe-low td:first-child { box-shadow: inset 4px 0 0 var(--low); }
td.empty { text-align: center; color: var(--muted); padding: 32px; }
td.actions { white-space: nowrap; }
.muted-row td { color: var(--muted); }
table.matrix td, table.matrix th { padding: 7px 8px; }
table select { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: #fff; }

/* Tabs and filters */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 8px 16px; text-decoration: none; color: var(--muted); font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--maroon); border-bottom-color: var(--maroon); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters input, .filters select { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-height: 40px; }
.filters input[type=search] { flex: 1 1 240px; min-width: 0; }
.filters .clear { font-size: 14px; }
.count { margin-left: auto; color: var(--muted); font-size: 14px; }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted); }
input[type=text], input[type=date], input[type=datetime-local], input[type=password], input[type=search], input:not([type]), select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: #fff; min-height: 38px;
}
.filters input, .filters select { width: auto; }
textarea { resize: vertical; min-height: 70px; line-height: 1.45; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field.full { grid-column: 1 / -1; }
.ro { background: var(--locked); border: 1px solid var(--line-2); border-radius: 7px; padding: 8px 10px; min-height: 38px; }
.ro.pre { white-space: pre-line; }

/* MR page */
.mr-title { display: flex; align-items: center; gap: 14px; }
.print-logo { display: none; }
.stepper-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); padding: 4px 11px 4px 4px; border-radius: 999px; background: var(--soft); }
.steps li b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-size: 11.5px; }
.steps li.done { color: var(--maroon); background: var(--accent-soft); }
.steps li.done b { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps li.now { color: #fff; background: var(--maroon); }
.steps li.now b { background: var(--on-maroon); border-color: var(--on-maroon); color: var(--maroon); }
.stage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.stage-msg { flex: 1 1 360px; margin: 0; font-size: 14px; }
.stage-msg strong { color: var(--maroon); }
.stage-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.process { margin: 14px 0 0; padding: 8px 12px; background: var(--soft); border-left: 4px solid var(--accent); font-size: 13px; border-radius: 0 6px 6px 0; }
section.part { margin-top: 24px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 12px; }
.sec-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--maroon); color: #F7F0E6; border-radius: 4px; padding: 3px 8px; }
.sub { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.part-note { color: var(--muted); font-size: 13.5px; margin: 0; padding: 10px 12px; background: var(--soft); border-radius: 8px; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.lg-critical { background: var(--crit); } .lg-high { background: var(--high); } .lg-medium { background: var(--med); } .lg-low { background: var(--low); }

.req, .comp { border: 1px solid var(--line); border-left: 8px solid var(--none); border-radius: 8px; margin-bottom: 12px; background: #fff; scroll-margin-top: 80px; break-inside: avoid; page-break-inside: avoid; }
.req-head, .comp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 12px; background: var(--none-bg); border-radius: 0 7px 0 0; border-bottom: 1px solid var(--line-2); }
.comp-head .t { font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.req-title { font-weight: 700; }
.num { width: 28px; height: 28px; border-radius: 50%; background: var(--maroon); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; font-size: 13px; }
.p-critical { border-left-color: var(--crit); } .p-critical > .req-head, .p-critical > .comp-head { background: var(--crit-bg); }
.p-high { border-left-color: var(--high); } .p-high > .req-head, .p-high > .comp-head { background: var(--high-bg); }
.p-medium { border-left-color: var(--med); } .p-medium > .req-head, .p-medium > .comp-head { background: var(--med-bg); }
.p-low { border-left-color: var(--low); } .p-low > .req-head, .p-low > .comp-head { background: var(--low-bg); }
.prio { display: flex; gap: 6px; flex-wrap: wrap; }
.prio label { cursor: pointer; position: relative; }
.prio input { position: absolute; opacity: 0; pointer-events: none; }
.prio .pill { border: 2px solid var(--line); background: #fff; color: var(--muted); padding: 4px 12px; font-size: 12.5px; }
.prio input:checked + .pill-critical { background: var(--crit); border-color: var(--crit); color: #fff; }
.prio input:checked + .pill-high { background: var(--high); border-color: var(--high); color: #fff; }
.prio input:checked + .pill-medium { background: var(--med); border-color: var(--med); color: var(--med-ink); }
.prio input:checked + .pill-low { background: var(--low); border-color: var(--low); color: #fff; }
.prio input:focus-visible + .pill { outline: 3px solid var(--accent); outline-offset: 2px; }
.req-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px; padding: 12px; }
.comp-pad { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.fields-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.add-req { width: 100%; border: 2px dashed var(--accent); background: var(--accent-soft); color: var(--maroon); border-radius: 8px; padding: 11px; font-weight: 700; cursor: pointer; }
.add-req:hover { background: var(--accent-tint); }

/* Photos and files */
.photos { display: flex; flex-direction: column; gap: 6px; }
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.photo-grid:empty { display: none; }
.photo { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-tile { display: grid; place-items: center; height: 100%; font-size: 12px; padding: 6px; text-align: center; overflow-wrap: anywhere; }
.photo-x { position: absolute; top: 4px; right: 4px; border: 0; border-radius: 50%; width: 26px; height: 26px; background: rgba(43,26,33,.78); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }
.add-photo, .upload-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--line); border-radius: 6px; padding: 10px; min-height: 56px; color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; text-align: center; background: #fff; }
.upload-btn { min-height: 38px; padding: 6px 12px; display: inline-flex; }
.add-photo:hover, .upload-btn:hover { border-color: var(--accent); color: var(--maroon); }
.add-photo input, .upload-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-hint { font-size: 11.5px; color: var(--muted); text-align: center; }
.pending-files { font-size: 12.5px; color: var(--low); background: var(--low-bg); border-radius: 6px; padding: 5px 8px; }

/* Cost */
.basis-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.basis-field { width: min(420px, 100%); }
.quote { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px; align-items: end; padding: 10px; background: var(--soft); border-radius: 8px; }
.quote-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 38px; }
.file-chip { display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13.5px; text-decoration: none; }
.file-chip b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.req-flag { color: var(--crit); font-size: 12.5px; font-weight: 700; }
.cost-totals { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.cost-totals input.n, .ro.n { text-align: right; font-variant-numeric: tabular-nums; }
.cost-op { font-size: 20px; font-weight: 700; color: var(--accent); padding-bottom: 6px; }
.cost-total { display: flex; align-items: center; justify-content: flex-end; min-height: 40px; padding: 6px 12px; border-radius: 7px; background: var(--maroon); color: var(--on-maroon); font-weight: 800; font-size: 16px; }
.grand td { font-weight: 800; color: var(--maroon); border-top: 2px solid var(--maroon); }
.summary-box { margin-top: 6px; }
.summary-box h3 { margin-bottom: 8px; }
.sum-table { font-size: 13.5px; }

/* Signatures */
.sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sig { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; break-inside: avoid; }
.sig.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(163,119,138,.2); }
.sig .role { font-size: 12px; color: var(--muted); margin-top: -6px; }
.sig-row { display: grid; grid-template-columns: 1fr 150px; gap: 8px; }
.pad-wrap { position: relative; min-height: 110px; border: 1px solid var(--line); border-radius: 6px; background: #FCFBF9; }
canvas.pad { width: 100%; height: 110px; display: block; touch-action: none; cursor: crosshair; }
canvas.pad:not([data-editable]) { display: none; }
.sig-img { display: block; width: 100%; height: 110px; object-fit: contain; }
.pad-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #A99EA2; font-size: 13px; pointer-events: none; text-align: center; padding: 8px; }
.pad-tools { display: flex; justify-content: flex-end; }

/* Response */
.resp { border: 1px solid var(--line); border-left: 8px solid var(--crit); border-radius: 8px; margin-bottom: 10px; }
.resp-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--crit-bg); font-weight: 700; border-radius: 0 7px 0 0; }
.resp-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.resp-time { font-size: 19px; font-weight: 800; color: var(--low); padding-top: 4px; font-variant-numeric: tabular-nums; }
.resp-time.late { color: var(--crit); }

.bottom-bar { position: sticky; bottom: 0; margin: 20px -22px -20px; padding: 12px 22px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; border-radius: 0 0 var(--radius) var(--radius); }
.history { margin-top: 0; }
.print-foot { display: none; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(43,26,33,.55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal-box { background: #fff; border-radius: 10px; max-width: 440px; width: 100%; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 12px; }
.modal-box p { margin: 0; font-size: 15px; white-space: pre-line; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Login */
.login-wrap { min-height: 80vh; display: grid; place-items: center; }
.login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 10px 30px rgba(82,43,58,.08); }
.login-logo { width: 132px; height: auto; align-self: center; margin: 4px 0 6px; }
.login-card > div:first-of-type { text-align: center; }

/* Responsive */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .side { position: sticky; top: 0; inset: auto; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 16px; overflow: visible; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
  .side-brand { flex-direction: row; gap: 12px; padding: 0; border: 0; text-align: left; }
  .side-logo { width: 54px; }
  .side-app { font-size: 11.5px; }
  .side-nav { flex-direction: row; flex-wrap: wrap; order: 3; width: 100%; gap: 4px; }
  .side-nav a { padding: 7px 12px; }
  .side-nav .badge { margin-left: 0; }
  .side-new { margin-left: auto; }
  .side-new .btn { min-height: 34px; padding: 4px 12px; font-size: 13.5px; }
  .side-user { margin: 0; padding: 0; border: 0; flex-direction: row; align-items: center; gap: 14px; }
  body.has-side .page { margin-left: 0; }
}
@media (max-width: 860px) {
  .grid-2, .grid-2.wide-left { grid-template-columns: minmax(0, 1fr); }
  .req-body { grid-template-columns: 1fr; }
  .sigs { grid-template-columns: 1fr; }
  .quote { grid-template-columns: 1fr; }
  .resp-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .side-app small { display: none; }
  .side-user { width: 100%; justify-content: space-between; order: 4; }
  .side-nav svg { display: none; }
  .cost-totals { grid-template-columns: 1fr; }
  .cost-op { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields-3, .meta { grid-template-columns: 1fr; }
  .sig-row { grid-template-columns: 1fr; }
  .sheet { padding: 14px; }
  .bottom-bar { margin: 16px -14px -14px; padding: 10px 14px; }
  .count { margin-left: 0; width: 100%; }
  .act-time { min-width: 0; }
  .activity li { flex-direction: column; gap: 0; }
}

/* Users page */
.users-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.users-layout > .card:last-child { max-width: 640px; }
.users-layout > .card:last-child .stack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.users-layout > .card:last-child .stack > p, .users-layout > .card:last-child .stack > button { grid-column: 1 / -1; }
table.list.users-table { min-width: 0; }
.users-table select { min-width: 0; width: auto; max-width: 100%; }
.users-table th, .users-table td { padding-inline: 8px; }
.users-table td { vertical-align: top; }
.users-table .u-who small { color: var(--muted); font-size: 12.5px; }
.users-table .u-flag { color: var(--high) !important; font-weight: 600; }
.users-table td.actions { white-space: normal; }
.users-table .act-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
details.reset > summary { list-style: none; }
details.reset > summary::-webkit-details-marker { display: none; }
details.reset[open] > summary { background: var(--accent-soft); border-color: var(--accent); }
.reset-form { display: flex; gap: 6px; margin-top: 6px; min-width: 260px; }
.reset-form input { min-height: 32px; padding: 4px 8px; font-size: 13.5px; }
.cred-card { background: var(--surface); border: 2px solid var(--maroon); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 20px rgba(82,43,58,.12); }
.cred-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cred-head h2 { margin: 0; }
.cred-warn { margin: 0; padding: 8px 12px; background: var(--med-bg); border-radius: 8px; font-size: 14px; }
.cred-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cred-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 8px; background: var(--soft); border-radius: 8px; padding: 10px 12px; }
.cred-item span { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cred-item b { font-size: 16px; overflow-wrap: anywhere; }
.cred-pw { font-family: Consolas, "SF Mono", Menlo, monospace; font-size: 20px !important; letter-spacing: .04em; color: var(--maroon); }
.cred-msg textarea { font-size: 14px; background: var(--soft); }
.icon-btn.copied { background: var(--low-bg); color: var(--low); border-color: var(--low); }
@media (max-width: 860px) { .cred-grid { grid-template-columns: 1fr; } }

/* ---------- Phone (below 600 px). Nothing here applies on a PC screen. ---------- */
.tabbar, .ph-only { display: none; }
@media (max-width: 600px) {
  /* inputs at 16 px so iPhone does not zoom in when typing */
  input, select, textarea, .filters input, .filters select { font-size: 16px; }
  /* compact header that scrolls away; navigation moves to the bottom tab bar */
  .side { position: static; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); gap: 8px 12px; box-shadow: none; }
  .side-logo { width: 46px; }
  .side-nav, .side-new, .side-user .who-name, .side-links .who-link:not(.linkbtn) { display: none; }
  .side-user { width: auto; order: 0; margin-left: auto; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(43,26,33,.08); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; align-items: flex-end; }
  .tabbar > a, .tab-new { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted); text-decoration: none; padding: 4px 2px; min-height: 48px; justify-content: center; position: relative; }
  .tabbar > a.on { color: var(--maroon); }
  .tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar .badge { position: absolute; top: 0; left: calc(50% + 6px); font-size: 10px; padding: 0 5px; }
  .tabbar form { flex: 1; margin: 0; display: flex; }
  .tab-new { border: 0; background: none; cursor: pointer; color: var(--maroon); font: inherit; font-size: 11px; font-weight: 700; }
  .tab-new span { width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; background: var(--maroon); color: var(--on-maroon); display: grid; place-items: center; font-size: 28px; font-weight: 400; line-height: 1; box-shadow: 0 4px 12px rgba(82,43,58,.35); border: 3px solid #fff; }
  body.has-side .page { padding: 16px 14px calc(96px + env(safe-area-inset-bottom)); gap: 14px; }
  .ph-only { display: block; }
  .who-card { display: flex; flex-direction: column; margin-bottom: 12px; }
  h1 { font-size: 22px; }
  .head-actions .btn, .head-actions { flex-wrap: nowrap; }

  /* MR page: its own action bar sits at the bottom, so the tab bar steps aside */
  body.on-detail .tabbar { display: none; }
  body.on-detail.has-side .page { padding-bottom: 24px; }
  .dup-action { display: none; }
  .mr-head { align-items: flex-start; }
  .head-actions .btn { min-height: 36px; padding: 5px 12px; font-size: 13.5px; }
  .steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; padding-bottom: 2px; }
  .steps::-webkit-scrollbar { display: none; }
  .steps li { flex: none; }
  .steps li:not(.now) { font-size: 0; gap: 0; padding: 4px; }
  .steps li b { font-size: 11.5px; }
  .stepper-card { padding: 12px 14px; }
  .stage-actions { width: 100%; }
  .stage-actions .btn, .stage-actions form.inline { flex: 1 1 auto; }
  .stage-actions form.inline .btn { width: 100%; }
  .bottom-bar { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 8px; box-shadow: 0 -4px 14px rgba(43,26,33,.08); }
  .bottom-bar .btn { flex: 1; min-height: 46px; font-size: 15px; }
  .bottom-bar .btn-ghost { flex: 0 0 34%; }
  .req-head, .comp-head { padding: 9px 10px; }
  .prio { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .prio .pill { display: block; text-align: center; padding: 8px 2px; font-size: 13px; }
  .req-head .push-right { margin-left: auto; }
  .req-body, .comp-pad { padding: 10px; }
  .add-photo { min-height: 64px; font-size: 14.5px; }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
  .add-req { padding: 14px; font-size: 15px; }
  canvas.pad, .sig-img { height: 150px; }
  .pad-wrap { min-height: 150px; }
  .resp-body { grid-template-columns: 1fr; }
  .ph-hide { display: none; }
  .sum-table { min-width: 0; }

  /* Dashboard: what needs your action first */
  body.on-dash .page > * { order: 5; }
  body.on-dash .page > .flashes { order: 0; }
  body.on-dash .page > .head { order: 1; }
  body.on-dash .page > .dash-now { order: 2; }
  body.on-dash .page > .kpis { order: 3; }
  body.on-dash .page > .dash-pipe { order: 4; }
  .kpi { padding: 12px; gap: 10px; }
  .kpi b { font-size: 21px; }
  .dot { width: 36px; height: 36px; }
  .dot svg { width: 18px; height: 18px; }
  .card { padding: 14px; }
  .row-link { flex-wrap: wrap; }

  /* Requests list: one card per MR instead of a wide table */
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .filters input[type=search] { grid-column: 1 / -1; width: 100%; }
  .filters select, .filters .btn { width: 100%; }
  .tabs a { flex: 1; text-align: center; padding: 8px 6px; }
  table.cards-on-phone { min-width: 0; }
  table.cards-on-phone thead { display: none; }
  table.cards-on-phone, table.cards-on-phone tbody { display: block; }
  table.cards-on-phone tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  table.cards-on-phone td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  table.cards-on-phone td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-size: 12px; font-weight: 600; }
  table.cards-on-phone tr.clickable td:first-child { box-shadow: none; }
  table.cards-on-phone tr[class*="stripe-"] { box-shadow: inset 4px 0 0 var(--none); }
  table.cards-on-phone tr.stripe-critical { box-shadow: inset 4px 0 0 var(--crit); }
  table.cards-on-phone tr.stripe-high { box-shadow: inset 4px 0 0 var(--high); }
  table.cards-on-phone tr.stripe-medium { box-shadow: inset 4px 0 0 var(--med); }
  table.cards-on-phone tr.stripe-low { box-shadow: inset 4px 0 0 var(--low); }
  table.mr-cards tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref prio" "fac fac" "step est" "date items"; align-items: center; }
  table.mr-cards tr:has(td.empty) { display: block; }
  tr.clickable:hover td { background: none; }
  .card.flush table.cards-on-phone td:first-child { padding-left: 0; }
  .c-ref { grid-area: ref; font-size: 15px; overflow-wrap: anywhere; }
  .c-prio { grid-area: prio; justify-self: end; }
  .c-fac { grid-area: fac; font-size: 13.5px; }
  .c-step { grid-area: step; }
  .c-est { grid-area: est; justify-self: end; font-weight: 700; }
  .c-date { grid-area: date; }
  .c-items { grid-area: items; justify-self: end; }
  .c-date, .c-items { font-size: 12.5px; color: var(--muted); }
  .c-with, .c-upd { display: none !important; }
  td.empty { padding: 24px 14px; }
  /* Users: one card per account */
  .users-table tr { grid-template-columns: 1fr 1fr; }
  .users-table .u-who, .users-table .u-role, .users-table td.actions { grid-column: 1 / -1; }
  .users-table .u-who b { font-size: 15px; }
  .users-table td[data-label] { font-size: 12.5px; }
  .users-table .act-row > details, .users-table .act-row > form { flex: 1 1 auto; }
  .users-table td.actions .btn { width: 100%; min-height: 40px; }
  .reset-form { min-width: 0; flex-direction: column; }
  .users-layout > .card:last-child .stack { grid-template-columns: 1fr; }
  .cred-card { padding: 14px; }
  .table-wrap:has(.cards-on-phone) { overflow: visible; }
  .card:has(> .table-wrap > .users-table) { padding-inline: 0; }
  .card:has(> .table-wrap > .users-table) > h2, .card:has(> .table-wrap > .users-table) > p { padding-inline: 14px; }

  .login-wrap { min-height: 0; padding-top: 24px; }
  .login-card { padding: 22px 18px; }
}

/* Expected completion, system log, locations */
.due-hint { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.due-reset { color: var(--maroon); font-size: 12px; }
.log-filters label { display: inline-flex; align-items: center; gap: 6px; }
.log-filters input[type=date] { width: auto; }
table.log-table { min-width: 980px; font-size: 13.5px; }
.log-table td { vertical-align: top; }
.log-table .lg-detail { max-width: 380px; overflow-wrap: anywhere; }
.log-cat { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--soft-2); }
.log-signin .log-cat { background: #E6F0F7; color: #1F5378; }
.log-users .log-cat, .log-account .log-cat { background: var(--accent-tint); color: var(--maroon); }
.log-mr .log-cat { background: #F1E7DC; color: #6B4A2E; }
.log-files .log-cat, .log-export .log-cat { background: var(--low-bg); color: var(--low); }
.log-access .log-cat { background: var(--crit-bg); color: var(--crit); }
tr.log-alert td:first-child { box-shadow: inset 4px 0 0 var(--crit); }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; }
.archive-row .row-main { flex: 1; }
.archive-row { display: flex; align-items: center; gap: 8px; padding: 9px 4px; }
.loc-code { font-family: Consolas, "SF Mono", Menlo, monospace; font-weight: 700; color: var(--maroon); background: var(--accent-soft); padding: 2px 6px; border-radius: 4px; }
.admin-links { display: flex; flex-direction: column; gap: 8px; }
.admin-links h2 { margin-bottom: 2px; }
@media (max-width: 600px) {
  table.log-table { min-width: 0; }
  .log-table tr { grid-template-columns: 1fr auto; }
  .log-table .lg-time { grid-column: 1; font-size: 12.5px; color: var(--muted); }
  .log-table .lg-time small { display: inline; margin-left: 4px; }
  .log-table .lg-cat { grid-column: 2; grid-row: 1; justify-self: end; }
  .log-table .lg-user, .log-table .lg-act, .log-table .lg-detail, .log-table .lg-mr, .log-table .lg-ip { grid-column: 1 / -1; }
  .log-table .lg-detail { max-width: none; font-size: 13px; }
  .log-table .lg-ip { font-size: 12px; color: var(--muted); }
  .log-table .lg-ip small { display: inline; margin-left: 6px; }
  .log-filters label { grid-column: span 1; flex-direction: column; align-items: stretch; gap: 2px; }
  .log-filters input[type=date] { width: 100%; }
  .loc-table th:nth-child(3), .loc-table td:nth-child(3) { display: none; }
}

/* Print */
@page { size: A4; margin: 11mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 11.5px; }
  .no-print, .side, .tabbar, .flashes, .modal { display: none !important; }
  body.has-side .page { margin-left: 0; }
  .page { padding: 0; max-width: none; }
  .print-logo { display: block; width: 74px; height: auto; }
  .cost-total { background: transparent; color: var(--maroon); border: 0; border-bottom: 2px solid var(--maroon); border-radius: 0; padding: 2px 0; min-height: 0; font-size: inherit; }
  .cost-op { padding-bottom: 0; font-size: 14px; }
  .mr-head { border-bottom: 3px solid var(--maroon); padding-bottom: 8px; }
  .stepper-card, .sheet { border: 0; padding: 0; }
  .ro { background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 2px 0; min-height: 0; }
  input, select, textarea { border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; padding: 2px 0 !important; min-height: 0 !important; -webkit-appearance: none; appearance: none; }
  .prio input:not(:checked) + .pill { display: none; }
  .req-body { grid-template-columns: minmax(0, 1fr) 180px; }
  .fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sigs { grid-template-columns: 1fr 1fr; }
  .sig.active { box-shadow: none; border-color: var(--line); }
  .pad-hint { display: none; }
  #partD { break-before: page; page-break-before: always; }
  .print-foot { display: block; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 6px; font-size: 10.5px; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }