/* PRECON brand: dark steel, safety-orange accent, blue secondary (matches preconvalves.in) */
:root {
  --bg: #0b0e14; --bg-alt: #10141d; --card: #151a24; --line: #232937; --steel: #3b4354;
  --ink: #c7cdd9; --ink-h: #f3f5f9; --mute: #7c8496;
  --accent: #2f7de1; --accent-bright: #55a3ff; --safety: #ff6a1a; --safety-soft: #ff6a1a24;
  --input: #0f1420;
  --ok-bg: #12301f; --ok: #6fd58e; --warn-bg: #3a2e0e; --warn: #f1c453; --bad-bg: #3d1818; --bad: #ff8a8a; --idle-bg: #1d2330; --idle: #aab3c5;
  --sans: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 var(--sans); background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: var(--ink-h); }
a { color: var(--accent-bright); }

header.top { background: var(--bg); border-bottom: 1px solid var(--line); border-top: 3px solid var(--safety); padding: 10px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 5; }
header.top .logo { height: 32px; width: auto; }
.has-logo header.top .brand, .has-logo .login .brand { display: none; }
.has-logo header.top .sub { letter-spacing: .2em; border-left: 1px solid var(--steel); padding-left: 12px; }
header.top .brand { font-weight: 800; letter-spacing: .08em; color: var(--ink-h); font-size: 17px; }
header.top .brand sup { font-size: 9px; }
header.top .sub { font: 11px var(--mono); letter-spacing: .14em; color: var(--safety); text-transform: uppercase; }
header.top .grow { flex: 1; }
header.top .who { font-size: 13px; color: var(--mute); }

nav.tabs { display: flex; gap: 2px; padding: 8px 12px 0; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
nav.tabs button { border: 0; background: transparent; padding: 11px 16px; color: var(--mute); cursor: pointer; white-space: nowrap; font-weight: 600; border-bottom: 3px solid transparent; }
nav.tabs button.on { color: var(--ink-h); border-bottom-color: var(--safety); }
main { padding: 14px 16px 50px; max-width: 1240px; margin: 0 auto; }
h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 22px 0 8px; font-weight: 700; }
h3 { font-size: 15px; margin: 0; color: var(--ink-h); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 10px 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grow { flex: 1; }
.mute { color: var(--mute); font-size: 13px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--steel); border-radius: 10px; padding: 10px 14px; }
.kpi span { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.kpi b { display: block; font-size: 28px; color: var(--ink-h); line-height: 1.2; }
.kpi.k-bad { border-left-color: #e04646; } .kpi.k-bad b { color: var(--bad); }
.kpi.k-warn { border-left-color: var(--safety); } .kpi.k-warn b { color: var(--safety); }
.kpi.k-ok { border-left-color: #3fb868; }

button.btn { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 9px 15px; cursor: pointer; font-weight: 700; }
button.btn:hover { background: var(--accent-bright); }
button.btn.alt { background: transparent; color: var(--accent-bright); border: 1px solid var(--steel); }
button.btn.warn { background: var(--safety); color: #1a0d03; }
button.btn.danger { background: transparent; color: var(--bad); border: 1px solid var(--steel); }
button.btn.sm { padding: 5px 10px; font-size: 13px; }
button.ico { background: transparent; border: 1px solid var(--steel); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; padding: 0; color: var(--ink); }
button:disabled { opacity: .35; cursor: default; }
input, select, textarea { background: var(--input); border: 1px solid var(--steel); border-radius: 6px; padding: 8px 10px; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
input.in { width: 100%; }
input[type=number] { width: 80px; }
input[type=date] { color-scheme: dark; }
textarea { width: 100%; min-height: 64px; resize: vertical; }
label.f { display: flex; flex-direction: column; gap: 3px; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
label.f input, label.f select { font: 15px var(--sans); letter-spacing: 0; text-transform: none; }

.b { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.b-Completed, .b-Done { background: var(--ok-bg); color: var(--ok); }
.b-InProgress { background: var(--warn-bg); color: var(--warn); }
.b-Overdue { background: var(--bad-bg); color: var(--bad); }
.b-NotStarted, .b-Waiting { background: var(--idle-bg); color: var(--idle); }
.b-AtRisk { background: var(--safety-soft); color: var(--safety); }
.bar { position: relative; height: 18px; background: var(--idle-bg); border-radius: 9px; overflow: hidden; min-width: 90px; }
.bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2f7de1, #55a3ff); }
.bar span { position: relative; font-size: 12px; font-weight: 700; display: block; text-align: center; line-height: 18px; color: #fff; text-shadow: 0 0 3px #000a; }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 6px 8px; border-bottom: 1px solid var(--steel); white-space: nowrap; }
td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td input[type=text], td select { width: 100%; min-width: 110px; }
tr.link { cursor: pointer; }
tr.link:hover td { background: var(--bg-alt); }
.part { margin: 14px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.part.asm h3 { color: var(--safety); }
.part.asm h3::before { content: "▶ "; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; margin: 10px 0; }
.stats div { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 8px; padding: 6px 2px; }
.stats b { display: block; font-size: 18px; color: var(--ink-h); }
.stats span { font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }

.job .big { font-size: 18px; font-weight: 800; color: var(--ink-h); }
.job input[type=number] { width: 100%; font-size: 22px; padding: 10px; }
.job .btn.go { width: 100%; padding: 14px; font-size: 16px; background: var(--safety); color: #1a0d03; }
details.issue { margin-top: 12px; border-top: 1px dashed var(--steel); padding-top: 10px; }
details.issue summary { cursor: pointer; color: var(--safety); font-weight: 700; list-style: none; }
details.issue summary::-webkit-details-marker { display: none; }
details.issue[open] summary { margin-bottom: 10px; }
.flag { background: var(--safety-soft); border: 1px solid #ff6a1a66; color: var(--safety); border-radius: 8px; padding: 6px 10px; font-size: 13px; margin-top: 8px; }

.charts { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
@media (max-width: 800px) { .charts { grid-template-columns: 1fr; } }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart text { fill: var(--mute); font: 10px var(--mono); }
svg.chart .v { fill: var(--ink-h); }
.lb { display: grid; grid-template-columns: 90px 1fr 44px; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.lb .t { height: 12px; background: var(--idle-bg); border-radius: 6px; overflow: hidden; }
.lb .t i { display: block; height: 100%; background: var(--safety); }

.login { max-width: 380px; margin: 9vh auto; padding: 0 16px; text-align: center; }
.login .card { padding: 24px; text-align: left; border-top: 3px solid var(--safety); }
.login img { max-height: 54px; margin: 0 auto 6px; display: block; }
.login .brand { text-align: center; font-weight: 800; letter-spacing: .1em; font-size: 22px; color: var(--ink-h); }
.login .sub { text-align: center; font: 11px var(--mono); letter-spacing: .16em; color: var(--safety); margin-bottom: 18px; text-transform: uppercase; }
.login select, .login input { width: 100%; font-size: 17px; padding: 12px; margin: 4px 0 14px; }
#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(80px); background: #e8ecf3; color: #0b0e14; padding: 10px 18px; border-radius: 8px; opacity: 0; transition: .25s; z-index: 20; max-width: 90vw; font-weight: 600; }
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.bad { background: #ff6a6a; }

/* ---------- entry pop-up forms ---------- */
dialog { background: var(--card); color: var(--ink); border: 1px solid var(--steel); border-top: 3px solid var(--safety); border-radius: 12px; padding: 22px; width: min(460px, 92vw); }
dialog::backdrop { background: #000b; }
dialog h3 { font-size: 18px; margin-bottom: 6px; }
dialog label.f { margin-top: 14px; }
dialog label.f input, dialog label.f select { width: 100%; font-size: 16px; padding: 11px; }
dialog small { text-transform: none; letter-spacing: 0; font: 12px var(--sans); color: var(--mute); margin-top: 2px; }
dialog input:invalid:not(:placeholder-shown) { border-color: var(--bad); }

/* ---------- print sheet (work order) ---------- */
#print { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; color: #000; font: 11px/1.4 Arial, sans-serif; }
  #app, #toast { display: none !important; }
  #print { display: block; }
  .ps-top { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #ff6a1a; padding-bottom: 6px; margin-bottom: 8px; }
  .ps-brand { font-size: 24px; font-weight: 800; letter-spacing: .08em; }
  .ps-sub { font-size: 10px; color: #444; }
  .ps-title { text-align: right; font-size: 12px; letter-spacing: .1em; } .ps-title b { font-size: 20px; letter-spacing: 0; }
  .ps-meta td { border: 1px solid #999; padding: 4px 8px; font-size: 12px; } .ps-meta span { display: block; font-size: 9px; color: #555; text-transform: uppercase; }
  .ps h3 { font-size: 14px; margin: 12px 0 2px; border-left: 4px solid #2f7de1; padding-left: 6px; color: #000; }
  .ps h4 { font-size: 11px; margin: 6px 0 2px; color: #333; }
  .ps-t th { background: #e9edf3; color: #000; border: 1px solid #888; font: bold 9px Arial; padding: 3px 4px; }
  .ps-t td { border: 1px solid #888; padding: 4px; height: 20px; font-size: 11px; }
  .ps-box { border: 1px solid #888; height: 60px; margin-top: 4px; }
  .ps-sign { margin-top: 16px; } .ps-sign td { border: 1px solid #888; height: 54px; vertical-align: bottom; font-size: 10px; color: #444; width: 25%; }
  table { page-break-inside: auto; } tr { page-break-inside: avoid; }
}